ALLISON Buchholtz-AU: Tutti tutti a destra. Bentornato alla sezione. E 'la nostra sezione penultima. E 'così triste. Non so che cosa ho intenzione di fare senza vederti ragazzi ogni Lunedi. Credo che dovremmo solo-- forse potremmo solo incontrare qui e cenare o qualcosa. Non lo so. Porterò invece cibo. Ci limitiamo a parlare. Ma sì, la prossima settimana sarà essere la nostra ultima sezione. In tal senso, si dispone di un quiz la prossima settimana. So che ho dimenticato di fare il mio, come, due settimane di preavviso la settimana scorsa, ma spero che i ragazzi sapeva stava arrivando. Speriamo che questo sia uno degli ultimi midterms per voi ragazzi per il semestre. Ma è andando a coprire tutte le materiale che siamo andati oltre. Quindi non è come si può solo dimenticare circa quattro loop o variabili. Perché abbiamo imparato quelli in principio, questi sono ovviamente gioco equo per il quiz. 

Esso sarà lo stesso formato, stesso lunghezza, in modo che già sono utilizzati per esso. Ci sara ' codifica da problemi a mano, magari un po 'true false, forse qualche breve risposta. Così si dovrebbe essere familiarità con il formato, soprattutto se si prende le prove pratiche. Ma come ho detto qui, è cumulativo, ma siamo sicuramente andando a concentrarsi su cose da sei settimane in poi. Così, siamo probabilmente non andare chiederti quanti byte sono in ciascun tipo o questo genere di cose, ma stiamo probabilmente andando a essere interessati a cose come le liste collegate, o strutture di dati diversi, o algoritmi differenti che abbiamo parlato. Quindi assicuratevi di sei veramente up su quelli, e se bisogno di tutte le risorse, ecco un sacco di risorse. Ho appena dato tipo di un rapido elenco lì. 

La prossima settimana sarà quiz rivedere in questo periodo. Quindi, se avete domande o argomenti specifici, cose specifiche sul quiz che vuoi andare oltre, per favore inviarli a me in anticipo in modo che posso tipo di preparare il materiale per questo. Ed oltre a questo sezione di revisione, faremo anche tenendo il corso di livello Esaminiamo come abbiamo fatto l'ultima volta. E sarà fatta dalle stesse persone. Non so se questo rende meglio o peggio, ma che sta per essere me, Hannah, Davan, e Gabe nuovo. Quindi, se volete venire a vedere tutti noi battute con l'altro e camminare attraverso quiz revisione, si dovrebbe definitivamente venire a che il prossimo Lunedi anche. Quindi non vi resta che un Lunedi jam ricco di revisione quiz, che è buono perché allora hai Martedì per elaborare attraverso tutto ciò. 

Ma sicuramente fare il check queste risorse. Study.csv.net è di gran lunga, I pensare, uno dei più utili, soprattutto perché ha un sacco di codice di esempio, ha tutti i punti di forza con tutte le note su di esso, che sono davvero quello che disegno più dei miei materiali di sezione da. Se c'è qualcosa in precedente sezioni che forse ho inviati che non si può avere ottenuto, fammelo sapere. Come esempio di codice della scorsa settimana, se qualcuno non ha ottenuto che, solo a me e-mail o venire a parlare con me, e farò in modo che si ottiene quella. 

E con questo, oggi ci accingiamo a parlare di JavaScript. Quindi qui si Tommy, chi ero solo parlare con te la notte scorsa. Amo Tommy. JavaScript è il suo preferito il linguaggio, come dice qui. Cercheranno e diranno che è non è la migliore, e saranno sbagliate. Così Tommy è un maestro JavaScript. Io non sono del tutto a suo livello, ma ero come, "Tommy, come faccio a insegnare questi ragazzi JavaScript? " Così ho preso alcuni suggerimenti, in modo speriamo che lavorano fuori. 

Quindi un paio di cose da sapere è che JavaScript è un scripting client-side lingua, in modo che, PHP è qualcosa che abbiamo considerato più server-side, si è caricare sul server, compilato e lì eseguita. Questo viene eseguito sulla vostra macchina. OK? Così si carica qualche pagina JavaScript, e viene eseguito sul computer. La sintassi è molto simile a C e PHP. Stiamo per passare attraverso alcuni esempi di JavaScript, e si sta andando a vedere che il modo si parla di variabili, cicli, e le condizioni sono molto simili. OK? Il fatto che essi sono così simili è probabilmente andando a inciampare qualcuno di voi up, in alcuni casi, solo perché ti incorporare un po 'di C dove non ci dovrebbe essere. Forse si cerca e digita qualcosa quando non deve essere digitato. 

E su questo, una cosa da sapere è che Javascript è un tipizzato dinamicamente il linguaggio, come PHP. Quindi, se voi ragazzi ricordo dalla sezione la scorsa settimana, quando eravamo tipo di fare il nostro corso intensivo PHP, abbiamo visto come una stringa poteva essere trasformato in un int, e così via. Il tipo delle variabili sono determinati in fase di esecuzione, in modo che possano cambiare nel corso il corso del programma, e nello stesso modo in cui mai davvero dichiarare tipi di variabili PHP, stiamo andando a fare lo stesso cosa qui, dove non siamo veramente controllare i tipi di nostre variabili, per così dire, come facciamo noi in C. 

E poi una cosa questo è abbastanza freddo è che è possibile errore Controllare tramite la console, con questa grande funzione console.log, che consente di stampare le diverse variabili o oggetti che saremo parlare. Proprio come la scorsa settimana, quando ero come, "utilizzare questa funzione," con discarica dal pset questa è una funzione che si desidera utilizzare, console.log. Ero così sorpreso quanti studenti nelle ore di ufficio non sapeva sulla funzione discarica. E mi sono detto, "ragazzi, questa volontà rendere la vita molto più facile. " 

Va bene, in modo che era un po ' solo una breve cosa, come sempre, abbiamo esempi. So che voi ragazzi l'amore quelli. Quindi, ecco un esempio di un semplice file JavaScript qui. Quindi è solo andando a creare questo pop-up che dice, "Ciao mondo", quando si entrare nella pagina, ma cerchiamo di cercare di camminare attraverso questo un po '. Così, ovviamente questo è solo come il vostro index.html normale. Quindi, solo il nostro modello di normale qui, e abbiamo HTML, abbiamo la nostra testa, e proprio come con i CSS, il modo in cui incluso alcuni file al di fuori, giusto? Abbiamo alcuni script type testo che è JavaScript. E la fonte è hello.js, che è qui. Questo è l'intero file di hello.js. E poi abbiamo un po ' titolo e alcuni HTML corpo che non abbiamo veramente a cuore. 

Quello che succede è, quando caricate la pagina, esegue automaticamente questo script. OK? Così JavaScript sarà eseguito automaticamente. Così che cosa sta andando a fare, sta andando andare immediatamente ed eseguire questo. E sta andando a dire, "alert. Ciao mondo. " Quale avviso è la funzione che in realtà genera questa casella. OK? Quindi è una specie di tutto Encompass. Non c'è niente di più che abbiamo avuto da fare oltre appena allarme, e poi quello che volevamo all'interno della nostra scatola Alert. OK? Ecco, questo è solo un super semplice esempio di ciò che può fare JavaScript. 

Uno dei davvero cool cose, come vedremo, è che Javascript permette per manipolare le pagine web, senza dover ricaricare ogni volta. Quindi, se si want-- per esempio, se si sta in bilico su qualcosa, se voi ragazzi avete mai visto come le barre di menu, o quando si passa sopra un po ' argomento, viene visualizzato un menu a discesa, che è causa di JavaScript. OK? Quindi non ricaricare l'intera pagina per ottenere questo menu per presentarsi, siete solo in cerca di qualche specifico azione che l'utente ha preso, che sono chiamati gli eventi che ci arriveremo in, e una volta si vede che, si dice, "OK, modificare qualcosa su questo pagina e farlo sembrare diverso, ma solo modificare queste cose specifiche. Non ricaricare il tutto. " Quindi in realtà è molto più bello, e non dovete ricaricare le vostre pagine, ed è davvero cool. 

Dichiarazioni così variabile, in modo da poter in qualche modo vedere, Ho messo in cima qui, vagamente digitato. Quindi questo è molto simile a PHP. Non abbiamo bisogno di dire JavaScript che tipo siamo aspettandosi ciascuna di queste variabili per essere. Possono essere qualunque tipo che vogliamo. Quindi, si nota in questo caso, si dichiara loro molto semplice, basta con "var" e poi tutto ciò che vogliamo il nostro nome di variabile per essere. Una cosa da notare è che quando si mettere var davanti a un nome di variabile, esso ambiti localmente. OK? E 'del tutto ragionevole per voi completamente solo cancellare il var e solo s uguale CS50, e che sarebbe solo una variabile globale. OK? Così è possibile inizializzare in entrambi i modi, Dipende solo da come si desidera. Quindi, se siete inizializzazione all'interno di una funzione, e volete che la variabile rimanere ambito all'interno di tale funzione, si sta andando a voler fare qualcosa come var citarne una variabile, contro se lo vuoi limitato l'ambito a livello globale, si può solo fare il nome di la variabile e poi qualunque cosa ti piacerebbe posta uguale a. OK? 

