>> Olgu.
Niisiis, JavaScript.
Peaaegu igaüks siin ruumis ilmselt on teatud määral
mugavuse sellega, kas see oli tee tagasi, kui on SC50
või on see olnud isikliku web projekte või isegi
kui sa natuke seda Möödunud PHP baasi projekti
kuid kõige osa, paljud teist,
isegi kui teil on mõned mugavus
JavaScript võibolla ei ole võetud
enesestmõistetavaks, kuidas väljaannetes ja mis läheb
seal all kapuuts ja mida me üritame
teha täna on koor tagasi mõned tehnilised kihid
mis on siis JavaScript, kuidas see erineb keel
nagu PHP, kuidas saab kasutada mitte ainult kliendi poolel
vaid ka serveri poolel ja seejärel keskenduda väga konkreetselt
selle raames tähele ei JS mis on sisuliselt tööaeg,
programm, millega te võimalik täita JavaScript koodi,
server side ja see on muutumas üha populaarsemaks sort
ning samal väärikus selle päeva ilmselt Ruby ja PHP
ja Python ja te näete,
et see on päris võimas funktsioone teel mõned
on sisseehitatud keel konstrueerib.
Aga kõigepealt mõned lihtsat asjad lihtsalt meelde tuletada,
kuidas see keel toimib ja kui teil on probleeme näe
Selle lihtsalt karjuda välja ja me kohandada.
Niisiis, üks nagu PHP seal no mõiste peamine ülesanne,
sa lihtsalt hakake kood
ja saate nendid tõlgendavad seda ülevalt alla.
In kontekstis brauseri
või midagi serveripoolne me näeme näiteid
natuke.
Tingimused, süntaktiliselt ekvivalentne PHP samuti C
C + + ja mõned muud keeled nii lihtsalt anda teile tunne
kuidas me võiksime kujundada see,
seal on lihtsalt kanooniline seisukorras.
Loogiline väljendeid, täpselt sama süntaktiliselt kui olete näinud
samade muu keeles, nii Öring
ja lõpetades asjad kokku.
JavaScript on lülitid, palju nagu PHP ja teiste do
ja sa ei ole piiratud, nagu C kuni lahutamatu primitiivid
nagu tähemärki ja ints saab tegelikult teha muid väärtusi.
Loops. Nii on see täpselt sama
ja ilmselt tosin keeles samas silmuseid, tee samas silmuseid
ja siis see trikk siin.
Niisiis, see on omamoodi tuntud kiire loendamine
ja see on väga nutikas viis just nagu PHP teed
iga FU nagu baar saate samamoodi
aastal JavaScript objekti kus objekt on nimi
muutuja siin, ütleme, var i objekt ja iga iteratsiooni
see silmus, i saab olema üks
on võtmed, et objekti.
Niisiis, kui teil on objekt õpilane ja üliõpilane ID
ja nimi ja maja, korduvalt võtan
väärtusest ID ja nimi ning maja ja saate selleks indeks
objektiga, nagu oleks see massiiv kasutades square bracket
märke, et saada raha võtme ID või nimi
või maja ja nii edasi.
Ja vastupidiselt levinud eeldusel, JavaScript objektid,
andmed ei ole alati tagatud olema
samas järjekorras, see on ka tõsi PHP seega ei saa eeldada
et asjad jäävad samas järjekorras
et paned need võti väärtus paare võtta objekti.
Kuidas massiivid?
Seal on paar võimalust, kirjutada see süntaktiliselt
kuid see on ilmselt kõige ühise nüüd lihtsalt kasutades square
sulg märke.
Nii on see muutuja helistada sisaldav massiiv
kuus täisarvu, siin on lihtne string
ja teate, mis on puudu Nende näidete
Mis on JavaScript ilmselt puudub.
Jah. Niisiis, ei ole mõiste kirjutades, kindlasti mitte
Selles kontekstis siin, kuid see on tõesti string.
Niisiis, JavaScript on liigid ja see oli tõesti valikut
kes on ise tüüpi ja iga elementi
selles massiivis olid liik number JavaScript kutsub neid.
Nii, see on lõdvalt kirjutatud keel ja me näeme,
et JavaScript nagu PHP on identiteedi operaator
ja muud mehhanismid tegelikult kontroll, mida liik
mõne muutuja nii veatuvastuse
ja muid rakendusi.
Ja siin on proov objekt sisaldavad vaid ID ja nimi.
Ja nüüd pange tähele, et me oleme kasutades looksulgudes märke,
taandus ja valge ruum on omamoodi mõttetu
ja seda kinnitab muutuja mille nimi on Rob
ja mille ID on 1 ja kuupäeva tüüp on siin meie number
ja string võrra.
Ja siis on see mõnevõrra teistsugust
kui sa oled kunagi midagi teinud Ajax nendel päevadel?
Sa ilmselt kasutada objekti niimoodi
kuid mida on väärt märkimist siin?
Mis on süntaktiliselt kunagi nii erinevad, vaid paar
asjade vahel see näiteks mis on küll väiksem
ja seda suurem näide.
Niisiis, esimene üldarusaadavat termin, mis see on?
Mis on tüüp personali sa ütleksid?
OK, see on massiiv, see on array mis?
>> Objektid.
>> OK, see on array objektid.
Ja nüüd keskenduda vaid üks - ükskõik need objektid,
millised on erinevad selle ja selle vahel?
>> Võtmed on stringid.
>> Jah. Niisiis, võtmed on stringid,
ja võtmed on tegelikult strings mõlemal juhul
ja see on omamoodi idiootlik
minu arvates ajalooline disain otsus, kui te kasutate
JSON, JavaScript Objekti Märge,
mis on sisuliselt transport formaat
andmete saatmise tavaliselt üle võrgu
kliendi ja serveri vahel, tuleb meeles pidada,
et see ei ole tegelikult kehtiv JSON ja see on üks
Nende FYIs kui sa kunagi bang oma pead vastu seina
mitu minutit ilma hea Seetõttu ei ole kehtiv JSON
sest võtmed on tegelikult ei kommenteeritud.
JSON idiootlikult eeldab võtmeid mitte ainult tsiteeritud
aga et nad on kahekordselt tsiteeritud ülakoma ei piisa.
Nii loll väike asi ja rohkem lõbu asjaolu
tänase eesmärgil, kuid see liiga kehtiks JavaScript
see lihtsalt ei ole - vastupidist ei ole tõsi.
Hea küll.
Niisiis, me näeme palju rohkem sellest.
Hea küll.
Nii, et JavaScript süntaktiliselt ilmselt üsna
tuttav, keegi teist, kes on kunagi kasutanud JavaScript enne
see ei ole suur hüpe alates PHP või kõige tahes menetlusnormi keel
et sa oleks võinud kasutada.
Niisiis, täna me keskenduma huvitav aspekte
JavaScript eriti kontekstis ei JS
kuid mitte ainult, sest siiani olete arvatavasti
kui sa kasutada Javascript, kasutada seda sees brauser.
Niisiis, ei JS on keskkond siis natuke läheb
mis võimaldab meil pääseda JavaScript kood kliendi -
serveripoolne kuid esimene, Võtame pilk
midagi, mis on natuke rohkem kliendi poolel.
Niisiis, ma olen läinud ja see on seotud kursuste veebilehel,
kui sa tahad mängida koos, on kaks alamkataloogid
tänapäeva Zip on kutsutud allikas naastud zip veebilehel
ja need on vaid Mõned näited reminiscing
asju, mida võis näha enne ja ma omamoodi ehitanud
üles lihtsaim veidi keerulisem kraakleja
välja mõned omadused JavaScript.
Nii, lähme edasi ja võtta vaata näiteks seda.
Nii kahjuks vilkuv silt oli tappis mitu aastat tagasi
kui teed on saanud ilusam ja ilusam
ja vilkuv silt oli sõna otseses mõttes sulg vilkuma sulg
ja see justkui ei enam meiega.
Aga me saame ikkagi taaselustada Selle idee tag lihtsalt lahke
mõelda selle loogiliselt, kuidas sa minna
tegemise kohta midagi see vilkuma intuitiivselt?
Eeldades, sa tead vähe natuke JavaScript ja või CSS
Sel hetkel, see on OK, kui sa seda ei tee.
>> Set time out ja peitmine see siis pärast ma sildistada
välja ja näita seda uuesti.
>> Jah, täiuslik.
See on omamoodi programmeerimine 101,
kuidas te saavutada visuaalse efekti nagu see on?
Noh, sa kuidagi on näidata midagi
ja siis midagi varjata, näidatakse midagi, midagi varjata
ja kui Jonathan ettepaneku kasutades mingi aja maha,
mingi ajakava, mida saate teha seda korduvalt ilma
kasutada ahela või midagi sellist.
Niisiis, lubage mul minna vilkuv-0.html
ja andke mulle kahaneb font natuke
nii et rohkem seda sobib.
Ja olgem vaatleme juures, mis toimub siin.
Niisiis, kõigepealt märgata, et keha
sellel lehel on super lihtne, korpuse sees
lehekülg on lihtsalt div.
Olen meelevaldselt antud ID tervitus
ja mis võib olla ükskõik nii kaua, kui see on kordumatu
ja siis ma lihtsalt pean mõned lihtsa teksti, tere.
Niisiis, kui ma nüüd liikuge üles, märgata kohev stiil.
Niisiis, ma ütlen, terav tervitus, mis nagu te teate
CSS tähendab lihtsalt üheselt kindlaks element
idee tervitus,
kirjasuuruse läheb suvaliselt olla see, varu ja teksti joondus.
Nii ebahuvitav esteetiline detailid
ligikaudu tsentreerida teksti.
Nii huvitav osa on skripti tag siia
mis ma juhtumisi asetada pea osas.
Nii Eks me - saate seda teha seda mingil mitmeti
ja me näeme vähe korduste selle sama programmi
Aga alustame algusest.
Niisiis, ma olen kuulutanud funktsiooni nimetatakse vilkuv
ja ilmselt ta kasutab seda sisseehitatud DOM meetod nimega
getElementById mis on võib-olla üks võimsam meetodid
et sa saad karbist JavaScript otsin
"Tervitus" ei pea olema jutumärkides, nagu see oli
HTML on kas on hea nii kaua
kui teil on stiililiselt järjekindel nendel päevadel Julgen öelda
paljud inimesed kasutavad Java, ülakoma JavaScript,
topeltjutumärgi HTML kuid see ei ole tegelikult tähtis
nii kaua, kui sa oled järjekindel.
Nii siin kui sa ei ole tuttav, tegelikult võite tutvuda
JavaScript CSS omadusi elemente.
Nii teate, et ma olen deklareeritud muutuja nimega div
ja ladestunud selle muutuja,
Viide mis tahes et DOM element on.
Niisiis, kui te arvate tagasi CS50 või iga klassi, kus sa arvasid,
umbes puu struktuuri ja DOM, Document Object Model,
see on lihtsalt viide et sõlme puu,
mis tähistab seda lehte
ja kui div.style.visibility vara võrdne, võrdne, võrdne
peidetud, siis ma lihtsalt tahad toggle see
Jonathan ettepanek muidu ma tahan
lülitab selle üle peidetud.
Nüüd, kui pool, miks triple võrdub seal?
Või mis on see, et võrreldes topelt võrdne?
>> Range samaväärne.
>> Vabandust.
>> Range samaväärne.
Nii, see on identiteet ettevõtjad
kus poolt sa kontrollimine ei ainult väärtus muutuja
nagu võrdne, võrdne mõttes kuid ka tüüp ta.
Seega, isegi kui me ei ole määratletud nii kaugele andmeid
tüüpi tahes muutujate see või mõni slaidid,
on tüüp seotud selle string peidetud
selle väärtus, peidetud ja see on muidugi string.
Niisiis, käesoleval juhul ei ole tegelikult küsimus
sest seal ei ole nii, et me samastaksid string
"peidetud", mille mõne muu väärtuse
kuid see on sageli hea harjumus ütleksin saada
logida kasutades võrdne, võrdne,
võrdusmärk on üldiselt hea.
Ta teeb oma koodi jõulisem nii PHP, kuid
ja JavaScript sest sa jooksed
viiakse mõnikord nurgas juhtudel kui väärtus oleks null
et sa kontrollimine ja null võib omavahel segi ajada, vale
või võiks olla ja nagu PHP,
Javascript liiga võib olla mitu valelikult väärtused, kui nulliga
ja vale ja null ja määratlemata saab kõik lahendada kaudselt
väär.
Aga kui sa oled tõesti tahavad kontrollida eriti väärtuslik
nagu null, number või vale Loogiline siis on
kasutada selle identiteedi operaator.
Nii võib juhtuda, et saada arvesse niikuinii kuigi siin,
See on omamoodi mõttetu sest me teame, me kontrollime
stringi väärtus ja see on ei kavatse olla midagi muud.
Niisiis, siin on magic siis, kui ma kerige seda joont siin
ilmselt ehitatud aknasse objekt
ja see on iseloomulik brauseri võid pääseda
Selle super globaalne objekti nimega Window,
sees, mis on teatud funktsionaalsust,
kui tükk mis on määratud intervall
ja see võtab ilmselt milliseid argumente?
Jah.
>> Funktsioon kõne ja aeg.
>> Väga hea. Niisiis, funktsioon helistada ja aeg
ja nii eriti viide funktsiooni
kursor funktsioon mõnes mõttes
ja see on funktsioon mis toimub
saada täide iga arv millisekundit ja sel juhul
see on iga 500 millisekundi jooksul.
Niisiis, see on viis, kuidas ajendada tõhusalt ja lõputu silmuse
ilma iteratsiooni kuid asemel ütlen JavaScript
Lisa mootori sees Brauseri
seda teha iga 500 millisekundit või lähedal
500 millisekundit, kui võimalik,
selgub, et all kapuuts,
seal on, mida nimetatakse sündmus loop ja me tuleme selle juurde tagasi
kontekstis sõlme JS et lihtsalt pidevalt lahke
Istungi seal, ketramine, ootab tööd teha
ja niipea kui ta mõistma,
500 millisekundit on möödas blink saavad nimetatakse uuesti
ja ikka ja jälle on koos mis tahes muu töö
mis vajab, et saada teha.
Niisiis, mida me saame parandada here?
Noh, las ma avan up vilkuv-1.html
ja näidata blink-1.html
esteetiliselt täiesti identsed.
Niisiis, mida me saaksime parandada here?
Noh, teate, et see oli selline kasutu
määratleda funktsiooni nimetatakse Blink, sest kui palju
kuidas paljudes kohtades tegin ma helistada funktsioon vilkuv?
>> Lihtsalt üks kord.
>> Niisiis, üks.
Niisiis, see ei ole halb, et Tegelikult on see ilmselt üsna
otse edasi.
I määratletud funktsioon vilkuma, I helistada funktsioon vilkuv teel
Käesoleva parameetri kuid tehniliselt,
seal ei olnud põhjust seda ja ühise paradigma
JavaScript on tegelikult kasutada lambda funktsioonid
kui te mäletate 51 või Anonüümsete funktsioonide
kus, kui sul ei ole vaja nimi funktsiooni
kui sa ainult nimetades seda kindlasti üks koht,
miks vaeva risustamist kood, risustamist programmeerijad meeles
ja oma nimi ruum tõesti sümbolitega
et te tegelikult ei vaja hoolida.
Ja jah, see versioon siin
teate, et ma helistan window.SetInterval otse
ülaservas minu script tag siis ma möödaminnes
aastal nimetu funktsioon et ei võta argumendid
ja see on täiesti peen ja siis keha
selle funktsiooni tundub on identne sellega, mis ta oli enne
ja ainult süntaktiline Erinevus on selles,
siin kõrval 500.
Ma panen keha ning funktsiooni
ja siis ma ütlen täitma, et eelmine kood,
iga 500 millisekundi jooksul.
Niisiis, väga marginaalne muutus
aga samm, mida on ilmselt rohkem elegantne
rakendamise.
Niisiis, võtame selle ühe samm edasi, kui ma nüüd minema
arvesse vilkuv kaks, saate vaata ühine raamatukogu
mõju, mis läheb
täiesti tähtsusetu esteetiliselt, kuid kui me läheme
arvesse versioon kaks siin, teate et mu peas,
Olen lisanud uusim versioon jQuery.
Ja siis siin, Ma lihtsalt puhastada
up koodi veidi, see on ei kavatse olla lõbus maailmas
kasutamist jätkata native DOM funktsioonid
ja omamoodi toores JavaScript.
Tegelikult jQuery nii võite tean on muutunud nii populaarseks
et enamik inimesi lihtsalt konflikt jQuery JavaScript
kuid tõesti lihtsalt supper kasulik raamatukogu kirjutatud
poolt mehe nimega John Ametist lahkumise ja kuna teised
et on lihtsalt muudab palju tüütu asjad
JavaScript lihtsamaks ja sisutihe.
Niisiis, käesoleval juhul siin, mis toimub?
Nii, mul on see välimus dollari märk, rohkem, et
vaid hetk, siis see on CSS valijat.
Nii, see on väga sarnane vaim, mida ma tegin enne,
kuid seekord ma olen sõnalt kasutades hash tag
näidata unikaalne tunnus nimega tervitus
ja siis ilmselt . Css on meetod ehitatud
aastal iganes objekt on see, et ma lihtsalt loodud
ja Ma kontrollin väärtus Nähtavuse võti.
Ja kui selle väärtus, võti võrdne, võrdne, võrdne peidetud,
siis ma lähen, et lülitada see ja Ma lähen, et lülitada see kord
kasutades sama meetodit mis ilmselt on ülekoormatud
selles mõttes, et ta on kaks eri allkirja
üks üks argument ja üks kaks argumenti,
millest teine on setter,
endine mille getter nii rääkida.
Ja kui uudishimulik ja kui soovite tegelikult kunagi vaatasin seda,
Kui läheme jquery.css loodetavasti top hit on tõesti see
ja näed rohkem ametlik selgitus
et me lihtsalt kasutada seda, . Css koos vara nimetus
ja siis setter on dot CSS
koos vara nimetus ja väärtus.
Niisiis, veidi puhtam, kuid teate mingisugune muster siin
iga iteratsiooni Selle koodi,
me omamoodi muudab tihedam ja üha koomale
ja seal ütlevad parem kujunduse
kuna me kasutame keegi teine ​​kood, mis on kõrvaldatud
mõned keerukust.
Nii, nüüd teeme see isegi lihtsam.
Ja tegelikult, kui ma eemaldada kõik hinnapakkumisi näete lihtsalt kõik
comment näete, kuidas lihtne see on saanud.
Üks erinevus siin on muidugi
et ma kasutan toggle meetod, mis ka on ehitatud
sisse jQuery ja see on ainult
sest keegi teine kirjutas kood
et tegelikult lülitab nähtavuse seade
tahes DOM element et sa saata.
Niisiis, parem ja parem.
Ja nii on see muster
kuigi see on supper Lihtne näide ja sorteeri
loll netomõju mis ei vilgu tekstilõiku
see on selline mõte protsessi, et sa peaksid mõtlema -
mõelda ei tingimata kõige esimene
passiivne kirjalikult midagi eelseisva projekti
aga kindlasti sa itereerima koos oma nõustaja või minuga
ja teie meeskond koosolekutel või te lihtsalt vaadata oma meeskonnakaaslasi kood
umbes karmistamist asju, eks?
Lõppude lõpuks, nad on vähem -
vähem rida koodi sa lõpuks on
teoorias vähem vigu te tõenäoliselt kutsudes
sest seal on lihtsalt vähem koodi segi ajama.
Hea küll.
Niisiis, paar takeaways.
Lambda funktsioonid Anonüümsete funktsioonide,
millest paljud te varem näinud
ja siis ka lihtsalt karmistamist asju koos raamatukogu
nagu jQuery selles konkreetsel juhul.
Hea küll.
Kas on küsimusi?
Teeme veel ühe kliendipoolse aspekt,
vormis null meil Selle lõpptulemus.
Super lihtne vorm ja ilmselt kui ma üritan kliki registreeru siin
Esialgu ta ütleb mulle, et sa ei registreeritud, noh, tegelikult mitte.
Noh, miks see nii on?
Noh, siin on vormi-0.html väga väike kood,
pole JavaScript üldse ja see on täiesti võlts sort
vormi, sest tegevus väärtus on registered.html
mis tähendab ükskõik mida I tüüpi arvesse seda vormi,
kui see läheb saadetakse serverisse?
Jah. Nii, et registered.html mis on selgelt HTML fail
mis on seega staatiline fail, mis on mingil viisil
võtta kasutaja sisend eeldades pole JavaScript kood
surutud ta, et see on vaadates URL
nii et see on täiesti Noop ja et midagi ei juhtu
koos esitatud andmeid, kuid näete struktuur
Suhteliselt lihtne HTML5 vormi
mis on paar parool mõni sisend tüübid.
Niisiis, oletame, tegelikult nüüd lisada mõned vigade kontrolli
ja vaata, kuidas me võiksime parandamiseks.
Nii, siin on mingi halb mehe viis rakendamisel
ja see on omamoodi vastik tüki koodi.
Niisiis, kõigepealt lähme scroll alaserva
et näha, mis on sama ja mis on erinev.
Ainuke asi, mida eri nüüd vahel selles
ja eelmise versiooni et ma olen andnud vormi ja ID
ja "registreerimine" võib on olnud midagi, mida ma tahan
kuid selle eesmärk on üheselt eristatav isegi see ei ole
tingimata vajalik, sest kui leht on ainult üks vorm kindlasti I
võiks leida üks jQuery valijat meetodeid.
Aga nii lihtsalt teeb see rohkem determineeritud.
Niisiis, kui ma lähen nüüd oma script tag, märkate järgmist
window.onload võrdsete anonüümne funktsioon.
Niisiis, milline on see teeb?
Niisiis, te võib-olla mäletate, et kliendipoolse programmeerimine -
JavaScript pigem HTML lehekülge on erinevaid sündmusi
elementidega, klõpsates ja esitades ja keskendudes
ja hägustamine ja muu selline sündmused, mis võivad juhtuda
kuna kasutaja tavaliselt suhtleb lehel
window.onload teeb mida ta ütleb.
Windowsi kogu laadimise
nii, kui kõik pildid on alla, kui kõik failid on
Allalaaditud ja kord leht on laetud,
teha järgmine kood ja teate, kui ma minna põhja
Selle meetodi teate, et puuduvad sulgudes
pärast lokkis traksidega mis tähendab
et ma ei ole täidesaatva see funktsioon siin nüüd,
brauser läheb täide see minu jaoks, kui ta on kindlaks teinud,
et leht on laetud.
Nii, vaatame, mida me oleme teinud,
document.getElementById registreerimine
nii et lihtsalt annab mulle viide sõlme
puu see on on ID registreerimisel.
Ja nüüd, ma lähen registreeru teine ​​sündmus
tehes form.onsubmit saab see anonüümne funktsioon
mis tähendab järgmise kood peaks rahuldama iga kord
et vorm on esitatud.
Nüüd on enamik sellest on lihtsalt omamoodi igav loogika.
Niisiis, kui väärtus email valdkonnas kujul on
"Mitte midagi", siis peate Teie e-posti aadressi,
sa karjud kasutajale märku ja siis tagasi vale.
Ja siis on mul hunnik muid kontrollimisi,
kontrollib parool
kontrollib, kas paroolid on samad,
kontrollib, kas kokkulepe kast või mitte
ja ma lihtsalt karjuda kasutaja kui tahes
nende katsete tegelikult ei toimi.
Ja nii, siin on näiteks isegi kuigi see on natuke kunstlik
siin sellest, et ma kasutan võrdne, võrdne, võrdne
tähendab, et kasutaja ei püüa mind lollitada
kirjutades millist väärtust.
Või pigem ma tõeliselt kontrollides juuresolekul
tühja stringi, kasutaja ei ole kirjutatud midagi veel.
Kui kasutaja sisestatud sõnalt null,
"Null" võiksid potentsiaalselt olla segi tühi string.
Ja ma ütlen, et see on omamoodi mõttetu siin
sest ilmselt isegi null ei ole e-posti aadressi.
Aga kui see oli veel generic valdkonnas nagu tekstiväli
või nimi või kirjeldus või midagi, mida soovite väärtustada eest
ja see ei ole tingimata süntaktiliselt on
olema e-posti aadress, kasutaja võiks tüüp midagi nulli
ja jälle nurga puhul, kuid see on miks tavaliselt kontroll tüüpide
kasulik asi.
Sa tõesti kontrollimine kasutaja, kes kirjutasid midagi
arvesse selles valdkonnas.
Niisiis, mis juhtub, kui ükski need testid ei, noh,
tagastamise tõsi sees sündmuse handler
nagu onSubmit tähendab lihtsalt let originaal käitumine tegelikult
propageerida ja seetõttu vormi saavad esitada.
Ja sellepärast, kui ma lõpuks klõpsatud esitada enne kui ma sain
kuni register.html ja kui ma seda praegu teha, teate,
Ma pahandada saada, kui ma seda ei tee e-posti aadress
ja ma ei kirjuta malan@harvard.edu,
crimson [foneetiliste] karmiinpunane, Ruudu
ja nüüd registreerida ja ta ütleb mulle, jälle,
registreerinutele või tegelikult mitte.
Hea küll.
Niisiis, oletame, puhastada see üles vaid natuke ja siis üleminek
Lisa uus uuem server pool asju.
Niisiis, kui ma minema vormi-2.html, märgata mõningaid asju.
Niisiis, üks, ma tõin jQuery tagasi mix
nii et jälle on see dollari märk
ja nüüd ma kasutan mõned jQuery meetodeid.
Niisiis, esimene, mis see on dollari märk, mis on
nii eriline siin?
Milline on dollari märk õmmeldud peaaegu kogu tahes jQuery koodi?
Jah.
[Kuuldamatu Märkus]
OK. Seega, dollari märk funktsiooni läheb läbi DOM vaadates
midagi selle eriti CSS valijat.
Niisiis, tõsi, kuid peaaegu liiga täpne.
Seda juhtub kui te kaotate string
nagu käesolevas asjas, aga sa ei alati on läbida string.
Tegelikult asjas väga Esimene rida on siin see ei ole
CSS valijat, ma möödaminnes aastal Lambda funktsioon.
Nii üldisemalt - nii, hea vastus aga liiga täpne.
Üldisemalt, mis on dollari märk koosneb?
>> Just jQuery.
>> Jah. Niisiis, just jQuery või see on lihtsalt funktsioon
et mingi kutt aastat tagasi kirjutas ja teised inimesed on
alates täiustatud, et sõna otseses mõttes vaikimisi nimetatakse -
oops, nimetatakse jQuery.
See lihtsalt - see muutub välja erinevalt palju
Keelte dollari märk on taiesti sümbol kasutada
aastal muutuja nime arvestades
PHP dollari märk ilmselt on eriline tähendus
kuid JavaScript nagu Mõnes keeles dollari märk
ja rõhutada ja muu selline erimärkide täiesti legit
kasutada oma sümbol nimed muutujaid.
Niisiis, keegi lihtsalt otsustas et sa tead, mida?
See saab olema üsna tüütu
muuta kogu maailma kirjuta jQuery kogu aeg,
andke mulle mingi taim kaalul maasse ja öelda,
"See teek kasutada dollari märk. "
Ja tõepoolest, seda ei tõsta riski
et keegi pretensioonikas on kavatse kasutada dollari märk
tema raamatukogu, kuid seal viise justkui kindlustada
et kui te kasutate dollar allkirjastab kaartide jQuery
sest saate testida kui see on juba määratud
et midagi sisuliselt.
Hea küll.
Nii, et kõik, mis on, ei ole magic.
See on lihtsalt seksikas vaadates tükk süntaks, et on tore
ja kiire ja lihtne tüüp.
Niisiis, mis juhtub, kui sa kirjuta dollari märk avatud paren
ja siis anonüümne funktsioon.
Noh, tuleb välja, et see on tegelikult stenografist märke
Dokumendi-dot valmis avatud paren.
Niisiis, kui Cynthia märganud varem me juba leidnud ühe
nurga puhul.
Kui sa lihtsalt liigu lambda funktsiooni
mõju dollar märk on veidi erinev.
Tegelikult, mis tegelikult toimub on, et see on samaväärne sellega,
kulgeb viide ülemaailmse dokumendi eesmärk
mis on ülemaailmne nagu aken objekti
, mis annab teile mõned erilist funktsionaalsust
mis mõjutab kogu lehekülg või brauseri ja see muutub
välja, et dokumenti te murrab ta jQuery,
jQuery sisuliselt aru, oh, see on viide
selle eridokumendis objekt
Lubage mul nüüd registreeru sündmus nimega valmis
mis ei ole emakeelena JavaScript või DOM seotud.
Valmis on jQuery asi, mis ütleb,
kui leht on laetud kõik HTML elemendid
kuid mitte tingimata laaditud kõik CSS ja pildid
ja JavaScript failid ja Flash-faile ja muud sarnast.
Nii, see on samm enne on koormus siis minna
ja käivitada järgmine.
Ja tagurpidi kasutades on valmis tähendab, et sa ei, sa tead,
et kõik elemendid oma DOM,
kõik identifitseeritavad asju sümbolid, need on olemas isegi
kui lehe sisu ikka laadimist ja laadimise
ja teil on katki ikoonid hetkeks
või valge lehe taustal.
Jah.
>> Mis juhtuks kui [kuuldamatu]?
>> Perfect näiteks täiuslik küsimus.
Nii, vaatame, kas me saame simuleerida seda kohe.
Niisiis, lubage mul minna ja kustutada Selle kaks rida siin ja siis
ilma vaevata määrata taandus, lubage mul minna
ja kustuta see siin - oops, see siin.
Ja nüüd, lase mul minna üle lehel, minge vormi-2.html ja liik
Registreeru, midagi tundus juhtub, ütleme, miks oli see,
lähme edasi ja avage kuni Chrome'i inspektor,
avada konsooli lihtsalt näha kui midagi juhtub siin, praegu,
Registreerimiseks veel midagi.
Nii, et kood on süntaktiliselt trahv
nii et ma ei näe punane veateated
aga mis selgelt ei juhtu?
Ükski minu kood on õige, see ei tööta nii none
mu koodid näib täidesaatev, miks see on?
Noh, JavaScript ja brauserid üldisemalt täita
sisu veebilehe top alla, vasakult paremale.
Ja probleem on et kuna ülemine
Selle tekst on HTML siis pea siis script siis teine ​​script,
see ei hakka täide enne mida on isegi valmis,
või isegi olemas puu esindatuse osas.
Vorm ise, isegi mitte asutus on olemas selles punktis.
Niisiis, jQuery on piisavalt targad, seda viga kontroll
et kui ei ole elemendi unikaalne ID registreerimisest
ta ei kavatse päästmiseks teid
ja lihtsalt käivitada mõned konsool viga ja murda terve lehekülg,
see läheb ingoneerib te, kuid põhjus, et ükski
Selle koodi kunagi täide on
sest kui sul on registreeris esitab käitleja
puudus element et lisada see.
Nii, see on omamoodi no op seal.
Niisiis, määrates selle asemel, oodake, kuni vanus on koormatud
kui me tegime window.onload asi, mis on omamoodi
vana kooli viisiks või seksikam jQuery viis
niimoodi, saame ütle seda ootama, kuni kõik
Nende HTML sildid on vormindatud nii, et isegi
Kui pildid ei ole koormatud, kell Vähemalt see sõlm on puus,
siis jQuery saab tagada et kõik on seal.
Jah.
[Kuuldamatu Märkus]
Jah, hea küll absoluutselt.
Niisiis, muud lahendust see, kui sa ei kasuta seda
või ei mäletanud et see on olemas,
võid absoluutselt liikuda kõik see alumine
veebilehel, sees keha veel vaid allpool vorm
Ja see oleks ka Selle probleemi lahendamiseks.
See on lihtsalt tüüpiliselt peetakse halb tava.
See on pisut räpane ja lohakas spetsiaalselt
kui te ei hoia segamise kõik põhja lehel
eriti kui ma hoian asjad lihtsad, pannes kõik
minu kood sees HTML-lehe
kui muidugi saab Kindlasti satuvad harjumus
Faktooringu välja eraldi faili
millest alates see on lihtsalt kena
tsentraliseerida failid pähe.
Välja on hind, mida maksate
pannes JavaScript veel vara nagu CSS faili
peas lehel Mis on oht, et sa jooksed?
>> Aeglasem lehe laadimise.
>> Aeglasem lehe laadimise, siis miks?
>> Kuna me üritame laadida kõik raamatukogud
enne [kuuldamatu].
>> Täpselt sest brauserid loe kood ülevalt alla,
vasakult paremale, kui Google analytics on aeglane
või jQuery CDN on aeglane või Facebook API on aeglane
ja et faili lihtsalt hangub potentsiaalselt sõltuvalt
kuidas te koormatud, et faili Kogu leht võiks ilmuda riputada.
Ja kui sa näed seda palju ausalt
veebisaitidel nad on palju madala kvaliteediga reklaame
neid, me oleme lihtsalt üks aeglane või allakukkunud kodulehel võiks riputada lehele
mingil määramata arvu sekundit
kuni lõpuks brauseri loodetavasti korda läbi, et
ja siis näitab ülejäänud leht.
Niisiis, kui sa oled kunagi kasutada nagu Facebook, nagu nupp,
oma veebilehele, lubage mul vaata, kui ma ei leia seda
, ilma et sisse logida.
Niisiis, kui lähete Facebook on nagu nupp
ja klõpsake get kood, kurat,
Vaatame kas me saame leida näiteks
kindlasti oli keegi postitanud seda.
[Paus]
Annan ära paar sekundit, kui me ei näe seda.
Facebook asynch - OK.
Niisiis, see on kood, ja kui nad muutsid seda hiljuti
et Facebook tegelikult soovitab kasutada
laadida oma raamatukogu ja tegelikult ettepaneku
et paned seda keha oma lehele.
Niisiis, Facebook soovitab teil luua omamoodi loll DIV
et lihtsalt on unikaalne ID, nagu seda, siis on script tag
ja kõik see keerukus sisuliselt teeb järgmise
ja nad ei kasuta jQuery sest nad ei taha
eeldada, muu sõltuvuste
lase mul seda liigutada natuke edasi.
Nii märkate neil anonüümne funktsioon siin,
rohkem, et üks hetk,
need siis kasuta document.createElement,
nad luua DOM element, see on nagu malloc niiöelda
kus silt on tüüpi script, see on siis, täpsustades
et async atribuut Selle sildi saab
et olla tõsi, siis laske käia ja selgitada, mida URL
Facebook JavaScript olema
ja see on lihtsalt fancy viis
kontrollimiseks peaks oleks HGP või HDPS.
Ja siis lõpuks, sa teate, mida Facebook teeb,
nad saavad DOM sõlme on ID Facebooki root
mis on see, mida nad ütlesid sa paned selle lehekülje
ja siis nad lisada lapse nii mõju on see kõik
et omamoodi dünaamiliselt süstida uus script tag oma lehele
lapsena DIV et sa sisestatud on nii, et ülejäänud
lehekülje koormate õnnelikult
ja siis see kood tegelikult laaditakse asünkroonselt.
Niisiis, sisuliselt pärast Tegelikult ma edasilükatud mainita
anonüümne funktsioon,
mis see funky süntaks viidates siin
kui ma ei ole ainus funktsioon avada paren lähedal paren
ja siis lokkis traksid, miks avatud paren siin
ja siis avatud lähedal lähedal paren seal, mis see teeb?
>> [Kuuldamatu] määratletakse ja seejärel täitev?
>> Täpselt, see määratletakse funktsioon, mis on anonüümne
vaid lihtsalt määratleda funktsiooni
muidugi ei tee funktsioon kuni te seda
nime, kuid muidugi see on anonüümne funktsioon
nii et sa ei saa seda nime, kuid võite
JavaScript täitma anonüümne funktsioon lihtsalt
ümbritsedes kogu asi Sulgudes nagu me oleme teinud
Selle paren ja see paren siin ja siis millega
Lisa lõpuks funktsiooni avatud paren lähedal paren,
Kui te ei soovi andke seda mingeid argumente.
Aga see tundub tobe,
nagu miks see täiendav süntaktiline keerukus
et enamik inimesi ei tundu tunnustada, mis on väärtus
mähkimise need kolm rida koodi
anonüümsel funktsioon Sel viisil.
Jah.
>> Et vältida ülekirjutamist väärtuslik [kuuldamatu].
>> Täpselt, et vältida ülekirjutamist muutuja
olemasoleva lehekülje, eks?
Facebook on mõnevõrra pretensioonikas otsustanud
nad ei kavatse kasutada muutuja E, see on üsna tõenäoline,
et teie või keegi kasutab Facebook nagu nupule
või mis iganes muu sotsiaalne plug
aastal on varieeruv kuskil nimetatakse E. Niisiis,
ümbritsedes kõik oma koodi sees
Selle anonüümne funktsioon, nad sisuliselt on oma ulatuse
et ei saa riskida clobbering olemasolevate muutujaid.
Niisiis, see on ka tegelikult väga sage paradigma
eriti kui kirjalikult raamatukogu kood
või kui sa ise seda ei tee taha risustada oma nimi ruum
teiste muutujate te tahan raha, et elada
ja kord surra väljute ploki kood,
see on kena tehnikat JavaScript.
Hea küll.
Nii, siis tagasi see näide siin on kõik, mida oleme teinud lõpuks
Selle näiteks on lihtsalt koristasin kood.
Niisiis, see on ikka kogu kamp lülitid, terve hunnik
tingimused siin, kuid märgata natuke süntaks,
see pääseb DOM sõlm unikaalne ID registreerimine
ruumi abil otsida nüüd järeltulija, et sõlm,
leida, kui see on II tüüpi sisend ja siis isegi
kui sa ei ole näinud seda enne, sa võiksid teada
et see tähendab lihtsalt leida see sisend tag,
input elemente, mis on atribuut nimi, mille väärtus
e ja seejärel lasta mina siputan käsi mingil
ülejäänud ei ole kõik, mis stimuleerivad
kuid tõesti ainult jQuery süntaks jaoks samad toimingud.
Hea küll.
Aga mida ei ole nii oluline siin on brauser pool kraami
vaid pigem asjaolu, et me oli puhtam ja võimalusi puhtamaks
tegelikult tegemist et kood töötab.
Hea küll.
Kas on küsimusi?
[Kuuldamatu Märkus]
OK. Nüüd lõbus osa.
Niisiis, node.js Miks?
Keda see huvitab?
Mida sa tead seda täna?
Node.js, miks?
Henry [eeldada õigekirja].
[Kuuldamatu Märkus]
Battery reset?
Mis - see täiuslik kalju riidepuu
et viimasel poolel teel.
Miks me ei võiks minna ja võtta 5 minutit pausi siin,
seal pool komm masin on kui sa oleks
nagu kommi ilma pannes veerandi sisse