>> 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.