TOMAS REIMERS: Ciao a tutti. Mi chiamo Tomas Reimers. 

MIKE RIZZO: E io sono Mike Rizzo. 

TOMAS REIMERS: Siamo due CS50s TS. E oggi stiamo portando il seminario JavaScript e CSS per applicazioni web. Se si vuole seguire, l' collegamento è proprio lì. E vuoi mettere in su sulla brevemente computer? 

C'è il link. E 'un piccolo sito, che offre collegamenti a tutte le risorse che stiamo andando a essere che si punta oggi e ha anche un sacco di informazioni utili scritto da noi leggere più in profondità quando si torna, e si sta cercando di ricordare cosa esattamente abbiamo detto, quello che eri parlando, et cetera. 

MIKE RIZZO: Va bene. Allora cominciamo. 

TOMAS REIMERS: Così si vuole iniziare? OK. 

MIKE RIZZO: Già. Così abbiamo prima voluto iniziare con un ampio panoramica su Internet e tipi di file durante la progettazione di siti web. Anche se questa presentazione ci si vuole entrare in JavaScript molto molto in seguito, abbiamo voluto cominciare con solo, specie di, come la vista a volo d'uccello di ciò che un sito web e come di pensare la progettazione di un sito web per la partenza. 

Quindi voi ragazzi, a questo punto - con esso essendo Venerdì sera - dovrebbe avere presentato la finanza CS50 problema di imposta. Speriamo, che era un buon gusto di ciò programmazione web può essere. Ma qui vogliamo, un po ', dare un altro gusto, pure. 

TOMAS REIMERS: Quindi, solo per ricapitolare quello che succede, quando si digita l'URL per il vostro browser web, l'URL viene guardato nel computer. E il computer di contatto a un altro computer, che ospita quel sito. OK, in modo che quando si va a google.com, sei collegato ad una delle Google computer, che ha la file per google.com. 

Si chiede poi per un file specifico. Quindi, se si va - Non lo so - example.com / index.html o / test.html, si sta andando a chiedere quel file specifico. E il server web sta andando per tornare a voi. 

Poi, una volta che si passa attraverso quel file - una volta che sei computer ottiene che il file - che sta per cominciare per costruire una pagina web. Così ora ha il file HTML, che è un po 'come l' struttura della pagina web. Il file HTML potrebbe anche riferimento File CSS, che definiscono il lo stile della pagina web. 

File JavaScript, che definisce l'interazione con la pagina web. I file di immagini, che sono solo immagini. E forse collegarli ad altri file HTML, che è possibile visitare. 

MIKE RIZZO: OK, grande. Quindi voi ragazzi avete tutti, forse, faticosamente impostare il host locale sulla vostra macchina virtuale. E che proprio, tipo di, è il locale dominio che il computer ospita solo per voi presso il proprio indirizzo IP. 

Quindi all'interno di questo, allora si può aggiungere ad esso proprie pagine web. Voglio dire, in CS50 Finanza, si dovrebbe avere aggiunte alcune pagine HTML, che sono, una sorta di, avvolto nella confezione PHP. Ma alla fine, ciò che le vostre pagine PHP sono stati output era HTML. 

Ma ripensando ai primi inizi del PSET, abbiamo dovuto impostare le autorizzazioni per tutto, giusto? Quindi questo lascia solo fondamentalmente ci conosciamo chi può leggere, scrivere, e forse eseguire ognuno dei file. Quindi stiamo andando a fare una rapida - hm? 

TOMAS REIMERS: Così stiamo andando fare una rapida demo. Quindi, solo per ricordare, quando si collegarsi al computer di Google - chi - e chiedere un file, il computer prima ha bisogno di assicurarsi che si sta autorizzati effettivamente visualizzare il file o letto che il file perché non si può solo chiedere per qualsiasi file sul computer, giusto? Questo sarebbe un pericolo per la sicurezza. 

Quindi i file sui sistemi che usiamo, come questo apparecchio CS50, hanno tre generale delle persone che possono avere autorizzazioni per qualcosa. Il primo è l'attuale proprietario di detto file. Il secondo è il gruppo che il file appartiene. Non stiamo andando a fuoco troppo su questo. E l'ultima cosa è, una specie di, come il mondo, o come tutti gli altri chi è non specifiche per quel file e non avere alcun diritto di proprietà su di esso. 

Quindi, se abbiamo proprietario, il gruppo, e poi mondo. E poi, per ciascuno di questi gruppi, è può avere uno dei tre autorizzazioni, OK, o multipli di essi. È possibile avere i permessi di lettura. Si possono avere permessi giusti. E si può avere i permessi di esecuzione. 

Quindi, in termini di tipi di file effettivi, leggere il permesso è come in realtà la lettura il contenuto del file. Un'autorizzazione destra sta scrivendo a detta file. Un permesso di esecuzione è in esecuzione il il file come si fa quando si esegue una delle i vostri progetti CS50. 

Così, quando stiamo pensando file come quando abbiamo bisogno di leggere un HTML file che deve essere mondo leggibile, giusto? Presumibilmente, anche il proprietario vuole per essere in grado di modificare quel file. Così il proprietario avrà bisogno leggere e scrivere autorizzazioni. Non hanno davvero bisogno di eseguire. 

Gruppo, stiamo andando a trattare la stesso del mondo per ora. Quindi hanno bisogno di autorizzazioni di lettura. Ma non hanno bisogno di scrittura o permessi di esecuzione. E ora, se ripensiamo a ex Pset, ciò che ci rendiamo conto è questo tipo di assomigliare binario, giusto? 1 è l'acronimo di sì. 0 per nessuna. E possiamo effettivamente tradurre questo binario. 

Quindi 110 in binario sarebbe 6. 100 sarebbero 4. Stesso con il mondo. Così il numero che si otterrebbe per il autorizzazioni per questo sarebbero 644. 

MIKE RIZZO: E se si pensa di nuovo a quando si chmoded qualcosa, credo hanno dato nel problema impostare l' esempio di dove si poteva fare qualcosa come chmod 644 e poi il nome del file. Il 644 allora, è ora possibile visualizzare direttamente da dove viene. Così si spera che rende tale un po 'più chiaro. 

E poi per chiarezza vi guy - oh sì, qui è di nuovo. Quindi 600 allora sarebbe solo l'esempio abbiamo rinunciato qui dove il proprietario ha permessi di lettura e di destra mentre il gruppo e nel mondo non hanno alcuna autorizzazione per accedere al file. 

TOMAS REIMERS: E poi abbiamo un breve elenco delle autorizzazioni comuni. Quindi directory, si vuole effettivamente chmod 711. Rapido da parte - per una directory per avere permessi di esecuzione significa essere in grado per aprire la directory. Immagini, CSS, JavaScript, HTML esigenze 644 perché, in fondo, il mondo esigenze autorizzazioni di lettura. 

E PHP, che voi ragazzi avete visto anche se non saremo parlarne rigorosamente è tipicamente chmoded con autorizzazione 600 perché è gestito con le autorizzazioni del proprietario. Almeno sull'apparecchio. 

MIKE RIZZO: Quindi se non lo fai specificamente specificare quale tipo di file si vuole in realtà l'impostazione questa presentazione - abbiamo avuto un problema con questo perché tutto ciò non è stato chmoded correttamente - si sta andando ad ottenere, tipo di, un Errore proibito che il sito in realtà non dispone dell'autorizzazione per accedere a qualsiasi file che si desidera accedere. E, naturalmente, che può essere fissato - come nel problema set - cambiando le autorizzazioni in modo appropriato. 

