Programación Web - Java Script.pptx

JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web
dinámicas.
Una página web dinámica es aquella que incorpora efectos como texto que aparece y
desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de
aviso al usuario.
Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es
necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con
JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos
intermedios.
¿Qué es Java Script?

La integración de JavaScript y HTML es muy flexible, ya que existen al menos tres formas para
incluir código JavaScript en las páginas web.
- JavaScript en el documento.
- JavaScript en un archivo externo.
- JavaScript en un elemento.
JavaScript - HTML

El código JavaScript se encierra entre etiquetas <script> y se incluye en cualquier parte
del documento.
Aunque es correcto incluir cualquier bloque de código en cualquier zona
de la página, se recomienda definir el código Java Script dentro de la cabecera del
documento (dentro de la etiqueta <head>):
JavaScript - HTML

Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScript que los
documentos HTML enlazan mediante la etiqueta <script>.
Se pueden crear todos los archivos JavaScript que sean necesarios y cada documento XHTML
puede enlazar tantos archivos JavaScript como necesite.
Java Script - HTML

Este último método es el menos utilizado, ya que consiste en incluir trozos de JavaScript dentro
del código XHTML de la página:
Java Script - HTML

Aunque todas las variables de JavaScript se crean de la misma forma, la forma en
la que se les asigna un valor depende del tipo de valor que se quiere almacenar.
var numero = 2.0;
var entero = 1;
var texto1 = ‘Hola’;
var texto2 = “ Esto también es un texto.”;
alert(numero + entero);
alert(texto1 + texto2);
Variables

Un array es una colección de variables, que pueden ser todas del mismo tipo o
cada una de un tipo diferente.
var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
var seleccionado = dias[0]; // seleccionado = "Lunes"
var otro = dias[5]; // otro = "Sábado"
Variables - Arreglos

If
if es la estructura condicional más simple y se emplea para tomar decisiones en
función de una condición.
if(dia == 6){
alert(“No se trabaja los domingos.”);
} else if (dia == 5){
alert(“En la pera”);
} else
alert(“A trabajar.”);
Condicionales

