JavaScript

Impulsamos { talento }

Historia
JavaScript nace en 1995 desarrollado por Brendan
Eich de Netscape con el nombre de Mocha, el cual fue
renombrado posteriormente a LiveScript y cuando
Netscape fue adquirida por Sun Microsytem lo
cambiaron a JavaScript.
Aparece por primera en Netscape Navigador 2.0, pero
actualmente es usado por todos los navegadores y
webview móviles
Pero no es hasta 1997 que se crea un comité (TC39)
para estandarizar Javascript por la European Computer
Manufacturer's Association, ECMA.
Se diseña el estándar DOM (Document Object Model)
para evitar las incompatibilidades entre navegadores.
Standar ECMA-262
 Impulsamos { talento }

Primeros estándares
En 1999 aparece la versión 3 del estándar
ECMAScript, que es la que más estable se ha
mantenido.
Pero Hasta 2011 no se aprobó y estandarizó la
versión 5 (ES5) que es la que utilizamos hoy en
día.
En 2015 se estableció versión ECMASCRIPT 6.
Soporte actual ES6
Desde entonces en Junio de cada año, se añade
una nueva versión de JavaScript.
 Impulsamos { talento }

¿Qué es JavaScript?
JavaScript es un lenguaje de programación
interpretado de alto nivel, diseñado con sintaxis de
C.

● Es un lenguaje orientado a objetos

● Es un lenguaje orientado a eventos
● Es dinámicamente tipado
● Está basado en prototipos

Su principal uso es permitir a los desarrolladores

crear acciones en sus páginas web aunque hoy en
día esto a cambiado permitiendo su uso fuera del
navegador.
 Impulsamos { talento }

Características de JavaScript
● Es un lenguaje de programación de Alto Nivel.
● Es Multiplataforma.
● Es interpretado, no se compila para poder ejecutarse.
● Es un lenguaje multipropósito, se puede utilizar en Frontend y Backend.
 Impulsamos { talento }

Que necesitamos
● Un navegador web: Chrome, Firefox,
etc.
● Un editor de texto o IDE: Visual Code,
WebStorm, Atom, Brackets, Sublime,
etc.
● Herramientas de depuración del
navegador.
 Impulsamos { talento }

Cómo utilizar JavaScript en la parte Front

● Utilizando la etiqueta script en el propio html.

<script>
console.log("Hola Mundo");
</script>

● Importando el script.

<script src="main.js"/>
 Impulsamos { talento }

SINTAXIS
 Impulsamos { talento }

Comentarios

Los comentarios no son interpretados por el navegador.

● Comentario de una línea: se antepone dos barras //.

// Esto es un comentario de una línea

console.log("Hola Mundo"); // Otro Comentario

● Comentario de bloque: Se apertura con /* y se cierra con */.

/* Esto es un comentario de bloque

o de múltiples líneas */
 Impulsamos { talento }

KATA
 Impulsamos { talento }

KATA: Hello, World

Vamos a crear una carpeta de trabajo llamada
“BTC-JS”, y en este, un archivo llamado
kata1.html

En el vamos a usar la instrucción console.log(),

para generar un log en el navegador.
 Impulsamos { talento }

VARIABLES
 Impulsamos { talento }

Variables
Las variables es la forma el cual JS almacena los // Creamos una Variable
datos de la aplicación por un nombre, para que var variable = 'Variable';
nosotros podamos identificarlo.
// Declarar una Variable
Para ello, usaremos la palabra clave var seguido var dato;
de un nombre para dicha variable. Luego
usaremos el operador de asignación (=) con el // Asignamos un Valor
tipo de datos que queramos almacenar. dato = 10;

// Modificamos su anterior valor.

variable = 'Hola, Mundo!'
 Impulsamos { talento }

Tipos de datos
Los tipos de datos especifican qué tipo de valor se guardará en una determinada
variable y se pueden categorizar en dos grupos:
● Simples: Son los tipos básicos o primarios
number 1
string 'hola'
boolean true
undefined undefined
function function() {}
● Complejos: son estructuras de datos que contienen otros tipos de datos
object
object / null
object / Array
 Impulsamos { talento }

Números

● En JavaScript existe sólo un tipo de dato numérico.

● Todos los números se representan a través del formato de punto flotante de
64 bits. (max 10^308)
● Esta forma es el llamado double en los lenguajes Java o C++.
89; // Número
-43;
0.4;
0.33333;
-0.3;
1e3;
 Impulsamos { talento }