Questa è una specie di cosa interessante qui, perché se notiamo nostra variabile b inizia come vero. E ciò che questo può does-- Qualcuno mi dica cosa fa? Così abbiamo un po 'di allarme. Che ne sarebbe di tipo b essere in principio? AUDIENCE: booleano. ALLISON Buchholtz-AU: booleano. Destra. E poi riassegnare b a questa stringa, giusto? Allora qui, che tipo di b essere? Sarebbe una stringa, giusto? Così che cosa è importante avviso è che in C, abbiamo potrebbe quasi mai fare qualcosa di simile. Ci piacerebbe avere una variabile, lanciarla come qualcos'altro, magari fare qualche funzione con due i, vado da una carica di un numero intero. Ma se notiamo qui, b molto cambia facilmente tipo. 

AUDIENCE: Aspetta, quindi si può solo essere come, "make b un intero?" 

ALLISON Buchholtz-AU: Sì. Si può solo riassegnare b ad un numero intero. 

AUDIENCE: Davvero? 

ALLISON Buchholtz-AU: Sì. E allora sarebbe un int. Così i vostri variabili possono cambiare nel corso del il corso del programma troppo. Essi non sono strettamente tipizzati. E 'molto liberamente digitato. OK? Fondamentalmente le variabili possono fare qualsiasi cosa che vogliono, come abbiamo tipo di visto con PHP. Possono fare alcune cose folli, così è importante essere abbastanza attenti. Nome le variabili bene. In caso contrario, si fa tutto ad un tratto si sta andando ad essere come, "Aspetta, ho pensato che questo era un corda, e ora è un int, e io non sono davvero sicuro quello che sta succedendo qui. " Quindi questo è solo un semplice esempio di mostrando come una variabile può facilmente modificare il tipo di corso il corso di un programma. 

OK. Quindi questo dovrebbe essere super, super familiare. Quindi questi sono i nostri cicli di JavaScript. Essi sono esattamente gli stessi, tranne invece di quattro int i è uguale a zero, potremmo dire var i è uguale a zero. E allora potremmo avere il nostro stesso tipo dello stato, stesso tipo di aggiornamento, i plus plus funziona bene. Così carponi sono gli stessi, talora sono gli stessi, e fare talora sono esattamente le stesse. Stesso tipo di formato generale. Notiamo, quattro, tra parentesi, parentesi, è tutto lo stesso. Inoltre ci sarà un punto e virgola quando si arriva a esempio di codice. Vedrai è abbastanza molto simile a c. 

Per dichiarazioni di funzione, nuovo, molto simile. Abbiamo qualche funzione che solo dice che è una funzione, e quindi il nome della nostra funzione e gli ingressi. E ancora, se notiamo, abbiamo non hanno tipi qui di sorta. Giusto? Non abbiamo nulla da sé che questi devono essere interi o doppie, o galleggianti. Potrebbero essere quello che vogliono. Ciò che è importante è notare che abbiamo bisogno di scrivere la funzione in anticipo per far sapere che Javascript questo è in realtà una funzione. 

Quindi questo è solo qualche semplice somma funzione che restituisce xoy, e quindi ciò che è anche fresco è che si può effettivamente assegnare una funzione a una variabile. Quindi, in questo caso, è ora la somma funzione che realmente fa somma. Quindi, se si nota qui, abbiamo funzione, il nome della funzione, gli ingressi. Giusto? Qui dobbiamo solo funzione e gli ingressi. Quindi questo è chiamato una funzione anonima. E questo è qualcosa che dovrebbe essere nuovo per la maggior parte di voi ragazzi, se non tutti voi. Quindi, in pratica ciò che significa è che non lo facciamo bisogno di nome del nostro funzione in questo caso. Possiamo solo dire: "OK, ho intenzione di avere questa funzione che viene eseguita, qui sono i suoi ingressi, ed ecco quello che sta per fare. " E soprattutto quando si sta assegnando una funzione di qualche variabile che si sta andando a manipolare, Non necessariamente bisogno di nominarlo perché si sta andando ad essere riferimento dal presente variabile nome, non con qualsiasi la funzione è stata effettivamente chiamato. OK? 

Quindi, se vediamo qui, avere qualche somma variabile ora che è uguale alla somma di tre e cinque. E vorremmo ottenere questo. E questo sarebbe solo avere un po 'di allarme, tre più cinque fa il numero. Questo, più sarà solo concatenare qualunque sia la nostra risposta è stata sulla corda. Inoltre fresco, più in grado di concatenare le stringhe. 

Per JavaScript, come PHP, HTML, CSS e come abbiamo detto, un sacco di esso stiamo tipo di assunzione le ruote di formazione off qui e voi ragazzi avete un sacco di know come capire veramente queste cose. Sono un po 'diverso, ma non sono così estranea e che non è possibile su Google le cose o cercarne una in linea con le scuole W3. E noi stiamo davvero aspettando ragazzi a, tipo di esperimento e imparare da soli. Quindi, so che questo potrebbe sembrare un po ' meno approfondita di alcune delle cose c lo facciamo, ma che in realtà per un motivo. Ma spero che non sia troppo differente, e non è esagerata. 

Così array in JavaScript, ancora molto, molto simili. Giusto? Abbiamo qualche matrice variabile che è pari a mensole vuote, e questo è solo un array vuoto. Questo è spesso chiamato notazione array letterale. Questo è solo una cosa che chiamiamo. Se vediamo matrice due qui, abbiamo un po ' array letterale che ha tre elementi, giusto? E poi abbiamo un po ' var terzo elemento che è qualche variabile che è solo intenzione di tenere questa stringa, JS. 

Gli elementi, buoni a notare, sono separati da virgole, proprio come ci si aspetterebbe. E si può anche accedere a questi, come abbiamo fatto noi in C, con questa notazione indice, giusto? Così diverso da PHP Ora, stiamo andando indietro a solo tipo di riferimento per le cose di indice. Proprio come C, è anche indice zero. Mi sento come se sarebbe davvero crudele se improvvisamente reso JavaScript uno l'indice, e si doveva del tutto ripensare come pensi di array. 

Una cosa interessante è che invece di dover fare-- se mai voluto la lunghezza di un array, forse si scorrerlo fino a trovare un fine, o si sarebbe solo sapere di cosa si tratta. Poiché JavaScript è molto sciolto in più modi che solo tipo, come vediamo qui, possiamo solo fare questo array più grande perché decidiamo di. Se notiamo array a tre ha tre cose per iniziare, ma poi tutto ad un tratto, siamo come, "oh, sto scherzando. Stiamo davvero andando per renderlo 101 cose. " Quindi, se vi capitasse di voler conoscere il lunghezza reale della matrice, lo si fa in questo modo. E stiamo andando a vedere un sacco di questa notazione in esempi, ma con JavaScript è in genere qualunque oggetto che si sta parlando dot qualunque tipo di funzione che si desidera applicare ad esso. OK? 

Quindi in questo caso, la oggetto array a due, e diciamo che vogliamo la lunghezza della matrice di due. Quindi questo chiama proprio come la lunghezza su quello. E che restituirà la lunghezza. Anche qualcosa di nota è che se notiamo nostri array, differenza di C, non hanno essere tutti dello stesso tipo. Questo è molto più simile a PHP. JavaScript è fondamentalmente solo come questo interessante fusione di C e PHP. Così ci arriveremo in quello. Per ora, diciamo solo supporre che gli array sono fondamentalmente come gli array C, in quanto essi sono indicizzati zero. OK, così che è tutto. È anche possibile estendere un matrice a qualsiasi indice che si desidera. Mentre questo probabilmente Seg colpa su di voi o darvi qualche errore, JavaScript è come, "No, va bene. Ho ottenuto questo. Dobbiamo solo andare dritto dove si vuole. " 

OK, quindi gli oggetti sono molto importanti. Voi ragazzi useranno un sacco di questi nel set P, se non ricordo male. Quindi la cosa che questi sono simile al C sono strutture. Così si può pensare quando about-- andiamo a un esempio giusto dopo questo penso che sarà rendere molto più sense-- ma abbiamo praticamente utilizziamo oggetti a organizzare naturalmente informazioni relative. Quando abbiamo parlato struct in C, spesso parlare di uno studente che aveva qualche nome, ID, casa, sai, la concentrazione. E questo è il tipo di la stessa cosa che usiamo per gli oggetti qui. E 'solo di organizzare informazioni simili. 

