Corso Javascript Completo 2025 da PRINCIPIANTE ad ESPERTO in 6 ore

Buongiorno a tutti benvenuti al primo episodio del corso di javascript 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 e interpretato versus codice compilato differenza tra server side e client side codice dinamico e statico komatsu come Aggiungere javascript alla nostra pagina e le varie strategie di caricamento del codice poi guardiamo velocemente i commenti in questo corsa nemo parlare appunto come vedete di vari tipi di codice eccetera in quanto html css era tutto abbastanza più semplice ma la quale cose si fanno si fanno interessanti quindi che cos'è javascript vi voglio far vedere la documentazione di 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 pur html è strutturata ma in sé è brutta quindi css ci permette di dare i colori background sbagliate 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 varia 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 pie col 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 java scrive lo spiego brevemente perché tanto poi abbiamo 28 episodi per parlarne in nel dettaglio abbiamo il nostro paragrafo che viene trovato nel nel documento come selettore peer effettivamente è vero è un p e si trova nel 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 nei 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 p vedrà il suo contenuto cambiare drap layer 1 chris a player uno più il nome che abbiamo scelto molto semplice ve lo faccio vedere come schiacciamo vedete ci esce il prompt che non vogliamo mettere e io sono chiaramente edoardo perciò Invio e 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 gp eyes on l'abbreviazione di application programming interfaces ovvero che sono dei livelli extra aggiunti sopra il linguaggio javascript normale quindi possiamo avere

accesso a e pia e del browser tipo pensiamo a canvas oppure epia di terze Parti quindi pensiamo quando google maps quando vogliamo andare 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 vi 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 essere eletto 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 il 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 ri al giorno vedete che viene scaricata un po di roba se io filtro per jay s 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 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 size client side è sul lato browser server side sulla macchina e sulla macchina server quindi pensate a php pensate a giava 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 su un 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 non 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 se voci così

vedrete abbiamo dei problemi non può leggere la proprietà ad eventi listener che è questa su p questo perché quando sta eseguendo Javascript il query select orp 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 parta 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 jackie 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 rifarlo 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è né c'è un 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 e 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 poi questo script e poi questo script se noi invece abbiamo 3 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 emilius arde 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 vengono letti in ordine

a sync è 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 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 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 questa era un introduzione 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 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 ma la prossima ciao ciao 1 Giorno a tutti bentornati episodio il numero due di javascript adesso si comincia a parlare dei tasselli fondamentali che compongono javascript sono tasselli che in realtà sono le colonne portanti di quasi tutti i linguaggi di programmazione perciò se avete già esperienza con altri linguaggi

di programmazione vi risulterà veramente semplici se il vostro primo sappiate che la conoscenza che fate qua poi la potete portare su altri linguaggi Programmazione a prescindere dalla sintassi che che utilizzano quindi andiamo subito vedere la scaletta abbiamo che cos'è una variabile oggi parliamo di variabili andremo a dichiarare una variabile con alcune regole su come dare il nome la variabile inizializzare la variabile ci sono due parole chiave che possiamo utilizzare per definire una variabile andremo a vedere la differenza come aggiornare una variabile che cosa Possiamo contenere dentro le variabili che cos'è la tipizzazione dinamica che caratterizza

javascript e velocemente le costanti cos'è una variabile pensate alla variabile ad una scatola ok la variabile è una scatola che può contenere dei dati ok dei dati indefiniti ci ha pensato a classico xxv una scatola di un valore indefinito che può cambiare nel tempo se ne abbiamo cinque sappiamo che sarà sempre 5 ma se leviamo questa scatola che può contenere Numeri o altre cose ma poniamo che sia numeri una volta può esser 5 una volta può esser 7 quindi nel momento in cui ne abbiamo in cui il momento in cui l'abbiamo xi3 ad esempio sappiamo

che questo x75 sarà 5 peuterey e fa 8 se invece questa scatola contiene 7 set peuterey fa 10 quindi una variabile è letteralmente una scatola contiene dei valori che possono cambiare nel tempo in questa cosa ci torna utile perché ci permette appunto e avere dei Programmi dinamici altrimenti sarebbero tutti arco dati sarebbe impossibile poter avere casistiche diventerebbero troppo complessi dichiariamo questi dichiariamo questa scatola innanzitutto noi dichiariamo così questa scatola lett il nome facendo così siamo andati a dichiarare letteralmente una scatola vi faccio vedere con sol punto log ne facciamo nome salviamo faremo prendere allora fatemi

Ok vedete che ci dà undefined vi faccio vedere la differenza tra scrivere console log nome allora console home server per mandarci appunto serve per loggare loggare in consolle quello che vogliamo ok vi scrivo cognome adesso guardate la differenza ok allora cognome is not find quindi la differenza tra le due non abbiamo dato alcun valore a nome ma esiste quindi quello che siamo andati a fare chiamate a dichiararla variabile quindi il Programma sa che esiste questa scatola che viene identificata come nome quindi qualsiasi cosa vogliamo prendere da quella scatola esiste possiamo metterci dentro qualcosa ma cognome

non l'abbiamo inizializzata non è identificata quindi quando noi andiamo a mandarla in consolle ci dà errore quindi inizializzare una variabile vuol dire letteralmente prendere una scatola e scrive di sopra il nome della variabile quindi questa questa variabile si chiama Nome e tutto ciò che sarà qua dentro si desume che conterrà qualcosa di relativo ai nomi poi aspettano di dare dei nomi coerenti appunto su questo mi raccomando le regole per per i nomi della variabile allora quello che possiamo usare sono caratteri numerici da 09 da az ok ea maiuscolo ok importante sapere che le variabili sono

case sensitive ovvero che nome scritto così e nome scritto così o infatti così ho un nome scritto così sono cose diverse ok altra cosa da dire Potete usare al massimo underscore non potete usare il trattino quindi possiamo avere eventualmente nome utente ok anche se una delle cose più consigliate sarebbe utilizzare per quanto riguarda javascript il camel cage mentre legge con php si trovano variabili iscritte così in javascript se proprio proprio dovete mettere più parole attaccate si fa così quindi lower kamel casa ovvero tutto in minuscolo possibilmente tutte minuscola la variabile se avete più Parole insieme

non potete dividerle quello spazio non potete dividerle con il trattino infatti detto che ci da errore potete dividerle con l'under scorre mai consigliato fare questo che è il camel caso ovvero minuscolo e la parola nuova a la la lettera che l'altra con cui comincia maiuscola in questo modo c'è più facile veramente leggere le cose proviamo proviamo così lett dichiarazione variabile nuova rispetto a Dichiarazione dichiarazione variabile nuova vedete la differenza si legge molto più velocemente questa perché vediamo il maiuscolo è comunque c'è una nuova lettera sappiamo che c'è la nuova spa parola scusatemi quindi dichiarazione variabile

automaticamente lo vediamo più velocemente che dichiarazione variabile nuova quindi possibilmente usate camel keynes è Quello più consigliato se non vi piace il massimo che vi posso dire è fare una cosa del genere ok non cominciate le variabili con underscore ok non cominciate le variabili coi numeri scrive una cosa del genere ok mi raccomando vedete che ci dà errore evitate questo evitate così cercate di tenere la variabile allora i nomi migliori per le variabili sono tutto in minuscolo colca mail che se avete più parole i numeri dopo gli Underscore eventualmente dopo cercate non mettete nomi di

parole chiave di javascript quindi lett non usatelo c'è bar lett non usatelo ok piuttosto che vedremo four e vedremo altre parole chiave vedete che il quartiere proprio errore non utilizzate isner all outlet che non è non è consentito usarla quindi c'è una delle parole chiave che non dovete usare e col conti a darmi problemi però quindi non utilizzate queste parole chiave è Altra cosa cercate di scrivere i nomi che siano intuibili ok perché queste variabili riprendere più volte nel vostro nel vostro programma non potete avere una roba così ok dovete avere appunto un nome utente

dichiarazione variabile nuova che togliamo questa roba qua la variabile migliore che possiamo scrivere è una cosa tipo del genere variabile utente piuttosto che le età ovviamente no accenti let cognome variabili così vanno bene alla peggio Come vi dicevo let nome utente specificata a questa parte possiamo andare avanti allora così abbiamo dichiarato una variabile ora la iniziali siamo abbiamo il nostro nome mettendo uguale e io metto giustamente il mio nome ok così stiamo inizializza ndaw una variabile ovvero che quando andiamo a dichiarare una variabile stiamo prendendo una scatola ok immaginatevi un pacchetto amazon Quando mettono lì

la scatola per il vostro park quando metto la scatola per la vostra spedizione e la mettono solo lì la stanno in la stanno dichiarando la variabile stanno dichiarando la scatola quando invece ci mettono dentro del contenuto la stanno iniziali zando ok quindi una scatola con dentro il contenuto è inizializzato se adesso andiamo a mandare a schermo vediamo qua vedete che ci chieda il mio nome ok qual è la differenza tra var e lett in realtà Non vi spiegherò la vera differenza tra vare lett sappiate che si può scrivere o var nome all at cognome il

fatto è che var è una parola chiave di inizio javascript mente lett è stata aggiunta negli ultimi anni è consigliato utilizzare lett non voglio neanche entrare nel merito del perché non perché non dovete farlo perché dovete farlo utilizzate let quando dovete definire una variabile e basta tanto vara non si sa più forse lo vedrete ancora in giro Con andres a cercare soluzioni seguente codice abbastanza vecchiotto potrebbe capitarvi possibilmente cercato di utilizzare le non voglio darvi questa informazione aggiuntiva perché non vi serve a niente saperlo ormai si usa let continuate a utilizzare lett come possiamo aggiornare

una variabile molto semplice riprendiamo il nome della variabile senza ridefinirla ok quindi se volessi così mi darebbe errore mentre invece aveva in Approfitto iscriversi vara due volte bar cognome uguale qualcosa e var cognome uguale qualcos'altro var non mi darebbe errore ok mentre le celle temi da errore perché non possiamo definire non possiamo di che era una variabile più volte non ha senso quindi questo è uno dei motivi per cui non si usa più varrà dicevo se vogliamo aggiornare una variabile ci basta semplicemente riprendere il nome della variabile adesso che ce l'abbiamo E assegnargli un nuovo

un nuovo valore quindi noi salviamo e vedete che ci da luca questo perché noi l'abbiamo dichiarata e subito inizializzata con edoardo poi veneto senso c'è mela giorni con luca questa è la potenza delle delle variabili ovvero che noi stiamo andando veramente a creare una scatola che può contenere una serie di valori ma che nel tempo sono mutabili quindi è una cosa molto comoda considerato che lavoriamo e non sappiamo effettivamente cosa succede Durante il corso del programma 15 dall'elasticità giusta per poter per poter programmare quali sono i tipi di variabili allora i tipi di variabili possono

essere numeri in questo caso potrebbero essere degli interi per esempio 34 oppure potremmo avere dei flop non con la virgola ma quel punto il flop sono i numeri con la virgola ok gli interi sono letteralmente gli interi i flop sono i numeri con la virgola attimi altrimenti abbiamo le stringhe le Stringhe non sono altro che testo io prima ho scritto il mio nome questa di testo ok se noi lo scriviamo così ci dà errore quindi vedete ci dà errore cioè non ce lo può prendere quindi vedete lui cerca una referenza come se doardo fosse una

variabile quindi tutte le stringhe di testo fosse anche la gala divina commedia tutto ciò che è testo di qualsiasi genere deve essere tra singoli a pc o doppi apici questa è una si chiamano Stringhe quindi stringhe di testo abbiamo i valori booleani booleani ball and honey o booleano beh in inglese boolean abbiamo i bulian boolean è sì o no truffe falls vero e falso può esser through o forse perché noi dovremmo avere dei valori che sono tuo falls un esempio palese potrebbe essere la variabile is on line magari noi stiamo aggiornando e volete sapere siamo

su telegrammi insieme volete sapere se io sono online Probabilmente la spunta che mi la spunta verde che vi dice se io sono online o meno è legata a una variabile is on line quindi severe che io sono online through il programma telegram ci metterà l'asp mi metterà la il pallino verde sulla mia immagine e voi saprete che io sono online nel caso fosse così fa dei controlli voi vi logate is on line edoardo falso e quindi non fa niente e voi sapete grazie a questa cosa che io non sono Online quindi magari evitate di iscrivermi

gli array e gli oggetti li vedremo meglio prossimamente ma un array altro non è che una collezione chiamiamo la collezione di dati allora una collezione di dati un array si apre con quelle parentesi quadre ok parentesi quadre e possiamo contenere veramente abbiamo una collezione di dati infinita di ciò che ci serve potremmo avere una collezione di teri per assurdo ok mettiamo causeranno giusto per farvi Vedere no quello che potremmo avere o potremmo avere una una collezione di nomi magari luca potrebbe essere una classe questa avevo io dei compagni siamo a luca si ce l'avevo e

abbiamo il buon vicino quindi questa potrebbe essere classe quarta ok classe quarta ci sono solo luca duarte gino gli altri sono stati maledettamente bocciati quindi questa è una collezione di dati e ha senso per Prendere i dati da gli array allora studio comando a schermo se io qua amando a schermo vedete io mando a schermo ci dà tutto ci da luca edoardo e gino ma ci mette questo numero vicino ho fatto rima con giro tra l'altro voglio che apprezziate il fatto allora abbiamo 0 1 e 2 allora perché non è uno due tre perché gli

array partono e questa cosa mi succederà su qualsiasi linguaggio di programmazione che farete partono a Contare da zero quindi questo è zero questo è un a queste due questo numero qua si chiama indice o lo troverete in inglese come index quindi quando noi dobbiamo andare a mandare a schermo un numero specifico dobbiamo fare parentesi quadre ancora e mettiamo dentro l'indice in questo caso voglio mandare a zero e che cosa ci fa uscire stoppate il video rispondete avete ragione ci manda schermo luca quindi se io voglio mandare a schermo Anzi li faccio questo esempio questo esempio

qua è fuori di testa perché manda sempre i principianti a farfalle allora un due tre se io scrivo classe quarta 0 cosa ci esce cs1 se io scrivo 2 poi vi aspettate che esca due no esce 3 ok quindi mi raccomando fate queste prove ricordatevi che due è il terzo elemento è quindi qua s3 questo è l'esempio più infame che io potessi farvi però vedete abituare Perché gli indici non sono la stessa cosa degli elementi e quindi vi ho fatto vedere come tira fuori gli elementi da da gli array arriviamo agli oggetti gli oggetti sono

una rappresentazione programmatica chiamiamola così nel mondo dello sviluppo di ciò che esiste nella realtà che cosa voglio dire voglio dire che se noi abbiamo un cane e un cane fatemi togliere questo noi abbiamo un cane e il nostro cane intanto apriamo L'oggetto cane l'oggetto cane si apre con le parentesi graffe ok per chi non lo sapesse dovrebbe essere al tgr maiusc e accentata fatemi vedere ok automaticamente poi vela chiude velo chiude usc il nostro cane ha chiaramente un nome anzi non mi trovo non mi trovo a mio agio col va beh sì ok mettiamo una

persona abitava una persona persona led persona io non so i dati dei cani allora una persona chiaramente un nome in questo caso è una stringa io Sono edoardo abbiamo un cognome e io sono chiaramente un random faccio random di cognome virgola abbiamo un codice fiscale che mettiamo totalmente randomico ok questo in codice fiscale più di sedici caratteri ma pazienza abbiamo potremmo avere una città di nascita potremmo avere potremmo avere svariate potremmo avere svariate cose a giusto serve magari altri tipi di dati potremmo avere un'età che attualmente sono 28 andiamo giù Facciamoci b anzi colori preferiti

colori preferiti facciamo così facciamo un array ok e magari mettiamo blu non lo so raga facciamo nero e facciamo grigio che palette bella scura ok allora che cos'è che cosa abbiamo fatto abbiamo fatto una rappresentazione reale con dati falsi di una persona che si desume esista nella realtà in questo caso è quindi una persona con il nome di edoardo il cognome e random in codice fiscale è il seguente la città di Nascita non la sappiamo mettiamo milano per l'età è 28 e i colori preferiti è un array ok anziché avere colore preferito 1234 che diventerebbe

troppo non è scalabile una cosa del genere abbiamo un array che contiene un numero indefinito di colori un nero e grigio ok quindi l'oggetto vuole essere appunto una rappresentazione in codice di ciò che potrebbe essere una persona un oggetto reale Quindi se vogliamo andare a schermo il nome di questa persona a noi basta fare persona punto nome quindi il nome della facciamo che punto vuol dire della il nome della persona andiamo a vedere ed è edoardo se il mio voglio fare codice fiscale d'altro vedete che vsc ce lo suggerisce il codice fiscale di questa persona

è il seguente facciamo un altro un altro esempio andiamo a prendere colori preferiti ma io voglio sapere il suo Secondo colore preferito qui ne abbiamo persona appunto colori preferiti e poi mettiamo l'uno in questo caso vi ho già fatto una combo tra array gli oggetti vedete che il suo secondo colore preferito è nero ok questa è l'introduzione agli oggetti parliamo di tipizzazione dinamica javascript a differenza di altri linguaggi di programmazione penso a time script mi viene in mente o java se non mi sbaglio A differenza di questi linguaggi di programmazione quando andiamo a dichiarare una

variabile non siamo costretti a dichiarare il tipo in questo caso facciamo così e mettiamo sempre qua luca ok poi abbiamo qua persona automaticamente questa variabile assume facciamo time of persona assume un tipo ma non è che qui abbiamo scritto let string severi vate string è la stringa di testo o let Bulian olet number o cose del genere abbiamo semplicemente detto mi aprì una scatola ok denominata persona e dentro cimenti qualcosa benissimo ma che tipo è che tipo è questa scatola se io voglio sapere di che tipo è questa scatola è di tipo stringa effettivamente è

tra pc se io mettessi 500 come potete vedere è tipo number qual è la cosa bella che non solo noi non definiamo il tipo della variabile ma cambia col tempo quindi si faccia un Persona quale 500 guardate un po ci dà al number queen è talmente elastico che ci permette di cambiare il tipo in corso senza essere strettamente collegati alla tipizzazione che abbiamo scelto perché non c'è ora quando andremo avanti né coi vari corsi del canale avremo a times script che io apprezzo particolarmente seppur javascript ci da questa libertà times che si basa su su

javascript seppure si basa su questa libertà diciamo che in fase di compilazione del Codice è meglio avere un secondo controllo quindi il fatto di avere qua la tipizzazione ripeto quindi una stringa ci aiuta a capire meglio ed evitare gli errori prima che noi andiamo a verificare il codice perché automaticamente ci dice guarda che tu hai definito una variabile stringhe e invece hai messo un numero quindi l'elasticità di javascript è bella ma anche i suoi anche i suoi contro quindi Vi dovete ricordare poi con cosa state con cosa state lavorando arriviamo alle costanti le costanti ovviamente

sono dei nu sono dei valori che non devono cambiare nel tempo ok quindi non devono cambiare nel tempo per svariati svariati motivi potrebbe essere l'indirizzo del nostro database quindi stiamo lavorando abbiamo il nostro database dove salviamo tutto quell'indirizzo non cambierà e vogliamo che sia costante di conseguenza lo Sappiamo in una costante al team di chiunque potrebbe essere in grado nel programma di cambiare il codice invece in questo modo fatemi andare a schermo veri temi qua c'è luca ma se io provo a fare persona uguale gino vedete che ci dice che non possiamo perché non possiamo

più assegnare altri valori ad una costante e questa è la forza delle costanti quindi vi dicevo sappiamo qualcosa di tipo database due Punti host appunto quello che volete noi non possiamo andarlo a cambiare magari nel programma diciamo a cavolo siamo non ci ricordiamo c'è un persona uguale qualcos'altro e abbiamo perso per sempre il riferimento al nostro al nostro database dentro il programma e quindi le cose non funzionano più quindi il valore delle costanti resta appunto immutato e poi quando comincerete a programmare mi verrà Con l'esperienza vi verrà più più facile capire quando avere un valore

costante e quando no allora questo era un introduzione neanche tanto breve alle variabili noi ci vediamo a noi ci abbiamo nel prossimo video dove andremo a parlare letteralmente di numeri e operatori quindi un'introduzione basica alla matematica in javascript quindi stiamo guardando ripeto quelli che sono tutti i building blocks e le fondamenta di di javascript Mi raccomando continuate a praticare perché sono tante informazioni insieme ma non sono neanche complesse semplicemente vi risultano difficili perché la prima volta che vi immergete molto brevemente in un linguaggio di programmazione niente continuate continuate continuate vi ricordo che c'è il mio

gruppo su telegram il canale per restare aggiornati con il canale e il gruppo per condividere con altre persone che stanno Seguendo i corsi vi ricordo che gli abbonamenti sono aperti se volete supportare ragazzone di questi corsi io ringrazio e la prossima ciao ciao un buongiorno a tutti bentornati episodio il numero tre del corso di javascript quest'oggi andiamo a vedere matematica di base in javascript quindi guarderemo numeri e operatori allora quello che andremo a vedere è il seguente i vari tipi di numeri ok per poi scoprire che in realtà è tutto number vedremo un Esempio di

metodi che possiamo usare sui sui numeri come convertire un qualcosa in number di solito stringhe gli operatori basici la precedenza degli operatori gli operatori di incremento e di decremento gli operatori di assegnazione operatore dico e gli operatori di comparazione allora i numeri che possiamo utilizzare sono svariati gli interi che sono 43 meno 43 e zero i flop che dovrebbero arrivare se non mi sbaglio col punto fino a 7 Decimali se non erro e poi ci sono i double che se bisogna osservare fino anche a 10 passa sono molto più precisi poi abbiamo bagaric essere uno

hoc tale 16 male li lasciamo perdere per ora questo per dire che in realtà però per javascript è letteralmente tutto un number quindi se io scrivo così il console log typeof mettiamo numero da se faccio vedere e mandiamo a schermo ci la number se io metto un flop Ci dà un number vedete se io metto un double ci dà un number quindi in realtà possiamo avere diversi tipi di numeri è importante sempre stiamo usando qualcosa di binary un esadecimale un da un flop o un intero è importante saperlo a livello matematico però in realtà per

javascript è tutto number quindi state tranquilli che non dovete imparare a dividerli imparate vi ha imparate a distinguerli e siete a posto allora un e un un esempio Di metodo interessante ok poi guarderemo più avanti altri metodi è per esempio to fix ter se noi abbiamo una cosa del genere ok ne facciamo così e facciamo numero punto to fix ok vi dico che me lo dà to face e che bisogna mettere quanti decimali vogliamo dopo la virgola andiamo a vedere e cir a 3.46 quindi molto semplice ovviamente cielo c'è la rotonda noi possiamo avere 4

facciamo così e vedete to fix è un bellissimo esempio di metodo che possiamo utilizzare sui numeri come possiamo convertire qualcosa di solito una stringa in un numero se vi faccio così faccio così ho 43 quindi se io vado a fare type of numero guardate abbiamo una stringa non abbiamo un numero tuttavia è un numero questo e 43 no è un numero di una stringa quindi Se noi andiamo a fare per esempio numero anzi ve lo faccio ancora no ma andiamo a schermo numero voglio far vedere questa cosa facciamo 43 più 3 a livello logico voi

mi direte che fa 46 e invece no fa 433 questo perché diventa tutto una stringa quindi questa questo più è una concatenazione che vedremo nel prossimo episodio delle stringhe con catena una stringa e questo viene trasformata in una stringa quindi diventa una stringa In cui c'è scritto esattamente questo allora come facciamo noi abbiamo un una stringa e un numero effettivamente un number ottenere 46 facendo così prendiamo questo facciamo number ok number numero più 3 andiamo a schermo abbiamo il nostro 46 questo perché con number mettendo qua numero lui va a togliere questi fa Diventare il

43 non una stringa ma il numero 43 e poi li aggiunge il 3 abbiamo il nostro 46 guardiamo i nostri primi operatori intanto i nostri primi operatori teniamo qua numero sono i classici insomma addizione sottrazione quindi allora sono addizione sottrazione moltiplicazione divisione scusatemi resto e potenza questi qua vi faccio solo vedere un esempio ovviamente adesso abbiamo appena fatto abbiamo 43 p5 fa ovviamente 48 vi Propongo un esempio solo col meno ok fa 38 proviamo a fare invece 40 diviso 5 questo ve lo voglio spiegare 40 diviso 5 fa chiaramente 8 efficaci siamo tutti ma invece

questo questo è il resto quindi qual è il resto della divisione tra 40 qual è il resto della visione di 40 e 50 ok quindi questo ci dà il resto della divisione perché 5 per otto fa 40 senza resto se noi mettessimo 43 magari andiamo a vedere il resto Della divisione e tre una cosa molto se una cosa molto simile anzi la stessa cosa si può usare quando vogliamo sapere se un numero è pari o dispari quindi quando un numero c.da diviso due quindi possiamo far tranquillamente così quando un numero quando il resto della divisione

di un numero di fratto 2 c da un numero diverso da zero e dispari effettivamente vero quando un numero è pari ci dà resto 0 di conseguenza lo potete capire è zero molto spesso uno Dei primi esercizi che si dà da fare o anche nelle classi v danno è infatti un programma che trova la differenza tra un numero pari numero dispari quindi voi avete una vostra variabile col numero la mettete automaticamente fate il vostro re fate il vostro asso della divisione e poi andremo avanti con i condizionali nei prossimi episodi se il resto è zero

mi scrivi paris e il resto è uno mi scrivi è diverso da zero mi scrivi il numero dispari molto semplice queste la Potenza è però alla tralasciamo la precedenza degli operatori allora se noi scriviamo una cosa del genere più per due anzi c'è una cosa così se non facciamo una cosa del genere come viene come viene risolta questa espressione vediamo un po risultato ci da 67 a qualcuno potrebbero non tornare i conti la precedenza degli operatori è esattamente come quella delle espressioni quindi divisione e Moltiplicazione hanno la precedenza su sottrazione e addizione quindi noi abbiamo

ben 10 per due fa 20 20 più 42 fa 62 più 5 fa 67 il nostro risultato è 67 se ne volessimo sfruttare le addizioni che abbiamo dobbiamo prima fare così li mettiamo tra parentesi questa è letteralmente matematica delle elementari quindi non c'è difficoltà in nessun modo veniamo risultato 364 ok questo perché abbiamo 42 più 10 fa 52 x 25 fa7 qui ne abbiamo 52 x 7 e abbiamo Il nostro risultato proseguiamo e parliamo degli operatori di incremento e di decremento e la si faccia un bellissimo gioco e vi metto qua il numero 10 ve

lo mando a schermo abbiamo dieci invece se voglio far così ne facciamo numero numero più più guardate risultato guardate il risultato abbiamo 11 questo perché abbiamo mandato a schermo numero che numero era 10 ma prima che venisse Mandato a schermo lo abbiamo incrementato questo è un operatore di incremento così come questo è un operatore di decremento e ci tornerà utile in casi che vedremo più avanti questo è importante studente è variabile più più o variabile meno meno abbastanza semplice da da ricordare andremo avanti con gli operatori di assegnazione o per tre di assegnazione allora l'uguale

l'abbiamo visto ok quindi stiamo stiamo dichiarando la Variabile e fin qua ci siamo ma se ne abbiamo una cosa del genere questa cosa qua ci permette di andare a sommare direttamente alla variabile queen anziché scrivere numero uguale numero più 5 quindi fa 15 noi possiamo tranquillamente evitare di riscrivere tutto vi facciamo più uguale abbiamo il nostro 15 15 evita di scrivere un po di cose di conseguenza quindi se riprendiamo la variabile più Uguale stiamo sommando meno uguale sottraiamo e stesso discorso condivisione e moltiplicazione arriviamo alla parte un po più complessa di questa lezione e abbiamo

finito che sono gli operatori di comparazione allora operatori comparazione sono un pochino possiamo avere uguale uguale uguale oppure punto esclamativo uguale uguale allora quando ne abbiamo due uguali o tra uguali vogliamo applicare che un valore sia uguale all'altro c'è Differenza tra uguale uguale uguale wired us ve lo spiego ma quando abbiamo il punto esclamativo vogliamo vedere se questo elemento differisce ok vi spiego prima questi poi torniamo a questi questo semplicemente minore uguale allora che abbiamo 10 facciamo un numero numero minore di 11 ci darà trucida l'atro perché 10 ok numero 10 è minore di 11

se noi facciamo il contrario ovviamente ci dà falls Se facciamo facciamo così e mettiamo 10 c da true ma se io faccio così ci raffles e qual è la differenza noi stiamo dicendo il numero 10 è maggiore o se inverto minore uguale a 10 minore no maggiore no però è uguale quindi viene comunque verificata la condizione quindi minore uguale o maggiore o uguale parte da questo numero ok è uguale a questo numero o superiore o inferiore ok mentre questi invece sono sufficienti È inferiore è maggiore per quanto riguarda differenza tra questi due ve la spiego

così noi vogliamo vedere se il numero è uguale uguale 10 la 10a vero è uguale gol a dieci numero è diverso da 10 il nostro numero no perché a 10 è uguale a 10 ma se io metto 11 io metto scusate io metto 11 è il nostro numero diverso da 11 sì perché 10 qual è però la differenza tra questo e questo tra due uguali e 3 uguali perché se io metto qua 10 prima Celato through e adesso ci da true la differenza sta nel fatto che mentre uguale uguale va a verificare che il valore

sia uguale ok quindi in questo caso io vi faccio così vi metto sufficiente due uguali quindi abbiamo il nostro 10 che però una stringa è uguale uguale a 10 tecnicamente si perché 10 è uguale a 10 però questo è una stringa questo numero eppure ci da true perché lui prende il valore e diceva beh questo è Tecnicamente uguale a questo se noi vogliamo verificare che questo sia effettivamente uguale sia identico quindi sia un numero anch'esso e noi mettiamo 3 acida falls perché 10 come numero non è uguale a 10 stringa ok sono semplicemente uguali uguali

ma non sono uguali uguali uguali che non sono identici sono identici solo ed esclusivamente se io o un altro 10 che però è come numero se metto 11 ovviamente se non è Uguale quindi questa è la differenza tra il comparatore identico e il comparatore è normale ok è la stessa cosa si applica sul comparatore di negazione e il comparatore identico di negazione questa era un introduzione brevissima alla matematica di javascript noi ci vediamo nel prossimo episodio dove andremo a parlare delle stringhe e c'è un pochino di cui parlare poi sono andremo quei metri con gli

array e la strada è ancora lunga io ringrazio per Essere bassi con me vi ricordo sotto in descrizione c'è canale telegram se volete restare aggiornati su tutto gruppo telegram per parlare con altre persone che seguono il corso abbonamenti per eventualmente scrivermi in privato supportando il canale e poi c'è il link al mio shop amazon dove consiglio piano piano sto aggiornando vari libri che vanno anche oltre la programmazione quindi se volete leggere roba di business di start up di produttività e Quant'altro potete trovare tutto lì io vi ringrazio nessuna prossimo episodio ciao ciao un buongiorno a

tutti bentornati episodio numero 4 del corso di javascript oggi andiamo ad attaccare le stringhe c'è un po di cui parlare ci sono cose interessanti che andremo a dire allora scaletta del giorno come creare una stringa singoli a pc o doppi apici far le schede caratteri con catena le stringhe numeri contro stringhe Template literals in se sarà un episodio veloce ma come ho detto sono le fondamenta di javascript però c'è perciò c'è un po di roba da sapere allora come crea una stringa partiamo dal principio let testo uguale e facciamo la nostra stringa ciao sono una

stringa perfetto fin qua abbiamo la nostra stringa ok quelli che vedete qua sono cuozzo noi in italiano sono singoli a pc e doppi apici mai giusto per anche in inglese perché se guardate documentazione un altro Sicuramente non parlano di apc ma premoli single quad o double cons potete scrivere la vostra stringa sia così con i singoli a pc che con i doppi apici non potete mischiare ok quindi è a vostra scelta la vostra scelta come volete fare la stringa tuttavia vi rendete conto adesso vi faccio vedere che se voi avete la stringa coi doppi apici

quando scriviamo parole con l'apostrofo non abbiamo problemi ok vedete che qua non c'è alcun Problema tuttavia se noi mettiamo il usiamo i singoli apc vedete che ci sono dei problemi il mol in cui possiamo farle schemi dei caratteri vi faccio vedere è callback slash che sarebbe quello sopra tab così va in escape e vedete che non ci dà alcun tipo di problema quindi diventa comodo se usiamo i singoli a pc magari se dobbiamo fare delle citazioni tipo vedete mettiamo questa parola così come Se fosse una citazione non abbiamo problemi se invece noi usiamo i doppi

apici diventa più semplice per noi utilizzare appunto eventuali apostrofi qua è scelta vostra potete fare si sa se in un modo che nell'altro quello che vi chiedo io è la consistenza cioè di non avere delle di non avere delle stringhe scritte in un certo modo e delle stringhe scritte in un altro modo ok quello che vi chiedo è avere un po di Consistenza scegliete quello che preferite e vi gestite le situazioni come come meglio credete l'abbiamo visto quindi come farle skate call back slash ok e passiamo velocemente a come concatenare le stringhe allora noi possiamo

concatenare le stringhe con il più ok quindi potremmo avere lett nome è il sottoscritto mettiamo sempre il nostro amico luca ormai un amico di vecchia data ciao sono Voi noi anche un catena la stringa fa ci scriviamo la stringa facciamo più mettiamo la nostra variabile in questo caso ok c'è una cosa del genere e possiamo tranquillamente fare console log e mettiamo il testo facciamo così salviamo andiamo a vedere apriamo il nostro logger e vediamo un po ciao sono luca questa è la concatenazione di una stringa in realtà è che dicevo di non usare Il bisogno

di non usare apc mischiati e invece ho fatto la stessa cosa dunque in questo modo ho fatto la competenza di una stringa ma con una variabile se dovessi concatenare semplicemente un'altra stringa verrebbe una cosa del genere non mettiamo qualche a per far vedere che c'è la differenza come potete vedere sto facendo la concatenazione delle stringhe questa una cosa molto comoda perché ci permette appunto di associare vedete una una ri Una risposta generica ad un nome preciso quindi il nome cambierà in base all'utente per esempio è quello che gli diremo e ciao sono oppure pensate nelle

mail generato automaticamente si passa da questo semplice concetto ovvero la concatenazione delle stringhe ed è una cosa che userete tanto proseguiamo arriviamo a numeri contro stringhe l'abbia fatto vedere nell'episodio precedente la differenza appunto tra number e string è l'errore Che spesso si fa ovvero spesso chi è all'inizio pensa che una cosa del genere possa dare un numero ok e poi ci sono altre casistiche uno si aspetta che una cosa del genere possa dare un numero in realtà ci dà una stringa perché in questo modo adesso lo sapete stiamo facendo una concatenazione ma anche una cosa

del genere e 56 più 56 non è che essendo dello stesso tipo Improvvisamente ci fa la somma ci va semplicemente 56 e 56 quindi nel caso in cui noi volessimo convertire questi i numeri dobbiamo semplicemente fare number di 56 ok più eventuali 56 normali equa avremo il nostro risultato ok 112 oppure al contrario se abbiamo dei numeri e vogliamo convertirli in stringhe ok cosa facciamo facciamo questo prendiamo il nostro 56 e lo mettiamo In una variabile ok lo togliamo da qua mettiamo numero punto to string vedete che ce lo da e improvvisamente noi otterremo 56

56 come risultato ok quindi una cosa che possiamo fare passare da interi a stringhe contu string o da stringhe a numeri con number né questo appunto è la differenza tra numeri e sting aveva visto come li possiamo concatenare e siamo a posto Arriviamo all'ultimo pezzo per quanto riguarda le stringhe poi nel prossimo episodio parleremo nel dettaglio di alcuni metodi interessanti di alcune funzioni che possiamo utilizzare sulle stringhe ma come introduzione alle stringhe mi sembra buona i template literals sono una delle cose più belle che sono state aggiunte negli ultimi anni allora e adesso vi faccio

vedere innanzitutto me li sono salvati perché Sulla tastiera italiana se non mi sbaglio non ci sono questo si chiama tic ok quindi se non vi se non se n'è uscita riprodurre in questo momento tic keyboard italia una cosa del genere vedete il back ticket si chiama back tic volevo prendetela qua velo salvate se non lo trovate io se non mi sbaglio è così era tilde che avevamo usato per css che il batik non si trovano e forse forse lo possono fare i mac credo ma su windows e non Sono mai riuscito onestamente per cui l'ho

sempre trovato e meno sono sempre incollato poi magari il limite mio però fate così vero salvate e siete a posto allora che cosa può fare il back tic e scusatemi i template i leaders i template literals permettono di creare di poter inserire in in una stringa delle funzioni delle variabili permette di evitare le schepp non dobbiamo più utilizzare è un altro tipo è come se fosse un altro tipo di di quad quindi Possiamo tranquillamente mettere tutte le cose che vogliamo vi ricordate e non fa differenza possiamo scrivere quello che vogliamo qua dentro in più bisogna

mettere variabili e funzioni adesso vi faccio vedere e diventa una cosa incredibile perché ne potremmo avere ad esempio facciamo un h1 o kay e qua dentro mettiamo una variabile come vogliamo mettere una variabile o una espressione facciamo pure facciamo dollaro aperta Chiusa parentesi graffe e mettiamo un chiamiamo l'elemento questo e questo lo chiamiamo lett testo e facciamo così ciao sono una variabile ok noi prendiamo che questo è uno mettiamo testo ok mandiamolo quindi a schermo facciamo documen punto body punto in html uguale elemento chiudiamo qui andiamo a vedere E vedete che ovviamente con quello che

