>> [Mūzikas atskaņošanai]
>> DAVID Malan: Tas ir CS50.
Tas ir sākums nedēļas deviņi.
Un tas ir tas, kas būtu bijis Mr Boole 200. dzimšanas dienu.
Tātad šis ir puiši ar kuriem mēs esam atsaucās
diezgan dažas reizes par izmantojot Būla mainīgie patiesas un viltus,
1 un 0 un tādas.
Un tas bija Google veltījums viņam šodien.
Viņš ir ieslēgts 200.
Tātad, ja jūs vēlaties, lai pievienoties mums CS50 pusdienām,
ieskatieties saiti par kursu mājas lapā.
Un šādas sejas un draugiem, kā tie gaida jūs šeit Cambridge.
Faces, piemēram, tie gaida jūs New Haven.
Un, patiesībā, Ken New Haven laipni veikti
ko sauc animēts GIF of Eli šeit nesen lunch-- GIF vēl
citu grafisko failu formātu, ar kuru tu esi familiar-- ka
izskatās nedaudz kaut kas līdzīgs šim.
Tātad tikai secība of-- OK.
Neviens šeit Cambridge smejas.
Bet New Haven, šis ir tiešām smieklīgi, vai ne?
Viss kārtībā.
>> Tātad pievienoties mums tur.
Šeit Harvard, Konkrētāk, šajā trešdienā,
ja tu esi otrā kursa students vai pirmkursnieks even-- vai pat junior-- domāšana veidošanā
slēdzis uz datoru zinātne, zinu, ka tur būs
Esi CS padomus godīgi šis Trešdien, neilgi pēc klases
4:00 PM šajā datorā zinātne ēka Maxwell Dworkin.
Mēs nodot šo par kursu s mājas lapā līdz rītdienai, kā arī.
Donuts, es esmu teicis, tiks pasniegtas.
>> Viss kārtībā.
Tik smieklīgi story-- man bija poking ap internetā,
un es atklāju dažas vecās arhīvu no manas bijušās mājas lapā.
Un izrādās out-- ap šo laiks, šķiet, ir ļoti savlaicīgs
jo es savākt, ka UC vēlēšanas gatavojaties rīkiem atkal.
Tāpēc es ilga UC, zaudēja nožēlojami.
Un varbūt tas bija daļēji kāpēc.
Tātad tas bija mana mājas lapa tajā laikā.
Kādu iemeslu dēļ, es domāju, tas bija laba ideja, pirms stāsta cilvēki
kāds ir mans platforma bija un kāpēc viņi vajadzētu balsot par mani, ka viņiem ir
noklikšķināt, lai ievadītu, lai uzzinātu, ka informācija, kas retrospektīvi ir
veida rāpojošs.
Es īsti nezinu, kas tas bija.
>> Bet tas noteikti nav palīdzēt manu kampaņu.
Es arī konstatēts, ka, vecākais year-- man bija šī Muppet kalendāru.
Muppets bija sava veida modē toreiz.
Vai varbūt viņi nebija.
Man bija Muppet kalendārs toreiz.
Un es domāju, ka tas gribētu būt forši nosaukuma mans dators par Hārvardas tīklā
frogman.student.harvard.edu.
Tajā laikā, mums visiem bija unikāli identificējamus uzņēmēju nosaukumiem.
Un jūs varētu izvēlēties kādu iedomība nosaukumu, nevis savu vārdu.
Un es devos ar ūdenslīdējs kāda iemesla dēļ.
>> Un tad es started-- es pavadīju daudz Laika apskatīs šīs saites
šorīt.
Un tas bija mans par lapu, kas tagad veida šķiet adorable.
Bet tas arī liecina tikai cik tālu tehnoloģija ir pienācis.
Es domāju, atpakaļ dienā, 486 bija kaut kas.
Šajās dienās, tas ir super, super, super lēni un arī mazāk
nekā jūs varētu būt jūsu pašu kabatas šajās dienās.
Tur ir vairāk tur, ka bija vēl neērts.
Tāpēc es ņemšu atstāt to, ka.
Bet tas bija mans pirmais iebrukt web-- ak, nē.
Tas nebija.
Mans pirmais reālais iebrukums Web programmēšana bija šī vietne, ko es tikko aizmirsu.
Kādā brīdī, es iemācījos veikt atkārtotus fona attēlus.
Un tāpēc es uzskatīja, ka šis likšana efektīvas, piemēram, hokejists, futbols, un golfa
bumba, vai kāds tas ir par Frosh Tērzēšana mājas lapā.
Un tas bija patiesībā, patiesi Pirmais tīmekļa projekts Paņēmu on--
Es domāju, ka varbūt otrā kursa students gadā, junior year--
ņemot CS50 un CS51, viena no kopējās follow-on klasēs.
Es pamanīju meklē caur arhīvā
ka viens no maniem mantiniekiem un draugi, Lee, veida mainīts
autortiesību sev.
Bet tas patiešām bija kaut kas Es būtu pieder samulsināt.
Bet tajā laikā, šī bija pirmā tīmekļa vietne,
kā jau teicu pirms dažām nedēļām, ar kuru varētu pirmkursnieks
reģistrēties klātienes sporta šeit.
Un tā izrādās ka fona attēlus
piemēram, ka nav tik laba ideja.
Bet web bija jauns, un mēs visi bijām eksperimentēt.
Un tas ir tas, ko es acīmredzot bija tajā laikā.
Viss kārtībā.
Tātad bez papildu ADO, mēs pāriet rīku šodien, lai dotu jums, patiešām,
pēdējais gabals, ka jūs varētu atrast īpaši noderīga gala projektiem
bet arī, ka sāks padarīt visu globālo tīmekli
justies mazliet vairāk saprotams.
Patiesi, mēs ejam, lai ieviestu vēl viens programmēšanas valoda
sauc JavaScript tas ir līdzīgs un atšķirīgs dažādos veidos
no valodām mēs esam paskatījās līdz šim.
>> Tātad C, atgādināt, tas ir apkopota valoda.
Jūs esat ieguvuši, lai palaistu to caur kompilatoru.
Jūs saņemsiet pirmkodu iebilst kodu vai nulles un vieninieku.
Un tie ir nulles, un tie, kas Jūsu CPU, Central Processing Unit,
faktiski saprast.
PHP, gluži pretēji, nav apkopota valoda.
Tas ir tas, ko?
Tas ir interpretējama valoda.
Tātad tur ir daži programma sauc tulks, kas
ir lasīt it-- augšas uz apakšā, pa kreisi, lai right--
un izdomāt, ko visi Jūsu sintakse dara un nozīmē,
vai tas ir cilpa vai stāvoklis vai jebkurš cits numurs programmēšanas
konstrukcijas.
Tātad tas ir interpretēts valoda.
>> Tad mēs iepazīstinājām HTML.
Un HTML nav pat programmēšanas valoda.
Mēs gribētu to saucam Kas?
Iezīmēšanas valoda, kas ir tikai sava veida iedomātā veids, kā pateikt to
nav programmēšanas konstrukcijas, piemēram, mēs redzējām pat atpakaļ dienā no nulles.
Nav cilpas.
Nav nosacījumi.
Tas tiešām ir valoda marķēšanu savus datus
un formatējumu, vai strukturējot to kaut kādā veidā.
>> CSS, tikmēr, līdzīgi nav programmēšanas valoda.
Tas ir pat vairāk estētiski orientēta.
Un tas ļauj kārtot precizējošo melodija lietas, piemēram, fonta lielumu un krāsu
un izvietošana un visu to.
Tad mums bija
>> SQL.
Tātad SQL ir patiešām programmēšana valoda savā ziņā,
kaut pielāgota īpaši datubāzēm.
Bet pat ja mēs tikai jūs iepazīstināt ar izvēlēties un ievietot un dzēst un atjaunināt
un pāris citiem, Izrādās, jūs faktiski var
rakstīt funkcijas vai procedūras, kā viņi
sauc, SQL, kas izskatās un darbojas gluži tāpat PHP un C funkcijas.
Tāpēc zinu, ka tie pastāv.
Bet mums nav pat apnikt ar tiem jo mēs tikai saskrāpēt virsmu šeit.
Un tad JavaScript, pēdējā Mūsu valodas oficiāli ieviests.
Tātad JavaScript, arī ir interpretēts valoda.
Un tie pazīstami, do Jūs vēlaties, lai atšķirtu to
ar dažiem īpašība gan no C un PHP?
Kas padara to atšķirīgu?
>> Mērķauditorija: Tas nav apkopoti.
>> DAVID Malan: Say atkal?
>> Mērķauditorija: Tas nav apkopoti.
>> DAVID Malan: Tas nav apkopoti.
Tātad tas arī tiek interpretēts.
Tātad tas nav apkopoti.
Bet kas padara to nedaudz, piemēram, PHP.
Bet tas joprojām ir atšķirīgs no PHP kaut kādā pārsteidzošā veidā,
vismaz tādā veidā mēs to izmantot.
Yeah?
>> Mērķauditorija: Tas darbojas klienta pusē.
>> DAVID Malan: Tas darbojas klienta puses, parasti.
Tas ir patiešām atšķirības raksturīgi mums tieši tagad.
C bija server-side tādā nozīmē, ka mēs darījām visu CS50 IDE.
PHP līdz šim ir bijis server-side tiktāl
kā arī tā izpaužas interpreted-- nav apkopoti, bet interpreted--
iekšā CS50 IDE, kas, protams, ir tikai servera vai serveru mākoni.
>> Bet JavaScript, pat ja jūs esat gatavojas
lai sāktu rakstīt to, teiksim, PSET astoņi un varbūt galīgs projects-- esat
iet uz labo to CS50 IDE un saglabājiet to
failos ietvaros CS50 IDE, CS50 IDE un, savukārt, mākonis serveri
uz kuru tas izvietots, nenāks interpretēt vai izpildīt savu kodu.
Drīzāk, tas būs jānosūta nepārstrādāts veidlapu uz leju, lai pārlūku.
Un tas tad būs IE vai Chrome vai Firefox vai Safari
vai kāds, kas faktiski interpretē tā, no augšas uz leju, no kreisās uz labo.
Tātad galvenais pazīšanas raksturīga šodienu
ir tas, ka JavaScript ir klienta puses un PHP, piemēram,
ir bijis servera pusē.
Tagad tas ir interesantas sekas Jo, piemēram, intelektuālā īpašuma
un kas faktiski var redzēt savu kodu.
Un tiešām, jūs varat doties tīmeklī un redzēt visvairāk
jebkuru kodu, ka kāds ir rakstīts JavaScript.
Dažreiz tas ir lasāms, Dažreiz tas ir obfuscated.
Bet vairāk par to savlaicīgi.
>> Tātad JavaScript, labi pietiekami, ir super līdzīgi, sintaktiski, lai C.
Un daudz, piemēram, PHP, tur nav galvenā funkcija.
Ja jūs vēlaties, lai sāktu rakstīt JavaScript kods, kā jūs redzēsiet šodien,
jūs vienkārši sākt to rakstīt.
Bet tas ir, jūs redzēsiet, īpaši lietderīgi saistībā ar tīmekļa pārlūkprogrammām.
Tomēr mana mazā disclaimer-- parasti earlier--
bija teikt, ka jūs varat arvien šodien lietošana JavaScript servera puses
izmantojot iedomātā sistēmu sauc Node.js ka daži no CS50 pašu pieteikumu
ir rakstīts.
Pārbaudiet 50 faktiski izmanto Node.js.
Bet mēs esam gatavojas koncentrēties uz JavaScript klienta puses šeit out.
>> Tātad, šeit ir nosacījumu kopums, PHP.
Atvainojiet, in-- reāli, ka apgalvojums, arī ir pareizs.
Šeit ir arī kopums apstākļi JavaScript.
Sintaktiski, tas ir identisks C un PHP.
Mr Boole s izpausmes ir, Līdzīgi, sintaktiski
identisks gan C un PHP.
Mums ir arī slēdžus JavaScript ka izskatās vienādi.
Mums ir uz cilpas, kas ir strukturēts identiski,
kamēr cilpas, darīt, kamēr cilpas.
>> Šis viena ir nedaudz atšķiras.
PHP bija katram konstrukcijas kas jums varētu būt, izmantojot
vai izmantos PSET septiņās, varbūt.
JavaScript ir šo īpašo versiju lai kur tu burtiski pateikt kaut ko
piemēram, attiecībā uz mainīgo atslēga objekts, kas ir ļoti īss veids, kā pateikt,
ja man ir object-- un mēs runāt par šiem atkal moment--
un es gribu atkārtot visā no galvenajiem vērtību pārus iekšpusē,
Man nav izdomāt, kā to skaitliski indekss tos ar nulle, viens,
divi, trīs.
>> Es varu burtiski teikt.
Un katra atkārtojuma, JavaScript man atjauninās mainīgā atslēgu
būt pirmais galvenais, tad nākamais atslēga, tad nākamais atslēga, tad nākamais atslēga,
un tā tālāk.
Un es varu pie tās cenas, apstrādājot objekts JavaScript, kā mēs redzēsim,
it kā tas ir asociatīvais masīvs PHP.
Patiešām, ja jūs beidzot ietin savu prātā ap to, ko asociatīvā masīva ir
PHP, jūs varat domāt par to, lai tagad, jo identisks objektu JavaScript.
Bet tas ir mazliet pārāk vienkāršota.
>> Bloki izskatās, labi pietiekami, identisks PHP izņemot vienu rakstzīmi.
Ir viena lieta, trūkst šeit ka mēs izdarījām redzēt pagājušajā nedēļā ar PHP.
Kas ir izlaisti?
Yeah?
Nē dolāra zīme.
Tātad mēs esam atpakaļ uz vairāk normāli pasaulē, kur
mainīgie nav dolāra zīmes.
Bet jūs prefiksu tos ar Var, tipisku.
Un VAR nozīmē mainīgo.
Un daudz, piemēram, PHP ir brīvi typed-- kuru pastāv veidi,
ir numuri un virknes un pludiņi un tā forth--
JavaScript tāpat ir veidi.
Bet tas ir brīvi ierakstījāt, ka tā mēs esam programmētāji nav precizēt tos.
Mums vienkārši ir jāapzinās ka dažāda veida pastāv.
>> Mainīgie, meanwhile-- lūk, kā mēs varētu atzīt "hello, pasaule"
kā virkni.
Ievērojiet, tas ir identisks PHP bet ne dolāra zīme.
Un tas ir kaut kas mēs sākt redzēt vairāk šodien,
saskaņā ar kuru jums ir objekts ar atslēgām un vērtībām.
Un, ja jūs vēlaties, lai mēģinātu izsecināt no pagājušā week--
sintakse ir nedaudz atšķirīgs.
Bet maz vesels saprāts check-- cik taustiņi tas objekts, šķiet, ir?
Tāpēc es redzu četrus.
Es redzu divus.
>> Tātad, tas ir tiešām divi.
Tātad šī ir kolekcija divi atslēgas vērtību pārus.
Galvenais ir simbols, kura vērtība ir FB.
Galvenais ir cena, kura vērtība ir 101.53.
Tātad tie ir divi atslēgas vērtību pārus.
Un atcerieties, PHP-- un tas ir atkal vienkārši veida sintaktisko starpību.
Tas vēl nav viss, kas intelektuāli interesanti.
PHP varētu būt rakstīts tas pats lieta kā follows-- cenas piedāvājumu, ir vienāds.
Un es varu mainīt šos kvadrātiekavās.
Un tad es varu mainīt to kotētā vārdu, "cena".
Un tad es neizmanto kolu.
Ko es izmantoju pagājušajā nedēļā?
Jā, vienādības zīme bultiņa bailīgs notācija.
>> Un tad es darīju to pašu šeit.
Pats šeit.
Un tas arī viss.
Tātad, tas ir labi, ja tas nav tiešām nogrimušais atmiņā tikai
vēl, jo tas ir patiešām intelektuāli neinteresanti.
Tas ir tikai sintaktisko atšķirības.
Bet idejas ir tieši tāds pats.
Inside šo mainīgo quote JavaScript
ir kolekcija atslēgas vērtību pārus, viens no kuriem ir simbols, viens no kuriem
ir cena.
Un es varu pie šīs vērtības ar šādu sintaksi.
Tāpat kā PHP, es varētu darīt kaut like-- ļaut
mani padara šo lodziņu nedaudz lielāks.
Tāpat kā PHP, es varētu padarīt this-- oh, dammit.
Nāc šurp.
>> Tāpat kā PHP-- Labi, mēs tikai izmantot prezentācijas piezīmes.
Tāpat kā PHP, es varu do $ quote $ quote ["simbolu"],
un tas saņems mani vērtība "simbolu."
JavaScript, tas būs identiski, ar kuru es varu tikai darīt.
Vienīgais, kas ir trūkst, ir dolāra zīme.
>> Tātad labi pietiekami, tad, tur ir ne visi, ka daudz jaunu sintakse.
Tātad, ko šodien mēs koncentrējamies uz, patiešām, ir dažas no idejām un pieteikumiem.
Un pirmais šāda programma, kas jums varētu
esmu redzējis, ja jūs ienira PSET septiņi jau ir tas sintakse.
Tātad PSET septiņās, ja esat redzējis vai nav redzējis vēl,
zinu, ka tur ir fails, kas mums dotu jūs sauc config.json-- JavaScript
Objekta papildinājumiem.
Kāpēc?
Mēs vēlējāmies, lai varētu sniegt Jums veidne ar dažiem atslēgas vērtību pārus.
Mēs vēlējāmies, lai varētu sniegt jums sarakstu uzņēmējas, nosaukums servera.
Mēs vēlējāmies, lai dotu jums vietturis savu lietotājvārdu
un vietturis paroli.
Ja jūs neredzat Tas vēl, nav jāuztraucas.
Vairāk par šo PSET septiņās [? spec. ?] Un tad,
protams, mēs vēlamies jums aizpildīt uz-DOS
jo, kad jūs piesakāties CS50 IDE, katrs no jums
ir savs lietotājvārds un parole.
>> Tātad mēs varētu esam lieto pusducis vai vairāk dažādu failu formātus.
Mēs varētu būt izmantojuši Txt failu.
Mēs varētu izmantot, CSV failu.
Mēs varētu esam izmantots INI fails, XML failu,
viss ķekars vairāk akronīmi ka Jūs, iespējams, nav dzirdējuši.
Tas ir sava veida patvaļīga beigās, dienā.
Bet super populārs šajās dienās ir teksta formāts sauc JSON-- JavaScript Object
Notation-- ka izskatās šādi.
Tas ir nedaudz mistisks, bet paziņojums modeļus.
Tu sāc ar atvērtu cirtaini lencēm, un jūs galu ar to pašu.
Iekšpusē tas ir kaut kas.
Tas ir galvenais, vērtību pāri.
Tātad tas ir objekts, kas es esmu skatoties uz ekrāna šeit
kas ir vienu atslēgu, kurai ir viena vērtība.
Un tikai secināt, pamatojoties uz iepriekšējais modelis, kas ir galvenais šeit?
Datu bāze, tad lieta kreisi no resnās zarnas.
>> Tagad, vērtība notiek, daudzkārtējās līnijas šajā laikā.
Bet vērtība sākas ar cirtaini uzmundrināt un beidzas ar cirtaini lencēm.
Tātad, ko jūs ierosināt, ir vērtības datu bāzes tips?
Vārdnīcu vai, vienkārši vairāk īsi, objekts.
Tiesības?
Tas ir sava veida datu struktūru, kas varat izmantot citas struktūras sevī.
Tātad, ja tas viss, ko mēs esam zvanot object-- un objektu
ir tikai ķekars atslēgu vērtības pairs-- vērtība pašas datubāzes ir objekts.
No datu bāzes vērtība ir visu ķekars Galveno vērtību pārus, no kuriem pirmais
ir uzņēmēja, tad vārds, tad lietotājvārds, tad parole,
Katrā no kuru vērtības, tikmēr, tas ir tikai garlaicīgi virknes pēdiņās.
>> Tātad, pat ja tas nav super skaidrs tikai vēl,
zinu, ka tas ir tikai standarts, diezgan garlaicīgs veids
datu glabāšanai standarta formātā.
Bet kopējā kļūdas jūs varētu veikt, pat PSET septiņās,
Ir maz stulba lietas, piemēram, ja jūs nejauši izlaist komatu tur.
Kas notiek, lai rezultātā failā ne vienmēr ir salasāms.
Ja jūs nejauši izlaist lietas, piemēram, citātus, tas nav būs lasāma.
Tātad tas ir diezgan nitpicky faila formāts, bet tas ir viens, kas ir super kopīgs.
Un mēs notikt izmantot to, lai arī Jums nav izmantot jebkuru JavaScript citādi,
in PSET septiņās.
>> Viss kārtībā.
Tik atceries šo bildi.
Mēs runājām par, HTML, ka kods varētu izskatīties šādi.
Tas ir hiperteksta iezīmēšanas valoda [Dzirdams], lai tikai "Sveiki, pasaule."
Bet tad mēs ierosināti bet atpakaļ, ka, ja tas palīdz,
jūs varētu vēlēties, lai sāktu domāt par šo jau kā koks.
Faktiski, atkāpes, kas mums izmantot tikai lasāmību dēļ
vai stils dēļ par kreisais var veida
pārtulkot šo koku, kur jums ir dažas īpašas saknes mezgla, ka mēs
vispārēji sauc dokuments, zem kura ir saknes HTML elements vai tag, HTML,
kas tad ir divi bērni, galvas un ķermeņa.
>> Un pēc tam, savukārt, galva ir nosaukums.
Un nosaukums ir teksta vērtību.
Un ķermenis līdzīgi ir teksta vērtību.
Tātad, ja jūs esat apmierināts teiciens ka jā, jūs varētu izmantot šo HTML
un izdarīt attēlu, piemēram, tas, labajā pusē
ir jauka garīgās modelis, jo tagad ka mums ir JavaScript, programmēšana
valoda, kas pārlūki var izpildīt un interpretēt par jums,
izrādās, ka to, ko mēs esam par to darīt kodu
ir sākt manipulēt ar šo koka struktūru atmiņā.
Mums nav būvēt koks atmiņā.
Mums nav jādara veida PSET pieci stila datu struktūra
sarežģītība.
Pārlūks, labi pietiekami, pēc interpretējot HTML augšas uz leju,
kreisi vai pa labi, ir burtiski gatavojas nodot mums ekvivalentu rādītājs
šim visam koku bez maksas.
Tas visu smago darbu.
Tas ir tas, ko Mozilla un Apple un citi ir izdarījis mūsu labā.
>> Un ar JavaScript mēs gatavojamies jāspēj kontrolēt un mainīt un darīt
interesantas lietas, ka koks, citādi zināma
kā DOM vai dokumenta objekta modelis.
Kāda veida lietām?
Nu, izrādās, ka JavaScript, tur ir
šis veļas saraksts notikumi, kas var notikt.
Un mēs neesam īsti izmantoti ka Vārds kopš nedēļas nulli un PSET
nulle, ja mēs runājām par nulles.
Lielākā daļa no jums, iespējams neizmantoja notikums jūsu Scratch projektā.
Bet jūs varētu atgādināt Vienkāršā Marco Polo
Piemēram, ja mums bija divi sprites, no kuriem viens teica, Marco.
Otrs no kuriem pēc tam, pēc klausīšanās un dzirdes šo notikumu, teica, Polo.
Ja tā nav, nekautrējieties atskatīties tik tālu atpakaļ.
>> Bet tas ir tikai, lai teikt, un jūs varat veida
izsecināt no nosaukumiem šiem lietas, JavaScript, izrādās,
gatavojas sniegt mums ceļu, lai klausītos par pele iet uz leju vai peles iet uz augšu
vai atslēga iet uz leju vai atslēgu iet uz augšu vai onsubmit onselect
vai onresizing kaut ko.
Citiem vārdiem sakot, jebkura fiziska darbība ka cilvēks var veikt ar pārlūkprogrammu
ka jūs darīt katru dienu, jūs varat rakstīt kods, kas klausās tiem notikumiem
un tad tas kaut ko piemērotu.
>> Piemēram, ja jūs izmantojat Google Maps, kas notiek, ja jūs noklikšķiniet un pārvietot
peles, parasti?
Ja jūs noklikšķiniet un velciet?
Yeah?
Tieši tā.
Karte sāk kustēties.
Tātad jūs varat kārtot redzēt, kas ir nekā šeit, kas ir tur.
Un kā Google īstenot šo?
Nu, iespējams, viņi izmantojot pāris šo notikumu
klausītāji, viens, ka saka, klausieties uz peles
down-- tad, kad lietotājs fiziski nospiež viņa skārienpaliktni vai viņa peli
uz leju.
Un tad mēs meklējam kaut kā pārvietošanās
vai kāds cits notikums, kas ļauj mums, lai attēlotu vilkt.
Un patiesībā, velciet ir līdzīgi šajā dot dot dot sarakstu iespējamo variantu.
>> Tātad tas būs spēcīgs veids, lai sāktu reaģējot uz lietotāja
pat pirms viņš vai viņa faktiski noklikšķina kaut kas līdzīgs skaidri iesniegt.
Bet mēs ejam, lai ieviestu pāris tēmas tur nokļūt.
Bet vispirms, pieņemsim pāreja zināmā faktisko kodu.
Tāpēc es iešu uz priekšu un atvērt dom-0,
kas ir ļoti vienkāršs piemērs šeit, ka, ja es tuvinātu vienkārši
ir šo ieguldījumu šeit par mani.
Un es iešu uz priekšu un ierakstiet "David" par manu vārdu un noklikšķiniet uz Iesniegt.
>> Un tad, lai gan sava veida lēti, es ir šo uzvedni, kas NOP augšu, kas saka,
"sveiki, David!"
Tātad šis ir sava veida tāpat kā mūsu "hello, pasaule"
ka mēs darījām awhile atpakaļ C un pat PHP, jo es esmu dinamiski
izvadīt manu vārdu.
Es varu darīt kāds cits vārds šeit.
Es varētu vienkārši mainīt to, piemēram, Hannah, noklikšķiniet uz Iesniegt.
Un tiešām, maz pop-up izmaiņas.
>> Tagad, pop-ups ir viens no lielākā daļa ļaunprātīgi iezīmes tīmeklī.
Un patiesībā, atpakaļ diennakti pop-up blokatori
stājās modē, jo jums varētu doties uz kādu website--
varbūt apšaubāma place-- ka tad pēkšņi
sākt peppering ekrānu ar visu ķekars pop-ups.
Un tā tas spēja pop up logi priekšā lietotājam
nav bijis īpaši ko cilvēce labi saņemtas.
Tātad, tas ir iemesls, kāpēc jūs redzēt Tas novērstu lieta,
kas tikai padara visa šī lieta neglīts.
Tāpēc mēs esam gatavojas nepieciešama labāks veids, lai nekavējoties lietotājam.
Bet tagad, kas, šķiet, darbojas.
Tik vienkārši intuitīvi, ko šķiet, notiek šeit?
Es iet uz priekšu un noklikšķiniet uz Iesniegt, un tad kaut kas notiek, ir skaidri.
Bet to, kas nenotiek, ka varēja notikt Pagājušajā nedēļā jebkurā laikā, es noklikšķinājuši iesniegt?
Kas nenotika uz ekrāna?
Sorry?
Pārlādēt.
Šis URL nemainījās vispār.
Es teicu, tas bija dom-0, un es esmu joprojām dom-0.
Parasti, mēs gribētu saņemt mainīts uz kādu citu URL, tāpat register.php vai tamlīdzīgi.
>> Bet pat tad, kad es atlaist šī lieta, noklikšķinot uz Labi,
Ievērojiet, ka URL paliek pilnīgi likt.
Un, patiesībā, ja es esmu mazliet skeptiski, ļaujiet man atvērt Chrome.
Ļaujiet man atvērt cilni Network.
Un pamanāt, ka tas ir tukšs brīdī.
Ļaujiet man iet uz priekšu un atkārtoti Maria.
Nav tīkla satiksmes whatsoever.
Tātad tur nav HTTP.
>> Tātad tiešām, ja es paskatos pirmkodu par this-- ļaujiet man aizvērt šo logu
un doties uz View Source.
Interesanti.
Izskatās, tur ir dažas jaunas birkas, starp tiem skriptu.
Tātad, pieņemsim to apskatīt ietvaros CS50 IDE tieši to, ko es nosūtīta lietotājam.
>> Tātad šeit is-- pieņemsim koncentrēties tikai uz HTML.
Lūk apakšējā puse no DOM 0.html.
Un paziņo, ka tā ir ieguvuši titulu, galvas tag, ķermeņa tag, forma tag.
Bet ko lec ārā, lai jūs kā atšķirīgs, it īpaši, ja jūs nekad neesmu
uzrakstīts kāds JavaScript sevi.
Ļaujiet man ritināt mazliet pa labi šeit.
Man savu ieguldījumu, cits ieeja iesniegt.
Man ID, kas ir sava veida jaunu.
Bet mēs to redzam ar CSS.
Kas vēl noteikti ir jauns?
Yeah?
Nice.
>> Viss kārtībā.
Tātad, kur ir teikts onsubmit, paziņojums, kas, šķiet, sekot.
Tas ir atribūts HTML nomenklatūrā.
Tā vērtība ir tas citēts string šeit.
Un tas izskatās mazliet dīvaini no pirmā acu uzmetiena.
Tas nav HTML.
Tas nav CSS.
Tas ir, kā jūs varētu uzminēt, JavaScript.
Tāpēc šķiet, ka iebūvēts šis mājas lapa ir funkcija sauc sveicināt.
Un es esmu secinājusi, ka tikai jo tas ir vārds, sasveicināties.
Tas ieguva atklātu paren, tuvu paren, semikols.
Izskatās C funkciju, izskatās PHP funkciju.
>> Un tiešām, tas notiek, lai būt JavaScript funkcija.
Tad es esmu atpakaļ nepatiess.
Mēs būsim atpakaļ ka tikai brīdi.
Bet kur ir šī funkcija definēta?
Nu ļaujiet man ritiniet uz augšu uz augšu faila.
Un, pat ja tas ir garš līnija, tas ir salīdzinoši vienkārši.
Ļaujiet man zoom out šeit un jākoncentrējas uz šiem četriem līnijām.
>> Tātad JavaScript, tikko piemēram, PHP, jūs vienkārši
teiksim, burtiski, vārds "funkcija," nosaukums funkciju,
un tad iekavas ar kādu arguments-- nekādus argumentus šajā lietā.
Un tur nav atgriešanās tips JavaScript, tāpat kā PHP.
Tātad, tas ir nedaudz brīvāku nekā C. Atvērt cirtaini lencēm, tuvu cirtaini lencēm.
Iebūvēts JavaScript ir function-- nav ieteicams function--
bet funkcija sauc brīdinājums kuru vienīgais mērķis dzīvē
ir uzvilkt ka diezgan neglīts ātri, ka mēs redzējām pirms brīža.
>> Tagad tas ir sava veida kumoss.
Kas notiek šeit?
Tāpēc sāksim ar izcelt viss šeit.
Tas ir tas pats arguments, lai brīdinātu.
Un to, kas notiek?
Tas tikai izskatās virkni.
Un izrādās, atšķirībā no PHP un atšķirībā C, tas nav svarīgi JavaScript
ja jūs vienu pēdiņām vai pēdiņas.
Tie būs līdzvērtīga.
Un godīgi sakot, tas ir tikai populārs šajās dienās
JavaScript programmētājiem vienmēr Izmantojiet vienu pēdiņām kāda iemesla dēļ.
Tas ir tikai lieta, ko darīt.
Bet mēs varētu izmantot dubultās pēdiņas, kā arī.
>> Tātad plus ir jauns raksturs.
Bet tiem no jums, kas esat darījuši šo pirms, ko tas plus nozīmē?
Jā.
Saķēdēt.
Tātad mēs redzējām šo PHP.
Tur ir tikai dot operators PHP, kas
būs saķēdēt divas stīgas kopā.
C bija sāpes kaklā, lai to paveiktu.
Atsaukt no PSET sešiem, kas bija especial sāpes kaklā,
Jums būtu jāizmanto kaut kas līdzīgs strcat
pēc piešķirot atmiņu uz skursteņa vai kaudzes.
Jums bija lēkt caur stīpām tikai saķēdēt divas stīgas.
JavaScript, tas ir super vienkārši.
Tikai izmantot plus operatoru starpā.
>> Tātad komplekss izskata lieta, šķiet, ir tas
jo beigās Tas viss string, es tikko
saķēdēt par izsaukuma zīmi.
Tātad, ja tas, ko tika popping up tika "sveiki, David", "hello, Hannah,"
"sveiki, Maria", un tā tālāk, skaidri ka vidējā lieta starp diviem
plusi ir jādod man pieeju ko?
Kas tur pārliecināts?
Jā.
Tāpēc es ņemšu izliekoties šeit atbildēt savu vārdu, vai ne?
Tātad savu vārdu popped up finālā rezultāts. Tātad, ko tas nozīmē?
Nu, es ierosināju agrāk, jo bilde, ka tā saukto DOM
ir šo īpašo saknes elements ceļu līdz top sauc dokuments.
Un tagad, izrādās, ka notiek par īpašu pasaules mainīgais
JavaScript, iebūvēts, kas ir viss ķekars noderīgu funkcionalitāti.
Starp noderīga funkcionalitāte ir spēja iegūt jebkurā pēcnācējs mezglā.
Šie kvadrātos vai taisnstūros vai elipses ir tikai mezglu kokā, lai runāt.
>> Tātad izrādās, ka iebūvēts JavaScript ir dokuments objekts
ir funkcija, citādi zināma kā metode, kas sauc getElementById.
Par zvanot sintakse funkcija JavaScript
kas ir iekšpusē no priekšmetu vai mainīgais ir tikai ar dot papildinājumiem.
Un mēs redzējām šo C ko struct sintakse.
Redzi šo PSET septiņās, veida, veida, kad jūs redzat CS50 :: vaicājumu.
Kols resnās PHP ir vēl viens veids, aicinot funkciju, kas ir
iekšpusē kādu objektu.
>> Bet tagad JavaScript, tas ir tikai dot.
Un tāpēc šī funkcija, labi pietiekami, sava veida
saka, ko tas does-- nokļūt elementu pēc ID.
Elements ir tikai vēl viens vārds par taga vai mezglu DOM.
Un tā iegūtu elementa ID "Nosaukums" nozīmē this-- šeit ir mana HTML.
Un, pamatojoties uz šo HTML, ko mezgla vai kāda HTML tagu es esmu
būs programmiski jānodod zvanot document.getElementById?
>> Jā, tieši tā.
Es esmu gatavojas saņemt ievadi elements tur kuras ID ir "vārds."
Tātad īpaši, jūs varat domā par šo funkciju,
getElementById, kā veids, dodot atpakaļ rādītāju uz šo konkrēto mezglu
kokā.
Mēs neesam sagatavots šis koks, bet tas ir veids, kā
iegūt piekļuvi ka taisnstūra vai taisnstūris
ar unikāli identificē to, izmantojot savu ID.
>> Tagad, kāpēc tas ir noderīgs?
Nu, izrādās, ka tad, kad tu būsi
ka mezglā, ka taisnstūris no bilde, ka mezgla iekšpusē no tā,
savukārt, ir visu ķekars properties-- atslēgu vērtību pārus
vai dati, no kuriem viens ir sauc vērtība.
Tātad burtiski, tas ir sava veida kumoss, lai izskaidrotu visu lieta.
Bet beigās, dienā, viss tas ir dot jums
virkne, ka lietotājs drukāti Šajā hierarhiskā veidā.
Bet man nepatīk Pāris no šīm lietām.
Vai drīzāk, tur ir daži zinātkāre joprojām.
Visi, kas šķita strādāt.
Kāpēc jūs domājat, ka es atgriezos nepatiess pēc zvana sveicināt?
Tas izskatās mazliet neglīts, ka Man ir divi paziņojumi tur
atdalīti ar semikoliem.
Veikt minējums.
Ja es izņemta atgriezties viltus, ko var notikt, tikai instinktīvi?
Atvainojiet, saku vēlreiz?
>> Atvērt ķekars Windows.
Tātad, iespējams, varbūt kaut kas piemēram, ka varētu notikt.
Kas vēl?
Var iesniegt pieprasījumu, ja?
Uz to pašu lapu.
Tātad, jo fakts, ka tas, ka tuvāk atbildēt šeit,
kaut gan, atšķirībā pagātnē, es esmu ne
noteikts rīcības atribūts, kas parasti mums ir jādara.
Izrādās tur ir noklusējuma. Ja jūs nenorādāt rīcību,
tas ir tāpat kā teikt citātu, likt pēdiņas beigās vai nosaukums failu pati,
kas šajā gadījumā būtu būt, piemēram, dom-0.html.
Tas ir tikai sava veida secināt, vai drīzāk netieši.
>> Un tāpēc, ja man nav to izdarītu, pieņemsim paziņojums.
Ļaujiet man glābt šo.
Un es esmu izņemta atgriezties viltus.
Ļaujiet man iet atpakaļ uz šo piemērs un spēks pārlādēt to.
Un jūs varētu būt redzējis man ieteikt šo par CS50 Apspriest ķekars reizes.
Ja kaut kas kādreiz rīkojas bailīgs un pārlūks nav, uzvedas kā jūs sagaida,
nereti jūs vēlaties turēt Shift un pēc tam noklikšķiniet uz pārlādēt.
Tas liks katru failu, lai pārlādētu un ne lietot jūsu pārlūkprogrammas vietējo kešatmiņu
vai kopija, tā, ka tagad, ļaujiet man iet uz priekšu un atvērt manu inspektora cilni Network.
Es esmu gatavojas klikšķi Saglabāt Ieiet jo es
nevēlos to dzēst rindas kad man whisked prom citur.
>> Ļaujiet man iet uz priekšu šeit un ierakstiet Andi, noklikšķiniet uz Iesniegt.
Viss kārtībā.
Tas šķiet kā gaidīts.
Tā saka "hello, Andi."
Ļaujiet man noklikšķiniet uz Labi.
Interesanti.
Ievērojiet, ka lapa mainījusies, lai gan sākotnējā lapā.
Paziņojums URL veida mainīta.
Tā piebilda, jautājuma zīme, kas ir parasti rādītājs
ka mēs centāmies iesniegt kaut ko.
Un pēc tam apakšā, vēl skaidrāk,
Šeit ir faktiskā HTTP pieprasījums, kas ieguvuši atbildi 200, kas
cēla mani atpakaļ šeit.
>> Tātad tas nav tas, ko mēs vēlamies darīt, vai ne?
Jo es negribu pārlādēt visu lapu.
Es nevis gribēju atgriezties viltus lai īsslēguma
pārlūka noklusējuma uzvedība, kas bija, protams, iesniegt lapu.
>> Tātad pieņemsim apskatīt nedaudz labāks piemērs.
Tas ir dom versija viens.
Un paziņojums sekojošo.
Tas ir OK, ja jums nav grok visi no rindas kodu.
Bet to, kas būtiski atšķiras par šo īstenošanu?
Es paredz tā uzvedas Tas pats, tas pats.
Ko es esmu, protams, darīt citādāk?
Yeah?
>> Mērķauditorija: [nedzirdama].
DAVID Malan: Jā.
Tātad funkcija ir definēta differently-- citiem vārdiem sakot, prom no formas,
tur uz līnijas 7-- vai Drīzāk line 8-- vairs
man ir onsubmit atribūts.
Iepriekšējā Piemēram, man bija šī.
Un tad es burtiski uzrakstīju savu kodu šeit.
Un tad es teicu atgriezties viltus.
Un, ja tas nav berzēt Jūs nepareizi vēl,
tai vajadzētu sākt, ja kā, tāpat kā HTML,
kad mēs sākām sadarboties maisīt to ar CSS stilā atribūtiem,
tas tikai sāka iegūt mazliet netīrs vai justies mazliet nepareizi.
>> Tāpat šeit, ja Jūs sākat lietot HTML,
un tad tu automātiski plunkšķis kādu JavaScript kodu
vidū ir pēdiņās, tas ir nav būs ļoti uzturams.
Tiesības?
Tas nav pat skaidrs sākumā vietu, kur JavaScript kods.
Tātad, tas būtu patiešām jauki, kā princips labāku dizainu,
pieņemsim saglabātu mūsu HTML pilnīgi atdalīt no mūsu JavaScript.
>> Tātad, lai to izdarītu, tas, ko mēs esam darīts šeit ir following--
mēs vienkārši izmantot HTML tikai atzīmes.
Un tā versijā viens no šo, viss Man ir forma ar unikālu ID.
Un tad uz leju šeit, es esmu ņemot priekšrocības speciāla iezīme JavaScript
ar ko es varētu būt, kas ir sauc anonīms funkcija.
Tātad izrādās, ka, ja es aicinu document.getElementById par "demo"
tas ir tāpat kā dod man rādītāju šis mezgls manā kokā, formu elements,
tā sakot.
>> Tagad, es tikai zinu no zinot mazliet HTML
Tagad mēs esam izlasot kādu online norāde, ka forma elements atbalsta
viss ķekars notikuma listeners-- in Citiem vārdiem sakot, veļas saraksts notikuma
klausītāji, ka mēs redzējām pirms brīža.
Es zinu, lasot dokumentus ka onsubmit ir derīgs pasākums
klausītājs par formu elementu.
>> Tātad, kad es zinu, ka, tas ir droši man darīt
following-- iegūt šo mezglu no koka, formu elements,
un piekļūt tā tā saukto onsubmit īpašums.
Tātad dot tikai nozīmē Tas ir īpašums,
kā īpaša vērtība iekšpusē no tā.
Un ko datu tips es esmu piešķirot, acīmredzot,
uz onsubmit, kas ir efektīvi mainīgi iekšpusē
Minētās mezglu kokā?
Tā ir joma iekšpusē šī struct.
Kas ir datu tips?
>> Funkcija, jā.
Tātad izrādās, ka PHP ir šis.
Un, pat ja mēs nav jums pastāstīt par to,
C ir arī funkciju norādes, ka spēja iet un nodot funkcijas
kā mainīgie lielumi "vērtībām paši.
Un mēs nebrauksim regresēt atpakaļ uz C.
Bet tagad, izrādās, ka uz labajā pusē šeit,
pat ja tas izskatās mazliet bailīgs, tas nozīmē, hey pārlūku,
man funkciju.
Es neesmu gatavojas pat apnikt dodot tas vārds, jo es esmu burtiski
gatavojas piešķirt sauksim to adrese šīs funkcijas
nekavējoties onsubmit.
Citiem vārdiem sakot, pārlūku, jums nav nepieciešams zināt, kas šo funkciju sauc.
Jums tikai jāzina kur tas ir atmiņā.
Un tā tas pietiek tikai, lai ir vienādības zīmi tur
un nevis apgrūtināt nosaucot šo, piemēram, foo vai sveicināt vai jebkuru citu vārdu.
Un tagad tas ir tikai stilistiska lieta.
Es varētu pārvietot šo cirtaini lencēm uz the-- sorry-- nākamajā rindā
tāpat kā mēs parasti darīt CS50.
Bet JavaScript, tas ir faktiski stilistiski kopīgs
lai tikai saglabātu cirtaini lencēm, tad Pirmais, par šo pirmajā līnijā.
>> Taču turpmāk, tur ir nekā interesanta.
Tas atvērts cirtaini lencēm tikko norobežo sākumu manu darbību.
Funkcija tagad identiski, izņemot es esmu
ietvēra return false iekšpuses šo funkciju.
Jo izrādās out-- un jūs tikai
zinām no lasījumā documentation--
ka, ja funkciju, kas jūs piešķirat uz onsubmit apdarinātājs atgriež false,
pārlūks vienkārši zina un piekrīt neiesniegt veidlapu uz serveri.
Ja tā atgriežas taisnība, tā iesniegs tas uz serveri dēļ mēs redzēsim
ir noderīgi tikai brīdi.
>> Un tad semikols pēc cirtaini lencēm tur vienkārši
nozīmē, ka es esmu darīts definētu funkciju.
Jūs zināt, ko zvanīt, tiklīdz kā jūs dzirdat iesniegumu.
Viss kārtībā.
Tas joprojām ir apstrīdami veida neglīts.
Tātad, ko vēl mēs varam darīt?
>> Nu, izrādās, tad variants divi, kas ir last--
un mēs vienkārši skatienu šis.
Pie pastāv risks, ka tas izskatās sliktāk, izrādās,
ka tur ir bibliotēka pasaule sauc jQuery.
Un jQuery ir super populārs JavaScript bibliotēka
tas ir tik populārs, ka lielākā daļa jebkurš JavaScript-- tas nav
neparasti cilvēki jauc jQuery ar JavaScript.
Kāpēc?
JavaScript pati ir ļoti runīgs veidi, kā to things--
document.getElementById, dadadadadada.
Jūs galu galā, kam ļoti garās rindas kodu.
>> Tātad puisis nosaukts John Resid, kas faktiski darbojas uz starta
up šajās dienās, iznāca Ar šo bibliotēku gadiem
pirms, ka daudzi cilvēki ir veicinājuši to sauc jQuery, ka izmaiņas
sintakse šādā veidā.
Un tikai, lai jūs esat redzējuši šo, jo jūs vienmēr
redzēt šo, ja darot tīmekļa galīgais projekts,
tas būtu ekvivalents veids Īstenojot šo pašu funkciju, izmantojot
Šis īpašais bibliotēka.
>> Tagad, nevis kaitināt to nošķir kopumā,
pieņemsim tikai apskatīt dažas modeļiem.
Tas sintakse, šķiet, ir cik anonīmi funkcijas
vai nezināms funkcijas vai AKA Lambda funkciju?
Divi, vai ne?
Un jūs zināt, ka, pat ja Jūs neesat super comfy ar to,
tikai ar to, ka tas saka funkcija () divreiz.
>> Un izrādās, ka ko šis kods ir doing--
un mēs attiecas uz tiešsaistes atsaucēm, galu galā, kādu palīdzību ar šo.
Tas tikai nozīmē, ka tad, kad dokuments ir gatavs,
iet uz priekšu un reģistrēt šādu funkciju
kā iesniegt apdarinātājs par HTML elements, kura unikāla ideja ir demo.
Un tad, kad tas notiks, aicinu šīs divas rindiņas kodu.
Un tas ir, traģiski, vairāk runīgs veids, kā pateikt atgriezties viltus.
Un mēs jau tas tikai tāpēc, ka jūs redzēsiet kodu patīk šī tiešsaistē.
Un tas nekas nebiedē.
Bet drīzāk, paturiet prātā, ka tas, kas ir būs izplatīta JavaScript
ir šī paradigma.
Un tā tas ir iemesls, kāpēc mēs parādām to tagad.
Viss kārtībā.
Tātad bez mājokļa pārāk daudz par šo sintaksi,
ir ir kādi jautājumi par Šie piemēri vai idejas līdz šim?
Viss kārtībā.
Tātad pieņemsim izmantot šo par kaut ko noderīgu.
Making mājas lapu, kas vienkārši saka sveiki, tik un tā nav tik interesanti,
ne underwhelm.
Šis viena nav, būs skaista, bet tas ir gatavojas darīt kaut ko noderīgu.
Ļaujiet man iet atpakaļ uz manu direktorijā šeit un atvērt, teiksim, forma-0.html.
>> Tātad pieņemsim, ka tas ir pirmkursnieks klātienē sports reģistrācijas lapā
bez CSS vai jebkura sajūtu dizainu.
Un es gribu iet uz priekšu un reģistrēties šeit ar paroli.
Un es esmu gatavojas piekrist noteikumiem un nosacījumiem un noklikšķiniet uz reģistru.
Un tagad mājas lapā saka: "Tu esi reģistrēts! (Nu, nav īsti.) "
Tas šķiet kā tā strādāja, bet ļaujiet man iet uz priekšu un spēku papildināšanas.
>> Un ļaujiet man teikt, nē, jums nav vajag manu faktisko e-pasta adresi.
Vai varbūt mēs vienkārši sakām pastu tur.
Parole būs, piemēram, 12345.
Un tad, tikai tāpēc, ka es esmu idiots, tagad tas ir 123456789.
Un es neesmu gatavojas pārbaudīt savu kastīti.
>> Hmm.
Viss kārtībā.
Tātad tur ir vairākas iespējas uzlabošanai šeit.
Un jūs zināt, vai redzēs PSET septiņi, ka jūs varat rakstīt code--
un jums nāksies rakstīt kodu PHP-- aizstāvēt
pret šiem lietotāju veidiem kļūdas, jo lietotājs skaidri
nav sadarbojies.
Un viņš nav devis jums visu vērtībām jūs vēlētos vai pat formātā
kas jums gribēja tos.
Tātad jūs redzēsiet PSET septiņās ka Mēs, protams, varētu būt daži
ja apstākļi, kas saka ja e-pasta adresi
nav username@something.edu, mēs varētu tikai
saka žēl un atvainoties lietotājam daudz, piemēram, jūs varētu būt PSET septiņās.
Vai arī, ja tās nav pārbaudījusi, ka lodziņu, izrādās PHP, jūs varat atklāt, ka,
pārāk.
Un, protams, ja paroles nesakrīt kā register.php
par PSET septiņiem, jūs varat atklāt, ka.
Bet tas ir sāpes kakla, jo tagad viņi pieprasa
mums iet visu ceļu uz serveri.
Lietotājs ir informēts par kļūdu.
Un vismaz, ja jūs izmantojat daži mīļotājs paņēmieni,
tagad viņi ir noklikšķiniet aizmugurējo bultiņas.
Vai tas nebūtu jauki, piemēram, daudz tīmekļa vietnes, šodien,
ja jums bija tiešāks atsauksmes, uzreiz?
>> Citiem vārdiem sakot, ļaujiet man iet uz versiju viens, kas būs ne prettier.
Bet tas ir šī iespēja.
Malan, 12345, 123456789, nav gatavojas pārbaudīt lodziņu, reģistru.
Paroles nesakrīt.
Tātad, pat ja tas pop-up ir ugly-- mēs varam aizvietot šo beidzot
ar kaut ko līdzīgu sāknēšanas, ko jūs redzēsiet PSET septiņās
ir ļoti populārs library-- I did atklāt, ka paroles nesakrīt.
Viss kārtībā.
Nu, ļaujiet man noteikt, ka lietotājam.
Ļaujiet man iet uz priekšu un saka, 12345, 12345.
Joprojām nav pārbaudot līgumu.
Jums jāpiekrīt noteikumi un nosacījumi.
Tad kāpēc?
>> Ja mēs esam jau posited ka tur ir veids,
un mēs esam vajadzīgi jums PSET septiņi atklāt kļūdu
apstākļi, piemēram, tas server-side, kāpēc es
raizēties arī darot JavaScript?
Kas ir arguments par labvēlība piebilstot, ko
jūs gatavojaties redzēt kā some-- tur ir papildu sarežģītību.
>> Varbūt nav otrādi.
Kas tas varētu būt?
Mērķauditorija: [nedzirdama].
DAVID Malan: Ak, interesanti.
Potenciālie izmanto.
Tik pārliecināts, ja jūs neesat apstrādes kļūdains lietotāja ievadi, ka liels,
varbūt tas viss ir labāk, ja tā nav pat sasniegt savu serveri.
Es liktu atpakaļ tur, un teiksim, jums ir iespējams
noteikt abas šīs problēmas.
Bet tas ir godīgi.
Kas vēl?
>> Mērķauditorija: [nedzirdama].
>> DAVID Malan: Jā.
Šis kods, kā mēs teicām iepriekš, ir interpretējami uz klienta pusē.
Tas nav apnikt serveri, kas nozīmē, ka tā nav
ietekmēt servera slodzi vai jaudu.
Un tagad, par maz veco mani, tam nav būtiskas ietekmes
jo man ir viens lietotājs tieši tagad.
>> Bet, ja tu esi kāds mājas lapa pienācīgas lieluma,
sevišķi lielākais, piemēram, Facebook, jo vairāk jūs varat saglabāt cilvēku off
Jūsu servera, jo labāk jo servera, protams,
ir tikai ierobežots daudzums RAM, ierobežots skaits gigahercu,
ierobežots vairākas lietas tā var darīt laika vienībā.
Tātad, ja ir vairāk cilvēku pasaule hitting savu serveri,
nejauši piesakoties nepareizi, tikpat labi, ja jūs
var saglabāt šo atslogo jūsu serveri.
Plus, jo īpaši attiecībā uz mobilo device-- ja jūs esat kādreiz
ieiet my.harvard vai Yale ir netid vai tamlīdzīgi,
tur ir šis latentais ar daudz tīmekļa vietnes, piemēram, ka, saskaņā ar kuru tā veic,
piemēram, nopelt otrā vai divas dažreiz.
Un tad, mans Dievs, ja tu mistype, tad jums ir hit atpakaļ un pārtaisīt to.
Tātad tur ir latentuma, jo īpaši par lēnāku tīkla savienojumus.
Bet JavaScript, jo tas darbojas uz klienta
un nav nepieciešams, lai iet uz priekšu un atpakaļ pāri potenciāli lēnu internetu
savienojumu, jūs varat saņemt gandrīz acumirklīga atsauksmes.
>> Tātad pieņemsim apskatīt šo.
Ļaujiet man atvērt forma-0 un apskatīt HTML šeit.
Un pieņemsim tikai redzēt, kas notiek.
Tas ir veids, kura darbība ir register.php.
Es esmu tikai izmantojot saņemt tik ka es varētu redzēt URL.
Bet paroles, mēs gribētu, protams, gribam mainīt šo post realitātē.
Lūk ievades lauks tipa tekstu.
Lūk, vēl viens ievade lauka tipa paroli.
Te ir, ja jūs nekad neesmu redzējis, ieejas tipa rūtiņu.
>> Bet tur nav JavaScript šeit whatsoever.
Tas ir tikai HTML, ka iet uz register.php.
Bet versijā vienā, kur es sāka saņemt šo pop-ups,
pieņemsim redzēt, kas patiesībā notiek šeit.
Versijā vienu, ko Es esmu gatavojas see-- I
Domāju, ka es varētu apstāties pietiekami ar pietiekami vārdiem, bet man beidzās.
>> Versijā one-- tur mēs ejam.
Versijā vienu, pamanīsiet following-- un nav labākais īstenošanu,
bet tas ir mans pirmais.
Ievērojiet, ka zem forma, man ir skriptu tag.
Un skripts tag nozīmē, hey, pārlūku, šeit
nāk daži kodu, parasti, JavaScript.
Un tagad, paziņojums, ko es daru.
Par line-- Es tikko lasīt it-- līnija 32, tā saka,
VAR form-- tik dod man mainīgais sauc forma.
Un pēc tam saņemt document.getElementId par "reģistrāciju."
Kas tas ir?
Nu, ļaujiet man attīt šeit.
Un paziņojums, ah, es deva formas elements patvaļīga bet aprakstošs ideja
reģistrācijas.
Tātad tas dod man mainīgais, kas ļauj man, lai greifers šo mezglu,
ka taisnstūris kokā sauc formu.
form.onsubmit līdzekļi, hey pārlūku, reģistrēt notikumu klausītājs
Šajā veidlapā.
Citiem vārdiem sakot, ja šo veidlapu iesniegts, izpildīt šādu kodu.
Tas nav nepieciešams nosaukumu, jo kāpēc jums ir nepieciešams zināt nosaukumu?
Jums tikai jāzina ko izpildīt, ergo
tas ir anonīms vai lambda funkcija.
Un tas funkcija ir visas šīs līnijas šeit.
Un tagad, ja godīgi, pat ja jums varētu kādreiz uzrakstīts JavaScript
pirms, tas ir tikai C un PHP loģika.
Tātad, ja form.email.value == "" - Tātad, ja e-pasta lauks ir tukšs,
bļaut pie lietotāja ar "You must norādiet savu e-pasta adresi. "
Else ja form.password.value ir tukšs kliegt uz lietotāju,
"Jums ir sniegt savu paroli."
>> Vēl interesanti loģiski, ja form.password.value nav
vienāds form.confirmation.value-- kur bija apstiprinājums nāk no?
Ļaujiet man attīt.
Nu, es sauc šo ievade lauks šeit parole.
Un es sauc šo vienu šeit apstiprinājums.
Es varētu būt to sauca parole divas vai kaut kas cits.
Es esmu tikai loģiski pārbaudot ka šie divi ir vienādi.
Else-- izrādās tas ir Mr Boole again-- Būla vērtību, rūtiņu.
Tātad, ja es saku, izsaukuma point-- ja ne form.agreement.checked,
bļaut pie lietotāja, kā arī.
>> Tātad šis sintakse jūs redzēsiet, ir ļoti bieži JavaScript,
kur esat šo punktoto notācija.
Tu sāc ar objektu šeit.
Jūs nirt dziļāk, lai a to īpašums, piemēram, paroles.
Un tad jums tās faktisko vērtību.
Un atkal, šeit ir ieejas.
Šeit ir vārds parole.
Un tā vērtība ir neatkarīgi cilvēks ir faktiski drukāti.
>> Tātad visi no šiem lietas, es atgriezos nepatiesa.
Bet, ja ne, es atgriezties taisnība.
Un tāpēc tagad mēs redzam pārliecinoši izmantošana, kad
jūs varētu atgriezties pie viltus pārtraukt to, ko lietotājs ir darot
un dara viņam vai viņai izvēlēties atkal vai rakstīt atkal.
Pretējā gadījumā mēs atgriežamies taisnība.
>> Un ļaujiet man iepazīstināt vienu cits variants tas tikai
sēklām to zināmu sapratni.
Nu, no šī 2 versiju, forma-2-- Es darīšu to ar viļņa rokas.
Tas ir, tiem, ziņkārīgs, jQuery versija,
tiem no jums, kas varētu vēlēties, lai plunčāties konkrētajā bibliotēkā.
Bet pieņemsim start-- un kādi jautājumi?
Ļaujiet man apstāties uz brīdi tāpēc, tas bija ātri un daudz.
>> Bet jauka lieta šeit ir tas, ka visi no koda ir diezgan daudz to pašu.
Jaunais sīkumi ir tas, kas ir dom?
Kādi ir šie taisnstūri?
Kādi ir šie mezgli?
Kas ir anonīms funkcija?
Kas ir notikums apdarinātājs?
Bet par laimi, lielākā daļa, kas ir tikai pilns aplis no, teiksim, nedēļas nulles.
Viss kārtībā.
Tātad kaut kas nedaudz vairāk interesants?
Nu, pirmkārt, ļaujiet man iet uz priekšu un atvērt Google Maps.
Un jūs pamanīsiet, ka priekšlikums brīdis, par mirklī,
pamanīt to, kas notiek, kad Es noklikšķiniet pietiekami ātri.
Un šis savienojums Harvard ir tik ātri, ka jums nav īsti paziņojums to.
Bet ko jūs veida veida redzēt ja es noklikšķiniet un velciet ļoti ātri?
Tie no jums skatīties online, ja jums lēns tas 0.5x ātrumu,
Jūs varat redzēt šo labāk.
>> Kas notiek tikai pirms es noklikšķinājuši un vilka?
Ļaujiet man mēģināt here-- man darīt kaut kas cits, piemēram, 90210.
Iesim tālu.
Tas bija ļoti ātri, too.
Kā par Disney World?
Tur mēs ejam.
LABI.
Ko jūs redzat par sekundes?
Tāpat, piemēram, laukumos, vai ne?
Vietturi Flīžu?
>> Nu, ko te notiek?
Google Maps ir jauka piemērs Šī tehnoloģija, kas sauc AJAX.
Un tas ir, ja mēs sāksim izmantot JavaScript īpaši
pievilcīgs veids.
Atpakaļ dienā, tur bija Šī tīmekļa vietne sauc MapQuest.
Un es būtu pieņemts screenshot šīs no 1990,
kur, ja jūs vēlētos uzmeklēt šeit uz kartes,
Jūs burtiski noklikšķiniet uz bultiņas augšā, kas parādīja,
atšķirīgs kvadrāts kartes.
Ja jūs vēlētos, lai pārvietotos pa kreisi, jūs uzklikšķināt bultu, kas parādīja,
atšķirīgs kvadrāts kartes.
Un dažas tīmekļa vietnes vēl darīt šodien.
Bet pat MapQuest ir gotten labāk, piemēram, Google Maps.
>> Tā vietā, kas ir labāks šiem dienas ir tīmekļa vietnes, kas izmanto AJAX.
AJAX-- citādi zināma kā Asynchronous JavaScript un XML,
kas ir tikai iedomātā veids, kā pateikt tehnoloģija vai tehnika, kas
ļauj pārlūku, izmantojot JavaScript veikt papildu HTTP pieprasījumus
pēc tam, kad lapa ir ielādēta.
Tātad, ko tas nozīmē?
Nu, tas būtu sava veida kaitinošas Gmail
ja katru reizi, kad gribēja pārbaudīt savu pastu,
jums bija burtiski hit Control-R vai Command-R vai noklikšķiniet uz pogas Pārlādēt
un visa darn lapa varētu pārlādēt.
Tiesības?
Tas flash white droši vien par sekundi.
Jūs varētu redzēt stulba progress bar.
Un tikai, lai redzētu, vai jums ir jauns pasts, visa mājas lapa un URL
jūs esat būs pārlādēt.
>> Bet tas nav tas, kas notiek Gmail.
Tiesības?
Kad jūs saņemsiet jaunu e-pastu Gmail, kas notiek uz ekrāna?
Tas tikai rāda uz augšu, pa labi?
Tā vienkārši maģiski parādās kā jauns rindu tabulā.
Kas faktiski ietver pienācīga summa sarežģītības.
Patiesībā, ja jūs domājat par šo koku, kas, lai gan ir vienkāršs šeit,
Gmail-- un man ir jāmeklē pie koda būt sure--
iespējams, ir HTML tabulu vai varbūt Nekārtots saraksts, ka tas padara
katram jūsu iesūtnēm e-pastiem, kā.
>> Un tādēļ, ja jūs varat iedomāties, tas tur ir koks atmiņā, kad jūs esat
Izmantojot Gmail, kas izskatās veida veida kā šis, kad Google saprot, ooh,
Jums ir jauna e-pastu, tā nav vēlas atjaunot visu koku.
Drīzāk, tā vēlas atrast mezglu koks, kas pārstāv jūsu iesūtni
un vienkārši ievietot jaunu mezglu.
>> Tik ļoti līdzīgs PSET pieci, kur jums nācās ievietot mezglu uz hash tabulu,
Līdzīgi dara Google, via JavaScript kodu, ka tā ir rakstīts,
Traverse šo koku, izdomāt, kur ir tā, ka iesūtne daļa no loga,
un pēc tam ievietotu jaunu rindu.
Un jauna rinda nozīmē tikai vienu vai vairāk jaunos punktus kokā.
>> Un tā AJAX ir šī tehnika kas ļauj tieši tā.
Kad esat apmeklējis URL, tomēr traks ilgi tas ir,
un pēc tam, kad lapa ir piekrauts, jūs joprojām varat
sagrābt vairāk datus no internet-- vai tas ir
Uzrakstīt vai flīzes no map-- paķert to aizkulises
un pēc tam ievietojiet to lapā tā, ka cilvēka nav patiešām
jāgaida to.
>> Facebook Messenger darbojas tādā pašā veidā.
Jebkuru citu websites-- skaits oh, patiesībā, pat tas.
Es domāju, tas ir, godīgi sakot, sava veida kaitinošas iezīme šajās dienās.
Ja es sāktu meklēt šo cats-- ir sava veida briesmīgs lietotāja pieredzi.
Tas tikai sāk meklēt mani.
Nu kas tas ir dara?
Šis URL nav mainījies jo es sāku rakstīt.
Bet, kas notiek visā wire-- OK, hmm interesanti.
Kas notiek visā stieple šeit tikai kļūst weirder.
>> LABI.
Tāpēc ļaujiet man iet uz priekšu un pārbaudīt elements un dodieties uz cilni Network
un mēģināt padarīt šo tehniskā un mazāk par kaķiem.
Kā es rakstīt, burtiski, kaķi and-- Kas notiek
per-- es neesmu gatavojas klikšķi, ka.
Viss kārtībā.
Tātad šeit lejā, kas notiek katru reizi, kad es rakstīt raksturs, acīmredzot?
Tāpat, zems līmenis?
Kas notiek ar katru no tiem, rakstzīmes es esmu rakstīt uz manu klaviatūru?
Yeah?
Mērķauditorija: [nedzirdama].
>> DAVID Malan: Tieši tā.
Katrs no šiem burtiem ir dodas uz Google, pa vienam.
Tos veidojot virkni par to serveri, kas apzīmē
viss, ko es esmu drukāti līdz šim.
Un katru reizi, kad es tipa cits raksturs, tie
izmantot savu slepeno mērci kādas meklēšanas algoritmu un izdomāt,
viņš ir šī kaķu lapu vai šī kaķis lapu vai tamlīdzīgi?
Tātad savā ziņā, tas sniedz man ar labāk pieredze, ka man nav pat
ir nepieciešams, lai pabeigtu savu domu.
Un tiešām, tas ir noderīgs lieta, automātiskās pabeigšanas kopumā.
Ja to algoritmi ir pietiekami labs un ja mani meklējumi ir pietiekami skaidrs,
Man nav rakstīt visu vārdu.
Viņi gatavojas man pateikt, ko tas ir es esmu patiešām meklē.
Tātad, ko Google prasa tūlītēju meklēšana ir tikai izmantojot AJAX,
izmantojot kodu, kas ļauj tām pieprasīt papildu saturu, izmantojot tīmekļa pārlūkprogrammu
aiz ainas, izmantojot šo jaunu valodu, JavaScript.
Tāpēc mums ir atlikušas pāris minūtes.
Un ļaujiet man izsaukt mans draugs Colton up uz skatuves,
jo tas šķita īpaši jautri pēdējo reizi
ieviest tehnoloģijas ka daži no jums
ir izrādījušas interesi jo gala projektos.
Mēs domājām, ka gribētu būt jautri, lai up brīvprātīgais, lai gan, šodien
jums parādīt papildinājumu Tas, kas ļauj you-- yeah,
Es pirmo reizi redzēju šo roku.
Nāciet uz augšu.
Ļoti labi darīts.
Labs darbs.
Es esmu gatavojas projekta šo par ekrāns tikai brīdi.
Kāds ir tavs vārds ikvienam?
>> EFA: Es esmu EFA.
>> DAVID Malan: Etha?
>> EFA: EFA.
>> DAVID Malan: EFA?
>> EFA: Jā.
>> DAVID Malan: Prieks redzēt.
Viss kārtībā.
Ļaujiet man iegūt šo gatavs.
Nāc uz vairāk nekā uz vidū ar Colton šeit.
Kas Colton ir viņa rokās šodien ir tālvadības pults.
Tātad, nevis tikai stāvēt tur trīsdimensiju pasaulē skatos
kā Colton darīja, tagad EFA var faktiski staigāt apkārt, ejot uz augšu,
uz leju, pa kreisi un pa labi Like Nintendo vai Xbox kontrolieris.
EFA: Es esmu gatavojas nokrist stadijā.
DAVID Malan: es gribu stāvēt aptuveni vairāk nekā šeit.
Bet tas ir risks.
LABI.
Tik iet uz priekšu un nodot tos tālāk.
Ļaujiet man iet uz priekšu un pāriet uz ekrāna šeit.
Ļaujiet man tuvās gaismas.
Un Colton, ļaujiet man nākt stāvēt blakus jums.
>> Vai jūs vēlaties, lai izskaidrotu šeit ar mic, ko mēs darām?
Šeit jums iet.
>> COLTON: Protams.
Tāpēc tagad mēs esam iekraušanas up Oculus,
Es domāju operating-- nedarbojas sistēma, bet galvenais programma, kur
Jūs varat piekļūt visas spēles un Lietotnes, kas ir jūsu bibliotēkā.
Tāpēc tieši tagad, tas būtu teikt pieskarieties touchpad, lai sāktu.
Touchpad būs par labajā pusē austiņas.
Tik iet uz priekšu un tap--
EFA: Ak, man.
DAVID Malan: Jā, tur jums iet.
Kvalitātes EFA ir redzēt ir daudz augstāka kvalitāte.
Tas ir tikai Wi-Fi šeit.
COLTON: Tātad, ko jūs esat gatavojas vēlaties darīt
ir skatīties uz augšu ekrāna labajā pusē.
Yep, ka spēle uz ļoti augšējā labajā stūrī.
Un tad, kad jūs esat izvēloties tā, atkal pieskarieties skārienpaliktnim.
Es domāju, ka tā Dreadhalls.
Un tad šeit ir a-- šeit, ļaujiet mani turēt savu brilles jums.
>> Tāpēc es tikko deva viņam kontrolieris.
Tāpēc tagad viņš var kontrolēt spēli.
Viņš var pārvietoties un sīkumi, piemēram, ka.
Tik iet uz priekšu un meklēt uz augšu.
Jums vajadzētu redzēt jaunu spēli.
Tik iet uz priekšu, un jūs varat darīt to.
Tagad, jums vajadzētu būt iespējai kontrolēt sevi ar kontrolieri,
kā arī, tiklīdz spēle slodzes šeit.
Tas varētu būt mazliet biedējoši.
>> EFA: Tagad jūs varat man pastāstīt.
LABI.
>> COLTON: Nu labi.
Tāpēc apstiprina, ka jūs varat pārvietoties.
LABI.
Jūs varat pārvietoties.
Perfect.
Tātad, ja paskatās uz leju, jums ir karte.
Karte rāda, kur jūs esat.
Jūs varat ielūkoties pa istabu.
Jūs varat pilnībā apgriezties.
Jā, tieši tā.
Apgriezties.
>> Tā izskatās uz jūsu kreisi.
Es domāju, ka tur ir kaut kas jūs varat uzņemt par barelu telpā.
>> EFA: Kā es varu iegūt karti no tā?
COLTON: Paskaties uz augšu.
Paskatieties uz augšu.
Viss kārtībā.
Lūdzu.
Tagad iet uz priekšu un vienkārši apgriezties.
Tā izskatās tālāk, lai pa kreisi.
Saglabāt pārvietojas pa kreisi.
Glabāt meklējat kreisi.
Turpini.
Jā.
>> EFA: Ak, ka veidā.
>> COLTON: Jā.
Iet uz to ar kontrolieris.
Lūdzu.
Tagad tas būtu teikt atnākt pakaļ.
Lūdzu.
Pacel to.
Viss kārtībā.
Tagad, pieņemsim izkļūt no šīs istabas.
Iet uz priekšu un iet uz šīm durvīm.
Tātad jūs esat gatavojas hold-- tā saka turiet pogu, lai piespiestu to atvērt.
Tik iet uz priekšu un turiet pogu.
Yep, piespiežot to atvērt.
Viss kārtībā.
Labs darbs.
Tagad mēs ejot ārā no istabas.
Tāpēc es esmu gatavojas atstāt pārējo augšu jums, un redzēt, ko jūs uzzināt.
EFA: Es neesmu gatavojas tumšā telpā.
Pagaidi.
Tagad man ir jāiet pa tumšu zāli?
Labi, es esmu dodas atpakaļ [nedzirdama].
COLTON: Nu labi.
Daži vairāk preces uzņemt.
Izskatās, dažas monētas.
Tas ir atslēga pick.
Tātad, ja jums atrast bloķēts durvis, jūs varat izmantot to.
Vai jums ir bail?
>> EFA: Vēl nav.
COLTON: OK.
>> Pretend-- yeah.
Tikai izlikties jūs esat faktiski stāv tur.
Un, ja jūs savukārt around-- tev pierast pie tā.
Bet tas ir jēga.
DAVID Malan: Un kamēr EFA turpina spēlēt, jo mēs varētu darīt visu dienu,
mēs visi varam tip-toe out šeit.
Bet mums ir divi citi pāri, ja vēlaties nākt un spēlēt.
Pretējā gadījumā mēs redzēsim nākamreiz trešdien.
Paldies mūsu brīvprātīgajiem šodien.
[Aplausi]
>> [MUSIC - "Seinfeld TĒMA"]
SPEAKER 1: Nu, es esmu liekot jaunu PL mount on.
Es tikko mainīja OLPF--
>> SPEAKER 2: Tātad, kas tieši jūs darāt?
>> SPEAKER 1: Nu, katrs no these-- šeit, es jums parādīs šo vienu šeit.
Jūs varat redzēt šeit.
>> SPEAKER 3: Es domāju, ka es esmu labs ar tiem.
Jūs vēlaties, daži vairāk?
>> SPEAKER 4: Nē, es esmu labs. [Dzirdams].
>> SPEAKER 3: Nē, [nedzirdama].
Ir daži.
SPEAKER 1: Different krāsa.
SPEAKER 2: OK.
SPEAKER 1: Tātad galu galā, kas tas tas ir tas pielāgo krāsu of--