Javascript

JavaScript JavaScript
 PUOC
FUOC Módulo 2: JavaScript 3  FUOC
PUOC Módulo 2: JavaScript 3
Índice Índice
Etapa 1: Introducción ........................................................................................... 5 Etapa 1: Introducción ........................................................................................... 5

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 Etapa 2: Fundamentos de JavaScript ................................................................. 10

¿Qué es 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 Etapa 3: El lenguaje JavaScript ........................................................................... 22

Introducción .......................................................................................................... 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
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 Etapa 4: Funciones y objetos ............................................................................... 46

Definición de una función ................................................................................... 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
Etapa 1: Introducción 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 Poco después Netscape y Sun anunciaron con- De la necesidad de añadir más dinamismo Poco después Netscape y Sun anunciaron con-
y funcionalidad a las páginas HTML, juntamente la aparición del lenguaje de script y funcionalidad a las páginas HTML, juntamente la aparición del lenguaje de script
surgió el lenguaje Java, derivado de los al que llamaron JavaScript (la adopción de este surgió el lenguaje Java, derivado de los al que llamaron JavaScript (la adopción de este
lenguajes C y C++. Java se concibe como nombre vino motivada por cuestiones de mar- lenguajes C y C++. Java se concibe como nombre vino motivada por cuestiones de mar-
un lenguaje que funcionará sobre la keting, debido al futuro mundo Java-HTML un lenguaje que funcionará sobre la keting, debido al futuro mundo Java-HTML
definición de una máquina virtual, pudi- que se estaba esperando). definición de una máquina virtual, pudi- que se estaba esperando).
endo ejecutarse así, en cualquier platafor- endo ejecutarse así, en cualquier platafor-
ma. Al ser Java un lenguaje de propósito Hoy en día, aún hay quien creé que JavaScript ma. Al ser Java un lenguaje de propósito Hoy en día, aún hay quien creé que JavaScript
es sinónimo de Java. es sinónimo de Java.
general, no cumplía con las expectativas general, no cumplía con las expectativas
de quien esperaba adoptar rápidamente un de quien esperaba adoptar rápidamente un
lenguaje más simple para realizar sus pro- Aunque la sintaxis básica de JavaScript tiene lenguaje más simple para realizar sus pro- Aunque la sintaxis básica de JavaScript tiene
reminiscencias del estilo C y C++ de Java, los reminiscencias del estilo C y C++ de Java, los
pias aplicaciones en Internet. pias aplicaciones en Internet.
propósitos de JavaScript son distintos a los de propósitos de JavaScript son distintos a los de
Java: Java:
En 1995 Netscape presentó el primer len- En 1995 Netscape presentó el primer len-
guaje de script para su inclusión en pági- guaje de script para su inclusión en pági-
– JavaScript es un lenguaje de progra- – JavaScript es un lenguaje de progra-
nas web, que en un principio se dio a nas web, que en un principio se dio a
mación para ser integrado dentro de los mación para ser integrado dentro de los
conocer con el nombre LiveScript y se de- conocer con el nombre LiveScript y se de-
documentos HTML, mientras que Java documentos HTML, mientras que Java
sarrolló en paralelo con el software de sarrolló en paralelo con el software de
en el navegador nos permitirá por ejem- en el navegador nos permitirá por ejem-
servidor web de Netscape. Este lenguaje plo, crear applets (programas independ- servidor web de Netscape. Este lenguaje plo, crear applets (programas independ-
tenía dos propósitos fundamentales: ientes) que podremos incluir en tenía dos propósitos fundamentales: ientes) que podremos incluir en
nuestras páginas y que ocuparán un nuestras páginas y que ocuparán un
– Que fuera un lenguaje que los adminis- área rectangular fija en nuestro docu- – Que fuera un lenguaje que los adminis- área rectangular fija en nuestro docu-
tradores del servidor web pudieran usar mento HTML. tradores del servidor web pudieran usar mento HTML.
para gestionar el servidor y conectar sus para gestionar el servidor y conectar sus
páginas con otros servicios, como bases – JavaScript tiene un vocabulario menos páginas con otros servicios, como bases – JavaScript tiene un vocabulario menos
de datos y búsqueda de información. extenso y un modelo de programación de datos y búsqueda de información. extenso y un modelo de programación
más sencillo. más sencillo.
– Que en el cliente - en los documentos – Que en el cliente - en los documentos
HTML - estos scripts pudieran ser usados – Tener soporte para Java en el navegador o HTML - estos scripts pudieran ser usados – Tener soporte para Java en el navegador o
para aumentar sus capacidades. Por ejem- en el sistema operativo, no implica que au- para aumentar sus capacidades. Por ejem- en el sistema operativo, no implica que au-
plo, se podría usar LiveScript para compro- tomáticamente se tenga soporte para JavaS- plo, se podría usar LiveScript para compro- tomáticamente se tenga soporte para JavaS-
bar si la información introducida por un cript. Cada lenguaje necesita su propio bar si la información introducida por un cript. Cada lenguaje necesita su propio
usuario en un formulario era correcta. intérprete para ejecutar las líneas de código. usuario en un formulario era correcta. intérprete para ejecutar las líneas de código.
 PUOC
