A diferencia de los lenguajes como HTML o CSS, que podemos definir como lenguajes de marcas, JavaScript es un lenguaje de programación que usaremos para añadir interactividad a las páginas web. El código JavaScript puede estar dentro del propio archivo HTML utilizando las etiquetas script o mediante archivos externos con extensión .js
JavaScript es un lenguaje interpretado y no genera ningún tipo de código compilado, sino que éste se interpreta en el navegador una vez que se descarga la página que lo contiene. Podemos usar cualquier editor de texto como el bloc de notas de Windows. Aunque sí es altamente aconsejable usar editores de código para facilitarnos el trabajo. La mezcla de JavaScript con HTML se suele conocer con el nombre de HTML Dinámico o DHTML.
En la actualidad JavaScript ya no es opcional en una página web, dado que se exige que tengan dinamismos y una alta usabilidad. En HTML5 se considera que este lenguaje ya forma parte de la norma.
Además, este lenguaje se está volviendo más popular entre el desarrollo web, y aunque su finalidad inicial es interactuar con la parte de cliente, dota de dinamismo al documento HTML. Existen ya, muchos Frameworks que utilizan la sintaxis JavaScript para trabajar del lado del servidor, como node.js, VUE, TypeScript y muchos más.
Integración en Páginas HTML
La integración de JavaScript y HTML es muy flexible, ya que existen al menos tres formas para incluir código JavaScript en las páginas web.
JavaScript en el mismo documento con la etiqueta <script>
<html> <head> <title>JavaScript en el propio documento</title> <script type=”text/javascript”> alert(“Esto es un mensaje en una ventana del navegador”); </ script> </head> <body> <p>Un párrafo de texto</p> </body> </html>
Como se puede apreciar en el código con la etiqueta <script> indicamos la zona que va a contener la codificación JavaScript. Aunque lo más aconsejable es que este bloque de código JS se realice dentro del head de la página no siempre es imprescindible, pues en algunos casos nos veremos obligados a ponerlas dentro del body.
JavaScript en documento externo
Otra forma de incluir código JS en nuestras páginas, es en un documento externo con la extensión .js.
En estos archivos se suelen poner las funciones, dado que al tratarse de un archivo externo, podemos reutilizarlo enlazándolo desde otros documentos.
<html> <head> <title>Ejemplo de código JavaScript en el propio documento</title> <script type=”text/javascript” src=”archivoJavascript.js”></ script> </head> <body> <p>Un párrafo de texto.</p> </body> </html>
Además del atributo type, este método requiere definir el atributo src, que es el que indica la URL correspondiente al archivo JavaScript que se quiere enlazar.
*IMPORTANTE: Debemos tener en cuenta que no podremos usar el mismo bloque de script para llamar a un archivo e incluir código al mismo tiempo.
Si utilizamos la etiqueta script para enlazar a un archivo y ponemos código dentro, este no se ejecutará.
JavaScript en elemento HTML
Este último método es el menos utilizado hoy en día y no es bueno abusar de su uso dado que resulta más complicado efectuar correcciones y/o cambios.
La tendencia actual en la creación de páginas HTML, es dejar lo más limpio este código, separando tanto elementos CSS como JS fuera del bloque principal.
<html> <head> <title>JavaScript en el propio documento</title> </head> <body> <p onclick=”alert(‘Un mensaje de prueba’)”>Un párrafo de texto.</p> </body> </html>
Mediante atributos HTML, como los manejadores de eventos (onclick, onblur…), podemos insertar directamente código JS.
Header
Aunque podemos casi afirmar que cualquiera de nuestras páginas será interpretada con cualquier navegador, dado que está muy extendido, existe una etiqueta que nos da la opción de lanzar un mensaje o acción si se diese el caso de que no lo soportara. La etiqueta noscript.
<body> <noscript> <p>La página que estás viendo requiere JavaScript. <br /> Si lo has deshabilitado, por favor vuelve a activarlo.</p> </noscript> ....
Sintaxis JavaScript
A diferencia de los lenguajes anteriores JavaScript es mucho más estricto en la forma de escribir el código, haciendo más fácil que cometamos errores de escritura. A continuación enumeramos las reglas más importantes.
No se tienen en cuenta las líneas ni espacios en blanco.
Se distinguen las mayúsculas y minúsculas.
No se define el tipo de las variables: JavaScript es débilmente tipado por lo que una variable podrá pasar de contener un número a un texto o cualquier otro tipo de dato, como veremos más adelante.
Las sentencias no tienen que terminar con punto y coma (;): en la mayoría de lenguajes de programación, es obligatorio terminar cada sentencia con el carácter (;). Aunque no sea obligatorio se aconseja su uso para así adquirir buenas costumbres.
Se pueden incluir comentarios: los comentarios se utilizan para añadir información en el código fuente del programa. Aunque el contenido de los comentarios no se visualiza por pantalla, sí que se envía al navegador del usuario junto con el resto del script, por lo que es necesario extremar las precauciones sobre la información incluida en los comentarios.
Los nombres de variables siempre deben empezar por una letra del alfabeto (mayúscula o minúscula), un subrayado (_) o un signo de dólar ($), y solo pueden constar de letras, números y subrayados. Por supuesto, no pueden incluirse espacios en el nombre de una variable. Como veremos más adelante, determinados tipos se diferencia por estar en mayúsculas, por lo que se aconseja escribir siempre en minúsculas o escritura «Camello» (CamelCase)*.
CamelCase
CamelCase es un estilo de escritura que se aplica a frases o palabras compuestas. El nombre se debe a que las mayúsculas a lo largo de una palabra en CamelCase se asemejan a las jorobas de un camello. El nombre CamelCase se podría traducir como Mayúsculas/Minúsculas Camello. El término case se traduce como “caja tipográfica”, que a su vez implica si una letra es mayúscula o minúscula y tiene su origen en la disposición de los tipos móviles, en casilleros o cajas.
Existen dos tipos de CamelCase:
UpperCamelCase, cuando la primera letra de cada una de las palabras es mayúscula.
Ejemplo: EjemploDeUpperCamelCase.
lowerCamelCase, igual que la anterior con la excepción de que la primera letra es minúscula. Ejemplo: ejemploDeLowerCamelCase.
<body> <noscript> <p>La página que estás viendo requiere JavaScript. <br /> Si lo has deshabilitado, por favor vuelve a activarlo.</p> </noscript> ....
.
Ejercicios
Para practicar lo aprendido en esta lección, vamos a hacer uso de una función de JavaScript, llamada alert.
Dicha función, nos permite lanzar una ventana emergente del navegador con un mensaje de tipo texto que insertaremos como parámetro.
Ejemplo función alert()
… alert(«Hola Mundo); …
Ejercicio 1
Crea un archivo HTML y dentro del bloque de las etiquetas head, inserta el código del ejemplo del alert, mostrado.
Ejercicio 2
Inserta el siguiente código en un archivo con extensión .js y pega el siguiente código. Abre el documento y mira qué pasa.
window.onload = function(){
alert("Soy un código de JavaScript dentro de un archivo externo al documento HTML");
}
JavaScript es un lenguaje de tipo script compacto, parcialmente basado en objetos y guiado por eventos diseñado específicamente para el desarrollo de aplicaciones cliente-servidor («client-server») dentro del ámbito de Internet. Los programas JavaScript van incrustados en los documentos HMTL, y se encargan de realizar acciones en el cliente, como pueden ser pedir datos, confirmaciones, mostrar mensajes, crear animaciones, comprobar campos… Pero como cualquier lenguaje tenemos que tener una base de programación para usarlo y así tomar decisiones oportunas en cada caso.
Las Variables
JavaScript tiene la peculiaridad de ser un lenguaje débilmente tipado, esto es, se puede declarar una variable que ahora sea un entero y más adelante una cadena de texto.
Tenemos dos formas para declarar o instanciar (crear) una variable:
DECLARACIÓN IMPLÍCITA (Globales): Consiste en escribir únicamente el nombre y asignarle un valor.
nombre = ”Antonio”;
Si la variable es global existirá y se podrá cambiar su valor a lo largo de todo el código de esa página, aunque sea dentro de un método.
DECLARACIÓN EXPLÍCITA (Locales): Se usa la palabra reservada var o let, seguida del nombre de la variable.
var nombre = ”Antonio”; let nombre2 = "Juan"; const nombre3 = "pepe";
En este caso la variable la definiremos como local, y su existencia estará asociada al código que la contiene. Si estamos dentro de un método solo existirá en dicho método, si lo tenemos en el flujo de código principal, esa variable no existirá en el “interior“ de los métodos.
Podemos instanciar o declarar las variables con o sin un valor asociado:
var nombre; var apellido1;
O hacerlo en una sola línea separándolas con comas: var nombre, apellido1, apellido2, direccion;
La asignación siempre va de derecha a izquierda:
var nombre = “Antonio Otero“;
Para declarar las variables debemos tener en cuenta las siguientes condiciones:
Una variable no puede tener espacios.
No podemos usar palabras reservadas por el sistema, for, if, while…
No pueden empezar por un número.
No debemos usar tildes ni signos. Ejemplo año -> annio;
Usar nombre de variables que faciliten su identificación, Ejemplo x=12 -> ejeX=12.
No usar nombres genéricos que puedan confundirnos más adelante. Ejemplo: var nombreCliente , nombreContacto, nombreComercial…
Declaraciones y modo estricto
JavaScript tuvo algunos cambios importantes introducidos en 2009 y 2015. La mayoría de estos cambios ampliaron la sintaxis del lenguaje con nuevos elementos, pero algunos de ellos se referían solo al funcionamiento de los intérpretes de JavaScript. A menudo se trataba de aclarar el comportamiento de los intérpretes en situaciones potencialmente erróneas, como en los casos de inicialización de variables sin ninguna declaración previa. Veamos un ejemplo:
nombre = "Antonio"
alert(nombre)
Puedes ver que nos hemos olvidado de declarar la variable nombre. La sintaxis de JavaScript original permitía tal negligencia, y en el momento de la inicialización hizo esta declaración por nosotros. Parece una solución bastante buena, pero desafortunadamente a veces puede conducir a situaciones ambiguas y potencialmente erróneas (diremos algunas palabras más al respecto mientras discutimos el alcance).Vamos a modificar nuestro ejemplo:
"use strict";
height = 180; // -> Uncaught ReferenceError: height is not defined
console.log(height);
Al principio de nuestro código, agregamos «use strict»;. Esta sentencia ha cambiado radicalmente el comportamiento del intérprete. ¿Por qué? Lo usamos cuando queremos obligar al intérprete a comportarse de acuerdo con los estándares modernos de JavaScript. Entonces, siempre que no estés ejecutando un código realmente antiguo, siempre debes usarlo. Y esta vez, usar una variable sin su declaración anterior se trata como un error. La frase «use strict»; debe colocarse al principio del código. Hará que el intérprete se ocupe del resto del código utilizando el modo estricto, que es el estándar moderno de JavaScript. Todos los demás ejemplos de nuestro curso estarán preparados para funcionar en este modo de forma predeterminada, incluso si «use strict»; no siempre aparezca al principio del código.
Tipos de variables
En JavaScript podemos instanciar variables de diferentes formas según su alcance. Tenemos let y var para variables y const para las contantes, dependiendo del resultado que queramos obtener utilizaremos una u otra.
Constantes
La palabra clave const se usa para declarar contenedores similares a variables. Dichos contenedores se denominan constantes. Las constantes también se utilizan para almacenar ciertos valores, pero una vez que se han ingresado valores durante la inicialización, ya no se pueden modificar. Esto significa que este tipo de contenedor se declara e inicializa simultáneamente. Por ejemplo, la siguiente declaración de la constante saludo es correcta:
const saludo = "¡Hola!";
let y var
Hasta ahora, asumimos que después de declarar una variable, su nombre podría usarse en todo el código del programa (es decir, el alcance de la variable es global). Esto no es del todo cierto: el alcance de una variable depende de dónde se declare. Desafortunadamente, para una buena comprensión del alcance de una variable, necesitamos aprender algunos elementos de programación más, como instrucciones o funciones condicionales, que se analizarán con detalle más adelante en el curso. Así que aquí nos limitaremos a la información básica y volveremos a este tema en diferentes partes del curso. Uno de los elementos básicos que influyen en el alcance de las variables es un bloque del programa.
Bloques del Programa. Podemos separar el código de un programa en bloques. En los bloques que creamos usando llaves {}, hay un conjunto de instrucciones que, por alguna razón, deben tratarse de forma independiente. Los bloques suelen estar asociados a instrucciones condicionales, bucles o funciones, de las que hablaremos más adelante. También podemos separar un bloque de un programa que no tenga nada en especial, simplemente eligiendo un determinado rango de instrucciones (en la práctica, esto no está especialmente justificado, y por ahora solo lo haremos por motivos educativos).
Primero, declaramos la variable contenedor. Luego abrimos un bloque dentro del cual inicializamos esta variable y mostramos su contenido. Fuera del bloque, aumentamos el valor almacenado en la variable en 1 y lo mostramos nuevamente. En este caso, el intérprete ejecutará el programa como si no hubiera notado el bloque, pasando por las instrucciones antes del bloque, en el bloque y después del bloque. Crear un bloque aquí, sin, por ejemplo, instrucciones condicionales, no tiene una justificación real, es solo un ejemplo del uso de llaves {}.
var
En el caso de declaraciones de variables usando la palabra clave var, la situación es ligeramente diferente. La variable declarada utilizándola fuera de los bloques será, como en el caso de let, global, es decir, será visible en todas partes. Si la declaras dentro de un bloque, entonces… bueno, por lo general volverá a ser global.
Como era de esperar, ambas variables, height y weight, resultan ser globales. ¿Las variables declaradas usando var siempre, independientemente del lugar de declaración, serán globales? Definitivamente no. El problema es que var ignora los bloques de programa ordinarios, tratándolos como si no existieran. Entonces, ¿en qué situación podemos declarar una variable local usando var? Sólo dentro de una función. Dedicaremos mucho espacio a discutir la función y luego volveremos al problema del alcance de la variable. Ahora intentaremos presentar y discutir solo un ejemplo simple, que mostrará que las variables var a veces también son locales.
Tipos de datos
Cuando declaramos una variable, esta no pertenece a ningún tipo en concreto, tiene un valor indefinido (Undefined). Los tipos de datos que estudiaremos en JavaScript son:
String: Cadenas de texto.
Number: Valores numéricos (enteros o decimales).
Boolean: Booleanos (true o false).
Object: Objetos.
Null: Objeto que todavía no existe.
Undefined: Indefinido.
Number
Enteros (integer): Podemos representar nú́meros enteros de tres formas distintas: en base 10 (la usual), en base 16 (hexadecimal) o en base 8 (octal). Para denotar un número hexadecimal lo haremos escribiendo delante del número 0x. Por ejemplo, 0xF3A2 se refiere a F3A2 en hexadecimal. Para denotar un número en base octal lo haremos precediendolo de un 0 (cero). Por ejemplo, 01763 se refiere a 1763 en octal.
let numero1 = 258;
Decimales o reales (float): Con ellos podremos representar números en coma flotante, usando notación decimal o científica. Se toma el número decimal y se normaliza, es decir, se corre el punto decimal tantos puestos a la izquierda o a la derecha como sean necesarios para que haya un único número distinto de cero antes del punto. Para ello, será necesario acompañar este desplazamiento del punto con la respectiva multiplicación o división por potencias de 10. El formato es el siguiente: X.YYYYYYeNN donde e (también puede ser E) significa exponente, y NN es el número al que elevar 10 para obtener el número. Por ejemplo, el número 123.298 se escribe 1.23298E2, mientras que 0.00123 se escribe 1.23E-3
let numero = 36.58;
Booleanos
Tomarán los valores de verdad true o false (1 o 0). El resultado de evaluar una condición sería un valor booleano.
let estalisto = true;<br>
Nulos
El valor null es bastante específico. El valor en sí es primitivo, mientras que el tipo al que pertenece no es un tipo primitivo, como Number o undefined. Esta es una categoría separada, asociada con tipos complejos, como objetos. El valor null se usa para indicar que la variable no contiene nada y, en la mayoría de los casos, es una variable que pretende contener valores de tipos complejos.
Cadenas
En JavaScript, las cadenas vienen delimitadas por comillas dobles, o bien por comillas simples, y pueden tener cualquier combinación de letras, espacios, números y otros símbolos. Podemos, además, usar los caracteres de escape que tenemos para representar los saltos de línea y otros elementos. Estos caracteres solo serán efectivos en la vista del código impreso, por ejemplo en un terminal. Por el contrario, lenguajes como HTML, los ignorarán.
\b Espacio hacia atrás
\f Salto de página
\n Nueva línea
\r Retorno de carro
\t Tabulación
\\ Barra invertida : \
\’ Comilla simple : ’
\” Comilla doble : ”
Ejemplo:
let texto = "Esto es un texto cualquiera\n";
Concatenar cadenas
Además de las operaciones matemáticas que podemos hacer con las variables numéricas, podemos también trabajar con las cadenas de texto, para ello usaremos el símbolo + que trabajando con tipos de datos string(cadenas de texto), lo que hace es concatenar dichos textos. Ejemplo:
let nombre = "Antonio"; let apellidos = "Otero Veiga"; let nombreCompleto = nombre + “ “ + apellidos; //Como podemos ver concatenamos el nombre con un espacio en blanco y el apellido.
Comentarios
En JavaScript tenemos dos tipos de comentarios, de línea y de párrafo. Para los comentarios de línea basta con empezar dicha línea con //.
Ejemplo:
alert(‘mensaje‘) // esto es un comentario. // esto es otro comentarioPara los comentarios de párrafo encerraremos el texto en cuestión entre /* texto */ , al igual que en CSS y otros lenguajes podremos incluir todo el texto que queramos.
/*
Esto es un comentario
de varias líneas
*/
Operadores
Aritméticos
Los operadores aritméticos son binarios (necesitan dos operandos), y realizan sobre sus operandos alguna de las operaciones aritméticas conocidas. En concreto, tenemos:
Operadores aritméticosEjemplos:
/ Ejemplo Suma:
var num1 = 5;
var num2 = 6;
var resultado = num1 + num2 // El valor de la variable resultado será 11
// Ejemplo Resta:
var num1 = 10;
var num2 = 6;
var resultado = num1 - num2 // El valor de la variable resultado será 4
// Ejemplo Producto:
var num1 = 10;
var num2 = 6;
var resultado = num1 * num2 // El valor de la variable resultado será 60
// Ejemplo Cociente:
var num1 = 10;
var num2 = 2;
var resultado = num1 / num2 // El valor de la variable resultado será 5
// Ejemplo Módulo:
var num1 = 9;
var num2 = 2;
var resultado = num1 % num2 // El valor de resultado será 1 que es el resto de la
El operador de asignación (=) puede también puede combinarse con un operador aritmético. variable = variable operador Aritmético expresión puede cambiarse por: variable operador Aritmético = expresión es decir:
Comparación de expresiones aritméticas.
Ejemplo:
let num1 = 8; let num2 = 3; num1 += num2 // Ahora la variable num1 tiene el valor de 11, que es la suma de 8+3;
Comparación
Los operadores de comparación son binarios y su resultado es un booleano (un valor de verdad). Nos permiten expresar si una relación de igualdad/desigualdad es cierta o falsa dados los operandos.
Los operadores de incremento aumentan o disminuyen en una unidad el número al que se le aplica. Estos operadores debemos aplicarlos siempre a una variable cuyo valor sea un número entero. Para aumentar en una unidad se usa la expresión ++.
let num1 = 5; num1++ //ahora num1 es igual a 6
Para disminuir en una unidad se usa la expresión –.
let num2 = 8; num2-- //ahora num2 es igual a 7
Lógicos
Los operadores lógicos sirven para componer condiciones más simples por medio de las reglas de la y, o y no lógicas. Nos permiten expresar condiciones compuestas de las que queremos averiguar su valor de verdad.
&& AND (y lógica)
|| OR (o lógica)
! NOT (no lógico)
Ejercicios
Ejercicio 1
Realizando cálculos con variables, desarrolla el código necesario para hacer las siguientes operaciones.
Si en el mercado tenemos que 12 manzanas nos cuestan 3 euros, ¿cuánto nos costarían 17 manzanas?
Si tengo 37 euros ¿Cuántas manzanas me puedo comprar?.
Cuál es el precio de una manzana.
Para que el resultado aparezca en la pantalla utiliza el método document.write(). Ejemplo:
<script type=”text/javascript”>
dato = “hola“;
document.write(dato) // imprimirá por pantalla el texto hola.
</script>
Ejercicio 2
Crea en un documento con código JS, las siguientes variables.
let nombre="Pepu";
let direccion="Madrid"
let edad= 9
Ahora crea una nueva variable, llamada frase, que contenga un string embebiendo los valores de las variables. Ejemplo: -> Pepú tiene 9 años y vive en Madrid.
Puedes utilizar, document.write(‘texto a imprimir’) o un console.log(‘texto a imprimir por terminal’)
Cambia el valor de las variables y comprueba el resultado.
La estructura más utilizada en JavaScript y en la mayoría de lenguajes de programación es la estructura if. Se emplea para tomar decisiones en función de una condición.
Si la condición se cumple (es decir, si su valor es true) se ejecutan todas las instrucciones que se encuentran dentro del if.
Si la condición no se cumple (es decir, si su valor es false) no se ejecuta ninguna instrucción contenida en dentro del if y el programa continúa ejecutando el resto de instrucciones del script.
if(CONDICION){
SENTENCIAS A EJECUTAR
}
let usuarioPermiteMensajes = true ;
if (usuarioPermiteMensajes == true) {
alert (”Es la primera vez que se muestra”);
}
if / else
En el caso del ejemplo anterior, si cumplíamos la condición ejecutaba la sentencia, pero si no la cumplía la ignoraba siguiendo con el código siguiente.
Pero también podemos indicarle lo que tiene que hacer en caso de que no se cumpla dicha condición.
let nombre, edad;
nombre = “Pepe“
edad = 16;
if (edad<18){
document.write(’Vaya, ’ + nombre +’, eres menor de edad’);
}else{
document.write( nombre +” tu tienes mas de 18 años”);
}
Más de una condición
Antes hemos visto los operadores lógicos && , ||, esto lo podemos utilizar para poner más de una condición en la pregunta.
Imaginemos que queremos saber si alguien tiene mas de 18 años pero menos de 35, pues tendríamos que preguntar por las dos condiciones.
let edad = 36;
if( edad < 18 && edad > 35) {
alert(“está en la franja de edad“);
}else{
alert(“No está en la edad indicada“);
}
If / else anidados
En muchas ocasiones no queremos ejecutar una sentencia a partir de una sola condición, si no de varias. Por ejemplo supongamos que dependiendo de un tramo de edad queremos que lance un mensaje diferente.
Para ello tendremos que hacer varias preguntas aunque finalmente se ejecute una sola sentencia.
Ejercicios
Escribe un algoritmo en JavaScript que pregunte un número entero, y nos diga el número de cifras que tiene.
Hacer un programa que pida un número al usuario y indicar si ese número es par o impar.
Soluciones
Aunque existen varios métodos para introducir datos, ahora puede ayudarte del método prompt, lanzará una ventana en el navegador y asignará a uno variable el valor introducido.
let nombre = prompt(“Introduzca su nombre:”, ” ” ) document.write(“<H2>Bienvendio, “ + nombre + “</H2>”)
En caso de que queramos obtener un número, es necesarios «parsearlo», pues desde html siempre nos devolvera un dato de tipo texto. Esto lo podemos hacer utilizando la función parseInt()
let numero = prompt(“Introduzca su nombre:”, ” ” ); numero = parseInt(numero); document.write(“<H2>El numero es: “ + numero + “</H2>”)
Condicional ternario
Esta estructura esta desaconsejada y se considera un error a nivel de calidad del código.
Cuando queremos hacer un condicional con una sola sentencia también tenemos la opción de utilizar el ternario, aunque su uso no es muy aconsejado pues dificulta la lectura del código.
La estructura if…else se puede utilizar para realizar comprobaciones múltiples y tomar decisiones complejas. Sin embargo, si todas las condiciones dependen siempre de la misma variable, el código JavaScript resultante es demasiado redundante.
En estos casos, la estructura switch es la más eficiente, ya que está especialmente diseñada para manejar de forma sencilla múltiples condiciones sobre la misma variable. Su definición formal puede parecer compleja, aunque su uso es muy sencillo.
switch (condición) {
case valor1:
sentencia a ejecutar; break;
case valor2:
sentencia a ejecutar; break;
default:
sentencia por omisión;
}
Queremos indicar que día de la semana es. Si el día es 1 (lunes) sacar un mensaje indicándolo, si el día es 2 (martes) debemos sacar un mensaje distinto y así sucesivamente para cada día de la semana, menos en el 6 (sábado) y 7 (domingo) que queremos mostrar el mensaje .es fin de semana”. Para días mayores que 7 indicaremos que ese día no existe.
let day = 2
switch ((day+1) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
default:
day = "La semana solo tiene 7 días";
}
console.log(day);
En este ejemplo, la declaración switch evalúa el número de el día de la semana y asigna una cadena de texto a la variable day. La declaración break se utiliza para salir del bloque switch después de que se haya asignado un valor a day.
En este ejemplo, si el día de la semana actual no es ninguno de los casos enumerados, la variable day se asignará un mensaje a la variable.
Video Condicional Switch
For
La estructura for permite realizar repeticiones (también llamadas bucles) de una forma muy sencilla. Sintaxis: for(inicializacion; condicion; actualizacion) { … } La idea del funcionamiento de un bucle for es la siguiente: ”mientras la condición indicada se siga cumpliendo, repite la ejecución de las instrucciones definidas dentro del for. Además, después de cada repetición, actualiza el valor de las variables que se utilizan en la condición”.
Los bucles se usan a menudo para recorrer una serie de elementos, indexar un vector, contar algo, etc.. La palabra inglesa “for” se corresponde con la preposición española “para”. En concreto un bucle for, podría traducirse en pseudocódigo algo como: “para todos los elementos que cumplen cierta condición, realiza la sentencia del cuerpo del bucle, y tras cada iteración ejecuta ciertas actualizaciones”. Un ejemplo de un “para” lo tenemos también en el signo que se emplea en la notación matemática para formular teoremas.
Ejemplo:
Imprimir los números pares del 1 al 100 por la consola
for (let i = 1; i <= 100; i++) { if (i % 2 === 0) { console.log(i); } }
Video Condicional IF/ELSE
Existen variaciones del bucle for como el for-in. Estos resultan utiles para recorrer estructuras de datos como arrays u objetos. Este tipo de estructuras los estudiaremos mas adelante, pero veamos un ejemplo de como recorreriamos un string o cadena de texto.
const str = "hello";
for (const char of str) {
console.log(char);
}
Este código imprimirá cada carácter de la cadena "hello" en la consola: "h", "e", "l", "l" y "o".
While
La palabra “while” en inglés significa “mientras”. Es obvio que una estructura iterativa while contiene por tanto, una pregunta o condición de finalización del bucle del estilo “mientras ocurra tal condición continúa iterando”.
while (condicion){ <sentencia>; }
Dentro de las operaciones del bucle lo normal será encontrarse alguna sentencia que actualice la condición del bucle
Por ejemplo, para escribir un bucle que debe iterarse un número N fijo de veces usando un bucle while se debe recurrir a una variable que actúe de “contador”, y que se vaya incrementando dentro del cuerpo del bucle.
cont=0;
N=100;
while (i<N){
<operaciones a realizar>;
cont++;
}
Do While
La diferencia básica con el bucle while es que la prueba de condición es hecha al finalizar el ciclo, es decir las instrucciones se ejecutan cuando menos una vez porque primero ejecuta las instrucciones y al final evalúa la condición; También se le conoce por esta razón como ciclo de condición de salida. Su formato general es :
do { grupo cierto de instrucción(es); Instrucción(es) de rompimiento de ciclo; } while (condición);
Hasta ahora, asumimos que después de declarar una variable, su nombre podría usarse en todo el código del programa (es decir, el alcance de la variable es global). Esto no es del todo cierto: el alcance de una variable depende de dónde se declare. Desafortunadamente, para una buena comprensión del alcance de una variable, necesitamos aprender algunos elementos de programación más, como instrucciones o funciones condicionales, que se analizarán con detalle más adelante en el curso. Así que aquí nos limitaremos a la información básica y volveremos a este tema en diferentes partes del curso. Uno de los elementos básicos que influyen en el alcance de las variables es un bloque del programa.
Podemos separar el código de un programa en bloques. En los bloques que creamos usando llaves {}, hay un conjunto de instrucciones que, por alguna razón, deben tratarse de forma independiente. Los bloques suelen estar asociados a instrucciones condicionales, bucles o funciones. También podemos separar un bloque de un programa que no tenga nada en especial, simplemente eligiendo un determinado rango de instrucciones.
Es hora de seguir adelante para determinar qué está pasando realmente con estos alcances. Desafortunadamente, los alcances de las variables (y constantes) declaradas con let y const son ligeramente diferentes a las declaradas con var. Así que los discutiremos de forma independiente.
let y const
En JavaScript, la declaración let const se utiliza para declarar variables que tienen un alcance de bloque. Esto significa que la variable sólo está disponible dentro del bloque de código en el que se ha declarado, y no está disponible en ningún otro lugar del programa.
if (true) { let x = "hello"; console.log(x); // "hello" } console.log(x); // ReferenceError: x is not defined
En este ejemplo, la variable x se declara dentro del bloque de código del bloque if. Está disponible dentro del bloque y se puede acceder a ella en la primera línea de console.log(). Sin embargo, intentar acceder a x fuera del bloque de código del bloque if resulta en un error de referencia, ya que x no está definida en ese ámbito.
El alcance de bloque también se aplica a los bucles for y a otras estructuras de control de flujo. Por ejemplo:
for (let i = 0; i < 5; i++) { console.log(i); // 0, 1, 2, 3, 4 } console.log(i); // ReferenceError: i is not defined
En este ejemplo, la variable i se declara dentro del bloque de código del bucle for. Está disponible dentro del bucle y se puede acceder a ella en cada iteración. Sin embargo, intentar acceder a i fuera del bucle resulta en un error de referencia, ya que i no está definida en ese ámbito.
En resumen, el alcance de una variable declarada con let es el bloque de código en el que se ha declarado. Fuera de ese bloque, la variable no está disponible y se produce un error de referencia si se intenta acceder a ella.
var
la declaración var se utiliza para declarar variables. A diferencia de la declaración let, que tiene un alcance de bloque, las variables declaradas con var tienen un alcance de función o global.
Si se declara una variable con var dentro de una función, está disponible en toda la función. Por ejemplo:
function foo() { if (true) { var x = "hello"; } console.log(x); // "hello" }
En este ejemplo, la variable x se declara dentro del bloque de código del bloque if, pero está disponible en toda la función foo(). Esto se debe a que el alcance de una variable declarada con var es la función en la que se ha declarado.
Si se declara una variable con var fuera de una función, está disponible en todo el ámbito global. Por ejemplo:
var x = "hello";
function foo() {
console.log(x); // "hello"
}
En este ejemplo, la variable x se declara fuera de cualquier función, por lo que tiene un alcance global. Está disponible en todo el código del programa y se puede acceder a ella desde cualquier función.
Es importante tener en cuenta que el alcance de var puede dar lugar a comportamientos inesperados en algunos casos. Por ejemplo, si se declara una variable con var dentro de un bucle for, esta variable estará disponible en toda la función o el ámbito global, incluso después de que el bucle haya finalizado.
for (var i = 0; i < 5; i++) { // ... } console.log(i); // 5
En este ejemplo, la variable i se declara dentro del bucle for, pero está disponible en toda la función o el ámbito global. Esto puede dar lugar a comportamientos inesperados y es una de las principales razones por las que se recomienda utilizar let en lugar de var para declarar variables en JavaScript.
En resumen, el alcance de una variable declarada con var es la función o el ámbito global en el que se ha declarado. Esto puede dar lugar a comportamientos inesperados en algunos casos y se recomienda utilizar let en su lugar, que tiene un alcance de bloque más predecible.
let lista = [10,20];
lista.push(30); // añade al final
lista.pop(); // elimina último
lista.unshift(5); // añade al inicio
lista.shift(); // elimina primero
Buscar elementos
let numeros = [10,20,30];
numeros.includes(20); // true
numeros.indexOf(30); // 2
Convertir a texto
let colores = ["rojo","verde","azul"];
alert(colores.join(" - "));
Resultado:
rojo - verde - azul
Extraer partes
let datos = [1,2,3,4,5];
let sub = datos.slice(1,4); // [2,3,4]
slice no modifica el original.
Modificar el array
let datos = [1,2,3,4];
datos.splice(1,2); // elimina desde posición 1 → elimina 2 elementos
Resultado:
[1,4]
Video Arrays
Tabla completa de métodos importantes
Método
Qué hace
Ejemplo
length
Tamaño del array
[1,2].length
push(x)
Añade al final
arr.push(5)
pop()
Elimina último
arr.pop()
shift()
Elimina primero
arr.shift()
unshift(x)
Añade al inicio
arr.unshift(0)
includes(x)
Comprueba existencia
arr.includes(10)
indexOf(x)
Posición del valor
arr.indexOf(20)
join(sep)
Convierte a texto
arr.join(",")
slice(a,b)
Subarray sin modificar
arr.slice(1,3)
splice(a,b)
Modifica/elimina/añade
arr.splice(1,1)
reverse()
Invierte array
arr.reverse()
sort()
Ordena
arr.sort()
concat()
Une arrays
a.concat(b)
forEach()
Recorre array
arr.forEach(f)
map()
Transforma elementos
arr.map(f)
filter()
Filtra elementos
arr.filter(f)
find()
Encuentra elemento
arr.find(f)
Recorrer arrays
Método clásico
let numeros = [10,20,30];
for (let i = 0; i < numeros.length; i++) {
console.log(numeros[i]);
}
forEach
numeros.forEach(function(n) {
console.log(n);
});
map (transformar)
let dobles = numeros.map(n => n * 2);
filter (filtrar)
let mayores = numeros.filter(n => n > 15);
Arrays con objetos
let alumnos = [
{nombre:"Ana", nota:8},
{nombre:"Luis", nota:5}
];
console.log(alumnos[0].nombre);
Esto es el paso previo al JSON del backend → DOM
Conceptos clave
Los arrays pueden crecer dinámicamente
Pueden contener cualquier tipo
Son objetos (typeof array → "object")
map/filter/find son la base del JavaScript moderno
Ejercicios para alumnos
Ejercicio 1
Crear un array con 5 números y mostrar el tamaño.
Ejercicio 2
Añadir un número y eliminar el primero.
Ejercicio 3
Mostrar solo los números mayores que 10.
Ejercicio 4
Crear un array de nombres y convertirlos a mayúsculas con map.
Ejercicio 5
Crear un array de objetos alumno {nombre, nota} y mostrar solo los aprobados.
