• View
• Edit
• History
• Print
• PDF

Guida A Javascript

Attenzione prima di imparare il Javascript

Il Javascript e' un linguaggio di programmazione che può essere inserito in un sito per renderlo animato o fare dei programmi che girano sul web. Al contrario del PHP, il Javascript ha dei limiti di sicurezza enormi:

• il PHP viene eseguito dal server; browser e utenti non vedono il codice e non possono alterarlo
• il Javascript manda il codice in chiaro al browser, è il browser che lo elabora e quindi puo' essere modificato o hackerato dall'utente

questo significa che se dovete scrivere programmi che hanno a che fare con transazioni economiche o dati sensibili, il javascript va evitato.

Il tallone d'Achille del Javascript e' anche il suo punto forte, il codice è mandato direttamente al browser; il browser fa da interprete e lo renderizza ed esegue, quindi è possibile fare programmi molto piu' interattivi del PHP.

Come si scrive il codice?

Il codice si scrive o nella pagina HTML o in un file a parte. Esempi:

 <script>
 alert("Ciao Mondo!");
 </script> 

oppure indicando il percorso relativo o assoluto:

 <script src="/path/to/script.js"></script>

Il punto e virgola alla fine di ogni comando non e' obbligatorio, basterebbe anche solo andare a capo, ma se non lo mettete certe volte avvengo dei bug difficilissimi da trovare. Prendete l'abitudine di mettere sempre il punto e virgola alla fine di ogni comando come in PHP.

Commenti

I commenti si scrivono mettendo // e il resto della riga e' un commento.

 //questo e' un commento 

Si può fare anche con /*...*/:

 /* commento 
 molto 
 lungo */

Variabili

Le variabili la prima volta vanno inizializzate con let. Esempio:

 <script>
 let nome="Mario";
 nome="Giovanni";
 nome="Luigi";
 alert(nome); // appare Luigi
 </script>

Si possono usare apici, virgolette o backstic. Il backstick e' utile per inserire variabili:

 let nome="Mario";
 let nome2='Giovanni';
 let nome3=`${nome} e ${nome2} sono ${1 + 1} persone`;
 alert(nome3); // appare Mario e Giovanni sono 2 persone

Interagire con l'utente

Per interagire con l'utente ci sono tanti modi. I piu' semplici sono: alert, prompt e confirm.

Alert

Alert e' una semplice finestra che appare con una scritta:

 alert("Ciao!");

Prompt

Prompt e' una finestra con una scritta che un campo da compilare, cosi' potete chiedere informazioni all'utente. Il campo puo' essere precompilato:

 let anni = prompt('Quanti anni hai?', 20);
 alert(`Hai ${anni} anni!`); 

Confirm

Confirm serve per avere una risposta si o no. Il risultato sara' true o false.

 let mare = confirm("Ti piace il mare?");
 alert( mare ); 

Concatenazione stringhe

Per unire le stringhe si può usare il segno +:

 let mare="Il mare contiene " + "acqua" + " e sale";

IF

Il comando IF serve per le scelte:

 if (nome == "Mario") { alert("Ciao Mario"); }

 if (nome == "Luigi") {
    alert("Ciao Luigi");
    alert("Come stai?");
  } else {
    prompt("Come ti chiami?");
  }

Abbiamo usato la comparazione ==, ma per essere più sicuri è meglio === che controlla contenuto e tipo di dato.

WHILE

WHILE esegue finche' e' vera una condizione:

 let i = 0;
 while (i < 3) { // shows 0, then 1, then 2
   alert( i );
   i++;
 }

DO... WHILE

Do...While vi assicura che almeno una volta venga eseguito il comando:

 let i = 0;
 do {
  alert( i );
  i++;
 } 

FOR

FOR serve per ripetere un comando, o più comandi, un certo numero di volte:

 for (let i = 0; i < 3; i++) { 
  alert(i);
 }

BREAK e CONTINUE