ho fatto qui lo so semplicemente iniettando nel body non è questo che ci interessa ma è questo un vero che io ho preso il testo di una variabile l'ho inserito in una stringa in questo caso in un template literals e me la sono cavata tranquillamente ciao sono una variabile potremmo fare bellissima ok quindi in questo caso stiamo facendo anche una una concatenazione di stringhe vedete Proprio abbiamo aggiunto beh che questo considerato stringa ma facciamo faccio vedere proprio il testo vedete abbiamo concatenato senza dover scrivere una cosa del genere di bo ciao sono anzi verrebbe così

scusatemi ciao sono una variabile variabile poi dovremo staccare qua a fare il più fare una cosa del genere mettere bellissima chiudere oppure se fosse una variabile più variabile e poi magari se avessimo altro Testo continuare con altre cose ok anziché far questo abbiamo una sintassi molto più pulita è molto più bella da vedere che onestamente fa fa il suo effetto e soprattutto ci permette di andare a capo senza problemi quindi possiamo gestire così html perché potremmo avere tanto html quindi averla html andare a capo in serie tante cose è veramente utile template literals e a

parte in generale sapere queste cose questo è ciò che vi salverà la vita Soltanto queste sono le basi questo invece proprio una salvezza dal mio punto di vista altre cose che possiamo fare sono delle sono delle funzioni per esempio iniqua potremmo scrivere tranquillamente due più 6 e come facciamo queste realtà possiamo fare tutto vedete quindi questa è la magia dei template literals ok nel corso del proseguo nel nostro corso lo vedremo utilizzato in tanti modi e chiameremo delle funzioni insomma Saremmo veramente tante cose io vi niente come al solito vi dico fate un po di

teste cominciate a vedere un po come si lavora con le stringhe perché nel prossimo episodio andremo avanti e lavoreremo con i metodi delle stringhe quindi useful string matthews vedremo un po di metodi interessanti per lavorare con le stringhe quindi continuato a fare la vostra pratica io mi ricordo per tre abbonamenti del canale se volete Sostenere la creazione di questi corsi c'è il gruppo su telegram per aiutarvi tra di voi che state seguendo i vari corsi del canale c'è il canale telegram per eventuali notizie oltre ai video ma anche per cose extra e niente vi ringrazio

per sé nostri come ancora una volta ne citiamo la prossima ciao ciao un buon giorno a tutti bentornati episodio numero 5 nel corso di javascript quest'oggi andiamo a vedere metodi utili da usare sulle stringhe Allora vediamo la nostra la nostra scaletta parleremo di cosa effettivamente una stringa come trovare lunghezza di una stringa prenderemo un carattere specifico prenderemo una parte della nostra stringa cambieremo il kage il che sarebbe maiuscolo minuscolo e andremo a cambiare intere parti di una stringa allora questo è questa la nostra variabile con il nostro testo questo è un corso di javascript completo

e aggiornato e useremo questo per Divertirci un po una stringa è un oggetto allora anche se abbiamo detto che una che questa è una stringa però per javascript una stringa è un oggetto essendo un oggetto ogni ogni oggetto ha dei metodi ok delle funzioni che possiamo usare per far qualcosa quindi non fatevi spaventare da quello che ho appena detto sappiate che lavorare con le stringhe ci dà la possibilità di usare dei dei metodi allora come troviamo la lunghezza Di una stringa molto semplice intanto però tutto in consolle blog console log e prendiamo la nostra stringa

punto lankes ecco qua andiamo a vedere il risultato andiamo qua apriamo la console zoomiamo e vedete che ci la 53 se la nostra stringa fosse semplicemente ciao salviamo e vedete che ci da quattro quindi 1234 perfetto è lunga 4 torniamo alla Nostra stringa e noi così possiamo ottenere la lunghezza di una stringa come possiamo ottenere un carattere specifico il carattere specifico si prende esattamente come se prendessimo un indice di un array quindi stringa lo trattiamo come un array e vedete che ci da q perché al carattere zero quindi differenza la lunghezza di una stringa quanti

caratteri sono quattro ed è vero ok ma se voglio prendere cia la cd ciao devo scrivere non 12 34 ma zero ok Importante allora la lunghezza di una stringa è quanti caratteri ci sono per prendere effettivamente questi caratteri dobbiamo utilizzare gli indici come gli array una cosa bella che possiamo fare quindi con zero prendiamo il primo carattere per prendere l'ultimo carattere ci basterà fare string appunto lankes meno 1 e adesso ve la spiego vediamo un po prendermi la o esattamente facciamo che noi prendiamo la cappa così Non potete sbagliare e vedete che è tutto corretto

perfetto ci prendeva k allora che cos'è questa stringa appunto lenz meno 1 la vedremo anche quando useremo gli array noi non possiamo sapere quanto è lunga la stringa ok così immaginandolo ma sappiamo che possiamo prendere la lunghezza di una stringa quindi se ne sappiamo che farmi tornare su chao se ne sappiamo che ciao è lungo 4 ok però io faccio stringa prendi 4 Vedete che ci dà problemi perché non esiste l'index quattro le reti non abbiamo 0123 quindi si desume che per prendere la si dice che per prendere l'ultimo carattere di una stringa noi prendiamo

la lunghezza della stringa ricordiamo ciao che era semplice era era lunga 4 ma ne sappiamo che parte da zero di conseguenza all'ultimo non sarà mai 4 ma sarà la lunghezza meno uno in questo Caso 4 meno 13 ed effettivamente ciao c zero e uno a due o tre all'inizio un po un po tricky da capire poi insomma una volta che ci fate la mano non è un problema è con questo abbiamo preso un carattere specifico a devo prendere una parte di stringa ne vogliamo prendere da javascript completo anzi da corso completo di javascript e aggiornato

allora ne andiamo a fare stringa punto index of andiamo qua mettiamo la nostra parte di stringa e voglio sapere da dove Comincia a corso andiamo a vedere comincia dalle 12 quindi se io faccio quindi ne sappiamo che dal 12 vediamo un po questo è 0 1 2 3 4 5 6 7 8 9 10 11 12 effettivamente qua comincia da corso effettivamente parte l'acqua ed al dodicesimo come facciamo a prendere solo questa parte di stringa ne possiamo fare tranquillamente slice ok quindi useremo slice allora andiamo a salvare quale Index corso lo chiamiamo così facciamo questo

e ci siamo salvati qua il 12 ok facciamo slice e andiamo qua a mettere index scorso c'è stato un piccolo problema vi ho tagliato perché non avevo messo stringa punto index of minava errore perché non avevo messo stringa punto index of quindi ricapitoliamo hynek scorso uguale a string appunto index of concorso animo quadra slice e diciamo slice in realtà ci sarebbe per mettere due valori ok che è il punto di Partenza ovviamente un index e quanto vogliamo tagliare io so che semplicemente voglio tagliare tutto da questo questo indice ovvero da dove trova corso in poi

quindi se andiamo a vedere cosa ci restituisce corso di javascript completo e aggiornato quindi con index of andiamo a trovarli inizio di quello che ci interessa e poi se non scriviamo nient'altro ci prende tutto il resto ok e con questo abbiamo preso una parte di Stringa altre cose che possiamo fare è cambiare per esempio ecco magari facciamo così questo è un corso di javascript non possiamo cambiare il keys lo vedete qua di una stringa e potremmo fare string appunto tu a perché vedete cielo da tu a perché facciamo così e noi salviamo e vedete che

ce lo da completamente maiuscolo perché sa perché vuol dire maiuscolo se io vado invece qua sotto e scrivo lower cayce qua o là cui la j maiuscola e Invece ci dà tutto minuscolo vedete quindi questo è la possibilità di cambiare il kage ultima cosa che possiamo fare è replace noi vogliamo fare replace quindi facciamo stringa replacement che ci aiuta e noi vogliamo sostituire la parola corso ok con la parola ciao tutto maiuscolo ok quindi mente questo è un ciao di javascript completo e aggiornato in questo modo siamo andati a sostituire Una parte di stringa quindi

per questo mini video sui metodi delle stringhe è veramente tutto è un'introduzione sa come lavorare sulle stringhe la documentazione poi vida nel dettaglio se volete guardare altre cose che possiamo fare lo sapete che non voglio darvi tutte le informazioni perché non ha senso ok e noi ci vediamo al prossimo episodio dove andremo a parlare di di array quindi dal prossimo episodio comincerò a parlare degli array Che abbiamo già visto ma li guarderemo nel dettaglio io vi ringrazio e vi ricordo che c'è il gruppo il canale di telegram gli abbonamenti per per chi vuole supportare il

canale vi ringrazio ancora e la prossima ciao ciao un maggiore a tutti bentornati episodio numero 6 del corso di javascript quest oggi guardiamo gli array finalmente ci siamo arrivati sono veramente importanti scaletta del giorno che cos'è un array come creare un array accedere e Modificare i dati in un array la lunghezza di un array e come possiamo prendere come possiamo passare rassegna tutti gli elementi di una re in una botte la sola convertire stringhe array ok dall'uno all'altro e viceversa aggiungere rimuovere elementi in un array allora io qua o due cose voglio che vi concentrate

prevalentemente su data allora che cos'è un array 1 array è un oggetto descritto con un oggetto lista ok come potete vedere è una lista Di valori quindi immaginate la vera mente come una lista di valori e il pane della casa delle stringhe essendo un oggetto in javascript anche lui dei metodi come potete vedere qua che poi andremo ad utilizzare come possiamo creare un array è veramente semplice letto const fate quello che dovete facciamo array magari così per evitare problemi aprite le parentesi quadre semplicemente al tgr e accentata se non trovate la la Parentesi quadra e

vi mettete a piazzare i vostri i vostri dati non c'è alcun tipo di problema fate la vostra lista chiudete avete il vostro array come possiamo accedere e modificare i dati di un array molto semplice noi facciamo così innanzitutto facciamo quadrata mandiamo a schermo e vedete che ci da tutti i nostri i nostri dati ovviamente come vi dicevo anche per le stringhe avevo già introdotto nei video precedenti si parte A contare da zero ok quindi la lunghezza qua e 5 la vedete ma e 5 partendo da vedete lankes e 50 1 2 3 4 ovvero 5

proseguiamo e come possiamo accedere ai dati ve l'avevo già mostrato semplicemente mettiamo qua l'index che ci interessa volete milano mettiamo 3 anzi facciamo quattro salviamo napoli se ovviamente vado fuori faccio 5 bel problema non esiste quindi ripeto la length la lunghezza e 5 ma si conta da Da zero in poi quindi la lunghezza meno 1 stessa cosa che abbiamo visto per quanto riguarda le stringhe quindi vediamo un po data appunto lankes ok e stiamo già passando al prossimo la lunghezza di un array data appunto lens meno 1 stessa cosa che mi ha fatto per la

stringa ci dovrebbe dare napoli esattamente molto molto semplice come possiamo passare in rassegna tutti gli elementi allora se noi facciamo così vedete che noi stiamo passando in Rassegna ad ogni elemento se vogliamo vederne di più dovremo scrivere ogni volta data virgola quindi data zero data virgola uno insomma è una cosa abbastanza poco poco veloce e poco automatica una cosa del genere perciò come passiamo in rassegna passiamo in rassegna con un four che guarderemo a breve nei prossimi episodi perciò non non diventate scemi attorno a questa cosa qua mi serve per Farvi vedere come funziona quindi

per ora non ve la spiego anche semplicemente una cosa che prendiamo è la data appunto lankes ok e poi facciamo i più più facciamo così console log sol punto log e mandiamo a schermo data con e allora velocemente cosa ho fatto ma non ve lo spiego nel dettaglio il four questo qua è un ciclo ci permette di eseguire più volte la stessa la stessa istruzione ovvero mandare a schermo questo e ci dice questo è un Contatore quindi il contatore parte da zero ovvero parte da qui perché se vi riguarda questi comincia a contare da zero

quindi parte da zero ovvero da qua e continui per tutta la lunghezza del della length essendo 5 vi riguarda e che c'era scritto length 5 come se fosse i5 e ogni volta che tu finisci questa istruzione riparti finché questa cosa è verificata quindi i più più quindi è uguale a 1 e minore di cinque si andrà Avanti così fino a che sarà 5 quindi torniamo co andata lens si fa così per ciclare un un array ovviamente così perché voi lo potete sapere che questo e 5 lo potete mettere a mano arco dato ma non ha

senso quello che volete sapere è data appunto life in modo che se qualcuno aggiunge palermo senza che voi lo sappiate non c'è alcun tipo di problema andiamo a vedere ed ecco qua che ci cicla anziché avere tutto insieme ha fatto la prima la seconda la terza la Quarta la quinta finché ha trovato cose quando ha smesso di trovare cose vedete che ha smesso ed è andato oltre queste brevemente come ciclare come ciclare gli elementi di una di un array ma poi non preoccupatevi che parleremo dei cicli veramente tra pochissimi episodi come possiamo convertire stringhe e

array quindi con split allora se noi facciamo se noi puliamo qua data togliamo questo facciamo così Mandiamo schermo il data e lo puliamo diciamo così e ne facciamo che data è uguale a città punto split e me lo split per quello che è il valore che vogliamo splittare ovvero la virgola vogliamo creare un array da questo e qual è il separatore la virgola salviamo e ci torna un bellissimo array lo vedete quindi ha preso la stringa è partito a questo ha detto ok il separatore è la virgola questo non lo conta perché sa che è

una stringa quindi questo non Conta gli apici non contano usando split il separatore è la virgola quindi prende tutti gli elementi vedete e ne fa un array togliendo le virgole quindi ogni cosa separata da una virgola è un è un elemento dell'array torniamo indietro perché noi potremmo fare la stessa cosa con le città quindi facciamo così facciamo che città è vuoto e semplicemente anzi scusatemi città non è vuoto città è data punto joint e con cosa miri giovani Vogliamo che siano separati in questo caso dalla dalla virgola poter mettere quello che volete andiamo a vedere

ho sbagliato scusatemi dobbiamo mandare a schermo città salviamo così e vedete che abbiamo una bellissima stringa e non è un array altrimenti ci darebbe la possibilità di aprirlo è una stringa separata esattamente come avevamo prima se noi vogliamo cambiare per assurdo mettiamo che voi siete persone da trattini vedete che non fa alcuna Differenza quindi questo è split split vuol dire da stringa ad array john vuol dire darei a stringa vediamo come aggiungere e rimuovere elementi in un array quindi push pop in shift e shift allora state un attimo calmi perché questa cosa qua fa venire

mal di testa a chiunque comincia allora mandiamo schermo intanto il nostro array vediamolo lo vedete sei elementi milano torino roma venezia napoli palermo e fin qui tutto bene cosa facciamo vogliamo Aggiungere una città per raggiungere una città per aggiunge una città in fondo quindi qua qua in fondo anziché scriverla nuova città non arriviamo qui e facciamo data punto push e noi vogliamo mandare a schermo firenze non firenze non faenza ma firenze vediamo qua e vedete che compare firenze come sesto elemento è quindi lunghezza 7 ovviamente il console o lo faccio sempre in fondo quindi potrei

fare un console og prima puoi far vedere che push e Vabbè comunque si capisce insomma prima erano in sei elementi dovevano essere elementi invece prima del del console log del dell'array o pushato un elemento e fin qui tutto bene ma se invece volessi fare pop facendo pop noi andiamo a eliminare l'ultimo elemento quindi abbiamo a vedere vedete che è scomparso è scomparsa palermo quindi scomparsa Palermo perché push aggiunge in coda mentre invece pop toglie dalla coda quindi se noi facciamo push andiamo a mettere qui un altro elemento ma se noi facciamo pop andiamo a togliere

questo elemento ok ora che sapete push e pop applicate la stessa cosa su anche shift e shift vi faccio vedere in shift mettiamo un valore in questo caso firenze vedete che ci compare firenze all'inizio se io invece faccio Shift e basta senza valore guardate un po scompare milano quanto scommettete scomparsa milano allora ricordatevi ricordatevelo in questo ordine ok bush e aggiungere pop è togliere ma è tutto in coda quindi push pop lavora in coda in shift shift lavora in testa anzi se proprio io ho previsto push pop perché sono quelli più semplici perché shift in

shift perché unscita in shift hanno lo stesso nome praticamente e bici si Confonde sempre quindi per ricordarci i fatti o push pop e so che un aggiunge uno toglie e poi c'è anche chi shift quindi in shift aggiunge e shift toglie ok quindi io la ragione così perché mi confondo sempre su questi mi confondo sempre ancora oggi sul fatto se ha scelto e toglie aggiunge quindi per me push pop a scelta in shift shift oppure lo potete far così comunque sempre prima aggiunge poi togli potreste fare in shift shift che immaginatevi una cosa Del genere

quindi queste nostre array quindi in shift shift lavorano all'inizio dell'array push pop lavorano alla fine ma voi sapete che mettete sempre prima aggiunge poi togli quindi ascit shift push pop scegliete voi come volete impararli basta che ve le ricordate oddio internet comunque ve lo ricorderà sempre come fare o ci sarà il quale ci sarà ancora gli aiuti quindi vedete vi aiuta però se ne imparate a memoria poi Arriva con la pratica però avere una piccolo piccolo e di tino mentale non guasta mai quindi video su gli array terminato abbiamo visto velocemente cose importantissime perché abbiamo

visto come aggiungere togliere gli elementi come splittare questo un po chi se ne frega abbiam visto come in passare in rassegna gli elementi come creare un array come modificare su quindi le cose veramente importanti le abbiamo viste ci Sarebbero tanti altri metodi che possiamo vedere facciamo così vedete che c'è una vagonata c'è un po di roba cioè con cut entry insomma c'è un po di roba che potremmo vedere ma non è non è importante queste cose le vedremo caso mai più avanti con con la pratica o con le altre con gli altri corsi noi andremo

a lavorare effettivamente con javascript per ora va bene così compito di oggi cominciate a far pratica cominciate a testare vedere se volete Tirare fuori degli elementi in particolare creare delle stringhe insomma fate pratica che sono importanti gli array e li troveremo veramente ovunque io vi ringrazio vi ricordo group canale telegram sotto in descrizione la mia pagina di amazon se volete dei libri sulla programmazione o produttività o altre cose in italiano e in inglese e poi c'è il link per gli abbonamenti se volete supportare la creazione di questi di questi corsi sul canale io vi Ringrazio

un abbraccio nella prossima ciao ciao un giorno a tutti bentornati episodio numero 7 del corso di javascript quest oggi guardiamo i condizionali c'è un po di cui parlare e non è nemmeno semplice l'argomento approcciandosi per la prima volta perciò attenzione mi raccomando cosa sono le condizioni in un programma vedremo ips statement else if ripasseremo gli operatori comparativi Che utilizzeremo appunto negli iv vedremo come innestare vari operatori logici queste sono importanti poi guarderemo lo switch statement alternare operator questo è veramente interessante allora cosa sono le condizioni potrebbe essere che noi abbiamo una situazione in cui ad

esempio vogliamo sapere se appunto la persona che voglia accettare è online o no questo esempio che mi viene più più semplice quindi noi potremmo avere una Condizione in cui vogliamo sapere se è online sì o no se online mi metti magari la spunta mi metti magari il pallino verde sullo schermo oppure scrivi e online se invece non è online scrive ultimo accesso alle oppure offline quindi questo potrebbe essere un caso in cui abbiamo delle condizioni va bene oppure tu entri in una pagina se la pagina l'utente che sta visitando questa pagina è autenticato la vedere

altrimenti rimane un altra parte quindi Come potete vedere l'utilizzo della parola se in questo caso iv in inglese lo utilizziamo abbastanza se se è così fai così altrimenti fai così da qui deriva appunto iv else cominciamo con un esempio abbastanza banale cominciamo così allora per scrivere iv per scrivere uno statement dobbiamo fare semplicemente iv aperte tonde in cui metteremo la nostra condizione e poi metteremo le le parentesi graffe allora questo sarebbe un iv completo quindi Mettiamo qua la condizione iv nome uguale uguale luca facciamo console og console punto log ciao luca els potremmo fare semplicemente

in un ex potremmo mettere ciao persona anonima ok noi salviamo andiamo a vedere andiamo qua vedete ciao luca perché giustamente il nome è uguale a luca Quindi questo è un banalissimo esempio di iv ed potrebbe esserci dei casi in cui abbiamo letto semplicemente leaf c'è il nostro programma va avanti ok essi succede una cosa aggiunge questa cosa magari alla variabile se invece non si verifica semplicemente continua col programma che potrebbe succedere che utilizzate del iv senza else non preoccupatevi invece se noi vogliamo fare la cosa del genere se si chiama Luca fa una cosa se

invece non non è così me ne fai un'altra potrebbe essere però che vogliamo mettere più più statement ok più condizioni in questo caso utilizziamo else if ogni volta che utilizziamo è il sifone possiamo avere infiniti volendo è ci mettiamo un altra condizione in questo caso il nome non mettiamo luca ma mettiamo marco ok e facciamo ciao marco e poi a sto punto facciamo un el finale Quindi possiamo possiamo avere tanti else if volendo va bene potrebbero tanti al sif con tante cose diverse scusatemi dopo lo faccio vedere meglio e poi abbiamo un ex finale dove

non dobbiamo metterla condizione quindi se il nome luca fai così se quindi ogni volta in cui vogliamo mettere una condizione dobbiamo scrivere else if mettiamo la condizione mettiamo quello che vogliamo fare mi dove c'è la finale è altrimenti se niente di quello che c'è Sopra è verificato altrimenti fai questo in questo caso è console punto log ciao persona anonima dunque vediamo qua a vedere luca l'abbiamo già visto quindi vediamo il buon marco salviamo vedete ciao marco perché effettivamente è entrato qua dentro ok ha eseguito questo codice è arrivato qua il nome luca nos alto il

nome marco sì ciao marco se io cambio e faccio marce o che non se lo esistesse come nome ciao persona anonima quindi entrato è andato Qua no mago luca no vado avanti è il siff non uguale marco no allora qualsiasi cosa sia non mi interessa mando a schermo questo questo messaggio vi dicevo che possiamo avere infiniti else if perché potremmo tranquillamente mettere come uguale uguale antonio e potremmo andare avanti così all'infinito ok quindi questa è l'idea del sì ogni al simt ci permette di avere una condizione mentre invece la finale è Se tutto quello sopra

non si è verificato fai questa cosa vediamo brevemente un ripasso sugli operatori comparativi come avete visto io ho utilizzato uguale uguale allora prendiamo un attimo cancelliamo tutto e prendiamo semplicemente il numero dei quindi numero uguale uguale facciamo vinte la vi ricordate che numero e cominciamo da maggiore minore facciamo mitra sufficiente a schermo ok va bene una cosa del genere quindi non Ho voglia di stare a metà dei messaggi troppo complessi il numero maggiore di 20 fi ok anzi facciamo els console log non va bene va bene così si capisce alla svelta quindi 15 e maggiore

di 20 andiamo a vedere non va bene quindi avete visto che questo è il maggiore questo è il minore ci darà che è tutto ok perfetto abbiamo maggiore uguale minore o uguale diventi magari mettiamo 20 perché voglio far vedere l'uguale 20 È minore o uguale di 20 sì perché è almeno uguale stessa cosa per maggiore uguale perfetto fin qua non c'è un problema abbiamo uguale uguale quindi è 20 uguale uguale a 20 è uguale gola 20 si è 20 diverso da 20 no vedete non va bene perché 20 è uguale a 20 mentre legge per

questo se vi ricordate guardava anche che il tipo fosse corretto quindi se io faccio così E metto questo 24 string diventa una stringa e io faccio 20 è uguale uguale 20 e ci dice sì 20 è uguale uguale 20 ma se le facciamo tre uguali come avevo fatto vedere precedentemente ci dice di no questo perché eventi o uguale a 20 ma questo 20 a un'asta venga questo 20 è un numero ok quindi questo uguale uguale uguale controlla anche il tipo se noi facciamo così ci dirà che è ok perché 20 stringa non è uguale uguale

uguale a 20 numero e questo era il ripasso degli Operatori come vi dicevo quello che possiamo fare in base a quanto è scritto qua possiamo innestare degli quindi potremmo avere un iv ok allora iv mettiamo con magari 15 e facciamo se il numero è minore di 20 entry qua dentro va bene e poi vogliamo fare un'altra cosa bisogna sapere tutti i numeri pari minori di 20 dei primi a sapere quali sono tutti i numeri pari o dispari quindi se un numero è minore di 20 mi Controlli sia pari o dispari perché magari sopra il 20

non ci interessa quindi il numero facciamo il resto diviso due uguale uguale a zero facciamo console log numero pari altrimenti facciamo un else non dobbiamo fare il siff perché se non è pari e dispari quindi se non è zuppa è pan bagnato els con sul log andiamo qua numero dispari Quindi andiamo un po a vedere il risultato facciamo così ci dovrebbe dare un numero dispari 15 e dispari assolutamente sì proviamo col 16 numero pari proviamo con lotto magari non ci credete ecco qua numero pari quindi che cosa abbiamo fatto abbiamo detto che valgono solo anzi

primo a mettere qua 21 ok vedete quando succede niente quindi cosa abbiamo detto innanzitutto Mi fai un primo iv vogliamo controllare che il numero sia minore di 20 per una qualsiasi ragione non so perché dovremmo controllarlo ma in questo caso lo facciamo il numero è minore di 20 in questo caso no ma come abbiamo fatto prima sì quindi se dice minore di 20 sì adesso entry qua dentro abbiamo un altro iv il numero è pari questo quando leggiamo con è pari in realtà è il resto della divisa il resto della divisione di 16 diviso due

a zero quindi Se da resto zero è pari ma noi cioè una volta che lo leggete così vuol dire se volete sapere se è pari o meno quindi io ve lo traduco direttamente è pari questo numero il numero pari altrimenti se non è pari e dispari quindi il numero è per forza di spari e questi sono potete andare avanti all'infinito così a potreste fare altri iv all'interno con il siff potete veramente andare avanti all'infinito andiamo a vedere invece gli operatori Logici and or e note ovvero è uguale questa condizione e questa condizione sono verificate oppure

questa condizione o questa condizione sono verificate oppure questa condizione non è verificata andiamo a vedere allora facciamo iv mettiamo un el semplicemente qua per sicurezza allora il numero è minore di 20 and numero Lanciamo il numero resto numero resto due uguali uguale zero ok quindi quello che stiamo chiedendo qua il numero metà els non ci servono solo fare delle console ocse non butta schermo niente si capisce alla consolle punto log facciamo ancora ok diciamo così facciamo così allora ho detto il numero è minore di 20 si innamoro del risultato ora ci dà ci dice ok

quindi xvi è minore Di 20 sì e 16 è pari sì quindi ok altrimenti per console punto log la mettiamo non va bene se io metto qua quindi ci facciamo così vediamo un po si dice che non va bene perché perché noi vogliamo con questo doppio e commerciale vogliamo che questa condizione e questa condizione sia verificata quindi vogliamo che il numero sia minore di 20 e Che sia pari 15 è minore di 20 si è pari no quindi questa condizione con end non è verificata se io metto 14 ovviamente ci dà tutto in check ma

se metto pari si emette un numero 22 22 non va bene perché 22 non è minore di 20 quindi già non va bene però è pari ma noi non interessa perché con end tutto deve combaciare ok altrimenti possiamo andare con or in questo caso possiamo avere un numero ora si fa così Ok quindi ogni volta che fate lor dovete riprendere la condizione voi potreste scrivere vi faccio vedere un attimo qualcuno potrebbe scrivere iv numero uguale uguale uguale 2 or uguale uguale tre cose del genere così non va bene a mente che ci dà errore vedete

che ci da eroe perché ogni volta dovremmo scrivere numero uguale uguale 2 oppure numero uguale uguale 3 oppure numero Minore uguale eventi cose del genere non possiamo tralasciare la variabile ok quindi questa cosa è importante stiamo dicendo color vogliamo sapere intanto vi faccio vedere il risultato stoppate un attimo ditemi se esce ok o non va bene andremo a vedere ci dà ok come mai ci dà ok il numero è minore di 20 no oppure il numero è pari sì quindi con loro e basta che una delle condizioni sia verificata affinché possa entrare quindi se invece

metto 23 ci dirà che non va bene perché Il numero non è né minore di 20 ok ma non è nemmeno pari se noi invece mettiamo 15 che noi mettiamo 15 ci dirà che va bene lo stesso vedete perché il numero è minore diventi anche se non è pari ma il fatto che le doppie barrette ci danno loro quindi o è una cosa o l'altra a noi va bene lo stesso questo e questo è l'ora allora arriviamo a spiegarvi infine in not allora mi raccomando attenzione perché Il not salvaggio dunque per fare il not non

dobbiamo usare abbiamo detto che end è doppio doppio e commerciale poi abbiamo doppio questo qua invece ci basta usare nessun doppio ci basta usare un punto esclamativo ok col punto esclamativo vogliamo verificare che la negazione sia vera ok quindi facciamo vediamo qua delle parentesi e mettiamo dentro la nostra condizione e davanti Neghiamo la condizione quindi non è che abbiamo una sola parentesi e la neghiamo qua fuori ma dobbiamo fare la condizione del iv dentro mettiamo la nostra condizione e la neghiamo quindi nome uguale uguale luca andiamo vedere risultato non va bene perché perché noi vogliamo

sapere se il nome luca che qua è vero lo neghiamo è il nome diverso da luca e l'altra ci bastava raggiungerlo così ok però è il nome diverso da luca è il nome Noto luca quindi not è il nome not luca in realtà qua ci dice che è vero di conseguenza la voleva che risultasse diverso da luca invece questo qua è forse che nella condizione è il nome diverso da luca è la risposta a questa cosa è falso falso il nome non è diverso da luca ok essendo questa condizione è falsa non viene verificata e

viene verificata questa ok se io cambio e faccio luca così Perché ci dà ok perché nome è uguale uguale a luca il nome non è uguale uguale a luca quindi va bene luca il nome è luca no apple se noi la neghiamo al contrario diventa through di conseguenza questo iv diventa vero perché il nome non è uguale a luca con due u di conseguenza è tutto ok io spero di aver velo spiegato bene il note la negazione non è semplicissima da spiegare spero si sia capito stoppate subito il Video fatte delle prove con dei numeri

fate più test voi vi deve entrare subito in testa perché non è semplice sarkò pala di negazioni di altre negazioni di forze tra eccetera quindi stoppata attimo il video fatte delle prove con vari dati poi quando sarete in quando sarete nelle nei vostri progetti vi verrà molto più semplice è venuto in mente adesso una cosa che posso fare è una cosa che posso fare è questa veniamo così allora È l'unico modo in cui mi viene in mente per spiegarvelo bene allora is on line is on line allora quello che stiamo chiedendo qua è se la

persona l'utente in questo caso è online in questo caso la persona non è online e forse stiamo che questa persona non è online ed effettivamente non è online perché noi facendo così ci aspettiamo che is on line sia through ma negando la così stiamo dicendo questa cosa è falsa ed Effettivamente questa cosa è falsa quindi essendo is on line è falso quindi la persona non è online ma la condizione è vera capite perché noi volevamo sapere se la persona non era online ed effettivamente la persona non è online quindi abbiamo che console non è online

se con fosse stato through la persona è online ma noi vogliamo sapere se non è online qui andiamo a vedere la persona è online perché lui è online questo è falso questa roba qua a Là personale non è on line vero e lui dice no queste through allora questo non è verificato automaticamente si verifica questo fosse il modo più semplice che io conosco per spiegarlo che fortunatamente mi è venuto in mente adesso andiamo avanti auguriamo lo switch statement allora noi potremmo veramente andare avanti a fare else if tutta la vita ok e come potete capire

gli if sono comodi per via degli operatori logici ok sono molto comodi per queste cose ma se ne Avessimo letteralmente un nome ok torniamo sul nostro amico nome abbiamo un di nomi questo è un caso molto semplificato e abbiamo il nostro amico luca bene potremo avere nome uguale uguale luca poi potremo avere il sif e continuiamo a scrivere quindi è il siff scusate nome uguale uguale marco ve lo scrivo tutto perché voglio che vediate la differenza ok questo è importante nome Uguale uguale gino bam vado avanti poi sotto è il safe e potrei scrivere veramente

tutti i nomi ne stiamo ancora solo un altro uguale uguale anna e possiamo andare avanti veramente all'infinito capite che rim a scrivere tanto codice entra il nostro soccorso lo switch quando abbiamo un solitamente si usa quando abbiamo un valore specifico per questa variabile che non dobbiamo stare a fare and or not Eccetera questo è la cosa più semplice in cui possiamo usarlo possiamo andare a usare lo switch noi abbiamo fare switch devo mettere quanto la nostra condizione la nostra condizione è il nome ok ci arriva la condizione e noi facciamo solo quello che devo fare

cayce che immettiamo nel caso in cui il kage in cui il nome sia luca facciamo così due punti a capo console log diciamo così equa scriviamo ciao Luca ok poi facciamo brake poi ve lo spiego break poi nella capo e prendiamo un altro cage e facciamo tre magari tac tac commettiamo marco equa mettiamo gino e poi mettiamo un default allora che cosa abbiamo fatto quindi questo e lo switch e guardiamo risultato ha giustamente devo cambiare quanti abbiamo un bel problema ciao marco ciao gino andiamo qui ne vediamo un po ciao luca giustamente il nome è

luca vedete che il Codice rispetto a fare tutti iv else if else if il city su questo caso specifico è molto più semplice da vedere è molto più semplice da gestire si capisce subito per come è formata il codice si vede subito che luca marco e quello che succede dopo per ora chi se ne fregano interessa capire le casistiche in tempo breve ma l'abbiamo switch che è la parola la keyword che ci serve la condizione come se fosse un iv in questo caso abbiamo semplicemente il nome Apriamo le parentesi graffe e quando comincia a mettere

il case ogni cat che facciamo mettiamo la condizione che vogliamo ok se avessimo il numero tipo numero potremmo fare minore di venti minori di trenta maggiore di 30 e minore di prendere caso col nome il cash game luca sì mi fai questo il break e serve per evitare che il codice vado avanti qui nel momento in cui vede che è luca arriva qua chiude Tutto lo switch si chiude e passa oltre al resto del codice quindi avrebbe proposto la stessa cosa per luca marco e gino e poi a fine c'è il default intanto vi faccio

vedere marco salviamo tac ciao marco qua non c'è niente di qua tutto arco dato quella che prende la variabile a suo piacimento qualche e marco si allora mi saluta ciao marco facciamo gino per completezza andiamo qua ciao gino e poi c'è il default se il Nostro amico invece si chiamasse leonardo vedete cosa succede ve lo faccio vedere subito non so il tuo nome perché ho messo che un default il default è quella cosa che fai se non si verifica niente di tutto questo è un po come lens del iv els quindi il default due punti

a capo sufficiente righe di codice che ti servono guarda non so il tuo nome e questo è lo switch serve per avere serve per comprimere certe parti di Codice che sono veramente o così o così quindi abbiamo possibili valori che possiamo avere e li mettiamo in varie casistiche ecco la cosa che possiamo definire proprio la casistica mentre uno è si no cioè il siff o così o così e puoi fare un po di al sisma non è che vai all'infinito lo switch è proprio la casistica e le casistiche e raramente sono due sembrano delle casistiche

sono 3 4 5 10 20 quindi veramente sui c Usatelo per le casistiche mentre invece è il simulacro per è bianco o nero o al massimo grigio va bene proseguiamo arriviamo alternare operator ternari operator è molto comodo e lo potrete usare sicuramente nei nei template literals queens e ve lo ricordate abbiamo la nostra stringa con i tic e potevamo fare se vi ricordate così così così e poteva mettere le nostre espressioni o che poteva metter Variabili potevamo fare le funzioni e quant'altro diventa molto comodo oppure si può anche usare per quanto riguarda le variabili che

abbiamo qua una variabile e usiamo una condizione nella variabile non possiamo usare leaf ma andiamo mette una condizione velocemente facciamo così e scriviamo la condizione qua anzi riportiamo qua il numero così random portiamo il numero qua sopra e mettiamo 15 minore anzi scusatemi non 15 ma numero minore di 20 questa la nostra condizione punto di domanda quindi cercate di capire è il numero minore di 20 punto di domanda se sì mi fai una cosa in questo caso mi mandi a schermo il nome è luca altrimenti due punti rimane a schermo leonardo ok abbiamo qua facciamo

console log console punto log e mandiamo a schermo il nome da un po cosa ci compare compararci il signor luca quindi se noi Invece andiamo fare 21 andiamo a vedere bam abbiamo leonardo questa è un bel punto il ternario per eto'o è molto comodo da usare nelle variabili ma anche appunto da usare nei template literals quindi se voi avete un se voi state costruendo nel template è la summa un po di codice html e lo vedremo più avanti non durante questo corso ma durante la prossima playlist che faremo roba importante in javascript useremo tanto i

Tempi utili teras con dentro i ternani operator che vogliamo dire ok se se questa condizione è così mi metti a schermo questo pezzo di elemento html oppure mi fai qualcos'altro oppure mischi vco bentornato luca piuttosto che bentornato e cosa del g8 è ben tornato oppure benvenuto quindi se la prima volta che ti colleghi e benvenuto se la seconda bentornata tutte queste cose quale possiamo gestire facilmente col terna di operator dunque io so nato Veramente lungo per questo video però è importantissimo questo è uno dei pilastri fondamentali lo so me lo sto dicendo ad ogni video

