Oscar Bustos
Frontend Developer & UX/UI Designer
Introducción al lenguaje Javascript
Óscar Bustos
Frontend Developer & UI/UX Designer
Introducción
Javascript es un lenguaje de programación orientado a la web y surgió por la necesidad de tener control sobre las acciones y comportamientos que un usuario realiza en su navegador.
De esta afirmación podemos decir que se trata de un lenguaje de programación del lado del cliente, esto quiere decir que se ejecuta en el propio navegador.
Introducción
ECMAScript es la especificación que define el lenguaje Javascript.
Actualmente está en la versión 6 y se está trabajando en la siguiente versión que se espera implantar para 2020
Es uno de los lenguajes más populares
Introducción
Actualmente las web modernas y el uso de HTML5 ha relanzado este lenguaje como uno de los más usados y solicitados por las empresas
NOTA: Es muy importante diferenciar el lenguaje JAVA con Javascript, ya que no tiene nada que ver.
Introducción
¿Qué nos permite el uso de Javascript en nuestra web? Principalmente nos permite dos cosas
- Permite interactuar con nuestro HTML para realizar efectos visuales que puede mejorar mucho la experiencia de usuario
- Permite realizar páginas interactivas donde el usuario puede realizar acciones concretas
Introducción
El código Javascript se escribe dentro de nuestro HTML e irá entre etiquetas <script>
console.log("Hola desde Javacript"); //Muestra texto por consolaIntroducción
También podemos incluir archivos externos mediante esta etiqueta y su atributo src
<script src="jquery-3.3.1.min.js"></script>Introducción
Por supuesto se pueden combinar!
<script src="jquery-3.3.1.min.js"></script>
<script>
console.log('Hola desde Javacript');
</script>Introducción
El orden es importante, nuestro JS se puede incluir en cualquier punto del documento HTML aunque se recomienda hacerlo al final ya que pausa el renderizado de nuestro HTML
Introducción
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Código HTML -->
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
<!-- Código Javascript -->
<script type="text/javascript">
console.log('Este es el lugar más indicado para iniciar nuestor JS')
</script>
</body>
</html>Reglas
Reglas a tener en cuenta para escribir correctamente lenguaje Javascript:
- Javascript diferencia entre mayúsculas y minúsculas: Normalmente escribiremos todo en minúsculas aunque si el nombre de la función contiene dos palabras la segunda se escribirá́ con la primera letra en mayúsculas ej. bgColor
- Las instrucciones se separan mediante (;) o salto de línea: Es una buena práctica realizar la separación mediante punto y coma por lo que podemos tomar por costumbre esta.
Reglas
Los archivos no deben de contener espacios y deben de acabar con la extensión .js
Comentarios
Para realizar comentarios en Javascript lo podemos hacer de la siguiente forma
<script>
// Comentario de una única línea
/*
Comentario de varias lineas
en un archivo de Javascript
*/
</script>Variables
Las variables son espacios de memoria donde almacenamos de forma temporal datos.
<script>
var texto; //Forma antigua de declarar variables
let dato; //Declaramos una variable
let numero = 5; //Declaramos una variable asignado un valor
let nota; //Primero declaramos
nota = 8; //Después asignamos
const codigoPostal = 28029 // Declaración de constante que no se puede cambiar;
</script>Variables
Los nombres deben ser descriptivos y deben comenzar por una letra.
Variables
TIPOS
<script>
const numeroEntero = 6; //Tipo numérico
const verdadero = true; //Tipo boolean
const texto = "Esto es un string"; //Tipo string
const alumno = { Nombre: 'Mónica', Curso: '4'}; //Tipo Object
const frutas = ['Manzana', 'Pera', 'Plátano']; //Tipo Object, Array
const nota; //Tipo undefined
</script>Variables
MOSTRAR VARIABLES
<script>
console.log(variable); // Muestra el valor que contiene la variable por consola
console.log('Texto explicativo:', variable); // Muestra un texto junto con la variable
debugger; // Añade un punto de pausa en la ejecución dando la posibilidad de ir paso a paso
alert("Hola desde una caja de alertas!"); // Muestra caja de alerta del navegador con mensaje o valor de variable
document.write("Hola Mundo!"); //Escribe en el documento HTML (body) lo que hayamos puesto entre paréntesis
</script>Strings
Son variables donde almacenamos cadenas de texto. Siempre van entre comillas, pueden ser simples o dobles.
<script>
const nombre = 'Mónica'; //Declaramos una variable de tipo string
</script>Veamos los métodos y funciones más comunes a la hora de trabajar con strings
<script>
// Declaramos variable texto con un string
const texto = "Lorem ipsum dolor sit amet";
// Crea un salto de linea y escapamos la comilla simple
const esc = 'I don\'t \n know';
// Guardamos la longitud del string
const len = texto.length;
// Buscamos el índice de la cadena "sum", si no existe devolverá -1
texto.indexOf("sum");
// Corta el string desde el primer índice hasta el segundo
texto.slice(3, 6);
// Busca y reemplaza la cadena de texto
texto.replace("Lorem", "Hola");
// Convierte a mayúsculas
texto.toUpperCase();
// Convierte a minúsculas
texto.toLowerCase();
// Concatena la variable texto + " " + texto2
const texto2 = "consectetur"
texto.concat(" ", texto2);
// Devuelve el caracter en el índice indicado
texto.charAt(2);
// Divide el string con comas y devuelve un array
texto.split(",");
// Convertimos un número a string
const age = 18
age.toString();
</script>
Numbers
En este tipo de variables almacenaremos números
<script>
const edad = 0.7; //Declaramos una variable de tipo number
</script>Veamos los métodos y funciones más comunes a la hora de trabajar con numbers
<script>
// Declaramos una variable con número
const pi = 3.141;
// Eliminamos los decimales
pi.toFixed(0);
// Dejamos únicamente dos decimales
pi.toFixed(2);
// Convierte string a número
const edad = parseInt("18");
// Devuelve el primer número entero dentro del string
const meses = parseInt("9 meses");
// Devuelve el primer número con decimales dentro del string
parseFloat("3.5 days");
</script>Operadores
ARITMÉTICOS
<script>
const suma = 8 + 2; //Suma
const resta = 8 - 2; //Resta
const parentesis = (8 + 2) - 5; //Con paréntesis
const division = 8 / 2; //División
const multiplicacion = 8 * 2; //Multiplicación
const textos = "Hola " + "Mundo"; //Concatenar textos
</script>Operadores
BOOLEANOS - NEGACIÓN
!true = false
!false = true
!!true = true
Este operador concierte un valor booleano en su opuesto. Para ello utilizamos el signo !
Operadores
BOOLEANOS - IGUALDAD
true === true //Verdadero
true === false //Falso
true !== false //Verdadero
true !== true //Falso
El operador de igualdad ser realiza con el signo = tres veces seguidas.
Operadores
BOOLEANOS - COMPARACIÓN
5 > 3 //Verdadero
5 < 3 //Falso
3 >= 3 //Verdadero
2 <= 1 //Falso
El operador de igualdad ser realiza con el signo = tres veces seguidas.
Operadores
LÓGICOS
true && true // true
true && false // false
false && true // false
false && false // false
El operador AND
Operadores
LÓGICOS
true || true // true
true || false // true
false || true // true
false || false // false
El operador OR
Operadores
En JavaScript ciertos valores son evaluados como false
0 // false
"" // false
undefined // false
null // false
NaN // falseCondicional
IF
<script>
if (5 < 10) {
//Bloque de código para el caso verdadero
}
</script>Con estos operadores podemos realizar preguntas condicionales bajo la siguiente estructura de Javascript
Condicional
IF/ELSE
<script>
if (nota < 10) {
//Bloque de código para el caso verdadero
}
else {
//Bloque de código para el caso falso
}
</script>Condicional
IF/ELSE IF
<script>
if (nota > 5) {
//Bloque 1
}
else if (nota > 6) {
//Bloque 2
}
else if (nota > 9) {
//Bloque 3
}
else {
//Bloque 4
}
</script>Además podemos concatenar diferentes condiciones de la siguiente forma
Condicional
Ternario
<script>
var numero = 7;
var resultado = (numero < 5) ? "Estás suspendido" : "Estás aprobado";
console.log(resultado); // "Estás aprobado";
</script>Una forma más corta de hacer un condicional simple
Condicional
Switch
Para evitar if/else con muchos casos
<script>
switch (new Date().getDay()) { // Obtenemos el dia de la semana en número
case 1: // Si el número es 1
text = "Monday";
break;
case 2: // Si el número es 2
text = "Tuesday";
break;
case 3: // Si el número es 3
text = "Wednesday";
break;
case 4: // Si el número es 4
text = "Thurdsday";
break;
case 5: // Si el número es 5
text = "Friday";
break;
case 6: // Si el número es 6
text = "Saturday";
break;
case 7: // Si el número es 7
text = "Sunday";
break;
default:
text = "Whatever";
};
console.log(text); // Aparecerá el dia de la semana
</script>Objetos
<script>
const nombreAlumno = "Mónica";
const apellidosAlumno = "Bustos Cañizares";
const cursoAlumno = "3º";
const gradoAlumno = "Diseño Digital";
</script>Todo en javascript son Objetos. Ya que es la forma más óptima de guardar información en este lenguaje
Las variables de tipo object nos permiten guardar cualquier tipo de información. Veamos un ejemplo:
<script>
const usuario = {
nombre : "Mónica",
apellidos: "Bustos Cañizares",
curso: "3º",
grado: "Diseño Digital"
}
</script>Objetos
<script>
console.log(usuario.nombre) // Mónica
</script>Para acceder a los datos lo haremos mediante el punto de la siguiente forma:
También es posible añadir más datos mediante la misma forma, veamos un ejemplo:
<script>
usuario.pais = "España"; // Con esto añadimos una nueva clave y valor a nuestro objeto
</script>Objetos
Podemos guardar cualquier tipo de información
<script>
const usuario = {
nombre : "Mónica",
apellidos: "Bustos Cañizares",
curso: "3º",
grado: "Diseño Digital",
media: function(notas){
let nota = 0;
let media = notas.length;
for (let i = 0; i < notas.length; i++) {
nota += notas[i];
};
return media = nota/media;
}
};
var notas= [5, 10, 5, 6];
console.log(usuario.nombre) // "Mónica"
console.log(usuario.media(notas)) // 6.5 - Las funciones que guardamos en un object se les denomina métodos
</script>Objetos
Funciones y métodos más comunes a la hora de trabajar con objectos
<script>
const user = {
name: "John",
age: 30
};
Object.keys(user) // Devuelve array: ["name", "age"]
Object.values(user) // Devuelve array: ["John", 30]
Object.entries(user) // Devuelve array: [ ["name","John"], ["age",30] ]
</script>Objetos
Las funciones que guardamos en un object se les denomina métodos
Arrays
<script>
const brands = ["Apple", "Samsung", "LG", "Ford"]
const numbers = [ 1, 7, 9, 3]
</script>Los arrays son un tipo de objeto muy interesante para almacenar una colección de datos
Arrays
<script>
const brands = ["Apple", "Samsung", "LG", "Ford"]
const marca = brands[0]; // Apple
</script>Los datos se guardan en un índice que siempre empieza por 0
Arrays
Funciones y métodos más comunes para trabajar con arrays
<script>
const dogs = ["Bulldog", "Beagle", "Labrador"];
// Acceso a los items, el primero es [0]
alert(dogs[1]);
// Modificar un item
dogs[0] = "Bull Terier";
// Convierte a string "Bulldog,Beagle,Labrador"
dogs.toString();
// Une en un string: "Bulldog, Beagle, Labrador"
dogs.join(", ");
// Elimina último elemento
dogs.pop();
// Añade nuevo elemento al final
dogs.push("Chihuahua");
// Elimina primer elemento
dogs.shift();
// Añade como primer elemento
dogs.unshift("Chihuahua");
// Añade elementos (dónde, cuántos debe eliminar, elementos)
dogs.splice(2, 0, "Pug", "Boxer");
// Devuelve un array concatenando los elementos
const animals = dogs.concat(cats,birds);
// Devuelve array desde la posición 1 hasta la 3
dogs.slice(1,4);
// Ordena por orden alfabético
dogs.sort();
// Ordena inversamente
dogs.reverse();
// Ordena numéricamente ascendentemente
x.sort(function(a, b){return a - b});
// Ordena numéricamente descendentemente
x.sort(function(a, b){return b - a});
</script>El DOM
El DOM (*Document Object Model*) no es más que una representación de nuestro HTML pero como objeto.
Cada etiqueta de HTML es un nodo al cual podemos acceder desde Javascript para poder manipularlo a nuestro antojo
El DOM
Todo nuestro HTML estará accesible desde la variable global document.
<script>
console.log(document); // Acceso desde Javascript a nuestro HTML
</script>El DOM
Cada etiqueta de nuestro HTML es un nodo. Cada nodo se compone de:
- El elemento de HTML
- Los atributos
- Los eventos
- El texto
- Los elementos hijos
El DOM
Para acceder a cualquier nodo de nuestro HTML podemos utilizar los siguientes métodos:
<script>
// Devuelve un nodo mediante selector de CSS
const elemento = document.querySelector('#main__header .container');
// Devuelve un array de nodos mediante selector de CSS
const elemento = document.querySelectorAll('.container');
</script>El DOM
Para acceder elementos del DOM podemos hacerlo de la siguiente forma:
<script>
// Permite acceder al padre de un nodo. Es útil para eliminar nodos.
elemento.parentNode
// Para acceder al primer hijo
elemento.firstElementChild
// Para acceder al último hijo
elemento.lastElementChild
// Para acceder al siguiente hermano con misma jerarquia. Por ejemplo útil en una lista
elemento.nextElementSibling
// Para acceder al hermano anterior con misma jerarquia
elemento.previousElementSibling
// Devuelve un array con todos los hijos
elemento.childNodes
</script>El DOM
Para acceder al contenido de un nodo:
<script>
// Devuelve el código HTML dentro del nodo
elemento.innerHTML
// Devuelve el texto plano del nodo, omitiendo el código HTML
elemento.textContent
</script>El DOM
Para modificar el contenido de un nodo
<script>
// Devuelve el código HTML dentro del nodo
elemento.innerHTML = '<p>Nuevo párrafo en el nodo</p>'
// Devuelve el texto plano del nodo, omitiendo el código HTML
elemento.textContent = 'Nuevo texto para el nodo'
</script>El DOM
Para modificar atributos de los nodos
<img class="logo big" src="logo.jpg" alt="Logo" />
<script>
// Llamamos al elemento y lo asignamos a una variable
const logo = document.querySelector('.big');
// Accedemos al atributo src de la imagen y la almacenamos
const logoSrc = logo.src;
// Cambiamos el src
logo.src = 'new-logo.jpg';
// Devuelve la clase o clases del elemento
logo.className;
// Devuelve un array con la clase o clases del elemento
logo.classList;
// Añade una nueva clase a las ya existentes
logo.classList.add('nueva-clase');
// Elimina una clase del elemento
logo.classList.remove('otra-clase');
// Cambiamos el atributo alt
logo.setAttribute('alt','Our new logo')
</script>El DOM
Sustituir o eliminar un nodo
<script>
//Eliminar nodo
nodoPadre.parentNode.removeChild(nodoParaEliminar);
//Sustituir nodo
nodoPadre.replaceChild(nodoNuevo, nodoParaSustituir)
</script>El DOM
En algunas ocasiones querremos generar nuestros propios nodos y añadirlos a nuestro documento HTML.
Para ello necesitaremos seguir tres sencillos pasos:
1. Crear el nodo,
2. Introducir atributos y contenidos
3. Añadirlo donde quieres que aparezca
<script>
// Creamos un nodo de tipo párrafo mediante la etiqueta p
const nuevoParrafo = document.createElement('p');
// Añadimos un nuevo atributo al nodo que creamos
nuevoParrafo.setAttribute('class','big');
// Añadimos contenido
nuevoParrafo.innerHTML = 'Hi from <strong>JS</strong>'
// Seleccionamos el nodo donde queremos anexionarlo
const article = document.querySelector('.article');
// Lo anexamos dentro de otro nodo
article.appendChild(nuevoParrafo);
</script>El DOM
Si queremos adjuntar un nodo antes que otro que tengamos como referencia podemos utilizar lo siguiente:
<script>
nodo.insertBefore(nuevoNodo, nodoAnteriorDondeAnexamos)
</script>El DOM
También es posible hacer que un elemento aparezca al mismo nivel que otro mediante insertAdjacentElement
<script>
// 1 Crear el nodo
let subTitulo = document.createElement('h2');
// 2 Añadir texto y atributos
subTitulo.innerHTML = 'Esto es un subtítulo';
subTitulo.setAttribute('class', 'subtitle');
// 3 Incluirlo en el nivel que queremos del DOM
let titulo = document.querySelector('.main h1');
titulo.insertAdjacentElement('afterend', subTitulo);
</script>El DOM
En el primer parámetro podemos utilizar cuatro opciones diferentes dependiendo de dónde queremos añadirlo
- 'beforebegin': Antes del elemento.
- 'afterbegin': Dentro del elemento, antes de su primer hijo.
- 'beforeend': Dentro del elemento, después de su último hijo.
- 'afterend': Después del elemento.
Funciones
Las funciones son pequeños programas que realizan una tarea muy concreta y que se pueden reutilizar tantas veces queramos durante la ejecución de nuestro programa Javascript.
Cuando realizamos alguna funcionalidad en Javascript lo más normal es encapsularla en una función. De esta forma nos aseguramos de que podemos volver a realizar la misma acción sin caer en el error de repetir código.
Funciones
<script>
//Definimos la función
function escribirBienvenida(){
document.write("<h1>Hola a todos</h1>") ;
};
//Ejecutamos la función
escribirBienvenida();
</script>La sintaxis para realizar una función es la siguiente:
Funciones
<script>
//Definimos la función
function escribirBienvenida(nombre, apellidos){
document.write("<h1>Hola " + nombre + " " + apellidos + " </h1> ");
};
//Llamamos a la función pasándole los parámetros
escribirBienvenida("Alberto ", " Saez ");
</script>Las funciones tienen la posibilidad de recibir y enviar parámetros.
Estos parámetros se incluyen dentro de sus paréntesis tal y como se muestra en el ejemplo
Funciones
<script>
//Definimos la función
function media(valor1,valor2){
var resultado
resultado = (valor1 + valor2) / 2
return resultado
};
//Asignamos lo que devuelve la función a una variable para utilizarla
miMedia = media(10, 5);
document.write(miMedia);
</script>Las funciones además de recibir parámetros tienen la posibilidad de contestar su resultado a través de la palabra reservada return
Bucles
Además de los condicionales existen otras estructuras de bucles. Estos se utilizan cuando queremos repetir la ejecución de código un número de veces, siempre que se cumpla una condición.
En función de si conocemos o no ese número de veces que vamos a iterar ese código elegiremos utilizar el bucle FOR o WHILE
Bucles
El bucle WHILE es el más sencillo de comprender. Sólo se indica, como veremos a continuación, la condición que se tiene que cumplir para que se realice una iteración, sin llegar a conocer el número de veces que vamos a utilizarlo.
<script>
let i = 1; // Inicialización
while (i < 11) { // Condición de permanencia
console.log(i); // Código a ejecutar
i++; // Actualización de la variable de control
}
</script>Bucles
El bucle FOR se utiliza para repetir una o varias sentencias un determinado número de veces. De entre todos los bucles, el FOR se suele utilizar cuando sabemos seguro el número de veces que queremos que se ejecute. La sintaxis del bucle for se muestra a continuación.
<script>
for (let i=1; i < 11; i++) {
console.log(i); // Devuelve: 1 2 3 4 5 6 7 8 9 10”
};
</script>Bucles
Con la versión de ECMAScript 5 surgió el bucle forEach:
<script>
const miArray = ['Oscar', 'María', 'Mónica', 'Alberto'];
miArray.forEach((elemento, index) => {
console.log(`El valor del índice es: ${index} y el elemento es ${elemento}`);
});
</script>Bucles
Existe una forma más sencilla y limpia de poder realizar bucles for que ha surgido en la nueva versión de ECMAScript6 de javascript:
<script>
const nombres = ["Óscar", "María", "Mónica"]
for (nombre of nombres) {
console.log(nombre); // Mostramos los elementos del array
};
</script>Eventos
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p> <a id="boton" href="#">Enlace</a> </p>
<script>
//Asociamos a un elemento de la web el evento
const target = document.querySelector('#boton');
target.addEventListener('click', onClickHandler);
//Función que manejará el evento
function onClickHandler(e) {
e.preventDefault(); //Evita que se dispare una acción por defecto
console.log(e);
console.log('hola');
};
</script>
</body>
</html>Los eventos son una parte importante de Javascript, echemos un vistazo a un ejemplo para ver como funciona
Eventos
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
<h1>Hola Mundo</h1>
<h2>SubHeader</h2>
</header>
<script>
//Asociamos a un elemento de la web el evento
var header = document.querySelector('header');
//Función que nos dirá qué elemento es sobre el que se ha hecho click
header.addEventListener('click', function(e) {
console.log('Has clickado en ' + e.target.nodeName);
});
</script>
</body>
</html>Los eventos son una parte importante de Javascript, echemos un vistazo a un ejemplo para ver como funciona
Eventos
En el caso de que queramos alternar una clase podemos utilizar el método toggle dentro de classList
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Javascript</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<a href="https://google.com" class="button">Shiney!</a>
</div>
<script>
var boton = document.querySelector('.button');
boton.addEventListener('click', onClick);
function onClick(e){
e.preventDefault();
console.log('Hice click!')
boton.classList.toggle('big');
};
</script>
</body>
</html>
Eventos
- click, dblclick
- change
- drag (dragenter, dragend, dragleave, dragover, dragstart,...)
- focus
- keydown, keyup, keypress,
- mouseenter, mouseleave, mouseover, mouseup,...
- scroll
- submitTenemos a nuestra disposición numerosos eventos sobre los que podemos actuar. En este enlace tienes la lista completa. Los más utilizados en una aplicación web serían:
Módulos
En Javascript tenemos ciertos módulos con los que podemos trabajar de forma nativa. A continuación vamos a ver un par de ellos
Módulos
Math
Math.round(4.4); // 4 - redondeo
Math.round(4.5); // 5
Math.sqrt(49); // 7 - raiz cuadrada
Math.abs(-3.14); // 3.14 - valor absoluto
Math.ceil(3.14); // 4 - redondeo al alza
Math.floor(3.99); // 3 - redondeo a la baja
Math.min(0, 3, -2, 2); // -2 - el menor de los valores
Math.max(0, 3, -2, 2); // 3 - el mayor de los valores
Math.random(); // Devuelve un número entre 0 y 1
Math.floor(Math.random() * (10 - 0)); // número aleatorio, entre 1 y 10Módulos
Date
const fecha = new Date(); // Obtenemos la fecha actual
const nSemana = fecha.getDay() // Día de la semana en número
// Otras funciones disponibles para trabajar con fechas:
getDate(); // día del mes (1-31)
getDay(); // día de la semana (0-6)
getFullYear(); // 4 dígitos del año (yyyy)
getHours(); // hora (0-23)
getMilliseconds(); // millisegundos (0-999)
getMinutes(); // minutos (0-59)
getMonth(); // mes (0-11)
getSeconds(); // segundos (0-59)
getTime(); // millisegundos since 1970Recursos
Q&A
oscar.bustos@u-tad.com
04 - Introducción a Javascript
By Oscar Bustos
04 - Introducción a Javascript
Introducción al lenguaje Javascript
