script.js

/*
Tipos de datos

Primitivos
	-String : "" '' ``
	-Number : 1 1.5 -3
	-Boolean : {true|any}  ó {false|null|undefined|0|""}
	-undefined : Una variable sin valor ó una funcion sin retorno
	-null


Objetos : matrices indexadas asociativas
	-Object : {x:1}
	-Array : [1,2,3]
	-Function : function foo(){} foo() foo.x = 1
	-Date
	-Math
	-Console
	-XMLHttpRequest
*/

//Pasa por valor
var a = 1
var b = a
a = 10
//Pasa por referencia
var c = {x:1}
var d = c
c.x = 10
/*
var - let - const
*/
//redeclaracion
var a = 10
var a = 20
//redefinir
var b = 10
b = 30
//no permanece en scope
if(true){
	var y = 10
	console.log(y)
}
console.log(y)
//Le pertenece al objeto global


//No admite redeclaracion
let f = 10
//let f = 20
//redefinicion
f = 50
//admite scope de cualquier bloque
if(true){
	let x = 10
	console.log(x)
}
//console.log(x)
//es parcialmente global

//no admite redeclaracion
const h = 10
//const h = 10
//no admite redefinicion total / si admite parcial
//h = 20
const i = {x:1}
i.x = 10
//admite scope de cualquier bloque
if(true){
	const z = 10
	console.log(z)
}
//console.log(z)

function foo(){
	var a = 10
}
//variable funcional
var foo = function(){}
window.foo = function(){}


/*
Notaciones


punto

*/
//corchete
var arr = [1,2,3]
var indice = 1
//Indices numericos
arr[0]//1
//Indices string
arr["length"]
//Indices variables
arr[indice]//2
//punto
//Indices numericos
//arr.0//Unexpected Number
//indices string
arr.length
//indices variables
arr.indice//undefined

console.clear()

//JSON : Javascript Object Notation
//BOM Browser Object Model
/*

innerHeight/innerWidth : medidas del HTML
outerHeigth/outerWidth : medidas del navegador
location.href : barra de navegacion
history.back/forward/go(N) : controla el historial


*/

function uno(){dos()}
function dos(){tres()}
function tres(){cuatro()}
function cuatro(){console.error("error")}
uno()

console.time("contador")
for (var k = 0; k < 100000; k++) {
	continue;
}
console.timeEnd("contador")

console.table([{x:1,y:2},{x:1,y:2},{x:1,y:2}])

console.clear()

console.dir(document)
//DOM : Document Object Model
//Seleccionar nodos
/*

let h1 = document.getElementById('titulo') => Node
let h1 = document.getElementByClassName('titulo') => Array
let h1 = document.getElementsByTagName('h1') => Array

let h1 = document|Node.querySelector('') => Node
let h1 = document|Node.querySelectorAll('') => Array

*/

let lista = document.querySelector("ul")
let items = lista.querySelectorAll("li")


//Editar nodos
let h1 = document.getElementById('titulo')
/*
h1.getAttribute("id")
h1.setAttribute("id","nuevoid")
*/
console.log(h1.id)
h1.id = "nuevoid"



//Crear nodos
//document.createElement(String any) => HTMLElement | Unknown Element
let p = document.createElement("p")
p.id = "parrafo"
p.innerText = "lorem Ipsum"
let body = document.querySelector("body")
body.appendChild(p)
//Node.appendChild(Node)
lista.appendChild(p )
//Borrar nodos
//body.removeChild(p)
/*
Parent.insertBefore(New,Ref)
*/

let lista_nueva = document.getElementById("lista")
let fragmentos = document.createDocumentFragment()

for (var l = 0; l < 5; l++) {
	let li = document.createElement("li")
	li.innerText = `Item ${l}`
	fragmentos.appendChild(li)
}

lista_nueva.appendChild(fragmentos)

//Agregar un nodo - remover un nodo - cambiar el id , texto , clase , estilos
//Reflow/Relayout : Calculo de tamaño de cada etiqueta
//Repaint : Volver a pintar el CSS


