DAVID J. MALAN: Oké, dus dit is hier de Myo arm band, een paar die we hebben voor CS50 afstudeeropdrachten. En dat was een demonstratie die we in de wachtrij u van tevoren waar wezen deze vrij strakke arm band hier luistert naar uw spierbewegingen die vervolgens in kaart worden gebracht software Colton's laptop over hier die had iTunes en dat lied al in de rij staan. In plaats van me demonstreren deze, Colton is al in het lab duidelijk de hele week krijgen van een demonstratie klaar voor een dappere vrijwilliger. Als iemand zou willen komen op up-- zag eerst je hand. Come on up. [00:01:09] Prima. En wat is je naam? 

[00:01:13] PUBLIEK: Uh, Maria. 

[00:01:14] DAVID J. MALAN: Maria, leuk je te zien. Kom eens hier. Laat me je voorstellen aan Colton. Colton, dit is Maria. 

[00:01:21] COLTON: Hoi, leuk je te ontmoeten. 

[00:01:23] DAVID J. MALAN: Alle rechts, dus stap één, we zijn gaat hebben je dit door aan uw onderarm dus dat het vrij strak op in de buurt van uw elleboog. En ondertussen laten we op onze Google Glass en we zullen mengen technologieën vandaag. 

[00:01:33] COLTON: Eerst zullen we moeten haak deze in de dingen. 

[00:01:36] DAVID J. MALAN: OK. Eigenlijk, laten we je arm als dicht bij deze kabel mogelijk zodat we kunnen eerst synchroniseren it up. 

[00:01:41] COLTON: Laten we dit doen. 

[00:01:42] DAVID J. MALAN: En ondertussen, dus dat iedereen een dichter oogopslag kunt krijgen, we zullen Andrew's camera gooien up op het scherm daar. Dus we hebben een USB-kabel die is wordt aangesloten op Maria's armband. En laat me scherm Colton's gooien op de projector volgende. 

[00:02:00] Dus Colton is de registratie van het apparaat nu als Myo aangesloten deze kabel. En nu, wat Maria's ga even doen is eigenlijk een wandeling door de calibratie stappen en leren de software hoe haar spieren reageren toen ze er zeker van vooraf gedefinieerde gebaren die de software begrijpt. Als je zou willen gaan in voorkant van het scherm. OK, blijf proberen. 

[00:02:30] COLTON: Ga als volgt uit. En als dat. En helemaal naar rechts. Ga terug. 

[00:02:35] DAVID J. MALAN: OK. Ander perspectief. Het ligt niet aan jou. Het is ons. 

[00:02:40] MARIA: OK. DAVID J. MALAN: No. Laten we verder gaan het hoger dus het is dichter bij je elleboog, of nog strakker. Prima. 

[00:02:52] Daar gaan we dan. Dit zou een goed moment voor CS52X zijn. Daar gaan we. 

[00:02:57] Very nice. OK. Thumb Pinky. 

[00:03:02] Very nice. Spreid je vingers. Goed. Wave rechts. Het is merkwaardig te zien u met de linker hand-- 

[00:03:17] COLTON: Ja, dat is raar. DAVID J. MALAN: zwaai naar rechts en vooruit. Fast forward naar overslaan of volgende. Dat is OK Wave-rechts. 

[00:03:25] MARIA: Ik don't-- wachten. 

[00:03:26] DAVID J. MALAN: Hulp nodig? 

[00:03:28] COLTON: Dus je gaat als dit. MARIA: Het draaien van de ander ding, dat wel. COLTON: Het is. DAVID J. MALAN: Ja, ik weet het niet waarom het toont u een leftie. COLTON: Waarom ga je niet try-- gewoon proberen te gaan als dit. 

[00:03:38] DAVID J. MALAN: Nee? Misschien is je arm te bereiken een beetje rechtere en maken het meer abrupt als deze. Ja, OK, kom op. 

[00:03:48] MARIA: Het spijt me. DAVID J. MALAN: Het is niet jouw schuld. COLTON: Het is prima. DAVID J. MALAN: All Right. Goed-- 

[00:03:56] MARIA: Moeten we deze overslaan, dan? DAVID J. MALAN: Ja, laten we laat je de haak. Dus als iemand graag een doen afstudeerproject gebruik deze cutting edge hardware, beseffen het misschien gewoon neem een ​​beetje wennen. En dit-- de realiteit is dit is eigenlijk heel bleeding edge. 

[00:04:10] Dit is wat heet de developer kit, die bedoeld in wezen een pre-release zodat mensen precies kunnen doen dit-- strijd met het, figuur hoe de lichamen van mensen werken met de technologie. Dus als je wilt daarna, na lezing, wij kunnen u laten komen en neem nog een gooi naar het. Maar voor de rest, een applaus, indien we konden, voor Maria voor het komen op maximaal. 

[00:04:26] MARIA: Dank je wel. 

[00:04:28] DAVID J. MALAN: Dank je wel. We zullen op te hangen aan deze, maar we zullen geven u-- wat dacht je van een stress-bal hier? Oh, en-- if-- ja, bedankt. Prima. Dus voor de nieuwsgierigen, als je onbekend met de verantwoorde keuze die we daar gemaakt eerder, een geweldige TV laten zien dat je moet absoluut be-binge-kijken op Netflix is dit één hier. 

[00:04:51] SPEAKER 1: Dames en heren, een tovenaar genaamd Josh. 

[00:05:04] DAVID J. MALAN: En blijkbaar, het is een ding om tekst mij tijdens college nu. Ik word verteld dat Maria had een verjaardag gisteren. Dus gelukkige verjaardag uit CS50 aan Maria ook. 

[00:05:18] Dus je hebt kunnen lezen in de afgelopen maand dat deze heren hier, Steve Ballmer, die eigenlijk was klasse van 1977 aan het college, onlangs gepensioneerde voor Microsoft. Hij was een undergraduate hier, vervolgens een paar jaar later bevond zich op Stanford Business School toen hij een telefoontje kreeg bel via een vriend van hem, die had de zaal leefde beneden van hem hier op Harvard. Naam van die vriend was Bill Poorten, en tegelijkertijd, hij probeerde te rekruteren Steve te zijn de eerste zakelijke persoon, echt, bij een klein bedrijf te noemen Microsoft. 

[00:05:45] Een lang verhaal kort, Steve werd uiteindelijk gewonnen, trad Microsoft wanneer ze had slechts 30 medewerkers. En tegen de tijd dat hij gepensioneerd vrij recent, had het bedrijf 100.000 werknemers in de afgelopen jaren. En dus een website die bekend staat als The Verge voorbereid dit eerbetoon op video dat we dachten dat we zouden gedeeld, dat geeft je een gevoel van hoeveel energie Steve brengt aan een presentatie die hij geeft. [VIDEO AFSPELEN] -Microsoft Is net een vierde kind. Kinderen doen het huis verlaten. In dit geval denk ik Ik ben het verlaten van het huis. Hey Bill, whazzap? 