TOMAS REIMERS: E l'ultimo commento di sviluppo locale è rapidamente - abbiamo portato questo, ma volevamo solo per portare di nuovo - se chiedete un server - host in modo locale, per esempio, com o qualsiasi altra cosa. - e non si specifica un file specifico, il file che il computer sta chiedere è chiamato index.html. Oppure, se questo non esiste, index.php. 

Freddo. Ecco, questo è solo un riassunto di tutto, speriamo, che abbiamo trattato in sezione e lecture, e finora in CS50. E ora stiamo per iniziare a parlare biblioteche merito specifico. Librerie JavaScript e CSS per le applicazioni web. 

Quindi, una ragione pratica per cui abbiamo biblioteche è la programmazione - c'è un sacco di problemi nella programmazione, che mantengono spuntando ancora, e ancora, e ancora. Si può notare che un sacco di siti web hanno bisogno la possibilità di avere a discesa menu, ad esempio, o devono essere in grado ad avere un pulsante molto standard stile, che non può essere la cosa più facile. Ora che si inizia a entrare in HTML, rendersi conto che i pulsanti possono effettivamente guardare davvero brutto se non fare nulla. 

Così un sacco di persone hanno scritto chiamato librerie. E in questo contesto, sono chiamato anche quadri. Stiamo andando a utilizzare il due intercambiabile. E quello che sono è che sono fondamentalmente pezzi di codice già pronti - sia CSS o JavaScript - che portare via un sacco di squadra che avete in codifica. 

Così hanno pre-definiscono un gruppo di classi o pre-definire una serie di funzioni per Il caso di JavaScript, che è possibile chiamare più tardi. E poi si può, una sorta di, avere accesso al codice senza dover fare nulla. Un esempio della biblioteca era CS50.H. Quella era una biblioteca abbiamo dato a voi indietro nella prima settimana, che ha permesso di fare cose del genere GetInt e GetString senza dover scrivere qualsiasi codice voi stessi. 

MIKE RIZZO: Va bene. Così qui, proprio come abbiamo dovuto includere nel nostro c file diverso biblioteche, dovremmo anche includere file HTML nostra librerie diverse. Ad esempio, se volessimo includere una specifica libreria JavaScript qui, forse, quello che abbiamo scritto noi stessi come è ospitato localmente chiamati script.js, dobbiamo solo utilizzare questa notazione. 

Così abbiamo tipo di script equals JavaScript fonte equals Javascript.js. E se pensi al tuo CS50 problema della finanza set, se si guardava in header.php nella cartella dei modelli, avresti dovuto vedere alcuni di questi inclusi. Quindi questa prima - i copioni - è inclusa una libreria JavaScript. Tra cui una biblioteca CSS è un po 'diverso. 

Qui, invece di script tag che serve il tag link. E poi, il tipo di testo CSS è un po 'diverso. Non dovete sempre includere foglio di stile rel. Ma penso che sia, in generale, buone pratiche. 

E poi finalmente, la HREF, che si Probabilmente ha visto nei tuoi ATAGs per il collegamento in diversi link a Specifica il link dove trovare questo. Ad esempio, se volessimo collegare un libreria diversa - diciamo solo che - che vivevano a styles.css. E abbiamo voluto legare che in questo è ospitata sul web, vorremmo copiare quello. E poi incollarlo in qualunque abbiamo invece proprio qui. 

TOMAS REIMERS: OK, si spera ragazzi sono già familiari con il modo di collegare i CSS. Si doveva farlo su il vostro ultimo set marrone. JavaScript, alcuni di voi forse avere una certa esperienza con. Alcuni di voi non può. 

Quindi per ora, sapere che un file JavaScript è molto simile a un file CSS in nel senso che è possibile collegare ad esso o che è possibile includere internamente. E ti permette di cose di script. E stiamo andando a piedi attraverso un po 'di JavaScript in seguito. 

Quindi, utilizzando una libreria - una volta che hai inserito è, è come semplice come letteralmente chiamando il funzioni o aggiungendo l' nomi delle classi ad esso. L'ultima cosa che vogliamo parlare circa in termini di biblioteca - e questo è più di una nota tecnica - è licenze open source. Così, quando si trovano queste librerie reali, si può pensare di Domande come è OK che io sono solo utilizzando il codice di qualcun altro, soprattutto perché è qualcosa che molto ti ha detto di non fare in questo corso. 

Quindi, in caso di concessione di licenze open source, un sacco di sviluppatori - una volta che hanno scritto una biblioteca, che pensano che potrebbe essere utile ad altre persone - sarà pubblicarlo sul web e dargli una licenza. E una licenza dice che in fondo io sono presente l'autorizzazione alla concessione ad altri persone di utilizzare questo pezzo di software con il seguente tipo di stipulazioni. 

Abbiamo incluso un link ad un buon sito per aiutano a capire le licenze in caso in cui si esegue in loro. Disposizioni comuni sono cose come siete invitati a utilizzare la mia biblioteca così Finché mi dai credito. Siete invitati a utilizzare la mia libreria purché quando si rompe non mi biasimi. Siete invitati ad utilizzare la mia biblioteca così a lungo come non si usa per fare soldi per voi stessi. Questi sono i tipi di comuni stipulazioni. 

Per questo progetto finale CS50, hanno non dovrebbe essere super rilevante perché i progetti che voi ragazzi l'uso sono probabilmente piuttosto, una sorta di, conosciuto. Ma quando effettivamente andare fuori nel mondo e iniziare a utilizzare le librerie, che può o non può essere così implementata come alcuni di quelli più popolari Siamo intenzione di passare attraverso. E 'bello essere in grado di capire queste licenze e per capire cosa significano. E andando indietro. 

MIKE RIZZO: OK. Così ora di passare esempi di effettiva CSS. A questo punto finora, si potrebbe non hanno incontrato questo. Ma si potrebbe avere incontrato in la vita di tutti i giorni in cui qualcosa che guarda in un modo su un navigatore potrebbe non avere lo stesso aspetto modo in un altro browser. 

Questo si chiama Browser Browser compatibilità. E sempre più sta diventando sempre più di un problema, in particolare per quanto browser prendono sempre più libertà ad attuare le cose come vogliono. Quindi, per superare quella, vi è in realtà una grande biblioteca chiamata Normalize.CSS. 

TOMAS REIMERS: Abbiamo incluso il collegamento. A questo punto, è utile se avete il vostro computer portatile in là guardando il sito. E stiamo dando questo a voi di destra ora semplicemente perché la finale CS50 progetto è in realtà andando a chiedere per la sua attuazione allo stesso modo e tramite browser. 

Quindi, solo per mantenere nella parte posteriore della vostra testa, questa è una meravigliosa biblioteca perché sarà, una sorta di, uniformare le cose. In Firefox, qualcosa potrebbe mostrare come un pixel a sinistra. E poi Chrome può decidere che in realtà cosa volevi dire era di 10 pixel a fianco. E si vuole standardizzare questo. Normalize effettivamente fare davvero un buon compito di fare in modo che il vostro sito sembra la stessa per tutti i browser. 

MIKE RIZZO: Quindi se volevamo solo fare clic sul collegamento molto rapidamente e spettacolo quello che sembra, è può scaricare utilizzando il gigante pulsante Download. O Vi incoraggio a leggere di più cliccando questo link in basso nell'angolo a destra. 

