>> Lahat ng karapatan.
Kaya, JavaScript.
Halos lahat ng tao sa kuwartong ito marahil ay may ilang mga degree na
ng kaginhawahan na may ito kung ito ay paraan pabalik kapag nasa SC50
o naging personal mga proyekto ng web o kahit na
kung ginawa mo ang isang bit ng ito sa ito nakaraang base proyekto PHP,
ngunit para sa pinaka- bahagi, marami sa inyo,
kahit na mayroon kang ilang mga kaginhawahan
may JavaScript siguro Hindi pa nai-kinuha
para sa ipinagkaloob paano ang gawa wika at kung ano ang napupunta
sa ilalim ng hood at kung ano ang pagpunta namin upang subukan
gawin ngayon ay mag-alis ng balat pabalik ang ilan sa mga teknikal na mga layer
ng kung ano ang JavaScript ay, kung paano ito ay naiiba mula sa isang wika
tulad ng PHP, kung paano maaaring maging ginamit hindi lamang client side
kundi pati na rin sa server side at pagkatapos ay tumutok napaka-partikular na
sa ito framework, mapapansin walang JS na kung saan ay mahalagang isang oras run,
isang programa kung saan ka Maaari execute ng JavaScript code,
server side at ito ay nagiging increasingly popular na uri
ng sa parehong tangkad na ito araw ng marahil Ruby at PHP
at Python at makikita mo
na ito ay may ilang mga kaakit-akit malakas na tampok sa pamamagitan ng paraan ng ilang
ng built-in na wika constructs.
Ngunit una, ang ilan sa mga madaling bagay lamang ipaalala sa iyo
ng kung paano gumagana ang wikang ito at kung mayroon kang problema nakakakita ng anumang
ng ito, lamang sigaw out at kami ay ayusin.
Kaya, ang isa tulad ng sa PHP mayroong walang paniwala ng isang pangunahing pag-andar,
simulan mo lang pagsusulat ng code
at maaari mo para dito bigyang-kahulugan ito itaas hanggang sa ibaba.
Sa konteksto ng isang browser
o sa isang bagay na server side ipapakita namin makita ang ilang mga halimbawa
sa ilang saglit.
Kundisyon, syntactically katumbas sa PHP pati na rin ang C,
C + + at ilang iba pang mga wika kaya lamang upang mabigyan ka ng ideya
ng kung paano namin maaaring buuin ito,
mayroong isang canonical lamang kondisyon.
Boolean expression, eksaktong parehong syntactically bilang na iyong nakita
sa mga parehong iba pang mga wika, ang parehong para sa oring
at para sa mga bagay na nagtatapos magkasama.
JavaScript ay may switch, halos tulad ng PHP at isa do
at hindi ka naka-limitado, tulad ng sa C upang mahalaga primitive
tulad ng mga char at ints maaari talaga gumawa ng iba pang mga uri ng mga halaga.
Mga Loop. Kaya, ito ay eksaktong pareho
at marahil isang dosenang mga wika, habang loop, gawin habang loop
at pagkatapos na ito kahanga-hangang gawa dito.
Kaya, ito ay isang uri ng Kilala bilang mabilis pag-isa isa
at ito ay isang napaka-matalino na paraan ng tulad ng sa paggawa ng PHP
para sa bawat Fu bilang bar maaari kang katulad,
sa isang JavaScript na bagay, kung saan bagay ay ang pangalan
ng variable dito, sabihin nating, var i sa bagay at sa bawat pag-ulit
ng loop, i ay pagpunta sa maging isa
ng mga susi mula sa bagay na iyon.
Kaya, kung mayroon kang isang bagay para sa isang mag-aaral, at ang mag-aaral ay may ID
at isang pangalan at isang bahay, iteratively ay i tumagal
ng ang halaga ng ID at pangalan at bahay at maaari kang ukol doon index
sa bagay na parang ito ay isang array gamit square bracket
pagtatanda upang makuha ang halaga sa mga pangunahing ID o pangalan
o bahay at iba pa.
At nang nasasalungat sa mga karaniwang pagkukunwari, JavaScript bagay,
mga pag-aari ay hindi kinakailangang garantisadong upang maging
sa parehong pagkakasunud-sunod, ito ay din true sa PHP kaya huwag ipagpalagay
na mga bagay na ito ay mananatiling sa parehong pagkakasunud-sunod
na inilagay mo ang mga key halaga ng mga pareho sa isang bagay.
Paano ang tungkol sa array?
Mayroong ilang mga paraan upang isulat ito syntactically
ngunit ito ay marahil ang pinaka- karaniwang ngayon lamang gamit ang parisukat
bracket pagtatanda.
Kaya, ito ay isang variable sa tumawag sa mga numero na naglalaman ng array
ng anim na integer doon, narito ang isang simpleng string
at pansinin kung ano ang absent mula sa mga halimbawa,
ano ang JavaScript sa malas kulang.
Oo. Kaya, walang paniwala ng pagta-type, ay tiyak na hindi
sa kontekstong ito dito, ngunit ito ay talagang isang string.
Kaya, ang JavaScript ay may mga uri ng at na noon ay sa katunayan isang array
na kung saan ay mismo ng uri at bawat isa sa mga elemento
sa na array ay ng uri numero ng JavaScript tawag sa kanila.
Kaya, ito ay isang maluwag na-type wika at kami makita
na JavaScript tulad ng PHP May isang pagkakakilanlan operator
at iba pang mga mekanismo para sa talaga pagsuri kung ano ang uri
ng ilang mga variable ay Parehong para sa error checking
at para sa iba pang mga application.
At narito ang isang sample na bagay na naglalaman lamang ng isang ID at isang pangalan.
At ngayon, mapapansin na hindi namin gamit ang kulot pagtatanda bracket,
ang indentation at ang puti espasyo ay isang uri ng walang ibig sabihin
at ito declares isang variable na ang pangalan ay Rob
at kaninong ID ay 1 at ang uri petsa ay dito ang aming numero
at string ayon sa pagkakabanggit.
At pagkatapos na ito ay isang bagay na bahagyang naiiba
kung sakaling nagawa mo na ang anumang bagay may Ajax mga araw na ito?
Ikaw ay malamang na ginamit isang bagay na tulad nito
ngunit kung ano ang nagkakahalaga ng noting dito?
Ano ang syntactically kailanman kaya ibang, ng ilang lamang
ng mga bagay sa pagitan ng halimbawang ito na kung saan ay tinatanggap na mas maliit
at ito ang mas malaking halimbawa.
Kaya, una sa karaniwang tao ni termino, kung ano ito?
Ano ang uri ng staff nais mong sabihin?
OK, ito ay isang array, ito ay isang array ng kung ano?
>> Mga bagay.
>> OK, ito ay isang hanay ng mga bagay.
At ngayon, tumuon sa isa lang - anumang isa sa mga bagay na ito,
ano ang iba't ibang sa pagitan ng mga ito at na ito?
>> Ang susi ay mga string.
>> Oo. Kaya, ang key ay mga string,
at ang mga key ay aktwal na mga string sa parehong mga sitwasyon
at ito ay isang uri ng isang walang kahulugan
sa aking opinyon makasaysayang disenyo desisyon tuwing ginagamit mo ang
JSON, JavaScript Bagay pagtatanda,
na kung saan ay mahalagang isang format transportasyon
para sa pagpapadala ng data karaniwang sa kabuuan ng network
sa pagitan ng client at server, kailangan mong matandaan
na ito ay hindi tunay wastong JSON at ito ay isa
ng mga FYIs maliban kung ikaw kailanman Bang ang iyong ulo laban sa mga pader
para sa ilang minuto para sa walang magandang kadahilanang ito, hindi wastong JSON
dahil ang mga key ay hindi talaga naka-quote.
Idiotically nangangailangan ng JSON na hindi lamang ang naka-quote ang mga key,
pero na doble sila ay naka-quote, single quote huwag magkasiya.
Kaya, nakababagod maliit na bagay at higit pa sa isang masaya katotohanan
para sa mga layunin sa araw na ito ngunit ito masyadong magiging wasto ang JavaScript
ito lamang ay hindi - ang mag-usap ay hindi totoo.
Ayos lang.
Kaya, makikita namin kung maraming higit pa sa mga iyon.
Ayos lang.
Kaya, na JavaScript syntactically marahil medyo
pamilyar, anuman sa iyo kung sino ang mayroon kailanman gagamitin ang JavaScript bago
hindi ito isang malaking tumalon mula sa PHP o karamihan sa anumang wika pamamaraan
na maaaring ginamit mo.
Kaya, ngayon ipapakita namin tumuon sa ang mga kawili-wiling aspeto
ng JavaScript lalo sa konteksto ng walang JS
ngunit hindi eksklusibo dahil hanggang ngayon ikaw ay marahil,
kung gumamit ka ng Javascript, ginagamit ito sa loob ng isang browser.
Kaya, walang JS ay isang kapaligiran pagkatapos ay sa ilang sandali ay pagpunta
upang payagan sa amin upang ma-access Code client JavaScript -
server side ngunit una sa lahat, hayaan tumagal ng isang hitsura
sa isang bagay na ang isang kaunti pa client side.
Kaya, nai-nawala in ako at ito ay naka-link sa website na kurso,
kung gusto mong i-play kasama, mayroong dalawang mga subdirectory
sa Zip na ngayong araw ng tinatawag na pinagmulan studs zip sa website
at ang mga ito ay lamang ng isang ilan sa mga halimbawa reminiscing
ng mga bagay na maaari mo nakita bago at ako uri ng built sa kanila
up mula sa pinakasimpleng sa bahagyang mas komplikado upang mang-ulol
ng ilan sa mga tampok ng JavaScript.
Kaya, sabihin sige at tumagal isang tumingin halimbawa sa ito.
Kaya, sadly ang magpikit tag na noon ay pumatay off ang ilang mga taon na nakalipas
bilang ang paraan na nakuha ko prettier at prettier
at ang magpikit tag ay literal bukas bracket magpikit malapit bracket
at ito uri ng mga walang mas mahaba sa amin.
Subalit, maaari pa rin namin ang bumuhay na muli ito ideya ng isang tag sa pamamagitan ng uri lamang
ng pag-iisip tungkol dito lohikal na, paano ko pumunta ka
tungkol sa paggawa ng isang bagay tulad ng ito magpikit intuitively?
Ipagpalagay na malaman ang kaunti bit ng JavaScript at CSS o
sa puntong ito, ito ay OK kung hindi mo gusto.
>> Magtakda ng isang oras out at itago ito pagkatapos matapos ang kukunin ko na i-tag ito
out at ipakita ito muli.
>> Oo, perpekto.
Ito ay uri ng mga programa 101,
paano nais mong makamit ang isang visual effect na tulad nito?
Well, kahit papaano mo kailangang magpakita ng isang bagay
at pagkatapos ay itago ang isang bagay, palabas isang bagay, itago ang isang bagay
at bilang Jonathan ay nagmumungkahi gamit ang ilang mga uri ng time out,
ang ilang mga uri ng iskedyul ang maaari mong gawin ito nang paulit-ulit nang hindi nangangailangan
gumamit ng isang loop o ang isang bagay tulad na.
Kaya, hayaan mo akong pumunta sa magpikit-0.html
at hayaan mo akong pag-urong ang font kaunti
nang sa gayon ay higit pa sa mga ito Tama ang sukat.
At tumagal ng isang hitsura ipaalam sa kung ano ang nangyayari sa dito.
Kaya, una sa lahat, mapapansin na ang katawan
ng pahinang ito ay sobrang simple, sa loob ng katawan
ng pahina ay isang div lamang.
Nagkataon ko ang ibinigay na isang ID ng pagbati
at maaari na maging kahit ano kaya hangga't ito ay natatanging
at pagkatapos Mayroon akong lamang ng ilang simpleng teksto, kumusta mundo.
Kaya, kung mag-scroll ko ngayon up, na ang ilang mga malambot na estilo.
Kaya, sinasabi ko, matalim pagbati, na bilang alam mo
sa CSS lang ibig sabihin nang katangi-tangi makilala ang elemento
may isang ideya ng greeting,
laki ng font ay pagpunta nagkataon maging ito, margin at Ihanay sa teksto.
Kaya, hindi kawili-wili Aesthetic detalye
sa halos igitna ang teksto.
Kaya, ang kagiliw-giliw na bahagi ay sa script tag up dito
na mangyayari kong ilagay sa loob ng ulo ng pahina.
Kaya, we'll - ang maaari mong gawin ito sa anumang bilang ng mga paraan
at makikita natin ang ilang iterations ng ito parehong programa
ngunit Magsimula tayo mula sa tuktok na ipaalam.
Kaya, ipinahayag ako ng isang function na tinatawag na magpikit
at sa malas ay gumagamit ng ito sa ganitong built-in na pamamaraan na tinatawag na DOM
getElementById na kung saan ay marahil isa sa mga mas malakas na mga pamamaraan
kumuha ka sa labas ng kahon may JavaScript naghahanap para sa
"Greeting" hindi kailangang maging double quote tulad nito ay
sa HTML ay alinman sa ay pinong kaya mahaba
dahil ikaw ay stylistically pare-pareho mga araw na ito maglakas-loob ko sabihin
maraming tao ang gumagamit ng Java, single quote sa JavaScript,
double quote sa HTML ngunit ito ay hindi talagang mahalaga
kaya hangga't ikaw ay pare-pareho.
Kaya, narito kung hindi ka pamilyar, Maaari mong aktwal na ma-access
may JavaScript CSS mga pag-aari sa mga elemento.
Kaya, mapapansin na na hindi ko na ipinahayag sa isang variable na tinatawag na div
at naka-imbak sa loob ng variable na iyon,
ang pagsangguni sa kahit anong na elemento ng DOM ay.
Kaya, kung ang iyong palagay pabalik sa CS50 o anumang klase kung saan naisip mo
tungkol sa punong kahoy na kaayusan at DOM, Dokumento Bagay Modelo,
ito ay isang reference lamang sa isang node sa isang puno,
na kumakatawan sa pahinang ito
at kung div.style.visibility ari-arian ay katumbas ng, katumbas, katumbas,
nakatagong, pagkatapos ko lang gusto ang isang toggle ito
bilang Jonathan ipinanukalang kung hindi man gusto ko
upang i-toggle ito sa paglipas ng sa mga nakatagong.
Ngayon, tulad ng sa gilid, bakit ang triple ay katumbas doon?
O kung ano ay na kumpara sa double katumbas?
>> Mahigpit na katumbas.
>> Paumanhin.
>> Mahigpit na katumbas.
Kaya, ito ay ang pagkakakilanlan operator
kung saan mo hindi Sinusuri lamang ang halaga ng variable
bilang ng patas, pantay na kahulugan kundi pati na rin ang uri ng mga ito.
Kaya, kahit na mayroon kaming hindi tinukoy ito kalayo ang anumang data
mga uri para sa anumang mga variable sa ito o anuman sa mga slide,
doon ay isang uri na nauugnay may nakatago na string
may na halaga, nakatago at na siyempre string.
Kaya, sa kasong ito, ito ay hindi talaga mahalaga
dahil walang paraan na kami ay pagpunta sa conflate isang string
ng "nakatagong" na may ilang ibang mga halaga
ngunit ito ay madalas na isang mahusay na ugali Gusto ko sabihin upang makakuha ng
sa paggamit ng katumbas, pantay-pantay,
katumbas ng pag-sign ay pangkalahatan isang magandang bagay.
Ito ay gumawa ng iyong code mas matatag na pareho sa PHP ngunit
at sa JavaScript dahil makikita mo tumakbo
sa paminsan-minsan kaso sulok kung saan maaaring maging zero ang halaga
na naka-check para sa at zero ay maaaring conflated may maling
o maaaring maging walang at pati na sa PHP,
Javascript masyadong maaaring magkaroon ng maramihang maling mga halaga kung saan sa pamamagitan ng zero
at hindi totoo at walang bisa at hindi natukoy Maaari malutas ang lahat nang kataon lamang
upang hindi totoo.
Ngunit kung ikaw talaga naka kinakapos mag-check para sa partikular na halaga
tulad ng zero, ang numero, o hindi totoo ang Boolean pagkatapos ay mayroon kang
upang magamit ang pagkakakilanlan operator.
Kaya, maaari itong mangyari upang makakuha ng sa gayon pa man kahit na dito,
ito ay isang uri ng walang ibig sabihin dahil alam naming kami ay pagsuri
para sa isang halaga string at ito ay hindi pagpunta sa maging ano pa man.
Kaya, narito ang magic pagkatapos, kung ako mag-scroll pababa sa linyang ito dito,
sa malas, na binuo papunta sa window ng bagay
at ito ay isang tampok ng isang browser na maaari mong ma-access ang
upang ito super global bagay na tinatawag na Window,
sa loob ng na ang ilang mga pag-andar,
kung piraso ng na ay nakatakda agwat
at ito ay tumatagal sa malas kung ano ang mga uri ng argumento?
Oo.
>> Ang function na tawag at isang oras.
>> Magandang. Kaya, isang function tumawag at isang oras
at kaya lalo na ng isangguni sa isang function,
tagaturo patungo sa isang function sa isang katuturan
at iyon ang pag-andar na pupuntahan
upang maisakatuparan ang bawat numero ng millisecond at sa kasong ito,
ito bawat 500 millisecond.
Kaya, ito ay isang paraan ng pampalaglag mabisa at walang katapusang loop
nang hindi gumagamit ng iteration ngunit sa halip na nagsasabi sa JavaScript
upang ang engine sa loob ng browser
upang gawin ito bawat 500 millisecond o Malapit
500 millisecond na kaya ito,
ito ay lumiliko out na sa ilalim ng hood,
mayroong kung ano ang tinatawag na isang kaganapan loop at kami ay bumalik sa ito
sa konteksto ng node JS Patuloy na lamang uri
ng pag-upo doon, umiikot, naghihintay para sa trabaho upang gawin
at sa lalong madaling ito mapagtanto,
500 millisecond na ang nakalipas magpikit ay makakuha ng tinatawag na muli
at muli at muli ay sa tabi ng anumang iba pang mga gawa
na kailangan upang makakuha ng tapos na.
Kaya, kung ano ang maaari naming mapabuti dito?
Well, hayaan mo akong magbukas up-blink-1.html
at nagpapakita ng mga magpikit-1.html
bilang aesthetically ganap na ganap magkamukha.
Kaya, ano ang maaari naming mapabuti dito?
Well, mapapansin na ito ay uri ng walang kaukulan
upang tukuyin ang isang function na tinatawag na Magpikit dahil kung gaano karaming
sa kung gaano karaming mga lugar ng ginawa ko tawagan ang function ng blink?
>> Isang beses lang.
>> Kaya, isa.
Kaya, ito ay hindi masama, sa katunayan marahil ito ay medyo
tuwid pasulong.
Tinukoy ko isang function blink, ako tumawag sa isang function blink sa pamamagitan ng paraan
ng ang parameter na ito, pero technically,
nagkaroon hindi dahilan para sa ito at isang karaniwang tularan
sa JavaScript ay upang aktwal na gamitin ng mga lambda function
bilang maaari mong isipin ang mula sa 51 o ang hindi kilalang function
kung saan kung hindi mo kailangang isang pangalan para sa isang function,
kung ka lamang ito sa pagtawag tiyak sa isang lugar,
bakit mag-abala cluttering iyong code, cluttering ang isip programmer
at ang iyong pangalan space talagang may mga simbolo
na hindi mo talaga kailangang mag-intindi.
At kaya, sa bersyong ito dito,
mapansin na ako sa pagtawag window.SetInterval direkta
sa pinakatuktok ng aking script tag pagkatapos ako pagpasa
sa isang hindi mailarawan ng function na walang argumento
at iyon ang perpektong fine at pagkatapos ay ang katawan
ng na-andar ng paglitaw nito ay magkapareho sa kung ano ito ay bago
at ang tanging sintaktik pagkakaiba ngayon ay
down na dito sa tabi ng 500.
Ako isinasara ang katawan ng pag-andar
at pagkatapos ay ako na nagsasabi isakatuparan na nakaraang code,
bawat 500 millisecond.
Kaya, napaka nasa gilid pagbabago
kundi isang hakbang patungo sa kung ano ang marahil ng isang mas eleganteng
pagpapatupad ng ito.
Kaya, sabihin tumagal ng isang ito basa pa kung pumunta ako ngayon
sa magpikit ng dalawa, makakakuha ka makita ang isang karaniwang library,
ang epekto ng na kung saan ay pagpunta
upang maging ganap na hindi makatwiran aesthetically ngunit kung pumunta kami
sa bersyon dalawang dito, abiso na sa tuktok ng aking ulo,
Isinama ko ang pinakabagong bersyon ng JQuery.
At pagkatapos, pababa dito, Lamang nalinis ko
up ang code Medyo, ito ay hindi pagpunta sa maging isang masaya mundo
ipagpatuloy ang paggamit katutubong pag-andar ng DOM
at uri ng raw JavaScript.
Sa katunayan, JQuery bilang maaari mong Alam ay naging kaya popular
na karamihan ng mga tao lamang hindi pagkakasundo jQuery sa JavaScript
ngunit isang hapunan talagang lamang kapaki-pakinabang library nakasulat
sa pamamagitan ng isang kapwa may pangalang Juan Resig at dahil iba
na lang ay gumagawa ng isang maraming nakakainip na bagay
sa JavaScript madali at higit pa maikli at malinaw.
Kaya, sa kasong ito dito kung ano ang nangyayari sa?
Kaya, mayroon akong ito hitsura ng tanda dolyar, higit pa sa na
sa sandali lamang, pagkatapos ay ito ay isang CSS selector.
Kaya, ito ay halos kapareho sa espiritu sa kung ano ang aking ginawa mo dati,
ngunit oras na ito, ako Literal na gamit ang hash tag
upang ipahiwatig ang isang natatanging identifier na tinatawag na pagbati
at pagkatapos ay sa malas . Css ay isang pamamaraan na binuo
in sa kahit anong bagay ay na ko lang ang nilikha
at Lalabas na ako ang halaga sa mga pangunahing kakayahang makita.
At kung ang halaga ng na key katumbas, katumbas, katumbas, nakatago,
pagkatapos Pupunta ako upang i-toggle ito at Pupunta ako upang i-toggle ito oras na ito
sa pamamagitan ng gamit ang parehong paraan na tila-overload
sa kamalayan na ito ay may dalawang magkaibang mga lagda,
ang isa ay may isang argument at isa sa dalawang argumento,
ang ikalawang kung saan ay ang setter,
ang dating ng kung saan ay isang geter kaya na magsalita.
At kung malaman at kung ikaw ay hindi kailanman talagang ay tumingin sa ito,
kung tayo pupunta jquery.css sana tuktok hit ay talagang ito
at maaari kang makakita ng isang mas pormal na pagpapaliwanag
na gamitin na lamang namin ito, . Css na may mga pangalan ng ari-arian
at pagkatapos ay ang setter ay tuldok CSS
gamit ang pangalan ng ari-arian at isang halaga.
Kaya, marginally mas malinis, ngunit mapansin ang uri ng mga pattern dito
sa bawat pag-ulit ng code na ito,
uri ng namin ginagawa ito tighter at tighter at tighter
at doon sabihin mas mahusay na disenyo
dahil ginagamit namin ay may isang taong code tao na eliminated
ang ilan sa mga pagiging kumplikado.
Kaya, ni gumawa ngayon hayaan ito kahit na mas simple.
At sa katunayan, kung alisin ko lahat ng quote makikita mo ang lahat lamang ang
magkomento makikita mo kung paano simpleng ito ay nakuha.
Ang isa pagkakaiba dito siyempre ay
na gumagamit ako ng isang toggle pamamaraan na kung saan din ay binuo
in sa jQuery at ito lamang
dahil may ibang tao sinulat code
na aktwal na mga toggle ang setting ng visibility
ng anumang elemento ng DOM na ipadala mo ito.
Kaya, mas mahusay at mas mahusay.
At oo, ito ay isang pattern,
kahit na ito ay isang hapunan simpleng halimbawa at uri
ng nakababagod net epekto na ay isang nagbi-blink na piraso ng teksto,
ito ay na uri ng pag-iisip proseso na dapat mong isipin -
maisip hindi kinakailangan ang pinakaunang
maluwag sa loob pagsulat ng isang bagay para sa mga darating na proyekto
ngunit tiyak na bilang umulit mo sa iyong tagapayo o sa akin
at ang iyong mga pulong koponan o mo suriin lamang ang iyong mga kasamahan sa koponan code
tungkol sa apreta up tamang bagay,?
Pagkatapos ng lahat, ang mga ito ay mas mababa -
isang mas kaunting mga linya ng code mo sa huli ay may
sa teorya ng mas kaunting mga bug sa iyo ay malamang na i-pag-imbita
dahil mayroong mga simpleng Mababa code upang guluhin na may.
Ayos lang.
Kaya, isang pares ng mga takeaways.
Lambda pag-andar, anonymous na mga pag-andar,
marami sa mga ito sa iyo nakita bago
at pagkatapos lamang din apreta bagay up sa isang library
tulad ng jQuery sa ito partikular na kaso.
Ayos lang.
Ang anumang mga katanungan?
Gawin ang isa sa iba pang mga Hayaang client side aspeto dito,
sa form na zero mayroon kami ito net epekto.
Super simpleng form at sa malas kung sinusubukan kong i-click magrehistro dito,
sa una ay nagsasabi ito sa akin ikaw ay nakarehistro, well, hindi talaga.
Well, kung bakit ay na?
Well, narito ang form-0.html napakaliit na code,
walang JavaScript kung ano pa man at ito ay ganap na isang pekeng-uri
ng form na ito dahil ang pagkilos halaga ay registered.html
na nangangahulugan na kahit na ano Nagta-type ako sa form na ito,
kung saan ay ito pagpunta sa Ipapadala sa server?
Oo. Kaya, upang registered.html na kung saan ay malinaw na ang isang file na HTML
na kung saan ay samakatuwid static file na walang paraan
ng pagkuha ng pag-input ng user sa pag-aakala walang JavaScript code
naka-embed sa loob nito na Naghahanap sa URL
kaya ito ay ganap na isang NOOP at wala na mangyayari
may isinumite ng data, ngunit maaari mong makita ang istraktura
ng isang walang kinikilingan simpleng form HTML5
na may ilang mga password, ang ilang mga uri ng pag-input.
Kaya, sabihin talaga ngayon magdagdag ng ilang mga error checking
at makita kung paano maaari naming mapabuti ito.
Kaya, narito ang uri ng isang mahinang paraan ng tao ng pagpapatupad na ito
at ito ay isang uri ng isang pangit tipak ng code.
Kaya, sabihin muna scroll pababa sa ilalim
upang makita kung ano ang parehong at kung ano ang iba't ibang mga.
Ang tanging bagay iba't ibang ngayon sa pagitan ng ito
at ang nakaraang bersyon ay na ibinigay ko na ang form at ID
ng "registration" ng dati mayroon inalisan ng anumang bagay na gusto ko
ngunit sinadya nito upang maging katangi-tangi makikilalang kahit na hindi
mahigpit na kinakailangan dahil kung ang isang pahina ay isang paraan lamang tiyak ako
mahanap ito gamit ang isa sa mga pamamaraan sa tagapili ng jQuery ni.
Ngunit ito lamang ang paraan ginagawang itong mas deterministic.
Kaya, kung pumunta up ako ngayon sa aking script tag, napansin sa sumusunod,
window.onload Kapantay isang hindi nakikilalang function.
Kaya, ano ang ginagawa ay?
Kaya, maaari mong isipin na sa client-side programming -
JavaScript sa halip mga HTML na pahina na nauugnay sa iba't-ibang mga kaganapan
may mga elemento, ang pag-klik at pagsusumite at nagbibigay-diin
at blurring at iba pang mga naturang mga kaganapan na maaaring mangyari
bilang isang gumagamit ay karaniwang nakikipag-ugnayan sa mga pahina,
window.onload ginagawa kung ano ang sinasabi nito.
Sa mga bintana buong-load ng
kaya sa sandaling ang lahat ng mga imahe ay naging na-download sa sandaling lahat ng mga file
Na-download at isang beses ang pahina ay nai-load,
gawin ang sumusunod na code, at mapansin kung lumipat ako sa ilalim
ng ang paraan na ito, mapapansin na ang walang mga panaklong
pagkatapos ng kulot suhay na kung saan ay upang sabihin
na hindi ako e-execute ang pagpapaganang ito up dito ngayon,
ang browser ay pagpunta sa execute ito para sa akin kapag ito ay natukoy
na ang pahina ay load.
Kaya, sabihin makita kung ano ang iyong nagawa namin,
document.getElementById rehistrasyon
nang sa gayon ay nagbibigay lamang sa akin ang pagsangguni sa mga node
sa tree na ng may isang ID ng pagpaparehistro.
At ngayon, pupuntahan ko magrehistro ng isa pang handler ng kaganapan
sa pamamagitan ng paggawa nakakakuha form.onsubmit anonymous function na ito
na nangangahulugan na ang sumusunod na code ay dapat isakatuparan kailanman
form na iyon ay isinumite.
Ngayon, karamihan sa mga ito ay lamang uri ng mayamot logic.
Kaya, kung ang halaga ng patlang ng email sa anyo ay
"Walang anuman" pagkatapos ay kailangan kang ibigay ang iyong email address,
mo sumigaw sa user na may isang alertuhan at pagkatapos ay bumalik hindi totoo.
At pagkatapos ay mayroon akong bungkos ng iba pang mga pagsusuri,
ang mga tseke para sa mga password,
ang mga tseke kung ang mga password ay pareho,
ang mga tseke kung ang kasunduan check box ay naka-check o hindi
at ako sumigaw lamang sa ang gumagamit kung anumang
ng mga pagsubok na talagang mabibigo.
At kaya, narito ang isang halimbawa kahit na bagaman ito ay isang maliit na contrived
dito ang katotohanan na gumagamit ako ng katumbas, katumbas, katumbas,
Ang ibig sabihin na ang gumagamit Hindi maaaring subukan upang linlangin akin
sa pamamagitan ng pag-type sa kung ano ang halaga.
O sa halip tunay na ako pagsusuri para sa presensiya
ng walang laman na string, ang user Hindi pa nai-type ng kahit ano.
Kung ang mga gumagamit na-type sa literal zero,
"Zero" potensyal na maaaring maging malito ang walang laman na string.
At sinasabi ko ito uri ng walang ibig sabihin dito
dahil malinaw naman kahit zero ay hindi isang email address.
Ngunit kung ito ay isang mas generic patlang tulad ng isang patlang ng teksto
o isang pangalan o isang paglalarawan o isang bagay na nais mong upang mapahalagahan para sa
at ito ay hindi kinakailangang syntactically mayroon
upang maging isang email address, ang user mai-type ang isang bagay tulad ng zero
at muli sulok kaso ngunit iyan ay bakit karaniwang pagsusuri ng mga uri ay
isang kapaki-pakinabang na bagay.
Tunay kang naka-check para sa pagkakaroon ng user ang wala na-type
sa patlang na iyon.
Kaya, ano ang mangyayari kung wala ng mga pagsubok na mabigo, mahusay,
bumabalik na totoo sa loob ng isang handler ng kaganapan
tulad ng onsubmit lamang ay nangangahulugan na ang let ang orihinal na pag-uugali talaga
paramihin at samakatuwid ang form ay makakapagsimula na isinumite.
At iyon ang dahilan kung bakit kapag ako sa wakas nag-click isumite bago Nakatanggap ako
sa pamamagitan ng sa register.html at kung gawin ko na ngayon, paunawa,
Ako makakapagsimula yelled sa kung gagawin ko hindi magbigay ng isang email address
at ang maaari kong i-type ang malan@harvard.edu,
pulang-pula [pagbigkas], pulang-pula, pagsusuri sa kahon,
at ngayon magparehistro at Sinasabi nito sa akin, muli,
ikaw ay nakarehistro o hindi talaga.
Ayos lang.
Kaya, ni linisin ito up lamang ipaalam Medyo at pagkatapos ay i-transition
sa bagong mas bagong server side bagay-bagay.
Kaya, kung pumunta ako sa form-2.html, makapansin ng ilang mga bagay.
Kaya, isa, ako nagdala jQuery pabalik sa mix
kaya doon muli ay ito dollar sign
at ngayon gumagamit ako ng ilang jQuery mga pamamaraan.
Kaya, una, ano ito tungkol sa ang pag-sign dolyar na
kaya espesyal dito?
Ano ang dollar sign laced sa buong karamihan ng anumang jQuery code?
Oo.
[Hindi marinig Puna]
OK. Kaya, ang dollar sign-andar napupunta sa pamamagitan ng DOM hinahanap
para sa isang bagay na may ito partikular na CSS selector.
Kaya, totoo ngunit halos masyadong tumpak.
Iyon ay kung ano ang mangyayari kapag pumasa ka sa isang string
bilang sa kasong ito, ngunit hindi mo gusto laging may upang pumasa sa isang string.
Sa katunayan, kaso sa point, ang napaka unang linya dito ay ito ay hindi isang
Tagapili ng CSS, ako pagpasa sa isang lambda function.
Kaya, higit pa sa pangkalahatan - sa gayon, magandang sagot ngunit masyadong tumpak.
Higit pang mga pangkalahatan, ano ang dollar sign kumakatawan?
>> Lang jQuery.
>> Oo. Kaya, lamang jQuery o ito ay isang function na lamang
na ang ilang mga tao taon na ang nakalipas Sinulat ni at iba pang mga tao ay may
dahil pinahusay na literal sa pamamagitan ng default ay tinatawag na -
oops, ay tinatawag na jQuery.
Ito lamang - ito ay lumiliko out hindi katulad ng maraming
ng mga wika dollar sign ay isang ganap na ganap wastong simbolo upang gamitin ang
sa pangalan ng isang variable na kung saan ang
sa PHP dollar sign malinaw naman ay may mga espesyal na kahulugan
ngunit sa JavaScript tulad ng sa ilang mga wika, dollar sign
at salungguhit at iba pang mga naturang mga espesyal na character lubos legit
upang gamitin sa iyong sariling mga simbolo mga pangalan para sa mga variable.
Kaya, ang isang tao lamang nagpasya na, alam mo kung ano?
Ito ay pagpunta sa maging medyo nakakainip
upang gumawa ng buong mundo type jQuery sa lahat ng oras,
hayaan mo akong uri ng halaman ng taya sa lupa at sabihin,
"Library na ito habilin gamitin ang dollar sign. "
At sa katunayan, ito ay taasan ang panganib
may iba presumptuously ay pagpunta sa gamitin ang dollar sign
para sa kanyang library ngunit mayroong mga paraan upang uri ng insure
na kapag ginamit mo ang dollar mag-sign ito maps sa jQuery
dahil maaari mong subukan kung ito ay naitalaga
sa ibang bagay mahalagang.
Ayos lang.
Kaya, na lahat na ay, walang magic.
Ito ay isang maalindog lamang hinahanap piraso ng syntax na maganda
at mabilis at madaling i-type.
Kaya, ano ang mangyayari kapag nag- type dollar sign bukas paren
at pagkatapos ng isang hindi nakikilalang function.
Well, lumiliko out na ito ay talaga shorthand notation
para tuldok dokumento Handa na bukas paren.
Kaya, napansin bilang Cynthia mas maaga namin na natagpuan isa
sulok kaso.
Kung pumasa ka lamang sa ang lambda function,
ang epekto ng dolyar lagdaan ay isang maliit na naiiba.
Sa katunayan, kung ano talaga ang nangyayari ay na ito ay katumbas ng ito,
pagpasa sa isang reference sa ang pandaigdigang dokumento bagay
na pandaigdigang tulad lamang window ng bagay ay
na nagbibigay sa iyo ng ilang mga espesyal na pag-andar
na nakakaapekto sa buong pahina o browser at ito ay lumiliko
out dokumento na kapag balutin mo ito sa jQuery,
jQuery mahalagang napagtanto, oh, ito ay isang sanggunian
sa na espesyal na dokumento sa bagay,
hayaan magparehistro ako ngayon ng isang handler ng kaganapan na tinatawag na handa na
na kung saan ay hindi katutubong JavaScript o DOM na may kaugnayan.
Handa ay isang jQuery bagay na nagsasabing
kapag ay load ang pahina lahat ng mga elemento ng HTML
ngunit hindi kinakailangang load, lahat ng CSS at mga larawan
at mga file ng JavaScript at flash file at ang mga gusto.
Kaya, ito ay isang hakbang bago sa pag-load pagkatapos ay sige
at isakatuparan ang sumusunod.
At ang mga bentahe ng paggamit sa handa paraan ay maaari mong, alam mo na,
na ang lahat ng mga elemento sa iyong DOM,
ang lahat ng mga katangi-tangi na kinilala bagay sa mga ID, umiiral ang mga ito kahit na
kung ang pahina, ang mga nilalaman nito ay naglo-load pa rin at ang paglo-load
at mayroon kang ilang mga putol na mga icon para sa isang sandali
o puting pahina sa background.
Oo.
>> Ano ang mangyayari kung [hindi marinig]?
>> Perpekto halimbawa, isang perpektong tanong.
Kaya, sabihin makita kung kaya namin gayahin ito ngayon.
Kaya, ipaalam sa akin sige at tanggalin ito dalawang linya up dito at pagkatapos ay
walang Iniistorbo upang ayusin ang indentation, ipaalam sa akin sige
at tanggalin ang mga ito down na dito - oops, ang isang ito pababa dito.
At ngayon, hayaan mo akong pumunta sa ibabaw ng mga pahina, pumunta sa form-2.html at uri
sa Magrehistro, walang tila mangyari, sabihin nating, bakit noon na,
sabihin sige at buksan up inspector ng Chrome,
buksan ang Console upang makita lamang kung anuman ang mangyayari dito, ngayon,
magparehistro, wala pa rin.
Kaya, ang code ay syntactically mainam
kaya hindi ako nakakakita ng anumang mensahe pulang error,
ngunit kung ano ang malinaw Hindi nangyayari?
Wala sa aking code ay tama, hindi na gumagana kaya wala
ng aking mga code ay tila na maging e-execute, kaya kung bakit ito?
Well, JavaScript at browser mas pangkalahatang paraan maisagawa ang
mga nilalaman ng isang pahina ng web, tuktok hanggang sa ibaba, kaliwa papuntang kanan.
At ang problema ay na dahil sa tuktok
ng pahinang ito ay HTML pagkatapos magtungo pagkatapos script pagkatapos ng isa pang script,
ito ay pagpunta upang maisakatuparan bago kung ano ang kahit na handa na,
o kahit na umiiral sa tree representasyon ng pahina.
Ang form ng sarili nito, hindi kahit na ang katawan ay umiiral sa puntong ito.
Kaya, jQuery ay sapat na smart gamit ito ng error checking
na kung walang elemento na may ang mga natatanging ID ng pagpaparehistro,
hindi ito pupuntahan magparakayda sa iyo
at mag-trigger lang ng ilang console error at masira ang buong pahina,
ito ay pagpunta sa tahimik na hindi pansinin iyo, ngunit ang dahilan na wala
ng ang code na ito kailanman executes ay
dahil kapag mayroon kang nakarehistro ito isumite ang handler,
walang elemento upang ilakip ito sa.
Kaya, ito ay isang uri ng isang walang op doon.
Kaya, sa pamamagitan ng pagtukoy sa halip, maghintay hanggang sa edad na load
kung ginawa namin ang window.onload bagay na uri
ng lumang paraan ng paaralan ng paggawa ito o ang sexier jQuery paraan
tulad nito, na aming makakaya sabihin dito maghintay hanggang ang lahat ng
ng mga tag na HTML mayroon na-parse kaya na kahit na
kung ang mga imahe ay hindi load, sa hindi bababa sa node na sa tree,
pagkatapos JQuery maaaring matiyak na lahat ng bagay ay doon.
Oo.
[Hindi marinig Puna]
Oo, mabuti, oo walang pasubali.
Kaya, ang iba pang mga solusyon sa ito, kung hindi mo ito gamitin
o hindi matandaan na ito umiral,
maaari mong ganap na ilipat lahat ng ito sa ibaba
ng web page, sa loob ng katawan pa rin ngunit sa ibaba ang form
at gagawin na ring malutas ang problemang ito.
Ito ay karaniwang lamang alang masamang kaugalian.
Ito ay isang maliit na gulung-gulo at nanggigitata espesyal
kung patuloy mong trapiko ang lahat ng bagay sa ibaba ng pahina,
lalo na kapag gumagamit ako pagpapanatiling bagay na simple sa pamamagitan ng paglalagay ng lahat
ng aking code sa loob ng pahinang HTML
kapag siyempre maaari kang ay tiyak na dumapo ang ugali
ng factoring ito sa isang hiwalay na file
kung saan punto ito lamang ay magaling
upang magsagitna ang mga file sa head.
Maliban doon ay isang presyo ng iyong bayad
sa pamamagitan ng paglalagay ng JavaScript isa pang asset tulad ng CSS file
sa head ng pahina, kung ano ang isang panganib na kang magpatakbo?
>> Mas mabagal ng pagkarga ng pahina.
>> Mas mabagal ng pagkarga ng pahina, bakit?
>> Dahil kami sinusubukan i-load ang lahat ng mga aklatan
bago [hindi marinig].
>> Mismong dahil browser basahin tuktok code sa ibaba,
kaliwa papuntang kanan kung ang Google analytics ay mabagal
o ang jQuery CDN ay mabagal o ang Facebook API ay mabagal
at ang file na iyon hangs lamang potensyal na depende
sa kung paano mo na-load ang file na iyon, ang Maaaring lumitaw ang buong pahina sa hang.
At kung makita mo ito marami nang tapat
sa mga website mayroon sila ng maraming ng mababang kalidad ng mga advertisement
sa mga ito, kami ay isa lamang mabagal o ma-hang downed website ng pahina
para sa ilang mga hindi tiyak bilang ng mga segundo
hanggang sa wakas ng browser sana beses sa labas na
at pagkatapos ay nagpapakita sa iyo ang natitirang bahagi ng pahina.
Kaya, kung kailanman ginamit mo tulad ng ang Facebook, tulad ng pindutan,
sa iyong web page, ipaalam sa akin makita kung ang maaari kong mahanap na ito
nang hindi na kinakailangang mag-log in dito.
Kaya, kung pumunta ka sa Pindutan tulad ng Facebook ni
at i-click ang isang get code, diyablo,
hinahayaan kang makita kung kaya namin hanapin ang halimbawa,
Siguradong isang tao ay nai-post na ito.
[I-pause]
Bibigyan kita ng hanggang sa ilang segundo kung hindi namin makita ito.
Facebook asynch - OK.
Kaya, ito ang code at maliban na lamang kung iyong binago nila ito kamakailan
na Facebook talaga Inirerekomenda ng na gamitin mo
upang i-load ang kanilang library at talagang ipanukala
na inilagay mo ito sa ang katawan ng iyong pahina.
Kaya, nagpapayo ka ng Facebook lumikha ng isang uri ng nakababagod div
na lamang ay may natatanging ID tulad ng ito, pagkatapos ay magkaroon ng isang script tag
at lahat ng ito kumplikado talaga gumagana ang sumusunod na
at hindi nila gamitin ang anumang JQuery dahil hindi nila nais
upang angkinin ang anumang iba pang dependency,
hayaan mo akong ilipat ito sa ibabaw ng kaunti lamang.
Kaya, mapapansin mayroon silang isang anonymous function na dito,
higit pa sa na sa isang sandali lamang,
pagkatapos ay gamitin ang mga ito document.createElement,
ang mga ito ay ang paglikha ng isang elemento ng DOM, ito ay tulad ng malloc kaya na magsalita
kung saan ang tag ay ng uri script, pagkatapos ito ay pagtukoy
na ang mga katangian async ng na tag ay pagpunta
upang maging totoo pagkatapos mo sige at malaman kung anong mga URL
ng Facebook ni JavaScript ay dapat na
at ito lamang ang magarbong paraan
ng checking dapat itong maging HGP o HDPS.
At pagkatapos ay sa wakas, ikaw mapansin kung ano ang ginagawa Facebook,
kumuha sila ng DOM node na May isang ID ng Facebook ugat
na kung saan ay kung ano ang kanilang sinabi mong ilagay sa pahina
at pagkatapos ay isama nila ang bata kaya ang epekto ng lahat ng ito ay
sa uri ng mga dynamic na mag-iniksyon isang bagong script tag na ito sa iyong pahina
bilang isang anak ng div na sa iyo ipinasok na doon upang ang natitira
ng mga naglo-load ang pahina sa kabutihang-palad
at pagkatapos ay ang code na ito talaga maipo-load asynchronously.
Kaya, mahalagang pagkatapos ng katotohanan at ako ipinagpaliban pagbanggit
ng pag-andar anonymous,
kung ano ang ito funky syntax nagre-refer sa dito
kapag mayroon akong hindi lamang function na buksan paren, malapit paren
at pagkatapos ay kulot tirante, bakit ang bukas paren dito
at pagkatapos ay ang bukas na malapit, malapit paren doon, ano ang na ginagawa?
>> [Hindi marinig] pagtukoy at pagkatapos ay i-e-execute?
>> Mismong, ito ay pagtukoy sa isang function na kung saan ay anonymous
ngunit pagtukoy lamang ng isang function,
siyempre ay hindi maisagawa isang function hanggang sa tawagan ka ito
sa pamamagitan ng pangalan, ngunit siyempre ito ay isang hindi nakikilalang function na
kaya hindi ka maaaring tumawag ito sa pamamagitan ng pangalan ngunit maaari kang
sa JavaScript isakatuparan isang function ng anonymous lamang
sa pamamagitan ng encapsulating ang buong bagay sa panaklong bilang kami
may ganitong paren at ito paren dito at pagkatapos ng isang pag-aayos
sa dulo ng pag-andar bukas paren, malapit paren,
kung hindi mo nais na pumasa ito sa anumang mga argumento.
Ngunit ito ay anyong uri ng nakababagod,
tulad ng kung bakit ito ng karagdagang sintaktik pagiging kumplikado
na hindi mukhang karamihan ng mga tao upang makilala, ano ang halaga
ng wrapping mga tatlong linya ng code
sa isang hindi nakikilalang function na sa ganitong paraan.
Oo.
>> Upang maiwasan ang patungan ang isang mahalaga sa [hindi marinig].
>> Mismong, upang maiwasan ang Sasapawan nito ang isang variable
sa umiiral na pahina, i-right?
Facebook ay medyo presumptuously nagpasya,
ang mga ito ay pagpunta sa gamitin ang variable E, ito ay medyo malamang
na ikaw o sinuman gamit ang ang Facebook tulad ng pindutan
o kahit anong iba pang mga plug panlipunan
sa may variable sa isang lugar na tinatawag na E. Kaya,
sa pamamagitan ng encapsulating lahat ng kanilang mga code sa loob
ng anonymous function na ito, ang mga ito mahalagang magkaroon ng kanilang sariling saklaw
na hindi ipagsapalaran clobbering anumang umiiral na mga variable.
Kaya, ito masyadong ay ang tunay isang napaka-karaniwang tularan,
lalo na kapag sumusulat isang code library
o kapag ikaw mismo ay hindi nais na kalat ng mga basura iyong espasyo pangalan
sa iba pang mga variable sa iyo gusto ang halaga upang mabuhay
at mamatay sa sandaling lumabas ka na bloke ng code,
ito ay isang magaling na paraan sa JavaScript.
Ayos lang.
Kaya, pagkatapos ay i-back sa halimbawang ito dito, lahat kami tapos sa dulo
may halimbawang ito ay nalinis lamang up ang code.
Kaya, ito ay nakuha ko pa rin isang buo tungkos ng switch, ang maramihang
ng mga kundisyon dito, ngunit mapansin ang isang bit ng syntax,
uma-access ito DOM node na may ang natatanging ID pagpaparehistro,
Umaasa ngayon ang espasyo paraan para isang descendant ng na node,
hanapin ito kung ito ay ng uri input at pagkatapos ay kahit na
kung hindi mo pa nakikita ito bago, maaaring kilala mo
na ito lamang ay nangangahulugan mahanap ito kasama ng input tag,
ang mga elemento ng pag-input na mayroong isang katangian ng pangalan sa isang halaga ng
ng e-mail, at pagkatapos ay hayaan sa akin iwagayway ang aking kamay sa ilang mga
sa iba pa ay hindi lahat stimulating na
ngunit talagang lamang jQuery syntax para sa parehong mga operasyon.
Ayos lang.
Ngunit kung ano ang hindi mahalaga dito ay ang gilid ng browser bagay-bagay
ngunit sa halip ang katotohanan na tayo Nagkaroon mas malinis at mas malinis na paraan
ng aktwal na paggawa ang code na iyon sa trabaho.
Ayos lang.
Ang anumang mga katanungan?
[Hindi marinig Puna]
OK. Ngayon ang masayang bahagi.
Kaya, node.js Bakit?
Sino ang nagmamalasakit?
Ano ang kilala mo sa mga ito ngayon?
Node.js, bakit?
Henry [ipinapalagay spelling].
[Hindi marinig Puna]
Pag-reset ng baterya?
Ano - ito ay isang perpektong talampas sabitan
para sa huli kalahati ng araw na ito.
Bakit hindi kami pumunta at tumagal 5 minutong break na dito,
mayroong isang kalahati kendi machine doon kung gagawin mo
tulad ng ilang mga kendi na walang paglalagay ng isang-kapat in