di javascript però ripeto le cose che imparate qui adesso in questi video sono trasversali bene o male su tutti i linguaggi di programmazione magari qualcosa non c'è in altri probabili magari il tenere operator non c'è in tutti i linguaggi e la sintassi sarà diversa su alcune cose però a livello mentale Il modo di ragionare tutti i linguaggi di programmazione ragionano meno male allo stesso modo quindi imparate questo e siete a posto su python vhp tutto quello che volete li ringrazio per sé rimasti con me vi ricordo che gli abbonamenti sono attivi in descrizione trovate il

canale e il gruppo telegram se volete essere aggiornati o parlare quante persone che sono seguendo i corsi c'è la vetrina di amazon per consigli su libri Produttività sviluppo e quant'altro e niente io ringrazio e alla prossima ciao ciao bentornate al corso di javascript episodio il numero 8 oggi parliamo dei loop un italiano ne sentirete parlare come chick lit allora scaletta del giorno abbiamo introduzione vi farò un esempio pratico della vita reale perché ci servono i loop un esempio magari di codice guarderemo il loop for guarderemo come uscire dai loop con break come saltare un'interazione con

continui e Poi faremo wilde e il dubai allora esempio pratico su i loop quindi immaginate un libro ok poi prendete un libro e nella vostra testa senza chiederlo automaticamente lo fate a una pagina sì l'ho letta no allora la leggo quindi la il ciclo sta nel fatto di passare ogni singola pagina che trovate finché è arrivata la fine del libro ok ogni volta che la condizione è vera ogni Volta che trovate una pagina che non avete letto fate la vostra parte di college che leggi pagina ok immaginatevi una cosa del genere quindi la stessa azione

ripetuta hicks volte ok fino che risulta falso vero ci sono ancora pagine no chiudo il libro finisco eventualmente ne prenderò un altro e rivarolo il suo ciclo all'infinito perché ci servono i loop allora immaginate di avere un array Immaginate di avere un array del genere con dentro dei numeri tipo 23 13 34 56 99 101 e io vi dico fatemi un favore mandatemi a schermo uno alla volta voglio vedere staccati tutti i vari array ok tutti i vari elementi dell'array quindi una persona che non conosce i loop potrebbe fare console log array 0 ok poi

andiamo giù e facciamo 1234 quanti sono qua sono sei quindi tac tac Andiamo a 5 e andiamo a 6 noi salviamo andiamo a vedere il risultato f12 console andiamo a vedere non esso uno di troppo è vero non è solo di troppo scusatemi tac dobbiamo vedere perfetto una persona che non sa usare i cicli o i loop mi fa una cosa del genere quindi a manetta mi manda tutto schermo ora partiamo dal presupposto che noi non sapremo quanti sono gli elementi della reg potrebbe essere infiniti e voi Non avete voglia di mandare a schermo roba

infinita o che non sapete quanto sarà è semplicemnte è impossibile volta fatto che è maledettamente ripetitivo i loop ci vengono in soccorso adesso codice poi lo faccio vedere una sorta del genere e si fa così loop fine loop ok quindi abbiamo il nostro loop e qua dentro continuiamo a fare console log array va bene come a livello pratico lo faccio vedere subito animo creare un for ok si chiama four ovvero Sarebbe per tradotto letteralmente in italiano ok per ogni volta che succede questo mi fai questo quindi for andiamo subito mettere cons no dopo lo mettiamo

scusatemi mi sono lasciato tirare allora facciamo lett io uguale zero andiamo a mettere i minore di array adesso ve lo spiego è punto hanks e poi devo ammettere i più più sono tre le cose che dobbiamo mettere all'inizio definiamo iniziali siamo una Variabile la chiamiamo i poter mentre quello che volete h kw az quello che volete di solito si usa i e la faccio a partire da zero questo perché solitamente quando cominciamo a quando cominciamo da un array si parte da zero se avete zero altrimenti ma cruciale con il numero o meno uno meno qualcosa

quindi per comunità si parte da zero quindi questo è il contatore lei è una variabile che mettiamo a contare sull icona 012 punto e virgola Questa è la condizione ovvero finché i ovvero il contatore è minore di array length perché se vi ricordate ok l'array length è 6 ma in realtà noi prendiamo i numeri fino a 50 1 2 3 4 5 ok altrimenti se arriviamo a minore o uguale arriviamo al sesto che non c'è e ci dà undefined quindi la corretta la cosa giusta e fare al rail hanks e basta minore di array lenk

punto e virgola e questo è l'iter atore ovvero Quella cosa che ci fa pensate come pensate con tarda la mano ok la nostra mano è la iii è il contatore dobbiamo andare avanti fino alla lunghezza della dell'array ok e soprattutto i piu più è il contatore ovvero sono le dita che si alzano quando abbiamo finito un giro del ciclo quindi andiamo a mettere a schermo console punto log e noi abbiamo sufficiente a fare array apriamo permettere gli indici non mettiamo alcun numero mettiamo semplicemente i che Sarah e ho sbagliato qualcosa ma scusatemi parentesi quadre sbagliato

dicevo e non mettiamo un numero ma i sarà una volta a zero e quindi array 0 uguale 23 poi andrà avanti è zero minore di array lenka 6 sì mi fai questa cosa ovvero e mangia schermo array 0 che è 23 finisce i più più automaticamente quindi uguale a 1 è uno minore di array lenk si lamente schermo array 1 che è 13 i più più e due Minori del relais nksj quindi array 234 via discorrendo fino a 35 35 è minore di array light che sei sì allora mi mangia schermo array 5 che è

questo che questo non è sei lunghezze ma questo è 5 0 1 2 3 4 5 sì i più più è uguale a 6 e sei minori di array lenk no è uguale ma noi non abbiamo messo l'uguale vogliono solo le cose che sono minori anche perché altrimenti andrebbe a prendere un altro elemento che non esiste quindi è 6 Minore di belen che sei no fuori dal ciclo vai a fare altro ok quindi vogliamo vedere risultato sia l'acqua un errore avevo scritto solo array e non array ecco qua che remiamo tutti i nostri valori dell'array

stampati esattamente come vi ho detto e questo è il ciclo for ora ma se noi volessimo uscire ad un certo punto come facciamo molto semplice usiamo brake e abbiamo già visto in switch quindi ne facciamo console ogg allora facciamo che al primo Numero pari che mi trovi esci ok facciamo così quando trovi in numero pari e ci va bene anzi quando trovi quando trovi 56 esce cos'è più semplice iv array e uguale uguale 56 fai così e mi fai anzi lo facciamo di e lo facciamo in fondo perché vogliamo mandarlo a schermo poi dipende se

mettete il console log davanti l'ho Mandata schermo e poi uscite se lo mettete prima non lo manda a schermo questo è una una sottigliezza insomma uguale a 56 facciamo break quindi dovrebbe uscire così 23 13 34 56 salviamo perfetto arriva 57 basta non voglio non voglio andare oltre quindi brake ovviamente potete usare diverse cose dipende da quello quello che avete nella regio nell'oggetto quello che state facendo insomma è niente quindi uscite dal vostro look Andiamo avanti e facciamo continuo se ne facciamo continuo noi facciamo così e vogliamo saltare l'elemento questa volta non lo vogliamo mandare

a schermo ok quindi iv 56 facciamo continuo facciamo così e dovrebbe mandarci a schermo tutto tranne 56 perché abbia messo console o dietro se noi mettessimo qua ok ce lo manderebbe schermo qui andiamo avanti vedete che ha saltato 56 Stessa cosa se non dovessimo fare tutti i numeri pari melis alti ok quindi facciamo uguale uguale 01 34 56 facciamo magari 22 qui quindi dovrebbe mandarci a schermo solo 13 99 e 101 perchè abbiam fatto continua quindi non arriva nemmeno qua al console ho semplicente e paris si va avanti ma il prossimo alla prossima iterazione che

è 13 quindi vedetevi ha solo tredici 99 e 101 e questo è il continuo parliamo velocemente di ciclo wine and the wild Allora facciamo così allora per il wild e il duo e bisogna mettere l'inizia leiser quindi lei dobbiamo metterla fuori quindi lett e uguale zero facciamo un wild condition non è non è molto bella la sintassi non mi piace tanto la sintassi del wild e del 2 e onestamente la condizione è sempre minore di array punto lankes ok e facciamo console punto log e noi andiamo schermo array e poi devo mettere qua in fondo

i più Più va bene facciamo così salviamo e otteniamo esattamente la stessa cosa fin qua non c'è alcun problema qual è la differenza tra il while e il dubai il duo ale il seguente noi facciamo to mettiamo qua il nostro codice ovvero console log ok e poi qua facciamo mettiamo la condizione che è minore di array lankes ho dimenticato il while perdonatemi while ok quindi se noi abbiamo schermo andiamo a vedere Ripartiamo da qua allora facciamo così vedete che non cambia niente anzi facciamo mettiamo qua la differenza mettiamo giù while the wild e poi magari

togliamo la mettiamo un altro lette mettiamo lett k uguale zero voglio che voglio fare un insieme praticamente quindi qua mettiamo semplicemente while via il drive abbiamo i co voglio mettere k vedete che non fa alcuna differenza Sono una variabile dai demo schermo a vedere e abbiamo while e non è preso il 2 while a ops completamente non accorto allora andiamo a vedere allora abbiamo guai ed uguali fanno esattamente la stessa cosa ma la fanno in due modi diversi adesso vi faccio vedere adesso mette un solo numero Ok ripartiamo direttamente da uno a ok quindi la

length di questo array è uno tutto chiaro se e noi partiamo da uno quindi andiamo vedere il risultato vediamo risultato abbiamo solo duguay allora che cosa ho fatto spieghiamo tutto bene allora intanto la rae ha solo un numero ok ha solo un numero quindi abbiamo che la lankes è uno e l'indice di partenza è zero ok ora noi potremmo farlo in tanti modi Io qua per te al numero preso fuori i meno uno adesso ci arriviamo oppure potevano fare zero minore o uguale a zero o cose io voglio far semplicemente così abbiamo un solo numero

la lankes è uno e abbiamo letto che parla i il contatore scusatemi liberato il contatore che parte già da uno quindi ragioniamo un attimo sul while uno è minore non minore o uguale è minore di array life che è uno no no quindi cosa fa Non fa niente vedete che non c'è il wild c'è solo il dubai qual è la differenza cold wine è che il duo esegue il codice prima di verificare la condizione mentre il while così come il four verifica la condizione ed esegue il codice esclusivamente se la condizione verificata il 2 while

vedete che k1 nessuno chiede niente questo qua entra senza senza pass senza niente come una persona veramente che entra in palestra senza vale solo gli chiede Niente lui entra falso allenamento quando esce dirigono ma scusa ma tu sei scritto questa palestra no e allora vattene però intanto lui l'allenamento se l'hai già fatto bellissima questa metafora mi è piaciuta esattamente quello che è successo e gli dicono ma scusami poi abbiamo in più abbiamo k più più felice cappa più più è 2 2 non è minore dr mi dispiace io ormai il codice la manata schermo quindi

la differenza tra Uguale duguay potrebbe essere che duguay lo utilizziamo quando vogliamo almeno far sì che il codice venga eseguito almeno una volta anche se la condizione anche prima della verifica della condizione ok un esempio pratico programmatico non so far velo adesso però spero si sia capito fatte delle prove è semplicemente verificate quale loop usare allora il loop che io preferisco sono il four più avanti vedremo fuori e altre cose io preferisco Il for a while ed un brutto while the wild potrebbe servirmi in certi casi io vi dico siete all'inizio usate il foro e

per tutto quello che dovete fare è comunque fatto un po di pratica con buy ed uguali se poi la casistica lo vedremo con l'andare avanti dei corsi richiederà wild wild lo useremo io vi dico state call for che il four fa tutto quello che deve fare io vi ringrazio per per questo episodio è veramente tutto Noi ci vediamo al prossimo e vi ricordo sotto in descrizione gruppo canale telegram vi ricordo la vetrina amazon per eventuali consigli su libri eccetera vi ricordo il link agli abbonamenti se volete sostenere questi corsi e niente noi ceniamo la prossima

ciao ciao un giorno a tutti bentornati episodio numero 9 del corso di javascript quest oggi guardiamo le funzioni sarà un video diviso in tre perché andremo avere tre cose diverse delle funzioni quest'oggi Faremo una bella introduzione ci sono cose importanti quindi non pensate che solo perché è un'introduzione di remo poche cose diremo tante cose appunto introduttive che sanno da base per ciò che vedremo penso che vedremo dopo dunque all'ordine del giorno abbiamo blocchi di codici riutilizzabili ovvero ciò che sono le funzioni e ve lo spiegherò funzioni del browser vedremo che abbiamo già delle funzioni del

browser che abbiamo già visto la Differenza tra funzioni e metodi tra functions and methods ok come invocare una funzione le funzioni anonime scope conflitti e innestare funzione lasciate creando un attimo questa parte di codice ok una funzione è quella cosa che ci permette di ripetere lo stesso blog non è un lupo ma ci permette di inserire sotto lo stesso nome lo stesso codice da fare ok quindi facciamo finta che sto pensando alla metafora quando voi Dovete cucinare la pasta fate certe cose quindi noi potremmo fare una cosa del genere funky on cucina pasta apriamo qui

e voi cosa fate probabilmente voi fate facciamo persona anzi usiamo pseudocodice va bene quindi tira fuori pentola ok poi andate qua hanno attirato fuori la pietra poi mettete mettete l'acqua poi cos'è che fate lasciate bollire mettete il sale e vabbè fai un po quello Che vuoi mettete il sale andate giù mettete la pasta fate il sugo perfetto e poi impiattate impiattate allora tutto questo genere di cose obiettivamente lo fate ogni volta che fate la pasta non è che voi cambiate l'ordine o fate qualcos'altro bene o male sempre la stessa roba ok quindi sulla falsariga di

questo episodio della vita reale Una funzione possiamo definirla come un insieme di azioni che vogliamo far fare al nostro programma ogni volta che diciamo fai quello non deve variare o le funzioni possiamo farle valere un pochino ma fondamentalmente ogni volta che noi diciamo il programma cucina pasta vogliamo che il programma si metta a cucinare per noi ovviamente non abbiamo ancora i robot con leasint con l'intelligenza artificiale in grado di Farci una pasta ma facciamo finta che il nostro javascript lo sappia fare quindi io faccio cucina pasta e lui comincia a fare le stesse cose ogni

santa volta benissimo e questa è la spiegazione a livello umano di cosa sono le funzioni l'abbiamo già visto delle funzioni se vi ricordate abbiamo visto stringere place quindi quando avevamo una stringa in questo caso il nome abbiamo fatto tipo nome appunto re place e facevamo avremmo fatto luca con Antonio antonio ok è una cosa del genere oppure abbiamo visto array joint matt random insomma abbiamo visto un po di funzioni già che ci vengono date insieme al browser ovvero ogni volta che noi dicevamo 9 punti preis automaticamente javascript andava a cercare dentro la stringa luca e

lo andava a sostituire con antonio non è solo una cosa prendeva la stringa andava a controllare verificava dove fosse luca e lo andava a sostituire quindi sono un Po di azioni una dietro l'altra semplicemente rinominate come re place ok anziché dirgli sempre scrivo sembra pseudocodice cosa ne so string nome punto prendi stringa poi nome punto trova luca nome punto anziché scrivere tutta sta roba qua noi se è evidente facciamo il nome re place mettiamo quello che ci serve automaticamente il programma con questa funzione fa quello che deve fare allora una funzione si identifica quando Andiamo

a chiamare per il fatto che utilizziamo qual è la differenza tra funzioni e metodi quando arriveremo più avanti nel corso verso gli oggetti mi sentirete parlare di metodi e forse alcune volte l'ho già anche detta la differenza tra funzioni e metodi è semplicemente che i metodi sono funzioni di oggetti quindi c'è uno le funzioni legate ad un oggetto in particolare sono metodi le funzioni al di fuori di oggetti o funzioni custom fatte da noi Al di fuori di questi oggetti sono banali funzioni ok non la differenza sta semplicemente nel nome e di dove si trovano

non è una vera differenza a livello programmatico definiamola così è più una questione di circostanza ok quindi funzione metodi per ora chiamiamo funzioni più avanti mi sentirete parlare di metri ma non c'è alcuna differenza e si son differenze le guarderemo più avanti per ora prendete Buono che funzioni è di base la stessa cosa di metodi come invochiamo una funzione molto semplice noi abbiamo una funzione e come avete visto quando facevamo replay socio more place che facevamo così ok mettevamo davanti string appunto replay se eccetera ma quello che abbiamo una funzione se ne abbiamo una funzione

saluti anzi facciamola subito la funzione ciao noi abbiamo fare function ciao facciamo così Apriamo questa è la sintassi perché è una nuova funzione e quindi facciamo console log console ogg ciao ok salviamo se in vogliamo invocare questa funzione non dobbiamo fare altro che mettere ciao aperta chiusa punto esclamativo e quando ne andiamo e prendiamo vedete qua abbiamo ciao ok però non guardate il bottone e questa parte di codice che mi serve per il prossimo paragrafi nochè Sulle funzioni le anonime quindi per invocare una funzione ci basta mettere il nome della funzione che è questo e

poi aperta e chiusa tonda per scrivere una funzione ci basta fare function il nome aperta chiusa è il blocco di codice come abbiamo visto per switch per if perfor e per gli altri loop ok adesso questo blocco di codice dovrebbe risultare ormai abbastanza familiare così come le parentesi davanti ok andiamo avanti cosa sono le funzioni Anonime le funzioni anonime sono funzioni che non hanno nome sono funzioni che noi non andiamo a definire col nome e perciò dobbiamo chiamare in un altro modo un esempio di funziona noni ma è questa qua adesso vado a spiegare noi

abbiamo innanzi tutto qui abbiamo un bottone un button scritto salute mi a cui abbiamo applicato del css ok fin qua ci siete quindi abbiamo il nostro bottone tutto chiaro presumo e che cosa abbiamo fatto abbiamo fatto una Costante che è il bottone anche ben detto mi prendi document quelli selector questa cosa non l'abbiamo ancora vista in javascript ma non preoccupatevi mi prendi dal documento quella cosa che si chiama bottone che ha un tag che alta element button in questo caso prende questo quindi mai button diventa improvvisamente un riferimento a questo e facciamo mai button o

un click e questo è un evento lo vedremo più avanti non spaventatevi Mettiamo l'on click sul bottone milan ci questa funzione questa è una funzione anonima perché una funzione senza nome ok quindi se andiamo a vedere ed ecco qua che c'è l'aler con scritto effettivamente alert all e questo è questa non funzionano ma noi la funzione anonima potremmo anche in realtà associarla ad una variabile no quindi potremo fare variabile potremmo associare una funzione e teoricamente chiamarla così ok ma far Così vedrete che mi è uscita ma far così equivale a dare il nome ad una

funzione quindi buona parte delle volte non c'è bisogno di far così le funzioni anonime le userete in questo caso più avanti vedremo nelle callback ok per ora lasciate passare il termine callback dobbiamo dare lo scoop e i conflitti dunque togliamo questa cosa che non ci interessa togliamo il bottone qui togliamo lo stile voglio pulire Salviamo dunque lo scopo e i conflitti che cos'è lo scopo lo scoop è lo scopo della delle variabili dentro e fuori dalla funzione adesso ci capiamo meglio allora questa qua è una variabile globale tutte le variabili che sono nel nostro script

al di fuori delle funzioni sono variabili globali quindi questa è chiaramente una variabile globale e vi faccio vedere perché perché la possiamo usare in qualsiasi situazione ne Facciamo ciao spazio conca teniamo e mettiamo il nome andiamo a vedere ciao luca ok alta non dovrei scrivere così però va bene avete capito il senso insomma non sto a sistemare la formattazione ciao e abbiamo il abbiamo il nostro nome lo vedete che prende luca dalla funzione e fin qua nessun problema ma se ne facessimo una cosa del genere noi mettiamo qua facciamo let qua dentro lo chiamiamo lo

chiamiamo cognome e Mettiamo rossi fin qui nessun problema perché noi siamo qua dentro facciamo così ma andiamo a schermo ciao rossi nessun problema ma se volessi fare un console log da qua di nome ok e se volessi fare di cognome vediamo un po attenzione luca lamanda schermo mentre invece si dice che cognome non è definito come è possibile che cognome non è definito cognome è nello scoop locale della funzione ovvero che tutte Le variabili che noi creiamo in questa funzione sono disponibili esclusivamente nella funzione mentre invece le variabili che creiamo al di fuori delle funzioni

sono disponibili in tutto il codice facciamo però un altro test aggiungiamo un'altra funzione voglio aggiungere function and law in modo che in questo caso possiamo cominciare a vedere i parametri delle funzioni che qua non ho messo perdonatemi quando hanno messo andremo a Parlare dei parametri delle funzioni parametri e come ne stare le funzioni quindi facciamo una cosa tutta insieme allora togliamo queste cose qua facciamo function e andiamo qua è semplicemente console punto log ma mettiamo name ok siamo in inglese equa mettiamo un parametro vi faccio vedere che cos'è il parametro allora io chiamo lo ma

cosa succede facciamo così ma andiamo a schermo e non succede assolutamente niente ci dan Define questo perché far così in fase di definizione di una funzione vuol dire che vi stiamo dicendo attenzione mi fai una funzione allo che si aspetta ogni volta un parametro quindi ogni volta che tu chiami la funzione mi devi dare un name mi devi da noi potremmo scrive anche così mi devi dare un corto vedete ma noi ovviamente vogliamo usare nuovi che siano capibili che ci aiutino a capire il codice mi devi dare un name ok e quindi io il name

e te lo do e ti do Se volete nome ti do luca vedete e lui mi manda schermo luca o che anzi facciamo così si capisce leggermente meglio sono così virgola e vedete che ci dice allo luca film ha nessun problema ma possiamo anche semplicemente fare marco infarto seno non c'è un problema vedete lo marc quinn di questi sono i parametri noi diciamo ok questa funzione accetta un parametro obbligatoriamente quindi quando tu la chiami quando tu la chiami Mi devi dare un parametro altrimenti abbiamo dei problemi perché qua dentro noi questo parametro lo utilizziamo qual

è il fatto che noi possiamo innestare funzioni e possiamo passarci parametri tramite queste funzioni vi ho detto che noi cognome qua non lo possiamo usare quindi se io faccio è lo marco così vedete che ci dice che cognome non è definito come visto prima ma se noi volessimo utilizzare questa funzione con questo nome lo possiamo fare solo se Chiamiamo la funzione da qua dentro quindi noi ne stiamo facciamo così e facciamo cognome guarda un po cosa succede ovviamente dobbiamo chiamare ciao questa funzione salviamo e vedete che ci da ciao rossi e allo rossi perché questa

funzione non al parametro perché questa funzione non ha parametri ma questa funzione si è perché qua non c'è perché la funzione è loco il parametro si trova qua dentro e prende cognome così come potrebbero prendere Nome tranquillamente perché è lo scopo globale ok ma essendo in è stata quindi essendo innestata la funzione dentro ciao noi possiamo passargli come parametro le variabili che si trovano dentro la funzione quindi quelli che hanno lo scopo locale ok a vi capiterà spesso di fare concatenazioni di funzioni magari avete faccio un esempio banale dovete generare una tabella ok quindi voi

genera vita una funzione che si Chiama generata bella abbiamo visto le funzioni e le tabelle in html però le tabelle e tutta dinamica questa tabella non è non c'è niente di scritto direttamente in html e poi avete generare tre parti dovete generare leather con i campi nome cognome e data di nascita provincia di nascita dovete generare le righe delle persone mario rossi nato a in provincia di sé stessa cosa per fabio verdi luca gialli ve discorrendo quindi generiamo poi il Corpo il body e poi dobbiamo generare il footer noi potremmo avere una funzione function genera

tabella che però andando a girare html verrebbe una cosa abbastanza importante in cui qua dentro magari abbiamo genera eder genera ricche sto tagliando un po di roba dovremmo mettere queste cose qua nel probabilmente nella html o altre cose che faccio però vi faccio vedere provi Capirle idea farvi prendere l'idea genera footer datata e noi poi abbiamo funzioni che sono function genera footer boom poi abbiamo venera righe e genera eder ok noi ci basterà andare a chiamare questa tabella facciamolo magari togliamo questo per ora non ci serve ok andiamo a chiamare qua genera tabella e facciamo

che qua dentro Mettiamo console log footer generato equa una volta che abbiamo finito facciamo console log tabella generata ok quindi facendo così voi potete capire che questo è un innesto perché questa tabella altrimenti dovremmo generare leather qua dentro le righe il footer invece diciamo generata bella si compone di tre parti la generazione del leder dei campi la generazione delle celle delle righe effettive la generazione del footer per Cose extra andiamo qua e noi possiamo dire che ledere è stato generato le righe state generate il footer stato generato e la tabella completa è stata generata questo

è una situazione in cui potreste eventualmente usare degli innesti di funzioni ma potrebbero essere chissà quante migliaia di di casistiche possibili questo è una che voluto portare quindi episodio 1 t 3 se non mi sbaglio delle funzioni è finito io vi ringrazio noi ci vediamo appunto Al prossimo episodio dove parleremo di come costruire le nostre funzioni anche se in realtà un po l'abbiamo già visto e poi andremo a vedere il come far ritornare i valori dalle funzioni quindi questi saranno gli altri due episodi io vi ringrazio vi ricordi descrizione per gli abbonamenti per sostenere il

canale la vetrina di amazon che comunque ci sono consigliati dei libri di vario genere e così come altre cose comprando tramite l'iraq essendo affiliazione voi Sostenete il canale direttamente quindi anche senza pagare l'abbonamento comprando le vostre cose automaticamente arriva a me una arriva me è un aiuto per continuare il canale altre cose in descrizione canale e gruppo telegram io vi ringrazio fate quello che volete un abbraccio alla prossima ciao ciao buongiorno a tutti bentornati episodio numero 10 del corso di javascript quest'oggi andiamo a vedere come fare una propria funzione da zero Nel video precedente in

realtà l'abbiamo già fatta e se avete seguito l'episodio ma oggi vorrei fare un episodi in cui facciamo solo quello sarà una sorta di follo un fallo a long oppure vi dirò cosa dobbiamo fare potete stoppare il video farlo voi per poi vedere la soluzione quindi una sorta di lezione in cui spiego ma è anche un compito direttamente cominciamo subito questo è ciò che vi ho preparato noi andremo a fare crea una funzione basica nostra Custom come usarla nel codice aggiungere dei parametri è una cosa che non è spiegata in questo articolo sarà come metterle parametri

di default allora quello che dovete fare è semplice avere un bottone ho scritto saluta e h1 per mandare a schermo gli eventuali saluti ok quindi abbiamo una cosa del genere il bottone per salutare e nessun saluto allora che cosa dobbiamo fare innanzitutto se volete fare da soli quello che allora quello che dovete Farla consegna se volete stoppare al saluto ma andiamo a schermo il al saluto mandiamo appunto schermo ciao un nome random eccetera e più avanti inseriremo qualcosa perciò potremmo inserire il nome della persona e manderemo a schermo quello dunque la prima cosa che dobbiamo

fare è prendere riferimento del bottone e dell'h1 quindi la button uguale query select or do come il punto quelli Selector in questo modo stiamo andando a prendere gli stiamo dando prende gli elementi del documento prendiamo button copiamo facciamo title che l'h 15 ci siamo dopo richiediamo a fare la nostra funzione i function saluta andiamo ad aprire e dentro ci mettiamo semplicemente un title punto in html ovvero stiamo dicendo qua al title a questo h1 di cambiare il contenuto da nessun saluto a uguale quindi facciamo una mente con le Virgolette facciamo ciao luca ok se faccio

così non ho assolutamente niente perché non abbiamo attivato in niente allora quello che ne ma fa adesso emettere un listener sul bottone questa cosa qua vela spiegherò nel prossimo episodio no tra due episodi sono parleremo degli eventi però però prendetela così come quindi noi paghiamo il bottone e facciamo ad eventi listener abbiamo mettere il click andiamo a farvi regola facciamo una Funzione touch così e andiamo a mettere la funzione quindi saluta bam e noi siamo a posto salviamo andiamo qui vedete ciao luca quindi abbiamo fatto letteralmente quanto ci ho impiegato veramente poco abbiamo preso la

nostra abbiamo creato una funzione le vendo su un nome ha ben detto cosa vogliamo che faccia abbia messo listener che appunto vi spiegherò tra due episodi abbiamo detto ok adesso quando schiava quando faccio clic su questo bottone abbiamo Preso i riferimenti mi fai la funzione e fin qua è una semplice funzione veramente basica direi che siamo a posto avremmo potuto farlo anche potevate chiamarla anche al di là del bottone vediamo un po se troveremo qua già ciao luca va bene potete anche invocarla così non avrebbe senso al momento ma va bene dunque quello che facciamo

adesso è mettere dei parametri voglio andare a mettere un input quindi Input type text ops text facciamone uguale nome placeholder nome persona facciamo così e noi siamo a posto perfetto abbiamo il nostro nome persona po bruttino vabbè diciamo così facciamo input display e togliamo emettiamo block Perfetto vediamo un po come viene ok è molto bene scusatemi ma è osceno quindi margin bottom 20 pixel e salviamo perfetto adesso sono più contento dunque commetteremo nome della persona adesso dobbiamo aggiungere l'input quindi facciamo let nome uguale document selector input qua andiamo a mettere facciamo prima un console ogg

quando schiacciamo sul bottone mandiamo a schermo console punto log vogliono andare a schermo nome per Vedere se ce lo prende correttamente quindi noi premiamo ok ci manda l'imput lo vedete ci manda l'input quello che voglio mandare a schermo è per ora il vario dell'input quindi vediamo un po se ci prende il nome facciamo così saluta vedete che ci manda schermo esattamente quello che ho scritto qua dentro quindi tutto funziona abbiamo ciò che ci serve quello che voglio fare adesso possiamo togliere il console log Quello che voglio fare adesso è mettere qua un parametro ovvero name

andiamo a togliere queste e facciamo alt 96 e facciamo qua al 96 andiamo a mettere qui dollaro aperta chiusa togliamo luca e mettiamo name quindi come vedete stiamo utilizzando un po tutto quello che abbiamo fatto finora a parte questo che nuovo è questo che in realtà non ve l'ho ancora spiegato però diciamo che il funzionamento i parametri le funzioni eccetera Ve lo ha spiegato quindi attualmente se io vado qua non abbiamo ancora caricato questo ciao ande find perché non sa che cos'è name aver messo un parametro che non mandiamo effettivamente quindi adesso noi anzi facciamo

senza il parametro mi spiego direttamente i parametri di default nel caso in cui voi vi dimenticate un parametro o non lo mettete appositamente possiamo mettere un parametro di default vi faccio vedere cosa succede Vedete qua che ci da ciao marco questo perché quando noi abbiamo una funzione se andiamo a mettere il parametro uguale a qualcosa darà automaticamente questo valore se noi non mandiamo niente qua quindi vede che noi abbiamo saluta ma non stiamo mettendo un name da mandare a schermo per quelli cosa fa ok io ho bisogno di un name tu non mi hai dato

allora io prendo il default se marco qua non ci fosse non farebbe niente ci Andrebbe al design come ci darebbe grande fan come ha fatto prima ma avendone messo un parametro di default lui fa ok non preoccuparti to nome dato niente vado avanti per la mia strada noi invece sì che te lo diamo il par ampio default all'inizio mettiamo paolo di prova per farvi vedere io posso mi scrivo quello che voglio vedè ciao paolo ok adesso abbiamo sufficiente collegarla a quello che Abbiamo detto ovvero dobbiamo prendere nome punto value salviamo mettiamo edoardo che sono io

perfetto ciò edoardo quindi abbiamo tecnicamente è finito e risolto il tutto come vedete siamo stati veramente veloci e abbastanza concisi col codice sono stati siamo stati bravi abbiamo utilizzato tutto ciò che avevamo a disposizione per farlo bene ricapitoliamo Abbiamo preso i nostri elementi ma questa non è nemmeno una parte importante perché quello che volevo fare vedere sono le funzioni e come mandarla schermo con i vari parametri abbiamo fatto una funzione che ha un parametro che gli è andato un valore di default nel caso non arrivasse niente ok abbiamo messo nel nostro titolo il valore utilizzando

i back tic quindi andando a utilizzare i tempietti di trash che abbiamo visto è andando a Prendere direttamente il parametro scrivere così è molto più pulito è molto più bello è molto più semplice che fare la concatenazione quindi vi esorto a farlo vi ricordo al altre 96 del tastierino del tastierino non della tastiera della parte di tastiere normale cosa facciamo poi le 20 listen che spiegheremo abbiamo mandato a schermo saluta col nome abbiamo preso l'imput abbiamo messo dentro il value quindi questa era la nostra prima vera funzione Custom con parametri e tutto quello che serviva

di aggregazione presse rimasti con me noi ci vediamo al prossimo video dove parleremo del return che una cosa particolare che possiamo avere mi metto qua un attimo potremmo una cosa del genere il ritorno è una cosa particolare che possiamo averne le funzioni ci permette di là ci permette di ottenere un valore indietro dalla funzione ma questo ve lo spiego dopo io mi ricordo Gli abbonamenti c'è sotto il link se volete sostenere il canale c'è la vetrina amazon se volete comprare tramite la vetrina aiuta a sostenere il canale ed è sotto in descrizione c'è tutto per

quanto riguarda telegram vi ringrazio alla prossima ciao ciao buongiorno a tutti bentornati episodio di oggi andiamo a vedere il ritorno dei valori nelle funzioni allora come potete vedere o utilizzato esattamente lo stesso template che avevo costruito Nell'episodio precedente ok ho solo tolto un po di roba per costruirlo insieme e oggi anima vendere appunto il rapper che cos'è il re terna potrebbe essere che alcune volte ne abbiamo bisogno che dei valori ci vengano rimandati a schermo in quel che ci vengano rimandati per esempio quando noi facciamo un calcolo con la calcolatrice noi potremmo dire cinque più

cinque la calcolatrice di per se si fa il conto e sa che fa 10 ma se noi non mandiamo una Particolare funzione che dice questo valore me lo prendi e poi a me lo mandi a schermo a noi il fatto che la calcolatrice sappia che cinque piu cinque fa 10 non ci interessa perché lo vogliamo sapere noi ok quindi il return diciamo che a livello logico è un po la stessa cosa noi facciamo una cosa con una funzione la funzione esegue il calcolo esegue determinate cose male magari serve questo valore indietro o serve qualcos'altro indietro

per poi a Manipolarlo o fare altro o mandare alla schermo ma se non abbiamo modo di ripescare questo valore va perso nella funzione quindi quello che facciamo adesso è creare la funzione cubo ok quindi non ne vogliamo calcolare il cubo quindi facciamo function qubo e andiamo a fare io faccio normale senza fare il ritorno quindi faccio normalmente quello che ne abbiamo imparato nell'episodio precedente quindi facciamo noi prendiamo il numero lo chiamiamo value ok e Prendiamo anzi chiamiamolo number e facciamo number elevato ops number elevato number elevato number e questo a tutti gli effetti e il

cubo facciamo un console log console punto log e mandiamo a schermo e questo lo chiamiamo let resort ok noi andiamo a schermo risolte e fin qua tutto bene facciamo quello che abbiamo Fatto prima ovvero button punto ad eventi liszt almeno cominciate già impararlo anche se non li abbiamo ancora visti facciamo così facciamo la nostra funzione bam bam mamma e facciamo così semplicemente facciamo cubo per ora facciamo così è come valore mettiamo un numero punto value numero sarebbe questo che è l'input a cui ho cambiato ed è numero ha co scritto ancora numero per nome persone

e mettiamo sufficiente Inserisci un numero ok molto bene vediamo a schermo che cosa abbiamo per ora mettiamo un numero che 5 metteremo sempre 5 calcola e fin qua c la 125 ora quando non da schermo niente per due motivi quindi facciamo il prossimo step che è semplicemente ne facciamo title punto in html uguale non potremmo fare letteralmente cubo così Quindi col numero value e fin qua uno potrebbe dirmi va beh scusate un attimo scusate un attimo l'inner html di title che è questo è uguale a cubo ok che quindi è risolto e ci aspettiamo che

sia risolta andiamo a vedere e cosa succede niente ci danno defying non capisce quel risultato è giusto ma ci dande find perché è sta roba perché questa cosa molto semplice perché il risultato il risultato è qua dentro è qua dentro Noi abbiamo mandato a schermo con console log gestore salt esiste cela la funzione ok ma l'ha mandato schermo con consolo e basta quindi quello che dobbiamo fare in questo caso è fare il return che è l'ultima cosa che dobbiamo scrivere in una funzione perché nel momento in cui noi facciamo return nella funzione tutto il resto

non ce lo calcola result scusatemi proviamo a scrivere console punto log ciao e vi dimostro come se noi mettiamo un return To la funzione esce rimanda il risultato è tutto il resto non viene calcolato quindi le mettiamo 5 il nostro risultato è 125 125 ma qua ciao nel console og dopo non c'è quindi il return è l'ultima cosa che ci deve essere in una funzione che farete se dobbiamo fare un po di operazioni e poi magari abbiamo varie operazioni che niente hanno a che fare anche con risalto ok magari abbiamo aggiornare certe cose certe situazioni

