Está en la página 1de 44

JAVASCRIPT

Powerpoint Manuel L.I. Jos Templates Cazarez Alderete Page 1

Introduccin

JavaScript es un lenguaje de programacin que se utiliza principalmente para crear pginas web dinmicas. Una pgina web dinmica 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.

Powerpoint Templates

Page 2

Introduccin

Tcnicamente, JavaScript es un lenguaje de programacin 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.

Powerpoint Templates

Page 3

Cmo incluir JavaScript en documentos XHTML?


La integracin de JavaScript y XHTML es muy flexible, ya que existen al menos tres formas para incluir cdigo JavaScript en las pginas web.
1. El cdigo JavaScript se encierra entre etiquetas <script> y se incluye en cualquier parte del documento. Aunque es correcto incluir cualquier bloque de cdigo en cualquier zona de la pgina, se recomienda definir el cdigo JavaScript dentro de la cabecera del documento (dentro de la etiqueta <head>):

Powerpoint Templates

Page 4

Cmo incluir JavaScript en documentos XHTML?


La integracin de JavaScript y XHTML es muy flexible, ya que existen al menos tres formas para incluir cdigo JavaScript en las pginas web.
1. El cdigo JavaScript se encierra entre etiquetas <script> y se incluye en cualquier parte del documento. Aunque es correcto incluir cualquier bloque de cdigo en cualquier zona de la pgina, se recomienda definir el cdigo JavaScript dentro de la cabecera del documento (dentro de la etiqueta <head>):

Powerpoint Templates

Page 5

Cmo incluir JavaScript en documentos XHTML?


La integracin de JavaScript y XHTML es muy flexible, ya que existen al menos tres formas para incluir cdigo JavaScript en las pginas web.
1. El cdigo JavaScript se encierra entre etiquetas <script> y se incluye en cualquier parte del documento. Aunque es correcto incluir cualquier bloque de cdigo en cualquier zona de la pgina, se recomienda definir el cdigo JavaScript dentro de la cabecera del documento (dentro de la etiqueta <head>):

Powerpoint Templates

Page 6

Ejemplo 1

<!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 propio documento</title> <script type="text/javascript"> alert("Un mensaje de prueba"); </script> </head> <body> <p>Un prrafo de texto.</p> </body> </html>

Powerpoint Templates

Page 7

Cmo incluir JavaScript en documentos XHTML?


2. Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScript que los documentos XHTML 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.

Powerpoint Templates

Page 8

Ejemplo 2

Archivo codigo.js

alert("Un mensaje de prueba");

Documento XHTML <!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 propio documento</title> <script type="text/javascript" src="/js/codigo.js"></script> </head> <body>

Powerpoint Templates

Page 9

Cmo incluir JavaScript en documentos XHTML?


3. Este ltimo mtodo es el menos utilizado, ya que consiste en incluir trozos de JavaScript dentro del cdigo XHTML de la pgina:
<!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 propio documento</title> </head> <body> <p onclick="alert('Un mensaje de prueba')">Un prrafo de texto.</p> </body> </html>

Powerpoint Templates

Page 10

Variables

Las variables en JavaScript se crean mediante la palabra reservada var.


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 el _ (guin bajo). El primer carcter no puede ser un nmero.
Powerpoint Templates Page 11

Ejemplos de Variables

Nmericas var iva = 16; // variable tipo entero var total = 234.65; // variable tipo decimal
Cadenas de Texto var mensaje = "Bienvenido"; var nombreProducto = 'Producto ABC'; Booleanos var clienteRegistrado = false; var ivaIncluido = true;

Powerpoint Templates

Page 12

Operadores

Aritmticos * Multiplicacin / Divisin + Suma Resta


Relacionales > Mayor que < Menor que >= Mayor o igual que <= Menor o igual que != Diferente == Igual (igualdad lgica)

Lgicos && AND || OR ! NOT

Powerpoint Templates

