>> Regulă.
Deci, JavaScript.
Aproape toată lumea în această cameră probabil are un anumit grad
de confort cu ea dacă a fost cale de întoarcere, atunci când în SC50
sau că a fost personal proiecte web sau chiar
dacă ați făcut un pic de ea cu acest proiect pe bază de PHP,
dar pentru cele mai parte, multi dintre voi,
chiar dacă aveți un pic de confort
cu JavaScript poate nu au fost luate
de la sine modul în care lucrări de limbă și ceea ce se întâmplă
pe sub capota și ceea ce vom încerca
de a face astăzi este coaja de spate unele dintre straturile tehnice
de ceea ce este JavaScript, cum aceasta este diferită de la o limbă
cum ar fi PHP, cum poate fi utilizate nu numai partea de client
dar, de asemenea, partea de server și apoi se concentreze foarte precis
în acest cadru, observa nu JS care este în esență un timp a alerga,
un program cu care poate executa cod JavaScript,
partea de server și este din ce în ce fel în ce mai populare
de pe aceeași statura această de zile de la, probabil, Ruby și PHP
și Python și veți vedea
că are unele destul caracteristici puternice prin intermediul unor
limbii built-in construcții.
Dar, mai întâi, o parte ușor lucruri doar să vă reamintesc
de modul în care funcționează și această limbă dacă aveți probleme cu vederea orice
din aceasta, striga doar afară și ne vom adapta.
Deci, unul ca in PHP exista nici o noțiune de o funcție principală,
doar de a începe scrierea de cod
și puteți acestora interpreta sus în jos.
În cadrul unui browser
sau în partea de server ceva vom vedea câteva exemple
într-un pic.
Condiții, sintactic echivalent cu PHP, precum C,
C + + si alte limbi astfel încât doar pentru a vă oferi un sentiment
de modul în care am putea-o structura,
există doar un canonic condiție.
Expresii boolean, exact același sintactic cum ați văzut
în aceleași alte limbi, atât pentru Oring
și pentru care se încheie lucrurile împreună.
JavaScript are switch-uri, la fel ca PHP și alte Do
și tu nu ești limitat, cum ar fi în C pentru primitive integral
cum ar fi caractere si int pot de fapt face alte tipuri de valori.
Loops. Deci, aceasta este exact la fel
și, probabil, o duzină de limbi, în timp ce buclele, în timp ce face bucle
iar apoi acest truc aici.
Deci, aceasta este un fel de cunoscut sub numele de enumerare rapid
și este un mod foarte inteligent de la fel ca în PHP a face
pentru fiecare FU ca bar puteți în mod similar,
într-un obiect de JavaScript, în cazul în care obiect este numele
variabilei aici, să zicem, var i la obiect și pe fiecare iterație
din această buclă, i este va fi una
din cheile de la acel obiect.
Deci, dacă aveți un obiect pentru o elev, și un student are o identitate
și un nume și o casă, iterativ i se va lua
din valoarea de ID-ul și numele și casă și poți acestea index
în obiect ca și cum este o matrice folosind paranteză
notație pentru a obține valoarea de ID-ul de cheie sau numele
sau casă și așa mai departe.
Și contrar comun presupunere, JavaScript obiecte,
proprietăți nu sunt neapărat garantata a fi
în aceeași ordine, aceasta este, de asemenea, adevărat la PHP asa ca nu presupune
că lucrurile vor rămâne în aceeași ordine
că ai pus acele cheie perechi de valoare într-un obiect.
Cum despre matrice?
Există o serie de moduri să-l scrie punct de vedere sintactic
dar acest lucru este probabil cel mai mult comun acum doar folosind pătrat
Suport de notație.
Deci, aceasta este o variabilă a apela numerele care conțin matrice
de șase numere întregi de acolo, aici e un șir simplu
și observați ce este absent din aceste exemple,
ceea ce este JavaScript aparent lipsit.
Da. Deci, nu există nici o noțiune de dactilografiere, cu siguranță nu
în acest context aici, dar aceasta este într-adevăr un șir.
Deci, JavaScript trebuie tipuri de și că a fost într-adevăr un tablou
care este ea însăși un tip și fiecare dintre elementele
în acea matrice au fost de tip ca număr de activarea JavaScript-le numește.
Deci, este un vag tastat limba și vom vedea
că JavaScript cum ar fi PHP are un operator de identitate
și alte mecanisme de verificarea de fapt, ceea ce tipul
de unele variabile este atât pentru verificarea erorilor
și pentru alte aplicații.
Și aici e un obiect eșantion care conține doar un ID și un nume.
Și acum, observați că noi suntem , utilizând notația acoladă,
indentarea și alb spațiu este un fel de lipsită de sens
și aceasta declară un variabil al cărui nume este Rob
și a căror identitate este 1 și Tipul de dată este aici numărul nostru
și, respectiv, șir.
Și atunci acest lucru este ceva ușor diferit
dacă ai făcut vreodată ceva cu Ajax în aceste zile?
Probabil ați folosit un obiect de genul asta
dar ceea ce este demn de remarcat aici?
Ce este sintactic vreodată atât de diferite, doar un cuplu
de lucruri între acest exemplu care este, desigur, mai mic
și acest exemplu mai mare.
Deci, în primul rând în a nespecialist termen, ce e asta?
Care este tipul de Personalul-ai spune?
OK, este o matrice, este o serie de ce?
>> Obiecte.
>> OK, este o serie de obiecte.
Și acum, să se concentreze pe un singur - oricare dintre aceste obiecte,
ceea ce este diferit între aceasta și aceasta?
>> Cheile sunt siruri de caractere.
>> Da. Deci, chei sunt siruri de caractere,
și tastele sunt de fapt siruri de caractere, în ambele cazuri
și acest lucru este un fel de Idiotic
în designul meu istoric opinie decizie ori de câte ori utilizați
JSON, JavaScript Object Notation,
care este în esență un format de transport
pentru trimiterea de date de obicei, în întreaga rețea
între client și server, aveți nevoie să vă amintiți
că acest lucru nu este de fapt valabil JSON și acesta este unul
din aceste FYIs dacă nu vreodată te dai cu capul de perete
pentru câteva minute, pentru nici un bine motiv, nu este valabil JSON
deoarece tastele sunt Nu, de fapt citat.
JSON cere idiot care cheile fi citate nu numai,
dar ca acestea să fie citat de două ori, ghilimele simple nu sunt suficiente.
Deci, lucru stupid mic și mai mult de un fapt distracție
în scopuri de astăzi, dar acest prea ar fi valabil JavaScript
nu este vorba doar - Converse nu este adevărat.
Bine.
Deci, vom vedea o multime mai mult de asta.
Bine.
Deci, asta este JavaScript sintactic, probabil, destul de
familiar, oricare dintre voi care au nu a folosit niciodată înainte de activarea JavaScript-
nu este un salt uriaș de la PHP sau cele mai multe orice limbă procedural
care le-ar fi putut folosi.
Deci, astăzi, ne vom concentra pe aspectele interesante
de JavaScript în special în contextul nr JS
dar nu în mod exclusiv, deoarece până acum le-ați probabil,
dacă ați utilizat Javascript, a folosit-o în interiorul un browser.
Deci, nu JS este un mediu apoi într-un pic mai merge
pentru a ne permite să acceseze JavaScript cod client -
partea de server, dar în primul rând, haideți să aruncăm o privire
la ceva care este o puțin mai mult de partea clientului.
Deci, m-am dus în și acest lucru este legate de pe site-ul de cursuri,
dacă vrei să joci de-a lungul, există două subdirectoare
în Zip de astăzi a numit știfturi sursă zip pe site-ul
și acestea sunt doar o câteva exemple amintea
de lucruri pe care le-ar putea fi văzut înainte și eu un fel de le-au construit
de la simplu la ușor mai complicat de a șicana
unele dintre caracteristicile de JavaScript.
Deci, să mergem mai departe și să ia o privire, de exemplu, la această.
Deci, din păcate eticheta clipire a fost ucis în urmă cu mai mulți ani
ca modul s-au luat mai frumoasa si mai frumoasa
și eticheta de clipire a fost literalmente Suport deschis clipi suport aproape
și ea un fel de nici o mai mult cu noi.
Dar, încă mai putem învia această idee a unei etichete de doar un fel
de gândire despre el în mod logic, cum te duci
despre a face ceva de genul acest clipi intuitiv?
Presupunând că știți un pic bit de JavaScript și CSS sau
în acest moment, este OK, dacă nu faci.
>> Setați un timp afară și să se ascundă se apoi după ce voi eticheta
afară și-l arate din nou.
>> Da, perfect.
Aceasta este un fel de programare 101,
cum ați realiza o efect vizual ca aceasta?
Ei bine, într-un fel trebuie să arate ceva
și apoi a ascunde ceva, spectacol ceva, ascunde ceva
și ca Jonathan propune folosind un fel de time-out,
un fel de program care le puteți face acest lucru în mod repetat, fără a fi nevoie
de a utiliza o buclă sau ceva de genul asta.
Deci, lasă-mă să merg în blink-0.html
și lasă-mă să micșoreze fontul un pic
astfel că mai mult de acest lucru se potrivește.
Și haideți să aruncăm o privire la ceea ce se întâmplă aici.
Deci, în primul rând, observa că organismul
din această pagină este super- simplu, în interiorul corpului
a paginii este doar un div.
I-am dat în mod arbitrar un ID de salut
și că ar putea fi orice atât timp cât este unic
si apoi doar am ceva text simplu, salut lume.
Deci, în cazul în care acum am derulați în sus, observa unele styling pufos.
Deci, eu spun, ascuțit salut, care, după cum știți
în CSS înseamnă doar unic identifice elementul
cu o idee de salut,
dimensiunea fontului se întâmplă în mod arbitrar fie aceasta, marja si alinia textul.
Deci, neinteresant detalii estetice
pentru a centra aproximativ textului.
Deci, partea interesantă este în tag-ul script-ul de aici în sus
care I se întâmplă să pună în interiorul din capul paginii.
Deci, Vom - poți să faci aceasta în orice număr de moduri
și vom vedea câteva iterații din același program de
dar haideți să începem de la partea de sus.
Deci, m-am declarat un Funcția numit blink
și se pare că folosește acest built-in metoda DOM numit
getElementById care este, probabil, una dintre cele mai puternice metode
care te scot din cutie cu JavaScript caută
"Salut" nu trebuie să fi ghilimele duble cum a fost
în HTML este fie este bine atât de mult timp
ca esti stilistic consecvent aceste zile eu îndrăznesc să spun
mulți oameni folosesc Java, ghilimele simple în JavaScript,
ghilimele duble în HTML, dar nu contează cu adevărat
atât timp cât ești consecvent.
Deci, aici, dacă nu sunteți familiarizați, puteți accesa de fapt,
cu JavaScript CSS proprietăți pe elemente.
Astfel, observați că am a declarat o variabilă numită div
și stocat în interiorul acelei variabile,
o trimitere la orice ca element de DOM este.
Deci, dacă vă gândiți la CS50 sau orice clasă în care te-ai gandit
despre structurile de arbori și DOM, Document Object Model,
aceasta este doar o referință la un nod într-un copac,
care reprezintă această pagină
și dacă div.style.visibility proprietate este egal, egal, egal,
ascuns, apoi m-am doar Vreau o comutare se
așa cum a propus Jonathan altfel vreau
pentru a comuta pe la ascuns.
Acum, ca și în parte, de ce triplul egal acolo?
Sau ceea ce este că, față de egali duble?
>> Echivalent strictă.
>> Ne pare rău.
>> Echivalent strictă.
Deci, e operatorii de identitate
în cazul în care nu ești de verificare numai valoarea variabilei
ca un sentiment egal, egal dar, de asemenea, tipul de ea.
Deci, chiar dacă noi nu avem specificat acest lucru cu mult orice date
Tipuri de orice variabile în aceasta sau oricare dintre slide-uri,
există un tip asociat cu acel șir ascuns
cu acea valoare, ascuns și care este de șir, desigur.
Deci, în acest caz, ea Nu contează cu adevărat
pentru că nu există nici un fel că am de gând să îmbine un șir
de "ascunse" cu o altă valoare
dar acest lucru este adesea un bun obicei aș spune să se
în utilizarea egal, egal,
semnul egal este, în general, un lucru bun.
Acesta va face codul mai robust, atât în ​​PHP, dar
și în JavaScript pentru că veți rula
în ocazional cazuri de colt unde valoarea poate fi zero
că sunteți de verificare pentru și zero, poate fi confundat cu false
sau ar putea fi și nu ca în PHP,
Javascript prea poate avea multiple Valorile mod fals în cazul în care de la zero
și false și nul și nedefinit poate rezolva toate implicit
de fals.
Dar dacă sunteți cu adevărat doresc pentru a verifica pentru o valoare deosebită
cum ar fi de zero, numărul, sau false Boolean, atunci aveți
pentru a utiliza acest operator identitate.
Deci, s-ar putea întâmpla pentru a obține în orice caz, chiar dacă aici,
este un fel de lipsit de sens pentru că știm că suntem de verificare
pentru o valoare șir și este nu va fi nimic altceva.
Deci, aici e magia, apoi, dacă am defilați în jos la această linie aici,
aparent, construit în obiect fereastra
și aceasta este o caracteristică a un browser ar putea accesa
la acest super-global obiect numit Window,
interiorul care este unele funcționalități,
în cazul în care piesa este interval setat
și este nevoie de aparent ce fel de argumente?
Da.
>> Apel funcții și un timp.
>> Bună. Deci, o funcție apela și un timp
și așa mai ales o referire la o funcție,
un pointer la o funcție într-un sens
și care este funcția ce se intampla
pentru a fi executat fiecare număr de milisecunde și în acest caz,
e fiecare 500 de milisecunde.
Deci, acesta este un mod de a induce în mod eficient și bucla infinita
fără a utiliza repetare dar în loc de a spune JavaScript
la motor interior a browser-ului
pentru a face acest lucru în fiecare 500 milisecunde sau este aproape
la 500 de milisecunde ca se poate,
se dovedește că sub capota,
există ceea ce se numește un eveniment buclă și ne vom întoarce la această
în contextul nod JS că doar în mod constant un fel
de a sta acolo, filare, de așteptare pentru muncă să fie făcut
și, de îndată ce-l dau seama,
500 milisecunde au trecut clipire vor fi numit din nou
și din nou și din nou, este alături de orice altă muncă
care are nevoie pentru a obține făcut.
Deci, ce putem îmbunătăți aici?
Ei bine, lasă-mă să deschid up blink-1.html
și demonstra blink-1.html
ca punct de vedere estetic perfect identice.
Deci, ceea ce am putea îmbunătăți aici?
Ei bine, observați că acesta a fost un fel de inutil
pentru a defini o funcție numită Blink deoarece câți
în câte locuri am făcut-o apela funcția clipi?
>> Doar o dată.
>> Deci, unul.
Deci, nu a fost rău, în De fapt, este, probabil, destul de
drept înainte.
Am definit o clipire funcție, am apela o clipire funcție de cale
acestui parametru, dar punct de vedere tehnic,
nu a fost un motiv pentru ea și o paradigmă comun
în JavaScript este de fapt face uz de functii lambda
cum s-ar putea retrage de la 51 sau funcții anonime
în cazul în care, dacă nu aveți nevoie de un nume pentru o funcție,
daca esti doar o asteptare cu siguranță, într-un singur loc,
de ce deranjez aglomera codul, aglomera mintea programatori
și numele tău spațiu într-adevăr cu simboluri
că tu nu faci cu adevărat Trebuie să-i pese.
Și astfel, în această versiune de aici,
observa că am sunat window.SetInterval direct
la foarte de sus a mea tag-ul script-ul, apoi am trece
într-o funcție fără nume care nu ia argumente
și asta e perfect fin și apoi corpul
acestei funcții se pare este identic cu ceea ce a fost înainte
și numai sintactice Diferența acum este
aici lângă 500.
Sunt de închidere a corpului a funcției
și apoi spun executa acel cod anterior,
fiecare 500 de milisecunde.
Schimbare, astfel, foarte marginal
dar un pas spre ceea ce-i probabil, o mai elegant
punerea în aplicare a acestei.
Deci, să luăm asta intensifice și mai mult dacă acum mă duc
în clipi două, veți vedea o bibliotecă comun,
efectul de care se va
să fie complet nesemnificativi punct de vedere estetic, dar dacă vom merge
în versiunea a doua de aici, o notificare că în partea de sus a capul meu,
Am inclus cea mai recentă versiune de JQuery.
Și apoi, aici, Tocmai am curățat
la codul de un pic, e Nu va fi o lume de distracție
pentru a continua utilizarea funcțiile native DOM
și un fel de JavaScript prime.
De fapt, JQuery ca s-ar putea știu a devenit atât de popular
că cei mai mulți oameni pur și simplu un conflict cu jQuery JavaScript
dar de fapt doar o cină bibliotecă util scris
de un tip pe nume John Resig și de la alții
că doar face o mulțime de lucruri plictisitoare
în JavaScript mai ușor și mai succint.
Deci, în acest caz, aici ce se întâmplă?
Deci, am acest aspect de un semn dolar, mai mult cu privire la acest
într-o clipă, apoi acesta este un selector CSS.
Deci, este foarte similară în spirit a ceea ce am făcut înainte,
dar de data aceasta, am literalmente, folosind tag-ul hash
pentru a indica un unic identificator numit salut
și apoi aparent . Css este o metodă de construit
in la orice obiect este că am creat
si eu sunt de verificare a valorii cheii vizibilitate.
Și dacă valoarea care cheie egal, egal, egal, ascuns,
atunci am de gând să-l comuta și Am de gând să-l comuta acest moment
utilizând aceeași metodă care aparent este supraîncărcat
în sensul că acesta are două semnături diferite,
unul cu un singur argument și una cu două argumente,
dintre care al doilea este setter,
prima dintre acestea fiind un getter ca să spunem așa.
Și dacă curios și, dacă te-ai fi nu a privit niciodată de fapt, la acest lucru,
dacă mergem la jquery.css sperăm top lovit este într-adevăr acest lucru
și puteți vedea o mai explicație oficială
care tocmai ne-am folosi acest, . Css cu numele de proprietate
și apoi setter este dot CSS
cu un nume de proprietate și o valoare.
Deci, marginal mai curat, dar observa un fel de model aici
cu fiecare iterație din acest cod,
suntem un fel de ceea ce face mai stricte și mai stricte și mai stricte
și nu spune mai bune modele
din moment ce sunt utilizați pe cineva cod altcineva care este eliminat
o parte din complexitatea.
Deci, acum hai să facem acest lucru chiar simplu.
Și de fapt, dacă am elimina toate citate veți vedea doar toate
comment veți vedea cum simplu acest lucru a devenit.
Diferența unul aici este, desigur,
că eu sunt, folosind o comutare metodă care, de asemenea, vine construit
în a jQuery și că e doar
deoarece altcineva a scris codul
că de fapt comută setarea de vizibilitate
de orice element DOM pe care le trimite.
Deci, mai bine și mai bine.
Și astfel, acesta este un model,
chiar dacă aceasta este o cină exemplu simplu și sortare
efectului net prost care este o piesă clipește de text,
E ca un fel de gândire proces care trebuie sa te gandesti -
se gândesc nu în mod necesar foarte primul
scris pasiv ceva pentru apropiatul proiect
dar cu siguranta ca voi repeta cu consilierul dumneavoastră sau cu mine
și întâlniri de echipă sau doar revizui codul de colegii de echipă
despre înăsprirea lucruri, nu?
La urma urmei, ei sunt mai puțin -
o mai puține linii de cod aveți în cele din urmă
în teorie, mai puține bug-uri vă sunt susceptibile de a fi invitat
pentru că există, pur și simplu mai puțin cod să te pui cu.
Bine.
Deci, un cuplu de takeaways.
De funcții Lambda, funcții anonime,
multe dintre care voi s-au văzut înainte
și apoi, de asemenea, la fel de strângere lucrurile cu o bibliotecă
ca jQuery în acest caz particular.
Bine.
Orice întrebări?
Hai sa facem un alt aspect partea de client aici,
în formă zero, avem acest efect net.
Formă super-simplu și aparent dacă am încerca să faceți clic înregistra aici,
Inițial, ea mi-a spus că sunt a înregistrat, bine, nu chiar.
Ei bine, de ce este asta?
Ei bine, aici e forma-0.html foarte puțin cod,
nici un fel de JavaScript și este complet un fel de fals
de formă deoarece acțiunii Valoarea este registered.html
ceea ce înseamnă că, indiferent de ce Tip I în această formă,
în cazul în care se merge la fi trimise pe server?
Da. Deci, pentru a registered.html care este în mod clar un fișier HTML
care este, prin urmare, statică fișier care nu are mijloace
de a lua introduse de utilizator, presupunând nu există nici un cod JavaScript
încorporat în ea că e caută în URL-ul
deci acest lucru este complet un NOOP și că nimic nu se va întâmpla
cu un datelor prezentate, dar puteți vedea structura
de o formă HTML5 destul de simplu
care are o parolă puține, câteva tipuri de intrare.
Deci, haideți să de fapt acum adăuga unele verificarea erorilor
și să vedem cum am putea îmbunătăți acest lucru.
Deci, aici este un fel de sărac mod omului de punere în aplicare a acestei
și este un fel de bucată urât de cod.
Deci, în primul rând haideți să scroll până la fund
pentru a vedea ce e la fel și ceea ce este diferit.
Singurul lucru diferit acum între acest
și versiunea anterioară este pe care le-am dat forma și ID-ul
de "înregistrare" ar putea au fost tot ce vreau
dar menit de a fi unic identificabile chiar că nu-i
strict necesar, pentru că dacă o pagina are un singur formular cu siguranță I
ar putea găsi cu unul dintre Metodele Selector jQuery lui.
Dar în acest fel doar face mai determinist.
Deci, dacă mă duc acum la script-ul meu tag-ul, observa următoarele,
egali window.onload o funcție anonim.
Deci, ceea ce se face acest lucru?
Deci, s-ar putea aminti că în de programare client-side -
JavaScript pagini HTML, mai degrabă au diverse evenimente asociate
cu elemente, click și depunerea și concentrându-se
și estomparea și alte astfel de evenimente care ar putea întâmpla
ca un utilizator tipic interacționează cu pagina,
window.onload face ceea ce spune.
Pe ferestre întreaga încărcarea
Deci, odată ce toate imaginile au fost descărcate, odată ce toate fișierele au
fost descărcat și o dată Pagina a fost încărcată,
face următorul cod, și observa dacă am trece la partea de jos
acestei metode, observa că nu există nici o paranteză
după acoladă adică
că eu nu executare această funcție aici acum,
browser-ul se va executa pentru mine atunci când a stabilit
că pagina sa incarcat.
Deci, haideți să vedem ce am făcut,
document.getElementById înregistrare
astfel încât doar dă-mi o referire la nodul
în arborele care este de a un ID de înregistrare.
Și acum, am de gând să înregistra un alt handler eveniment
de a face form.onsubmit devine această funcție anonim
ceea ce înseamnă următoarele Codul ar trebui să execute ori de câte ori
care formularul este depus.
Acum, cea mai mare parte acest lucru este doar un fel de plictisitor logică.
Deci, în cazul în care valoarea a domeniu de e-mail în forma este
"Nimic", atunci trebuie să vă furniza adresa ta de e-mail,
țipi la utilizatorul cu un alertă și apoi să se întoarcă false.
Și atunci am o grămadă de alte controale,
controalele pentru parola,
controalele dacă parolele sunt la fel,
controalelor dacă acordul casetă de selectare este bifată sau nu
și am strig la utilizatorul dacă este cazul
din aceste teste de fapt nu.
Și astfel, aici este un exemplu chiar deși e un pic contrived
aici faptul că eu sunt, folosind egal, egal, egal,
înseamnă că utilizatorul nu pot încerca să mă păcălești
prin tastarea în ceea ce valoare.
Sau, mai degrabă eu sunt cu adevărat verificarea prezenței
din șir gol, utilizatorul nu a scris nimic încă.
În cazul în care utilizatorul tastat în literalmente de zero,
"Zero" potential ar putea fi confundat cu un șir gol.
Și eu zic că e un fel de sens aici
pentru că, evident, chiar la zero nu este o adresă de e-mail.
Dar în cazul în care acest lucru a fost o mai câmp generic ca un câmp de text
sau un nume sau o descriere sau ceva ce vrei să valoare de
și nu este neapărat au sintactic
să fie o adresă de e-mail, utilizatorul ar trebui să scrie ceva de genul la zero
și din nou caz de colț, dar asta e de ce verificarea de obicei tipuri este
un lucru util.
Ești cu adevărat de verificare pentru utilizatorul care a scris nimic
în acest domeniu.
Deci, ce se întâmplă în cazul în care nici unul din aceste teste nu reușesc, ei bine,
revenind adevărat în interiorul de o tratare a evenimentului
ca onsubmit înseamnă doar lit comportamentul inițial efectiv
propaga și prin urmare formular vor fi transmise.
Și de aceea, atunci când am în cele din urmă făcut clic pe Remitere, înainte de am ajuns
până la register.html și dacă fac asta acum, aviz,
Am să strig la el, dacă nu-mi place furnizați o adresă de e-mail
și am posibilitatea să tastați în malan@harvard.edu,
Crimson [fonetic], purpuriu, verificarea caseta,
și acum registru și ea mi-a spus, din nou,
vă sunt înregistrate sau nu adevărat.
Bine.
Deci, hai sa curat asta doar o pic și apoi de tranziție
la noi mai nou chestii pe partea de server.
Deci, dacă mă duc într-o formă-2.html, observa câteva lucruri.
Deci, unul, am adus jQuery înapoi în amestec
deci nu este din nou acest semn dolar
și acum eu sunt, folosind unele metode jQuery.
Deci, în primul rând, despre ce este vorba semnul dolar care este
atât de special aici?
Care este semnul dolar dantelat în cea mai mare orice cod jQuery?
Da.
[Inaudibil Observație]
OK. Deci, funcția de semnul dolar trece prin DOM căutarea
pentru ceva cu acest special selector CSS.
Deci, adevărat, dar aproape prea precisă.
Asta este ceea ce se întâmplă atunci când treci într-un șir
ca și în acest caz, dar tu nu faci întotdeauna trebuie să treacă într-un șir.
De fapt, de la caz la punct, foarte prima linie de aici este acest lucru nu este o
Selector CSS, am trece într-o funcție Lambda.
Deci, în general - deci, răspuns bun, dar prea precisă.
Mai mult, în general, ceea ce este semn dolar reprezintă?
Doar >> jQuery.
>> Da. Deci, doar jQuery sau e doar o funcție
care câțiva ani în urmă tip a scris și alte persoane au
îmbunătățită de la care literalmente în mod implicit se numește -
Oops, se numește jQuery.
Este pur și simplu - se dovedește spre deosebire de o mulțime
de semn de limbi dolar este o simbol perfect valabil de a utiliza
in numele unei variabile în timp
în semn dolar PHP în mod evident, are o insemnatate speciala
dar în JavaScript ca în unele limbi, semnul dolar
și sublinia și alte astfel de caractere speciale în totalitate legal
pentru a utiliza în propriul simbol nume de variabile.
Deci, cineva a decis că, știi ce?
O să fie destul de plictisitor
pentru a face toată lumea tip jQuery tot timpul,
permiteți-mi un fel de planta o miză în pământ și spune,
"Această bibliotecă va folosi semnul dolarului. "
Și, de fapt, această ridică riscul
că altcineva îndrăzneală este de gând să utilizeze semnul dolar
pentru biblioteca lui sau a ei, dar există modalități de a fel de o asigurare
că atunci când utilizați dolarul semneze hărți de jQuery
pentru că puteți testa dacă acesta a fost deja atribuită
la altceva, în esență.
Bine.
Deci, asta e tot ce este, nu exista nici o magie.
E doar o sexy în căutarea bucată de sintaxă, care este frumos
și rapid și ușor de tip.
Deci, ce se întâmplă atunci când tip semn dolar paren deschise
și apoi o funcție anonim.
Ei bine, se dovedește că acest lucru este notație de fapt o prescurtare
pentru documentul dot paren deschis gata.
Deci, după cum a observat Cynthia mai devreme am găsit deja un
caz colț.
Dacă tocmai ați trece în funcția lambda,
efectul dolarului semn este un pic diferit.
De fapt, ceea ce se întâmplă cu adevărat este faptul că este echivalentă cu aceasta,
trecerea la o trimitere la obiectul documentului global
care este la nivel global la fel ca obiect fereastră este
care vă oferă unele funcționalitate deosebită
care afectează întreaga pagină sau browser-ul și se dovedește
în acest document, atunci când vă înveliți cu jQuery,
jQuery își dă seama, în esență, oh, aceasta este o referință
la acel obiect special de documente,
permiteți-mi acum înregistrarea unui handler eveniment numit gata
care nu este nativ JavaScript sau DOM legate.
Gata este un jQuery lucru care spune
atunci când pagina sa incarcat toate elementele HTML
dar nu neapărat încărcată, tot de CSS și imaginile
și fișiere JavaScript și clipi fișiere și îi place.
Deci, este un pas înainte pe de încărcare atunci merge mai departe
și să execute următoarele.
Și în sensul creșterii de utilizarea pe gata înseamnă este că puteți, știți,
că toate elementele în DOM dvs.,
toate identificate în mod unic lucrurile cu ID-uri, în care chiar există
dacă pagina, conținutul acestuia sunt încă de încărcare și de încărcare
și aveți unele icoane rupte pentru o clipă
sau pagină albă în fundal.
Da.
>> Ce s-ar întâmpla dacă [inaudibil]?
>> Exemplu perfect, o întrebare perfect.
Deci, să vedem dacă putem simula acest lucru chiar acum.
Deci, lasă-mă să mergeți mai departe și a șterge aceste două linii de până aici și apoi
fără a se obosi să se stabilească indentare, lasă-mă să merg mai departe
și ștergeți această aici - Oops, asta aici.
Și acum, lasă-mă să merg pe la pagină, du-te la forma-2.html și de tip
Inregistrare, nimic nu părea să întâmplă, să zicem, de ce a fost că,
Să mergem mai departe și deschide up inspector Chrome,
deschide Consola doar pentru a vedea dacă se întâmplă ceva aici, acum,
înregistra, încă nimic.
Deci, codul este sintactic fin
așa că nu văd nici o mesaje de eroare roșu,
dar ceea ce în mod clar nu se întâmplă?
Nici unul dintre codul meu este corect, nu este de lucru astfel încât nici unul
de coduri meu pare a fi de executare, așa că de ce este acest lucru?
Ei bine, JavaScript și browsere mai general, executa
conținutul unei pagini web, top în jos, la stânga la dreapta.
Iar problema este că, deoarece partea de sus
din această pagină a HTML apoi capul apoi script apoi un alt script,
acest lucru se întâmplă pentru a fi executat înainte de ceea ce este chiar gata,
sau chiar există în arborele reprezentare a paginii.
Forma în sine, nici chiar există corp în acest moment.
Deci, jQuery este suficient de inteligent cu verificarea erorilor ea lui
că, dacă nu există nici un element cu ID-ul unic de înregistrare,
ea nu va salva pe tine
și chiar declanșa unele consolă eroare și rupe toată pagina,
o să ignore tăcere tu, dar motivul pentru care nici unul
din acest cod execută vreodată este
pentru că atunci când aveți înregistrat acest prezinte handler,
nu a existat nici un element să-l atașați la.
Deci, e un fel de nici un op acolo.
Deci, prin specificarea în schimb, așteptați până la vârsta sa incarcat
dacă am făcut window.onload lucru care este un fel
de modul vechea scoala de a face sau modul de sexy jQuery
ca aceasta, putem spune-l aștepte până când toate
din aceste tag-uri HTML au astfel a fost analizat încât chiar
dacă imaginile nu s-au încărcat, la Cel care este nod în arborele,
atunci JQuery poate asigura că totul este acolo.
Da.
[Inaudibil Observație]
Da, bine, da, absolut.
Deci, altă soluție pentru acest lucru, dacă nu ați folosit acest
sau nu-mi amintesc că aceasta a existat,
ai putea trece absolut toate acestea la partea de jos
a paginii web, în ​​interiorul corp încă, dar sub forma
și că ar fi, de asemenea, rezolva această problemă.
E doar de obicei, considerată o practică rău.
E un pic murdar și neglijent special
dacă vă păstrați bruiaj totul la partea de jos a paginii,
mai ales atunci când am păstrarea lucruri simple de a pune toate
de codul meu interior a paginii HTML
atunci, desigur, se poate cu siguranță intra în obiceiul
de factoring-l într-un fișier separat
moment în care e doar frumos
de a centraliza fișiere în cap.
Cu excepția există un preț pe care îl plătiți
prin punerea JavaScript alte active, cum ar fi fișiere CSS
în capul paginii, ceea ce e un risc pe care o conduceti?
>> Lent de încărcare a paginii.
>> Lent de încărcare a paginilor, de ce?
>> Pentru că încercăm pentru a încărca toate bibliotecile
înainte de [inaudibil].
>> Exact deoarece browserele citi codul de sus în jos,
la stânga la dreapta în cazul în care Google Google Analytics sunt lente
sau jQuery CDN este lent sau API-ul Facebook este lent
și că fișierul doar atârnă potențial în funcție de
de modul în care încărcat acel fișier, pagini întregi ar putea să apară să stea.
Și dacă vedeți acest o mulțime sincer
pe site-urile au o mulțime Anunțuri de calitate a scăzut
pe ele, suntem doar unul lent sau site-ul doborât ar putea închide o pagină
pentru unii nedeterminată numărul de secunde
până când în cele din urmă browser-ul sperăm, ori pe care
și apoi vă arată restul paginii.
Deci, dacă ați folosit vreodată cum ar fi Facebook, cum ar fi buton,
în pagina dvs. de web, permiteți-mi să a se vedea dacă pot găsi acest
fără a fi nevoie să vă conectați la aici.
Deci, dacă te duci la Buton Facebook
și faceți clic pe un cod GET, la naiba,
haideți să vedem dacă putem găsi exemplu,
cu siguranță cineva a postat acest.
[Pauză]
Voi renunța la câteva secunde, dacă nu vedem acest lucru.
Facebook asynch - OK.
Deci, acesta este codul și, cu excepția cazului le-am schimbat recent
Facebook că de fapt vă recomandă să utilizați
pentru a încărca biblioteca lor și de fapt, să propună
că ai pus acest lucru în corpul paginii.
Deci, Facebook va sfatuieste a crea un fel de stupid DIV
care are doar ID-ul unic ca acest lucru, atunci au o etichetă script
și toate acestea complexitate are, în esență, următoarele
și ei nu folosesc nici un JQuery pentru că ei nu doresc
să-și asume orice alte dependențe,
lasă-mă să mut asta peste doar un pic.
Deci, observa ei au o Funcția anonim aici,
mai mult pe faptul că într-o clipă,
pe care o folosesc atunci document.createElement,
acestea sunt crearea unui element de DOM, acest lucru este ca malloc ca să spunem așa
unde eticheta este de tip script-ul, este apoi specificând
că atributul asincron de care tag-ul se va
pentru a fi adevărat, atunci te duci mai departe și dau seama ce URL-ul
de Facebook JavaScript ar trebui să fie
și acest lucru este doar modul de lux
de verificare ar trebui să fi HGP sau HDPS.
Și apoi în cele din urmă, te observați ce face Facebook,
ei a lua nodul DOM care are un ID-ul de Facebook rădăcină
care este ceea ce au spus de a pune în pagină
și apoi adăugați ei copil astfel încât efectul de toate acestea este
la fel de dinamic injecta o nouă etichetă script în pagina dvs.
ca un copil de DIV pe care le introdus acolo, astfel încât restul
de pagină se încarcă fericiti
iar apoi acest cod de fapt devine încărcat asincron.
Deci, în esență, după fapt și am amânat mențiune
a funcției anonim,
Ce-i asta funky, Sintaxa referindu-se la aici
atunci când am nu numai funcția de deschide, paren aproape paren
și apoi acolade, de ce paren deschise aici
și apoi aproape deschis, aproape paren acolo, ce e asta face?
>> [Inaudibil] definirea și apoi executarea?
>> Exact, este definirea unui Funcția care este anonim
ci doar definind o funcție,
desigur, nu se executa o funcție până când îl numesc
de nume, dar, desigur, acest lucru este o funcție anonim
astfel încât să nu se poate numi de nume, dar se poate
în JavaScript executa o Funcția anonim doar
de încapsulare totul în paranteză cum am făcut
cu această paren și această paren aici și apoi o fixare
la sfârșitul funcției paren deschise, paren apropiate,
dacă nu doriți să trece un argumente.
Dar acest lucru pare un fel de prost,
ca de ce această suplimentare complexitatea sintactică
că majoritatea oamenilor nu par să recunoască, ceea ce este valoarea
de ambalaj cei trei linii de cod
într-o funcție anonim în acest mod.
Da.
>> Pentru a evita suprascrierea o valoroasă în [neauzit].
>> Exact, pentru a evita suprascrierea unei variabile
în pagina existent, corect?
Facebook este oarecum a decis îndrăzneală,
au de gând să utilizeze variabilă E, e destul de probabil
că tu sau oricine, folosind Facebook ca buton
sau orice alt plug-sociale
într-are o variabilă numit undeva E. Deci,
prin încapsularea toate de cod în interiorul lor
acestei funcții anonime, ele au, în esență, propria lor domeniul de aplicare
că nu risca platesti orice variabile existente.
Deci, acest lucru prea este de fapt o paradigmă foarte frecvente,
mai ales atunci când scrieți un cod de bibliotecă
sau atunci când tu nu faci Vreau să dezordine spațiul numele dvs.
cu alte variabile tine Vreau valoarea de a trăi
și mor odată ieșiți din că bloc de cod,
aceasta este o tehnică frumos în JavaScript.
Bine.
Deci, apoi înapoi la acest exemplu aici, tot ce am făcut în cele din urmă
cu acest exemplu este doar curățat codul.
Deci, ea are încă un întreg buchet de switch-uri, o grămadă
condițiilor de aici, dar observa un pic de sintaxă,
acest accesează nodul DOM cu înregistrarea ID-ul unic,
mijloacele spațiu uita acum pentru un descendent de care nod,
găsi în cazul în care este de tip de intrare și apoi chiar
dacă nu ați văzut acest lucru înainte, s-ar putea ști
că acest lucru înseamnă doar a găsi l cu eticheta de intrare,
elementele de intrare care are o atribut de nume cu o valoare
de e-mail, și apoi să mi cu mâna mea la un
de restul nu este toate că stimulativ
dar de fapt doar sintaxa jQuery pentru aceleași operațiuni.
Bine.
Dar ceea ce nu este atât de important aici este chestii lateral browser
ci mai degrabă faptul că noi a avut metode mai curate și mai curat
de fapt, a face codul muncii.
Bine.
Orice întrebări?
[Inaudibil Observație]
OK. Acum, partea distractivă.
Deci, node.js De ce?
Cui îi pasă?
Ce știi despre ea azi?
Node.js, de ce?
Henry [asumat ortografie].
[Inaudibil Observație]
Resetare a bateriei?
Ce - aceasta este o cuier stâncă perfectă
pentru a doua jumătate de azi.
De ce nu mergem și să ia o pauza de 5 minute aici,
există o jumătate de bomboane masina de acolo, dacă ar fi
ca niște bomboane fără pune un sfert inch