Iniciación a Javascript Aula Mentor

Iniciación a Javascript

AULA MENTOR

educacion.es

Nipo: 030-12-327-8 Autores: Jorge Mohedano José Miguel Saiz Pedro Salazar Román Equipo de contenidos de Aula Mentor Coordinación pedagógica: Aula Mentor Ilustración de portada: María Guija Medina

Tabla de Contenido

Tabla de contenido UNIDAD 1 -

INTRODUCCIÓN ........................................................................................................ 9

1.1 -

¿QUÉ ES JAVASCRIPT?.................................................................................................................. 9

1.2 -

EDITAR JAVASCRIPT ................................................................................................................... 10

1.3 -

MECANISMOS PARA INTEGRAR EL CÓDIGO JAVASCRIPT...................................................................... 11

1.3.1 -

Incluir JavaScript directamente en el documento HTML .............................................. 11

1.3.2 -

Incluir JavaScript en un fichero externo ....................................................................... 12

1.4 -

EDITORES HTML Y JAVASCRIPT .................................................................................................... 13

1.5 -

ENTORNOS DE EJECUCIÓN DE JAVASCRIPT....................................................................................... 14

1.6 -

PRIMERAS APLICACIONES JAVASCRIPT ............................................................................................ 15

1.7 -

COMENTARIOS QUE FACILITAN LA LECTURA ..................................................................................... 18

1.8 -

ELEMENTOS DE UN PROGRAMA JAVASCRIPT .................................................................................... 20

1.9 -

ENTRADA Y SALIDA EN JAVACRIPT ................................................................................................. 22

1.9.1 -

Instrucciones básicas de salida .................................................................................... 23

1.9.2 -

Instrucciones básicas de entrada ................................................................................. 23

UNIDAD 2 -

ELEMENTOS BÁSICOS.............................................................................................. 25

2.1 -

ELEMENTOS DEL LENGUAJE .......................................................................................................... 25

2.2 -

CONSTANTES ............................................................................................................................ 26

2.3 -

VARIABLES ............................................................................................................................... 26

2.3.1 -

Almacenamiento de información en la variable. ......................................................... 28

2.3.2 -

Consulta o utilización del valor contenido en la variable. ............................................ 28

2.4 -

TIPOS DE VARIABLES ................................................................................................................... 29

2.4.1 -

Numéricas .................................................................................................................... 30

2.4.2 -

Cadenas de caracteres ................................................................................................. 31

2.4.3 -

Tipo lógico .................................................................................................................... 32

2.4.4 -

Tipos estructurados: Arrays ......................................................................................... 32

2.4.5 -

Tipos estructurados: Objetos ....................................................................................... 33

2.4.6 -

Valores especiales ........................................................................................................ 34

2.5 -

OPERADORES ............................................................................................................................ 34

2.5.1 -

Operador de concatenación. ........................................................................................ 35

2.5.2 -

Operadores aritméticos. .............................................................................................. 35

2.5.3 -

Operadores de incremento y decremento.................................................................... 35

2.5.4 -

Operador de asignación ............................................................................................... 37

2.5.5 -

Operadores ariméticos con asignación ........................................................................ 37

3

4

Aula Mentor – Iniciación a Javascript 2.5.6 -

Operadores relacionales .............................................................................................. 38

2.5.7 -

Operadores lógicos ...................................................................................................... 39

2.6 -

PRECEDENCIA DE OPERADORES ..................................................................................................... 39

UNIDAD 3 -

ESTRUCTURAS DE CONTROL DE FLUJO .................................................................... 41

3.1 -

INTRODUCCIÓN ......................................................................................................................... 41

3.2 -

ESTRUCTURA ALTERNATIVA SIMPLE: IF ........................................................................................... 42

3.3 -

ESTRUCTURA ALTERNATIVA DOBLE: IF ELSE ...................................................................................... 44

3.4 -

ANIDAR ESTRUCTURAS ALTERNATIVAS ............................................................................................ 45

3.5 -

EL OPERADOR CONDICIONAL ?...................................................................................................... 46

3.6 -

ALTERNATIVA MÚLTIPLE .............................................................................................................. 46

3.7 -

ESTRUCTURAS REPETITIVAS .......................................................................................................... 49

3.8 -

ESTRUCTURA FOR ...................................................................................................................... 49

3.9 -

ESTRUCTURA FOR...IN................................................................................................................. 51

UNIDAD 4 4.1 -

UNIDAD 4 – FUNCIONES ......................................................................................... 55

CONCEPTO DE FUNCIÓN .............................................................................................................. 55

4.1.1 -

Creación de una Función. ............................................................................................. 56

4.1.2 -

Ubicación de la definición de una Función. .................................................................. 57

4.1.3 -

Llamada a una Función. ............................................................................................... 57

4.2 -

FUNCIONES CON ARGUMENTOS .................................................................................................... 58

4.3 -

CUESTIONES IMPORTANTES EN EL USO DE FUNCIONES. ...................................................................... 60

4.4 -

VARIABLES GLOBALES Y LOCALES ................................................................................................... 60

4.5 -

FUNCIONES PREDEFINIDAS ........................................................................................................... 61

UNIDAD 5 5.1 -

OBJETOS EN JAVASCRIPT ............................................................................................................. 65

5.1.1 5.2 -

OBJETOS ................................................................................................................. 65

Operador new .............................................................................................................. 65

ARRAYS ................................................................................................................................... 67

5.2.1 -

Creación de un Array. ................................................................................................... 67

5.2.2 -

Asignación de elementos en un Array. ......................................................................... 68

5.2.3 -

Introducción manual del contenido en un Array. ......................................................... 69

5.2.4 -

Búsqueda en un Array. ................................................................................................. 70

5.2.5 -

Propiedades de los arrays ............................................................................................ 72

5.2.6 -

Métodos de los Arrays ................................................................................................. 73

5.3 -

REFERENCIA COMPLETA DE OBJETOS .............................................................................................. 75

5.4 -

LOS OBJETOS DEL NAVEGADOR ..................................................................................................... 76

5.5 -

LOS OBJETOS PREDEFINIDOS. ........................................................................................................ 79

5.6 -

PROPIEDADES Y MÉTODOS DE LOS OBJETOS DEL NAVEGADOR. ............................................................. 80

Tabla de Contenido

5.6.1 -

El objeto Window. ........................................................................................................ 80

5.6.2 -

Propiedades del objeto window ................................................................................... 80

5.6.3 -

métodos para mover y redimensionar ventanas ...................................................... 85

5.6.4 -

otros métodos .............................................................................................................. 86

5.6.5 -

El objeto Location......................................................................................................... 91

5.6.6 -

Propiedades del objeto location................................................................................... 91

5.6.7 -

Métodos del objeto location ........................................................................................ 92

5.7 -

EL OBJETO HISTORY.................................................................................................................... 93

5.7.1 -

Propiedades del objeto history..................................................................................... 93

5.7.2 -

Métodos del objeto history .......................................................................................... 93

5.8 -

EL OBJETO NAVIGATOR. .............................................................................................................. 94

5.8.1 -

Propiedades del objeto navigator ................................................................................ 94

5.8.2 -

Métodos del objeto navigator...................................................................................... 95

5.9 -

PROPIEDADES Y MÉTODOS DE LOS OBJETOS DEL DOCUMENTO. ............................................................ 95

5.9.1 -

El objeto Document...................................................................................................... 96

5.9.2 -

Propiedades del objeto document: .............................................................................. 96

5.9.3 -

Métodos del objeto document: .................................................................................... 97

5.10 -

LOS OBJETOS LINK Y ANCHOR. ............................................................................................... 100

5.10.1 5.11 -

EL OBJETO IMAGE. ............................................................................................................... 101

5.11.1 5.12 -

Propiedades: .......................................................................................................... 100

Propiedades del objeto image: .............................................................................. 101

LOS OBJETOS DEL FORMULARIO. ............................................................................................. 105

5.12.1 -

Propiedades del objeto form ................................................................................. 106

5.12.2 -

Métodos del objeto form ....................................................................................... 107

5.13 -

LOS OBJETOS TEXT, TEXTAREA Y PASSWORD. ............................................................................. 109

5.13.1 -

Propiedades de los objetos text, textarea y password .......................................... 110

5.13.2 -

Métodos de los objetos text, textarea y password ................................................ 110

5.14 -

LOS OBJETOS BUTTON, RESET Y SUBMIT.................................................................................... 112

5.14.1 -

Propiedades de los objetos button reset y submit ................................................. 112

5.14.2 -

Métodos de los objetos button .............................................................................. 113

5.15 -

EL OBJETO CHECKBOX. .......................................................................................................... 113

5.15.1 -

Propiedades del objeto checkbox: ......................................................................... 113

5.15.2 -

Métodos de los objetos checkbox: ......................................................................... 113

5.16 -

EL OBJETO RADIO ................................................................................................................ 114

5.16.1 -

Propiedades del objeto radio: ................................................................................ 115

5.16.2 -

Métodos del objeto radio: ..................................................................................... 115

5

6

Aula Mentor – Iniciación a Javascript 5.17 -

EL OBJETO SELECT................................................................................................................ 116

5.17.1 5.18 -

Propiedades del objeto select: ............................................................................... 117

EL OBJETO HIDDEN............................................................................................................... 120

5.18.1 5.19 -

Propiedades del objeto hidden: ............................................................................. 120

PROPIEDADES Y MÉTODOS DE LOS OBJETOS DEL LENGUAJE. .......................................................... 120

5.19.1 -

El objeto String. ..................................................................................................... 121

5.19.2 -

Propiedades del objeto String:............................................................................... 121

5.19.3 -

Métodos del objeto String: .................................................................................... 121

5.19.4 -

El objeto Math. ...................................................................................................... 126

5.19.5 -

El objeto Date. ....................................................................................................... 129

5.19.6 -

Creación de un objeto de fecha: ............................................................................ 130

5.19.7 -

Métodos del objeto Date: ...................................................................................... 130

5.20 -

OBJETOS PERSONALIZADOS. .................................................................................................. 133

UNIDAD 6 -

EVENTOS. ............................................................................................................. 135

6.1 -

DEFINICIÓN. ........................................................................................................................... 135

6.2 -

EVENTOS DE TECLADO............................................................................................................... 139

6.3 -

EVENTOS DE RATÓN ................................................................................................................. 139

UNIDAD 7 -

DHTML Y EFECTOS MULTIMEDIA .......................................................................... 147

7.1 -

INTRODUCCIÓN. ...................................................................................................................... 147

7.2 -

DEFINICIÓN DE ESTILOS. ............................................................................................................ 148

7.3 -

TRABAJAR CON HTML.............................................................................................................. 152

7.3.1 -

Mover texto e imágenes. ........................................................................................... 152

7.3.2 -

Cambiar el color de texto al pasar el puntero del ratón ............................................ 159

7.3.3 -

Ocultar y mostrar texto e imágenes. ......................................................................... 161

Tabla de Ejemplos

Tabla de Ejemplos Ejemplo 1 – Código Javascript embebido en HTML __________________________________________ 11 Ejemplo 2 – Código Javascript en fichero externo ___________________________________________ 13 Ejemplo 3 – El primer programa _________________________________________________________ 16 Ejemplo 4 – Programa “Hola Mundo!” ____________________________________________________ 16 Ejemplo 5 – Uso de comentarios _________________________________________________________ 20 Ejemplo 6 – Conversor pesetas a euros ____________________________________________________ 21 Ejemplo 7 – Manejo de variables ________________________________________________________ 29 Ejemplo 8 – Representación en base 8 y 16 ________________________________________________ 30 Ejemplo 9 – Operadores aritméticos ______________________________________________________ 35 Ejemplo 10 – Diferencias notación prefija y postfija__________________________________________ 36 Ejemplo 11 – Operadores aritméticos con asignación ________________________________________ 37 Ejemplo 12 – Operador relacional igualdad ________________________________________________ 38 Ejemplo 13 – Alternativa simple _________________________________________________________ 43 Ejemplo 14 – Alternativa doble __________________________________________________________ 44 Ejemplo 15 –Anidamiento de Alternativas _________________________________________________ 45 Ejemplo 16 – Anidamiento de estructuras alternativas _______________________________________ 48 Ejemplo 17 – Bucle con operador in ______________________________________________________ 52 Ejemplo 18 – Declaración de una función __________________________________________________ 57 Ejemplo 19 – Llamada a una función _____________________________________________________ 58 Ejemplo 20 – Funciones con argumentos (versión 1) _________________________________________ 58 Ejemplo 21 – Funciones con argumentos (versión 2) _________________________________________ 59 Ejemplo 22 – Variables locales y globales __________________________________________________ 61 Ejemplo 23 – Manipulando arrays _______________________________________________________ 69 Ejemplo 24 – Introducción manual de datos en un array ______________________________________ 70 Ejemplo 25 – Búsqueda en un array ______________________________________________________ 72 Ejemplo 26 – Identificación de objetos ____________________________________________________ 78 Ejemplo 27 – Objetos predefinidos _______________________________________________________ 79 Ejemplo 28 –Manipulación de objeto ventana ______________________________________________ 83 Ejemplo 29 – Scroller en la barra de desplazamiento _________________________________________ 88 Ejemplo 30 – Ventanas hijas ____________________________________________________________ 90 Ejemplo 31 – Ventana hija del ejemplo anterior _____________________________________________ 90 Ejemplo 32 – Objeto Location ___________________________________________________________ 92