Page 13

Estructuras Condicionales
Simple
if(Edad >= 18) { alert(Eres mayor de edad.); }

Doble
if(Edad >= 18) { alert(Eres mayor de edad.); } else { alert(No eres mayor de edad.); } Powerpoint Templates

Page 14

Estructuras Condicionales
Mltiple
switch (Dia) { case 1: alert(lunes); break; case 2: alert(martes); break; case 3: alert(miercoles); break; case 4: alert(jueves); break; case 5: alert(viernes); break; Case 6: alert(sabado); break; Case 7: alert(domingo); break; default: alert(dia desconocido); }

Powerpoint Templates

Page 15

Estructuras Repetitivas

Ciclo for

<script type="text/javascript"> var i=0;


for (i=1;i<=5;i++) { alert(el numero es : + i); } </script>

Powerpoint Templates

Page 16

Estructuras Repetitivas

Ciclo while

<script type="text/javascript"> var i=1; while (i<=5) { alert(el numro es : + i); i++; } </script>

Powerpoint Templates

Page 17

Estructuras Repetitivas

Ciclo do - while

<script type="text/javascript"> var i=1;


do {

alert(El numero es : + i); i++; }while(i<=5);


</script>

Powerpoint Templates

Page 18

Arreglos

Un arreglo es un tipo de dato que contiene o almacena piezas de datos a las cuales les corresponden un nmero o ndice. Cada dato numerado es llamado elemento del arreglo y el nmero asignado a un elemento es llamado ndice. Ya que JavaScript es un lenguaje sin tipo, un elemento de un arreglo puede ser de cualquier tipo de dato (entero, booleano, string, etc.), un mismo arreglo puede contener diferentes elementos los cuales pueden ser de un tipo de dato diferente.

Powerpoint Templates

Page 19

Arreglos

Los arreglos se crean de la siguiente manera:

var a = new Array(); //crea un arreglo vacio (sin elementos)


----------------------------------------

var a = new Array("Prueba", 1, 2, true, 58.45); //se pueden especificar los elementos en la //declaracin
----------------------------------------

Powerpoint Templates

Page 20

Arreglos

Propiedades y Mtodos de los Arreglos:

Propiedad: lenght
Especifica el nmero de elementos que contiene el arreglo. ----------------------------------------------------var a = new Array(10); alert(a.length); //Muestra en pantalla el nmero 10 var b = new Array(1,2,3); alert(b.length); //Muestra en pantalla el nmero 3
Powerpoint Templates

Page 21

Arreglos

Propiedades y Mtodos de los Arreglos:

Mtodos Principales:
join() reverse() sort() slice() push() pop() shift() unshift()

Powerpoint Templates

Page 22

Arreglos

Mtodo: join()

Convierte todos los elementos de un arreglo a un string y los concatena. Como parte de un argumento que acepta este mtodo, se puede especificar un string que sirva de separador, siendo el default una (,).
var numeros = new Array(1,2,3); var s = numeros.join(); alert(s); s = numeros.join(" "); alert(s);
Powerpoint Templates

Page 23

Arreglos

Mtodo: reverse()

Ordena al revs los elementos de un arreglo.


var numeros = new Array(1,2,3); var s = numeros.reverse(); alert(s);

Powerpoint Templates

Page 24

Arreglos

Mtodo: sort()

Ordena los elementos de un arreglo.


var numeros = new Array(5,1,4,2,3); numeros.sort(); alert(numeros); var nombres = new Array("Luis", "Pedro", "Sofia", "Ana"); nombres.sort(); alert(nombres);

Powerpoint Templates

Page 25

Arreglos

Mtodo: slice()

Regresa una parte o un subarreglo del arreglo especificado. El primer argumento especifica el inicio y el segundo el fin del subarreglo que regresar.
var a = new Array(1,2,3,4,5,6); var sub_a = a.slice(3,5); alert(sub_a);

