Appunti

Lavoro

24/05/2021

Roberto Piva

Intro a JavaScript

JavaScript nasce per dare dinamicità e funzionalità alle pagine web

Consente inoltre di:

Accedere e modificare elementi della pagina HTML
Reagire ad eventi generati dall'utente
Validare i dati inseriti dall'utente
Caricare risorse esterne alla pagina
tantissime altre succosità...

Java non è Javascript

Anno 1995:
Netscape crea LiveScript per dotare il proprio browser Navigator di un linguaggio di scripting che permettesse ai web designer di interagire con i diversi oggetti della pagina (immagini, form, link, ecc).

In quello stesso anno, Netscape era particolarmente legata alla Sun Microsystems (ideatrice di Java), con cui aveva stretto una partnership.

Brendan Eich venne incaricato del progetto e rinominò LiveScript in JavaScript.

JavaScript dal 2010

È stato pensato come linguaggio client-side, come HTML e CSS, ed è stato così fino a pochi anni fa.

Nel 2010, grazie a node.js e altri progetti, è stato “trasformato” in un linguaggio server-side, che può essere utilizzato senza un browser e senza HTML e CSS, avendo funzionalità simili a quelli di linguaggi come PHP, C++, Java, ecc.

Funzioni built-in

Una funzione è un “pezzo di codice” che assolve ad un compito specifico.

alert(“ciao”) è una funzione built-in di JS che ha il compito
specifico di aprire la finestrella e mostrare il testo che scriviamo all’interno delle “ ”.

Tutte le funzioni hanno un nome (in questo caso, alert) e possono avere zero o più argomenti (in questo caso uno, cioé “ciao”).

alert("ciao");

Variabili

Una variabile è un contenitore che contiene un valore: può contenere del testo (o stringa).

Il nome della variabile che scegliamo è “l’etichetta” che attacchiamo al contenitore per sapere cosa c’è dentro.

var nome;

var nome;
nome = 'Filippo';

var soprannome = 'Pippo';

Oppure un numero:

var eta = 33;
var nuova_eta = eta + 1;

Funzione prompt()

E se volessi chiedere un input dall’utente?
Possiamo usare la built-in function prompt()

Prompt e assegnazione ad una variabile nella stessa riga!

var name = prompt("Scrivi nome!");

// lo stampo anche nella console del browser:
console.log('Nome: ' + name);

Esempio:

var text = prompt();

Interagire con HTML

Come interagisco con la pagina HTML?

document.querySelector(".ciao");

document.write("Ciao");

Esempio:

Documentazione MDN

Creiamo una variabile che si chiama “name”:

prompt() che prende quello che l’utente scrive da tastiera:

var name

prompt("come ti chiami?");

var name = prompt("come ti chiami?");

E lo inseriamo dentro alla variabile name:

Interagire con HTML

Come interagisco con la pagina HTML?

document

Prendiamo il riferimento a tutto il documento HTML

Documentazione MDN

Prendiamo solo la parte del file HTML che ha la classe “name”

Prendiamo la parte interna, cioé il testo tra i tag:

document.querySelector(".name")

document.querySelector(".ciao").innerHTML

document.querySelector(".name").innerHTML = name;

Mettiamo qui dentro il contenuto della variabile name:

Istruzioni Condizionali

if(condizione) {
 // eseguo istruzioni 1
} else {
  // eseguo istruzioni 2
}

Se si verifica la ( condizione ) { ... } altrimenti { ... }

E se ho più condizioni da confrontare?

&&, AND, "e logico": restituisce true se e solo se entrambe le condizioni sono vere:

||, OR, "o logico": restituisce true se almeno una condizione risulta vera:

esempio: se x=3, y=4  allora   (x<4 && y>5) false

esempio: se x=3, y=4  allora   (x<4 || y>5)  true