Valores Booleanos

● También conocido como valor lógico.

● Sólo admite dos valores: true o false.
● Es muy útil a la hora de evaluar expresiones lógicas o
verificar condiciones.
true;
false;
 Impulsamos { talento }

Cadenas de texto

● El tipo de datos para representar cadenas de texto se llama string.

● Se puede representar letras, dígitos, signos de puntuación o cualquier otro carácter
de Unicode.
● La cadena de caracteres se debe definir entre comillas dobles o comillas simples.
'1 Esta es una cadena con comillas simples.';
"2 Esta cadena tiene comillas dobles. @";
'Podemos utilizar emojis: 💩';
 Impulsamos { talento }

Null

El valor null es un literal de Javascript que representa objeto nulo o vacío.

Su tipo es object:

typeof null; // ‘object’

Más info
 Impulsamos { talento }

Tipo Undefined

● Una variable a la cual no se le haya asignado valor entonces el valor es undefined.

undefined;
 Impulsamos { talento }

OPERADORES
 Impulsamos { talento }

Tipos

JavaScript tiene los siguientes tipos de operadores:

● Aritméticos.
● Lógicos.
● De asignación.
● De comparación.
● Condicionales/Ternarios.
● Cadenas de caracteres.
● Operador coma
● Operadores unarios
● Operadores de bit a bit.
 Impulsamos { talento }

Operadores Aritméticos

Permite realizar cálculos elementales entre variables numéricas.

● + Suma
● - Resta
● * Multiplicación
● / División
● % Módulo
● ** exponente
● ++ Incremento
● -- Decremento
 Impulsamos { talento }

Operadores Aritméticos

Otros operadores Aritméticos Especiales

● - Negación unaria
console.log(-"3");
// -> -3, intenta convertir un número al operando y devuelve su forma
negativa

● + Unario positivo
console.log(+"3");
// -> 3, intenta convertir un número al operando y devuelve su forma
positiva

● ** Exponente
2 ** 3 //Devuelve 8
10 ** -1 //Devuelve 0.1
 Impulsamos { talento }

Operadores Aritméticos

Otros operadores Aritméticos Especiales

● + Unario positivo
console.log(+"3");
// -> 3, intenta convertir un número al operando y devuelve
su forma positiva
 Impulsamos { talento }

Operadores Lógicos

Combinan diferentes expresiones lógicas con el fin de evaluar si el resultado de dicha

combinación es verdadero o falso.
● && Y
● || O
● ! No
 Impulsamos { talento }

Operadores de Asignación
Permiten obtener métodos abreviados para evitar escribir dos veces la variable que se
encuentra a la izquierda del operador.
● = asigna var a = 1
● += Suma y asigna a += 2 // a = a + 2
● -= Resta y asigna a -= 2 // a = a - 2
● *= Multiplica y asigna a *= 2 // a = a * 2
● /= Divide y asigna a /= 2 // a = a / 2
● %= Módulo y asigna a %= 2 // a = a % 2
● **= Asignación de exponenciación a **= 2 // a = a ** 2 Binarios:
● <<= Asignación de desplazamiento a la izquierda
● >>= Asignación de desplazamiento a la derecha
● >>>= Asignación sin signo de desplazamiento a la derecha
● &= Asignacion AND
● ^= Asignación XOR
● |= Asignación OR
 Impulsamos { talento }

Operadores de Comparación

Permite comparar todo tipo de variables y devuelven un valor booleano.

● < Menor que
● <= Menor igual que
● == Igual
● > Mayor que
● >= Mayor o igual ue
● != Diferente
● === Estrictamente igual
● !== Estrictamente diferente
 Impulsamos { talento }

KATA
 Impulsamos { talento }

KATA: Calculadora
Crea una calculadora que tenga una:

● Suma
● Resta
● Multiplicación
● División
 Impulsamos { talento }

ESTRUCTURA DE CONTROL
 Impulsamos { talento }

Ejecución Secuencial
Hemos visto que cuando codeamos un var tabla = 5

programa en JavaScript, todo se ejecuta en

orden secuencial, desde arriba hacia abajo. console.log(tabla + ' x 1 = ' +
(tabla*1)); // 5

Este flujo de ejecución, se puede alterar gracias

a un conjunto de palabras claves llamadas tabla = 6;
Estructuras de Control.
console.log(tabla + ' x 1 = ' +
Tenemos varias categorías de Estructuras de (tabla*1)); // 6
Control.

