Introducción a la programación en JavaScript.
Buenas! Dado que esta semana arrancaremos el segundo módulo del curso Front End Dev en ADA, instituto en imparto el curso, no se me ocurrió mejor idea que ir plasmando los puntos principales que verán las chicas en su primer acercamiento al lenguaje. Así que bienvenidxs a Intro a la programación en JavaScript!
Requisitos.
Para leer este documento, si bien no es un requisito obligatorio, te recomiendo que hayas aprendido las bases de HTML.
También que hayas usado el “inspector de elementos” de tu navegador.
Y si cursaste alguna materia de programación 1 (o introducción a la programación) en alguna universidad aún mejor!.
Igual tranqui que arrancamos de cero.
Lenguajes de programación.
Antes de abordar el tema en cuestión definamos Lenguaje:
Según la wikipedia un lenguaje de programación es un conjunto de reglas gramaticales bien definidas que le proporciona a la persona la capacidad de escribir una secuencia de órdenes con el fin de controlar el comportamiento de un sistema informático.
🤔 Medio complejo el asunto, en pocas palabras diremos que un lenguaje tiene una serie de palabras que nos ayudarán a darle instrucciones a la computadora para que ésta nos muestre un resultado.
Estas instrucciones deben tener una secuencia bien definida y ordenada, en donde la primer instrucción se ubicará en el primer renglón de nuestro archivo, la segunda instrucción en el segundo y así sucesivamente.
A estos lenguajes los conocemos como lenguajes secuenciales y si bien existen múltiples paradigmas para programar (como los orientados a objetos o los funcionales) todos tienen en común que, para poder ejecutar los comandos, es necesario que exista un órden secuencial entre sus acciones.
Existe una clasificación extra que se le otorga a los lenguajes y es su nivel con respecto a que “tan lejanas” se encuentran las palabras reservadas del lenguaje en cuestión con respecto al procesador. Para ésto diremos que existe el bajo nivel, que son los lenguajes “mas parecidos” al de la máquina (o lenguaje máquina, que lo único que interpreta es si hay baja o alta tensión pasando por sus componentes. Los humanos, para darlo a entender mejor diremos que son 0 o 1, dependiendo si hay baja o alta tensión respectivamente), mientras que por otro lado se encuentran los de alto nivel, que son mucho mas sencillos de leer para los programadores.
Mientras más cerca del lenguaje máquina se encuentra un lenguaje de programación, tendremos que escribir una mayor cantidad de código para realizar una acción que, en un lenguaje de alto nivel, lo podemos solucionar con unas pocas. Asimismo, con los lenguajes de alto nivel, se pierde la libertad de indicarle al procesador cómo queremos que se ejecuten determinadas acciones.
Pero ¡no nos desesperemos! Los lenguajes de alto nivel están muy bien generados para optimizar el uso de los procesadores independientemente sea el hardware que usan. Así que acompañame a que aprendamos juntos el mas utilizado por la web hoy en día:
JavaScript.
Un poco de historia.
Es un lenguaje creado por NetScape en el año 1995. Dos años mas tarde se lanzaría una versión 1, también conocida como ECMAScript y sería el primer release oficial de JS. Este mismo año Microsoft lanza su versión propia llamada Jscript para que pueda correrse en Internet Explorer.
Las versiones 2 y 3 de ECMAScript (o ES2 y ES3) se lanzarían en los años 1998 y 1999. La versión 4 nunca llegó a salir y, 10 años después, llegaría la versión 5 con cambios sustanciales, como el soporte a los archivos JSON, el strict-mode y varias funciones para el uso simplificado de cadenas.
De la mano de ES5 aparece nodeJs, que sería el lenguaje de programación para el lado del servidor (perdón, nunca lo aclaré pero, hasta la salida de node, JS se utilizaba para generar pequeñas interacciones en el navegador, en el lado del cliente).
Finalmente, en el 2015, sale la release ECMAScript2015 (ES2015), también conocido como ES6. Es lo que conocemos como JavaScript Moderno. Ésta trajo un cambio radical a la hora de programar con JavaScript: Se re-pensó la forma de generar variables, se implementó la idea de clase (aunque, como ya veremos mas adelante, no es mas que un revestimiento de los prototipos), se agregaron las promesas (ésto si fue un antes y un después, que vendría a subsanar un problema que traíamos con los callbacks), se agregaron las funciones flecha, se agregaron las importaciones de funciones externas, entre otras.
Un año mas tarde sale ES7 (o ECMAScript2016), que contó con la incorporación de método include y el operador exponencial (flojito, nada que no se pueda resolver sencillamente).
En 2017 sale ES8 (o ECMAScript2017) que sí trae una característica muy utilizada hoy en día y es el método async/await.
Luego saldrían una nueva versión por año con pocas novedades, quizá la mas interesante sea el spread operator, pero sin lugar a dudas la estrella fue ES6, por este motivo en muchas búsquedas laborales, al buscar programadores javascript se suele buscar “Que sepan/hayan utilizado javascript moderno o ES6+”.
Características generales.
JavaScript es un lenguaje de alto nivel, orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.
Se utiliza principalmente en el lado del cliente, permitiendo la generación de páginas web dinámicas. En el backend se caracteriza por generar servidores, rutas y permitiendo el acceso a bases de datos, de una manera sencilla y asíncrona.
Introducción.
“OK!! Me mentiste” — Vos, en este momento.
¡Sí! Si mirás la foto de portada verás que dice “JavaScript: Una introducción práctica” y ya pasamos las 900 palabras y no tiré ni una sola línea de código, ¡es un choreo a mano armada! Pero no te desesperes que lo mejor está por venir:
Para comenzar vas a necesitar tener el Visual Studio Code instalado, un navegador preferentemente Firefox (o Chrome, en su defecto, aunque últimamente me estuvo dando varios problemas) y que puedas manejarte tranquilamente con VSC y Firefox tranquilamente.
Arranquemos.
Armate una estructura de una página web convencional en HTML:
Vas a ver que, en el body, tenemos las etiquetas <script></script>. Éstas marcarán el comienzo y el fin de nuestras sentencias JS.
Cabe destacar que podemos tener, a lo largo de todo nuestro HTML varias etiquetas script. Lo que no podemos tener son etiquetas script anidadas:
¿Cómo se leen estas instrucciones? De arriba hacia abajo, comenzando por la primera después de haber aparecido la sentencia <script>. Basta de cháchara y vamos por nuestra primera instrucción:
console.log
Copiá en tu código lo escrito anteriormente. Fijate que tiene unas comillas dobles. Con esta sentencia podremos ver la frase El famoso Hola Mundo en nuestro navegador… pero ¿en dónde?
Abrí la página que acabas de crear y aparecerá una página en blanco:
Para poder ver lo que escribimos en nuestro console.log tendrás que hacer click derecho sobre la pantalla y presionar sobre Inspeccionar elemento (Firefox) o Inspeccionar (Chrome), y en la pantalla que te aparece presioná sobre consola.
La consola será nuestro primer depurador de código, que es quién te estará mostrando los resultados parciales.
Así como tenemos el console.log, que nos sirve para mostrar precisamente el log de la consola, tendremos los siguientes:
console.warn(“Ésta es una advertencia”);
console.info(“Ésta es una información o notificación”);
console.error(“Éste marca un error”);Probalo y verás esta salida:
Para usar las comillas dentro de una oración (también conocida como constante) debemos ver si, quien lo encierra, son las comillas dobles o las comillas simples.
Si es el primer caso entonces deberemos usar las comillas simples;
Si las comillas simples rodean la oración entonces usaremos las comillas dobles. Ejemplo:
<script>
console.log(“El famoso ‘Hola Mundo’ “);
console.log(‘El famoso “Hola Mundo” ‘);
</script>Nos dá como resultado:
Ahora bien, dentro del console no solo podemos introducir variables alfabéticas sino también numéricas:
<script>
console.log(“Maria tiene 5 años “);
</script>
Alert.
Las alertas nos informan, por medio de una pantalla modal, que enviaremos una información al usuario.
La sintaxis es similar al console.log:
<script>
alert(“Maria tiene 5 años “);
</script>
Variables.
Las variables son espacios de memoria que se reservan al programa para que los datos no se pierdan a lo largo de una ejecución. Las variables tienen un nombre y un tipo.
Para definirlas debemos anteponerle la palabra reservada var.
En nuestro caso vamos a generar una variable llamada nombre:
var nombre = "Maria";