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

  1. Entender el problema y la arquitectura
  2. Hacer layout html
  3. Identificar las variables de entrada
  4. Definir variables globales
  5. "Conexión y creación de la base de datos"
  6. Creación de funciones en Javascript
  7. Utilizar JQuery para obtener y mostrar los datos
  8. Probar!

PARTE 2

  1. Ponerle estilos al sitio
  2. Que se puedan borrar las vacas
  3. Que se puedan editar los datos
  4. Que se pueda buscar una vaca 



Gracias !!

Made with Slides.com