[RIPRODUZIONE DI BRANI MUSICALI] 

DOUG LLOYD: Quindi ormai siamo vecchi pro a programmazione web, giusto? E abbiamo coperto diversi lingue in singoli video. Ed ora facciamo un altro, JavaScript. 

Prima la buona notizia, JavaScript è una programmazione moderna linguaggio molto come PHP il cui sintassi è derivato da C, così che è un buon punto di partenza. Si tratta di vecchio come PHP, così, essendo stato in giro per circa 20 anni. E 'stato inventato intorno contemporaneamente PHP. E JavaScript è in realtà piuttosto fondamentale per l'esperienza utente del web. In realtà, ci sono tre lingue che direi sorta di make up del l'esperienza degli utenti di interagire con il sito web, html, CSS e JavaScript. E così ora parliamo un po 'di JavaScript. 

La cattiva notizia, però, con JavaScript è che fissa un sacco di regole per sé, e poi li rompe. E JavaScript può effettivamente essere tipo di sfida a imparare, perché è a differenza di C e PHP, che sono molto strutturati e hanno regole molto rigide per come le cose possono funzionare. JavaScript è tipo di ottenuto così flessibile che forse le cose non stanno andando a lavorare il modo in cui li aspettiamo a, e forse non possiamo davvero imparare il nostro primo linguaggio di programmazione come JavaScript. Così forse perché non lo fa porsi tutte le regole, e in realtà non far rispettare le buone abitudini di codifica. Ma ora abbiamo sviluppato si spera alcune abitudini buone di codifica, e così possiamo iniziare a incursione in Javascript un po '. 

Per scrivere JavaScript, simile ad apertura un file C con un punto di estensione C o un file PHP con estensione puntino PHP, tutto quello che dobbiamo fare è aprire un file con estensione js il punto. Non abbiamo bisogno di avere alcuna speciale delimitatori come abbiamo fatto in PHP. Quella sorta di angolo Staffa punto interrogativo PHP che siamo abituati a questo, il modo in cui diciamo il nostro browser che quello che abbiamo è JavaScript è includendo in un tag HTML, e vedremo un po 'di come farlo in un attimo. 

L'altra cosa che rende JavaScript diverso, però, è che funziona lato client. Così ricordare con PHP che non avremmo mai potuto vedere veramente il PHP che ha sottolineato un sito web. Se mai visto The sorgente della pagina, abbiamo solo sarebbe vedere l'html che era generato da che PHP. Ma corre JavaScript lato client. Il tuo JavaScript eseguito sul computer. Ed è per questo che si può fare cose come aggiungere bloccanti. Destra? Blocco pubblicità è fatta solitamente da uccidendo tutti i JavaScript che è in esecuzione su un particolare sito web. E perché avrebbe dovuto eseguito sul lato client della macchina, si può solo fermare il JavaScript per l'esecuzione di tutto. Ciò significa anche che quando si utilizza un sito web che include JavaScript, è necessario inviare la sorgente JavaScript codice come parte della vostra risposta HTTP al client quando ne facciano richiesta. E così non potrebbe vuole utilizzare JavaScript a fare cose veramente sensibili come le informazioni che passano sulle password degli utenti e indietro fuori, perché sono in realtà andando a ricevere tutto il codice sorgente, non solo il codice html che viene generato, come sarebbe il caso con dire PHP. 

Quindi, come possiamo includere JavaScript nel nostro html per iniziare? Ebbene, simile a CSS, in realtà, è una sorta di come lo facciamo qui. Con i CSS abbiamo tag di stile. E dentro di quei tag di stile, possiamo definire un foglio di stile CSS. Allo stesso modo con JavaScript possiamo aprire tag di script, un altro tag html non abbiamo fatto parlare nel nostro video html, e scrivere JavaScript tra questi tag script. Anche se, come CSS, abbiamo potrebbe collegare in esterno file CSS e tirare nel nostro programma in questo modo. Con i CSS possiamo anche, mi scusi, con JavaScript possiamo anche specificare l'origine attributo del tag script di collegare in JavaScript separatamente, in modo da non fare sono a scrivere a tra i tag di script, abbiamo può collegare in uso che tag script pure. E proprio come con il caso in cui con i CSS abbiamo suggerito che probabilmente era nel vostro interesse di scrivere il CSS in un file separato nel caso in cui avete bisogno di cambiare, allo stesso modo facciamo noi consigliamo che si scrive il tuo JavaScript in file separati e utilizzare la sorgente tag script attribuire a legare il vostro JavaScript nel tuo html, la vostra pagina web. 

