Fundamentos de programación web

Hasta ahora HTML y CSS nos han servido para la parte de maquetación, es decir diseñar la estructura del contenido de la pagina, con Javascript trabajaremos un lenguaje de programación completo. Introduce lógica, toma de decisiones y procesamiento de datos.

Variables

En la programación, necesitamos almacenar información temporalmente para usarla despues en distintas partes de un programa o bloque de instrucciones. Para ello existen las variables, que son similares a cajas que contienen nuestra información donde guardamos un dato.

Definición de variables y tipos de datos primitivos

En diferentes lenguajes de programación incluyendo Javascript encontramos los tipos de datos primitivos:

-String: Es una cadena de texto.

-Number: Valores numéricos incluyendo decimales y enteros.

-Bigint: Números enteros extremadamente grandes.

-Boolean: valores lógicos verdadero (True) o falso (False).

Declaración de variables

Si bien Javascript emplea tipos de datos diferentes, su sintaxis dinámica permite declarar variables de dos tipos:
-const: una variable constante que no cambia.

-let: una variable que puede cambiar.

Javascript por defecto en el navegador infiere el tipo según el dato asignado.

1const numero = 19;
2const numero2 = 20;
3var suma = 0;
4suma = numero + numero2;
5console.log(suma);
Copy

En este ejemplo podemos ver como el valor de suma cambia al sumar los datos de las variables constantes. El metodo console.log(parámetro); permite mostrar en la terminal lo ingresado en el parametro.

Primer Hola Mundo

Como vimos anteriormente console.log(); permite mostrar en consola un parámetro, puede ser una cadena de texto o incluso el contenido de una variable como en el ejemplo anterior. Entonces para escribir un "Hola Mundo" en consola utilizando el método console.log seria de la siguiente manera:

1console.log('Hola Mundo');
Copy

Ejecutar nuestra aplicación

Podemos utilizar diferentes medios para mostrar los resultados de nuestro programa de Javascript, como un compilador en linea https://www.programiz.com/javascript/online-compiler/ o utilizando NodeJs.

NodeJs es un motor de Javascript que nos permite ejecutar este lenguaje fuera del navegador. Podemos utilizarlo en Visual Studio Code como nuestro editor de código.

Instalar NodeJs

Puedes descargar el ejecutable para windows desde la pagina oficial https://nodejs.org/es o ejecutar el comando winget install OpenJS.NodeJS.LTS.

En MacOs podemos instalar NodeJs desde homebrew (Si no tienes HomeBrew instalalo con curl -o- https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh | bash) y posteriormente solo ejecutas brew install node@26

Una vez que NodeJs esta instalado en la terminal solo ejecutamos node nombre_archivo.js en la carpeta o ruta donde tenemos nuestro archivo.

Operadores aritméticos en Javascript

En los lenguajes de programación encontramos operadores que nos permiten ejecutar operaciones matemáticas como suma, resta, multiplicación u obtener el residuo de una división.

Ejemplos:

1//Ejemplo de suma en javascript 
2//Utilizamos el operador +
3const numero1 = 10;
4const numero2 = 20;
5var suma = numero1 + numero2;
6console.log(suma);
7
8//Ejemplo de Resta Operador -
9var resta = numero2 - numero2;
10console.log(resta);
11
12//Ejemplo Multiplicación Operador *
13var multiplicacion = numero1 * numero2;
14console.log(multiplicacion);
15
16//Ejemplo División Operador /
17var division = numero2 / numero1;
18console.log(division);
Copy

Pedir datos al usuario

Para que el usuario sea quien ingrese el dato podemos hacer uso de la función prompt de la siguiente manera:

1let nombre = prompt('Introduce tu nombre: ');
2console.log('Tu nombre es: ', nombre);
Copy

Condicionales

Uno de los apartados principales de la programación es establecer condiciones que deben ser comprobadas antes de ejecutar una instrucción, de esta manera podemos validar si se cumple o no esta condicion y ejecutar una instruccion para cada caso en especifico. Para esto utilizamos la palabra reservada if (Si esta condición se cumple) y un else (si no se cumple).

Ejemplo en código

1let edad = prompt('Introduce tu edad: ');
2
3if(edad<18){
4	console.log('No puedes ingresar eres menor');
5}
6else{
7	console.log('Puedes ingresar');
8}
Copy

Como se puede ver en el código de ejemplo la variable let edad pide un dato de tipo numérico (inferido por el navegador) y comprueba, si edad es menor que 18 ejecuta el código escrito en los corchetes, el uso de else permite ejecutar una instrucción si no se cumple la condicion del if (no es necesario añadir otra condición por ahora en el else)

Condicionales anidados

En el ejemplo anterior mostramos una condición simple, pero podemos tener la necesidad de evaluar diferentes casos con condiciones especificas, entonces podemos anidar condicionales if-else de la siguiente manera:

1let edad = prompt('Ingresa tu edad: ');
2
3if(edad<18){
4	console.log('Lo siento eres menor de 18 no puedes ingresar.');
5}
6else if(edad>65){
7	console.log('Felicidades obtienes un descuento!');
8}
9else{
10	console.log('Bienvenido puedes ingresar');
11}
Copy

Switch Case

Anidar condicionales if-else puede convertirse en un enrollo que como práctica vuelve el código en algo dificil de leer, convirtiendo el código en algo extenso y complicado, para solventar esto existe la función switch-case, que evalúa múltiples condiciones diferentes, de forma estructurada y limpia. Veamos un ejemplo:

1let  edad = prompt('Ingresa tu edad: ');
2
3switch(true){
4	case edad<18:
5		console.log('Lo siento eres menor de 18 no puedes ingresar.');
6		break;
7	case edad>65:
8		console.log('Felicidades obtienes un descuento!');
9		break;
10	default:
11		console.log('Bienvenido puedes ingresar');
12	
13}
Copy

Este código evalúa una condición verdadera (true) donde cada caso representa una condición especifica: edad debe ser menor a 18, edad debe ser mayor a 65 y finalmente default establece el caso o condición predeterminada exenta de las anteriores. Cada break al final de cada instrucción la delimita.