>> [TÓNLIST spila]
>> DAVID Malan: Þetta er CS50.
Þetta er upphaf viku níu.
Og þetta er það sem myndi hafa verið 200 afmæli Mr Boole er.
Svo er þetta félagar sem vér höfum vitnað
alveg nokkur sinnum um að nota Boole breytur satt og ósatt,
1 og 0 og svo.
Og þetta var Google skatt til hans í dag.
Hann hefði snúið 200.
Svo ef þú vilt að tengja okkur fyrir CS50 hádeginu,
taka a líta á the hlekkur á heimasíðu námskeiðsins er.
Og svo andlit og vinir sem þessir bíða eftir þér hér í Cambridge.
Faces eins og þessir bíða eftir þér í New Haven.
Og í raun, Ken í New Haven vinsamlega gert
það sem er kallað líflegur GIF Elí hér á nýleg lunch-- a GIF er enn
annar grafísku skráarsnið, sem þú ert familiar-- að
lítur svolítið eitthvað eins og this.
Svo of-- bara röð OK.
Enginn hér í Cambridge er að hlæja.
En í New Haven, þetta svo fyndinn, ekki satt?
Allt í lagi.
>> Svo ekki tengja okkur þar.
Hér á Harvard, sérstaklega, þetta Miðvikudagur,
ef þú ert sophomore eða freshman even-- eða jafnvel junior-- hugsa um að gera
rofi í tölvunni vísindi, veit að það verður
að a CS ráðleggja sanngjarnt þetta Miðvikudagur, skömmu eftir tegund
er 4:00 PM í tölvunni vísindi byggja Maxwell Dworkin.
Við munum setja þetta á námskeiðið er website á morgun, eins og heilbrigður.
Kleinuhringir, mér var sagt, verður þjónað.
>> Allt í lagi.
Svo fyndið story-- ég var poking um á internetinu,
og ég fann nokkrar gamlar skjalasafn af fyrrum heimasíðu mína.
Og það kemur out-- um þetta tími, virðist það mjög tímabært
þar sem ég safna að UC kosningar eru um að klæða sig upp á ný.
Svo ég hljóp fyrir UC, missti vansæll.
Og kannski var þetta að hluta af hverju.
Þannig að þetta var vefsíðan mín á þeim tíma.
Fyrir sumir ástæða, ég hélt að það væri góð hugmynd, en að segja fólki
hvaða vettvang minn var og hvers vegna þeir ætti að kjósa fyrir mig, að þeir hafa
að smella til að slá til að finna út að upplýsingar, sem eftir á að hyggja er
konar hrollvekjandi.
Ég í raun ekki vita hvað það væri.
>> En það gerði örugglega ekki hjálpa herferð mína.
Ég fann líka að með því að háttsettir year-- Ég hafði þetta Muppet dagbók.
Muppets voru konar í tísku aftur þá.
Eða kannski voru þeir ekki.
Ég átti Muppet dagbók aftur þá.
Og ég hélt að það væri svalt að nafni tölvan mín á netið Harvard
frogman.student.harvard.edu.
Á þeim tíma, við höfðum öll einstaklega aðgreinanlegar gestgjafi nöfn.
Og þú gætir valið nokkrar hégóma nefna stað eigin nafni.
Og ég fór með frogman fyrir sumir ástæða.
>> Og þá er ég started-- Ég eyddi miklum tíma að smella í gegnum þessa tengla
í morgun.
Og þetta var um síðuna mína, sem nú konar virðist yndisleg.
En það vitnar bara hversu langt tækni hefur komið.
Ég meina, aftur í dag, a 486 var eitthvað.
Þessa dagana, það er frábær, frábær, Super Slow og vel minna
en þú gætir hafa í þinn eigin vasa þessa dagana.
Það er meira um það að var jafnvel meira vandræðalegt.
Svo ég ætla að láta það á því.
En það var fyrst minn skyndiárás inn web-- ó, nei.
Það var ekki.
Fyrsta alvöru skyndiárás inn vefur forritun var þessi síða, sem ég gleymdi bara.
Á einhverjum tímapunkti, lærði ég hvernig á að gera endurteknar bakgrunnsmyndir.
Og svo ég fann þetta tiling árangri, eins íshokkí leikmaður, fótbolta og golf
bolti, eða hvað sem er fyrir Frosh Spjallboð website.
Og þetta var í raun, raunverulega er Fyrsta vefur-undirstaða verkefni sem ég tók on--
Ég held að kannski sophomore ári, yngri year--
eftir að CS50 og CS51, einn af the sameiginlegur eftirfylgni á bekkjum.
Ég tók eftir því að nota gegnum skjalasafni
sem einn af eftirmönnum mínum og vinir, Lee, eins konar breytt
höfundarréttur við sjálfan sig.
En þetta var örugglega eitthvað sem Ég ætti að eiga vandræði til.
En á þeim tíma, þetta var fyrsta website,
eins og ég sagði fyrir nokkrum vikum síðan, sem freshman gæti
skrá fyrir intramural íþróttir hér.
Og svo kemur í ljós að bakgrunnsmyndir
svona eru ekki svo góð hugmynd.
En netið var nýr, og við vorum öll að gera tilraunir.
Og þetta er það sem ég virðist gerði á þeim tíma.
Allt í lagi.
Svo án frekari fjaðrafok, við skipta gír í dag að gefa þér, í raun,
endanleg stykki sem þú gætir fundið sérstaklega gagnlegt fyrir lokaverkefni
heldur einnig að vilja byrja að gera allt veraldarvefnum
feel a lítill hluti fleiri skiljanlegt.
Reyndar erum við að fara að kynna eitt forritunarmál
kallað JavaScript sem er svipað og mismunandi í mismunandi vegu
frá tungumálum við höfum litið á svona langt.
>> Svo C, muna, er þetta tekið saman tungumál.
Þú hefur got til að keyra það í gegnum þýðanda.
Þú færð kóðann til að mótmæla númer, eða zeroes og sjálfur.
Og þeir eru zeroes og þau sem CPU, Central Processing Unit,
raunverulega skilja.
PHP, hins vegar er ekki a safna saman tungumál.
Það er hvað?
Það er túlkað tungumál.
Svo er það eitthvað forrit kallað túlk sem
þarf að lesa efst it-- til botn, vinstri til right--
og reikna út hvað allt setningafræði þinn er og þýðir,
hvort sem það er lykkja eða skilyrði eða eitthvert annað númer forritun
býr.
Svo er það túlkað tungumál.
>> Þá erum við kynnt HTML.
Og HTML er ekki einu sinni forritunarmál.
Við myndum kalla það hvað?
A Markup Language, sem er bara eins konar fínum leið til að segja það
er ekki með forritun býr eins við sáum jafnvel aftur á degi grunni.
Það eru engar lykkjur.
Það eru engin skilyrði.
Það er í raun tungumál um merkingar upp gögn
og forsníða hana eða uppbyggingu það á einhvern hátt.
>> CSS, á meðan, á sama hátt ekki forritunarmál.
Það er jafnvel meira fagurfræðilega stilla.
Og það gerir þér kleift að raða á fínstilltu hluti eins leturstærð og liti
og staðsetning og allt það.
Þá höfðum
>> SQL.
Svo er SQL örugglega forritun Tungumálið í einhverjum skilningi,
að vísu sníða sérstaklega til gagnagrunna.
En jafnvel þótt við kynna aðeins þú að velja og setja inn og eyða og uppfæra
og a par af öðrum, reynist þú getur í raun
skrifa aðgerðir eða aðferðir, eins og þeir eru
kallað, í SQL sem líta út og haga alveg eins og PHP og C virka.
Svo vita að þeir eru.
En við gerum ekki einu sinni nenna með þeim eins og við klóra bara yfirborðið hér.
Og þá JavaScript, síðasta Tungumál okkar kynnt formlega.
Svo JavaScript líka er túlkað tungumál.
Og þeir þekkja, gera þú vilt að greina það
með nokkrum einkennandi bæði C og PHP?
Hvað gerir það öðruvísi?
>> Áhorfendur: Það er ekki unnin.
>> DAVID Malan: Segðu þetta aftur
>> Áhorfendur: Það er ekki unnin.
>> DAVID Malan: Það er ekki unnin.
Svo það líka, er túlkað.
Svo það er ekki unnin.
En það gerir það svolítið eins og PHP.
En það er samt öðruvísi PHP á einhvern sláandi hátt,
að minnsta kosti í því hvernig við notum það.
Já?
>> Áhorfendur: Það keyrir client-megin.
>> DAVID Malan: Það keyrir viðskiptavinur-hlið, yfirleitt.
Það er örugglega einkennisstafir einkennandi fyrir okkur núna.
C var framreiðslumaður-hlið í skilningi sem við gerðum allt sem í CS50 IDE.
PHP svona langt hefur verið framreiðslumaður-hlið marki
eins og það líka, fær interpreted-- ekki saman, en interpreted--
inni CS50 IDE, sem að sjálfsögðu er bara miðlara eða netþjóna í skýinu.
>> En JavaScript, jafnvel þó að þú að þú ert að fara
að byrja að skrifa hana fyrir, segjum, pset átta og kannski endanlega projects-- þú ert
fara til hægri hana í CS50 IDE og vista það
í skrám CS50 IDE, CS50 IDE og á móti, ský framreiðslumaður
sem það er hýst, eru ekki að fara að túlka eða framkvæma kóðann þinn.
Frekar, það er að fara að senda í óbreytt form niður til the flettitæki.
Og það er þá að fara að vera IE eða Chrome eða Firefox eða Safari
eða hvað sem í raun túlkar það, toppur til botn, vinstri til hægri.
Svo helstu auðkennandi einkennandi fyrir í dag
er að JavaScript er client-megin og PHP, til dæmis,
hefur verið miðlara-hlið.
Nú, þetta er áhugavert áhrif fyrir, eins og, hugverk
og sem geta raunverulega sjá kóðann þinn.
Og reyndar, þú getur farið á vefnum og sjá mest
allir kóða sem einhver hefur skrifað í JavaScript.
Stundum er það læsileg, Stundum er obfuscated.
En meira um það í tæka tíð.
>> Svo JavaScript fallega nóg, er frábær svipuð, setningafræðilega, að C.
Og mikill eins og PHP, það er engin Helsta hlutverk.
Ef þú vilt að byrja að skrifa JavaScript kóða, eins og þú munt sjá í dag,
þú byrjar bara að skrifa það.
En það er, sem þú munt sjá, sérstaklega gagnlegt í tengslum við vafra.
Hins vegar er lítið minn disclaimer-- yfirleitt earlier--
var að segja að þú getur sífellt í dag nota JavaScript framreiðslumaður-hlið
nota ímynda ramma sem heitir Node.js að sumir af eigin forrit CS50 er
eru skrifaðar í.
Athugaðu 50 reyndar notar Node.js.
En við erum að fara að einblína á JavaScript client-megin hér eftir.
>> Svo hér er sett skilyrði í PHP.
Því miður, in-- reyndar, það Yfirlýsing líka er rétt.
Hér er einnig sett af aðstæður í JavaScript.
Syntactically, er það eins og C og PHP.
Orðasambönd Mr Boole eru, álíka, setningafræðilega
eins og bæði C og PHP.
Við höfum einnig rofa í JavaScript að líta eins.
Við höfum fyrir lykkjur sem eru byggð samur,
en lykkjur, gera á meðan lykkjur.
>> This einn er a lítill ólíkur.
PHP hafði fyrir hvern reisa sem þú gætir verið að nota
eða vilja nota í pset sjö, kannski.
JavaScript er þetta sérstaka útgáfu af fyrir þar sem þú segir eitthvað bókstaflega
eins og fyrir breytu lykill í hlut, sem er mjög gagnorðar leið til að segja,
ef ég hef fengið object-- og við munum tala um þetta aftur í moment--
og ég vil árétta yfir allt af helstu pör gildi inni,
Ég þarf ekki að reikna út hvernig á að tölulega Vísitala þá með núll, einn,
tveir, þrír.
>> Ég get bókstaflega segja þetta.
Og á hverri ítrun, JavaScript fyrir mig mun uppfæra breyta takkann
að vera fyrsti lykillinn, svo næsti, þá næsti, þá næsti,
og svo framvegis.
Og ég get fengið á gildi þess með því að meðhöndla hlut í JavaScript, eins og við munum sjá,
eins og það er tengin array í PHP.
Reyndar, ef þú vafinn loksins þinn huga um hvað tengin array er
í PHP, getur þú hugsa um það nú eins samhljóða hlut í JavaScript.
En það er hluti af mikil einföldun.
>> Fylki líta, fallega nóg, eins á PHP nema einum staf.
Það er eitt sem vantar hérna sem við gerðum sjá í síðustu viku með PHP.
Hvað er sleppt?
Já?
Engin dollaramerki.
Þannig að við erum aftur að a eðlilegra heimi þar
breytur hafa ekki dollara merki.
En þú gerir forskeytið þeim með Var, oftast.
Og Var þýðir breytu.
Og líkt PHP er lauslega typed-- þar eru gerðir,
það eru tölur og strengir og flýtur og svo forth--
JavaScript er álíka tegundir.
En það er lauslega slegið í að við að forritarar þurfa ekki að tilgreina þau.
Við verðum bara að vera meðvitaðir að mismunandi tegundir til.
>> Breytur, er meanwhile-- hér hvernig við gætum lýsa "Halló, heimur"
sem streng.
Eftir það er eins og PHP en engin dollaramerki.
Og þetta er eitthvað sem við munum byrja að sjá meira í dag,
þar sem þú ert með hlut með tökkum og gildum.
Og ef þú vilt reyna að álykta frá síðasta week--
setningafræði er svolítið öðruvísi.
En smá geðheilsu check-- hversu margir lyklar er þetta hlutur virðist hafa?
Þannig að ég sé fjögurra.
Ég sé tvo.
>> Svo það er í raun tveir.
Þannig að þetta er safn tveggja lykill-gildi pör.
Lykillinn er tákn sem gildi er FB.
Lykillinn er verð sem gildi er 101.53.
Þeir eru tveir lykill-gildi par.
Og muna, PHP-- og þetta er aftur bara svona setningafræðilegar munur.
Það er ekki allt sem vitsmunalega áhugavert.
PHP gæti hafa skrifað þetta sama heitir follows-- quote, jafngildir.
Og ég breytt þeim til hornklofa.
Og þá er ég að breyta þessu til a vitna orð, "verð."
Og þá nota ég ekki tvípunkt.
Hvað gerði ég nota síðustu viku?
Já, merkið arrow angurvær tákn.
>> Og svo ég gerði það sama hér.
Sami hlutur hér.
Og það er allt.
Svo það er allt í lagi ef þetta er ekki virkilega sökkt í að minni bara
enn vegna þess að það er í raun vitsmunalega uninteresting.
Það er bara setningafræðilegar munur.
En hugmyndir eru nákvæmlega það sama.
Inni þessa breytu vitna í JavaScript
er safn af lykill-gildi par, einn sem er tákn, einn sem
er verð.
Og ég get fengið á þeim gildum með eftirfarandi setningafræði.
Rétt eins og í PHP, ég gat gera eitthvað like-- láta
mig gera þetta kassi aðeins stærri.
Rétt eins og í PHP, ég gat gera this-- ó, dammit.
Láttu ekki svona.
>> Rétt eins og í PHP-- lagi, munum við bara nota kynnirinn skýringum.
Rétt eins og í PHP, ég get gera $ vitna $ vitna ["tákn"],
og þetta mun fá mér gildi "tákn."
JavaScript, það er að fara að vera eins, þar sem ég get bara gert þetta.
Það eina sem er vantar er dollaramerki.
>> Svo fallega nóg, þá, það er ekki allt sem mikið nýtt setningafræði.
Svo það í dag við að leggja áherslu á, í raun er, sumir af þeim hugmyndum og forrit.
Og fyrst svo forrit sem þú gætir
hef séð ef þú kafa inn pset sjö þegar þetta er setningafræði.
Svo í pset sjö, ef þú hefur séð eða ekki séð hana ennþá,
veit að það er skrá sem við gefum þú kallaðir config.json-- Javascript
Object Ritháttur.
Hvers vegna?
Okkur langaði til að vera fær um að veita þér með sniðmát með nokkrum lykill-gildi pör.
Okkur langaði til að vera fær um að gefa þér lista gestgjafi, nafn miðlara.
Okkur langaði til að gefa þér tákn fyrir notandanafni þínu
og tákn fyrir lykilorð.
Ef þú ert ekki að sjá þetta ennþá, ekki að hafa áhyggjur.
Meira um þetta í pset sjö [? sérstakur. ?] Og svo,
augljóslega, viljum við þér að fylla í verkþætti
vegna þess að þegar þú skráir þig inn CS50 IDE, hvert ykkar
hafa eigin notendanafn og lykilorð.
>> Þannig að við gætum hef notað hálfa tylft eða fleiri mismunandi skráarsnið.
Við hefðum getað notað Txt skrá.
Við gætum notað CSV skrá.
Við gætum höfum notað er INI skrá, XML skrá,
a heild búnt fleiri skammstafanir sem þú gætir ekki hafa heyrt.
Það er góður af handahófskennt í lok dagsins.
En frábær vinsæll þessa dagana er texti snið kallað JSON-- JavaScript Object
Notation-- sem lítur svona út.
Það er svolítið dulinn, en taka eftir mynstrum.
Þú byrjar með opnum hrokkið Brace, og þú endar með það sama.
Inni sem er eitthvað.
Það er lykill-gildi par.
Svo er þetta hlutur sem ég er horfa á á skjánum hér
sem hefur einn lykill, sem hefur eitt gildi.
Og bara inferring byggt á fyrri mynstur, hvað er lykillinn hér?
Database, málið er að vinstri í ristli.
>> Nú, gildi verður að vera a margar línur að þessu sinni.
En verðmæti byrjar með hrokkið borsveif og endar með hrokkið borsveif.
Svo er hvað myndir þú leggja í tegund af verðmæti á gagnagrunni?
A orðabók eða bara meira succinctly, hlut.
Ekki satt?
Þetta er góður af a gögn uppbygging sem Hægt er að nota önnur mannvirki í sér.
Þannig að ef þetta allt hlutur sem við erum Starf object-- og hlut
er bara fullt af takka-gildi pairs-- á gildi hjá sjálfri er hlutur.
Gildi gagnasafn hefur a heild búnt helstu gildi pör, fyrst sem
er gestgjafi, þá nafn, þá notandanafn, þá lykilorð
hvert sem gildi, á meðan, það er bara leiðinlegt band í gæsalöppum.
>> Svo jafnvel ef það er ekki frábær skýr strax,
veit að þetta er bara staðall, nokkuð leiðinlegt leið
að geyma gögn í stöðluðu sniði.
En algengt Mistök Þú gæti gert, jafnvel í pset sjö,
eru litlar heimskur hluti, eins og ef þú óvart sleppt kommu þarna.
Það er að fara að leiða í skrá ekki endilega að vera læsileg.
Ef þú sleppt óvart hluti eins vitna, það er ekki að fara að vera læsileg.
Svo það er nokkuð nitpicky skrá snið, en það er eitt sem er frábær sameiginleg.
Og við skyldir að nota það, jafnvel þó þú notar ekki JavaScript annars,
í pset sjö.
>> Allt í lagi.
Svo man þessa mynd.
Við töluðum um, í HTML, sem kóðinn gæti litið svona út.
Þetta er HyperText Markup Language [Inaudible] fyrir bara "Halló, heimur."
En þá erum við fyrirhugaða en aftur að ef það hjálpar,
þú might vilja til að byrja að hugsa um þetta þegar eins og tré.
Í raun, inndrátt sem við nota bara fyrir sakir sýnilegur er
eða vegna á Style vinstri getur konar
vera þýdd þessu tré, þar sem þú hafa sérstaka rót hnút sem við munum
generically kallað skjal, sem er af er rót HTML frumefni eða tag, HTML,
sem síðan hefur tvö börn, höfuð og líkama.
>> Og þá aftur, höfuð hefur titil.
Og titill hefur texta gildi.
Og líkaminn hefur álíka texta gildi.
Svo ef þú ert ánægð orðatiltæki að já, þú gætir tekið þennan HTML kóða
og teikna mynd eins þetta, Hægra megin
er ágætur andlegt líkan því nú sem við höfum JavaScript, a forritun
tungumál sem vafrar getur framkvæma og túlka fyrir þig,
það kemur í ljós að það við erum að fara að gera í kóðann
er að byrja að vinna þetta tré uppbyggingu í minni.
Við þurfum ekki að byggja tré í minni.
Við þurfum ekki að gera svoleiðis pset fimm-stíl gögn uppbygging
flókið.
Vafrinn, fallega nóg, við túlka HTML toppur til botn,
vinstri eða hægri, er bókstaflega að fara að afhenda okkur jafnvirði bendi
að því öllu trénu fyrir frjáls.
Það er allt í vinnu.
Það er það sem Mozilla og Apple og aðrir hafa gert fyrir okkur.
>> Og með JavaScript erum við að fara að vera fær um að stjórna og breyta og gera
áhugavert til að tré, annars þekkt
sem DOM eða Document Object Model.
Hvers konar hluti?
Jæja, það kemur í ljós að í JavaScript, það er
þetta þvottahús lista af atburðir sem geta átt sér stað.
Og við höfum í raun ekki notað sem Bæta síðan viku núll og pset
núll þegar við ræddum um grunni.
Flest af þú sennilega ekki nota atburður í grunni verkefninu.
En þú gætir muna einfalt Marco Polo
dæmi, þar sem við höfðum tvö sprites, einn þeirra sagði, Marco.
Hin hverjir þá, á að hlusta og heyra að atburði, sagði, Polo.
Ef ekki, ekki hika við að líta til baka svo langt aftur.
>> En þetta er bara til að segja, og þú getur konar
álykta frá nöfnum þessara hlutir, JavaScript, það kemur í ljós,
er að fara að gefa okkur leið til að hlusta fyrir mús að fara niður eða mús fara upp
eða lykill að fara niður eða lykill að fara upp eða onsubmit onselect
eða onresizing eitthvað.
Með öðrum orðum, allir líkamlega aðgerð sem maður getur tekið með vafra
sem þú gerir á hverjum degi, getur þú skrifað póstnúmer fyrir að hlustar eftir þeim atburðum
og þá er eitthvað viðeigandi.
>> Til dæmis, ef þú notar Google Maps, hvað gerist ef þú smellir á og færa
mús, yfirleitt?
Ef þú smellir á og draga?
Já?
Nákvæmlega.
Kortið byrjar að hreyfa.
Svo þú getur konar séð hvað er hérna, hvað er þarna.
Og hvernig virkar Google framkvæma það?
Jæja, væntanlega, þeir með nokkrum af þessum atburði
hlustun, eitt sem segir, hlusta á á músinni
down-- svo þegar notandi líkamlega ýtir rekja spor einhvers hans eða hans eða mús hennar
niður.
Og þá erum við að leita að eitthvað eins og hreyfingu
eða einhver annar atburður sem gerir okkur kleift að handtaka dragið.
Og í raun, draga er álíka í þetta punktur punktur punktur lista yfir mögulega valkosti.
>> Þannig að þetta er að fara til vera a öflugur leið til að byrja að bregðast við notanda
jafnvel áður en hann eða hún smellir raun eitthvað skýr eins leggja.
En við erum að fara að kynna nokkrar efni á að komast þangað.
Umskipti en fyrst skulum að einhverju raunverulegu kóða.
Þannig að ég ætla að fara á undan og opna dom-0,
sem er mjög einfalt dæmi hér að ef ég stækka bara
hefur þetta inntak hér fyrir mig.
Og ég ætla að fara á undan og tegund í "David" mínu nafni og smelltu á Senda.
>> Og þá, að vísu konar ódýrt, ég hafa þetta hvetja sem birtist sem segir,
"halló, David!"
Svo er af þessu tagi eins okkar "Halló, heimur"
sem við gerðum hríð aftur í C ​​og jafnvel í PHP vegna þess að ég hef mjög virk
outputted nafn mitt.
Ég get gert nafn einhvers annars hér.
Ég gæti einfaldlega breytt þessu í, eins, Hannah, smelltu á Senda.
Og reyndar, litlu pop-up breytingar.
>> Nú, eru hvellur-ups einn af flestir misnotuð lögun af the vefur.
Og í raun aftur í í dag pop-up blokkar
kom inn í PayPal vegna þess að þú myndi fara til einhvers website--
kannski vafasamt place-- sem myndi þá skyndilega
byrja peppering skjánum með a heild búnt af pop-ups.
Og svo þetta getu til að skjóta upp kollinum gluggar í framan notandann
hefur ekki verið sérlega vel tekið af mannkyninu.
Svo er það hvers vegna þú sérð þetta koma í veg fyrir neitt,
sem bara gerir þetta allt hlutur ljót.
Þannig að við erum að fara að þurfa a betri leið til að hvetja notandann.
En nú, sem virðist virka.
Svo bara innsæi, hvað virðist vera að gerast hér?
Ég fer á undan og smelltu á Senda og þá eitthvað er að gerast, greinilega.
En hvað er ekki að gerast að gerðist í síðustu viku hvenær ég smellti Senda?
Hvað gerðist ekki á skjánum?
Sorry?
Endurhlaða.
The URL ekki breytt á öllum.
Ég sagði að þetta væri dom-0, og ég er enn á Dom-0.
Venjulega, við myndum fá breytt að einhverju öðru URL, eins og register.php eða þess háttar.
>> En jafnvel þegar ég hunsað Þessi hlutur með því að smella á OK,
Takið eftir að URL helst alveg setja.
Og í raun, ef ég er svolítið efins, láta mig opna Chrome.
Leyfðu mér að opna flipann Network.
Og eftir það er auður í augnablikinu.
Leyfðu mér að fara á undan og endursenda Maria.
Það er engin net umferð af neinu tagi.
Þannig að það er engin HTTP.
>> Svo reyndar ef ég horfi á the uppspretta merkjamál fyrir this-- láta mig loka þessum glugga
og fara í View Source.
Áhugavert.
Það lítur út eins og það er einhver ný merki, meðal þeirra handrit.
Svo skulum taka a líta innan CS50 IDE nákvæmlega hvað ég sent til notandans.
>> Svo hér is-- skulum leggja áherslu á HTML eingöngu.
Villutrú 'the botn helmingur af DOM-0.html.
Og eftir að það fékk titilinn, höfuð tag, líkami tag, mynd tag.
En hvað stökk út til þín eins mismunandi, sérstaklega ef þú hefur aldrei
skrifað eitthvað JavaScript sjálfur.
Láta mig fletta smá til hérna.
Ég hef fengið inntak, annar inntak fyrir að leggja.
Ég hef fengið ID, sem er eins konar ný.
En við fengum að sjá þetta með CSS.
Hvað annað er ákveðið nýtt?
Já?
Nice.
>> Allt í lagi.
Svo þar sem hún segir onsubmit, eftir því sem virðist fylgja.
Þetta er eiginleiki í HTML flokkunarkerfi.
Gildi þess er þetta vitnað streng hér.
Og þetta lítur svolítið undarlegt við fyrstu sýn.
Það er ekki HTML.
Það er ekki CSS.
Þetta er, eins og þú might giska, JavaScript.
Svo virðist sem byggt inn í þetta Vefsíðan er fall sem heitir Greet.
Og ég er inferring að bara vegna þess að það er orð, heilsa.
Það fékk opið paren, loka paren, semíkommu.
Lítur út eins og C virka, lítur út eins og PHP virka.
>> Og reyndar, það er að fara að vera JavaScript fall.
Þá er ég aftur ósatt.
Við munum koma aftur til sem í bara smá stund.
En hvar er þessi aðgerð skilgreint?
Jæja látið mig fletta upp til the efst á skránni.
Og jafnvel þó að það er löng lína, það er tiltölulega einfalt.
Leyfðu mér að súmma út hér og einbeita sér að þessum fjórum línum.
>> Svo í JavaScript, bara eins og PHP, þú bara
segja, bókstaflega, orðið "virka," nafn virka,
og þá sviga með eitthvað arguments-- engin rök í þessu tilviki.
Og það er ekki aftur snúið tegund í JavaScript, bara eins og PHP.
Svo það er lítið looser en C. Open hrokkið Brace, nálægt hrokkið Brace.
Byggt í JavaScript er function-- ekki mælt með function--
en fall sem heitir viðvörun sem tilgangurinn í lífinu
er að draga upp sem ansi ljót hvetja sem við sáum áðan.
>> Nú er þetta eins konar munnfylli.
Hvað er að gerast hér?
Svo skulum byrja á að varpa ljósi allt hér.
Það er sömu rök til að vara.
Og hvað er að gerast?
Þetta lítur bara eins og band.
Og það kemur í ljós, ólíkt PHP og ólíkt C, það skiptir ekki máli í JavaScript
ef þú einfalda gæsalöpp eða gæsalappa.
Þeir ætla að vera jafngildar.
Og hreinskilnislega, það er bara vinsæll þessa dagana
fyrir JavaScript forritari alltaf Notaðu einn quotes fyrir sumir ástæða.
Það er bara málið að gera.
En við gætum notað gæsalappa, eins og heilbrigður.
>> Svo plús er ný persóna.
En þá sem hefur gert þetta áður, hvað þýðir plús meina?
Já.
Concatenate.
Þannig að við sáum þetta í PHP.
Það er bara punktur rekstraraðila í PHP sem
mun concatenate tvo strengi saman.
C var sársauki í hálsinum til að gera þetta.
Muna frá pset sex, sem var sem sérstakur verkir í hálsi,
þú þyrftir að nota eitthvað eins strcat
eftir úthlutun minni á mánudaginn eða hrúga.
Þú þurfti að hoppa í gegnum hindranir bara til concatenate tvo strengi.
JavaScript, það er frábær einfalt.
Notar bara plús rekstraraðila milli þeirra.
>> Svo flókin-útlit hlutur virðist vera þetta
vegna þess að í lok allt þetta band, ég bara
concatenate á upphrópunarmerki.
Svo ef það var pabbi upp var "halló, David," "halló, Hannah,"
"halló, Maria," og svo framvegis, greinilega að miðja hlutur á milli tveggja
plús verður að gefa mér aðgang að hvað?
Hvað er þarna fyrir víst?
Já.
Svo ég ætla að þykjast hér svara nafn sitt, ekki satt?
Þannig að nafn þeirra smella upp í úrslitaleik úrslit. Svo hvað þýðir þetta?
Jæja, ég lagði fyrr í að mynd sem svokölluð DOM
hefur þetta sérstaka rótarstakið leið upp efsta kallað skjal.
Og nú kemur í ljós, það er að fara að vera sérstakt alþjóðlegt breytu
í JavaScript, byggt inn sem er allt fullt af gagnlegum virkni.
Meðal gagnlegt virkni er hæfni til að fá á hvaða afkomandi hnút.
Þeir ferningar eða rétthyrninga eða ellipses eru bara hnúður í tré, svo að segja.
>> Svo kemur í ljós að byggð í Skjal mótmæla JavaScript er
er fall, annars þekkt sem aðferð, sem heitir getElementById.
The setningafræði fyrir starf fall í JavaScript
sem er inni á hlut eða breyta er bara með punktur tákn.
Og við sáum þetta í C hvað struct setningafræði.
Þú sérð þetta í pset sjö, eins konar, konar, þegar þú sérð CS50 :: fyrirspurn.
The ristill hreinsun í PHP er annar leið til að hringja í aðgerð sem er
inni einhverjum hlut.
>> En nú í JavaScript, það er bara punktur.
Og svo þessi aðgerð, fallega nóg, eins konar
segir hvað það does-- fá þáttur af ID.
Þáttur er bara annað nafn að merkinu eða hnút í DOM.
Og svo fá þáttur með kennitölu "nafn" þýðir this-- hér er HTML minn.
Og á grundvelli þessa HTML, hvað hnút eða hvað HTML tag er ég
fara að kerfisbundið vera afhent með því að kalla document.getElementById?
>> Já, einmitt.
Ég ætla að fá inntak þáttur þar sem ID er "nafn".
Svo sérstaklega, þú getur hugsa um þessa aðgerð,
getElementById, sem leið til að gefa baka bendi það tiltekna hnút
í trénu.
Við höfum ekki dregið þetta tré, en það er leið
að fá aðgang að þeim rétthyrningur eða að rétthyrningur
með einstaklega þekkja það í gegnum ID hennar.
>> Nú, af hverju er þetta að gagni?
Jæja, það kemur í ljós að þegar þú hefur fengið
að hnút, að rétthyrningur frá mynd, sem hnút inni af því,
aftur á móti, hefur a heild búnt af properties-- lykill-gildi par
eða gögn, einn sem heitir gildi.
Svo bókstaflega, það er góður af a munnfylli til að útskýra allt hlutur.
En í lok dagsins, allt þetta gerir er að gefa þér
band sem notandinn slegið í í þessu hierarchic hátt.
En mér líkar ekki par af þessum hlutum.
Eða öllu heldur, það er einhver forvitni enn.
Allt sem virtist virka.
Hvers vegna heldurðu að ég kom aftur rangar eftir að hringja heilsa?
Þetta lítur svolítið ljótt, sem Ég hef tvær yfirlýsingar þar
aðskilin með semikommum.
Taka giska.
Ef ég fjarri return false, hvað gæti gerst, bara dragast?
Því miður, segi aftur?
>> Opna fullt af Windows.
Svo hugsanlega kannski eitthvað svona myndi gerast.
Hvað annað?
Gæti senda beiðni þar?
Á sömu síðu.
Svo, í raun, það er það því nær svara hér,
jafnvel þó, ólíkt í fortíðinni, ég hef ekki
tilgreint aðgerð eiginleiki, sem venjulega við þurfum að gera.
Skrúfjárn út það er sjálfgefið. Ef þú tilgreinir ekki til aðgerða,
það er eins og að segja vitna, unquote eða nafn skrá sig,
sem í þessu tilfelli myndi vera eins og DOM-0.html.
Það er bara svona álykta, eða öllu heldur gefið í skyn.
>> Og svo ef ég geri þetta ekki, við skulum taka.
Leyfðu mér að spara þetta.
Og ég hef eytt return false.
Leyfðu mér að fara aftur á þessa dæmi og afl endurhlaða hana.
Og þú gætir hafa séð mig stinga þetta á CS50 Ræddu fullt af sinnum.
Ef eitthvað er alltaf vinna angurvær og Vafrinn er ekki atferlis eins og þú búist við,
oftsinnis þú þarft að halda Shift og smelltu síðan á Reload.
Sem mun neyða alla skrána til að endurhlaða og ekki nota staðbundin skyndiminni vafrans
eða afrita svo að nú, láta mig fara á undan og opna Eftirlitsmaður minn, á flipann Network.
Ég ætla að smella Varðveita Innskráning því ég
vil ekki það að eyða raðir Þegar ég fá whisked burt annars staðar.
>> Leyfðu mér að fara á undan hér og tegund í Andi, smelltu á Senda.
Allt í lagi.
Það virðist eins og búist var við.
Það segir "halló, Andi."
Leyfðu mér að smella á OK.
Áhugavert.
Takið eftir að síða breytt, að vísu á upprunalegu síðuna.
Takið slóðina konar breytt.
Það bætti spurningarmerki, sem er yfirleitt vísbending
að við reyndum að leggja eitthvað.
Og þá neðst, jafnvel ennþá afdráttarlausara
hér er í raun HTTP beiðni, sem fékk svar 200 sem
leiddi mig aftur hingað.
>> Svo er þetta ekki hvað við viljum gera, ekki satt?
Vegna þess að ég vil ekki að endurhlaða alla síðuna.
Ég vildi þess í stað að fara aftur rangar þannig að skammhlaup
Sjálfgefið í vafranum, sem var, að sjálfsögðu, til að leggja á síðunni.
>> Svo skulum taka a líta á a ívið betri dæmi.
Þetta er dom útgáfa einn.
Og taka eftirfarandi.
Það er allt í lagi ef þú grok ekki allar línur af kóða.
En hvað er í grundvallaratriðum öðruvísi um þessa framkvæmd?
Ég kveða það hegðar sér sama, gerir það sama.
Hvað hef ég gert augljóslega öðruvísi?
Já?
>> Áhorfendur: [inaudible].
DAVID Malan: Já.
Svo aðgerð er skilgreind differently-- í öðrum orðum, fjarverandi frá formi,
þar upp á línu 7-- eða frekar, lína 8-- ekki lengur
ég hef onsubmit eiginleiki.
Í fyrra dæmi, ég hafði þetta.
Og þá er ég skrifaði bókstaflega númerið mitt hér.
Og þá sagði ég aftur rangar.
Og ef það var ekki nudda þú röng leið enn,
það ætti að byrja að svo miklu leyti sem, rétt eins og í HTML,
þegar við byrjuðum að samstarf blanda það með CSS í stíl eiginleika,
það byrjaði bara að fá smá sóðalegur eða finnst lítið rangt.
>> Á sama hátt hér, ef þú byrjar að taka HTML,
og þá sjálfkrafa plop sumir JavaScript kóða
í the miðja af a vitnað band, það er ekki að fara að vera mjög haldist.
Ekki satt?
Það er ekki einu sinni augljóst í fyrstu stað þar sem JavaScript kóða er.
Svo það væri mjög gott og meginregla betri hönnun,
við skulum halda HTML okkar alveg aðskilið frá okkar JavaScript.
>> Svo til að gera það, það sem við höfum gert hér er following--
við notum einfaldlega HTML fyrir Markup aðeins.
Og svo í útgáfu eitt af þessu, allt Ég hef er mynd með einstakt auðkenni.
Og þá niður hér, ég að taka kostur á sérstaka eiginleika JavaScript
þar sem ég get haft það er kallað nafnlaus aðgerð.
Svo kemur í ljós að ef ég kalla document.getElementById af '' demo
það er eins og að gefa mér bendi þetta hnút í tré minn, form þáttur,
svo að segja.
>> Nú, ég veit bara frá vita smá HTML
nú erum við að hafa lesið nokkrar netinu tilvísun, að ein mynd þáttur styður
a heild búnt af atburði listeners-- í öðrum orðum, þvottahús lista atburður
hlustun sem við sáum áðan.
Ég veit af því að lesa gögn að onsubmit er gild atburður
hlustandi fyrir gefinn frumefni.
>> Svo þegar ég veit það, það er óhætt fyrir mig að gera
sem following-- fá þessi hnút af trénu, formi þáttur,
og aðgang þess svokallaða onsubmit eign.
Svo punktur þýðir bara þetta er eign sem
eins og sérstakt gildi innan þess.
Og hvaða gögn tegund er ég framselja virðist,
til að onsubmit, sem er í raun a breyta inni
þess hnút í trénu?
Það er sviði innan þess strúktúr.
Hvað er gögn tegund?
>> A virka, já.
Svo kemur í ljós að PHP er þetta.
Og jafnvel þótt við ekki segja þér frá því,
C hefur einnig virka ábendingum, því getu til að fara og tengja aðgerðir
sem gildi sjálfra breytur.
Og við erum ekki að fara til regress aftur til C
En nú, kemur í ljós að á hægri hönd hlið hér,
jafnvel þó að það lítur svolítið angurvær, þetta þýðir, hey vafra,
gefa mér virka.
Ég ætla ekki að einu sinni nenna að gefa það nafn vegna þess að ég er bókstaflega
að fara að úthluta skulum kalla það veffang þessa aðgerð
strax að onsubmit.
Með öðrum orðum, vafra, þú þarft ekki að vita hvað þessi aðgerð er kallað.
Þú þarft bara að vita þar sem það er í minni.
Og svo nægir það bara að hafa jafnan merki þar
og ekki að standa í því að nefna þetta, eins og foo eða heilsa eða annað orð.
Og nú er þetta bara stylistic hlutur.
Ég gæti farið á þessa hrokkið Brace á the-- sorry-- næstu línu
eins og við gerum venjulega CS50.
En í JavaScript, það er reyndar stylistically algengar
bara halda hrokkið Brace er fyrsta, þann fyrsta línu.
>> En hér, það er ekkert áhugavert.
Að opna hrokkið Brace bara demarcates upphaf virka mínum.
Fallið er nú eins, nema ég hef
ma return false inni þessa aðgerð.
Því það kemur out-- og þú vildi bara
veit þetta af lestri sem documentation--
að ef fallið sem þú gefur til onsubmit dýraþjálfari False,
vafrinn veit bara og samþykkir ekki að senda inn mynd til miðlara.
Ef það skilar satt, mun hún leggja fram það að miðlara fyrir ástæðum munum við sjá
eru gagnlegar í bara smá stund.
>> Og þá semíkommu eftir hrokkið Brace það bara
þýðir að ég er búin að skilgreina hlutverk.
Þú veist hvað ég á að kalla strax eins og þú heyrir uppgjöf.
Allt í lagi.
Þetta er enn að öllum líkindum konar ljót.
Svo hvað meira getum við gert?
>> Jæja, það kemur í ljós þá í útgáfa tveimur, sem er last--
og við verðum bara litið á þetta.
Í hættu á að gera það ljótari, snýr það út
að það er bókasafn í heimurinn heitir jQuery.
Og jQuery er frábær Vinsælast JavaScript bókasafn
það er svo vinsæll að flestir allir Javascript-- það er ekki
óalgengt að fólk rugla jQuery JavaScript.
Hvers vegna?
JavaScript sjálft hefur mjög fjölorður leiðir til að gera things--
document.getElementById, dadadadadada.
Þú endar með mjög lengi línur af kóða.
>> Svo náungi að nafni John Resid, sem í raun virkar fyrir ræsingu
upp þessa dagana, kom út Með þessu bókasafni ár
síðan að margir hafa stuðlað að kallað jQuery að breytingar
setningafræði á eftirfarandi hátt.
Og bara svo þú hefur séð þetta, vegna þess að þú munt ávallt
séð þetta ef gera a vefur byggir lokaverkefni,
þetta myndi vera jafngildi leið framkvæmd þeirrar sömu aðgerð með
þetta sérstaka bókasafn.
>> Nú, frekar en stríða það í sundur í heild sinni,
skulum bara líta á nokkrar mynstrum.
Þetta setningafræði virðist hafa hversu margir nafnlaus virka
eða nafnlaus virka eða AKA Lambda aðgerðir?
Tveir, ekki satt?
Og þú veist það, jafnvel þótt þú ert ekki frábær notalega með þetta,
bara af því að það segir fall () tvisvar.
>> Og það kemur í ljós að hvað þetta númer er doing--
og við munum vísa til online tilvísanir, lokum, fá aðstoð við þetta.
Þetta þýðir bara að þegar skjalið er tilbúið,
fara á undan og skrá eftirfarandi aðgerð
sem leggja dýraþjálfari fyrir HTML þáttur sem einstök hugmynd er kynningu.
Og svo, þegar það gerist, kalla þessar tvær línur af kóða.
Og þetta er, tragically, meira fjölorður leið til að segja return false.
Og við nefndi þetta bara vegna þess að þú munt sjá kóðann svona netinu.
Og það er ekkert að daunted.
Heldur hafa í huga að það er að fara að vera algengt í JavaScript
er þetta hugmyndafræði.
Og svo er það þess vegna sem við sýna það fyrir nú.
Allt í lagi.
Svo án þess að bústað of mikið á því setningafræði,
eru það eru einhverjar spurningar um þessi dæmi eða hugmyndir svona langt?
Allt í lagi.
Svo skulum við nota þetta fyrir eitthvað gagnlegt.
Gerð vefsíðu sem bara segir halló, svo og svo er ekki allt sem áhugavert,
ekki að underwhelm.
Þetta eitt er ekki að fara að vera fallegur, en það er að fara að gera eitthvað gagnlegt.
Leyfðu mér að fara aftur til skrá minn hér og opna upp, segja, form-0.html.
>> Svo býst þetta er freshman intramural íþróttir skráning síðu
án CSS eða hvaða skilningi hönnun.
Og ég vil fara á undan og að skrá sig hér með lykilorði.
Og ég ætla að samþykkja skilmála og skilyrði og smelltu Register.
Og nú website segir, "Þú ert að skrá sig! (Jæja, eiginlega ekki.) "
Það virðist eins og það virkaði, en láta mig fara á undan og neyða endurhlaða.
>> Og láta mig segja, nei, þú ert ekki þarf raunverulegt netfangið mitt.
Eða kannski að við munum bara segja póst þar.
Lykilorð verður, eins og, 12345.
Og þá, bara vegna þess að ég er hálfviti, nú er það 123456789.
Og ég ætla ekki að fara að athuga kassann.
>> Hmm.
Allt í lagi.
Svo er þó nokkur tækifæri það til úrbóta hér.
Og þú veist, eða munt sjá í pset sjö, sem þú getur skrifað code--
og þú þarft að skrifa númer í PHP-- að verja
gegn þessum tegundum af notanda villur vegna þess að notandi greinilega
hefur ekki unnið.
Og hann eða hún hefur ekki gefið þér alla gildi þú vildir eða jafnvel í formi
að þú vildir þá.
Svo þú munt sjá í pset sjö sem við gætum vissulega hafa sumir
ef skilyrðum sem segja Ef netfangið
er ekki username@something.edu, við gátum bara
segja fyrirgefðu og biðjumst við notanda mikið, eins og þú gætir verið á pset sjö.
Eða ef þeir hafa ekki kannað kassann, kemur í ljós í PHP, getur þú uppgötva að
líka.
Og vissulega ef lykilorð passa ekki eins og í register.php
fyrir pset sjö, getur þú uppgötva það.
En það er verk í háls í að nú eru þeir óska
okkur að fara alla leið til the framreiðslumaður.
Notandinn er upplýst um villuna.
Og að minnsta kosti nema þú notir sumir áhugamaður tækni,
nú hafa þeir að smella á örina til baka.
Væri ekki gott, eins og a einhver fjöldi af websites dag,
ef þú hefðir meira strax viðbrögð, í stað?
>> Með öðrum orðum, láta mig fara í útgáfu einn, sem er að fara að vera fallegri.
En það hjartarskinn hafa þennan möguleika.
Malan, 12345, 123456789, ekki fara til stöðva the kassi, Register.
Lykilorðin stemma ekki.
Svo jafnvel þótt það pop-upp er ugly-- getum við skipta þessu á endanum
með eitthvað eins og ræsi, sem þú munt sjá í pset sjö
er mjög vinsæll library-- ég gerði uppgötva að lykilorðin eru ekki.
Allt í lagi.
Jæja, láttu mig laga það sem notandi.
Leyfðu mér að fara á undan og segja 12345, 12345.
Enn ekki að haka við samning.
Þú verður að samþykkja skilmálum og skilyrðum.
Svo hvers vegna?
>> Ef við höfum þegar afhent að það er leið,
og við höfum krafist að þú í pset sjö til greina villa
aðstæður eins og þetta framreiðslumaður-hlið, hvers vegna ætti ég
nennir líka að gera þetta í JavaScript?
Hvað er rök í hag af því að bæta það sem
þú ert að fara að sjá sem some-- það er til viðbótar flókið.
>> Kannski er engin kosti.
Hvað gæti það verið?
Áhorfendur: [inaudible].
DAVID Malan: Oh, áhugavert.
Hugsanlega hetjudáð.
Svo viss, ef þú ert ekki meðhöndlun rangra notandi inntak sem mikill,
kannski er það allt betra ef það ekki einu sinni ná framreiðslumaður.
Ég myndi ýta aftur þangað og segja, ættir þú líklega
festa báðum þessum vandamálum.
En það er sanngjarnt.
Hvað annað?
>> Áhorfendur: [inaudible].
>> DAVID Malan: Já.
Þetta númer, eins og ég sagði áður, er túlka á client-megin.
Það þýðir ekki að trufla miðlara, sem þýðir að það er ekki
áhrif hlaða netþjóns eða getu.
Og nú, fyrir litla gamla mig, þetta hefur engin marktæk áhrif
vegna þess að ég hef einn notandi núna.
>> En ef þú ert eitthvað vefsíða ágætis stærð,
sérstaklega stærsta, eins og Facebook, því meira sem þú getur haldið fólki burt
af vefþjóninum þínum því betra vegna þess að miðlara, að sjálfsögðu,
aðeins hefur endanlegt magn af RAM, endanlegri fjölda gigahertz,
endanlegt tala af hlutur það getur gert á hverri tímaeiningu.
Þannig að ef það eru fleiri fólk í heimurinn hitting miðlara,
tilviljun að skrá þig inn rangt, eins vel ef þú
hægt að halda því álag á vefþjóninum þínum.
Plus, sérstaklega á farsíma device-- ef þú hefur einhvern tíma
skrá þig inn my.harvard eða NETIÐ Yale eða þess háttar,
það er þetta leynd með fullt af vefsíður eins og að þar sem það tekur,
eins og, fjandinn sekúndu eða tveimur stundum.
Og þá, Guð minn, ef þú mistype, þá verður þú að lemja til baka og endurtaka það.
Svo er það leynd, sérstaklega á hægari nettengingar.
En JavaScript, vegna það liggur á viðskiptavininn
og þarf ekki að fara fram og til baka yfir hugsanlega hægur
tengingu er hægt að fá næstum tafarlaus viðbrögð.
>> Svo skulum líta á þetta.
Leyfðu mér að opna form-0 og líta á HTML hér.
Og við skulum bara sjá hvað er að gerast.
Þetta er mynd sem aðgerð er register.php.
Ég ætla bara að nota færð svo að ég gæti séð slóðina.
En fyrir lykilorð, viljum við vafalaust vilja að breyta þessu til að senda í raun.
Hér er inntak sviði tegund texta.
Hér er annað inntak sviði tegund lykilorð.
Hér er, ef þú hefur aldrei séð, inntak af gerðinni kassann.
>> En það er engin JavaScript hér af neinu tagi.
Þetta er bara HTML sem fer til register.php.
En í útgáfu eitt, þar sem ég byrjaði að fá þær pop-ups,
við skulum sjá hvað raunverulega gerist hér.
Í útgáfu einum, hvað Ég ætla að see-- I
Hélt ég gæti tefja nóg með nógu orðum, en ég hljóp út.
>> Í útgáfu one-- það við förum.
Í útgáfu einum, eftir að following-- og er ekki besta framkvæmd,
en það er mitt fyrsta.
Takið eftir að hér er form, ég er með handrit tag.
Og handrit tag þýðir, hey, vafrinn, hér
kemur nokkur númer í, yfirleitt, JavaScript.
Og nú, eftir því sem ég er að gera.
Á line-- ég get varla lesa it-- línu 32, það segir,
Var form-- svo gefa mér breytu sem heitir form.
Og þá fá document.getElementId af "skráning".
Hvað er þetta?
Jæja, láttu mig baka upp hér.
Og takið eftir, Ah, gaf ég mynd þáttur handahófskennt en lýsandi hugmynd
skráningar.
Svo gefur þetta mér breytu sem leyfa mér að grípa þessi hnút,
að rétthyrningur í trénu heitir formi.
form.onsubmit þýðir hey vafra, skráir atburð hlustandi
á þessu eyðublaði.
Með öðrum orðum, þegar þetta form er lögð, framkvæma eftirfarandi kóða.
Það þarf ekki nafnið því hví þú þarft að vita nafnið?
Þú þarft bara að vita hvað á að framkvæma, Ergo
það er nafnlaus eða lambda virka.
Og það virka er allar þessar línur hér.
Og nú, til að vera heiðarlegur, jafnvel þó að þú gæti ekki hafa alltaf skrifað JavaScript
áður, það er bara C og PHP rökfræði.
Svo ef form.email.value == "" - þannig að ef tölvupóstur reitur er auður,
æpa á notanda með "Þú verður veita netfangið þitt. "
Annað ef form.password.value er auður æpa á notanda,
"Þú verður að gefðu upp lykilorð þitt."
>> Meira Athyglisvert rökrétt, ef form.password.value ekki
jafnt form.confirmation.value-- hvar var staðfesting koma frá?
Leyfðu mér að baka.
Jæja, ég kallaði þetta inntak reit hér lykilorð.
Og ég kallaði þetta einn hér staðfesting.
Ég hefði getað kallað það lykilorð tveir eða eitthvað annað.
Ég ætla bara að rökrétt að skoða að þessir tveir eru eins.
Else-- það kemur í ljós að þetta er Mr. Boole again-- Boolean gildi, í kassann.
Þannig að ef ég segi, upphrópun point-- ef ekki form.agreement.checked,
æpa á notanda eins og heilbrigður.
>> Svo þetta setningafræði sem þú munt sjá er mjög algengar í JavaScript,
þar sem þú þarft þessa dotted tákn.
Þú byrjar með hlut hér.
Þú kafa dýpra til a til eign eins lykilorð.
Og þá færðu á verðgildi hennar.
Og aftur, hér er inntak.
Hér er nafn lykilorð.
Og gildi þess er hvað maður hefur í raun slegið í.
>> Svo í öll þessi tilvikum, ég aftur ósatt.
En ef ekki, ég aftur satt.
Og svo nú sjáum við sannfærandi notkun þegar
þú vildi return false til hætta hvað notandinn er að gera
og gera honum eða henni að velja aftur eða slá aftur.
Annars, aftur við satt.
>> Og láta mig kynna einn Annað Afbrigði af þessari bara
til fræ skilning þeirra.
Jæja, í útgáfu 2 af þessu, form-2-- Ég skal gera það með bylgju af hendi.
Þetta er fyrir þá forvitinn, jQuery útgáfa,
þá sem gæti langað til að notaði í viðkomandi safni.
En við skulum start-- og einhverjar spurningar?
Leyfðu mér að gera hlé fyrir stund vegna sem var fljótur og mikið.
>> En ágætur hlutur hér er að allar kóða er laglegur mikill the sami.
Hin nýja efni er hvað er dom?
Hvað eru þessir ferhyrningar?
Hvað eru þessir hnútar?
Hvað er nafnlaus aðgerð?
Hvað er atburður dýraþjálfari?
En sem betur fer, flest það er bara hring úr td viku núll.
Allt í lagi.
Svo eitthvað örlítið meira áhugavert?
Jæja, fyrst af öllu, láta mig fara á undan og opna Google Maps.
Og þú munt taka eftir því að a stund, á hættu annað,
eftir hvað gerist þegar Ég smelli nógu hratt.
Og þessi tenging við Harvard er svo hratt að þú í raun ekki taka eftir því.
En hvað gerir þú svona eins konar sjá ef ég smelli og dragðu mjög hratt?
Þau ykkar horfa á netinu, ef þú hægja þetta 0.5x hraða,
þú getur séð þetta betur.
>> Hvað var að gerast bara áður en ég smellti og dró?
Leyfðu mér að reyna here-- láta mig gera eitthvað annað, eins og 90210.
Við skulum fara langt í burtu.
Það var mjög hratt líka.
Hvernig væri Disney World?
Það sem við förum.
OK.
Hvað sástu fyrir hættu annað?
Bara eins og ferninga, ekki satt?
Staðgengla fyrir flísar?
>> Jæja, hvað er að gerast hér?
Google Maps er gott dæmi um þessi tækni sem heitir Ajax.
Og þetta er þar sem við munum byrja að nota JavaScript í sérstaklega
alluring leið.
Til baka í dag, það var þetta vefsvæði kallað MapQuest.
Og ég ætti að hafa tekið screenshot af þessu frá 1990,
þar sem ef þú vildir líta upp hér á kortinu,
þú vildi bókstaflega smella ör upp efst sem sýndi þér
annað veldi kortinu.
Ef þú vildir fara til vinstri, þér smellt á örina sem sýndi þér
annað veldi kortinu.
Og sumir vefsíður gera enn þetta í dag.
En jafnvel MapQuest hefur fengið betra, eins og Google Maps.
>> Þess í stað, hvað er betra þetta daga er vefsíður sem nota AJAX.
AJAX-- annars þekkt sem Ósamstilltur JavaScript og XML,
sem er bara fínt leið til að segja tækni eða tækni sem
gerir vafra með javascript að gera frekari HTTP beiðnir
eftir að síða hefur verið hlaðinn.
Svo hvað þýðir þetta?
Jæja, það væri góður pirrandi í Gmail
ef í hvert skipti sem þú vildir að athuga póstinn þinn,
þú hefðir bókstaflega högg Control-R eða Command-R eða smella á Reload hnappinn
og allt fjári síðu myndi endurhlaða.
Ekki satt?
Það myndi blikka hvítt sennilega fyrir sekúndu.
Þú vildi sjá heimskur framfarir bar.
Og bara til að sjá hvort þú hefur nýr mail, allt vefsíðan og slóðin
þú ert á þyrfti að endurhlaða.
>> En það er ekki það sem gerist í Gmail.
Ekki satt?
Þegar þú færð nýjan tölvupóst í Gmail, hvað gerist á skjánum?
Það sýnir bara upp, ekki satt?
Það bara dularfullur birtist sem nýja röð í töflunni.
Sem raunverulega felur í sér ágætis magn af flókið.
Í staðreynd, ef þú hugsar um þetta tré, sem jafnvel þó er einföld hér,
Gmail-- og ég myndi þurfa að leita á kóða til að vera sure--
sennilega hefur HTML töflu eða kannski óraðaðan lista sem það gerir
hvert innanborðs tölvupóst sem.
>> Og svo ef þú ímynda sér þetta þar er tré í minni þegar þú ert
Gmail sem lítur svona eins konar eins og þetta, þegar Google áttar, ooh,
þú ert með nýjan póst, er það ekki langar að endurbyggja allt tréð.
Frekar, vill það til að finna hnút í tré sem táknar pósthólfið
og bara að setja inn nýjan hnút.
>> Svo mjög svipuð pset fimm, þar sem þú þurfti að setja hnúta í kjötkássa töflunni,
álíka er Google, um JavaScript kóða sem hún hefur skrifað,
Traverse þessu tré, reikna út hvar er að pósthólfið hluti af glugganum,
og síðan að setja inn nýja línu.
Og ný röð þýðir bara eitt eða fleiri ný hnútar í tré.
>> Og svo er AJAX þessi aðferð sem gerir ráð fyrir einmitt það.
Þegar þú hefur heimsótt vefslóð, þó brjálaður lengi það er,
og þegar síðan hefur verið hlaðinn, getur þú samt
grípa fleiri gögn úr internet-- hvort sem það er
tölvupóstur eða flísar á map-- grípa það á bak við tjöldin
og þá setja það inn á síðuna svo að mönnum er í raun ekki
að bíða fyrir það.
>> Facebook Messenger virkar á sama hátt.
Allir tala um aðrar websites-- ó, reyndar, jafnvel þessi.
Ég meina, þetta er satt, eins konar pirrandi eru þessa dagana.
Ef ég byrja að leita að cats-- þetta er eins konar hræðilegt reynslu notenda.
Það bara byrjar að leita að mér.
Jæja hvað er það að gera?
The URL hefur í raun ekki breyst síðan ég byrjaði að skrifa.
En hvað er að fara yfir wire-- OK, Hmm áhugavert.
Hvað er að gerast yfir á vír hér bara fær weirder.
>> OK.
Svo láta mig fara á undan og skoða þáttur og fara í Network flipanum
og reyna að gera þetta tæknilega og minna um ketti.
Eins og ÉG tegund, bókstaflega, kettir and-- hvað er að gerast
per-- Ég ætla ekki að fara að smella því.
Allt í lagi.
Svo hérna, hvað er að gerast á hverjum þegar ég skrifa staf, greinilega?
Eins og lágt?
Hvað er að gerast við hvert þeirra stafi Ég er að slá á lyklaborðinu mínu?
Já?
Áhorfendur: [inaudible].
>> DAVID Malan: Einmitt.
Hver af þeim stafi er að fara á Google, eitt í einu.
Þeir eru að byggja upp band á netþjóni þeirra sem táknar
allt sem ég hef slegið í svona langt.
Og í hvert skipti sem ég slá annar karakter, þeir
nota leyndarmál sósu þeirra a leita reiknirit og reikna út,
hann við þessa köttur síðu eða þetta köttur síðu eða þess háttar?
Svo í einhverjum skilningi, það veitir mér með betri reynslu í að ég er ekki einu sinni
þarf að ljúka hugsun mína.
Og reyndar, það er gagnlegt hlutur, sjálfvirkri útfyllingu almennt.
Ef reiknirit þeirra eru nógu gott og ef leitir mínir eru augljóst nóg,
Ég þarf ekki að slá allt orðið.
Þeir eru að fara að segja mér hvað það er ég í raun að leita að.
Svo hvað Google kallar augnablik leit er bara að nota AJAX,
með kóða sem gerir þeim kleift að óska ​​eftir fleiri efni í gegnum a vefur flettitæki
bak við tjöldin með þetta nýtt tungumál, JavaScript.
Þannig að við höfum nokkrar mínútur eftir.
Og láta mig kalla upp félagi minn Colton upp á sviðið,
þar sem það virtist sérstaklega gaman síðasta sinn
að kynna tækni að sumir af þú
hafa lýst yfir áhuga í fyrir lokaverkefni.
Við héldum að það væri gaman að koma upp sjálfboðaliði, þó, í dag
til að sýna þér viðbót við þetta sem gerir you-- já,
Ég sá þessa hönd fyrst.
Komdu upp.
Mjög vel gert.
Vel gert.
Ég ætla að verkefnið þetta á skjárinn í bara smá stund.
Hvað er nafn þitt fyrir alla?
>> EFA: Ég er Efa.
>> DAVID Malan: Etha?
>> EFA: Efa.
>> DAVID Malan: Efa?
>> EFA: Já.
>> DAVID Malan: Gaman að sjá þig.
Allt í lagi.
Leyfðu mér að fá þetta tilbúið.
Komdu til miðja með Colton hér.
Hvað Colton hefur í höndum sínum í dag er fjarstýring.
Svo frekar en bara standa þarna í þrívítt heiminum að leita í kring
eins Colton gerði, nú Efa getur reyndar ganga um með því að fara upp,
niður, til vinstri og hægri eins og Nintendo eða Xbox stjórnandi.
EFA: Ég ætla að falla niður af sviðinu.
DAVID Malan: Ég mun standa u.þ.b. hérna.
En það er hætta á.
OK.
Svo fara á undan og setja þá á.
Leyfðu mér að fara á undan og skipta á skjáinn hér.
Leyfðu mér að dekkja ljósin.
Og Colton, láttu mig koma standa við hliðina á þér.
>> Viltu útskýra hér með mic hvað við erum að gera?
Gjörðu svo vel.
>> COLTON: Jú.
Svo núna erum við hleðsla upp Oculus,
Ég held operating-- ekki starfandi kerfi, en the aðalæð program, þar
þú getur fengið aðgang að öllum leikjum og forrit sem eru í bókasafninu þínu.
Svo núna, það ætti að segja bankaðu snerta til að byrja.
Snerta er að fara að vera á Hægri hlið heyrnartól.
Svo fara á undan og tap--
EFA: Ó, maður.
DAVID Malan: Já, þar sem þú ferð.
The gæði Efa er að sjá er miklu meiri gæði.
Þetta er bara Wi-Fi hér.
COLTON: Það sem þú ert fara til að vilja gera
er að leita í átt að efst hægri á skjánum.
Já, þessi leikur á mjög efst til hægri.
Og svo þegar þú ert að velja það, pikkaðu á snerta aftur.
Ég held Dreadhalls sínum.
Og þá er hér a-- hér, við skulum mig halda gleraugu fyrir þig.
>> Svo ég gaf honum bara stjórnandi.
Svo nú getur hann stjórna leiknum.
Hann getur fært í kring og svoleiðis.
Svo fara á undan og horfa upp á toppinn.
Þú ættir að sjá nýjan leik.
Svo fara á undan og þú getur gert það.
Nú ættir þú að vera fær um að stjórna sjálfur með stýringu,
eins og heilbrigður, eins fljótt og leikurinn hleðst upp hér.
Þetta gæti verið svolítið ógnvekjandi.
>> EFA: Nú þú segja mér.
OK.
>> COLTON: Allt í lagi.
Svo að staðfesta að þú getur fært um.
OK.
Þú getur fært um.
Perfect.
Þannig að ef þú lítur niður, hefur þú kort.
Kort sýnir þér hvar þú ert.
Þú getur litið í kring the herbergi.
Þú getur alveg snúið.
Já, einmitt.
Snúðu við.
>> Svo líta til vinstri.
Ég held að það er eitthvað sem þú getur tekið upp á tunnu í herberginu.
>> EFA: Hvernig fæ ég kort út af the vegur?
COLTON: Horfðu upp.
Bara líta upp.
Allt í lagi.
Þar sem þú ferð.
Nú fara á undan og bara snúa.
Svo líta lengra til vinstri.
Halda áfram vinstri.
Halda að leita eftir.
Haltu áfram.
Já.
>> EFA: Ó, þannig.
>> COLTON: Já.
Ganga að því með stýringu.
Þar sem þú ferð.
Nú ætti að segja taka það upp.
Þar sem þú ferð.
Taka það upp.
Allt í lagi.
Nú, við skulum fá út úr þessu herbergi.
Fara á undan og ganga að þeim dyrum.
Svo þú ert að fara að hold-- það segir halda á hnappinn til að þvinga það opið.
Svo fara á undan og halda takkanum.
Já, þvingunar það opið.
Allt í lagi.
Vel gert.
Nú erum við að ganga út úr herberginu.
Þannig að ég ætla að láta restina upp til þín og sjá hvað þú finnur út.
EFA: Ég ætla ekki að fara í myrkvuðu herbergi.
Ó, bíddu.
Nú þarf ég að fara niður ganginn?
OK, ég ætla aftur [inaudible].
COLTON: Allt í lagi.
Sumir fleiri atriði til að ná upp.
Lítur út eins og sumir mynt.
Það er lás velja.
Svo ef þú finnur læst dyr, þú getur notað það.
Ertu hræddur?
>> EFA: Ekki enn.
COLTON: OK.
>> Pretend-- já.
Bara láta sem þú ert í raun að standa þarna.
Og ef þú kveikir around-- þú hefur fengið að venjast því.
En það er vit í.
DAVID Malan: Og á meðan Efa áfram að spila, þar sem við gætum gert þetta allan daginn,
við getum öll þjórfé-tá út hér.
En við höfum tvo aðra pör, ef þú vilt koma upp og leika.
Annars munum við sjá þú næst á miðvikudag.
Þakka þér að sjálfboðaliðinn okkar í dag.
[Applause]
>> [TÓNLIST - "Seinfeld þemað"]
Ræðumaður 1: Jæja, ég er setja ný PL fjall á.
Ég breytti bara OLPF--
>> Ræðumaður 2: Hvað nákvæmlega ertu að gera?
>> Ræðumaður 1: Jæja, hver these-- hér, ég sýna þér hana í hér.
Þú getur séð það hérna.
>> Ræðumaður 3: Ég held að ég er góður með þessar.
Þú vilt meira?
>> Ræðumaður 4: Nei, ég er góður. [Inaudible].
>> Ræðumaður 3: Nei, [inaudible].
Hafa sumir.
Ræðumaður 1: Mismunandi litur.
Ræðumaður 2: OK.
Ræðumaður 1: Svo að lokum hvað það gerir er að það lagar litinn of--