Così variabili JavaScript, faremo iniziare a parlare la sintassi qui. E andremo attraverso questo tipo di rapidamente, perché abbiamo fatto questo in PHP, in modo da questo dovrebbe essere abbastanza familiare. Così variabili in JavaScript sono molto simile a PHP variabili. Non c'è indicatore di tipo, e quando si introduce una variabile, si prefisso con la parola chiave var. In PHP faremmo qualcosa in questo modo, il simbolo del dollaro x. Ecco come abbiamo indicato una variabile, ma no, non parlare del tipo della variabile affatto. Vorremmo dire qualcosa di simile dollaro segno x è uguale a 44 in PHP. Se stavamo facendo la stessa cosa in JavaScript, diremmo var x è uguale a 44. Così var è una sorta di nostro modo di introdurre una variabile. Questo è forse un po 'più intuitivo che solo variabili simbolo del dollaro. 

Anche in questo caso, dal momento che non c'è tipi di dati, potremmo farlo con qualsiasi tipo di dati, stringhe, qualsiasi altra cosa sarebbe tutto var. Condizionali, tutti i nostri vecchi amici di C e PHP sono ancora disponibili, quindi abbiamo se, else if, else, switch e domanda colon contrassegno. Interruttore rimanendo flessibile come era in PHP, ma tutti questi sei familiarità con ormai. E allo stesso modo con i loop sono i favoriti anziani di mentre, fare mentre, e per ancora a nostra disposizione. Quindi già sappiamo molto della base JavaScript sorta di fondamenti proprio in virtù di avere un bel po ' di conoscenze ora su C e PHP. 

Che dire funzioni in JavaScript? Beh, simile a PHP ogni funzione è introdotta con la parola chiave function. Tu dici la funzione, e poi si cominciare a definire la funzione. Che cosa è un po 'diverso su JavaScript, se è la possibilità di avere quello che chiama una funzione anonima. Così si può definire funzioni che non hanno un nome. Questo è qualcosa che in realtà non ha visto prima. Noi faremo davvero usare il concetto di una funzione anonima un po 'più avanti in questo video, perché sarò rendere un po 'più di senso in un contesto quando lo vediamo in una situazione particolare che ho Crafted qui. Ma facciamo solo un'occhiata a ciò che un semplice JavaScript funzione potrebbe essere simile. 

Così sono andato avanti e aperto il mio CS50 IDE e ho già eseguito Apache per iniziare la mia corsa di server. E ho questo file Aprire chiamato home.html. E io lo zoom in un po 'qui. E in fondo, si può vedere il Home.html è solo un mucchio di pulsanti. E sto sostenendo in alto qui che questa è la sezione JavaScript materiali. Quindi c'è un sacco di pulsanti qui, ma che cosa questi pulsanti effettivamente fare? 

