Módulo 2Introducción a JQuery

ÍndiceConceptos basicos de programacionEjercicios TareaQué es JQuery?Beneficios de JQueryPrimeros pasos con JQuery - Instalación

Conceptos basicos de programacion● Array escalar.● Array asociativos.● Sentencias condicionales:

○ if○ Else○ Switch○ For○ While

Conceptos basicos de programacionArray

Los arrays o matrices son estructuras que permiten el almacenamientode un conjunto de datos bajo un mismo nombre;

son una construcción tradicional de los lenguajes de programación.

Podemos definir un array como un conjunto ordenado de elementosidentificados por un índice (la posición del elemento dentro de estacolección ordenada), de modo que en cada posición marcada por un índiceel array contiene un valor.

Se pueden construir tantos índices como se quiera, aunque el uso habitualde los arrays es en forma de matriz unidimensional.

La longitud del array se modifica de forma dinámica siempre que le añadimosun nuevo elemento.

Conceptos basicos de programacionEjemplo Array Escalar

<script>var MiArray = new Array('Pedro','Juan','Diego');alert(MiArray[0]+", "+MiArray[1]+" y "+MiArray[2]);

</script>

Conceptos basicos de programacionEjemplo Array Asociativo

<script>var MiArray = new Array();MiArray['Nombre'] = "Pedro";MiArray['Correo'] = "yo@pedro.cl";MiArray['Fono'] = "+56 9 7 1234567";alert(MiArray['Nombre']+"=>"+MiArray['Correo']+"=>"+MiArray['Fono']);

</script>

Conceptos basicos de programacionSentencias Condicionales

Son las estructuras de control más sencillas, se basan en el uso de la sentenciaif…else y en las diferentes formas que ésta puede presentar.

Utilizando estas sentencias, somos capaces de hacer que el programa elijaentre dos caminos de ejecución diferentes en función de la evaluación deuna expresión lógica.

Conceptos basicos de programacionSentencias Condicionales - If

Es una de las más utilizadas e importantes en la mayoría de los lenguajes de programación. Su sintaxis es la siguiente:

if (condición) {[sentencias]

}

El intérprete evalúa la condición, que debe ser una expresión lógica y si resulta verdadera, se ejecutarán las sentencias comprendidas entre las llaves “{” y “}” y si es falsa, el browser ignorará las sentencias y seguirá con laejecución normal del programa, es decir, nos permite tomar decisiones en torno a una condición.

Las sentencias if se pueden anidar, es decir, podemos poner dentro de un bloque ifotras sentencias if, lo cual proporciona una flexibilidad completa para ejecuciones condicionales.

Conceptos basicos de programacionEjemplo if

<script>// < = Menor que// > = Mayor quevar MiNum = 90;if(MiNum <= 90){

alert("Se cumple la condicion");}</script>

Conceptos basicos de programacionSentencias Condicionales - If ElseLa sentencia if…else consta de un bloque if que se ejecuta cuando la expresión se evalúa a true y de un bloque else cuyas instrucciones se ejecutarán cuando se evalúa a false.

La sintaxis de la instrucción if…else es la siguiente:

If (expresión) {[sentencias]

} else {[sentencias]

}

Hay muchas ocasiones en que se quiere evaluar una nueva comprobación utilizando una sentencia if dentro del cuerpo de una sentencia else; para estos casos se puede utilizar la sentencia elseif que nos permite combinar ambas sentencias en una sola. La sintaxis de la sentencia if…elseif es la siguiente:

If (expresión) {[sentencias]

} elseif {[sentencias]

}

Conceptos basicos de programacionEjemplo if else

<script>// < = Menor que// > = Mayor que

var MiNum = 90;if(MiNum < 90){

alert("Es Menor");}else{

alert("Es Igual");}

</script>

Conceptos basicos de programacionEjemplo if elseif

<script>// < = Menor que// > = Mayor quevar MiNum = 90;

if(MiNum < 90){alert("Es Menor");

}else if(MiNum > 90){alert("Es mayor");

}else{alert("Es igual");

}</script>

Conceptos basicos de programacionSentencias Condicionales - switch

La sentencia switch se utiliza para comparar un dato con un conjunto de posibles valores.

Esta tarea se puede realizar utilizando múltiples sentencias if o con una sentencia if…elseif múltiple, pero la sentencia switch es mucho más legible y nos permite especificar un conjunto de sentencias por defecto, en el caso de que el dato no tenga un valor con que compararlo.

