Javascript

Importante

"No piense que la programación no es para usted."

Eso no está permitido :)

Todos tenemos ritmos diferentes. Es cuestión de codificar y codificar hasta dominar el lenguaje de programación.

Configurar el entorno

Instalar del editor Visual Studio Code: https://code.visualstudio.com/

Fundamentos de Javascript

Hola Mundo

alert('Hola Mundo');

Introducción a JS

Javascript en una lenguaje de programación de alto nivel,

orientado a objetos y multiparadigma.

Instrucción para que la computadora haga cosas

No nos preocupamos de cosas complejas como manejo de memoria

Basado en objetos para almacenar la mayoría de los tipos de datos

Diferentes estilos de programación

Rol de JS en el DW

Efectos dinámicos y aplicaciones Web en el navegador

Aplicaciones Web en el servidor

Aplicaciones móviles nativa

Aplicaciones de escritorio nativa

Rol de JS en el DW

ES5

ES6/ ES2015

ES7/ ES2016

ES8/ ES2017

ES9/ ES2018

ES10/ ES2019

ES11/ ES2020

Enlazar archivo Javascript

<script src="script.js"></script>

Variables

let js = 'amazing';

console.log(10 + 15 + 30);

// Las variable pueden contener letra, números, guión bajo y signo de dólar
// Tampoco es conveniente usar palabras reservadas
// Usa nombres de variables descriptivos

let firstName = 'Wilfredo Meneses';

console.log(firstName);
console.log(firstName);
console.log(firstName);

let myFirtsJob = 'Programador';
let myCurrentJob = 'Profesor';
console.log(myFirtsJob);

Tipo

Valor

OBJETO

PRIMITIVO

let me = {
  name: "Wilfredo"
};

let firstName = 'Wilfredo Meneses';
let myFirtsJob = 'Programador';
let myCurrentJob = 'Profesor';

7 tipos primitivos

let age = 23;

