educacion.es
AULA
MENTOR
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:
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.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 - UNIDAD 4 – FUNCIONES ... 55
4.1 - 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 - OBJETOS ... 65 5.1 - OBJETOS EN JAVASCRIPT ... 65 5.1.1 - Operador new ... 65 5.2 - 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.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 - Propiedades: ... 100
5.11 - EL OBJETO IMAGE. ... 101
5.11.1 - Propiedades del objeto image: ... 101
5.12 - 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.17 - EL OBJETO SELECT. ... 116
5.17.1 - Propiedades del objeto select: ... 117
5.18 - EL OBJETO HIDDEN... 120
5.18.1 - Propiedades del objeto hidden: ... 120
5.19 - 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
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
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
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.
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.
Para profundizar en el concepto de página dinámica se recomienda la lectura del
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
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.
Para conocer más datos sobre la historia y la evolución de Javascript puede consultar
Ilustración 1 – Proceso de edición y ejecución de un programa Javascript
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: <script> código JavaScript </script>. 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 1 – Código Javascript embebido en HTML Editar código Javascript Integrar código Javascript con código HTML Abrir con un navegador <html> <head>
<title>Ejemplo de código JavaScript en el propio documento</title> <script type="text/javascript">
alert("Un mensaje de prueba"); </script>
</head>
<body> <p>Un párrafo de texto.</p></body> </html>
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++
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.
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”).
Ilustración 2 – Ejecución de código JavaScript y HTML
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
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:
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 <script> 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.
Ejemplo 2 – Código Javascript en fichero externo
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
Archivo JavaScript: micodigo.js
alert("Esto es una alerta escrita en JavaScript"); Documento HTML: ejemplo.html
<html> <head>
<title>Código JavaScript almacenado en fichero externo</title> <script type="text/javascript" src="./micodigo.js"></script> </head>
<body>
<p>Esto es un párrafo en HTML</p> </body>
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.
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
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:
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 <SCRIPT>. A partir de ese momento será el intérprete Javascript el encargado de interpretar y ejecutar el código hasta la etiqueta </SCRIPT>. 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 <SCRIPT> y </SCRIPT> 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.
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.
Ejemplo 3 – El primer programa
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
Ejemplo 4 – Programa “Hola Mundo!” <HTML>
<HEAD><TITLE>El primer programa</TITLE> </HEAD> <BODY> Esto es HTML<br /> <b> <script type="text/javascript"> document.write("Esto es JavaScript."); </SCRIPT> <br /></b> Esto es HTML<br/> </BODY> </HTML> <html> <head> <title>¡Hola Mundo!</title> <script type="text/javascript"> alert("Hola Mundo!"); </script> </head> <body>
<p>Esta página contiene el segundo script</p> </body>
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 <head> que es la parte que se ejecuta antes de mostrar el <body> en el navegador.
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
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: <!-- aquí va el comentario -->
El comentario empieza con los caracteres: <!-- y termina con los caracteres: --> Para ocultar Javascript a los navegadores antiguos escribiremos los comentarios como se expone a continuación:
<SCRIPT LANGUAGE="JavaScript"> <!-- Ocultar guión para navegadores Aquí va el código JavaScript
// Fin de ocultación del guión --> </SCRIPT>
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:
1.8 - ELEMENTOS DE UN PROGRAMA JAVASCRIPT Ejemplo 5 – Uso de comentarios
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.
<HTML>
<HEAD><TITLE>Utilizando comentarios</TITLE> <SCRIPT LANGUAGE="JavaScript">
<!-- Ocultar guión para navegadores antiguos function vertexto()
{
document.write("Esto es JavaScript.") }
// Fin de ocultación del guión --> </SCRIPT> </HEAD> <BODY> Esto es HTML<br /> <b> <SCRIPT LANGUAGE="JavaScript">
<!-- Ocultar guión para navegadores antiguos vertexto();
// Fin de ocultación del guión --> </SCRIPT>
</b>
Esto es HTML <br /> </BODY>
• 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.
Podemos observar que el programa realiza las siguientes tareas: Ejemplo 6 – Conversor pesetas a euros
- La etiqueta <SCRIPT LANGUAGE="JavaScript"> 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
<HTML>
<HEAD><TITLE>Conversor pesetas a euros</TITLE></HEAD> <BODY>
<SCRIPT LANGUAGE="JavaScript"> 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"); } </SCRIPT> </BODY> </HTML>
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 </SCRIPT> 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
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
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 (<undefined>). 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.
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.
• 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
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 reservada var y, a continuación, la lista de las variables que queremos declarar (los nombres separados por comas):
var nombre, edad;
El nombre o identificador de la variable podrá 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
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.
2º- Establecer un criterio a la hora de
construir identificadores y seguirlo siempre (Determinar cuándo se utilizan mayúsculas, minúsculas y sub-guiones, etc.). A la hora de establecer este criterio deberemos valorar también la legibilidad del programa.
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.
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.
Ejemplo 7 – Manejo de variables
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.
<HTML>
<HEAD><TITLE>Manejando variables</TITLE></HEAD> <BODY>
<SCRIPT LANGUAGE="JavaScript">
/* Ejemplo creación y manejo de variables */ var Num1 = 5; var Num2 = 7; var Suma; Suma = Num1+Num2; alert(Suma); </SCRIPT> </BODY> </HTML>
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)
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.
Ejemplo 8 – Representación en base 8 y 16 <HTML>
<HEAD><TITLE>Representaciones en base 8 y 16</TITLE></HEAD> <BODY>
<SCRIPT LANGUAGE="JavaScript"> alert ("Hexadecimal:"+ 0xF34); alert ("Octal:"+ 0567);
// Fin del programa. </SCRIPT>
</BODY> </HTML>
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";
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
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.
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 Tipo de retorno Expresión Resultado Expresión de cadena Cadena “Hola” + “Mundo” “HolaMundo” Expresión de cadena Cadena 10 + 20 “1020” Expresión aritmética Numérico 10 + 20 30 Expresiones relacionales Lógico 7 > 5 True Expresiones lógicas Lógico True && False False
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 (%).
2.5.3 -OPERADORES DE INCREMENTO Y DECREMENTO Ejemplo 9 – Operadores aritméticos
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
<HTML>
<HEAD><TITLE>Operadores aritméticos</TITLE></HEAD> <BODY>
<SCRIPT LANGUAGE="JavaScript"> /* 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) ); </SCRIPT> </BODY> </HTML>
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.
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 <HTML>
<HEAD><TITLE>Diferencias en notación prefija y postfija</TITLE></HEAD> <BODY>
<SCRIPT LANGUAGE="JavaScript"> var pruebaA = 1;
var pruebaB = 1;
alert ("Operador ++ Prefijo:" + (++pruebaA)); alert ("Operador ++ Postfijo:"+ (pruebaB++)); // Fin del programa.
</SCRIPT> </BODY> </HTML>
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 (+=)
Ejemplo 11 – Operadores aritméticos con asignación <HTML>
<HEAD><TITLE>Operadores aritméticos con asignación</TITLE></HEAD> <BODY>
<SCRIPT LANGUAGE="JavaScript"> /* 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) ); </SCRIPT> </BODY> </HTML>
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 (<), mayor o igual (>=), menor o igual (<=), igual que (==) y distinto de (!=). El resultado de aplicar un operador relación da lugar a una expresión lógica por lo que el resultado siempre será true o false.
Es importante distinguir el operador de igualdad (==) del operador de asignación (=) ya que es origen de muchos errores y su detección no resulta fácil porque ambos se pueden utilizar en el mismo contexto con resultados completamente diferentes. Cuando se utilizan estos operadores con operandos del tipo cadenas de texto, los operadores "mayor que" (>) y "menor que" (<) comparan letra a letra comenzando desde la izquierda hasta que se encuentre una diferencia entre las dos cadenas de texto. Para determinar si una letra es mayor o menor que otra, las mayúsculas se consideran menores que las minúsculas y las primeras letras del alfabeto son menores que las últimas. La tabla ASCII (codificación numérica asociada a todos los caracteres visibles de un teclado) determina el orden en estas comparaciones. Se puede consultar una tabla ASCII en
Ejemplo 12 – Operador relacional igualdad
http://ascii.cl/es/
<HTML>
<HEAD><TITLE>Operador relacional de igualdad</TITLE></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> var A = 10; var B = 12; alert ( A==B); </SCRIPT> </BODY> </HTML>
Ejercicio 4
2.5.7 -OPERADORES LÓGICOS
Los operadores lógicos permiten combinar expresiones lógicas (aquellas que devuelven como resultado un valor true o false). Responden a tablas de verdad pre-establecidas que determinan el resultado del operador a la combinación de valores de los operandos. El resultado siempre es un valor true o false. Dado que en algunos lenguajes de programación no existe el tipo lógico como tipo de datos, tradicionalmente se considera que cualquier valor numérico diferente de cero se considera true y cero se considera false. Por este motivo se pueden utilizar estos operadores con operandos numéricos. Así mismo, cuando se trabaja con cadenas de caracteres, la cadena vacía se considera false y el resto de cadenas true.
Operador negación (!): Utiliza un único operando y cuyo resultado es true cuando el operando vale false y false cuando el operando vale true.
var soltero = true;
alert(!soltero); // Muestra "false" y no "true"
Operador Y-lógico (AND) (&&): El operador lógico AND es un operador binario por lo que obtiene su resultado como resultado de evaluar dos operandos. La tabla de verdad de este operador devuelve true si los dos operandos son true y false en cualquier otro caso.
Operador O-lógico (OR) (||): El operador lógico OR es un operador binario por lo que obtiene su resultado como resultado de evaluar dos operandos. La tabla de verdad de este operador devuelve false si los dos operandos son false y true en cualquier otro caso.
2.6 - PRECEDENCIA DE OPERADORES
En una expresión pueden aparecer varios operadores y el resultado podría ser diferente si las operaciones se realizan en un orden o en otro. Como parece lógico pensar
no se puede dejar al azar este asunto ya que las expresiones deben ser evaluadas siguiendo unas pautas establecidas. Por ejemplo, la operación 3+5*4 proporcionará resultados distintos si primero se suma y luego con el resultado se multiplica que si se hace primero la multiplicación y luego la suma. En el primer caso el resultado sería 32 mientras que en el segundo sería 23. Para eliminar esta ambigüedad, los lenguajes de programación, como herencia de la matemática, establecen una jerarquía de operadores que determina el orden de evaluación de los operadores.
Prioridad
Operadores
Operaciones
1ª ++ -- - ¡ Incremento, decremento, cambio de signo, negación
2ª * / % Multiplicación, división, resto (módulo) de la división
3ª + - Suma, resta
4ª < > <= >= Menor, mayor, menor o igual, mayor o igual
5ª == ¡= Igual, distinto
6ª && Conjunción lógica (AND – Y lógico)
7ª || Disyunción lógica (OR – O lógico)
8ª = += -= *= /= %= 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 <= 200000. Este tipo de expresiones es ilegal en otros lenguajes de programación y provocará un error ya que al evaluar la primera parte de la expresión se sustituirá por un valor lógico de tipo
true/false y este resultado no puede compararse con un valor numérico. La expresión
válida para la mayoría de los lenguajes de programación sería SALARIO >= 100000 && SALARIO <= 200000.
UNIDAD 3 - ESTRUCTURAS DE
CONTROL DE FLUJO
3.1 - INTRODUCCIÓN
Aunque hasta este momento no se ha indicado nada en relación con el flujo de ejecución de un programa, parece natural que se entienda que las instrucciones se ejecutan en el orden en el que aparecen escritas al igual que un texto las líneas se leen de arriba hacia abajo. Sin embargo este flujo de ejecución hace que todas las instrucciones se tengan que ejecutar y siempre se hagan en el mismo orden. Esta característica de ejecución ordenada y lineal de un programa recibe el nombre de estructura de ejecución secuencial. Sin embargo, los lenguajes de programación incluyen otras estructuras de ejecución adicionales como son la estructura alternativa (con diferentes variantes: simple, doble o múltiple) y la estructura de ejecución cíclica o repetitiva.
En definitiva, el objetivo es disponer de mecanismos para que el flujo de ejecución de un programa pueda alterar el esquema secuencial natural, incorporando fragmentos de código que se ejecutan si se cumplen determinadas condiciones o bien haciendo que un conjunto de instrucciones se ejecuten un número determinado de veces antes de continuar con la ejecución del resto. Estas estructuras de control de flujo han dado lugar al paradigma de programación estructurado. Básico en el ámbito de gran parte de lenguajes de programación de carácter procedimental.
3.2 - ESTRUCTURA ALTERNATIVA SIMPLE: IF
La estructura alternativa simple permite establecer que un conjunto de instrucciones se ejecuten si se cumple una condición lógica. La sintaxis es la siguiente:
if(condicion) { instrucciones; }
Si la condición se cumple (es decir, si su valor es true) se ejecutan las instrucciones que se encuentran dentro del bloque delimitado por llaves {...} y a continuación se sigue con el flujo normal, ejecutando las instrucciones posteriores a la llave de cierre. Si la condición es false entonces el flujo de ejecución “salta” las instrucciones del bloque encerrado entre llaves y continua con las que se encuentran tras la llave de cierre. En el ejemplo, la variable saludar es creada e inicializada con el valor true. Cuando el flujo de ejecución llega a la instrucción if, se evalúa su valor y al ser igual a true se ejecuta la función alert mostrando en pantalla una ventana con el mensaje. Si se modifica la primera línea asignado false a la variable saludar se observará que el mensaje “Hola Mundo” no aparece. En ambos casos, se mostrará al final la ventana de alerta con el mensaje “Fin”.
var saludar = true; if(saludar == true) { alert("Hola Mundo"); } alert (“Fin”); ¿? false true instrucciones
