Come inserire codice JavaScript in un file HTML

In questo video vedremo varie tecniche per inserire il codice JavaScript in una pagina web.
Vedremo come usare i tag script messi a disposizione appositamente da HTML per inserire del codice nei nostri file.
Ci sono 2 metodi principali: il primo è inserire il codice direttamente nel file con estensione .html e il secondo è creare un file con estensione .js e poi importarlo nel file HTML.
Ci sarebbe anche una terza opzione introdotta dall'ECMAScript 6 che prevede l'utilizzo dei moduli ma al momento non è supportata dai browser.

Note al video: 

Ultimamente i browser hanno cominciato ad implementare i moduli, sotto trovate il link al video dedicato.

Trascrizione: (click per espandere)
salve a tutti e benvenuti a questo nuovo
video questo video vi spiegherò come
importare come inserire javascript
codice dentro al un file html
come vedete qui ho già preparato il mio
file html video 4.html e qui
ce l'ho aperto nel nostro browser titolo
h1 ci ho messo dentro un bottone che per
ora non fa niente ma faremo fare
qualcosa è un primo paragrafo eccolo qui
come dove si inserisce il codice
javascript si può inserire dentro la
head della pagina web e per far questo
si usa uno specifico tag chiamato script
ecco qui io posso inserire il mio codice
direttamente nella head posso inserire il
mio codice dentro al body in qualsiasi
posizione dentro all'inizio dentro alla
fine posso inserire un file esterno che
è sempre scritto in javascript per
esempio qui ho preparato un altro file
chiamato script punto js perché tutti i
file javascript devono finire con
l'estensione js questo file qui ce l'ho
dentro alla stessa directory dove ho
questo file qui quindi posso inserire
posso che inserire quel file usando
sempre il tag script e aggiungendo
l'attributo source e qui specifico il
nome del file e poi chiudo il tag
ecco qui allo stesso modo di come ho
inserito il mio file cui lo posso
inserire alla
fine del nostro body e posso inserire
oltretutto un file che un file o una
libreria che non è presente nel nostro
sito web per esempio la famosa libreria
javascript jquery che ce l'ho aperta qui
eccola qui se io voglio inserire questa
basta che copio url della libreria e lo
inserisco qui ecco qua
volendo possa inserire anche la versione
magnificata eccola qui questa qui questi
due file sono gli stessi file solo che
questa è la versione compressa leggibile
dai computer
questa è la versione leggibile dagli
umani
basta sempre che copi url e lo
inserisca min sta per magnificato e
allo stesso modo possa inserire la
libreria alla fine del nostro body cosa
è consigliabile fare normalmente è
consigliabile se possibile inserire il
javascript e soprattutto le librerie
esterne eccetera inserirle alla fine del
body questo perché quando il nostro
browser comincia a caricare la nostra
pagina web
comincia della riga uno comincia a
leggere ok riga 2 riga 3 4 se
dentro alla head noi importiamo molte le
librerie molto codice javascript lui
deve il browser deve perdere tempo a
leggere queste librerie e nel frattempo
non può continuare a leggere la nostra
pagina
questo può dare fastidio all'utente
perché vede la pagina che continua a
caricarsi ma non vede niente
visualizzarsi quindi quando è possibile
e noi inserendole le librerie alla fine
della nostra pagina
l'utente vede caricarsi tutti gli
elementi della pagina e non quindi non
si lamenta e poi senza che lui
se ne renda conto il browser comincia a
leggersi tutte librerie esterne che noi
abbiamo inserito adesso noi andiamo a
inserire un semplice esempio di una
funzione in javascript non serve che voi
capiate quello che sto scrivendo adesso
solo perché la spiegherò in un'altra un
altro video
voglio solo darvi un'idea di come
funziona e javascript quindi lascio io
scrivo questa funzione che per esempio puo' essere funzione cambia colore
ecco qui e vado a inserirla nel
documento cappello con questo getElementById
vado a dire voglio questo
elemento qui e lo riconosco
usando questo id e poi vado a
cambiare il codice dei css background-color e gli
do un colore
red per esempio ok e come come invoco
questa funzione invoco usando questo
evento qui che e' l'evento onclick e
cioè quando io faccio clic con il mouse
invoco questa funzione cambia colore
questa funzione cerca
l'elemento con id display che è questo
qui e dice voglio che il tuo background
sia rosso quindi adesso noi andiamo qui
e vediamo cosa succede cambiato il colore la stessa
funzione la potrei inserire nel file
esterno nel file esterno e io qua
posso mettere in questo caso non ci
vanno i tag script di tag e script sono
solo per laccati ml mentre questo è un
file di puro javascript
quindi adesso io qui ricarico la pagina
schiaccio cliccami e c'è sempre il mio
background rosso può capitare che nelle
vecchie versioni se vi capita di
riaprire vecchie versioni di codici js
voi troviate troviate questo attributo
qui che e' type
text javascript questo attributo non è
più obbligatorio con html5 quindi noi
non lo useremo mai però voi
sappiate che se aprite vecchie
versioni di javascript potreste
trovarlo ultimo appunto ecmascript 6 ha
aggiunto una nuova maniera per inserire
il codice javascript che chiamata modulo
o moduli solo che al momento nessun
browser supporta questa questa
funzionalità quindi io non ne parlerò
perché non voglio crearvi troppa
confusione con questo è tutto ci
sentiamo il prossimo video ciao
File del video: