programacion avanzada javascript
DESCRIPTION
Para las aplicaciones más complejas son necesarios otros elementos como las funciones y otras estructuras de control más avanzadas.TRANSCRIPT
![Page 1: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/1.jpg)
Capítulo 4: Programación Avanzada
Por: Víctor Martínez, Grace Ojo y Lois Ortega
Junio 2012
UNIVERSIDAD DE PANAMÁ CENTRO REGIONAL UNIVERSITARIO DE COCLÉ
FACULTAD DE INFORMÁTICA, ELECTRÓNICA Y COMUNICACIÓN PROGRAMACIÓN PARA LA WEB
![Page 2: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/2.jpg)
CONTENIDOS
4.1 FUNCIONES
4.2 ÁMBITO DE LAS VARIABLES
4.3 SENTENCIAS BREAK Y CONTINUE
4.4 OTRAS ESTRUCTURAS DE CONTROL
4.1.1. ARGUMENTOS Y VALORES DE RETORNO
![Page 3: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/3.jpg)
4.1 FUNCIONES
• Cuando se desarrolla una aplicación
compleja, es muy habitual utilizar una y otra vez las mismas instrucciones.
• Son la solución a todos estos problemas, tanto en JavaScript como en el resto de lenguajes de programación.
![Page 4: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/4.jpg)
EJEMPLO DE FUNCIONES
function suma_y_muestra() { resultado = numero1 + numero2; alert("El resultado es " + resultado); } var resultado; var numero1 = 3; var numero2 = 5; suma_y_muestra(); numero1 = 10; numero2 = 7; suma_y_muestra(); numero1 = 5; numero2 = 8; suma_y_muestra(); ...
![Page 5: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/5.jpg)
4.1.1. ARGUMENTOS Y VALORES DE RETORNO
Antes de que pueda utilizarlos, la función debe indicar cuántos argumentos necesita y cuál es el nombre de cada argumento. Además, al invocar la función, se deben incluir los valores que se le van a pasar a la función. Los argumentos se indican dentro de los paréntesis que van detrás del nombre de la función y se separan con una coma (,).
![Page 6: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/6.jpg)
EJEMPLO DE ARGUMENTOS
// Definición de la función function suma_y_muestra(primerNumero, segundoNumero) { ... } var resultado = primerNumero + segundoNumero; alert("El resultado es " + resultado); } // Declaración de las variables var numero1 = 3; var numero2 = 5; // Llamada a la función suma_y_muestra(numero1, numero2);
![Page 7: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/7.jpg)
4.2. ÁMBITO DE LAS VARIABLES
Es la zona del programa en la que se define la variable. JavaScript define dos ámbitos para las variables: Global y Local.
Ejemplo ilustra el comportamiento de los ámbitos:
function creaMensaje() {
var mensaje = “Mensaje de prueba”;
}
creaMensaje();
alert(mensaje);
![Page 8: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/8.jpg)
VARIABLE GLOBAL Y LOCAL
La razón es que la variable mensaje se ha definido dentro de la función creaMensaje() y por tanto, es una variable local que solamente está definida dentro de la función.
Además de variables locales, también existe el concepto de variable global, que está definida en cualquier punto del programa (incluso dentro de cualquier función).
![Page 9: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/9.jpg)
EJEMPLO VARIABE GLOBAL Y LOCAL
function creaMensaje() {
var mensaje = “Mensaje de prueba”;
alert(mensaje);
}
creaMensaje();
var mensaje = “Mensaje de prueba”;
function muestraMensaje() {
alert(mensaje);
}
![Page 10: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/10.jpg)
4.3 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.
![Page 11: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/11.jpg)
EJEMPLO SENTENCIA BREAK Y CONTINUE
var cadena = "En un lugar de la Mancha de cuyo nombre no quiero acordarme..."; var letras = cadena.split(""); var resultado = ""; for(i in letras) { if(letras[i] == 'a') { break; } else { resultado += letras[i]; } } alert(resultado); // muestra "En un lug"
var cadena = "En un lugar de la Mancha de cuyo nombre no quiero acordarme..."; var letras = cadena.split(""); var resultado = ""; for(i in letras) { if(letras[i] == 'a') { continue; } else { resultado += letras[i]; } } alert(resultado); // muestra "En un lugr de l Mnch de cuyo nombre no quiero cordrme..."
![Page 12: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/12.jpg)
4.4 OTRAS ESTRUCTURAS DE CONTROL
4.4.1. ESTRUCTURA WHILE
4.4.2. ESTRUCTURA DO...WHILE
4.4.3. ESTRUCTURA SWITCH
![Page 13: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/13.jpg)
Permite crear bucles que se ejecutan ninguna o más veces, dependiendo de la condición indicada. Su definición formal es:
while(condicion) {
...
}
El funcionamiento del bucle while : "mientras se cumpla la condición indicada, repite indefinidamente las instrucciones incluidas dentro del bucle".
4.4.1. ESTRUCTURA WHILE
![Page 14: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/14.jpg)
var resultado = 0;
var numero = 100;
var i = 0;
while(i <= numero) {
resultado += i;
i++;
}
alert(resultado);
EJEMPLO ESTRUCTURA WHILE
![Page 15: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/15.jpg)
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. Su definición formal es:
do {
...
} while(condicion);
4.4.2. ESTRUCTURA DO...WHILE
![Page 16: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/16.jpg)
El factorial de un número:
var resultado = 1;
var numero = 5;
do {
resultado *= numero; // resultado = resultado * numero
numero--;
} while(numero > 0);
alert(resultado);
EJEMPLO ESTRUCTURA DO...WHILE
![Page 17: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/17.jpg)
La estructura switch es la más eficiente, ya que está especialmente diseñada para manejar de forma sencilla múltiples condiciones sobre la misma variable , mediante la palabra reservada switch seguida, entre paréntesis, del nombre de la variable que se va a utilizar en las comparaciones. Como es habitual, las instrucciones que forman parte del switch se encierran entre las llaves { y }.
4.4.3. ESTRUCTURA SWITCH
![Page 18: Programacion Avanzada JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022052307/557ae527d8b42a590b8b525a/html5/thumbnails/18.jpg)
switch(variable) {
case valor_1: ...
break;
case valor_2: ...
break; ...
case valor_n: ...
break;
default: ...
break;
}
EJEMPLO ESTRUCTURA SWITCH
switch(numero) {
case 5: ...
break;
case 8: ...
break;
case 20: ...
break;
default: ...
break;
}