Switch
Se emplea para tomar decisiones en función de una condición.
switch(dia){
case 6:
alert(“No se trabaja los domingos.”);
case 5:
alert(“En la pera”);
default:
alert(“A trabajar”);
Condicionales

For
La estructura for permite realizar iteraciones de una forma muy sencilla.
for(var i=0; i<7; i++) {
alert(dias[i]);
}
Estructuras Iterativas

For … in
Si se quieren recorrer todos los elementos que forman un array, la estructura
for...in es la forma más eficiente de hacerlo, como se muestra en el siguiente
ejemplo:
for(i in dias) {
alert(dias[i]);
}

While
La estructura while permite crear bucles que se ejecutan ninguna o más veces,
dependiendo de la condición indicada
var i = 0;
while(i < 7) {
alert(dias[i++]);
}

Do While
El bucle de tipo do...while es muy similar al bucle while, salvo que en este caso
siempre se ejecutan las instrucciones del bucle al menos la primera vez.
var i = 0;
do{
alert(dias[i++]);
} while(i < 7);

Las sentencias break y continue permiten manipular el comportamiento normal
de los bucles for para detener el bucle o para saltarse algunas repeticiones.
Concretamente, la sentencia break permite terminar de forma abrupta un bucle y
la sentencia continue permite saltarse algunas repeticiones del bucle.
Sentencias break y continue

Cuando se desarrolla una aplicación compleja, es muy habitual utilizar una y otra
vez las mismas instrucciones.
function mostrarMensaje(mensaje){
alert(“Mensaje: “ + mensaje);
}
Funciones

Cuando se desarrolla una aplicación compleja, es muy habitual utilizar una y otra
vez las mismas instrucciones:
function calcularIVA(precio){
return precio * 1,21;
}
total = 0.0;
for(i in productos){
total += calcularIVA(productos[i]);
}
Funciones

DOM
La creación del Document Object Model o DOM es una de las innovaciones que
más ha influido en el desarrollo de las páginas web dinámicas y de las aplicaciones
web más complejas.
DOM permite a los programadores web acceder y manipular las páginas XHTML
como si fueran documentos XML.
De hecho, DOM se diseñó originalmente para manipular de forma sencilla los
documentos XML.
A pesar de sus orígenes, DOM se ha convertido en una utilidad disponible para la
mayoría de lenguajes de programación (Java, PHP, JavaScript) y cuyas únicas
diferencias se encuentran en la forma de implementarlo.

DOM
<html>
<head>
<meta http-equiv=”content-type” content=”text/html”/>
<title>Página Sencilla</title>
</head>
<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html>

DOM - Tipos de Nodos
▪ Document, nodo raíz del que derivan todos los demás 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 página XHTML.

DOM - Tipos de Nodos
▪ Document: nodo raíz del que derivan todos los demás 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 página XHTML.

DOM - Acceso Directo a los Nodos
Una vez construido automáticamente el árbol completo de nodos DOM, ya es posible
utilizar las funciones DOM para acceder de forma directa a cualquier nodo del árbol.
Una vez accedido a los nodos estos pueden manipularse (agregar, modificar o
eliminar nodos, sus propiedades y atributos).

La función getElementsByTagName(nombreEtiqueta) obtiene todos los elementos
de la página XHTML cuya etiqueta sea igual que el parámetro que se le pasa a la
función.
var parrafos = document.getElementsByTagName("p");
for(var i=0; i<parrafos.length; i++) {
var parrafo = parrafos[i];
}

La función getElementsByName() es similar a la anterior, pero en este caso se buscan
los elementos cuyo atributo name sea igual al parámetro proporcionado.
En el siguiente ejemplo, se obtiene directamente el único párrafo con el nombre
indicado:
<p name=”normal”>Parrafo Normal</p>
<p name=”especial”>Parrafo Especial</p>
var parrafos = document.getElementsByName("especial");
for(var i=0; i<parrafos.length; i++) {
var parrafo = parrafos[i];
}

La función getElementById() es la más utilizada cuando se desarrollan aplicaciones
web dinámicas.
Se trata de la función preferida para acceder directamente a un nodo y poder leer o
modificar sus propiedades.
La función getElementById() devuelve el elemento XHTML cuyo atributo id coincide
con el parámetro indicado en la función. Como el atributo id debe ser único para
cada elemento de una misma página, la función devuelve únicamente el nodo
deseado.
var cabecera = document.getElementById("cabecera");

1. Creación de un nodo de tipo Element que represente al elemento.
2. Creación de un nodo de tipo Text que represente el contenido del elemento.
3. Añadir el nodo Text como nodo hijo del nodo Element.
4. Añadir el nodo Element a la página, en forma de nodo hijo del nodo
correspondiente al lugar en el que se quiere insertar el elemento
DOM - Creación de Elementos

La función removeChild() requiere como parámetro el nodo que se va a eliminar.
Además, esta función debe ser invocada desde el elemento padre de ese nodo que se
quiere eliminar. Así, para eliminar un nodo de una página XHTML se invoca a la
función removeChild() desde el valor parentNode del nodo que se quiere eliminar.
Cuando se elimina un nodo, también se eliminan automáticamente todos los nodos
hijos que tenga, por lo que no es necesario borrar manualmente cada nodo hijo.
var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);
DOM - Eliminación de Elementos

Una vez que se ha accedido a un nodo, el siguiente paso natural consiste en acceder
y/o modificar sus atributos y propiedades.
Mediante DOM, es posible acceder de forma sencilla a todos los atributos XHTML y
todas las propiedades CSS de cualquier elemento de la página.
Los atributos XHTML de los elementos de la página se transforman automáticamente
en propiedades de los nodos.
Para acceder a su valor, simplemente se indica el nombre del atributo XHTML detrás
del nombre del nodo
DOM - Acceso a Atributos

Este ejemplo cambia el valor de un enlace.
<a href=”www.google.com” id=”enlace”>Google</a>
var enlace = document.getElementById("enlace");
alert(enlace.href);
enlace.href = ‘www.eggtech.com’;
DOM - Acceso a Atributos

Los eventos hacen posible que los usuarios transmitan información a los programas.
JavaScript define numerosos eventos que permiten una interacción completa entre
el usuario y las páginas/aplicaciones web.
La pulsación de una tecla constituye un evento, así como pinchar o mover el ratón,
seleccionar un elemento de un formulario, redimensionar la ventana del navegador,
etc
JavaScript - Eventos

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 código JavaScript a cada evento.
De esta forma, cuando se produce un evento se ejecuta el código indicado, por
lo que la aplicación puede responder ante cualquier evento que se produzca
durante su ejecución.

Programación Web - Java Script.pptx

Más contenido relacionado

Similar a Programación Web - Java Script.pptx (20)

Último (20)

Programación Web - Java Script.pptx