Empieza por ac谩

1

Mi primera l铆nea de c贸digo

Fundamentos de Programaci贸n

2

驴Qu茅 es HTML/CSS/JS?

3

JavaScript no es Java

4

Primeros pasos en el navegador con alert

5

HTML, CSS, JavaScript de verdad

6

Los apuntes de Freddy en PDF

Primer proyecto: Peso en otro planeta

7

Peso en otro planeta

8

Obteniendo datos del usuario

9

Flujo y condicionales

Segundo proyecto: Dibujando con Canvas

10

C贸mo funcionan Window y Document

11

El DOM: nuestro lugar de trabajo en la web

12

Dibujando en el DOM

13

Qu茅 son las Funciones en JavaScript

14

Ciclos while y for en JavaScript

15

Eventos y Formularios en HTML y JavaScript

16

Detectar eventos del teclado con JavaScript

17

Dibujar en canvas con las flechas del teclado

Tercer proyecto: Villa platzi

18

Funciones matem谩ticas y n煤meros aleatorios en JavaScript

19

Uso y carga de im谩genes en Canvas

Cuarto proyecto: Pakimanes

20

Divisi贸n, m贸dulo y residuo en JavaScript

21

Clases y Arrays en JavaScript

Quinto proyecto: Cajero autom谩tico

22

Diagrama de Flujo del Cajero Autom谩tico

23

Implementaci贸n del Cajero Autom谩tico

Sexto proyecto: Cliente/Servidor

24

Primer servidor web con express

25

Modelo Cliente/Servidor

Programaci贸n de Hardware y Electr贸nica con Arduino

26

驴C贸mo funciona un circuito electr贸nico?

27

驴C贸mo programar un Arduino?

28

Programaci贸n de circuitos con C, Arduino y Sketch

29

C贸mo programar un Arduino con Javascript y Node

30

Construye un Robot con JavaScript

31

Robot para riego de plantas en Arduino, Javascript y Node

Materiales de apoyo

32

Las mejores notas de los estudiantes

33

驴Cu谩l lenguaje de programaci贸n aprender primero?

34

La Web con Visi贸n Profesional

Contenido Bonus

35

Qu茅 son tablas de verdad y compuertas l贸gicas

Recap Curso Gratis de Programaci贸n B谩sica

36

Recap Programaci贸n b谩sica

37

Recap Programaci贸n b谩sica ENG

A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Detectar eventos del teclado con JavaScript

16/37
Recursos

Para detectar eventos del teclado en Html usamos document.addEventListener (鈥渆scucha el evento鈥). Podemos definir este evento con keyup (al soltar la tecla) o keydown (al presionarla). Todo manejador de eventos devuelve un objeto con los detalles del evento.

El objeto de HTML que tiene todo lo que hacemos es el objeto document. En document es el lugar donde est谩 la forma de detectar que las flechas del teclado o realmente cualquier tecla del teclado ha sido presionada.

Canvas no es el sitio correcto para definir el evento con keydown porque las flechas son un evento de todo.

Es una mala pr谩ctica colocar n煤meros sueltos dentro del c贸digo. Cuando tenemos n煤meros que significan algo, no nos cuesta nada crear variables que le agreguen ese significado.

Objeto Literal: es una variable especial que tiene por dentro m谩s variables.

Una buena pr谩ctica es escribir el nombre de variables, atributo o propiedad en may煤scula para indicar que esa variable no va a cambiar de valor durante la vida del c贸digo. Esto se conoce como camelcase.

Switch: se usa cuando tengo muchas condicionales que est谩n agrupadas (cuando tengo muchos if). El uso de switch tiende a ser abusado, por eso hay que emplearla solo cuando lo amerite.

Buena pr谩ctica es preguntarse:

  • 驴Mi uso de if hace m谩s f谩cil o m谩s dif铆cil de leer el c贸digo?
  • 驴Mi uso de switch hace m谩s f谩cil o m谩s dif铆cil de leer el c贸digo?

Contribuci贸n creada por: Alejandra Fissore.

Aportes 1567

Preguntas 347

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

馃惐鈥嶐煉 Completando el c贸digo para todas las direcciones de las teclas.

var teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};

console.log(teclas);

document.addEventListener("keyup", dibujarTeclado);

function dibujarTeclado(evento){
    switch(evento.keyCode){
        case teclas.UP:
            console.log("Ariba");
            break; 
        case teclas.DOWN:
            console.log("Abajo");
            break;
        case teclas.LEFT:
            console.log("Izquierda");
            break;
        case teclas.RIGHT:
            console.log("Derecha");
            break;
        default:
            console.log("Inexistente");
            break;
    }
}

++Aqu铆 les dejo algunos tips ++
https://keycode.info/: Muestra el event keycode de cada tecla que oprimas.

<canvas style="border: 1px solid red;" width="300" height="300" id="area_de_dibujo"></canvas>

Este c贸digo agrega un borde rojo al canvas.

APUNTES DE LA CLASE
Los eventos no necesitan par谩metros porque son opcionales, + (variable) que guarda todos los eventos en esa variable
keyCode 鈥> c贸digo interno del sistema operativo, es la forma en la que se almacenan letras u otras.
Todas las teclas tienen un c贸digo de esos.
De esa forma esta implementado por dentro en el interior de JavaScript
Los n煤meros gastan menos espacio en memoria
Forma f谩cil de saber cual de las flechas estoy oprimiendo es guard谩ndolo en una variable especial
Una especie de colecci贸n de variables
Ejemplo: (tama帽o = 10) es una variable (caja) y esa caja JavaScript la llama un objeto literal
Cuando tienes una variable que no va a cambiar en mucho tiempo , y una pr谩ctica interna de los programadores es poner esa variable en may煤sculas: a estas se les llama constantes
Ejemplo 鈥> keyCode (鈥渄onde C esta en may煤scula鈥)
variable, atributo o propiedad que est茅n en
may煤scula
no cambiar谩 a lo largo del tiempo: ejemplo 鈥> UP, DOWN, LEFT, RIGHT serian constantes.
Una colecci贸n de variables es igual a un bloque de c贸digo y parecido a CSS o JSON
Notaci贸n de objetos en JavaScript
Var con var por dentro debes crear un bloque de c贸digo
Javascript Object Notation o JSON
**Proto ** == alert(鈥渕undo extra帽o鈥); forma en que internamente los navegadores estructuran y construyen un objeto para que este listo.
switch es una estructura de control que se utiliza cuando hay mucho if, para crear mas condiciones

document.addEventListener("keyup", dibujarTeclado); //para detectar el evento donde el usuario oprima una tecla.

var teclas = { //Objeto que tiene internamente una colecci贸n de variables. T茅cnicamente es una sola linea de codigo. JSON
    UP: 38,
    DOWN:40,
    LEFT: 37,
    RIGHT: 39
}; //Con esto ya sabemos qu茅 tecla est谩 siendo oprimida.

function dibujarTeclado(evento){  //creamos la variable evento como par谩metro
switch(evento.keyCode){  //Dentro del switch, el elemento que se eval煤a, es el elemento que cambia. Precisamente el "evento" que llega por par谩metro, de la funci贸n dibujarTeclado, que se dispara cuando la tecla se levanta (keyup) del addEventListener del documento.

        case teclas.UP:
            console.log("ARRIBA");
            break;

        case teclas.DOWN:
            console.log("ABAJO");
            break;

        case teclas.LEFT:
            console.log("IZQUIERDA");
            break;

        case teclas.RIGHT:
            console.log("DERECHA");
            break;

        default: //Es como el Else
            console.log("Otra tecla");
            break;
    }
}

Que libro recomiendan para complementar el aprendizaje de JavaScript junto a los cursos?