[00:06:23] -Wazzap? 

[00:06:24] Hé, wazzap? We hebben gekregen enorme kans. En Bill gaf ons die kans. Ik wil Bill bedanken. Ik wil dat je ook. Het tempo van innovatie is niet van plan te vertragen. 

[00:06:42] Het gaat sneller en sneller te krijgen. Er kunnen een paar concurrenten die helaas worden geëlimineerd! 

[00:06:54] Ik hou van dit bedrijf. Yes! Ik ben een PC, en ik hou van dit bedrijf! 

[00:07:08] Ontwikkelaars, ontwikkelaars, ontwikkelaars, developers, developers, developers, ontwikkelaars, ontwikkelaars. Yes! Webontwikkelaars! 

[00:07:19] Webontwikkelaars! Webontwikkelaars! Luister naar wat je nog meer krijgen zonder extra kosten! 

[00:07:28] De MS-DOS-executive, een afspraak kalender, een kaart stapel, een notitieblok, een klok, een bedieningspaneel. En, kan je het geloven? Reversie! 

[00:07:35] Brand ze op een cd! Post ze op MSN! Je mail ze aan vrienden! 

[00:07:40] Allemaal met één klik! Een Microsoft, één strategie, één team-- geconcentreerd, gedisciplineerd, professioneel, en expert in alles wat we doen. Laat ik gebruik maken van een regel uit een oude film. 

[00:07:52] Relaties zijn net als haaien. Ze bewegen zich naar voren of ze sterven. Ik denk eigenlijk tech bedrijven zijn hetzelfde. 

[00:08:01] [END VIDEO AFSPELEN] DAVID J. MALAN: Dus we zijn zo blij om aankondigen dat Steve ons zal vergezellen hier in CS50 komende woensdag om de gebruikelijke plaats en tijd hier. Space zal waarschijnlijk beperkt zijn. En dus om samen met ons in persoon, dan kunt u ga vandaag of kort daarna naar cs50.harvard.edu/register. 

[00:08:22] En we zullen volgen door Dinsdag bevestigt vlekken. Kijk uit naar die volgende Woensdag tijdens de lezing in CS50. Nu, in ander nieuws, ik toevallig tegenkomen dit in The Crimson net de andere dag. 

[00:08:34] Het blijkt dat een van de medewerkers CS50's en ten minste één van de CS50-studenten is momenteel actief voor UC president en vice-president, die me terug bracht om mijn eigen dagen terug toen verloor ik de UC verkiezing jammerlijk. Maar de zilveren randje in dat ik altijd vertellen het verhaal is dat een van de ik weet zeker vele redenen waarom ik verloor de verkiezing was een compleet gebrek van een talent voor spreken in het openbaar. En dus eerlijk gezegd, het reed me, die ervaring Ik denk dat mijn junior jaar, om daadwerkelijk te ondertekenen up voor Harvard Computer Society, die is de groep op de campus dat heeft diverse technische besprekingen en andere dingen. En ik nam het over hun onderwijs seminars en daarom had een kans, een prachtige kans, te gaan werken precies dit op. Maar ook, ik had een kans Tijdens deze ervaring om mezelf te leren alle informatie HTML. En dus ik procrastinated gisteravond door kijken door de HTML-gebaseerde website Ik maakte in zoals 1997, '98, voor mijn campagne die ziet er zo uit hier. Ik weet het. 

[00:09:29] Because-- en natuurlijk, kennisgeving deze geweldige ontwerpbeslissing in 1998 of wat al niet. Het eerste wat je wilt dat gebruikers te doen bij het bezoeken van uw website is om naar een andere link klikt gewoon naar uw website te gaan met de monnik achter als een gehuld gordijn waar blijkbaar mijn campagne platform was. En dit is alles wat je krijgt vandaag de dag is gewoon een screenshot. Maar ik was het lezen door, net als, mijn campagneposters gisteravond en mijn platform. 

[00:09:50] En ik was zo boos op het moment. Mijn platform was-- het was interessant. Dus ik heb gekalmeerd sindsdien. Maar op een dag, zal ik weer lopen en hopelijk beter af deze keer. 

[00:10:03] Dus HTML, die taal waarin ik gemaakt dat in-- zul je al snel te maken veel more-- is iets waar we zijn geweest het over van de late en grotendeels zaken waarnam verleend dat we verhuisd naar andere talen. Maar laten we pauzeren voor een moment en zet een aantal van deze dingen in context. Dus in zekere zin, wat is HTML? 

[00:10:18] Of, wat wordt gebruikt voor? Anyone? Ja. 

[00:10:20] Publiek: Markup voor websites. DAVID J. MALAN: Markup voor website. Dus het is een opmaaktaal die kunt u een webpagina te structureren. Header gaat hier op, titel gaat hier, lichaam gaat hier. Dit vet is, is italics-- dat soort details. 

[00:10:33] OK, goed. Dus CSS laat je-- en ik nam wat vrijheden er met het vet-facing en cursief, omdat Dat is beter geïmplementeerd met dit. CSS is-- wat? Zeggen in een zin. Wie dan ook. Yeah. 

[00:10:46] PUBLIEK: Versieringen en dingen, zoals hoe om het te ontwerpen. DAVID J. MALAN: OK, goed. Versieringen die u toelaten om het te ontwerpen of te stileren het met dingen als boldface en cursief en kleuren en ook meer fijne korrel positionering van elementen. Het laat een soort van je dingen het nemen laatste mijl zodat indien bijvoorbeeld, in Pset7, zou je hebben gemerkt op uw portfolio pagina als je op dit punt al dat een standaard tabel die u leveren aan de gebruiker aandelenposities tonen en cash ziet er waarschijnlijk vrij afzichtelijk standaard zonder witruimte. Soort gepropt Everything's elkaar in rijen en kolommen. 

[00:11:18] Nou, met een beetje CSS, zoals u wellicht denkt, je daadwerkelijk kunt tweaken dat en maken het iets veel vertrouwder en nog veel mooier om naar te kijken. Dus CSS gaat over de stilering van websites. Maar dan nog een introduceerden we taal, PHP, die ons laat doen wat? 

[00:11:36] Laten we gewoon doen wat? Iedereen. Kreeg naar buiten wagen de eerste paar rijen. Yeah. 

[00:11:40] Publiek: Genereer dynamische inhoud. DAVID J. MALAN: Perfect. Genereer dynamische inhoud. En u kunt dit doen in een onbeperkt aantal talen. We gebeuren om PHP te gebruiken, want het is deels zo vergelijkbaar met C syntax. 

