[Jouer de la musique] 

DAVID MALAN: Ceci est CS50. Ceci est le début de la neuvième semaine. Et c'est ce qui aurait été 200e anniversaire de M. Boole. Donc, ce sont les boursiers à qui nous avons fait allusion pas mal de fois sur l'utilisation de Les variables booléennes vrai et faux, 1 et 0 et tel. Et ce fut de Google Pour lui rendre hommage aujourd'hui. Il aurait eu 200. Donc, si vous souhaitez joindre à nous pour le déjeuner CS50, jetez un oeil à le lien sur le site Web du cours. Et ces visages et les amis comme ceux-ci vous attendent ici à Cambridge. Faces comme celles-ci vous attendent à New Haven. Et, de fait, Ken à New Haven aimablement fait ce qu'on appelle un GIF animé d'Eli ici lors d'un récent lunch-- un GIF est encore un autre format de fichier graphique, avec lequel vous êtes familiar-- que regarde un petit quelque chose de ce genre. Alors juste une séquence de-- OK. Personne ici à Cambridge rit. Mais à New Haven, cet est vraiment drôle, non? Bien. 

Donc, ne nous rejoindre là-bas. Ici, à Harvard, spécifiquement, ce mercredi, si vous êtes un étudiant en deuxième année ou freshman even-- ou même la pensée junior-- de décision un interrupteur dans l'ordinateur la science, savoir que il y être un CS conseille juste ce Mercredi, peu de temps après la classe à 16h00 dans l'ordinateur bâtiment des sciences Maxwell Dworkin. Nous allons mettre cela sur le cours de site d'ici demain, aussi bien. Donuts, je l'ai dit, seront servis. 

Bien. Story-- tellement drôle que je poussais autour sur l'Internet, et je trouvé quelques vieilles archives de mon ancien site. Et il se contourner ce out-- temps, il semble très opportune car je crois que les élections de communications unifiées sont sur le point d'engins de nouveau. Donc, je courais pour UC, perdu lamentablement. Et peut-être cela était en partie pourquoi. Donc, ce fut mon site à l'époque. Pour une raison quelconque, je pensais qu'il était une bonne idée, avant de dire aux gens ce que ma plate-forme était et pourquoi ils devraient voter pour moi, qu'ils ont cliquer pour entrer de découvrir que informations, qui, rétrospectivement, est sorte de chair de poule. Je ne sais pas vraiment ce que cela était. 

Mais certainement il n'a pas aider ma campagne. Je ai aussi trouvé que par la haute année-- je devais ce calendrier Muppet. Muppets étaient sorte de en vogue à l'époque. Ou peut-être qu'ils ne sont pas. Je devais un calendrier Muppet à l'époque. Et je pensais que ce serait cool de nom mon ordinateur sur le réseau de Harvard frogman.student.harvard.edu. À l'époque, nous avions tous unique les noms d'hôte identifiables. Et vous pourriez choisir une vanité nommer à la place de votre propre nom. Et je suis allé avec l'homme-grenouille pour une raison quelconque. 

Et puis je started-- je passais beaucoup de temps en cliquant sur ces liens à travers ce matin. Et ce fut ma page à propos, qui maintenant sorte de semble adorable. Mais il témoigne aussi de tout dans quelle mesure la technologie a venir. Je veux dire, retour dans la journée, un 486 était quelque chose. Ces jours-ci, il est super, super, super lent et bien moins que vous pourriez avoir dans votre propres poches de nos jours. Il ya plus de là que était encore plus embarrassant. Je vais donc en rester là. Mais ce fut ma première incursion dans web-- oh, non. Cela n'a pas été. Ma première incursion réel dans la programmation web était ce site, dont je viens oublié. À un certain point, je appris à faire des images de fond répétitives. Et donc je trouvais ce pavage efficace, comme joueur de hockey, le football et le golf boule, ou quelle qu'elle soit pour le site Frosh GI. Et ce fut fait, véritablement la premier projet basé sur le web, je pris on-- Je pense que peut-être sophomore année, année-- juniors après avoir pris CS50 et CS51, un des classes de suivi sur les communes. Je remarquai dans la recherche à travers les archives que l'un de mes successeurs et amis, Lee, sorte de changé le droit d'auteur à lui-même. Mais ce fut en effet quelque chose qui Je dois posséder l'embarras. Mais à l'époque, ce a été le premier site, comme je le disais il ya quelques semaines, qui pourrait freshman inscrivez-vous pour les sports intra-muros ici. Et il se trouve que les images de fond comme ça ne sont pas une bonne idée. Mais le web était nouveau, et nous étions tous expérimentons. Et voici ce que je apparemment fait à l'époque. Bien. Alors sans plus tarder, nous passons engrenages aujourd'hui pour vous donner, vraiment, la dernière pièce que vous pourriez trouver particulièrement utile pour les projets finaux mais aussi que va commencer à faire le world wide web entier se sentir un peu plus compréhensible. En effet, nous allons mettre en place une langue de plus de programmation appelé JavaScript qui est semblable et différent de différentes façons de langues, nous avons regardé jusqu'ici. 

Donc C, le rappel, est-ce langage compilé. Vous avez à courir par un compilateur. Vous obtenez le code source d'opposition code, ou zéros et de uns. Et ce sont des zéros et ceux qui votre CPU, Central Processing Unit, fait comprendre. PHP, en revanche, est pas un langage compilé. Il ya un quoi? Il est un langage interprété. Donc, il ya un programme appelle un interpréteur qui a lire it-- haut en en bas, de gauche à droite- et comprendre ce que tous votre syntaxe fait et signifie, que ce soit une boucle ou une condition ou tout autre numéro de programmation construit. Voilà donc un langage interprété. 

Ensuite, nous avons introduit HTML. Et HTML est même pas un langage de programmation. Nous aimerions appelons quoi? Un langage de balisage, qui est juste une sorte de fantaisie façon de dire qu'il n'a pas constructions de programmation comme nous l'avons vu, même de retour dans la journée de Scratch. Il n'y a pas de boucles. Il n'y a pas de conditions. Il est vraiment une langue sur le marquage de vos données et le formatage ou la structuration d'une certaine façon. 

CSS, quant à lui, de la même pas un langage de programmation. Il est même plus esthétiquement orienté. Et il vous permet de trier de peaufiner des choses comme la taille et les couleurs police et de placement et tout ça. Puis nous avons eu 

SQL. Donc SQL est en effet une programmation la langue dans un certain sens, bien adapté spécifiquement aux bases de données. Mais même si nous ne vous présentons sélectionner et insérer et supprimer et mettre à jour et quelques autres, avère vous pouvez réellement écrire ou fonctions procédures, car ils sont appelé, dans SQL qui ressemblent et agissent tout à fait comme les fonctions PHP et C. Savent que ceux qui existent donc. Mais nous ne même pas la peine avec eux comme nous suffit de gratter la surface ici. Et puis JavaScript, le dernier des nos langues officiellement présentés. Donc JavaScript, aussi, est un langage interprété. Et ceux qui connaissent, font vous voulez distinguer avec une certaine caractéristique à la fois C et PHP? Qu'est-ce qui le rend différent? 

PUBLIC: Il est pas compilé. 

DAVID MALAN: Dites à nouveau? 

PUBLIC: Il est pas compilé. 

DAVID MALAN: Il est pas compilé. Donc, elle aussi, est interprété. Donc, il est pas compilé. Mais qui le rend un peu comme PHP. Mais il est encore différent de PHP d'une certaine façon frappante, au moins dans la façon dont nous allons l'utiliser. Ouais? 

PUBLIC: Il fonctionne côté client. 

DAVID MALAN: Il fonctionne côté client, le plus souvent. Voilà en effet le distinctif caractéristique pour nous en ce moment. C était côté serveur dans le sens que nous avons tout fait dans CS50 IDE. PHP a été jusqu'ici côté serveur dans la mesure où comme elle, aussi, obtient interpreted-- pas compilé, mais interpreted-- l'intérieur CS50 IDE, ce qui bien sûr est juste un ou plusieurs serveurs dans le nuage. 