Beh, ci dirigeremo verso il mio IED, e ho home.html aprire qui. All'inizio, ecco dove sto collegando in tutti i miei file sorgente JavaScript. Destra? Così ho anonymous.js, clock.js, Sto utilizzando l'attributo di origine del tag script per collegare nel file. Qualsiasi Quindi io non ho scritto JavaScript direttamente in questo file, ma ho tirato in tutta la JavaScript ho scritto separatamente. E se noi scorriamo qui, questo dovrebbero tutti guardare un po 'familiare con un po 'di nuova sintassi. Abbiamo qui tag di intestazione per funzioni e poi un pulsante. Ho un ingresso che è un pulsante di tipo, ea quanto pare quando lo scatto, Vado a chiamare qualcuno funzione di data avviso. Ed è così che possiamo sorta di mescolare un po 'di JavaScript e HTML. Essi in realtà giocano abbastanza bene insieme, e così apparentemente quando Clicco su questo pulsante, ho intenzione per chiamare una data funzione di allarme. E allo stesso modo ho ho definito i comportamenti per tutti gli altri pulsanti che sono su quella pagina home.html, che ci continuiamo a tornare a nel corso di questo video. Ma andiamo indietro qui e date un'occhiata a clock.js, che è la File JavaScript che ho ha scritto che ha questa prima funzione stiamo andando a dare un'occhiata a. Come potete vedere, comincio il mio Javascript funzionare con la funzione di parola chiave, e ho dato questo uno un nome, si chiama data per la segnalazione. All'interno di lì, mi pare creare un nuova variabile locale denominata data corrente. E ho intenzione di assegnare pari ad una nuova data. E potremmo entrare in un sacco di dettagli su ciò che una data è, e davvero JavaScript è così grande che non possiamo, eventualmente, coprire tutto in un video. Ma è sufficiente dire, questo sta andando per tornare a me un elemento dati incapsula la data e l'ora correnti. Sto memorizzazione che in una variabile che sono a quanto pare sta per avvisare data corrente. 

Ebbene, che cosa fa allarme corrente sguardo data così? Diamo uno sguardo al file stesso indietro sopra nella finestra del browser. Quindi, di nuovo, questo è il tasto che sono legato a questa funzione chiamata. E clicco lì e guardare quello che ha fatto, è avvisato. E 'spuntato questa sorta di scatola raccontare me che l'ora attuale è, a quanto pare è 4 novembre a 10:43:43 del mattino. E se clicco di nuovo, ora si tratta di un paio di secondi più tardi, giusto? Ecco, questo è tutto questa funzione fa. Quando clicco su questo pulsante, si si apre un messaggio di avviso a me. Quindi non c'è davvero troppo da funzioni è diverso da PHP, solo un po 'di nuova sintassi che viene fornito con il lavoro con JavaScript. 

Gli array in JavaScript sono abbastanza semplice. Per dichiarare una matrice, si utilizza la sintassi parentesi quadre che siamo a conoscenza di PHP. E simile a PHP, abbiamo anche può mescolare i tipi di dati. Quindi questa matrice, sia di queste matrici sarebbe essere perfettamente legittimo JavaScript. Uno che è tutti i numeri interi, e uno che si confondono diversi tipi di dati. 

Che cosa è qualcosa di molto diverso in JavaScript, però? Questa è l'idea di un oggetto. Così forse avete sentito parlare di programmazione orientata agli oggetti. Non facciamo un sacco di esso in CS50, ma faremo un po 'di esso qui nel contesto di JavaScript. Ora JavaScript ha la capacità di comportarsi come una programmazione orientata agli oggetti lingua, ma non è di per sé esclusivamente un oggetto orientato linguaggio di programmazione. E questo viene di nuovo torna sul motivo per cui ho detto, può essere molto difficile da imparare JavaScript come la tua prima programmazione lingua, perché non davvero adattarsi a un particolare paradigma. 

C invece è un linguaggio di programmazione funzionale. Se vogliamo, le funzioni sono una sorta di grande uomo padrone, giusto? Loro impongono quello succede tutto il resto. Vogliamo cambiare le variabili, chiamiamo funzioni. Facciamo le cose per funzioni. Oggetti invece, in un oggetto linguaggio orientato, oggetti sorta di diventare la star e funzioni diventano una sorta di secondario. Ma ciò che è un oggetto, cosa è questa nozione di un oggetto? Beh, se ti aiuta, pensare su di esso in un primo tipo di come una struttura C o una struct che abbiamo imparato a conoscere prima. In C, una struttura contiene un certo numero di campi, e forse ora potrebbe iniziare a chiamare queste proprietà campi. Ma le proprietà mai stare da soli, giusto? Se definisco una struttura per una macchina in questo modo con i seguenti due campi o proprietà, uno un intero per l'anno della vettura e un altro un carattere 10 stringa per il modello della vettura, Posso dire una cosa del genere, Posso dichiarare una nuova variabile di tipo auto struct herbie. E poi posso dire qualcosa come uguale herbie.year 1963, e herbie.model uguale Maggiolino. Va bene. Sto utilizzando i campi nella contesto della struttura, ma potrei mai solo dire qualcosa del genere. Destra? Non è possibile utilizzare il nome del campo indipendente dalla struttura. E 'una sorta di una cosa fondamentale. 