Es importante no confundir el lenguaje JavaScript con el lenguaje Java. Es importante no confundir el lenguaje JavaScript con el lenguaje Java.
JavaScript Java JavaScript Java
Es un lenguaje de programación para ser Se generan ficheros independientes (por ejemplo Es un lenguaje de programación para ser Se generan ficheros independientes (por ejemplo
integrado dentro de los documentos HTML. applets que pueden incluirse en las páginas integrado dentro de los documentos HTML. applets que pueden incluirse en las páginas
HTML ocupando una área rectangular fija el HTML ocupando una área rectangular fija el
documento). documento).
Es interpretado por el cliente web (navegador). Compilado en el servidor e interpretado por el Es interpretado por el cliente web (navegador). Compilado en el servidor e interpretado por el
No se compila. cliente web (applets). No se compila. 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 No es necesario declarar las variables ni su tipo. Es imprescindible declarar las variables y los tipos
de éstas. de éstas.
Lenguaje sencillo y modelo de objetos reducido y Modelo de objetos más amplio con vocación de Lenguaje sencillo y modelo de objetos reducido y Modelo de objetos más amplio con vocación de
orientado a documentos HTML. lenguaje de propósito general (no sólo applets). orientado a documentos HTML. 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
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
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:
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Ejemplo error</TITLE> <TITLE>Ejemplo error</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<SCRIPT LANGUAGE="JavaScript"> <SCRIPT LANGUAGE="JavaScript">
 //-->
</SCRIPT> </SCRIPT>
</BODY> </BODY>
</HTML> </HTML>
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
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
Etapa 2: Fundamentos de JavaScript 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
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 Introducción de código JavaScript

en páginas HTML 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 <script> y </script> Ambas formas requieren las etiquetas HTML <script> y </script>
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:

 //-->
</SCRIPT> </SCRIPT>
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
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 de las etiquetas , 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 <script> y </script> estarán situadas contenido de la página. Por tanto las etiquetas <script> y </script> estarán situadas
en algún lugar entre las etiquetas <body> y </body> del documento. Los scripts se en algún lugar entre las etiquetas <body> y </body> 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.
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Mi documento</TITLE> <TITLE>Mi documento</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<SCRIPT LANGUAGE=”JavaScript"> <SCRIPT LANGUAGE=”JavaScript">
 //-->
</SCRIPT> </SCRIPT>
</BODY> </BODY>
</HTML> </HTML>
 PUOC
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
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Ejemplo 1</TITLE> <TITLE>Ejemplo 1</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
 //-->
</SCRIPT> </SCRIPT>
</BODY> </BODY>
</HTML> </HTML>
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.
<HTML> <HTML>
<HEAD> <HEAD>
 //-->
</SCRIPT> </SCRIPT>
</HEAD> </HEAD>
<BODY> <BODY>
</BODY> </BODY>
</HTML> </HTML>
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
<HTML> <HTML>
<HEAD> <HEAD>
<SCRIPT language="JavaScript"> <SCRIPT language="JavaScript">
 //-->
</SCRIPT> </SCRIPT>
</HEAD> </HEAD>
<BODY onLoad="saludo()"> <BODY onLoad="saludo()">
</BODY> </BODY>
</HTML> </HTML>
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 <script> y </script> como sean En una página HTML se pueden usar tantas etiquetas <script> y </script> 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.
<HTML> <HTML>
<HEAD> <HEAD>
 //-->
</SCRIPT> </SCRIPT>
</HEAD> </HEAD>
<BODY> <BODY>
 //-->
</SCRIPT> </SCRIPT>
</BODY> </BODY>
</HTML> </HTML>
 PUOC
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 <script> y </script> ni ningún otro código Estas librerías no incluyen las etiquetas <script> y </script> 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 <script> Para indicar al navegador que debe incluir un fichero .js, entre las etiquetas <script>
y </script> de la página HTML, se debe incluir el nombre y la ubicación del fichero y </script> 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.
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Ejemplo .js</TITLE> <TITLE>Ejemplo .js</TITLE>
<SCRIPT language="javascript" src="libreria.js"></SCRIPT> <SCRIPT language="javascript" src="libreria.js"></SCRIPT>
</HEAD> </HEAD>
<BODY> <BODY>
</BODY> </BODY>
</HTML> </HTML>
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.
<SCRIPT language="JavaScript" src=”http://www.gem.com/libreria.js”> <SCRIPT language="JavaScript" src=”http://www.gem.com/libreria.js”>