● Condicionales.
● Bucles.
● Funciones.
 Impulsamos { talento }

IF / ELSE
 Impulsamos { talento }

if
El if es la sentencia de JS que nos permite if( /* Condicion == True */ ) {
decidir qué parte del código se puede ejecutar
dependiendo de un valor.
// Se ejecuta nuestro código.

Es decir, con un If nos permite crear condiciones

en nuestro programa. }
 Impulsamos { talento }

if / else
Además del if, podemos complementar nuestra if( /* Condicion == True */ ) {
condiciones con la sentencia else. El else nos
permite ejecutar una parte del programa si la
// Se ejecuta nuestro código.
condición es falsa.
} else {
// Se Ejecuta SOLO si la
condición == False
}
 Impulsamos { talento }

if / if else / else
Y por último, tenemos la sentencia if else, que if( /* Condición_1 == True */ ) {
nos permite proponer varias condiciones y que
se ejecute la primera que sea verdadera.
// Se Ejecuta SOLO si la condición_1 == True

Si ninguna se cumple, se ejecutará el bloque con

el else. } if else ( /* Condición_2 == True */ ) {

// Se Ejecuta SOLO si la condición_2 == True

} else {

// Se Ejecuta SOLO si ninguna condicion

anterior es True

}
 Impulsamos { talento }