Resumen:

  • C贸mo piensa un programador? Un programador agarra un problema grande y lo divide en problemas chiquitos.

  • Todo manejador de eventos devuelve un objeto con los detalles del evento

  • El canvas no es el lugar correcto para poner el keydown porque las flechas son un evento de todo. El objeto de HTML que tiene todo lo que hacemos en HTML es el objeto document. En document es el lugar donde est谩 la forma de detectar que las flechas del teclado o realmente cualquier tecla del teclado ha sido presionada.

  • Es una mala pr谩ctica colocar n煤meros sueltos dentro del c贸digo. Cuando tenemos n煤meros que significan algo no nos cuestan nada crear variables que le agreguen ese significado.

  • Objeto Literal: una variable especial que tiene por dentro m谩s variables. Objeto que tiene una colecci贸n interna de variables, un objeto que es inmediatamente descripto.

  • Una buena pr谩ctica es escribir el nombre de variables, atributo o propiedad en may煤scula para indicar que esa variable no va a cambiar de valor durante mucho tiempo o que nunca cambia a lo largo de la vida del c贸digo. Todo lo que sigue a continuaci贸n es una sola l铆nea de c贸digo:
    var teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
    };

  • switch: se usa cuando tengo muchas condicionales que est谩n agrupadas (cuando tengo muchos if). El uso de switch tiende a ser abusado.

  • Buena pr谩ctica es preguntarse:
    驴mi uso de if hace m谩s f谩cil o m谩s dif铆cil de leeer el c贸digo?
    驴mi uso de switch hace m谩s f谩cil o m谩s dif铆cil de leeer el c贸digo?

  • switch no funciona para hacer un mayor que o un menor que. S贸lamente funciona para comparar una cosa inicial con una cosa final.

  • La opci贸n por defecto del case es default. En 茅ste caso no es necesario colocar el break, porqu lo que hace break es que el resto del c贸digo no se ejecute y como esta es la opci贸n por defecto no har铆a falta escribirla.

As铆 se ve mi video juego que te permite mover le cerdo pero debes tener cuidado con las vacas y los pollos que se mueven aleatoriamente mientras tu avanzas y si te toca perdiste el juego. Ganas si llegas a donde est谩 la llma Jajjajaja
.
.
.

var vp   =document.getElementById("villaplatzi");
document.addEventListener("keyup",moverCerdo);
document.addEventListener("keyup",moverVaca);
document.addEventListener("keyup",moverVaca1);
document.addEventListener("keyup",moverPollos1);
document.addEventListener("keyup",moverPollos2);
document.addEventListener("keyup",moverPollos3);
document.addEventListener("keyup",moverPollos4);
var papel= vp.getContext("2d");


var teclas = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
};

var fondo={
  url:"tile.png",
  cargaOK: false
}
var vaca = {
  url: "vaca.png",
  cargaOK: false
}
var vaca1 = {
  url: "vaca1.png",
  cargaOK: false
}
var cerdo = {
  url: "cerdo.png",
  cargaOK: false
}
var pollo = {
  url: "pollo.png",
  cargaOK: false
}
var fuego = {
  url: "fuego.png",
  cargaOK: false

};

fondo.imagen = new Image();
fondo.imagen.src = fondo.url;
fondo.imagen.addEventListener("load",cargarFondo);

vaca.imagen = new Image();
vaca.imagen.src = vaca.url;
vaca.imagen.addEventListener("load",cargarVacas);

vaca1.imagen = new Image();
vaca1.imagen.src = vaca1.url;
vaca1.imagen.addEventListener("load",cargarVacas1);

cerdo.imagen = new Image();
cerdo.imagen.src = cerdo.url;
cerdo.imagen.addEventListener("load",cargarCerdos);

pollo.imagen = new Image();
pollo.imagen.src = pollo.url;
pollo.imagen.addEventListener("load",cargarPollos);

fuego.imagen = new Image();
fuego.imagen.src = fuego.url;
fuego.imagen.addEventListener("load",cargarFuego);

function cargarFondo()
{
  fondo.cargaOK =true;
  dibujar();
}
function cargarVacas()
{
  vaca.cargaOK =true;
  dibujar();
}
function cargarVacas1()
{
  vaca1.cargaOK =true;
  dibujar();
}
function cargarCerdos()
{
  cerdo.cargaOK =true;
  dibujar();
}
function cargarPollos()
{
  pollo.cargaOK =true;
  dibujar();
}
function cargarFuego()
{
  fuego.cargaOK =true;
  dibujar();
}

var xcerdo= 400;
var ycerdo= 400;

var xvaca= 320;
var yvaca= 240;

var xvaca1= 150;
var yvaca1= 200;

var xpollo1=aleatorio(1,100);
var ypollo1=aleatorio(200,300);
var xpollo2=aleatorio(30,350);
var ypollo2=aleatorio(100,400);
var xpollo3=aleatorio(200,250);
var ypollo3=aleatorio(10,300);
var xpollo4=aleatorio(10,500);
var ypollo4=aleatorio(300,400);

var movimiento = 20;
var cantidadPollos= aleatorio(3,6)
console.log(cantidadPollos);

function dibujar()
{
  if(fondo.cargaOK)
  {
    papel.drawImage(fondo.imagen,0,0);
  }
    if(vaca.cargaOK)
  {
      papel.drawImage(vaca.imagen,xvaca,yvaca);
  }
  if(vaca1.cargaOK)
  {
    papel.drawImage(vaca1.imagen,xvaca1,yvaca1);
  }
  if(cerdo.cargaOK)
  {
      papel.drawImage(cerdo.imagen,xcerdo,ycerdo);
  }
  if(pollo.cargaOK)
  {
    papel.drawImage(pollo.imagen,xpollo1,ypollo1);
    papel.drawImage(pollo.imagen,xpollo2,ypollo2);
    papel.drawImage(pollo.imagen,xpollo3,ypollo3);
    papel.drawImage(pollo.imagen,xpollo4,ypollo4);
  }
  if(fuego.cargaOK)
  {
    papel.drawImage(fuego.imagen,1,1);
  }
}

var xyzPollos1;

function moverPollos1(evento)
{
    var xyzPollos1= aleatorio(37,40)

    if (xyzPollos1==38 && ypollo1-movimiento>-20 ) {
      ypollo1 = ypollo1 - movimiento;
      dibujar();
      console.log("si");}

    if (xyzPollos1==40 && ypollo1+movimiento<450) {
      ypollo1 = ypollo1 + movimiento;
      dibujar();
      console.log("no");}

    if (xyzPollos1==37 && xpollo1-movimiento>-20) {
      xpollo1 = xpollo1 - movimiento;
      dibujar();
      console.log("ssisi");}

    if (xyzPollos1==39 && xpollo1+movimiento<440) {
      xpollo1 = xpollo1 + movimiento;
      dibujar();
      console.log("nnono");}
}
function moverPollos2(evento)
{
    var xyzPollos2= aleatorio(37,40)

    if (xyzPollos2==38 && ypollo2-movimiento>-20 ) {
      ypollo2 = ypollo2 - movimiento;
      dibujar();
      console.log("si");}

    if (xyzPollos2==40 && ypollo2+movimiento<450) {
      ypollo2 = ypollo2 + movimiento;
      dibujar();
      console.log("no");}

    if (xyzPollos2==37 && xpollo2-movimiento>-20) {
      xpollo2= xpollo2 - movimiento;
      dibujar();
      console.log("ssisi");}

    if (xyzPollos2==39 && xpollo2+movimiento<440) {
      xpollo2 = xpollo2 + movimiento;
      dibujar();
      console.log("nnono");}
}
function moverPollos3(evento)
{
    var xyzPollos3= aleatorio(37,40)

    if (xyzPollos3==38 && ypollo3-movimiento>-20 ) {
      ypollo3 = ypollo3 - movimiento;
      dibujar();
      console.log("si");}

    if (xyzPollos3==40 && ypollo3+movimiento<450) {
      ypollo3 = ypollo3 + movimiento;
      dibujar();
      console.log("no");}

    if (xyzPollos3==37 && xpollo3-movimiento>-20) {
      xpollo3 = xpollo3 - movimiento;
      dibujar();
      console.log("ssisi");}

    if (xyzPollos3=39 && xpollo3+movimiento<440) {
      xpollo3 = xpollo3 + movimiento;
      dibujar();
      console.log("nnono");}
}
function moverPollos4(evento)
{
    var xyzPollos4= aleatorio(37,40)

    if (xyzPollos4==38 && ypollo4-movimiento>-20 ) {
      ypollo4 = ypollo4 - movimiento;
      dibujar();
      console.log("si");}

    if (xyzPollos4==40 && ypollo4+movimiento<450) {
      ypollo4 = ypollo4 + movimiento;
      dibujar();
      console.log("no");}

    if (xyzPollos4==37 && xpollo4-movimiento>-20) {
      xpollo4 = xpollo4 - movimiento;
      dibujar();
      console.log("ssisi");}

    if (xyzPollos4==39 && xpollo4+movimiento<440) {
      xpollo4 = xpollo4 + movimiento;
      dibujar();
      console.log("nnono");}
}