TOMAS REIMERS: E se effettivamente fare clic su Leggi di più proprio lì - scegliere la sorgente su GitHub - vi si può vedere l'open source licenza a LICENSE.md proprio lì. E vedrete qui è il licenza MIT molto popolare. Anche in questo caso, se si legge nel testo, sarete in grado di trovare sul sito si fa riferimento prima e essere in grado di capire senza dover leggere attraverso il gergo legale. 

MIKE RIZZO: OK, grande. Ecco, questo è Normalize. Abbiamo voluto dare che molto velocemente. Oh, hai una domanda? 

AUDIENCE: Quindi, quando si scarica, si basta seguire il codice che essi hanno sotto il pulsante Download? 

TOMAS REIMERS: Sì, così quando si scarica - 

MIKE RIZZO: Oh, questo è un ottimo punto. Quindi la domanda è come si fa abbiamo effettivamente scaricarlo? Quindi, se si clicca sul link, vediamo che in realtà apre il codice sorgente. Quindi, per fare questo, quello che potevamo non è sufficiente fare clic su Salva con nome. Salva con nome e che dovrebbero aprire un file. E allora possiamo scegliere di salvare come normalize.CSS. E poi dovresti collegare in - 

TOMAS REIMERS: Lo stesso modo in cui si collegare in qualsiasi altro file. E una volta che si collega in, ciò che è grande su Normalize è sarà effettivamente prendersi cura di tutto il duro lavorare da sola. Il che significa che non avete per aggiungere tutte le classi. 

Non devi fare nulla di strano. Si normalizza senza di te fare nient'altro. Sì, è necessario includerlo. Google Chrome non risponde. 

Solo un rapido ritiro - Ho notato che ci siamo buttati in questo. Il resto di questa presentazione è sarà una rapida panoramica. Un sondaggio di biblioteche. 

In sostanza, quello che sono. Quello che fanno. Come sono utili. Come si potrebbe implementarli. Se si vuole iniziare a guardare loro, seguendo lungo, e la lettura attraverso loro, vivamente incoraggiare tale. 

In alternativa, sei il benvenuto anche a iniziare a scaricarli compreso loro in uno spettacolo solo per vedere quello che guardare come o cosa fare se si ha il vostro computer portatile di fronte a voi. Se non, siete invitati a tenere ci ascolta parlare. Abbiamo intenzione di continuare a parlare. E abbiamo il tempo, alla fine, si spera avremo effettivamente entrare in vi mostra quello che alcuni di queste librerie simile. 

MIKE RIZZO: Freddo. Va bene, così ora parliamone su Font impressionante. 

TOMAS REIMERS: così Font Impressionante è un sito davvero bello, soprattutto per chi di noi che sono meno artisticamente di talento. Ignorando il nome del font Impressionante, dà un gruppo di icone, che sono molto utile. Così un sacco di volte ti attuare un icona che potete desiderare come una bella X in modo che si può chiudere qualcosa. 

Oppure si può decidere una sorta di pulsante Modifica con un disegno a matita come tutti gli altri hanno. E questo è quando si apprende che disegno quelle icone possono essere molto noioso e difficile. Font Awesome - se effettivamente vai al sito - ti dà un sacco di icone in le icone in alto. Sì, solo la parte superiore. Vi darà un sacco di icone gratis. 

Così qui si vede che abbiamo cose come un asterisco, bar, un fulmine, un calendario, un bug, un libro, et cetera. Questo può essere molto utile. Il modo in cui si include questo è di includere letteralmente il file CSS. E dopo aver incluso il file CSS, cosa si può fare è di creare un tag denominato I. satands per icona con la classe FA sta per Font impressionante. E poi, qualunque classe che si desidera. 

Quindi, se volevo una icona di questa più piazza proprio qui, vorrei dare che la classe FA. E poi FA trattino più trattino quadrato. 

MIKE RIZZO: Freddo, OK. 

TOMAS REIMERS: E poi, l'ultima CSS biblioteca vogliamo ottenere attraverso siamo cercando di mantenere minimo sul CSS biblioteche perché ci rendiamo conto della titolo di questa presentazione è JavaScript Libraries. Ma pensavamo che possiamo pure farvi conoscere le altre biblioteche mentre stavamo parlando di librerie. 

Si tratta di Google Web Fonts. E che cosa Google Web Fonts consente da fare è aggiungere font al vostro sito web, che è un modo molto semplice per rendere bella e per distinguere il set da tutti gli altri è se ha un bel carattere o se si ha una bella collezione di font. Google Web Fonts è bello a differenza di altri biblioteche nel senso che si tratta di un installazione davvero guidata. 

Quindi, se si segue il link, è google.com / fonts, credo. Se si segue questo, può scegliere il tipo di carattere. È possibile scegliere sulla sinistra da di spessore, inclinazione, et cetera. E poi, una volta scelto uno, è possibile fare clic utilizzo rapido. Proprio lì. In basso a destra della casella. 

E poi, scorrere verso il basso. Prima di tutto, ti danno il CSS che è necessario collegare in realtà ad esso. E 'proprio lì. Si può solo copiare e incollare che dentro E la cosa bella di questo è in realtà non è nemmeno necessario scarica il file. 

Che cosa sta andando a fare è che sta andando per collegare alla versione di Google di esso. Ma torniamo al che cosa significa. Ciò significa che quando un utente scaricherà il file - scarica tua pagina HTML - il codice HTML pagina sta per fare riferimento a questo file. 

Allora, il computer sta andando a vedere, oh, è ospitato su google.com piuttosto che su theirsite.com. Lasciami andare chiedere a Google per quel file. E poi, sta andando a includere quasi come se fosse un parte del tuo sito. 

TOMAS REIMERS: Freddo. E una volta che si includono, poi a includere nel vostro CSS, ti dà la linea attuale. Quindi si imposta la famiglia di caratteri di proprietà uguale al nome del vostro carattere. 

MIKE RIZZO: OK. Quindi, abbiamo appena finito con i CSS. E alcuni di voi potrebbe pensare, bene, abbiamo avuto qualche CSS CS50 Finanza. Ma la biblioteca CSS era bootstrap. Noi in realtà includiamo Bootstrap un po ' in seguito sotto JavaScript perché con la libreria di Bootstrap CSS viene anche con un sacco di JavaScript che Bootstrap o Twitter - che ha fatto Bootstrap - utilizza per gestire tutti i loro CSS. 

TOMAS REIMERS: Qualcuno ha domande finora circa CSS in generale? Siamo bravi? Impressionante. 

MIKE RIZZO: Awesome. 

TOMAS REIMERS: Così in movimento a JavaScript. 

MIKE RIZZO: Così abbiamo voluto parlare su jQuery per cominciare. Qualcuno ha sentito parlare di jQuery prima o usato? Sì, una coppia? Quindi, se si lavora solo con i nativi JavaScript, vi ritroverete digitando un sacco di lunghe selettori molto. Così che cosa fa jQuery è che fornisce un bel wrapper per il codice JavaScript linguaggio che consente di selezionare facilmente e manipolare diversi elementi all'interno del modello oggetto di documento di pagina web o il DOM, che credo voi ragazzi avete sentito parlare in lezione a questo punto. 

TOMAS REIMERS: Se non avete sentito parlare di o lezione, se non avete visto Eppure, il Document Object Model è fondamentalmente come le cose sono rappresentati. Così HTML sorta di simile a un albero quando in realtà disegna fuori. Avete l'elemento HTML in cima. Hai la testa e il corpo. 