Mais JavaScript, même si vous vous allez pour commencer à écrire pour, disons, pset huit et peut-être définitive projects-- vous êtes aller à droite dans CS50 IDE et l'enregistrer dans des fichiers au sein CS50 IDE, IDE CS50 et, à leur tour, les serveurs cloud sur lequel il est hébergé, ne vont pas d'interpréter ou d'exécuter votre code. Au contraire, il va être envoyé dans forme inchangée jusqu'au navigateur. Et ça va être ensuite IE ou Chrome ou Firefox ou Safari ou quel que soit ce que l'interprète fait il, de haut en bas, de gauche à droite. Donc, la clé qui distingue caractéristique pour aujourd'hui est que JavaScript est côté client PHP et, par exemple, a été côté serveur. Maintenant, cela a des implications intéressantes pour, comme, la propriété intellectuelle et qui peut réellement voir votre code. Et en effet, vous pouvez aller sur le web et voir plus tout code que quelqu'un a écrit en JavaScript. Parfois, il est lisible, il est parfois masquée. Mais plus sur cela en temps voulu. 

Donc JavaScript, joliment assez, est super-similaire, syntaxiquement, à C. Et tout comme PHP, il n'y a aucune fonction principale. Si vous voulez commencer à écrire Code JavaScript, comme vous le verrez aujourd'hui, vous venez de commencer à l'écrire. Mais il est, vous verrez, en particulier utile dans le contexte des navigateurs web. Cependant, ma petite disclaimer-- habituellement l'heure, à a été de dire que vous ne pouvez plus en plus usage aujourd'hui JavaScript côté serveur en utilisant un cadre de fantaisie appelé Node.js que certains des propres applications de CS50 sont écrits dans. Vérifiez 50 utilise effectivement Node.js. Mais nous allons nous concentrer sur JavaScript côté client de maintenant. 

Voici donc un ensemble de conditions en PHP. Désolé, in-- effectivement, que déclaration, trop est correcte. Voici également un ensemble de conditions en JavaScript. Syntaxiquement, il est identique à C et PHP. Les expressions de M. Boole sont, De même, syntaxiquement identique à la fois C et PHP. Nous avons aussi des commutateurs JavaScript qui semblent identiques. Nous avons pour les boucles qui sont structuré de manière identique, tout en boucles, faire tout en boucles. 

Celui-ci est un peu différent. PHP avait le pour chaque construction que vous utilisez peut-être ou vont utiliser dans pset sept, peut-être. JavaScript a cette version spéciale de pour le cas où vous dites littéralement quelque chose comme par clé variable dans l'objet, qui est une façon très succincte de dire, si je dois un object-- et nous allons parler de ces nouveau dans un moment-- et je tiens à itérer sur tous les des paires de clés de valeur à l'intérieur, Je ne dois pas comprendre comment les index numériquement avec zéro, un, deux trois. 

Je peux littéralement dire cela. Et à chaque itération, JavaScript pour moi vais mettre à jour la clé variable être la première touche, puis sur la touche suivante, puis sur la touche suivante, puis la touche suivante, et ainsi de suite. Et je peux obtenir à sa valeur en traitant un objet en JavaScript, comme nous le verrons, comme si elle est un tableau associatif en PHP. En effet, si vous avez finalement enveloppé votre esprit autour de ce qui est un tableau associatif en PHP, vous pouvez penser pour l'instant que identique à un objet en JavaScript. Mais cela a un peu de une simplification excessive. 

Arrays ressemblent, bien assez, identiques à PHP, sauf pour un caractère. Il ya une chose qui manque ici que nous avons vu la semaine dernière avec PHP. Ce qui est omis? Ouais? Aucun signe de dollar. Donc, nous sommes de retour à un monde plus normal où les variables ne sont pas des signes de dollar. Mais vous faites précéder les var, généralement. Et var signifie variable. Et tout comme PHP est lâche typed-- lequel il ya des types, il ya des nombres et des chaînes et les flotteurs et ainsi forth-- JavaScript doit similaire types. Mais il est faiblement typé dans que nous le les programmeurs ne doivent pas les spécifier. Nous devons juste être conscient que les différents types existent. 

Variables, meanwhile-- voici comment nous pourrions déclarer "Bonjour, monde" comme une chaîne. Notez qu'il est identique à PHP, mais aucun signe de dollar. Et ceci est quelque chose que nous allons commencer à voir plus aujourd'hui, par lequel vous avez un objet avec des clés et des valeurs. Et si vous voulez essayer de déduire de la dernière week-- la syntaxe est un peu différent. Mais un peu de bon sens check-- combien touches cet objet ne semblent avoir? Donc, je vois quatre. Je vois deux. 

Donc, il est en fait deux. Donc, cela est une collection de deux paires clé-valeur. La clé est le symbole dont la valeur est FB. La clé est le prix dont la valeur est 101,53. Donc, ce sont deux paires clé-valeur. Et rappelez-vous, PHP-- et cela est nouveau juste une sorte de différence syntaxique. Il est pas tout à fait intellectuellement intéressant. PHP aurait pu écrire ce même chose comme citant follows--, est égal. Et je modifier ces à crochets. Et puis-je changer cela un mot cité, le «prix». Et puis je ne l'utilise un colon. Qu'est-ce que je sers la semaine dernière? Ouais, le signe égal flèche notation funky. 

Et puis je l'ai fait la même chose ici. Même chose ici. Et c'est tout. Donc, il est très bien si cela n'a pas vraiment coulé dans la mémoire juste encore parce qu'il est vraiment intellectuellement inintéressant. Il est juste différences syntaxiques. Mais les idées sont exactement les mêmes. A l'intérieur de cette variable citant en JavaScript est une collection de paires clé-valeur, dont l'un est le symbole, dont l'un est le prix. Et je peux obtenir à ces valeurs avec la syntaxe suivante. Tout comme en PHP, je pouvais faire quelque chose like-- laisser moi de faire cette case, un peu plus grand. Tout comme en PHP, je pouvais faire this-- oh, merde. Allons. 

Tout comme dans PHP-- OK, nous allons il suffit d'utiliser les notes de l'intervenant. Tout comme en PHP, je peux faire $ $ devis devis ["symbole"], et cela va me faire la valeur de «symbole». En JavaScript, il va être identique, de sorte que je ne peux le faire. La seule chose qui est manquant est le signe dollar. 

Si bien assez, alors, il ya pas tout ce que la syntaxe de bien nouveau. Donc, ce qui aujourd'hui nous nous concentrons sur, vraiment, est certaines des idées et des applications. Et le premier de ces l'application que vous pourriez ont vu si vous plongé dans pset sept est déjà cette syntaxe. Donc, en pset sept, si vous avez vu ou pas vu encore, savent qu'il ya un fichier que nous donnons vous avez appelé config.json-- JavaScript Object Notation. Pourquoi? Nous voulions être en mesure de vous fournir un modèle avec des paires clé-valeur. Nous voulions être en mesure de vous donner une liste de l'hôte, le nom du serveur. Nous voulions vous donner un espace réservé pour votre nom d'utilisateur et un espace réservé pour votre mot de passe. Si vous ne voyez pas ce encore, ne vous inquiétez pas. Plus à ce sujet dans pset sept [? spec. ?] Et alors, de toute évidence, nous voulons que vous pour remplir le à dos parce que quand vous vous connectez à CS50 IDE, chacun de vous avoir votre propre nom d'utilisateur et mot de passe. 

Donc, nous pourrions avons utilisé une demi-douzaine ou différents formats de fichiers plus. Nous aurions pu utiliser un fichier .txt. Nous pourrions utiliser un fichier CSV. Nous pourrions avons utilisé un Fichier INI, un fichier XML, tout un tas d'autres acronymes vous ne pourriez pas avoir jamais entendu parler. Il est un peu arbitraire à la fin de la journée. Mais super populaire ces jours-ci est un texte format appelé JSON-- JavaScript Object Notation-- qui ressemble à ceci. Il est un peu cryptique, de remarquer les motifs. Vous commencez avec un bouclés ouverte accolade, et vous vous retrouvez avec le même. A l'intérieur de ce est quelque chose. Il est une paire clé-valeur. Alors ceci est un objet que je suis en regardant sur l'écran ici qui a une clé, qui a une valeur. Et juste d'inférer sur la base du modèle précédent, ce qui est la clé ici? Base de données, la chose à le côté gauche du côlon. 

