JavaScript
Aplicaciones Web/Sistemas Web
Juan Pavón Mestras
Dep. Ingeniería del Software e Inteligencia Artificial
Facultad de Informática
Universidad Complutense Madrid
Material bajo licencia Creative Commons
JavaScript
Lenguaje de script (guión: secuencia de instrucciones) para la
creación de páginas web dinámicas
Crear visualizaciones más atractivas y mayor interactividad
Permite gestionar diferencias de implementación entre los distintos
navegadores
Lenguaje interpretado (no se compila)
El navegador se encarga de interpretar y ejecutar el código JavaScript
JavaScript NO es Java
Basa su sintaxis en C
Múltiples frameworks
jQuery, Mootols, etc.
JSON (Javascript Object Notation) para transmisión de datos
Ajax
Integración con el objeto Canvas de HTML5
JavaScript en el servidor (tendencia en auge):
Node.js, Jaxer, EJScript, RingoJS, AppengineJS
Juan Pavón - UCM 2012-13
JavaScript
2
Seguridad de JavaScript
Por seguridad, los scripts solo se pueden ejecutar dentro del
navegador y con ciertas limitaciones:
No pueden comunicarse con recursos que no pertenezcan al mismo
dominio desde el que se descargó el script
No pueden cerrar ventanas que no hayan abierto esos mismos scripts
No pueden acceder al sistema de ficheros, ni para leer ni para escribir
No pueden acceder a las preferencias del navegador
Si la ejecución de un script dura demasiado tiempo el navegador
informa al usuario de que el script está consumiendo demasiados
recursos y le da la posibilidad de detener su ejecución
• Esto podría ocurrir por un error de programación del script o alguno
malicioso
Es posible firmar digitalmente los scripts para que el usuario
permita realizar algunas de esas acciones
Juan Pavón - UCM 2012-13
JavaScript
Historia de JavaScript
LiveScript (Brendan Eich, 1995): lenguaje de script para
Netscape Navigator 2.0
JavaScript: acuerdo entre Netscape y Sun
Estandarización
ECMA-262 – ECMAScript Language Specification (1997)
• Actualmente, versión 5.1 (2011)
Adoptado por ISO como ISO/IEC 16262
Variantes
Microsoft: JScript
Firefox: JavaScript
Chrome: JavaScript
Opera: ECMAScript
AdobeFlash: ActionScript 3
Juan Pavón - UCM 2012-13
JavaScript
3
4
Inclusión de JavaScript en documentos XHTML
Código JavaScript en el documento XHTML
Con etiquetas <script> en cualquier parte del documento
• Pero se recomienda ponerlo en la parte de cabecera <head>
<head>
...
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
</head>
En un archivo externo (extensión .js)
• Más fácil para compartir código en varios documentos
<script type="text/javascript" src="/js/codigo.js"></script>
• El fichero codigo.js tendría el código:
alert("Un mensaje de prueba");
Dentro de los elementos (generalmente para manejar eventos o para
escribir código dentro de la página). Es menos mantenible
<input type="button" value="Pulse este botón"
onclick="alert('¡Has pulsado el botón!');">
Juan Pavón - UCM 2012-13
JavaScript
Cuando el navegador no soporta JavaScript
La etiqueta <noscript> permite definir qué texto proporcionar al
usuario cuando el navegador no soporta o no tiene activado
JavaScript
Esta etiqueta tiene que ir dentro del <body>
<body>
<noscript>
</noscript>
<p>
Esta página requiere JavaScript para su correcto funcionamiento.
Compruebe si JavaScript está deshabilitado en el navegador.
</p>
<p>Texto del documento</p>
</body>
Juan Pavón - UCM 2012-13
JavaScript
5
6
Cuando el navegador no soporta JavaScript
El código de los scripts se suele poner dentro de comentarios
Para evitar problemas con navegadores antiguos
O bien si el usuario ha desactivado JavaScript
XHTML
<script language="JavaScript" type="text/javascript"><![CDATA[
<!‐‐
...
//‐‐>]]></script>
HTML
<script language="JavaScript" type="text/javascript">
<!‐‐
...
//‐‐>
</script>
el fin del comentario HTML va en un comentario de línea JavaScript
Juan Pavón - UCM 2012-13
JavaScript
Ejercicio
Escribir el siguiente script y ejecutarlo en el navegador
Probar a desactivar JavaScript en el navegador y ver qué ocurre
Poner el script en un fichero holamundo.js y probar a importarlo
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http‐equiv="Content‐Type" content="text/html; charset=utf‐8" />
<title>El script Hola Mundo</title>
<script type="text/javascript">
alert("Hola Mundo!");
</script>
</head>
<body>
<noscript><p>Esta página requiere JavaScript para su correcto funcionamiento.
Compruebe si JavaScript está deshabilitado en el navegador.</p>
</noscript>
<p>Un script con la frase más famosa de la programación.</p>
</body>
</html>
Juan Pavón - UCM 2012-13
JavaScript
7
8
Ejercicio
Se puede probar a incluir un texto en el código HTML con
document.write("texto")
Más habitual que sacar ventanas de diálogo
Probar el siguiente código
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http‐equiv="Content‐Type" content="text/html; charset=utf‐8" />
<title>El script Hola Mundo</title>
</head>
<body>
<noscript><p>Esta página requiere JavaScript para su correcto funcionamiento.
Compruebe si JavaScript está deshabilitado en el navegador.</p>
</noscript>
<p>Un script con la frase más famosa de la programación.</p>
<script>document.write("Hola Mundo!"); </script>
</body>
</html>
Juan Pavón - UCM 2012-13
JavaScript
9
JavaScript
Elementos del lenguaje JavaScript
Sintaxis de JavaScript
Javascript distingue entre mayúsculas y minúsculas
while (correcto)
While, WHILE (incorrectos)
Javascript ignora espacios en blanco, tabuladores y saltos de
línea entre tokens
token: palabra reservada, número, string, nombre de función, …
Conviene utilizar sangrado para que los scripts sean más legibles
El uso de ; al final de cada instrucción es opcional (aunque
recomendable)
return
true
return;
true;
Comentarios como en Java
Comentario de varias líneas entre /* y */
Comentario hasta el final de la línea con // comentario
Juan Pavón - UCM 2012-13
JavaScript
11
Identificadores
Similar a C/Java:
Deben comenzar por una letra o por '_'
Pueden contener letras, dígitos y '_'
No pueden coincidir con las palabras reservadas
Palabras reservadas de JavaScript
break
case, catch, continue
default, delete, do
else
finally, for, function
if, in, instanceof
new
return
switch
this, throw, try, typeof
var, void
while, with
Juan Pavón - UCM 2012-13
JavaScript
12
Literales
Números
Internamente las operaciones se realizan en punto flotante
Representación:
• Enteros: 0, ‐1, 44, ...
• Decimales (float): 0.20, 3.1415, ‐3.23e+6
• Hexadecimal, empiezan por 0x: 0xFF, 0x1A
Valores lógicos (Booleanos)
true y false
Strings
Secuencia de caracteres entre comillas dobles " o simples '
• "Esto es un String"
• <a onclick="alert('Has pulsado el enlace')">...</a>
Secuencias de escape, para representar caracteres especiales:
• \' Comilla simple
• \b Retroceso
• \n Salto de línea
• \\ Barra inclinada \
\" Comilla doble
\f Salto de página
\t Tabulación
Juan Pavón - UCM 2012-13
JavaScript
13
Variables
JavaScript es un lenguaje débilmente tipado
No se especifica el tipo de las variables
Se deduce por el contenido de la variable y el contexto
Para declarar una variable se usa la palabra reservada var
seguida por una lista de nombres de variables a declarar
separadas por ,
El nombre de una variable puede estar formado por letras, números y
los símbolos $ (dólar) y _ (guión bajo)
• El primer carácter no puede ser un número
var variable1, $variable, _tmp;
var x = 1;
var y = 2;
z = x + y;
// z no está declarada pero al usarla por primera vez
// se crea como variable global
Para dejar una variable indefinida se le asigna el valor null
indefinida = null;
Juan Pavón - UCM 2012-13
JavaScript
14
Expresiones
Asignación
Guarda un valor específico en una variable
var x = 0;
Expresiones numéricas
Operadores aritméticos:
• + , ++, -, --, *, /, % (módulo)
• +=, -=, *=, /=, ^= (exponenciación), %=
Expresiones lógicas
Operadores lógicos: && (and), || (or), ! (not)
Juan Pavón - UCM 2012-13
JavaScript
15
Expresiones
Expresiones de comparación
Operadores relacionales: ==, !=, >, <, >=, <=, ===, !==
Conversión automática de tipos en las comparaciones
• JavaScript realiza conversiones automáticas entre tipos para llevar a
cabo la comparación cuando sea necesario
• Si un operando es una cadena y el otro un número, se intenta convertir la
cadena a número. Si no se puede convertir la comparación devuelve false
• Si uno de los operandos es un booleano y el otro un número se convierte el
booleano a número (true 1, false 0)
• Comparación estricta (===, !==): no se realiza conversión alguna
Reglas de precedencia de operadores
• () [] . (el operador punto sirve para los objetos)
• ! - ++ --
• * / %
• +-
• << >> >>> (desplazamientos a nivel de bit)
• < <= > >=
• == !=
• & ^ | (lógicos a nivel de bit)
• && || (lógicos boleanos)
• = += -= *= /= %= <<= >>= >>>= &= ^= != (asignación)
Juan Pavón - UCM 2012-13
JavaScript
16
Control de flujo
Instrucciones condicionales
if
if ( condición ) {
// Instrucciones
}
else {
// Instrucciones
}
// 0, "" y null equivalen a false
switch
switch ( expresión ) { // La expresión devuelve un numero,
// un valor lógico o un string
case valor1:
case valor2:
// Instrucciones caso 1
break;
// para acabar el switch
// Instrucciones caso 2
break;
default: // opcional
// Instrucciones si no se diera ningún caso
}
Juan Pavón - UCM 2012-13
JavaScript
17
Ejercicio
Realizar una página con un script que calcule el valor de la let
Crear cuenta
Comentarios de: JavaScript - Aplicaciones Web/Sistemas Web (0)
No hay comentarios