Se bisogna interrompere un ciclo basta

 let sum = 0;
 while (sum < 11) {
  sum = sum + 1; 
  if (sum == 5) break;
  alert(sum);
 }
 alert("Ciclo finito!");

Se bisogna saltare il ciclo in andare al prossimo si puo' usare CONTINUE:

Se bisogna interrompere un ciclo basta

 let sum = 0;
 while (sum < 7) {
  sum = sum + 1; 
  if (sum == 3) continue;
  alert(sum);
 }
 alert("Ciclo finito!");

Etichette dei cicli

Siccome possiamo avere piu' cicli annidati, allora possiamo etichettare i cicli per dire a BREAK e CONTINUE qual ciclo interrompere o passare all'iterazione successiva.

 outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    let input = prompt(`Value at coords (${i},${j})`, '');
    // if an empty string or canceled, then break out of both loops
    if (!input) break outer; // (*)
    // do something with the value...
   }
 }
 alert('Done!');

Per fare un'operazione con tutti gli elementi di un oggetto, usare anche IN:

 for (key in object) {
  // executes the body for each key among object properties
 }

SWITCH

SWITCH fa scegliere direttamente fra piu' casi, e' come scrivere molti IF in maniera piu' semplice:

 switch(x) {
  case 'PANE':  
    alert("Grazie, mi piace il pane");
    break
  case 'ACQUA': 
    alert("Grazie, avevo sete.");
    break
  default:
         alert("Non mi piace, puoi offrirmi altro?");
    break
 }

Funzioni

Le funzioni si impostano cosi', e si possono anche impostare dei parametri di default se l'utente non ce li da':

 function (parametro1, parametro2="default2") {
  alert( 'Hello everyone!' );
 return parametro1;  //return non è obbligatorio
 }

Oggetti

Gli oggetti sono solo dei recipienti di valori:

 let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
 };

 alert( user.name ); // John
 alert( user.age ); // 30

Cancellare

Per cancellare un elemento in un oggetto basta usare delete:

 delete user.age;

Verificare se c'è una chiave

Bisogna usare IN:

 alert( "age" in user ); // se  user.age esiste, allora esce vero

OBJECT.KEYS / OBJECT.VALUES / OBJECT.ENTRIES

La proprietà keys vi dice le chiavi di un oggetto:

 alert(Object.keys(user)); //[]
 alert(Object.values(user)); //[]
 alert(Object.entries(user)); //],[

Copiare gli oggetti

Non fatelo. Gli oggetti in Javascript sono solo delle etichette per la stessa cella di memoria, se alterate un oggetto, aterate anche la sua copia.

THIS

Il testo this rappresenta l'oggetto usato nella funzione usata, ad esempio:

 let utente = {
   nome: "Mario",
   cognome: "Rossi",
   salutare() {
      alert(this.nome);
      }
   };
 utente.salutare();  //esce "Mario"

Matrici (array)

Per fare una matrice basta usare le parentesi quadre, cominciano la numerazione da zero:

 let frutti = ["Mela", "Pera", "Arancia"];
 alert(frutti[0]);  //Mela

Si possono fare anche muldidimensionali:

 let ricette = [
   [ "Sale", "Olio", "Peperoncino"],
   [ "Pasta", "Pomodoro", "Sale"]
   ];
 alert(ricette[1][0]); //Pasta

AT