E poi, all'interno di quella che si hanno tutto il resto. Questo è indicato come il DOM - Document Object Model. Quindi un modello che rappresenta oggetti in il documento è un modo semplice di pensare a tale proposito. E uno dei la cosa grandiosa di jQuery è fa davvero di movimento e gli elementi che la manipolazione all'interno che incredibilmente semplice. 

Così semplice, infatti, che la maggioranza dei JavaScript librerie o se non l' maggioranza, la grande maggioranza dei propri vedrete effettivamente richiedono jQuery così che possono correre se stessi semplicemente perché se non aveste jQuery, è sarebbe sprecare un sacco di tempo cercando di capire come selezionare determinate elementi e come fare altre cose. E l'altra cosa grandiosa di jQuery è che è cross browser compatibile. 

Quindi ricorda indietro quando abbiamo detto che Non tutti i browser implementano le cose allo stesso modo? Questo è vero anche in JavaScript. E una delle grandi cose su jQuery è che rileverà la browser e rilevare la metodo appropriato. 

Quindi, se avete bisogno di selezionare un elemento, Internet Explorer potrebbe dire che sei dovrebbe fare in questo modo. Firefox potrebbe dire la corretta modo è così. jQuery non importa. Quando dite jQuery per selezionare un elemento sarà capire come è dovrebbe farlo nel browser utente è attualmente, e poi fare in questo modo. 

MIKE RIZZO: Quindi cerchiamo di non parlare l'utilizzo di jQuery un po '. Proprio come PHP, jQuery ha una particolare predilezione per il simbolo del dollaro. Quindi, vi accorgerete che ogni jQuery - Beh, non tutti. A volte è possibile sostituire il dollaro segno con la parola jQuery. Ma in generale, solo perché è più brevi, ogni volta che vedete jQuery essere utilizzato sarà con il simbolo del dollaro. 

Così qui stiamo solo mostrando un inizio Selettore per un elemento nel DOM. Qui, abbiamo il simbolo del dollaro seguito da parentesi aperte e poi citazioni. E tra virgolette andare nostre selettori per i diversi elementi. Proprio come in CSS, abbiamo bisogno selettori a essere in grado di stile diversi elementi all'interno della pagina. Tali diversi selettori traducono esattamente in jQuery e JavaScript, per la maggior parte. 

Quindi qui abbiamo un foo punto. Quindi, se vi ricordate di lezione, il punto significa solo la classe. Quindi stiamo selezionando elemento con classe foo. Quindi, se vado avanti e aprire il nostro JavaScript console qui molto velocemente solo dimostrarlo, se mi basta digitare il segno di dollaro, vediamo che si tratta di qualche funzione che viene in su. Ed è solo definito da jQuery. 

TOMAS REIMERS: Per quelli di voi sconosciuto, la consolle è uno strumento all'interno di Chrome, che ti permette, fondamentalmente, eseguire JavaScript sul pagina corrente. Questo vi accorgerete incredibilmente utile quando si sta effettivamente debug e ha bisogno di essere come, che cosa è la corrente valore di una variabile globale o cosa è qualcos'altro? E 'un po' come GDB con l'eccezione che si può effettivamente modificare gli elementi della pagina con in un modo molto più facile. E anche così non fosse, in fondo, controllare con voi prima che fa qualsiasi cosa. 

Così che, GDB come potrebbe essere, sei sicuro di voler eseguire il prossimo passo? La console è in tempo reale. Così come pagina web è il rendering e fare tutto ciò che sta facendo, l' Consiglio di corso anche accanto ad esso. E si può mettere il codice in impute quella console, che sarà essere eseguito sulla pagina. 

MIKE RIZZO: Quindi, per entrare nella console, Credo che dovrei brevemente parlare di come fare. Negli ultimi problemi che si possono avere usato Chrome Inspect Element funzioni o visualizza sorgente pagina - e questi sono accessibili solo da destra cliccando sulla pagina o una specifica elemento ed effettuando una ispezione elemento o visualizza sorgente pagina. Possiamo anche accedere al JavaScript console direttamente da scegliendo ispezionare elemento. Console Allora hai appena colpito sul lato destro. 

In alternativa, si potrebbe avere anche andato verso l'angolo in alto a destra, che è tagliato fuori in questa schermata, dove ha le tre barre orizzontali. E si scende a strumenti e allora console JavaScript qui dove può vedere - almeno su Windows - il collegamento è Shift Control J. Allora se volessimo selezionare un elemento in questa pagina, proprio come ho mostrato prima, facciamo il segno del dollaro parentesi aperte e poi cita. 

Una cosa interessante è, in genere, apici singoli e doppi sono intercambiabile. Così un sacco di persone solo uso singola virgolette perché sono più veloci da digitare di virgolette, perché non lo fai devono tenere premuto il tasto Maiusc. Quindi mi limiterò a farlo adesso. 

Quindi voglio scegliere qualcosa con classe. Container, proprio perché so che è qualcosa che è sul nostro pagina web in questo momento. E mi ha colpito Invio. E possiamo vedere che ha selezionato. Così si presenta che restituito l'oggetto. Ecco, questo è una selezione di base. Se volessimo manipolare realtà, si dovrebbe chiamare qualcosa su tale selezione, che avremo in seguito. 

TOMAS REIMERS: Quindi, solo a guardare quella più in profondità, questo non è diverso rispetto alle chiamate di funzione che abbiamo fatto in C. Il nome della funzione qui è un po 'strano. E 'il simbolo del dollaro. E 'solo un nome di una funzione. Non c'è niente di speciale. 

Abbiamo parentesi aperte. Poi, abbiamo il nostro unico argomento, che in questo caso sembra essere una stringa, che è un selettore per esso. E poi, abbiamo il nostro parentesi chiusa. Tutto qui. 

Non è che molto diversi. Anche se, ha un aspetto molto strano. E che può essere, una sorta di, un incollaggio puntare per un sacco di gente. 

MIKE RIZZO: Così allo stesso modo, se volessimo per selezionare un elemento che ha un ID, Ora vogliamo selezionare da ID invece di classe. Sarebbe una cosa simile dove siamo basta fare il segno tagliente per ID. Quindi stiamo selezionando qui tutto elementi che hanno bar ID. 

TOMAS REIMERS: E questo si estende. Che CSS estende. Proprio come in CSS, è possibile selezionare tutti link, che hanno la foo di classe. Ecco, è la stessa cosa. 

Si potrebbe fare a.foo, che seleziona tutti i collegamenti con il foo classe. Si potrebbe fare una barra tagliente, che avrebbe selezionare il collegamento con la barra ID e così via e così via. Ogni selettore CSS è un valido selettore jQuery. 

MIKE RIZZO: Già. OK, ora andiamo in un po ' di manipolazione che possiamo fare con il nostro jQuery. Così jQuery ha un particolare tipo di di notazione dove usiamo solo un punto alla fine. E si può pensare a questo come in C come abbiamo avuto diverse strutture. E per andare in quelle struct, si farebbe utilizzare un punto per entrare in loro. 

Questo è, specie di, una cosa simile. Solo ora abbiamo funzioni all'interno di questo selettore che possiamo chiamare su di esso. Così qui, il primo esempio si può vedere è un selettore CSS. E in fondo, cosa che fa è applica il primo elemento CSS a questa cosa che si è selezionato - questo elemento che è stato selezionato - con il valore. 