cedra benissimo in ritmo deve essere L'ultima cosa che facciamo solitamente quale abbiamo delle funzioni che ho letto e ora vuol dire che abbiamo creato delle funzioni apposta per quello che facciamo perché magari il cubo lo dobbiamo far spesso perciò non faremo qua anche l'inner noi potremmo avere una funzione che fa quali ner e lo butta qua dentro quindi quando c'è l'evento lissner possiamo sufficiente fare cubo automaticamente il cubo fa una cosa del genere non potremmo non avere terna fa Una cosa del genere diciamo che però non è scalabile perché magari il cubo lo vorremmo usare

come funzione valore valore per valore altrove e magari quindi questo ci fa comodo così oppure semplicemente ci farebbe comodo un template literals ok potremmo avere un template details in cui poi mettiamo la funzione cubo con un valore random e quindi vogliamo dallo schermo così quindi il fatto d'aver la funzione specifica cubo e ritornare ai Valori ci potete utilizzare questa funzione specifica quando lo voi stiamo ritornando il valore e poi abbiamo tantissimi usi per fallo quindi più andiamo essere specifici qua portando questa cosa su non ci aiuta ok altrimenti dovremmo scrivere cubo con insert html o

poi oppure cubo e basta invece noi facciamo sufficiente cubo ritorniamo il valore e vedete che lo possiamo usare come vogliamo andiamo a rivedere Mettiamo qua 7 e vedete che noi possiamo andare letteralmente avanti all'infinito e tutto torna quindi questa era return e il ritorno potete usarle per ogni tipo di dato che avete questo è il caso più semplice che volevo farvi vedere spero si sia capito tutto vi ringrazio mi ricordo sotto in descrizione link abbonamenti per supportare il canale sembra supportare il canale c'è la vetrina amazon che ha link affiliates e tutto ciò che riguarda

telegram per Restare aggiornati o in contatto col resto della community che sta imparando io vi ringrazio prossimo video ciao ciao a tutti bentornati episodio numero dodici del corso di javascript quest oggi guardiamo gli eventi allora c'è tanto di cui parlare degli eventi ed è un argomento tosto andiamo a vedere cosa sono gli eventi andiamo vedere gli eventi handler gli inline event handler andiamo a vedere Advent listener e remove eventi lister vediamo che chiuse all'oggetto i 20 presenti default parleremo delle 20 bab lingen capturing che è importante da capire cos'è la stop propagation e poi vi

dirò semplicemente che esiste eventi delegation ma questa non è la lezione per parlarne perché è un argomento difficile se cominciate già sta roba finale non è semplice st barth e cosa vi dico che esiste nella documentazione c'è un rimando blog e poi però non è il Momento dunque cominciamo cosa sono gli eventi gli eventi sono quelle cose che possono succedere durante una pagina abbiamo già visto il click abbiamo già visto in questo caso vedete c'è un submit c'è un form potrebbe esserci un double click potrebbe esserci un focus sull'input anzi facciamolo vedere subito possiamo fare

nome punto un focus uguale function diciamo così invece sufficiente un Console log ok console punto log e mandiamo semplicemente a schermo sono in focus ok ve lo faccio vedere velocemente bam sono in focus qua non c'è domanda perché non abbiamo settato come potete vedere questi sono gli eventi potremmo cliccare potremmo potremmo fare un po di cose che hai questi sono gli eventi sono cose che succedono su una pagina perché l'utente fa determinate cose quindi l'evento che occorre è l'utente ha schiacciato questa Cosa l'utente è passato col mouse qui l'utente ha schiacciato questo bottone sì quello

è un evento che occorre e di conseguenza noi andiamo a fare determinate cose ok sono cose che bene o male abbiamo già visto ma queste sono spiegate allora le vent under ok così ad esempio di un button un click l'abbiamo già visto tante volte ok la vinci visto veramente tante volte così allora questo è landler praticamente quando noi mettiamo il L'elemento che ci interessa lo prendiamo dal document.getelementbyid i quali selector quello che volete e mattia mettiamo punto un focus piuttosto che nome punto o ne vedete che c'è un kobe in context menu home cat doubleclick

drag potremmo andare avanti ci sono tanti drag drop come te ci sono tanti tanti tanti eventi hongqi da un key press ap quindi possiamo fare veramente molte cose queste per quanto riguarda il mouse questi per quanto riguarda i video Quindi non vi annoio con queste cose qua come potete vedere ci sono tanti eventi semplicemente un attimo click boom questo è un evento handler ovvero che facciamo una determinata funzione è semplicemente facciamo function facciamo così facciamo così e le venete facciamo console punto log abbiamo detto ciao oppure quindi fatemi vedere vedete possiamo fare solo in focus

oppure ciao sufficiente cliccando o Stanno in focus benissimo questa cosa qua la possiamo fare però anche in line ok quindi noi potremmo avere il nostro elemento eccolo qua e potremmo fare un coso in line un evento un handler scusatemi quindi vedete un focus mettiamo una funzione che è saluta facciamo così non facciamo nient'altro andiamo qua togliamo questo e facciamo function saluta apri qui andiamo facciamo le parentesi console Punto log ce l'abbiamo sempre con luca quindi ciao luca salviamo andiamo vedete ciao luca semplicemente andando in focus quindi quello che possiamo fare è il focus come l'abbiamo

visto prima quindi ripeto nome punto o un focus un focus con qua la funzione oppure possiamo fare l'evento handler in in line e da quali chiamarla funzione sconsigliatissimo fare questa cosa Perché è meglio non intaccare html direttamente col javascript anche perché poi avete andarlo a cercare eccetera meglio avere tutto qua quindi sappiate che potete farlo in line meglio averlo gestito qui ok è una cosa importante che potete fare altrimenti come mai visto come the visto fare negli episodi precedenti è la evento listener che preferisco quindi potremo fare punto ad eventi listener facciamo o non debba

essere focus Focus apriamo la nostra funzione andiamo qua e facciamo console log punto sono in focus dal listener diciamo così salviamo bam sono in focus dall'ice e quindi abbiamo visto tre modi in live event handler normali event handler in line che vi sconsiglio e poi a the mentalist io preferisco questi ok perché ci dà ci danno più controllo in generale sappiate che potete fare anche così con la Funzione anonima proseguiamo e guardiamo per che cosa succede quando noi facciamo un evento generiamo un oggetto evento quindi questo evento non essere una cosa random che succede viene

registrata e viene registrata come evento ora io che ho usato scusatemi un altro tipo di sintassi meglio far così pancione normale e poi noi andiamo qui e mettiamo è in realtà questo parametro potete chiamarlo come volete lo trovate spesso chiamato i 21 e potete Chiamarlo anche pippo se volete io vi consiglio e oppure i venti salviamo anzi vi mando schermo e quindi nome o un focus vedete che ci arriva un oggetto qua ed è un focus eventi con bubble forse se ne può vedere c'è un po di roba c'è un target soprattutto il target ecologia

interessa spesso anche sul sul click ok ci sono tante cose c'è il time stamp il tipo che il focus su cell e men's punto il target lo useremo spesso il target ci permette Di capire qual è l'oggetto che abbiamo preso in considerazione in questo caso facciamo il punto target i target lo userete spesso andiamo a vedere ma gira input e di et name che sarebbe il nome andiamo a vedere effettivamente questo input ed è esattamente la stessa cosa vedete non cambia niente quindi target lo userete tanto tanto e questo è l'oggetto diventa l'oggetto vento e

contiene un po di cose potremmo tranquillamente prendere il value che in Realtà adesso non avrebbe senso perché non c'è scritto niente vedete ci dà niente ma se noi scriviamo e torniamo qua avete che ci dà il valore perché dovremmo fare cosa del genere in questo momento non si sa però vedete che lo possiamo fare è semplicemente con oggetto evento selezioniamo il target per chiamo il value abbiamo preso un valore importante che ci potrebbe interessare allora che cos'è questo i presenti di fault ci Sono degli elementi che si comporta in un certo modo ok ci sono

dei medi che si comportano in un certo modo vi faccio vedere l'esempio andando a commentare questo poi ve lo spiego qua abbiamo il nostro abbiamo il nostro forum che sia completo o meno mettiamo solo il cognome io faccio in via vedete che si è caricato velocemente e ci aggiunto quel punto di domanda se ne avessimo collegato un qualcosa per gestire questo form il forum sarebbe stato mandato Infatti vedete che ci ha letteralmente cancellato tutti i dati vedete guardate quindi il forum è stato processato non c'è niente attaccato per processarlo non c'è php e non c'è

ajax non c'è niente quindi che sarebbe restato in html ma il form è stato inviato quindi il form è stato sabotato form punto dal mit che cosa abbiamo fatto noi ne abbiamo detto guarda form on submit quindi riconosce che questo è un submit vedete input di Submit se vi ricordate da html quindi types submit che cosa fa il summit si trova dentro un form in via il form ok quindi è il default è il comportamento di default del summit un summit dentro a un form in via al forum che cosa mai detto però no perché

noi vogliamo controllare se una persona veniamo qua doveva incontrarsi una persona ha compilato o meno i campi come facciamo dobbiamo mettere un evento simbolo così come potevamo farle 20 Listener guardiamo questo stiamo dicendo form che non è altro che quelli selector forma come abbiamo già visto un submit quindi quando il form viene inviato mi fai questa funzione mi controlli che il nome quindi il nome il cognome sto andando a prendere questi campi ok mi controlli che il nome e cognome non siano empty ovvero il nome value è vuoto o cognome value è vuoto quindi uno

dei due campi non è stato compilato mi Previeni il default quindi eviti che il form venga inviato e cosa mi fai c'è qua sotto un paragrafo e mi mandi a schermo della roba ovvero il tuo figlio di un boss names quindi devi completare entrambi i campi amo vedere tappe tac non ho salvato tac tic tac perfetto quindi vedete che ha evitato che non è stata verticale stato cancellato ha evitato il summit del del forum e ci ha mandato a schermo Questa cosa che avremmo potuto gestire solo con presenze di fault altrimenti bisogna fare tutto quello

che vogliamo ma vedete che è comparso ma è stato mandato via direttamente quindi non abbiamo il controllo sulle vento e questo è quindi questo è presente di fault andiamo a prevenire il default su alcuni eventi quindi se per caso voi avete un evento e non vi funziona per qualche strano motivo andata a prevenire se per caso Non capite fate una prova e prevenire l'evento in moto in modo da poter pagare e vedere se quello potrebbe essere il problema parliamo di eventi public and capturing e stop propagation questa è una roba abbastanza teorica perciò ci spostiamo

sulla documentazione che la spiega molto bene in italiano non c'è perciò va dal giro a inglese e vi dovete fidare del sottoscritto allora i venti bab lingen capture in car sharing quindi sono due tipi di eventi che possono Succedere vi spiego la situazione allora noi abbiamo un display video ok se faccio così abbiamo il display video che cosa succede che per nascondere questo video noi dobbiamo cliccare sul div ok qual è il fatto che questo qua grigio held in questo qua il video ma noi per far partire il video dobbiamo cliccare sul video quindi se

io rimando a schermo vede che il video effettivamente è partito il video partito ma ogni volta Che io clicco sul video mi nasconde perché in realtà sto cliccando anche sul sul div senza volerlo ok avete capito quindi io faccio partire il video ma in contemporanea sto cliccando sul div e i div se non diamo prenderlo vedete che videobox è il div ci mette idem quindi va a nascondere tutto noi vogliamo cliccare subito per Farlo partire perché c'è qua video on clean video play devo devo fare così scusatemi quindi noi devo fare video on clip video

player è quello che abbiamo fatto perfetto il problema è che nello stesso tempo videobox che sarebbe questo qua grigio sul click va a mettere la classe nascosta che andrà mettere display non oppure visibility idem insomma lì poi dipende dal css che hanno messo a remo a Spiegare quindi che cos'è il ba bling e il car sharing nel momento in cui noi andiamo a premere in quella posizione per il video appaiono due tipi di eventi allora abbiamo il car sharing il car sharing parte dal html ridicola ci sono i colori quindi questa html body eccetera quando

il nostro div che è il videobox ecco avevano il nostro video che cosa succede parte da parte da ian sectors quindi dai vari no anni eccetera va a vedere se ci sono dei dei click Handlers e non c'è niente poi arriva al div e va a vedere se c'è ed effettivamente c'è perché come abbiamo visto abbiamo questo video box o un click set attribute idem dopo di che arriva sul video lo trova e fa partire anche il secondo evento handler quindi il motivo per cui noi siamo in grado di far partire il video e nasconderlo

è perché partono uno dopo l'altro ma parte 1a div e poi il video Qual è il fatto invece quindi questo è il capturing che parte da che parte da lontano e va a catturare l'evento mano mano mentre invece il ba bling è un'altra cosa il ba bling pensate quando voi tirato un sasso nell'acqua che si espande ok quello è l'effetto bab l'ing che cosa succede che noi abbiamo premuto effettivamente sul video ok ne abbiamo premuto sul video quasi premiamo qui vedete che non parte il video ma se ne prendiamo qui il video parte però poi

lo Prende prende anche il resto qual è il fatto che noi siamo partiti qui guarda l'evento l'ha trovato la fatto partire dopodiché si è espanso sul di vela fatto partire e poi è nato sugli altri anne sexton e non ha trovato niente quindi come possiamo quindi immaginatevi questa cosa come una propagazione si parte dalla si parte dal dal dall'esterno si fa all'interno oppure si parte dall interno e si va all'esterno per evitare questo genere di problemi noi usiamo i Ovvero il nostro la nostra e inglese lo so che lo sapete ed usato lo dico così

i stop propagation quindi devo fare andiamo a stoppare la propagazione dell'evento questo evento ha delle ripercussioni esattamente come tirare un sasso poniamo il caso che io ho tirato il sasso nello stagno e vivete l'evento l'evento è tirato il sasso nello stagno si ma questo sasso nello stagno genera altri eventi potrebbe innanzitutto elba bling elba bling genera i pesci che se Ne vanno la rana che salta altrove o altre cose mamma mia che bella metafora come potete capire il mio evento scusatemi il mio evento di tirare il sasso ok in realtà genera altri eventi potrebbe girare

altri eventi per evitare questa cosa le usiamo stop propagation quindi se avete dei problemi di qualche genere come in questo caso torniamo su qua a voi dovreste mettere stop propagation all'anno a far così il Video parte equa non succede niente perché abbiamo cliccato sul video sono cliccatissimi qua ovviamente lo andrebbe a nascondere ma questo è un altro paio di maniche ora e questo era tabling in car sharing vi consiglio di riguardarlo non non ci capire non ci capite rete su molto son cose molto rare queste ma importante saperlo innanzitutto dovete capirlo in primis e in

secondo luogo non solo dovete capirlo ma una volta che l'avete Capito se ci finite contro potete gestirlo ok più che altro una volta che sapete che esiste questa cosa la potete prendere in considerazione tornate sulla documentazione o sul video e valutate come gestirlo vi dicevo di eventi delegation qua c'è un link a un bellissimo blog ok di bubi che lo spiega bene ma già avete la testa piena con propagation presenze di fault doubling capturing io vi lascio perdere even delegation che è veramente complesso se Proprio proprio lo volete sapere più avanti durante il corso lo

potremo fare come buono guardatelo voi cercate di impararlo ok altrimenti però la lasciatelo perdere sicuramente le 20 delegation lo prenderemo in considerazione quando più avanti forse un altro corso andremo a gestire delle cose che possiamo fare con javascript quindi script comuni che potrebbero servirci e quando andremo a generare select dinamicamente e altri campi del Form che vogliamo generare a dinamicamente useremo i venti delegation ve lo posso garantire ho avuto molti problemi nei miei primi mesi di sviluppo con javascript soprattutto dinamico e quindi lo vedremo per forza ii ma sarete già sviluppatori java script lanciati con

una base importante e vi ringrazio per essere ma sti con me noi ci vediamo nel prossimo video non so esattamente cosa andremo a fare è già tutto segnato ma ha Memoria per datemi oggi non mi ricordo vi ricordo di descrizione per supportare il canale abbonamenti vetrina amazon e poi ci sono i gruppo telegramma il canale the grand per essa sempre aggiornati o parlare con le altre persone della community io ringrazio ancora un abbraccio e alla prossima ciao ciao un ventre da tutti episodio numero 13 del corso di javascript quest oggi guardiamo gli oggetti in preparazione

a quello che sarà lo sviluppo ad oggetti In javascript allora lista del giorno cos'è un oggetto cosa sulle proprietà ei metodi come creare un oggetto legge le proprietà che cos'è la dozza notation e la bracket notation come aggiornare un oggetto è la parola chiave di un oggetto lo possiamo definire come una collezione di dati in relazione tra di loro ok questa è la definizione che dà anche la documentazione che cosa intendo per una collezione di dati correlati tra di loro e adesso capite subito ad esempio Prendiamo una persona ok ora ha imparato ed oggetti vogliamo

appunto spesso mettere dei dati che che hanno una certa correlazione appunto tra di loro che abbiano un senso messi insieme che vogliamo appunto contenere in una stessa variabile in questo caso appunto utilizziamo l'oggetto prendiamo per esempio la persona ok abbiamo un costante persona abbiamo questo oggetto l'oggetto si apre con le parentesi graffe l'abbiamo già Visto e può avere dei dati al suo interno i dati sono leggibili tramite chiave valore quindi questa è la persona questa è la chiave nome e il valore potrebbe essere luca ok quindi questa è la chiave è questo il valore ogni

volta che trovate qualcosa due punti qualcos'altro la relazione è chiave valore quindi questa è la chiave di una proprietà questo è l'oggetto è questo il valore ok quindi chi e value ricordate quello che Lo userete spesso anche nelle funzioni che useremo più avanti per lavorare sugli oggetti torniamo a noi che cosa sono una serata una serie di dati correlati lo abbiamo qua una persona una persona ha un nome ha chiaramente un cognome ok potrebbe avere un genere in questo caso facciamo luca è chiaramente una femmina poi facciamo così mettiamo gli interessi interessi potremmo avere un

array in cui mettiamo Snowboard ho scritto male snowboard potrebbe avere basket e poi facciamo picnic al parco questa un po più per la comicità un'altra cosa che potrebbe avere potrebbe per esempio avere magari un un indirizzo una cosa del genere giusto per farvi vedere dei sotto dei soggetti l'indirizzo è composto da via in questo caso piazza roma chissà se esiste una piazza da Qualche parte potrebbe avere un cap mettiamo un cap letteralmente a caso conti sono cinque numeri ok e poi mettiamo a me se lo mettiamo in così perché altrimenti un problema e poi potrebbe

avere una provincia magari provincia facciamo mi milano mi vengono solo è un peccato ammettiamo anche tasto punto servono anche dei numeri facciamo l'età due punti 25 Benissimo interessi cup provincia e mettiamo città e mettiamo chiaramente milano ok un'altra cosa che potrebbe fare il nostro amico potrebbe fare delle delle azioni ovvero saluta due punti function facciamo così facciamo così e dentro mettiamo con sol punto log facciamo alt 96 al 96 c compaiono i tic e noi Prepariamo ve lo dico subito ciao sono ciao sono luca ok oppure potremmo fare come abbiamo visto che i template literals

potremo mettere nome non è nome scusatemi ma è persona punto nome ok vediamo che cosa abbiamo qui abbiamo un oggetto ok qui nel mento che sono dati correlati tra di loro con un certo senso logico effettivamente abbiamo una persona questa persona è un Oggetto avevamo già detto che abbiamo già parlato che l'oggetto è una rappresaglia essere una rappresentazione programmatica di qualcosa che può esistere effettivamente nella realtà e se noi prendiamo una persona una persona chiaramente un nome un cognome un genere un'età degli interessi un indirizzo può fare delle può fare delle azioni ok quindi a

una serie di dati quando abbiamo messo colore del pelo ok perché è una persona Non ha il pelo potremmo avere numero di scarpe trame del tutto quello che volete conto bancario altre cose sicuramente non ha dimensioni in pollici perché non è un uno schermo oppure non ha la potenza in watt ok quant'altro che ne avete capito cosa intendo quando parlo di dati correlati tra di loro con un certo senso logico e questa una persona come però io parlo di proprietà e di metodi un oggetto ha delle proprietà ed i metodi le proprietà Sono altro che

le variabili ok queste sono le proprietà la proprietà nome della persona quindi una persona ha un nome si il nome è una proprietà di una persona sì il nome è luca poi abbiamo il cognome il genere mentre invece saluta è un metodo vi ricordate che avevo parlato durante le funzioni dei metodi ecco che entrano in scena i metodi i metodi sono le funzioni ma sono le funzioni di particolari oggetti abbiamo saluta è il metodo di persona vuol dire che tutte le Persone che andremo a creare più avanti nelle prossime nelle prossime elezioni che non faremo

poi le classi java ski più orientato agli oggetti avranno tutti il metodo saluta ok che altro non è che una funzione lo vedete semplicemente le variabili dentro dentro un oggetto sono proprietà le funzioni sono metodi l'oggetto abbiamo creato adesso vediamo come leggere le proprietà allora andiamo qua a schermo che facciamo con sol punto log e devo mandare come leggiamo queste Proprietà è molto semplice persona punto nome andiamo a vedere in questo caso andiamo a prendere persona che è questo oggetto punto in questo modo possiamo accedere alla sua proprietà ma anche al metodo adesso vi faccio

vedere quindi vedete luca andiamo più a schermo di così molto bene quindi abbiamo l'accesso al suo nome vi faccio vedere età ve lo faccio vedere un po tutti vedete età 25 Possiamo andare a prendergli interessi gli interessi in questo caso essendo un array vi ricordate come succede a gli array si accede tramite indice in questo caso abbiamo prendere picnic al parco che è 2 andiamo qua e vedete picnic al parco è uno dei suoi interessi quindi facciamo per l'oggetto punto la chiave che ci serve la proprietà che ci serve e poi eventualmente se dobbiamo prendere

un array andiamo a mettere l'index se Invece dobbiamo prendere un soggetto questo è un altro oggetto l'oggetto indirizzo è un soggetto dell'oggetto persona ok come andiamo a lavorare molto semplice utilizziamo la stessa cosa quindi abbiamo fare indirizzo indirizzo punto vedete incognita cup mi può dare via ce lo suggerisce venete che ci sono ferisce le varie cose perfetto noi facciamo cup che era più bello da vedere andiamo a vedere bam e questo è il suo cap quindi Abbiamo preso tutto come facciamo però andava schermo una funzione molto semplice noi siamo persona punto saluta facciamo così ovviamente

è una funzione quindi dobbiamo mandare a schermo così andiamo a vedere ciao sono luca qual è il problema qua ha giustamente scusatemi non dobbiamo andare a schermo così la funzione dobbiamo semplice no c'è un problema di di console log ma andiamo a schermo ciao sono luca Perfetto e questa è la funzione punto e virgola ecco se lasciate i punti e virgola se non metti di punti e virgola su una riga non è un problema se non li mettete su più righe di codice comincia a diventare un problema quindi vedete che abbiamo chiamato la la funzione

persona appunto saluta questa cosa qua l'abbiamo già usata vi ricordate quando abbiamo fatto string punto to string anzi avevamo fatto vediamo se scopro così persone appunto nome punto to Vedete to lower che se c'è da vede che è la stessa cosa in questo caso il nome è una stringa perciò abbiamo usato il metodo lower kate ok perché la stringa va detto che è un oggetto il giau skipper le stringhe essere un oggetto di conseguenza vedete che abbiamo già fatto la stessa cosa l'abbiamo fatto perché sto perché abbiamo usato su gli array push pop è lo

stesso lo stesso discorso quindi quasi sarebbe un array che ha dentro dei metodi tra cui push pop in Shift e shift stessa cosa quindi in persona appunto saluta e con questo abbiamo letto sia le proprietà che i metodi andremo a vedere però che cos'è la dott notation e la bracket notation quella che abbiamo usato fino adesso è la top notation ovvero a siamo andati a prendere le proprietà e i metodi di un di un oggetto tramite la dott notation perché il punto in inglese è dott quindi dott notation ovvero accediamo Utilizzando i punti ma non

potremo usare le bracket notation e per black ed notation parliamo delle square bracket ovvero delle parentesi quadrate per accedere alle parentesi quadrate in questo modo possiamo accedere solo al alle proprietà quindi andiamo a fare oggetto in questo caso persona aperte parentesi quadre e andiamo a mettere tra virgolette il nome della chiave ok quindi in questo caso devo mettere il nome Perfetto facciamo così giustamente non ho fatto console home console punto log andiamo qua tac facciamo così e noi abbiamo schermo il nostro luca lo vedete non fa alcuna differenza prima prendere interessi per apprendere interessi tuttavia

ci mando a schermo più cose quindi per prendere gli interessi ricordatevi che è un array dobbiamo andare a fare doppio Lavoro andiamo a prendere questa volta l'uno e ci manderà schermo basket ok vedete basket quindi questo qua è l'array ok persona interessi scritto così è questo array esattamente come persona persona appunto punto interessi che abbia sufficiente la sintassi e davanti mettiamo uno sono è esattamente la stessa cosa ok ed è esattamente scrivere persona appunto nome così è esattamente come scrivere persona Appunto nome sono modi diversi di accedere e dico quella la differenza quando vi tornerà

più utile uno che l'altro quindi persona appunto nome perfetto e se vogliamo accedere all'indirizzo la cosa è esattamente uguale facciamo indirizzo e poi andiamo qua e andiamo a prendere il cap andiamo a vedere perfetto ci ridà tutto quindi vi ho detto che saluta invece dobbiamo accedere sempre lo stesso modo le Funzioni vanno chiamate sempre lo stesso modo con la colla dott notation questa è la bracket notation allora qual è una delle questo non dovrebbe esserci scritto sulla documentazione che è in descrizione ve lo dico io come extra quale è una delle situazioni in cui potrebbe

farci comodo questa notation rispetto a quella puntata allora molto semplice poniamo e vi succederà che dovrete prendere dinamicamente delle dovrete prendere dinamicamente delle Proprietà vi succederà a ve lo posso grande tira su un esempio così sulle piedino mi viene in mente ma ve lo posso garantire che l'uso spessissimo durante la programmazione dovete prendere qualcosa di una persona ok dovete bene anzi poniamo che questa persona ha la sua area privata ok alla sua privata e sta modificando qualcosa che noi non sappiamo cosa andrà a modificare la persona potrà modificare il nome potrà modificare il cognome il

Genere e gli interessi né non lo sappiamo quindi lo prenderà in base a quello che fa effettivamente l'utente sul sullo schermo quindi noi non possiamo dirgli e modifica all'indirizzo ok se realtà lui sta modificando il genere non possiamo dire modifica il nome se lui sta modificando il cognome quindi potrebbe essere che noi associamo la chiave in questo caso diciamo const chi che sarebbe la chiave o il nome della proprietà e li mettiamo come nome Genere ok in questo caso abbiamo konsky non è non conviene mi scriverai chiave abbiamo il genere ok ora noi sappiamo che

vogliamo prendere il genere ma se ne andiamo fare mandami a schermo persona appunto chiave uno potrebbe dire beh però persona punto chiave è questo quindi mi andrà a prendere il genere mi darà maschio andiamo a vedere no ande find perché scrivendo così noi sì li abbiamo dato questa chiave ma noi Non la percepisce come se fosse la chiave per l'una dott notation perciò va a cercare chiave qua dentro se va da mettere chiave due punti e metto come se fosse una chiave particolare di sulla tela virgola una chiave particolare un accesso è diventet che ci

da questo quindi questa è la dott notation come possiamo fare per inserire dinamicamente la chiave di un oggetto senza saperlo prima dobbiamo per forza usare Dobbiamo per forza usare lo vedete la bracket notation quindi abbiamo a vedere ed effettivamente ci dice che è maschio ok facciamo un esempio anche su indirizzo vi faccio vedere come nonché a scusatemi l'indirizzo quali faccio vedè come non cambia niente prendiamo lo 0 c uscirà snowboard ne facciamo così e io vi mando schermo scusate non è in indirizzo ma è interessi piccolo errore mio andiamo a schermo e vedete che mi

da Snowboard ok quindi questa è la bellezza della della bracket notation ed è una delle differenze più importanti direi la differenza più importante tra cui usare una eco usare l'altra di solito se non devo mettere niente di dinamico uso la dott notation e quindi scrivo direttamente punto nome se lo farà qualcosa di dinamico vado a mettere la bracket notation quindi utilizzate questa questo modus operandi in queste Varie situazioni ok ricordatevelo a mente perché ve lo posso garantire all'inizio del mio della mia canali sviluppo non sapevo questa differenza e osman dato a lungo smaltato veramente tanto

mi ricordo mi ricordo ancora il giorno in cui ho avuto quel problema lì poi l'ho imparato e tutti i problemi sono sono andati via e stata un'eccellente scoperta perciò preferito dirvelo anche se hanno importato nella documentazione Apprezzate e andiamo avanti come possiamo aggiornare un oggetto molto semplice allora noi continuiamo a mandare a schermo persona punto nome ma prima sappiamo come accedere a persona punto nome presa un persona punto nome andiamo qua persona punto nome e scriviamo paolo perfetto paolo ok molto molto molto semplice qualcuno potrebbe dirmi però giustamente come mai in una costante e questo

esula dalla Dalla lezione attuale ma ve lo voglio spiegare perché qualcuno potrebbe aver delle dei dubbi a riguardo come mai però su una costante noi stiamo andando a modificare il nome e ce lo fa fare mentre invece ci hai detto nella lezione delle variabili che la costante non cambia valore questo perché la costante è la persona ok ma questa è una cosa a parte c'è noi non possiamo che la persona in sé non può cambiare contenuto Ma luca il contenuto del nome onestamente non so come spiegarvelo faccio prima a farvelo vedere ok quindi io vado

a scrivere persona persona la mettiamo uguale a un a un oggetto vuoto quindi sommando a cambiare la natura dell'oggetto quindi base stiamo cambiando la persona ok siamo totalmente cambiando la natura dell'oggetto facciamo così e vedete che ci dà errore ok ci dà proprio rai non possiamo farlo Stessa cosa se proviamo a cambiare la natura della persona proviamo a farlo diventare un array c.da errore stessa cosa se io però farlo diventare un numero c.da errore ok ma se noi andiamo a cambiare se andiamo a cambiare le proprietà di un oggetto non è un problema ok facciamo

quindi un'altra prova andiamo a cambiare l'indirizzo punto cup e lo mettiamo chiaramente un due tre Serve due zeri perfetto sono sempre degli zeri il cap facciamo così a nemo mandare a schermo indirizzo cap e vediamo un po perfetto torna tutto è così possiamo modificare tranquillamente il valore di i valori delle proprietà ovviamente vi faccio vedere anche magari su interessi così tanto per interessi punto 2 da picnic al parco diventa cazzeggiare ok prima però è Venuto in mente perdonatemi ops ma andiamo a schermo soltanto gli interessi nemo schermo gli interessi vediamo un po e abbiamo snowboard

basket e cazzeggiare quindi vedete che possiamo accedere tranquillamente alle proprietà e possiamo cambiarle senza alcun problema ora con la stessa cosa possiamo aggiungere proprietà agli oggetti che non abbiamo magari messo prima e non avremmo comunque errore vi faccio vedere Sulla stessa linea noi aggiungiamo persona appunto colore preferito colore preferito uguale e ne mettiamo il ne mettiamo il blu e mandiamo a schermo tutta la persona che vi voglio far vedere e nico abbiamo un bellissimo paolo ok il cui colore preferito è il blu vedete quindi questo è quello che possiamo fare con gli oggetti anche quello

sono costanti proseguiamo abbiamo aggiornato l'oggetto arriviamo Alla parola this lo troverete spesso lo troverete spesso che cos'è la parola chiave diesel una parola che a vedere ovviamente this dall'inglese vuol dire questo quando noi usiamo teese facciamo riferimento all'oggetto in cui ci troviamo dentro ok facciamo riferimento allo stesso oggetto in questo caso vedete che io mando schermo ma lo schermo persona punto nome quindi facciamo saluta dove solo far vedere come funziona allora noi mandiamo A schermo ciao sono luca ma che cosa avrei potuto fare vedere che la richiamiamo persona punto nome anziché usare persona quindi possiamo

andare a mettere disappunto nome e vedete che ci darà esattamente la stessa cosa per far vedere che è cambiato qualcosa mettiamo genere per sicurezza magari qualcuno dice non ha aggiornato e invece ciao sono maschio giustamente il tenente Sei maschio allora quindi this is va a prendere come context come contesto l'oggetto quindi ciao sono di nome e lui mi dice ok ma io dove sono dentro ci sono dentro a persona ok io sono dentro a persona quindi sono sono dentro a questa istanza del sono dentro a questo oggetto di snom e vuol dire che è l'oggetto

in cui mi trovo quindi persona ok noi potremmo avere più nomi diversi potremmo avere edoardo potremmo avere un Altro oggetto che consta luca che quindi ha come nome luca avete capito il senso in questo caso è più un persona generico ok però lo dice ok io sono dentro persona il nome di persona this è persona quindi dentro this di snom e questo nome è luca e quindi questo è il ragionamento che ci sta dietro di slow vedremo sempre sempre sempre quindi con questo abbiamo veramente fatto tutto abbiamo guardato nel dettaglio le basi degli oggetti e

vi ringrazio per essere Ma sti come noi ci vediamo al prossimo episodio dove parleremo di come avevo già detto javascript object oriented per principianti e quindi ci sarà tanto di cui parlare allacciatevi per l'ennesima volta le cinture che qua la cosa si fa non seria ancora più seria ringrazio ancora una volta vi ricordo che in descrizione cioè tutto telegram se vi serve eccetera come supportare il canale in vari modi e niente alla prossima ciao ciao un buongiorno a tutti Bentornati episodio numero 14 e il corso di javascript quest'oggi andiamo a introdurre la programmazione orientata agli

oggetti oppure opi che sta per object oriented programming allora è un argomento abbastanza è importante ed è un argomento abbastanza delicato da capire questo è ciò che andremo a vedere perché e cos'è lo pi definire una object template parleremo delle classi della strada dell'astrattezza e quant'altro andremo a Vedere con la documentazione che riporto delle belle immagini ad esempio andremo a creare il costruttore i nostri costruttori ea farli stanze di un oggetto con questo esempio allora che cos'è l'object oriented programming e perché si usa da giorni vi parlo di da episodi vi parlo di degli oggetti

e di come noi vogliamo prendere gli oggetti che esistono nella realtà e vogliamo portarli nel nostro programma al fine di correlare i dati in Modo logico e poterli usare con una certa facilità questa cosa ci permette di far diventare i nostri programmi complessi ma sicuramente più semplici da interconnettere tra di loro quindi inter per metter le varie parti nel nostro programma che continua a crescere col crescere del progetto ma diventa semplice da gestire perché abbiamo dividere il programma appunto in in oggetti e quindi in parti logiche se così non fosse noi avremo righe righe Righe

di codice di funzioni che fanno certe cose e tonnellate di variabili che magari proviamo a dividere per logica in file ma sto punto non sarebbero comunque accessibili tramite la notation che abbiamo fatto qui non potremo avere il file per la gestione del database tipo database punto js il file per la gestione in javascript del menu e delle altre cose meno punto js e potremmo avere qualcosa per gestire la tabella del funzionamento quindi immaginate del Genere però ho scritto come abbiamo visto noi interamente con funzioni e variabili senza oggetti quindi come facciamo poi andare a prendere

specificatamente da quella quella cosa diventa un disastro quindi abbiamo accesso a tutto o non abbiamo accesso a niente a volte e diventa veramente difficile soprattutto leggere il codice e gestirlo e mantenerlo se invece voi pensate come abbiamo fatto negli episodi precedenti la nonna creare degli oggetti Quindi è l'oggetto database l'oggetto navigazione noi potremmo accedere a queste funzioni a questi metodi o queste proprietà semplicemente con database punto connetti o database punto trova tabella oppure punto navigazione navigazione punto vai a e mettiamo il parametro dove vogliamo andare quindi capite che è molto più semplice gestirlo una volta

che il nostro programma non è tanto in sé diviso per file coerenti ma è diviso Per oggetti coerenti in questo modo possiamo andare a prendere l'oggetto che ci serve quando ci serve e andare a salvare all'interno dell'oggetto le proprietà i metodi chiamarli come vogliamo quindi questo è il motivo per cui andiamo a lavorare in co op andiamo vedere quindi le basi della opi la prima cosa da fare è definire un template dobbiamo definire un template dell'oggetto ok quindi cosa devo fare nell'esempio qualche ci riporta vuol Andare a creare studenti e insegnanti quindi potremo andare a

fare un programma che gestisce studenti e insegnanti potremmo segnare tante cose potevano segnare i voti le materie degli insegnanti della classe quindi avremo tanti tanti oggetti in questo caso abbiamo studenti e classi la prima cosa che andiamo a fare è l'astrazione ovvero andiamo a prendere il concetto reale studenti insegnanti e andiamo ad astrarre che cos'hanno in Comune le due cose sono persone ok sono persone quindi la prima cosa che andiamo a fare è creare un oggetto o classe vedete che qua cominci a definirlo come classe cominciato a prendere confidenza con il nome classe devo creare

un template di un oggetto definito classe in questo caso andiamo ad astrarre tutto e creiamo una persona ok quindi provate a seguire il ragionamento uno studente e un insegnante sono due entità diverse ok ma Sono persone quindi hanno sicuramente qualcosa in comune pur essendo dalla parte opposta della cattedra pur avendo ruoli differenti pur avendo età differenti che cosa hanno in comune le tutte le persone a prescindere dal loro dal loro mestiere da quello che fanno hanno un nome che qua divide come first game la snake sarebbe il nome e cognome io preferirei mettere nome sotto

