[Powered by Google Translate] [Seminario: JQUERY]
[Vipul Shekhawat, Harvard University]
[Questa è CS50.] [CS50.TV]
Se si sta seguendo a casa, si può effettivamente accedere mie diapositive in linea
andando a questo link.
E 'TjjRWj, su bit.ly.
È anche possibile accedere alla URL direttamente,
che è cloud.cs50.net / ~ vshekhawat, che è il mio nome,
e jQuery.
I consigliamo vivamente di seguire insieme se stai guardando in casa,
e se siete qui, anche, perché questa è una presentazione piuttosto interattivo.
>> Così oggi ho intenzione di parlare di jQuery, e la prima domanda è:
ciò che è jQuery?
Quest'anno, io so che voi ragazzi non hanno coperto JavaScript
nel modo più dettagliato come abbiamo fatto negli anni passati.
JavaScript è, prima di tutto, solo un linguaggio lato client
che si utilizza per eseguire script e codice sul computer di ogni utente.
In modo da avere un server che fornisce le pagine web per le persone,
ma si potrebbe desiderare di fare cose sulla loro macchina,
chiedere la loro macchina per inviare richieste al server ogni 30 secondi o qualcosa di simile.
Potete farlo utilizzando JavaScript.
JQuery solo fornisce più funzionalità in cima JavaScript
che fa roba in più per voi.
Se si guardano i contenuti in primo piano,
che descrive alcune delle cose che siete in grado di fare.
Dunque, nel complesso, è stato creato nel gennaio 2006.
E 'stato il primo a concepire nel mese di agosto 2005.
E 'stato in giro per un paio di anni, ed è davvero una parte del nuovo movimento Web 2.0
che ha fatto di Internet in modo lucido.
E 'la libreria JavaScript più utilizzato.
Oltre 19,6 milioni siti lo usano, e l'utilizzo è ancora in aumento
secondo builtwith.com, che, a quanto pare, nel corso dell'ultimo anno,
è appena stato in continuo aumento abbastanza lineare.
Tra i primi 10 milioni di siti, c'è ancora -
circa il 40% di loro sono attualmente utilizzando.
Facebook lo usa, un sacco di altri siti web fanno uso.
Potete guardare le statistiche sul proprio, se vuoi.
E si potrebbe dire che è legittimo perché ha un fondamento e di 13 membri del consiglio,
insieme ad un team di 20 persone che lavorano su di esso su una base regolare.
Quindi è molto usato, ha un URL org., È fantasia,
ha spin-off per altre cose, quindi è un grosso problema.
>> Perché si dovrebbe usare? JQuery è molto leggero.
Ciò significa che non è un file enorme. È possibile scaricare
il file minified, che è senza tutto lo spazio e commenti bianco, ed è a soli 32 kB.
Così è facile buttare solo sulla tua pagina web
e giusto per iniziare ad usarlo.
E 'anche molto efficiente scritto, quindi non ci vuole un sacco di -
che non rallenta il tuo sito web molto quando lo si utilizza.
Esso consente di implementare le cose che prima erano impraticabili.
Ci sono alcuni aspetti di funzionalità,
come la creazione di animazioni, che normalmente sarebbe molto, molto difficile da fare.
Ma in jQuery sono in realtà molto semplice.
E ci sono alcune cose che sono fastidiosi da fare,
possibile in JavaScript, come l'invio di una richiesta POST,
ma di inviare una richiesta a un server, si deve scrivere
cinque o sei o sette righe di codice.
Ora si può solo farlo in una sola riga di codice, in una sola chiamata di funzione.
Che semplifica davvero un sacco di roba che si sta facendo.
E tutti i ragazzi fighi stanno usando. Con questo, mi voglio dire.
Nel mio progetto finale dello scorso anno, che è news.whrb.org,
che è per la stazione radio, ho creato questo blog
che ospita tutti gli spettacoli che abbiamo fatto e il file MP3 per loro.
È possibile navigare attraverso gli ultimi spettacoli,
ed è tutto fatto utilizzando jQuery. Si può dire
a causa di tutte queste animazioni, essenzialmente.
Quindi, se avete - se si sta creando un nuovo post,
vedete questi piccoli slideDowns; che è tutto fatto utilizzando jQuery.
E questa dissolvenza - in modo che tipo di cose è tutto fatto utilizzando jQuery,
e non c'è bisogno di ricaricare costantemente la pagina per navigare il sito.
Un'altra cosa interessante che è fatto utilizzando jQuery è questa presentazione.
Sto usando questa cosa open source chiamato scrolldeck,
che qualcuno ha scritto su di jQuery.
Se effettivamente guarda alla sorgente, si può vedere che
che stanno usando questo segno del dollaro; segno del dollaro
sono utilizzati in jQuery per indicare che una funzione è una funzione jQuery.
Così stanno definendo un wrapper su di jQuery
che ti permette di fare una presentazione di questo tipo,
e si può vedere che qui stanno includendo il file jQuery originale,
che è quello che si dovrà includere, se si desidera utilizzare jQuery
nei vostri siti web.
>> Toccando il che, come si installa?
Si può solo andare a jQuery.com e scaricare il file,
aggiungerlo a una directory web e includerlo.
Quindi, solo in cima, nel tag head del file HTML
del file HTML principale, basta che la riga di codice
con la versione corretta per la versione di jQuery che si sta utilizzando.
Potete scaricarlo andando a jQuery.com,
cliccare "download jQuery," e ce l'hai. Tutto qui.
E in realtà, possiamo dare un'occhiata a quello che sembra.
Se si clicca su scarica qui, jQuery è questo.
E 'solo un unico grande file JavaScript che fa tutte le cose magia per voi.
Questa è la versione minified, che non è leggibile a tutti.
È anche possibile guardare la versione di sviluppo, che è leggibile
ma ancora molto, molto lungo.
E 'un sacco di roba lì.
È inoltre possibile collegare alla versione di Google ospitato di esso.
In modo che ti permettono di fare affidamento solo su Google di fornirle.
Dispongono di ogni versione, disponibile in ogni momento.
Così si può probabilmente fare affidamento su Google per ospitare per voi.
Oppure si può collegare al proprio ultima versione di jQuery.
Essi hanno un URL che è sempre aggiornato all'ultima versione.
E 'jQuery-ultima, e non c'è un problema con questo,
che è che se il jQuery aggiornato e alcune delle funzionalità precedenti
avevano diventa retrogrado o deprecato,
esso non può - si può iniziare a non farsi più supportate.
Quindi, se si scrive un sito Web utilizzando la versione 1.8.2,
dalla versione 2.7 ora viene fuori
alcune delle funzioni che hai scritto non funzionano più.
Quindi è meglio scaricare solo il file 32 kB,
metterla sulla tua pagina web, e funzionerà sempre.
>> Ho intenzione di andare avanti e iniziare a parlare l'effettiva funzionalità di jQuery.
La prima cosa è selettori. Questo è ciò che jQuery è stato inizialmente concepito per fornire.
Ed è possibile fare clic sulla documentazione da guardare
la documentazione dettagliata per i selettori che ho intenzione di essere di copertura.
L'idea alla base di selettori è che è possibile selezionare elementi HTML di una pagina.
Elementi di una pagina dispongono di ID e classi e altri aspetti che identificano a loro.
C'è anche - Stanno in ordine diverso.
Una parte del tempo stanno annidati uno dentro l'altro.
JQuery permette di costruire query semplici che recuperano elementi della pagina.
Poi si può manipolare questi elementi utilizzando le funzioni di jQuery,
che è la sezione manipolazione ci arriveremo dopo.
È possibile modificare il codice HTML, modificare il CSS,
è anche possibile animare e aggiungere funzioni che attivano su determinati eventi.
Così, per esempio, se è cliccato qualcosa, si vuole che accada qualcosa,
è possibile farlo utilizzando jQuery pure.
E ci sono un numero enorme di modi per selezionare gli elementi.
La maggior parte di loro non ho mai usato, ma ci sono quelli di base,
che sono abbastanza importanti.
Il selettore di elemento, ad esempio, se si sta solo selezionare nulla
che è un div - Io in realtà sono il codice aperto per la presentazione di diapositive.
Così, per esempio, ecco la prima diapositiva.
Qui abbiamo un div. Se abbiamo effettivamente selezionare tutti i div nella pagina,
sarà solo darci un array di tutti i div che esistono in questo file.
Il selettore ID consente di selezionare qualsiasi cosa con un determinato ID.
Quindi, se questo, per esempio, questa cosa ha l'ID "che cosa",
e se abbiamo fatto questo con # quello che invece di un documento d'identità,
sarebbe solo restituire un array con un solo elemento e cioè che elemento della pagina.
Possiamo anche combinare selettori in questo modo da avere
selezionare solo le cose con gli ID che sono div.
Quindi sì. Selezionare solo i div che hanno quel ID.
Per la classe è sufficiente utilizzare un punto, è la stessa cosa di CSS.
Discendente funziona anche, quindi se avete un po 'di classe
e ha nidificato elementi all'interno di esso - così, ad esempio,
vi è una certa classe e ha un tag di ancoraggio per un collegamento a un'altra pagina,
è possibile utilizzare questa sintassi per recuperare il link.
È anche possibile selezionare più cose contemporaneamente, basta separarli con virgole,
utilizzare qualsiasi selettore vuoi, e selezionerete tutti in una volta, in un singolo array.
E poi c'è anche la non selezione, in modo da poter selezionare tutti i div
che non hanno un po 'di classe specifica.
E questo è solo un modo utile per avere una introduzione a come funziona questa selezione.
Vi mostrerò alcuni esempi concreti in un secondo.
>> Selettori avanzati sono - questi sono solo alcuni esempi.
Ci sono decine di questi, ma se si desidera selezionare tutti i tag di immagine
all'interno di qualche elemento, quindi basta fare: immagine.
Se si desidera selezionare gli elementi, anche, per esempio, se ci sono 20 di loro,
si desidera selezionare 0, 2, 4, 6 e così via,
si fa: anche, o si può anche fare: strano.
Questi sono pseudo selettori, il che significa che in realtà calcolano
ogni altro elemento piuttosto che solo andando e selezionando tutti loro.
È possibile anche - ogni elemento può anche avere attributi specifici.
Così, per esempio, classe = centro è anche un attributo.
Per questo tag anchor, href, riferimento ipertestuale, è un attributo anche.
Così si può scegliere qualcosa che si collega a una pagina specifica o solo - è davvero generale.
È possibile selezionare qualsiasi cosa con qualsiasi attributo che vuoi.
E poi, anche, attributo contiene.
Se, per esempio, ha voluto selezionare tutti gli elementi di input
che hanno la parola "pass", come il nome di loro,
se una pagina ha un blocco di testo di input
Si chiama "password", che Sarebbe un modo è possibile selezionare quello.
E ce ne sono molti di più. Si può andare avanti e guardare la documentazione
e vedere esempi specifici di come funziona.
>> La prossima cosa è manipolazione del DOM.
Dopo selezioniamo elementi, vorremo fare effettivamente cose con loro.
Finora non abbiamo guardato che a tutti, ma se si guarda alla documentazione,
non c'è davvero molto che si possa fare.
A questo punto, andremo a selezionare gli elementi su questa presentazione
e manipolarli utilizzando jQuery.
Perché questo è implementato usando jQuery, abbiamo accesso alla libreria jQuery,
e siamo in grado di utilizzare le funzioni di questo codice.
Una cosa utile che non si può conoscere è la console.
E Google Chrome è quello che sto usando. È possibile premere alt comando J
o alt controllo J per aprire la console.
In Firefox Penso che sia comando shift K o il controllo del cambio K.
In Safari si deve andare cambiare alcune impostazioni.
C'è un link se vuoi farlo, ma vi consiglio di andare Chrome o Firefox.
Quindi cerchiamo di aprire la console, è qui.
Esso consente fondamentalmente solo fare quello che vuoi.
Così si può semplicemente digitare creare una variabile chiamata x,
x = 5, vediamo cosa x + 2 è.
Si può anche fare qualcosa di simile a CS + Vediamo, x + 45, che sarà CS50.
Si può solo fare un po 'di roba tipica JavaScript.
Ma si può anche fare in jQuery qui.
>> Quindi diamo un'occhiata a questo primo aspetto qui.
Stiamo andando a creare una variabile denominata HTML, che è una stringa.
Ha un tag di paragrafo in esso, che si chiama qualche nuovo testo.
Quindi abbiamo questo codice HTML, è qualche nuovo testo, nel tag di paragrafo.
Ora vogliamo davvero per aggiungerlo alla pagina.
Impostare il tutto in modo che il codice HTML per questo paragrafo, questo titolo qui, è append ID.
Se selezioniamo append ID e quindi aggiungere ad essa
la variabile HTML ho appena creato,
si aggiungerà che HTML, alla fine, subito dopo questo tag di paragrafo.
Quindi, se lo facciamo - abbiamo scelto questo paragrafo,
e abbiamo chiamato la funzione append con la variabile HTML Ho appena aggiunto,
si aggiunge che il nuovo testo proprio lì sulla pagina.
Possiamo anche aggiungere in testa, il che significa che andrà prima, all'inizio di tale elemento.
Quindi c'è qualche nuovo testo all'inizio e dopo.
Posso andare avanti e aggiornare per liberarsi di questa roba che ho appena fatto.
Ma questo è un esempio di come è possibile utilizzare il anteposte e aggiunte metodi
di manipolare roba sulla pagina, aggiungere un po 'di HTML.
>> È inoltre possibile modificare le classi.
Ritorna in questo file di stile, ho creato questo per la vittoria di classe
che ha rosso il colore del testo, un certo colore di sfondo, e un'ombra di testo.
Sembra orribile, ma in realtà posso -
presente paragrafo corrisponde a ID di classe.
Quindi posso aggiungere la classe per la vittoria.
Posso eseguire questo nella console,
e che aggiungerà quella classe, e ora sembra orrendo, come previsto.
Il CSS viene applicato automaticamente alle classi che si -
se c'è CSS per una classe, essa viene automaticamente applicato
se si cambia la classe di un elemento.
Poi possiamo semplicemente rimuoverlo utilizzando classe rimozione.
Quindi, se si dispone di alcune classi predefinite come il rosso o evidenziato,
e poi si desidera applicare quelle ad elementi,
non dovete fare tutto il CSS styling ogni volta.
Si può solo aggiungere la classe di un elemento, e allora diventerà automaticamente -
verrà automaticamente cercare appropriato per quella classe.
Possiamo anche rimuovere le cose, così ho intenzione di selezionare tutti i div
sulla pagina e rimuoverli.
Che cosa è che andare a guardare come?
Sta andando a guardare come nulla, quindi non c'è davvero nulla di sinistra.
La mia presentazione è andato.
Posso rinfrescare e riportarlo, per fortuna,
perché è solo in esecuzione una volta,
ma questo è un esempio di rimuovere, se si vuole distruggere completamente un elemento fuori dalla pagina.
>> È anche possibile sovrascrivere, e ho intenzione di selezionare tutti i tag di paragrafo della pagina
e andare al loro interno e sostituire il testo che essi hanno in loro
con solo la parola "test".
Se si esegue questa operazione, si sostituisce ogni paragrafo della pagina con questo test.
Yep. Sono tutti sostituiti con i test.
Ecco, questo è un esempio di accesso al testo e sovrascriverlo.
È inoltre possibile recuperare informazioni, e questo è davvero cool per le caselle di input.
Se si dispone di una casella di input che la gente sta digitando roba in,
la gente sta digitando roba in esso,
qui selezioniamo l'ingresso, ogni tag input con un tipo di testo.
In questo caso, c'è solo una casella di input in tutta la presentazione,
quindi ci basta selezionare il primo, e poi chiamiamo la funzione val su di esso.
Che restituisce il valore, e per una casella di input,
il valore è solo quello che sembra essere al suo interno.
Quindi, se facciamo questo, semplicemente restituisce la roba stringa.
E se si parla di nuovo dopo aver scritto più roba, si trasforma in più roba.
Questo è un ottimo modo per accedere agli elementi di una casella di input, e quindi controllare,
è questo un indirizzo email valido, è presente una data valida, per esempio.
Si può solo recuperare roba istantaneamente come la gente sta digitando,
e quindi controllare se è valido, inviarlo a un server, fare quello che vuoi con esso.
Ed è così che si accede cosa c'è dentro quelle scatole.
>> È inoltre possibile modificare i CSS direttamente, così invece di aggiungere
una classe che ha alcune proprietà predefinite,
si può semplicemente aggiungere qualunque CSS da nulla.
Quindi cerchiamo di corpo scelto, che è l'intera presentazione,
e il colore è la proprietà che definisce il colore del testo è.
Se si cambia a rosso, tutto il testo nella pagina diventerà rosso.
Siamo in grado di fare qualcosa di simile sfondo di colore blu,
ci andiamo, è bellissimo.
Si può fare tutto quello che vuoi con questo.
Utilizzando la proprietà CSS, si può davvero modificare qualsiasi cosa come appare in qualsiasi momento.
Il passo successivo è effetti.
Gli effetti sono fondamentalmente la stessa cosa, come la modifica del CSS,
ma in realtà forniscono qualche animazione in più per esso.
Così, invece di limitarsi a mostrare o nascondere qualcosa o cambiando il colore,
si può effettivamente rendere più animato.
Ecco la documentazione, se si vuole dare un'occhiata alla vasta documentazione per esso.
Ma ho intenzione di coprire i principali.
Ci sono la proprietà Nascondi Mostra e.
Mostra / Nascondi ID corrisponda effettivamente tutto questo riquadro,
quindi se mi nascondo, sarà solo scomparire.
E posso mostrare di nuovo se voglio farlo tornare.
Ed è indietro. E 'in realtà non scompare,
Io in realtà non rimuoverlo dalla pagina, ho appena impostato la proprietà CSS di visibilità di nascosto
quindi non si può vedere più.
C'è anche far scorrere su e far scorrere verso il basso, che ti permette di avere questo effetto.
Scivola fino a scomparire, e dopo scompare
è possibile scorrere verso il basso per farlo tornare. Ed ora è tornato.
C'è anche questo effetto di dissolvenza, che - dissolvenza ID corrisponde a questo dialogo.
Se I fade fuori, allora sarà lentamente scomparire.
Posso anche svanire dentro, e tornerà.
È anche possibile fare dissolvenza a, che è specifico per la funzione di dissolvenza.
Si può avere dissolvenza a qualsiasi opacità specifica che si desidera.
Quindi, se si dissolvenza lentamente a 0,5, che diventerà la metà visibile.
Posso farlo andare a 0,1, e di nuovo a 1 per rendere di nuovo completamente visibile.
Questo è solo un altro animazione che si può fare.
>> Ci sono anche gli effetti ginocchiera.
Quindi ho intenzione di selezionare l'ID ginocchiera, che corrisponde a questo riquadro,
e su quel div è possibile chiamare a levetta, se è visibile diventerà invisibile,
se è invisibile, diventerà di nuovo visibile.
Così ho appena chiamato questa funzione attiva due volte, la prima era
la stessa cosa di pelle, la seconda chiamata era la stessa cosa di uno spettacolo.
E si può anche fare questo con una ginocchiera dissolvenza,
che fa la stessa cosa, solo che in realtà si affievolisce.
E stessa cosa con la slitta passare.
Ci sono effetti concatenati pure, il che significa
se si seleziona un elemento e basta chiamare un sacco di metodi di animazione su di esso,
se si voleva che fade out, quindi far scorrere verso il basso,
e poi nascondere e poi dissolvenza in entrata, che farà loro in una riga.
Così è scomparso, è tornato - per qualche motivo, la pelle non è accaduto.
Proviamo fuori. Sì, così si spense e poi scivolò via.
E ci sono un sacco di più. È possibile utilizzare la funzione animate
per creare le proprie animazioni, il che è piuttosto complesso,
ma vi fornisce estensibilità infinita.
È possibile effettuare qualsiasi tipo di animazione che si desidera.
È inoltre possibile utilizzare la fila per fila più animazioni in un momento.
Quindi, se volete qualcosa di volare in tutta la pagina,
diapositiva da destra verso il basso a sinistra, è possibile farlo,
e solo un mucchio di azioni che vanno uno dopo l'altro.
>> La prossima cosa che andremo a parlare sono gli eventi.
Eventi consentono - finora abbiamo appena digitando cose nella console
e questo è un modo per rendere questo accada,
ma su una pagina reale, non si sta andando ad essere in grado di
fare le cose tipo utente nella console.
Vuoi che le cose accadano automaticamente.
Per questo, è necessario utilizzare gli eventi che attivano su qualche determinato evento accada.
È possibile controllare la documentazione per i dettagli.
Quindi vediamo. Vogliamo mostrare o nascondere la casella,
ma ora questo pulsante non fa nulla perché non ho ancora la sua attuazione.
Sto per andare alla pagina HTML effettivo.
Ecco la presentazione. C'è un div per la diapositiva.
Ha la classe di diapositiva.
Ecco il testo. Ora, c'è questa casella e il pulsante di dialogo.
Come possiamo effettivamente fare questo sparire?
Prima di tutto, scriviamo una funzione che rende l'ID casella di scomparire.
Questa è la sintassi per il funtion, facciamo solo chiamano hideTheBox.
Non prende alcun argomento, perché non ci sono argomenti da prendere.
Siamo in grado di selezionare l'ID del box.
Quindi, utilizzando il jQuery selezionare, possiamo selezionare ID scatola,
e poi basta farla sparire.
Facciamo in modo che fade out.
Se abbiamo percorso questa funzione nella console effettiva,
potremmo definire questa funzione, possiamo chiamare hideTheBox, e funziona.
Ma vogliamo che accada quando viene effettivamente premuto il pulsante.
Per fare questo, dobbiamo usare un evento.
Per associare un evento di qualche pulsante specifico o qualche avvenimento azione,
dobbiamo selezionare l'elemento che l'evento si innescherà -
o che attiva l'evento, mi dispiace.
>> Quindi prima di tutto, cerchiamo di selezionare l'ID del pulsante di dialogo
perché quello è il tasto, e ora, per tale pulsante,
vogliamo creare un'animazione quando viene cliccato.
Quindi c'è questa funzione di clic.
Esso consente di associare un'altra funzione ad esso.
Questa funzione prende un'altra funzione come argomento
possiamo passare nella funzione hideTheBox,
e ogni volta che si fa clic su questo pulsante, che la funzione verrà eseguita automaticamente.
Quindi, questo funzionerà se vogliamo salvare questo, ti rinfresco,
e - un secondo, mi dispiace.
Consenti all'utente di risolvere questo molto velocemente.
Va bene. Ecco fatto. Così ora la scatola è scomparsa quando si clicca sul pulsante.
Possiamo anche cambiare questo a fadeToggle solo,
cambiarlo solo per nascondere o mostrare la scatola,
e questo funziona anche troppo, se ci si rinfresca.
Siamo in grado di nasconderlo, possiamo anche vedere, e che continueremo a lavorare.
Un'altra cosa che possiamo fare è, in realtà non abbiamo per definire questa funzione hideTheBox
prima di chiamare la funzione di click.
Così, invece di definire la funzione e chiamando hideTheBox,
stiamo solo andando a chiamarlo se si fa clic su questa cosa.
Così siamo in grado di definire in modo anonimo a qui,
che è una caratteristica che ha JavaScript.
È possibile definire una funzione, normalmente, diremmo funzione hideTheBox
con argomenti, ma, invece, possiamo solo dire funzionare senza argomenti,
avviare la parentesi graffa per definire la funzione,
chiudere quella parentesi graffa, e poi basta definire la funzione a qui,
entro la prima parentesi e l'ultimo parentesi
che corrispondono agli argomenti della funzione click.
Quindi siamo di passaggio in questa funzione, possiamo copiare questa riga di codice proprio qui,
e che farà la stessa cosa.
E ora noi non abbiamo questa funzione fadeTheBox casuale
che è seduto intorno per nessun motivo apparente.
La funzione è stata definita in forma anonima, non ha un nome.
Essa si limita ad eseguire quando si clicca sul pulsante di dialogo.
Così rinfrescante ancora una volta, ancora una volta, e si può vedere che funziona ancora.
Ed è così che si creano gli eventi.
>> Ci sono un sacco di diversi eventi che possiamo usare.
Ho intenzione di tornare a utilizzare la console a voi dimostrare quanto questi lavori.
Gli ID per ciascuna di esse corrispondono a ciascuna scatola.
Quindi questa scatola è fare clic su ID, questa è la chiave ID, e questo è l'ID del mouse.
Un'altra cosa è che c'è questa funzione azione, piuttosto che scrivendo tutto, ogni volta,
Io sono andato avanti e ha definito questa funzione azione qui.
Si fa la stessa cosa come la funzione hideTheBox.
Si ottiene questa casella e sia sfuma fuori o dissolvenze si poll
Ed è per questo che siamo in grado di usarlo qui.
Quindi, se si clicca su questo, fate clic ID, vogliamo rendere la casella di scomparire o ricomparire.
E 'la stessa cosa che il pulsante che abbiamo avuto nell'ultima diapositiva.
Ora, dopo che noi chiamiamo, possiamo cliccare su questo e la casella scomparirà,
quindi fare clic su di essa ancora e la scatola riapparirà.
Questo è abbastanza semplice. Fare doppio clic fa la stessa cosa,
tranne che richiede un doppio clic.
Quindi, se si fa clic su di esso una volta e fare clic su di essa ancora non succederà nulla,
ma se si fa doppio clic in modo rapido, ma sparirà.
Se si fa doppio clic di nuovo, tornerà.
Ecco, questo è piuttosto semplice.
Input da tastiera è un po 'strano, non credo che in realtà funziona in questo esempio
perché la chiave verso il basso, il tasto su e premere il tasto e le altre azioni chiave
attivare, non importa quale elemento si associa a.
Per esempio, anche se ho legato giù per il corpo o qualcos'altro completamente,
allora sarebbe ancora attivare non importa - non specifica.
Non devo essere cliccando su questo e premere un tasto per far scomparire qualsiasi cosa.
Sarebbe essere attivata indipendentemente da ciò che elemento sono attualmente;
Quindi questi in realtà non funzionano in questo esempio
perché non mi riconosce come entrare ingresso all'ingresso div tastiera.
>> Ma se si guardano le azioni del mouse,
il primo è hover, e si può fare un po 'di questo con i CSS.
Se si utilizzano i CSS, è possibile crearlo in modo che se si passa sopra qualcosa,
poi i suoi cambiamenti di stile.
Ma usando jQuery è possibile modificare gli stili di altre cose.
Così, per esempio, stiamo per chiamare all'azione se passaggio del mouse sopra questo div.
Questo significa che se passaggio del mouse sopra di esso, allora la casella scompare.
Se ci si allontana da esso, la scatola riapparirà.
Se chiamiamo questa e passate il mouse su di esso, il dialogo non scompare,
e, non appena ci si allontana, ritorna.
Se chiamiamo la funzione hover sul ID del mouse,
che corrisponde a questo dialogo, quindi se ci passate il mouse sulla casella,
quindi la casella sarà effettivamente scompare - è essere funky in questo momento, ma -
se ci allontaniamo da essa, riapparirà. In questo momento è indietro per qualche motivo.
Il mouse entra e le funzioni di movimento del mouse è in qualche modo simile, ma leggermente diverso.
Mouse dentro si attiva solo quando il mouse entra nel box, come previsto.
Quindi, se ci si sposta in esso, esso sparirà.
Ma non riapparirà quando ci si allontana, si dovrà tornare su di esso per farlo tornare.
C'è anche la funzione di spostamento del mouse, che attiverà
ogni volta che il mouse è ancora presente nella scatola.
Quindi sarà solo andare avanti, che va e viene.
Ed è effettivamente registrazione - sembra che è solo la dissolvenza in entrata e in uscita,
ma in realtà è l'accesso molto più azioni rispetto a questo,
così quando ci si allontana sarà solo andare avanti perché è registrato come un migliaio di loro.
Forse non a mille. Forse cinque.
Si registra più di questo.
Il punto è che tutte le azioni del mouse, ci sono un sacco di loro.
Si può leggere su gli altri, ma sono tutti leggermente diversi,
e si può scegliere quello che serve
per qualsiasi scopo specifico che stai cercando di fare.
>> La prossima cosa che ho intenzione di parlare è AJAX.
AJAX, so che noi non copriamo JavaScript tanto profondità di quest'anno,
quindi sono solo andando a parlare di AJAX, in generale, per un minuto.
AJAX è l'acronimo di Asynchronous JavaScript and XML.
E 'fondamentalmente, per esempio, quando sei su Facebook e ti spinge una notifica,
questo perché AJAX è in esecuzione sul vostro browser web.
Ogni paio di secondi il browser web in realtà è
andando a server di Facebook, chiedendo loro, hai niente di nuovo per me,
e poi si ritorna a voi.
Ciò consente di inviare richieste a un server
senza la necessità di caricare la pagina.
Quindi, normalmente, se si sta solo usando PHP e un database,
si deve aggiornare la pagina prima di poter ottenere nuove informazioni dal server.
Ma usando AJAX, si può tirare per quella nuova informazione costante,
o tirare per quando si fa clic su un pulsante o qualcosa di simile.
Quindi questo ci permette di inviare richieste senza ricaricare la pagina,
e siamo in grado di utilizzare sia le richieste GET o POST.
>> Richieste GET sono, per esempio, se a Google.com in English
e fare q = prova. Questo è dare loro una prova di query.
E questa è una richiesta GET perché sta passando in quei parametri nella URL stesso.
Una richiesta POST è come se li sta inviando via posta.
E 'come se lo metti in una lettera e spedite fuori a loro,
ma in realtà non vedono il contenuto. Non sono visibili nella URL.
Non è possibile digitare direttamente in, devi inviarlo quasi di nascosto.
E 'in un post.
Ma usando jQuery, è possibile fare richieste GET e POST
molto più facilmente di quanto si possa normalmente usando solo Javascript pianura.
È possibile eseguire query utilizzando le API richieste GET, e si può anche verificare la presenza di informazioni di login.
Nella pagina successiva, ho creato questa, che chiede: "Cosa c'è per pranzo?"
utilizzando l'Harvard cibo API, quindi cerchiamo di tirare che fino.
Questo è solo un esempio di come è possibile utilizzare jQuery per fare una richiesta GET ad una API
e ottenere informazioni di ritorno da esso.
Quindi vogliamo vedere il menu per oggi,
e vogliamo vedere cosa c'è per pranzo.
Ecco l'URL per creare una richiesta GET in jQuery.
si utilizza il $. ottenere la funzione.
Il primo argomento è l'URL, in modo esattamente cosa si sta interrogando.
Poi il prossimo argomento è una funzione che viene eseguita quando la richiesta GET è completa.
Quindi si invia via qualche richiesta al server, aspettare che torni.
Quando lo fa venire indietro, si sta andando a prendere un po 'di azione con i dati che sono di ritorno dal server.
Andiamo avanti e codice di questo.
Io non lo ha codificato questo sia, di proposito.
Ecco il TODO. Prima di tutto, cerchiamo di utilizzare l'associazione evento
in modo che quando si preme questo tasto, che trasmettiamo fuori una richiesta GET.
E quando quella richiesta GET torna con alcuni dati,
stiamo andando a scrivere in questo pasto informazioni ID div.
Prima di tutto, cerchiamo di selezionare il pulsante ID cibo.
Quando viene cliccato, noi vogliamo che faccia qualcosa.
Diciamo solo fanno un fuction anonima, come prima.
Può avvolgere quelle parentesi graffe,
e quando si preme questo tasto, vogliamo inviare una richiesta GET
per verificare cosa c'è per pranzo.
Per fare questo, possiamo semplicemente digitare $. Ottenere.
Questa è una funzione jQuery, con il simbolo del dollaro.
Ci vogliono un paio di argomenti. Il primo è l'URL,
la seconda è la funzione di callback, la funzione che si chiama
quando tale richiesta restituisce effettivamente.
Diciamo solo costruire l'URL prima.
Siamo in grado di ottenere da l'API che David ha scritto su.
Andando qui, possiamo vedere che è food.cs50.net/api/1.3/menus,
e poi basta passare i nomi dei parametri che si desidera.
Quindi il parametro 1 è il valore 1.
Sembra data standard, Data di inizio, il default è oggi
se non si inserisce nulla, e data anche defaults fine
a oggi, se non si inserisce nulla.
Questo è quello che vogliamo. Vogliamo ottenere solo le informazioni per oggi.
>> Vogliamo che il formato sia in JSON.
Questo è solo arbitrario, è possibile utilizzare qualsiasi forma che si desidera.
È possibile utilizzare CSV, ma JSON è JavaScript Object Notation.
E 'molto facile per il supporto JavaScript per capire che cosa significa,
e siamo in grado di stamparlo più facilmente in questo modo.
Quindi cerchiamo di richiedere in JSON, e andiamo richiesta pranzo.
Così pasto = pranzo. Basta scrivere su tale URL, torniamo qui.
Ci sono i menu. Il primo parametro è uscita = JSON
perché è quello che vogliamo, e di separare i parametri con una 'e'.
Il secondo parametro è - non ricordo.
Pasto. E vogliamo pasto = pranzo.
È possibile verificare questo URL digitandolo nel browser e andare a esso.
Essa vi darà qualche uscita. E 'solo un mucchio di roba che per il pranzo.
E 'in questo formato brutto. Vogliamo stamparlo sulla nostra pagina in un formato migliore.
Così l'URL è corretto, ora abbiamo solo bisogno di scrivere una funzione
di richiamare quando la richiesta è riuscita.
Questa funzione avrà effettivamente un argomento. Sarà dati.
Il dato è quello che torna dalla richiesta GET dopo la richiesta GET è fatto.
Possiamo fare le parentesi graffe, in qui si scrive la funzione anonima
che esegue, utilizzando i dati quando otteniamo le informazioni di nuovo.
Così i dati, quando abbiamo digitato in questo URL,
questo è ciò che i dati di andare a guardare come. Sta andando essere questa stringa enorme.
Ma la cosa buona è, JavaScript può analizzarlo utilizzando la funzione JSON.parse.
Quindi cerchiamo di creare una nuova variabile chiamata dati parse.
E i dati parse è un array di oggetti.
Ogni oggetto contiene informazioni quali - beh, diamo uno sguardo.
Ha una data, un pasto, categoria, ricetta, tutta questa altra roba.
Quindi cerchiamo di Stampa il nome di ogni uno.
Facciamo scorrere l'intera serie di cose che torniamo da esso,
e basta stampare ognuno - stampare il nome di ciascuno.
Si tratta di un ciclo for.
>> JavaScript ha questa sintassi utile in cui è possibile creare una variabile e un ciclo su un array,
e var i è solo l'iteratore, così invece di avere a che fare var i = 0,
mi è stato inferiore alla lunghezza, i + +, si può solo fare var i nei dati analizzati.
In questo esempio, dati analizzati (i) corrisponderanno al elemento corrente
della matrice, l'oggetto effettivo.
E noi vogliamo ottenere il nome di fuori di esso.
Quindi cerchiamo di fare solo nome.
E l'ultima cosa è, stiamo per avere di nuovo un po 'di jQuery.
In realtà aggiungerlo al div, questa info pasto div che è attualmente vuoto.
Quindi cerchiamo di selezionare quello.
Useremo jQuery e selezionare Informazioni pasto ID div o informazioni pasto ID, mi dispiace.
Vogliamo aggiungere a questo.
Se abbiamo fatto test, per esempio, sarebbe solo sovrascrivere ogni volta.
Quindi possiamo solo aggiungere questo.
L'elemento corrente nella matrice, si otterrà il nome fuori di esso,
e noi aggiungiamo alla fine del pasto informazioni ID div.
E poi basta per farlo sembrare più pulito,
faremo anche aggiungere una interruzione di riga, quindi non è tutto su una riga.
Quindi, se tutto va bene, che dovrebbe essere buona per -
prima di tutto, quando viene cliccato questo pulsante,
invierà fuori una richiesta GET a questo URL.
Quando i dati torna da esso, sarà analizzarlo,
trasformarlo in JSON, ciclo su tutta la matrice che rappresenta i dati,
e poi aggiungere il nome e una interruzione di linea
per ogni linea in questa info pasto ID che in precedenza era vuota.
Quindi, tornando a questa pagina, aggiorneremo,
clic, scoprire - non funziona. Questo è un peccato.
Ed è qui che entra in gioco il debug
Index.html, linea 1.
È interessante.
Bene, bene, piuttosto che spendere tempo a fare questo, sto solo andando a
tirare su il file che ho fatto, che è la versione completa.
Non sono sicuro di quale sia la differenza, ma possiamo solo aprire questo posto.
E andiamo al AJAX, e questo dovrebbe funzionare correttamente.
Questo è ciò che è stato per il pranzo di oggi,
in nessun ordine particolare, con le virgolette intorno ad esso, quindi non è la più bella.
Ma, ovviamente, se si stesse facendo questo per un progetto definitivo,
si potrebbe renderla migliore.
Ma questo è solo un semplice esempio di come si fa la richiesta GET.
E se guardiamo il codice vero e proprio, sto cercando di indovinare, io sono abbastanza sicuro
è ancora praticamente la stessa.
Ah, ho dimenticato di convertirlo in una stringa, il gioco è fatto.
No, ancora non funziona. Indipendentemente da ciò, ecco il codice vero e proprio completato
per ciò che questo dovrebbe essere simile,
e lo fa la stessa cosa di quello che ho appena implementato.
Quando si fa clic sul pulsante, utilizza GET JSON per analizzare automaticamente i dati.
Prende i dati di ritorno da esso e scorre l'intera matrice
e stampa il - qualunque cosa sia per il pranzo di oggi, il nome di essa,
e aggiunge un'interruzione di riga dopo ogni riga.
Ecco come si utilizza la funzione GET.
>> È inoltre possibile utilizzare il POST, che non ho avuto tempo
di scrivere un esempio per questo, ma siamo in grado di guardare la documentazione.
Se guardate jquery.post,
si può vedere che è quasi la stessa cosa.
Si dispone di un URL, ma invece di passare parametri utilizzando -
semplicemente inserendole nella stringa per l'URL stesso,
devi passare a questa variabile di dati
che è fondamentalmente un array, un dizionario che i parametri di mappe per i valori.
Si passa che in, e che li manda in uso di un post.
E una volta che hai questo, allora si può avere una funzione di successo
che viene eseguito quando i dati provengono indietro.
In caso contrario, è esattamente lo stesso. Quindi, utilizzando POST,
si potrebbe desiderare di utilizzare il POST, ad esempio, se si dispone di un modulo di ingresso
si lascia che le persone le password di ingresso in esso, e inviare le password off
allo script di back-end, per controllare nel database se tale utente è valido o meno.
Si può fare tutto utilizzando jQuery, invece di dover aggiornare la pagina a tutti.
È così che ho implementato nel blog che vi ho mostrato in precedenza.
Se andiamo al portale fine e log out, log out,
Esci non funziona.
Beh, vorrei solo aprirlo in una nuova finestra.
Qui c'è una password, e mi stava andando a digitare qualcosa di casuale.
Non funziona, ma si può vedere che non abbiamo fatto
effettivamente essere necessario aggiornare la pagina a tutti.
Il codice, se si vuole guardare,
è tutto disponibile qui.
Quindi, il codice che ho scritto l'anno scorso qualche volta.
Come potete vedere qui, stiamo inviando una richiesta POST.
Ho un file chiamato login.php nel back-end,
che controlla se la password è valida.
I parametri passiamo sono la password, mappato
l'ingresso che è in questa casella di ingresso attualmente.
E quando i dati ritorna, controlliamo.
Se i dati sono false, allora diciamo password non corretta, scorrere verso il basso,
e basta farla sparire dopo.
In caso contrario, si carica la pagina di amministrazione.
E questo era tutto fatto usando JSON.
In questo numero di righe di codice, si può solo trasmettere i dati per il back-end,
verificare se è corretto, verificare se si è collegati correttamente,
ed effettivamente rispondere ad essa, reindirizzando la persona alla pagina corretta
o non permettendo loro di accedere e dicendo loro che avevano una password non corretta.
Ecco, questo è un esempio di come è possibile utilizzare POST jQuery
per inviare una richiesta POST al tuo back-end,
verificare se qualcuno ha effettuato l'accesso correttamente.
>> Va bene, così che è tutti gli esempi che ho avuto, e tutta la roba che volevo coprire.
Queste sono le principali cose che jQuery permette di fare:
selezionare gli elementi, modificarli tramite la manipolazione DOM,
è possibile aggiungere effetti, attivare le cose su certi eventi,
e anche fare richieste AJAX molto senza problemi e con facilità.
Quindi grazie per essere venuti o guardando,
e se avete domande, fammelo sapere. Sì?
[Studente] Torna quando hai mostrato, si ebbe JSON dopo la richiesta POST tra virgolette,
e mi chiedevo cosa che ha fatto.
>> Sì, lo vedo. Il problema era che, nell'esempio ho appena mostrato,
vi era la parola JSON tra virgolette attorno al -
Mi limiterò a tirarlo su di nuovo - in giro per la funzione POST.
Sto solo tirando fino a mostrare.
Quindi, ecco la richiesta POST, e c'è questo JSON tra virgolette.
Che definisce proprio quello che ci aspettiamo l'uscita di essere.
Quindi, se passiamo in JSON come il tipo di dati previsto,
non è un requisito, ma se passiamo in,
quindi i dati vengono automaticamente analizzati come JSON.
Quindi noi non dobbiamo chiamare la funzione parse JSON su di esso,
sarà solo accadere automaticamente.
E se si dà un'occhiata alla documentazione per il POST,
c'è questo tipo di variabile di dati, il tipo dei dati attesi dal server.
Il valore predefinito è un'ipotesi intelligente che può essere sbagliato,
in modo da poter lasciare in bianco, ma è solo il tipo di dati
nella codifica che si sta utilizzando, se si tratta di JSON o XML o qualcosa d'altro.
>> Tutte le altre domande?
D'accordo. Se avete altre domande, non esitate a scrivermi
a vshekhawat@college.harvard.edu,
e le slide e il codice dovrebbe essere disponibile online molto presto.
Buona fortuna con i progetti finali, spero si utilizza jQuery.
[CS50.TV]