Javascript Tutorial Italiano 01 - Introduzione a JS

un buongiorno a tutti benvenuti al primo episodio del corso di javascript a questo dice tanto di cui parla andremo a fare un introduzione importante e abbiamo tanto di cui parlare vi faccio vedere la scaletta in tanto che ho già preparato delle cose per voi questo corso avrà circa 27 28 episodi se non mi sbaglio quindi sarà un corso abbastanza lunghino come quello i css cominciamo subito allora che cos'è javascript andremo a vedere come javascript si combina con html css cosa si può fare con javascript ok cosa fa effettivamente javascript sulla nostra pagina andremo a vedere

brevemente il concetto di browser security andremo a vedere l'ordine di lettura del codice cos'è il codice interpretato versus codice compilato differenza tra server side e klein sai del codice dinamico e statico come giù come aggiungere javascript alla nostra pagina e le varie strategie di caricamento del codice poi guarderemo velocemente i commenti in questo corso abbiamo parlare appunto come vedete di vari tipi di codici eccetera in quanto html css era tutto abbastanza più semplice ma la quale cose si fanno si fanno interessanti quindi che cos'è e javascript vi voglio far vedere la documentazione del vero per

mozilla che prende una bellissima immagine e spiega come html css javascript non siano altro che tra livelli diversi di una stessa torta ok html possiamo definirla la struttura l'abbiamo visto html semplicemente la struttura i paragrafi il layout tutti quegli elementi che vanno a completare la nostra pagina ok per quanto riguarda css css è un po lo stile quindi la pagina pure html è strutturata ma in sé è brutta quindi css ci permette di dare i colori background mettere un bel vestito alla nostra pagina e per quanto riguarda java script javascript è quel linguaggio di programmazione

che da dinamicità alla nostra pagina ovvero ci permette di gestire file multimediali ci permette di cambiare in corso i dati che vediamo ci permette di fare ci permette di interagire con la pagina quindi javascript eccola cosa che ci permette di passare da una pagina statica a una pagina dinamica ok io qua vi riporto un breve esempio che hai portato anche sulla documentazione di gara per mozilla di base abbiamo un p vedete qua al nostro pil ok è stato è stato stilato css lo sapete quindi mi ha chiamato font family space insomma è diventato un bel

bottone ma la cosa importante è questo allora questo è il nostro pickle player uno si chiama chris potete vi dicevo trovarlo sulla documentazione quindi potete seguire passo passo allora abbiamo il nostro pil che è stato stilato come se fosse un bottone ok e poi abbiamo il nostro codice javascript ve lo spiego brevemente perché tanto poi abbiamo 28 episodi per parlarne in nel dettaglio abbiamo il nostro paragrafo che viene trovato nel documento come selettore per effettivamente è vero è un p e si trovano il documento abbiamo detto che aggiungiamo un un evento ok quindi ascoltiamo per

l'evento clic su paragrafo e cosa succede quando noi schiacciamo andiamo a eseguire questa funzione che è update name quindi aggiorniamo il nome semplicemente ci comparirà adesso ve lo faccio vedere un inserimento in cui possiamo mettere il nome è automaticamente il nostro il nostro pil vedrà il suo contenuto cambiare tra player1 chris a player uno più nome che abbiamo scelto molto semplice ve lo faccio vedere noi schiacciamo volete ci esce il prompt che non vogliamo mettere e io sono chiaramente edoardo perciò invio ne vedete che cambia possiamo andare avanti all'infinito ok se non c'è luca quindi

questo è possiamo dire a livello molto basico la potenza di javascript ok quindi javascript ci permette di veramente interagire con la pagina e cambiarne il contenuto in qualsiasi momento che cosa possiamo fare con javascript si vede qua possiamo salvare dei dati dentro delle variabili possiamo eseguire delle operazioni possiamo ascoltare per degli eventi e possiamo fare tanto altro la cosa buona di javascript è che sulla sua base sono stati costruiti degli ep ai ip ai sono l'abbreviazione di application programming interfaces ovvero che sono dei livelli extra aggiunti sopra linguaggio javascript normali quindi possiamo avere accesso a

