(Guía de inicio rápido para principiantes) Uso de JavaScript

	//Asignación de valores a variables
	var cantidad = 10
	var nombre = "Dean"
	var fecha = new Date()
	var persona = {
		nombre: "Sarah",
		edad:35
	};

		
	//Objetos (Agrupan propiedades en una variable)
	var persona = {
		nombre: "Sarah",
		edad:35
	};

	//Mostrando información a la consola
	console.log(persona.nombre)
	//Output: Sarah
	console.log(persona.edad)
	//Output: 35
	

Listas de Elementos

var listaNumeros = [5,4,3,2,1]
var listaPersonas = [
	{nombre:"Sarah", edad:35},
	{nombre:"Vicky", edad:25}
]
	

Operaciones sobre listas

Buscar un elemento (forma 1) Vamos a buscar la persona cuyo nombre es Sarah Para ello recorremos el array

			

	var persona

	for (var i = 0; i < listaPersonas.length; i++) {
		if (listaPersonas[i].nombre === "Sarah" ) {
			persona = listaPersonas[i]
		}
	}

		
	

Operaciones sobre listas

Buscar un elemento (forma 1) Vamos a buscar la persona cuyo nombre es Sarah Para ello recorremos el array

/* Forma 2: Usando el método "find"
   Recibe una función con la cual se evalúan los elementos de la lista.
   Si la función retorna true para un elemento. Este es retornado.
*/

var persona = listaPersonas.find( function(elemento){

	if (elemento.nombre === "Sarah") {
		return true;
	} else {
		return false
	}
})

	

Agregando/Eliminando elementos

		
//Métodos útiles de las listas:
//Agregar elemento
listaPersonas.push(otraPersona)

//Eliminar el último elemento ( y retornarlo por si queremos guardarlo)
var borrado = listaNumeros.pop()

//splice(indiceInicial, cantidadABorrar, elementoNuevo1, elementoNuevo2....)
//Eliminar 2 elementos empezando por el indice 3 ( es decir en la 4 posición)
listaPersonas.splice(3,2)

//También se puede usar splice para agregar elementos en una posición
//Para ello se pasa 0 en la cantidadABorrar
listaPersonas.splice(2,0,otraPersona)
		
	

Temporizadores (setTimeout, setInterval)

		
	
setTimeout(function () {
  console.log("Esta función se ejecutará en 1 segundo, una sola vez")
}, 1000)

setInterval(function () {
  console.log("Esta función se ejecutada cada segundo. Indefinidamente")
}, 1000)
		
	

Manipulación de elementos Con JavaScript

Con JavaScript podemos cambiar los elementos de la página. Este proceso tiene 2 pasos

• 1. Obtener el o los elementos
• 2. Modificar sus atributos

Podemos obtener los elementos de varias maneras.

• Por su identificador único (id)
• Por una de las clases que tengan (atributo class)
• Por su etiqueta (div,span,table...)

		
	document.querySelector(selector) //retorna UN solo elemento
	document.querySelectorAll(selector) //retorna una lista de elementos
	document.getElementById('#id') //busca por id (requiere símbolo #)
	
	//Podemos agregar o quitar clases a un nodo:
	//En este caso agregamos la clase 'activo' al elemento con id=noticias
	document.querySelector('#noticias').classList.add('activo')

	//Podemos guardar el elemento en una variable primero
	//para hacer el código más corto
	var elementoNoticias = document.querySelector('#noticias')
	elementoNoticias.classList.add('activo')
	elementoNoticias.classList.add('animar')

	/* Nota: Tengan en cuenta que querySelectorAll retorna una lista de elementos. Por lo cual no podemos usar classList directamente sobre el resultado, debemos recorrer la lista o acceder a un elemento específico.
	
	Ejemplo: document.querySelectorAll('.encabezado')[0]
	*/
	
	

Cómo animar elementos de la página?

El proceso de animar puede dividirse en 3 pasos

• 1. Obtener el elemento usando algún selector apropiado
• 2. Seleccionar la animación de CSS
• 3. Agregar la clase correspondiente al elemento

Podemos descargar el archivo CSS de la librería 'animate.css'. Esta ya tiene una gran cantidad de animaciones listas para usar. Demo de Animate.css

	setTimeout(function () {
		document.querySelector('#cuadro1').classList.add('bounce')
		document.querySelector('#cuadro1').classList.add('animated')
	},500)

	setTimeout(function () {
		document.querySelector('#cuadro2').classList.add('bounce')
		document.querySelector('#cuadro2').classList.add('animated')
	},1000)

	setTimeout(function () {
		document.querySelector('#cuadro3').classList.add('bounce')
		document.querySelector('#cuadro3').classList.add('animated')
	},1500)

	setTimeout(function () {
		document.querySelector('#cuadro4').classList.add('bounce')
		document.querySelector('#cuadro4').classList.add('animated')
	},2000)