Si può anche pensare a questi come più simile a associative array in PHP. Quindi questo sarebbe genere della cosa dove abbiamo qualche chiave di un certo valore, molto simile al PHP. Così è possibile inizializzare alcuni oggetto vuoto, come vediamo qui, solo con le parentesi graffe. Array Quindi sono parentesi quadre. Oggetti vuoti sono parentesi graffe. Buona distinzione di avere. E questi sono solo due diversi modi per impostare le proprietà. Quindi questo è una specie di più di un modo che è simile a PHP, con la nostra array associativi, con la nostra chiave, e il nostro valore, mentre questo è-- Avrete vedere questo molto più in JavaScript. Questo tende ad essere la convenzione. E nello stesso modo in cui abbiamo fatto array a due lunghezza punto, questo sta dicendo, "OK, me dare attributo di questo oggetto. " Giusto? Così allo stesso modo è stato come, "dammi la lunghezza attributo della matrice a due, " questo sta dicendo: "dammi un po ' di proprietà del nostro oggetto vuoto. " Oppure in questo caso siamo assegnandolo a un valore qui. Ma si potrebbe anche accedere in questo modo. 

E allora ecco questo è solo mostrando due avvisi diversi. Quindi questo avrebbe mostrato le segnalazioni sarebbe la stessa esatta, è solo due modi diversi Accedendo l'elemento che vogliamo. Questo fa senso per tutti? Mi sento come questo probabilmente ha più senso, solo perché stiamo venendo fuori di PHP. Ma come facciamo altri esempi, questo è letteralmente esattamente lo stesso. Un sacco di esso è solo cambiamento nella sintassi. 

OK, così esempi. Amo esempi. Quindi, ecco alcuni CS50 variabile che è un oggetto, e immagazziniamo tutto questo informazioni su di esso. Così abbiamo corso, istruttore, TFS, pset, e nastro adesivo. Così notiamo questi sono quasi tutti diversi tipi. Giusto? Così gli oggetti possono memorizzare attributi di tipi diversi. Possiamo pensare questo-- è molto simile al nostro array associativo in PHP. Così chiave, il valore, la chiave, il valore, chiave, valore, così via e così via. Nei interessante nello stesso modo che possiamo avere array all'interno di array, possiamo anche avere oggetti all'interno oggetti o array all'interno di oggetti. Non si è mai veramente limitati a solo una sola delle cose. Possiamo ottenere molto Inceptionesque, basta proseguire nella tana del coniglio lì. 

Quindi, se notiamo, abbiamo avere qualche corso che è una stringa, istruttore che è una stringa, e array, un int, e un valore booleano. Quindi tutte queste cose diverse. 

Va bene, quindi, abbiamo un altro. Quindi, in questo caso, abbiamo un array di oggetti. Quindi, solo come un oggetto possono avere un array in esso. Possiamo anche avere un array di oggetti. Questo potrebbe essere utile pensare simile al tipo di come abbiamo avuto un hash tavolo, abbiamo avuto un array di tutti questi diversi tipi di struct che erano puntatori a diverse nodi e quant'altro. Ma in questo caso, hanno una serie di oggetti. Quindi questo è come un array array di associativi. Quindi abbiamo qualche primo elemento sarebbe essere l'oggetto con il nome James e casa Winthrop. 

Voi ragazzi potrebbe ricordare qualcosa di molto simile a questo con la vostra ultima pset, dove se si tirato qualcosa dal database, il primo tipo di cosa nella propria matrice era tutte le informazioni relative il primo utente che ha incontrato esso, e poi si doveva indice in quella per ottenere il loro titolo o la cache o roba del genere. Quindi questo è molto simile cosa, solo un piccolo cambiamento nella sintassi, il cambiamento po 'in le parole che usiamo per descriverli. 

Quindi, se volessimo, qualcuno può dire me ciò che questo avviso farei qui? O che questo po 'di codice dovrebbe fare per noi? AUDIENCE: Vi darà tutti i nomi. ALLISON Buchholtz-AU: Destra, quindi sarebbe solo avvisare con tutti i nomi perché sarebbe passare attraverso Cottage i, così piacerebbe iniziare a zero. Così diceva, OK stiamo cercando in questo primo oggetto, che è il primo slot nel nostro array. E dice, "dammi la attributo, il nome di tale oggetto. " Così siamo andate qui, avremmo scan, avremmo potuto trovare nome, e ci piacerebbe stampiamo James, Molly, e Carl. Tutte le domande fino ad ora? JavaScript purtroppo si sta andando ad essere facendo un sacco di guardare sul vostro proprio, cercando di capire la sintassi, alle prese con esso. Ma naturalmente io sono sempre qui, orari di ufficio sono sempre qui. Potrei essere il martedì di questa settimana. Quindi, se ci sei, è possibile venire a visitare questa settimana. Sarebbe fantastico. 

OK, così DOM è Document-Object Model. Quindi questo è solo un modo che ci piace pensare di come il nostro HTML e tutto al suo interno è organizzato. Questo è molto qualcosa che probabilmente venire sul quiz. So che il mio anno, è stato come qui è File HTML, compila il DOM per esso. E basta compilare piccole cose. Questi dovrebbero essere i punti di facile spera. Spero che possiate see-- 

AUDIENCE: [incomprensibile] 

ALLISON Buchholtz-AU: So vedete questo albero qui? 

PUBBLICO: Sì. 

ALLISON Buchholtz-AU: Così chiederanno uso compilare ciò va sotto il corpo. Forse sotto il corpo, abbiamo un po ' div o ci sono alcuni punti, e ti chiederemo di compilare un albero molto simile a questo. Così saremo camminando attraverso di essa. Così il Document Object- Modello è solo un modo strutturare e pensare circa il nostro HTML graficamente. E anche quando arriviamo in più JavaScript, sta andando essere il modo che in realtà manipolare diverso elementi della pagina. Abbiamo bisogno di un modo per accedere a ciascun delle cose nel nostro HTML, e quindi questo ci dà molto modo standardizzato concreto attraverso varie pagine web per farlo. 

Quindi, se abbiamo appena attraversiamo questo qui, naturalmente il nostro documento è come tutto il nostro file. Ciò ovviamente ha senso che è la cosa più alta, e poi abbiamo il nostro attuale HTML, che corrisponde a questo tag. Anche se in trattino tag correttamente, quindi la creazione di questo albero DOM diventa super semplice. Così abbiamo qualche testa qui. Abbiamo un corpo che vediamo staminali fuori di HTML, ed è per questo che abbiamo la testa e il corpo. In testa, abbiamo qualche tag title, un tag title fine, così sappiamo che viene dopo la testa. E all'interno del nostro tag title, abbiamo ciao, mondo. OK? Ecco, questo è tutto questo ramo di sinistra. E poi per il ramo di destra qui, vediamo che abbiamo HTML, OK abbiamo fatto questa parte di testa, stiamo cercando proprio corpo, così abbiamo qualche zona del corpo. E entro tale, l'unico cosa che abbiamo è ciao, mondo. OK? Se avessimo le cose come qualche staffa p e poi ciao, mondo, e poi un altro Staffa p di addio, mondo, avremmo due bolle venuta fuori di qui. Perché sono entrambi sotto il corpo, ma sono paragrafi separati questo caso. C'è sicuramente pratica su che in quiz precedenti, così come un sacco in linea su di esso. OK così, questo lascia solo di vedere tutto bene e manipolare le cose molto sistematico. OK? Sappiamo esattamente come attraversare attraverso questo albero, così sappiamo cosa vogliamo accedere. 

OK quindi questo è per questo che vogliamo per avere questo tipo di modello, in modo da poter usare cose come questa, e capiamo che cosa significano, e sono standardizzati in tutte le cose che facciamo. Così il titolo del documento punto è solo il titolo di our-- tutti questi sono piuttosto auto esplicativo, Mi piace pensare. Così i primi tre esempi sono solo dicendo, "OK, dammi la titolo di questa pagina web. " Così vi darà ciò che corrisponde al titolo. 