ep ai del browser tipo pensiamo a canvas oppure epia di terze parti quindi pensiamo quando google maps quando voglio mandare a inventare le mappe nel nostro sito piuttosto che vogliamo far vedere gli ultimi tweet legati a twitter facebook e cose del genere però quando carichiamo il nostro già skip sulla nostra pagina cosa succede una cosa importante da sapere è la browser security ok qua specifico che ogni codice eseguito solo nella propria tab in questo caso vedete che abbiamo due tab diverse qua c'è la guida di weber mozilla è qua c'è il mio progetto in localhost

facciamo finta che sia un sito on line il fatto che ogni tab esegue il codice in un suo in un suo specifico ambiente chiamiamolo così quindi il codice eseguito qua non può andare qua altrimenti pensate noi abbiamo magari aperto un sito non troppo amichevole qua abbiamo aperta la nostra banca se il codice se i browser non fossero così sicuri uno potrebbe far partire il codice l'acqua entrare qua dentro quindi navigare nel browser per conto nostro e prenderci le informazioni fortunatamente questa cosa non è possibile l'ordine di lettura del codice come abbiamo visto da dall esempio

la come vi ho spiegato l'esempio è dall'alto verso il basso in realtà più avanti vedremo che ci sono dei metodi che mettono un po in discussione questa cosa però tendenzialmente è tutto dall'alto verso il basso così come era così come l'interpretazione di html così come css ripeto ci sono dei casi particolari che vedremo più avanti ma è dall'alto verso il basso quindi se io dovessi andare a dichiarare qualcosa prima per esempio facciamo così se io vado a dichiarare un evento aggiunto su paragrafo prima che venga definito cos'è paragrafo ci darà allora andiamo a vedere vedete

ci dà un errore è stato fatto un errore non possiamo accedere paragrafo prima dell'inizializzazione quindi effettivamente javascript viene eletto dall'alto verso il basso che cos'è il codice interpretato a differenza del codice compilato allora javascript è un codice interpretato ovvero che noi lo scriviamo così e viene passato al browser così e viene eletto così ok mentre invece per quanto riguarda il codice compilato noi scriviamo il codice per esempio così ma viene compilato il linguaggio macchina prima di esser passato appunto alla macchina e prima di esser letto in questo caso un esempio palese e c c plus

plus ok che vengono compilati il linguaggio macchina las non è questa la sede per parlare di ceci plus plus e il linguaggio compilato ma importante capire la differenza tra il codice interpretato così come scritto viene passate viene eletto e il codice compilato noi lo scriviamo in un certo modo perché ci aiuta a scrivere in un certo modo altrimenti scrivere linguaggio macchina sarebbe abbastanza complesso e si diventerebbe scemi quindi codice interpretato è così codice compilato non sia un certo modo viene compilato per la macchina e la macchina non legge a modo suo qual è la differenza

tra server side e client side allora sentirete spesso parlare di server side e client side quando noi guardiamo una pagina web ok il codice che ci arriva il codice che vediamo bene viene scaricato quindi se io faccio così e vi faccio vedere vado sul network e riaggiorna vedete che viene scaricata un po di roba se io filtro per jay haas ok vedete che viene scaricato un po di codice javascript così come in realtà viene scaricato del codice css quindi tutto ciò che è client side vuol dire che accade sul nostro browser ci viene mandato il

codice nello scarichiamo viene eletto e viene preparata la pagina per quanto riguarda invece il codice server side il codice server side potrebbe essere il login quindi noi facciamo l'accesso a facebook ma non è che tutti e tutto avviene sul nostro sul nostro browser e poi viene mandato e veniamo e veniamo accettati così tutto sul nostro browser altrimenti chiunque potrebbe far breccia quindi server side vuol dire che è codice che viene calcolato sul server in modo che noi non possiamo accederci e da lì poi ci viene civile passata alla risposta e basta mentre qua invece ci

arriva tutto il codice questa è la definizione più semplice che posso darvi quindi server side client side è sul lato browser server side è sulla macchina e sulla macchina server quindi pensate a php pensata java pensate a python e per assurdo pensate anche a javascript perché anche se già avati è nato come client side quindi per rendere dinamici city ormai da saranno dodici anni dovrebbe essere è uscito node.js che è un ambiente che ci permette di far girare javascript come server side di far girare javascript sul server e quindi vedremo prossimamente su questo su questo