If Anidados
Y si, en ese bloque dentro de cualquiera de los If let edad = prompt('¿Cuál es tu edad?');
se puede añadir otro If, a esto lo llamamos, let acompañado = prompt('¿Cuál es tu edad?');
anidación de If o If Anidados.
let eresAdulto = edad >= 18;
Aunque es una buena práctica usar operadores let estasAcompañado = acompañado === 'SI';
lógicos como AND (&&) o OR ( || ) para evitar
anidar varios If. if( eresAdulto || estasAcompañado ){
console.log('Puedes Entrar');
También es una buena práctica guardar las }else {
condiciones en variables para que todo sea más console.log('Debes ser Mayor de Edad o estar
LEGIBLE. Acompañado');
}
 Impulsamos { talento }

KATA: ¿Estoy Aprobado?

 Impulsamos { talento }

KATA: ¿Estoy Aprobado?

Crea un programa el cual te pregunte por una
nota del 0 al 10 y dependiendo del número, te
devuelva la siguiente clasificación.

Nota: Debes de usar el If.

0 - 4: Insuficiente.
5 - 6: Suficiente.
7 - 8: Notable.
9 - 10: Sobresaliente.
 Impulsamos { talento }

SWITCH
 Impulsamos { talento }

switch
El switch es la otra palabra clave o sentencia switch( /* condicion */ ){
que nos ofrece JS para crear condicionales.
case 1:
// Codigo
Su sintaxis es un poco más larga, pero puede ser
útil en ocasiones concretas.
break;

Tenemos las palabras claves case, break y case 2:

default como complemento de switch. El cual // Codigo

los case son los if y los default el else. break;

default:
// Codigo
break;
}
 Impulsamos { talento }

KATA: ¿Y Ahora Estoy Aprobado?

 Impulsamos { talento }

KATA: ¿Y Ahora Estoy Aprobado?

Crea un programa el cual te pregunte por una
nota del 0 al 10 y dependiendo del número, te
devuelva la siguiente clasificación.

Nota: Debes de usar el Switch.

0 - 4: Insuficiente.
5 - 6: Suficiente.
7 - 8: Notable.
9 - 10: Sobresaliente.
 Impulsamos { talento }

OPERADOR TERNARIO ( ?: )
 Impulsamos { talento }

Operador Ternario (?:)

A diferencia de If y Switch, existe un operador let edad = 18;
(un símbolo) que nos permite hacer una let verPeliculaTerror;
condicion con una sintaxis super simplificada.
// Opción 1
Su uso más común es cuando el valor de una if (edad >= 18){
variable depende de una condición. Entonces verPeliculaTerror = 'SI';
podemos usar el ternario. El ? simboliza la }else {
condición verdadera y : la condición falsa. verPeliculaTerror = 'NO';
}

// Opción 2
let verPeliculaTerror = (edad >= 18)
? 'SI'
: 'NO'
 Impulsamos { talento }

WHILE
 Impulsamos { talento }

while
El while es una sentencia de JS preparada para let saldo = 10;
crear bucles, es decir, repetir que un fragmento
de código N veces.
while( saldo > 0){

Al igual que el If, tenemos una condición para

console.log('Has consumido 1€');

ejecutar el bloque. Mientras esa condición sea saldo -= 1; // Iterador

verdadera, el bloque seguirá ejecutándose. console.log('Te queda ' + saldo);

}

Cuidado con los bucles, que podemos crear

bucles infinitos, y dejaremos bloqueado nuestro
programa y posiblemente el PC.

Para evitar eso, tenemos un Iterador que se

encargará de romper el bucle cuando haga falta.
 Impulsamos { talento }

KATA: ¡Multiplicate por 0!

 Impulsamos { talento }

KATA: ¡Multiplicate por 0!

Crea un programa que pida al usuario un
número, y de este, generé su tabla de multiplicar
del 0 al 10.

Nota: Debes de usar un While.

 Impulsamos { talento }

DO WHILE
 Impulsamos { talento }

do while
El do while, es la 2º forma que nos ofrece JS let saldo = 10;
para realizar bucles, con dos diferencias.
do{
La primera, es su sintaxis, que cambia un poco,
empezando con un do sin condiciones y
console.log('Has consumido 1€');

terminando con un while. saldo -= 1; // Iterador

console.log('Te queda ' + saldo);

Y la segunda, su comportamiento, que ejecuta }while( saldo > 0)

siempre una vez (aunque la condición sea falsa)

y luego comprueba la condiciones para realizar
una segunda repetición.
 Impulsamos { talento }

FOR
 Impulsamos { talento }

for
Por último, tenemos el for como sentencia para for (let i = 0 ; i < 10 ; i++){
crear bucles. La diferencia con los anteriores
console.log(i);
bucles, es su condición en 3 pasos (separada
}
por ; ) :

1. let i = 0; -> Inicializar el Iterador.

2. i < 10; -> Condición del Bucle.
3. i++ : -> El incrementador del Iterador
 Impulsamos { talento }

KATA
 Impulsamos { talento }

KATA: Tablas de Multiplicar 2.0

Mediante un prompt() pediremos qué número
quieres mostrar la tabla de multiplicar del 1 al
10.

Usando For.
 Impulsamos { talento }

FUNCIONES
 Impulsamos { talento }

function (Funciones)
Las funciones son bloques de código que se function Suma(num1, num2){
declara una vez y se puede ejecutar cada vez
return num1 + num2;
que se necesite.
}

Se usa la sentencia function y un nombre para

declararlo. Luego, entre los paréntesis, se function Log(data){

declaran los parámetros. console.log(data)

}

Dentro de las llaves, declaramos el código, el

cual puede terminar con return. Esta palabra Log('Hola, Mundo!');
clave sirve para hacer que la función devuelva Log( Suma(1, 2) );
un tipo de dato.
 Impulsamos { talento }

Función anónima

Si bien la declaración de la función anterior es sintácticamente una sentencia, las

funciones pueden también ser creadas por una expresión de función. Tal función
puede ser anónima; no debe tener un nombre. Por ejemplo, la función square podría
haber sido definida como:

var square = function(number) {

return number * number;
};
var x = square(4); //x obtiene el valor 16
 Impulsamos { talento }

Llamando funciones

Definir una función no la ejecuta. Definir una función simplemente la nombra y

especifica qué hacer cuando la función es llamada. Llamar la función es lo que
realmente realiza las acciones especificadas con los parámetros indicados. Por
ejemplo, si define la función square, podría llamarla como sigue:

square(5);

La sentencia anterior llama a la función con el argumento 5. La función ejecuta sus

sentencias y retorna el valor 25.
 Impulsamos { talento }

KATA
 Impulsamos { talento }

KATA: Calculadora 2.0

Vamos a refactorizar la kata para crear una
calculadora más inteligente.

El programa empezará preguntando qué

operación vamos a usar.

Luego el programa pide los dos números para

hacer la operación asignada y mostrarla en un
alert()
 Impulsamos { talento }

ARRAY
 Impulsamos { talento }

Array.prototype

La propiedad Array.prototype contiene propiedades y métodos al objeto Array.

En la documentación de mozilla developers tenemos la lista de todos: Array.prototype

 Impulsamos { talento }

.length

La propiedad .length nos devuelve el tamaño el array.

var numeros = [1, 24, 456, 4];

console.log(numeros.length); // 4
for (var i = 0; i < numeros.length; i++) {
console.log(numeros[i]);
}
 Impulsamos { talento }

Métodos
A continuación se detalla los métodos más usados de los Arrays.
 Impulsamos { talento }

.push()

Añade nuevos elementos al array devuelve la nueva longitud del array.

var numeros = [1, 2, 3];

var newLength = numeros.push(100);
console.log(newLength);
console.log(numeros); // [1,2,3,100]
numeros.push(200, 400);
console.log(numeros); // [1,2,3,100,200,400]
 Impulsamos { talento }

.concat()

Selecciona un array lo concatena con otros elementos en un nuevo array.

var equipos_a = ['Valencia', 'Barça', 'Real Madrid'];

var equipos_b = ['Hercules', 'Zaragoza', 'Valladolid'];
var equipos_copa = equipos_a.concat(equipos_b);
console.log(equipos_copa); // ["Valencia", "Barça", "Real Madrid",
"Hercules", "Zaragoza", "Valladolid"]
console.log(equipos_a); // ["Valencia", "Barça", "Real Madrid"]
 Impulsamos { talento }

