Curso de JavaScript básico
¡Bienvenido al curso de Javascript!
Como de seguro sabrás, JavaScript es uno de los lenguajes de programación que más auge están teniendo, es por ello, que se vuelve fundamental comprender las bases de JavaScript, ya sea, para nuestros desarrollos o para trabajar en una empresa.
Curso de JavaScript
Pero ¿Por qué se está poniendo de moda JavaScript realmente? ¿Por qué hace falta un curso de JavaScript?
Pues bien, si lo pensamos, la programación es un mundo enorme donde existe un lenguaje de programación, prácticamente para cada cosa, para desarrollar APPs para Android (usamos Java), para iOS (usamos entonces Swift), para desarrollar plataformas web, usamos PHP en la parte del servidor, etc.
Es decir, si queremos saber programar diferentes cosas, debemos de aprender diferentes lenguajes… ¡Hasta que JavaScript se imponga!
JavaScript como lenguaje único
JavaScript es un lenguaje de programación open-source, además de gratuito, además, aunque es cierto que se pensó inicialmente como un lenguaje de programación en la parte del cliente (navegador), se creó desde el principio como un lenguaje de programación de ámbito general (a diferencia de PHP por ejemplo).
Con todo esto y puesto que es uno de los pocos lenguajes de programación de «ámbito general» que no tiene una empresa privada detrás (a diferencia de Java -> Oracle, Swift -> Apple, C# -> Microsoft, etc.), se está consiguiendo que con JavaScript se pueda hacer todo, por ejemplo:
- Desarrollo web en la parte cliente (navegador)
- Desarrollo web en la parte servidor (nodeJS)
- Desarrollo de APPs para todas las marcas de forma no nativa (phoneGap)
- Desarrollo de APPs para todas las marcas de forma nativa (React Native)
- Desarrollo de videojuegos para XBOX, PS4, etc. (Unity 3D)
- Desarrollo de APPs para TV (FirefoxOS, LG, etc.)
- Mucho, mucho más.
¿Qué aprenderemos en este curso?
Este curso, no es un curso pensado «para aprender hacer webs», este es un curso básico pero profesional donde aprenderás a programar JavaScript para cualquier fin, ya sea para navegador o sea más adelante para desarrollar APPs.
Por ello, además de ver todo el temario básico (Variables, funciones, etc.), también veremos tanto cómo crear objetos, como los famosos prototipados de objetos ¡Para que no se nos olvide nada!
¿Te atreves a realizar este curso?
1. Ejecutar JavaScript por primera vez
¡Bienvenido a esta primera clase del curso de JavaScript! Si has llegado hasta aquí es porque estás decidido a aprender a programar JavaScript, así que te doy mi enhorabuena por esa decisión.
Pero ¿Qué podemos ver en una primera clase?
Pues bien, antes que nada ¡No te preocupes! En esta primera clase empezaremos creando una pequeña base sólida y resolviendo todas las dudas que puedas tener entorno a este lenguaje de programación. Veremos porqué existe JavaScript, su historia y lo más importante «cómo se ejecuta y porqué se ejecuta como se ejecuta».
En esta primera clase también veremos cómo podemos ejecutar nuestra primera línea de código ¡Un alert! Es decir, una ventana emergente que nos indique un «Hola mundo».
No obstante, veremos que esto (que se enseña en todos los cursos) no es profesional, así que acto seguido aprenderemos cómo hacer las pruebas de una forma profesional ¡Con la consola de JS que tienen todos los navegadores!
Así que ¡Veamos la clase!
Video: https://www.youtube.com/watch?v=bWbBMepZs5s
¡Ya está la primera clase realizada! Ha sido fácil ¿No?
Perfecto, ya tenemos la base para empezar fuerte en la siguiente clase, así que ¡Vamos a por ella!
2. Variables en JavaScript
En esta segunda clase del curso de JavaScript analizaremos una de las cosas más importante de los lenguajes de programación ¡Las variables!
Para ello haremos una comparación con las variables de PHP, por lo que si ya has visto el curso de PHP o conocer algún otro lenguaje de programación ¡Te será mucho más fácil! Sino, no te preocupes, por que es algo realmente fácil de comprender.
Para entender qué son las variables tenemos que pensar en las matemáticas ¿Recuerdas cuando había que encontrar el valor de x? ¡Pues x era una variable!
Es decir, una variable no es más que un elemento que tiene un valor y que dicho valor puede variar, tiene sentido ¿No? Por ejemplo, podemos tener la variable «contador» que primero vale 1, luego, 2, etc.
No obstante, en este curso queremos ser profesionales, así que no usaremos los conocidos «alerts» para hacer las pruebas, sino que nos tendremos que acostumbrar a utilizar la consola del navegador, por ello veremos también el objeto console con el método log, ya veréis que es súper fácil de utilizar.
Lógicamente, no veremos únicamente qué son las variables en javascript, también veremos ¡Los tipos de variables! Es decir, veremos cómo se crea un String (cadena de texto), un número entero, un número con coma, un binario, etc.
¡Veamos la clase!
Video: https://www.youtube.com/watch?v=7Cc_XfQgEUU
¡Perfecto! Ahora que ya hemos visto esta clase, ya hemos visto, no sólo qué son y cómo se crean las variables, sino también cómo podemos concatenar variables (juntar) y cómo podemos realizar operaciones matemáticas.
Súper fácil todo ¿Verdad?
3. If condicional en JavaScript
En esta tercera clase del curso de JavaScript veremos cómo podemos ejecutar un código dependiendo una condición, por ejemplo «ejecuta este código si el usuario está registrado», de hecho, los condicionales (if) son la base de la programación en cualquier lenguaje de programación.
No obstante, si entendemos cómo funcionan ¡Es extremadamente fácil programarlos!
Podríamos indicar que todo esto está basado en la tabla de la verdad y en las puertas lógicas de los circuitos integrados (que sería verdad), pero podemos definirlo en saber cuáles son las condicionales que podemos usar, que son las mismas que en la vida real:
- Si esta variable es igual a…
- Si esta variable es diferente a…
- Si esta variable es mayor que…
- Si esta variable es mayor o igual que…
- Si esta variable es menor que..
- Etc.
Como vemos, no parece nada difícil de comprender y es que si entendemos la base, veremos que es extremadamente fácil utilizar los condicionales.
También analizaremos que podemos ejecutar dos códigos dependiendo la condición, es decir, podremos decirle a JavaScript «ejecútame este código si esta condición es cierta y sino, ejecútame este otro código».
Con toda esta explicación, veamos la clase para ponerle forma al código:
Video: https://www.youtube.com/watch?v=nvYKv8d32V8
¡Genial! Ahora que hemos visto la clase, hemos comprendido perfectamente el funcionamiento del if/else y lo que es más importante, hemos comprendido «el potencial que realmente tiene».
Además de las condiciones normales, en esta clase también hemos visto cómo podemos hacer condiciones más complejas, con el AND y el OR, por ejemplo:
- Ejecuta este código si estás dos condiciones son ciertas
- Ejecuta este código si alguna de estas dos condiciones son ciertas.
Gracias a esta clase y a las siguientes, ya conseguiremos una buena base para empezar a crear nuestros primeros programas basados en JavaScript.
4. Switch en JavaScript
En la clase anterior hemos visto cómo podemos realizar que un código se ejecuta o no basado en una condición (el if), no obstante ¿Qué pasa si tenemos que hacer muchos Ifs? ¿Existe alguna forma más ordenada de hacerlo?
Pues bien, aquí es donde aparece el switch, que tenemos que entender la palabra como si fuera un enrutador (sé que la traducción no es la correcta), es decir, la función switch recibe un valor y dependiendo cual sea el valor, ejecuta un código, u otro, u otro, u otro… Sin límites.
La idea es que dentro de switch hay una muchos «case», que sería en plan «En el caso de que el valor sea este, ejecuta esto», así podríamos tener una especie de muchos Ifs en una sola funciona y mucho más ordenado.
Como explicarlo en un artículo es un poquito complicado ¡Veamos la clase!
Video: https://www.youtube.com/watch?v=NwPtI0SjRaQ
¡Perfecto! Ahora que ya hemos visto la clase, podemos comprender mucho mejor a qué me refería con lo de reducir muchos IFs a una sola función.
También hemos visto que es necesario utilizar el break; para indicar que ha terminado «un caso» y así que salga del switch y pueda seguir ejecutándose el programa.
5. Creando funciones en JavaScript
En esta quinta clase del curso de javascript empezaremos a ver algo un poco más difícil y es que aprenderemos a crear nuestras propias funciones en Javascript.
Aunque veremos cómo podemos crearlas desde cero, también haremos algunas comparaciones con otros lenguajes de programación (PHP) para entender que hay algunas diferencias (sutiles) a la hora de crear las funciones.
Una de esas diferencias es el prefijo «var» que debemos de poner a las variables dentro de las funciones, ya que si no los ponemos serían variables globales y si lo ponemos se volverán «locales», es decir, que se eliminarán al terminar la función (como debe de ser).
Pero antes que nada ¿Qué son las funciones?
Podemos definir las funciones como un trozo de código encapsulado en una palabra (nombre de la función) y que cuando escribimos dicha palabra ¡Se ejecuta el código!
La gracia está en que podemos ejecutar ese código (escribiendo la palabra) tantas veces como queramos, pero no termina ahí la cosa.
Además, de todo esto, las funciones tienen una cosa llamada «argumentos», los argumentos es lo que realmente hace que una función sea inteligente o no, ya que permite que ejecute un código con un resultado diferente cada vez que le indicamos unos argumentos.
Por ejemplo, podemos crear una función llamada sumar, y le podemos pasar dos números (argumentos) y que nos muestre el resultado final, en esta ocasión, el resultado será inteligente y será diferente (siempre que cambiemos los números). Interesante ¿Verdad?
¡Veamos la clase para comprender todo mejor!
Video: https://www.youtube.com/watch?v=BX4VOTOUNUI
¡Genial! Gracias a esta clase, ya hemos visto cómo podemos crear funciones con argumentos y lo potente que son a la hora de programar.
7. Array en JavaScript
En esta séptima clase del curso de JavaScript analizaremos una de las cosas que quizás más cambian comparándolo con otros lenguajes de programación como PHP ¡Los Arrays!
Si nunca has visto ningún lenguaje de programación y te preguntas ¿Qué son los arrays? Lo entenderás rapidamente.
Tienes que ver un array como una variable/elemento que contiene muchas otras variables/elementos. Lo sé, lo sé, parece un poco complicado así, pero piensa en el siguiente ejemplo:
Imagínate que tienes un listado de nombres de alumnos ¿Cómo los ordenas? ¿En una variable para cada uno? ¡No! Es mucho más fácil crear una variable de tipo array y pasarle todos los datos a ese array. Además de ser más ordenado, es más eficiente.
En esta clase veremos que existen tres formas de crear un array, una de ellas más eficiente (por la memoria RAM).
También veremos, que podemos recuperar los elementos de los arrays (uno por uno) de una forma muy sencilla.
¡Veamos la clase para entender todo esto mucho mejor!
- 3 formas diferentes de crear un array
- Unas más eficientes que otras (por ram)
- Recuperar elementos
- Añadir elementos
- Eliminar objetos: no es fácil y se queda ranura vacia
Video: https://www.youtube.com/watch?v=3QMpWIk3ot0
¡Genial! Ahora que hemos visto la clase, hemos podido aprender qué son los arrays, cómo funcionan, como crearlos, cómo sacar elementos sueltos, además de ¡Añadir nuevos elementos!
8. Bucles en JavaScript
Una vez hemos visto qué son los arrays (en la clase anterior), nos queda ver una de las partes más importantes ¿¡Cómo podemos recorrerlos!?
Pero antes que nada, nos tenemos que poner en situación, imagínate que tienes un array que es una lista de alumnos, perfecto, pero ¿Qué vas hacer con ella? ¿Mostrarla? ¿Cómo?
En la mayoría de las ocasiones, cuando tenemos un array, tenemos que acabar procesando cada uno de sus elementos, para mostrarlos por pantalla o hacer cualquier otra cosa, pero ¿Cómo accedemos a cada uno de ellos? ¡Pues con los bucles!
En esta clase analizaremos dos clases de bucles (todos de tipo for).
El primero es el típico que se encuentra en todos los lenguajes de programación que es un bucle formado por tres partes, considero (personalmente) que este tipo es muy importante, ya que es exactamente igual en todos los lenguajes de programación del mundo.
El segundo (y quizás tercero) son una expresión reducida del primero que nos servirá par acceder al índice o al valor del array directamente.
Pero ¡Veamos la clase para comprenderlo mejor!
Video: https://www.youtube.com/watch?v=OvkvSVO_OG0
¡Genial! Ahora ya sabemos cómo podemos recorrer un array de una forma fácil y sencilla en Javascript.
9. Objetos en JavaScript
Antes que nada ¡Felicidades! Si has llegado hasta esta clase, es que estás preparado para ver una de las cosas más complicadas (que no tanto) de este curso ¡Los objetos en JavaScript!
Antes que nada ¿Qué es un objeto?
Pues realmente depende, ya que JavaScript es un lenguaje de programación orientado totalmente a objetos, lo que quiere decir, que absolutamente todo es un objeto (las variables, las funciones, etc).
Es por ello que he dividido en tres vídeos diferentes los objetos, y en esta ocasión veríamos lo que yo llamo «los objetos simples», es decir, un objeto sin prototipado, ni molde (class) ni nada, simplemente, algo realmente fácil de crear.
Pero antes…
Arrays asociativos en JavaScript
Si vienes de otro lenguaje de programación (como PHP), te habrás dado cuenta que en JavaScript no existen los arrays asociativos, es decir, dentro de un array, no puedes cambiar «el índice» numérico a palabras, para asociar, por ejemplo «nombre» a «Luis» y «apellido» a «Peris».
Pues bien, esto que en JavaScript no se puede, si se puede, por ejemplo en PHP, pero ¿Por qué? ¡Muy simple!
PHP es un lenguaje de programación que no es orientado a objetos, de hecho se introdujeron los objetos en las últimas versiones, no desde el comienzo, por ello, la única forma de hacerlo fue permitiendo que los arrays pudieran ser asociativos.
No obstante, JavaScript tiene una forma igual de rápida y eficiente ¡Los objetos! Así pues, en esta clase, analizaremos cómo podemos utilizar los objetos como arrays asociativos.
Pero no sólo eso, sino también, veremos que podemos crear un mini-programita inteligente (objeto), añadiéndole funciones.
Lo sé, lo sé, puede ser un poco complicado todo, así que ¡Veamos la clase!
Video: https://www.youtube.com/watch?v=Tua1afcFCJU
Como hemos visto, los objetos es una de las cosas más potentes que tiene la programación ¡Y justo acabamos de empezar a verlos!
Pero desde ya podemos crear mini-programitas inteligentes y guardarlo en una variable (objeto) y utilizarlo cuando lo necesitemos, de una forma ordenada.
10. Prototipado de objetos en JavaScript
En la clase anterior hemos visto una introducción a los objetos en JavaScript, vimos que podíamos utilizar los objetos para crear mini-programitas inteligentes, no obstante, tenían un problema.
Normalmente los lenguajes de programación orientado a objetos tienen una cosa llamadas «clases», por decirlo de alguna forma, las clases son como un molde. Por poner un ejemplo, piensa en un coche, podemos decir que el coche es «un objeto», si sólo quisieramos crear un coche podríamos hacerlo directamente (como vimos la clase anterior), pero ¿Qué pasaría si quisiéramos crear muchos coches?
En este caso, sería mucho más eficiente, no crear el coche (objeto), sino crear el molde (clase) del coche y así podríamos crear tantos coches (objetos) como quisiéramos fácilmente.
Pues bien, mientras en la clase anterior únicamente vimos cómo crear objetos, en esta clase aprenderemos a utilizar una de las dos formas principales que existen para crear estos moldes.
¡Veamos la clase!
Video: https://www.youtube.com/watch?v=_Wd_xMIRO2M
¡Perfecto! Ahora que hemos visto esta clase hemos visto que podemos crear clases con una cosa llamada «prototipado» que en definitiva sería crear una mini-clase e irle añadiendo opciones.
Realmente esta forma para crear clases es un poco «vieja» (pero necesaria conocerla) y actualmente se utilizada otra mucho más fácil, pero esta ¡La veremos en la próxima clase!
11. Creando moldes (class) para objetos en JavaScript
En la clase anterior vimos que podíamos utilizar el prototipado de objetos en JavaScript para generar moldes para los objetos, pero sin duda era una forma un poco «tosca» de crear los moldes. Por ello, en Diciembre del 2015 se lanzó en las especificaciones ECMAScript una forma mucho más fácil de trabajar con los moldes ¡El famoso class!
Pero demos un paso atrás:
¿Qué es un molde (class) en JavaScript?
Como vimos la clase anterior, tenemos que pensar en el mundo real, por ejemplo ¿Cómo podemos crear un espada?
Una forma sería hacerlo manualmente si queremos únicamente una espada (para nosotros mismos), no obstante, tendríamos otra forma sería crear un molde (class) con el que pudiéramos crear tantas espadas (objetos) como quisiéramos ¿Se entiende, no?
Para entenderlo mejor, pensemos en un videojuego de coches, ciertamente podemos crear 10.000 coches uno a uno, pero es mucho mejor crear la clase (molde) de 5 diferentes y luego con código crear 500 coches (objetos) de cada uno de los moldes.
Pues bien, ahora que ya entendemos mejor que son los moldes y los objetos ¡Vamos a ver cómo podemos programarlos!
Objetos en JavaScript y objetos en PHP
Una de las ventajas de la nueva forma que veremos en esta clases es que es exactamente igual que otros lenguajes de programación, por ejemplo PHP.
Se instancia con la palabra class, tiene también un constructor, se le definen los métodos, etc ¡Todo igual!
Aunque si que es cierto que tiene algunas diferencias comparándolas con PHP o Java, por ejemplo, que no tenemos que poner la palabra «function» o que la definición de los atributos debemos de hacerlo en el constructor.
Así pues, sepas otros lenguajes de programación o no ¡Veamos la clase!
Video: https://www.youtube.com/watch?v=V1POo-NHdYw
Ahora que ya hemos visto esta última clase, ya podemos decir que tenemos una base de qué es JavaScript ¡Y cómo funciona!