La impresión que me ha quedado hasta ahora es que, a pesar de que el curso es "Programación básica" va mucho más allá que la oferta actual de cursos básicos gratuitos.

Es básico, enseña los conceptos fundamentales de la programación, pero lo hace mediante la construcción de proyectos, con tecnologías actuales. Esa es la diferencia, te hace sentir involucrado, te hace parte, te pone en la mente del programador, te prepara para lo que te puedes encontrar en éste mundo y te guía en la creación de proyectos muy interesantes mientras aprendes las bases de la programación.

Para todo el equipo de Platzi que trabajaron con mucho esfuerzo y amor para que todo esto fuera posible ¡Muchísimas gracias! Cuando aprendo cosas nuevas, experimento crecimiento personal. 

Freddy nos enseña con humildad, he visto mucha gente que le da rabia porque uno no sabe, o hace las clases aburridas o simplemente no sabe conectar con uno porque no es capaz de expresar los conceptos en un estado intermedio entre lo técnico y los conocimientos del público objetivo. Enseñar no es fácil, admiro y agradezco ese talento

Lo siento si consideran que éste espacio es más para discusiones de la clase que para mi comentario. Solo quería expresarlo porque sentía que tenía que divulgar el impacto que ha generado el curso en mi y lo afortunados que somos de tener una startup latinoamericana como ustedes que sacan la cara por la región (y que nos instruyen con temas actuales en Platzi Live)

Problemas a resolver en esta clase:

1: ¿Cómo detectamos cuando el usuario presiona una flecha arriba,abajo etc.?

2:¿Que evento es  y cómo se llama? keydown o keyup

3:¿Cómo dibujar las líneas?... siguiente clase

4: Recordar el último punto donde me quedé para trazar la siguiente raya. ... siguiente clase

1)Detectar la tecla presionada con el evento keydown: 

document.addEventListener('keydown',nombreFunción);

CamelCase es un estilo de escritura que se aplica a frases o palabras compuestas. El nombre se debe a que las mayúsculas a lo largo de una palabra en CamelCase se asemejan a las jorobas de un camello. El nombre CamelCase se podría traducir como Mayúsculas/Minúsculas Camello. El término case se traduce como "caja tipográfica", que a su vez implica si una letra es mayúscula o minúscula y tiene su origen en la disposición de los tipos móviles en casilleros o cajas.

Existen dos tipos de CamelCase:

• UpperCamelCase, cuando la primera letra de cada una de las palabras es mayúscula. Ejemplo: EjemploDeUpperCamelCase.
• lowerCamelCase, igual que la anterior con la excepción de que la primera letra es minúscula. Ejemplo: ejemploDeLowerCamelCase.

Fuente: https://es.wikipedia.org/wiki/CamelCase

Atajo de teclado para abrir la consola en el navegador:

ctrl+Shift+i

Recargar el navegador:

Ctrl+r

Código de teclas para las flechas:

// Flecha Izquierda: KeyCode= 37

// Flecha Arriba: KeyCode= 38

// Flecha Derecha: KeyCode= 39

// Flecha Abajo: KeyCode= 40

Objeto para almacenar el valor numérico de las teclas: JSON (Javascript Objet Notation)

var teclas = {

UP:38,   // Clave-Valor

DOWN:40,  //Clave-Valor

LEFT:37,  // Clave-Valor

 

RIGTH:39  // el último elemento no lleva coma. 

}

Estas líneas serían lo mismo que esto:

var teclas = {UP:38,DOWN:40,LEFT:37,RIGTH:39} //Por eso el último elemento no lleva coma. 

Estructura de control switch: (se utiliza en casos especiales porque no es muy legible el código)

switch(tecla.keyCode) {

  case teclas.UP:console.log('arriba switch');

  break;

  case teclas.DOWN:console.log('abajo switch');

  break;

  case teclas.RIGTH:console.log('derecha switch');

  break;

  case teclas.LEFT:console.log('izquierda switch');

  break;

  default: console.log('¿Para dibujar utiliza las flechas del teclado?');// en caso que la tecla  oprimida no sea una flecha

  breack; // el último breack no es necesario porque finaliza el bloque de código.  

}

🐱‍💻 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;
    }
}

Freddy que paso con que switch "es del diablo". jajaja 

console.log("conexión :D");

var canva = document.getElementById("area_de_dibujo");
var lienzo = canva.getContext("2d");

document.addEventListener("keyup",dibujarTeclado);
var contador = 0;//esta variable sirve para saber si ya iniciamos el dibujo
var xi=0,yi=0;//posiciones

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

