DAVID J. MALAN: Okej, så detta här är den Myo armen band, ett par som vi har för CS50 slutprojekt. Och det var en demonstration vi köade upp dig i förväg, där i stort sett denna ganska snäva arm band upp här lyssnar på dina muskelrörelserna som sedan mappas i programvara till Colton bärbara dator hit som hade iTunes och att song redan kö. I stället för mig demonstrera detta, Colton har varit i labbet klart hela veckan att få en demonstration redo för en modig volontär. Om någon skulle vilja komma på up-- såg din hand först. Kom upp. [00:01:09] Okej. Och vad heter du? 

[00:01:13] PUBLIK: Öh, Maria. 

[00:01:14] DAVID J. MALAN: Maria, trevligt att se dig. Kom över hit. Låt mig presentera dig för Colton. Colton, är det Maria. 

[00:01:21] COLTON: Hej, trevligt att träffas. 

[00:01:23] David J. MALAN: Alla höger, så steg ett, vi är kommer att ha du sätter detta på din underarm så att det är ganska tight upp nära armbågen. Och under tiden, låt oss ha sätta på vår Google Glass och vi kommer att blanda teknik idag. 

[00:01:33] COLTON: Först ska vi behöva haka detta in i saker. 

[00:01:36] David J. MALAN: OK. Faktiskt, låt oss sätta armen som nära denna kabel som möjligt så att vi först kan synkronisera upp. 

[00:01:41] COLTON: Låt oss göra detta. 

[00:01:42] DAVID J. MALAN: Och under tiden, så att alla kan få en närmare blick, vi ska kasta Andrews kamera upp på skärmen där. Så vi har en USB-kabel som är anslutas till Maria antog utmaningen. Och låt mig slänga Colton skärm upp på projektorn nästa. 

[00:02:00] Så Colton registrerar enheten nu som Myo ansluten till denna kabel. Och nu vad Marias kommer att göra en kort stund faktiskt gå igenom kalibreringsstegen och undervisa programvaran hur hennes muskler reagerar när hon gör vissa fördefinierade gester att programvaran förstår. Om du skulle vilja gå in framför skärmen. OK, fortsätta att försöka. 

[00:02:30] COLTON: Gå ut så här. Och så där. Och hela vägen till höger. Gå tillbaka. 

[00:02:35] David J. MALAN: OK. Annat perspektiv. Det är inte du. Det är för oss. 

[00:02:40] MARIA: OK. DAVID J. MALAN: Nej. Låt oss flytta den högre upp så det är närmare armbågen, eller ännu snävare. Okej. 

[00:02:52] Här går vi. Detta skulle vara en bra tid för CS52X. Det gå vi. 

[00:02:57] Mycket trevligt. OK. Thumb att pinky. 

[00:03:02] Mycket trevligt. Sprid fingrarna. Bra. Våg höger. Det är märkligt att visa du med vänster hand-- 

[00:03:17] COLTON: Ja, det är Yahoo. DAVID J. MALAN: Wave till höger och gå framåt. Snabbspolning framåt för att hoppa eller nästa. Det är OK Wave rätt. 

[00:03:25] MARIA: Jag don't-- vänta. 

[00:03:26] DAVID J. MALAN: Behöver du hjälp? 

[00:03:28] COLTON: Så du tänker så här. MARIA: Det vrida annan sak, dock. COLTON: Det är. DAVID J. MALAN: Ja jag vet inte varför det är att visa dig en leftie. COLTON: Varför inte du try-- bara försöka gå så här. 

[00:03:38] DAVID J. MALAN: Nej? Kanske når armen ut lite rakare och göra det mer abrupt såhär. Ja, OK, kom igen. 

[00:03:48] MARIA: Jag är ledsen. DAVID J. MALAN: Det är inte ditt fel. COLTON: Det är bra. DAVID J. MALAN: All Right. Well-- 

[00:03:56] MARIA: Ska vi hoppa över detta, då? DAVID J. MALAN: Ja, låt oss Låt dig ur knipan. Så om någon skulle vilja göra en lärdoms använda denna framkant hårdvara, inser det kanske bara ta lite tid att vänja sig. Och this-- verkligheten är detta är faktiskt mycket bleeding edge. 

[00:04:10] Detta är vad som kallas utvecklaren kit, som är tänkt att vara i huvudsak en pre-release så att människor kan göra precis this-- slåss med den, figur hur människors kroppar fungerar med tekniken. Så om du vill därefter, efter föreläsning, Vi kan låta dig komma och ta en annan hugg på det. Men annars, en applåd, om vi kunde, för Maria för att komma vidare upp. 

[00:04:26] MARIA: Tack. 

[00:04:28] DAVID J. MALAN: Tack. Vi ska hålla fast vid detta, men vi kommer att ge du-- vad sägs om en stressboll här? Åh, och-- if-- ja, tack. Okej. Så för den nyfikna, om du var obekanta med bra val att vi gjort det tidigare, en fantastisk TV visar att du bör absolut vara berusnings titta på Netflix är detta en här. 

[00:04:51] TALARE 1: Mina damer och herrar, en trollkarl vid namn Josh. 

[00:05:04] DAVID J. MALAN: Och tydligen är det en sak till text mig under föreläsning nu. Jag får höra att Maria hade en födelsedag igår. Så grattis på födelsedagen från CS50 till Maria också. 

[00:05:18] Så du kanske har läst i senaste månaden att detta kolleger här, Steve Ballmer, som var faktiskt klassificera av 1977 på högskolan, nyligen pensionerad för Microsoft. Han var ett grundutbildningsprogram här, sedan ett par år senare befann sig på Stanford Business School när han fick ett telefonsamtal Ring från en vän till honom som hade bott i korridoren från honom här på Harvard. Att kompis hette Bill Gates, och på den tiden, han försökte rekrytera Steve vara den första person från näringslivet, egentligen, på ett litet företag namn Microsoft. 

[00:05:45] En lång historia kort, Steve slutligen vann över, gick Microsoft när de hade bara 30 anställda. Och när han pensionerad helt nyligen, Bolaget hade 100.000 anställda under de senaste åren. Och så en webbplats som kallas The Verge upprättat denna hyllning på video att vi trodde att vi skulle delat som ger dig en känsla av hur mycket energi som Steve tillför någon presentation han ger. [VIDEOAVSPELNING] -Microsoft Är som ett fjärde barn. Barnen gör lämna huset. I det här fallet antar jag Jag lämnar huset. Hej Bill, whazzap? 

[00:06:23] -Wazzap? 

[00:06:24] -Hej, Wazzap? Vi har fått en enorma möjligheter. Och Bill gav oss den möjligheten. Jag vill tacka Bill för det. Jag vill att ni också. Innovationstakten kommer inte att bromsa. 

[00:06:42] Det kommer att bli snabbare och snabbare. Det kan finnas ett fåtal konkurrenter som tyvärr elimineras! 

[00:06:54] Jag älskar det här företaget. Ja! Jag är en dator, och jag älskar det här företaget! 

[00:07:08] Utvecklare, utvecklare, utvecklare, utvecklare, utvecklare, utvecklare, utvecklare, utvecklare. Ja! Webbutvecklare! 

[00:07:19] Webbutvecklare! Webbutvecklare! Lyssna på vad du får utan extra kostnad! 

[00:07:28] MS-DOS verkställande, ett möte kalander, en kort lugg, ett anteckningsblock, en klocka, en kontrollpanel. Och kan du tro det? Reversie! 

[00:07:35] Bränna dem på CD! Skicka dem till MSN! Du posta dem till vänner! 

[00:07:40] Alla med ett klick! En Microsoft, en strategi, en team-- fokuserad, disciplinerad, professionell, och expert på allt vi gör. Låt mig använda en linje från en gammal film. 

[00:07:52] Relationer är som hajar. De rör sig framåt eller de dör. Jag tror faktiskt tech företag är desamma. 

[00:08:01] [END VIDEOAVSPELNING] DAVID J. MALAN: Så vi är så glada att meddela att Steve kommer att ansluta oss här i CS50 nästa onsdag på den vanliga plats och tid här. Utrymme kommer sannolikt att vara begränsad. Och så för att ansluta sig till oss personligen, vänligen huvudet idag eller kort därefter att cs50.harvard.edu/register. 

[00:08:22] Och vi kommer att följa upp med Tisdag bekräftar fläckar. Ser fram emot att nästa Onsdag under föreläsning i CS50. Nu, i andra nyheter, råkade jag stött på detta i The Crimson bara häromdagen. 

[00:08:34] Det visar sig att en av CS50 personal och åtminstone en av CS50: s studenter För närvarande kör för UC president och vice president, som förde mig tillbaka mina egna dagar tillbaka när jag förlorade UC valet kapitalt. Men guldkant i det är jag alltid berätta historien är att en av de jag är säker många skäl jag förlorade Valet var en total brist en talang för att tala inför publik. Och så helt ärligt, det drev mig, erfarenhet att Jag tror att min yngre år, att faktiskt skriva under upp till Harvard Computer Society, som är den grupp på campus som innehar olika tekniska samtal och annat. Och jag tog över undervisningen seminarier och därmed hade en möjlighet, en fantastisk möjlighet, att börja arbeta på just detta. Men också, fick jag tillfälle Under denna erfarenhet att lära mig ännu mer HTML. Och så jag förhalat går kväll genom titta igenom HTML baserad webbplats Jag gjorde in som 1997, '98, för min Kampanjen, som ser ut så här här. Jag vet. 

[00:09:29] Because-- och naturligtvis, tillkännagivande denna fantastiska design beslut 1998 eller whatnot. Det första du vill att användare att göra när du besöker din webbplats är att behöva klicka på en annan länk bara för att skriva in din webbplats här med munken bakom som en höljt gardin där tydligen min kampanj plattform var. Och det är allt du får idag är bara en skärmdump. Men jag läste igenom, liksom, mina kampanjaffischerna i natt och min plattform. 

[00:09:50] Och jag var så arg på den tiden. Min plattform was-- det var intressant. Så jag har lugnat ner sedan dess. Men en dag kommer jag köra igen och förhoppningsvis bättre den här gången. 

[00:10:03] Så HTML, det språk som jag gjorde att in-- du snart göra mycket more-- är något vi har varit talar om för sent och till stor del tar för givet nu att vi har gått vidare till andra språk. Men låt oss stanna upp ett ögonblick och lägga en del av dessa saker i sitt sammanhang. Så i en mening, vad är HTML? 

[00:10:18] Eller, vad som används för? Någon? Ja. 

[00:10:20] PUBLIK: Markup för webbplatser. DAVID J. MALAN: Markup för webbplats. Så det är ett märkspråk som kan du strukturera en webbsida. Header går upp här, titel går här, går kroppen här. Detta är fetstilt, detta är italics-- den sortens detaljer. 

[00:10:33] OK, bra. Så CSS låter dig-- och jag tog några friheter där med djärva riktade och kursiv stil eftersom som är bättre förs med detta. CSS är-- vad? Säger i en mening. Någon alls. Yeah. 

[00:10:46] Målgrupp: Dekorationer och saker, som hur man designar den. DAVID J. MALAN: OK, bra. Utsmyckningar som gör att du att utforma den eller stilisera det med saker som fetstil och kursiv stil och färger och även mer fina kornade positionering av element. Det låter slags du tar saker de sista milen så att om, till exempel, i Pset7, kanske du har märkt på din portfölj sida om du är på denna punkt redan att en standardtabell som du göra för att visa användarens lager innehav och kontanter ser nog ganska ohyggliga som standard utan blank. Allt är typ av proppfull samman i rader och kolumner. 

[00:11:18] Väl, med en bit av CSS, som ni kanske förstår, du faktiskt kan justera det och göra det något mycket mer bekant och mycket sötare att titta på. Så CSS handlar om stilisering av webbplatser. Men sedan vi införde ytterligare en språk, PHP, som låter oss göra vad? 

[00:11:36] Låt oss bara göra vad? Någon. Fick ge sig bortom de första par rader. Yeah. 

[00:11:40] PUBLIK: Generera dynamiskt innehåll. DAVID J. MALAN: Perfect. Generera dynamiskt innehåll. Och du kan göra detta på valfritt antal språk. Vi råkar använda PHP eftersom det är dels så liknar C syntax. 

[00:11:50] Men PHP gör just detta. Det låter dig dynamiskt generera utdata. Och en del av denna produktion skulle kunna vara HTML, eftersom vi har oftast gjort. Och det är också, eftersom det är ett programmeringsspråk, är den mekanism via vilken Vi kan prata med databaser. 

[00:12:03] Och vi kan göra förfrågningar till andra servrar som Yahoos och programmässigt göra något verkligen att du kanske annars vill tvinga datorn att göra. Så PHP låter oss börja dynamiskt utmata innehållet. Så genom denna logik, hade jag inte en dynamisk webbplats redan 1998. 

[00:12:16] Det var bara en statisk webbsida. Min innehåll måste ändras genom manuellt med gedit eller något motsvarande. Men PHP är vad vi använde eller kunde ha använt, snarare för något som Frosh IMs hemsida, vilket skulle ta registreringar och hantera en lista över users-- saker som faktiskt omkoppling tid, även om vi råkar att använda Perl, en annan språk på den tiden. 

[00:12:35] Och så slutligen, införde vi SQL-- Structured Query Language. Så ännu ett annat språk som också användes för vad? Används för vad? Kan vi vågar slight-- OK, vi kommer inte att komma mycket längre än den orkester här. PUBLIK: Det är ett protokoll brukade prata med databaser. David J. MALAN: Ett protokoll brukade prata med databaser. Låt mig tweak. Det är ett naturligt språk som används att prata med databases-- väljer och skär och tar bort och uppdateringar och faktiskt ännu fler funktioner som Vi har inte ens dykt in men du kanske vill explore-- ha att utforska för, säg, ett slutprojekt. Så det finns dessa olika bitar. 

[00:13:09] Och förhoppningsvis Pset7, trots att dess specifikation är ganska lång, Det är avsiktligt lång tid att gå dig igenom hur dessa saker kan alla skrivas ihop. Nu på måndag, vi introducerade vår sista språk att vi formellt ska introducera in den course-- dvs JavaScript. Detta, som PHP, är en tolkat språk. 

[00:13:25] Men en viktig skillnad Jag föreslog i måndags är att medan PHP körs eller tolkas på servern, vilket i detta fall är det CS50 apparaten, eller kanske någon kommersiell webb server på Internet, JavaScript i allmänhet är ett språk som körs på klientsidan inte server side-- så i webbläsaren. Vilket betyder att, precis som när jag öppnade upp Facebook källkod och hitta alla av dessa Js-filer, var implikationen att när du besöker Facebook eller mest webbplatser dessa dagar, får du inte bara HTML, inte bara CSS, men en hel massa JavaScript kod ofta i form av JS-filer. Och då är det den browser-- din egen Mac eller PC-- som utför den koden. 

[00:14:03] Men din webbläsare utför det. Du kan tänka i form av en sandlåda. Så att JavaScript-kod inte ska vara kunna ta bort filer på datorn. Det bör inte kunna skicka e-post för din räkning. Din webbläsare slags begränsar vad du kan göra med det. 

[00:14:17] Så i den meningen är det en liten mindre kraftfull, kanske, än C. Men JavaScript kan, som ett åt sidan, att användas på servern, även om vi tenderar att inte tala om det i det sammanhanget. Så nu ska vi knyta ihop dessa. En vecka plus sedan presenterade vi några HTML på left-- super tråkiga webbsida. 

[00:14:34] Bara säger hallå världen. Och då jag föreslog på rätt vi kan sorts stjäla idéer från vår diskussion om datastrukturer i C och fundera på hur denna hierarkiska märkspråk till vänster kunde dras eller genomföras i minnet som en faktisk trädstruktur med noder och pekare och den typen av detaljer. Till höger, kallar vi att en DOM-- Document Object Model-- som är precis ett finare sätt att säga träd. 

[00:14:56] Nu, varför denna användbar för tänker på det på det sättet? Eftersom nu med JavaScript, eftersom vi har kod som får spela i detta miljö, den faktiska HTML som är skickats till webbläsaren redan och har redan laddats in i minnet av browser in i ett träd i din dators RAM så här, kan vi använda JavaScript att faktiskt passera eller gå eller sök eller ändra på det DOM-trädet men vi vill. Så i själva verket, om du tror att om facebook.com, om du använder chattfunktionen, om du Användningen Gmail och Gchat funktionen något där du har meddelanden som kommer igen och igen och återigen, dessa meddelanden är förmodligen, liknande, LI-tagg, listobjekt taggar, kanske. 

[00:15:35] Eller de kanske är bara Divar som håller visas varje gång du får ett snabbmeddelande. Och så det betyder bara vad Facebook eller Google gör är varje gång du får en meddelande från servern, de förmodligen använder JavaScript att bara lägga till ytterligare en nod till denna tree-- annan nod till denna träd som sedan visuellt bara ser som en ny textrad på skärmen. Men de är att sätta in in i denna datastruktur. 

[00:15:57] Så i klasser som CS124 och andra, kommer du egentligen skriva mer kod mot datastrukturer som denna. Men för tillfället i JavaScript, vi ska bara ta på sig vi får allt detta funktioner gratis från själva språket. Så låt oss titta på ett exempel. 

[00:16:09] Låt mig öppna upp en fil som heter form.html. Det är super enkelt. Det ser ut precis som denna. 

[00:16:15] Ingen CSS, ingen tanke på estetik. Det är rent funktionell och tydligen är jag ber om ett e-postmeddelande, ett lösenord, lösenord igen, och sedan en kontroll att gå med på vissa villkor. Vilken källkoden för detta ser ut är förmodligen något du kan gissa med en lite eftertanke nu. Jag har ett formulär tag här. 

[00:16:32] En åtgärd är tydligen gå till gå till en fil som heter register.php. Metoden jag ska använda är få. Och så har jag en text fält som heter e-post. 

[00:16:40] Jag har ett fält för lösenord vars namn är lösenord. Jag har en annan lösenordsfältet vars namn är något godtyckligt bekräftelse. Det är bara en annan HTTP parameter. 

[00:16:49] Och sedan har vi vi inte använt dessa utom eftersom Frosh IMs demo i class-- en kryssruta som är bara typ lika check. Och jag ska kalla detta avtal. Så jag har typ av godtyckligt men lämpligen namngav dessa områden. Så att nu när denna form blir in, låt oss se vad som händer. Om jag gör malan@harvard.edu, Jag ska göra ett lösenord för crimson. Jag ska göra ett lösenord för ingenting. Låt oss inte samarbeta. 

[00:17:10] Och jag kommer inte att markera rutan. Låt mig klickar du på Registrera. Och den säger, hm, du är registrerad. Inte riktigt. 

[00:17:16] Men URL förändrats. Så här formuläret klart tillåtet att underkasta sig register.php. Men antagligen skulle jag vara fånga några av dessa fel. Nu, i Pset7 och några våra föreläsnings exempel, skulle vi i allmänhet skriva ut en stor röd felmeddelande här sade saknade namn, eller saknas lösenord. Vi har gjort det förut och vi har gjort serversidan feldetektering. 

[00:17:37] Men många webbplatser dessa dagar göra klientsidan feldetektering där webbadressen ändras inte. Hela sidan uppdateras inte. Du får omedelbar återkoppling från webbläsaren. Kanske något rött. 

[00:17:48] Kanske du får en pop up. Men du behöver inte slösa tid på att skicka till serveruppgifter som är ofullständiga. Så låt oss se hur vi kanske uppnå den funktionen också. 

[00:17:56] Låt mig gå till form1.html, som ser likadant ut. Men om den här gången jag gör malan@harvard.edu och jag skriver crimson och jag samarbetar inte vidare men klicka på Registrera, märker nu. Det är inte det sexigaste lösningen. Jag har åtminstone fångat detta fel. Och jag har använt varningen funktion i JavaScript-- som vi bara använder i klassen. I allmänhet bör du inte använda denna eftersom det kan mycket snabbt komma ut av kontroll. Men Lösenorden matchar inte är felet. 

[00:18:19] Låt mig gå vidare och klicka på OK. Men vad nyckeln takeaway här är att webbadressen inte förändrades. Så jag har inte brytt slöseri serverns tid frågar den en fråga som jag kunde ha listat ut svaret på mig själv. 

[00:18:30] Och användaren, även om pratat om det här längre än användarens kommer att tänka på detta, kommer att få omedelbar feedback. Det finns ingen fördröjning med uppkoppling till nätet. Så låt oss titta på detta källkod. 

[00:18:40] Form1.html utseende strukturellt liknande här uppe. Formen är i själva verket densamma. Men låt oss se vad jag gjorde här nere. Och det finns olika sätt att göra detta. Och jag har gjort den mest raka följ men inte mest eleganta sätt än. Jag har en script-tagg. Jag sedan ringa document.getElementById ("registrering"). Och jag lagra detta värde i formen, en variabel. 

[00:19:04] Så vad har jag gjort? Du kan tänka på document.getElementById som vara en speciell funktion som JavaScript ger dig som bokstavligen händer du en pekare till en av noderna eller rektanglar i trädet. Så nu det är vad vårt formulär variabel i JavaScript är faktiskt pekar på. 

[00:19:21] Så nu syntaxen skiljer sig från C. Men vi gör några saker här. En är lite konstigt här ser, förvisso kontra C. Men titta på linje 35. Så på vänster form.onsubmit. Minns att onSubmit är som ett fält i en struct. Om du tänker på formen variabel är att bara vara en C-struct, den kan ha vissa fält. 

[00:19:42] Tillbaka i dag, hade vi studenter namn, ID, hus, dessa slags områden. Tänk bara på onSubmit som ett annat fält. Men det är ett speciellt område på grund av att webbläsaren är förprogrammerad att förvänta sig .onsubmit att inte vara ett värde som ett nummer eller en sträng, utan att faktiskt vara en funktion eller adressen till en funktion i datorns minne. 

[00:20:02] Och faktiskt, det är vad det detta sökord här gör. Det säger, ge mig en ny funktion. Men vad är dess namn kommer att bli, tydligen? 

[00:20:09] Tänker tillbaka på måndag. Vad är namnet på denna Funktionen bygger på denna syntax? Nej, jag menar, det finns helt klart inget namn associated-- säkert inte på vad jag har markerat här. 

[00:20:21] Men det är faktiskt OK. Detta är en anonym funktion, eller en lambda-funktion som vissa skulle kalla det. Och det betyder bara det är fortfarande en funktion. Det är bara, du kan inte kalla det vid namn. Men det är OK. Eftersom Igen har webbläsaren blivit förprogrammeras av företag som Google eller Microsoft eller Mozilla eller andra till vet bara att om .onsubmit fält insidan av en form elementet har värde, behandla det som en function-- en funktion pekare, om ni så vill. Och kalla det när formuläret skickas. 

[00:20:46] Så vad koden ska exekveras När formuläret skickas? Tydligen allt insidan av klammerparentes. Och detta är bara stilist. 

[00:20:53] Du kan göra detta som vi tenderar att göra i CS50. Men i JavaScript, de flesta människor tenderar att hålla det på samma linje bara för att det tydligare är förknippas med sökordet funktion. Så nu vad gör jag? 

[00:21:03] Om form.email.value lika jämlikar den tomma strängen eller ingenting, här är en varning där jag ska säga, Du måste ange din e-postadress, och sedan returnera false. Och det är det retur falskt som förhindrar formuläret från att lämnas in. Under tiden, om lösenordsvärdet är tomt, jag ska skrika på användaren och säger, du måste ange ett lösenord. 

[00:21:21] Samtidigt saker och ting blir lite snyggare här. Om form.password.value inte lika form.confirmation.value, det andra fältet, skrika på användaren om att lösenorden stämmer inte, eftersom de inte för en stund sedan. Och då detta är en lite sexigare eftersom jag vet att jag visste begrepps att kontrolleras är en kryssruta namn. 

[00:21:40] Så jag kan bara använda ett utropstecken punkt att säga om kontrollen inte är checked-- det är Boolean värde, sant eller false-- Jag ska skrika åt användaren av den anledningen. Annars, om vi får igenom alla dessa villkor, låt oss bara return true. Låt formuläret lämnas in. Och detta händer då. 

[00:21:56] Låt oss skriva in crimson. Låt oss markera rutan klickar du på Registrera. Och nu går jag vidare till destinationen. Nu finns det ingen databas där. Det finns inget intressant i register.php. Jag behövde bara något att faktiskt prata med. Så låt mig göra en paus, här. Eventuella frågor om vad vi just har gjort eller vad en del av denna nya syntaxen är? OK, ja? 

[00:22:17] PUBLIK: Så någon kryssruta är automatiskt en Boolean. Du behöver inte förklara det så. 

[00:22:21] DAVID J. MALAN: Rätt. Varje kryssruta som skickas till dig från ett HTML-formulär på din JavaScript-kod kommer att behandlas, ja, som en Boolean value-- sant eller falskt. Det är en bra fråga. Medan de andra värdena, av Naturligtvis har text, AKA strängar. 

[00:22:36] Okej, så låt mig spola tillbaka lite längre. Vad var hela poängen med det här? Bara för att vara tydlig. Som vi redan vet, även från Pset7 och även från förra veckans föreläsning exempel, som vi naturligtvis kan kontrollera $ _GET $ _POST Se om användaren ger oss ett tomt värde. Minns den tomma funktionen i PHP. 

[00:22:54] Så bara för att vara tydlig, vad är en anledning som vi kanske också vill göra detta felkontroll insidan av webbläsaren? Vad är motivationen här? Yeah. 

[00:23:06] PUBLIK: Snabbare, och du inte skicka meningslösa data till servern. DAVID J. MALAN: Good. Den är snabbare. Du behöver inte skicka värdelös data till servern. 

[00:23:12] Så du får tillbaka en mer omedelbar respons. Och totalt sett, användaren erfarenhet är bättre. Tänk på alternativet. 

[00:23:17] Om för Gmail-- och var fallet för många år sedan. Anta att du fått ett nytt e Gmail konto, men det enda sättet genom att se att är att, liksom, ladda om hela sidan. Eller antar du klickar på en länk för att läsa en e-post. 

[00:23:29] Allting måste ladda om så att du kan se e-post. Eller Facebook-- du får ett chattmeddelande. Du ser inte det förrän du ladda sidan eller klicka någon länk. 

[00:23:36] Liknande, skulle detta vara en väldigt irriterande användarupplevelse. Och det är hur det var, tydligt, tillbaka när jag körde för UC och banan var mycket mindre dynamisk och JavaScript var inte så populärt som det är nu. Och saker och ting blir mycket mer dynamisk och mycket mer klientsidan i det avseendet. 

[00:23:49] Men det finns en hake här, och Detta är typ av en irriterande gotcha. Bara för att du lägger till klientsidan upptäckt som detta innebär inte du kan eller bör överge sidodetekteringsserver. Du vill i huvudsak att sätta ditt Felkontroll på båda ställena. För vad var en av lärdom från artikeln jag läste några utdrag från med denna dumma CMS system-- Content Management System-- som var genomföra sin autentiseringssystem, sin inloggning via vilken mekanism? JavaScript. 

[00:24:20] PUBLIK: JavaScript. David J. MALAN: JavaScript, exakt, eller hur? Det var med hjälp av JavaScript. Och bokstavligen, ni har spelade lite förmodligen med Chrome Inspector. Och om jag kan hitta det, inspektera element. 

[00:24:30] Låt mig gå över till att göra alla Chrome alternativ. Och det är hur lätt det är att avaktivera JavaScript i en webbläsare. Check, inte mer JavaScript. 

[00:24:38] Så i rättvisans namn, en hel del av nätet dessa dagar är bara att bryta eftersom Gmail och andra sites-- Facebook-- anta att JavaScript är aktiverat. Men om du gör något dumt som endast validera användare ingång och kontrollera att den fel på klientsidan, en motståndare kunde enkelt göra detta. Och sedan ännu smartare motståndare som ni nu kan använda Telnet eller Curl eller bara kommandoraden kommandon och faktiskt skicka meddelanden till servern som på liknande sätt är inte fel som markerats. 

[00:25:05] Så det här är mer av en användargränssnitt beslut än det är en faktisk teknisk improvement-- genomförande något som klientsidan så här. Så nu en snabb blick, men sedan Jag ska skjuta till online promenad genom för detta. I formuläret två, vi faktiskt gick igenom och rensade upp koden lite. Men låt mig skjuta till en av filmerna vi ska troligen bädda in Pset8 som bara visar en liknande syntax med hjälp av ett bibliotek som heter jQuery, som är en super, super populärt bibliotek i JavaScript som ärligt talat de flesta människor bara använda dessa dagar och till och med blanda ihop som varelse JavaScript självt. 

[00:25:37] Och det tenderar att involvera några dollartecken och sökord som dokument inom parentes här. Men återigen, låt mig skjuta till vissa långsammare handledning nätet snarare än att få bundet i just syntax. Låt oss gå vidare till något lite svalare i termer av de tillämpningar av denna. 

[00:25:50] Så i synnerhet, låt mig gå vidare och öppna upp det här. Kom igen. Det gå vi. 

[00:25:59] Låt mig öppna upp denna bild här. Onödigt komplicerat ser, men det beskriver en teknik som kallas AJAX-- Asynchronous JavaScript and XML, där X för XML är faktiskt inte längre riktigt används. Det tenderar att använda något annars kallas JSON. 

[00:26:13] Men här är hur något liknande Google Maps eller Google Earth fungerar. Låt oss prova detta i farten, faktiskt. Låt mig gå vidare och öppna upp Chrome i min webbläsare. 

[00:26:21] Och låt mig gå in, säger, maps.google.com. Och faktiskt, om du är gammal nog att minnas vad, liknande, MapQuest var som förr i tiden, och kanske de fortfarande fungerar så här. När du använde för att söka efter something-- 33 Oxford Street, Cambridge, Mass, låt oss göra this-- dig skulle faktiskt, om du ville flytta upp och ner, vänster och höger, du skulle se ut som en stor pil på toppen, och det skulle visa er en annan ram på kartan här uppe. Eller skulle du klicka vänster och du skulle gå över här, eller ytterligare ett klick och du skulle gå hit. Men i stället dessa dagar, vi naturligtvis bara tar för givet att vi kan gå runt Cambridge ganska snabbt bara genom att klicka och dra. Men märker att det finns en del buggar. 

