DAVID J. Malan: Très bien, si ce ici est le bras Myo bande, un couple dont nous avoir des projets définitifs CS50. Et ce fut une démonstration nous en attente vous à l'avance où l'essentiel ce bras assez serré baguage ici l'écoute de vos mouvements musculaires qui sont ensuite mappé dans le logiciel l'ordinateur portable de Colton ici qui eu iTunes et que chanson déjà en file d'attente. Plutôt que de me faire des démonstrations de cela, Colton a été dans le laboratoire clairement toute la semaine obtenir une démonstration prêt pour un volontaire courageux. Si quelqu'un veut venir sur up-- vu votre première main. Venez sur place. [00:01:09] Bien. Et quel est votre nom? 

[00:01:13] PUBLIC: Euh, Maria. 

[00:01:14] DAVID J. Malan: Maria, ravi de vous voir. Venez par ici. Permettez-moi de vous présenter à Colton. Colton, cette Maria. 

[00:01:21] COLTON: Salut, ravi de vous rencontrer. 

[00:01:23] DAVID J. Malan: Tous droit, si la première étape, nous sommes allez avoir vous mettez ce sur votre avant-bras de sorte qu'il est assez étanche jusqu'à près de votre coude. Et pendant ce temps, nous allons avoir mettre sur notre verre Google et nous mélangeons technologies aujourd'hui. 

[00:01:33] COLTON: d'abord, nous devrons brancher ce dans les choses. 

[00:01:36] DAVID J. Malan: OK. En fait, il faut mettre votre bras comme près de ce câble que possible afin que nous puissions d'abord synchroniser le haut. 

[00:01:41] COLTON: Faisons cela. 

[00:01:42] DAVID J. Malan: Et pendant ce temps, de sorte que tout le monde peut obtenir un coup d'oeil de plus près, nous lançons la caméra de Andrew sur l'écran là. Nous avons donc un câble USB qui est étant branché sur le brassard de Maria. Et permettez-moi de l'écran de Colton jette sur le projecteur suivant. 

[00:02:00] Donc Colton enregistre le dispositif maintenant comme un Myo connecté à ce câble. Et maintenant, que Maria va faire momentanément est réellement marcher à travers les étapes d'étalonnage et enseigner le logiciel comment ses muscles répondent quand elle assurez-vous pré-défini gestes qui comprend le logiciel. Si vous souhaitez aller dans avant de l'écran. OK, continuer d'essayer. 

[00:02:30] COLTON: aller comme ça. Et comme ça. Et tout le chemin à droite. Retourner. 

[00:02:35] DAVID J. Malan: OK. Point de vue différent. Il est pas vous. Il nous est. 

[00:02:40] MARIA: OK. DAVID J. Malan: Non Passons le plus haut il est donc plus près de votre coude, ou encore plus serré. Bien. 

[00:02:52] Et ce est parti. Ce serait un bon moment pour CS52X. Nous y voilà. 

[00:02:57] Très agréable. D'accord. Pouce à Pinky. 

[00:03:02] Très agréable. Répartissez vos doigts. Bon. Agitez droit. Il est curieusement montrant vous avec le hand-- gauche 

[00:03:17] COLTON: Ouais, ce est bizarre. DAVID J. Malan: Wave le droit et aller de l'avant. Avance rapide pour passer ou suivante. Voilà droit des vagues OK. 

[00:03:25] MARIA: Je don't-- attendre. 

[00:03:26] DAVID J. Malan: Besoin d'aide? 

[00:03:28] COLTON: Donc vous allez comme ça. MARIA: Il est le tournant autre chose, cependant. COLTON: Il est. DAVID J. Malan: Ouais, je ne sais pas pourquoi il est vous montrant un gaucher. COLTON: Pourquoi pensez-vous pas try-- juste essayer de faire comme ça. 

[00:03:38] DAVID J. Malan: Non? Peut-être atteindre votre bras un peu plus droit et rendre plus abrupt comme ça. Ouais, OK, viens. 

[00:03:48] MARIA: Je suis désolé. DAVID J. Malan: Il est pas votre faute. COLTON: Il est très bien. DAVID J. Malan: Très bien. Well-- 

[00:03:56] MARIA: Devrions-nous, alors? DAVID J. Malan: Oui, nous allons vous laisser filer. Donc, si quelqu'un souhaite faire une projet final à l'aide de ce bord de coupe matériel, réaliser ça pourrait prendre un peu de temps pour s'y habituer. Et this-- la réalité est la suivante est en fait très saignant bord. 

[00:04:10] Ceci est ce qu'on appelle le kit de développement, qui est destiné à être essentiellement une pré-version de sorte que les gens peuvent faire exactement this-- lutter avec elle, figure comment les corps des gens travaillent avec la technologie. Donc, si vous voulez ensuite, après lecture, nous pouvons vous venir prendre un autre coup à lui. Mais sinon, une salve d'applaudissements, si nous pourrions, par Maria de venir sur place. 

[00:04:26] MARIA: Je vous remercie. 

[00:04:28] DAVID J. Malan: Je vous remercie. Nous allons accrocher à cela, mais nous allons donner vous-- comment sur une balle anti-stress ici? Oh, et-- si-- oui, merci. Bien. Donc, pour les curieux, si vous étiez familier avec le choix judicieux que nous y fait plus tôt, d'une télévision incroyable montrer que vous devez absolument être binge-watching sur Netflix est celui-là. 

[00:04:51] ENCEINTE 1: Mesdames et Messieurs, un magicien nommé Josh. 

[00:05:04] DAVID J. Malan: Et apparemment, il est une chose me texte au cours de conférence maintenant. On me dit que Maria eu un anniversaire hier. Alors joyeux anniversaire de CS50 Maria ainsi. 

[00:05:18] Donc vous avez pu le lire dans le mois dernier que ce messieurs ici, Steve Ballmer, qui était en fait classe de 1977 à l'université, récemment pris sa retraite de Microsoft. Il était étudiant ici, puis quelques années plus tard se trouve à Stanford Business School quand il a reçu un téléphone appeler à partir d'un de ses amis qui avait vécu dans le couloir de lui ici à Harvard. Le nom de cet ami était le projet de loi Gates, et à l'époque, il tentait de recruter Steve être le premier homme d'affaires, vraiment, dans une petite entreprise nom de Microsoft. 

[00:05:45] Une longue histoire courte, Steve a finalement été conquis, rejoint Microsoft quand ils eu seulement 30 employés. Et au moment où il à la retraite tout récemment, la société avait 100 000 employés au cours des dernières années. Et si un site connu sous le nom The Verge préparé cet hommage en vidéo que nous avons pensé partagé qui vous donne un sentiment de combien d'énergie Steve apporte à toute présentation qu'il donne. [VIDEO LECTURE] -Microsoft Est comme un quatrième enfant. Les enfants font quitter la maison. Dans ce cas, je suppose Je pars de la maison. Hey Bill, whazzap? 