Maintenant, la valeur se trouve être a plusieurs lignes cette fois. Mais la valeur commence avec un bouclés accolade et se termine par une accolade. Alors, que proposeriez-vous est le type de la valeur de base de données? Un dictionnaire ou, un peu plus succinctement, un objet. Droit? Ceci est une sorte de structure de données qui peut utiliser d'autres structures au sein de lui-même. Donc, si tout cela nous sommes appeler un object-- et un objet est juste un tas de clé-valeur pairs-- la valeur de la base de données elle-même est un objet. La valeur de base de données a tout un tas des paires de valeurs clés, le premier d'entre eux est l'hôte, puis nom, puis nom d'utilisateur, mot de passe, puis, dont chacune des valeurs, quant à lui, il est juste une chaîne ennuyeuse entre guillemets. 

Donc, même si cela ne super clair pour l'instant, sachez que ceci est juste une norme façon, assez ennuyeux de stocker des données dans un format standard. Mais les erreurs courantes que vous pourrait faire, même dans pset sept, sont de petites choses stupides, comme si vous accidentellement omettre la virgule il. Cela va se traduire dans le fichier pas nécessairement être lisible. Si vous omettez accidentellement des choses comme la citations, ça ne va pas être lisible. Donc, il est un format de fichier très tatillon, mais il en est un qui est super commun. Et il nous arrive de l'utiliser, même si vous ne l'utilisez toute JavaScript contraire, dans pset sept. 

Bien. Alors rappelez-vous cette image. Nous avons parlé, en HTML, que le code pourrait ressembler à ceci. Ceci est le langage de balisage hypertexte [Inaudible] pour juste "bonjour, monde." Mais alors, nous avons proposé une tandis que de retour si ça aide, vous voudrez peut-être commencer à penser sur ce déjà comme un arbre. En fait, l'indentation que nous utiliser juste pour l'amour de lisibilité ou pour l'amour sur le style de la gauche peut sorte de être traduits dans cet arbre, où vous avoir une certaine nœud racine spéciale que nous allons génériquement appelé le document, en dessous de laquelle est l'élément HTML racine ou tag, HTML, qui présente alors deux les enfants, la tête et le corps. 

Et puis, à son tour, la tête a un titre. Et le titre a une valeur de texte. Et le corps a de même une valeur de texte. Donc, si vous dites à l'aise que oui, vous pourriez profiter de cette HTML et dessiner une image comme cela, le côté droit est un beau modèle mental parce que maintenant que nous avons JavaScript, une programmation langue que les navigateurs peuvent exécuter et interpréter pour vous, il se trouve que ce nous sommes sur le point de le faire dans le code est de commencer à manipuler cette structure arborescente en mémoire. Nous ne disposons pas de construire l'arborescence dans la mémoire. Nous ne devons pas faire de tri structure de données pset-cinq de style complexité. Le navigateur, bien assez, sur l'interprétation HTML haut en bas, gauche ou à droite, va littéralement nous livrer l'équivalent d'un pointeur à cet arbre entier gratuitement. Il fait tout le travail acharné. Voilà ce que Mozilla et Apple et d'autres ont fait pour nous. 

Et avec JavaScript allons-nous être en mesure de contrôler et de modifier et de le faire choses intéressantes à cet arbre, autrement connu comme un DOM ou Document Object Model. Quel genre de choses? Eh bien, il se trouve que en JavaScript, il ya cette liste de blanchisserie de événements qui peuvent avoir lieu. Et nous avons pas vraiment utilisé que mot depuis la semaine zéro et pset zéro lorsque nous avons parlé de Scratch. La plupart d'entre vous probablement ne pas utiliser un événement dans votre projet de Scratch. Mais vous pourriez rappeler simple Marco Polo par exemple, où nous avons eu deux sprites, dont l'un dit, Marco. L'autre dont puis, sur l'écoute et d'entendre cet événement, dit Polo. Si non, vous pouvez regarder en arrière aussi loin en arrière. 

Mais cela est juste pour dire, et vous pouvez sorte de déduire les noms de ces choses, JavaScript, il se trouve, va nous donner un moyen d'écouter pour la souris ou la souris descendre monter ou la touche de descendre ou la touche monter ou onselect onsubmit ou onresizing quelque chose. En d'autres termes, toute action physique que l'homme peut prendre avec un navigateur que vous faites chaque jour, vous pouvez écrire code qui écoute pour ces événements et fait ensuite quelque chose d'approprié. 

Par exemple, si vous utilisez Google Maps, ce qui se passe si vous cliquer et déplacer la souris, typiquement? Si vous cliquez et faites glisser? Ouais? Exactement. La carte commence à se déplacer. Ainsi, vous pouvez sorte de voir ce qui est ici, ce qui est là-bas. Et comment Google de mettre en œuvre ce que cela? Eh bien, sans doute, ils sont en utilisant un couple de ces événements auditeurs, qui dit, écouter de la souris down-- donc lorsque l'utilisateur physiquement pousse son trackpad ou son souris vers le bas. Et puis, nous sommes à la recherche quelque chose comme le mouvement ou un autre événement qui nous permet de capturer la traînée. Et en fait, la traînée est similaire dans ce dot dot dot liste des options possibles. 

Donc cela va être un puissant façon de commencer à répondre à l'utilisateur même avant qu'il ou elle clique effectivement quelque chose explicite comme pour soumettre. Mais nous allons introduire quelques sujets pour y arriver. La transition Mais d'abord, laissez- dans une certaine code réel. Donc, je vais aller de l'avant et ouvrir dom-0, qui est un exemple très simple ici que si je zoome simplement a cette entrée ici pour moi. Et je vais aller de l'avant et tapez "David" pour mon nom et cliquez sur Envoyer. 

Et puis, bien sorte de bon marché, je avoir cette invite qui apparaît qui dit, "bonjour, David!" Donc, ce genre d'est comme notre «bonjour, monde" que nous avons fait quelque temps en arrière en C et même dans PHP parce que je l'ai dynamiquement sorti mon nom. Je peux faire le nom de quelqu'un d'autre ici. Je ne pouvais tout simplement changer cela, comme, Hannah, cliquez sur Soumettre. Et en effet, les petits changements de pop-up. 

Maintenant, les pop-ups sont l'un des la plupart des victimes de violence fonctionnalités du Web. Et en fait, de retour dans les bloqueurs de pop-up jour est entré en vogue parce que vous irait à certains website-- peut-être un place-- douteuse qui serait soudain commencer émaillant votre écran avec tout un tas de pop-ups. Et donc cette capacité de pop up les fenêtres à l'avant de l'utilisateur n'a pas été particulièrement bien reçu par l'humanité. Voilà pourquoi vous voyez cette chose prévenir, ce qui rend tout simplement toute cette chose laide. Donc, nous allons avoir besoin d'un meilleure façon de demander à l'utilisateur. Mais pour l'instant, cela semble fonctionner. Il suffit donc de manière intuitive, ce qui semble se produire ici? Je vais de l'avant et cliquez sur soumettre, et puis quelque chose se passe, clairement. Mais ce qui ne se passe pas est-ce arrivé toute la semaine dernière fois que je clique sur Envoyer? Ce qui n'a pas arriver sur l'écran? Pardon? Recharger. L'URL n'a pas changé du tout. Je l'ai dit était dom-0, et je suis toujours à dom-0. Normalement, nous aimerions avoir changé à un autre URL, comme register.php ou similaire. 