cognome hanno un età hanno un genere di sesso hanno degli interessi qua mette una Biografia che va a specificare quello che è la persona una descrizione equa ammette dei saluti ovvero ciao sono col mio nome questa è una persona quindi ogni persona a rigor di logica dicevamo a tutte queste proprietà e ogni persona ha una propria descrizione e è in grado di salutare ciao sono e mette il proprio nome questa è la stazione della persona da questa persona noi possiamo creare delle istanze dell'oggetto ovvero una volta che ne Abbiamo questo stampino immaginate letteralmente uno stampino

immaginatevi non so neanche come descrive lo provate a immaginare non lo so forse un timbro oppure veramente una stampa in cui mettiamo dentro del materiale stampiamo ed esce fuori in 3d quello che ci interessa che hai provato a immaginarlo così quindi abbiamo il nostro stampino persona ok che ha sempre la stessa forma e noi andiamo semplicemente a mettere dentro Dei dati differenti quindi uscirà sempre una persona uscirà sempre un'istanza ogni miniatura che abbiamo la miniatura tra di ogni miniatura tardi che esce da questo stampino è un'istanza dell'oggetto ok quindi questa è la classe lo stampino

è la classe tutto ciò che esce è un'istanza dell'oggetto ok perché la classe altro non è che un oggetto quindi non stampiamo fuori vedete questa è persone della classe stamo e stiamo Compiamo una volta e facciamo un istanza si chiama letteramente fare un istanza quando stampiamo quindi stampiamo e facciamo un istanza esce la persona uno che siamo a bob smith ha 32 anni è un maschio eccetera eccetera stampiamo un'altra volta ed esce daiana coop 28 anni fine il kickboxing brewing bruyn sarebbe far la birra ok alle sue cose ai suoi saluti e ai suoi interessi

alla sua bio e questo è abbiamo stampato due volte potremmo Farla all'infinito e generare infinita in miniatura e 3d e spero che la metafora v vi sia d'aiuto scriveremo per fare sotto nei commenti questo è importante quindi che cosa abbiamo fatto abbiamo usato il costruttore non usato la funzione costruttrice della classe per creare delle istanze ok dopo il morire che cos'è il costruttore il costruttore è quella funzione che permette alla classe di essere utilizzato appunto come stampino e Generale le istanze degli oggetti per ora vuol dire tutto e niente seguitemi continuate a seguire questa metafora

una volta che abbiamo la nostra classe persona vorremmo appunto utilizzare la classe studente e la classe insegnante perché se avete seguito il concetto di proprietà voi capite che l'insegnante ha delle proprietà diverse rispetto allo studente un esempio potrebbe essere la materia che insegna ok la persona Tu non puoi andare a una persona per strade gli tu che materie insegne no io sono un avvocato non insegna niente aiola voi non magazzino io non insegna niente quindi la per le persone hanno tutti il nome cognome unità e un sesso ma l'insegnante a una materia che insegna quindi

voi capite che noi non possiamo generare effettivamente delle entità reali semplicemente dal concetto di persona quindi se vogliamo creare un insegnante dobbiamo andare a creare un Oggetto insegnante che ha tra le tante cose nome cognome età sesso interesse eccetera materia che insegna ok oppure classi in cui insegna mentre invece dall'altra parte abbiamo lo studente abbiamo lo studente non sto andando giù per non spoilerarvi niente abbiamo lo studente che ha nome cognome età classe bla bla bla voti alla classe di riferimento ai voti e magari potrebbe avere i Compagni tutto potuto quello che volete potrebbe avere

delle cose determini determinanti esclusivamente per lo studente in questo caso facciamo voti materie preferite mentre invece l'insegnante alle classi era classe mentre invece l'insegnante avrà le classi in cui insegna ok e soprattutto la materia quindi con citano gesù materia da una parte e voti dall'altra voi capite che però noi non possiamo andare ogni volta a riscrivere tutto per Ogni singolo tipo di entità nuova pesate insegnanti studenti avvocati magazzinieri tutto quello che volete ogni volta dovremo andare schiere nome cognome età interessi descrizione saluta bla bla bla che cosa facciamo andiamo a creare una sottoclasse o una

child class quindi una classe figlio andiamo a creare una classe dalla classe persona che eredita tutto quello che ha la classe persona guardiamo questo esempio qui allora abbiamo la classe Persona che sa tutto quello che abbiamo detto che hanno le persone che siano insegnanti studenti avvocati e via discorrendo verranno dei nomi un'età un genere degli interessi e una descrizione l'insegnante l'insegnante automaticamente andandone a creare una classe figlia eredità tutto ciò che perché la persona la persona tutti siamo persone ma ognuno ha una classe diciamo così lavorativa differente la classe Lavorativa prende da quello che siamo

come persone ok perché tutti abbiamo un nome e cognome eccetera ma abbiamo una cosa extra quella cosa extra è la classe ed è l'oggetto relativo alla nostra professione specifica in questo caso come vi ho detto l'insegnante ha il subject che la materia che insegna quindi noi andremo creare una nuova classe che è figlia di persona quindi non dobbiamo andare di scrivere tutta sta roba qua in arancione semplicemente Viene inherited viene ereditata e noi possiamo accedere al nome dell'insegnante semplicemente perché essendo una persona è chiaro che ha un nome quindi non dobbiamo per forza andare a

definire il nome dell'insegnante nel costruttore nel nuovo stampino ripetiamo lo stampino 3d lo sa già che c'è un nome e un cognome perciò a noi ci basterà ci basterà mettere dentro c'è un'insegnante invece come si chiamano insegnato l'insegnante Si chiama anna rossi quindi lo date per scontato che l'insegnante abbia un nome e un cognome pur essendo un insegnante perché l'insegnante è una persona e quindi per il semplice fatto di essere una persona ok che è la cosa che siamo tutti pur essendo un insegnante che non siamo tutti ha un nome e un cognome ok spero

di averlo spiegato decentemente Quindi questa insegnante ha delle cose particolari che è appunto il sud la materia che insegna in questo caso va a salutare vedete qua e aggiunge anche sono mi chiamo tal dei tali e insegno questa parte qua greeting non è non è un problema per ora non ve la voglio spiegare però sappiate che noi possiamo andare a definire la stessa funzione e possiamo sovrascrivere la quindi c'è possiamo sovrascrivere andando a mettere qualcosa in più voglio che per ora vi Concentrate solo sulle proprietà e non sui metodi stessa cosa lo studente qua non

mette niente sufficiente vedete che rifà il saluto greeting e anziché essere così fiscale nome e cognome cesa dice io bella sono in questo caso bob è bassa quindi da una classe abbiamo creato due classi figlie che ereditano le proprietà e alcuni metodi i metodi potrebbe essere sovrascritti perché vedete che qua greeting c'è e lo scrive in un certo modo qua c'è ha mai scritto in un altro Modo e qua c'è ancora quindi possiamo andare a sovrascrivere il modo in cui le persone fanno certe azioni quindi in base alla nostra classe alla sottoclasse andremo a salutare

in modi differenti avremo proprietà diverse proseguiamo e vi faccio vedere non più dalla documentazione ma vi faccio vedere nello specifico dal nostro esempio andiamo a creare il primo oggetto andiamo creare un costruttore a fare delle istanze come bretto il costruttore è quella funzione Che ci permette di andare a costruire un oggetto o in questo caso una classe quindi andiamo abbiamo il nostro oggetto persona mettete il maiuscolo davanti a un oggetto che sarà poi la nostra classe prima o function persona e sotto potremmo avere se vogliamo avere dei figli function l'insegnante eccetera per ora restiamo con

il costruttore persona voglio renderlo semplice poi nei prossimi episodi andremo a vedere del Animo delle sottoclassi l'ereditarietà e quant'altro abbiamo la nostra persona e nella nostra persona noi dobbiamo passare dei dei riferimenti quindi ha un nome e un cognome netta un genere un interesse che andiamo a passare come vedete vi ricordate this che di persona di snom e che non fa riferimento a questo di snom e vuol dire che questa persona ha un nome ok non andiamo a definire un altro modo sufficiente di snom e è uguale a il nome che ci viene Passato vi

ripeto di poter usare cose qua a caso letteralmente potrei far così non cambia niente perché questi sono i parametri della funzione quello che interessa noi è il nome qui ovviamente vogliamo usare una nomenclatura che sia coerente perciò vi troverete più spesso this non uguale nome disponiamo quale ha come però è facilmente leggibile seppur ripetiamo la stessa cosa tre volte cognome disco gnomo guala cognome ok è così e ridondante ma va bene lo stesso Quindi di snom è uguale al nome che passiamo disco gnome gola il cognome l'età stessa cosa il genere è un genere gli

interessi quando iniziamo solo interessi per quello che sa per quello che sappiamo potremo strutturarlo come vogliamo in realtà qua sarà un array va bene quello che abbiamo sotto andiamo a creare subito un metodo quindi il metodo è la bio la biografia la descrizione ok che è una funzione anonima le abbiamo già viste e in questa funzione Andiamo a mandare a schermo qualcosa col console o che ci arriviamo subito vi faccio vedere prima questo che è più veloce abbiamo la funzione abbiamo il metodo saluta quindi la nostra persona andrà a salutare ciao sono di snom è

ok quindi vi ricordate che aveva messo i template literals che cern è tutto più semplice abbiamo me abbiamo quindi usato l'espressione e devo prendere ed il nome quindi di snom e va a prendere questa Persona di questa questa persona nome questa persona nome è uguale a questo che a sua volta guarda il parametro che noi passiamo arriviamo invece qua a vedere nella bio nella bio vedete che ci sono tre righe sono abbastanza lunghi ne ho fatto qualcosa di importante perché volevo già a farvelo vedere allora noi facciamo un console log dove diciamo siamo formati in

questo caso è qua ho sbagliato non mettere disco nome allora di snom e quindi this nome e Cognome in questo caso faremo luca rossi per ora è solo generico comunque nome e cognome è equa c'è l'espressione non so se ve la ricordate col turn ha ri operator quindi l'abbiamo visto se non l'avete visto tornate nei nel video i files e sui e switch cioè il ternario operator alla fine quindi è una sorta di if inline molto comodo quindi questa è l'espressione guardate le parentesi graffe sono la differenza perché sono si Confonde con tutto il resto

ok guardate queste parentesi graffe this genere quindi vede che qua c'è la condizione iv è letteralmente se questo genere se il genere di questa persona è maschio punto di domanda mi fai una cosa altrimenti due punti me ne fai un'altra se il genere è maschio scrivi un ragazzo 7 altrimenti scrivi una ragazza questo perché noi stiamo dicendo nome e cognome è un ragazzo oppure nome e cognome è una ragazza altrimenti sarebbe scorretto Quindi l'abbiamo l'abbiamo reso dinamico e vi ho detto che avremmo usato i ternani operator tantissimo fin da subito quindi il nome e cognome

è un ragazzo o una ragazza di di seta ha quindi anni quindi di vent'anni 18 anni sedici anni 25 anni facciamo facciamo una ragazza un po più in là di 60 una ragazza di 65 anni insomma si vedono tante ragazze di 65 anni a cui piace equa volevo mettervi semplicente un'altra espressione di interessi che è Un array e andiamo usare un metodo che vi ricordate di quando lo abbiamo lavorato con array e stringhe joint quindi prende l'array tutti gli elementi e ce li mette come stringa separate esclusivamente da virgola e spazio adesso vi farò vedere

il risultato questo è il costruttore quindi ogni volta che andiamo a creare una persona avrà queste proprietà e ve lo faccio vedere non abbiamo bisogno di mandare non abbiamo bisogno di mettere come Parametri bio e saluta perché vengono creati automaticamente l'unica cosa che prende una cosa che dobbiamo passare sono le proprietà i metodi restano allora abbiamo il nostro stampino 3d e adesso cosa facciamo andiamo a creare delle miniature 3d continuo con la nostra metafora ok adesso uso le parole corrette abbiamo create delle istanze dell'oggetto o classe persona ok qui nemo creare un'istanza persona 1 persona

1 e sarà new Persona ok quindi nuova persona la persona uno è una nuova persona che noi prima non avevamo quindi tecnicamente una nuova persona che ha il nome di luca il cognome di rossi l'età dovrebbe esserci l'età è 23 andiamo a mettere il genere che chiaramente maschio e possiamo mettere degli interessi che ho detto che è un array in commentiamo calcio poi virgola basket e basta ok basket e questa è la persona 1 andiamo a fare la persona due Ci basta semplicemente far da persona 2 lei è anna verdi linea 19 è chiaramente una

ragazza e facciamo che ha una passione particolare per la letteratura masterchef e poi mettiamo musica generica ok abbiamo queste due persone ora noi io anzi non noi ma io vi faccio un console ogg vi faccio un console log di persona 1 vedete che ce lo suggerisce già e vi faccio un console og di persona 2 andiamo a vedere quindi ricapitoliamo cosa abbiamo fatto abbiamo il nostro costruttore quindi l'anno il nostro costruttore di una persona che ha dentro un po di cose e l'abbiamo già viste siamo andate a creare un'istanza grazie al costruttore qui ne abbiam

preso lo stampino ci abbiamo buttato dentro il materiale che ci serve luca rossi maschi 23 bla bla bla abbiamo fatto anche per la persona 2 adesso andiamo a vedere il Risultato dal console ogg andiamo a vedere f12 allora qua ci da due oggetti persona come potete vedere e abbiamo tecnicamente la nostra bio ok questa è una funzione dopo dopo la usiamo ma come potete vedere abbiamo rossi età giustamente ce lo mette in ordine di in ordine alfabetico delle proprietà quindi cognome rossi nome come vedete luca genera è maschio età 23 interessi calcio E basket alle

funzioni ha già i metodi bio e saluta lo vedete qua ci da f come console se passo sopra rete con sull'out ciao sono di snom e stessa cosa qua e poi abbiamo anna verdi che una ragazza di 19 anni quindi come potete vedere siamo andati a creare due oggetti totalmente diversi da un unico stampino abbiamo creato due miniature due istanze dell'oggetto totalmente diverse indipendenti con le loro proprietà con i loro nomi c'è il loro nome i loro Cognomi loro interessi quindi sono effettivamente se noi fossimo nella realtà sarebbero due persone totalmente diversi con i loro

interessi il loro nome il loro cognome e la loro vita nel nostro programma sono semplicemente due oggetti persona differenti a cui possiamo fare riferimento in maniera differente e possiamo utilizzare in modo diverso ora andiamo a mandare a schermo andiamo utilizzare la funzione di entrambi quindi facciamo Persona punto persona 1 facciamo saluta ok facciamo salute lo facciamo anche per la 2 cominciamo così vi faccio vedere come come cambia sono sono due persone diverse che utilizzano lo stesso metodo che hanno ricevuto dal costruttore quindi dal loro stampino andiamo a vedere ciò sono luca ciao sono anna è

vero perché sono due persone totalmente diverse andiamo a vedere invece non ha senso che Lo faccio vedere per entrambi voglio solo farvi vedere la bio che è molto complessa la bio abbastanza complesse voglio far vedere risultato ve lo voglio far vedere perché non tanto per vedere cos'è il metodo che abbiamo già visto con saluta ma perché come so tanta roba e vi voglio far vedere qual è il risultato luca rossi è qua sono nato a capo vedete che io sono nato a capo qua e usando i template e literals mi prende la capo se Non

volessi andare a capo dovrei riportare tutto in linea ma ho scritto talmente tanto codice che saremmo dovuti andare a estra quindi questa formattazione qua è semplicemente perché io nei template literal sono andato a capo e ola come si chiama e ho lasciato la tabulazione quindi questa tabulazione qua che vedete in blu è letteralmente questa tabulazione quindi lasciate perdere la formattazione del testo Concentriamoci sul risultato luca rossi è un ragazzo di 23 anni a cui piace calcio.basket qua c'è una piccola cosa noi potremmo mettere le virgole per tutti gli interessi tranne l'ultimo dove mettiamo è però

andremo a fare un lavoro che in questo specifico video non serve quindi ho fatto a sufficiente uno split un joint scusatemi dove prendo tutti gli arredi tutti gli elementi dell'array li mette in una stringa le di video da Virgola e spazio se vi ricordate andiamo a vedere anche persona due perché si vede proprio la differenza del ternario operator quindi anna verdi è una ragazza 19enne piace letteratura massa chef e la musica ok quindi come avete visto due persone diverse stesso stampino otteniamo due risultati diversi in base a i metodi quindi il metodo fa esattamente la

stessa cosa ci dalla loro descrizione salutano ma in base alle loro beta che sono diverse abbiamo Risultati diversi e il fatto questa qua la parte più bella un ragazzo e una ragazza dipende appunto dalle terre natìe operator che noi abbiamo messo qui dove andiamo a dire se il nostro oggetto persona è maschio fai una cosa altrimenti ne fai un'altra quindi questa era l'introduzione non così veloce al alla programmazione ad oggetti se avete capito questa lezione state cominciando a capire perché dovremmo suddividere il nostro programma in Oggetti ma vi verrà più chiaro quando andremo avanti perché

un conto è creare delle persone un conto e comincia ad avere l'oggetto come vi dicevo della navigazione del database e di altre cose che sono maledettamente astratte nel mondo reale non esiste un oggetto database non esiste un oggetto navigazione quindi può essere più difficile da capire come strutturarlo e vi posso capire perché ci sono passato anch'io per ora va bene Così se avete capito che cos'è una persona una classe le istanze di una classe le classi figlie che poi vedremo che cosa sono i metodi le proprietà i costruttori voi siete a posto e possiamo andare

avanti col nostro corso se avete problemi potete scrivermi in privato se avete fatto l'abbonamento al canale potete commentare sotto tranquillamente senza problemi potete scrivere nel gruppo d telegram che è sotto in descrizione Ripeto per supportare il canale cioè la vetrina amazon sedicente comprando le vostre cose o ciò che è consigliato se vi interessa io ottengo un supporto in percentuale e in più ci sono gli abbonamenti attivi io ringrazio ne scegliamo prossimo video ciao ciao buongiorno a tutti bentornati episodio numero 15 che il corso di javascript quest'oggi andiamo a vedere le classi e l'ereditarietà in javascript

allora qua vedete che non parla di classi ma ne Parla in fondo quindi ho pensato posto importante metterlo nel titolo come prima cosa ovvero andremo a vedere le classi ma per arrivare le classi guarderemo l'ereditarietà piccola nota a margine questo è un episodio seguente la quale mi ha imparato degli oggetti ok abbiamo dato degli oggetti che sono gli oggetti abbiamo parlato del copy quindi object oriented programming e quindi dobbiamo andare a vedere come creare l'insegnante ben creato la persona deve Andare a vedere come crearli l'insegnante attenzione però come abbiamo fatto prima e tramite javascript basico

mentre invece adesso continueremo con javascript basico solo per far vedere il concetto che sta appunto alla base ma poi ci sposteremo sulle classi tra il pisodio precedente e questo avrei dovuto fare un episodio sui prototipi questo perché io voglio dire una cosa ogni oggetto in javascript si basa su un prototipo esegua c'è proto ea una serie Di cose collegate ok si chiama appunto prototipi javascript si basa sui prototipi qual è il fatto che per come si è evoluto javascript ok e per cominciare a mettervi a programmare come principianti non credo sia bene parlare di prototipi

questo perché javascript si è evoluto nel corso del tempo perciò possiamo dire che una persona può tranquillamente sviluppare javascript senza sapere chi alla base Lavora di prototipi questo perché e ci arriveremo nel 2015 state introdotte le classi quindi stata una mia scelta per non caricarlo informazioni è difficile capire i prototipi per non caricare di informazioni ho deciso di non trattare quell'argomento perché lo ritengo difficile da spiegare per me è difficile da comprendere secondo me perché appena cominciato quindi continueremo con javascript base che funziona prototipi Vi faccio solo vedere il passaggio dell'ereditarietà e poi passiamo subito

alle classi se volete imparare dei prototipi vi basta andare alla sezione precedente di questa pagina vi parla di prototipi c'è un po di roba ok sicuramente troverete delle spiegazioni se siete veramente interessati mi chiedete un video bonus a parte e io eventualmente ve lo faccio ma io personalmente ritengo che una persona anche un principiante può Tranquillamente imparare a programmare javascript con le classi senza preoccuparsi di come funzionano i prototipi ormai una cosa che sta talmente alla base di javascript che voi potete anche non vederla se siete veramente interessati sul funzionamento allora un altro discorso detto

questo andiamo avanti e vediamo appunto qual è la scaletta nota volo fare questa autostrada di prototipi l'ho fatta andiamo a definire il costruttore di una Classe figlia quindi abbiam parlato di persone azione ma parlare di insegnante come possiamo realizzare da un costruttore senza parametri sempre in questo caso di prototipi sovrascrive amo un metodo andremo a vedere le classi ecmascript che sono state aggiunte nel 2015 l'ereditarietà delle classi iii letters e i7 io ho riprodotto la persona che è diversa dalla persona che mi hanno fatto nell'episodio precedente ho voluto Tenerla un po più un po più

corta quindi ma un nome cognome età genere interessi qua c'è tutto e qua c'è la funzione saluta ok adesso dalla persona vogliamo andare a creare un insegnante come andiamo a creare questo insegnante devo fare function insegnante mettiamo tutto quello di cui ha bisogno un insegnante quindi nome cognome età genere e interessi ok sono le basi di una persona in più abbiamo la materia fin qua mi seguite Quindi questa prima linea di codice non è un problema ok il problema viene dalla seconda parte andremo a fare persona punto col ovvero andiamo a chiamare la persona mettiamo

this è fondamentale per far riferimento all insegnante e alla persona e poi li agganciamo quelle che sono i parametri del costruttore persona ok quindi qua abbiamo tutto ciò che un insegnante ha bisogno che quindi è nome quelli metà Gen interessi più materia quandi amo a chiamare la persona che ciò da cui noi deriviamo egli passiamo tramite questo oggetto gli passiamo i dati che gli servono vedete questi venti che si highlight a tutto questo perfetto dopodiché sotto andiamo a lavorare sulle cose extra extra persona ovvero 9 che sono specifiche insegnanti in questo caso materia io ho

messo qua saluta possiamo far così potremmo fare l'over ride potremmo sovrascrivere a Tramite il prototype eccetra ma non ve l'ho spiegato perciò semplicemente noi ci mettiamo qua e rigeneriamo la il saluto a parte quindi questo è specifico per le persone se noi non mettiamo saluta dopo lo faccio vedere andrà perner direttamente questo andandolo a sovrascrivere decido di fare in questo modo appunto perché vi ho saltato i prototype comunque andando a vedere questo esempio capirete appunto il concetto di ereditarietà degli oggetti Andremo a vedere allora ho creato un insegnante quindi anna blu o malata schermo un

insegnante e ho fatto saluta andiamo a vedere abbiamo la nostra insegnante che vivete che blu quindi anna blu 32 anni è femmina il suo interesse preferito e netflix la materia che insegna è storia andiamo a vedere che ha salutato buongiorno sono anna blu in questo caso perché abbiamo creato saluta vedete sull'insegnante ma se noi andiamo a Togliere questo guardate ciao sono anna perché lei a meno che non sovrascrive amo il il metodo saluta alla fine lei è una persona perciò saluta come una persona normale essendo un insegnante quando è nei panni di un'insegnante lei saluta

come un insegnante vero buongiorno sono anna blu e questo è il concetto di ereditarietà praticamente nel caso noi avessimo un costruttore senza parametri poniamo il caso che abbiamo letterale Niente un function persona senza parametri ok quando non passiamo niente in modo dinamico ci basterà semplicemente chiamare così quindi faremo persona punto col this rilasciate per tutte ste cose qua avrà semplicemente la materia ok quindi sarà così andremo portare materia uguale materia ma se persona non è così ma è semplicemente uno stampino di una classe senza parametri ci basterà fare persona col diesel andando noi Invece ad

avere parametri extra dobbiamo sempre chiamare il ds poi i parametri axa quindi nel momento in cui il costruttore non ai parametri semplicemente togliamo tutto questo e siamo a posto e vicende con questo di stiamo dicendo che il nostro oggetto insegnante fa riferimento a persona andando a mettere i parametri sani cenno che l'insegnante fa riferimento a persona e passa tutti questi parametri perché sono parametri di persona ok Molto semplice andiamo a vedere le ma script del 2015 allora non sto entra nei metodi cos'è ekma script eccetera vi basta fare una ricerca possiamo dire che vi sintetizzo

possiamo dire che nel 2015 sono state introdotte le classi e tante altre cose molto interessanti le classi sono state introdotte per avvicinare javascript intanto fatemi cancellare tutta sta cosa qua sono state fatte per avvicinare javascript a linguaggi di programmazione Come ad esempio java c plus plus e via discorrendo ok ora le classi ci rendono tutto molto più semplice da gestire e se da e se darete un occhio anche veloce ai prototipi capirete la differenza nel lavorare con le classi elaborare ad oggetti come abbiamo fatto prima ok però le classi derivano dagli oggetti di prima quindi

è un grande salto ma è il motivo per cui non vi ho spiegato i prototipi perché tanto ormai essendoci queste per cominciare o tranquillamente Per andare avanti nel vostro percorso non avete bisogno di saperlo se lo volete sapere ripeto è una cosa in più allora riteniamo ciò che abbiamo fatto come facciamo anzi che avrei function persone eccetera noi abbiamo creare as persona ok quindi abbiamo class la questa è la keyword parola chiave importantissima class persona apriamo abbiamo il costruttore quindi schiano constructor questa volta è fondamentale Non abbiamo più fa anche un persona ed e c'è

il costruttore direttamente questa persona ha dentro un po di cose ok quindi constructor e andiamo a dire abbiamo semplicemente a dire che nel constructor mi passi i soldi parametri e poi come abbiamo fatto prima mi attacchi alle alle proprietà di persone agli attacchi i parametri e fin qui ci siamo poi abbiamo saluta abbiamo la solita abbiamo solito metodo e questa è la Nostra classe persona ora andiamo a creare un segno una classe l'insegnante anziché fare il giro persona appunto col di sé cetra semplicente schermo e xtend persona vedete come molto più semplice cioè se noi

leggiamo questa prima parte rispetto a quello che abbiamo fatto prima classe l'insegnante estende persona quindi sappiamo che l'insegnante è un'estensione di persona leggendo letteralmente glass non ci interessa Leggendo letteralmente tre parole sappiamo di cosa stiamo parlando ovvero oppure è sempre che potremmo avere altre parole chiave ma semplicemente ci rendiamo conto che xtend due parole insegnante deriva da persona punto è così semplice arriviamo alla parte del costruttore il costruttore estendendo dobbiamo fare qualcosa abbiamo i nostri soliti parametri come prima abbiamo materia che trattiamo a parte ma Qua anziché avere se vi ricordate persona appunto col di

svirgola si toglie tutta sta roba perché persona è già segnata qua non dobbiamo chiamarla non serve il dis l'unica cosa che ci rimane è la parola chiave super super bowl dire sopra quindi immaginatevi giustamente l'abbiamo definita qua immaginatevi che l'insegnante anziché fare persone appunto col semplicemente manda sopra manda a persona quindi super è sopra manda sopra questi parametri Sopra anche inteso non solo di codice come il fatto che persona stia sopra di insegnante da cui l'insegnante deriva quindi immaginate l'albero genealogico persona è il il parent il genitore di insegnante perciò mandiamo sopra il nome cognome

età genere interessi quindi super tutto questo nel costruttore quindi costruttore parametri super se c'è qualcosa da mandare su nel caso persona non avesse niente tipo come abbiamo visto prima per i costruttori Vuoti semplicemente ne qua avremo su per niente ok quindi super mandiamo i parametri che ci interessano che sono questi qui materia ce lo gestiamo a parte perché esclusivo di insegnante e siamo a posto ovviamente vi ho detto che le classi insomma ogni classe ai propri metodi alle proprie proprietà quindi la proprietà materia l'abbiamo definita ma adesso vogliamo fare un nuovo un uomo metodo non

ho voluto creare un altro Saluta diverso perché però non c'era motivo volevo farvi vedere nello specifico che noi possiamo creare cose extra quindi l'insegnante farà delle azioni che una persona normale non fa in questo caso un insegnante fa riprendi alunno io nasco un attimo tutto sta cosa qua ho creato l'insegnante e vorrà fare l'insegnante punto riprendi alunno vedete che ce lo da e dal uno che va a riprendere è il sottoscritto una cosa è successo spesso nella mia vita L'insegnante riprende alunno edoardo andiamo a vedere edoardo non si mangia in classe perfetto insomma questo è

proprio quando diciamo che prendiamo cose della realtà e li mettiamo nella programmazione queste sono proprio situazioni reali successe che mettiamo nella programmazione detto questo come potete vedere riprendi alunno quindi è un metodo esclusivo di un insegnante che niente a che fare con persona e volevo di mostrarvi come possiamo appunto Aggiunger metodi extra non dovete semplicemente basarvi su la classe da cui deriva oppure semplicemente sovrascrivere metodi che già esistono potete aggiungere cose che volete molto bene ora per concludere che cosa sono i get the r's e i setters volendo noi potremmo tranquillamente accedere alla nostra insegnante

materia così l'abbiamo fatto con la dott notation break io scrivo su vicende insegnante materia e siamo a Posto tuttavia se vuoi andare a modificare insegnante materia avete chiuso fatto sto andando a chiamare insegnante materia e ci dà la materia che abbia messo qualche storia ok quindi insegnante materia alla riga 64 è storia ritorna poi voglio andare a modificare insegnante materia matematica una volta che lo modificata voglio andare a chiamare andiamo a vedere perfetto tuttavia anche se questo approccio Funziona è importante mettere dei get the r's e dei setters anche se questo approccio è giusto noi

vogliamo avvalerci di ciò che javascript ci mette a disposizione che realtà tutti gli altri linguaggi di programmazione in cui lavoriamo quelle classi ci mettono a disposizione che sono i get the r's ei setters allora andiamo a far così adesso vi spiego la sintassi e andiamo a vedere noi stiamo facendo get materia ok quindi questa parole chiave Che ci vengono date get materia che esiste solo perché c'è materia altrimenti non esisterebbe è una funzione che ci ritorna this materia ora questo non potrebbe potrebbe non tornare uno dice ma è di materia per getter 67 dovete mettere

l'under scor ok è fondamentale soprattutto sono in coppia se ne manca uno l'altro non funziona vedete che ci dà problemi se ce n'è uno e l'altro no ci dà Problemi quindi ghattas setters devono funzionare in coppia dall'altra parte set materia nuova materia andiamo mettere this materia o uguale nuova materia quindi possiamo andare a utilizzare i get the r's e setters praticamente per ogni per ogni proprietà che abbiamo questioni getter si setters ottima nonostante noi possiamo a certi in altro modo direi di usarli perché sono una proprietà che ci vengono data è ottimale appunto Utilizzarli quindi

cominciate a prendere confidenza con get the r's e 7 quindi noi ci vediamo nel prossimo episodio dove parleremo di jason andiamo a lavorare già con jason se avete fretta e il video il video di jason non è ancora uscito sappiate che io avevo già fatto l'anno precedente un video appunto su jason che probabilmente non so se sia ego nettamente questa struttura vi dice le stesse cose perché jason non è cambiato ed esattamente uguale se invece Volete restare col corso probabilmente sappiate che sarà impostato in modo diverso e quindi parleremo di jason che è un ottimo

formato per passare i dati 1 time informati preferiti e niente io vi ringrazio e vi ricordo che descrizione cioè tutto quello che vi serve per sostenere il canale o per restare sempre aggiornati o per avere per far parte della community in cui trova altre persone con cui sviluppare io vi ringrazio alla prossima ciao ciao 1 Giorno a tutti bentornati episodio numero 16 oggi diamo parlare di jayson allora se avete se non avete avuto pazienza fine del video precedente si e ternate cercare l'altro video che avevo fatto molto probabilmente se non erro non abbiamo fatto esempio

su come chiamare jason da un fa l'esterno e lavorarci internamente cosa che andiamo a fare adesso se invece per caso l'ho fatto e non mi sono ricordato mega fa il mio scusatemi allora andiamo a vedere Allora andiamo a vedere che cosa c'è in che cosa bolle in pentola oggi che cos'è jason la struttura di un jason gli array come jason guarderemo delle note come possiamo ottenere un jason elaborare la definizione è che jason sta per javascript object notation abbia già parlato della della notation in generale con la dott notation bracken notation quindi è un modo

in cui mettere i dati è un standard text bass quindi è uno standard viene utilizzato tantissimo e Il suo formato è text based quindi e rappresenta una struttura di dati ok basata sulla sintassi degli oggetti javascript che cosa ho appena detto allora opera detto che ripetiamo questa frase jason è uno standard perché è utilizzato ovunque ok questo standard è basato sul testo ok è un formato testo come vedremo quindi è uno standard di passaggio dati basato sul sul format testo che rappresenta dei dati Strutturati ok abbiamo visto i dati strutturate me già fatto esempio degli

oggetti ed effettivamente questi dati strutturati riprendono la sintassi degli oggetti di javascript riformuliamo un'altra volta in modo terra terra jason è un modo di passare i dati molto simile agli oggetti di javascript quindi ricordando gli oggetti di javascript differiscono un pochino e basta questo è quando passiamo jason noi passiamo jason in realtà passiamo una Stringa ecco perché è text basin realtà poniamo passare una stringa che verrà passata sarebbe parse to pars quindi andiamo poi a trasformarla in quelli che sono dati effettivi quindi noi abbiamo il nostro oggetto lo trasformiamo in jason quindi lo scriviamo lo

scriviamo un certo modo lo trasformiamo in jason che diventa una stringa lo mandiamo dall'altra parte è scritto in un certo modo per cui noi possiamo andare a ritrasformarlo senza problemi perché è Sempre scritte allo stesso modo la struttura è identica quindi una volta che c'era questa struttura contenuta in una stringa togliamo la stringa otteniamo i nostri dati e li possiamo leggere questo e jason andiamo a vedere la struttura allora per la struttura qua vi faccio vedere velocemente questo esempio mandiamo a creare il nostro allora vedete qua in tanto che a lei a pc perché si

parla di stringa appunto probabilmente qua sta scrivendo noi non Fa il jason ma sta scrivendo dentro un file javascript quindi deve farlo diventare una stringa quello che abbiamo è un oggetto vedete abbiamo le cover li bracket che sono le parentesi graffe abbiamo le proprietà e abbiamo i dati che fanno riferimento quindi abbiamo un po di cose abbiamo delle stringhe abbiamo un numero abbiamo i bulian abbiamo un array vedete qua abbiamo un array che è lungo fin qua che a sua Volta contiene degli oggetti che a sua volta alle sue proprietà e la proprietà ha sotto

array e potremmo andare avanti all'infinito lasciamo perdere questo esempio qua che è l'esempio di supereroi che uno degli esempi più classici che vedrete online arriviamo al nostro esempio io qua ho creato la classe jason ok ho creato una classe andiamo a riempirla quindi apriamo aprire un file punto jason quindi fate qua novo fa il punto Gesone siete a posto entriamo qua dentro forli bracket e cominciamo a mettere i dati di questa classe innanzitutto la per caso che dobbiamo fare il nome della classe in questo caso è la quarta ok quarta potremo mettere per assurdo la

scuola la scuola e scuola superiore mia ok virgola questa scuola anzi non superiore ma scusatemi scuola elementare lo faccio per un motivo specifico questa classe sapete che alle elementari se non Son cambiate le cose da quando andai io vent'anni fa dovrebbero avere due o tre insegnanti due insegnanti che spiegano fondamentalmente tutto quindi andiamo a mettere insegnanti che sono due insegnanti sono due quindi è una collezione quindi facciamo un array insegnanti abbiamo due insegnanti quindi è un array mi tornano i conti assolutamente sì il primo insegnante sarà lo facciamo da Qua avrà un nome e mettiamo

sempre en blur ma mi ci sono affezionato cognome cognome blu potremmo avere trovare il codice fiscale tutto quello che volete ci limitiamo semplicemente a materie materie insegnate facciamo così e mettiamo un altro ray quindi un'altra lei per le materie insegnate ovvero storia Italiano e facciamo geografia ok italiano e abbiamo geo grafie e questo è il primo insegnante abbiamo facciamo la virgola mettiamo in secondo l'insegnante quindi copriamo direttamente così qua togliamo la virgola e la seconda insegnante è ludovica e blu diventa rossi ok che insegna matematica geometria e non so se c'è qualcos'altro quindi restiamo con

matematica e geometria Fin qua ritorna tutto direi che abbiamo un oggetto ok abbiamo chiaramente un oggetto classe che ha un nome che ha una scuola di riferimento che ha degli insegnanti che sulla temi quarta si ok nelle mentali sono sera fino alla quinta ok quindi questa quarta a degli insegnanti a due insegnanti che si occupano ovviamente hanno nome e cognome entrambi e si occupano di materie differenti ok fin qui è abbastanza semplice come struttura Ora adesso si arriva il bello perché noi abbiamo gli alunni ora ne abbiamo alunni non li metteremo tutti e venti e

passa semplicemente sulla stessa sulla stessa base di questo oggetto insegnanti ne potremmo avere letteralmente un array alunni con dentro il nome nome che facciamo marco virgola cognome facciamo [Musica] qwerty ok sono ragazzo già le pezze coi nomino java c'è più ricopiamo tre volte giusto per disperazione abbiamo leonardo verdi e poi abbiamo maria gialli quindi come potete vedere abbiamo un po di abbiamo una buona struttura ne potremmo andare avanti qua dentro potremmo avere gli interessi come abbia fatto per Persona qualche video fa potremmo avere materia preferita colore preferito potremmo avere gli orari potranno letteralmente avere gli