/*
Eventos : La ejecucion de una funcion(callback) como respuesta a una accion
*/
//onclick="console.log('click')"
let btn = document.querySelector("button")
//btn.onclick = console.log('click')
/*btn.onclick = function(){
	console.log("click")
}

btn.onclick = hacerClick

function hacerClick(){
	console.log("click hacer click")
}*/

//Nodo.addEventListener(String tipo,Function callback[,Boolean fase])
btn.addEventListener("click",function(){
	console.log("click 1")
})

btn.addEventListener("click",function(){
	console.log("click 2")
})

window.addEventListener("re",function(){
	console.log("click 3")
})

/*
El objeto global window tiene un evento llamado resize que se ejecuta cada vez que el navegador cambia su tamaño.
Si el ancho esta a menos de 500px , cambiar el color de fondo del body por rojo o azul si estoy a mas de esa medida
*/

btn.addEventListener("",function(){
	console.log("click 1")
})



let bodyy = document.querySelector("body")

window.addEventListener("resize",cambiarColor)

function cambiarColor(){
	if(innerWidth<500){
		bodyy.style.backgroundColor = "red"
	}else{
		bodyy.style.backgroundColor = "blue"
	}
}


let usuarios = [{"nombre":"Arturo","apellido":"Villa","email":"Lucia77@hotmail.com","usuario":"Vicente21","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/bcrad/128.jpg","album":["http://lorempixel.com/100/100/nightlife","http://lorempixel.com/100/100/nightlife","http://lorempixel.com/100/100/abstract"]},{"nombre":"Manuela","apellido":"Zamudio","email":"Guillermina_Bahena@gmail.com","usuario":"Inés_Alaniz1","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/chrisstumph/128.jpg","album":["http://lorempixel.com/100/100/transport","http://lorempixel.com/100/100/cats","http://lorempixel.com/100/100/technics"]},{"nombre":"Mariano","apellido":"Avilés","email":"Emilio47@yahoo.com","usuario":"Lucas.Maya","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/joannefournier/128.jpg","album":["http://lorempixel.com/100/100/abstract","http://lorempixel.com/100/100/transport","http://lorempixel.com/100/100/sports"]},{"nombre":"Samuel","apellido":"Escobar","email":"David.Borrego94@gmail.com","usuario":"Octavio.Atencio14","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/hjartstrorn/128.jpg","album":["http://lorempixel.com/100/100/technics","http://lorempixel.com/100/100/nature","http://lorempixel.com/100/100/city"]},{"nombre":"Salvador","apellido":"Nava","email":"Gilberto.Nava@hotmail.com","usuario":"Emilio85","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/keyuri85/128.jpg","album":["http://lorempixel.com/100/100/transport","http://lorempixel.com/100/100/people","http://lorempixel.com/100/100/sports"]}]

for (var l = 0; l < usuarios.length; l++) {
	let divusuarios = document.createElement("div")
	let imgusuarios = document.createElement("img")
	let h3usuarios = document.createElement("h3")
	let pusuarios = document.createElement("p")
	let spanusuarios = document.createElement("span")
	divusuarios.class = "usuario"
	divusuarios.id = l;

	imgusuarios.src = usuarios[l].avatar;

	h3usuarios.innerText = "Mi" +usuarios[l].nombre+ "y" + usuarios[l].apellido + usuarios[l].usuario
	pusuarios.innerText= usuarios[l].email


	let figureusuarios = document.createElement("figure")
	figureusuarios.class = "album"


	for (var o = 0; o< usuarios[l].album[o].length; o++) {
		let img1= figureusuarios.createElement("img")
		img1.src = usuarios[l].album[o];
		figureusuarios.appendChild(img1)
	}
	body.appendChild(h3usuarios)
	body.appendChild(divusuarios)
	body.appendChild(imgusuarios)
	body.appendChild(pusuarios)
	body.appendChild(figureusuarios)
}

