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).

Veamos un ejemplo:

let contador;
console.log(contador); // -> undefined
{
    contador = 1;
    console.log(contador); // -> 1
}
contador = contador + 1;
console.log(contador); // -> 2

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.

Comencemos con un ejemplo simple:

var height = 180;
{
 var weight = 70;
    console.log(height); // -> 180
    console.log(weight); // -> 70  
}
console.log(height); // -> 180
console.log(weight); // -> 70

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.

Ejemplos:

var numero1 = 3;
var numero2 = 5;
resultado = numero1 > numero2; // Resultado = false
resultado = numero1 < numero2; // resultado = true
numero1 = 5;
numero2 = 5;
resultado = numero1 >= numero2; // Resultado = true
resultado = numero1 <= numero2; // Resultado = true
resultado = numero1 == numero2; // Resultado = true
resultado = numero1 != numero2; // Resultado = false
texto1 = “hola”;
texto2 = “hola”;
texto3 = “adios”;
resultado = texto1 == texto3; // Resultado = false
resultado = texto1 != texto2; // Resultado = false
resultado = texto3 >= texto2; // Resultado = false
numero1 = 001;
numero2 = 1;
resultado = numero1 === numero2; // Resultado = false
resultado = numero1 == numero2; // Resultado = true

Incrementos y decrementos

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.

1. Si en el mercado tenemos que 12 manzanas nos cuestan 3 euros, ¿cuánto nos costarían 17 manzanas?
2. Si tengo 37 euros ¿Cuántas manzanas me puedo comprar?.
3. 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.

Condicional IF

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

1. Escribe un algoritmo en JavaScript que pregunte un número entero, y nos diga el número de cifras que tiene.
2. 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.

Ejemplo:

(x ≥ y) ? alert(“elmayoresx”) : alert(“elmayoresy”);

Switch

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”.

let mensaje = ”Hola , estoy dentro de un bucle ”;

for(let i=0; i<5; i++){
        console.log(mensaje);
}

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);

Bloques de código

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.

{
    counter = 1;
 {
        console.log(counter); // -> 1
 }
}

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.

En JavaScript existen objetos integrados que forman parte del núcleo del lenguaje. No necesitas crearlos: ya existen y puedes usarlos directamente.

Los más importantes:

• Math → cálculos matemáticos
• Object → base de todos los objetos
• Array → colecciones de datos
• String → texto
• Date → fechas y tiempo

Acceso a propiedades y métodos

Se usa el operador punto (.)

Propiedad (dato)

miObjeto.miPropiedad

Método (acción)

miObjeto.miMetodo(param1, param2)
miObjeto.miMetodo()

Objeto Math

Sirve para realizar cálculos matemáticos. No se instancia.

alert(Math.random());

Genera número decimal entre 0 y 1

letnumero=Math.floor(Math.random() *10);
alert(numero);

Métodos principales de Math

Objeto String

Cuando creas texto, JavaScript crea un objeto String.

let texto="Hola mundo";
alert(texto.length);

Métodos principales de String

Objeto Array

Colecciones ordenadas de datos.

let numeros= [10,20,30];
numeros.push(40);

Métodos principales de Array

Objeto Object

Es la base de todos los objetos en JavaScript.

let persona= {nombre: "Ana",edad: 20};
alert(persona.nombre);

Métodos principales de Object

Objeto Date

El objeto Date representa fechas y tiempo. Internamente guarda milisegundos desde 1 enero 1970 (Unix Epoch).

let ahora = new Date();
alert(ahora);

Crear fechas

new Date()                      // Fecha actual
new Date("2025-12-25")          // Desde texto
new Date(2025, 0, 1)            // Año, mes(0-11), día

Métodos principales de Date

Ejemplo práctico Date

let ahora = new Date();

let mensaje =
  "Hoy es: " + ahora.toLocaleDateString() +
  "\nHora: " + ahora.toLocaleTimeString();

alert(mensaje);

Concepto clave

En JavaScript:

• Las propiedades describen
• Los métodos actúan

Ejemplo:

texto.length        → dato
texto.toUpperCase() → acción
fecha.getFullYear() → acción sobre el tiempo

Otros objetos disponibles en JavaScript

• JSON → traductor entre objetos y texto
• Map vs Object → Map está optimizado para colecciones dinámicas
• Set → evita duplicados automáticamente
• Promise → permite esperar resultados sin bloquear el programa
• RegExp → motor de búsqueda textual extremadamente potente
• Symbol → claves invisibles para evitar colisiones
• BigInt → números más allá del límite de Number

Ejemplos

JSON

let texto = '{"nombre":"Ana"}';
let obj = JSON.parse(texto);
alert(obj.nombre);

Map

let mapa = new Map();
mapa.set("usuario", "admin");
alert(mapa.get("usuario"));

Set

let mapa = new Map();
mapa.set("usuario", "admin");
alert(mapa.get("usuario"));