function dibujarTeclado(e)
{
  var aumento = 10;//el numero de pixeles de largo de la linea
  var color = "#0B88B5";//color de la linea

  if(contador == 0)//si aun no iniciamos el dibujo
  {
    xi = (canva.width / 2);//punto en x de inicio
    yi = (canva.height / 2);//punto en y de inicio
    contador++;
  }
  if(e.keyCode == teclas.LEFT)//tecla izquierda
  {
    dibujarLinea(color,xi,yi,(xi-aumento),yi);
    xi = xi-aumento;//disminuimos en x
    yi = yi;
  }
  else if(e.keyCode == teclas.UP)//tecla arriba
  {
    dibujarLinea(color,xi,yi,xi,yi-aumento);
    xi = xi;
    yi = yi-aumento;//disminuimos en y
  }
  else if(e.keyCode == teclas.RIGTH)//tecla derecha
  {
    dibujarLinea(color,xi,yi,xi+aumento,yi);
    xi = xi+aumento;//aumentamos en x
    yi = yi;
  }
  else if(e.keyCode == teclas.DOWN)//tecla abajo
  {
    dibujarLinea(color,xi,yi,xi,yi+aumento);
    xi = xi;
    yi = yi + aumento;//aumentamos en y
  }
}
//funcion para dibujar lineas
function dibujarLinea(color,xinicial,yinicial,xfinal,yfinal)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xinicial,yinicial);
  lienzo.lineTo(xfinal,yfinal);
  lienzo.stroke();
  lienzo.closePath();
}```

Frases Freddy 2016 : "Cuádo ustedes aprenden a usar Switch, empiezan a ver todos los problemas como un problema switchiable "  

jajajaja Muy ciertas palabras 

En la universidad pasaron 8 cuatrimestres para que apenas empezaramos con JS, asi queaprendi por mi cuenta, y hasta ahora, me esta resolviendo dudas y mostrando secretos que desconocia por completo... GRACIAS PLATZI!!!

 por cierto cuando tengan un error en el código (hasta el momento lo he visto en lo referente  a la sintaxis) y no sepan donde esta, pueden ejecutar el archivo html  he ir a la consola, ahi les mostrara el error en color rojo, y al final les aparecerá el nombre del archivo y la linea de donde esta el error. hasta el momento me ha salvado de estar revisando el código linea por linea 

Una gran persona un dia me dijo  "switch es del diablo" y no lo pienso usar

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 (“donde 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(“mundo 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

++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.

Estoy super emocionado ya voy en esta clase en solo dos dias yeahh.. Amo platzi

ese tipo de escritura donde se unen las palabras y cada nueva palabra es mayúscula se le llama 'camelCase'  :)

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.

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.

_“La 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
}

Solo digiten log + tab y obtendrán console.log() más rápido.

Con "keydown" se satura el documento por la cantidad de eventos que suceden al dejar la tecla presionada. Con el "keyup" sólo se detecta el evento cuando la tecla se suelta.

Les dejo mi ejercicio tomando en cuenta las paredes y no se desborde.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Dibujando con Flechas</title>
  </head>
  <body>
    <h1>Dibujando con Flechas</h1>
    <canvas id="area_de_dibujo" width="300" height="300"></canvas>
    <p>Mueve las flechas del teclado para dibujar.</p>
    <script src="eventosTeclado.js"></script>
  </body>
</html>

JS

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

// keydown: tecla mantenida, keyup: tecla oprimida
document.addEventListener("keydown", dibujarTeclado);
var cuadradito = document.getElementById('area_de_dibujo');
var lienzo = cuadradito.getContext('2d');
var x = 150, y = 150; // Posiciones Iniciales.
var colorInicial = "red";
var colorParedes = "skyblue";
var colorcito = "#FAA";

//console.log(evento);

// Dibujar el punto de inicio.
dibujarLinea(colorInicial, x - 1, y - 1, x + 1, y + 1);
// Dibujar las paredes del canvas.
dibujarLinea("skyblue", 0, 0, 0, 300); // Izquierda
dibujarLinea("skyblue", 300, 0, 300, 300); // Derecha
dibujarLinea("skyblue", 0, 0, 300, 0); // Arriba
dibujarLinea("skyblue", 0, 300, 300, 300); // Abajo

function dibujarTeclado(evento) {
  var movimiento = 10;

  switch (evento.keyCode) {
    case teclas.UP:
      if (y > 0) {
        dibujarLinea(colorcito, x, y, x, y - movimiento);
        y = y - movimiento;
      }
    break;
    case teclas.DOWN:
      if (y < 300) {
        dibujarLinea(colorcito, x, y, x, y + movimiento);
        y = y + movimiento;
      }
    break;
    case teclas.LEFT:
      if (x > 0) {
        dibujarLinea(colorcito, x, y, x - movimiento, y);
        x = x - movimiento;
      }
    break;
    case teclas.RIGHT:
      if(x < 300) {
        dibujarLinea(colorcito, x, y, x + movimiento, y);
        x = x + movimiento;
      }
    break;
  }
}

function dibujarLinea(color, xInicial, yInicial, xFinal, yFinal) {
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 3; // Grosor de la línea.
  lienzo.moveTo(xInicial, yInicial);
  lienzo.lineTo(xFinal, yFinal);
  lienzo.stroke();
  lienzo.closePath();
}

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();
}```

