Resumen de la sintaxis de JavaScript del módulo 2.
En promociones anteriores creamos esta guía a petición de las alumnas, bajo el acuerdo de que seríais vosotras las responsables de mejorarla. Si ves que faltan contenidos o se pueden mejorar, redáctalos y pásalelos a tus profes. Estarás ayudando a tus compañeras presentes y futuras y además... PEGATINA!!!
const name = 'Maricarmen'; // constante de textoconst age = 18; // constante de númeroconst isLogged = true; // constante de boolean: verdaderaconst isSignUp = false; // constante de boolean: falsaconst color = null; // constante definida como nulolet email = 'info@adalab.es'; // variable inicializada o definidalet password; // variable no inicializada o indefinida, su valor es undefined
const age = 20;if (age > 18) {// mayor que}if (age >= 18) {// mayor o igual que}if (age < 18) {// menor que}if (age <= 18) {// menor o igual que}if (age === 18) {// igual que}if (age !== 18) {// diferente de}
const age = 20;const name = 'Maricarmen';const email = 'info@adalab.es';if (age > 18 && name === 'Lucía') {console.log('La edad es mayor de 18 y el nombre es Lucía');}if (age > 18 || name === 'Lucía') {console.log('La edad es mayor de 18 o el nombre es Lucía');}if ((age > 18 || name === 'Lucía') && email === 'contact@adalab.es') {console.log('(La edad es mayor de 18 o el nombre es Lucía) y el email es contact@adalab.es');}
const age = 20;if (age > 18) {console.log('Eres mayor de edad');}
const age = 20;if (age > 18) {console.log('Eres mayor de edad');} else {console.log('No eres mayor de edad');}
const age = 20;if (age < 3) {console.log('Eres un bebé');} else if (age < 12) {console.log('Eres una niña');} else if (age < 17) {console.log('Eres una adolescente');} else if (age < 30) {console.log('Eres una joven');} else if (age < 65) {console.log('Eres una persona adulta');} else {console.log('Eres una persona mayor');}
// función normalfunction add(a, b) {const result = a + b;return result;}const resultValue = add(1, 2);console.log(resultValue);
// función anónimaconst add = function(a, b) {const result = a + b;return result;};const resultValue = add(1, 2);console.log(resultValue);
// función arrowconst add = (a, b) => {const result = a + b;return result;};const resultValue = add(1, 2);console.log(resultValue);
// función anónima que recibe 0 parametrosconst showWarning = function() {const paragraph = document.querySelector('body');paragraph.innerHTML = 'Aviso!!!';};showWarning();
// función anónima que recibe 2 parametrosconst add = function(a, b) {const result = a + b;return result;};const resultValue = add(1, 2);console.log(resultValue);
// función sin retorno, es decir retorna undefinedconst showWarning = function() {const paragraph = document.querySelector('body');paragraph.innerHTML = 'Aviso!!!';};showWarning();
// función con retornoconst add = function(a, b) {const result = a + b;return result;};const resultValue = add(1, 2);console.log(resultValue);
// función arrow que recibe 2 parametros sin retorno implícitoconst add = (a, b) => {const result = a + b;return result;};const resultValue = add(1, 2);console.log(resultValue);
// función arrow que recibe 2 parametros con retorno implícitoconst add = (a, b) => a + b;const resultValue = add(1, 2);console.log(resultValue);
// función arrow que recibe 0 argumentosconst showWarning = () => {const paragraph = document.querySelector('body');paragraph.innerHTML = 'Aviso!!!';};showWarning();
// función arrow que recibe 1 argumento, no hace falta poner el argumento paréntisisconst showWarning = text => {const paragraph = document.querySelector('body');paragraph.innerHTML = text;};showWarning('Aviso!!!');
// función arrow que recibe más argumentosconst showWarning = (selector, text) => {const paragraph = document.querySelector(selector);paragraph.innerHTML = text;};showWarning('body', 'Aviso!!!');
// objeto inicializado con propiedades y métodosconst car = {positionX: 0,positionY: 0,move: function(x, y) {this.positionX = this.positionX + x;this.positionY = this.positionY + y;}};
// objeto inicializado vacíoconst car = {};// y le añadimos propiedades y métodos despuéscar.positionX = 0;car.positionY = 0;car.move = function(x, y) {this.positionX = this.positionX + x;this.positionY = this.positionY + y;};
// leer y modificar una propiedadconst car = {positionX: 0,positionY: 0};console.log(car.positionX);// modificar una propiedad con 'dot notation'car.positionX = 10;console.log(car.positionX);// modificar una propiedad con corchetescar['positionX'] = 20;console.log(car.positionX);// modificar una propiedad con corchetes y una través de una variable o constanteconst property = 'positionX';car[property] = 30;console.log(car.positionX);
// array de stringsconst fruits = ['apple', 'orange'];console.log(fruits); // array completoconsole.log(fruits[0]); // primer elemento del arrayconsole.log(fruits[1]); // segundo elemento del arrayconsole.log(fruits.length); // longitud del array
// array de objetosconst fruits = [{name: 'apple',color: 'green'},{name: 'orange',color: 'orange'}];console.log(fruits); // array completoconsole.log(fruits[0]); // primer elemento del arrayconsole.log(fruits[1]); // segundo elemento del array
// recorrer el array de forma ascendenteconst fruits = ['apple', 'orange'];// "i" coge el valor del índice en cada iteraciónfor (let i = 0; i < fruits.length; i = i + 1) {console.log(fruits[i]);}
// recorrer el array de forma ascendenteconst fruits = ['apple', 'orange'];for (let i = fruits.length - 1; i >= 0; i = i - 1) {console.log(fruits[i]);}
Nota: para incrementar el índice de uno en uno podemos usar estas tres formas que son equivalentes:
i = i + 1
,i += 1
yi++
.
const fruits = ['apple', 'orange'];// "fruit" coge el valor de la posición (o lo que es lo mismo, el índice) en cada iteraciónfor (const fruit of fruits) {console.log(fruit);}
// find y findIndexconst fruits = [{name: 'apple',color: 'green'},{name: 'orange',color: 'orange'}];// buscamos la fruta cuyo nombre es orangeconst foundItem = fruits.find(fruit => fruit.name === 'orange');const foundIndex = fruits.findIndex(fruit => fruit.name === 'orange');console.log(foundItem, foundIndex);
// mapconst numbers = [1, 2, 3, 4];const result = numbers.map(number => number * 2);console.log(result); // array de números multiplicados por 2
// reduceconst numbers = [1, 2, 3, 4];const result = numbers.reduce((total, number) => total + number, 0);console.log(result); // sumatorio de los números del array
// escuchamos el evento click sobre el elemento con selector .js-elementconst handleClick = function(ev) {console.log('Elemento que lanza el evento:', ev.target);console.log('Elemento que escucha el evento:', ev.currentTarget);console.log('Evento:', ev);};const element = document.querySelector('.js-element');element.addEventListener('click', handleClick);
// obtener el primer elemento dentro de toda la página que tenga el selector .js-elementconst element = document.querySelector('.js-element'); // element es un elemento del DOM
// obtener el primer elemento dentro de toda la página que tenga el selector .js-headerconst header = document.querySelector('.js-header');// obtener el primer elemento dentro del header que tenga el selector .js-elementconst element = header.querySelector('.js-element');
// obtener todos los elementos dentro de toda la página que tengan el selector .js-elementconst elements = document.querySelectorAll('.js-element'); // elements es un array de elementos del DOMfunction handleClick(ev) {console.log('Elemento que lanza el evento:', ev.target);console.log('Elemento que escucha el evento:', ev.currentTarget);console.log('Evento:', ev);}for (const element of elements) {// recorremos el array de elementos del DOM para aplicar a cada uno de ellos un addEventListenerelement.addEventListener('click', handleClick);}
// fetch con el verbo GETfetch('https://beta.adalab.es/ejercicios-extra/api/adalab-promos.json').then(response => response.json()).then(data => {console.log(data);}).catch(err => {console.error('Se ha producido un error:', err);});
const dataForServer = {one: 1,two: 2};fetch('https://us-central1-awesome-cards-cf6f0.cloudfunctions.net/', {method: 'POST',body: JSON.stringify(dataForServer),headers: {'Content-Type': 'application/json'}}).then(res => res.json()).then(response => console.log('Success:', response));.catch(error => console.error('Error:', error))
debugger;
// pintar un elemento del DOMconst element = document.querySelector('body');console.log(element);
// pintar un elemento del DOM y sus métodos y propiedadesconst element = document.querySelector('body');console.dir(element);