[Muziek] 

DAVID MALAN: Dit is CS50. Dit is het begin van de week negen. En dit is wat zou moeten geweest Mr. Boole's 200ste verjaardag. Dus dit is de bursalen aan wie wij hebben gezinspeeld geruime tijd over het gebruik van Booleaanse variabelen waar en onwaar, 1 en 0 en dergelijke. En Google's was hulde aan hem vandaag. Hij zou zijn geworden 200. Dus als je wilt samen met ons voor CS50 lunch, een kijkje nemen op de link op de website van de cursus. En zulke gezichten en vrienden deze wachten u hier in Cambridge. Gezichten zoals deze staan ​​je te wachten in New Haven. En inderdaad, in Ken New Haven vriendelijk gemaakt wat heet een geanimeerde GIF van Eli hier op een recente lunch-- een GIF is nog een ander grafisch bestandsformaat, waarmee je familiar-- dat ziet er een beetje iets als dit. Dus gewoon een opeenvolging van-- OK. Niemand hier in Cambridge is lachen. Maar in New Haven, dit is echt grappig, toch? Prima. 

Dus wees er bij ons. Hier bij Harvard, in het bijzonder, deze woensdag, als je een tweedejaars of eerstejaars even-- of zelfs junior-- denken van maken een schakelaar in de computer wetenschap, weet dat er zult worden een CS adviseren eerlijke dit Woensdag, kort na de les om 04:00 in de computer wetenschap gebouw Maxwell Dworkin. We zullen dit op de baan zetten website morgen, als goed. Donuts, ik word verteld, zal worden geserveerd. 

Prima. Zo grappig story-- ik porren rond op het internet, en ik vond een aantal oude archieven van mijn oude website. En het blijkt out-- rond deze tijd, lijkt het zeer actueel want ik heb begrepen dat de UC verkiezingen op het punt om een ​​versnelling hoger schakelen weer. Dus ik liep voor UC, verloren jammerlijk. En misschien was dit voor een deel waarom. Dus dit was mijn website op het moment. Om een ​​of andere reden, ik dacht dat het was een goed idee, voordat mensen te vertellen wat mijn platform was en waarom ze moeten stemmen voor mij, dat ze te klikken om in te voeren om te ontdekken dat informatie die achteraf is soort griezelig. Ik weet niet echt wat dat was. 

Maar het deed zeker niet help mijn campagne. Ik vond ook dat door senior jaar-- Ik had dit Muppet kalender. Muppets waren soort in zwang toen. Of misschien waren ze niet. Ik had een Muppet kalender toen. En ik dacht dat het zou cool om naam zijn mijn computer op het netwerk van Harvard frogman.student.harvard.edu. Op het moment, dat we allemaal uniek hadden identificeerbare hostnamen. En je kon enkele ijdelheid kiezen naam in plaats van uw eigen naam. En ik ging met kikvorsman om wat voor reden. 

En dan started-- Ik bracht ik veel van de tijd te klikken door middel van deze links deze morgen. En dit was mijn over de pagina, die nu soort lijkt schattig. Maar het getuigt ook gewoon hoe ver technologie is gekomen. Ik bedoel, terug in de dag, een 486 was iets. Deze dagen, het is super, super, super traag en goed minder dan u zou kunnen hebben in uw eigen zakken deze dagen. Er is meer op dat er was nog meer gênant. Dus ik zal het bij laten. Maar dat was mijn eerste uitstapje in web-- oh, nee. Dat was het niet. Mijn eerste echte uitstapje in web programmeren was deze site, die ik gewoon vergeten. Op een bepaald punt, heb ik geleerd hoe om te maken repetitieve achtergrondafbeeldingen. En dus ik vond deze tegels effectieve, zoals hockey speler, voetbal en golf bal, of wat dat ook is voor de Frosh IM website. En dit was echt, echt de eerste web-based project nam ik on-- Ik denk dat misschien tweedejaars jaar, junior jaar-- na het nemen van CS50 en CS51, één van de gemeenschappelijke follow-on klassen. Ik merkte bij het zoeken door de archieven dat een van mijn opvolgers en vrienden, Lee, een soort van veranderd het auteursrecht op zichzelf. Maar dit inderdaad iets Ik moet de verlegenheid te bezitten. Maar op het moment, dit was de eerste website, zoals ik al zei een paar weken geleden, waarmee eerstejaars kon registreren voor intramurale sport hier. En zo blijkt dat achtergrondafbeeldingen als dat niet zo'n goed idee. Maar het web nieuw was, en we waren allemaal experimenteren. En dit is wat ik blijkbaar deed op dat moment. Prima. Dus zonder verder oponthoud, schakelen we versnellingen vandaag om u, echt, het laatste stuk dat je zou kunnen vinden vooral handig voor de laatste projecten maar die beginnen maken de hele wereld wijde web voel me een beetje meer begrijpelijk. Inderdaad, we gaan introduceren nog een programmeertaal genaamd JavaScript die vergelijkbaar is en anders op verschillende manieren van talen die we hebben gekeken naar tot nu toe. 

Dus C, herinneren, is dit gecompileerde taal. Je hebt om het uit te voeren door middel van een compiler. U krijgt broncode naar object code, of nullen en enen. En dat zijn nullen en enen die je CPU, Central Processing Unit, echt begrijpen. PHP, is daarentegen niet een gecompileerde taal. Het is een wat? Het is een geïnterpreteerde taal. Dus er is een programma riep een tolk die moet het-- top lezen beneden, van links naar right-- en erachter te komen wat er allemaal van uw syntax doet en betekent, of het nu een lus of een aandoening of elk ander aantal programmering construeert. Dus dat is een geïnterpreteerde taal. 

Vervolgens ingebracht we HTML. En HTML is niet eens een programmeertaal. We zouden het wat noemen? Een opmaaktaal, die net een soort van mooie manier om te zeggen dat het niet programmeerconstructies hebben zoals we zagen zelfs terug in de dag van Scratch. Er zijn geen lussen. Er zijn geen voorwaarden. Het is echt een taal over het markeren van uw gegevens en formatteren of structureren het op een bepaalde manier. 

CSS, ondertussen, eveneens geen programmeertaal. Het is zelfs nog meer esthetisch georiënteerd. En het laat je om te sorteren van de fine-tunen dingen zoals grootte en de kleuren het lettertype en plaatsing en dat alles. Dan hadden we 

SQL. Dus SQL is inderdaad een programmering taal in zekere zin, zij het op maat specifiek databases. Maar hoewel we u alleen kennismaken met selecteren en te voegen en te verwijderen en bij te werken en een paar anderen, blijkt dat je kunt eigenlijk schrijf functies of gebleken is dat ze genoemd, in SQL die er uitzien en handelen helemaal zoals PHP en C-functies. Dus weet dat deze bestaan. Maar we hebben niet eens de moeite met hen we krassen alleen het oppervlak in. En dan JavaScript, de laatste van onze talen officieel geïntroduceerd. Dus JavaScript, ook, is een geïnterpreteerde taal. En degenen die bekend zijn, doen je wilt om het te onderscheiden enkele kenmerkende van zowel C en PHP? Wat maakt het anders? 

Publiek: Het is niet gecompileerd. 

DAVID MALAN: weer zeggen? 

Publiek: Het is niet gecompileerd. 

DAVID MALAN: Het is niet gecompileerd. Zo ook wordt geïnterpreteerd. Dus het is niet gecompileerd. Maar dat maakt het een beetje zoals PHP. Maar het is toch anders PHP in een aantal opvallende manier, althans in de manier waarop we gebruiken. Ja? 

Publiek: Het loopt client-side. 