var xyz;

function moverVaca(evento)
{
    var xyz= aleatorio(37,40)

    if (xyz==38 && yvaca-movimiento>-20 ) {
      yvaca = yvaca - movimiento;
      dibujar();
      console.log("up");}

    if (xyz==40 && yvaca+movimiento<450) {
      yvaca = yvaca + movimiento;
      dibujar();
      console.log("down");}

    if (xyz==37 && xvaca-movimiento>-20) {
      xvaca = xvaca - movimiento;
      dibujar();
      console.log("left");}

    if (xyz==39 && xvaca+movimiento<440) {
      xvaca = xvaca + movimiento;
      dibujar();
      console.log("right");}

}

var xyz1;

function moverVaca1(evento)
{
    var xyz1= aleatorio(37,40)

    if (xyz1==38 && yvaca1-movimiento>-20 ) {
      yvaca1 = yvaca1 - movimiento;
      dibujar();
      console.log("si");}

    if (xyz1==40 && yvaca1+movimiento<450) {
      yvaca1 = yvaca1 + movimiento;
      dibujar();
      console.log("no");}

    if (xyz1==37 && xvaca1-movimiento>-20) {
      xvaca1 = xvaca1 - movimiento;
      dibujar();
      console.log("ssisi");}

    if (xyz1==39 && xvaca1+movimiento<440) {
      xvaca1 = xvaca1 + movimiento;
      dibujar();
      console.log("nnono");}

}

function moverCerdo(evento)
{
    if(evento.keyCode==teclas.UP && ycerdo-movimiento>-20 ){
      ycerdo = ycerdo - movimiento;
      dibujar();
      console.log("arriba");}
    if(evento.keyCode==teclas.DOWN && ycerdo+movimiento<450){
      ycerdo = ycerdo + movimiento;
      dibujar();
      console.log("abajo");}
    if(evento.keyCode==teclas.LEFT && xcerdo-movimiento>-20){
      xcerdo = xcerdo - movimiento;
      dibujar();
      console.log("izquierda");}
    if(evento.keyCode==teclas.RIGHT && xcerdo+movimiento<440){
      xcerdo = xcerdo + movimiento;
      dibujar();
      console.log("derecha");}

    if ((xcerdo <= xvaca+70 && xcerdo+70 >= xvaca) && (ycerdo <= yvaca+30 && ycerdo+30 >= yvaca)){
      alert("Perdio: PRESIONA F5");}
    if ((xcerdo <= xvaca1+70 && xcerdo+70 >= xvaca1) && (ycerdo <= yvaca1+30 && ycerdo+30 >= yvaca1)) {
      alert("Perdio: PRESIONA F5");}
    if ((xcerdo <= xpollo1+40 && xcerdo+40 >= xpollo1) && (ycerdo <= ypollo1+30 && ycerdo+30 >= ypollo1)) {
      alert("Perdio: PRESIONA F5");}
    if ((xcerdo <= xpollo2+40 && xcerdo+40 >= xpollo2) && (ycerdo <= ypollo2+30 && ycerdo+30 >= ypollo2)) {
      alert("Perdio: PRESIONA F5");}
    if ((xcerdo <= xpollo3+40 && xcerdo+40 >= xpollo3) && (ycerdo <= ypollo3+30 && ycerdo+30 >= ypollo3)) {
      alert("Perdio: PRESIONA F5");}
    if ((xcerdo <= xpollo4+40 && xcerdo+40 >= xpollo4) && (ycerdo <= ypollo4+30 && ycerdo+30 >= ypollo4)) {
      alert("Perdio: PRESIONA F5");}
    if (xcerdo <= 20 && ycerdo <= 1) {
      alert("GANASTE");}

}





function aleatorio(min,maxi)
{
  var resultado;
  resultado = Math.floor(Math.random()*(maxi - min + 1))+min;
  return resultado;
}

Hola, compa帽eros les comparto mi c贸digo

Apuntes en Clase:

  • Ctrl+Shift+I => Abre la ventana inspect (inspeccionar).
  • onLoad => Evento de carga del navegador.
  • Javascript agrega una serie de propiedades a cada tecla, con el fin de poder identificar y facilitar su manejo en caso necesario.
  • En programaci贸n normalmente es mas c贸modo trabajar con n煤meros debido a que ocupan menos espacio en memoria que las letras, aunque hoy en d铆a esto ya no es problema por el avance de la tecnolog铆a, se sigue aplicando el mismo concepto.
  • El keyCode de cada tecla no var铆a independientemente de que sea may煤scula o min煤scula
  • Objeto Literal => Lo constituye una variable que est谩 compuesta internamente por una colecci贸n de variables, generalmente de valor constante. Una colecci贸n de variables se representa similar a un bloque de c贸digo.
  • JSON => Javascript Object Model
  • Proto => Es la manera en que el navegador estructura las informaci贸n del objeto.
  • SWITCH => Es una estructura de control generalmente utilizada para evitar el uso excesivo de IF anidados, haciendo de este modo un c贸digo m谩s limpio y f谩cil de leer, se debe tambi茅n evaluar su utilizaci贸n ante cada situaci贸n para evitar su uso excesivo.

_鈥淟a teor铆a sobre usar if-else versus switch est谩 basada en el n煤mero de condiciones que se est谩n evaluando: a mayor n煤mero de condiciones, m谩s inclinado estas a usar switch en lugar de if-else. Normalmente depende de cual codigo es m谩s f谩cil de leer. El argumento es que if-else es m谩s f谩cil de leer cuando hay menos condiciones y switch es m谩s f谩cil de leer cuando el n煤mero de condiciones es grande.鈥 Fuente

En el primer caso tenemos pocas condiciones y switch solo complica el c贸digo:

if (found){
    //do something
} else {
    //do something else
}

switch(found){
    case true:
        //do something
        break;

    default:
        //do something else
}

En el segundo caso tenemos m谩s condiciones, notamos que if-else es bastante m谩s complicado de leer

if (color == "red"){
    //do something
} else if (color == "blue"){
    //do something
} else if (color == "brown"){
    //do something
} else if (color == "black"){
    //do something
} else {
    //do something
}

switch (color){
    case "red":
        //do something
        break;

    case "blue":
        //do something
        break;

    case "brown":
        //do something
        break;

    case "black":
        //do something
        break;

    default:
        //do something
}

Me cost贸 bastante porque no me hab铆a dado cuenta que el switch va dentro de la Funcion. Erro de principiante. Quede muy contento con el final.

