>> Selvä.
Niin, JavaScript.
Lähes jokainen tässä huoneessa luultavasti on jonkin verran
mukavuutta sen kanssa, onko se oli paluumatkalla kun SC50
tai se on ollut henkilökohtaisia web hankkeita tai jopa
jos et hieman sen viime PHP perusprojekti,
mutta suurimmaksi osa, monet teistä,
vaikka sinulla on mukavuutta
JavaScript ehkä ei ole otettu
itsestäänselvyytenä, miten kieli toimii ja mitä tapahtuu
on alla huppu ja mitä aiomme kokeilla
tehdä tänään on kuori takaisin joitakin teknisiä kerrosten
mitä JavaScript on, miten se eroaa kieli
kuten PHP, miten voi olla käytetään paitsi asiakkaan puolella
mutta myös palvelimen puolella ja sitten keskittyä hyvin konkreettisesti
tässä yhteydessä huomaa mitään JS joka on lähinnä ajoaika,
ohjelma, jolla voit voi suorittaa JavaScript-koodia,
Palvelin puolella ja se on tulossa yhä suositumpi sort
ja samalla painoarvoa tämän päivän luultavasti Ruby ja PHP
ja Python ja näet
että sillä on joitakin melko tehokkaita ominaisuuksia tapa joidenkin
on sisäänrakennettu kielellä konstruktioita.
Mutta ensin joitakin helppoja kamaa vain muistuttaa teitä
miten tämä kieli toimii ja jos sinulla on vaikeuksia nähdä mitään
Tämän, vain huutaa ulos ja muutamme.
Niin, yksi kuten PHP siellä ei käsitettä päätehtävä,
olet vain alkaa kirjoittaa koodia
ja voit niitä tulkitsevat sen ylhäältä alas.
Yhteydessä selaimen
tai jotain palvelimen puolella tulemme näkemään joitain esimerkkejä
nyt vähän.
Olosuhteet, syntaktisesti vastaa PHP sekä C,
C + +, ja joillakin muilla kielillä niin vain antaa sinulle tunteen
miten voisimme jäsentämiseksi
siellä on vain kanoninen kunnossa.
Boolen operaattoreilla, täsmälleen sama rakenteeltaan kuin olet nähnyt
samoissa muiden kielet, sekä Oring
ja päättyy asioita yhdessä.
JavaScript on kytkimet, paljon kuin PHP ja muut Do
ja et ole rajoitettu, kuten C integraaleihin primitiivejä
kuten merkkiä ja ints voi todella tehdä muita arvoja.
Silmukoita. Niin, tämä on täsmälleen sama
ja luultavasti tusinaa kieltä, samalla silmukoita, tehdä samalla silmukoita
ja sitten tämä temppu täällä.
Niin, tämä on eräänlainen tunnetaan nopea luettelointi
ja se on erittäin näppärä tapa ja aivan kuten PHP tekee
kunkin FU palkkikaavioina voit samalla,
JavaScript-objekti, jos esine on nimi
muuttujan täällä vaikkapa var i olio ja jokaisen iteraation
Tämän silmukan, i on tulee olemaan yksi
ja avaimet objektia.
Joten, jos sinulla on objektin opiskelija, ja opiskelijan on tunnus
ja nimi ja talon, iteratiivisesti otan
arvon tunnus ja nimi ja talon ja voit niitä indeksi
objektikoodiksi kuin se on array hakasulkeen
merkintätapa saada arvoa keskeisistä tunnus tai nimi
tai talon ja niin edelleen.
Ja vastoin yhteisiä oletukseen, JavaScript esineet,
ominaisuudet eivät ole välttämättä taatusti
samassa järjestyksessä, tämä on myös totta PHP joten älä oleta
että asiat pysyvät samassa järjestyksessä
että laitat näiden keskeisten arvo-pareja esine.
Entä paneelit?
On pari tapaa kirjoittaa se syntaktisesti
mutta tämä on luultavasti yhteinen nyt vain käyttää neliö
kiinnike merkintätapaa.
Niin, tämä on muuttujan soittaa numeroihin, jotka sisältävät array
kuusi kokonaislukuja siellä, Tässä on yksinkertainen merkkijono
ja huomaa, mitä on poissa Näiden esimerkkien
Mikä on Javascript ilmeisesti puuttuu.
Joo. Joten, ei ole mitään käsitystä konekirjoitus, ei varmasti
Tässä yhteydessä täällä, mutta tämä on todellakin merkkijono.
Joten, JavaScript on tyypit ja se oli todellakin array
joka on itsessään eräänlainen ja kunkin elementin
että joukko oli tyyppiä numero JavaScript niitä kutsuu.
Niin, se on väljästi kirjoitettu kieli ja näemme
että JavaScript kuten PHP on identiteetti operaattorin
ja muita järjestelyitä itse tarkistaa mitä tyyppiä
Joidenkin muuttuja on sekä virheentarkistus
ja muihin sovelluksiin.
Ja tässä näyte objektin sisältävät vain tunnus ja nimi.
Ja nyt huomaa että olemme käyttäen kaarisulku merkitsemistavassa
sisennys ja valkoinen tila on tavallaan merkityksetön
ja tämä ilmoittaa muuttujaan, jonka nimi on Rob
ja jonka tunnus on 1 ja päivä tyyppi on täällä meidän numero
ja string vastaavasti.
Ja sitten tämä on jotain hieman erilaista
jos olet koskaan tehnyt mitään Ajax näinä päivinä?
Olet luultavasti käyttää esine näin
mutta mitä syytä huomata täällä?
Mikä on rakenteeltaan koskaan niin erilainen, vain pari
asioita välillä tässä esimerkissä joka on tosin pienempi
ja tämä suurempi esimerkki.
Joten, ensimmäinen maallikon aikavälillä, mikä tämä on?
Mikä on tyyppi Henkilökunta sanoisit?
OK, se on array, se on joukko mitä?
>> Objects.
>> OK, se on joukko esineitä.
Ja nyt keskittyä vain yhteen - Jonkin näistä esineistä,
mitä eri tämän ja tämän?
>> Avaimet ovat merkkijonoja.
>> Joo. Niin, avaimet ovat jouset,
ja näppäimet ovat todella jouset molemmissa tapauksissa
ja tämä on tavallaan typerä
mielestäni historiallinen design keskeyttämiseen jos käytät
JSON, JavaScript Object Notation,
, joka on olennaisesti siirtoformaatin
tietojen lähettämiseksi tyypillisesti verkon kautta
asiakkaan ja palvelimen välillä, sinun täytyy muistaa
, että tämä ei ole oikeastaan voimassa JSON ja tämä on yksi
Näiden FYIs ellet koskaan bang päätäsi seinään
useita minuutteja ilman hyvää Siksi se ei ole voimassa JSON
koska avaimet ovat ei oikeastaan ​​noteerata.
JSON idioottimaisesti edellyttää, että avaimia ei vain noteerata,
mutta että niitä kaksin verroin noteerata, puolilainausmerkkejä eivät riitä.
Joten, tyhmä pikku juttu ja enemmän hauska tosiasia
päivän tarkoituksiin, mutta tämä liian olisi voimassa JavaScript
se vain ei ole - Converse ei ole totta.
Selvä.
Joten näemme paljon lisää sitä.
Selvä.
Niin, että JavaScript syntaktisesti varmaan ihan
tuttu, joku teistä, jotka ovat koskaan käyttänyt JavaScript ennen
se ei ole valtava harppaus PHP tai eniten tahansa oikeudenkäyntikieli
että olet saattanut käyttää.
Joten tänään keskitymme mielenkiintoisia näkökohtia
JavaScript erityisesti yhteydessä ei JS
mutta ei yksinomaan siksi, asti olet todennäköisesti,
jos käytit Javascript, käyttänyt sitä sisällä selaimen.
Joten, ei JS on ympäristö sitten vähän on menossa
jotta voimme käyttää JavaScript-koodi client -
Palvelin puolella mutta ensin Katsotaanpa katsomaan
jotain, joka on hieman enemmän asiakkaan puolella.
Joten, olen mennyt ja tämä on linkitetään kurssit verkkosivuilla,
jos haluat pelata yhdessä, on kaksi alihakemistot
nykypäivän Zip on nimeltään lähde nastoja vetoketju sivustolla
ja nämä ovat vain Muutamia esimerkkejä reminiscing
asioita olet ehkä nähnyt ennen ja minä tavallaan rakennustöitä
ylös yksinkertaisin hieman monimutkaisempi tease
joitakin ominaisuuksia JavaScript.
Joten, nyt mennä eteenpäin ja ottaa etsiä esimerkiksi tätä.
Joten valitettavasti vilkkuvat tag oli tappoi useita vuosia sitten
sillä tavalla ovat saaneet kauniimpi ja kauniimpi
ja vilkkuvat tag oli kirjaimellisesti alkusulkumerkki vilkkua loppusulkumerkki
ja se tavallaan ei enää keskuudessamme.
Mutta, voimme silti herättää tämä ajatus tag juuri sellainen
ajatella sitä loogisesti, miten te sitten
noin tehdä jotain Tämän vilkkua intuitiivisesti?
Olettaen että tiedät hieman hiukan JavaScript ja tai CSS
tässä vaiheessa, se on OK, jos et.
>> Aseta aikalisä ja piilota se sitten kun minä merkitä sen
ulos ja näyttää sen uudelleen.
>> Joo, täydellinen.
Tämä on eräänlainen ohjelmointi 101,
miten voit saavuttaa visuaalinen vaikutus näin?
No, jotenkin täytyy näyttää jotain
ja sitten piilottaa jotain, näyttää jotain, piilottaa jotain
ja Jonathan ehdottaa jonkinlaista aikaa pois,
jonkinlaisen aikataulun voit tehdä tämä toistuvasti ilman
käyttää silmukka tai jotain sellaista.
Joten, anna minun mennä Blink-0.html
ja haluan kutistua fontti hieman
jotta entistä useammat tämä sopii.
Ja lähdetään katsomaan mitä täällä tapahtuu.
Niin, ensinnäkin, huomaa, että keho
Tämän sivun on super yksinkertainen, rungon sisältä
sivun on vain div.
Olen mielivaltaisesti antanut ID tervehdys
ja että voisi olla mitään niin kauan kuin se on ainutlaatuinen
ja sitten minulla on vain joitakin yksinkertaista tekstiä, hello world.
Joten, jos en nyt selaamalla ylöspäin, huomata joitakin pörröinen muotoilu.
Joten, sanon, terävä tervehdys, joka kuten tiedätte
CSS tarkoittaa vain yksilöllisesti tunnistaa elementin
idean tervehdys,
fonttikoko on menossa mielivaltaisesti olla näin, marginaali ja tekstiä tasata.
Joten, mielenkiinnoton esteettisiä yksityiskohtia
karkeasti keskittää tekstin.
Niin, mielenkiintoinen osa on komentosarjatunnus täällä
jonka sattumalta laittaa sisälle pään sivulla.
Joten, Laitamme - voit tehdä tämä monin tavoin
ja näemme muutamia toistojen tämän saman ohjelman
mutta aloitamme ylhäältä.
Joten, olen julistanut toiminto nimeltään vilkkuvat
ja ilmeisesti se käyttää tätä sisäänrakennettu DOM kutsuttua menetelmää
getElementById joka on ehkä yksi tehokkaampia menetelmiä
että saat kättelyssä JavaScript etsimässä
"Tervehdys" ei tarvitse olla lainausmerkkeihin kuin se oli
HTML on joko on hieno niin kauan
kuin olet tyylillisesti johdonmukainen näinä päivinä uskallan sanoa
monet ihmiset käyttävät Java, puolilainausmerkkejä JavaScript,
lainausmerkkeihin HTML, mutta se ei ole oikeastaan ​​väliä
kunhan olet johdonmukainen.
Niin, tässä jos et tunne, voit itse käyttää
JavaScript CSS ominaisuuksia elementtejä.
Niin huomaa, että olen julistettu muuttuja nimeltä div
ja varastoitu sisällä Kyseisen muuttujan
viittaus riippumatta että DOM-elementti on.
Joten, jos luulet takaisin CS50 tai minkään luokan, jossa luulit
noin puurakenteita ja DOM, Document Object Model,
tämä on vain viittaus solmuun puussa,
joka edustaa tämä sivu
ja jos div.style.visibility omaisuus vastaa, vastaa, vastaa,
piilotettu, sitten vain haluavat toggle se
Jonathan ehdotettu muuten haluan
Voit vaihtaa sen yli piilossa.
Nyt, kuten puolella, miksi triple vastaa siellä?
Tai mitä on, että verrattuna kaksinkertainen tasavertaisina?
>> Tiukka vastaava.
>> Anteeksi.
>> Tiukka vastaava.
Niin, se on identiteetin toimijat
Milloin olet tarkkailun ole vain muuttujan arvo
tasavertaisena, yhtä järkevää mutta myös tyypin sitä.
Joten, vaikka emme ole määritelty näin pitkälle tietoja
tyypit mistään muuttujia tämä tai jokin dioja,
On eräänlainen liittyvä kanssa, että merkkijono piilossa
tämän arvon, piilossa ja se on tietysti merkkijono.
Eli tässä tapauksessa ei ole oikeastaan ​​väliä
koska ei ole niin, että aiomme sekoittamaan merkkijono
"piilotettu" kanssa jokin muu arvo
mutta tämä on usein hyvä tottumus Sanoisin saada
osaksi käyttämällä yhtä, tasa-arvoisia,
yhtäläisyysmerkki on yleensä hyvä asia.
Se tekee koodin vankempi sekä PHP, mutta
ja JavaScript koska sinun ajaa
osaksi joskus rajatapauksissa jossa arvo voi olla nolla
että olet tarkistanut ja nolla voidaan conflated vääriä
tai voi olla, ja kuten PHP,
Javascript myös voi olla useita valheellisesti arvot, jos nollalla
ja vääriä ja nolla-ja määrittelemätön kaikki voimme ratkaista implisiittisesti
false.
Mutta jos olet todella haluavat tarkistaa erityistä arvoa
kuten nolla, numero tai false Boolen niin sinulla on
käyttää tätä identiteettiä operaattori.
Niin, se voisi tapahtua saada osaksi muutenkin vaikka täällä,
se on tavallaan merkityksetön koska tiedämme, me tarkastamme
merkkijonoa arvon ja se on ei tule olemaan mitään muuta.
Joten, tässä taika sitten, jos olen selaa tätä linjaa täällä,
ilmeisesti rakennettu osaksi ikkunaobjekti
ja tämä on ominaisuus selain voisi käyttää
Tämän Super maailmanlaajuisen esineen nimeltä Window,
sisällä, joka on joitakin toimintoja,
jos perän on asetettu aikaväli
ja se vie ilmeisesti millaisia ​​argumentteja?
Joo.
>> Toiminto soittaa ja aikaa.
>> Hyvä. Joten, toiminto soittaa ja aika
ja niin erityisesti viittaus toiminto,
osoitin toiminto tavallaan
ja että on tehtävä että menee
päästä suoritetaan aina useita millisekuntia ja tässä tapauksessa,
se on jokaisen 500 millisekuntia.
Niin, se on tapa asiakkuutta tehokkaasti ja loputon silmukka
ilman iterointia mutta sen sijaan kertoo JavaScript
moottorin sisällä selaimen
tehdä tätä joka 500 millisekuntia tai lähellä
500 millisekuntia, koska se voi,
käy ilmi, että alla huppu,
siellä on mitä kutsutaan tapahtumaa silmukka ja me palaamme tähän
yhteydessä solmun JS että vain jatkuvasti sellainen
Istunnon siellä, spinning, odottaa tehtävää
ja heti kun se ymmärtää,
500 millisekuntia on kulunut vilkkuvat saavat kutsutaan jälleen
ja uudestaan ​​ja uudestaan ​​on rinnalla muuta työtä
että pitää saada tehdä.
Joten, mitä voimme parantaa täällä?
No, voin avata up Blink-1.html
ja osoittaa Blink-1.html
esteettisesti täysin identtisiä.
Joten, mitä me voisimme parantaa täällä?
No, huomaa, että se oli aika hyödytön
määrittää funktion nimeltä Vilkkua koska kuinka monta
kuinka monessa paikassa tein soita toiminto vilkkuvat?
>> Vain kerran.
>> Niin, yksi.
Niin, se ei ollut huono, itse Itse asiassa se on varmaan ihan
suoraan eteenpäin.
I määritelty funktio vilkuttaa, I soita funktio vilkuttaa tapa
Tämän parametrin, mutta teknisesti,
ei ollut syytä sen ja yhteisen paradigman
JavaScript on todella hyödyntää lambda toiminnot
kuten ehkä muistatte 51 tai anonyymejä toiminnot
jos jos et tarvitse nimi toiminto,
jos olet vain soittamalla sitä varmasti yhteen paikkaan,
miksi vaivautua täyttämättä koodin, täyttämättä ohjelmoijat mieli
ja nimesi tilaa todella symboleja
että et todellakaan tarvitse huolehtia.
Ja niin, tässä versiossa täällä,
Huomaan, että soitan window.SetInterval suoraan
huipulla minun komentosarjatunnus sitten Ohitan
nimettömään toiminto että ei ota argumentteja
ja se on täysin hieno ja niin keho
mainittu toiminto näyttää siltä on identtinen mitä se oli ennen
ja vain syntaktinen Nyt erona on,
tänne vieressä 500.
Suljen kehon funktion
ja sitten minä sanon suorittaa että vanha koodi,
joka 500 millisekuntia.
Niin, hyvin marginaalinen muutos
mutta askel kohti mitä luultavasti enemmän tyylikäs
täytäntöönpanosta.
Joten, nyt otamme tämän askel pidemmälle, jos en nyt mene
osaksi vilkkuvat kaksi, sinun katso yhteinen kirjasto,
seurauksena on menossa
on täysin merkityksetön esteettisesti mutta jos menemme
osaksi versio kaksi täällä, huomautus että pääni,
Olen liittänyt uusin versio jQuery.
Ja sitten, tänne, Sain siivotaan
up koodi vähän, se on ei tule olemaan hauskaa maailmassa
käyttää edelleen native DOM toiminnot
ja tavallaan raaka JavaScript.
Itse asiassa, jQuery kuten ehkä tietää on tullut niin suosittu
että useimmat ihmiset vain konfliktin jQuery JavaScript
mutta oikeastaan ​​vain ehtoollinen hyödyllisiä kirjasto kirjoitettu
jonka mies nimeltä John Resig ja koska muut
että on vain tekee paljon tylsiä asioita
JavaScript helpompaa ja ytimekkäämpi.
Eli tässä tapauksessa tässä mitä on tekeillä?
Joten, minulla on tämä ulkonäkö dollarin merkki, siitä lisää
vain hetken, sitten tämä on CSS valitsin.
Niin, se on hyvin samanlainen hengessä, mitä tein ennen,
mutta tällä kertaa olen kirjaimellisesti käyttäen hash-tunniste
osoittaa ainutlaatuinen tunniste kutsutaan tervehdys
ja sitten ilmeisesti . Css on menetelmä rakennettu
sisään tahansa esine on, että olen juuri luonut
ja olen tarkkailun arvo näkyvyyden näppäintä.
Ja jos arvo että keskeiset vastaa, vastaa, vastaa, piilossa,
Sitten aion vaihtaa sen ja Aion vaihtaa sen tällä kertaa
käyttämällä samaa menetelmää joka ilmeisesti on ylikuormittunut
siinä mielessä, että se on kaksi eri allekirjoitusta,
yksi yhden argumentin ja toisessa kaksi argumentteja,
joista toinen on setteri,
joista ensin mainittu on getteri niin sanotusti.
Ja jos utelias ja jos haluat oikeastaan ​​koskaan katsoneet tätä,
jos menemme jquery.css toivottavasti Top Hit on todellakin tämän
ja näet enemmän muodollinen selitys
että me vain käyttää tätä, . CSS ominaisuuden nimi
ja sitten setteri on piste CSS
kanssa ominaisuuden nimi ja arvo.
Joten, hieman puhtaampi, mutta huomaa eräänlainen malli täällä
jokaisen iteraation Tämän koodin,
olemme tavallaan tehden tiukemmin ja tiukemmin ja tiukemmin
ja siellä sanovat parempia malleja
koska käytämme jonkun toisen koodin, joka on eliminoitu
joitakin monimutkaisuus.
Joten, nyt tehkäämme tämä jopa helpompaa.
Ja itse asiassa, jos voin poistaa kaikki lainausmerkkejä näet vain kaikki
kommentoida näet kuinka yksinkertaista tämä on mennyt.
Yksi ero Tässä tietysti on
että olen käyttäen toggle menetelmä, joka myös tulee rakennettu
sisään jQuery ja se on vain
koska joku muu kirjoitti koodi
joka todella kytkee näkyvyyden asetus
kaikista DOM elementti että lähetät sen.
Niin, paremmin ja paremmin.
Ja niin, tämä on malli,
vaikka tämä on iltapala yksinkertainen esimerkki ja lajitella
tyhmä nettovaikutus joka on vilkkuva palan tekstiä,
se on sellainen ajatus prosessi, joka sinun pitäisi ajatella -
ajatella ei välttämättä aivan ensimmäinen
passiivinen kirjoittaa jotain varten tulevassa hankkeessa
mutta varmasti kun kerrata teidän neuvonantaja tai kanssani
ja tiimisi kokouksia tai et vain tarkistaa joukkuetovereiden koodi
noin kiristämistä asioita, eikö?
Hehän ovat vähemmän -
vähemmän riviä koodia sinulla on lopulta
teoriassa vähemmän bugeja sinun todennäköisesti kutsuva
koska siellä on yksinkertaisesti vähemmän koodia sotkea.
Selvä.
Niin, pari noutoruokapaikkoja.
Lambda toimintoja, anonyymi toimintoja,
joista monet ole ennen nähnyt
ja sitten myös vain kiristämällä asioita, joissa kirjasto
kuten jQuery tässä nimenomaisessa tapauksessa.
Selvä.
Kaikki kysymykset?
Tehdään yksi muu asiakkaan puolella näkökohta tässä,
muodossa nolla meillä on Tämän nettovaikutus.
Super yksinkertainen muoto ja ilmeisesti jos yritän klikkaa rekisteröidy tästä,
aluksi se kertoo minulle olet rekisteröity, no, ei oikeastaan.
No, miksi?
No, tässä muodossa-0.html hyvin vähän koodia,
no JavaScript tahansa ja se on täysin väärennös eräänlainen
muodon koska toiminta arvo on registered.html
mikä tarkoittaa mitä tahansa Olen kirjoitat tämän lomakkeen
jos se aikoo lähetetään palvelimelle?
Joo. Joten, registered.html mikä on selvästi HTML-tiedosto
joka on siis staattinen tiedosto, joka ei ole keinoja
ottaa käyttäjä syöttää olettaen ei ole JavaScript-koodia
upotettu se, että on katsomalla URL
joten tämä on täysin NOOP ja että mitään ei tule tapahtumaan
kanssa toimitti tietoja, mutta voit nähdä rakenne
of melko yksinkertainen HTML5 muodossa
että on muutama salasanan, muutama tulotyypin.
Joten, nyt itse asiassa nyt lisätä joitakin virheentarkistus
ja katso miten voimme parantamiseksi.
Niin, tässä on tavallaan huono miehen tapa toteuttaa tämän
ja se on eräänlainen ilkeä koodinpätkän.
Joten, Katsotaanpa ensin scroll pohjaan
nähdä, mitä sama ja mitä eri.
Ainoa asia eri nyt välinen
ja edellinen versio on että olen antanut muodon ja tunnus
"kohdistuneiden" voisi on ollut mitä haluan
mutta sen tarkoitus olla yksilöllisesti tunnistettavissa sekään ole
ehdottoman välttämätöntä, koska jos sivu on vain yksi muoto varmasti I
voisi löytää se yhdellä jQuery valitsin menetelmiä.
Mutta näin vain tekee se lisää deterministinen.
Joten, jos menen nyt minun script tag, huomaa seuraavat
window.onload tasavertaisina Nimetön toiminto.
Joten, mitä tämä tekee?
Joten, saatat muistaa, että client-side ohjelmointi -
JavaScript melko HTML-sivuja ovat erilaisten tapahtumien liittyvän
elementtejä, klikkaamalla ja esittämistä ja keskittymällä
ja hämärtää ja muut tällaiset tapahtumista, jotka voisivat tapahtua
käyttäjänä tyypillisesti vuorovaikutuksessa sivun,
window.onload mitä se sanoo.
Ikkunat koko lastaus
joten kun kaikki kuvat on esitetty ladattavaksi kerran kaikki tiedostot ovat
ladattu ja kerran sivu on ladattu,
tee seuraava koodi, ja huomaa, jos vaihdan pohjaan
Tämän menetelmän, huomaa, että ei ole suluissa
jälkeen kihara ahdin toisin sanoen
että en ole täytäntöönpanovaltion Tämän toiminnon täällä nyt,
selain tulee suorittaa se minulle, kun se on todennut,
että sivu on ladattu.
Joten, katsotaanpa mitä olemme tehneet,
document.getElementById rekisteröinti
niin, että vain antaa minulle viittauksen solmuun
puussa, joka on annettu on ID rekisteröinnin.
Ja nyt aion tallentaa toisen tapahtumakäsittely
tekemällä form.onsubmit saa Tämän Nimetön toiminto
mikä tarkoittaa, että seuraava Koodin tulee suorittaa aina
että lomake lähetetään.
Nyt suurin osa tästä on vain tavallaan tylsää logiikkaa.
Joten, jos arvo sähköpostikentän muodossa on
"Ei mitään" silloin sinun täytyy sähköpostiosoitteesi,,
huudat käyttäjälle hälyttää ja palata sitten vääriä.
Ja sitten minulla on joukko muita tarkastuksia,
tarkistaa salasanan,
tarkistaa, onko salasanat ovat samat,
tarkistaa, onko sopimus valintaruutu on valittu vai ei
ja minä vain huutaa käyttäjälle, jos mitään
näiden testien todella epäonnistua.
Ja niin, tässä on esimerkki jopa vaikka se on hieman keinotekoinen
tässä se, että olen käyttäen vastaa, vastaa, vastaa,
tarkoittaa, että käyttäjä ei yritä huijata minua
kirjoittamalla, mitä arvoa.
Tai pikemminkin Olen todella tarkistamalla läsnäolo
tyhjän merkkijonon, käyttäjä ei ole kirjoittanut vielä mitään.
Jos käyttäjä kirjoitetaan kirjaimellisesti nolla,
"Nolla" mahdollisesti voisi olla sekoittaa tyhjä merkkijono.
Ja sanon se on eräänlainen merkityksettömiä täällä
koska ilmeisesti jopa nolla ei ole sähköpostiosoitetta.
Mutta jos tämä oli enemmän geneerinen alalla, kuten tekstikenttään
tai nimeä tai kuvausta tai jotain haluat vastinetta
ja se ei ole välttämättä syntaktisesti on
olla sähköpostiosoite, käyttäjä voisi kirjoittaa jotain nolla
ja jälleen kulman tapaus, vaan että on miksi tyypillisesti tarkkailun tyypit on
hyödyllinen asia.
Olet todella tarkistamatta että käyttäjä on kirjoittanut mitään
tuohon kenttään.
Joten, mitä tapahtuu, jos mikään Näiden epäonnistuvat, hyvin,
palaamassa totta sisällä of tapahtumakäsittelijän
kuten onsubmit vain tarkoittaa let alkuperäinen menettely todella
levittää ja sen vuoksi lomake saavat toimitettu.
Ja siksi, kun olen vihdoin napsautettavaan toimitettava ennen kuin sain
läpi Register.html ja jos teen sen nyt, huomautus,
Saan huusi jos en antaa sähköpostiosoite
ja voin kirjoittaa malan@harvard.edu,
crimson [foneettinen] Crimson, valintaruutu,
ja nyt rekisteröityä ja se kertoo minulle, jälleen,
olet rekisteröitynyt tai ei oikeastaan.
Selvä.
Joten, nyt siivota tähän asti vain vähän ja sitten siirtyminen
Uuden uudempia server side kamaa.
Joten, jos menen muotoon-2.html, huomata muutamia asioita.
Niin, yksi, toin jQuery takaisin taikinaan
joten taas on Tämän dollarin merkki
ja nyt olen käyttäen Joissakin jQuery menetelmiä.
Niin, ensin, mistä on kysymys dollarin merkki, joka on
niin erikoista täällä?
Mikä on dollarin merkki terästetty lähes koko tahansa jQuery koodi?
Joo.
[Inaudible Huom!]
OK. Joten, dollarin merkki toiminto menee läpi DOM näköinen
jotain tämän Erityisesti CSS valitsin.
Niin, totta, mutta melkein liian tarkka.
Näin käy kun ohitat merkkijono
kuten tässä tapauksessa, mutta et aina kulkea merkkijono.
Itse asiassa, hyvin ensimmäinen rivi tässä tämä ei ole
CSS valitsin Ohitan in Lambda-toiminto.
Joten, yleisemmin - niin, Hyvä vastaus mutta liian tarkka.
Yleisemmin, mikä on dollarin merkki edustaa?
>> Vain jQuery.
>> Joo. Joten, vain jQuery tai se on vain toiminto
että joku kaveri vuotta sitten kirjoitti ja muut ihmiset ovat
sittemmin laajentanut kirjaimellisesti oletuksena on nimeltään -
oho, kutsutaan jQuery.
Se vain - se kääntyy pois toisin kuin monet
Kielten dollarin merkki on täysin pätevä käytettävä symboli
muuttujaan nimi taas
PHP dollarin merkki on luonnollisesti erityinen merkitys
mutta JavaScript kuten Joissakin kielissä, dollarin merkki
ja korostavat yms. erikoismerkkejä täysin legit
käyttää omassa symboli nimet muuttujia.
Joten, joku vain päätti että, tiedätkö mitä?
Se tulee olemaan melko tylsiä
tehdä koko maailmaa Kirjoita jQuery koko ajan,
haluan eräänlainen kasvi osuuden maahan ja sanoa,
"Tämä kirjasto käyttää dollarin merkki. "
Ja itse asiassa tämä ei nosta riskiä
että joku muu ylimielisesti aikoo käyttää dollarin merkki
hänen kirjastossa, mutta siellä on tapoja tavallaan vakuuttaa
että kun käytät dollari allekirjoittaa sen karttoja jQuery
koska voit testata, jos se on jo määritetty
jotain muuta olennaisesti.
Selvä.
Niin, siinä kaikki, että on, ei ole mitään taikuutta.
Se on vain seksikäs näköinen pala syntaksin että on mukavaa
ja nopea ja helppo kirjoittaa.
Joten, mitä tapahtuu, kun kirjoita dollarin merkki avata paren
ja sitten Nimetön toiminto.
No, Osoittautuu, että tämä on oikeastaan ​​lyhennetty merkintätapa
asiakirjojen dot valmiina auki paren.
Joten, kuten Cynthia huomasi Aiemmin meillä jo yksi
corner tapauksessa.
Jos vain kulkea lambda-toimintoa,
vaikutus dollarin merkki on hieman erilainen.
Itse asiassa, mitä todella tapahtuu on, että se vastaa tätä,
ohimennen viittaus maailmanlaajuisen asiakirjaobjektia
joka on maailmanlaajuinen aivan kuten ikkunaobjekti on
joka antaa sinulle erikoistoiminnoilla
joka vaikuttaa koko sivun tai selain ja se muuttuu
että asiakirjaan voit kääri se jQuery,
jQuery lähinnä tajuaa, Voi, tämä on viittaus
että erityistä asiakirjaobjektia,
haluaisin nyt rekisteröityä tapahtumakäsittely kutsutaan valmis
joka ei ole syntyperäinen JavaScript tai DOM liittyvät.
Valmiina on jQuery asia, joka kertoo
kun sivu on ladattu kaikki HTML-elementit
mutta ei välttämättä ladata, kaikki CSS ja kuvia
ja JavaScript-tiedostot ja Flash-tiedostoja ja tykkää.
Niin, se on askel ennen kuorman sitten mennä eteenpäin
ja suorita seuraavat.
Ja ylösalaisin käyttämällä on valmis keino on, että voit, tiedät,
että kaikki elementit teidän DOM,
kaikki yksilöidä asioita tunnukset, ne ovat jopa
jos sivu, sen sisältö ladataan yhä ja lastaus
ja sinulla on rikki kuvakkeet hetki
tai valkoinen sivu taustalla.
Joo.
>> Mitä tapahtuisi jos [äänetön]?
>> Perfect esimerkiksi täydellinen kysymys.
Joten katsotaanpas, jos voimme simuloida tätä juuri nyt.
Joten, anna minun mennä eteenpäin ja poistaa Tässä kaksi riviä tänne ja sitten
vaivautumatta korjata painauma, anna minun mennä eteenpäin
ja poistaa tämän tänne - oho, tämä tänne.
Ja nyt, anna minun mennä yli sivu, mene form-2.html ja tyyppi
Rekisteröidy, mikään ei näyttänyt tapahtua, sanotaanko, miksi oli, että
mennään eteenpäin ja avata jopa Chromen tarkastaja,
avata Console vain nähdä jos jotain tapahtuu täällä, nyt,
Rekisteröidy, vielä mitään.
Joten, koodi on syntaktisesti hieno
joten en näe mitään punainen virheilmoitukset,
mutta mitä selvästi ei tapahdu?
Kukaan koodi on oikea, se ei toimi niin ei mitään
minun koodit näyttää olevan täytäntöönpanosta, joten miksi tämä on?
No, JavaScript ja selaimet yleisemmin toteuttaa
sisältöä web-sivun, alkuun alas, vasemmalta oikealle.
Ja ongelma on että koska alkuun
Tämän sivun on HTML sitten pää Sitten käsikirjoitus sitten toinen käsikirjoitus,
tämä on menossa teloitettiin ennen mikä vielä valmis,
tai edes olemassa puussa edustus sivun.
Lomakkeeseen, ei edes toimielin on tässä vaiheessa.
Joten, jQuery on fiksu jossa on virheentarkistus
että jos ei ole elementti yksilöllinen tunnus rekisteröinnin,
se ei tule bail out teitä
ja vain laukaista joissakin konsoli virhe ja rikkoa koko sivun
se tulee hiljaa sivuuttaa sinua, mutta syystä, että yksikään
Tämän koodin koskaan suorittaa on
koska kun olet rekisteröinyt tämän esittämään ohjaaja,
ei ollut elementti liittää sen.
Niin, se on eräänlainen ei potkittu siellä.
Joten, määrittämällä sen sijaan, odota, kunnes ikä on ladattu
jos emme window.onload asia, joka on eräänlainen
vanhan koulun tapa tehdä sitä tai seksikkäämpää jQuery tavalla
näin, voimme Kerro se odottaa, kunnes kaikki
Näiden HTML-tunnisteita on jäsennetty niin, että jopa
Jos kuvat eivät ole ladattu kello ainakin, että solmu on puussa,
Sitten JQuery voidaan varmistaa, että kaikki on siellä.
Joo.
[Inaudible Huom!]
Kyllä, hyvä, kyllä ​​ehdottomasti.
Joten, muuta ratkaisua Tässä, jos et käytä tätä
tai ei muistanut että tämä oli olemassa,
voisit ehdottomasti liikkua kaikki tämä pohjaan
Web-sivun, sisällä elin vielä mutta alle muodossa
ja että olisi myös Tämän ongelman ratkaisemiseksi.
Se on vain tyypillisesti pidetään huono käytäntö.
Se on vähän sotkuinen ja huolimaton erityisesti
jos pitää jammailua kaiken pohjaan sivun,
varsinkin kun mä pidän asiat yksinkertaisina laittamalla kaikki
minun koodin sisällä HTML-sivun
kun voit tietysti varmasti tottua
factoring it out erilliseen tiedostoon
missä vaiheessa se on vain mukavaa
keskittää tiedostot päähän.
Paitsi on hinta, jonka maksat
laittamalla JavaScript toinen varojen kuten CSS-tiedostot
pään sivun, mikä on riski, että suoritat?
>> Hitaampi sivujen latautumista.
>> Hitaampi sivujen latautumista, miksi?
>> Koska me yritämme ladata kaikki kirjastot
ennen [äänetön].
>> Täsmälleen koska selaimet lukea koodia ylhäältä alas,
vasemmalta oikealle, jos Google analyysit ovat hitaita
tai jQuery CDN on hidasta tai Facebook API on hidasta
ja että tiedosto vain jumittuu mahdollisesti riippuen
miten lisätyn tiedoston, koko sivun voisi vaikuttaa pysähtyvän.
Ja jos näet tämän paljon rehellisesti
sivustoilla heillä on paljon huonolaatuisia mainoksia
niitä, olemme vain yksi hidas tai pudotti sivusto voisi ripustaa sivu
jostain toistaiseksi määrä sekuntia
kunnes lopulta selain toivottavasti kertaa ulos, että
ja näyttää sitten muun sivun.
Joten, jos olet koskaan käytetty, kuten Facebook, kuten painikkeen,
Web-sivun, haluan katso jos löydän tämän
ilman kirjautumista täällä.
Joten, jos menet Facebookin Like-painiketta
ja valitse hanki koodi, hitto vie,
Katsotaan jos voimme löytää esimerkiksi
varmasti joku oli lähetetty tämän.
[Tauko]
Annan esille muutaman sekunnin kuluttua, jos emme näe tätä.
Facebook asynch - OK.
Niin, tämä on koodin ja ellei he muuttivat sen äskettäin
että Facebook todella suosittelee, että käytät
ladata kirjastonsa ja oikeastaan ​​ehdottaa
että laitat tämän kehon sivusi.
Joten, Facebook neuvoo luoda eräänlainen tyhmä DIV
että vain on yksilöllinen tunnus, kuten Tämän jälkeen on komentosarjatunnus
ja kaikki tämä monimutkaisuus olennaisesti tekee seuraavan
ja he eivät käytä mitään JQuery koska he eivät halua
olettaa muuta riippuvuudet,
haluan siirtää tämän yli vain vähän.
Joten, huomaat ne ovat Nimetön toiminto täällä,
lisää, että vain hetken,
he käytä document.createElement,
he luoda DOM-elementti, tämä on kuin malloc niin sanotusti
jossa tagi on tyyppiä käsikirjoituksen, se on sitten määrittämällä
että async määritteen Tämän tunnisteen on menossa
ollakseen totta sitten mennä eteenpäin ja selvittää, mitä URL
Facebookin JavaScript pitäisi olla
ja tämä on vain hieno tapa
tarkastamista olisi se HGP tai HDPS.
Ja lopulta, sinun huomaa, mitä Facebook tekee,
he saavat DOM solmuun on tunnus Facebook root
joka on mitä he kertoivat voit laittaa sivulle
ja sitten ne liittää lapsen joten vaikutus kaikki tämä on
tavallaan dynaamisesti pistää uusi komentosarjatunnus sivusi
lapsena DIV että olet Lisätään siellä niin, että loput
ja sivulatauksia iloisesti
ja sitten tämä koodi tosiasiallisesti saa ladata asynkronisesti.
Joten, lähinnä jälkeen Se, ja minä lykätään mainita
nimettömän funktion,
Mikä tämä funky syntaksin viittaa tässä
kun en ole ainoa tehtävä Avaa kantatuote, lähellä paren
ja sitten aaltosulkeita, miksi avoin paren täällä
ja sitten auki close, Paren siellä, mikä se tekee?
>> [Äänetön] määritellään ja sitten täytäntöönpanovaltion?
>> Aivan, se määritellään toiminto, joka on nimetön
vaan ainoastaan ​​määritellään funktio,
ei tietenkään suorita tehtävässään, kunnes te kutsutte sitä
nimen, mutta tietysti tämä on nimetön funktio
joten et voi kutsua sitä nimeltä, mutta voit
JavaScript toteuttaa Nimetön toiminto vain
kapseloimalla koko juttu Suluissa kuten olemme tehneet
Tämän kantatuote ja tämä PAREN täällä ja sitten vahvistamisesta
loppuun funktion avoin kantatuote, lähellä paren,
jos et halua välittää niitä argumentteja.
Mutta tämä näyttää typerää,
kuten miksi tämä ylimääräinen syntaktinen monimutkaisuus
että useimmat ihmiset eivät tunnu tunnistaa, mitä arvoa
kääre nämä kolme riviä koodia
vuonna Nimetön toiminto tällä tavalla.
Joo.
>> Jotta aiempia arvokkaita [kuultavissa].
>> Aivan, välttää päälle muuttuja
nykyisissä sivulla, eikö?
Facebook on hieman ylimielisesti päätti,
he aikovat käyttää säätyvä, se on melko todennäköistä
että sinä tai kuka tahansa Facebook Like-painiketta
tai mitä tahansa muita sosiaalisia plug
in on muuttuva jonnekin kutsutaan E. Joten,
kapseloimalla kaikki niiden koodin sisällä
Tämän Nimetön toiminto, ne pohjimmiltaan on oma soveltamisala
että ei ole vaarassa clobbering olemassa olevat muuttujat.
Niin, tämäkin on todella hyvin yleinen paradigma,
varsinkin kun kirjoitat apukirjaston
tai kun et itse haluavat sorkkia nimesi tilaa
muiden muuttujien sinua haluavat arvo elää
ja kuolla kun poistut että koodiosion
tämä on mukava tekniikka JavaScript.
Selvä.
Niin, sitten takaisin tähän esimerkkiin täällä kaikki olemme tehneet lopussa
Tämän esimerkki on juuri siivottu koodia.
Niin, se on silti saanut koko nippu kytkimet, koko joukko
ja olosuhteet täällä, mutta huomaa hieman syntaksin,
Tämän sisäänkäyntien DOM solmu yksilöllinen tunnus rekisteröintiä,
space keino etsiä nyt jälkeläinen, että solmu,
löytää se, jos se on tyyppiä syöttää ja jopa
jos et ole nähnyt tätä ennen, ehkä tiedätte
että tämä tarkoittaa vain löytää sen panos tag,
Tuloyksiköiden että on ominaisuus nimen arvo
sähköpostin, ja anna minua aalto käteni jossain
loput ei ole kaikki, että stimuloiva
mutta oikeastaan ​​vain jQuery syntaksia samoihin toimintoihin.
Selvä.
Mutta mitä ei ole niin tärkeää tässä selaimen puolella juttuja
vaan se, että me oli puhtaampaa ja puhtaampaa tapoja
todella tehdä että koodi työtä.
Selvä.
Kaikki kysymykset?
[Inaudible Huom!]
OK. Nyt hauska osa.
Joten, Node.js Miksi?
Ketä kiinnostaa?
Mitä tiedät siitä tänään?
Node.js, miksi?
Henry [olettaa oikeinkirjoitus].
[Inaudible Huom!]
Akku reset?
Mikä - tämä on täydellinen cliff hanger
jälkimmäisen puoliskon tänään.
Miksemme mennä ottamaan 5 minuutin tauko täällä,
siellä on puoli karkkia kone siellä jos voisitte
kuten jotkut karkkia ilman laskemisesta neljäsosa tuumaa