Comencemos respondiendo la siguiente pregunta: si podemos usar HTML para construir la estructura de una página web y CSS para que se vea bonita, ¿por qué necesitamos JavaScript?
La respuesta es que técnicamente no lo hacemos. Si estamos contentos con un sitio estático que se sienta allí y se ve bonito, estamos listos para usar solo HTML y CSS.
La palabra clave aquí es "estático". Sin embargo, si queremos agregar funciones dinámicas a nuestras páginas web, como cambiar el contenido e interacciones de usuario más complejas, necesitamos usar JavaScript.
¿Qué es JavaScript?
JavaScript es algo único a este respecto, ya que fue diseñado para ejecutarse directamente dentro de los navegadores web. Nos permite escribir código que representa conjuntos de acciones que se ejecutarán en nuestras páginas web para hacer que nuestros sitios sean mucho más dinámicos.
Puede escribir código JavaScript en archivos de texto nombrados con una .jsextensión o dentro <script>de etiquetas directamente en el HTML.
Durante muchos años, el código JavaScript estuvo principalmente relegado a ejecutarse dentro de los navegadores web. Pero el proyecto Node.js cambió este paradigma al crear un entorno de JavaScript independiente que podía ejecutarse en cualquier lugar.
En lugar de quedar atrapado en un navegador (es decir, del lado del cliente), Node.js se puede instalar localmente en cualquier computadora para permitir el desarrollo y la ejecución de código JavaScript. También puede instalar Node en servidores web, lo que le permite usar JavaScript como código de back-end para aplicaciones en lugar de simplemente como código de front-end del navegador web.
Ahora que hemos cubierto algunos antecedentes, profundicemos en algunos conceptos básicos del lenguaje JavaScript.
Variables y asignación en JavaScript
Las variables posiblemente representan el concepto más fundamental en la programación. Una variable es simplemente un nombre o marcador de posición que se utiliza para hacer referencia a un valor particular.
La palabra variable implica que el valor almacenado puede cambiar a lo largo de la ejecución del programa.
Puede usar variables para almacenar números, cadenas de caracteres de texto, listas y otras estructuras de datos de las que hablaremos más en un minuto.
Todos los lenguajes de programación usan variables, pero la sintaxis varía entre los diferentes lenguajes.
Las variables son útiles ya que podemos hacer referencia a sus valores a lo largo de nuestro código. Esto nos permite verificar sus valores según sea necesario y realizar diferentes acciones dependiendo de cómo cambie el valor de la variable.
En JavaScript, declaramos variables usando la letpalabra clave, así: let x;.
Esto declara x como una variable que podemos usar en nuestro código. Tenga en cuenta que agregamos un punto y coma al final de la línea. En JavaScript (y muchos otros lenguajes) se utilizan puntos y comas para especificar el final de cada instrucción de código.
Ahora que hemos creado la variable x , podemos asignarle un valor usando el signo igual, también llamado operador de asignación :x = 10;
Aquí asignamos el número 10 a la variable llamada x . Ahora, cada vez que usemos x en nuestro código, se sustituirá el valor 10.
Tanto la declaración como la asignación de variables se pueden hacer en una línea de la siguiente manera:
let x = 10;
Tipos de datos en JavaScript
En la última sección, almacenamos un valor entero (número entero) en la variable llamada x . También puede almacenar números decimales o números de punto flotante como se conocen. Por ejemplo, podríamos escribir: let x = 6.6;.
Los diferentes tipos de valores que podemos almacenar en las variables se denominan tipos de datos . Hasta ahora solo hemos visto tipos de datos numéricos (enteros y números de punto flotante), pero solo estamos arañando la superficie. También podemos almacenar datos de texto en variables.
En la terminología de codificación, un fragmento de texto se denomina cadena . Podemos almacenar un valor de cadena en nuestra variable x rodeándolo con comillas simples o dobles:
let x = 'Hello there!';
let y = "Hey bud!";
El siguiente tipo de datos que discutiremos es el booleano . Un valor booleano solo puede contener uno de dos valores, trueo false, y deben estar todos en minúsculas. En JavaScript, verdadero y falso son dos palabras clave que se usan específicamente como valores para variables booleanas:
let x = true;
let y = false;
Tenga en cuenta que los valores truey falseno aparecen entre comillas como lo hacen las cadenas. Si los encerramos entre comillas, los valores serían cadenas, no booleanos.
A menudo usamos booleanos para controlar el flujo de programas en sentencias condicionales (if/else) sobre las que aprenderemos a continuación.
Declaraciones de control de flujo de programa en JavaScript
Ahora que comprendemos las variables y los tipos de datos básicos de JavaScript, echemos un vistazo a algunas cosas que podemos hacer con ellas.
Las variables no son tan útiles sin poder decirle a nuestro código que haga algo con ellas. Podemos hacer que nuestras variables hagan cosas usando sentencias .
Las declaraciones son palabras clave especiales que nos permiten realizar alguna acción en nuestro código, a menudo en función del valor de una variable que hemos definido. Las declaraciones nos permiten definir el flujo lógico de nuestros programas, así como realizar muchas acciones útiles que dictarán cómo funcionan nuestros programas.
Declaración si / si no
La primera declaración que discutiremos es la ifdeclaración. La ifdeclaración nos permite realizar alguna acción solo cuando una condición deseada es verdadera. Así es como funciona:
let x = 10;
if ( x > 5 ) {
console.log('X is GREATER than 5!');
} else {
console.log('X is NOT GREATER than 5!');
}
Definimos una variable llamada x y establecemos su valor en 10. Luego viene nuestra ifdeclaración. Después de la palabra clave if, tenemos un conjunto de paréntesis que contiene la condición a evaluar, en este caso, x > 5. Acabamos de definir x igual a 10, por lo que sabemos que esta condición es verdadera en este ejemplo.
Dado que la condición entre paréntesis es verdadera, el código entre las llaves se ejecutará y veremos la cadena "¡X es MAYOR que 5!" impreso en la pantalla. (No discutimos el significado de console.log(), así que por ahora solo sepa que imprime el valor entre paréntesis en la pantalla).
En el mismo ejemplo, también incluimos una elsedeclaración. Esto nos permite ejecutar código específico en caso de que la condición en la condición sea false.
Mientras bucles
El siguiente tipo de declaración que discutiremos es el ciclo while . Los bucles nos permiten repetir un bloque de código tantas veces como queramos, sin tener que copiar y pegar el código una y otra vez.
Por ejemplo, supongamos que necesitamos imprimir una oración en la pantalla 5 veces. Podríamos hacerlo así:
console.log('This is a very important message!');
console.log('This is a very important message!');
console.log('This is a very important message!');
console.log('This is a very important message!');
console.log('This is a very important message!');
Esto funciona bien para solo 5 mensajes, pero ¿qué pasa con 100 o 1000? Necesitamos una mejor manera de repetir fragmentos de código varias veces, y los bucles nos permiten hacer esto. En la terminología de codificación, la repetición de un fragmento de código varias veces se denomina iteración.
Este siguiente whileciclo continuará ejecutando el bloque de código dentro de él mientras la condición especificada se mantenga verdadera:
let x = 1;
while ( x <= 100 ) {
console.log('This is a very important message!');
x = x + 1;
}
En este ejemplo, inicializamos x al valor de 1. Luego escribimos un whileciclo. Similar a la ifdeclaración, agregamos una condición entre paréntesis. En este caso la condición es x <= 100. Esta condición será truesiempre que x sea menor o igual a 100.
A continuación especificamos el bloque de código a ejecutar entre llaves. Primero, imprimimos nuestro mensaje a la consola. Luego incrementamos x en 1.
En este punto, el ciclo intenta volver a evaluar la condición para ver si todavía es true. La variable x ahora tiene un valor de 2 ya que se incrementó en la primera ejecución del ciclo. La condición sigue siendo trueya que 2 es menor que 100.
El código en el ciclo se repite hasta que x se incrementa al valor de 101. En este punto, x es mayor que 100, por lo que la condición ahora es false, y el código en el ciclo deja de ejecutarse.
La etiqueta HTML <script>
Ahora que hemos introducido JavaScript, analicemos cómo agregar archivos de código JavaScript en una página HTML. Podemos hacer esto usando una etiqueta HTML que aún no hemos discutido: la <script>etiqueta.
Esto es similar al <link>elemento que usamos para agregar archivos CSS a nuestro HTML, excepto que el <script>elemento es específicamente para JavaScript.
Digamos que guardamos uno de los ejemplos anteriores de JavaScript que discutimos en un archivo llamado customscript.jsen la misma carpeta que nuestro archivo HTML. Podemos agregar este archivo JavaScript a nuestro HTML agregando la siguiente etiqueta HTML en la <head>...</head>sección de nuestro HTML:
<script type="text/javascript" src="customscript.js"></script>
Esto cargará el código JavaScript del archivo, que se ejecutará cuando la página web se muestre en el navegador.