Mais même quand je rejette cette chose en cliquant sur OK, remarquerez que l'URL reste entièrement posée. Et, en fait, si je suis un peu sceptiques, laissez-moi ouvrir de Chrome. Permettez-moi d'ouvrir l'onglet Réseau. Et remarquez il est vide pour le moment. Permettez-moi aller de l'avant et de demander le réexamen de Maria. Il n'y a pas que ce soit le trafic réseau. Donc, il n'y a pas HTTP. 

Donc, en effet, si je regarde le code source this-- pour me permettre de fermer cette fenêtre et aller voir la source. Intéressant. Il semble qu'il y ait une certaine de nouvelles étiquettes, parmi eux script. Donc, nous allons jeter un coup d'oeil dans les CS50 IDE exactement ce que je envoyé à l'utilisateur. 

Donc, ici nous allons est-- se concentrer sur le HTML seulement. Voici la moitié inférieure de dom-0.html. Et remarquez qu'il a un titre, une étiquette de tête, une étiquette de corps, une balise form. Mais ce qui saute à vous comme différente, surtout si vous avez jamais écrit toute JavaScript vous-même. Permettez-moi de faire défiler un peu à droite ici. Je dois une entrée, une autre entrée pour les soumettre. Je dois un ID, qui est une sorte de nouveau. Mais nous ne le voyons avec CSS. Quoi d'autre est certainement nouveau? Ouais? Agréable. 

Bien. Alors, où il est dit onsubmit, remarquer ce qui semble suivre. Ceci est un attribut dans la nomenclature HTML. Sa valeur est cette chaîne citée ici. Et cela ressemble un peu bizarre au premier coup d'œil. Il est pas HTML. Il est pas CSS. Ceci est, comme vous pouvez le deviner, JavaScript. Il semble donc que construit dans cette page Web est une fonction appelée saluer. Et je déduire que tout car il est un mot, saluer. Il a obtenu une parenthèse ouverte, fermer la parenthèse, point-virgule. On dirait une fonction C, ressemble à une fonction PHP. 

Et en effet, il va être une fonction JavaScript. Puis je retourne faux. Nous y reviendrons que dans un instant. Mais où est cette fonction définie? Eh bien, laissez-moi défiler vers le haut au début du fichier. Et même si elle est une longue ligne, il est relativement simple. Permettez-moi ici et Zoom arrière se concentrer sur ces quatre lignes. 

Donc, en JavaScript, tout simplement comme PHP, vous venez disons, littéralement, le mot «fonction», le nom de la fonction, et de parenthèses puis avec toute arguments-- pas d'arguments dans ce cas. Et il n'y a aucun type de retour en JavaScript, tout comme PHP. Donc, il est un peu plus lâche que C. Accolade ouverte, accolade à proximité. Construit en JavaScript est une function-- un function-- pas recommandé mais une fonction appelée alerte dont le seul but dans la vie est de tirer vers le haut que assez laid invite qui nous l'avons vu il ya un instant. 

Or, cette est une sorte de bouchée. Qu'est ce qui se passe ici? Commençons donc à mettre en évidence tout ici. Voilà le même argument pour alerter. Et ce qui se passe? Cela ressemble exactement comme une chaîne. Et il se trouve, contrairement à PHP et à la différence C, il n'a pas d'importance en JavaScript si vous guillemets simples ou doubles. Ils vont être équivalent. Et franchement, il est juste populaire ces jours- pour les programmeurs JavaScript pour toujours utiliser des guillemets simples pour une raison quelconque. Il est juste la chose à faire. Mais nous pourrions utiliser des guillemets, ainsi. 

Alors Plus est un nouveau personnage. Mais ceux d'entre vous qui avez fait cela avant, ce qui ne signifie en plus? Ouais. Concaténer. Donc, nous avons vu ce en PHP. Il ya juste le point opérateur en PHP qui va concaténer deux chaînes ensemble. C était une douleur dans le cou pour ce faire. Rappel de pset six, qui était une douleur particulière dans le cou, vous auriez à utiliser quelque chose comme strcat après l'allocation de mémoire sur la pile ou du tas. Vous avez eu à sauter à travers des cerceaux juste pour concaténer deux chaînes. En JavaScript, il est super simple. Il suffit d'utiliser l'opérateur de plus entre eux. 

Ainsi, le complexe à la recherche chose semble être présent parce que à la fin de toute cette chaîne, je viens concaténer sur un point d'exclamation. Donc, si ce qui a été popping up a été "bonjour, David", "bonjour, Hannah," "bonjour, Maria," et ainsi de suite, clairement cette chose milieu entre les deux avantages doivent me donner accès à quoi? Qu'est-ce qu'il ya dedans pour vous? Ouais. Alors je vais faire semblant ici la répondre à leur nom, non? Donc, leur nom a surgi dans la finale résultat. Qu'est-ce que cela signifie? Eh bien, je proposai que plus tôt dans image que le soi-disant DOM a cet élément racine spécial chemin jusqu'à top appelé document. Et maintenant, il se trouve, ça va être une variable globale spéciale en JavaScript, intégré qui est un tas ensemble de fonctionnalités utiles. Parmi les fonctionnalités utile est le capacité à obtenir à tout nœud descendant. Ces carrés ou des rectangles ou des ellipses sont quelques noeuds dans un arbre, pour ainsi dire. 

Donc, il se trouve que intégré Document de l'objet de JavaScript est une fonction, autrement connu comme un méthode, qui est ce qu'on appelle getElementById. La syntaxe d'appel une fonction en JavaScript qui est à l'intérieur d'un objet ou d'un variable est juste avec la notation par points. Et nous avons vu cela dans C ce que la syntaxe de la structure. Vous voyez cela dans pset sept, en quelque sorte, en quelque sorte, quand vous voyez CS50 :: query. Le côlon du côlon en PHP est un autre manière d'appeler une fonction qui est à l'intérieur d'un objet. 

Mais pour l'instant en JavaScript, il est juste un point. Et donc cette fonction, bien assez, sorte de dit ce qu'il does-- obtenir élément par ID. Un élément est juste un autre nom pour une étiquette ou un nœud dans le DOM. Et donc obtenir par ID élément "name" signifie this-- voici mon HTML. Et sur cette base HTML, ce qui nœud ou ce balise HTML suis-je va être remis programmation en appelant document.getElementById? 

Oui exactement. Je vais pour obtenir l'entrée il élément dont l'ID est "nom". Donc spécifiquement, vous pouvez penser à cette fonction, getElementById, comme un moyen de donner sauvegarder un pointeur vers ce noeud spécifique dans l'arbre. Nous avons pas tiré cette arbre, mais il est une façon d'obtenir l'accès à ce rectangle ou rectangle que en identifiant de manière unique par l'intermédiaire de son identification. 

Maintenant, pourquoi est-ce utile? Eh bien, il se trouve qu'une fois que vous avez obtenu ce noeud, ce rectangle de la image, ce noeud à l'intérieur, à son tour, a tout un tas de paires clé-valeur properties-- ou de données, une valeur qui est appelé. Donc, littéralement, il est une sorte de gorgée d'expliquer le tout. Mais à la fin de la journée, Tout cela ne fait que vous donner une chaîne que l'utilisateur a tapé dans de cette façon hiérarchique. Mais je ne aime pas deux de ces choses. Ou plutôt, il ya toujours une certaine curiosité. Tout cela a semblé fonctionner. Pourquoi pensez-vous que je revins fausse après l'appel de saluer? Cela ressemble un peu laid, que Je ai deux déclarations il séparées par des points-virgules. Prenez une supposition. Si je l'ai enlevé return false, ce qui pourrait arriver, juste instinctivement? Désolé, dire encore? 

Ouvrez un tas de Windows. Donc potentiellement être quelque chose comme cela pourrait se produire. Quoi d'autre? Pourrait soumettre une demande où? Pour la même page. Donc, en fait, que ce que La réponse de plus près ici, même si, contrairement dans le passé, je ne l'ai pas spécifié l'attribut action, qui, normalement, nous avons à faire. Avère qu'il ya un défaut. Si vous ne spécifiez pas l'action, il est comme dire entre guillemets ou le nom du fichier lui-même, qui dans ce cas serait être comme dom-0.html. Il est juste genre de déduire, ou plutôt implicite. 