DAVID MALAN: Het loopt client-side, meestal. Dat is inderdaad de onderscheidende Kenmerkend voor ons nu. C was server-side in de zin dat we hebben alles in CS50 IDE. PHP tot nu toe is geweest server-side, voorzover zoals ook wordt interpreted-- niet gecompileerd, maar interpreted-- binnen CS50 IDE, wat natuurlijk is slechts een server of servers in de cloud. 

Maar JavaScript, zelfs hoewel je je gaat om te beginnen met het schrijven van het voor, zeg, PSET acht en misschien laatste projects-- je bent gaan om het recht CS50 IDE en opslaan in bestanden in CS50 IDE, CS50 IDE en op zijn beurt de wolk servers waarop het is georganiseerd, zijn niet van plan interpreteren of uit te voeren code. Integendeel, het gaat in worden gestuurd onveranderd tot aan de browser. En het dan gaat om IE te zijn of Chrome of Firefox of Safari of wat dat eigenlijk interpreteert het, van boven naar beneden, van links naar rechts. Dus de belangrijkste onderscheidende kenmerkend voor vandaag is dat JavaScript is client-side en PHP, bijvoorbeeld, heeft zijn server-side. Nu, dit heeft interessante consequenties voor, zoals, intellectuele eigendom en wie kan eigenlijk zien uw code. En inderdaad, kun je gaan op het internet en je ziet de meeste een code dat iemand geschreven in JavaScript. Soms is het te lezen, soms is het versluierd. Maar meer op die te zijner tijd. 

Dus JavaScript, mooi genoeg is, is super soortgelijke, syntactisch, C. En net als PHP, er is geen hoofdfunctie. Als u wilt gaan schrijven JavaScript-code, zoals u zult zien vandaag, je gewoon beginnen met het schrijven ervan. Maar het is, je zult zien, in het bijzonder bruikbaar in de context van webbrowsers. Echter, mijn kleine disclaimer-- meestal earlier-- was om te zeggen dat je kunt steeds vandaag gebruik JavaScript server-side met behulp van een fancy kader genaamd Node.js dat sommige van eigen toepassingen CS50's zijn geschreven in. Controleer 50 daadwerkelijk gebruikt Node.js. Maar we gaan richten op JavaScript client-side hier op uit. 

Dus hier is een reeks voorwaarden in PHP. Sorry, in-- eigenlijk, dat statement, is ook correct. Hier is ook een reeks omstandigheden in JavaScript. Syntactisch, het is identiek C en PHP. Mr. Boole's uitdrukkingen zijn, Evenzo syntactisch identiek aan zowel C en PHP. We hebben ook schakelaars in JavaScript die identiek uitzien. We hebben voor lussen die zijn identiek gestructureerd while loops, doen terwijl loops. 

Deze is een beetje anders. PHP had voor elke construct dat je zou kunnen worden met behulp of zullen gebruiken in PSET zeven, misschien. JavaScript heeft deze speciale versie van want waar je letterlijk iets te zeggen zoals variabele sleutel in voorwerp, waarin is een zeer beknopte manier om te zeggen, als ik een object-- heb en we zullen praten over deze weer in een moment-- en ik wil herhalen over alle van de sleutelwaarde paren binnen, Ik hoef niet te achterhalen hoe numeriek indexeren met nul, één, twee drie. 

Ik kan dit letterlijk zeggen. En op elke iteratie, JavaScript voor mij zal de variabele sleutel actualiseren de eerste sleutel, dan is de volgende sleutel, dan is de volgende toets, dan is de volgende toets, enzovoorts. En ik kan op zijn waarde te krijgen door het behandelen een object in JavaScript, zoals we zullen zien, alsof het een associatieve array in PHP. Sterker nog, als je eindelijk verpakt uw geest rond wat een associatieve array in PHP, kunt u denken aan het voor nu als identiek aan een object in JavaScript. Maar dat is een beetje een oversimplificatie. 

Arrays kijken, mooi genoeg, identieke PHP behalve één personage. Er is één ding ontbreekt hier dat zagen we vorige week met PHP. Wat is weggelaten? Ja? Geen dollarteken. We zijn dus terug naar een meer normale wereld waar variabelen hebben geen dollartekens. Maar je prefix hen met een var, typisch. En var betekent variabel. En net als PHP is losjes typed-- waarbij er soorten, Er zijn nummers en strings en praalwagens en zo forth-- JavaScript heeft op dezelfde types. Maar het is losjes getypt in dat we de programmeurs niet hoeft te geven. We hoeven alleen maar op de hoogte zijn dat verschillende types bestaan. 

Variabelen, meanwhile-- hier is hoe we kunnen verklaren "hello, world" als een string. Merkt het is identiek aan PHP maar geen dollarteken. En dit is iets wat we zullen beginnen vandaag meer zien, waarbij je een object hebt met sleutels en waarden. En als je wilt proberen af te leiden uit de laatste week-- de syntax is een beetje anders. Maar een beetje gezond verstand check-- hoeveel sleutels heeft dit doel lijken te hebben? Dus ik zie vier. Ik zie twee. 

Dus het is eigenlijk twee. Dus dit is een verzameling van twee key-waarde paren. De sleutel is het symbool waarvan de waarde is FB. De sleutel is de prijs waarvan de waarde is 101,53. Dus dat zijn twee key-waarde paren. En vergeet niet, PHP-- en dit is weer gewoon soort van syntactische verschil. Het is niet zo intellectueel interessant. PHP kan dit hetzelfde hebben geschreven zoiets als follows-- citaat, evenaart. En ik deze veranderen in vierkante haken. En dit dan veranderen ik genoteerde woord, "prijs." En dan weet ik niet een dubbele punt te gebruiken. Wat heb ik vorige week gebruiken? Ja, het isgelijkteken arrow funky notatie. 

En dan heb ik hier hetzelfde. Hetzelfde hier. En dat is alles. Dus het is fijn als dit heeft niet echt gezonken in het geheugen gewoon maar omdat het is echt intellectueel oninteressant. Het is gewoon syntactische verschillen. Maar de ideeën zijn precies hetzelfde. Binnenkant van deze variabele quote in JavaScript is een verzameling van key-waarde paren, waarvan een symbool, waarvan is de prijs. En ik kan krijgen op die waarden de volgende syntax. Net als in PHP, ik kon iets doen like-- laten me dit vak een beetje groter. Net als in PHP, ik kon maken dit-- oh, dammit. Kom op. 

Net als in PHP-- OK, we gewoon gebruik maken van de presentator aantekeningen. Net als in PHP, kan ik do $ citaat $ citaat ["symbool"], en dit zal me de waarde van "symbool". In JavaScript, gaat het om identiek, waardoor ik kan het gewoon doen. Het enige dat is ontbreekt, is het dollarteken. 

Zo mooi genoeg is, dan is er niet zo heel veel nieuwe syntaxis. Dus wat we vandaag concentreren op, echt, is een aantal van de ideeën en de toepassingen. En het eerste applicatie die je misschien hebben gezien als je doken PSET zeven al is deze syntaxis. Dus in PSET zeven, als je hebt gezien of het nog niet gezien, weten dat er een bestand dat we geven je config.json-- JavaScript geroepen Object Notation. Waarom? We wilden in staat zijn om u te voorzien van een sjabloon met een aantal key-waarde paren. We wilden in staat zijn om u een lijst van de gastheer, de naam van de server. We wilden u een geven placeholder voor uw gebruikersnaam en een tijdelijke aanduiding voor uw wachtwoord. Als je niet ziet dit nog, geen zorgen te maken. Meer hierover in PSET zeven [? spec. ?] En dan, natuurlijk, willen wij u in de to-do's in te vullen want als u zich aanmeldt bij CS50 IDE, ieder van jullie heb je je eigen gebruikersnaam en wachtwoord. 