</SCRIPT> </SCRIPT>
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
Cada línea de código escrita entre las etiquetas <script> y </script> es una sentencia. Cada línea de código escrita entre las etiquetas <script> y </script> 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 Escritura de texto

en las páginas HTML 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
• Visualizar el documento en el navegador. Si el documento ya se ha visualizado • Visualizar el documento en el navegador. Si el documento ya se ha visualizado
previamente, será suficiente con actualizar la página. 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
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.
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
Los caracteres especiales son los que se detallan en la siguiente tabla: Los caracteres especiales son los que se detallan en la siguiente tabla:
Caracteres especiales Caracteres especiales
Carácter 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:

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.
<HTML> <HTML>
<HEAD> <HEAD>
</HEAD> </HEAD>
<BODY> <BODY>
 //-->
</SCRIPT> </SCRIPT>
</BODY> </BODY>
</HTML> </HTML>
 PUOC
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:

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
<BR>: <BR>:
<HTML> <HTML>
<HEAD> <HEAD>
</HEAD> </HEAD>
<BODY> <BODY>
 //-->
</SCRIPT> </SCRIPT>
</BODY> </BODY>
</HTML> </HTML>
 PUOC
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
Etapa 3: El lenguaje JavaScript 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
Palabras reservadas de javaScript 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 "Hola", 'Hola' Cadena Cualquier cadena de texto. Se "Hola", 'Hola'
expresa entre comillas dobles o expresa entre comillas dobles o
simples simples
Booleano Sólo dos posibles valores: true If (entrada == 10) paso = true Booleano Sólo dos posibles valores: true If (entrada == 10) paso = true
(verdadero) y false (falso) else paso = false (verdadero) y false (falso) else paso = false
NULL Palabra clave para indicar que no Nombre.value = null NULL Palabra clave para indicar que no Nombre.value = null
hay valor hay valor
Objeto Estructura compleja que contiene Objeto Estructura compleja que contiene
propiedades y métodos propiedades y métodos
Función Conjunto de sentencias que realizan Función Conjunto de sentencias que realizan
una tarea específica 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
• 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 comentario): de 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
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:
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Ejemplo</TITLE> <TITLE>Ejemplo</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<SCRIPT> <SCRIPT>
 //-->