La proprietà AT indica a quale posizione e si può indicare anche dal fondo:

 alert(frutti.at(-1); //Arancia

length

La proprietà length permette di sapere di quanti elementi è una matrice:

 alert(frutta.length);

JSON.stringify

Trasforma un oggetto in una stringa JSON:

 let student = {
  name: 'John',
  age: 30,
  isAdmin: false,
  courses: ['html', 'css', 'js'],
  spouse: null
 };

 let json = JSON.stringify(student);

 alert(json);
 /* JSON-encoded object:
 {
  "name": "John",
  "age": 30,
  "isAdmin": false,
  "courses": ["html", "css", "js"],
  "spouse": null
 }
 */

JSON.parse

Trasforma un testo JSON in un oggetto:

 let userData = '{ "name": "John", "age": 35, "isAdmin": false, "friends": [0,1,2,3] }';
 let user = JSON.parse(userData);

La data

La data è un oggetto, tra parentesi si mette la data in timestamp epoch; va scritto con la D maiuscola:

 let adesso = new Date();
 alert(adesso); // l'ora corrente

 let DueGenn1970 = new Date(24 * 3600 * 1000);
 alert(DueGenn1970); // Fri Jan 02 1970 01:00:00 GMT+0100

Comparazione: uguale e disuguale

Per uguale bisogna usare i caratteri di uguale == oppure ===, mentre per disuguale != oppure !==; le espressioni più lunghe controllano anche il tipo di dato oltre al contenuto.

Classi

Premessa

Le classi sono una delle complicazioni della programmazione a oggetti. Per chi scrive la programmazione a oggetti e' cercare di rendere estremamente piu' complessa la programmazione. Nella programmazione classica ci sono variabili e funzioni. Una funzione agisce su variabili o esegue un'operazione. Nella programmazione a oggetti abbiamo oggetti che possono essere qualsiasi cosa e dobbiamo esplorarle e studiarle per capire tutte le cose che possono fare e come; e poi abbiamo le classi che sono delle funzioni con un altro nome che hanno una marea di metodi, o sottofunzioni da poter chiamare. Tutto questo rende la programmazione uno sforzo mnemonico enorme e porta a fare molti piu' errori; per esempio una classe o un oggetto potrebbe avere una funzione che ci risolve subito il nostro compito, ma se non lo sappiamo otterremo il risultato con un enorme sforzo computazionale utilizzando solo le cose che conosciamo. Rendere le funzioni annidate dentro altre funzioni, in pratica, porta per un essere umano a scrivere pessimo codice. E' molto difficile avere un programma efficiente in Java o Javascript, e' molto piu' facile trovarlo in altri linguaggi non a oggetti; tutto questo perchè avere un indice con lista di funzioni da imparare è estremamente piu' semplice che: studiare gli oggetti, con i loro contenuti e poi le classi con i metodi all'interno. E' la stessa differenza tra imparare l'alfabeto (programmazione con le funzioni) e imparare tutta la piantina di una citta con tutti gli indirizzi e i nomi in cui vivono in ogni palazzo della citta' le persone (programmazione a oggetti).

Definizione di una classe

Ecco una definizione di una classe:

 class User {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    alert(this.name);
  }
 };
 // Usage:
 let user = new User("John");
 user.sayHi();

Oggetto Document (DOM)

L'oggetto document è utilizzato per cambiare la pagina HTML. E' un oggetto con un sacco di proprietà/metodi.

document.getElementById(id)

document.getElementsByTagName(name)

document.getElementsByClassName(name)

document.title

document.URL

document.lastModified

document.bgColor

document.fgColor

document.linkColor

document.vlinkColor

document.images.length

document.links.length

document.write()

document.writeln()

document.querySelector()

document.querySelectorAll()

document.createElement()

document.createTextNode()

document.element.innerHTML

document.element.attribute

document.element.style.property

document.element.setAttribute()

document.createElement()

document.removeChild()

document.appendChild()

document.replaceChild()

document.write()

document.getElementById().onclick

document.baseURI

document.body

document.cookie

document.doctype

document.documentElement

document.documentMode

document.documentURI

document.embeds

document.forms

document.head

document.images

document.implementation

document.inputEncoding

document.links

document.readyState

document.referrer

document.scripts

onclick

Qualunque elemento può avere la funzione onclick per attivare del codice javascript:

 <html>
 <body>
 <h1>JavaScript HTML Events</h1>
 <h2>The onclick Attribute</h2>

 <h2 onclick="this.innerHTML='Ooops!'; this.style.color='blue';">Clicca qui!</h2>

 </body>
 </html>