Et si je ne le fais pas, allons préavis. Permettez-moi de sauver ce. Et je l'ai enlevé return false. Permettez-moi de revenir à ce exemple et la force recharger. Et vous pourriez avoir vu moi de suggérer ceci sur CS50 discuter d'un tas de fois. Si quelque chose a jamais agissant funky et la navigateur est ne pas se comporter comme prévu, souvent vous aurez envie de tenir Maj, puis cliquez sur Recharger. Cela forcera chaque fichier à recharger et ne pas utiliser le cache local de votre navigateur ou une copie de sorte que maintenant, laissez-moi aller de l'avant et ouvrir mon inspecteur, l'onglet Réseau. Je vais à cliquer Préserver Connexion parce que je ne veulent pas de supprimer les lignes une fois que je me emmené ailleurs. 

Permettez-moi ici et aller de l'avant Type de Andi, cliquez sur Envoyer. Bien. Cela semble comme prévu. Il dit: «Bonjour, Andi." Permettez-moi de cliquez sur OK. Intéressant. Notez que la page a changé, mais à la page originale. Notez l'URL genre de changement. Il a ajouté un point d'interrogation, qui est habituellement un indicateur que nous avons essayé de présenter quelque chose. Ensuite, à la base, encore plus explicitement, voici la requête HTTP réel, qui a obtenu une réponse de la 200 qui m'a ramené ici. 

Donc, ce ne sont pas ce que nous voulons faire, non? Parce que je ne veux pas recharger la page entière. Je voulais retourner à la place fausse de façon à court-circuit le comportement par défaut du navigateur, qui était, bien sûr, de soumettre la page. 

Donc, nous allons jeter un oeil à un marginalement meilleur exemple. Ceci est une version d'un dom. Et remarquez ce qui suit. Il est OK si vous ne digèrent pas le toutes les lignes de code. Mais ce qui est fondamentalement différent sur cette mise en oeuvre? Je vais le stipuler se comporte de la même, fait la même chose. Qu'ai-je de toute évidence fait différemment? Ouais? 

AUDIENCE: [inaudible]. DAVID MALAN: Ouais. Donc la fonction est définie differently-- en d'autres termes, absents de la forme, là-haut sur la ligne ou 7-- plutôt, la ligne 8-- plus dois-je l'attribut onsubmit. Dans l'exemple précédent, je devais cela. Et puis je me suis littéralement écrit mon code ici. Et puis je l'ai dit return false. Et si elle n'a pas frotter vous dans le mauvais sens encore, il devrait commencer à la mesure que, tout comme en HTML, lorsque nous avons commencé à collaborer le mêler avec CSS dans les attributs de style, il a juste commencé à devenir un peu désordre ou se sentir un peu mal. 

De même ici, si vous commencez à prendre HTML, et puis vous automatiquement plop un peu de code JavaScript au milieu d'une chaîne entre guillemets, il est ne va pas être très maintenable. Droit? Il est même pas évident au premier abord lieu où le code JavaScript est. Donc, ce serait vraiment bien que un principe de meilleure conception, gardons notre HTML complètement séparer de notre JavaScript. 

Donc, pour ce faire, ce que nous avons fait ici est l'following-- nous utilisons simplement pour le balisage HTML seulement. Et donc en version un de cela, tous les Je avoir est un formulaire avec un identifiant unique. Et puis ici, je profite d'une caractéristique particulière de JavaScript par lequel je peux avoir ce qui est appelé une fonction anonyme. Donc, il se trouve que si je l'appelle document.getElementById de «démonstration» qui est comme moi donner un pointeur vers ce noeud dans mon arbre, l'élément de formulaire, pour ainsi dire. 

Maintenant, je sais juste de sachant un peu de HTML maintenant nous allons avoir lu certaines en ligne référence, un élément de formulaire prend en charge tout un tas d'événement dans listeners-- Autrement dit, la liste de blanchisserie de l'événement les auditeurs que nous avons vu il ya un instant. Je sais que la lecture de la documentation que onsubmit est un événement valide écouteur pour un élément de formulaire. 

Donc, une fois je sais que, il est sûr pour moi de faire l'following-- obtenir ce noeud de l'arbre, l'élément de formulaire, et accéder à sa soi-disant onsubmit propriété. Donc, le point signifie simplement ceci est une propriété, comme une valeur spéciale à l'intérieur de celui-ci. Et quel type de données que je suis affectation, apparemment, à onsubmit, qui est efficacement une variable à l'intérieur de ce noeud dans l'arbre? Il est un champ à l'intérieur de cette structure. Quel est le type de données? 

Une fonction, ouais. Donc, il se trouve que PHP a cette. Et même si nous n'a pas vous dire à ce sujet, C a aussi des pointeurs de fonctions, les capacité à passer et assigner des fonctions que les valeurs de variables elles-mêmes. Et on ne va pas à régresser à C. Mais pour l'instant, il se trouve que sur le côté droit ici, même si elle semble un peu génial, ce moyen, bon navigateur, me donner une fonction. Je ne vais pas même pas la peine de donner un nom parce que je suis littéralement va affecter appelons- l'adresse de cette fonction immédiatement à onsubmit. En d'autres termes, le navigateur, vous ne devez pas de savoir ce que cette fonction est appelée. Vous avez juste besoin de savoir où il est en mémoire. Et il suffit juste avoir un signe égal il et de ne pas prendre la peine de nommer ce, comme foo ou saluer ou tout autre mot. Et maintenant cela est juste une chose stylistique. Je pourrais passer cette accolade sur the-- sorry-- ligne suivante comme nous le faisons habituellement CS50. Mais en JavaScript, il est effectivement stylistiquement commune juste garder l'accolade, le première, sur cette première ligne. 

Mais au-delà, il ya rien d'interessant. Ce accolade ouverte juste délimite le début de ma fonction. La fonction est maintenant identiques, sauf que je l'ai inclus le faux de retour à l'intérieur de cette fonction. Parce qu'il tourne out-- et vous feriez seulement le savoir de la lecture l'documentation-- que si la fonction que vous affectez au gestionnaire onsubmit retourne false, le navigateur sait juste et accepte de ne pas soumettre le formulaire à un serveur. Si elle retourne vrai, il soumettra à un serveur pour des raisons que nous verrons sont utiles dans un instant. 

Et puis, le point-virgule après l'accolade là juste signifie que je suis fait la définition de la fonction. Vous savez ce qu'il faut appeler dès que vous entendez une soumission. Bien. Ceci est encore sans doute genre de laid. Alors, que pouvons-nous faire? 

Eh bien, il se trouve alors en version à deux, ce qui est le last-- et nous allons juste regard sur cette. Au risque de faire il laid, il se trouve qu'il ya une bibliothèque dans le monde appelle jQuery. Et jQuery est un super- bibliothèque JavaScript populaire qui est si populaire que la plupart toute JavaScript-- il est pas rare que les gens confondent jQuery avec JavaScript. Pourquoi? JavaScript lui-même a très verbose façons de faire things-- document.getElementById, dadadadadada. Vous finissez par avoir très longues lignes de code. 

Donc un homme nommé John Resid, qui fonctionne réellement pour un démarrage ces jours-ci, est sorti avec cette bibliothèque ans il ya que beaucoup de gens ont contribué à appelé jQuery qui change la syntaxe de la façon suivante. Et juste pour que vous avez vu cela, parce que vous aurez toujours voir cela si faire un projet final basé sur le Web, ce serait le moyen équivalent de l'application de cette même fonction à l'aide cette bibliothèque particulière. 

Maintenant, plutôt que allumeuse à part dans sa totalité, Regardons simplement à certains modèles. Cette syntaxe semble avoir combien de fonctions anonymes ou des fonctions anonymes ou fonctions lambda AKA? Deux, non? Et vous savez que, même si vous n'êtes pas super confortable avec cela, simplement par le fait qu 'il dit function () deux fois. 

