JQUERY & JAVASCRIPT
Objetos, Arrays, Control de flujo
11 Jun 2015
LA SEMANA PASADA
- El DOM
- JavaScript vs Java
- Como usar javascript en HTML
- Tipos de variables y como declaralas
- Operadores
- Funciones
- Como usar funciones primitivas de javasacript para modificar el DOM
ESTA SEMANA
-
Control de flujo
- Objetos y Json
- Más sobre funciones
- JQuery
- CRUD: Practica con formularios y localStorage
Expresiones de control
==
!=
<
>
<=
>=
===
!==
Sentencias de control
if/else
var x = true;
if ( x == true) {
console.log('true');
}
else {
console.log('false');
}
Sentencias de control
switch
var x = "hello";
switch (x == "hello") {
case true:
console.log(x);
break;
case false:
console.log("bye");
break;
default: {
console.log("wowowow");
}
}
Sentencias de control
while loops
x = 0;
while ( x < 5 ) {
x++;
console.log(x);
}
Sentencias de control
for loops
for ( var x = 0; x < 5; x++) {
console.log(x);
}
Ejercicio rapido
Escribir un bucle que va desde x = 0 hasta x <10
dentro del bucle, si x es par, mostrar x y "par" en la consola.
si x es impar, mostrar X e "impar" en la consola.
Objetos
Todo en JavaScript es un objeto
Objetos
var objetoVacio = new Object();
Objects
Podemos agregar propiedades a objetos
var semilleroSecbi = new Object();
semilleroSecbi.nombre = "Semillero de ciencias basicas e ingenieria";
semilleroSecbi.diaDeReunion = "Jueves";
De forma reducida:
var semilleroSecbi = { nombre: "Semillero de ciencias basicas e ingenieria", diaDeReunion: "Jueves"};
Objetos
Podemos poner objetos dentro de objetos
var SemilleroSecbi = {
url: "http://secbi.co",
integrantes: {
primernombre: "Ivan",
segundoNombre: "Ortiz"
},
lineasInvestigacion:{
nombre: "Ing.Software",
publicaciones: "2"
}
};
Objetos
Que pasaria si:
Tengo más de un integrante
o mas de una linea de investigación
Objetos
arrays
var myArray = new Array();
var myArray = new Array(1, 2, "one", 2);
or
var myArray = [];
var myArray= [1, 2,"one",2];
Objetos
Propiedades y metodos de un array
myArray[0]
myArray.length
var arrayToCSVString = myArray.join(',');
myArray.sort();
myArray.push('3');
myArray.pop();
Objetos
Veamos como se usa
var SemilleroSecbi = { url: "http://secbi.co", integrantes: [ { primerNombre: "Ivan", segundoNombre: "Ortiz"
}, { primerNombre: "Alguien", segundoNombre: "Mas" } ] };
JQUERY
- Libreria de javascript
- Ayuda a ahorrase tiempo
- Más funciones
JQUERY
Facil manipulacion del DOM
$( "button.continue" ).html( "Next Step..." );
Manejo de eventos
var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
hiddenBox.show();
});
ACTIVIDAD DE HOY PARTE I
En racho Secbi quiere una aplicación para gestionar sus vacas, donde:
- Se puede agregar una vaca con sus atributos
- Listar el detalle de todas las vacas
- Saber el numero de vacas
Utilizar HTML para hacer los furmularios y Javascript con localStorage para guardar los datos en el navegador.
Pasos a tener en cuenta
- Entender el problema y la arquitectura
- Hacer layout html
- Identificar las variables de entrada
- Definir variables globales
- "Conexión y creación de la base de datos"
- Creación de funciones en Javascript
- Utilizar JQuery para obtener y mostrar los datos
- Probar!
PARTE 2
- Ponerle estilos al sitio
- Que se puedan borrar las vacas
- Que se puedan editar los datos
- Que se pueda buscar una vaca
Gracias !!
JQUERY & JAVASCRIPT
By Julio César
JQUERY & JAVASCRIPT
- 1,065