Corpo Document dot sta per darvi tutto ciò che è all'interno di questi tag body. Quindi è possibile modificare tale. E dot documento corpo dot inserire HTML è molto fresco, e forse non è come super- intuitivo, ma l'HTML interno corrisponde a questo qui. Quindi, se mai vuole manipolare il testo su una pagina, in genere si sta andando a fare qualcosa con dot corpo HTML interno. OK? Così HTML interno tende a riferirsi a ciò che è in realtà tra questi tag. OK? E poi funzioni utili. Quindi, se si voleva ottenere uno di questi, ogni elemento, abbiamo qualche Id, classe nome, o il nome di tag. Questo è molto simile a cose che abbiamo fatto con i CSS, giusto? Dove abbiamo alcuni selettori che conforme a un tag, una classe che li, o un Id dare. Questo è molto nello stesso modo. Se avete qualcosa che ha qualche classe di cane, e tu dici ottenere elementi per nome tag, e si mette il cane in there-- o dispiaciuto, nome della classe. Si può mettere punti in là. E 'intenzione di tornare tutti coloro elementi a voi che hanno quella classe. Quindi è possibile modificare solo quelle. Allo stesso modo, forse semplicemente voglia di manipolare alcuni di testa, così alcuni intestazione h1, come abbiamo fatto noi. Si potrebbe fare ottenere elementi per tag nome, perché h1 è un nome di tag. E allo stesso modo, se si desidera ottenere qualche cosa unica, si può fare tag get. Ottenere elemento da Id. E sono in realtà un sacco di questi. Questi sono solo come tre dei moltissimi. Quindi, se si va online, come Ho intenzione di incoraggiare la di fare, e fare un po ' ricerca sul proprio, Consiglio vivamente cercando in tutti quelli. Potrebbero essere super utile, specialmente quando si vuole solo tipo di manipolazione cose molto specifiche, senza dover di passare attraverso e provare per analizzare tutto. 

OK, quindi l'ultima cosa è JavaScript eventi. Così, quando stavo parlando in precedenza di andare su un sito web, e quando si passa sopra qualcosa, o il vostro mouse sopra qualcosa, qualcosa accade. Questo è ciò che vorremmo pensare come un evento. Così che cosa abbiamo che potrebbe essere utile qui è onclick. Quindi il mio era in hover, che, io sono abbastanza sicuro, è solo al passaggio del mouse. Anche una tonnellata di questi che si può cercare. C'è un intero elenco on-line delle cose diverse che si può ascoltare per. 

Ma gli eventi JavaScript sono fondamentalmente solo rispondendo alle cose che l'utente sta facendo. Giusto? Così l'utente fa qualcosa, questo è un evento, e JavaScript risponderà tuttavia ti piacerebbe a. Sarà rispondere di conseguenza. Quindi, in questo caso, abbiamo alcuni onload finestra dot. Quindi che cosa dice questo è, "aspetta fino caricato della finestra. " OK? Così, quando tutto è caricato, onload, quindi è possibile eseguire questa funzione. Così, quando tutto è caricato, si sta andando avere qualche pulsante di ricerca che ottiene un elemento da Id, e stampa qualunque cosa elemento è come il pulsante Cerca. E poi abbiamo questa variabile, diciamo, "OK, onclick." Così, quando sentiamo un click sul pulsante di ricerca, eseguire questa funzione, che è un avviso, si fa clic sul pulsante Cerca. 

Che cosa succede è-- questo è un bel piccola rappresentazione grafica qui. Così i nostri carichi di documenti, questo è il nostro onload, troviamo la nostra Ricerca pulsante, che è presente. Stiamo cercando il nostro pulsante Cerca. E poi, quando il pulsante di ricerca è cliccato, corrisponde a destra qui. Onclick. Poi abbiamo finalmente avvertiamo il nostro utente, che è questa ultima linea qui. OK? Così ciascuno di questi quattro punti appena corrisponde ai quattro scatole là giù sul fondo. Questo fa senso per tutti? 

E poi una cosa che sto solo andando parlare molto, molto brevemente, che vi incoraggio a ragazzi Andare a cercare più in è jQuery, che è solo una libreria che è costruito in cima a JavaScript. È super utile, come per molte librerie. Ci sono un sacco di funzioni. Quindi, se c'è qualcosa che mai si vuole fare in JavaScript, il primo istinto non dovrebbe essere quello di pensare di, "quale funzione dovrebbe I codice? "Dovrebbe essere, "Fammi vedere di qualcuno già fatto questo per me. " Perché nove volte su dieci, qualcuno avrà già fatto, e probabilmente hanno fatto meglio. La gente spende un sacco di tempo a fare queste, e JavaScript è molto usato, così le persone sono costantemente cercando di renderlo migliore. E jQuery ha un sacco di funzioni che probabilmente sarà utile a voi nel progetto finale, se siete fare qualsiasi cosa con il web design. Come mi piace dire, "il lavoro più intelligente, non di più. " Se voi ragazzi che, sarà fantastico. Quando siamo al hackathon non lo faccio voglio che tu sia tutti stressati. Io voglio che tu sia come, "ho avuto questo. jQuery di ottenuto la mia schiena. Non ho bisogno di scrivere queste funzioni. " 

Quindi, solo due cose a Ricordo, io vado per farti sembrare più ragazzi in jQuery per conto proprio. Tutto quello che sto per dire è che fa alcune cose piuttosto impressionante e può rendere la vostra vita molto più semplice. Ma ciò che si vuole avere è qualunque di file che si sta andando a utilizzare in, si sta andando a voler queste due linee. Stai andando a volere la sceneggiatura di js jQuery punti js. E in realtà l'origine sta per essere un po 'URL. Se Google jQuery, Google in realtà ospita tutti i file per voi. Così si vuole definitivamente a input URL invece. Ho appena messo questo qui per semplicità. Tutto questo significa dove trovare la libreria jQuery. E 'enorme, quindi non si vuole di ospitare sul proprio computer se si può evitare, che è per questo che tendono a mettere solo in URL di Google che ospita tutti questi file per voi. OK? Google, io prometto sarà lì. 

E poi qualunque cosa File JavaScript che sei usando, quindi questo è solo alcuni esterni File JavaScript che si sta utilizzando. Nello stesso modo in cui ci colleghiamo al nostro CSS file, questa è la stessa cosa. Questo collega solo al file dove il vostro JavaScript è. E ho alcuni esempi con semplice JavaScript. Quindi andremo attraverso di essa. E poi nell'indice JavaScript, che è il vostro file JavaScript qui, questo è una specie di involucro che avete per jQuery. Siete quasi 99,9 per cento del tempo in corso per avere questo nel file index.js. Perché cosa dice questo è, "Non esegue nulla fino a quando il documento è in realtà ready ", che è esattamente quello che vuoi. Perché se il documento non è pronto, e jQuery inizia a fare le cose, è solo un pasticcio. Così si vuole sempre avere questo wrapper. E poi per le cose che vanno in là, restando proprio indagando i vostri ragazzi. 

OK, quindi non ci sono domande a destra ora su JavaScript in generale? Oppure il modello DOM? In caso contrario, abbiamo un po 'fresco esempi che possiamo andare attraverso, che voi mi può aiutare codice. Ma ho anche intenzione di essere super bello, e se non voglio dire nulla per queste, va bene. Posso anche solo dare esempi. Ma nulla sulla PowerPoint prima di passare? Freddo. 

Mi sento come voi ragazzi dovete energia. Quindi penso che stiamo per avviare con il mio esempio di partito prima. Abbiamo tre esempi, avete la vostra scelta. Così abbiamo l'orologio, dove stiamo andando per attuare un orologio effettivo che è andando ad aggiornare il passare del tempo. Abbiamo questa grande funzione Twitter. Questo-- sai cosa, aspetta. Stiamo andando a fare questo andare via. Bam. OK. 

Abbiamo questa grande funzione Twitter qui, che-- Lo so, giusto? Sta andando essere grande. Sei ragazzi eccitato? Ciò sta per contare il numero di personaggi che hai lasciato, quindi se scrivo in questo momento, ovviamente si dice ancora 140, ma sappiamo che non è il caso. E poi con il nostro ultimo qui, clicca qui per fare festa. Che cosa sta per accadere è quando clicchiamo, lo sfondo del andando a cambiare i colori. Così voi ragazzi avete le opzioni di che quello che si vuole fare prima. Prometto che prendo molto facile su di voi. Mi sento come tutti una specie di appena molto basso chiave oggi. Quindi io ti passeggiata attraverso come implementeremo tutti questi. Se si desidera carillon in, che è grande, ma io sentire come tutti sono un po 'stanco. Quindi mi limiterò a piedi attraverso questi esempi. Dobbiamo qualcosa che vorremmo fare prima? Chiunque? Nessuna preferenza? OK. Sai cosa? Siamo sul partito. Mi sento come voi ragazzi hanno bisogno di un little-- così, faremo quello partito prima. OK. 

Quindi quello che abbiamo qui-- che è non dovrebbe essere lì. Ora è buono. OK. Quindi quello che abbiamo qui è solo una semplice pagina HTML che voi ragazzi dovreste essere tutti super- conoscere dai vostri ultimi due pset. abbiamo il nostro tipo doc qui. Tutti possono vedere? OK. Freddo. Abbiamo il nostro HTML, ovviamente. Abbiamo alcuni intestazione che è collegato ad un foglio di stile che appena fatto il mio carattere bella e grande e audace. Quindi non ti preoccupare di questo. 