Tambi茅n hab铆a cometido el error de poner el n煤mero de UP a Right y el archivo enviaba cualquier cosa鈥

var teclas = {UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39};

console.log(teclas);

document.addEventListener("keyup", dibujarTeclado);

function dibujarTeclado(evento)
{
  if(evento.keyCode == teclas.UP)
  {
    console.log("Arriba");
  }
  if(evento.keyCode == teclas.DOWN)
  {
    console.log("Abajo");
  }
  if(evento.keyCode == teclas.RIGHT)
  {
    console.log("Derecha");
  }
  if(evento.keyCode == teclas.LEFT)
  {
    console.log("Izquierda");
  }

  switch (evento.keyCode)
  {
    case teclas.UP:
      console.log("ArribaSwitch");
    break;
    case teclas.DOWN:
      console.log("AbajoSwitch");
    break;
    case teclas.RIGHT:
      console.log("DerechaSwitch");
    break;
    case teclas.LEFT:
      console.log("IzquierdaSwitch");
    break;
    default:
      console.log("OtraTeclaSwitch");
    break;
  }

}

En este desafi贸 me quedo con la frase: 'less is more (menos es m谩s)

document.addEventListener('keyup', drawKey);
var draw = document.getElementById('area_dibujo');
var lienzo = draw.getContext('2d');

var teclas = {
  arriba: 38,
  abajo: 40,
  izq: 37,
  der: 39
};

var ix = 150,
    iy = 150,
    fx = 150,
    fy = 150;
drawLines(ix, iy, fx, fy); //Punto de inicio

function drawKey(evento) {
switch (evento.keyCode) {
  case teclas.arriba:
    iy = iy - 10;
    drawLines('blue', ix, iy, fx, fy);
    fy = fy - 10

    console.log('ARRIBA');
  break;

  case teclas.abajo:
    iy = iy + 10;
    drawLines('blue', ix, iy, fx, fy);
    fy = fy + 10;

    console.log('ABAJO');
  break;

  case teclas.izq:
    fx = fx - 10;
    drawLines('red', ix, iy,  fx, fy);
    ix = ix - 10;

    console.log('IZQUIERDA');
    break;

  case teclas.der:
    fx = fx + 10;
    drawLines('red', ix, iy,  fx, fy);
    ix = ix + 10;

    console.log('DERECHA');
  break;

    default:
      console.log('Otra tecla');
      break;
  }
 }

function drawLines(color, xi, yi, xf, yf) {
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xi, yi);
  lienzo.lineTo(xf, yf);
  lienzo.stroke();
  lienzo.closePath();
}```

No me funcionaba mi codigo y estaba igual al de Fredy y al de mis compa帽eros. Hasta que me di cuenta que switch(evento.keycode) tenia el error de keycode no es en minuscula, es en mayuscula switch(evento.keyCode). Cosas tan simples que afectan todo.

Este es mi proyecto
Este es mi c贸digo por si alguien lo quiere

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dibuja con las lineas</title>
    <style type="text/css">
      body
      {
          background-color: #eff7e1;

          font-family: Helvetica;
      }

      p
      {
        font-family:Courier;
      }
      small
      {font-family:Courier;}
        div.a{text-align: center;}

      canvas
      {
        background-color: #FFFFFF;
      }
      input type="range" {background-color: #f1f1f1;}

  </style>

  </head>
<div class="a"><body>
    <h1>Ya puedes dibujar con el mause!!</h1>
    <p><strong>Has click para pocicionar el comienzo de la linea y suentalo para terminarlo</strong></p>
    <p><small><small>si quieres mejorar tu experiencia sigue bajando</small></small></p>
    <canvas id="area_de_dibujo" width="500" height="500"  style="border: 2px solid black"></canvas><br><br><br>
    <h1>Quieres personalisar tus dibujos?</h1><br><br>
    <p>Escoje el colorque mas te guste <input type="color" id="colorcito"/></p>
    <p>Elige el grosor de la linea <input type="range" name="rango"  min="1" max="9" id="grosor" ></p>
    <p>Si aplastas a  Gastly limpiaras el lienzo <button type="reset">
  <img src="descarga.png" alt="imagen" width="32" height="32" id="borrar"style="vertical-align: middle">

</button></p>
    <canvas id="area_de_dibujo_2" width="500" height="500"  style="border: 2px solid black"></canvas><br><br>

    <script src="teclas_flechas1.2.js"></script>
  </body></div>
</html>

area_de_dibujo.addEventListener("mousedown", dibujarClik);
area_de_dibujo.addEventListener("mouseup", dibujarClik_2);
area_de_dibujo_2.addEventListener("mousedown", dibujarClik_2_1);
area_de_dibujo_2.addEventListener("mouseup", dibujarClik_2_2);

var boton = document.getElementById("borrar");

boton.addEventListener("click", borrador);
var colorsote = document.getElementById("colorcito").value;
var grosorcito = document.getElementById("grosor").value;

var cuadrito = document.getElementById("area_de_dibujo");
var cuadrito_2 = document.getElementById("area_de_dibujo_2");

var papel = cuadrito.getContext("2d");
var papel_2 = cuadrito_2.getContext("2d");

var colorsote;


var down_X;
var down_Y;
var up_X;
var up_Y;

var down_X1;
var down_Y1;
var up_X1;
var up_Y1;

function borrador()
{
  papel_2.clearRect(0, 0, cuadrito_2.width, cuadrito_2.height);
}

function dibujarClik(evento)
{
  var color = "black";
  down_X = evento.offsetX;
  down_Y = evento.offsetY;
  console.log("PRECIONADO " + evento.offsetX + "X");
  console.log("PRECIONADO " + evento.offsetY + "Y");

  dibujarLinea(color, down_X - 1, down_Y - 1, down_X + 1, down_Y + 1, papel);

}
function dibujarClik_2(evento_2)
{
  var color = "black";
  up_X = evento_2.offsetX;
  up_Y = evento_2.offsetY;
  console.log("SOLTADO " + evento_2.offsetX + "X");
  console.log("SOLTADO " + evento_2.offsetY + "Y");
  dibujarLinea(color, down_X, down_Y, up_X, up_Y, papel);
}
function dibujarClik_2_1(evento_3)
{
  var colorsote = document.getElementById("colorcito").value;

  var punto = 1;
  down_X1 = evento_3.offsetX;
  down_Y1 = evento_3.offsetY;
  console.log("PRECIONADO " + evento_3.offsetX + "X");
  console.log("PRECIONADO " + evento_3.offsetY + "Y");

  dibujarLinea_2(colorsote, down_X1 - punto, down_Y1 - punto, down_X1 + punto, down_Y1 + punto, papel_2, 3);

}
function dibujarClik_2_2(evento_4)
{
  var colorsote = document.getElementById("colorcito").value;
  var grosorcito = document.getElementById("grosor").value;
  up_X1 = evento_4.offsetX;
  up_Y1 = evento_4.offsetY;
  console.log("SOLTADO " + evento_4.offsetX + "X");
  console.log("SOLTADO " + evento_4.offsetY + "Y");
  dibujarLinea_2(colorsote, down_X1, down_Y1, up_X1, up_Y1, papel_2, grosorcito);
}


function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 3;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}
function dibujarLinea_2(color, xinicial, yinicial, xfinal, yfinal, lienzo, grosore)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = grosore;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}

Hola soy un nuevo estudiante y estoy en mi primer curso de programaci贸n, realizando esta clase el 29/04/2020 (plena cuarentena xd) me di cuenta que la palabra/herramienta de 鈥渒eyCode鈥 para poder ver las teclas del teclado en su numero de referencia no funciona o por lo menos ami no.Busque en Internet y encontr茅 un post en stackoverflow que me suger铆an usar en ves del 鈥渒eyCode鈥 que use 鈥渨hich鈥 para ver el numero de cada tecla y me funciono 馃槂
Solo por si alguien mas tenia ese problema lo menciono,ME ENCANTA PLAZTI!!!

Mi Codigo incluye las tipicas letras A,W,D,S cuando un personaje se mueve en juego de PC

En mi opinion, el mejor caso de flujo de control para esta situacion, es el IF

var teclas = {
// Movimiento hacia la Izquierda
    LEFT: 37,
    A: 65,
// Movimiento hacia Arriba
    UP: 38 ,
    W: 87,
//  Movimiento hacia la Derecha
    RIGTH: 39,
    D: 68,
//  Movimiento hacia Abajo
    DOWN: 40,
    S: 83,
};

const CANVAS = document.getElementById('myCanvas');
document.addEventListener('keyup', teclaPresionada);

function teclaPresionada (evento) {
    if ( evento.keyCode == teclas.LEFT || evento.keyCode == teclas.A ) {

        console.log('Izquierda');

    } else if ( evento.keyCode == teclas.UP || evento.keyCode == teclas.W ) {

        console.log('Arriba');

    } else if ( evento.keyCode == teclas.RIGTH || evento.keyCode == teclas.D ) {

        console.log('Derecha');

    } else if ( evento.keyCode == teclas.DOWN || evento.keyCode == teclas.S ) {

        console.log('Abajo');

    } else {
        console.log('otra tecla')
    }
}```
NO SE RINDAN!

