>> Bone.
Do, JavaScript.
Preskaŭ ĉiuj en tiu ĉambro verŝajne havas iun gradon
de konsolo, per tio, ĉu ĝi estis vojo reen kiam en SC50
aŭ jam pasis personaj retaj projektoj aŭ eĉ
se vi faris iom de ĝi kun ĉi lastaj PHP bazo projekto,
sed por la plej parto, multaj el vi,
eĉ se vi havas iun konsolon
kun JavaScript eble ne estis prenitaj
evidentaj kiel la lingvo funkcias kaj kio eliras
sur sub la kapuĉo kaj kion ni tuj provi
fari hodiaŭ estas ŝelo reen kelkaj el la teknika tavoloj
de kio JavaScript estas, kiom Ĝi diferencas de lingvo
kiel PHP, kiel povas esti uzata ne nur klienton flanko
sed ankaŭ servilo flanko kaj tiam koncentri tre specife
en tiu kadro, rimarki ne JS kio estas esence tempo de ekzekuto,
programo per kiu vi povas ekzekuti kodo JavaScript,
servilo flanko kaj ĝi Iĝas pli kaj pli populara varo
de sur la sama staturo ĉi tagoj de probable Rubeno kaj PHP
kaj Python, kaj vi vidos
ke ŝi havas iun belan potenca trajtojn per vojo de iu
de la enkonstruita en lingvo konstruojn.
Sed unue, kelkaj el la facila stuff nur por memorigi vin
, pri tio kiel lingvo funkcias kaj se vi havos problemojn vidante neniun
de tiu, nur krio eksteren kaj ni ĝustigos.
Do, oni same kiel en PHP-tie estas neniu nocio de ĉefa funkcio,
vi simple komencu skribi kodo
kaj vi povas therefor interpreti ĝin supro al malsupro.
En la kunteksto de retumilo
aŭ en iu servilo flanko ni vidos kelkajn ekzemplojn
en iom.
Kondiĉoj, sintakse ekvivalenta al PHP tiel kiel C,
C + + kaj kelkaj aliaj lingvoj tiom simple doni al vi la senton
pri kiel ni povus strukturigi lin,
tie estas nur kanonaj kondiĉo.
Bulea esprimoj, ĝusta sama sintakse kiel vi vidis
en tiuj samaj aliaj lingvoj, ambaŭ por oring
kaj por fini tion kune.
Javascript havas ŝaltilojn, multe kiel PHP kaj aliaj faru
kaj vi ne estas limigita, kiel en C al integralo primitivoj
kiel signoj kaj ints povas reale fari aliajn tipojn de valoroj.
Maŝojn. Do, ĉi tiu estas precize la sama
kaj probable deko da lingvoj, dum masxojn, do dum masxojn
kaj tiam ĉi truko tie.
Do, tiu estas speco de konata kiel rapida numerado
kaj ĝi estas tre interesa maniero de ĝuste kiel en PHP-faranta
por ĉiu FU kiel trinkejo vi povas simile,
en JavaScript celon, kie objekto estas la nomo
de la variablo tien, diru, var i en objekto kaj je ĉiu ripeto
de tiu ciklo, i estas tuj estos unu
de la ŝlosiloj de tiu objekto.
Do, se vi havas objekton por studento, kaj studento havas IRU
kaj nomon kaj sur domo, ripete mi prenos
de la valoro de ID kaj nomon kaj domo kaj vi povos therefor indekso
en objekton, kvazaŭ ĝi estas tabelo uzante kvadrata krampo
skribmaniero por ricevi la valoron el la ŝlosilaj ID aŭ nomo
aŭ domo kaj tiel plu.
Kaj male al komuna supozo, JavaScript objektoj,
propraĵoj estas ne nepre garantias esti
en la sama ordo, tio estas ankaŭ fidela al PHP, do ne supozi
ke aferoj restu en la sama ordo
ke vi metis tiujn ŝlosilon valoro paroj en objekton.
Kion pri arrays?
Ekzistas kelkaj manieroj skribi ĝin sintakse
sed tio estas probable la plej komuna nun nur uzas kvadratan
krampo skribmaniero.
Do, ĉi tiu estas variablo al voki nombroj enhavanta tabelo
de ses entjeroj tie, jen simpla ŝnuro
kaj rimarki kio forestas el tiuj ekzemploj,
kio estas JavaScript ŝajne mankas.
Jes. Do, ne estas nocio de tajpado, certe ne
en tiu ĉi kunteksto tie, sed ĉi tiu estas ja kordo.
Do, JavaScript havas tipoj kaj tio estis ja tabelo
kiu estas sin tipo kaj ĉiu el la elementoj
en tiu tabelo estis de tipo numeron kiel JavaScript nomas ilin.
Do, ĝi estas lakse tajp lingvo kaj ni vidos
ke JavaScript kiel PHP havas identecon operatoro
kaj aliajn mekanismojn por reale kontrolanta kion la tipo
de iu variablo estas tiel por eraro kontrolado
kaj por aliaj aplikoj.
Kaj ĉi tie estas specimena objekto enhavantaj nur ID kaj nomon.
Kaj nun rimarkas ke ni estas uzante krispa krampo skribmaniero,
la deŝovon kaj la blanka spaco estas speco de sensignifa
kaj tio deklaras variablo kies nomo estas Rob
kaj kies ID estas 1 kaj la dato tipo estas ĉi tie niajn nombro
kaj ŝnuro respektive.
Kaj tiam ĉi tiu estas io iomete malsamajn
se vi iam faris ion kun Ajax tiuj tagoj?
Vi probable uzas objekto kiel tiu
sed kio estas Mencindas tie?
Kio estas sintakse iam tiel malsama, nur paro
de aferoj inter ĉi tiu ekzemplo kio estas rekoni malgrandaj
kaj cxi tiu granda ekzemplo.
Do, unue en laiko la termino: kio estas tio?
Kio estas la tipo de bastono vi dirus?
OK, estas tabelo, ĝi estas tabelo de kio?
>> Objektoj.
>> Bone, estas tabelo de objektoj.
Kaj nun, enfokusigi nur unu - iu el tiuj objektoj,
kio estas malsamaj inter tio kaj tio?
>> La ŝlosiloj estas kordoj.
>> Jes. Do, la klavoj estas ŝnuroj,
kaj la klavoj estas reale kordoj en ambaŭ kazoj
kaj ĉi tiu estas speco de idiota
en mia opinio historiaj dezajno decidon kiam ajn vi uzas
JSON, JavaScript Objekto Skribmaniero,
kio estas esence transporto formato
por sendo datumoj tipe trans la reto
inter kliento kaj servilo, vi devas memori
ke tio ne estas vere valida JSON kaj tio estas unu
de tiuj FYIs krom se vi iam bang vian kapon kontraŭ la muro
dum kelkaj minutoj por nenio bona Tial, ĝi ne estas valida JSON
ĉar la klavoj estas Ne vere citis.
JSON idiotically postulas ke la klavoj ne nur citis,
sed ke ili estu duoble citis, citiloj ne suficxas.
Do, stulta uleto kaj pli amuza fakto
por hodiaŭaj celoj sed tiu tro estus valida JavaScript
ĝi estas nur ne - la konversacii estas ne vera.
Ĉiuj pravas.
Do, ni vidos multajn pli pri tio.
Ĉiuj pravas.
Do, tio estas JavaScript sintakse probable bela
familiara, iu el vi, kiuj havas neniam uzas JavaScript antaŭe
ĝi ne estas grandega salto de PHP aŭ plej ajna proceduraj lingvo
ke vi povus esti uzata.
Do, hodiaŭ ni enfokusigi la interesaj aspektoj
de JavaScript aparte en la kunteksto de neniu JS
sed ne ekskluzive, ĉar supren ĝis nun vi havas probable,
se vi uzas JavaScript, uzis gxin ene de foliumilo.
Do, neniu JS estas medio tiam en iomete tuj
por permesi al ni aliri Javascript kodo klienton -
servilo flankon sed la unua, ni rigardu
ĉe io tio estas iom pli kliento flanko.
Do, mi jam foriris en kaj ĉi tiu estas ligita al la kursoj retpaĝaro,
se vi volas ludi kune, ekzistas du subdosierujoj
en hodiaŭa Poŝtkodo de nomita fonto enkrustajxoj zip en la retejo
kaj jen nur kelkaj ekzemploj memorante
de aferoj kiujn vi eble vidis antaŭe kaj mi specon de konstruis ilin
el simplaj iomete pli komplikita tease
iujn el la trajtoj de JavaScript.
Do, ni iru antaŭen kaj prenu oni serĉas ekzemple ĉe ĉi.
Do, malfelicxe la blink etikedo estis mortigis ekstere plurajn jarojn
kiel la vojo ili ricevis bela kaj bela
kaj la blink etikedo estis laŭvorte malferma krampo blink proksime krampo
kaj tio ia neniu plu kun ni.
Sed, ni povas ankoraŭ revivigi tiun ideon de etikedo por nur speco
pensi pri tio logike, kiel vi iros
pri fari ion kiel ĉi blink intuicie?
Supozante vi scias iom bito de JavaScript kaj CSS aŭ
ĉe tiu punkto, estas OK, se vi ne faras.
>> Ŝanĝu tempo el forturnu do post mi marki gxin
eksteren kaj montri ĝin denove.
>> Jes, perfekta.
Tio estas speco de programado 101,
kiel vi sukcesas vida efekto kiel tiu?
Nu, vi iel devas montri ion
kaj tiam kaŝi ion, spektaklo ion, kasxu ion
kaj kiel Jonathan proponas uzante ian tempon,
ia horaro vi povas fari ĉi ree sen bezoni
uzi maŝo aŭ io kiel tio.
Do, permesu al mi iri en blink-0.html
kaj lasu min ŝrumpi la tiparo iomete
por ke pli da ĉi tiu punto.
Kaj ni rigardu ĉe kio okazas tie.
Do, unue: rimarki, ke la korpo
de tiu paĝo estas super simpla, interne de la korpo
de la paĝo estas nur div.
Mi jam arbitre donita IRU de saluto
kaj kiu povus esti io tiel longe kiel ĝi estas unika
kaj tiam mi simple havas iom simpla teksto, saluton mondo.
Do, se mi nun rulumu supren, rimarkos iujn lanugaj stilo.
Do, mi diru, akrajn saluton, kiu kiel vi scias
en CSS simple signifas unike identigi la elemento
kun ideo de saluto,
tiparo tuj arbitre esti tiu, rando kaj teksto align.
Do, seninteresa estetikajn detalojn
por malglate centri la tekston.
Do, la interesa parto estas en la skripto etikedo ĝis ĉi tie
kiun mi hazarde metis interne de la kapo de la paĝo.
Do, we'll - vi povas fari tiu en ia nombro de manieroj
kaj ni vidos kelkajn ripetoj de tiu sama programo
sed ni komencu de la supro.
Do, mi deklaras funkcio nomita blink
kaj ŝajne ĝi uzas tiun integrita DOM metodo nomata
getElementById kiu estas eble unu el la plej potencaj metodoj
ke vi eliru el la skatolo kun JavaScript serĉi
"Saluton!" Ne devas esti duoblaj citiloj kiel ĝi estis
en HTML estas ĉu is fine tiel longe
ĉar vi estas stile konsekvenca tiuj tagoj mi kuraĝas diri
multaj homoj uzas Java, citiloj en JavaScript,
duoblaj citiloj en HTML, sed ĝi ne vere gravas
tiel longe kiel vi estas kohera.
Do, ĉi tie se vi ne estas familiara, vi povas efektive aliri
kun JavaScript CSS proprietoj elementojn.
Do, ili rimarkas ke mi havas deklaris variablon nomitan div
kaj konservataj ene de tiu variablo,
referenco al kiom ke DOM elemento estas.
Do, se vi opinias reen al CS50 aŭ iu klaso en kiuj vi pensis
pri arbo strukturoj kaj DOM, Dokumento Objekto Modelo,
ĉi tio estas nur referenco al nodo en arbo,
kiu reprezentas la paĝon
kaj se div.style.visibility propraĵo egalas, egalaj, egalaj,
kaŝita, tiam mi simple deziras baskuligi ĝi
kiel Jonathan proponitaj alie mi volas
por alterni ĝi transiru al kaŝitaj.
Nun, kiel en la flanko, kial la triobla egalas tie?
Aŭ kio estas ke kontre duobla egalaj?
>> Strikta ekvivalento.
>> Pardonon.
>> Strikta ekvivalento.
Do, ĝi estas la identa operatoroj
kie por vi kontrolanta ne nur la valoro de la variablo
kiel egalaj, egala senco sed ankaŭ la tipo de ĝi.
Do, eĉ se ni ne specifita ĉi malproksime ajna datumoj
tipoj por ajna variabloj en tiu aŭ iu el la diapozitivoj,
tie estas tipo asociita kun tiu kordo kaŝita
kun tiu valoro, kaŝita kaj tio estas kompreneble kordo.
Do, en tiu kazo, ĝi vere ne gravas
ĉar ne estas tiel ke Ni tuj conflate ŝnuro
de "kaŝita" kun iu alia valoro
sed cxi tiu estas ofte bona kutimo mi dirus akiri
en uzanta la egalaj, egala,
egala signo estas ĝenerale bona afero.
Ĝi faros via kodo pli fortika ambaŭ en PHP, sed
kaj en JavaScript ĉar vi kuros
en foje angulo kazoj kie la valoro povas esti nulo
ke vi estas kontrolanta por kaj nulo povas conflated kun falsa
aŭ povus esti ne kaj kiel en PHP,
Javascript tro povas havi multoblajn false valoroj kie per nulo
kaj falsaj kaj nulaj kaj nedifinita povas ĉiuj solvi implice
al falsaj.
Sed se vi vere voli kontroli por aparta valoro
kiel nulon, la nombro, aŭ falsa la Bulea tiam vi havos
uzi ĉi identecon operatoro.
Do, ĝi povus okazi akiri en ĉiuokaze eĉ se ĉi tie,
ĝi estas speco de sensignifa ĉar ni scias ke ni estas kontrolanta
sinsekvojn valoron kaj ĝi estas ne tuj esti io alia.
Do, jen la magio tiam, se mi rulumu malsupren por tiu linio tie,
ŝajne, konstruita en la fenestro objekto
kaj tio estas eco de navegador vi povus aliri
al tiu super tutmonda objekto nomita Fenestro,
interne de kiu estas iuj funkcioj,
se peco de kio estas fiksita intervalo
kaj gxi prenas ŝajne specojn de argumentoj?
Jes.
>> Funkcio alvokon kaj tempo.
>> Bone. Do, funkcio voki kaj tempo
kaj tiel aparte referenci al funkcio,
puntero al funkcio iusence
kaj tio estas la funkcio ke okazas
al get ekzekutita ĉiu nombro de milisekundoj kaj en tiu kazo,
ĝi estas ĉiu 500 milisekundoj.
Do, estas vojo de indukti efike kaj senfina iteracio
sen uzi ripeta sed anstataŭ diri JavaScript
al la motoro interne de la retumilo
por fari tion ĉiun 500 milisekundoj aŭ estas fermi
500 milisekundoj kiel ĝi povas,
tio rezultas ke sub la kapuĉo,
tie estas kion oni nomas eventon loop kaj ni revenos al tiu
en la kunteksto de nodo JS ke nur senĉese speco
de tie, sidantaj ŝpinante, atendante laboro farenda
kaj tuj kiam ĝi realigas,
500 milisekundoj trapasos blink estos get nomata denove
kaj denove kaj denove estas kune pri iu ajn alia laboro
kiu bezonas get farita.
Do, kion ni povas plibonigi ĉi tie?
Nu, lasu al mi malfermi supren blink-1.html
kaj pruvi la blink-1.html
kiel estetike perfekte identaj.
Do, kion ni povus plibonigi ĉi tie?
Nu, rimarki ke ĝi Estis speco de netaŭgaj
difini funkcio nomita Blink ĉar kiom da
en kiom da lokoj faris min vokas la funkcion blink?
>> Nur unufoje.
>> Do, tiu.
Do, tio ne estas malbona, en Fakte gxi estas probable bela
rekte antaŭen.
Mi difinis funkcio blink, mi voki funkcion blink per vojo
de tiu parametro, sed teknike,
tie ne estis kialo por ĝi kaj komuna paradigmo
en JavaScript estas reale fari uzon de lambda funkcioj
kiel vi eble memoras el 51 aŭ anonimajn funkcioj
kie, se vi ne bezonas nomon por funkcio,
se vi nur nomante ĝin certe en unu lokon,
kial ĝeni cluttering via kodo: cluttering la programistoj menso
kaj via nomo spaco vere kun simboloj
ke vi ne vere bezonas zorgi pri.
Kaj do, en tiu versio ĉi tie,
rimarki, ke mi vokas window.SetInterval rekte
ĉe la plejsupro de Miaj skripto etikedon do mi pasas
en anonima funkcio kiu prenas neniun argumenton
kaj tio estas perfekte fajna kaj tiam la korpo
de tiu funkcio aperas estas identa al kio ĝi estis antaŭe
kaj la sola sintaksa diferenco nun estas
malsupren tie apud la 500.
Mi fermis la korpon de la funkcio
kaj tiam mi diras ekzekuti ke antaŭaj kodo,
ĉiun 500 milisekundoj.
Do, tre marĝena ŝanĝo
sed pasxo al kio verŝajne pli eleganta
efektivigo de ĉi.
Do, ni cxi tiun prenos step plui se mi nun iri
en blink du, vi vidas komunan bibliotekon,
la efiko de kiuj tuj
por esti tute nekonsekvenca estetike sed se ni iru
en versio du ĉi tie, avizo ke sur la supro de mia kapo;
Mi inkludis la lasta versio de jQuery.
Kaj poste, sube tie ĉi, Mi ĵus purigis
ĝis la kodo iom, ĝi estas ne tuj estos amuza mondo
daŭrigi uzante denaska DOM funkcioj
kaj varo de krudaj JavaScript.
Fakte, jQuery kiel vi povas scii fariĝis tiom populara
ke plej multaj homoj simple konflikto jQuery kun JavaScript
sed vere nur vespermangxon utila biblioteko skribita
per ulo nomata Johano Resig kaj ekde aliaj
kiuj havas nur faras multajn tedajn aferojn
en JavaScript facile kaj pli konciza.
Do, en tiu kazo tie kio okazas?
Do, mi havas ĉi apero de dolaro-signo, pli sur tiu
en nur unu momento, poste tio estas la CSS selector.
Do, ĝi estas tre simila en spirito al tio, kion mi faris antaŭe,
sed tiu tempo, mi estas laŭvorte uzanta la hash etikedon
por indiki unikan ensalutilo nomata saluton
kaj tiam ŝajne . Css estas metodo konstruita
en al ĉiu objekto estas ke mi ĵus kreis
kaj mi kontrolas la valoro de la videblecon najlas.
Kaj se la valoro de tiu klavo egalas, egalaj, egalaj, kaŝita,
tiam Mi iros al mastrumi ĝin kaj Mi iras al mastrumi ĝin ĉi tempon
uzante la saman metodon kiu ŝajne estas superŝarĝitaj
en la senco ke ĝi havas du malsamaj subskribojn,
per unu argumento kaj unu kun du argumentoj,
la dua el kiuj Estas la proklamanto,
la eksa el kiuj estas a getter tiel diri.
Kaj se scivolema kaj se vi volas neniam vere rigardis ĉi tion,
se ni iros al jquery.css espereble la supro de sukceso estas ĝuste ĉi tiu
kaj vi povas vidi pli formala klarigo
ke ni uzu tiun, . Css kun propraĵo nomo
kaj tiam la proklamanto estas skalara CSS
kun propraĵo nomo kaj valoro.
Do, marĝene purigisto, sed rimarki la varon de ŝablono ĉi tie
kun ĉiu ripeto de tiu kodo,
ni ia farante ĝin pli kaj pli kaj pli strecxe
kaj tie diri bonan dezajnoj
ĉar ni uzas iun alie la kodo kiu estas forigita
kelkaj el la komplekseco.
Do, nun ni faru tio ecx pli simpla.
Kaj fakte, se mi forpelus cxiujn citilojn vi vidos ĝuste ĉiuj
komenti vi vidos kiel Simpla ĉi alvenis.
La unu diferenco tie kompreneble estas
ke mi estas uzanta baskuligi metodo kiu ankaŭ venas konstruita
en al jQuery kaj tio estas ĝuste
ĉar iun alian skribis la kodo
ke efektive toggles la videblecon opcio
de iu DOM elemento ke vi sendu ĝin.
Do, pli bona kaj pli bona.
Kaj do, temas pri modelo,
eĉ se tiu estas vespermangxon Simpla ekzemplo kaj varo
de stultaj pura efekto kiun Estas palpebrumante teksteron,
gxi estas tiu speco de penso procezo kiu vi devus pensi -
esti pensanta pri ne nepre la tre unua
pasiva skribo ion por la venonta projekto
sed certe kiel vi persisti kun via konsilisto aŭ kun mi
kaj via teamo kunvenoj aŭ vi nur revizii viajn kompanoj kodo
pri restrikton aĵojn, ĉu ne?
Post ĉio, ili estas malpli -
oni malpli linioj de kodo vi finfine havas
teorie la malplinombra cimojn vin versxajne estos invitante
ĉar tie estas simple malpli kodon por salato kun.
Ĉiuj pravas.
Do, paro de takeaways.
Lambda funkciojn, anonima funkciojn,
multaj el kiuj vi vidis antaŭe
kaj tiam ankaŭ nur streĉi aferojn kun biblioteko
kiel jQuery en ĉi aparta kazo.
Ĉiuj pravas.
Demandojn?
Ni faru unu alia kliento flanko aspekton tie,
en formo nulo ni havas ĉi net efekton.
Super simpla formo kaj ŝajne se mi provas klaki enskribi ĉi tie,
komence rakontas al mi ke vi estas registrita, nu, ne vere.
Nu, kial estas tio?
Nu, jen formon-0.html tre malmulte kodo,
neniu JavaScript ajn kaj ĝi estas tute falsa speco
de formo ĉar la ago valoro estas registered.html
kion signifas negrave kio Mi tajpas en tiu formo,
Kie ĝi estas tuj esti sendata en la servilo?
Jes. Do, al registered.html kio estas klare HTML dosieron
kio estas do statika dosiero kiu havas ne per
preni uzanto enigo alprenanta ne estas JavaScript kodo
enigita en ĝi, ke estas rigardis en la URL-
tia ĉi estas tute NOOP kaj ke nenio okazos
kun prezentis datumojn, sed vi povas vidi la strukturon
de sufiĉe simplaj HTML5 formo
kiuj havas malmultajn pasvorton, kelkaj enigo tipoj.
Do, ni efektive nun aldoni iun eraron kontrolado
kaj vidi kiel ni povus plibonigi tion.
Do, jen speco de malriĉa ies vojon de efektivigo de ĉi tiu
kaj ĝi estas speco de aĉa chunk de kodo.
Do, unue permesu ruluma malsupren al la malsupro
por vidi kio estas la sama kaj kio estas malsama.
La sola afero malsama nun inter oriento
kaj la antaŭa versio estas kiun mi donis al la formo kaj IRU
de "registro" povis havi estis io mi deziras
sed lia signifis esti unike identigebla eĉ tio ne
strikte necesa ĉar se oni paĝo havas nur unu formo certe mi
povis trovi ĝin per unu el jQuery la selector metodojn.
Sed tiu vojo nur faras ĝin pli determina.
Do, se mi foriras nun al mia skribo etikedo, rimarki la jenan:
window.onload egaluloj anonima funkcio.
Do, kio estas ĉi faras?
Do, eble vi memoras, ke en flanko de la kliento de programado -
Javascript prefere HTML paĝoj esti diversaj eventoj asociita
kun elementoj, musklako kaj sendado kaj enfokusigi
kaj desdibujando kaj aliaj tiaj okazaĵoj kiuj povus okazi
kiel uzanto tipe interagas kun la paĝo,
window.onload faras kion ĝi diras.
Sur la fenestroj tuta ŝarĝo
tial iam ĉiuj bildoj estis elŝutita iam ĉiuj dosieroj
estis malŝarĝitaj kaj unufoje La paĝo estas ŝarĝita,
fari la sekvan kodon, kaj rimarki, ke mi ŝanĝos al la malsupro
de tiu metodo, rimarki ke ne estas parentezo
post la krispa krampoj tio estas
ke mi ne ekzekuti tiu funkcio ĝis tie nun,
la retumilo tuj ekzekuti gxin por mi, kiam ĝi determinis
ke la paĝo estas ŝarĝitaj.
Do, ni vidu kion ni faris,
document.getElementById enskriboj
tiel ke nur donas al mi referenco al la nodo
en la arbo, kiu estas el havas IRU de registriĝo.
Kaj nun, mi tuj enskribi alian eventon traktilo
per farado form.onsubmit gets ĉi anonima funkcio
kion signifas la jena kodo devus ekzekuti kiam ajn
tiu formo estas donita.
Nun, la plejparto de ĉi tiu estas nur speco de enuigaj logiko.
Do, se la valoro de la retpoŝto kampo en la formo estas
"Nenio" tiam vi devas provizi vian retadreson
vi krias al la uzanto kun alarmi kaj tiam revenu falsaj.
Kaj tiam mi havas faskon da aliaj ĉekoj,
la bridoj de la pasvorto,
la ĉekoj, se la pasvortoj estas la sama,
la ĉekoj, se la interkonsento ĉeko enŝaltita aŭ ne
kaj mi ĵus krias al la uzanton, se iu
de tiuj testoj vere malsukcesos.
Kaj do, jen estas ekzemplo ecx kvankam gxi estas iom artefaritaj
tie la fakto, ke mi uzas egalas, egalaj, egalaj,
signifas ke la uzanto ne povas provi trompi min
tajpante en kio valoro.
Aŭ prefere mi vere kontrolanta la ĉeesto
de la malplena linio, la uzanto ne tajpis ion ankoraŭ.
Se la uzanto tajpas en laŭvorte nulo,
"Nulo" potenciale povus esti konfuzita kun la malplena linio.
Kaj mi diras ke estas speco de sensignifa tien
ĉar evidente eĉ nulo ne estas retpoŝta adreso.
Sed se tiu estis ja pli ĝenerala kampo kiel kampo de teksto
aŭ nomo aŭ priskribon aŭ io, kion vi volas taksi por
kaj tio ne nepre sintakse havas
esti retadreson, la uzanto povis tajpi iun kiel nulo
kaj ree angulo kazo sed tio estas kial tipe kontrolanta tipoj estas
utila afero.
Vi vere kontrolanta por la uzanto esti tajpita nenio
en tiu kampo.
Do, kio okazas se neniu de tiuj provoj malsukcesas, nu,
reveninte vera interne de evento traktilo
kiel onsubmit simple signifas liberigite la originala konduto efektive
propagi kaj sekve la formularo get donita.
Kaj tio estas kial kiam mi fine clicked submit antaux mi atingis
tra al register.html kaj se mi faras tion nun, avizo,
Mi get kriis al se mi ne provizi retadreson
kaj mi povas tajpi en malan@harvard.edu,
karmezina [fonetika], rugxa, kontrolanta la skatolon,
kaj nun registri kaj rakontas al mi, denove,
vi estas registrita aŭ Ne vere.
Ĉiuj pravas.
Do, ni purigu ĉi supre estas nur iomete kaj tiam transiro
al la novaj pli novaj servilo flanko vazaro.
Do, se mi iros en formo-2.html, rimarki kelkajn aferojn.
Do, oni, mi alportis jQuery reen en la miksaĵo
do ne denove estas ĉi dolaro signo
kaj nun mi uzas iuj jQuery metodojn.
Do, unue, kio estas tio pri la dolaro signo tio
tiom speciala tien?
Kio estas la dolaro signo laĉitajn tra plej ajna jQuery kodo?
Jes.
[Inaudibles Remark]
OK. Do, la dolaro signo funkcio iras tra la DOM rigardis
por ion kun tio aparta CSS selector.
Do, vera sed preskaŭ tro precizaj.
Tio estas kio okazas kiam vi pasos en ĉeno
kiel en ĉi tiu kazo, sed vi ne faru ĉiam devas pasi en ĉeno.
Fakte, trafa, la tre unua linio jen cxi tiu ne estas
CSS selector, mi pasante en Lambda funkcio.
Do, pli ĝenerale - do, bonan respondon sed tro preciza.
Pli ĝenerale, kio estas dolaro signo reprezentas?
>> Nur jQuery.
>> Jes. Do, simple jQuery aŭ estas simple funkcio
ke iu ulo jarojn verkis kaj aliaj homoj havas
ekde enhanced kiu laŭvorte implicite estas nomata -
oops, nomiĝas jQuery.
Ĝi simple - rezultas el kontraste multe
de lingvoj dolaro signo estas perfekte valida simbolo uzi
en variablo nomo dum
en PHP dolaro signo evidente havas specialan signifon
sed en JavaScript kiel en iuj lingvoj, dolaro signo
kaj substreki kaj aliaj tiaj supersignoj tute legit
uzi en via propra simbolo nomoj por variabloj.
Do, iu ĵus decidis ke, vi scias kion?
Ĝi tuj estos bela teda
por fari la tutan mondon tajpi jQuery tuta tempo,
lasu min speco de plantos paliso en la tero, kaj diros:
"Tiu ĉi biblioteko volo uzi dolaro signo. "
Kaj fakte, ĉi ne levos la riskon
ke iu alia arogante tuj uzi la dolaro signo
cxar lia aŭ ŝia biblioteko sed ekzistas manieroj ia asekuri
ke kiam vi uzas la dolaro subskribi ĝin mapas al jQuery
ĉar vi povas testi se ĝi estas jam atribuitaj
al io esence.
Ĉiuj pravas.
Do, jen ĉio, ke estas, ne estas magia.
Estas nur sexy rigardis peco de sintakso ke estas bela
kaj rapida kaj facila por tajpi.
Do, kio okazas kiam vi tajpi dolaro signo malferma paren
kaj tiam anonima funkcio.
Nu, rezultas, ke tio estas reale stenografio notacio
por dokumenton dot preta malferma paren.
Do, kiel Cynthia rimarkis pli frue ni jam trovis unu
angulo kazo.
Se vi ĵus okazis en la lambda funkcion,
la efiko de la dolaro signo estas iom malsama.
Fakte, kio vere okazas estas ke ĝi estas ekvivalenta al tiu,
pasante en referenco al la tutmonda dokumenton objekto
ke estas tutmondaj nur kiel la fenestro objekto estas
kiu donas al vi iuj speciala funcionalidad
kiu tuŝas la tuta paĝo aŭ retumilo kaj rezultas
ke dokumento kiam Vi konfuzas la aferojn kun jQuery,
jQuery esence rimarkas, oh, tio estas aludo
al tiu speciala dokumento celon,
lasu min nun registri eventa traktilo nomata preta
kiu ne estas denaska Javaskribon aŭ DOM rilataj.
Pretaj estas jQuery kion diras
kiam la paĝo estas ŝarĝita ĉiuj la HTML elementoj
sed ne nepre ŝarĝita, ĉiuj CSS kaj bildoj
kaj JavaScript dosierojn kaj ekbrili dosierojn kaj la gustojn.
Do, ĝi estas paŝo antaŭe sur ŝarĝon tiam iru antaŭen
kaj ekzekuti la sekvan.
Kaj la inversita uzi je preta rimedoj estas ke vi povas, vi scias,
ke ĉiuj de la elementoj en via DOM,
ĉiuj unike identigi aĵoj kun IDs, ekzistas eĉ
se la paĝo, ĝia enhavo ankoraŭ ŝarĝas kaj ŝarĝo
kaj vi havas iujn rompita ikonoj por momento
aŭ blankan paĝon en la fono.
Jes.
>> Kio okazus se [inaudibles]?
>> Perfekta ekzemplo, perfekta demando.
Do, ni vidu, se ni povas simuli tiun rajton nun.
Do, lasu min antaŭeniri kaj forviŝi ĉi du linioj tie supre kaj poste
sen tedi ripari la deŝovon, permesu al mi iri antaŭen
kaj forviŝi ĉi malsupren tie - oops, ĉi tiu malsupreniris tien.
Kaj nun, permesu al mi iri al la paĝon, iru al formo-2.html kaj tipon
Registru, nenio ŝajnis okazi, ni diru, kial estis ke,
ni iru antaŭen kaj malfermi supren Chrome la inspektisto,
malfermi la Konzolon nur por vidi se io okazas ĉi tie, nun,
enskribi, ankoraŭ nenion.
Do, la kodo estas sintakse delikata
tial Mi ne vidante neniun ruĝa erarmesaĝoj,
sed kio klare ne okazas?
Neniu el mia kodo estas gxusta, ĝi ne funkcias tiel neniu
de miaj kodoj ŝajnas esti ekzekuti, do kial estas tio?
Nu, JavaScript kaj foliumiloj pli ĝenerale ekzekuti la
enhavon de web paĝo, supro sube, maldekstre dekstren.
Kaj la problemo estas ke ĉar la supron
de tiu paĝo estas HTML do estras tiam skripto tiam alian skripton,
tio tuj get ekzekutita antaux kio estas eĉ pretas,
aŭ eĉ ekzistas en la arbo prezento de la paĝo.
La formo mem, eĉ ne la korpo ekzistas ĉe tiu punkto.
Do, jQuery estas sufiĉe lertaj kun ĝia eraro kontrolado
ke se ne estas elemento kun la sola ID de registriĝo,
ĝi ne estas tuj garantiaĵo sur vin
kaj ĝuste funkciigi iun konzolo eraro kaj rompi la tutan paĝon,
ĝi tuj silente ignoras vi, sed la kialo, ke neniu
de tiu kodo iam ekzekutas estas
ĉar, kiam vi havos registris ĉi submit traktilo,
tie estis neniu elemento por ligi ĝin al.
Do, ĝi estas speco de ne op tie.
Do, oni petas tro anstataŭe, atendi ĝis la aĝo ŝarĝis
se ni faradis la window.onload afero, kiu estas speco
el la malnova lernejo maniero fari ĝin aŭ la sexier jQuery vojo
kiel tiu, ni povas diru al ĝi atendos ĝis kiam ĉiuj
de tiuj HTML-etikedoj havas estis analizebla tiel ke eĉ
se la bildoj ne ŝarĝita, ĉe Almenaŭ tiu nodo estas en la arbo,
tiam jQuery povas certigi ke ĉiu estas tie.
Jes.
[Inaudibles Remark]
Jes, nu, jes absolute.
Do, la alia solvo al tiu, se vi ne uzas ĉi
aŭ ne memoras ke tio ekzistis,
vi povus absolute movas ĉion ĉi al la malsupro
de la TTT-paĝon, interne de la korpo ankoraŭ sed sub la formo
kaj tio farus same solvi ĉi tiun problemon.
Estas nur tipe konsiderata malbona praktiko.
Ĝi estas iom senorda kaj fuŝa speciale
se vi observos jamming ĉio al la malsupro de la paĝo,
speciale kiam mi konservas aferojn simplajn metante ĉiun
de miaj kodo interne de la HTML-paĝo
kiam vi kompreneble povas certe enir la kutimo
de faktoranta ĝin al aparta dosiero
je kiu punkto estas nur bela
centralizi la dosieroj en la kapo.
Krom estas prezon vi pagos
metante JavaScript alia aktiva kiel CSS dosierojn
en la kapo de la paĝo, kio estas risko ke vi kuras?
>> Pli malrapida paĝo ŝarĝo.
>> Pli malrapida paĝo loading, kial?
>> Ĉar ni provas ŝargi ĉiuj bibliotekoj
antaux [inaudibles].
>> Ekzakte pro retumiloj legi la kodon supro al malsupro,
maldekstre dekstren, se Google analytics estas malrapida
aŭ la jQuery CDN estas malrapida aŭ la Facebook API estas malrapida
kaj tiu dosiero simple pendigas potenciale depende
pri kiel vi ŝarĝas de tiu dosiero, la tuta paĝo povis aperi pendigu.
Kaj se vi vidas tiun multe sincere
sur retejoj ili havas multe de malalta kvalito reklamoj
sur ili, ni estas nur unu malrapidan aŭ malkonstruita retejo povus pendi paĝo
por iu nedifinita nombro da sekundoj
ĝis fine la retumilo espereble fojojn sur tiu
kaj tiam montras al vi, la resto de la paĝo.
Do, se vi iam uzata kiel Facebook, kiel butono,
en via retpaĝo, lasu min vidi se mi povas trovi tiun
sen devi por ensaluti en ĉi tie.
Do, se vi iros al la Facebook kiel butono
kaj alklaku get kodo, malbenita ĝi,
lasas vidi se ni povas trovi la ekzemplon,
certe iu estis eldonita ĉi.
[Paŭzi]
Mi transdonos en kelkaj sekundoj, se ni ne vidas tion.
Facebook asynch - OK.
Do, ĉi tiu estas la kodo kaj krom se oni jam ŝanĝis lastatempe
ke Facebook reale rekomendas ke vi uzos
ŝarĝi sian bibliotekon kaj efektive proponas
ke vi metis tion en La korpo de via paĝo.
Do, Facebook konsilas vin krei ian stultan DIV
ke nur havas unika ID kiel tiu, tiam havas skripton etikedon
kaj ĉio ĉi komplikeco esence faras la sekvan
kaj oni ne uzu ajnan jQuery ĉar ili ne volas
supozi iun alian dependaĵojn,
lasu min movi ĉi super nur iom.
Do, rimarkas ke ili havas anonima funkcio ĉi tie,
pli pri tio en nur unu momento,
Ili tiam uzi document.createElement,
ili estas krei DOM elemento, ĉi tio estas kiel malloc tiel diri
kie la etikedo estas de tipo skribsistemo, ĝi estas do preciziganta
ke la async atributo de tiu tag tuj
esti vera tiam vi iru antaŭen kaj diveni, kion la URL
de Facebook JavaScript devus esti
kaj ĉi tiu estas nur la imago vojo
de kontrolado devus gxi estu HGP aŭ HDPS.
Kaj tiam fine, vi rimarki kion Facebook faras,
Ili ricevas la DOM nodo ke havas ID de Facebook radiko
kio estas kion ili rakontis vi por meti en la pagxo
kaj poste ili append la infanon tial la efiko de ĉiu el ĉi estas
al ia dinamike injekti novan skripton etikedon en via paĝo
kiel infano de la DIV ke vi enmetita tie por ke la ceteraj
de la paĝo ŝarĝojn feliĉe
kaj tiam ĉi kodo reale gets ŝarĝita asíncronamente.
Do, esence post la Fakte mi prokrastis mencio
de la anonima funkcio,
kio estas tio funky sintakso raportante al ĉi tien
Kiam mi havas ne nur funkcio malfermi paren, proksime paren
kaj tiam krispa krampoj, kial la malferma paren tien
kaj tiam la malferma proksima, proksime paren tie, kio estas tio faras?
>> [Inaudibles] difinanta kaj poste ekzekuti?
>> Precize, ĝi estas difinanta funkcio kiu estas anonima
sed nure difinanta funkcio,
kompreneble ne ekzekuti funkcio ĝis vi nomas ĝin
laŭnome, sed kompreneble tiu Estas anonima funkcio
tial vi ne povas nomi gxin laŭ nomo sed vi povas
en JavaScript ekzekuti anonima funkcio nur
per encapsulando la tuta afero en parentezo kiel ni jam faris
kun tiu paren kaj ĉi paren tie kaj tiam riparado
al la fino de la funkcio malfermita paren, proksime paren,
se vi ne volas fordoni ajn argumentojn.
Sed tio ŝajnas ia malsaĝa
kiel tio ĉi aldonan sintaksa komplikeco
ke plej multaj homoj ne ŝajnis rekoni, kio estas la valoro
de fluigi tiuj tri linioj de kodo
en anoniman funkcion en tiu vojo.
Jes.
>> Por eviti overwriting a valora en la [inaudibles].
>> Precize, por eviti overwriting variablo
en la ekzistantan paĝon, ĉu ne?
Facebook estas iom arogante decidis,
ili tuj uzas la variablo E, ĝi estas sufiĉe probabla
ke vi aŭ iu ajn uzi la Facebook kiel butono
aŭ kio ajn alia socia kontaktŝtopilo
en havas variablo ie nomis E. Do,
per encapsulando ĉiuj de iliaj kodo interne
de tiu anonima funkcio, ili esence havas sian propran medion
kiu ne riskas clobbering neniu ekzistanta variabloj.
Do, ĉi tiu estas ankaŭ efektive tre komuna paradigmo,
speciale kiam skribas biblioteko kodo
aŭ kiam vi mem ne faras ĉu Clutter via nomo spaco
kun aliaj variabloj vin ĉu la valoro por vivi
kaj morti iam vi eliri ke bloko de kodo,
tio estas bela tekniko en JavaScript.
Ĉiuj pravas.
Do, tiam Reen al ĉi tiu ekzemplo ĉi tie, ĉiuj ni jam faris en la fino
kun tiu ekzemplo estas nur purigis la kodon.
Do, ĝi estas ankoraŭ havas ĉiu fasko da ŝaltiloj, tuta aro da
de kondiĉoj ĉi tie, sed rimarki iom de sintakso,
ĉi aliroj la DOM nodo kun la sola ID registriĝo,
la spacon per aspektas nun por posteulo de tiu nodo,
trovu ĝin, se ĝi estas de tipo enigo kaj tiam eĉ
se vi ne vidis ĉi antaŭe, eble vi scias
ke tio simple signifas trovi ĝin per la enigo etikedo,
la enigo elementoj kiuj havas atributo de nomo kun valoro
de retpoŝto, kaj tiam lasu mi skuos mian manon en iun
de la resto ne estas cxiuj, kiuj stimula
sed vere nur jQuery sintakso cxar la sama operaciojn.
Ĉiuj pravas.
Sed kio estas ne tiel gravaj tie estas la retumilo flanko stuff
sed prefere la fakto ke ni havis purigisto kaj purigisto manieroj
efektive fari ke kodo laboro.
Ĉiuj pravas.
Demandojn?
[Inaudibles Remark]
OK. Nun la amuza parto.
Do, node.js Kial?
Kiun interesas?
Kion vi scias pri ĝi nun?
Node.js, kial?
Henry [alprenita ortografion].
[Inaudibles Remark]
Baterio reset?
Kio - tio estas perfekta klifo vestarko
por la lasta duono de hodiaŭ.
Kial ni ne iru kaj prenu 5 minutoj ripozon ĉi tie,
tie estas duono dolĉaĵoj maŝino tie se vi volas
kiel iuj dolĉaĵoj sen metante kvarono in