buongiorno a tutti bentornati episodio numero 9 del corso di javascript quest oggi guardiamo le funzioni sarà un video diviso in tre perché andremo vedere 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 saranno da base per ciò che vedremo penso che vedremo dopo dunque all'ordine del giorno abbiamo blocchi di codici inutilizzabili ovvero ciò che sono le funzioni e vero 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 scopre conflitti e innestare funzione lasciate perde un attimo questa parte di codice ok una funzione è quella cosa che ci permette di ripetere lo stesso blocco non è un loop ma ci permette di inserire sotto lo stesso nome lo stesso codice da fare ok quindi facciamo finta che sto pensando nella metafora quando voi dovete cucinare la pasta fate certe cose quindi noi potremmo fare una cosa di boe del genere function 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 pentra 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 ovvero 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 al programma cucina pasta vogliamo che il programma si metta a cucinare per noi ovviamente non abbiamo ancora i robot con i denti con l'intelligenza artificiale in grado di farci una pasta ma facciamo finta che il nostro javascript lo sappia fare qui e ne 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 abbiamo già visto delle funzioni se vi ricordate abbiamo visto stringher re place quindi quando avevamo una stringa in questo caso nome abbiamo fatto tipo nome punto re place e facevamo avremmo fatto luca con antonio antonio ok una cosa del genere oppure abbiamo visto al re joint matt rand home 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 e 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é di gli sempre schivo sembra passato codice cosa ne so string nome punto prendi stringa poi nome punto trova luca nome punto anziché scrivere tutta sta roba qua noi sicuramente facciamo nome replace 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 cosa è di circostanza ok quindi funzione metodi però è che mi hanno funzioni più avanti mi sentirete parlare di metodi ma non c'è alcuna differenza e ci sono 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 amore place e facevamo così ok mettevamo davanti stringa punto re place eccetera ma quello che abbiamo una funzione se ne abbiamo
una funzione saluti anzi facciamola subito la funzione ciao noi andiamo 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 imboccare 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 né questo le funzioni anonime quindi per invocare una funzione ci basta mettere il nome della funzione che è
questo e poi aperta chiusa tonda per scrivere una funzione ci basta fare function il nome aperta chiusa e il blocco di codice come abbiamo visto per switch per if perfor e per gli altri loop ok adesso questo blocco ricordi 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 a che bendetto mi prendi documenti selector questa cosa non l'abbiamo ancora vista in javascript ma non preoccupatevi mi prendi dal documento quella cosa che si chiama bottone che è 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 ne andiamo a vedere ed ecco qua che c'è l'aler con scritto effettivamente alert all e questo è questo 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ì vedete 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 o più avanti vedremo nelle callback ok per ora lasciate passare il termine callback a demo 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 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 un letto 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 ci 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 allo in modo che in questo caso possiamo cominciare a vedere i parà e delle funzioni che qua non ho messo perdonatemi ma non ho messo vedremo parlare dei parametri delle funzioni parametri e come innestare le funzioni quindi facciamo una cosa tutta insieme allora togliamo queste cose qua facciamo function l 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
elo ma cosa succede facciamo così mandiamo a schermo e non succede assolutamente niente ci dan define questo perché far così in fase di definizione di una funzione vuol dire che 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 urto vedete ma noi ovviamente vogliamo usare nomi che siano capirli 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ì che si capisce leggermente meglio sono così virgola e vedete che ci dice allo luca filippo ha nessun problema ma possiamo che semplicemente fare marco possiamo far casino non c'è un problema vedete lo marco quindi 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 mai 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 è lo col 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 e quindi quelli che hanno lo scopo locale ok a vi capiterà spesso di fare concatenazioni di funzioni magari avete vi faccio un esempio banale dovete generare una
tabella ok quindi voi genera vita una funzione che si chiama generata bella abbiamo visto le funzioni le tabelle in html però le tabelle e tutta dinamica questa tabella non è non c'è niente di scritto direttamente in html voi l'avete generale 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 via discorrendo quindi generiamo poi il corpo il body e poi dobbiamo generare il footer noi potremmo avere una funzione
function genera tabella che però andiamo 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 nelle html o altre cose che faccio però vi faccio vedere per farvi capire le idee a farvi prendere l'idea genera footer data e noi poi abbiamo funzioni che sono function genera footer boom poi abbiamo genera 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 con sul 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 quale entro 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 lei era stato generato le righe state generate il futuro è 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 the lega io vi ringrazio fate quello che volete un abbraccio alla prossima ciao ciao
