Análisis y Diseño de Sistemas de
I f
Información para Internet
ió
I
3 JavaScript
3. JavaScript
Luís Rodríguez Baena (
[email protected])
Universidad Pontificia de Salamanca (campus Madrid)
Facultad de Informática
Introducción
Javascript es un lenguaje de script multiplataforma y orientado a
objetos
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.
y p
p
p
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
formulario, comportamiento del navegador, etc.
● En el lado del servidor proporciona objetos interesantes para el manejo del
servidor.
Conexión con bases de datos, manipulación de archivos en el servidor, etc.
Universidad Pontificia de Salamanca (Campus Madrid)
Luis Rodríguez Baena, Facultad de Informática, 2009
2
Introducción (II)
Posee una sintaxis similar a otros lenguajes como C, C++ o
JJava.
● Algunas diferencias básicas:
Es un lenguaje poco tipeado.
o No es necesaria la declaración de variables ni darlas un tipo de forma
p
explícita.
– Al declarar una variable no hay que indicar su tipo, por lo que una variable puede
almacenar distintos tipos de datos en una variable durante la ejecución del script.
No es necesario terminar cada sentencia con un punto y coma.
o Es conveniente hacerlo
o Es conveniente hacerlo.
Limitaciones.
● Los scripts no pueden comunicarse con otro con 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 (Campus Madrid)
Luis Rodríguez Baena, Facultad de Informática, 2009
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
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.
i
I i
● Inicialmente, Netscape lo llamó LiveScript.
ó Li S i t
● La alianza con Sun Microsistems rebautizó el lenguaje para llamarlo JavaScript.
t N t
ll
l
l
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
l ECMA
P
(EuropeanComputerManufacturersAssociation) para su estandarización.
d id ll
tibilid d
N t
l l
it
j
i
Nace el lenguaje ECMAScript.
o JavaScript es la implementación de Netscape para ECAMScript.
La versión soportada actualmente por los navegadores el Javascript 1.5, compatible
p
p
g
p
p
,
con ECMAScript 3ª edición).
● Actualmente está preparada la salida de Javascript 2.0 (compatible con
ECMAScript 5ª edición).
Universidad Pontificia de Salamanca (Campus Madrid)
Luis Rodríguez Baena, Facultad de Informática, 2009
4
Introducción
Introducir Javascript en xhtml
p
JavaScript dentro de un documento.
ti
t
L
/
i t
● Las etiquetas <script></script> deben encerrar el código JavaScript.
S i t
● Se puede incluir en cualquier parte del documento.
Lo normal es agrupar todas las funciones dentre el 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
● Puede que sea necesario incluir el código dentro de una sección CDATA.
i t d b
l ódi
J
En caso contrario el simbolo < se interpretará como el comienzo de una etiqueta.
Como CDATA no forma parte de JavaScript, se debe incluir como comentario (//).
etiqueta <script> dentro de comentarios xhtml.
● Para compatibilidad con versiones antiguas del navegador, se suele encerrar la
p
q
<!--
<script type="text/javascript">
//<![CDATA[
/* Código JavaScript
*/
...
//]]>
</script>
</script>
-->
Universidad Pontificia de Salamanca (Campus Madrid)
Luis Rodríguez Baena, Facultad de Informática, 2009
5
Introducción
Introducir Javascript en xhtml (II)
)
p
(
JavaScript en un documento externo.
l d
t
I
i J
S i t
● Incluir JavaScript en el documento…
l
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
● La etiqueta <script> requiere siempre una etiqueta de cierre
archivo de texto con extensión js que contiene el código
archivo de texto con extensión .js que contiene el código.
</script>.
i
<script type="text/javascript" src="PrimerJavaScript.js">
j "
</script>
i "
" i
"
/j
i
JavaScript en elementos xhtml.
● Mediante los atributos de evento es posible incluir código JavaScript en
i código Ja aSc ipt en
Mediante los at ib tos de e ento es posible incl
elementos xhtml.
● Este método no es recomendable, ya que ensucia el código xhtml.
<elemento atrib toDeE ento "código ja ascript">
<elemento atributoDeEvento="código javascript">
Universidad Pontificia de Salamanca (Campus Madrid)
Luis Rodríguez Baena, Facultad de Informática, 2009
6
Introducción
Introducir Javascript en xhtml (III)
)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN“
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
p
(
<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[
//]]> </script>
<!-- JavaScript en un archivo externo -->
<script type="text/javascript" src="PrimerJavaScript.js"></script>
alert("Hola, mundo! (de la sección head)");
alert("Hola, mundo! (de la sección body)");
<!-- JavaScript en el cuerpo del documento -->
<script type="text/javascript">
//<![CDATA[
//]]>
</script>
</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>
</noscript>
</head>
<body>y
</body>
</html>
Universidad Pontificia de Salamanca (Campus Madrid)
Luis Rodríguez Baena, Facultad de Informática, 2009
7
Introducción
Introducir Javascript en xhtml (IV)
)
p
(
No todos los agentes de usuario soportan JavaScript y el usuario
puede que lo tenga desactivado
puede que lo tenga desactivado.
En estos casos, el script no podrá ejecutarse, quitando funcionalidad
a la página.
En estos casos es posible insertar código xhtml que se visualizará
ua a á
ód go
po b
a o
qu
o
a
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
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:
p
p
,
j
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>.
alternativo entro de la etiqueta noscript .
Universidad Pontificia de Salamanca (Campus Madrid)
Luis Rodríguez Baena, Facultad de Informática, 2009
8
Elementos del lenguaje
Tipos de datos
p
● No hace distinción entre datos reales o enteros
● No hace distinción entre datos reales o enteros.
● Puede tomar los valores true o false.
● Representa el contenido de una variable a la que no se le ha asignado un valor.
Numéricos.
Lógicos.
undefined.
null.
Cadenas.
● Representa el contenido de un objeto no instanciado.
● Como separador puede utilizar tanto las comillas simples como las dobles.
● Puede incluir las secuencias de escape…p
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
Universidad Pontificia de Salamanca (Campus Madrid)
Comilla doble
Luis Rodríguez Baena, Facultad de Informática, 2009
\"
\xnn
Carácter Unicode nn hexadecimal
9
Elementos del lenguaje
Variables y constantes
a a es y co s a es
Se identifican mediante un identificador.
J
d i
l
i
t
● Un identificador JavaScript puede incluir caracteres Unicode alfabéticos, dígitos,
U id tifi d
dí
S i t
el guión bajo, el signo de dólar o una secuencia de escape Unicode de un
carácter alfabético (\uxxx).
U i d
lf béti
it
● Debe comenzar con un carácter alfabético, guión bajo o dólar.
Declaración
Declaración.
● De
Crear cuenta
Comentarios de: 3. Javascript (0)
No hay comentarios