7

8

Aula Mentor – Iniciación a Javascript Ejemplo 33 – Objeto Document _________________________________________________________ 100 Ejemplo 34 – Manipulando imágenes ____________________________________________________ 102 Ejemplo 35 – Manipulando imágenes con eventos _________________________________________ 103 Ejemplo 36 – Objetos formulario: Comprobar password _____________________________________ 111 Ejemplo 37 – Objeto String ____________________________________________________________ 124 Ejemplo 38 – Objeto String: Métodos ____________________________________________________ 126 Ejemplo 39 – Objeto Date _____________________________________________________________ 132 Ejemplo 40 – Eventos de formulario _____________________________________________________ 140 Ejemplo 41 – Otros eventos ____________________________________________________________ 141 Ejemplo 42 – Eventos de ratón _________________________________________________________ 143 Ejemplo 43 – Eventos de imágenes ______________________________________________________ 145 Ejemplo 44 – Estilos (I) ________________________________________________________________ 149 Ejemplo 45 – Estilos (II) _______________________________________________________________ 150 Ejemplo 46 – Estilos (III) _______________________________________________________________ 151 Ejemplo 47 – Mover texto _____________________________________________________________ 153 Ejemplo 48 – Mover texto sin botones ___________________________________________________ 156 Ejemplo 49 – Mover objetos con un enlace________________________________________________ 158 Ejemplo 50 – Cambiar color al texto _____________________________________________________ 160 Ejemplo 51 – Manipulación de capas ____________________________________________________ 165

Introducción

UNIDAD 1 - INTRODUCCIÓN 1.1 - ¿QUÉ ES JAVASCRIPT? Javascript es un lenguaje de programación que se utiliza principalmente para crear páginas Web capaces de interactuar con el usuario. Las páginas Web se consideran estáticas cuando se limitan a mostrar un contenido establecido por su creador sin proporcionar más opciones al usuario que elegir entre los enlaces disponibles para seguir navegando. Cuando un creador incorpora JavaScript a su página, proporciona al usuario cierta capacidad de interactuación con la página Web, es decir, cierto dinamismo y por lo tanto se incrementan las prestaciones de la misma al añadir procesos en respuesta a las acciones del usuario. Es importante señalar que estos procesos se ejecutan en la máquina del cliente (en el navegador) y por tanto no implican intercambio de datos con el servidor. Con Javascript se accede al mundo de las páginas Web dinámicas.

Para profundizar en el concepto de página dinámica se recomienda la lectura del artículo siguiente: http://www.desarrolloweb.com/manuales/7/

Desde el punto de vista técnico Javascript es un lenguaje interpretado, eso significa que las instrucciones son analizadas en secuencia por el intérprete de Javascript del navegador Web, de manera que su ejecución es inmediata a la interpretación. Esto permite que, una vez escrito un programa en Javascript con un editor de texto plano y embebido el código en un fichero HTML, el navegador es capaz de interpretarlo y ejecutarlo sin necesidad de procesos intermedios. Es importante destacar que Javascript y Java son dos lenguajes distintos ya que la semejanza de los nombres a veces puede llevar a confusión.

9

10

Aula Mentor – Iniciación a Javascript

Javascript

Java

Es un lenguaje sencillo.

Es un lenguaje más complejo y completo con una estricta orientación a objetos.

Diseñado para desarrollar aplicaciones Web.

Diseñado para desarrollar aplicaciones de propósito general incluyendo tanto aplicaciones de escritorio como Web.

Lenguaje interpretado por el navegador. No requiere compilador.

Lenguaje compilado a código intermedio que luego es interpretado.

Más flexible. Por ejemplo, no requiere declarar variables ni tipos (aunque es aconsejable hacerlo).

Tiene reglas mucho más rígidas. Por ejemplo, hay que declarar todas las variables con sus tipos.

Tabla 1 - Javascript vs Java

Para conocer más datos sobre la historia y la evolución de Javascript puede consultar http://www.librosweb.es/javascript/capitulo1/breve_historia.html

1.2 - EDITAR JAVASCRIPT La edición de código escrito en lenguaje JavaScript no requiere de ninguna herramienta especial, siendo suficiente un editor de texto plano (sin formato). El código JavaScript debe integrarse en una página Web que será la que establezca el contexto de ejecución del código. Dicha página puede ser abierta con un navegador Web y como consecuencia de ello se ejecutará el programa JavaScript en base al propio flujo de control de la página Web. Esto significa que si el código JavaScript se asocia a la pulsación de un botón, dicho código se interpretará y ejecutará cuando el usuario pulse el botón. Esto implica que, como la interpretación y la ejecución son simultáneas, los errores en el código (salvo aquellos que imposibiliten la interpretación del código HTML) serán detectados en el momento de la ejecución. Esto complica en parte la depuración de los programas.

Introducción

Editar código Javascript

Integrar código Javascript con código HTML

11

Abrir con un navegador

Ilustración 1 – Proceso de edición y ejecución de un programa Javascript Para editar código Javascript y/o HTML existen multitud de editores. En el ámbito de los sistemas Windows uno de los más versátiles, potentes y gratuitos es NotePad++ http://notepad-plus-plus.org/

1.3 - MECANISMOS PARA INTEGRAR EL CÓDIGO JAVASCRIPT 1.3.1 - INCLUIR JAVASCRIPT DIRECTAMENTE EN EL DOCUMENTO HTML Dado que HTML es un lenguaje de marcas, existe una etiqueta (apertura y cierre) especial para señalar que lo que aparece a continuación debe ser analizado y ejecutado por el intérprete de JavaScript en lugar de por el intérprete de HTML: código JavaScript . El siguiente código muestra un sencillo ejemplo. Si

desea probarlo no tiene más que cortar y pegar el texto en un documento en blanco, guardarlo con el nombre ejemplo.html ¡no se olvide de la extensión! Y abrirlo con un navegador Web (le recomendamos usar Mozilla Firefox). Ejemplo de código JavaScript en el propio documento alert("Un mensaje de prueba"); Un párrafo de texto.

Ejemplo 1 – Código Javascript embebido en HTML

12

Aula Mentor – Iniciación a Javascript La secuencia de resultados se puede ver en las capturas de imagen siguientes. En la izquierda aparece la ventana modal con el texto “Un mensaje de prueba” que es el resultado de interpretar la función Javascript alert. Observe que esta función se ejecuta incluso antes de que el navegador muestre el “body” de la página HTML. Cuando el usuario pulsa el botón Aceptar, el navegador termina de mostrar el resto de la página.

Ilustración 2 – Ejecución de código JavaScript y HTML

Se recomienda este sencillo método cuando la simplicidad del código no impide la legibilidad del mismo. Es importante señalar que el lugar del fichero html en el que se ponen las etiquetas de script, determina en qué momento de la interpretación de la página Web se ejecuta dicho código Javascript. En el ejemplo anterior se ha observado que el código Javascript se ha ejecutado antes que el navegador haya mostrado el cuerpo de la página Web (el mensaje “Un párrafo de texto”). Además hay una variante de este método que permite incluir código Javascript entremezclado con código HTML. No es un método recomendado porque se pierde mucha legibilidad y su uso se limita a establecer la respuesta Javascript a determinados eventos, como por ejemplo hacer clic sobre un elemento de la página Web. En estos casos, lo habitual es definir funciones Javascript de usuario en un fichero con el segundo método que se describe a continuación y enlazar los eventos con las funciones. El detalle de este mecanismo se estudiará más adelante. 1.3.2 - INCLUIR JAVASCRIPT EN UN FICHERO EXTERNO Cuando se desea separar el código Javascript del código HTML, con objeto de aumentar la legibilidad y facilitar la reutilización del mismo en otras páginas HTML, se

Introducción

utiliza un método que permite definir las instrucciones Javascript en un fichero externo al propio fichero HTML. En este caso se debe señalar en el código HTML la ubicación relativa del fichero Javascript respecto al fichero HTML para que el navegador pueda descargar ambos ficheros desde el servidor Web y este localice el código adecuadamente. Veamos un sencillo ejemplo: Archivo JavaScript: micodigo.js alert("Esto es una alerta escrita en JavaScript"); Documento HTML: ejemplo.html Código JavaScript almacenado en fichero externo Esto es un párrafo en HTML

Ejemplo 2 – Código Javascript en fichero externo

En ambos casos volvemos a tener ficheros de texto plano con dos extensiones diferentes. La primera js para indicar que se trata de código Javascript y la segunda html para indicar que se trata de código HTML. Observe que el atributo src de la etiqueta está indicando la ruta relativa y el nombre en la que se encuentra el fichero .js (en este caso ocupan la misma carpeta). Para ejecutar este ejemplo tiene que crear dos ficheros de texto plano independientes y abrir con un navegador el que tiene extensión html. 1.4 - EDITORES HTML Y JAVASCRIPT Tal y como se ha señalado, el código HTML y el código Javascript son texto plano (sin formato). Por ello se puede utilizar para su edición desde un sencillo editor de texto como el bloc de notas en los entornos Windows o el editor de texto en los entornos Linux hasta un complejo software de diseño de páginas Web tipo Dreamweaver o similar (activando la vista de código fuente). En el punto intermedio

13

14

Aula Mentor – Iniciación a Javascript de ambas opciones están los editores de sintaxis resaltada que son editores de texto plano pero que incorporan un reconocedor de sintaxis basado en la gramática de los lenguajes que soporta. 1.5 - ENTORNOS DE EJECUCIÓN DE JAVASCRIPT En general el entorno de ejecución de Javascript es un navegador Web. Esta circunstancia hace que en principio y dado que hay navegadores para las plataformas hardware

más

importantes,

Javascript

podría

considerarse

un

lenguaje

multiplataforma. Lamentablemente esta consideración es teórica porque no sólo hay diferencias entre la interpretación que hacen diferentes navegadores sobre la misma plataforma hardware sino que incluso a veces la diferencia se produce entre el mismo navegador funcionando en plataformas diferentes o incluso entre versiones diferentes del mismo navegador en la misma o en diferentes plataformas. Esta es una de las principales dificultades a las que se enfrenta el desarrollador de aplicaciones Javascript. En la actualidad, los programadores que utilizan Javascript recurren, cuando la complejidad de la aplicación así lo justifica, al uso de frameworks que entre otras numerosas virtudes resuelven en gran medida el problema señalado, asegurando con mayor o menos éxito el denominado “Javascript Cross Browser” recurriendo a un sistema que parte de identificar el navegador que se está utilizando y en función del mismo utilizar el código desarrollado específicamente para el mismo.

Existen numerosos framework algunos de los cuales aparecen reseñados en: http://www.desarrolloweb.com/articulos/listado-distintos-framework-javascript.html Existe un interesante artículo comparando varios de ellos en: http://www.maestrosdelweb.com/editorial/comparacion-frameworks-javascript/

Mención especial merece el caso del GWT de Google que permite, entre otras cosas, desarrollar aplicaciones utilizando lenguaje Java y posteriormente compilarlo para generar Javascript con la característica Cross Browser. Pero Javascript no está ligado exclusivamente a los navegadores Web sino que existen otras aplicaciones informáticas que pueden ser programadas mediante este

Introducción

lenguaje o algunos derivados del mismo. Tal es el caso de Adobe Acrobat que permite incluir código Javascript en documentos PDF o el caso de Adobe PhotoShop que permite elaborar algunos scripts para automatizar tareas. Javascript también se puede integrar con el lenguaje Java mediante el paquete javax.script y ha sido fuente de inspiración en el desarrollo del lenguaje Actioscript (Flash y Flex). 1.6 - PRIMERAS APLICACIONES JAVASCRIPT Tal y como se ha señalado, los programas Javascript se encuentran vinculados a páginas HTML. El navegador reconoce un programa Javascript cuando se encuentra con una etiqueta . A partir de ese momento será el intérprete Javascript el encargado de interpretar y ejecutar el código hasta la etiqueta . Para crear un programa Javascript debemos seguir los siguientes pasos:

1.

Crearemos una página HTML utilizando cualquier editor, por ejemplo el NotePad ++ o el Bloc de Notas o un editor Linux de texto plano. (También podemos utilizar una página ya creada y continuar con el paso siguiente).

2.

Insertaremos dentro de la página HTML las etiquetas y en el lugar donde se situará el código Javascript.

3.

Introduciremos el código Javascript entre dichas etiquetas.

4.

Salvaremos el programa poniendo especial cuidado para que el editor mantenga la extensión .html

5.

Para ejecutar el programa solamente tendremos que abrir el archivo con el navegador.

15

16

Aula Mentor – Iniciación a Javascript

El primer programa Esto es HTML document.write("Esto es JavaScript."); Esto es HTML

Ejemplo 3 – El primer programa

La línea central se ha escrito desde un programa JavaScript mediante la instrucción: document.write("Esto es JavaScript."); De hecho, esta es la única instrucción que contiene el programa y su significado es escribir (write) en el documento actual (document) el texto que aparece entre comillas. En realidad document es un objeto que representa el documento HTML actual y write es un método (procedimiento) que se aplica sobre el objeto document y que permite escribir sobre dicho documento. El resultado aparentemente no se distingue de cara al usuario si en lugar de poner el código Javascript se hubiese puesto directamente en HTML el texto. La ventaja de usar Javascript no queda latente en este ejemplo. Veamos otro ejemplo en el que se utiliza una función Javascript que muestra una ventana modal en pantalla. ¡Hola Mundo! alert("Hola Mundo!"); Esta página contiene el segundo script

Ejemplo 4 – Programa “Hola Mundo!”

Sólo ejecutando este sencillo ejemplo en diferentes navegadores (Internet Explorer, Mozilla FireFox, Opera, Crome, etc.) podrá observar la diferencias que existen a la hora de interpretarlo. En este sencillo ejemplo se trata de diferencias “estéticas” pero a

Introducción

medida que avance en la programación de scripts padecerá la falta de consenso entre fabricantes de navegadores a pesar de que existen entidades de normalización. Resultado en Firefox

Resultado en Internet Explorer

Resultado en Google Chrome

Interpretar el código no debería ser muy complicado si se conoce HTML y dado que se ha optado por embeber el código Javascript, este se ejecutará incluso antes de que se muestre en pantalla el texto del body de la página Web porque si observa bien, el script Javascript aparece en el que es la parte que se ejecuta antes de mostrar el en el navegador.

17

18

Aula Mentor – Iniciación a Javascript Es importante comprobar que la configuración de seguridad del navegador no impide la ejecución de scripts ya que en algunos casos (por ejemplo, Internet Explorer) la configuración por defecto tiene bloqueada la ejecución de script para proteger el equipo de operaciones susceptibles de ser inseguras. Todos los navegadores avisan de forma diversa sobre esta circunstancia y permite autorizar puntualmente la ejecución de un script o bien establecer por defecto la autorización. 1.7 - COMENTARIOS QUE FACILITAN LA LECTURA Un programa de ordenador escrito en un lenguaje de programación debe ser interpretado por una maquina. Sin embargo es habitual que el propio programador o cualquier otro acceda al código para modificarlo, corregirlo o simplemente entender su función. Con objeto de que esta lectura sea lo más clarificadora posible es costumbre obligada incorporar comentarios a las instrucciones que constituyen el programa de ordenador, dirigidas a un potencial lector humano. Estos comentarios no tienen efecto sobre el código pero clarifican mucho su comprensión. Para incluir comentarios en el código Javascript y que estos no interfieran en la labor del intérprete de Javascript ni en el intérprete de HTML hay que ceñirse a una sintaxis específica. Los comentarios pueden ser: •