[00:11:50] Maar PHP doet precies dat. Het laat je dynamisch genereren output. En sommige van die uitvoer zou kunnen zijn HTML, zoals we meestal gedaan. En het is ook, omdat het een programmeertaal, is het mechanisme via welke kunnen we databases praten. 

[00:12:03] En we kunnen queries te maken andere servers zoals Yahoos en programmatisch iets te doen echt dat je misschien anders willen een computer te dwingen te doen. Dus PHP laat ons beginnen dynamisch uitvoeren content. Dus door deze logica, had ik niet een dynamische website terug in 1998. 

[00:12:16] Het was gewoon een statische webpagina. Mijn inhoud moest door worden veranderd handmatig met gedit of een equivalent. Maar PHP is wat we vroeger of had kunnen gebruiken, in plaats van, voor iets als de Frosh IMs website, die werd verondersteld om registraties te nemen en beheren van een lijst van users-- dingen die zijn eigenlijk de omschakeling tijd, hoewel we er gebeuren Perl, een ander gebruik taal tijd. 

[00:12:35] En dan tot slot, we geïntroduceerd SQL-- Structured Query Language. Toch zo een andere taal die wordt gebruikt voor wat? Gebruikt voor wat? Kunnen we slight-- wagen OK, we gaan niet om veel verder te krijgen dan het orkest hier. Publiek: Het is een protocol gebruikt om databases te praten. DAVID J. MALAN: Een protocol gebruikt om databases te praten. Laat me tweaken. Het is een natuurlijke taal gebruikt om databases-- selecteert om te praten en inserts en verwijdert en updates en eigenlijk nog meer functies die we hebben nog niet eens gedoken in, maar wilt u misschien explore-- hebben te verkennen voor, laten we zeggen, een afstudeerproject. Dus er zijn deze verschillende stukken. 

[00:13:09] En hopelijk Pset7, ook al de specificatie is vrij lang, het is opzettelijk lang om je loopt door middel van hoe deze dingen kunnen allemaal samen worden getypt. Nu, op maandag, we introduceerde onze laatste taal dat we formeel zullen introduceren in de course-- dat is, JavaScript. Dit, zoals PHP, is een geïnterpreteerde taal. 

[00:13:25] Maar een belangrijk onderscheid Ik op maandag voorgesteld is dat waar PHP wordt uitgevoerd of worden geïnterpreteerd aan de server, die in dit geval is het CS50 apparaat, of misschien een commerciële web zijn server op het internet, JavaScript algemeen is een taal die client side loopt geen server side-- dus in de browser. Dat wil zeggen, net als toen ik opende up Facebook broncode en vond al van die .js bestanden, de implicatie was dat wanneer je Facebook of bezoek de meeste websites deze dagen, krijg je niet alleen HTML, niet alleen CSS, maar een hele hoop van JavaScript code vaak in de vorm van .js bestanden. En dan is het de browser-- uw eigen Mac of PC-- dat die code uitvoert. 

[00:14:03] Maar uw browser voert deze uit. U kunt hierbij denken aan een soort van een zandbak. Dus dat JavaScript-code niet zou moeten zijn in staat om bestanden te verwijderen op uw computer. Het moet niet kunnen stuur e-mails op uw rekening. Uw browser soort inperkt wat je ermee kunt doen. 

[00:14:17] Dus in die zin, het is een beetje minder krachtig, misschien, dan C. Maar JavaScript kan, als terzijde worden gebruikt op de server, maar we zullen niet geneigd zijn om te praten over het in die context. Dus nu laten we binden deze samen. Een week plus geleden presenteerden wij een aantal HTML op de left-- super saai webpagina. 

[00:14:34] Gewoon zegt hallo wereld. En dan over de voorgestelde I recht kunnen we soort ideeën te stelen uit onze bespreking van datastructuren in C en na te denken over hoe dit hiërarchische opmaaktaal op de linker konden worden getrokken of in het geheugen uitgevoerd als een feitelijke boomstructuur met knooppunten en pointers en dat soort details. Aan de rechterkant, noemen we dat een DOM-- Document Object Model-- die net een mooie manier om te zeggen boom. 

[00:14:56] Nu, waarom is dit nuttig om denk aan het op deze manier? Want nu met JavaScript, want we hebben code die krijgt om te spelen in deze milieu, de werkelijke HTML die naar de browser gestuurd al en heeft al door de in het geheugen geladen browser in een boom in uw computer RAM als deze, kunnen we gebruik maken van JavaScript om daadwerkelijk te doorkruisen of lopen of zoekopdracht of te wijzigen dat DOM boom maar we willen. Dus in feite, als je denkt over facebook.com, als je de chatfunctie gebruiken, als je gebruik Gmail en de functie Gchat, iets waar je berichten opnieuw en opnieuw weer, die berichten waarschijnlijk, als, LI tag, Lijstitem labels, misschien. 

[00:15:35] Of misschien zijn ze gewoon divs die blijven verschijnen elke keer krijg je een instant message. En dus dat betekent gewoon wat Facebook of Google aan het doen is wordt elke keer krijg je een bericht van de server, ze zijn waarschijnlijk met behulp van JavaScript om gewoon toe te voegen ander knooppunt deze tree-- ander knooppunt deze boom die vervolgens visueel ziet er gewoon als een nieuwe regel tekst op je scherm. Maar ze zijn het invoegen in de gegevensstructuur. 

[00:15:57] Dus in klassen zoals CS124 en anderen, zal je eigenlijk meer schrijven code tegen datastructuren als deze. Maar voor nu in JavaScript, zullen we gewoon aannemen we krijgen al deze functionaliteit gratis van de taal zelf. Dus laten we eens kijken naar een voorbeeld. 

[00:16:09] Laat me het openen van een bestand form.html genoemd. Het is super eenvoudig. Het ziet er gewoon zo uit. 

[00:16:15] Geen CSS, geen aandacht aan esthetiek. Het is puur functioneel en blijkbaar ben ik vragen om een ​​e-mail, een wachtwoord, weer vergeten, en dan een cheque in te stemmen met een aantal voorwaarden. Wat de broncode voor deze ziet er is waarschijnlijk iets je kunt raden met een beetje denken nu. Ik heb hier een form tag. 

[00:16:32] Een actie is blijkbaar gaat naar een bestand register.php genoemd. De methode die ik ga gebruiken is te krijgen. En dan heb ik een tekst heb gebied waarvan de naam is e-mail. 

[00:16:40] Ik heb een wachtwoord veld kreeg wiens naam is vergeten. Ik heb een ander gekregen wachtwoord veld wiens naam is enigszins willekeurig bevestiging. Het is gewoon een andere HTTP-parameter. 