Por segunda vez veo esta clase y me parece incre铆ble cu谩nto puede aprender uno cuando se devuelve a intentar comprender cosas que no comprendi贸 bien en el primer intento. Amo esto

鈥淟os programadores convierten problemas grandes en problemas chiquitos鈥 Apliquemos esto para la vida y seguramente no nos ahogaremos.

Les recomiendo agregar comentarios a sus c贸digos, en JavaScript se hace colocando 鈥//鈥 en cualquier lado, el resto de la l铆nea ser谩 ignorado por el compilador (es decir, que no har谩 diferencia. Sirve como el console.log pero dentro del c贸digo, y no en la consola). Tambi茅n pueden comentar varias l铆neas de c贸digo usando 鈥/" para abrir el comentario y "/鈥 para cerrarlo.

// A帽ado un escuchador que me reconozca el teclado
document.addEventListener("keyup", dibujarTeclado);

// Objeto con mis valores keyCode de las teclas que me interesan
var teclas = {
	LEFT: 	37,
	UP: 	38,
	RIGHT: 	39,
	DOWN: 	40 
};

// Funci贸n a llamar cuando se reconozca una tecla
function dibujarTeclado(evento){
	switch(evento.keyCode){	// Variable a estudiar
		case teclas.LEFT:
			console.log("Se presion贸 izquierda");
			break;
		case teclas.UP:
			console.log("Se presion贸 arriba");
			break;
		case teclas.RIGHT:
			console.log("Se presion贸 derecha");
			break;
		case teclas.DOWN:
			console.log("Se presion贸 abajo");
			break;
		default:
			console.log("No presionaste una flecha :(");
	}
}

Mi primer reto fue hacer que con el teclado se puedan dibujar l铆neas diagonales usando el teclado. Las diagonales las dibuja de un color diferente de las horizontales y las verticales.

Esta es mi soluci贸n

Muchas gracias Freddy por devolverme la pasi贸n de programar! No sabes cu谩nto te lo agradezco, y apenas pueda me suscribo a tu sitio!

Vaya, he seguido varios cursos distintos en youtube que en verdad me han ayudado bastante para aprender a programar, pero debo decir que las explicaciones en este curso y los ejercicios son mucho m谩s interesantes y mejores.

reanudo mis clases despues de unos dias de mucho trabajo, y estoy mas entusiasmado. buenisima clase

Mi aporte: Para hacer comando rapido usar F12 les ayudar abrir r谩pido la consola, SOLAMENTE Visual Studio Code:usar ALT + SHIFT+f les ayuda a organizar el c贸digo, Para mover una l矛nea c贸digo sin copiar y pegar pueden usar solo selecionandola oprimiendo ALT y usar las flechas para mover arriba o abajo, Si tiene una variable que se repite por todo el c贸digo y es muy largo y deben cambiar el nombre con seleccionarla y darle f2 la variable o nombre de funcion o lo que sea se cambiara en todo el c贸digo.
Espero sea de ayuda para todos ustedes

Cada clase deber铆a de proponer algunos ejercicios.

Si tienen todo bien y no pueden ver el evento, s贸lo hagan click sobre el espacio en blanco y ah铆 s铆 comiencen a presionar teclas. Me pas贸 que s贸lo escrib铆a y sufr铆 un buen rato jajajaja

Diferencia entre keyup/keydown:

  • keydown 鈫 detecta el evento mientras este presionada la tecla (si mantenemos presionada la tecla tendremos muchas llamadas)
  • keyup 鈫 detecta el evento solo cuando dejamos de presionar la tecla (detecta el evento una sola vez por presionado)

Nota:
pasa lo mismo con los eventos mouseup y mousedown

Mi tarea permite escoger ancho y alto del canvas, cantidad de lineas y color.
Este es el codigo HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=鈥渦tf-8鈥>
<title>DIBUJANDO CON CANVAS</title>
</head>
<body>
<h1>Flor en CANVAS</h1>
<p>
Ancho del dibujo :
<input type=鈥渢ext鈥 id=鈥渢exto-ancho鈥/>
Alto del dibujo :
<input type =鈥渢ext鈥 id=鈥渢exto-alto鈥/>
Cantidad de l铆neas :
<input type=鈥渢ext鈥 id=鈥渢exto-lineas鈥/>
Color :
<input type=鈥渢ext鈥 id=鈥渢exto-color鈥/>
<input type=鈥渂utton鈥 value=鈥淎 darle鈥 id=鈥渂otoncito鈥/>
</p>
<canvas id=鈥渄ibujito鈥 width=600 height=600></canvas>
<p>asi queda la flor.</p>
<script src=鈥渄ibujo.js鈥>
</script>
</body>
</html>

El codigo javascript:

var texto=document.getElementById(鈥渢exto-lineas鈥);
var ancho=document.getElementById(鈥渢exto-ancho鈥);
var alto=document.getElementById(鈥渢exto-alto鈥);
var color=document.getElementById(鈥渢exto-color鈥);

var boton=document.getElementById(鈥渂otoncito鈥);
boton.addEventListener(鈥渃lick鈥,dibujoPorClick);

var d=document.getElementById(鈥渄ibujito鈥);
var lienzo = d.getContext(鈥2d鈥);

function dibujarLinea(color,xinicial,yinicial,xfinal,yfinal)
{
lienzo.beginPath();
lienzo.strokeStyle =color;
lienzo.moveTo(xinicial,yinicial);
lienzo.lineTo(xfinal,yfinal);
lienzo.stroke();
lienzo.closePath();
}