[00:06:23] -Wazzap? 

[00:06:24] -Hé, Wazzap? Nous avons reçu un énorme occasion. Et le projet de loi nous a donné cette opportunité. Je tiens à remercier le projet de loi pour cela. Je veux que vous aussi. Le rythme de l'innovation ne va pas ralentir. 

[00:06:42] Ça va aller plus vite et plus rapide. Il pourrait y avoir un peu de concurrents qui sont malheureusement éliminés! 

[00:06:54] Je l'aime cette société. Oui! Je suis un PC, et je l'aime cette société! 

[00:07:08] Développeurs, développeurs, développeurs, développeurs, développeurs,, développeurs, développeurs. Oui! Les développeurs Web! 

[00:07:19] Les développeurs Web! Les développeurs Web! Écoutez ce que vous obtenir, sans frais supplémentaires! 

[00:07:28] L'exécutif MS-DOS, un rendez-vous calandre, une pile de cartes, un bloc-notes, une horloge, un panneau de contrôle. Et, pouvez-vous le croire? Reversie! 

[00:07:35] Les graver sur CD! Affichez-les à MSN! Vous les envoyer à vos amis! 

[00:07:40] Tout en un seul clic! One Microsoft, une stratégie, un team-- concentré, discipliné, professionnel, et expert dans tout ce que nous faisons. Permettez-moi d'utiliser une ligne d'un vieux film. 

[00:07:52] Les relations sont comme des requins. Ils se déplacent vers l'avant ou ils meurent. Je pense effectivement technologie sociétés sont les mêmes. 

[00:08:01] [FIN LECTURE VIDÉO] DAVID J. Malan: Donc, nous sommes très heureux de annoncer que Steve se joindra à nous ici dans CS50 mercredi prochain à la place et le temps ici d'habitude. Espace sera probablement limitée. Et si vous joindre à nous en personne, se il vous plaît la tête aujourd'hui ou peu de temps après à cs50.harvard.edu/register. 

[00:08:22] Et nous allons suivre par Mardi confirmant taches. Réjouissez-vous que la prochaine Mercredi lors de conférence en CS50. Maintenant, dans d'autres nouvelles, je me trouvais à rencontré ce dans The Crimson juste l'autre jour. 

[00:08:34] Il se trouve que l'un des employés de CS50 et au moins l'un des élèves de CS50 est actuellement en cours d'exécution pour UC président et vice-président, qui me ramenait à mes propres jours en arrière quand je perdu l'élection UC lamentablement. Mais la doublure d'argent in qui est je toujours raconter l'histoire est que l'un des je suis sûr de nombreuses raisons je perdu la élection était un manque complet d'un talent pour parler en public. Et très honnêtement, il m'a conduit, cette expérience Je pense que mon année junior, pour réellement signer pour Harvard Computer Society, qui est le groupe sur le campus que détient différents entretiens techniques et d'autres choses. Je pris sur leur enseignement séminaires et donc eu l'occasion, un merveilleuse occasion, de commencer à travailler sur exactement cela. Mais aussi, je eu l'occasion au cours de cette expérience apprendre moi-même d'autant plus HTML. Et si je tergiversé hier soir par en regardant à travers le site Web HTML Je fis comme en 1997, '98, pour ma campagne qui ressemble à ceci ici. Je sais. 

[00:09:29] Because-- et bien sûr, un avis cette décision de conception étonnante en 1998 ou autres joyeusetés. La première chose que vous voulez que les utilisateurs à faire lors de sa visite votre site est d'avoir à cliquer sur un autre lien juste pour entrer dans votre site ici avec le moine derrière un rideau comme enveloppé où apparemment ma plate-forme de campagne était. Et cela est tout ce que vous aurez aujourd'hui est juste une capture d'écran. Mais je lisais, comme, mes affiches de campagne la nuit dernière et ma plate-forme. 

[00:09:50] Et je suis tellement en colère à l'époque. Ma plate-forme était-- il était intéressant. Donc je l'ai calmé depuis. Mais un jour, je vais courir à nouveau et espérons mieux cette fois. 

[00:10:03] Donc, HTML, que la langue dans laquelle je faisais que in-- vous allez bientôt faire beaucoup plus-- est quelque chose que nous avons été parler de la fin et largement tenir pour acquis maintenant que nous avons passés à d'autres langues. Mais arrêtons-nous juste un instant et mettre un peu de ces choses dans leur contexte. Ainsi, dans une phrase, ce que le HTML? 

[00:10:18] Ou, ce qui est utilisé pour? Tout le monde? Oui. 

[00:10:20] PUBLIC: balisage pour les sites web. DAVID J. Malan: balisage pour le site Web. Donc, il est un langage de balisage qui vous permet de structurer une page Web. Tête monte ici, titre Va Ici, le corps va ici. Ceci est en gras, cela est italics-- ce genre de détail. 

[00:10:33] OK, bon. Donc CSS vous-- et je laisse a pris quelques libertés, il avec le gras et en italique parce que face Voilà qui est mieux mis en œuvre à cet égard. CSS est-- quoi? Dire dans une phrase. Tout le monde à tous. Ouais. 

[00:10:46] Public: Décoration et choses, comme la façon de le concevoir. DAVID J. Malan: OK, bon. Embellissements qui vous permettent à concevoir ou styliser il avec des choses comme gras et italique et couleurs et aussi plus fin positionnement grain d'éléments. Il sorte de vous permet de prendre les choses les dernier mile de sorte que si, par exemple, dans Pset7, vous avez sans doute remarqué sur votre portefeuille page si vous êtes à ce point déjà que la table par défaut que vous faire pour montrer actions des avoirs de l'utilisateur et de l'argent ressemble probablement assez hideux par défaut, sans espace blanc. Le genre de Crammed tout ensemble en rangées et en colonnes. 

[00:11:18] Eh bien, avec un peu de CSS, que vous pouvez réaliser, vous pouvez effectivement modifier cela et faire quelque chose de beaucoup plus familier et plus plus jolie à regarder. Donc CSS est sur la stylisation de sites Web. Mais ensuite, nous avons introduit une autre langue, PHP, qui nous permet de faire quoi? 

[00:11:36] Disons simplement faire quoi? Tout le monde. Vous avez aventurer au-delà les deux premières lignes. Ouais. 

[00:11:40] PUBLIC: générer du contenu dynamique. DAVID J. Malan: Parfait. Générer du contenu dynamique. Et vous pouvez le faire en un certain nombre de langues. Il nous arrive d'utiliser PHP parce qu'il est en partie si semblable à la syntaxe C. 

[00:11:50] Mais PHP fait exactement cela. Il vous permet de générer dynamiquement sortie. Et une partie de cette production pourrait être HTML, comme nous l'avons généralement faisons. Et il est aussi, car il est un langage de programmation, est le mécanisme par l'intermédiaire duquel nous pouvons parler aux bases de données. 

