escuela técnica superior
de ingeniería
informática
V e rs ió n o ri g in a l: A m a d o r D u rá n , D a v id B e n a v id e s y P a b lo F e rn a n d e z (n o v ie m b re 2 0 0 6 ) M a n u e l R e s in a s ( n o v ie m b re 2 0 0 7 ); R e e s tr u c tu ra c ió n d e c o n te n id o . Ú lt im a r e v is ió n : M a n u e l R e s in a s ( o c tu b re 2 0 1 0 ); C a m b io s m e n o re s d e f o rm a to .Tema 5
Tema 5 -- JavaScript
JavaScript
Departamento de
Departamento de
Lenguajes y Sistemas Informáticos
Lenguajes y Sistemas Informáticos
V e rs ió n o ri g in a l: A m a d o r D u rá n , D a v id B e n a v id e s y P a b lo M a n u e l R e s in a s ( n o v ie m b re 2 0 0 7 ); R e e s tr u c tu ra c ió n d e c o n te n id o . Ú lt im a r e v is ió n : M a n u e l R e s in a s ( o c tu b re 2 0 1 0 ); C a m b io s m e n o re s d e f o rm a to .
Grupo de Ingeniería del Software
Grupo de Ingeniería del Software
Octubre 2010
Octubre 2010
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Características principales de
Características principales de JavaScript
JavaScript
– Es un lenguaje interpretado (
script
), no compilado
– Es un lenguaje basado en objetos
– No es Java, aunque su sintaxis es similar
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.1
4.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Comentarios en
Comentarios en JavaScript
JavaScript
//
Comentario de una línea
/*
Comentario de varias líneas
igual que en Java
*/
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
– Pueden ser de una sola línea o de varias líneas, con
la misma sintaxis que en Java o en C++.
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Tipos básicos en
Tipos básicos en JavaScript
JavaScript
–
– Cadenas
Cadenas: "¡Hola, mundo!", 'epi@barriosesamo.es'
–
– Números
Números: 12, 22.4, -5
–
– Booleanos
Booleanos: true, false
•
• Constantes de cadenas
Constantes de cadenas
– "El JavaScript es 'guay'."
– "Se debe tener cuidado con las comillas'
– '¿Se puede poner <h1>HTML</h1>?'
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
– '¿Se puede poner <h1>HTML</h1>?'
– "¿Se puede usar la barra: \\ ?"
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Declaración de variables en JavaScript
Declaración de variables en JavaScript
– JavaScript es sensible a las mayúsculas y las
minúsculas, por lo que una variable
nombre
no es la
misma que otra
Nombre.
– No es obligatorio declarar las variables, pero se
recomienda.
var
var notaABD;
notaABD = 10;
//
Sin declaración explícita
notaABD = 10;
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
•
• Inicialización de variables
Inicialización de variables
var
var nPract = 10, nTeoria = 10;
var
var nTotal = (nPract*0.4)
+ (nTeoria*0.6);
var
var notaABD;
notaABD = 10;
NO RECOMENDABLE
NO RECOMENDABLE
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Expresiones condicionales
Expresiones condicionales
if
if (condición) {
{
/*
Código ejecutado si la
condición es cierta
*/
}
}
else {
else {
/*
Código ejecutado si la
condición es falsa */
}
}
while
while (condición) {
{
/*
Se ejecuta mientras la
condición sea cierta
*/
}
}
do {
do {
/*
Se ejecuta mientras la
condición sea cierta
*/
} while
} while (condición)
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
•
• Ejemplos de condición
Ejemplos de condición
((aprobareABD
aprobareABD))
((noInicializada
noInicializada))
((notaABD
notaABD >= 5)
>= 5)
((notaABD
notaABD == 5)
== 5)
} while
} while (condición)
var
var aprobareABD;
var
var noInicializada;
var
var notaABD = 10;
aprobareABD = true
true;
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Estructuras de control en JavaScript
Estructuras de control en JavaScript
– Tienen la misma sintaxis que en Java y C++.
switch
switch (expresión) {
{
case
case etiq1 :
//
bloque1
break;
break;
case
case etiq2 :
//
bloque2
break;
break;
if
if (condición) {
{
//
bloque if
}
}
else {
else {
//
bloque else
}
}
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
...
default :
default :
//
bloquen
}
}
for
for (i=0; i<=N; i++) {
{
//
bloque for
}
}
while
while (condición) {
{
//
bloque while
}
}
do {
do {
//
bloque do
} while
} while (condición)
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Funciones en JavaScript
Funciones en JavaScript
– Si no existe
return
return
o bien no se devuelve nada la
función devuelve una variable
undefined.
function
function nombre_función( argumentos )
{
{
var
var variable_local = valor_inicial;
//
código función
return
return (expresión_devuelta);
}
}
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
– Existen tres funciones predefinidas muy útiles para
la validación de formularios que son:
•
• parseInt
parseInt: convierte una cadena en un entero.
•
• parseFloat
parseFloat: convierte una cadena en un real.
•
• isNaN
isNaN: es cierta si el argumento no es un número.
parseInt( "456" ) == 456;
//
true
parseFloat( "1.34" ) == 1.34; //
true
isNaN( parseInt( "uno" ) );
//
true
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Clases en
Clases en JavaScript
JavaScript
– Las clases establecen categorías de objetos.
– Por ejemplo: Coche, Persona, String, …
•
• Objetos en
Objetos en JavaScript
JavaScript
– Un objeto representa una instancia de una clase.
– Por ejemplo: Juan y Luis son objetos de la clase
Persona.
var
var juan = new
new Persona();
var
var luis = new
new Persona();
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.1
4.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
– Son
arrays asociativos
a los que pueden añadirse
propiedades o funciones (métodos) dinámicamente.
– A las propiedades se accede mediante el operador
punto o mediante los corchetes:
objeto.propiedad
objeto["propiedad"]
– A los métodos se accede mediante el operador
punto con paréntesis:
objeto.método( parámetros )
var
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Existen varias clases predefinidas en JavaScript
Existen varias clases predefinidas en JavaScript
– Las que más se suelen usar son: Array
Array, Boolean
Boolean,
Math
Math, Date
Date, Number
Number, Object
Object y String
String.
– Se pueden usar para crear objetos, por ejemplo:
var
var cadena, cadena2;
cadena = new
new String("Soy una cadena");
cadena2 = cadena.toUpperCase();
//
cadena2 = "SOY UNA CADENA"
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.1
4.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
– O también de forma
estática
:
//
cadena2 = "SOY UNA CADENA"
var
var cadena;
cadena = String("Estatico").toUpperCase();
//
cadena = "ESTATICO"
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Propiedades
Propiedades
– length: longitud de la cadena.
•
• Métodos
Métodos
– big(): para poner la fuente más grande
– bold(): para ponerla en negrita
– charAt(n): devuelve el carácter colocado en la
posición
n
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
– match(c) : dice si la subcadena c pertenece a la
cadena
– substring(x,y): devuelve la subcadena que va de
x
a
y
inclusive (las cadenas empiezan en 0)
– toLowerCase(): convierte a mayúsculas
– toUpperCase(): convierte a minúsculas
– valueOf() : devuelve el valor de tipo string
(importante a la hora de comparar cadenas)
– toString(): convierte un objeto en una cadena
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Clases predefinidas: Math
Clases predefinidas: Math
•
• Métodos
Métodos
– abs(número): función valor absoluto
– max(x,y): devuelve el máximo de
x
e
y
– min(x,y): devuelve el mínimo de
x
e
y
– pow(base, exp): potencia
– random(): devuelve un número aleatorio en [0,1]
– round(número): redondea al entero más cercano
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
– round(número): redondea al entero más cercano
– sin(número): función seno
– sqrt(número): función raíz cuadrada
– tan(número): función tangente
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Clases predefinidas: Array
Clases predefinidas: Array
•
• Propiedades
Propiedades
– length: longitud del array
•
• Métodos
Métodos
– join(): agrupa los elementos separándolos por
comas
– reverse(): invierte el orden de los elementos
– sort(): ordena los elementos del array
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.1
4.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
– sort(): ordena los elementos del array
– ¿Array de 3 filas y 6 columnas?
a = new Array
new Array (25); //
crea un array de 25 elementos
a = new Array
new Array (1,"abd",true); //
un array con tres posiciones
a = new Array
new Array ("cadena"); //
un array con una cadena
a = new Array
new Array (false
false); //
array con el elemento false
a = new Array
new Array (3);
for
for (i=0;i<3;i++) a[i]= new Array
new Array (6);
//
acceso al array a[i][j]
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Clases predefinidas: Date
Clases predefinidas: Date
•
• Métodos
Métodos
– getDate(): devuelve el día del mes actual como un
entero entre 1 y 31
– getDay(): devuelve el día de la semana actual como
un entero entre 0 y 6
– getHours(): devuelve la hora del día actual como un
entero entre 0 y 23.
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
– getMinutes(): devuelve los minutos de la hora
actual como un entero entre 0 y 59.
– getMonth(): devuelve el mes del año actual como
un entero entre 0 y 11.
– getSeconds(): devuelve los segundos del minuto
actual como un entero entre 0 y 59.
– getTime(): devuelve el tiempo transcurrido en
milisegundos desde el 1 de enero de 1970 hasta el
momento actual
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Clases predefinidas: Date
Clases predefinidas: Date
•
• Métodos
Métodos
– getYear(): devuelve el año actual como un entero
– setDate(día_mes): pone el día del mes actual en el
objeto Date que estemos usando
– toGMTString(): devuelve una cadena que usa las
convenciones de Internet con la zona horaria GMT
var
var f = new Date
new Date ();
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.1
4.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
var
var f = new Date
new Date ();
var
var f = new Date
new Date (año, mes);
var
var f = new Date
new Date (año, mes, día);
var
var f = new Date
new Date (año, mes, día, horas);
var
var f = new Date
new Date (año, mes, día, horas, minutos);
var
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Clases predefinidas: Date
Clases predefinidas: Date
function
function diaDeLaSemana()
{
{
var
var hoy = new
new Date();
var
var dia;
switch
switch ( hoy.getDay() ) {
{
case
case 0: dia = "Domingo";
break
break;
case
case 1: dia = "Lunes";
break
break;
case
case 2: dia = "Martes";
break
break;
case
case 3: dia = "Miércoles";
break
break;
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.1
4.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
case
case 3: dia = "Miércoles";
break
break;
case
case 4: dia = "Jueves";
break
break;
case
case 5: dia = "Viernes";
break
break;
case
case 6: dia = "Sábado";
break
break;
}
}
return
return( dia );
}
}
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• JavaScript
JavaScript es un lenguaje de programación como
es un lenguaje de programación como
cualquier otro y puede utilizarse en diversos
cualquier otro y puede utilizarse en diversos
contextos.
contextos.
•
• Sin embargo, donde su uso está realmente
Sin embargo, donde su uso está realmente
extendido es en la web, donde se utiliza para dar
extendido es en la web, donde se utiliza para dar
dinamismo en las páginas web.
dinamismo en las páginas web.
•
• Cuando se usa en navegadores, están disponibles
Cuando se usa en navegadores, están disponibles
varios objetos predefinidos en
varios objetos predefinidos en JavaScript
JavaScript
– Algunos están asociados con el propio navegador
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
– Algunos están asociados con el propio navegador
(BOM – Browser Object Model)
– Otros están relacionados con la estructura del
documento HTML (DOM) y son accesibles desde el
objeto
document
document
:
window
window.alert(“¡que viene ABD!");
<
<img
img id
id="imgmail" src
src="mail.jpg"/>
/>
document
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• JavaScript en contexto
JavaScript en contexto
http://servidor.com/pagina.html
http://servidor.com/pagina.html
servidor.com
servidor.com
pagina.html
pagina.html
Internet
Internet
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
<html>
<html>
<head>…</head>
<head>…</head>
<body>
<body>
<h1>Página</h1>
<h1>Página</h1>
</body>
</body>
</html>
</html>
pagina.html
pagina.html
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• JavaScript en contexto
JavaScript en contexto
http://servidor.com/pagina.html
http://servidor.com/pagina.html
servidor.com
servidor.com
Internet
Internet
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
Página
<html>
<html>
<head>…</head>
<head>…</head>
<body>
<body>
<h1>Página</h1>
<h1>Página</h1>
</body>
</body>
</html>
</html>
pagina.html
pagina.html
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• JavaScript en contexto
JavaScript en contexto
http://servidor.com/pagina.html
http://servidor.com/pagina.html
servidor.com
servidor.com
pagina.html
pagina.html
Internet
Internet
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
<html>
<html>
<head>…</head>
<head>…</head>
<body>
<body>
<h1>Página</h1>
<h1>Página</h1>
<script>
<script>
document.Write("¡Hola Mundo!");
document.Write("¡Hola Mundo!");
</script>
</script>
</body>
</body>
</html>
</html>
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• JavaScript en contexto
JavaScript en contexto
http://servidor.com/pagina.html
http://servidor.com/pagina.html
servidor.com
servidor.com
Internet
Internet
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
<html>
<html>
<head>…</head>
<head>…</head>
<body>
<body>
<h1>Página</h1>
<h1>Página</h1>
<script>
<script>
document.Write("¡Hola Mundo!");
document.Write("¡Hola Mundo!");
</script>
</script>
</body>
</body>
</html>
</html>
Página
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• JavaScript en contexto
JavaScript en contexto
http://servidor.com/pagina.html
http://servidor.com/pagina.html
servidor.com
servidor.com
Internet
Internet
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
<html>
<html>
<head>…</head>
<head>…</head>
<body>
<body>
<h1>Página</h1>
<h1>Página</h1>
<script>
<script>
document.Write("¡Hola Mundo!");
document.Write("¡Hola Mundo!");
</script>
</script>
</body>
</body>
</html>
</html>
Página
¡Hola Mundo!
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• ¿Dónde colocamos el
¿Dónde colocamos el JavaScript
JavaScript?
?
– En el documento HTML
• Dentro del elemento
head
• Dentro del elemento
body
•
Como gestor de evento onevento="código"
*
•
Como URL de un enlace href="javascript:código"
**
– En un archivo separado
•
• El código
El código JavaScript
JavaScript dentro de un elemento
dentro de un elemento
script
script
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.1
4.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
•
• El código
El código JavaScript
JavaScript dentro de un elemento
dentro de un elemento
script
script
debe ir entre comentarios HTML para evitar
debe ir entre comentarios HTML para evitar
problemas con navegadores antiguos.
problemas con navegadores antiguos.
•
• En XHTML debe ir dentro de una sección
En XHTML debe ir dentro de una sección
CDATA
CDATA
..
•
• ¿En qué orden se ejecuta el código
¿En qué orden se ejecuta el código JavaScript
JavaScript?
?
– El código JavaScript se ejecuta siempre en el orden
en el que aparece en el código HTML.
– Lo habitual dentro del elemento
head
es poner sólo
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Script dentro del documento HTML (
Script dentro del documento HTML (
body
body
))
<html>
<html>
<head>
<head>
<title>
<title>Título del documento</title>
</title>
<!
<!--
--
otra información de cabecera
--
-->
>
</head>
</head>
<body>
<body>
<!
<!--
--
contenido del documento
--
-->
>
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.1
4.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web
5. Bibliografía web
<!
<!--–
–
más contenido del documento
--
-->
>
</body>
</body>
</html>
</html>
<script
<script type="text/javascript"
type="text/javascript">
>
<!
<!--
--//
Código JavaScript
//
//--
-->
>
</script>
</script>
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Script dentro del documento HTML (
Script dentro del documento HTML (
head
head
))
<html>
<html>
<head>
<head>
<title>
<title>Título del documento</title>
</title>
<script
<script type
type="
="text
text//javascript
javascript"">
>
<![CDATA[
<![CDATA[
//
Código JavaScript
]]>
]]>
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
<!
<!--
--
otra información de cabecera
--
-->
>
</head>
</head>
<body>
<body>
<!
<!--
--
contenido del documento
--
-->
>
</body>
</body>
</html>
</html>
]]>
]]>
</script>
</script>
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Script en un archivo separado
Script en un archivo separado
<html>
<html>
<head>
<head>
<title>
<title>Título del documento</title>
</title>
<!
<!--
--
otra información de cabecera
--
-->
>
</head>
</head>
<script
<script type="text/javascript" src="micodigo.js"
type="text/javascript" src="micodigo.js">
>
</script>
</script>
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
</head>
</head>
<body>
<body>
<!
<!--
--
contenido del documento
--
-->
>
</body>
</body>
</html>
</html>
//
Código
//
JavaScript
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Browser
Browser Object
Object Model
Model (BOM)
(BOM)
– window: la ventana del navegador.
– screen: la pantalla.
– navigator: el propio navegador.
– history: la historia de navegación.
– location: la URL de la página actual.
window
navigator
location
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Objetos predefinidos: window
Objetos predefinidos: window
– Representa a la ventana del navegador.
•
• Propiedades
Propiedades
– status: mensaje de la barra de estado
– document: documento HTML visualizado
– history: historial de navegación
– closed: cierto si la ventana está cerrada
– length: número de frames que contiene la ventana
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
– length: número de frames que contiene la ventana
– frames: un array que contiene todos los frames que
tiene la ventana, es decir, devuelve un array de
objetos de tipo Frame
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Objetos predefinidos: window
Objetos predefinidos: window
•
• Métodos
Métodos
– alert(msg): muestra una
ventana con un mensaje
– confirm(msg): muestra una
ventana con un botón de
cancelar y otro de aceptar;
devuelve
true
si se ha pulsado
aceptar y
false
si se ha
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
aceptar y
false
si se ha
pulsado cancelar
– prompt(msg,default): muestra
una ventana de entrada de
datos con un valor por defecto
– open(url,nombre,opt): abre
una nueva ventana del
navegador
– close(): cierra la ventana
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
•
• Objetos predefinidos: navigator
Objetos predefinidos: navigator
– Representa al propio navegador.
•
• Propiedades
Propiedades
– appName: nombre del navegador: Microsoft
Internet Explorer, Mozilla, NetScape, …
– appVersion: versión del navegador: Netscape 5.0
(Windows; es-ES) Microsoft Internet Explorer 4.0
(compatible; MSIE 6.0; Windows NT 5.0)
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.1
4.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
– mimeTypes: un array con los tipos MIME
(
Multipurpose Internet Mail Extensions
) que soporta
el navegador (
Application, Audio, Image, Message,
Multipart, Text, Video
)
– plugins: un array con los
plugins
que tiene instalado
el navegador
– javaEnabled(): devuelve un booleano indicando si
está habilitado el lenguaje Java para los applets
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
– Representa a un marco (frame).
•
• Propiedades
Propiedades
– parent: el marco padre del frame
•
• Objetos predefinidos: location
Objetos predefinidos: location
– Representa a la URL del documento mostrado en
window
•
• Propiedades
Propiedades
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
– host: Contiene el nombre del servidor que ha servido la
página y el número de puerto de la URL
– hostname: nombre del servidor
– pathname: camino sin incluir ni el servidor ni el puerto
– port: puerto
– protocol: protocolo (http, ftp,..)
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
¿Qué es DOM?
¿Qué es DOM?
•
• Pensado para acceder a documentos XML y HTML
Pensado para acceder a documentos XML y HTML
•
• Estándar del W3C (
Estándar del W3C (
http://www.w3.org/DOM/
http://www.w3.org/DOM/
))
•
• También conocido como W3CDOM
También conocido como W3CDOM
•
• Tres niveles:
Tres niveles:
level 1, level 2, level 3
level 1, level 2, level 3
•
• Cada navegador tiene una versión del DOM
Cada navegador tiene una versión del DOM
•
• A partir de la versión 6 de IE (Trident) y los
A partir de la versión 6 de IE (Trident) y los
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.1
4.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
•
• A partir de la versión 6 de IE (Trident) y los
A partir de la versión 6 de IE (Trident) y los
navegadores basados en Gecko (Mozilla, Firefox)
navegadores basados en Gecko (Mozilla, Firefox)
soportan W3CDOM
soportan W3CDOM
Trident
Gecko
KHTML
Presto
iCab
L1
6.0
1.0
Yes
7.0
Yes
L2
Minor
Major
Major
Major
Major
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
El árbol DOM
El árbol DOM
<html>
<html>
<head>
<head>
<title>Menu Cafeta</title>
<title>Menu Cafeta</title>
</head>
</head>
<body>
<body>
<h1>Menu 15
<h1>Menu 15--11
11--06</h1>
06</h1>
Primeros
Primeros
<ul>
<ul>
Menu 15-11-06
Primeros •Pasta •Ensalada Segundos •Lomo •Flamenquin document head title body h1 document head(html)
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
<ul>
<ul>
<li>Pasta</li>
<li>Pasta</li>
<li>Ensalada</li>
<li>Ensalada</li>
</ul>
</ul>
Segundos
Segundos
<ul>
<ul>
<li>Lomo</li>
<li>Lomo</li>
<li>Flamenquin</li>
<li>Flamenquin</li>
</ul>
</ul>
</body>
</body>
</html>
</html>
ul li li head body title ul li”Menu Cafeta”
h1”Menu 15-11-06”
”Primeros”
”Pasta”
li”Ensalada”
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
Nodos DOM
Nodos DOM
document head body title”Menu Cafeta”
h1”Menu 15-11-06”
”Primeros”
(html)
Elementos
body h1 2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web ul li
”Pasta”
li”Ensalada”
Texto
”Primeros”
”Menu 15-11-06”
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
Tipos de Nodo
Tipos de Nodo
•
• Elementos
Elementos
…<div id=“MiDiv”>DOM es fácil</div>…
…<div id=“MiDiv”>DOM es fácil</div>…
Elemento
Elemento
Atributo
Atributo
Texto
Texto
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.1
4.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web
•
• Elementos
Elementos
– Corresponden a una
etiqueta HMTL
•
• Atributos
Atributos
– Permiten acceder a los
atributos de una etiqueta.
•
• Texto
Texto
– Representan cadenas.
div
”DOM es fácil”
”MiDiv”
id
Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Á n g e l U S V 7 ] D is e ñ o : A m a d o r D u rá n T o 1.
1. ¿Qué es JavaScript?¿Qué es JavaScript?
1.1 Comentarios 1.1 Comentarios 1.2 Tipos 1.2 Tipos 1.3 Variables 1.3 Variables 1.4 Funciones 1.4 Funciones 1.5 Estructuras de 1.5 Estructuras de control control 1.6 Condiciones 1.6 Condiciones 1.7 Clases y objetos 1.7 Clases y objetos 1.8 Clases predefinidas 1.8 Clases predefinidas 2. JavaScript y la web 2. JavaScript y la web
Elementos
Elementos
•
• Propiedades
Propiedades
– tagName (
SOLO LECTURA
)
• Contiene el nombre de la etiqueta del elemento
•
• Metodos
Metodos
– getAttribute(n)
• Devuelve el atributo con nombre “n”
IMG
2. JavaScript y la web 2. JavaScript y la web 3. BOM 3. BOM 4. DOM 4. DOM 4.14.1 El Árbol DOMEl Árbol DOM
4.2 Nodos DOM 4.2 Nodos DOM 4.3 Tipos de Nodo 4.3 Tipos de Nodo 4.4 Elementos 4.4 Elementos 4.5 Recorriendo el árbol 4.5 Recorriendo el árbol 4.6 Buscar elementos 4.6 Buscar elementos en el árbol en el árbol 4.7 Modificar el árbol 4.7 Modificar el árbol 4.8 Gestión de eventos 4.8 Gestión de eventos 4.9 HTML DOM 4.9 HTML DOM 5. Bibliografía web 5. Bibliografía web