Abbiamo qualche corpo uno sfondo Id, OK? Perché stiamo andando a essere cambiando lo sfondo. Così, quando stiamo cambiando il sfondo del nostro corpo, ricordiamo di due settimane fa quando abbiamo a che fare con le pagine web. Così bene avere questo. E abbiamo qualche Id è uguale a parte. Questo h pound ref significa semplicemente che che sta per andare alla stessa pagina. E clicca qui per fare festa, che è il motivo per cui, quando si clicca esso, dovrebbe cambiare i colori, per fortuna. 

E poi abbiamo alcuni script qui che è solo legata a questo partito js dot di file, che è vuoto perchè non abbiamo ancora fatto nulla. Ed è così triste. Ma ben presto, cambierà colori, e sarà fantastico. 

Così sto solo andando a camminare voi ragazzi attraverso il modo potremmo affrontare questo. Quindi la prima cosa che si potrebbe desiderare di fare, se stiamo cambiando il fondo di il corpo, la prima cosa che potrebbe desiderare fare è effettivamente afferrare ciò che il corpo è, giusto? Quindi vogliamo avere somma, la nostra fondo, e se si nota, Ho appena automaticamente appena si digita. Non c'è niente di speciale che abbiamo bisogno di fare per i nostri file JavaScript. Posso iniziare a dichiarare le variabili, e dichiarando funzioni random. Ed è forma molto più libera. E 'come con C, abbiamo dato a tutti voi queste regole rigide, e sei cresciuto, così siamo come, "andare avanti. Sii libero. Fai quello che vuoi. " Ed è quello che JavaScript sia. Così abbiamo alcuni retroscena qui. Con il nostro modello DOM, sappiamo può fare documento puntino ottenere elemento, e se notiamo qui, il nostro corpo ha un Id. Giusto? Così possiamo facciamo arrivare documento Id, e qui è semplice. Qual è la nostra identificazione che vogliamo qui? AUDIENCE: Background. ALLISON Buchholtz-AU: Background. Perfetto. E virgola alla fine. Che non è ancora andato via. Hai ancora bisogno i vostri punti e virgola. OK. Ecco, questo è il nostro primo. E quando si clicca qualcosa, vuole che accada qualcosa, giusto? Così potremmo desiderare qualche variabile che è in attesa di un click. Quello che andremo a fare è che andremo a rendere il nostro legame più simile a un pulsante. Quindi stiamo andando ad avere qualche pulsante che uguale documentare puntino ottenere elemento da Id. E se sto parlando del clicca il link o clicca qui per fare festa Link, che cosa potrebbe mia Id essere qui? Partito. Corretto. OK, non troppo male finora. Ognuno ottiene quello che stiamo facendo? 

OK, ora abbiamo la nostra pulsante, e vogliamo cose da cambiare quando si clicca su di essa. Quindi, se ci ricordiamo dalla nostra PowerPoint, cosa molto semplice che possiamo fare è solo il pulsante dot onclick, giusto? E che sta per eguagliare qualche funzione. Questa è una funzione anonima. E questo solo as-- realtà sono andando a rendere questo un po 'più grande. 

Quindi quello che ho appena fatto qui è che sto dicendo, OK, quando si clicca il nostro pulsante, che è questo link che abbiamo appena fatto riferimento a, stiamo andando ad eseguire questa funzione anonima. Non abbiamo bisogno di alcun input. Non ci interessa ciò che l'utente dice. Quando si clicca su di essa, siamo intenzione di fare quello che vogliamo, che è cambiare il colore di sfondo. OK? Ecco perché non abbiamo alcun ingresso, non ci resta che questa funzione anonima. Ed ora stiamo effettivamente andando per scrivere questa funzione. 

Quindi c'è un sacco di modi per potrebbe generare un colore casuale. Il modo in cui l'ho fatto è stato quello di generare tre numeri casuali e convertirli in un triplo RGB. Quindi questo solo si mostra un po 'freddo cose che se siete come, "oh, Ho bisogno di generare un caso numero. "se Googled esso, questo è ciò che si dovrebbe trovare. 

Quindi abbiamo tre diversi cose, Var, non rosso di nuovo, verde. Giusto? Quindi questi sono i tre cose che compongono un colore. Blu, rosso, e verde. Freddo. E quello che possiamo fare è che sappiamo che deve essere compresa tra 255, e se si guardava un po ' generatore di numeri casuali, si potrebbe ottenere qualcosa di come la matematica dot casuali, che se si guarda questo in su torna a qualche numero tra zero e uno. OK? E cosa fare numeri nostro Triple RGB vanno tra? Zero e che cosa? Quello che può arrivare fino a? 255. Quindi, se la matematica dot casuale va tra zero e uno, come si potrebbe desiderare di convertire questo? AUDIENCE: tempo? ALLISON Buchholtz-AU: Sì, esattamente. Così il tempo è 255. 

AUDIENCE: [incomprensibile] E 'come [incomprensibile]. ALLISON Buchholtz-AU: Math dot casuale. AUDIENCE: Cool. ALLISON Buchholtz-AU: Sì. JavaScript prende solo cura di te. OK. Così possiamo farlo per tutti questi. Giusto? Math dot volte casuali 255. Ricevuto. Freddo. Così la cosa è, questo può Non restituire un numero intero. Giusto? Forse abbiamo un po 'numero tra zero e uno, e fa sì che sia leggermente off, e le nostre RGBs non possono essere galleggianti. Hanno bisogno di essere int. Quindi, se si è tentato questo, che sarebbe probabilmente avere qualche comportamento irregolare. Sarebbe un po 'eccentrico. Quindi quello che facciamo è che vogliamo fare Assicurarsi che questi sono arrotondati, e si potrebbe concludere in entrambi i casi. Ho arrotondato con pavimento. Così ho sempre fatto in modo che arrotondato per difetto. Ma andare fuori di quanto sia semplice era quello di ottenere solo un numero casuale, come pensi che potrebbe pavimento questo numero? E 'molto simile. Qualsiasi idea? Quindi, se a caso era solo la matematica dot casuale, quindi pensi che faremmo piano? Math piano dot. E si può anche fare matematica dot soffitto. Rotonda è una specie di ambigua perché non lo fai sapere se arrotondare o arrotondare. Così di solito facciamo sempre la matematica pavimento dot, soffitto matematica dot. Ma honestly-- 

AUDIENCE: Fa rotondo piano basso? 

ALLISON Buchholtz-AU: Piano arrotonda. E questo è solo una scelta da parte mia. 

Così ora abbiamo i nostri tre numeri che sono stati generati casualmente, e quello che stiamo per fare ora è che siamo solo andando a cambiare lo sfondo. OK? Quindi abbiamo già il nostro sfondo tipo di immagazzinata in questo elemento chiamato sfondo. Allora, cosa che noterete è, se hai giocato in giro con questo, vogliamo cambiare lo stile. E questo è una specie di qualcosa che si sarebbe Google e capire, come il modo di cambiare il colore. 

Ma il modo in cui si accede a questo colore è sfondo dot dot stile di sfondo. Quindi questo sta dicendo dato questo oggetto, fondo, che si riferisce a tale elemento Id lassù, stiamo andando a guardare il stile all'interno dello stile, stiamo andando a guardare il fondo. OK? E se si va a vedere questo in su, si potrebbe fare un po 'più di senso, ma questo è fondamentalmente solo dicendo, "Dammi questo attributo molto specifico di ciò che ho definito in precedenza. " Quindi quello che stiamo cambiando a è alcuni RGB, perché ha un senso. Stiamo usando RGB triplica, giusto? E noi have-- voglio fare in modo che ottenere il giusto numero di citazioni in qui. Quindi quello che facciamo è che abbiamo RGB, e stiamo andando a-- questo è come concatenazione, che è rosso. E poi vogliamo qualche virgola. E poi vogliamo più verde, poi alcuni comma, e un po 'blu. 

Così questi vantaggi solo significare come concatenazione. Quindi questo è solo la creazione di questo stringa che sta succedendo all'interno RGB. OK? 

AUDIENCE: [incomprensibile] più allora il verde plus poi rosso. 

ALLISON Buchholtz-AU: Sì, perché ho fatto un casino che fino. Quella di un bene. Oh, aspetta. No. Perché ho bisogno di assicurarsi che ho avuto tutti questi destra. Quindi vi spiegherò in Momento Uno. Verde, blu, perfetto. Ora ho finito. Credo. 

OK. Così che cosa si tratta, è che di fondo sta per essere impostato su una stringa. Giusto? Che è quello che abbiamo qui. Sta andando essere qualche RGB 255 comma 255 comma zero o qualunque numero avere lì. Così stiamo facendo qui, abbiamo qualche stringa. E quello che vogliamo fare, è che siamo tipo di creazione dinamica che quando abbiamo effettivamente eseguire questo programma. Quindi questa è una stringa. Inoltre concatena con il valore che rosso ha, che concatena con un virgola, che concatena essa con ciò che è verde, e così via, e così via. OK? Fino alla fine molto, che è il chiusura parentesi di questo RGB qui. OK? 