[00:12:03] Et nous pouvons faire des requêtes à d'autres serveurs comme yahous et programmatique rien faire vraiment que vous pourriez autrement vouloir forcer un ordinateur à faire. Donc, PHP permet de nous commençons sortie dynamique le contenu. Donc, par cette logique, je ne dois un site web dynamique en 1998. 

[00:12:16] Il était juste une page Web statique. Mon contenu a dû être changé par manuellement avec gedit ou un équivalent. Mais PHP est ce que nous avons utilisé ou aurait pu utiliser, plutôt, quelque chose comme le Site Frosh GI, qui était censé prendre les inscriptions et gérer une liste de choses que users-- sont en fait commuter temps, même si nous nous trouvons à utiliser Perl, un autre langue à l'époque. 

[00:12:35] Et puis enfin, nous avons introduit SQL-- Structured Query Language. Ainsi, encore un autre langage qui est utilisé pour quoi? Utilisé pour quoi? Pouvons-nous aventurer slight-- OK, on ​​ne va pas pour obtenir beaucoup plus loin de l'orchestre ici. PUBLIC: Il est un protocole utilisé pour parler aux bases de données. DAVID J. Malan: Un protocole utilisé pour parler aux bases de données. Permettez-moi de tweak. Il est un langage naturel utilisé parler à databases-- sélectionne et inserts et les suppressions et les mises à jour et fait encore plus de fonctionnalités que nous avons même pas plongé en mais vous pouvez avoir explore-- à explorer pour, par exemple, un projet final. Il ya donc ces différentes pièces. 

[00:13:09] Et nous espérons que Pset7, même si sa spécification est assez longue, il est délibérément longue pour vous guider par la façon dont ces choses peuvent tous dactylographiées. Maintenant, le lundi, nous présenté notre dernière langue que nous allons présenter officiellement dans la course-- qui est, JavaScript. Ceci, comme PHP, est un langage interprété. 

[00:13:25] Mais une distinction clé Je proposais lundi est que, alors que PHP est en cours d'exécution ou étant interprété sur le serveur, qui dans ce cas l'appareil de CS50, ou peut-être quelques-uns web commercial serveur sur l'Internet, JavaScript généralement est une langue qui fonctionne côté client pas serveur side-- si dans le navigateur. Ce qui veut dire, comme quand je l'ouvris jusqu'à Facebook code source et trouvé tous de ces fichiers .js, l'implication était que lorsque vous visitez Facebook ou plus Sites ces jours, vous obtenez non seulement HTML, CSS, non seulement, mais tout un tas de JavaScript Code souvent sous la forme de fichiers .js. Et puis il est le browser-- votre propre Mac ou PC-- qui exécute ce code. 

[00:14:03] Mais votre navigateur exécute. Vous pouvez penser à une sorte de bac à sable. Alors que le code JavaScript ne devrait pas être en mesure de supprimer des fichiers sur votre ordinateur. Il ne devrait pas être capable de envoyer des e-mails sur votre compte. Votre navigateur type effet de restreindre ce que vous pouvez faire avec lui. 

[00:14:17] Donc, dans ce sens, il est un peu moins puissant, peut-être, que C. Mais JavaScript peut, comme un de côté, être utilisé sur le serveur, si nous allons tendance à ne pas parler à ce sujet dans ce contexte. Alors maintenant, nous allons lier ces ensemble. Il ya une semaine, plus, nous avons présenté certains HTML sur la page web de super ennuyeux left--. 

[00:14:34] Dit juste bonjour monde. Et puis je proposais sur le droit nous pouvons genre de voler des idées de notre discussion de des structures de données en C et de réfléchir à la façon dont cette hiérarchique langage de balisage sur la gauche pourrait être élaboré ou mis en œuvre dans la mémoire comme une structure arborescente avec des noeuds réel et les pointeurs et ce genre de détails. Sur la droite, nous appelons que d'un document DOM-- Objet modèle-- qui est juste une façon élégante de dire arbre. 

[00:14:56] Maintenant, pourquoi est-ce utile de penser de cette façon? Parce que maintenant, avec JavaScript, parce que nous avons code qui arrive à jouer dans ce environnement, le code HTML réel qui est été envoyé au navigateur déjà et a déjà été chargé en mémoire par le navigateur dans un arbre dans votre ordinateur de RAM comme ça, on peut utiliser JavaScript de fait traverser ou marcher ou recherche ou changer cet arbre DOM cependant nous voulons. Donc en fait, si vous pensez sur facebook.com, si vous utilisez la fonction de chat, si vous Gmail utilisation et la fonction de Gchat, tout où vous avez les messages provenant encore et encore et encore, ces messages sont sans doute, comme, LI balise, balises d'élément de liste, peut-être. 

[00:15:35] Ou peut-être qu'ils sont juste divs qui gardent apparaissant chaque fois que vous recevez un message instantané. Et ce qui signifie que tout ce que Facebook ou Google est en train de faire est toute fois que vous obtenez une message du serveur, ils utilisent probablement le JavaScript juste ajouter un autre nœud à ce tree-- un autre noeud de cet arbre puis visuellement semble juste comme une nouvelle ligne de texte sur votre écran. Mais ils insertion dans cette structure de données. 

[00:15:57] Donc, dans les classes comme Cs124 et d'autres, vous aurez en fait écrire plus de code contre structures de données de ce genre. Mais pour l'instant en JavaScript, nous allons supposer nous obtenons toutes ces fonctionnalités gratuitement à partir de la langue elle-même. Alors regardons un exemple. 

[00:16:09] Permettez-moi d'ouvrir un fichier appelé form.html. Il est super simple. Il semble juste comme ça. 

[00:16:15] Pas de CSS, sans penser à l'esthétique. Il est purement fonctionnel et apparemment je suis demandant un email, un mot de passe, mot de passe de nouveau, puis un chèque à accepter certains termes et conditions. Qu'est-ce que le code source de ce ressemble est probablement quelque chose vous pouvez le deviner avec un peu de la pensée maintenant. Je dois une balise de formulaire ici. 

[00:16:32] Une action est apparemment va aller vers un fichier appelé register.php. La méthode que je vais utiliser est d'obtenir. Et puis je dois un texte champ dont le nom est email. 

[00:16:40] Je dois un champ de mot de passe dont le nom est le mot de passe. Je l'ai eu une autre champ de mot de passe dont le nom est quelque peu arbitraire confirmation. Il est juste un autre paramètre HTTP. 

[00:16:49] Et puis nous nous ne l'avons pas utilisé ces sauf depuis l'IMS Frosh démo en class-- une case à cocher qui est il suffit de taper égale chèque. Et je vais appeler cet accord. Donc je l'ai genre de arbitrairement mais commodément nommé ces domaines. Alors que maintenant, quand cette forme se soumis, nous allons voir ce qui se passe. Si je fais malan@harvard.edu, Je vais faire un mot de passe de pourpre. Je vais faire un mot de passe de rien. Il ne faut pas coopérer. 