TOMAS REIMERS: Quindi un dizionario di facile che sarebbe se jQuery, in sostanza, appena preso foo. E poi in CSS detto, colore rosso e vicino. E 'la stessa idea. Che è fatto è che è stato selezionato tutti gli elementi foo. E poi è applicato. Sorta di, il colore di proprietà è uguale al rosso. 

MIKE RIZZO: Allo stesso modo, possiamo anche cambiare il contenuto effettivo di ciò che è mostrando il codice HTML della pagina, che è davvero bello perché significa che il vostro le pagine web possono ora essere completamente dinamico e non devono essere statico di stampare utilizzando PHP all'inizio di la pagina viene caricata. Così qui, se volessimo modificare il effettiva HTML della pagina, ci sarebbe ora chiamare la funzione HTML, che poi basta Inserti qualunque cosa specifichiamo in che elemento che abbiamo selezionato. Così qui stiamo selezionando elemento con foo classe e poi dicendo che è HTML è ora ciao mondo. 

TOMAS REIMERS: E se ci pensate quali sono utili applicazioni di questo, questo CSS uno, la prima cosa che si può iniziare a pensare è in termini di anche menu a discesa. Si potrebbe iniziare a fare le cose come, quando un utente si posiziona sopra la parte superiore di una goccia giù, si vuole fare la parte inferiore visibile. Giusto? 

Quindi, in CSS, abbiamo immobili per fare qualcosa di visibile. Cose come visualizzazione del colon none renderebbe invisibile. Blocco di visualizzazione renderebbe visibile. O anche, se si vuole andare più semplice, è avere cose come eguali visibilità visibile, e la visibilità uguale nascosta. 

E si potrebbe iniziare ad attuare le cose come drop down menu a destra dopo si ottiene attraverso l'idea di come si può capire quando questa si apre, che ce la caveremo molto brevemente. Ma possiamo iniziare a vedere applicazioni di questo. In un certo senso simile, se si dovesse provare e attuare, diciamo, una chat motore e si vuole fare un po ' fumetto venire ogni volta che hai ottenuto un nuovo messaggio, una volta che si ottiene il nuovo messaggio, si può fare un po ' fumetto salire alterando il codice HTML della pagina, giusto? Aggiungendo che la nuvoletta in più con il testo più in là. Sì? 

AUDIENCE: Così si sarebbe incorporare questo all'interno il codice HTML in una specie di [Incomprensibile]? 

MIKE RIZZO: Giusto. Si ', ci arriveremo in un po '. Sì, è simile a po 'di PHP. Non esattamente simile. 

Un buon distinzione da fare è ciò che questo è in realtà montaggio quando editiamo la pagina perché non sarà la modifica del file effettivo che si sta mantenuto sul server perché il mondo non dovrebbe avere il permesso per modificare i file. Questo è solo modificando ciò che è sulla pagina e ciò che è visualizzato all'interno il browser. Quindi, se si dovesse ricaricare la pagina dopo, dire, cancellando qualcosa di noi vediamo che possiamo fare con la chiamata remove, che cosa sarebbe poi riapparire. 

TOMAS REIMERS: Quindi un modo di pensare questo è se io sono il computer e Mike è, una sorta di, il server. Che cosa sta per accadere è che ho intenzione di chiedere a Mike, hey, posso avere una copia di questa pagina web? E lui mi darà una copia di esso. 

No, non è la cosa originale. E 'solo una copia. E poi sarebbe come, oh, c'è Javascript qui. Chiaramente, devo modificare il Pagina di essere come questo. E sto modificando la vostra copia. 

Ma questo non effettuare la copia reale. E se dovessi chiedere a lui di nuovo aggiornare la pagina, - hey, posso avere un'altra copia pulita - ha intenzione di darmi un'altra copia pulita. E poi, ho intenzione di fare la stessa cosa come, oh, questo JS qui che dice per modificare questo. E ho intenzione di continuare a farlo. 

MIKE RIZZO: Quindi una cosa davvero cool che si può fare con jQuery è effettivamente aggiungere diversi tipi di animazioni alla tua pagina. Non so se avete mai visto dove si sta cercando di un riempimento di un modulo on-line e non si compila le cose correttamente. Così una piccola cosa scivola giù in alto e si dice non hanno fatto correttamente. Riprova. E poi, potrebbe anche solo scorrere verso l'alto. 

Risulta jQuery ha costruito in funzioni che rendono tutto questo animazione davvero, davvero facile. Quindi non vi è in primo luogo la dissolvenza fuori funzione, che è possibile chiamare su qualcosa. Ed è un modo per cambiare il CSS di tale elemento in modo animato. Quindi ci vuole qualsivoglia elemento si chiama fade out su. E poi, lentamente, lo cambia di opacità finché non diventa completamente trasparente. 

TOMAS REIMERS: L'altro popolare è scivolare verso il basso, che renderà qualcosa sembra facendolo scivolare verso il basso. Quindi, nel caso del menu a discesa, ancora una volta, quando abbiamo appreso come rilevare quando questo è stato aleggiava sopra, si può solo dire questo fondo parte scivolare giù adesso. E poi, sembrerebbe facendo scorrere verso il basso. 

MIKE RIZZO: E poi, se avete appena qualche tipo di animazione in mente che jQuery non fornisce necessariamente. Per esempio, diciamo jQuery non si fornisce con una diapositiva giù e scivolo alto. Beh, diciamo che si voleva far scorrere qualcosa sulla sinistra o dalla il giusto tipo di come il CS50 Pagina principale fa ogni volta si va a un nuovo pannello. Si potrebbe allora probabilmente dovuto attuare da soli usando l' animare funzione all'interno di jQuery. 

Così allo stesso modo, basta animare. E poi, al suo interno ci vuole un Dizionario dei diversi valori che si suppone di passare. Così qui, se volessimo animare la elemento foo tale che la sua larghezza sia si espande o contrae a 80 pixel, seconda di ciò che è attualmente. Vorremmo basta passare che, come l'argomento all'interno di esso. 

Animare anche alcuni altri argomenti che si poteva passare, per esempio, la velocità dell'animazione che si vuole dare. E per farlo, vorrei solo dire rapidamente Google jQuery animare. E poi, portando questa pagina, è possibile vedere che ha un mucchio di diverso proprietà che si può passare. 

E io incoraggio - ogni volta che si arriva in qualcosa che non si fa conoscere o semplicemente vuoi saperne di più su un particolare metodo che si può chiamare su qualcosa - solo Google esso. jQuery è estremamente ben documentata. E spesso ci sono molti esempi che essi forniscono per voi. Se scorriamo - fino in fondo - che possiamo usare, come bene. 

Ancora una volta, quando uno sviluppatore in realtà va attraverso la briga di scrivere un biblioteca, che in genere vogliono qualcuno di usarlo. Così accanto sta per essere una documentazione. E che la documentazione di solito può essere trovato nella pagina del progetto, che è il motivo per cui abbiamo dato che il sito originale in l'inizio, che si collega al pagine di progetto in modo da poter vedere che la documentazione. 

In genere, la pagina del progetto, nel caso di [incomprensibile], ma il detto nomi delle classi. Nel caso di JavaScript, dà il nome delle funzioni. A proposito, se scorriamo fino alla cima, una nota di lato breve sulle funzioni è ogni volta che vedete una funzione implementata in questo modo con il disco parentesi nel mezzo, che mezzi che tale proprietà è facoltativa. Solo un testa a testa. Ho visto un sacco di domande a tale proposito. 