[00:16:49] En dan hebben we we deze gebruikt, behalve sinds de Frosh IM demo in class-- een selectievakje dat is gewoon soort gelijk check. En ik zal die overeenkomst noemen. Dus ik heb soort van willekeurig, maar gunstig noemde deze gebieden. Zodat nu wanneer deze vorm krijgt ingediend, laten we eens zien wat er gebeurt. Als ik dat doe malan@harvard.edu, Ik zal een wachtwoord van karmozijnrode doen. Ik zal een wachtwoord van niets doen. Laten we niet meewerken. 

[00:17:10] En ik zal niet het vakje. Laat me klik op Registreren. En het zegt, hm, je bent geregistreerd. Niet echt. 

[00:17:16] Maar de URL veranderd. Dus dit formulier werd duidelijk toegestaan naar register.php te onderwerpen. Maar vermoedelijk, zou ik zijn vangen sommige van deze fouten. Nu, in Pset7 en sommige van onze lezing voorbeelden, we zouden in het algemeen uit te printen een grote rode foutmelding hier zeggen, ontbrekende naam, of ontbrekende wachtwoord. We hebben dat eerder gedaan en we hebben done server side foutdetectie. 

[00:17:37] Maar veel websites deze dagen client-side foutdetectie doen waar de URL niet wordt gewijzigd. De hele pagina niet vernieuwd. U krijgt direct feedback van de browser. Misschien iets gaat rood. 

[00:17:48] Misschien krijg je een pop-up. Maar je hoeft geen tijd te verspillen verzenden naar de server data dat is incompleet. Dus laten we eens kijken hoe we zouden kunnen bereiken die functie ook. 

[00:17:56] Laat me gaan naar form1.html, die ziet er hetzelfde uit. Maar als deze keer doe ik malan@harvard.edu en ik typ karmozijnrode en ik wil niet verder mee te werken maar klik Register, merk nu. Het is niet de meest sexy oplossing. Ik heb in ieder geval gevangen deze fout. En ik heb de waarschuwing gebruikt functie in JavaScript-- die we alleen gebruikt in de klas. In het algemeen moet je dit niet gebruiken want het kan heel snel uit controle. Maar wachtwoorden niet overeenkomen is de fout. 

[00:18:19] Laat me ga je gang en klik op OK. Maar wat de sleutel mee te nemen hier dat de URL niet veranderen. Dus ik heb niet de moeite genomen te verdoen de tijd van de server met het verzoek een vraag die ik zou kunnen hebben bedacht het antwoord op mezelf. 

[00:18:30] En de gebruiker, hoewel gesproken over deze langer dan de gebruiker gaan denken over dit, gaat om directe feedback te hebben. Er is geen latency met de netwerkconnectiviteit. Dus laten we eens kijken naar deze broncode. 

[00:18:40] Form1.html looks structureel gelijk hier boven. De vorm is in feite hetzelfde. Maar laten we eens kijken wat ik deed hier beneden. En er is op verschillende manieren om dit te doen. En ik heb gedaan de meest straight volger, maar niet de meest elegante manier nog. Ik heb een script tag. Ik roep dan document.getElementById ('registratie'). En ik bewaar die waarde in vorm, een variabele. 

[00:19:04] Dus wat heb ik gedaan? U kunt denken aan document.getElementById als zijnde een speciale functie die JavaScript geeft u dat letterlijk handen u een pointer naar een van de knooppunten of rechthoeken in deze boom. Dus nu dat is wat ons formulier variabele in JavaScript is eigenlijk wijzend op. 

[00:19:21] Dus nu de syntax is anders C. Maar we zijn een paar dingen hier doen. One, deze is een beetje vreemd zoek, zeker ten opzichte van C. Maar kijk eens naar lijn 35. Dus aan de linkerkant form.onsubmit. Bedenk dat onsubmit is als een veld in een struct. Als je denkt aan de vorm variabele is gewoon een C struct, het zou kunnen hebben een aantal velden. 

[00:19:42] Terug in de dag, hadden we studenten namen, Id's, huizen, dat soort velden. Denk maar aan onsubmit als een ander veld. Maar het is een speciaal veld, omdat de browser is voorgeprogrammeerd om te verwachten .onsubmit tot een waarde niet zoals een getal of een tekenreeks, maar eigenlijk een functie zijn of het adres van een functie in het geheugen van de computer. 

[00:20:02] En inderdaad, dat is wat dit sleutelwoord hier doet. Dit zegt, geef mij een nieuwe functie. Maar wat is zijn naam gaat worden, blijkbaar? 

[00:20:09] Terugdenkend aan maandag. Wat is de naam van deze functie op basis van deze syntax? Nee, ik bedoel, er is duidelijk geen naam associated-- zeker niet in wat ik hier heb gemarkeerd. 

[00:20:21] Maar dat is eigenlijk OK. Dit is een anonieme functie, of een lambda-functie zoals sommigen het noemen. En dat betekent het is nog steeds een functie. Het is gewoon, je kunt het niet noemen bij naam. Maar dat is OK. Omdat meer heeft de browser is voorgeprogrammeerd door bedrijven als Google of Microsoft of Mozilla of anderen te weet gewoon dat als de .onsubmit veld binnenkant van een vormelement heeft waarde, behandel het als een function-- een functie pointer, als je wil. En noem het wanneer het formulier wordt ingediend. 

[00:20:46] Wat code worden uitgevoerd wanneer het formulier wordt ingediend? Blijkbaar, alles binnenkant van de accolade. En dit is slechts stilistische. 

[00:20:53] Je zou dit kunnen doen, zoals hebben we de neiging om te doen in CS50. Maar in JavaScript, de meeste mensen de neiging om het op dezelfde lijn te houden alleen omdat het duidelijker is geassocieerd met dat zoekwoord functie. Dus nu wat doe ik? 

[00:21:03] Als form.email.value gelijk gelijken de lege string of niets, hier is Een waarschuwing waar ik ga zeggen, moet u uw e-mailadres op te geven, en dan return false. En het is dat terugkeer vals dat voorkomt dat het formulier wordt ingediend. Ondertussen, als het wachtwoord waarde leeg, ik ga schreeuwen tegen de gebruiker en zeggen, je moet een wachtwoord te voorzien. 

[00:21:21] Ondertussen dingen worden steeds een beetje liefhebber hier. Als form.password.value niet gelijk form.confirmation.value, het andere veld, schreeuwen tegen de gebruiker dat de wachtwoorden niet overeenkomen zij deed geen moment geleden. En dan is dit één is een beetje sexier omdat ik weet dat ik wist dat conceptueel gecontroleerd is de naam van een selectievakje's. 

