Dibujar con eventos

Clase 20 de 50 • Curso de Programación Básica 2014

Contenido del curso

Bienvenido

Introducción básica a HTML y Javascript para programar

Variables, Matrices y Objetos en Javascript

Ciclos y Dibujos con Canvas

Programando juegos con canvas

Uso de Objetos, Prototype y juego de ahorcado en Canvas

Cómo crear un algoritmo para el juego del ahorcado

Pregúntale a Freddy lo que quieras ... acerca de programación ;)

34
Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 1
32:25 min
35
Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 2
56:14 min

Conceptos básicos de programación: Frontend-Backend

Crea tu primer servidor web con Node.JS

Aprende a volar un dron con Javascript

Complementos del curso

50
Publica tu sitio web usando GitHub Pages
01:41 min

Tomar examen

Csar

student•

Antes que nada, deseo enviar mis felicitaciones al equipo PLETZI, por tan buen trabajo. Y agradecerles, por permitirnos aprender junto a uds.

Tal como en mis mejores tiempos de estudiante rebelde, no he realizado cada una de las tareas indicadas por nuestro estimado facilitador Freddy Vega. Sin embargo, realicé un único ejemplo que utiliza o abarca la mayoría de las herramientas enseñadas hasta este punto (video nro. 20).

A continuación "Mi humilde Aporte":

Archivo HTML: srcMiAporte.html

<!DOCTYPE html> <html> <head>

<title>Mi humilde aporte en JavaScript</title>

</script>

</head> <body>

<h1>Primer Proyecto <br /> de Programación</h1>

<p>Bienvenidos a mi Primer Proyecto en HTML</p>

prgInicio();

</script>

</body> </html>

Archivo JAVASCRIPT: srcMiAporte.js

//ADVERTENCIA: En este programa se hace uso de la función "navigator", sólo para fines de validar

//el lugar dónde se encuentra el usuario y sólo con fines educativos. En este programa no se registran,

//guardan o almacenan ningún tipo de datos declarados en el mismo. Ud. puede cancelar o no permitir

//que se active dicha función.

//Estos son mi valores de Entrada:

// 1) Nombre de la Persona a Evaluar: Freddy Vega

// 2) Para la pregunta 1: mi valor indicado es 4

// 3) Para la pregunta 2: mi valor indicado es 4

// 4) Para la pregunta 3: mi valor indicado es 4

// 5) Para la pregunta 4: mi valor indicado es 3

// 6) Para la pregunta 5: mi valor indicado es 2

// 7) Para la pregunta 6: mi valor indicado es 1

//A continuación voy a definir un arreglo, cuyos valores son los atributos de una persona

//Este arreglo (unidimensional) estará declarado de forma Global, es decir,

//su alcance o mejor dicho ciclo de vida comienza desde su declaración y culmina

//al momento de terminar la ejecución del programa. *(1) Ver notas al final.

//Y declaro otro arreglo, esta vez bi-dimensional (matriz de 3 x 5), llamado arrayOpinion.

var arrayCaracteristicas = ["EXPERTO", "CONCISO", "SINCERO", "PRECAVIDO", "SOEZ", "SOBRADO"];

var arrayOpinion = [["Pésimo", "Malo", "Regular", "Bueno", "Muy Bueno"],

["Nada", "Vagamente", "Regularmente", "Muy", "Extremadamente"],

["Extremadamente", "Muy", "Regularmente", "Vagamente", "Nada"]];

//Es una “buena práctica” (tratar en lo posible), colocar como parte del nombre de variable

//el tipo de dato de la misma, por ejemplo: intPersona es una variable que voy a utilizar

//para almacenar u operar con valores enteros (int, abreviatura de integer) y la variable

//strPersona me permitirá almacenar cadena de caracteres (ejm: nombres, apellidos),

//lo podemos escribir en el idioma que mejor nos parezca. *(2)

var intPersona;

var strPersona;

var cttHappyFace = 1;

var cttSadFace = 2;

var cttAngryFace = 3;

var intMinAtributo = 1;

var intMaxAtributo = 5;

var intCntAtributo = 6;

var strNombrePersona;

var strApellidoPersona;

var intOpinion;

var strOpinion;

var intIdxAtributos;

var intCntIntentos = 0;

var intMaxIntentos = 3;

var blnSalidaIntentos;

var intFilaOpinion;

var ctxTablaAtributo, cnvTablaAtributo;

var intTotBog = [0,0,0,0,0,0];