Così qui possiamo vedere che l' animato prende immobili come argomento necessario. E tutto il resto è opzionale. Nota a margine - si può pensare a questo, specie di, come le pagine man. Le pagine man sono la documentazione per C e per un sacco di altre cose, pure. 

MIKE RIZZO: per questo abbiamo imparato a cambiare diversi CSS della pagina, animarlo, aggiungere e rimuovere HTML. Ma uno dei molto più potente cose su JavaScript e soprattutto jQuery - ciò che permette di fare è rispondere alle diversi elementi che accadono. Ad esempio, qui abbiamo un gestore di eventi. E questo significa solo ogni volta che questo evento si verifica, gestiamo in un certo modo. 

Quindi, ecco, l'evento generico jQuery gestore è il punto su. E poi, la prima cosa disponibile è ciò evento che dovrebbe essere in ascolto per. Quindi, ecco, è il click che stiamo aspettando. 

TOMAS REIMERS: In alternativa, avete al passaggio del mouse, che è molto popolare. Ma torniamo alla mia discesa idea menu. Avreste quella superiore al passaggio del mouse. E allora si potrebbe cambiare la situazione. 

MIKE RIZZO: Giusto. E poi, quando ciò accade, semplicemente esegue questa funzione che gli diamo come argomento e che avverte ciao o ciao. 

TOMAS REIMERS: Quindi, nel caso di JavaScript, questo è un posto che dobbiamo uscire da noi C. Possiamo effettivamente assumere funzioni come argomenti. E ci sono un sacco di veramente modi complessi per fare questo. Stiamo andando a promuovere un modo, che è possibile definire il funzionare proprio lì. 

Così, quando stai chiedendo una funzione come un parametro, sei fondamentalmente solo andando a definire la funzione sul posto. E il modo in cui si definisce una funzione in JavaScript è lei letteralmente dire la funzione. Poi, di solito, il nome della funzione. Ma stiamo andando mai riferimento questa funzione di nuovo. Quindi lasciamo senza nome. 

Poi le parentesi, poi il riccio bretelle, e poi il codice all'interno. Così abbiamo capito questo può essere un po 'di confusione. Quindi vi diamo la forma generale di ciò che un gestore di eventi assomiglia di seguito, che è su eventi. E poi, il codice all'interno di quella. 

MIKE RIZZO: Ci sono delle domande su questo? Questo può essere un po 'di confusione la prima volta che si vede. 

TOMAS REIMERS: si vuole realmente aprire un file e mostrare loro alcuni jQuery adesso? 

MIKE RIZZO: Sì, facciamolo. OK. 

TOMAS REIMERS: Così ora siamo nell'apparecchio. E quello che abbiamo fatto è che abbiamo preso l' libertà di creare sia un index.html file, che collega a un file JavaScript. E possiamo aprire il - sì. Beh, fa due cose. 

Il primo è che si collega a il file JavaScript. E vedremo che fino qui. Vediamo che nella testa del Documento HTML, particolarmente. Così vedrete lì che noi, in fondo, diciamo SRC, che sta per fonte. E questo è l'URL. 

Così qui si può dire che abbiamo incluso jQuery. E abbiamo incluso anche script. L'altro modo per includere JavaScript è che è possibile includere uno script inline tag come abbiamo in fondo dove dice che tipo di script è il testo JavaScript. 

Quindi stiamo dicendo, ascolta, siamo per includere uno script. E il tipo di tale script è JavaScript, che è un tipo di testo. Molto semplice. 

MIKE RIZZO: Quindi questo tipo di, arriva a la tua domanda su come includiamo JavaScript nostri archivi, perché quando abbiamo aveva PHP, possiamo fare qualcosa di simile. E poi, le nostre funzioni PHP - diciamo scorte fanno qualcosa che - va in là. Tuttavia, ora abbiamo i tag di script che gli diamo, che in realtà sono parte del codice HTML in sé, perché non è fingendo di essere un file HTML simile è in PHP, perché se andate in e guardare il sorgente della pagina, vedrete questi tag script in là con il codice JavaScript associato a li fatto che. 

Allora, se volessimo scrivere qualche JavaScript - diciamo solo che abbiamo deciso di cambiare corpo perché in questo momento non ho altri tag che posso davvero modificare oltre il corpo. Diciamo che ho voluto modificare il CSS di questo. Quindi andiamo avanti e il cambiamento il colore di esso al rosso. 

Così risparmio il file. Torniamo alla nostra pagina web, aggiornamento, e lo fa automaticamente perché non mi sembrava si aspettava a tutti perché noi non stavamo ascoltando per un evento o qualcosa di simile. 

TOMAS REIMERS: Quindi, se andiamo indietro a quel file in particolare - l'HTML FILE - quello che stai andando per vedere è che abbiamo - ricordate che questa è caricato, una sorta di, in ordine cronologico. Così abbiamo prima la testa. carica questi due file. Poi andiamo al corpo. E vediamo ciao mondo. Così rendiamo mondo ciao. 

E poi l'ultima cosa che abbiamo è che abbiamo il tag script. Così si corre il tag script perché è non dicendogli di aspettare per niente. E questo è il più fondamentale modo per eseguire JavaScript. 

Detto questo, si può mettere lo script tag nell'intestazione appena per dimostrare questo punto? E eseguire tale. Stiamo andando a notare che non cambiare il colore. E questo è uno dei problemi di JavaScript è che le cose sono caricati in ordine cronologico. 

Quindi nel momento in cui detto codice correva, abbiamo selezionato - tornare indietro - il tag body. Il tag body non esiste ancora perché JavaScript è in linea con HTML. Così il browser è come selezionare il corpo. Non c'è ancora una cosa. Così possiamo ignorarlo. E noi continuiamo. 

E poi definiamo un tag body. Ma che non viene mai aggiornato. Così, quando si sta implementando copione etichette, assicuratevi di posizionare dopo il tag body. Diapositiva successiva. 

MIKE RIZZO: OK. Così abbiamo cambiato qualcosa. Ma non sembrava ha risposto alla noi a tutti perché solo tipo di ha fatto appena caricata la pagina. Così ora, invece di fare questo, perché Non aggiungiamo un gestore di eventi. 

Quindi cerchiamo di fare qualcosa al corpo di nuovo. E diciamo lo facciamo su - fare clic su. Aggiungeremo una funzione. 

Cambiamento di Let: TOMAS REIMERS il suo colore rosso di nuovo. Perché no? 

MIKE RIZZO: Sì, andiamo cambiamento il suo 'colore rosso di nuovo. Bene. Quindi cerchiamo di ricaricare la pagina. OK, vediamo - come previsto, ancora non diventa rosso. Ma allora possiamo andare avanti e fare clic su di esso. 

TOMAS REIMERS: e lo fa diventare rosso. 

MIKE RIZZO: E lo fa diventa rosso come previsto. 

TOMAS REIMERS: E possiamo vedere come possiamo cominciare a costruire molto di base interazione. Altre cose che potremmo voler fare è, se non vogliamo fare il corpo colore rosso, facciamo il codice HTML sfondo di colore rosso. Solo così è lo stesso CSS. 

E quando cambiamo, possiamo vedere questo effetto molto drammatico di cambiare il intera pagina. Quindi, di nuovo, se si sta implementando le cose, si può avere un componente che è destinato a essere cliccato. Diciamo che un pulsante Esci e un'intera altro componente, che si propone di rispondere. Così si sarebbe rimuovere una finestra quando ciò accade. 

