>> Redu.
Dakle, JavaScript.
Gotovo svatko u ovoj sobi Vjerojatno ima neki stupanj
udobnosti s njim bilo to je put natrag kada je u SC50
ili je to bila osobna web projekti ili čak
ako sam malo toga s ovaj prošli PHP baza projekta,
, ali za većinu dio, mnogi od vas,
čak i ako imate neku utjehu
sa JavaScript možda nisu poduzete
zdravo za gotovo kako Jezik djela i ono što ide
na ispod poklopca motora i ono što ćemo pokušati
to učiniti i danas je oguliti natrag Neki od tehničkih slojeva
onoga JavaScript je, kako razlikuje od jezika
kao što su PHP, kako mogu biti koristi ne samo klijent,
ali i strani poslužitelja i zatim se usredotočite vrlo konkretno
na tom okviru, obavijest nema JS koji je u biti vrijeme rada,
Program s kojim ste može izvršavati JavaScript kod,
strani poslužitelja i to je sve sve popularniji vrsta
od istog stasa ova dani vjerojatno Ruby i PHP
i Python i vidjet ćete
da ima neke prilično moćne značajke po putu nekih
na ugrađenom jeziku konstrukti.
Ali prvo, neke jednostavno stvari samo da vas podsjetim
kako se to radi i jezik ako imate problema vide bilo
ove, samo povik , a mi ćemo prilagoditi.
Dakle, jedan je kao u PHP postoji nema pojam glavne funkcije,
samo početi pisati kod
a vi se za njih tumačiti vrha do dna.
U kontekstu pregledniku
ili na strani nešto poslužitelja vidjet ćemo neke primjere
u malo.
Uvjeti, sintaktički ekvivalent PHP i C,
C + + i neki drugi jezici pa samo da vam dati osjećaj
kako bismo mogli to strukturu,
postoji samo kanonsko stanje.
Boolean izrazi, isti sintaktički kao što ste vidjeli
u tim istim drugima jezika, i za ORing
i za kraj stvari zajedno.
JavaScript ima prekidače, baš kao i PHP i drugi Napravimo
i niste ograničeni, kao što su u C do integralnih primitivci
poput znakova i Ints mogu zapravo raditi druge vrste vrijednosti.
Loops. Dakle, ovo isti
a vjerojatno i mnogo jezika, dok petlje, učiniti dok petlje
i onda je to trik ovdje.
Dakle, to je vrsta poznat kao brzo popisivanja
i to je vrlo pametan način samo kao u PHP radi
za svaki FU kao bara možete na sličan način,
u JavaScript objekt, gdje je objekt imena
od promjenjivog ovdje, recimo, var i. u objekt i na svakom ponavljanju
ove petlje, sam je će biti jedan
od ključeva iz tog objekta.
Dakle, ako imate objekt za Student i studentica ima ID
i ime i kuća, iteratively ja ću uzeti
vrijednosti ID i ime i Kuća i možete njih index
u objekt kao da je Niz pomoću uglata zagrada
Oznaka za dobivanje vrijednosti od ključnih ID ili naziv
ili kuće i tako dalje.
I suprotno uvriježenom Pretpostavka, JavaScript objekata,
svojstva nisu nužno zasigurno biti
po istom redoslijedu, to je također Istina u PHP pa nemojte pretpostavljati
da će se stvari ostanu u istom redoslijedu
da staviš ključ vrijednost parova u objekt.
Kako o poljima?
Postoji nekoliko načina to napisati sintaktički
ali to je vjerojatno uobičajene sada samo pomoću trgu
Nosač zapis.
Dakle, ovo je varijabla pozivne brojeve koje sadrže niz
od šest brojeva tamo, Ovdje je jednostavan niz
i primijetiti ono što je odsutno od tih primjera,
Što je JavaScript očito nedostaje.
Da. Dakle, ne postoji pojam tipkanja, sigurno ne
U tom kontekstu ovdje, ali ovo je doista niz.
Dakle, JavaScript mora vrste i da je doista niz
koja je sama po sebi vrsta i svaki od elemenata
na tom polju su tipa broj kao JavaScript ih poziva.
Dakle, to je labavo upisali jezik, pa ćemo vidjeti
da JavaScript poput PHP ima operatera identitet
i drugi mehanizmi za zapravo provjere što tipu
nekih varijabla i za provjeru pogreške
i za druge primjene.
I ovdje je uzorak objekt sadrži samo ime i ime.
I sada, primijetiti da smo korištenjem kovrčavu noseći zapis,
utiskivanja i bijeli Prostor je vrsta besmisleno
i to izjavljuje varijabla čije ime je Rob
i čija je 1 i ID tipa datum je ovdje naš broj
i gudački respektivno.
A onda je to nešto malo drugačije
Ako ste ikada učinio ništa Ajax s ovih dana?
Vjerojatno koristi Predmet ovako
ali ono što je vrijedno napomenuti ovdje?
Što je sintaktički ikad toliko različiti, samo par
stvari između ovog primjera koji je doduše manja
i to veći primjer.
Dakle, prvi put u laik termin, što je ovo?
Koja je vrsta Osoblje bi ti rekao?
OK, to je polje, to je niz od čega?
>> Objekata.
>> OK, to je niz objekata.
I sada, usredotočiti na samo jedan - bilo koji od tih predmeta,
što se promijenilo između ovog i toga?
>> Tipke su žice.
>> Da. Dakle, Tipke su žice,
a tipke su zapravo žice u oba slučaja
i to je neka vrsta idiotski
po mom mišljenju povijesnog dizajn Odluka svaki put kada koristite
JSON, JavaScript Objekt zapis,
koji je u suštini prijevoz format
za slanje podataka obično preko mreže
između klijenta i poslužitelja, morate zapamtiti
da to nije zapravo vrijedi JSON i to je jedan
ovih FYIs osim ako ikad lupati glavom o zid
za nekoliko minuta bez dobrog Razlog, to ne vrijedi JSON
jer su tipke zapravo ne kotiraju.
JSON idiotski zahtijeva da ključevi ne samo da se citira,
, ali da su se dvostruko citirani, jednostruke navodnike nisu dovoljni.
Dakle, glupa mala stvar i više od zabave stvari
za današnje potrebe, ali to također će biti valjana JavaScript
to je samo ne - Obrnuto ne vrijedi.
U redu.
Dakle, vidjet ćemo puno više od toga.
U redu.
Dakle, to je JavaScript sintaktički vjerojatno prilično
upoznati, bilo koji od vas koji imate nikad ne koriste JavaScript prije
to nije veliki skok od PHP ili većina bilo proceduralni jezik
da biste mogli imati koristi.
Dakle, danas ćemo se usredotočiti na zanimljivih aspekata
JavaScript posebno u kontekstu bez JS
ali ne isključivo zbog do sada ste vjerojatno,
ako se koristi Javascript, koristi ga unutar pregledniku.
Dakle, nema JS je okolina onda u malo ide
kako bi se omogućilo nam da pristup JavaScript kod klijenta -
strani poslužitelja, ali prvo, neka je pogledati
na nešto što je malo više na strani klijenta.
Dakle, ja sam otišao u, a to je povezano na internet stranici tečajevi,
ako želite igrati zajedno, Postoje dva poddirektorije
u današnjem Zip od zove izvor privjescima zip na web stranici
i to su samo Nekoliko primjera Prisjećajući
stvari koje možda nisu vidjeli prije, a ja ih nekako izgrađena
gore od najjednostavnijih do blago složeniji zafrkavati
neke od značajki JavaScript.
Dakle, idemo naprijed i uzeti tražiti primjer na to.
Dakle, nažalost treptaj tag je ubijen je prije nekoliko godina
kao način dobio ljepše i ljepše
i treptaj tag je doslovno otvorena zagrada trepnuti zatvoriti nosač
i to kakve nema duže s nama.
No, još uvijek možemo oživjeti ova ideja o oznaci koju samo vrsta
razmišljanja o tome logično, kako idete
o izradi nešto ovo trepnuti intuitivno?
Pod pretpostavkom da znate malo Malo JavaScript i CSS ili
u ovom trenutku, to je U redu, ako to ne učinite.
>> Postavite vrijeme van i sakriti to onda poslije ću ga označiti
van i opet pokazati ga.
>> Da, savršen.
To je vrsta programiranja 101,
Kako biste postigli vizualni efekt kao što je ovaj?
Pa, na neki način morati pokazati nešto
, a zatim nešto sakriti, predstavu nešto, nešto sakriti
i kao Jonathan predlaže koristeći neku vrstu time-out,
nekakav raspored možete učiniti ovaj puta bez potrebe
koristiti petlju ili nešto slično.
Dakle, dopustite mi da odem u Blink-0.html
i neka mi psihijatar Font malo
tako da ovo više paše.
I neka je pogledati na ono što se ovdje događa.
Dakle, prije svega, primijetiti da je tijelo
ove stranice je super jednostavna, unutar tijela
na stranici je samo div.
Ja sam samovoljno dao ID pozdrava
i koji bi mogao biti bilo tako dugo kao što je jedinstven
i onda sam samo neke jednostavan tekst, hello world.
Dakle, ako ja sada pomicali prema gore, primijetiti neke fluffy styling.
Dakle, ja kažem, oštri pozdrav, koji kao što znate
CSS samo znači jedinstveno identificirati element
s idejom pozdrav,
veličinu fonta ide proizvoljno biti ovaj, marža i tekst poravnanje.
Dakle, nezanimljiv estetski detalji
okvirno centrirati tekst.
Dakle, zanimljiv dio je u skripti tag ovdje
što sam se dogoditi da se stavi unutar glave stranice.
Dakle, Doći ćemo - što možete učiniti to u bilo koji broj načina
pa ćemo vidjeti nekoliko ponavljanja tog istog programa
ali krenimo od početka.
Dakle, ja sam proglasio funkcija zove treptaj
i očito je ovo koristi Ugrađeni DOM metodom zvanom
getElementById što je možda jedan od moćnijih metodama
da ste dobili iz kutije sa JavaScript u potrazi za
"Pozdrav" ne mora biti dvostruko citati kao da je
u HTML je bilo je u redu tako dugo
kao što su stilski dosljedna ovih dana usudio bih se reći
mnogi ljudi koriste Javu, jednostruke navodnike u JavaScriptu,
dupli navodnici u HTML ali to zapravo ne smeta
tako dugo dok ste dosljedni.
Dakle, ovdje ako niste upoznati, zapravo možete pristupiti
sa JavaScript CSS Svojstva elemenata.
Dakle, primijetite da sam proglasio varijabla zove div
i pohranjene unutar te varijable,
referenca na ono što koji DOM element je.
Dakle, ako se prisjetite da CS50 ili bilo klasa u kojima ste mislili
oko stabla strukture i DOM, Document Object Model,
ovo je samo referenca na čvor u drvetu,
koji predstavlja ovu stranicu
a ako div.style.visibility imovina iznosi, iznosi, iznosi,
skriveno, onda sam samo želim ga preklopni
kao Jonathan predložio inače želim
za uključivanje na to skriveno.
Sada, kako je na strani, zašto triple jednako postoji?
Ili što je to u odnosu na dvokrevetne jednaki?
>> Strogo ekvivalent.
>> Sorry.
>> Strogo ekvivalent.
Dakle, to je identitet operaterima
gdje je po provjeravate ne samo vrijednost varijable
kao ravnopravan, jednakom smislu ali i tip toga.
Dakle, iako nemamo ovako daleko navedeno sve podatke
vrste za bilo koje varijable u ovu ili bilo koju od slajdova,
postoji tip povezan s tim niz skriveno
s tom vrijednošću, sakrivena i koji je, naravno, niz.
Dakle, u ovom slučaju, to zapravo ne smeta
jer ne postoji način da se idemo stopiti niz
od "skrivenih" s neke druge vrijednosti
ali to je često dobar Navika Ja bih rekao da se
u koristeći jednaka, jednaka,
znak jednakosti općenito dobra stvar.
To će učiniti vaš kod više robustan kako u PHP, ali
i JavaScript jer ćete izvoditi
u povremeno kutak slučajevima gdje se vrijednost može biti nula
da ste provjere i nula se spajaju s lažnim
ili bi mogla biti i kao u PHP,
Loše previše može imati više Lažno vrijednosti gdje nulom
i lažno i ništavan i nedefinirana sve može riješiti implicitno
false.
Ali, ako ste stvarno žele provjeriti za određenu vrijednost
kao nula, broj ili lažno Boolean onda imate
koristiti taj operator identiteta.
Dakle, moglo bi se dogoditi da se u svakom slučaju, iako ovdje,
to je nekakav besmislen jer znamo da smo provjerom
za gudački vrijednosti i to je ne će biti bilo što drugo.
Dakle, ovdje je magija onda, ako ja pomaknite se dolje do ove linije ovdje,
očito, izgrađena u prozor objekta
i to je svojstvo preglednik može se pristupiti
to super globalni Objekt se zove prozor,
unutar koje je neke funkcionalnosti,
ako od kojih dio postavljena interval
i to traje očito kakvim se argumentima?
Da.
>> Funkcija poziva i vrijeme.
>> Dobro. Dakle, funkcija nazvati i vrijeme
i tako osobito upućivanje na funkciju,
pointer na funkciju u smislu
i to je funkcija da će
da se izvršava svaki broj milisekundi, au ovom slučaju,
to je svakih 500 milisekundi.
Dakle, to je način poticanja učinkovito i klapa
bez korištenja iteracija, ali umjesto da govori JavaScript
na motor unutar od pregledniku
to učiniti svaki 500 milisekundi ili blizu
500 milisekundi kao što može,
ispada da ispod poklopca motora,
postoji ono što se zove događaj petlje, a mi ćemo se vratiti na to
u kontekstu čvor JS da samo stalno vrsta
sjedi tamo, vrti, čeka posla koji treba obaviti
i čim se ostvari,
500 milisekundi prošlo Blink će se ponovno pozvao
i opet i opet uz bilo kojeg drugog posla
koji treba obaviti.
Dakle, ono što možemo poboljšati ovdje?
Pa, neka mi otvoriti do Blink-1.html
i pokazati Blink-1.html
kao estetski savršeno identični.
Dakle, ono što bismo mogli poboljšati ovdje?
Pa, primijetiti da je je vrsta beskorisno
definirati funkciju nazvanu Blink, jer koliko
u koliko mjesta nisam pozvati funkciju trepnuti?
>> Samo jednom.
>> Dakle, jedan.
Dakle, nije bilo loše, u Činjenica da je vjerojatno prilično
ravno naprijed.
Ja definirati funkciju trepnuti, ja pozvati funkciju treptaj putem
ovog parametra, ali tehnički,
nije bilo razloga za je i zajednička paradigma
u JavaScriptu je zapravo iskoristiti lambda funkcije
kao što vam je poznato iz 51 ili anonimne funkcije
gdje, ako vam ne treba Naziv za funkciju,
ako ste samo ga zovete sigurno na jednom mjestu,
zašto se gnjaviti nered svoj kod, nered programera um
i vaše ime prostora stvarno sa simbolima
da ti zapravo ne potrebno voditi brigu o tome.
I tako, u ovoj verziji ovdje,
primijetiti da zovem window.SetInterval izravno
na samom vrhu moje script tag onda sam prolazi
u bezimeni funkciji koja se ne potkrjepljuju
i to je savršeno u redu, a zatim tijelo
te funkcije čini se identičan onome što je bilo prije
i samo sintaktička Razlika je sada
ovdje pored 500.
Ja sam zatvaranja tijelo funkcije
a onda sam rekao izvršavati taj prethodnog koda,
svakih 500 milisekundi.
Dakle, vrlo marginalna promjena
, ali je korak prema onome što je Vjerojatno elegantnije
Provedba toga.
Dakle, neka je uzme ovaj jedan korak dalje, ako mi sada ići
u tren dva, vi ćete vidi zajedničku knjižnicu,
Efekt koji će
biti potpuno nevažnom estetski, ali ako ćemo ići
u verziji dva ovdje, obavijest da je na vrhu moje glave,
Ja sam uključen Najnovija verzija jQuery.
A onda, tu dolje, Upravo sam očistio
do koda malo, to je ne će biti zabavno svijet
nastaviti koristiti izvorni DOM funkcije
i vrsta sirovog JavaScript.
U stvari, jQuery kao što svibanj Znam je postala toliko popularna
da većina ljudi jednostavno Sukob s jQuery JavaScript
ali zapravo samo večeru korisna knjižnica napisana
od strane kolega po imenu Ivan Resig i od drugih
da imaju samo čini Mnogo zamornih stvari
u JavaScriptu lakše i jezgrovit.
Dakle, u tom slučaju Evo što se događa?
Dakle, imam ovu pojavu znak dolara, više o tome
u samo nekoliko trenutaka, a zatim ovo je selektor CSS.
Dakle, to je vrlo sličan u Duh na ono što sam radio prije,
, ali ovaj put, ja sam doslovno pomoću hash tag
naznačiti jedinstveno identifikator naziva pozdrav
a onda očito . CSS je način izgrađena
u što god objekt je da sam upravo stvorili
i da provjeravam vrijednost od ključnih vidljivosti.
A ako je vrijednost tog ključa jednaka, jednaka, jednaka, skrivena,
onda idem za uključivanje i Ja ću ga prebacite ovaj put
pomoću iste metode što je očito preopterećen
u smislu da ona ima dva različita potpisa,
onaj s jednim argumentom i onaj s dva argumenta,
drugi od kojih je seter,
Bivši od kojih je dobavljač da se tako izrazim.
A ako znatiželjni a ako želite zapravo nikad pogledao to,
ako ćemo ići na jquery.css nadamo top hit je doista to
i možete vidjeti više formalno objašnjenje
da mi samo koristiti ovaj, . Css sa nazivom nekretnine
a zatim seter je dot CSS
s imenom nekretnine te vrijednosti.
Dakle, marginalno čišći, ali primijetiti isti obrazac ovdje
sa svakom iteracijom ovog zakona,
mi smo vrsta što ga jače i jače i jače
i tamo kažu bolje dizajne
jer smo se pomoću nekoga drugi kod koji je eliminiran
Neki od složenosti.
Dakle, sada ćemo napraviti to je još jednostavnije.
I zapravo, ako sam ukloniti sve citati ćete vidjeti baš sve
komentirati vidjet ćete kako jednostavno to je stečen.
Jedna razlika Ovdje, naravno, je
da sam koristeći promjenjiv metoda koja također dolazi s ugrađenim
na jQuery i da je samo
zato što netko drugi pisao kod
koji zapravo prebacuje Postavka vidljivost
bilo DOM elementa da li ga poslati.
Dakle, sve bolje i bolje.
I tako, ovo je uzorak,
iako je to večera Jednostavan primjer i sortirati
glupo neto učinak koji je treptanje komad teksta,
To je vrsta razmišljanja proces koji bi trebali misliti -
se razmišlja o tome da ne nužno prvi
pasivni pisanje nešto za predstojeće projekta
ali sigurno kao što ponoviti sa svojim savjetnikom ili sa mnom
i vaš tim sastancima ili ste samo pregledati svoje suigrače kod
o zatezanja stvari, zar ne?
Uostalom, oni su manje -
kako manje linija koda što u konačnici imati
u teoriji je sve manje bugova vi vjerojatno će se pozivaju
jer su jednostavno manje koda zabrljati gore sa.
U redu.
Dakle, nekoliko takeaways.
Lambda funkcije, anonimne funkcije,
mnogi od koje vidio prije
, a zatim i samo zatezanja stvari s knjižnicom
kao što je jQuery u to Poseban slučaj.
U redu.
Ima li pitanja?
Idemo napraviti jednu drugu klijent, aspekt ovdje,
u obliku nula imamo ova neto učinak.
Super jednostavan oblik i očito ako sam pokušati kliknite prijaviti ovdje,
u početku to mi govori da ste registriran, dobro, ne baš.
Pa, zašto je to tako?
Pa, evo oblik-0.html vrlo malo koda,
nitko JavaScript god i to je potpuno lažna vrsta
forme, jer akcija vrijednost je registered.html
što znači da bez obzira na sve I tip u ovom obliku,
gdje će to biti poslan na poslužitelj?
Da. Dakle, to registered.html što je jasno HTML datoteke
koji je, dakle, statički file koji nema sredstva
uzimanja korisničkog unosa uz pretpostavku nema kod JavaScripta
ugrađen u to da je gleda u URL
pa to je sasvim NOOP i da ništa što će se dogoditi
s dostavljenih podataka, ali možete vidjeti strukturu
od prilično jednostavan HTML5 obliku
da ima nekoliko lozinku, Nekoliko vrsta ulaz.
Dakle, neka je zapravo sada dodati neke provjera
i vidjeti koliko smo mogli poboljšati ovaj.
Dakle, ovdje je nekako loša čovjekov način provedbe ovog
i to je neka vrsta gadan komad koda.
Dakle, prvo neka se scroll do dna
da se vidi što je ista i ono što je različito.
Jedina stvar drugačija sad između ove
i prethodna verzija je da sam dao oblik i ID
od "registracija" mogla biti bilo što želim
ali je značilo da se jedinstveno identificirati ni to nije
to nužno potrebno, jer ako stranica ima samo jedan oblik sigurno sam
mogao naći s jednim od jQuery je metode selektor.
No, na taj način samo čini to više deterministička.
Dakle, ako odem do sada na mojoj skripti tag, primijetiti sljedeće,
window.onload jednaki anonimna funkcija.
Dakle, što to radi?
Dakle, možda ćete se sjetiti da je u klijent-side programiranja -
JavaScript radije HTML stranice su razne događaje povezane
s elementima, klikanje i podnošenje i fokusiranje
i zamućivanje i druge takve događaji koji bi se moglo dogoditi
kao korisnik obično komunicira sa stranice,
window.onload čini ono što kaže.
Na Windows cijelog utovara
pa kad sve slike su skinuti odjednom sve datoteke
preuzeto i jednom stranica je učitan,
učiniti sljedeći kod, a primijetiti ako se prebacite na dnu
ove metode, koja obavijest nema zagrada
nakon kovrčave vitice što znači
da nisam izvršavanju ova funkcija do sada ovdje,
Preglednik će se izvršiti to za mene, kada je utvrđena
koja stranica učita.
Dakle, da vidimo što smo napravili,
document.getElementById registracija
tako da samo mi daje pozivanje na čvoru
u stablo koje je od mora ID registracije.
I sada, ja ću Registrirajte drugi događaj rukovatelj
obavljajući form.onsubmit dobiva ova anonimna funkcija
što znači da se slijedeće kod treba izvršiti kad
da je obrazac podnesen.
Sada, većina to je samo nekako dosadno logiku.
Dakle, ako je vrijednost Polje e-mail u obliku je
"Ništa", onda morate dati svoju adresu e-pošte,
li vikati na korisnika s upozoriti, a zatim se vratiti false.
I onda ja imam hrpa drugih provjera,
pregledi za lozinkom,
provjerava je li Lozinke su isti,
se provjerava da li ugovor potvrđen okvir ili ne
i samo sam vikati na Korisnik ukoliko
od tih testova zapravo ne.
I tako, ovdje je primjer još iako je malo neprirodan
Ovdje je činjenica da sam koristeći jednako, jednako, na jednak način,
znači da korisnik Ne možete me pokušati izigrati
upisivanjem u kojoj vrijednosti.
Ili bolje da sam doista za provjeru prisutnosti
na prazan niz, korisnik nije upisali još ništa.
Ako korisnik unese u doslovno nula,
"Nula" potencijalno moglo biti miješati s prazan niz.
A ja tvrdim da je neka vrsta beznačajnih ovdje
jer očito čak nula nije e-mail adresu.
Ali ako je to više generička polje kao i tekst polju
ili ime ili opis ili nešto što želite vrijednost za
i to nije nužno sintaktički imaju
da se e-mail adresa, korisnik mogao upisati nešto poput nule
i opet kutak slučaj, ali to je Zato obično provjerom vrste je
korisna stvar.
Vi ste doista provjere Korisnik koji su upisali ništa
u tom području.
Dakle, što će se dogoditi ako nitko od one testovi ne uspijevaju, dobro,
povratka istina unutar od događaj rukovatelj
kao onsubmit samo znači Let Izvorni ponašanje zapravo
propagirati i stoga obrazac će se dostaviti.
I to je razlog zašto, kada sam napokon kliknuli predati prije nego što sam dobio
do register.html i ako sam to učiniti sada, obavijest,
Ja bi vikao na ako neću adresu e-pošte
i ja mogu upisati malan@harvard.edu,
grimizno [fonetski], crimson, označavanjem okvira,
i sada se registrirali i to mi govori, opet,
ste registrirani ili stvarno ne.
U redu.
Dakle, idemo počistiti samo malo i onda tranzicija
da novi noviji poslužitelj strana stvari.
Dakle, ako uđem u obliku-2.html, primijetiti nekoliko stvari.
Dakle, jedan, sam doveo jQuery natrag u mix
tako da je opet ovaj znak dolara
a sada sam koristeći neke metode jQuery.
Dakle, prvo, o čemu je riječ Dolar je znak da je
tako posebno ovdje?
Što je znak dolara začinjena tijekom većine bilo jQuery koda?
Da.
[Nečujno Napomena]
OK. Dakle, znak dolara funkcija prolazi kroz DOM potrazi
za nešto s tim Posebno CSS selektor.
Dakle, istina, ali gotovo previše precizan.
To je ono što se događa kada prođe u nizu
kao u ovom slučaju, ali ne znaš Uvijek moraju proći u nizu.
Naime, slučaj u točki, vrlo prvi red ovdje to nije
CSS selektor, ja sam prolazi u funkciju lambda.
Dakle, općenito - pa, dobar odgovor, ali previše precizan.
Općenitije, što je Dolar znak predstavlja?
>> Samo jQuery.
>> Da. Dakle, samo jQuery ili je to samo funkcija
da je neki tip prije godina napisao i drugi ljudi imaju
budući da je poboljšana doslovno po defaultu se zove -
Ups, naziva jQuery.
To jednostavno - ispada se za razliku od puno
jezika znak za dolar je savršeno valjana simbol za korištenje
u varijabli ime, dok
u PHP znak dolara očito ima posebno značenje
ali u JavaScriptu kao u neki jezici, znak dolara
a naglašavaju i druge takve posebni znakovi potpuno čitljiv
za korištenje u svoj simbol imena za varijable.
Dakle, netko je odlučio da, znate što?
To će biti prilično dosadan
da bi se cijeli svijet upisati jQuery cijelo vrijeme,
neka mi nekako posaditi udjela u zemlju i reći,
"Ova knjižnica će koristite znak dolara. "
A u stvari, to ne povećavaju rizik
da je netko drugi drsko će koristiti znak dolara
za njegovu biblioteku, ali postoji način da se nekako se osigurati
da kada koristite dolar prijavite se preslikava na jQuery
jer možete testirati ako to je već bio dodijeljen
na nešto drugo bitno.
U redu.
Dakle, to je sve što je, ne postoji čarobna.
To je samo seksi izgleda komad sintakse koja je lijepa
te brz i jednostavan za tip.
Dakle, ono što se događa kada se upisati znak dolara otvorene zagr
a zatim anonimna funkcija.
Pa, ispada da je ovo zapravo skraćenica
za dokument točkom spremni otvoreno zagr.
Dakle, što je Cynthia primijetio Ranije smo već pronašao jedan
kutak slučaj.
Ako ste upravo prolaze u Funkcija lambda,
Učinak dolara Znak je malo drugačija.
Zapravo, ono što se stvarno događa da je jednak tome
prolazi u odnosu na globalni objekt dokument
da je globalna baš kao Prozor objekt
koji vam daje neke posebna funkcionalnost
koja utječe na cijelu stranicu ili browser i ispada
iz tog dokumenta kada što ga zamotajte sa jQuery,
jQuery suštini shvaća, oh, ovo je referenca
na taj poseban objekt dokumenata,
neka mi sada registrirajte događaj rukovatelj zove spremni
što nije materinji JavaScript ili DOM odnose.
Spreman je jQuery Ono što govori
kada stranica učita sve HTML elemenata
ali ne nužno učita, sve CSS i slike
i JavaScript datoteke i Flash datoteka i voli.
Dakle, to je korak prije Na teret onda ići naprijed
i izvršiti sljedeće.
A naopako koristite na spremni znači da možete, znate,
da su svi elementi u svoj DOM,
sve jedinstveno identificirati stvari uz IDS, oni postoje i
ako stranica, njezin sadržaj su još uvijek učitava i učitava
i imate neke slomljena ikone za trenutak
ili bijelu stranicu u pozadini.
Da.
>> Što će se dogoditi ako [nečujan]?
>> Savršen primjer, idealno pitanje.
Dakle, da vidimo što možemo simuliraju to upravo sada.
Dakle, neka mi ići naprijed i izbrisati ove dvije linije se ovdje i onda
ne trudeći se popraviti udubljenje, neka mi samo naprijed
i izbrisati to ovdje - Ups, ovo ovdje.
I sada, pustite me na to stranica, idite na obrascu-2.html i vrsti
Registrirajte se, ništa se činilo da dogoditi, recimo, zašto je to bilo,
idemo naprijed i otvoriti do inspektora Chrome,
otvoriti konzolu samo da vidim ako se nešto dogodi ovdje, sada,
Registrirajte se, još uvijek ništa.
Dakle, kod je sintaktički fino
pa ja ne vidim bilo Poruke o pogreškama, crvena
ali ono što je jasno se ne događa?
Nitko od moj broj je u pravu, to ne radi, pa nitko
mojih kodova čini se da je izvršenja, pa zašto je ovo?
Pa, JavaScript i preglednici općenito izvršavanje
Sadržaj web stranice, vrhu na dnu, s lijeva na desno.
A problem je da zbog vrh
ove stranice je HTML zatim glavu onda skripta zatim drugo pismo,
ovo će se izvršiti Prije nego što je spremna,
ili čak postoji u stablu prikaz stranice.
Sama forma, ni tijelo postoji u ovom trenutku.
Dakle, jQuery je dovoljno pametna Uz to je provjera pogrešaka
da, ako ne postoji element s jedinstveni ID registracije,
to se neće iskočiti na vas
i samo izazvati neku konzolu pogrešci i razbiti cijelu stranicu,
to će tiho ignorirati ti, ali razlog da nitko
to kod ikada izvršava se
jer kad imate zabilježio podnijeti rukovatelj,
nema elemenata da ga priključiti.
Dakle, to je vrsta ne postoji op.
Dakle, navodeći umjesto toga, čekati do starosti učita
ako smo mi u window.onload stvar koja je vrsta
od old school način obavljanja to ili seksi jQuery način
ovako, možemo reci to čekati dok svi
od onih HTML tagova imati je raščlaniti tako da čak i
Ako slike nisu učita, na Barem da je čvor u stablu,
onda jQuery može se osiguralo da je sve tamo.
Da.
[Nečujno Napomena]
Da, dobro, da je apsolutno.
Dakle, drugo rješenje to, ako ne koristite ovu
ili se ne sjeća da je to postojalo,
što apsolutno mogla pomaknuti sve ovo je dno
na web stranici, unutar Tijelo još uvijek, ali u nastavku obliku
i da bi također riješiti ovaj problem.
To je samo obično smatra se loša praksa.
To je malo messy i neuredan posebno
ako bi ometanje sve na dnu stranice,
pogotovo kad sam imajući stvari jednostavne stavljajući sve
mog koda unutar HTML stranice
kada je, naravno, možete sigurno ući u naviku
ga factoring out u zasebnu datoteku
na kojem trenutku to je samo lijepa
centralizirati slika u glavi.
Osim postoji cijena koju plaćate
stavljajući JavaScript još imovinu kao što su CSS datoteke
u glavi stranice, što je rizik da ćete pokrenuti?
>> Sporiji učitava stranica.
>> Sporiji učitava stranica, zašto?
>> Zato pokušavamo učitati sve knjižnice
Prije [nečujan].
>> Točno, jer preglednici pročitati kod vrha do dna,
lijeva na desno, ako Google analytics su spori
ili jQuery CDN je spor ili Facebook API je spor
i da je datoteka samo visi potencijalno ovisno
o tome kako se učita tu sliku, Cijela stranica mogla pojaviti se objesiti.
A ako vam se ova Puno iskreno
na web stranicama oni imaju puno niske kvalitete reklame
na njima, mi smo samo jedna spor ili oboren web mogao objesiti stranicu
za neki neodređeni broj sekundi
dok konačno preglednik nadam se puta to na vidjelo
i onda se pokazuje ostatak stranice.
Dakle, ako ste ikada koristili kao Facebook, kao što su tipke,
na svoje web stranice, dopustite mi vidjeti ako ja mogu naći ovaj
bez potrebe da se prijavite ovdje.
Dakle, ako idete na Gumb Facebookov kao
i kliknite na GET kôd, dovraga,
omogućuje vidjeti ako mi može pronaći primjer,
sigurno je netko to objavili.
[Pauza]
Ja ću odustati u nekoliko sekunde, ako ne vidimo to.
Facebook asynch - OK.
Dakle, to je broj i ako nije sto ga je nedavno promijenila
da Facebook zapravo preporučuje korištenje
učitati svoju knjižnicu i zapravo predlaže
da li to staviti u Tijelo vaše stranice.
Dakle, Facebook vas savjetuje stvoriti neku vrstu glupog DIV
da samo ima jedinstveni ID kao to, onda imaju oznaku skripte
i sve ove složenosti u biti radi se sljedeće
i oni ne koriste jQuery jer oni ne žele
pretpostaviti bilo koji drugi ovisnosti,
dopustite mi da se presele ovo tijekom samo malo.
Dakle, primijetite da su anonimna funkcija ovdje,
više o tome u samo nekoliko trenutaka,
Oni tada koriste document.createElement,
Oni stvaraju element DOM, ovo je kao malloc takoreći
gdje oznaka tipa skripta, to je onda navodeći
da async atribut o tom oznakom ide
da bi bilo istinito onda idete naprijed i shvatiti što URL
JavaScript Facebooka treba biti
i to je samo fancy način
provjere trebale bilo HGP ili HDPS.
I onda napokon, što primijetiti ono što Facebook radi,
su dobili DOM čvor koji ima ID Facebook korijena
što je ono što su rekli što staviti na stranici
i onda dodati dijete pa učinak je sve ovo
na neki način dinamički uvelo nova skripta oznaku na svoju stranicu
kao dijete DIV koju umetnuta tamo, tako da je ostatak
od stranica učita sretno
i onda se to kod zapravo dobiva učitava asinkrono.
Dakle, u biti, nakon Činjenica i ja odgođena spomena
od anonimnog funkcije,
Što je ovo funky sintaksa pozivajući se ovdje
kada imam ne samo funkciju otvoriti zagrada, bliske zagr
i onda vitičastim zagradama, zašto su otvorene zagr ovdje
a onda otvoreno blizu, u neposrednoj blizini zagr postoji, što je to radio?
>> [Nečujno] definiranja a zatim izvršenja?
>> Točno, to je definiranje funkcija koja je anonimno
nego samo definiranje funkcije,
Naravno ne izvrši Funkcija dok ga ne zovu
po imenu, ali, naravno, to je anonimna funkcija
tako da se ne može nazvati po imenu, ali možete
u JavaScriptu izvršavanje anonimna funkcija samo
kapsuliranjem cijelu stvar u zagradi, kao što smo učinili
s ovim zagrada i to zagr ovdje i onda učvršćenje
na kraju funkcije otvorena zagrada, bliski zagrada,
ako ne želite to prođe sve argumente.
No, to čini glupo,
kao i zašto je to dodatni sintaktička složenost
da većina ljudi nije činilo prepoznati, što je vrijednost
prelamanja onima tri linije koda
u anonimnom funkciji na ovaj način.
Da.
>> Da bi se izbjegla prepisivanja vrijedna u [nečujan].
>> Točno, kako bi se izbjeglo prepisati varijablu
u postojećoj stranici, zar ne?
Facebook je nešto drsko odlučio,
oni će se koristiti promjenjiva E, to je vrlo vjerojatno
da ste vi ili bilo tko koristeći Facebook kao gumb
ili bilo koji drugi društveni plug
u ima varijablu negdje naziva E. Dakle,
kapsuliranjem sve njihovog koda unutar
od tih anonimnih funkcije, one su suštini imaju svoj djelokrug
da ne rizik prepiše sve postojeće varijable.
Dakle, i ovo je zapravo vrlo čest paradigma,
pogotovo prilikom pisanja Knjižnica code
ili kad vi sami ne želim zatrpavati ime prostora
s ostalim varijablama ste Želite vrijednost živjeti
i umiru kada izađete da blok koda,
ovo je lijepa tehnika u JavaScript.
U redu.
Dakle, onda natrag u ovom primjeru Ovdje, svega što smo učinili na kraju
uz ovaj primjer samo očistio kod.
Dakle, to je još uvijek dobio cjelinu hrpa prekidača, cijela hrpa
uvjeta ovdje, ali primijetiti malo sintakse,
ovo pristupa DOM čvor s jedinstveni ID registracija,
u prostoru znači izgleda sada potomak tog čvora,
nađi ga ako je tipa ulaz i onda još
Ako niste vidjeli prije, možda znate
da je to samo znači pronaći je s ulaznim oznaku,
ulazni elementi koji ima atribut imena s vrijednošću
e-pošte, a zatim neka mi mašu moje ruke na neke
ostatka nisu sve što je poticajno
ali zapravo samo jQuery sintakse za iste operacije.
U redu.
No, ono što nije toliko važno Ovdje je strana preglednik stuff
već činjenica da smo imao čišće i čišće načine
učini stvarno da kod rada.
U redu.
Ima li pitanja?
[Nečujno Napomena]
OK. Sada zabavni dio.
Dakle, node.js Zašto?
Koga briga?
Što ti znaš o tome danas?
Node.js, zašto?
Henry [pretpostavlja pravopis].
[Nečujno Napomena]
Reset baterije?
Koje - to je savršena cliff hanger
za drugu polovicu današnjice.
Zašto ne idemo i uzeti 5 minuta pauze ovdje,
tu je pola bombona Stroj postoji ako bi
poput nekog slatkiša bez stavljajući četvrtinu u.