De una línea. Se indican mediante dos barras inclinadas a la derecha (//). Todo

lo que aparezca detrás de dichas barras hasta el final de la línea será considerado comentario y, por tanto, será ignorado por el navegador. Ejemplo: // Esto es un comentario document.write("Esto es JavaScript."); //otro comentario

•

De varias líneas. En este caso deberemos indicar el comienzo del comentario

mediante los caracteres barra inclinada a la derecha y asterisco (/*). También indicaremos el final del comentario, en este caso mediante la secuencia de

Introducción

caracteres inversa: asterisco y barra inclinada a la derecha (*/), tal como podemos observar en el siguiente fragmento de código: /* Este es un ejemplo de comentario de varias líneas */

No obstante y dado que aún hay sistemas informáticos que tienen instalado, por cuestiones de capacidad de proceso, navegadores antiguos es necesario proteger los comentarios para que esos navegadores no lancen un error al encontrar un comentario. Un comentario HTML tiene la siguiente sintaxis:

El comentario empieza con los caracteres: Para ocultar Javascript a los navegadores antiguos escribiremos los comentarios como se expone a continuación:

La última línea de comentario empieza con //, indicando que es un comentario Javascript, y termina con -->, que finaliza un comentario HTML. En algunos navegadores antiguos es necesario incluir un comentario Javascript antes de finalizar el comentario HTML. El siguiente ejemplo muestra el uso de comentarios HTML para ocultar guiones Javascript:

19

20

Aula Mentor – Iniciación a Javascript

Utilizando comentarios Esto es HTML Esto es HTML

Ejemplo 5 – Uso de comentarios

1.8 - ELEMENTOS DE UN PROGRAMA JAVASCRIPT Un programa es un conjunto ordenado de instrucciones diseñado para llevar a cabo una tarea concreta. Los programas están formados por instrucciones que determinan las tareas que se realizarán y el orden en que estas se llevarán a cabo. Tradicionalmente estas instrucciones se catalogan como: •

Instrucciones declarativas o declaraciones: declaran, es decir, informan al

intérprete sobre los objetos que van a intervenir en el programa. Por ejemplo, las variables, espacios de memoria identificados por un nombre y capaces de almacenar un valor, se suelen declarar antes de ser utilizadas. •

Instrucciones de entrada/salida: permiten que el programa reciba/ envíe

datos desde/hasta un dispositivo externo, por ejemplo, teclado y pantalla como principales interfaces de comunicación con el usuario.

Introducción

•

Instrucciones de control: determinan la secuencia de ejecución del programa,

es decir, qué instrucciones se ejecutan y en qué momento. El siguiente programa permite al usuario introducir una cantidad en pesetas, calcula el importe equivalente en euros y finalmente lo muestra en pantalla. Conversor pesetas a euros var ImportePtas; var ImporteEuros; ImportePtas=prompt("Introduce el importe en pesetas:",1); if (ImportePtas > 0) { ImporteEuros = ImportePtas / 166.33; alert(ImporteEuros); } else { alert("Importe erróneo"); }

Ejemplo 6 – Conversor pesetas a euros

Podemos observar que el programa realiza las siguientes tareas: -

La etiqueta indica el comienzo del script.

-

Las instrucciones: var ImportePtas; var ImporteEuros;

Declaran las variables ImportePtas e ImporteEuros para que puedan ser utilizadas posteriormente. Las variables son espacios de memoria del ordenador capaces de almacenar datos. -

La instrucción: ImportePtas = prompt("Introduce el importe en pesetas: ",1);

Visualizará el texto "Introduce el importe en pesetas: ", permitiendo al usuario introducir un importe. Dicho importe será asignado a la variable ImportePtas. El

21

22

Aula Mentor – Iniciación a Javascript número 1 representa el valor por defecto que tomará el cuadro de inserción de manera que el usuario puede modificar dicho o valor o simplemente dejarlo intacto. La ventana modal que aparece como consecuencia de la instrucción prompt muestra dos botones: Aceptar y Cancelar. Si el usuario pulsa Aceptar, la instrucción almacena en la variable ImportePtas el valor que tenga en ese momento el cuadro de texto. Si pulsa Cancelar el valor que se asignará a dicha variable será null. -

La instrucción if (ImportePtas > 0) es una instrucción de control. Comprueba el

resultado de la condición (ImportePtas > 0) y si es verdadero ejecutará las instrucciones que se encuentran encerradas entre las llaves que aparecen a continuación. En caso contrario ejecutará las instrucciones que siguen a la cláusula else.

-

La instrucción: ImporteEuros = ImportePtas/166.33; Asigna a la variable

ImporteEuros el resultado de dividir el valor de la variable ImportePtas entre 166.33. -

Las instrucciones: alert(ImporteEuros); y alert("Importe erróneo");

Visualizan el contenido de la variable ImporteEuros, o el texto "Importe erróneo", respectivamente, dependiendo de cuál haya sido el resultado de evaluar la condición (ImportePtas > 0). -

Los caracteres // sirven para escribir comentarios en el programa. Estos

comentarios no

se

ejecutan. Su

utilidad es

servir

como de

ayuda al

programador al documentar el programa. -

La etiqueta señala el final del script.

1.9 - ENTRADA Y SALIDA EN JAVACRIPT El esquema tradicional empleado en computación responde a un modelo básico y sencillo en el que unos datos de entrada son procesados en base a un algoritmo programado con un lenguaje de programación que los somete a diversos cálculos para generar unos datos de salida. En este modelo la entrada y la salida son fundamentales

Introducción

porque permiten al usuario proporcionar los datos de partida y conocer los resultados del mismo. A lo largo de estas primeras unidades utilizaremos con frecuencia instrucciones para visualizar o introducir datos. Por ello vamos a anticipar en este punto algunas características de formato y funcionamiento de estas instrucciones. 1.9.1 -INSTRUCCIONES BÁSICAS DE SALIDA •

La instrucción document.write("mensaje") permite escribir un texto en el

documento actual. Ya hemos visto un ejemplo de utilización en un epígrafe anterior. •

La instrucción alert se emplea para mostrar mensajes o visualizar datos. Esta

instrucción abre una ventana y muestra en ella el mensaje o texto especificado en la llamada. También incluye un botón de Aceptar que sirve para cerrar la ventana.

1.9.2 -INSTRUCCIONES BÁSICAS DE ENTRADA La instrucción prompt muestra una ventana de diálogo que incluye un texto o mensaje, un área de entrada de datos y dos botones: uno de Aceptar y otro de Cancelar. Su sintaxis es: prompt("mensaje", valorpordefecto);

Esta instrucción retorna un valor que normalmente se asignará a una variable según el formato: variable = prompt("mensaje", valorpordefecto);

Donde mensaje:

es un texto o mensaje que queremos que aparezca.

valor_por_defecto: es una cadena o un número que se asumirá por defecto en el caso de que no se introduzca ningún dato y se pulse Aceptar.

23

24

Aula Mentor – Iniciación a Javascript Descripción: muestra una ventana de dialogo y espera a recibir una entrada de datos por parte del usuario. La ventana se cierra pulsando uno de los dos botones: Aceptar: acepta la entrada del usuario (o la entrada por defecto si esta no ha sido modificada). Cancelar: cancela la entrada que pudiese haber introducido el usuario y asume como entrada el valor null. Si no se especifica ningún valor en valor_por_defecto se asumirá un valor indefinido (). Es conveniente especificar siempre un valor por defecto, aunque sea 0 ó "" (cadena vacía). En el ejemplo anterior, la instrucción: ImportePtas = prompt("Introduce el importe en pesetas:",1);

Dará como resultado la aparición de una ventana. El navegador esperará a que el usuario introduzca un valor o acepte el valor por defecto y lo asignará a la variable ImportePtas tal como se indica al principio de la instrucción.

Estructuras de Control de Flujo

UNIDAD 2 - ELEMENTOS BÁSICOS 2.1 - ELEMENTOS DEL LENGUAJE

Un programa está formado por los elementos siguientes: Constantes: Representan entidades que no se modifican durante la ejecución del programa. Pueden tener un identificador o carecer del mismo. Variables: Posiciones de memoria a las que se asigna un nombre y a las que se puede acceder para obtener el valor que almacenan. Operadores: Símbolos que representan una operación de naturaleza matemática, relacional o lógica. Expresiones Son combinaciones de variables, constantes y operadores. La evaluación de una expresión devuelve un valor. Instrucciones o sentencias: Permiten organizar el flujo de ejecución de un programa estableciendo el orden en el que se encadenan las acciones del mismo. Funciones: Agrupaciones de instrucciones diseñadas para resolver un problema concreto. El lenguaje presenta algunas normas o reglas que deben seguirse: •

Distingue mayúsculas de minúsculas, de forma que no es lo mismo definir una

variable con identificador suma que Suma.

25

26

Aula Mentor – Iniciación a Javascript •

Los comentarios son iguales que en C/C++: /* ... */ para encerrar un bloque y // para

comentarios de una línea. •

Cada sentencia ha de terminar en punto y coma (;). (Aunque no es estrictamente

obligatorio) • Se pueden agrupar sentencias utilizando llaves {sentencia1; sentencia2; ... }

2.2 - CONSTANTES Las constantes representan valores que no se modifican durante la ejecución del programa. Son constantes todos los valores que aparecen directamente en un programa, por ejemplo 3.1415 es una constante que representa el número PI. “Aula Mentor” es otra constante que representa una cadena de caracteres. En Javascript se pueden definir constantes que incorporen un identificador de manera que se asigna un valor a dicho identificador y en el programa se hace referencia a la constante no por su valor sino por el identificador que la representa. La ventaja es que si el programador decide modificar el programa y cambiar el valor de la constante, no tiene que buscar en todo el programa el lugar en el que aparece, limitándose solamente a hacerlo en el lugar en el que ha sido definida la misma. Las constantes con identificador se declaran con la claúsula const seguida del identificador, el símbolo = y el valor constante. const tipo_iva=18;

Si el programador intenta modificar el valor de una constante desde las instrucciones del programa se producirá un error. En realidad las constantes con identificador (o constantes con nombre) son posiciones de memoria cuyo valor se protege ante cambios. 2.3 - VARIABLES

Las variables son zonas de la memoria del ordenador identificadas por un nombre y capaces de almacenar un valor. La variables deben su nombre a la capacidad para almacenar valores que pueden cambiar durante la evolución del programa en contraposición a las constantes cuyo valor tal y como señala su nombre no puede cambiar.

Las variables proporcionan una gran flexibilidad a los programas ya que

Estructuras de Control de Flujo

27

permiten que estos puedan resolver problemas con cierta generalidad. Por ejemplo, se podría hacer un programa para resolver ecuaciones de segundo grado con constantes. Pero dicho programa sólo podría resolver siempre la misma ecuación. Sin embargo al dotar de variables al programa, este puede utilizarse para resolver cualquier ecuación de segundo grado. Las variables son elementos fundamentales en cualquier lenguaje de programación. Sirven para guardar y manipular información. Podemos representar una variable como un recipiente en el que se puede depositar información que puede ser consultada o cambiada en cualquier momento de la ejecución del programa. En realidad una variable consiste en un conjunto de posiciones de memoria reservadas que a las que damos un nombre llamado identificador de la variable que nos permitirá manipular la información. Las variables se crean normalmente al comienzo del programa utilizando la palabra var seguida del nombre de la variable que queremos crear, como en los siguientes ejemplos: var nombre; var edad;

Se pueden declarar dos o más variables en una instrucción. En estos casos se indicará la palabra

NOTA Como JavaScript diferencia mayúsculas y minúsculas en los identificadores es muy fácil confundirse. Por este motivo es necesario seguir dos normas: 1º-Declarar todos los identificadores al comienzo

del

programa

para

poder

comprobar rápidamente cualquier duda.

reservada var y, a continuación, la lista de las

2º- Establecer un criterio a la hora de

variables que queremos declarar (los nombres

construir identificadores y seguirlo siempre

separados por comas):

(Determinar cuándo se utilizan mayúsculas,

var nombre, edad;

minúsculas y sub-guiones, etc.). A la hora de establecer este criterio deberemos valorar

El nombre o identificador de la variable podrá

también la legibilidad del programa.

estar formado por letras (mayúsculas y minúsculas), caracteres de subrayado (_), el símbolo de dólar ($) , los números (del 0 al 9). Pero no podrá comenzar por un número y tampoco podrá coincidir el nombre con alguna de las palabras reservadas del lenguaje (nombres de

28

Aula Mentor – Iniciación a Javascript comandos, etcétera). Son por tanto identificadores válidos: vApellido1; $1Apellido; _Apellido y no válidos: 1Apellido; #1Apellido; Apellido1º; 2.3.1 -ALMACENAMIENTO DE INFORMACIÓN EN LA VARIABLE. Para guardar información en una variable se utilizará el operador de asignación (=) precedido por el nombre de la variable y seguido por el valor que queremos asignar. Ejemplos: Nombre = 'Miguel'; Edad = 17;

Atención: cuando guardamos información en una variable, cualquier otro valor que dicha variable tuviese anteriormente se perderá (salvo que lo guardemos en otra variable antes de hacer la asignación). JavaScript permite asignar un valor a una variable en el mismo momento de su declaración. Ejemplo: var Nombre = 'Miguel';

También permite asignar valor a una variable que no ha sido previamente declarada. NuevoNombre = 'Alfonso';

En el ejemplo anterior NuevoNombre no ha sido declarada previamente, sin embargo, al encontrar esta expresión JavaScript creará implícitamente la nueva variable y le asignará el valor indicado. Esta práctica es, de todo punto de vista, desaconsejable; de hecho, la mayoría de los lenguajes de programación la consideran ilegal. Debemos acostumbrarnos a declarar todas las variables que vayamos a utilizar al comienzo del programa.

2.3.2 -CONSULTA O UTILIZACIÓN DEL VALOR CONTENIDO EN LA VARIABLE. Una vez declarada una variable podemos hacer referencia a su contenido para visualizarlo, o para emplearlo con otras expresiones.

Estructuras de Control de Flujo

Manejando variables /* Ejemplo creación y manejo de variables */ var Num1 = 5; var Num2 = 7; var Suma; Suma = Num1+Num2; alert(Suma);

Ejemplo 7 – Manejo de variables

Este programa crea tres variables (Num1, Num2 y Suma), inicializando las dos primeras en el momento de su creación y asignado el valor de la suma de estas a la variable Suma. Finalmente muestra una ventana de alerta con el valor de la variable Suma. Nota: JavaScript elimina automáticamente las variables al finalizar el programa en el que se han declarado por lo que su valor se pierde en futuras ejecuciones del mismo.

2.4 - TIPOS DE VARIABLES

Todas las variables en JavaScript se crean de la misma forma, utilizando tal y como se ha señalado la palabra reservada var. Sin embargo y a diferencia de otros lenguajes de programación, el tipo de las variables es dinámico, de manera que el programador puede utilizar la misma variable para almacenar diferentes tipos de datos. Dicho de otra manera, las variables adaptan su tipo al contenido que almacenan. Aunque no es una práctica recomendable es aprovechada en algunos casos para hacer que los programas sean más sencillos pero en otras ocasiones provoca tener que añadir código para detectar el tipo de dato que tiene la variable en un instante determinado.

29

30

Aula Mentor – Iniciación a Javascript 2.4.1 -NUMÉRICAS Se utilizan para almacenar valores numéricos enteros (llamados integer en inglés) o reales (llamados float en inglés). En este caso, el valor se asigna indicando directamente el número entero o real. Los números reales utilizan el carácter . (punto) en vez de , (coma) para separar la parte entera y la parte decimal: var iva = 18; // variable entera var euro = 166.38665; // variable real

Un valor numérico se suele representar mediante una serie de dígitos que pueden ir precedidos de un signo (+ ó -) y que pueden llevar un punto decimal. A continuación podemos ver algunas expresiones numéricas válidas: 45 389.347 -18 +6789.89 8768.3243 JavaScript también admite la notación exponencial para representar valores numéricos en formato de coma flotante: 56.987E+12 23634E-6 -484.2382E-20 Se pueden representar números en base distinta a la decimal, por ejemplo en hexadecimal, o en octal. Para expresar un número hexadecimal antepondremos el prefijo 0x (cero equis); y para expresar un número octal antepondremos un 0 (cero). 0xF34 (en hexadecimal) 0567 (en octal) Representaciones en base 8 y 16 alert ("Hexadecimal:"+ 0xF34); alert ("Octal:"+ 0567); // Fin del programa.

Ejemplo 8 – Representación en base 8 y 16

Observe que al ejecutar el ejemplo anterior, JavaScript transforma el F34 (hexadecimal pues va precedido por 0x) a su correspondiente valor decimal 3892. También ha trasformado el 567 (octal pues va precedido por 0) al valor correspondiente en decimal: 375.

Estructuras de Control de Flujo

31

2.4.2 -CADENAS DE CARACTERES Permiten almacenar caracteres que constituyen texto. Para asignar el valor a la variable es necesario encerrar el valor entre comillas dobles o simples: var mensaje = "Hola mundo "; var nombre = 'Aula Mentor'; var letra = 'b';

El motivo de que se puedan utilizar comillas dobles o simples indistintamente es para poder utilizar comillas dentro del propio texto que se desea almacenar. En este caso es necesario encerrar con un tipo de comillas diferente al que se desea almacenar. /* El contenido de texto1 tiene comillas simples, por lo que se encierra con comillas dobles */ var texto1 = "Una frase con 'comillas simples' dentro"; /* El contenido de texto2 tiene comillas dobles, por lo que se encierra con comillas simples */ var texto2 = 'Una frase con "comillas dobles" dentro';

Pero si el texto que se desea almacenar incluye ambos tipos de comillas así como otros caracteres especiales es necesario utilizar las secuencias de escape que no son más que símbolos precedidos de la barra inclinada \ y cuyo significado es: Elemento que se desea incluir

Secuencia de Escape

Una nueva línea

\n

Un tabulador

\t

Una comilla simple

\'

Una comilla doble

\"

Una barra inclinada

\\ var texto1 = 'Una frase con \'comillas simples\' dentro'; var texto2 = "Una frase con \"comillas dobles\" dentro";

32

Aula Mentor – Iniciación a Javascript 2.4.3 -TIPO LÓGICO Las variables de tipo lógico o booleano son aquellas que permiten representar valores de verdad: true (verdadero) o false (falso). var PagoRealizado = false; var ivaIncluido = true;

2.4.4 -TIPOS ESTRUCTURADOS: ARRAYS Mientras que tal y como se ha observado, los tipos simples son capaces de almacenar un único valor simultáneamente en una variable, los tipos estructurados o estructuras de datos permiten almacenar múltiples valores. Tradicionalmente los lenguajes de programación disponen de numerosos tipos estructurados. Entre los más habituales destacan los Arrays más conocidos en el ámbito matemático por matrices o incluso vectores cuando se limitan a una dimensión. Un array es un conjunto de variables del mismo tipo que tienen un nombre único y se diferencian unas de otras por la posición que ocupan. El objetivo de los arrays es simplificar el código y establecer una relación entre un conjunto de variables que representan realidades similares. Por ejemplo, si se desea trabajar con los meses del año en un programa se podrían definir doce variables simples y por tanto independientes cada una con su propio nombre y que almacenasen valores diferentes: var mes_uno = "Enero"; var mes_dos = "Febrero"; ... var mes_doce = "Diciembre";

Esta estrategia obliga a crear una variable por cada mes y dado que cada una es independiente su nombre debe de ser distinto. En capítulos posteriores, cuando se estudien las estructuras de control, se comprobará que utilizar arrays en vez de variables simples, reduce mucho la complejidad del código y abre un abanico ingente de posibilidades a la hora de resolver problemas que impliquen información relacionada. En este tipo de casos, se pueden agrupar todas las variables relacionadas en una colección

Estructuras de Control de Flujo

de variables o array. El ejemplo anterior se puede plantear con una array de una dimensión (vector) de la siguiente forma: var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto","Septiembre","Octubre","Noviembre","Diciembre"];

Desde el punto de vista sintáctico, la definición de un array es muy sencilla ya que simplemente hay que utilizar se utilizan los caracteres [ y ] para delimitar su comienzo y su final y se utiliza el carácter , (coma) para separar sus elementos: var nombre_array = [valor1, valor2, ..., valorN];

Para acceder a los diferentes elementos de un array simplemente hay que utilizar el nombre de la variable y el índice que representa la posición que ocupa el elemento al que se desea acceder dentro del array. Hay que tener en cuenta que las posiciones comienzan a numerarse en cero, por lo que el primer elemento es el mes[0] y así sucesivamente mes[1], mes[2], etc. 2.4.5 -TIPOS ESTRUCTURADOS: OBJETOS Los objetos son los principales protagonistas del paradigma de la programación orientada a objetos. Son una evolución de otro tipo estructurado denominado registro (estructuras en algunos lenguajes). Los objetos representan entidades cuya complejidad hace que no sea suficiente un valor para almacenar toda la información necesaria. Por este motivo, los registros o estructuras son conjuntos de datos de diferente tipo relacionados entre sí. Por ejemplo, los datos de una persona (nombre, apellidos, fecha de nacimiento, dirección, etc.) se pueden agrupar en un registro o estructura. El paradigma orientado a objetos incorpora a esos datos estructurados, las funciones (llamadas métodos) que manipulan esos datos, haciendo que los datos y los procedimientos conformen un ente llamado objeto. En JavaScript hay numerosos objetos predefinidos y el usuario-programador puede definir los que necesite. Ejemplo de objetos predefinidos en Javascript son las ventanas, los formularios, los controles, etc.

33

34

Aula Mentor – Iniciación a Javascript 2.4.6 -VALORES ESPECIALES En JavaScript existen dos valores especiales que son el valor null que indica que el contenido de una variable es nulo y el valor undefined que indica que la variable no tiene valor. El valor null, por ejemplo, es el valor que devuelve la función prompt cuando el usuario pulsa el botón Cancelar. El valor undefined, por ejemplo, es el valor que aparece en el control de introducción de datos cuando no se establece valor por defecto en la función prompt. 2.5 - OPERADORES Los operadores son el primer eslabón a la hora de establecer la capacidad de cálculo de un lenguaje de programación. Con ellos es posible realizar operaciones de diversa naturaleza que incluyen como mínimo cálculos aritméticos, relacionales y lógicos. La combinación de operadores con los datos a tratar conformar las expresiones. Las expresiones son combinaciones de operadores y operandos. Los operandos pueden ser constantes, variables y llamadas a funciones. Todas las expresiones producen o devuelven un resultado de un cierto tipo que estará determinado por el tipo de operandos que manipula y por los operadores que utiliza. Así mismo la operación asociada a un operador puede ser diferente en función de los operandos que maneje. Esto recibe el nombre de sobrecarga de operadores y se manifiesta de forma muy clarificadora cuando se analiza el operado +. Si este operador se aplica a dos operandos numéricos, el resultado será la suma aritmética. Sin embargo, si se aplica a operandos de tipo cadena de caracteres, el resultado será la concatenación (yuxtaposición) de ambas cadenas. Tipo de Expresión Expresión de cadena Expresión de cadena Expresión aritmética Expresiones relacionales Expresiones lógicas

Tipo de retorno Cadena Cadena Numérico Lógico Lógico

Expresión “Hola” + “Mundo” 10 + 20 10 + 20 7>5 True && False

Resultado “HolaMundo” “1020” 30 True False

Estructuras de Control de Flujo

2.5.1 -OPERADOR DE CONCATENACIÓN. Para unir cadenas de caracteres se emplea el operador de concatenación (+). Por ejemplo la expresión "Buenos" + "Días" dará como resultado "BuenosDias". 2.5.2 -OPERADORES ARITMÉTICOS. Se utilizan con datos de tipo numérico y devuelven siempre un valor numérico. Son los conocidos: suma (+), resta (-), multiplicación (*), división (/) y módulo o resto de la división entera (%). Operadores aritméticos /* Ejemplo operadores aritméticos*/ var Num1 = 2, Num2 = 4, Num3 = 6; alert( " Num1 \t" + (Num1) +"\nNum2 \t" + (Num2) +"\nNum3 \t" + (Num3) +"\nNum1 + Num2 \t" + (Num1 + Num2) +"\nNum3 / Num2 \t" + (Num3 / Num2) +"\nNum3 % Num2 \t" + (Num3 % Num2) +"\nNum1 + 2 \t" + (Num1 + 2) +"\nNum1 \t" + (Num1) );

Ejemplo 9 – Operadores aritméticos

2.5.3 -OPERADORES DE INCREMENTO Y DECREMENTO Un caso particular dentro de los operadores aritméticos son los operadores de incremento y decremento por el hecho de que su uso no solo devuelve un valor sino que modifica el propio contenido de la variable. En realidad estos operadores combinan un operador aritmético con el operador de asignación que aparece explicado en el próximo epígrafe. Se utilizan con variables numéricas y permiten incrementar o decrementar en

35

36

Aula Mentor – Iniciación a Javascript una unidad el valor de la variable sobre la que se aplica. Se trata de operadores unarios y el operando sobre el que se aplican siempre debe ser una variable ya que no tiene sentido intentar incrementar una constante porque no se puede modificar su valor. Los operados son el incremento (++) y el decremento (--). var numero = 9; ++numero; alert(numero); // numero = 10

Ambos operandos tienen un efecto diferente si se utilizan de forma prefija (delante del operando) que de forma postfija (detrás del operando). En el primer caso incrementan/decrementan el valor de la variable y la expresión devuelve como resultado el nuevo valor (ya incrementado/decrementado). El caso postfijo primero devuelve el valor antes de incrementar/decrementar y posteriormente incrementa/decrementa el valor de la variable. Evidentemente esta sutil pero importante diferencia sólo se observa cuando el operador aparece formando parte de otra expresión más compleja. Por ejemplo se puede observar en el ejemplo siguiente asociada a una función alert. Diferencias en notación prefija y postfija var pruebaA = 1; var pruebaB = 1; alert ("Operador ++ Prefijo:" + (++pruebaA)); alert ("Operador ++ Postfijo:"+ (pruebaB++)); // Fin del programa.

Ejemplo 10 – Diferencias notación prefija y postfija

Notación prefija (++pruebaA)

Notación postfija (pruebaB++)

Ilustración 3 – Resultado diferencias entre notación prefija y postfija

Estructuras de Control de Flujo

2.5.4 -OPERADOR DE ASIGNACIÓN El operador de asignación es uno de los operadores más importantes en los lenguajes de programación ya que permite asignar (almacenar) en una variable, el resultado de una expresión. El símbolo que representa el operador de asignación (=) el cual no debe confundirse con el operador relacional de comparación (==) var numero = 9;

2.5.5 -OPERADORES ARIMÉTICOS CON ASIGNACIÓN Dado que es muy frecuente realizar operaciones aritméticas que impliquen que una variable sea operando de la expresión y variable destino del resultado, los lenguajes de programación incorporan operadores que simplifican la escritura de expresiones que suelen ser habituales en los programas. Estos operadores combinan dos símbolos que son el correspondiente a la operación deseada y el operador de asignación. Para el caso de la suma sería (+=) Operadores aritméticos con asignación /* Ejemplo operadores asignación*/ var Suma = 6, Resta = 6, Multi = 6, Divi = 6, Modu = 6; Suma += 2; Resta -= 2; Multi *= 2; Divi /= 2; Modu %= 5; alert( " Suma \t" + (Suma) +"\nResta \t" + (Resta) +"\nMulti \t" + (Multi) +"\nDivi \t" + (Divi) +"\nModu \t" + (Modu)

);

Ejemplo 11 – Operadores aritméticos con asignación

37

38

Aula Mentor – Iniciación a Javascript El programa anterior muestra el funcionamiento de los operadores de asignación +=, -=, *=, /= y %= utilizando cinco variables llamadas Suma, Resta, Multi, Divi y Modu. Iniciacilizadas todas ellas a 6 y realizando las correspondientes operaciones de asignación. Finalmente se muestra con una ventana de alerta los nombres de las variables y su valor tras la operación. 2.5.6 -OPERADORES RELACIONALES Los operadores relacionales permiten comparar dos operandos siempre que entre ambos esté definida una relación de orden. En JavaScript están definidos los operadores: mayor que (>), menor que (=), menor o igual () y "menor que" ( = == ¡= && || = += -= *= /= %=

Incremento, decremento, cambio de signo, negación Multiplicación, división, resto (módulo) de la división Suma, resta Menor, mayor, menor o igual, mayor o igual Igual, distinto Conjunción lógica (AND – Y lógico) Disyunción lógica (OR – O lógico) Asignación, asignación y suma, etc.

Observaciones: Los operadores ++ y -- varían su comportamiento en una expresión dependiendo de si se aplican antes (pre-) o después (post-). Los operadores que se encuentran en el mismo grupo tienen la misma precedencia. En estos casos no se garantiza el orden de evaluación. Si queremos que se evalúen en algún orden concreto deberemos utilizar paréntesis. La precedencia o prioridad establecida por defecto se puede alterar utilizando paréntesis, de manera que las expresiones que se encuentran dentro de los paréntesis se realizan antes que las restantes. Se pueden anidar paréntesis y dentro de los mismos se utiliza la precedencia por defecto. JavaScript permite expresiones como: 100000 >= SALARIO = 100000 && SALARIO = 5) { alert("¡APROBADO!"); } alert("Fin del programa"); // Fin del programa.

Ejemplo 13 – Alternativa simple

Los operadores lógicos AND (&&), OR (||) y NOT (!) permiten encadenar varias condiciones simples para construir condiciones complejas. var llueve = true; var calor = false; If (!llueve && calor==false) { alert (“Día de tenis”); }

El fragmento anterior muestra dos expresiones lógicas unidas por el operador AND. El resultado será verdadero si ambas expresiones son verdaderas. La primera expresión está formada por la negación del valor de la variable llueve. Dado que la variable llueve vale true, la negación devolverá false. La segunda expresión compara el valor de calor con false como es cierta esa comparación, el resultado será true. Por tanto false AND true será false y la alerta no se mostrará en pantalla. Modifique el valor de la inicialización de llueve a a false y la alerta se mostrará.

43

44

Aula Mentor – Iniciación a Javascript 3.3 - ESTRUCTURA ALTERNATIVA DOBLE: IF ELSE

Cuando en un programa se desea que se ejecuten un bloque de instrucciones si se cumple una condición y otro bloque diferente si la condición no se cumple, la estructura anterior se debe completar con una cláusula else que establece a través de un bloque encerrado entre llaves, las instrucciones correspondientes al caso de que la condición no se cumpla. var llueve = true; var calor = false; If (!llueve && calor==false){ alert (“Día de tenis”); } else { Alert (“Día de lectura”); }

false instrucciones

Alternativa doble // Ejemplo de estructura alternativa doble. var Nota; Nota = prompt("Introduce la nota del alumno: ", 0); if (Nota >= 5) { alert("¡APROBADO!"); } else { alert("¡suspenso!"); } // Fin del programa.

Ejemplo 14 – Alternativa doble

true ¿?

instrucciones

Estructuras de Control de Flujo

3.4 - ANIDAR ESTRUCTURAS ALTERNATIVAS

Todas las estructuras de control se pueden anidar, es decir, dentro de una puede aparecer otra y dentro de esta otra a su vez construyendo estructuras alternativas más complejas. No obstante conviene ser cuidadoso con este mecanismo porque puede complicar el código en exceso y hacer que no todas las alternativas estén incluidas o que incluso aparezcan algunas no previstas por el programador. Anidamiento de alternativas // Ejemplo de anidamiento de estructuras alternativas. var Nota; Nota = prompt("Introduce la nota del alumno: ", 0); if (Nota >= 5 && Nota = 0 && Nota < 5) { alert("¡suspenso!"); } else { alert("Nota errónea"); } } // Fin del programa.

Ejemplo 15 –Anidamiento de Alternativas

45

46

Aula Mentor – Iniciación a Javascript 3.5 - EL OPERADOR CONDICIONAL ? En JavaScript está disponible el operador condicional ?. Se puede utilizar en algunas ocasiones en lugar de los la alternativa doble cuando las instrucciones de la parte true como las de la parte false son muy sencillas. Su formato genérico es:

(condición) ? ExpresionSiVerdadera : ExpresionSiFalsa Donde Condición

es cualquier expresión que devuelve un valor true o false.

ExpresionSiVerdadera es una expresión que se ejecutará en el caso de que la condición tenga el valor true. ExpresionSiFalsa igual que la anterior pero solo se ejecutará cuando la condición es falsa. Por ejemplo, la alternativa doble del ejemplo anterior puede sustituirse por la siguiente expresión: (Nota >= 0 && Nota < 5) ? alert("¡suspenso!") : alert("Nota erronea");

3.6 - ALTERNATIVA MÚLTIPLE Esta estructura está disponible a partir de la versión JavaScript1.3. Tiene el siguiente formato: switch (expresión) { case valor1: instrucciones1; break; case valor2: instrucciones1; break; case valor3: instrucciones1; break;

... case valorn: instruccionesn; break; [default: instrucciones;] };

Donde: expresión es cualquier expresión válida con la que se compararán los valores que acompañan a la cláusula case. valor1,..valorn son valores que suponemos puede tomar la expresión a los que les siguen la instrucción o instrucciones que queremos que

Estructuras de Control de Flujo

se ejecute en cada caso. default es una cláusula opcional, se ejecutarán las instrucciones que la siguen en el caso de que el valor no coincidiese con ninguno de los casos contemplados. El funcionamiento de esta estructura es el siguiente:

1. - calcula el valor de expresión. 2.- comprueba desde el principio cada valor que acompaña a las cláusulas case hasta encontrar alguno que coincida con el valor de expresión. 3.- cuando encuentra un valor que coincida con expresión ejecuta las instrucciones correspondientes hasta que encuentra la cláusula break. 4.- si no encuentra ningún valor que coincida con expresion ejecuta las instrucciones correspondientes a la cáusula default (si existe, en caso contrario no hará nada).

Observaciones: •

La cláusula break que aparece en este formato no es obligatoria pero si no se utiliza cambiará el funcionamiento de la estructura switch. Esta cláusula es la responsable la salida del bloque una vez que se ejecuten las instrucciones de una de las cláusulas case. Si no se pone, se seguirán ejecutando todas las instrucciones hasta llegar al final. Es decir las cláusulas case sin break actuarían como puntos de entrada a la estructura, siendo la salida la misma en todos los casos.

•

Para una misma cláusula case NO se pueden especificar diversos valores en lugar de un único valor. Si se desea que varios valores tengan la misma acción se deben poner claúsulas case por cada uno y dejar la acción en el último sacerlo: case valor1: case valor2: case valor3: acciones;break;

47

48

Aula Mentor – Iniciación a Javascript Anidamiento de estructuras // Ejemplo de estructura alternativa múltiple // (Anidada dentro de una alternativa doble). var Nota; var Calificacion = " "; Nota = prompt("Introduce la nota del alumno: ", 0); Nota = Math.round(Nota); if (Nota >= 0 && Nota Comprobar Password function validarFormulario(formulario) { if (formulario.clave1.value == "") { //no se ha introducido contraseña alert("Debes introducir la contraseña"); formulario.clave1.focus(); //devolver el foco al campo return; } if (formulario.clave1.value != formulario.clave2.value) { //las contraseñas escritas no coinciden alert("Las contraseñas introducidas son distintas") formulario.clave1.focus(); //devolver el foco formulario.clave1.select(); //seleccionar texto return; } formulario.action="http://www.servidor.es/login_servidor.cgi" formulario.submit(); //enviar datos al servidor } VERIFICACIÓN DE LA CONTRASEÑA Escribe tu nombre: Contraseña: Introduce de nuevo la contraseña:  

Ejemplo 36 – Objetos formulario: Comprobar password

111

112

Aula Mentor – Iniciación a Javascript

El evento onSubmit se dispara cuando un formulario está a punto de enviarse. Cuando se envíe el formulario (se hace clic en el botón Enviar, type="submit") se invoca a la función validarFormulario(), el parámetro que se envía es this que hace referencia al objeto actual, es decir al formulario. Se ha definido el método POST para enviar la información al servidor, method="POST". Cuando el formulario haya sido validado se realizan las siguientes acciones: formulario.action="http://www.servidor.es/login_servidor.cgi" formulario.submit(); //enviar datos al servidor

Es decir la acción a realizar será enviar los datos al servidor, a un programa CGI que se encargará de procesar la información; a la URL indicada por el atributo action. Este formulario es un ejemplo de cómo enviar datos al servidor para ser procesados por un archivo CGI. Más detalles sobre transmisión de datos a archivos CGI no es objetivo del curso. 5.14 - LOS OBJETOS BUTTON, RESET Y SUBMIT.

Definen los tres tipos de botones que se pueden incluir en un formulario. Puede ser un botón genérico, “button”, que no tiene acción asignada, un botón “submit” que al ser pulsado envía los datos del formulario o un botón “reset” que al ser pulsado limpia los valores del formulario. Propiedades name value

5.14.1 -

Métodos click()

Manejadores de eventos onClick

PROPIEDADES DE LOS OBJETOS BUTTON RESET Y SUBMIT

Name: Cadena que contiene el valor del parámetro NAME. Value: Cadena que contiene el valor del parámetro VALUE.

Objetos

5.14.2 -

113

MÉTODOS DE LOS OBJETOS BUTTON

click(): Reproduce la acción que el usuario realiza cuando hace clic en un botón. 5.15 - EL OBJETO CHECKBOX. Las casillas de verificación o "checkboxes" opciones

marcando

el

cuadrito

nos permiten seleccionar varias que

aparece

izquierda

a

su

. La marca de la

casilla equivale a un valor “true” y si no está marcada equivale a un valor “false”. Propiedades Checked defaultChecked name value

5.15.1 -

Métodos click()

Manejadores de eventos onClick

PROPIEDADES DEL OBJETO CHECKBOX:

Checked: Valor booleano que indica si la checkbox está seleccionada (true) o no seleccionada (false). defaultChecked: Valor booleano que indica si la checkbox debe estar seleccionado por defecto o no. Name: Cadena que contiene el valor del parámetro NAME. Value: Cadena que contiene el valor del parámetro VALUE.

5.15.2 -

MÉTODOS DE LOS OBJETOS CHECKBOX:

click(): Reproduce la acción que el usuario realiza cuando hace clic en un botón.

114

Aula Mentor – Iniciación a Javascript Ejemplo: En el siguiente formulario pediremos al usuario que introduzca su nombre y seleccione las casillas deseadas. Los botones de opción no tienen funcionalidad en este ejemplo. Al hacer clic en el botón Calcular, se visualizará en el campo TOTAL un total pts que dependerá de las casillas seleccionadas (Figura5_21). Accesorios: Aire Acondicionado Elevalunas Eléctrico RadioCD TOTAL: Pts La función Calculo() es:

Para comprobar si se ha seleccionado una casilla, por ejemplo la casilla AIRE, utilizamos la expresión: if (document.FORMULARIO.AIRE.checked) Devuelve true si la casilla está seleccionada, en caso contrario devuelve false.

5.16 - EL OBJETO RADIO Este objeto nos permitirá elegir una posibilidad entre todas las que hay:

Todos los botones de un grupo van a compartir el mismo nombre, de esta manera JavaScript conoce al grupo de botones de tal forma que al hacer clic en uno de ellos se desactive el resto de botones del grupo.

Objetos

Propiedades checked defaultChecked, length name, value

Métodos click()

115

Manejadores de eventos onClick()

Para acceder a las propiedades o métodos: [window.]document.nombreformulario.grupobotones[x].propiedad [window.]document.nombreformulario.grupobotones[x].método() [window.]document.nombreformulario.elements[n].propiedad [window.]document.nombreformulario.elements[n].método() [window.]document.forms[m].grupobotones.propiedad [window.]document.forms[m].grupobotones.método() [window.]document.forms[m].elements[n].propiedad [window.]document.forms[m].elements[n].método()

5.16.1 -

PROPIEDADES DEL OBJETO RADIO:

checked: Valor booleano que nos dice si el radio está seleccionado (true) o no (false). defaultChecked: Valor booleano que indica el elemento radio debe estar seleccionado por defecto o no length: Número de botones de opción definidos en el grupo de elementos radio. name: Cadena que contiene el valor del parámetro NAME. value: Cadena que contiene el valor del parámetro VALUE.

5.16.2 -

MÉTODOS DEL OBJETO RADIO:

click(): Reproduce la acción que el usuario realiza cuando hace clic en un botón.

116

Aula Mentor – Iniciación a Javascript Ejemplo: Partimos del formulario anterior, añadimos un nuevo botón que visualizará en una nueva ventana el valor del botón de radio seleccionado y las casillas seleccionadas. El código HTML para el nuevo botón es:

Para obtener el elemento seleccionado de cada una de las listas se han usado estas expresiones: primero=form.PRIMERPLATO.selectedIndex segundo=form.SEGUNDOPLATO.selectedIndex Para obtener el valor (debe estar definido el parámetro VALUE en la definición de la lista) seleccionado de la primera lista usamos esta expresión: form.PRIMERPLATO.options[primero].value

119

120

Aula Mentor – Iniciación a Javascript Para obtener el texto de la opción seleccionada de la segunda lista usamos esta expresión: form.SEGUNDOPLATO.options[segundo].text 5.18 - EL OBJETO HIDDEN Este es el objeto oculto del formulario, contiene cadenas de caracteres cuyos contenidos no son visibles para el usuario de la página Web. Es similar a un objeto text salvo que no tiene valor por defecto y que no se puede editar. Son útiles para las aplicaciones CGI que implican múltiples pantallas y se suele utilizar para conservar información de estado entre las páginas.

5.18.1 -

PROPIEDADES DEL OBJETO HIDDEN:

Name: Cadena que contiene el valor del parámetro NAME. Value: Cadena que contiene el valor del parámetro VALUE. Para acceder a las propiedades: [window.]document.nombreformulario.nombrecampo.propiedad [window.]document.nombreformulario.elements[n].propiedad [window.]document.forms[m].nombrecampo.propiedad [window.]document.forms[m].elements[n].propiedad

5.19 - PROPIEDADES Y MÉTODOS DE LOS OBJETOS DEL LENGUAJE. Los objetos vistos hasta el momento son los que forman parte de la jerarquía de objetos JavaScript. Si embargo JavaScript posee otro tipo de objetos propios del lenguaje que permiten manejar nuevas estructuras de datos y añadir utilidades al lenguaje. Consideraremos en este apartado los objetos String, Date y Math.

Objetos

5.19.1 -

121

EL OBJETO STRING.

Este objeto nos permite la manipulación de cadenas de texto. Cuando asignamos una cadena a una variable, JavaScript crea un objeto de tipo String que es el que nos permite hacer las manipulaciones. Para acceder a las propiedades y métodos: ObjetoString.Propiedad ObjetoString.Método() 5.19.2 -

PROPIEDADES DEL OBJETO STRING:

length: Nos indica la longitud en caracteres de la cadena dada.

Ej: "Hola

Mundo".length devuelve 10 prototype: Nos permite añadir nuevas propiedades al objeto String.

5.19.3 -

MÉTODOS DEL OBJETO STRING:

anchor(nombre_del_ancla): Crea un enlace

(local) asignando al atributo

NAME el valor de 'nombre_del_ancla'. Este nombre debe estar entre comillas " ". Se asigna como texto del enlace el que tenga el objeto String.

Genera

el

código

HTML: valor del objeto string. big(): Devuelve el valor del objeto string con una fuente grande. Genera el código HTML: valor del objeto string. blink(): Devuelve el valor del objeto string con un efecto intermitente. Genera el código HTML: valor del objeto string. bold(): Devuelve el valor del objeto string en negrita. Genera el código HTML: valor del objeto string. charAt(indice): Devuelve el carácter situado en la posición especificada por 'indice' (el primer carácter ocupa la posición 0). Ej: "Hola Mundo".charAt(0) Î devuelve H

122

Aula Mentor – Iniciación a Javascript concat(cadena): Concatena el valor del objeto string con el que se pasa como parámetro. C1.concat(C2) Devuelve la cadena C1 concatenada con la cadena C2. Es equivalente a C1+C2. Ej: "Hola".concat("Mundo") devuelve HolaMundo fixed(): Devuelve el valor del objeto string con una fuente con formato monoespacio. Genera el código HTML: valor del objeto string fontcolor(color): Cambia el color con el que se muestra la cadena. La variable color debe ser especificada entre comillas: " ", o bien siguiendo el estilo de HTML. Genera el código HTML: valor del objeto string fontsize(tamaño): Cambia el tamaño con el que se muestra la cadena. Los tamaños válidos son de 1 (más pequeño) a 7 (más grande). indexOf(cadena_buscada, indice): Devuelve el lugar de la cadena actual donde se encuentra la primera ocurrencia de 'cadena_buscada' a partir de la posición dada por 'indice'. Este último argumento es opcional y, si se omite, la búsqueda comienza por el primer carácter de la cadena. Si no lo encuentra devuelve –1. Ej: "Hola Mundo".indexOf("n") devuelve 7 italics(): Devuelve la cadena en cursiva. Genera el código HTML: valor del objeto string lastIndexOf(cadena_buscada ,indice): Devuelve el lugar donde se encuentra la última ocurrencia de 'cadena_buscada' dentro de la cadena actual, a partir de la posición dada por 'indice', y buscando hacia atrás. Este último argumento es opcional y, si se omite, la búsqueda comienza por el último carácter de la cadena. link(URL): Crea un enlace donde el atributo HREF toma el valor del URL y se asigna como texto del enlace el que tenga el objeto string. Genera el código HTML: valor del objeto string. small(): Devuelve el valor de la cadena con una fuente pequeña. Genera el código HTML: valor del objeto string.

Objetos

123

split(carácter): Divide una cadena en subcadenas creadas a partir de la original de la siguiente forma: 1º subcadena: desde el comienzo hasta el carácter especificado (o hasta el final si no lo encuentra). 2ª

y

sucesivas:

a

partir

del

carácter

especificado hasta el la siguiente ocurrencia del mismo o hasta el final. El carácter no se incluye en las subcadenas. "Hola Mundo".split(" ") devuelve Hola,Mundo strike(): Devuelve el valor de la cadena de caracteres tachada. Genera el código HTML: valor del objeto string slice(inicio,fin): Devuelve una cadena formada formada por los caracteres que se encuentra entre la posición inicio y fin-1. sub(): Devuelve el valor de la cadena con formato de subíndice. Genera el código HTML: valor del objeto string substr(N1, N2): Por ejemplo si considero C.substr(N1, N2): Devuelve una subcadena a partir de la cadena C tomando N2 caracteres desde la posición N1. Si no se especifica N2. Devolverá desde la posición N1 hasta el final de la cadena. Ej: "Hola Mundo".substr(2,5) devuelve la cadena Mu substring(N1,N2): C.substring(N1,N2): Devuelve también una cadena a partir de la cadena C, pero en este caso N1 y N2 indican las posiciones de comienzo y de final de la subcadena. Ej: "Hola Mundo".substring(2,6) devuelve la cadena M sup(): Devuelve el valor de la cadena con formato de superíndice. Genera el código HTML: valor del objeto string toLowerCase(): Devuelve el valor de la cadena en minúsculas. Ej: "Hola Mundo".toLowerCase() devuelve al cadena hola mundo toUpperCase(): Devuelve la cadena en mayúsculas. Ej: "Hola Mundo".toUpperCase() devuelve la cadena HOLA MUNDO

124

Aula Mentor – Iniciación a Javascript Ejemplo: Este ejemplo muestra propiedades y métodos del objeto String. La orden with informa a JavaScript que el siguiente grupo de órdenes, dentro de los símbolos de llave, serán referidas a un objeto en particular de forma que no es necesario escribir la palabra document delante de los métodos write. With (objeto) { [instrucciones] } Así en el ejemplo anterior utilizamos: with(document) { write("La cadena es: "+ cad +""); write(......) ....... }

Objeto String

Ejemplo 37 – Objeto String

Objetos

Ejemplo: El siguiente ejemplo muestra en el área el código HTML que se genera al aplicar algunos de los métodos del objeto String. Por ejemplo: la cadena escrita se convertirá a mayúscula o minúscula. En las casillas elegimos el tipo de fuente, tamaño, etc ... de la lista elegimos un color, que se lo aplicaremos a la cadena escrita. Estas sentencias generan código HTML Al hacer clic en el botón se visualizará en el área la cadena escrita en mayúscula o minúscula, en forma de URL (incluyendo ) y según el formato elegido. Objeto String . Métodos 0) //si no es la primera opcion texto=texto.fontcolor(colortexto) //añadimos el link document.FORMULARIO.resul.value=texto.link("Ejemplo_30.html"); } //-->