MIKE RIZZO: OK. A titolo di esempio - non hai a vedere questo prima - Mi limiterò a mostrarvi quello che sembra come quando ci nascondiamo qualcosa. Quindi vado avanti e faccio scorrere verso l'alto. 

TOMAS REIMERS: Volete avvolgere che in un Tipo paragrafo prima che lo facciamo? 

MIKE RIZZO: OK. Gia ', perche' non lo facciamo così possiamo selezionare un po 'di più. 

TOMAS Reimers: e andiamo dargli una lezione. 

MIKE RIZZO: Già. OK, vediamo. Invece di selezionare il corpo reale ora, mi limiterò a selezionare tutto con classe ciao, che qui si solo hanno una cosa. Quindi non dovremmo preoccupare di questo. 

Così sarò aggiornarlo. Vado avanti e fare clic su di esso. E, una sorta di, ha fatto una diapositiva strano up cosa, che non sembrava che attraente. In generale, essi sembrano abbastanza piacevole. Credo che questo - per alcuni ragione - non lo fece. Mi limiterò a fare un fade out così si può guardare anche questo. Molto più bello. 

E poi, se apro il JavaScript consoliamo di nuovo e vogliamo vedere che cosa sembra che quando ci svanire dentro Ora, mi basta chiamare dissolvenza su di esso. E sfuma interattiva 

Allo stesso modo, potremmo realmente passare anche un argomento di fade in o fade out, che è, tipo, la velocità di esso. Quindi cerchiamo di andare avanti e dire che vogliamo per andare lentamente dissolvenza dentro Quindi credo che sembrava ancora piuttosto veloce. Ma era più lento di prima. 

TOMAS REIMERS: E se si vuole trovare di più su queste cose, ancora una volta, basta andare alla documentazione jQuery, che vi abbiamo dato, e leggere attraverso questi. Essi documentano le loro funzioni incredibilmente bene. 

MIKE RIZZO: OK. Quindi credo che torniamo al presente. E possiamo parlare della nostra ultima pagina. Beh, possiamo finire con Bootstrap. E poi ci aprirlo per alcune domande. E se voi ragazzi avete qualche idea che vuoi provare a vomitare e vedere se possiamo mettere in atto con JavaScript rapidamente. 

Quindi, molto velocemente su Bootstrap, che è stato incluso automaticamente nella il vostro ultimo problema posto nella cartella CSS ed effettivamente collegato al vostro header.php. Così si potrebbe aver aggiunto le classi che sono definiti all'interno di Bootstrap ad esso. E sarebbe designato automaticamente quelle cose di conseguenza. 

TOMAS REIMERS: Quindi Bootstrap è molto cosa magica sviluppato dal popolo a Twitter. E quello che doveva fare era - prima di siti web sono stati davvero difficile fare aspetto gradevole, soprattutto quando avevamo molti componenti comuni. Così un sacco di pulsanti sul web sembrava la stessa. 

Un sacco di campi di testo può essere fatto per un aspetto migliore rispetto al testo standard campo probabilmente sapete da molto siti web vecchi o fatto davvero male siti web, che proprio sembrano letterale caselle di testo, senza alcuna forma di testo ombra o qualsiasi tipo di piacevole contorno. Allora, cosa ha fatto Bootstrap era detto, bene, abbiamo un sacco di stili comuni. Perché non facciamo un insieme comune di CSS e un insieme comune di JavaScript come bene, che può stile così com'è e che può dare alla gente le cose come goccia tendina, che può dare alla gente cose come modali. 

Modal è quello che si apre sopra la pagina ogni volta che viene in senso stretto qualcosa, che inibisce l'ulteriore interazione fino a interagire con esso. Qualcosa del genere è, sei sicuro Vuoi eliminare questa cosa? Non si può davvero fare altro fino a quando si dice sì o no. 

Ha preso tutto questo e confezionato esso insieme e detto, qui andiamo. Le persone possono ora utilizzare questo. E lo si può trovare su a getbootstrap.com. Si è automaticamente incluso in il vostro ultimo problema impostato. E tu sei più che benvenuti a utilizzare sul vostro progetto finale. E se volete seguire che link per ottenere Bootstrap. 

Vedrete qui è il Bootstrap sito CSS. Vedrai Bootstrap. E se si scorre verso il basso, vedrai come scaricarlo, come installarlo, eccetera. 

MIKE RIZZO: E si può anche, abbastanza interessante, personalizzarlo per essere qualunque tipo di temi che si desidera. So che è una cosa che ho fatto per il mio progetto finale quando ho preso la classe è stato personalizzarlo. Una versione diversa di Bootstrap che aveva uno schema di colore diverso e diverse forme di alcuni cose diverse. Quindi vi incoraggio a giocare con quella. È una specie di divertente da fare. 

TOMAS REIMERS: Guardando in alto ancora una volta, è molto simile al carattere Impressionante sito. Un sacco di documentazione avrà inizio per sembrare simile quando hai visto abbastanza. Quindi qui abbiamo il CSS componente di questo. E vedrete come può stile cose. Quindi, se si fa clic su tavoli, per esempio, si può immediatamente fare un Tavolo abbastanza semplicemente aggiungendo la tabella classe ad esso. 

Stesse cose per i pulsanti. Se è sufficiente aggiungere il BTN classe e BTN inadempiente o BTN primaria, è possibile ottenere uno qualsiasi di questi pulsanti con questi stili pre-made. E poi, se siete alla ricerca di qualcosa di più complesso di una semplice restyling ciò che w hanno già, oltre a la scheda JavaScript attraverso la parte superiore che avere un gruppo di componenti. 

Quindi qui abbiamo transizioni, modali, dropdown, schede, e suggerimenti. Un suggerimento è quello che si apre sotto il tuo mouse quando si passa su qualcosa. Popovers, avvisi, pulsanti, pieghevole fisarmoniche è ciò che sono di solito chiamati. Caroselli, che di vibrazione attraverso immagini come. 

Quindi questi sono i componenti di Bootstrap. Vi incoraggio a molto andare a vedere loro. C'è una componente di JavaScript e un componente CSS. Sentitevi liberi di usarli come volete. Non abbiamo intenzione di andare troppo in loro perché riteniamo la documentazione è davvero ben fatto. E sì. Avete domande su questo? 

MIKE RIZZO: Così come sono molto veloce lato, il design di questa pagina web che abbiamo rapidamente messo insieme per questa presentazione è effettivamente fatto uso Bootstrap. Come si può vedere, quando si clicca su questi schede diverse, siamo in realtà mai lasciando questa pagina index.html corrente. Quindi quello che abbiamo è diversi div all'interno di questo index.html. E poi, ogni volta che si clicca un diverso scheda, è solo cambiando che di una mostra. 

Così li posiziona di conseguenza, cambia il codice HTML della pagina in modo che la scheda corrente è contrassegnata come attiva, in modo appare diverso e sguardi veramente bello. 

TOMAS REIMERS: So che è stato tutto fatto senza di noi di scrivere quasi tutti i CSS. Vediamo anche un colpo di testa in alto, che i colori sono da noi. Ma l'attuale mettere sul superiore della pagina e facendo che scroll era Bootstrap. E poi anche per un'altra libreria - questo non è uno abbiamo parlato ma uno Potete google se vuoi. Questo si chiama prettify.js. E sarà evidenziazione della sintassi il codice per voi utilizzando sia i CSS e JavaScript. 

L'ultima cosa che vogliamo parlare prima di rilasciare fuori nel mondo a guardare le biblioteche per capire come usarli e, si spera, leggere la documentazione e trovare ciò che necessità è come trovare le librerie. Quindi, la prima è che siamo solo andando a spingere Google. Go Google. 