Così campi essere fondamentale per strutture C sono molto simili alle proprietà essere fondamentale per oggetti JavaScript. Ma ciò che li rende particolarmente interessante è che gli oggetti possono anche avere quello sono chiamati metodi, che sono davvero solo una parola di fantasia per le funzioni che sono inerenti all'oggetto pure. Quindi è una funzione che può essere solo chiamato nel contesto di un oggetto. Solo un oggetto che ha definito questa funzione all'interno del suo, se ci pensate un struct, la funzione è definito all'interno di quelle che definiscono parentesi graffe della struttura. Quindi vuol dire solo qualcosa alla struttura. E questo è una sorta di quello che stiamo facendo qui con oggetti e metodi. E 'fondamentalmente come siamo definire una funzione che ha senso solo su un particolare oggetto, e così noi chiamare che un metodo dell'oggetto. E non possiamo mai chiamarlo funzione indipendente dell'oggetto, proprio come non possiamo dire anno o modello indipendente dalla struct in C. 

Programmazione così funzionale paradigmi sembrano qualcosa di simile. Funzione e poi quando si passa nell'oggetto come parametro. In una programmazione orientata agli oggetti lingue, questo tipo di ottiene flipped, e vorremmo pensare così, object.function. Quindi una sorta di quel puntino operatore di nuovo che implica che si tratta di una sorta di proprietà o attributo dell'oggetto stesso. Ma questo è ciò che un oggetto linguaggio di programmazione orientato potrebbe fare per rendere una funzione chiamare un metodo, di nuovo, che è solo una parola speciale per una funzione che è inerente ad un oggetto. Questo è ciò che sintassi potrebbe essere simile. E così inizieremo a vedere alcuni dei ciò nel contesto di JavaScript. 

Si può anche pensare ad un oggetto un po 'come un array associativo, che noi siamo a conoscenza di PHP. Ricorda un array associativo consente noi avere coppie di valori chiave, invece di avere indici 0, uno, due, tre, e così via, come siamo abituati a da C array. Array associativi possono mappare parole, come nel video PHP, stavamo parlando guarnizioni di pizze. E così abbiamo avuto un array chiamati pizze, e noi formaggio aveva era una chiave e $ 8.99 era la valore, e quindi peperoni è stata una chiave, $ 9.99 era un valore, e così via. E così possiamo anche pensare ad un oggetto sorta di simile a un associativa array. E così questa sintassi qui avrebbe creato un nuovo oggetto chiamato herbie con due proprietà al suo interno. Anno, che è assegnato il valore 1963, e modello, che viene assegnata la stringa Maggiolino. 

E notare qui che sto usando virgolette singole in JavaScript. È possibile utilizzare le virgolette singole o doppie quando si parla di stringhe. E 'solo convenzionalmente il caso che la maggior parte delle volte quando si sta scrivendo JavaScript, si utilizza solo apici. Ma potrei usare le virgolette qui, e che sarebbe perfettamente bene pure. 