[00:17:10] Et je ne vais pas cocher la case. Permettez-moi de cliquez sur Enregistrer. Et il dit, hm, vous êtes inscrit. Pas vraiment. 

[00:17:16] Mais l'adresse URL modifiée. Donc, cette forme a été clairement permis de se soumettre à register.php. Mais sans doute, je serais attraper certaines de ces erreurs. Maintenant, dans Pset7 et certains de nos exemples de cours, nous aurions généralement imprimer un grand message d'erreur rouge ici dire, le nom manquant, ou manquant mot de passe. Nous l'avons fait avant et nous avons la détection d'erreur côté serveur fait. 

[00:17:37] Mais de nombreux sites Web de nos jours faire la détection d'erreur côté client où l'URL ne change pas. Toute la page ne se recharge pas. Vous obtenez une rétroaction instantanée à partir du navigateur. Peut-être que quelque chose va rouge. 

[00:17:48] Peut-être que vous obtenez un pop up. Mais vous ne perdez pas de temps à envoyer le serveur de données qui est incomplet. Donc, nous allons voir comment nous pourrions atteindre cette fonctionnalité ainsi. 

[00:17:56] Permettez-moi de passer à form1.html, qui a la même apparence. Mais si cette fois je fais malan@harvard.edu et je tape pourpre et je ne collabore pas plus mais cliquez sur Enregistrer, notez maintenant. Il est pas la solution la plus sexy. Je l'ai pris au moins cette erreur. Et je l'ai utilisé l'alerte fonction dans JavaScript-- qui nous sommes seulement à l'aide en classe. En général, vous ne devriez pas utiliser cette car il peut très rapidement sortir de contrôle. Mais les mots de passe ne correspondent pas est l'erreur. 

[00:18:19] Permettez-moi aller de l'avant et cliquez sur OK. Mais ce que la livraison clé ici est que l'URL n'a pas changé. Donc, je l'ai gaspillage pas dérangé le temps du serveur, lui demandant une question que je pouvais avoir compris la réponse à moi-même. 

[00:18:30] Et l'utilisateur, même si parlons de ce sujet plus que celle de l'utilisateur aller à penser à ce sujet, va avoir une rétroaction instantanée. Il n'y a pas de latence avec la connectivité du réseau. Alors regardons ce code source. 

[00:18:40] Regards Form1.html structurellement similaire ici. La forme est en fait le même. Mais nous allons voir ce que je faisais ici. Et il ya différentes façons de le faire. Et je l'ai fait le plus directement suiveur mais pas façon la plus élégante encore. Je dois une balise script. La parole est ensuite document.getElementById ("enregistrement"). Et je stocke cette valeur en forme, une variable. 

[00:19:04] Alors qu'ai-je fait? Vous pouvez penser document.getElementById comme étant une fonction spéciale qui JavaScript permet que les mains littéralement vous un pointeur vers l'un des noeuds ou des rectangles dans cet arbre. Alors maintenant, voilà ce que notre variable de formulaire dans JavaScript est effectivement pointé. 

[00:19:21] Alors maintenant, la syntaxe est différente de C. Mais nous font quelques choses ici. Un, celui-ci est un peu étrange recherche, certainement par rapport à C. Mais regardez à la ligne 35. Ainsi, sur la gauche form.onsubmit. Rappelons que onsubmit est comme un champ dans une structure. Si vous pensez que de la variable de formulaire vient d'être une structure C, il pourrait avoir quelques champs. 

[00:19:42] Retour dans la journée, nous avons eu les noms des étudiants, ID, maisons, ce genre de domaines. Il suffit de penser onsubmit comme un autre domaine. Mais il est un domaine spécial parce que la navigateur est préprogrammée pour attendre .onsubmit de ne pas être une valeur comme un nombre ou une chaîne, mais être en fait une fonction ou l'adresse d'une fonction dans la mémoire de l'ordinateur. 

[00:20:02] Et en effet, voilà ce que ce mot-clé ici fait. Cela en dit, me donner une nouvelle fonction. Mais quel est son nom va être, apparemment? 

[00:20:09] En repensant à lundi. Quel est le nom de cette fonction basée sur la syntaxe? Non, je veux dire, il ya clairement aucun nom associated-- certainement pas dans ce que je l'ai souligné ici. 

[00:20:21] Mais qui est réellement OK. Ceci est une fonction anonyme, ou un fonction lambda comme certains pourraient l'appeler. Et cela signifie juste il est encore une fonction. Il est juste, vous ne pouvez pas l'appeler par son nom. Mais qui est OK. Étant donné que de plus, le navigateur a été préprogrammé par des sociétés comme Google ou Microsoft ou Mozilla ou d'autres à il suffit de savoir que si le champ .onsubmit à l'intérieur d'un élément de formulaire a le valeur, le traiter comme un function-- un pointeur de fonction, si vous voulez. Et appeler lorsque le formulaire est soumis. 

[00:20:46] Donc, ce code doit être exécuté lorsque le formulaire est soumis? Apparemment tout, à l'intérieur de l'accolade. Et cela est juste stylistique. 

[00:20:53] Vous pouvez le faire comme nous avons tendance à faire dans CS50. Mais en JavaScript, la plupart des gens ont tendance à rester sur la même ligne simplement parce qu'il est plus clairement associée à cette fonction de mots clés. Alors maintenant, que fais-je? 

[00:21:03] Si form.email.value égal égaux la chaîne vide ou rien, voici une alerte où je vais dire, vous devez fournir votre adresse e-mail, et puis retourner faux. Et il est faux de dire que ce retour empêche la soumission du formulaire. Pendant ce temps, si la valeur du mot de passe blanc, je vais crier à l'utilisateur et dites, vous devez fournir un mot de passe. 

[00:21:21] Pendant ce temps, les choses deviennent un peu de fantaisie ici. Si form.password.value ne le fait pas form.confirmation.value égal, l'autre domaine, crier à l'utilisateur que les mots de passe ne correspondent pas comme ils n'a pas à l'heure. Et puis celui-ci est un peu plus sexy parce que je sais que je savais que conceptuellement vérifier est le nom d'une case à cocher. 

[00:21:40] Donc, je peux utiliser un point d'exclamation Point-à-dire si le chèque est pas checked-- il est l'opérateur booléen valeur, vrai ou false-- Je crie à l'utilisateur pour cette raison. Sinon, si nous obtenons par l'ensemble de ces conditions, disons simplement revenir vrai. Laissez le formulaire soumis. Et ce sera alors se produire. 