Powerpoint Templates

Page 26

Arreglos

Mtodo: push()

Inserta uno o ms elementos al final del arreglo.


var a = new Array(); a.push(1); a.push(4,2,5); a.push(0); alert(a);

Powerpoint Templates

Page 27

Arreglos

Mtodo: pop()

Elimina el ltimo elemento de un arreglo.


var a = new Array(1,2,3,4,5); a.pop(); a.pop(); alert(a);

Powerpoint Templates

Page 28

Arreglos

Mtodo: unshift()

Inserta uno o ms elementos al inicio del arreglo.


var a = new Array(1,2,3,4,5); a.unshift(6); a.unshift(7,8); alert(a);

Powerpoint Templates

Page 29

Arreglos

Mtodo: shift()

Elimina el primer elemento de un arreglo.


var a = new Array(1,2,3,4,5); a.shift(); alert(a);

Powerpoint Templates

Page 30

Funciones

Son porciones independientes de cdigo que tienen un nombre y que permiten ser llamadas desde cualquier parte de nuestra pgina (permiten la reutilizacin de cdigo). Ejemplo de una funcin:

function <Nombre> (<parametros>) { //instrucciones }

Powerpoint Templates

Page 31

Funciones

La sentencia return es la que permite devolver el resultado de una funcin. Ejemplo: function AreaTriangulo (Base, Altura) { return (Base * Altura) / 2; }

Powerpoint Templates

Page 32

Funciones
La propiedad arguments es un array (arreglo) que contiene los parmetros que le son pasados a una funcin. Ejemplo: function Suma (x) { var sumandos = Suma.arguments; for (var i=0; i<Suma.arguments.length; i++) resultado += sumandos[i]; return resultado; }

Powerpoint Templates

Page 33

Funciones
Funciones globales de javascript: eval() parseInt(3) parseFloat(45.78) isNaN(123)

Powerpoint Templates

Page 34

Objeto: window

Propiedades:

name document history location


Mtodos: alert close confirm open prompt setInterval setTimeout

Eventos: onbeforeunload onload onclick

Powerpoint Templates

Page 35

Objeto: location

Propiedades:

protocol host href pathname port


Mtodos: reload replace

Powerpoint Templates

Page 36

Objeto: history

Propiedades:

length
Mtodos: back forward go

Powerpoint Templates

Page 37

Objeto: document

Propiedades:

bgColor title forms Mtodos: open close write getElementById getElementsByName getElementsByTagName

Mtodos: createElement createTextNode Eventos onload onunload onclick

Powerpoint Templates

Page 38

DOM

<!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> <title>Pgina sencilla</title> </head> <body> <p>Esta pgina es <strong> muy sencilla </strong> </p> </body> </html>

Powerpoint Templates

Page 39

DOM

Powerpoint Templates

Page 40

Objeto: document

Al utilizar los mtodos: getElementById, getElementsByName y getElementsByTagName se obtiene una estructura llamada Nodo. Propiedades de los Nodos: id value innerText innerHTML attributes style

Powerpoint Templates

Page 41

Objeto: document

Al utilizar los mtodos: getElementById, getElementsByName y getElementsByTagName se obtiene una estructura llamada Nodo. Se pueden crear y eliminar dinmicamente Nodos simplemente se pueden utilizar sus atributos.

Existen principalmente dos tipos de Nodos: Element Text

Powerpoint Templates

Page 42

Objeto: document

Para crear Nodos se utilizan los mtodos:

document.createElement (Nodo tipo Element) document.createTextNode (Nodo tipo Text)


Para agregar Nodos se utiliza el mtodo: document.body.appendChild (Nodo) Para eliminar un Nodo se utiliza el mtodo: document.body.removeChild (Nodo) Para insertar un Nodo antes de otro Nodo se utiliza el mtodo:
Powerpoint Templates

Page 43

Objeto: form

Powerpoint Templates

Page 44