</SCRIPT> </SCRIPT>
</BODY> </BODY>
</HTML> </HTML>
 PUOC
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 de la función pruebas var x =1 // x es accesible desde dentro y fuera de la función pruebas
y = x + 2 //y es accesible desde dentro y fuera de la función pruebas y = x + 2 //y es accesible desde dentro y fuera de la función pruebas
funcion pruebas(){ funcion pruebas(){
var z = y + 1// z sólo es accesible desde dentro de la función var z = y + 1// z sólo es accesible desde dentro de la función
pruebas pruebas
w = x + z + 4// w es accesible des de dentro y fuera de la función w = x + z + 4// w es accesible des de dentro y fuera de la función
pruebas pruebas
document.write( "El valor de w es " + w ) document.write( "El valor de w es " + w )
} }
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" mi_var = "1000"
la variable mi_var es de tipo cadena de texto, mientras que en: la variable mi_var es de tipo cadena de texto, mientras que en:
mi_var = 1000 mi_var = 1000
la variable mi_var es de tipo número. la variable mi_var es de tipo número.

 PUOC
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: después de las siguientes expresiones:
x = mi_var1 + mi_var2 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
• operadores especiales: el operador +, el operador :?, los signos de puntuación • operadores especiales: el operador +, el operador :?, los signos de puntuación
(coma, paréntesis y corchetes) y los operadores para el trabajo con objetos. (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
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 Operadores de asignación
Operador Descripción Ejemplo Equivale a... Operador Descripción Ejemplo Equivale a...
= Asigna x = y + z = Asigna x = y + z
+= Suma y asigna x += y x = x + y += Suma y asigna x += y x = x + y
-= Resta y asigna 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
<= Menor o igual 3 <= 3 Cierto <= Menor o igual 3 <= 3 Cierto
>= Mayor o igual 3 >= 3 Cierto >= Mayor o igual 3 >= 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
Operadores lógicos Operadores lógicos
Operador Descripción Ejemplo Resultado Operador Descripción Ejemplo Resultado

ejemplo ejemplo
&& y (AND) x = 1 Cierto && y (AND) x = 1 Cierto

(x > 0) && (x <= 5) (x > 0) && (x <= 5)
|| o (OR) x = 1 Falso || o (OR) x = 1 Falso

(x > 5) || (x == 0) (x > 5) || (x == 0)
! negación (NOT) x = 1 Cierto ! negación (NOT) x = 1 Cierto

!(x > 5 ) !(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 izquierda de un determinado número de bits. << Desplazamiento a la izquierda de un determinado número de bits.
Los espacios de la derecha que quedan "vacíos" se rellenan con 0. Los espacios de la derecha que quedan "vacíos" se rellenan con 0.
>> Desplazamiento a la derecha de un determinado número de bits y >> 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 añade por la izquierda los bits que se han desbordado por la
derecha derecha
>>> Desplazamiento a la derecha de un determinado número de bits. Los >>> Desplazamiento a la derecha de un determinado número de bits. Los
espacios de la izquierda que quedan "vacíos" se rellenan con 0. 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
<<= 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
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
x = 1 x = 1
y = x + 13 y = x + 13
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.
x = 5 <= 8 ? 1 : 4 x = 5 <= 8 ? 1 : 4
tiene como resultado x = 1 tiene como resultado x = 1
Signos de puntuación Signos de puntuación
• El signo de puntuación coma, se utiliza para delimitar series de elementos. • El signo de puntuación coma, se utiliza para delimitar series de elementos.
• Los signos ( ) se utilizan para llamar a una función. Entre los paréntesis se • Los signos ( ) se utilizan para llamar a una función. Entre los paréntesis se
especifican los parámetros. especifican los parámetros.
• Los signos [ ] se utilizan para referenciar los elementos que pertenecen a un array. • Los signos [ ] se utilizan para referenciar los elementos que pertenecen a un array.
Operadores para el trabajo con objetos Operadores para el trabajo con objetos
Permiten crear, eliminar y referenciar los objetos del lenguaje así como los objetos Permiten crear, eliminar y referenciar los objetos del lenguaje así como los objetos
definidos por el programador. definidos por el programador.
 PUOC
Operadores para el trabajo con objetos Operadores para el trabajo con objetos
Operador Descripción Ejemplo Operador Descripción Ejemplo
new Crea un objeto hoy = new Date() new Crea un objeto hoy = new Date()
delete Destruye un objeto delete hoy delete Destruye un objeto delete hoy
this Referencia el objeto actual this Referencia el objeto actual
in Ítem en el objeto in Ítem en el objeto
typeof Instancia del objeto typeof Instancia del objeto
void Retorno de ningún valor void Retorno de ningún valor
Precedencia de operadores Precedencia de operadores
En una expresión compleja en la que intervienen más de un operador es posible En una expresión compleja en la que intervienen más de un operador es posible
determinar el orden en que estos deben evaluarse mediante el uso de paréntesis. Por determinar el orden en que estos deben evaluarse mediante el uso de paréntesis. Por
ejemplo: ejemplo:
document.write( 5 - ( 2 * 2 ) ) document.write( 5 - ( 2 * 2 ) )
mostraría el valor 1 en el documento html, mientras que la expresión: mostraría el valor 1 en el documento html, mientras que la expresión:
document.write( ( 5 - 2 ) * 2 ) document.write( ( 5 - 2 ) * 2 )
mostraría como resultado el valor 6. mostraría como resultado el valor 6.
En caso de no usar paréntesis, la prioridad se establece según el siguiente orden: En caso de no usar paréntesis, la prioridad se establece según el siguiente orden:
Prioridad de operadores Prioridad de operadores

Llamada a una función y Miembro de … () [] Llamada a una función y Miembro de … () []
Negación, menos unario, incremento y decremento ! - ++ -- Negación, menos unario, incremento y decremento ! - ++ --
Producto, división y módulo * / % Producto, división y módulo * / %
Suma y resta + - Suma y resta + -
Desplazamiento de bits >> << >>> 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
Estructuras de control Estructuras de control

condicionales 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
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Ejemplo estructura if ...</TITLE> <TITLE>Ejemplo estructura if ...</TITLE>
 //-->
</SCRIPT> </SCRIPT>
</HEAD> </HEAD>
<BODY bgcolor="#FFFFFF" text="#000000"> <BODY bgcolor="#FFFFFF" text="#000000">
<P> <P>
En esta podrá encontrar toda la información referente a ... En esta podrá encontrar toda la información referente a ...
</P> </P>
</BODY> </BODY>
</HTML> </HTML>
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
if ( condición ){ if ( condición ){
grupo de sentencias 1 grupo de sentencias 1
} }
else{ else{
} }
 PUOC
Diagrama de flujo para la estructura de control if … else 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:
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Ejemplo estructura if ... else</TITLE> <TITLE>Ejemplo estructura if ... else</TITLE>
 //-->
</SCRIPT> </SCRIPT>
</HEAD> </HEAD>
</BODY> </BODY>
</HTML> </HTML>
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 condición ? expresión1 : expresión2
Si la condición se cumple se ejecuta expresión1 y en caso contrario expresión2. Si la condición se cumple se ejecuta expresión1 y en caso contrario expresión2.
 PUOC
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 en agosto") :
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 …
if ( condición1 ){ if ( condición1 ){
} }
else if ( condición2 ) { else if ( condición2 ) {
} }
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:
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Ejemplo estructura if ... else if ...</TITLE> <TITLE>Ejemplo estructura if ... else if ...</TITLE>
 //-->
</SCRIPT> </SCRIPT>
</HEAD> </HEAD>
<BODY> <BODY>
</BODY> </BODY>
</HTML> </HTML>
La estructura de control switch La estructura de control switch
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; break;
default: {grupo de sentencias si no se cumple ninguno de los casos anteriores} default: {grupo de sentencias si no se cumple ninguno de los casos anteriores}
} }
 PUOC
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:
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Ejemplo estructura switch</TITLE> <TITLE>Ejemplo estructura switch</TITLE>
 //-->
