Va bene >>.
Quindi, JavaScript.
Quasi tutti in questa stanza probabilmente ha un certo grado
di comfort con se le era via del ritorno quando in SC50
o è stato personale progetti web o anche
se hai fatto un po 'di con la scorsa progetto base PHP,
ma per la maggior parte, molti di voi,
anche se avete qualche conforto
con JavaScript forse non sono state prese
per scontato come l' opere di lingua e ciò che accade
sul sotto il cofano e quello che stiamo andando a provare
per fare oggi è buccia indietro alcuni dei livelli tecnici
di ciò che JavaScript è, come si differenzia da un linguaggio
come PHP, come può essere utilizzati non solo lato client
ma anche lato server e quindi concentrarsi molto specificamente
in questo quadro, non notare JS che è essenzialmente una fase di esecuzione,
un programma con il quale si in grado di eseguire codice JavaScript,
lato server e sta diventando ordinamento sempre più popolare
di sulla stessa statura questa giorni probabilmente Ruby e PHP
e Python e vedrete
che ha qualche bella potenti funzionalità a titolo di alcune
della lingua incorporata costrutti.
Ma prima, alcuni dei facile roba solo per ricordare
di come funziona questo linguaggio e se avete problemi a vedere qualsiasi
di questo, basta gridare fuori e ci adegueremo.
Così, uno come in PHP non c'è nessuna nozione di funzione principale,
basta iniziare a scrivere codice
e si può Perciò interpretarlo cima a fondo.
Nel contesto di un browser
o in parte qualcosa di server vedremo alcuni esempi
in un po '.
Condizioni, sintatticamente equivalente a PHP e C,
C + + e altri linguaggi così giusto per dare un senso
di come potremmo strutturarlo,
c'è solo un canonico condizione.
Espressioni booleane, esattamente lo stesso sintatticamente come avete visto
in quegli stessi altri lingue, sia per oring
e per finire le cose insieme.
JavaScript ha interruttori, molto simile a PHP e altri di fare
e non si è limitati, come in C per primitive integrali
come caratteri e interi può effettivamente fare altri tipi di valori.
Loops. Così, questo è esattamente lo stesso
e probabilmente una dozzina di lingue, cicli while, do while
e poi questo trucco qui.
Quindi, questa è una sorta di noto come enumerazione veloce
ed è un modo molto intelligente di come fare in PHP
per ogni FU come bar si può allo stesso modo,
in un oggetto JavaScript, dove oggetto è il nome
della variabile qui, per esempio, var i in oggetto e ad ogni iterazione
di questo ciclo, i è sta per essere uno
delle chiavi da quell'oggetto.
Quindi, se avete un oggetto per un studente, e uno studente ha un ID
e un nome e una casa, iterativo io prenderò
del valore di ID e nome e casa e si può Perciò indice
in oggetto come se fosse un array usando parentesi quadra
notazione per ottenere il valore della ID della chiave o il nome
o casa e così via.
E contrariamente al comune assunzione, gli oggetti JavaScript,
proprietà non sono necessariamente garantita
nello stesso ordine, questo è anche true per PHP in modo da non assumere
che le cose rimarranno nello stesso ordine
che si mette quelle tasto coppie di valori in un oggetto.
Come su array?
Ci sono un paio di modi a scriverlo sintatticamente
ma questa è probabilmente la più comune ora usando solo quadrato
notazione staffa.
Quindi, questa è una variabile di chiamare i numeri contenenti matrice
di sei numeri interi lì, ecco una semplice stringa
e notare ciò che è assente da questi esempi,
ciò che è JavaScript a quanto pare manca.
Già. Quindi, non c'è alcuna nozione di battitura, di certo non
in questo contesto qui, ma questa è davvero una stringa.
Quindi, JavaScript ha tipi e che era in effetti un array
che è essa stessa un tipo e ciascuno degli elementi
in quella serie erano di tipo numero come JavaScript li chiama.
Quindi, è un debolmente tipizzato lingua e vedremo
che JavaScript come PHP ha un operatore identità
e altri meccanismi per effettivamente controllare che tipo
di una variabile è sia per il controllo degli errori
e per altre applicazioni.
Ed ecco un oggetto campione contenente solo un ID e un nome.
E ora, notiamo che siamo usando la notazione parentesi graffe,
il rientro e il bianco lo spazio è una sorta di insignificante
e questo dichiara un variabile il cui nome è Rob
e il cui ID è 1 e il tipo di data è qui il nostro numero
e la stringa rispettivamente.
E allora questo è qualcosa di leggermente diverso
se hai mai fatto nulla con l'Ajax in questi giorni?
Probabilmente avete utilizzato un oggetto come questo
ma ciò che vale la pena notare qui?
Che cosa è sintatticamente mai così diverso, solo un paio
di cose tra questo esempio che è certamente più piccolo
e questo esempio più.
Quindi, prima laico di termine, che cosa è questo?
Qual è il tipo di personale diresti?
OK, è un array, è un array di che cosa?
>> Objects.
>> OK, è un array di oggetti.
E ora, concentrarsi su uno solo - uno di questi oggetti,
cosa c'è di diverso tra questo e questo?
>> Le chiavi sono stringhe.
>> Già. Così, la le chiavi sono stringhe,
e le chiavi sono in realtà stringhe in entrambi i casi
e questo è una specie di idiota
a mio parere design storico decisione ogni volta che si utilizza
JSON, JavaScript Object Notation,
che è essenzialmente un formato di trasporto
per l'invio dei dati tipicamente attraverso la rete
tra client e server, è necessario ricordare
che questo non è effettivamente valido JSON e questo è uno
di questi FYIs meno che mai sbattere la testa contro il muro
per diversi minuti senza una buona motivo, non è valido JSON
poiché i tasti sono in realtà non citato.
JSON richiede idiota che i tasti di essere citati non solo,
ma che siano doppiamente citati, apici non sono sufficienti.
Così, piccola cosa stupida e più di un fatto di divertimento
per scopi di oggi, ma questa troppo sarebbe valido JavaScript
non è solo - l' contrario non è vero.
Bene.
Quindi, vedremo un sacco più di questo.
Bene.
Quindi, questo è JavaScript sintatticamente probabilmente abbastanza
familiare, qualcuno di voi che hanno mai usato JavaScript prima
non è un salto enorme da PHP o la maggior parte qualsiasi linguaggio procedurale
che si potrebbe avere utilizzato.
Così, oggi ci concentreremo su aspetti interessanti
di JavaScript particolarmente nel contesto di nessun JS
ma non esclusivamente perché fino ad ora probabilmente avete,
se è stato utilizzato Javascript, utilizzato all'interno di un browser.
Quindi, nessun JS è un ambiente poi in un po 'che sta accadendo
per permetterci di accedere JavaScript client code -
lato server, ma in primo luogo, diamo uno sguardo
a qualcosa che è un poco più lato client.
Così, sono andato in e questo è collegati sul sito web corsi,
se si vuole giocare insieme, ci sono due sottodirectory
in Zip di oggi di chiamata borchie di origine zip sul sito
e questi sono solo alcuni esempi che ricordano
di cose che potreste aver visto prima e io sorta di essi costruiti
dal più semplice a leggermente più complicato da stuzzicare
alcune delle caratteristiche di JavaScript.
Quindi, andiamo avanti e prendere uno sguardo per esempio a questo.
Così, purtroppo il tag batter era ucciso diversi anni fa
come il modo in cui hanno avuto più bella e più bella
e il tag lampeggio era letteralmente parentesi aperta lampeggia close staffa
ed è una sorta di no è più con noi.
Ma possiamo ancora risorgere questa idea di un tag solo tipo
di pensarci logicamente, come si fa
di fare qualcosa di simile questo lampeggia intuitivamente?
Supponendo che si conosce un po ' po 'di Javascript e CSS o
a questo punto, è OK se non lo fai.
>> Impostare un time out e nascondere poi dopo io Taggalo
fuori e mostrare di nuovo.
>> Si, perfetto.
Questo è tipo di programmazione 101,
come si dovrebbe raggiungere un effetto visivo come questo?
Beh, in qualche modo devono mostrare qualcosa
e poi nascondere qualcosa, spettacolo qualcosa, nasconde qualcosa
e, come propone Jonathan utilizzando una sorta di time out,
un qualche tipo di programma che si può fare ripetutamente senza bisogno
utilizzare un ciclo o qualcosa di simile.
Quindi, lasciami andare in blink-0.html
e fammi rifuggo il carattere un po '
in modo che più di questo si adatta.
E diamo uno sguardo a quello che sta succedendo qui.
Quindi, prima di tutto, notare che il corpo
di questa pagina è super semplice, all'interno del corpo
della pagina è solo un div.
Ho arbitrariamente dato un ID di saluto
e che potrebbe essere qualsiasi cosa fintanto che è unico
e poi ho solo un po ' semplice testo, ciao mondo.
Quindi, se io adesso scorrere verso l'alto, notare alcuni styling birichino.
Allora, io dico, affilato di saluto, che come sapete
in CSS significa semplicemente unico identificare l'elemento
con un'idea di saluto,
dimensione carattere sta arbitrariamente essere questo, il margine e il testo align.
Così, poco interessante dettagli estetici
per centrare circa il testo.
Così, la parte interessante è nello script tag qui
che mi capita di mettere dentro della testa della pagina.
Quindi, we'll - si può fare questo in qualsiasi numero di modi
e vedremo alcuni iterazioni di questo stesso programma
ma partiamo dall'alto.
Così, ho dichiarato un funzione chiamata lampeggio
ea quanto pare utilizza questo incorporato metodo DOM chiamato
GetElementById che è forse uno dei metodi più potenti
che si ottiene dalla scatola con JavaScript in cerca di
"Saluto" non deve essere doppie virgolette come se fosse
in HTML è o va bene così a lungo
come sei stilisticamente coerente in questi giorni oserei dire
molte persone usano Java, singoli apici in JavaScript,
doppie virgolette in HTML, ma in realtà non importa
fintanto che sei coerente.
Quindi, qui se non hai familiarità, si può effettivamente accedere
con JavaScript CSS immobili in elementi.
Così, notato che ho dichiarata una variabile denominata div
e immagazzinato all'interno di tale variabile,
un riferimento a qualsiasi tale elemento DOM è.
Quindi, se si ripensa a CS50 o ogni classe in cui si pensava
su strutture ad albero e DOM, Document Object Model,
questo è solo un punto di riferimento a un nodo in un albero,
che rappresenta questa pagina
e se div.style.visibility proprietà è uguale, uguale, uguale,
nascosto, poi ho vuole una ginocchiera che
come Jonathan proposto altrimenti voglio
per passare sopra alle nascosta.
Ora, come nel fianco, perché la tripla uguale lì?
O che cosa è che rispetto doppio uguale?
>> Equivalente Strict.
>> Spiacenti.
>> Equivalente Strict.
Quindi, si tratta di operatori di identità
dove per non stai controllando solo il valore della variabile
da pari a pari, pari senso ma anche il tipo di esso.
Dunque, anche se noi non abbiamo specificate fino a questo punto tutti i dati
tipi per tutte le variabili in questo o qualsiasi diapositive,
c'è un tipo associato con quella stringa nascosta
con quel valore, nascosto e cioè di stringa naturalmente.
Quindi, in questo caso, in realtà non importa
perché non c'è modo che stiamo andando a confondere una stringa
di "nascosto" con qualche altro valore
ma questo è spesso un buon abitudine direi di ottenere
ad utilizzare l'uguale, uguale,
segno di uguale è generalmente una buona cosa.
Si renderà il vostro codice più robusta sia in PHP, ma
e in JavaScript perché si incorrerà
occasionalmente in casi particolari dove il valore potrebbe essere zero
che stai controllando e zero può essere confusa con la falsa
o potrebbe essere e come in PHP,
Javascript troppo può avere più Valori falsamente dove per zero
e falso e null e undefined può tutto risolvere implicitamente
false.
Ma se siete veramente voglia per verificare un valore particolare
come zero, il numero, o falsa l'operatore booleano allora avete
Per utilizzare questo operatore identità.
Quindi, potrebbe succedere per arrivare in ogni caso, anche se qui,
è una specie di insignificante perché sappiamo che stiamo controllando
per un valore di stringa ed è non ho intenzione di essere altro.
Quindi, ecco la magia, allora, se io scorrere verso il basso a questa linea qui,
a quanto pare, costruita nell'oggetto finestra
e questa è una caratteristica di un browser è possibile accedere
per questo super globale oggetto chiamato Window,
all'interno di distante alcune funzionalità,
se pezzo di cui è impostato l'intervallo
e ci vuole apparentemente che tipo di argomenti?
Già.
>> Chiamata di funzione e un tempo.
Buona >>. Quindi, una funzione chiamare e un tempo
e così un particolare riferimento a una funzione,
un puntatore a una funzione in un certo senso
e questa è la funzione che sta andando
per avere eseguito ogni numero di millisecondi e in questo caso,
è ogni 500 millisecondi.
Quindi, è un modo di indurre efficacemente e loop infinito
senza l'utilizzo di iterazione, ma invece raccontare JavaScript
al motore all'interno del browser
per fare questo ogni 500 millisecondi o è vicino
a 500 millisecondi come si può,
si scopre che sotto la cappa,
c'è quello che si chiama un evento loop e ci torneremo a questo
nel contesto di nodo JS che appena costantemente genere
di stare lì, spinning, attesa di lavoro da fare
e appena realizzare,
500 millisecondi sono passati lampeggio andranno chiamato di nuovo
e ancora e ancora è fianco di qualsiasi altra opera
che deve ottenere fatto.
Allora, che cosa possiamo migliorare qui?
Beh, lasciatemi aprire up blink-1.html
e dimostrare il blink-1.html
esteticamente perfettamente identico.
Allora, che cosa potremmo migliorare qui?
Beh, notare che era una sorta di inutile
definire una funzione denominata Blink perché quanti
in quanti posti ho fatto chiamare la funzione lampeggio?
>> Solo una volta.
>> Quindi, uno.
Quindi, non era male, in Infatti è probabilmente abbastanza
dritto in avanti.
Ho definito una funzione di lampeggio, io chiamare una funzione di lampeggio in via
di questo parametro, ma tecnicamente,
non c'era motivo di e un paradigma comune
in JavaScript è effettivamente fare uso di funzioni lambda
come si può ricordare da 51 o funzioni anonime
dove se non hai bisogno un nome per una funzione,
se si sta solo chiamando certamente in un unico luogo,
perché preoccuparsi ingombrare il codice, ingombrare la mente dei programmatori
e il tuo spazio nome davvero con i simboli
che non si ha realmente hanno bisogno di preoccuparsi.
E così, in questa versione qui,
Noto che sto chiamando window.setInterval direttamente
al top della mia tag script allora sto passando
in una funzione senza nome che non accetta argomenti
e questo è perfettamente fine e poi il corpo
di tale funzione risulta è identico a quello che era prima
e l'unico sintattica differenza ora è
qui accanto alla 500.
Sto chiudendo il corpo della funzione
e poi sto dicendo eseguire tale codice precedente,
ogni 500 millisecondi.
Cambiamento così, molto marginale
ma un passo verso ciò che è probabilmente un più elegante
attuazione del presente.
Quindi, prendiamo questo intensificare ulteriormente se io ora vado
in un batter due, ti vedi una libreria comune,
il cui effetto sta
per essere completamente irrilevante esteticamente ma se andiamo
in versione a due qui, avviso che in cima alla mia testa,
Ho incluso il ultima versione di jQuery.
E poi, qui, Ho appena pulito
il codice un po ', è Non sarà un mondo di divertimento
di continuare ad utilizzare funzioni DOM native
e una sorta di cruda JavaScript.
In realtà, JQuery, come si può sapere è diventato così popolare
che la maggior parte delle persone semplicemente conflitto jQuery con JavaScript
ma in realtà solo una cena utile libreria scritta
da un tizio di nome John Dimissioni e poiché altri
che hanno appena libera sacco di cose noiose
in JavaScript più facile e più concisa.
Quindi, in questo caso ecco cosa sta succedendo?
Così, ho questo aspetto della un segno di dollaro, più su quello
in un momento, poi questo è un selettore CSS.
Quindi, è molto simile a lo spirito di quello che ho fatto prima,
ma questa volta, sono letteralmente utilizzando il tag hash
per indicare un unico identificatore di chiamata di auguri
e poi apparentemente . Css è un metodo incorporato
per qualunque oggetto è che ho appena creato
e sto controllando il valore della chiave visibilità.
E se il valore di tale chiave uguale, uguale, uguale, nascosto,
poi ho intenzione di passare e Ho intenzione di passare questa volta
utilizzando lo stesso metodo che a quanto pare è sovraccarico
nel senso che ha due firme diverse,
uno con un argomento e uno con due argomenti,
il secondo dei quali è il setter,
il primo dei quali è un getter per così dire.
E se curioso e se vuoi mai realmente guardato questo,
se andiamo a jquery.css spera il colpo top è davvero questo
e si può vedere un altro spiegazione formale
che usiamo solo questo, . Css con il nome della proprietà
e poi il setter è dot CSS
con un nome di proprietà e un valore.
Quindi, marginalmente più pulito, ma notare il tipo di modello qui
con ogni iterazione di questo codice,
stiamo sorta di renderla più stretta e più stretto
e ci dicono progetti migliori
dal momento che stiamo usando qualcuno il codice di un altro che è eliminato
alcune delle complessità.
Così, ora facciamo questo ancora più semplice.
E infatti, se tolgo tutto il citazioni si vedrà solo tutto il
commentare vedrete come semplice, questo ha ottenuto.
L'unica differenza qui naturalmente è
che sto usando un interruttore metodo che viene costruito anche
in per jQuery e questo è solo
perché qualcun altro scritto il codice
che in realtà alterna l'impostazione di visibilità
di qualsiasi elemento DOM che si invia.
Quindi, sempre meglio.
E così, questo è un modello,
anche se questa è una cena esempio semplice e liste
di effetto netto stupido che è un pezzo lampeggiante di testo,
è quel tipo di pensiero processo che si dovrebbe pensare -
pensare di non necessariamente la prima
scrittura passivo qualcosa per il prossimo progetto
ma certamente, come si scorre con il proprio consulente o con me
e le vostre riunioni di squadra o si basta rivedere il codice compagni di squadra
merito di serraggio cose, giusto?
Dopo tutto, sono meno -
un minor numero di righe di codice in ultima analisi, ha
in teoria il minor numero di bug voi sono suscettibili di essere invitante
perché ci sono semplicemente meno codice a pasticciare con.
Bene.
Così, un paio di take-away.
Funzioni lambda, funzioni anonime,
molti dei quali ha visto prima
e poi anche solo di serraggio le cose con una biblioteca
come jQuery in questo caso particolare.
Bene.
Tutte le domande?
Facciamo un altro aspetto lato client qui,
in forma di zero abbiamo questo effetto netto.
Forma super semplice e apparentemente se provo a cliccare registrarsi qui,
Inizialmente mi dice sei registrati, beh, non proprio.
Beh, perché?
Bene, ecco forma-0.html pochissimo codice,
senza JavaScript qualunque e è completamente una sorta falso
di forma perché l'azione valore è registered.html
il che significa che non importa quale Scrivo in questa forma,
dove sta andando essere inviato sul server?
Già. Quindi, per registered.html che è chiaramente un file HTML
che è pertanto statico il file che non dispone di mezzi
di prendere l'input dell'utente assumendo non c'è nessun codice JavaScript
incorporato in esso che è guardando nell'URL
quindi questo è completamente un NOOP e che nulla accadrà
con un presentati dati, ma si può vedere la struttura
di un abbastanza semplice modulo HTML5
che ha un paio di password alcuni tipi di input.
Quindi, cerchiamo di realtà ora aggiungere un po 'il controllo degli errori
e vedere come potremmo migliorare questa.
Così, qui è una sorta di poveri modo dell'uomo di attuazione del presente
ed è una sorta di brutto pezzo di codice.
Quindi, prima di lasciare scorrere fino al fondo
per vedere che cosa è la stessa e cosa c'è di diverso.
L'unica cosa diversa ora tra questo
e la versione precedente è che io ho dato la forma e ID
di "registrazione" potrebbe sono stato tutto quello che voglio
ma la sua vuole essere univocamente identificabili anche che non è
strettamente necessario perché se un La pagina ha una sola forma sicuramente mi
potrebbe trovare con uno dei i metodi di selezione di jQuery.
Ma in questo modo fa solo più deterministico.
Quindi, se vado adesso a mio script tag, notare quanto segue,
equals window.onload una funzione anonima.
Allora, che cosa sta facendo questo?
Quindi, si può ricordare che nel programmazione client-side -
JavaScript pagine HTML piuttosto sono vari eventi associati
con gli elementi, facendo clic e la presentazione e la messa a fuoco
e la sfocatura e di altri come eventi che potrebbero accadere
come utente tipicamente interagisce con la pagina,
window.onload fa quello che dice.
Sul finestre intero carico
così una volta che tutte le immagini sono state una volta scaricati tutti i file sono
stato scaricato e una volta la pagina è stata caricata,
eseguire il seguente codice, e notare se posso passare a fondo
di questo metodo, notare che non ci sono parentesi
dopo la parentesi graffa vale a dire
che non sto eseguendo questa funzione fino qui ora,
il browser sta andando ad eseguire per me quando ha determinato
che la pagina è caricata.
Allora, vediamo cosa abbiamo fatto,
document.getElementById registrazione
in modo che mi dà solo un riferimento al nodo
nell'albero che è di ha un ID di registrazione.
E ora, ho intenzione di registrare un altro gestore di eventi
facendo form.onsubmit ottiene questa funzione anonima
che significa la seguente codice deve essere eseguita ogni volta che
che il modulo viene inviato.
Ora, la maggior parte di questo è solo sorta di noioso logica.
Quindi, se il valore del campo email nel modulo è
"Niente" allora si deve fornire il proprio indirizzo e-mail,
urlare al utente con un avvisare e poi restituire false.
E poi ho un mucchio di altri controlli,
i controlli per la password,
controlli se l' le password sono gli stessi,
i controlli se l'accordo casella è selezionata o meno
e io urlo a l'utente se qualsiasi
di quelle prove effettivamente fallire.
E così, ecco un esempio ancora anche se è un po 'forzato
qui il fatto che sto usando uguale, uguale, uguale,
significa che l'utente non si può cercare di ingannare me
digitando quale valore.
O meglio Sono davvero controllando la presenza
della stringa vuota, l'utente non ha ancora digitato nulla.
Se l'utente ha digitato letteralmente zero,
Potenzialmente potrebbe essere "zero" confuso con la stringa vuota.
E io dico che è sorta di insignificante qui
perché ovviamente addirittura pari a zero Non è un indirizzo email.
Ma se questo era un altro campo generico come un campo di testo
o un nome o una descrizione o qualcosa che si desidera valore per
e non è necessariamente sintatticamente avere
essere un indirizzo di posta elettronica, l'utente potrebbe digitare qualcosa di simile a zero
e di nuovo caso d'angolo ma che è perché in genere il controllo tipi è
una cosa utile.
Stai veramente controllando l'utente dopo aver digitato nulla
in quel campo.
Allora, che cosa succede se nessuno di questi test falliscono, bene,
restituendo vero dentro di un gestore eventi
come onsubmit significa solo let il comportamento originale effettivamente
propagare e quindi la forma otterrà inviato.
Ed è per questo che quando ho finalmente fa clic su Inoltra prima ho avuto
fino al register.html e se lo faccio ora, avviso,
Vengo urlato se non lo faccio fornire un indirizzo email
e posso digitare malan@harvard.edu,
cremisi [fonetica], cremisi, selezionando la casella,
e ora registrare e mi dice, ancora una volta,
siete registrati o non proprio.
Bene.
Quindi, cerchiamo di Ripuliamolo solo un po 'e poi la transizione
al nuovo recente roba lato server.
Quindi, se vado in forma-2.html, notare un paio di cose.
Così, uno, ho portato jQuery indietro nel mix
per cui vi è ancora una volta questo segno del dollaro
e ora sto usando alcuni metodi jQuery.
Quindi, in primo luogo, che cosa si tratta il simbolo del dollaro che è
così speciale qui?
Qual è il segno del dollaro cucita per la maggior parte qualsiasi codice jQuery?
Già.
[Inaudible Osservazione]
OK. Quindi, la funzione di simbolo del dollaro passa attraverso il DOM cercando
qualcosa con questo particolare selettore CSS.
Così, vero, ma quasi troppo preciso.
Questo è ciò che accade quando si passa in una stringa
come in questo caso, ma non lo fai avere sempre a passare in una stringa.
Infatti, caso in questione, la stessa prima linea ecco questo non è un
Selettore CSS, sto passando in una funzione lambda.
Quindi, più in generale - così, buona risposta ma troppo precisa.
Più in generale, ciò che è simbolo del dollaro rappresenta?
Basta >> jQuery.
>> Già. Così, proprio jQuery o è solo una funzione
che alcuni anni fa ragazzo scritto e altre persone hanno
poiché avanzata che letteralmente Per impostazione predefinita, viene chiamato -
oops, è chiamata jQuery.
E 'solo - si trasforma Partenza a differenza di molti
di segno lingue dollaro è un simbolo perfettamente valido da utilizzare
in nome di una variabile, mentre
in PHP segno del dollaro ovviamente ha un significato speciale
ma in JavaScript, come in Alcune lingue, il simbolo del dollaro
e la sottolineatura e di altri come caratteri speciali totalmente legit
da utilizzare nel proprio simbolo I nomi delle variabili.
Così, qualcuno ha appena deciso che, sai cosa?
Sta andando essere abbastanza noioso
per rendere il mondo intero digitare jQuery per tutto il tempo,
mi permetta una sorta di pianta un palo nel terreno e dire,
"Questa biblioteca sarà utilizzare il simbolo del dollaro. "
Ed infatti, questa non aumentare il rischio
che qualcun altro presunzione sta per utilizzare il simbolo del dollaro
per la sua biblioteca, ma ci sono modi per una sorta di assicurare
che quando si utilizza il dollaro firmare il mapping a jQuery
perché si può verificare se è già stato assegnato
a qualcos'altro essenzialmente.
Bene.
Quindi, questo è tutto ciò che si, non c'è nessuna magia.
E 'solo un sexy cercando pezzo di sintassi che è bello
e veloce e facile da digitare.
Allora, che cosa succede quando si digitare il segno del dollaro parentesi aperte
quindi una funzione anonima.
Ebbene, risulta che questo Notazione realtà stenografia
per il documento dot pronto parentesi aperta.
Così, come Cynthia notato in precedenza abbiamo già trovato uno
caso corner.
Se hai appena passa in la funzione lambda,
l'effetto del dollaro segno è un po 'diverso.
In realtà, ciò che sta realmente accadendo è che è equivalente a questa,
passando un riferimento a l'oggetto documento globale
che è globale, proprio come l'oggetto finestra è
che ti dà un po ' funzionalità speciali
che colpisce l'intera pagina o il browser e si trasforma
che il documento quando si avvolge con jQuery,
jQuery realizza essenzialmente, oh, questo è un punto di riferimento
a tale oggetto apposito documento,
lasciatemi ora registrare un gestore di eventi chiamato pronto
che non è nativo JavaScript o DOM correlati.
Ready è un jQuery cosa che dice
quando la pagina è stata caricata tutti gli elementi HTML
ma non necessariamente caricato, tutti i CSS e le immagini
e file JavaScript e lampeggiare i file e simili.
Quindi, è un passo prima il carico poi andare avanti
ed eseguire il seguente.
E il rialzo di utilizzare il pronto significa è che si può, si sa,
che tutti gli elementi nel DOM,
tutte le identificata univocamente , esistono anche cose con ID
se la pagina, il contenuto sono ancora carico e carico
e avete un po ' icone rotti per un attimo
o una pagina bianca sullo sfondo.
Già.
>> Che cosa accadrebbe se [incomprensibile]?
>> Esempio perfetto, una domanda perfetto.
Quindi, vediamo se possiamo simulare questo momento.
Quindi, lasciami andare avanti e cancellare queste due linee fino qui e poi
senza preoccuparsi di risolvere il indentazione, lasciami andare avanti
ed eliminare questo qui - oops, questa qui.
E ora, lasciami andare verso la pagina, vai alla forma-2.html e tipo
Registrati, nulla sembrava accadere, diciamo, perché era che,
andiamo avanti e aprire up ispettore di Chrome,
aprire la console solo per vedere se succede qualcosa qui, ora,
registrati, ancora niente.
Quindi, il codice è sintatticamente fine
quindi non vedo alcun messaggi di errore rosso,
ma ciò che chiaramente Non sta succedendo?
Nessuno del mio codice è giusto, non funziona così nessuno
dei miei codici sembra essere esecuzione, perché è questo?
Beh, JavaScript e browsers più in generale eseguire il
contenuto di una pagina web, in alto in basso, da sinistra a destra.
E il problema è che perché la parte superiore
di questa pagina è HTML per poi dirigersi poi lo script poi un altro script,
questo sta per essere giustiziato prima di ciò che è ancora pronto,
o addirittura esiste nell'albero Rappresentazione della pagina.
La forma stessa, nemmeno la corpo presente in tale punto.
Quindi, jQuery è abbastanza intelligente con essa di controllo degli errori
che se non vi è alcun elemento con l'ID univoco della registrazione,
non sta andando a bail out su di voi
e solo innescare qualche console errore e rompere l'intera pagina,
sta andando a ignorare silenziosamente si, ma la ragione per cui nessuno
di questo codice mai eseguito è
perché quando si ha REGISTRATO questa submit handler,
non vi era alcun elemento per fissarlo.
Quindi, è una sorta di non op là.
Quindi, specificando invece, attendere l'età è caricata
se abbiamo fatto il window.onload cosa che è sorta
del vecchio modo di fare scuola o il modo in jQuery più sexy
come questo, possiamo dicono che attendere tutto
di quei tag HTML avere stato analizzato in modo che anche
se le immagini non sono caricati, a almeno questo nodo è nella struttura,
poi JQuery può garantire che è tutto lì.
Già.
[Inaudible Osservazione]
Sì, buono, sì, assolutamente.
Così, l'altra soluzione di questo, se non si utilizza questa
o non ricordare che questo esistesse,
si poteva assolutamente muoversi tutto questo al fondo
della pagina web, all'interno della corpo ancora ma sotto la forma
e che sarebbe anche risolvere questo problema.
E 'solo genere considerato cattiva pratica.
E 'un po' disordinato e sciatta appositamente
se si mantiene disturbo tutto al fondo della pagina,
soprattutto quando sto tenendo cose semplici, mettendo tutti
del mio codice interno della pagina HTML
quando naturalmente si può certamente ottenere l'abitudine
di factoring fuori in un file separato
a quel punto è solo bello
per centralizzare la file nella testa.
Tranne che c'è un prezzo da pagare
mettendo JavaScript altri beni come file CSS
nella testa della pagina, che cosa è un rischio che si corre?
>> Più lento il caricamento della pagina.
>> Lento caricamento della pagina, perchè?
>> Perché stiamo cercando per caricare tutte le librerie
prima che [incomprensibile].
>> Proprio perché i browser leggere il codice cima a fondo,
da sinistra a destra se Google analytics sono lenti
o il jQuery CDN è lento o l'API di Facebook è lento
e che il file si blocca appena potenzialmente a seconda
su come si è caricato il file, il intera pagina potrebbe sembrare bloccato.
E se vedete questo molto francamente
sui siti web che hanno un sacco annunci di bassa qualità
su di loro, siamo solo una lenta o sito web abbattuto potrebbe appendere una pagina
per qualche indefinito numero di secondi
finché il browser volte si spera su quel
e poi si mostra il resto della pagina.
Quindi, se hai mai usato come Facebook, come il tasto,
nella vostra pagina web, lasciami vedere se riesco a trovare questo
senza dover accedere qui.
Quindi, se si va al Pulsante mi piace di Facebook
e fare clic su un codice get, dannazione,
Vediamo se possiamo trovare l'esempio,
sicuramente qualcuno aveva postato questo.
[Pausa]
Darò in pochi secondi se non vediamo questo.
Facebook asynch - OK.
Così, questo è il codice e salvo hanno cambiato di recente
che Facebook realtà consiglia di utilizzare
di caricare la propria libreria ed effettivamente proporre
che si mette questo in il corpo della pagina.
Così, Facebook vi consiglia creare una sorta di stupida DIV
che ha proprio ID univoco come questo, poi hanno un tag script
e tutta questa complessità fa essenzialmente la seguente
e non usano alcun JQuery perché non vogliono
di assumere ogni altra dipendenze,
mi permetta di spostare questo sopra solo un po '.
Così, si noti hanno un funzione anonima qui,
più su che in un attimo,
poi utilizzano document.createElement,
che stanno creando un elemento DOM, questo è come malloc per così dire
dove la variabile è di tipo copione, è quindi specificare
che l'attributo Async di quel tag sta
per essere vero, allora si va avanti e capire cosa l'URL
di Facebook JavaScript dovrebbe essere
e questo è solo il modo di fantasia
di controllo dovrebbe che sia HGP o HDPS.
E poi, infine, si notare ciò che fa di Facebook,
ottengono il nodo DOM che ha un ID di Facebook radice
che è quello che hanno detto a mettere nella pagina
e poi si aggiungono il bambino così l'effetto di tutto questo è
a una sorta di iniettare dinamicamente un nuovo tag script nella vostra pagina
come un figlio del DIV che si Ci inserito in modo che il resto
dei carichi di pagina felicemente
E questo codice effettivamente viene caricato in modo asincrono.
Quindi, in sostanza dopo l' fatto e io dilazionato menzione
della funzione anonima,
cos'è funky sintassi riferimento qui
quando non ho solo la funzione aprire paren, vicino paren
e poi parentesi graffe, perché le parentesi aperte qui
e poi l'apertura chiudere, Paren lì, che cosa è che facendo?
>> [Incomprensibile] che definisce e quindi l'esecuzione?
>> Esattamente, è definire un funzione che è anonimo
ma semplicemente definire una funzione,
naturalmente non esegue una funzione fino a quando si chiama
per nome, ma naturalmente questo è una funzione anonima
quindi non si può chiamare per nome, ma si può
in JavaScript eseguire un funzione anonima solo
incapsulando il tutto tra parentesi, come abbiamo fatto
con questa paren e questo Paren qui e quindi un fissaggio
alla fine della funzione parentesi aperte, chiudere parentesi,
se non si vuole passare argomenti.
Ma questo sembra un po 'stupido,
come perché questo ulteriore complessità sintattica
che la maggior parte delle persone non sembrano riconoscere, qual è il valore
di incarto quelli tre linee di codice
in una funzione anonima in questo modo.
Già.
>> Per evitare di sovrascrivere un prezioso nella [incomprensibile].
>> Esattamente, per evitare sovrascrivere una variabile
nella pagina esistente, giusto?
Facebook è un po ' presuntuosamente deciso,
andranno a utilizzare il E variabile, è molto probabile
che tu o chiunque usando Facebook come il tasto
o qualunque altra spina sociale
in ha una variabile qualche chiamata E. Così,
incapsulando tutti del loro codice interno
di questa funzione anonima, essi in sostanza, hanno la loro portata
che non si rischia clobbering tutte le variabili esistenti.
Così, anche questo è in realtà un paradigma molto comune,
soprattutto durante la scrittura un codice di biblioteca
o quando voi stessi non fate vuole ingombrare il vostro spazio nome
con altre variabili desidera che il valore di vivere
e morire una volta che si esce quel blocco di codice,
questa è una bella tecnica in JavaScript.
Bene.
Così, poi di nuovo a questo esempio qui, tutto quello che abbiamo fatto alla fine
con questo esempio è appena ripulito il codice.
Quindi, è ancora ricevuto un bel mazzo di switch, un intero gruppo
di condizioni qui, ma notare un po 'di sintassi,
questo accede al nodo DOM con la registrazione ID univoco,
i mezzi spaziali cercano ora un discendente di quel nodo,
trovare se è di tipo ingresso e poi ancora
se non avete visto questo prima, si potrebbe sapere
che questo significa solo trovare con la variabile di ingresso,
gli elementi di input che ha un attributo nome con un valore
di e-mail, e poi lasciare Mi cenno la mia mano ad un certo
del resto non è tutto questo stimolante
ma in realtà solo la sintassi di jQuery per le stesse operazioni.
Bene.
Ma ciò che non è così importante ecco la roba lato del browser
ma piuttosto il fatto che noi aveva modi più puliti e più puliti
di rendere effettivamente che il lavoro codice.
Bene.
Tutte le domande?
[Inaudible Osservazione]
OK. Ora la parte divertente.
Quindi, Node.js Perché?
Chi se ne frega?
Che ne sai di oggi?
Node.js, perché?
Henry [ortografia assunto].
[Inaudible Osservazione]
Ripristino della batteria?
Che - questo è un perfetto gancio scogliera
per la seconda metà di oggi.
Perché non andare a prendere una pausa di cinque minuti qui,
c'è una mezza caramella macchina lì, se si farebbe
come una caramella senza mettendo un quarto dentro