orari di questa classe quindi cosa insegniamo proviamo a farlo allora potremo avere orari quindi due punti come li strutturiamo facciamo una cosa molto semplice facciamo che tutte le mattine quindi mattina mattina potremmo avere Storia pomeriggio abbiamo italiano e geografia ora scusatemi ma non vado a elementari da un pelo e quindi non so come se non mi ricordo come sono strutturate però avete capito il senso potremmo andare avanti una vita e quindi quando vi parlavo di dati strutturati vi parlavo esattamente di questa cosa questo è un jason ok perfetto e fin qui ci siamo gailly ho

scritto anziché gialli va bene allora abbiamo il nostro jason questa è la Struttura potenziale di un jason potrebbe essere piccolo di un solo livello come nome e scuola così come potrebbe avere più livelli così come quando lavorerete più avanti con ep ai saranno di facebook twitter o quello che vi troverete non una cosa del genere ma un massacro ve lo posso garantire allora torniamo a noi e vediamo gli array come jason perché noi potremmo avere anziché la classe potremmo avere direttamente classi punto Jason ok ma voi capite che classi nel momento in cui e plurale

sicuramente è un array quindi noi prendiamo questa cosa qua che abbiamo scritto la buttiamo qua dentro facciamo virgola e abbiamo un'altra classe come potete vedere dalla quarta mettiamo la prima e potremmo andare avanti per tutte le classi della scuola ok quindi la cosa si fa interessante e cominciamo con un array non cominciamo con le quali bracket quindi cominciamo Con un array e non direttamente con un oggetto ho reso l'idea ha senso quindi questa è la singola classe nel caso ci serva solo la classe nel caso invece avessimo bisogno di un insieme diretto di di oggetti

tutti uguali partiamo con l'array e fin qua tutto a posto togliamo le classi che non ci servono andiamo a vedere delle piccole note jason è una stringa e ve l'ho già detto che poi venne portata come stringa Abbiamo già visto ma solo proprietà e non a metodi ci avete fatto caso a differenza degli oggetti il javascript che avevamo visto che avevano gli oggetti tipo saluta e cose detto quindi scusatemi avere le funzioni avevano dei metodi qua non ce l'abbiamo qua passiamo esclusivamente dei dati non facciamo altro un'altra cosa altre differenze vi faccio vedete qui che

usiamo solo da volquartz per le stringhe non usiamo single coach perché vedete che ci dà Errore quindi tutto in double cos è la cosa che avete notato sicuramente anche se vele segno azzurre come se fossero le proprietà in realtà negli oggetti javascript fateci caso noi non utilizziamo le virgolette qua invece cielo da errore ok quindi affinché abbiamo il blu quassù vsc come se fosse una proprietà anche le proprietà devono essere tra virgolette va bene queste sono cose importanti e poi per Quanto riguarda i dati e che ho dimenticato boolean possiamo contenere tutti i tipi di

dati non è un problema quindi abbiamo andiamo a vedere abbiamo qua una stringa sì abbiamo qua un array sì abbiamo qua un oggetto.si abbiamo dei numeri no facciamo alunni anzi facciamo numero alunni vi faccio vedere che sono attualmente per un numero sono 21 perfetto possiamo avere un boolean Scuola sabato forse non vanno a scuola il sabato vedete che possiamo avere tutti i tipi di dati che ci servono non è non è un problema e quindi questo è un jason e vedete che noi con questo file abbiamo letteralmente descritto una classe praticamente cioè è veramente così

semplice farlo forse complicato all'inizio ma con una buona struttura abbiamo messo tutti i dati di una classe Una classe potremmo sistemare bene gli orari possiamo sistemare bene altre cose ma fateci caso a tutti gli elementi che potrebbero servire per una classe e se mancano gli aggiungiamo ma ha senso quello che abbiamo scritto perché abbiamo un insieme di insegnanti con un sottoinsieme che a loro volta hanno delle altre proprietà e via discorrendo ora come otteniamo un jason da mettere poi in javascript noi potremmo lavorare Direttamente in javascript e fare tipo const james non facciamo così apriamo

le nostre virgolette cominciamo a scrivere il jason tuttavia voi vedete che una cosa del genere ci occupa solo 36 rig e quindi se dovessi far copia e andiamo qua andiamo scusatemi e andiamo qui voi capite che abbiamo un problema ok se dovessimo fare una cosa del genere avremo un problema scrivere un jason Direttamente qui andiamo abbiamo il nostro file esterno e da qua lo importiamo e ci lavoriamo io ve lo posso dire in molti progetti magari io mi ricordo avevo un progetto in cui devo fare la lista delle delle province italiane avevo un jason con

tutte le province italiane quindi capoluogo di provincia la sigla il codice la regione perché queste cose qui aveva un jason bello lungo credo qualche migliaio di righe lo Ha importato e ci ho lavorato l'aqua come lo importiamo allora c'è un altro modo che vedremo più avanti che sarà il fetch ok ma questa è la nuova sintassi se invece vogliamo fare con la sintassi classica ed è giusto che la impariate in questo a questo giro abbiamo fare una richiesta url ovvero l'url acque nemo prendere il il file quindi alle questure non è altro che urla in

realtà è il percorso al file se è una cosa che abbiamo noi il locale quindi però si Mette uno perché potrebbe essere anche on line da qualche parte in questo caso è classe punto jason sullo stesso livello lo vedete stesso livello col punto virgola classe punto jason è questo non ci noi ci possiamo sbagliare abbiamo parlare quest la request è una nuova xlm http rekuest ok è così non ci potete far niente quindi è new xml http rekuest vela suggerisce a un certo punto non abbiate paura andiamo ad aprire questa richiesta la Apriamo un nulla

mandiamo ancora apriamo la richiesta e diciamo che è una get ok 15 passa direttamente vi ricordate c'era ghette post dal avevo accennato che usiamo il metodo get e ovviamente get questo url fin qua tutto a posto diamo il respons type quindi questo oggetto event che questo è un oggetto news abbiamo fatto new quindi un nuovo una nuova richiesta di tipo xml http request è creato un nuovo oggetto l'oggetto utilizzato il metodo apri apriamo ci Buttiamo dentro dei dati ovvero l'url e il tipo di richiesta dopo di che andiamo a settare il il tipo di risposta

in questo caso è un jason perché effettivamente è un jason lo vedete dopo di che facciamo sand per questo punto sam quindi metodo sand e noi lo facciamo e siamo in check ora dobbiamo aspettare che ci torni indietro il file rekuest punto onlus onlus è l'evento quindi se privato abbiamo fatto anche gli eventi sulle vento onlus Quando viene caricato quando viene caricata la richiesta mi fai questa funzione anonima direttamente e cosa vai a fare viva aprendo mib crea una costante classe perché noi stiamo lavorando con una classe che è uguale alla risposta della richiesta andiamo

a mandare a schermo classe vi faccio vedere io a prendere e vediamo che qua ci arriva un oggetto ok perché è stato letto la risposta e jason e c'è stato Già letto come oggetto è già stato sistemato vedete qua in nome senza le virgolette è già stato passato in modo da lavorarci come se fosse un oggetto javascript non è più jason qua e jason qua invece da noi è un un oggetto javascript già pronto per essere utilizzato ok una volta che abbiamo questo noi possiamo letteralmente andare a prendere scusatemi tutto quello che ci serve quindi

noi vogliamo prendere L'insegnante numero due ok vogliamo prendere il cognome dell'insegnante numero quindi facciamo classe punto insegnanti insegnanti prendiamo il numero 2 che è l'uno e prendiamo il cognome salviamo rossi vedete se noi andiamo a prendere insegnante 2 cognome insegnante questo è l'uno questo è il 2 cognome rossi avete visto oppure se vogliamo sufficiente prendere Tutto l'insegnante andiamo periamo l'insegnante così tanto per facciamo insegnante 1 andiamo a vedere vedete che ci da ludovica rossi quindi quello che abbiamo fatto è creare dei dati strutturati ok qui importanti dati strutturati che possiamo utilizzare le abbiamo richiesti con

questa xml http request le abbiamo trasformati da jason a budget fa tutto automaticamente questa richiesta Abbiamo aspettato la risposta della richiesta abbiamo fatto una funzione anonima les bains detto ok da adesso tutto quello che è qua mela segna una costante in questo ho una variabile potevano internet non è un problema mi assegni la risposta quindi questo jason alla classe e la qua possiamo lavorare con la classe senza alcun problema quindi è così che noi creiamo appunto dati strutturati li richiamiamo e ci lavoriamo Io vi ringrazio per essere ma sti con me noi ci vediamo nel

prossimo episodio e niente in descrizione ci sono solito abbonamenti vetrina amazon gruppo telegram che la materia non quello che volete spero sia tutto chiaro lasciate nei commenti se avete richieste o quant'altro e alla prossima ciao ciao un buongiorno a tutti episodio numero 17 del corso di javascript quest'oggi parliamo di concetti generali per quanto Riguarda la programmazione asincrono andiamo a vedere direttamente la traccia ciò di cui parleremo allora abbiamo l'introduzione alla sincrono che cos'è andiamo a dire che cos'è il blogging cod e il concetto di thread andiamo a vedere il multi thread ok e poi vedremo

velocemente del codice asincrono allora che cosa vuol dire che cos'è la programmazione asincrona Allora come come abbiamo parlato fin da html css noi abbiamo detto che il codice viene eletto dall'alto verso il basso ok senza alcun tipo di di salto ok quindi viene eletto il bottone viene eletto quest'altro bottone e poi qua noi andiamo ad aggiungere il clic su questo bottone se questo bottone qua viene inizializzato è assegnato alla costante btm in fondo quindi prima dopo che venga fatto L'assegnazione dell'evento listener click al bottone ci darà errore questo perché ogni tasca facciamo finta che questa

riga o blocco di codice sia un task questo tasche viene eseguito per primo e tutto il resto non verrà eseguito finché non si passa qua e poi verrà seguito questo verrà eseguito tutto questo blocco di codice vedete che qua c'è la c'è la parentesi e comunque questo blocco di codice verrà eseguito così poi così e lo farà per se ci Arriviamo 10 milioni di volte quindi bam bam bam bam bam quando ha finito console log manda manda schermo in un p ok e scrive questo è un nuovo paragrafo e poi va avanti e eventualmente c'è

questo blocco di codice quindi voglio far vedere di cosa parliamo questo qua appunto si chiama blocking cod ovvero il codice a blocchi quindi va avanti e di base ogni tasche blocca l'esecuzione del codice finché non è finito e poi si va avanti Quindi c'è il blocco del codice finché non è finito il tas che questa cosa prende il nome di processo vero che ogni tasca occupa il singolo processo quindi non ci sono altri processi su cui possiamo lavorare il processo viene chiamato thread ok quindi il processo viene definito thread quindi quando c'è questo il processo

interamente occupato da questa da questo tasche poi questo poi questo poi c'è l'altra parte e infine se C'è spazio si va con questo ok credo che si sia capito tutto vi faccio vedere nelle esempio specifico abbiamo due bottoni vai e alert vi faccio vedere vende bottoni vai alert allora il bottone vai fa partire questo for praticamente è un fork è semplicemente calcola la data di oggi new day ci permette di tirar fuori la data di oggi è semplicemente assegna a mai gate la data di oggi punto e lo fa Per un milione di volte mi

sarebbero farvi vedere un carico di lavoro abbastanza importante ok non è un milione probabilmente sono 10 milioni 12 sono 10 milioni dice mi rivolte sono sono abbastanza anche se sarà comunque veloce sono abbastanza una volta fatta questa funzione 10 milioni di volte per nessun motivo andrò a mandarci a schermo mai detto ovvero la data di oggi non solo andrà a mandare a schermo andrà a creare un Nuovo elemento pii quindi lo creerà qui e andrà inserirlo appunto in nel document nel nostro body quindi andrà ad appenderlo qui e ci metterà dentro questa scritta desio a

new leaf ha detto quindi questo è un nuovo paga questo è un paragrafo appena aggiunto ok poi invece abbiamo il bottone alert che quando clicchiamo farà eccomi dunque andiamo a vedere cosa succede io adesso vi faccio vedere l'esempio se greco su alert nessun problema ok lo segue Immediatamente ma se io faccio immediatamente vai all ars guarda un po boom boom ok avete visto avete visto che ci ha impiegato un po e subito dopo è partito eccomi quindi e dopodiché ah beh il paragrafo arriva dopo sufficiente perché eccomi l'alert blocca l'esecuzione comunque avete visto che c'è

una sorta di di lei c'è una sorta di lei importante perché alert partiva subito invece se ne facciamo Così vedete che ci vuole il suo tempo manda schermo il console ogg dopo di che far partire eccomi ok questo arriva dopo vi dicevo appunto per la lett potremmo fare un altro esempio scrivere solo con soul log console punto log e vedete che ok quo qua ho sbagliato a scrivere però ha dovuto mandare a schermo vabbè dai facciamo come si deve anche se si capisce so che l'avete capito ma per una questione di onestà intellettuale Vedete quindi

che cosa ha fatto aspettato un po non l'ha fatto immediatamente si dice continua cliccare avete che lo fa subito continua ad aumentare vedete qua che c'è 12 eccomi eccetera ma se io click qui che cosa fa la funzione del tasto del bottone vai ci impiega talmente tanto tempo che blocca tutto il resto del codice e finché non ha finito non può andare eseguire innanzitutto questa parte qua Ma ce l'aspettiamo ok è normale prima fai questo e poi fai questo ma blocca anche l'esecuzione di questo anche se questo è già pronto c'è questo bottone questo bottone

ci impiega un po per eseguire la sua funzione e va bene ma questo bottone è già pronto quindi perché noi dobbiamo andare ad aspettare l'esecuzione di questo se questo bottone è indipendente ed è già pronto ok ecco che arriva la programmazione Asincrona la programmazione asincrona introduce vari thread javascript è un programma single thread quindi o negozi programmazione single tra dov'ero che ha un unico processo tuttavia nel corso degli anni sono stati aggiunti dei tool ok javascript è stato evoluto affinché potesse supportare più thread di conseguenza avete qui era singolo tregua sono multi thread ok questi

multithread sono semplicemente il mentre che è quello su cui stiamo lavorando adesso Per cui sì faccio così faccio così questo è il mentre ed e viene bloccato ok ed è a blocking cod e invece poi ci sono anche i worker thread iwork thread sono dei processi o che immaginati dei canali di lavorazione differenti letteralmente perché worker lavoro sono dei canali di lavorazione differenti in cui possiamo eseguire in background delle funzioni ok e quindi permettere al mentre di continuare ad andare avanti pensate all'usabilità di un sito entrati Sul sito o su un'applicazione che magari deve scaricare

un po di dati ma mentre scarica i dati in background voi avete già accesso al sito questo perché il sito utilizza o un'applicazione che quindi utilizza tecnologie differenti utilizza comunque lo stesso concetto di multi thread c'è un processo che è quello principale ok che è quello più importante e ci sono tanti worker trade che sottobanco fanno quelle operazioni lunghe che devono essere fatte a parte Altrimenti andrebbero a bocca a bloccare tutto il resto nessuno vuol tirar giù dati per 20 30 secondi e avere la pagina bloccata per 20 30 secondi all applicazione ok tutti vogliono

poter già scors crollare sull'applicazione e o sul sito e magari istitutrice guarda sto sta tirando sui già sui dati aspetta un attimo vai a fare altre cose tuffa altre cose il sito funziona una volta che ha finito i dati tu te li trovi lì ok Questo è il concetto di asincrono andiamo a vedere sotto leggermente ci fa un esempio veramente grafico ok quindi qui abbiamo task 1 tasca ataf b e tasky fatemi allargare un pochino quindi questo è classico blocking cod questo qua invece è coni con i thread avendo più thread noi possiamo tranquillamente andare

a fare diversi tusk in simultanea va bene utilizzando il codice asincrono questa è la spiegazione il codice asincrono ci permette anche a chi usa Una parola chiave che vedremo più avanti che sulle promis le promis ci permette di poniamo il caso non è non è vero niente quello che vedete qui ma le prove si permettono di dire mi fai tutta questa cosa qui quando mi ha tirato fuori il risultato che ti interessa milan ci questa altre cose ma tutto il resto è già utilizzabile ok quindi potrei fare un esempio veramente bruttino da spiegare ma va

bene così io clicco su questo bottone io clicca sul Bottone vai automaticamente in background mi fa questo ma io posso già continuare a fare bottone alert e mandare a schermo con il console ogg ecco mio posso continuare a farlo mentre vai fa delle cose in background in modo asincrono quando ha finito automaticamente andrà a chiamare il resto dei dei task per quanto riguarda in questa funzione anche se vedete che si comincia da qui e poi dovrebbe andar giù ma invece Invece aveva quasi ok aspetta attimo io vado qua quando ho finito chiamo un'altra funzione che

magari fuori o è sopra o altrove quindi come vi dicevo all'inizio di javascript noi siamo abituati di argia ski dall'alto verso il basso ed è vero che funziona così ma con la sincrono vi renderete conto come possiamo agganciare delle varie situazioni e andiamo a saltare quindi vedrete come noi andremo a creare delle funzioni che magari sono prima o dopo o Quant'altro e la sincrono ci permette di non andare direttamente dall'alto verso il basso ma creare il multi thread e quindi far girare il codice su diversi processi spero di averlo spiegato bene se capite il funzionamento

teorico della sincrono avete capito tutto perché poi si tratta di entrare nel pratico ma la differenza tra pratico e teorico è che il pratico lo vediamo effettivamente e concretamente riusciamo a capirlo il teorico si può fare si può fare un po Più fatica se avete dubbi voi scrivete potete scrivermi qua sotto nei commenti in privato su gruppo the ramen descrizione se avete schermi direttamente da qualche parte ci sono gli abbonamenti per supportare che vi da la possibilità di scrivermi direttamente in privato e niente io vi ringrazio ha nessuna prossimo video ciao ciao 1 giorno a

tutti episodi numero 18 del corso di javascript quest'oggi andiamo a vedere l'introduzione pratica alla Sincrono nel video precedente abbiamo parlato a livello teorico questo gene mo parlare a livello pratico vedremo del codice asincrono ok ora vedremo prima il codice sincrono come abbiamo visto nell'episodio precedente ma lo rivedremo ok in modo da poterlo comparare a quello asincrono guarderemo le call back e poi guarderemo le promises con il fetch e queste sono le cose più più nuove ok che andremo a vedere abbiamo parlato del codice asincrono scusatemi a bordo il Codice sincrono ovvero abbiamo il nostro bottone

il nostro bottone fa una cosa ovvero un alert e poi una volta che ha finito la alert andrà a renderizzare a schermo un paragrafo andremo a vedere facciamo così io click mi una volta che abbiamo cliccato compare il paragrafo allora questa cosa semplicemente perché il sim il codice sincrono funziona così finchè c'è la l'ert ok non può andare a renderizzare il paragrafo ok quindi sincrona finché C'è questo e l'alert occupa come possono vedere lo schermo stack sta occupando tutto il mentre quindi il trend principale è occupato dalla l'ert potremo fare ok andrà può andar andrà

poi a renderizzare il paragrafo ok quindi ribadiamo un'altra volta il codice sincrono o blocking cod si occupa di fare un tasca alla volta occupa tutto il trade e non c'è spazio per fare qualcos'altro in background arriva dunque il nostro soccorso il codice Asincrono ora le commentiamo qua io ho parlato già anticipato e di facce e qua c'è fece andiamo affacciare un'immagine ok vedete che fece e asincrono come metodo è la nostra prima la nostra prima impressione il nostro primo istinto sarebbero le di andare a fare la risposta di farci qui andiamo a prendere questa immagine

da internet e il blog ok accedere che cos'è blob scritte boris blog blog Bob gect semplicemente un metodo di un tipo di passaggio dato che è un tipo di dato quindi non spaventatevi è un tipo di dato quindi banali la snob gek ovviamente è un'immagine quindi è un oggetto binario però di di grandi dimensioni e quindi ne semplicemente prendiamo la risposta e prendiamo blob ok lo assegniamo a blob qual è il fatto che se io salvo intanto fatemi togliere questa cosa qua se no vediamo un po troppa roba uno potrebbe dire vabbè io Asincrono faccio

questo e poi associo in modo asincrono il blog di risposta a blob fin qua non fa una piega giusto se non fosse che io apro e ci dà errore ok sarà function questo perché la risposta ancora non esiste perché fece nel momento in cui lui va a fare e fecce e asincrono e non ancora finito quindi il codice arriva dice latte a response iniziali tso è uguale a fece eccetera ok allora ci chiediamo dopo ok lo finisco Dopo quando ha finito di speciale però scende direttamente e dice blog quella response punto blog ma response attualmente

non esiste ancora quindi se andiamo a fare con sol punto log response response andiamo a vedere se vedete che abbiamo una promis pending non abbiamo la nostra non abbiamo la nostra immagine infatti dopo arriveremo parlare delle promis quindi abbiamo Questa strana cosa e pending c'era scritto promi spending ok al di là dei diplomi spending vuol dire che è pendente è lì che aspetta quindi come potete vedere il nostro response non è un'immagine per ora non è questa immagine ma è semplicemente un qualcosa dipendente che dobbiamo andare poi a lavorare quindi asincrono r è andato ha

messo qualcosa dipendente perciò non possiamo proseguire direttamente e associarlo Quindi la sincrono richiede dei passaggi differenti per trattare ciò che sta arrivando facciamo un esempio un po più pratico e cancelliamo tutta sta roba qua facciamo un esempio con le classiche callback ok a sync callback sono comunque è comunque javascript asincrono però sono callback ok rispetto a quello che vedremo qui questo metodo è un po più vecchiotto ok un po più datato ma non preoccupatevi che cosa devo fare Andiamo a creare una funzione carica asset in questo caso la set è l'immagine ok abbiamo dei parametri

url quindi è l'immagine che voglio scaricare e poi la vedrete abbiamo il tipo di asset in questo caso la risposta per il tipo di risposta e type sulla smith il tipo di risposta è type che sarà poi qua blob lo vedete è la call back è display image display image lo vedete che è una funzione le call back sono funzioni callback pulire chiamare a ritroso ok Quindi le call back sono quelle funzioni che noi chiamiamo una volta che abbiamo finito di fare determinate cose quindi lui prima andrà a caricare questo ok dopo di che andrà

a chiamare display image una volta che è stata caricata quindi vediamo lo da asset fa esattamente così apre xml http request che abbiamo visto se vi ricordate per caricare il cezanne se non se non l'avete visto andate a vedere il video precedente di jason dopo di che facciamo Xhr è la richiesta la apriamo diciamo che è di tipo get ci aggiungiamo l'url che arriva al quale al parametro che è questo qua ha quindi devo prendere con con get l'immagine ok aggiungiamo il tipo di risposta il tipo di risposta è blob quindi è un binary large

object ok e ci siamo perché è un'immagine dopodiché un load una volta che ha caricato ok diciamo subito una volta che hai caricato questa risposta e hai tirato giù l'immagine che ci serve cosa Fai mi fai la funzione di callback che è questa con dentro la risposta ok quindi prendi la risposta che è arrivata e la butti nella funzione di callback la funzione callback che andiamo a metter dentro è questa ok quindi lui prende questa funzione che arriva qua display display image lamette qui la socia qua ok quindi fa la call back prende questo nome

lo piazza qua egli aggiunge come parametro vedete che qua ha bisogno di di un blob lo aggiunge qua ricapitoliamo Velocemente allroad una volta che ha finito di caricare fa una funzione questa funzione anonima a sua volta va a chiamare una funzione di callback questa funzione di callback noi la conosciamo solo quando mandiamo quando lo mettiamo come parametro in questo caso noi mettiamo che la funzioni callback è display image qua dentro c'è un parametro xhr response che ha la risposta della nostra richiesta semplicemente perché in display image Abbiamo il nostro blog se avete domande chiedete subito

commentato inprivate eccetera perché questo è un bel giro d'affari ok una volta e abbiamo definito tutto quello che vogliamo fare prima e dopo prendi la risposta e manda mela ok che cosa succede una volta che funziona nota sta cosa qua e quindi ha tirato giù tutto sacri tipo blob eccetra fa partire display match display image ma prende l'url globe ok e cosa va a fare va a prendere questo url e lo va a mettere Come gli mgs rc dell'elemento creato ing nel nel body ok io vi consiglio se non state capendo stoppate un attimo copiate

il codice è rifatto un attimo il giro casomai chiedete ok quindi display mentre non fa altro che creare un elemento immagine in nel documento l'attacco al body ci piazza dentro l'immagine che lourdes e di madre negate rado giu e se a tutti a posto andiamo del risultato bam ecco quella nostra immagine ok l'abbiamo Tirata giù in modo asincrono perfetto quindi questo queste sono le call back a singh e funzionano vedete non ci ha creato alcun problema rispetto a quello che aveva fatto prima fece eccetera però faccia ben detto che lasciava una provis quindi questo modo

qui è un po vecchiotto è un po datato e soprattutto rispetto guardi qua la differenza siamo dalla riga 49 la rega 56 ok qui parliamo di sette righe ok 78 righe mentre invece siamo dalla 47 alla xxvii parliamo di Venti righe o altra fatto che qua il giro del fumo l'avete visto che era un continuo passare su su su su su giù dal letto che con la sincrono avremmo continuato a fare su giù su giù su giù un disastro ok e diventa abbastanza complesso star dietro a tutto questo giro ecco perché sono nati facce e

le promis condanne e cats che ci permette di gestire appunto queste promis e ci permette di gestire la sincronizzava scritte in maniera molto più semplice Molto più semplice e intuitiva andiamo a vedere match quindi mi vai a prendere in questo caso io mi sono ri collegato al jason che crea i nell'episodio del jason va bene ho detto vai a prendere classe j son che è questo ve lo ricordate voglio prendere classe j son ben bene e dopo una volta che hai preso classe j son che è esattamente come fare questa cosa qua a ok questo

qua è il fetch una volta che hai fatto il fez una volta che hai fatto il fez mi Chiami la call back semplicente ne abbiamo fatto non dove non abbiamo avuto sia tutta strofa benetto anziché sta roba qua a benneteau facce punto ok questo callback qui eden una volta che hai fatto una volta che hai preso questo file jason mi prendi la risposta ovvero il file jason e meno ritorni come risposta appunto jason ovvero mi vai a leggere effettivamente a passare questo in jason quindi prende il contenuto e ce lo rende Leggibile ok den una

volta che mi hai ritornato questa cosa qui che cosa fai mi prendi questo jason e lo butti in classe quindi adesso quello che la prima sufficiente una risposta o un jason deve andato un nome che a noi torna utile quindi la classe ti sollevati dati della classe siccome si chiama si chiama classe questa classe mi è tornato che parla di jason che è generico oppure response poteva mettere generico abbiamo la nostra classe L'abbiamo associata e adesso tela e adesso ve la mando schermo che abbiamo schermo i nostri dati come potete vedere è arrivato tutto e

questo è con letteralmente cinque righe abbiamo fatto tutta questa cosa qua ok in più con tre righe aggiuntive 2 2 tra righe se vogliamo contare anche le parentesi con due tre righe abbiamo fatto che ciò che serve per andare a prendere l'errore nel caso in cui questa cosa di a problemi automaticamente che ci vuol dire Catturare l'errore viene catturato e viene gestito andiamo mette una funzione che non esiste ok la funzione non esiste salviamo andiamo vedere facce problem inizia l'ice not find quindi noi abbiamo preso l'errore e l'abbiamo trattato ben detto ok se viene cacciato

se viene catturato un errore ok mi dici facci problem questo qua è cosa nostra e ti prende error message l'error message viene definito viene gestito direttamente da caccia inizia life is Not find se noi torniamo invece con il nostro codice che funziona tutto ci manda schermo i dati quindi questo è il codice asincrono di ultima generazione questo è il codice asincrono un po più vecchiotto ok valgono entrambi il mio consiglio è sempre quello di utilizzare le cose più nuove ok sono più semplici più ridotte più contenute più semplici da capire più facili più veloci e

facili da scrivere sono meglio in qualsiasi cosa semplicemente ci sono un po di Punti un po di cose collegate magari così all'inizio può sembrare più semplice ok mentre invece così anche se più piccolo sembra un po più astrusa perché sono tanti idee in che eccetera una volta che lo imparate è veramente semplice usarlo io ringrazio per fermarsi commerci vediamo al prossimo video diventeremo veramente al fondo di dias in cady asynchronous javascript io mi ricordo se avete problemi commentate oppure c'è il gruppo di telegramma Oppure se siete abbonati mi potete scrivere in privato vi ringrazio e

alla prossima ciao ciao 1 giorno a tutti bentornati episodio numero 19 del corso di javascript quest oggi guardiamo velocemente se time out e set interval che sono due funzioni asincrone che ci vengono date da molto tempo in javascript per scrivere del codice appunto a sincro andiamo a vedere sono funzione appunto belle datate e entriamo subito nel Dettaglio punto vedremo se time out claire time out se ti interval claire inter ball allora qual è la differenza set time out e ci permette di andare a mettere una sorta di tempo di pausa ok in cui andare eseguire

la funzione adesso vi farò vedere mentre invece set interval ci permette di eseguire la stessa operazione più volte a distanza di tempo ok questo abbiamo un po come un ciclo Mentre questo invece una volta che ha finito ha finito io che ho già preparato per l'intervallo e adesso perché veloce per qualcosa pronto invece scriviamo noi amano per quanto riguarda sette mouse e facciamo lett prova uguale set time out allora se time out come potete vedere ci chiede una funzione un tempo di attesa quindi ne andiamo a fare function quindi buona parte la sintassi che vedete

in realtà è solo questa funzione aggiuntiva Ok andiamo a fare function facciamo così dopo la funzione mettetelo subito c'è una virgola e il tempo di attesa va bene molto semplice non arriviamo qui e dopo due secondi da quando parte facciamo un alert con scritto ciao sono in time out ok facciamo così in realtà mettiamo 5 secondi per avere il tempo di cambiare perché parte al momento in cui salviamo perché si ragiona automaticamente la pagina riserviamo andiamo di qua e vedete che tra pochi secondi Perfetto ciao sono in the mouth dunque come abbiamo visto allora è

partita in automatico perché la variabile abbiamo assegnato il time out quindi parte subito ok 5 secondi ed esegue questa questa funzione non potremmo avere altro c'è qua dentro noi potremmo richiamare altri altri metodi altre altre funzioni potremmo scrivere più righe di codice è rilevante quello che andremo a fare onestamente Sappiate che tutto quello che amo fare qua dentro sé time out verrà eseguito dopo questo lasso di tempo ok ma cosa potremmo fare realtà per pulire un po il tutto potremo andare a creare una funzione function saluta e semplicemente facciamo così prendiamo questa parte qua la

togliamo mettiamo qua dentro function saluta noi togliamo tutta questa parte qui e vedete come diventa pulito noi facciamo saluta non dobbiamo metterle Parentesi tonde ok ci basta fare senza facciamo salva andiamo a vedere cinque secondi 3 2 1 perfetto ciao so niente moto avete visto da quella cosa abbastanza complessa che sembrava prima semplicemente abbiamo fatto una funzione extra fuori e l'abbiamo richiamata una volta passati i 5 secondi se ne volessimo io quando preparato appunto un bottone se noi volessimo pulire il tema Out e non farlo più eseguire per un qualsiasi motivo quello che possiamo fare

andare a creare const tn uguale documento ormai sapete memoria query selector e andiamo a prendere il nostro button perfetto e devo ammettere che btn punto advent lissner mettiamo il click facciamo una bella virgola facciamo una function questa si chiama arrow function numero mai spiegato è esattamente come scrivere function parentesi eccetera eccetera la Guarderemo più avanti magari in un video bonus su questa nuova sintassi ma esattamente come scrivere function senz'acqua salute è esattamente come scrivere una funzione anonima come abbiamo visto all'inizio del corso non fa alcuna differenza quindi arriviamo qui e semplicente facciamo clear time out

e dobbiamo indicare però quale time out in questo caso il time out è legato a prova quindi noi salviamo e nel momento in cui salvo abbiamo cinque Secondi per bloccarlo blocchiamo aspettiamo un po 12345 vedete che come potete capire non compare i secondi sono scaduti questo perché abbiamo pulito il time out quindi dove era partito riproviamo aggiorniamo se io non schiaccia niente arriveranno stremo arriveranno su time out perfetto e quindi così è come si pulisce il time out e questo è il modo che possiamo fare per mandare eseguire in Modo asincrono le nostre le nostre

funzioni quindi è asincrono perché parte subito nel momento in cui parte il documento parte già il countdown in questo caso perché vi dicevo una funzione che parte subito a meno che noi la colleghiamo a un click o altri eventi e parte in background parte su un altro worker cosa succede che se avete visto io come faccio a bloccare il clear lo posso bloccare proprio perché asincrono perché se voi Vi ricordate il blogging code funzionerebbe così che nel momento in cui questo sta andando blocca il mentre e di conseguenza noi non potremmo schiacciare nient'altro finché questo

non ha finito essendo una funzione asincrona ci permette di fare altro e in questo caso possiamo schiacciare sul bottone e pulirlo ok questo è un buon esempio andremo avanti guardiamo se interval Quindi togliamo in questa cosa qua la nascondiamo e sblocchiamo questa allora questa funzione non fa altro che mandare a schermo il l'orologio attuale ok quindi abbiamo funzione display time la data di oggi fa nuova data ok quando noi facciamo nuova data ci manda tanti tanti tipi di ci manda tanti dati onestamente quindi facciamo vedere così e facciamo sto punto dei te lo faccio vedere

le facciamo così console log non per ora Non guardate il risultato ma che vedete che ci continua a mandare a schermo la data di oggi questo perché sta funzionando ma vedete che new day ci da il giorno il mese la data effettiva quindi il giorno inteso come che nome è il giorno poi abbiamo il numero del giorno l'anno la data in che ha fuso orario siamo che questo è l'ora saldo europa centrale e questi sono tutti i dati che noi otteniamo facendo new day the ok quindi cosa devo fare andiamo a Prendere da dette da

questa data prendiamo il time string quindi prendiamo la stringa del tempo in locale quindi nel nostro orario locale effettivo automaticamente lo converte e semplicemente cosa facciamo prendiamo gli elementi di demo che è questo qua questo p e semplicemente ogni volta andrà a metter dentro il tempo punto come fa a fare questa cosa del genere vediamo risultato vediamo risultato vedete che qua c'è praticamente un Orologio che continua ad andare questo orologio è semplicemente il pi che viene ogni volta aggiornato quindi ogni secondo arriva lì dice ok che tempo è che che orario è e45 e manda

scherma 46 mano schermo e 47 e manda schermo funziona così perché noi abbiamo fatto partire subito quindi funziona anonima abbiamo associato set interval ha create clock abbiamo associato la stessa cosa a cui ben detto display time e meno fai ogni secondo Quindi questo non è dopo quanto ma queste ogni quanto quindi dopo quanto quindi dopo 5 secondi mi fai questo dopo un secondo mi fai questo però intervallo è un intervallo di tempo perciò continua all'infinito se noi volessimo pulire il nostro interval non dovremo fare altro che fare un click listener clear facciamo interval e noi

andiamo pulire create clock facciamo così ovviamente ci darà errore no Salviamo aggiorniamo magari vedete che si aggiorna nel momento in cui lo schiaccio pulito ok quindi si è fermato questi sono queste sono due funzioni che ormai sono abbastanza consolidata in javascript da anni e anni che ci permettono di eseguire del codice asincrono faten eventualmente buon uso nel caso vi servono noi ci vediamo nel prossimo episodio in cui andremo Effettivamente a vedere le promis ok io vi ringrazio per essere ma siccome in descrizione c'è al solito tutto gli abbonamenti se volete sostando il canale oppure l'affiliazione

con con amazon c'è il gruppo e il canale it e lega un ragazzo un'altra volta è la prossima ciao ciao 1 giorno a tutti bentornati episodio numero 20 del corso di javascript quest'oggi andiamo nel dettaglio a guardare le promis ok e promises e l'abbiamo già viste fanno Parte della synchronous programming come scritto qui andiamo a vedere la l'ordine del giorno che abbastanza lungo cosa sono appunto le promis il primo call e call back il miglioramento tramite la sintassi delle promis la sintassi delle promis cosa fare in caso di fallimento che cos'è il chaining come costruire

una probabile custom e poi rifiutare in caso di errori le promis ha ben detto che sono una sorta di rappresentanza di uno stato Ok è una promessa che noi facciamo ovvero o meglio che il programma ci fa è una promessa di di tornare un valore ok è una promessa che farà una determinata azione noi non sappiamo sottrarremo una risposta non sappiamo di che tipo sarà il valore noi non sappiamo niente sappiamo che in modo asincrono verrà fatta una determinata azione e otterremo qualcosa più avanti in futuro ok questa è la promis semplicemente indica appunto È

una promessa di qualcosa che verrà ridato nel futuro è attualmente indica uno stesso e vi ricordate l'avevamo visto andremo a creare una promis abbiamo lo stato il new promis spending quindi è uno stato pendente finché non andiamo a lavorarci una volta che ci viene ritornato il valore questa è e lo potete trovare tranquillamente sulla documentazione semplicemente volevo poi fare dei passaggi ok quindi melo messo sul sull'editor in modo da fare dei Passaggi aggiuntivi questo è come sarebbe javascript ok solo con funzioni di callback senza la sintassi promis ok che mi tolgo questo noi guardiamo solo