</SCRIPT> </SCRIPT>
</HEAD> </HEAD>
 PUOC

</BODY> </BODY>
</HTML> </HTML>
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.
for ([expresión inicialización];[condición];[expresión incremento o decremento]){ for ([expresión inicialización];[condición];[expresión incremento o decremento]){
grupo de acciones 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
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){ for (contador = valor inicial; contador <= valor final; contador += incremento){

} }
Con un contador descendente la expresión toma la siguiente forma: Con un contador descendente la expresión toma la siguiente forma:
for (contador = valor inicial; contador >= valor final; contador -= incremento){ for (contador = valor inicial; contador >= valor final; contador -= incremento){

} }
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:
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Ejemplo estructura for</TITLE> <TITLE>Ejemplo estructura for</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
 }//-->
</SCRIPT> </SCRIPT>
</BODY> </BODY>
</HTML> </HTML>
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){

} }
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
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Ejemplo estructura while</TITLE> <TITLE>Ejemplo estructura while</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
 //-->
</SCRIPT> </SCRIPT>
</BODY> </BODY>
</HTML> </HTML>
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{ do{
} while(condición) } while(condición)
 PUOC
Diagrama de flujo para la estructura de control do ... while 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.
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE> Ejemplo estructura do ... while </TITLE> <TITLE> Ejemplo estructura do ... while </TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
 //-->
</SCRIPT> </SCRIPT>
<h1>Fin</h1> <h1>Fin</h1>
</BODY> </BODY>
</HTML> </HTML>
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
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.
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Ejemplo break</TITLE> <TITLE>Ejemplo break</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
 //-->
</SCRIPT> </SCRIPT>
</BODY> </BODY>
</HTML> </HTML>
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.
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Ejemplo continue</TITLE> <TITLE>Ejemplo continue</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
 //-->
</SCRIPT> </SCRIPT>
</BODY> </BODY>
</HTML> </HTML>
 PUOC
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:
<html> <html>
<head> <head>
<title>Ejemplo with</title> <title>Ejemplo with</title>
</head> </head>
<body bgcolor="#FFFFFF"> <body bgcolor="#FFFFFF">
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
<P> <P>
<script> <script>
 //-->
</script> </script>
</body> </body>
</html> </html>
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
Etapa 4: Funciones 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
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
<script> y </script>, pero pueden definirse también en el cuerpo del documento <script> y </script>, pero pueden definirse también en el cuerpo del documento
o en un fichero externo. o en un fichero externo.
<HTML> <HTML>
<HEAD> <HEAD>
 //-->
</SCRIPT> </SCRIPT>
</HEAD> </HEAD>
<BODY> <BODY>
</BODY> </BODY>
</HTML> </HTML>
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
<script> y </script>. <script> y </script>.
<HTML> <HTML>
<HEAD> <HEAD>
 //-->
</SCRIPT> </SCRIPT>
</HEAD> </HEAD>
<BODY> <BODY>
</BODY> </BODY>
 PUOC
</HTML> </HTML>
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:
<HTML> <HTML>
<HEAD> <HEAD>
 //-->
</SCRIPT> </SCRIPT>
</HEAD> </HEAD>
<P>Pulse el botón: <P>Pulse el botón:
<FORM name="miform"> <FORM name="miform">
<INPUT type="button" name="boton" value="Recibir saludo" <INPUT type="button" name="boton" value="Recibir saludo"
onClick="javaScript:saludo()"> onClick="javaScript:saludo()">
</FORM> </FORM>
</P> </P>
</BODY> </BODY>
</HTML> </HTML>
Para que una función se ejecute debe ser llamada. 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
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:
<HTML> <HTML>
<HEAD> <HEAD>
 //-->
