Javascript1 (Curso)

Javascript
Conceptos Bsicos
Introduccin al lenguaje JavaScript

Elementos del lenguaje
Los operadores
La gramtica
Los objetos
Ejemplos JavaScript
Aplicaciones JavaScript HTML
Javascript
Introduccin al Lenguaje Javascript
Programas
Un programa no es ms que una serie de instrucciones que le damos a un sistema para
que haga cosas, en el caso que nos atae, es decirle al computador cmo hacer una
determinada tarea.
Tipos: Compilados e Interpretados
Compilados: C, Pascal, Java
Se genera un cdigo fuente
Se Compila: Un programa lo traduce al lenguaje interno del computador
Se obtiene as un nuevo fichero que es el que se ejecuta tantas veces como se

desee (ejecutables: .com, .exe, .bin)
Intrpretes: Basic Pearl, Javascript
Se genera un cdigo fuente
El Computador lee lnea a lnea, la traduce y ejecuta
Javascript
Variables
Es un espacio en la memoria de la computadora que permite almacenar
temporalmente un dato durante la ejecucin de un proceso, su contenido puede
cambiar durante la ejecucin del programa.
Ej.: ced, nom, ape
Constantes
Una constante es un dato numrico o alfanumrico que no cambia durante
la ejecucin del programa.
Ej.: pi = 3.1416
Javascript
Datos en Javascript
JavaScript maneja cuatro tipos de datos: numricos, de cadena, booleanos y punteros.
Los datos numricos sirven para manejar cualquier nmero real, como 12, 56.5, -9.
Los datos de cadena son los usados para cadenas alfanumricas.
Los datos lgicos son los usados para valores verdadero (true) o falso (false).
Los datos de puntero son los usados para direcciones de memoria y almacenar funciones.
Objetos en Javascript
Javascript es capaz de manejar objetos e incluso crearlos: definir sus propiedades y sus
mtodos, teniendo en cuenta que cualquier objeto que definamos ya posee heredados los
mtodos y propiedades del objeto predefinido object.
Javascript
Javascript
Javascript
Ejemplo de Javascript en el <head>
<!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=iso-8859-1" />
<title>Ejemplo de cdigo JavaScript en el Head</title>
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
</head>
<body bgcolor="#00ccff">
<h1 align="center"> Academia de Software Libre</h1>
<hr /><br />
<h3 align="center"> Javascript</h3>
<hr />
</body>
</html>
Javascript
Ejemplo de Javascript en un archivo externo
<head>
<script type="text/javascript" src="/js/codigo.js"></script>
</head>
<hr /><br />
<hr />
</body>
</html>
codigo.js
alert("Mensaje de Bienvenida desde Archivo Externo");
Javascript
Ejemplo de Javascript en el <body>
<head>
<script type="text/javascript" src="/js/codigo.js"></script>
</head>
<hr /><br />
<hr />
<p onclick="alert('Otro mensaje')">Un párrafo de texto.</p>
</body>
</html>
Javascript
Javascript
Javascript
Javascript
Javascript
Variables
Las variables en JavaScript se crean mediante la palabra reservada var
var numero_1 = 3;
var numero_2 = 1;
var resultado = numero_1 + numero_2;
La palabra reservada var solamente se debe indicar al definir por primera vez la
variable, lo que se denomina declarar una variable.
El nombre de una variable tambin se conoce como identificador y debe cumplir
las siguientes normas:
Slo puede estar formado por letras, nmeros y los smbolos $ (dlar) y _
(guin bajo).
El primer carcter no puede ser un nmero.
Javascript
Tipos de Variables
Numricas
Se utilizan para almacenar valores numricos enteros (llamados integer en ingls)
o decimales (llamados float en ingls).
Los nmeros decimales utilizan el carcter . (punto) en vez de , (coma) para
separar la parte entera y la parte decimal:
var iva = 16;
// variable tipo entero
var total = 234.65; // variable tipo decimal
Javascript
Tipos de Variables
Cadenas de texto (string)
Se utilizan para almacenar caracteres, palabras y/o frases de texto. Para asignar
el valor a la variable, se encierra el valor entre comillas dobles o simples, para
delimitar su comienzo y su final:
var mensaje = "Bienvenido a nuestro sitio web";
var nombreProducto = 'Producto ABC';
var letraSeleccionada = 'c';
/* 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';
Javascript
Tipos de Variables
Arrays
Un array es una coleccin de variables, que pueden ser todas del mismo tipo o
cada una de un tipo diferente.
Para definir un array, se utilizan los caracteres [ y ] para delimitar su comienzo y
su final y se utiliza el carcter , (coma) para separar sus elementos:
var nombre_array = [valor1, valor2, ..., valorN];
Eje:
var dias = ["Lunes", "Martes", "Mircoles", "Jueves", "Viernes", "Sbado",
"Domingo"];
var diaSeleccionado = dias[0]; // diaSeleccionado = "Lunes"
var otroDia = dias[5];
// otroDia = "Sbado"
Javascript
Tipos de Variables
Booleanos
Una variable de tipo boolean almacena un tipo especial de valor que solamente
puede tomar dos valores: true (verdadero) o false (falso).
Los nicos valores que pueden almacenar estas variables son true y false, por lo
que no pueden utilizarse los valores verdadero y falso.
A continuacin se muestra un par de variables de tipo booleano:
var clienteRegistrado = false;
var ivaIncluido = true;
Javascript
Operadores
Asignacin
El operador de asignacin es el ms utilizado y el ms sencillo. Este operador se
utiliza para guardar un valor especfico en una variable. El smbolo utilizado es = (no
confundir con el operador == que se ver ms adelante):
var numero1 = 3;
Incremento y decremento
Estos dos operadores solamente son vlidos para las variables numricas y se
utilizan para incrementar o decrementar en una unidad el valor de una variable.
Ejemplo:
var numero = 5;
++numero;
alert(numero); // numero = 6
var numero = 5;
--numero;
alert(numero); // numero = 4
Javascript
Operadores Lgicas
Negacin
La negacin lgica se obtiene prefijando el smbolo ! al identificador de la variable.
var visible = true;
alert(!visible); // Muestra "false" y no "true"
AND
El operador se indica mediante el smbolo && y su resultado solamente es true si los
dos operandos son true:
var valor1 = true;

var valor2 = false;
resultado = valor1 && valor2; // resultado = false
Javascript
Operadores Lgicas
OR
El operador se indica mediante el smbolo || y su resultado es true si alguno de los
dos operandos es true:
var valor1 = true;

var valor2 = false;
resultado = valor1 || valor2; // resultado = true
Javascript
Operadores Matemticos
Los operadores definidos son: suma (+), resta (-), multiplicacin (*) y divisin (/) y
mdulo o residuo (%) Ejemplo:
var numero1 = 10;
var numero2 = 5;
resultado = numero1 / numero2; // resultado = 2
resultado = 3 + numero1;
// resultado = 13
resultado = numero2 4;
// resultado = 1
resultado = numero1 * numero 2; // resultado = 50
resultado=numero1 % numero2; // resultado= 0
Tambin se pueden combinar con el operador de asignacin:
var numero1 = 5;
numero1 += 3; // numero1 = numero1 + 3 = 8
numero1 -= 1; // numero1 = numero1 - 1 = 4
numero1 *= 2; // numero1 = numero1 * 2 = 10
numero1 /= 5; // numero1 = numero1 / 5 = 1
numero1 %= 4; // numero1 = numero1 % 4 = 1
Javascript
Operadores Relacionales
Los operadores relacionales definidos por JavaScript son idnticos a los que definen
las matemticas: mayor que (>), menor que (<), mayor o igual (>=), menor o igual
(<=), igual que (==) y distinto de (!=).
Los operadores que relacionan variables son imprescindibles para realizar cualquier
aplicacin compleja, como se ver en el siguiente captulo de programacin
avanzada. El resultado de todos estos operadores siempre es un valor booleano:
var numero1 = 3;
var numero2 = 5;
resultado = numero1 > numero2; // resultado = false
resultado = numero1 < numero2; // resultado = true
numero1 = 5;
numero2 = 5;
resultado = numero1 >= numero2; // resultado = true
resultado = numero1 <= numero2; // resultado = true
resultado = numero1 == numero2; // resultado = true
resultado = numero1 != numero2; // resultado = false
Javascript
Estructuras de control
Estructura if
Se emplea para tomar decisiones en funcin de una condicin. Su definicin formal
es:
if(condicion) {
...
}
Ejemplo:
var mostrarMensaje = true;
if(mostrarMensaje) {
alert("Hola Mundo");
}
Javascript
Estructura if...else
if(condicion) {
...
}
else {
...
}
Ejemplo:
var edad = 18;
if(edad >= 18) {
alert("Puede Votar");
}
else {
alert("No est facultado para votar");
}
Javascript
Estructura if...else anidadas
La estructura if...else se puede encadenar para realizar varias comprobaciones
seguidas:
if(edad < 12) {
alert("Eres un nio");
}
else if(edad < 19) {
alert("Eres un adolescente");
}
else if(edad < 35) {
alert("Aun sigues siendo joven");
}
else {
alert("Piensa en cuidarte un poco ms");
}
Javascript
Estructura switch
La estructura switch permite seleccionar un elemento de una serie de alternativas.
switch(condicin)
{
case result1:
// Operacin para resultado1
case result2:
// Operacin para resultado2
.
.
.
default :
// Si el resultado pertenece a ninguno del caso especificado
}
Javascript
Estructura switch ejemplo:
var mes = prompt("Nmero para primeros 6 meses del ao","");
switch (mes){
case "1": alert("Enero");
break;
case "2": alert("Febrero");
break;
case "3": alert("Marzo");
break;
case "4": alert("Abril");
break;
case "5": alert("Mayo");
break;
case "6": alert("Junio");
break;
default: alert("El valor de mes es desconocido.");
break;
};
Javascript
Estructura for
La estructura for permite realizar este tipo de repeticiones (tambin llamadas bucles)
de una forma muy sencilla. No obstante, su definicin formal no es tan sencilla como
la de if():
for(inicializacion; condicion; actualizacion) {
...
}
Ejemplo:
var mensaje = "Estoy dentro de un bucle: ";
var i=0;
document.write("Valor inicial de i: " +i+"<br>");
for(i ; i < 5; i++) {
alert(mensaje+i);
}
document.write("Valor final de i:" +i);
Javascript
Estructura for...in
Una estructura de control derivada de for es la estructura for...in.
for(indice in array) {
...
}
Si se quieren recorrer todos los elementos que forman un array, la estructura for...in
es la forma ms eficiente de hacerlo, como se muestra en el siguiente ejemplo:
var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes",
"Sábado", "Domingo"];
for(i in dias) {
alert(dias[i]);
}
Javascript
Estructura while
Esta estructura permite la ejecucin de las sentencias en tanto la condicin sea
verdadera. Verifica primero antes de ejecutar.
while(condicion) {
...
}
Ejemplo:
var suma=0; var tope=10; var i=0;
while(i<tope){
suma +=i;
I++;
}
alert(suma);
Javascript
Estructura do..while
Sentencia contraria a la anterior, es decir se cumplir en tanto condicin sea falsa. Se
ejecuta primero antes de verificar.
do {
...
}while(condicion);
Ejemplo:
do{
suma +=i;
I++;
}while(i>=tope);
alert(suma);
Javascript
Estructura while
Una estructura de control derivada de for es la estructura for...in.
while(condicion) {
...
}
Si se quieren recorrer todos los elementos que forman un array, la estructura for...in
es la forma ms eficiente de hacerlo, como se muestra en el siguiente ejemplo:
while(i<tope){
suma +=i;
I++;
}
alert(suma);
Javascript
Funciones y propiedades bsicas de JavaScript
Funciones tiles para cadenas de texto
length, calcula la longitud de una cadena de texto (el nmero de caracteres que la
forman)
var mensaje = "Hola Mundo";
var numeroLetras = mensaje.length; // numeroLetras = 10
+, se emplea para concatenar varias cadenas de texto
var mensaje1 = "Hola";
var mensaje2 = " Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "Hola Mundo"
Adems del operador +, tambin se puede utilizar la funcin concat()
var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"
Javascript
toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientes
caracteres en maysculas:
var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"
toLowerCase(), transforma todos los caracteres de la cadena a sus correspondientes
caracteres en minsculas:
var mensaje1 = "HolA";
var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"
charAt(posicion), obtiene el carcter que se encuentra en la posicin indicada:
var mensaje = "Hola";
var letra = mensaje.charAt(0); // letra = H
letra = mensaje.charAt(2); // letra = l
Javascript
indexOf(caracter), calcula la posicin en la que se encuentra el carcter indicado
dentro de la cadena de texto. Si el carcter se incluye varias veces dentro de la
cadena de texto, se devuelve su primera posicin empezando a buscar desde la
izquierda. Si la cadena no contiene el carcter, la funcin devuelve el valor -1:
var mensaje = "Hola";
var posicion = mensaje.indexOf('a'); // posicion = 3
posicion = mensaje.indexOf('b'); // posicion = -1
Su funcin anloga es lastIndexOf():
lastIndexOf(caracter), calcula la ltima posicin en la que se encuentra el carcter
indicado dentro de la cadena de texto. Si la cadena no contiene el carcter, la funcin
devuelve el valor -1:
var mensaje = "Holografico";
var posicion = mensaje.lastIndexOf('o'); // posicion = 10
posicion = mensaje.lastIndexOf('c'); // posicion = 9
Javascript
substring(inicio, final), extrae una porcin de una cadena de texto.
var mensaje = "Hola Mundo";
var porcion = mensaje.substring(2); // porcion = "la Mundo"
porcion = mensaje.substring(5); // porcion = "Mundo"
porcion = mensaje.substring(7); // porcion = "ndo"
split(separador), convierte una cadena de texto en un array de cadenas de texto. La
funcin parte la cadena de texto determinando sus trozos a partir del carcter
separador indicado:
var mensaje = "Hola Mundo, soy una cadena de texto!";
var palabras = mensaje.split(" ");
// palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];
var palabra = "Hola";
var letras = palabra.split(""); // letras = ["H", "o", "l", "a"]
Javascript
Funciones tiles para arrays
length, calcula el nmero de elementos de un array
var vocales = ["a", "e", "i", "o", "u"];
var numeroVocales = vocales.length; // numeroVocales = 5
concat(), se emplea para concatenar los elementos de varios arrays
var array1 = [1, 2, 3]; alert(array1);
var array2 = array1.concat(4, 5, 6); alert(array2);
var array3 = array1.concat(array2); alert(array3);
join(unin), es la funcin contraria a split(). Une todos los elementos de un array para
formar una cadena de texto.
var array = ["hola", "mundo"];
var mensaje = array.join(""); // mensaje = "holamundo"
mensaje = array.join(" "); // mensaje = "hola mundo"
Javascript
pop(), elimina el ltimo elemento del array y lo devuelve. El array original se modifica
y su longitud disminuye en 1 elemento.
var array = [1, 2, 3];
var ultimo = array.pop();
// ahora array = [1, 2], ultimo = 3
push(), aade un elemento al final del array. El array original se modifica y aumenta
su longitud en 1 elemento. (Tambin es posible aadir ms de un elemento a la vez)
var array = [1, 2, 3];
array.push(4);
// ahora array = [1, 2, 3, 4]
Javascript
push(), aade un elemento al final del array. El array original se modifica y aumenta
su longitud en 1 elemento. (Tambin es posible aadir ms de un elemento a la vez)
var array = [1, 2, 3];
array.push(4);
// ahora array = [1, 2, 3, 4]
shift(), elimina el primer elemento del array y lo devuelve.
var array = [1, 2, 3];
var primero = array.shift();
// ahora array = [2, 3], primero = 1
unshift(), aade un elemento al principio del array.
var array = [1, 2, 3];
array.unshift(0);
// ahora array = [0, 1, 2, 3]
Javascript
reverse(), modifica un array colocando sus elementos en el orden inverso a su
posicin original:
var array = [1, 2, 3];
array.reverse();
// ahora array = [3, 2, 1]
Javascript
Funciones tiles para nmeros
NaN, (del ingls, "Not a Number") JavaScript emplea el valor NaN para indicar un
valor numrico no definido (por ejemplo, la divisin 0/0).
var numero1 = 0;
var numero2 = 0;
alert(numero1/numero2); // se muestra el valor NaN
isNaN(), permite proteger a la aplicacin de posibles valores numricos no definidos
var numero1 = 0;
var numero2 = 0;
if(isNaN(numero1/numero2)) {
alert("La divisin no est definida para los nmeros indicados");
}
else {
alert("La divisin es igual a => " + numero1/numero2);
}
Javascript
Funciones tiles para nmeros
Infinity, hace referencia a un valor numrico infinito y positivo (tambin existe el valor
Infinity para los infinitos negativos)
var numero1 = 10;
var numero2 = 0;
alert(numero1/numero2); // se muestra el valor Infinity
toFixed(digitos), devuelve el nmero original con tantos decimales como los indicados
por el parmetro digitos y realiza los redondeos necesarios.
var numero1 = 4564.34567;
numero1.toFixed(2); // 4564.35
numero1.toFixed(6); // 4564.345670
numero1.toFixed(); // 4564
Javascript
Funciones Definidas por el Usuario
Las funciones en JavaScript se definen mediante la palabra reservada function,
seguida del nombre de la funcin. Su definicin formal es la siguiente:
function nombre_funcion() {
...
}
El nombre de la funcin se utiliza para llamar a esa funcin cuando sea necesario.
Eje:
nombre_funcion();
Javascript
Funciones Definidas por el Usuario
function suma() {
resultado = numero1 + numero2;
alert("El resultado es " + resultado);
}
var resultado;
var numero1 = 3;
var numero2 = 5;
suma();
numero1 = 10;
numero2 = 7;
suma();
Javascript
Argumentos y valores de retorno
Las variables que necesitan las funciones se llaman argumentos.
La funcin debe indicar cuntos argumentos necesita y cul es el nombre de cada
argumento.
Al invocar la funcin, se deben incluir los valores que se le van a pasar a la funcin.
Los argumentos se indican dentro de los parntesis que van detrs del nombre de
la funcin y se separan con una coma (,).
Javascript
Argumentos y valores de retorno
// Definicin de la funcin
function suma(primerNumero, segundoNumero) {
var resultado = primerNumero + segundoNumero;
return resultado;
}
// Declaracin de las variables
var numero1 = 3; var numero2 =5;
// Llamada a la funcin
resultado=suma(numero1, numero2);
alert("El resultado es " + resultado);
Javascript
mbito de las variables
El mbito de una variable (llamado "scope" en ingls) es la zona del programa en la
que se define la variable. JavaScript define dos mbitos para las variables: global y
local. Las variables locales se definen con palabra reservada var.
El siguiente ejemplo ilustra el comportamiento de los mbitos:
var mensaje = "gana la de fuera";
function muestraMensaje() {
mensaje = "gana la de dentro";
alert(mensaje);
}
alert(mensaje);
muestraMensaje();
alert(mensaje);
Javascript
DOM (Document Object Model)
Acorde al W3C el Modelo de Objetos del Documento es una interfaz de
programacin de aplicaciones (API) para documentos validos HTML y bien
construidos XML.
Define la estructura lgica de los documentos y el modo en que se accede y
manipula.
El DOM permite un acceso a la estructura de una pgina HTML mediante el mapeo de
los elementos de esta pgina en un rbol de nodos. Cada elemento se convierte en
un nodo y cada porcin de texto en un nodo de texto.
DOM permite a los programadores web acceder y manipular las pginas XHTML
como si fueran documentos XML. De hecho, DOM se dise originalmente para
manipular de forma sencilla los documentos XML.
Javascript
DOM.- rbol de nodos
Una de las tareas habituales en la programacin de aplicaciones web con JavaScript
consiste en la manipulacin de las pginas web.Para poder utilizar las utilidades de
DOM, es necesario "transformar" la pgina original.
DOM transforma todos los documentos XHTML en un conjunto de elementos
llamados nodos, que estn interconectados y que representan los contenidos de las
pginas web y las relaciones entre ellos
<head>
<title>Pgina sencilla</title>
</head>
<body>
<p>Esta pgina es <strong>muy sencilla</strong></p>
</body>
</html>
Javascript
DOM.- rbol de nodos
Javascript
DOM.- rbol de nodos
La transformacin de las etiquetas XHTML habituales genera dos nodos: el primero
es el nodo de tipo "Elemento" (correspondiente a la propia etiqueta XHTML) y el
segundo es un nodo de tipo "Texto" que contiene el texto encerrado por esa etiqueta
XHTML.
As, la siguiente etiqueta XHTML genera:
<title>Pgina sencilla</title>
<p>Esta pgina es <strong>muy

sencilla</strong></p>
Javascript
DOM.- rbol de nodos
La transformacin automtica de la pgina en un rbol de nodos siempre sigue las
mismas reglas:
1.- Las etiquetas XHTML se transforman en dos nodos: el primero es la propia
etiqueta y el segundo nodo es hijo del primero y consiste en el contenido textual de
la etiqueta.
2.- Si una etiqueta XHTML se encuentra dentro de otra (anidada), se sigue el
mismo procedimiento anterior, pero los nodos generados sern nodos hijo de su
etiqueta padre.
Como se puede suponer, las pginas XHTML habituales producen rboles con miles
de nodos. Aun as, el proceso de transformacin es rpido y automtico, siendo las
funciones proporcionadas por DOM las nicas que permiten acceder a cualquier nodo
de la pgina de forma sencilla e inmediata.
Javascript
DOM.- Tipos de nodos
La especificacin completa de DOM define 12 tipos de nodos, aunque las pginas
XHTML habituales se pueden manipular manejando solamente cuatro o cinco tipos de
nodos:
-Document, nodo raz del que derivan todos los dems nodos del rbol.
-Element, representa cada una de las etiquetas XHTML. Se trata del nico nodo que
puede contener atributos y el nico del que pueden derivar otros nodos.
-Attr, se define un nodo de este tipo para representar cada uno de los atributos de las
etiquetas XHTML, es decir, uno por cada par atributo=valor.
-Text, nodo que contiene el texto encerrado por una etiqueta XHTML.
-Comment, representa los comentarios incluidos en la pgina XHTML.
Los otros tipos de nodos existentes que no se van a considerar son
DocumentType, CDataSection, DocumentFragment, Entity, EntityReference,
ProcessingInstruction y Notation.
Javascript
DOM.- Acceso a los nodos
Una vez construido automticamente el rbol completo de nodos DOM, ya es posible
utilizar las funciones DOM para acceder de forma directa a cualquier nodo del rbol.
DOM proporciona dos mtodos alternativos para acceder a un nodo especfico:
acceso a travs de sus nodos padre y acceso directo.
A travs de sus nodos padre: consisten en acceder al nodo raz de la pgina y
despus a sus nodos hijos y a los nodos hijos de esos hijos y as sucesivamente
hasta el ltimo nodo de la rama terminada por el nodo buscado.
Acceso directo: cuando se quiere acceder a un nodo especfico, es mucho ms
rpido acceder directamente a ese nodo. Este es el mtodo usado en el curso.
Es importante recordar que el acceso a los nodos, su modificacin y su eliminacin
solamente es posible cuando el rbol DOM ha sido construido completamente, es
decir, despus de que la pgina XHTML se cargue por completo.
Javascript
DOM.- Acceso a los nodos. getElementsByTagName()
La funcin getElementsByTagName(nombreEtiqueta) obtiene todos los elementos de
la pgina XHTML cuya etiqueta sea igual que el parmetro que se le pasa a la
funcin.
var parrafos = document.getElementsByTagName("p");
El valor que devuelve la funcin es un array con todos los nodos que cumplen la
condicin de que su etiqueta coincide con el parmetro proporcionado.
De este modo, se puede obtener el primer prrafo de la pgina de la siguiente
manera:
var primerParrafo = parrafos[0];
De la misma forma, se podran recorrer todos los prrafos de la pgina con el
siguiente cdigo:
for(var i=0; i<parrafos.length; i++) {
var parrafo = parrafos[i];
}
Javascript
DOM.- Acceso a los nodos. getElementsByName()
La funcin getElementsByName() busca los elementos cuyo atributo name sea igual
al parmetro proporcionado.
En el siguiente ejemplo, se obtiene directamente el nico prrafo con el nombre
indicado:
var parrafoEspecial = document.getElementsByName("especial");
<p name="prueba">...</p>
<p name="especial">...</p>
<p>...</p>
Javascript
DOM.- Acceso a los nodos. getElementsById()
La funcin getElementById() es la ms utilizada cuando se desarrollan aplicaciones
web dinmicas. Se trata de la funcin preferida para acceder directamente a un nodo
y poder leer o modificar sus propiedades.
La funcin getElementById() devuelve el elemento XHTML cuyo atributo id coincide
con el parmetro indicado en la funcin. Como el atributo id debe ser nico para cada
elemento de una misma pgina, la funcin devuelve nicamente el nodo deseado.
var cabecera = document.getElementById("cabecera");
<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
Javascript
DOM.- Creacin y eliminacin de nodos
Creacin de elementos XHTML simples
Crear y aadir a la pgina un nuevo elemento XHTML sencillo consta de cuatro pasos
diferentes:
1.- Creacin de un nodo de tipo Element que represente al elemento.
2.- Creacin de un nodo de tipo Text que represente el contenido del elemento.
3.- Aadir el nodo Text como nodo hijo del nodo Element.
4.- Aadir el nodo Element a la pgina, en forma de nodo hijo del nodo correspondiente
al lugar en el que se quiere insertar el elemento.
Ejemplo:
var parrafo = document.createElement("p");
var contenido = document.createTextNode("Hola Mundo!");
parrafo.appendChild(contenido);
document.body.appendChild(parrafo);
Javascript
Creacin de elementos XHTML simples
El proceso de creacin de nuevos nodos implica la utilizacin de tres funciones DOM:
createElement(etiqueta): crea un nodo de tipo Element que representa al elemento
XHTML cuya etiqueta se pasa como parmetro.
createTextNode(contenido): crea un nodo de tipo Text que almacena el contenido
textual de los elementos XHTML.
nodoPadre.appendChild(nodoHijo): aade un nodo como hijo de otro nodo. Se debe
utilizar al menos dos veces con los nodos habituales: en primer lugar se aade el
nodo Text como hijo del nodo Element y a continuacin se aade el nodo Element
como hijo de algn nodo de la pgina.
Javascript
Eliminacin de nodos
Eliminar un nodo del rbol DOM de la pgina es mucho ms sencillo que aadirlo:
solamente es necesario utilizar la funcin removeChild():
var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);
<p id="provisional">...</p>
La funcin removeChild() requiere como parmetro el nodo que se va a eliminar. Esta
funcin debe ser invocada desde el elemento padre de ese nodo que se quiere
eliminar. La forma ms segura y rpida de acceder al nodo padre de un elemento es
mediante la propiedad nodoHijo.parentNode.
As, para eliminar un nodo de una pgina XHTML se invoca a la funcin removeChild()
desde el valor parentNode del nodo que se quiere eliminar. Cuando se elimina un
nodo, tambin se eliminan automticamente todos los nodos hijos que tenga, por
lo que no es necesario borrar manualmente cada nodo hijo.
Javascript
DOM.- Acceso directo a los atributos XHTML
Los atributos XHTML de los elementos de la pgina se transforman automticamente
en propiedades de los nodos. Para acceder a su valor, simplemente se indica el
nombre del atributo XHTML detrs del nombre del nodo.
El siguiente ejemplo obtiene de forma directa la direccin a la que enlaza el enlace:
var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com
<a id="enlace" href="http://www...com">Enlace</a>
Para obtener el valor de cualquier propiedad CSS del nodo, se debe utilizar el atributo
style. El siguiente ejemplo obtiene el valor de la propiedad margin de la imagen:
var imagen = document.getElementById("imagen");
alert(imagen.style.margin);
<img id="imagen" style="margin:0; border:0;" src="logo.png" />
Javascript
Si el nombre de una propiedad CSS es compuesto, se accede a su valor modificando
ligeramente su nombre:
var parrafo = document.getElementById("parrafo");
alert(parrafo.style.fontWeight); // muestra "bold"
<p id="parrafo" style="font-weight: bold;">...</p>
La transformacin del nombre de las propiedades CSS compuestas consiste en
eliminar todos los guiones medios (-) y escribir en mayscula la letra siguiente a cada
guin medio. A continuacin se muestran algunos ejemplos:
font-weight se transforma en fontWeight
line-height se transforma en lineHeight
border-top-style se transforma en borderTopStyle
list-style-image se transforma en listStyleImage
Javascript
El nico atributo XHTML que no tiene el mismo nombre en XHTML y en las
propiedades DOM es el atributo class.
Como la palabra class est reservada por JavaScript, no es posible utilizarla para
acceder al atributo class del elemento XHTML. En su lugar, DOM utiliza el nombre
className para acceder al atributo class de XHTML:
var parrafo = document.getElementById("parrafo");
alert(parrafo.class); // muestra "undefined"
alert(parrafo.className); // muestra "normal"
<p id="parrafo" class="normal">...</p>
Javascript
La propiedad innerHTML property puede usarse para modificar documentos HTML
sobre la marcha.
Cuando se usa innerHTML, puede cambiar el contenido de las pginas sin refrescarla.
Esto puede hacer los site ms ligeros
Esta propiedad es usada junto con getElementById para referir a un elemento HTML y
cambiar su contenido.
Su sintaxis es:
document.getElementById('{ID of element}').innerHTML = '{content}';
Javascript
DOM.- Ejemplo innerHTML
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
<head>
<title>Ejercicio DOM </title>
</head>
<body>
function mostrar(){
var texto = document.getElementById('entrada').value;
document.getElementById('salida').innerHTML = texto;
}
</script>
<input type="input" maxlength="40" id="entrada" onkeyup="mostrar()" value="Ingrese
texto..." />
<p id="salida"></p>
</body>
</html>
Javascript
DOM.- Ejemplo 2
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
<head>
<title>Ejercicio DOM </title>
function agregar() {
var elemento = document.createElement("li");
var texto = document.createTextNode("Elemento de prueba");
elemento.appendChild(texto);
var lista = document.getElementById("lista");
lista.appendChild(elemento);
alert(lista.innerHTML);
var nuevoElemento = "<li>Texto de prueba</li>";
lista.innerHTML = lista.innerHTML + nuevoElemento;
}
</script>
</head>
Javascript
DOM.- Ejemplo 2 (cont.)
<body>
<ul id="lista">
<li>ALfa</li>
<li>Beta</li>
<li>Gamma</li>
<li>Delta</li>
<li>Eitha</li>
</ul>
<input type="button" value="Añadir elemento" onclick="agregar();">
</body>
</html>
Javascript
Eventos
Los eventos hacen posible que los usuarios transmitan informacin a los programas.
JavaScript define numerosos eventos que permiten una interaccin completa entre el
usuario y las pginas/aplicaciones web.
JavaScript permite asignar una funcin a cada uno de los eventos. De esta forma,
cuando se produce cualquier evento, JavaScript ejecuta su funcin asociada. Este tipo
de funciones se denominan "event handlers" en ingls y suelen traducirse por
"manejadores de eventos".
Javascript
Modelo bsico de eventos
Tipos de eventos
En este modelo, cada elemento o etiqueta XHTML define su propia lista de posibles
eventos que se le pueden asignar.
Javascript
Tipos de eventos
Javascript
Tipos de eventos
Los eventos ms utilizados en las aplicaciones web tradicionales son:

onload para esperar a que se cargue la pgina por completo
onclick, onmouseover, onmouseout para controlar el ratn
onsubmit para controlar el envo de los formularios
Javascript
Manejadores de eventos
Un evento de JavaScript por s mismo carece de utilidad. Para que los eventos resulten
tiles, se deben asociar funciones o cdigo JavaScript a cada evento. De esta forma,
cuando se produce un evento se ejecuta el cdigo indicado, por lo que la aplicacin
puede responder ante cualquier evento que se produzca durante su ejecucin.
Las funciones o cdigo JavaScript que se definen para cada evento se denominan
"manejador de eventos" y como JavaScript es un lenguaje muy flexible, existen varias
formas diferentes de indicar los manejadores:
-Manejadores como atributos de los elementos XHTML.
-Manejadores como funciones JavaScript externas.
-Manejadores "semnticos".
Javascript
Manejadores de eventos como atributos XHTML
Se trata del mtodo ms sencillo de indicar el cdigo JavaScript que se debe ejecutar
cuando se produzca un evento. En este caso, el cdigo se incluye en un atributo del
propio elemento XHTML.
En el siguiente ejemplo, se quiere mostrar un mensaje cuando el usuario pinche con el
ratn sobre un botn:
<input type="button" value="Haga click" onclick="alert('Ud. Hizo click en
boton');" />
Otro ejemplo incluye una de las instrucciones ms utilizadas en las aplicaciones
JavaScript ms antiguas:
<body onload="alert('La pgina se ha cargado completamente');">
...
</body>
Javascript
Manejadores de eventos y variable this
JavaScript define una variable especial llamada this que se crea automticamente y
que se emplea en algunas tcnicas avanzadas de programacin. En los eventos, se
puede utilizar la variable this para referirse al elemento XHTML que ha provocado el
evento.
Esta variable es muy til para ejemplos como el siguiente:
<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"
onmouseover="this.style.borderColor='black';"
onmouseout="this.style.borderColor='silver';">
Seccin de contenidos...
</div>
Javascript
Manejadores de eventos como funciones externas
La definicin de los manejadores de eventos en los atributos XHTML es el mtodo ms
sencillo. El principal inconveniente es que se complica en exceso en cuanto se aaden
algunas pocas instrucciones, por lo que es recomendable para los casos ms sencillos.
Si se realizan aplicaciones complejas, como por ejemplo la validacin de un formulario,
es aconsejable agrupar todo el cdigo JavaScript en una funcin externa y llamar a
esta funcin desde el elemento XHTML.
alert('Gracias por hacer click');
}
<input type="button" value="Haga click" onclick="muestraMensaje()" />
Javascript
Manejadores de eventos semnticos
Esta tcnica es una evolucin del mtodo de las funciones externas, ya que se basa en
utilizar las propiedades DOM de los elementos XHTML para asignar todas las funciones
externas que actan de manejadores de eventos.
// Funcin externa
alert('Gracias por hacer click');
}
// Asignar la funcin externa al elemento
document.getElementById("ejecutable").onclick = muestraMensaje;
// Elemento XHTML
<input id="ejecutable" type="button" value="Haga click" />
Javascript
Manejadores de eventos semnticos
La tcnica de los manejadores semnticos consiste en:
-Asignar un identificador nico al elemento XHTML mediante el atributo id.
-Crear una funcin de JavaScript encargada de manejar el evento.
-Asignar la funcin externa al evento correspondiente en el elemento deseado.

Javascript1 (Curso)

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Javascript1 (Curso)

Diunggah oleh

Hak Cipta:

Format Tersedia

Javascript

Introduccin al lenguaje JavaScript

Se genera un cdigo fuente

Se Compila: Un programa lo traduce al lenguaje interno del computador

Se obtiene as un nuevo fichero que es el que se ejecuta tantas veces como se

Se genera un cdigo fuente

El Computador lee lnea a lnea, la traduce y ejecuta

var valor1 = true;

var valor1 = true;

<p>Esta pgina es <strong>muy

Los eventos ms utilizados en las aplicaciones web tradicionales son:

Anda mungkin juga menyukai