Così che cosa questo sta per generare è un comando davvero cioè RGB di tre numeri tale contesto è ora impostato. OK? Così vediamo se funziona. Spero che lo fa, perché se non, ho intenzione di essere reale triste. Oh no. OK, aspetta. Sicuramente sfondo dot stile dot sfondo. Sono sicuramente manca qualcosa solo piccolo. Non voi ragazzi che odio? Quando è solo un piccolo piccolo errore? Sfondo Onnipotente. RGB. 

AUDIENCE: [incomprensibile] ALLISON Buchholtz-AU: No. Ho provato questo prima della lezione. Ho tutto quello che ho fatto prima Classe in caso ero come, "Aspetta, che cosa ho fatto di sbagliato?" Perché io ero come, "Io probabilmente pasticcio questo fino ad un certo punto. " Più verde. Tutto sembra come se fosse concatenato correttamente. OK. 

AUDIENCE: [incomprensibile] 

ALLISON Buchholtz-AU: Oh, ci si va. Questo è quello che mi serviva. Guardate che. Tiffany per salvare. Perfetto. OK. Ora vediamo se funziona. Dio mio. OK. Resisti. 

PUBBLICO: Lo spazio dopo il secondo più. 

ALLISON Buchholtz-AU: Quale? Oh aspetta, aspetta. Usura Spazio? 

AUDIENCE: Second più in la concatenazione verde. ALLISON Buchholtz-AU: Oh. AUDIENCE: Non c'è spazio dopo il plus, sì. ALLISON Buchholtz-AU: Lei non hanno bisogno di questo, ma-- AUDIENCE: Oh, non lo fai? ALLISON Buchholtz-AU: Sembra piuttosto. AUDIENCE: OK. OK. 

ALLISON Buchholtz AU: Vediamo se questo funziona. OK. Sono ovviamente mancato a questa demo, che mi ricorda di una conferenza l'altra settimana, ma so che questo funzionerà. So che questo funzionerà. Così vicino. Se non sbaglio ho cancellato il mio script su questo. No, si tratta di punti di partito js. OK resistere. Io vado a copiare questo, e sono anche solo andando a cancellare tutto, perché ho avuto questo lavoro prima. 

Prometto che funziona. Se no, vi mostrerò che cosa Tommy è. E lì. 

AUDIENCE: Stai riferimento partito dot CSS, e si tratta di un partito dot js. 

ALLISON Buchholtz-AU: Ah, bene proprio qui è js dot partito. OK, che cosa ho fatto di diverso? OK, vedremo se questo funziona ora. Bam. Quindi, non so quello che ho fatto in modo diverso, ma questo è quello che dovrebbe accadere. Kinda freddo. Ho cliccato su questo, come, per sempre. Ma possiamo provare e vedere quello che ho fatto diversamente che questa aveva. Io non so voi ragazzi, ma questo guarda fondamentalmente quello che ho appena scritto. C'era probabilmente un mancante virgola è da qualche parte la mia cosa. In realtà dopo, penso che mi mancava un punto e virgola proprio qui in realtà. Ma non ho potuto vedere perché era fuori dallo schermo. 

Ma se notiamo, questo è abbastanza molto esattamente quello che ho appena scritto. Penso che probabilmente la parte più difficile questo è solo un po 'questa cosa giusta qui, la comprensione quello che sta facendo lì. Questi tipi di cose che si imparano in realtà solo da usare Google e onestamente solo cercando. Se pensate che ci sia un po ' attributo, probabilmente lo è. Quindi provare. Vedi cosa succede. Come ho detto, ci sono un sacco di sperimentazione di JavaScript, e PHP, e tutto ciò che roba, e CSS in particolare. Questo è l'unico vero modo di capirlo. 

OK, così dopo che fiasco con il partito js dot, abbiamo altre due opzioni. Abbiamo orologio o Twitter. Sono entrambi interessanti. Forse non è così divertente come partito, che ha avuto un po 'di effetto stroboscopico fresco cosa alla fine. Voi ragazzi avete qualche preferenza? AUDIENCE: Clock? ALLISON Buchholtz-AU: Clock? OK. Freddo. 

Così ancora una volta, abbiamo la nostra file JavaScript vuoto. E come vediamo qui, avere qualche semplice HTML. Abbiamo il nostro foglio di stile, che proprio Formati quello che dovrebbe essere simile. Abbiamo il nostro div con un ID di orologio, che dice solo, "questo dovrebbe essere un orologio." E noi abbiamo il nostro link al nostro file JavaScript Che in realtà sta per generare il nostro orologio per noi. Perché la cosa interessante, è che si può set JavaScript per aggiornare automaticamente stesso. OK? Così, invece di aspettare il utente per colpire Refresh di una pagina in modo che si può ottenere tempo aggiornato, JavaScript può aggiornarlo comunque piace. 

Così, come con il nostro ultimo, abbiamo voluto per accedere al nostro fondo, giusto? Allora, cosa pensi possa essere il prima cosa che vogliamo fare qui? Se stiamo tipo di andarsene questa sorta di paradigma di qui? Probabilmente vogliamo accedere al nostro orologio, giusto? Così, abbiamo alcuni var orologio, che equals-- cosa pensiamo che sarà? Documento puntino ottenere elemento per-- Ho anche amare Sublime-- Id e la nostra Id è l'orologio. Punto e virgola. Devo fare in modo di ottenere quelle virgola questa volta, perché mi sento così era il problema ultima volta. OK così, come ho appena detto con il tentativo avere JavaScript rinfrescarsi, c'è questa grande funzione, I so che è tornato utile dello scorso anno, Io non sono sicuro che è utile per questo pset, ma si chiama intervallo impostato. E questo è in realtà davvero cool se voi ragazzi fare qualcosa con il tempo o di ottenere informazioni aggiornate. Su un sito web per una finale progetto, questo è probabilmente una funzione che si desidera ottenere super familiarità con. Così che impostare l'intervallo fa è che stiamo andando a dare una funzione, e con quale frequenza dovrebbe chiamare questa funzione. OK? 

Quindi, in questo caso, stiamo solo andando a creare nuovamente una funzione anonima, OK, che sta per arrivare la nostra data, e il nostro tempo, e quindi aggiornare le cose e visualizzarlo. Quindi dovremo preoccupare di questo. Saremo come generare orologio qui. Ma quello che ci serve è come spesso per aggiornarlo. Quindi in questo caso, è solo millisecondi. Quindi stiamo solo andando a fare 100 millisecondi. Ovviamente, tutto arbitraria. Se si voleva aggiornare molto più lentamente, si potrebbe. Possiamo pasticciare con il conteggio del tempo, quanto è grande la nostra intervallo è dopo che otteniamo un orologio che lavora, che spero di raggiungere. Quindi questo è solo dicendo, "OK, chiamata questa funzione ogni 100 millisecondi. " OK? Questo è tutto ciò che fa. 

Che cosa vogliamo che la nostra funzione di fare è che vogliamo avere una data e un po 'di tempo è quello che stiamo per avere. Così possiamo iniziare con la nostra Data uguale qualcosa, e il nostro tempo è uguale a qualcosa che noi non sappiamo ancora. O in realtà, abbiamo data solo bisogno, perché Data sta per includere tutto. Anche se solo Google nulla ciò che si vuole fare, se si scrive, "OK, Voglio ottenere il tempo via JavaScript, "è vi darà questa grande funzione chiamata Data get. Letteralmente, la maggior parte delle cose che si vuole fare, JavaScript sta per avere è fatto per voi già. Quindi è letteralmente come nuovo ottenere la data, che è creating-- o nuova data, rather-- che sta generando un oggetto che rappresenta una data. 

E quello che stiamo andando a fare qui è questo è-- ho intenzione di scrivere questo, e poi spiegare che cosa fa. Così mi assicurerò che ho questo diritto. 

OK, così che cosa questa funzione fa, è siamo solo creando il codice HTML che in realtà per andare all'interno del nostro div id dell'orologio. Così che cosa questo sta per essere fare è solo la generazione di una stringa, OK? Che è poi sta per essere trapiantati nel nostro HTML. Fondamentalmente ciò che sta per fare è qualunque we-- ciò che io vi mostrerò è che tutto ciò che diciamo HTML è, stiamo andando a sostituire il testo qui con qualsiasi HTML è. Quindi questo sta per consentire noi per cambiare il nostro punto di clock HTML dall'essere solo il testo di questo dovrebbe essere un orologio, effettivamente mostrando i numeri e le cose che ci interessano circa, e in realtà essere in punto. 