function dibujoPorClick()
{

d.width=ancho.value;
d.height=alto.value;
var l=0;
var lineas = parseInt(texto.value);
var alto2 = parseInt(alto.value);
var ancho2= parseInt(ancho.value);
var colorcito = color.value;
var espaciox = ancho2/2 / lineas;
var espacioy = alto2/2 / lineas;
var ax,ay,bx,by;
console.log(ancho2,alto2,espaciox,espacioy,lineas);

for(l=0 ; l < lineas ; l++)
{
ax = espaciox * l;
ay = espacioy * l;
bx = espaciox * (l + 1);
by = espacioy * (l + 1);
dibujarLinea(colorcito,0,ay,bx,alto2/2);
dibujarLinea(colorcito,ax,0,ancho2/2,by);
dibujarLinea(colorcito,ancho2/2,alto2/2-ay,ancho2/2+bx,0);
dibujarLinea(colorcito,ancho2/2+ax,alto2/2,ancho2,alto2/2-by);

dibujarLinea(colorcito,0,alto2-ay,bx,alto2/2);
dibujarLinea(colorcito,ax,alto2,ancho2/2,alto2-by);

dibujarLinea(colorcito,ancho2/2,alto2/2+ay,ancho2/2+bx,alto2);
dibujarLinea(colorcito,ancho2/2+ax,alto2/2,ancho2,alto2/2+by);

}
//Dibuja bordes exteriores
dibujarLinea(colorcito,1,1,ancho2-1,1);
dibujarLinea(colorcito,ancho2-1,1,ancho2-1,alto2-1);
dibujarLinea(colorcito,1,1,1,alto2-1);
dibujarLinea(colorcito,1,alto2-1,ancho2-1,alto2-1);
//Dibuja bordes internos
dibujarLinea(colorcito,ancho2/2,1,ancho2/2,alto2);
dibujarLinea(colorcito,0,alto2/2,ancho2,alto2/2);
}

Y los resultados:



Hola! una duda porque en atom
Al colocar html y tab me aparece as铆:

<!DOCTYPE html>
<html lang=鈥渆n鈥 dir=鈥渓tr鈥>

realmente no afecta en nada solo que no entiendo porque me aparece as铆 鈥
馃槃

驴Qui茅n m谩s prefiere estudiar de noche?

Estoy repasando antes de comprar el Platzi expert y volverme parte del la maravillosa familia Platzi.

Buenas practicas:

  • Los nombres de las funciones empiezan por min煤sculas y para diferenciar cada palabra nueva usamos May煤sculas (tambi茅n se puede usar _ para diferenciar palabras pero lo usual en javaScript son las may煤sculas)
  • Es mala practica tener n煤meros sueltos en el c贸digo es mejor darles un nombre descriptivos (para que sirven/que son)
  • Si tenemos constantes o variables que no van a cambiar usamos MAYUSCULAS para hacerlo notar
  • Es muy util aprender y usar los atajos del teclado

<!DOCTYPE html>
<html>
<head>
<meta charset=鈥渦tf-8鈥>
<title>Dibujando con mouse</title>
</head>
<body>
<canvas id=鈥渁rea_de_dibujo鈥 width=鈥300鈥 height=鈥300鈥></canvas>
<p>Mueve el mouse para dibujar<p>
<script src=鈥渆ventosmouse.js鈥></script>
</body>
</html>

var cuadro = document.getElementById(鈥渁rea_de_dibujo鈥)
var hoja = cuadro.getContext(鈥2d鈥);
var xi, yi, xf, yf, click;
var color = 鈥渞ed鈥

cuadro.addEventListener(鈥渕ousedown鈥, clickD);
cuadro.addEventListener(鈥渕ouseup鈥, clickU);
cuadro.addEventListener(鈥渕ousemove鈥, clickM);

function dibujarlinea(color, xinicial, yinicial, xfinal, yfinal, lienzo)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.lineWidth = 3;
lienzo.moveTo(xinicial, yinicial);
lienzo.lineTo(xfinal, yfinal);
lienzo.stroke();
lienzo.closePath();
}

function clickD(evento1)
{
click=true;
xi = evento1.layerX;
yi = evento1.layerY
}

function clickM(evento2)
{
if(click)
{
xf = evento2.layerX;
yf = evento2.layerY
dibujarlinea(color, xi, yi, xf, yf, hoja)
xi = xf;
yi = yf;
}
}

function clickU(evento3)
{
click = false;
}

var teclas = {UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39 };

document.addEventListener(鈥渒eyup鈥,dibujarTeclado);
function dibujarTeclado(evento)
{
switch (evento.keyCode) {
case teclas.DOWN:
console.log(鈥渁bajo鈥)
break;
case teclas.UP:
console.log(鈥渁rriba鈥);
break;
case teclas.LEFT:
console.log(鈥渋zquierda鈥);
break;
case teclas.RIGHT:
console.log(鈥渄erecha鈥);
break;
default:
}
}

Realice el c贸digo con laposicion inicial que me tome al dar un click en el canva


concuerdo con usar el switch en casos muy repetitivos y se ve el c贸digo muy sencillo de leer, los if los uso cuando son s贸lo uno o cuando es en cadena; un if tras otro if.

Me parece que este curso deberia primero que todo comenzar por definir que es cada cosa y como reconocerlo de acuerdo a la estructura sintactica. por ejemplo que es un objeto, que es su atributo etc.

switch (evento.keyCode) {
case teclas.ARRIBA:
console.log(鈥渟ubir鈥);
break;
case teclas.ABAJO:
console.log(鈥渂ajar鈥);
break;
case teclas.IZQUIERDA:
console.log(鈥渋zquierda鈥);
break;
case teclas.DERECHA:
console.log(鈥渄ercha鈥);
break;
default:
alert(鈥減resione las flechas鈥)

Si tambi茅n tienes problemas para ver (evento) en Chrome puede ser por la versi贸n del navegador.
La manera en que te salen las especificaciones del KeyboardEvent es:

  1. Ve a la opci贸n 鈥淪ources鈥 a un lado de 鈥淐onsole鈥.
  2. De lado izquierdo inferior hay un men煤 con la opci贸n "Event Listener Breakpoints,
    dale click para desplegar las opciones que tiene y dale check en la casilla 鈥淜eyboard鈥.
  3. Da click en el navegador y presiona la tecla que quieras. Y vual谩!!
  4. En la ventana Scope te aparecer谩n las especificaciones 馃槂

Espero les funcione!

Switch es m谩s comodo porque agrupa las opciones; no sirve para mayor o menor que, sirve para comparar una cosa inicial con una cosa final. Es una sintaxis que no se ve en ninguna instrucci贸n, en vez de tener bloques de c贸digo tiene dos puntos y un break.

desaf铆o completado :V

var teclas = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
};

console.log(teclas);

document.addEventListener("keyup", dibujarTeclado);

function dibujarTeclado(evento)
{
  
  switch (evento.keyCode)
  {
    case teclas.UP:
      console.log("Camino al cielo");
    break;
    case teclas.DOWN:
      console.log("Camino al infierno");
    break;
    case teclas.LEFT:
      console.log("Comunista");
    break;
    case teclas.RIGHT:
      console.log("Liberal");
    break;
    default:
    console.log("la existencia precede a la esencia");
  }
}

隆Listo!

Resumen:

  • Los eventos no necesitan par谩metros porque son opcionales, + (variable) que guarda todos los eventos en esa variable
  • keyCode 鈥> c贸digo interno del sistema operativo, es la forma en la que se almacenan letras u otras.
  1. Todas las teclas tienen un c贸digo de esos.
  2. De esa forma esta implementado por dentro en el interior de JavaScript
  • Los n煤meros gastan menos espacio en memoria
  • Forma f谩cil de saber cual de las flechas estoy oprimiendo es guard谩ndolo en una variable especial
  1. Una especie de colecci贸n de variables
  2. Ejemplo: (edad = 20) es una variable (caja) y esa caja JavaScript la llama un objeto literal
  3. O simplemente un objeto, que tiene una colecci贸n interna de variables
  4. Objeto inmediatamente descrito
  5. Cuando tienes una variable que no va a cambiar en mucho tiempo , y una pr谩ctica interna de los programadores es poner esa variable en may煤sculas:
    Ejemplo 鈥> keyCode (鈥渄onde C esta en may煤scula鈥)
  6. variable, atributo o propiedad que est茅n en may煤scula no cambiar谩 a lo largo del tiempo: ejemplo 鈥> UP, DOWN, LEFT, RIGHT
  7. Ser铆a un valor perpetuo (鈥淧or decirlo as铆鈥);
  8. Una colecci贸n de variables es igual a un bloque de c贸digo y parecido al CSS o JSON
  9. Notaci贸n de objetos en JavaScript
  • Var con var por dentro debes crear un bloque de c贸digo
  • Javascript Object Notation o JSON
  • Proto 鈥> alert(鈥渕undo extra帽o鈥); forma en que internamente los navegadores estructuran un objeto para que este listo
  • Recuerda 鈥> switch es una estructura de control que se utiliza cuando hay mucho if