Et il se trouve que ce que ce code est doing-- et nous référons à des références en ligne, finalement, un peu d'aide avec cela. Cela signifie juste que quand le document est prêt, allez-y et vous inscrire la fonction suivante que le gestionnaire soumet à l'HTML élément dont idée unique est démo. Et puis, quand cela arrive, appeler ces deux lignes de code. Et cela est, malheureusement, un plus manière verbeuse de dire return false. Et nous en avons parlé juste parce que vous verrez ce type de code en ligne. Et ça n'a rien à se laisser impressionner par. Mais plutôt, gardez à l'esprit que ce qui est va être commune en JavaScript est ce paradigme. Et voilà pourquoi nous montrons tout pour l'instant. Bien. Donc, sans trop d'habitation bien que sur la syntaxe, sont il ya des questions sur ces exemples ou des idées à ce jour? Bien. Donc, nous allons l'utiliser pour quelque chose d'utile. Faire une page Web qui indique juste bonjour, telle et telle est pas tout à fait intéressant, pas de underwhelm. Celui-ci ne va pas être beau, mais il va faire quelque chose d'utile. Permettez-moi de revenir à mon répertoire ici et d'ouvrir, dire, la forme-0.html. 

Donc, supposons que ceci est la première année sports intra-muros page d'inscription sans CSS ou tout sens de la conception. Et je veux aller de l'avant et Enregistrez-vous ici avec un mot de passe. Et je vais accepter les termes et les conditions et cliquez sur Enregistrer. Et maintenant, le site dit, "Vous êtes enregistré! (Eh bien pas vraiment.)" Qui semble comme il a travaillé, mais laissez-moi aller de l'avant et de la force de rechargement. 

Et permettez-moi de dire, non, vous ne le faites pas besoin de mon adresse e-mail réelle. Ou peut-être, nous dirons juste courrier là-dedans. Mot de passe sera, comme, 12345. Et puis, juste parce que je suis un idiot, maintenant il est 123456789. Et je ne vais pas de vérifier votre boîte. 

Hmm. Bien. Donc, il ya plusieurs possibilités pour l'amélioration ici. Et vous savez, ou allez voir dans pset sept, que vous pouvez écrire code-- et vous devrez écrire code dans PHP-- à défendre contre ces types d'utilisateurs erreurs parce que l'utilisateur clairement n'a pas coopéré. Et il ou elle ne vous a pas donné tous les valeurs que vous vouliez ou même dans le format que vous les vouliez. Donc, vous le verrez dans pset sept qui nous pourrions certainement avoir une certaine si les conditions qui disent si l'adresse e-mail est pas un username@something.edu, Nous pourrions simplement dire désolé et présenter des excuses à l'utilisateur beaucoup, comme vous pourriez être dans pset sept. Ou si ils ont pas vérifié cette boîte, se révèle en PHP, vous pouvez détecter que, aussi. Et certainement, si les mots de passe ne correspondent pas comme dans register.php pset pour sept, vous pouvez détecter que. Mais cela est une douleur dans le cou que maintenant ils demandent nous d'aller tout le chemin vers le serveur. L'utilisateur est informé de l'erreur. Et au moins, sauf si vous utilisez quelques techniques fantaisistes, maintenant ils doivent cliquer sur la flèche de retour. Ne serait-il pas agréable, comme un grand nombre de sites Web d'aujourd'hui, si vous aviez plus immédiate rétroaction, instantanément? 

En d'autres termes, laissez-moi aller à la version un, qui va pas être joli. Mais il a cette caractéristique. Malan, 12345, 123456789, pas va vérifier la boîte, enregistrer. Les mots de passe ne correspondent pas. Ainsi, même si ce pop-up est ugly-- nous pouvons remplacer éventuellement avec quelque chose comme Bootstrap, que vous verrez dans pset sept est un très populaire library-- je l'ai fait détectent que les mots de passe ne correspondent pas. Bien. Eh bien, permettez-moi de résoudre ce que l'utilisateur. Laissez-moi aller de l'avant et dis 12345, 12345. Toujours pas de vérifier l'accord. Vous devez accepter les termes et conditions. Alors pourquoi? 

Si nous avons déjà posé qu'il ya un moyen, et nous vous avons tenus dans pset sept pour détecter erreur de telles conditions côté serveur, pourquoi devrais-je embêter aussi le faire en JavaScript? Qu'est-ce qu'un argument en faveur de l'ajout ce vous êtes sur le point de voir comme some-- il ya une complexité supplémentaire. 

Peut-être il n'y a pas à l'envers. Qu'est ce que ça pourrait être? AUDIENCE: [inaudible]. DAVID MALAN: Oh, intéressant. Exploits potentiels. Alors bien sûr, si vous n'êtes pas la manipulation entrée utilisateur erronée que grande, il est peut être d'autant mieux si elle n'a même pas atteindre votre serveur. Je voudrais repousser là et par exemple, vous devriez probablement fixer à la fois de ces problèmes. Mais que ce soit juste. Quoi d'autre? 

AUDIENCE: [inaudible]. 

DAVID MALAN: Ouais. Ce code, comme nous l'avons dit, est interprété sur le côté client. Il ne dérange pas le serveur, ce qui signifie qu'il ne une incidence sur la charge ou la capacité du serveur. Et maintenant, pour peu vieux moi, cela n'a pas d'effet significatif parce que je dois un utilisateur en ce moment. 

Mais si vous êtes tout site web de taille décente, en particulier les plus grands, comme Facebook, plus vous pouvez garder les gens hors de votre serveur le mieux car un serveur, bien sûr, ne dispose que d'une quantité limitée de mémoire vive, un nombre fini de gigahertz, un nombre fini de choses il peut le faire par unité de temps. Donc, si il ya plus de gens dans le monde de frapper votre serveur, connectant accidentellement à tort, tout aussi bien, si vous peut garder que la charge de votre serveur. De plus, en particulier sur un mobile device-- Si vous avez déjà ou se connecter à my.harvard La netid de Yale ou similaire, il ya ce le temps de latence avec beaucoup de des sites comme celle par laquelle il prend, comme, un putain de seconde ou deux parfois. Et puis, mon Dieu, si vous les fautes de frappe, alors vous devez frapper en arrière et refaire. Donc, il ya de latence, surtout sur les connexions réseau lentes. Mais JavaScript, parce il est exécuté sur le client et n'a pas besoin d'aller d'avant en arrière à travers un Internet potentiellement lente connexion, vous pouvez obtenir rétroaction presque instantanée. 

Alors regardons à ce. Permettez-moi de Open Up-forme 0 et regarder le HTML ici. Et nous allons voir tout ce qui se passe. Ceci est une forme dont la action est register.php. Je suis juste en utilisant obtenez que je pouvais voir l'URL. Mais pour les mots de passe, nous serions sûrement voulons pour changer ce pour poster dans la réalité. Voici un champ de type texte d'entrée. Voici une autre entrée champ de type mot de passe. Voici, si vous ne l'avez jamais vu, une entrée de type case à cocher. 

Mais il n'y a pas JavaScript ici que ce soit. Ceci est juste HTML va à register.php. Mais dans la version un, où je commencé à obtenir ces pop-ups, nous allons voir ce qui se passe réellement ici. Dans la version une, ce qui Je vais see-- I pensais que je pouvais caler assez avec assez de mots, mais je suis sorti. 