Number: número de punto flotante (para enteros y decimales)
String: secuencia de caracteres (usado para texto)
Boolean: tipo lógico que solo puede ser true o false
Undefined: valor tomado por una variable que todavía no ha sido definida ('empty value
Null: también significa 'empty value'
Symbol (ES2015: valor que es único y no puede ser cambiado (no útil por ahora)
BigInt (ES2020): Entero grande que no puede contener el Number

let firstName = 'Luis';

let completed = false;

let children;

Tipo dinámico

No tenemos que definir manualmente el tipo de dato del valor que almacena una variable. En su lugar el tipo de dato es determinado de forma automática.

Tipos de datos

let javascriptIsFun = true;
console.log(javascriptIsFun);

console.log(typeof true);
console.log(typeof javascriptIsFun);
console.log(typeof 23);
console.log(typeof 'Wilfredo');

javascriptIsFun = 'Sí!';
console.log(typeof javascriptIsFun);

let year;
console.log(year);
console.log(typeof year);

year = 2020;
console.log(typeof year);

Let, const y var

let y const incluido en ES6

let age = 37;
age = 35;

const birthYear = 1991;

var job = 'Programador';
job = 'Profesor';

Operadores básico

// Operadores matemáticos
const now = 2020;
const ageWilfredo = now - 1983;
const ageLuisa = now - 1984;

console.log(ageWilfredo, ageLuisa);

console.log(ageWilfredo * 2, ageWilfredo / 2, 2 ** 3);

const firstName = 'Wilfredo';
const lastName = 'Meneses';

console.log(firstName + ' ' + lastName);

// Operador de asignación
let x = 10 + 5;
x += x + 5;
x *= 4;
x++;
x--;
x--;
console.log(x);

// Operadores de comparación
console.log(ageWilfredo > ageLuisa);
console.log(ageLuisa >= 36);

const luisaIsUnderAge = ageLuisa < 18;
console.log(luisaIsUnderAge);

Precedencia

// Ver la siguinete ruta: 
// https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Operator_Precedence

const now = 2020;
const ageWilfredo = now - 1983;
const ageLuisa = now - 1984;

console.log(now - 1991 > now - 2018);

console.log(25 - 10 - 5);

let x, y;
x = y = 25 - 10 - 5;

console.log(x, y);

const averageAge = (ageWilfredo + ageLuisa) / 2;

console.log(averageAge);

String y Template Literals

ES6

const firstName = 'Wilfredo';
const job = 'Profesor';
const birthYear = 1983;
const now = 2020;

// const wilfredo =
//   'Soy ' +
//   firstName +
//   ' tengo ' +
//   (now - birthYear) +
//   ' años y trabajo como ' +
//   job +
//   '!';

const wilfredo = `Soy ${firstName}, tengo ${
  now - birthYear
} años y trabajo como ${job}`;

console.log(wilfredo);

console.log('Cadena \n\
con múltiples\n\
líneas');

console.log(`Cadena
con múltiples
líneas`);

Declaración if

const age = 15;
const isOldEnough = age >= 18;

if (isOldEnough) {
  console.log('Luisa puede obtener la licencia para conducir 🚗');
} else {
  const yearsLeft = 18 - age;
  console.log(`Luisa es demasiado joven, espera otros ${yearsLeft} años`);
}

DOM y Eventos

Fundamentos

¿Qué es el DOM?

El DOM proporciona una representación estructural del documento, permitiendo la modificación de su contenido o su presentación visual. Esencialmente, comunica las páginas web con los scripts o los lenguajes de programación.

Estructura del DOM

Objeto especial el cual es el punto de entrada al DOM. Por ejemplo: document.querySelector()

DOM !== Javascript

Proyecto: Adivina número

Seleccionar y manipular elementos

'use strict';

console.log(document.querySelector('.message').textContent);

document.querySelector('.message').textContent = '🎉 Número correcto';

console.log(document.querySelector('.message').textContent);


document.querySelector('.number').textContent = 13;
document.querySelector('.score').textContent = 11;


document.querySelector('.guess').value = 10;
console.log(document.querySelector('.guess').value);

Manejar evento click

document.querySelector('.check').addEventListener('click', function (){
	const guess = Number(document.querySelector('.guess').value);
	console.log(guess, typeof guess);
	if(!guess){
		document.querySelector('.message').textContent ="⛔️ No hay número!"
	}
});

Implementar la lógica del juego

const secretNumber = Math.trunc(Math.random()*20) + 1;
let score = 20;

document.querySelector('.number').textContent = secretNumber;
// document.querySelector('')

document.querySelector('.check').addEventListener('click', function (){
	const guess = Number(document.querySelector('.guess').value);
	console.log(guess, typeof guess);
	if(!guess){
		document.querySelector('.message').textContent ="⛔️ No hay número!"
	} else if(guess === secretNumber) {
		document.querySelector('.message').textContent = '🎉 Número correcto';
	} else if(guess >= secretNumber) {
		if(score > 1) {
			document.querySelector('.message').textContent = '📈 Demasiado alto';
			score--;
			document.querySelector('.score').textContent = score;	
		} else {
			document.querySelector('.message').textContent = '💥 Usted perdió la jugada';
			document.querySelector('.score').textContent = 0;
		}

	} else if(guess <= secretNumber) {
		if(score > 1) {
			document.querySelector('.message').textContent = '📉 Demasiado bajo';
			score--;
			document.querySelector('.score').textContent = score;			
		} else {
			document.querySelector('.message').textContent = '💥 Usted perdió la jugada';
			document.querySelector('.score').textContent = 0;
		} 	
	}
});

Manipular CSS

// ...

// Cuando el jugador gana
} else if(guess === secretNumber) {
  document.querySelector('.message').textContent = '🎉 Número correcto';

  document.querySelector('body').style.backgroundColor = '#60b347';

  document.querySelector('.number').style.width = '30rem'

// ...

Botón again

document.querySelector('.again').addEventListener('click', function(){
	secretNumber = Math.trunc(Math.random() * 20) + 1;
	score = 20;
	document.querySelector('.number').textContent = '?';
	document.querySelector('.score').textContent = score;
	document.querySelector('.message').textContent = 'Start guessing...';
	document.querySelector('.guess').value = '';
	document.querySelector('body').style.backgroundColor = '#222';
	document.querySelector('.number').style.width = '15rem';
});

Implementar Highscore

'use strict';

let secretNumber = Math.trunc(Math.random()*20) + 1;
let score = 20;
let highscore = 0;

// document.querySelector('.number').textContent = secretNumber;
// document.querySelector('')

document.querySelector('.check').addEventListener('click', function (){
	const guess = Number(document.querySelector('.guess').value);
	// console.log(guess, typeof guess);

	// Cuando no hay entrada
	if(!guess){
		document.querySelector('.message').textContent ="⛔️ No hay número!"

	// Cuando el jugador gana
	} else if(guess === secretNumber) {
		document.querySelector('.message').textContent = '🎉 Número correcto';

		document.querySelector('body').style.backgroundColor = '#60b347';

		document.querySelector('.number').style.width = '30rem';

		document.querySelector('.number').textContent = secretNumber;

		if(score > highscore) {
			highscore = score;
			document.querySelector('.highscore').textContent = highscore;
		}
	// Cuando quess es muy alto
	} else if(guess >= secretNumber) {
		if(score > 1) {
			document.querySelector('.message').textContent = '📈 Demasiado alto';
			score--;
			document.querySelector('.score').textContent = score;	
		} else {
			document.querySelector('.message').textContent = '💥 Usted perdió la jugada';
			document.querySelector('.score').textContent = 0;
		}

	// Cuando quess es muy bajo
	} else if(guess <= secretNumber) {
		if(score > 1) {
			document.querySelector('.message').textContent = '📉 Demasiado bajo';
			score--;
			document.querySelector('.score').textContent = score;			
		} else {
			document.querySelector('.message').textContent = '💥 Usted perdió la jugada';
			document.querySelector('.score').textContent = 0;
		} 	
	}
});

document.querySelector('.again').addEventListener('click', function(){
	secretNumber = Math.trunc(Math.random() * 20) + 1;
	score = 20;
	document.querySelector('.number').textContent = '?';
	document.querySelector('.score').textContent = score;
	document.querySelector('.message').textContent = 'Start guessing...';
	document.querySelector('.guess').value = '';
	document.querySelector('body').style.backgroundColor = '#222';
	document.querySelector('.number').style.width = '15rem';
});

Refactorizar

Principio Don't Repeat Yourself (DRY)

'use strict';

let secretNumber = Math.trunc(Math.random()*20) + 1;
let score = 20;
let highscore = 0;

const displayMessage = function(message) {
	document.querySelector('.message').textContent = message;
}

document.querySelector('.check').addEventListener('click', function (){
	const guess = Number(document.querySelector('.guess').value);
	// console.log(guess, typeof guess);

	// Cuando no hay entrada
	if(!guess){
		displayMessage("⛔️ No hay número!");

	// Cuando el jugador gana
	} else if(guess === secretNumber) {
		displayMessage('🎉 Número correcto');

		document.querySelector('body').style.backgroundColor = '#60b347';

		document.querySelector('.number').style.width = '30rem';

		document.querySelector('.number').textContent = secretNumber;

		if(score > highscore) {
			highscore = score;
			document.querySelector('.highscore').textContent = highscore;
		}
	// Cuando quess no es correcto
	} else if (guess !== secretNumber) {
		if(score > 1) {
			displayMessage(guess > secretNumber ? '📈 Demasiado alto' : '📉 Demasiado bajo');
			score--;
			document.querySelector('.score').textContent = score;	
		} else {
			displayMessage('💥 Usted perdió la jugada');
			document.querySelector('.score').textContent = 0;
		}
	} 
});

document.querySelector('.again').addEventListener('click', function(){
	secretNumber = Math.trunc(Math.random() * 20) + 1;
	score = 20;
	document.querySelector('.number').textContent = '?';
	document.querySelector('.score').textContent = score;
	displayMessage('Start guessing...')
	document.querySelector('.guess').value = '';
	document.querySelector('body').style.backgroundColor = '#222';
	document.querySelector('.number').style.width = '15rem';
});

Proyecto Modal

'use strict';

const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnsOpenModal = document.querySelectorAll('.show-modal');

console.log(btnsOpenModal); 

const openModal = function() {
	console.log('Button clicked');
	modal.classList.remove('hidden');
	overlay.classList.remove('hidden');
};

const closeModal = function() {
	modal.classList.add('hidden');
	overlay.classList.add('hidden');
};

for(let i =0; i < btnsOpenModal.length; i++)
	btnsOpenModal[i].addEventListener('click', openModal);

btnCloseModal.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);

document.addEventListener('keydown', function(e) {
	if(e.code === "Escape" && !modal.classList.contains('hidden')) {
		closeModal();
	}
})

Pig Game

El objetivo de Pig Dice Game es sumar 100 puntos antes de que lo hagan el oponente. El juego del cerdo se juega con un solo dado de seis caras.

Pig Game

En cada turno, un jugador lanza un dado repetidamente hasta que se lanza un 1 o el jugador decide mantener el resultado y pasar en el turno a su oponente.

El número obtenido en el lanzamiento del jugador se agrega a una puntuación temporal. Si el jugador saca un 1, pierde su puntuación temporal y el turno pasa a su oponente.

Si el jugador obtiene cualquier otro número, puede decidir continuar y lanzar el dado.

Si el jugador decide mantener, entonces su total de turno (puntuación temporal) se agrega a la puntuación general. El primero en alcanzar 100 puntos, gana el juego

Flujo

Código

'use strict';

// Seleccionar elementos
const player0El = document.querySelector('.player--0');
const player1El = document.querySelector('.player--1');
const score0El = document.querySelector('#score--0');
const score1El = document.getElementById('score--1');
const current0El = document.getElementById('current--0');
const current1El = document.getElementById('current--1');
const diceEl = document.querySelector('.dice');
const btnNew= document.querySelector('.btn--new');
const btnRoll= document.querySelector('.btn--roll');
const btnHold= document.querySelector('.btn--hold');

let scores, currentScore, activePlayer, playing;

const init = function() {
	scores = [0, 0];
	currentScore = 0;
	activePlayer = 0;
	playing = true;

	score0El.textContent = '0';
	score1El.textContent = '0';
	current0El.textContent = '0';
	current1El.textContent = '0';

	diceEl.classList.add('hidden');
	player0El.classList.remove('player--winner');
	player1El.classList.remove('player--winner');
	player0El.classList.add('player--active');
	player1El.classList.remove('player--active');
}

init();

const switchPlayer = function() {
	document.getElementById(`current--${activePlayer}`).textContent = 0;
	currentScore = 0;
	activePlayer = activePlayer === 0 ? 1 : 0;
	player0El.classList.toggle('player--active');
	player1El.classList.toggle('player--active');
}

// Función de lanzar dados
btnRoll.addEventListener('click', function() {
	if(playing) {
		// 1. Gereneral de forma aleatoría el número de dado
		let dice = Math.trunc(Math.random() * 6) + 1;

		// 2. mostrar el dado
		diceEl.classList.remove('hidden');
		diceEl.src = `dice-${dice}.png`;

		// 3. Verificar resultado, si es uno cambiar al otro jugador
		if(dice !== 1) {
			// Agregarlo al score
			currentScore += dice;
			document.getElementById(`current--${activePlayer}`).textContent = currentScore;
		} else {
			// Cambiar de jugador
			switchPlayer();
		}		
	}
});

btnHold.addEventListener('click', function() {
	if(playing) {
		// 1. Agregar puntuación al jugador actual
		scores[activePlayer] += currentScore;
		document.getElementById(`score--${activePlayer}`).textContent = scores[activePlayer];
		
		// 2. Verificar si la puntuación del jugador es >= 100
		if(scores[activePlayer] >= 100) {
			// Finalizar el juego
			playing = false;
			document.querySelector(`.player--${activePlayer}`).classList.add('player--winner');
			document.querySelector(`.player--${activePlayer}`).classList.add('player--active');
		} else {
			// 3. Cambiar de jugador
			switchPlayer();
		}		
	}
});

btnNew.addEventListener('click',function() {
	init();
})

Código

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Pig Game</title>
  </head>
  <body>
    <main>
      <section class="player player--0 player--active">
        <h2 class="name" id="name--0">Player 1</h2>
        <p class="score" id="score--0">43</p>
        <div class="current">
          <p class="current-label">Current</p>
          <p class="current-score" id="current--0">0</p>
        </div>
      </section>
      <section class="player player--1">
        <h2 class="name" id="name--1">Player 2</h2>
        <p class="score" id="score--1">24</p>
        <div class="current">
          <p class="current-label">Current</p>
          <p class="current-score" id="current--1">0</p>
        </div>
      </section>

      <img src="dice-5.png" alt="Playing dice" class="dice" />
      <button class="btn btn--new">🔄 New game</button>
      <button class="btn btn--roll">🎲 Roll dice</button>
      <button class="btn btn--hold">📥 Hold</button>
    </main>
    <script src="script.js"></script>
  </body>
</html>

Código

@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  height: 100vh;
  color: #333;
  background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* LAYOUT */
main {
  position: relative;
  width: 100rem;
  height: 60rem;
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(200px);
  filter: blur();
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  border-radius: 9px;
  overflow: hidden;
  display: flex;
}

.player {
  flex: 50%;
  padding: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.75s;
}

/* ELEMENTS */
.name {
  position: relative;
  font-size: 4rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  word-spacing: 2px;
  font-weight: 300;
  margin-bottom: 1rem;
}

.score {
  font-size: 8rem;
  font-weight: 300;
  color: #c7365f;
  margin-bottom: auto;
}

.player--active {
  background-color: rgba(255, 255, 255, 0.4);
}
.player--active .name {
  font-weight: 700;
}
.player--active .score {
  font-weight: 400;
}

.player--active .current {
  opacity: 1;
}

.current {
  background-color: #c7365f;
  opacity: 0.8;
  border-radius: 9px;
  color: #fff;
  width: 65%;
  padding: 2rem;
  text-align: center;
  transition: all 0.75s;
}

.current-label {
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-size: 1.7rem;
  color: #ddd;
}

.current-score {
  font-size: 3.5rem;
}

/* ABSOLUTE POSITIONED ELEMENTS */
.btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #444;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1.8rem;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 400;
  transition: all 0.2s;

  background-color: white;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);

  padding: 0.7rem 2.5rem;
  border-radius: 50rem;
  box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);
}

