Fundamentos de la Interacción
Persona-Ordenador
7. JavaScript
Luis Rodríguez Baena (
[email protected])
Universidad Pontificia de Salamanca
Escuela Superior de Ingeniería y Arquitectura
Introducción
Javascript es un lenguaje de script multiplataforma y
orientado a objetos.
Es un lenguaje interpretado, pequeño y ligero.
● No es demasiado útil como lenguaje independiente.
● Está diseñado para ser incrustado en otros productos y aplicaciones.
Adobe Acrobat, Flash y Flex (poseen un lenguaje ActionScript que es un
dialecto de JavaScript), Photoshop, navegadores web, etc.
Como lenguaje para la web se puede utilizar tanto del lado
del cliente como del servidor.
● En el lado del cliente proporciona objetos para el control del
navegador y el Modelo de Objeto del Document (DOM).
Permite manejar los elementos de un formulario para la verificación,
responder a eventos del usuario para realizar acciones con los elementos
xhtml, elementos del formulario, comportamiento del navegador, etc.
● En el lado del servidor proporciona objetos interesantes para el
manejo de un servidor web.
Conexión con bases de datos, manipulación de archivos en el servidor, etc.
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2013
2
Introducción (II)
Posee una sintaxis similar a otros lenguajes como C,
C++ o Java.
● Algunas diferencias básicas:
Es un lenguaje poco tipeado.
○ No es necesaria la declaración de variables ni asignarlas un tipo de forma
explícita.
− Al declarar una variable no hay que indicar su tipo, por lo que una variable
puede almacenar distintos tipos de datos durante la ejecución del script.
No es necesario terminar cada sentencia con un punto y coma.
○ Es conveniente hacerlo.
Limitaciones.
● Con ellas sólo se pueden ejecutar scripts en un entorno limitado
para permitir a los usuarios confiar en su ejecución.
Los scripts no pueden comunicarse con otros recursos que pertenezcan a
otro dominio desde dónde se descargó.
No pueden cerrar ventanas que ellos no hayan abierto.
No pueden acceder al sistema de archivos local.
No pueden leer o modificar las preferencias del navegador.
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2013
3
Introducción
Historia
Se crea para evitar tener que conectarse con un servidor para que
las páginas web tengan que hacer algunas tareas.
● Permite delegar la ejecución de programas al lado del cliente.
Por ejemplo, la verificación de datos de un formulario.
Se crea en 1995, al salir el navegador Netscape 2.
● Inicialmente, Netscape lo llamó LiveScript.
● La alianza con Sun Microsistems rebautizó el lenguaje para llamarlo
JavaScript.
No tiene que ver con Java: es una cuestión de marketing.
Poco después Microsoft saca su versión JScript.
● Para evitar incompatibilidades, Netscape decide llevar el lenguaje a la ECMA
(European Computer Manufacturers Association) para su estandarización.
Nace el lenguaje ECMAScript.
○ JavaScript es la implementación de Netscape para ECAMScript.
La versión soportada actualmente por los navegadores el Javascript
1.8, compatible con ECMAScript 5ª edición).
● La última edición de ECMAScript es la 5.1 de junio de 2011 (www.ecma-
international.org/publications/files/ECMA-ST/Ecma-262.pdf)
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2013
4
Introducción
Introducir JavaScript en xhtml
JavaScript dentro de un documento.
● Las etiquetas <script></script> deben encerrar el código JavaScript.
● Se puede incluir en cualquier parte del documento.
Lo normal es agrupar todas las funciones dentro del elemento <head>.
● La etiqueta debe incluir el atributo type="text/javascript".
● Puede que sea necesario incluir el código dentro de una sección CDATA.
En caso contrario el símbolo < se interpretará como el comienzo de una etiqueta.
Como CDATA no forma parte de JavaScript, se debe incluir como comentario (//).
<script type="text/javascript">
//<![CDATA[
/* Código JavaScript
...
*/
//]]>
</script>
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2013
5
Introducción
Introducir JavaScript en xhtml (II)
JavaScript en un documento externo.
● Incluir JavaScript en el documento…
Retarda la carga del documento si existe mucho código.
Si el script cambia, obliga a modificar todas las páginas que lo utilizan.
● El atributo src de la etiqueta <script> permite hacer referencia a un
archivo de texto con extensión .js que contiene el código.
● La etiqueta <script> requiere siempre una etiqueta de cierre </script>.
<script type="text/javascript" src="PrimerJavaScript.js">
</script>
● Es recomendable en estos casos colocar la llamada justo antes de </body>.
De esta forma primero se procesa la página y, una vez procesada se procede
a la carga del script.
JavaScript en elementos xhtml.
● Mediante los atributos de evento es posible incluir código JavaScript en
elementos xhtml.
● Este método no es recomendable, ya que ensucia el código xhtml.
<elemento atributoDeEvento="código javascript">
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2013
6
Introducción
Introducir JavaScript en xhtml (III)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN“
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>PrimerJavaSript</title>
<!-- JavaScript en la sección head del documento -->
<script type="text/javascript">
//<![CDATA[
alert("Hola, mundo! (de la sección head)");
//]]> </script>
<!-- JavaScript en un archivo externo -->
<script type="text/javascript" src="PrimerJavaScript.js"></script>
</head>
<body>
<!-- JavaScript en el cuerpo del documento -->
<script type="text/javascript">
//<![CDATA[
alert("Hola, mundo! (de la sección body)");
//]]>
</script>
<!-- JavaScript en un elemento xhtml –->
<p onclick="alert('Hola, mundo! (al hacer clic)');">Si está activado
JavaScript, al hacer clic aquí aparecería un mensaje.</p>
<noscript>
<p>Si no está activado aparecería esta línea.</p>
</noscript>
</body>
</html>
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2013
7
Introducción
Introducir JavaScript en xhtml (IV)
Hay que tener en cuenta que no todos los agentes de usuario
soportan JavaScript y el usuario puede que lo tenga
desactivado.
El script no podrá ejecutarse, quitando funcionalidad a la página.
En estos casos es posible insertar código xhtml que se
visualizará sólo cuando JavaScript no se pueda ejecutar.
● El código xhtml se encerrará dentro de la etiqueta
<noscript></noscript>.
En el peor de sus usos se mostrará un mensaje que indique la
necesidad de que el usuario active los scripts.
● Si queremos que la página sea usable y accesible, la funcionalidad
básica debería mantenerse sin necesidad de JavaScript mediante
métodos alternativos, como por ejemplo:
Si no se puede hacer la validación de datos en el cliente, se deberá habilitar
un sistema alternativo de validación en el servidor.
Si se utilizan menús en cascada basados en JavaScript u otros elementos
como calendarios, hay que aportar algún sistema de navegación o de
selección alternativo entro de la etiqueta <noscript>.
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2013
8
Elementos del lenguaje
Tipos de datos
Numéricos.
● No hace distinción entre datos reales o enteros.
Lógicos.
● Puede tomar los valores true o false.
undefined.
● Representa el contenido de una variable a la que no se le ha asignado un valor.
null.
● Representa el contenido de un objeto no instanciado.
Cadenas.
● Como separador puede utilizar tanto las comillas simples como las dobles.
● Puede incluir las secuencias de escape…
Secuencia Significado
Secuencia Significado
\n
\t
\'
\"
\\
Nueva línea
Tabulador
\r
\b
Retorno de carro
Retroceso (backspace)
Comilla simple
\nnn
Carácter Unicode nnn en octal
Comilla doble
\xnn
Carácter Unicode nn hexadecimal
Barra inclinada \xnnnn
Carácter Unicode nnnn hexadecimal
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodríguez Baena, 2013
9
Elementos del lenguaje
Variables y constantes
Se nombran mediante un identificador.
● Un identificador JavaScript puede incluir caracteres Unicode alfabéticos, dígitos, el guión
bajo, el signo de dólar o una secuencia de escape Unicode de un carácter alfabético
(\uxxx).
● Debe comenzar con un carácter alfabético, guión bajo o dólar.
● El lenguaje es sensible a mayúsculas.
Declaración.
● Declaración explícita.
var identificador [= expresión de inicialización]
var precio = 0;
var ciudad = "Madrid";
● Declaración implícita.
Asignando directamente un valor a un identificador.
identificador = expresión de inicialización
precio = 0;
ciudad = "Madrid";
La declaración implícita declara siempre variables globales.
El interprete JavaScript genera una advertencia.
No es recomendable.
● La declaración use strict de la versión 1.8.5 obliga a hacer una declaración
explícita.
Universidad Pontificia de Salamanca. Escuela Superior de Ingeniería y Arquitectura
(CC) Luis Rodrígue
Crear cuenta
Comentarios de: 7. JavaScript - Fundamentos de la Interacción Persona-Ordenador (0)
No hay comentarios