Dans la version One-- là nous allons. Dans la version un, remarquer la following-- et est mise en oeuvre pas la meilleure, mais il est mon premier. Notez que le dessous forme, je dois une balise script. Et une balise script signifie, hey, navigateur, ici vient un peu de code en, généralement, JavaScript. Et maintenant, remarque ce que je fais. Sur line-- je peux à peine lire it-- ligne 32, il est dit, var form-- alors donnez-moi une variable appelée forme. Et puis obtenir document.getElementId d '"enregistrement". Qu'est-ce que c'est? Eh bien, permettez-moi de rembobiner ici. Et remarquez, ah, je donnai l'élément de formulaire une idée arbitraire, mais descriptive de l'enregistrement. Donc, cela me donne une variable me permet de saisir ce nœud, ce rectangle dans l'arbre appelé forme. des moyens form.onsubmit, hé navigateur, enregistrer un écouteur d'événement sur ce formulaire. En d'autres termes, lorsque cette forme est soumis, exécutez le code suivant. Il n'a pas besoin d'un nom parce que Pourquoi avez-vous besoin de connaître le nom? Vous avez juste besoin de savoir ce que pour exécuter, ergo il est une fonction anonyme ou lambda. Et cette fonction est l'ensemble de ces lignes ici. Et maintenant, pour être honnête, même si vous pourraient ne pas avoir jamais écrit JavaScript avant, il est juste logique C et PHP. Donc, si form.email.value == "" - donc si le champ email est vide, crier à l'utilisateur ", vous devez fournir votre adresse e-mail ". Sinon, si form.password.value Yell est vierge à l'utilisateur, "Vous devez fournir votre mot de passe." 

Plus intéressant encore, logiquement, si form.password.value ne le fait pas égale form.confirmation.value-- d'où vient la confirmation vient-il? Permettez-moi de revenir en arrière. Eh bien, je ai appelé cette entrée champ ici le mot de passe. Et je appelé celui-là confirmation. Je pourrais l'ai appelé mot de passe deux ou autre chose. Je vérifie logiquement que ces deux sont les mêmes. Else-- il se trouve présente M. Boole again-- une valeur booléenne, la case à cocher. Donc, si je dis, exclamation point-- sinon form.agreement.checked, crier à l'utilisateur ainsi. 

Donc, cette syntaxe que vous verrez est très commun en JavaScript, où vous avez cette notation en pointillés. Vous commencez avec un objet ici. Vous plongez dans plus profond à un à une propriété comme mot de passe. Et puis vous obtenez à sa valeur réelle. Et encore une fois, voici l'entrée. Voici le mot de passe nom. Et sa valeur est quel que soit le humaine a effectivement tapé dans. 

Donc, dans l'ensemble de ces cas, je suis retourné faux. Mais sinon, je retourne vrai. Et maintenant nous voyons un utilisation convaincante du moment vous revenir faux Arrêtez ce que l'utilisateur de faire et faire de lui choisir nouveau ou tapez à nouveau. Sinon, nous revenons vrai. 

Et permettez-moi de vous présenter un autre variante de ce juste de semer une certaine compréhension de celui-ci. Eh bien, dans la version 2 de cette forme-2-- Je vais le faire avec un geste de la main. Ceci est, pour ceux qui sont curieux, la version jQuery, ceux d'entre vous qui voudraient barboter dans cette bibliothèque. Mais soyons start-- et des questions? Permettez-moi une pause pour un moment parce qui était rapide et beaucoup. 

Mais la bonne chose ici est que tous les du code est à peu près la même chose. Le nouveau truc est ce qui est le DOM? Quels sont ces rectangles? Quels sont ces nœuds? Qu'est-ce qu'une fonction anonyme? Qu'est-ce qu'un gestionnaire d'événement? Mais heureusement, la plupart de qui est juste cercle complet de, disons, la semaine zéro. Bien. Donc, quelque chose de légèrement plus intéressant? Eh bien, tout d'abord, laissez-moi aller avant et d'ouvrir Google Maps. Et vous remarquerez que pour une moment, sur la fraction de seconde, remarquer ce qui arrive quand Je clique assez vite. Et cette connexion à Harvard est si vite que vous ne remarquerez pas vraiment il. Mais qu'est-ce que vous sorte de sorte de voir si je cliquer et faire glisser très vite? Ceux d'entre vous regarder en ligne, si vous ralentissez à la vitesse de cette 0.5x, vous pouvez voir ce mieux. 

Qu'est-ce qui se passait juste avant que je cliqués et déplacés? Permettez-moi d'essayer ici-- laissez-moi faire autre chose, comme 90210. Allons plus loin. Cela a été très rapide, trop. Que diriez-vous Disney World? Nous y voilà. D'ACCORD. Qu'avez-vous vu pour une fraction de seconde? Juste, comme, carrés, non? Les espaces réservés pour les carreaux? 

Eh bien, ce qui se passe ici? Google Maps est un bel exemple de cette technologie qui est appelée AJAX. Et cela est l'endroit où nous allons commencer à utiliser le code JavaScript dans un particulier manière séduisante. Retour dans la journée, il y avait ce site Web appelé MapQuest. Et je l'aurais pris un capture d'écran de ce billet depuis les années 1990, où si vous vouliez voir ici sur la carte, vous littéralement cliquez sur une flèche au sommet que vous a montré une place différente de la carte. Si vous vouliez aller à gauche, vous cliqué une flèche qui vous a montré une place différente de la carte. Et certains sites le font encore aujourd'hui. Mais même MapQuest a obtenu mieux, comme Google Maps. 

Au lieu de cela, ce qui est mieux ces jours est sites Web qui utilisent AJAX. Autrement connu comme AJAX-- Asynchronous JavaScript and XML, qui est juste une façon élégante de dire une technologie ou une technique qui permet à un navigateur en utilisant JavaScript de faire des requêtes HTTP supplémentaires après que la page a été chargée. Qu'est-ce que cela signifie? Eh bien, ce serait un peu de gênant dans Gmail si chaque fois que vous vouliez de vérifier votre courrier, vous aviez littéralement faire Control-R ou Commande-R ou cliquez sur le bouton Recharger et la page darn ensemble serait recharger. Droit? Il serait clignoter en blanc probablement pour la deuxième. Vous souhaitez voir la barre de progression stupide. Et juste pour voir si vous avez de nouveaux courrier, la page Web entière et l'URL vous êtes au aurait pour recharger. 

Mais cela ne ce qui se passe dans Gmail. Droit? Lorsque vous recevez un nouveau mail dans Gmail, ce qui se passe sur l'écran? Il montre juste en haut, à droite? Il apparaît comme par magie comme une nouvelle ligne dans le tableau. Cela implique en fait une quantité décente de complexité. En fait, si vous pensez à cet arbre, qui, même si est simple ici, Gmail-- et je voudrais avoir à regarder le code d'être sure-- a probablement un tableau HTML ou peut-être une liste non ordonnée qu'elle rend chacun de votre boîte de réception e-mails comme. 

Et donc si vous imaginez cela, il est un arbre en mémoire lorsque vous êtes l'utilisation de Gmail qui ressemble sorte de sorte de comme ça, quand Google réalise, ooh, vous avez un nouvel email, il n'a pas voulons reconstruire l'arbre tout entier. Au contraire, il veut trouver le nœud l'arbre qui représente votre boîte de réception et il suffit d'insérer un nouveau nœud. 

Donc, très similaire à PSEt cinq, où vous eu pour insérer des noeuds dans une table de hachage, fait similaire Google, via Code JavaScript qu'il a écrit, Traverse cet arbre, comprendre où est que la boîte de réception partie de la fenêtre, puis insérer une nouvelle ligne. Et une nouvelle ligne signifie simplement un ou plusieurs nouveaux noeuds dans un arbre. 

Et donc AJAX est cette technique qui permet exactement cela. Une fois que vous avez visité une URL, Toutefois folle de temps il est, et une fois que la page a été chargé, vous pouvez toujours saisir plus de données à partir de la internet-- que ce soit un courriel ou une tuile d'un map-- saisir les coulisses et puis l'insérer dans la page de sorte que l'homme n'a pas vraiment avoir à attendre pour cela. 

Facebook Messenger fonctionne de la même façon. Tout nombre d'autres websites-- Oh, en fait, même cette. Je veux dire, cela est, franchement, sorte de un ennuyeux disposent ces jours. Si je me mets à la recherche de cette cats-- est une sorte de une expérience utilisateur horrible. Il vient de commence la recherche pour moi. Eh bien ce que fait-il? L'URL n'a pas vraiment changé depuis que je frappe. Mais ce qui se passe à travers le wire-- OK, hmm intéressant. Qu'est-ce qui se passe à travers le fil ici obtient juste bizarre. 

D'ACCORD. Alors laissez-moi aller de l'avant et d'inspecter élément et allez dans l'onglet Réseau et essayer de faire ce technique et moins sur les chats. Comme je tape, littéralement, chats et-- ce qui se passe per-- Je ne vais pas à cliquer sur ce. Bien. Donc, ici-bas, ce qui se passe tous les fois que je tape un caractère, apparemment? Comme, le faible niveau? Qu'est-ce qui se passe avec chacun de ces caractères Je tape à mon clavier? Ouais? AUDIENCE: [inaudible]. 

DAVID MALAN: Exactement. Chacun de ces caractères est aller sur Google, un à la fois. Ils construisent une chaîne sur leur serveur qui représente tout ce que je l'ai tapé jusqu'ici. Et chaque fois que je tape un autre personnage, ils utiliser leur sauce secrète d'un algorithme de recherche et de comprendre, veut-il dire cette page de chat ou cette page de chat ou similaire? Donc, dans un certain sens, il me donne un meilleure expérience dans ce que je fais même pas besoin de compléter ma pensée. Et en effet, il est un outil utile chose, saisie semi-automatique en général. Si leurs algorithmes sont assez bon et si mes recherches sont assez évident, Je ne dois pas taper le mot en entier. Ils vont me dire ce qu'il est que je suis effectivement cherchais. Donc, ce que Google appelle instantanée la recherche est juste en utilisant AJAX, en utilisant un code qui leur permet de demander contenu supplémentaire via un navigateur Web derrière les scènes à l'aide de cette nouvelle langue, JavaScript. Donc, nous avons un couple de minutes. Et laissez-moi appeler mon copain Colton place sur la scène, car il semblait particulièrement amusant dernière fois d'introduire une technologie que certains d'entre vous ont exprimé un intérêt dans des projets finaux. Nous avons pensé qu'il serait amusant de faire un bénévole, même si, aujourd'hui, vous montrer un ajout à ce qui permet vous-- ouais, Je vis cette première main. Monte. Très bien fait. Bon travail. Je vais projeter cela sur l'écran dans un instant. Quel est votre nom pour tout le monde? 

EPT: Je suis l'EPT. 

DAVID MALAN: Etha? 

EPT: EPT. 

DAVID MALAN: l'EPT? 

EPT: Ouais. 

DAVID MALAN: Ravi de vous voir. Bien. Permettez-moi d'obtenir ce prêt. Venez sur plus de la milieu avec Colton ici. Qu'est-ce que Colton a dans ses mains aujourd'hui est une télécommande. Alors plutôt que de rester là dans un monde tridimensionnel en regardant autour que Colton a fait, maintenant EFA peut effectivement se promener en remontant, bas, à gauche, et à droite comme un Contrôleur de Nintendo ou Xbox. EPT: je vais tomber de la scène. DAVID MALAN: Je vais tenir à peu près ici. Mais cela est un risque. D'ACCORD. Donc, aller de l'avant et de mettre ceux sur. Laissez-moi aller de l'avant et passer à l'écran ici. Permettez-moi de baisser les lumières. Et Colton, permettez-moi se tenir à côté de vous. 

Voulez-vous expliquer ici avec le micro ce que nous faisons? Et voilà. 

COLTON: Bien sûr. Donc maintenant nous sommes le chargement de l'Oculus, Je suppose operating-- ne fonctionne pas système, mais le programme principal, où vous pouvez accéder à tous les jeux et applications qui sont dans votre bibliothèque. Donc maintenant, il devrait dire appuyez sur le pavé tactile pour commencer. Touchpad va être sur le côté droit du casque. Alors allez-y et tap-- EPT: Oh, l'homme. DAVID MALAN: Ouais, là vous allez. La qualité est de voir Efa est bien meilleure qualité. Ceci est juste le Wi-Fi ici. COLTON: Donc, ce que vous êtes allez vouloir faire est de regarder vers le haut droit de l'écran. Yep, ce jeu sur la droite tout en haut. Et puis, lorsque vous sélectionnez il, appuyez de nouveau sur le pavé tactile. Je pense que ses Dreadhalls. Et puis ici est A-- ici, laissez- me tenir vos lunettes pour vous. 

Je viens donc lui ai donné un contrôleur. Alors maintenant, il peut contrôler le jeu. Il peut se déplacer et des trucs comme ça. Alors allez-y et regardez vers le haut. Vous devriez voir un nouveau jeu. Alors allez-y et vous pouvez le faire. Maintenant, vous devriez être en mesure de contrôler vous avec le contrôleur, ainsi, dès que le jeu se charge ici. Cela pourrait être un peu effrayant. 

EPT: Maintenant, vous me dites. D'ACCORD. 

COLTON: Très bien. Donc, vérifiez que vous pouvez déplacer. D'ACCORD. Vous pouvez vous déplacer. Parfait. Donc, si vous regardez en bas, vous avez une carte. Carte vous indique où vous êtes. Vous pouvez regarder autour de la salle. Vous pouvez tourner complètement autour. Oui exactement. Faire demi-tour. 

Alors regardez à votre gauche. Je pense qu'il ya quelque chose que vous pouvez ramasser sur un tonneau dans la chambre. 

EPT: Comment puis-je obtenir la la carte de la route? COLTON: Look up. Il suffit de regarder vers le haut. Bien. Et voilà. Maintenant, aller de l'avant et juste tourner autour. Donc regarder plus loin sur votre gauche. Continuez à vous déplacer à gauche. Continuez à regarder à gauche. Continue. Ouais. 

EPT: Oh, cette façon. 

COLTON: Ouais. Marchez vers elle avec le contrôleur. Et voilà. Maintenant, il devrait dire le ramasser. Et voilà. Ramasser. Bien. Maintenant, nous allons sortir de cette salle. Allez-y et marcher jusqu'à la porte. Donc, vous allez hold-- il est dit maintenez le bouton pour forcer l'ouverture. Alors allez-y et maintenez le bouton. Yep, forçant ouvrir. Bien. Bon travail. Maintenant, nous sommes en sortant de la salle. Donc, je vais laisser le reste en place à vous et voyez ce que vous découvrez. EPT: je ne vais pas dans la chambre noire. Oh attends. Maintenant, je dois aller dans le couloir sombre? OK, je vais retourner [inaudible]. COLTON: Très bien. Certains autres éléments à ramasser. On dirait que quelques pièces de monnaie. Voilà un choix de verrouillage. Donc, si vous trouvez un verrouillé porte, vous pouvez l'utiliser. As-tu peur? 

EPT: Pas encore. COLTON: OK. 

Pretend-- ouais. Juste prétendre que vous êtes effectivement debout là. Et si vous tournez around-- vous avez à s'y habituer. Mais il est logique. DAVID MALAN: Et tandis que de l'EPT reste jouer, puisque nous ne pouvions le faire toute la journée, nous pouvons tous la pointe des pieds ici. Mais nous avons deux autres paires, si vous voulez venir et de jouer. Sinon, nous allons voir vous la prochaine mercredi. Merci à notre bénévole aujourd'hui. [Applaudissements] 

[MUSIQUE - "Seinfeld THEME"] ENCEINTE 1: Eh bien, je suis montage mettant une nouvelle PL sur. Je viens de changer l'OLPF-- 

SPEAKER 2: Alors qu'est-ce faites-vous exactement? 

ENCEINTE 1: Eh bien, chacun de these-- ici, je vais vous montrer celui-ci ici. Vous pouvez le voir ici. 

Intervenant 3: Je crois que je suis bon avec ceux-ci. Vous voulez un peu plus? 

ENCEINTE 4: Non, je suis bonne. [Inaudible]. 

Intervenant 3: Non, [inaudible]. Avoir une certaine. ENCEINTE 1: La couleur différente. SPEAKER 2: OK. ENCEINTE 1: En fin de compte ce qu'il fait est qu'il ajuste la couleur de--