>> Tout dwa.
Se konsa, JavaScript.
Prèske tout moun nan sal sa a pwobableman gen kèk degre
nan konfò ak li si wi ou non li te fason tounen lè nan SC50
oswa li a te pèsonèl pwojè entènèt oswa menm
si ou te fè yon ti jan nan l 'ak sa a sot pase PHP pwojè baz,
men pou pi plis nan pati, anpil nan nou,
menm si ou gen kèk konfò
ak JavaScript petèt pa te pran
pou yo akòde ki jan nan travay lang ak sa ki ale
sou anba kapo a ak ki sa nou ap ale nan eseye
fè jodi a se kale tounen kèk nan kouch yo teknik
nan sa ki JavaScript se, ki jan li diferan de yon lang
tankou PHP, ki jan yo ka itilize pa sèlman bò kliyan
men tou, bò sèvè ak Lè sa a, konsantre anpil espesyalman
sou kad sa a, remake pa gen okenn JS ki se esansyèlman yon tan kouri,
yon pwogram ak kote ou ka egzekite JavaScript kòd,
bò sèvè ak li a vin sòt de pli zan pli popilè
nan sou wo a menm sa a jou ki vini apre pwobableman Ruby ak PHP
ak Piton ak ou pral wè
ke li gen kèk bèl karakteristik pwisan pa fason pou kèk
nan lang lan bati-an konstwi.
Men, anvan, kèk nan fasil a bagay jis fè ou sonje
sou kouman lang sa a ap travay epi l si ou gen pwoblèm pou wè nenpòt ki
nan sa a, sèl rèl byen jis deyò epi yo n ap ajiste.
Se konsa, yon sèl tankou nan PHP gen nan pa gen okenn nosyon nan yon fonksyon prensipal yo,
ou jis kòmanse ekri Kòd
epi ou ka konèks esplike l 'anwo jouk anba.
Nan kontèks la nan yon navigatè
oswa nan bò sèvè yon bagay nou pral wè kèk egzanp
nan yon ti jan.
Kondisyon, syntactically ekivalan a PHP kòm byen ke C,
C + + ak kèk lòt lang Se konsa, jis ba ou yon sans
sou fason nou ta ka estrikti li,
gen nan jis yon kanonyal kondisyon.
Ekspresyon Boolean, egzak menm syntactically jan ou te wè
nan sa yo menm lòt lang, ni pou oring
ak pou mete fen nan bagay sa yo ansanm.
JavaScript gen switch, anpil tankou PHP ak lòt la Se pou nou fè
epi ou pa ap limite, tankou nan C rive nan primitif entegral
tankou charaktèr ak antye kapab aktyèlman fè lòt kalite valè.
Pasan. Se konsa, sa a se ekzakteman menm bagay la
ak pwobableman yon douzèn lang, pandan y ap pasan, fè pandan y ap pasan
ak Lè sa a jwe fent sa a isit la.
Se konsa, sa a se sòt de li te ye tankou vit enimerasyon
ak li nan yon fason trè entelijan nan jis tankou nan PHP fè
pou chak Fu kòm bar ou kapab Menm jan an tou,
nan yon objè JavaScript, kote objè se non an
nan varyab la isit la, di, var mwen nan objè yo, epi sou chak iterasyon
nan sa a bouk, mwen se pral fè yon sèl
nan kle yo de sa objè.
Se konsa, si ou gen yon objè pou yon elèv, ak yon elèv gen yon ID
ak yon non ak yon kay, iterativman mwen pral pran
nan valè a nan ID ak non ak kay ak ou kapab konèks endèks
nan objè tankou si li nan yon etalaj lè l sèvi avèk bracket kare
notasyon yo ka resevwa valè a nan ID kle a oswa Non
oswa yon kay ak pou fè.
Apre sa, kontrè ak komen sipozisyon, JavaScript objè,
pwopriyete yo pa nesesèman garanti ke enfòmasyon an
yo nan lòd la menm, sa a se tou vre PHP Se konsa, pa sipoze
ke bagay sa yo ap rete yo nan lòd la menm
ke ou mete sa yo kle valè pè nan yon objè.
Kouman sou ranje?
Genyen yon koup nan fason yo ekri li syntactically
men sa a se pwobableman pi plis la komen kounye a jis lè l sèvi avèk kare
bracket notasyon.
Se konsa, sa a se yon varyab rele nan nimewo ki gen etalaj
nan sis nonb antye relatif la, isit la nan yon fil ki senp
ak avi sa ki nan absan soti nan egzanp sa yo,
ki sa ki JavaScript aparamman manke.
Yeah. Se konsa, gen nan pa gen nosyon nan sezisman, sètènman pa
nan kontèks sa a isit la, men sa a se tout bon yon kòd.
Se konsa, JavaScript gen kalite ak sa ki te tout bon yon etalaj
ki se tèt li yon kalite ak chak nan eleman yo
nan ki etalaj yo te nan kalite nimewo kòm JavaScript rele yo.
Se konsa, li nan yon blesi tape lang ak nou pral wè
ki JavaScript tankou PHP gen yon operatè idantite
ak lòt mekanis pou aktyèlman tcheke ki kalite a
nan kèk varyab se ni pou erè kont kouran
ak pou aplikasyon pou lòt.
Apre sa, isit la nan yon echantiyon objè ki gen jis yon ID ak yon non.
Koulye a, remake ke nou ap lè l sèvi avèk notasyon bracket Curly,
dekoupaj an ak blan an espas se sòt de san sans
ak sa a deklare yon varyab ki gen non se Rob
, epi ki gen ID a se 1 ak nan dat kalite se isit la nimewo nou an
ak tout kòd respektivman.
Lè sa a, sa a se yon bagay yon ti kras diferan
si ou te janm fè anyen ak Ajax jou sa yo?
Ou pwobableman itilize yon objè tankou sa a
Men, sa ki nan vo anyen isit la?
Ki sa ki se syntactically tout tan tout tan Se konsa, diferan, jis yon koup
de bagay sa yo ant egzanp sa a ki se Byensir ki pi piti
ak sa a egzanp ki pi gwo.
Se konsa, an premye nan pwofàn la tèm, ki sa ki sa a?
Ki sa ki se kalite a nan anplwaye ou ta di nou fè?
OK, li nan yon etalaj, li nan yon etalaj de ki sa?
>> Objè yo.
>> OK, li nan yon etalaj de objè yo.
Epi, koulye a, yo konsantre sou yon sèl - nenpòt youn nan bagay sa yo,
sa ki nan diferan ant sa a ak sa a?
>> Kle yo se strings.
>> Yeah. Se konsa, nan kle yo strings,
ak kle yo yo aktyèlman strings nan tou de ka
ak sa a se sòt de yon estipid
nan opinyon mwen konsepsyon istorik desizyon chak fwa w ap itilize
JSON, JavaScript Objè Notasyon,
ki se esansyèlman yon fòma transpò
pou voye done tipikman atravè rezo a
ant kliyan ak sèvè, ou bezwen sonje
ke sa a se pa aktyèlman ki valid JSON ak sa a se youn
nan FYIs sa yo sof si ou tout tan tout tan Bang tèt ou kont miray la
pou plizyè minit pou pa bon rezon ki fè, li pa valab JSON
paske kle yo se pa aktyèlman te site.
JSON idyotman mande pou kle yo pa sèlman ap fè remake,
Men, pou moun sa yo doubl te site, quotes sèl pa sifi.
Se konsa, estipid ti bagay ak plis nan yon reyalite plezi
pou rezon jodi a men sa a twò ta dwe valab JavaScript
li jis pa - a konvès se pa vre.
Tout dwa.
Se konsa, nou pral wè anpil plis nan sa.
Tout dwa.
Se konsa, sa a, se JavaScript syntactically pwobableman trè
yo konnen yo, yon moun pami nou ki gen pa janm itilize JavaScript anvan
li pa yon gwo kwasans ki soti nan PHP oswa ki pi nenpòt lang pwosedi
ke ou ta ka te itilize.
Se konsa, jounen jodi a nou pral konsantre sou aspè yo enteresan
nan JavaScript patikilyèman nan yon kontèks ki pa gen JS
men se pa sèlman paske moute jouk koulye a ou te pwobableman,
si ou te itilize JavaScript, itilize li andedan nan yon navigatè.
Se konsa, pa gen okenn JS se yon anviwònman Lè sa a, nan yon ti kras ki pral
yo ki pèmèt nou jwenn aksè nan JavaScript Kòd kliyan -
bò sèvè men premye, kite a pran yon gade
nan yon bagay ki se yon ti kras pi plis bò kliyan.
Se konsa, mwen te ale nan ak sa a se lye sou sit entènèt la pou kou yo,
si ou vle jwe ansanm, ki te gen de subdirectories
nan Kòd Postal jodi a nan rele poto sous zip sou sit entènèt la
ak sa yo se jis yon kèk egzanp reminiscing
de bagay sa yo ou ta ka gen pou wè anvan ak mwen sòt de bati yo
moute soti nan ki pi senp lan yon ti kras pi konplike toumante
soti kèk nan karakteristik yo ki nan JavaScript.
Se konsa, kite a ale pi devan epi pran yon gade pou egzanp nan sa a.
Se konsa, Malerezman tag a bat je te touye nan plizyè ane de sa
kòm yo te wout la te resevwa bèl pase ak bèl pase
ak etikèt la bat je te literalman louvri bracket bat fèmen bracket
epi li sòt de pa gen okenn ankò avèk nou.
Men, nou ka toujou reziste ide sa a nan yon tag pa jis kalite
nan panse a li lojikman, ki jan ou ale
sou fè yon bagay tankou sa a bat entwitif?
Asepte ou konnen yon ti kras ti jan nan JavaScript ak oswa CSS
nan pwen sa a, li nan OK si ou pa fè sa.
>> Mete yon tan deyò epi yo kache li Lè sa a, apre yo fin mwen pral tag li
deyò epi yo montre l 'ankò.
>> Yeah, pafè.
Sa a se sòt de pwogramasyon 101,
kijan ou ta reyalize yon efè vizyèl tankou sa a?
Oke, ou yon jan kanmenm dwe montre yon bagay
ak Lè sa a, kache yon bagay, montre yon bagay, kache yon bagay
epi kòm Jonatan pwopoze lè l sèvi avèk kèk kalite tan soti,
kèk kalite orè ou ka fè sa a repete san yo pa bezwen
yo sèvi ak yon bouk oswa yon bagay tankou sa.
Se konsa, kite m 'ale nan bat je-0.html
ak kite m 'retresi font la yon ti kras
se konsa ke plis nan sa a adapte.
Apre sa, kite a pran yon gade nan sa k ap pase sou isit la.
Se konsa, premye nan tout, remake ke kò a
nan paj sa a se super senp, andedan nan kò a
nan paj la se jis yon DIV.
Mwen te abitrèman bay yon ID nan salitasyon
e ke te kapab anyen toutotan li la inik
ak Lè sa a, mwen jis gen kèk tèks ki senp, bonjou nan lemonn.
Se konsa, si mwen kounye a woulo liv leve, remake gen kèk manier an gonfle.
Se konsa, mwen vle di, byen file bonjou, ki jan ou konnen
nan CSS jis vle di inikman idantifye eleman nan
ak yon lide sou bonjou,
font size ki pral abitrèman gen sa a, Marge ak aliman tèks.
Se konsa, entérésan detay ayestetik
apeprè santre tèks la.
Se konsa, pati a enteresan an se nan script tag moute a isit la
nan Tanp kote mwen rive mete anndan nan tèt la nan paj la.
Se konsa, we'll - ou ka fè sa a nan nenpòt ki kantite fason
epi nou pral wè yon kèk itérations nan pwogram sa a menm
Men, kite la kòmanse nan tèt la.
Se konsa, mwen te deklare yon fonksyon rele bat je
ak aparamman li itilize sa a bati-an Dom metòd rele
getElementById ki se petèt youn nan metòd yo plis pouvwa anpil
ke ou jwenn soti nan bwat la ak JavaScript kap chèche
"Bonjou" pa gen gen quotes doub tankou li te
nan HTML se swa se amann lontan
kòm ou se estilitikman ki konsistan jou sa yo mwen bay gabèl di
gen anpil moun ki sèvi ak Java, quotes sèl nan JavaScript,
quotes double nan HTML men li pa reyèlman gen pwoblèm
toutotan w ap konsistan.
Se konsa, isit la si ou pa yo konnen yo, ou ka aktyèlman jwenn aksè nan
ak JavaScript CSS pwopriyete sou eleman.
Se konsa, remake ke mwen te te deklare yon varyab rele div
ak ki estoke andedan varyab sa a,
yon referans nan tou sa ki eleman Dom se.
Se konsa, si ou panse tounen nan CS50 oswa nenpòt klas nan kote ou te panse
sou estrikti pye bwa yo epi Dom, Dokiman objè ki gen konpòtman egzanplè,
sa a se jis yon referans nan yon ne nan yon pye bwa,
ki reprezante paj sa a
epi si div.style.visibility pwopriyete egal, egal, egal,
kache, Lè sa a, mwen jis vle yon activer li
kòm Jonatan pwopoze otreman mwen vle
aktive li nan men kache.
Koulye a, tankou nan bò a, poukisa trip la egal la?
Oswa sa ki se ke kont egal doub?
>> Fèm ekivalan.
>> M regrèt.
>> Fèm ekivalan.
Se konsa, li operatè yo idantite
kote pa w ap tcheke pa sèlman valè a nan varyab la
kòm yon egal, sans egal men tou, ki kalite li.
Se konsa, menm si nou pa gen espesifye sa a byen lwen nenpòt done
kalite pou nenpòt ki varyab nan sa a oswa nenpòt nan glisad yo,
gen yon kalite ki asosye ak sa fisèl kache
ak sa valè, kache yo epi yo se sa ki nan kou fisèl.
Se konsa, nan ka sa a, li pa reyèlman gen pwoblèm
paske gen nan pa gen fason ki nou pral conflate yon kòd
nan "kache" ak kèk lòt valè
men sa a se souvan yon bon abitid mwen ta ka di yo ka resevwa
nan lè l sèvi avèk egal, egal an,
egal siy se jeneralman yon bon bagay.
Li pral fè kòd ou pi solid tou de nan PHP, men
ak nan JavaScript paske ou pral kouri
nan detanzantan ka kwen kote valè a ta ka zewo
ke w ap tcheke pou ak zewo kapab conflated ak fo
ou te kapab pa gen okenn ak tankou nan PHP,
JavaScript twò ka gen plizyè valè pou bay manti kote pa zewo
ak fo ak nil epi endefini tout ka rezoud chal
ak fo.
Men, si w ap reyèlman vle yo tcheke pou valè patikilye
tankou zewo, nimewo a, oswa fo Boolean a Lè sa a, ou gen
yo sèvi ak operatè idantite sa a.
Se konsa, li te ka rive jwenn nan de tout fason, menm si isit la,
li nan sòt de san sans paske nou konnen nou ap tcheke
pou yon valè fisèl epi li pa pral fè nenpòt lòt bagay.
Se konsa, isit la nan majik la lè sa a, si mwen woulo liv desann nan liy sa a isit la,
aparamman, bati nan objè a fenèt
ak sa a se yon karakteristik nan yon navigatè ou ta ka jwenn aksè nan
sa a super mondyal objè yo rele fenèt,
andedan nan se sa ki kèk fonctionnalités,
si moso nan ki se mete entèval
epi li pran aparamman ki kalite agiman?
Yeah.
>> Rele Fonksyon ak yon tan.
>> Bon. Se konsa, yon fonksyon rele epi yon tan
yo ak pou patikilyèman yon referans a yon fonksyon,
yon konsèy nan yon fonksyon nan yon sans
e ke sa a fonksyon an ki k ap pase
jwenn egzekite chak kantite milisgond ak nan ka sa a,
li nan chak 500 milisgond.
Se konsa, li yon fason pou provoqués efektivman ak enfini bouk
san yo pa lè l sèvi avèk iterasyon men olye pou di JavaScript
nan motè a anndan nan navigatè a
fè sa chak 500 milisgond oswa se tou pre
ak 500 milisgond jan li kapab,
li vire soti ki anba kapo a,
gen nan sa ki rele yon evènman bouk epi n ap tounen vin jwenn sa a
nan yon kontèks ne JS ki jis toujou ap kalite
nan chita la, k ap vire, ap tann pou travay yo dwe fè
epi kòm pli vit ke li reyalize,
500 milisgond te pase bat je pral jwenn rele ankò
ak ankò e ankò se ansanm ak nan nenpòt ki lòt travay
ki bezwen jwenn fè.
Se konsa, sa nou ka amelyore isit la?
Oke, kite m 'louvri moute bat je-1.html
ak demontre bat je-1.html la
kòm estetik parfe idantik.
Se konsa, kisa nou ka amelyore isit la?
Oke, remake ke li te kalite initil
yo defini yon fonksyon rele Bat paske konbyen
nan jan anpil kote mwen te rele bat je a fonksyon?
>> Jis yon fwa.
>> Se konsa, yon sèl.
Se konsa, li pa t 'move, nan reyalite li la pwobableman trè
dwat devan.
Mwen defini yon bat je fonksyon, mwen rele yon bat je fonksyon pa fason
nan paramèt sa a, men teknikman,
Pa t 'gen rezon pou li ak yon paradigm komen
nan JavaScript se aktyèlman fè pou sèvi ak fonksyon LAMBDA
jan ou ka sonje soti nan 51 oswa fonksyon anonim
kote si ou pa bezwen yon non pou yon fonksyon,
si w ap sèlman rele li sètènman nan yon sèl kote,
poukisa deranje ankonbre Kòd ou, ankonbre lide nan pwogramasyon
ak non ou espas reyèlman ak senbòl
ke ou pa fè sa vrèman bezwen pran swen sou.
Se konsa, nan vèsyon sa-a isit la,
remake ke m ap rele window.SetInterval dirèkteman
nan tèt la anpil nan mwen tag script Lè sa a, mwen pase
nan yon fonksyon nameless ki pran pa gen agiman
e ke sa a parfe amann ak Lè sa a, kò a
nan ki fonksyon li parèt se ki idantik ak sa li te ye anvan an
ak sentaksik a sèlman diferans kounye a se
desann isit la pwochen ak 500 la.
Mwen fèmen kò a nan fonksyon an
ak Lè sa a, m ap di egzekite ke Kòd anvan,
chak 500 milisgond.
Chanjman Se konsa, anpil majinal
men yon etap nan direksyon sa ki nan pwobableman yon plis elegant
mete sou pye sa a.
Se konsa, kite a pran yon sèl sa a etap pi lwen si mwen kounye a ale
nan bat je de, ou pral wè yon bibliyotèk ki komen yo,
efè a nan ki ki pral
yo dwe konplètman enkonsistant estetik Men, si n 'al jwenn
nan vèsyon de isit la, avi ki nan tèt yo nan tèt mwen,
Mwen te enkli nan dènye vèsyon an JQuery.
Lè sa a,, desann isit la, Mwen jis netwaye
moute kòd la yon ti jan, li nan pa ale nan gen yon mond plezi
yo kontinye lè l sèvi avèk fonksyon Dom natif natal
ak sòt de anvan tout koreksyon JavaScript.
An reyalite, JQuery jan ou ka konnen te vin tèlman popilè
ke pifò moun jis konfli jQuery ak JavaScript
men vrèman jis yon manje bibliyotèk itil ekri
pa yon parèy yo te rele Jan Resig epi depi lòt moun
sa yo ki te jis fè yon bann bagay sa yo fatigan
nan JavaScript pi fasil ak plis ankò somèr.
Se konsa, nan ka sa a isit la sa k ap pase sou?
Se konsa, mwen gen sa a aparans nan yon siy dola, plis sou sa
nan jis yon moman, Lè sa a, sa a se yon seleksyon CSS.
Se konsa, li trè menm jan an nan Lespri Bondye a sa m 'te anvan,
men fwa sa a, mwen se literalman lè l sèvi avèk tag a hash
ki endike yon inik idantifyan rele bonjou
ak Lè sa a, aparamman . CSS se yon metòd bati
nan mèt fè tout sa objè se ke mwen jis te kreye
ak mwen tcheke valè a nan kle a vizibilite.
Men, si valè a nan ke kle egal, egal, egal, kache,
Lè sa a, mwen pral aktive li epi li Mwen pral aktive li tan sa a
lè l sèvi avèk metòd la menm ki aparamman se twò chaje
nan sans ke li gen de siyati diferan,
yon sèl ak yon sèl agiman ak yon sèl ak de agiman,
dezyèm lan nan yo ki se meteur a,
ansyen an nan ki se yon pikeur se konsa yo pale.
Men, si kirye epi si ou ta aktyèlman pa janm gade sa a,
si nou ale nan jquery.css èspere ke frape nan tèt se vre sa a
epi ou ka wè yon pi plis eksplikasyon fòmèl
ke nou jis itilize sa a, . CSS ak non pwopriyete
ak Lè sa a, meteur a se dot CSS
ak yon non pwopriyete ak yon valè.
Se konsa, très pi pwòp, men remake sòt nan modèl isit la
avèk chak iterasyon nan kòd sa a,
nou ap sòt de fè li pi sere ak pi sere ak pi sere
epi gen di pi bon desen
depi nou ap itilize yon moun Kòd lòt moun nan ki nan elimine
kèk nan konpleksite a.
Se konsa, kounye a kite a fè sa a menm ki pi senp.
Apre sa, an reyalite, si mwen retire tout nan quotes ou pral wè a jis tout
kòmantè ou pral wè ki jan senp sa a te vinn.
Diferans nan yon sèl isit la nan kou a se
ke mwen lè l sèvi avèk yon activer metòd ki tou vini bati
a nan jQuery ak sa se sèlman
paske yon lòt moun te ekri kòd la
ki aktyèlman baskile anviwònman an vizibilite
nan nenpòt eleman Dom ke ou voye l '.
Se konsa, pi bon ak pi byen.
Se konsa, sa a se yon modèl,
menm si sa a se yon manje senp egzanp ak sòt
nan estipid efè nèt ki se yon moso kliyote nan tèks,
li nan ki kalite panse pwosesis ki ou ta dwe reflechi -
dwe panse osijè pa nesesèman trè premye nan
ekri pasif yon bagay pou pwojè a prochaine
men sètènman menm jan ou repňte ak konseye ou oswa avè m '
ak reyinyon ekip ou a oswa ou jis revize Kòd koekipye ou
sou pi sere bagay yo, dwa?
Apre yo tout, yo ap mwens -
yon mwens liy nan Kòd ou finalman gen
nan teyori mwens pinèz yo ou yo kapab fè yo envite
paske se la yo se tou senpleman mwens Kòd dezòd yo avèk yo.
Tout dwa.
Se konsa, yon koup la takeaways.
LAMBDA fonksyon, fonksyon anonim,
anpil nan yo ki ou te wè anvan
ak Lè sa a, tou jis pi sere bagay yo ak yon bibliyotèk
tankou jQuery nan sa a ka patikilye.
Tout dwa.
Nenpòt kesyon?
Se pou yo fè yon lòt kliyan bò aspè isit la,
nan fòm zewo nou gen efè nèt sa a.
Fòm Super ki senp epi aparamman si mwen eseye klike sou enskri isit la,
okòmansman li di m 'ou se anrejistre, byen, pa vrèman.
Byen, poukisa se sa?
Oke, isit la nan fòm-0.html anpil ti Kòd,
pa gen okenn JavaScript tou sa ak li nan konplètman yon sòt fo
nan fòm paske aksyon an valè registered.html
ki vle di pa gen pwoblèm sa Mwen tape nan fòm sa a,
ki kote li ale nan ap voye sou sèvè a?
Yeah. Se konsa, yo registered.html ki se byen klè yon dosye HTML
ki se Se poutèt sa, estatik dosye ki pa gen okenn mwayen
pou pran opinyon itilizatè asepte gen nan pa gen Kòd JavaScript
entegre nan li sa a, se gade nan URL la
Se konsa, sa a se konplètman yon noop ak ke pa gen anyen ki pral rive
ak yon done soumèt, men ou ka wè estrikti a
nan yon fòm HTML5 jistis senp
ki gen yon modpas kèk, kalite D 'yon kèk.
Se konsa, kite a aktyèlman kounye a ajoute kèk kont kouran erè
ak wè kòman nou ta ka amelyore sa a.
Se konsa, isit la se sòt de yon pòv fason moun nan nan mete ann aplikasyon sa a
epi li sòt de yon anbarasan ti moso nan kòd.
Woulo liv Se konsa, premye kite a desann nan pati anba a
yo wè sa ki nan menm bagay la tou ak sa ki nan diferan.
Sèl bagay diferan kounye a ant sa a
ak vèsyon ki anvan an se ke mwen te bay fòm nan epi ID
nan "enskripsyon" te kapab yo te konn anyen mwen vle
men li vle di ke yo dwe inikman idantifye menm sa a pa
estrikteman nesesè paske si yon paj sèlman gen yon fòm, mwen
t kapab jwenn li ak youn nan metòd seleksyon jQuery la.
Men, fason sa a jis fè li pi detèrminist.
Se konsa, si m 'ale kounye a nan script m' tag, remake sa ki annapre yo,
egal window.onload yon fonksyon anonim.
Se konsa, sa sa a se fè la a?
Se konsa, ou ka Sonje byen, nan kliyan-kòt Programming -
JavaScript olye HTML paj te evènman divès kalite ki asosye
ak eleman, klike epi soumèt epi konsantre
ak flou ak lòt sa yo evènman ki te kapab rive
kòm yon itilizatè tipikman reyaji ak paj la,
window.onload fè sa li di.
Sou fenèt tout loading la
Se konsa, yon fwa tout imaj yo te telechaje yon fwa tout dosye yo te
te telechaje epi yon fwa te paj la te chaje,
fè kòd la yo, epi avi si mwen chanje a yon anba a
nan metòd sa a, remake ke pa gen okenn parantèz
apre atèl a Curly sa vle di
ke mwen pa egzekite sa a fonksyon Moute bò isit, koulye a,
navigatè a ki pral egzekite l pou mwen lè li te detèmine
ki te paj la chaje.
Se konsa, kite a wè sa nou te fè,
document.getElementById enskripsyon
se konsa ke jis ban m ' yon referans nan ne an
nan pye bwa a ki nan la gen yon ID fè enskripsyon an.
Koulye a, mwen pral enskri yon lòt Handler evènman
pa fè form.onsubmit vin fonksyon sa a anonim
ki vle di sa ki annapre yo Kòd ta dwe egzekite chak fwa
se ke fòm soumèt.
Koulye a, pi fò nan sa a se jis sòt de raz lojik.
Se konsa, si valè a nan la jaden imel nan fòm lan se
"Pa gen anyen" Lè sa a, ou dwe bay adrès imel ou,
ou rele nan itilizatè a ak yon alète ak Lè sa a, retounen fo.
Lè sa a, mwen gen yon pakèt moun sou lòt chèk,
chèk yo pou modpas la,
chèk yo si la modpas yo se menm bagay la,
chèk yo si akò a a bwat chèk tcheke oswa ou pa
ak mwen jis rele sou itilizatè a si genyen
nan tès sa yo aktyèlman febli.
Se konsa, isit la se yon egzanp menm menm si li nan yon ti kras parvenus
isit la lefèt ke mwen lè l sèvi avèk egal, egal, egal,
vle di ke itilizatè a pa ka eseye fè je chèch ak m '
pa sezisman nan sa ki valè.
Oswa olye mwen se vre wi: tcheke pou prezans nan
nan fisèl la vid, itilizatè a pa gen tape anyen ankò.
Si itilizatè a tape nan literalman zewo,
"Zero" ki kapab te kapab konfonn ak fisèl la vid.
Apre sa, mwen di li a sòt nan san sans isit la
paske evidamman menm zewo se pa yon adrès imel.
Men, si sa a te yon plis jenerik jaden tankou yon jaden tèks
oswa yon non oswa yon deskripsyon oswa yon bagay ou vle valè pou
epi li pa nesesèman syntactically gen
yo dwe yon adrès imel, itilizatè a te kapab tape yon bagay tankou zewo
epi ankò ka kwen men sa a poukisa tipikman tcheke kalite ki
yon bagay itil.
W ap vrèman tcheke pou li te gen itilizatè a tape pa gen anyen
nan ki jaden.
Se konsa, sa k ap pase si pa gen okenn nan tès sa yo echwe, byen,
retounen vre andedan nan yon Handler evènman
tankou onsubmit jis vle di Se pou konpòtman orijinal la aktyèlman
difize ak Se poutèt sa a pral fòm jwenn soumèt.
Ak Se poutèt sa lè m 'finalman klike soumèt devan mwen te resevwa
a la register.html ak si m 'fè pou kounye a, avi,
Mwen jwenn rele nan si mwen pa fè sa bay yon adrès imel
e mwen ka tape nan malan@harvard.edu,
wouj [fonetik elemantè], wouj, tcheke bwat la,
e kounye a, enskri epi li di m ', ankò,
w ap anrejistre oswa ou pa vrèman.
Tout dwa.
Se konsa, kite a netwaye sa a leve jis yon ti kras ak Lè sa a, tranzisyon
plus nan nouvo bò sèvè bagay.
Se konsa, si m 'antre nan fòm-2.html, remake yon bagay kèk.
Se konsa, yon sèl, mwen te fè jQuery tounen nan melanj la
Se konsa, gen ankò se siy dola sa a
e kounye a, mwen lè l sèvi avèk kèk metòd jQuery.
Se konsa, premye, ki sa li sou siyen an dola sa a, se
Se konsa, espesyal isit la?
Ki sa ki se siy a an dola lase nan tout ki pi nenpòt ki Kòd jQuery?
Yeah.
[Fèbl rmark]
OK. Se konsa, fonksyon an siy dola ale nan Dom an kap
pou yon bagay ak sa-a patikilye CSS seleksyon.
Se konsa, vre men prèske twò presi.
Sa se sa k ap pase lè ou pase nan yon kòd
kòm nan ka sa a, men ou pa fè sa toujou gen yo pase nan yon kòd.
An reyalite, ka nan pwen, ki trè a premye liy isit la se sa a se pa yon
CSS seleksyon, mwen pase nan yon fonksyon Lambda.
Se konsa, plis jeneralman - se konsa, bon repons men tou presi.
Plis jeneralman, ki sa ki siy dola reprezante?
>> Jis jQuery.
>> Yeah. Se konsa, jis jQuery oswa li nan jis yon fonksyon
ke kèk ane nèg Anons sa pibliye depi te ekri ak lòt moun ki gen
depi ranfòse ki literalman pa se default rele -
Wouch, yo rele jQuery.
Li jis - li sanble soti kontrèman ak yon anpil
nan siy lang dola se yon senbòl parfe ki valab yo sèvi ak
nan non yon varyab nan Lè nou konsidere ke
nan PHP siy dola evidamman gen yon siyifikasyon espesyal
men nan JavaScript tankou nan kèk lang, siy dola
ak souliye ak lòt sa yo karaktè espesyal totalman legi
yo itilize nan senbòl pwòp ou a non pou varyab.
Se konsa, yon moun jis deside sa a, ou konnen ki sa?
Li pral fè bèl fatigan
fè lemonn antye tape jQuery tout tan tout tan an,
kite m 'sòt de plante yon mennen nan tè a ak di,
"Bibliyotèk sa a ap sèvi ak siy dola. "
Apre sa, an reyalite, sa a ogmante risk pou yo
ke yon lòt moun pran pòz grandizè ki pral sèvi ak siy a an dola
pou bibliyotèk li oswa li, men gen nan fason yo sòt de asire
ke lè ou sèvi ak a an dola siyen li kat jQuery
paske ou ka fè tès si li nan deja te plase
yon lòt bagay esansyèlman.
Tout dwa.
Se konsa, sa a, se tout sa ki se, gen nan pa gen majik.
Li nan jis yon sexy kap moso nan sentaks se sa ki bèl
ak rapid ak pi fasil tape.
Se konsa, sa ki pase lè ou tape siy dola paren louvri
ak Lè sa a, yon fonksyon anonim.
Oke, sanble ke sa a se notasyon aktyèlman steno
pou dokiman dot pare paren louvri.
Se konsa, jan Cynthia remake pi bonè nou deja jwenn yon
kwen ka.
Si ou jis pase nan fonksyon an LAMBDA,
efè a nan a an dola siy se yon ti kras diferan.
An reyalite, sa ki vrèman k ap pase se ke li la ekivalan a sa a,
pase nan yon referans a dokiman objè a mondyal
ki se mondyal jis tankou objè a fenèt se
ki ba ou kèk fonctionnalités espesyal
ki afekte paj la tout antye oswa navigatè ak li sanble
soti dokiman ke lè ou vlope l 'ak jQuery,
jQuery esansyèlman reyalize, oh, sa a se yon referans
ak sa yo ki dokiman espesyal objè,
kite m 'kounye a anrejistre yon evènman Handler rele pare
ki se pa natif natal JavaScript oswa Dom ki gen rapò.
Ready se yon jQuery bagay ki di
lè gen paj la chaje tout nan eleman yo HTML
men pa nesesèman chaje, tout CSS la ak imaj
ak JavaScript dosye ak flash dosye ak renmen yo.
Se konsa, li yon etap anvan sou chaj Lè sa a, ale pi devan
ak egzekite sa ki annapre yo.
Apre sa, tèt la nan lè l sèvi avèk sou pare vle di se ke ou ka, ou konnen,
ke tout nan eleman yo nan Dom ou a,
tout inikman idantifye nan bagay sa yo ak kat idantite ki gen yo, yo egziste menm
si paj la, sa li yo yo ap toujou chaje ak loading
epi ou gen kèk ikon kase pou yon moman
oswa paj blan nan background nan.
Yeah.
>> Ki sa ki ta rive si [fèbl]?
>> Pafè egzanp, yon kesyon pafè.
Se konsa, kite a wè si nou kapab simulation sa a kounye a.
Se konsa, kite m 'ale pi devan epi efase de liy sa a moute isit la ak Lè sa a,
san yo pa trakase ranje a dekoupaj, kite m 'ale pi devan
ak efase sa a desann isit la - Wouch, yon sèl sa a desann isit la.
Koulye a, kite m 'ale nan men nan paj, ale nan fòm-2.html ak kalite
nan Rejis, pa gen anyen te sanble yo rive, kite a di, poukisa te ke,
kite a ale pi devan epi louvri moute enspektè Chrome a,
louvri moute konsole a jis yo wè si gen ankenn bagay k ap pase isit la, kounye a,
enskri, toujou pa gen anyen.
Se konsa, kòd la se syntactically amann
Se konsa, mwen pa wè nenpòt ki mesaj erè wouj,
men sa ki byen klè se pa k ap pase?
Pa gen yonn nan Kòd mwen an se dwa, li pa nan travay pa gen anyen
nan kòd mwen an sanble ap egzekite, konsa poukisa se sa a?
Oke, JavaScript ak navigatè plis jeneralman egzekite la
sa a yon paj entènèt, tèt jouk anba, gòch a dwat.
Apre sa, pwoblèm nan se pou sa paske tèt la
nan paj sa a te HTML Lè sa a, tèt Lè sa a, script Lè sa a, yon lòt script,
sa a ki pral jwenn egzekite anvan sa a se menm pare,
oswa menm egziste nan pye bwa a reprezantasyon nan paj la.
Fòm nan tèt li, pa menm nan kò ki egziste nan pwen sa a.
Se konsa, jQuery se entelijan ase ak kont kouran erè li nan
ke si pa gen okenn eleman ak ID a inik nan enskripsyon yo,
li nan pa ale nan kosyon soti sou ou
ak jis deklanche kèk konsole erè epi kase paj la tout antye,
li nan ale nan an silans inyore ou, men rezon ki fè yo ke okenn
nan kòd sa a tout tan tout tan ègzekutra se
paske lè ou gen anrejistre sa a soumèt Handler,
pa te gen okenn eleman mete li ak.
Se konsa, li sòt de yon pa gen okenn op la.
Se konsa, pa ki espesifye olye de sa, rete tann jiskaske gen laj la chaje
si nou te fè sa window.onload la bagay ki se sòt
nan wout la lekòl fin vye granmoun nan ap fè li oswa sexier jQuery wout la
tankou sa a, nou kapab di li rete tann jiskaske tout
nan tout sa yo Tags HTML gen te parcouru pou ke menm
si imaj yo pa t 'chaje, nan pi piti ne sa a ki nan pye bwa a,
Lè sa a, JQuery kapab asire ke tout bagay ki gen la.
Yeah.
[Fèbl rmark]
Wi, bon, repons lan se wi absoliman.
Se konsa, solisyon an lòt yo sa a, si ou pa t 'sèvi ak sa a
oswa pa t 'sonje ke sa a te egziste,
ou ta ka absoliman avanse pou pi tout bagay sa yo nan fon an
nan paj wèb la, andedan nan la kò toujou men anba a fòm lan
ak ki ta tou rezoud pwoblèm sa a.
Se jis tipikman konsidere kòm move pratik.
Li se yon ti kras sal ak débordan espesyalman
si ou kenbe blocage tout bagay anba a nan paj la,
espesyalman lè m ap kenbe bagay senp pa mete tout
nan kòd m 'anndan nan paj la HTML
lè nan kou ou kapab sètènman jwenn nan abitid la
nan faktè li soti nan yon dosye separe
nan pwen sa a li nan jis bèl
santralize nan dosye nan tèt la.
Eksepte gen yon pri ou peye
pa mete JavaScript yon lòt byen tankou dosye CSS
nan tèt la nan paj la, sa ki nan yon risk ke ou kouri?
>> Lan paj loading.
>> Lan paj loading, poukisa?
>> Paske nou ap eseye chaj tout bibliyotèk nan yo
anvan [fèbl].
>> Egzakteman paske navigatè li Kòd anwo jouk anba,
goch a dwat si Google analytics yo se ralanti
oswa jQuery CDN a se ralanti oswa API nan Facebook se ralanti
e ke dosye jis pandye potansyèlman depann
sou ki jan ou chaje ke ranpli, la paj antye t 'kapab parèt devan yo pann.
Men, si ou wè sa a yon anpil franchman
sou sit entènèt yo gen yon anpil nan ki ba bon jan kalite piblisite
sou yo, nou ap sèlman yon sèl ralanti oswa ki tonbe sou sit wèb ta ka kwoke yon paj
pou kèk endefini kantite segonn
jouk finalman navigatè a èspere ke fwa soti sou ki
ak Lè sa a, montre ou rès la nan paj la.
Se konsa, si ou janm itilize tankou Facebook la, tankou bouton,
nan paj entènèt ou an, kite m ' wè si mwen ka jwenn sa a
san yo pa gen ouvri sesyon an isit la.
Se konsa, si ou ale nan nan Tankou bouton Facebook a
epi klike sou yon kòd jwenn, modi li,
pèmèt wè si nou kapab jwenn egzanp lan,
siman yon moun te afiche sa a.
[Pòz]
Mwen pral bay moute nan yon kèk segonn si nou pa wè sa a.
Facebook asynch - OK.
Se konsa, sa a se kòd la ak sof si yo te chanje li dènyèman
ki Facebook aktyèlman rekòmande pou ou itilize
chaj bibliyotèk yo ak aktyèlman pwopoze
ke ou mete sa a nan kò a nan paj ou yo.
Se konsa, Facebook konseye ou kreye yon sòt de estipid DIV
ki jis gen inik ID tankou sa a, Lè sa a, gen yon tag script
ak tout konpleksite sa a esansyèlman fè sa ki annapre yo
e yo pa itilize nenpòt JQuery paske yo pa vle
ou panse nenpòt ki lòt Dependencies,
kite m 'avanse pou pi sa a sou jis yon ti jan.
Se konsa, remake yo gen yon anonim fonksyon isit la,
plis sou sa nan jis yon sèl ti kadè,
yo Lè sa a, sèvi ak document.createElement,
yo ap kreye yon eleman Dom, sa a se tankou malok se konsa yo pale
kote tag a se nan kalite script, li Lè sa a, ki espesifye
ki atribi nan async nan ki tag ki pral
yo dwe vre lè sa a ou ale pi devan ak konnen sa ki URL la
nan JavaScript Facebook a yo ta dwe
ak sa a se jis fason an anpenpan
nan kouran yo ta dwe li ka HGP oswa HDPS.
Lè sa a, finalman, ou remake sa ki Facebook fè,
yo jwenn ne la Dom ki gen yon ID nan Facebook rasin
ki se ki sa yo te di ou yo mete nan paj la
ak lè sa a yo kole timoun nan Se konsa, efè a nan tout bagay sa yo se
sòt de dynamique enjekte yon nouvo tag script nan paj ou a
tankou yon timoun nan DIV la ke ou antre gen Konsa, lòt yo
nan charj yo paj san pwoblèm mwen tap
ak Lè sa a, kòd sa a aktyèlman vin chaje asenkron.
Se konsa, esansyèlman apre a reyalite ak mwen difere mansyone
nan fonksyon an anonim,
sa ki nan Funky sa a sentaks refere li a isit la
lè mwen gen pa sèlman fonksyon louvri paren, paren fèmen
ak Lè sa a, aparèy òtopedik Curly, poukisa paren yo louvri isit la
ak Lè sa a, fèmen a louvri, fèmen paren la, sa ki nan ke fè la a?
>> [Fèbl] defini ak Lè sa a egzekite?
>> Egzakteman, li defini yon fonksyon ki se anonim
men senpleman defini yon fonksyon,
nan kou pa egzekite yon fonksyon jiskaske ou rele l '
pa non, men nan kou sa a se yon fonksyon anonim
Se konsa, ou pa ka rele li pa non men ou kapab
nan JavaScript egzekite yon fonksyon anonim jis
pa ankapsule tout bagay la ant parantèz jan nou te fè
ak paren sa a ak sa a paren isit la ak Lè sa a, yon ranje
nan fen a nan fonksyon an paren louvri, paren fèmen,
si ou pa vle pase li nenpòt ki agiman.
Men, sa a sanble kalite estipid,
tankou poukisa sa a plis sentaksik konpleksite
ke pifò moun pa t 'sanble yo rekonèt, sa ki nan valè a
nan vlope sa yo twa liy nan kòd
nan yon fonksyon anonim nan fason sa a.
Yeah.
>> Pou evite ranplasan yon gen anpil valè nan la [fèbl].
>> Egzakteman, pou fè pou evite ranplasan yon varyab
nan paj ki deja egziste a, dwa?
Facebook se yon ti jan grandizè deside,
yo pwal santi yo sèvi ak nan varyab E, li la byen gen anpil chans
ki oumenm oswa nenpòt moun lè l sèvi avèk Facebook la tankou bouton
oswa kèlkeswa sa lòt ploge sosyal
nan gen yon varyab yon kote yo rele E. Se konsa,
pa ankapsule tout nan kòd yo andedan
nan fonksyon sa a anonim, yo esansyèlman gen sijè ki abòde pwòp yo
ki pa riske clobbering nenpòt ki varyab ki egziste deja.
Se konsa, sa a tou se aktyèlman yon paradigm trè komen,
espesyalman lè li ap ekri yon kòd bibliyotèk
oswa lè ou tèt ou pa fè sa vle dezord espas non ou
ak lòt varyab ou vle valè a yo viv
epi mouri yon fwa ou sòti ki blòk nan kòd,
sa a se yon teknik bèl nan JavaScript.
Tout dwa.
Se konsa, Lè sa a, tounen nan egzanp sa a isit la, tout sa nou te fè nan fen a
ak egzanp sa a se jis netwaye kòd la.
Se konsa, li la toujou te gen yon antye pakèt moun sou switch, yon pakèt tout
nan kondisyon isit la, men remake yon ti jan nan sentaks,
sa a jwenn aksè ne la Dom ak enskripsyon an ID inik,
vle di la espas gade kounye a pou yon pitit nan ki ne,
jwenn li si li nan nan kalite D 'ak Lè sa a, menm
si ou pa gen pou wè sa a anvan, ou ta ka konnen
ke sa a jis vle di jwenn l 'ak tag a opinyon,
eleman yo opinyon ki gen yon atribi nan Non ki gen yon valè
nan imel, ak Lè sa a, se pou m 'balanse men m' nan kèk
nan rès la se pa tout sa ki eksitan
men vrèman jis jQuery sentaks pou operasyon yo menm.
Tout dwa.
Men, sa ki pa tèlman enpòtan isit la se bagay la bò navigatè
men pito lefèt ke nou te gen pi pwòp ak pi pwòp fason
nan aktyèlman ap fè ki Kòd travay la.
Tout dwa.
Nenpòt kesyon?
[Fèbl rmark]
OK. Koulye a, pati a plezi.
Se konsa, node.js Poukisa?
Ki moun ki cares?
Ki sa ou konnen nan li jodi a?
Node.js, poukisa?
Henry [sipoze òtograf].
[Fèbl rmark]
Batri Reyajiste?
Ki sa ki - sa a se yon pafè hanger falèz
pou lèt mwatye nan jounen jodi a.
Poukisa nou pa n 'al pran yon ti repo 5 minit isit la,
gen yon sirèt mwatye machin gen si ou ta
tankou kèk sirèt san yo pa mete yon ka pous