Così che cosa stiamo andando a fare è che siamo intenzione di iniziare a generare questo HTML. Così nello stesso modo che abbiamo usato fare più uguale per gli interi, Ora si può fare per le stringhe, tranne che sta per concatenare le loro. Giusto? Come abbiamo visto con dot partito js, ​​questo solo concatena tutte queste cose insieme. Così è possibile concatenare diversi bit HTML dalle variabili, o pezzi di stringhe che si scrive te stesso, e questo solo veramente ti permette di dinamicamente generare codice HTML, che è piuttosto fresco. Quindi, se avete qualcosa molto utente specifico, questo può permettere di farlo. 

Quindi dobbiamo HTML, a ho intenzione di cercare di assicurarsi che ho questo diritto. Quindi stiamo andando a fare un po 'di intestazione h1. Così che cosa è importante rendersi conto qui è che questo è in realtà solo HTML. Giusto? Stiamo scrivendo reale Il codice HTML qui, è non solo una stringa nel normale modo che avremmo pensarci. Così abbiamo alcuni HTML. Questo è considerato una stringa qui però. E facciamo data dot-- noi vuole ottenere le nostre ore. Anche in questo caso, se si dovesse guardare a nulla di una data, sarebbe dirà queste sono tutte gli attributi che la data ha. Ed ecco cosa si può usare su di esso. Così ha probabilmente le cose come ottenere ore, e ottenere minuti, e ottenere secondi, e ottenere millisecondi, e chissà cos'altro che hanno. Ma se si guarda nel la documentazione, sarà tutto lì. 

Così abbiamo ottenere ore, e poi vorremmo concatenare che with-- sono andando a spostare questo qui. Quindi, se stiamo generando in questo momento, siamo in realtà la generazione del tempo, giusto? Abbiamo ore, e poi che cosa è tra ore e minuti? Avete un punto e virgola, giusto? Così vogliamo fare qualche virgola qui. E poi vogliamo ottenere il nostro minuti, quindi nello stesso modo che abbiamo data dot ottenere ore, come potremmo ottenere i nostri minuti? E 'letteralmente Data dot ottenere minuti, che ho un po 'come. E 'come, "oh, come ottengo i miei minuti? " Ho appena ottenere miei minuti. 

OK. E poi abbiamo un altro colon qui. E poi se vogliamo ottenere il nostro secondi, come potremmo ottenere il nostro secondo? Data dot ottenere secondi. Penso che sia abbastanza freddo. E ciò che è importante per realizzare, è che abbiamo anche bisogno di chiudere il nostro tag HTML qui, perché dovrebbe essere ancora valida HTML, così h1. Freddo. 

Così, dopo che, possiamo fare di clock dot HTML interno è pari a HTML. OK? Quindi ricorda come ho detto HTML interno sostanzialmente prende qualunque sia tra la due tag che abbiamo parlato e inserti o manipola tutto ciò che è in là? Quindi cosa fa, se torniamo al nostro orologio, è che l'orologio si riferisce a tutto all'interno di questo div. Questo è l'interno HTML di questo div orologio Id. E così sta andando a cambiare per il codice HTML che abbiamo appena generato, che, che, si spera, si spera, si spera, mostrerà il momento giusto. Staremo a vedere. Naturalmente. Tanti problemi tecnici. Solo-- di Allison sono i miei ragazzi gioco di oggi. OK, che funziona. dot clock HTML interno. Era HTML Davvero? Anche questo è ciò che accade. Quando non si riesce a vedere qualcosa di te, basta guardare il codice sorgente. OK. Sei vuoi sapere un lavoro fresco intorno che stiamo andando a fare qui? 

PUBBLICO: Si può fare lettere maiuscole? Le lettere maiuscole? Perché avete ottenere ore, e quindi ottenere minuti. 

ALLISON Buchholtz-AU: E è ottenere ore e get-- oh. Si are-- stella d'oro. E 'tutto un test, ragazzi. Prometto che stava lavorando prima della lezione. 

OK, ma qualcosa di fresco da sapere è che si può also-- se a volte i file esterni ottenere un po 'pazzo, si può anche semplicemente metterli dritto qui, che tende a sistemare le cose. Tranne questo è come davvero brutto. Naturalmente formattare tutto. Assicurarsi che è tutto abbastanza. OK. 

Volevo fare tutte le demo fresco, e sono solo non lavorando. OK. Script orologio var. In ogni modo, ciò che è importante è che questo è il modo generale che si sarebbe formattare JavaScript. Come si può vedere, può essere molto pignolo volte, anche quando era letteralmente di lavoro di due secondi fa. O non due secondi fa, ma molto, molto di recente. 

Quindi, per mostrare ciò che dovrebbe essere simile, e per dimostrare che io non sono pazzo, e che tutto è esattamente stesso, questo è quello che dovrebbe essere simile. Stai solo andando a fare questa parte superiore qui, e se si visualizza sorgente della pagina, se si nota, ha fatto un po ' cose folli, ho semplificato esso. Inoltre, il credito a Tommy McWilliam, che in realtà mi ha aiutato a creare questi esempi, è per questo che so che funzionano. Perché Tommy è un maestro JavaScript. Ma se notiamo, abbiamo qualche set. Noi abbiamo la nostra funzione orologio qui. Ciò è tanto JavaScript che abbiamo appena scritto, o parte di esso. Abbiamo appena scritto questo qui. E ha un extra funzione che pastiglie appena esso mettendo uno zero prima di un lettera o prima di un numero se è solo uno di loro. Quindi, se ci fate caso, questo è abbastanza più o meno esattamente quello che abbiamo appena scritto. Hai qualche orologio variabile ha il nostro elemento, ottenere elemento da ID, che è l'orologio. Noi abbiamo la nostra intervallo set funzione, che è una funzione anonima che esegue tutto questo. Abbiamo alcuni partenza stringa Che HTML abbiamo poi dinamicamente generare avendo alcuni intestazione h1, concatenando con ottenere le ore, più il nostro colon, oltre a ottenere i minuti, più un altro colon, oltre che i nostri secondi, ed infine l'HTML finale per esso. E allora aggiorniamo il nostro orologio dot HTML interno di HTML, e aggiorniamo ogni 100 millisecondi. OK? 

Vedi io prometto che non sono pazzo. Non lo so. Non so perché non mi piace. Mi sento come sembra la stessa, ma a quanto pare mi odia. 

Così vediamo se round va meglio. Stiamo a vedere. Io non sono sicuro di come questo sta per andare. È a tutti almeno ottenendo il cons, come solo il tema generale di JavaScript, però? Spero che sia almeno utile, più che mostrare che è un po 'schizzinoso. Ma il vostro set problema sarà molto divertente. Sta andando essere grande. Non sarà abbastanza noiosa come questo, non credo. Avrai effettivamente arrivare a vedere le cose davvero cool. 

Quindi, ultimo ma non meno importante, proveremo il Twitter uno. Sono davvero spaventata adesso, ragazzi. Non so come questo sta per andare. Ma solo per darvi un po ' più gusto, e questo è in realtà stringhe e manipolazione ingressi, quello che abbiamo intenzione di fare è, se notiamo qui con HTML-- questo ha un po 'more-- abbiamo qualche area di testo, che corrisponde a questa area di testo qui. OK? E che ha un ID di testo. , Rinnovato un po ' con una certa larghezza e altezza che abbiamo predeterminato, e abbiamo h1, che solo è il nostro colpo di testa uno che rappresenta la nostra caratteri. Abbiamo dato alcuni Id caratteri rimanenti, e allora abbiamo qualche script qui, che sono davvero sperando terza volta di il fascino qui, ragazzi. 

Quindi quello che vogliamo fare, nella stessa vena generale che abbiamo fatto con js dot clock e dot partito js come abbiamo notato, è che abbiamo iniziato con realtà afferrando le cose che ci stanno a cuore, giusto? Quindi in questo caso, ci sono due cose che ci stanno a cuore, OK? Una cosa che siamo in realtà tipo di esaminando e attingendo i dati da, e una cosa che stiamo davvero cambiando. Quindi c'è il nostro HTML. Se questa è la nostra pagina web qui, che cosa è i dati che stiamo guardando? Sta andando essere qualunque il testo in nostre scatole, giusto? Quindi, qualunque scrivo qui. Questo è quello che voglio sapere, o questo è quello che voglio guardare. E quello che sta per essere cambiando sulla nostra pagina web? I caratteri rimanenti. Così allo stesso modo, vogliamo iniziare l'inizializzazione delle variabili che in realtà tenere su questi elementi. OK? Quindi, se abbiamo qualche var che è la nostra area di testo, e abbiamo qualche var che è rimanente. Giusto? Così questi stanno per tenere queste due cose. Così la stessa cosa, documento dot-- OK, io sono andare per assicurarsi che questo sia andare a lavorare questa volta. Sono molto irremovibile. OK, quindi se vogliamo che la nostra area di testo, secondo al nostro HTML, qual è la nostra identificazione? Qual è il nostro Id? E 'solo sarà il testo perché questo crea la nostra area di testo, OK, e la nostra Id è un testo, in modo che come possiamo prendere quello che c'è dentro. OK, punto e virgola. Ho intenzione di essere super precisa su questo, perché voglio questo lavoro questa volta. OK, fare la stessa cosa, ottenere elemento da Id. Sono davvero chiedendo cosa ha causato gli altri due a rovinare. OK, allora in questo, cosa vogliamo per accedere? Qual è il nostro Id qui? Abbiamo un altro Id in il nostro HTML, che cos'è? AUDIENCE: Caratteri restanti. ALLISON Buchholtz-AU: Caratteri restanti. 

