Exemples Javascript

De castillowiki
Ir a la navegación Ir a la búsqueda

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);
        
    });
  })();


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