Vídeo destinado a personas sin conocimientos de programación. Explicamos asuntos básicos como los algoritmos y los elementos más básicos de los lenguajes. Realizaremos pequeños programas demostrativos con Javascript.
En este vídeo vamos a seguir aproximándonos a Javascript, un lenguaje de programación extremadamente relevante para los desarrolladores web que está adquiriendo gran importancia en los últimos años. Pero además queremos acercarnos al mundo de la programación en general, aclarando conceptos que deben ser aprendidos cuando estamos iniciándonos, como los diagramas de flujo, el pseudocodigo o los algoritmos.
Durante la clase además vimos algunos ejemplos de código, sencillos, pero que nos pueden ayudar a entender qué tipo de cosas podemos conseguir dentro de un navegador, ayudados por Javascript y con muy poco código.
En el programa de esta clase queríamos hablar de los algoritmos, pero con el feedback y las preguntas recibidas durante la charla introdujimos ligeramente otros conceptos también interesantes y relevantes para quienes están aprendiendo. Es que tenemos que dejar claro que hay que saber diferenciar lo que es un algoritmo, un diagrama de flujos y un pseudocódigo.
El algoritmo no es otra cosa que una secuencia de pasos, acciones, etc. que nos permiten solucionar un problema. Todo lo que hacemos en nuestro día a día son algoritmos. Puedes hacer un algoritmo de cualquier cosa cotidiana, desde tomar un café, hasta elaborar uno para la creación del software de una máquina expendedora. Este algoritmo lo solemos realizar en nuestro lenguaje. Una vez que lo tenemos, pasamos ese algoritmo inicial a un diagrama de flujos (su representación gráfica que veremos detalladamente en el curso), o a un pseudocódigo (manera más cercana al código, tiene una serie de normas y estándar para su creación).
Ya en el lado más práctico, durante la clase se vieron dos ejemplos que describimos a continuación.
Algoritmo 1: Cómo dibujar una línea con Javascript
En este primer ejemplo realizamos una línea, un dibujo que incluimos en un elemento Canvas del HTML5. Para este ejercicio queremos aislarnos del conocimiento que se pueda tener del API de Canvas, la idea es pensar en un algoritmo genérico para dibujar una línea. El algoritmo puede ser algo como, saber cuál es el punto inicial, saber cuál es el punto final y luego dibujar la secuencia de puntos entre el inicio y el fin.Ese algoritmo se resolvió en la clase y quedó de esta manera:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="canv" width="400" height="400" style="border:1px solid #000000;">Tu navegador no acepta el elemento Canvas</canvas>
<script type="text/javascript">
var ctx = document.getElementById('canv').getContext("2d");
var x1 = 100, y1 = 200, x2 = 300, y2 = 100;
var dx = x2 - x1; // numero de pasos (x)
var dy = y2 - y1; // numero de pasos de (y)
for (var x=x1;x<=x2;x++) {
var y = y1 + (dy) * (x - x1)/(dx);
ctx.fillRect(x,y,1,1);
}
</script>
</body>
</html>
Algoritmo 2: Mostrar coordenadas del ratón
Este segundo problema es un poco más fácil, como algoritmo, pero es interesante porque nos permite explorar algo más sobre interacción del usuario. En este caso vamos a aprender a detectar las coordenadas del ratón en todo momento, que van cambiando cuando hacemos un movimiento del puntero por la página.La idea del algoritmo es bien simple, generar un evento en el documento con código que se ejecute con el movimiento del ratón y luego extraer las coordenadas en cada ejecución del evento. Por último, mostrarlas en unos campos de formulario.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body onMouseMove="obtenercoordenadas(event);" >
<div style="height:500px;">
<form>
<label>x</label><input type="text" id="ejex">
<label>y</label><input type="text" id="ejey">
</form>
</div>
<script type="text/javascript">
function obtenercoordenadas(event){
x=event.clientX;
y=event.clientY;
document.getElementById("ejex").value=x;
document.getElementById("ejey").value=y
}
</script>
</body>
</html>Como puedes ver, es muy interesante porque jugamos con nuevos eventos y con el objeto "event", que nos permite obtener datos sobre el evento que se está produciendo.
Eso es todo! recuerda que si quieres aprender mucho más Javascript y Python, además de asistir a las clases de iniciación a la programación, desde cero, con todas las técnicas y prácticas que te ayudarán a entender cómo se hacen los programas, puedes venirte al curso que vamos a impartir con nuestra plataforma para la enseñanza online, EscuelaIT. No necesitas conocimientos previos, solamente ganas de aprender a programar.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...