Dus konden we een half dozijn heb gebruikt of meer verschillende bestandsformaten. We konden een txt-bestand gebruikt. We konden een CSV-bestand gebruikt. We konden hebben gebruikt een INI-bestand, een XML-bestand, een hele hoop meer acroniemen die u misschien nooit hebben gehoord. Het is een soort van willekeurige aan het einde van de dag. Maar super populair deze dagen is een tekst formaat genaamd JSON-- JavaScript Object Notation-- die er zo uitziet. Het is een beetje cryptisch, maar let op de patronen. Je begint met een open krullend brace, en je eindigt met het zelfde. Binnenkant van dat is iets. Het is een sleutel-waarde paar. Dus dit is een object dat ik kijken naar het scherm hier dat één sleutel, welke waarde heeft. En afgeleid op basis van de vorige patroon, wat is de sleutel hier? Databank, het ding om Links van het colon. 

Nu de waarde toevallig een meerdere lijnen deze tijd. Maar de waarde begint met een krullend brace en eindigt met een accolade. Dus wat zou u voorstellen is de type de waarde van database? Een woordenboek, of gewoon meer bondig, een object. Rechts? Dit is een soort van een datastructuur die kunnen andere structuren gebruiken in zichzelf. Dus als dit hele ding zijn we het bellen van een object-- en een object is gewoon een stelletje key-waarde pairs-- de waarde gegevensbank zelf is een object. De waarde van de database heeft een heleboel van sleutelwaarde paren, waarvan de eerste is gastheer, dan noemen, dan gebruikersnaam, wachtwoord dan, elk waarvan de waarden, ondertussen, het gewoon een saaie reeks dubbele aanhalingstekens. 

Dus zelfs als dat niet super helder gewoon nog niet, weet dat dit slechts een standaard, tamelijk saaie manier het opslaan van data in een standaardformaat. Maar de gemeenschappelijke fouten die je zou, zelfs in PSET zeven, zijn kleine domme dingen, zoals als je per ongeluk de komma er weglaten. Dat zal resulteren in het bestand niet noodzakelijkerwijs leesbaar. Als u per ongeluk zaken als het weglaten citaten, gaat het niet leesbaar zijn. Dus het is een vrij nitpicky bestandsformaat, maar het is er een die is super gemeen. We toevallig te gebruiken, alhoewel je hoeft elke JavaScript anders niet gebruiken, in PSET zeven. 

Prima. Dus onthoud dit beeld. We spraken over, in HTML, dat de code kan er zo uitzien. Dit is de HyperText Markup Language [Onverstaanbaar] voor slechts "hello, wereld." Maar dan hebben we voorgesteld een tijdje terug dat als het helpt, wilt u misschien gaan denken over dit nu al als een boom. In feite, de inkeping wij Gebruik alleen omwille van de leesbaarheid's of omwille van de stijl van Links kan soort worden vertaald in deze boom, waar u hebben een aantal speciale root node dat we algemeen genoemd document, waaronder is de wortel HTML element of tag, HTML, die moet dan twee kinderen, hoofd en lichaam. 

En dan op zijn beurt, het hoofd heeft een titel. En titel een tekst waarde. En lichaam heeft evenzo een tekst waarde. Dus als je comfortabel gezegde dat ja, kunt u dit HTML nemen en schetsen een beeld als dit, de rechterzijde is een mooi mentaal model, want nu dat we JavaScript, een programmeertaal taal die browsers kan uit te voeren en te interpreteren voor u, het blijkt dat wat We staan ​​op het punt om te doen in code is beginnen om deze te manipuleren boomstructuur in het geheugen. We hoeven niet te bouwen de boom in het geheugen. We hoeven niet te soort doen PSET-vijf-stijl datastructuur complexiteit. De browser, mooi genoeg, upon interpreteren HTML boven naar beneden, links of rechts, wordt letterlijk gaat geef ons het equivalent van een pointer om die hele boom voor gratis. Het doet al het harde werk. Dat is wat Mozilla en Apple en anderen voor ons hebben gedaan. 

En JavaScript gaan we in staat zijn te controleren en te veranderen en doen interessante dingen te die boom, ook wel bekend als een DOM of Document Object Model. Wat voor dingen? Nou, het blijkt dat in JavaScript, is er deze waslijst van gebeurtenissen die kunnen plaatsvinden. En we hebben niet echt gebruikt dat woord sinds week nul en PSET nul wanneer we spraken over Scratch. De meesten van jullie waarschijnlijk niet gebruiken een gebeurtenis in uw Scratch project. Maar je zou kunnen herinneren de eenvoudige Marco Polo bijvoorbeeld, waar we twee sprites, van wie gezegd, Marco. De andere waarvan vervolgens, na luisteren en het horen van dat evenement, zei Polo. Zo niet, dan voel je vrij om terugkijken dat ver terug. 

Maar dit is gewoon om zeggen, en u kunt soort afleiden van de namen van deze dingen, JavaScript, zo blijkt, gaat ons een manier om te luisteren te geven voor de muis naar beneden of de muis naar boven of sleutel naar beneden of sleutel gaan omhoog of onsubmit onselect of onresizing iets. Met andere woorden, elke fysieke actie dat een mens kan nemen met een browser die u elke dag doet, kun je schrijven code voor die luistert naar de gebeurtenissen en dan doet iets geschikt. 

Bijvoorbeeld, als u Google Maps gebruikt, wat gebeurt er als u klikt en bewegen de muis, typisch? Als u klikt en sleept? Ja? Precies. De kaart begint te bewegen. Dus je kan soort zien wat er hier, wat is daar. En hoe doet Google implementeren dat? Nou, vermoedelijk, zijn ze met een paar van deze gebeurtenis luisteraars, die zegt, luister op de muis down-- dus wanneer de gebruiker fysiek duwt zijn trackpad of zijn of haar muis naar beneden. En dan zijn we op zoek naar iets als beweging of een andere gebeurtenis die stelt ons in staat om de luchtweerstand te vangen. En in feite, drag is eveneens in deze dot dot dot lijst van mogelijke opties. 

Dus dit gaat een krachtig zijn manier om te beginnen reageren op de gebruiker nog voordat hij of zij eigenlijk klikt iets wat expliciet als dienen. Maar we gaan introduceren een paar thema's om er te komen. Maar laten we eerst de overgang sommige eigenlijke code. Dus ik ga om te gaan vooruit en open dom-0, die een zeer eenvoudig voorbeeld hier dat als ik in eenvoudig te zoomen heeft deze ingang hier voor mij. En ik ga om verder te gaan en typ "David" voor mijn naam en klik op Verzenden. 

En dan, zij het soort goedkoop, I hebben deze prompt die opduikt die zegt, "hallo, David!" Dus dit is een soort van zoals onze "hello, world" dat we hebben een tijdje terug in C en zelfs in PHP, want ik heb dynamisch uitgestuurd mijn naam. Ik kan de naam van iemand anders hier te doen. Ik kon dit alleen veranderen, als, Hannah, klik op Verzenden. En inderdaad, de kleine pop-up veranderingen. 

Nu, pop-ups zijn een van de meest misbruikte kenmerken van het web. En inderdaad, weer de dag pop-up blockers in zwang, omdat je zou gaan om enkele website-- misschien een twijfelachtige plek-- Dat zou dan plotseling start peppering uw scherm met een hele hoop van pop-ups. En dus is deze mogelijkheid om pop-up ramen voor de gebruiker is niet bijzonder geweest goed ontvangen door de mensheid. Dus dat is de reden waarom je zien voorkomen dat dit ding, die net maakt dit hele ding lelijk. Dus we gaan een behoefte betere manier om de gebruiker gevraagd. Maar voor nu, dat lijkt te werken. Dus gewoon intuïtief, wat lijkt hier te gebeuren? Ik ga je gang en klik op Verzenden en dan is er iets gebeurt, duidelijk. Maar wat gebeurt niet, dat gebeurde vorige week wanneer ik klikte versturen? Wat gebeurde niet op het scherm? Sorry? Herladen. De URL niet helemaal veranderen. Ik zei dat dit dom-0, en ik ben nog steeds op dom-0. Normaal gesproken zouden we veranderd naar een andere URL, zoals register.php of dergelijke. 