Quindi ricorda come in PHP abbiamo avuto questa idea di una per ogni ciclo che ci permetterebbe per scorrere tutto il valore chiave coppie di associativo array, perché noi non ha avuto questa capacità di iterare attraverso 0, uno, due, tre, quattro, Eccetera? JavaScript ha qualcosa di molto simile, ma non è chiamato una per ogni ciclo, si chiama per in loop. Quindi, se ho detto a me come questo, per la chiave var in oggetto, che è una sorta di simile a dire per ogni cosa come qualcosa. Ma tutto quello che sto facendo qui è l'iterazione attraverso tutte le chiavi del mio oggetto. E all'interno del riccio bretelle lì, vorrei usare oggetto chiave parentesi quadre per riferirsi al valore in quella posizione chiave. 

In alternativa, c'è anche un altro approccio. Se ho appena interessa solo il I valori, posso dire per la chiave di oggetto, e basta usare il tasto dentro. Così per la chiave var in oggetto, ho per usare le parentesi quadre di oggetti chiave all'interno del ciclo. Per chiave var di oggetto, posso basta utilizzare il tasto all'interno del ciclo, perché io sono solo specificamente parlando dei valori lì. 

Quindi cerchiamo di forse prendere un guardare la differenza solo per mostrare velocemente la differenza tra quattro in e di un ben preciso array, che abbiamo qui, settimana array. Quindi devo trovare un nuovo array che ho riempito con sette corde, Lunedì martedì mercoledì, Giovedi, Venerdì, Sabato, Domenica. E voglio ora iterare attraverso questa matrice, stampare alcune informazioni. Se io uso una per in loop per stampare le informazioni, cosa pensi che io vado a prendere? Bene, diamo un'occhiata. E prima di saltare su alla mia finestra del browser, è sufficiente sapere che console.log è una sorta di uno modo di fare un F stampa in JavaScript. Ma qual è la console? Beh, questo è quello che stiamo andando di andare a dare un'occhiata a questo momento. 

Ok, siamo di nuovo qui nella mia finestra del browser, e ho intenzione di aprire i miei strumenti di sviluppo. Ancora una volta, sto solo colpire F12 per aprire strumenti di sviluppo. E notare che qui al top Ho scelto console. Quindi questo è il concetto di una console sviluppatore, e ci permetterà di stampare le informazioni fuori, un po 'come il terminale, ma come si vedrà un po 'più tardi, possiamo anche digitare le informazioni in di interagire con il nostro sito web. Io vado per ingrandire un po 'qui, e sto andando ora cliccare su per in prova. E quattro in test-- Non ho intenzione di vi mostrerà il codice per esso in questo momento, ma si otterrà se si scaricare il codice sorgente che è associata a questo video-- è solo che per in loop che abbiamo visto solo un secondo fa sulla diapositiva. 

Così sto andando click che pulsante, e qui, ecco cosa ha stampato nel console, 0, uno, due, tre, quattro, cinque, sei. Non ho fatto stampare le informazioni all'interno di quelle posizioni di array, perché ho usato una per in loop. E all'interno del corpo del ciclo, I appena stampati chiave non chiave obiettare. Ma se io ora chiaro la mia console, e io passare per dei test e quattro di prova Io dico che uso per di ciclo invece e stampare chiave, se clicco che, ora sto ricevendo il elementi reali all'interno del mio oggetto o la mia matrice in questo caso. La mia serie di giorni della settimana. Ho stampato Lunedi, Martedi mercoledì. Ecco, questo è la differenza tra una per in loop, che stampa solo i tasti se si utilizza solo tasto all'interno del corpo del ciclo, e una per di ciclo, che stampa i valori se si utilizza solo chiave all'interno del corpo del ciclo. 

Va bene, come facciamo ora cominciamo a concatenare le stringhe e forse mischiare alcune variabili con interpolazione come se fossimo in grado di fare in PHP? Beh, siamo abbastanza familiare con questo da PHP. Questo è come vorremmo farlo utilizzando il operatore punto per concatenare le stringhe. In JavaScript, però, che usiamo qualcosa chiamato l'operatore più che è forse anche un po 'di più intuitivo, giusto? Stiamo aggiungendo un gruppo di stringhe. Così torniamo sopra e vedere che cosa questo stamperà se stiamo cercando di stampare tutte le informazioni in settimana array. Va bene, allora sotto qui sotto concatenazione di stringhe, Ho due opzioni, costruzione di stringa V1 e quindi costruzione di stringa V2. E vedremo perché abbiamo bisogno di V2 in un secondo. Ma sarò clicco su stringa di costruzione V1, che è il codice che eravamo basta dare un'occhiata a, il console.log con tutti i vantaggi. Vediamo se questa stampa che cosa ci aspettiamo. 