var intTotRst = [0,0,0,0,0,0];

var intPuntos = [[0,0,0,0,0],

[0,0,0,0,0],

[0,0,0,0,0]];

var dblPorcnt = [[0,0,0,0,0],

[0,0,0,0,0],

[0,0,0,0,0]];

var blnEsBog=false;

var strPara;

var strNombre = "César";

var strApellido = "Chacón";

//En esta función dibujaremos el tipo de carita (feliz, triste, a punto de explotar)

function fncPintarCaritas(prmTipoCaritas,prmTablaAtributo,prmTipoAtributo)

{

//Declaración de variables locales. *(3)

var cnvTipoCaritas;

var hexCaraColorContorno, hexCaraColorRelleno;

var hexOjosColorContorno, hexOjosColorRelleno;

var hexBocaColorContorno, hexBocaColorRelleno;

var fltCaraRadianes, fltOjosRadianes, fltBocaRadianes;

var intCaraEjeX, intCaraEjeY, intCaraRadio;

var intBocaEjeX, intBocaEjeY, intBocaRadio;

var intOjoDerEjeX, intOjoDerEjeY, intOjoDerRadio;

var intOjoIzqEjeX, intOjoIzqEjeY, intOjoIzqRadio;

//El uso de una determinada instrucción, tiene su razón de ser. *(4)

switch (prmTipoAtributo)

{

case "EXPERTO":

intCaraEjeX = 225;

break;

case "CONCISO":

intCaraEjeX = 225 + 150;

break;

case "SINCERO":

intCaraEjeX = 225 + 150 * 2;

break;

case "PRECAVIDO":

intCaraEjeX = 225 + 150 * 3;

break;

case "SOEZ":

intCaraEjeX = 225 + 150 * 4;

break;

case "SOBRADO":

intCaraEjeX = 225 + 150 * 5;

break;

}

intCaraEjeY = 450;

if (prmTipoCaritas != 0)

{

//Asignamos las característicaas de una carita feliz

fltCaraRadianes = Math.PI*2;

if (prmTipoCaritas == cttHappyFace)

{

hexCaraColorContorno = "#000000"; hexCaraColorRelleno = "#FFFF00";

hexBocaColorContorno = "#000000"; hexBocaColorRelleno = "#FFFF00";

hexOjosColorContorno = "#000000"; hexOjosColorRelleno = "#FFFF00";

fltOjosRadianes = Math.PI*2; fltBocaRadianes = Math.PI*2;

}

//Asignamos las característicaas de una carita triste

else if (prmTipoCaritas == cttSadFace)

{

hexCaraColorContorno = "#000000"; hexCaraColorRelleno = "#FFFF00";

hexBocaColorContorno = "#000000"; hexBocaColorRelleno = "#FFFF00";

hexOjosColorContorno = "#000000"; hexOjosColorRelleno = "#000000";

fltOjosRadianes = Math.PI*2; fltBocaRadianes = Math.PI;

}

//Asignamos las característicaas de una carita de mal humor o a punto de explotar

else if (prmTipoCaritas == cttAngryFace)

{

hexCaraColorContorno = "#000000"; hexCaraColorRelleno = "#FF0000";

hexBocaColorContorno = "#000000"; hexBocaColorRelleno = "#000000";

hexOjosColorContorno = "#000000"; hexOjosColorRelleno = "#000000";

fltOjosRadianes = Math.PI; fltBocaRadianes = Math.PI;

}

//Valores comunes para todos los tipos de cara

intCaraRadio = 30;

intBocaEjeX = intCaraEjeX;

intBocaEjeY = intCaraEjeY + 10;

intBocaRadio = (intCaraRadio/10)*2;

intOjoDerEjeX = intCaraEjeX + 10;

intOjoDerEjeY = intCaraEjeY - 10;

intOjoDerRadio = intCaraRadio/10;

intOjoIzqEjeX = intCaraEjeX - 10;

intOjoIzqEjeY = intCaraEjeY - 10;

intOjoIzqRadio = intCaraRadio/10;

//Ahora, ya que hemos calculado los valores del tipo de cara, la dibujamos

//Esta es la cara

prmTablaAtributo.strokeStyle = hexCaraColorContorno;

prmTablaAtributo.fillStyle = hexCaraColorRelleno;

prmTablaAtributo.beginPath();

prmTablaAtributo.arc(intCaraEjeX,intCaraEjeY,intCaraRadio,fltCaraRadianes,false);

prmTablaAtributo.closePath();

prmTablaAtributo.stroke();

prmTablaAtributo.fill();

//Ojo izquierdo

prmTablaAtributo.strokeStyle = hexOjosColorContorno;

prmTablaAtributo.fillStyle = hexOjosColorRelleno;

prmTablaAtributo.beginPath();

prmTablaAtributo.arc(intOjoIzqEjeX,intOjoIzqEjeY,intOjoIzqRadio,fltOjosRadianes,false);

prmTablaAtributo.closePath();

prmTablaAtributo.stroke();

prmTablaAtributo.fill();

//Ojo derecho

prmTablaAtributo.strokeStyle = hexOjosColorContorno;

prmTablaAtributo.fillStyle = hexOjosColorRelleno;

prmTablaAtributo.beginPath();

prmTablaAtributo.arc(intOjoDerEjeX,intOjoDerEjeY,intOjoDerRadio,fltOjosRadianes,false);

prmTablaAtributo.closePath();

prmTablaAtributo.stroke();

prmTablaAtributo.fill();

//Y esta es la boca

prmTablaAtributo.strokeStyle = hexBocaColorContorno;

prmTablaAtributo.fillStyle = hexBocaColorRelleno;

prmTablaAtributo.beginPath();

prmTablaAtributo.arc(intBocaEjeX,intBocaEjeY,intBocaRadio,fltBocaRadianes,false);

prmTablaAtributo.closePath();

prmTablaAtributo.stroke();

prmTablaAtributo.fill();

//Le voy a dar un toque adicional a la carita feliz

if (prmTipoCaritas == cttHappyFace)

{

prmTablaAtributo.strokeStyle = hexCaraColorRelleno;

prmTablaAtributo.fillStyle = "#FFA500";

prmTablaAtributo.beginPath();

prmTablaAtributo.arc(intOjoIzqEjeX-5,intOjoIzqEjeY+13,5,(Math.PI*2),false);

prmTablaAtributo.closePath();

prmTablaAtributo.stroke();

prmTablaAtributo.fill();

prmTablaAtributo.strokeStyle = hexCaraColorRelleno;

prmTablaAtributo.fillStyle = "#FFA500";

prmTablaAtributo.beginPath();

prmTablaAtributo.arc(intOjoDerEjeX+5,intOjoDerEjeY+13,5,(Math.PI*2),false);

prmTablaAtributo.closePath();

prmTablaAtributo.stroke();

prmTablaAtributo.fill();

}

else

{

prmTablaAtributo.strokeStyle="black"; //color externo

prmTablaAtributo.fillStyle="black"; //color de relleno

prmTablaAtributo.font="bold 20px arial"; //formato del texto

prmTablaAtributo.strokeText("-",intCaraEjeX,intCaraEjeY); //texto con método stroke

prmTablaAtributo.fillText("-",intCaraEjeX,intCaraEjeY); //texto con método fill

}

//Aquí seleccionaremos o determinaremos el tipo de carita (feliz, triste, a punto de explotar)

//que deseamos mostrar.

function fncTipoCaritas(prmOpinion,prmAtributo,prmTablaAtributo)

{

switch (prmOpinion)

{

//Seleccionamos carita feliz (esta es la que más vas a obtener, eso creo)

case prmOpinion = 5:

case prmOpinion = 4:

intTipoCaritas = cttHappyFace;

break;

//Seleccionamos carita triste (es posible mejorar, no desesperes)

case prmOpinion = 3:

case prmOpinion = 2:

intTipoCaritas = cttSadFace;

break;

//Seleccionamos carita a punto de explotar (definitivamente debes cambiar, eso espero)

case prmOpinion = 1:

intTipoCaritas = cttAngryFace;

break;

//Mensaje a informar al usuario, no se cumplió ninguna de las condiciones anteriores.

default:

alert ("El valor esperado, se encuentra fuera de rango. Los valores válidos son: 1 al 5");

intTipoCaritas = 0;

break;

}

fncPintarCaritas(intTipoCaritas,prmTablaAtributo,prmAtributo);

}

//Funcion que permite llenar varias filas de nuestra Tabla de Atributos.

function fncLlenarFilas(prmTablaAtributo)

{

var intTxtEjeX, intTxtEjeY;

var intFila, intColumna, intEvaluac;

var srcText;

//Como la variable "intIdxAtributos" fue declarada como una variable global, la puedo invocar

//desde cualquier punto del programa. Debemos ser cuidadosos con el uso de las variables globales,

//ya que debido a lo anterior se puede cometer el error de cambiar un valor no deseado.

prmTablaAtributo.strokeStyle="black";

prmTablaAtributo.fillStyle="black";

prmTablaAtributo.font="bold 15px arial";

for(intFila=1; intFila<=4; intFila++)

{

intTxtEjeY = 160 + (100 * (intFila - 1));

if (intFila == 1)

{

for(intIdxAtributos=0; intIdxAtributos<intCntAtributo; intIdxAtributos++)

{

for(intEvaluac=0; intEvaluac<intMaxAtributo; intEvaluac++)

{

srcText = intPuntos[intIdxAtributos][intEvaluac];

intTxtEjeX = 153 + (150 * intIdxAtributos) + (30 * intEvaluac);

prmTablaAtributo.strokeText(srcText,intTxtEjeX,intTxtEjeY);

prmTablaAtributo.fillText(srcText,intTxtEjeX,intTxtEjeY);

}

else if (intFila == 2)

{

for(intIdxAtributos=0; intIdxAtributos<intCntAtributo; intIdxAtributos++)

{

for(intEvaluac=0; intEvaluac<intMaxAtributo; intEvaluac++)

{

srcText = dblPorcnt[intIdxAtributos][intEvaluac];

intTxtEjeX = 153 + (150 * intIdxAtributos) + (30 * intEvaluac);

prmTablaAtributo.strokeText(srcText,intTxtEjeX,intTxtEjeY);

prmTablaAtributo.fillText(srcText,intTxtEjeX,intTxtEjeY);

}

else if (intFila == 3)

{

for(intIdxAtributos=0; intIdxAtributos<intCntAtributo; intIdxAtributos++)

{

srcText = intTotBog[intIdxAtributos];

intTxtEjeX = 222 + (150 * intIdxAtributos);

prmTablaAtributo.strokeText(srcText,intTxtEjeX,intTxtEjeY);

prmTablaAtributo.fillText(srcText,intTxtEjeX,intTxtEjeY);

}

else if (intFila == 4)

{

intTxtEjeY = intTxtEjeY + 100;

for(intIdxAtributos=0; intIdxAtributos<intCntAtributo; intIdxAtributos++)

{

srcText = intTotRst[intIdxAtributos];

intTxtEjeX = 222 + (150 * intIdxAtributos);

prmTablaAtributo.strokeText(srcText,intTxtEjeX,intTxtEjeY);

prmTablaAtributo.fillText(srcText,intTxtEjeX,intTxtEjeY);

}

//Funcion que permite determinar el lugar donde se encuentra el usuario.

function fncPosGlobal(prmPos)

{

//Con esta condición podemos validar que el usuario se encuentra en Bogotá

if (prmPos.coords.latitude >= 4.554841177116837 && prmPos.coords.latitude <= 4.948988736258706 && prmPos.coords.longitude >= -74.33661425000003 && prmPos.coords.longitude <= -73.98505175000003)

{

blnEsBog = true;

}

//Esta condición, lo contrario a la condición anterior podemos determinar que el usuario no está en Bogotá

else

{

blnEsBog = false;

}

//Inicio del programa, en las líneas anteriores declaramos: variables,

//estructuras de datos (arreglos) y funciones

function prgInicio()

{

var intLineaVer;

var intLineaHor;

var intCntItem = 6;

var arrayTituloFila = ["Puntuación", "Porcentaje", "Sólo Bogotá", "Ánimo", "Total..."];

var arrayOpinion1 = [["P", "M", "R", "B", "MB"],

["N", "V", "R", "M", "E"],

["E", "M", "R", "V", "N"]];

navigator.geolocation.getCurrentPosition(fncPosGlobal);

strPersona = strNombre + " " + strApellido;

//alert es una función.

//Los paréntesis "()" permiten pasar parámetros, por Valor o Referencia

//Las comillas "", permiten mostrar cadenas de texto encontradas entre ellas.

//Y con las dos barras o doble “slash”, podemos intradocumentar nuestro programa,

//colocar comentarios como este y las cuatro (4) líneas anteriores.

alert("Gracias equipo PLETZI, por ofrecer de manera gratuita el curso Básico de JavaScript!!!");

//El salto de línea (retorno de carro), se coloca con "back slash n, esto es: \n"

alert("Desde Venezuela, " + strPersona + "\n" + "les manda un gran saludo y les desea mucho éxito.");

strNombrePersona = prompt("Informa el nombre de la persona que deseas evaluar. Luego, presiona click en OK para continuar.");

if (strNombrePersona != null)

{

//Dibujamos una tabla con el total de atributos a evaluar.

ctxTablaAtributo = document.getElementById("cnvTablaAtributos");

cnvTablaAtributo = ctxTablaAtributo.getContext("2d");

cnvTablaAtributo.moveTo(0,0);

cnvTablaAtributo.lineTo(1050,0);

cnvTablaAtributo.lineTo(1050,600);

cnvTablaAtributo.lineTo(0,600);

cnvTablaAtributo.lineTo(0,0);

cnvTablaAtributo.strokeStyle = "#AA000F";

cnvTablaAtributo.stroke();

//Se marcan las líneas Verticales de la tabla.

for(intIdxAtributos=0; intIdxAtributos<intCntAtributo; intIdxAtributos++)

{

cnvTablaAtributo.moveTo(150*(intIdxAtributos+1),0);

cnvTablaAtributo.lineTo(150*(intIdxAtributos+1),600);

//Se escriben los títulos de las columnas.

cnvTablaAtributo.strokeStyle="blue";

cnvTablaAtributo.font="bold 20px arial";

cnvTablaAtributo.strokeText(arrayCaracteristicas[intIdxAtributos],150*(intIdxAtributos+1)+20,60); //texto con método stroke

}

//Se marcan las líneas Horizontales de la tabla.

for(intLineaHor=0; intLineaHor<intCntItem; intLineaHor++)

{

cnvTablaAtributo.moveTo(0,100*(intLineaHor+1));

cnvTablaAtributo.lineTo(1050,100*(intLineaHor+1));

if (intLineaHor==1 || intLineaHor==2)

{

for(intIdxAtributos=1; intIdxAtributos<=intCntAtributo; intIdxAtributos++)

{

//Se marcan las líneas Verticales de un conjunto de celdas, pertenecientes a la fila 2 y 3 de la tabla.

for(intLineaVer=0; intLineaVer<intMaxAtributo; intLineaVer++)

{

cnvTablaAtributo.moveTo((150*intIdxAtributos)+((150/intMaxAtributo)*(intLineaVer+1)),100*(intLineaHor));

cnvTablaAtributo.lineTo((150*intIdxAtributos)+((150/intMaxAtributo)*(intLineaVer+1)),100*(intLineaHor+1));

//Se escriben las letras iniciales de las evaluaciones de cada atributo o característica.

cnvTablaAtributo.strokeStyle="black"; //color externo

cnvTablaAtributo.fillStyle="gray"; //color de relleno

cnvTablaAtributo.font="bold 15px arial"; //formato del texto

if (intIdxAtributos > 4)

{

intFilaOpinion = 2;

}

else if (intIdxAtributos > 1 && intIdxAtributos < 5)

{

intFilaOpinion = 1;

}

else if (intIdxAtributos = 1)

{

intFilaOpinion = 0;

}

cnvTablaAtributo.strokeText(arrayOpinion1[intFilaOpinion][intLineaVer],((150*intIdxAtributos)+((150/intMaxAtributo)*(intLineaVer+1))-27),100*(intLineaHor)+20); //texto con método stroke

cnvTablaAtributo.fillText(arrayOpinion1[intFilaOpinion][intLineaVer],((150*intIdxAtributos)+((150/intMaxAtributo)*(intLineaVer+1)))-27,100*(intLineaHor)+20); //texto con método fill

}

if (intLineaHor!=0)

{

//Se escriben los títulos de las filas.

cnvTablaAtributo.fillStyle="blue";

cnvTablaAtributo.font="bold 18px arial";

cnvTablaAtributo.fillText(arrayTituloFila[intLineaHor-1],20,100*(intLineaHor)+60); //texto con método fill

}

cnvTablaAtributo.strokeStyle = "#00FF0F";

cnvTablaAtributo.stroke();

//Iteramos hasta alcanzar la cantidad total de atributos a evaluar.

for(intIdxAtributos=0; intIdxAtributos<=intMaxAtributo; intIdxAtributos++)

{

blnSalidaIntentos = false;

strPara = " ";

if (intIdxAtributos > 3)

{

intFilaOpinion = 2;

}

else if (intIdxAtributos > 0 && intIdxAtributos < 4)

{

intFilaOpinion = 1;

}

else if (intIdxAtributos < 1)

{

intFilaOpinion = 0;

strPara = " para ";

}

//Como somos muy bondadosos, permitimos al usuario hasta tres intentos, para equivocarse. Despues del tercer (3er) intento salimos del programa.

for(intCntIntentos=1; intCntIntentos<=intMaxIntentos; intCntIntentos++)

{

intOpinion = prompt("¿Qué opinas de " + strNombrePersona + ", acerca de que tan " + arrayCaracteristicas[intIdxAtributos] + " es: " + "\n 1 = " + arrayOpinion[intFilaOpinion][0] + ". \n 2 = " + arrayOpinion[intFilaOpinion][1] + ". \n 3 = " + arrayOpinion[intFilaOpinion][2] + ". \n 4 = " + arrayOpinion[intFilaOpinion][3] + ". \n 5 = " + arrayOpinion[intFilaOpinion][4] + ".", 5);

if (intOpinion != null)

{

if (intOpinion > 0 && intOpinion < 6)

{

intOpinion = intOpinion - 1;

alert("Tú opción elegida, para evaluar a " + strNombrePersona + " es: " + "\n " + arrayOpinion[intFilaOpinion][intOpinion] + strPara + arrayCaracteristicas[intIdxAtributos] + ".\n\nPresiona click, sobre el botón OK para continuar.");

intTotRst[intIdxAtributos] = intTotRst[intIdxAtributos] + intOpinion;

if (blnEsBog)

{

intTotBog[intIdxAtributos] = intTotBog[intIdxAtributos] + intOpinion;

}

intPuntos[intIdxAtributos][intOpinion]++;

dblPorcnt[intIdxAtributos][intOpinion] = (intPuntos[intIdxAtributos][intOpinion] / intPuntos[intIdxAtributos][intOpinion])*100;

break;

}

else

{

if (intCntIntentos < intMaxIntentos)

{

alert("Opción no válida. Escribiste " + intOpinion + ".\nRecuerda sólo están permitidos valores enteros entre el 1 y el 5.\n\nTe queda(n) " + (3-intCntIntentos) + " intento(s).");

}

else

{

alert("Tú eleción " + intOpinion + " no es válida" + "\nLamentablemente, consumiste todos tus intentos para contestar correctamente. \n\nDespidete del programa. Bye Bye.");

blnSalidaIntentos = true;

break;

}

else

{

intOpinion = -1

alert("Has seleccionado la opción CANCELAR. Para la evaluación del atributo " + arrayCaracteristicas[intIdxAtributos] + ". \nEsta evaluación no aporta puntos.\n\nPresiona click, sobre el botón OK para continuar.")

break;

}

if (blnSalidaIntentos) {break;}

intOpinion++;

//LLamada a las funciones que me permitirán dibujar caritas y llenar las filas de "Puntuación", "Porcentaje", "Sólo Bogotá" y "Total..."

fncTipoCaritas(intOpinion,arrayCaracteristicas[intIdxAtributos],cnvTablaAtributo);

}

fncLlenarFilas(cnvTablaAtributo);

}

else

{

alert("Diste click en CANCELAR. \n\nNos vemos en una próxima ocasión. Bye Bye.");

}

//NOTAS:

//*(1): Considero, bajo mi humilde punto de vista, que estoy haciendo un excesivo uso

// de líneas de comentarios. Pero en este ejemplo srcMiAporte.js, forma parte

// del aporte que quiero ofrecer.

//*(2): Si utilizamos este tipo de técnica, las IDE de los lenguajes de programación

// modernos nos permitirán encontrar, más rápidamente un nombre de variable.

// Si en nuestro código escribimos int, el editor del lenguaje de JavaScript nos

// mostrará sólo un listado de dieciocho (18) variables, en vez de mostrarnos

// cuarenta (40) variables definidas únicamente en el área de variables globales.

// Ahora, sólo imaginen si contamos todas las variables (globales y locales).

// Para uds. los chamos, esto sería muy “cool”.

// Estoy de acuerdo contigo, JavaSript es muy permisivo. Y, a una variable durante

// su ciclo de vida se le pueden asignar valores de diferentes tipos datos. Pero, si

// tratamos de estandarizar nuestro código, será más sencillo de comprenderlo y

// de modificarlo para futuros cambios.

//*(3): Las variables locales, al igual que las variables globales, poseen en común el

// atributo “ciclo de vida”, sólo qué, el ciclo de vida de las variables locales es menor

// al de las variables globales. El ciclo de vida de una variable local comienza en el

// momento que es declarada dicha variable dentro de una función y culmina al momento de

// finalizar la ejecución de la última instrucción en esa misma función.

// Parece un trabalenguas, pero el ciclo de vida, no es más que, el tiempo que dura

// en memoria una variable, sea esta local o global.

//*(4): El uso de una determinada instrucción, tiene su razón de ser. A que me refiero,

// bueno sencillo, existe una instrucción llamada SWITCH (en JavaScript es switch)

// esta instrucción no es utilizada para ser más “cool”, es para disminuir el número

// de líneas de código, para poder determinar todos los casos posibles (como si

// estuvieses haciendo uso de tablas de verdad) y programar muchas condiciones (mas de 3)

// en una única instrucción. Así como también, le permite al desarrollador poder

// determinar cuál es el bloque de instrucciones que se cumple con mayor frecuencia.

// Todo esto, era utilizado en la época de las cavernas de la programación para

// disminuir el tiempo de uso de la memoria y el tiempo de ejecución.

// En esta nueva era, eso no es problema para los “super procesadores” actuales,

// pero sigue siendo “una buena práctica”.

// Estoy de acuerdo, que para un curso básico no es necesario aprender a utilizarla,

// pero eso no quiere decir que dicha instrucción sea para “desarrolladores extremos”

// y mucho menos para gente “cool”.

//Como nota final, y es mi humilde opinión, en el mundo hay personas buenas y personas

//malas, pero considero que no hay personas totalmente buenas ni totalmente malas,

//cuando yo escucho en estos muy buenos videos, a Freddy (estimado instructor o

//facilitador) hablar de que los “profesores son malos”, “todos son pésimos”, este tipo

//de expresiones o calificativos me produce cierto desagrado, es el mismo desagrado

//que tú, estimado Freddy sientes cuando te dicen “deberías”.

//Yo no quiero escribirte “deberías”, pero si te aconsejo que “podrías”, evitar expresarte

//así de los profesionales o de cualquiera (haya culminado sus estudios universitarios o no).

//Quizás porque eres muy joven, con los años aprenderás (eso espero) a respetar a las personas

//que muchas otras consideran anormales o discapacitadas, me refiero, a las personas que

//padecen de autismo, les invito a observar los siguientes videos, para que se sorprendan

//de las grandes capacidades que poseen estos grandiosos seres humanos.

// http://www.dailymotion.com/video/x41dr7d?pxltrk=YWQtdXMtZWFzdC0xLnB4bGFkLmlv-aurl38jplmjg00c9emi0\_1-fd9daca330b1f47900a36f9a6fe571a6-57b8a322&syndication=lr%3A190709

// https://www.youtube.com/watch?v=wrVuEFCEmEc

// https://www.youtube.com/watch?v=BhZTM-aB0lw

//También “podrías”, si es tú deseo. Disminuir el uso de malas palabras, nuestro lenguaje

//es muy rico, mejor que el inglés o que cualquier otro idioma que yo conozca. Nuestro

//lenguaje nos permite expresar tantas cosas buenas que no es necesario utilizar palabras,

//tales como: WTF; Mal… Sea; La Ca… y con esto no quiero que me vean como puritano, yo también

//hago uso de malas palabras (somos humanos, tenemos sangre guerrera en las venas, somos latinos).

//A veces, son graciosas y nos hacen prestarle más atención al video, pero no en exceso, por favor.

//Estimado Freddy y equipo de Pletzi, este y muchos de sus videos, también los ven los niños(as).

//Y sí, ellos también aprenden y cuando sean adultos, de seguro van a utilizar malas palabras

//pero, prefiero que las utilicen cuando sean adultos y no en sus primeros años de aprendizaje

//de nuestro lenguaje (Castellano) y de un Lenguaje de Programación en particular (JavaScript).

//Gracias de antemano, sé que uds. lo van a lograr, porque “mejorando.la nos ama”.

//Ah, disculpen la descarga, lo siento, pero es necesario por el bien de nuestros hijos

//y por el bien de uds. equipo de Pletzi, para que cada día que pasa sean mejores.

//Otra cosita, que quería comentarles, respecto al uso de las malas palabras y con esto culmino,

//se los prometo. Cuando estamos vociferando con esa pasión que le ponemos a las cosas,

//generamos un ruido (hagan la búsqueda del concepto de la palabra: ruido) al receptor que

//es muy similar al que producen las cornetas (bocinas) de las motos y los automóviles grandes

//o pequeños, este ruido ocasiona la destrucción de unos pelitos (filamentos que nos permiten

//escuchar) microscópicos, haciendo que perdamos la audición. La vejez también ocasiona

//la pérdida de estos filamentos. Lamentablemente, estos filamentos se caen y no vuelven

//a crecer. Por ello, es que nuestros abuelos escuchan muy poco.

//En conclusión, no utilicemos tantas malas palabras, ni las cornetas de las motos o autos

//para evitar envejecer o quedarnos sordos tan prematuramente.

//Saludos desde Venezuela y mucho éxito a todos a nivel laboral, profesional y personal.

//César Chacón.

//P.D.: No quise explicar que hace “srcMiAporte.js”, espero que mis compañeros de clase

//lo descubran y comenten que les pareció. Deseo, que les sea de gran utilidad.

//En esta post data, quiero aprovechar para ofrecerles algunos "tips", a aquellas personas

//que sólo se dedican a destruir y no a construir. Me refiero a aquellos que ven un error

//y enseguida, comienzan a realizar críticas (destructivas), en vez de aportar algo positivo.

//Por ejemplo, en este programa hice algunas cosas que seguramente, van a generar comentarios

//como los que escribo a continuación:

// 1) "Ese dibujo de la carita feliz, no es de carita feliz. Es de carita sorprendida".

// 2) "Siempre sale 100%, en la fila de porcentaje".

// 3) "En vez de colocar Total..., escribe Resto del Mundo".

// 4) "La carita de molesto o a punto de explotar, no es así".

// 5) "Este programa, se puede hacer con menos líneas de código".

//Y puedo seguir enumerando frases tontas, que de seguro muchos las piensan y de seguro

//las van a escribir si no leen esta P.D.

//Y con esto no quiero dar a entender que no acepto críticas, si las acepto, pero considero

//que es más inteligente aportar críticas como los ejemplos que les muestro a continuación:

// 1) "Existe una página web, en el siguiente link:..., que tiene todos los tipos de caritas y sus descripciones".

// 2) "El Aporte desarrollado se puede mejorar, registrando en una BD o en un archivo o en PenDrive o en cualquier

// unidad de almacenamiento los datos de cada usuario".

// Pero, esto es para un curso avanzado o para más adelante en este curso, porque apenas

// he visto y escuchado los primeros 20 videos del Curso Básico de Programación.

// 3) "Revisando el código. Entendí que en vez de (Total...), ese título pudiera ser: Resto del Mundo u

// Otros lugares diferentes a Bogotá".

// 4) "Lo que dijeron en el item 1 es cierto y además para hacer la boca con el arco hacia abajo,

// puedes escribir la siguiente línea de código: ...".

// 5) "Este ejemplo está muy completo, se utilizan todas las herramientas que explicó nuestro profe Freddy Vega".

//Bueno, esas son algunos ejemplos de críticas constructivas. Espero les sirvan para futuros comentarios.

//Así que, utilicen las neuronas para crear y no para destruir. Inclusive, para este ejemplo (srcMiAporte), programé

//cosas de manera ineficiente con la finalidad de mostrar, que la lógica de un programador depende de su nivel

//de abstracción y algunas veces también depende del tiempo que tenga en entregar un proyecto. Y por sobre todas

//las cosas, en programación todo se puede hacer.

//Aunque, arriba lo informé, quiero recordarlo. Se usa la función "navigator", sólo para fines de validar

//el lugar dónde se encuentra el usuario y sólo con fines educativos. En este programa no se registran, guardan

//o almacenan datos de ningún tipo. El usuario tiene la potestad de permitir o no la activación de esta función.

//Ahora si me despido. Saludos a todos y que aprendan mucho. Nuevamente, muchas gracias a todo el equipo PLETZI.

Dibujar con eventos

Bienvenido

Aprender a programar es fácil

La Web con Visión Profesional

Aprende sobre Algoritmos

Condicionales y operadores en programación

Qué lenguaje de programación aprender primero

Material del curso / Archivos del curso

Introducción básica a HTML y Javascript para programar

Uso del sistema de vídeo y notas

Lenguajes y compiladores

HTML y Javascript

Variables y funciones

Piedra, papel y tijera con Javascript

Variables, Matrices y Objetos en Javascript

Escribir HTML desde JS (document.write)

Matrices

Juego campo minado

Objetos del navegador

Objetos en JS

Preguntas

Ciclos y Dibujos con Canvas

Ciclos

Dibujos con canvas