Introducción a JavaScript

Versión para imprimir.

por Gilberto Pacheco Gallegos

Instrucciones de navegación

1. Conceptos básicos

Versión para imprimir.

En esta lección se introducen el lenguaje de programación JavaScript y los conceptos básicos para realizar un pequeño programa.

A. JavaScript

  • Lenguaje de programación que cumple con las reglas del estándar ECMAScript, que está definido en el siguiente sitio, que es bastante técnico y solo para los más rudos: https://www.ecma-international.org/publications/standards/Ecma-262.htm.

  • En 2022, la versión más usada es la edición 6, del año 2015, pero algunos navegadores y servidores incorporan caracterísiticas más nuevas.

B. El tipo string

  • Representa texto en JavaScript.

  • La palabra string, es la traducción al inglés del término cadena.

  • JavaScript usa la codificación UTF-16 de Unicode, que está definida en https://unicode.org.

  • En JavaScript los textos se representan con secuencias de caracteres delimitadas por los siguientes símbolos:

    ' '

    El delimitador es el símbolo apóstrofo (').

    En su interior puedes poner cualquier caracter, excepto apóstrofo y salto de línea.

    " "

    El delimitador es el símbolo comillas (").

    En su interior puedes poner cualquier caracter, excepto comillas y salto de línea.

  • Para agregar un emoji desde Windows solo tienes que presionar la tecla con el logotipo de Windows al mismo tiempo que el punto ( Logotipo de Windows+. ) y aparece un cuadro de diálogo que te permite seleccionar un emoji.

Ejemplos

  • "Hola pp"

  • '😁¡¡¡¡A sus órdenes jefecita!!!!'

C. Cadena vacía

  • Cadena sin caracteres, Se escribe "" o ''.

D. El método console.log

  • Muestra textos separados por coma (,) en el dispositivo de salida de la aplicación.

  • Los textos del método se muestran sin los símbolos que los delimitan y separados por espacios.

  • A cada console.log le corresponde un renglón diferente.

Ejemplos

Instrucción Salida 
console.log("Hola pp");
 
Hola pp
 
console.log("ggg", "7!😁");
 
ggg 7!😁

E. Orden de ejecución

  • En cada renglón, las instrucciones se ejecutan de izquierda a derecha.

  • Los renglones de instrucciones se ejecutan de arriba para abajo.

  • Opcionalmente se puede poner el símbolo punto y coma (;) al final de una expresión; pero cuando se ponen 2 o más expresones en un mismo renglón, este símbolo es obligatorio para separarlas.

Ejemplo

console.log("p"); console.log("a")
console.log("u")

Salida.

p
a
u

  • En la próxima lección se explica con más detalle como funciona este código fuente.

F. Resumen

  • En esta lección se definieron los siguientes conceptos:

    • JavaScript

    • El tipo string

    • El método console.log

    • El orden de ejecución de instrucciones

2. Prueba de escritorio básica

Versión para imprimir.

console.log("p"); console.log("a")
console.log("u")

Salida

p
a
u

1. console.log("p")

Código

1console.log("p");   console.log("a")
  console.log("u")

Consola

1p

Explicación

  • Se muestra el texto p en la consola.

2. console.log("a")

Código

1console.log("p"); 2console.log("a")
  console.log("u")

Consola

1p
2a

Explicación

  • Se muestra el texto a en el siguiente renglón de la consola.

3. console.log("u")

Código

1console.log("p"); 2console.log("a")
3console.log("u")

Consola

1p
2a
3u

Explicación

  1. Se muestra el texto u en el siguiente renglón de la consola.

  2. Como no hay más instrucciones, termina la ejecución del programa.

3. Herramientas de apoyo

Versión para imprimir.

En esta lección se revisan herramientas útiles cuando se programa.

A. Depuración

B. Pseudocódigo

  • Especificación de un algoritmo usando texto informal parecido al lenguaje humano.

  • Los pseudocódigos normalmente se usan como apoyo en el desarrollo de aplicaciones de cómputo.

  • El siguiente pseudocódigo representa el ejemplo de la lección anterior.

    Algoritmo Ejemplo
       Escribir "p"
       Escribir "a"
       Escribir "u"
    FinAlgoritmo

C. Diagrama de flujo

  • Especificación de un algoritmo usando dibujos con características bien definidas.

  • Los diagramas de flujo normalmente se usan como apoyo en el desarrollo de aplicaciones de cómputo.

Ejemplo de diagrama de flujo
Diagrama de flujo del ejemplo de la lección anterior

D. PSeInt

E. Resumen

4. Variables

Versión para imprimir.

En esta lección se presenta el concepto de variable y sus características.

A. Identificador

  • Nombre que tiene un elemento de un programa y que no se puede repetir en ciertas partes del código.

Reglas que debe cumplir un identificador

  • Empezar con una letra (a – z o A – Z) con o sin acentos (á, ñ, por ejemplo), guion bajo (_) o $.

  • Los caracteres siguientes pueden ser cualquiera de los anteriores o dígitos (0 – 9).

  • Aunque JavaScript permite utilizar caracteres acentuados en los identificadores, algunas herramientas de desarrollo no manejan bien estos caracteres.

Ejemplos

  • _nombre
  • __nombre
  • Nombre24
  • _
  • $
  • n123k_$K
  • TaChido
  • serenoMoreno
  • $priv
  • $123
  • h54

Camel case

Aunque no es obligatorio, normalmente en JavaScript los identificadores se escriben en Camel Case, donde las mayúsculas se usan para simular el inicio de una palabra. Por ejemplo:

estasSonCuatroPalabras.

B. Variable

  • Lugar en en la memoria de la computadora donde se almacena un dato que puede cambiar durante la ejecución de un programa.

Declaración

Para usar una variable, primero hay que declararla con una instrucción como la siguiente: 

let miNombre = "pp";

  • Se declaran con let o con var, aunque se recomienda usar let.

  • Tienen asociado un nombre, con la estructura de un identificador y normalmente empieza con minúscula. En este caso, la variable se llama miNombre.

  • Tienen asociado un valor, que es un dato, el cual puede cambiar durante la ejecución del programa. En este caso el valor es "pp".

  • El operador de asignación (=) sirve para cambiar el valor de una variable, perdiendo el valor anterior. El operando del lado izquierdo siempre debe ser una variable.

  • Cuando el nombre de una variable no aparece a la izquierda del operador de asignación, se usa su valor.

Ejemplo

let miNombre = "pp"
console.log(miNombre)
miNombre = "qk"
console.log(miNombre)

Salida

pp
qk

C. Prueba de escritorio con una variable

Versión para imprimir.

let miNombre = "pp"
console.log(miNombre)
miNombre = "qk"
console.log(miNombre)

Salida

pp
qk

1. let miNombre = "pp"

Código

1let miNombre = "pp"
  console.log(miNombre)
  miNombre = "qk"
  console.log(miNombre)

Variables

1miNombre 1"pp"

Expresiones

Consola

Explicación

  • Se define y crea la variable miNombre en la memoria de la computadora con el valor "pp".

2. console.log(miNombre)

Código

1let miNombre = "pp"
2console.log(miNombre)
  miNombre = "qk"
  console.log(miNombre)

Variables

1miNombre 1"pp"

Expresiones

2miNombre → "pp"

Consola

2pp

Explicación

  • Muestra en consola el valor sin comillas de la variable miNombre que es pp.

3. miNombre = "qk"

Código

1let miNombre = "pp"
2console.log(miNombre)
3miNombre = "qk"
  console.log(miNombre)

Variables

1miNombre 1"pp"
3"qk"

Expresiones

2miNombre → "pp"

Consola

2pp

Explicación

  • Asigna a la variable miNombre el nuevo valor "pp". El valor anterior se descarta.

4. console.log(miNombre)

Código

1let miNombre = "pp"
2console.log(miNombre)
3miNombre = "qk"
4console.log(miNombre)

Variables

1miNombre 1"pp"
3"qk"

Expresiones

2miNombre → "pp"
4 miNombre → "qk"

Consola

2pp
4qk

Explicación

  • Muestra en consola el valor sin comillas de la variable miNombre que es qk.

  • Como no hay más instrucciones, termina la ejecución del programa.

5. Depura con JavaScript Tutor

Depura el código en JavaScript Tutor.

D. Prueba de escritorio con 2 variables

Versión para imprimir.

let m = "hola"
let x = "adios"
console.log(m)
console.log(x)
m = "gg"
x = m
console.log(m)
console.log(x)

Salida

hola
adios
gg
gg

1. let m = "hola"

Código

1let m = "hola"
  let x = "adios"
  console.log(m)
  console.log(x)
  m = "gg"
  x = m
  console.log(m)
  console.log(x)

Variables

1m 1"hola"

Expresiones

Consola

Explicación

  • Se define y crea la variable m en la memoria de la computadora con el valor "hola".

2. let x = "adios"

Código

1let m = "hola"
2let x = "adios"
  console.log(m)
  console.log(x)
  m = "gg"
  x = m
  console.log(m)
  console.log(x)

Variables

1m 1"hola"
2x 2"adios"

Expresiones

Consola

Explicación

  • Se define y crea la variable x en la memoria de la computadora con el valor "adios".

3. console.log(m)

Código

1let m = "hola"
2let x = "adios"
3console.log(m)
  console.log(x)
  m = "gg"
  x = m
  console.log(m)
  console.log(x)

Variables

1m 1"hola"
2x 2"adios"

Expresiones

3m → "hola"

Consola

3hola

Explicación

  • Muestra en consola el valor sin comillas de la variable m que es hola.

4. console.log(x)

Código

1let m = "hola"
2let x = "adios"
3console.log(m)
4console.log(x)
  m = "gg"
  x = m
  console.log(m)
  console.log(x)

Variables

1m 1"hola"
2x 2"adios"

Expresiones

3m → "hola"
4x → "adios"

Consola

3hola
4adios

Explicación

  • Muestra en consola el valor sin comillas de la variable x que es adios.

5. m = "gg"

Código

1let m = "hola"
2let x = "adios"
3console.log(m)
4console.log(x)
5m = "gg"
  x = m
  console.log(m)
  console.log(x)

Variables

1m 1"hola"
5"gg"
2x 2"adios"

Expresiones

3m → "hola"
4x → "adios"

Consola

3hola
4adios

Explicación

  • Asigna a la variable m el nuevo valor "gg". El valor anterior se descarta.

6. x = m

Código

1let m = "hola"
2let x = "adios"
3console.log(m)
4console.log(x)
5m = "gg"
6x = m
  console.log(m)
  console.log(x)

Variables

1m 1"hola"
5"gg"
2x 2"adios"
6"gg"

Expresiones

3m → "hola"
4x → "adios" 
6x = m
  x = "gg"

Consola

3hola
4adios

Explicación

  • Asigna a la variable x el valor de la variable m, que es "gg". El valor anterior se descarta.

7. console.log(m)

Código

1let m = "hola"
2let x = "adios"
3console.log(m)
4console.log(x)
5m = "gg"
6x = m
7console.log(m)
  console.log(x)

Variables

1m 1"hola"
5"gg"
2x 2"adios"
6"gg"

Expresiones

3m → "hola"
4x → "adios" 
6x = m
  x = "gg"
7m → "gg"

Consola

3hola
4adios
7gg

Explicación

  • Muestra en consola el valor sin comillas de la variable m que es gg.

8. console.log(m)

Código

1let m = "hola"
2let x = "adios"
3console.log(m)
4console.log(x)
5m = "gg"
6x = m
7console.log(m)
8console.log(x)

Variables

1m 1"hola"
5"gg"
2x 2"adios"
6"gg"

Expresiones

3m → "hola"
4x → "adios" 
6x = m
  x = "gg"
7m → "gg"
8x → "gg"

Consola

3hola
4adios
7gg
8gg

Explicación

  • Muestra en consola el valor sin comillas de la variable x que es gg.

  • Como no hay más instrucciones, termina la ejecución del programa.

9. Depura con JavaScript Tutor

Depura el código en JavaScript Tutor.

E. Textos y Variables

  • El texto de una cadena es fijo. Si en su interior aparece el nombre de una variable, no se modifica. Observa el siguiente ejemplo:

Ejemplo

let a = "hola"
console.log("a")

Salida

a

F. Constante

  • Es similar a una variable, pero su valor no puede cambiar una vez asignado.

  • Normalmente el nombre se escribe en mayúsculas, usando guión bajo (_) para separar palabras.

  • Se declaran con const.

Ejemplo

const PI_REDONDEADO = 3.14
console.log(PI_REDONDEADO)
console.log("PI_REDONDEADO")
PI_REDONDEADO = 9
console.log(PI_REDONDEADO);

Salida

3.14
PI_REDONDEADO

TypeError: Assignment to constant variable.

G. Variables duplicadas

  • Las variables o constantes declaradas en el mismo espacio no pueden tener el mismo nombre.

Ejemplo

let a = "Q1"
document.write(a)
const a = "Q2"
console.log(a)

Salida

SyntaxError: Identifier 'a' has already been declared

H. Variables no encontradas

  • Cuando tratas de usar una variable o una constante no definida, obtienes un mensaje de error y se aborta la ejecución del programa.

Ejemplo

let b = "BB"
console.log(B)

Salida

ReferenceError: B is not defined

I. La función question

  • Sirve para pedir datos.

  • JavaScript Tutor no permite programas que pidan datos.

  • El ejemplo que aparece después utiliza el sitio. https://gilpgnod.github.io/, que permite ejecutar y depurar programas que utilicen await question para pedir datos y await log para mostrar los datos cuando se trabaja de forma interactiva.

  • El ambiente Node.js, que sirve para desarrollar aplicaciones de consola, servidores web y programar dispositivos para IoT, puede usar la función await question, pero primero tienes que importarla de la librería readline y usarla de una forma un poco diferente a como trabajamos en este sitio.

Ejemplo

const nombre = await question("Nombre: ")
await log("Hola", nombre)

Revísalo en gilpgnod.

J. Proceso de información

  • El proceso de información es la manera en que normalmente se utilizan los datos en el software. Normalmente consta de 3 pasos que se ejecutan uno tras otro:

    1. Adquisición de datos
    Entrada de datos

    Obtener los datos que se van a procesar.

    2. Procesamiento de datos

    Aplicar un mecanismo de transformación a los datos para obtener resultados, también conocidos como datos de salida.

    3. Despliegue de resultados
    Salida de datos

    Mostrar los resultados obtenidos. En algunos casos los datos de salida se almacenan en dispositivos externos a una computadora.

K. Resumen

  • En esta lección se definieron los siguientes conceptos:

    • identificador

    • Variable

    • Constante

    • La función question

    • Proceso de información

5. Comentarios

Versión para imprimir.

En esta lección se presenta el concepto de variable y sus características.

A. Comentario

  • Sección de código fuente que no es procesada y normalmente explica partes de un programa para que se entendan mejor.

  • Normalmente se colocan en la línea inmediatamente antes del texto que explican, aunque también se colocan al final del renglón que explican.

B. Comentario de una línea

  • Empieza con el texto // y termina con el final de la línea.

  • Usan una sola línea hasta su final.

Ejemplo

// Muestra Hola pp
console.log("Hola", "pp")
console.log("t") //Muestra t

Salida

Hola pp
t

C. Prueba de escritorio con comentarios de una línea

Versión para imprimir.

// Muestra Hola pp
console.log("Hola", "pp")
console.log("t") //Muestra t

Salida

Hola pp
t

1. console.log("Hola", "pp")

Código

  // Muestra Hola pp
1console.log("Hola", "pp")
  console.log("t") // Muestra t

Consola

1Hola pp

Explicación

  • Se muestra el texto Hola pp en la consola.

2. console.log("t")

Código

  // Muestra Hola pp
1console.log("Hola", "pp")
2console.log("t") // Muestra t

Consola

1Hola pp
2t

Explicación

  • Se muestra el texto t en el siguiente renglón de la consola.

  • Como no hay más instrucciones, termina la ejecución del programa.

3. Depura con JavaScript Tutor

Depura el código en JavaScript Tutor.

D. Comentario de una o más líneas

  • Empieza con el texto /* y terminan con */.

  • Usan una o más líneas.

Ejemplo

 /* Muestra Hola pp */
 console.log("Hola", "pp")
 console.log("t")/*Muestra t*/
 /* Muestra
  * bb */
 console.log("bb")

Salida

Hola pp
t
bb

E. Prueba de escritorio con comentarios de una o más líneas

Versión para imprimir.

 /* Muestra Hola pp */
 console.log("Hola", "pp")
 console.log("t")/*Muestra t*/
 /* Muestra
  * bb */
 console.log("bb")

Salida

Hola pp
t
bb

1. console.log("Hola", "pp")

Código

  /* Muestra Hola pp */
1console.log("Hola", "pp")
  console.log("t")/*Muestra t*/
  /* Muestra
   * bb */
  console.log("bb")

Consola

1Hola pp

Explicación

Se muestra el texto Hola pp en la consola.

2. console.log("t")

Código

  /* Muestra Hola pp */
1console.log("Hola", "pp")
2console.log("t")/*Muestra t*/
  /* Muestra
   * bb */
  console.log("bb")

Consola

1Hola pp
2t

Explicación

  • Se muestra el texto t en el siguiente renglón de la consola.

3. console.log("bb")

Código

  /* Muestra Hola pp */
1console.log("Hola", "pp")
2console.log("t")/*Muestra t*/
  /* Muestra
   * bb */
3console.log("bb")

Consola

1Hola pp
2t
3bb

Explicación

  • Se muestra el texto bb en el siguiente renglón de la consola.

  • Como no hay más instrucciones, termina la ejecución del programa.

4. Depura con JavaScript Tutor

Depura el código en JavaScript Tutor.

F. Comentario JsDoc

Ejemplo

/**
 * Nombre del perro.
 * @type {string}
 */
const NOMBRE = "pp"

G. Resumen

  • En esta lección se definieron los siguientes conceptos:

    • Comentario de una línea

    • Comentario de una o más líneas

    • Comentario JsDoc

6. Bloques

Versión para imprimir.

En esta lección se presenta el concepto de bloques y sus características.

A. Bloque

  • Listas de 0 o más instrucciones encerradas entre llaves ({}).

  • Cuentan como una instrucción.

  • Se ejecutan siguiendo el mismo orden de ejecución de JavaScript.

  • Cuando en su interior se declara una variable con const o con let, solo existe dentro del bloque donde se declara.

  • Una vez terminada la ejecución del bloque, todas las variables declaradas con const o con let en su interior, son eliminadas.

  • Los bloques usan las variables o constantes declaradas fuera del bloque.

  • Las variables declaradas con const o con let dentro de un bloque ocultan a otras con el mismo nombre que estén declaradas fuera del bloque.

B. Depuración de bloques

const y = "z"
console.log(y)
{
 const x = "gg"
 console.log(x)
 console.log(y)
}
console.log(y)

Salida

z
gg
z
z

Depúralo en JavaScript Tutor.

C. Depuración de bloques con variables duplicadas

Las variables declaradas con const o con let dentro de un bloque ocultan a otras con el mismo nombre que estén declaradas fuera del bloque.

Ejemplo

const x = "p"
console.log(x)
{
 let x = "gg"
 console.log(x)
}
console.log(x)

Salida

p
gg
p

Depúralo en JavaScript Tutor.

D. Resumen

  • En esta lección se definió el concepto de bloque y sus características.

7. Booleanos y textos

Versión para imprimir.

En esta lección se presenta el tipo boolean y los operadores de comparación de textos.

A. El operador de igualdad de textos a === b

  • Devuelve true si los dos operandos representan el mismo texto, considerando mayúsculas y minúsculas; en otro caso, devuelve false.

Ejemplo

console.log("h" === "gh") //F
console.log("h" === "H")  //F
console.log("h" === "h")  //T

Salida

false
false
true

Depúralo en JavaScript Tutor.

B. El operador diferente de para textos a !== b

  • Devuelve true si los dos operandos representan textos diferentes, considerando mayúsculas y minúsculas; en otro caso, devuelve false.

Ejemplo

console.log("h" !== "gh") //T
console.log("h" !== "H")  //T
console.log("h" !== "h")  //F

Salida

true
true
false

Depúralo en JavaScript Tutor.

C. Resumen

  • En esta lección se definieron los siguientes conceptos:

    • El operador de igualdad de textos a === b

    • El operador diferente de para textos a !== b

8. if

Versión para imprimir.

En esta lección se presenta la estructura de control if.

A. La estructura de control if

  • Permite usar el resultado de una condición lógica para controlar si un grupo de instrucciones debe o no ejecutarse.

  • Una forma de escribir esta estructura es la siguiente:

    if (condición)
     instrucción

    La condición es una expresión que nos proporciona un resultado booleano.

  • Como un bloque de instrucciones se considera una instrucción, también podemos escribir de la siguiente forma:

    if (condición) {
     instrucciones
    }

  • En las siguientes diapositivas se explica el funcionamiento de esta estructura.

B. Cuando la condición de if es verdadera

  • Cuando la condición de if es verdadera, se realiza la instrucción o el bloque de instrucciones que la estructura tiene asociada.

  • Posteriormente se ejecutan las instrucciones que vengan después de la estructura.

Ejemplo

const fruta = "pera"
if (fruta === "pera") {
 console.log(
  "El que es 🍐, desespera.")
}
console.log("Tu fruta:", fruta)

Salida

El que es 🍐, desespera.
Tu fruta: pera

Depúralo en JavaScript Tutor.

C. Cuando la condición de if es falsa

  • Cuando la condición de if es false, se salta la instrucción o el bloque de instrucciones que la estructura tiene asociada.

  • Posteriormente se ejecutan las instrucciones que vengan después de la estructura.

Ejemplo

const fruta = "fresa"
if (fruta === "pera") {
 console.log(
  "El que es 🍐, desespera.")
}
console.log("Tu fruta:", fruta)

Salida

Tu fruta: fresa

Depúralo en JavaScript Tutor.

D. Resumen

  • La estructura if se puede resumir con la siguiente ilustración:

Funcionamiento de if
Funcionamiento de la estructura de control if

9. Programa con if

Versión para imprimir.

En esta lección se presenta el desarrollo de un programa que usa la estructura de control if.

A. Planteamiento del problema

  • Antes de empezar a programar, hay que organizar el trabajo, entender el problema a resolver y plantear una solución.

  • Hacer un programa que:

    1. Pida al usuario la fruta que prefiere.

    2. Si la fruta es pera, mostrar el mensaje:
      El que es 🍐, desespera.

    3. Mostrar la fruta introducida por el usuario.

B. Escenarios

  • Los escenarios son ejemplos con datos para mostrar el comportamiento que debe tener el programa.

  • Cuando el programa esté listo, se puede probar introduciendo los datos de entrada de cada escenario y el programa debe generar la salida correspondiente.

  • Imagína un diálogo en el cuál el programa inicia preguntando. Luego espera a que el usuario conteste y finalmente el programa muestra resultados.

Escenario: naranja

Programa:
¿Qué fruta prefieres?
Usuario:
naranja
Programa:
Tu fruta: naranja

Escenario: pera

Programa:
¿Qué fruta prefieres?
Usuario:
pera
Programa:
El que es 🍐, desespera.
Tu fruta: pera

Escenario: fresa

Programa:
¿Qué fruta prefieres?
Usuario:
fresa
Programa:
Tu fruta: fresa

C. Pseudocódigo

Algoritmo Frutas
  Escribir "¿Qué fruta prefieres?"
  Leer fruta
  Si fruta = "pera" Entonces
    Escribir "El que es pera, desespera"
  Fin Si
  Escribir "Tu fruta: " + fruta
FinAlgoritmo

D. Diagrama de flujo

Diagrama de flujo
Diagrama de flujo

E. Código fuente

const fruta =
 await question("¿Qué fruta prefieres? ")
if (fruta === "pera") {
 await log(
  "El que es 🍐, desespera.")
}
await log("Tu fruta:", fruta)

Depúralo en GilPGNod.

10. if-else

Versión para imprimir.

En esta lección se presenta la estructura de control if-else.

A. La estructura de control if-else

  • Permite usar el resultado de una condición lógica para controlar si uno de 2 grupos de instrucciones debe ejecutarse.

  • Una forma de escribir esta estructura es la siguiente:

    if (condición)
     instrucción1
    else
     instrucción2

    La condición es una expresión que nos proporciona un resultado booleano.

  • Como un bloque de instrucciones se considera una instrucción, también podemos escribir de la siguiente forma:

    if (condición) {
     instrucciónes1
    } else {
     instrucciónes2
    }

  • En las siguientes diapositivas se explica el funcionamiento de esta estructura.

B. Cuando la condición de if-else es verdadera

  • Cuando la condición de if es verdadera, se realiza la instrucción o el bloque de instrucciones que la estructura tiene después de la condición.

  • Posteriormente se ejecutan las instrucciones que vengan después de la estructura.

Ejemplo

const respuesta = "el aguacate";
if (respuesta === "el aguacate") {
 console.log("Bien.");
} else {
 console.log("Mal.");
}
console.log("Adios.")

Salida

Bien.
Adios.

Depúralo en JavaScript Tutor.

C. Cuando la condición de if-else es falsa

  • Cuando la condición de if es false, se realiza la instrucción o el bloque de instrucciones que la estructura tiene después de la palabra reservada else|.

  • Posteriormente se ejecutan las instrucciones que vengan después de la estructura.

Ejemplo

const respuesta = "el zacate";
if (respuesta === "el aguacate") {
 console.log("Bien.");
} else {
 console.log("Mal.");
}
console.log("Adios.")

Salida

Mal.
Adios.

Depúralo en JavaScript Tutor.

D. Resumen

  • La estructura if-else se puede resumir con la siguiente ilustración:

Funcionamiento de if-else
Funcionamiento de la estructura de control if-else

11. Programa con if-else

Versión para imprimir.

En esta lección se presenta el desarrollo de un programa que usa la estructura de control if-else.

A. Planteamiento del problema

  • Hacer un programa que muestre una adivinanza y pida al usuario que adivine; si adivina, muestra el mensaje Bien y si no, muestra Mal.

B. Escenarios

Escenario: el zacate

Programa:
Agua pasa por mi casa,
cate de mi corazón.
Adivina (en minúsculas):
Usuario:
el zacate
Programa:
Mal.
Adios.

Escenario: el aguacate

Programa:
Agua pasa por mi casa,
cate de mi corazón.
Adivina (en minúsculas):
Usuario:
el aguacate
Programa:
Acertaste.
Adios.

C. Pseudocódigo

Algoritmo adivinanza
  Escribir "Agua pasa por mi casa,"
  Escribir "cate de ni corazón."
  Escribir "Adivina (en minúsculas): "
  Leer respuesta
  Si respuesta = "el aguacate" Entonces
    Escribir "Bien."
  SiNo
    Escribir "Mal."
  Fin Si
  Escribir "Adios."
FinAlgoritmo

D. Diagrama de flujo

Diagrama de flujo
Diagrama de flujo

E. Código fuente

const respuesta = await question(
 `Agua pasa por mi casa
cate de mi corazón.
Adivina (en minúsculas): `);
if (respuesta === "el aguacate") {
 await log("Bien.");
} else {
 await log("Mal.");
}
await log("Adios.")

Depúralo en GilPGNod.

12. Condicional múltiple

Versión para imprimir.

En esta lección se presenta la estructura de control condicional múltiple.

A. La estructura de control condicional múltiple

  • Usa 2 o más estructuras if unidas por palabras reservadas else.

  • Al revisar las condiciones una por una, desde el inicio, se ejecuta únicamente la primera instrucción o bloque de instrucciones cuya condición sea verdadera.

  • Posteriormente se ejecutan las instrucciones que vengan después de la estructura.

  • Una forma de escribir esta estructura es la siguiente:

    if (condición1)
     instrucción1
    else if (condición2)
     instrucción2
    else if (condición3)
     instrucción3

  • También podemos escribir de la siguiente forma:

    if (condición1) {
     instrucciones1
    } else if (condición2) {
     instrucciones2
    } else if (condición3) {
     instrucciones3
    }

  • En las siguientes diapositivas se ejemplifica el funcionamiento de esta estructura.

B. Cuando la primera condición de una condicional múltiple es verdadera

const respuesta = "1"
if (respuesta === "1") {
 console.log("Ariana Grande.")
} else if (respuesta === "2") {
 console.log("Bad Bunny.")
}
console.log("Adios.")

Salida

Ariana Grande.
Adios.

Depúralo en JavaScript Tutor.

C. Cuando una condición de en medio de una condicional múltiple es la primera verdadera

const respuesta = "2"
if (respuesta === "1") {
 console.log("Ariana Grande.")
} else if (respuesta === "2") {
 console.log("Bad Bunny.")
}
console.log("Adios.")

Salida

Bad Bunny.
Adios.

Depúralo en JavaScript Tutor.

D. Cuando todas las condiciones de una condicional múltiple son falsas

const respuesta = "3"
if (respuesta === "1") {
 console.log("Ariana Grande.")
} else if (respuesta === "2") {
 console.log("Bad Bunny.")
}
console.log("Adios.")

Salida

Adios.

Depúralo en JavaScript Tutor.

E. Resumen

  • La estructura de control condicional múltiple se puede resumir con la siguiente ilustración:

Funcionamiento de condicional múltiple
Funcionamiento de la estructura de control condicional múltiple

13. Programa con condicional múltiple

Versión para imprimir.

En esta lección se presenta el desarrollo de un programa que usa la estructura de control condicional múltiple.

A. Planteamiento del problema

  • Hacer un programa que pida al usuario un género musical y recomiende un artista de ese género.

B. Escenarios

Escenario: reguetón

Programa:
Recomiendo artistas por género.
Selecciona:
1 Pop
2 Reguetón
Introduce número:
Usuario:
2
Programa:
Bad Bunny.
Adios.

Escenario: pop

Programa:
Recomiendo artistas por género.
Selecciona:
1 Pop
2 Reguetón
Introduce número:
Usuario:
1
Programa:
Ariana Grande.
Adios.

Escenario: otro

Programa:
Recomiendo artistas por género.
Selecciona:
1 Pop
2 Reguetón
Introduce número:
Usuario:
p
Programa:
Adios.

C. Pseudocódigo

Algoritmo recomienda
  Escribir "Recomiendo artistas por género."
  Escribir "Selecciona:"
  Escribir "1 Pop"
  Escribir "2 Reguetón"
  Escribir "Introduce número:"
  Leer respuesta
  Si respuesta = "1" Entonces
    Escribir "Ariana Grande"
  SiNo
    Si respuesta = "2" Entonces
      Escribir "Bad Bunny."
    Fin Si
  Fin Si
  Escribir "Adios."
FinAlgoritmo

D. Diagrama de flujo

Diagrama de flujo
Diagrama de flujo

E. Código fuente

const respuesta = await question(
 `Recomiendo artistas por género.
Selecciona:
1 - Pop
2 - Reguetón
Introduce número: `)
if (respuesta === "1") {
 await log("Ariana Grande.")
} else if (respuesta === "2") {
 await log("Bad Bunny.")
}
await log("Adios.")

Depúralo en GilPGNod.

14. Condicional múltiple con else

Versión para imprimir.

En esta lección se presenta la estructura de control condicional múltiple con else.

A. La estructura de control condicional múltiple con else

  • Usa 2 o más estructuras if unidas por palabras reservadas else y al final hay una instrucción o bloque de instrucciones unida con else.

  • Al revisar las condiciones una por una, desde el inicio, se ejecuta únicamente la primera instrucción o bloque de instrucciones cuya condición sea verdadera.

  • Si ninguna condición es verdadera, se elecuta la instrucción o bloque de instrucciones del último else.

  • Posteriormente se ejecutan las instrucciones que vengan después de la estructura.

  • Una forma de escribir esta estructura es la siguiente:

    if (condición1)
     instrucción1
    else if (condición2)
     instrucción2
    else if (condición3)
     instrucción3
    else
     instrucción4

  • También podemos escribir de la siguiente forma:

    if (condición1) {
     instrucciones1
    } else if (condición2) {
     instrucciones2
    } else if (condición3) {
     instrucciones3
    } else {
     instrucciones4
    }

  • En las siguientes diapositivas se ejemplifica el funcionamiento de esta estructura.

B. Cuando la primera condición de una condicional múltiple con else es verdadera

const respuesta = "1"
if (respuesta === "1") {
 console.log("Ariana Grande.")
} else if (respuesta === "2") {
 console.log("Bad Bunny.")
} else {
 console.log("Opción incorrecta.")
}
console.log("Adios.")

Salida

Ariana Grande.
Adios.

Depúralo en JavaScript Tutor.

C. Cuando una condición de en medio de una condicional múltiple con else es la primera verdadera

const respuesta = "2"
if (respuesta === "1") {
 console.log("Ariana Grande.")
} else if (respuesta === "2") {
 console.log("Bad Bunny.")
} else {
 console.log("Opción incorrecta.")
}
console.log("Adios.")

Salida

Bad Bunny.
Adios.

Depúralo en JavaScript Tutor.

D. Cuando todas las condiciones de una condicional múltiple con else son falsas

const respuesta = "3"
if (respuesta === "1") {
 console.log("Ariana Grande.")
} else if (respuesta === "2") {
 console.log("Bad Bunny.")
} else {
 console.log("Opción incorrecta.")
}
console.log("Adios.")

Salida

Opción incorrecta.
Adios.

Depúralo en JavaScript Tutor.

E. Resumen

  • La estructura de control condicional múltiple con else se puede resumir con la siguiente ilustración:

Funcionamiento de condicional múltiple
Funcionamiento de la estructura de control condicional múltiple con else

15. Programa con condicional múltiple con else

Versión para imprimir.

En esta lección se presenta el desarrollo de un programa que usa la estructura de control condicional múltiple con else.

A. Planteamiento del problema

  • Hacer un programa que pida al usuario un género musical y recomiende un artista de ese género; si no tiene recomendaciones para dicho género, que muestre un mensaje indicando esta situación.

B. Escenarios

Escenario: reguetón

Programa:
Recomiendo artistas por género.
Selecciona:
1 Pop
2 Reguetón
Introduce número:
Usuario:
2
Programa:
Bad Bunny.
Adios.

Escenario: pop

Programa:
Recomiendo artistas por género.
Selecciona:
1 Pop
2 Reguetón
Introduce número:
Usuario:
1
Programa:
Ariana Grande.
Adios.

Escenario: otro

Programa:
Recomiendo artistas por género.
Selecciona:
1 Pop
2 Reguetón
Introduce número:
Usuario:
p
Programa:
Opción incorrecta.
Adios.

C. Pseudocódigo

Algoritmo recomienda
  Escribir "Recomiendo artistas por género."
  Escribir "Selecciona:"
  Escribir "1 Pop"
  Escribir "2 Reguetón"
  Escribir "Introduce número:"
  Leer respuesta
  Si respuesta = "1" Entonces
    Escribir "Ariana Grande"
  SiNo
    Si respuesta = "2" Entonces
      Escribir "Bad Bunny."
    SiNo
      Escribir "Opción incorrecta."
    Fin Si
  Fin Si
  Escribir "Adios."
FinAlgoritmo

D. Diagrama de flujo

Diagrama de flujo
Diagrama de flujo

E. Código fuente

const respuesta = await question(
 `Recomiendo artistas por género.
Selecciona:
1 - Pop
2 - Reguetón
Introduce número: `)
if (respuesta === "1") {
 await log("Ariana Grande.")
} else if (respuesta === "2") {
 await log("Bad Bunny.")
} else {
 await log("Opción incorrecta.")
}
await log("Adios.")

Depúralo en GilPGNod.

16. Operadores de texto

Versión para imprimir.

En esta lección se presentan operadores de texto.

A. El tipo number

  • Representa números en JavaScript.

  • En JavaScript se usa el estándar IEEE 754 y en realidad son límites.

  • Incluye a los números que llevan punto decimal, como podrían ser -1.8, 1.0, 0.999999999999999999999999 o 801.002.

  • Incluye a los números enteros como 1, 2, 101.

  • El valor NaN representa valores que no son un número; por ejemplo, los resultados de 0 / 0 y Math.sqrt(-1) (la raíz cuadrada de -1).

Temas por Investigar

  • Representación de números en notación científica.

B. El operador de concatenación a + b

  • Cuando uno de los 2 operandos del operador + es string, se convierten los 2 operandos en texto y se juntan.

Ejemplo

console.log("ab" + '$ h') //ab$ h
console.log("gg" + 2)     //gg2
console.log(true + "gg")  //truegg

C. El operador de concatenación con asignación a += b

  • Equivale a

    a = a + x;

    pero se ejecuta más rápido.

  • Nota que el primer operando debe ser una variable.

Ejemplo

let c = "h"
const D = "."
c += "gg" // c ➝ "hgg"
console.log(c);
c += 2    // c ➝ "hgg2"
console.log(c);
c += D    // c ➝ "hgg2."
console.log(c)

Salida

hgg
hgg2
hgg2.

Depúralo en JavaScript Tutor.

D. Plantilla de texto

  • Secuencia de caracteres delimitadas por el símbolo acento invertido (`), que se genera con Alt Gr+} en el teclado latinoamericano.

  • En su interior puedes poner cualquier caracter, excepto acento invertido.

  • Puede incluir saltos de línea.

  • En su interior puedes poner la secuencia ${}, que permite poner en el interior de las llaves una expresión, cuyo resultado convertido a texto sustituye a toda esta secuencia.

Ejemplo

const TT = `bb`
const T = 2
/* Muestra: Ejemplo
de bb*/
console.log(`Ejemplo
de ${TT}`)
/* Muestra: 288
de bb yy*/
console.log(`${T + "8"}8
de ${TT} yy`)

Salida

Ejemplo
de bb
288
de bb yy

Depúralo en JavaScript Tutor.

E. El operador menor que a < b

  • Representa el orden natural de los datos. Si el valor a la izquierda va antes que el de la derecha, el resultado es true; en otro caso es false.

  • Entre 2 caracteres, el que tenga el menor código Unicode es el menor.

  • Entre 2 textos, el que aparezca primero en el diccionario es el menor.

  • En el ejemplo que sigue, el orden natural es:

    "0" < "A" < "a" < "aa" < "ah" < "ai" < "b"

Ejemplo

console.log("0" < "A")   //T
console.log("A" < "a")   //T
console.log("a" < "b")   //T
console.log("ah" < "aa") //F
console.log("ah" < "ah") //F
console.log("ah" < "ai") //T

F. El operador mayor que a > b

  • Representa el orden invertido de los datos. Si el valor a la izquierda va después que el de la derecha, el resultado es true; en otro caso es false.

  • Entre 2 caracteres, el que tenga el menor código Unicode es el menor.

  • Entre 2 textos, el que aparezca primero en el diccionario es el menor.

  • En el ejemplo que sigue, el orden natural es:

    "aa" < "ah" < "ai"

Ejemplo

console.log("ah" > "aa") //T
console.log("ah" > "ah") //F
console.log("ah" > "ai") //F

G. El operador menor o igual que a <= b

  • En el ejemplo que sigue, el orden natural es:

    "aa" < "ah" < "ai"

console.log("ah" <= "aa") //F
console.log("ah" <= "ah") //T
console.log("ah" <= "ai") //T

H. El operador mayor o igual que a >= b

  • En el ejemplo que sigue, el orden natural es:

    "aa" < "ah" < "ai"

console.log("ah" >= "aa") //T
console.log("ah" >= "ah") //T
console.log("ah" >= "ai") //F

I. Resumen

  • Se revisaron los siguientes operadores sobre texto:

    • +

    • +=

    • `${}`

    • <

    • >

    • <=

    • >=

17. Operadores lógicos

Versión para imprimir.

En esta lección se presentan los operadores lógicos.

A. El operador lógico Y a && b

  • Es el operador Y en corto circuito.

  • Si a se evalúa a false, el resultado es a y no se evalúa b; de lo contrario, el resultado es b.

Ejemplo

console.log(false && true)  //F
console.log(false && false) //F
console.log(true && true)   //T
console.log(true && false)  //F

B. El operador lógico O a || b

  • Es el operador O en corto circuito.

  • Si a se evalúa a true, el resultado es a y no se evalúa b; de lo contrario, el resultado es b.

Ejemplo

console.log(true || true)   //T
console.log(true || false)  //T
console.log(false || true)  //T
console.log(false || false) //F

C. El operador lógico NO !a

  • Si a se evalúa a true, el resultado es false; de lo contrario, el resultado es true.

Ejemplo

console.log(!true)  //F
console.log(!false) //T

D. El operador ternario a ? b : c

  • Si a se evalúa a true, el resultado es b; de lo contrario, el resultado es c.

Ejemplo

console.log(true ? 3 : 8)  //3
console.log(false ? 3 : 8) //8

E. Resumen

Se revisaron los siguientes operadores lógicos:

  • &&

  • ||

  • !

  • ?:

18. do-while

Versión para imprimir.

En esta lección se presenta la estructura de control do-while.

A. La estructura de control do-while

  • Usa la palabra reservada do seguida de una instrucción o bloque de instrucciones, seguida por la palabra reservada while, finalizando con una condición.

  • Una forma de escribir esta estructura es la siguiente:

    do
     instrucción
    while (condición)

  • También podemos escribir de la siguiente forma:

    do {
     instrucciones
    } while (condición)

  • Para ejecutar, se siguen estos pasos:

    1. Se ejecuta la instrucción o bloque de instrucciones.

    2. Se evalúa la condición.

    3. Si la condición y si evalúa a false, se termina el ciclo y se continúa con las instrucciones que sigan después de la estructura; pero si evalúa a true, se regresa al punto 1 para ejecutar otra vez el bloque de instrucciones y luego se pasa al punto 2 para evaluar la condición, para después ejecutar otra vez este paso y las instrucciones aquí indicadas.

  • El bloque de instrucciones se ejecuta al menos una vez.

  • En la siguiente diapositiva se ejemplifica el funcionamiento de esta estructura.

B. Ejemplo de do-while

let respuesta = ""
do {
 respuesta += "h"
 console.log(respuesta)
} while (respuesta !== "hh")
console.log("Adios.")

Salida

h
hh
Adios.

Depúralo en JavaScript Tutor.

C. Resumen

  • La estructura de control do-while se puede resumir con la siguiente ilustración:

Funcionamiento de condicional múltiple
Funcionamiento de la estructura de control do-while

19. Programa con do-while

Versión para imprimir.

En esta lección se presenta el desarrollo de un programa que usa la estructura de control do-while.

A. Planteamiento del problema

  • Hacer un programa que pida de forma repetida al usuario seleccionar un género musical de una lista de opciones, mientras la opción seleccionada no sea ninguna de las opciones válidas.

B. Escenarios

Escenario: reguetón

Programa:
Selecciona:
1 Pop
2 Reguetón
Introduce número:
Usuario:
2
Programa:
Adios.

Escenario: pop

Programa:
Selecciona:
1 Pop
2 Reguetón
Introduce número:
Usuario:
1
Programa:
Adios.

Escenario: otro

Programa:
Selecciona:
1 Pop
2 Reguetón
Introduce número:
Usuario:
p
Programa:
Selecciona:
1 Pop
2 Reguetón
Introduce número:
Usuario:
3
Programa:
Selecciona:
1 Pop
2 Reguetón
Introduce número:
Usuario:
2
Programa:
Adios.

C. Pseudocódigo

Algoritmo valida
  Repetir
    Escribir "Selecciona:"
    Escribir "1 Pop"
    Escribir "2 Reguetón"
    Escribir "Introduce número:"
    Leer respuesta
  Hasta Que respuesta = "1" o respuesta = "2"
  Escribir "Adios."
FinAlgoritmo

D. Diagrama de flujo

Diagrama de flujo
Diagrama de flujo

E. Código fuente

let respuesta = "";
do {
 respuesta = await question(
  `Selecciona:
1 - Pop
2 - Reguetón
Introduce número: `)
} while (respuesta !== "1"
 && respuesta !== "2")
await log("Adios.")

Depúralo en GilPGNod.

20. Más números

Versión para imprimir.

En esta lección se presentan operadores numéricos.

A. Recta numérica

Imagen de la recta numérica

Los números a la izquierda son menores que los de la derecha.

0

Es el centro de la recta.

Number.MIN_VALUE

Es el valor positivo más cercano a 0; aproximadamente 5 × 10-324

-Number.MIN_VALUE

Es el valor negativo más cercano a 0; aproximadamente -5 × 10-324.

Number.MAX_SAFE_INTEGER

El entero más positivo n para el cual n y n + 1 se pueden representar como un número exacto. Su valor es 9007199254740991.

Number.MIN_SAFE_INTEGER

El entero más negativo n para el cual n y n - 1 se pueden representar como un número exacto. Su valor es -9007199254740991.

Number.MAX_VALUE

Es el valor numérico finito más positivo, aproximadamente 1.7976931348623157 × 10308.

-Number.MAX_VALUE

Es el valor numérico finito más negativo, aproximadamente -1.7976931348623157 × 10308.

Number.POSITIVE_INFINITY

Representa a todos los valores mayores que Number.MAX_VALUE.

Number.NEGATIVE_INFINITY

Representa a todos los valores menores que -Number.MAX_VALUE.

B. Operadores aritméticos

// Suma
console.log(5 + 2)  // 7
// Resta
console.log(5 - 2)  // 3
// Multiplicación
console.log(5 * 2)  //10
// Potencia
console.log(5 ** 2) //25
// División
console.log(5 / 2)  // 2.5
// Módulo o residuo
console.log(5 % 2)  // 1

C. Operadores aritméticos con asignación

  • Aparte del operador de asignación (=), hay otros operadores que permiten cambiar el valor de una variable.

Ejemplo

let b = 4
const d = 5
b = d * 2 // b === 10
console.log(b)
b += d // b = b + d; b === 15
console.log(b)
b -= 2 // b = b - 2; b === 13
console.log(b)
b *= 3 // b = b * 3; b === 39
console.log(b)
b /= 3 // b = b / 3; b === 13
console.log(b)
b %= 5 // b = b % 5; b === 3
console.log(b)
b **= 2 // b = b ** 2; b === 9
console.log(b)

Revísalo en gilpgnod.

D. Los operadores de incremento y decremento

  • También hay operadores de incremento y decremento en 1, pero son algo truculentos; es mejor usarlos solos, sin combinarlos con otros operadores.

Ejemplo

let z = 0
console.log(z) // 0
// Incremento. Aumenta z en 1.
z++
// z === 1
console.log(z) // 1
// Decremento. Disminuye z en 1.
z--
// z === 0
console.log(z) // 0

Revísalo en JavaScript Tutor.

E. Los operadores de igualdad y desigualdad

// Igual que (===)
console.log(3 === 3)  //true
console.log(3 === -3) //false
// Diferente de (!==)
console.log(3 !== 3)  // false
console.log(3 !== 8)  // true

F. Los operadores de orden

  • El operador binario < representa el orden natural de los datos. Si el valor a la izquierda va antes que el de la derecha, el resultado es true; en otro caso es false.

  • El operador binario > representa el orden invertido de los datos. Si el valor a la izquierda va después que el de la derecha, el resultado es true; en otro caso es false.

  • En el ejemplo que sigue, el orden natural es:

    0 < 3 < 8

// Menor que (<)
console.log(3 < 0) // false
console.log(3 < 3) // false
console.log(3 < 8) // true
// Mayor que (>)
console.log(3 > 0) // true
console.log(3 > 3) // false
console.log(3 > 8) // false

G. Los operadores de orden e igualdad

  • En el ejemplo que sigue, el orden natural es:
    0 < 3 < 8

// Menor o igual que (<=)
console.log(3 <= 0) // false
console.log(3 <= 3) // true
console.log(3 <= 8) // true
// Mayor o igual que (>=)
console.log(3 >= 0) // true
console.log(3 >= 3) // true
console.log(3 >= 8) // false

H. Precedencia de operadores

  • Aquí se muestra el orden en que se ejecutan los operadores cuando se combinan en una expresión. Los que aparecen primero son los que se ejecutan primero.

Orden Descripción Asociatividad Operador ejempo
1 agrupamiento n/a (…) (2 + 3)
2 miembro izquierda a derecha ….… a.b
…[…] a[0]
new n/a new …(…) new Clase(0)
invocación a función izquierda a derecha …(…) fn(x)
3 incremento sufijo n/a …++ a++
decremento sufijo n/a …-- a--
4 incremento prefijo n/a ++… ++a
decremento prefijo n/a --… --a
not lógico derecha a izquierda !… !a
not a nivel de bits derecha a izquierda ~… ~a
+ unario derecha a izquierda +… +a
negación unaria derecha a izquierda -… -a
typeof derecha a izquierda typeof … typeof a
void derecha a izquierda void … void a
delete derecha a izquierda delete … delete a.nombre
5 exponenciación n/a … ** … a ** b
6 multiplicación izquierda a derecha … * … a * b
división izquierda a derecha … / … a / b
residuo izquierda a derecha … % … a % b
7 suma izquierda a derecha … + … a + b
resta izquierda a derecha … - … a - b
8 corrimiento de bits izquierda a derecha … << … a << b
… >> … a >> b
… >>> … a >>> b
9 relacional izquierda a derecha … < … a < b
… <= … a <= b
… > … a > b
… >= … a >= b
in izquierda a derecha … in … "nombre" in a
instanceof izquierda a derecha … instanceof … a instanceof Array
10 igualdad izquierda a derecha … == … a == b
… != … a != b
… === … a === b
… !== … a !== b
11 and de bits izquierda a derecha … & … a & b
12 xor de bits izquierda a derecha … ^ … a ^ b
13 or de bits izquierda a derecha … | … a | b
14 and lógico izquierda a derecha … && … a && b
15 or lógico izquierda a derecha … || … a || b
16 condicional derecha a izquierda … ? … : … a ? b : c
17 asignación derecha a izquierda … = … a = b
… += … a += b
… -= … a -= b
… *= … a *= b
… /= … a /= b
… %= … a %= b
… <<= … a <<= b
… >>= … a >>= b
… >>>= … a >>>= b
… &= … a &= b
… ^= … a ^= b
… |= … a |= b
18 yield derecha a izquierda yield … yield a
19 coma izquierda a derecha … , … a , b

Fuentes:

I. De matemáticas a programación

  • Hay que aprender a estructurar las expresiones matemáticas en el lenguaje de programación.

Ejemplos de expresiones aritméticas expresadas en JavaScript

x = (-b + Math.sqrt(b**2 - 4*a*c)) / (2*a)

x = (-b + Math.sqrt(b**2 - 4*a*c)) / (2*a)

y = ((y2 - y1) / (x2 - x1)) * (x - x1) + y1

y = ((y2 - y1) / (x2 - x1)) * (x - x1) + y1

Temas por Investigar

  • El objeto Math.

J. Resumen

Se revisaron los siguientes operadores sobre texto:

  • +

  • +=

  • `${}`

  • <

  • >

  • <=

  • >=

21. while

Versión para imprimir.

En esta lección se presenta la estructura de control while.

A. La estructura de control while

  • Usa la palabra reservada while, seguida con una condición, seguida de una instrucción o bloque de instrucciones.

  • Una forma de escribir esta estructura es la siguiente:

    while (condición)
     instrucción

  • También podemos escribir de la siguiente forma:

    while (condición) {
     instrucción
    }

  • Para ejecutar, se siguen estos pasos:

    1. Se evalúa la condición. Si el resultado es false, se termina el ciclo y se continúa con las instrucciones que sigan después de la estructura; pero si evalúa a true, pasa al siguiente punto para ejecutar la instrucción o bloque de instrucciones.

    2. Se ejecuta la instrucción o bloque de instrucciones.

    3. Regresa a punto 1 para revisar la condición.

  • Es posible que la instrucción o bloque de instrucciones no se ejecute.

  • En las siguientes diapositivas se ejemplifica el funcionamiento de esta estructura.

B. Ejemplo de while ascendente

let i = 1
while (i <= 3) {
 console.log(i)
 i++
}
console.log("Adios.")

Salida

1
2
3
Adios.

Revísalo en JavaScript Tutor.

C. Ejemplo de while ascendente de 2 en 2

let i = 0
while (i < 6) {
 console.log(i)
 i += 2
}
console.log("Adios.")

Salida

0
2
4
Adios.

Revísalo en JavaScript Tutor.

D. Ejemplo de while descendente

let a = 2
while (a > 0) {
 console.log(a)
 a--
 console.log(a)
}
console.log("Adios.")

Salida

2
1
1
0
Adios.

Revísalo en JavaScript Tutor.

E. Ejemplo de while descendente de 2 en 2

let a = 6
while (a > 0) {
 console.log(a)
 a -= 2
}
console.log("Adios.")

Salida

6
4
2
Adios.

Revísalo en JavaScript Tutor.

F. Ejemplo de while cuyas instrucciones no se ejecutan

let i = 8
while (i > 8) {
 i--
 console.log(i)
}
console.log("Adios.")

Salida

Adios.

Revísalo en JavaScript Tutor.

G. Ejemplo de while descendente mal diseñado

let i = 1
while (i <= 3) {
 console.log(i)
 i--
}
console.log("Adios.")

Depúralo en GilPG Nod. Recuerda hace clic derecho del mouse y luego inspeccionar, antes de ejecutar.

H. Ejemplo de while ascendente mal diseñado

let i = 2
while (i > 0) {
 console.log(i)
 i++
}
console.log("Adios.")

Depúralo en GilPG Nod. Recuerda hace clic derecho del mouse y luego inspeccionar, antes de ejecutar.

I. Resumen

  • La estructura de control while se puede resumir con la siguiente ilustración:

Funcionamiento de condicional múltiple
Funcionamiento de la estructura de control do-while

22. for

Versión para imprimir.

En esta lección se presenta la estructura de control for.

A. La estructura de control for

  • Puede escribirse de cualquiera de estas 2 formas:

    for (inicialización; condición; paso)
     instrucción


    for (inicialización; condición; paso) {
     instrucciones
    }

  • Equivale a la estructura de control:

    {
     inicialización;
     while (condición) {
      instrucciones
      paso
     }
    }

  • La sección de inicialización crea variables que solo existen durante la ejecución del ciclo for y se eliminan una vez terminado.

  • La sección de paso cambia el valor de las variables para que hacer que la condición esté cada vez más cerca de evaluar a false.

B. Ejemplo de for

console.log("Hola.")
for (let i = 1, j = 3;
 i <= 3;
 i++) {
 console.log(i + j)
}
console.log("Adios.")

Salida

Hola.
4
5
6
Adios.

Revísalo en GilPG Nod.

C. Resumen

  • La estructura de control for se puede resumir con la siguiente ilustración:

Funcionamiento de condicional múltiple
Funcionamiento de la estructura de control do-while

23. switch

Versión para imprimir.

En esta lección se presenta la estructura de control switch.

A. La estructura de control switch

  • El switch es una alternativa a la condicional múltiple que evalúa una expresión y si su resultado corresponde al valor que aparece después de la palabra reservada case, empieza a ejecutar las instrucciones que sigan después.

  • Una vez entrado en un caso, el switch continúa avanzando sin importar si invade otros casos, hasta encontrar la palabra reservada break, que nos saca de la estructura de control.

  • La siguiente figura representa el comportamiento de la estructura de control switch.

    switch

B. Ejemplo de switch

let genero = question(
 `Selecciona un género musical:
1 - Pop
2 - Reguetón
3 - Balada
4 - Mariachi
5 - Cumbia
6 - Tango
Introduce tu opción: `)
switch (genero) {
 case "1":
  console.log("Ariana Grande")
 case "3":
 case "4":
  console.log("Juan Gabriel")
  break
 case "5":
  console.log("Selena")
  break
 case "2":
  console.log("Bad Bunny")
}
console.log("Adios.")

Revísalo en GilPG Nod.

C. La estructura de control switch-default

El switch-default es una alternativa a la condicional múltiple con else, cuyo comportamiento es similar al del switch, donde default, es una etiqueta más, que atrae a todos los casos que no correspondan a ninguno de los case.

Una vez entrado en un caso, el switch continúa avanzando sin importar si invade otros casos, hasta encontrar la palabra reservada break, que nos saca de la estructura de control.

La siguiente figura representa el comportamiento de la estructura de control switch-default.

switch con default

D. Ejemplo de switch-default

let genero = question(
 `Selecciona un género musical:
1 - Pop
2 - Reguetón
3 - Balada
4 - Mariachi
5 - Cumbia
6 - Tango
Introduce tu opción: `)
switch (genero) {
 case "1":
  console.log("Ariana Grande")
 case "3":
 case "4":
  console.log("Juan Gabriel")
  break
 default:
  console.log(
   "De ese género no conozco.")
  break
 case "5":
  console.log("Selena")
  break
 case "2":
  console.log("Bad Bunny")
}
console.log("Adios.")

Revísalo en GilPG Nod.

E. Resumen

  • El switch es una alternativa a la condicional múltiple que evalúa una expresión y si su resultado corresponde al valor que aparece después de la palabra reservada case, empieza a ejecutar las instrucciones que sigan después.

  • El switch-default es una alternativa a la condicional múltiple con else, cuyo comportamiento es similar al del switch, donde default, es una etiqueta más, que atrae a todos los casos que no correspondan a ninguno de los case.

  • Una vez entrado en un caso, el switch continúa avanzando sin importar si invade otros casos, hasta encontrar la palabra reservada break, que nos saca de la estructura de control.

24. Funciones

Versión para imprimir.

En esta lección se presenta el concepto de función.

A. Función

  • Secuencia de instrucciones que tiene asociado un nombre.

  • El nombre de una función es un identificador.

  • Una función se declara de una forma parecida a la siguiente:

    function nombre() {
     instrucciones
    }

Ejecución de las instrucciones de una función.

  • Una función no se ejecuta ella misma.

  • Se usa una instrucción llamada invocación de función, que consiste en el nombre de la función, seguida de paréntesis; por ejemplo, si una función se llama saluda, para hacer que se ejecute, hay que colocar la instrucción
    saluda()

  • Antes de que una función se ejecute, se suspende lo que se estaba haciendo y se marca el punto donde se invocó, posteriormente, se ejecuta la función y al terminar, se regresa al punto de invocación y se continúa con la siguiente instrucción.

  • En JavaScript, las variables declarades en el mismo espacio que la declaración de una función, se pueden usar dentro de la función.

Ejemplo

let nombre = "pp";
saluda() // invoca a saluda.
/* Al terminar invocación
 * continúa aquí. */
console.log("adios")

/**
 * Definición de la función
 * saluda.
 */
function saluda() {
 console.log(nombre)
}

Salida

pp
adios

Depúralo en JavaScript Tutor.

B. Invocación más de una vez

let nombre = "pp";
saluda() // invoca a saluda.
/* Al terminar la primera
 * invocación continúa aquí. */
nombre = "qk"
saluda() // invoca a saluda.
/* Al terminar la segunda
 * invocación continúa aquí. */
console.log("adios")

/**
 * Definición de la función saluda.
 */
function saluda() {
 console.log(nombre)
}

Salida

pp
qk
adios

Depúralo en JavaScript Tutor.

C. Funciones que invocan funciones

function c1() {
 console.log("c1-1")
 c2()
 console.log("c1-2")
}
function c2() {
 console.log("c2")
}
console.log("global-1")
c2()
console.log("global-2")
c1()
console.log("global-3")

Salida

global-1
c2
global-2
c1-1
c2
c1-2
global-3

Depúralo en JavaScript Tutor.

D. Paso de parámetros

console.log("m1")
fn(3, -2)
/**
 * @param {number} a
 * @param {number} b
 */
function fn(a, b) {
 console.log(a + b)
}
console.log("3")

Salida

m1
1
3

Depúralo en JavaScript Tutor.

E. Funciones con expresiones en los parámetros

/**
 * @param {number} a
 * @param {number} b
 * @param {number} c
 */
function fn(a, b, c) {
 console.log(a + b * c)
}
const a = 3
fn(3 - 8, a, a * 2)
console.log("ggg")

Salida

13
ggg

Depúralo en JavaScript Tutor.

F. Funciones con valor de regreso

const x = fna(8, 5)
console.log(fna(4, 1))
console.log(x)
/**
 * @param {number} t
 * @param {number} bc
 */
function fna(t, bc) {
 console.log(t + bc * 2)
 return (1 + t * 8)
}

Salida

18
6
33
65

Depúralo en JavaScript Tutor.

G. Funciones flecha

const fx =
 () => console.log("hola")
const fy =
 (f) => console.log(f)
const fz = (a, b) => {
 console.log(a + b)
 return (a * b)
}
const fw = g => g + 1
fx()
console.log(fz(4, -15))
fy("mx")
console.log(fw(3))

Salida

hola
-11
-60
mx
4

Depúralo en JavaScript Tutor.

H. Recursividad

/**
 * @param {number} a
 * @param {number} b
 */
function fns(a, b) {
 if (a <= 0) {
  console.log("Devuelve", b)
  return (b)
 } else {
  console.
   log("Invoca:", a - 1, ", ", b)
  const ant = fns(a - 1, b)
  console.log("Devuelve:", ant + 1)
  return (ant + 1)
 }
}
console.log("Invoca: 2, 3")
console.log(fns(2, 3))

Salida

Invoca: 2, 3
Invoca: 1 ,  3
Invoca: 0 ,  3
Devuelve 3
Devuelve: 4
Devuelve: 5
5

Depúralo en JavaScript Tutor.

I. Resumen

  • En esta lección se definieron los siguientes conceptos:

    • Función.

    • Invocación de funciones más de una vez.

    • Funciones que invocan funciones.

    • Paso de parámetros.

    • Funciones con expresiones en los parámetros.

    • Funciones flecha.

    • Recursividad.

25. Objetos básicos

Versión para imprimir.

En esta lección se introduce el concepto de objeto y sus características básicas.

A. Objetos paso a paso

Referencia y objeto inicialmente
let tel = {}
Crea un objeto usando {}.
Controla con la referencia tel.
Agregamos manita a
tel.nombre = "pp"
Agrega la property nombre con el valor "pp" al objeto apuntado por tel. Es como agreggar una manita,
Agregamos manita b
tel.color = "marrón"
Agrega la property color con el valor "marrón" al objeto apuntado por tel.
Aprende a saludar
tel.saluda =
 () => console.log("Hola.")
Agrega la property saluda que es un método, al objeto apuntado por tel.

Property

  • Los datos y funciones asociados con un objeto en JavaScript reciben el nombre de property o propiedad.

  • Las funciones asociadas con un objeto se llaman método.

  • Los datos asociados con un objeto en general se llaman atributo o campo.

  • Las propiedades de un objeto al momento de diseño deben ser características directas del objeto, por ejemplo nombre. No es válido que describan características de otros objetos; por ejemplo, si un objeto es una película, no es válido ponerle el atributo nombreDelDirector.

Código

// Crea un objeto usando {}.
// Controla con la referencia tel.
let tel = {}
// Le pone propiedades.
tel.nombre = "pp"
tel.color = "marrón"
// Le pone un método.
tel.saluda =
 () => console.log("Hola.")
tel.saluda()
console.log(tel)
console.log(tel.nombre)
console.log(tel.color)
tel = null // Cuelga.
console.log(tel)

Salida

Hola.
{ nombre: 'pp', color: 'marrón', saluda: [Function] }
pp
marrón
null

Depúralo en JavaScript Tutor.

B. Literales de objeto

let tel1 = {
 saludo:
  /** @param {any} nombre */
  nombre => `Hola ${nombre}.`,
 nombre: "pp"
}
console.log(tel1)
let tel2 = tel1
let goles = 3, seg = 8
tel1 = {
 goles,
 despídete:
  () => console.log("Bye"),
 seguidores: seg
}
goles++
seg++
console.log(tel2.nombre)
tel1.despídete()

Salida

{ saludo: [Function], nombre: 'pp' }
pp
Bye

Depúralo en JavaScript Tutor.

C. Propiedades y métodos de string

const A = "Hola Mundo"
const B = " Ajua  "
console.log(A.length)
console.log(A.charAt(1))
console.log(A.endsWith("do"))
console.log(A.indexOf("o"))
console.log(A.indexOf("Mu"))
console.log(A.toUpperCase())
console.log(A.toLowerCase())
console.log(A.substring(2, 6))
console.log(A.substring(2))
console.log("h" + B + A)
console.log("h" + B.trim() + A)

Salida

10
o
true
1
5
HOLA MUNDO
hola mundo
la M
la Mundo
h Ajua  Hola Mundo
hAjuaHola Mundo

Depúralo en JavaScript Tutor.

D. Conversión a string

const A = true
const B = 8
console.log(A.toString())
console.log(B.toString())
console.log(B.toString(2))
console.log(B.toFixed(2))

Salida

true
8
1000
8.00

Depúralo en JavaScript Tutor.

E. Conversión de string a number

const a = "8.33"
const b = parseInt("8.33", 10)
console.log(b)
const c = parseInt("8", 10)
console.log(c)
const d = parseInt("1000", 2)
console.log(d)
const e = parseInt("F", 16)
console.log(e)
const f = parseInt("f", 16)
console.log(f)
const g = parseFloat("8.33")
console.log(g)

Salida

8
8
8
15
15
8.33

Depúralo en JavaScript Tutor.

F. Resumen

  • En esta lección se definieron los siguientes conceptos:

    • Creación de objetos paso a paso.

    • Literales de objeto.

    • Propiedades y métodos de string.

    • Conversión a string.

    • Conversión de string a number.

26. Clases

Versión para imprimir.

En esta lección se introduce el concepto clase.

A. class

Hormiga reina
class Cl1 {
 static saluda() {
  console.log(
   `Hola. Soy ${Cl1.nombre}.`)
 }
}
Cl1.nombre = "vl"
Cl1.seguidores = 3000
Cl1.saluda()

Salida

Hola. Soy vl.

Depúralo en JavaScript Tutor.

B. Prueba de escritorio con un objeto

Versión para imprimir.

class Cl01 {
 constructor(b) {
  this.a = b
 }
 mensaje(c) {
  console.log(c + this.a)
 }
}
const a = new Cl01(4)
a.mensaje(2)

Salida

6

1. class Cl01

Código

1 class Cl01 {
    constructor(b) {
     this.a = b
    }
    mensaje(c) {
     console.log(c + this.a)
    }
   }
   const a = new Cl01(4)
   a.mensaje(2)

Stack

1
Script
1Cl01 11

Heap

1
1: class
name Cl01

Explicación

  1. Se crea un registro de activación para el script.
  2. Se crea la clase Cl01 en el Heap.
  3. En el registro de activación del script se crea la referencia Cl01 que apunta a la clase Cl01.

2. new

Código

1 class Cl01 {
    constructor(b) {
     this.a = b
    }
    mensaje(c) {
     console.log(c + this.a)
    }
   }
   const a =2new Cl01(4)
   a.mensaje(2)

Stack

1
Script
1Cl01 11

Heap

1
1: class
name Cl01
2
2: Cl01

Explicación

3. Cl01(4)

Código

1 class Cl01 {
    constructor(b) {
     this.a = b
    }
    mensaje(c) {
     console.log(c + this.a)
    }
   }
   const a =2new3Cl01(4)
   a.mensaje(2)

Stack

1
Script
1Cl01 11
3congela

Heap

1
1: class
name Cl01
2
2: Cl01

Expresiones

3new Cl01(4)
  2   Cl01(4)

Explicación

  1. Se invoca el constructor.
  2. Se congela el registro de Script en el stack.
  3. En expresiones se indica el paso de parámetros. En vez de new se sustituye el id del objeto creado, que en este caso es 2.

4. constructor(b)

Código

1 class Cl01 {
4  constructor(b) {
     this.a = b
    }
    mensaje(c) {
     console.log(c + this.a)
    }
   }
   const a =2new3Cl01(4)
   a.mensaje(2)

Stack

1
Script
1Cl01 11
3congela
4
Cl01 (constructor)
4 this 4 2
4 b 4 4

Heap

1
1: class
name Cl01
2
2: Cl01

Expresiones

3new Cl01(4)
  2   Cl01(4)
4this Cl01(b)

Explicación

  1. Se crea el registro de activación para el constructor de Cl01.
  2. Se realiza el paso de parámetros.
    • El resultado de new, que en este caso es 2, se pasa a this.
    • El primer parámetro de la invocación, que es 4, se pasa al primer parámetro del constructor, que es b.

5. this.a = b

Código

1 class Cl01 {
4  constructor(b) {
5   this.a = b
    }
    mensaje(c) {
     console.log(c + this.a)
    }
   }
   const a =2new3Cl01(4)
   a.mensaje(2)

Stack

1
Script
1Cl01 11
3congela
4
Cl01 (constructor)
4 this 4 2
4 b 4 4

Heap

1
1: class
name Cl01
2
2: Cl01
5a 54

Expresiones

3new Cl01(4)
  2   Cl01(4)
4this Cl01(b)
5this.a = b
   2  .a = 4

Explicación

  • Se asigna el valor de la variable b en el registro de activación, a la variable a en el objeto apuntado por this.

6. }

Código

1 class Cl01 {
4  constructor(b) {
5   this.a = b
6  }
    mensaje(c) {
     console.log(c + this.a)
    }
   }
   const a =2new3Cl01(4)
   a.mensaje(2)

Stack

1
Script
1Cl01 11
3congela
4
Cl01 (constructor)
4 this 4 2
4 b 4 4
6 X devuelve 2.

Heap

1
1: class
name Cl01
2
2: Cl01
5a 54

Expresiones

3new Cl01(4)
  2   Cl01(4)
4this Cl01(b)
5this.a = b
   2  .a = 4

Explicación

7. new Cl01(4) → 2

Código

1 class Cl01 {
4  constructor(b) {
5   this.a = b
6  }
    mensaje(c) {
     console.log(c + this.a)
    }
   }
   const a =2new3Cl01(4)7→2
   a.mensaje(2)

Stack

1
Script
1Cl01 11
3congela
4
Cl01 (constructor)
4 this 4 2
4 b 4 4
6 X devuelve 2.
7 descongela 3 con 2

Heap

1
1: class
name Cl01
2
2: Cl01
5a 54

Expresiones

3new Cl01(4)
  2   Cl01(4)
4this Cl01(b)
5this.a = b
   2  .a = 4

Explicación

8. a = 2

Código

1 class Cl01 {
4  constructor(b) {
5   this.a = b
6  }
    mensaje(c) {
     console.log(c + this.a)
    }
   }
8 const a =2new3Cl01(4)7→2
   a.mensaje(2)

Stack

1
Script
1Cl01 11
3congela
4
Cl01 (constructor)
4 this 4 2
4 b 4 4
6 X devuelve 2.
7 descongela 3 con 2
8a 82

Heap

1
1: class
name Cl01
2
2: Cl01
5a 54

Expresiones

3new Cl01(4)
  2   Cl01(4)
4this Cl01(b)
5this.a = b
   2  .a = 4

Explicación

9. a.mensaje(2)

Código

1 class Cl01 {
4  constructor(b) {
5   this.a = b
6  }
    mensaje(c) {
     console.log(c + this.a)
    }
   }
8 const a =2new3Cl01(4)7→2
9 a.mensaje(2)

Stack

1
Script
1Cl01 11
3congela
4
Cl01 (constructor)
4 this 4 2
4 b 4 4
6 X devuelve 2.
7 descongela 3 con 2
8a 82
9congela

Heap

1
1: class
name Cl01
2
2: Cl01
5a 54

Expresiones

3new Cl01(4)
  2   Cl01(4)
4this Cl01(b)
5this.a = b
   2  .a = 4
9a.mensaje(2)
  2.mensaje(2)

Explicación

  1. Se invoca el método a.mensaje.
  2. Se congela el registro de Script en el stack.
  3. En expresiones se indica el paso de parámetros. Se sustituye el valor de a, que en este caso es la referencia 2.

10. mensaje(c) {

Código

1 class Cl01 {
4  constructor(b) {
5   this.a = b
6  }
10 mensaje(c) {
     console.log(c + this.a)
    }
   }
8 const a =2new3Cl01(4)7→2
9 a.mensaje(2)

Stack

1
Script
1Cl01 11
3congela
4
Cl01 (constructor)
4 this 4 2
4 b 4 4
6 X devuelve 2.
7 descongela 3 con 2
8a 82
9congela
10
Cl01.mensaje
10 this 10 2
10 c 10 2

Heap

1
1: class
name Cl01
2
2: Cl01
5a 54

Expresiones

3new Cl01(4)
  2   Cl01(4)
4this Cl01(b)
5this.a = b
   2  .a = 4
9a.mensaje(2)
  2.mensaje(2)
10this.mensaje(c)

Explicación

  1. Se crea el registro de activación para Cl01.mensaje.
  2. Se realiza el paso de parámetros.
    1. El valor de a, que en este caso es la referencia 2, se pasa a this.
    2. El primer parámetro de la invocación, que es 2, se pasa al primer parámetro del constructor, que es c.

11. c + this.a

Código

1 class Cl01 {
4  constructor(b) {
5   this.a = b
6  }
10 mensaje(c) {
     console.log(11c + this.a)
    }
   }
8 const a =2new3Cl01(4)7→2
9 a.mensaje(2)

Stack

1
Script
1Cl01 11
3congela
4
Cl01 (constructor)
4 this 4 2
4 b 4 4
6 X devuelve 2.
7 descongela 3 con 2
8a 82
9congela
10
Cl01.mensaje
10 this 10 2
10 c 10 2

Heap

1
1: class
name Cl01
2
2: Cl01
5a 54

Expresiones

3new Cl01(4)
  2   Cl01(4)
4this Cl01(b)
5this.a = b
   2  .a = 4
9a.mensaje(2)
  2.mensaje(2)
10this.mensaje(c)
11c + this.a
   2 + 4
     6

Explicación

12. console.log(c + this.a)

Código

1 class Cl01 {
4  constructor(b) {
5   this.a = b
6  }
10 mensaje(c) {
12  console.log(11c + this.a)
    }
   }
8 const a =2new3Cl01(4)7→2
9 a.mensaje(2)

Stack

1
Script
1Cl01 11
3congela
4
Cl01 (constructor)
4 this 4 2
4 b 4 4
6 X devuelve 2.
7 descongela 3 con 2
8a 82
9congela
10
Cl01.mensaje
10 this 10 2
10 c 10 2

Heap

1
1: class
name Cl01
2
2: Cl01
5a 54

Consola

12 6

Expresiones

3new Cl01(4)
  2   Cl01(4)
4this Cl01(b)
5this.a = b
   2  .a = 4
9a.mensaje(2)
  2.mensaje(2)
10this.mensaje(c)
11c + this.a
   2 + 4
     6

Explicación

13. }

Código

1 class Cl01 {
4  constructor(b) {
5   this.a = b
6  }
10 mensaje(c) {
12  console.log(11c + this.a)
13 }
   }
8 const a =2new3Cl01(4)7→2
9 a.mensaje(2)

Stack

1
Script
1Cl01 11
3congela
4
Cl01 (constructor)
4 this 4 2
4 b 4 4
6 X devuelve 2.
7 descongela 3 con 2
8a 82
9congela
10
Cl01.mensaje
10 this 10 2
10 c 10 2
13 X

Heap

1
1: class
name Cl01
2
2: Cl01
5a 54

Consola

12 6

Expresiones

3new Cl01(4)
  2   Cl01(4)
4this Cl01(b)
5this.a = b
   2  .a = 4
9a.mensaje(2)
  2.mensaje(2)
10this.mensaje(c)
11c + this.a
   2 + 4
     6

Explicación

14. Descongela y termina

Código

1 class Cl01 {
4  constructor(b) {
5   this.a = b
6  }
10 mensaje(c) {
12  console.log(11c + this.a)
13 }
   }
8 const a =2new3Cl01(4)7→2
9 a.mensaje(2)14

Stack

1
Script
1Cl01 11
3congela
4
Cl01 (constructor)
4 this 4 2
4 b 4 4
6 X devuelve 2.
7 descongela 3 con 2
8a 82
9congela
10
Cl01.mensaje
10 this 10 2
10 c 10 2
13 X
14 descongela 9
14 X

Heap

1
1: class
name Cl01
2
2: Cl01
5a 54

Consola

12 6

Expresiones

3new Cl01(4)
  2   Cl01(4)
4this Cl01(b)
5this.a = b
   2  .a = 4
9a.mensaje(2)
  2.mensaje(2)
10this.mensaje(c)
11c + this.a
   2 + 4
     6

Explicación

  1. Descongela el último registro de activación congelado en el stack.

  2. Como no hay más instrucciones, Elimina el registro de activación y termina el programa.

15. Depura con JavaScript Tutor

Depura el código en JavaScript Tutor.

C. Clases e instancias

class Cl2 {
 static saludaClase() {
  console.log(
   `Hola. Clase ${Cl2.nombre}.`)
 }
 saludaInstancia() {
  console.log(
   `Hola. Instancia ${this.nom}`)
 }
}
Cl2.nombre = "QK"
const t1 = new Cl2()
t1.nom = "qkita1"
const t2 = new Cl2()
t2.nom = "qkita2"
Cl2.saludaClase()
t1.saludaInstancia()
t2.saludaInstancia()

Salida

Hola. Clase QK.
Hola. Instancia qkita1
Hola. Instancia qkita2

Depúralo en JavaScript Tutor.

D. Getters y setters

En JavaScript por el momento todos los miembros de una clase son públicos, pero se pueden usar convenciones para indicar niveles de acceso.

Como hay varias convenciones, usaremos las del compilador de TypeScript, que Visual Studio Code puede usar para validar el acceso.

@public

Es el valor predefinido e indica que el miembro puede usarse desde cualquier parte del código.

@private
_miembro

El miembro solo debe usarse dentro de la clase que lo define.

@protected

El miembro solo debe usarse dentro de la clase que lo define y subclases.

Ejemplo

class ClX {
 constructor() {
  /** @private */
  this._nombre = ""
 }
 get nombre() {
  return (this._nombre)
 }
 set nombre(nombre) {
  this._nombre = nombre
 }
 /** @public */
 get juega() {
  return (`${this.nombre} juega`)
 }
}
const tt1 = new ClX()
tt1.nombre = "pp"
console.log(tt1.nombre)
console.log(tt1.juega)

Salida

pp
pp juega

Depúralo en JavaScript Tutor.

E. Resumen

  • En esta lección se definieron los siguientes conceptos:

    • class

    • Instancia de clase

    • Creación de instancia de clase

    • getter

    • setter

27. Herencia

Versión para imprimir.

En esta lección se introduce el concepto de herencia.

A. Constructores

class ClM1 {
 constructor(p) {
  console.log(p)
  this.m = p
 }
}
class ClH1 extends ClM1 {
 constructor(b, c) {
  super(b)
  console.log(c)
  this.h = c
 }
}
const th1 = new ClH1(4, -2)
console.log(th1.m)
console.log(th1.h)
const tm1 = new ClM1(8)
console.log(tm1.m)

Salida

4
-2
4
-2
8
8

Depúralo en JavaScript Tutor.

B. Sobrescritura de métodos

class ClM2 {
 muestra() {
  console.log("Hola.")
 }
}
class ClH2 extends ClM2 {
 /** @override */
 muestra() {
  super.muestra()
  console.log("Consola.")
 }
}
const tm2 = new ClM2()
tm2.muestra()
const th2 = new ClH2()
th2.muestra()

Salida

Hola.
Hola.
Consola.

Depúralo en JavaScript Tutor.

C. Resumen

  • En esta lección se definieron los siguientes conceptos:

    • Coordinación de constructores en la herencia.

    • Sobrescritura de métodos en la herencia.

28. Arreglos

Versión para imprimir.

En esta lección se presenta el concepto de arreglo y la forma de procesarlo.

A. Conceptos básicos

Imagina un arreglo
 const arr = ["mx", "my", "mu"]
 console.log(arr)
 console.log(arr.length)
 console.log(arr[0])
 console.log(arr[1])
 console.log(arr[2])
 arr[2] = "hi"
 const i = 0
 console.log(arr[i])
 arr[i] = "ho"
 console.log(arr[i])

Salida

[ 'mx', 'my', 'mu' ]
3
mx
my
mu
mx
ho

Depúralo en JavaScript Tutor.

B. Uso de contadores

const arr = ["mx", "my", "mu"]
for (let i = 0,
 len = arr.length;
 i < len;
 i++) {
 const s = arr[i]
 console.log(s)
}
console.log("adios")

Salida

mx
my
mu
adios

Depúralo en GilPG Nod.

C. for-of

const arr = ["mx", "my", "mu"]
for (const s of arr) {
 console.log(s)
}
console.log("adios")

Salida

mx
my
mu
adios

Depúralo en JavaScript Tutor.

D. for-each

const arr = ["mx", "my", "mu"]
arr.forEach(s => console.log(s))
console.log("adios")

Salida

mx
my
mu
adios

Depúralo en JavaScript Tutor.

E. Arreglos de instancias de clases

Imagina un arreglo de objetos
class Clao {
 constructor(a) {
  this.a = a
 }
}
const arrI = [
 new Clao(-3),
 new Clao(4),
 new Clao(8)]
console.log(arrI)
for (const ref of arrI) {
 console.log(ref.a)
}

Salida

[ Clao { a: -3 }, Clao { a: 4 }, Clao { a: 8 } ]
-3
4
8

Depúralo en JavaScript Tutor.

F. Arreglos de literales de objetos

const arrL = [
 { a: -3 },
 { a: 4 },
 { a: 8 }]
console.log(arrL)
for (const ref of arrL) {
 console.log(ref.a)
}

Salida

[ { a: -3 }, { a: 4 }, { a: 8 } ]
-3
4
8

Depúralo en JavaScript Tutor.

G. El método forEach con objetos

const arrL = [
 { a: -3 },
 { a: 4 },
 { a: 8 }]
arrL.forEach(n => console.log(n.a))

Salida

-3
4
8

Depúralo en JavaScript Tutor.

H. El método map

I. El método filter

J. El método join

K. El método reduce

L. El método sort

M. Encadenamiento de métodos

N. El tipo de datos Set

O. Resumen

  • En esta lección se definieron los siguientes conceptos:

    • Arreglos básicos.

    • Uso de contadores para procesar arreglos.

    • La estructura for-of para procesar arreglos.

    • El método forEach de arreglos.

    • Arreglos de instancias de clases.

    • Arreglos de literales de objetos.

    • El método forEach de arreglos de objetos.

    • El método map.

    • El método filter.

    • El método join.

    • El método reduce.

    • El método sort.

    • Encadenamiento de métodos.

    • El tipo de datos Set.

29. Polimorfismo

Versión para imprimir.

En esta lección se presenta el concepto de polimorfismo.

A. Sobrescritura de métodos

  • En este ejemplo no se invoca el método en super; aunque es recomendable invocarlo, hay que estudiar bien la lógica del programa.

class Despedida {
 despídete() {
  console.log("Adios")
 }
}

class DespedidaIngles
 extends Despedida {
 /** @override */
 despídete() {
  console.log("Bye")
 }
}

const despedidas = [
 new Despedida(),
 new DespedidaIngles()]
for (var d of despedidas) {
 d.despídete()
}

Salida

Adios
Bye

Depúralo en JavaScript Tutor.

B. Interfaces

/** @interface */
class IntfMensaje {
 saludo() {
  throw new Error("interface")
 }
}

/** @implements {IntfMensaje} */
class MensajeIng {
 saludo() {
  console.log("Hi")
 }
}

/** @implements {IntfMensaje} */
class MensajeEsp {
 saludo() {
  console.log("Hola")
 }
}

const imensajes = [
 new MensajeEsp(),
 new MensajeIng()]
for (var mens of imensajes) {
 mens.saludo()
}

Salida

Hola
Hi

Depúralo en JavaScript Tutor.

C. Interfaces de JavaScript

class MensajeIng2 {
 saludo() {
  console.log("Hi")
 }
}

class MensajeEsp2 {
 saludo() {
  console.log("Hola")
 }
}

const mensajes = [
 new MensajeEsp2(),
 new MensajeIng2()]
for (var mens of mensajes) {
 mens.saludo()
}

Salida

Hola
Hi

Depúralo en JavaScript Tutor.

D. Clases abstractas

class Deportista {
 constructor(nombre) {
  this.nombre = nombre
 }
 presenta() {
  console.log(`Soy ${this.nombre}`)
 }
 /** @abstract */
 anota() {
  throw new Error("abstract")
 }
}

class Basketbolista
 extends Deportista {
 constructor(nombre) {
  super(nombre)
 }
 /** @override */
 anota() {
  console.log("Encesto")
 }
}

class Futbolista
 extends Deportista {
 constructor(nombre) {
  super(nombre)
 }
 /** @override */
 anota() {
  console.log("Anoto gol")
 }
}

const deportistas = [
 new Basketbolista("LeBron"),
 new Futbolista("Lionel")]
for (var dep of deportistas) {
 dep.presenta()
 dep.anota()
}

Salida

Soy LeBron
Encesto
Soy Lionel
Anoto gol

Depúralo en JavaScript Tutor.

E. Resumen

  • En esta lección se introdujeron los siguientes conceptos:

    • Polimorfismo con sobrescritura de métodos.

    • Polimorfismo con interfaces.

    • Polimorfismo con clases abstractas.

30. Excepciones

Versión para imprimir.

En esta lección se presenta el concepto de excepciones y como procesarlas.

A. throw

Cuando una instrucción no puede completarse por algún error, debe abortar usando la instrucción
throw new Error(mensaje)

A este proceso se le llama Lanzar una excepción.

Diagrama de throw.

Ejemplo

console.log("La instrución")
throw new Error(
 "throw aborta el programa")
console.log("Estas líneas")
console.log("no se ejecutan")

Salida

La instrución

Error: throw aborta el programa

Depúralo en JavaScript Tutor.

Los errores generados por la instrucción throw pueden procesarse de varias formas que se verán a continuación.

B. try-catch

Diagrama de try-catch.
Diagrama de try-catch con error.

  • Para procesar los errores, la instrucción throw debe ejecutarse dentro de las llaves de try.

  • Si llega al final de las llaves de try sin lanzar ninguna excepción, se hace lo siguiente:

    • La cláusula catch y las instrucciones para procesar la excepción no se ejecutan.

    • Continua con las instrucciones que vengan después de la estructura completa try-catch.

  • Si se lanza una excepción dentro de las llaves de try, se hace lo siguiente:

    • Las restantes instrucciones hasta cerrar llaves no se ejecutan.

    • Se toma la excepción lanzada; a este proceso se le llama atrapar la excepción.

    • La excepción atrapada se pasa como parámetro a la cláusula catch el flujo normal se restablece y se ejecutan las instrucciones para procesar la excepción.

    • Continua con las instrucciones que vengan después de la estructura completa try-catch.

Ejemplo

try {
 console.log("Ejecuta bien")
} catch (e) {
 console.log("Esto no se hace")
}
console.log("Continúa normal")
try {
 console.log("Intenta seguir")
 throw new Error("Fallo")
 console.log("Esto no se hace")
} catch (e) {
 console.log(
  "Procesa el error:", e.message)
}
console.log("Adios")

Salida

Ejecuta bien
Continúa normal
Intenta seguir
Procesa el error: Fallo
Adios

Depúralo en JavaScript Tutor.

C. try-finally

Diagrama de try-finally.
Diagrama de try-finally con error.

  • Las instrucciones que están dentro de finally siempre se ejecutan.

  • Si llega al final de las llaves de try sin lanzar ninguna excepción, se hace lo siguiente:

    • Las instrucciones que siempre se ejecutan de la cláusula finally se ejecutan.

    • Continua con las instrucciones que vengan después de la estructura completa try-finally.

  • Si se lanza una excepción dentro de las llaves de try, se hace lo siguiente:

    • Las restantes instrucciones hasta cerrar llaves no se ejecutan.

    • Las instrucciones que siempre se ejecutan de la cláusula finally se ejecutan.

    • Continúa lanzando la excepción.

Ejemplo

try {
 console.log("Sin error")
} finally {
 console.log("Si se ejecuta")
}
console.log("Continua sin falla")
try {
 throw new Error("A volar")
 console.log("No se ejecuta.")
} finally {
 console.log("Ejecuta con error")
}
console.log("Esto no se realiza")

Salida

Sin error
Si se ejecuta
Continua sin falla
Ejecuta con error

Error: A volar

Depúralo en GilPG Nod.

D. try-catch-finally

Diagrama de try-catch-finally.
Diagrama de try-catch-finally con error.

Ejemplo

try {
 throw new Error("Ouch")
} catch (e) {
 console.
  log("Restablece", e.message)
} finally {
 console.log("finally se ejecuta")
}
console.log("Esto se realiza")
try {
 console.log("Try exitoso.")
} catch (e) {
 console.log("catch no se hace")
} finally {
 console.log("finally se hace")
}
console.log("Esto se hace")

Salida

Restablece Ouch
finally se ejecuta
Esto se realiza
Try exitoso.
finally se hace
Esto se hace

Depúralo en JavaScript Tutor.

E. try anidado

try {
 console.log("Empezamos")
 fallo()
 console.log("No me ignores")
} catch (e) {
 console.log(e.message)
}
console.log("Terminamos")
function fallo() {
 console.log("¿Fallaremos?")
 throw new Error("Fallamos")
 console.log("Tampoco me ignores")
}

Salida

Empezamos
¿Fallaremos?
Fallamos
Terminamos

Depúralo en GilPG Nod.

F. Formulario con excepciones

let dividendo = NaN
let divisor = NaN
try {
 leeDividendo()
 leeDivisor()
 valida()
 const resultado = procesa()
 console.log(
  "El resultado es:", resultado)
} catch (e) {
 console.error(e)
}

function leeDividendo() {
 const strDividendo = question(
  "Introduce el dividendo: ")
 dividendo =
  strDividendo === null ?
   NaN : parseFloat(strDividendo)
}

function leeDivisor() {
 const strDivisor = question(
  "Introduce el divisor: ")
 divisor = strDivisor === null ?
  NaN : parseFloat(strDivisor)
}

function valida() {
 /* Debe cumplirse que el dividendo
  * sea un número. */
 if (isNaN(dividendo))
  throw new Error(
   "El dividendo debe ser número.")
 /* Debe cumplirse que el divisor
  * sea un número. */
 if (isNaN(divisor))
  throw new Error(
   "El divisor debe ser número.")
 /* Debe cumplirse que el divisor
  * sea diferente de 0. */
 if (divisor === 0)
  throw new Error(
   "El divisor no puede ser 0.")
}

function procesa() {
 return dividendo / divisor
}

Depúralo en JavaScript Tutor.

G. Resumen

31. Promesas

Versión para imprimir.

En esta lección se presenta el concepto de promesa y como procesarla.

A. Promesas originales

Promise.resolve("Hola").
 then(s => console.log(
  "Éxito 1:", s)).
 catch(e => console.log(
  "Fallo 1:", e.message))
Promise.reject(new Error("ouch")).
 then(s => console.log(
  "Éxito 2:", s)).
 catch(e => console.log(
  "Fallo 2:", e.message))

Salida

Éxito 1: Hola
Fallo 2: ouch

Depúralo en GilPG Nod.

B. async-await

ejecuta()
async function ejecuta() {
 try {
  const r1 =
   await Promise.resolve("Hola")
  console.log("Éxito 1:", r1)
 } catch (e) {
  console.
   log("Falló 1:", e.message)
 }
 try {
  const r2 = await Promise.reject(
   new Error("ouch"))
  console.log("Éxito 2", r2)
 } catch (e) {
  console.
   log("Falló 2:", e.message)
 }
}

Salida

Éxito 1: Hola
Falló 2: ouch

Depúralo en GilPG Nod.

C. Creación de una promesa

ejecuta()
function fnExito(resolve, reject) {
 setTimeout(
  () => resolve("Hola"),
  5000)
}
function fnFalla(resolve, reject) {
 setTimeout(
  () => reject(new Error("ouch")),
  5000)
}
async function ejecuta() {
 try {
  const r1 =
   await new Promise(fnExito)
  console.log("Éxito 1", r1)
 } catch (e) {
  console.
   log("Falló 1:", e.message)
 }
 try {
  const r2 =
   await new Promise(fnFalla)
  console.log("Éxito 2:", r2)
 } catch (e) {
  console.
   log("Falló 2:", e.message)
 }
}

Salida

Éxito 1 Hola
Falló 2: ouch

Depúralo en GilPG Nod.

D. Promise.all

ejecuta()
/**
 * @param {string} res
 * @param {number} timeout
 */
function prom(res, timeout) {
 return new Promise(
  (resolve, reject) =>
   setTimeout(
    () => {
     if (res !== "") {
      resolve(`Éxito[${res}]`)
     } else {
      reject(new Error(
       `Falla[${res}]`))
     }
    },
    timeout))
}
async function ejecuta() {
 try {
  const r1 = await Promise.all([
   prom("a", 300),
   prom("z", 2000),
   prom("b", 5000)])
  console.
   log("Éxito 1:", r1.join())
 } catch (e) {
  console.
   log("Falló 1:", e.message)
 }
 try {
  const r2 = await Promise.all([
   prom("a", 100),
   prom("", 1000),
   prom("b", 5000)])
  console.log("Éxito 2:", r2)
 } catch (e) {
  console.
   log("Falló 2:", e.message)
 }
}

Salida

Éxito 1: Éxito[a],Éxito[z],Éxito[b]
Falló 2: Falla[]

Depúralo en GilPG Nod.

E. Resumen

  • En esta lección se revisaron los siguientes conceptos:

    • Promise.resolve

    • Promise.reject

    • async-await

    • Creación de promesas

    • Promise.all

32. Asociaciones

Versión para imprimir.

En esta lección se presentan distintos tipos de asociaciones.

A. Asociaciones a uno

Imagina

Imagina asociaciones a uno

Diagrama de Clases

Diagrama de clases a uno

Frases

  • Una sonaja tiene como dueño a un bebé.

Código

Programa animado de asociaciones a uno.

B. Asociaciones a muchos

Imagina

Imagina asociaciones a muchos

Diagrama de Clases

Diagrama de clases a muchos

Frases

  • Una infante tiene muchos juguetes.

Código

Programa animado de asociaciones a muchos.

C. Asociaciones de uno a uno

Imagina

Imagina asociaciones uno a uno

Diagrama de Clases

Diagrama de clases a uno a uno con flechas
Diagrama de clases a uno a uno

Frases

  • Un piloto pilotea un avión.

  • Un avión es piloteado por un piloto.

Código

Programa animado de asociaciones uno a uno.

D. Asociaciones de uno a muchos

Imagina

Imagina asociaciones uno a muchos

Diagrama de Clases

Diagrama de clases a uno a muchos

Frases

  • Un juguete2 pertenece a un infante2.

  • Un infante2 tiene muchos juguetes2.

Código

Programa animado de asociaciones uno a muchos.

E. Asociaciones de muchos a muchos

Imagina

Imagina asociaciones muchos a muchos

Diagrama de Clases

Diagrama de clases a muchos a muchos

Frases

  • Un usuario usa muchas computadoras.

  • Una computadora es usada por muchos usuarios.

Código

Programa animado de asociaciones muchos a muchos.

F. Agregación

  • Asociación binaria.

  • Un objeto se forma con partes independientes.

Diagrama de clases de agregación
Ejemplo de diagrama de clases de agregación.

G. Composición

  • Asociación binaria.

  • Un objeto se forma con partes que no pueden existir sin el objeto principal.

Diagrama de clases de composición

H. Resumen

  • En esta lección se revisaron los siguientes de asociaciones:

    • A uno.

    • A muchos.

    • Uno a uno.

    • Uno a muchos.

    • Muchos a muchos.

    • Agregación.

    • Composición.

33. Patrones de diseño

Versión para imprimir.

En esta lección se presenta el concepto de patrón de diseño y algunos ejemplos.

A. Patrón de diseño

  • Técnicas para resolver un problema común en el desarrollo de software y otros ámbitos referentes al diseño de interacción o interfaces.

  • Un patrón de diseño resulta ser una solución a un problema de diseño. Para que una solución sea considerada un patrón debe poseer ciertas características:

    • Haber comprobado su efectividad resolviendo problemas similares en ocasiones anteriores.

    • Debe ser reutilizable, lo que significa que es aplicable a diferentes problemas de diseño en distintas circunstancias.

  • Un sitio donde vienen explicados los patrones de diseño es: https://www.oodesign.com/

Fuentes

B. El patrón singleton

C. El patrón factory

D. El patrón proxy

E. El patrón MVC

F. Resumen

  • En esta lección se revisaron los siguientes conceptos:

    • Patrón de diseño

    • El patrón singleton

    • El patrón factory.

    • El patrón proxy.

    • El patrón MVC.