.join()

Concatena los elementos de un array en una sóla cadena separada por un carácter opcional.

var nombres = ['Manuel', 'Antonio', 'Pepe'];

console.log(nombres.join('-')); //"Manuel-Antonio-Pepe"
 Impulsamos { talento }

.reverse()

Invierte el orden de los elementos de un array.

var nombres = ['Manuel', 'Antonio', 'Pepe'];

nombres.reverse();
console.log(nombres); // ["Pepe", "Antonio", "Manuel"]
 Impulsamos { talento }

.unshift()

Añade nuevos elementos al inicio de un array y devuelve el número de elementos del nuevo array
modificado.

var nombres = ['Manuel', 'Antonio', 'Pepe'];

var valor_nombres = nombres.unshift('Jesús');
console.log(valor_nombres); // 4
console.log(nombres); // ["Jesús","Manuel","Antonio","Pepe"]
 Impulsamos { talento }

.shift()

Elimina el primer elemento de un array y devuelve el elemento extraído.

var nombres = ['Manuel', 'Antonio', 'Pepe'];

var valor_resto = nombres.shift();
console.log(valor_resto); // Manuel
console.log(nombres); // [ 'Antonio', 'Pepe' ]
 Impulsamos { talento }

.pop()

Elimina el último elemento de un array y lo devuelve.

var nombres = ['Manuel', 'Antonio', 'Pepe'];

console.log(nombres.pop()); // Pepe
console.log(nombres); // [ 'Manuel', 'Antonio' ]
 Impulsamos { talento }

KATA
 Impulsamos { talento }

KATA: Letra del DNI

Vamos a crear una función que valide que un
número de DNI y una letra son compatibles para
ello, necesitamos el siguiente algoritmo.

1. Realizar el módulo del número del DNI

entre 23.
2. El resultado de ese módulo es la posición
del siguiente array.
TRWAGMYFPDXBNJZSQVHLCKET
 Impulsamos { talento }

OBJETOS
 Impulsamos { talento }

Objetos (Object)
Un objeto es un valor en memoria al cual es posible referirse mediante un identificador.

En JavaScript los objetos pueden ser vistos como una colección de propiedades. Con la sintaxis
literal de objetos, un limitado grupo de propiedades son inicializadas; luego pueden ser agregadas o
eliminadas otras propiedades. Los valores de las propiedades pueden ser de cualquier tipo,
incluyendo otros objetos lo cual permite construir estructuras de datos complejas. Las propiedades
se identifican usando claves. Una clave es un valor String o Symbol.
 Impulsamos { talento }

Sintaxis objeto
Asocia una clave con un valor y tiene los siguientes atributos:
{
clave: 'valor',
clave2: 1234,
'clave3': [],
}
 Impulsamos { talento }

Clave: valor

En definitiva un objeto es una lista de pares de llaves y valores.

Pero también tenemos funciones que son objetos regulares con una
capacidad adicional de poder ser llamadas o invocadas.
 Impulsamos { talento }

KATA
 Impulsamos { talento }

KATA: Entradas de Cine

Vamos a desarrollar un programa, que a partir
de una lista de películas, diga al usuarios que
películas pueden ver o no, según estas reglas.
Listado de Películas:
1. La edad del usuario tiene que ser mayor o 1. Soy Leyenda, +13
igual a la edad recomendada de la película. 2. Rey León, +3
2. Por seguridad, se necesita, nombre, edad. 3. La Marca del Demonio +18
4. A todo Gas +8