.btn::first-letter {
  font-size: 2.4rem;
  display: inline-block;
  margin-right: 0.7rem;
}

.btn--new {
  top: 4rem;
}
.btn--roll {
  top: 39.3rem;
}
.btn--hold {
  top: 46.1rem;
}

.btn:active {
  transform: translate(-50%, 3px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
}

.btn:focus {
  outline: none;
}

.dice {
  position: absolute;
  left: 50%;
  top: 16.5rem;
  transform: translateX(-50%);
  height: 10rem;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
}

.player--winner {
  background-color: #2f2f2f;
}

.player--winner .name {
  font-weight: 700;
  color: #c7365f;
}

.hidden {
  display: none;
}

DOM y Eventos

Avanzado

Javascript (cero a experto)

By Wilfredo Meneses

Javascript (cero a experto)

Wilfredo Meneses

Profesor universitario

meneboni.com

Javascript

Importante

Configurar el entorno

Fundamentos de Javascript

Hola Mundo

Introducción a JS

Rol de JS en el DW

Rol de JS en el DW

Rol de JS en el DW

Enlazar archivo Javascript

Variables

Tipo

7 tipos primitivos

Tipo dinámico

Tipos de datos

Let, const y var

Operadores básico

Precedencia

String y Template Literals

Declaración if

DOM y Eventos

¿Qué es el DOM?

Estructura del DOM

DOM !== Javascript

Proyecto: Adivina número

Seleccionar y manipular elementos

Manejar evento click

Implementar la lógica del juego

Manipular CSS

Botón again

Implementar Highscore

Refactorizar

Proyecto Modal

Proyecto Modal

Pig Game

Pig Game

Pig Game

Flujo

Código

Código

Código

DOM y Eventos

Javascript (cero a experto)

More from Wilfredo Meneses