Vídeo: El primer algoritmo en Javascript

  • Por
Esta es una clase más destinada a conocer algunas técnicas de programación y aprender conceptos como el algoritmo, además seguir viendo cómo hacer pequeños códigos demostrativos de la potencia de 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.

Nota: Este es un vídeo de la grabación de una clase que impartimos online y en directo, experimental del curso de Iniciación a la Programación con Javascript + Python. No corresponde con ninguna de las clases del curso y el objetivo es más bien enseñar cosas de interés para las personas que están o quieren comenzar con la programación, de paso que se experimenta nuestro modelo de formación en los cursos que impartimos, siempre con clases en directo y en contacto próximo con los tutores.

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>

Nota: Como se menciona en la clase, existen funciones del API de Canvas para dibujar líneas, por lo que este algoritmo solo tendría fines didácticos.

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: Curso de iniciación a la programación, con Javascript como primer lenguaje y Python como segundo lenguaje.

Ah!! si lo deseas, puedes descargar las diapositivas de esta clase.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

scorpion9879

21/1/2014
Javascript
Hola, javascript no funciona en todos los navegadores, en cambio jquery, la cual es una libreria de javascript que provee funcionalidades, muchos plugins (disponibles en diferentes web que proveen funcionalidades especificas y rapidas de realizar).
Ademas permite la facil interaccion en modelos vista controlador(MVC), ya sea en la plataforma .NET o PHP, Ruby. Porque permite realizar funciones ajax, trabajar con css, eventos que hacen amigable la pagina web.
Creo que es mejor aprender jquery primero y en el camino aprender javascript, para la persona que aprende es mas motivador aprender jquery, porque es mas divertido por sus grandes alcances. Es mas facil sobre todo si alguien ha programado en java, o c++.

Rodreygo

06/3/2014
Las diapositivas no se ven
Le hice clic a las diapositivas pero me sale error de la pagina.