</SCRIPT> </SCRIPT>
</HEAD> </HEAD>
<INPUT type="button" name="boton1" value="Saludo 1" onClick="jav- <INPUT type="button" name="boton1" value="Saludo 1" onClick="jav-
aScript:saludo('Hola Juan')"> aScript:saludo('Hola Juan')">
<BR><BR> <BR><BR>
 PUOC
<INPUT type="button" name="boton2" value="Saludo 2" onClick="jav- <INPUT type="button" name="boton2" value="Saludo 2" onClick="jav-
aScript:saludo('Hola Maria')"> aScript:saludo('Hola Maria')">
</FORM> </FORM>
</P> </P>
</BODY> </BODY>
</HTML> </HTML>
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
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
function calcula(par1,par2,par3) function calcula(par1,par2,par3)

{ {
//bloque de código //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
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:
<HTML> <HTML>
<HEAD> <HEAD>
<!- <!-
function cuadrado(num){ function cuadrado(num){
resultado = num * num resultado = num * num
return resultado return resultado
} }
function calculo() { function calculo() {
resul = cuadrado(7) resul = cuadrado(7)
alert("el cuadrado del número 7 es: " + resul); alert("el cuadrado del número 7 es: " + resul);
} }
//--> //-->
</SCRIPT> </SCRIPT>
 PUOC
</HEAD> </HEAD>
<INPUT type="button" name="boton" value="Calcula" onClick="javaS- <INPUT type="button" name="boton" value="Calcula" onClick="javaS-
cript:calculo()"> cript:calculo()">
<BR><BR> <BR><BR>
</FORM> </FORM>
</P> </P>
</BODY> </BODY>
</HTML> </HTML>
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 re- para evitar que la recursión continúe indefini- El JavaScript admite también funciones re- para evitar que la recursión continúe indefini-
cursivas. Una función recursiva es la que damente es preciso incluir una condición de cursivas. Una función recursiva es la que damente es preciso incluir una condición de
se llama a sí misma. finalización. se llama a sí misma. finalización.
La recursividad es una herramienta muy po- Muchas funciones matemáticas se definen La recursividad es una herramienta muy po- Muchas funciones matemáticas se definen
tente en algunas aplicaciones, especialmente recursivamente. Un ejemplo de ello es el tente en algunas aplicaciones, especialmente recursivamente. Un ejemplo de ello es el
las de cálculo, y puede ser usada como una al- factorial de un número entero n. las de cálculo, y puede ser usada como una al- factorial de un número entero n.
ternativa a la repetición o estructura repetitiva. ternativa a la repetición o estructura repetitiva.
La función factorial se define como: La función factorial se define como:
La escritura de una función recursiva es simi- La escritura de una función recursiva es simi-
lar a su homónima no recursiva; sin embargo, lar a su homónima no recursiva; sin embargo,
 1 si n = 0  1 si n = 0
n!  n! 
 n *⋅ ( n – 1 ) *⋅ ( n – 2 ) *⋅ ... *⋅ 2 *⋅ 1 si n > 0  n *⋅ ( n – 1 ) *⋅ ( n – 2 ) *⋅ ... *⋅ 2 *⋅ 1 si n > 0
Si se observa la fórmula anterior cuando n>0, Por ejemplo, 5! Si se observa la fórmula anterior cuando n>0, Por ejemplo, 5!
es fácil definir n! en función de (n − 1)!. es fácil definir n! en función de (n − 1)!.
5! = 5 · 4 · 3 · 2 · 1 = 120 5! = 5 · 4 · 3 · 2 · 1 = 120
4! = 4 * 3 * 2 * 1 = 24 4! = 4 * 3 * 2 * 1 = 24
3! = 3 * 2*1 =6 3! = 3 * 2*1 =6
2! = 2 * 1 =2 2! = 2 * 1 =2
1! = 1 * 1 =1 1! = 1 * 1 =1
0! = 1 =1 0! = 1 =1
Las expresiones anteriores se pueden transformar en: Las expresiones anteriores se pueden transformar en:
5! = 5 * 4! 5! = 5 * 4!
4! = 4 * 3! 4! = 4 * 3!
3! = 3 * 2! 3! = 3 * 2!
2! = 2 * 1! 2! = 2 * 1!
1! = 1 * 0! 1! = 1 * 0!
En términos generales sería: En términos generales sería:
 1 si n = 0  1 si n = 0
n!  n! 
 n ⋅ ( n – 1 )! si n > 0  n ⋅ ( n – 1 )! si n > 0
 PUOC
La implementación en JavaScript de la función Factorial sería: La implementación en JavaScript de la función Factorial sería:
<HTML> <HTML>
<HEAD> <HEAD>
<!- <!-
function Factorial(num){ function Factorial(num){
if (num==0) return 1; if (num==0) return 1;
else return ( num * Factorial(num - 1) ) else return ( num * Factorial(num - 1) )
} }
//--> //-->
</SCRIPT> </SCRIPT>
</HEAD> </HEAD>
<BODY> <BODY>
document.write( Factorial(5) ) document.write( Factorial(5) )
</SCRIPT> </SCRIPT>
</BODY> </BODY>
</HTML> </HTML>
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
} }
} }
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 var nombreFuncion = new Function("parámetro 1", "parámetro
2",...,"bloque de sentencias"); 2",...,"bloque de sentencias");
 PUOC
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 Descripción Ejecuta la expresión o sentencia contenida en la cadena de texto
que recibe como parámetro. 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 + " ')") eval("alert(' " + mensaje + " ')")
Función parseInt Función parseInt
parseInt parseInt
Descripción Convierte una cadena de texto en un número entero según la 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. 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. 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
Función parseFloat Función parseFloat
parseFloat parseFloat
Descripción Convierte una cadena de texto en un número real. Descripción Convierte una cadena de texto en un número real.
Sintaxis parseFloat( cadena de texto) Sintaxis parseFloat( cadena de texto)
Ejemplo parseFloat("3.141516") Ejemplo parseFloat("3.141516")

