>> [Muziek]
>> DAVID MALAN: Dit is CS 50, en Dit is het begin van week negen.
En wat we dachten dat we vandaag zouden doen is niet alleen het hoofdstuk over de vorige week sluiten
materiaal waar we ons gericht op server side web programmeren met PHP en SQL,
een database stuff.
We praten een beetje veiligheid nu en dan
overgang naar een client-side programmeren taal bekend als JavaScript.
Maar eerst een paar verlossing.
>> U herinnert zich misschien dat op Woensdag heb ik uiteengezet
om een ​​website te schrijven dat nam in ingang gebruiker
door een HTML vorm die vervolgens opgeslagen dat gebruikersinvoer namen, telefoonnummers
nummers, en mobiele telefoon dragers in de database.
En toen had ik een beetje commando lijn script geschreven in PHP
dat moest herhalen over de rijen in de database
en het verzenden van SMS-berichten.
Ondanks verscheidene, verschillende pogingen, we leverde dat werken niet door het einde.
>> Dus bracht ik deze hele week werken op die code om ons voorbij het punt
waar we gebleven, waarbij alle Ik kreeg aan het einde van woensdag
was dit SMS-bericht van Margo zoals ik worstelde,
gevolgd door een SMS-bericht van een ander klasgenoot, je hebt deze David.
Gevolgd door deze, heerlijk bemoedigend.
Ging maar door, heel bemoedigend.
Ik kreeg het bijna tot then-- en dat is de notitie eindigden we op woensdag.
En dan eigenlijk misschien wel mijn favoriet, Even later, kwam dit in.
Verdomme Live stream.
>> Dus vandaag hebben we dit oplossen met een snelle kijk naar wat ik sinds heb gedaan.
Dus alles van deze code is beschikbaar online van vorige week, week acht,
broncode.
En je zult zien dat ik ging door, en ik eigenlijk opgeruimd dingen een beetje.
Ik een paar andere geïntroduceerd kenmerken van een SQL-database.
Bijvoorbeeld, in plaats van gewoon drager van var char
als ik denk dat ik deed op de fly vorige week.
Ik plaats gedefinieerd als wat heet een enum.
>> En sommigen van u misschien dit gezien hebben als we verkend C. Enum is eigenlijk
een kenmerk van C, waar u kunt sommen een hele hoop van constanten
en deze toewijzen automatische waarden, als een, twee, drie, vier
zonder harde codenummers.
Dus SQL ondersteunt dezelfde, waarbij indien je hebt een database veld dat alleen u
wil op een van eindige te nemen waarden, kunt u letterlijk specificeren het
als ik er voor vier hebben gedaan populaire Amerikaanse mobiele telefoon carriers.
>> Dus deed ik dat.
En ik maakte een aantal wijzigingen ten goed, de belangrijkste daarvan
werd om aan de slag email met werken omdat recall, dat dit programma gebruikt dat
over het algemeen wel een e-mail naar SMS gateway, dat is gewoon
een mooie manier om te zeggen dat Verizon, en AT & T, en andere mensen te ondersteunen met een server,
waarbij indien zij ontvangt e, zet het SMS
en stuurt een tekst bericht naar de telefoon van iemand.
Dus als ik het goed deed, Hier is een nieuw en verbeterd vorm
dat gaat om te praten nieuwe en verbeterde code die
je kunt spelen met online.
En het zal hopelijk mijn telefoon piep in slechts een moment.
>> Dus eerst ga ik om te typen op mijn naam.
Ten tweede, ik ga niet om dit deze keer doen.
Ik ga denk Inspect Element.
En dit is slechts een klein ding dus ik doe niet
creëren uren postproductie werken als ik de vorige keer deed.
Er is nu mijn telefoonnummer.
>> Ik zal Verizon selecteren.
En hier, laten we zet deze microfoon hier, en richt dit op mijn telefoon hier.
Ik ga klik Register, dat moet hopelijk
zet het in de database.
Nu ga ik naar de command line programma, dat
recall werd dot slash genoemd tekst, en steek uw vingers.
Daar gaan we dan.
>> [PHONE DINGS]
>> [Applaus]
DAVID MALAN: Dus leuker dan dit-- het is leuk, natuurlijk, als ik in het.
Maar het is meer leuk, ik dacht, als we creëerde een van die filmmomenten
waar als iets echt slecht is gebeurd in de wereld,
en net als alle NSA People's mobiele telefoons beginnen te piepen
met SMS-berichten waarschuwen zij dit feit.
Dus ik dacht dat we zouden proberen om hier hetzelfde te herscheppen,
waarbij geen database gebruikt, Ik plaats op voorhand
schreef een programma dat er als volgt uitziet.
>> Dit is een index.php-- en ik zet deze code online
als goed-- die blijkbaar gewoon renders form.php,
met een MVC stijl paradigma dat we praten over in meer detail in probleem set
zeven.
Dat formulier is vrij eenvoudig.
Het gaat om een ​​in te dienen bestand genaamd here.php per post.
En het is blijkbaar gaan vragen voor een naam en een telefoonnummer,
en dan via zogenaamde Selecteer het menu, het is
ga je minstens vier geven populaire Amerikaanse mobiele telefoon carriers,
en dan kun je effectief neem bijwonen door hier te klikken.
>> En hier, ondertussen, gaat lenen een deel van de code van de vorige keer.
En als je dit gewoon romen, je zult zien dat er
een hele hoop fouten te controleren.
Maar de schoonheid eind dat we zijn niet schrijven naar een database van vandaag.
We houden het simpel en gewoon uit te sturen hopelijk
een SMS-bericht via de functie I schreef de afgelopen dagen oproep
Tekst, die in functies. php, dat is weer online beschikbaar.
>> Dus als je wilt deelnemen aan dit.
We zijn niet van plan iets te opslaan.
Naar deze URL hier in real time.
Ook niet te verstrekken gewoon nog niet, maar laten we kijken of we een van deze film kan hebben
momenten waar ieders cellphone begint te piepen, hopelijk net
keer dit jaar in tegenstelling tot in 2011 waar dit ging vreselijk mis.
En als je eenmaal naar dat adres, moet je een super eenvoudig formulier te zien
dat als je een naam, een mobiele telefoon nummer, en een mobiele telefoon vervoerder dat
overeenkomt met de lijst daar, ga je gang en vul het formulier in.
Maar niet op submit drukt gewoon nog niet.
>> De vorm gaat er als volgt uitzien.
Ga je gang en type in uw naam, telefoonnummer.
Oop, iemand gaat voor de kromme.
Het is OK.
OK, iedereen is het formulier ingevuld.
Dit zou moeten werken op een telefoon, ook, als je wilt.
Oké, op uw plaatsen, klaar, af.
Hit Hier.
Wat?
Nee.
Ik zweer bij God, heb ik getest dit meerdere keren vandaag.
Heb je het?
>> [Tussenplaatsen VOICES]
>> DAVID MALAN: OK, gebruikersfouten misschien.
Dat is twee.
Het werkte voor twee uit een paar honderd, drie, vier.
OK, dat is goed.
Vier van de vijf voor correctheid hoe zit.
>> Dus wat is er gebeurd?
Dus vermoedelijk, zonder het zien van uw schermen, waarom zou het hebben errored?
Het is waarschijnlijk dat we waren gewoon proberen om te veel verbindingen maken
aan Harvard's mailserver allemaal op eenmaal van hetzelfde IP-adres.
Ik ben alleen maar gissen, omdat ik niet hebben de luxe van het testen
deze code met een aantal 300 mensen bij voorbaat
maar voor nu beseffen dat ten minste moeten
de klus deze keer hebben gekregen.
>> Oké, dus waarom is dit alles de meer relevant voor wat er gaande is?
Nou ten eerste, een snelle paar aankondigingen.
Dus een, als u wilt Chang mee, en Nick, en anderen tijdens de lunch deze vrijdag,
doen RSVP op het gebruikelijke URL daar.
Als u denkt aan het concentreren in of het doen van een secundaire in CS,
of je nu een tweedejaars, of eerstejaars, of zelfs junior of senior op dit punt
en kan nog steeds knijpen in de cursussen, beseffen dat de technische school
is het verzamelen voor gratis Ben en Jerry's ijs en advies
deze woensdag kort na de les op 4:00 in het CS gebouw
bij Maxwell Dworkin.
Als dit te snel op het scherm, ga je gewoon
om cs50.harvard.edu een link naar het Facebook event
waar u meer details kunt zien.
>> Ondertussen dacht ik dat ik zou corrigeren een ander ding ik goofed op woensdag.
Blijkt dat Mark's ID Op Facebook was niet drie.
Het was vier.
Blijkt dat hij meer onderzoek had rekeningen dan ik me herinner.
Maar wat dit voelde als een kans te doen is om omhoog te trekken een URL zoals deze.
>> Dus het blijkt dat Facebook heeft een API, Application Programming Interface,
dat is een mechanisme waarbij u programmatisch kan gegevens opvragen
op Facebook en krijg terug machine leesbare informatie, geen webpagina's
maar gewoon rauwe tekst, iets riep JavaScript Object Notation.
En in feite, als ik dit bezoek URL, en opnieuw in, standaard,
dit is Mark's openbaar toegankelijke informatie.
>> En het interessante detail hier is gewoon dat zijn ID
inderdaad, nummer vier, die ik gerealiseerd zodra ik dit deed.
U kunt dit zelf doen als je weet uw Facebook-gebruikersnaam als je die hebt.
Typ het gewoon top daar.
En niets van dit is privé.
Ik ben gewoon dit zelfs doen in de incognito-modus.
Dus ik ben niet eens ingelogd.
En je ziet dat ik blijkbaar was gebruikersnummer 6454
op Facebook, dat is niet te slecht deze dagen.
Dus hoe dan ook, ziet u ook aanvullende informatie daar.
>> En de nuttige aspect van dat is dat je
zou uw eigen software te schrijven die een of andere manier integreert gegevens zoals deze
in uw eigen applicatie.
U kunt gebruikers machtigen inloggen op uw website,
niet met behulp van hun eigen aangepaste gebruikersnaam en wachtwoord maar misschien hun Facebook login
en informatie zelfs over hun vrienden,
indien zij erkent deze of soortgelijke.
Zodat er rekening mee dat CS50, ook, heeft een aantal van zijn eigen API's,
een voor de studiegids data, sommige voor de knuffels menu's in de restaurants
hallen, alle gebouwen en locaties
op de campus hebben we een API voor zowel dat u op dezelfde manier kunt opvragen en krijgen
terug tekstuele gegevens die u kunt integreren in een PHP of JavaScript, of zelfs,
hoewel minder vaak, een C gebaseerd afstudeerproject.
>> Inderdaad vooruit voor de finale project zijn een paar mijlpalen.
Je kreeg een e-mail van ons de andere dag.
Realiseer je dat het voorstel is het gevolg van deze komende maandag.
Het is niet per se bindend, maar u nodig hebben om uw onderwijs fellows ontvangen
goedkeuring alvorens wijzigingen daarna.
En dan vooruit zijn een aantal andere mijlpalen.
>> Dus om u te plagen, ook, enkele mogelijkheden
we hebben een heleboel deze tint gloeilampen.
En sommigen van jullie nu hebben een aantal van deze in uw dorm kamer ook.
En ook zij hebben een API.
Dus herinneren die binair bollen weken geleden dat Dan Bradley en Ansel
Duff voor ons geschapen.
Ze gebruikten een software interface Deze lamp, die momenteel
is aangesloten op elektriciteit en dan via een draadloze
is verbonden met een klein ding heet de Brug hier beneden,
als een kleine router proprietary om dit apparaat.
>> Maar het blijkt dat als ik weet hoe stuur HTTP berichten, zoals we nu allemaal doen,
Ik kan een bericht als dit te sturen naar deze lamp om deze aan of uit te schakelen
of voert u een aantal andere bewerkingen op het.
Merk op dat het niet te krijgen, is het niet te posten.
Er is er nog een zogenaamde put.
Er is eigenlijk een paar andere dergelijke werkwoorden.
Maar let op er is een pad daar, slash API, slash nieuwe ontwikkelaar,
slash licht, slash één, schuine streep staat.
>> Dat is blijkbaar gewoon de pad dat het bedrijf, Philips,
besloten dat u hoeft te raken met een HTTP-verzoek
als je wilt om de status te wijzigen van de lamp met behulp van HTTP 1.1.
Dan merk de lege regel.
En dan tot slot wat lijkt op soort van een array van een soort,
Dit bericht zal worden genoemd JavaScript Object Notation, of Jason.
En wat je hier ziet is dat Er zijn drie belangrijke waarde paren.
>> Eén sleutel wordt opgeroepen.
En de waarde ervan blijkbaar gaat om waar te zijn.
Helderheid is 128, die is een soort van int.
En dan overgang is nul, die blijkbaar
hoe lang het gaat nemen om dit ding aan te zetten.
>> Dus nu deze lamp uit is.
Maar als ik dat doe precies dit-- laten ik ga naar een klein spiekbriefje
dat Dan opgezet in advance-- en ik ga
om verder te gaan en te kopiëren de volgende opdracht.
Krul, zoals sommigen van jullie misschien hebben opgedaan op CS50
Bespreek is een hulpprogramma zoals Telnet dergelijke dat je HTTP-verzoeken kan simuleren,
specifiek zet.
Ik kan deze gegevens verzenden, specifiek wat we zojuist
zag daarnet specifiek om deze URL hier.
En dan Krul gaat behandelen alle vereiste headers
en het ontleden er van.
>> Dus alles wat ik moet doen is kopieer deze in een terminal venster en vervolgens drukt u op Enter.
En de lamp gaat branden.
En dit is allemaal doormaakt mijn computer draadloos
een of andere manier tot aan de brug, die wordt vervolgens in gesprek met deze lamp.
Ik kan iets anders doen.
Ik kan dit ding maken ga rood bijvoorbeeld.
Ik kan bijvoorbeeld te maken dit ding gaat groen.
Ik kan het blauw gaan.
>> En bericht in elk van deze gevallen, alles wat ik ben het veranderen
is de zogenaamde tint waarde eigenlijk geef het wat kleur.
Dus laat me dit ene plakken in ook.
Nu is het blauw.
>> En je kunt zelfs liefhebber doen dingen where-- laten we gaan naar groen.
En ik kon dit van doen Natuurlijk met mijn eigen code.
Maar ook de API zelf ondersteunt funky operaties
als dit, zal die nu moeite ons voor de komende 30 seconden.
>> Dus dat is een voorproefje van wat je misschien doen met een API, deze betrekken
gloeilampen.
Merk op dat CS50 heeft een paar paren van Google Glass als je wilt
graag samen iets aan te pakken die lijnen, Arduino Unos, die
zijn piepkleine computers, wezen, op een kleine printplaat
dat u verbinding kunt maken draden en andere
tot en eigenlijk control je echte wereld omgeving.
En dan zijn er een paar van nieuwe speelgoed dat we hebben.
Deze ene letterlijk net aangekomen het de andere dag per post, een Myo-armband.
En ik dacht dat het een manier is om word je enthousiast over projecten
dat je zou kunnen gebruiken met Deze hardware zou
zijn om deze korte clip te spelen die ze gebruiken om mensen te plagen
dat we nu leven in de toekomst.
>> [Muziek]
>> DAVID MALAN: Dus in slechts een paar weken, u kan ook zijn dat koel in de CS50 beurs.
Een ander apparaat dat we hebben een heleboel dat we
blij om te lenen voor projecten heet een motion controller.
Dit is een kleine USB-apparaat u verbinding maakt met een computer die
hiermee kunt u de interactie met uw laptop, Mac of pc,
alsof je had als een Xbox Kinect en eigenlijk maken fysieke bewegingen veel
zoals we zien in deze visie op de toekomst.
>> [Muziek]
>> DAVID MALAN: Dus zelfs als je hebt geen idee hoe zoiets
kan eventueel worden uitgevonden of werk op hardware niveau, maakt niet uit.
Zelfs na een paar maanden van de CS50, en inzicht programmering
meer in het algemeen, en web programmeren meer onlangs, en dan ook API's, en HTTP,
heb je toegang hebt via software API's als u
wil wel een van deze lenen apparaten om daadwerkelijk te praten om het te
en niet zorgen te maken over de onderliggende implementatie
Gegevens, die volledig is overeenstemming met dit begrip gelaagdheid
een abstractie die we hebben gezien tijdens het semester.
>> Dus ook in het weekend, zag een paar nieuwtjes.
Ga eerst, ga naar seminars als je wil graag iets leren
meer op een aantal onderwerpen.
Zie de URL daar.
En deze werd verzonden naar me door Chang, wie je kent,
wie het afdrukken van ons leger van olifanten.
En het was hier een titel als volgt.
Ik ben doodsbang van mijn nieuwe TV.
Waarom ben ik bang om dit te zetten ding op en je zou ook.
Dus we zijn nu aan het wijzen in het semester,
ook, waar ook al heb je de geringste van begrip
van hoe het web werkt, en HTTP, en veiligheid, dit soort dingen
moet beginnen om uw aandacht te trekken.
Maar ook, zult u begrijpen of deze dingen wel of niet
werkelijke bedreigingen.
>> Dus nam ik een paar fragmenten uit dit artikel hier.
En het verhaal is als volgt.
Ik ben nu de eigenaar van een nieuwe Smart TV, die
belooft streaming leveren multimedia content, games, app,
sociale media en internet browsen, oh en TV ook.
Het enige probleem is dat ik nu bang om het te gebruiken, zegt de auteur.
Je zou zijn, ook, als je door te lezen de 46 pagina privacybeleid voor uw TV.
De hoeveelheid gegevens die deze ding verzamelt is onthutsend.
Het registreert waar, wanneer, hoe, en voor hoe lang u de TV gaat gebruiken.
Het zet tracking cookies, zoals we hebben besproken,
en bakens ontworpen om te detecteren wanneer u
bekeken bepaalde inhoud of een bepaald e-mailbericht
als u wilt e-mail checken op je TV.
Het registreert de apps die u gebruiken, de websites die u bezoekt,
en hoe je interactie met de inhoud, alles om dat te doen via uw Smart TV.
Ook, creepier yet-- dat is mijn addition--
heeft een ingebouwde camera met gezichtsherkenning.
>> Het doel is te voorzien gesture control voor de TV
en stellen u in staat om in te loggen op gepersonaliseerde account met uw gezicht.
Op de kop, de beelden zijn opgeslagen op de TV ipv geupload
om een ​​corporate server.
Aan de andere kant, het internet aansluiting maakt het hele TV
kwetsbaar voor hackers die het vermogen hebben aangetoond
om volledige controle over de machine te nemen.
>> Meer verontrustend, alsof dat nog niet slim genoeg, is de microfoon.
De TV beschikt over een stem feature herkenning
waarmee kijkers te controleren het scherm met spraakopdrachten.
Maar de service wordt geleverd met een nogal onheilspellende waarschuwing.
Houd er rekening mee dat als uw gesproken woorden bevatten
persoonlijke of andere gevoelige informatie, die informatie
zal een van de gegevens die zijn vastgelegd en overgedragen aan een derde partij.
Heb je dat?
Gebruik geen persoonlijke of gevoelige zeggen spullen in de voorkant van uw TV.
>> Dus dit is eigenlijk voor de echte.
En het is niet moeilijk om te zien of je ga naar Best Buy en dergelijke voor televisies
deze dagen.
Ze zijn allemaal slim op een bepaalde manier.
En ze krijgen slimmer en griezeliger.
En ze zijn gewoon het verzamelen van gegevens op manieren die we hebben gesproken over
en vervolgens uploaden via HTTP of sommige andere protocol om enkele server.
>> Dus was van een leuke artikel van deze in deze online website
hier, die sprak over een specifieke bug of verkeerde code
dat we eigenlijk kunnen binden in de discussie van vorige week.
Dus deze kop was als volgt, gaat het verhaal hier,
Josh Breckman werkte voor een bedrijf dat een contract geland
naar een content management ontwikkelen systeem, of CMS zoals ze heten,
voor een vrij grote website van de overheid.
Een groot deel van het project betrokken zijn het ontwikkelen van een content management systeem
zodat de werknemers zou zijn in staat zijn om te bouwen en te onderhouden
de steeds veranderende content voor hun site.
Het ging vrij goed voor een paar dagen na livegang.
Maar op dag zes, ging het niet zo goed.
Alle van de inhoud op de website was volledig verdwenen.
En alle pagina's heeft geleid tot de standaard, Voer inhoud webpagina.
Whoops.
Josh werd ingeschakeld om onderzoeken en merkte
dat een bijzonder lastig extern IP-adres had
gegaan en verwijderde alle de inhoud van het systeem.
>> Het IP-adres behoorde niet naar een aantal overzeese hacker verbogen
op het vernietigen behulpzaam overheidsinformatie.
Het besloten googlebot.com, Google's eigen web kruipen spider.
Whoops.
Na een beetje onderzoek en klauteren rond om een ​​noncorrupt backup te vinden,
Josh vond het probleem.
>> Een gebruiker had gekopieerd en geplakt bepaalde content van de ene
pagina naar een andere, zoals Een Hyperlink bewerken
om de inhoud van de pagina te wijzigen.
Normaal gesproken zou dit niet een probleem, omdat een externe gebruiker zou
nodig hebt om een ​​naam en wachtwoord in te voeren, maar het CMS authenticatiesysteem,
het login-systeem, geen rekening gehouden met
geavanceerde hacking technieken van Google Spider.
Whoops.
>> Aangezien het blijkt, Google Spider niet gebruiken
cookies, hetgeen betekent dat het kan gemakkelijk te omzeilen een cheque voor de
is aangemeld cookie-set te zijn vals.
Het maakt ook geen aandacht besteden aan JavaScript, dat normaal zou doen
prompt en gebruikers worden doorverwezen wie bent niet ingelogd.
Het nochtans volgt elke hyperlink op elke pagina het vindt,
waaronder die met Pagina verwijderen in de titel.
Whoops.
>> Dus wat betekent dit in meer technische maar vrij toegankelijke termen?
Het betekent alleen dat gedurende hun website,
zij URLs niet anders deze die je zou kunnen zien in probleem stelde zeven.
Recall in probleem stelde zeven of weet in probleem stelde zeven
dat je uitgedaagd, onder andere,
om de voorraden te verkopen ten behoeve van gebruikers.
Maar de uitvoering van die functie door middel van te krijgen via hyperlinks in uw gebruikersprofiel
interface waarschijnlijk niet het slimste idee
want als uw site is een of andere manier bereikbaar met de mens
wie er rond te klikken of koop een bot zoals Google of een Spider
zo heten ze dat gewoon het web te doorzoeken proberen te indexeren
het web als een zoekmachine, ze konden heel gemakkelijk
hit via krijgen dit soort URL.
En dat is functioneel gelijk aan, in dit geval,
de verkoop van alle aandelen van Google.
>> Nu eerlijk gezegd, het is volledig stompzinnig dat het CMS
gebruikte JavaScript en cookies om zijn login systeem te implementeren
en niet het doen van die server side, zoals jullie doen en zal in Pset 7--
er is een login.php file-- altijd, altijd,
altijd de beveiliging zou moeten zijn gedaan op de server,
niet aan de client omdat dit artikel suggereert en die je misschien zelf
zien op een bepaald punt, het is triviaal voor een gebruiker, goed of slecht,
om gewoon uit te schakelen JavaScript niet om cookies te noemen.
Dus dat is je dagelijkse WTF.
>> Er is nog één, die is gewoon een beetje eng,
dus ik zal het vermelden of alleen als een levensles.
Wanneer u een toepassing gebruiken genoemd als Snapchat of iets dergelijks
die zegt dat deze foto's alleen duren vijf seconden, tien seconden of zo.
Ze zijn kortstondige Dat is absoluut niet het geval.
Alsof er geen manier, digitaal, uit te voeren of andere vorm van video,
of afbeelding, of tekstuele delen van dergelijke dat de ontvanger aan de andere kant
kan niet een of andere manier de gegevens op te slaan.
>> In de meest naïeve manier, iemand konden hun telefoon mee te nemen.
En ze hebben een 10 tweede venster terwijl kijken naar een aantal snap
om gewoon een ander telefoonnummer en fotograferen, natuurlijk.
Dus je kunt behouden iets digitaal op die manier.
Sommigen van jullie weten hoe te nemen screenshots op je telefoon.
In feite, als je dit niet weet, realiseren dat ten minste Snapchat,
en ik denk dat andere applicaties deze dagen,
je tenminste als het vertellen ontvanger heeft eigenlijk
genomen een screenshot van uw afbeelding.
>> Maar erger nog, dit was de snappening, iemand bedacht onlangs,
waar zo'n 100.000 snaps was vrijgelaten
in wat een torrent bestand genaamd op diverse websites uiteindelijk.
En deze bevatte een hele hoop van privé-berichten en berichten.
Het blijkt dat de meeste van hen goedaardig, dus niet wat je zou verwachten.
Maar omdat mensen hadden gebruik gemaakt van een website van derden,
inloggen met hun Snapchat gebruikersnaam en wachtwoord en vervolgens
het opslaan van al hun kiekjes Op deze website van derden.
En het was die derde website die is gehackt,
die net betekende iemand bedacht hoe om alle 100.000 plus van die beelden te krijgen
in hun eigen harde schijf voor volgende delen.
Eerlijk gezegd, ook hier, het is een soort van stompzinnige dat Snapchat
zodanig is uitgevoerd dat een derde partij kunt sorteren van onderscheppen
de gegevens en dat het niet is gekoppeld aan uw eigen applicatie die op de telefoon.
Maar ook hier beseffen dat deze dingen moet je niet verrast wordt door,
of in ieder geval er moet zijn een levensles in hier.
Indien u graag de technische informatie, ga naar de URL er
dat is in de dia's van vandaag.
Oké, nog vragen op het leven van vandaag de lessen in CS?
Zet dat af.
Helemaal niets?
Ik heb veel mensen inchecken kreeg hun Snapchat of iets nu.
>> Oké, dus SQL, Structured Query Language.
Laten we wikkel dit.
Ook, hoewel we zijn gewoon krabben
het oppervlak van deze taal, geven wij u
genoeg van de taal in de vorm van Pset 7
zodat u wat kunt pakken vrij algemeen functionaliteit.
Maar beseffen dat er een paar dingen die we niet nodig hebben van u,
maar ze gaan worden belangrijke komen afstudeeropdrachten
en zeker komen waardoor werkelijke websites met feitelijke gebruikers
is dit ontwerp beslissing.
>> Het blijkt dat in een MySQL database, u
hebben trossen van keuzes, zoals de data types voor uw columns
en andere dingen, maar je hebt ook de keuze van een zogenaamde storage
motor voor al uw gegevens, het soort bestandssysteem,
als je bekend bent, voor al uw gegevens.
Welk formaat is het uiteindelijk opgeslagen in?
En de meest voorkomende, misschien, is MyISAM en InnoDB, technische termen
dat we alleen zullen de zorg over in zoverre dat men
en men niet de volgende functie.
>> Stel dat je hebt een kleine slaapzaal koelkast.
En stel dat u en uw kamergenoot, die deze koelkast te delen,
zijn echt dol op zeg melk.
En dit is in feite hoe de verhaal werd verteld om me weg terug
in de dag toen ik een cursus genaamd CS 161 Operating Systems, dat
evenzo verkent dit onderwerp.
Dus je hebt deze koelkast.
Je bent uit melk.
En kom je thuis, je kamergenoot's nog in de klas of wat dan ook,
en je besluit ik ga naar buiten en krijgen wat melk.
Zodat u de koelkast te sluiten, lockup de slaapzaal, naar de overkant van de straat
CVS of waar dan ook, en krijg in de rij om wat melk te kopen.
>> Ondertussen, je kamergenoot thuiskomt uit de klas, krijgt in de slaapzaal,
opent de koelkast, beseft ook ooph, we zijn uit melk.
Zodat hij of zij sluit de koelkast en dan gebeurt
om naar de andere CVS, die gebeurt te zijn
een blok afstand van de andere CVS op het plein, en krijgt in de lijn
er om wat melk te krijgen.
Nu, natuurlijk, een paar minuten later, jullie beiden terug te krijgen,
en het ergste van alles mogelijk uitkomsten is gebeurd.
Beide heb je melk.
En je echt niet zoals melk dat veel.
Dus een van hen is gewoon gaan verzuren op een bepaald punt.
Dus nu heb je een te hoog bedrag van melk in de koelkast al want waarom?
>> [Onverstaanbaar]
DAVID MALAN: Ja, je deed het niet of andere manier met elkaar
dat je krijgt melk.
Dus in de eenvoudigste wijze de menselijke wereld,
hoe kun je voorkomen dat deze domme scenario van het gebeuren zoals
dat je alleen maar eindigen met een.
Tekst hen, ja goed.
Maar hoe anders?
Post-it notes.
DAVID MALAN: een post-it note.
Elke vorm van communicatie dat vertelt je kamergenoot
ga niet in de koelkast voor de melk.
Ik ga om te gaan werkbezoek op mijn eigen.
Zodat u een of andere manier nodig om dit onderdeel te vergrendelen.
Dus we kunnen dit-- maken we can soort verpesten het verhaal en om te zetten in een CS verhaal
waarbij te denken aan dit als net als een variabele, die opslag een bepaalde waarde.
En op dit moment, de van melk nul,
die u niet wilt dat uw kamergenoot om die variabele inspecteren
en dan een beslissing nemen hem of haarzelf gebaseerd op de toestand van die variabele
als je in het proces van veranderen van de toestand van die variabele.
>> Dus een van de regels van SQL dat we geven u in Pset 7 specificatie
is dit één hier.
En we niet uitgeven een enorme hoeveelheid tijd die er over te praten.
Maar het blijkt, als je probeert om wat aandelen te kopen in CS50 finance
dat je al hebt aantal aandelen van, u
willen in staat zijn om een ​​nummer te doen dingen direct bij elkaar.
U wilt in staat zijn om effectief, op een hoog niveau,
check in orde, als ik wil om meer aandelen van Free kopen,
de penny stock we praten over in de spec,
Ik wil eerst controleren hoeveel aandelen ik heb.
En veronderstel dat het vijf.
En stel dat ik wil uiteindelijk koopt 10 meer, ik
willen 15 aandelen van de voorraad hebben.
Dus ik heb twee vragen stellen.
Wat de stand van de variabele?
Wat is de staat van de rij?
Hoeveel aandelen heb ik op dit moment?
Dan wil je om verder te gaan en te actualiseren.
Zodat de analoog de melk in dat u de rij te controleren,
en dan wil je om het te actualiseren want als je wilt 10 aandelen te kopen,
je niet wilt veranderen de rij om 10 u
wil om het te veranderen naar 5 plus 10 of natuurlijk 15.
>> Deze regel code zorgt ervoor dat die twee conceptuele ideeën
gebeuren samen of helemaal niet.
Niemand, ook een andere gebruiker wie er ingelogd op dezelfde website,
kan een of andere manier te onderbreken de controle van de rij
en de actualisering van de rij, de selecteren en de update als je wil.
En de syntax is niet super voor de hand liggend, maar deze lijn, lang is het is,
garandeert dat deze twee operaties controleer de variabele of controleer de rij
en update de rij gebeuren atomair.
>> Oh daar gaan we weer.
Tekstbericht op mijn telefoon.
Dus laten we dit een beetje meer beton.
Stel dat u niet het implementeren van een koelkast,
en je bent niet de uitvoering Pset 7, maar een werkelijke bank,
of een geldautomaat, een Automated Teller Machine, waarbij je een of andere manier
willen in staat zijn om te machtigen gebruikers om geld
van de ene rekening naar de andere.
OK, hang op.
Ik ga dit nu dempen, dank je.
Dus we willen geld verhuizen van het ene rekeningnummer
in een ander account nummer, bijzonder 100 $.
Dus dit is een soort van een willekeurige bijvoorbeeld, waarbij u, de ATM,
Misschien wil je twee SQL-code queries, aftrekken van de ene rekening,
en toe te voegen aan de andere rekening.
Maar wilt u ervoor zorgen dat deze twee lijnen zowel gebeuren of helemaal niet.
Je iets niet wilt krijgen onderbroken.
Je hoeft niet een aantal slimme bad guy een of andere manier staan ​​bij Bank of America
met twee geldautomaten in de voorkant van hem en een of andere manier
soort van typen in de opdrachten tegelijkertijd,
hopelijk proberen op aftrek $ 200 in plaats van $ 100 en alleen het hebben van $ 100 bijgeschreven.
Kortom, dit wilt u gedragen zich precies zoals je verwacht.
>> En de manier waarop je dat doet Dit in SQL database
je het verpakken in wat zogenaamde transactie.
Letterlijk in SQL, kunt u bellen met CS50's query-functie met quote unquote start
transactie.
Dan kunt u een willekeurig aantal uit te voeren latere SQL queries,
maar geen van hen te nemen Effect op de database
totdat je vraag offerte unquote noemen plegen, indien het nogmaals met behulp van PHP.
En op deze manier kunt u ervoor zorgen dat zelfs als je 1.000 gebruikers alle
het raken van uw database tegelijkertijd, SQL
zal beloven dat deze twee vragen zullen worden
geïmplementeerd ene na de andere.
Zodat je niet eindigen met een overmaat van melk of het verkeerde bedrag, uiteindelijk,
van het geld.
>> Dus dit in gedachten houden, niet zozeer voor Pset 7
maar voor de laatste projecten als je werkelijk bent
probeert data verplaatsen in de tabellen als je misschien hier.
Maar misschien nog eenvoudiger en meer duidelijk te begrijpen met een voorbeeld
is dit één hier.
En iemand ons gemaild over dit alleen de andere dag
toen hij iets zag gelijkaardige online.
>> Dus naar mijn weten, het pin-systeem is niet kwetsbaar voor deze aanval.
En ik heb geen idee of het nog gebruik de SQL-database onder de motorkap.
Maar laten we het gebruiken voor Ter wille van de discussie.
Hier is het scherm dat Harvard mensen hebben de neiging
om te zien als je inlogt op hun Harvard ID-nummer en hun pin.
En stel dat het pin-systeem waren in PHP en een MySQL geïmplementeerd
databank, de code die iemand misschien hebben geschreven jaar geleden
kan er zo uitzien.
Eerste, verklaren een variabele genaamd gebruikersnaam.
En gewoon dat vanaf de POST superglobal.
Dan krijg een andere variabele riep wachtwoord en hetzelfde doen.
En dan gewoon uit te voeren deze lange vraag hier,
select ster van gebruikers waar gebruikersnaam is gelijk aan die en die
en het wachtwoord is gelijk aan die en die.
>> Merk op dat de krullend braces Ik heb hier gebruikt
gewoon betekenen voor PHP, ga vooruit en vervangende
de waarde van deze twee variabelen daar.
Ze zijn niet strikt noodzakelijk, maar hebben ze de neiging om subtiele syntax fouten te voorkomen.
Dus dit ziet er heel correct op het eerste gezicht.
En het is.
Je zou de uitvoering van het pin-systeem op deze manier.
>> Maar stel dat een super slim en kwaadaardige student
inbreng dit als zijn of haar pin.
Dus ik heb de kogel verwijderd tekenen hier in de mock-up,
en ik heb eigenlijk onthuld wat hij of zij zou kunnen typen.
En het is een beetje vreemd.
Maar wat uit bij u springt op potentieel zorgelijk over invoer van de gebruiker,
zelfs als je geen idee hebt wat een SQL-injectie aanval betekent.
Waarom heeft deze er een beetje fishy?
Wat is dat?
[Onverstaanbaar]
DAVID MALAN: Het is of een beetje achterdochtig.
In feite, dat is een trefwoord uit SQL.
Dus dat voorspelt niet veel goeds.
Het feit dat er al deze enkele aanhalingstekens
er-- in feite een van de eenvoudigste manieren om wat databases breken
is door het intypen van een naam als O'Reilly waarvan een apostrof daarin
want als de mens die schreef de code achter de schermen
geen rekening mee gehouden dat er misschien enkele aanhalingstekens in een gebruiker
input, en hij gebruikt enkele aanhalingstekens in hun code,
slechte dingen kunnen gebeuren.
>> In feite, erger nog, overweeg dan dit.
Als dit was weer de code dat iemand op Harvard jaar
geleden schreef voor de pin systeem, let op wat is
over te krijgen vervangen voor gebruikersnaam en wachtwoord
Als de gebruiker types weer skroob als hun gebruikersnaam
en daarna één, twee, drie, vier, vijf, offerte of prijsopgave unquote één gelijken
citeer één.
En let op wat is key hier is de gebruiker heeft niet
begonnen hun wachtwoord of hun pin met een citaat.
En ze hebben het niet afgelopen met een citaat, omdat hij of zij
wordt aangenomen dat indien de programmeur was niet zo scherp,
ze gaan die hebben enkele aanhalingstekens in hun code.
>> Dus hier is de code.
En de vervanging die misschien nu gebeuren is dit.
En ik heb onderstreept wat de gebruiker heeft getypt.
Dus voordat na.
En let op wat is mild zorgelijk nu over de rechter helft van deze SQL-code?
Het is een beetje ingewikkelder, toegegeven, dan de vragen die we hebben gezien.
Maar dit kan onmogelijk een goede zaak als je
zeggen select ster, die is select alles van de tafel van de gebruiker
waar gebruikersnaam gelijk skroob en wachtwoord gelijk aan één, twee, drie, vier,
vijf of één gelijk is aan één.
Wat is de logische implicatie van die laatste clausule vermoedelijk?
Het is gewoon altijd waar.
>> En omdat we een soort van geraden of bedacht door trial and error
dat de programmeur die schreef deze code niet
anticiperen op een mens of een slecht persoon typen in enkele aanhalingstekens als goed,
we kunnen syntactisch voltooi de SQL-query
met iets onzinnige maar iets dat
syntactisch onjuist die altijd true.
Als deze code wordt gebruikt om te antwoorden de vraag waar of onwaar moet
Deze gebruiker worden toegestaan ​​om, het passeren antwoord is altijd blijkbaar gaat
om waar te zijn, want dit zal altijd om iets uit de database selecteren
omdat een natuurlijk altijd gelijk aan één.
>> Dus wat is de oplossing?
Welnu, in Pset 7, we eigenlijk vermijd dit allemaal samen.
Wij geven u een query-functie, en we moedigen u aan om vraagtekens te gebruiken
als placeholders, vergelijkbaar in de geest om printf's% s,
maar wat is sleutel over de vraagtekens hier is als je daadwerkelijk door te lezen
functions.php, waar onze query-functie wordt uitgevoerd,
die vraagtekens zijn ontsnapt, waarbij iets potentieel gevaarlijke
als een enkele quote is ingeschakeld in een ontsnapte enkele offerte.
>> Dus dit is wat is echt gebeurt als je
Gebruik CS50's query-functie of een aantal van derden vrije bibliotheken die
hetzelfde doen.
Maakt niet uit in dit geval, in het groen, als de gebruiker in één offerte heeft getypt
omdat de query functie die we schreven is
ga backslashes toevoegen voordat dergelijke gevaarlijke offerte.
Dus dit is niet in Eigenlijk gaat legit te zijn.
Dit is als het typen in een gek op zoek wachtwoord dat is, uiteraard, niet van plan
om skroob werkelijke wachtwoord.
>> Dus de afhaalmaaltijden voor CS50 is één, absoluut altijd wel iets gebruiken
zoals CS50's query-functie of de onderliggende bibliotheek
die toevallig worden genoemd BOB.
Maar nooit, nooit, nooit code doen als dit
zonder ontsnapt of schrobben zoals ze zeggen uw input.
En je zult op een gegeven moment waarschijnlijk tegenkomen website als deze.
Sterker nog, het lijkt het geval te zijn zoals op luchthavens en hotels in plaatsen
waar ze hebben gratis Wi-Fi toegang dat je moet inloggen om,
deze websites zijn altijd afschuwelijk geïmplementeerd.
En dus een soort van plezier thuis oefenen, niet voor kwaadaardige doeleinden of meer
een plezier onderweg oefening, is om gewoon te typen
een apostrof, een enkel citaat, in een formulier sommige website
en zie wat er gebeurt.
En als de server crasht of geeft je een soort van foutmelding,
het kan heel goed zijn dat iemand heeft dit niet verwacht.
En dan moet je de juiste waarschuwen instanties en ga niet verder.
>> Dus nu moeten jullie hopelijk begrijpen een beetje meer geek humor hier.
>> [Lachen]
DAVID MALAN: Je weet dat je een geek.
Voor de komende paar jaar, zal je nog
die weinig Bobby Tables is vanwege deze cartoon hier.
Dus hou dat in gedachten als we context switch nog een laatste keer
vandaag om JavaScript.
We hebben relatief weinig uitgegeven tijd op de syntaxis van PHP
want het is eigenlijk super Soortgelijke C.
En mooi genoeg, JavaScript te super vergelijkbaar C's syntax
zo goed als we zullen zien in gewoon een moment en zoals we zullen
zie later deze week in het bijzonder.
Wat u kunt doen met deze taal, echter is de krachtiger,
vooral API.
>> Maar eerst een korte rondleiding.
Zo één, in JavaScript, er is geen hoofdfunctie, dat is leuk.
Zoals met PHP, kun je gewoon schrijven code.
Voorwaarden uitzien.
En Booleaanse uitdrukkingen zou uitzien of zo.
Switches bestaan, en ze kan er zo uitzien.
Vier lussen uitzien.
Terwijl loops uitzien.
Doe whiles uitzien.
En dan arrays eruit deze, zeer vergelijkbaar met PHP.
Maar let op, dat in JavaScript u verklaren een variabele niet met een dollar
teken, niet met een gegevenstype maar letterlijk door te zeggen var voor variabele voordat het.
Ook deze is losjes getypt doordat het type,
maar je hoeft niet expliciet verklaren ze.
En vervolgens een tekenreeks voor Bijvoorbeeld, zou kunnen kijken
als deze, die string wordt genoemd in deze zaak.
En dan een object.
En deze zullen we meer het duurde niet lang te zien.
En een object is misschien wel een van de meest gezien datastructuren
in een JavaScript-gebaseerde programma omdat het mogelijk maakt
u te associëren arbitraire sleutel waarde paren net
zoals PHP's associatieve arrays en net als je eigen hash table
of probeer als we geïmplementeerd een paar weken terug.
Dus laten we echt zien wat we kunnen doen met JavaScript.
Met name is dit een waslijst van features
dat browsers hebben dat stellen ons in staat aan te haken JavaScript
in een website op de volgende manier.
JavaScript wordt vaak gebruikt als een client-side scripttaal.
Het is niet gecompileerd.
Ook deze wordt geïnterpreteerd.
Maar in tegenstelling PHP, dat loopt op de server, in de webserver
of diep in de cliënten, JavaScript
anders omdat het loopt meestal in de browser.
>> Dus elke JavaScript-code die u beginnen met het schrijven voor Pset 8, of je afstudeerproject,
of in de echte wereld algemeen gaat worden opgeslagen op de server, absoluut
in een dot HTML of dot JS voor JavaScript-bestand.
Maar de browser gaat te downloaden dat JavaScript
code om uw eigen exemplaar van Chrome, of IE of Firefox, of wat dan ook.
En de code is eigenlijk gaat krijgen uitgevoerd binnenkant van uw eigen browser.
Gewoon om dit reëler te maken, laten we zien dit in concreet vorm.
>> We hebben geen idee wat deze code doet zonder echt te lezen doorheen.
Maar laat me gaan naar Facebook.com zonder in te loggen.
Laat me gaan naar Element inspecteren en ga naar, laten we zeggen, het netwerk en de pagina opnieuw laden.
En we zullen see-- laat me verschuiven Reload de Pagina om alle verzoeken om nieuwe te krijgen.
En de eerste bestand wat ik zie is CSS, CSS.
Hier is de eerste JavaScript-bestand, en ik heb
geen idee wat dit doet, maar hier is een deel van de JavaScript-code
dat drijft Facebook.
Het is zelfs niet echt dat onthullend in te zoomen.
Het is nog steeds net zo onzinnig.
>> Maar je zult zelfs beneden te zien, er is nog meer van deze bestanden JavaScript.
Whoops.
Dat is een ping.
Laten we gaan een beetje naar beneden verder, verder, verder.
Er is één.
>> Dus ook al Facebook, achter de scènes, is geschreven in deel in PHP
en Facebook's eigen versie daarvan, er is een enorme hoeveelheid van JavaScript.
In feite kan elk van de chatten je doet op Facebook,
een van de inline tijdlijn updates die gebeuren in real time, dat alles
wordt gedreven door JavaScript.
Yeah?
>> Publiek: Ik ben niet zeker als dit is Facebook,
maar ik dacht dat Facebook ontwikkeld hun eigen in-house codetaal?
DAVID MALAN: Ze deden.
Dus dat is waarom ik zeg een variantie van PHP genaamd Hip Hop dat ze eigenlijk
extra functies aan, zodanig dat wanneer Markeer eerst geïmplementeerd Facebook,
het werd in PHP geschreven.
En dat soort is gebleven het soort front-end taal
dat zij voor veel hun codering, maar
is een taal die is niet geweest schalen bijzonder goed voor miljarden
van mensen.
En dus hebben ze hun eigen toegevoegde verbeteringen achter de schermen.
En ze gebruiken een willekeurig aantal van andere talen
diverse stukken hun infrastructuur.
Dus ja, het is een verschil van wat we nu kennen als PHP.
>> Dus laten we eens een kijkje nemen naar een paar voorbeelden
van hoe wij hier gebruik van JavaScript.
In de huidige broncode we een aantal bestanden, de eerste,
laten we noemen DOM nul.
Dus DOM nul ziet er als volgt uit.
Laat me gaan in deze map en open domzero.html,
waarvan de top heeft een type doc verklaring, zegt hier komt HTML 5.
En nu hier is een HTML-tag.
Hier is het hoofd tag.
En hier is wat er nieuw is vandaag.
>> We hebben nu een script tag binnenkant van het hoofd van de pagina.
En dit blijkbaar heel weinig, maar kennisgeving
die ik heb gedefinieerd een script, een JavaScript.
En als een terzijde, aangezien dit is een veel voorkomende misvatting,
JavaScript heeft absoluut niets te maken met Java, de taal
dat sommigen van u misschien hebben geleerd in APCS.
Het was meer een marketing ding dan iets,
rijden de coattails van Java jaar geleden.
Maar JavaScript, niets te maken met Java, net op dezelfde manier, en hinderlijk,
verwarrend genoemd.
>> Dus hier is hoe je een functie declareren in JavaScript, letterlijk functie zeggen,
vervolgens de naam van de functie, dan alle argumenten zou kunnen ondernemen,
net als in PHP.
Blijkt dat in JavaScript, één van de meest irritante functies die er bestaan ​​is Alert.
Dit is een klein venster dat zal verschijnen en waarschuwen u
om een ​​stukje informatie.
Het is over het algemeen afgekeurd.
Maar we zullen het gebruiken als onze eerste oefening hier.
>> Let op een aantal kenmerken van JavaScript.
Enkele aanhalingstekens en dubbele aanhalingstekens eigenlijk niet meer toe.
Enkele aanhalingstekens en dubbele quotes kunnen worden uitgewisseld,
terwijl in C, die je moet gebruiken dubbele aanhalingstekens voor strings,
en je twee enkele hebben citeert voor chars.
In de JavaScript-wereld, veel mensen, de meeste mensen
Gebruik enkele aanhalingstekens rond strings gewoon omdat het een stilistische ding.
Maar wat is de plus operator hier, die we nog niet eerder hebben gezien?
>> Publiek: Concatenation.
DAVID MALAN: Concatenation.
Dus C niet zelfs dit hebben.
PHP heeft de dot-operator, dat doet.
JavaScript heeft de plus-operator, dat verwarrend is net als Java.
Nu, wat is er hier aan?
>> Dus hier is waar een basis begrip van dat beeld
we gooiden een paar dagen geleden in het spel komt.
Weet je nog dat we een eenvoudige versie van een HTML page--
het net zei, hallo wereld.
En trok toen we een boom rechts, dat
had een bos van rechthoeken en lijnen ze aan te sluiten als een stamboom.
Dus dat is de zogenaamde DOM of Document Object Model.
En het blijkt dat u toegang rechthoeken in die boom met syntax
als het volgende.
U zegt letterlijk document, dat is een speciale globale variabele in een JavaScript
programma dat een functie heeft ermee verbonden zijn die u kunt openen
vergelijkbaar met een structuur, maar je gewoon zeggen dot en vervolgens de naam van de functie,
krijgen element door ID.
>> Het element ik wil krijgen is blijkbaar citeren unquote naam.
En dan wil ik haar waarde te krijgen.
Nu krijgen we de zaken vooruit lopen.
Ik weet niet eens zeker wat dit allemaal over gaat.
Laten we snel vooruit naar de HTML op de pagina, die is super eenvoudig.
>> Merk op dat ik heb gedefinieerd een formulier hier beneden.
Let op, ik heb het gezien een unieke ID, hoewel we niet hebben gebruikt
dit kenmerk voor.
Maar dit bestaat in HTML.
U kunt een unieke identificatie van sommige brok van HTML met een id als deze.
>> Let nu dit-- blijkt HTML ondersteunt, per die waslijst
een moment geleden, een hele stelletje event handlers.
En dit event handler zegt op te dienen.
Op de gebruiker indiening van dit formulier, bel dan de volgende code.
En de code die gaat worden genoemd of uitgevoerd
is precies dit, de Griekse functie gevolgd door return false.
Al het andere zou moeten zijn redelijk bekend.
>> Hier is een ingang van het type tekst, waarvan ID, in dit geval, zal naam zijn.
We hebben geen een feitelijke attribuut naam hebben dit tijd-- en een submit knop.
Dus de resulterende pagina ziet er als volgt uit.
En het resulterende gedrag je zult zien, ziet er zo uit.
De pagina die het lokale hosts zegt hallo David, nauwelijks een esthetisch verantwoorde
manier om een ​​gebruiker te begroeten.
Maar wat er eigenlijk aan de hand?
>> Nou, overwegen wat dit is.
Dit is een tekstveld.
En volgens de HTML hier, heb ik het gegeven
een unieke identificatie genoemd citaat unquote naam.
Ondertussen heb ik al zei toen de gebruiker dit formulier indient
een druk op ENTER of klik op de Submit knop, bellen met de functie genaamd Greet
en dan terug Valse.
Laten we eens kijken die in omgekeerde richting.
Merken wanneer ik op Verzenden klikt, de URL van de pagina verandert niet.
Pictogram van de browser niet beginnen met draaien.
Ik heb niet overal te gaan, en dat is letterlijk, want ik zei return false.
Return false kortsluiting of stops het standaard gedrag van een formulier.
Zodat vervolgens laat ons achter met deze laatste vraag.
Wat doet Greet doen?
Nou, Greet blijkbaar noemt een functie genaamd
Alert, gaat in één lange argument dat is
het resultaat van elkaar een aaneenschakelen stelletje substrings, hello komma ruimte,
dan wat deze terugkeert.
Dus document zoals globale variabele die wortel van die boom,
aanroepen van een speciale functie, anders is nu bekend als een methode.
Een functie die is binnenkant van een variabele
genoemd een methode in plaats van een functie.
>> Dus maak je element door ID.
Welke element heb je wil door zijn ID te krijgen?
Quote unquote naam en vervolgens specifiek te waarderen.
Met andere woorden, de code eenvoudig vindt het tekstveld waarvan de ID naam
en krijgt dan de waarde ervan.
Dus als ik om dit te veranderen en zeggen Davin in plaats van David,
en klik op Verzenden, nu we een groet voor Davin.
>> Oké, dus allemaal prima en goed.
Maar laten we eens kijken of we kunnen maken dit een beetje schoner, omdat net
code te schrijven als dit is over het algemeen zal worden afgekeurd.
Dit gaat enger uitzien.
Maar wat is het eerste verschil dat u hier rekening mee
in deze uitvoering naast het noem het veranderen naar DOM één?
Wat structureel ziet er anders uit over versus de andere?
Yeah?
Publiek: Is het formulier op top van het script nu?
DAVID MALAN: Ja, de vorm is op de top van het script voor een aantal merkwaardige reden.
Dus dat is het eerste wat dat springt uit bij mij ook.
En gelukkig tenminste, Dit deel is identiek.
Dus het enige dat lijkt anders te zijn is dit.
>> Dus hier is wat er netjes ongeveer JavaScript 2.
En het maakt het moeilijk om begrijpen op het eerste gezicht,
met name voor de laatste projecten als u op zoek bent naar voorbeeldcode online,
maar het komt erop neer dat een aantal elementaire syntactische functies.
Ook hier is dat globale variabele document.
Ook hier is deze methode of functie dat zegt krijgt het element door ID.
Deze keer wil ik krijgen de ID demo genaamd.
Waar is dat?
Dat is blijkbaar recht hier, het formulier zelf.
>> En nu merken dat blijkbaar als ik terug te krijgen dat knooppunt van de boom die
vertegenwoordigt het formulier zelf, niet een tekstveld,
het blijkt dat formulier, dat knooppunt of een rechthoek uit de boom,
heeft wat wij een woning zullen noemen, zeer, zeer, zeer vergelijkbaar
in de geest naar een struct in C. Het is gewoon een data-lid binnenkant van deze rechthoek.
>> Dus ik heb de vorm gekregen hier, en ik ben het bevestigen,
of ik het toewijzen, om haar On Submit handler of liever On eigendom Submit
de volgende functie.
En dit is veruit de gekste ding tot nu toe syntactisch.
Het blijkt in JavaScript en in PHP, en eerlijk gezegd wat dat betreft in C,
ook al hebben we het niet doen, je kan toevoegen naamloos, anoniem, of AKA lambda
functies die geen naam hebben maar kan toch worden genoemd.
>> Dus wat ik hier doe is dat ik het toewijzen Deze On Submit pand, dat
is de binnenkant van dit knooppunt van mijn DOM boom, een functie, de functie pointer als je wil.
Die functie heeft geen te noemen, maar dat betekent niet
uit want we zullen zien in een moment hoe je het ook noemt.
Wanneer deze functie wordt aangeroepen, deze code wordt uitgevoerd, dan
valse wordt geretourneerd, net als voorheen.
>> Maar let op wat ik heb gedaan.
Op dit punt in de verhaal, ik heb een formulier.
Het heeft een uniek ID-demo genaamd.
Hier beneden, ik heb een script tag dat voert de volgende code.
Zij hecht aan dat knooppunt in de boom om het op Submit
eigendom van deze functie hier.
En juist door de aard van hoe browsers werken, als ik nu klik op Verzenden of druk op Enter,
die functie gaat gecalled.
Het heeft geen naam, omdat die het nodig hebben heck schelen hoe het heet.
De enige keer dat het ooit gaat krijgen heet is wanneer ik verzend het formulier.
Er is geen noodzaak voor mij, het menselijk ontwikkelaar,
om daadwerkelijk te noemen het ergens anders.
>> Nu net als een teaser, alsof dat waren niet erg buigen genoeg,
we kunnen dit ook te maken kijken meer cryptische gebruik
een super populaire library genaamd jQuery.
In feite jQuery en JavaScript worden vaak samengevoegd.
En wat we op woensdag zullen doen is start met behulp van deze taal en deze bibliotheken
steeds asynchrone bouwen en dynamische toepassingen
achtige kaart krijgen toepassingen, applicaties
dat de webpagina in real updaten tijd, net als Facebook of Gchat
doen, en ons niet meer beperken tot hitting te dienen door een get of gewoon bericht
alleen.
Dus zie ik je op woensdag.
>> [Muziek]