Mozilla Firefox Quantum
Visual Studio
Code
Slack
Javascript es un lenguaje de programación orientado a objetos, diseñado para facilitar el desarollo web y hacerlo más atractivo
Muchas veces se utiliza para crear elementos intercativos, mejorando la experiencia de usuario, pero se puede usar hasta para manejar el lado del servidor con "node.js"
Es un lenguaje de programación interpretado, por lo que no es necesario compilar el código para su ejecución. Se puede probar directamente en el navegador sin necesidad de procesos intermedios
Es uno de los
pilares fundamentales
de la "Web Moderna"
Posibilitando la interacción
con elementos HTML y CSS
Al mostrar una página web, el navegador hace esto representando lo que vemos con una estructura de árbol, compuesta por nodos
El objeto "window" es el elemento raíz, todo elemento en una página web es un hijo de manera directa o indirecta de este objeto
Los navegadores modernos pueden entender código JS y ejecutarlo inmediatamente dentro del objeto "window", accedediendo y modificando de esta manera a los nodos hijo
DOM es una manera de transformar documentos XML en una estructura árbol, generando una jerarquía de nodos
Esta estructura representa tanto al contenido del documento, como a la relación entre los nodos
El BOM permite a JS comunicarse con partes del navegador distintas al contenido de la página web
Se pueden hacer cosas como consultar el tamaño de la pantalla, acceder a la url escrita en la barra del navegador, manipular el historial de navegacion, saber el navegador usado, la ubicación del navegador, etc
Existen tres maneras de incluir código JS en nuestras paginas web
Incluir el código dentro del documento HTML, dentro de una etiqueta script
<script>
alert('un mensaje');
</script>
Definir JS en un archivo externo e incluirlo dentro de nuestro documento HTML
<script src="js/main.js"></script>
alert('un mensaje');
De manera inline. Como atributo HTML
<p onclick="alert('un mensaje de prueba')">
Un párrafo de texto
</p>
Normas básicas que definen la sintaxis de JS
- No se tienen en cuenta los espacios en blanco ni nuevas líneas
- Se distingue entre mayúscula y minúscula
- No se define el tipo de variable
- Se pueden incluir comentarios
// Este es un comentario de una líneas
/* Este es un
comentario de
varias líneas */
Genera un archivo HTML y experimenta las 3 formas de incluir código js
Todos los navegadores web modernos incluyen una consola, una poderosa herramienta creada para desarrolladores
Muestra mensajes de información, error o alerta
Permite interactuar con la página ejecutando comandos de JS
Para acceder a la consola, debemos seleccionar "herramientas" en la barra del navegador
Luego, seleccionamos "Consola Web"
En el archivo HTML del ejercicio anterior, incluye el siguiente script
<script>
console.log('Este es un mensaje a la consola');
</script>
Prueba con los siguientes métodos en la consola
console.log('Este es un mensaje a la consola');
console.error('Este es un mensaje de error a la consola');
console.warn('Este es un mensaje de error a la consola');
console.info('Este es un mensaje de error a la consola');
El método "getElementById()", nos retorna el elemento con el ID especificado en el parámetro
<script>
document.getElementById('id-elemento');
</script>
Al poner "document." estamos accediendo al objeto-nodo del DOM "document". El método "getElementById()", selecciona el nodo con el ID correspondiente.
Haremos un nuevo documento HTML que contenga Bootstrap, al cuál le agregaremos el siguiente código
<div class="container text-center py-5">
<h1 class="display-3 py-5" id="texto">Aprende JS</h1>
<button class="btn btn-primary" id="boton">Cambiar texto</button>
</div>
Entra a la consola y ejecuta lo siguiente, fíjate en el cambio
document.getElementById('texto').innerHTML = 'Amplia la experiencia de usuario';
Logramos hacer un cambio en el DOM, ahora haremos que se ejecute el código al seleccionar el botón. Inserta el siguiente cambio a tu documento HTML
<div class="container text-center py-5">
<h1 class="display-3 py-5" id="texto">Aprende JS</h1>
<button class="btn btn-primary" id="boton" onclick="document.getElementById('texto').innerHTML('Amplía la
experiencia de usuario')">Cambiar texto</button>
</div>
"Onclick" es un evento JS, esto quiere decir que cada vez que se haga "click", sobre el elemento especificado, ésto gatillará un bloque de código
Genera un nuevo documento HTML con los siguientes elementos:
- Un mensaje inicial antes que cargue todo el documento
- Un mensaje en la consola
- Una modificación a un elemento, al ocurrir un evento en el DOM
- Botón que al presionarlo, genere una alerta
Una variable es un elemento que se emplea para almacenar y hacer referencia a otro valor
Las variables nos permiten escribir funcionalidades usando valores guardados o relacionados con otras funcionalidades
El scope de una variable, refiere al lugar en el código donde se podrá tener acceso a ésta
Las variables "Globales" se anexan al objeto "window" y son accesibles desde cualquier parte de nuestro código
Para definir una variable, podemos usar la palabra reservada "var"
var a = 10;
var b = 20;
var resultado = a + b;
El nombre de una variable también se conoce como "identificador" y debe cumplir con las siguiente normas
- Solo puede estar formado por letras, números y los símbolos "$" y "_"
- El primer carácter no puede ser un número
- Se distingue entre mayúsculas y minúsculas
- No puede ser una palabra reservada, como por ejemplo "var"
Modifica el código del ejercicio 2, descomponiendo la frase creada en nuestro script, en dos variables
<div class="container text-center py-5">
<h1 class="display-3 py-5" id="texto">Aprende JS</h1>
<button class="btn btn-primary" id="boton" onclick="document.getElementById('texto')
.innerHTML(amplia + experiencia)">Cambiar texto</button>
</div>
Definelas en una etiqueta "script" y pruébalo en el navegador
<script>
var amplia = 'Amplía la';
var experiencia = ' experiencia de Usuario';
</script>
Un array es una colección de valores asignados a una variable
Cada valor tiene un índice, partiendo del "0" en adelante
<script>
var dias = [ 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo' ];
</script>
Para acceder a un valor, llamamos a la variable, junto con el índice correspondiente al valor deseado
<script>
// el valor en la consola será "Jueves"
console.log(dias[3]);
</script>
Modifica el ejercicio anterior, expresando las dos variables como un array con dos valores
<div class="container text-center py-5">
<h1 class="display-3 py-5" id="texto">Aprende JS</h1>
<button class="btn btn-primary" id="boton" onclick="document.getElementById('texto')
.innerHTML(frase[1] + frase[2])">Cambiar texto</button>
</div>
Modifica la etiqueta "script" y pruébalo en el navegador
<script>
var frase = [ 'Amplía la', ' experiencia de Usuario' ]
</script>
Define el siguiente array en la consola del navegador
<script>
var colores = ['Azul', 'Amarillo', 'Rojo', 'Gris'];
</script>
Crea tres variables que al llamarlas den los siguientes resultados. Accede al array para llamar a los colores
Primera variable: "Rojo, Gris, Azul, Amarillo"
Segunda variable: "Azul+Rojo+Gris+Gris+Azul"
Tercerca variable: "'Amarillo', 'Azul', 'Rojo'"
JS tiene distintos tipos de operadores y con ellos podemos hacer cosas como
- Asignar valores a variables
- Operaciones matemáticas
- Evaluaciones lógicas
- Comparar valores
Asigna un valor a un identificador
<script>
//Asigna el valor "b" al identificador "a"
a = b
</script>
Compara valores y entrega un valor lógico, dependiendo de si la comparación es verdadera o falsa
<script>
var a = 15;
var b = 20;
// Igualdad
a == b - 5;
//Diferencia o no igualdad
a != b
//"Mayor a" y "mayor o igual a"
b > a
b - 5 >= a
//"Menor a" y "Menor o igual a"
a < b
a <= b - 5
</script>
Permiten realizar operaciones matemáticas
<script>
var a = 15;
var b = 5;
// suma y resta
a + b;
a - b;
//Multiplicación y división
a * b;
a / b;
//Resto (32 % a = 2)
a % 32;
//Aumento en uno (a++ = a + 1)
a++;
//Resta en uno (a-- = a - 1)
a--;
</script>
Permiten realizar evaluaciones de verdad, usando valores Booleanos (true, false)
<script>
var a = 15;
var b = 5;
//Operador lógico "and"
//La expresión es verdadera cuando los dos valores comparados son verdaderos
a > b && b < a
//Operador lógico "or"
//La expresión es verdadera si es que uno de los dos valores es verdadero (se evalúan en el orden en el que están escritos)
a > b || b > a
//Operador lógico "not"
//Entrega el valor opuesto al valor evaluado
!a > b //false
!a < b //true
</script>
Las estructuras de control de flujo nos permiten presentar distintos caminos a seguir dependiendo de condiciones que establezcamos
En la mayoría de los casos son de la forma "Si se cumple esta condición haz esto, si no se cumple, haz esto otro" o "Repite esto mientras se cumpla la condición"
Se usa para ejecutar un código en función de una condición. Si la condición se cumple, se ejecuta el código adentro del blocke "{}". Si la condición no se cumple, no se ejecuta el código y el programa continúa
<script>
if (10 > 5) {
alert('10 es mayor a 5');
}
if (10 < 5) {
alert('10 es menor a 5');
}
if (10 == 10) {
alert('10 es igual a 10');
}
</script>
Completa las condiciones de los "if" siguientes, para que los mensajes "alert()", se muestren de manera correcta
<script>
var numero1 = 5;
var numero2 = 8;
if () {
alert('numero 1 es mayor a numero 2');
}
if () {
alert('numero 2 es positivo');
}
if () {
alert('numero 1 es negativo o distinto de cero');
}
if () {
alert('Incrementar en uno el valor de numero 1 no lo hace mayor o igual que numero 2');
}
</script>
Nos permite establecer código a ejecutarse en caso que la condición sea falsa
<script>
var numero1 = 5;
var numero2 = 8;
if (numero1 > numero2) {
alert('numero 1 es mayor a numero 2');
} else {
alert('numero 1 es menor a numero 2');
}
</script>
Nos permite establecer una nueva condición, en el caso de que la condición anterior sea falsa
<script>
var dia = 'Sábado';
if (dia == 'Sábado') {
alert('es fin de semana');
} else if (dia == 'domingo') {
alert('es fin de semana');
} else {
alert('es día de semana');
}
</script>
En un nuevo documento crea un código JS que evalue 3 números a traves de variables y eliga el número mayor, haz esto usando la estructura else if
La estructura for permite realizar repeticiones de un código en particular, mientras la condición se siga cumpliendo
<script>
for (inicialización; condición; actualización) {
...
}
var dias = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes'];
for (var i = 0; i < 5; i++) {
console.log(dias[i]);
}
</script>
Repite un código, hasta que la condición dada, no sea verdadera
<script>
var numero = 1;
while (numero < 10) {
console.log('el número es ' + numero);
numero++;
}
</script>
Crea un script que muestre todos los números pares entre 1 y 20
Las funciones son maneras de encapsular funcionalidades para ser reutilizadas, llamándolas por su nombre (como una variable), sin necesidad de re escribir el código cada vez que lo necesitemos
Las funciones aceptan argumentos. Son variables que vienen desde afuera de la función y que se pueden utilizar en ésta. Se ponen entre paréntesis y separan por comas, si es que hay de un agumento
Por ejemplo la función "alert()" hace aparecer una ventana con un mensaje. Ese mensaje que le escribimos dentro del paréntesis, es el parámetro que utiliza la función para llevar a cabo su tarea
JS viene con varias funciones integradas como "alert()" o "console.log", pero también podemos definir nuestras propias
Para definir una función, usamos la palabra reservada "function", seguida del nombre que le queremos dar y el paréntesis con posibles argumentos
<script>
function nombreFuncion() {
//código de la función
}
</script>
La palabra reservada "return", nos permite usar la variable "resultado" fuera de la función
Llamamos a la función con su nombre y los argumentos
<script>
function multiplica(numero1, numero2) {
var resultado = numero1 * numero2;
return resultado;
}
console.log(multiplica(5, 3) + ' es el resultado de la multiplicación');
</script>
Crea una función con dos parámetros números, que haga un "console.log" diciendo cuál de los dos números es el mayor y cuál de los números es par o si es que los dos lo son
Revisaremos algunas funciones incorporadas y haremos ejercicios con ellas
<script>
var mensaje = 'Hola Javascript',
largoMensaje = mensaje.length, //Muestra el largo del string (15)
mensajeMayuscula = mensaje.toUpperCase(), //Convierte al string en mayúsculas
mensajeMinuscula = mensaje.toLowerCase(), //Convierte al string en minusculas
indiceLetra = mensaje.indexOf('v'), //Índice de una letra (7)
letraEnIndice = mensaje.charAt(4), //letra en un índice (' ')
parteMensaje = mensaje.substring(5), //parte de un string"Javascript"
stringaArray = mensaje.split(' '); //['Hola', 'Javascript']
</script>
<script>
var vocales = ['a', 'e', 'i', 'o', 'u'],
cantidadVocales = vocales.length, //Cantidad de elementos (5)
arrayAmpliado = vocales.concat(4, 5, 6); //['a', 'e', 'i', 'o', 'u', 4, 5, 6]
vocales.push('z'); //['a', 'e', 'i', 'o', 'u', 'z'] Agregar al final
vocales.shift(); //['e', 'i', 'o', 'u', 'z'] Eliminar al inicio
vocales.unshift('x'); //['x', 'e', 'i', 'o', 'u', 'z'] Agregar al inicio
vocales.pop(); //["x", "e", "i", "o", "u"] Elimninar al final
vocales.reverse(); //["u", "o", "i", "e", "x"]
var vocalesString = vocales.join(' '); //"u o i e x"
</script>
Define una función a la que se le pasa un string como argumento y como resultado dice si es que el string contiene solo mayúsculas, minúsculas o las dos
Define una función que determina si el parámetro que se le pasa es un palíndromo, es decir, se lee de la misma forma de derecha a izquierda, que de izquierda a derecha. Ejemplo: "La ruta nos aporto otro paso natural"
Las variables que se declaran dentro de una función tienen un scope local, es decir, solo son accesibles dentro de ésta
<script>
var scopeGlobal = "soy accesible en todos lados";
console.log(scopeGlobal);
function crearScopeLocal() {
var scopeLocal = "solo soy accesible dentro de ésta función";
var scopeGlobal = "verás que aqui mi valor es local";
console.log(scopeLocal);
console.log(scopeGlobal);
}
crearScopeLocal();
console.log(scopeGlobal);
console.log(scopeLocal);
</script>
Para afectar a una variable global desde una función, lo podemos hacer omitiendo la palabra reservada "var"
<script>
var scopeGlobal = "soy accesible en todos lados";
console.log(scopeGlobal);
function crearScopeLocal() {
scopeLocal = "solo soy accesible dentro de ésta función";
scopeGlobal = "verás que aqui mi valor es local";
console.log(scopeLocal);
console.log(scopeGlobal);
}
crearScopeLocal();
console.log(scopeGlobal);
console.log(scopeLocal);
</script>
Para acceder al DOM usamos la palabra reservada "document", seguido de un punto y algún método (función integrada dentro de un objeto) que nos permita seleccionar un elemento
<script>
// .getElementById() => Uno de los métodos más usados. Selecciona un elemento único mediante su ID
document.getElementById('id-ejemplo');
/* .getElementsByClassName() => Selecciona a múltiples elementos con una clase determinada. Se puede acceder a estos elementos,
como accedemos a valores dentro de un array (mediante el índice) */
var elementosClass = document.getElementsByClassName('class-ejemplo');
elementosClass[0] //Acceso al primer elemento que tenga la clase
elementosClass[5] //Acceso al sexto elemento que tenga la clase
// .querySelectorAll() => Encuentra una lista de elementos en base a un selector CSS
var elementoSelectorCss = document.querySelectorAll('.selector > div .ejemplo')
elementoSelectorCss[0] //Acceso al primer elemento correspondiente al selector
</script>
Podemos manipular los nodos cambiando contenidos, estilos, clases, atributos y más
<script>
var elementoEjemplo = document.getElementById('elemento-ejemplo');
//.innerHTML = 'Lorem Ipsum' => permite modificar el contenido html interno de un elemento como un texto por ejemplo
elementoEjemplo.innerHTML = 'LoremIpsum';
//.style.propiedadCss = "valor propiedad css" => crea un atributo "style" en el elemento seleccionado con la propiedad elegida
elementoEjemplo.style.color = "blue";
elementoEjemplo.style.fontFamily = "arial";
//.classList.add('clase-nueva') => agrega una clase
//.classList.remove('clase-nueva') => elimina una clase
//.classList.toggle('clase-nueva') => si es que la clase existe la elimina y si no, la agrega
elementoEjemplo.classList.add('clase-con-nuevos-estilos');
</script>
En JS podemos condicionar la ejecución de un pedazo de código a eventos que ocurran en el DOM, por ejemplo que el usuario haga click, pase el mouse encima de un elemento, haga scroll, pulse una tecla, etc.
Esto lo logramos agregando un "Event Listener" a un elemento. Es como decirle al navegador estar atento a un elemento en caso de que suceda un evento especifico
Usamos la palabra reservada ".addEventListener( 'evento', function () {código} )
Este método acepta dos parámetros. El primero es el evento al cual reaccionar y el segundo es una función con el código a ejecutar
<script>
var boton = document.getElementById('botonEjemplo');
boton.addEvenetListener('click', function () {
console.log('hiciste click sobre el botón');
})
</script>
En la función gatillada por un evento, podemos usar la variable "this" para referirnos al elemento que provocó el evento
<script>
var boton = document.getElementById('boton');
boton.addEventListener('mouseover', function () {
colorOriginal = this.style.background;
this.style.background = 'red';
})
boton.addEventListener('mouseout', function () {
this.style.background = colorOriginal;
})
</script>