[00:21:56] Voyons taper cramoisi. Nous allons vérifier la boîte, cliquez sur Enregistrer. Et maintenant je vais à la destination. Maintenant, il n'y a pas là la base de données. Il ya rien d'intéressant dans register.php. Je voulais juste quelque chose à réellement parler. Permettez-moi de faire une pause, ici. Vous avez des questions sur ce que nous venons de faire ou ce que certains de cette nouvelle syntaxe est? OK, ouais? 

[00:22:17] Auditoire: Alors, tout case est automatiquement un booléen. Vous ne devez pas déclarer comme ça. 

[00:22:21] DAVID J. Malan: Exact. Toute case qui est envoyé à vous de un formulaire HTML à votre code JavaScript seront traitées, oui, comme un Boolean value-- vrai ou faux. Il est une bonne question. Alors que les autres valeurs, de Bien sûr, avoir été texte, les chaînes AKA. 

[00:22:36] Très bien, alors laissez-moi rembobiner un peu plus loin. Quel a été le point entier de cela? Juste pour être clair. Comme nous le savons déjà, même de Pset7 et même de la conférence de la semaine dernière exemples, que nous ne pouvons évidemment vérifier $ _POST $ _GET Voir si l'utilisateur donne-nous une valeur vide. Rappelez-vous la fonction vide en PHP. 

[00:22:54] Donc, juste pour être clair, ce qui est une raison nous pourrions aussi envie de faire cette vérification d'erreur à l'intérieur du navigateur? Quelle est la motivation ici? Ouais. 

[00:23:06] PUBLIC: plus rapide, et vous ne le faites pas envoyer des données inutiles sur le serveur. DAVID J. Malan: Bon. Il est plus rapide. Vous ne envoyez pas inutile données pour le serveur. 

[00:23:12] Ainsi, vous obtenez une plus réponse immédiate. Et dans l'ensemble, l'utilisateur expérience est mieux. Pensez à l'alternative. 

[00:23:17] Si pour Gmail-- et était le cas il ya plusieurs années. Supposons que vous avez un nouveau message Gmail compte, mais le seul moyen grâce de voir que est à, comme, recharger la page entière. Ou supposons que vous cliquez sur un lien pour lire un email. 

[00:23:29] Tout doit donc recharger que vous pouvez voir l'e-mail. Ou Facebook-- vous obtenez un message de chat. Vous ne voyez pas ce que vous rechargez la page ou cliquez sur un lien. 

[00:23:36] Comme, ce serait un terriblement expérience utilisateur ennuyeux. Et voici ce qu'elle était, clairement, quand je courais pour UC et sur le web est beaucoup moins dynamique et JavaScript n'a pas été aussi popularisé comme il est maintenant. Et les choses deviennent beaucoup plus dynamique et beaucoup plus côté client dans ce sens. 

[00:23:49] Mais il ya un hic ici, et cette est une sorte de chasse aux sorcières ennuyeux. Tout simplement parce que vous ajoutez côté client détection comme cela ne signifie pas vous pouvez ou devez abandonner détection de côté de serveur. Vous voulez essentiellement à mettre votre Vérification des erreurs dans les deux endroits. Parce que ce qui était un de la leçon de l'article que je lis quelques extraits de cette system-- CMS stupide Content Management system-- qui était la mise en oeuvre de son système d'authentification, sa connexion via ce mécanisme? JavaScript. 

[00:24:20] PUBLIC: JavaScript. DAVID J. Malan: JavaScript, exactement, non? Il a été l'utilisation de JavaScript. Et littéralement, vous les gars ont joué un peu probablement avec l'inspecteur de Chrome. Et si je peux le trouver, inspecter élément. 

[00:24:30] Permettez-moi passer à faire toutes les options de Google Chrome. Et voilà comment il est facile de désactiver JavaScript dans un navigateur. Vérifiez, pas plus JavaScript. 

[00:24:38] Donc, en toute équité, beaucoup de nos jours le web va tout simplement de rompre parce que Gmail et autres sites-- Facebook-- supposer que JavaScript est activé. Mais si vous faites quelque chose de stupide comme seulement valider une entrée de l'utilisateur et la vérification pour les erreurs sur le côté du client, un adversaire pourrait facilement le faire. Et puis même plus intelligents adversaire comme vous les gars maintenant pourrait utiliser Telnet ou Curl ou des commandes de ligne de commande seulement et fait envoyer des messages au serveur qui ne sont pas de la même erreur cochée. 

[00:25:05] Donc, ce qui est plus d'un d'interface utilisateur décision qu'il ne l'est une technique réel improvement-- la mise en œuvre côté client de quelque chose comme ça. Alors maintenant un rapide coup d'œil, mais Je vais laisser la parole à la marche en ligne à travers de celui-ci. En forme de deux, nous sommes allés en fait par et nettoyé le code un peu. Mais permettez-moi de céder la parole à un des vidéos que nous allons probablement Intégrer dans Pset8 qui montre juste vous un syntaxe similaire en utilisant une bibliothèque appelée jQuery, qui est un super, super bibliothèque populaire en JavaScript que franchement la plupart des gens il suffit d'utiliser ces jours et même de prêter à confusion JavaScript être lui-même. 

[00:25:37] Et elle tend à impliquer certains signes de dollar et des mots-clés comme le document ici entre parenthèses. Mais encore une fois, permettez-moi de céder la parole à des tutoriels plus lents en ligne plutôt que d'immobilisme en seulement syntaxe. Passons à quelque chose d'un peu plus frais en termes de demandes de ce. 

[00:25:50] Donc, en particulier, me laisser aller de l'avant et ouvrir ce ici. Allons. Nous y voilà. 

[00:25:59] Permettez-moi d'ouvrir cette image ici. Inutilement compliqué la recherche, mais il décrit une technique appelée AJAX-- Asynchronous JavaScript et XML, où X pour XML est en fait plus vraiment utilisé. Il a tendance à utiliser quelque chose autre appelé JSON. 

[00:26:13] Mais voici comment quelque chose comme Google Maps ou Google Earth fonctionne. Essayons à la volée, en fait. Permettez-moi aller de l'avant et ouvre jusqu'à Chrome sur mon navigateur. 

[00:26:21] Et laissez-moi aller dans, dire, maps.google.com. Et en fait, si vous êtes vieux suffit de se rappeler ce que, comme, MapQuest était comme retour dans la journée, et peut-être qu'ils fonctionnent toujours comme ça. Lorsque vous avez utilisé pour rechercher quelque chose-- 33 Oxford Street, Cambridge, Mass, Faisons this-- vous serait en fait, si vous voulu déplacer vers le haut et bas, gauche et droite, vous souhaitez ressembler à un grosse flèche sur le dessus, et il serait vous montrer un autre cadre de la carte ici. Ou vous faites un clic gauche et vous irait ici, ou un autre clic et vous voulez aller ici. Mais au lieu de ces jours, nous avons bien sûr juste prendre pour acquis que nous pouvons aller autour de Cambridge assez rapidement juste en cliquant et glissant. Mais remarquez, il ya quelques problèmes. 

[00:26:59] Si je fais cela assez rapidement, ce qui semble être le cas comme je traîne un peu trop vite pour l'ordinateur à tenir le rythme? Que voyez-vous? Ouais. 

[00:27:07] PUBLIC: Les pixels ne rafraîchissent pas. DAVID J. Malan: Le pixels Ne rafraîchissez pas. Il ya actually-- et vous pourrait voir cela, en fait, si vous regardez en ligne et pause ce fait ou ralentit les choses pour once-- vous verrez qu'il ya des des tuiles, des carrés, des rectangles ou que sont absents de la carte jusqu'à ce que une fraction de seconde plus tard, plus de données, plus d'images en fait apparaît à l'écran. Et en fait, si nous faisons cela en regardant jusqu'à Chrome's-- disons, Chrome-- Voyons. Nous ne pouvons pas faire cela. 

[00:27:31] Oh, oups. Ouvrons maps.google.com. Permettez-moi de rendre la fenêtre plus grande encore. 

[00:27:36] Retour à 33 Oxford Street. Quel a été le site, je suis sur récemment? Je devais ce, comme, diatribe privé à moi-même que je serais un message instantané alors tout ami qui était en ligne qui voulait l'entendre. Il ya un certain site Web. Je pense qu'il est donc Comcast-- un très grand fournisseur de services Internet américain. Vous pouvez, lors de la signature de nouveaux câbles service de modem ou d'un service de télévision par câble, ils ont une forme très raisonnable où ils vous demandent votre adresse. Et avoir cette incroyable fonctionnalité appelée auto complète, comme Google, qui commence à se remplir dans la réponse à votre question. 

[00:28:04] Le problème est, ils le font d'auto-complétion sur les premières choses que vous tapez. Donc, si vous commencez à taper dans 33, il va vous montrer littéralement chaque maison en Amérique qui commence avec le nombre 33 avant de continuer à attendez-vous à taper plus. Donc, si vous tapez 33 Oxford, puis il vous montre toutes les rues en Amérique qui a 33 Oxford son nom, indépendamment de la ville que vous êtes. 

[00:28:25] Et puis vous continuez à taper. Et enfin, il se rend compte qu'ils ne sont pas offre de service à votre domicile à Cambridge ou quelque chose comme ça. Mais le fait est, ce qui est le plus la mise en œuvre de stupide auto compléter jamais. 

[00:28:34] Et je vais juste hors sur cette tangente à nouveau. Mais il ya de bonnes manières à utiliser JavaScript et de mauvaises manières. Et pas nécessairement la meilleure. 

[00:28:40] Mais le point ici, avant cette tirade, était d'ouvrir les outils ici et ouvrir les outils de développement, comme nous l'avons encouragé avant, et de regarder le Réseau onglet que je clique vraiment rapide. Et remarquez tout un tas de requêtes get arrivé. Tout cela est arrivé parce que je traînais. 

[00:28:57] Et le plus probable, en effet beaucoup de ces lignes maintenant sont l'image JPEG slash types MIME ou types de contenu. En effet, ce chrome est de faire chaque fois que je clique et faites glisser, cliquez sur et la traînée, est qu'il est la réalisation, oh, je besoin d'aller demander à Google pour la tuile sur la carte qui est ici, télécharger rapidement via HTTP, et puis l'ajouter à la soi-disant DOM aux navigateurs Web dans l'arbre de la mémoire représentation de telle sorte que l'utilisateur, moi, voit que dalle mise à jour. Et cela est dû une technique appelée AJAX. Retour dans la journée, il a vraiment ce fut le cas que si vous voulu changer ce qui est sur l'écran, vous devez cliquer sur haut, bas, gauche, droit. Et puis une nouvelle page serait ouvrir. Mais ces jours-ci, tout est plus dynamique. Il arrive dans la façon dont nous les humains espérons qu'il serait effectivement de manière interactive. Et il y parvient en moyen d'une technique appelée AJAX, qui est peut-être le meilleur expliquée par un exemple. Tout d'abord, laissez-moi aller de l'avant et ouvrir un fichier appelé quote.php dans le code de distribution d'aujourd'hui. 

[00:29:53] Et puis laissez-moi faire whoops symbol--. Laissez-moi faire symbole = GOOG pour juste un peu de bouillon. Ou en fait, nous allons faire la l'un de l'Pset GRATUIT. Entrez. 

[00:30:05] Et maintenant remarqué que je serai de retour. Donc, cela est vraiment fichier PHP court que je écrit qui emprunte simplement le code à partir de la fonction de recherche de Pset7 et crache utilisant cette accolade et citations et la notation du côlon, apparemment, Le prix de l'action en cours pour la entreprise que vous passez via get. Donc ce qui est différent de plus de ce que nous avons fait dans cet avis je suis crachant littéralement ce qui ressemble à du code JavaScript. 

[00:30:27] En fait, ceci est un objet JavaScript. En fait, juste pour être plus clair, JavaScript Object Notation-- JSON-- est juste une façon élégante de dire que vous peut représenter des données en JavaScript beaucoup comme vous pouvez en PHP en utilisant des paires de valeurs de clés. Donc, si je voulais déclarer une variable en JavaScript à Zamyla représente, pour instance-- une structure pour Zamyla-- et nous l'appellerons étudiant, cette variable. Son identité est une maison est Winthrop, et le nom est Zamyla. 

[00:30:53] Mais je peux aussi avoir un tableau d'objets. Donc, si je voulais vraiment avoir un tableau en JavaScript contenant plusieurs de ces objets, ce temps représentant personnel, Je pourrais avoir ces trois morceaux de code de retour à dos à dos pour ces trois anciens membres du personnel. Ainsi, la syntaxe, assez similaire à both-- à PHP. Mais ce qui est particulièrement JavaScript. Il est la notation de l'objet. Alors, quel est ce utile? 

[00:31:17] Si je écrire du code qui crache JSON-- JavaScript Object Notation-- choses qui ressemble à ceci ou choses qui ressemble à la structure de Zamyla, Je peux effectivement utiliser cette dans les programmes que je vous écris. Permettez-moi de passer à ajax0.html. Et ce too-- pas beaucoup réfléchi à l'esthétique. Mais regardez ce qui arrive. 

[00:31:34] Permettez-moi aller de l'avant et tape gratuitement ici. Cliquez sur Obtenir un devis. Et remarquez l'URL n'a pas changé. Mais je l'ai fait obtenir un pop up avec apparemment penny prix de l'action d'aujourd'hui de 0,15 $. Donc pas si mal que ça. Mais la différence est que quelque part, ces données revient à moi directement. Mais prenons un pas vers quelque chose de plus familier. Dans la version d'un de cela, laissez-moi tapez à nouveau libre, cliquez sur Obtenir un devis, et maintenant-- oh, ce fut en fait la version jQuery. Alors laissez moi-- je ne l'ai pas avance rapide assez loin. Permettez-moi de passer à la version deux, qui est l'endroit où je voulais. Remarquez que ce que je fais ici. Je dois une web page-- super version simple d'une page Web vous pouvez utiliser aujourd'hui avec un champ de texte gratuitement ici et puis apparemment juste texte. 

