Sentencias Arreglos y Funciones

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.
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>):
Page 4

Page 5

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>
Page 7

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.
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>
Page 9

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>
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;
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
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); }
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>
Page 16
Ciclo while
<script type="text/javascript"> var i=1; while (i<=5) { alert(el numro es : + i); i++; } </script>
Page 17
Ciclo do - while
<script type="text/javascript"> var i=1;

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

</script>
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.
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
----------------------------------------
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
Page 21
Arreglos
Propiedades y Mtodos de los Arreglos:
Mtodos Principales:
join() reverse() sort() slice() push() pop() shift() unshift()
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);
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);
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);
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);
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);
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);
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);
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);
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 }
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; }
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; }
Page 33
Funciones
Funciones globales de javascript: eval() parseInt(3) parseFloat(45.78) isNaN(123)
Page 34
Objeto: window
Propiedades:
name document history location

Mtodos: alert close confirm open prompt setInterval setTimeout
Eventos: onbeforeunload onload onclick
Page 35
Objeto: location
Propiedades:
protocol host href pathname port

Mtodos: reload replace
Page 36
Objeto: history
Propiedades:
length
Mtodos: back forward go
Page 37
Objeto: document
Propiedades:
bgColor title forms Mtodos: open close write getElementById getElementsByName getElementsByTagName
Mtodos: createElement createTextNode Eventos onload onunload onclick
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>
Page 39
DOM
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
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
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:
Page 43
Objeto: form
Page 44

Sentencias Arreglos y Funciones

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Sentencias Arreglos y Funciones

Загружено:

Авторское право:

Доступные форматы

JAVASCRIPT

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

Cmo incluir JavaScript en documentos XHTML?

Cmo incluir JavaScript en documentos XHTML?

Cmo incluir JavaScript en documentos XHTML?

Cmo incluir JavaScript en documentos XHTML?

alert("Un mensaje de prueba");

Cmo incluir JavaScript en documentos XHTML?

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

Aritmticos * Multiplicacin / Divisin + Suma Resta

Lgicos && AND || OR ! NOT

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

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

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

Los arreglos se crean de la siguiente manera:

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

Propiedades y Mtodos de los Arreglos:

Propiedades y Mtodos de los Arreglos:

Ordena al revs los elementos de un arreglo.

Ordena los elementos de un arreglo.

Inserta uno o ms elementos al final del arreglo.

Elimina el ltimo elemento de un arreglo.

Inserta uno o ms elementos al inicio del arreglo.

Elimina el primer elemento de un arreglo.

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

name document history location

Eventos: onbeforeunload onload onclick

protocol host href pathname port

Mtodos: createElement createTextNode Eventos onload onunload onclick

Existen principalmente dos tipos de Nodos: Element Text

Para crear Nodos se utilizan los mtodos:

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

Вам также может понравиться