Lunedi è giorno numero 01 della settimana, Martedì è il giorno n 11 della settimana. Beh, quello che stavo cercando fare c'era arrivare per stampare Lunedi è il giorno n uno, Martedì è il numero di due giorni. Ma sembra come se fossi stampa sempre fuori uno. Beh, perché? Beh, a quanto pare, prendere un altro sguardo in questo piccolo frammento di codice qui. Si noti che stiamo usando la più operatore in due contesti diversi. 

E così ecco dove forse le cose che abbiamo sorta di stati dicendo, oh, è così grande. Noi non trattiamo con i tipi di dati più. Ma qui è dove il fatto che perdiamo i tipi di dati può effettivamente essere un po ' di un problema per noi. Ora che l'operatore più è utilizzato per concatenare le stringhe e aggiungere i numeri insieme, JavaScript ha a fare la sua ipotesi migliore come a quello che voglio fare per me. E in questo caso, è indovinato sbagliato. Si giorno solo concatenati, che sarebbe 0, uno, due, tre, quattro, cinque, o sei, e poi appena concatenato che e quindi concatenati uno. Essa in realtà non aggiungerli insieme. E così nelle lingue, PHP e JavaScript, che astrae questa nozione di tipi, non si ha a che fare con esso più. Hanno ancora i tipi sotto il cofano. E possiamo, in situazioni in questo modo, sfruttare questo fatto dicendo qualcosa come forse questo, che sta dicendo JavaScript, dalla modo, trattare questo come un intero, non trattarlo come una stringa, anche se stiamo mescolando insieme stringhe e interi qui. 

E 'solo una di quelle cose che sembra così grande in un contesto che noi non dobbiamo gestire tipi più, ma a volte si incorrere in una situazione esattamente come questo, dove il fatto che non si ha il controllo su tipi può ritorcersi contro di voi se non stai attento. E così, se abbiamo pop ripercorrere a IDE, io sono andando a cancellare la mia console di nuovo, e ho intenzione di fare clic su corda edificio versione due, che è dove io uso quella funzione di analisi int. Ora è stampare informazioni che mi aspetto. Numero del giorno uno di Lunedi, Martedì è numero del giorno due, e così via. 

Quindi parliamo di funzioni di nuovo. Ho promesso che avremmo parlare anonimo funzioni e ora il contesto che è finalmente arrivato. Quindi, prima lo facciamo, parliamo di nuovo sugli array per solo un secondo. Quindi array sono una speciale caso di un oggetto. In realtà, tutto in JavaScript è in realtà un oggetto. Così funzioni sono caso speciale di un oggetto, interi sono una speciale caso di un oggetto, ma le matrici specificamente avere un certo numero di metodi. Ricorda perché sono oggetti, possono avere proprietà e metodi. Hanno un numero di metodi che può essere applicato a tali oggetti. C'è un metodo chiamato dimensioni, array.size, che restituirà a voi come ci si potrebbe aspettare il numero di elementi dell'array. Array.pop, un po 'come la nostra nozione di popping off di una pila, se vi ricordate dal nostro stack video, rimuove l'ultimo elemento dall'array. Array.push aggiunge un nuovo elemento alla fine di un array. Array.shift è una sorta di come DQ, si giunzioni fuori il primo elemento di un array. 