OK. Freddo. Così sto solo andando a scrivere questo veramente veloce. Sto solo andando a scrivere questo in seconda. Così area di testo. La cosa interessante è B function-- lì sono un sacco di funzioni che non solo corrispondono alla tua il mouse, ma la tastiera. OK? Così si può dire quando un tasto è premuto, si possono fare cose del genere. Quindi quello che stiamo usando è chiamato a chiave up, che dice, "se hai premuto un tasto qualsiasi la tastiera, quando l'utente ha sollevato il loro dito quel pulsante, e la chiave è diventato non pressata, allora stiamo andando a fare qualcosa. " OK? Quindi questo ha senso, giusto? Perché ogni personaggio scriviamo, stiamo andando di dover alzare le dita off di esso, in modo che quando il tasto sale, possiamo sapere per diminuire i nostri caratteri rimanenti. 

Così abbiamo un po 'su chiave up, e allo stesso modo, stiamo per dire, "OK, quando lo facciamo, noi stanno andando a creare una funzione che sta andando a prendere e, "in questo caso, e quello che vogliamo fare è calcolare il numero rimanente. OK, quindi facciamo solo cominciamo creando una variabile. Così abbiamo un po 'variabile r, che sta per rappresentare il numero di caratteri che abbiamo lasciato. OK? Sappiamo che si comincia con 140, e se vogliamo sapere, diciamo, la lunghezza di questo stringa che è stato in ingresso, fare voi ragazzi avete qualche idea come potremmo farlo? Proprio in base al largo della ovvio le cose, come se ci volessero ore, abbiamo usato ottenere ore. Sappiamo che il nostro obiettivo è area di testo, ma potrebbe ragazzi pensare a quello che potrebbe venire dopo? Tutte le idee? 

Quindi di questo tipo di meno intuitivo, ma è valore della lunghezza punto. Così appena darmi qualche attributo value che è in realtà la lunghezza di questa stringa. Così sta andando a dire, "OK, sto cercando in questa intera stringa all'interno dell'area di testo, e ho intenzione di raccontare quanto tempo sia. " Perché se ci ricordiamo stringhe sono davvero solo array, in modo che possiamo solo prendere la lunghezza di loro. Così abbiamo che. Freddo. 

Allora quello che vogliamo fare è noi non vuole permettere all'utente all'ingresso più 140 caratteri, giusto? Perché se si dice come, "oh, solo hanno questo molto restante, " e poi lasciarli fare che comunque, abbiamo mentito. E questo è un altro cosa che Javascript può essere davvero buono per, è la convalida utente e fare in modo che il vostro utente inserisce all'interno tutte le regole che hai fornito a loro. Quindi, se volete fare le cose come fare Assicurarsi di ingresso qualcuno il loro indirizzo di posta elettronica, o fare in modo che quando inserire due password, essi abbinati. JavaScript può farlo. Si potrebbe fare qualcosa di simile, "quando il modulo viene inviato, "o come, "Quando pulsante Invia modulo è cliccato, controllare tutte queste cose. " E possiamo farlo JavaScript. Ecco, questo è proprio quello che stiamo andando a fare qui. 

Così che cosa potrebbe essere un modo per verificare se sono andati oltre 140 caratteri? Che cosa sta per succedere a il nostro valore di r se cercano? E sarà negativo, giusto? Oppure sarà meno o uguale a zero. Così possiamo usare un se è proprio come tutto il resto. OK? E abbiamo qualche area di testo dot valore, e quello che stiamo facendo qui è stiamo solo cutting-- cosa si tratta? Scusi. Questo, vogliamo solo tornare falso. Mi sono confuso. Tutte esausto dalle cose non funzionano. OK, vogliamo solo return false, e quindi abbiamo vuole visualizzare il caratteri rimanenti, giusto? Quindi, con l'orologio, abbiamo fatto qualcosa con HTML interno, giusto? Dove abbiamo impostato pari a circa variabili, così che cosa potremmo fare qui? Quello che stiamo cambiando il codice HTML interno di? 

AUDIENCE: rimanente? 

ALLISON Buchholtz-AU: Stiamo cambiando rimanente. Va bene, e cosa fare noi desidera impostare uguale a? E sarà r, perché dovrebbero essere i nostri caratteri rimanenti. OK? Quindi sono molto nervoso per vedere se questo funziona, ma staremo a vedere. Lasciare questo. Questo è veramente veloce. [Incomprensibile] OK. Ancora una volta, sto solo intenzione di mostrare. Per qualsiasi motivo, il mio non decide di lavorare, ma quello che vi mostrerò è che questo è-- oh avrei dovuto metterlo in. OK, notiamo lo stesso tipo di cosa qui, ottenendo l'area di testo. 

Inoltre, se si nota ragazzo, se c'è mai qualcosa che si desidera fare, e non sai come fare , basta fare clic su Visualizza sorgente pagina, e che stanno andando a dire. A volte esso saranno criptati. Per la vostra pset, crittografiamo tutto, così sembra proprio come incomprensibili. Ma se c'è mai davvero sito web fresco che ti piace, se si fa clic su Visualizza sorgente pagina, sta andando a dirvi come fare. Quindi, di nuovo, lavorare meglio, non di più. E come vedete qui, tutti queste cose sono uguali. questo qui vuole solo un po 'di stringa che, non ricordo esattamente quello che fa. Ma ci vuole ovviamente qualche stringa del valore da zero a dieci, e restituisce falso ciò che dovrebbe smettere l'utente inserendo più, e poi, ovviamente, aggiorna il codice HTML interno lì. 

Freddo. Così grandi rosticcerie a partire da oggi, esperimento, guardare il codice sorgente perché sta andando per aiutare molto, e tutti, a volte JavaScript può essere difficile da lavorare e non lavorare sempre il modo in cui ci si aspetta di, ma solo continuare a provare perché vi prometto che farò. Prometto tutti questi esempi lavoravano prima della lezione. Non capisco cosa sia successo. Ho letteralmente tutto uguale. 

Un'altra cosa che voglio solo mostrare ragazzi che possono essere super utile è dentro-- cosa stava lavorando prima? Abbiamo avuto parte il lavoro, non abbiamo? Credo di si. Sì. Abbiamo fatto. Impressionante. OK, così una cosa che voi ragazzi dovreste sapere è il registro console che ho parlato. Così consolare log punti di ciao. Quindi questo è una specie di JavaScript equivalente di printf. Quindi, se mai vuole controllare le variabili o vedere che cosa sta succedendo lì, cosa si può fare è, se controlliamo elemento, è ciò che si vuole andare a, e si va a consolare, vedrete che stampa ciao. 

Così potremmo avere stampa tutto ciò che volevamo. Se volevamo stampare sfondo stile dot dot sfondo, dovremmo essere in grado di vedere il RGB tripla che viene in su. O no. Ho dimenticato esattamente come si stampare una variabile del genere, ma si dovrebbe essere in grado di stampare cose del genere. Questo sarà molto utile per il vostro pset quando si sta cercando di manipolare coordinate o roba del genere. Così anche cambiare questo pezzo in classe. Questo è diverso da ultimi anni, così solo essere gentile con le tue TF, o le TF in orario di ufficio, piuttosto, perché siamo tipo di apprendimento insieme a voi ragazzi. Ma il registro della console era super, super utile per JavaScript scorso anno. Così l'amore esso. Impara come usarlo. E 'più facile da usare rispetto GDB, in modo che dovrebbe essere almeno un punto in più. Ma Grazie ragazzi stanno dando con me. Mi dispiace che il mio esempi per qualche motivo semplicemente non voleva collaborare con me, ma io speranza che ha aiutato tipo di farti un poco più in zona di JavaScript. E inviarmi tutte le vostre domande per la prossima settimana in modo da poter essere riparato super, e porterò caramelle e anche in più caramelle perché questo era ridicolo. Ma voi ragazzi siete grandi, e hanno una settimana fantastica.