[00:21:40] Dus ik kan gewoon gebruik maken van een uitroepteken punt om te zeggen als de controle niet checked-- het is de Booleaanse waarde, waar of false-- Ik zal schreeuwen tegen de gebruiker om die reden. Anders, als we door al deze voorwaarden, laten we gewoon return true. Laat het formulier worden ingediend. En dit zal dan gebeuren. 

[00:21:56] Laten we eens in karmozijn. Laten we het vakje, klik op Registreren. En nu ga ik door naar de bestemming. Nu, er is geen database-er. Er is niets interessant in register.php. Ik gewoon iets nodig om daadwerkelijk te praten. Dus laat me pauze, hier. Heeft u vragen over wat we zojuist hebben gedaan of wat sommige van deze nieuwe syntaxis is? OK, ja? 

[00:22:17] Publiek: Dus elke checkbox is automatisch een Booleaanse. Je hoeft niet om het te verklaren als dat. 

[00:22:21] DAVID J. MALAN: Correct. Elke checkbox die naar u verzonden is vanuit een HTML-formulier aan uw JavaScript-code worden behandeld, ja, als Boolean value-- waar of onwaar. Het is een goede vraag. Overwegende dat de andere waarden, van Natuurlijk hebben tekst, AKA strings geweest. 

[00:22:36] Oké, dus laat me terugspoelen een beetje verder. Wat was het hele punt van deze? Even voor de duidelijkheid. Zoals we al weten, zelfs vanuit Pset7 en zelfs uit lezing van vorige week voorbeelden, die we uiteraard kunt controleren $ _GET $ _POST Te zien of de gebruiker geven ons een lege waarde. Denk aan de lege functie in PHP. 

[00:22:54] Dus gewoon om duidelijk te zijn, wat is er een reden kunnen we ook willen deze foutcontrole doen binnenkant van de browser? Wat is de motivatie hier? Yeah. 

[00:23:06] PUBLIEK: Sneller, en jij niet Stuur nutteloze data naar de server. DAVID J. MALAN: Goed. Het is sneller. Je hoeft niet te sturen nutteloos gegevens naar de server. 

[00:23:12] Dus een meer krijg je terug onmiddellijke reactie. En in het algemeen, de gebruiker ervaring beter. Denk na over het alternatief. 

[00:23:17] Als om Gmail-- en was Voor vele jaren geleden. Stel dat je een nieuwe e-mail uw Gmail rekening, maar de enige doorgang zien dat is, als, herlaad de hele pagina. Of stel dat u op een link naar een e-mail te lezen. 

[00:23:29] Alles moet dus herladen dat u de e-mail kan zien. Of Facebook-- u een chatbericht te krijgen. Je ziet het niet, totdat u herladen de pagina of klik op een aantal link. 

[00:23:36] Als, dit zou verschrikkelijk zijn een vervelende gebruikerservaring. En dit is hoe het was, duidelijk, toen ik liep voor UC en het web was veel minder dynamisch JavaScript en was niet zo populair zoals het nu is. En de dingen zijn veel krijgen dynamischer en nog veel meer client-side in die zin. 

[00:23:49] Maar er is een catch hier, en Dit is een soort van een vervelende gotcha. Gewoon omdat je client side toevoegen detectie als dit betekent niet je kan of moet laten varen server-side detectie. U wilt wezen om uw zetten foutcontrole in beide plaatsen. Want wat was één van de les geleerd uit het artikel dat ik las enkele fragmenten uit met deze domme CMS system-- Content Management System-- dat was de uitvoering van haar authenticatie systeem, zijn ingelogd via welk mechanisme? JavaScript. 

[00:24:20] Publiek: JavaScript. DAVID J. MALAN: JavaScript, precies, toch? Het werd met behulp van JavaScript. En letterlijk, jullie hebben speelde een beetje waarschijnlijk met Chrome Inspector. En als ik het kan vinden, inspecteer element. 

[00:24:30] Laat me gaan over te doen alle opties van Chrome. En dit is hoe gemakkelijk het is om JavaScript uit te schakelen in een browser. Controleren, niet meer JavaScript. 

[00:24:38] Dus in alle eerlijkheid, heel veel van het web deze dagen is gewoon te breken omdat Gmail en andere sites-- Facebook-- veronderstellen dat JavaScript is ingeschakeld. Maar als je iets stoms doet zoals alleen valideren van gebruikers invoeren te controleren en daarna fouten op de client, een tegenstander kon dit gemakkelijk doen. En dan nog slimmer tegenstander als jullie nu kon Telnet of Curl gebruiken of gewoon command line commando's en eigenlijk berichten naar de server die op dezelfde wijze zijn niet foutief zijn gecontroleerd. 

[00:25:05] Dus dit is meer een gebruikersinterface beslissing dan is een feitelijke technisch improvement-- uitvoering iets client side als deze. Dus nu een snelle blik, maar dan Ik zal uitstellen tot de online wandeling door voor deze. In de vorm van twee, we gingen eigenlijk door en het opruimen van de code een beetje. Maar laat mij uit te stellen naar een van de video's die we zullen waarschijnlijk embed in Pset8 die net toont u een gelijkaardige syntax met behulp van een bibliotheek genaamd jQuery, een super, super populaire bibliotheek in JavaScript dat eerlijk gezegd de meeste mensen gewoon gebruik maken van deze dagen en zelfs verwarring als wezen JavaScript zelf. 

[00:25:37] En neigt te betrekken sommige dollartekens en trefwoorden als document haakjes hier. Maar nogmaals, laat me uit te stellen tot sommige langzamere tutorials online in plaats van omhoog vastgebonden in slechts syntax. Laten we overgaan tot iets koeler in termen van de toepassingen ervan. 

[00:25:50] Dus in het bijzonder, laat me gaan vooruit en open deze hier. Kom op. Daar gaan we. 

[00:25:59] Laat me deze foto hier openen. Onnodig ingewikkeld kijken, maar het beschrijft een techniek genaamd AJAX-- Asynchronous JavaScript en XML, waar de X voor XML is eigenlijk niet meer echt gebruikt. Het heeft de neiging om iets te gebruiken anders genaamd JSON. 

[00:26:13] Maar hier is hoe zoiets Google Maps of Google Earth werkt. Laten we proberen dit op de vlieg, eigenlijk. Laat me gaan en openen Chrome op mijn browser. 

[00:26:21] En laat me gaan in, zeggen, maps.google.com. En eigenlijk, als je oud bent genoeg om te herinneren wat, als, MapQuest was net terug in de dag, en misschien zijn ze nog steeds werken als volgt. Wanneer u gebruikt om te zoeken naar something-- 33 Oxford Street, Cambridge, Mass, laten we dit-- doe je zou eigenlijk, als je wilde pan en omlaag, naar links en naar rechts, je zou eruit zien als een grote pijl op de top, en het zou je een ander laten zien frame van de kaart hier. Of zou je klikt links en je zou hier gaan, of nog een klik en je zou hier gaan. Maar deze dagen, we natuurlijk gewoon voor lief nemen dat we kunnen gaan rond Cambridge vrij snel gewoon door te klikken en te slepen. Maar let op er is een aantal glitches. 

