APUNTE Lenguaje JavaScript
Cargado por
carlos chazarretaAPUNTE Lenguaje JavaScript
Cargado por
carlos chazarretaCon el lenguaje JavaScript vamos a aprender la sintaxis básica de JavaScript,
después cosas más avanzadas de la sintaxis, también frameworks, bibliotecas,
cientos de ejercicios y algún proyecto.
¿Que se puede hacer con
JavaScript?
Con JavaScript puedes hacer muchas cosas, cualquier cosa que no se pueda hacer
con css o html en el navegador, lo puedes hacer con JavaScript. Puedes hacer
aplicaciones web completas, pequeñas animaciones, juegos y mucho, mucho,
pero mucho más.
Imagina que html es el esqueleto de una página web. css es la piel y JavaScript es el
cerebro, es el que da vida a un sitio web (no solo JavaScript, también hay otros
lenguajes como php).
Introducción JavaScript
Veremos lo basico de JavaScript vanilla (javascript puro sin frameworks o
bibliotecas), variables, condicionales, bucles, arrays, etc.
Por lo que primero que debemos es descargar Visual Studio Code para que
podamos empezar a trabajar.
Primeras normas de sintaxis y ubicación del código con JavaScript
¿Dónde se escribe el código JavaScript?
Capítulo 2: Primeras normas de sintaxis y ubicación del código
Lo primero es lo primero, para empezar a entender los ejemplos y las
explicaciones es imprescindible poder introducir el código en cada momento e ir
probándolo. De modo, que vamos a ver como lo tienes que colocar para que
funcione.
Ejecutar código JavaScript desde el head de html
Deberás o bien crear una página HTML o crear una página JS. Empecemos por
añadir el código en la página html. Escribe las etiquetas <script></script> antes del
cierre del </head>
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ubicación del código en JavaScript</title>
<script>
num1 = 10;
alert(num1);
</script>
</head>
<body>
</body>
</html>
HTML
Palabra del lenguaje nº 1 encontrada.
let es una palabra reservada del lenguaje y se utiliza para declarar
variables.
Palabra del lenguaje nº 2 encontrada.
alert es una función para abrir una ventanita emergente con en el
navegador.
Abre esta página html en el navegador. El resultado es el siguiente:
No te preocupes aún por entender el código que no haya explicado.
1. Esto es la ruta hacia el archivo html, solo tienes que abrirlo con el
navegador, no importa que escribas manualmente la ruta.
2. Es el valor almacenado en una variable llamada num1.
3. Esta ventanita emergente es la producida al invocar a alert() en el código
JavaScript. En ella se muestra el valor de la variable num1.
Ejecutar código JavaScript desde el body de html
El código en el body se escribe de la misma forma, entre las etiquetas script pero
dentro del body.
La diferencia de ponerlo en el <body> o en el <head> es que el script se va a cargar
antes que el contenido visible en la página (si lo pones en el <head>) o en un
momento determinado mientras se cargan los elementos visibles del <body> (si lo
pones en el <body>). Le verás más la diferencia a medida que vayas aprendiendo. La
mayoría de las veces, se suele poner el código JavaScript preferentemente en
el <head> de html.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ubicación del código en JavaScript</title>
</head>
<body>
<script>
let num1 = 10;
alert(num1);
</script>
</body>
</html>
HTML
Copiar
El resultado es el mismo:
Ejecutar código JavaScript desde una hoja .js externa
La siguiente opción es hacer una página externa con extensión .js y empezar a
escribir en ella. Es como lo que hacemos con CSS. Luego, solo tienes que enlazarla
para poder utilizar todo el código JavaScript en cualquier página html.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ubicación del código en JavaScript</title>
<script src="test.js"></script>
</head>
<body>
</body>
</html>
HTML
Copiar
Archivo JS
let num1 = 10;
alert(num1);
JavaScript
Copiar
Nuevamente, el resultado es el mismo. Piensa que tienes que ejecutar la página
html en el navegador. Este se encargará de ejecutar el código js.
Normalmente el código se escribe en hojas .js externas para aprovechar el código y
no repetirlo. Si es algo puntual, lo escribes directamente sobre el documento .html.
JavaScript es case sensitive
Ahora que ya sabes donde colocar el código, vamos a empezar a quemar el
teclado escribiendo código JavaScript. Pasamos a ver un poco sobre la sintaxis.
JavaScript es case sensitive, por lo que no es lo mismo escribir var
PRIMERAVARIABLE; que var primeravariable;.
let PRIMERAVARIABLE;
let primeravariable;
JavaScript
Copiar
A partir de ahora, a no ser que lo requiera, voy a poner solo el código js. Doy por
sentado que ya sabes donde lo tienes que poner. Si no es así, mira los vídeos de
cada capítulo o déjame comentarios para que resuelva tus dudas.
Espacios en blanco y saltos de línea
En JavaScript podemos ordenar el código como queramos, ya que ignora los
espacios en blanco y los saltos de línea.
Esta norma se aplica a todo, a variables, palabras reservadas del lenguaje, nombres
de funciones, etc.
let primeraVariable = 500;
alert ( primeraVariable ) ;
JavaScript
Copiar
Esto funciona perfectamente, JavaScript entiendo que esos espacios no son nada,
por lo tanto, los ignora.
Por supuesto, esto es una mala práctica. Hay que escribir código limpio y óptimo.
Este sería el equivalente al código anterior pero bien escrito.
¿Qué son las variables de JavaScript?
Introducción a las variables con javaScript
Capítulo 3: ¿Qué son las variables en JavaScript?
En este tercer capítulo, dejamos atrás las introducciones para ir de lleno con el
código. En este caso empezamos por lo más básico de todo lenguaje, las
variables, siempre presentes.
¿Qué son las variables?
Una variable es un contenedor lógico que almacena datos de todo tipo, es decir,
información. Cada lenguaje de programación lleva los suyos, números enteros,
decimales, texto, etc.
Su nombre dice mucho de ellas, ya que una variable está diseñada para variar,
inicialmente en tu código puede tener un valor e ir cambiando durante toda la
ejecución de este.
¿Cómo se declaran las variables
en JavaScript?
En JavaScript podemos utilizar la palabra reservada let, tal y como viste en el
capítulo anterior o la palabra var, seguido del nombre que le quieras dar.
Palabra del lenguaje nº 3 encontrada.
var es una palabra reservada del lenguaje y se utiliza para declarar
variables como ocurre con let.
var color1;
let color2;
JavaScript
Copiar
¿Cómo inicializar una variable en
JavaScript?
Las variables del ejemplo anterior, están declaradas, pero no tienen ningún valor,
solo su nombre. Para añadir algún dato a una variable, hay que inicializarla. Esto
se consigue con el operador de asignación, que en JavaScript es el símbolo
igual =.
var color1 = "Rojo";
let color2 = "Verde"
JavaScript
Copiar
Estas dos variables tienen ahora un tipo de dato de texto, color1 tiene el valor
de "Rojo" y color2, "Verde". Esto solo es texto plano, no son colores, es solo un
ejemplo de texto para que veas como se guardan datos en las variables. También,
en el capítulo anterior viste como guardar un número.
Los datos de tipo texto se escriben entre comillas en las variables.
Antes de seguir con el tema de las variables, ten en cuenta que hay que terminar
cada línea con un punto y coma, de ese modo, se separan, ya que recuerda que
ignora los espacios en blanco. Sin el punto y coma, el código anterior sería así
para el navegador:
var color1 = "Rojo"let color2 = "Verde"
JavaScript
Copiar
Hay veces en los que no te va a dar error si te dejas alguno sin poner. Pon
atención a esto, ya que es una de las causas de error más comunes.
Más adelante verás que se puede trabajar (no desde siempre) sin poner los
puntos y coma, de momento, acostúmbrate a usarlos.
Otro detalle sobre el punto y coma. También puedes hacer esto, separar
diversas líneas en la misma línea con punto y coma, el resultado es el
mismo, pero esto no es una buena práctica, así que te recomiendo que
no lo hagas.
// Mala práctica.
var color1 = "Rojo"; let color2 = "Verde";
JavaScript
Copiar
¿Cómo mostrar el valor de una variable de JavaScript en el
navegador?
Lo puedes hacer de varias formas, una que ya sabes del capítulo anterior es con
la función alert().
var color1 = "Rojo";
let color2 = "Verde";
alert(color1);
JavaScript
Copiar
El resultado es que me devuelve en el alert() el valor de la variable color1.
Reasignar valores a una variable
en JavaScript
Tal y como he dicho, las variables están diseñadas para variar, de modo, que es
importante conocer como hacerlas cambiar de valor.
Una vez está declarada la variable (pones var o let y el nombre), no tienes que
volver a repetir let o var para darle un nuevo valor.
var color1 = "Rojo";
color1 = "Azul";
alert(color1);
JavaScript
Copiar
El resultado es que me devuelve en el alert() el valor Azul, el cuál ha sustituido
a Rojo. Esto lo puedes hacer cuantas veces quieras. Pero recuerda, let o var es
solo para crear la variable, luego no tienes que utilizarlo de nuevo en la misma
variable.
El flujo de ejecución de
JavaScript
El flujo de ejecución del código va de arriba abajo en JavaScript. Se ejecuta
primero esta línea, var color1 que tiene el valor Rojo. En el momento que
llegamos a la segunda línea, color1 tiene un valor de Azul y ha perdido ese
valor Rojo. Finalmente, se lee la última línea, la del alert() en la que ve que en
ese momento color1 es igual a Azul.
Probemos esto con dos alert() que muestren el valor de color1 en los diferentes
momentos.
var color1 = "Rojo";
alert(color1);
color1 = "Azul";
alert(color1);
JavaScript
Copiar
El resultado es que me devuelve en el alert el valor Azul, el cuál ha sustituido
a Rojo. Esto lo puedes hacer cuantas veces quieras. Pero recuerda, let o var es
solo para crear la variable, luego no tienes que utilizarlo.
Hay formas de modificar el flujo de ejecución normal de JavaScript, por ejemplo,
con estructuras de control de flujo (condicionales). No hay prisa, aún faltan unos
cuantos capítulos para llegar a esto.
Palabras reservadas, clave, e identificadores de JavaScript
Las palabras e identificadores de javaScript
Capítulo 4: Palabras reservadas y clave - Identificadores y la consola
Vamos a ver varias cosas en este capítulo, los identificadores, las palabras
reservadas y las palabras clave (keywords) del lenguaje y la consola de
JavaScript.
Identificadores JavaScript
Un identificador es solo un nombre que identifica algo. Son nombres asignados
a objetos, variables, funciones, etc.
Obligatoriamente los identificadores deben comenzar o bien con una letra (a), con
una barra baja(_) o con el símbolo dólar ($). No podremos utilizar números como
primer carácter del nombre de un identificador u otros símbolos que no sean el del
dólar o el guion bajo.
Los otros caracteres del identificador pueden estar compuestos por un guión bajo
(_), un signo de dólar ($), letras (a) o números (1) , pero no pueden ser otros
símbolos. Tampoco puedes dejar espacios en medio del nombre.
Los siguientes ejemplos son válidos para identificadores:
let variable1;
let _variable2;
let $variable3;
let varia$ble4;
let varia$ble_5;
let _v8aria$ble_6_;
JavaScript
Copiar
Aunque unos identificadores más confusos que otros, son todos válidos. Puedes
hacer la prueba con un alert(). Si te devuelve el valor undefined quiere decir que
es correcto, ya que estas variables no tienen un valor defined (definido). En cambio,
si las inicializas con un valor, debería salirte el valor en lugar del undefined.
Palabra del lenguaje nº 4 encontrada.
undefined es un valor primitivo asignado automáticamente a variables
que solo han sido declaradas y no iniciadas.
Buenas y malas prácticas con identificadores
Ten en cuenta que debes intentar siempre poner nombres de identificadores lo más
sencillos e identificativos posible. Aquí tienes unos buenos ejemplos:
let numero1 = 100;
let numero_2 = 500;
let nombre = "Alba García";
let edad_usuario = 23;
let vidaEnemigo = 100;
let telefono_1 = "657483930";
let telefono2 = "647389220";
JavaScript
Copiar
Estos son unos malos ejemplos que no debes escribir:
let cien = 100;
let n2 = 500;
let n_us = "Alba García";
let eUsuario = 23;
let vida$e = 100;
let tel1 = "657483930";
let t_2 = "647389220";
JavaScript
Copiar
¿Ves la gran diferencia? mientras que en los primeros ejemplos tenemos unos
nombres de variable (identificadores) muy entendibles, en los malos ejemplos cuesta
mucho más saber que es cada cosa.
Piensa que vas a declarar estas variables, les darás un valor y después tendrás que ir
utilizándolas en el código. Cuando tengas muchas variables, vas a tener que ir
subiendo a donde declaraste las variables para ver que valor inicial tienen y para que
son. También, si otros editan tu código, tendrán que revisarlo mucho para averiguar
lo que hace cada cosa.
Si utilizas acentos o la letra ñ en los nombres de identificadores
funciona correctamente, al menos en las versiones de JavaScript que he
probado. De todas formas, no lo recomiendo en absoluto.
Palabras reservadas de JavaScript
Las palabras reservadas del lenguaje son identificadores reservados, es decir,
tienen algún significado en el propio lenguaje y no las puedes utilizar para dar
nombre a identificadores corrientes, por ejemplo en variables.
Listado de palabras reservadas y clave de JavaScript - Incluye
futuras palabras reservadas
Puedes hacer click para ir al capítulo donde aparecen por primera vez estas palabras,
con su respectiva información. iré añadiendo los enlaces que falten a medida que
vaya subiendo contenido con dichas palabras.
abstract arguments await boolean
break byte case catch
char class const continue
debugger default delete do
double else enum eval
export extends false final
finally float for function
goto if implements import
in instanceof int interface
let long native new
null package private protected
public return short static
super switch synchronized this
throw throws transient true
try typeof var void
volatile while with yield
Validador de nombres de JavaScript
Aquí tienes una magnífica herramienta para saber si el nombre de identificador que
le quieres dar a una variable, una función, etc. es correcto.
Validador de identificadores de JavaScript
Es muy fácil de utilizar, aquí tienes una mini leyenda según los colores que te
devuelve:
En color verde significa que valida. Todo ok.
En color amarillo quiere decir que se puede utilizar pero está desaconsejado su uso.
En color rojo significa que no valida y que incumple las normas de nomenclatura de
los identificadores en JavaScript.
La consola de JavaScript
La consola de JavaScript es extremadamente útil. Nos va a acompañar siempre para
poder depurar los errores en el código y para poder ejecutar directamente ciertas
sentencias para hacer pruebas sobre la página cargada en el navegador.
Abrir la consola de JavaScript en Chrome
Para acceder a la consola en Chrome pulsa la tecla F12 y ve a la pestaña "Console".
También puedes acceder pulsando las teclas CTRL + SHIFT + I.
En la parte de la izquierda muestra secciones de error, advertencias, información,
etc. A la derecha muestra el contenido de la sección seleccionada. En esta imagen
puede verse un error de sintaxis generado en el archivo test.js, línea 1. Esto lo indica
con test.js:1.
Seguiremos utilizando la consola durante todo el curso, así que es importante que
empieces a utilizarla.
Veamos como se abre en otros navegadores.
Abrir la consola de JavaScript en Firefox
Para abrirla en Firefox pulsa la tecla F12 o las teclas CTRL + SHIFT + I y
también CTRL + SHIFT + J para que aparezca en una nueva ventana.
En este caso, aparece la consola en la parte inferior y además, nos indica en qué
carácter de la línea empieza el error detectado.
Abrir la consola de JavaScript en Opera
Para abrirla en Opera, la tecla <F12 no funciona. Si que lo hacen las teclas CTRL +
SHIFT + I y también CTRL + SHIFT + J. En este caso, la consola aparece igualmente
incrustada en la misma ventana, no como en Firefox.
Abrir la consola de JavaScript en Edge
En Edge tenemos todas las opciones anteriores. La tecla F12, las teclas CTRL + SHIFT
+ I y CTRL + SHIFT + J.
Hay muchísimos navegadores. He puesto los 4 más usados, pero si tienes alguno que
no funcione con estas teclas, déjame un comentario y te ayudaré.
Diferencia entre var y let JavaScript
¿Cuál es la diferencia entre var y let?
Capítulo 5: Diferencia entre var y let - console.log y convenciones de nombrado de
identificadores
En este quinto capítulo te voy a explicar el motivo por el cual tenemos dos
formas de declarar variables en JavaScript, var y let. Además, aprovecho para
enseñarte también las convenciones para escribir nombres de identificadores.
Diferencia entre var y let de
JavaScript
Bien, puede que te hayas preguntado que porque hay dos palabras reservadas
diferentes para declarar variables. Cuando se creó javascript solo existía la
palabra var para crear variables. Las variables con var van a funcionar y a día de
hoy son correctas, pero tienen un problema en la forma en que trabajan.
Con var podemos redeclarar una variable tantas veces como queramos
utilizando la palabra reservada delante del identificador, tal y como puedes ver
en la siguiente mala práctica:
// El siguiente código es una mala práctica.
var color1 = "Rojo";
console.log(color1);
var color1 = "Azul";
console.log(color1);
JavaScript
Copiar
Aquí lo que está pasando es que estoy redeclarando dos veces la misma variable.
Esto es posible con var. No ocurre lo mismo con let.
Palabra del lenguaje nº 5 encontrada.
console es un objeto que nos permite acceder a la consola de
depuración de los navegadores.
Palabra del lenguaje nº 6 encontrada.
log es un método perteneciente al objeto console. Muestra un mensaje
en la consola.
Lo de console.log es algo nuevo. Se trata del objeto console llamando al
método log de este. De forma que lo entiendas mejor, estamos indicando algo a
la consola de javascript, en este caso, que nos muestre un mensaje en ella
misma. Mostrará cualquier cosa que le pongamos, al igual que ocurre en
el alert().
En el propio documento html no se ve nada, ninguna ventanita ni nada escrito en
el <body>. Si abres la consola de JavaScript podrás ver lo que devuelve. En este
caso, aparece en la sección info . Si fuese un error, aparecería en la sección de
errores.
Ahora que ya conoces este método (ya explicaré lo que es un método), puedes
usarlo más a menudo que la función alert() (también explicaré lo que es una
función). La función alert(), más que para hacer pruebas como hemos estado
haciendo, está destinada a informar al usuario de algo, por ejemplo, un usuario
que introduce en un login un usuario o una contraseña incorrecta y la página le
informa en ese momento de su error.
Dicho esto, puedes escribir alert() para hacer pruebas igualmente, pero es más
práctico utilizar un console.log() para no tener que hacer click en el botón
aceptar de la ventanita.
Comprobemos si efectivamente me deja redeclarar variables con let.
// El siguiente código es erróneo.
let color1 = "Rojo";
console.log(color1);
let color1 = "Azul";
console.log(color1);
JavaScript
Copiar
En este caso no funciona nada, en info de la consola no aparece nada y todo
queda en un error de sintaxis en la línea 3 que dice que el identificador color1 ya
está declarado. Efectivamente, estamos redeclarando una variable ya declarada.
Algo totalmente erróneo.
Puedes llegar a la conclusión de que se ha añadido let para sustituir a var. Ya
sabes, utiliza siempre mejor let.
Convenciones de escritura de
nombres en JavaScript
¿Qué es camelCase?
camelCase es la práctica de escribir varias palabras sin espacios o puntuación,
dejando la primera letra de cada palabra en mayúscula, excepto la primera (hay
excepciones, ahora las explico).
Este nombre está inspirado en las jorobas de un camello.
Hay dos tipos de camelCase:
UpperCamelCase: tal y como se escribe su nombre, la primera letra de
cada palabra en mayúsculas incluida la primera.
JavaScript
NumeroUno
EdadUsuario
NumeroTelefono
PalabrasEnMayusculas
lowerCamelCase: lo mismo, excepto que la primera letra de la primera
palabra va en minúsculas.
javaScript
numeroUno
edadUsuario
numeroTelefono
UpperCamelCase es lo mismo que PascalCase.
Es mucho más frecuente ver la escritura en JavaScript en lowerCamelCase y en
UpperCamelCase. No obstante, no es incorrecto si lo escribes de otra forma, por
ejemplo, con barras bajas (snake_case). No obstante, no estarás utilizando la
convención de JavaScript.
¿Qué es PascalCase?
PascalCase se trata de escribir los nombres sin separar, con la primera letra de
cada palabra en mayúsculas, incluida la primera, igual que UpperCamelCase.
JavaScript
NumeroUno
EdadUsuario
NumeroTelefono
¿Qué es snake_case?
snake_case es escribir todo en minúsculas y hacer separación de palabras con un
guion bajo (lo que llamo barra baja).
Esto está inspirado en una serpiente con su zigzagueo.
snake_case no crea errores pero no sigue la convención de JavaScript.
java_script
numero_uno
edad_usuario
numero_telefono
¿Qué es dot.case?
dot.case es escribir los nombres en minúsculas separadas por puntos. Algo
totalmente ilegal en JavaScript, así que ya sabes, no lo intentes.
dot.case no se puede utilizar en JavaScript ya que no cumple con las
normas para nombres de JavaScript.
java.script
numero.uno
edad.usuario
numero.telefono
¿Qué es kebab-case?
kebab-case es como snake_case con la única diferencia en que las palabras se
separan con un guión y no con barra baja.
kebab-case no se puede utilizar en JavaScript ya que no cumple con las
normas para nombres de JavaScript.
java-script
numero-uno
edad-usuario
numero-telefono
¿Qué es el estilo de nombrado húngaro?
Este estilo es como UpperCamelCase pero con un prefijo siempre en minúsculas,
por ejemplo, n para número, fn para una función, etc. Este prefijo indica el tipo de
dato que contiene la variable.
Este sistema se puede utilizar pero no cumple con la convención de
JavaScript.
nNumero
nEdadUsuario
strNumeroTelefono
En conclusión, utiliza lo que más te guste y se permita teniendo en cuenta que
por convención en JavaScript se utiliza lowerCamelCase para nombres de
objetos, funciones e instancias (variables incluidas) y PascalCase o
UpperCamelCase para los nombres de clase y constructores.
Hay muchos otros sistemas más que no voy a poner para no alargar
excesivamente este capítulo.
Tipos de datos primitivos y especiales de JavaScript
¿Qué tipos de datos hay en JavaScript?
Capítulo 6: Tipos de datos primitivos y especiales
En este sexto capítulo vas a ver los tipos de datos en JavaScript, algo totalmente
imprescindible para saber tratarlos y evitar errores. También verás el tipado
de JavaScript.
Tipado de JavaScript
JavaScript es un lenguaje de tipado débil y dinámico. Lo que significa que a
diferencia de otros lenguajes como Java, que no tiene nada que ver con
JavaScript (lo que más se parece es el nombre), no tenemos que especificar el
tipo de dato que va a contener una variable. En el caso de JavaScript, no hay que
decirle nada, el tipo de dato de una variable se asocia directamente al dato que
contiene. De este modo, puede ir cambiando no solo de valor, si no que también
de tipo de dato.
Por ejemplo, en Java, para declarar una variable numérica lo hacemos así:
Código Java
int numero1;
Java
Copiar
En cambio, en Javascript se hace así:
Código JavaScript
let numero1;
JavaScript
Copiar
Como puedes ver, en Java no hay que utilizar una palabra como let o algo similar
para especificar la declaración de una variable. En este caso, se declara
especificando el tipo de dato que va a contener la variable. En Java, el tipo de
dato para almacenar números enteros es int. Además, si intentas poner otro tipo
de dato a esta variable de Java que no sea un entero, te va a dar un error.
Deberás transformar el tipo de dato (casting) si quieres almacenar otra cosa y eso
si son tipos de datos compatibles.
Habrás notado lo fácil que es en JavaScript, aquí tienes un ejemplo de una misma
variable cambiando de tipo de dato sin ningún problema y sin tener que hacer
nada en especial
let variableCualquiera = 10;
variableCualquiera = "Ya no soy una variable numérica entera";
variableCualquiera = 0.15;
variableCualquiera = false;
JavaScript
Copiar
Seguro que si ya has programado en otros lenguajes, sabrás apreciar mejor la
diferencia.
Tipos de datos primitivos de
JavaScript
Ya que sabes lo suficiente sobre las variables, pasemos a los tipos de datos
primitivos que son seis.
Los tipos de datos primitivos en
JavaScript
El tipo de dato primitivo number
Para empezar veamos los tipo number. Este tipo de dato comprende
los integer (números enteros) y los float (números de coma flotante o
decimales). Quédate con estos nombres ya que los voy a utilizar a partir de ahora
en el curso.
Palabra del lenguaje nº 7 encontrada.
integer significa número entero.
Palabra del lenguaje nº 8 encontrada.
number es un tipo de dato numérico primitivo que engloba a los
enteros, decimales, etc.
Palabra del lenguaje nº 9 encontrada.
float significa número decimal o de coma flotante.
Para comprobar los tipos de datos con los que trabaja una variable lo puedes
hacer muy fácil con el operador, typeof. Algo que nos va a ser muy útil cuando
necesitemos saberlo.
Palabra del lenguaje nº 10 encontrada.
typeof es un operador que devuelve el tipo de dato que contiene una
variable.
Probemos este operador en la consola.
let numero1 = 10;
let numero2 = 5.3;
console.log(typeof(numero1));
console.log(typeof numero2);
JavaScript
Copiar
Hay dos formas de escribir el typeof. La primera con paréntesis y dentro
de ellos especificamos el valor o la segunda forma, sin los paréntesis,
con un espacio seguido del valor.
Los dos valores son identificados en la consola como number, indiferentemente de
si son números enteros o decimales, JavaScript los identifica
como number (número).
El tipo de dato primitivo string
Palabra del lenguaje nº 11 encontrada.
string es un tipo de dato alfanumérico primitivo que es capaz de
almacenar cadenas de caracteres (letras, números y símbolos).
Básicamente, representa texto.
Probemos con una variable de tipo texto.
let texto = "Bonito día para programar.";
console.log(typeof(texto));
JavaScript
Copiar
Devuelve el segundo tipo de dato primitivo con los que trabaja
JavaScript, string. A partir de ahora, llamaré a los datos de texto como string o
cadena de caracteres.
Los strings tal y como has visto hasta ahora, se escriben con caracteres
alfanuméricos (letras números y símbolos) y siempre envueltos entre comillas
dobles "", simples '' o backticks `` (acento abierto). El tema de los backticks ya
lo explicaré más adelante, ya que tienen bastantes detalles a tener en cuenta y no
funcionan en navegadores antiguos, ya que son bastante nuevos en JavaScript
(Introducidos en ES2015).
El tipo de dato primitivo boolean
Palabra del lenguaje nº 12 encontrada.
boolean es un tipo de dato primitivo que solo contiene dos posibles
valores, true o false.
Este tipo de dato solo tiene dos posibles valores o estados, true (verdadero)
o false (falso).
Palabra del lenguaje nº 13 encontrada.
true es uno de los dos posibles valores admitidos como valor booleano.
En español significa verdadero.
Palabra del lenguaje nº 14 encontrada.
false es uno de los dos posibles valores admitidos como valor booleano.
En español significa falso.
Ya veremos con tranquilidad como usarlo, principalmente lo vas a utilizar en
condicionales, para hacer que el código haga unas cosas u otras en torno a un
valor booleano.
let existo = true;
console.log(typeof(existo));
JavaScript
Copiar
El tipo de dato primitivo bigint
Palabra del lenguaje nº 15 encontrada.
bigint es un tipo de dato primitivo capaz de representar números
enteros muy grandes.
bigint es un tipo de dato primitivo el cual es capaz de almacenar grandes
números enteros como el que verás en el ejemplo a continuación:
let numeroGigante = 71738324324325324534563463n;
let otroNumeroGigante = BigInt(754396745398673498673835345);
console.log(typeof(numeroGigante));
console.log(typeof(otroNumeroGigante));
JavaScript
Copiar
Para que el valor lo identifique como bigint, hay que escribirlo con una n
al final del número o utilizando el constructor BigInt(). En este último
caso, no hay que escribir la n.
También ten en cuenta, que JavaScript es case sensitive y tienes que
escribir la B y la I de BigInt() en mayúsculas, si no, no funciona.
Palabra del lenguaje nº 16 encontrada.
BigInt es un constructor de JavaScript capaz de transformar un number
o un string en tipo de dato bigint. El string debe contener un número, si
no, no tiene sentido.
El tipo de dato primitivo symbol
Palabra del lenguaje nº 17 encontrada.
symbol es un tipo de dato primitivo con valores únicos e inmutables.
symbol es el quinto tipo de dato primitivo. Pueden ser utilizados como
identificadores de las propiedades de los objetos. Tema que aún queda lejos,
queda mucho por ver, así que no te plantes aquí y no intentes profundizar en el
tema, todo llegará.
El tipo de dato primitivo undefined
Pasemos al último tipo de dato, el cual ya has visto en este curso anteriormente,
en concreto en el capítulo 4, donde declaraba variables sin ningún valor. Sin
iniciar. Este es el tipo de dato que se asigna por defecto cuando algo como una
variable no tiene un valor definido.
De hecho, podemos ver que no hace falta ni utilizar typeof para ver el tipo de
dato, ya que el propio valor de la variable es literalmente undefined.
let variableSinDefinir;
console.log(variableSinDefinir);
JavaScript
Copiar
El tipo de dato null
Palabra del lenguaje nº 18 encontrada.
null es un tipo de dato especial que se asigna explícitamente. Además,
es una palabra reservada del lenguaje.
null es un tipo de dato especial que indica la ausencia de un valor. Es diferente
a undefined, ya que en este caso, el valor es nulo.
let vacia = null;
console.log(vacia);
JavaScript
Copiar
El tipo de dato object
Palabra del lenguaje nº 19 encontrada.
object es un tipo de dato de JavaScript. Es capaz de almacenar una
colección de claves y valores. Este tipo de dato es mucho más complejo
que los otros.
Un objeto es una colección de propiedades. Estas propiedades se pueden
identificar como claves y cada clave tiene su valor. Para que lo entiendas mejor,
es como un conjunto de variables con sus valores encapsuladas en un solo
elemento.
Aún es pronto para hablar de los objetos, así que no le des mayor importancia
todavía.
let objeto = new Object();
console.log(objeto);
JavaScript
Copiar
Palabra del lenguaje nº 20 encontrada.
new es un operador que permite crear una instancia de un tipo de
objeto.
Palabra del lenguaje nº 21 encontrada.
La palabra Object ( Object() ) es un constructor de objetos.
¿Cómo funcionan los comentarios en JavaScript?
Los comentarios en JavaScript
Capítulo 7: ¿Cómo funcionan los comentarios en JavaScript?
En este séptimo capítulo vas a ver para que son los comentarios y cuales son las
formas de crearlos. Un tema muy simple pero importante.
Algo indispensable en cualquier lenguaje de programación son los comentarios.
¿Para qué son?
Son para anular trozos de código que no queremos borrar por si necesitamos
más tarde, para ir anotando para que sirve cada parte del código, para dar
consejos, pequeñas sugerencias, advertencias, etc. de esta forma, sabremos en el
futuro de un vistazo para que sirve cada parte y lo sabrán otros desarrolladores
que lean nuestro código.
Javascript tiene dos tipos de comentarios antiguos, es decir que llevan desde sus
inicios. El de una sola línea y el multilínea. También hay una tercera forma más
moderna que veremos al final de este capítulo.
Comentarios de una línea de JavaScript
// let numero1 = 77;
let numero1 = 88
JavaScript
Copiar
La primera línea está comentada. Si llamases a numero1 en un console.log() ¿qué
crees que pasaría?, ¿habría algo incorrecto o errores por estar declarada dos
veces la misma variable con let?
La respuesta es que no. Todo correcto, ya que la primera línea, al estar
comentada, es ignorada por el navegador. Es como si no existiera. Puedes anular
código o hacer cualquier tipo de comentario, nunca te dará un error.
Estos comentarios también se pueden poner a modo explicativo al final de la
línea de código sin anularla, a modo de feedback (retroalimentación) o cualquier
cosa que se te ocurra.
let numero1 = 77; //Este es el primer número para realizar la
operación.
let numero2 = 88; //Este es el segundo número para realizar la
operación.
JavaScript
Copiar
Evidentemente, no hace falta que vayas escribiendo línea por línea lo que hace el
código. Cuando escriba código más complejo, algunas veces incluiré comentarios
y te harás una idea de cuando utilizar comentarios. Por ejemplo, si tienes tres
funciones en un código, pues escribes tres comentarios indicando brevemente lo
que hacen. Si están relacionadas, quizás te baste con un comentario.
La cuestión aquí es documentar el código para que cuando lo edites más
adelante o lo edite otra persona, sepa rápidamente donde está cada cosa y como
funciona. Mira si son importantes.
Los comentarios multilínea en JavaScript
Pasamos al segundo tipo de comentarios, los multilínea. Para estos debemos
utilizar en lugar de la doble barra, una barra y el símbolo asterisco para la
apertura (/*) y lo mismo pero a la inversa para el cierre (*/).
/* let numero1 = 77;
let numero1 = 88; */
JavaScript
Copiar
De esta forma, se anulan todas las líneas englobadas, no solo dos como en el
ejemplo, todas las que quieras.
También he visto más de una vez escribirlos así:
/* let numero1 = 77;
* let numero2 = 88;
* let numero3 = 99;
* let numero4 = 00;
* let numero5 = 11; */
JavaScript
Copiar
Estos asteriscos extra en cada línea no representan nada, solo es organizativo y
cuestión de gustos.
Al poder anular bloques enteros de código, podemos utilizar los comentarios
como una herramienta de depuración, ya que podremos y comentando trozos y
ver lo que ocurre sin ellos, de modo que encontremos fallos.
Malas prácticas con los comentarios
Las primeras malas prácticas ya te las he dicho, no poner comentarios es una
mala práctica. Poner demasiados también.
Otra mala práctica es incluir comentarios entre el propio código. Algo que puede
hacerlo más malo de leer y crear confusiones. Aquí tienes un ejemplo:
let numero1 = /* Aquí va un valor numérico */ 77;
JavaScript
Copiar
Si que puedes utilizar un comentario multilínea en una sola línea, lo que no es
nada legible es añadir comentarios en medio del código. En este caso, con lo
poco que te he enseñado hasta ahora, puede que no lo veas bien, pero si las
líneas son muy elaboradas como por ejemplo una ecuación en una función con
varias líneas de operaciones matemáticas y las vas mezclando con comentarios
por en medio, va a ser un verdadero trauma para quien toque ese código.
Los comentarios hashbang de JavaScript
Palabra del lenguaje nº 22 encontrada.
hashbang es el más moderno de los tipos de comentarios en JavaScript.
Se trata de una de las novedades de JavaScript. Los comentarios hashbang solo se
pueden utilizar una sola vez en todo un documento o script de JavaScript y al
absoluto comienzo, aquí no vale ni un espacio en blanco, mira los siguientes
ejemplos:
#!
let numero1 = 77;
JavaScript
Copiar
#! let numero1 = 77;
JavaScript
Copiar
Desde luego, los comentarios hashbang no están hechos para anular una línea de
código aunque lo puedan hacer una sola vez por documento o fragmento de
código. Están diseñados para poder especificar la ruta a un intérprete de
JavaScript en concreto que ejecute todo el script. Aquí tienes un ejemplo:
#!/usr/bin/env node
JavaScript
Copiar
No profundicemos más en este tema de los hashbang hasta tener que utilizarlos.
De momento, utiliza solo el comentario multilínea y el de una sola línea.
* let numero5 = 11; */
* let numero5 = 11; */
¿Cómo funciona el escape de caracteres en JavaScript?
Capítulo 8: El escape de caracteres y document.write
Tenemos cuatro formas de crear strings, las tres primeras ya las sabes por el capítulo
anterior. La cuarta es utilizando el constructor de strings new String():
let texto1 = "Esto es un string";
let texto2 = 'Esto es un string';
let texto3 = `Esto es un string`;
let texto4 = new String("Esto es un string");
Escape de caracteres en
JavaScript
¿Por qué hay varias formas de crear un string?
La respuesta es el escape de caracteres, si queremos mostrar literalmente un
tipo de comillas, estas no pueden ser las mismas que envuelven el string, ya que
esto va a generar errores.
El siguiente ejemplo producirá un error:
let texto1 = "Esto es un "string".";
console.log(texto1);
JavaScript
Copiar
Uncaught SyntaxError: Unexpected identifier
Plain text
Copiar
Este error dice que hay un error de sintaxis, un identificador no identificado,
producido por culpa de tener comillas dentro de las comillas. En este caso,
podemos hacer dos cosas, utilizar comillas simples dentro de las dobles o
cambiar las dobles por simples y dejar dentro las dobles.
let texto1 = "Esto es un 'string'.";
console.log(texto1);
JavaScript
Copiar
Esto es un 'string'.
Plain text
Copiar
let texto1 = 'Esto es un "string".';
console.log(texto1);
JavaScript
Copiar
Esto es un "string".
Plain text
Copiar
Si quieres utilizar las mismas comillas para mostrarlas literalmente, tienes otra
opción, el escape de comillas.
let texto1 = "Esto es un \"string\".";
console.log(texto1);
JavaScript
Copiar
Funciona igual con las otras comillas.
Notaciones de escape en strings
Tenemos caracteres especiales para realizar escape de caracteres, como por
ejemplo, para los saltos de línea o las tabulaciones.
No las vamos a ver todas en este nivel del curso, ya que hay unas cuantas y
algunas más complejas que otras.
Saltos de línea en JavaScript
Con el carácter \n se puede hacer un salto de línea directamente sobre código
JavaScript.
let texto1 = "Esto es un es una línea.\nY esta es otra.";
alert(texto1);
JavaScript
Copiar
Mostrar texto desde JavaScript en una hoja html
Una de las cosas que pronto querrás hacer es poder mostrar texto directamente
sobre la página html, en el <body>. Hasta ahora no te he mostrado como, solo he
estado mostrando ejemplos en la consola y en "alerts". Ha llegado el momento.
Para conseguir tan maña hazaña lo haremos con document.write().
Palabra del lenguaje nº 24 encontrada.
Con el objeto document es posible manipular las propiedades y
contenido de los elementos principales de las páginas web.
Palabra del lenguaje nº 25 encontrada.
Método write perteneciente al objeto document. Escribe datos en el
propio documento.
De forma simple de momento, con document, señalamos el documento sobre el
que tenemos el script de JavaScript o la hoja externa enlazada. Con una de sus
funcionalidades o herramientas, (método write()) conseguimos decirle que
escriba en el documento html. Ahora, ya sabes comunicarte un poco con las
páginas html desde JavaScript.
let texto1 = "Esto es un es una línea.\nY esta es otra.";
document.write(texto1);
JavaScript
Copiar
Esto se ha conseguido sin escribir una sola línea en el <body> del documento
html.
Puede que te hayas dado cuenta de que hay un fallo. Las líneas no se han
separado. El salto de línea (\n) ha sido ignorado. Esto ocurre, porque con
el document.write() es como si estuviéramos escribiendo en html. En html no
existe este salto de línea. Probemos esta teoría y pongamos una etiqueta
html <br>; a ver si funciona.
let texto1 = "Esto es un es una línea.<br>Y esta es otra.";
document.write(texto1);
JavaScript
Copiar
Indicamos literalmente en el string un salto de línea html donde queramos y
desde el document.write() se encargará de interpretarlo correctamente, ya que
JavaScript no sabe que es una etiqueta <br>.
¿Cómo funciona el método charAt() de JavaScript?
Capítulo 9: El método charAt()
Ya es hora de empezar a utilizar métodos con los strings, ya explicaré bien lo que
es un método, ahora la definición no es lo importante.
Veamos algo interesante, podemos acceder a una posición exacta de cualquier
string de una forma muy sencilla, utilizando el método charAt(). Este método es
capaz de devolver solo el carácter que le indiquemos con una posición. Aquí
tienes un ejemplo:
Palabra del lenguaje nº 26 encontrada.
charAt es un método capaz de devolver el valor del número de posición
de un carácter en un string.
let texto1 = "Estamos viendo los strings.".charAt(1);
console.log(texto1);
JavaScript
Copiar
s
Plain text
Copiar
La salida en la consola es una sola letra, la s. ¿Por qué?, la respuesta es que
la s corresponde a la posición 1. Algo un poco confuso si no has programado
antes, ya que podríamos pensar que la primera posición corresponde a la
primera letra. Esto suele ser así en programación, casi siempre se empieza a
contar desde el número 0. Si ponemos el 0 en el charAt() si que me va a devolver
la E, que en este caso está en dicha posición.
let texto1 = "Estamos viendo los strings.".charAt(0);
console.log(texto1);
JavaScript
Copiar
E
Plain text
Copiar
Como puedes ver, podemos acceder a cualquier posición del string. Aún no le
verás más utilidad a esto que una simple práctica, no obstante, cuando
empecemos con los condicionales empezarás a verle más utilidad a esto.
Hay otra forma algo más corta de hacer esto mismo, especificando un número en
unos corchetes.
let texto1 = "Estamos viendo los strings."[8];
console.log(texto1);
JavaScript
Copiar
v
Plain text
Copiar
Ten en cuenta, que yo lo estoy escribiendo directamente dentro de una variable,
pero puedes hacerlo dentro de otras variables o directamente sobre un alert() o
un console.log(). Es todo lo mismo, solo tienes que ir practicando hasta que lo
escribas sin pensar allá donde se pueda.
let texto1 = "Estamos viendo los strings.";
console.log(texto1[0]);
JavaScript
Copiar
E
Plain text
Copiar
let texto1 = "Estamos viendo los strings.";
let guardaLetra = texto1[5];
console.log(guardaLetra);
JavaScript
Copiar
o
Plain text
Copiar
Esta vez, en lugar de almacenar una posición en la propia variable, que por otro
lado, acaba almacenando solo un carácter en la variable, pues puedo tener el
valor de la variable texto1 y guardar a parte para cualquier propósito el valor del
carácter devuelto.
Si el string de texto1 va cambiando, los valores que se guarden en guardaLetra no
cambian, se queda el valor del momento que se ejecutó. Aquí puedes apreciarlo:
let texto1 = "Estamos viendo los strings.";
let guardaLetra = texto1[0];
console.log(guardaLetra);
texto1 = "Cambiado.";
console.log(guardaLetra);
JavaScript
Copiar
E
E
Plain text
Copiar
En ningún momento toma el valor C del string del texto1 porque es algo que se
ejecuta a posteriori de la llamada a la posición 0 de guardaLetra. Esto es debido
al flujo y al tiempo de ejecución.
Si ya programas esto es muy obvio. Si es la primera vez, puede volverse un poco
raro e incomprensible.
Por supuesto, en cualquiera de los ejemplos, puedes cambiar los corchetes
por .charAt(), funcionan igual, utiliza lo que te sea más cómodo.
Las posiciones de los strings
Para asegurarme de que queda claro, te dejo aquí un ejemplo de como son las
posiciones de un string:
Los tipos numéricos y aritmética básica
Capítulo 10: Los tipos de números en JavaScript y operadores
aritméticos básicos
Integers en JavaScript
Dejamos un poco los strings para ir a por los tipos de datos numéricos.
En JavaScript tenemos un único tipo de dato numérico el conocido
como number para todos los tipos numéricos. Ya sea un integer, un float, etc.
La excepción de esto es que se añadió un segundo tipo numérico aparte
de number, el bigint del que he hablado en otro capítulo.
Los números enteros son los conocidos como integers.
Recuerda que para ponerlos en una variable, debemos hacerlo sin comillas:
let numero1 = 45;
JavaScript
Copiar
Si lo escribes con comillas, aunque sea un número, javascript lo va a identificar
como un string y no podrás hacer operaciones matemáticas a no ser de que lo
transformes, que esto ya lo veremos más adelante.
floats en JavaScript
Los float los indicamos con un punto, una coma daría un error:
let numero1 = 45.78;
JavaScript
Copiar
Operaciones aritméticas básicas
Estos cuatro operadores son los más básicos para hacer cálculos en JavaScript.
Coinciden con los correspondientes operadores de matemáticas.
Operador Operación
+ Realiza una suma. También se utiliza para concatenar.
- Realiza una resta.
* Realiza una multiplicación.
/ Realiza una división.
Vamos a ver estos cuatro operadores aritméticos básicos y como utilizarlos en
variables.
La suma en JavaScript
El operador de suma de JavaScript, también conocido como operador de adición
y de concatenación, permite realizar sumas si tenemos dos valores numéricos.
let numero1 = 45;
let numero2 = 55;
let resultadoOperacion = numero1 + numero2;
console.log(resultadoOperacion);
JavaScript
Copiar
100
Plain text
Copiar
El console.log() devuelve 100. El resultado es correcto.
En esta operación he hecho algo tan sencillo como decirle a JavaScript que sume
el valor que tiene numero1 y el valor de numero2.
La resta en JavaScript
El operador de resta de JavaScript, también conocido como operador de
sustracción, permite realizar restas con dos valores numéricos.
let numero1 = 45;
let numero2 = 55;
let resultadoOperacion = numero1 - numero2;
console.log(resultadoOperacion);
JavaScript
Copiar
-10
Plain text
Copiar
La multiplicación en JavaScript
El operador de multiplicación de JavaScript permite realizar multiplicaciones con
dos valores numéricos.
let numero1 = 45;
let numero2 = 55;
let resultadoOperacion = numero1 * numero2;
console.log(resultadoOperacion);
JavaScript
Copiar
2475
Plain text
Copiar
La división en JavaScript
El operador de división de JavaScript permite realizar divisiones con dos valores
numéricos.
let numero1 = 10;
let numero2 = 2;
let resultadoOperacion = numero1 / numero2;
console.log(resultadoOperacion);
JavaScript
Copiar
5
Plain text
Copiar
Los operandos (números con los que operas) podrán ser enteros, negativos,
positivos, decimales, etc. pero siempre van a devolver el tipo de dato que sea
necesario. Veamos un ejemplo:
let numero1 = 10.5;
let numero2 = 6;
let resultadoOperacion = numero1 + numero2;
console.log(resultadoOperacion);
JavaScript
Copiar
16.5
Plain text
Copiar
El operando contenido en la primera variable (numero1) es un número decimal,
mientras que el segundo valor es entero. Esto no supone un problema para
JavaScript que sabe perfectamente que si operas con un decimal y un entero, el
resultado tiene que ser en decimales. No obstante, también sabe que si un
decimal y un entero o dos decimales dan un valor entero, el resultado se va a
mostrar con un número entero como en el siguiente ejemplo:
let numero1 = 10.5;
let numero2 = 6.5;
let resultadoOperacion = numero1 + numero2;
console.log(resultadoOperacion);
JavaScript
Copiar
17
Plain text
Copiar
Realizar múltiples operaciones a la vez
Podemos almacenar en una variable operaciones que den como resultado un
valor.
let operacion = 10 + 15 * 3 / 2 - 80;
console.log(operacion);
JavaScript
Copiar
La variable no almacena exactamente esta operación, más bien la soluciona y
después almacena el resultado.
-47.5
Plain text
Copiar
Realizar operaciones con paréntesis en JavaScript
También es posible realizar operaciones con paréntesis para establecer
prioridades a ciertas operaciones frente a otras, tal y como hacemos en
matemáticas.
let operacion = (10 + 15) * 3 / 2 - 80;
console.log(operacion);
JavaScript
Copiar
-42.5
Plain text
Copiar
El resultado esta vez es muy diferente, ya que para calcular esto, antes lo hacía
así:
15 * 3 = 45 / 2 = 22.5 + 10 = 32.5 - 80 = -47.5
Por si no tienes el tema de las prioridades muy fresco, te explico que en
matemáticas y en JavaScript se da prioridad a las operaciones de multiplicación
y división, después a la suma y resta que se hacen al final, sin depender del orden
en el que se escriba la operación.
En el caso de este segundo ejemplo con los paréntesis, la prioridad se le da a la
suma independientemente de si hay multiplicación o división. El resultado se
calcula así: 10 + 15 = 25 * 3 = 75 / 2 = 32.5 - 80 = -42.5
¿Qué son y cómo funcionan los arrays en JavaScript?
Capítulo 11: Introducción a los arrays en JavaScript
Este capítulo número 11 lo voy a dedicar a explicar un poquito por encima lo que
son los arrays. Un tema que ya empieza a poner mucho más interesante el curso,
ya que dan para hacer muchas cosas.
Palabra del lenguaje nº 27 encontrada.
Un array es una forma ordenada de guardar un conjunto de elementos
en una sola variable.
Los arrays, arreglos o matrices en español, son muy importantes. Son
contenedores como las variables normales pero con la gran diferencia que son
capaces de almacenar diversos valores y no solo uno como hemos visto en las
otras variables hasta ahora.
Como dato "random", si ya sabes programar en Python, que sepas que
los array son como las listas, son mutables y pueden almacenar más de
un elemento.
Veamos un ejemplo:
let pizzaMargarita = ["masa","tomate","queso","especias"];
Esta variable llamada pizzaMargarita que almacena un array, podría ser la que
almacenara los ingredientes que solicita un cliente a una pizzería a través de su
sitio web.
Cuando sepas más JavaScript serás capaz de hacer una página de pedidos en la
que el usuario vaya seleccionando ingredientes para su pizza y estos se vayan
almacenando en un array como el del ejemplo.
Con los elementos guardados en el array, podrás hacer muchas cosas, por
ejemplo, mostrarle al cliente lo que ha pedido, generarle una factura con todo
detalle, avisar al cocinero de la pizza de lo que tiene que preparar...
Este es un caso práctico de infinitos que puedes diseñar gracias a la puerta que se
acaba de abrir, los arrays.
Si tuviéramos que almacenar toda esta información en variables con un solo
valor, necesitaríamos cuatro variables en lugar de una:
let pizzaMargaritaIngradiente1 = "masa";
let pizzaMargaritaIngradiente2 = "tomate";
let pizzaMargaritaIngradiente3 = "queso";
let pizzaMargaritaIngradiente4 = "especias";
Por no decir que para que nuestro código fuese generando variables así, de forma
autónoma, a medida que el usuario fuese generando el pedido, sería mucho más
largo, difícil y tedioso de escribir.
Veamos qué tipo de dato devuelve la consola en esta variable con un array
dentro:
La información que nos devuelve es bastante completa, primero muestra el
número de elementos totales del array (4), muestra cuales son y no solo eso,
también te muestra todas las posiciones del array, que se cuentan como los
strings, a partir del número 0.
Acceder a las posiciones de un
array
En el capítulo 9 ya te empecé a introducir a esto practicando con las posiciones
de los strings. Con los array, podemos acceder de forma similar a cada
elemento del array, con su número de posición, el que aparece detallado en la
consola. en la imagen superior.
Si queremos acceder al primer elemento, lo haremos con un 0. Y lo que quiero
hacer, para practicar es almacenarlo en otra variable. Es decir, crear una copia
del elemento cero en otro contenedor (variable).
let pizzaMargarita = ["masa","tomate","queso","especias"];
let guardaElementoPizza = pizzaMargarita[0];
console.log(guardaElementoPizza);
Como puedes ver, funciona como cuando usabas charAt() con un string. Solo
que en este caso, no sirve charAt(), ya que este método es para devolver un
carácter de un string, no un string entero. Para que lo entiendas bien, solo
funciona con strings.
let pizzaMargarita = ["masa","tomate","queso","especias"];
let guardaElementoPizza = pizzaMargarita.charAt(0);
console.log(guardaElementoPizza);
JavaScript
Copiar
El resultado es un error, ya que intenta leer un carácter de un string y le estoy
dando un array.
No obstante, puedes perfectamente acceder primero a un elemento de un array y
seguido decirle que te obtenga el carácter de una posición con charAt().
let pizzaMargarita = ["masa","tomate","queso","especias"];
let guardaElementoPizza = pizzaMargarita[0].charAt(3);
console.log(guardaElementoPizza);
El resultado esta vez es correcto, accede primero con los corchetes al elemento
que quieras del array y seguidamente, accede a un carácter del elemento
seleccionado con charAt().
También puedes acceder a esto sin charAt() con corchetes dobles:
let pizzaMargarita = ["masa","tomate","queso","especias"];
let guardaElementoPizza = pizzaMargarita[0][3];
console.log(guardaElementoPizza);
El resultado es exactamente el mismo, más fácil de escribir incluso:
¿Cómo funciona la concatenación en JavaScript?
Capítulo 12: Concatenar strings
Voy a tratar un tema crucial como es la concatenación. La concatenación es el
hecho de unir dos strings. Pero, no es tan simple como esto. Ahora lo verás.
Ejemplo de concatenación en JavaScript
¿Qué tal si empezamos con un ejemplo de concatenación?
let texto1 = "Esto es Programación Fácil." + " Estás en el curso
de" + " JavaScript.";
document.write(texto1);
¿Curioso, verdad? Acabo de unir tres strings en uno solo. Los he "sumado" por
decirlo de alguna forma, aunque por supuesto, esto no es una suma, son dos
concatenaciones. El texto no se puede sumar, si se puede unir.
Esto podrían ser varias variables con strings y funcionaría igual:
let texto1 = "Esto es Programación Fácil.";
let texto2 = " Estás en el curso de";
let texto3 = " JavaScript.";
let textoCompleto = texto1 + texto2 + texto3;
document.write(textoCompleto);
Además, puedes concatenar strings sin variable a estas variables.
let texto1 = "Esto es Programación Fácil.";
let texto2 = " Estás en el curso de";
let texto3 = " JavaScript.";
let textoCompleto = texto1 + texto2 + texto3 + " Soy un
acoplado...";
document.write(textoCompleto);
JavaScript
Copiar
Ya puedes diferenciar lo que es una suma entre dos números (number) o entre
variables contenedoras de números y concatenar o unir dos strings o variables
contenedoras de strings.
Concatenar con arrays
Aprovechando que ya te mostré el tema de los array, quiero que sepas que es
posible concatenar strings contenidos en un array. Solo llama a las posiciones
que creas necesarias.
let palabras = ["Hola.", " Hoy hace un", " día", " estupendo."];
let textoCompleto = palabras[0] + palabras[1] + palabras[2] +
palabras[3];
document.write(textoCompleto);
JavaScript
Copiar
Ves haciendo pruebas, el orden en el que llames a las posiciones de un array da
igual.
Por cierto, puedes llamar a posiciones sueltas de más de un array, solo pon el
nombre y la posición. Tú tienes el control total de JavaScript.
Concatenar números en strings
Puedes almacenar valores numéricos en strings. Estos podrán ser operados por
JavaScript. No obstante, de esta forma, concatena los dos strings, simplemente
los une y no opera como si fueran números. Los trata como cadena de caracteres.
let numeroString1 = "56";
let numeroString2 = "44";
let sumaStrings = numeroString1 + numeroString2;
document.write(sumaStrings);
Aunque uno de los dos números fuese number, me los va a concatenar.
Conversiones de valores number y string en JavaScript
Capítulo 13: Convertir strings a number y viceversa
En este capítulo aprenderás a convertir un string con un valor numérico a tipo
de dato number y un number a string.
Ejemplos prácticos de
conversiones de string a number
JavaScript pone las conversiones extremadamente fáciles. Solo necesitas un
string con un valor numérico y podrás convertirlo a number para poder operar
con él.
let num1 = "7";
let num2 = "5";
let operacion = num1 + num2;
document.write(operacion);
El valor de string "7" se concatena o une al valor de string "5". No opera con ellos.
Podemos intentar forzar esto cambiando un string por un number a ver que pasa.
let num1 = 7;
let num2 = "5";
let operacion = num1 + num2;
document.write(operacion);
Nada, sigue concatenando. Hay que convertir los strings a numbers. Esto lo
haremos con Number().
Palabra del lenguaje nº 28 encontrada.
Number() es un método capaz de convertir strings en number. En caso
de que el string contenga algún carácter que no sea un número
devuelve un valor de NaN.
let num1 = "7";
let num2 = "5";
let operacion = Number(num1) + Number(num2);
document.write(operacion);
JavaScript
Copiar
En este caso, convierte directamente los valores del string para poder operar con
ellos. Pero lo strings siguen siendo strings. Ahora si que opera correctamente.
¿Qué ocurre si le intentamos hacer esta conversión con un valor no numérico?
let texto1 = "Puro texto";
let convertirString = Number(texto1);
document.write(typeof(convertirString) + " " + convertirString);
JavaScript
Copiar
Lo que acabo de hacer es forzar una conversión de un string que no tiene un valor
numérico a tipo number. Esto no da errores en la consola, JavaScript es flexible
en este caso. Si miramos el tipo de dato con typeof, podemos ver que aunque no
es un número en absoluto, se ha transformado a number. Ten cuidado con esto,
ya que puedes crear fácilmente incoherencias. Después he concatenado en
el document.write() un string con un espacio para separar el tipo de dato del
valor devuelto (es un simple espacio).
Mirando el valor que ha almacenado, vemos que no almacena realmente el valor
del string. En su lugar, te va a devolver NaN.
Palabra del lenguaje nº 29 encontrada.
NaN son las siglas en inglés de Not a Number. "No es un número" en
español.
¿Cómo convertir de number a
string en JavaScript?
También es muy fácil de hacer. Solo tienes que utilizar el método toString().
Palabra del lenguaje nº 30 encontrada.
toString es un método capaz de convertir tipos de datos number a
string.
let num1 = 7;
let transformaNumber = toString(num1);
document.write(typeof(transformaNumber));
JavaScript
Copiar
Operadores de JavaScript
Capítulo 14: Los operadores de incremento y decremento,
exponenciación, módulo y asignación
Capítulo 14 bastante cargadito, ya que voy a enseñarte los operadores de
incremento y decremento, exponenciación, módulo y asignación. Empecemos
por el incremento y decremento.
Los operadores de incremento y
decremento
Con estos operadores se puede incrementar o decrementar un valor numérico
en 1. Veamos un ejemplo:
let numero1 = 7;
numero1++;
console.log(numero1);
JavaScript
Copiar
En este caso estoy incrementando en uno añadiendo el operador de
incremento ++ en la llamada.
8
Plain text
Copiar
Hagamos lo mismo pero con el operador decremento, con --
let numero1 = 7;
numero1--;
console.log(numero1);
JavaScript
Copiar
En este caso estoy decrementando en uno añadiendo el operador -- en la
llamada.
6
Plain text
Copiar
Por si no entiendes muy bien como funciona esto te pongo aquí un equivalente
menos óptimo:
let numero1 = 7;
let numero2 = 7;
numero1 = 7 + 1;
numero2 = 7 - 1;
console.log(numero1);
console.log(numero2);
JavaScript
Copiar
Tanto el operador ++ como -- tienen la capacidad de asignar como lo hace el
símbolo igual, solo que en este caso con un valor de 1.
8
6
Plain text
Copiar
Operadores de asignación de
JavaScript
Lo de poder incrementar o decrementar en 1 está muy bien, pero, ¿y si queremos
hacerlo en un número mayor?
Ahí es donde entran los operadores de asignación.
Ya sabes de sobra que el símbolo u operador = sirve para asignar valores a
variables. Tenemos las variantes de incremento y decremento para incrementar
o decrementar en cualquier valor numérico, no solo en 1.
let numero1 = 7;
numero1 += 10;
let numero2 = 7;
numero2 -= 50;
console.log(numero1);
console.log(numero2);
JavaScript
Copiar
En este caso se le suma o se le resta y a la vez se asignan valores. Esto es mucho
más corto y eficiente que por ejemplo, hacer esto: numero1 = numero1 + 10;
17
-43
Plain text
Copiar
También tenemos las variantes de multiplicación y división. Por cierto, en
JavaScript hay muchos más operadores de asignación. No los veremos todavía.
let numero1 = 10;
numero1 *= 15;
let numero2 = 10;
numero2 /= 2;
console.log(numero1);
console.log(numero2);
JavaScript
Copiar
150
5
Plain text
Copiar
¿Cómo funciona la exponenciación en JavaScript?
En JavaScript contamos con el operador de exponenciación ** juntando dos
símbolos de multiplicación. Esto permite obtener el exponente de un número de
forma rápida y muy fácil.
let exponente = 2**2;
console.log(exponente);
JavaScript
Copiar
Dos elevado a dos es como hacer 2 * 2.
4
Plain text
Copiar
Entonces, ¿Porqué no usar una simple multiplicación? Esto contesta a tu posible
pregunta:
let exponente = 2**10;
console.log(exponente);
JavaScript
Copiar
210 es como hacer 2 x 2 = 4 * 2 = 8 * 2 = 16 * 2 = 32 * 2 = 64 * 2 = 128 *
2 = 256 * 2 = 512 * 2 = 1024. Aquí ya puedes ver lo complicado que se pone
con números grandes si lo hacemos como una simple multiplicación.
1024
Plain text
Copiar
El operador módulo
Para terminar veamos el operador módulo % también conocido como resto. Este
operador hace la división entre dos números y devuelve el resto, no el resultado
como hace el operador de división.
let modulo = 10 % 3;
console.log(modulo);
JavaScript
Copiar
10 dividido entre 3 da como resultado 3, pero nos queda un 1, ese es el resto y lo
que devuelve este operador.
1
Plain text
Copiar
Operadores de comparación de JavaScript
Capítulo 15: Los operadores de comparación
Capítulo previo a los condicionales. En el siguiente capítulo llegamos a un tema
fundamental en los lenguajes de programación y por supuesto en JavaScript. En
este capítulo te voy a enseñar los operadores de comparación, algo que
necesitarás saber antes de ponerte con los condicionales.
Operador de comparación igual
que
A diferencia de lo que puedas pensar, tenemos el operador que en JavaScript
significa igual con el símbolo de doble igual ==. No te confundas con el símbolo
igual =. Uno solo significa asignación. Por ejemplo, este operador igual está
asignando a la variable let numero = 10; el valor de 10, no dice que sea igual a 10
por confuso que pueda parecer.
Para los siguientes ejemplos, voy a crear unas cuantas variables y las voy a
comparar con booleanos, true o false.
let numero1 = 10;
let numero2 = 10;
let numero3 = 20;
let numero4 = 19;
let comparador = numero1 == numero2;
console.log(comparador);
JavaScript
Copiar
Puesto que los valores almacenados en las dos variables son iguales, esta
comparación devuelve true (verdadero). Son iguales.
En lenguaje "humano" podríamos traducir esto como ¿Es igual el valor
de numero1 al de numero2? Verdadero, son iguales.
true
Plain text
Copiar
let numero1 = 10;
let numero2 = 10;
let numero3 = 20;
let numero4 = 19;
let comparador = numero1 == numero3;
console.log(comparador);
JavaScript
Copiar
Esta vez devuelve false (falso) porque efectivamente, los dos valores son
diferentes.
false
Plain text
Copiar
Operador de comparación
diferente que
Este operador, diferente que !=, es todo lo contrario al anterior, devuelve true si
los valores comparados son diferentes y false si son iguales.
let numero1 = 10;
let numero2 = 10;
let numero3 = 20;
let numero4 = 19;
let comparador = numero1 != numero3;
console.log(comparador);
JavaScript
Copiar
Lo dicho, como son diferentes, devuelve true, que quiere decir que
verdaderamente son diferentes.
true
Plain text
Copiar
let numero1 = 10;
let numero2 = 10;
let numero3 = 20;
let numero4 = 19;
let comparador = numero1 != numero2;
console.log(comparador);
JavaScript
Copiar
Puesto que son iguales, no se cumple la condición del diferente que != y nos
devuelve false. Es falso que sean diferentes.
false
Plain text
Copiar
Operador de comparación mayor
que
También tenemos un operador para comparar si un valor es mayor que otro, el
operador >
let numero1 = 10;
let numero2 = 10;
let numero3 = 20;
let numero4 = 19;
let comparador = numero3 > numero1;
console.log(comparador);
JavaScript
Copiar
Puesto que 20 es mayor que 10, devuelve true.
true
Plain text
Copiar
También tenemos un operador para comparar si un valor es mayor que > otro.
let numero1 = 10;
let numero2 = 10;
let numero3 = 20;
let numero4 = 19;
let comparador = numero4 > numero3;
console.log(comparador);
JavaScript
Copiar
el valor de numero4 es menor que el de numero3, por lo tanto, false.
false
Plain text
Copiar
Operador de comparación menor
que
Tenemos lo contrario a mayor que, el operador menor que <, que evalúa si un
valor es menor que otro.
let numero1 = 10;
let numero2 = 10;
let numero3 = 20;
let numero4 = 19;
let comparador = numero1 < numero2;
console.log(comparador);
JavaScript
Copiar
Dado que los dos valores son iguales, devuelve false.
false
Plain text
Copiar
let numero1 = 10;
let numero2 = 10;
let numero3 = 20;
let numero4 = 19;
let comparador = numero1 < numero4;
console.log(comparador);
JavaScript
Copiar
Esta vez, el valor de numero1 es menor que el valor de numero4, en este caso, se
cumple la condición y devuelve true.
true
Plain text
Copiar
Operador de comparación mayor
o igual que
Hay una variante de mayor que, se trata de mayor o igual que >=. En este caso,
da true si el valor es mayor o es igual, en caso contrario devuelve false.
let numero1 = 10;
let numero2 = 10;
let numero3 = 20;
let numero4 = 19;
let comparador = numero1 >= numero2;
console.log(comparador);
JavaScript
Copiar
El valor de numero1 y numero2 es igual, por lo tanto, se cumple la condición.
true
Plain text
Copiar
let numero1 = 10;
let numero2 = 10;
let numero3 = 20;
let numero4 = 19;
let comparador = numero3 >= numero2;
console.log(comparador);
JavaScript
Copiar
El valor de numero3 es mayor que numero2, aquí también se cumple la condición.
true
Plain text
Copiar
let numero1 = 10;
let numero2 = 10;
let numero3 = 20;
let numero4 = 19;
let comparador = numero1 >= numero3;
console.log(comparador);
JavaScript
Copiar
El valor de numero1 no es ni mayor ni igual que el valor de numero3, por lo
tanto, false.
false
Plain text
Copiar
Operador de comparación menor
o igual que
El operador menor o igual que da true si el valor es menor o es igual, en caso
contrario devuelve false.
let numero1 = 10;
let numero2 = 10;
let numero3 = 20;
let numero4 = 19;
let comparador = numero1 <= numero2;
console.log(comparador);
JavaScript
Copiar
El valor de numero1 y numero2 es igual, por lo tanto, se cumple la condición.
true
Plain text
Copiar
let numero1 = 10;
let numero2 = 10;
let numero3 = 20;
let numero4 = 19;
let comparador = numero2 <= numero3;
console.log(comparador);
JavaScript
Copiar
El valor de numero2 es menor que numero3, aquí también se cumple la condición.
true
Plain text
Copiar
let numero1 = 10;
let numero2 = 10;
let numero3 = 20;
let numero4 = 19;
let comparador = numero3 <= numero1;
console.log(comparador);
JavaScript
Copiar
El valor de numero3 no es ni menor ni igual que el valor de numero1, por lo
tanto, false.
false
Plain text
Copiar
Todavía tenemos más operadores, esto ya queda seguramente para el nivel
intermedio del curso. En el siguiente capítulo empezamos con los condicionales,
¡no te lo pierdas!
El condicional if else de JavaScript
Capítulo 16: El condicional if else
¿Qué son los condicionales?
Estamos en un punto necesario para cualquier lenguaje de programación, los
condicionales. Estos nos permiten crear programas capaces de tomar decisiones
de todo tipo. Por ejemplo, si se pulsa el botón "x" haz esto, en cambio, si se
pulsa el "y", haz esto otro.
El condicional if else
De los condicionales de JavaScript, if else, será el que verás y utilizarás con
más frecuencia.
Aquí tienes la sintaxis del condicional if else:
// Pseudocódigo.
if (condición) { bloque de código si se cumple }
else { bloque de código si no se cumple }
JavaScript
Copiar
Esto quiere decir que a partir de la condición que le especifiques, decidirá si se
cumple o no. Si se cumple, ejecuta el bloque del if, si no, el del else, así de
simple. Estas decisiones las toma mediante valores booleanos, por eso la
importancia del capítulo anterior.
Palabra del lenguaje nº 31 encontrada.
if evalúa una expresión condicional. Si se cumple dicha condición se
ejecuta, si no, da paso a otras estructuras o continúa la ejecución
normal del flujo de ejecución.
Palabra del lenguaje nº 32 encontrada.
else está sujeto a la condición del if. Si se cumple dicha condición no se
ejecuta dicho else. En cambio, si la condición del if es falsa, se ejecuta el
código del else.
Antes de más teórica, veamos una pequeña práctica.
let numero1 = 75;
if (numero1 > 60){
alert("El número es mayor que 60.");
} else {
alert("El número es menor que 60.");
}
JavaScript
Copiar
Es fundamental no equivocarse con el orden de los paréntesis, de las llaves y los
puntos y coma, si no, puede no funcionar como toca o dar error directamente.
Se utiliza la palabra reservada if. Entre paréntesis escribe la condición que
quieras. Por ejemplo, dos valores con un operador de comparación. Abre la llave
del if, antes del cierre escribe todo el código que quieras. Separa cada línea de
código con el punto y coma como has hecho hasta ahora en cualquier parte del
código. Cierra la llave del if.
El else lo puedes escribir en la misma línea del cierre del if o debajo. Se suele
escribir en la misma para identificar a simple vista que este else pertenece al if.
Escribe todas las líneas de código que quieras dentro del else, igual que en el if.
Para finalizar, cierra el else con una llave.
Si ejecuto esto, se puede ver que se ejecuta sólo el código del bloque if, esto es
porque numero1 es mayor que 60.
En cambio, si numero1 es menor, se va a ejecutar el bloque de código dentro
del else.
let numero1 = 50;
if (numero1 > 60){
alert("El número es mayor que 60.");
} else {
alert("El número es menor que 60.");
}
JavaScript
Copiar
¿Cómo toma JavaScript una decisión? Lo hace con lógica. Utiliza booleanos
como he dicho. Cuando declaras el bloque del if le dices a JavaScript,
comprueba si el valor de numero1 es mayor que 60. Si a esta pregunta el valor
booleano le responde con un true, quiere decir que se cumple su condición.
JavaScript ahora sabe que numero1 es mayor que 60 y al llegar a esta conclusión,
sabe que tiene que ejecutar todo el código que haya en su interior. El del else, no
le hace ni caso. Lo ignora por completo.
En cambio, si el valor booleano recibido es false, sabe que no se cumple la
condición del if y por eso, ignora todo su código y ejecuta el del else.
Y en las condiciones puedes utilizar todos los operadores de comparación que te
he enseñado, a los que añadiremos alguno más a medida que el curso avance.
En resumen, un true ejecuta el código del if y un false el de un else, así de
simple. Puedo demostrarlo con el siguiente ejemplo. He quitado la variable y lo
único que hago es pasarle directamente un valor booleano a la condición. Si le
doy valor de true ejecuta el if. Si le doy valor de false ejecuta el del else.
if (true){
alert("Verdadero");
} else {
alert("Falso");
}
JavaScript
Copiar
if (false){
alert("Verdadero");
} else {
alert("Falso");
}
JavaScript
Copiar
El condicional if sin else
El condicional if se puede especificar sin la obligación de añadirle el bloque else,
esto si solo necesitas contemplar una posibilidad true. Lo puedes hacer así:
let numero1 = 50;
if (numero1 == 50){
alert("El número es igual a 50.");
}
JavaScript
Copiar
Debes tener claro dos cosas importantes. La primera es que las salidas del código
que estoy sacando en alert() las puedes sacar donde quieras, por ejemplo, en la
consola o en el documento html, todo funciona igual. La segunda cosa es que
independientemente de que se ejecute algún bloque if o else, el código
continuará ejecutándose debajo con normalidad.
let numero1 = 5463;
if (numero1 == 50){
alert("El número es igual a 50.");
}
alert("Me ejecuto si se cumple o no la condición del if porqué
estoy fuera de su área de influencia.");
JavaScript
Copiar
La entrada de datos con prompt()
Capítulo 17: La entrada de datos con prompt() de JavaScript
Me voy a desviar por un capítulo de los condicionales para enseñarte algo que
vamos a utilizar en ellos, y no solo en ellos.
Presta especial atención a este tema, ya que la cosa se empieza a poner
interesante. Con lo que ya sabes hasta ahora y lo que vas a aprender en este
capítulo, ya puedes hacer más cosas de lo que te piensas.
Lo que te voy a enseñar es para que tu código pueda interactuar con el usuario.
Lo haremos con el método prompt().
Palabra del lenguaje nº 33 encontrada.
prompt es un método que permite al usuario introducir datos con los
que el código puede interactuar.
Puedes guardar lo que recoge del usuario en una variable. Veamos un ejemplo.
let nombre;
nombre = prompt("Introduce tu nombre");
JavaScript
Copiar
Declaro una variable sin iniciar (da igual si la inicias con cualquier cosa). Gracias
a prompt(), se despliega una ventanita parecida a la del alert(), solo que en este
caso, a parte de informar con un string, va a permitir introducir algo con el
teclado. Lo que se introduzca, quedará almacenado en la variable nombre y
podrá ser utilizado como un valor más en el código.
Solicita el nombre del usuario.
Lo escribe y pulsa aceptar. En caso de darle a cancelar, guarda un valor null (lo
puedes comprobar por ejemplo, con un console.log()).
En el caso de que le des al botón aceptar con un nombre escrito, se almacena el
valor en la variable nombre. Si no escribes nada y pulsas en aceptar, se guarda un
valor vacío (en blanco).
¿Qué podemos hacer con este valor almacenado? Puedes hacer lo que quieras,
solo tienes que llamar a nombre como ya sabes. Yo voy a hacer que se muestre en
el documento un saludo con el nombre que se introduzca.
let nombre;
nombre = prompt("Introduce tu nombre");
document.write("Bienvenido/a a mi sitio web, " + nombre);
JavaScript
Copiar
Suponiendo que en el alert introduzco el nombre "Programación Fácil", este
será el resultado:
En caso de darle a cancelar saldría el valor null:
Mejorar el prompt con condicionales
Ya que estamos con los condicionales desde el capítulo anterior, es buen
momento para que practiques un poco más con ellos.
Si el método prompt() recibe un valor, aunque sea un espacio en blanco,
devuelve ese mismo valor. En cambio, si no se le especifica nada, devuelve el
valor de null. Sabiendo esto, puedes crear un condicional que prevenga una
acción del usuario con el botón de cancelar.
let nombre;
nombre = prompt("Introduce tu nombre");
if (nombre != null){
document.write("Bienvenido/a a mi sitio web, " + nombre +
".");
} else {
alert("No has introducido nada. Recarga la página para
intentarlo de nuevo.");
}
JavaScript
Copiar
En la condición del if le digo que si el valor obtenido por el prompt() en la
variable nombre es != (diferente que null) es decir, que no es igual a null o que no
está vacío, como prefieras decirlo, que me muestre un alert() con el texto de
bienvenida y el valor que haya introducido el usuario. En cambio, si el valor es
igual a null, se ejecutará el código del else y va a decir que no se ha introducido
nada, así evitamos que aparezca el mensaje de bienvenida con un null.
prompt devuelve un tipo de dato string aunque le introduzcas un
número. Compruébalo con un typeof().
Condicionales anidados en JavaScript: concepto, funcionamiento
y ejemplos
Capítulo 18: Múltiples condicionales if
Seguimos con el condicional if else. En este punto vamos un poco más allá
gracias a la anidación, ya que podremos crear condiciones más complejas.
Múltiples condiciones if
Puedes ir creando condicionales más complejos mediante el uso de
varios if separados o incluso, los puedes anidar, es decir crear condiciones
dentro de condiciones.
Veamos un ejemplo orientado a videojuegos, seguro que hace esto menos
aburrido. Lo primero para seguir este ejercicio práctico es crear tres variables. La
tercera de momento no se inicializará.
let gameOver = false;
let vidas = 3;
let respuesta;
JavaScript
Copiar
La variable gameOver, por hacer un símil, es como un interruptor apagado (false).
Mientras el jugador tenga vidas, este interruptor se mantendrá apagado. Una vez
las vidas lleguen a 0, el interruptor se encenderá (true) y mostraría una supuesta
pantalla de Game over al usuario. Evidentemente, esto no va a ser un juego como
tal. Va a ser la lógica que se ejecutaría en un posible juego. Este ejemplo, te
servirá para aplicarlo a cualquier cosa, no solo a videojuegos. Es solo para que
vayas obteniendo la lógica de programación y veas nuevas posibilidades con los
condicionales.
Escribamos un primer if. Este evalúa si la variable vidas es igual a 0. En caso de
que así sea, se asignará automáticamente el valor de true a la variable gameOver,
lo que desencadena un mensaje de alerta que dice Game over.
let gameOver = false;
let vidas = 3;
let respuesta;
if (vidas == 0) {
gameOver = true;
alert("Game over...");
}
JavaScript
Copiar
Mejoremos un poco el código. Añadamos la posibilidad de que si el jugador se
queda sin vidas, pueda decidir si quiere jugar o no.
En el siguiente trozo, añado un if que no tiene nada que ver con el primero. Sin
embargo, el segundo if depende directamente de que se ejecute el primero, ya
que solo se ejecutará si la condición de la variable gameOver es true.
En resumen, si el jugador se queda sin vidas y le salta el mensaje de Game over,
se ejecutará un prompt() que le pregunte si quiere seguir jugando. La respuesta
del jugador se almacenará en la variable llamada respuesta. La cual no estaba
inicializada.
let gameOver = false;
let vidas = 3;
let respuesta;
if (vidas == 0) {
gameOver = true;
alert("Game over...");
}
if (gameOver == true){
respuesta = prompt("¿Quiere seguir jugando?");
}
JavaScript
Copiar
Para terminar, añadamos un if else pero esta vez, lo pondremos anidado
dentro del segundo if. Lo que quiere decirme que para que evalúe algo, deberá
dar true el if que anida al if else.
let gameOver = false;
let vidas = 3;
let respuesta;
if (vidas == 0) {
gameOver = true;
alert("Game over...");
}
if (gameOver == true){
respuesta = prompt("¿Quiere seguir jugando?");
if (respuesta == 'si'){
vidas = 3;
gameOver = false;
alert("Estupendo, ¡a seguir jugando!");
} else {
alert("¡Hasta la próxima");
}
}
JavaScript
Copiar
Este nuevo if else se ejecutará solo, en caso de que el jugador haya perdido
(gameOver = true). En ese momento se ejecutará el prompt(). Si la respuesta del
jugador es igual a 'si' (quiere seguir jugando), se ejecutará el código
del if anidado que asignará un valor de 3 a la variable vidas y dejaría el valor
de gameOver de nuevo en false. Por lo que podríamos decir que vuelve a dejarlo
todo como estaba. En el caso de que el jugador no diga explícitamente que 'si',
le avisará con un mensaje de despedida.
Probemos este código. Para que haga algo, tienes que dejar el valor
de vidas a 0 editando el código, ya que de momento, no tenemos ningún sistema
de eventos que haga perder vidas al jugador.
Le damos al botón aceptar y pregunta si queremos seguir jugando. Le decimos
que si.
En el caso de introducir si, me dice a seguir jugando y lo deja todo como al
principio.
Si le pones cualquier otra cosa al prompt() que no sea si, te da el mensaje de
despedida.
¿Cómo usar los operadores lógicos en JavaScript para crear condiciones complejas?
Capítulo 19: Los operadores lógicos de JavaScript
Seguimos con los condicionales, para ello, tenemos que ampliar los operadores
vistos hasta ahora.
Gracias a los operadores lógicos puedes ir encadenando más de una condición
en los condicionales. Creando así estructuras más complejas.
Operador lógico AND
El operador and nos permite comparar más de una cosa a la vez, por ejemplo:
let color = "rojo";
let objeto = "mesa";
if (color == "rojo" && objeto == "mesa") {
alert("Se cumplen las dos condiciones.");
}
JavaScript
Copiar
Esta condición quiere decir que si el color es rojo y el objeto es mesa
exactamente, se cumple la condición. En cambio, si por ejemplo una de las dos
cosas no se cumple, no se ejecutará el código del if, o lo que es lo mismo,
dará false.
En el siguiente ejemplo, el color sigue siendo rojo, pero en objeto ya no se cumple
la condición, de modo que no se ejecuta el código del if.
let color = "rojo";
let objeto = "silla";
if (color == "rojo" && objeto == "mesa") {
alert("Se cumplen las dos condiciones.");
}
JavaScript
Copiar
El operador lógico and (&&) devuelve true si las dos condiciones se
cumplen. Si se cumple una o ninguna, devuelve false.
Operador lógico OR
El operador lógico OR nos permite hacer condiciones en las que solo se cumpla
una de las dos comparaciones, independientemente de que se cumple una o las
dos. por ejemplo:
let color = "rojo";
let objeto = "silla";
if (color == "rojo" || objeto == "mesa") {
alert("Se cumple la condición.");
}
JavaScript
Copiar
El operador lógico OR (||) devuelve true si una o las dos condiciones se
cumplen. Si no se cumple ninguna, devuelve false.
Operador lógico NOT
Tenemos el operador lógico NOT para crear condiciones que sean todo lo
contrario a lo especificado. Veamos un ejemplo que te va a quedar más claro.
let color = "azul";
let objeto = "silla";
if (!(color == "rojo" && objeto == "mesa")) {
alert("Se cumple la condición.");
}
JavaScript
Copiar
En este caso, la condición debería dar false, puesto que el valor de color se
cumple pero de objeto no, y lleva un operador lógico AND, se tendrían que cumplir
los dos valores para que diera un valor de true. En cambio, por el operador de
negación not ! se consigue todo lo contrario, si no se cumple la condición o
expresión de dentro de los paréntesis, devuelve true.
El operador lógico not (!) devuelve todo al revés. Da un valor de true si la
condición no se cumple y un valor de false si se cumple.
También puedes almacenar expresiónes (condiciones) en variable y utilizarlas
cuando quieras, aquí tienes un ejemplo:
let numero1 = 18;
let numero2 = 15;
let expresión = numero1 == 18 || numero2 == 20;
console.log(expresión);
JavaScript
Copiar
true
Plain text
Copiar
Por último, que sepas que puedes encadenar tantos valores y
operadores como quieras. Por ejemplo: numero1 == 10 || numero2 ==
numero1 && numero1 == numero3.
¿Cómo usar la estructura if else if else en JavaScript?
Capítulo 20: Añadiendo else if al condicional if else
Seguimos con los condicionales. Hasta ahora has visto como hacer expresiones
simples con un operador y dos valores y expresiones compuestas con varios
operadores y valores. También has visto como anidar if else para crear
estructuras de control de flujo más complejas. No lo he dicho hasta ahora, pero a
los condicionales se les llama también como estructuras de control de flujo, ya
que son capaces de modificar el orden del flujo de ejecución.
El uso de else if en JavaScript
else ifes un extra que podemos añadir en los if else. Podemos crear un
montón de condiciones relacionadas encadenando tantos else if como
queramos.
Palabra del lenguaje nº 34 encontrada.
else if es una forma de añadir más de una condición verdadera.
Veamos un ejemplo práctico para que veas como funciona.
let edad = prompt("Introduce tu edad: ");
if (edad < 0 || edad == 0){
alert("Todo es una mentira.");
}
else if (edad > 0 && edad < 18){
alert("Eres menor de edad.");
}
else if (edad >= 18 && edad < 100){
alert("Eres mayor de edad.");
}
else{
alert("¿Seguro que tienes esa edad?");
}
JavaScript
Copiar
En el caso de introducir una edad menor o igual a 0 (se podría simplificar
añadiendo un operador menor o igual qué <=), se ejecutará el código del if.
En el caso de introducir una edad mayor a 0 y que además sea menor a 18 se
ejecutará el primer else if.
Si se introduce una edad mayor o igual a 18 y que además sea menor a 100 se
ejecutará el segundo else if.
Finalmente, tenemos un else para contemplar cualquier edad mayor a 100 años.
Así de sencillo puedes añadir todas las condiciones que quieras.
¿Cómo usar la estructura switch en JavaScript?
Capítulo 21: El condicional switch
El condicional if else es muy útil cuando nuestras condiciones son pocas y
necesitamos poner trozos de código considerables. En cambio, hay veces en las
que queremos poner muchas condiciones y poco código. En estas situaciones
suele ser mejor el condicional switch que veremos a continuación.
El condicional switch en pseudocódigo tiene un aspecto como esto:
// Pseudocódigo.
switch (expresión) {
case condición 1:
bloque de código a ejecutar
break;
case condición 2:
bloque de código a ejecutar
break;
case ... todas las condiciones que quieras
default:
bloque de código por defecto si no hay coincidencias
con ningún case.
}
JavaScript
Copiar
Palabra del lenguaje nº 35 encontrada.
El condicional switch evalúa una expresión comparando el valor de la
misma con instancias case. En caso de devolver false, utiliza un
bloque default.
Como en el if else, podemos tener varias opciones verdaderas (case) y una falsa
(default).
Este pseudocódigo quiere decir que tenemos una condición o expresión inicial,
de esta dependen todos los case y el default que escribamos. Veamos un
ejemplo con código real.
let estacion = prompt("Escribe una estación en minúsculas.");
switch (estacion){
case "invierno":
alert("Todo es frío.");
break;
case "primavera":
alert("Se colorea el mundo.");
break;
case "verano":
alert("Las noches se hacen largas.");
break;
case "otoño":
alert("Donde había color ya no queda nada.");
break;
default:
alert("Eso no es una estación.");
break;
}
JavaScript
Copiar
Palabra del lenguaje nº 36 encontrada.
case son cada uno de los posibles bloques que se ejecutarán en caso de
que alguno coincida con la expresión del switch.
Lo que puedes ver en el siguiente ejemplo es un prompt() que almacena un valor
introducido. Este valor es el que se le pasa al switch en su declaración con switch
(estacion). A partir de aquí, se van añadiendo condiciones especificadas en
cada case del switch. Por ejemplo case "invierno". Esto significa que si el valor
de la variable estacion es invierno literalmente, se va a ejecutar la condición de
dicho case. Es lo mismo que un if cuando se cumple su condición en true.
Palabra del lenguaje nº 37 encontrada.
default es un bloque de código que se ejecutará en caso de que
ningún case coincida con la expresión del switch. Es como el else del if
else.
Cada case debe terminar con un break, ya que esto hace que una vez se ejecute
un case, no se evalúen el resto, le decimos, ejecuta "x" en caso de que sea true y
una vez termines salta todo lo demás del switch, con lo que continua con la línea
inmediata al terminar dicho switch.
Al igual que ocurre con el else, si no se cumple ninguno de los case, se ejecuta
el default, que es un equivalente al else. Este no requiere de break ya que se
escribe al final del switch. Si lo prefieres, lo puedes escribir sin problemas.
Voy a probar de ejecutar uno de los case. Te recomiendo que pruebes con el resto
con tu navegador.
En este caso, si le doy a aceptar la condición del case "verano" se cumple (true) y
se ejecuta su código.
En cambio, si escribo cualquier cosa que no se especifique en ningún case, el
resultado es que da false y se ejecuta el default.
¿Qué pasa si se omite el break entre los case?
Palabra del lenguaje nº 38 encontrada.
break rompe la ejecución del condicional switch evitando que se
ejecuten bloques que no deberían.
Lo que ocurre si se omite el poner un break, es que si se ejecuta un case sin él, va
a ejecutar seguidamente el siguiente case, aunque no sea true. Si el
siguiente case o default que se encuentre tampoco lleva un break, ejecutará el
siguiente y así sucesivamente. Mira lo que ocurre si quito los break:
let estacion = prompt("Escribe una estación en minúsculas.");
switch (estacion){
case "invierno":
alert("Todo es frío.");
case "primavera":
alert("Se colorea el mundo.");
case "verano":
alert("Las noches se hacen largas.");
case "otoño":
alert("Donde había color ya no queda nada.");
default:
alert("Eso no es una estación.");
}
JavaScript
Copiar
Ejecuto el primer case introduciendo invierno en el prompt(). Se desencadena
esto:
Ya sabes, si un switch te falla, suele ser por este motivo.
Comparación switch vs if else de
JavaScript
Con el tiempo irás aprendiendo a decidir en qué momento te viene mejor
utilizar switch y en cual te viene mejor if else. Solo quiero que de momento
comprendas el funcionamiento de ambos. Creo necesario, que veas como
quedaría el mismo ejemplo del switch de este capítulo escrito con un if else.
let estacion = prompt("Escribe una estación en minúsculas.");
if (estacion == "invierno"){
alert("Todo es frío.");
}
else if (estacion == "primavera"){
alert("Se colorea el mundo.");
}
else if (estacion == "verano"){
alert("Las noches se hacen largas.");
}
else if (estacion == "otoño"){
alert("Donde había color ya no queda nada.");
}
else {
alert("Eso no es una estación.");
}
JavaScript
Copiar
Cómo puedes comprobar aquí, el número de líneas escritas no es significativo,
prácticamente son iguales. Aquí la gran diferencia reside en la forma en que se
escriben las condiciones. En el switch nos basta con escribir una vez la expresión,
en este caso "estacion" y luego, en cada case, lo que queremos comparar a esa
expresión, sin tener que indicar cada vez la expresión a comparar.
En cambio, en el if else tenemos que indicar la expresión, en este caso estación
y seguido la comparación, por eso, en este caso es bastante más cómodo escribir
este tipo de condiciones con un switch, pero esto ya es elección de cada persona,
al final escríbelo con el que te vaya mejor y que creas que es el más adecuado en
cada momento.
Esto son solo cinco condiciones, pero, ¿Y si tuvieras que hacer esto mismo, con
una condición para cada día del mes o del año?
¿Cómo funciona el bucle for de JavaScript?
Capítulo 22: El bucle for
Por fin llegamos a otro de los temas interesantes de la programación, los bucles.
En concreto, en este capítulo te voy a mostrar como escribir y como funciona el
bucle for.
En prácticamente cualquier tarea informática que nos podamos imaginar cabría
la posibilidad de automatizarla con un bucle, por ejemplo, renombrar diez mil
archivos con un patrón como este: nombre_archivo_1, nombre_archivo_2...
Incrementando en uno hasta llegar al diez mil.
Pues bien, cada vez que necesites realizar algo repetitivo, lo puedes realizar con
un bucle.
La acción de repetición la verás en programación como iteración, de hecho, la
definición de iteración en un diccionario está descrita como repetir varias veces
un proceso con la intención de alcanzar una meta deseada, objetivo o resultado.
Y eso es lo que vas a conseguir con los bucles.
El bucle for - sintaxis
Palabra del lenguaje nº 39 encontrada.
for es una estructura de control de flujo. En concreto un tipo de
estructura para crear bucles con los que ejecutar un número x de veces
un bloque de código.
Empecemos con pseudocódigo para que veas la sintaxis del bucle for.
// Pesudocódigo.
for (inicializador; condición de salida; expresión final) {
bloque de código a ejecutar
}
JavaScript
Copiar
Y ahora empecemos con un simple ejemplo en código real:
for(i=1;i<=10;i++){
document.write("El valor del bucle es: " + i + "<br>");
}
JavaScript
Copiar
El resultado es un total de diez repeticiones de la frase. En cada frase, va variando
el valor de "i".
Aquí lo que hacemos es ejecutar el bloque de código diez veces. En este caso es
solo un mensaje en el documento, pero podría ser cualquier trozo de código que
quieras ejecutar diez veces.
Analicemos este bucle:
El bucle for se inicia con la palabra reservada for, seguida de unos paréntesis. En
ellos debemos escribir tres cosas. La primera parte, es lo que se llama
inicializador, se trata de una variable, la cual podemos especificar con let,
con var o sin nada, solo con su nombre, de momento, hasta que te muestre los
temas del alcance (scope en inglés) lo escribiremos sin let y sin var. Por
convención, se escribe en los bucles una i, pero no pasa nada si pones otro
nombre de variable cualquiera, solo sigue las normas de nomenclatura para
variables que te expliqué anteriormente.
Después de escribir el inicializador, pon punto y coma y escribe la segunda parte,
la condición de salida, la cual indica dónde tiene que detenerse el bucle. En este
caso, cuando i (o el nombre que le quieras poner) valga 10, la condición ya no
será true, y saldremos del bucle. Mientras sea menor o igual a 10, será true.
Quizás hayas deducido para que es la última parte. La última parte, la expresión
final, se utiliza para incrementar o decrementar, en este caso el valor de i. De
esta forma, en algún determinado momento se podrá detener el bucle. En caso
de que de alguna forma, no consigamos que con la expresión final el bucle
devuelva false, no se detendrá, tendremos un bucle infinito.
Analicemos los pasos de este bucle.
Post ejecución al bucle for, i vale inicialmente 1.
Se ejecuta el bloque de código y nos muestra en el documento que el valor es 1.
Como i es menor o igual a 10, se vuelve a ejecutar el bucle de nuevo. El valor
de i ha sido incrementado y ahora es 2. Este es el valor que muestra al ejecutar el
código de nuevo.
Y la siguiente vuelta vale 3, 4, 5 hasta llegar a 10. Cuando ha mostrado el valor
de 10, la condición se ha vuelto false, porque i vale 11 y ya no se cumple dicha
condición, por lo que el bucle no se va a ejecutar más.
Es importante que tengas en cuenta el uso de los operadores que hemos visto
hasta ahora. En ejemplo anterior, el operador de la condición de salida es menor
o igual qué. ¿Pero que pasa si ponemos un menor qué en el siguiente ejemplo?
for(i=1;i<10;i++){
document.write("El valor del bucle es: " + i + "<br>");
}
JavaScript
Copiar
Simplemente, que el bucle se va a ejecutar nueve veces, así que tenlo en cuenta,
menor que diez, es sinónimo de 9.
Podrías hacer esto mismo de forma bastante más elaborada con tantos
condicionales if como iteraciones quieras ejecutar. Algo muy poco óptimo la
verdad. Te dejo a continuación, un ejemplo. Solo quiero que sepas como se hace,
no quiero que lo tomes como una buena práctica.
/* El siguiente código es una mala práctica sin errores.
No obstante, no la debes utilizar jamás. */
let i = 1;
if (i == 1){
document.write("El valor es: " + i + "<br>");
i++;
}
if (i == 2){
document.write("El valor es: " + i + "<br>");
i++;
}
if (i == 3){
document.write("El valor es: " + i + "<br>");
i++;
}
if (i == 4){
document.write("El valor es: " + i + "<br>");
i++;
}
if (i == 5){
document.write("El valor es: " + i + "<br>");
i++;
}
if (i == 6){
document.write("El valor es: " + i + "<br>");
i++;
}
if (i == 7){
document.write("El valor es: " + i + "<br>");
i++;
}
if (i == 8){
document.write("El valor es: " + i + "<br>");
i++;
}
if (i == 9){
document.write("El valor es: " + i + "<br>");
i++;
}
if (i == 10){
document.write("El valor es: " + i + "<br>");
i++;
}
JavaScript
Copiar
Utilizando varios if, he conseguido el mismo resultado que con el bucle pero con
muchas más líneas de código. He tardado mucho más y el resultado es peor. ¿Y si
en lugar de diez iteraciones fuesen diez mil?
Toma esto como ejemplo de que si no utilizas cada cosa para su debida función,
vas a complicarte mucho y a escribir código de mala calidad.
¿Cómo funciona el bucle while de JavaScript?
Capítulo 23: El bucle while
En este capítulo vas a ver el bucle while, otro de los tipos de bucles de
JavaScript.
Palabra del lenguaje nº 40 encontrada.
while es una estructura de control de flujo. En concreto un tipo de
estructura para crear bucles con los que ejecutar un número x de veces
un bloque de código.
Sintaxis del bucle while en JavaScript
Veamos su sintaxis en pseudocódigo:
// Pseudocódigo.
inicializador
while (condición de salida) {
código a ejecutar
expresión final
}
JavaScript
Copiar
El inicializador esta vez se encuentra fuera del propio bucle.
La condición de salida se especifica entre los paréntesis del while. Abrimos llaves
y dentro se coloca todo el código a ejecutar por el bucle. Antes de cerrar las llaves
hay que escribir la expresión final (también conocida como actualización o
incremento/decremento).
Creando un bucle while
Escribamos un ejemplo sencillo con el bucle while. Vamos a realizar el mismo
ejemplo que viste con el bucle for para que puedas hacer comparaciones a la vez
que aprendes como se escribe y funciona.
let i = 1;
while (i <= 10) {
document.write("El valor del bucle es: " + i + "<br>");
i++;
}
JavaScript
Copiar
El inicializador del bucle lo puedes ver en la variable i que he declarado
con let más arriba (también lo puedes hacer con var).
Comienza el bucle while utilizando su palabra reservada, while. A continuación,
especificamos la condición de salida entre unos paréntesis.
Finalmente, abrimos unas llaves en las que se escribe todo el código que quieras
ejecutar en bucle en su interior. Antes del cierre de esta llave, tienes que incluir la
expresión final. En este caso un incremento.
Este es un pequeño ejemplo de infinidad que podemos crear. Veremos muchos
más ejemplos a lo largo del curso, lo importante ahora es que aprendas lo básico,
ya habrá tiempo de ver ejemplos mucho más elaborados.
Diferencias entre el bucle while y el bucle for de JavaScript
Realmente no tienen ninguna diferencia en su esquema general, los dos tipos de
bucle poseen los mismos tres parámetros. La gran diferencia es la forma de
especificarlos.
El bucle for
for(i=1;i<=10;i++){
document.write("El valor del bucle es: " + i + "<br>");
}
JavaScript
Copiar
El bucle while
let i = 1;
while (i <= 10) {
document.write("El valor del bucle es: " + i + "<br>");
i++;
}
JavaScript
Copiar
Aquí tienes el mismo ejemplo escrito en los dos tipos de bucles, para que
compares. El bucle for cuenta con el inicializador, condición de salida y
expresión final en el mismo sitio, entre los paréntesis. En cambio, el
bucle while tiene una parte predeclaración (inicializador, la variable declarada),
otra parte entre los paréntesis (condición de salida) y la otra dentro de las llaves
con el código a ejecutar.
Bucles con break y continue
Capítulo 24: Controlar los bucles con break, continue y condicionales
En este capítulo te voy a mostrar como utilizar condicionales dentro de bucles.
También va a ver el uso de break y continue además de ejemplos con bucles
infinitos.
Condicionales dentro de bucles
En los bucles también puedes utilizar condicionales, esto te permitirá que
ocurran cosas diferentes en determinadas iteraciones, de este modo podemos
añadir mayor complejidad a los bucles.
Utilizar break para salir de un bucle
Los ejemplos los vamos a ver con el bucle while, pero los puedes aplicar también
para el bucle for.
let i = 1;
while (i <= 10) {
document.write("El valor del bucle es: " + i + "<br>");
i++;
if (i == 7){
document.write("Se rompió la ejecución del bucle.");
break;
}
}
JavaScript
Copiar
Como puedes ver, el bucle se ejecuta con normalidad hasta que llega a ser true la
condición del if que contiene un break que rompe la ejecución del bucle antes de
lo indicado en su condición de salida.
Utilizar continue para salir de un bucle
Palabra del lenguaje nº 41 encontrada.
continue nos permite omitir una o varias iteraciones en un bucle sin
romper su ejecución.
Podemos utilizar continue para omitir alguna parte de la ejecución del bucle.
Aquí tienes un ejemplo:
let i = 0;
while (i < 10) {
i++;
if (i >= 5 && i <=7) {
continue;
}
document.write("El valor del bucle es: " + i + "<br>");
}
JavaScript
Copiar
Se ejecuta el bucle. Primero se incrementa el valor de la variable i en 1, se lee
el if, la condición da false, ya que i no es mayor o igual que 5 y menor o igual
que 7. Se imprime el valor de i, vale 1 la primera vez que llega
al document.write(). Ese es el primer valor que imprime en el documento.
En cuanto el valor de i cumple con la condición del if (la primera vez vale 5) se
ejecuta este continue que está dentro. Este omite una iteración cada vez que se
ejecuta. Puesto que el if da true cuando i vale 5, 6 y 7, se omiten estas tres
ejecuciones y por lo tanto, no se llega a ejecutar el document.write() que está
debajo del continue.
Bucles infinitos
Pasemos a hablar sobre los bucles infinitos.
¿Qué son los bucles infinitos?
Un bucle infinito es aquel que según su construcción, no puede terminarse y se
ejecuta infinitamente.
¿Como se crea un bucle infinito?
Los bucles infinitos generalmente se crean por error, a no ser que queramos que
algo se mantenga en constante ejecución y no finalice. Aquí un ejemplo:
let i = 1;
while (i <= 10) {
document.write("El valor del bucle es: " + i + "<br>");
}
JavaScript
Copiar
A este bucle le falta la expresión final (incremento/decremento). De esta forma, el
valor inicial de i siempre será 1, de forma que la condición de salida del bucle
nunca se cumple y se ejecutará infinitamente.
En el vídeo te muestro un entorno de pruebas con una aplicación web para que
puedas probar estos bucles infinitos. Si lo pruebas en tu navegador directamente
lo vas a dejar colgado al estar iterando constantemente.
Decrementar en bucles
Hasta ahora solo he utilizado el incremento para la expresión final. Puedes
utilizar también el decremento para salir de un bucle.
let i = 15;
while (i >= 10) {
document.write("El valor del bucle es: " + i + "<br>");
i--;
}
JavaScript
Copiar
Es lo mismo, solo que ahora, hay que hacer el cálculo al revés, el valor inicial
de i es 15 y va restando hasta llegar a 10.
¿Cómo funciona el bucle do while?
Capítulo 25: El bucle do while de JavaScript
Terminamos de ver los bucles con el bucle do while. Vamos a ver algún que
otro ejemplo breve y pasamos a otros temas en el curso.
Palabra del lenguaje nº 42 encontrada.
do permite cambiar la forma en que funciona un bucle while.
Funcionamiento práctico del bucle do while
El bucle do while es solo una variación del bucle while. Solo cambia un poco la
sintaxis y alguna cosilla que ahora te explicaré.
Empecemos con un ejemplo en pseudocódigo:
// Pseudocódigo.
inicializador
do {
código a ejecutar
expresión final
} while (condición);
JavaScript
Copiar
Primero tenemos el inicializador fuera del bucle, al igual que el while normal. el
código a ejecutar, lo tenemos dentro de las llaves del do además de la expresión
final. Finalmente, el while con la condición de salida.
Y ahora, un ejemplo en código de real:
let i = 0;
do {
console.log("El valor de i es: " + i);
i+=5;
} while (i <= 50);
JavaScript
Copiar
El valor de i es: 0
El valor de i es: 5
El valor de i es: 10
El valor de i es: 15
El valor de i es: 20
El valor de i es: 25
El valor de i es: 30
El valor de i es: 35
El valor de i es: 40
El valor de i es: 45
El valor de i es: 50
Plain text
Copiar
El inicializador está igual que en el bucle while, en una variable. Utilizamos la
palabra do para crear el bucle. Abrimos llaves sin condición de salida, solo escribe
el código que quieras y el incremento/decremento. Cierra las llaves y ahora
escribe while para incluir entre los paréntesis la condición de salida. Eso es todo.
Diferencia entre el bucle while y el bucle do while
Aparte, también he de decir que hay una pequeña diferencia en el flujo de
ejecución. Puesto que la condición de salida está debajo del código, con un do
while nos aseguramos de que el código se ejecute siempre al menos una vez, se
cumpla o no la condición de salida.
let i = 100;
do {
console.log("El valor de i es: " + i);
i+=5;
} while (i <= 50);
JavaScript
Copiar
Se ejecuta una vez aunque no se cumpla nunca la condición de entrada al bucle.
Inicialmente i vale 100, un bucle for o un bucle while no se ejecutarían ni una
sola vez, en cambio el bucle do while se ejecuta la primera vez.
El valor de i es: 100
Plain text
Copiar
Ejemplo de uso con el bucle do
while
Supón que tienes un bucle while y a continuación, un if que depende de que
este bucle devuelva algún valor. En caso de que el while sea false ya de entrada,
provocará un error en el if que está esperando algún valor.
En cambio, con un do while, aunque esto ocurra, se ejecutará si o si al menos una
vez, aunque sea false desde un principio.
Podría poner un montón de códigos de ejemplo con el bucle do while, pero
vamos a dejar el capítulo aquí, quiero que sigas avanzando. Ya lo iremos
utilizando durante el curso.
Proyecto 1 de JavaScript - Bucles
Capítulo 26: Bucles - Proyecto resuelto
Llegados a este punto en el curso es hora de hacer un pequeño ejercicio práctico
algo más complejo, no mucho, no te asustes. Hay que crear un bucle for con las
siguientes características:
1. Qué muestre el valor de la variable 20 veces exactamente.
Pista: document.write().
2. Se deberá hacer obligatoriamente con decremento de 1 en la expresión final.
3. El valor del inicializador debe ser 10.
4. El valor de 0 se debe saltar.
5. El bucle tiene que tener un rango de 30 iteraciones aunque se iteren 21 y se
muestren 20.
6. Se deberá mostrar al usuario un alert() antes de empezar el bucle que le avise
de que este va a comenzar. También se informará al usuario de que el bucle ha
terminado con un document.write().
7. El bucle solo será ejecutado si el usuario introduce la contraseña y usuario
correctos (usuario: bucleAdmin contraseña: programacionFacil). Pista utiliza
un prompt().
Esta práctica la hago porque es muy importante que empieces a desarrollar
lógica de programación y que empieces a juntar todo lo que te he enseñado. En
este caso, voy a mostrarte como hacer esto, pero intenta hacerlo antes cada uno
de los apartados. No tiene porqué salirte bien, solo inténtalo o piensa al menos
como irías haciendo cada una de las partes.
Vamos con los primeros requisitos. El valor del inicializador debe ser 10:
for(i=10;){}
JavaScript
Copiar
El bucle tiene que tener un rango de 30 iteraciones.
for(i=10;i>=-19;){}
JavaScript
Copiar
La expresión final debe ser con decremento. Por eso he puesto menos 20.
for(i=10;i>=-19;i--){}
JavaScript
Copiar
Probemos de imprimir esto, a ver que pasa.
for(i=10;i>=-19;i--){
document.write("El valor del bucle es: " + i + "<br>");
}
JavaScript
Copiar
El valor del bucle es: 10
El valor del bucle es: 9
El valor del bucle es: 8
El valor del bucle es: 7
El valor del bucle es: 6
El valor del bucle es: 5
El valor del bucle es: 4
El valor del bucle es: 3
El valor del bucle es: 2
El valor del bucle es: 1
El valor del bucle es: 0
El valor del bucle es: -1
El valor del bucle es: -2
El valor del bucle es: -3
El valor del bucle es: -4
El valor del bucle es: -5
El valor del bucle es: -6
El valor del bucle es: -7
El valor del bucle es: -8
El valor del bucle es: -9
El valor del bucle es: -10
El valor del bucle es: -11
El valor del bucle es: -12
El valor del bucle es: -13
El valor del bucle es: -14
El valor del bucle es: -15
El valor del bucle es: -16
El valor del bucle es: -17
El valor del bucle es: -18
El valor del bucle es: -19
Plain text
Copiar
Realmente el bucle se está iterando 30 veces, ya que en este caso, está el 0 por en
medio. Bien, podemos por ejemplo poner el valor de la condición de salida a -19
para cumplir con el requisito número 5.
No obstante, en este quinto requisito también se pide que se itere 21 veces en
este rango de 30 iteraciones posibles. Para hacer esto, se puede utilizar un break.
for(i=10;i>=-19;i--){
document.write("El valor del bucle es: " + i + "<br>");
if (i == -10) {
break;
}
}
JavaScript
Copiar
Ejecutando esto ahora, se ejecuta y muestra 21 veces contando el 0.
El valor del bucle es: 10
El valor del bucle es: 9
El valor del bucle es: 8
El valor del bucle es: 7
El valor del bucle es: 6
El valor del bucle es: 5
El valor del bucle es: 4
El valor del bucle es: 3
El valor del bucle es: 2
El valor del bucle es: 1
El valor del bucle es: 0
El valor del bucle es: -1
El valor del bucle es: -2
El valor del bucle es: -3
El valor del bucle es: -4
El valor del bucle es: -5
El valor del bucle es: -6
El valor del bucle es: -7
El valor del bucle es: -8
El valor del bucle es: -9
El valor del bucle es: -10
Plain text
Copiar
El quinto requisito también dice que solo se muestren 20 iteraciones pero que se
ejecuten 21. Podemos por ejemplo hacer que se salte la impresión del valor 0.
for(i=10;i>=-19;i--){
if (i == 0) {
continue;
}
document.write("El valor del bucle es: " + i + "<br>");
if (i == -10) {
break;
}
}
JavaScript
Copiar
Esta vez el valor de 0 no se imprime. Es importante poner este nuevo if antes del
document.write().
El valor del bucle es: 10
El valor del bucle es: 9
El valor del bucle es: 8
El valor del bucle es: 7
El valor del bucle es: 6
El valor del bucle es: 5
El valor del bucle es: 4
El valor del bucle es: 3
El valor del bucle es: 2
El valor del bucle es: 1
El valor del bucle es: -1
El valor del bucle es: -2
El valor del bucle es: -3
El valor del bucle es: -4
El valor del bucle es: -5
El valor del bucle es: -6
El valor del bucle es: -7
El valor del bucle es: -8
El valor del bucle es: -9
El valor del bucle es: -10
Plain text
Copiar
Es el momento de añadir los avisos al usuario, según el requisito número 6.
alert("El bucle va a comenzar.");
for(i=10;i>=-19;i--){
if (i == 0) {
continue;
}
document.write("El valor del bucle es: " + i + "<br>");
if (i == -10) {
break;
}
}
document.write("El bucle ha finalizado.");
JavaScript
Copiar
Con esto, aparecerá un alert() antes de ejecutar el bucle y un texto en el
documento al finalizarlo.
Nos falta introducir lo del usuario y contraseña. Lo vamos a hacer con un cuatro
variables, dos prompts y un if. Piensa que para cumplir con el requisito número 7
y que el bucle se ejecute solo si se pone bien el usuario y contraseña, debemos
meter el bucle dentro de este nuevo if else para que controle su ejecución.
let usuario = "bucleAdmin";
let pass = "programacionFacil";
let introduceUsuario;
let introducePass;
introduceUsuario = prompt("Introduce el nombre de un usuario
autorizado para ejecutar el bucle.");
introducePass = prompt("Introduce una contraseña.");
if (introduceUsuario != usuario || introducePass != pass) {
alert("Error. Usuario y/o contraseña no válidos.");
}
else {
alert("El bucle va a comenzar.");
for(i=10;i>=-19;i--){
if (i == 0) {
continue;
}
document.write("El valor del bucle es: " + i + "<br>");
if (i == -10) {
break;
}
}
document.write("El bucle ha finalizado.");
}
JavaScript
Copiar
Espero que te haya gustado hacer algo un poco más complicado para ir saliendo
de la zona de confort. Es normal si no sabías ni como empezar con el proyecto. Es
algo muy grande en comparación con lo que se ha dado hasta ahora en el curso.
No obstante, piensa que todo lo que hay en este código ya está explicado,
simplemente lo hemos llevado un poco más allá. Si no has visto el vídeo, te lo
recomiendo. Seguro que lo vas entendiendo mejor. Cualquier duda, déjame un
comentario.
¿Cómo funcionan las funciones en
JavaScript?
Capítulo 27: Las funciones
Comenzamos con nuevo tema muy útil, imprescindible e interesante, las
funciones.
¿Qué son las funciones
predefinidas?
Los lenguajes de programación cuentan con una serie de funciones
predefinidas. Para que te hagas una idea, son fragmentos de código ya escrito
que podemos llamar para utilizar en cualquier momento. Un ejemplo de función
predefinida es isNaN(), la cual lleva escrito en el propio lenguaje JavaScript el
código necesario para determinar si un valor o una variable es o no un número.
Hay gran cantidad de funciones predefinidas, las iremos viendo a lo largo del
curso.
En este capítulo te voy a enseñar a crear tus propias funciones, con ellas, podrás
ahorrar mucho código, podrás reutilizar el código de las funciones todas las
veces que quieras solo con una llamada.
Palabra del lenguaje nº 43 encontrada.
isNaN() es una función predefinida de JavaScript que devuelve si un
valor es numérico o no.
¿Cómo crear una función en
JavaScript?
Para declarar (también definir o expresar) una función en JavaScript lo
haremos con la palabra function. Después debes darle un nombre que siga las
normas de nomenclatura que te enseñe con las variables. Entre sus paréntesis
podemos añadir una serie de parámetros separados por comas. Finalmente, el
código que quieres que se ejecute encerrado entre llaves.
Palabra del lenguaje nº 44 encontrada.
function es la palabra que debes utilizar para declarar funciones en
JavaScript.
Aquí tienes un pequeño ejemplo:
function suma (numero1,numero2) {
return numero1 + numero2;
}
let guardaSuma = suma(10,10);
document.write("El valor de la suma es: " + guardaSuma);
JavaScript
Copiar
La función llamada suma lleva dos parámetros, numero1 y numero2. Ambos
funcionan como variables, pero no hay que declararlos. Esto se hace al crear la
función. Dichos parámetros sirven para ser utilizados dentro de la función. Estos
no podrán ser alcanzados desde fuera de la propia función, es decir, si llamas por
ejemplo a numero1 en un document.write(), no va a salir nada.
Con el uso de return conseguimos finalizar la función y que esta devuelva un
valor, valor de la suma de los dos parámetros que de momento no tienen ningún
valor, se lo daremos en cada llamada que hagamos a la función. Este valor, lo
estoy consiguiendo guardar en la variable guardaSuma, en la cual estoy haciendo
la llamada a la función. Acción que hace que esta se ejecute. En la llamada,
especifico con dos valores numéricos, los valores correspondientes para los dos
parámetros especificados en la función (numero1, numero2).
Palabra del lenguaje nº 45 encontrada.
return fuerza la salida de la función en la que se encuentra, es algo
como el break. Además, devuelve un valor.
El alcance de las funciones
Todavía no vamos a ir con temas de alcance, esto lo veremos pronto, de
momento tienes que saber que estas variables de fuera de la función no son las
mismas que los parámetros con el mismo nombre, tienen alcances diferentes, las
declaradas dentro de las funciones solo se pueden acceder desde dentro de ellas
(al menos con lo que te he enseñado hasta ahora).
let numero1;
let numero2;
function suma (numero1, numero2) {
return numero1 + numero2;
}
let guardaSuma = suma(10,10);
numero1 = 25;
numero2 = 50;
console.log(numero1);
console.log(numero2);
console.log(guardaSuma);
Nos devuelve 25 y 50, estos son los valores de numero1 y numero2 de fuera de la
función, en cambio, guardaSuma, suma los valores recibidos en la llamada.
25
50
20
De hecho, podemos probar de eliminar estas dos variables de fuera de la función
y verás como te devuelve un error si las intentas llamar.
function suma (numero1, numero2) {
return numero1 + numero2;
}
let guardaSuma = suma(10,10);
console.log(numero1);
Pese a existir dentro de la función, es como si no existiera fuera de ella. La
consola da error diciendo que la variable no se ha definido.
error: Uncaught ReferenceError: numero1 is not defined
Podemos llamar a las funciones tantas veces como queramos ejecutarlas.
function suma (numero1, numero2) {
return numero1 + numero2;
}
let suma1 = suma(10,10);
let suma2 = suma(56,13);
let suma3 = suma(7,87);
let suma4 = suma(9797,546754);
console.log("los valores de las sumas son:");
console.log(suma1, suma2, suma3, suma4);
Las palabras var, let y el alcance
Capítulo 28: El alcance o scope de las variables - Diferencias var y let
JavaScript es un lenguaje algo peculiar a la hora de definir los alcances de las
variables, y no lo digo en el mal sentido.
Vamos a ver en este capítulo como funciona el ámbito de las variables, también
conocido como alcance, visibilidad o scope en inglés. Un tema fundamental
para trabajar correctamente con variables. Además, verás la diferencia
entre var y let.
Ámbito global de JavaScript
El ámbito global se refiere al alcance de una variable sobre toda una hoja .js.
Cuando declaramos una variable fuera de un elemento como una función, un
condicional o un bucle, esta toma un status (estado) global y es visible dentro de
estas estructuras que acabo de mencionar.
Hagamos una prueba tanto con var como con let, ya que funcionan de forma
diferente.
var variable1 = "Alcanzada la variable con VAR.";
let variable2 = "Alcanzada la variable con LET.";
function alcances(){
console.log(variable1 + "\n" + variable2);
}
alcances();
JavaScript
Copiar
Alcanzada la variable con VAR.
Alcanzada la variable con LET.
Plain text
Copiar
En este caso, las dos variables son alcanzadas dentro de la función sin ningún
problema. Pero ¿Qué pasa si declaro otras variables con el mismo nombre dentro
de la misma hoja .js?
var variable1 = "Alcanzada la variable con VAR.";
let variable2 = "Alcanzada la variable con LET.";
var variable1 = "Alcanzada la variable con VAR.";
let variable2 = "Alcanzada la variable con LET.";
function alcances(){
console.log(variable1 + "\n" + variable2);
}
alcances();
JavaScript
Copiar
Uncaught SyntaxError: Identifier 'variable2' has already been
declared - line 5
Plain text
Copiar
Dice que el identificador de la variable2 ya está declarado. Esperábamos que
ocurriera un error, pero, ¿porqué el error se refiere solo a variable2? ¿Qué pasa
con la variable1 declarada con var?
Algo de esto expliqué en el capítulo 5. Dije lo siguiente, por si no lo recuerdas:
Con var podemos redeclarar una variable tantas veces como queramos
utilizando la palabra reservada delante del identificador.
Por eso la consola no da ningún error. Está permitido, en cambio, con let no. Es
uno de los motivos de tener dos palabras para declarar variables.
Quitamos la redeclaración de variable2 y funciona sin problemas:
var variable1 = "Alcanzada la variable con VAR.";
let variable2 = "Alcanzada la variable con LET.";
var variable1 = "Redeclaración con VAR.";
function alcances(){
console.log(variable1 + "\n" + variable2);
}
alcances();
JavaScript
Copiar
Redeclaración con VAR.
Alcanzada la variable con LET.
Plain text
Copiar
Ámbito local y de bloque de las
variables
Gracias a la palabra let podemos crear ámbitos locales de las variables y limitar
su acceso a bloques como un condicional, un bucle, una función...
En el siguiente ejemplo, tienes dos variables de alcance local al encontrase
declaradas dentro de la función.
function alcances(){
let variable1 = "Variable1 dentro de la función.";
var variable2 = "Variable2 dentro de la función.";
console.log(variable1 + "\n" + variable2);
}
alcances();
JavaScript
Copiar
Variable1 dentro de la función.
Variable2 dentro de la función.
Plain text
Copiar
Estas variables no se pueden acceder desde fuera, al estar declaradas dentro de
la función, se limita su acceso a la propia función. Probémoslo.
function alcances(){
let variable1 = "Variable1 dentro de la función";
var variable2 = "Variable2 dentro de la función";
console.log(variable1 + "\n" + variable2);
}
alcances();
console.log(variable1);
console.log("\n");
console.log(variable2);
JavaScript
Copiar
Uncaught ReferenceError: variable1 is not defined at line 9
Plain text
Copiar
Me devuelve el error de que variable1 no está definida. Lo mismo pasaría
con variable2 si estuviera antes de variable1, el error no aparece, pero
igualmente no la alcanza. Puedes hacer la prueba.
Pasemos a un ejemplo con el alcance de bloque, también local. Vamos a ver en
este caso, un condicional if con una variable declarada dentro del bloque de
código if, la variable suma.
let numero1 = 1500;
let numero2 = 1200;
if (numero1 > 1000){
var suma = numero1 + numero2;
}
console.log("El valor total de la suma es: " + suma);
JavaScript
Copiar
Podemos pensar que al igual que ocurre con las funciones, no podremos acceder
a esta variable llamada suma por el simple hecho de no estar creada fuera de un
bloque. No obstante, se puede acceder sin problemas, el alcance está
funcionando como global aunque debería ser local.
El valor total de la suma es: 2700
Plain text
Copiar
Esto ocurre porque estoy declarando la variable suma con var. Uno de los motivos
de crear let es este, ya que let funciona diferente, tiene lo que se conoce como
alcance de bloque (block scope en inglés).
let numero1 = 1500;
let numero2 = 1200;
if (numero1 > 1000){
let suma = numero1 + numero2;
}
console.log("El valor total de la suma es: " + suma);
JavaScript
Copiar
Curiosamente, con let, me aparece la variable suma como no definida. Por lo
tanto, aquí tienes otra diferencia entre var y let.
Uncaught ReferenceError: suma is not defined at line 7.
Plain text
Copiar
Pasemos a ver algún ejemplo con bucles.
for(i=1;i<=10;i++){
console.log("El valor del bucle es: " + i);
}
JavaScript
Copiar
Al escribir la variable i la primera vez en el bucle, la estamos declarando de la
misma forma que haríamos con var.
for(var i=1;i<=10;i++){
console.log("El valor del bucle es: " + i);
}
JavaScript
Copiar
Esto quiere decir que si dejamos la variable del bucle con var o sin nada más que
su nombre, no se utilizará este alcance de bloque y la variable será accesible a
nivel global.
for(var i=1;i<=10;i++){
}
console.log("El valor del bucle al finalizar es: " + i);
JavaScript
Copiar
El valor del bucle al finalizar es: 11
Plain text
Copiar
En cambio, si hacemos esto con let, la variable toma alcance de bloque y no se
puede acceder a ella desde fuera del bucle:
for(let i=1;i<=10;i++){
}
console.log("El valor del bucle al finalizar es: " + i);
JavaScript
Copiar
Uncaught ReferenceError: i is not defined at line 4
Plain text
Copiar
Suficientes conceptos sobre el alcance para esta parte del curso. El siguiente
capítulo será el segundo proyecto del curso, una calculadora.
¿Cómo se crea una calculadora
con JavaScript?
Capítulo 29: Como crear una calculadora - Proyecto 2
Hasta ahora hemos visto funciones muy sencillas y sin ningún objetivo. Ha
llegado el momento de añadir un poco de dificultad y de realizar algo un poco
más útil, una calculadora .
Para realizar este proyecto, podemos crear una única función que realice todas
las operaciones de cálculo o bien crear funciones para cada una de las
operaciones de suma, resta, multiplicación, etc.
Es más interesante crear una función separada para cada cosa, llamémoslos
pequeños módulos. Estos módulos, podrán ser empleados por separado sin
depender de los otros módulos. Es decir, si en cualquier parte del código
necesitas que se realice una suma, llamas a la función suma y no a todas las
operaciones si estuvieran en la misma función. Conseguimos algo más de
velocidad a la hora de ejecutarlo. Es cierto que con funciones tan simples no se va
a notar, pero es conveniente que te vayas acostumbrando a hacer las cosas lo
más óptimas que puedes.
Primero declaramos las variables de la calculadora:
let operacion = prompt("¿Qué operación desea? 1-Sumar 2-Restar 3-
Multiplicar 4-Dividir");
let operando1 = parseInt(prompt("Introduce el primer número:"));
let operando2 = parseInt(prompt("Introduce el segundo número:"));
let resultado;
JavaScript
Copiar
operacion es una variable que contiene un prompt(). Esto lo hago para poder
guardar el valor que introduzca el usuario para poder utilizarlo más adelante.
Las variables operando1 y operando2 son los operandos (números) que vamos a
utilizar en las diferentes operaciones.
La variable resultado la reservo sin inicializar hasta más adelante.
Te habrás fijado en que el prompt() de operando1 y operando2 está envuelto entre
los paréntesis de un parseInt(). Con esto, conseguimos transformar el string que
almacena el prompt() en un tipo numérico entero.
Por si no recuerdas lo del prompt(), en el capítulo 17 dije:
prompt() devuelve un tipo de dato string aunque le introduzcas un
número. Compruébalo con un typeof().
Palabra del lenguaje nº 46 encontrada.
parseInt es una función de alto nivel que devuelve un valor numérico
entero a partir de una cadena (string) siempre que sea posible.
Prosigamos con la creación de las funciones de operaciones.
Funciones de suma, resta,
multiplicación y división
Estas operaciones son así de sencillas. Aunque estemos utilizando
repetidamente numero1 y numero2, recuerda que por el tema del alcance, no son
las mismas variables.
function suma(numero1, numero2){
return numero1 + numero2;
}
function resta(numero1, numero2){
return numero1 - numero2;
}
function multiplicacion(numero1, numero2){
return numero1 * numero2;
}
function division(numero1, numero2){
return numero1 / numero2;
}
JavaScript
Copiar
Para finalizar, podemos crear un condicional switch que decida según lo
introducido en el prompt(), llamar a una función u otra con los números
obtenidos en las variables operando1 y operando2.
En este switch ponemos la condición de la variable operacion. Esto va a devolver
el valor del 1 al 4 introducido por el usuario. Mediante estos números se decide
qué case ejecutar. En caso de error (no se ha introducido un valor válido), se
ejecuta el bloque default
En cada case almacena en la variable resultado que había declarado al principio
la llamada a la función correspondiente con los valores de los operandos,
también obtenidos del usuario.
Finalmente, se imprime en el documento el resultado.
switch (operacion){
case "1":
resultado = suma(operando1,operando2);
document.write("El valor de la suma es: " +
resultado);
break;
case "2":
resultado = resta(operando1,operando2);
document.write("El valor de la resta es: " +
resultado);
break;
case "3":
resultado = multiplicacion(operando1,operando2);
document.write("El valor de la multiplicación es: " +
resultado);
break;
case "4":
resultado = division(operando1,operando2);
document.write("El valor de la división es: " +
resultado);
break;
default:
alert("La opción especificada no es correcta.");
break;
}
JavaScript
Copiar
Evitar que se pidan los operandos en caso de error
Todavía no hemos dado el manejo de errores o excepciones, lo daremos más
adelante. Es por este motivo, que te voy a enseñar a solucionar el pequeño "fallo"
que tiene la calculadora con un condicional if, el cual ya sabes utilizar de sobra si
has seguido el curso hasta ahora.
Cuando el usuario introduce un valor no válido (no introduce ningún número
del 1 al 4), se ejecuta el bloque default, pero antes, se le piden los dos operandos,
algo que aunque no rompe el programa, no tiene ningún sentido.
En este caso, debemos meter los prompt() de los operandos en el if.
//Declaración de variables.
let operacion = prompt("¿Qué operación desea? 1-Sumar 2-Restar 3-
Multiplicar 4-Dividir.");
let operando1;
let operando2;
let resultado;
//Impedir que pida los operandos en caso de error.
if (operacion >= 1 && operacion <= 4) {
operando1 = parseInt(prompt("Introduce el primer número:"));
operando2 = parseInt(prompt("Introduce el segundo
número:"));
}
JavaScript
Copiar
Esto es todo. En el vídeo puedes ver como pruebo todo esto.
Aún estamos en el curso básico, más adelante utilizaremos y mejoraremos este
código para crear una calculadora algo más sofisticada y que funcione con
interfaz gráfica en el navegador con botones, algo mucho más interesante.
Lo bueno, es que ahora, ya sabes como hacer el cerebro de una calculadora con
JavaScript.
Las constantes
Capítulo 30: ¿Cómo funcionan las constantes en JavaScript?
Terminamos la parte básica del curso con las constantes de JavaScript. Por
supuesto, esto no termina aquí, en el siguiente capítulo empieza el curso de nivel
medio.
¿Qué son las constantes en
JavaScript?
Las constantes son contenedores como las variables que hemos visto hasta
ahora, con la gran diferencia de que lo que almacenemos una vez en ellas,
queda ahí, no va a cambiar. No se pueden redeclarar.
Como dato importante, debemos tener en cuenta los alcances. Una constante
tiene alcance de bloque como let.
Como declarar constantes en
JavaScript
Empecemos con una simple declaración de constante. Para ello utilizaremos la
palabra const.
Por convención, las constantes se escriben en SNAKE_CASE y en mayúsculas.
Si lo haces en minúsculas o sin los guiones bajos no hay problema, pero es mejor
que sigas siempre las convenciones para facilitar la lectura del código.
const PRIMERA_CONSTANTE = "Este texto no puede cambiar.";
console.log(PRIMERA_CONSTANTE);
JavaScript
Copiar
Hasta aquí, el funcionamiento es como el de una variable normal. Podemos
declararla, inicializarla y llamarla.
Este texto no puede cambiar.
Plain text
Copiar
La diferencia está en que no se puede reasignar un valor:
const PRIMERA_CONSTANTE = "Este texto no puede cambiar.";
PRIMERA_CONSTANTE = "Intentando reasignar un valor...";
JavaScript
Copiar
El resultado de este intento de reasignación es fallido. Me devuelve
un TypeError en la tercera línea.
Uncaught TypeError: Assignment to constant variable at line 3.
Plain text
Copiar
Por otro lado, si intentas redeclararla, fallarás en el intento con un error
diferente.
const PRIMERA_CONSTANTE = "Este texto no puede cambiar.";
const PRIMERA_CONSTANTE = "Intentando reasignar un valor...";
JavaScript
Copiar
Esta vez, el error es de sintaxis. Nos indica que PRIMERA_CONSTANTE ya está
declarada.
Uncaught SyntaxError: Identifier 'PRIMERA_CONSTANTE' has already
been declared at line 3.
Plain text
Copiar
¿Cuándo utilizar las constantes
en JavaScript?
Las constantes las podemos utilizar en datos que sepamos que no van a cambiar
o que no queremos que sean modificados. Un ejemplo puede ser el número de la
constante PI const PI = 3.1415926535897932, el cual es siempre el mismo, por
eso se llama constante PI.
El alcance o ámbito de las
constantes en JavaScript
function funcion_constante() {
const ALCANCE = "Dentro de la función.";
console.log(ALCANCE);
}
funcion_constante();
const ALCANCE = "Fuera de la función.";
console.log(ALCANCE);
if (true) {
const ALCANCE = "Dentro del if.";
console.log(ALCANCE);
}
JavaScript
Copiar
Dentro de la función.
Fuera de la función.
Dentro del if.
Plain text
Copiar
Las constantes no pueden tener el mismo nombre que alguna función o
variable dentro del mismo ámbito.
let ALCANCE = "Variable";
const ALCANCE = "Constante";
JavaScript
Copiar
Uncaught SyntaxError: Identifier 'ALCANCE' has already been
declared at line 2.
Plain text
Copiar
Constantes sin inicializar
Las constantes deben ser siempre inicializadas en su declaración. Si lo
piensas, es lógico ya que no está permitida su reasignación de valores
posteriormente.
Probemos dejando una constante solo declarada:
const VACIA;
JavaScript
Copiar
Lanza un SyntaxError que dice que falta el inicializador en una declaración const.
Uncaught SyntaxError: Missing initializer in const declaration at
line 1.
SEGUNDO NIVEL
¿Cómo funcionan los eventos en JavaScript?
Capítulo 31: Introducción a los eventos
Dejamos atrás la parte básica del curso para dar paso al nivel medio. Nivel que
voy a inaugurar con una Introducción a los eventos de JavaScript.
¿Qué son los eventos?
Los eventos son una serie de acciones u ocurrencias que pueden desencadenar
ciertas cosas.
El código de ciertas acciones, permanecerá inactivo, sin ejecutarse hasta que se
produzca un evento, por ejemplo, el usuario pulsa un botón y este realiza algo.
En resumen, podemos hacer que cuando pase algo en concreto, se ejecute una
acción.
Disponemos de muchos tipos de eventos que iremos viendo a lo largo del curso.
En este capítulo solo probarás el tipo de evento onclick, solo para que puedas
ver un ejemplo de uso práctico de los eventos.
¿Qué es un controlador de eventos?
Un controlador de eventos es el mecanismo que necesitas para que se maneje el
evento. Por norma general, será una función que se va a llamar en el momento en
el que se active el evento.
Por el momento, en esta introducción vamos a poner eventos directamente
sobre etiquetas html. Hay otras formas de hacerlo. Las iremos viendo.
Eventos JavaScript sobre html
Veamos un primer ejemplo, un evento que se ejecute en el momento en el que el
usuario haga click en un botón.
Tendrás que tener los siguientes archivos para hacer la prueba. Los puedes dejar
en la raíz del directorio principal (raíz) o bien, crea carpetas, una para ir
guardando archivos .js y otra para los de .css tal y como muestro en el vídeo.
Para realizar este ejemplo, te basta con el archivo .html, ya que vamos a escribir
ahí el evento de JavaScript directamente sobre una etiqueta html. La parte del
CSS es opcional, ya que este curso no va a estar dedicado a esto, para ello tienes
mi curso dedicado a CSS desde cero. No obstante, no está mal que vayas
practicando con el manejo de archivos aunque no entiendas demasiado CSS. Con
un botón por defecto de html te sirve para hacer esto.
test.html
Este es el código que debes guardar en una página .html.
En lo que te tienes que fijar es en la línea 11. Aquí tienes una
etiqueta <button> con un evento de tipo onclick ejecutado directamente desde
este botón. En este onclick he puesto un alert() de JavaScript.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Introducción a los eventos</title>
<script src="test.js"></script>
<link href="test.css" rel="stylesheet" />
</head>
<body>
<button onclick="alert('¡Has pulsado el botón!');">¡NO
PULSAR!</button>
</body>
</html>
HTML
Copiar
test.css
Este es el código que debes guardar en una hoja .css.
@import url('https://fonts.googleapis.com/css2?
family=Bungee&display=swap');
body{
text-align: center;
margin-top: 7em;
}
button {
padding: 1em 2.1em 1.1em;
display: block;
color: #e8e1df;
background-color: #fbdedb;
display: inline-block;
background: #ec7b6f;
background-color: #f04747;
transition: 0.6s;
font-family: 'Bungee', cursive;
font-size: 2em;
text-align: center;
position: relative;
border-radius: 1.5em;
box-shadow: 0em -0.6rem 0.1em rgba(0, 0, 0, 0.1) inset;
border:none;
}
button:hover, .btn:focus {
opacity: 0.75;
}
button:active {
transform: scale(1.2);
}
CSS
Copiar
Si cargamos esto en el navegador, nos va a aparecer un botón como este.
Al pulsar el botón, se ejecuta el evento, pero solo si se pulsa el botón.
¿Cómo funcionan los objetos en JavaScript?
Capítulo 32: Introducción a los objetos
Seguimos avanzando viendo otro tema totalmente nuevo, los objetos de
JavaScript. Algo que hemos estado utilizando en verdad durante todo el curso
pero en el cual no hemos indagado en su interior todavía.
¿Qué es un objeto?
Un objeto es una colección de datos relacionados entre sí. Estos están
generalmente formados por variables y funciones llamadas propiedades y
métodos respectivamente cuando estos forman parte de un objeto.
Diferencia entre variables,
funciones, propiedades y
métodos
Es importante que sepas que cuando se habla de variables que son de un objeto,
a estas se les llama propiedades o atributos como te acabo de explicar.
En el caso de las funciones, si son pertenecientes a un objeto se les llama
métodos.
Como crear un objeto en
JavaScript
Los ejemplos son tan o más importantes que la propia teoría, de modo, que
vamos a ver un ejemplo de creación de un objeto.
Cómo declarar objetos en JavaScript
Para declarar objetos en JavaScript, lo podemos hacer tanto con var, como con
let o const entre otras formas. Ya veremos la diferencia, ahora lo importante es
que te centres en crear un objeto.
let objeto = {};
console.log(typeof objeto);
JavaScript
Copiar
Con el código anterior se acaba de crear un objeto literal vacío (ahora explicaré lo
de literal). El typeof nos indica que efectivamente se ha creado un objeto.
object
Plain text
Copiar
Hemos creado el objeto con las llaves {} almacenadas en la variable objeto.
¿Qué son los literales?
Los literales son las asignaciones que les hacemos a las variables, por
ejemplo, let nombre = "Enrique Barros Fernández" se trata de un string literal.
Lo mismo ocurre con los objetos si les damos un valor nosotros mismos, son
literales, lo estamos escribiendo literalmente por así decirlo.
Como añadir propiedades a un
objeto en JavaScript
Este nuevo objeto vacío no te sirve nada más que para alardear de haberlo
creado. Para que sea útil, hay que añadirle propiedades y métodos. Empecemos
por las propiedades.
Tipos de propiedades de los objetos
Podemos almacenar propiedades de todo tipo de datos dentro de un objeto,
incluso otros objetos.
let usuario = {
nombreCompleto: ['Enrique', 'Barros', 'Fernández'],
edad: 30,
telefono: '0467489304',
paisResidencia: 'Australia',
idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués',
'Italiano'],
};
console.log(usuario);
JavaScript
Copiar
{nombreCompleto: Array(3), edad: 30, telefono: '0467489304',
paisResidencia: 'Australia', idiomas: Array(5)}
Plain text
Copiar
Además de esta primera información que nos da la consola, se pueden desplegar
los array para ver los elementos y las posiciones que los conforman:
Sintaxis de los objetos
Aquí puedes ver la sintaxis de un objeto solo con propiedades (pronto veremos
como añadir métodos). Primero, se deben encerrar las propiedades y los
métodos entre las llaves {}.
Se especifican las propiedades con un nombre variable válido seguido de dos
puntos :. A continuación, se especifica el valor.
Cada propiedad se separa con una coma ,.
// Pseudocódigo.
let objeto = {
propiedad1: 'valor',
propiedad2: 'valor',
propiedad3: 'valor',
};
Es infinito lo que podemos hacer con los objetos, aún quizás no le veas la utilidad
real, pero pronto lo harás. En el siguiente capítulo seguimos con más cosas sobre
los objetos, espero que te hayas quedado con ganas de más.
Métodos y this en JavaScript
Capítulo 33: Crear métodos en objetos, utilizar sus propiedades y
¿Qué es this?
Seguimos con los objetos. En este capítulo vas a ver como crear métodos en los
objetos y como utilizar sus propiedades. Además, te explico para que
sirve this en los objetos de JavaScript.
Acceder a propiedades de objeto
en JavaScript
Para poder utilizar individualmente una propiedad dentro de un objeto, hay
que hacerlo con el nombre del objeto seguido de un punto . y la propiedad.
let usuario = {
nombre_completo: ['Enrique', 'Barros', 'Fernández'],
edad: 30,
telefono: '0467489304',
pais_residencia: 'Australia',
idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués',
'Italiano'],
};
console.log(usuario.nombre_completo);
JavaScript
Copiar
(3) ['Enrique', 'Barros', 'Fernández']
Plain text
Copiar
Si la propiedad a la cual quieres acceder tiene varios elementos, como por
ejemplo un array, tendrás que acceder aplicando lo que te he enseñado
anteriormente. LLamada a la propiedad del objeto y le escribimos entre
corchetes la posición en el array:
console.log(usuario.nombre_completo[2]);
JavaScript
Copiar
Fernández
Plain text
Copiar
Como crear un método en un
objeto de JavaScript
Ahora que ya sabes acceder y utilizar las propiedades de los objetos de forma
individual, es el momento de que crees tu primer método. Recuerda que los
métodos son funciones que están dentro de un objeto.
Escribamos un método que sea capaz de hacer algo sencillo, un saludo al usuario
con su nombre.
let usuario = {
// Propiedades.
nombre_completo: ['Enrique', 'Barros', 'Fernández'],
edad: 30,
telefono: '0467489304',
pais_residencia: 'Australia',
idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués',
'Italiano'],
// Métodos.
saludar: function() {
alert('Hola, ' + this.nombre_completo[0] + '.');
}
};
usuario.saludar();
JavaScript
Copiar
Al cargar la página, se efectúa esta llamada al método. Lo hacemos igual que
llamando a una función, solo que esta vez, hay que indicar primero a que objeto
pertenece. La llamada está en la línea 15.
Si no has programado nunca, que no te preocupe el this de la línea 11. Ahora lo
explico.
¿Qué es y para qué sirve this de
JavaScript?
El uso de this puede abrumar un poco cuando no has programado antes en otros
lenguajes de programación. Ahora verás, que no es para nada algo complicado
de entender.
Palabra del lenguaje nº 49 encontrada.
this es una referencia al objeto actual.
Como curiosidad, la palabra this que se ve en otros lenguajes de
programación, en Python es self.
this es una palabra clave que hace referencia al objeto en el que está escrito.
Esto tendrá más sentido cuando empecemos con la programación orientada a
objetos.
Este this lo puedes traducir en este objeto como usuario, así hacemos la
referencia al propio objeto dentro de él mismo. Desde fuera, cuando llames al
objeto, no podrás utilizar this, deberás utilizar el nombre del propio objeto.
Para que te hagas una idea, fíjate en la línea 11, he sustituido el this por el
nombre del objeto. El resultado es el mismo, pero cuando trabajemos con clases,
le verás la importancia que tiene, ya que sacaremos varios objetos de una misma
clase y no podremos utilizar esta forma:
let usuario = {
// Propiedades.
nombre_completo: ['Enrique', 'Barros', 'Fernández'],
edad: 30,
telefono: '0467489304',
pais_residencia: 'Australia',
idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués',
'Italiano'],
// Métodos.
saludar: function() {
alert('Hola, ' + usuario.nombre_completo[0] + '.');
}
};
usuario.saludar();
Las notaciones y los namespace
de JavaScript
Capítulo 34: Notaciones en los objetos y espacios de nombre
(namespaces)
En este capítulo te muestro tipos de notaciones para acceder a los elementos de
los objetos y los espacios de nombre.
¿Que son los namespaces o
espacios de nombre?
Los namespaces o espacios de nombre en español son contenedores de nombres
en los cuales podemos almacenar variables, funciones, clases que pueden
repetirse con el mismo nombre. Esto lo has visto ya, por ejemplo, los argumentos
de una función podían repetir el mismo nombre de variable y eran dos elementos
diferentes.
Los namespaces en los objetos
Lo mismo tienen los objetos, tienen su propio espacio de nombre. Aquí tienes un
ejemplo:
var edad = 45;
let usuario = {
nombre_completo: ['Enrique', 'Barros', 'Fernández'],
edad: 30,
telefono: '0467489304',
pais_residencia: 'Australia',
idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués',
'Italiano'],
};
console.log(usuario.edad);
console.log(edad);
JavaScript
Copiar
Aquí podemos ver que realmente hay un espacio de nombre global, el de la hoja
de JavaScript y el del objeto usuario. Para acceder al namespace del objeto,
debemos nombrarlo. Seguido de esto, pondremos un punto . para acceder a su
contenido.
30
45
Plain text
Copiar
Notación de punto y notación con
corchetes
Veamos la notación de punto y la notación con corchetes.
Notación de punto en JavaScript
La notación (forma en la que accedemos a elementos del objeto) que hemos
utilizado hasta ahora es la conocida como dot notation o notación de punto en
español:
console.log(usuario.edad);
JavaScript
Copiar
Notación de corchetes en JavaScript
La otra forma con la que podemos acceder a por ejemplo un atributo de un
objeto es con la notación de corchetes:
usuario['edad'];
JavaScript
Copiar
Esta forma de acceder recuerda a la forma de acceder a las posiciones de los
array. Aunque su uso no es incorrecto, en más de una ocasión he visto
desaconsejado su uso. Personalmente, no tengo una opinión en contraria a
utilizar este tipo de notación.
Espacios de nombres secundarios
en JavaScript
¿Qué son los espacios de nombres secundarios?
Los espacios de nombre secundarios son lo mismo solo que en un subnivel. En el
siguiente ejemplo, tienes un objeto dentro de otro objeto, creando así un espacio
de nombre secundario.
Objetos dentro de objetos
Fíjate en telefonos. Esta es la sintaxis para almacenar como propiedad un objeto
dentro de otro. De esta forma, tenemos una propiedad con múltiples
propiedades dentro o incluso métodos.
let usuario = {
nombre_completo: ['Enrique', 'Barros', 'Fernández'],
edad: 30,
telefonos : {
telefono1: '0467489304',
telefono2: '0446395860'
},
pais_residencia: 'Australia',
idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués',
'Italiano'],
};
console.log(usuario.telefonos.telefono1);
console.log(usuario['telefonos']['telefono2']);
JavaScript
Copiar
Tanto en la notación de puntos o en la de corchetes, accedemos primero al
espacio de nombre usuario y luego al espacio de nombre telefonos. Después, ya
podemos acceder a las propiedades del espacio de nombre secundario
(telefonos).
"0467489304"
"0446395860"
Añadiendo propiedades a los
objetos de JavaScript
Capítulo 35: ¿Cómo añadir y modificar propiedades de los objetos?
Ahora que ya sabes llamar a propiedades y métodos de los objetos, ha llegado el
momento de que aprendas a añadirles y modificarles sus propiedades.
Como modificar los valores de las
propiedades de los objetos en
JavaScript
Para modificar los valores de las propiedades de un objeto lo puedes hacer de
la misma forma que reasignas valores en las variables. Solo tendrás que
especificar correctamente los espacios de nombres.
let usuario = {
nombre_completo: ['Enrique', 'Barros', 'Fernández'],
edad: 30,
telefonos : {
telefono1: '0467489304',
telefono2: '0446395860'
},
pais_residencia: 'Australia',
idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués',
'Italiano'],
};
usuario.edad = 27;
console.log(usuario.edad);
JavaScript
Copiar
27
Plain text
Copiar
Como utilizar las propiedades de los objetos en condicionales
Estos cambios en las propiedades de los objetos, los puedes utilizar para
multitud de cosas. Por ejemplo, puedes utilizarlos en un condicional de esta
forma:
let usuario = {
nombre_completo: ['Enrique', 'Barros', 'Fernández'],
edad: 30,
telefonos : {
telefono1: '0467489304',
telefono2: '0446395860'
},
pais_residencia: 'Australia',
idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués',
'Italiano'],
};
usuario.edad = 27;
if (usuario.edad != 30) {
console.log('Se ha modificado la edad de ' +
usuario.nombre_completo[0] + '.');
console.log('El nuevo valor de edad es ahora ' +
usuario.edad + '.');
}
JavaScript
Copiar
"Se ha modificado la edad de Enrique."
"El nuevo valor de edad es ahora 27."
Plain text
Copiar
Puedes ver que se han abierto una infinidad de caminos con el tema de los
objetos. No puedo mostrártelos todos, pero intentaré mostrarte muchos para
que al terminar el curso sepas desarrollar los tuyos propios.
Añadir nuevas propiedades a los
objetos
Añadir nuevas propiedades a los objetos no podía ser más fácil. Lo tienes que
hacer como con las variables. Si la propiedad no está declarada, se va a
declarar automáticamente dentro del objeto. Si ya existe, se reasigna el valor.
let usuario = {
nombre_completo: ['Enrique', 'Barros', 'Fernández'],
edad: 30,
telefonos : {
telefono1: '0467489304',
telefono2: '0446395860'
},
pais_residencia: 'Australia',
idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués',
'Italiano'],
};
usuario.direccion = "937 Beer Trafficway";
console.log(usuario);
JavaScript
Copiar
{
direccion: "937 Beer Trafficway",
edad: 30,
idiomas: ["Español", "Catalán", "Inglés", "Portugués",
"Italiano"],
nombre_completo: ["Enrique", "Barros", "Fernández"],
pais_residencia: "Australia",
telefonos: {
telefono1: "0467489304",
telefono2: "0446395860"
}
}
Eliminando propiedades de los
objetos de JavaScript
Capítulo 36: ¿Cómo eliminar y almacenar propiedades y métodos de
los objetos?
En este capítulo te voy a enseñar a eliminar las propiedades y los métodos de un
objeto. También te muestro como almacenar sus valores en variables por si no lo
habías pensado.
¿Cómo eliminar propiedades y
métodos de los objetos de
JavaScript?
La forma de eliminar una propiedad o un método de un objeto es muy sencilla.
Tenemos que utilizar un nuevo operador, delete. Proveniente del inglés que
significa eliminar.
Palabra del lenguaje nº 50 encontrada.
delete es un operador que elimina una propiedad o método de un
objeto.
let usuario = {
// Propiedades.
nombre_completo: ['Enrique', 'Barros', 'Fernández'],
edad: 30,
telefono: '0467489304',
pais_residencia: 'Australia',
idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués',
'Italiano'],
// Métodos.
saludar: function() {
alert('Hola, ' + this.nombre_completo[0] + '.');
}
};
delete usuario.idiomas;
delete usuario.saludar;
console.log(usuario);
JavaScript
Copiar
En la línea 15 elimino una propiedad.
En la línea 16 un método.
{
edad: 30,
nombre_completo: ["Enrique", "Barros", "Fernández"],
pais_residencia: "Australia",
telefono: "0467489304"
}
Plain text
Copiar
¿Cómo almacenar valores de
propiedades y de métodos en
variables?
Vamos a ver como almacenar el valor de una propiedad de un objeto en una
variable, así, podremos reutilizar ese valor sin depender del propio objeto.
Como ejemplo, vamos a reutilizar el código del capítulo 35, el del condicional if.
let usuario = {
nombre_completo: ['Enrique', 'Barros', 'Fernández'],
edad: 30,
telefonos : {
telefono1: '0467489304',
telefono2: '0446395860'
},
pais_residencia: 'Australia',
idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués',
'Italiano'],
};
let edad_usuario = usuario.edad;
usuario.edad = 27;
if (usuario.edad != 30) {
console.log('Se ha modificado la edad de ' +
usuario.nombre_completo[0] + '.');
console.log('El nuevo valor de edad es ahora ' +
usuario.edad + '.');
console.log('El valor de edad anterior era ' + edad_usuario
+ '.');
}
JavaScript
Copiar
Gracias a poder almacenar los valores de propiedades de objetos en variables,
puedo guardar valores que podrían cambiar en el objeto más adelante. En este
caso, he podido guardar el valor de edad anterior para que el if pueda decirme el
valor antiguo y el nuevo.
"Se ha modificado la edad de Enrique."
"El nuevo valor de edad es ahora 27."
"El valor de edad anterior era 30."
Las funciones constructoras de JavaScript
Capítulo 38: ¿Cómo se crea una función constructora de objetos?
También podría gustarte
- Los Fundamentos de JavaScript Que Todo Informático Debería Conocer PDFAún no hay calificacionesLos Fundamentos de JavaScript Que Todo Informático Debería Conocer PDF25 páginas
- Los Fundamentos de JavaScript Que Todo Informatico Deberia ConocerAún no hay calificacionesLos Fundamentos de JavaScript Que Todo Informatico Deberia Conocer25 páginas
- DWEC02. - Estructura Del Lenguaje JavascriptAún no hay calificacionesDWEC02. - Estructura Del Lenguaje Javascript20 páginas
- Modulo V Introduccion A JavascriptAún no hay calificacionesModulo V Introduccion A Javascript33 páginas
- DWEC02. - Estructura Del Lenguaje Javascript.Aún no hay calificacionesDWEC02. - Estructura Del Lenguaje Javascript.22 páginas
- Clase 1 Material Complementario: JavascriptAún no hay calificacionesClase 1 Material Complementario: Javascript12 páginas
- 1 Conceptos Generales - Sintaxis y VariablesAún no hay calificaciones1 Conceptos Generales - Sintaxis y Variables7 páginas
- Presentación - Introducción A JavaScriptAún no hay calificacionesPresentación - Introducción A JavaScript55 páginas
- ApsDWEC-Tema2-Introducción A Javascript y Al DOM-V3Aún no hay calificacionesApsDWEC-Tema2-Introducción A Javascript y Al DOM-V344 páginas
- Guía de Estudio - Introducción A JavaScriptAún no hay calificacionesGuía de Estudio - Introducción A JavaScript34 páginas
- Manejo de La Sintaxis Del LenguajeAún no hay calificacionesManejo de La Sintaxis Del Lenguaje61 páginas
- S02 - s2 Operadores Con Asignación - OZEFWGAún no hay calificacionesS02 - s2 Operadores Con Asignación - OZEFWG46 páginas
- Lectura 3 - Introducción A JavaScriptAún no hay calificacionesLectura 3 - Introducción A JavaScript14 páginas
- Copia de Curso Básico de JavaScriptAún no hay calificacionesCopia de Curso Básico de JavaScript19 páginas
- El_ABC_de_JavaScript_Tu_Gua_para_Conquistar_el_Mundo_de_la_ProgramacinAún no hay calificacionesEl_ABC_de_JavaScript_Tu_Gua_para_Conquistar_el_Mundo_de_la_Programacin4 páginas
- thisisareallylongstupidvariablenamemanAún no hay calificacionesthisisareallylongstupidvariablenameman10 páginas
- Javascript #1 - Introducción A JavascriptAún no hay calificacionesJavascript #1 - Introducción A Javascript15 páginas
- Estructura de Datos - Definicion y Estrucuras Basicas 2022Aún no hay calificacionesEstructura de Datos - Definicion y Estrucuras Basicas 202286 páginas
- Método de Ordenamiento Quicksort 2022Aún no hay calificacionesMétodo de Ordenamiento Quicksort 202224 páginas
- Algoritmo de Ordenamiento Por INSERCION 2022Aún no hay calificacionesAlgoritmo de Ordenamiento Por INSERCION 20228 páginas
- Imagen Digital - Conceptos BásicosAún no hay calificacionesImagen Digital - Conceptos Básicos20 páginas
- 01 P Prueba - Investigación y Metodología DCUAún no hay calificaciones01 P Prueba - Investigación y Metodología DCU2 páginas
- SGTi4 - MODULE DOCUMENTO Y INSITU - 2023 ESAún no hay calificacionesSGTi4 - MODULE DOCUMENTO Y INSITU - 2023 ES15 páginas
- Dispositivos Periféricos de Entrada-Salida. Características y Funcionamiento100% (2)Dispositivos Periféricos de Entrada-Salida. Características y Funcionamiento10 páginas
- Ejercicio SQL Tienda Informatica3Aún no hay calificacionesEjercicio SQL Tienda Informatica35 páginas
- Actividades de Lenguaje para Ninos Con Necesidades Educativas Especiales 1 PDFAún no hay calificacionesActividades de Lenguaje para Ninos Con Necesidades Educativas Especiales 1 PDF32 páginas
- Examen Final - Semana 8 Gestion Informacion II100% (1)Examen Final - Semana 8 Gestion Informacion II10 páginas
- El Costo de La Prevención de DefectosAún no hay calificacionesEl Costo de La Prevención de Defectos6 páginas
- Tesis - Caicedo Olga-Guzmán Coronel FinalAún no hay calificacionesTesis - Caicedo Olga-Guzmán Coronel Final115 páginas
- Tarea N°3 (Sistema de Ecuaciones Lineales)Aún no hay calificacionesTarea N°3 (Sistema de Ecuaciones Lineales)35 páginas
- 2017 05 13 SPCC Hugo RE PD3005 CUAJONE Transmittal 245 (Actualización de Listas de Señales)Aún no hay calificaciones2017 05 13 SPCC Hugo RE PD3005 CUAJONE Transmittal 245 (Actualización de Listas de Señales)1 página
- T1-Ef4. Garcia Quintero Angel AntonioAún no hay calificacionesT1-Ef4. Garcia Quintero Angel Antonio36 páginas
