Diferencia entre revisiones de «Exemples Javascript»
Ir a la navegación
Ir a la búsqueda
(No se muestran 23 ediciones intermedias del mismo usuario) | |||
Línea 154: | Línea 154: | ||
doubledNums = nums.map( (element) => element * 2 ); // map és una funció dels objectes array | doubledNums = nums.map( (element) => element * 2 ); // map és una funció dels objectes array | ||
console.log(doubledNums); | console.log(doubledNums); | ||
// El this en les funcions fletxa | |||
persona = { | |||
nom: 'Pepe', | |||
cognom: 'Garcia', | |||
consulta: function () { return `${this} ${this.nom} ${this.cognom}`}, | |||
consultar: () => `${this} ${this.nom} ${this.cognom}` | |||
} | |||
console.log(persona.consulta(), persona.consultar()); | |||
</syntaxhighlight> | </syntaxhighlight> | ||
Línea 249: | Línea 261: | ||
nombre: ['Bob', 'Smith'], edad: 32, genero: 'masculino', intereses: ['música', 'esquí'], | nombre: ['Bob', 'Smith'], edad: 32, genero: 'masculino', intereses: ['música', 'esquí'], | ||
bio: function () { | bio: function () { | ||
console.log(this.nombre[0] + ' ' + this.nombre[1] + ' tiene ' + this.edad + ' años. Le gusta ' + this.intereses[0] + ' y ' + this.intereses[1] + '.'); | |||
} | } | ||
}; | |||
persona.bio(); | |||
var persona = { | |||
nombre: ['Bob', 'Smith'], edad: 32, genero: 'masculino', intereses: ['música', 'esquí'], | |||
bio: function () { | |||
let {nombre: [nom,apellido], edad, genero, intereses: [arte,deporte]} = this; // Object destructuring | |||
console.log(`${nom} ${apellido} tiene ${edad} años. Le gusta ${arte} y ${deporte}`); // Template literal | |||
} | |||
}; | |||
persona.bio(); | |||
</syntaxhighlight> | </syntaxhighlight> | ||
Línea 330: | Línea 349: | ||
// Per funcions | // Per funcions | ||
function Apple (type){ // | function Apple (type){ // Aques funció és un constructor si es crida en new | ||
this.type = type; | this.type = type; | ||
this.color = "red"; | this.color = "red"; | ||
console.log(this); | |||
} | } | ||
Línea 341: | Línea 361: | ||
var apple1 = new Apple('Golden'); // Es crea una instància | var apple1 = new Apple('Golden'); // Es crea una instància | ||
var apple2 = new Apple('Fuji'); // | var apple2 = new Apple('Fuji'); // la funció actua de constructor | ||
Apple('no constructor'); | |||
console.log(Apple,apple1); | console.log(Apple,apple1); | ||
Línea 412: | Línea 433: | ||
console.log(apple2.getInfo()); | console.log(apple2.getInfo()); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<syntaxhighlight lang="javascript" style="font-family:monospace"> | |||
// Prototype | |||
class Apple { // Les funcions són objectes de tipus funció | |||
constructor(type){ | |||
this.type = type; | |||
this.color = "red"; | |||
} | |||
getInfo = function () { | |||
return this.color + ' ' + this.type + ' apple'; | |||
} | |||
} | |||
var apple1 = new Apple('Golden'); // Es crea una instància | |||
var apple2 = new Apple('Fuji'); // La funció té el seu constructor | |||
Apple.prototype.price = 10.0; | |||
Apple.prototype.getPrice = function() { return this.price; }; | |||
apple2.price = 20.0; | |||
console.log(apple1.getPrice()); | |||
console.log(apple2.getPrice()); | |||
</syntaxhighlight> | |||
<syntaxhighlight lang="javascript" style="font-family:monospace"> | |||
var o = { | |||
a: 2, | |||
b: 3, | |||
m: function(b) { | |||
return this.a + this.b; | |||
} | |||
}; | |||
console.log(o); | |||
console.log(o.m()); // 3 | |||
// Cuando en este caso se llama a o.m, 'this' se refiere a o | |||
var p = Object.create(o); | |||
// p es un objeto que hereda de o | |||
console.log(p); | |||
p.a = 12; // crea una propiedad 'a' en p | |||
console.log(p.m()); // 13 | |||
</syntaxhighlight> | |||
==== Closures ==== | |||
<syntaxhighlight lang="javascript" style="font-family:monospace"> | |||
function addSquares(a,b) { | |||
function square(x) { | |||
return x * x; | |||
} | |||
return square(a) + square(b); | |||
} | |||
a = addSquares(2,3); // retorna 13 | |||
b = addSquares(3,4); // retorna 25 | |||
c = addSquares(4,5); // retorna 41 | |||
function greeting(msg) { | |||
var a = msg; | |||
this.b = msg; | |||
return function who(name) { | |||
console.log(`${ msg }, ${ name }!`, a, this.b); | |||
}; | |||
} | |||
var hello = greeting("Hello"); | |||
var howdy = greeting("Howdy"); | |||
hello("Kyle"); | |||
hello("Sarah"); | |||
howdy("Joe"); | |||
console.log(hello, greeting); | |||
function classroom(teacher) { | |||
//"use strict"; // prova el mode estricte | |||
this.plant = 3; // sense new, this és window | |||
console.log(this); | |||
return function study() { | |||
console.log( | |||
`${ teacher } says to study ${ this.topic } in plant ${this.plant}` | |||
); | |||
}; | |||
} | |||
var assignment = classroom("Kyle"); // Prova a ficar el new | |||
console.log(assignment); | |||
assignment(); | |||
clase = { | |||
topic: 'mates', | |||
plant: '5', // prova a comentar aquesta línia | |||
assignment: assignment | |||
} | |||
clase.assignment(); | |||
</syntaxhighlight> | |||
=== Esdeveniments === | |||
<syntaxhighlight lang="javascript" style="font-family:monospace"> | |||
// Esdeveniments en línia | |||
<p onmouseover="this.style.background='#FF0000';" onmouseout="this.style.background='#FFFFFF';">HOLA</p> | |||
</syntaxhighlight> | |||
<syntaxhighlight lang="javascript" style="font-family:monospace"> | |||
// Registre tradicional d'esdeveniments | |||
<p id="hola">HOLA</p> | |||
... | |||
window.onload = function () { | |||
document.getElementById('hola').onmouseover = function () { this.style.background = '#FF0000';}; | |||
document.getElementById('hola').onmouseout = function () { this.style.background = '#FFFFFF';}; | |||
} | |||
</syntaxhighlight> | |||
<syntaxhighlight lang="javascript" style="font-family:monospace"> | |||
// Registre d'esdeveniments W3C | |||
<p id="hola">HOLA</p> | |||
... | |||
(function () { | |||
"use strict"; | |||
document.addEventListener("DOMContentLoaded", function () { | |||
document.getElementById('hola').addEventListener('mouseover',function () { this.style.background = '#FF0000';},false); | |||
document.getElementById('hola').addEventListener('mouseout',function () { this.style.background = '#FFFFFF';},false); | |||
}); | |||
})(); | |||
</syntaxhighlight> | |||
=== Iteradors === | |||
<syntaxhighlight lang="javascript" style="font-family:monospace"> | |||
// Tipic iterable, [] | |||
let numeros = [1,9,2,3,8,4,7,6,5]; | |||
/// varies maneres d'iterar | |||
for(let i = 0; i< numeros.length; i++){console.log(numeros[i]);} | |||
for(let i of numeros){console.log(i);} | |||
numeros.forEach(i=>console.log(i)) // Cridem a una funció que perd el context | |||
let numeros2 = [...numeros]; // copiar un array | |||
// Funcions d'alt ordre | |||
let dobles = numeros.map(n=>n*2); | |||
let parells = numeros.filter(n=>n%2==0); | |||
let suma = numeros.reduce((anterior,actual)=>anterior+actual); | |||
let doblesImparells = numeros.filter(n=>n%2==1).map(n=>n*2); | |||
console.log(dobles,parells,suma,doblesImparells); | |||
// Iterar un string | |||
let lletres = "aasgdahweyñḱjpoiuopaspjdhfawe"; | |||
for(let i of lletres){console.log(i);} | |||
let up = lletres.split('').map(i=>i.toUpperCase()); | |||
console.log(up); | |||
// Iterar un objecte | |||
let temp = {lunes:29,martes:26,miercoles:27,jueves:30,viernes:29,sabado:29,domingo:27}; | |||
for(let dia in temp){console.log(dia,temp[dia]);} | |||
for(let dia of Object.keys(temp)){console.log(dia,temp[dia]);} | |||
for(let dia of Object.values(temp)){console.log(dia);} | |||
for(let dia of Object.entries(temp)){console.log(dia);} | |||
</syntaxhighlight> | |||
=== JSON === | |||
<syntaxhighlight lang="javascript" style="font-family:monospace"> | |||
class Hero{ | |||
constructor(name,car){ | |||
this.name = name; this.car=car; | |||
}} | |||
let heroJSON = '{"name":"Max","car":"V8"}'; | |||
let heroObject = JSON.parse(heroJSON); | |||
let heroClass = Object.assign(new Hero, heroObject); | |||
console.log(heroObject,heroClass); | |||
</syntaxhighlight> | |||
=== Cookies i LocalStorage === | |||
<syntaxhighlight lang="javascript" style="font-family:monospace"> | |||
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2021 12:00:00 UTC; path=/"; | |||
var x = document.cookie; // Llegir totes les cookies | |||
// Modificar una cookie és sobreescriure | |||
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2021 12:00:00 UTC; path=/"; | |||
// Esborrar és fer que estiga expirada | |||
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; | |||
// Guardar LocalStorage | |||
localStorage.setItem("lastname", "Smith"); | |||
// Obtenir | |||
var lastname = localStorage.getItem("lastname"); | |||
// Esborrar | |||
localStorage.removeItem("lastname"); | |||
</syntaxhighlight> | |||
=== Event Loop i Callbacks === | |||
<syntaxhighlight lang="javascript" style="font-family:monospace"> | |||
// La segona funció tè codi asíncron | |||
function first() {console.log(1)} | |||
function second(callback) {setTimeout(() => {console.log(2); callback(); }, 0)} // 0 segons | |||
function third() {console.log(3)} | |||
first(); | |||
second(third); | |||
// 1 2 3 | |||
</syntaxhighlight> | |||
=== Promises === | |||
Observar l'objecte promise | |||
<syntaxhighlight lang="javascript" style="font-family:monospace"> | |||
const promise = new Promise((resolve, reject) => { resolve("FET");}) // prova a llevar el resolve | |||
console.log(promise); | |||
</syntaxhighlight> | |||
Una promesa simple amb then i catch | |||
<syntaxhighlight lang="javascript" style="font-family:monospace"> | |||
const promise = new Promise((resolve, reject) => { // Funció executor | |||
setTimeout(() => { | |||
if (Math.random() > 0.5) { resolve("Resolving an asynchronous request!"); } | |||
else { reject("Rejecting an asynchronous request!"); } | |||
}, 2000); | |||
}); | |||
promise.then((response) => { //.then si resol | |||
console.log(response); | |||
}).catch((response) => { // .catch si falla | |||
console.log(response); | |||
}); | |||
</syntaxhighlight> | |||
Una promesa simple amb una funció per a la resolució i una altra per a quan falla: | |||
<syntaxhighlight lang="javascript" style="font-family:monospace"> | |||
var promise = new Promise(function(funciona, falla) { | |||
if (Math.random() > 0.5) {funciona("Stuff worked!");} | |||
else {falla(Error("It broke"));} | |||
}); | |||
promise.then(function(result) { // funció "funciona" | |||
console.log('Funciona: '); | |||
console.log(result); // "Stuff worked!" | |||
}, function(err) { // funció "falla" | |||
console.log('Falla: '); | |||
console.log(err); // Error: "It broke" | |||
}); | |||
</syntaxhighlight> | |||
La promesa anterior però utilitzant catch | |||
<syntaxhighlight lang="javascript" style="font-family:monospace"> | |||
var promise = new Promise(function(funciona, falla) { | |||
if (Math.random() > 0.5) {funciona("Stuff worked!");} | |||
else {falla(Error("It broke"));} | |||
}); | |||
promise.then(function(result) { // funció "funciona" | |||
console.log('Funciona: '); | |||
console.log(result); // "Stuff worked!" | |||
}//, function(err) { // funció "falla" | |||
// console.log('Falla: '); | |||
// console.log(err); // Error: "It broke" | |||
//} | |||
).catch((err) => {console.log('Falla: '+err)}); // Aquest catch també es cridarà si falla la funció que diu "Funciona:" | |||
</syntaxhighlight> | |||
<syntaxhighlight lang="javascript" style="font-family:monospace"> | |||
// Promises i XMLHttpRequest | |||
function get(url) { | |||
// Return a new promise. | |||
return new Promise(function(resolve, reject) { | |||
// Do the usual XHR stuff | |||
var req = new XMLHttpRequest(); | |||
req.open('GET', url); | |||
req.onload = function() { | |||
// This is called even on 404 etc | |||
// so check the status | |||
if (req.status == 200) { | |||
// Resolve the promise with the response text | |||
resolve(req.response); | |||
} | |||
else { | |||
// Otherwise reject with the status text | |||
// which will hopefully be a meaningful error | |||
reject(Error(req.statusText)); | |||
} | |||
}; | |||
// Handle network errors | |||
req.onerror = function() { | |||
reject(Error("Network Error")); | |||
}; | |||
// Make the request | |||
req.send(); | |||
}); | |||
} | |||
get('story.json').then(function(response) { | |||
console.log("Success!", response); | |||
}, function(error) { | |||
console.error("Failed!", error); | |||
}) | |||
</syntaxhighlight> | |||
https://github.com/googlesamples/web-fundamentals/tree/gh-pages/fundamentals/primers |
Revisión actual - 18:01 8 oct 2021
Insertar Javascript al HTML
<script type="text/javascript">
// codi
</script>
<script type="text/javascript" src="scripts.js"></script>
<noscript>
<p> El teu navegador no suporta javascript. </p>
</noscript>
Formes de declarar variables
var a=1;
for (a=1;a<10;a++){
let b = a; // El scope de b es limita al bucle
var c = a; // El scope de c és global
console.log(b);
}
console.log(a,b,c); // Uncaught ReferenceError: b is not defined
var a;
for (let i=1;i<10;i++){
a++;
}
console.log(a,i); // Uncaught ReferenceError: i is not defined
// útil per no tindre la variable de control del bucle accessible tot el programa.
Constants:
const a=1;
for (let i=1;i<10;i++){
a++; // Uncaught TypeError: invalid assignment to const 'a'
}
Sense let, var o const es perd el scope, NO recomanable:
let a=1;
function sumar(){
a=a+10;
b=1;
return a;
}
console.log(sumar(),b);
Transformació de tipus de dades
var array_mix = [
"abcdef", 2 , 2.1 , 2.9e3 , 2e-3 ,
0234 , 0x23AF , true , [1,2,3] , {'a': 1, 'b': 2}, '4'
];
for (let i=0;i<array_mix.length;i++) {
console.log(typeof(array_mix[i]));
}
console.log(typeof(array_mix[1]+"")); // de número a cadena +""
console.log(typeof(parseInt(array_mix[10]))); // de cadena a número parseInt parseFloat
Funcions
Declaració de funcions
suma_y_mostra(2,3); // Funciona abans de la funció per el hoising
function suma_y_mostra(numero1,numero2) {
resultat = numero1 + numero2;
console.log("El resultat és " + resultat);
return resultat;
}
console.log(suma_y_mostra); //sense () el que trau és l'objecte funció
Expressions de funcions
function toCelsius(fahrenheit) { return (5/9) * (fahrenheit-32); }
var x = toCelsius(77);
console.log(x);
console.log(`La temperatura és: ${x} C`);
// Dirèctament en la variable
x = function toCelsius(fahrenheit) { return (5/9) * (fahrenheit-32); }
console.log(x);
console.log(`La temperatura és: ${x(77)} C`);
// Sense nom de funció
x = function (fahrenheit) { return (5/9) * (fahrenheit-32); }
console.log(x); // Obervem el nom de la funció en la consola
console.log(`La temperatura és: ${x(77)} C`);
// Factorial recursiu
var factorial = function fac(n) {return n<2 ? 1 : n*fac(n-1)}; // pot ser recursiva perquè té nom
console.log(factorial);
console.log(factorial(5));
// Utilitzar una expressió de funció com a argument d'una altra funció.
function map(f,a) {
var result = [], // Crea un nou Array
i;
for (i = 0; i != a.length; i++)
result[i] = f(a[i]); // f és una funció
return result;
}
var multiplicar= function(x) { return x * x * x;} //Expressió de funció
// function multiplicar(x) { return x * x * x;} //declaració de funció
console.log(map(multiplicar, [0, 1, 2, 5, 10])); // Array(5) [ 0, 1, 8, 125, 1000 ]
Funcions anónimes
var nums = [0,1,2];
var doubledNums = nums.map( function(element){ return element * 2; } ); // map és una funció dels objectes array
console.log(doubledNums);
Funcions fletxa
var sum = (a,b) => a+b;
console.log(sum(3,5));
console.log(sum);
var sum = function sum(a,b){return a+b; };
console.log(sum(3,5));
console.log(sum); // Obsrvem la diferència amb el nom i el prototype
var nums = [0,1,2];
var doubledNums = nums.map( function(element){ return element * 2; } ); // map és una funció dels objectes array
console.log(doubledNums);
doubledNums = nums.map( (element) => {return element * 2; } ); // map és una funció dels objectes array
console.log(doubledNums);
doubledNums = nums.map( (element) => element * 2 ); // map és una funció dels objectes array
console.log(doubledNums);
// El this en les funcions fletxa
persona = {
nom: 'Pepe',
cognom: 'Garcia',
consulta: function () { return `${this} ${this.nom} ${this.cognom}`},
consultar: () => `${this} ${this.nom} ${this.cognom}`
}
console.log(persona.consulta(), persona.consultar());
Funcions auto invocades
(function () {
var aName = "Barry";
})();
console.log(aName); // "Uncaught ReferenceError: aName is not defined"
var result = (function () {
var name = "Barry";
return name;
})();
console.log(result); // "Barry"
Ámbit de les variables en funcions
function addSquares(a,b) {
function square(x) {
return x * x;
}
return square(a) + square(b);
}
a = addSquares(2,3); // retorna 13
b = addSquares(3,4); // retorna 25
c = addSquares(4,5); // retorna 41
console.log(a,b,c);
function outside(x) {
function inside(y) {
return x + y;
}
return inside;
}
fn_inside = outside(3); // fn_inside és una closure i recorda el 3
result = fn_inside(5); // retorna 8
result1 = outside(3)(5); // retorna 8
result2 = fn_inside(6); // recorda el 3 i retorna 9
console.log(result,result1,result2,fn_inside);
Comunicació amb l'usuari
var nom = 'Jose';
alert(`El nom és ${nom}`);
nom = `El nom és ${nom}`;
console.log(nom);
console.error(nom);
console.warn(nom);
console.debug(nom);
console.info(nom);
console.log('El nom és %s i té %d anys','Jose',38); // Com en C o altres
console.log('%cEl nom és %s i té %d anys',"color:green;background-color:yellow",'Jose',38); // Com en C o altres
Arrays
let a = [1,'2',3.0,[4,5],{6:'6'}];
a.push('99');
console.log(a, a.length, a.sort());
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
// Amb un for
text = "<ul>";
for (i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
// Amb un forEach i una funció
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
text += "<li>" + value + "</li>";
}
console.log(Array.isArray(fruits));
Objectes
var persona = {
nombre: ['Bob', 'Smith'], edad: 32, genero: 'masculino', intereses: ['música', 'esquí'],
bio: function () {
console.log(this.nombre[0] + ' ' + this.nombre[1] + ' tiene ' + this.edad + ' años. Le gusta ' + this.intereses[0] + ' y ' + this.intereses[1] + '.');
}
};
persona.bio();
var persona = {
nombre: ['Bob', 'Smith'], edad: 32, genero: 'masculino', intereses: ['música', 'esquí'],
bio: function () {
let {nombre: [nom,apellido], edad, genero, intereses: [arte,deporte]} = this; // Object destructuring
console.log(`${nom} ${apellido} tiene ${edad} años. Le gusta ${arte} y ${deporte}`); // Template literal
}
};
persona.bio();
DOM
<div id="content">
<ul>
<li class="actual element">Uno</li>
<li class="element">Dos</li>
<li class="element">Tres</li>
<li class="element">Quatre</li>
<li class="element">Cinc</li>
<li class="element">Sis</li>
</ul>
</div>
(function () {
"use strict";
document.addEventListener("DOMContentLoaded", function () {
for (let i = 0; i < 100; i++) {
let contenidor = document.getElementById("content");
let numero = document.createElement("p");
numero.innerHTML = i;
contenidor.appendChild(numero);
}
let elementsLista = document.getElementsByTagName('li');
console.log(elementsLista);
let elementsClass = document.getElementsByClassName('element');
console.log(elementsClass);
let elementsQuery = document.querySelector('.element');
console.log(elementsQuery);
let elementsQueryAll = document.querySelectorAll('.element');
console.log(elementsQueryAll);
elementsQuery.parentNode.removeChild(elementsQuery);
// Per a esborrar cal cridar al node pare
});
})();
Formularis
<form onsubmit="return validar();"
name="myForm" action="/action_page.php"
method="post">
<label for="DNI">DNI</label> <input type="text" name="DNI"/>
<input type="submit" value="Submit">
</form>
function validar(){
dni = document.getElementsByName('DNI')[0].value;
var dniRexp = /^[0-9]{8}[a-zA-Z]$/;
var dniResult = dniRexp.test(dni);
console.log(dni,dniRexp,dniResult);
return dniResult;
}
Classes
// Per funcions
function Apple (type){ // Aques funció és un constructor si es crida en new
this.type = type;
this.color = "red";
console.log(this);
}
Apple.prototype.getInfo = function() {
return this.color + ' ' + this.type + ' apple';
};
var apple1 = new Apple('Golden'); // Es crea una instància
var apple2 = new Apple('Fuji'); // la funció actua de constructor
Apple('no constructor');
console.log(Apple,apple1);
console.log(apple1.getInfo());
console.log(apple2.getInfo());
// Amb objectes literals
var Apple = {
type: "macintosh",
color: "red",
getInfo: function () {
return this.color + ' ' + this.type + ' apple';
}
}
var apple1 = Object.create(Apple); // Els objectes literals no tenen constructor
apple1.type="Golden";
var apple2 = Object.create(Apple); // Object.create crea una nova instància
apple2['type']="Fuji";
console.log(Apple,apple1);
console.log(apple1.getInfo());
console.log(apple2.getInfo());
// Singletons Per funcions
var apple = new function Apple (type){ // Les funcions són objectes de tipus funció
this.type = type;
this.color = "red";
this.getInfo = function () {
return this.color + ' ' + this.type + ' apple';
};
}
var apple1 = Object.create(apple); // Els objectes literals no tenen constructor
apple1.type="Golden";
var apple2 = Object.create(apple); // Object.create crea una nova instància
apple2['type']="Fuji";
console.log(apple,apple1);
console.log(apple1.getInfo());
console.log(apple2.getInfo());
// Amb class
class Apple { // Les funcions són objectes de tipus funció
constructor(type){
this.type = type;
this.color = "red";
}
getInfo = function () {
return this.color + ' ' + this.type + ' apple';
}
}
var apple1 = new Apple('Golden'); // Es crea una instància
var apple2 = new Apple('Fuji'); // La funció té el seu constructor
console.log(Apple,apple1);
console.log(apple1.getInfo());
console.log(apple2.getInfo());
// Prototype
class Apple { // Les funcions són objectes de tipus funció
constructor(type){
this.type = type;
this.color = "red";
}
getInfo = function () {
return this.color + ' ' + this.type + ' apple';
}
}
var apple1 = new Apple('Golden'); // Es crea una instància
var apple2 = new Apple('Fuji'); // La funció té el seu constructor
Apple.prototype.price = 10.0;
Apple.prototype.getPrice = function() { return this.price; };
apple2.price = 20.0;
console.log(apple1.getPrice());
console.log(apple2.getPrice());
var o = {
a: 2,
b: 3,
m: function(b) {
return this.a + this.b;
}
};
console.log(o);
console.log(o.m()); // 3
// Cuando en este caso se llama a o.m, 'this' se refiere a o
var p = Object.create(o);
// p es un objeto que hereda de o
console.log(p);
p.a = 12; // crea una propiedad 'a' en p
console.log(p.m()); // 13
Closures
function addSquares(a,b) {
function square(x) {
return x * x;
}
return square(a) + square(b);
}
a = addSquares(2,3); // retorna 13
b = addSquares(3,4); // retorna 25
c = addSquares(4,5); // retorna 41
function greeting(msg) {
var a = msg;
this.b = msg;
return function who(name) {
console.log(`${ msg }, ${ name }!`, a, this.b);
};
}
var hello = greeting("Hello");
var howdy = greeting("Howdy");
hello("Kyle");
hello("Sarah");
howdy("Joe");
console.log(hello, greeting);
function classroom(teacher) {
//"use strict"; // prova el mode estricte
this.plant = 3; // sense new, this és window
console.log(this);
return function study() {
console.log(
`${ teacher } says to study ${ this.topic } in plant ${this.plant}`
);
};
}
var assignment = classroom("Kyle"); // Prova a ficar el new
console.log(assignment);
assignment();
clase = {
topic: 'mates',
plant: '5', // prova a comentar aquesta línia
assignment: assignment
}
clase.assignment();
Esdeveniments
// Esdeveniments en línia
<p onmouseover="this.style.background='#FF0000';" onmouseout="this.style.background='#FFFFFF';">HOLA</p>
// Registre tradicional d'esdeveniments
<p id="hola">HOLA</p>
...
window.onload = function () {
document.getElementById('hola').onmouseover = function () { this.style.background = '#FF0000';};
document.getElementById('hola').onmouseout = function () { this.style.background = '#FFFFFF';};
}
// Registre d'esdeveniments W3C
<p id="hola">HOLA</p>
...
(function () {
"use strict";
document.addEventListener("DOMContentLoaded", function () {
document.getElementById('hola').addEventListener('mouseover',function () { this.style.background = '#FF0000';},false);
document.getElementById('hola').addEventListener('mouseout',function () { this.style.background = '#FFFFFF';},false);
});
})();
Iteradors
// Tipic iterable, []
let numeros = [1,9,2,3,8,4,7,6,5];
/// varies maneres d'iterar
for(let i = 0; i< numeros.length; i++){console.log(numeros[i]);}
for(let i of numeros){console.log(i);}
numeros.forEach(i=>console.log(i)) // Cridem a una funció que perd el context
let numeros2 = [...numeros]; // copiar un array
// Funcions d'alt ordre
let dobles = numeros.map(n=>n*2);
let parells = numeros.filter(n=>n%2==0);
let suma = numeros.reduce((anterior,actual)=>anterior+actual);
let doblesImparells = numeros.filter(n=>n%2==1).map(n=>n*2);
console.log(dobles,parells,suma,doblesImparells);
// Iterar un string
let lletres = "aasgdahweyñḱjpoiuopaspjdhfawe";
for(let i of lletres){console.log(i);}
let up = lletres.split('').map(i=>i.toUpperCase());
console.log(up);
// Iterar un objecte
let temp = {lunes:29,martes:26,miercoles:27,jueves:30,viernes:29,sabado:29,domingo:27};
for(let dia in temp){console.log(dia,temp[dia]);}
for(let dia of Object.keys(temp)){console.log(dia,temp[dia]);}
for(let dia of Object.values(temp)){console.log(dia);}
for(let dia of Object.entries(temp)){console.log(dia);}
JSON
class Hero{
constructor(name,car){
this.name = name; this.car=car;
}}
let heroJSON = '{"name":"Max","car":"V8"}';
let heroObject = JSON.parse(heroJSON);
let heroClass = Object.assign(new Hero, heroObject);
console.log(heroObject,heroClass);
Cookies i LocalStorage
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2021 12:00:00 UTC; path=/";
var x = document.cookie; // Llegir totes les cookies
// Modificar una cookie és sobreescriure
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2021 12:00:00 UTC; path=/";
// Esborrar és fer que estiga expirada
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
// Guardar LocalStorage
localStorage.setItem("lastname", "Smith");
// Obtenir
var lastname = localStorage.getItem("lastname");
// Esborrar
localStorage.removeItem("lastname");
Event Loop i Callbacks
// La segona funció tè codi asíncron
function first() {console.log(1)}
function second(callback) {setTimeout(() => {console.log(2); callback(); }, 0)} // 0 segons
function third() {console.log(3)}
first();
second(third);
// 1 2 3
Promises
Observar l'objecte promise
const promise = new Promise((resolve, reject) => { resolve("FET");}) // prova a llevar el resolve
console.log(promise);
Una promesa simple amb then i catch
const promise = new Promise((resolve, reject) => { // Funció executor
setTimeout(() => {
if (Math.random() > 0.5) { resolve("Resolving an asynchronous request!"); }
else { reject("Rejecting an asynchronous request!"); }
}, 2000);
});
promise.then((response) => { //.then si resol
console.log(response);
}).catch((response) => { // .catch si falla
console.log(response);
});
Una promesa simple amb una funció per a la resolució i una altra per a quan falla:
var promise = new Promise(function(funciona, falla) {
if (Math.random() > 0.5) {funciona("Stuff worked!");}
else {falla(Error("It broke"));}
});
promise.then(function(result) { // funció "funciona"
console.log('Funciona: ');
console.log(result); // "Stuff worked!"
}, function(err) { // funció "falla"
console.log('Falla: ');
console.log(err); // Error: "It broke"
});
La promesa anterior però utilitzant catch
var promise = new Promise(function(funciona, falla) {
if (Math.random() > 0.5) {funciona("Stuff worked!");}
else {falla(Error("It broke"));}
});
promise.then(function(result) { // funció "funciona"
console.log('Funciona: ');
console.log(result); // "Stuff worked!"
}//, function(err) { // funció "falla"
// console.log('Falla: ');
// console.log(err); // Error: "It broke"
//}
).catch((err) => {console.log('Falla: '+err)}); // Aquest catch també es cridarà si falla la funció que diu "Funciona:"
// Promises i XMLHttpRequest
function get(url) {
// Return a new promise.
return new Promise(function(resolve, reject) {
// Do the usual XHR stuff
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function() {
// This is called even on 404 etc
// so check the status
if (req.status == 200) {
// Resolve the promise with the response text
resolve(req.response);
}
else {
// Otherwise reject with the status text
// which will hopefully be a meaningful error
reject(Error(req.statusText));
}
};
// Handle network errors
req.onerror = function() {
reject(Error("Network Error"));
};
// Make the request
req.send();
});
}
get('story.json').then(function(response) {
console.log("Success!", response);
}, function(error) {
console.error("Failed!", error);
})
https://github.com/googlesamples/web-fundamentals/tree/gh-pages/fundamentals/primers