[00:26:59] Om jag gör det tillräckligt snabbt, vad som verkar vara fallet som jag drar lite för fort för att datorn ska hänga med? Vad ser du? Yeah. 

[00:27:07] Publik: Pixlarna inte uppdatera. David J. MALAN: Den pixlarna inte uppdatera. Det finns actually-- och ni kunde se detta, faktiskt, Om du tittar på nätet och paus detta eller faktiskt saktar ner saker för once-- ser du att det finns kakel, torg, eller rektanglar som saknas i kartan tills en bråkdels sekund senare, mer data, fler bilder faktiskt visas på skärmen. Och faktum är att om vi gör detta genom att titta upp Chrome's-- låt oss säga, Chrome-- låt oss se. Vi kan inte göra det. 

[00:27:31] Åh, hoppsan. Vi öppnar upp maps.google.com. Låt mig göra fönstret större igen. 

[00:27:36] Gå tillbaka till 33 Oxford Street. Vad var hemsidan jag var på nyligen? Jag hade den här, liksom, privat rant till mig själv att jag hade då snabbmeddelande någon vän som var på nätet som ville höra det. Det finns en viss webbplats. Jag tycker det är Comcast-- så en mycket stor amerikansk ISP. Du kan, när du registrerar dig för nya kabeln modemtjänst eller kabel-tv-tjänst, de har en form mycket rimligt där de ber dig om din adress. Och har denna fantastiska funktion som kallas auto klar, som Google, börjar det att fylla i svaret på din fråga. 

[00:28:04] Problemet är, de gör komplettera automatiskt På de första saker som du skriver. Så om du börjar skriva i 33, det kommer att visa dig bokstavligen varje hus i Amerika som startar med nummer 33 innan du fortsätter med förväntar dig att skriva mer. Så om du skriver 33 Oxford, då den visar dig varje gata i Amerika som har 33 Oxford dess namn, oavsett om staden att du är i. 

[00:28:25] Och sedan fortsätta skriva. Och slutligen, realiserar det att de inte erbjuder service till ditt hem i Cambridge eller något liknande. Men poängen är, det är den mest åsnelikt genomförande av automatisk slutföra någonsin. 

[00:28:34] Och jag kommer bara ut på denna tangent igen. Men det finns bra sätt att använda JavaScript och dåliga sätt. Och det är inte nödvändigtvis den bästa. 

[00:28:40] Men poängen här, innan harang, var att öppna upp verktyg här nere och öppna utvecklingsverktyg, eftersom vi har uppmuntrat tidigare, och för att titta på nätverket Fliken som jag klickar riktigt snabbt. Och märker en hel drös av får förfrågningar hände. Allt detta hände sedan drog jag. 

[00:28:57] Och mest troligt, faktiskt en hel del av dessa rader Nu är bilden snedstreck JPEG MIME-typer eller innehållstyper. Det beror på vad krom gör varje gång jag klickar och drar, klickar och dra, det är att inse, åh, jag behöver gå be Google för kakel på kartan som är här borta, snabbt ladda ner den via HTTP, och sedan lägga till det så kallade DOM till webbläsarna i minnesträd representation, så att användaren, mig, ser att uppdateras kakel. Och det är på grund av en teknik som kallas AJAX. Tillbaka i dag, det är verkligen var det så att om du ville ändra vad som finns på skärmen, du måste klicka upp, ner, vänster, höger. Och sedan en ny sida skulle öppna. Men i dessa dagar, allt är mer dynamisk. Det händer på det sätt vi människor skulle hoppas det faktiskt skulle interaktivt. Och det uppnår detta genom sätt av en teknik som kallas AJAX, som kanske är bäst förklaras genom ett exempel. Låt mig gå vidare och öppna upp en fil kallas quote.php i dagens distributions kod. 

[00:29:53] Och låt mig göra symbol-- hoppsan. Låt mig göra symbol = GOOG för bara några lager. Eller faktiskt, låt oss göra det en från Pset GRATIS. Enter. 

[00:30:05] Och nu märke till vad jag får tillbaka. Så det här är en riktigt korta PHP-fil som jag skrev att helt enkelt lånar kod från Pset7 s uppslagsfunktion och spottar ut med hjälp av denna klammerparentes och citat och kolon notation, som synes, den nuvarande aktie pris för företag som du passerar in via get. Så det här är annorlunda från de flesta av vad vi har görs i detta meddelande är jag bokstavligen spottar ut vad som ser ut som JavaScript-kod. 

[00:30:27] I själva verket är detta ett JavaScript-objekt. Faktum är att bara för att vara mer tydlig, JavaScript Object Notation-- JSON-- är bara ett finare sätt att säga att du kan representera data i JavaScript mycket som du kan i PHP med hjälp av nyckelpar värde. Så om jag ville deklarera en variabel i JavaScript till representerar Zamyla, för instance-- en struct för Zamyla-- och vi ska kalla det student, denna variabel. Hennes ID är en, huset är Winthrop, och heter Zamyla. 

[00:30:53] Men jag kan också ha en array med objekt. Så om jag egentligen ville ha en array i JavaScript som innehåller flera sådana föremål, detta tid som företräder personalen, Jag kanske har dessa tre bitar av kod tillbaka att backa backa för dessa tre tidigare anställda. Så syntax, pretty liknande both-- till PHP. Men detta är särskilt JavaScript. Det är objektnotation. Så vad är det bra för? 

[00:31:17] Om jag skriver kod som spottar ut JSON-- JavaScript Object Notation-- saker som ser ut så här, eller saker som ser ut som Zamyla struktur, Jag kan faktiskt använda detta i program jag skriver. Låt mig gå till ajax0.html. Och detta too-- inte mycket trodde ges till estetik. Men se vad som händer. 