[00:26:59] Als ik dit doe snel genoeg, wat lijkt te gebeuren als ik sleep een beetje te snel voor de computer om bij te blijven? Wat zie je? Yeah. 

[00:27:07] Publiek: De pixels niet vernieuwen. DAVID J. MALAN: De pixels niet vernieuwen. Er is actually-- en je zou dit kunnen zien, eigenlijk, als je online en pauze kijken dit of eigenlijk vertraagt ​​dingen naar beneden voor once-- je zult zien dat er tegels, vierkanten, rechthoeken of dat ontbreken in de kaart tot een fractie van een seconde later, meer data, meer beelden eigenlijk op het scherm verschijnen. En inderdaad, als we dit doen door te kijken up Chrome's-- laten we zeggen, Chrome-- laten we eens kijken. Wij kunnen dat niet. 

[00:27:31] Oh, whoops. Laten we openstellen maps.google.com. Laat me opnieuw te maken het raam groter. 

[00:27:36] Ga terug naar 33 Oxford Street. Wat was de website was ik op onlangs? Ik had dit, zoals, privé rant aan mezelf dat ik zou dan instant message elke vriend die online was die het wilde horen. Er is wat de website. Ik denk dat het Comcast-- zo een zeer grote Amerikaanse ISP. Kunt u, wanneer u zich aanmeldt voor nieuwe kabel modem dienst of kabel-tv-dienst, ze hebben een vorm zeer redelijk waar ze je vragen om uw adres. En hebben deze geweldige functie genaamd auto volledige, zoals Google, die begint in te vullen in het antwoord op uw vraag. 

[00:28:04] Het probleem is, dat doen ze automatisch aanvullen op de eerste dingen die je typt. Dus als je begint te typen in 33, het zal je letterlijk zien elk huis in Amerika die begint met het nummer 33 voordat u verder gaat naar verwachten dat je meer te typen. Dus als je typt 33 Oxford, dan blijkt dat je elke straat in Amerika, dat 33 Oxford in heeft zijn naam, ongeacht de stad dat u zich bevindt. 

[00:28:25] En dan moet je doorgaan met typen. Tenslotte realiseert dat zij niet bieden service om uw huis in Cambridge of iets dergelijks. Maar het punt is, dit is de meest stompzinnige uitvoering van auto voltooien ooit. 

[00:28:34] En ik ga gewoon af deze raaklijn weer. Maar er zijn goede manieren om JavaScript gebruiken en slechte manieren. En dat is niet per se de beste. 

[00:28:40] Maar het punt hier, voordat deze tirade, was om hier neer te openen up tools en open developer tools, zoals we eerder hebben aangemoedigd, en om het netwerk te kijken tab als ik klik echt snel. En merken een hele hoop van krijgen verzoeken gebeurd. Dit alles gebeurd sinds ik sleepte. 

[00:28:57] En het meest waarschijnlijk, inderdaad veel van deze rijen nu zijn afbeelding slash JPEG MIME-types of content types. Dat komt omdat wat chroom aan het doen is elke keer als ik klik en sleep, klik en slepen, is het realiseren van, oh, I moeten gaan vragen Google voor de tegel op de kaart dat is meer dan hier, snel downloaden via HTTP, en voeg vervolgens de zogenaamde DOM aan de webbrowsers in het geheugen boom vertegenwoordiging, zodat de gebruiker, me, ziet dat bijgewerkt tegel. En dit is vanwege een techniek genaamd AJAX. Terug in de dag, het is echt zo dat was als je wilde veranderen wat er op het scherm, je zou moeten klikken omhoog, omlaag, naar links, rechts. En dan een nieuwe pagina zou openen. Maar deze dagen, alles dynamischer. Het gebeurt in de manier waarop wij mensen zouden hoop dat het ook daadwerkelijk zou interactief. En bereikt dit door middel van een techniek genaamd AJAX, dat is misschien het best verklaard door een voorbeeld. Ten eerste wil ik doorgaan en het openen van een bestand riep quote.php in de huidige verdeelsleutel. 

[00:29:53] En dan laat ik doe symbol-- whoops. Laat me symbool doen = GOOG voor slechts enkele op voorraad. Of eigenlijk, laten we de één van de Pset GRATIS. Enter. 

[00:30:05] En let nu op wat ik terug ben. Dus dit is een echt korte PHP-bestand dat ik schreef dat gewoon leent code uit Pset7 de lookup functie en spuugt het gebruik van deze accolade en offertes en colon notatie blijkbaar prijs voor de de huidige voorraad is bedrijf dat u passeert in via get. Dus dit is anders van de meeste van wat we hebben gedaan in die aankondiging Ik ben letterlijk uitspugen wat eruit ziet als JavaScript-code. 

[00:30:27] In feite is dit een JavaScript object. In feite, om meer duidelijk, JavaScript Object Notation-- JSON-- is gewoon een mooie manier om te zeggen dat je kunnen gegevens vertegenwoordigen in JavaScript veel als je kunt in PHP met behulp van sleutel waarde paren. Dus als ik wilde verklaren een variabele JavaScript tot vertegenwoordigt Zamyla voor instance-- een structuur voor Zamyla-- en we noemen het student, deze variabele. Haar ID is één, het huis ligt Winthrop, en de naam is Zamyla. 

[00:30:53] Maar ik kan ook een array van objecten. Dus als ik eigenlijk wilde hebben een array in JavaScript bevattende meerdere dergelijke objecten, dit de tijd die het personeel vertegenwoordigen, Ik zou deze drie hebben delen code terug om een ​​back to back voor deze drie voormalige medewerkers. Dus de syntax, mooie vergelijkbaar met beide-- naar PHP. Maar dit is bijzonder JavaScript. Het is object notatie. Dus wat is dit nuttig voor? 

[00:31:17] Als ik schrijf code die spuugt JSON-- JavaScript Object Notation-- spul dat ziet er zo uit of dingen die lijkt op de structuur Zamyla's, Ik kan dit eigenlijk gebruiken in programma's die ik schrijf. Laat me gaan naar ajax0.html. En dit too-- niet veel dacht gegeven aan esthetiek. Maar kijk wat er gebeurt. 

