Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Módulo 2
Introducción a JQuery
Índice
Conceptos basicos de programacion
Ejercicios Tarea
Qué es JQuery?
Beneficios de JQuery
Primeros pasos con JQuery - ...
Conceptos basicos de
programacion
●
●
●

Array escalar.
Array asociativos.
Sentencias condicionales:
○ if
○ Else
○ Switch
...
Conceptos basicos de
programacion
Array
Los arrays o matrices son estructuras que permiten el almacenamiento
de un conjunt...
Conceptos basicos de
programacion
Ejemplo Array Escalar
<script>
var MiArray = new Array('Pedro','Juan','Diego');
alert(Mi...
Conceptos basicos de
programacion
Ejemplo Array Asociativo
<script>
var MiArray = new Array();
MiArray['Nombre'] = "Pedro"...
Conceptos basicos de
programacion
Sentencias Condicionales
Son las estructuras de control más sencillas, se basan en el us...
Conceptos basicos de
programacion
Sentencias Condicionales - If
Es una de las más utilizadas e importantes en la mayoría d...
Conceptos basicos de
programacion
Ejemplo if
<script>
// < = Menor que
// > = Mayor que
var MiNum = 90;
if(MiNum <= 90){
a...
Conceptos basicos de
programacion
Sentencias Condicionales - If Else
La sentencia if…else consta de un bloque if que se ej...
Conceptos basicos de
programacion
Ejemplo if else
<script>
// < = Menor que
// > = Mayor que
var MiNum = 90;
if(MiNum < 90...
Conceptos basicos de
programacion
Ejemplo if elseif
<script>
// < = Menor que
// > = Mayor que
var MiNum = 90;
if(MiNum < ...
Conceptos basicos de
programacion
Sentencias Condicionales - switch
La sentencia switch se utiliza para comparar un dato c...
Conceptos basicos de
programacion
Ejemplo switch
<script>
var variable = 120;
switch (variable) {
case 10:
alert("Valor de...
Conceptos basicos de
programacion
Sentencias Condicionales - For
Esta instrucción nos permite realizar un conjunto de inst...
Conceptos basicos de
programacion
Ejemplo for
<script>
var variable = new Array('1','10','20','55','88');
for(var i=0;i<va...
Conceptos basicos de
programacion
Sentencias Condicionales - while
La sentencia while actúa de forma muy parecida a la sen...
Conceptos basicos de
programacion
Ejemplo while
<script>
var variable = new Array('1','10','20','55','88');
var i = 0;
whi...
Ejercicios Tarea
●

Cree un array que contenga 10 elementos, cuente todos los elementos del array y muestre en
pantalla.

...
Qué es JQuery?
JQuery es un framework (entorno de desarrollo/trabajo) de Javascript, que
permite simplificar la manera de ...
Beneficios JQuery
Es importante saber que jQuery no es el único framework que existe. Existen varias soluciones
similares ...
Primeros pasos con JQuery Instalación
Para instalar JQuery en nuestro proyecto debemos descargar el archivo desde
el sitio...
Primeros pasos con JQuery Instalación
Primeros pasos con JQuery Instalación
Vincular el archivo a nuestro pagina html.
<!DOCTYPE html>
<html>
<head>
<title>Mi p...
Upcoming SlideShare
Loading in …5
×

Jquery modulo-2

593 views

Published on

Conceptos basicos de programacion, introduccion a jquery

  • Be the first to comment

Jquery modulo-2

  1. 1. Módulo 2 Introducción a JQuery
  2. 2. Índice Conceptos basicos de programacion Ejercicios Tarea Qué es JQuery? Beneficios de JQuery Primeros pasos con JQuery - Instalación
  3. 3. Conceptos basicos de programacion ● ● ● Array escalar. Array asociativos. Sentencias condicionales: ○ if ○ Else ○ Switch ○ For ○ While
  4. 4. Conceptos basicos de programacion Array Los arrays o matrices son estructuras que permiten el almacenamiento de 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 elementos identificados por un índice (la posición del elemento dentro de esta colección ordenada), de modo que en cada posición marcada por un índice el array contiene un valor. Se pueden construir tantos índices como se quiera, aunque el uso habitual de los arrays es en forma de matriz unidimensional. La longitud del array se modifica de forma dinámica siempre que le añadimos un nuevo elemento.
  5. 5. Conceptos basicos de programacion Ejemplo Array Escalar <script> var MiArray = new Array('Pedro','Juan','Diego'); alert(MiArray[0]+", "+MiArray[1]+" y "+MiArray[2]); </script>
  6. 6. Conceptos basicos de programacion Ejemplo 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>
  7. 7. Conceptos basicos de programacion Sentencias Condicionales Son las estructuras de control más sencillas, se basan en el uso de la sentencia if…else y en las diferentes formas que ésta puede presentar. Utilizando estas sentencias, somos capaces de hacer que el programa elija entre dos caminos de ejecución diferentes en función de la evaluación de una expresión lógica.
  8. 8. Conceptos basicos de programacion Sentencias 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 la ejecució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 if otras sentencias if, lo cual proporciona una flexibilidad completa para ejecuciones condicionales.
  9. 9. Conceptos basicos de programacion Ejemplo if <script> // < = Menor que // > = Mayor que var MiNum = 90; if(MiNum <= 90){ alert("Se cumple la condicion"); } </script>
  10. 10. Conceptos basicos de programacion Sentencias Condicionales - If Else La 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] }
  11. 11. Conceptos basicos de programacion Ejemplo if else <script> // < = Menor que // > = Mayor que var MiNum = 90; if(MiNum < 90){ alert("Es Menor"); }else{ alert("Es Igual"); } </script>
  12. 12. Conceptos basicos de programacion Ejemplo if elseif <script> // < = Menor que // > = Mayor que var MiNum = 90; if(MiNum < 90){ alert("Es Menor"); }else if(MiNum > 90){ alert("Es mayor"); }else{ alert("Es igual"); } </script>
  13. 13. Conceptos basicos de programacion Sentencias 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 }
  14. 14. Conceptos basicos de programacion Ejemplo 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>
  15. 15. Conceptos basicos de programacion Sentencias Condicionales - For Esta instrucción nos permite realizar un conjunto de instrucciones un determinado nú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 necesario escribir los caracteres punto y coma (“;”) que las separan aunque las expresiones se omiten, para que cada expresión permanezca en el lugar apropiado.
  16. 16. Conceptos basicos de programacion Ejemplo 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>
  17. 17. Conceptos basicos de programacion Sentencias 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.
  18. 18. Conceptos basicos de programacion Ejemplo 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>
  19. 19. 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;
  20. 20. 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
  21. 21. Beneficios JQuery Es 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
  22. 22. Primeros pasos con JQuery Instalación Para instalar JQuery en nuestro proyecto debemos descargar el archivo desde el sitio oficial del framework. url: http://jquery.com/download
  23. 23. Primeros pasos con JQuery Instalación
  24. 24. Primeros pasos con JQuery Instalación Vincular 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>

×