Aporte 

Cuando colocamos un solo igual (=) lo que estamos realizando en una asignación de valor . Es decir cuando queremos que una variable sea igual a algo solamente aplicamos un igual (=) como por ejemplo var profesor = "Freddy"; 

Luego cuando utilizamos un doble igual (==) lo que estamos realizando es una comparación entre dos valores . Por eso es que donde mas lo van a utilizar es dentro de los condicionales (if , swich) . Es decir que si queremos comparar si mi variable es igual a un valor aplicamos el doble igual (==) . profesor == "Freddy".

Por último existe algo mas que nos podemos encontrar, es un triple igual (===) lo que realiza esto es una comparación entre dos valores pero ademas de comparar el valor compara el tipo de los valores . Es decir si comparamos 10 === "10" , por mas que el valor sea el mismo nos va a decir que la comparación es falsa ya que un valor es de tipo entero y otro es de tipo alfanumérico 

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 “keyCode” 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 “keyCode” que use “which” para ver el numero de cada tecla y me funciono 😃
Solo por si alguien mas tenia ese problema lo menciono,ME ENCANTA PLAZTI!!!

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();
}

se debe estar muy pendiente de las mayúsculas y minúsculas, ademas de los puntos y de las comas y punto y coma…
y no es solo por buenas practicas sino también porque a veces no se
ejecuta el código

Gracias Freddy, no esperaba llegar tan lejos en un curso gratuito

Vengo del curso de programación básica del 2014, se nota bastante la diferencia con platzi Core. Felicidades amo esta plataforma.

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!

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.

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.

Hola, compañeros les comparto mi código

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;
  }

}

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 :(");
	}
}

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

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=“utf-8”>
<title>DIBUJANDO CON CANVAS</title>
</head>
<body>
<h1>Flor en CANVAS</h1>
<p>
Ancho del dibujo :
<input type=“text” id=“texto-ancho”/>
Alto del dibujo :
<input type =“text” id=“texto-alto”/>
Cantidad de líneas :
<input type=“text” id=“texto-lineas”/>
Color :
<input type=“text” id=“texto-color”/>
<input type=“button” value=“A darle” id=“botoncito”/>
</p>
<canvas id=“dibujito” width=600 height=600></canvas>
<p>asi queda la flor.</p>
<script src=“dibujo.js”>
</script>
</body>
</html>

El codigo javascript:

var texto=document.getElementById(“texto-lineas”);
var ancho=document.getElementById(“texto-ancho”);
var alto=document.getElementById(“texto-alto”);
var color=document.getElementById(“texto-color”);

var boton=document.getElementById(“botoncito”);
boton.addEventListener(“click”,dibujoPorClick);

var d=document.getElementById(“dibujito”);
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:

Felicitaciones a Platzi y a Freddy este curso es genial.

Hice el código para dibujar con el mouse, inicia la linea con mousedown desplaza el cursor con el botón presionado hasta donde quiere que termine y dibuja la linea con mouseup, funciona bien, pero en móviles no me funciona.

Alguien me puede explicar como hago para que me funcione en un iPhone?

Ver código en: 

http://www.piloto266.com/ensayo2

Saludos,

Cada clase debería de proponer algunos ejercicios.

Excelente, vídeo aprendí más en 38 min aquí que 1 semestre en la universidad XD

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

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

Freddie la consola no se muestra en mi navegador de la manera en que tu la tienes en el video. 

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

<!DOCTYPE html>
<html lang=“en” dir=“ltr”>