[00:31:34] Laat me ga je gang en typ hier gratis. Klik op offerte aanvragen. En let op de URL is niet veranderd. Maar ik heb wel een pop-up met blijkbaar vandaag penny stock prijs van $ 0,15. Dus niet zo slecht. Maar het verschil is dat een of andere manier, deze gegevens kwam terug om me direct. Maar laten we een stap in de richting iets meer vertrouwd. In versie één van deze, laat me Typ weer vrij, klik op Get citaat, en now-- oh, dit was eigenlijk de jQuery versie. Dus laten mij-- ik niet fast-forward vrij ver genoeg. Laat me gaan naar versie twee, dat is waar ik wilde. Let op wat ik hier heb gedaan. Ik heb een web page-- een super eenvoudige versie van een webpagina je zou kunnen gebruiken vandaag met een tekstveld hier voor de gratis en dan blijkbaar gewoon tekst. 

[00:32:14] Dit is geen vorm hier, blijkbaar. Maar als ik klik krijg citaat, merkt mijn webpagina gaat veranderen alsof ik net een nieuwe instant message of alsof ik net verhuisd van de kaart en nodig om meer gegevens te krijgen dynamisch toegevoegd aan de webpagina zonder de URL veranderen en de gebruiker ervaring krijgen onderbroken. Inderdaad, ik ben nog steeds aan het exact dezelfde plek-- ajax2.html. 

[00:32:35] Dus laten we eens kijken alleen naar dit voorbeeld en zie hoe dit gebeurt. Laat me gaan in ajax2.html. En merk eerst de vorm. 

[00:32:44] Hierna ga ik draaien off automatisch aanvullen. Soms wordt het vervelend als de browser probeert je te laten zien je hele geschiedenis. Dus je kunt het doen in HTML door gewoon zeggen automatisch aanvullen uit. 

[00:32:53] Ik heb dit tekstveld een gegeven symbol-- eerder, een ID van het symbool. En nu, dit is een interessante eigenschap. We hebben nog niet gesproken over overspanning, maar je kunt er over nadenkt zoals een paragraaf tag of div tag. Het is wat een zogenaamde in-line element, dat betekent dat je een paragraaf niet boven en onder breken. Het gaat gewoon om te verblijven in-lijn zonder raken van het equivalent van in te voeren. Ik heb dus dit brok HTML gegeven te bepalen van een unieke identifier dat ik willekeurig geroepen prijs. En ik heb een knop Verzenden. 

[00:33:21] Omdat nu hier-- en dit is eigenlijk super verbazingwekkend hoe weinig code je kunt schrijven te doen relatief nette things-- let op wat ik hier heb gedaan als ik scrollen naar het hoofd van deze pagina. Ik heb voor het eerst in opgenomen mijn hoofd een script tag die eigenlijk verwijst naar een JavaScript-bestand elders. Dit is van de organisatie dat schrijft jQuery, En dit is slechts het geven u de meest recente versie van hun jQuery bibliotheek. 

[00:33:42] Dus dit is een soort scherpe onder meer in C of eisen in PHP. U gebruikt de script-tag een bron attribuut. Maar nu mijn eigen code is ga naar rechts in hier te zijn. 

[00:33:52] Let op, ik heb een functie genaamd Quotes. En het ziet er een beetje cryptisch op het eerste gezicht. Maar laten we plagen dit apart. Geef me een URL variabele genaamd. Wijs het letterlijk deze string. Dus, enkele aanhalingstekens, dubbele aanhalingstekens in JavaScript geeft me gewoon een string. Wat doet de plus te doen? Aaneenschakeling. 

[00:34:08] Dus dit is nu de jQuery syntaxis die duurt een beetje wennen. Maar dit betekent gewoon gaan halen me de DOM knooppunt wiens unieke identifier is symbool. De hashtag daar betekent unieke identificatie symbool. 

[00:34:21] Het dollarteken in de Haakjes gewoon betekenen, wikkel deze in jQuery een soort geheime saus zo krijg je extra functionaliteit. En dan is .val blijkbaar een functie, of zoals we nu zeggen, een werkwijze binnenkant van dit knooppunt die net geeft u de waarde. Dus in het kort, lelijk en verwarrend want dit ziet er op het eerste gezicht, dit betekent gewoon met de gebruiker getypte in, zet het aan het einde van de string door het aaneenschakelen van het. Dat is alles. 

[00:34:43] Dus nu, laatste drie regels. U kunt een heleboel knijpen functionaliteit van de drie lijnen. Dit dollarteken, als een terzijde, is gewoon een bijnaam een speciale globale variabele riep letterlijk jQuery. 

[00:34:55] Dollar teken ziet er gewoon cool. Dus de jQuery gemeenschap gewoon een soort gebruikte het als hun speciaal symbool. Het betekent niet dat wat het betekent in PHP. In JavaScript, dollarteken is net als een letter van het alfabet of een nummer van een variabele. 

[00:35:07] Je kunt gewoon het als de naam. Ziet er gewoon cool. Dus de gemeenschap het aangenomen als een bijnaam voor hun eigen bibliotheek genaamd jQuery. 

[00:35:13] En het is super populair. Dus maak je JSON is precies dat. Het is een functie die de mensen van jQuery schreef dat krijgt JSON uit een server-- JavaScript Object Notation. Van wat URL gaat het om die informatie te krijgen? Schijnbaar vanuit deze URL hier. 

[00:35:27] En wat moet de browser te doen als Zodra hij terug deze reactie? En dit is de magie van AJAX, om zo te speak-- Asynchronous JavaScript in XML. Het is moeilijk om te zien met een dergelijk simpel voorbeeld als we hier hadden. 

[00:35:41] Maar deze asynchrone was de zin dat mijn code wanneer uitgevoerd een bericht naar de server te gaan halen me wat JSON. En het gebeurde supersnel dat kreeg ik een reactie. Maar wat interessant is, is dat deze regel code had mijn computer niet hangen. 

[00:35:55] Ik zag geen een draaiende pictogram. Ik heb niet verliezen mogelijkheid om mijn muis beweegt. Mijn browser was eigenlijk prima. 

[00:36:01] Omdat de weg JavaScript behandelt de antwoord van de server is als volgt. U registreert wat je zou noemen een callback functie, die betekent gewoon, hey, JavaScript. Zodra de server antwoordt met JSON, kunt u bellen met deze anonieme functie. 

[00:36:18] En neem dan overgegaan in deze functie welke snaar de server uit te spugen als argument genoemd data. Dus in andere woorden, indien Ik ben het assembleren dynamisch een URL quote.php passeren in deze symbool zoals gratis of GOOG of wat, Ik ben dan vertellen JavaScript gaan halen die URL. Vergeet niet dat de browser gaat iets terug die eruit ziet als we zagen earlier-- dit. 

[00:36:42] En wat het tweede argument hier om JSON zegt wordt noemen deze functie wanneer de server terug krijgt of het nu 10 milliseconden vanaf nu tot 10 seconden vanaf nu. En zodra je dat doet, voeg de prijs aan de pagina. Deze syntax hier gewoon betekent ga krijgen het knooppunt van de boom waarvan unieke identifier is prijs-- die spanwijdte we eerder zagen. 