canale un corso dedicato a js quindi ormai molti progetti e io mi sono spostato nel corso degli anni a essere questo tipo di sviluppatore preferisco lavorare creare progetti interamente in javascript quindi tutta la parte dinamica client side la faccio in javascript tutta la parte server side la faccio comunque in javascript con vari framework mai comunque javascript qual è la differenza adesso tra codice dinamico e codice statico allora le pagine che abbiamo sempre fatto noi su html css erano pagine poniamo il caso che queste non siano dinamiche ok non lo so se hanno già qua che

a questo non è non è statica ma poniamo il caso che ci sia semplicemente delle immagini dei bottoni delle scritte questa è una pagina statica ovvero che sarà sempre così a meno che una persona la va a modificare dietro ma anche se la caricate sarà sempre con quella modifica quindi la pagina statica non cambia niente una pagina dinamica uno degli esempi più palesi potrebbe essere facebook dove c'è interazione con la pagina o dove semplicemente c'è un cambio di dati anche asincrono quindi noi magari stiamo facendo una cosa ecco pensate a questo è una pagina un

esempio buono diretta.it ok diretta.it quasi sono tutti i risultati delle partite che vanno e ci sono i minuti che sono aggiornati in tempo reale e i punteggi che sono aggiornati in tempo reale quindi questa non è una pagina statica perché i dati cambiano in continuazione anche senza che noi aggiorniamo la pagina mentre invece questa documentazione è presumo salvo si facciano scherzi è una pagina statica quindi il contenuto è questo e sarà sempre questo e non c'è modo in cui noi possiamo cambiarlo o il server in modo asincrono cambio i dati quindi questa differenza tra pagina

statica sempre uguale e pagina dinamica per esempio i punteggi live delle delle partite proseguiamo e arriviamo finalmente un attimo a qualcosa di più di più pratico ovvero come aggiungere js alla nostra pagina possiamo farlo in modo interno esterno oppure in line allora interno è molto semplice di fatto il tag script lo potete mettere anche in in ed vi fate il tag script e scrivetele il codice allora il fatto che se voi mettete roba in ed viene eseguita prima che la html venga venga letto e prodotto quindi le voci così vedrete abbiamo dei problemi non può

leggere la proprietà ad eventi lisser che è questa su p questo perché quando sta eseguendo javascript il query select urpi il nostro pagato ancora non esiste perché viene eletto dall'alto verso il basso quindi noi potremmo si mettere javascript esterno da led ma adesso vediamo come caricarlo fondamentalmente si tiene nel body e si tiene in fondo in modo che sia tutto in modo che siamo sicuri che porta il caricamento ma adesso ne parliamo quindi possiamo metterlo dentro la pagina ok possiamo metterle esternamente 15 basta fare semplicemente uno script src come se fosse un immagine di html

e qua ci mettiamo il nostro file jr spunto jay haas che io qua no no ma potrei tranquillamente creare questo è il secondo modo oppure possiamo fare possiamo verde il codice in linea io non ve lo consiglio però potrebbe essere che se non sapete questo non avete ancora dimestichezza con javascript potrebbe succedervi di fare un click o un click vedete equa chiamiamo una funzione che potrebbe essere ciao facciamo così e andiamo qua a creare function ciao alert ciao salviamo e non m salviamo e basta ma ho sbagliato scusatemi quindi abbiamo la nostra funzione ciao che

viene chiamata quando clicchiamo su p va bene però è meglio se togliamo questo andiamo a vedere io clicco e vedete che compare ciao questa cosa non è consigliata perché se voi poi avete questo clic su più bottoni o altre situazioni vi rendete conto che avete cambiarlo ovunque invece se voi mettete semplicemente un un evento ok a ad ascoltare il click capite che lo scrivete una volta o comunque lo scrivete qua e non dovete andare a cercare ogni bottone che io vi sconsiglio di farlo però siete all'inizio per pratica non è un problema se comunque riusciti

a capire la differenza tra il farlo per pratica e il farlo in progetti di una certa grandezza cioè la differenza abbastanza grande arriviamo quindi a parlare delle strategie di caricamento del codice allora come vi dicevo ne possiamo avere script messo qua in alto e vi ho parlato del fatto che html css potrebbe non essere caricato quando noi facciamo partire il nostro codice javascript quindi abbiamo tre possibili metodi quindi due sono per file esterni e una peruffo all'interno in cui possiamo essere sicuri che javascript parta quando tutto sia stato caricato allora se voi mettete in body

