>> [Speel van musiek]
>> David Malan: Dit is CS 50, en dit is die begin van die week nege.
En wat ons gedink het ons vandag wil doen nie slegs die hoofstuk oor verlede week se noue
materiaal, waar ons fokus op die bediener kant web ontwikkeling met PHP en SQL,
sommige databasis dinge.
Ons sal praat oor 'n bietjie van sekuriteit vandag en dan
oorgang na 'n kliënt-kant programmering taal bekend as JavaScript.
Maar eers 'n paar verlossing.
>> Jy kan onthou dat op Woensdag, het ek uiteengesit
'n webwerf te skryf wat het in die gebruiker se insette
deur 'n HTML vorm wat dan gestoor dat die gebruiker se toevoer name, telefoon
getalle en selfoon draers in die databasis.
En dan het ek 'n bietjie command script geskryf in PHP
wat veronderstel was om te Itereer oor die rye in die databasis
en sms-boodskappe stuur.
Ten spyte van verskeie, verskeie pogings, ons het nie dat werk aan die einde.
>> So ek het hierdie hele week werk op daardie kode om ons te kry verby die punt
waar ons opgehou het, waarvolgens alle Ek het teen die einde van Woensdag
was hierdie teks boodskap uit Margo soos ek gesukkel,
gevolg deur 'n SMS-boodskap van 'n ander klasmaat, Jy het hierdie David.
Gevolg deur die een, wonderlik bemoedigend.
Gehou op gaan, baie verblydend.
Ek het amper het dit tot then-- en dit is die kennis wat ons het op Woensdag.
En dan eintlik dalk my gunsteling, 'n oomblik later, het in.
Damn lewende stroom.
>> So vandag, het ons dit regmaak met 'n vinnige kyk na wat ek sedert gedoen het.
So al hierdie kode is beskikbaar aanlyn vanaf verlede week se, week agt,
bron-kode.
En jy sal sien dat ek het deur, en Ek het eintlik skoongemaak dinge 'n bietjie.
Ek het 'n paar ander kenmerke van 'n SQL databasis.
Byvoorbeeld, eerder as om maak net draer van var kar
as ek dink ek het op die vlieg verlede week.
Ek plaas dit gedefinieer as wat genoem word 'n enum.
>> En sommige van julle kan gesien het hierdie soos ons verken C. Enum is eintlik
'n kenmerk van C waar jy kan opsom 'n hele klomp van die konstantes
en wys hulle outomatiese waardes, soos een, twee, drie, vier
sonder om te hard kodenommers.
So SQL ondersteun die dieselfde, waarvolgens, indien jy het 'n databasis veld dat jy net
wil neem op een van beperkte waardes, kan jy letterlik spesifiseer dit
as ek daar gedoen vir vier gewilde Amerikaanse selfoon draers.
>> So ek het dit gedoen.
En ek het 'n aantal veranderinge Wel, die belangrikste waarvan
was om e-pos te werk, want onthou, dat hierdie program staatgemaak op wat
algemeen bekend as 'n e-pos aan SMS gateway, wat net
'n fancy manier om te sê dat Verizon, en AT & T, en ander mense ondersteun 'n bediener,
waardeur as dit ontvang e-pos, dit vat om dit te SMS
en stuur 'n teks boodskap aan iemand se selfoon.
So as ek dit gedoen het korrek, hier is 'n nuwe en verbeterde vorm
wat gaan om te praat met nuwe en verbeterde kode, wat
jy kan speel met aanlyn.
En dit sal hopelik my selfoon biep in net 'n oomblik.
>> So die eerste, ek gaan om te tik in my naam.
Tweedens, ek gaan nie hierdie hierdie tyd te doen.
Ek gaan nie Inspekteer element.
En dit is net 'n dingetjie so ek doen nie
skep uur van post-produksie werk soos ek gedoen het die afgelope tyd.
Daar is nou my telefoonnommer.
>> Ek sal kies Verizon.
En hier, laat ons draai op die mikrofoon hier, en poog om dit op my selfoon hier.
Ek gaan om te klik Register, wat hopelik
sit dit in die databasis.
Nou gaan ek om te gaan na die command line program wat
Onthou genoem dot streep teks, en steek jou vingers.
Hier gaan ons.
>> [PHONE Dings]
>> [Applous]
David Malan: So meer pret as this-- dit is pret, natuurlik, as ek in dit.
Maar dit is meer pret, het ek gedink, as ons geskep een van daardie film oomblikke
waar soos iets werklik slegte gebeur het in die wêreld,
en soos al die NSA mense se selfone begin piep
met teks boodskappe waarskuwing hulle aan hierdie feit.
So het ek gedink ons ​​sou probeer dieselfde te herskep hier
waardeur nie die gebruik van 'n databasis, Ek plaas in vooraf
het 'n program wat lyk soos hierdie.
>> Dit is 'n index.php-- en ek het die kode aanlyn
as well-- wat blykbaar net maak form.php,
met behulp van 'n MVC styl paradigma dat ons praat oor in meer besonderhede in die probleem stel
sewe.
Dit vorm is eenvoudig.
Dit gaan om aan 'n lêer genaamd here.php via post.
En dit is blykbaar gaan om te vra 'n naam, en 'n telefoonnommer,
en dan via sogenaamde Kies menu, dit is
gaan gee jou ten minste vier gewilde Amerikaanse selfoon draers,
en dan kan jy om doeltreffend te neem bywoning deur hier te klik.
>> En hier, intussen, gaan leen sommige van die kode van die laaste tyd.
En as jy net vlugtig hierdie, sal jy sien dat daar '
'n hele klomp van die fout nagaan.
Maar die skoonheid aan die einde is dat ons is nie die skryf van 'n databasis van vandag.
Ons hou dit eenvoudig en net uit te stuur hopelik
'n SMS-boodskap via funksie ek geskryf het oor die afgelope paar dae oproep
Teks, wat in funksies. PHP, wat weer aanlyn beskikbaar.
>> So as jy wil om deel te neem in hierdie.
Ons is nie van plan om te stoor nie.
Gaan na hierdie URL hier in real time.
Moenie stuur dit net nog nie, maar laat kyk of ons een van hierdie film kan hê
oomblikke waar almal se selfoon begin piep, hopelik net
keer vanjaar anders as in 2011 Waar dit gaan verskriklik mis.
En as jy gaan na die adres, moet jy 'n super eenvoudige vorm sien
dat as jy 'n naam, 'n selfoon nommer, en 'n selfoon draer wat
ooreenstem met die lys is daar, gaan voort en vul die vorm in.
Maar getref nie dien net nog nie.
>> Die vorm gaan lyk.
Gaan voort en tik jou naam, telefoonnommer.
Oop, iemand se voor die kurwe gaan.
Dit is OK.
OK, almal is gevul uit die vorm.
Dit behoort te werk op 'n telefoon, ook as jy wil.
Alle reg, op jou merke, gereed, gaan.
Getref hier.
Wat?
No.
Ek sweer aan God, ek getoets hierdie verskeie kere vandag.
Jy het dit?
>> [INTERPOSING Voices]
>> David Malan: OK, gebruiker fout miskien.
Dit is twee.
Dit het gewerk vir twee uit 'n paar honderd, drie, vier.
OK, dit is goed.
Vier van die vyf vir korrektheid hoe oor.
>> So wat nou net gebeur?
So vermoedelik, sonder om jou skerms, hoekom dit dalk errored het?
Dit is waarskynlik dat ons net probeer te veel verbindings te maak
Harvard se e-pos bediener al by keer van dieselfde IP-adres.
Ek is net raai, want ek het nie het die luukse van die toets
hierdie kode met 'n paar 300 mense in advance
maar vir nou besef dat dat ten minste
het die werk gedoen hierdie tyd gekry.
>> Alle reg, so hoekom is dit al die meer related aan wat gaan aan?
Wel in die eerste, 'n vinnige paar aankondigings.
So een, as jy wil Chang aan te sluit, en Nick, en ander by die middagete hierdie Vrydag,
doen RSVP by die gewone URL daar.
As jy dink van die konsentreer in of doen 'n sekondêre in CS,
of jy 'n stage, of eerstejaars, of selfs junior of senior op hierdie punt
en kan nog steeds druk in die kursusse, besef dat die ingenieurswese skool
word versamel gratis Ben en Jerry se roomys en advies
hierdie Woensdag kort ná die klas by 04:00 in die CS-gebou
by Maxwell Dworkin.
As dit te vinnig op die skerm, net gaan
te cs50.harvard.edu vir 'n skakel na die Facebook gebeurtenis
waar jy kan sien meer besonderhede.
>> Intussen het ek gedink ek sou regstel een ander ding wat ek goofed op Woensdag.
Blyk dat Mark se ID op Facebook was nie drie nie.
Dit was vier.
Blyk hy meer toets rekeninge as wat ek onthou.
Maar wat hierdie gevoel soos 'n geleentheid om te doen, is om te trek 'n URL soos hierdie.
>> So dit blyk dat Facebook het 'n API, Application Programming Interface,
Dit is 'n meganisme waardeur jy kan data programmaties versoek
op Facebook en masjien terug te kry leesbare inligting, nie web bladsye
maar net rou teks, iets genoem JavaScript Object notasie.
En in die feit, as ek na hierdie URL, en Zoom in, by verstek,
dit is Mark se publiek toeganklike inligting.
>> En die interessante detail hier is net dat sy ID
inderdaad, nommer vier, wat ek besef so gou as ek dit gedoen het.
Jy kan dit doen jouself as jy weet Facebook rekening as jy een het.
Tik dit net tot bo daar.
En nie een van hierdie is privaat.
Ek is net om dit te doen, selfs in die incognito af.
So ek is nie eens aangemeld.
En jy sien dat ek was blykbaar gebruikers nommer 6454
op Facebook, wat nie te sleg hierdie dae.
So in elk geval, sal jy ook sien bykomende inligting daar.
>> En die nuttige aspek daarvan is dat jy
kan jou eie sagteware te skryf wat integreer data soos hierdie een of ander manier
in jou eie toepassing.
Jy kan gebruikers te bemagtig teken in jou webwerf,
nie die gebruik van hul eie persoonlike gebruikersnaam en wagwoord nie, maar miskien hul Facebook login
en inligting te kry, selfs oor hul vriende,
indien hulle keur sulke of soortgelyke.
So daarop dat CS50 ook het 'n paar van sy eie API's,
een vir die kursus katalogus data, sommige vir die drukkies spyskaarte in die eetkamer
sale, al die geboue en plekke
op die kampus ons het 'n API vir sowel dat jy ook so kan bevraagteken en kry
terug tekstuele data wat jy kan integreer in 'n PHP, of JavaScript, of selfs,
al minder algemeen, 'n C gebaseer finale projek.
>> Inderdaad voor vir die finale projek is 'n paar mylpale.
Jy het 'n e-pos van ons die ander dag.
Besef dat die voorstel is as gevolg van eerskomende Maandag.
Dit is nie noodwendig bindend, maar jy hoef jou onderrig genote te ontvang
goedkeuring voordat enige veranderinge daarna.
En dan voor 'n aantal ander mylpale.
>> So om jou te terg, te, met 'n paar moontlikhede,
ons het 'n klomp van die hierdie kleur gloeilampe.
En sommige van julle ouens nou 'n paar van hierdie in jou koshuiskamer as well.
En hulle het ook 'n API.
So onthou die binêre bolle weke gelede dat Dan Bradley en Ansel
Duff geskep vir ons.
Hulle gebruik 'n sagteware koppelvlak hierdie gloeilamp, wat op die oomblik
ingeprop in elektrisiteit en dan via draadlose
verbind is tot 'n klein ding genoem die brug af hier,
soos 'n klein router eiendom hierdie spesifieke toestel.
>> Maar dit blyk of ek weet hoe om te stuur HTTP-boodskappe, soos ons almal nou te doen,
Ek kan 'n boodskap stuur soos hierdie hierdie gloeilamp dit op of af te skakel
of enige aantal ander bedrywighede op dit.
Let daarop dat dit nie ons kry, is dit nie plaas.
Daar is 'n ander een wat geroep is beklee.
Daar is eintlik 'n paar ander sulke werkwoorde.
Maar let op daar is 'n pad daar, streep API, streep nuwe ontwikkelaar,
streep lig, streep een, streep staat.
>> Dit is blykbaar net die pad wat die maatskappy Philips,
besluit wat jy hoef te tref met 'n HTTP-versoek
As jy wil hê dat die staat te verander van die gloeilamp met behulp van HTTP 1.1.
Toe sien die leë lyn.
En dan laastens wat lyk soos soort van 'n verskeidenheid van 'n soort,
dit weer gaan genoem word JavaScript Object notasie, of Jason.
En wat jy hier sien, is dat daar is drie sleutel waarde pare.
>> Een van die belangrikste is 'n beroep op.
En die waarde daarvan glo gaan om waar te wees.
Helderheid is 128, wat is 'n soort van int.
En dan oorgang tyd nul, wat blykbaar
hoe lank dit gaan neem hierdie ding om te draai op.
>> So nou hierdie gloeilamp is af.
Maar as ek doen presies this-- laat my gaan 'n bietjie oneerlik blad
dat Dan opgestel in advance-- en ek gaan
om voort te gaan en te kopieer die volgende opdrag.
Krul, soos sommige van julle kan verkry het op CS50
Bespreek is 'n program soos Telnet soos wat jy kan simuleer HTTP versoeke,
spesifiek sit.
Ek kan hierdie data te stuur, spesifiek wat ons nou net
sien 'n oomblik gelede spesifiek hierdie URL hier.
En dan Curl gaan hanteer al die nodige opskrifte
en die ontleding van daar van.
>> So al wat ek hoef te doen is kopieer dit in 'n terminale venster en dan druk Enter.
En die gloeilamp gaan aan.
En dit is al wat gaan deur my rekenaar draadloos
een of ander manier na die brug, wat dan praat hierdie gloeilamp.
Ek kan iets anders doen.
Ek kan hierdie ding maak gaan rooi byvoorbeeld.
Ek kan byvoorbeeld ' hierdie ding gaan groen.
Ek kan dit gaan blou.
>> En let op in elk van hierdie gevalle, al wat ek verander
is die sogenaamde kleur waarde eintlik gee dit 'n bietjie kleur.
So laat my plak hierdie een in sowel.
Nou is dit blou.
>> En jy kan selfs liefhebber doen dinge where-- laat ons gaan na groen.
En ek kan dit van doen Natuurlik met my eie kode.
Maar selfs die API self ondersteun funky bedrywighede
soos hierdie, wat sal nou pla ons vir die volgende 30 sekondes.
>> So dit is een voorsmakie van wat jy dalk doen met 'n API, hierdie een wat
gloeilampe.
Let daarop dat CS50 het 'n paar pare Google Glass As jy wil
iets om saam te pak die lyne, Arduino unos, wat
is klein bietjie rekenaars, wese, op 'n klein kring raad
wat jy kan koppel drade en ander dinge
te en eintlik beheer jou werklike wêreld omgewing.
En dan is daar 'n paar van die nuwe speelgoed wat ons het.
Hierdie een letterlik net aangekom die dag per e-pos, 'n Myo Armband.
En ek het gedink dit is 'n manier om te kry jy opgewonde oor projekte
wat jy kan gebruik met hierdie hardeware sou
wees hierdie kort clip te speel wat hulle gebruik mense om te pla
dat ons nou die lewe in die toekoms.
>> [Speel van musiek]
>> David Malan: So in net 'n paar weke, het jy te kan wees dat koel by die CS50 regverdig.
Nog 'n toestel wat ons 'n klomp van ons is
bly om te leen vir projekte word 'n beweging kontroleerder.
Dit is 'n bietjie USB-toestel jy toegang tot 'n rekenaar wat
laat jou interaksie met jou laptop, Mac of PC,
asof jy het soos 'n Xbox Kinect en eintlik maak fisiese bewegings veel
soos ons sien in hierdie visie van die toekoms.
>> [Speel van musiek]
>> David Malan: So selfs as jy ' geen idee hoe so iets
moontlik uitgevind word of werk op 'n hardeware vlak, maak nie saak.
Selfs na 'n paar maande van CS50, en 'n begrip van die ontwikkeling
meer in die algemeen, en web ontwikkeling meer onlangs, en dan ook API's en HTTP,
jy sal toegang hê via sagteware APIs as jy
wil een van hierdie te leen toestelle te eintlik praat dit
en nie hoef te bekommer oor die onderliggende implementering
besonderhede, wat heeltemal ooreenstemming met hierdie idee van lae
'n abstraksie wat ons het gesien deur die semester.
>> So ook oor die naweek, het 'n paar stukkies van die nuus.
Gaan eers na seminare as jy iets wil leer
meer oor enige aantal onderwerpe.
Sien die URL daar.
En hierdie een is gestuur my deur Chang, wat jy weet,
wie die druk van ons weermag van olifante.
En dit was 'n kop soos volg.
Ek is bang vir my nuwe TV.
Hoekom ek is bang om dit te draai ding op en jy wil te wees.
So ons is nou op die punt in die semester,
Ook waar selfs as jy ' die geringste van begrip
van hoe die web werk, en HTTP, en sekuriteit, dinge soos hierdie
moet begin om jou oog te vang.
Maar ook, sal jy verstaan of hierdie dinge is of nie
werklike bedreigings.
>> Toe het ek 'n paar uittreksels van hierdie artikel hier.
En die storie is soos volg.
Ek is nou die eienaar van 'n nuwe smart TV, wat
beloof streaming te lewer multimedia-inhoud, speletjies, inligting,
sosiale media, en internet blaai, o en TV ook.
Die enigste probleem is dat ek nou bang om dit te gebruik nie, sê die skrywer.
Jy sal ook, as jy deur te lees die 46 page privaatheid beleid vir jou TV.
Die bedrag van data van hierdie ding versamel is verbysterend.
Dit logs waar, wanneer, hoe en vir hoe lank jy die TV.
Dit stel die dop koekies, as ons bespreek het,
en bakens ontwerp op te spoor wanneer jy
beskou spesifieke inhoud of 'n spesifieke e-pos
As jy wil e-pos om te kyk op jou TV.
Dit rekords van die programme wat jy gebruik, die webwerwe wat jy besoek,
en hoe jy interaksie met die inhoud, doen dit alles deur jou smart TV.
Dit is ook, Creepier yet-- dit is my addition--
het 'n ingeboude in die kamera met gesig erkenning.
>> Die doel is om voorsiening te gebaar beheer vir die TV
en in staat stel om aan te meld by persoonlike rekening met jou gesig.
Aan die positiewe kant, die beelde gestoor word op die TV in plaas van die foto's
'n korporatiewe bediener.
Aan die negatiewe kant, die internet verband maak die hele TV
kwesbaar vir hackers wat het getoon die vermoë
volle beheer van die masjien te neem.
>> Meer verneder, asof dit was nie slim genoeg, is die mikrofoon.
Die TV spog met 'n stem funksie erkenning
waarmee kykers te beheer die skerm met die stem bevele.
Maar die diens kom met 'n taamlik onheilspellende waarskuwing.
Wees asseblief bewus daarvan dat indien jou gesproke woorde insluit
persoonlike of ander sensitiewe inligting, wat inligting
sal wees onder die data vasgevang en aan 'n derde party.
Het dit?
Moenie persoonlike of sensitiewe sê dinge in die voorkant van jou TV.
>> So dit is eintlik vir die ware.
En dit is moeilik om nie te sien as jy gaan na Best Buy of die wil vir TV
hierdie dae.
Hulle is almal slim in een of ander manier.
En hulle kry slimmer en Creepier.
En hulle is eenvoudig die versameling van data op maniere wat ons gepraat het oor
en dan oplaai via HTTP of 'n ander protokol sommige bediener.
>> So dit was 'n lekker artikel in hierdie aanlyn-webwerf
hier, wat gepraat het oor 'n spesifieke fout of verkeerde kode
dat ons eintlik kan bind in verlede week se bespreking.
So hierdie kop was as volg die storie gaan hier,
Josh Breckman gewerk vir 'n maatskappy wat 'n kontrak geland
'n content management te ontwikkel stelsel, of CMS as hulle geroep het,
vir 'n redelike groot regering webwerf.
Baie van die betrokke projek ontwikkeling van 'n content management system
sodat werknemers sou wees staat om te bou en in stand te hou
die steeds veranderende inhoud vir hul webwerf.
Dinge het baie goed vir 'n Paar dae na gaan live.
Maar op die dag ses, dinge so goed gegaan het nie.
Al die inhoud van die webwerf het heeltemal verdwyn.
En al die bladsye het gelei tot die standaard, Tik inhoud webblad.
Oeps.
Josh is ingeroep om ondersoek en opgemerk
dat 'n mens besonder lastig eksterne IP-adres het
gegaan in en verwyder al Die inhoud van die stelsel.
>> Die IP adres het nie behoort sommige oorsese hacker gebuig
oor die vernietiging van nuttige regering inligting.
Dit besluit om googlebot.com, Google se eie web kruip spin.
Oeps.
Na 'n bietjie van navorsing en die skommeling rondom 'n noncorrupt Friends te vind,
Josh het gevind dat die probleem.
>> 'N gebruiker het kopieer en geplak inhoud van een
na 'n ander, insluitend 'n wysig Hyperlink
Die inhoud van die bladsy te wysig.
Normaalweg sou dit nie wees om 'n kwessie, aangesien 'n buite gebruiker sou
'n naam en wagwoord in te voer, maar die CMS verifikasie stelsel,
die aanmelding stelsel, het nie in ag neem
gesofistikeerde inbraak tegnieke van Google Spider.
Oeps.
>> Soos dit blyk, Google Spider gebruik nie
koekies, wat beteken dat dit kan maklik omseil 'n tjek vir die
is aangeteken op koekie stel vals is.
Dit is ook nie aandag te gee aan JavaScript, wat normaalweg
vinnige en lei gebruikers wat nie aangemeld is nie.
Dit beteken egter volg elke skakel op elke bladsy vind dit,
insluitend diegene wat met Verwyder Page in die titel.
Oeps.
>> So wat beteken dit in meer tegniese, maar redelik toeganklik terme?
Dit beteken net dat regdeur hul webwerf,
hulle het URLs nie in teenstelling met die een wat jy kan sien in die probleem stel sewe.
Onthou in die probleem stel sewe of weet probleem die sewe
wat jy uitgedaag, onder andere,
aandele namens gebruikers te verkoop.
Maar die uitvoering van die funksie by wyse van kry via skakels in jou gebruiker
koppelvlak, waarskynlik nie die slimste idee
want as jou site is een of ander manier toeganklik óf deur 'n mens
wie om te klik of koop 'n bot soos Google of 'n Spider
as hulle genoem dat net kruip die web probeer indeks
die web as 'n soektog, hulle kon baie maklik
getref deur hierdie soort van URL.
En dit is funksioneel gelykstaande aan, in hierdie geval,
verkoop van alle aandele van Google.
>> Nou eerlik, dit is heeltemal asinine dat die CMS
gebruik JavaScript en koekies sy aanmelding stelsel te implementeer
en nie doen wat die bediener kant, as julle doen en ook sal in PSet 7--
daar is 'n login.php file-- altyd, altyd,
altyd sekuriteit moet wees gedoen op die bediener kant,
nie op die kliënt se kant, want as dit artikel stel en jy kan jouself
sien op 'n sekere punt, is dit triviaal vir 'n gebruiker, goed of sleg,
om net af JavaScript nie koekies te noem.
So dit is jou daaglikse WTF.
>> Daar is nog een, wat is net 'n soort van scary,
so ek sal noem dit as slegs as 'n lewe les.
Wanneer jy 'n aansoek gebruik genoem soos Snapchat of die soos
wat sê hierdie foto's slegs vir vyf sekondes, tien sekondes, of iets anders.
Hulle is kortstondig Dit is absoluut nie die geval nie.
Soos daar is geen manier, digitaal, 'n vorm van video te implementeer,
of beeld of teks deel soos dat 'n ontvanger aan die ander kant
kan nie een of ander manier red die data.
>> In die mees naïewe manier, iemand kon sy selfoon neem.
En hulle het 'n 10 sekonde venster terwyl op soek na 'n paar snap
om net te neem 'n paar ander selfoon en foto dit, natuurlik.
Sodat jy kan bewaar iets digitaal dat die pad.
Sommige van julle weet hoe om te neem screenshots op jou selfoon.
In werklikheid, as jy dit nie weet nie, besef dat ten minste Snapchat,
en ek dink ander aansoeke om hierdie dae,
ten minste jou vertel as die ontvanger het eintlik
geneem om 'n kiekie van jou beeld.
>> Maar erger nog, dit was die snappening, as iemand dit geskep het onlangs,
waar sommige 100,000 breek vrygelaat
in wat genoem word 'n stortvloed lêer op verskeie webwerwe uiteindelik.
En dit bevat 'n hele klomp van private boodskappe en boodskappe.
Dit blyk uit die meeste van hulle goed, so nie wat jy kan verwag.
Maar omdat die mense gehad het gebruik om 'n derde party webwerf,
teken met hul Snapchat gebruikersnaam en wagwoord en dan
spaar al hul breek op die derde party webwerf.
En dit was die derde party webwerf wat gekap is,
wat net bedoel om iemand uitgepluis het hoe al 100,000 plus van die beelde te kry
in hul eie hardeskyf vir die daaropvolgende deel.
Eerlik, ook hier, dit is soort van asinine dat Snapchat
is in so 'n wyse geïmplementeer wat 'n derde party kan sorteer van onderskep
die data en dat dit nie gekoppel is aan jou eie toepassing wat uitgevoer word op die telefoon.
Maar ook hier, besef dat hierdie dinge moet nie verrassend,
of ten minste moet daar wees om 'n lewe les hier.
As jy wil die tegniese besonderhede, gaan na hierdie URL is daar
dit is in vandag se skyfies.
Alle reg, enige vrae oor vandag se lewe lesse in CS?
Draai dit af.
Enigiets?
Ek het 'n klomp mense te keur hul Snapchat of iets nou.
>> Alle reg, sodat SQL, Structured Query Language.
Kom ons draai hierdie.
En ook, selfs al ons net krap
die oppervlak van hierdie taal, sal ons gee jou
genoeg van die taal in die vorm van PSet 7
sodat jy kan 'n paar te pak redelik algemene funksies.
Maar besef daar is 'n paar dinge wat ons nie van julle nie,
maar hulle gaan wees belangrik kom finale projekte
en sekerlik kom maak werklike webwerwe met werklike gebruikers
is hierdie ontwerp besluit.
>> Dit blyk dat in 'n MySQL databasis, jy
het trosse van keuses soos die data tipes vir jou kolomme
en ander dinge, maar jy moet ook Die keuse van 'n sogenaamde stoor
enjin vir al jou data, die soort van lêer stelsel,
As jy vertroud is, vir al jou data.
Watter formaat is dit uiteindelik gestoor in?
En die mees algemene, miskien, is MyiSAM en InnoDB, tegniese terme
dat ons net sal omgee tot die mate dat 'n mens
en een het nie die volgende funksie.
>> Veronderstel dat jy 'n bietjie dorm yskas.
En veronderstel dat jy en jou kamermaat, wat hierdie yskas deel,
is regtig lief sê melk.
En dit is, in werklikheid, hoe die storie pad terug aan my vertel
in die dag wanneer Ek het 'n kursus genoem CS 161 Bedryfstelsels, wat
insgelyks ondersoek hierdie onderwerp.
So jy het die yskas.
Jy is uit die melk.
En jy by die huis kom, jou kamermaat se nog op die klas of wat ook al,
en jy besluit ek gaan gaan uit en kry 'n paar melk.
So jy naby die yskas, toesluit die koshuiskamer, gaan oorkant die straat
te CVS of waar ook al, en kry in lyn melk te koop.
>> Intussen het jou kamermaat by die huis uit die klas, kry in die koshuiskamer,
maak die yskas, ook besef ooph, ons is uit melk.
Sodat hy of sy sluit die yskas en dan gebeur
om te gaan na die ander CVS, wat gebeur om te wees
een blok weg van die ander CVS in die vierkante, en kry in lyn
daar 'n paar melk te kry.
Nou, natuurlik, 'n paar minute later, julle albei terug te kry,
en die ergste van alle moontlike uitkomste gebeur het.
Beide van julle het melk.
En jy nie regtig soos melk wat veel.
So een van hulle is net gaan versuur op 'n sekere punt.
So nou het jy 'n oormatige hoeveelheid melk in die yskas omdat hoekom?
>> [Onhoorbaar]
David Malan: Ja, jy het nie een of ander manier met mekaar kommunikeer
dat jy besig was om melk.
So in die eenvoudigste maniere in die menslike wêreld,
Hoe kan jy verhoed dat hierdie simpel scenario gebeur soos
dat jy net eindig met een.
Teks om dit, ja goed.
Maar hoe anders?
Post-it notas.
David Malan: 'n Post-it nota.
Enige vorm van kommunikasie wat vertel jou kamermaat
gaan nie in die yskas vir melk.
Ek gaan om te gaan vaccin op my eie.
So jy een of ander manier moet hierdie hulpbron te sluit.
Sodat ons kan maak this-- ons kan soort ruïneer die storie en verander in 'n CS storie
waardeur dink van hierdie as net soos 'n veranderlike, wat die stoor van waarde.
En nou, die waarde van melk is nul,
wat jy nie wil hê om jou kamermaat daardie veranderlike te inspekteer
en dan 'n besluit neem om hom of haarself gebaseer op die toestand van daardie veranderlike
As jy in die proses van die verandering van die toestand van daardie veranderlike.
>> So een van die lyne van SQL dat ons gee jou in PSet 7 spesifikasie
is hierdie een hier.
En ons spandeer nie 'n groot bedrag van die tyd om daaroor te praat.
Maar dit blyk, as jy probeer sommige voorraad te koop in CS50 Finansies
dat jy reeds sommige aandele van u
wil in staat wees om 'n nommer te doen van die dinge wat dadelik saam.
Jy wil in staat wees om effektief, op 'n hoë vlak,
check alles reg, as ek wil meer aandele van Free te koop,
die pennie voorraad ons praat oor in die spec,
Ek wil eerste tjek hoeveel aandele ek het.
En dink dit is vyf.
En dink ek wil koop 10 meer, ek uiteindelik
wil 15 aandele van voorraad te hê.
So ek het twee vrae te vra.
Wat is die toestand van die veranderlike?
Wat is die toestand van die ry?
Hoeveel aandele het ek op die oomblik?
Dan moet jy wil om voort te gaan en werk dit.
So wat is die analoog aan die melk in dat u die ry,
en dan moet jy wil hê om dit op te dateer want as jy wil 10 aandele te koop,
jy nie wil hê om te verander die ry tot 10, kan jy
wil dit verander na 5 plus 10 of, natuurlik, 15.
>> Hierdie lyn van die kode te verseker dat die twee konseptuele idees
gebeur saam of glad nie.
Niemand, insluitend 'n paar ander gebruiker wie aangeteken in die dieselfde webblad,
kan een of ander manier onderbreek die nagaan van die ry
en die opdatering van die ry, die kies en die werk as jy wil.
En die sintaksis is nie super duidelik, maar hierdie een lyn, lank is dit is,
verseker dat die twee operasies Gaan die veranderlike of check die ry
en werk die ry gebeur atomies.
>> Ag hier gaan ons weer.
SMS-boodskap op my selfoon.
So kom ons maak dit 'n bietjie meer beton.
Veronderstel dat jy nie implementering van 'n yskas,
en jy nie die implementering PSet 7 maar 'n werklike bank,
of 'n OTM, 'n outomatiese teller Masjien, waardeur jy een of ander manier
wil in staat wees om te bemagtig gebruikers geld oor te dra
van een rekening na 'n ander.
OK, hang.
Ek gaan dit nou stom, dankie.
So wil ons geld te beweeg van een rekening nommer
in 'n ander rekening nommer, spesifiek $ 100.
So dit is soort van 'n arbitrêre Byvoorbeeld, waarop jy die OTM,
dalk wil twee SQL te voer navrae, trek van een rekening,
en voeg by die ander rekening.
Maar jy wil om te verseker dat hierdie twee lyne beide gebeur, of glad nie.
Jy iets nie wil nie om onderbreek.
Jy doen nie 'n paar slim slegte man een of ander manier staan ​​by die Bank van Amerika
met twee kitsbanke in die voorkant van hom en een of ander manier
soort van tik in die beveel op dieselfde tyd,
hopelik probeer $ 200 in plaas af te trek van $ 100 en slegs met $ 100 gekrediteer.
In kort, jy wil om dit te optree presies soos jy verwag.
>> En die manier wat jy doen hierdie in SQL databasis
jy draai in wat bekend as 'n transaksie.
Letterlik in SQL, kan jy bel CS50 se navraag funksie met quote unquote begin
transaksie.
Dan kan jy enige aantal voer daaropvolgende SQL navrae,
maar nie een van hulle te neem bring op die databasis
totdat jy noem navraag quote unquote pleeg, as weer met behulp van PHP.
En op hierdie wyse kan u verseker dat selfs as jy het 1000 gebruikers
slaan jou databasis op dieselfde tyd, SQL
belowe dat hierdie twee navrae sal wees
geïmplementeer een reg na die ander.
Sodat jy nie eindig met 'n oormaat van melk of die verkeerde bedrag, uiteindelik,
geld.
>> So hou dit in gedagte, nie soseer vir PSet 7
maar vir die finale projekte as jy eintlik
probeer data om rond te beweeg oor tafels as jy dalk hier.
Maar selfs eenvoudiger en meer voor die hand liggend om te verstaan ​​met 'n voorbeeld
is hierdie een hier.
En iemand per e-pos ons oor dit net die ander dag
toe hy sien iets soortgelyks aanlyn.
>> So na my wete, die pen stelsel is nie kwesbaar vir hierdie aanval.
En ek het geen idee of dit selfs gebruike die SQL databasis onder die kap.
Maar laat ons dit gebruik vir ter wille van die bespreking.
Hier is die skerm wat Harvard mense geneig
om te sien wanneer te teken met hul Harvard ID-nommer en hul pen.
En veronderstel dat die pen stelsel was in PHP en met 'n MySQL geïmplementeer
databasis, die kode dat iemand kan geskryf het jare gelede
mag lyk.
Eerstens, verklaar 'n veranderlike genoem rekening.
En net kry wat uit die NA superglobal.
Dan kry 'n ander veranderlike genoem wagwoord en dieselfde doen.
En dan net uit te voer hierdie lang navraag hier
Kies ster van die gebruikers waar gebruikersnaam gelyk aan sulke
wagwoord gelyk aan sulke.
>> Let daarop dat die krullerige draadjies wat ek hier gebruik
net beteken om PHP, gaan voor en plaasvervanger
die waarde van die twee veranderlikes reg daar.
Hulle is nie streng noodsaaklik is, maar hulle is geneig om subtiele sintaksfoute te vermy.
So dit lyk heeltemal korrekte met die eerste oogopslag.
En dit is.
Jy kan implementeer om die pen stelsel in hierdie manier.
>> Maar veronderstel dat 'n super slim en kwaadwillige student
insette dit as sy of haar pen.
So ek het die koeël verwyder tekens hier in die spot het,
en ek het eintlik aan die lig gebring wat hy of sy tik kan wees.
En dit is 'n bietjie vreemd.
Maar wat spring uit by jou op potensieel kommerwekkende oor die gebruiker se insette,
selfs as jy het geen idee wat 'n SQL-inspuiting aanval beteken.
Waarom het hierdie kyk 'n bietjie fishy?
Wat is dit?
[Onhoorbaar]
David Malan: Die of 'n bietjie verdag.
In werklikheid, dit is 'n navraag van SQL.
Sodat voorspel niks goeds.
Die feit dat daar al hierdie enkele aanhalings
there-- in werklikheid, een van die maklikste maniere sommige databasisse te breek
is deur te tik in 'n naam soos O'Reilly wat 'n toespraak in dit
want as die mens wat geskryf die kode agter die skerms
nie in ag neem dat daar dalk enkele aanhalings in 'n gebruiker se
insette, en hy of sy gebruik enkele aanhalings in hulle kode,
slegte dinge kan gebeur.
>> In werklikheid, erger nog, oorweeg dit.
As dit was weer die kode dat iemand by Harvard jaar
gelede geskryf het vir die pen stelsel, let op wat is
oor te vervang raak vir gebruikersnaam en wagwoord
As die gebruiker weer skroob as hul gebruikersnaam
en dan een, twee, drie, vier, vyf, kwotasie of kwotasie unquote een gelykes
Haal EEN.
En sien wat is die sleutel hier is die gebruiker het nie
begin om hul wagwoord of hul pen met 'n kwotasie.
En hulle het nie geëindig dit met 'n aanhaling omdat hy of sy
is die veronderstelling dat indien die programmeerder was nie so skerp,
hulle gaan diegene te hê enkele aanhalings in hulle kode.
>> So hier is die kode.
En die vervanging van die nou kan gebeur, is hierdie.
En ek het onderstreep wat die gebruiker getik.
So voor, na.
En sien wat is effens kommerwekkend nou oor die regter helfte van die SQL-kode?
Dit is 'n bietjie meer kompleks, weliswaar, as die navrae wat ons gesien het.
Maar dit kan nie moontlik 'n goeie ding as jy
sê kies ster, wat kies alles van die gebruiker se tafel
waar gebruikersnaam gelyk skroob en wagwoord is gelyk aan een, twee, drie, vier,
vyf of een is gelyk aan een.
Wat is die logiese implikasie van daardie laaste klousule vermoedelik?
Dis net altyd waar nie.
>> En omdat ons soort raai of uitgepluis deur trial en error
dat die programmeerder wat het hierdie kode het nie
verwag 'n mens of slegte persoon tik in aanhalingstekens so goed,
ons kan sintakties voltooi die SQL navraag
met iets nonsens maar iets wat
is sintakties korrek wat altyd evalueer waar.
So as hierdie kode gebruik word, te beantwoord Die vraag waar of vals moet
hierdie gebruiker toegelaat word om die te slaag antwoord is altyd blykbaar gaan
om waar te wees, want dit is altyd iets iets uit die databasis te kies
want 'n mens natuurlik altyd gelyk is een.
>> So, wat is die oplossing?
Wel in PSet 7, het ons eintlik vermy alles saam.
Ons gee jou 'n navraag funksie, en ons moedig jou vraagtekens te gebruik
as plekhouers, soortgelyk in die gees te printf se% s,
maar wat is die sleutel van die vraagtekens hier is as jy eintlik lees
functions.php, waar ons navraag funksie geïmplementeer word,
diegene vraagtekens is ontsnap, waardeur iets potensieel gevaarlike
soos 'n enkele aanhaling is aangeskakel in 'n enkele aanhaling ontsnap.
>> So dit is wat werklik gebeur as jy
gebruik CS50 se navraag funksie of enige aantal van die derde party gratis biblioteke wat
doen dieselfde.
Maak nie saak nie in hierdie geval, in die groen, indien die gebruiker in 'n enkele aanhaling getik
omdat die navraag funksie wat ons geskryf is
gaan skuinsstrepe te voeg voor enige sodanige gevaarlike kwotasie.
So dit is nie, in Trouens, gaan wettig wees.
Dit is soos tik in 'n gek soek wagwoord wat is, natuurlik, gaan nie
skroob se werklike wagwoord te wees.
>> So het die afhaal vir CS50 is een, absoluut altyd iets gebruik
soos CS50 se navraag funksie of die onderliggende biblioteek,
wat gebeur genoem te word BOB.
Maar nooit, nooit, nooit-kode doen soos hierdie
sonder ontsnap of skrop soos hulle sê jou insette.
En jy sal op 'n stadium waarskynlik kom oor 'n paar webwerf soos hierdie.
Trouens, dit blyk die geval te wees soos by lughawens en hotelle in plekke
waar hulle gratis Wi-Fi toegang wat jy hoef te meld by,
hierdie webtuistes is altyd verskriklik geïmplementeer.
En so 'n soort van pret by die huis oefening, nie vir kwaadwillige doeleindes of meer
'n pret op die pad oefening, is om te tik
'n toespraak, 'n enkele aanhaling, in 'n vorm op 'n webwerf
en kyk wat gebeur.
En as die bediener ineenstortings of gee jy 'n soort van fout boodskap,
Dit kan baie goed wees dat iemand het nie verwag dit.
En dan moet jy waarsku die behoorlike owerhede en gaan nie verder nie.
>> So nou Julle moet hopelik hier verstaan ​​'n bietjie meer geek humor.
>> [Gelag]
David Malan: Jy weet jy is 'n geek.
Vir die volgende paar jaar, sal jy onthou
wat min Bobby tabelle As gevolg van hierdie spotprent hier.
So hou dit in gedagte as ons konteks skakelaar 'n laaste keer
vandag JavaScript.
Ons het relatief min bestee tyd op die sintaks van PHP
want dit is eintlik super soortgelyk aan C.
En mooi genoeg, JavaScript te super soortgelyk aan C se sintaksis
so goed soos ons sal sien in net 'n oomblik en as ons sal
sien later vandeesweek in die besonder.
Wat jy kan doen met hierdie taal, al is, is al hoe meer kragtige,
veral met die API's.
>> Maar eers 'n vinnige toer.
So een, in JavaScript, daar is geen hoof funksie, wat is lekker.
Soos met PHP, kan jy net skryf kode.
Toestande lyk.
En Boolse uitdrukkings mag lyk dit of soos hierdie.
Skakelaars bestaan ​​nie, en hulle mag lyk.
Vier sirkelroetes lyk.
Terwyl sirkelroetes lyk.
Doen genot lyk.
En dan skikkings lyk hierdie, baie soortgelyk aan PHP.
Maar let dat in JavaScript jy verklaar 'n veranderlike nie met 'n dollar
teken nie met 'n data tipe, maar letterlik deur te sê var vir veranderlike voor dit.
Dit word ook losweg getik in dat dit tipes,
maar jy uitdruklik verklaar hulle nie.
En dan 'n string, vir Byvoorbeeld, kan kyk
soos hierdie, wat string geroep is in hierdie geval.
En dan 'n voorwerp.
En dit sal ons sien meer voor lank.
En 'n voorwerp is dalk een van die mees algemeen gesien data strukture
in 'n JavaScript gebaseer program, want dit kan
om jou te assosieer arbitrêre sleutel waarde pare net
soos PHP se assosiatiewe skikkings en net soos jou eie hash tafel
of probeer as ons ' 'n paar weke terug.
So laat ons eintlik sien wat ons kan doen met JavaScript.
En in die besonder, is dit 'n wassery lys van eienskappe
dat blaaiers het dat toelaat dat ons JavaScript te haak
in 'n webwerf in die volgende manier.
JavaScript word dikwels gebruik as 'n kliënt kant script taal.
Dit is nie saamgestel.
Dit is ook vertolk word.
Maar in teenstelling met PHP, wat nou al op die bediener, in die web-bediener,
of diep binnekant van die kliënte, JavaScript
is anders in dat dit gewoonlik loop in die leser.
>> So 'n JavaScript-kode wat jy begin skryf vir PSet 8, of jou finale projek
of in die werklike wêreld is oor die algemeen gaan om gered te word op die bediener, absoluut
in 'n dot HTML of dot JS vir JavaScript-lêer.
Maar die leser gaan om af te laai wat JavaScript
kode na jou eie voorbeeld van Chrome, of Internet Explorer, of Firefox, of wat ook al.
En die kode is eintlik die gang te kry uitgevoer binnekant van jou eie leser.
Net hierdie meer werklik te maak, laat ons sien dit in konkrete vorm.
>> Ons het geen idee wat hierdie kode nie sonder om werklik deur te lees nie.
Maar laat my gaan na Facebook.com sonder meld.
Laat my gaan Element te inspekteer en gaan na, kom ons sê, Network en die bladsy te herlaai.
En ons sal see-- laat my skuif herlaai die Page al die versoeke vir nuwe te kry.
En die heel eerste lêer wat ek sien is CSS, CSS.
Hier is die eerste JavaScript-lêer, en ek het
geen idee wat dit doen nie, maar hier is 'n paar van die JavaScript-kode
wat dryf Facebook.
Dit is nie eens regtig dat openbaar om te vergroot.
Dit is nog steeds net so nonsens.
>> Maar jy sal nog daar onder sien, is daar selfs meer van hierdie JavaScript-lêers.
Oeps.
Dit is 'n ping.
Kom ons gaan af 'n bietjie verder, verder, verder.
Daar is een.
>> So selfs al is Facebook, agter die tonele, is gedeeltelik in PHP geskryf
en Facebook se eie weergawe daarvan, daar is 'n groot hoeveelheid van die JavaScript.
Trouens, enige van die gesels wat jy doen op Facebook,
enige van die inline tydlyn updates dit gebeur in real time, al wat
word aangedryf deur JavaScript.
Ja?
>> Publiek: Ek is nie seker As dit is Facebook,
maar ek het gedink dat Facebook ontwikkel hul eie in-huis-kode taal?
David Malan: Hulle het.
So dit is hoekom ek sê dat 'n afwyking van PHP genoem Hip Hop dat hulle eintlik
meer funksies te sodanig dat wanneer Mark eerste geïmplementeer Facebook,
dit is in PHP geskryf is.
En dat die soort van het gebly die soort voorkant taal
wat hulle gebruik vir veel van hul kodering, maar dit
is nie 'n taal wat skale besonder goed miljarde
mense.
En so het hulle hul eie bygevoeg verbeterings agter die skerms.
En hulle gebruik 'n aantal van ander tale
vir verskeie stukke hul infrastruktuur.
So ja, dit is 'n afwyking van wat ons nou ken as PHP.
>> So laat ons neem 'n blik by 'n paar voorbeelde
hoe kan ons JavaScript hier gebruik.
In vandag se bron-kode, ons het 'n n klomp van die lêers, waarvan die eerste,
laat ons genoem DOM nul.
So DOM nul lyk soos volg.
Laat my gaan in hierdie gids en maak domzero.html,
die top van wat 'n doc tipe verklaring gesê hier kom HTML 5.
En nou hier is 'n HTML tag.
Hier is die hoof tag.
En hier is wat nuut is vandag.
>> Ons het nou 'n script tag binnekant van die hoof van die bladsy.
En dit blykbaar nie baie min, maar kennisgewing
wat ek gedefinieer n script, 'n JavaScript.
En as 'n eenkant, aangesien dit is 'n algemene wanopvatting,
JavaScript het absoluut niks te doen met Java, die taal
dat sommige van julle dalk het in APCS geleer.
Dit was meer van 'n bemarking ding as enigiets,
ry die coattails Java jaar gelede.
Maar JavaScript, niks te doen met Java, net so, en so lastig,
verwarrend naam.
>> So hier is hoe jy 'n funksie te verklaar in JavaScript, letterlik sê funksie,
dan is die naam van die funksie, dan is enige argumente dit kon neem,
net soos in PHP.
Blyk in JavaScript, een van die mees irriterende funksies wat bestaan ​​is Alert.
Dit is 'n klein venster wat sal pop-up en jy waarsku
om 'n stuk van inligting.
Dit is oor die algemeen afgekeur.
Maar ons sal dit gebruik as ons eerste oefening hier.
>> Let 'n paar kenmerke van JavaScript.
Enkele aanhalings en dubbel aanhalings nie eintlik saak nie.
Enkele aanhalings en dubbel aanhalings kan omgeruil word,
terwyl dit in C, jy het om te gebruik dubbel aanhalings vir Strykers,
en jy het twee enkel kwotasies vir karakters.
In die JavaScript wêreld, baie mense, die meeste mense
Gebruik aanhalingstekens rondom snare net omdat dit 'n stilistiese ding.
Maar wat is die plus operateur hier wat ons nie gesien het nie voor?
>> Publiek: concatenatie.
David Malan: concatenatie.
So C het nie eens hierdie.
PHP het die dot-operateur, wat dit doen.
JavaScript het die plus-operateur, wat verwarrend is net soos Java.
Nou wat gaan hier aan?
>> So hier is waar 'n basiese begrip van die foto
Ons gooi 'n paar dae gelede kom in die spel.
Onthou wanneer ons 'n eenvoudige weergawe van 'n HTML page--
dit het net gesê, hello wêreld.
En dan het ons 'n boom het aan die regterkant, wat
het 'n klomp van die reghoeke en lyne verbind hulle soos 'n stamboom.
So wat is die sogenaamde DOM of Document Object Model.
En dit blyk dat jy kan toegang reghoeke in die boom met sintaksis
soos die volgende.
Jy sê letterlik dokument, wat 'n spesiale globale veranderlike in 'n JavaScript
program wat 'n funksie wat verband hou met dit wat jy kan toegang
soortgelyk aan 'n struct, maar jy eenvoudig sê dot en dan die funksie se naam,
kry element deur ID.
>> Die element wat ek wil kry, is blykbaar haal unquote naam.
En dan wil ek die waarde daarvan te kry.
Nou kan ons onsself voor om.
Ek is nie eens seker wat dit alles is oor.
Kom ons vinnig uit na die HTML op die bladsy, wat is super eenvoudig.
>> Kennis dat ek gedefinieer 'n vorm hier.
KENNISGEWING Ek het dit gegee om 'n unieke ID, selfs al het ons nie gebruik
hierdie kenmerk nie.
Maar dit bestaan ​​in HTML.
Jy kan uniek paar stuk identifiseer van HTML met 'n identifikasie soos hierdie.
>> Kennis nou this-- blyk HTML ondersteun, per dat wasgoed lys
'n oomblik gelede, 'n hele n klomp van die event handlers.
En hierdie gebeurtenis hanteerder sê op dien.
Op die gebruiker voorlegging van hierdie vorm, bel die volgende kode.
En die kode wat gaan genoem word of uitgevoer word
is presies dit, die Griekse funksie gevolg deur terugkeer vals.
Alles anders moet redelik bekend is.
>> Hier is 'n invoer van die tipe teks, wie se ID, in hierdie geval, gaan die naam wees.
Ons het nie 'n werklike naam kenmerk nie hierdie time-- en 'n stuur-knoppie.
So die bladsy lyk.
En die gevolglike gedrag, Jy sal sien, lyk soos volg.
Die bladsy is dit die plaaslike gasheer sê, hello David, skaars 'n mooi,
manier om 'n gebruiker te groet.
Maar wat eintlik aan die gang?
>> Wel, kyk wat dit is.
Dit is 'n teks veld.
En volgens die HTML hier, het ek dit gegee om
'n unieke identifikasie genoem quote unquote naam.
Intussen, het ek gesê toe die gebruiker tik hierdie vorm
deur slaan Tik of klik op die Stuur knoppie, skakel die funksie genoem Groet
en dan terug Vals.
Kom ons kyk na wat in trurat.
Sien wanneer ek klik op stuur, die URL van die bladsy verander nie.
Ikoon om die leser se het nie begin draai.
Ek het nie iewers heen te gaan, en dit is letterlik, want ek het gesê terugkeer Vals.
Terug Vals kortsluitings of stop die verstek gedrag van 'n vorm.
Sodat dan laat ons met hierdie een laaste vraag.
Wat beteken Groet doen?
Wel, Groet glo noem 'n funksie genoem
Alert, gaan in een lang argument wat
die gevolg van concatenating saam om 'n n klomp van die substrings, hello komma ruimte,
dan wat hierdie terugkeer.
So dokument is soos 'n globale veranderlike wat die wortel van die boom,
roep 'n spesiale funksie, anders nou bekend as 'n metode.
'N funksie wat binnekant van 'n veranderlike is
bekend as 'n metode in plaas van 'n funksie.
>> So kry element deur ID.
Wat element doen jy wil te kry deur sy ID?
Haal unquote naam en dan spesifiek waardeer.
So met ander woorde, wat die kode eenvoudig bevind dat die teks veld wie ID is die naam
en dan kry sy waarde.
So as ek dit te verander en sê Davin plaas van Dawid,
en klik op stuur, nou is ons 'n groet vir Davin.
>> Alle reg, sodat alles goed en wel.
Maar laat ons kyk of ons kan maak dit 'n bietjie skoner aangesien net
kode skryf soos dit is algemeen gaan frons word op.
Dit gaan lyk vreesaanjaend.
Maar wat is die eerste verskil wat jy hier kennis
in hierdie weergawe, behalwe die naam verander in DOM een?
Wat struktureel anders lyk oor hierdie teenoor die ander?
Ja?
Publiek: Is die vorm op top van die script nou?
David Malan: Ja, die vorm is op die top van die script vir 'n paar snaakse rede.
So wat is die eerste ding wat wat spring uit by my ook.
En gelukkig ten minste, hierdie deel is identies.
Dus is die enigste ding wat lyk om anders te wees is dit.
>> So hier is wat netjies oor JavaScript 2.
En dit maak dit moeilik om te verstaan ​​met die eerste oogopslag,
veral vir finale projekte indien jy kyk na voorbeeld kode online,
maar dit kom neer op 'n paar basiese sintaktiese funksies.
Hier is weer eens dat globale veranderlike dokument.
Hier is weer daardie metode of funksie wat sê jy die element deur ID.
Hierdie keer het ek wil kry die ID genoem demo.
Waar is dit?
Dit is blykbaar reg Hier is die vorm self.
>> En nou sien dat glo as ek terug te kry wat knoop van die boom wat
verteenwoordig die vorm self, nie 'n teks veld,
dit blyk dat vorm, wat knoop of reghoek van die boom,
het wat ons sal 'n eiendom noem, baie, baie, baie soortgelyk
in die gees van 'n struct in C. Dis net 'n lid data binnekant van die reghoek.
>> So ek het die vorm hier, en ek heg,
of ek toeken, sy op submit hanteerder of eerder op Stuur eiendom
die volgende funksie.
En dit is by verre die gekste ding tot dusver sintakties.
Dit blyk in JavaScript en in PHP, en eerlik vir die saak in C,
selfs al het ons dit nie doen nie, kan jy voeg naamlose, anonieme, of AKA lambda
funksies wat nie 'n naam maar kan tog genoem word.
>> So wat ek hier doen, is ek toeken hierdie On Stuur eiendom, wat
is die binnekant van die node van my DOM boom, 'n funksie, funksie wyser as jy wil.
Dit funksie het geen noem, maar dit beteken nie
saak nie, want ons sal sien in 'n oomblik hoe om dit te noem.
Wanneer hierdie funksie geroep word, hierdie kode sal uitgevoer word, dan
valse teruggestuur, net soos voorheen.
>> Maar let op wat ek gedoen het.
Op hierdie punt in die storie, ek het 'n vorm.
Dit het 'n unieke ID genoem demo.
Hier het ek 'n script tag wat voer die volgende kode.
Dit heg aan daardie knoop in die boom is dit op submit
eiendom om hierdie funksie hier.
En net uit die aard van hoe blaaiers werk, toe ek kliek nou dien of druk Enter,
daardie funksie gaan genoem te raak.
Dit maak nie 'n naam, want wat dit nodig het die klink omgee wat dit genoem.
Die enigste keer dat dit ooit gaan kry genoem is toe ek stuur die vorm.
Daar is geen rede vir my, die menslike ontwikkelaar,
eintlik noem dit elders.
>> Nou net as 'n teaser, asof dit nie omgee buig genoeg,
Ons kan selfs maak hierdie lyk meer kriptiese behulp
'n super gewilde biblioteek genoem jQuery.
In werklikheid jQuery en JavaScript dikwels conflated.
En wat ons gaan doen op Woensdag is begin die gebruik van hierdie taal en die biblioteke
toenemend asynchrone te bou en dinamiese programme
soos kaart kry aansoeke, aansoeke
dat die webblad in die werklike werk tyd, baie soos Facebook of Gchat
doen, en nie meer beperk om onsself te slaan Stuur 'n get of net post
alleen.
So ek sal jy sien op Woensdag.
>> [Speel van musiek]