>> [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--