switch (variable) { case 0: alert("i es igual a 0"); break; case 1: alert("i es igual a 1"); break; case 2: alert("i es igual a 2"); break; default: // si no se cumplen las condiciones se ejecutas el valor por defecto}

Conceptos basicos de programacionEjemplo switch

<script>var variable = 120;switch (variable) { case 10: alert("Valor de case no corresponde al valor de variable: "+variable); break; case 25: alert("Valor de case no corresponde al valor de variable: "+variable); break; case 77: alert("Valor de case no corresponde al valor de variable: "+variable); break; default: alert("Ningun case tenia el valor de variable = "+variable);}</script>

Conceptos basicos de programacionSentencias Condicionales - For

Esta instrucción nos permite realizar un conjunto de instrucciones un determinadonúmero de veces.

Es una de las estructuras de control sintácticamente más compleja de Javascript.

For ([inicialización]; [condición]; [bucles]) {[sentencias]}

Las tres expresiones encerradas entre paréntesis son opcionales, pero es necesarioescribir los caracteres punto y coma (“;”) que las separan aunque las expresionesse omiten, para que cada expresión permanezca en el lugar apropiado.

Conceptos basicos de programacionEjemplo for

<script>var variable = new Array('1','10','20','55','88');for(var i=0;i<variable.length;i++){

alert(variable[i]);//console.log(variable[i]);

}</script>

Conceptos basicos de programacionSentencias Condicionales - while

La sentencia while actúa de forma muy parecida a la sentencia for, pero se diferencia de ésta en que no incluye en su declaración la inicialización de la variable de control del bucle ni su incremento o decremento.

Por tanto dicha variable se deberá declarar antes del bucle while y su incremento y decremento se deberá realizar dentro del cuerpo de dicho bucle.

While (condición) {[sentencias]}

Con esta instrucción se va a poder ejecutar un conjunto de instrucciones un determinado número de veces, siempre y cuando el resultado de comprobar la condición sea verdadera (debe ser una expresión que se evalúe a un valor lógico).

Si la condición se evalúa a true, se ejecutan las sentencias del cuerpo del bucle; después de ejecutarlas, se volverá a evaluar la condición, de forma que, si ésta sigue cumpliéndose, se volverán a ejecutar las sentencias.

Esto se repite hasta que la condición se evalúa a false, en cuyo caso no se ejecutarán las sentencias del cuerpo del bucle y continuará la ejecución del script por la instrucción siguiente a la sentencia while.

Conceptos basicos de programacionEjemplo while

<script>var variable = new Array('1','10','20','55','88');var i = 0;while(i<variable.length){

alert("Los datos del array son: "+variable[i]);//console.log("Los datos del array son: "+variable[i]);i++;

}</script>

Ejercicios Tarea● Cree un array que contenga 10 elementos, cuente todos los elementos del array y muestre en

pantalla.

● Cree un array que contenga 10 elementos, condicione todos aquellos valores que sean múltiplo de 2, aquellos que no sean múltiplos deberá mostrarlos en pantalla con la leyenda "No son múltiplo de 2". Muestrelos en pantalla.

● Con Switch, cree un array que contenga 10 elementos, condicione todos aquellos valores que sean múltiplo de 4, aquellos que no sean múltiplos deberá mostrarlos en pantalla con la leyenda "No son múltiplo de 4". Muestrelos en pantalla.

● Con For y While haga una lista ordenada de números de 1-25;

Qué es JQuery?JQuery es un framework (entorno de desarrollo/trabajo) de Javascript, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX* a páginas web.

* AJAX = Asynchronous JavaScript And XML

Beneficios JQueryEs importante saber que jQuery no es el único framework que existe. Existen varias soluciones similares que también funcionan muy bien y que básicamente nos sirven para hacer lo mismo.

Como es normal, cada uno de los frameworks tiene sus ventajas e inconvenientes, pero jQuery es un producto con de gran aceptación por parte de los programadores y diseñadores con un grado de penetración en el mercado muy amplio, lo que hace suponer que es una de las mejores opciones.

Además, es un producto serio, estable, bien documentado y con un gran equipo de desarrolladores a cargo de la mejora y actualización del framework. Otra cosa muy interesante es la enorme comunidad de creadores de plugins o componentes, lo que hace fácil encontrar soluciones ya creadas en jQuery para implementar asuntos como interfaces de usuario, galerías, votaciones, efectos diversos, etc.

Uno de los competidores de jQuery es Mootools, que también posee ventajas similares, pero su co munidad no es tan grande como la de JQuery

Primeros pasos con JQuery - InstalaciónPara instalar JQuery en nuestro proyecto debemos descargar el archivo desde el sitio oficial del framework.

url: http://jquery.com/download

Primeros pasos con JQuery - Instalación

Primeros pasos con JQuery - InstalaciónVincular el archivo a nuestro pagina html.

<!DOCTYPE html><html>

<head><title>Mi primera pagina integrando JQuery</title><script src="js/jquery.js"></script>

</head>

<body>:)

</body>

</html>