[00:32:14] Ce ne sont pas une forme ici, apparemment. Mais si je clique reçois citation, remarque ma page web est en train de changer, comme si je viens de recevoir un nouveau message instantané ou comme si je viens d'emménager le carte et nécessaire pour obtenir davantage de données dynamiquement ajouté à la page web sans changement d'URL et l'utilisateur expérience se interrompu. En effet, je suis toujours à la exactement la même ajax2.html place--. 

[00:32:35] Alors regardons seulement à cet exemple et de voir comment cela se passe. Laissez-moi aller dans ajax2.html. Et remarquez la forme première. 

[00:32:44] Ici, je me tourne hors d'auto-complétion. Parfois, il se ennuyeux si le navigateur est d'essayer de vous montrer toute votre histoire. Ainsi, vous pouvez le faire en HTML par juste dire auto-complétion éteint. 

[00:32:53] Je vous ai donné ce texte un champ symbol-- plutôt, un ID de symbole. Et maintenant, cette fonctionnalité est intéressante. Nous avons pas parlé durée, mais vous pouvez penser comme une balise de paragraphe ou balise div. Il est ce qu'on appelle un dans l'élément de ligne, qui signifie que vous ne serez pas un paragraphe casser au-dessus et en dessous. Il va juste rester en ligne sans frapper l'équivalent de saisir. Donc, je l'ai donné ce morceau de HTML à déterminer un identificateur unique que je arbitrairement appelé prix. Et je dois un bouton Envoyer. 

[00:33:21] Parce que maintenant ici-- et cela est effectivement superbe incroyable de voir comment peu de code vous pouvez écrire à faire relativement soignée things-- remarquerez que je l'ai fait ici, si je défiler vers le haut à la tête de cette page. Je l'ai inclus dans la première ma tête une balise script qui fait référence en fait un Fichier JavaScript ailleurs. Ceci est de l'organisation qui écrit jQuery, et cela est juste de vous donner la dernière version de la bibliothèque jQuery. 

[00:33:42] Donc, cela est un peu comme forte inclure dans C ou exiger en PHP. Vous utilisez la balise script avec un attribut de la source. Mais maintenant mon propre code est va être bon ici. 

[00:33:52] Remarquez je utiliser une fonction appelée devis. Et il semble un peu cryptique au premier coup d'œil. Mais nous allons taquiner cet appart. Donnez-moi une variable appelée URL. Attribuez-lui littéralement cette chaîne. Ainsi, guillemets simples et doubles JavaScript me donne juste une chaîne. Qu'est-ce que le plus de faire? Concaténation. 

[00:34:08] Donc, cela est maintenant la syntaxe jQuery qui prend un peu de temps pour s'y habituer. Mais cette juste moyen va me chercher le DOM nœud dont l'identifiant unique est symbole. Le hashtag-il des moyens symbole d'identification unique. 

[00:34:21] Le symbole du dollar dans le les parenthèses juste signifier, envelopper cette jQuery dans une sorte de sauce secrète afin vous obtenez des fonctionnalités supplémentaires. Et puis .val est apparemment une fonction, ou comme on dit maintenant, une méthode à l'intérieur de ce noeud qui vous donne juste la valeur. Donc en bref, laid et confusion que cela puisse paraître à première vue, Cela signifie simplement obtenir de l'utilisateur a tapé dans, le mettre à la fin de la chaîne il en concaténant. Ce est tout. 

[00:34:43] Alors maintenant, trois dernières lignes. Vous pouvez presser beaucoup de des fonctionnalités de trois lignes. Ce signe de dollar, en tant que de côté, est juste un surnom pour une variable globale spéciale appelé littéralement jQuery. 

[00:34:55] Dollar sign semble juste cool. Ainsi, la communauté jQuery juste genre de utilisée comme leur symbole spécial. Cela ne signifie pas ce que cela signifie en PHP. En JavaScript, signe de dollar est tout comme une lettre de l'alphabet ou un certain nombre de variables. 

[00:35:07] Vous pouvez juste avoir comme nom. Semble juste cool. Donc la communauté adopté comme un surnom pour leur propre bibliothèque appelée jQuery. 

[00:35:13] Et il est super populaire. Donc obtenir JSON est exactement cela. Il est une fonction que le gens de jQuery écrit qui obtient JSON à partir d'un Server-- JavaScript Object Notation. D'après ce que l'URL est ce que ça va pour obtenir cette information? Apparemment, à partir de cette URL ici. 

[00:35:27] Et que devrait faire le navigateur comme dès qu'il revient cette réponse? Et ceci est la magie de AJAX, ainsi speak-- Asynchronous JavaScript dans XML. Il est difficile de voir avec un tel exemple simple que nous avons eu ici. 

[00:35:41] Mais ceci est asynchrone en le sens que mon code lorsque exécuté envoyé un message à la serveur pour aller me chercher du JSON. Et il est arrivé super rapide que je suis une réponse. Mais ce qui est intéressant est que cette ligne de code n'a pas accrocher mon ordinateur. 

[00:35:55] Je ne vois pas une icône de la filature. Je ne perds pas le capacité de se déplacer ma souris. Mon navigateur était en fait parfaitement bien. 

[00:36:01] Parce que la façon gère JavaScript la réponse du serveur est la suivante. Vous enregistrez ce que vous appelez une fonction de rappel, qui signifie simplement que, hey, JavaScript. Dès que le serveur répond avec JSON, se il vous plaît appeler cette fonction anonyme. 

[00:36:18] Et se il vous plaît passé dans cette fonction toutes les chaînes que le serveur cracher comme un argument appelé données. Donc, en d'autres termes, si Je l'assemblage dynamique un quote.php URL passant dans cette symbole comme Free ou GOOG ou quoi, Je puis dire JavaScript aller chercher cette URL. Rappelez-vous que le navigateur va retourner quelque chose qui ressemble à l'heure, à ce que nous avons vu. 

[00:36:42] Et ce que le second argument ici pour obtenir JSON dit est d'appeler cette fonction lorsque le serveur revient si elle est de 10 millisecondes à partir de maintenant ou 10 secondes à partir de maintenant. Et dès que vous le faites, ajouter le prix de la page. Cette syntaxe ici juste signifie aller chercher le noeud de l'arbre dont l'identificateur unique est price-- ce laps nous l'avons vu. 

