[Musiikkia] DAVID MALAN: Tämä on CS50. Tämä on alku viikolla yhdeksän. Ja tämä on mitä olisi ollut herra Boole 200. syntymäpäivä. Joten tämä on Fellows joille olemme viitattu melko joskus noin käyttämällä Boolean muuttujat tosi ja epätosi, 1 ja 0 ja tällainen. Ja tämä oli Googlen kunnianosoitus hänelle tänään. Hän olisi täyttänyt 200. Joten jos haluat liittyä meihin CS50 lounas katsomaan linkki kurssin verkkosivuilla. Ja kuten kasvot ja ystävien nämä odottavat sinua Cambridge. Kasvot kuten nämä odottavat sinua New Haven. Ja itse asiassa, Ken New Haven ystävällisesti tehty mitä kutsutaan animoitu GIF Eli täällä viime lunch-- GIF on vielä toinen graafinen tiedostomuoto, jolla olet familiar-- että näyttää vähän jotain tällaista. Joten sekvenssin of-- OK. Kukaan täällä Cambridge nauraa. Mutta New Haven, tämä on todella hauska, eikö? Selvä. Joten älä joukkoomme siellä. Täällä Harvardin, erityisesti tänä keskiviikkona, jos olet toisen vuoden opiskelija tai fuksi even-- tai jopa junior-- ajatellut tehdä kytkin Tietokoneiden tiede, tietää, että siellä tulee on CS neuvoo oikeudenmukainen tämä Keskiviikko pian luokka klo 16:00 tietokoneeseen Science Building Maxwell Dworkin. Laitamme tämä kurssin verkkosivuilla huomenna, samoin. Munkkeja, olen kertonut, tarjoillaan. Selvä. Niin hauska story-- olin tönäisi ympäri internetissä, ja löysin joitakin vanhoja arkistoja minun entinen verkkosivuilla. Ja se kääntyy out-- ympärillä aika, se näyttää erittäin ajankohtainen koska olen ymmärtänyt, että UC vaalit ovat tulleet vaihde uudelleen. Joten juoksin UC, menetetty surkeasti. Ja ehkä tämä oli osittain miksi. Joten tämä oli minun verkkosivuilla tuolloin. Jostain syystä ajattelin, että se oli hyvä idea, ennen kertoa ihmisille mitä minun foorumi oli ja miksi he olisi äänestää minua, että heillä on klikkaa tulla selville, että tiedot, joka jälkeenpäin on Tällainen kammottava. En todellakaan tiedä, mitä se oli. Mutta se varmasti ei auttaa kampanjani. Huomasin myös, että ylin year-- minulla oli Muppet kalenteri. Muppets olivat eräänlainen muodissa tuolloin. Tai ehkä he eivät olleet. Minulla oli Muppet kalenterin tuolloin. Ja ajattelin, että olis siistiä nimi Oma tietokone Harvardin verkon frogman.student.harvard.edu. Tuolloin meillä kaikilla oli ainutlaatuisesti tunnistettavissa isäntä nimiä. Ja voit valita joitakin turhamaisuus nimi sijaan oman nimesi. Ja menin sammakkomies jostain syystä. Ja sitten started-- vietin paljon aikaa napsauttamalla näitä linkkejä Tämä aamu. Ja tämä oli minun sivusta, joka nyt tavallaan tuntuu ihana. Mutta se todistaa myös vain miten pitkälle tekniikka on tullut. Tarkoitan, takaisin seuraavana päivänä, 486 oli jotain. Nykyään se on super, super, Super Slow ja hyvin vähemmän kuin saatat olla omassa omat taskunsa näinä päivinä. On enemmän siellä, että oli vieläkin kiusallista. Joten jätän asian siihen. Mutta se oli minun ensimmäinen kokeilu web-- Voi ei. Se ei ollut. Ensimmäinen todellinen kokeilu Web-ohjelmointi oli tämän sivuston, jonka minä vain unohdin. Jossain vaiheessa, opin tehdä toistuvia taustakuvia. Ja niin löysin tämän laatoitus tehokas, kuten jääkiekkoilija, jalkapallo, ja golf pallo, tai mitä se on varten Frosh infrastruktuurin verkkosivuilla. Ja tämä oli todella, todella ensimmäinen web-pohjainen projekti otin on-- Luulen sophomore vuosi, junior year-- ottamisen jälkeen CS50 ja CS51, yksi yhteisen jatko-luokissa. Huomasin HAKU kautta arkistot että eräs seuraajia ja ystäviä, Lee, eräänlainen muuttunut tekijänoikeus itsekseen. Mutta tämä oli todellakin jotain, Haluan omistaa häpeäksi. Mutta tuolloin, tämä oli ensimmäinen sivusto, kuten sanoin muutama viikko sitten, jolla fuksi voisi ilmoittautua sisäiset urheilu täällä. Ja niin se kääntyy pois että taustakuvia kuin että eivät ole niin hyvä idea. Mutta web oli uusi, ja olimme kaikki kokeilemalla. Ja tämä on mitä minä ilmeisesti teki tuolloin. Selvä. Joten pitemmittä puheitta, me vaihtaa hammaspyörät tänään antaa sinulle, todella, viimeinen pala, että saatat löytää erityisen hyödyllinen opinnäytetöiden mutta myös, että alkaa tehdä koko World Wide Web tuntuu vähän ymmärrettävämmäksi. Todellakin, aiomme esitellä yksi ohjelmointikieli nimeltään JavaScriptiä on samanlainen ja eri eri tavoin alkaen kielistä teimme toistaiseksi. Joten C, muistaa, on tämä käännetty kieli. Sinun täytyy ajaa se läpi kääntäjä. Saat lähdekoodin vastustaa koodi tai nollia ja ykkösiä. Ja ne ovat nollia ja ykkösiä, että CPU, Central Processing Unit, todella ymmärtää. PHP, sitä vastoin ei ole käännetty kieli. Se on mitä? Se on tulkittu kieli. Joten siellä on ohjelma kutsutaan tulkki, joka on lukea it-- ylhäältä alas, vasemmalta right-- ja selvittää, mitä kaikki syntaksi tekee ja tarkoittaa, onko se silmukka tai ehto tai jokin muu numero ohjelmointi rakentaa. Niin, että tulkittu kieli. Sitten otimme käyttöön HTML. Ja HTML ei ole edes ohjelmointikieli. Olimme kutsua sitä mitä? Markup language, joka on vain eräänlainen hieno tapa sanoa se ei ole ohjelmointi konstruktioita kuten näimme edes takaisin päivänä Scratch. Ei ole silmukoita. Ei aseteta ehtoja. Se on todella kieli noin merkintä ylös tietosi ja alustamista tai jäsentäminen sitä jotenkin. CSS puolestaan ​​samoin ei ohjelmointikieli. Se on vieläkin esteettisesti suuntautunut. Ja sen avulla voit lajitella ja hienosäätää asioita, kuten fontin kokoa ja väriä ja sijoittaminen ja kaikki tämä. Sitten meillä oli SQL. Joten SQL on todellakin ohjelmointi kieli jossain mielessä, vaikkakin räätälöity erityisesti tietokantoihin. Mutta vaikka me vain esitellä sinulle valita ja lisätä ja poistaa ja päivittää ja pari muuta, osoittautuu voit itse kirjoittaa toimintoja tai menettelyjä, koska ne ovat kutsutaan, SQL jotka näyttävät ja toimivat aivan kuten PHP ja C funktioiden. Niin tiedämme, että ne ovat olemassa. Mutta emme edes vaivaudu niitä kuten juuri naarmuttaa pintaa täällä. Ja sitten JavaScript, viimeinen kielemme virallisesti käyttöön. Joten JavaScript, sekin on tulkittu kieli. Ja niitä tuttuja, tehdä haluat erottaa sen joidenkin ominaisuus sekä C ja PHP? Mikä tekee siitä erilaisen? Yleisö: Se ei ole laadittu. DAVID MALAN: Sano uudestaan? Yleisö: Se ei ole laadittu. DAVID MALAN: Se ei ole laadittu. Niin sekin, tulkitaan. Joten se ei ole koottu. Mutta joka tekee sen vähän kuin PHP. Mutta se on silti erilainen kuin PHP jollakin silmiinpistävää tavalla, ainakin siinä, miten käytämme sitä. Joo? Yleisö: Se toimii client-side. DAVID MALAN: Se toimii client-side, yleensä. Se todellakin erottava ominaista meille juuri nyt. C oli palvelinpuolen siinä mielessä että teimme kaiken CS50 IDE. PHP on tähän mennessä ollut server-side sikäli kuten sekin, saa interpreted-- ei käännetty, mutta interpreted-- sisällä CS50 IDE, joka tietenkin on vain palvelin tai palvelimet pilvessä. Mutta JavaScript, jopa vaikka et olet menossa alkaa kirjoittaa sitä, sanovat, PSET kahdeksan ja ehkä lopullinen projects-- olet menossa väärin sen CS50 IDE ja tallenna se tiedostojen sisällä CS50 IDE, CS50 IDE ja puolestaan ​​pilvi palvelimet johon se isännöi, eivät aio tulkita tai suorittaa koodia. Pikemminkin se tulee lähetettävä muuttamattomassa muodossa alas selaimen. Ja se sitten tulee olemaan IE tai Chrome tai Firefox tai Safari tai mitä se todella tulkitsee se, ylhäältä alas, vasemmalta oikealle. Joten avain erottava ominaista tänään että JavaScript on client-side ja PHP, esimerkiksi, on ollut palvelinpuolen. Nyt tämä on mielenkiintoisia seurauksia varten, kuten, henkisen omaisuuden ja kuka voi todella nähdä koodin. Ja todellakin, voit mennä Webissä ja nähdä eniten koodia että joku on kirjoitettu JavaScript. Joskus se on luettavissa, Joskus se on salattu. Mutta lisää, että hyvissä ajoin. Joten JavaScript, kauniisti tarpeeksi, on Super samanlainen, syntaktisesti, C. Ja aivan kuten PHP, ei ole tärkein ominaisuus. Jos haluat aloittaa kirjoittamisen JavaScript-koodia, kun näet tänään, vain alkaa kirjoittamisesta. Mutta se on, näet, etenkin hyödyllinen yhteydessä selaimet. Kuitenkin pikku disclaimer-- yleensä earlier-- oli sanoa, että voit yhä tänään käyttää JavaScript palvelinpuolen käyttäen fancy kehys nimeltään Node.js että jotkut CS50: n omien sovellusten on kirjoitettu. Tarkista 50 tosiasiallisesti käyttää Node.js. Mutta aiomme keskittyä JavaScript client-side Tästä eteenpäin. Joten tässä on joukko ehtoja PHP. Anteeksi, in-- todella, että lausuma, sekin on oikea. Tässä on myös joukko olosuhteet JavaScript. Syntaktisesti, se on identtinen C ja PHP. Mr. Boole ilmeitä ovat, Vastaavasti, syntaktisesti identtinen sekä C ja PHP. Meillä on myös kytkimet JavaScript jotka näyttävät identtisiä. Meillä on silmukoita, jotka ovat jäsennelty identtisesti, vaikka silmukoita, tehdä, kun silmukoita. Tämä yksi on hieman erilainen. PHP oli kunkin konstruktin että saatat olla käytössä tai tulee käyttää PSET seitsemän, ehkä. JavaScript on tämä erityinen versio sillä jossa kirjaimellisesti sanoa jotain kuten vaihtelevan avain esine, joka on erittäin ytimekäs tapa sanoa, jos minulla object-- ja me puhua näistä jälleen moment-- ja haluan kerrata kaikkia avainarvon paria sisällä, Minulla ei tarvitse selvittää, miten numeerisesti indeksoida niitä nolla, yksi, kaksi, kolme. Voin kirjaimellisesti sanoa tätä. Ja jokaisen iteraation, JavaScript minulle päivittää muuttujan näppäintä olla ensimmäinen avain, sitten seuraavaa näppäintä, sitten seuraavaa näppäintä, sitten seuraavaa näppäintä, ja niin edelleen. Ja saan sen arvo käsittelemällä objekti JavaScript, kuten näemme, ikään kuin se on assosiatiivisia array PHP. Todellakin, jos lopulta kääritty teidän mielessä ympäri mitä tällainen taulukko on PHP, voit ajatella sitä nyt identtinen objekti JavaScript. Mutta se on hieman yksinkertaistava. Taulukot näyttävät, kauniisti tarpeeksi, samanlainen PHP paitsi yhden merkin. On yksi asia puuttuu täällä että näimme viime viikolla PHP. Mitä pois? Joo? Ei dollarin merkki. Joten olemme takaisin lisää normaali maailmassa, jossa muuttujia ei ole dollarin merkkejä. Mutta et etuliite niitä var, tyypillisesti. Ja var tarkoittaa muuttuja. Ja aivan kuten PHP on löyhästi typed-- jolloin on olemassa tyyppejä, on numeroita ja jousille ja kellukkeet ja niin forth-- JavaScript samoin on tyyppejä. Mutta se on löyhästi kirjoitettu, että me ohjelmoijat ei tarvitse määrittää niitä. Meidän täytyy vain olla tietoinen että erilaisia ​​olemassa. Muuttujat, meanwhile-- tässä miten voisimme julistaa "Hei, maailma" merkkijonona. Huomaa, se on identtinen PHP mutta ei dollarin merkki. Ja tämä on jotain me alat nähdä enemmän tänään, jolloin sinulla on esine avaimet ja arvot. Ja jos haluat kokeilla päätellä viime week-- syntaksi on hieman erilainen. Mutta vähän mielenterveyden check-- kuinka monta avaimet tämä esine näyttävät? Joten minä näen neljä. Näen kaksi. Joten se on oikeastaan ​​kaksi. Joten tämä on kokoelma Kahden avainarvopareja. Tärkeintä on symboli, jonka arvo on FB. Tärkeintä on hinta, jonka arvo on 101,53. Joten ne ovat kaksi avainarvopareja. Ja muistakaa, PHP-- ja tämä on jälleen vain eräänlainen syntaktisen ero. Se ei ole kaikki, että älyllisesti mielenkiintoinen. PHP ehkä kirjoittanut tämän saman asia kuin follows-- lainaus, vastaa. Ja voin muuttaa näitä hakasuluissa. Ja sitten muuttaa tätä lainattu sana, "hinta." Ja sitten en käytä paksusuolen. Mitä minä käyttää viime viikolla? Joo, yhtäläisyysmerkki nuoli funky merkintätapa. Ja sitten tein saman asian täällä. Sama juttu täällä. Ja siinä kaikki. Joten on hienoa, jos tämä ei ole todella uponnut muistiin vain mutta koska se on todella älyllisesti mielenkiinnoton. Se on vain syntaktinen eroja. Mutta ideat ovat täsmälleen samat. Sisällä tämän muuttujan lainaus JavaScript on kokoelma avainarvopareja, joista yksi on symboli, joista on hinta. Ja saan noita arvoja seuraavaan tapaan. Aivan kuten PHP, voisin tehdä jotain like-- anna minua tekemään tämä laatikko hieman suurempi. Aivan kuten PHP, voisin tehdä this-- OH, perkele. Tule. Aivan kuten PHP-- OK käymme vain käyttää juontaja toteaa. Aivan kuten PHP, voin do $ lainaus $ lainaus ["symboli"], ja tämä saa minut arvoa "symboli." JavaScript, se tulee olemaan identtiset, jolloin voin vain tehdä tätä. Ainoa asia, joka on puuttuu dollarin merkki. Niin hienosti riitä, niin, siellä on ei kovinkaan paljon uusia syntaksi. Mitä tänään keskitymme, todella, on joitakin ajatuksia ja sovelluksia. Ja ensimmäinen tällainen sovellus että saatat nähneet jos olet sukeltanut PSET Seitsemän jo on tämä syntaksi. Joten PSET seitsemän, jos olet nähnyt tai ole nähnyt sitä vielä, tietää, että siellä on tiedosto että annamme soitit config.json-- JavaScript Object Notation. Miksi? Halusimme pystyä tarjoamaan sinulle mallin joidenkin avainarvopareja. Halusimme voi antaa sinulle listan isäntä, palvelimen nimi. Halusimme antaa sinulle paikkamerkki käyttäjätunnuksesi ja paikkamerkki salasanasi. Jos et näe tätä vielä, ei hätää. Tästä lisää PSET seitsemän [? spec. ?] Ja sitten, tietenkin, haluamme täyttää-DOS koska kun kirjaudut CS50 IDE, jokainen teistä on oma käyttäjätunnus ja salasana. Jotta voisimme olet käyttänyt puoli tusinaa tai useamman eri tiedostomuotoja. Olisimme voineet käyttää .txt. Voisimme käyttää CSV-tiedosto. Olisimme voineet käyttää INI-tiedoston, XML-tiedoston, koko joukko enemmän lyhenteitä että et ehkä ole koskaan kuullut. Se on tavallaan mielivaltaisen päivän päätteeksi. Mutta erittäin suosittu näinä päivinä on teksti muodossa nimeltä JSON-- JavaScript Object Notation-- että näyttää tältä. Se on vähän arvoituksellinen, mutta huomaa malleja. Aloitat avoin kihara ahdin, ja lopetat samalla. Sisältä se on jotain. Se on avain-arvo-pari. Joten tämä on esine, että olen katsot ruudulla täällä että on yksi avain, joka on yksi arvo. Ja vain päätellä perustuu edellinen malli, mikä on avain täällä? Tietokanta, asia vasemmalla paksusuolen. Nyt arvo sattuu olemaan useita rivejä tällä kertaa. Mutta arvon alussa on kihara ahdin ja päättyy kihara ahdin. Joten mitä ehdottaisitte on tyypin arvo tietokantaan? Sanakirja tai, vain enemmän ytimekkäästi, esine. Oikea? Tämä on eräänlainen tietojen rakenne, joka voivat käyttää muita rakenteita itse. Joten jos tämä koko juttu olemme kutsuvan object-- ja esineen on vain joukko avainarvon pairs-- arvo tietokantaa on esine. Arvo tietokanta on koko joukko keskeisten arvo-pareja, joista ensimmäinen on isäntä, niin nimi, sitten käyttäjätunnus, sitten salasana, jokainen joiden arvot puolestaan, se on vain kairausjohto lainausmerkkeihin. Joten vaikka se ei ole Super kirkas aivan vielä, tietää, että tämä on vain standardi, melko tylsä ​​tapa tallentaa tietoja vakiomuodossa. Mutta yleisiä virheitä sinua voisi tehdä, vaikka PSET seitsemän, ovat pieniä tyhmiä asioita, kuten jos vahingossa jättää pilkku siellä. Joka tulee johtaa tiedostoon ei välttämättä ole luettavissa. Jos vahingossa jättää pois asioita, kuten lainausmerkit, se ei tule olemaan luettavissa. Joten se on aika nitpicky tiedostomuoto, mutta se on yksi, joka on erittäin yleistä. Ja me satu käyttämään sitä, vaikka et käytä mitään JavaScript toisin, vuonna PSET seitsemän. Selvä. Joten muistakaa tämä kuva. Puhuimme, HTML, että koodi voisi näyttää tältä. Tämä on HyperText Markup Language [Äänetön] vain "Hei, maailma." Mutta sitten ehdotimme kun taas takaisin, että jos se auttaa, kannattaa alkaa miettiä tästä jo kuin puu. Itse asiassa, kuoppa, jonka me Käytä vain luettavuuden vuoksi tai tyyli tähden päälle Vasemmalla sellaista käännetään tämä puu, jossa joitakin erityisiä juurisolmu että me will yleisesti kutsutaan asiakirja, jonka alapuolella on juuri HTML-elementti tai tunnisteen, HTML, joka sitten on kaksi lapset, pään ja vartalon. Ja sitten taas, pää on otsikko. Ja otsikko on teksti arvo. Ja kehon samoin on tekstin arvoa. Joten jos olet mukava sanonta että kyllä, voit ottaa tämän HTML ja piirtää kuvan kaltainen Tämän, oikea puoli on mukava henkinen malli, koska nyt että meillä on JavaScript, ohjelmointi kieli että selaimet voivat toteuttaa ja tulkita sinulle, käy ilmi, että mitä aiomme tehdä koodin on alkaa manipuloida tätä puurakenne muistiin. Meillä ei tarvitse rakentaa puu muistissa. Meidän ei tarvitse tehdä eräänlainen PSET-viisi-style tietorakenne monimutkaisuus. Selain, kauniisti tarpeeksi, kun tulkkaus HTML ylhäältä alas, vasemmalle tai oikealle, on kirjaimellisesti menossa käsi Yhdysvaltalainen vastaa osoittimen kuin koko puun ilmaiseksi. Se tekee kaiken kovan työn. Sitähän Mozilla ja Apple ja muut ovat tehneet meille. Ja JavaScript aiomme sen on voitava valvoa ja muuttaa ja tehdä mielenkiintoista että puu, joka tunnetaan kuten DOM tai Document Object Model. Millaisia ​​asioita? No, käy ilmi, että JavaScript, siellä tämä pitkä lista tapahtumia, jotka voivat tapahtua. Emmekä ole oikeastaan ​​käytetty että sana koska viikko nolla ja PSET nolla kun puhuimme Scratch. Useimmat teistä luultavasti ei käytä tapahtuma sinun Scratch projektin. Mutta saatat muistaa yksinkertainen Marco Polo Esimerkiksi jossa meillä oli kaksi sprite, joista yksi sanoi, Marco. Muut joista sitten, kun kuuntelu ja kuulo tapauksessa, sanoi, Polo. Jos ei, rohkeasti muistella, että pitkälle taaksepäin. Mutta tämä on vain sanovat, ja voit eräänlainen päätellä näiden nimet asioita, JavaScript, se kääntyy pois, aikoo antaa meille tapa kuunnella hiiren menossa alaspäin tai hiiren nousevat tai avain menee alas tai keskeisiä menossa ylös tai onsubmit onselect tai onresizing jotain. Toisin sanoen, mitään fyysistä toimintaa että ihminen voi ottaa selaimella että teet joka päivä, voit kirjoittaa koodi, joka kuuntelee tällaisia ​​tapahtumia ja sitten tekee jotain tarkoituksenmukaista. Jos esimerkiksi käytät Google Maps, mitä tapahtuu, jos valitset ja liikkua hiiri, tyypillisesti? Jos valitset ja vedä? Joo? Aivan. Kartta alkaa liikkua. Voit siis tavallaan nähdä, mitä tänne, mitä tuolla. Ja miten Google toteuttaa sen? No, oletettavasti, he käyttämällä pari näitä tapahtuma kuuntelijat, joka sanoo, kuunnella hiiren down-- joten kun käyttäjä fyysisesti työntää hänen ohjauslevy tai hänen hiiri alas. Ja sitten etsimme jotain liikettä tai jokin muu tapahtuma, joka voimme kaapata vetää. Ja itse asiassa, drag on samalla tässä piste piste piste luettelo mahdollisista vaihtoehdoista. Joten tämä tulee olemaan voimakas tapa aloittaa vastaamisen käyttäjälle jopa ennen kuin hän todella napsauttaa jotain nimenomaista kuten lähetä. Mutta aiomme esitellä pari aiheita sinne. Mutta ensin siirtymistä joitakin todellisia koodia. Joten aion mennä eteenpäin ja avata dom-0, joka on hyvin yksinkertainen esimerkki täällä, että jos minä suurentaa yksinkertaisesti on tämä tulo tänne minulle. Ja aion mennä eteenpäin ja kirjoita "David" minun nimeni ja valitse Lähetä. Ja sitten, vaikka tavallaan halvalla, I on tämä nopea avautuvassa joka sanoo, "Hei, David!" Joten tämä on tavallaan kuten meidän "Hei, maailma" että teimme jonkin aikaa takaisin C ja jopa PHP koska olen dynaamisesti tulostetaan nimeni. Voin tehdä jonkun toisen nimi tähän. Voisin yksinkertaisesti muuttaa tätä, kuten, Hannah, valitse Lähetä. Ja todellakin, pikku pop-up muutoksia. Nyt, pop-ups ovat yksi eniten väärin ominaisuuksia verkossa. Ja itse asiassa jo vuonna päivä ponnahdusikkunoiden esto tuli muotia, koska olet menisi noin website-- ehkä kyseenalainen place-- Se olisi sitten yhtäkkiä aloittaa peppering näytön kanssa koko joukko ponnahdusikkunoita. Ja niin tämä kyky pop up ikkunoiden edessä käyttäjä ei ole ollut erityisen hyvin vastaan ​​ihmiskunnan. Joten siksi näet tämä estää asia, mikä juuri tekee tästä koko juttu ruma. Joten aiomme tarvitsevat parempi tapa kysyy käyttäjältä. Mutta nyt, että tuntuu toimivan. Joten intuitiivisesti, mitä näyttää tapahtuvan täällä? Menen eteenpäin ja valitse Lähetä, ja sitten jotain tapahtuu, selvästi. Mutta mitä ei tapahdu, että ei tapahdu viime viikolla tahansa klikkasin Lisää? Mitä ei tapahtunut ruudulla? Anteeksi? Päivitä. URL ei muuttunut lainkaan. Sanoin tämä oli dom-0, ja olen vielä dom-0. Normaalisti olisimme saada muuttunut johonkin muuhun URL-osoitteen, kuten register.php tai vastaavaa. Mutta vaikka en hylkää tämä asia valitsemalla OK, huomaa, että URL-osoite pysyy täysin laittaa. Ja itse asiassa, jos olen hieman skeptinen, haluan avata Chrome. Saanen avata Verkko-välilehti. Ja huomaa sitä tyhjäksi tällä hetkellä. Anna minun mennä eteenpäin ja lähetä uudelleen Maria. Ei ole verkkoliikennettä lainkaan. Joten ei ole HTTP. Joten todellakin, jos katson lähdekoodi varten this-- haluan sulje tämä ikkuna ja mene View Source. Mielenkiintoinen. Näyttää siltä, ​​että joitakin uusia tunnisteita, joukossa käsikirjoitus. Joten katsomaan sisällä CS50 IDE mitä minä lähetetään käyttäjälle. Joten tässä is-- nyt keskittyä vain HTML. Tässä alaosa dom-0.html. Ja huomaa, että se sai otsikko, pää tag, body, muoto tag. Mutta mitä hyppää ulos teille eri, varsinkin jos et ole koskaan kirjoittanut JavaScript itse. Saanen selaa hieman on täällä. Minulla tulo, toinen tulo lähetä. Minulla tunnus, joka on eräänlainen uusi. Mutta emme näe tätä CSS. Mitä muuta on ehdottomasti uusi? Joo? Kiva. Selvä. Joten jos se sanoo onsubmit, huomaa, mitä näyttää seuraavan. Tämä on ominaisuus HTML nimikkeistön. Sen arvo on tämä lainattu merkkijono täällä. Ja tämä näyttää vähän outo ensi silmäyksellä. Se ei ole HTML. Se ei ole CSS. Tämä on, kuten arvata saattaa, JavaScript. Näyttää siis siltä, ​​että tämäkin Web-sivu on toiminto nimeltään tervehtiä. Ja olen päätellä, että vain koska se on sana, tervehtiä. Se sai avoin paren, lähellä paren, puolipiste. Näyttää C funktio, näyttää PHP funktio. Ja todellakin, se tulee olla JavaScript-toiminto. Sitten olen palaamassa vääriä. Tulemme takaisin että vain hetken. Mutta missä on tämä toiminto määritellään? No haluan selaamalla ylös alkuun tiedoston. Ja vaikka se on pitkä linja, se on suhteellisen yksinkertaista. Saanen loitontaa täällä ja keskitytään näihin neljä riviä. Joten JavaScript, vain kuten PHP, juuri sanoa, kirjaimellisesti, sana "toiminto" funktion nimi, ja sitten sulkeita tahansa arguments-- mitään perusteluja tässä tapauksessa. Ja ei ole palautuva JavaScript, aivan kuten PHP. Joten se on vähän löysempi kuin C. Avoin kihara ahdin, lähellä kihara ahdin. Rakennettu JavaScript on function-- ei suositella function-- mutta toiminto nimeltään hälytys jonka ainoa tarkoitus elämässä on vetää ylös, että melko ruma pyytää, että näimme hetki sitten. Nyt tämä on tavallaan suupala. Mitä täällä tapahtuu? Joten alkaa Korosta kaikki täällä. Se on sama argumentti varoittaa. Ja mitä on tekeillä? Tämä vain näyttää merkkijono. Ja se kääntyy pois, toisin kuin PHP ja toisin C, sillä ei ole väliä JavaScript jos puolilainausmerkkejä tai lainausmerkkeihin. He ovat yhtä. Ja rehellisesti, se on vain suosittu näinä päivinä JavaScript ohjelmoijat aina Käytä puolilainausmerkkejä jostain syystä. Se on vain asia tehdä. Mutta voisimme käyttää lainausmerkkejä, samoin. Joten plus on uusi hahmo. Mutta ne teistä, jotka olette tehneet tätä ennen, mitä plus tarkoittaa? Joo. Liität. Joten näimme tämän PHP. Siellä on vain piste operaattori PHP että tulee ketjuttaa kaksi langat yhteen. C oli kipua niskassa tehdä tätä. Recall PSET kuusi, mikä oli especial kipua niskassa, sinun pitäisi käyttää jotain strcat jälkeen jaettaessa muisti pinoon tai kasaan. Sinun piti hypätä kautta vanteet vain liität kaksi merkkijonoa. JavaScript, se on erittäin yksinkertainen. Käytä vain plus operaattorin välillä. Niin monimutkainen näköinen asia näyttää olevan tämän koska lopussa tämä koko jono, en vain liität on huutomerkki. Joten jos mitä popping oli "Hei, David", "Hei, Hannah," "Hei, Maria," ja niin edelleen, selvästi että keski asia kahden plussia on antaa minulle pääsyn mitä? Mitä siellä on varmasti? Joo. Niin minä olevinaan täällä vastata heidän nimensä, eikö? Joten heidän nimensä piipahti lopullisessa tulos. Mitä tämä tarkoittaa? No, ehdotin aiemmin, että kuva että ns DOM on tämä erityinen juurielementti tapa ylös kutsutaan asiakirja. Ja nyt, se kääntyy pois, että menee on erityinen globaali muuttuja JavaScript, rakennettu joka on koko joukko hyödyllisiä toimintoja. Niistä hyödyllisiä toimintoja on kyky saada milloin tahansa jälkeläinen solmu. Ne neliön tai suorakaiteen tai ellipsejä ovat vain solmuja puu, niin sanoakseni. Joten käy ilmi, että rakennettu JavaScript asiakirja esine on funktio, joka tunnetaan myös menetelmä, joka kutsutaan getElementById. Syntaksi soitosta toiminto JavaScript että on sisällä esine tai muuttuja on pelkästään piste merkintä. Ja näimme tämän C mitä struct syntaksi. Näet tämän PSET seitsemän, eräänlainen, tavallaan, kun näkee CS50 :: kyselyn. Paksusuoli paksusuolen PHP on toinen tapa kutsuvan toiminto, joka on sisällä jonkun esineen. Mutta nyt JavaScript, se on vain piste. Ja niin tämä toiminto, kauniisti tarpeeksi, millaisia sanoo mitä se does-- saada elementti tunnus. Elementti on vain toinen nimi varten tagi tai solmun DOM. Ja niin saat elementin ID "nimi" tarkoittaa this-- tässä on minun HTML. Ja perustuu tämän HTML, mitä solmu tai mitä HTML-koodi olenko menossa ohjelmallisesti luovutetaan soittamalla document.getElementById? Joo, täsmälleen. Aion saada tulo elementti siellä jonka ID on "nimi." Niin sanottuna voit ajatella tätä toimintoa, getElementById, koska tapa antaa takaisin osoitin kyseisen solmun puussa. Emme ole vielä tehneet tätä puu, mutta se on tapa saada pääsyn että suorakulmion tai että suorakulmion yksilöimällä se kautta sen tunnus. Nyt, miksi tämä hyödyllinen? No, se kääntyy pois että kun olet päässyt että solmu, että Suorakulmion kuva, että solmu sen sisällä, puolestaan ​​on koko joukko properties-- avainarvopareja tai tiedot, joista yksi on nimeltään arvo. Niin kirjaimellisesti, se on eräänlainen suupala selittää koko juttu. Mutta lopussa päivä, kaikki tämä tekee on antaa sinulle merkkijono, joka käyttäjän kirjoitetaan tässä hierarkkinen tavalla. Mutta en pidä pari näistä asioista. Tai pikemminkin, on joitakin uteliaisuus edelleen. Kaikki tämä tuntui toimivan. Miksi luulet palasin väärä jälkeen soittaa tervehtiä? Tämä näyttää hieman ruma, että Minulla on kaksi lausumaa siellä erotettu toisistaan ​​puolipisteellä. Arvaa. Jos Poistin return false, mitä voi tapahtua vain vaistomaisesti? Anteeksi, sano uudelleen? Avaa nippu Windows. Joten mahdollisesti ehkä jotain sellaista tapahtuisi. Mitä muuta? Voi esittää pyynnön missä? Samalle sivulle. Joten itse asiassa, se siitä lähemmäksi vastata täällä, vaikka, toisin kuin aikaisemmin, en ole määritelty toiminta ominaisuus, joka yleensä meidän on tehtävä. Osoittautuu siellä oletuksena. Jos et määritä toimintaa, se on kuin sanoisi lainaus, lainaus tai tiedoston nimi itse, joka tässä tapauksessa olisi luvassa dom-0.html. Se on juuri sellainen päätellä, tai pikemminkin hiljaista. Joten jos en tee tätä, nyt huomaa. Sallikaa minun tallentaa. Ja Poistin return false. Anna minun mennä takaisin tähän Esimerkiksi ja voima lataa se. Ja ehkä nähnyt minua ehdottaa tämä CS50 Keskustele joukko kertaa. Jos jotain koskaan toimii outoja ja Selaimen ei käyttäydy kuin odottaa, Usein sinun kannattaa pitää Shift ja valitse sitten Päivitä. Tämä pakottaa jokaisen tiedoston ladata ja käytä selaimen paikallista välimuistia tai kopio niin, että nyt, anna minun mennä eteenpäin ja avata minun tarkastaja, Verkko-välilehteä. Aion napsauta Säilytä Log koska olen eivät halua sitä poistaa rivejä kun saan pyyhkäistiin pois muualla. Anna minun mennä eteenpäin tässä ja kirjoita Andi, valitse Lähetä. Selvä. Tämä vaikuttaa odotetusti. Se sanoo "hei, Andi." Saanen OK. Mielenkiintoinen. Huomaa, että sivua on muutettu, vaikkakin alkuperäisen sivun. Huomaa URL sellaista muuttuneen. Se lisäsi kysymysmerkki, joka on yleensä indikaattori että yritimme esittää jotain. Ja sitten alareunassa, vielä selvemmin, tässä todellinen HTTP-pyyntö, joka sai vastauksen 200 että toi minut tänne. Joten tämä ei ole mitä me haluamme tehdä, eikö? Koska en halua lataa koko sivun. Olen sen sijaan halusi palata vääriä jotta oikosulku selaimen oletustoimintaa, joka oli tietenkin esittämään sivulle. Joten katsomaan marginaalisesti parempi esimerkki. Tämä on dom versio yksi. Ja huomaa seuraavat. Se on OK, jos et grok kaikki riviä koodia. Mutta mikä on täysin erilainen tästä täytäntöönpanosta? Minä määrätä se käyttäytyy sama, ei sama asia. Mitä olen tietenkin tehdä toisin? Joo? Yleisö: [äänetön]. DAVID MALAN: Joo. Joten toiminto on määritelty differently-- Toisin sanoen, poissa muodossa, siellä verkossa 7-- tai pikemminkin, linja 8-- enää minulla on onsubmit määrite. Edellisessä esimerkissä, minulla oli tämä. Ja sitten kirjaimellisesti kirjoitin koodin tähän. Ja sitten minä sanoin return false. Ja jos se ei hankaa olet väärällä tavalla vielä, se pitäisi alkaa sikäli kuten, kuten HTML, kun aloimme tehdä yhteistyötä seurustella se CSS tyyli attribuutteja, se vain alkoi saada vähän sotkuinen tai tuntuu hieman väärä. Samoin täällä, jos aloitat HTML, ja sitten automaattisesti plop JavaScript-koodia keskellä noteerattu merkkijono, se on ei tule olemaan hyvin ylläpidettävissä. Oikea? Se ei ole edes selvää aluksi paikka, jossa JavaScript-koodia on. Joten se olisi todella mukavaa kuin periaate paremman suunnittelun, Pitäkäämme HTML täysin erillään JavaScript. Niin tehdä niin, mitä olemme tehty tässä following-- me yksinkertaisesti käyttää HTML markup vain. Ja niin versiossa yksi tämän, kaikki Minulla on lomake yksilöllinen tunnus. Ja sitten täällä, olen hyödyntämällä erityinen piirre JavaScript jolloin voin olla mitä nimeltään anonyymi toiminto. Joten käy ilmi, että jos soitan document.getElementById on "demo" se on kuin antaa minulle osoitin tämä solmu minun puu, muoto elementti, niin sanoakseni. Nyt, minä vain tiedän tietäen hieman HTML nyt meillä oli lukenut joitakin online viittaus, että lomake elementti tukee koko joukko tapahtuma listeners-- vuonna Toisin sanoen, pitkä lista tapahtuma kuuntelijat että näimme hetki sitten. Tiedän lukemalla asiakirjat että onsubmit on voimassa tapahtuma kuuntelija osan. Joten kun tiedän että, se on turvallista minun tehdä following-- saada että solmu puusta, muoto elementti, ja käyttää sen ns onsubmit omaisuutta. Joten piste tarkoittaa vain sitä, tämä on ominaisuus, kuten erityinen arvo sen sisälle. Ja mitä tietoja tyyppi olen osoitetaan, ilmeisesti, ja onsubmit, joka on tehokkaasti muuttuja sisällä kyseisen solmun puussa? Se on alan sisällä että struct. Mikä tietotyyppi? Toiminto, joo. Joten käy ilmi, että PHP on tämä. Ja vaikka me ei kertonut teille siitä, C on myös funktio-osoittimia, kyky siirtää ja siirtää toiminnot muuttujina arvot itse. Ja emme aio taantua takaisin C. Mutta nyt, käy ilmi, että oikealla puolella täällä, vaikka se näyttää vähän funky, tämä tarkoittaa, hei selain, anna minulle toiminto. En aio edes vaivaudu antamaan se nimi, koska olen kirjaimellisesti aio luovuttaa kutsukaamme sitä osoite tämän toiminnon välittömästi onsubmit. Toisin sanoen, selain, et tarvitse tietää, mitä tämä toiminto kutsutaan. Sinun tarvitsee vain tietää missä se on muistissa. Ja niin se riittää vain on yhtäläisyysmerkki siellä eikä vaivata nimeäminen tähän, kuten foo tai tervehtiä tai muuta sanaa. Ja nyt tämä on vain tyylillinen asia. Voisin siirtää tätä kihara ahdin päälle the-- sorry-- seuraavalle riville kuten me yleensä tehdä CS50. Mutta JavaScript, se on todella tyylillisesti yhteinen vain pitää kihara ahdin, Ensimmäinen, on että ensimmäisellä rivillä. Mutta tämän jälkeen, on olemassa ei mitään kiinnostavaa. Että avoin kihara ahdin vain rajataan alussa tehtäväni. Toiminto on nyt identtinen, paitsi olen sisältyy return false sisällä tätä toimintoa. Koska se kääntyy out-- ja olisit vain tietävät tämän lukemasta documentation-- että jos toiminto, annat jotta onsubmit ohjaaja palaa vääriä, selain vain tietää ja on samaa mieltä ei lähettää lomakkeen palvelimelle. Jos se palauttaa true, se toimittaa sen palvelimelle syistä näemme ovat hyödyllisiä vain hetken. Ja sitten puolipiste jälkeen kihara ahdin siellä vain tarkoittaa olen tehnyt määritellään toiminto. Tiedätkö mitä soittaa heti kuulet jättämisestä. Selvä. Tämä on edelleen kiistatta sellainen ruma. Mitä enemmän voimme tehdä? No, se kääntyy pois sitten versio kaksi, joka on last-- ja me vain vilkaista tätä. Silläkin uhalla tehdä se rumempi, se kääntyy pois että siellä on kirjasto Maailmassa nimeltään jQuery. Ja jQuery on erittäin suosittu JavaScript kirjasto se on niin suosittu, että useimmat kaikki JavaScript-- se ei ole harvinaista, että ihmiset sekoittavat jQuery JavaScript. Miksi? JavaScript itsessään on hyvin verbose tapoja tehdä things-- document.getElementById, dadadadadada. Voit päätyä ottaa hyvin pitkä riviä koodia. Joten mies nimeltä John Resid, joka todella toimii käynnistyksen näinä päivinä, tuli ulos Tämän kirjasto vuotta sitten, että monet ihmiset ovat vaikuttaneet soitettaessa jQuery joka muuttaa syntaksi seuraavalla tavalla. Ja juuri niin olet nähnyt tämän, koska sinulla poikkeuksetta katso tämä jos tekee Web-pohjainen opinnäytetyö, tämä olisi vastaava tapa täytäntöönpanosta että sama tehtävä käyttäen tätä erityistä kirjasto. Nyt sen sijaan, että kammata sen lisäksi kokonaisuudessaan, Haluan vain tarkastella joitakin malleja. Tämä syntaksi näyttää olevan kuinka moni nimetön toimintoja tai nimetön toiminnot tai AKA lambda toimintoja? Kaksi, eikö? Ja te tiedätte, että vaikka et ole super mukava tämän, vain se, että se sanoo toiminto () kahdesti. Ja käy ilmi, että mitä tämä koodi on doing-- ja me viittaavat verkossa viittauksia, lopulta, joillekin apua tähän. Tämä tarkoittaa vain sitä, että kun asiakirja on valmis, mennä eteenpäin ja rekisteröidä seuraava toiminto kuten esittää käsittelijä HTML elementti, jonka ainutlaatuinen idea on demo. Ja sitten, kun se tapahtuu, kutsuvat näitä kahta riviä koodia. Ja tämä on, traagisesti, enemmän verbose tapa sanoa return false. Ja me mainitsi tämän juuri siksi, näet koodin näin verkossa. Ja se on mitään lannista. Vaan pitää mielessä, että mitä olemaan yhteinen JavaScript on tämä paradigma. Ja niin siksi osoitamme sitä nyt. Selvä. Joten ilman asunnon liian paljon että syntaksin, on olemassa mitään kysymyksiä Näissä esimerkeissä tai ideoita tähän mennessä? Selvä. Joten käyttää jotain hyödyllistä. Making Web-sivu, vain sanoo hei, niin ja niin ei ole kovin kiinnostava, ei ei tehdä mitään vaikutusta jhk. Tämä ei tule olemaan kaunis, mutta se aikoo tehdä jotain hyödyllistä. Anna minun mennä takaisin minun hakemistoon täällä ja avata, sanovat, muoto-0.html. Joten kai tämä on fuksi sisäiset urheilu rekisteröinti sivu ilman CSS tai mitään järkeä suunnittelu. Ja haluan mennä eteenpäin ja rekisteröidy täällä salasanalla. Ja aion hyväksyt ehdot ja ehdot ja valitse Register. Ja nyt verkkosivuilla sanoo, "Olet rekisteröity! (No, ei oikeastaan.) " Että tuntuu kuin se toimi, mutta anna minun mennä eteenpäin ja pakottaa reload. Ja haluan sanoa, ei, et Tarvitsen todellinen sähköpostiosoite. Tai ehkä me vain sanoa postia siellä. Salasana on, kuten, 12345. Ja sitten, vain koska olen idiootti, nyt se on 123.456.789. Ja en aio tarkistaa ruutuun. Hmm. Selvä. Joten ei useita tilaisuuksia parantamisen täällä. Ja te tiedätte, tai näkevät PSET seitsemän, että voit kirjoittaa code-- ja sinun täytyy kirjoittaa koodi PHP-- puolustaa vastaan ​​tällaisia ​​käyttäjä virheitä, koska käyttäjä selvästi ei toiminut yhteistyössä. Ja hän ei ole antanut sinulle kaikki arvot halusitte tai jopa muodossa että haluatte niitä. Joten voit nähdä PSET seitsemän että voisimme varmasti joitakin jos olosuhteet, jotka sanovat jos sähköpostiosoite ei ole username@something.edu, voisimme vain anteeksi ja anteeksi käyttäjälle paljon, kuten saatat olla PSET seitsemän. Tai jos he eivät ole tarkastaneet, että laatikko, osoittautuu PHP, voit havaita että, liian. Ja varmasti jos salasanat eivät täsmää kuin register.php varten PSET seitsemän, voit havaita, että. Mutta se kipu kaula, että nyt ne pyytävät meidän mennä koko matkan palvelimelle. Käyttäjä saa tiedon virheestä. Ja ainakin jos käytät jotkut harrastaja tekniikoita, nyt ne täytyy klikkaa takaisin nuolta. Eikö olisi mukavaa, kuten paljon sivustoja tänään, jos sinulla on ollut enemmän välitöntä palautetta, heti? Toisin sanoen, anna minun mennä versio yksi, joka tulee olemaan ei kauniimpi. Mutta se ei ole tätä ominaisuutta. Malan, 12345, 123456789, ei menossa valintaruutu, rekisteriin. Salasanat eivät täsmää. Joten vaikka tämä pop-up on ugly-- voimme korvata tämän lopulta kanssa jotain Bootstrap, joka sinun nähdä PSET seitsemän on erittäin suosittu library-- tein havaita, että salasanat eivät täsmää. Selvä. No, minäpä korjata, että käyttäjä. Anna minun mennä eteenpäin ja sanoa 12345, 12345. Vielä ole tarkkailun sopimusta. Sinun on hyväksyttävä käyttöehdot. Miksi siis? Jos olemme jo posited että olemassa tapa, ja olemme tarvitaan sinua PSET seitsemän havaita virhe olosuhteet kuten tämä server-side, miksi minun pitäisi vaivautua myös Näin JavaScript? Mitä argumentti kannattaa lisätä mitä olet tulleet niin some-- siellä on lisää ongelmia. Ehkä ei ole ylösalaisin. Mikä se voisi olla? Yleisö: [äänetön]. DAVID MALAN: Oh, mielenkiintoinen. Mahdolliset hyödyntää. Niin varma, jos et käsittely virheellinen käyttäjä syöttää että suuri, ehkä se on aina parempi, jos se ei edes pääse palvelimelle. Haluan työntää takaisin sinne ja sanoa, sinun pitäisi luultavasti korjata molemmat näistä ongelmista. Mutta se on reilua. Mitä muuta? Yleisö: [äänetön]. DAVID MALAN: Joo. Tämä koodi, kuten sanoimme aiemmin, on tulkittava client-side. Se ei häiritse palvelin, mikä tarkoittaa, että se ei ole vaikuttaa palvelimen kuorman tai kapasiteettia. Ja nyt, pieni vanha minulle, tämä ei ole mielekäs vaikutusta koska minulla on yksi käyttäjä juuri nyt. Mutta jos olet mitään verkkosivuilla kunnon kokoinen, erityisesti suurin, kuten Facebook, enemmän voit pitää ihmiset pois palvelimen paremmin koska palvelin, tietenkin, on vain rajallinen määrä muistia, rajallinen määrä gigahertsin, rajallinen määrä asioita se voi tehdä aikayksikköä kohti. Joten jos on enemmän ihmisiä maailma lyömällä palvelimelle, vahingossa kirjautumisen väärin, yhtä hyvin, jos voi pitää, että kuormitusta palvelimelle. Plus, erityisesti mobiili device-- Jos olet koskaan kirjautua my.harvard tai Yalen netid tai vastaavan, on tämä latenssi paljon sivustot kuten että jolloin se kestää, kuten, hemmetin toinen tai kaksi joskus. Ja sitten, minun Jumalani, jos mistype, sinun täytyy iskeä takaisin ja tehdä uudelleen se. Joten siellä on latenssi, erityisesti hitaammilla verkkoyhteyksiä. Mutta JavaScript, koska se toimii asiakkaan ja ei tarvitse mennä edestakaisin yli mahdollisesti hidas internet yhteys, voit saada lähes hetkellinen palautetta. Joten katso tätä. Saanen avata muotoon 0 ja tarkastella HTML täällä. Ja haluan vain nähdä, mitä tapahtuu. Tämä on lomake, jonka toiminta on register.php. Olen vain käyttämällä saada niin että voisin nähdä URL. Mutta salasanoja, olisimme varmasti haluamme muuttaa tätä lähettää todellisuudessa. Tässä syöttökentässä kirjoittaa tekstiä. Tässä toinen tulo alalla Kirjoita salasana. Tässä on, jos et ole koskaan nähnyt, tulo tyypin valintaruutu. Mutta ei ole JavaScript täällä lainkaan. Tämä on vain HTML että menee register.php. Mutta versiossa yhdessä, missä olen alkoi saada nämä ponnahdusikkunoita, Katsotaan mitä todella tapahtuu täällä. Versiossa yksi, mitä Aion see-- I ajattelin pysähtyy tarpeeksi tarpeeksi sanoja, mutta juoksin ulos. Versiossa one-- siellä mennään. Versiossa yksi, huomaa following-- ja ei ole paras täytäntöönpanoa, mutta se on minun ensimmäinen. Huomaa, että alle muodossa, minulla on komentosarjatunnus. Ja komentosarjatunnus tarkoittaa, hei, selain, tässä tulee joitakin koodi, tyypillisesti, JavaScript. Ja nyt, huomaa, mitä olen tekemässä. On line-- voin tuskin Lue it-- linja 32, se sanoo, var form-- niin anna minulle muuttuja nimeltä muodossa. Ja sitten saada document.getElementId ja "rekisteröinti." Mikä tämä on? No, minäpä taaksepäin tänne. Ja ilmoitusta, ah, annoin lomakkeen elementti mielivaltainen mutta kuvaava ajatus rekisteröinnin. Joten tämä antaa minulle muuttuja antaa minulle mahdollisuuden napata että solmu, että suorakulmion puu nimeltään muodossa. form.onsubmit keinot, hei selain, Rekisteröidy tapahtuman kuuntelija tällä lomakkeella. Toisin sanoen, kun tämä muoto on toimitettu, suorittaa seuraava koodi. Se ei tarvitse nimeä, koska miksi sinun täytyy tietää nimi? Sinun tarvitsee vain tietää mitä suorittaa, ergo se nimetön tai lambda-toiminto. Ja että toiminto on kaikki nämä linjat täällä. Ja nyt, ollakseni rehellinen, vaikka ei ehkä olisi koskaan kirjoittanut JavaScript ennen, se on vain C ja PHP logiikka. Joten jos form.email.value == "" - joten jos sähköpostia kenttä on tyhjä, huutaa käyttäjälle "Sinun täytyy anna sähköpostiosoitteesi. " Else jos form.password.value on tyhjä huutaa käyttäjä, "Sinun on annettava salasana." Lisää kiinnostavaa loogisesti, jos form.password.value ei yhdenvertaisen form.confirmation.value-- Mistä vahvistus tuli? Saanen taaksepäin. No, pyysin tämä tulo kenttä täällä salasana. Ja Kutsuin tämä täällä vahvistusta. Voisin ovat kutsuneet sitä salasana kaksi tai jotain muuta. Olen vain loogisesti tarkkailun että nämä kaksi ovat samoja. Else-- se kääntyy pois tämä on Mr. Boole again-- totuusarvon, valintaruutu. Joten jos sanon, huudahdus point-- jos ei form.agreement.checked, huutaa käyttäjä samoin. Joten tämä syntaksi näet on hyvin yleinen JavaScript, jos sinulla on pistein erotettu. Aloitat objekti täällä. Voit sukeltaa syvemmälle ja omaisuutta kuten salasanan. Ja sitten saat sen todellisen arvon. Ja vielä, tässä on panos. Tässä on Salasana. Ja sen arvo on riippumatta ihmisen on todella kirjoitettu. Niin kaikissa näissä tapauksissa, palasin väärä. Mutta jos ei, palaan totta. Ja nyt näemme pakottavia käyttö kun voit palata false lopettaa se, mitä käyttäjän tekemässä ja hänet tai häntä valitsemaan uudelleen tai kirjoita uudelleen. Muuten palaamme totta. Ja haluan esitellä yksi muut muunnelma tämä vain siemeniä jonkinlainen käsitys siitä. No, versiossa 2 Tämän lomakkeen-2-- Teen sen aallon käsi. Tämä on, niille utelias, jQuery versio, Niille teistä, jotka kannattaa harrastella kyseisessä kirjastossa. Mutta katsotaanpa start-- ja kysymyksiä? Saanen pysähdy hetkeksi, koska että oli nopea ja paljon. Mutta mukava asia tässä on, että kaikki koodi on melko sama. Uusia juttuja on mitä on Dom? Mitä nämä suorakulmioita? Mitä nämä solmut? Mikä anonyymi funktio? Mikä tapahtumankäsittelijänä? Mutta onneksi suurin osa joka on vain täysi ympyrä päässä vaikkapa viikko nolla. Selvä. Joten jotain hieman mielenkiintoisempaa? No, ensinnäkin, anna minun mennä eteenpäin ja avata Google Mapsin. Ja huomaat, että hetki, on sekunnin murto, huomaa, mitä tapahtuu, kun En osoita tarpeeksi nopeasti. Ja tässä yhteydessä Harvardin on niin nopeasti, että et todella huomaa sitä. Mutta mitä sellainen tavallaan nähdä jos napsautan ja vetää todella nopeasti? Ne teistä katsomassa verkossa, jos hidas tämän 0.5x nopeus, näet tämän paremmin. Mitä oli tapahtumassa juuri ennen klikkasin ja vetää? Yritän here-- anna minun tehdä jotain muuta, kuten 90210. Mennään kaukana. Se oli todella nopea, liian. Entä Disney World? Siellä mennään. OK. Mitä sinä näe sekunnin murto? Aivan, kuten, aukiot, eikö? Paikanvaraajia laatat? No, mitä täällä tapahtuu? Google Maps on mukava esimerkki tämä tekniikka että kutsutaan AJAX. Ja tämä on silloin alamme Käytä JavaScript erityisen houkutteleva tavalla. Takaisin seuraavana päivänä, oli Tämän sivuston nimeltä MapQuest. Ja minun olisi pitänyt kuvakaappaus tämän 1990-luvulta, jossa jos halusi etsiä täällä kartalla, voit kirjaimellisesti klikkaa nuolta ylös alkuun, että näytin sinulle eri neliön kartan. Jos halusi siirtyä vasemmalle, te napsautti nuoli, joka osoitti sinulle eri neliön kartan. Ja jotkut sivustot vielä tehdä tämän tänään. Mutta vaikka MapQuest on saanut parempi, kuten Google Mapsissa. Sen sijaan, mitä parempi nämä päivää on sivustoja, jotka käyttävät AJAX. AJAX-- joka tunnetaan myös Asynchronous JavaScript ja XML, joka on vain hieno tapa sanoa teknologia tai tekniikka, mahdollistaa selaimen JavaScript lisämaksujen HTTP-pyyntöjen kun sivu on ladattu. Mitä tämä tarkoittaa? No, se olisi eräänlainen ärsyttävää Gmailissa jos aina halunnut tarkistaa sähköpostisi, olisit kirjaimellisesti lyödä Ctrl-R tai Komento-R tai napsauta Päivitä painike ja koko hiton sivu olisi uudelleen. Oikea? Se flash valkoinen luultavasti toiseen. Näkisitte tyhmä etenemispalkki. Ja vain nähdä, jos sinulla on uusi posti, koko web-sivun ja URL olet olisi ladata. Mutta se ei ole mitä tapahtuu Gmailissa. Oikea? Kun saat uuden sähköpostin Gmail, mitä tapahtuu ruudulla? Se vain osoittaa ylös, oikea? Se vain maagisesti näyttää uutena rivin taulukossa. Joka todella merkitsee ihmisarvoisen määrä monimutkaisuus. Itse asiassa, jos ajattelee tämä puu, joka vaikka on yksinkertainen täällä, Gmail-- ja olin on tarkasteltava klo koodi on sure-- luultavasti on HTML-taulukon tai ehkä Järjestämätön lista, että se tekee jokainen sähköpostilaatikoitaan sähköposteja. Ja joten jos kuvitella tämä on on puu muistissa, kun olet Gmailin että näyttää sellaista tavallaan kuten tämä, kun Google tajuaa, ooh, sinulla on uuden sähköpostiviestin, se ei haluavat rakentaa koko puun. Pikemminkin se haluaa löytää solmun puu, joka edustaa postilaatikkoosi ja vain lisätä uusi solmu. Joten hyvin samanlainen PSET viisi, jossa oli lisätä solmut tiiviste, Vastaavasti Google, kautta JavaScript-koodia, joka on kirjoitettu, poikittainen tämä puu, selvittää missä on se Saapuneet osa ikkunan, ja sitten lisätä uuden rivin. Ja uusi rivi vain tarkoittaa yksi tai enemmän uusia solmuja puussa. Ja niin AJAX on tämä tekniikka joka mahdollistaa juuri näin. Kun olet käynyt URL, mutta hullu kauan se on, ja kun sivulla on ladattu, voit silti napata enemmän tietoja internet-- onko se sähköpostia tai laatta map-- napata se kulissien takana ja aseta se sivulle niin että ihmisen ei oikeastaan tarvitse odottaa sitä. Facebook Messenger toimii samalla tavalla. Useita muita websites-- Voi, itse asiassa, vaikka tämä. Tarkoitan, tämä on suoraan sanoen eräänlainen ärsyttävää on näinä päivinä. Jos minä alkaa etsiä cats-- tämän on sellainen kamala käyttökokemuksen. Se vain alkaa hakea minulle. No mitä se tekee? URL ei ole juurikaan muuttunut koska aloin kirjoittaa. Mutta mitä tapahtuu kaikkialla wire-- OK, hmm mielenkiintoinen. Mitä on meneillään koko lanka tässä vain saa weirder. OK. Joten anna minun mennä eteenpäin ja tarkasta elementti ja mene Verkko-välilehti ja yrittää tehdä tätä tekninen ja vähemmän noin kissoja. Kuin kirjoitan, kirjaimellisesti, kissat and-- mitä tapahtuu per-- En aio klikata että. Selvä. Joten täällä, mitä tapahtuu joka kerta kun kirjoitat merkin, ilmeisesti? Kuten, alhainen? Mitä tapahtuu kunkin näistä merkkiä Olen kirjoittamalla minun näppäimistö? Joo? Yleisö: [äänetön]. DAVID MALAN: Aivan. Kukin näistä merkeistä on menossa Google, yksi kerrallaan. He ovat rakentamassa merkkijono niiden palvelin, joka edustaa mitä olen kirjoittanut toistaiseksi. Ja joka kerta olen tyyppi toinen hahmo, ne käyttää salainen kastike hakualgoritmi ja selvittää, Tarkoittaako hän tällä kissa sivu tai tämä kissa sivun tai vastaavaa? Joten jossain mielessä, se antaa minulle parempi kokemus, että en edes täytyy suorittaa minun ajatukseni. Ja todellakin, se on hyödyllinen asia, Automaattinen täydennys yleensä. Jos heidän algoritmit ovat tarpeeksi hyvä ja jos minun haut ovat ilmeisiä tarpeeksi, Minulla ei tarvitse kirjoittaa koko sanan. He kertoa minulle, mitä se on olen todella etsivät. Joten mitä Google kutsuu instant haku on vain AJAX, käyttää koodin, jonka avulla ne voivat pyytää lisäsisältöä verkkoselaimen kautta kulissien takana käyttäen tätä uusi kieli, JavaScript. Meillä on pari minuuttia jäljellä. Ja haluaisin kutsua kaverini Colton ylös lavalle, koska se tuntui erityisesti hauskaa viimeksi ottaa käyttöön teknologiaa että jotkut teistä ovat ilmaisseet kiinnostuksensa vuonna lopullista hankkeisiin. Ajattelimme se olis hauska tuoda ylös vapaaehtoinen, vaikka, tänään näyttää lisäksi tämä joka mahdollistaa sinä-- joo, Minä näin tämän korttinsa ensin. Tule ylös. Erittäin hyvin tehty. Hyvä työ. Aion hankkeen tätä näyttö vain hetken. Mikä sinun nimesi on kaikille? EFA: Olen Efa. DAVID MALAN: Etha? EFA: Efa. DAVID MALAN: Efa? EFA: Joo. DAVID MALAN: Kiva nähdä sinua. Selvä. Nyt tämä valmiiksi. Tule yli keskelle Colton täällä. Mitä Colton on käsissään tänään on kaukosäädin. Joten sen sijaan vain seistä siellä kolmiulotteisessa maailmassa katselee ympärilleen kuten Colton teki, nyt Efa voi itse kävellä ympäri menemällä ylös, alas, vasemmalle ja oikealle kuten Nintendo tai Xbox-ohjain. EFA: Aion pudota pois lavalta. DAVID MALAN: minä seistä noin tänne. Mutta se on riski. OK. Niin mene eteenpäin ja laittaa ne. Anna minun mennä eteenpäin ja vaihtaa näytön täällä. Saanen himmentää valoja. Ja Colton, haluan tulevat seistä vieressäsi. Haluatko selittää täällä kanssa mic mitä teemme? Ole hyvä. COLTON: Toki. Joten nyt olemme lataamisen Oculus, Luulen operating-- ei toimi järjestelmä, mutta pääohjelma, jossa voit käyttää kaikki pelit ja sovellukset, jotka ovat kirjastossa. Joten nyt, sen pitäisi sanoa napauttamalla kosketuslevyä alkaa. Touchpad tulee olemaan oikealla puolella kuulokkeet. Niin mene eteenpäin ja tap-- EFA: Voi mies. DAVID MALAN: Joo, siellä mennään. Laatu Efa näkee on paljon korkeampi laatu. Tämä on vain Wi-Fi täällä. COLTON: Mitä olet menossa haluavat tehdä on katseensa alkuun näytön oikeassa. Jep, että peli hyvin oikeassa yläkulmassa. Ja sitten kun olet valinnut se, kosketa kosketuslevy uudelleen. Mielestäni sen Dreadhalls. Ja sitten tässä on a-- täällä, anna minulle pidä lasit sinulle. Joten en juuri antoi hänelle ohjain. Joten nyt hän voi hallita peliä. Hän voi liikkua ja tavaraa niin. Niin mene eteenpäin ja etsiä ylös. Sinun pitäisi nähdä uuden pelin. Niin mene eteenpäin ja voit tehdä sen. Nyt sinun pitäisi pystyä ohjaamaan itseäsi ohjain, samoin, kun peli lataa täällä. Tämä voi olla hieman pelottavaa. EFA: Nyt kerrot minulle. OK. COLTON: Selvä. Joten varmista, että voit liikkua. OK. Voit liikkua. Täydellinen. Joten jos katsot alas, sinulla on kartta. Kartta näyttää, missä olet. Voit katsoa ympäri huonetta. Voit täysin kääntyä ympäri. Joo, täsmälleen. Käänny ympäri. Niin katso vasemmalla. Mielestäni siinä on jotain voit poimia tynnyrin huoneessa. EFA: Miten saan kartta pois tieltä? COLTON: Katso ylös. Vain etsiä. Selvä. Ole hyvä. Nyt mennä eteenpäin ja vain kääntää ympäri. Niin katso kauemmaksi vasemmalla. Pidä liikkuu vasemmalle. Pidä näköinen vasemmalle. Anna mennä. Joo. EFA: Ai, niin. COLTON: Joo. Kävele kohti se ohjain. Ole hyvä. Nyt pitäisi sanoa noutaa. Ole hyvä. Noutaa. Selvä. Nyt, päästä pois tästä huoneesta. Menkää ja kävele tuosta ovesta. Joten aiot hold-- se sanoo pidä painiketta väkisin auki. Joten mene eteenpäin ja pidä painiketta. Jep, pakottaa se avaa. Selvä. Hyvä työ. Nyt olemme kävely ulos huoneesta. Joten aion jättää loput ylös teille ja katso mitä saat selville. EFA: En aio pimeässä huoneessa. Hei odota. Nyt minun täytyy mennä alas tumma sali? OK, Menen takaisin [kuultavissa]. COLTON: Selvä. Jotkut enemmän kohteita poimia. Näyttää joitakin kolikoita. Se lukko pick. Joten jos löydät lukittu ovi, voit käyttää sitä. Oletko peloissasi? EFA: Ei vielä. COLTON: OK. Pretend-- joo. Vain teeskennellä olet todella seisoo siellä. Ja jos otat around-- sinun täytyy tottua siihen. Mutta se on järkevää. DAVID MALAN: Ja kun Efa edelleen pelata, koska voisimme tehdä tämän koko päivän, voimme kaikki TipToe täällä. Mutta meillä on kaksi muuta paria, jos haluat tulla ja pelata. Muuten, näemme ensi keskiviikkona. Kiitos meidän vapaaehtoinen tänään. [APPLAUSE] [MUSIC - "SEINFELD Theme"] SPEAKER 1: No, olen laittamalla uusi PL asentaa. Muutin juuri OLPF-- SPEAKER 2: Mitä juuri sinä teet? SPEAKER 1: No, jokainen these-- täällä, minä näytän sinulle tämä yksi täällä. Voit nähdä sen täällä. SPEAKER 3: Mielestäni olen hyvä näitä. Haluatko lisää? SPEAKER 4: Ei, olen hyvä. [Äänetön]. SPEAKER 3: Ei, [äänetön]. Ota muutama. SPEAKER 1: toinen väri. SPEAKER 2: OK. SPEAKER 1: Joten lopulta mitä se ei se säätää väri of--