questo va bene allora noi che abbiamo una funzione questa funzione topping chiama poi una funzione di callback ok una volta che finito topping si chiama poi una funzione di callback a cui passa il risultato ok a cui poi chiama un'altra funzione di callback a cui passa questo risultato Che a sua volta chiama un'altra funzione di callback che a sua volta che amo naturale di callback e via discorrendo quindi sono una funzione tre funzioni di callback e per ognuna dobbiamo fare una call back in caso di fallimento quindi capite si fa un po venire mal di

testa questa sintassi ok andiamo a vedere come diventa la sintassi con le promis andiamo subito a vedere questo non è un esempio reale ma potete capire lo abbiamo la nostra funzione quindi Seguiamo la funzione da cui ci aspettiamo una promis quindi la promessa che tornerà qualcosa una volta che mi ha fatto questo den quindi dopo dopo questo una volta che questo sarà eseguito solo dopo che questo sarà eseguito andiamo a fare una funzione di callback ovvero ritorni amo placeholder chiamando un'altra funzione ok dopo di che andiamo a fare un altra funzione vedete qui dopo di

che andiamo a farne un'altra E a differenza di queste tre failure callback ne mettiamo solo una va bene quindi questo catch me your callback ci aiuta ad evitare queste tre mentre invece tutta questa roba qui che si aggancia diventa semplicemente 3 ben differenti che va a chiamare a sua volta delle altre funzioni ok vedete come gia piu pulito se noi volessimo pulirlo ancora di più utilizzando la sintassi ssx possiamo ridurla accorciare ancora di più quanto abbiamo scritto e possiamo Andare a creare ancora qualcosa di più pulito vi faccio vedere possiamo fare così diciamo così e

quindi rispetto a prima abbiamo qualcosa di veramente più ordinato ok è veramente più bello da vedere così forse qua possiamo fare anche così togliamo qua questo visto che non abbiamo l'eterna perfetto guardate com'è bella pulita ed effettivamente rispetto a quanto avevamo Prima che era un miscuglio né di funzioni altre funzioni e fullback abbiamo semplicemente la nostra funzione tre band è un cash ed è tutto molto bello pulito ok quindi questo è il miglioramento che viene apportato tramite le promises e in generale poi la sintassi ds six allora guardiamo guardiamo queste tre parti la sintassi delle

promis la risposta al fallimento e il chaining tramite il prossimo esempio allora prossimo esempio È il seguente liberiamo qua tutto ok e siamo a posto allora il risultato è il seguente semplice noi stiamo facendo il fetch su un'immagine che io qua ok caffè andiamo a vedere ecco qua il caffè perfetto questa immagine l'impresa con fez ora si potrebbe fare in un altro modo con html eccetera non basatevi su ste cose voluto farlo con fez per farvi vedere quindi specie abbiamo detto che è in me Una funzione asincrona ok vedete qua che ci restituisce una promis

questo quello che ci restituisce quando vedete qua la funzione nome match questi sono i parametri quindi input è un parametro che serve per forza quello invece c'è il punto di domanda alla fine di un parametro vuol dire che non è obbligatorio i due punti al di fuori le tonde indicano il valore di ritorno ok in questo caso ci ritorna una promis con una risposta all'interno Allora andremo a fare il fetch come quando abbiamo fatto prima la nostra funzione andiamo ad attaccare il den per la risposta ok quindi facciamo den response vedete che stiamo usando la

stessa sintassi che ho usato prima quando ho pulito tutto su cosa cosa potete anche non concentrarvi però ve la spiego iv la risposta non è ok quindi non abbiamo questo è l'unica cosa che possiamo ottenere che possiamo ottenere perché tutto il resto dobbiamo gestire Cielo noi quindi se la risposta non è ok però new horror quindi buttiamo fuori un errore e specifichiamo che c'è un errore e prendiamo lo stato della risposta è fin qua noi in verità potremmo bypassare tutto e far semplicemente così ok però questo è un passaggio extra se volete copiarlo va bene

lo imparate poter cercare i vari pezzi non abbiamo mai parlato dei tre horror e cose del genere quello che ci interessa è qua quindi puliamo questo però spiegatelo Importanti ma puliamo lo stesso abbiamo return che abbiamo la risposta prendiamo la risposta e torniamo e ritorniamo risposta appunto blob abbiamo già parlato dai blobee in questo caso è baia dei large object in questo caso è un'immagine è binary ed è un large object perché le immagini sono abbastanza pesanti ok fatto questo andiamo a fare il chaining chanin vuol dire concatenare quindi ogni volta che ne col punto

andiamo ad Agganciare un den o dei che stiamo concatenando ok quindi ne potremmo avere tanti bene che non avete non avete idea quanti ne potremmo sono infiniti quindi siamo andati a prendere la nostra immagine abbiamo gestito la risposta abbiamo la prato sulla risposta e l'abbiamo abbiamo fatto ritorna in modo che queste ritorno qua diventa questo elemento perché facendo il chaining automaticamente il contenuto che viene Ritornato in questa funzione viene passato a questo den ok quindi hilden e noi abbiamo chiamato my blog perché è il blog che noi portiamo fuori che sarebbe comunque il nostro banali

large object ok quindi è la nostra immagine perché parla mai mgm jim quello che volete andiamo a prendere l'url ok e nemo creare l'url che ci servirà poi da inserire per mg src quindi noi prendiamo questo url e dell'immagine Andiamo a creare l'immagine documenti credit elementi mg quindi banalmente come fare di mgs rc qua ok lo stiamo andando a creare realtime con javascript dopo richiediamo mettere qua dentro qua dentro creato dinamicamente andiamo a buttarci dentro object punto url ok e poi facciamo semplicemente documento body up and child non preoccupatevi che la gestione del documento con

javascript e la faremo negli ultimi episodi Ok qualcosa avete già imparato sicuramente però la tratteremo bene dopo quindi questo abbiamo fatto il cen in gabbia gestito tutto qui abbiamo fatto fetch abbia preso la risposta l'abbiamo gestita l'abbiamo sistemata l'abbiamo ritornata abbiamo preso il nostro blog abbiamo creatore l'elemento abbiamo appeso tutto quello che ci serviva alla fine sempre col channing amo mettere un cash quindi risposta in caso di fallimento il catch è la risposta in Caso di fallimento se qualcosa va male a qualsiasi livello ok automaticamente il catch va a prenderlo e lo possiamo gestire quindi

che c'è e sta per errore lo vedete spesso scritto come and error error così fateci l'abitudine in questo caso e console ogg andiamo prendere il messaggio di errore e prima lo pompiamo con un altro messaggio nostro ok andiamo a spiegare perché poi ci buttiamo il messaggio di errore che potrebbe essere Magari un po criptico perciò ci aiutiamo con questo messaggio questa in breve la sintassi delle promis e adesso vediamo con due esempi veloci come creare una propria promis ok qua stiamo già usando quelle che arrivando a fece c'era ma magari avremmo bisogno di creare noi

delle nostre promis come possiamo fare allora qui adamo creare una promis veramente semplice allora stiamo prendendo una variabile e stiamo facendo new promis ok new promis andando a fare Il new promis fatemi togliere un attimo qua allora new promis è così ok come quando facciamo abbia fatto new persona molto prima nel nostro corso vogliamo fare un nuovo oggetto che nuovo oggetto promis nuovo oggetto promis tiene una funzione all'interno ok da eseguire quindi la prova miss deve andare eseguire un'azione in questo caso facciamo una funzione ok abbiamo la funzione e dentro abbiamo se time out l'importante

è la funzione dimenticato In un attimo questa parte qua centrale concentratevi solo su graffa graffa qui ok quindi questa è new promis funzione la promis può avere solo due risultati ok o viene risolta e quindi va tutto come deve andare oppure viene rigettata in questo caso re jack questi sono i due parametri che abbiamo andiamo a fare la nostra funzione è quello che ci mettiamo dentro semplicente diciamo guarda tra due secondi mi fai un time out nei nomi fa niente rick ha due secondi mi fai Risolve quindi stiamo dicendo automaticamente la pro miss me la

fai andar bene ok questo è a livello basico basico come possiamo andare a creare una promis questo non ha utilità ma ve lo faccio vedere invece con questo esempio ma volevo che imparasse a capire come impostare una promo se volete riprovare per seguirmi facciamo prova uguale new promises ve lo faccio in modo che se mi seguite vi abituate andremo a fare una nuova funzione dobbiamo fare una nuova Funzione facciamo così mettiamo risolve virgola mettiamo reject perfetto andiamo a fare la nostra arrow function l'apriamo andiamo giù chiudiamo qui e dentro potete mettere quello volete in questo

caso mettiamo direttamente resolve e siamo a posto quindi questa è la sintassi super basica su come creare una promis andiamo a lato commentiamo è semplicemente apriamo il l'esempio de commentiamo l'esempio vero allora prima Avevamo fatto avevano fatto qua the knot promis rete che anche qua questa era una variabile a cui assegnavamo una funzione anonima ok ora noi vogliamo fare una funzione reale quindi function la nominiamo time out promis anziché basarci sulla sulla variabile è semplicemente andiamo a generare un po di cose in modo da rendere questa promis da fare un esempio reale ok quindi basiamoci

su questo noi facciamo una function facciamo la funzione che Dobbiamo eseguire e che deve ritornare una promis vi ricordate che fece ritorna la promis adesso non ce l'abbiamo più fesso ma vi ricorda che fece ritorna una pro m'iscrivo dire che qualsiasi cosa noi facciamo qualsiasi funzione che facciamo deve tornare una promis altrimenti non funziona quello che dobbiamo fare quindi la nostra funzione la nostra funzione vediamo qua dove ok è qui in questa nostra funzione basica a cui lavoriamo con message e inter va a Queste sue cose diverse che non che esulano dalla promis in se

questo è puramente la nostra funzione come deve agire ora la nostra funzione deve ritornare una promis ok fin qua ci siamo altrimenti non se ne fa niente questa promis se vi ricordate da qua sopra all'interno deve fare qualcosa ok deve avere una funzione che può essere risolta ora è gettata andiamo dentro ora in questo esempio Facciamo vedere come il messaggio che sono i parametri della funzione e quindi in questo caso la facciamo andare la facciamo risolvere o rigettare in base a quelli che sono i parametri della funzione ok quindi se messaggio è uguale uguale zero

o il tipo di messaggio è diverso da stringhe qui magari abbiamo messo un numero quindi se il messaggio è vuoto oppure il messaggio è uguale quale estremi in questo caso potrebbe essere vedete qua c'è la funzione se il Messaggio è nullo o è un numero ci darà problemi ok quindi torniamo a noi questo sarà un primo problema e ci darà reject è il siff se l'intervallo è minore di zero quindi se questo intervallo è meno uno meno uno o addirittura non è un numero ma è una stringa ci darà errore ok quindi facciamo così e

noi per ora siamo a posto altrimenti se ci sono problemi coi parametri mela rigetti in tutti i casi e di specifiche qual è il problema ovvero il messaggio è vuoto o Non è una stringa oppure l'intervallo è negativo o non è un numero e quindi fire e gect e la promis ci ridà re gect se tutto se tutto questo va bene allora mi fa il mio set time out e me la risolvi quindi 7 di mano tra le messa appunto per far vedere un po di asincrono ok altrimenti sarebbe tutto purtroppo veloce semplicemente risolve e

ci mandi il messaggio ok andiamo a vedere quindi questa time out come la utilizziamo se vi ricordate prima di Fare il cen in condanne che abbiamo la nostra funzione quindi la funzione chiama la funzione richiede due parametri che è il messaggio da da mandare a schermo e l'intervallo di tempo che vogliamo di attesa quindi del set dei moti quindi questo è questo ok e questo messaggio non è altro che questo messaggio va bene una volta fatta questa una volta fatto questa la promis ovviamente ovviamente questa funzione le Torna alla prova vi ricordate yes la promis

se la promis va bene abbiamo il messaggio quindi noi prendiamo il messaggio è semplicemente lo utilizziamo in questa funzione e mandiamo a schermo il messaggio con l'alert se qualcosa va male ovvero siamo nelle fasi di re gect cosa farà farà cash e ci manderà nel console log l'errore ok andiamo a vedere la situazione facciamo il primo andiamo qua vedete è loader son passati due secondi Effettivamente da quando salvato quindi cosa è successo time out ha preso è loader è passato un secondo ha controllato tutto a posto tutto a posto tutto a posto ha risolto la

promis la promis essendo stata risolta è passata qua dentro e non qua dentro ha passato il messaggio che raffaello der è ammalato a schermo un alert con scritto hello there mettiamo un altro a casa e riproviamo andiamo qui e vedete ha fatto Tutto questo giro e ne abbiamo il nostro aler con scritto è loader se invece io vado a mettere una stringa vuota quindi vado a causare l'errore va a causare questo errore andiamo a vedere qua abbiamo nel console og error message is empty is no la stringa allora questo error l'abbiamo arco dato noi qui

ve lo ricordate questo è invece arriva dal cash ed è il messaggio che viene mandato corre gect in questo caso la schittone automaticamente quindi quando noi devo Fare una una promis custom dobbiamo andare a mettere i messaggi i messaggi di errore ovviamente dobbiamo gestirli noi in questo caso invece con la risolve mandiamo facciamo un ritorno di ciò che ci interessa ok questo è io vi ringrazio per essere maschi con me questa tua episodi abbastanza lungo e non credo semplicissimo da capire se avete qualche problema commentate sotto altrimenti c'è Il gruppo su telegram c'è il canale

per restare sempre aggiornati con eventuali progetti extra canale youtube sempre in programmazione comunque in descrizione trovate sempre la vetrina di amazon e gli abbonamenti sempre per supportare il canale vi ringrazio ancora ne citiamo la prossima ciao ciao buongiorno a tutti bentornati episodio numero 21 del corso di javascript siamo quasi alla fine quest'oggi guardiamo come letteralmente rendere il nostro gol ici asincrono più Facile con a sync ea weight allora la bellezza di affinché weight sono stati aggiunti nel 2017 con ekma script 17 vedete qua la cosa bella di affinché wade è che ci permette di rendere

il codice visivamente sincrono come abbiamo scritto prima di imparare tutta questa bardella della sincrono semplicemente rendendolo effettivamente asincrono ok questo è in sostanza quello che fa a sync ea weight che cosa abbiamo La champ all interruzione che l'abbia l'abbiamo appena fatta demolire a sync a weight andiamo a riscrivere la promis dell'episodio precedente con appunto con affinché weight rom i solchi abbastanza importante e poi vedremo velocemente a sing it nelle classi allora prendiamo una funzione function allo sto seguendo esattamente quello che già documentazione quindi vi ritroverete anche voi ok functional Ritornello ok facciamo così e noi

facciamo semplicemente un console punto log andiamo a fare l ok molto molto semplice non del risultato e fin qui niente di strano fatto sufficiente una funzione l'ho chiamata allo gli ho fatto ritornare una stringa allo fin qua ci siamo cosa succede nel momento in cui metto a sync davanti ok a sync si mette davanti alle funzioni va bene dobbiamo fare a sync già al presumo sapete già la Risposta vedete che ci arriva una promis benissimo quindi vuol dire che noi possiamo rendere le funzioni asincrone semplicemente con a sync punto e questo è la cosa abbastanza

semplice si scrive ancora come la funzione sincrona ok se vi ricordate e qua abbiamo la nostra promis e dobbiamo gestirla per scrivere questa cosa qua la possiamo scrivere anche come espressione Ok quindi quando abbiamo fare per esempio un led prova uguale potremmo fare una function una a sync function and function così facciamo così e ne facciamo così e siamo a posto per scriverla così altrimenti con la sintassi nuova di cui vi ho già parlato velocemente possiamo fare così e andiamo a fare il re terna di ok diciamo così chiamiamo prova andiamo a vedere come possiamo

vedere promis ok Abbiamo la nostra promis e quindi potrà scrivere anche così quindi potete farla come espressione e assegnarla a una variabile oppure a sync function come al solito ora il fatto è come andiamo a prendere il risultato di questa promis è veramente semplice ci basta fare un ci basta fare un den quindi facciamo è lo abbiamo fare il nostro classico den un'altra che mi ha fatto questo ci basterà fare la nostra funzione Prendiamo il value prendiamo il value è semplicemente console punto log value ok non c'è nessun altra console log vedete quindi noi facciamo

la nostra funzione a sync la la usiamo qui vedete facciamo il den classico visto che ritorna il valore possiamo prendere direttamente il valore come parametro dalla funzione dentro den funzione alro function abbiamo nostra console logging prendiamo il valore salviamo e ne abbiamo Allora ok quella documentazione ci consiglia un altro modo shorthand quindi una short cut ve la faccio vedere semplicemente avendo un unico valore avendo unico parametro possiamo tranquillamente scrivere console log ok io non vi consiglio imparare questa sintassi soprattutto adesso ve la faccio vedere perché la documentazione lamette perciò ve la spiego e vedete che

non cambia niente allora di base non avendo un unico parametro ok avendo un Unico parametro da per scontato che venne prendere unico parametro che ci ritorna e facciamo il console og di questo parametro ok quindi non dobbiamo aprire le parentesi non dobbiamo fare niente sufficiente gli diciamo con quello che hai qua fai un unica cosa che è console log proviamo anche con alert dobbiamo fare all'art vedete che funziona ok e questa è una short cup che comunque adesso sapete ma vi consiglio di evitare Andremo a vedere invece a weight allora a sync greetings che sarebbe

il saluto uguale a weight promis punto resolve abbiamo il nostro cavoli che abbiamo il nostro allo ok quindi ops my dad uguale a weight promis resort allo andiamo qua chiamiamo la nostra funzione Facciamo ancora il nostro den e mandiamo il console punto log va bene diciamo così vediamo cosa ci compare teoricamente dovrebbe uscire allo perfetto allora che cos'è wait wait è quella keyword che mettiamo quando stiamo aspettando il risultato di una promis ok quindi a sync diciamo che questa funzione è asincrona ea weight diciamo che questo greeting quindi questa variabile è uguale a un valore

che stiamo aspettando Ok quindi in questo momento come funziona simca wait wait blocca completamente l'esecuzione di questa di questa riga e tutto quello che c'è qua sotto eventualmente in questa funzione finché il valore non è ritornato ok riscriviamo invece adesso il codice che avevamo prima con le promis con a sync ea weight allora andiamo a prendere dalla documentazione che non ce l'ho più tanto fanno lo stesso esempio eccolo qua delle Terre il writing promi scott guida sync await se volete se volete provarla no se volete provare voi non guardate sotto la non guarda sotto qui

le risposte semplicemente provate ok quindi né salviamo quello che andiamo a fare innanzitutto devi ammettere a sync quindi abbiamo creare chiaramente una funzione ok facciamo mai feige ok andiamo ad aprire e mai fece si aspetta una risposta Quindi il let response è uguale a the wait fetch match andiamo a prendere il nostro coffee e fin qui ci siamo che cosa fa poi quindi ho creato una funzione fece anziché fare questa cosa direttamente lo faccio tramite funzione perché poi li attaccheremo hilden da gestire ok quindi la sigma per forza avanti una funzione questa cosa qua la

mettiamo dentro una funzione ok allora abbiamo il nostro fetch stiamo aspettando che venga Affacciato appunto coffee come qui saltiamo la parte effettiva dell'errore ok quello che ci interessa è il blog ok questo my blog che poi passiamo quindi creiamo let my blog che è uguale a my blog è uguale al ritorno di respons ma dato che noi lo stiamo aspettando da questo fece anche questo è una weight quindi a weight è uguale a response response punto blob Qua ci siamo abbiamo il nostro blog quindi ricapitoliamo abbiamo messo due weight perché questo la white del fez

ok ed è esattamente quello che succede qua questo questo weight è esattamente come questo den va bene automaticamente ovviamente quindi noi qua stiamo aspettando questa è la promis quindi qua c'è la promis ne facciamo a weight promis dopodiché visto che questo den è strettamente correlato a questo questo valore deve essere anche lui in a Way the in questo caso abbiamo fare a weight response punto blog che non possiamo fare response aspettando la da fece quello che facciamo dopo è prendere questa parte qua che è esattamente uguale ok abbiamo qua tutto quello che dobbiamo andare a

fare adesso a chiamarla funzione my face è semplicemente alla fine gli andiamo attaccare il cash molto molto semplice salviamo vediamo il risultato Se ci arriva l'immagine abbiamo fatto tutto corretto anzi cancelliamo per sicurezza salviamo andiamo a vedere e vedete che ci arriva e ci è arrivata con con successo e quindi ecco qua la nostra immagine ne abbiamo riscritto cuesta pappardella lo vedete che è scritta chiaramente in una sintassi differente e per qualcuno potrebbe essere fastidiosa l'abbiamo riscritta in una sintassi che è molto più amichevole Ok è molto più amichevole per l'occhio e quindi come potete

vedere è quindi abbiamo visto anche come funziona semplicemente andando a riscrivere questo codice vediamo velocemente come gestire gli errori li possiamo gestire in due modi farmi togliere questa parte essendo funzioni sync scritte come funzioni sincrone possiamo gestirla anche contrae e che quindi potremmo tranquillamente fare tra i scusatemi potremo fare tra i emettiamo Qua diciamo così tra i e poi facciamo che prendiamo equa questo è l'errore mettiamo qua dentro e noi siamo a posto ok quindi semplicemente si tratterà di fare così e avremo qua dentro l'errore fatemi scusate fatemi di fare qua potremmo avere una cosa

del genere e noi semplicemente togliamo quindi ovvero gestite così dipende se piace a voi oppure Lo lasciate call call cash e non avete nè tra i nets qui ok potete scegliere come gestirlo per questo caso teniamo tutto in stile sincrono e lasciamo questa sintassi speriamo velocemente le provi soul e gli us in cat nelle classi spostiamoci sulla documentazione perché tanto devo far vedere due cosine non conviene nemmeno stare a mettere in piedi tutto il codice per due cosine awaiting promis all allora zoomiamo si vede ok adesso si vede meglio A wave pro mi sol è

di base questa parte qua ok che cosa fa sostanzialmente ve lo faccio vedere anziché avere come noi qua un unico ferch e abbiamo una risposta con un unico fece quindi ci aspettiamo una sola immagine qua ce ne aspettiamo 3 come potete vedere aspettiamo il caffè il tè e aspettiamo una descrizione punto txt fin qua ci siamo questa funzione è una funzione custom la vedete qua è la funzione che chiede L'url e che tipo è quindi immagine immagine testo quindi questa funzione può avere un po di roba lasciatela perdere poi è sufficiente che pensate che questa

funzione face and cod non fa altro che andare a prendere due parametri che l'url dell'immagine o del file che ci interessa e specifichiamo il tipo che ci interessa perché ovviamente in base a quello dovrà andare a gestire in diverso modo veteres post punto blob l'abbiamo Già visto e response punto tex va a prendere il testo tutta questa roba qua semplicemente per dirvi questo vedete qua che c'è il fetch quindi quello che facevamo prima vedete response punto fece la stessa cosa che abbiamo messo qua response facce semplicemente andato a generalizzarlo in modo da poterlo fare automaticamente

senza nello scrivere ogni volta altrimenti poteva essere falciati fetch Txt insomma avete capito che diventava fastidioso quindi nella tua fare un'unica funzione generalizzante e qua ci siamo torniamo a noi quindi che cosa fa questi 3 adesso sono degli a wade come potete vedere teoricamente dovrebbe esserci una weight qui va bene anziché mettere tre weight differenti quindi away the chain cod come abbiamo fatto qui ritorna anziché far così lui dice sai cosa c'è wait promis all Quindi anziché avere la promis anziché avere un'unica promis come abbiamo visto prima che avevamo fatto promis risolve se mi sentivo

a fare a weight promis all quindi mi aspetti tutte le promis che ci sono che derivano da queste e cosa dice le tre promis sono queste ovviamente noi qua sta ritornando una promis venete a sync quindi ritorna la promis noi ce l'abbiamo quindi possa metterle dentro che provi solo accetta tante promis quindi fa un array di promis di un'altra Volta promis ok qui abbiamo coffee ti hann description e fa a weight su tutte quello che ritorna è un array di valori quindi poi si tratterà di andare a prendere vedete qua crea due immagini crea due

immagini e crea del tè il testo lo prenda value spunto da values due perché se dico a te sono tre elementi nella rete 012 lo zero è il caffè se vi ricordate l'uno ed il 2 e il sud miss il numero due è il terzo che sarebbe il testo dopo Penne tutela come borea pancia il bla bla alle sue immagini e che si è visto si è visto lui anziché fare tra yen che decide di mettere che ci un fondo per avere un codice più pulito effettivamente è più pulito più bello da vedere e niente

questo è molto semplice questa è la parte che ci interessa spero si sia capito ho fatto un test tornate sulla documentazione sempre sotto descrizione vedete un po e fate due prove per capirlo ma è abbastanza è Abbastanza semplice vorremmo invece velocemente affinché weight nei metodi delle classi non cambia niente semplicente abbiamo il nostro metodo nella classe quindi classe persona al costruttore ok qua a due metodi un metodo è normale è sincrono l'altro metodo è asincrono cosa andava a fare andrà a fare una sync davanti alla funzione ovviamente davanti al metodo e ritorna va semplicente a

fare una una weight in questo caso è solo un esempio Ok promis resolve ovviamente se facessimo un fax andasse a fare un flash avremo la weight del fez che stiamo andando a fare in questo caso è il classico esempio che ho fatto all'inizio dell'episodio ritorna a weight e cela promis che deve che deve rimandare molto semplice non cammini non cambia niente a livello di persona non cambia intel in costruttore non cambi niente alle altre proprietà semplicemente è questo dunque direi che per il video di oggi è tutto Noi ci vediamo al prossimo video dove cominceremo

a parlare degli ep ai cosa sono gli ep ai abbiamo ancora credo quattro video al massimo e dopo di che andremo avanti con con altre cose quindi preparatevi che siamo quasi alla fine di javascript vi ringrazio per essere ma siccome vi ricordo che sotto in descrizione c'è tutto ciò che serve se volete supportare il canale i vari gruppi il canale telegraph vi ringrazio ancora e alla prossima ciao ciao 1 Giorno a tutti bentornati episodio numero 22 del corso di javascript oggi facciamo un introduzione teorica al web e ip ai ok web ap serie 6 pronunciate

in italiano ok quello che amo vedere è un po di roba cosa sono gli ep ai quali sono quali sono gli ep ai client side javascript la distinzione tra javascript e pia e altri tool che usiamo come funzionano quindi quali sono i punti cardine come funzionano gli ep ai comuni Di browser e di terze parti ok quindi tutta roba teorica allora cosa sono gli ep ai quali bellissimo esempio vedete gli ep ai come se fosse una presa della corrente ok quando voi volete fornire energia a qualsiasi apparecchio abbiate semplicemente attaccate la spina la spina attaccata

al sistema elettrico della casa e automaticamente arriva l'elettricità al vostro dispositivo da caricare o al computer da far da far partire molto sincera che vi mettete Ogni volta a risistemare i cavi della casa e farli voi ok semplicemente vi attaccate è andate l'idea degli ep ai è proprio questa cosa qua il fatto che noi ci attacchiamo a gli ep ai in qualche modo che poi vedremo e da lì cominciamo a utilizzarli ok quindi c'è qualcuno che ha fatto per noi una grande parte di lavoro e la resa disponibile per tutti qui ne ha fatto un

astrazione ok di molte cose è riuscito a creare un diciamo una sorta di presa comune in cui Le persone gli altri programmatori altri sviluppatori che siamo noi possiamo attaccarci e cominciare a utilizzare queste funzioni ok gli ep ai client side sono di due tipi ok mi stanno facendo javascript client side lo vedremo poi anche server side con noda arriverà anche la guida su quello gli possono essere di due di due tipi possa essere browser of her parti che sarebbe terze parti allora i browser ep ai sono i browser Scusatemi sono gli ep ai costruiti nel

browser è quella parte di javascript che è stata scritta dentro il browser che ci permette è un piccolo layer sopra a javascript che ci permette di eseguire alcune cose è il motivo per cui alcuni browser hanno certe funzioni e altre non li hanno perché sono costruiti dentro il browser e dipendono non solo da java scritto insieme alla chi va a effettivamente a creare il browser ok qua fa un esempio del web audio e piano Dopo ne faremo altri non preoccupatevi quindi sono ep ai a cui ci attacchiamo direttamente grazie al browser che utilizziamo va bene

per quanto riguarda i piedi terze parti potrebbe essere appunto qua fa l'esempio di twitter ovvero voglia mettere nel nostro sito vogliamo incorporare i tweet o vogliamo incorporare dischord o facebook altre cose in questo caso andiamo a utilizzare gli ep ai di terze parti che ci siamo noi le due parti sono siamo noi e il Browser e le terze parti sono chiunque è terzo ok qual è la relazione tra javascript ip ai e altri tool allora distinguiamo con una bellissima distinzione cinque categorie abbiamo javascript che è il linguaggio ad alto livello che utilizziamo per scrivere gli

ep ai browser che sono appunto le funzionalità che sono costruite direttamente nel browser e servono per aiutarci a implementare delle funzionalità con più facilità Abbiamo abbiamo gli ep ai di terze parti che sono abbiamo detto twitter facebook eccetera per poter comunicare direttamente con le loro applicazioni e utilizzarne nel nostro sito oppure abbiamo le librerie per esempio jquery le librerie non sono altro che un insieme di file è un insieme di funzioni jquery per esempio cosa fa c'è il video se volete sul canale jquery andava a con delle funzioni molto molto comode all'epoca ormai si può

fare tutto con Con javascript comunque andava a rendere il lavoro sul don quindi come modificare gli elementi html e lo stile molto semplice erano solo delle funzioni che ci aiutavano a far le cose molto più semplici in maniera più semplice e veloce rispetto a javascript punto ok questa è una libreria alla libreria è un insieme di funzioni di file che ci aiuta ok anziché scrivere noi ogni volta lo stesso codice ci rifacciamo alle librerie Se qualcuno le ha fatte e poi ci sono i framework sentirete parlare spesso di framework pensate angular amber djs ma ne

sentirete di sentirti in tutti i tipi di framework ormai ne esce uno al giorno va bene i framework sono delle nuove tecnologie sono delle tecnologie a parte che si basano su javascript come vedete che molto spesso tendono a fare un pacchetto comprensivo di javascript html css non spaventato da quello che sto dicendo Vedete il framework come qualcosa di più ok è una verità come una nuova tecnologia che ci combina insieme più cose e ci aiuta a costruire da zero delle applicazioni spesso sono applicazioni single penso ma roba molto comoda passeremo prima da tutto il resto

ok tutto il resto e poi arriveremo prossimamente a parlare di framework ma per quel momento sarete pronti per capirlo e vi risulterà abbastanza intuitivo anche perchè come avete notato Durante il corso io cerco di mettere un video dopo l'altro o un corso dopo l'altro in modo da rispondere quelle domande che vi nascono naturalmente anziché buttarvi tutto impasto subito e prenderlo così come è un liceo ok ma allora come posso fare questa causata da me lo puoi fare così ma per il fatto che però sei chiesto adesso sai perché si usa questa cosa ok in particolare

questo di base piccola piccola parentesi questo il modus operandi con cui ho costruito Tutti i corsi su questo canale li costruirò sempre quindi farvi chiedere delle domande come posso essere più veloce qua come posso scrivere meno codice come possa essere più efficiente da dan nuova tecnologia te la spiego ma adesso per te ha senso anziché buttarti dal caso c'erano tecnologia tienila adesso serve è tienila ok proseguiamo cosa da poco cosa possono fare gli eps quasi fa una lista degli ep ai più comuni allora è qua parliamo dei di Quelli del browser questi sono i più

comuni data fez data dal server ok abbiamo usato i fece pia i ve le ricordate fetch coffee feci coffee ci abbiamo ancora non ce l'abbiamo più qualche f e poi ex e xml request questi due eventi da ricordare ok e li abbiamo usati quindi questi sono gli ep ai match paghiamo gli ep hyper ma per manipolare il documento e li vedremo lì vedremo nella prossima lezione ma si comincia con document punto quali Selector l'abbiamo già usato ok ve lo ricordate e poi andremo a modificare il html andremo creare dei nuovi elementi abbiamo fatto anche quello

abbiamo creato gli elementi ricordate negli scorsi episodi abbiamo creato delle immagini dei div abbiamo fatto up and child quindi quelli sono gli ep ai per manipolare i abbiamo degli ep hyperphar telegrafiche ok con canvas e webgl per esempio che non vedremo in questo specifico corso ci Limiteremo a questi due che sono più importanti questi potremmo farli come bonus se li volete se li volete grafiche oppure audio e video scusate mi basta che lo chiedete possiamo eventualmente fare dei video bonus ma non sono strettamente necessari quindi questi sono gli ep ai browser verso capite di cosa

parliamo quindi che cos'è le più ai browser li abbiamo utilizzati Va bene arriviamo invece agli episodi di terze parti qua ci fa ad esempio twitter per esempio google maps quante volte avete visto un sito con dentro google maps integrato o twitter ci sono i piedi telegram di youtube youtube si lo usate anch'io twilio per mandare sms mms pinterest insomma le più grandi applicazioni attualmente in giro in commercio sul mercato hanno fondamentalmente tutti degli ep aida da utilizzare per Integrare i loro servizi con quello che possono essere servizio e stan in questo caso siamo noi le

terze parti che integrano i loro i loro servizi va bene quindi differenza tra browser e pia e ciò che ci serve per lavorare sul nostro sito direttamente ok terze parti sono quelle cose extra che vogliamo andare ad agganciare allora quali sono i punti cardine su cui si basano gli ep ai fondamentalmente libia sono tutti degli oggetti quindi si basano tutti su Oggetti se vi faccio vedere adesso capite saltiamo questa parte qua ecco qua vedete audio context audio contest qua andiamo a lavorare sulla audio va bene voglio saltano velocemente però per farvi vedere che audio context

altro non è che new audio context e vi ricordate è un nuovo oggetto ma quello più importante invece è document query selector che abbiamo usato tante volte e si basa e si basa sul sull'oggetto document ok quindi tutte queste cose qua Sono ep ai vedete che sono metodi di oggetti che abbiamo creato o che esistono già in questo caso quindi qua abbiamo fatto niobio context qua invece document ci viene già passato automaticamente e grazie a questi oggetti possiamo andare a chiamare dei metodi con cui andare a fare ciò che ci serve qua ce ne lista

altri ma questo è allora hanno un entry point facilmente riconoscibile le entry point 4 se ne vedete come audio context che Sarebbe l'oggetto equa document in maiuscolo e di questo l entry point e ogni volta che dobbiamo andare a lavorare con quelle pia e dobbiamo andare a utilizzare lanter point la entry point chiamiamolo è un po come il punto in cui inserite la spina in questo caso vogliamo lavorare col documento la spina per noi per collegarci a lavorare col documento è l'oggetto document va bene quindi questo è stessa cosa per audio context molto semplice da

da Capire allora qua dice usano eventi per modificare i cambi di stato in realtà alcune piani non hanno alcun tipo di evento va bene ma se dovessero gestire dei cambi di stato ok durante l'applicazione sicuramente usano degli eventi l'esempio che ci fa è sulle richieste xml e ci fa se vi ricordate rekuest o un load questo è un evento allora impariamo alla nostra richiesta che sicuramente vi ricordate abbiamo l'url e per andare a Prendere ciò che ci interessa in questo caso il jason andiamo crea una nuova di cui una nuova request quindi questa è l'epia

i browser se vi ricordate per fare il fez dei dati quindi questo è il entry point e nemo creare l'oggetto xml andiamo a settare con i metodi ok nemo settari meteo abbiamo settare le proprietà del nostro oggetto va bene della nostra istanza dell'oggetto ormai tutte queste cose qua li sapete lo so che lo sapete dopo di che andiamo a Chiamare un load è chiaramente un evento quando la richiesta è stata caricata ovviamente queste cose qua sono tutte cose custom fatti dagli ep ai quando questa cosa qua è stata caricata quindi è un evento mi fai

tutto il resto ecco cosa si parla di eventi per capire a che punto sono gli stati quando la richiesta quando lo stato della richiesta è pronta ed è caricata allora utilizzi l'evento un load e mi fai tutto quello che devi fare va bene quindi ricapitoliamo un Attimo sono tutti degli oggetti quindi utilizza si basano sugli oggetti hanno un chiaro entry point e quindi non chiaro il riferimento document audio contex eccetera e cambiano gli stati semmai abbiamo gestire tramite degli eventi ultima cosa hanno del dei meccanismi di sicurezza addizionali dove richiesti per esempio quasi fa l'esempio

delle notifiche quante volte voi andate sul sito e in alto a sinistra vi compare quale notifiche consentì non Consenti ok questi sono gli ep ai per esempio push l'ipia e delle sue notification ip ai vedete qua notification ep ahi noi proseguiamo che vedete qua c'è una è esattamente questo questo qua è esattamente il notification e pia e quindi ecco come funziona questi sono i quattro punti cardine questa era un introduzione abbastanza veloce agli e pia e noi ci vediamo al prossimo video dove cominciamo a parlare del mpa e per Gestire il documento quindi per manipolare