[00:37:01] Cette méthode appelée HTML juste dit, allez remplacer le code HTML qui est là avec data.price. Quel est data.price? Eh bien, le navigateur, rappelons-le, m'a montré ce retour. Donc, ce sont des données. 

[00:37:14] Et donc il est un peu cryptique pour voir les virgules ici. Mais en fait, permettez-moi de le faire. Permettez-moi de coller ce très vite dans gedit et montrer ce que nous avons montré La structure de Zamyla plus tôt. 

[00:37:27] Qu'est-ce que le serveur envoie dos est un petit objet qui ressemble à ceci. Et si data.price est juste me donner 0,1515. Donc, beaucoup de mouvement ici les pièces en une seule fois. 

[00:37:39] Mais les faits marquants est que nous avons cette capacité à faire HTTP supplémentaire requêtes en utilisant JavaScript sans avoir à recharger la page. Et puis nous pouvons changer la page Web à la volée. Et il se trouve que JavaScript et d'autres langages peut être utilisé maintenant non seulement à muter pages Web, mais en fait écrire des logiciels dans un ordinateur réel, ne se limitent pas à Chrome ou similaire. 

[00:38:00] En fait, si-- Colton, diriez-vous vous joindre à nous remonter ici avec votre code de laboratoire, et Chang ainsi? Allons de l'avant, après avoir parlé fonctions anonymes et rappels et vraiment tenter le sort ici avec une démonstration en direct avec des saignements technologie de pointe, l'un des ces dispositifs Elite mouvement. Maintenant, ce dispositif, rappel, est un petit appareil USB ainsi que that-- est beautiful-- qui se raccorde à vos ports USB. 

[00:38:25] Et puis il constitue une entrée sous la forme de gestes humains par la détection en utilisant des rayons infrarouges, essentiellement, les mouvements de votre bras. Ainsi, alors que ce que Maria a essayé sur avant était musclé, fait sentir ce qui change votre bras, cette base est infrarouge. Donc, il est à la recherche pour les mouvements dans la sorte de sphère d'un pied ou deux du dispositif lui-même. 

[00:38:46] Alors pourquoi je prends pas un coup de couteau à la première? Et allons-y et jetez vous sur les frais généraux ici. Mettons donc l'ordinateur portable de Colton ici. Nous avons Andrew sur le téléviseur. Et que voulez-vous que je fasse d'abord? 

[00:39:00] COLTON: Aller de l'avant et juste mettre vos mains sur ce gars et vous verrez quelques paillettes fabuleux. 

[00:39:04] DAVID J. Malan: Très bien. Tout cela se passe en temps réel. D'accord. Tout droit, et oui. So nice. Très bien, que pouvons-nous faire? 

[00:39:15] COLTON: Allez à l'écran suivant et voir. 

[00:39:17] DAVID J. Malan: Très bien. 

[00:39:19] COLTON: Un petit jeu amusant où vous aurez à faire des robots. 

[00:39:21] DAVID J. Malan: Très bien, si ce est faux mains me montrant ce qu'il faut faire. COLTON: Oui Alors allez-y et de saisir l'un des blocs et mettre sur le dessus du corps de ce robot. DAVID J. Malan: Oh, il est ma main. Oh. OK, adorable. Attendez une minute, OK. Nous y voilà. 

[00:39:41] COLTON: Je fait un sur accident. 

[00:39:43] DAVID J. Malan: OK, je vais prendre ce type. Bon sang! Lorsque nous pratiquions ce dernier nuit, vous savez ce que cela a dégénéré en? 

[00:39:51] Comme ça. D'accord. Suivant un? 

[00:39:55] COLTON: Bien sûr. 

[00:39:56] DAVID J. Malan: Très bien, et il ya une troisième. Bien. COLTON: Et dans celui-ci, vous obtenez to-- DAVID J. Malan: Oh, est belle celle-ci. COLTON: --yeah, chercher en dehors de cette fleur. DAVID J. Malan: OK. Non? Omission. 

[00:40:14] COLTON: Oh, là vous allez. 

[00:40:15] DAVID J. Malan: Ah, coup d'oeil. Très agréable. Eh bien, pourquoi ne pas «nous prenons à un bénévole ici qui voudrait venir sur place. Que diriez-là dans le vert, est-il? 

[00:40:27] Tout droit, et nous allons have-- au lieu de cela, certains d'entre vous pourrait connaître ce jeu ici-- couper la corde, peut-être? Voyons. Nous avons nos verres par ici? 

[00:40:37] D'accord. Merci. Quel est votre nom? 

[00:40:39] PUBLIC: Laura. 

[00:40:40] DAVID J. Malan: Laura? Agréable à voir. Si cela ne vous dérange pas de mettre Google verre sur vos lunettes. Ceci est Colton. 

[00:40:46] COLTON: Salut. Ravi de vous rencontrer. 

[00:40:48] DAVID J. Malan: OK, viens autour. Très bien, alors ce que vous allez faire ici, ayant joué auparavant, est mis votre main sur le Leap Motion ici. Et maintenant votre flèche doit se déplacer. Oh, Non. 

[00:40:57] PUBLIC: Non 

[00:40:58] DAVID J. Malan: Nous ne veulent pas quitter encore. OK, attendre. Par ici. Donc remarquerez que vous maintenez votre doigt sur quelque chose, la souris commence à passer au vert, qui est de savoir comment vous avez cliqué. 

[00:41:06] Donc planer sur Play. Et d'un seul doigt est très bien. Et maintenant, cliquez sur le petit bonhomme vert sur la gauche. Et maintenant tenir jusqu'à ce qu'il remplisse en vert. Bon. Maintenant, comme, un niveau en haut. 

[00:41:16] PUBLIC: Oui, nous voulons un niveau, ici. 

[00:41:20] DAVID J. Malan: Bon. OK, donc tout ce que vous avez à faire est de couper la corde. Votre curseur est le blanc là-bas. 

[00:41:28] Très agréable. Très bien, il est sur le point de devenir plus difficile. Donc, maintenez votre doigt sur la prochaine maintenant. Bon. Celui-ci est difficile. 

[00:41:39] PUBLIC: Oh merde. D'accord. Il veut aller dans ce sens. Oh merde, that-- 

[00:41:44] DAVID J. Malan: Ouais. Objectif secondaire est d'obtenir toutes les étoiles. Tout droit, à côté. 

[00:41:53] Voyons voir si vous pouvez obtenir cette troisième. Bon. OK, aller là-bas. 

[00:42:06] Bien sûr. Oh, très bien. Bien. 

[00:42:11] Alors, pourquoi ne nous levions pas ici aujourd'hui? Laissé à personne sur place qui veut jouer. Merci beaucoup à Laura notre bénévole. Et nous allons vous voir lundi. 

[00:42:18] PUBLIC: Vous voulez sans doute ces arrière. 

[00:42:21] SPEAKER 2: Lors de la prochaine CS50--