Promise (idea básica)

fetch("datos.json")
  .then(r => r.json())
  .then(datos => console.log(datos));

Ejercicios

Ejercicio 1

Mostrar un número aleatorio del 1 al 100.

Ejercicio 2

Crear un texto con tu nombre y mostrar:

• Longitud
• En mayúsculas
• Si contiene la letra «a»

Ejercicio 3

Crear un array con 3 números y:

• Añadir uno
• Mostrar tamaño
• Mostrar si contiene el número 5

Ejercicio 4

Mostrar:

• Año actual
• Mes actual
• Hora actual

Un array es una estructura que permite almacenar múltiples valores en una sola variable.

Puede contener:

• Números
• Texto
• Objetos
• Otros arrays
• Mezclas de todo (JavaScript no es quisquilloso)

Crear un array

let numeros= [10, 20, 30];

También:

letvacio= [];

O usando el constructor:

let lista=new Array(1,2,3);

Acceder a elementos

Los arrays empiezan en índice 0 (como casi todo en informática).

let colores = ["rojo", "verde", "azul"];

alert(colores[0]); // rojo
alert(colores[2]); // azul

Propiedad fundamental

let numeros = [1,2,3,4];
alert(numeros.length);

length → número de elementos

Métodos principales de Array

Añadir y eliminar

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

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.

Una función es un bloque de código reutilizable que ejecuta una tarea concreta.
Sirve para organizar, reutilizar y abstraer lógica.

Idea clave: no repitas código, encapsúlalo.

Ejemplo mental: una cafetera.
Entras agua + café → proceso → sale café.
La función hace exactamente eso, pero con datos.

2. Sintaxis básica

function nombreFuncion() {
    // código a ejecutar
}

Ejemplo:

function saludar() {
    console.log("Hola mundo");
}

La función no se ejecuta sola. Hay que llamarla:

saludar();

3. Funciones con parámetros

Los parámetros son datos que recibe la función.

function saludar(nombre) {
    console.log("Hola " + nombre);
}

saludar("Antonio");
saludar("Bea");

La función se adapta al dato. Eso es abstracción.

4. Retorno de valores (return)

Una función puede devolver un resultado.

function saludar(nombre) {
    console.log("Hola " + nombre);
}

saludar("Antonio");
saludar("Bea");

Sin return, la función devuelve undefined.

Concepto importante:
return termina la ejecución de la función.

5. Parámetros vs argumentos

• Parámetros → variables definidas en la función
• Argumentos → valores reales que se pasan al llamar

functionmultiplicar(x, y) {   // parámetrosreturnx*y;}multiplicar(4, 2);             // argumentos

6. Funciones que llaman a otras funciones

Las funciones pueden componer comportamiento.

function cuadrado(n) {
    return n * n;
}

function mostrarCuadrado(num) {
    let resultado = cuadrado(num);
    console.log(resultado);
}

mostrarCuadrado(5);

Esto es modularidad. Construir piezas pequeñas y combinarlas.

7. Funciones anónimas

Funciones sin nombre, normalmente guardadas en variables.

let saludar = function(nombre) {
    return "Hola " + nombre;
};

console.log(saludar("Carlos"));

8. Arrow functions (funciones flecha)

Forma moderna y compacta.

let sumar = (a, b) => {
    return a + b;
};

Si solo hay una línea:

let sumar = (a, b) => {
    return a + b;
};

Si solo hay un parámetro:

let cuadrado = n => n * n;

9. Ámbito (scope)

El scope define dónde existe una variable.

function prueba() {
    let x = 10;
    console.log(x);
}

prueba();
console.log(x); // ERROR

x solo vive dentro de la función.
Esto protege el programa de efectos colaterales.

10. Buenas prácticas

Nombres claros

Mal:

functionf(x) {}

Bien:

function calcularTotal(precio, iva) {}

Funciones pequeñas

Una función debe hacer una sola cosa.

Evitar repetir código

Si copias y pegas → necesitas una función.

11. Ejemplos prácticos

Calcular precio con IVA

function calcularPrecioConIVA(precio) {
    return precio * 1.21;
}

console.log(calcularPrecioConIVA(100));

Verificar si un número es par

function esPar(numero) {
    return numero % 2 === 0;
}

console.log(esPar(4));
console.log(esPar(7));

Convertir JSON recibido del backend (pensando en JEE)

function pintarUsuario(usuario) {
    console.log("Nombre: " + usuario.nombre);
    console.log("Email: " + usuario.email);
}

let json = {
    nombre: "Antonio",
    email: "antonio@email.com"
};

pintarUsuario(json);

Aquí empieza el puente hacia DOM + datos del servidor.

12. Ejercicios

1. Crear función que calcule el área de un rectángulo
2. Crear función que convierta grados Celsius a Fahrenheit
3. Crear función que reciba un nombre y devuelva: "Bienvenido <nombre>"
4. Crear función que reciba un array y devuelva la suma total