in fondo che io ricordi in tutti i miei anni non ho mai avuto problemi tuttavia una cosa che potreste fare è scrivere questa linea di codice ovvero che cosa dice noi prendiamo il documento che è tutto il nostro documento il nostro don e li mettiamo un evento quindi ascoltiamo per un evento così come abbiamo fatto come noi con il nostro p prima ascoltiamo per l'evento è l'evento che ascoltiamo head of content lode quindi quando tutto il nostro dom se vi ricordate è il nostro documento viene caricato con i quando tutto il contenuto del dom viene

caricato mi fai partire questa funzione e noi qua dentro potremmo scrivere il nostro codice giallo scritto ovvero tutta la pappardella che mi ha scritto prima in questo modo siamo sicuri che il codice venga seguito quando l'intero documento è caricato ripeto in anni non ricordo avendo scritto già sempre qua in fondo al body di aver avuto problemi però questo è un controllo in più alla fine è una riga di codice non guasta quindi se la mettete per sicurezza non è non è un problema per quanto riguarda i file esterni noi possiamo usare de fer e a

sync allora fondamentalmente cosa fanno permettono alla pagina di caricarsi dopo di che eseguiranno il codice quindi andranno a scaricare il codice e poi le seguiranno la differenza sostanziale tra sinché de fer vedete qua ho messo delle parole chiave è in ordine e indipendente allora mettendo de fer noi su mettendo de fer come attributo su tutti questi su tutti questi script succede così che una volta che la pagina è stata è stata caricata quando una volta del documento è caricato questi script partono a essere esser letti ok ma sono in ordine quindi noi abbiamo de fer

ci sarà prima questo script per questo script e poi questo script se noi invece abbiamo tre a sync ok i documenti file javascript vengono scaricati e il primo che viene scaricato magari per per una questione di pesantezza parte indistintamente quindi la differenza sta che se noi abbiamo dei file che sono interdipendenti in uno dall'altro ok quindi questo dipende da questo per una questione di variabili o altre cose è meglio sarde firth che vogliamo assicurarci che questo sia stato eletto e il codice sia stato lanciato e poi porta questo e poi porta questo ma sappiamo tre

diversi script che fanno tre cose totalmente diverse allora possiamo usare a sint o magari due sono correlati quindi due sono correlati per un certo motivo è uno invece va a gestire altre cose che non so che non è correlata con questi due quindi il codice della pagina il dome stato è stato creato questi due devono andare in ordine per forza mentre invece questo quando è pronto può andare lo stesso questa è la sostanza è differenza tra a sync e de fer ok quindi questi qua vengo eletto in ordine affinché il primo che arriva viene eletto

quindi assicuratevi di mettere il l'attributo giusto sullo script in modo da da non aver problemi ultima cosa da guardare sono i commenti allora arriviamo qui facciamo script e andiamo a mettere andiamo a scrivere dei commenti alla così non abbiamo niente se io voglio fare un commento su una lega ci basta fare control e o accentata ovviamente su subito a studio arriverà un video con tutte le short cut non preoccupatevi invece per quanto riguarda vedete che se scrivo qua sotto quindi questo è monolinea quindi doppie barre doppie barre e monolinea invece se ne andiamo a fare

slash e asterisco noi possiamo andare giù all'infinito e vedete che finché io non chiudo non ci dà alcun tipo di problema quindi questi sono i commenti magari dovete commentare una sola funzione function ciao potete far così ok se invece avete un po di codice che dovete commentare serve una spiegazione abbastanza lunga quello che potete fare fate così e scrivete ok queste era un introduzione a javascript io spiego io spero che si sia capito tutto noi ci vediamo con l'episodio numero due ripeto sarà abbastanza lunga tutti gli episodi escono una volta al giorno alle 14 io

vi ringrazio vi ricordo che c'è il gruppo in descrizione se volete scambiarvi opinioni e quant'altro con altre persone che seguono il corso ci sono gli abbonamenti attivi per il sul canale per chi volesse supportare appunto la produzione di questi corsi io ringrazio nella prossima ciao ciao