>> Gerai.
Taigi, "JavaScript".
Beveik visi šioje salėje tikriausiai turi tam tikrą
komforto su juo, ar tai buvo kelio atgal, kai SC50
ar tai buvo asmeninis interneto projektai ar net
jei tu apie jį šiek tiek su praėjusį PHP bazinis projektas,
bet labiausiai dalis, daugelis iš jūsų,
net jei jūs turite tam tikrą komfortą
JavaScript gal nebuvo imtasi
savaime suprantamu dalyku, kaip kalbos darbai ir tai, kas vyksta
apie po gaubtu ir ką mes ketiname bandyti
padaryti šiandien žievelės atgal kai kuriuos techninius sluoksnius
ką JavaScript yra, kaip jis skiriasi nuo kalbos
pavyzdžiui, PHP, kaip gali būti naudojamas ne tik kliento pusėje
bet ir serverio pusėje ir tada dėmesio labai konkrečiai
į šią sistemą, pastebėsite ne JS kuri iš esmės vykdymo metu,
su kuria jūs programa gali vykdyti JavaScript kodą,
serverio pusėje ir tai tampa vis labiau populiarėja rūšiuoti
dėl to paties ūgio tai dienų tikriausiai Ruby ir PHP
ir Python ir pamatysite
kad jis turi keletą gana galingų funkcijų pagal taip kai
įmontuotą kalba konstruktai.
Bet pirmiausia, kai lengva Daiktai tik priminti jums
, kaip tai veikia ir kalba , jei turite problemų pamatyti bet
Šio, tik garsiai , ir mes pakoreguoti.
Taigi, kaip ir PHP nėra ne iš pagrindinės funkcijos sąvoka,
jūs tiesiog pradėkite rašyti kodą
ir jūs galite įtaisus interpretuoti jį iš viršaus į apačią.
Jei naršyklėje kontekste
ar kažkas serverio pusėje matysime keletą pavyzdžių
į šiek tiek.
Sąlygos, sintaksiškai atitinka PHP taip pat C
C + + ir kai kurios kitos kalbos tad tiesiog suteikti jums jausmas
kaip mes galime suformuoti jį,
ten tiesiog kanoninė sąlyga.
Būlio išraiškos, tą patį sintaksiškai kaip jūs mačiau
tose pačiose kita kalbos, tiek dėl ORING
ir baigiasi kartu.
JavaScript turi jungiklius, panašiai kaip PHP ir kitos darbaknygės
ir jūs ne tik, pavyzdžiui, C į integralių primityvai
kaip simbolių ir int iš tikrųjų gali padaryti kitų rūšių vertybės.
Kilpos. Taigi, tai yra lygiai tas pats
ir tikriausiai dešimčių kalbų, o kilpos, daryti, o kilpos
ir tada šis triukas čia.
Taigi, tai tarsi žinomas kaip greitas skaičiavimas
ir tai labai protingas būdas tiesiog kaip PHP daro
kiekvienam FU kaip baras galite panašiai,
ir JavaScript objektas, kur objektas yra pavadinimas
čia kintamojo, tarkim, var i objekte ir kiekvienos iteracijos
Šios kilpos, i bus vienas
iš iš to objekto raktus.
Taigi, jei turite už objektą studentas, o studentas turi ID
ir pavadinimas ir namai iteracijų imsiuosi
apie ID ir pavadinimas vertės ir namas ir jūs galite įtaisus puslapis
į objektą taip, tarsi tai masyvas naudojant kvadratinės laikiklis
notacijos gauti vertę iš pagrindinių ID arba pavadinimas
ar namas ir kt.
Ir priešingai, bendras prielaida, "JavaScript" objektai,
savybės yra ne nebūtinai garantuoja, kad bus
ta pačia tvarka, tai taip pat tiesa, PHP, todėl nereikia manyti,
kad viskas liks ta pačia tvarka
kad jūs įtraukėte tas raktas reikšmės poros į objektą.
Kaip apie matricas?
Yra būdų, kaip pora rašyti sintaksiškai
bet tai tikriausiai labiausiai dažnas dabar tik naudojant aikštė
laikiklis žymėjimas.
Taigi, tai yra su kintama skambinti numeriais, kurių sudėtyje yra įvairių
šešių sveikieji skaičiai ten, Štai paprastas string
ir pastebėti, kas nėra Iš šių pavyzdžių,
kas yra "JavaScript" matyt, trūksta.
Taip. Taigi, nėra sąvoka įvedę, tikrai ne
Šiame kontekste čia, bet tai tikrai eilutę.
Taigi, "JavaScript" yra rūšys ir tai buvo iš tiesų matrica
kuri pati tipas ir kiekvienas iš elementų
tame masyve buvo tipo skaičius, kaip JavaScript vadina juos.
Taigi, tai laisvai atspausdinti kalba ir mes pamatyti
kad kaip PHP JavaScript turi asmens tapatybę operatorius
ir kiti mechanizmai iš tikrųjų patikrinti, kas tipo
kai kintamasis yra tiek klaidų tikrinimas
ir kitas programas.
Ir štai pavyzdys objektas , kurių sudėtyje yra tik vardą ir pavardę.
Ir dabar, pastebėsite, kad mes naudojant riestinis skliaustas žymėjimą,
įdubimas ir balta erdvė yra tarsi beprasmis
ir tai deklaruoja kintamasis, kurio vardas yra Rob
ir kurio ID yra 1 ir data tipas yra čia mūsų numeris
ir styginių atitinkamai.
Ir tai yra kažkas šiek tiek skiriasi
jei jūs kada nors padaryti ką nors Ajax šių dienų?
Jūs tikriausiai naudojamas kaip šis objektas
tačiau tai, ką verta paminėti čia?
Kas yra sintaksiškai kada taip skiriasi, tik pora
dalykų, tarp šiame pavyzdyje kuris yra pripažinti mažesni
ir tai didesnis pavyzdys.
Taigi, pirmiausia profanas Terminas, kas tai yra?
Kas yra tipas darbuotojai būtų pasakyti?
Gerai, tai masyvas, tai ką iš masyvo?
>> Objektai.
>> Gerai, tai objektų masyvo.
Ir dabar, sutelkti dėmesį tik vieną - nors iš šių objektų viena,
kas skiriasi tarp šios ir tai?
>> Raktai yra stygos.
>> Taip. Taigi, Raktai yra stygos,
ir mygtukai yra iš tikrųjų stygos abiem atvejais
ir tai yra tarsi Idiotic
, mano nuomone, istorinės dizainas sprendimas, kai jūs naudojate
JSON, JavaScript Objekto žymėjimas,
kuri iš esmės yra transportas formatas
duomenų siuntimo paprastai per tinklą
tarp kliento ir serverio, jums reikia prisiminti,
kad tai nėra iš tikrųjų galioja JSON ir tai yra viena
Šių FYIs nebent kada nors sprogimo savo galvą į sieną
keletą minučių nieko gero priežastis, tai negalioja JSON
nes raktai faktiškai nėra kotiruojamos.
JSON idiotically reikalauja, kad raktai kotiruojamos ne tik,
bet kad jie būtų dvigubai, remiamasi apostrofai nepakanka.
Taigi, kvailas mažai ką ir daugiau įdomus tuo,
šiandienos tikslais, bet tai per galiotų Javaskriptą
tai tiesiog nėra - Tačiau yra ne tiesa.
Gerai.
Taigi, mes pamatysime daug daugiau, kad.
Gerai.
Taigi, tai "JavaScript" sintaksiškai tikriausiai gana
susipažinęs, bet iš jūsų, kurie niekada nesinaudojo JavaScript prieš
tai ne didžiulis šuolis nuo PHP arba dauguma procesinis kalba
kad jums gali tekti naudoti.
Taigi, šiandien mes sutelkti dėmesį į įdomūs aspektus
JavaScript ypač į be JS kontekste
bet ne vien dėl to, iki dabar jūs tikriausiai,
jei naudojamas Javascript, naudoti jį viduje naršyklėje.
Taigi, ne JS yra aplinka tada šiek tiek vyksta
leisti mums pasiekti JavaScript kodas klientė -
serverio pusėje, tačiau pirmiausia, Paimkime pažvelgti
ne kažką, kad šiek tiek daugiau kliento pusėje.
Taigi, aš jau dingo ir tai yra sujungti, remiantis kursai svetainėje,
jei norite žaisti kartu, yra du pakatalogį
šiandienos Zip paragino kodo smeigės zip svetainėje
ir tai tik Keletas pavyzdžių Prisimena
dalykų, kuriuos galėjo matyti prieš ir aš tarsi pastatė juos
iki nuo paprasčiausių iki šiek tiek sudėtingiau erzinti
kai kurias funkcijas JavaScript.
Taigi, eikime į priekį ir imtis ieškoti Pavyzdžiui tai.
Taigi, deja, Blink tegus buvo išžudė prieš keletą metų
kaip būdas turime gražiau ir gražiau
ir Blink tegus buvo tiesiog skliaustai atidaromi Blink skliaustai uždaromi
ir ji tarsi ne jau pas mus.
Bet mes vis dar galime prikelti ši žyma idėja tiesiog natūra
galvoti apie tai logiškai, kaip tu
apie tai kažką panašaus tai mirksėti intuityviai?
Darant prielaidą, kad jūs žinote, mažai bitų JavaScript ir CSS arba
šiuo metu, tai Gerai, jei jūs neturite.
>> Nustatykite laiką, ir slėpti tai tada po aš jį pažymėti
, ir vėl parodyti.
>> Taip, puikus.
Tai tarsi programavimas 101,
kaip jūs pasiekti vizualinis efektas, kaip tai?
Na, jūs kažkaip turi parodyti kažką
ir tada kažką nuslėpti, šou kažkas, kažką nuslėpti
ir kaip Jonathanas siūlo naudojant tam tikrą laiką iš natūra,
kai grafiką rūšies jūs galite padaryti tai pakartotinai nereikia
naudoti kilpa arba kažkas panašaus.
Taigi, leiskite man eiti į Blink-0.html
ir leiskite man trauktis šrifto truputį
kad daugiau tai tinka.
Ir tegul pažvelgti ne tai, kas vyksta čia.
Taigi, visų pirma, pastebėti, kad kūno
Šio puslapio yra super paprasta, kūno viduje
Į puslapio tiesiog div.
Aš savavališkai skiriamas sveikinimo ID
ir kad galėtų būti kas nors tol, kol jis unikalus
ir tada aš tiesiog kai paprastas tekstas, hello world.
Taigi, jei aš dabar slinkite aukštyn, pastebėsite, pūkuotas stilius.
Taigi, sakau, aštrus pasisveikinimas, kuri, kaip žinote,
CSS tiesiog reiškia unikaliai nustatyti elementą
su sveikinimo idėja,
šrifto dydis vyksta savavališkai būti tai, marža ir teksto lygiavimas.
Taigi, neįdomu estetinės detalės
iki maždaug centruoti tekstą.
Taigi, įdomu yra tai, scenarijų žymės čia
kurį aš atsitikti įdėti viduje iš puslapio galvos.
Taigi, we'll - galite padaryti tai jokiu būdų
ir mes pamatyti kelias iteracijų tą pačią programą
tačiau pradėkime nuo viršaus.
Taigi, aš pareiškė, funkcija vadinama mirktelėjimas
ir, matyt, ji naudoja tai built-in DOM metodą, vadinamą
getElementById kuris galbūt vienas iš galingesnių metodų
kad jūs gaunate iš dėžutės su JavaScript ieškote
"Sveikinimo" neturi būti dvigubų kabučių, kaip jis buvo
HTML yra arba yra gerai tol, kol
kaip jums stilistiškai atitinka šių dienų drįstu pasakyti
daugelis žmonių naudoja "Java", apostrofai JavaScript,
kabutes HTML, tačiau tai tikrai ne klausimas,
taip ilgai, kaip jūs esate nuoseklūs.
Taigi, čia, jei nesate susipažinę, jūs iš tikrųjų galite pasiekti
su JavaScript CSS Skelbti apie elementų.
Taigi, atkreipkite dėmesį, kad aš paskelbė kintamasis vadinamas div
ir saugomas vidinis Šio kintamojo,
nuoroda kokia kad DOM elementas.
Taigi, jei manote, kad atgal į CS50 arba bet kurios klasės, kurioje jūs manėte
apie medžio konstrukcijų ir DOM, Document Object Model,
tai tiesiog nuoroda į medyje mazgas,
, kuri atstovauja šį puslapį
ir jei div.style.visibility turtas lygu lygu lygu
paslėptas, tada aš tiesiog norite perjungti jį
kaip siūloma Jonathanas kitaip aš noriu
perjungti jį į paslėptas.
Dabar, kaip ir į šoną, kodėl trigubas Lygu ten?
Ar kas yra, kad, palyginti su dviviečiai lygu?
Griežtai >> ekvivalentas.
>> Atsiprašau.
Griežtai >> ekvivalentas.
Taigi, tai yra asmens tapatybės operatoriams
atvejus, kai jūs patikrinti ne tik kintamojo vertė
kaip vienodo, vienodo prasme bet ir jo tipas.
Taigi, nors mes ne tai kas nurodyta jokių duomenų
tipai jokių kintamųjų tai ar skaidres,
yra susijęs tipas su ta eilutė paslėpti
su ta verte, paslėptas ir Tai, žinoma, seka.
Taigi, šiuo atveju, tai tikrai ne klausimas,
nes nėra taip, kad mes ketiname sieja eilutę
iš "paslėptas" su kai kurios kitos vertė
tačiau tai dažnai geras įprotis sakyčiau gauti
naudodami vienodi, lygūs,
Lygybės ženklas paprastai yra geras dalykas.
Tai bus Jūsų kodas labiau patikimas ir PHP, bet
ir JavaScript nes jums paleisti
į retsykiais kampinių atvejais kai vertė gali būti nulis
kad jūs tikrinant ir nulis gali būti supainiojo su klaidinga
ar gali būti, ir kaip PHP,
Javascript taip pat gali turėti keletą Apgaulingas vertės, jeigu iš nulio
ir neteisinga ir niekine ir neapibrėžta visi gali išspręsti netiesiogiai
false.
Bet jei jūs tikrai nori patikrinti ypač vertingos
kaip nulis, skaičius arba klaidinga Bulio tada jūs turite
naudoti šią tapatybės operatorių.
Taigi, tai gali įvykti gauti į vistiek nors čia
tai tarsi beprasmis nes mes žinome, ko tikrinti
styginių vertę ir tai nesiruošia būti kas nors kitas.
Taigi, čia magija tada, jei aš pereikite prie šios linijos čia
matyt, pastatytas į lango objekto
ir tai yra požymis naršyklė, galite prieiti prie
tai super pasaulio objektas, vadinamas Langų,
viduje, kuri yra kai kurios funkcijos,
jei gabalas, kuris nustatytas intervalas
ir tai trunka matyt kokios argumentų?
Taip.
>> Skambinimo funkcijos ir laikas.
>> Gerai. Taigi, funkcija skambinti ir laikas
ir ypač nuoroda į funkciją,
rodyklę į funkciją tam tikra prasme
ir tai funkcija kad vyksta
gauti vykdomi kiekvieną numerį milisekundžių, ir šiuo atveju,
tai kas 500 milisekundžių.
Taigi, tai indukuoti būdas veiksmingai ir begalinis ciklas
nenaudojant iteracijos bet o sakau JavaScript
viešai neatskleistos variklio naršyklę
daryti tai kiekvieną 500 milisekundžių arba yra netoli
500 milisekundžių, nes ji gali,
paaiškėja, kad po gaubtu,
ten kas vadinama įvykis kilpa, ir mes grįžti prie šio
į limfmazgius JS kontekste kad tiesiog nuolat tipo
sėdi ten, verpimo, laukia nuveikti
ir kuo greičiau tai suprasti,
500 milisekundžių praėjo Blink gaus paragino vėl
ir vėl, ir vėl yra šalia kitų darbų
kad reikia gauti padaryti.
Taigi, ką mes galime pagerinti čia?
Na, leiskite man atidaryti iki Blink-1.html
ir parodyti Blink-1.html
estetiškai puikiai identiški.
Taigi, ką mes galėtume pagerinti čia?
Na, pastebėsite, kad ji buvo natūra nenaudingas
apibrėžti funkciją, vadinamą Blink nes kiek
kiek daug vietos o aš skambinti funkcija mirksi?
>> Tiesiog vieną kartą.
>> Taigi, vienas.
Taigi, tai buvo neblogai, kad tai jis tikriausiai gana
tiesiai į priekį.
Aš apibrėžti funkciją mirksi, aš skambinti funkcija blink būdu
Šio parametro, bet techniškai,
nebuvo priežastis tai ir bendra paradigma
JavaScript yra faktiškai pasinaudoti Lambda funkcijų
kaip jums gali prisiminti iš 51 arba anonimines funkcijos
kur, jei jums nereikia už funkcijos pavadinimas,
jei jūs tik pavadino jį tikrai vienoje vietoje,
kodėl nerimauti užkimšti savo kodą, cluttering programuotojų protą
ir jūsų vardas erdvė tikrai su simboliais
kad jūs tikrai reikia rūpintis.
Ir taip, šioje versijoje čia,
pastebėsite, kad aš skambinti window.SetInterval tiesiogiai
ne pačiame viršuje mano scenarijų tegus tada aš artimųjų
ir bevardis funkcija kad nesiima jokių argumentų
ir tai puikiai bauda ir tada kūnas
tos funkcijos atrodo yra identiška tam, kas buvo anksčiau
ir tik sintaksinė skirtumas dabar yra
žemyn čia šalia 500.
Aš uždarymo kūną iš funkcijos
ir tada aš sakau vykdyti šią ankstesnę kodą
kas 500 milisekundžių.
Taigi, labai nežymus pokytis
bet į tai, kas žingsnis tikriausiai labiau elegantiškas
įgyvendinti tai.
Taigi, paimkime šį vieną žingsnis toliau, jei aš dabar eiti
į Blink du, jums pamatyti bendrą biblioteką,
kurių poveikis vyksta
būtų visiškai nelogiškas estetiškai, bet jei mes einame
į versiją dviejų čia pranešimas kad mano galvos viršaus
Aš įtrauktas Naujausia versija JQuery.
Ir tada, žemyn čia Aš tiesiog valyti
iki kodas šiek tiek, tai nesiruošia būti įdomus pasaulis
toliau naudotis gimtoji DOM funkcijas
ir rūšiuoti žaliavinio JavaScript.
Tiesą sakant, JQuery, kaip jūs gali žinau tapo toks populiarus
kad dauguma žmonių tiesiog konfliktas jQuery JavaScript
bet tikrai tik vakarienė naudinga biblioteka parašyta
pagal kolegos pavadino Jonas Resig ir nuo kitų
kad ką tik daro daug varginančių dalykų
JavaScript lengviau ir daugiau glausta.
Taigi, šiuo atveju čia kas vyksta?
Taigi, turiu šią išvaizdą dolerio ženklas, daugiau apie tai
vos akimirką, tada tai CSS selektorius.
Taigi, tai labai panašus dvasia, ką aš padariau anksčiau,
bet šį kartą, aš tiesiog naudojant maišos tegus
nurodyti unikalus identifikatorius vadinamas sveikinimas
tada matyt . Css yra metodas pastatytas
į ką objektas yra tai, kad aš ką tik sukurtas
ir aš patikrinti vertę Informuotumo klavišą.
Ir jei to rakto lygu lygu lygu paslėptas,
tada aš ruošiuosi perjungti jį ir Aš ruošiuosi perjungti jį šį kartą
naudojant tą patį metodą, kuris, matyt, yra perkrautas
ta prasme, kad ji turi du skirtingi parašai,
vienas su vienu argumentu ir vienas su dviem argumentais,
kurių antrasis yra seteris,
buvęs kuri yra karjeristas taip sakant.
Ir jei smalsu ir, jei norite niekada iš tikrųjų pažvelgė į tai,
jei mes einame į jquery.css tikiuosi top hitas iš tiesų tai
ir jūs galite pamatyti daugiau formalus paaiškinimas
kad mes tiesiog naudoti tai, . Css su turto pavadinimas
ir tada seteris yra taškas CSS
su objekto pavadinimu ir vertė.
Taigi, šiek tiek švaresnis, tačiau pastebėsite, modelis rūšiuoti čia
su kiekvienos iteracijos Šio kodekso,
mes tarsi todėl griežtesnė ir griežtesnė ir griežtesnė
ir ten sako, geriau dizainai
nes mes naudojame nors kito kodas, kuris manimi pašalinta
kai sudėtingumo.
Taigi, dabar galime padaryti tai dar paprasčiau.
Ir iš tiesų, jei aš pašalinti visus citatos matysite tik visi
komentarą, pamatysite, kaip paprastas tai turi Dotarłeś.
Vienas skirtumas čia, žinoma, yra
kad aš naudoju perjungti metodas, kuris taip pat yra pastatytas
į JQuery ir tai tik
nes kažkas parašė kodą
kad iš tikrųjų perjungia matomumas nustatymas
bet DOM elemento kad jūs jį išsiųsti.
Taigi, geriau ir geriau.
Ir taip, tai yra modelis,
nors tai vakarienė Paprastas pavyzdys ir rūšiuoti
kvailas grynąjį poveikį, kuris yra mirksi teksto fragmentą,
tai, kad minties natūra procesas, kad jums reikia galvoti -
galvoti apie ne nebūtinai pirmųjų
pasyvus rašymas kažkas vyksiančio projekto
bet tikrai, kaip jūs keistumėte su savo patarėju ar su manimi
ir jūsų komandos susirinkimai arba jūs tiesiog peržiūrėti savo komandos kodą
apie sugriežtinti things up, tiesa?
Galų gale, jie mažiau -
a mažiau eilučių kodo jūs galų gale turi
teoriškai mažiau klaidų jums gali būti pakviesti
nes yra tiesiog mažiau kodas bałagan su.
Gerai.
Taigi, iš takeaways pora.
Lambda funkcijų, anoniminės funkcijos,
daugelis iš kurių jūs matęs
ir tada taip pat tik griežtinant things up su bibliotekoje
kaip JQuery šiame konkrečiu atveju.
Gerai.
Turite klausimų?
Darom vienas kitą kliento pusėje aspektas čia
forma nulio turime tai grynasis poveikis.
Super paprasta forma ir, matyt, jei aš spaudžiu registruotis čia
iš pradžių ji man sako, jūs esate registruotas, gerai, tikrai ne.
Na, kodėl tai, kad?
Na, čia forma-0.html labai mažai kodas,
ne Javaskriptą kokia ir tai visiškai netikras rūšiuoti
formos, nes veiksmų vertė yra registered.html
o tai reiškia, nesvarbu, kokia Aš tipo į šią formą,
kur jis ketina bus siunčiamas į serverį?
Taip. Taigi, registered.html kuri yra aiškiai HTML failą
Taigi ši bendrovė yra statinis failas, kuris neturi priemonių
imtis naudotojo įvesties darant prielaidą, nėra Javaskriptą kodas
įterptas tai žiūri į URL
todėl tai yra visiškai noop ir kad nieko nutiks
su pateiktais duomenimis, bet jūs galite pamatyti struktūrą
iš gana paprasta HTML5 formos
kad turi keletą slaptažodį keletą įvesties tipai.
Taigi, galime iš tikrųjų dabar pridėti šiek tiek klaidų tikrinimas
ir pamatyti, kaip mes galime tai pagerinti.
Taigi, čia yra tarsi prastas Žmogaus būdas įgyvendinti tai
ir tai tarsi bjaurus gabalas kodą.
Taigi, pirma tegul slinkties žemyn į dugną
pamatyti, kas pats ir kas skiriasi.
Vienintelis dalykas, skiriasi dabar tarp šios
ir ankstesnės versijos yra kad aš davė formą ir ID
iš "registracija" gali buvo ką noriu
bet jos reiškia būti unikaliai identifikuoti net tai ne
būtinai reikia, nes jei puslapis turi tik vieną formą, be abejo, aš
gali rasti jį su viena iš JQuery yra selektorių metodai.
Tačiau šis būdas tiesiog daro tai daugiau determinuota.
Taigi, jei aš einu dabar į savo scenarijų tag pastebite tokius dalykus,
window.onload lygu anoniminis funkcija.
Taigi, kas tai daro?
Taigi, jūs galite prisiminti, kad client-side programavimo -
JavaScript o HTML puslapius buvo įvairūs renginiai susiję
su elementais, paspaudę ir pateikti ir sutelkiant
ir nyksta ir kitų tokių įvykius, kurie gali įvykti
kaip vartotojui paprastai sąveikauja su puslapio
window.onload ką ji sako.
"Windows visai apkrovai
taigi, kai visi vaizdai buvo atsisiųsti, kai visi failai
buvo atsiųstas ir, kai puslapis buvo pakrautas,
padaryti šį kodą ir pranešimas, jei aš pereiti į apačioje
Šio metodo, pastebėsite, kad nėra skliaustelis
po garbanotas petnešomis Tai reiškia:
kad aš ne vykdyti ši funkcija čia dabar,
naršyklė ketina vykdyti jis man, kai ji nustatoma
kad puslapis buvo įkeltas.
Taigi, pažiūrėkime, ką mes padarėme,
document.getElementById registracija
kad tik duoda man nuoroda į mazgą
į medį, kad yra iš turi registracijos vardą.
Ir dabar, aš ruošiuosi užregistruoti kitą renginį prižiūrėtojas
atlikdami form.onsubmit gauna tai anoniminis funkcija
o tai reiškia, kad šiuos kodas turėtų vykdyti kai
kad forma yra pateikta.
Dabar, dauguma tai tik rūšiuoti nuobodu logika.
Taigi, jei vertė siųsti laukas forma
"Nieko", tada jūs turite pateikti savo elektroninio pašto adresą,
jūs klykauti ne vartotojui įspėti ir tada grįžti klaidinga.
Ir tada aš turiu krūva kitus patikrinimus,
Už slaptažodis patikrinimus,
patikrinimus, jei slaptažodžiai yra vienodi,
patikrinimai, jei susitarimas žymės langelis yra tikrinama, ar ne
ir aš tiesiog klykauti vartotojas, jei bet
šių bandymų tikrai nepavyks.
Ir taip, čia yra pavyzdys net Nors tai šiek tiek nenatūralu
čia faktas, kad aš naudoju lygu lygu lygu
reiškia, kad vartotojas negali bandyti apgauti mane
įvesdami kas vertė.
Arba, o aš tikrai tikrinti buvimo
tuščios eilutės, vartotojas dar įvedėte nieko.
Jei vartotojas turi įvesti pažodžiui nulio,
"Nulis", galėtų būti painioti su tuščia eilutė.
Ir aš sakau, tai tarsi iš prasmės čia
nes akivaizdu, galbūt net lygus nuliui nėra el.pašto adresas.
Bet jei tai buvo daugiau bendras laukas, kaip teksto srityje
ar pavadinimas arba aprašymas arba ką jūs norite vertė
ir tai nebūtinai sintaksiškai turi
būti elektroninio pašto adresas, vartotojo gali įvesti kažką panašaus nulio
ir vėl kampe atvejis, bet tai kodėl paprastai patikrinti rūšis yra
naudingas dalykas.
Jūs tikrai tikrinti vartotojo įvedate nieko
į šioje srityje.
Taigi, kas atsitinka, jei nė iš tie testai nepavyksta, gerai,
grįžti tiesa viduje iš įvykių apdorojimo
kaip onsubmit tiesiog reiškia nuomojamame originalus elgesys iš tikrųjų
propaguoti ir todėl forma bus gauti pateikimo.
Ir štai kodėl, kai aš pagaliau paspaudėte pateikti prieš aš
iki register.html ir jei aš tai padaryti dabar, pranešimas,
Man sušuko jei aš ne elektroninio pašto adresą
ir aš galiu įvesti malan@harvard.edu,
tamsiai raudonos spalvos [fonetinė] tamsiai raudona, pažymėkite langelį,
ir dabar registruoti ir jis man sako, vėlgi,
esate užsiregistravęs ar tikrai ne.
Gerai.
Taigi, galime valyti tai padaryti tik šiek tiek ir tada perėjimas
į naują naujesni serverio pusėje dalykų.
Taigi, jei aš einu į formos-2.html, pastebėti keletą dalykų.
Taigi, vienas, aš atnešė JQuery atgal į mišinį
todėl vėl yra tai dolerio ženklas
o dabar aš naudoju kai jQuery metodai.
Taigi, pirmiausia, kas tai yra apie dolerio ženklas tai
toks ypatingas čia?
Kas yra dolerio ženklas dorovinio per labiausiai bet JQuery kodą?
Taip.
[Negirdima Pastaba]
Gerai. Taigi, dolerio ženklas funkcija eina per DOM ieškote
nors su tai pirma CSS selektorius.
Taigi, tiesa, bet beveik taip pat tikslūs.
Tai yra tai, kas vyksta kai pereisite į eilutę
kaip šiuo atveju, tačiau jūs neturite visada turi praeiti eilutę.
Tiesą sakant, byla, metu, labai Pirmoji eilutė čia yra tai ne
CSS selektorių, aš perduoti į Lambda funkcija.
Taigi, apskritai - taigi, geras atsakymas, bet ne per daug tikslus.
Apskritai, kas yra dolerio ženklas reiškia?
>> Tiesiog JQuery.
>> Taip. Taigi, tiesiog JQuery ar tai tik funkcija
kad prieš keletą metų vaikinas rašė ir kiti žmonės
nes tvirčiau, kad tiesiog pagal nutylėjimą yra vadinama -
Oi, vadinamas JQuery.
Tai tiesiog - paaiškėja iš skirtingai daug
kalbų dolerio ženklas yra puikiai galioja simbolis naudoti
Kintamųjų vardo kadangi
PHP dolerio ženklas akivaizdžiai turi ypatingą reikšmę
bet "JavaScript", kaip ir kai kalbos, dolerio ženklas
ir pabrėžti ir kitų tokių specialūs simboliai visiškai teisėtas
naudoti savo simbolio pavadinimai kintamųjų.
Taigi, kažkas tiesiog nusprendė kad, žinote, ką?
Tai bus gana nuobodus
padaryti visą pasaulį įveskite jQuery visą laiką,
leiskite man tarsi augalų akcijų į žemę ir sako:
"Ši biblioteka naudoti dolerio ženklą. "
Ir iš tiesų, tai neturi kelti pavojaus
kad kažkas įžūliai ketina naudoti dolerio ženklas
už savo biblioteką, bet ten būdų tarsi apdrausti
kad kai jūs naudojate dolerį pasirašyti tai žemėlapiai JQuery
nes galite patikrinti, jei jis jau buvo suteiktas
kad kažkas iš esmės.
Gerai.
Taigi, kad viskas, kad yra, nėra jokios magijos.
Tai tiesiog seksualus ieškote gabalas sintaksę, kad yra gražus
ir greitai ir lengvai rašyti.
Taigi, kas atsitinka, kai jūs įveskite doleris prisijungti atviras paren
ir tada anoniminis funkcija.
Na, paaiškėja, kad tai yra iš tikrųjų trumpa žymėjimas
Dokumentų tašku paruoštas atviras skliaustas.
Taigi, kaip Cynthia pastebėjau Anksčiau mes jau rado vienas
kampas atveju.
Jei tiesiog praeiti lambda funkcija,
dolerio poveikis ženklas yra šiek tiek kitoks.
Tiesą sakant, tai, kas iš tikrųjų vyksta yra tai, kad atitinka tai,
einančios nuoroda į Pasaulinė dokumentas objektas
kad yra pasaulio kaip langas objektas
kad suteikia jums keletą specialios funkcijos
kuri paveikia visą puslapį arba naršyklė ir paaiškėja
iš šio dokumento, kai jums wrap jį su JQuery,
JQuery esmės supranta, oh, tai nuoroda
tą ypatingą dokumento objektas,
leiskite man dabar registruotis renginys prižiūrėtojas vadinamas pasirengę
kuri nėra gimtoji JavaScript arba DOM susiję.
Pasirengę yra JQuery dalykas, kad sako
kai puslapis buvo įkeltas visi HTML elementai
bet nebūtinai pakrautas, visi CSS ir vaizdus
ir JavaScript failus ir flash failus ir pan.
Taigi, tai, kol žingsnis nuo apkrovos tada eiti į priekį
ir vykdyti šiuos veiksmus.
Ir naudojant ant pasirengusi aukštyn reiškia, kad jūs galite, jūs žinote,
kad visi elementai Jūsų DOM,
visi unikaliai identifikuojamos ką su ID, jie egzistuoja, net
jei puslapis, jos turinys vis dar pakrovimo ir pakrovimo
ir jūs turite kai skaldytų piktogramas akimirką
arba baltas puslapis fone.
Taip.
>> Kas nutiktų jei [nesigirdi]?
>> Puikus pavyzdys, puikus klausimas.
Taigi, galime pamatyti, jei mes galime imituoti tai dabar.
Taigi, leiskite man eiti į priekį ir ištrinti šios dvi linijos iki čia ir tada
be grisus nustatyti įdubimas, leiskite man eiti į priekį
ir tai ištrinti žemyn čia - Oi, tai vienas čia.
O dabar leiskite pereiti prie puslapis, eikite į formos-2.html ir tipo
Registruotis nieko atrodė atsitikti, tarkim, kodėl buvo ta, kad
eikime į priekį ir atidaryti iki Chrome "inspektorius,
atverti konsolę tik pamatyti jei kas nors atsitiks čia, dabar,
registruoti, vis dar nieko.
Taigi, kodas yra sintaksiškai bauda
todėl aš nematau jokių raudona klaidos pranešimus,
tačiau tai, ką aiškiai nevyksta?
Nė vienas iš mano kodas yra teisinga, ji neveikia taip, nė vienas
mano kodai atrodo vykdyti, tai kodėl gi tai yra?
Na, "JavaScript" ir naršyklės plačiau vykdyti
turinys tinklalapį, viršuje į apačią, iš kairės į dešinę.
Ir problema yra kad dėl top
Šio puslapio yra HTML tada galvą tada scenarijus tada kitas scenarijus,
tai ketina gauti įvykdytas prieš kas dar pasiruošęs,
ar net egzistuoja medis atstovavimas puslapyje.
Pati forma, net kūnas egzistuoja šiuo metu.
Taigi, JQuery yra pakankamai protingas, Su juo klaidų tikrinimas
kad jei nėra elementas su unikalus ID, registravimo,
jis nesiruošia gelbėti jus
ir tik skatina kai konsolės klaidų ir nutraukti visą puslapį,
tai vyksta tyliai ignoruoti jūs, bet todėl, kad nė vienas
Šio kodekso kada atlieka yra
nes, kai jūs turite registruotų pateikti prižiūrėtojas,
nebuvo elementas pridėti jį.
Taigi, tai tarsi ne op ten.
Taigi, nurodant vietoj to, laukti, kol amžius pakrautas
jei mes padarėme window.onload dalykas, kuris yra tarsi
senosios mokyklos būdas tai padaryti tai ar seksualesnis JQuery būdas
kaip tai, ką galime pasakyti, kad laukti, kol visi
Šių HTML žymes turėti buvo apdoroti taip, kad net
jei vaizdai buvo neįkelta, ne jau tai, kad mazgas yra medžio,
tada JQuery galima užtikrinti kad viskas yra ten.
Taip.
[Negirdima Pastaba]
Taip, gerai, taip absoliučiai.
Taigi, kitas sprendimas tai, jei tu negali naudoti šį
arba nepamenu kad tai egzistavo,
galima visiškai perkelti visa tai į apačią
šiuo tinklalapiu, viduje kūnas vis dar, bet žemiau forma
ir kad būtų taip pat išspręsti šią problemą.
Tai tiesiog paprastai laikoma bloga praktika.
Tai tiek nepatogus ir aplaistytas specialiai
jei norite išsaugoti trukdymo viską į puslapio apačią
ypač kai aš išlaikyti viskas paprasta įgyvendinant visas
mano kodas viduje HTML puslapio
kai, žinoma, jūs galite tikrai gauti į įpročiai
faktoringo jį į atskirą failą
nuo tada jis tiesiog gražus
centralizuoti failus į galvą.
Išskyrus yra kaina, kurią mokate
įgyvendinant JavaScript dar kaip CSS failus turtas
į puslapio galvos, kas rizika, kad jūs naudojate?
>> Lėtesnis puslapio įkėlimas.
>> Lėtesnis puslapio įkėlimas, kodėl?
>> Kadangi mes bandome įkelti visas bibliotekas
iki [nesigirdi].
>> Būtent dėl ​​naršyklių skaityti kodą iš viršaus į apačią,
iš kairės į dešinę, jei "Google" analizė yra lėtas
arba JQuery CDN lėtai arba "Facebook API lėtai
ir kad failas tiesiog kabo potencialiai priklausomai
kaip įdėjote šį failą, visas puslapis gali pasirodyti pakabinti.
Ir jei matote, tai daug atvirai
svetainėse jie turi daug žemos kokybės skelbimai
ant jų, mes tiesiog vienas lėtas ar sudėjo svetainė gali pakabinti puslapį
kai neterminuota sekundžių skaičius
kol galiausiai naršyklė tikiuosi kartus iš apie tai
ir tada rodo, likusi puslapio dalis.
Taigi, jei jūs kada nors naudojami kaip "Facebook", kaip ir mygtuko
į savo tinklalapį, leiskite man pamatyti, jei aš galiu rasti šį
nereikia prisijungti čia.
Taigi, jei jūs einate į "Facebook" kaip mygtukas
ir spustelėkite gauti kodą, damn it,
leidžia pamatyti, jei mes galime rasti pavyzdį,
tikrai kažkas parašė šią.
[Pauzė]
Aš pasiduoti kelias sekundžių, jei mes negalime pamatyti.
"Facebook" asynch - Gerai.
Taigi, tai yra kodas, ir jeigu jie pakeitė jį neseniai
kad "Facebook" iš tikrųjų rekomenduoja, kad jūs naudojate
įkelti savo biblioteką ir iš tikrųjų pasiūlyti
kad jūs įdėti šią nuorodą į Jūsų turinys.
Taigi, "Facebook" jums pataria sukurti kvailas DIV rūšiuoti
kad tiesiog turi unikalų ID, kaip tai, tada scenarijaus žymą
ir visi tokio sudėtingumo iš esmės nėra toks
ir jie neturi naudoti bet JQuery nes jie nenori
prisiimti bet kokią kitą priklausomybės,
leiskite man perkelti jį per tik šiek tiek.
Taigi, atkreipkite dėmesį, jie turi anoniminis funkcija čia
daugiau, kad tik akimirką,
tada jie naudoja document.createElement,
jie sukurti DOM elementas, tai kaip malloc taip sakant
kur žymė yra tipo scenarijus, tai tada nurodant
kad asinchroninis atributas tos žymės vyksta
kad būtų tiesa, tada jūs einate į priekį ir išsiaiškinti, kas URL
iš "Facebook" JavaScript " turėtų būti
ir tai tik išgalvotas būdas
testavimosi turėtų tai būtų HGP arba HDPS.
Ir galiausiai, jūs pastebėsite, ką "Facebook" daro,
jie gauna DOM mazgas, kad turi "Facebook šaknies ID
o tai, ką jie pasakė, jūs įdėti į puslapį
ir tada jie pridėti vaiką todėl visas šis poveikis yra
rūšiuoti dinamiškai švirkšti naujas scenarijus tegus į savo puslapį
kaip DIV vaikui, kad jūs yra įterptas taip, kad likusi
Į puslapio krovinį laimingai
ir tai iš tiesų kodas gauna pakraunami asinchroniškai.
Taigi, iš esmės po to, kai tai ir aš atidėtas paminėjimas
anoniminių funkcija,
kas tai yra madingas sintaksė nuoroda čia
kai turiu ne tik funkciją atidaryti paren, glaudžius paren
ir tada garbanotas petnešos, kodėl atviros paren čia
ir tada atidaryti arti, arti ten skliaustas, kas tai daro?
>> [Negirdima] apibrėžti ir tada vykdyti?
>> Būtent, tai nustatant funkcija, kuri yra anoniminė
bet tik apibrėžti funkciją,
Žinoma nevykdo funkcija, kol jūs ją vadina
pagal pavadinimą, bet, žinoma, tai yra anoniminis Function
todėl jūs negalite jį vadiname pagal pavadinimą, bet jūs galite
JavaScript vykdyti anoniminis funkcija tik
iki sandarinimo visa tai skliaustuose, kaip mes padarėme
su šio skliaustelius ir tai paren čia ir tada tvirtinimo
į funkciją pabaigos atviros skliaustas, artimi skliaustas,
jei nenorite perduoti jai jokių argumentų.
Bet tai atrodo rūšies kvailas,
kaip, kodėl ši papildoma sintaksinė sudėtingumas
kad dauguma žmonių neatrodė pripažinti, kas vertė
vyniojimo tie tris eilutes kodo
anonimine funkcija šiuo būdu.
Taip.
>> Kad perrašyti vertinga [nesigirdi].
>> Būtent, kad būtų išvengta perrašyti kintamąjį
į esamą puslapį, tiesa?
"Facebook" yra šiek tiek įžūliai nusprendė,
jie ketina naudoti kintamasis E, tai visai tikėtina,
kad jūs ar kas nors naudojate kaip mygtuką "Facebook"
ar kokia kita socialinė kištukas
ir turi kintamąjį kažkur vadinamas E. Taigi,
iki sandarinimo visi savo kodą viduje
Šio anonimiškai funkcijas, jie iš esmės turi savo taikymo sritį
kad nėra rizikos clobbering visi turimi kintamieji.
Taigi, tai taip pat yra iš tikrųjų labai dažni paradigma,
ypač kai raštu biblioteka kodas
arba kai pats ne norite griozdai savo vardą erdvę
su kitais kintamaisiais jums noriu vertė gyventi
ir mirti, kai jūs išeiti kad kodo blokas,
tai yra gražus būdas JavaScript.
Gerai.
Taigi, tada atgal į šiame pavyzdyje čia visi mes padarėme pabaigoje
su šiame pavyzdyje yra tiesiog išvalyti kodą.
Taigi, ji vis dar turiu vieną visumą krūva jungikliai, visa krūva
sąlygų čia, bet pastebėsite sintaksė šiek tiek,
tai pasiekia DOM mazgas su unikalus ID, registracinės,
kosmoso priemonė atrodo dabar tos mazgas palikuonis,
rasti, jei ji tipo įvesties ir tada net
jei jūs dar nematėte tai prieš žinote
kad tai tiesiog reiškia rasti ji susijusi su įėjimo žymės,
įvesties elementų, kurie turi atributas pavadinimas, kurio vertė
iš elektroninio pašto adresą, ir tada tegul man banga ranką į kai
likusiųjų nėra viskas, skatinanti
bet tikrai tik JQuery sintaksė dėl tų pačių operacijų.
Gerai.
Bet kas ne taip svarbu čia yra naršyklė pusė dalykų
bet faktas, kad mes buvo švaresnis ir švaresnis būdus
faktiškai priėmimo kad kodas darbas.
Gerai.
Turite klausimų?
[Negirdima Pastaba]
Gerai. Dabar Pramogos dalis.
Taigi, node.js Kodėl?
Who cares?
Ką žinote apie jį šiandien?
Node.js, kodėl?
Henris [prielaida rašybą].
[Negirdima Pastaba]
Baterijos naujo?
Kas - tai puikus uolos rūbams
už antrąją pusę šiandien.
Kodėl mes eiti ir imtis 5 minučių pertrauka čia
ten pusė saldainiai mašina ten, jei būtų
kaip kai kurie be saldainių išleisti ketvirtį in