[00:37:01] Deze methode genaamd HTML gewoon zegt, gaan vervangen de HTML die is daar met data.price. Wat is data.price? Nou, de browser, herinneren, liet me dit terugkomen. Dus dit is data. 

[00:37:14] En dus is het een beetje cryptisch de komma's hier te zien. Maar in feite, laat mij dit doen. Laat me dit gewoon plakken echt snel in gedit en dit te laten zien, zoals we laten zien Structuur Zamyla's eerder. 

[00:37:27] Wat de server wordt het terugsturen is een klein voorwerp dat lijkt op dit. En zo data.price is alleen het geven van me 0,1515. Dus veel bewegende delen hier allemaal tegelijk. 

[00:37:39] Maar de sleutel afhaalrestaurants is dat we dit vermogen om extra HTTP maken aanvragen met behulp van JavaScript zonder de pagina te herladen. En dan kunnen we eigenlijk verander de webpagina op de vlieg. En het blijkt dat JavaScript en andere talen kan nu worden gebruikt niet alleen om webpagina's te muteren, maar om daadwerkelijk te schrijven software in een werkelijke computer, niet alleen beperkt tot Chrome of iets dergelijks. 

[00:38:00] In feite, if-- Colton, zou je willen ons hier mee terug met uw lab code, en Chang ook? Laten we verder gaan, hebben gesproken over anonieme functies en callbacks en echt het lot te verleiden hier met een live demo met bloeden edge technologie, een van deze Elite Motion apparaten. Nu, dit apparaat, recall, is een klein USB-apparaat evenals dat-- dat is beautiful-- die wordt aangesloten op uw USB-poorten. 

[00:38:25] En dan geeft input in de vorm van menselijke gebaren door detectie met infraroodstralen, wezen, de bewegingen van je arm. Dus terwijl wat Maria geprobeerd op vóór was gespierd, eigenlijk het gevoel wat er veranderen arm, dit infrarood gebaseerd. Dus het is op zoek naar bewegingen binnen het soort sfeer van een voet of zo van de inrichting zelf. 

[00:38:46] Dus waarom niet ik een gooi naar de eerste? En laten we verder gaan en gooien je op de overhead hier. Dus laten we Colton's laptop hier. We hebben Andrew op de TV. En wat zou je willen dat ik eerst doen? 

[00:39:00] COLTON: Ga je gang en net leg je handen over deze man en je zult zien een aantal fantastische glitter. 

[00:39:04] DAVID J. MALAN: Very nice. Dit gebeurt allemaal in real time. OK. Oké, en yep. Zo leuk. Oké, wat kunnen we anders doen? 

[00:39:15] COLTON: Ga naar het volgende scherm en zien. 

[00:39:17] DAVID J. MALAN: Oké. 

[00:39:19] COLTON: Een leuke game waar u krijgt om robots te maken. 

[00:39:21] DAVID J. MALAN: Oke, dus dit is nep handen waaruit blijkt wat ik moet doen. COLTON: Ja Dus ga je gang en pak een van de blokken en zet het op de top van het lichaam van die robot. DAVID J. MALAN: Oh, er is mijn hand. Oh. OK, schattig. Wacht even, OK. Daar gaan we. 

[00:39:41] COLTON: Ik maakte een op een ongeval. 

[00:39:43] DAVID J. MALAN: OK, ik zal deze man te krijgen. Damn it! Toen we het beoefenen van deze laatste nacht, weet je wat dit overgedragen in? 

[00:39:51] Net als dit. OK. Volgende? 

[00:39:55] COLTON: Tuurlijk. 

[00:39:56] DAVID J. MALAN: Oké, en er is een derde. Prima. COLTON: En in deze, krijg je to-- DAVID J. MALAN: Oh, De mooie deze. COLTON: --yeah, pick apart deze bloem. DAVID J. MALAN: OK. Nee? Gemist. 

[00:40:14] COLTON: Oh, daar ga je. 

[00:40:15] DAVID J. MALAN: Ah, kijk eens naar dat. Very nice. Nou, waarom niet 'we nemen uit een vrijwilliger hier die graag op komen. Hoe zit het daar in het groen, is het? 

[00:40:27] Oké, en laten we have-- in plaats van dat te doen, sommigen van jullie zou dit spel weten hier-- snijd het touw, misschien? Laten we eens kijken. We hebben onze glazen over meer dan hier? 

[00:40:37] OK. Dank u. Wat is je naam? 

[00:40:39] Publiek: Laura. 

[00:40:40] DAVID J. MALAN: Laura? Leuk om te zien. Als je het niet erg om Google Glass over uw bril. Dit is Colton. 

[00:40:46] COLTON: Hi. Leuk u te ontmoeten. 

[00:40:48] DAVID J. MALAN: OK, kom op rond. Oké, dus wat je gaat hier doen, hebben dit al eerder gespeeld, wordt uw hand niet op de Leap Motion hier. En nu je pijl moet bewegen. Oh, nope. 

[00:40:57] Publiek: No. 

[00:40:58] DAVID J. MALAN: Wij wil nog niet stoppen. OK, wacht. Meer dan hier. Dus merken als je houd je vinger over iets, de muis begint te gaan groen, dat is de manier waarop u klikt. 

[00:41:06] Dus zweven over Play. En slechts één vinger is prima. En nu klik op de kleine groene jongen aan de linkerkant. En nu vasthouden totdat het vult groen. Goed. Nu, als, niveau één boven. 

[00:41:16] Publiek: Ja, we willen level één, hier. 

[00:41:20] DAVID J. MALAN: Goed. OK, dus alles wat je hebt te doen is knippen het touw. Je cursor is de witte daar beneden. 

[00:41:28] Very nice. Oké, het gaat over om harder te krijgen. Dus houd je vinger voor de komende nu. Goed. Deze is hard. 

[00:41:39] Publiek: Oh onzin. OK. Het wil op die manier gaan. Oh crap, dat-- 

[00:41:44] DAVID J. MALAN: Yeah. Secundair doel is om alle sterren te krijgen. Oké, volgende. 

[00:41:53] Laten we eens kijken of je deze derde kan krijgen. Goed. OK, ga daar. 

[00:42:06] Tuurlijk. Oh, erg leuk. Prima. 

[00:42:11] Dus waarom doen we niet verdagen hier vandaag? Laat iemand komen op maximaal wie wil spelen. Hartelijk dank aan Laura onze vrijwilliger. En we zullen u op maandag. 

[00:42:18] Publiek: Wilt u waarschijnlijk deze terug. 

[00:42:21] SPEAKER 2: Bij de volgende CS50--