Questo è letteralmente ciò che facciamo quando bisogno di fare qualcosa che è Google. C'è una libreria JavaScript che mi permette di manipolare il tempo in un modo utile? Quindi, se so che qualche utente di creare un account qui, e questo è il ora corrente, come posso calcolare il differenza con che senza dover calcolare da solo? Quindi, questo è in realtà una cosa comune, JavaScript library tempo. E qui noi Moment.js-- il più popolare. 

Se abbiamo bisogno di una libreria per manipolare qualcosa come colore per potere generare un mucchio di colori casuali - eventualmente, per generare un stile o qualcosa - potremmo su Google qualcosa come JavaScript library colore. E sono sicuro che avremmo pop-up con mille e uno di loro. Siete invitati a leggere attraverso di loro. 

Così la maggior parte delle cose - quando li trovate - stanno andando essere ospitato su uno dei siti che codice host. Loro sono sono un paio di quelli popolari. Il più popolare, da Finora, è github.com. E se si va a GitHub è in realtà dove è stato ospitato Normalize. Quindi, se volete tornare a quella. Mostrate loro che. 

MIKE RIZZO: E questo è in realtà dove questo è ospitato anche, se avete notato. 

TOMAS REIMERS: Già. Quindi, se si va oltre a normalizzare e andare al GitHub. Erano è? 

MIKE RIZZO: Quella piccola cosa cat è il simbolo GitHub. 

TOMAS REIMERS: Oh. Così GitHub utilizza un metodo chiamato Git al codice negozio. È che non sai di cosa si tratta o ti spaventa, va bene. Non devi sapere che cosa è Git perché GitHub ha un pulsante di download in basso a destra. 

L'altra cosa utile da sapere su GitHub è maggior parte dei prodotti avrà un me leggere. E se non hanno un sito web, la read me Parlerò di come si installarlo, come si usa, cosa fa, eccetera, eccetera, eccetera. Quello che siamo stati praticamente camminare attraverso. 

MIKE RIZZO: smettere di Internet. 

TOMAS REIMERS: Va bene. Le ultime due cose che volevamo a parlare - abbiamo parlato di Git - è la risoluzione dei problemi. E questo non è rilevante per il prodotto finale è quando si esce 50. E quando si esegue in prodotti attuazione di biblioteche o di esecuzione il tuo progetto, si sta andando avere domande o siete andare a cercare per le domande. 

Ancora una volta, google. Questo è letteralmente quello che facciamo. Questo sta per sembrare stupido. Ma letteralmente, noi google. E ancora, una delle prime cose è solitamente esegue in è stackoverflow.com, che è una meravigliosa domanda e risposta di vista. 

E 'meraviglioso, sia perché si può postare domande e cercare risposte ma anche perché ha già un sacco di contenuti pre-popolato lì. Così, di solito quando si Google una programmazione domanda entro il primo coppia colpisce si può avere già eseguito in esso durante i vostri set di problemi. 

E poi, l'ultima cosa veramente breve è JSFIDDLE, che è - oggi abbiamo state facendo un sacco di lavoro con JavaScript HTML CSS. JSFIDDLE è una web app, che sostanzialmente permette di prendere il codice HTML, AVRA ' JavaScript basso a sinistra, e a destra in alto CSS. E allora può creare un rapido rendering Di esso e vedere come interagisce. E 'molto utile quando le persone stanno cercando per fare una prova di concetto come questo è come si farebbe fare un menu a discesa. Forse un uncover rapido o qualsiasi altra cosa. 

MIKE RIZZO: Allora andiamo avanti e fare clic su questo. Una breve nota - considerando che, prima eravamo facendo clic su. Risulta JCorey Corea ha anche un built nel gestore di eventi click che usa solo perché figure sei andando a voler fare un sacco di cose quando si vuole scegliere qualcosa. 

Allo stesso modo, ha anche un hover. Ma per ottenere l'intera gamma di quelli, guardare il jQuery documentazione e farlo. Ho fatto qualcosa di stupido qui. 

TOMAS REIMERS: Così ho una molto veloce programma proprio qui, che dice pulsante sul click. Poi abbiamo un ciclo for. Per i è inferiore a 404. E 'solo andando a pop up questi messaggi di avviso. 

MIKE RIZZO: E qual è stata la codice 404 stava per in HTML? Qualcuno ricorda? Non trovato, giusto. Chrome ha anche aggiunto questa ordinata cosa dove si può - 

TOMAS REIMERS: Perché la gente come Mike ha iniziato a fare questo molto e Gli utenti fastidiosi, che permette di vedere info. 

MIKE RIZZO: Già. 

TOMAS REIMERS: Non abbiamo tutte le domande su questo, su JavaScript biblioteche, trovando biblioteche, o guarda ciò che di sviluppo web come nel mondo reale? Stiamo correndo contro il tempo. Quindi io non sono sicuro che stiamo andando per avere il tempo di attuare meno che non sia davvero veloce. Siamo a posto? 

MIKE RIZZO: tutto quello che i ragazzi vorrebbero per vedere realmente veloce in, come, due minuti o meno? 

TOMAS REIMERS: Anything possiamo chiarire? Come scrivere in - 

AUDIENCE: [incomprensibile]? 

MIKE RIZZO: Sì, così that - 

TOMAS REIMERS: Si può solo colpire Control-U sul sito. 

MIKE RIZZO: Oh, io non so. 

TOMAS REIMERS: penso, sì. Control-U. Già. 

MIKE RIZZO: Oh, così che è l' il codice per il sito. Ma se si vuole realmente a scaricare il nostro file e tutto, è ospitato su github.com 

TOMAS REIMERS: tagliare il mio nome - Tomas Reimers - barra Seminario CS50 trattino. 

MIKE RIZZO: E si può trovare tutto quello che c'è. 

TOMAS REIMERS: Questo è ciò che GitHub sembra, tra l'altro. Quindi, di nuovo, quando si vede un open source progetto, in genere, saranno una lettura Mi lì che si può leggere. E se si va indietro, si noterà che avete il download zip, che sarà permettono di scaricare il sorgente codice per includere l' prodotto nel proprio cosa. 

MIKE RIZZO: Sì, e se abbiamo appena clicchiamo sulle index.html molto rapidamente - 

TOMAS REIMERS: Vedrai ecco l' il codice sorgente per il nostro sito. 

MIKE RIZZO: Inoltre, ho dimenticato di spingere a destra prima con il grande tavolo che incluso, ma c'è anche un tavolo di chmods che abbiamo incluso solo per la vostra chiarezza. Ma se scorriamo fino in fondo al fondo, non abbiamo effettivamente fare molto molto con il codice JavaScript roba a tutti con questo. È esclusivamente da tutto altra cosa che abbiamo avuto. 

Quindi grazie ragazzi per venire e l'ascolto. Ci auguriamo che questo è stato davvero utile. Se avete qualsiasi JavaScript correlato domande o vogliono solo parlare che altro come quello che altre cose interessanti si può fare con JavaScript, ci piacerebbe parlare con te. 

TOMAS REIMERS: Se hai una domanda sul progetto o se questo può essere rilevante, probabilmente ci andremo bastone intorno un po 'dopo questo. Ma a parte questo, hanno un buon fine settimana. 

MIKE RIZZO: Sì, godere. Vedere voi ragazzi. 

TOMAS REIMERS: See ya.