>> Visas tiesības.
Tātad, JavaScript.
Gandrīz ikviens šajā telpā iespējams, ir zināma
no komforts ar to, vai tas bija veids atpakaļ, kad SC50
vai tas ir bijis personīgais web projektu vai pat
ja jūs mazliet to ar pagājušajā PHP bāzes projekts
bet visvairāk daļa, daudzi no jums,
pat tad, ja jums ir dažas komforts
ar JavaScript varbūt nav ņemti
par pašsaprotamu to, kā valodas darbu un to, kas notiek
par zem pārsega un ko mēs esam gatavojas izmēģināt
to darīt, šodien ir mizas atpakaļ daži tehniskie slāņiem
par to, JavaScript ir, kā tas atšķiras no valodas
piemēram, PHP, kā var būt izmanto ne tikai klienta pusē
bet arī servera pusē un pēc tam koncentrēties ļoti konkrēti
par šo sistēmu, paziņojums nav JS kas būtībā palaist laiks,
programma, ar kuru jums var izpildīt JavaScript kodu,
servera pusē, un tas kļūst aizvien populārāka kārtošanas
un tajā pašā augumam šo dienas, iespējams, Ruby un PHP
un Python, un jūs redzēsiet
ka tas ir dažas diezgan Spēcīgu iezīmes, kā dažu
ar iebūvētu valodā konstrukcijas.
Bet vispirms, daži vienkārši sīkumi tikai, lai atgādinātu jums
par to, kā šī valoda darbojas un ja jums ir problēmas redzēt jebkurš
Šīs, tikai kliegt , un mēs pielāgot.
Tātad, piemēram, PHP tur ir nē jēdziens galveno funkciju,
jūs vienkārši sākt rakstīt kodu
un jūs varat mērces interpretēt to no augšas uz apakšu.
Saistībā ar pārlūkprogrammu
vai kaut kas servera pusē mēs redzēt dažus piemērus
mazliet.
Nosacījumiem, sintaktiski ekvivalents PHP kā arī C,
C + + un dažas citas valodas tā tikai, lai dotu jums sajūtu
par to, kā mēs varētu strukturēt tā,
tur ir tikai kanonisko stāvoklī.
Būla izteiksmes, tieši tādu pašu sintaktiski kā jūs esat redzējis
šajās pašās citi valodas, gan uz Oring
un beidzas lietas kopā.
JavaScript ir slēdži, daudz, piemēram, PHP un citu s do
un jūs ne tikai, piemēram, C līdz neatņemamu primitīvas
piemēram, simboliem un ints faktiski var do cita veida vērtības.
Cilpas. Tātad, tas ir tieši tāds pats
un, iespējams, duci valodās, bet cilpas, darīt, kamēr cilpas
un tad šis triks šeit.
Tātad, tas ir sava veida pazīstams kā ātri uzskaitījumu
un tas ir ļoti gudrs veids un tāpat kā PHP darot
Katram FU kā bar jūs varat līdzīgi,
in JavaScript objektu, ja objekts ir vārds
no mainīgā šeit, teiksim, Var i jo objektā un katra atkārtojuma
šīs cilpas, i ir būs viens
no taustiņiem no šo objektu.
Tātad, ja jums ir objektu students, un studentam ir ID
un nosaukumu un māju, iteratīvi i notiks
gada ID un nosaukumu vērtību un house un jūs varat NOLŪKAM indekss
uz objektu, it kā tas ir masīvu, izmantojot kvadrātiekavas
notācija, lai iegūtu vērtību Atslēgas ID vai nosaukums
vai māju, un tā tālāk.
Un pretēji bieži pieņēmums, JavaScript objekti,
īpašības nav vienmēr garantēta
tādā pašā secībā, tas ir arī taisnība, PHP tāpēc neuzņemas
ka lietas paliks tādā pašā secībā
ka jūs varat ievietot šos taustiņu vērtību pārus uz objektu.
Kā par masīvu?
Ir vairāki veidi rakstīt to sintaktiski
bet tas ir iespējams, visvairāk bieži tagad tikai izmantojot kvadrātveida
kronšteins notācija.
Tātad, tas ir mainīgs lielums, kas piezvanīt, kas satur masīvs
seši veseli skaitļi tur, šeit ir vienkāršs string
un paziņojums, kas ir klāt No šiem piemēriem,
kas ir JavaScript acīmredzot trūkst.
Jā. Tātad, nav jēdziens un rakstīt, protams, nav
Šajā sakarā šeit, bet tas patiešām virkne.
Tātad, JavaScript ir veidi un tas bija patiešām masīvs
, kas pats par sevi ir tipa un katrs no elementiem
šajā masīvā bija tipa numurs, kā JavaScript aicina tos.
Tātad, tas ir brīvi drukāti valoda, un mēs redzēsim
ka JavaScript, piemēram, PHP ir identitātes operatoru
un citi mehānismi faktiski pārbaudīt, ko tipam
daži mainīgais gan kļūdu pārbaudes
un citām lietojumprogrammām.
Un šeit ir paraugs objekts satur tikai ID un nosaukumu.
Un tagad, ievērosiet, ka mēs esam izmantojot figūriekava pierakstu,
atkāpes un balta telpa ir sava veida bezjēdzīga
un tas deklarē mainīgais, kura vārds ir Rob
un kura ID ir 1, un datums veids ir šeit mūsu numuru
un stīgu attiecīgi.
Un tad tas ir kaut nedaudz atšķiras
Ja jūs esat kādreiz izdarīt kaut ko ar Ajax šajās dienās?
Jūs, iespējams, izmanto objekts, piemēram, tas
bet ko ir vērts pieminēt šeit?
Kas ir sintaktiski kādreiz tik dažādi, tikai pāris
lietas starp šo piemēru kas ir, protams, mazāka
un tas lielāks piemērs.
Tātad, pirmais lajs termins, kas tas ir?
Kas ir Tipa personāls jūs teiktu?
OK, tas ir masīvs, tas ir masīvs, ko?
>> Objekti.
>> OK, tas ir masīvs objektiem.
Un tagad, koncentrējoties tikai uz vienu - kāds no šiem objektiem,
kas ir atšķirīgs starp šo un šo?
>> Taustiņi ir stīgas.
>> Jā. Tātad, taustiņi ir stīgas,
un taustiņi ir faktiski virknes abos gadījumos
un tas ir sava veida idiotisks
manuprāt vēsturiskajā dizains lēmums, ja jūs izmantojat
JSON, JavaScript Objekts Apzīmējumi,
kas būtībā transporta formāts
nosūtot datus parasti tīklā
starp klientu un serveri, Jums ir nepieciešams atcerēties
ka tas nav reāli derīgs JSON, un tas ir viens
Šo FYIs ja jūs kādreiz sprādziena galvu pret sienu
vairākas minūtes nesaprotamu iemesla dēļ, tas nav derīgs JSON
jo taustiņi ir faktiski nav noteikts.
JSON idiotically paredz, ka atslēgas citē ne tikai,
bet tie ir divtik kotētas, vienu pēdiņām nav pietiekami.
Tātad, stulba maz lieta un vairāk fun faktu
šodienas vajadzībām, bet tas Arī būtu derīga JavaScript
tas vienkārši nav - converse nav taisnība.
Labi.
Tātad, mēs redzēsim daudz vairāk par to.
Labi.
Tātad, tas ir JavaScript sintaktiski iespējams, ir diezgan
pazīstams, kāds no jums, kas ir nekad nav izmantots JavaScript agrāk
tas nav milzīgs lēciens no PHP vai vairums jebkuru procesuālo valoda
ka Jums varētu būt izmantoti.
Tātad, šodien mēs koncentrējamies uz interesantākajiem aspektiem
JavaScript īpaši kontekstā nav JS
bet ne tikai, jo līdz šim jūs, iespējams,
ja tu izmanto Javascript, to izmanto iekšpusē pārlūku.
Tātad, bez JS ir vide tad mazliet notiek
kas ļauj mums piekļūt JavaScript kods klients -
servera pusē, bet, pirmkārt, pieņemsim to apskatīt
kaut ko, kas ir nedaudz vairāk klienta pusē.
Tātad, es esmu gājusi, un tas ir saistīta uz kursiem mājas lapā,
Ja jūs vēlaties spēlēt kopā, ir divi subdirectories
šodienas Zip un sauc avotu kniedes zip mājas lapā
un tie ir tikai Daži piemēri reminiscing
lietas, jūs varētu būt redzējis pirms un I veida būvēts viņiem
līdz no vienkāršākā uz nedaudz sarežģītāka ķircināt
dažas funkcijas JavaScript.
Tātad, iesim uz priekšu un veikt meklēt, piemēram, šo.
Tātad, diemžēl mirgo tag bija nogalināti off pirms vairākiem gadiem
jo ceļš ir ieguvuši prettier un skaistāka
un mirgo tag bija burtiski atvērt kronšteins mirgot kvadrātiekavām
un tā veida nav nav ar mums.
Bet mēs vēl joprojām var atdzīvināt šī ideja tag, tikai veids
domāt par to loģiski, kā jūs iet
par padarot kaut ko līdzīgu tas mirgo intuitīvi?
Pieņemot, ka jūs zināt mazliet JavaScript bitu un vai CSS
šajā brīdī, tas ir Labi, ja jums nav.
>> Uzstādīt laiku, un paslēpt ka tad, kad es būšu trāpi
, un parādīt to vēlreiz.
>> Jā, perfekta.
Tas ir sava veida programmēšanas 101,
kā jūs sasniegt vizuālo efektu, kā šis?
Nu, jūs kaut ir parādīt kaut ko
un tad slēpt kaut ko parādīt kaut ko, kaut ko slēpt
un kā Jonathan ierosina izmantojot kādu laiku ārā,
sava veida grafiku, jūs varat darīt, Tas atkārtoti bez nepieciešamības
izmantot cilpu vai kaut kā tā.
Tātad, ļaujiet man iet uz mirgot-0.html
un ļaujiet man sarauties fonts mazliet
tā, ka vairāk par šo der.
Un pieņemsim to apskatīt par to, kas notiek šeit.
Tātad, pirmkārt, pamanīt, ka organisms
Šīs lapas ir super vienkāršs, iekšpusē ķermeņa
lapas ir tikai div.
Esmu patvaļīgi dots ID sveicienu
un tas varētu būt kaut kas tik ilgi, cik tas ir unikāls
un tad man vienkārši ir daži vienkāršu tekstu, hello world.
Tātad, ja es tagad ritiniet uz augšu, novērojat kādu pūkains stilu.
Tātad, es saku, straujš sveiciens, kas, kā jūs zināt,
CSS tikai nozīmē unikāli identificēt elements
ar ideju par sveicienu,
fonta izmērs notiek patvaļīgi ir tas, starpība un teksta saskaņot.
Tātad, neinteresanti estētiskās detaļas
līdz aptuveni centrētu tekstu.
Tātad, interesanti ir tas, skripta tagu šeit
kas man gadās likt iekšā galvas lapas.
Tātad, we'll - jūs varat darīt tas jebkurā vairākos veidos
un mēs redzēsim dažas iterācijas šīs pašas programmas
bet sāksim no augšas.
Tātad, es esmu deklarēts funkcija sauc blink
un acīmredzot tā izmanto šo iebūvētu DOM metodi, ko sauc
getElementById kas, iespējams, viena no jaudīgākām metodēm
ka jums no kastes ar JavaScript meklē
"Apsveikuma" nav būt pēdiņas, kā tas bija
HTML ir vai nu ir labi tik ilgi
kā tu stilistiski atbilst šīs dienas es uzdrošinos teikt
daudzi cilvēki izmanto Java, vienu pēdiņām Javascript,
pēdiņas HTML, bet tas nav īsti jautājums
tik ilgi, cik jūs esat konsekventi.
Tātad, šeit, ja jūs neesat pazīstams, Jūs faktiski var piekļūt
ar JavaScript CSS īpašumus elementiem.
Tātad, paziņojums, ka es esmu deklarē mainīgo sauc div
un saglabāta iekšā Minētā mainīgo,
atsauce uz kāda ka DOM elements.
Tātad, ja jūs domājat, ka atpakaļ uz CS50 vai jebkurš klases, kurā jūs domāja
par koku konstrukciju un DOM, dokumenta objekta modelis,
tas ir tikai atsauce līdz mezglu koka,
kas pārstāv šo lapu
un ja div.style.visibility īpašums vienāds, vienāds, vienāds,
slēpts, tad es vienkārši gribu pārslēgšanas to
kā ierosināts Jonathan citādi es gribu
lai pārslēgtos to pa slēpta.
Tagad, kas šajā pusē, kāpēc triple vienāds tur?
Vai arī kas tas ir pret dubultā vienāds?
>> Stingri ekvivalents.
>> Sorry.
>> Stingri ekvivalents.
Tātad, tas ir identitāte operatoriem
kur pēc jūs pārbaudīt nav tikai mainīgā vērtība
kā vienāda, vienlīdzīgas nozīmē bet arī no tā tipa.
Tātad, pat ja mums nav norādīts tālu jebkuri dati
tipi jebkādiem mainīgajiem šo vai jebkuru no slaidiem,
ir veids saistīta ar šo string slēpta
ar šo vērtību, slēpta un Tas, protams, virkne.
Tātad, šajā gadījumā, tā nav īsti jautājums
jo tur nav tā, ka mēs ejam, apvieno virkni
no "slēptās" ar kāda cita vērtība
bet tas bieži vien labs ieradums es teiktu, lai iegūtu
vērā, izmantojot vienāda, vienlīdzīgas,
vienādības zīme parasti laba lieta.
Tas padarīs jūsu kodu straujāka gan PHP, bet
un JavaScript tāpēc, ka jūs satikt
uz dažkārt stūra gadījumos ja vērtība var būt nulle
ka jūs pārbaudīt un nulle var nesaista ar viltus
vai arī varētu būt, un kā PHP,
Javascript arī var būt vairākas nepatiesi robežvērtībām, ja ar nulli
un viltus un spēkā nenoteikts var visu atrisināt netieši
līdz nepatiesa.
Bet, ja jūs patiešām vēlas lai pārbaudītu īpašu vērtību
piemēram nulle, numuru, vai false Boolean, tad jums ir
izmantot šo identitātes operatoru.
Tātad, tas varētu notikt, lai saņemtu uz vienalga kaut gan šeit,
tas ir sava veida jēgu jo mēs zinām, mēs pārbaudīt
par virknes vērtību, un tas ir nebūs kaut kas cits.
Tātad, šeit ir burvju tad, ja es ritiniet uz leju, lai šo līniju šeit
acīmredzot, iebūvēta uz loga objektu
un tas ir iezīme pārlūkprogrammu jūs varētu piekļūt
ar šo super globālās objektu sauc par logu,
iekšpusē, kas ir dažas funkcijas,
ja gabals, kas ir noteikts intervāls
un tas aizņem acīmredzot kādi argumenti?
Jā.
>> Funkcija zvanu un laiku.
>> Labi. Tātad, funkcija zvanu un laika
un tā jo īpaši atsauce uz funkciju,
rādītāju uz funkciju savā ziņā
un tas ir funkcija kas notiek
lai iegūtu izpildīts katru skaitu milisekundes, un šajā gadījumā
tas ir ik pēc 500 milisekundes.
Tātad, tas ir veids, kā pamudināt efektīvi un bezgalīga cilpa
neizmantojot atkārtojuma, bet vietā stāsta JavaScript
motoram iekšpusē pārlūku
to darīt katru 500 milisekundes vai ir tuvu
500 milisekundes, kā tas ir iespējams,
izrādās, ka zem motora pārsega,
tur ir tas, ko sauc notikums cilpas un mēs atgriezīsimies pie šī
saistībā ar mezglu JS ka tikai nepārtraukti veida
sēž tur, vērpšanas, gaida veicamo darbu
un, tiklīdz tā saprotam,
500 milisekundes ir pagājuši blink saņems sauc atkal
un atkal, un atkal ir kopā ar visiem pārējiem darbiem
kas nepieciešams, lai saņemtu darīts.
Tātad, ko mēs varam uzlabot šeit?
Nu, ļaujiet man sākt up blink-1.html
un pierādīt mirkšķināšanas-1.html
kā estētiski pilnīgi identiski.
Tātad, ko mēs varētu uzlabot šeit?
Nu, ievērosiet, ka tas bija sava veida bezjēdzīgi
lai noteiktu funkciju, ko sauc par Blink jo cik
, cik daudz vietas did I zvanu funkciju mirgot?
>> Tikai vienu reizi.
>> Tātad, viens.
Tātad, tas nav slikti, jo Fakts, tas ir iespējams, ir diezgan
taisni uz priekšu.
Es noteikti funkciju mirgot, es zvanu funkciju mirgot veidā
šī parametra, bet tehniski,
nebija iemesls tā un bieži paradigma
JavaScript ir faktiski izmantot lambda funkcijas
kā jūs varbūt atceraties no 51 vai anonīmas funkcijas
kur, ja jums nav nepieciešams nosaukumu funkciju,
Ja jūs tikai nosaucot to protams, vienā vietā,
kāpēc uztraukties piesārņot savu kodu, piesārņot programmētāji prātā
un savu vārdu telpa tiešām ar simboliem
ka jums nav īsti nepieciešams rūpēties par.
Un tā, šajā versijā šeit,
paziņojums, ka es esmu aicinot window.SetInterval tieši
pašā augšā manu script tag tad es esmu iet
ar bezvārda funkcija kas notiek nav argumentu
un tas ir pilnīgi fine un pēc tam ķermeņa
šī funkcija, šķiet, ir identisks tam, ko tā bija pirms tam
un vienīgais sintaktisko Atšķirība ir
noteikti šeit blakus 500.
Es esmu noslēguma ķermeni Funkcijas
un tad es saku izpildīt to iepriekšējo kodu,
ik pēc 500 milisekundes.
Tātad, ļoti mazsvarīgs maiņa
bet solis uz to, kas ir iespējams, vairāk elegants
Īstenojot šo.
Tātad, pieņemsim šo vienu soli tālāk, ja es tagad iet
uz mirgot divas, jūs redzēt vienotu bibliotēku,
efekts, kas notiek
ir pilnīgi mazsvarīgi estētiski, bet, ja mēs ejam
uz versiju divās šeit, paziņojums ka augšpusē manu galvu,
Es esmu iekļauts Jaunākā versija JQuery.
Un tad, šeit lejā, Es tikai iztīrīt
up kodu mazliet, tas ir nebūs jautri pasaulē
turpināt izmantot dzimtā DOM funkcijas
un veida neapstrādātu JavaScript.
Patiesībā, JQuery, kā jūs varat zinu, ir kļuvis tik populārs
ka lielākā daļa cilvēku vienkārši konflikts jQuery ar JavaScript
bet tiešām tikai vakariņas noderīga bibliotēka rakstīts
ko puisis nosaukts John Resig un jo pārējās
tas ir tikai padara no garlaicīgs daudzas lietas
JavaScript vieglāk un īss.
Tātad, šajā gadījumā šeit, kas notiek?
Tātad, man ir šī izskatu dolāra zīmi, vairāk par to
tikai brīdi, tad tas ir CSS selektoru.
Tātad, tas ir ļoti līdzīgs gars, ko es darīju pirms tam,
bet šoreiz, es esmu burtiski izmantojot hash tag
norādīt unikālu identifikators sauc sveiciens
un tad acīmredzot . Css ir metode būvēts
, lai neatkarīgi no objekta ir tas, ka es tikko izveidoju
un es esmu pārbaudīt vērtību Pārskatāmības taustiņu.
Un, ja vērtība šī taustiņa vienāds, vienāds, vienāds, slēpta,
tad es esmu gatavojas, lai pārslēgtos to un Es esmu gatavojas, lai pārslēgtos to šoreiz
, izmantojot vienu metodi kas acīmredzot ir pārslogots
, kas nozīmē, ka tā ir divi dažādi paraksti,
viens ar vienu argumentu un viens ar diviem argumentiem,
otrais no kuriem ir noteicēji,
bijušais no kuriem ieguvējam tā runāt.
Un, ja ziņkārīgs, un, ja jūs vēlaties patiesībā nekad paskatījās uz to,
Ja mēs ejam uz jquery.css cerams top hit patiešām šis
un jūs varat redzēt vairāk formāls skaidrojums
ka mēs tikai izmantot to, . Css ar īpašuma nosaukumu
un tad noteicēji ir dot CSS
ar īpašuma nosaukumu un vērtību.
Tātad, nedaudz tīrāku, bet paziņojums veida rakstu šeit
ar katru atkārtojuma Šī koda,
Mēs esam veida padarot to stingrāka un stingrāka un stingrāka
un tur saka labāku dizainu
jo mēs izmantojam kādu cits kods, kas ir likvidēta
daži no sarežģītības.
Tātad, tagad pieņemsim tas pat vienkāršāka.
Un patiesībā, ja es noņemt visus citātus jūs redzēsiet tikai visu
komentēt jūs redzēsiet, kā vienkārši tas ir gotten.
Viena atšķirība Šeit, protams, ir
, ka es esmu, izmantojot pārslēgšanas metode, kas arī nāk būvēts
, lai jQuery un tas ir tikai
tāpēc, ka kāds cits rakstīja kodu
kas faktiski pārslēgšana redzamība iestatījums
Jebkuras DOM elementa ka jūs to nosūtīt.
Tātad, labāk un labāk.
Un tā tas ir modelis,
lai gan tas ir supper Vienkāršs piemērs un kārtot
stulba neto efektu, kas ir mirgojošs gabals teksta,
tas ir, ka sava veida domas process, kas jums ir jādomā -
domāt par to nav vienmēr ļoti pirmais
pasīvā rakstot kaut nākamajam projektam
bet, protams, kā jūs atkārtot ar savu konsultanta vai ar mani
un jūsu komandas sanāksmes vai jūs vienkārši pārskatīt savu komandas biedriem kodu
par pievilkšanas lietas uz augšu, pa labi?
Galu galā, viņi ir mazāk -
a mazāk koda rindiņas Jūs galu galā ir
arī teorētiski mazāk bugs jūs varētu būt aicinot
tāpēc, ka ir vienkārši mazāk kodu, lai izjaukt ar jums.
Labi.
Tātad, pāris takeaways.
Lambda funkciju, anonīmu funkciju,
daudzi no kuriem jūs ir redzējis
un tad tikai pievelkot arī lietas pat ar bibliotēku
piemēram, jQuery šajā konkrētais gadījums.
Labi.
Kādi jautājumi?
Darīsim viens otru klienta pusē aspekts šeit
veidā nulles mums šī tīrā ietekme.
Super vienkārša forma un acīmredzot ja es mēģinātu noklikšķiniet jāreģistrējas šeit,
Sākotnēji tas man saka, jūs esat reģistrēta, labi, nav īsti.
Nu, kāpēc tā?
Nu, šeit ir form-0.html ļoti maz kodu,
JavaScript nekāda nav, un tas ir pilnīgi viltotas veida
formu, jo darbība vērtība ir registered.html
kas nozīmē, ka nav svarīgi, ko Es rakstīt šajā veidlapā,
kur tas būs nosūta uz serveri?
Jā. Tātad, lai registered.html kas ir nepārprotami HTML failu
kas tādēļ ir statisks failu, kas nav līdzekļi
veikt lietotāja ievadi, pieņemot tur nav JavaScript kods
iestrādāta tā, kas ir meklē URL
tāpēc tas ir pilnīgi Nööp un ka nekas nenotiks
ar iesniegtajiem datiem, bet jūs varat redzēt struktūru
ar diezgan vienkāršu HTML5 formu
, kas ir maz paroli, daži ieguldījumu veidiem.
Tātad, pieņemsim patiesībā tagad pievienot kādu kļūdu pārbaudi
un redzēt, kā mēs varētu uzlabot to.
Tātad, šeit ir sava veida slikta cilvēka veids, kā īstenot šo
un tas ir sava veida vētraina rieciens kodu.
Tātad, vispirms pieņemsim ritināšanas uz leju līdz
lai redzētu, kas pats un to, kas ir atšķirīgs.
Vienīgais, kas atšķiras Tagad starp šo
un iepriekšējā versija ir ka es esmu devis formu un ID
no "reģistrācija" varētu ir bijis kaut ko es gribu
bet tā domāts, lai būtu unikāli identificējama pat tas nav
noteikti nepieciešams, jo, ja lappusē ir tikai viens veids, protams, es
var atrast ar vienu no jQuery ir selektora metodes.
Bet šādā veidā tikai padara to deterministisko.
Tātad, ja es eju tagad uz manu skriptu tag, konstatējat,
window.onload vienāds anonīms funkcija.
Tātad, kas ir tas dara?
Tātad, jūs varat atgādināt, ka klienta puses programmēšana -
JavaScript drīzāk HTML lapas ir dažādi notikumi, kas saistīti
ar elementiem, noklikšķinot un iesniegšanu un koncentrējot
un izzūd, un citu tādu notikumi, kas varētu notikt
kā lietotājam parasti mijiedarbojas ar lapu,
window.onload dara to, ko tā saka.
Par visu Windows iekraušanas
tāpēc, kad visi attēli ir lejupielādēt, kad visi faili ir
lejupielādēta un kad lapa ir ielādēta,
do šādu kodu, un paziņojums, ja es varu pārslēgties uz leju
Šīs metodes, ievērosiet, ka ir ne iekavās
Pēc cirtaini lencēm kas ir,
ka es neesmu izpildes šī funkcija šeit tagad,
pārlūks gatavojas izpildīt tas man, kad tas ir noteikts
ka lapa ir ielādēta.
Tātad, pieņemsim redzēt, ko mēs esam darījuši,
document.getElementById reģistrācija
lai tikai dod man atsauce uz mezglu
kokā, kas ir par ir ID reģistrācijas.
Un tagad, es esmu gatavojas reģistrēt citu notikumu apdarinātājs
darot form.onsubmit izpaužas Tas anonīma funkcija
kas nozīmē, ka šādus kodekss būtu jāizpilda, kad
Tiek apgalvots, ka veidā.
Tagad lielākā daļa no tā ir tikai veida garlaicīgi loģiku.
Tātad, ja vērtība e-pasts lauka formā ir
"Nekas", tad jums ir norādiet savu e-pasta adresi,
jūs kliegt lietotājs ar brīdināt un pēc tam atgriezties viltus.
Un tad man ir ķekars citas pārbaudes,
pārbaudes par paroli,
pārbaudes, ja paroles ir tāds pats,
pārbaudes, ja līgums izvēles rūtiņa tiek pārbaudīts, vai nav
un es vienkārši kliegt lietotājs, ja tādi
Šo testu faktiski nespēj.
Un tā, šeit ir piemērs vēl lai gan tas ir mazliet neīsts
Šeit fakts, ka es esmu, izmantojot vienāds, vienāds, vienāds,
nozīmē, ka lietotājs nevar mēģināt triks mani
ierakstot kādā vērtībā.
Vai drīzāk es esmu patiešām pārbaudi, lai konstatētu
ar tukšu virkni, lietotājs nav drukāti kaut ko vēl.
Ja lietotājs ievadījis burtiski nulle,
"Nulle", iespējams, varētu būt sajaukt ar tukšu virkni.
Un es saku, tas ir sava veida gada bezjēdzīga šeit
jo acīmredzot pat nulles nav e-pasta adresi.
Bet, ja tas bija vairāk vispārējs lauks līdzīgi teksta laukā
vai nosaukums vai apraksts vai kaut ko vēlaties novērtēt par
, un tas ne vienmēr sintaktiski ir
lai e-pasta adresi, lietotājs varētu rakstīt kaut ko līdzīgu nullei
un atkal stūra lieta, bet tas ir Tāpēc parasti pārbaudes veidiem ir
noderīga lieta.
Jūs patiesi pārbaudīt lietotājs kas drukāti neko
minētajā jomā.
Tātad, kas notiek, ja neviens no šīs pārbaudes neizdodas, labi,
atgriežoties taisnība iekšpusē gada notikumu apdarinātājs
piemēram onsubmit nozīmē tikai let sākotnējo uzvedību patiesībā
vairojas un tādēļ veidlapa saņems iesniegta.
Un tas ir iemesls, kāpēc, kad es beidzot uzklikšķināt iesniegt pirms es saņēmu
līdz register.html un ja man darīt tagad, paziņojums,
Man kliedza, ja man nav norādiet e-pasta adresi
un es varu rakstīt malan@harvard.edu,
tumšsarkanā [fonētiskā] tumšsarkanā, atzīmējot rūtiņu,
un tagad reģistrēties un tas man saka, atkal,
esat reģistrējies vai nav īsti.
Labi.
Tātad, pieņemsim sakopt šo up tikai mazliet un tad pāreja
uz jauno jaunāku servera pusē sīkumi.
Tātad, ja es eju uz formu-2.html, pamanīt dažas lietas.
Tātad, kas ir viens, es atvedu jQuery atpakaļ mix
tāpēc atkal ir Tas dolāra zīmi
un tagad es esmu, izmantojot daži jQuery metodes.
Tātad, pirmkārt, kas tas ir par dolāra zīmi, kas ir
tik īpašs šeit?
Kas ir dolāra zīmi savītas visā gandrīz visiem jQuery kodu?
Jā.
[Nedzirdams Piezīme]
OK. Tātad, dolāra zīmi funkcija iet caur DOM meklē
kaut ko ar to īpaši CSS selektoru.
Jā, taisnība, bet gandrīz pārāk precīzs.
Tas ir tas, kas notiek kad iet virknē
kā tas ir šajā gadījumā, bet jums nav vienmēr jānokārto virknē.
Patiesībā, sakāms, ir ļoti Pirmā līnija šeit ir tas nav
CSS selektors, es esmu iet kādā Lambda funkciju.
Tātad, plašākā nozīmē - tā, laba atbilde bet pārāk precīzs.
Plašāk, kas ir dolāra zīmi veido?
>> Just jQuery.
>> Jā. Tātad, vienkārši jQuery vai arī tas ir tikai funkcija
ka daži puisis gadus atpakaļ rakstīja un citi cilvēki ir
jo uzlabota, kas burtiski pēc noklusējuma tiek saukta -
Hmm, sauc jQuery.
Tā vienkārši - izrādās kas atšķirībā no partijas
Valodu dolāra zīmi ir ļoti lietderīga simbolu izmantot
Mainīgas vārda, savukārt
PHP dolāra zīmi acīmredzot ir īpaša nozīme
bet JavaScript tāpat kā Dažās valodās, dolāra zīmi
un izcelt un citu tādu speciālās rakstzīmes pilnīgi legit
izmantot savu simbolu nosaukumi mainīgajiem.
Tātad, kāds vienkārši nolēmis , ka jūs zināt, ko?
Tas būs diezgan garlaicīgs
padarīt visu pasauli JQuery ierakstiet visu laiku,
ļaujiet man veida augu akciju zemē un teikt,
"Šī bibliotēka izmantot dolāra zīmi. "
Un patiesībā, šī tas rada risku
ka kāds cits pārgalvīgi gatavojas izmantot dolāra zīmi
viņa vai viņas bibliotēkā, bet tur ir veidi, kā sava veida apdrošināt
ka tad, kad jūs izmantojat dolāru parakstīt to kartes uz jQuery
tāpēc, ka jūs varat pārbaudīt, ja tas jau ir piešķirts
uz kaut ko citu pēc būtības.
Labi.
Tātad, tas ir viss, kas ir, tur nav burvju.
Tas ir tikai sexy meklē gabals sintaksi, kas ir jauki
un ātri un viegli rakstīt.
Tātad, kas notiek, kad ierakstiet dolāra zīmi atvērtos paren
un tad anonīms funkcija.
Nu, izrādās, ka tas ir faktiski saīsināts apzīmējums
dokumentu dot gatavs atvērt paren.
Tātad, kā Cynthia pamanījuši agrāk mēs jau atradu vienu
stūra gadījums.
Ja jūs vienkārši pāriet lambda funkcija,
ietekme dolāru zīme ir nedaudz atšķirīgs.
Faktiski, kas īsti notiek ka tas ir līdzvērtīgs tam,
iet ar atsauci uz globālo dokuments objekts
tas ir globāls, tāpat kā logs objekts
kas dod jums dažas īpaša funkcionalitāte
kas ietekmē visu lapu vai pārlūku un izrādās
no minētā dokumenta, kad jūs wrap to ar jQuery,
jQuery būtībā saprot, oh, tas ir atsauces
, ka īpaša dokumenta objektu,
ļaujiet man tagad reģistrs notikumu apdarinātājs sauc gatavs
kas nav native JavaScript un DOM saistīti.
Ready ir jQuery lieta, kas saka
kad lapa ir ielādēta visiem HTML elementiem
bet ne vienmēr ir piekrauts, visas CSS un attēlus
un JavaScript failus un flash failus un patīk.
Tātad, tas ir solis pirms par slodzi, tad iet uz priekšu
un izpildīt sekojošo.
Un otrādi, izmantojot par gatavs nozīmē, ka jūs varat, jūs zināt,
ka visus elementus Jūsu DOM,
visas identificēt lietas ar ID, tādi pat
ja lapas, tās saturs joprojām iekraušanas un iekraušanas
un jums ir dažas sadalīti ikonas brīdi
vai baltas lapas fonā.
Jā.
>> Kas notiktu ja [dzirdams]?
>> Perfect Piemēram, ideāls jautājums.
Tātad, pieņemsim redzēt, ja mēs varam simulēt šīs tiesības tagad.
Tātad, ļaujiet man iet uz priekšu un dzēst šīs divas līnijas up šeit un pēc tam
bez bothering, lai noteiktu atkāpes, ļaujiet man iet uz priekšu
un dzēst leju šeit - Hmm, tas viens uz leju šeit.
Un tagad, ļaujiet man iet vairāk nekā uz lapas, dodieties uz formu-2.html un veida
in reģistrā, nekas, šķiet, notiktu, teiksim, kāpēc bija tas, ka,
iesim uz priekšu un atvērt up Chrome inspektors
atvērtu konsoli, tikai, lai redzētu ja kaut kas notiek šeit, tagad,
reģistrs, vēl nekas.
Tātad, kods ir sintaktiski smalks
tāpēc es neesmu redzēt jebkurš sarkans kļūdu ziņojumus,
bet to, kas ir skaidri nenotiek?
Neviens no maniem kods ir taisnība, tas nedarbojas, lai neviens
manu kodu, šķiet, ir izpildes, tad kāpēc tas ir?
Nu, JavaScript un pārlūkprogrammām vispārīgāk izpildīt
saturu, web lapas, virsū uz leju, no kreisās uz labo.
Un problēma ir ka tāpēc, ka top
Šī lapa ir HTML tad dodies Tad skripts tad vēl skripts,
tas ir gatavojas iegūt izpildīts Pirms kāda ir pat gatava,
vai pat pastāv koku pārstāvību lapā.
Forma pati par sevi, pat ne struktūra pastāv šajā brīdī.
Tātad, jQuery ir pietiekami gudrs līdz ar to ir kļūdu pārbaude
ka, ja nav elements ar unikālais ID reģistrācijas,
tas nav gatavojas bail par jums
un tikai izraisa daži konsole kļūda un izjauktu visu lapu,
tas notiek klusām ignorēt jums, bet iemesls tam, ka nav
Šā kodeksa kādreiz izpilda tiek
tāpēc, ja jums ir reģistrēti šajā iesniegt apdarinātājs,
nebija elements pievienot to.
Tātad, tas ir sava veida ne op tur.
Tātad, norādot tā vietā, pagaidiet, līdz vecumam ir piekrauts
ja mēs to window.onload lieta, kas ir sava veida
vecās skolas veids, kā darīt tas, vai sexier jQuery veids
kā šis, mēs varam pateikt, ka jāgaida, līdz viss
Šo HTML tagiem ir parsēt tā, ka pat
ja attēli nav piekrauts, pie Vismaz, ka mezgls ir no koka,
Tad JQuery var nodrošināt ka viss ir tur.
Jā.
[Nedzirdams Piezīme]
Jā, labi, jā, pilnīgi noteikti.
Tātad, otrs risinājums šo, ja Jums nav izmantot šo
vai nav atcerēties ka tas pastāvēja,
Jūs varētu absolūti pārvietot Tas viss uz leju
no mājas lapā, iekšpusē ķermenis vēl bet zem formu
Un tas arī atrisināt šo problēmu.
Tas ir tikai parasti uzskatīts par sliktu praksi.
Tas ir mazliet netīrs un apliets speciāli
ja jūs paturiet traucēšanas visu līdz lapas apakšā,
jo īpaši, kad es esmu tur lietas vienkārši, liekot visiem
manu kodu iekšpusē no HTML lapas
ja, protams, jūs varat protams nokļūt ieradumos
faktoringa to ārā atsevišķā failā
kurā brīdī tas ir tikai jauki
centralizēt failus galvā.
Izņemot tur ir cena, ko maksā
liekot JavaScript vēl aktīvi, piemēram, CSS failus
galvā lapas, kas ir risks, ka jūs izmantojat?
>> Lēnāka lapas ielādes.
>> Lēnāka lapas ielādes, kāpēc?
>> Tāpēc, ka mēs cenšamies ielādēt visas bibliotēkas
Pirms [dzirdams].
>> Tieši tāpēc pārlūki lasīt kodu augšas uz leju,
kreisās uz labo pusi, ja Google analytics ir lēns
vai jQuery CDN ir lēns vai Facebook API ir lēns
un ka fails vienkārši uzkaras iespējams, atkarībā no
par to, kā jūs ielādes šo failu, Visa lapa varētu parādīties pakārt.
Un, ja jūs redzēt šo daudz atklāti
uz tīmekļa vietnēm, viņi ir daudz zemas kvalitātes reklāmas
uz tām, mēs esam tikai viens lēns vai downed mājas lapā varētu pakārt lapu
dažiem nenoteiktu laiku sekunžu skaits
līdz beidzot pārlūks cerams reizes no gada, kas
un tad parāda, pārējās lapas.
Tātad, ja jūs esat kādreiz izmanto, piemēram, Facebook, piemēram, pogas,
savā mājas lapā, ļaujiet man redzēt, ja es varētu atrast šo
bez pieteikties šeit.
Tātad, ja jums iet uz Facebook, piemēram, pogas
un noklikšķiniet uz saņemt kodu, damn it,
ļauj redzēt, ja mēs varam atrast piemēru,
protams, kāds bija ievietojis šo.
[Pauze]
Es atmest pāris sekundes, ja mēs neredzam to.
Facebook asinhronā - OK.
Tātad, tas ir kods, un, ja tie esam nomainījuši nesen
ka Facebook faktiski iesaka lietot
ielādēt savu bibliotēku un faktiski ierosināt
ka jūs nodot šo ķermeņa jūsu lapu.
Tātad, Facebook jums iesaka radīt sava veida stulba DIV
tas vienkārši ir unikāls ID, piemēram, tas, tad ir skriptu tag
un visu šo sarežģītību būtībā nav šādu
un tie nav izmantot jebkuru jQuery tāpēc, ka viņi nevēlas
uzņemties jebkuru citu atkarību,
ļaujiet man pāriet šis vairāk nekā tikai mazliet.
Tātad, paziņojums tie ir anonīma funkcija šeit
vairāk par to tikai brīdi,
pēc tam viņi izmanto document.createElement,
viņi radot DOM elementu, tas ir kā malloc tā runāt
ja tag ir tipa skripts, tas ir tad, norādot
ka async atribūts Minētās tag notiek
lai būtu patiesība, tad jums iet uz priekšu un izdomāt, kas URL
no Facebook JavaScript jābūt
un tas ir tikai iedomātā veids
gada pārbaudes būtu tas ir HGP vai HDPS.
Un tad beidzot, jums paziņojums, ko Facebook dara,
viņi saņem DOM mezglu, kas ir ID Facebook saknes
kas ir tas, ko viņi teica Jūs nodot lapā
un tad viņi pievienot bērnu tā iedarbība tas viss ir
lai veida dinamiski injicēt jauna script tagu savā lapā
kā bērns no DIV, ka jūs ievietota ir tā, ka pārējā
no lapas ielāde laimīgi
un tad šis kods patiesībā izpaužas piekrauts asinhroni.
Tātad, būtībā pēc fakts un es atliktā minēts
uz anonīmu funkciju,
kas tas bailīgs sintakse atsaucoties uz šeit
kad man ir ne tikai funkcija atvērt paren, tuvi paren
un tad cirtaini bikšturi, kāpēc atvērtā paren šeit
un pēc tam atvērt tuvu, tuvu paren tur, kas ir tas dara?
>> [Nedzirdams] nosakot un tad izpildot?
>> Tieši tā, tas ir, nosakot funkciju, kas ir anonīms
bet tikai definējot funkciju,
protams, neveic funkcija, kamēr jūs to saucat
pēc nosaukuma, bet, protams, tas ir anonīma funkcija
lai jūs nevarat zvanīt tas pēc nosaukuma, bet jūs varat
JavaScript izpildīt anonīms funkcija tikai
iekapsulētājmateriālu viss iekavās, kā mēs esam darījuši
ar šo paren, un tas paren šeit un pēc tam fiksējoša
līdz beigām funkciju atvērt paren, tuvu paren,
Ja jūs nevēlaties, lai nodot to argumentus.
Bet tas, šķiet veida stulba,
piemēram, kāpēc šis papildu sintaktisko sarežģītība
ka lielākā daļa cilvēku nešķiet atzīt, kas ir vērtība
iesaiņošana tiem trīs rindiņas kodu
anonīmā funkciju šādā veidā.
Jā.
>> Lai izvairītos no pārrakstot vērtīga [nedzirdama].
>> Tieši tā, lai izvairītos no pārrakstot mainīgā
esošajā lapā, vai ne?
Facebook ir nedaudz pārgalvīgi nolēma,
viņi gatavojas izmantot mainīgais E, tas ir diezgan iespējams,
ka jūs vai kāds izmanto piemēram, pogu Facebook
vai kāds cits sociālā plug
kas ir mainīgais kaut ko sauc E. Tātad,
kapsulu veidojošais all par to kodu iekšpusē
Šīs anonīmu funkciju, tie būtībā ir sava joma
kas nav riskēt clobbering visas esošās mainīgie.
Tātad, tas arī ir faktiski ļoti bieži paradigmas,
it īpaši, ja rakstot bibliotēka kodu
vai tad, kad jūs pats nav gribu jucekli jūsu vārdu telpas
ar citiem mainīgajiem jums vēlas vērtību dzīvot
un mirst, kad jūs izejat ka bloka kodu,
tas ir jauki tehnika JavaScript.
Labi.
Tātad, pēc tam atpakaļ uz šajā piemērā šeit, viss, ko mēs esam darījuši, kas beigās
ar šis piemērs ir vienkārši sakopta kodu.
Tātad, tas joprojām got visu ķekars slēdži, viss ķekars
Nosacījumu šeit, bet pamanīt mazliet sintaksi,
tas piekļūst DOM mezglu ar unikālais ID reģistrācija,
kosmosa līdzekļus meklēt tagad pēcnācējs šajā mezglā,
atrast, ja tas ir tipa ievadi, un tad pat
ja neesat redzējuši šo pirms, jūs varētu zināt
ka tas tikai nozīmē atrast tā ar ieejas frāzi,
ievades elementi, kas ir atribūts vārda, kuru vērtība
e-pasta, un tad ļaujiet man vilnis savu roku pie dažām
pārējo nav viss, kas stimulējot
bet tiešām tikai jQuery sintaksi tām pašām darbībām.
Labi.
Bet to, kas nav tik svarīgi Šeit ir pārlūks pusē sīkumi
bet gan tas, ka mēs bija tīrākus un tīrākus veidi
faktiski padarot šis kods strādā.
Labi.
Kādi jautājumi?
[Nedzirdams Piezīme]
OK. Tagad fun daļa.
Tātad, node.js Kāpēc?
Who cares?
Ko jūs zināt par to šodien?
Node.js, kāpēc?
Henry [pieņemts pareizrakstību].
[Nedzirdams Piezīme]
Akumulatoru reset?
Ko - tas ir perfect klints pakaramais
lai otrajā pusē šodien.
Kāpēc nav mēs iet un veikt 5 minūšu pārtraukumu šeit
tur puse konfektes mašīna tur, ja jūs būtu
kā daži konfektes bez liekot ceturtdaļu collas