il documento andiamo a fare cose interessanti molte cose ripeto le abbiamo già viste le abbiamo già utilizzate e comincerete a collegare i vari puntini che avete magari che sono ancora non collegati in questo modo a ok quindi documenti pia e questo l'abbiamo fatto questo non l'abbiamo fatto e molte cose diventeranno molto più chiare siamo veramente alla fine del corso manca veramente poco Vi ringrazio per essere ma siccome è un'altra volta noi ci vediamo alla prossima mi raccomando sotto in descrizione ci sono i metodi per supportare il canale o il gruppo telegram il canale the grand

pas resta sempre aggiornati e conoscerla community di altri di altri sviluppatori che stanno si stanno approcciando a tutto ciò io vi ringrazio ancora e alla prossima ciao ciao 1 giorno a tutti bentornati episodi numero 23 del costo Di javascript quest'oggi andiamo a vedere come manipolare i documenti appunto tramite il web e pia e allora oggi vedremo velocemente window navigation che quando l'ho messo per sbaglio e il dom come prende gli alimenti dal dom creare aggiungere nuovi nodi muovere ed eliminare gli elementi manipolare lo stile è in realtà vi farò vedere anche come aggiungere degli attributi

basiamoci sulla documentazione che fa un bello schemino ok Ecco cosa possiamo prendere tramite web pia e possiamo prendere il document che l'abbiamo già visto quindi document quali selector possiamo andare a cambiare gli elementi aggiungere le nuove eccetera possiamo prenderla window ok la window è la grandezza del viewport della tab in questo caso la mia window è questa qua lo vedete fino alla url se cambio questa è un'altra window quindi questa è la window possiamo andare a sistemare la Larghezza altezza e altre cose e poi c'è il navigator che qua navigator ce lo dà in realtà

qua in alto ma è come se fosse una cosa astratta la navigator possiamo prendere cose come la lingua preferita dell'utente e altre e altre preferenze che potrebbe farci comodo più avanti abbiamo vedere che cos'è il il doma ovvero il document object model abbiamo già visto che cos'è il dom in realtà però facciamo facciamo un ripasso veloce allora questo è il nostro documento html Abbiamo detto che dal documento html viene generato un oggetto che è chiamato dom ok il nostro documento viene diviso in in una gerarchia di elementi ok possiamo vedere abbiamo qua html che è

il padre di tutti gli elementi sotto ok abbiamo ed abbiamo body entriamo qua sul body che ci fa che ci fa comodo allora diamo su body e vedete che abbiamo un no di testo ok poi abbiamo un altro elemento abbiamo un altro non di testo poi abbiamo un'immagine che ha degli Attributi ok poi abbiamo dell'altro testo volendo abbiamo il nostro elemento p che ha un altro elemento al suo interno con un attributo entrambi hanno dei nodi di testo ok quindi quelli in viola sono gli elementi il testo in grigio sono i nodi quindi scavano nodi

di testo mentre invece le parti in nero sono gli attributi dividete questo e siamo a posto quindi andiamo a specificare allora il tex noda Appunto l'abbiamo visto andiamo a vedere quali sono i gradi di parentela il root nord e html ok questo è il root non è la radice di tutto poi abbiamo un elemento che è contenuto in qualcos'altro in questo caso è the body sony child di html html non solo r ma è il parente rispetto ed e body body è il parente di section section è il child di body ok gli mg e

p sono faccio vedere gli mg ep sono Siblings di sex scusatemi dmg ep sono children di section ma sono siblings vedete che sono sulla stessa lunghezza vedete qua questa riga amg ep sono figli di section children ma sono siblings ok mentre invece a è un discendente di section quindi è un discendente quindi non direttamente collegato da padre figlio perciò un discendente stessa cosa section a un discendente di html ea è un discendente di section così come è di Body così come diede questi sono i grado di parentela quindi o si è padre o se figlio

o si è di base nonno discendente o fratello non ce ne sono molti quindi questo è il grado di di relazione andiamo a vedere un po di esempi invece allora come possiamo prendere gli elementi di un dom io che ho messo tre cose ho messo un bottone con un id è una classe la stessa classe l'ho messa su altri due elementi quindi su un div e su uno spam allora Possiamo usare di base chiamiamoli 1234 metodi anche se alta abbiamo qualcos'altro potremo fare vedete qua vedete un po di get elements by di potremo fare anche

get element by tag name ok velo lasciati fuori questi perché l'alta potete basarvi su su quelli selector allora andiamo a vedere document.getelementbyid ci ritorna un solo elemento questo perché dà per scontato che noi utilizziamo la best practice di dare un Sol id univoco ad elemento che ho già detto di non dare più id ha più lo stesso dia più elementi si può fare ma non fatelo quindi lui dà per scontato che il vostro di disse a univoco perciò va a prendere dal documento dall'oggetto document dal vostro dom va a prendere quell'elemento che ha come di

bottone che cos'è che al bottone il button io sono stato un po poco creativo però avete capito che solo un elemento e ve lo restituisce direttamente sulla Falsariga di ghat element vai di abbiamo il cuore selector query selector che differisce da quei selector all perché quelli selector restituisce un solo elemento mentre invece quelli selector all ci restituisce tutti gli elementi ok qua ci basta mettere gli stessi selettori di css se avete visto il corso quindi se noi mettiamo solo la scritta qua è il tag che è equivalente al fare brodetto document punto è la mente

baita game io piuttosto che avere Differenze ho capito preferisco avere tutti quelli selector per una questione mia ok di visibilità di codice o tutto quali selector semplicemente il tag name anziché scrivere baita game metto solo button ok quindi se facciamo solo così mettiamo solo il tag dell'elemento html se mettiamo davanti il cancelletto andiamo a prendere lidi che equivalente al fare questo va bene e dopo di che abbiamo il punto che ci indica una classe preferisco questo perché non Leggo mai questo ma leggo direttamente il contenuto quindi se non c'è niente so che hanno elemento se

c'è il cancelletto sacconi dice c'è il punto so che è una classe in realtà potreste fare tranquillamente potete sostituire questo con gut elementi by di sulla temi questo conga talmente by di questo non lo sostituirei maicon baita game onestamente e questo per la classe potete lasciare così come due cose simili sono invece quelli Selector all and get element by class name document punto quelli selector all ci permette di prendere tutti gli elementi di un certo cosa quindi se io avessi più bottoni più button quindi io credo quan'altro button mi faccio vedere andremo a prendere tutti

i bottoni quindi quali si è letto o quelli che selector all prende tutti gli elementi con un dato selettore quindi torniamo indietro in questo caso io ho messo prova e vedete che ho fatto 3 Ho messo tre elementi diversi con prova in questo caso ci manderà schermo tutti gli elementi che abbiamo comprò ve lo faccio vedere con sol punto log è questo qua si chiama w come variabile quindi c'è un w andiamo qua e mettiamo w stessa cosa lo facciamo con j e andiamo mettere j e mettiamo qua j allora get sia quelli selector all

che get element by class name elements Vedete ci ritorna un array di elementi quindi se vi faccio vedere vedete che ci torna una not least equa un html collection però vedete che ci ritornano esattamente gli elementi che poi possiamo andare a prendere direttamente con gli indici dell'array vi faccio vedere prendiamo coma gari lo zero ecco invece prendiamo il due venete come ci ritorna i vari elementi ok quindi è facile accedere così potete usare sia get element back last man che Quelle selector oil dipende dipende dalla vostra preferenza ma è esattamente uguale quindi una volta che

mi hanno preso i nostri elementi queste cose ve l'avevo già fatto vedere durante tutti gli episodi del corso l'abbiamo usato spesso e volentieri vediamo come creare nuovi nodi all'ora innanzitutto andiamo a prendere il nostro quelli selector div quindi tutto il resto non ci interessa solo dimostrativo adesso noi prendiamo il nostro di lo vedete questo e lo Prendo per tag name lo prendo per tag nate perché non c'è niente qua davanti quindi ho messo solo div e lui sa che deve prendermi l'elemento html che si chiama div per cosa vado a fare l'affare document punto create

element quindi vado a creare un elemento dal nulla e vado creare un paragrafo fare questa cosa a livello al runtime sarebbe come se io in html arco d'assi una cosa del genere un paragrafo ok quindi quello che stiamo facendo lo stiamo facendo mentre Il programma va ok magari sul click di un bottone creiamo un nuovo paragrafo invece se lo facciamo quali rettamente in html lo stiamo hard co dando arco dando vuol dire scriverlo a mano noi e non gestirlo dinamicamente quindi una cosa può essere arco data oppure può essere dinamica se è dinamica o runtime

vuol dire che la facciamo mentre il programma va altrimenti arco data vuol dire che Abbiamo scritto noi a mano direttamente ok quindi abbiamo creato il nostro pil dentro il nostro p vogliamo andare a metter del contenuto quindi se noi facessimo solo creta creta element pia devo fare una cosa del genere andando a fare text content stiamo è come se noi arco d'assino direttamente del testo in questo caso runtime va bene quindi andiamo creare l'elemento p andiamo ad assegnare a questo elemento p il text content quindi il contenuto del Testo e ho scritto elemento creato dinamicamente

e poi facciamo di punto up and child paragrafo questo perché a noi il paragrafo lo vogliamo nel dio andiamo a vedere il risultato come potete vedere noi abbiamo aspettare che pixum io vado a prendere questo noi abbiamo vedete qua div guardatela la console noi abbiamo div class prova che quello che mi ha preso noi novembre su questo div abbiamo creato il pil abbiamo inserito il text content Dopodiché mi ha fatto di up and drive ovvero appendi gli il figlio mettigli un figlio dentro ok abbia messo il nostro p in questo caso elemento creato dinamicamente nemo

vedere elemento creato dinamicamente e non fa una piega ma se noi volessimo aggiungere dopo del testo magari l'abbiamo abbiamo creato l'elemento senza niente vogliamo aggiungerlo dopo se non c'è niente possiamo far text content se vogliamo appendere del testo aggiuntivo Dobbiamo andare a fare questo in questo caso costante extra testo l'ha chiamato così create text nord perché vi ho già detto che i nodi in questo caso i test nord vengono definiti così quindi in tutto ciò che è testo è un test nord non è un element un elemento è appunto un elemento html il testo è

un tex nord quindi documento create text nord altra parte di testo come nord dopodiché paragrafo up and child insomma non è difficile base up and child lo dobbiamo Fare quando vogliamo andare ad appendere sotto qualcosa un elemento piuttosto che del testo e ce la dobbiamo far riferimento ovviamente all'elemento a cui vogliamo apprendere qualcosa e dentro mettiamo l'elemento che vogliamo appendere a livello logico non è non è complesso ci vuole giusto 23 20 30 tentativi di pratica e poi vi resta già in testa abbiamo vedere e quindi devo salvare Ecco qua vedete altra parte di testo

come nord se andiamo a vedere qui vede che non ci ha creato un nuovo elemento semplicemente ha appeso lo vedete appeso un nuovo nord e sono 29 totalmente diversi proseguiamo e vediamo come spostare e rimuovere i nodi allora cominciamo con togliamo cuore muove cominciamo con document body appelli cosa ho fatto nel nostro paragrafo se vi ricordate che è qui lo abbiamo appeso al div Ma se io poi vado a fare un altro spostamento dello stesso elemento l'elemento non viene duplicato non è che io prendo il paragrafo lo attendo a develop endo abodi e ci sono

due elementi differenti voi potete dirmi scusatemi ma tve non è già dentro body sì ma noi stiamo prendendo dentro il div se invece lo andiamo appendere al body andrà sotto il dip adesso vi faccio vedere quindi document punto body è così che accediamo al po di meno che L'abbiamo salvato in una variabile document punto body a pensa il paragrafo vedete che in questo caso si è spostato ed effettivamente il nostro body non è altissimo perché abbiamo poco contenuto ma se voi guardate il nostro pil è sceso è stato appeso persino sotto lo script quello che

stiamo guardando ok quindi questo è quello che noi vediamo in vsc qua c'è il nostro scritte ed è stato appeso alla fine quindi così possiamo spostare degli elementi che già esistono Ci basta identificare questo elemento facciamo finta che noi non abbiamo accesso a questo p andiamo a vedere come si chiama questo p ok questo è un p magari a una classe è solo puro è l'unico p va bene andiamo a fare quelli selector p come elemento o quello che volete e mi dirà penn child non dobbiamo dire da ha semplicemente dc melo appendi qui e

loro automaticamente si sposta dopo di che andiamo a rimuovere andiamo rimuovere Scusatemi andiamo a rimuovere un child quindi abbia fatto a pancia ed andiamo a rimuovere il child e voglio rimuovere extra testo semplicemente paragrafo punto remove child ok extra testo in questo caso la differenza tra note element non fa differenza sufficiente tutti sono figli di qualcosa perciò molto semplicemente rinuncia il non remove tex non ho altre cose removed child se invece è lo puoi fare come remove child oppure possiamo farlo Direttamente su sull'elemento quindi sull'elemento extra testo faccio vedere il risultato è il medesimo quindi

noi possiamo eliminare un child oppure possiamo eliminare l'elemento stesso dipende come vogliamo agire se abbiamo accesso all'elemento direttamente abbiamo accesso solo al parent dipende dipende possiamo usare entrambi i metodi e vanno bene lo stesso Andiamo sotto e andiamo a modificare gli stili quindi un'altra cosa che possiamo fare con javascript runtime a modificare gli stili allora io per ora non salvo e vedete che abbiamo il nostro bellissimo div che è qua dentro e cosa faccio e dico paragrafo vi faccio vedere paragrafo è questo ok guardate i colori vive tutto questo paragrafo è questo quindi sono due

elementi totalmente distinti e ne possiamo andare a modificare lo stile Riprendo paragrafo quindi che la nostra variabile di riferimento andiamo a modificare lo stile per scrivere una cosa del genere dobbiamo fare paragrafo come ho scritto qua appunto style punto vedete che ci dà un po di roba ok allora sono scritti in modo diversi rispetto a css per esempio background color se vi ricordate non lo scrivevamo in css background Background color così ok ma dovendo usare noi la dott notation non possiamo utilizzare il il trattino quindi dobbiamo per forza tutte quelle parole tutte quelle proprietà che

in css anno il trattino diventano camel caze in questo caso ground collo lo vedete diventa così io ho già scritto qua altra regola altra regola tutte le proprietà vanno tra virgolette quindi se avete solo color non è un problema padding non è un problema se Volessi fare padding top dovrei scrivere padding top vedete quindi quando le parole sono quando ci sono più di una parola dobbiamo andare a fare camel case tutti i dati tutti i valori devono essere tra virgolette forse dimenticando qualcosa che non va ma in questo momento non mi viene in mente diciamo

che al 99 per cento vanno tutti tra virgolette quindi persino i valori in pixel devono essere tra virgolette ok andremo a vedere il risultato E noi abbiamo un bellissimo paragrafo con colore rosso sfondo nero text align center e un po di paddling all'interno quindi questo è come modificare gli stili come possiamo modificare gli stili di un elemento i javascript quindi abbiamo visto come prende gli elementi come creare nuovi elementi appendere nuovi elementi rimuovere degli elementi spostare gli elementi modificarne gli stili andiamo a vedere l'ultima cosa ok che è la modifica degli attributi tutta Questa bar

dell'acqua che abbiamo scritto noi non vorremmo avere tutto sto codice qua così la cosa più comoda l'affare sarebbe avere una classe css e noi semplicemente nemo fare paragrafo aggiungi classe ok dal paragrafo aggiungi una classe ti dico il nome della classe effettivamente io ho preso tutta sta roba qua la commentiamo elogiare iscritta qua come classe modifica si rivede colore rosso anzi che abbiamo un attimo il Background facciamo green almeno vedete il cambiamento e quindi colore rosso background verde text align center padding 10p ex è la stessa cosa semplicemente ai più ordinato ovviamente non sarà qua

in un progetto grosso sarà nel suo file css fuori ma noi possiamo avere tutte le nostre classi che useremo un runtime per esempio un messaggio di errore una cosa che magari è un campo di errore quindi il campo di un form quando non lo Completiamo inserisci il tuo nome è obbligatorio la persona lo salta quando poi va a schiacciare sul tasto via modulo non in via niente abbiamo già visto come evitare l'invio di un modulo e gli dice attenzione e aggiunge all'input quindi all'input testo del nome si aggiunge la classe errore input che avrà magari

un border solid rosso le scritte rosse cose del genere come lo facciamo anziché andrea ma nella tutte le volte para input style color input Style border collie bla bla bla noi andiamo come facciamo in questo caso è paragrafo convinta che sia input input set attribute class quindi mi aggiunge una classe mi fai modifica stili molto bene vediamo qua risultato è esattamente il medesimo ma maledettamente più pulito rispetto che scrive tutte ste cose qua noi abbiamo questo è soprattutto questo non è riutilizzabile il sì lo so lo possiamo mettere in una funzione richiamarlo ogni volta ma

perché parco Si che poi dobbiamo continuare a fare javascript c'è semplicemente utilizziamo attribute cles modifica stili e possiamo andare a togliere metterla classe a nostro piacimento anziché dover ogni volta dover togliere dal set color red perché poi se vogliamo torna indietro la modifica stili ok qua ci basta toglierla classico invece dobbiamo fare paragrafo style color black background colon transparent padding 0 text align left quindi potete capire che ci torna molto Più comodo avere le nostre classi css preimpostate è semplicemente l'andiamo a togliere e mettere e togliere e mettere sulla falsariga di questa cosa qua noi

possiamo andare a fare letteralmente negli attributi personalizzati ve ne avevo parlato nel corso html degli attributi personalizzati ed aveva accennato che le avremmo usati più avanti io e molti progetti che faccio soprattutto quando vado a creare delle tabelle dinamiche eccetera utilizzo Tanto questi valori perché sono degli attributi personalizzati che possiamo andare ad attaccare sun su un elemento html per storari dei valori in questo caso io ho scritto solo ciao ma ne potremmo avere delle variabili che ci passanti polyp di del paragrafo che dinamicamente ci serve oli di del commento di una pensate sotto sotto facebook

i lidi del commento di una persona come lo ritroviamo lidi di quel commento potrebbe essere che c'è un Database o quello che volete comment di o quello che volete questi di poi verrà ripreso runtime quando dobbiamo andare a fare qualcosa con il commento magari verrà cancellato quindi se io o per esempio questo commento e qua c'è la ics basate facebook e fai elimina molto probabilmente c'è un riferimento qui c'è un riferimento qui che dice commenti dio chiamatelo come volete il vostro attributo commenti di uguale 15 lui va automaticamente sul server back end e Dice guarda

ho cancellato il commento 15 il commento 15 viene rimosso o semplicemente nascosto a livello database e non ci viene più mostrato nella applicazione ok altrimenti questo modo utile per avere dei riferimenti di variabili nei nostri elementi html altrimenti potremmo non averne e sarebbe un bel problema quindi andiamo a salvare e vi faccio vedere ne andiamo a salvare tata andiamo a prendere il nostro p class lo vedete Questo modifica stili data value ciao io cosa ho fatto anche l'ho mandato a schermo quindi come ho fatto set attribute data value se non esiste il val se non

esiste qua class sa che cos'è class se non esiste sa che un valore perché è un attributo personalizzato quindi console log paragrafo punto gaeta tribute così che noi prendiamo dei degli attributi in questo caso attributi personalizzati data value andiamo a vedere qua dentro c'è ciao e così si Chiude il ciclo allora brevemente abbiamo visto prendere gli elementi crearli rimuoverli appenderli modificarli o modificarne la posizione modificarne lo stile settare gli attributi soprattutto le classi importanti se tali attributi personalizzati io direi che comunque che con questo video abbastanza lungo è veramente tutto mancano due video sono mi

sbaglio alla fine del corso siamo quasi arrivati alla fine io ringrazio Per sé rimasti con me in descrizione cioè tutti i metodi per supportare il canale se volete supportarlo e telegramma per restare in contatto con la community ancora vi ringrazio alla prossima ciao ciao 1 giorno a tutti ben ritrovati episodi numero 24 del corso di javascript quest'oggi parliamo di come fare il facce dei dati da un server in realtà l'abbiamo già visti in modo sporadico negli episodi precedenti oggi voglio fare un sommario vedere Queste cose qua e alla fine darvi un compito molto semplice da

fare formalmente è il penultimo episodio in realtà dopo di questo potrà essere stop harvey perché nel possibilità di andremo a vedere velocemente gli eps di terze parti e come poter fare eventualmente un'applicazione di prova con i piedi di terze parti quindi se volete potete andare avanti perché magari interesserebbe vi interesserà per fare dei vostri siti riprova altrimenti Potete potete fermarvi qui come possiamo inserire dei dati nel nostro nel nostro sito chiamandoli da un server allora prima della dello sviluppo asincrono ok delle chiamate asincrone c'era un problema col modo classico di richiedere i dati noi chiedevamo

una pagina html ok che conteneva dei dati la pagina ci veniva restituita con i dati e restava così fissa ok per esempio prendiamo ancora l'esempio che fece una volta del livescore quindi parliamo di punteggi in Tempo reale delle partite una volta sarebbe stato così ci arriva la pagina con gli eventi per esempio juventus inter 0 0 ok al massimo quello che può fare javascript a livello client e mostrarci quanto sta andando avanti il cronometro ma se il gol arriva in tempo realtà e noi non lo possiamo sapere avremmo dovuto ogni volta ricaricare la pagina e

vedere se sono stati aggiornati dei dei risultati stessa cosa per Youtube magari vogliamo vedere le visualizzazioni che salgono o i commenti che arrivano ogni volta dobbiamo ricaricare la pagina o anche facebook all'inizio bisognava ricaricare ogni volta la pagina adesso vengono attaccati direttamente sotto con l'arrivo di ajax non vi ho mai parlato di agio in realtà sono semplicente le chiamate asincrone a just a joke sta per asynchronous javascript and ex ml ok quindi è l'acronimo di Di questo quindi è roba che abbiamo già visto si chiama ajax sono richiamate asincrone ok noi abbia sempre chiamato come

asincrono oggi ve lo posso chiamare a jack quindi quando sente parlare di ajax altro non sono che chiamate asincrone con l'arrivo di ajax cambia un po la situazione perché noi facciamo la grande richiesta alla pagina la nostra pagina ml quindi facciamo la richiesta http ci arriva la pagina dei nostri live score non è cosa succede che il Sottobanco noi mandiamo la pagina è sempre la stessa ma sottobanco ma andiamo delle richieste http per sapere se si sta aggiornando il si stanno già nei commenti su facebook o su youtube si stanno aggiornando gli scorre appunto su

su diretta.it e cose del genere quindi ajax ci permette di avere la stessa pagina non doverla ricaricare per intero ma semplicemente ricaricare piccoli pezzi di pagina alla volta in questo modo la nostra esperienza come Utenti è incredibile sicuramente rispetto a prima che dobbiamo continuare a caricare invece adesso semplicemente ci basta restare sulla nostra pagina fare le cose che dobbiamo fare è in background vengono aggiornate certe parti di pagina senza che noi ce ne accorgiamo ok quindi questa è la grande la grande innovazione che portò all'epoca ajax adesso funziona tutto così praticamente non c'è un sito

in cui devi ricaricare per vedere gli Aggiornamenti allora abbiamo due tipi di chiamate ad wax in realtà le abbiamo già viste andiamo a vedere abbiamo abbiamo la richiesta xml ok http re queste vi ricordate che l'abbiamo già vista oppure abbiamo il fez che sono i nuovi flash e pii che sono arrivati qualche annetto fa allora io ho creato qua 22 variabili noi devo prendere sempre la nostra classe j son e che abbiamo fatto vedere quando abbiamo cominciato a lavorare col jason Ho messo due due variabili differenti ho messo classe xml ovvero che noi prendiamo questa

classe con m xml oppure prendiamo questa classe con metodo fece questo è il metodo fair quindi non nascondiamo un attimo guardiamo ancora una volta al xml ormai dovreste saperlo ma guardiamola andiamo a definire un url ovvero potrebbe essere un url per un un end point di jason online come vedremo per gli a piedi terze parti potrebbe essere invece un percorso che abbiamo Noi in questo caso ce l'abbiamo in locale classe punto jason andiamo creare una richiesta altro non è che un istanza dell'oggetto xml le quest andiamo ad aprirla andando a dire il metodo con cui

vogliamo prenderla e andando a specificare l'url andremo poi a settare la risposta il tipo di risposta in questo caso un jason e andiamo a mandare il sand prima di fare ciò però andiamo a definire un load quindi l'evento per il controllo dello stato se vi va tel Abbiamo parlato recentemente questo è un evento per il controllo dello stato una volta che arriva questo ne facciamo una funzione e andiamo a definire classics ml uguale rekuest punto response ovviamente viene già passato dal jason perché lo fa automaticamente qui di conseguenza noi ci basta mandare a schermo xml

rekuest classe xml e siamo a posto quindi così è molto semplice è veramente semplice da fare e abbiamo quello che ci serve se Non fosse che quando poi vedrete conoscete magari jquery libreria che venne introdotta credo ormai una quindicina d'anni fa presumo e andava a mettere ajax come richieste facevano il loro metodo a jobs era molto comodo rispetto a questo perché in certe situazioni possa diventare abbastanza lungo tuttavia come avevo già detto jquery non vi serve più ho già un video online farò anche un corso per dj query per chi ne avesse bisogno In realtà

ormai la tendenza è quella di abbandonare jquery ok come vedremo più avanti su questo canale ma molti progetti si basano ancora su jquery quindi sarà importante andare a vedere comunque il corso perché se vi capiterà un progetto in jquery dovete saper vi muove re tuttavia piuttosto che a queste preferivo l'ajax di jquery quindi come libreria jquery in realtà da quando è arrivato al feci io preferisco fare direttamente il fetch Quindi tutta questa roba qua noi la riduciamo come abbiamo già visto con un flash andiamo invece a vedere come scriverlo quindi invece velocemente abbiamo feci col

nostro url ok abbiamo den quindi una volta che abbiamo fissato il nostro url andiamo a prendere la risposta che ci ritorna la risposta la partiamo già come è come se fosse un jason perché giustamente devono prendere un jason quello che ci ritorna qui lo Andiamo a prendere qua dentro anzi che continua a chiamarla risposta preferisco chiamarla come jason andiamo qui classe fece vedete che abbiamo classe xml cui abbiamo segnato qui prendiamo classe fetch gli diamo il valore che ci ritorna tutto questo giro andiamo a mandare a schermo entrambi vediamo il risultato è esattamente il medesimo

vedete sia con xml rekuest sia con fece esattamente la stessa cosa lì poi sta sta a voi decidere se usare xml oppure fece io Preferisco match mi sembra più più intuitivo più bello da vedere onestamente scritto così più bello da vedere così mentre invece così è più compatto preferisco preferisco la compattezza io onestamente quindi questo il modo in cui potevamo tranquillamente prendere possiamo prendere i dati da da un server vedremo poi quando andremo a parlare di back end quando prima ci sarà il corso che hp ma quando andremo a introdurre Node.js altro non faremo che

andare a chiamare un url un end point ok chiameremo un endpoint particolare sulla nostra applicazione back end che ci restituirà alla fine un jason che andremo poi a lavorare nello stesso modo quindi adesso stiamo lavorando con un fare il locale nel prossimo episodio andremo a vedere i gesone piedi terze parti e quando invece parliamo del back end avremo un end point che sarà nostro comunque sul server e andremo a prendere I dati quindi siete già pronti volendo per la parte beckham se conoscete già qualcuno sulla community che vi può fare la parte back end che

la saggia fare potete già chiedergli i dati e prepararvi a fare degli esperimenti allora compito per la prossima volta se lo volete fare ovviamente io non mi controllo perché onestamente siete grandi e vaccinati compito per la prossima volta è molto semplice voglio che mi fate un bottone Migratori vento un bottone in html tramite quel bottone li dovete aggiungere un evento listener che prende il fez e o potete fare come volete prende il vostro jason quindi vi creato un jason di prodotti possibilmente quindi mettete nei prodotti è un jason che ha una serie di prodotti fate

tre prodotti è bassa quindi saranno tra immagini in tre nomi prodotti con la loro descrizione e il loro prezzo basta quello che voglio che mandato a schermo È un una piccola lista di prodotti con immagine prezzo nome descrizione prodotto e il carrello lì vicino ok molto molto molto semplice se riuscite a fare questa cosa qua si ed è sede pronti per per il passo successivo se volete farmi vedere il vostro compito potete sotto in descrizione c'è il gruppo telegram dove potrete scambiare opinioni eccetera e subito mandarmi quello che avete fatto se volete adesso a farmelo

vedere perché sito orgogliosi dei vostri Dei vostri miglioramenti oppure per coloro che hanno supportato il canale e sono abbonati mi potete scrivere direttamente in privato e niente li ci sentiamo in privato io vi ringrazio e ci vediamo per quello che è l'ultimo video ufficiale di questo corso appunto parleremo degli eps di terze parti e alla prossima ciao ciao un buongiorno a tutti bentornati ultimo episodio numero 25 nel corso di javascript se siete arrivati fino qua un complimenti a tutti Quest'oggi andiamo a vedere gli e piedi terze parti in sé non è scienza scienza astratta di

cui stiamo parlando gli abbia terze parti molto spesso arriva con delle documentazioni si guardano si leggono e si usano sono abbastanza importanti tuttavia per persone che si sono appena approcciate al mondo dello sviluppo è importante sapere che c'è una giungla di cose questo video serve appunto per farvi un po di chiarezza su Come funziona gli ep ai di terzi qua ci chiede quali sono gli ibridi terze parti terze parti abbiamo detto che sono servizi esterni di altri siti o altre applicazioni che ci mettono a disposizione l'accesso alla loro applicazione in qualche modo per poterla poi

incorporare nel nostro sito o più avanti applicazioni quando attualmente andrete a far mobile se volete far mobile quindi gli ep e terze parti sono servizi di altre a cui ci possiamo Connettere per migliorare la nostra applicazione qua se voi scorrete sotto c'è simple map ma questi piech sample andiamo a prendere vedete che semplicemente c'è una mappa fornita da mapquest ok tenendo hanno inserito la mappa possiamo andare avanti possiamo esattamente come quando vediamo le mappe di google maps incorporate questo è un esempio di epia i loro potrebbe dire beh cosa ci vuole lo vada a incorporare

stessa cosa che ho fatto io per farvi Vedere quindi suonato qua ho provato a fare un dvd mep ho preso lo script che ho trovato da loro ok quindi come potete vedere sono andato ad inserire in questo caso il loro script vedete ep ai map c ii n mapquest e alla fine è un mapquest js e poi il mapquest css perché loro fanno fare la la mappa ok con geyer si permette di fare la mappa ma il css gli dà lo stile quindi alcune pia invii richiederanno di inserire nel vostro codice magari del Css o

dei javascript non tutti gli ep ai adesso lo vedremo non tutti gli ep ai ma qualcuno ve lo chiederà sicuramente e che cosa si va a fare si va a creare si fa seguire poi la documentazione in questo caso devo fare l mapquest punto ma andiamo a sistemare il centro i livelli lo zoom quindi tutta questa cosa qua la troverete nella documentazione degli ep hiding mapquest che adesso andiamo a vedere ma le stesse cose le potreste trovare per centinaia di altre Piquet che volete usare quindi alcuni vi chiederanno di introdurre dicevo del codice poi dovrete

scrivere del codice e potrete poi usufruire degli ep hai e questo è un tipo di e p io ho provato a inserirlo vi faccio vedere tuttavia stando andando npa ikee is required to use mapquest js molti piani se non quasi tutti richiedono l'utilizzo delle pi aiki stessa cosa vale per youtube vale per google maps vale per tanti altri servizi Vi faccio vedere news e p vediamo un po news e pia e ne andiamo qua ci sono tantissimi piani volete fare un sito di voler fare un sito di news sarebbe bellissimo se non fosse che c'è

la versione pricing ma non è un problema ma soprattutto goethe pia e chi e tutti vi chiedono la registrazione e quant'altro che mi voglio che sappiate che dpa i gratuiti si trovano se volete fare dei test di qualsiasi cosa molto spesso gli ep ai vanno almeno a Registrarsi a volte sono anche a pagamento ok sono servizi forniti da altri a volte te li danno gratuitamente a volte te li danno a pagamento in questo caso news ip ai è gratis per gli sviluppatori ok quindi è il testing potete farlo solo per testing di personal commercial project

quindi prova commerciale eccetera avete le vostre limitazioni vedete un nuovo articolo ci avete disponibile solo con un'ora di ritardo Quindi potete andare a fare avete 100 richieste per giorno quindi non pensate con queste piaghe di fare un'applicazione da mettere effettivamente online la potete usare per fare appunto dei test vostri per imparare non c'è alcun problema se utilizzate queste cose per imparare sono messi a disposizione quindi for testing and personal commercio al project non sono un problema nel momento in cui vorresti magari costruire da zero Un'applicazione su cui volete metterci le pubblicità o altri servizi si

tratta poi di pagare per la maggior parte dicevo bisognerà registrarsi su google siete già registrati ma quantomeno dovrete registrare la vostra applicazione e ottenere la pichi su questo non non si scappa da qui una volta che avete l'api chi vi dirà dove metterla quindi poi noi andremo qua e probabilmente dovremmo fare ci dirà è il mapquest Punto potrebbe essere a pichi una cosa del genere e andiamo a inserirla e questo è una una visione velocemente sulle pio kay dopodiché c'è rapida p che è un marketplace di dep ai quindi vedete a tanti piedi versi bloomberg

il garante scelta in possiamo connetterci con gli ep ai ci dice ci manda poi nel marketplace effettivo vedete vogliamo connetterci fa le solite cose possiamo anche comprare l'accesso agli e pii e Quant'altro quello che invece vi propongo oggi ok vi propongo oggi non lo andrò a fare perché voglio che sia la sign mente il compito di fine di fine corso quindi quello che vi vado a fare sarà quello che vi vado a proporre sarà riassuntivo di tutto quello che abbiamo fatto in sostanza si html css e javascript vi metto questo in descrizione decotte il db

ok quindi è un database di tutti i cocktail di tutte le ricette del mondo Dei cocktail questa è la documentazione va letta ok equa cioè direttamente ho già preso un jason questo qua è tutto gratis non preoccupatevi quindi potete tranquillamente fare l'accesso leggete la documentazione è questo qua mi metto direttamente questo jason quindi questo è il margarita se volete fare di più quello che vi do da fare sarebbe leggere la documentazione leggete la documentazione e vi mandate a schermo quello che potrebbe essere ma Vedere una cosa del genere quindi un db di cocktail quindi voi

sapete ormai fare sapete ormai mandarli a schermo sapete prendere le immagini mandarli a schermo e poi sapete cambiar pagina l'abbiamo fatto con html vi fate una nuova pagina vimark come volete potete usare queste immagini oppure potete farlo solo descrittivo non serve nessuna alcun tipo di grafica quello che vorrei vedere se lo fate è semplicemente a livello di funzionalità Se qualcuno di voi ha una particolare inclinazione per il design per l'aspetto visivo fatelo è comunque tanta pratica quello che vi lascio è questo alcuni di voi saranno più propensi a far semplicemente la parte di feste i

dati link delle pagine eccetera l'importante è il funzionamento se poi vi piace anche rendo graficamente bello fatelo perché non lo faccio io e voglio che lo facciate voi perché è importantissimo Non sarete sempre seguiti quindi molto spesso sarete da soli o comunque quando andrete a lavorare da qualche altra parte e sarete seguiti da qualcuno ma la capacità di uno sviluppatore di un programmatore sta nel risolvere i problemi quindi non è solo creare del codice ma è andare a cercare le informazioni che servono alla documentazione saperla leggere non vi posso spiegare come leggerla va letta ok

dovete leggerla è Semplicemente dovete riuscire a mandare a schermo o almeno margarita ok questo dopo in descrizione os è riuscita a fare qualcosa di più grosso tanto meglio riuscendo a fare una cosa del genere siete potenzialmente pronti per andare al passo successivo che sarà come ho già detto precedentemente quello di agganciarci poi a un backhand ok agganciarci un backhand e cominciare a costruire applicazioni degna di essere chiamate tali o city quindi con la Registrazione salviamo i dati e riprendiamo ma andiamo a schermo nella pagina personale e ciao tizio caio sempronio benvenuto quasi sono inchiodati puoi

modificarli eccetera eccetera se riuscite a far questo prendetevi tutto il tempo che volete siete veramente pronti per lo step successivo secondo me quindi io vi ringrazio per essere rimasti come durante tutto questo corso il sotto indescrizioni c'è il gruppo telegram se Volete mostrare quello che state facendo e chiedere aiuto ad altri ok ci sono gli abbonamenti per sostenere il canale per continuare a produrre questi questi corsi che sono abbastanza impegnativi oppure e non solo abbonandosi al canale potete mandarmi direttamente in privato e chiedermi qualcosa in merito a questo a questo assignment io non ho nient'altro

da dire noi ci vediamo al prossimo corso che sarà di php qualcuno potrebbe storcere il naso e vi Spiego semplicente perché preferisco fare prima php rispetto a noi perché non richiederà poi un server cioè dovremmo avere un server su cui metterlo su e non ci basta un web host mentre invece con il webhosting parliamo di 20 euro 30 euro 40 euro all'anno oppure gratuiti ci sono anche dei server che possiamo usare gratuiti ok ma se vogliamo avere un sito online a basso costo o addirittura gratis è molto semplice utilizzare html css e javascript e come

back end php non Preoccupatevi più avanti arriverò anke a fare nord e vedremo anche altri altri framework e io vi ringrazio ancora fatemi sapere sotto cosa ne pensate o in privato se vanno bene questi corsi cosa volete vedere nello specifico io sono qui apposta vi ringrazio e alla prossima ciao ciao