Javascript
March 25, 2017 | Author: Cristina Millàs | Category: N/A
Short Description
Download Javascript...
Description
JavaScript
JavaScript
PUOC FUOC
Módulo 2: JavaScript
3
PUOC FUOC
Módulo 2: JavaScript
3
Índice
Índice
Etapa 1: Introducción ........................................................................................... 5 Introducción .......................................................................................................... 5
Etapa 1: Introducción ........................................................................................... 5 Introducción .......................................................................................................... 5
JavaScript y los navegadores ............................................................................... 6
JavaScript y los navegadores ............................................................................... 6
Estrategia de desarrollo ............................................................................................. 7
Estrategia de desarrollo ............................................................................................. 7
Detectar errores durante el desarrollo......................................................................... 8
Detectar errores durante el desarrollo......................................................................... 8
Etapa 2: Fundamentos de JavaScript ................................................................. 10 ¿Qué es JavaScript? .............................................................................................. 10
Etapa 2: Fundamentos de JavaScript ................................................................. 10 ¿Qué es JavaScript? .............................................................................................. 10
Lenguaje de script ..................................................................................................... 10
Lenguaje de script ..................................................................................................... 10
Introducción de código JavaScript en páginas HTML ..................................... 11
Introducción de código JavaScript en páginas HTML ..................................... 11
JavaScript incrustado en el código HTML .................................................................. 12
JavaScript incrustado en el código HTML .................................................................. 12
Inclusión de ficheros .js en las páginas HTML ............................................................ 15
Inclusión de ficheros .js en las páginas HTML ............................................................ 15
Sentencias JavaScript ................................................................................................. 16
Sentencias JavaScript ................................................................................................. 16
Escritura de texto en las páginas HTML ............................................................ 17
Escritura de texto en las páginas HTML ............................................................ 17
El método write ........................................................................................................ 17
El método write ........................................................................................................ 17
El método writeln ...................................................................................................... 20
El método writeln ...................................................................................................... 20
Etiquetas HTML ......................................................................................................... 20
Etiquetas HTML ......................................................................................................... 20
Etapa 3: El lenguaje JavaScript ........................................................................... 22 Introducción .......................................................................................................... 22
Etapa 3: El lenguaje JavaScript ........................................................................... 22 Introducción .......................................................................................................... 22
Palabras reservadas ............................................................................................... 22
Palabras reservadas ............................................................................................... 22
Datos ....................................................................................................................... 23
Datos ....................................................................................................................... 23
Literales .................................................................................................................. 24
Literales .................................................................................................................. 24
Comentarios .......................................................................................................... 24
Comentarios .......................................................................................................... 24
Variables ................................................................................................................ 24
Variables ................................................................................................................ 24
Declaración y asignación de variables......................................................................... 26
Declaración y asignación de variables......................................................................... 26
Ámbito de las variables............................................................................................... 26
Ámbito de las variables............................................................................................... 26
Conversaciones de tipo .............................................................................................. 26
Conversaciones de tipo .............................................................................................. 26
Operadores ............................................................................................................ 27
Operadores ............................................................................................................ 27
Operadores aritméticos .............................................................................................. 28
Operadores aritméticos .............................................................................................. 28
Operadores de asignación.......................................................................................... 29
Operadores de asignación.......................................................................................... 29
Operadores de comparación ...................................................................................... 29
Operadores de comparación ...................................................................................... 29
Operadores boleanos ................................................................................................. 29
Operadores boleanos ................................................................................................. 29
Operadores de bits..................................................................................................... 30
Operadores de bits..................................................................................................... 30
El operador + ............................................................................................................. 30
El operador + ............................................................................................................. 30
El operador :?............................................................................................................. 31
El operador :?............................................................................................................. 31
Signos de puntuación ................................................................................................ 31
Signos de puntuación ................................................................................................ 31
Operadores para el trabajo con objetos...................................................................... 31
Operadores para el trabajo con objetos...................................................................... 31
Precedencia de operadores ........................................................................................ 32
Precedencia de operadores ........................................................................................ 32
PUOC FUOC
Módulo 2: JavaScript
4
PUOC FUOC
Módulo 2: JavaScript
4
Estructuras de control condicionales ................................................................. 33
Estructuras de control condicionales ................................................................. 33
La estructura de control if .......................................................................................... 33
La estructura de control if .......................................................................................... 33
La estructura de control if ... else................................................................................ 34
La estructura de control if ... else................................................................................ 34
La estructura de control if ... else if... ......................................................................... 35
La estructura de control if ... else if... ......................................................................... 35
La estructura de control switch................................................................................... 37
La estructura de control switch................................................................................... 37
Estructuras de control iterativas......................................................................... 39
Estructuras de control iterativas......................................................................... 39
La estructura de control for ........................................................................................ 39
La estructura de control for ........................................................................................ 39
La estructura de control while .................................................................................... 41
La estructura de control while .................................................................................... 41
La estructura de control do ... while ........................................................................... 42
La estructura de control do ... while ........................................................................... 42
La sentencia break...................................................................................................... 43
La sentencia break...................................................................................................... 43
La sentencia with ....................................................................................................... 45
La sentencia with ....................................................................................................... 45
Etapa 4: Funciones y objetos ............................................................................... 46 Definición de una función ................................................................................... 46
Etapa 4: Funciones y objetos ............................................................................... 46 Definición de una función ................................................................................... 46
Definición de la función ............................................................................................ 46
Definición de la función ............................................................................................ 46
Ubicación en el documento HTML ............................................................................ 47
Ubicación en el documento HTML ............................................................................ 47
Llamada a la función ................................................................................................. 48
Llamada a la función ................................................................................................. 48
Parámetros de la función ........................................................................................... 48
Parámetros de la función ........................................................................................... 48
Propiedades de las funciones...................................................................................... 51
Propiedades de las funciones...................................................................................... 51
Retorno de la función ................................................................................................ 53
Retorno de la función ................................................................................................ 53
Funciones locales ....................................................................................................... 55
Funciones locales ....................................................................................................... 55
Funciones como objetos............................................................................................. 55
Funciones como objetos............................................................................................. 55
Funciones predefinidas ........................................................................................ 56
Funciones predefinidas ........................................................................................ 56
Función eval .............................................................................................................. 56
Función eval .............................................................................................................. 56
Función parseInt ....................................................................................................... 56
Función parseInt ....................................................................................................... 56
Función parseFloat .................................................................................................... 57
Función parseFloat .................................................................................................... 57
Función isNaN .......................................................................................................... 57
Función isNaN .......................................................................................................... 57
Función isFinite ......................................................................................................... 57
Función isFinite ......................................................................................................... 57
Función Number ....................................................................................................... 58
Función Number ....................................................................................................... 58
Función String .......................................................................................................... 58
Función String .......................................................................................................... 58
Las funciones decodeURI,
Las funciones decodeURI,
decodeURIComponent, encodeURI y encodeURIComponent .................................... 59
decodeURIComponent, encodeURI y encodeURIComponent .................................... 59
Las funciones escape y unscape.................................................................................. 61
Las funciones escape y unscape.................................................................................. 61
Función toString ....................................................................................................... 61
Función toString ....................................................................................................... 61
Las funciones watch y unwatch .................................................................................. 61
Las funciones watch y unwatch .................................................................................. 61
PUOC FUOC
Módulo 2: JavaScript
5
Etapa 1: Introducción
PUOC FUOC
Módulo 2: JavaScript
5
Etapa 1: Introducción
Introducción
Introducción
El entusiasmo que actualmente despierta Internet, provoca que los programadores
El entusiasmo que actualmente despierta Internet, provoca que los programadores
de páginas web busquen constantemente herramientas que hagan sus sitios más
de páginas web busquen constantemente herramientas que hagan sus sitios más
atractivos a los visitantes.
atractivos a los visitantes.
JavaScript ofrece al programador familiarizado con el lenguaje HTML, la posibilidad
JavaScript ofrece al programador familiarizado con el lenguaje HTML, la posibilidad
de enriquecer sus páginas, sin necesidad de conocer los entresijos del servidor que se
de enriquecer sus páginas, sin necesidad de conocer los entresijos del servidor que se
encuentra al otro lado del hilo telefónico.
encuentra al otro lado del hilo telefónico.
De la necesidad de añadir más dinamismo y funcionalidad a las páginas HTML, surgió el lenguaje Java, derivado de los lenguajes C y C++. Java se concibe como un lenguaje que funcionará sobre la definición de una máquina virtual, pudiendo ejecutarse así, en cualquier plataforma. Al ser Java un lenguaje de propósito general, no cumplía con las expectativas de quien esperaba adoptar rápidamente un lenguaje más simple para realizar sus propias aplicaciones en Internet. En 1995 Netscape presentó el primer lenguaje de script para su inclusión en páginas web, que en un principio se dio a conocer con el nombre LiveScript y se desarrolló en paralelo con el software de servidor web de Netscape. Este lenguaje tenía dos propósitos fundamentales: – Que fuera un lenguaje que los administradores del servidor web pudieran usar para gestionar el servidor y conectar sus páginas con otros servicios, como bases de datos y búsqueda de información. – Que en el cliente - en los documentos HTML - estos scripts pudieran ser usados para aumentar sus capacidades. Por ejemplo, se podría usar LiveScript para comprobar si la información introducida por un usuario en un formulario era correcta.
Poco después Netscape y Sun anunciaron conjuntamente la aparición del lenguaje de script al que llamaron JavaScript (la adopción de este nombre vino motivada por cuestiones de marketing, debido al futuro mundo Java-HTML que se estaba esperando). Hoy en día, aún hay quien creé que JavaScript es sinónimo de Java. Aunque la sintaxis básica de JavaScript tiene reminiscencias del estilo C y C++ de Java, los propósitos de JavaScript son distintos a los de Java: – JavaScript es un lenguaje de programación para ser integrado dentro de los documentos HTML, mientras que Java en el navegador nos permitirá por ejemplo, crear applets (programas independientes) que podremos incluir en nuestras páginas y que ocuparán un área rectangular fija en nuestro documento HTML. – JavaScript tiene un vocabulario menos extenso y un modelo de programación más sencillo. – Tener soporte para Java en el navegador o en el sistema operativo, no implica que automáticamente se tenga soporte para JavaScript. Cada lenguaje necesita su propio intérprete para ejecutar las líneas de código.
De la necesidad de añadir más dinamismo y funcionalidad a las páginas HTML, surgió el lenguaje Java, derivado de los lenguajes C y C++. Java se concibe como un lenguaje que funcionará sobre la definición de una máquina virtual, pudiendo ejecutarse así, en cualquier plataforma. Al ser Java un lenguaje de propósito general, no cumplía con las expectativas de quien esperaba adoptar rápidamente un lenguaje más simple para realizar sus propias aplicaciones en Internet. En 1995 Netscape presentó el primer lenguaje de script para su inclusión en páginas web, que en un principio se dio a conocer con el nombre LiveScript y se desarrolló en paralelo con el software de servidor web de Netscape. Este lenguaje tenía dos propósitos fundamentales: – Que fuera un lenguaje que los administradores del servidor web pudieran usar para gestionar el servidor y conectar sus páginas con otros servicios, como bases de datos y búsqueda de información. – Que en el cliente - en los documentos HTML - estos scripts pudieran ser usados para aumentar sus capacidades. Por ejemplo, se podría usar LiveScript para comprobar si la información introducida por un usuario en un formulario era correcta.
Poco después Netscape y Sun anunciaron conjuntamente la aparición del lenguaje de script al que llamaron JavaScript (la adopción de este nombre vino motivada por cuestiones de marketing, debido al futuro mundo Java-HTML que se estaba esperando). Hoy en día, aún hay quien creé que JavaScript es sinónimo de Java. Aunque la sintaxis básica de JavaScript tiene reminiscencias del estilo C y C++ de Java, los propósitos de JavaScript son distintos a los de Java: – JavaScript es un lenguaje de programación para ser integrado dentro de los documentos HTML, mientras que Java en el navegador nos permitirá por ejemplo, crear applets (programas independientes) que podremos incluir en nuestras páginas y que ocuparán un área rectangular fija en nuestro documento HTML. – JavaScript tiene un vocabulario menos extenso y un modelo de programación más sencillo. – Tener soporte para Java en el navegador o en el sistema operativo, no implica que automáticamente se tenga soporte para JavaScript. Cada lenguaje necesita su propio intérprete para ejecutar las líneas de código.
PUOC FUOC
Módulo 2: JavaScript
6
Es importante no confundir el lenguaje JavaScript con el lenguaje Java.
JavaScript
Java
PUOC FUOC
Módulo 2: JavaScript
6
Es importante no confundir el lenguaje JavaScript con el lenguaje Java.
JavaScript
Java
Es un lenguaje de programación para ser integrado dentro de los documentos HTML.
Se generan ficheros independientes (por ejemplo applets que pueden incluirse en las páginas HTML ocupando una área rectangular fija el documento).
Es un lenguaje de programación para ser integrado dentro de los documentos HTML.
Se generan ficheros independientes (por ejemplo applets que pueden incluirse en las páginas HTML ocupando una área rectangular fija el documento).
Es interpretado por el cliente web (navegador). No se compila.
Compilado en el servidor e interpretado por el cliente web (applets).
Es interpretado por el cliente web (navegador). No se compila.
Compilado en el servidor e interpretado por el cliente web (applets).
Basado en objetos.
Orientado a objetos.
Basado en objetos.
Orientado a objetos.
No es necesario declarar las variables ni su tipo.
Es imprescindible declarar las variables y los tipos de éstas.
No es necesario declarar las variables ni su tipo.
Es imprescindible declarar las variables y los tipos de éstas.
Lenguaje sencillo y modelo de objetos reducido y orientado a documentos HTML.
Modelo de objetos más amplio con vocación de lenguaje de propósito general (no sólo applets).
Lenguaje sencillo y modelo de objetos reducido y orientado a documentos HTML.
Modelo de objetos más amplio con vocación de lenguaje de propósito general (no sólo applets).
JavaScript y los navegadores
JavaScript y los navegadores
La competición en la industria del software en el mundo del web por obtener la
La competición en la industria del software en el mundo del web por obtener la
superioridad en el mercado, implica que compañías como Netscape y Microsoft
superioridad en el mercado, implica que compañías como Netscape y Microsoft
saquen al mercado nuevas versiones de sus navegadores con nuevas capacidades, de
saquen al mercado nuevas versiones de sus navegadores con nuevas capacidades, de
manera que los intérpretes de JavaScript y HTML acaban siendo diferentes. Esto hace
manera que los intérpretes de JavaScript y HTML acaban siendo diferentes. Esto hace
que el productor de páginas web tenga que poner especial atención a la hora de
que el productor de páginas web tenga que poner especial atención a la hora de
generar sus páginas si quiere que éstas sean vistas correctamente por la mayoría de
generar sus páginas si quiere que éstas sean vistas correctamente por la mayoría de
clientes que las visitan.
clientes que las visitan.
La compatibilidad entre navegadores ha supuesto un problema desde el principio. Se
La compatibilidad entre navegadores ha supuesto un problema desde el principio. Se
ha reclamado desde entonces lo que Sun Microsystems prometió para los entornos
ha reclamado desde entonces lo que Sun Microsystems prometió para los entornos
de desarrollo Java: "escribir una vez, ejecutar en cualquier sitio".
de desarrollo Java: "escribir una vez, ejecutar en cualquier sitio".
Aún con las especificaciones marcadas por las organizaciones que se encargan de
Aún con las especificaciones marcadas por las organizaciones que se encargan de
definir estándares, la presión del mercado y la competitividad entre las empresas
definir estándares, la presión del mercado y la competitividad entre las empresas
hace que éstas incumplan los estándares en pos de ofrecer mayores funcionalidades,
hace que éstas incumplan los estándares en pos de ofrecer mayores funcionalidades,
con lo que actualmente es raro encontrar etiquetas idénticas y con la misma
con lo que actualmente es raro encontrar etiquetas idénticas y con la misma
funcionalidad para los diferentes navegadores que existen.
funcionalidad para los diferentes navegadores que existen.
Frente el anterior problema surge una iniciativa para estandarizar y provocar una
Frente el anterior problema surge una iniciativa para estandarizar y provocar una
convergencia de las distintas versiones de JavaScript. Esta iniciativa se llamará
convergencia de las distintas versiones de JavaScript. Esta iniciativa se llamará
ECMAScript y la primera edición es aprovada en la asamblea general de la sociedad
ECMAScript y la primera edición es aprovada en la asamblea general de la sociedad
PUOC FUOC
Módulo 2: JavaScript
7
PUOC FUOC
Módulo 2: JavaScript
7
ECMA, tomando el nombre de estándar ECMA-262. En junio de 1998 se aprueba la
ECMA, tomando el nombre de estándar ECMA-262. En junio de 1998 se aprueba la
segunda edición y en diciembre de 1999 la tercera y actual.
segunda edición y en diciembre de 1999 la tercera y actual.
El estándar define la sintaxis del lenguaje, es decir, los tipos de datos, las estructuras
El estándar define la sintaxis del lenguaje, es decir, los tipos de datos, las estructuras
iterativas y condicionales, la definición de funciones.
iterativas y condicionales, la definición de funciones.
La aprovación del estándar provoca un cambio de dirección por parte de las empresas
La aprovación del estándar provoca un cambio de dirección por parte de las empresas
desarrolladoras, lo cual ha llevado a la situación actual donde los principales
desarrolladoras, lo cual ha llevado a la situación actual donde los principales
navegadores cumplen el estándar ECMA-262 y por tanto el lenguaje JavaScript y
navegadores cumplen el estándar ECMA-262 y por tanto el lenguaje JavaScript y
JScript pasan a ser compatibles o análogos hecho que llevará en un futuro próximo
JScript pasan a ser compatibles o análogos hecho que llevará en un futuro próximo
a finalizar la guerra y llamar definitivamente ECMAScript al lenguaje de
a finalizar la guerra y llamar definitivamente ECMAScript al lenguaje de
programación.
programación.
Estrategia de desarrollo
Estrategia de desarrollo
Las últimas versiones de los navegadores aceptan las especificaciones estándar
Las últimas versiones de los navegadores aceptan las especificaciones estándar
ECMAScript pero añaden algunas propias. Si intentamos escribir el código bajo un
ECMAScript pero añaden algunas propias. Si intentamos escribir el código bajo un
denominador común, es probable que no funcione en versiones anteriores. Una
denominador común, es probable que no funcione en versiones anteriores. Una
forma acertada para los autores hoy en día es determinar la audiencia que tendrán
forma acertada para los autores hoy en día es determinar la audiencia que tendrán
sus páginas: si la página va a verse exclusivamente desde un sólo tipo de navegador,
sus páginas: si la página va a verse exclusivamente desde un sólo tipo de navegador,
se programará para ese navegador.
se programará para ese navegador.
Otra posibilidad, aunque no tan recomendable, es hacer una página índice que
Otra posibilidad, aunque no tan recomendable, es hacer una página índice que
permita enlazar a diferentes versiones de la web.
permita enlazar a diferentes versiones de la web.
También es recomendable, tener en cuenta los detalles específicos que cada
También es recomendable, tener en cuenta los detalles específicos que cada
navegador requiere para los aspectos más avanzados de la aplicación, por ejemplo,
navegador requiere para los aspectos más avanzados de la aplicación, por ejemplo,
las diferencias en el trabajo con capas de Navigator y Explorer.
las diferencias en el trabajo con capas de Navigator y Explorer.
Determinados estos aspectos, es posiblemente testear en JavaScript en que navegador
Determinados estos aspectos, es posiblemente testear en JavaScript en que navegador
se está visualizando la página y usar las sentencias específicas que cada navegador
se está visualizando la página y usar las sentencias específicas que cada navegador
requiera.
requiera.
Detectar errores durante el desarrollo
Detectar errores durante el desarrollo
Cuando el resultado de visualizar una página en construcción no es la que se espera,
Cuando el resultado de visualizar una página en construcción no es la que se espera,
probablemente será por un error en la programación. Tanto Netscape Navigator
probablemente será por un error en la programación. Tanto Netscape Navigator
como Internet Explorer tienen herramientas que permiten saber en que sitio está el
como Internet Explorer tienen herramientas que permiten saber en que sitio está el
error.
error.
PUOC FUOC
Módulo 2: JavaScript
8
PUOC FUOC
Módulo 2: JavaScript
8
Internet Explorer
Internet Explorer
IExplorer muestra un icono en la parte inferior izquierda de la ventana del navegador
IExplorer muestra un icono en la parte inferior izquierda de la ventana del navegador
para indicar el error.
para indicar el error.
Hay error en la página
Hay error en la página
Por ejemplo, en el código siguiente hay un error:
Por ejemplo, en el código siguiente hay un error:
Ejemplo error
Ejemplo error
//-->
Haciendo doble clic sobre el icono, aparece una ventana que muestra los detalles
Haciendo doble clic sobre el icono, aparece una ventana que muestra los detalles
sobre el error que se ha producido:
sobre el error que se ha producido:
En la línea 8 de la página se ha usado la palabra documento que no existe como
En la línea 8 de la página se ha usado la palabra documento que no existe como
objeto del lenguaje. La opción correcta es document. Por tanto la línea quedaría
objeto del lenguaje. La opción correcta es document. Por tanto la línea quedaría
como:
como:
document.write("Hola").
document.write("Hola").
No se ha producido error
No se ha producido error
PUOC FUOC
Módulo 2: JavaScript
9
PUOC FUOC
Módulo 2: JavaScript
9
Netscape Navigator
Netscape Navigator
En Netscape hay que visualizar la consola JavaScript para ver la lista de errores que
En Netscape hay que visualizar la consola JavaScript para ver la lista de errores que
se han producido en la página. En Netscape 6 hay que acceder al menú Tareas >
se han producido en la página. En Netscape 6 hay que acceder al menú Tareas >
Herramientas > Consola Javascript.
Herramientas > Consola Javascript.
En el ejemplo anterior, aparecería el error del siguiente modo:
En el ejemplo anterior, aparecería el error del siguiente modo:
PUOC FUOC
Módulo 2: JavaScript
10
Etapa 2: Fundamentos de JavaScript
PUOC FUOC
Módulo 2: JavaScript
10
Etapa 2: Fundamentos de JavaScript
¿Qué es JavaScript?
¿Qué es JavaScript?
JavaScript es un lenguaje de script desarrollado para incrementar las funcionalidades
JavaScript es un lenguaje de script desarrollado para incrementar las funcionalidades
del lenguaje HTML.
del lenguaje HTML.
Sus características más importantes son:
Sus características más importantes son:
– JavaScript es un lenguaje interpretado, y por tanto, no requiere compilación. El
– JavaScript es un lenguaje interpretado, y por tanto, no requiere compilación. El
intérprete es el navegador del usuario, el cual, se encarga de interpretar las
intérprete es el navegador del usuario, el cual, se encarga de interpretar las
sentencias JavaScript contenidas en la página HTML y de ejecutarlas
sentencias JavaScript contenidas en la página HTML y de ejecutarlas
adecuadamente.
adecuadamente.
– JavaScript es un lenguaje basado en objetos. El modelo de objetos de JavaScript,
– JavaScript es un lenguaje basado en objetos. El modelo de objetos de JavaScript,
aunque no es muy amplio, incluye los elementos necesarios para poder acceder a la
aunque no es muy amplio, incluye los elementos necesarios para poder acceder a la
información contenida en una página HTML y actuar sobre la interfaz del
información contenida en una página HTML y actuar sobre la interfaz del
navegador.
navegador.
– JavaScript es un lenguaje orientado a eventos. Permite desarrollar scripts que
– JavaScript es un lenguaje orientado a eventos. Permite desarrollar scripts que
ejecuten acciones en respuesta a un evento, por ejemplo, a un clic de ratón sobre
ejecuten acciones en respuesta a un evento, por ejemplo, a un clic de ratón sobre
un gráfico.
un gráfico.
Lenguaje de script
Lenguaje de script
Los lenguajes de script, como Perl, PHP, VBScript y JavaScript, implican un estilo de
Los lenguajes de script, como Perl, PHP, VBScript y JavaScript, implican un estilo de
programación diferente a los lenguajes de propósito general como C, C++ o Java. Son
programación diferente a los lenguajes de propósito general como C, C++ o Java. Son
una alternativa que aporta velocidad y facilidad de programación, con lo cual
una alternativa que aporta velocidad y facilidad de programación, con lo cual
aumenta la productividad.
aumenta la productividad.
Un lenguaje de script es un lenguaje de programación de fácil uso. Los lenguajes de
Un lenguaje de script es un lenguaje de programación de fácil uso. Los lenguajes de
propósito general se diseñan para construir estructuras y algoritmos que trabajan con
propósito general se diseñan para construir estructuras y algoritmos que trabajan con
los elementos más primitivos del ordenador, como las palabras en la memoria, etc.
los elementos más primitivos del ordenador, como las palabras en la memoria, etc.
En contraste, los lenguajes de script asumen la existencia de potentes componentes
En contraste, los lenguajes de script asumen la existencia de potentes componentes
que pueden utilizar obviando la complejidad del sistema. Además, el programador
que pueden utilizar obviando la complejidad del sistema. Además, el programador
no debe declarar el tipo de los datos, lo cual permite trabajar con ellos sin tantas
no debe declarar el tipo de los datos, lo cual permite trabajar con ellos sin tantas
restricciones y usarlos en diferentes situaciones para diferentes propósitos.
restricciones y usarlos en diferentes situaciones para diferentes propósitos.
Otra característica de los lenguajes de script es que, normalmente, son interpretados.
Otra característica de los lenguajes de script es que, normalmente, son interpretados.
Esto, además de implicar el ahorro del proceso de compilación en cada modificación
Esto, además de implicar el ahorro del proceso de compilación en cada modificación
PUOC FUOC
Módulo 2: JavaScript
11
PUOC FUOC
Módulo 2: JavaScript
11
del código, permite realizar aplicaciones más flexibles en cuanto a su implantación
del código, permite realizar aplicaciones más flexibles en cuanto a su implantación
en distintas plataformas.
en distintas plataformas.
Introducción de código JavaScript en páginas HTML
Introducción de código JavaScript en páginas HTML
Hay dos formas básicas de incluir código JavaScript en las páginas HTML.
Hay dos formas básicas de incluir código JavaScript en las páginas HTML.
– JavaScript incrustado en el código HTML.
– JavaScript incrustado en el código HTML.
– JavaScript en un archivo .js referenciado en la página.
– JavaScript en un archivo .js referenciado en la página.
Ambas formas requieren las etiquetas HTML y
Ambas formas requieren las etiquetas HTML y
Estas etiquetas alertan al navegador que debe interpretar las líneas de código
Estas etiquetas alertan al navegador que debe interpretar las líneas de código
contenidas entre ellas como código JavaScript.
contenidas entre ellas como código JavaScript.
Para introducir código JavaScript en una página HTML:
Para introducir código JavaScript en una página HTML:
//-->
Debido a que otros lenguajes de script pueden coexistir en una misma página HTML,
Debido a que otros lenguajes de script pueden coexistir en una misma página HTML,
por ejemplo el VBScript, que tiene preferencia sobre estas etiquetas, es importante
por ejemplo el VBScript, que tiene preferencia sobre estas etiquetas, es importante
indicar que el lenguaje es JavaScript.
indicar que el lenguaje es JavaScript.
Diferentes lenguajes de script pueden coexistir en una misma página HTML.
Diferentes lenguajes de script pueden coexistir en una misma página HTML.
Otro aspecto importante a tener en cuenta es que JavaScript es sensible a las
Otro aspecto importante a tener en cuenta es que JavaScript es sensible a las
mayúsculas y minúsculas. Esto significa que cualquier palabra del lenguaje
mayúsculas y minúsculas. Esto significa que cualquier palabra del lenguaje
JavaScript, debe estar correctamente escrita con las letras en minúsculas o
JavaScript, debe estar correctamente escrita con las letras en minúsculas o
mayúsculas, ya que de otro modo el navegador produciría un error. Este problema
mayúsculas, ya que de otro modo el navegador produciría un error. Este problema
no existe en el lenguaje HTML, por lo cual las etiquetas pueden escribirse de
no existe en el lenguaje HTML, por lo cual las etiquetas pueden escribirse de
cualquiera de las dos formas.
cualquiera de las dos formas.
PUOC FUOC
Módulo 2: JavaScript
12
PUOC FUOC
Módulo 2: JavaScript
12
JavaScript es sensible a las mayúsculas y minúsculas.
JavaScript es sensible a las mayúsculas y minúsculas.
La segunda y cuarta línea, se introducen para evitar que se generen errores en
La segunda y cuarta línea, se introducen para evitar que se generen errores en
navegadores que no soportan JavaScript, y para que estos navegadores no muestren
navegadores que no soportan JavaScript, y para que estos navegadores no muestren
el código del script en la página. El navegador empieza a interpretar la línea siguiente
el código del script en la página. El navegador empieza a interpretar la línea siguiente
a . En HTML los comentarios se incluyen dentro
a . En HTML los comentarios se incluyen dentro
de las etiquetas , pero, debido a algunas versiones antiguas de los
-->, pero, debido a algunas versiones antiguas de los
navegadores, que interpretan de forma distinta el final de comentario, es necesario
navegadores, que interpretan de forma distinta el final de comentario, es necesario
añadir //, que sirve para comentar una línea en JavaScript.
añadir //, que sirve para comentar una línea en JavaScript.
JavaScript incrustado en el código HTML
JavaScript incrustado en el código HTML
El código JavaScript puede ubicarse en el cuerpo del documento o bien en la cabecera
El código JavaScript puede ubicarse en el cuerpo del documento o bien en la cabecera
de éste.
de éste.
JavaScript en el cuerpo del documento
JavaScript en el cuerpo del documento
Un script situado en el cuerpo del documento se ejecuta cuando se carga el cuerpo o
Un script situado en el cuerpo del documento se ejecuta cuando se carga el cuerpo o
contenido de la página. Por tanto las etiquetas y estarán situadas
contenido de la página. Por tanto las etiquetas y estarán situadas
en algún lugar entre las etiquetas y del documento. Los scripts se
en algún lugar entre las etiquetas y del documento. Los scripts se
situaran en el cuerpo cuando actuen sobre partes del documento, como un
situaran en el cuerpo cuando actuen sobre partes del documento, como un
formulario, cuando es cargada la página.
formulario, cuando es cargada la página.
Mi documento
Mi documento
//-->
PUOC FUOC
Módulo 2: JavaScript
13
PUOC FUOC
Módulo 2: JavaScript
13
El siguiente ejemplo incluye un script situado en el cuerpo del documento. El código
El siguiente ejemplo incluye un script situado en el cuerpo del documento. El código
JavaScript escribe un texto en la página HTML
JavaScript escribe un texto en la página HTML
Ejemplo 1
Ejemplo 1
//-->
JavaScript en la cabecera del documento
JavaScript en la cabecera del documento
Un script situado en la cabecera del documento se carga antes que el contenido de la
Un script situado en la cabecera del documento se carga antes que el contenido de la
página. La cabecera es el lugar apropiado para aquellos scripts que no modifican los
página. La cabecera es el lugar apropiado para aquellos scripts que no modifican los
atributos de la página y que se ejecutan en respuesta a una acción del usuario. En la
atributos de la página y que se ejecutan en respuesta a una acción del usuario. En la
cabecera no se puede situar un script que modifique partes del documento y se
cabecera no se puede situar un script que modifique partes del documento y se
ejecute al cargar la página, ya que este código se ejecuta con anterioridad a la carga
ejecute al cargar la página, ya que este código se ejecuta con anterioridad a la carga
del documento y desconoce a priori los objetos contenidos.
del documento y desconoce a priori los objetos contenidos.
Mi documento
Mi documento
//-->
El siguiente ejemplo incluye un script situado en la cabecera del documento. El
El siguiente ejemplo incluye un script situado en la cabecera del documento. El
código JavaScript escribe un texto en una ventana de alerta desde una función que
código JavaScript escribe un texto en una ventana de alerta desde una función que
es llamada cuando se carga la página.
es llamada cuando se carga la página.
PUOC FUOC
Módulo 2: JavaScript
14
PUOC FUOC
Módulo 2: JavaScript
Ejemplo 2
Ejemplo 2
//-->
Para garantizar que una función se carga antes de que sea llamada, debe
Para garantizar que una función se carga antes de que sea llamada, debe
ponerse en la cabecera del documento.
ponerse en la cabecera del documento.
En una página HTML se pueden usar tantas etiquetas y como sean
En una página HTML se pueden usar tantas etiquetas y como sean
necesarias. Por tanto, es posible ubicar scripts en la cabecera y en el cuerpo de un
necesarias. Por tanto, es posible ubicar scripts en la cabecera y en el cuerpo de un
mismo documento.
mismo documento.
Mi documento
Mi documento
//-->
//-->
PUOC FUOC
Módulo 2: JavaScript
15
PUOC FUOC
Módulo 2: JavaScript
15
Inclusión de ficheros .js en las páginas HTML
Inclusión de ficheros .js en las páginas HTML
En aplicaciones web complejas, es conveniente que el código escrito pueda ser
En aplicaciones web complejas, es conveniente que el código escrito pueda ser
reutilizado en diferentes páginas. Una alternativa a duplicar código en diferentes
reutilizado en diferentes páginas. Una alternativa a duplicar código en diferentes
páginas (cada modificación de este código implicaría actualizar todas las páginas que
páginas (cada modificación de este código implicaría actualizar todas las páginas que
lo contienen) es crear ficheros independientes e incluirlos en cada una de las
lo contienen) es crear ficheros independientes e incluirlos en cada una de las
páginas, es decir, utilizar librerías externas de scripts.
páginas, es decir, utilizar librerías externas de scripts.
Estas librerías no incluyen las etiquetas y ni ningún otro código
Estas librerías no incluyen las etiquetas y ni ningún otro código
HTML, sólo contienen los scripts. Son ficheros de texto y su extensión, para
HTML, sólo contienen los scripts. Son ficheros de texto y su extensión, para
JavaScript, es .js
JavaScript, es .js
Para indicar al navegador que debe incluir un fichero .js, entre las etiquetas
Para indicar al navegador que debe incluir un fichero .js, entre las etiquetas
y de la página HTML, se debe incluir el nombre y la ubicación del fichero
y de la página HTML, se debe incluir el nombre y la ubicación del fichero
.js que contiene el código JavaScript.
.js que contiene el código JavaScript.
Ejemplo .js
Ejemplo .js
En el caso anterior, el fichero libreria.js se encuentra ubicado en el mismo directorio
En el caso anterior, el fichero libreria.js se encuentra ubicado en el mismo directorio
que la página HTML, pero si hay que hacer referencia a rutas absolutas, el protocolo
que la página HTML, pero si hay que hacer referencia a rutas absolutas, el protocolo
para el fichero es http:// igual que con los ficheros HTML.
para el fichero es http:// igual que con los ficheros HTML.
Si se observa el código fuente de una página HTML desde el navegador, el código del
Si se observa el código fuente de una página HTML desde el navegador, el código del
fichero .js no aparece en la ventana. Lo que si aparece es la ruta completa en donde
fichero .js no aparece en la ventana. Lo que si aparece es la ruta completa en donde
se encuentra el fichero. Por tanto, el usuario podrá acceder a esta ruta, si está
se encuentra el fichero. Por tanto, el usuario podrá acceder a esta ruta, si está
accesible, y visualizar el código fuente del fichero .js
accesible, y visualizar el código fuente del fichero .js
En el ejemplo expuesto, el fichero libreria.js contiene el siguiente script:
En el ejemplo expuesto, el fichero libreria.js contiene el siguiente script:
alert("En la librería estoy");
alert("En la librería estoy");
PUOC FUOC
Módulo 2: JavaScript
16
PUOC FUOC
Módulo 2: JavaScript
16
Sentencias JavaScript
Sentencias JavaScript
Cada línea de código escrita entre las etiquetas y es una sentencia.
Cada línea de código escrita entre las etiquetas y es una sentencia.
Para ser compatible con los hábitos de programadores con experiencia en otros
Para ser compatible con los hábitos de programadores con experiencia en otros
lenguajes, JavaScript admite el uso del punto y coma al final de cada sentencia, pero
lenguajes, JavaScript admite el uso del punto y coma al final de cada sentencia, pero
éste no es obligatorio. El navegador interpreta el salto de línea como final de
éste no es obligatorio. El navegador interpreta el salto de línea como final de
sentencia.
sentencia.
Los diferentes tipos de sentencias son los siguientes:
Los diferentes tipos de sentencias son los siguientes:
– Definición o inicialización de una variable.
– Definición o inicialización de una variable.
– Asignación de un valor a una variable o a una propiedad de un objeto.
– Asignación de un valor a una variable o a una propiedad de un objeto.
– Cambio del valor de una variable o de una propiedad de un objeto.
– Cambio del valor de una variable o de una propiedad de un objeto.
– Llamada al método de un objeto.
– Llamada al método de un objeto.
– Llamada a una función.
– Llamada a una función.
– Toma de decisiones.
– Toma de decisiones.
A excepción de los comentarios, todas las sentencias implican una acción.
A excepción de los comentarios, todas las sentencias implican una acción.
Escritura de texto en las páginas HTML
Escritura de texto en las páginas HTML
Para empezar a generar las páginas será necesario escoger un editor que permita
Para empezar a generar las páginas será necesario escoger un editor que permita
escribir el código HTML y JavaScript. No es determinante el editor que se escoja,
escribir el código HTML y JavaScript. No es determinante el editor que se escoja,
mientras permita generar fácilmente ficheros de texto estándar y grabarlos con
mientras permita generar fácilmente ficheros de texto estándar y grabarlos con
extensiones htm o html. El bloc de notas de Windows es una opción.
extensiones htm o html. El bloc de notas de Windows es una opción.
El siguiente componente que se debe considerar es el navegador. Es importante
El siguiente componente que se debe considerar es el navegador. Es importante
poder probar el código, en al menos los dos navegadores más utilizados, Microsoft
poder probar el código, en al menos los dos navegadores más utilizados, Microsoft
Internet Explorer y Mozilla en sus versiones actuales, para comprobar que el código
Internet Explorer y Mozilla en sus versiones actuales, para comprobar que el código
escrito funciona en los dos.
escrito funciona en los dos.
No es necesario probar el código estando conectado a la red, puede hacerse offline.
No es necesario probar el código estando conectado a la red, puede hacerse offline.
Para trabajar cómodamente, será conveniente tener abiertos de forma simultánea el
Para trabajar cómodamente, será conveniente tener abiertos de forma simultánea el
editor de texto en el que se escribe el código y el navegador para visualizar los
editor de texto en el que se escribe el código y el navegador para visualizar los
resultados. Los pasos a seguir serán:
resultados. Los pasos a seguir serán:
• Escribir el código en el documento de texto mediante el editor de texto.
• Escribir el código en el documento de texto mediante el editor de texto.
• Grabar la última versión en el disco.
• Grabar la última versión en el disco.
PUOC FUOC
Módulo 2: JavaScript
17
• Visualizar el documento en el navegador. Si el documento ya se ha visualizado previamente, será suficiente con actualizar la página.
PUOC FUOC
Módulo 2: JavaScript
17
• Visualizar el documento en el navegador. Si el documento ya se ha visualizado previamente, será suficiente con actualizar la página.
La opción "Ver código fuente" de Internet Explorer, abre automáticamente el bloc de
La opción "Ver código fuente" de Internet Explorer, abre automáticamente el bloc de
notas.
notas.
El método write
El método write
En JavaScript, para escribir una cadena de texto en la página HTML se utiliza el
En JavaScript, para escribir una cadena de texto en la página HTML se utiliza el
método write del objeto documento de la siguiente forma:
método write del objeto documento de la siguiente forma:
document.write(cadena de texto)
document.write(cadena de texto)
Esta línea de código escribe la cadena de texto en el documento actual. El método
Esta línea de código escribe la cadena de texto en el documento actual. El método
write modifica el código fuente de la página HTML generada.
write modifica el código fuente de la página HTML generada.
Cuando se hace una llamada a un método de un objeto para que realice una
Cuando se hace una llamada a un método de un objeto para que realice una
determinada tarea, éste debe ir seguido de paréntesis entre los cuales se incluye la
determinada tarea, éste debe ir seguido de paréntesis entre los cuales se incluye la
información necesaria para realizar dicha tarea. Esta información es el parámetro. Un
información necesaria para realizar dicha tarea. Esta información es el parámetro. Un
método puede requerir ninguno, uno o más parámetros. En el primer caso se ponen
método puede requerir ninguno, uno o más parámetros. En el primer caso se ponen
los paréntesis sin nada entre ellos.
los paréntesis sin nada entre ellos.
PUOC FUOC
Módulo 2: JavaScript
18
PUOC FUOC
Módulo 2: JavaScript
El método write requiere un parámetro que corresponde al texto que escribirá
El método write requiere un parámetro que corresponde al texto que escribirá
en el documento.
en el documento.
18
Es posible incluir la cadena de texto como un literal o bien mediante una variable
Es posible incluir la cadena de texto como un literal o bien mediante una variable
que contenga el texto:
que contenga el texto:
• Como un literal:
• Como un literal:
document.write(“Mi primer JavaScript”)
document.write(“Mi primer JavaScript”)
• Mediante una variable:
• Mediante una variable:
texto = “Mi primer JavaScript”
texto = “Mi primer JavaScript”
document.write(texto)
document.write(texto)
Para escribir un literal es imprescindible el uso de las comillas, mientras que
Para escribir un literal es imprescindible el uso de las comillas, mientras que
una variable no debe llevarlas.
una variable no debe llevarlas.
El parámetro del método write permite formas más complejas que las expuestas en
El parámetro del método write permite formas más complejas que las expuestas en
los ejemplos anteriores. Por ejemplo, la escritura dos cadenas de texto consecutivas.
los ejemplos anteriores. Por ejemplo, la escritura dos cadenas de texto consecutivas.
Si bien es obvio que podemos usar dos veces el método write para escribir dos
Si bien es obvio que podemos usar dos veces el método write para escribir dos
cadenas de texto, podemos hacerlo usándolo tan solo una vez:
cadenas de texto, podemos hacerlo usándolo tan solo una vez:
Nombre = “Maria”
Nombre = “Maria”
document.write(“Hola ” + nombre)
document.write(“Hola ” + nombre)
El operador + en este caso no está realizando la suma de valores numéricos, si no que
El operador + en este caso no está realizando la suma de valores numéricos, si no que
está concatenando dos cadenas de texto.
está concatenando dos cadenas de texto.
También es posible añadir caracteres especiales a las cadenas de texto. Por ejemplo,
También es posible añadir caracteres especiales a las cadenas de texto. Por ejemplo,
la escritura de una cadena de texto más un retorno de carro:
la escritura de una cadena de texto más un retorno de carro:
nombre = “Maria”
nombre = “Maria”
alert(“Hola\n” + nombre)
alert(“Hola\n” + nombre)
PUOC FUOC
Módulo 2: JavaScript
19
Los caracteres especiales son los que se detallan en la siguiente tabla:
PUOC FUOC
Módulo 2: JavaScript
Los caracteres especiales son los que se detallan en la siguiente tabla:
Caracteres especiales Carácter
19
Caracteres especiales
Significado
Carácter
Significado
\n
Nueva línea
\n
Nueva línea
\t
Tabulador
\t
Tabulador
\r
Retorno de carro
\r
Retorno de carro
\f
Salto de “página” (carácter ASCII 12)
\f
Salto de “página” (carácter ASCII 12)
\b
Retroceso de un espacio
\b
Retroceso de un espacio
Los caracteres especiales no tienen efecto en el parámetro del método write. Así pues,
Los caracteres especiales no tienen efecto en el parámetro del método write. Así pues,
algo como:
algo como:
nombre = “Maria”
nombre = “Maria”
document.write(“Hola\n” + nombre)
document.write(“Hola\n” + nombre)
no produciría un salto de línea en el resultado visible de la página.
no produciría un salto de línea en el resultado visible de la página.
Ejemplo 3
Ejemplo 3
//-->
PUOC FUOC
Módulo 2: JavaScript
20
PUOC FUOC
Módulo 2: JavaScript
20
El método writeln
El método writeln
Para escribir una cadena de texto más un retorno de carro, también es posible usar el
Para escribir una cadena de texto más un retorno de carro, también es posible usar el
método writeln de la siguiente forma:
método writeln de la siguiente forma:
document.writeln(cadena de texto)
document.writeln(cadena de texto)
De este modo, el ejemplo anterior también puede escribirse de la siguiente manera:
De este modo, el ejemplo anterior también puede escribirse de la siguiente manera:
nombre = “Maria”
nombre = “Maria”
document.writeln(“Hola”)
document.writeln(“Hola”)
document.write(nombre)
document.write(nombre)
En este caso, el efecto en la visualización de la página y en el código fuente es el
En este caso, el efecto en la visualización de la página y en el código fuente es el
mismo que produce el uso del carácter especial \n.
mismo que produce el uso del carácter especial \n.
Etiquetas HTML
Etiquetas HTML
El método write permite incluir etiquetas HTML en el texto. La inclusión de estas
El método write permite incluir etiquetas HTML en el texto. La inclusión de estas
etiquetas, no sólo modifica el código fuente de la página si no también el resultado
etiquetas, no sólo modifica el código fuente de la página si no también el resultado
que se visualiza.
que se visualiza.
Así pues, para conseguir un salto de línea hay que insertar en el texto la etiqueta
Así pues, para conseguir un salto de línea hay que insertar en el texto la etiqueta
:
:
Ejemplo 4
Ejemplo 4
//-->
PUOC FUOC
Módulo 2: JavaScript
21
PUOC FUOC
Módulo 2: JavaScript
21
De este modo, incluyendo etiquetas HTML es posible generar cualquier código
De este modo, incluyendo etiquetas HTML es posible generar cualquier código
HTML para la página, desde un texto simple hasta un formulario e incluso la página
HTML para la página, desde un texto simple hasta un formulario e incluso la página
entera.
entera.
PUOC FUOC
Módulo 2: JavaScript
22
Etapa 3: El lenguaje JavaScript
PUOC FUOC
Módulo 2: JavaScript
22
Etapa 3: El lenguaje JavaScript
Introducción
Introducción
Un script está formado por un conjunto de sentencias que pueden estar formadas por
Un script está formado por un conjunto de sentencias que pueden estar formadas por
uno o más de los siguientes elementos:
uno o más de los siguientes elementos:
• Palabras clave o reservadas del lenguaje
• Palabras clave o reservadas del lenguaje
• Datos
• Datos
• Variables
• Variables
• Literales
• Literales
• Operadores
• Operadores
• Estructuras de control
• Estructuras de control
• Comentarios
• Comentarios
• Signos de puntuación
• Signos de puntuación
• Funciones
• Funciones
• Objetos
• Objetos
Palabras reservadas
Palabras reservadas
Se trata de palabras que ya tienen significado en JavaScript. Por ejemplo, la palabra
Se trata de palabras que ya tienen significado en JavaScript. Por ejemplo, la palabra
if se utiliza para construir estructuras condicionales, y por tanto, no debe utilizarse
if se utiliza para construir estructuras condicionales, y por tanto, no debe utilizarse
con otro propósito como sería el asignar dicho nombre a una variable.
con otro propósito como sería el asignar dicho nombre a una variable.
En la tabla siguiente se indican las palabras reservadas de JavaScript, aunque hay que
En la tabla siguiente se indican las palabras reservadas de JavaScript, aunque hay que
tener en cuenta que algunas de ellas aunque no se usan en las versiones actuales
tener en cuenta que algunas de ellas aunque no se usan en las versiones actuales
están reservadas para futuras versiones del lenguaje.
están reservadas para futuras versiones del lenguaje.
PUOC FUOC
Módulo 2: JavaScript
23
PUOC FUOC
Módulo 2: JavaScript
Palabras reservadas de javaScript
23
Palabras reservadas de javaScript
abstract
delete
function
null
throw
abstract
delete
function
null
throw
boolean
do
goto
package
throws
boolean
do
goto
package
throws
break
double
if
private
transient
break
double
if
private
transient
byte
else
implements
protected
true
byte
else
implements
protected
true
case
enum
import
public
try
case
enum
import
public
try
catch
export
in
return
typeof
catch
export
in
return
typeof
char
extends
instanceof
short
var
char
extends
instanceof
short
var
class
false
int
static
void
class
false
int
static
void
const
final
interface
super
while
const
final
interface
super
while
continue
finally
long
switch
with
continue
finally
long
switch
with
debugger
float
native
syncronized
true
debugger
float
native
syncronized
true
default
for
new
this
default
for
new
this
Datos
Datos
Los scripts pueden manejar datos para producir resultados. En todo lenguaje de
Los scripts pueden manejar datos para producir resultados. En todo lenguaje de
programación existen unos tipos de estándar para los datos que definen el rango de
programación existen unos tipos de estándar para los datos que definen el rango de
valores que pueden tomar. Así por ejemplo, un dato de tipo numérico tomará valores
valores que pueden tomar. Así por ejemplo, un dato de tipo numérico tomará valores
numéricos y nunca valores de texto.
numéricos y nunca valores de texto.
En javaScript existen los siguientes tipos:
En javaScript existen los siguientes tipos:
Tipos de datos
Tipos de datos
Tipo
Comentario
Ejemplos
Tipo
Comentario
Ejemplos
Número
Cualquier valor numérico
5, 12.8, 2e6, … (*)
Número
Cualquier valor numérico
5, 12.8, 2e6, … (*)
Cadena
Cualquier cadena de texto. Se expresa entre comillas dobles o simples
"Hola", 'Hola'
Cadena
Cualquier cadena de texto. Se expresa entre comillas dobles o simples
"Hola", 'Hola'
Booleano
Sólo dos posibles valores: true (verdadero) y false (falso)
If (entrada == 10) paso = true else paso = false
Booleano
Sólo dos posibles valores: true (verdadero) y false (falso)
If (entrada == 10) paso = true else paso = false
NULL
Palabra clave para indicar que no hay valor
Nombre.value = null
NULL
Palabra clave para indicar que no hay valor
Nombre.value = null
Objeto
Estructura compleja que contiene propiedades y métodos
Objeto
Estructura compleja que contiene propiedades y métodos
Función
Conjunto de sentencias que realizan una tarea específica
Función
Conjunto de sentencias que realizan una tarea específica
(*) Los datos de tipo numérico pueden expresarse en distintas bases:
(*) Los datos de tipo numérico pueden expresarse en distintas bases:
PUOC FUOC
Módulo 2: JavaScript
24
PUOC FUOC
Módulo 2: JavaScript
24
• Decimal: cualquier número que no empiece por 0 estará representado en base 10
• Decimal: cualquier número que no empiece por 0 estará representado en base 10
• Octal: si el número se escribe empezando con el dígito 0, estará en base 8
• Octal: si el número se escribe empezando con el dígito 0, estará en base 8
• Hexadecimal: un número empezado por 0x o 0X, por ejemplo 0x1A, estará
• Hexadecimal: un número empezado por 0x o 0X, por ejemplo 0x1A, estará
expresado en base 16
expresado en base 16
Literales
Literales
Los literales son valores fijos y pueden ser:
Los literales son valores fijos y pueden ser:
• Literales numéricos: un literal numérico es cualquier número entero o real
• Literales numéricos: un literal numérico es cualquier número entero o real
expresado en base decimal, octal o hexadecimal, por ejemplo, 13, -8, 125.34, 0xFF.
expresado en base decimal, octal o hexadecimal, por ejemplo, 13, -8, 125.34, 0xFF.
• Literal cadenas de texto: se expresan entre comillas dobles o simples, por ejemplo,
• Literal cadenas de texto: se expresan entre comillas dobles o simples, por ejemplo,
"Hola", "1234", 'Pepe'.
"Hola", "1234", 'Pepe'.
• Literales booleanos: son dos posibles valores, true y false.
• Literales booleanos: son dos posibles valores, true y false.
Comentarios
Comentarios
Los comentarios se usan en cualquier lenguaje para añadir explicaciones en el
Los comentarios se usan en cualquier lenguaje para añadir explicaciones en el
código, y son líneas que el intérprete o el compilador ignoran. JavaScript utiliza el
código, y son líneas que el intérprete o el compilador ignoran. JavaScript utiliza el
mismo formato de comentarios que los lenguajes C/C++.
mismo formato de comentarios que los lenguajes C/C++.
Para comentar una línea se ponen los caracteres // al inicio de la línea:
Para comentar una línea se ponen los caracteres // al inicio de la línea:
// línea de comentario
// línea de comentario
Para comentar varias líneas se usan los caracteres /* (inicio de comentario) y */ (fin
Para comentar varias líneas se usan los caracteres /* (inicio de comentario) y */ (fin
de
de
comentario):
comentario):
/* comentario de
/* comentario de
varias líneas */
varias líneas */
Variables
Variables
Los datos no fijos que maneja un script se almacenan en variables, definiendo
Los datos no fijos que maneja un script se almacenan en variables, definiendo
variable como un contenedor de información.
variable como un contenedor de información.
PUOC FUOC
Módulo 2: JavaScript
25
PUOC FUOC
Módulo 2: JavaScript
25
Cada variable del script debe tener un nombre que la identifique. El nombre puede
Cada variable del script debe tener un nombre que la identifique. El nombre puede
estar formado por letras, números y el signo _, pero no puede contener espacios o
estar formado por letras, números y el signo _, pero no puede contener espacios o
cualquier otro signo de puntuación ni empezar por un número. Tampoco pueden ser
cualquier otro signo de puntuación ni empezar por un número. Tampoco pueden ser
usadas las palabras clave y al igual que el lenguaje en general, son sensibles a las
usadas las palabras clave y al igual que el lenguaje en general, son sensibles a las
mayúsculas y minúsculas. Nombres válidos para las variables son por ejemplo:
mayúsculas y minúsculas. Nombres válidos para las variables son por ejemplo:
resultado, miNum, _num, num2 y num_1 mientras que 2sier, mi resultado o mi;casa
resultado, miNum, _num, num2 y num_1 mientras que 2sier, mi resultado o mi;casa
no lo son.
no lo son.
Los valores que puede almacenar una variable pueden ser de cualquier tipo de datos
Los valores que puede almacenar una variable pueden ser de cualquier tipo de datos
permitido en el lenguaje.
permitido en el lenguaje.
Declaración y asignación de variables
Declaración y asignación de variables
Para declarar una variable y asignarle un valor se utiliza la siguiente sintaxis:
Para declarar una variable y asignarle un valor se utiliza la siguiente sintaxis:
var nombre_variable
var nombre_variable
nombre_variable = valor
nombre_variable = valor
La primera línea declara la variable y la segunda asigna un valor a la variable
La primera línea declara la variable y la segunda asigna un valor a la variable
declarada. Como se verá más adelante, la primera línea es opcional.
declarada. Como se verá más adelante, la primera línea es opcional.
En el siguiente ejemplo se declara una variable de nombre resultado, y se le asigna el
En el siguiente ejemplo se declara una variable de nombre resultado, y se le asigna el
resultado de la suma de dos números.
resultado de la suma de dos números.
var resultado
var resultado
resultado = 5 + 2
resultado = 5 + 2
Como se observa en el ejemplo anterior, en javascript no es necesario indicar de qué
Como se observa en el ejemplo anterior, en javascript no es necesario indicar de qué
tipo es una variable en el momento de su definición. El tipo de dato queda definido
tipo es una variable en el momento de su definición. El tipo de dato queda definido
en el momento en que se asigna un valor a la variable.
en el momento en que se asigna un valor a la variable.
En el siguiente ejemplo, el dato que se asigna a la variable es de tipo cadena de texto:
En el siguiente ejemplo, el dato que se asigna a la variable es de tipo cadena de texto:
Ejemplo
Ejemplo
//-->
PUOC FUOC
Módulo 2: JavaScript
26
PUOC FUOC
Módulo 2: JavaScript
26
A la hora de declarar una variable también es posible realizar la asignación de forma
A la hora de declarar una variable también es posible realizar la asignación de forma
simultánea:
simultánea:
var resultado = 5 + 2
var resultado = 5 + 2
Otra posibilidad que ofrece el lenguaje, es declarar más de una variable en una misma
Otra posibilidad que ofrece el lenguaje, es declarar más de una variable en una misma
línea:
línea:
var x,y,z
var x,y,z
Ámbito de las variables
Ámbito de las variables
Una variable puede tener ámbito local o global. Cuando no se usa la palabra
Una variable puede tener ámbito local o global. Cuando no se usa la palabra
reservada var (es decir se omite la línea de declaración de la variable) se considera que
reservada var (es decir se omite la línea de declaración de la variable) se considera que
la variable tiene ámbito global, en caso contrario, es de ámbito local si está declarada
la variable tiene ámbito global, en caso contrario, es de ámbito local si está declarada
dentro de una función y de ámbito global si está declarada fuera de cualquier función
dentro de una función y de ámbito global si está declarada fuera de cualquier función
existente en la página
existente en la página
El ámbito de una variable hace referencia a las partes del código desde las que ésta
El ámbito de una variable hace referencia a las partes del código desde las que ésta
puede ser usada.
puede ser usada.
En el siguiente ejemplo, las variables x, w e y son globales, mientras que la variable
En el siguiente ejemplo, las variables x, w e y son globales, mientras que la variable
z es local:
z es local:
var x =1 // x es accesible desde dentro y fuera y = x + 2 //y es accesible desde dentro y fuera funcion pruebas(){ var z = y + 1// z sólo es accesible desde pruebas w = x + z + 4// w es accesible des de dentro pruebas document.write( "El valor de w es " + w ) }
de la función pruebas de la función pruebas dentro de la función y fuera de la función
var x =1 // x es accesible desde dentro y fuera y = x + 2 //y es accesible desde dentro y fuera funcion pruebas(){ var z = y + 1// z sólo es accesible desde pruebas w = x + z + 4// w es accesible des de dentro pruebas document.write( "El valor de w es " + w ) }
de la función pruebas de la función pruebas dentro de la función y fuera de la función
Conversiones de tipo
Conversiones de tipo
Como se ha visto, las variables toman el tipo del dato asignado. Así pues, en la
Como se ha visto, las variables toman el tipo del dato asignado. Así pues, en la
expresión:
expresión:
mi_var = "1000" la variable mi_var es de tipo cadena de texto, mientras que en: mi_var = 1000 la variable mi_var es de tipo número.
mi_var = "1000" la variable mi_var es de tipo cadena de texto, mientras que en: mi_var = 1000 la variable mi_var es de tipo número.
PUOC FUOC
Módulo 2: JavaScript
27
PUOC FUOC
Módulo 2: JavaScript
27
El tipo de la variable o del dato determinará qué cosas se puede hacer con ella/el.
El tipo de la variable o del dato determinará qué cosas se puede hacer con ella/el.
En general, en una expresión el tipo asociado a la variable está determinado por el
En general, en una expresión el tipo asociado a la variable está determinado por el
tipo de los operandos. Una particularidad de JavaScript es la conversión a cadena de
tipo de los operandos. Una particularidad de JavaScript es la conversión a cadena de
un tipo numérico cuando en una operación + cuando uno de los operandos es una
un tipo numérico cuando en una operación + cuando uno de los operandos es una
cadena. Por ejemplo, dada la siguiente inicialización:
cadena. Por ejemplo, dada la siguiente inicialización:
mi_var1 = "13"
mi_var1 = "13"
mi_var2 = 5
mi_var2 = 5
después de las siguientes expresiones: x = mi_var1 + mi_var2
después de las siguientes expresiones: x = mi_var1 + mi_var2
se tiene que:
se tiene que:
• la variable x toma el tipo cadena de caracteres, ya que mi_var1 es de tipo cadena
• la variable x toma el tipo cadena de caracteres, ya que mi_var1 es de tipo cadena
de caracteres. El valor que toma x es "135" ya que el operador + en este caso,
de caracteres. El valor que toma x es "135" ya que el operador + en este caso,
concatena los dos valores.
concatena los dos valores.
Además de las normas comentadas, javaScript dispone de funciones especiales para
Además de las normas comentadas, javaScript dispone de funciones especiales para
realizar conversiones específicas. Son las funciones eval, parseInt y parseFloat que se
realizar conversiones específicas. Son las funciones eval, parseInt y parseFloat que se
verán más adelante.
verán más adelante.
Operadores
Operadores
Los operadores permiten formar expresiones. Un literal o una variable ya forman por
Los operadores permiten formar expresiones. Un literal o una variable ya forman por
sí solos una expresión, pero junto con los operadores se pueden construir
sí solos una expresión, pero junto con los operadores se pueden construir
expresiones más complejas.
expresiones más complejas.
Por ejemplo, en la expresión x = y + 2, x e y son variables, 2 es un literal y los signos
Por ejemplo, en la expresión x = y + 2, x e y son variables, 2 es un literal y los signos
= y + son operadores.
= y + son operadores.
Los operadores se clasifican según su funcionalidad en los siguientes grupos:
Los operadores se clasifican según su funcionalidad en los siguientes grupos:
• operadores aritméticos
• operadores aritméticos
• operadores de asignación
• operadores de asignación
• operadores de comparación
• operadores de comparación
• operadores booleanos
• operadores booleanos
• operadores de bits
• operadores de bits
PUOC FUOC
Módulo 2: JavaScript
28
• operadores especiales: el operador +, el operador :?, los signos de puntuación (coma, paréntesis y corchetes) y los operadores para el trabajo con objetos.
PUOC FUOC
Módulo 2: JavaScript
28
• operadores especiales: el operador +, el operador :?, los signos de puntuación (coma, paréntesis y corchetes) y los operadores para el trabajo con objetos.
Operadores aritméticos
Operadores aritméticos
Los operadores aritméticos permiten realizar operaciones matemáticas.
Los operadores aritméticos permiten realizar operaciones matemáticas.
Operadores aritméticos
Operadores aritméticos
Operador
Descripción
Ejemplo
Resultado ejemplo
Operador
Descripción
Ejemplo
Resultado ejemplo
+
Suma
3 + 4
7
+
Suma
3 + 4
7
-
Resta
3 - 4
-1
-
Resta
3 - 4
-1
++
Incremento
3++
4
++
Incremento
3++
4
--
Decremento
3--
2
--
Decremento
3--
2
*
Producto
3 * 4
12
*
Producto
3 * 4
12
/
División
3 / 4
0.75
/
División
3 / 4
0.75
%
Módulo (resto de la división)
3 % 4
3
%
Módulo (resto de la división)
3 % 4
3
-
Menos unario (negación)
-(3 + 4)
-7
-
Menos unario (negación)
-(3 + 4)
-7
Los operadores de incremento y decremento se pueden usar de dos formas distintas
Los operadores de incremento y decremento se pueden usar de dos formas distintas
dentro de una expresión de asignación.
dentro de una expresión de asignación.
• Delante de una expresión:
• Delante de una expresión:
Primero se realiza el incremento y después la asignación. Por ejemplo:
Primero se realiza el incremento y después la asignación. Por ejemplo:
x = 13
x = 13
y = ++x
y = ++x
En este primer caso el resultado es x = 14 e y = 14 ya que primero se ha incrementado
En este primer caso el resultado es x = 14 e y = 14 ya que primero se ha incrementado
el valor de x, y después se ha asignado el resultado del incremento a la variable y.
el valor de x, y después se ha asignado el resultado del incremento a la variable y.
• Detrás de una expresión:
• Detrás de una expresión:
Primero se realiza la asignación y después el incremento. Por ejemplo:
Primero se realiza la asignación y después el incremento. Por ejemplo:
x = 13
x = 13
y = x++
y = x++
El resultado es x = 14 e y = 13 ya que primero se ha asignado el valor de inicial de x
El resultado es x = 14 e y = 13 ya que primero se ha asignado el valor de inicial de x
a la variable y, y después se ha incrementado el valor de la variable y.
a la variable y, y después se ha incrementado el valor de la variable y.
PUOC FUOC
Módulo 2: JavaScript
29
PUOC FUOC
Módulo 2: JavaScript
29
Operadores de asignación
Operadores de asignación
Los operadores de asignación permiten asignar el resultado de una expresión a una
Los operadores de asignación permiten asignar el resultado de una expresión a una
variable.
variable. Operadores de asignación
Operador
Descripción
Ejemplo
=
Asigna
x = y + z
+=
Suma y asigna
x += y
-=
Resta y asigna
*=
Operadores de asignación Equivale a...
Operador
Descripción
Ejemplo
Equivale a...
=
Asigna
x = y + z
x = x + y
+=
Suma y asigna
x += y
x = x + y
x -= y
x = x - y
-=
Resta y asigna
x -= y
x = x - y
Multiplica y asigna
x *= y
x = x * y
*=
Multiplica y asigna
x *= y
x = x * y
/=
Divide y asigna
x /= y
x = x / y
/=
Divide y asigna
x /= y
x = x / y
%=
Calcula el módulo y asigna
x %= y
x = x % y
%=
Calcula el módulo y asigna
x %= y
x = x % y
Operadores de comparación
Operadores de comparación
Los operadores de comparación permiten comparar el resultado de dos expresiones.
Los operadores de comparación permiten comparar el resultado de dos expresiones.
Operadores de comparación
Operadores de comparación
Operador
Descripción
Ejemplo
Resultado ejemplo
Operador
Descripción
Ejemplo
Resultado ejemplo
==
Igualdad
3 == "3"
Cierto
==
Igualdad
3 == "3"
Cierto
!=
Desigualdad
3 != "3"
Falso
!=
Desigualdad
3 != "3"
Falso
<
Menor
3 < 3
Falso
<
Menor
3 < 3
Falso
>
Mayor
3 > 3
Falso
>
Mayor
3 > 3
Falso
= 3
Cierto
===
Igualdad estricta
3 === "3"
Falso
===
Igualdad estricta
3 === "3"
Falso
!==
Desigualdad estricta
3 !== "3"
Cierto
!==
Desigualdad estricta
3 !== "3"
Cierto
La igualdad y desigualdad estricta sirven para lo mismo que la igualdad y la
La igualdad y desigualdad estricta sirven para lo mismo que la igualdad y la
desigualdad no estrictas pero hacen una comprobación estricta de tipo. Han sido
desigualdad no estrictas pero hacen una comprobación estricta de tipo. Han sido
incluidos en el estándar ECMAScript y lo soportan Netscape 4.06 y superiores y
incluidos en el estándar ECMAScript y lo soportan Netscape 4.06 y superiores y
Explorer 3 y superiores. Hay que indicar que las versiones más antiguas de Netscape
Explorer 3 y superiores. Hay que indicar que las versiones más antiguas de Netscape
tratan la igualdad normal como si fuera estricta.
tratan la igualdad normal como si fuera estricta.
Operadores booleanos
Operadores booleanos
Los operadores lógicos permiten formar expresiones que tienen como resultado un
Los operadores lógicos permiten formar expresiones que tienen como resultado un
valor booleano (true o false).
valor booleano (true o false).
PUOC FUOC
Módulo 2: JavaScript
30
PUOC FUOC
Módulo 2: JavaScript
Operadores lógicos Operador
Descripción
Ejemplo
&&
y (AND)
x = 1 (x > 0) && (x 0) && (x 5) || (x == 0) !
30
Falso
(x > 5) || (x == 0) Cierto
!
negación (NOT)
!(x > 5 )
x = 1
Cierto
!(x > 5 )
Operadores de bits
Operadores de bits
Estos operadores permiten modificar o comparar valores a nivel de bits, es decir,
Estos operadores permiten modificar o comparar valores a nivel de bits, es decir,
operan con conjuntos de unos y ceros aunque el resultado que retornan está
operan con conjuntos de unos y ceros aunque el resultado que retornan está
expresado en la forma estándar de javaScript para los valores numéricos.
expresado en la forma estándar de javaScript para los valores numéricos.
Operadores de bits
Operadores de bits
Operador
Descripción
Operador
Descripción
&
(AND) Retorna un 1 si los dos valores son 1
&
(AND) Retorna un 1 si los dos valores son 1
|
(OR) Retorna un 1 si al menos uno de los dos valores es 1
|
(OR) Retorna un 1 si al menos uno de los dos valores es 1
^
(XOR) Retorna un 1 si solamente uno de los dos valores es 1
^
(XOR) Retorna un 1 si solamente uno de los dos valores es 1
Desplazamiento a la derecha de un determinado número de bits y añade por la izquierda los bits que se han desbordado por la derecha
>>
Desplazamiento a la derecha de un determinado número de bits y añade por la izquierda los bits que se han desbordado por la derecha
>>>
Desplazamiento a la derecha de un determinado número de bits. Los espacios de la izquierda que quedan "vacíos" se rellenan con 0.
>>>
Desplazamiento a la derecha de un determinado número de bits. Los espacios de la izquierda que quedan "vacíos" se rellenan con 0.
&=
x&=y
equivale a x=x&y
&=
x&=y
equivale a x=x&y
|=
x|=y
equivale a x=x|y
|=
x|=y
equivale a x=x|y
^=
x^=y
equivale a x=x^y
^=
x^=y
equivale a x=x^y
y
>>>=
x>>>=y
>>>=
x>>>=y
equivale a x=x>>>y
equivale a x=x>>>y
El operador +
El operador +
El significado del símbolo + es diferente en función del tipo de las expresiones entre
El significado del símbolo + es diferente en función del tipo de las expresiones entre
las que se encuentra. Cuando las expresiones son números el símbolo + actúa como
las que se encuentra. Cuando las expresiones son números el símbolo + actúa como
operador aritmético, por ejemplo:
operador aritmético, por ejemplo:
PUOC FUOC
Módulo 2: JavaScript
31
PUOC FUOC
x = 1
x = 1
y = x + 13
y = x + 13
Módulo 2: JavaScript
31
en donde la variable y tomaría el valor 14.
en donde la variable y tomaría el valor 14.
Cuando las expresiones son cadenas de texto, o cuando uno de los operadores es del
Cuando las expresiones son cadenas de texto, o cuando uno de los operadores es del
tipo cadena de texto, el símbolo + realiza la concatenación de las dos expresiones.
tipo cadena de texto, el símbolo + realiza la concatenación de las dos expresiones.
Por ejemplo:
Por ejemplo:
nombre = "María"
nombre = "María"
frase = "Hola " + nombre
frase = "Hola " + nombre
document.write(frase)
document.write(frase)
como resultado, en el documento html aparecería la frase "Hola María"
como resultado, en el documento html aparecería la frase "Hola María"
El operador :?
El operador :?
Este operador que se verá con más detalle en el apartado sobre las estructuras de
Este operador que se verá con más detalle en el apartado sobre las estructuras de
control condicionales, tiene la siguiente sintaxis:
control condicionales, tiene la siguiente sintaxis:
condición ? valor1 : valor2
condición ? valor1 : valor2
Si la condición se cumple, devuelve el primer valor y en caso contrario el segundo.
Si la condición se cumple, devuelve el primer valor y en caso contrario el segundo.
Por ejemplo:
Por ejemplo:
x = 5 >>
Desplazamiento de bits
>> >>
Comparación de relación
< >=
Comparación de relación
< >=
Comparación de igualdad y desigualdad
== !=
Comparación de igualdad y desigualdad
== !=
AND binario
&
AND binario
&
XOR binario
^
XOR binario
^
OR binario
|
OR binario
|
AND lógico
&&
AND lógico
&&
OR lógico
||
OR lógico
||
Condicional
:?
Condicional
:?
Asignación
= += -= *= /= %= &= |= ^= = >>>=
Asignación
= += -= *= /= %= &= |= ^= = >>>=
Coma
,
Coma
,
Cuando en una expresión intervienen operadores de igual prioridad, estos se evalúan
Cuando en una expresión intervienen operadores de igual prioridad, estos se evalúan
de izquierda a derecha.
de izquierda a derecha.
PUOC FUOC
Módulo 2: JavaScript
33
PUOC FUOC
Módulo 2: JavaScript
33
Estructuras de control condicionales
Estructuras de control condicionales
Una sentencia condicional es una estructura de control de flujo que hace que el
Una sentencia condicional es una estructura de control de flujo que hace que el
programa realice una tarea u otra dependiendo del resultado de evaluar una
programa realice una tarea u otra dependiendo del resultado de evaluar una
condición.
condición.
En JavaScript las estructuras de control condicionales son:
En JavaScript las estructuras de control condicionales son:
• if … else, que en su forma más simple puede omitir el else y que en los casos más
• if … else, que en su forma más simple puede omitir el else y que en los casos más
complejos puede tomar la forma if … else if …
complejos puede tomar la forma if … else if …
• switch
• switch
La estructura de control if …
La estructura de control if …
Se realiza una acción específica en caso de cumplirse una condición.
Se realiza una acción específica en caso de cumplirse una condición.
En general la sintaxis es:
En general la sintaxis es:
if ( condición ){
if ( condición ){
grupo de sentencias }
grupo de sentencias }
Diagrama de flujo para la estructura de control if …
Diagrama de flujo para la estructura de control if …
El siguiente ejemplo muestra un texto adicional a la página, tan solo si el usuario
El siguiente ejemplo muestra un texto adicional a la página, tan solo si el usuario
introduce la clave de entrada correcta, en este caso "csi".
introduce la clave de entrada correcta, en este caso "csi".
PUOC FUOC
Módulo 2: JavaScript
34
PUOC FUOC
Módulo 2: JavaScript
34
Ejemplo estructura if ...
Ejemplo estructura if ...
//-->
En esta podrá encontrar toda la información referente a ...
En esta podrá encontrar toda la información referente a ...
En el caso en que el grupo de sentencias quede reducido a una sola sentencia, las
En el caso en que el grupo de sentencias quede reducido a una sola sentencia, las
llaves pueden omitirse. Esto también sirve para todas las estructuras que se explican
llaves pueden omitirse. Esto también sirve para todas las estructuras que se explican
a continuación.
a continuación.
La estructura de control if … else
La estructura de control if … else
En general la sintaxis es:
En general la sintaxis es:
if ( condición ){
if ( condición ){
grupo de sentencias 1 }
grupo de sentencias 1 }
else{
else{
grupo de sentencias 2 }
grupo de sentencias 2 }
PUOC FUOC
Módulo 2: JavaScript
35
PUOC FUOC
Diagrama de flujo para la estructura de control if … else
Módulo 2: JavaScript
35
Diagrama de flujo para la estructura de control if … else
En el siguiente ejemplo se muestra como incluir una acción alternativa en el caso de
En el siguiente ejemplo se muestra como incluir una acción alternativa en el caso de
no cumplirse la condición:
no cumplirse la condición:
Ejemplo estructura if ... else
Ejemplo estructura if ... else
//-->
Una forma alternativa de escribir esta sentencia es usar la forma:
Una forma alternativa de escribir esta sentencia es usar la forma:
condición ? expresión1 : expresión2 Si la condición se cumple se ejecuta expresión1 y en caso contrario expresión2.
condición ? expresión1 : expresión2 Si la condición se cumple se ejecuta expresión1 y en caso contrario expresión2.
PUOC FUOC
Módulo 2: JavaScript
36
PUOC FUOC
Módulo 2: JavaScript
El ejemplo anterior quedaría de la siguiente forma:
El ejemplo anterior quedaría de la siguiente forma:
…
…
resp
==
"8"
?
document.write("Estamos
en
agosto")
:
resp
==
"8"
?
document.write("Estamos
document.write("No estamos en agosto")
document.write("No estamos en agosto")
…
…
La estructura de control if … else if …
La estructura de control if … else if …
En general la sintaxis es:
En general la sintaxis es:
if ( condición1 ){
agosto")
if ( condición1 ){
grupo de sentencias 1
grupo de sentencias 1
}
}
else if ( condición2 ) {
else if ( condición2 ) {
grupo de sentencias 2 }
en
grupo de sentencias 2 }
Diagrama de flujo para la estructura de control if … else if...
Diagrama de flujo para la estructura de control if … else if...
En el siguiente ejemplo se muestran varias estructuras if … else anidadas:
En el siguiente ejemplo se muestran varias estructuras if … else anidadas:
Ejemplo estructura if ... else if ...
Ejemplo estructura if ... else if ...
//-->
La estructura de control switch
La estructura de control switch
En general la sintaxis es:
En general la sintaxis es:
switch ( variable ){
switch ( variable ){
case valor1: {grupo de sentencias 1}
case valor1: {grupo de sentencias 1}
break;
break;
case valor2: {grupo de sentencias 2}
case valor2: {grupo de sentencias 2}
break;
break;
…………………
…………………
case valorN: {grupo de sentencias N}
case valorN: {grupo de sentencias N}
break; default: {grupo }
break; default: {grupo
de sentencias si no se cumple ninguno de los casos anteriores}
}
de sentencias si no se cumple ninguno de los casos anteriores}
PUOC FUOC
Módulo 2: JavaScript
38
PUOC FUOC
Módulo 2: JavaScript
Diagrama de flujo para la estructura de control switch
Diagrama de flujo para la estructura de control switch
El siguiente ejemplo muestra una estructura alternativa múltiple:
El siguiente ejemplo muestra una estructura alternativa múltiple:
Ejemplo estructura switch
Ejemplo estructura switch
//-->
38
PUOC FUOC
Módulo 2: JavaScript
39
PUOC FUOC
Módulo 2: JavaScript
39
En este ejemplo, se ha tenido que hacer uso de la función parseInt(), ya que el valor
En este ejemplo, se ha tenido que hacer uso de la función parseInt(), ya que el valor
devuelto por la función prompt() es una cadena de caracteres y en el switch se están
devuelto por la función prompt() es una cadena de caracteres y en el switch se están
usando valores numéricos.
usando valores numéricos.
En el ejemplo if ... else if …, no ha sido necesario hacer la conversión, ya que el
En el ejemplo if ... else if …, no ha sido necesario hacer la conversión, ya que el
operador == no compara de forma estricta.
operador == no compara de forma estricta.
Estructuras de control iterativas
Estructuras de control iterativas
Una sentencia iterativa, repetitiva o bucle es una estructura que permite repetir una
Una sentencia iterativa, repetitiva o bucle es una estructura que permite repetir una
tarea un número de veces, determinado por una condición.
tarea un número de veces, determinado por una condición.
En JavaScript las estructuras de control iterativas son:
En JavaScript las estructuras de control iterativas son:
• for
• for
• while
• while
• do … while
• do … while
En estas estructuras el número de iteraciones viene determinado por la condición de
En estas estructuras el número de iteraciones viene determinado por la condición de
finalización, aunque es posible interrumpir la ejecución mediante el uso de las
finalización, aunque es posible interrumpir la ejecución mediante el uso de las
sentencias break y continue.
sentencias break y continue.
La estructura de control for
La estructura de control for
Se utiliza un contador que determina cuantas veces debe realizarse una acción
Se utiliza un contador que determina cuantas veces debe realizarse una acción
específica. Se utiliza esta estructura cuando el número de iteraciones es un valor
específica. Se utiliza esta estructura cuando el número de iteraciones es un valor
conocido.
conocido.
En general la sintaxis es:
En general la sintaxis es:
for ([expresión
inicialización];[condición];[expresión incremento o decremento]){
for ([expresión
grupo de acciones }
inicialización];[condición];[expresión incremento o decremento]){
grupo de acciones }
En esta estructura se utiliza un contador. El contador puede ser usado de forma que
En esta estructura se utiliza un contador. El contador puede ser usado de forma que
incremente su valor, en una cierta cantidad, en cada iteración hasta un valor
incremente su valor, en una cierta cantidad, en cada iteración hasta un valor
PUOC FUOC
Módulo 2: JavaScript
40
PUOC FUOC
Módulo 2: JavaScript
40
determinado, o bien de forma que el valor inicial se vaya decrementando en cada
determinado, o bien de forma que el valor inicial se vaya decrementando en cada
iteración.
iteración.
Con un contador ascendente la expresión toma la siguiente forma:
Con un contador ascendente la expresión toma la siguiente forma:
for (contador
= valor inicial; contador = valor final; contador -= incremento){
grupo de acciones }
Diagrama de flujo para la estructura de control for
Diagrama de flujo para la estructura de control for
El ejemplo siguiente calcula y muestra la tabla de multiplicar del 2:
El ejemplo siguiente calcula y muestra la tabla de multiplicar del 2:
Ejemplo estructura for
Ejemplo estructura for
PUOC FUOC
Módulo 2: JavaScript
41
document.write( "2 * " + i + " = " + result + ""); }//-->
En la primera línea del for del ejemplo, la expresión ( var i = 0; i < 11; i++ ) inicializa
En la primera línea del for del ejemplo, la expresión ( var i = 0; i < 11; i++ ) inicializa
la variable i a 0 la primera vez que entra en el bucle. En las siguientes entradas la
la variable i a 0 la primera vez que entra en el bucle. En las siguientes entradas la
variable i se incrementa en 1, y este proceso se repite mientras i tenga un valor menor
variable i se incrementa en 1, y este proceso se repite mientras i tenga un valor menor
a 11.
a 11.
La estructura de control while
La estructura de control while
Se realiza una acción específica en caso de cumplirse una condición. El grupo de
Se realiza una acción específica en caso de cumplirse una condición. El grupo de
acciones puede no ejecutarse nunca si la condición no se cumple, ya que esta se
acciones puede no ejecutarse nunca si la condición no se cumple, ya que esta se
encuentra al inicio de la expresión.
encuentra al inicio de la expresión.
La sintaxis es:
La sintaxis es:
while (condición){
while (condición){
grupo de acciones }
grupo de acciones }
Diagrama de flujo para la estructura de control while
Diagrama de flujo para la estructura de control while
El siguiente ejemplo calcula la suma de los valores positivos menores o igual a un
El siguiente ejemplo calcula la suma de los valores positivos menores o igual a un
número introducido por el usuario.
número introducido por el usuario.
PUOC FUOC
Módulo 2: JavaScript
42
PUOC FUOC
Módulo 2: JavaScript
42
Ejemplo estructura while
Ejemplo estructura while
//-->
La estructura de control do … while
La estructura de control do … while
Se trata de un bloque repetitivo en el que las acciones se ejecutan al menos una vez.
Se trata de un bloque repetitivo en el que las acciones se ejecutan al menos una vez.
Esto es debido a que la condición de finalización se encuentra al final del bloque.
Esto es debido a que la condición de finalización se encuentra al final del bloque.
La sintaxis es:
La sintaxis es:
do{ grupo de acciones } while(condición)
do{ grupo de acciones } while(condición)
PUOC FUOC
Módulo 2: JavaScript
43
PUOC FUOC
Módulo 2: JavaScript
Diagrama de flujo para la estructura de control do ... while
43
Diagrama de flujo para la estructura de control do ... while
En el siguiente ejemplo permite calcular el resultado de expresiones matemáticas. El
En el siguiente ejemplo permite calcular el resultado de expresiones matemáticas. El
usuario decide al final de cada cálculo si desea o no seguir realizando operaciones.
usuario decide al final de cada cálculo si desea o no seguir realizando operaciones.
Ejemplo estructura do ... while
Ejemplo estructura do ... while
//-->
Fin
Fin
La sentencia break
La sentencia break
La sentencia break interrumpe la ejecución del bucle inmediatamente superior en el
La sentencia break interrumpe la ejecución del bucle inmediatamente superior en el
que se encuentra.
que se encuentra.
PUOC FUOC
Módulo 2: JavaScript
44
PUOC FUOC
Módulo 2: JavaScript
44
En el siguiente ejemplo, se usa la instrucción break para detener el bucle que calcula
En el siguiente ejemplo, se usa la instrucción break para detener el bucle que calcula
la tabla de multiplicar del 2 cuando el usuario lo decide.
la tabla de multiplicar del 2 cuando el usuario lo decide.
Ejemplo break
Ejemplo break
//-->
La sentencia continue
La sentencia continue
La sentencia continue interrumpe la ejecución de la iteración actual y transfiere el
La sentencia continue interrumpe la ejecución de la iteración actual y transfiere el
control a la siguiente iteración.
control a la siguiente iteración.
En el siguiente ejemplo, se usa la instrucción continue para no imprimir el resultado
En el siguiente ejemplo, se usa la instrucción continue para no imprimir el resultado
del producto 2*5 en la tabla de multiplicar del 2.
del producto 2*5 en la tabla de multiplicar del 2.
Ejemplo continue
Ejemplo continue
//-->
PUOC FUOC
Módulo 2: JavaScript
45
PUOC FUOC
Módulo 2: JavaScript
45
La sentencia with
La sentencia with
La sentencia with permite usar un grupo de sentencias que hacen referencia a un
La sentencia with permite usar un grupo de sentencias que hacen referencia a un
objeto de manera que no sea necesario indicar, en cada sentencia, el objeto al que
objeto de manera que no sea necesario indicar, en cada sentencia, el objeto al que
hacen referencia.
hacen referencia.
La sintaxis es la siguiente:
La sintaxis es la siguiente:
with ( objeto ){
with ( objeto ){
grupo de sentencias }
grupo de sentencias }
En el siguiente ejemplo se omite el nombre del array en las sentencias que hacen
En el siguiente ejemplo se omite el nombre del array en las sentencias que hacen
referencia a él dentro de la estructura with:
referencia a él dentro de la estructura with:
Ejemplo with
Ejemplo with
Los datos iniciales del array son: Barcelona,Palma de Mallorca,Cáceres,Sevilla
Los datos iniciales del array son: Barcelona,Palma de Mallorca,Cáceres,Sevilla
//-->
Sin la estructura with, se tendría que especificar el nombre del array de la siguiente
Sin la estructura with, se tendría que especificar el nombre del array de la siguiente
manera:
manera:
ciudades.sort()
ciudades.sort()
ciudades.reverse()
ciudades.reverse()
PUOC FUOC
Módulo 2: JavaScript
46
PUOC FUOC
Etapa 4: Funciones
Módulo 2: JavaScript
46
Etapa 4: Funciones
Definición de una función
Definición de una función
Las funciones son una de las partes fundamentales en JavaScript. Una función se
Las funciones son una de las partes fundamentales en JavaScript. Una función se
define como un conjunto de sentencias que realizan una tarea específica, y que
define como un conjunto de sentencias que realizan una tarea específica, y que
puede ser llamada desde cualquier parte de la aplicación.
puede ser llamada desde cualquier parte de la aplicación.
Una función se compone de varias sentencias que, en conjunto, realizan una
Una función se compone de varias sentencias que, en conjunto, realizan una
tarea determinada.
tarea determinada.
Definición de la función
Definición de la función
Una función se define mediante el uso de la palabra function, seguida de:
Una función se define mediante el uso de la palabra function, seguida de:
• el nombre de la función
• el nombre de la función
• la lista de parámetros de la función, encerrados entre paréntesis y separados por
• la lista de parámetros de la función, encerrados entre paréntesis y separados por
comas
comas
• las sentencias JavaScript que definen la función, encerradas entre llaves
• las sentencias JavaScript que definen la función, encerradas entre llaves
function nombre_función( [parámetro 1, parámetro 2, … ] )
function nombre_función( [parámetro 1, parámetro 2, … ] )
{
{ bloque de sentencias
bloque de sentencias
}
}
La existencia de argumentos, así como el número de éstos, es opcional y depende de
La existencia de argumentos, así como el número de éstos, es opcional y depende de
cada función en concreto.
cada función en concreto.
El nombre de la función puede contener el carácter _ pero no espacios ni acentos, y
El nombre de la función puede contener el carácter _ pero no espacios ni acentos, y
al igual que el resto del código JavaScript, es sensible a las mayúsculas y minúsculas.
al igual que el resto del código JavaScript, es sensible a las mayúsculas y minúsculas.
Ejemplos de nombres admitidos para las funciones
Ejemplos de nombres admitidos para las funciones
function VerMensaje()
function ver_mensaje()
function _verMensaje()
function VerMensaje()
function ver_mensaje()
function _verMensaje()
{
{
{
{
{
{
document.write("Hola") }
document.write("Hola") }
document.write("Hola") }
document.write("Hola") }
document.write("Hola") }
document.write("Hola") }
PUOC FUOC
Módulo 2: JavaScript
47
PUOC FUOC
Módulo 2: JavaScript
47
El bloque de sentencias va entre los caracteres { y } que especifican el inicio y el final
El bloque de sentencias va entre los caracteres { y } que especifican el inicio y el final
de la función.
de la función.
Ubicación en el documento HTML
Ubicación en el documento HTML
Las funciones se definen en la cabecera del documento HTML entre las etiquetas
Las funciones se definen en la cabecera del documento HTML entre las etiquetas
y , pero pueden definirse también en el cuerpo del documento
y , pero pueden definirse también en el cuerpo del documento
o en un fichero externo.
o en un fichero externo.
Mi documento
Mi documento
//-->
En el caso de haber más de una función, éstas se ubicarían también entre las etiquetas
En el caso de haber más de una función, éstas se ubicarían también entre las etiquetas
y .
y .
Mi documento
Mi documento
//-->
PUOC FUOC
Módulo 2: JavaScript
48
PUOC FUOC
Módulo 2: JavaScript
48
En un documento se pueden incluir tantas funciones como hagan falta.
En un documento se pueden incluir tantas funciones como hagan falta.
Llamada a la función
Llamada a la función
Las funciones no se ejecutan por sí solas, tienen que ser llamadas, ya sea desde otra
Las funciones no se ejecutan por sí solas, tienen que ser llamadas, ya sea desde otra
función o bien desde el cuerpo del documento.
función o bien desde el cuerpo del documento.
En el siguiente ejemplo se realiza la llamada a una función desde el cuerpo del
En el siguiente ejemplo se realiza la llamada a una función desde el cuerpo del
documento, concretamente se realiza la llamada cuando el usuario pulsa un botón:
documento, concretamente se realiza la llamada cuando el usuario pulsa un botón:
Ejemplo 5
Ejemplo 5
//-->
Pulse el botón:
Pulse el botón:
Para que una función se ejecute debe ser llamada.
value="Recibir
saludo"
Para que una función se ejecute debe ser llamada.
Parámetros de la función
Parámetros de la función
Los parámetros son los datos de entrada que la función necesita para realizar
Los parámetros son los datos de entrada que la función necesita para realizar
una tarea. Una función puede recibir tantos parámetros como sea necesario.
una tarea. Una función puede recibir tantos parámetros como sea necesario.
PUOC FUOC
Módulo 2: JavaScript
49
PUOC FUOC
Módulo 2: JavaScript
49
En el siguiente script, a diferencia del que se muestra en el ejemplo anterior, la fun-
En el siguiente script, a diferencia del que se muestra en el ejemplo anterior, la fun-
ción recibe el texto que mostrará en el mensaje:
ción recibe el texto que mostrará en el mensaje:
function saludo(texto)
function saludo(texto)
{
{ alert(texto);
}
alert(texto); }
Los parámetros son los datos de entrada a la función.
Los parámetros son los datos de entrada a la función.
El siguiente ejemplo muestra como una misma función puede ser llamada varias
El siguiente ejemplo muestra como una misma función puede ser llamada varias
veces:
veces:
Ejemplo 6
Ejemplo 6
//-->
Pulse el botón:
Pulse el botón:
PUOC FUOC
Módulo 2: JavaScript
50
PUOC FUOC
Módulo 2: JavaScript
50
El resultado que se visualizará en el navegador será diferente para cada llamada, ya
El resultado que se visualizará en el navegador será diferente para cada llamada, ya
que depende del valor del parámetro.
que depende del valor del parámetro.
Resultado al pulsar el botón 1
Resultado al pulsar el botón 1
Resultado al pulsar el botón 2
Resultado al pulsar el botón 2
PUOC FUOC
Módulo 2: JavaScript
51
PUOC FUOC
Módulo 2: JavaScript
51
En este ejemplo se puede ver también como en algunos casos es necesario alternar el
En este ejemplo se puede ver también como en algunos casos es necesario alternar el
uso de las comillas dobles con las comillas simples. Concretamente en la línea:
uso de las comillas dobles con las comillas simples. Concretamente en la línea:
onClick="javaScript:saludo('Hola Juan')"
onClick="javaScript:saludo('Hola Juan')"
El texto que se pasa a la función como parámetro, se ha puesto entre comillas
El texto que se pasa a la función como parámetro, se ha puesto entre comillas
simples. El motivo de ello es no confundir al navegador, puesto que las comillas
simples. El motivo de ello es no confundir al navegador, puesto que las comillas
dobles están siendo usadas para indicar el inicio y el fin de la llamada. Por ejemplo,
dobles están siendo usadas para indicar el inicio y el fin de la llamada. Por ejemplo,
si se escribiera:
si se escribiera:
onClick="javaScript:saludo("Hola Juan")"
onClick="javaScript:saludo("Hola Juan")"
El navegador podría interpretar que la sentencia a ejecutar en onClick es
El navegador podría interpretar que la sentencia a ejecutar en onClick es
javaScript:saludo( lo que provocaría un error.
javaScript:saludo( lo que provocaría un error.
Otra aspecto que se debe destacar es el ámbito en el que la variable texto tiene valor.
Otra aspecto que se debe destacar es el ámbito en el que la variable texto tiene valor.
Cuando se pasa un parámetro a una función, éste se usa dentro de la función como
Cuando se pasa un parámetro a una función, éste se usa dentro de la función como
una variable. Fuera de la función no existe y, por tanto, no puede ser usado fuera de
una variable. Fuera de la función no existe y, por tanto, no puede ser usado fuera de
ella.
ella.
El parámetro de una función, sólo existe dentro de la propia función
El parámetro de una función, sólo existe dentro de la propia función
Además cuando se pasa una variable como parámetro de una función, esta se pasa
Además cuando se pasa una variable como parámetro de una función, esta se pasa
por su valor, es decir, la manipulación en el interior de la función de la variable no
por su valor, es decir, la manipulación en el interior de la función de la variable no
modifica el valor de la variable en el exterior de la función. Pero esta característica
modifica el valor de la variable en el exterior de la función. Pero esta característica
no es siempre así, ya que cuando se le pasan tipos compuestos como arrays o objetos,
no es siempre así, ya que cuando se le pasan tipos compuestos como arrays o objetos,
estos son pasados por referencia, con lo que la modificación de sus valores en el
estos son pasados por referencia, con lo que la modificación de sus valores en el
interior de la función modifica los valores en el exterior.
interior de la función modifica los valores en el exterior.
Por otra parte, si se realiza una llamada a una función que espera ciertos parámetros
Por otra parte, si se realiza una llamada a una función que espera ciertos parámetros
pero estos no se le pasan, la función rellena los parámetros con el valor "null".
pero estos no se le pasan, la función rellena los parámetros con el valor "null".
Propiedades de las funciones
Propiedades de las funciones
Cuando se crea una función, esta adquiere un conjunto de propiedades y métodos
Cuando se crea una función, esta adquiere un conjunto de propiedades y métodos
que se estudiarán en etapas posteriores, pero hay una especialmente útil relacionado
que se estudiarán en etapas posteriores, pero hay una especialmente útil relacionado
con los parámetros de entrada, length.
con los parámetros de entrada, length.
Mediante esta propiedad, de solo lectura, se puede consultar el número de
Mediante esta propiedad, de solo lectura, se puede consultar el número de
parámetros que admite la función, es decir, el número de parámetros de entrada que
parámetros que admite la función, es decir, el número de parámetros de entrada que
se han definido al crear la función.
se han definido al crear la función.
PUOC FUOC
Módulo 2: JavaScript
52
PUOC FUOC
Módulo 2: JavaScript
Por ejemplo:
Por ejemplo:
function calcula(par1,par2,par3)
function calcula(par1,par2,par3)
{
{ //bloque de código
52
//bloque de código
}
}
alert("La función calcula se define con " + calcula.length + "
alert("La función calcula se define con " + calcula.length + "
parámetros.");
parámetros.");
Este script mostraria la ventana pop-up indicando que la función se ha definido con
Este script mostraria la ventana pop-up indicando que la función se ha definido con
3 parámetros.
3 parámetros.
Por otra parte, se pueden consultar los parámetros pasados a una función mediante
Por otra parte, se pueden consultar los parámetros pasados a una función mediante
el array arguments[] asociado a la función. Este array contiene cada uno de los
el array arguments[] asociado a la función. Este array contiene cada uno de los
parámetros utilizados en la llamada de la función, independientemente del número
parámetros utilizados en la llamada de la función, independientemente del número
de parámetros definidos en la creación de la función. Esta característica, aunque en
de parámetros definidos en la creación de la función. Esta característica, aunque en
principio puede romper la lógica, es muy interesante e imprescindible cuando se
principio puede romper la lógica, es muy interesante e imprescindible cuando se
necesita crear una función que a priori se desconoce el número de parámetros de
necesita crear una función que a priori se desconoce el número de parámetros de
entrada.
entrada.
El siguiente ejemplo utiliza la propiedad anterior para la creación de una función que
El siguiente ejemplo utiliza la propiedad anterior para la creación de una función que
realiza la suma de los valores pasados como argumento de esta:
realiza la suma de los valores pasados como argumento de esta:
function sumadora()
function sumadora()
{
{ var total=0;
var total=0;
for (var i=0; i< sumadora.arguments.length; i++)
for (var i=0; i< sumadora.arguments.length; i++)
{
{
total += sumadora.arguments[i];
total += sumadora.arguments[i];
}
}
return(total);
return(total);
}
}
Como se observa en el ejemplo, la función se ha definido sin ningún parámetro de
Como se observa en el ejemplo, la función se ha definido sin ningún parámetro de
entrada, de forma que el número de estos se conoce por la longitud del array de
entrada, de forma que el número de estos se conoce por la longitud del array de
parámetros, creando a partir de este el límite superior del bucle que realiza la suma
parámetros, creando a partir de este el límite superior del bucle que realiza la suma
de todos los valores del array.
de todos los valores del array.
La llamada a la función podria ser:
La llamada a la función podria ser:
alert(sumadora(2,3,6,5,4,1);
alert(sumadora(2,3,6,5,4,1);
PUOC FUOC
Módulo 2: JavaScript
53
PUOC FUOC
Módulo 2: JavaScript
53
Retorno de la función
Retorno de la función
Las funciones también pueden devolver un valor, aunque, como ya se ha visto en
Las funciones también pueden devolver un valor, aunque, como ya se ha visto en
ejemplos anteriores, no es imprescindible.
ejemplos anteriores, no es imprescindible.
function cuadrado(num){
function cuadrado(num){
resultado = num * num
resultado = num * num
return resultado
return resultado
}
}
En consecuencia, es posible asignar una función a una variable.
En consecuencia, es posible asignar una función a una variable.
nombre_variable = nombre_funcion(parámetros)
nombre_variable = nombre_funcion(parámetros)
Además una función puede contener varias sentencias return, de esta forma se fuerza
Además una función puede contener varias sentencias return, de esta forma se fuerza
la finalización de la función al ejecutar el return y devuelve el valor asignado. Por
la finalización de la función al ejecutar el return y devuelve el valor asignado. Por
otro lado, cabe comentar que toda función, cuando no dispone de sentencia return,
otro lado, cabe comentar que toda función, cuando no dispone de sentencia return,
devuelve el valor undefined.
devuelve el valor undefined.
El ejemplo siguiente muestra como hacerlo y como realizar llamadas entre
El ejemplo siguiente muestra como hacerlo y como realizar llamadas entre
funciones:
funciones:
Ejemplo 7
Ejemplo 7
//-->
PUOC FUOC
Módulo 2: JavaScript
54
PUOC FUOC
Módulo 2: JavaScript
54
Pulse el botón:
Pulse el botón:
También se podría haber escrito la función de la siguiente manera:
También se podría haber escrito la función de la siguiente manera:
function calculo() {
function calculo() {
alert("el cuadrado del número 7 es: " + cuadrado(7));
alert("el cuadrado del número 7 es: " + cuadrado(7));
}
}
ya que al devolver un valor, la función tiene valor por sí misma.
ya que al devolver un valor, la función tiene valor por sí misma.
El JavaScript admite también funciones recursivas. Una función recursiva es la que se llama a sí misma.
para evitar que la recursión continúe indefinidamente es preciso incluir una condición de finalización.
El JavaScript admite también funciones recursivas. Una función recursiva es la que se llama a sí misma.
para evitar que la recursión continúe indefinidamente es preciso incluir una condición de finalización.
La recursividad es una herramienta muy potente en algunas aplicaciones, especialmente las de cálculo, y puede ser usada como una alternativa a la repetición o estructura repetitiva.
Muchas funciones matemáticas se definen recursivamente. Un ejemplo de ello es el factorial de un número entero n.
La recursividad es una herramienta muy potente en algunas aplicaciones, especialmente las de cálculo, y puede ser usada como una alternativa a la repetición o estructura repetitiva.
Muchas funciones matemáticas se definen recursivamente. Un ejemplo de ello es el factorial de un número entero n.
La función factorial se define como:
La escritura de una función recursiva es similar a su homónima no recursiva; sin embargo, 1 n! n *⋅ ( n – 1 ) *⋅ ( n – 2 ) *⋅ ... *⋅ 2 *⋅ 1 Si se observa la fórmula anterior cuando n>0, es fácil definir n! en función de (n − 1)!. 4! 3! 2! 1! 0!
= = = = =
4 3 2 1 1
* * * *
La función factorial se define como:
La escritura de una función recursiva es similar a su homónima no recursiva; sin embargo, 1 n! n *⋅ ( n – 1 ) *⋅ ( n – 2 ) *⋅ ... *⋅ 2 *⋅ 1
si n = 0 si n > 0
Por ejemplo, 5! 5! = 5 · 4 · 3 · 2 · 1 = 120
3 * 2 * 1 = 24 2*1 =6 1 =2 1 =1 =1
Si se observa la fórmula anterior cuando n>0, es fácil definir n! en función de (n − 1)!. 4! 3! 2! 1! 0!
= = = = =
4 3 2 1 1
* * * *
5! = 5 · 4 · 3 · 2 · 1 = 120
3 * 2 * 1 = 24 2*1 =6 1 =2 1 =1 =1
Las expresiones anteriores se pueden transformar en:
5! 4! 3! 2! 1!
5! 4! 3! 2! 1!
5 4 3 2 1
* * * * *
4! 3! 2! 1! 0!
En términos generales sería: 1 n! n ⋅ ( n – 1 )!
= = = = =
5 4 3 2 1
* * * * *
si n > 0
Por ejemplo, 5!
Las expresiones anteriores se pueden transformar en: = = = = =
si n = 0
4! 3! 2! 1! 0!
En términos generales sería: si n = 0 si n > 0
1 n! n ⋅ ( n – 1 )!
si n = 0 si n > 0
PUOC FUOC
Módulo 2: JavaScript
55
PUOC FUOC
Módulo 2: JavaScript
La implementación en JavaScript de la función Factorial sería:
La implementación en JavaScript de la función Factorial sería:
Ejemplo 8
Ejemplo 8
//-->
document.write( Factorial(5) )
document.write( Factorial(5) )
Funciones locales
Funciones locales
En ciertas ocasiones es útil limitar el ámbito de uso de una función a otra función,
En ciertas ocasiones es útil limitar el ámbito de uso de una función a otra función,
es decir, que la primera función solo pueda ser utilizada en el interior de la segunda.
es decir, que la primera función solo pueda ser utilizada en el interior de la segunda.
En este caso se habla de funciones locales.
En este caso se habla de funciones locales.
Para crear una función local solo es necesario declararla en el interior del bloque de
Para crear una función local solo es necesario declararla en el interior del bloque de
instrucciones de la función que la contiene.
instrucciones de la función que la contiene.
function nombre_funcion( [parámetro 1, parámetro 2, … ] ){
function nombre_funcion( [parámetro 1, parámetro 2, … ] ){
function nombre_local([parámetro 1, parámetro 2, ...]){
function nombre_local([parámetro 1, parámetro 2, ...]){
bloque de sentencia
bloque de sentencia
}
}
bloque de sentencias
bloque de sentencias
}
}
Funciones como objetos
Funciones como objetos
Como se estudiará en las siguientes etapas, en JavaScript prácticamente todo es un
Como se estudiará en las siguientes etapas, en JavaScript prácticamente todo es un
objeto y el caso de las funciones no es una excepción. Es posible definir funciones a
objeto y el caso de las funciones no es una excepción. Es posible definir funciones a
partir del objeto Function, la sintaxis del constructor de este objeto es:
partir del objeto Function, la sintaxis del constructor de este objeto es:
var nombreFuncion = new Function("parámetro 1", "parámetro 2",...,"bloque de sentencias");
var nombreFuncion = new Function("parámetro 1", "parámetro 2",...,"bloque de sentencias");
PUOC FUOC
Módulo 2: JavaScript
56
PUOC FUOC
Módulo 2: JavaScript
56
De esta forma, en primer lugar se definen los parámetros de la función y en último
De esta forma, en primer lugar se definen los parámetros de la función y en último
lugar se especifica el bloque de sentencias que define el comportamiento de la
lugar se especifica el bloque de sentencias que define el comportamiento de la
función.
función.
En el siguiente ejemplo se observa la asignación del objeto a una variable saludo:
En el siguiente ejemplo se observa la asignación del objeto a una variable saludo:
var saludo = new Function("nombre", "alert('Bienvenido '+nombre);");
var saludo = new Function("nombre", "alert('Bienvenido '+nombre);");
De esta forma se puede llamar a la función con la siguiente sintaxis:
De esta forma se puede llamar a la función con la siguiente sintaxis:
saludo("Victor");
saludo("Victor");
Funciones predefinidas
Funciones predefinidas
Las funciones predefinidas en JavaScript no son métodos asociados a un objeto, sino
Las funciones predefinidas en JavaScript no son métodos asociados a un objeto, sino
que forman parte del lenguaje por sí mismas. Estas funciones que permiten evaluar
que forman parte del lenguaje por sí mismas. Estas funciones que permiten evaluar
expresiones, realizar conversiones de tipo y testear el resultado de una expresión, son
expresiones, realizar conversiones de tipo y testear el resultado de una expresión, son
las que se describen a continuación.
las que se describen a continuación.
Función eval
Función eval eval
eval
Descripción
Ejecuta la expresión o sentencia contenida en la cadena de texto que recibe como parámetro.
Descripción
Ejecuta la expresión o sentencia contenida en la cadena de texto que recibe como parámetro.
Sintaxis
eval( cadena de texto)
Sintaxis
eval( cadena de texto)
Ejemplo
mensaje = 'Hola Juan'
Ejemplo
mensaje = 'Hola Juan'
eval("alert(' " + mensaje + " ')")
Función parseInt
eval("alert(' " + mensaje + " ')")
Función parseInt parseInt
Descripción
Convierte una cadena de texto en un número entero según la base indicada. Si se omite la base, se supone que está en base 10.
parseInt Descripción
Si la conversión produce un error, retorna el valor NaN.
Convierte una cadena de texto en un número entero según la base indicada. Si se omite la base, se supone que está en base 10. Si la conversión produce un error, retorna el valor NaN.
Sintaxis
parseInt( cadena de texto, [base])
Sintaxis
parseInt( cadena de texto, [base])
Ejemplo
parseInt("2001")
Ejemplo
parseInt("2001")
PUOC FUOC
Módulo 2: JavaScript
Función parseFloat
57
PUOC FUOC
Módulo 2: JavaScript
Función parseFloat parseFloat
Descripción
Convierte una cadena de texto en un número real.
parseFloat Descripción
Si la conversión produce un error, retorna el valor NaN.
Convierte una cadena de texto en un número real. Si la conversión produce un error, retorna el valor NaN.
Sintaxis
parseFloat( cadena de texto)
Sintaxis
parseFloat( cadena de texto)
Ejemplo
parseFloat("3.141516") A = pi * r * r
Ejemplo
parseFloat("3.141516") A = pi * r * r
Función isNaN
Función isNaN isNaN
isNaN
Descripción
Retorna true si el parámetro es NaN.
Descripción
Retorna true si el parámetro es NaN.
Sintaxis
isNaN( valor )
Sintaxis
isNaN( valor )
Ejemplo
isNaN("2001")
Ejemplo
isNaN("2001")
Testear el retorno de la función es útil para validar datos introducidos por el usuario. El valor NaN es de gran utilidad en estos casos. Por ejemplo, en un formulario en el que se solicite al usuario su año de nacimiento, un primer paso en la validación del dato introducido es la comprobación de que se han introducido sólo números.
Testear el retorno de la función es útil para validar datos introducidos por el usuario. El valor NaN es de gran utilidad en estos casos. Por ejemplo, en un formulario en el que se solicite al usuario su año de nacimiento, un primer paso en la validación del dato introducido es la comprobación de que se han introducido sólo números.
function valida(anio) { if (isNaN(Number(anio))) alert("Dato incorrecto. Introduzca de nuevo el dato solicitado") }
function valida(anio) { if (isNaN(Number(anio))) alert("Dato incorrecto. Introduzca de nuevo el dato solicitado") }
El valor NaN devuelto por una función indica que se ha producido un error.
El valor NaN devuelto por una función indica que se ha producido un error.
Función isFinite
Función isFinite isFinite
isFinite
Descripción
Retorna true si el parámetro es un número y es finito.
Descripción
Retorna true si el parámetro es un número y es finito.
Sintaxis
isFinite( numero )
Sintaxis
isFinite( numero )
Ejemplo
isFinite(2001)
Ejemplo
isFinite(2001)
57
PUOC FUOC
Módulo 2: JavaScript
58
Función Number
PUOC FUOC
Módulo 2: JavaScript
Función Number Number
Descripción
Convierte a número una expresión.
Number Descripción
Si la conversión produce un error, retorna el valor NaN.
Convierte a número una expresión. Si la conversión produce un error, retorna el valor NaN.
Sintaxis
Number( expresión )
Sintaxis
Number( expresión )
Ejemplo
Number("2001")
Ejemplo
Number("2001")
Función String
Función String String
Descripción
58
Convierte en cadena de texto una expresión.
String Descripción
Si la conversión produce un error, retorna el valor NaN.
Convierte en cadena de texto una expresión. Si la conversión produce un error, retorna el valor NaN.
Sintaxis
String( expresión )
Sintaxis
String( expresión )
Ejemplo
String(123456)
Ejemplo
String(123456)
El siguiente ejemplo muestra diversas posibilidades en la utilización de las funciones
El siguiente ejemplo muestra diversas posibilidades en la utilización de las funciones
descritas:
descritas:
Ejemplo 9
Ejemplo 9
vcadena = "Hola Juan"
vcadena = "Hola Juan"
vnumero = 2001
vnumero = 2001
alert(eval(vnumero + "25"))// muestra 200125
alert(eval(vnumero + "25"))// muestra 200125
alert(eval(vnumero + 25))// muestra 2026
alert(eval(vnumero + 25))// muestra 2026
alert( parseInt(vcadena))// muestra NaN
alert( parseInt(vcadena))// muestra NaN
alert( parseInt("2001"))// muestra 2001
alert( parseInt("2001"))// muestra 2001
alert( parseInt(3.141516))// muestra 3
alert( parseInt(3.141516))// muestra 3
alert( parseInt(vnumero + 3.141516))// muestra 2004
alert( parseInt(vnumero + 3.141516))// muestra 2004
alert( parseInt("24 horas"))// muestra 24
alert( parseInt("24 horas"))// muestra 24
alert( parseFloat(vcadena))// muestra NaN
alert( parseFloat(vcadena))// muestra NaN
alert( parseFloat(vnumero))// muestra 2001
alert( parseFloat(vnumero))// muestra 2001
alert( parseFloat("3.141516"))// muestra 3.141516
alert( parseFloat("3.141516"))// muestra 3.141516
alert(isNaN(eval(vnumero + "25")))// muestra false
alert(isNaN(eval(vnumero + "25")))// muestra false
alert(isNaN(parseInt(vcadena)))// muestra true
alert(isNaN(parseInt(vcadena)))// muestra true
alert(isFinite(vnumero))// muestra true
alert(isFinite(vnumero))// muestra true
PUOC FUOC
Módulo 2: JavaScript
59
PUOC FUOC
Módulo 2: JavaScript
alert(isFinite(vcadena))// muestra false
alert(isFinite(vcadena))// muestra false
alert(isFinite(vnumero/0))// muestra false
alert(isFinite(vnumero/0))// muestra false
alert(Number("1234"))// muestra 1234
alert(Number("1234"))// muestra 1234
alert(Number(vcadena))// muestra NaN
alert(Number(vcadena))// muestra NaN
alert(Number("2 peces"))// muestra NaN
alert(Number("2 peces"))// muestra NaN
alert(String(vnumero) + " años")// muestra el texto 2001 años
alert(String(vnumero) + " años")// muestra el texto 2001 años
alert( String(vnumero + 3.141516))// muestra 2004.141516
59
alert( String(vnumero + 3.141516))// muestra 2004.141516
Las funciones decodeURI, decodeURIComponent, encodeURI y encodeURIComponent
Las funciones decodeURI, decodeURIComponent, encodeURI y encodeURIComponent
Estas funciones implementadas para IE5.5 y NN6 permiten realizar la conversión de
Estas funciones implementadas para IE5.5 y NN6 permiten realizar la conversión de
strings a strings URI (Uniform Resource Identifier) válidos, y viceversa. Estos strings,
strings a strings URI (Uniform Resource Identifier) válidos, y viceversa. Estos strings,
que por ejemplo pueden ser direcciones web, llamadas a CGI, etc. deben sufrir una
que por ejemplo pueden ser direcciones web, llamadas a CGI, etc. deben sufrir una
conversión que permita pasar cada carácter de un sitio a otro por Internet. Así por
conversión que permita pasar cada carácter de un sitio a otro por Internet. Así por
ejemplo, el carácter espacio en blanco tendrá una conversión hexadecimal a %20.
ejemplo, el carácter espacio en blanco tendrá una conversión hexadecimal a %20.
Se utilizan encodeURI y decodeURI para URI completas ya que algunos símbolos,
Se utilizan encodeURI y decodeURI para URI completas ya que algunos símbolos,
como :// que forman parte del protocolo o el ? en los strings de búsqueda o los
como :// que forman parte del protocolo o el ? en los strings de búsqueda o los
delimitadores de directorios, no se codifican. Para URI simples que no contengan
delimitadores de directorios, no se codifican. Para URI simples que no contengan
delimitadores
delimitadores
se
usarán
las
funciones
encodeURIComponent
decodeURIComponent.
y
se
usarán
las
funciones
encodeURIComponent
decodeURIComponent. encodeURI
encodeURI
Descripción
Convierte una cadena de texto que representa una cadena URI válida.
Descripción
Convierte una cadena de texto que representa una cadena URI válida.
Sintaxis
encodeURI( String )
Sintaxis
encodeURI( String )
Ejemplo
Ejemplo
El retorno sería el texto: http://www.eldominio.espepeillo%20de%20los%20palotes.htm
El retorno sería el texto: http://www.eldominio.espepeillo%20de%20los%20palotes.htm
y
PUOC FUOC
Módulo 2: JavaScript
60
PUOC FUOC
Módulo 2: JavaScript
decodeURI
decodeURI
Descripción
Descodifica una cadena URI codificada.
Descripción
Descodifica una cadena URI codificada.
Sintaxis
decodeURI( String )
Sintaxis
decodeURI( String )
Ejemplo
Ejemplo
El retorno sería: http://www.eldominio.es/pepeillo de los palotes.htm
El retorno sería: http://www.eldominio.es/pepeillo de los palotes.htm
encodeURIComponent
encodeURIComponent
Descripción
Convierte una cadena de texto que representa un componente de una cadena URI.
Descripción
Convierte una cadena de texto que representa un componente de una cadena URI.
Sintaxis
encodeURIComponent( String )
Sintaxis
encodeURIComponent( String )
Ejemplo
Ejemplo
El retorno sería el texto: pagina%3A2.htm
El retorno sería el texto: pagina%3A2.htm
con la función encodeURI habría devuelto: pagina:2.htm
con la función encodeURI habría devuelto: pagina:2.htm
ya que los : son un delimitador.
ya que los : son un delimitador.
decodeURIComponent
decodeURIComponent
Descripción
Convierte una cadena de texto que representa una cadena URI válida.
Descripción
Convierte una cadena de texto que representa una cadena URI válida.
Sintaxis
encodeURI( String )
Sintaxis
encodeURI( String )
Ejemplo
Descodifica un componente de una cadena URI codificada.
Ejemplo
Descodifica un componente de una cadena URI codificada.
decodeURIComponent( String )
decodeURIComponent( String )
El retorno sería: pagina:2.htm
El retorno sería: pagina:2.htm
60
PUOC FUOC
Módulo 2: JavaScript
61
PUOC FUOC
Módulo 2: JavaScript
61
Las funciones escape y unescape
Las funciones escape y unescape
En versiones anteriores de los navegadores, las funciones escape y unescape
En versiones anteriores de los navegadores, las funciones escape y unescape
cumplían la misma función que encodeURI y decodeURI, aunque estas no eran
cumplían la misma función que encodeURI y decodeURI, aunque estas no eran
capaces de codificar/descodificar todos los caracteres de la recomendación RFC2396.
capaces de codificar/descodificar todos los caracteres de la recomendación RFC2396.
escape
escape
Descripción
Convierte una cadena de texto que representa una cadena URI válida.
Descripción
Convierte una cadena de texto que representa una cadena URI válida.
Sintaxis
escape( String, [,1] )
Sintaxis
escape( String, [,1] )
el parámetro opcional 1, determina si se van a codificar los caracteres delimitadores
el parámetro opcional 1, determina si se van a codificar los caracteres delimitadores
unescape
unescape
Descripción
Convierte una cadena de texto que representa un componente de una cadena URI.
Descripción
Convierte una cadena de texto que representa un componente de una cadena URI.
Sintaxis
unescape( String )
Sintaxis
unescape( String )
Función toString
Función toString toString
Descripción
Convierte un objeto en una cadena de texto. El resultado depende del objeto al que se aplica. Los casos son los siguientes:
toString Descripción
Convierte un objeto en una cadena de texto. El resultado depende del objeto al que se aplica. Los casos son los siguientes:
String : retorna el mismo string
String : retorna el mismo string
Number: retorna el string equivalente
Number: retorna el string equivalente
Boolean: true o false
Boolean: true o false
Array: los elementos del array separados por comas
Array: los elementos del array separados por comas
Function: el texto que define la función
Function: el texto que define la función
Algunos de los objetos DOM que no tienen nada que retornar como string, si se les aplica la función toString retornan algo como: [object tipo del objeto]
Algunos de los objetos DOM que no tienen nada que retornar como string, si se les aplica la función toString retornan algo como: [object tipo del objeto]
Sintaxis
toString( [base] )
Sintaxis
toString( [base] )
Ejemplo
…
Ejemplo
…
var letras= new Array("a", "b", "c")
var letras= new Array("a", "b", "c")
document.write(letras.toString())
document.write(letras.toString())
…
…
El resultado en la página sería: a,b,c
El resultado en la página sería: a,b,c
Las funciones watch y unwatch
Las funciones watch y unwatch
Para versiones de Netscape a partir de la 4, las funciones watch y unwatch se pueden
Para versiones de Netscape a partir de la 4, las funciones watch y unwatch se pueden
aplicar a cualquier objeto, incluso los definidos por el programador. No
aplicar a cualquier objeto, incluso los definidos por el programador. No
implemetado en IE.
implemetado en IE.
PUOC FUOC
Módulo 2: JavaScript
62
PUOC FUOC
Módulo 2: JavaScript
wacth
62
wacth
Descripción
Aplicada a un objeto al que se asigna un valor a una de sus propiedades, invoca a una función definida por el programador que recibirá el nombre de la propiedad, su valor anterior y su nuevo valor.
Descripción
Aplicada a un objeto al que se asigna un valor a una de sus propiedades, invoca a una función definida por el programador que recibirá el nombre de la propiedad, su valor anterior y su nuevo valor.
Sintaxis
watch( propiedad, función )
Sintaxis
watch( propiedad, función )
unwatch
unwatch
Descripción
Desactiva la funcionalidad activada por la función match.
Descripción
Desactiva la funcionalidad activada por la función match.
Sintaxis
watch( propiedad )
Sintaxis
watch( propiedad )
Ejemplo watch y unwatch
Ejemplo watch y unwatch
function cambio(){
function cambio(){
document.mif.entrada.value = "papagayo"
document.mif.entrada.value = "papagayo"
ver(true)
ver(true)
document.mif.entrada.value = "loro"
document.mif.entrada.value = "loro"
ver(false)
ver(false)
}
}
function ver(activado){
function ver(activado){
var mi_obj = document.mif.entrada
var mi_obj = document.mif.entrada
if (activado)
if (activado)
mi_obj.watch('value', muestra)
mi_obj.watch('value', muestra)
else
else
mi_obj.unwatch('value')
mi_obj.unwatch('value')
}
}
function muestra( prop, valor1, valor2){
function muestra( prop, valor1, valor2){
alert("La propiedad " + prop + " era " + valor1 + " y ahora
alert("La propiedad " + prop + " era " + valor1 + " y ahora
es " + valor2)
es " + valor2)
return valor2
return valor2
}
}
name='boton'
value='cambio'
View more...
Comments