realmente no afecta en nada solo que no entiendo porque me aparece así …
😄

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')
    }
}```

¡La manera en la que explicas es brutal!
Mucho mejor que los profesores de mi Universidad.
De verdad se agradece muchísimo el esfuerzo;
Supe de Platzi por un programa de radio, y comentaron la iniciativa que tuvieron con respecto a Venezuela. Es admirable 😄

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("arriba");

    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("otras teclas");

 }

}

iba hacer una anidacion del codigo pero la opcion de switch es mejor.

¿Quién más prefiere estudiar de noche?

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

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.

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

document.addEventListener("keyup",breaki)

var teclas =
{
  UP:   38,
  DOWN: 40,
  LEFT: 37,
  RIGH: 39
};
      function breaki(breac)
    {
      switch (breac.keyCode)
      {
        case teclas.UP:
        console.log("arriba");
        break;
        case teclas.DOWN:
        console.log("abajo");
        break;
        case teclas.LEFT:
        console.log("izquierda");
        break;
        case teclas.RIGH:
        console.log("derecha");
        break;
        default:
        console.log("otraTecla")
      }
    }

Un breve (muy breve) resumen:
Se detecto un evento del teclado y para eso usamos document.addEventListener (“Escucha 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.

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

Mi aporte!

eventos.js

var teclas = {UP: 38, DOWN: 40, LEFT: 37, RIGTH: 39 }; //JSON (JavaScript Object Notation)

document.addEventListener("keyup",dibujarTeclado); //keyup:soltar tecla | keydown:presionar tecla

function dibujarTeclado(evento){
	switch(evento.keyCode){
		case teclas.UP:
			console.log("arribea");
			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;
	}//end switch
}//end dibujarTeclado

flechas.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Dibujando con flechas</title>
</head>
<body>
	<canvas width="300" height="300" id="area_de_dibujo"></canvas>
	<p>Mueve las flechas del teclado para dibujar</p>
	<script src="eventos.js"></script>
</body>
</html>

Saludos!

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

Alguien puede ayudarme explicándome por que la linea de código…document.addEventListener(“Keydown” , dubijarTeclado);
no me funciona ?
no me marca error pero tampoco se ejecuta cuando declaro la función en la siguiente linea.

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.!

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.

A mi no me aparece en el navegador en consolémosle no me aparece “tecla oprimida”…uso el programa visual studio

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 (“donde 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 (“Por 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(“mundo 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

¡Listo!

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");
  }
}

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.

Logrado. Seguimos aprendiendo con Platzi. Excelente!

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 “Sources” a un lado de “Console”.
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 “Keyboard”.
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!

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

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

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

switch (evento.keyCode) {
case teclas.ARRIBA:
console.log(“subir”);
break;
case teclas.ABAJO:
console.log(“bajar”);
break;
case teclas.IZQUIERDA:
console.log(“izquierda”);
break;
case teclas.DERECHA:
console.log(“dercha”);
break;
default:
alert(“presione las flechas”)

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.

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

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.

http://gcctech.org/csc/javascript/javascript_keycodes.htm

Todos los kEyCode del teclado

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

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

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

document.addEventListener(“keyup”,dibujarTeclado);
function dibujarTeclado(evento)
{
switch (evento.keyCode) {
case teclas.DOWN:
console.log(“abajo”)
break;
case teclas.UP:
console.log(“arriba”);
break;
case teclas.LEFT:
console.log(“izquierda”);
break;
case teclas.RIGHT:
console.log(“derecha”);
break;
default:
}
}

"use stric"
/**
*@Autor: Edwin zenon
*@fecha: 12/04/2020 9:41pm
*/
document.addEventListener("keyup",dibujarTeclado);
function dibujarTeclado(evento){
  //console.log(evento);
  switch (evento.keyCode) {
    case 37:
      console.log("izquierda");break;
    case 38:
    console.log("arriba");break;
    case 39:
      console.log("derecha");break;
    case 40:
      console.log("abajo");break;

    default:
    console.log("No mames wey");
    break;

    }

}```

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>Dibujando con mouse</title>
</head>
<body>
<canvas id=“area_de_dibujo” width=“300” height=“300”></canvas>
<p>Mueve el mouse para dibujar<p>
<script src=“eventosmouse.js”></script>
</body>
</html>

var cuadro = document.getElementById(“area_de_dibujo”)
var hoja = cuadro.getContext(“2d”);
var xi, yi, xf, yf, click;
var color = “red”

cuadro.addEventListener(“mousedown”, clickD);
cuadro.addEventListener(“mouseup”, clickU);
cuadro.addEventListener(“mousemove”, 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;
}

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

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

SWICH me parece muy practico.

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");
    }

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?

Estuve buscando cursos de programación y este me gustó mucho, muy buenas las clases.

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!!!

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.

Hola Fredy vengo del 2021 y el bitcoins es una buena inversión

genial este curso

Todo esto es increíble

¡Listo!

buenardo