>> [Muzikos grojimo]
>> DAVID Malan: Tai CS50.
Tai devynių savaitę pradžia.
Ir tai, kas būtų buvo pono Boole 200. gimtadienis.
Taigi tai yra bičiuliai kam mes užsiminė
gana kartais apie naudojant Būlio kintamieji true ir false,
1 ir 0, ir tokių.
Ir tai buvo "Google" duoklė jam šiandien.
Jis pasuko 200.
Taigi, jei norite prisijungti prie mūsų CS50 pietums,
pažvelgti į nuorodą išvaizdą kurso tinklalapyje.
Ir tokie veidai ir draugai kaip tai laukia Jūsų čia Cambridge.
Veidai, kaip šie jūsų laukia New Haven.
Ir, tiesą sakant, Ken Niu Heivenas maloniai padarė
tai, kas vadinama animacinis GIF Helego čia neseniai lunch-- GIF dar
kitas grafinis failo formatas, su kuria jūs familiar-- kad
atrodo šiek tiek kažką panašaus į tai.
Taigi tiesiog seka of-- Gerai.
Niekas čia Kembridžo juokiasi.
Bet New Haven, tai yra tikrai juokinga, tiesa?
Gerai.
>> Taigi, prisijungti prie mūsų ten.
Čia Harvarde, Tiksliau, tai, trečiadienis
jei esate antrakursis ar pirmakursis even-- ar net junior-- mąstymas priėmimo
iškeitimas į kompiuterį Mokslas, žinau, kad ten bus
Būkite CS patarti teisinga tai Trečiadienis, netrukus po klasę
4:00 PM kompiuteryje Mokslas pastatas Maksvelo Dworkinas.
Mes įdėti šią kurso s svetainė rytoj, taip pat.
Donuts, aš sakė, bus įteiktas.
>> Gerai.
Taigi juokinga story-- buvau išnyra aplink internete,
ir radau keletą senų archyvų mano buvusios svetainėje.
Ir paaiškėja out-- išspręsti šią laikas, atrodo, labai laiku
nes aš surinkti, kad UC rinkimai ketinate pavara vėl.
Taigi aš bėgo UC, prarado apgailėtinai.
O gal tai buvo iš dalies kodėl.
Taigi tai buvo mano svetainėje metu.
Dėl tam tikrų priežasčių, aš maniau jis buvo gera idėja, prieš žmones,
ką mano platforma buvo ir kodėl jie turėtų balsuoti už mane, kad jie turi
spustelėkite įvesti sužinoti, kad informacija, kuri retrospektyviai yra
rūšies šliaužiantis.
Aš tikrai nežino, kas tai buvo.
>> Bet tai tikrai ne padėti savo kampaniją.
Aš taip pat nustatė, kad vyresnysis šarvuotuose Aš turėjau šią Muppet kalendorių.
Muppety buvo rūšies madinga atgal tada.
O gal jie nebuvo.
Turėjau Muppet kalendorių atgal tada.
Ir aš pagalvojau, kad būčiau kietas pavadinimas Mano kompiuteris Harvardo universiteto tinkle
frogman.student.harvard.edu.
Tuo metu, mes visi turėjo unikaliai identifikuojamas vardų.
Ir jūs galite pasirinkti keletą šurmulio pavadinimas, o ne savo vardu.
Ir aš su Płetwonurek dėl tam tikrų priežasčių.
>> Ir tada aš started-- Aš praleido daug laiko aplankys šių nuorodų
šį rytą.
Ir tai buvo mano apie puslapį, kuri dabar rūšies atrodo žavinga.
Tačiau ji taip pat liudija, kad tik kiek technologija atėjo.
Aš turiu galvoje, atgal per dieną, 486 buvo kažkas.
Šių dienų, tai super, super, Super lėtai ir gerai mažiau
nei jūs galbūt turite pačių kišenės šių dienų.
Yra daugiau ten, kad buvo dar labiau nemalonu.
Taigi aš palikti jį tuo.
Bet tai buvo mano pirmas įsiveržimas į web-- oh, ne.
Tai nebuvo.
Mano pirmasis realus įsiveržimas į interneto programavimo buvo ši svetainė, kuri man tiesiog pamiršo.
Tam tikru momentu, aš sužinojau, kaip padaryti pasikartojančias fono paveikslėlius.
Ir taip radau tai plytelės veiksmingos, kaip ritulio grotuvas, futbolas, golfas ir
Rutuliniai, ar kas tai yra už Frosh Moment svetainėje.
Ir tai buvo iš tikrųjų, tikrai tos Pirmasis internetinis projektas, aš paėmė on--
Manau gal antrakursis metus, jaunesnysis šarvuotuose
Išgėrus CS50 ir CS51, vieną iš bendrų tolesnio klases.
Aš pastebėjau ieškote per archyvuose
kad vienas iš mano įpėdiniams ir draugai, Lee rūšies pasikeitė
autoriaus teisių į save.
Bet iš tiesų tai buvo kažkas, kad Turėčiau savo varžymasis į.
Tačiau tuo metu, šis buvo pirmoji svetainė,
kaip sakiau prieš kelias savaites, kuriuo pirmakursis negalėjo
užsiregistruoti vidines sporto čia.
Ir taip it turns out kad fono paveikslėlius
kaip kad yra ne tokia gera idėja.
Bet interneto buvo nauja ir visi buvome eksperimentuoti.
Ir tai, ką aš matyt, tuo metu.
Gerai.
Taigi be tolesnio ceremonija, mes pereiti įrankių šiandien duoti jums, tikrai,
galutinis gabalas, kad jūs galite rasti ypač naudinga galutiniams projektams
bet taip pat, kad bus pradėti kad visas pasaulis Wide Web
jaučiasi šiek tiek suprantamesnė.
Iš tiesų, mes ketiname pristatyti dar viena programavimo kalba
vadinamas JavaScript, kad panašus ir skiriasi skirtingais būdais
iš kalbų, mes pažvelgė iki šiol.
>> Taigi, C, prisiminti, tai yra kaupiami kalba.
Jūs turite paleisti jį per sudarytojas.
Gauni kodą prieštarauti kodas arba nuliais ir tie.
Ir tie, kurie nuliais ir tie, kurie Jūsų procesoriaus, Central Processing Unit,
iš tikrųjų suprasti.
PHP, priešingai, yra ne parengtą kalba.
Tai ką?
Tai aiškinama kalba.
Taigi yra keletas programa vadinama vertėjo, kad
turi skaityti it-- viršaus į apačioje, kairėje right--
ir išsiaiškinti, kas visus Jūsų sintaksė daro ir tai,
ar tai kilpa ar būklė arba bet kuri kita skaičius programavimą
konstruoja.
Štai aiškinami kalba.
>> Tada mes pristatėme HTML.
Ir HTML nėra net programavimo kalba.
Mes norime, kad tai, ką vadiname?
Žymėjimo kalba, kuri yra tik išgalvotas būdas pasakyti tai tarsi
neturi programavimo konstrukcijas, pavyzdžiui, mes matėme net atgal į nulio dieną.
Nėra kilpos.
Nėra nustatytos sąlygos.
Jis tikrai yra kalba apie ženklinimo kopijas savo duomenis
ir formatavimo, tai ar struktūruoti ją tam tikru būdu.
>> CSS, tuo tarpu, panašiai nėra programavimo kalba.
Tai dar labiau estetiškai orientuota.
Ir tai leidžia jums rūšiuoti suderinkite dalykų, pavyzdžiui, šrifto dydžio ir spalvų
ir išdėstymas, ir visi, kad.
Tada mes turėjome
>> SQL.
Taigi SQL tiesų programavimas kalba tam tikra prasme,
nors pritaikyti specialiai su duomenų bazėmis.
Bet nors mes tik supažindinti jus su pasirinkti ir įrašyti ir ištrinti ir atnaujinti
ir kitų, pora, Pasirodo, jūs iš tikrųjų galite
rašyti funkcijas arba procedūros, kaip jie
vadinamas, SQL, kad atrodo ir veikia labai patiko PHP ir C funkcijas.
Taigi žinau, kad tie, egzistuoja.
Bet mes neturime net vargintis su jais kaip mes tik subraižyti paviršių čia.
Ir tada Javaskriptą, paskutinis Mūsų kalbos oficialiai pristatė.
Taigi JavaScript, taip pat yra aiškinami kalba.
Ir tie, kurie žino, tai norite jį atskirti
su kai charakteristika iš abiejų C ir PHP?
Kuo ji skiriasi?
>> Auditorija: Tai ne renkami.
>> DAVID Malan: Pasakykite naujo?
>> Auditorija: Tai ne renkami.
>> DAVID Malan: Tai ne renkami.
Taigi, taip pat yra aiškinama.
Taigi tai nėra kaupiami.
Bet, kad daro tai, kaip PHP mažai.
Tačiau jis vis dar skiriasi nuo PHP keletą stulbinančių būdu,
bent tokiu būdu, mes jį naudoti.
Taip?
>> Auditorija: Ji veikia kliento pusėje.
>> DAVID Malan: Ji veikia kliento pusėje, paprastai.
Štai iš tiesų skiriamasis būdinga mums dabar.
C buvo server-side ta prasme, kad mes padarėme viską CS50 IDE.
PHP šiol buvo serverio pusės tiek,
nes ji taip pat gauna interpreted-- nėra parengta, bet interpreted--
viduje CS50 IDE, kuris, žinoma, yra tik serverio ar serverių debesyje.
>> Bet Javaskriptą, net Nors jūs ketinate
pradėti rašyti jį, tarkim, pset aštuoni, o gal galutinis projects-- esate
vyksta į dešinę jį CS50 IDE ir išsaugokite jį
rinkmenose per CS50 IDE, CS50 IDE ir, savo ruožtu, debesys serveriai
dėl kurių jis vyko, nesiruošia interpretuoti arba vykdyti kodą.
Atvirkščiai, jis ketina būti siunčiami nepakitęs forma žemyn naršyklėje.
Ir tai tada bus IE ar Chrome arba Firefox ar Safari
ar kas, kad iš tikrųjų interpretuoja tai, iš viršaus į apačią, iš kairės į dešinę.
Taigi pagrindiniu atskirai iš būdingas šiandien
yra tai, kad "JavaScript" yra kliento pusėje ir PHP, pavyzdžiui,
buvo serverio pusės.
Dabar, tai yra įdomių pasekmių už, kaip, intelektinės nuosavybės
ir kas iš tikrųjų galite pamatyti savo kodą.
Ir iš tiesų, galite eiti internete ir pamatyti, labiausiai
bet kodas, kad kažkas turi parašyta JavaScript.
Kartais tai skaitoma, Kartais tai neskaidri.
Bet daugiau apie tai laiku.
>> Taigi JavaScript, pakankamai gražiai, yra Super panašūs, sintaksiškai, C.
Ir panašiai kaip PHP, nėra pagrindinė funkcija.
Jei norite pradėti rašyti JavaScript kodas, kaip pamatysite šiandien
jūs tiesiog pradėkite rašyti ją.
Bet tai pamatysite, ypač naudingi naršykles kontekste.
Tačiau, mano mažai disclaimer-- paprastai earlier--
buvo pasakyti, kad jūs galite vis Šiandien naudoti "JavaScript server-side
naudojant išgalvotas sistemą, vadinamą Node.js kad kai kurie iš CS50 pačios paraiškų
yra parašyta.
Patikrinkite 50 tikrųjų naudoja Node.js.
Tačiau mes ketiname sutelkti dėmesį į JavaScript kliento pusėje čia atlikti.
>> Taigi čia yra tam tikrų sąlygų PHP rinkinys.
Atsiprašome, in-- tikrųjų, kad pareiškimas, taip pat yra teisinga.
Čia taip pat yra komplektas sąlygos "JavaScript".
Sintaksiškai, tai identiškas C ir PHP.
P Boole išraiškos, Be to, sintaksiškai
identiškas tiek C ir PHP.
Mes taip pat turime jungikliai JavaScript, kad atrodo identiški.
Mes turime kilpomis, kurios yra struktūra vienodai,
o kilpos, padaryti, o kilpų.
>> Tai vienas šiek tiek skiriasi.
PHP turėjo už kiekvieną konstrukto kad jums gali būti naudojant
ar bus naudoti pset septynių, galbūt.
JavaScript turi šią ypatingą versiją o kur jūs tiesiog pasakyti
kaip kintamojo rakto objektas, kuris yra labai glausta būdas pasakyti,
jei aš turiu object-- ir mes kalbėti apie tai vėl į moment--
ir aš noriu pakartoti virš visų iš pagrindinių verčių porų viduje,
Aš neturiu išsiaiškinti, kaip programinio indekso juos su nulis, vienas,
du, trys.
>> Galiu tiesiog pasakyti tai.
Ir ant kiekvienos iteracijos, JavaScript man bus atnaujinti kintama raktą
būti pirmasis raktas, tada kitas raktas, tada kitas raktas, tada kitas raktas,
ir taip toliau.
Ir aš galiu gauti savo verte apdorojant in JavaScript objektas, kaip matysime,
taip, lyg tai yra masyvą PHP.
Iš tiesų, jei jūs pagaliau suvynioti savo mind aplink ką masyvą yra
PHP, galite galvoti apie tai dabar kaip tapatus JavaScript objektą.
Bet tai iš tiek supaprastinimas.
>> Masyvai atrodo, pakankamai gražiai, identiška PHP išskyrus vieną požymį.
Yra vienas dalykas, trūksta čia kad mes padarėme pamatyti praėjusią savaitę su PHP.
Kas praleista?
Taip?
Nėra doleris ženklas.
Taigi, mes grįžome į A daugiau normalus pasaulis, kuriame
kintamieji neturi doleris ženklai.
Bet jūs priešdėlis juos su var, tipiškai.
Ir var tai kintamąjį.
Ir panašiai kaip PHP yra silpnai typed-- kuriuo yra tipų,
yra numeriai ir įsipareigojimų ir plūdės ir taip forth--
JavaScript panašiai turi tipus.
Bet tai laisvai įvedėte kad mes, programuotojai neturi nurodyti juos.
Mes tiesiog turime žinoti kad skirtingų tipų egzistuoja.
>> Kintamieji, meanwhile-- čia kaip mes galime paskelbti "Labas, pasauli"
kaip eilutę.
Atkreipkite dėmesį, kad tai identiškas PHP bet ne dolerio ženklas.
Ir tai yra kažkas, mes pradėsite matyti daugiau šiandien
kuriuo turite objektą su raktais ir vertybes.
O jei norite išbandyti daryti išvadą, nuo praėjusių week--
sintaksė yra šiek tiek kitoks.
Bet šiek tiek normalumas check-- kiek raktai ar šis objektas, atrodo, turi?
Taigi matau keturi.
Matau du.
>> Taigi tai tikrai du.
Taigi tai yra kolekcija dvi pagrindinės vertės poromis.
Svarbiausia yra simbolis, kurio vertė yra FB.
Svarbiausia yra kaina, kurios vertė yra 101.53.
Taigi tie du pagrindiniai vertės poros.
Ir atminkite, PHP-- ir tai dar kartą tiesiog tarsi sintaksės skirtumas.
Tai dar ne viskas, kad intelektualiai įdomu.
PHP galėjo parašyta tas pats dalyko kaip follows-- citata, lygus.
Ir aš galiu pasikeisti juos laužtiniuose skliaustuose.
Ir tada aš jį pakeisti kotiruojama žodis "kaina".
Ir tada aš ne naudoti dvitaškis.
Ką aš naudoju praėjusią savaitę?
Taip, lygybės ženklas arrow funky notacijos.
>> Ir tada aš tą patį čia.
Tas pats čia.
Ir tai viskas.
Taigi, tai gerai, jei tai nebuvo tikrai nuskendo į atmintį tik
dar, nes tai tikrai intelektualiai neįdomu.
Tai tiesiog sintaksines skirtumus.
Bet idėjos yra lygiai tas pats.
Viduje šio kintamojo citata JavaScript
yra raktas vertės porų rinkimo, viena iš kurių yra simbolis, iš kurių vienas
yra kaina.
Ir aš galiu gauti ne šių vertybių su tokia sintakse.
Tiesiog kaip PHP, galėjau kažką daryti like-- tegul
man padaryti šis langelis šiek tiek didesni.
Tiesiog kaip PHP, galėjau padaryti this-- oh, Dammit.
Nagi.
>> Tiesiog kaip PHP-- Gerai, mes tiesiog naudokite vedėjas pastabas.
Tiesiog kaip PHP, galiu padaryti $ citata $ quote ["simbolis"],
ir tai bus man iš vertė "simboliu."
Be JavaScript, tai bus identiški, kuriuo aš galiu tik daryti tai.
Vienintelis dalykas, kad trūksta doleris ženklas.
>> Taigi pakankamai gražiai, tada, ten ne visi, kad daug naujo sintaksė.
Taigi, ką šiandien turime sutelkti dėmesį į tikrai, yra kai idėjų ir programų.
Ir pirmas toks programa, kuri jums gali
mačiau, jei nėrė į pset septynių jau tai sintaksė.
Taigi pset septyni, jei jūs matė ar nematė dar,
žinau, kad ten yra failas, mes suteikiame Jūs vadinamas config.json-- JavaScript
Objektas Notation.
Kodėl?
Mes norėjome, kad būtų galima suteikti Jums su šablonas su kai kurių pagrindinių vertės poromis.
Mes norėjome, kad būtų galima suteikti jums sąrašą priimančiosios, iš serverio pavadinimą.
Mes norėjome suteikti jums vietaženklio savo vardą
ir slaptažodžio vietos rezervavimo.
Jei nematote Tai dar ne nerimauti.
Daugiau apie tai pset septynių [? spec. ?] Ir tada,
Akivaizdu, kad mes norime jums užpildyti su-DOS
nes kai įeinate į CS50 IDE, kiekvienas iš jūsų
turėti savo vartotojo vardą ir slaptažodį.
>> Taigi, mes galime jau naudojamas pustuzinis ar daugiau skirtingų failų formatus.
Mes galėjome naudoti .txt failą.
Mes galime naudoti CSV failą.
Galėtume kada atliekamas su INI failas XML failą,
visa krūva daugiau akronimai, kad galbūt ne kada nors girdėjote.
Tai tipo savavališkas Dienos pabaigoje.
Bet super populiarus šių dienų yra tekstas formatas vadinamas JSON-- JavaScript objektas
Notation--, kad atrodo taip.
Tai šiek tiek paslaptingas, bet pastebėsite modelius.
Jūs pradedate su atvira Curly petnešomis, ir jūs galų su tuo pačiu.
Viduje, kad yra kažkas.
Tai pagrindinis vertė pora.
Taigi, tai yra objektas, kad aš žiūri į ekraną čia
kad turi vieną raktą, kuris turi vieną reikšmę.
Ir tik išvadą remdamasis Ankstesnis modelis, kas yra raktas čia?
Duomenų bazės, dalykas iš gaubtinės kairysis.
>> Dabar, vertė, atsitinka būti Daugkartinio linijos šiuo metu.
Bet vertė prasideda garbanotas petnešomis ir baigiasi su garbanotais petnešomis.
Taigi, ką siūlytumėte yra tipas duomenų bazės vertę?
Žodynas arba tik daugiau glaustai, objektas.
Teisė?
Tai tipo duomenų struktūrą, galite naudoti kitas struktūras per save.
Taigi, jei visas šis dalykas, mes Skambinimas object-- ir objektą
yra tik raktas vertės pairs-- kiść vertė pati duomenų bazėje yra objektas.
Dėl duomenų vertė turi visa krūva pagrindinių verčių porų, kurių pirmasis
yra priimančiosios, tada pavadinimą, tada vardą, tada slaptažodį
kiekvieno iš jų reikšmės, tuo tarpu, tai tiesiog nuobodus eilutę kabutes.
>> Taigi, net jei tai nėra Super aišku nėra,
žinau, kad tai tik standartas, gana nuobodus būdas
saugoti duomenis standartiniu formatu.
Tačiau bendras klaidų jums gali padaryti net pset septyni,
yra mažai kvailų dalykų, pavyzdžiui, jei jums netyčia praleisti kablelį ten.
Tai ketina sukelti failo nebūtinai yra įskaitomas.
Jei netyčia praleisti dalykų, pavyzdžiui, Citatos, ji nesiruošia būti įskaitomas.
Taigi tai gana nitpicky failo formatas, bet tai vienas, kad super bendra.
Ir mes atsitikti jį naudoti, nors Jums nereikia naudoti bet kokią JavaScript kitaip,
į pset septyni.
>> Gerai.
Taigi nepamirškite šią nuotrauką.
Mes kalbėjome apie, HTML, tai kodas gali atrodyti taip.
Tai hiperteksto kalba [Nesigirdi] dėl teisingo "Hello, World".
Bet tada mes pasiūlėme o atgal, kad jei jis padeda,
galbūt norėsite pradėti galvoti apie tai jau kaip medį.
Iš tiesų, įdubimas, kad mes naudoti tik skaitomumas labui
ar stiliui dėlei apie kairė gali rūšies
būti išverstas į šio medžio, kur jums turėti tam tikrą specialią šaknų mazgas, kad mes
bendrine vadinamas dokumentas, žemiau kurios yra šaknis HTML elementas arba žyma, HTML,
kuri tada turi du vaikai, galvos ir kūno.
>> Ir tada savo ruožtu, vadovas turi pavadinimą.
Ir pavadinimas turi teksto reikšmę.
Ir kūno panašiai yra teksto reikšmę.
Taigi, jei esate patenkintas posakis kad taip, galite pasinaudoti šia HTML
ir nupiešti kaip paveikslėlį to, dešinė pusė
yra gražus psichikos modelis, nes dabar kad mes turime JavaScript, programavimo
kalba, kad naršyklių gali vykdyti ir interpretuoti už jus,
paaiškėja, kad tai, ką mes apie tai, kodu
yra pradėti manipuliuoti tai medžio struktūra atmintyje.
Neturime statyti Į atminties medis.
Neturime daryti tarsi pset penkių stiliaus duomenų struktūra
sudėtingumas.
Naršyklė, pakankamai gražiai, ant Aiškinant HTML viršaus į apačią,
kairę arba į dešinę, yra tiesiog ketiname ranka mums rodyklė ekvivalentą
tai visą medį nemokamai.
Ji visa sunkaus darbo.
Štai ką "Mozilla" ir "Apple ir kiti padarė dėl mūsų.
>> Ir su JavaScript mes ketiname turėti galimybę kontroliuoti ir keisti ir daryti
įdomių dalykų kad medis, kitaip žinomas
kaip DOM ar Document Object Model.
Kokie dalykai?
Na, it turns out, kad JavaScript, ten
Ši skalbimo sąrašas įvykiai, kurie gali vykti.
Ir mes tikrai ne naudojamas, kad Žodis nes savaitę nulio ir pset
nuliui, kai mes kalbėjome apie nulio.
Dauguma iš jūsų turbūt nesinaudojo in savo Scratch projekto renginys.
Tačiau jums gali prisiminti paprastas "Marco Polo
Pavyzdžiui, kai mes turėjome du animacinius, kurių vienas sako: "Marco.
Kitas kurių tada, kai klausymo ir klausos, kad įvykį, sakė, polo.
Jei ne, nedvejodami pažvelgti atgal, kad toli atgal.
>> Bet tai tik pasakyti, ir jūs galite rūšies
numanyti iš šių pavadinimų dalykų, JavaScript, it turns out,
ketina duoti mums kelią klausytis už pelę žemyn arba pelės einame
arba raktas žemyn arba raktas einame arba onSubmit onselect
arba onresizing kažką.
Kitaip tariant, bet koks fizinis poveikis kad žmogus gali imtis su naršykle
kad jūs kiekvieną dieną, galite parašyti kodas, kad klauso šių įvykių
ir tada daro kažką tinkamo.
>> Pavyzdžiui, jei jūs naudojate "Google Maps", kas atsitiks, jei paspausite ir Perkelti
pelė, paprastai?
Jei spustelėkite ir vilkite?
Taip?
Būtent.
Žemėlapis pradeda judėti.
Taigi galite rūšiuoti pamatyti, kas Čionai, kas ten.
Ir kaip veikia "Google" įgyvendina tai?
Na, matyt, jie naudojant iš šių atveju pora
klausytojų, vienas, kad sako, klausytis ant pelės
down-- todėl, kai vartotojas fiziškai stumia savo manipuliatorių arba jo pele
žemyn.
Ir tada mes ieškome kažkas panašaus judėjimo
arba kai kitas įvykis, kad leidžia mums fiksuoti pasipriešinimą.
Ir iš tiesų, vilkite yra panašiai tai dot dot dot sąrašą galimų variantų.
>> Taigi tai bus galingas būdas pradėti reaguojant į naudotojo
net kol jis ar ji iš tikrųjų paspaudžia kažkas aiškiau, kaip pateikti.
Tačiau mes ketiname pristatyti pora temų ten.
Bet pirmiausia leiskite pereiti tam tikru faktinio kodą.
Taigi, aš ruošiuosi eiti į priekį ir atverti Dom-0,
kuris yra labai paprastas pavyzdys čia, kad jei aš priartinti tiesiog
turi šią įvestį čia man.
Ir aš ruošiuosi eiti į priekį ir įveskite "David" mano vardu ir spustelėkite Pateikti.
>> Ir tada, nors tarsi pigiai, aš šią eilutę, kad pasirodo, kad sako,
"Sveiki, Davidas!"
Taigi tai yra natūra Kaip ir mūsų "Labas, pasauli"
kad mes padarėme tikrą laiką atgal C net PHP, nes aš dinamiškai
išvedamas mano vardą.
Galiu padaryti kažkieno vardą čia.
Galėčiau tiesiog pakeisti tai, kaip Ona, spustelėkite Pateikti.
Ir iš tiesų, mažai pop-up pokyčiai.
>> Dabar, pop-ups yra vienas iš dauguma skriaudžiamos bruožai internete.
Ir iš tikrųjų, atgal Dieną pop-up blokatorius
atėjo į mados, nes jus būtų eiti tam tikru website--
gal abejotina place-- kad būtų staiga
pradėti peppering ekraną su visa krūva pop-ups.
Ir taip šis gebėjimas pop-up langai priešais vartotojui
nebuvo ypač žmonijos gerai gavo.
Štai kodėl jūs matote Ši išvengti dalykas,
kurie tiesiog daro visa tai, ką negraži.
Taigi mes ketiname need a geresnis būdas paskatinti vartotoją.
Bet dabar, kad, atrodo, į darbą.
Taigi tiesiog intuityviai, ką atrodo, vyksta čia?
Aš einu į priekį ir spustelėkite Pateikti ir tada kažkas vyksta, aiškiai.
Bet kas nevyksta, kad nutiko Praėjusią savaitę bet kuriuo metu aš spustelėjote Pateikti?
Ką neatsitiko ekrane?
Atsiprašome?
Perkrauti.
URL nepakeitė ne visiems.
Aš pasakiau tai buvo Dom-0, ir aš vis dar ne dom-0.
Paprastai, mes norime gauti pasikeitė kai kurių kitų URL, pavyzdžiui, register.php arba panašiai.
>> Bet net kai aš atmesti spustelėdami Gerai tai, ką,
Atkreipkite dėmesį, kad URL lieka visiškai įdėti.
Ir, iš tiesų, jei aš šiek tiek skeptiškai, leiskite man atverti Chrome ".
Leiskite man atverti skirtuką Network.
Ir pastebėsite, kad tai tuščias metu.
Leiskite man eiti į priekį ir iš naujo Maria.
Nėra tinklo srautą kokia.
Taigi nėra HTTP.
>> Taigi iš tiesų, jei žiūriu kodą už this-- leiskite uždaryti šį langą
ir eiti Žiūrėti kodą.
Įdomu.
Atrodo, ten kai Naujų žodžius, tarp jų scenarijų.
Taigi tegul per CS50 išvaizdą IDE, ką aš išsiuntė vartotojui.
>> Taigi čia is-- tegul sutelkti dėmesį tik į HTML.
Štai apačioje pusė dom-0.html.
Ir pastebėsite, kad jis gavo pavadinimą, galvos žymeles, kūnas žymeles, forma žymė.
Bet kas šuoliai jums, kaip skiriasi, ypač jei jūs niekada
parašyta sau bet "JavaScript".
Leiskite man pereiti šiek tiek į dešinę čia.
Aš turiu įvestį, kitas indėlis pateikti.
Aš turiu ID, kuris yra tipo naujas.
Bet mes matome tai su CSS.
Kas kita yra tikrai naujo?
Taip?
Gražus.
>> Gerai.
Taigi, kur ji sako onSubmit, pastebėti, kas atrodo sekti.
Tai požymis HTML nomenklatūrą.
Jo vertė yra tai cituojamą eilutė čia.
Ir tai atrodo šiek tiek keista iš pirmo žvilgsnio.
Tai ne HTML.
Tai ne CSS.
Tai, kaip jūs galite atspėti, "JavaScript".
Taigi atrodo, kad pastatytas į tai interneto puslapis yra funkcija vadinama Greet.
Ir aš išvadą, kad tik nes tai žodis, sveikinasi.
Jis gavo atvirą paren, Artimų paren, kabliataškis.
Atrodo, C funkcija, atrodo kaip PHP funkcijai.
>> Ir iš tiesų, jis ketina būti funkcija JavaScript.
Tada aš grįžta klaidinga.
Mes grįžti į kad vos akimirką.
Bet kur yra apibrėžta ši funkcija?
Na leiskite slinkite aukštyn į failo viršuje.
Ir nors tai ilgas linija, tai gana paprasta.
Leiskite nutolinti čia ir sutelkti dėmesį į šių keturių eilučių.
>> Taigi JavaScript, tiesiog kaip PHP, jūs tiesiog
tarkim, tiesiog žodis "funkcija", iš funkcijos vardas,
ir tada skliausteliuose su bet arguments-- jokių argumentų šiuo atveju.
Ir nėra grįžimas tipas JavaScript, tik norėčiau PHP.
Taigi tai šiek tiek laisvesnės nei C. Atidaryti garbanotas petnešomis, netoli garbanotas petnešomis.
Įtaisyta JavaScript yra function-- nerekomenduojamas function--
bet funkcija vadinama perspėjimas kurių vienintelis tikslas gyvenime
yra atsigriebti, kad gana negraži greitai, kad mes matėme prieš momentas.
>> Dabar tai yra rūšies gurkšnis.
Kas čia vyksta?
Taigi pradėkime su pabrėžti viską čia.
Tai tas pats argumentas įspėti.
Ir kas vyksta?
Tai tiesiog atrodo kaip eilutę.
Ir it turns out, skirtingai PHP ir skirtingai nuo C nesvarbu JavaScript
jei jūs vieniši arba dvigubomis kabutėmis.
Jie bus lygiaverčiai.
Ir tiesą sakant, tai tik populiarus šių dienų
už JavaScript programuotojai visada Viengubomis kabutėmis dėl kokios nors priežasties.
Tai tiesiog, ką reikia padaryti.
Bet mes galime naudoti dvigubas kabutes, taip pat.
>> Taigi plius yra naujas veikėjas.
Bet tie iš jūsų, kurie jau padarė prieš tai, ką plius reiškia?
Taip.
Jungiant.
Taigi mes matėme tai PHP.
Yra tik taškas operatorius PHP, kad
bus Jungiant dvi eilutes kartu.
C buvo kaklo skausmas tai padaryti.
Prisiminkite iš pset šešių, kuris buvo especial skausmas, kaklo,
Jums reikės naudoti kažkas panašaus strcat
po paskirstant atminties ant klojinio ar krūvą.
Jūs turėjote šokti per lankus tik Jungiant dvi eilutes.
Be JavaScript, tai super paprasta.
Tiesiog naudokite pliuso operatorių tarp jų.
>> Taigi sudėtingas ieško dalykas atrodo tai
nes pabaigoje Visa tai eilutė, aš tiesiog
Jungiant ant šauktuko.
Taigi, jei kas buvo Popping buvo "Sveiki, Davidas", "labas, Ona,"
"Labas, Marija", ir taip toliau, aiškiai kad vidutinio dalykas tarp dviejų
pliusai turi duoti man prieigą prie ko?
Kas ten tikrai?
Taip.
Taigi aš bandau čia atsakyti savo vardą, tiesa?
Taigi jų pavadinimas popped up finale rezultatas. Taigi, ką tai reiškia?
Na, aš pasiūliau anksčiau, kad nuotrauka, vadinamasis DOM
turi šią ypatingą root elementą kelią iki aukščiausio vadinamas dokumentas.
Ir dabar, it turns out, kad vyksta yra ypatingas pasaulinė kintamasis
JavaScript, pastatytas į kurią yra visa krūva naudingos funkcijos.
Tarp naudinga funkcija yra Galimybė gauti bet palikuonis mazgas.
Tos kvadratų arba stačiakampių formomis ar elipsės yra tik mazgai medyje, taip sakant.
>> Taigi paaiškėja, kad pastatytas į JavaScript dokumente objektas
yra funkcija, kitaip žinoma kaip metodas, kad vadinama getElementById.
Už skambina sintaksė JavaScript funkcija
tai yra viduje daiktu ar kintamasis yra tik su dot žymėjimo.
Ir mes tai matė C ką konstrukto sintaksė.
Jūs matote tai pset septyni, rūšies, rūšiuoti, kai pamatysite CS50 :: užklausą.
Dvitaškis dvitaškis PHP yra dar vienas būdas skambinti funkcija, kad yra
viduje tam tikru daiktu.
>> Bet dabar JavaScript, tai tik taškas.
Ir taip ši funkcija, pakankamai gražiai, rūšies
sako, kas tai does-- gauti elementą pagal ID.
Elementas yra tik dar vienas vardas už tegus arba mazgo DOM.
Ir taip gauti elementą pagal ID "pavadinimas" reiškia this-- čia mano HTML.
Ir remiantis šio HTML, ką mazgas ar ką HTML tegus aš esu
ketina programiškai būti paskelbtas paskambinę document.getElementById?
>> Taip, tiksliai.
Aš ruošiuosi gauti įvestį elementas yra kurio ID yra "vardas."
Taigi būtent, jūs galite galvoti apie šią funkciją,
getElementById, kaip užleidimas atgal žymiklį į tą konkrečią mazgas
į medį.
Mes ne parengtas šis medis, bet tai būdas
gauti prieigą prie šios stačiakampis arba stačiakampis
iki unikaliai identifikuojantis jį per savo ID.
>> Dabar, kodėl tai naudinga?
Na, it turns out kad kai jūs Dotarłeś
kad mazgas, kad Stačiakampis matuojant nuo nuotrauka, kad viduje ji mazgas,
savo ruožtu, yra visa krūva properties-- raktas vertės poros
arba duomenų, iš kurių vienas yra vadinamas vertė.
Taigi pažodžiui, tai tipo Kurių kąsnis paaiškinti visa tai.
Bet tuo dienos pabaigoje, visa tai daro, yra suteikti jums
eilutė, vartotojas turi įvesti Šioje hierarchinę mados.
Bet aš nepatinka pora iš šių dalykų.
Arba, tiksliau, ten kai smalsumas dar.
Visa tai atrodė dirbti.
Kodėl manote, kad grįžau klaidinga po skambina pasveikinti?
Tai atrodo šiek tiek negraži, kad Turiu du teiginiai yra
atskirti kabliataškiais.
Spėk.
Jei aš pašalinti return false, ką gali atsitikti, tiesiog instinktyviai?
Atsiprašome, pakartokite dar kartą?
>> Atidarykite Windows krūva.
Taigi potencialiai gal kažkas kaip kad nutiktų.
Kas dar?
Gali pateikti prašymą Kur?
Tame pačiame puslapyje Kad.
Taigi, iš tiesų, tai, kad arčiau atsakyti čia
nors, skirtingai nuo praeityje, aš ne
nurodyta veiksmų atributas, kuris paprastai mes turime daryti.
Pasirodo, ten pagal nutylėjimą. Jei nenurodysite veiksmų,
tai tarsi sakydamas pasiūlymą, citatos pabaiga arba pati failo pavadinimą,
kuri šiuo atveju būtų būti, pavyzdžiui, dom-0.html.
Tai tiesiog rūšies numanomas, ar veikiau reiškė.
>> Ir todėl, jei aš ne tai, tegul pastebėti.
Leiskite man išsaugoti tai.
Ir aš pašalinta return false.
Leiskite man grįžti į šį pavyzdys ir jėga perkrauti.
Ir jūs galėjote matyti mane rodo tai ant CS50 aptarti keletą kartų krūva.
Jei kas nors kada nors veikiantis funky ir naršyklės nesielgia kaip tikitės,
Neretai jūs norite turėti Shift ir tada spustelėkite Atnaujinti.
Tai privers kiekvieną failą į perkraukite o ne naudoti naršyklės talpyklą vietos
arba kopija, kad dabar leiskite man eiti į priekį ir atverti savo inspektorius, skirtuką Network.
Aš ruošiuosi spustelėkite Išsaugoti Prisijungti nes aš
nenoriu, kad ji ištrinti eilutes kartą aš turiu vis iš plakinio toli kitur.
>> Leiskite man eiti į priekį ir čia tipo Ieva, spustelėkite Pateikti.
Gerai.
Tai atrodo taip, kaip tikėtasi.
Jis sako: "Labas, Ieva".
Leiskite spustelėkite Gerai.
Įdomu.
Atkreipkite dėmesį, kad puslapis pasikeitė, nors į pradinį puslapį.
Atkreipkite dėmesį į URL rūšies pasikeitė.
Ji pridūrė, klaustuką, kuris paprastai yra rodiklis,
kad mes bandėme pateikti kažką.
Ir tada apačioje, dar aiškiai,
Čia yra tikrasis HTTP užklausa, kuris gavo 200 atsaką,
atvedė mane atgal čia.
>> Taigi tai yra ne kas mes norime padaryti, tiesa?
Nes aš nenoriu perkrauti visą puslapį.
Aš vietoj norėjo grįžti klaidinga taip trumpojo jungimo
Naršyklė pagal nutylėjimą elgesys, kuris buvo, žinoma, pateikti puslapį.
>> Taigi leiskite pažvelgti į išvaizdą nežymiai geresnis pavyzdys.
Tai Namas versija viena.
Ir pastebite tokius dalykus.
Tai gerai, jei jūs neturite Grok visi kodo linijų.
Bet kas iš esmės skiriasi apie šį įgyvendinimą?
Aš nustatyta, kad elgiasi tas pats, daro tą patį.
Ką aš akivaizdžiai daroma kitaip?
Taip?
>> Auditorija: [nesigirdi].
DAVID Malan: Taip.
Taigi funkcija yra apibrėžta differently-- Kitaip tariant, nesant nuo formos,
ten on-line 7-- arba o, linija 8-- nebėra
padaryti turiu onsubmit atributas.
Ankstesniame pavyzdyje, aš turėjo tai.
Ir tada aš tiesiog parašiau savo kodą čia.
Ir tada aš pasakiau return false.
Ir jei jis nebuvo patrinti Jūs neteisingas būdas dar,
ji turėtų pradėti kiek kaip, kaip HTML,
kai mes pradėjome bendradarbiauti susilieti ją su CSS stiliaus atributus,
jis tiesiog pradėjo gauti šiek tiek nepatogus ar jaustis šiek tiek negerai.
>> Panašiai čia, jei pradėdami vartoti HTML,
ir tada jūs automatiškai pūkštelėti šiek JavaScript kodą
viduryje kotiruojamos eilutę, tai nesiruošia būti labai aptarnavimo.
Teisė?
Tai net ne akivaizdu, ne pirmas Vieta, kurioje JavaScript kodas.
Taigi būtų tikrai gražus, kaip Dėl geresnio dizaino principas,
tegul saugo mūsų HTML visiškai atskirti iš mūsų JavaScript.
>> Taigi, kaip tai padaryti, ką mes padaryti čia yra following--
mes tiesiog naudoti HTML tik žymėjimo.
Ir taip variante vienas iš to, visi Turiu yra forma su unikaliu identifikatoriumi.
Ir tada žemyn čia, aš pasinaudojant iš ypatumas JavaScript
kuriuo galiu turėti tai, kas vadinamas anoniminė funkcija.
Taigi paaiškėja, kad jei aš vadinu document.getElementById iš "demo"
tai kaip suteikti man žymeklį į tai mazgas mano medis, forma elementas,
taip sakant.
>> Dabar, aš tiesiog žinau, iš žinant HTML tiek
dabar mes perskaitęs kai internete nuoroda, kad forma elementas palaiko
visa krūva renginių listeners-- į Kitaip tariant, skalbiniai sąrašas renginį
klausytojų, kad mes matėme prieš akimirką.
Aš žinau, skaityti dokumentus kad onSubmit yra galiojantis įvykis
klausytojas už forma elementas.
>> Taigi, kai aš žinau, kad tai saugu man daryti
following-- gauti, kad mazgas iš medžio, forma elementas,
ir pasiekite jo vadinamasis onSubmit nuosavybė.
Taigi taškas tiesiog reiškia, tai yra objekto,
kaip specialios vertės viduje jo.
Ir kas duomenų tipas aš esu paskiriant, matyt,
į onsubmit, kuris yra efektyviai viduje kintamasis
tos mazgo medžio?
Tai viduje tos struct laukas.
Kas yra duomenų tipas?
>> Funkcija, taip.
Taigi paaiškėja, kad PHP turi tai.
Ir nors mes nebuvo papasakoti apie tai,
C taip pat turi funkcija patarimų, kad gebėjimas perduoti ir priskirti funkcijas
kaip patys kintamieji "vertybes.
Ir mes neketiname regresuoti atgal į C.
Bet dabar, paaiškėja, kad ant dešinėje pusėje čia
nors ji atrodo šiek tiek funky, tai reiškia, ei naršyklė,
man funkciją.
Nesiruošiu net vargintis suteikiant tai vardas, nes aš tiesiog
ketina priskirti tegul ją vadina šios funkcijos adresas
nedelsiant onsubmit.
Kitaip tariant, naršyklė, jums nereikia žinoti, ką ši funkcija vadinama.
Jums tiesiog reikia žinoti kur ji yra atmintyje.
Ir taip pakanka tik turi vienodą ženklą ten
o ne nerimauti pavadinti tai, kaip foo ar pasveikinti ar bet koks kitas žodis.
O dabar tai tik stilistinė dalykas.
Galėčiau perkelti šį garbanotas petnešomis ant the-- sorry-- kitą eilutę
kaip mes paprastai padaryti CS50.
Bet JavaScript, tai iš tikrųjų stilistiškai bendra
tiesiog išlaikyti garbanotas petnešomis, The Pirmasis, tą pirmą eilutę.
>> Bet toliau, ten nieko įdomaus.
Tai atvira garbanotas petnešomis tik atriboja mano funkcija pradžios.
Ši funkcija yra dabar identiški, išskyrus aš
įtraukti return false viduje šios funkcijos.
Kadangi paaiškėja out-- ir tik darytumėte
žinau, tai iš skaitymo documentation--
kad jei šią funkciją, kad jūs priskirti į onSubmit prižiūrėtojas False,
naršyklė tiesiog žino ir sutinka, ne pateikti formą į serverį.
Jei jis grąžina true, tai bus pateikti jį į dėl priežasčių, matysime serverį
yra naudingi tik akimirką.
>> Ir tada kabliataškis po garbanotieji petnešomis ten tiesiog
reiškia Atlikau apibrėžti funkciją.
Jūs žinote, ką vadiname kuo greičiau išgirsite pasiūlymą.
Gerai.
Tai vis dar be abejo rūšies negraži.
Taigi, ką mes galime padaryti daugiau?
>> Na, it turns out tada versija du, kuris yra last--
ir mes tiesiog žvilgsnis į tai.
Tuo priėmimo rizikos jis mažiau akivaizdus, ​​it turns out
kad yra biblioteka pasaulis vadinamas JQuery.
Ir JQuery yra super populiarus JavaScript biblioteka
tai toks populiarus, kad dauguma bet JavaScript-- tai ne
neįprasta, kad žmonės painioja JQuery JavaScript.
Kodėl?
Pati JavaScript turi labai VERBOSE būdai daro Quake
document.getElementById, dadadadadada.
Jūs galų gale, turintys labai ilgas eilutes kodo.
>> Taigi kolegos pavadintas John Resid, kurie iš tikrųjų dirba paleisties
iki šių dienų, išėjo su šios bibliotekos metų
prieš, kad daugelis žmonių prisidėjo į vadinamas JQuery, kad keičiasi
Į tokiu būdu sintaksė.
Ir tik todėl jūs mačiau tai, nes jūs visada
pamatyti, jei darai žiniatinklio galutinis projektas,
tai būtų lygiavertis būdas įgyvendinant tą pačią funkciją, naudodami
Šis specialus biblioteka.
>> Dabar, o ne Tease jis be jos visumą,
tegul tiesiog pažvelgti į kai kuriuos modelius.
Ši sintaksė atrodo, kiek anoniminiai funkcijos
ar bevardis funkcijos arba AKA lambda funkcijos?
Du, tiesa?
Ir jūs žinote, kad, net jei Jūs nesate Super patogūs su tuo,
tiesiog tuo, kad ji sako funkcija () du kartus.
>> Ir paaiškėja, kad kas tai yra doing-- kodas
ir mes kreiptis į interneto nuorodomis, galiausiai, kai su šiuo pagalba.
Tai tiesiog reiškia, kad kai dokumentas yra paruoštas,
eiti į priekį ir registruotis taip funkcija
kaip pateikti prižiūrėtojas HTML elementas, kurio unikali idėja yra demo.
Ir tada, kai tai atsitiks, skambinti šias dvi eilutes kodo.
Ir tai yra, tragiškai, labiau daugiažodis būdas pasakyti return false.
Ir mes paminėti tai tik todėl, kad pamatysite kodą, kaip šioje interneto.
Ir tai nieko būti išsigandę.
Bet, o, turėkite omenyje, kad tai, kas bus paplitusi JavaScript
tai paradigma.
Ir taip, tai kodėl mes parodysime jį dabar.
Gerai.
Taigi be gyvenamųjų per kiek tą sintaksę,
ten yra kokių nors klausimų apie Šie pavyzdžiai ar idėjos iki šiol?
Gerai.
Taigi leiskite naudoti šį kažką naudingo.
Padaryti puslapį, kuris tiesiog sako labas, taip ir taip yra ne visi, kad įdomus,
ne underwhelm.
Tai vienas nesiruošia būti gražus, bet ji ketina padaryti kažką naudingo.
Leiskite man grįžti į savo katalogą čia ir atverti, tarkim, forma-0.html.
>> Taigi manau, tai yra pirmakursis vidines sporto registracija puslapis
be jokių CPT arba bet dizaino prasme.
Ir aš noriu eiti į priekį ir Registruokis čia su slaptažodžiu.
Ir aš ruošiuosi sutinkate su sąlygomis sąlygos ir spauskite mygtuką "Registruotis.
Ir dabar svetainėje sako: "Tu esi registruotas! (Na, tikrai ne). "
Tai atrodo kaip jis dirbo, bet leiskite man eiti į priekį ir priversti Atnaujinti.
>> Ir leiskite man pasakyti, ne, jūs ne reikia mano tikrąjį elektroninio pašto adresą.
O gal mes tiesiog pasakyti laišką ten.
Slaptažodis bus, kaip, 12345.
Ir tada, tik todėl, kad aš idiotas, dabar tai 123456789.
Ir aš nesiruošia patikrinti savo dėžutę.
>> Hmm.
Gerai.
Taigi ten ir turėjo keletą galimybių tobulinti čia.
Ir žinote, ar pamatysite pset septyni, kad galite rašyti code--
ir jūs turėsite rašyti kodas PHP-- ginti
prieš šių Viskas rūšių klaidos, nes vartotojas aiškiai
nebendradarbiavo.
Ir jis ar ji jums nedavė visi vertina jūs norėjote ar net formatu
kad jūs norėjo juos.
Taigi jūs pamatysite pset septynių mes tikrai gali turėti tam tikrą
Jei sąlygos, kad pasakyti jei elektroninio pašto adresą
nėra username@something.edu, mes galime tik
pasakyti atsiprašau ir atsiprašyti vartotojui daug, kaip jūs galite būti pset septyni.
Arba, jei jie nebuvo patikrinti tą langelį, Pasirodo, PHP, galite aptikti, kad
per daug.
Ir, žinoma, jei slaptažodžius nesutampa, kaip register.php
už pset septyni, galite aptikti, kad.
Bet tai yra skausmas kaklo, kad dabar jie prašo
mums pereiti visą kelią į serverį.
Vartotojas informuojamas apie klaidą.
Ir bent jau nebent jūs naudojate kai mėgėjas būdai,
dabar jie turi paspausti rodyklę atgal.
Ar nebūtų puiku, kaip daug svetainių šiandien
jei jums buvo greitesnis Atsiliepimai, akimirksniu?
>> Kitaip tariant, leiskite man eiti į versiją vienas, kuris bus ne gražiau.
Bet ji turi šią funkciją.
Malan, 12345, 123456789, ne ketina pažymėkite langelį, uržegitruokite.
Slaptažodžiai nesutampa.
Taigi, nors tai pop-up yra ugly-- mes galime pakeisti tai galiausiai
kažką panašaus bootstrap, kurį pamatysite pset septynių
yra labai populiarus library-- aš nustato, kad slaptažodžiai nesutampa.
Gerai.
Na, leiskite man nustatyti, kad vartotojui.
Leiskite man eiti į priekį ir pasakyti 12345, 12345.
Vis dar tikrinti susitarimą.
Turite sutikti su nuostatos ir sąlygos.
Kodėl?
>> Jei mes jau posited kad yra būdas,
ir mes jums reikalingas pset septyni aptikti klaidą
sąlygos, kaip tai server-side, kodėl turėčiau
nerimauti taip pat daro tai JavaScript?
Kas yra ir argumentas palankumas pridėti ką
jūs ketinate pamatyti, kaip some-- ten papildomas sudėtingumas.
>> Gal nėra aukštyn kojom.
Ką tai galėtų būti?
Auditorija: [nesigirdi].
DAVID Malan: O, įdomu.
Galimas išnaudoja.
Taigi tikrai, jei nesate tvarkymo Klaidingas vartotojo įvestis, kad didelis,
gal tai visi geriau, jei juo nėra net pasiekti savo serverį.
Norėčiau stumti atgal ten ir tarkim, jūs tikriausiai turėtų
nustatyti abiejų šių problemų.
Bet tai teisinga.
Kas dar?
>> Auditorija: [nesigirdi].
>> DAVID Malan: Taip.
Šis kodas, kaip mes sakėme anksčiau, yra aiškinama kliento pusėje.
Ji nesivargina serverį, tai reiškia, kad nėra
Poveikis serverio apkrova ar gebėjimus.
Ir dabar, tiek senosios mane, tai neturi reikšmingo poveikio
nes turiu vieną naudotoją dabar.
>> Bet jei jūs bet svetainė padoraus dydžio,
ypač didžiausias, kaip "Facebook", daugiau galite išlaikyti žmones nuo
savo serverį, tuo geriau nes serveryje, žinoma,
turi tik baigtinį kiekį RAM, baigtinio skaičiaus gigahercų,
baigtinio skaičiaus dalykų jis gali padaryti per laiko vienetą.
Taigi, jei yra daugiau žmonių pasaulis pradeda savo serverį,
netyčia prisijungti neteisingai, lygiai taip pat, jei jus
gali laikyti, kad apkrova ne jūsų serveryje.
Be to, ypač į mobilųjį device-- jei jūs kada nors
prisijungti my.harvard arba Yale NetID ar panašiai,
ten tai latentiškumas su daug svetainės, pavyzdžiui, kad, pagal kurį jis pasiima,
kaip, velniškai antrą arba du kartais.
Ir tada, mano Dieve, jei neteisingai įvedate, tada jūs turite paspausti atgal ir perdaryti ją.
Taigi ten latentinis, ypač ant lėtesnių tinklo jungtys.
Bet JavaScript, nes ji veikia kliento
ir nereikia eiti pirmyn ir atgal visoje potencialiai lėtas interneto
ryšys, jūs galite gauti beveik momentinis atsiliepimai.
>> Taigi pažvelkime į tai.
Leiskite man atverti forma-0 ir pažvelgti į HTML čia.
Ir tegul tik pamatyti, kas vyksta.
Tai yra forma, kurio veiksmas yra register.php.
Aš tiesiog naudojant gauti tiek kad galėčiau pamatyti adresą.
Bet slaptažodžiais, mes norime tikrai norite tai pakeisti, kad galėtumėte iš tikrųjų.
Štai įvesties laukas tipo tekstą.
Štai dar vienas įėjimas lauko tipo slaptažodžiu.
Čia yra, jei jūs niekada, AN tipo langelį įėjimas.
>> Tačiau nėra Javaskriptą čia kokia.
Tai tik HTML, kad eina į register.php.
Bet versijos viena, kur aš pradėjo gauti tuos iššokančius langus,
pažiūrėkime, kas iš tikrųjų vyksta čia.
Versijoje vieno, kas Aš ruošiuosi see-- I
maniau, kad aš galėtų vilkinti pakankamai su pakankamai žodžiais, bet išbėgau.
>> Versijoje one-- ten einame.
Versijoje vieną, pastebėsite following-- ir nėra geriausia įgyvendinimas,
bet tai mano pirmas.
Atkreipkite dėmesį, kad žemiau forma, turiu scenarijų žymą.
Ir scenarijų žyma reiškia, ei, naršyklė, čia
ateina tam tikrą kodą, Paprastai JavaScript.
Ir dabar, pastebėsite, ką darau.
Apie line-- galiu vos skaityti it-- 32 eilutėje, jis sako,
var form-- todėl man kintamasis vadinamas forma.
Ir tada gauti document.getElementId "registracija".
Kas tai?
Na, leiskite man atsukti čia.
Ir pranešimas, ah, aš davė formos elementą savavališkas, bet aprašomojo idėja
Registravimo.
Taigi, tai suteikia man kintamąjį, kad leidžia man patraukti, kad mazgas,
kad stačiakampis medyje vadinamas formą.
form.onsubmit priemonės, ei naršyklė, užsiregistruoti atveju klausytojas
Šioje formoje.
Kitaip tariant, kai ši forma yra pateikta, įvykdykite šią kodą.
Tai nereikia, nes vardą kodėl jums reikia žinoti vardą?
Jums tiesiog reikia žinoti Ką vykdyti, ERGO
tai anoniminis arba lambda funkcija.
Ir tai funkcija yra visų šių eilučių čia.
Ir dabar, būti sąžiningais, net jei gali ne kada nors parašyta JavaScript
anksčiau, tai tik C ir PHP logika.
Taigi, jei form.email.value == "" - taigi, jei el.pašto laukas yra tuščias,
klykauti vartotojui su "Tu privalai pateikti savo elektroninio pašto adresą. "
Kita, jei form.password.value yra tuščias klykauti ne vartotojui,
"Jūs turite nurodyti slaptažodį".
>> Dar įdomiau, logiškai, jei form.password.value nėra
lygus form.confirmation.value-- kur gi patvirtinimas atėjo?
Leiskite man atgal.
Na, aš pavadino šį įvesties laukas čia slaptažodį.
Ir aš pašaukiau šį vieną čia patvirtinimas.
Galėjau jį pavadino slaptažodis du ar kas nors kitas.
Aš tiesiog logiškai tikrinti , kad šie du yra ta pati.
Else-- it turns out tai p Boole again-- Būlio vertė, žymės langelį.
Taigi, jei aš sakau, šauktukas point-- jei ne form.agreement.checked,
klykauti vartotojui, taip pat.
>> Taigi tai sintaksė pamatysite yra Labai dažni JavaScript,
kur jūs turite šį punktyras notacijos.
Jūs pradedate su objektu čia.
Jūs pasinerti giliau į A panašus slaptažodžiu nuosavybė.
Ir tada jūs gausite savo tikrąją vertę.
Ir vėl, čia yra įėjimas.
Čia yra vardas Slaptažodis.
Ir jos vertė yra nepriklausomai Žmogaus faktiškai įvedėte.
>> Taigi, visi šie atvejai, grįžau klaidinga.
Bet jei ne, aš grįžti tiesa.
Ir todėl dabar matome įtikinamų naudojimas, kai
Jums sugrįš klaidinga Sustabdyti, ką vartotojas daro
ir padaryti jį arba ją pasirinkti vėl arba įveskite dar kartą.
Priešingu atveju, mes grįžtame tiesa.
>> Ir leiskite man pristatyti vieną Kitas variantas tai tik
sėklos šiek tiek suvokimą.
Na, šio 2 versija, forma-2-- Aš tai padaryti su rankoje bangos.
Tai yra, tiems, išvengti, JQuery versija
Tiems iš jūsų, kurie galbūt norėsite taškytis toje konkrečioje bibliotekoje.
Bet tegul start-- ir kokių nors klausimų?
Leiskite man pristabdyti metu, nes kad buvo greitai ir daug.
>> Bet gražus dalykas čia yra tai, kad visi kodo yra gana daug tą patį.
Nauja medžiaga yra kas yra dom?
Kas tai yra stačiakampiai?
Kokie šie mazgai?
Kas yra anoniminė funkcija?
Kas įvykis prižiūrėtojas?
Bet laimei, dauguma tai tik pilnas ratas nuo, tarkim, nulinės savaitę.
Gerai.
Taigi kažkas šiek tiek įdomesnis?
Na, visų pirma, leiskite man eiti į priekį ir atverti Google Maps.
Ir jūs pastebėsite, kad dėl momentas, nuo sekundės,
pastebėti, kas atsitinka, kai Aš spustelėkite pakankamai greitai.
Ir tai Harvarde ryšys yra toks greitai, kad jūs tikrai pastebėti.
Bet ką jūs rūšies tarsi pamatyti jei aš spustelėkite ir vilkite tikrai greitai?
Tiems iš jūsų, žiūri internete, Jei lėtai tai 0,5 k greičiu,
matote šį geriau.
>> Kas vyksta tik Prieš aš spustelėjote ir nutempė?
Leiskite man pabandyti here-- leiskite man padaryti kažkas, kaip ir 90210.
Vykime toli.
Tai buvo tikrai greitai, per daug.
Kaip apie Disney World?
Čia mes eiti.
GERAI.
Ką jūs matote sekundės?
Tiesiog, kaip, aikštėse, tiesa?
Pamainymai Plytelių?
>> Na, kas vyksta čia?
"Google Maps" yra gražus pavyzdys Tai technologija, kuri vadinama AJAX.
Ir tai, kai mes pradėsime naudoti JavaScript ypač
viliojantis būdas.
Atgal į dieną, buvo Ši svetainė vadinamas MapQuest.
Ir aš turėjo priimtas Screenshot tai nuo 1990,
kur, jei norite ieškoti čia žemėlapyje,
jūs tiesiog spustelėkite rodyklę iki viršuje, kad jums parodė,
kitoks aikštė žemėlapyje.
Jei nori judėti į kairę, jums paspaudėte rodyklę, kad jums parodžiau
kitoks aikštė žemėlapyje.
Ir keletas svetainių, vis dar tai padaryti šiandien.
Bet net MapQuest turi Dotarłeś geriau, kaip "Google Maps".
>> Vietoj to, kas geriau tai dienų yra svetainių, kurios naudoja AJAX.
AJAX-- kitaip žinomas kaip Asinchroninis JavaScript ir XML,
kuri yra tik išgalvotas būdas pasakyti technologijų ar metodas, kuris
leidžia naršyklę, naudojant "JavaScript" atlikti papildomus HTTP užklausas
Po puslapis buvo įkeltas.
Taigi, ką tai reiškia?
Na, tai būtų natūra erzina Gmail
jei kaskart jūs norėjote patikrinti savo laiškus,
Jums buvo tiesiog paspauskite Valdymo R arba Komandų R arba spustelėkite mygtuką Perkrauti
ir visa adyti puslapis būtų perkraukite puslapį.
Teisė?
Būtų flash balta turbūt sekundę.
Galima būtų pamatyti kvailas juosta.
Ir tik pamatyti, jei jūs turite naują paštas, visa interneto puslapis ir URL
esate ne tektų iš naujo įkelti.
>> Bet tai dar ne tai, kas vyksta "Gmail".
Teisė?
Kai jūs gaunate naują laišką į "Gmail", kas vyksta ekrane?
Tai tiesiog rodo, tiesa?
Jis tiesiog stebuklingai atrodo kaip naujos eilės stalo.
Tai iš tikrųjų yra susijęs su padoraus dydžio sudėtingumo.
Iš tiesų, jei jūs manote apie šio medžio, kuris nors yra paprastas vienas iš čia,
Gmail-- ir aš turiu ieškoti į kodą, kad būtų sure--
tikriausiai turi HTML lentelę arba gal tikriausias nerūšiuotas sąrašas, kad ji teikia
kiekvienas iš jūsų pašto dėžutę laiškų kaip.
>> Ir todėl, jei jūs galite įsivaizduoti, tai ten yra atminties, kai jūs medis
naudojant "Gmail", kad atrodo rūšies rūšiuoti kaip šis, kai "Google" supranta, ooh,
jūs turite naują laišką, jis neturi norite atstatyti visą medį.
Greičiau, jis nori rasti mazgas medis, kuris atstovauja savo pašto dėžutę
ir tiesiog įterpti naują viršūnę.
>> Taigi labai panašus į pset penki, kur jūs turėjo įterpti mazgus į maišos lentelė,
Panašiai daro "Google", per JavaScript kodą, kad ji parašyta,
Traverse šio medžio, išsiaiškinti, kur yra tai, kad gautieji lango dalis,
ir tada įterpti naują eilutę.
O nauja eilė tiesiog reiškia vieną ar daugiau naujų mazgų medį.
>> Ir taip, AJAX yra šis metodas kuri leidžia būtent tai.
Sukūrę aplankė URL Tačiau beprotiška ilgai jis yra,
ir kai puslapis yra buvo pakrautas, vis tiek galite
patraukti daugiau duomenų iš internet-- ar tai
žinutę siųsti arba iš map-- plytelių patraukti jį užkulisiuose
ir tada įterpti jį į puslapyje taip, kad žmogaus tikrai ne
turi laukti už jį.
>> "Facebook" Messenger "veikia taip pat.
Bet kita websites-- skaičius Oh, iš tikrųjų, net tai.
Aš turiu galvoje, tai yra, tiesą sakant, rūšies erzina funkcija šių dienų.
Jei aš pradedu ieškoti cats-- tai rūšies žiaurios vartotojo patirtį.
Jis tiesiog pradeda ieškoti už mane.
Na ką jis daro?
URL nėra tikrai pasikeitė nes aš pradėjau rašyti.
Bet tai, kas vyksta visoje wire-- Gerai, hmm įdomu.
Kas vyksta visoje vielos čia tiesiog gauna weirder.
>> GERAI.
Taigi leiskite man eiti į priekį ir patikrinkite elementas ir eiti į skirtuką Network
ir pabandyti padaryti tai techninis ir mažiau apie kates.
Kaip aš tipo, pažodžiui, katės and-- kas vyksta
per-- Nesiruošiu paspausti, kad.
Gerai.
Taigi žemyn čia, Kas vyksta kiekvieną laikas I tipo simbolį, matyt?
Kaip, žemas lygis?
Kas vyksta su kiekviena iš tų, personažus aš rašyti į mano klaviatūros?
Taip?
Auditorija: [nesigirdi].
>> DAVID Malan: Būtent.
Kiekvienas iš šių simbolių yra vyksta į "Google", vienu metu.
Jie kurti eilutę savo serveryje, kuris atstovauja
viskas, aš įvedėte iki šiol.
Ir kiekvieną kartą, kai aš tipo kitu charakteriu, jie
naudoti savo slaptą padažu, turinti paieškos algoritmas ir išsiaiškinti,
Ar jis reiškia Ši katė puslapį ar tai katė puslapis ar pan?
Taigi tam tikra prasme, tai suteikia man geriau patirtis, kad aš net ne
reikia užbaigti savo mintį.
Ir iš tiesų, tai naudinga dalykas, Automatinis apskritai.
Jei jų algoritmai yra pakankamai gera ir jei mano paieškos yra pakankamai akivaizdus,
Aš neturiu įvesti visą žodį.
Jie ketina pasakyti man, ką jis yra aš iš tikrųjų ieško.
Taigi, ką "Google" ragina momentiniai paieška tik naudojant AJAX,
naudojant kodą, kuris leidžia jiems prašyti Papildoma informacija per interneto naršyklę
užkulisiuose naudojant šį nauja kalba, "JavaScript".
Taigi, mes turime keletą minučių liko.
Ir leiskite man iškviesti Mano bičiulis Colton iki ant scenos,
nes ji atrodė ypač smagu paskutinį kartą
pristatyti technologiją kad kai kurie iš jūsų
išreiškė susidomėjimą į galutinių projektų.
Mes galvojome, kad būčiau įdomus pareikšti iki savanoris, nors šiandien
parodyti jums papildymus tai, kad leidžia you-- taip,
Mačiau šį ranką pirmas.
Nagi iki.
Labai gerai padaryta.
Šaunuolis.
Aš ruošiuosi PROJEKTAS Šis ant Į akimirką ekrane.
Koks jūsų vardas visiems?
>> ALE: Aš Efa.
>> DAVID Malan: Etha?
>> ALE: Efa.
>> DAVID Malan: Efa?
>> ALE: Taip.
>> DAVID Malan: Malonu Jus matyti.
Gerai.
Leiskite gauti tai paruošta.
Ateik į daugiau kaip į viduryje Colton čia.
Kas Colton turi savo rankose šiandien yra nuotolinio valdymo pultelis.
Taigi, o ne tiesiog stovėti ten A trimatis pasaulis dairausi
kaip tai darė Colton, dabar Efa gali iš tikrųjų vaikščioti aplink kurią einame,
žemyn, į kairę ir į dešinę tarsi "Nintendo" arba "Xbox kontrolierius.
ALE: Aš ruošiuosi nukristi į sceną.
DAVID Malan: aš stovėti maždaug čia.
Bet, kad yra rizikos.
GERAI.
Taigi pirmyn ir įdėti tie ant.
Leiskite man eiti į priekį ir pereiti prie ekrano čia.
Leiskite artimosios šviesos.
Ir Colton, leiskite man ateiti stendas šalia tavęs.
>> Ar norite paaiškinti čia su MIC, ką mes darome?
Čia jūs einate.
>> COLTON: Žinoma.
Taigi dabar mes pakrovimo iki Oculus,
Manau, operating-- neveikia sistema, tačiau pagrindinė programa, kur
galite prieiti prie visų žaidimų ir Programos, kurios yra jūsų bibliotekoje.
Taigi dabar, ji turėtų pasakyti bakstelėkite Touchpad pradėti.
Jutiklinė ketina būti apie dešinėje pusėje ausines.
Taigi pirmyn ir tap--
ALE: Oi, vyras.
DAVID Malan: Taip, ten jūs einate.
Kokybės Pakartotinį pamatyti yra daug aukštesnės kokybės.
Tai tik Wi-Fi čia.
COLTON: Taigi, ką jūs ketinate norite daryti
yra pažvelgti į viršų dešiniajame ekrano kampe.
Taip, tai žaidimas labai viršuje dešinėje.
Ir tada, kai jūs pasirinkdami jis vėl bakstelėkite jutiklinės planšetės.
Manau, kad jos Dreadhalls.
Ir tada čia yra a-- čia, tegul man turėti savo akinius už jus.
>> Taigi aš tiesiog davė jam valdiklį.
Taigi, dabar jis gali kontroliuoti žaidimą.
Jis gali judėti ir stuff like that.
Taigi pirmyn ir ieškoti į viršų.
Jūs turėtumėte pamatyti naują žaidimą.
Taigi pirmyn, ir jūs galite tai padaryti.
Dabar, jums turėtų būti suteikta galimybė kontroliuoti Būk su valdikliu,
taip pat, kaip tik žaidimas įkelia čia.
Tai gali būti šiek tiek baisu.
>> ALE: Dabar galite man papasakoti.
GERAI.
>> COLTON: Visos dešinę.
Taigi patvirtinti, kad jūs galite judėti.
GERAI.
Jūs galite judėti.
Tobula.
Taigi, jei jums atrodo žemyn, jūs turite žemėlapį.
Žemėlapis parodo jums, kur esate.
Jūs galite ieškoti aplink kambarį.
Jūs galite visiškai apsisukti.
Taip, tiksliai.
Apsisuk.
>> Taigi atrodo, kad jūsų pusėje.
Aš manau, kad yra kažkas, galite pasiimti ant kambario barelį.
>> ALE: Kaip aš galiu gauti žemėlapį iš kelio?
COLTON: Pažvelkite į viršų.
Tiesiog ieškoti.
Gerai.
Na štai.
Dabar eikite į priekį ir tiesiog apsisukti.
Taigi ieškoti toliau į savo kairę.
Laikyti juda į kairę.
Laikyti ieško kairėje.
Tęsk.
Taip.
>> ALE: O, kad taip.
>> COLTON: Taip.
Pasivaikščiojimas į jį su valdikliu.
Na štai.
Dabar ji turėtų pasakyti pasiimti.
Na štai.
Pakelk.
Gerai.
Dabar galime išeiti iš šio kambario.
Eiti į priekį ir eiti į tas duris.
Taigi, jūs ketinate hold-- ji sako palaikykite mygtuką priversti jį atvirą.
Taigi pirmyn ir palaikykite mygtuką.
Taip, verčia jį atidaryti.
Gerai.
Šaunuolis.
Dabar mes vaikščioti iš kambario.
Taigi, aš ruošiuosi palikti pailsėti iki jums ir pamatyti, ką sužinoti.
ALE: Nesiruošiu į tamsioje patalpoje.
O palauk.
Dabar aš turiu eiti į tamsią salę?
Gerai, aš einu atgal [nesigirdi].
COLTON: Visos dešinę.
Kai daugiau elementų pasiimti.
Atrodo, kad kai kurių monetų.
Štai spyna pasiimti.
Taigi, jei radote užrakinta durys, galite naudoti, kad.
Ar tu bijai?
>> ALE: Dar nėra.
COLTON: Gerai.
>> Pretend-- taip.
Tiesiog apsimesti esate iš tikrųjų stovi.
Ir jei įjungsite around-- jūs turite priprasti prie jo.
Bet tai turi prasmę.
DAVID Malan: Ir nors Efa toliau žaisti, nes mes galime tai padaryti visą dieną,
mes visi galime TIP-Toe čia.
Bet mes turime kitas dvi poras, jei norite ateiti ir žaisti.
Priešingu atveju, mes matome kitą kartą, trečiadienį.
Dėkojame mūsų savanoriui ir šiandien.
[Plojimai]
>> [Muzika - "Seinfeld tema"]
GARSIAKALBIS 1: Na, aš išleisti naują PL montuoti ant.
Aš tiesiog pakeitė OLPF--
>> SPEAKER 2: Taigi, kas tiksliai tu darai?
>> GARSIAKALBIS 1: Na, kiekvienas iš these-- čia aš jums parodysiu šį vieną čia.
Galite pamatyti jį čia.
>> GARSIAKALBIS 3: Manau, kad esu geras su jais.
Jūs norite šiek tiek daugiau?
>> GARSIAKALBIS 4: Ne, aš gera. [Nesigirdi].
>> GARSIAKALBIS 3: Ne, [nesigirdi].
Ar kai kurie.
GARSIAKALBIS 1: skirtingų spalvų.
SPEAKER 2: Gerai.
GARSIAKALBIS 1: Taigi galiausiai, kas tai daro tai sureguliuoja spalvų of--