Ma c'è anche un altro speciale metodo di un array chiamato mappa. E questo è una specie di concetto interessante. Allora, qual è l'idea di una mappa? Ci troveremo a vedere questo in diverse altre lingue, e non stiamo parlando di un sorta di cartografi mappa qui, stiamo parlando di una funzione di mappatura. Nel contesto siamo parlando qui, una mappa è una operazione speciale che abbiamo in grado di eseguire su un array applicare una determinata funzione ad ogni elemento di tale matrice. e così si direbbe a questo caso, forse array.map, e all'interno di esso, stiamo passando in mappa è una funzione che vogliamo da applicare ad ogni singolo elemento. Quindi è una sorta di analogo all'uso un ciclo per iterare su ogni elemento e applicare un particolare funzione di ogni elemento, appena JavaScript ha questo costruito in nozione di mappatura che può essere applicato. E questo è un grande contesto parlare di una funzione anonima. 

Quindi cerchiamo di dire che abbiamo questo array di interi. Si chiama nums, ed è ottenuto cinque cose in esso, uno, due, tre, quattro, cinque. Ora voglio mappare alcuni funzione di questo array. Voglio avere applicare una funzione ad ogni elemento della matrice. Beh, diciamo che quello che voglio fare è raddoppiare tutti gli elementi. Cosa potevo fare è utilizzare un ciclo per var I è uguale a 0, I è meno o uguale a 4, io più, più, e poi raddoppiare ogni singolo numero. Ma posso anche fare una cosa del genere. Posso dire nums era precedentemente uno due tre quattro cinque, Ora, però, vorrei che tu applicare una mappatura su questo array dove mi piacerebbe voi a raddoppiare ogni numero. E questo è esattamente cosa sta succedendo qui. A meno di notare che cosa sto passando in quanto l'argomento mappa. Questa è una funzione anonima. E accorgo io non ho dato questa funzione un nome, Ho dato solo una lista di parametri. E quindi questo è un esempio di una funzione anonima. 

In genere avremmo mai chiamare questa la funzione al di fuori del contesto della mappa. Stiamo definendo come parametro per mappare, e quindi non abbiamo davvero fare devono avere un nome per se la unica cosa che preoccupa è la mappa ed è definito giusto lì dentro di carta. E quindi questa è una funzione anonima. Non siamo stati in grado per fare questo in precedenza. Mappa qualche funzione che accetta un parametro, num, e ciò che la funzione fa si ritorna num volte 2. E così dopo questo mappatura è stata applicata, questo è ciò che ora Nums sguardi come, due, quattro, sei, otto, 10. E noi pop al mio finestra del browser e solo guarda questo molto rapidamente pure. 

Così ho un altro bottone qui a casa mia pagina chiamata doppio. E quando scatto doppio, e si dice me prima che fosse uno, due, tre, quattro, cinque dopo due, quattro, sei, otto, 10. E se vado indietro e fare doppio clic su di nuovo, due, quattro, sei, otto, 10. E poi, dopo, quattro, otto, 12, 16, e quindi 20. E quello che sto facendo in questa funzione? Beh, se solo un salto di IDE, e Mi tiro su la mia funzione anonima, qui on line sette a 13, io sono facendo un po 'di lavoro di speciale qui, ma sto solo stampando ciò che è attualmente nella matrice. Poi sulla linea 16, 17, e 18, c'è la mia mappa. Questo è dove sto applicando questo raddoppio funzione di ogni singolo elemento. E poi un po 'più in basso, Sto solo facendo la stessa cosa Che facevo prima, solo che adesso sono stampare i contenuti della matrice successivamente. Ma tutto quello che ho fatto qui è basta usare una funzione anonima per mappare in un intero array. 