125

126

Aula Mentor – Iniciación a Javascript

Escribe una cadena : Mayúsculas Minúsculas Negrita Itálica Pequeña Grande Elige un color Rojo Azul Amarillo Verde Cadena resultante:

Ejemplo 38 – Objeto String: Métodos

5.19.4 -

EL OBJETO MATH.

Este objeto nos permite poder realizar cálculos en los scripts. Sus propiedades sólo pueden

consultarse,

son

constantes

matemáticas

de

uso

frecuente.

Las

referencias a las propiedades devuelven los valores inherentes (como por ejemplo pi); las referencias a los métodos requieren un valor enviado como parámetro al método y devuelven el resultado del método realizando la operación con el parámetro. La forma de usar el objeto Math es la misma que la forma de usar cualquier objeto JavaScript: Math.propiedad, Math.método()

Objetos

Propiedad

127

Descripción

Math.E

Constante de Euler. Número “e”, (aproximadamente 2.718)

Math.LN2

Logaritmo neperiano de 2 (aproximadamente 0.693)

Math.LN10

Logaritmo neperiano de 10 (aproximadamente 2.302)

Math.LOG2E

Logaritmo en base 2 de “e” (aproximadamente 1.442)

Math.LOG10E

Logaritmo en base 10 de “e” (aproximadamente 0.434)