A = pi * r * r 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 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 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 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. que se han introducido sólo números.
function valida(anio) function valida(anio)

{ {
if (isNaN(Number(anio))) alert("Dato incorrecto. Introduzca de nuevo el dato if (isNaN(Number(anio))) alert("Dato incorrecto. Introduzca de nuevo el dato
solicitado") 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)

 PUOC
Función Number Función Number
Number Number
Descripción Convierte a número una expresión. Descripción Convierte a número una expresión.
Sintaxis Number( expresión ) Sintaxis Number( expresión )
Ejemplo Number("2001") Ejemplo Number("2001")
Función String Función String
String String
Descripción Convierte en cadena de texto una expresión. Descripción Convierte en cadena de texto una expresión.
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:
<html> <html>
<head> <head>
<title>Ejemplo 9</title> <title>Ejemplo 9</title>
</head> </head>
<body bgcolor="#FFFFFF"> <body bgcolor="#FFFFFF">
<script language="JavaScript"> <script language="JavaScript">
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
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 alert( String(vnumero + 3.141516))// muestra 2004.141516
</script> </script>
</body> </body>
Las funciones decodeURI, decodeURIComponent, encodeURI y Las funciones decodeURI, decodeURIComponent, encodeURI y
encodeURIComponent 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 se usarán las funciones encodeURIComponent y delimitadores se usarán las funciones encodeURIComponent y
decodeURIComponent. 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 <html> Ejemplo <html>

<body onLoad="javascript:location.href=encodeURI('http:/ <body onLoad="javascript:location.href=encodeURI('http:/
/www.eldominio.es/pepeillo de los palotes.htm')"> /www.eldominio.es/pepeillo de los palotes.htm')">
</body> </body>
</html> </html>
El retorno sería el texto: El retorno sería el texto:
http://www.eldominio.espepeillo%20de%20los%20palotes.htm http://www.eldominio.espepeillo%20de%20los%20palotes.htm
 PUOC
decodeURI decodeURI
Descripción Descodifica una cadena URI codificada. Descripción Descodifica una cadena URI codificada.
Sintaxis decodeURI( String ) Sintaxis decodeURI( String )

<body onLoad="javascript:alert(decodeURI('http:// <body onLoad="javascript:alert(decodeURI('http://
www.eldominio.es/pepeillo%20de%20los%20palotes.htm'))"> www.eldominio.es/pepeillo%20de%20los%20palotes.htm'))">
</body> </body>
</html> </html>
El retorno sería: El retorno sería:
http://www.eldominio.es/pepeillo de los palotes.htm http://www.eldominio.es/pepeillo de los palotes.htm
encodeURIComponent encodeURIComponent
Descripción Convierte una cadena de texto que representa un componente de una Descripción Convierte una cadena de texto que representa un componente de una
cadena URI. cadena URI.
Sintaxis encodeURIComponent( String ) Sintaxis encodeURIComponent( String )

<body <body
onLoad="javascript:alert(encodeURIComponent('pagina:2.ht onLoad="javascript:alert(encodeURIComponent('pagina:2.ht
m'))"> m'))">
</body> </body>
</html> </html>
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
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 )
<html> <html>
<body <body
onLoad="javascript:alert(decodeURIComponent('pagina%3A2. onLoad="javascript:alert(decodeURIComponent('pagina%3A2.
htm'))"> htm'))">
</body> </body>
</html> </html>
El retorno sería: pagina:2.htm El retorno sería: pagina:2.htm
 PUOC
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
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 toString
Descripción Convierte un objeto en una cadena de texto. El resultado depende del Descripción Convierte un objeto en una cadena de texto. El resultado depende del
objeto al que se aplica. Los casos son los siguientes: 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 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 string, si se les aplica la función toString retornan algo como: [object tipo
del objeto] 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
wacth wacth
Descripción Aplicada a un objeto al que se asigna un valor a una de sus propiedades, invoca a 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, una función definida por el programador que recibirá el nombre de la propiedad,
su valor anterior y su nuevo valor. 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 )
<html> <html>
<head> <head>
<title>Ejemplo watch y unwatch</title> <title>Ejemplo watch y unwatch</title>
<script language="JavaScript"> <script language="JavaScript">
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
} }
</script> </script>
</head> </head>
<body> <body>
<form name='mif'> <form name='mif'>
<input type='text' name='entrada' value='papagayo'> <input type='text' name='entrada' value='papagayo'>
<input type='button' name='boton' value='cambio' <input type='button' name='boton' value='cambio'
onClick='cambio()'> onClick='cambio()'>
</form> </form>
</body> </body>
</html> </html>