A mi no me aparece en el navegador en consol茅mosle no me aparece 鈥渢ecla oprimida鈥濃so el programa visual studio

Es una mala practica colocar n煤meros sueltos dentro del c贸digo, cuando tenemos n煤meros que significan algo no nos cuesta nada crear variables que le agreguen ese significado, adem谩s ser谩 mas f谩cil acceder a ellas.

Alguien puede ayudarme explic谩ndome por que la linea de c贸digo鈥ocument.addEventListener(鈥淜eydown鈥 , dubijarTeclado);
no me funciona ?
no me marca error pero tampoco se ejecuta cuando declaro la funci贸n en la siguiente linea.

hola tengo un peque帽o problema al momento de utilizar addEventListener no pasa nada, no entiendo por que.
Alguien que me pueda ayudar

Un breve (muy breve) resumen:
Se detecto un evento del teclado y para eso usamos document.addEventListener (鈥淓scucha el evento鈥) y luego lo definimos con keyup; keydown y luego se defini贸 la funci贸n function dibujarTeclado(evento) que se producir铆a al realizar el evento y se le agrego la una variable donde se guardar铆a el evento y adentro de la funci贸n usamos _switch (evento.keyCode) _ que es un condicional como if pero este los agrupa.

Muchas Gracias Freddy, yo nunca me imagine de que iba a escribir lineas de c贸digos, excelente pedagog铆a.

en javascript una variable con variables internas se manejan como objetos, mientras q en otros lenguajes se manejan como arreglos o variables de varias dimensiones. y el uso de switch tiene otra funcion de condicional.

Este curso es lo m谩ximo!!!
Tiene bastante informaci贸n y les recomiendo ver las clases al menos un par de veces para anotar la info clave (que es un mont贸n, al menos para los que reci茅n aprendemos) y luego intentar hacer el c贸digo por uno mismo.

Switch: estructura de control;

驴Qu茅 es una estructura de control?

  • Una estructura de control son aquellas que nos permiten modificar el flujo de la ejecuci贸n de las instrucciones de un programa, tarea o funci贸n.

  • En otras palabras: una estructura de control nos ayuda a que nuestro c贸digo tome decisiones basado en lo que tengamos definido.

Oigan, no se si les pas贸, pero por esta clase entend铆 c贸mo programan los mandos de los videojuegos 鉂わ笍

les recomiendo mucho este PDF: https://drive.google.com/file/d/11Qd_2a9YfHq7Yt4IGLXwWRs6OFpSu-6o/view
all铆 podran encontrar apuntes de JS muy bien explicados, sobre todo te贸ricos

El conocimiento compartido en la manera que Freddy lo hace,es la forma mas eficiente para despues aplicarlo!

A partir del minuto 31 ya estaremos haciendo aerobics.

Hola!!! Incluyo lo q me ha quedado luego de la inclusi贸n de las otras teclas鈥

Le puse tambi茅n A, W, S, D

Alguein sabe por que me parece en rojo el document?
document.addEventListener(鈥渒eydown鈥,dibujartecaldo);

Una pregunta. 驴Es obligatorio como programador aprenderte los keycode?. ya que si por alg煤n motivo no puedes tener acceso a esos n煤meros y los necesitas.

Hola,

Les relaciono el resultado del peque帽o desafio:

switch (evento.keyCode) {
case teclas.UP:
console.log(鈥渁rriba鈥);
break;
case teclas.DOWN:
console.log(鈥渁bajo鈥);
break;
case teclas.LEFT:
console.log(鈥渋zquierda鈥);
break;
case teclas.RIGHT:
console.log(鈥淒erecha鈥);
break;
default:
console.log(鈥渙tra tecla鈥);
}

Saludos!

Logrado

switch (evento.keyCode)
  {
    case teclas.UP:
      console.log("Arriba");
      break;
    case teclas.DOWN:
      console.log("Abajo");
      break;
    case teclas.RIGHT:
      console.log("Derecha");
      break;
    case teclas.LEFT:
      console.log("Izquierda");
      break;
    default:
      console.log("Otra tecla");
  }
}
var keys = {
  UP: 38,
  RIGHT: 39,
  LEFT: 37,
  DOWN: 40
};

document.addEventListener("keyup", drawWithKeyboard);

function drawWithKeyboard(event) {
  switch (event.keyCode) {
    case keys.UP:
      console.log("UP PRESSED");
      break;
    case keys.RIGHT:
      console.log("RIGHT PRESSED");
      break;
    case keys.LEFT:
      console.log("LEFT PRESSED");
      break;
    case keys.DOWN:
      console.log("DOWN PRESSED");
      break;
    default:
      console.log("KEY CODE PRESSED: " + event.keyCode);
  }
}
var teclas =
{
    UP:38,
    DOWN: 40,
    LEFT: 37,
    RIGTH: 39

};
console.log(teclas);
document.addEventListener("keyup", dibujarTeclado);

function dibujarTeclado(evento)
{
    
    switch (evento.keyCode) {
        case teclas.UP:
            console.log("Arriba");
            break;
        case teclas.DOWN:
            console.log("Abajo");
            break;
        case teclas.LEFT:
            console.log("Izquierda");
            break;
        case teclas.RIGTH:
            console.log("Derecha");
            break;
        default:
            console.log("Otra tecla");
            break;
        
    }
    
}
// JavaScript source code
var teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};

console.log(teclas);
document.addEventListener("keyup", dibujarTeclado);

function dibujarTeclado(evento) {
   
    switch (evento.keyCode) {
        case teclas.UP:
            console.log("Vamos para arriba");
        break;

        case teclas.DOWN:
            console.log("Vamos abajo");
        break;

        case teclas.LEFT:
            console.log("Vamos para la izquierda");
        break; 

        case teclas.RIGHT:
            console.log("Vamos para la derecha");
        break; 

        default:
            console.log("Otra tecla");
        break;
    }
}

Hace tiempo no ve铆a el switch, cuando aprend铆a a programar FPGAs le llam谩bamos 鈥渃ase鈥, en ese tiempo era fan谩tico de su uso.
Ahora se que toca usar cuando sea mejor usarlo, no siempre 馃槈

// script.js
var teclas = { UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39 };

console.log(teclas);

document.addEventListener("keyup", dibujarTeclado);

function dibujarTeclado(evento) {
  switch (evento.keyCode) {
    case teclas.UP:
      console.log("UP");
      break;
    case teclas.DOWN:
      console.log("DOWN");
      break;
    case teclas.LEFT:
      console.log("LEFT");
      break;
    case teclas.RIGHT:
      console.log("RIGHT");
      break;
    default:
      console.log("tecla oprimida " + evento.key + " kecode " + evento.keyCode);
  }
}

Tambien puedes desplegar la consola en Windows, con la tecla de funcion F12; Saludos y sigamos disfrutando de ese camino largo pero excitante de aprender programacion.

Aun me falta mucho por aprender pero es evidente que con la efectividad con la que instruye Freddy Vegas ser谩 m谩s f谩cil llegar al nivel deseado.
Ya estoy empezando a entender!!!

A mi no me sale los numeritos solo se acumulan en la pantalla, supongo que ha de ser de la cong驴figuracion del navegador, especificamente alguien sabe porque?