Maar zelfs als ik ontslaan dit ding door op OK te klikken, merken dat de URL blijft volledig zetten. En, in feite, als ik ben een beetje sceptisch, laat me open te stellen Chrome. Laat me openstellen van het tabblad Netwerk. En merken dat het leeg op het moment. Laat me gaan en opnieuw indienen Maria. Er is geen netwerkverkeer dan ook. Dus er is geen HTTP. 

Dus inderdaad, als ik kijk naar de broncode voor dit-- laat me dit venster te sluiten en ga naar View Source. Interessant. Het lijkt erop dat er een aantal nieuwe labels, waaronder script. Dus laten we eens een kijkje nemen binnen CS50 IDE wat ik naar de gebruiker. 

Dus hier is-- laten focus op alleen de HTML. Hier is de onderste helft van dom-0.html. En merk op dat het heeft een titel, een hoofd-tag, een body-tag, een vorm tag. Maar wat springt uit om u zo anders, vooral als je nog nooit hebt geschreven jezelf elke JavaScript. Laat me schuiven een beetje naar hier. Ik heb een input gekregen, een andere ingang voor te leggen. Ik heb een ID, dat is een soort van nieuwe. Maar we zagen dit met CSS. Wat is zeker nieuw? Ja? Nice. 

Prima. Dus waar het onsubmit zegt: merken wat lijkt te volgen. Dit is een attribuut in HTML-nomenclatuur. De waarde ervan is dit geciteerd touwtje hier. En dit ziet er een beetje raar op het eerste gezicht. Het is geen HTML. Het is niet CSS. Dit is, zoals je wel kan raden, JavaScript. Dus het lijkt erop dat ingebouwd in deze webpagina is een functie genaamd begroeten. En ik ben afgeleid dat net want het is een woord, te begroeten. Het heeft een open paren, dicht paren, puntkomma. Ziet eruit als een C-functie, ziet eruit als een PHP-functie. 

En inderdaad, het gaat om is een JavaScript-functie. Dan ben ik terug vals. We zullen terug te komen dat in slechts een moment. Maar waar is deze functie gedefinieerd? Nou laat me scrollen het begin van het bestand. En ook al is het een lange lijn, Het is betrekkelijk eenvoudig. Laat me hier uitzoomen en richten op deze vier lijnen. 

Dus in JavaScript, maar zoals PHP, je gewoon laten we zeggen, letterlijk, het woord "functie" de naam van de functie, en dan haakjes met enige arguments-- geen argumenten in deze zaak. En er is geen soort return in JavaScript, net als PHP. Dus het is een beetje losser dan C. Open accolade, dicht accolade. Ingebouwd in JavaScript is een function-- niet een aanbevolen function-- maar een functie genaamd alert wiens enige doel in het leven is op te trekken die vrij lelijk vraagt ​​dat we een ogenblik geleden zag. 

Nu is dit soort van een mondvol. Wat is hier aan de hand? Dus laten we beginnen aan markeren hier alles. Dat is hetzelfde argument te waarschuwen. En wat is er aan de hand? Dit ziet er net als een string. En het blijkt, in tegenstelling tot PHP en in tegenstelling tot C, het maakt niet uit in JavaScript Als je enkele aanhalingstekens of dubbele aanhalingstekens. Ze zullen gelijkwaardig zijn. En eerlijk gezegd, het is gewoon populair deze dagen voor JavaScript programmeurs altijd Gebruik enkele aanhalingstekens om wat voor reden. Het is gewoon het ding om te doen. Maar we konden dubbele aanhalingstekens te gebruiken, als goed. 

Dus plus is een nieuw karakter. Maar degenen onder u die gedaan hebt dit al eerder, wat betekent plus betekenen? Ja. Samenvoegen. Zo zagen we dit in PHP. Er is gewoon de stip operator in PHP dat zal twee strings met elkaar samen te voegen. C was een pijn in de nek om dit te doen. Recall van PSET zes, dat was een bijzondere pijn in de nek, u zou moeten gebruiken iets als strcat na de toewijzing van het geheugen op de stapel of de heap. Je moest springen door hoepels gewoon om twee tekenreeksen samen te voegen. In JavaScript, het is super eenvoudig. Gebruik gewoon de plus operator tussen hen. 

Dus het complex ogende ding lijkt om dit te omdat eind deze hele reeks, ik heb net samenvoegen op een uitroepteken. Dus als wat was opduiken werd "hallo, David", "hallo, Hannah," "hallo, Maria," enzovoort, duidelijk dat midden ding tussen de twee plussen moet me toegang tot wat te geven? Wat is daar voor zorgen? Ja. Dus ik zal hier doen alsof beantwoorden hun naam, toch? Zodat hun naam dook in de finale resultaat. Dus wat betekent dit? Nou, ik eerder in dat de voorgestelde beeld dat de zogenaamde DOM heeft deze speciale hoofdelement weg top genoemd document. En nu, zo blijkt, dat gaat een bijzondere globale variabele in JavaScript, ingebouwd in dat is een heleboel nuttige functionaliteit. Onder de bruikbare functionaliteit is mogelijkheid om op elk afstammeling knooppunt. Die vierkant of rechthoekig of ellipsen slechts knooppunten in een boom, zo te zeggen. 

Dus het blijkt dat ingebouwd in JavaScript's document object is een functie, ook wel bekend als methode, dat heet getElementById. De syntaxis voor het bellen een functie in JavaScript dat is de binnenkant van een object of een variabele is alleen met de dot-notatie. En we zagen dit in C wat struct syntax. Je ziet dit in PSET zeven, soort, soort, als je ziet CS50 :: query. De dikke darm dikke darm in PHP is een ander manier van bellen een functie die is binnenzijde van een voorwerp. 

Maar voor nu in JavaScript, het is gewoon een punt. En dus is deze functie, mooi genoeg, soort zegt wat het does-- krijgt element door ID. Een element is gewoon een andere naam voor een tag of knooppunt in de DOM. En dus ga element door ID "naam" betekent dit-- hier is mijn HTML. En op basis van deze HTML Wat knoop of wat HTML tag ben ik gaat programmatisch overhandigd worden door te bellen naar document.getElementById? 

Ja, precies. Ik ga naar de input te krijgen element er wiens ID is "naam." Zo speciaal, kunt u denken van deze functie, getElementById, als een manier geven terug een pointer naar die specifieke knooppunt in de boom. We hebben dit niet getekend boom, maar het is een manier het krijgen van toegang tot die rechthoek of dat rechthoek door het uniek identificeren van het via zijn ID. 

Nu, waarom is dit nuttig? Nou, het blijkt dat je ooit hebt gekregen dat knooppunt, dat de rechthoek van de beeld, dat knooppunt binnenkant van het, op zijn beurt, heeft een hele hoop properties-- key-waarde paren of gegevens, waarvan één waarde genoemd. Dus letterlijk, het is een soort van een mondvol om de hele zaak uit te leggen. Maar aan het eind van de dag, dit alles doet is geeft u een tekenreeks die de gebruiker getypt in deze hiërarchische manier. Maar ik hou niet van een paar van deze dingen. Of liever gezegd, er is wat nieuwsgierigheid nog steeds. Dat alles leek te werken. Waarom denk je dat ik terug valse na het aanroepen te begroeten? Dit ziet er een beetje lelijk, dat Ik heb er twee verklaringen gescheiden door puntkomma's. Doe een gok. Als ik verwijderd return false, wat zou kunnen gebeuren, maar instinctief? Sorry, zeggen weer? 