Javascript

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Javascript

Caricato da

Copyright:

Formati disponibili

JavaScript JavaScript

Etapa 1: Introducción ........................................................................................... 5 Etapa 1: Introducción ........................................................................................... 5

Etapa 2: Fundamentos de JavaScript ................................................................. 10 Etapa 2: Fundamentos de JavaScript ................................................................. 10

Etapa 3: El lenguaje JavaScript ........................................................................... 22 Etapa 3: El lenguaje JavaScript ........................................................................... 22

Estructuras de control condicionales ................................................................. 33 Estructuras de control condicionales ................................................................. 33

Etapa 4: Funciones y objetos ............................................................................... 46 Etapa 4: Funciones y objetos ............................................................................... 46

Etapa 1: Introducción Etapa 1: Introducción

JavaScript Java JavaScript Java

Basado en objetos. Orientado a objetos. Basado en objetos. Orientado a objetos.

JavaScript y los navegadores JavaScript y los navegadores

Estrategia de desarrollo Estrategia de desarrollo

Detectar errores durante el desarrollo Detectar errores durante el desarrollo

Internet Explorer Internet Explorer

Hay error en la página Hay error en la página

No se ha producido error No se ha producido error

Netscape Navigator Netscape Navigator

Etapa 2: Fundamentos de JavaScript Etapa 2: Fundamentos de JavaScript

¿Qué es JavaScript? ¿Qué es JavaScript?

Lenguaje de script Lenguaje de script

Introducción de código JavaScript Introducción de código JavaScript

– JavaScript incrustado en el código HTML. – JavaScript incrustado en el código HTML.

<SCRIPT LANGUAGE="JavaScript"> <SCRIPT LANGUAGE="JavaScript">

JavaScript incrustado en el código HTML JavaScript incrustado en el código HTML

JavaScript en el cuerpo del documento JavaScript en el cuerpo del documento

JavaScript en la cabecera del documento JavaScript en la cabecera del documento

<SCRIPT language="JavaScript" src=”http://www.gem.com/libreria.js”> <SCRIPT language="JavaScript" src=”http://www.gem.com/libreria.js”>

alert("En la librería estoy"); alert("En la librería estoy");

Sentencias JavaScript Sentencias JavaScript

– Definición o inicialización de una variable. – Definición o inicialización de una variable.

Escritura de texto Escritura de texto

• Grabar la última versión en el disco. • Grabar la última versión en el disco.

El método write El método write

document.write(cadena de texto) document.write(cadena de 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”

Nombre = “Maria” Nombre = “Maria”

nombre = “Maria” nombre = “Maria”

Caracteres especiales Caracteres especiales

Carácter Significado Carácter Significado

\n Nueva línea \n Nueva línea

\r Retorno de carro \r Retorno de carro

\b Retroceso de un espacio \b Retroceso de un espacio

nombre = “Maria” nombre = “Maria”

El método writeln El método writeln

document.writeln(cadena de texto) document.writeln(cadena de texto)

nombre = “Maria” nombre = “Maria”

Etiquetas HTML Etiquetas HTML

Etapa 3: El lenguaje JavaScript Etapa 3: El lenguaje JavaScript

• Estructuras de control • Estructuras de control

• Signos de puntuación • Signos de puntuación

Palabras reservadas Palabras reservadas

Palabras reservadas de javaScript Palabras reservadas de javaScript

boolean do goto package throws boolean do goto package throws

break double if private transient break double if private transient

catch export in return typeof catch export in return typeof

default for new this default for new this

Tipos de datos Tipos de datos

Tipo Comentario Ejemplos Tipo Comentario Ejemplos

// línea de comentario // línea de comentario

Declaración y asignación de variables Declaración y asignación de variables

var nombre_variable var nombre_variable

var resultado var resultado

= Multiplica y asigna x = y x = x * y = Multiplica y asigna x = y x = x * y