me esta gustando este curso en mi vida no he visto nada de programaci贸n pero estoy mirando el curso y me esta interesando aunque es un poco complicado pero es de dedicaci贸n .

<var teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};

document.addEventListener("keyup", dibujarTeclado);

function dibujarTeclado(evento)
{
    switch(evento.keyCode)
    {
        case teclas.UP:
            console.log("arriba");
        break;
        case teclas.DOWN:
            console.log("abajo");
        break;
        case teclas.LEFT:
            console.log("izquierda");
        break;
        case teclas.RIGHT:
            console.log("derecha");  
        break; 
    }
}> 
switch(evento.keyCode)
{
	case teclas.DOWN:
		console.log("Abajo");
	break; 
	case teclas.UP:
		console.log("Arriba");
	break;
	case teclas.RIGHT:
		console.log("Derecha");
	break; 
	case teclas.LEFT:
		console.log("Izquierda");
	break;
	default:
		console.log("Otra tecla");
    }

Aqui dejo mi codigo para el ejercicio de dibujar en canvas con las teclas

var teclas = {
UP: 38,
DOWN: 40,
LEFT: 37,
RIGHT: 39
};

var ancho = document.getElementById(鈥渉tmlArea鈥).clientWidth;
var largo = document.getElementById(鈥渉tmlArea鈥).clientHeight;
var posX = ancho/2;
var posY = largo/2;
var linea = 5;
var color = "red"
var area = document.getElementById(鈥渉tmlArea鈥).getContext(鈥2d鈥);

function dibujame(colorTrazo, xI, yI, xF, yF) {
area.beginPath();
area.strokeStyle = colorTrazo;
area.moveTo(xI, yI);
area.lineTo(xF, yF);
area.stroke();
area.closePath();
}

document.addEventListener(鈥渒eyup鈥, dibujarTeclado);

function dibujarTeclado(evento) {
switch(evento.keyCode){
case teclas.UP:
dibujame(color, posX, posY, posX, posY - linea);
posY = posY - linea;
break;
case teclas.DOWN:
dibujame(color, posX, posY, posX, posY + linea);
posY = posY + linea;
break;
case teclas.LEFT:
dibujame(color, posX, posY, posX - linea, posY);
posX = posX - linea;
break;
case teclas.RIGHT:
dibujame(color, posX, posY, posX + linea, posY);
posX = posX + linea;
break;
default:
console.log(鈥淥tra tecla鈥);
break;
}
}

Yo utilize IF para la flecha.UP y Switch para las demas, me di cuenta que ejecuta los dos, entonces mostraba 鈥渙tra tecla鈥 y 鈥渁rriba鈥 al mismo tiempo. Tegan cuidado

Este es un curso Premium y Freddy eres un excelente instructor, estoy atrapado, enamorado y amarrado a JavaScript.

Que buen curso, estoy aprendiendo cada d铆a mas, incluso hay detalles que desconoc铆a.

estudie programacio de software pero platzi e aprendido cosas que no aprendi en sena .

Las buenas practicas nos facilitan la vida a todos los programadores, nos facilita la lectura.

cada vez el curso se pone mejor.!

Logrado. Seguimos aprendiendo con Platzi. Excelente!

Hola, alguien podr铆a decirme como publicar una imagen aqui?

Ahhhh, estuvo fant谩stica la clase. Hay que diferenciar de HTML Y JavaScript

Tip:
Depende del teclado pero por lo regular "F12 " tambien da acceso a la consola

Freddy, la palabra negligible no existe en espa帽ol.

Este curso simplemente ha sido interesante y relajante de huevos!

Alguien sabe como hago la estructura el HTML con el teclado de MAC

Necesitamos a gente como Freddy en el gobierno #FreddyparaPresidente ;D

keydown-> cuando oprimes un teclado, se cuenta hasta que dejes de oprimirla (si importa el tiempo)
keyup-> se cuenta cuando dejas de oprimirlo( no importa el tiempo que lo estas oprimiendo)

Estoy estudiando para entrar a medicina de la universidad, este curso me relaja bastante cuando ya no siento los parpados ajajjaja, me encanta la verdad.
console.log(" dales las gracias a PLATZI 馃槂 ");

Ahi esta mi codigo completo, adicionalmente agregue una funci贸n para poder cambiar el color de la linea con un solo click, seleccionando un boton en la interfaz grafica.

Aqui voy, poco a poco aprnediendo. En este punto aun sigo luchando para hacer el funcionamiento del mouse, pero antes de seguir con los videos voy a terminar con el mouse.

Ayuda

驴C贸mo detectamos cual tecla presiona el usuario?

  • Primero hay que determinar en que punto le agregamos el addEventListener, este debe ser en el punto donde todo ocurre, el document.

      	document.addEventListener()
    
  • La forma de llamar la acci贸n de oprimir una tecla es 鈥渒eydown鈥 y su contraparte 鈥渒eyup鈥

      	document.addEventListener("keyup", dibujarTeclado);
    
  • Dibujamos la funci贸n dibujarTeclado

      	function dibujarTeclado ()
      	{
      	
      	}
    
  • Para poder detectar que tecla fue oprimida podemos utilizar console.log leyendo cuales son los datos que posee el evento de la funci贸n

      	function dibujarTeclado (evento)
      	{
      		console.log ("evento");
      	}
      	
      Esto nos arrojar谩 los datos que necesitamos al utilizar cualquier tecla, en este caso el code y el keycode:
      	- "ArrowUp"  38
      	- "ArrowDown" 40  
      	- "ArrowRight" 39
      	- "ArrowLeft" 37
    
  • Al conocer los valores de las teclas vamos a crear variables para usarlas. En este caso vamos a crear una sola variable con variables por dentro, esto vamos a hacerlo con un bloque de c贸digo

      	var teclas = {
      		UP: 38
      		DOWN: 40
      		RIGHT: 39
      		LEFT: 37
      	}
      	
      	Este bloque de c贸digo lo separamos con comas (,) ya que t茅cnicamente es una sola l铆nea de c贸digo, en la 煤ltima variable no le colocamos "coma" ya que si lo hacemos nos crear铆a un error de sintaxis, tambi茅n es una buena pr谩ctica escribir las variables que nunca o casi nunca cambian en may煤sculas, como en este caso.
    
  • Para verificar que nuestras variables funcionan al momento de presionas las teclas deseadas vamos a probarlo con if鈥檚 y console.log.

      	function dibujarTeclado (evento)
      	{
      		if (evento.keycode == teclas.UP)
      		{
      			console.log ("Vamo' pa arriba");
      		}
      		if (evento.keycode ==teclas.DOWN)
      		{
      			console.log ("Vamo' pa abajo");
      		}
      	}
      	
      	(Recordemos que == es para comparar en JS) Este ejercicio nos deber铆a arrojar el mensaje establecido en la consola al presionas las teclas establecidas para verificar que el c贸digo est谩 funcionando.
    
  • Para continuar deber铆amos crear cuatro if鈥檚 para cada una de nuestras teclas. Pero existe una funci贸n que nos simplifica esta tarea: switch, la cual se usa cuando se deben asignar varios if鈥檚 y siempre y cuando todos sean para comparar (==)

      	function dibujarTeclado (evento) 
      	{
      		switch (evento.keycode)
      		{
      			case teclas.UP:
      				console.log ("arriba");
      			break;
      			case teclas.DOWN:
      				console.log ("abajo");
      			break;
      			default:
      				console.log ("otra tecla");
      			break;
      		}
      			
      	}
      	
      	El switch 煤nicamente funciona para comparar, funciona con case que determina la funci贸n que se va a ejecutar, al terminar se utiliza un break, la forma de determinar el "else" es con un default.

keyCode = el c贸digo interno del sistema operativo en el que el sistema operativo almacena las teclas