Open een bos van Windows. Dus potentieel misschien iets als dat zou gebeuren. Wat anders? Kan een verzoek indienen, waar? Naar dezelfde pagina. Dus, in feite, dat is dat hoe dichter antwoord hier, hoewel, in tegenstelling in het verleden, ik heb niet gespecificeerd het attribuut actie, die normaal we moeten doen. Blijkt dat er een standaard. Als u geen actie te specificeren, het is als zeggen citaat, unquote of de naam van het bestand zelf, die in dit geval zou zijn als dom-0.html. Het is gewoon een soort van afgeleid, of liever geïmpliceerd. 

En dus als ik dit niet doen, laten we opmerken. Laat me dit op te slaan. En ik heb terugkeer valse verwijderd. Laat me terug naar deze voorbeeld en kracht herladen. En je zou mij hebben zien suggereren dit op CS50 Bespreek een paar keer. Als er iets ooit handelen funky en de browser is niet gedraagt ​​zoals u verwacht, vaak je wilt houden Shift en klik op Reload. Dat zal elk bestand te dwingen om te herladen en lokale cache van de browser niet te gebruiken of kopiëren zodat nu, laat me gaan en open mijn inspecteur, het tabblad Netwerk. Ik ga om te klikken Log behouden omdat ik wil het niet om de rijen te schrappen zodra ik elders weggevoerd. 

Laat me hier ga je gang en type Andi, klik op Verzenden. Prima. Dat lijkt zoals verwacht. Het zegt "hallo, Andi." Laat me klik op OK. Interessant. Merk op dat de pagina veranderd, zij het in de oorspronkelijke pagina. Let op de URL soort veranderde. Het voegde een vraagteken, die meestal een indicator die we hebben geprobeerd om iets in te dienen. En vervolgens op de bodem, nog nadrukkelijker, Hier is de feitelijke HTTP verzoek die een respons van 200 gekregen dat bracht me hier terug. 

Dus dit is niet wat we willen, toch doen? Omdat ik het niet wil herlaad de hele pagina. Ik in plaats daarvan wilde terugkeren vals om zo kortsluiting standaard gedrag van de browser, die was, natuurlijk, om de pagina te dienen. 

Dus laten we een kijkje nemen op een marginaal beter voorbeeld. Dit is dom versie one. En let op de volgende. Het is OK als je niet Grok alle regels code. Maar wat is fundamenteel verschillend over deze implementatie? Ik zal bepalen het zich gedraagt ​​de Hetzelfde, doet hetzelfde. Wat heb ik natuurlijk anders gedaan? Ja? 

PUBLIEK: [onverstaanbaar]. DAVID MALAN: Ja. Zodat de functie wordt gedefinieerd differently-- met andere woorden, afwezig in de vorm daar op lijn 7-- of plaats, lijn 8-- niet meer heb ik de onsubmit attribuut. In het vorige voorbeeld, had ik dit. En dan heb ik letterlijk schreef hier mijn code. En toen zei ik return false. En als het niet wrijven je nog de verkeerde manier, Moet beginnen voorzover als, net als in HTML, toen we begonnen om samen te mengen met CSS in stijl attributen, is net begonnen om een ​​beetje te krijgen rommelig of voel me een beetje verkeerd. 

Evenzo hier als u start met HTML, en dan ben je automatisch plop sommige JavaScript-code in het midden van de string, het is niet van plan zeer onderhoudbaar zijn. Rechts? Het is zelfs niet duidelijk op het eerste de plaats waar de JavaScript-code. Dus het zou heel mooi zijn als een principe van beter ontwerp, laten we volledig houden onze HTML scheiden van onze JavaScript. 

Dus om dat te doen, wat we hebben hier gedaan is de following-- we gewoon gebruik maken van HTML voor slechts markup. Dus in één versie van dit alles Ik heb een vorm met een unieke ID. En dan naar beneden hier, ik ben te profiteren van een speciaal kenmerk van JavaScript waarbij ik kan hebben wat riep een anonieme functie. Dus het blijkt dat als ik bel document.getElementById van 'demo' dat is als het geven van me een verwijzing naar dit knooppunt in mijn boom, de vorm element, bij wijze van spreken. 

Nu, ik weet alleen van wetende een beetje HTML nu zijn we na het lezen van een aantal online referentie, dat een vorm element ondersteunt een hele hoop van het evenement listeners-- in Met andere woorden, de waslijst van het evenement luisteraars dat we een ogenblik geleden zag. Ik weet uit het lezen van de documentatie dat onsubmit een geldig evenement luisteraar voor een formulier element. 

Dus zodra ik weet dat, het is veilig voor mij om te doen de following-- dat knooppunt krijgen van de boom, de vorm element, Toegang hebben tot de zogenaamde onsubmit eigendom. Zodat de stip betekent alleen Dit is een eigenschap, als een bijzondere waarde erin. En welke gegevens het type ben ik toewijzen blijkbaar om onSubmit, dat is effectief een variabele binnen van dat knooppunt in de boom? Het is een veld binnenin die struct. Wat is het type data? 

Een functie, ja. Dus het blijkt dat PHP heeft dit. En hoewel we heb je niet vertellen, C heeft ook functieverwijzingen, de vermogen om te passeren en toe te wijzen functies als waarden zelf variabelen. En we gaan niet weer terugvallen in C. Maar voor nu, blijkt dat aan de rechterkant hier hoewel het ziet er een beetje funky, dit betekent, he browser, geef me een functie. Ik ga niet eens de moeite te geven het een naam, want ik ben letterlijk gaan toewijzen laten we noemen het het adres van deze functie onmiddellijk onsubmit. Met andere woorden, browser, hoeft u niet om te weten wat deze functie heet. Je moet alleen weten waar het in het geheugen. En dus volstaat gewoon om hebben een isgelijkteken er en niet te storen benoemen deze, zoals foo of begroeten of een ander woord. En nu dit is slechts een stilistische ding. Ik kon dit accolade verplaatsen op the-- sorry-- volgende regel zoals wij gewoonlijk doen CS50. Maar in JavaScript, is het eigenlijk stilistisch gemeenschappelijke gewoon blijven de accolade, de eerste, op die eerste regel. 

Maar hierna, er is niets interessants. Dat geopend accolade net markeert het begin van mijn functie. De functie is nu identiek, behalve dat ik heb inclusief de terugkeer valse in deze functie. Want het blijkt out-- en je zou alleen weten dit uit te lezen de documentation-- dat als de functie die u toewijst aan de onsubmit handler false retourneert, de browser gewoon weet en gaat ermee akkoord het formulier niet te onderwerpen aan een server. Als het waar terugkeert, zal het indienen het naar een server om redenen die we zullen zien zijn nuttig in slechts een moment. 

En dan de puntkomma na de accolade er gewoon betekent dat ik ben klaar met het definiëren van de functie. Je weet wat je moet zo snel bellen als je hoort een inzending. Prima. Dit is nog steeds aantoonbaar soort lelijk. Dus wat kunnen we nog meer doen? 

Nou, het blijkt dan in tweede versie, die de last-- en we gewoon blik op dit. Aan het risico dat Het lelijker, het blijkt dat er een bibliotheek de wereld genaamd jQuery. En jQuery is een super populaire JavaScript-bibliotheek dat is zo populair dat de meeste elke JavaScript-- het is niet ongewoon voor mensen te verwarren jQuery JavaScript. Waarom? JavaScript zelf heeft zeer breedsprakig manieren om things-- document.getElementById, dadadadadada. Je uiteindelijk met zeer lange regels code. 

Dus een collega genaamd John Resid, die eigenlijk werkt voor een startup up van deze dagen, kwam met deze bibliotheek jaar geleden dat veel mensen hebben bijgedragen jQuery geroepen dat verandert de syntax op de volgende wijze. En net zo heb je dit gezien, want je zult altijd zien dit als een te doen webgebaseerde afstudeerproject, Dit zou gelijk manier worden uitvoering van die dezelfde functie gebruiken deze bijzondere bibliotheek. 

Nu, in plaats van plagen het uit elkaar in zijn geheel, Laten we eens kijken naar enkele patronen. Deze syntaxis lijkt te hebben hoeveel anonieme functies of naamloze functies of AKA lambda functies? Twee, toch? En u weet dat, zelfs als je bent niet super comfortabel met deze, alleen door het feit dat het zegt function () twee keer. 

En het blijkt dat wat deze code is doing-- en we zullen verwijzen naar online referenties, uiteindelijk, voor de hulp bij deze. Dit betekent gewoon dat wanneer het document klaar is, ga je gang en registreer de volgende functie als dienen handler voor HTML element waarvan uniek idee is demo. En dan, als dat gebeurt, noemen deze twee regels code. En dit is, tragisch, een meer uitgebreide manier om te zeggen return false. En we dit alleen maar omdat je zult zien code zoals deze online. En het is niets te worden afgeschrikt door. Maar eerder, in gedachten houden dat wat gaat vaak om in JavaScript is dit paradigma. En dat is dus de reden waarom laten we het voor nu. Prima. Dus zonder al te wonen veel op dat de syntaxis, zijn er vragen over deze voorbeelden of ideeën tot nu toe? Prima. Dus laten we gebruik dit voor iets nuttigs. Het maken van een webpagina die gewoon zegt hallo, zo en zo is niet zo interessant, niet underwhelm. Dit gaat niet om mooi te zijn, maar het gaat om iets nuttigs te doen. Laat me terug naar mijn directory hier en open te stellen, zeggen, vorm-0.html. 

Dus veronderstel dat dit is de eerstejaars intramurale sport registratie pagina zonder CSS of enig gevoel voor design. En ik wil om vooruit te gaan en registreer hier met een wachtwoord. Ik ga akkoord met de voorwaarden en de voorwaarden en klik op Registreren. En nu is de website zegt: "U bent geregistreerd! (Nou niet echt.)" Dat lijkt het werkte, maar laat me gaan en dwingen reload. 

En laat ik zeggen, nee, je niet moet mijn echte e-mailadres. Of misschien zullen we gewoon zeggen mail in. Wachtwoord zal zijn, zoals, 12345. En dan, net omdat ik een idioot, nu is het 123456789. En ik ben niet van plan om de doos te controleren. 

Hmm. Prima. Dus er is een mooie kans voor verbetering. En weet je, of zal in PSET zien zeven, dat je code-- kan schrijven en je moet schrijven code in PHP-- te verdedigen tegen dit soort gebruiker fouten omdat de gebruiker duidelijk niet heeft meegewerkt. En hij of zij heeft je niet gezien alle waarden gevonden of in de vorm dat je ze wilde. Dus je zult zien in PSET zeven die we kunnen zeker een aantal als de omstandigheden die zeggen Als het e-mailadres is geen username@something.edu, we konden gewoon sorry zeggen en excuses aanbieden aan de gebruiker veel, zoals je misschien in PSET zeven. Of als ze niet hebben gecontroleerd of doos, blijkt in PHP, kunt u detecteren dat, ook. En zeker als de wachtwoorden niet overeenkomen als in register.php voor PSET zeven, kunt u detecteren dat. Maar dat is een pijn in de hals die nu vragen ze ons naar de hele weg naar de server. De gebruiker wordt geïnformeerd over de fout. En ten minste, tenzij u gebruik maken van sommige liefhebber technieken, nu moeten ze op de pijl terug. Zou het niet mooi zijn, als veel websites vandaag de dag, Als u meer directe gehad feedback, direct? 

Met andere woorden, laat me gaan naar versie één, die zal niet mooier zijn. Maar het heeft wel deze functie. Malan, 12345, 123456789, niet gaat de doos te controleren, Register. Wachtwoorden komen niet overeen. Dus hoewel deze pop-up is ugly-- we kunnen dit uiteindelijk vervangen met iets als Bootstrap, waar je ziet in PSET zeven is een zeer populaire library-- ik deed detecteren dat de wachtwoorden komen niet overeen. Prima. Nou, laat me dat vast te stellen als de gebruiker. Laat me gaan en zeggen: 12.345, 12.345. Nog steeds niet het controleren van de overeenkomst. U moet akkoord gaan met de termen en voorwaarden. Dus waarom? 

Als we al hebben geponeerd dat er een manier is, en we hebben u nodig PSET zeven tot fouten op te sporen aandoeningen zoals deze server-side, waarom zou ik moeite dit ook doen in JavaScript? Wat is een argument in aangenomen waarbij wat je gaat zien als some-- bent er is extra complexiteit. 

Misschien is er geen ondersteboven. Wat zou het zijn? PUBLIEK: [onverstaanbaar]. DAVID MALAN: Oh, interessant. Potentiële exploits. Zo zeker van, als je niet omgaan foutieve invoer van de gebruiker die grote, misschien is het des te beter als het zelfs niet de server te bereiken. Ik zou er terug duwen en zeg, moet je waarschijnlijk fix deze beide problemen. Maar dat is eerlijk. Wat anders? 

PUBLIEK: [onverstaanbaar]. 

DAVID MALAN: Ja. Deze code, zoals we al eerder zei, is geïnterpreteerd aan de client-side. Het heeft geen last van de server, wat betekent dat niet invloed belasting of de capaciteit van de server. En nu, voor kleine oude mij, dit heeft geen betekenisvolle invloed want ik heb een gebruiker nu. 

Maar als je elke website van behoorlijke omvang, vooral de grootste, zoals Facebook, hoe meer je kunt de mensen af ​​te houden van uw server beter omdat een server, natuurlijk slechts een beperkte hoeveelheid RAM, een eindig aantal gigahertz, een eindig aantal dingen het kan doen per tijdseenheid. Dus als er meer mensen in de wereld raken van je server, per ongeluk in te loggen verkeerd, net zo goed als je kan die belasting af te houden van uw server. Plus, vooral op een mobiel device-- Als je ooit hebt loggen in my.harvard of Yale netid of iets dergelijks, er is dit de latentie met een heleboel websites als die waarbij het duurt, zoals, een verdomd seconde of twee soms. En dan, mijn God, als je verkeerd typt, dan moet je terug te slaan en opnieuw het. Dus er is vertraging, vooral op tragere netwerkverbindingen. Maar JavaScript, want het draait op de client en hoeft niet om heen en weer te gaan over een mogelijk langzame internet aansluiting kunt u krijgen bijna onmiddellijk feedback. 

Dus laten we eens kijken naar dit. Laat me openstellen vorm-0 en kijken naar de HTML hier. En laten we zien wat er gaande is. Dit is een vorm waarvan de actie is register.php. Ik ben gewoon met behulp van krijgen, zodat dat ik de URL kon zien. Maar voor wachtwoorden, zouden we zeker willen om dit te veranderen om te posten in de werkelijkheid. Hier is een invoerveld van het type tekst. Hier is een andere ingang veld van het type wachtwoord. Hier is, als je nog nooit hebt gezien, een ingang van het type checkbox. 

Maar er is geen JavaScript hier dan ook. Dit is gewoon HTML die gaat register.php. Maar in één versie, waar ik begon aan die pop-ups te krijgen, laten we zien wat er werkelijk gebeurt hier. In een uitvoering, welke Ik ga see-- I dacht dat ik kon genoeg kraam met genoeg woorden, maar ik liep. 

In versie een-- daar gaan we. In versie een, let op de following-- en het is niet de beste uitvoering, maar het is mijn eerste. Merk op dat onder de vorm, ik heb een script tag. En een script-tag betekent, hey, browser, hier komt een code in, typisch, JavaScript. En nu, let op wat ik doe. Op line-- kan ik nauwelijks lees het-- lijn 32, het zegt, var form-- dus geef me een variabele genaamd vorm. En dan krijg document.getElementId van "registratie." Wat is dat? Nou, laat me terug te spoelen hier. En let, ah, gaf ik het formulier element een willekeurige maar beschrijvende idee van registratie. Dus dit geeft me een variabele die kan ik dat knooppunt te grijpen, die rechthoek in de boom genoemd formulier. form.onsubmit middelen, hey browser, registreert een gebeurtenislistener Op dit formulier. Met andere woorden, wanneer dit formulier ingediend, voert u de volgende code. Het heeft geen naam omdat nodig waarom heb je nodig om de naam te weten? Je moet alleen weten wat uit te voeren, ergo het is een anonieme of een lambda-functie. En die functie is al deze lijnen in. En nu, om eerlijk te zijn, ook al heb je misschien niet ooit heb geschreven JavaScript voor, het is gewoon C en PHP logica. Als form.email.value == "" - dus als het e-veld leeg, schreeuwen tegen de gebruiker met "Je moet uw e-mailadres. " Anders als form.password.value leeg schreeuwen tegen de gebruiker, "U moet uw wachtwoord op te geven." 

Interessanter is logisch, Als form.password.value niet gelijke form.confirmation.value-- waar komt de bevestiging vandaan? Laat me terug te spoelen. Nou, ik noemde deze ingang veld hier wachtwoord. En ik noemde dit hier bevestiging. Ik kon het hebben genoemd wachtwoord twee of iets anders. Ik ben gewoon logisch controleren dat beide hetzelfde zijn. Else-- blijkt dit is de heer Boole again-- een Booleaanse waarde, het vakje. Dus als ik zeg, uitroep point-- zoniet form.agreement.checked, schreeuwen tegen de gebruiker ook. 

Zodat deze syntaxis u zult zien is heel gebruikelijk in JavaScript, waar je dit gestippelde notatie. Je begint met een object hier. Je duikt in diepere naar een aan een eigenschap als wachtwoord. En dan krijg je bij de werkelijke waarde. En nogmaals, hier is de input. Hier is de naam vergeten. En de waarde ervan is, ongeacht de mens eigenlijk is getypt. 

Dus al deze gevallen, keerde ik terug vals. Maar zo niet, ik return true. En nu zien we een dwingende gebruik wanneer zou je valse terugkeren stoppen met wat de gebruiker doet en maak hem of haar kiezen opnieuw en opnieuw typen. Anders, we return true. 

En laat me introduceren een andere variant van dit enkel enig begrip daarvan zaad. Nou, in versie 2 van deze, vorm-2-- Ik doe het met een golf van een hand. Dit is, voor degenen die nieuwsgierig, de jQuery versie, degenen onder u die zou willen ploeteren in die bepaalde bibliotheek. Maar laten we start-- en vragen? Laat me pauzeren moment, want dat was snel en veel. 

Maar het leuke is dat alle van de code is vrijwel hetzelfde. De nieuwe dingen is wat is het dom? Wat zijn deze rechthoeken? Wat zijn deze knooppunten? Wat is een anonieme functie? Wat is een event handler? Maar gelukkig, het grootste deel van dat is gewoon volledige cirkel van, zeg, week nul. Prima. Dus iets iets meer interessant? Nou, in de eerste plaats, laat me gaan vooruit en open Google Maps. En je zult merken dat het voor een moment op de fractie van een seconde, let op wat er gebeurt als Ik klik snel genoeg. En dit verband op Harvard is zo snel dat je niet echt merken. Maar wat doe je voor soort soort te zien als ik klik en sleep echt snel? Degenen onder u online kijken, Als u deze vertragen tot 0,5x snelheid, u kunt dit beter te zien. 

Wat gebeurde er gewoon voordat ik klikte en sleepte? Laat me proberen hier-- laat me doen iets anders, zoals 90.210. Laten we gaan ver weg. Dat was echt snel, ook. Wat dacht je van Disney World? Daar gaan we. OK. Wat zag je voor een fractie van een seconde? Enkel, als, pleinen, toch? Placeholders voor tegels? 

Nou, wat is hier aan de hand? Google Maps is een mooi voorbeeld van Deze technologie heet AJAX. En dit is waar we beginnen aan gebruik maken van de JavaScript in een bijzonder verleidelijke manier. Terug in de dag, was er deze website genaamd MapQuest. En ik zou hebben genomen een screenshot van deze uit de jaren 1990, waar als je wilde kijk hier op de kaart, zou je letterlijk klikt een pijl op de top dat je liet zien een ander plein van de kaart. Als je wilde om naar links, u klikte een pijl die je liet zien een ander plein van de kaart. En sommige websites nog steeds doen dit vandaag. Maar zelfs MapQuest heeft gekregen beter, zoals Google Maps. 

In plaats daarvan, wat is beter deze dagen is websites die AJAX gebruiken. AJAX-- wel bekend als Asynchronous JavaScript en XML, dat is gewoon een mooie manier om te zeggen een technologie of techniek die kan een browser met behulp van JavaScript om extra HTTP-verzoeken maken nadat de pagina is geladen. Dus wat betekent dit? Nou, het zou aardig zijn vervelende in Gmail Als elke keer dat je wilde uw e-mail controleren, je letterlijk had geraakt Controle-R of Command-R of klik op de knop Reload en de hele darn pagina zou herladen. Rechts? Het zou witte flits waarschijnlijk voor de tweede. Je zou het dom voortgangsbalk zien. En gewoon om te zien als je nieuwe hebt mail, de hele webpagina en de URL je op zou moeten herladen. 

Maar dat is niet wat er gebeurt in Gmail. Rechts? Wanneer u een nieuwe e-mail krijgen Gmail, wat er gebeurt op het scherm? Het toont gewoon, toch? Het is gewoon magisch verschijnt als een nieuwe rij in de tabel. Dat houdt in feite een fatsoenlijk bedrag van complexiteit. In feite, als je van deze boom, die ook al is eenvoudig hier Gmail-- en ik zou moeten kijken bij de code om sure-- zijn heeft waarschijnlijk een HTML-tabel of misschien een ongeordende lijst die het maakt elk van uw postvakken e-mails. 

En dus als je dit er voorstellen is een boom in het geheugen als je het gebruik van Gmail dat lijkt soort soort als dit, wanneer Google realiseert, ooh, heb je een nieuwe e-mail, is het niet willen de hele boom te herbouwen. Veeleer wil het knooppunt vinden de boom die uw inbox vertegenwoordigt en plaatst u gewoon een nieuw knooppunt. 

Dus zeer vergelijkbaar met PSET vijf, waar u moest knooppunten invoegen in een hash-tabel, evenzo doet Google, via JavaScript-code die het heeft geschreven, traverse deze boom, uitzoeken waar is dat inbox deel van het venster, en plaats een nieuwe rij dan. En een nieuwe rij betekent gewoon één of meer nieuwe knooppunten in een boom. 

En dus AJAX is deze techniek dat zorgt voor precies dat. Zodra u een URL hebt bezocht, hoe gek lang is, en zodra het heeft geladen is, kunt u nog steeds grijpen meer gegevens van de internet-- of het nu een e-mail of een tegel van een map-- pak het achter de schermen en steek deze vervolgens in de pagina zodat de menselijke niet echt moeten wachten. 

Facebook Messenger werkt op dezelfde manier. Een aantal andere websites-- oh, eigenlijk, zelfs dit. Ik bedoel, dit is, eerlijk gezegd, een soort van een vervelende beschikken over deze dagen. Als ik begin zoek naar deze cats-- is een soort van een afschuwelijke gebruikerservaring. Het begint gewoon op zoek naar mij. Tja, wat doet het? De URL is niet echt veranderd sinds ik begon te typen. Maar wat is er over de wire-- OK, hmm interessant. Wat is er in de hele draad hier gewoon krijgt vreemder. 

OK. Dus laat me gaan en inspecteren element en ga naar het tabblad Netwerk en probeer om dit te maken technische en minder over katten. Als ik typ, letterlijk, katten en-- wat er gebeurt per-- Ik ben niet van plan om te klikken dat. Prima. Dus hier beneden, wat er gebeurt elke tijd typ ik een personage, blijkbaar? Zoals, lage niveau? Wat gebeurt er met elk van deze karakters ik typ op mijn toetsenbord? Ja? PUBLIEK: [onverstaanbaar]. 

DAVID MALAN: Precies. Elk van deze tekens naar Google, één tegelijk. Zij bouwen van een string op hun server die vertegenwoordigt alles wat ik heb in tot nu toe hebt getypt. En elke keer als ik typ een ander karakter, ze gebruiken hun geheime saus van een zoekalgoritme en erachter te komen, bedoelt hij deze kat pagina of deze kat pagina of iets dergelijks? Dus in zekere zin, het biedt me een betere ervaring in dat ik niet eens nodig om mijn gedachten af ​​te ronden. En inderdaad, het is een nuttig ding, autocomplete in het algemeen. Als hun algoritmen goed genoeg en als mijn zoekopdrachten zijn duidelijk genoeg, Ik heb niet om het hele woord te typen. Ze gaan me vertellen wat het is Ik ben eigenlijk op zoek naar. Dus wat Google noemt onmiddellijke search wordt alleen met behulp van AJAX, met behulp van code die hen in staat stelt te verzoeken aanvullende content via een webbrowser achter de schermen met deze nieuwe taal, JavaScript. Dus we hebben een paar minuten over. En laat me roepen mijn maatje Colton up op het podium, aangezien het leek bijzonder leuk vorige keer een technologie te introduceren dat sommigen van jullie interesse hebben getoond in voor de laatste projecten. We dachten dat het leuk zou zijn om te brengen een vrijwilliger, maar, vandaag om te laten zien een aanvulling op dit dat u-- toelaat ja, Ik zag voor het eerst deze hand. Kom op maximaal. Heel goed gedaan. Goed gedaan. Ik ga dit project op het scherm in slechts een moment. Wat is je naam voor iedereen? 

EFA: Ik ben Efa. 

DAVID MALAN: Etha? 

EFA: Efa. 

DAVID MALAN: Efa? 

EFA: Ja. 

DAVID MALAN: Leuk je te zien. Prima. Laat me dit klaar. Kom langs op aan de midden met Colton hier. Wat Colton heeft in zijn handen Vandaag is een afstandsbediening. Dus in plaats van gewoon staan ​​in een drie-dimensionale wereld rond te kijken als Colton deed, nu Efa kan eigenlijk rond te lopen door te gaan omhoog, omlaag, naar links en rechts als een Nintendo of Xbox controller. EFA: Ik ga om te vallen buiten het podium. DAVID MALAN: Ik zal staan ​​ruwweg hier. Dat gevaar. OK. Dus ga je gang en zet die op. Laat me gaan en schakelen naar het scherm hier. Laat me de lichten dimmen. En Colton, laat me komen staan ​​naast je. 

Wilt u hier uit te leggen met de microfoon wat we doen? Alsjeblieft. 

COLTON: Zeker. Dus nu zijn we laden van de Oculus, Ik denk operating-- werkt niet systeem, maar het hoofdprogramma, waarbij kunt u toegang tot alle spellen en apps die in uw bibliotheek. Dus nu moet zeggen tik op de touchpad om te beginnen. Touchpad gaat worden op de rechterkant van de headset. Dus ga je gang en tap-- EFA: Oh, man. DAVID MALAN: Ja, daar ga je. De kwaliteit Efa ziet veel hogere kwaliteit. Dit is gewoon de Wi-Fi hier. COLTON: Dus wat je bent gaat te willen doen is kijken naar de top rechterkant van het scherm. Yep, dat spel op de top rechts. En dan als je het selecteren het, tik op de touchpad opnieuw. Ik denk dat het Dreadhalls. En dan is hier hier A--, laat me je bril te houden voor u. 

Dus ik gaf hem slechts een controller. Dus nu kan hij het spel te besturen. Hij kan rond en spullen te verplaatsen als dat. Dus ga je gang en kijk omhoog naar de top. Je moet New Game te zien. Dus ga je gang en kun je dat doen. Nu moet je in staat om te controleren jezelf met de controller, en zodra het spel laadt hier boven. Dit is misschien een beetje eng. 

EFA: me nu vertellen. OK. 

COLTON: Oké. Zo bevestigen dat u kunt verplaatsen. OK. U kunt verplaatsen. Perfect. Dus als je naar beneden kijkt, heb je een kaart. Kaart laat u zien waar u bent. U kunt kijken in de kamer rond. U kunt volledig omdraaien. Ja, precies. Keer om. 

Dus kijk naar links. Ik denk dat er iets wat je kunt pick-up op een vat in de kamer. 

EFA: Hoe krijg ik de kaart uit de weg? COLTON: Kijk omhoog. Kijk maar op. Prima. Daar ga je. Nu ga je gang en gewoon omdraaien. Dus kijk verder aan uw linkerhand. Blijf in beweging vertrokken. Blijf zoeken naar links. Ga zo door. Ja. 

EFA: Oh, op die manier. 

COLTON: Ja. Loop naar het met de controller. Daar ga je. Nu moet zeggen halen. Daar ga je. Raap het op. Prima. Nu, laten we uit deze kamer. Ga je gang en loop naar de deur. Dus je gaat hold-- het zegt Houd de knop om het geweld te openen. Ga zo door en houd de knop. Yep, waardoor het te openen. Prima. Goed gedaan. Nu zijn we lopen uit de kamer. Dus ik ga naar de rest overlaten voor u en zien wat je te weten komen. EFA: Ik ga niet in de donkere kamer. Oh wacht. Nu moet ik gaan de donkere zaal? OK, ik ga terug [onverstaanbaar]. COLTON: Oké. Sommige meer punten te halen. Lijkt op sommige munten. Dat is een lock pick. Dus als u een vergrendelde deur, kunt u die gebruiken. Ben je bang? 

EFA: Nog niet. COLTON: OK. 

Pretend-- ja. Net doen alsof je bent eigenlijk staan. En als je around-- draaien je hebt om te wennen aan het. Maar is het zinvol. DAVID MALAN: En terwijl Efa blijft spelen, omdat we de hele dag konden doen, we kunnen allemaal tip-teen hier. Maar we hebben twee andere paren, als je wilt om te komen en te spelen. Anders is, zullen we zien u de volgende keer op woensdag. Dank u vandaag om onze vrijwilligers. [Applaus] 

[MUZIEK - "SEINFELD THEMA"] SPEAKER 1: Nou, ik ben waardoor een nieuwe PL monteren op. Ik veranderde de OLPF-- 

Luidspreker 2: Dus wat precies doe je? 

SPEAKER 1: Nou, ieder van these-- hier, ik zal je laten zien deze hier. U kunt het hier zien. 

SPEAKER 3: Ik denk dat ik ben goed met deze. Wil je wat meer? 

SPEAKER 4: Nee, ik ben goed. [Onverstaanbaar]. 

SPEAKER 3: Nee, [onverstaanbaar]. Hebben een aantal. SPEAKER 1: De verschillende kleur. Luidspreker 2: OK. SPEAKER 1: Dus uiteindelijk wat het doet is het de kleur aanpast van--