Math.PI

Constante PI (aproximadamente 3.14159)

Math.SQRT1_2

Raíz cuadrada de 0.5 (aproximadamente 0.707)

Math.SQRT2

Raíz cuadrada de 2 (aproximadamente 1.414)

Función

Método

Descripción y ejemplo

Raiz cuadrada

Math.sqrt(N)

Potencia

Math.pow(N1, N2)

Valor absoluto

Math.abs(N)

Devuelve la raíz cuadrada del argumento. Ej: Math.sqrt(27) devuelve 5.196152422706632 Devuelve N1 elevado a N2. Ej: Math.pow(5, 3) devuelve 125 Devuelve el valor absoluto de un número (es decir, el valor de ese número sin signo). Ej: Math.abs(-5.3) devuelve 5

Redondeo

Math.round(N

Entero superior

Math.ceil(N)

Devuelve el número entero más próximo al número N. Ej: Math.round(27.2) devuelve 27 Math.round(27.5) devuelve 28 Math.round(-27.5) devuelve -27 Math.round(27.6) devuelve 28 Devuelve el entero mas cercano (por arriba) al número N. Si N es un número entero devuelve N. Ej: Math.ceil(6.1)

devuelve 7

128

Aula Mentor – Iniciación a Javascript Math.ceil(-6.1) devuelve –6 Entero inferior

Math.floor(N)

Redondea el número al valor entero inmediatamante inferior. Si N es un número entero devuelve N. Ej: Math.floor(6.1) devuelve 6 Math.floor(-6.1) devuelve –7 Math.floor(6.7) devuelve 6 Math.floor(-6.7) devuelve –7

Número aleatorio

Math.random()

Genera un número aleatorio entre 0 y 1. A continuación podemos ver el valor devuelto por Math.random() en tres ejecuciones consecutivas.

Máximo

Math.max(N1, N2)

Mínimo.

Math.min(N1, N2)

Math.acos(N) Math.asin(N) Math.atan (N) Math.cos(N) Math.exp(N) Math.floor(N) Math.log(N) Math.sin(N) Math.tan(N)

0.46879380653891483 0.26926274793632804 0.3076617575535776 Devuelve el número mayor de los dos números que se pasan como argumento. Ej: Math.max(2, 4) devuelve 4 Devuelve el número menor de los dos números que se pasan como argumento. Ej: Math.min(2, 4) devuelve 2

Función arcocoseno. Devuelve el arcocoseno de N en radianes Función arcoseno. Devuelve el arcoseno de N en radianes. Función arcotangente. Devuelve el arcotangente de N en radianes. Devuelve el coseno de N. Devuelve el valor enumero. Devuelve el siguiente número entero menor o igual que N. Devuelve el logaritmo neperiano de N. Devuelve el seno de N en radianes. Devuelve la tangente de N en radianes.

Objetos

En todas las órdenes que interviene el objeto Math se puede utilizar referencia abreviada. Por ejemplo, la siguiente expresión: Resultado = Math.sqrt(125) * Math.PI Se puede sustituir por esta otra: with(Math) { Resultado = sqrt(125) * PI; }

Ejemplo: El siguiente ejemplo muestra el uso de algunos métodos del objeto Math. Se escribirá una cantidad numérica y al hacer clic en el botón Obtener cálculos se visualizarán los cálculos obtenidos al aplicar algunos métodos. El código asociado al botón es el siguiente:

Function CalculosMatematicos(numero) { with(Math) { document.forms[0].RAIZ.value= sqrt(numero); document.forms[0].SUPERIOR.value= ceil(numero); document.forms[0].ELEVADO.value= pow(numero,3); document.forms[0].INFERIOR.value= floor(numero); document.forms[0].ABSOLUTO.value= abs(numero); document.forms[0].REDONDEO.value= round(numero); document.forms[0].NEPERIANO.value= log(numero); document.forms[0].EXPONENTE.value= exp(numero); } }

5.19.5 -

EL OBJETO DATE.

Este objeto nos va a permitir manipular fechas y horas. Dispone de diversos métodos para obtener y modificar el año, el mes, el día, las horas, los minutos y los segundos. Debemos tener en cuenta lo siguiente: •

JavaScript maneja fechas en milisegundos.

129

130

Aula Mentor – Iniciación a Javascript •

Los meses de Enero a Diciembre vienen dados por un entero cuyo rango varía entre el 0 y el 11 (el mes 0 es Enero, el mes 1 es Febrero, y así sucesivamente).

•

Los días de la semana de Domingo a Sábado vienen dados por un entero cuyo rango varía entre 0 y 6 (el día 0 es el Domingo, el día 1 es el Lunes, ...),

•

Los años se ponen tal cual, y las horas se especifican con el formato HH:MM:SS.

5.19.6 -

CREACIÓN DE UN OBJETO DE FECHA:

La sintaxis básica para crear un objeto fecha es la siguiente: ObjetoFecha = new Date([parámetros]) Podemos crear un objeto Date vacío (sin parámetros), entonces se creará con la fecha correspondiente al momento actual en el que se crea. Ejemplo: var Fecha=new Date();

O podemos crearlo dándole una fecha concreta (con parámetros). Indicando parámetros tenemos estas posibilidades: var Fecha = new Date(“Month dd, yyyy hh:mm:ss”); var Fecha = new Date(“Month dd, yyyy”); var Fecha = new Date(yyyy,mm,dd,hh,mm,ss); var Fecha = new Date(yyyy,mm,dd); var Fecha = new Date(milisegundos);

El nombre del mes debe aparecer completo y en inglés. Las horas, minutos y segundos han de ir separados por dos puntos (:) Ejemplos: podemos almacenar el 27 de julio de 2001 de varias formas: var Fecha1 = new Date(2001, 6,27); var Fecha2 = new Date("July 27, 2001");

Para utilizar los métodos del objeto Date: ObjetoFecha.método() 5.19.7 -

MÉTODOS DEL OBJETO DATE:

Método ObjetoFecha.getTime() ObjetoFecha.getDate()

Descripción Devuelve el número de milisegundos transcurridos desde el 1 de enero de 1970 hasta el momento actual. Devuelve el día del mes actual como un

Objetos

ObjetoFecha.getDay() ObjetoFecha.getHours() ObjetoFecha.getMinutes() ObjetoFecha.getMonth() ObjetoFecha.getSeconds() ObjetoFecha.getYear()

ObjetoFecha.setDate(día_mes) ObjetoFecha.setDay(día_semana) ObjetoFecha.setHours(horas) ObjetoFecha.setMinutes(minutos) ObjetoFecha.setMonth(mes) ObjetoFecha.setSeconds(segundos) ObjetoFecha.setTime(milisegundos)

ObjetoFecha.setYear(año)

ObjetoFecha.toGMTString()

ObjetoFecha.toLocaleString()

valor entero entre 1 y 31. Devuelve el día de la semana actual como valor un entero entre 0 y 6. Devuelve la hora del día actual como un valor entero entre 0 y 23. Devuelve los minutos de la hora actual como un valor entero entre 0 y 59. Devuelve el mes del año actual como un valor entero entre 0 y 11 (enero=0). Devuelve el número de segundos de la hora actual como un valor entero entre 0 y 59. Devuelve el año actual como un valor entero. Si el año se encuentra entre 1900 y 1999, devuelve un entero de dos dígitos (diferencia entre el año y 1900). Si está fuera de este rango Explorer devuelve el valor del año expresado en 4 dígitos y Mozilla devuelve el año expresado como la diferencia entre este y 1900. Establece el día del mes en el objeto Date (valor entre 1 y 31) Establece el día de la semana (valor entre 0 y 6, domingo=0). Establece la hora del objeto Date (valor entre 0 y 23). Establece los minutos del objeto Date (valor entre 0 y 59). Establece el mes del objeto Date (valor entre 0 y 11). Establece el número de segundos del objeto Date (valor entre 0 y 59). Establece el número de milisegundos transcurridos desde el 1 de enero de 1970 y a las 00:00:00 horas. Establece el año del objeto Date. Si se indica un número entre 0 y 99, este método asigna como año ese valor mas 1900. Si el año indicado está fuera de ese rango, el método asigna el valor tal cual. Devuelve la fecha en forma de cadena usando la convención de zona horaria del meridiano de Greenwich (GMT). Convierte la fecha del objeto Date en una cadena en el formato del sistema.

131

132

Aula Mentor – Iniciación a Javascript Ejemplo: El siguiente ejemplo muestra el uso de alguno de los métodos del objeto Date. Objeto Date

Ejemplo 39 – Objeto Date

Ejemplo: En el siguiente ejemplo se define una función que recibe una fecha y la devuelve personalizada, incluyendo el nombre del día de la semana y el nombre del mes. El código del script es el siguiente:

Objetos

133



Un ejemplo de llamada a la función: document.write(Convertir(new Date())); que visualiza la fecha de forma similar a : Martes, 22 de Mayo de 2012

5.20 - OBJETOS PERSONALIZADOS. JavaScript nos permite crear nuestros propios objetos con propiedades y con métodos. Recordemos que un objeto es una entidad que posee unas ciertas características, llamadas propiedades, y que tiene asociadas

determinadas

operaciones, llamadas métodos. Así podemos definir el objeto Alumno con varios atributos: nombre, apellidos, curso y nota; y varios métodos como pueden ser: obtener la nota del alumno, obtener todos los datos del alumno, etc. A la hora de crear un objeto personalizado necesitamos una función que define cómo es el objeto y cómo se comporta. Así, definimos el objeto Alumno de la siguiente manera: function Alumno(Nombre, Apellidos, Curso, Nota) { this.nombre=Nombre; this.apellidos=Apellidos; this.curso=Curso; this.nota=Nota; this.Obtener_nota=Obtener_nota; this.Obtener_datos=Obtener_datos;

134

Aula Mentor – Iniciación a Javascript }

Donde: -

El nombre de la función (Alumno) se utilizará como nombre de objeto.

-

Los parámetros de la función representan los valores que se asignarán a las propiedades del objeto (nombre, apellidos, curso, y nota).

-

Se utiliza la palabra reservada

this seguida de un punto para asociar

propiedades al objeto (this.propiedad). -

También se utiliza la palabra reservada this para añadir métodos al objeto (this.metodo).

-

A los atributos se les asigna valores (parámetros que se pasan a la función) y los métodos se crean fuera de la declaración del objeto.

-

Se han definido dos métodos: Obtener_nota y Obtener_datos, que se definen fuera de la definición del objeto: function Obtener_nota() { //devuelve la nota return (this.nota); } function Obtener_datos() { //devuelve datos del alumno var datos= "Nombre : " + this.nombre +" Apellidos: " + this.apellidos + "Curso: " + this.curso + "Nota: " + this.nota; return (datos); }

Para utilizar este objeto creamos una instancia de la siguiente forma: Alicia=new Alumno("Alicia","Tovar Gil",1,7);

Para hacer referencia a los métodos y atributos: Alicia.curso=2; document.write(Alicia.Obtener_datos()); document.write("La nota de : " + Alicia.nombre +", es: "+ Alicia.Obtener_nota());

Eventos

UNIDAD 6 - EVENTOS. 6.1 - DEFINICIÓN. Podemos decir que los eventos son acciones que el usuario realiza mientras visita una página Web. Por ejemplo son eventos hacer clic en un botón, mover el puntero del ratón sobre un enlace, realizar una selección en una lista desplegable, etc. JavaScript para trabajar con eventos utiliza unos comandos denominados manejadores de eventos (event handler). Un manejador de eventos contiene instrucciones acerca de qué hacer cuando una clase particular de evento se dispara. El nombre del manejador de eventos es el nombre del evento precedido de la palabra on. Sin embargo en los eventos se pone de manifiesto uno de los principales problemas que implica desarrollar aplicaciones Web: las incompatibilidades entre navegadores. A pesar de que existen estándares para cada una de las tecnologías empleadas, los navegadores no los implementan intégra ni respetuosamente, haciendo que cada desarrollo se ejecute con diferencias sustanciales que hacen que algunas aplicaciones deban ser consideras incompatibles. Este es un problema muy grave de las tecnologías Web en general y además son un contrasentido ya que uno de los objetivos de las mismas era hacer que las aplicaciones fuesen independientes de la plataforma. En el caso concreto de JavaScript y de los eventos, existen tres modelos diferentes para manejarlos dependiendo del navegador en el que se ejecute la aplicación. Por un lado el modelo básico de eventos que se introduce con la versión 4 del estándar HTML y que es considerado parte del nivel más básico de DOM. Es el único compatible con todos los navegadores pero es muy limitado. En segundo lugar el modelo de eventos estándar asociado al estándar DOM de nivel 2 que es implementado por la mayor parte de los navegadores con excepción de Internet Explorer. Y finalmente el modelo de eventos de Internet Explorer que como señala su nombre es específico de este

135

136

Aula Mentor – Iniciación a Javascript navegador. En el modelo básico de eventos, cada elemento tiene una lista de eventos que es capaz de manejar. El nombre de cada evento se construye con el prefijo “on” y el nombre de la acción que desencadena el evento. En siguiente tabla extraída de www.librosweb.es se muestran junto al nombre del manejador de eventos, la descripción y los elementos de interfaz de usuario más comunes en los documentos HTML.

Eventos

El papel del programador Javascript consiste en desarrollar el código asociado a los manejadores de eventos para que una vez que se detecte el evento se ponga en ejecución el código previsto. El manejador de evento es por lo tanto una función Javascript diseñada por el programador para ese propósito. Para asociar a cada evento el manejador correspondiente se pueden usar diferentes estrategias que fundamentalmente se resumen en establecer el manejador como atributos de los elementos XHTML, usar funciones JavaScript externas o emplear manejadores "semánticos". El primer caso es el método más sencillo pero el menos recomendado. Consiste en definir el código del evento como el valor de un atributo de la marca XHTML.

Con objeto de que desde el código se pueda hacer referencia al propio elemento XHTML que lo contiene, Javascript define el objeto this. En el ejemplo siguiente se observa el funcionamiento de este objeto de manera que un evento puede hacer que una propiedad del objeto XHTML se modifique durante la navegación. Sección de contenidos...

El segundo método consiste en desarrollar funciones que agrupen las instrucciones sin que estas tengan que aparecer embebidas en el código XHTML. function Mensaje() {alert('Gracias'); }



Dado que en la función no tiene sentido, contextualmente hablando, utilizar el objeto this, es posible pasar dicho objeto como parámetro a la función. function resalta(elemento) { switch(elemento.style.borderColor) { case 'silver': elemento.style.borderColor = 'black'; break; case 'black': elemento.style.borderColor='silver'; break; } }

137

138

Aula Mentor – Iniciación a Javascript Sección de contenidos...

El tercer método para añadir manejadores de eventos tiene como principal objetivo separar si cabe aún más el código XHTML del código JavaScript, para facilitar su lectura y su mantenimiento futuro, al igual que es conveniente separar el contenido XHTML del diseño y presentación CSS. Este método consiste en utilizar las propiedades DOM de los elementos XHTML para asignar todas las funciones externas que actúan de manejadores de eventos. Por ejemplo: // Función externa

function muestraMensaje() { alert('Gracias'); } // Asignar la función externa al elemento

document.getElementById("pinchable").onclick = muestraMensaje; // Elemento XHTML



El único inconveniente de este método es que la página se debe cargar completamente antes de que se puedan utilizar las funciones DOM que asignan los manejadores a los elementos XHTML. Una de las formas más sencillas de asegurar que cierto código se va a ejecutar después de que la página se cargue por completo es utilizar el evento onload: window.onload = function() { document.getElementById("pinchable").onclick = muestraMensaje; }

Para obtener información más precisa sobre las circunstancias en las que se produce un evento, JavaScript dispone de un objeto especial llamado event pero cuyo uso depende del navegador. Los navegadores tipo Internet Explorer obtienen el objeto event directamente mediante: var evento = window.event; En el resto de navegadores, el objeto event se obtiene a partir del argumento que el navegador crea automáticamente: function manejadorEventos(elEvento) { var evento = elEvento; }

Si se quiere programar una aplicación que funcione correctamente en todos los navegadores, es necesario obtener el objeto event de forma correcta según cada navegador. El siguiente código muestra la forma correcta de obtener el objeto en cualquier navegador: function manejadorEventos(elEvento) { var evento = elEvento || window.event;}

Eventos

6.2 - EVENTOS DE TECLADO Los eventos relacionados con el teclado son los más incompatibles entre diferentes navegadores. Cada intervención del usuario en el teclado desencadena tres eventos diferentes (onkeyup, onkeypress y onkeydown). El evento onkeydown se corresponde con el acto de pulsar una tecla y mantenerla sin soltarla; el evento onkeypress refleja la pulsación de la tecla y el evento onkeyup representa el instante en que se suelta la tecla que pulsada. En función del navegador y del evento se pueden obtener información concreta a través de las propiedades keyCode y charCode function manejador(elEvento) { var evento = elEvento || window.event; var caracter = evento.charCode || evento.keyCode; alert("El carácter pulsado es: " + String.fromCharCode(caracter)); } document.onkeypress = manejador;

6.3 - EVENTOS DE RATÓN

La información que habitualmente se captura del ratón son las coordenadas de su ubicación y los eventos asociados a la pulsación de los controles del mismo. Los sistemas de coordenadas permiten conocer la posición del ratón respecto a la pantalla del ordenador, respecto a la ventana del navegador y respecto a la propia página HTML (interesante si el usuario ha hecho scroll sobre la página). Las coordenadas más sencillas son las que se refieren a la posición del puntero respecto de la ventana del navegador, que se obtienen mediante las propiedades clientXy clientY: function muestraInformacion(elEvento) { var evento = elEvento || window.event; var coordenadaX = evento.clientX; var coordenadaY = evento.clientY; alert("Ratón en la posición: " + coordenadaX + ", " + coordenadaY); } document.onclick = muestraInformacion;

139

140

Aula Mentor – Iniciación a Javascript Las coordenadas de la posición del puntero del ratón respecto de la pantalla completa del ordenador del usuario se obtienen de la misma forma, mediante las propiedades screenX y screenY: var coordenadaX = evento.screenX; var coordenadaY = evento.screenY;

Las coordenadas respecto a la página HTML (hay diferencias entre navegadores) function muestraInformacion(elEvento) { var evento = elEvento || window.event;} var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1; if(ie) { coordenadaX = evento.clientX + document.body.scrollLeft; coordenadaY = evento.clientY + document.body.scrollTop; } else { coordenadaX = evento.pageX; coordenadaY = evento.pageY; } alert("Ratón en la posición: " + coordenadaX + ", " + coordenadaY + " respecto de la página web"); document.onclick=muestraInformacion;

EVENTOS DE FORMULARIO function Comprobar(F) { if(F.NOMBRE.value=="" && F.CURSO.value=="" && F.NOTA.value=="") { alert("Datos no válidos"); return false; } return true; } EVENTOS DE FORMULARIO Nombre y Apellidos: Curso: Nota:

Ejemplo 40 – Eventos de formulario

Eventos

OTROS EVENTOS BIENVENIDOS A MI PAGINA WEB

Ejemplo 41 – Otros eventos

Este ejemplo muestra los eventos del ratón. Se ha definido un formulario con dos cajas de texto, dos Botones de radio, un área de texto, una lista y el botón restablecer. Se han definido dos enlaces. Se ha definido la función Comprobar_seleccion(), que comprobará el botón pulsado del grupo de botones de radio con el elemento seleccionado de la lista de ciclos. Si se elige Ciclo de Grado Medio, solo pueden ser válidos los dos primeros elementos de la lista, si se elige Ciclo de Grado Superior, son válidos los elementos 3, 4 y 5 de la lista. Al elegir un elemento de la lista se invocará a la función. También se invocará al hacer clic en los botones de radio.

141

142

Aula Mentor – Iniciación a Javascript

Eventos de ratón function Comprobar_seleccion(){ n=document.FORMU.LISTA.selectedIndex; if(document.FORMU.LISTA.options[n].value=="0") //no ha seleccionado nada { alert("Debes seleccionar un elemento de la lista"); document.FORMU.LISTA.focus(); } else { if(document.FORMU.BOTONES[0].checked) //grado medio if(document.FORMU.LISTA.options[n].value>"2") { alert("Debes seleccionar un Ciclo de Grado Medio"); document.FORMU.LISTA.selectedIndex=5;//para que se visualice el elemento 5 de la lista document.FORMU.LISTA.focus();//devolver foco a la lista return; } if(document.FORMU.BOTONES[1].checked) //grado superior if(document.FORMU.LISTA.options[n].value Estilos Hola Mundo!