Così un altro grande argomento di cui parlare in JavaScript è l'idea di un evento. Un evento è qualcosa che accade solo quando un utente interagisce con il vostro web Pagina, quindi forse fare clic su qualcosa, o forse la pagina viene terminato il caricamento, o forse hanno spostato il mouse sopra qualcosa, o hanno digitato qualcosa in un campo di immissione. Tutte queste cose sono eventi che si verificano sulla nostra pagina web. E ha il Javascript capacità di supportare qualcosa chiamato un gestore di eventi, che è una funzione di callback che risponde a un evento html. E che cosa è una funzione di callback? Beh, è ​​generalmente solo un altro il nome di una funzione anonima. E 'una funzione che risponde a un evento. Ed è qui che veniamo al idea di legare determinate funzioni per un attributo particolare html. La maggior parte degli elementi HTML hanno supporto per un attributo che non abbiamo parlato in html video per qualcosa di simile al clic o al passaggio del mouse o del carico, tutti questi eventi che è quindi possibile scrivere funzioni che si occupano di quegli eventi quando quegli eventi si verificano sulla tua pagina web. 

E così forse il tuo html sembra qualcosa di simile. E ho due pulsanti qui, un tasto e il tasto due, e qui ho attualmente nulla definito, ma questo è dove l'attributo su click è evidentemente parte della mia tag html. Quindi, apparentemente, quando definisco che cosa è succedendo all'interno di tale attributo, che sta per essere qualche JavaScript funzione che risponde all'evento presumibilmente di cliccare su un pulsante o il pulsante due. 

Cosa c'è di genere di freddo di questo è che abbiamo in grado di scrivere un gestore di eventi generico. E questo gestore di eventi sarà creare un oggetto evento. E l'oggetto evento ci dirà quale dei due tasti è stato fatto clic. Ora, come funziona? Beh, potrebbe essere simile a questo. Quindi per prima cosa definire i nostri pulsanti di avere una risposta al callback funzione che verrà chiamato quando si fa clic sul pulsante, chiameremo evento nome avviso. E notare in entrambi i casi stiamo passando in questo parametro evento. Quindi chiamiamo questa funzione o quando questa funzione viene attivato dall'evento accade, sta andando a creare questo oggetto evento e passarlo come parametro per avvisare nome. E l'oggetto evento è andando a contenere informazioni di cui era stato fatto clic. E come farlo? Beh, potrebbe essere simile a questo. Così ora nella mia separata File JavaScript, potrei devono trovare questo Nome funzione di allarme, che accetta ancora una volta che il parametro evento. E poi qui è dove sto rilevando quale pulsante è stato attivato, grilletto var uguale evento elemento di origine puntino. Qual è stata la fonte che ha creato questo oggetto evento che è stato passato a? Era un pulsante, o era pulsante due esso? 

E poi qui tutto quello che sto facendo è stampare trigger.innerhtml. Ebbene, in questo caso, in questo contesto, trigger.innerhtml è solo ciò che è scritto sul bottone. E così succede se saltiamo per un secondo, che sarebbe essere ciò che è tra questi tag pulsante. Sarà un pulsante o il pulsante due. E diamo uno sguardo a come questo gestore di eventi sarebbe guardare se abbiamo avuto esecuzione in pratica. 

Quindi, prima di tutto, hai aperti events.js, che è il file JavaScript in cui Ho definito questa funzione. E come potete vedere, è più o meno esattamente quello che abbiamo appena visto nella diapositiva un secondo fa. E voglio andare oltre al home page abbiamo usato. E ho qui pulsante uno e due pulsanti. E io clicco su un pulsante. Si è scelto il pulsante di uno, se può vedere proprio qui in allerta. OK. Fare clic sul pulsante due, cliccato su un pulsante a due. 

Così entrambi i pulsanti hanno la stessa chiamata di funzione, giusto? Entrambi erano nome allarme evento, ma questo oggetto evento che viene creato quando si clicca su ci dice che il pulsante è stato fatto clic. Non abbiamo dovuto scrivere due distinti funzioni o accordo con avere per passare eventuali informazioni aggiuntive. Siamo solo basandosi su quello che Javascript sarà fare per noi, che è quello di creare quella sorta di oggetto evento per nostro conto. C'è molto di più a JavaScript di quello che abbiamo visto in questo video, ma avendo questi fondamentale dovrebbe farti un periodo piuttosto lungo modi per imparare tutto quello che ti bisogno di sapere su questo lingua interessante. Sono Doug Lloyd. Questo è CS50.