Académique Documents
Professionnel Documents
Culture Documents
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
Powerpoint Templates
Page 4
Powerpoint Templates
Page 5
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
Powerpoint Templates
Page 8
Ejemplo 2
Archivo codigo.js
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
Powerpoint Templates
Page 10
Variables
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
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
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
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
var a = new Array("Prueba", 1, 2, true, 58.45); //se pueden especificar los elementos en la //declaracin
----------------------------------------
Powerpoint Templates
Page 20
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
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()
Powerpoint Templates
Page 24
Arreglos
Mtodo: sort()
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()
Powerpoint Templates
Page 27
Arreglos
Mtodo: pop()
Powerpoint Templates
Page 28
Arreglos
Mtodo: unshift()
Powerpoint Templates
Page 29
Arreglos
Mtodo: shift()
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:
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:
Powerpoint Templates
Page 35
Objeto: location
Propiedades:
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
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.
Powerpoint Templates
Page 42
Objeto: document
Page 43
Objeto: form
Powerpoint Templates
Page 44