[00:31:34] Låt mig gå vidare och skriva gratis här. Klicka få offert. Och märker URL har inte ändrats. Men jag fick en pop up med till synes dagens öre lager pris på $ 0,15. Så inte så illa. Men skillnaden är att på något sätt, dessa data kom tillbaka till mig direkt. Men låt oss ta ett steg mot något mer bekant. I version ett av detta, låt mig typ fri igen, klicka på Hämta citat, och now-- åh, det var faktiskt jQuery versionen. Så låt mig-- jag inte spola framåt ganska långt nog. Låt mig gå till version två, som är där jag ville. Lägg märke till vad jag har gjort här. Jag har en webb page-- en super enkel version av en webbsida du kan använda i dag med ett textfält gratis här och sedan tydligen bara text. 

[00:32:14] Detta är inte ett formulär här, tydligen. Men om jag klickar på får citat, märker min webbsida är på väg att förändras som om jag precis fått ett nytt snabbmeddelande eller som om jag bara flyttade karta och behövs för att få mer information sätts dynamiskt till webbsidan utan URL förändras och användaren erfarenhet att bli avbruten. Ja, jag är fortfarande på exakt samma plats-- ajax2.html. 

[00:32:35] Så låt oss titta bara på detta exempel och se hur detta sker. Låt mig gå in ajax2.html. Och märker formuläret först. 

[00:32:44] Här nere, jag vänder av automatisk komplett. Ibland blir det irriterande om webbläsaren försöker visa dig hela din historia. Så du kan göra det i HTML med säger bara auto fylla ut. 

[00:32:53] Jag har gett det här textfältet a symbol-- snarare, ett ID av symbolen. Och nu är det en intressant funktion. Vi har inte pratat om span, men du kan tänka på det som ett stycke tagg eller div tagg. Det är vad som kallas en in-line-element, som innebär att du inte kommer att få ett stycke bryta ovanför och nedanför den. Det kommer bara att stanna i-line utan slå motsvarande anger. Så jag har gett denna bit av HTML som skall fastställas en unik identifierare att jag godtyckligt kallas pris. Och jag har en Skicka-knapp. 

[00:33:21] För nu upp här-- och det är faktiskt super fantastiskt hur lite kod Du kan skriva att göra relativt snyggt saker-- märke till vad jag har gjort upp här om jag rulla upp till chefen för denna sida. Jag har lagt till först i mitt huvud en script-tagg som faktiskt refererar till en JavaScript fil någon annanstans. Detta är från den organisation som skriver jQuery, och detta är bara ger dig det senaste version av deras jQuery bibliotek. 

[00:33:42] Så det här är ungefär som skarp inkludera i C eller kräva i PHP. Du använder skripttagg med ett källattribut. Men nu min egen kod är kommer att vara rätt i här. 

[00:33:52] Märker jag har en funktion som kallas Citat. Och det ser lite kryptiskt vid första anblicken. Men låt oss retas här isär. Ge mig en variabel som kallas URL. Tilldela det bokstavligen denna sträng. Så, enkla citationstecken, citationstecken i JavaScript ger mig bara en sträng. Vad gör plus göra? Sammanfogning. 

[00:34:08] Så detta är nu jQuery syntax vilket tar lite tid att vänja sig. Men detta betyder bara hämta mig DOM nod vars unika identifierare är symbol. Hashtaggen det betyder unik identifierare symbol. 

[00:34:21] Dollartecken i parentes bara menar, linda här i jQuery ett slags hemlig sås så du får fler funktioner. Och sedan .val är tydligen en funktion, eller som vi säger nu, en metod insidan av denna nod som bara ger dig värde. Så kort sagt, ful och förvirrande som det ser ut vid första anblicken, Detta innebär bara få med användaren skrivit i, uttryckte det i slutet av strängen genom konkatenering den. Det är allt. 

[00:34:43] Så nu, tre sista raderna. Du kan trycka in en hel del funktionalitet av tre rader. Denna dollartecken, som en åt sidan, är bara ett smeknamn för en särskild global variabel kallas rally jQuery. 

[00:34:55] Dollartecken ser bara cool. Så jQuery samhället bara typ av använde det som sitt specialsymbol. Det betyder inte vad det innebär i PHP. I JavaScript är dollartecken precis som en bokstav i alfabetet eller ett nummer för en variabel. 

[00:35:07] Du kan bara ha det som namnet. Bara ser cool. Så samhället antagit det som ett smeknamn för sitt eget bibliotek som heter jQuery. 

[00:35:13] Och det är super populär. Så får JSON är exakt. Det är en funktion som folks vid jQuery skrev som får JSON från en server-- JavaScript Object Notation. Från vilken webbadress går det för att få den informationen? Tydligen från denna URL här. 

[00:35:27] Och vad ska webbläsaren göra som snart den får tillbaka det här svaret? Och detta är den magiska AJAX, så att speak-- Asynchronous JavaScript XML. Det är svårt att se en sådan enkelt exempel som vi hade här. 

[00:35:41] Men detta var asynkrona in den meningen att min kod när exekveras skickade ett meddelande till server för att hämta mig lite JSON. Och det hände supersnabb att jag fick ett svar. Men vad som är intressant är att detta kodrad inte hänga min dator. 

[00:35:55] Jag såg inte en snurrande ikon. Jag ville inte förlora förmåga att röra musen. Min webbläsare var faktiskt helt bra. 

[00:36:01] Eftersom det sätt JavaScript hanterar svar från servern är följande. Du registrerar vad du skulle vilja kalla en callback-funktion, vilket betyder bara, hey, Javascript. Så fort som servern svarar med JSON, ring denna anonym funktion. 

[00:36:18] Och vänligen passerat in i denna funktion oavsett sträng servern spotta ut som ett argument som kallas data. Så med andra, ord, om Jag montering dynamiskt en URL quote.php passerar i detta symbol som GRATIS eller GOOG eller whatnot, Jag sedan berättar JavaScript hämta den webbadressen. Kom ihåg att webbläsaren kommer att återvända något som ser ut som vi såg earlier-- detta. 

[00:36:42] Och vad det andra argumentet här för att få JSON säger är kalla denna funktion när servern får tillbaka oavsett om det är 10 millisekunder från och med nu, eller 10 sekunder från nu. Och så fort du gör, lägg priset till sidan. Denna syntax här bara betyder hämta noden från trädet vars unika identifierare är price-- som spänner vi såg tidigare. 