ejemplo profesor:
for (var d = 0; d < personas.length ; d++) {

	let cuerpo = document.createElement("div")
	let avatar = document.createElement("img")
	let nombre = document.createElement("h3")
	let span = document.createElement("span")
	let email = document.createElement("p")
	let album = document.createElement("figure")

	cuerpo.className = "usuario"
	cuerpo.id = d
	avatar.src = personas[d].avatar
	nombre.innerText = `${personas[d].nombre} ${personas[d].apellido}`
	span.innerText = personas[d].usuario
	email.innerText = personas[d].email

	nombre.appendChild(span)

	cuerpo.appendChild(avatar)
	cuerpo.appendChild(nombre)
	cuerpo.appendChild(email)
	cuerpo.appendChild(album)
	fragmentos.appendChild(cuerpo)
}
lista.appendChild(fragmentos)

/*
Bubbling : Dispara el callback registrado del mismo nodo y va subiendo por todos los nodos padres directo ejecutando el callback del mismo evento si tuviera uno registrado

Capturing : Opuesto a bubbling
*/

window.addEventListener("click",function(e){
	console.log("click 3")
	console.log(e)
}/*,true*/)

let div_tres = document.getElementById("tres")
div_tres.addEventListener("click",function(e){
	//e.stopPropagation()
	console.log("div 3")
}/*,true*/)

let div_uno = document.getElementById("uno")
div_uno.addEventListener("click",function(){
	console.log("div 1")
}/*,true*/)



	let title = document.createElement("h3")
	let btn1 = document.createElement("button")
    let btn2 = document.createElement("button")
    title.innerText = "esta seguro que quiere salir?"

    btn1.innerText = "Aceptar"

    btn2.innerText = "Cancelar"


let aa = document.querySelector("a")
aa.addEventListener("click",function(e){

    e.stopPropagation()
	e.preventDefault()


    body.appendChild(btn1)
    body.appendChild(btn2)
    body.appendChild(title)



	/*
		Mostrar en el DOM un mensaje de confirmacion("esta seguro que quiere salir?") y dos botones que digan aceptar y cancelar.
		Si hago click en aceptar cambio la url de la barra de navegacion por el href del link y si hago click en cancelar , borro todo el mensaje de confirmacion y los dos botones
	*/
})



	btn1.addEventListener("click",function(){
		e.stopPropagation()
		window.location.href = aa.href;
	})

	btn2.addEventListener("click",function(){
		e.stopPropagation()
		body.removeChild(title)
		body.removeChild(btn1)
		body.removeChild(btn2)
	})

//alert(1)

//ejemplo profesor

let aaa = document.querySelector("a")
aaa.addEventListener("click",confirmacion)

let mensaje = document.createElement("span")
let botonOk = document.createElement("button")
let botonCancel = document.createElement("button")
mensaje.innerText = "Confirmar accion"
botonOk.innerText = "Ok"
botonCancel.innerText = "Cancelar"

function confirmacion(e) {
	e.stopPropagation()
	e.preventDefault()
	body.appendChild(mensaje)
	body.appendChild(botonOk)
	body.appendChild(botonCancel)
}

botonOk.addEventListener("click",redirigir)
function redirigir(e){
	e.stopPropagation()
	location.href = aaa.href
}


botonCancel.addEventListener("click",cancel)
function cancel(e){
	e.stopPropagation()
	body.removeChild(mensaje)
	body.removeChild(botonOk)
	body.removeChild(botonCancel)
}
//alert(1)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		h1{
			color: red;
		}
		#uno{width: 200px;height: 200px;background: red;}
		#dos{width: 150px;height: 150px;background: green;}
		#tres{width: 100px;height: 100px;background: blue;}
	</style>
</head>
<body>
	<a href="http://google.com">google</a>
	<div id="uno">
		<div id="dos">
			<div id="tres"></div>
		</div>
	</div>
	<button >click</button>
	<h1 id="titulo" class="titulo">Titulo</h1>
	<ul>
		<li>link 1</li>
		<li>link 2</li>
		<li>link 3</li>
	</ul>
	<ul id="lista"></ul>
	<script src="script.js"></script>
</body>
</html>

link util

https://developer.mozilla.org/es/docs/Web/API
alumni.educacionit.com
Undefined: variable sin valor o una función sin retorno.
Bool asd
If(asd) –Si asd es false puede ser null undefined 0 etc