[00:37:01] Denna metod kallas HTML bara säger, gå ersätter HTML som är där med data.price. Vad är data.price? Tja, webbläsaren, minns, visade mig komma tillbaka. Så det här är data. 

[00:37:14] Och så det är lite kryptiskt att se kommatecken här. Men i själva verket, låt mig göra det här. Låt mig bara klistra in den här riktigt snabbt i gedit och visa denna som vi visade Zamyla struktur tidigare. 

[00:37:27] Vad servern skickar tillbaka en lite objekt som ser ut så här. Och så data.price är bara ge mig 0,1515. Så mycket rörliga delar här på en gång. 

[00:37:39] Men de viktigaste hämtställen är att vi har denna förmåga att göra ytterligare HTTP förfrågningar med hjälp av JavaScript utan att behöva ladda om sidan. Och då kan vi faktiskt ändra webbsidan i farten. Och det visar sig att JavaScript och andra språk kan användas nu inte bara mutera webbsidor, utan att faktiskt skriva programvara i en verklig dator, inte bara begränsas till Chrome eller liknande. 

[00:38:00] Faktum if-- Colton, skulle du vilja ansluta oss tillbaka upp hit med din lab-kod och Chang också? Låt oss gå vidare, efter att ha talat om anonyma funktioner och callbacks och verkligen utmana ödet här med en live-demo med blödning senaste tekniken, en av dessa Elite Motion enheter. Nu, denna enhet, återkallelse, är en liten USB-enhet samt that-- det är beautiful-- som sedan ansluts till USB-portarna. 

[00:38:25] Och då det ger input i form av mänskliga gester genom att upptäcka med hjälp av infraröda strålar, huvudsak, rörelser från din arm. Så medan vad Maria försökte innan var muskulös, faktiskt känner vad som förändras armen, är det infraröda baserad. Så det ser för transporter inom den typ av sfär av en fot eller så av själva enheten. 

[00:38:46] Så varför tar jag inte ett hugg på det första? Och låt oss gå vidare och kasta upp dig på overhead här. Så låt oss sätta Colton bärbara dator här uppe. Vi har Andreas på TV. Och vad vill du att jag ska göra först? 

[00:39:00] COLTON: Gå vidare och bara händerna över den här killen och du kommer att se några fantastiska glitter. 

[00:39:04] DAVID J. MALAN: Very nice. Allt detta händer i realtid. OK. Okej, och Japp. Så trevligt. Okej, vad mer kan vi göra? 

[00:39:15] COLTON: Gå till nästa skärm och se. 

[00:39:17] DAVID J. MALAN: Okej. 

[00:39:19] COLTON: Ett roligt litet spel där du får göra robotar. 

[00:39:21] DAVID J. MALAN: Okej, så detta är falska händer visar mig vad jag ska göra. COLTON: Ja Så sätt igång och ta ett av blocken och lägga den på toppen av det robotens kropp. DAVID J. MALAN: Åh, det är min hand. Oh. OK, bedårande. Vänta lite, OK. Det gå vi. 

[00:39:41] COLTON: Jag gjorde en på olyckan. 

[00:39:43] DAVID J. MALAN: OK, jag ska få den här killen. Fan också! När vi övade denna sista natten, vet du vad det decentraliserade in? 

[00:39:51] Gillar du. OK. Nästa man? 

[00:39:55] COLTON: Visst. 

[00:39:56] DAVID J. MALAN: Okej, och det finns en tredje. Okej. COLTON: Och i den här, får du att-- DAVID J. MALAN: Åh, den här är vacker. COLTON: --yeah, plocka isär denna blomma. David J. MALAN: OK. Nej? Missade. 

[00:40:14] COLTON: Åh, där du går. 

[00:40:15] DAVID J. MALAN: Ah, Titta. Mycket trevligt. Tja, varför inte "vi tar ut en volontär här som vill komma vidare upp. Vad sägs om rätt där i det gröna, är det? 

[00:40:27] Okej, och låt oss have-- istället för att göra det, en del av er kanske vet detta spel här-- skära av repet, kanske? Låt oss se. Vi har våra glasögon på över här? 

[00:40:37] OK. Tack. Vad heter du? 

[00:40:39] PUBLIK: Laura. 

[00:40:40] DAVID J. MALAN: Laura? Trevligt att se. Om du inte har något emot att sätta Google Glass över dina glasögon. Detta är Colton. 

[00:40:46] COLTON: Hej. TREVLIGT ATT TRÄFFAS. 

[00:40:48] DAVID J. MALAN: OK, kom igen runt. Okej, så vad du ska göra här, efter att ha spelat det här förut, läggs handen över Leap Motion här. Och nu din Pilen skall flytta. Åh, nej. 

[00:40:57] PUBLIK: Nej. 

[00:40:58] David J. MALAN: Vi vill inte sluta än. OK, vänta. Här borta. Så märker du håller din finger över något, musen börjar gå grönt, vilket är hur du klickar. 

[00:41:06] Så sväva över Play. Och bara ett finger är bra. Och nu klicka på den lilla grön kille till vänster. Och nu håller tills det fyller grönt. Bra. Nu, liksom, nivå ett där uppe. 

[00:41:16] PUBLIK: Ja, vi vill ha nivå ett, här. 

[00:41:20] DAVID J. MALAN: Good. OK, så allt du behöver göra är att skära av repet. Markören är den vita där nere. 

[00:41:28] Mycket trevligt. Okej, det handlar om att få hårdare. Så håll fingret under de kommande nu. Bra. Den här är svårt. 

[00:41:39] PUBLIK: Åh crap. OK. Den vill gå den vägen. Oh crap, that-- 

[00:41:44] DAVID J. MALAN: Ja. Sekundärt mål är att få alla stjärnor. Okej, nästa. 

[00:41:53] Låt oss se om du kan få den här tredje. Bra. OK, gå dit. 

[00:42:06] Visst. Åh, mycket trevligt. Okej. 

[00:42:11] Så varför inte vi ajournera här idag? Låt någon komma vidare upp som vill spela. Tack så mycket för Laura vår volontär. Och vi kommer att se dig på måndag. 

[00:42:18] PUBLIK: Du vill förmodligen dessa tillbaka. 

[00:42:21] TALARE 2: Vid nästa CS50--