1 00:00:00,000 --> 00:00:02,862 >> [Jouer de la musique] 2 00:00:02,862 --> 00:00:10,030 3 00:00:10,030 --> 00:00:11,580 >> DAVID MALAN: Ceci est CS50. 4 00:00:11,580 --> 00:00:12,880 Ceci est le début de la neuvième semaine. 5 00:00:12,880 --> 00:00:15,797 Et c'est ce qui aurait été 200e anniversaire de M. Boole. 6 00:00:15,797 --> 00:00:17,630 Donc, ce sont les boursiers à qui nous avons fait allusion 7 00:00:17,630 --> 00:00:21,800 pas mal de fois sur l'utilisation de Les variables booléennes vrai et faux, 8 00:00:21,800 --> 00:00:22,910 1 et 0 et tel. 9 00:00:22,910 --> 00:00:25,270 Et ce fut de Google Pour lui rendre hommage aujourd'hui. 10 00:00:25,270 --> 00:00:26,489 Il aurait eu 200. 11 00:00:26,489 --> 00:00:28,280 Donc, si vous souhaitez joindre à nous pour le déjeuner CS50, 12 00:00:28,280 --> 00:00:30,279 jetez un oeil à le lien sur le site Web du cours. 13 00:00:30,279 --> 00:00:33,580 Et ces visages et les amis comme ceux-ci vous attendent ici à Cambridge. 14 00:00:33,580 --> 00:00:35,360 Faces comme celles-ci vous attendent à New Haven. 15 00:00:35,360 --> 00:00:37,800 Et, de fait, Ken à New Haven aimablement fait 16 00:00:37,800 --> 00:00:41,594 ce qu'on appelle un GIF animé d'Eli ici lors d'un récent lunch-- un GIF est encore 17 00:00:41,594 --> 00:00:44,260 un autre format de fichier graphique, avec lequel vous êtes familiar-- que 18 00:00:44,260 --> 00:00:46,300 regarde un petit quelque chose de ce genre. 19 00:00:46,300 --> 00:00:48,179 Alors juste une séquence de-- OK. 20 00:00:48,179 --> 00:00:49,720 Personne ici à Cambridge rit. 21 00:00:49,720 --> 00:00:51,720 Mais à New Haven, cet est vraiment drôle, non? 22 00:00:51,720 --> 00:00:52,350 Bien. 23 00:00:52,350 --> 00:00:53,940 >> Donc, ne nous rejoindre là-bas. 24 00:00:53,940 --> 00:00:55,900 Ici, à Harvard, spécifiquement, ce mercredi, 25 00:00:55,900 --> 00:00:59,480 si vous êtes un étudiant en deuxième année ou freshman even-- ou même la pensée junior-- de décision 26 00:00:59,480 --> 00:01:01,563 un interrupteur dans l'ordinateur la science, savoir que il y 27 00:01:01,563 --> 00:01:04,440 être un CS conseille juste ce Mercredi, peu de temps après la classe 28 00:01:04,440 --> 00:01:08,040 à 16h00 dans l'ordinateur bâtiment des sciences Maxwell Dworkin. 29 00:01:08,040 --> 00:01:11,890 Nous allons mettre cela sur le cours de site d'ici demain, aussi bien. 30 00:01:11,890 --> 00:01:14,430 Donuts, je l'ai dit, seront servis. 31 00:01:14,430 --> 00:01:15,180 >> Bien. 32 00:01:15,180 --> 00:01:18,790 Story-- tellement drôle que je poussais autour sur l'Internet, 33 00:01:18,790 --> 00:01:23,575 et je trouvé quelques vieilles archives de mon ancien site. 34 00:01:23,575 --> 00:01:25,950 Et il se contourner ce out-- temps, il semble très opportune 35 00:01:25,950 --> 00:01:28,910 car je crois que les élections de communications unifiées sont sur le point d'engins de nouveau. 36 00:01:28,910 --> 00:01:32,230 Donc, je courais pour UC, perdu lamentablement. 37 00:01:32,230 --> 00:01:34,770 Et peut-être cela était en partie pourquoi. 38 00:01:34,770 --> 00:01:37,600 Donc, ce fut mon site à l'époque. 39 00:01:37,600 --> 00:01:40,477 Pour une raison quelconque, je pensais qu'il était une bonne idée, avant de dire aux gens 40 00:01:40,477 --> 00:01:43,310 ce que ma plate-forme était et pourquoi ils devraient voter pour moi, qu'ils ont 41 00:01:43,310 --> 00:01:47,770 cliquer pour entrer de découvrir que informations, qui, rétrospectivement, est 42 00:01:47,770 --> 00:01:48,660 sorte de chair de poule. 43 00:01:48,660 --> 00:01:50,910 Je ne sais pas vraiment ce que cela était. 44 00:01:50,910 --> 00:01:53,140 >> Mais certainement il n'a pas aider ma campagne. 45 00:01:53,140 --> 00:01:56,874 Je ai aussi trouvé que par la haute année-- je devais ce calendrier Muppet. 46 00:01:56,874 --> 00:01:58,540 Muppets étaient sorte de en vogue à l'époque. 47 00:01:58,540 --> 00:01:59,456 Ou peut-être qu'ils ne sont pas. 48 00:01:59,456 --> 00:02:01,790 Je devais un calendrier Muppet à l'époque. 49 00:02:01,790 --> 00:02:04,860 Et je pensais que ce serait cool de nom mon ordinateur sur le réseau de Harvard 50 00:02:04,860 --> 00:02:07,460 frogman.student.harvard.edu. 51 00:02:07,460 --> 00:02:10,370 À l'époque, nous avions tous unique les noms d'hôte identifiables. 52 00:02:10,370 --> 00:02:13,150 Et vous pourriez choisir une vanité nommer à la place de votre propre nom. 53 00:02:13,150 --> 00:02:15,580 Et je suis allé avec l'homme-grenouille pour une raison quelconque. 54 00:02:15,580 --> 00:02:19,040 >> Et puis je started-- je passais beaucoup de temps en cliquant sur ces liens à travers 55 00:02:19,040 --> 00:02:20,280 ce matin. 56 00:02:20,280 --> 00:02:24,690 Et ce fut ma page à propos, qui maintenant sorte de semble adorable. 57 00:02:24,690 --> 00:02:28,210 Mais il témoigne aussi de tout dans quelle mesure la technologie a venir. 58 00:02:28,210 --> 00:02:30,310 Je veux dire, retour dans la journée, un 486 était quelque chose. 59 00:02:30,310 --> 00:02:34,090 Ces jours-ci, il est super, super, super lent et bien moins 60 00:02:34,090 --> 00:02:36,216 que vous pourriez avoir dans votre propres poches de nos jours. 61 00:02:36,216 --> 00:02:38,465 Il ya plus de là que était encore plus embarrassant. 62 00:02:38,465 --> 00:02:39,770 Je vais donc en rester là. 63 00:02:39,770 --> 00:02:42,640 Mais ce fut ma première incursion dans web-- oh, non. 64 00:02:42,640 --> 00:02:43,180 Cela n'a pas été. 65 00:02:43,180 --> 00:02:47,000 Ma première incursion réel dans la programmation web était ce site, dont je viens oublié. 66 00:02:47,000 --> 00:02:50,620 À un certain point, je appris à faire des images de fond répétitives. 67 00:02:50,620 --> 00:02:55,260 Et donc je trouvais ce pavage efficace, comme joueur de hockey, le football et le golf 68 00:02:55,260 --> 00:02:58,040 boule, ou quelle qu'elle soit pour le site Frosh GI. 69 00:02:58,040 --> 00:03:01,390 Et ce fut fait, véritablement la premier projet basé sur le web, je pris on-- 70 00:03:01,390 --> 00:03:03,880 Je pense que peut-être sophomore année, année-- juniors 71 00:03:03,880 --> 00:03:07,622 après avoir pris CS50 et CS51, un des classes de suivi sur les communes. 72 00:03:07,622 --> 00:03:09,330 Je remarquai dans la recherche à travers les archives 73 00:03:09,330 --> 00:03:12,150 que l'un de mes successeurs et amis, Lee, sorte de changé 74 00:03:12,150 --> 00:03:13,480 le droit d'auteur à lui-même. 75 00:03:13,480 --> 00:03:17,520 Mais ce fut en effet quelque chose qui Je dois posséder l'embarras. 76 00:03:17,520 --> 00:03:19,370 Mais à l'époque, ce a été le premier site, 77 00:03:19,370 --> 00:03:22,220 comme je le disais il ya quelques semaines, qui pourrait freshman 78 00:03:22,220 --> 00:03:24,350 inscrivez-vous pour les sports intra-muros ici. 79 00:03:24,350 --> 00:03:27,950 Et il se trouve que les images de fond 80 00:03:27,950 --> 00:03:29,530 comme ça ne sont pas une bonne idée. 81 00:03:29,530 --> 00:03:31,840 Mais le web était nouveau, et nous étions tous expérimentons. 82 00:03:31,840 --> 00:03:34,310 Et voici ce que je apparemment fait à l'époque. 83 00:03:34,310 --> 00:03:34,810 Bien. 84 00:03:34,810 --> 00:03:38,020 Alors sans plus tarder, nous passons engrenages aujourd'hui pour vous donner, vraiment, 85 00:03:38,020 --> 00:03:42,250 la dernière pièce que vous pourriez trouver particulièrement utile pour les projets finaux 86 00:03:42,250 --> 00:03:44,780 mais aussi que va commencer à faire le world wide web entier 87 00:03:44,780 --> 00:03:46,680 se sentir un peu plus compréhensible. 88 00:03:46,680 --> 00:03:49,460 En effet, nous allons mettre en place une langue de plus de programmation 89 00:03:49,460 --> 00:03:52,474 appelé JavaScript qui est semblable et différent de différentes façons 90 00:03:52,474 --> 00:03:54,140 de langues, nous avons regardé jusqu'ici. 91 00:03:54,140 --> 00:03:55,807 >> Donc C, le rappel, est-ce langage compilé. 92 00:03:55,807 --> 00:03:57,473 Vous avez à courir par un compilateur. 93 00:03:57,473 --> 00:03:59,810 Vous obtenez le code source d'opposition code, ou zéros et de uns. 94 00:03:59,810 --> 00:04:03,000 Et ce sont des zéros et ceux qui votre CPU, Central Processing Unit, 95 00:04:03,000 --> 00:04:04,360 fait comprendre. 96 00:04:04,360 --> 00:04:06,610 PHP, en revanche, est pas un langage compilé. 97 00:04:06,610 --> 00:04:08,772 Il ya un quoi? 98 00:04:08,772 --> 00:04:09,980 Il est un langage interprété. 99 00:04:09,980 --> 00:04:11,750 Donc, il ya un programme appelle un interpréteur qui 100 00:04:11,750 --> 00:04:13,708 a lire it-- haut en en bas, de gauche à droite- 101 00:04:13,708 --> 00:04:16,519 et comprendre ce que tous votre syntaxe fait et signifie, 102 00:04:16,519 --> 00:04:20,200 que ce soit une boucle ou une condition ou tout autre numéro de programmation 103 00:04:20,200 --> 00:04:20,740 construit. 104 00:04:20,740 --> 00:04:22,210 Voilà donc un langage interprété. 105 00:04:22,210 --> 00:04:23,910 >> Ensuite, nous avons introduit HTML. 106 00:04:23,910 --> 00:04:26,440 Et HTML est même pas un langage de programmation. 107 00:04:26,440 --> 00:04:28,110 Nous aimerions appelons quoi? 108 00:04:28,110 --> 00:04:31,650 Un langage de balisage, qui est juste une sorte de fantaisie façon de dire qu'il 109 00:04:31,650 --> 00:04:35,820 n'a pas constructions de programmation comme nous l'avons vu, même de retour dans la journée de Scratch. 110 00:04:35,820 --> 00:04:36,720 Il n'y a pas de boucles. 111 00:04:36,720 --> 00:04:37,920 Il n'y a pas de conditions. 112 00:04:37,920 --> 00:04:40,820 Il est vraiment une langue sur le marquage de vos données 113 00:04:40,820 --> 00:04:43,620 et le formatage ou la structuration d'une certaine façon. 114 00:04:43,620 --> 00:04:46,147 >> CSS, quant à lui, de la même pas un langage de programmation. 115 00:04:46,147 --> 00:04:47,730 Il est même plus esthétiquement orienté. 116 00:04:47,730 --> 00:04:50,470 Et il vous permet de trier de peaufiner des choses comme la taille et les couleurs police 117 00:04:50,470 --> 00:04:51,850 et de placement et tout ça. 118 00:04:51,850 --> 00:04:52,370 Puis nous avons eu 119 00:04:52,370 --> 00:04:53,160 >> SQL. 120 00:04:53,160 --> 00:04:56,010 Donc SQL est en effet une programmation la langue dans un certain sens, 121 00:04:56,010 --> 00:04:59,330 bien adapté spécifiquement aux bases de données. 122 00:04:59,330 --> 00:05:03,347 Mais même si nous ne vous présentons sélectionner et insérer et supprimer et mettre à jour 123 00:05:03,347 --> 00:05:05,430 et quelques autres, avère vous pouvez réellement 124 00:05:05,430 --> 00:05:07,380 écrire ou fonctions procédures, car ils sont 125 00:05:07,380 --> 00:05:11,270 appelé, dans SQL qui ressemblent et agissent tout à fait comme les fonctions PHP et C. 126 00:05:11,270 --> 00:05:12,390 Savent que ceux qui existent donc. 127 00:05:12,390 --> 00:05:15,348 Mais nous ne même pas la peine avec eux comme nous suffit de gratter la surface ici. 128 00:05:15,348 --> 00:05:18,600 Et puis JavaScript, le dernier des nos langues officiellement présentés. 129 00:05:18,600 --> 00:05:21,029 Donc JavaScript, aussi, est un langage interprété. 130 00:05:21,029 --> 00:05:23,070 Et ceux qui connaissent, font vous voulez distinguer 131 00:05:23,070 --> 00:05:26,960 avec une certaine caractéristique à la fois C et PHP? 132 00:05:26,960 --> 00:05:28,300 Qu'est-ce qui le rend différent? 133 00:05:28,300 --> 00:05:29,650 >> PUBLIC: Il est pas compilé. 134 00:05:29,650 --> 00:05:29,930 >> DAVID MALAN: Dites à nouveau? 135 00:05:29,930 --> 00:05:31,200 >> PUBLIC: Il est pas compilé. 136 00:05:31,200 --> 00:05:31,930 >> DAVID MALAN: Il est pas compilé. 137 00:05:31,930 --> 00:05:33,450 Donc, elle aussi, est interprété. 138 00:05:33,450 --> 00:05:34,760 Donc, il est pas compilé. 139 00:05:34,760 --> 00:05:37,210 Mais qui le rend un peu comme PHP. 140 00:05:37,210 --> 00:05:39,545 Mais il est encore différent de PHP d'une certaine façon frappante, 141 00:05:39,545 --> 00:05:40,920 au moins dans la façon dont nous allons l'utiliser. 142 00:05:40,920 --> 00:05:41,205 Ouais? 143 00:05:41,205 --> 00:05:41,940 >> PUBLIC: Il fonctionne côté client. 144 00:05:41,940 --> 00:05:44,000 >> DAVID MALAN: Il fonctionne côté client, le plus souvent. 145 00:05:44,000 --> 00:05:47,190 Voilà en effet le distinctif caractéristique pour nous en ce moment. 146 00:05:47,190 --> 00:05:51,170 C était côté serveur dans le sens que nous avons tout fait dans CS50 IDE. 147 00:05:51,170 --> 00:05:53,630 PHP a été jusqu'ici côté serveur dans la mesure où 148 00:05:53,630 --> 00:05:56,550 comme elle, aussi, obtient interpreted-- pas compilé, mais interpreted-- 149 00:05:56,550 --> 00:06:00,690 l'intérieur CS50 IDE, ce qui bien sûr est juste un ou plusieurs serveurs dans le nuage. 150 00:06:00,690 --> 00:06:03,070 >> Mais JavaScript, même si vous vous allez 151 00:06:03,070 --> 00:06:07,000 pour commencer à écrire pour, disons, pset huit et peut-être définitive projects-- vous êtes 152 00:06:07,000 --> 00:06:09,620 aller à droite dans CS50 IDE et l'enregistrer 153 00:06:09,620 --> 00:06:14,760 dans des fichiers au sein CS50 IDE, IDE CS50 et, à leur tour, les serveurs cloud 154 00:06:14,760 --> 00:06:19,160 sur lequel il est hébergé, ne vont pas d'interpréter ou d'exécuter votre code. 155 00:06:19,160 --> 00:06:23,880 Au contraire, il va être envoyé dans forme inchangée jusqu'au navigateur. 156 00:06:23,880 --> 00:06:26,990 Et ça va être ensuite IE ou Chrome ou Firefox ou Safari 157 00:06:26,990 --> 00:06:30,697 ou quel que soit ce que l'interprète fait il, de haut en bas, de gauche à droite. 158 00:06:30,697 --> 00:06:32,780 Donc, la clé qui distingue caractéristique pour aujourd'hui 159 00:06:32,780 --> 00:06:36,110 est que JavaScript est côté client PHP et, par exemple, 160 00:06:36,110 --> 00:06:37,690 a été côté serveur. 161 00:06:37,690 --> 00:06:40,920 Maintenant, cela a des implications intéressantes pour, comme, la propriété intellectuelle 162 00:06:40,920 --> 00:06:42,660 et qui peut réellement voir votre code. 163 00:06:42,660 --> 00:06:44,860 Et en effet, vous pouvez aller sur le web et voir plus 164 00:06:44,860 --> 00:06:47,530 tout code que quelqu'un a écrit en JavaScript. 165 00:06:47,530 --> 00:06:50,230 Parfois, il est lisible, il est parfois masquée. 166 00:06:50,230 --> 00:06:52,550 Mais plus sur cela en temps voulu. 167 00:06:52,550 --> 00:06:57,530 >> Donc JavaScript, joliment assez, est super-similaire, syntaxiquement, à C. 168 00:06:57,530 --> 00:06:59,364 Et tout comme PHP, il n'y a aucune fonction principale. 169 00:06:59,364 --> 00:07:02,113 Si vous voulez commencer à écrire Code JavaScript, comme vous le verrez aujourd'hui, 170 00:07:02,113 --> 00:07:03,270 vous venez de commencer à l'écrire. 171 00:07:03,270 --> 00:07:06,910 Mais il est, vous verrez, en particulier utile dans le contexte des navigateurs web. 172 00:07:06,910 --> 00:07:09,820 Cependant, ma petite disclaimer-- habituellement l'heure, à 173 00:07:09,820 --> 00:07:13,790 a été de dire que vous ne pouvez plus en plus usage aujourd'hui JavaScript côté serveur 174 00:07:13,790 --> 00:07:17,655 en utilisant un cadre de fantaisie appelé Node.js que certains des propres applications de CS50 175 00:07:17,655 --> 00:07:18,280 sont écrits dans. 176 00:07:18,280 --> 00:07:20,640 Vérifiez 50 utilise effectivement Node.js. 177 00:07:20,640 --> 00:07:24,140 Mais nous allons nous concentrer sur JavaScript côté client de maintenant. 178 00:07:24,140 --> 00:07:26,750 >> Voici donc un ensemble de conditions en PHP. 179 00:07:26,750 --> 00:07:29,350 Désolé, in-- effectivement, que déclaration, trop est correcte. 180 00:07:29,350 --> 00:07:32,200 Voici également un ensemble de conditions en JavaScript. 181 00:07:32,200 --> 00:07:35,560 Syntaxiquement, il est identique à C et PHP. 182 00:07:35,560 --> 00:07:39,040 Les expressions de M. Boole sont, De même, syntaxiquement 183 00:07:39,040 --> 00:07:41,190 identique à la fois C et PHP. 184 00:07:41,190 --> 00:07:44,100 Nous avons aussi des commutateurs JavaScript qui semblent identiques. 185 00:07:44,100 --> 00:07:46,350 Nous avons pour les boucles qui sont structuré de manière identique, 186 00:07:46,350 --> 00:07:48,140 tout en boucles, faire tout en boucles. 187 00:07:48,140 --> 00:07:49,980 >> Celui-ci est un peu différent. 188 00:07:49,980 --> 00:07:53,120 PHP avait le pour chaque construction que vous utilisez peut-être 189 00:07:53,120 --> 00:07:55,320 ou vont utiliser dans pset sept, peut-être. 190 00:07:55,320 --> 00:07:59,460 JavaScript a cette version spéciale de pour le cas où vous dites littéralement quelque chose 191 00:07:59,460 --> 00:08:03,864 comme par clé variable dans l'objet, qui est une façon très succincte de dire, 192 00:08:03,864 --> 00:08:06,780 si je dois un object-- et nous allons parler de ces nouveau dans un moment-- 193 00:08:06,780 --> 00:08:10,370 et je tiens à itérer sur tous les des paires de clés de valeur à l'intérieur, 194 00:08:10,370 --> 00:08:13,620 Je ne dois pas comprendre comment les index numériquement avec zéro, un, 195 00:08:13,620 --> 00:08:14,580 deux trois. 196 00:08:14,580 --> 00:08:15,900 >> Je peux littéralement dire cela. 197 00:08:15,900 --> 00:08:20,740 Et à chaque itération, JavaScript pour moi vais mettre à jour la clé variable 198 00:08:20,740 --> 00:08:24,810 être la première touche, puis sur la touche suivante, puis sur la touche suivante, puis la touche suivante, 199 00:08:24,810 --> 00:08:25,510 et ainsi de suite. 200 00:08:25,510 --> 00:08:30,000 Et je peux obtenir à sa valeur en traitant un objet en JavaScript, comme nous le verrons, 201 00:08:30,000 --> 00:08:32,584 comme si elle est un tableau associatif en PHP. 202 00:08:32,584 --> 00:08:35,750 En effet, si vous avez finalement enveloppé votre esprit autour de ce qui est un tableau associatif 203 00:08:35,750 --> 00:08:40,140 en PHP, vous pouvez penser pour l'instant que identique à un objet en JavaScript. 204 00:08:40,140 --> 00:08:42,030 Mais cela a un peu de une simplification excessive. 205 00:08:42,030 --> 00:08:47,230 >> Arrays ressemblent, bien assez, identiques à PHP, sauf pour un caractère. 206 00:08:47,230 --> 00:08:51,425 Il ya une chose qui manque ici que nous avons vu la semaine dernière avec PHP. 207 00:08:51,425 --> 00:08:52,050 Ce qui est omis? 208 00:08:52,050 --> 00:08:53,310 Ouais? 209 00:08:53,310 --> 00:08:54,090 Aucun signe de dollar. 210 00:08:54,090 --> 00:08:56,240 Donc, nous sommes de retour à un monde plus normal où 211 00:08:56,240 --> 00:08:58,050 les variables ne sont pas des signes de dollar. 212 00:08:58,050 --> 00:09:00,810 Mais vous faites précéder les var, généralement. 213 00:09:00,810 --> 00:09:02,230 Et var signifie variable. 214 00:09:02,230 --> 00:09:06,440 Et tout comme PHP est lâche typed-- lequel il ya des types, 215 00:09:06,440 --> 00:09:10,120 il ya des nombres et des chaînes et les flotteurs et ainsi forth-- 216 00:09:10,120 --> 00:09:11,570 JavaScript doit similaire types. 217 00:09:11,570 --> 00:09:15,470 Mais il est faiblement typé dans que nous le les programmeurs ne doivent pas les spécifier. 218 00:09:15,470 --> 00:09:18,980 Nous devons juste être conscient que les différents types existent. 219 00:09:18,980 --> 00:09:21,690 >> Variables, meanwhile-- voici comment nous pourrions déclarer "Bonjour, monde" 220 00:09:21,690 --> 00:09:22,230 comme une chaîne. 221 00:09:22,230 --> 00:09:24,890 Notez qu'il est identique à PHP, mais aucun signe de dollar. 222 00:09:24,890 --> 00:09:27,120 Et ceci est quelque chose que nous allons commencer à voir plus aujourd'hui, 223 00:09:27,120 --> 00:09:30,990 par lequel vous avez un objet avec des clés et des valeurs. 224 00:09:30,990 --> 00:09:32,990 Et si vous voulez essayer de déduire de la dernière week-- 225 00:09:32,990 --> 00:09:34,730 la syntaxe est un peu différent. 226 00:09:34,730 --> 00:09:39,740 Mais un peu de bon sens check-- combien touches cet objet ne semblent avoir? 227 00:09:39,740 --> 00:09:40,850 Donc, je vois quatre. 228 00:09:40,850 --> 00:09:43,560 Je vois deux. 229 00:09:43,560 --> 00:09:44,680 >> Donc, il est en fait deux. 230 00:09:44,680 --> 00:09:47,260 Donc, cela est une collection de deux paires clé-valeur. 231 00:09:47,260 --> 00:09:49,820 La clé est le symbole dont la valeur est FB. 232 00:09:49,820 --> 00:09:52,620 La clé est le prix dont la valeur est 101,53. 233 00:09:52,620 --> 00:09:54,230 Donc, ce sont deux paires clé-valeur. 234 00:09:54,230 --> 00:09:58,120 Et rappelez-vous, PHP-- et cela est nouveau juste une sorte de différence syntaxique. 235 00:09:58,120 --> 00:10:00,170 Il est pas tout à fait intellectuellement intéressant. 236 00:10:00,170 --> 00:10:04,610 PHP aurait pu écrire ce même chose comme citant follows--, est égal. 237 00:10:04,610 --> 00:10:06,730 Et je modifier ces à crochets. 238 00:10:06,730 --> 00:10:11,240 Et puis-je changer cela un mot cité, le «prix». 239 00:10:11,240 --> 00:10:12,500 Et puis je ne l'utilise un colon. 240 00:10:12,500 --> 00:10:15,060 Qu'est-ce que je sers la semaine dernière? 241 00:10:15,060 --> 00:10:18,290 Ouais, le signe égal flèche notation funky. 242 00:10:18,290 --> 00:10:21,470 >> Et puis je l'ai fait la même chose ici. 243 00:10:21,470 --> 00:10:23,580 Même chose ici. 244 00:10:23,580 --> 00:10:24,240 Et c'est tout. 245 00:10:24,240 --> 00:10:27,752 Donc, il est très bien si cela n'a pas vraiment coulé dans la mémoire juste 246 00:10:27,752 --> 00:10:29,960 encore parce qu'il est vraiment intellectuellement inintéressant. 247 00:10:29,960 --> 00:10:31,660 Il est juste différences syntaxiques. 248 00:10:31,660 --> 00:10:33,230 Mais les idées sont exactement les mêmes. 249 00:10:33,230 --> 00:10:35,910 A l'intérieur de cette variable citant en JavaScript 250 00:10:35,910 --> 00:10:39,020 est une collection de paires clé-valeur, dont l'un est le symbole, dont l'un 251 00:10:39,020 --> 00:10:39,690 est le prix. 252 00:10:39,690 --> 00:10:42,340 Et je peux obtenir à ces valeurs avec la syntaxe suivante. 253 00:10:42,340 --> 00:10:46,280 Tout comme en PHP, je pouvais faire quelque chose like-- laisser 254 00:10:46,280 --> 00:10:48,590 moi de faire cette case, un peu plus grand. 255 00:10:48,590 --> 00:10:52,750 Tout comme en PHP, je pouvais faire this-- oh, merde. 256 00:10:52,750 --> 00:10:53,250 Allons. 257 00:10:53,250 --> 00:10:56,350 258 00:10:56,350 --> 00:11:00,800 >> Tout comme dans PHP-- OK, nous allons il suffit d'utiliser les notes de l'intervenant. 259 00:11:00,800 --> 00:11:06,010 Tout comme en PHP, je peux faire $ $ devis devis ["symbole"], 260 00:11:06,010 --> 00:11:08,860 et cela va me faire la valeur de «symbole». 261 00:11:08,860 --> 00:11:12,800 En JavaScript, il va être identique, de sorte que je ne peux le faire. 262 00:11:12,800 --> 00:11:14,850 La seule chose qui est manquant est le signe dollar. 263 00:11:14,850 --> 00:11:17,470 >> Si bien assez, alors, il ya pas tout ce que la syntaxe de bien nouveau. 264 00:11:17,470 --> 00:11:21,025 Donc, ce qui aujourd'hui nous nous concentrons sur, vraiment, est certaines des idées et des applications. 265 00:11:21,025 --> 00:11:22,900 Et le premier de ces l'application que vous pourriez 266 00:11:22,900 --> 00:11:26,090 ont vu si vous plongé dans pset sept est déjà cette syntaxe. 267 00:11:26,090 --> 00:11:28,980 Donc, en pset sept, si vous avez vu ou pas vu encore, 268 00:11:28,980 --> 00:11:33,570 savent qu'il ya un fichier que nous donnons vous avez appelé config.json-- JavaScript 269 00:11:33,570 --> 00:11:34,661 Object Notation. 270 00:11:34,661 --> 00:11:35,160 Pourquoi? 271 00:11:35,160 --> 00:11:39,540 Nous voulions être en mesure de vous fournir un modèle avec des paires clé-valeur. 272 00:11:39,540 --> 00:11:44,290 Nous voulions être en mesure de vous donner une liste de l'hôte, le nom du serveur. 273 00:11:44,290 --> 00:11:46,710 Nous voulions vous donner un espace réservé pour votre nom d'utilisateur 274 00:11:46,710 --> 00:11:48,210 et un espace réservé pour votre mot de passe. 275 00:11:48,210 --> 00:11:49,410 Si vous ne voyez pas ce encore, ne vous inquiétez pas. 276 00:11:49,410 --> 00:11:51,340 Plus à ce sujet dans pset sept [? spec. ?] Et alors, 277 00:11:51,340 --> 00:11:53,173 de toute évidence, nous voulons que vous pour remplir le à dos 278 00:11:53,173 --> 00:11:55,310 parce que quand vous vous connectez à CS50 IDE, chacun de vous 279 00:11:55,310 --> 00:11:57,630 avoir votre propre nom d'utilisateur et mot de passe. 280 00:11:57,630 --> 00:12:00,910 >> Donc, nous pourrions avons utilisé une demi-douzaine ou différents formats de fichiers plus. 281 00:12:00,910 --> 00:12:02,940 Nous aurions pu utiliser un fichier .txt. 282 00:12:02,940 --> 00:12:04,570 Nous pourrions utiliser un fichier CSV. 283 00:12:04,570 --> 00:12:06,745 Nous pourrions avons utilisé un Fichier INI, un fichier XML, 284 00:12:06,745 --> 00:12:09,370 tout un tas d'autres acronymes vous ne pourriez pas avoir jamais entendu parler. 285 00:12:09,370 --> 00:12:11,244 Il est un peu arbitraire à la fin de la journée. 286 00:12:11,244 --> 00:12:16,030 Mais super populaire ces jours-ci est un texte format appelé JSON-- JavaScript Object 287 00:12:16,030 --> 00:12:18,460 Notation-- qui ressemble à ceci. 288 00:12:18,460 --> 00:12:20,890 Il est un peu cryptique, de remarquer les motifs. 289 00:12:20,890 --> 00:12:24,180 Vous commencez avec un bouclés ouverte accolade, et vous vous retrouvez avec le même. 290 00:12:24,180 --> 00:12:26,550 A l'intérieur de ce est quelque chose. 291 00:12:26,550 --> 00:12:27,920 Il est une paire clé-valeur. 292 00:12:27,920 --> 00:12:30,580 Alors ceci est un objet que je suis en regardant sur l'écran ici 293 00:12:30,580 --> 00:12:33,690 qui a une clé, qui a une valeur. 294 00:12:33,690 --> 00:12:37,610 Et juste d'inférer sur la base du modèle précédent, ce qui est la clé ici? 295 00:12:37,610 --> 00:12:39,790 Base de données, la chose à le côté gauche du côlon. 296 00:12:39,790 --> 00:12:43,500 >> Maintenant, la valeur se trouve être a plusieurs lignes cette fois. 297 00:12:43,500 --> 00:12:46,760 Mais la valeur commence avec un bouclés accolade et se termine par une accolade. 298 00:12:46,760 --> 00:12:49,480 Alors, que proposeriez-vous est le type de la valeur de base de données? 299 00:12:49,480 --> 00:12:52,160 300 00:12:52,160 --> 00:12:54,670 Un dictionnaire ou, un peu plus succinctement, un objet. 301 00:12:54,670 --> 00:12:55,170 Droit? 302 00:12:55,170 --> 00:13:00,010 Ceci est une sorte de structure de données qui peut utiliser d'autres structures au sein de lui-même. 303 00:13:00,010 --> 00:13:02,750 Donc, si tout cela nous sommes appeler un object-- et un objet 304 00:13:02,750 --> 00:13:07,101 est juste un tas de clé-valeur pairs-- la valeur de la base de données elle-même est un objet. 305 00:13:07,101 --> 00:13:10,350 La valeur de base de données a tout un tas des paires de valeurs clés, le premier d'entre eux 306 00:13:10,350 --> 00:13:13,130 est l'hôte, puis nom, puis nom d'utilisateur, mot de passe, puis, 307 00:13:13,130 --> 00:13:17,550 dont chacune des valeurs, quant à lui, il est juste une chaîne ennuyeuse entre guillemets. 308 00:13:17,550 --> 00:13:19,770 >> Donc, même si cela ne super clair pour l'instant, 309 00:13:19,770 --> 00:13:22,740 sachez que ceci est juste une norme façon, assez ennuyeux 310 00:13:22,740 --> 00:13:25,190 de stocker des données dans un format standard. 311 00:13:25,190 --> 00:13:27,700 Mais les erreurs courantes que vous pourrait faire, même dans pset sept, 312 00:13:27,700 --> 00:13:32,120 sont de petites choses stupides, comme si vous accidentellement omettre la virgule il. 313 00:13:32,120 --> 00:13:34,900 Cela va se traduire dans le fichier pas nécessairement être lisible. 314 00:13:34,900 --> 00:13:38,191 Si vous omettez accidentellement des choses comme la citations, ça ne va pas être lisible. 315 00:13:38,191 --> 00:13:41,654 Donc, il est un format de fichier très tatillon, mais il en est un qui est super commun. 316 00:13:41,654 --> 00:13:44,820 Et il nous arrive de l'utiliser, même si vous ne l'utilisez toute JavaScript contraire, 317 00:13:44,820 --> 00:13:46,330 dans pset sept. 318 00:13:46,330 --> 00:13:46,860 >> Bien. 319 00:13:46,860 --> 00:13:48,110 Alors rappelez-vous cette image. 320 00:13:48,110 --> 00:13:51,657 Nous avons parlé, en HTML, que le code pourrait ressembler à ceci. 321 00:13:51,657 --> 00:13:54,740 Ceci est le langage de balisage hypertexte [Inaudible] pour juste "bonjour, monde." 322 00:13:54,740 --> 00:13:57,570 Mais alors, nous avons proposé une tandis que de retour si ça aide, 323 00:13:57,570 --> 00:14:00,210 vous voudrez peut-être commencer à penser sur ce déjà comme un arbre. 324 00:14:00,210 --> 00:14:03,730 En fait, l'indentation que nous utiliser juste pour l'amour de lisibilité 325 00:14:03,730 --> 00:14:05,610 ou pour l'amour sur le style de la gauche peut sorte de 326 00:14:05,610 --> 00:14:10,040 être traduits dans cet arbre, où vous avoir une certaine nœud racine spéciale que nous allons 327 00:14:10,040 --> 00:14:16,860 génériquement appelé le document, en dessous de laquelle est l'élément HTML racine ou tag, HTML, 328 00:14:16,860 --> 00:14:19,980 qui présente alors deux les enfants, la tête et le corps. 329 00:14:19,980 --> 00:14:21,750 >> Et puis, à son tour, la tête a un titre. 330 00:14:21,750 --> 00:14:23,440 Et le titre a une valeur de texte. 331 00:14:23,440 --> 00:14:26,130 Et le corps a de même une valeur de texte. 332 00:14:26,130 --> 00:14:29,220 Donc, si vous dites à l'aise que oui, vous pourriez profiter de cette HTML 333 00:14:29,220 --> 00:14:32,080 et dessiner une image comme cela, le côté droit 334 00:14:32,080 --> 00:14:35,910 est un beau modèle mental parce que maintenant que nous avons JavaScript, une programmation 335 00:14:35,910 --> 00:14:39,960 langue que les navigateurs peuvent exécuter et interpréter pour vous, 336 00:14:39,960 --> 00:14:42,690 il se trouve que ce nous sommes sur le point de le faire dans le code 337 00:14:42,690 --> 00:14:45,320 est de commencer à manipuler cette structure arborescente en mémoire. 338 00:14:45,320 --> 00:14:47,070 Nous ne disposons pas de construire l'arborescence dans la mémoire. 339 00:14:47,070 --> 00:14:49,880 Nous ne devons pas faire de tri structure de données pset-cinq de style 340 00:14:49,880 --> 00:14:50,650 complexité. 341 00:14:50,650 --> 00:14:54,610 Le navigateur, bien assez, sur l'interprétation HTML haut en bas, 342 00:14:54,610 --> 00:14:58,600 gauche ou à droite, va littéralement nous livrer l'équivalent d'un pointeur 343 00:14:58,600 --> 00:15:00,840 à cet arbre entier gratuitement. 344 00:15:00,840 --> 00:15:02,150 Il fait tout le travail acharné. 345 00:15:02,150 --> 00:15:05,520 Voilà ce que Mozilla et Apple et d'autres ont fait pour nous. 346 00:15:05,520 --> 00:15:09,400 >> Et avec JavaScript allons-nous être en mesure de contrôler et de modifier et de le faire 347 00:15:09,400 --> 00:15:12,910 choses intéressantes à cet arbre, autrement connu 348 00:15:12,910 --> 00:15:15,880 comme un DOM ou Document Object Model. 349 00:15:15,880 --> 00:15:17,110 Quel genre de choses? 350 00:15:17,110 --> 00:15:19,030 Eh bien, il se trouve que en JavaScript, il ya 351 00:15:19,030 --> 00:15:22,800 cette liste de blanchisserie de événements qui peuvent avoir lieu. 352 00:15:22,800 --> 00:15:26,330 Et nous avons pas vraiment utilisé que mot depuis la semaine zéro et pset 353 00:15:26,330 --> 00:15:28,240 zéro lorsque nous avons parlé de Scratch. 354 00:15:28,240 --> 00:15:31,390 La plupart d'entre vous probablement ne pas utiliser un événement dans votre projet de Scratch. 355 00:15:31,390 --> 00:15:33,850 Mais vous pourriez rappeler simple Marco Polo 356 00:15:33,850 --> 00:15:36,760 par exemple, où nous avons eu deux sprites, dont l'un dit, Marco. 357 00:15:36,760 --> 00:15:40,180 L'autre dont puis, sur l'écoute et d'entendre cet événement, dit Polo. 358 00:15:40,180 --> 00:15:42,080 Si non, vous pouvez regarder en arrière aussi loin en arrière. 359 00:15:42,080 --> 00:15:44,450 >> Mais cela est juste pour dire, et vous pouvez sorte de 360 00:15:44,450 --> 00:15:47,730 déduire les noms de ces choses, JavaScript, il se trouve, 361 00:15:47,730 --> 00:15:53,200 va nous donner un moyen d'écouter pour la souris ou la souris descendre monter 362 00:15:53,200 --> 00:15:57,920 ou la touche de descendre ou la touche monter ou onselect onsubmit 363 00:15:57,920 --> 00:15:59,740 ou onresizing quelque chose. 364 00:15:59,740 --> 00:16:03,060 En d'autres termes, toute action physique que l'homme peut prendre avec un navigateur 365 00:16:03,060 --> 00:16:08,210 que vous faites chaque jour, vous pouvez écrire code qui écoute pour ces événements 366 00:16:08,210 --> 00:16:10,220 et fait ensuite quelque chose d'approprié. 367 00:16:10,220 --> 00:16:14,130 >> Par exemple, si vous utilisez Google Maps, ce qui se passe si vous cliquer et déplacer 368 00:16:14,130 --> 00:16:16,250 la souris, typiquement? 369 00:16:16,250 --> 00:16:17,758 Si vous cliquez et faites glisser? 370 00:16:17,758 --> 00:16:18,258 Ouais? 371 00:16:18,258 --> 00:16:21,701 372 00:16:21,701 --> 00:16:22,200 Exactement. 373 00:16:22,200 --> 00:16:23,159 La carte commence à se déplacer. 374 00:16:23,159 --> 00:16:25,616 Ainsi, vous pouvez sorte de voir ce qui est ici, ce qui est là-bas. 375 00:16:25,616 --> 00:16:27,130 Et comment Google de mettre en œuvre ce que cela? 376 00:16:27,130 --> 00:16:29,421 Eh bien, sans doute, ils sont en utilisant un couple de ces événements 377 00:16:29,421 --> 00:16:31,720 auditeurs, qui dit, écouter de la souris 378 00:16:31,720 --> 00:16:35,410 down-- donc lorsque l'utilisateur physiquement pousse son trackpad ou son souris 379 00:16:35,410 --> 00:16:36,010 vers le bas. 380 00:16:36,010 --> 00:16:38,350 Et puis, nous sommes à la recherche quelque chose comme le mouvement 381 00:16:38,350 --> 00:16:41,145 ou un autre événement qui nous permet de capturer la traînée. 382 00:16:41,145 --> 00:16:45,910 Et en fait, la traînée est similaire dans ce dot dot dot liste des options possibles. 383 00:16:45,910 --> 00:16:49,140 >> Donc cela va être un puissant façon de commencer à répondre à l'utilisateur 384 00:16:49,140 --> 00:16:52,824 même avant qu'il ou elle clique effectivement quelque chose explicite comme pour soumettre. 385 00:16:52,824 --> 00:16:55,240 Mais nous allons introduire quelques sujets pour y arriver. 386 00:16:55,240 --> 00:16:58,570 La transition Mais d'abord, laissez- dans une certaine code réel. 387 00:16:58,570 --> 00:17:01,450 Donc, je vais aller de l'avant et ouvrir dom-0, 388 00:17:01,450 --> 00:17:05,869 qui est un exemple très simple ici que si je zoome simplement 389 00:17:05,869 --> 00:17:08,500 a cette entrée ici pour moi. 390 00:17:08,500 --> 00:17:12,410 Et je vais aller de l'avant et tapez "David" pour mon nom et cliquez sur Envoyer. 391 00:17:12,410 --> 00:17:17,940 >> Et puis, bien sorte de bon marché, je avoir cette invite qui apparaît qui dit, 392 00:17:17,940 --> 00:17:19,244 "bonjour, David!" 393 00:17:19,244 --> 00:17:21,740 Donc, ce genre d'est comme notre «bonjour, monde" 394 00:17:21,740 --> 00:17:25,150 que nous avons fait quelque temps en arrière en C et même dans PHP parce que je l'ai dynamiquement 395 00:17:25,150 --> 00:17:26,310 sorti mon nom. 396 00:17:26,310 --> 00:17:28,230 Je peux faire le nom de quelqu'un d'autre ici. 397 00:17:28,230 --> 00:17:31,240 Je ne pouvais tout simplement changer cela, comme, Hannah, cliquez sur Soumettre. 398 00:17:31,240 --> 00:17:33,780 Et en effet, les petits changements de pop-up. 399 00:17:33,780 --> 00:17:36,650 >> Maintenant, les pop-ups sont l'un des la plupart des victimes de violence fonctionnalités du Web. 400 00:17:36,650 --> 00:17:38,520 Et en fait, de retour dans les bloqueurs de pop-up jour 401 00:17:38,520 --> 00:17:40,820 est entré en vogue parce que vous irait à certains website-- 402 00:17:40,820 --> 00:17:43,604 peut-être un place-- douteuse qui serait soudain 403 00:17:43,604 --> 00:17:46,020 commencer émaillant votre écran avec tout un tas de pop-ups. 404 00:17:46,020 --> 00:17:49,700 Et donc cette capacité de pop up les fenêtres à l'avant de l'utilisateur 405 00:17:49,700 --> 00:17:52,372 n'a pas été particulièrement bien reçu par l'humanité. 406 00:17:52,372 --> 00:17:54,080 Voilà pourquoi vous voyez cette chose prévenir, 407 00:17:54,080 --> 00:17:55,706 ce qui rend tout simplement toute cette chose laide. 408 00:17:55,706 --> 00:17:57,996 Donc, nous allons avoir besoin d'un meilleure façon de demander à l'utilisateur. 409 00:17:57,996 --> 00:17:59,350 Mais pour l'instant, cela semble fonctionner. 410 00:17:59,350 --> 00:18:03,320 Il suffit donc de manière intuitive, ce qui semble se produire ici? 411 00:18:03,320 --> 00:18:07,870 Je vais de l'avant et cliquez sur soumettre, et puis quelque chose se passe, clairement. 412 00:18:07,870 --> 00:18:12,870 Mais ce qui ne se passe pas est-ce arrivé toute la semaine dernière fois que je clique sur Envoyer? 413 00:18:12,870 --> 00:18:15,940 Ce qui n'a pas arriver sur l'écran? 414 00:18:15,940 --> 00:18:17,170 Pardon? 415 00:18:17,170 --> 00:18:18,010 Recharger. 416 00:18:18,010 --> 00:18:19,720 L'URL n'a pas changé du tout. 417 00:18:19,720 --> 00:18:22,250 Je l'ai dit était dom-0, et je suis toujours à dom-0. 418 00:18:22,250 --> 00:18:26,890 Normalement, nous aimerions avoir changé à un autre URL, comme register.php ou similaire. 419 00:18:26,890 --> 00:18:29,560 >> Mais même quand je rejette cette chose en cliquant sur OK, 420 00:18:29,560 --> 00:18:32,310 remarquerez que l'URL reste entièrement posée. 421 00:18:32,310 --> 00:18:35,350 Et, en fait, si je suis un peu sceptiques, laissez-moi ouvrir de Chrome. 422 00:18:35,350 --> 00:18:36,860 Permettez-moi d'ouvrir l'onglet Réseau. 423 00:18:36,860 --> 00:18:38,360 Et remarquez il est vide pour le moment. 424 00:18:38,360 --> 00:18:40,700 Permettez-moi aller de l'avant et de demander le réexamen de Maria. 425 00:18:40,700 --> 00:18:42,810 Il n'y a pas que ce soit le trafic réseau. 426 00:18:42,810 --> 00:18:44,320 Donc, il n'y a pas HTTP. 427 00:18:44,320 --> 00:18:47,620 >> Donc, en effet, si je regarde le code source this-- pour me permettre de fermer cette fenêtre 428 00:18:47,620 --> 00:18:49,480 et aller voir la source. 429 00:18:49,480 --> 00:18:50,400 Intéressant. 430 00:18:50,400 --> 00:18:53,520 Il semble qu'il y ait une certaine de nouvelles étiquettes, parmi eux script. 431 00:18:53,520 --> 00:18:57,490 Donc, nous allons jeter un coup d'oeil dans les CS50 IDE exactement ce que je envoyé à l'utilisateur. 432 00:18:57,490 --> 00:19:00,690 >> Donc, ici nous allons est-- se concentrer sur le HTML seulement. 433 00:19:00,690 --> 00:19:03,500 Voici la moitié inférieure de dom-0.html. 434 00:19:03,500 --> 00:19:07,830 Et remarquez qu'il a un titre, une étiquette de tête, une étiquette de corps, une balise form. 435 00:19:07,830 --> 00:19:11,257 Mais ce qui saute à vous comme différente, surtout si vous avez jamais 436 00:19:11,257 --> 00:19:12,590 écrit toute JavaScript vous-même. 437 00:19:12,590 --> 00:19:14,920 Permettez-moi de faire défiler un peu à droite ici. 438 00:19:14,920 --> 00:19:18,330 Je dois une entrée, une autre entrée pour les soumettre. 439 00:19:18,330 --> 00:19:21,410 Je dois un ID, qui est une sorte de nouveau. 440 00:19:21,410 --> 00:19:22,790 Mais nous ne le voyons avec CSS. 441 00:19:22,790 --> 00:19:24,480 Quoi d'autre est certainement nouveau? 442 00:19:24,480 --> 00:19:24,980 Ouais? 443 00:19:24,980 --> 00:19:30,580 444 00:19:30,580 --> 00:19:32,140 Agréable. 445 00:19:32,140 --> 00:19:32,760 >> Bien. 446 00:19:32,760 --> 00:19:35,630 Alors, où il est dit onsubmit, remarquer ce qui semble suivre. 447 00:19:35,630 --> 00:19:38,740 Ceci est un attribut dans la nomenclature HTML. 448 00:19:38,740 --> 00:19:40,944 Sa valeur est cette chaîne citée ici. 449 00:19:40,944 --> 00:19:42,860 Et cela ressemble un peu bizarre au premier coup d'œil. 450 00:19:42,860 --> 00:19:44,050 Il est pas HTML. 451 00:19:44,050 --> 00:19:45,240 Il est pas CSS. 452 00:19:45,240 --> 00:19:47,580 Ceci est, comme vous pouvez le deviner, JavaScript. 453 00:19:47,580 --> 00:19:51,850 Il semble donc que construit dans cette page Web est une fonction appelée saluer. 454 00:19:51,850 --> 00:19:54,250 Et je déduire que tout car il est un mot, saluer. 455 00:19:54,250 --> 00:19:55,880 Il a obtenu une parenthèse ouverte, fermer la parenthèse, point-virgule. 456 00:19:55,880 --> 00:19:58,095 On dirait une fonction C, ressemble à une fonction PHP. 457 00:19:58,095 --> 00:20:00,370 >> Et en effet, il va être une fonction JavaScript. 458 00:20:00,370 --> 00:20:01,440 Puis je retourne faux. 459 00:20:01,440 --> 00:20:03,440 Nous y reviendrons que dans un instant. 460 00:20:03,440 --> 00:20:05,320 Mais où est cette fonction définie? 461 00:20:05,320 --> 00:20:07,950 Eh bien, laissez-moi défiler vers le haut au début du fichier. 462 00:20:07,950 --> 00:20:11,710 Et même si elle est une longue ligne, il est relativement simple. 463 00:20:11,710 --> 00:20:15,000 Permettez-moi ici et Zoom arrière se concentrer sur ces quatre lignes. 464 00:20:15,000 --> 00:20:17,137 >> Donc, en JavaScript, tout simplement comme PHP, vous venez 465 00:20:17,137 --> 00:20:19,720 disons, littéralement, le mot «fonction», le nom de la fonction, 466 00:20:19,720 --> 00:20:22,700 et de parenthèses puis avec toute arguments-- pas d'arguments dans ce cas. 467 00:20:22,700 --> 00:20:25,290 Et il n'y a aucun type de retour en JavaScript, tout comme PHP. 468 00:20:25,290 --> 00:20:29,470 Donc, il est un peu plus lâche que C. Accolade ouverte, accolade à proximité. 469 00:20:29,470 --> 00:20:33,270 Construit en JavaScript est une function-- un function-- pas recommandé 470 00:20:33,270 --> 00:20:35,730 mais une fonction appelée alerte dont le seul but dans la vie 471 00:20:35,730 --> 00:20:38,620 est de tirer vers le haut que assez laid invite qui nous l'avons vu il ya un instant. 472 00:20:38,620 --> 00:20:40,950 >> Or, cette est une sorte de bouchée. 473 00:20:40,950 --> 00:20:42,560 Qu'est ce qui se passe ici? 474 00:20:42,560 --> 00:20:45,840 Commençons donc à mettre en évidence tout ici. 475 00:20:45,840 --> 00:20:48,540 Voilà le même argument pour alerter. 476 00:20:48,540 --> 00:20:49,530 Et ce qui se passe? 477 00:20:49,530 --> 00:20:51,200 Cela ressemble exactement comme une chaîne. 478 00:20:51,200 --> 00:20:59,180 Et il se trouve, contrairement à PHP et à la différence C, il n'a pas d'importance en JavaScript 479 00:20:59,180 --> 00:21:01,090 si vous guillemets simples ou doubles. 480 00:21:01,090 --> 00:21:02,060 Ils vont être équivalent. 481 00:21:02,060 --> 00:21:03,769 Et franchement, il est juste populaire ces jours- 482 00:21:03,769 --> 00:21:06,726 pour les programmeurs JavaScript pour toujours utiliser des guillemets simples pour une raison quelconque. 483 00:21:06,726 --> 00:21:07,840 Il est juste la chose à faire. 484 00:21:07,840 --> 00:21:09,710 Mais nous pourrions utiliser des guillemets, ainsi. 485 00:21:09,710 --> 00:21:11,540 >> Alors Plus est un nouveau personnage. 486 00:21:11,540 --> 00:21:14,512 Mais ceux d'entre vous qui avez fait cela avant, ce qui ne signifie en plus? 487 00:21:14,512 --> 00:21:16,440 Ouais. 488 00:21:16,440 --> 00:21:17,120 Concaténer. 489 00:21:17,120 --> 00:21:18,570 Donc, nous avons vu ce en PHP. 490 00:21:18,570 --> 00:21:20,315 Il ya juste le point opérateur en PHP qui 491 00:21:20,315 --> 00:21:22,000 va concaténer deux chaînes ensemble. 492 00:21:22,000 --> 00:21:24,000 C était une douleur dans le cou pour ce faire. 493 00:21:24,000 --> 00:21:27,310 Rappel de pset six, qui était une douleur particulière dans le cou, 494 00:21:27,310 --> 00:21:29,470 vous auriez à utiliser quelque chose comme strcat 495 00:21:29,470 --> 00:21:31,660 après l'allocation de mémoire sur la pile ou du tas. 496 00:21:31,660 --> 00:21:34,243 Vous avez eu à sauter à travers des cerceaux juste pour concaténer deux chaînes. 497 00:21:34,243 --> 00:21:36,040 En JavaScript, il est super simple. 498 00:21:36,040 --> 00:21:38,030 Il suffit d'utiliser l'opérateur de plus entre eux. 499 00:21:38,030 --> 00:21:41,420 >> Ainsi, le complexe à la recherche chose semble être présent 500 00:21:41,420 --> 00:21:43,490 parce que à la fin de toute cette chaîne, je viens 501 00:21:43,490 --> 00:21:45,797 concaténer sur un point d'exclamation. 502 00:21:45,797 --> 00:21:48,380 Donc, si ce qui a été popping up a été "bonjour, David", "bonjour, Hannah," 503 00:21:48,380 --> 00:21:52,740 "bonjour, Maria," et ainsi de suite, clairement cette chose milieu entre les deux 504 00:21:52,740 --> 00:21:55,215 avantages doivent me donner accès à quoi? 505 00:21:55,215 --> 00:21:58,855 506 00:21:58,855 --> 00:22:01,991 Qu'est-ce qu'il ya dedans pour vous? 507 00:22:01,991 --> 00:22:02,490 Ouais. 508 00:22:02,490 --> 00:22:05,090 Alors je vais faire semblant ici la répondre à leur nom, non? 509 00:22:05,090 --> 00:22:10,380 Donc, leur nom a surgi dans la finale résultat. Qu'est-ce que cela signifie? 510 00:22:10,380 --> 00:22:15,080 Eh bien, je proposai que plus tôt dans image que le soi-disant DOM 511 00:22:15,080 --> 00:22:18,580 a cet élément racine spécial chemin jusqu'à top appelé document. 512 00:22:18,580 --> 00:22:21,660 Et maintenant, il se trouve, ça va être une variable globale spéciale 513 00:22:21,660 --> 00:22:25,250 en JavaScript, intégré qui est un tas ensemble de fonctionnalités utiles. 514 00:22:25,250 --> 00:22:31,770 Parmi les fonctionnalités utile est le capacité à obtenir à tout nœud descendant. 515 00:22:31,770 --> 00:22:37,760 Ces carrés ou des rectangles ou des ellipses sont quelques noeuds dans un arbre, pour ainsi dire. 516 00:22:37,760 --> 00:22:41,850 >> Donc, il se trouve que intégré Document de l'objet de JavaScript 517 00:22:41,850 --> 00:22:47,300 est une fonction, autrement connu comme un méthode, qui est ce qu'on appelle getElementById. 518 00:22:47,300 --> 00:22:50,410 La syntaxe d'appel une fonction en JavaScript 519 00:22:50,410 --> 00:22:55,220 qui est à l'intérieur d'un objet ou d'un variable est juste avec la notation par points. 520 00:22:55,220 --> 00:22:57,950 Et nous avons vu cela dans C ce que la syntaxe de la structure. 521 00:22:57,950 --> 00:23:03,530 Vous voyez cela dans pset sept, en quelque sorte, en quelque sorte, quand vous voyez CS50 :: query. 522 00:23:03,530 --> 00:23:08,070 Le côlon du côlon en PHP est un autre manière d'appeler une fonction qui est 523 00:23:08,070 --> 00:23:09,260 à l'intérieur d'un objet. 524 00:23:09,260 --> 00:23:11,960 >> Mais pour l'instant en JavaScript, il est juste un point. 525 00:23:11,960 --> 00:23:14,170 Et donc cette fonction, bien assez, sorte de 526 00:23:14,170 --> 00:23:16,810 dit ce qu'il does-- obtenir élément par ID. 527 00:23:16,810 --> 00:23:20,280 Un élément est juste un autre nom pour une étiquette ou un nœud dans le DOM. 528 00:23:20,280 --> 00:23:26,900 Et donc obtenir par ID élément "name" signifie this-- voici mon HTML. 529 00:23:26,900 --> 00:23:31,910 Et sur cette base HTML, ce qui nœud ou ce balise HTML suis-je 530 00:23:31,910 --> 00:23:35,097 va être remis programmation en appelant document.getElementById? 531 00:23:35,097 --> 00:23:37,650 532 00:23:37,650 --> 00:23:38,500 >> Oui exactement. 533 00:23:38,500 --> 00:23:42,670 Je vais pour obtenir l'entrée il élément dont l'ID est "nom". 534 00:23:42,670 --> 00:23:45,140 Donc spécifiquement, vous pouvez penser à cette fonction, 535 00:23:45,140 --> 00:23:49,560 getElementById, comme un moyen de donner sauvegarder un pointeur vers ce noeud spécifique 536 00:23:49,560 --> 00:23:50,060 dans l'arbre. 537 00:23:50,060 --> 00:23:51,980 Nous avons pas tiré cette arbre, mais il est une façon 538 00:23:51,980 --> 00:23:54,900 d'obtenir l'accès à ce rectangle ou rectangle que 539 00:23:54,900 --> 00:23:58,090 en identifiant de manière unique par l'intermédiaire de son identification. 540 00:23:58,090 --> 00:23:59,760 >> Maintenant, pourquoi est-ce utile? 541 00:23:59,760 --> 00:24:01,510 Eh bien, il se trouve qu'une fois que vous avez obtenu 542 00:24:01,510 --> 00:24:07,220 ce noeud, ce rectangle de la image, ce noeud à l'intérieur, 543 00:24:07,220 --> 00:24:10,660 à son tour, a tout un tas de paires clé-valeur properties-- 544 00:24:10,660 --> 00:24:13,480 ou de données, une valeur qui est appelé. 545 00:24:13,480 --> 00:24:16,500 Donc, littéralement, il est une sorte de gorgée d'expliquer le tout. 546 00:24:16,500 --> 00:24:19,370 Mais à la fin de la journée, Tout cela ne fait que vous donner 547 00:24:19,370 --> 00:24:23,070 une chaîne que l'utilisateur a tapé dans de cette façon hiérarchique. 548 00:24:23,070 --> 00:24:24,820 Mais je ne aime pas deux de ces choses. 549 00:24:24,820 --> 00:24:27,590 Ou plutôt, il ya toujours une certaine curiosité. 550 00:24:27,590 --> 00:24:28,870 Tout cela a semblé fonctionner. 551 00:24:28,870 --> 00:24:33,420 Pourquoi pensez-vous que je revins fausse après l'appel de saluer? 552 00:24:33,420 --> 00:24:35,910 Cela ressemble un peu laid, que Je ai deux déclarations il 553 00:24:35,910 --> 00:24:38,730 séparées par des points-virgules. 554 00:24:38,730 --> 00:24:39,310 Prenez une supposition. 555 00:24:39,310 --> 00:24:44,390 Si je l'ai enlevé return false, ce qui pourrait arriver, juste instinctivement? 556 00:24:44,390 --> 00:24:46,990 557 00:24:46,990 --> 00:24:49,460 Désolé, dire encore? 558 00:24:49,460 --> 00:24:50,530 >> Ouvrez un tas de Windows. 559 00:24:50,530 --> 00:24:52,780 Donc potentiellement être quelque chose comme cela pourrait se produire. 560 00:24:52,780 --> 00:24:54,422 Quoi d'autre? 561 00:24:54,422 --> 00:24:55,630 Pourrait soumettre une demande où? 562 00:24:55,630 --> 00:24:59,109 563 00:24:59,109 --> 00:25:00,510 Pour la même page. 564 00:25:00,510 --> 00:25:03,110 Donc, en fait, que ce que La réponse de plus près ici, 565 00:25:03,110 --> 00:25:05,890 même si, contrairement dans le passé, je ne l'ai pas 566 00:25:05,890 --> 00:25:09,300 spécifié l'attribut action, qui, normalement, nous avons à faire. 567 00:25:09,300 --> 00:25:11,780 Avère qu'il ya un défaut. Si vous ne spécifiez pas l'action, 568 00:25:11,780 --> 00:25:15,370 il est comme dire entre guillemets ou le nom du fichier lui-même, 569 00:25:15,370 --> 00:25:17,850 qui dans ce cas serait être comme dom-0.html. 570 00:25:17,850 --> 00:25:20,420 Il est juste genre de déduire, ou plutôt implicite. 571 00:25:20,420 --> 00:25:22,420 >> Et si je ne le fais pas, allons préavis. 572 00:25:22,420 --> 00:25:23,230 Permettez-moi de sauver ce. 573 00:25:23,230 --> 00:25:25,270 Et je l'ai enlevé return false. 574 00:25:25,270 --> 00:25:27,759 Permettez-moi de revenir à ce exemple et la force recharger. 575 00:25:27,759 --> 00:25:30,800 Et vous pourriez avoir vu moi de suggérer ceci sur CS50 discuter d'un tas de fois. 576 00:25:30,800 --> 00:25:34,560 Si quelque chose a jamais agissant funky et la navigateur est ne pas se comporter comme prévu, 577 00:25:34,560 --> 00:25:37,410 souvent vous aurez envie de tenir Maj, puis cliquez sur Recharger. 578 00:25:37,410 --> 00:25:41,480 Cela forcera chaque fichier à recharger et ne pas utiliser le cache local de votre navigateur 579 00:25:41,480 --> 00:25:47,032 ou une copie de sorte que maintenant, laissez-moi aller de l'avant et ouvrir mon inspecteur, l'onglet Réseau. 580 00:25:47,032 --> 00:25:48,740 Je vais à cliquer Préserver Connexion parce que je 581 00:25:48,740 --> 00:25:51,660 ne veulent pas de supprimer les lignes une fois que je me emmené ailleurs. 582 00:25:51,660 --> 00:25:54,650 >> Permettez-moi ici et aller de l'avant Type de Andi, cliquez sur Envoyer. 583 00:25:54,650 --> 00:25:55,150 Bien. 584 00:25:55,150 --> 00:25:56,480 Cela semble comme prévu. 585 00:25:56,480 --> 00:25:57,440 Il dit: «Bonjour, Andi." 586 00:25:57,440 --> 00:25:59,420 Permettez-moi de cliquez sur OK. 587 00:25:59,420 --> 00:26:00,610 Intéressant. 588 00:26:00,610 --> 00:26:05,100 Notez que la page a changé, mais à la page originale. 589 00:26:05,100 --> 00:26:06,770 Notez l'URL genre de changement. 590 00:26:06,770 --> 00:26:09,430 Il a ajouté un point d'interrogation, qui est habituellement un indicateur 591 00:26:09,430 --> 00:26:11,260 que nous avons essayé de présenter quelque chose. 592 00:26:11,260 --> 00:26:13,570 Ensuite, à la base, encore plus explicitement, 593 00:26:13,570 --> 00:26:17,570 voici la requête HTTP réel, qui a obtenu une réponse de la 200 qui 594 00:26:17,570 --> 00:26:18,490 m'a ramené ici. 595 00:26:18,490 --> 00:26:20,250 >> Donc, ce ne sont pas ce que nous voulons faire, non? 596 00:26:20,250 --> 00:26:22,166 Parce que je ne veux pas recharger la page entière. 597 00:26:22,166 --> 00:26:24,970 Je voulais retourner à la place fausse de façon à court-circuit 598 00:26:24,970 --> 00:26:28,840 le comportement par défaut du navigateur, qui était, bien sûr, de soumettre la page. 599 00:26:28,840 --> 00:26:31,700 >> Donc, nous allons jeter un oeil à un marginalement meilleur exemple. 600 00:26:31,700 --> 00:26:33,920 Ceci est une version d'un dom. 601 00:26:33,920 --> 00:26:36,680 Et remarquez ce qui suit. 602 00:26:36,680 --> 00:26:39,150 Il est OK si vous ne digèrent pas le toutes les lignes de code. 603 00:26:39,150 --> 00:26:41,750 Mais ce qui est fondamentalement différent sur cette mise en oeuvre? 604 00:26:41,750 --> 00:26:44,690 Je vais le stipuler se comporte de la même, fait la même chose. 605 00:26:44,690 --> 00:26:49,320 606 00:26:49,320 --> 00:26:51,570 Qu'ai-je de toute évidence fait différemment? 607 00:26:51,570 --> 00:26:52,266 Ouais? 608 00:26:52,266 --> 00:26:53,182 >> AUDIENCE: [inaudible]. 609 00:26:53,182 --> 00:27:03,421 610 00:27:03,421 --> 00:27:04,170 DAVID MALAN: Ouais. 611 00:27:04,170 --> 00:27:08,620 Donc la fonction est définie differently-- en d'autres termes, absents de la forme, 612 00:27:08,620 --> 00:27:13,180 là-haut sur la ligne ou 7-- plutôt, la ligne 8-- plus 613 00:27:13,180 --> 00:27:15,070 dois-je l'attribut onsubmit. 614 00:27:15,070 --> 00:27:16,750 Dans l'exemple précédent, je devais cela. 615 00:27:16,750 --> 00:27:18,530 Et puis je me suis littéralement écrit mon code ici. 616 00:27:18,530 --> 00:27:20,210 Et puis je l'ai dit return false. 617 00:27:20,210 --> 00:27:22,180 Et si elle n'a pas frotter vous dans le mauvais sens encore, 618 00:27:22,180 --> 00:27:26,140 il devrait commencer à la mesure que, tout comme en HTML, 619 00:27:26,140 --> 00:27:29,530 lorsque nous avons commencé à collaborer le mêler avec CSS dans les attributs de style, 620 00:27:29,530 --> 00:27:32,890 il a juste commencé à devenir un peu désordre ou se sentir un peu mal. 621 00:27:32,890 --> 00:27:35,020 >> De même ici, si vous commencez à prendre HTML, 622 00:27:35,020 --> 00:27:37,419 et puis vous automatiquement plop un peu de code JavaScript 623 00:27:37,419 --> 00:27:40,460 au milieu d'une chaîne entre guillemets, il est ne va pas être très maintenable. 624 00:27:40,460 --> 00:27:40,630 Droit? 625 00:27:40,630 --> 00:27:43,690 Il est même pas évident au premier abord lieu où le code JavaScript est. 626 00:27:43,690 --> 00:27:46,590 Donc, ce serait vraiment bien que un principe de meilleure conception, 627 00:27:46,590 --> 00:27:50,500 gardons notre HTML complètement séparer de notre JavaScript. 628 00:27:50,500 --> 00:27:53,150 >> Donc, pour ce faire, ce que nous avons fait ici est l'following-- 629 00:27:53,150 --> 00:27:56,790 nous utilisons simplement pour le balisage HTML seulement. 630 00:27:56,790 --> 00:28:00,730 Et donc en version un de cela, tous les Je avoir est un formulaire avec un identifiant unique. 631 00:28:00,730 --> 00:28:04,630 Et puis ici, je profite d'une caractéristique particulière de JavaScript 632 00:28:04,630 --> 00:28:08,480 par lequel je peux avoir ce qui est appelé une fonction anonyme. 633 00:28:08,480 --> 00:28:14,150 Donc, il se trouve que si je l'appelle document.getElementById de «démonstration» 634 00:28:14,150 --> 00:28:18,890 qui est comme moi donner un pointeur vers ce noeud dans mon arbre, l'élément de formulaire, 635 00:28:18,890 --> 00:28:20,100 pour ainsi dire. 636 00:28:20,100 --> 00:28:22,220 >> Maintenant, je sais juste de sachant un peu de HTML 637 00:28:22,220 --> 00:28:26,330 maintenant nous allons avoir lu certaines en ligne référence, un élément de formulaire prend en charge 638 00:28:26,330 --> 00:28:29,950 tout un tas d'événement dans listeners-- Autrement dit, la liste de blanchisserie de l'événement 639 00:28:29,950 --> 00:28:31,700 les auditeurs que nous avons vu il ya un instant. 640 00:28:31,700 --> 00:28:35,950 Je sais que la lecture de la documentation que onsubmit est un événement valide 641 00:28:35,950 --> 00:28:38,520 écouteur pour un élément de formulaire. 642 00:28:38,520 --> 00:28:41,480 >> Donc, une fois je sais que, il est sûr pour moi de faire 643 00:28:41,480 --> 00:28:45,390 l'following-- obtenir ce noeud de l'arbre, l'élément de formulaire, 644 00:28:45,390 --> 00:28:48,070 et accéder à sa soi-disant onsubmit propriété. 645 00:28:48,070 --> 00:28:49,880 Donc, le point signifie simplement ceci est une propriété, 646 00:28:49,880 --> 00:28:52,180 comme une valeur spéciale à l'intérieur de celui-ci. 647 00:28:52,180 --> 00:28:55,590 Et quel type de données que je suis affectation, apparemment, 648 00:28:55,590 --> 00:28:58,900 à onsubmit, qui est efficacement une variable à l'intérieur 649 00:28:58,900 --> 00:29:01,010 de ce noeud dans l'arbre? 650 00:29:01,010 --> 00:29:04,100 Il est un champ à l'intérieur de cette structure. 651 00:29:04,100 --> 00:29:05,810 Quel est le type de données? 652 00:29:05,810 --> 00:29:07,030 >> Une fonction, ouais. 653 00:29:07,030 --> 00:29:08,607 Donc, il se trouve que PHP a cette. 654 00:29:08,607 --> 00:29:10,440 Et même si nous n'a pas vous dire à ce sujet, 655 00:29:10,440 --> 00:29:16,240 C a aussi des pointeurs de fonctions, les capacité à passer et assigner des fonctions 656 00:29:16,240 --> 00:29:18,330 que les valeurs de variables elles-mêmes. 657 00:29:18,330 --> 00:29:20,280 Et on ne va pas à régresser à C. 658 00:29:20,280 --> 00:29:23,250 Mais pour l'instant, il se trouve que sur le côté droit ici, 659 00:29:23,250 --> 00:29:26,260 même si elle semble un peu génial, ce moyen, bon navigateur, 660 00:29:26,260 --> 00:29:27,550 me donner une fonction. 661 00:29:27,550 --> 00:29:30,560 Je ne vais pas même pas la peine de donner un nom parce que je suis littéralement 662 00:29:30,560 --> 00:29:34,450 va affecter appelons- l'adresse de cette fonction 663 00:29:34,450 --> 00:29:35,994 immédiatement à onsubmit. 664 00:29:35,994 --> 00:29:39,160 En d'autres termes, le navigateur, vous ne devez pas de savoir ce que cette fonction est appelée. 665 00:29:39,160 --> 00:29:41,890 Vous avez juste besoin de savoir où il est en mémoire. 666 00:29:41,890 --> 00:29:44,210 Et il suffit juste avoir un signe égal il 667 00:29:44,210 --> 00:29:48,240 et de ne pas prendre la peine de nommer ce, comme foo ou saluer ou tout autre mot. 668 00:29:48,240 --> 00:29:50,150 Et maintenant cela est juste une chose stylistique. 669 00:29:50,150 --> 00:29:53,100 Je pourrais passer cette accolade sur the-- sorry-- ligne suivante 670 00:29:53,100 --> 00:29:54,750 comme nous le faisons habituellement CS50. 671 00:29:54,750 --> 00:29:57,550 Mais en JavaScript, il est effectivement stylistiquement commune 672 00:29:57,550 --> 00:30:00,450 juste garder l'accolade, le première, sur cette première ligne. 673 00:30:00,450 --> 00:30:02,620 >> Mais au-delà, il ya rien d'interessant. 674 00:30:02,620 --> 00:30:05,830 Ce accolade ouverte juste délimite le début de ma fonction. 675 00:30:05,830 --> 00:30:09,320 La fonction est maintenant identiques, sauf que je l'ai 676 00:30:09,320 --> 00:30:11,452 inclus le faux de retour à l'intérieur de cette fonction. 677 00:30:11,452 --> 00:30:13,160 Parce qu'il tourne out-- et vous feriez seulement 678 00:30:13,160 --> 00:30:14,980 le savoir de la lecture l'documentation-- 679 00:30:14,980 --> 00:30:19,740 que si la fonction que vous affectez au gestionnaire onsubmit retourne false, 680 00:30:19,740 --> 00:30:23,420 le navigateur sait juste et accepte de ne pas soumettre le formulaire à un serveur. 681 00:30:23,420 --> 00:30:27,210 Si elle retourne vrai, il soumettra à un serveur pour des raisons que nous verrons 682 00:30:27,210 --> 00:30:28,700 sont utiles dans un instant. 683 00:30:28,700 --> 00:30:31,000 >> Et puis, le point-virgule après l'accolade là juste 684 00:30:31,000 --> 00:30:32,541 signifie que je suis fait la définition de la fonction. 685 00:30:32,541 --> 00:30:36,600 Vous savez ce qu'il faut appeler dès que vous entendez une soumission. 686 00:30:36,600 --> 00:30:37,100 Bien. 687 00:30:37,100 --> 00:30:40,650 Ceci est encore sans doute genre de laid. 688 00:30:40,650 --> 00:30:42,190 Alors, que pouvons-nous faire? 689 00:30:42,190 --> 00:30:45,000 >> Eh bien, il se trouve alors en version à deux, ce qui est le last-- 690 00:30:45,000 --> 00:30:46,780 et nous allons juste regard sur cette. 691 00:30:46,780 --> 00:30:49,850 Au risque de faire il laid, il se trouve 692 00:30:49,850 --> 00:30:52,160 qu'il ya une bibliothèque dans le monde appelle jQuery. 693 00:30:52,160 --> 00:30:54,900 Et jQuery est un super- bibliothèque JavaScript populaire 694 00:30:54,900 --> 00:30:57,930 qui est si populaire que la plupart toute JavaScript-- il est pas 695 00:30:57,930 --> 00:31:00,540 rare que les gens confondent jQuery avec JavaScript. 696 00:31:00,540 --> 00:31:01,070 Pourquoi? 697 00:31:01,070 --> 00:31:04,990 JavaScript lui-même a très verbose façons de faire things-- 698 00:31:04,990 --> 00:31:07,820 document.getElementById, dadadadadada. 699 00:31:07,820 --> 00:31:10,510 Vous finissez par avoir très longues lignes de code. 700 00:31:10,510 --> 00:31:15,550 >> Donc un homme nommé John Resid, qui fonctionne réellement pour un démarrage 701 00:31:15,550 --> 00:31:18,630 ces jours-ci, est sorti avec cette bibliothèque ans 702 00:31:18,630 --> 00:31:22,070 il ya que beaucoup de gens ont contribué à appelé jQuery qui change 703 00:31:22,070 --> 00:31:23,449 la syntaxe de la façon suivante. 704 00:31:23,449 --> 00:31:25,740 Et juste pour que vous avez vu cela, parce que vous aurez toujours 705 00:31:25,740 --> 00:31:28,140 voir cela si faire un projet final basé sur le Web, 706 00:31:28,140 --> 00:31:33,270 ce serait le moyen équivalent de l'application de cette même fonction à l'aide 707 00:31:33,270 --> 00:31:34,630 cette bibliothèque particulière. 708 00:31:34,630 --> 00:31:36,680 >> Maintenant, plutôt que allumeuse à part dans sa totalité, 709 00:31:36,680 --> 00:31:38,520 Regardons simplement à certains modèles. 710 00:31:38,520 --> 00:31:44,850 Cette syntaxe semble avoir combien de fonctions anonymes 711 00:31:44,850 --> 00:31:49,584 ou des fonctions anonymes ou fonctions lambda AKA? 712 00:31:49,584 --> 00:31:50,190 Deux, non? 713 00:31:50,190 --> 00:31:52,690 Et vous savez que, même si vous n'êtes pas super confortable avec cela, 714 00:31:52,690 --> 00:31:55,780 simplement par le fait qu 'il dit function () deux fois. 715 00:31:55,780 --> 00:31:58,172 >> Et il se trouve que ce que ce code est doing-- 716 00:31:58,172 --> 00:32:01,255 et nous référons à des références en ligne, finalement, un peu d'aide avec cela. 717 00:32:01,255 --> 00:32:04,480 Cela signifie juste que quand le document est prêt, 718 00:32:04,480 --> 00:32:07,490 allez-y et vous inscrire la fonction suivante 719 00:32:07,490 --> 00:32:12,064 que le gestionnaire soumet à l'HTML élément dont idée unique est démo. 720 00:32:12,064 --> 00:32:14,480 Et puis, quand cela arrive, appeler ces deux lignes de code. 721 00:32:14,480 --> 00:32:18,677 Et cela est, malheureusement, un plus manière verbeuse de dire return false. 722 00:32:18,677 --> 00:32:21,510 Et nous en avons parlé juste parce que vous verrez ce type de code en ligne. 723 00:32:21,510 --> 00:32:23,140 Et ça n'a rien à se laisser impressionner par. 724 00:32:23,140 --> 00:32:26,057 Mais plutôt, gardez à l'esprit que ce qui est va être commune en JavaScript 725 00:32:26,057 --> 00:32:26,765 est ce paradigme. 726 00:32:26,765 --> 00:32:29,510 Et voilà pourquoi nous montrons tout pour l'instant. 727 00:32:29,510 --> 00:32:30,010 Bien. 728 00:32:30,010 --> 00:32:32,730 Donc, sans trop d'habitation bien que sur la syntaxe, 729 00:32:32,730 --> 00:32:37,800 sont il ya des questions sur ces exemples ou des idées à ce jour? 730 00:32:37,800 --> 00:32:38,300 Bien. 731 00:32:38,300 --> 00:32:40,220 Donc, nous allons l'utiliser pour quelque chose d'utile. 732 00:32:40,220 --> 00:32:47,070 Faire une page Web qui indique juste bonjour, telle et telle est pas tout à fait intéressant, 733 00:32:47,070 --> 00:32:47,830 pas de underwhelm. 734 00:32:47,830 --> 00:32:51,038 Celui-ci ne va pas être beau, mais il va faire quelque chose d'utile. 735 00:32:51,038 --> 00:32:56,350 Permettez-moi de revenir à mon répertoire ici et d'ouvrir, dire, la forme-0.html. 736 00:32:56,350 --> 00:32:59,320 >> Donc, supposons que ceci est la première année sports intra-muros page d'inscription 737 00:32:59,320 --> 00:33:01,780 sans CSS ou tout sens de la conception. 738 00:33:01,780 --> 00:33:05,404 Et je veux aller de l'avant et Enregistrez-vous ici avec un mot de passe. 739 00:33:05,404 --> 00:33:08,320 Et je vais accepter les termes et les conditions et cliquez sur Enregistrer. 740 00:33:08,320 --> 00:33:11,700 Et maintenant, le site dit, "Vous êtes enregistré! (Eh bien pas vraiment.)" 741 00:33:11,700 --> 00:33:15,070 Qui semble comme il a travaillé, mais laissez-moi aller de l'avant et de la force de rechargement. 742 00:33:15,070 --> 00:33:18,720 >> Et permettez-moi de dire, non, vous ne le faites pas besoin de mon adresse e-mail réelle. 743 00:33:18,720 --> 00:33:21,820 Ou peut-être, nous dirons juste courrier là-dedans. 744 00:33:21,820 --> 00:33:25,080 Mot de passe sera, comme, 12345. 745 00:33:25,080 --> 00:33:28,810 Et puis, juste parce que je suis un idiot, maintenant il est 123456789. 746 00:33:28,810 --> 00:33:31,150 Et je ne vais pas de vérifier votre boîte. 747 00:33:31,150 --> 00:33:31,850 >> Hmm. 748 00:33:31,850 --> 00:33:32,350 Bien. 749 00:33:32,350 --> 00:33:34,920 Donc, il ya plusieurs possibilités pour l'amélioration ici. 750 00:33:34,920 --> 00:33:39,070 Et vous savez, ou allez voir dans pset sept, que vous pouvez écrire code-- 751 00:33:39,070 --> 00:33:41,890 et vous devrez écrire code dans PHP-- à défendre 752 00:33:41,890 --> 00:33:45,780 contre ces types d'utilisateurs erreurs parce que l'utilisateur clairement 753 00:33:45,780 --> 00:33:46,790 n'a pas coopéré. 754 00:33:46,790 --> 00:33:49,680 Et il ou elle ne vous a pas donné tous les valeurs que vous vouliez ou même dans le format 755 00:33:49,680 --> 00:33:50,630 que vous les vouliez. 756 00:33:50,630 --> 00:33:53,250 Donc, vous le verrez dans pset sept qui nous pourrions certainement avoir une certaine 757 00:33:53,250 --> 00:33:55,680 si les conditions qui disent si l'adresse e-mail 758 00:33:55,680 --> 00:33:59,450 est pas un username@something.edu, Nous pourrions simplement 759 00:33:59,450 --> 00:34:02,575 dire désolé et présenter des excuses à l'utilisateur beaucoup, comme vous pourriez être dans pset sept. 760 00:34:02,575 --> 00:34:05,700 Ou si ils ont pas vérifié cette boîte, se révèle en PHP, vous pouvez détecter que, 761 00:34:05,700 --> 00:34:06,200 aussi. 762 00:34:06,200 --> 00:34:09,389 Et certainement, si les mots de passe ne correspondent pas comme dans register.php 763 00:34:09,389 --> 00:34:11,521 pset pour sept, vous pouvez détecter que. 764 00:34:11,521 --> 00:34:13,770 Mais cela est une douleur dans le cou que maintenant ils demandent 765 00:34:13,770 --> 00:34:15,510 nous d'aller tout le chemin vers le serveur. 766 00:34:15,510 --> 00:34:17,053 L'utilisateur est informé de l'erreur. 767 00:34:17,053 --> 00:34:19,219 Et au moins, sauf si vous utilisez quelques techniques fantaisistes, 768 00:34:19,219 --> 00:34:20,929 maintenant ils doivent cliquer sur la flèche de retour. 769 00:34:20,929 --> 00:34:23,300 Ne serait-il pas agréable, comme un grand nombre de sites Web d'aujourd'hui, 770 00:34:23,300 --> 00:34:26,190 si vous aviez plus immédiate rétroaction, instantanément? 771 00:34:26,190 --> 00:34:31,389 >> En d'autres termes, laissez-moi aller à la version un, qui va pas être joli. 772 00:34:31,389 --> 00:34:33,469 Mais il a cette caractéristique. 773 00:34:33,469 --> 00:34:39,590 Malan, 12345, 123456789, pas va vérifier la boîte, enregistrer. 774 00:34:39,590 --> 00:34:41,330 Les mots de passe ne correspondent pas. 775 00:34:41,330 --> 00:34:44,459 Ainsi, même si ce pop-up est ugly-- nous pouvons remplacer éventuellement 776 00:34:44,459 --> 00:34:47,000 avec quelque chose comme Bootstrap, que vous verrez dans pset sept 777 00:34:47,000 --> 00:34:50,239 est un très populaire library-- je l'ai fait détectent que les mots de passe ne correspondent pas. 778 00:34:50,239 --> 00:34:50,739 Bien. 779 00:34:50,739 --> 00:34:52,530 Eh bien, permettez-moi de résoudre ce que l'utilisateur. 780 00:34:52,530 --> 00:34:55,460 Laissez-moi aller de l'avant et dis 12345, 12345. 781 00:34:55,460 --> 00:34:57,780 Toujours pas de vérifier l'accord. 782 00:34:57,780 --> 00:35:00,210 Vous devez accepter les termes et conditions. 783 00:35:00,210 --> 00:35:01,760 Alors pourquoi? 784 00:35:01,760 --> 00:35:04,100 >> Si nous avons déjà posé qu'il ya un moyen, 785 00:35:04,100 --> 00:35:07,260 et nous vous avons tenus dans pset sept pour détecter erreur 786 00:35:07,260 --> 00:35:09,780 de telles conditions côté serveur, pourquoi devrais-je 787 00:35:09,780 --> 00:35:13,940 embêter aussi le faire en JavaScript? 788 00:35:13,940 --> 00:35:15,850 Qu'est-ce qu'un argument en faveur de l'ajout ce 789 00:35:15,850 --> 00:35:18,760 vous êtes sur le point de voir comme some-- il ya une complexité supplémentaire. 790 00:35:18,760 --> 00:35:23,610 791 00:35:23,610 --> 00:35:25,930 >> Peut-être il n'y a pas à l'envers. 792 00:35:25,930 --> 00:35:26,924 Qu'est ce que ça pourrait être? 793 00:35:26,924 --> 00:35:27,840 AUDIENCE: [inaudible]. 794 00:35:27,840 --> 00:35:31,132 795 00:35:31,132 --> 00:35:32,340 DAVID MALAN: Oh, intéressant. 796 00:35:32,340 --> 00:35:33,530 Exploits potentiels. 797 00:35:33,530 --> 00:35:37,540 Alors bien sûr, si vous n'êtes pas la manipulation entrée utilisateur erronée que grande, 798 00:35:37,540 --> 00:35:40,170 il est peut être d'autant mieux si elle n'a même pas atteindre votre serveur. 799 00:35:40,170 --> 00:35:42,160 Je voudrais repousser là et par exemple, vous devriez probablement 800 00:35:42,160 --> 00:35:43,284 fixer à la fois de ces problèmes. 801 00:35:43,284 --> 00:35:44,140 Mais que ce soit juste. 802 00:35:44,140 --> 00:35:44,710 Quoi d'autre? 803 00:35:44,710 --> 00:35:45,626 >> AUDIENCE: [inaudible]. 804 00:35:45,626 --> 00:35:47,970 805 00:35:47,970 --> 00:35:49,014 >> DAVID MALAN: Ouais. 806 00:35:49,014 --> 00:35:51,680 Ce code, comme nous l'avons dit, est interprété sur le côté client. 807 00:35:51,680 --> 00:35:53,846 Il ne dérange pas le serveur, ce qui signifie qu'il ne 808 00:35:53,846 --> 00:35:55,930 une incidence sur la charge ou la capacité du serveur. 809 00:35:55,930 --> 00:35:59,840 Et maintenant, pour peu vieux moi, cela n'a pas d'effet significatif 810 00:35:59,840 --> 00:36:01,970 parce que je dois un utilisateur en ce moment. 811 00:36:01,970 --> 00:36:04,010 >> Mais si vous êtes tout site web de taille décente, 812 00:36:04,010 --> 00:36:07,400 en particulier les plus grands, comme Facebook, plus vous pouvez garder les gens hors 813 00:36:07,400 --> 00:36:09,927 de votre serveur le mieux car un serveur, bien sûr, 814 00:36:09,927 --> 00:36:12,510 ne dispose que d'une quantité limitée de mémoire vive, un nombre fini de gigahertz, 815 00:36:12,510 --> 00:36:16,340 un nombre fini de choses il peut le faire par unité de temps. 816 00:36:16,340 --> 00:36:19,170 Donc, si il ya plus de gens dans le monde de frapper votre serveur, 817 00:36:19,170 --> 00:36:21,750 connectant accidentellement à tort, tout aussi bien, si vous 818 00:36:21,750 --> 00:36:23,254 peut garder que la charge de votre serveur. 819 00:36:23,254 --> 00:36:25,420 De plus, en particulier sur un mobile device-- Si vous avez déjà 820 00:36:25,420 --> 00:36:29,190 ou se connecter à my.harvard La netid de Yale ou similaire, 821 00:36:29,190 --> 00:36:32,330 il ya ce le temps de latence avec beaucoup de des sites comme celle par laquelle il prend, 822 00:36:32,330 --> 00:36:34,110 comme, un putain de seconde ou deux parfois. 823 00:36:34,110 --> 00:36:37,979 Et puis, mon Dieu, si vous les fautes de frappe, alors vous devez frapper en arrière et refaire. 824 00:36:37,979 --> 00:36:40,520 Donc, il ya de latence, surtout sur les connexions réseau lentes. 825 00:36:40,520 --> 00:36:43,030 Mais JavaScript, parce il est exécuté sur le client 826 00:36:43,030 --> 00:36:46,720 et n'a pas besoin d'aller d'avant en arrière à travers un Internet potentiellement lente 827 00:36:46,720 --> 00:36:49,780 connexion, vous pouvez obtenir rétroaction presque instantanée. 828 00:36:49,780 --> 00:36:50,760 >> Alors regardons à ce. 829 00:36:50,760 --> 00:36:54,280 Permettez-moi de Open Up-forme 0 et regarder le HTML ici. 830 00:36:54,280 --> 00:36:56,040 Et nous allons voir tout ce qui se passe. 831 00:36:56,040 --> 00:36:59,460 Ceci est une forme dont la action est register.php. 832 00:36:59,460 --> 00:37:01,530 Je suis juste en utilisant obtenez que je pouvais voir l'URL. 833 00:37:01,530 --> 00:37:05,030 Mais pour les mots de passe, nous serions sûrement voulons pour changer ce pour poster dans la réalité. 834 00:37:05,030 --> 00:37:06,910 Voici un champ de type texte d'entrée. 835 00:37:06,910 --> 00:37:09,050 Voici une autre entrée champ de type mot de passe. 836 00:37:09,050 --> 00:37:13,150 Voici, si vous ne l'avez jamais vu, une entrée de type case à cocher. 837 00:37:13,150 --> 00:37:15,250 >> Mais il n'y a pas JavaScript ici que ce soit. 838 00:37:15,250 --> 00:37:18,170 Ceci est juste HTML va à register.php. 839 00:37:18,170 --> 00:37:21,020 Mais dans la version un, où je commencé à obtenir ces pop-ups, 840 00:37:21,020 --> 00:37:23,010 nous allons voir ce qui se passe réellement ici. 841 00:37:23,010 --> 00:37:26,757 Dans la version une, ce qui Je vais see-- I 842 00:37:26,757 --> 00:37:29,340 pensais que je pouvais caler assez avec assez de mots, mais je suis sorti. 843 00:37:29,340 --> 00:37:35,180 844 00:37:35,180 --> 00:37:38,590 >> Dans la version One-- là nous allons. 845 00:37:38,590 --> 00:37:43,180 Dans la version un, remarquer la following-- et est mise en oeuvre pas la meilleure, 846 00:37:43,180 --> 00:37:44,420 mais il est mon premier. 847 00:37:44,420 --> 00:37:47,680 Notez que le dessous forme, je dois une balise script. 848 00:37:47,680 --> 00:37:49,430 Et une balise script signifie, hey, navigateur, ici 849 00:37:49,430 --> 00:37:52,340 vient un peu de code en, généralement, JavaScript. 850 00:37:52,340 --> 00:37:54,420 Et maintenant, remarque ce que je fais. 851 00:37:54,420 --> 00:37:59,070 Sur line-- je peux à peine lire it-- ligne 32, il est dit, 852 00:37:59,070 --> 00:38:01,420 var form-- alors donnez-moi une variable appelée forme. 853 00:38:01,420 --> 00:38:05,049 Et puis obtenir document.getElementId d '"enregistrement". 854 00:38:05,049 --> 00:38:05,590 Qu'est-ce que c'est? 855 00:38:05,590 --> 00:38:07,290 Eh bien, permettez-moi de rembobiner ici. 856 00:38:07,290 --> 00:38:11,510 Et remarquez, ah, je donnai l'élément de formulaire une idée arbitraire, mais descriptive 857 00:38:11,510 --> 00:38:13,050 de l'enregistrement. 858 00:38:13,050 --> 00:38:16,820 Donc, cela me donne une variable me permet de saisir ce nœud, 859 00:38:16,820 --> 00:38:19,580 ce rectangle dans l'arbre appelé forme. 860 00:38:19,580 --> 00:38:24,460 des moyens form.onsubmit, hé navigateur, enregistrer un écouteur d'événement 861 00:38:24,460 --> 00:38:25,470 sur ce formulaire. 862 00:38:25,470 --> 00:38:28,890 En d'autres termes, lorsque cette forme est soumis, exécutez le code suivant. 863 00:38:28,890 --> 00:38:30,810 Il n'a pas besoin d'un nom parce que Pourquoi avez-vous besoin de connaître le nom? 864 00:38:30,810 --> 00:38:32,880 Vous avez juste besoin de savoir ce que pour exécuter, ergo 865 00:38:32,880 --> 00:38:35,610 il est une fonction anonyme ou lambda. 866 00:38:35,610 --> 00:38:37,632 Et cette fonction est l'ensemble de ces lignes ici. 867 00:38:37,632 --> 00:38:40,840 Et maintenant, pour être honnête, même si vous pourraient ne pas avoir jamais écrit JavaScript 868 00:38:40,840 --> 00:38:44,200 avant, il est juste logique C et PHP. 869 00:38:44,200 --> 00:38:51,720 Donc, si form.email.value == "" - donc si le champ email est vide, 870 00:38:51,720 --> 00:38:54,980 crier à l'utilisateur ", vous devez fournir votre adresse e-mail ". 871 00:38:54,980 --> 00:38:58,980 Sinon, si form.password.value Yell est vierge à l'utilisateur, 872 00:38:58,980 --> 00:39:00,400 "Vous devez fournir votre mot de passe." 873 00:39:00,400 --> 00:39:04,240 >> Plus intéressant encore, logiquement, si form.password.value ne le fait pas 874 00:39:04,240 --> 00:39:08,630 égale form.confirmation.value-- d'où vient la confirmation vient-il? 875 00:39:08,630 --> 00:39:09,470 Permettez-moi de revenir en arrière. 876 00:39:09,470 --> 00:39:12,870 Eh bien, je ai appelé cette entrée champ ici le mot de passe. 877 00:39:12,870 --> 00:39:15,180 Et je appelé celui-là confirmation. 878 00:39:15,180 --> 00:39:17,850 Je pourrais l'ai appelé mot de passe deux ou autre chose. 879 00:39:17,850 --> 00:39:20,560 Je vérifie logiquement que ces deux sont les mêmes. 880 00:39:20,560 --> 00:39:25,760 Else-- il se trouve présente M. Boole again-- une valeur booléenne, la case à cocher. 881 00:39:25,760 --> 00:39:29,810 Donc, si je dis, exclamation point-- sinon form.agreement.checked, 882 00:39:29,810 --> 00:39:31,820 crier à l'utilisateur ainsi. 883 00:39:31,820 --> 00:39:34,470 >> Donc, cette syntaxe que vous verrez est très commun en JavaScript, 884 00:39:34,470 --> 00:39:35,970 où vous avez cette notation en pointillés. 885 00:39:35,970 --> 00:39:37,460 Vous commencez avec un objet ici. 886 00:39:37,460 --> 00:39:41,430 Vous plongez dans plus profond à un à une propriété comme mot de passe. 887 00:39:41,430 --> 00:39:43,280 Et puis vous obtenez à sa valeur réelle. 888 00:39:43,280 --> 00:39:45,830 Et encore une fois, voici l'entrée. 889 00:39:45,830 --> 00:39:47,310 Voici le mot de passe nom. 890 00:39:47,310 --> 00:39:50,860 Et sa valeur est quel que soit le humaine a effectivement tapé dans. 891 00:39:50,860 --> 00:39:53,610 >> Donc, dans l'ensemble de ces cas, je suis retourné faux. 892 00:39:53,610 --> 00:39:55,800 Mais sinon, je retourne vrai. 893 00:39:55,800 --> 00:39:58,030 Et maintenant nous voyons un utilisation convaincante du moment 894 00:39:58,030 --> 00:40:00,620 vous revenir faux Arrêtez ce que l'utilisateur de faire 895 00:40:00,620 --> 00:40:03,200 et faire de lui choisir nouveau ou tapez à nouveau. 896 00:40:03,200 --> 00:40:05,870 Sinon, nous revenons vrai. 897 00:40:05,870 --> 00:40:08,585 >> Et permettez-moi de vous présenter un autre variante de ce juste 898 00:40:08,585 --> 00:40:13,140 de semer une certaine compréhension de celui-ci. 899 00:40:13,140 --> 00:40:16,850 Eh bien, dans la version 2 de cette forme-2-- Je vais le faire avec un geste de la main. 900 00:40:16,850 --> 00:40:19,920 Ceci est, pour ceux qui sont curieux, la version jQuery, 901 00:40:19,920 --> 00:40:23,330 ceux d'entre vous qui voudraient barboter dans cette bibliothèque. 902 00:40:23,330 --> 00:40:25,145 Mais soyons start-- et des questions? 903 00:40:25,145 --> 00:40:29,230 Permettez-moi une pause pour un moment parce qui était rapide et beaucoup. 904 00:40:29,230 --> 00:40:32,610 >> Mais la bonne chose ici est que tous les du code est à peu près la même chose. 905 00:40:32,610 --> 00:40:33,985 Le nouveau truc est ce qui est le DOM? 906 00:40:33,985 --> 00:40:35,115 Quels sont ces rectangles? 907 00:40:35,115 --> 00:40:35,990 Quels sont ces nœuds? 908 00:40:35,990 --> 00:40:37,540 Qu'est-ce qu'une fonction anonyme? 909 00:40:37,540 --> 00:40:38,830 Qu'est-ce qu'un gestionnaire d'événement? 910 00:40:38,830 --> 00:40:43,480 Mais heureusement, la plupart de qui est juste cercle complet de, disons, la semaine zéro. 911 00:40:43,480 --> 00:40:43,980 Bien. 912 00:40:43,980 --> 00:40:46,070 Donc, quelque chose de légèrement plus intéressant? 913 00:40:46,070 --> 00:40:49,340 Eh bien, tout d'abord, laissez-moi aller avant et d'ouvrir Google Maps. 914 00:40:49,340 --> 00:40:53,360 Et vous remarquerez que pour une moment, sur la fraction de seconde, 915 00:40:53,360 --> 00:40:55,930 remarquer ce qui arrive quand Je clique assez vite. 916 00:40:55,930 --> 00:40:59,720 Et cette connexion à Harvard est si vite que vous ne remarquerez pas vraiment il. 917 00:40:59,720 --> 00:41:04,469 Mais qu'est-ce que vous sorte de sorte de voir si je cliquer et faire glisser très vite? 918 00:41:04,469 --> 00:41:07,010 Ceux d'entre vous regarder en ligne, si vous ralentissez à la vitesse de cette 0.5x, 919 00:41:07,010 --> 00:41:09,640 vous pouvez voir ce mieux. 920 00:41:09,640 --> 00:41:13,550 >> Qu'est-ce qui se passait juste avant que je cliqués et déplacés? 921 00:41:13,550 --> 00:41:15,900 Permettez-moi d'essayer ici-- laissez-moi faire autre chose, comme 90210. 922 00:41:15,900 --> 00:41:17,550 Allons plus loin. 923 00:41:17,550 --> 00:41:19,000 Cela a été très rapide, trop. 924 00:41:19,000 --> 00:41:22,460 Que diriez-vous Disney World? 925 00:41:22,460 --> 00:41:23,190 Nous y voilà. 926 00:41:23,190 --> 00:41:23,690 D'ACCORD. 927 00:41:23,690 --> 00:41:26,030 Qu'avez-vous vu pour une fraction de seconde? 928 00:41:26,030 --> 00:41:27,200 Juste, comme, carrés, non? 929 00:41:27,200 --> 00:41:28,930 Les espaces réservés pour les carreaux? 930 00:41:28,930 --> 00:41:30,270 >> Eh bien, ce qui se passe ici? 931 00:41:30,270 --> 00:41:35,410 Google Maps est un bel exemple de cette technologie qui est appelée AJAX. 932 00:41:35,410 --> 00:41:38,510 Et cela est l'endroit où nous allons commencer à utiliser le code JavaScript dans un particulier 933 00:41:38,510 --> 00:41:39,277 manière séduisante. 934 00:41:39,277 --> 00:41:41,610 Retour dans la journée, il y avait ce site Web appelé MapQuest. 935 00:41:41,610 --> 00:41:44,120 Et je l'aurais pris un capture d'écran de ce billet depuis les années 1990, 936 00:41:44,120 --> 00:41:45,820 où si vous vouliez voir ici sur la carte, 937 00:41:45,820 --> 00:41:48,590 vous littéralement cliquez sur une flèche au sommet que vous a montré 938 00:41:48,590 --> 00:41:49,870 une place différente de la carte. 939 00:41:49,870 --> 00:41:51,790 Si vous vouliez aller à gauche, vous cliqué une flèche qui vous a montré 940 00:41:51,790 --> 00:41:53,210 une place différente de la carte. 941 00:41:53,210 --> 00:41:54,840 Et certains sites le font encore aujourd'hui. 942 00:41:54,840 --> 00:41:57,820 Mais même MapQuest a obtenu mieux, comme Google Maps. 943 00:41:57,820 --> 00:42:01,880 >> Au lieu de cela, ce qui est mieux ces jours est sites Web qui utilisent AJAX. 944 00:42:01,880 --> 00:42:04,510 Autrement connu comme AJAX-- Asynchronous JavaScript and XML, 945 00:42:04,510 --> 00:42:08,370 qui est juste une façon élégante de dire une technologie ou une technique qui 946 00:42:08,370 --> 00:42:14,200 permet à un navigateur en utilisant JavaScript de faire des requêtes HTTP supplémentaires 947 00:42:14,200 --> 00:42:16,390 après que la page a été chargée. 948 00:42:16,390 --> 00:42:17,479 Qu'est-ce que cela signifie? 949 00:42:17,479 --> 00:42:19,270 Eh bien, ce serait un peu de gênant dans Gmail 950 00:42:19,270 --> 00:42:21,103 si chaque fois que vous vouliez de vérifier votre courrier, 951 00:42:21,103 --> 00:42:24,940 vous aviez littéralement faire Control-R ou Commande-R ou cliquez sur le bouton Recharger 952 00:42:24,940 --> 00:42:26,580 et la page darn ensemble serait recharger. 953 00:42:26,580 --> 00:42:26,800 Droit? 954 00:42:26,800 --> 00:42:28,460 Il serait clignoter en blanc probablement pour la deuxième. 955 00:42:28,460 --> 00:42:30,043 Vous souhaitez voir la barre de progression stupide. 956 00:42:30,043 --> 00:42:33,170 Et juste pour voir si vous avez de nouveaux courrier, la page Web entière et l'URL 957 00:42:33,170 --> 00:42:34,580 vous êtes au aurait pour recharger. 958 00:42:34,580 --> 00:42:35,960 >> Mais cela ne ce qui se passe dans Gmail. 959 00:42:35,960 --> 00:42:36,459 Droit? 960 00:42:36,459 --> 00:42:40,300 Lorsque vous recevez un nouveau mail dans Gmail, ce qui se passe sur l'écran? 961 00:42:40,300 --> 00:42:41,480 Il montre juste en haut, à droite? 962 00:42:41,480 --> 00:42:44,280 Il apparaît comme par magie comme une nouvelle ligne dans le tableau. 963 00:42:44,280 --> 00:42:47,030 Cela implique en fait une quantité décente de complexité. 964 00:42:47,030 --> 00:42:51,892 En fait, si vous pensez à cet arbre, qui, même si est simple ici, 965 00:42:51,892 --> 00:42:54,100 Gmail-- et je voudrais avoir à regarder le code d'être sure-- 966 00:42:54,100 --> 00:42:58,710 a probablement un tableau HTML ou peut-être une liste non ordonnée qu'elle rend 967 00:42:58,710 --> 00:43:01,060 chacun de votre boîte de réception e-mails comme. 968 00:43:01,060 --> 00:43:04,050 >> Et donc si vous imaginez cela, il est un arbre en mémoire lorsque vous êtes 969 00:43:04,050 --> 00:43:09,050 l'utilisation de Gmail qui ressemble sorte de sorte de comme ça, quand Google réalise, ooh, 970 00:43:09,050 --> 00:43:12,770 vous avez un nouvel email, il n'a pas voulons reconstruire l'arbre tout entier. 971 00:43:12,770 --> 00:43:16,430 Au contraire, il veut trouver le nœud l'arbre qui représente votre boîte de réception 972 00:43:16,430 --> 00:43:18,580 et il suffit d'insérer un nouveau nœud. 973 00:43:18,580 --> 00:43:24,640 >> Donc, très similaire à PSEt cinq, où vous eu pour insérer des noeuds dans une table de hachage, 974 00:43:24,640 --> 00:43:28,410 fait similaire Google, via Code JavaScript qu'il a écrit, 975 00:43:28,410 --> 00:43:31,890 Traverse cet arbre, comprendre où est que la boîte de réception partie de la fenêtre, 976 00:43:31,890 --> 00:43:33,440 puis insérer une nouvelle ligne. 977 00:43:33,440 --> 00:43:37,460 Et une nouvelle ligne signifie simplement un ou plusieurs nouveaux noeuds dans un arbre. 978 00:43:37,460 --> 00:43:41,340 >> Et donc AJAX est cette technique qui permet exactement cela. 979 00:43:41,340 --> 00:43:44,440 Une fois que vous avez visité une URL, Toutefois folle de temps il est, 980 00:43:44,440 --> 00:43:46,472 et une fois que la page a été chargé, vous pouvez toujours 981 00:43:46,472 --> 00:43:48,430 saisir plus de données à partir de la internet-- que ce soit 982 00:43:48,430 --> 00:43:52,460 un courriel ou une tuile d'un map-- saisir les coulisses 983 00:43:52,460 --> 00:43:55,290 et puis l'insérer dans la page de sorte que l'homme n'a pas vraiment 984 00:43:55,290 --> 00:43:56,910 avoir à attendre pour cela. 985 00:43:56,910 --> 00:43:58,980 >> Facebook Messenger fonctionne de la même façon. 986 00:43:58,980 --> 00:44:01,562 Tout nombre d'autres websites-- Oh, en fait, même cette. 987 00:44:01,562 --> 00:44:04,270 Je veux dire, cela est, franchement, sorte de un ennuyeux disposent ces jours. 988 00:44:04,270 --> 00:44:07,500 Si je me mets à la recherche de cette cats-- est une sorte de une expérience utilisateur horrible. 989 00:44:07,500 --> 00:44:08,990 Il vient de commence la recherche pour moi. 990 00:44:08,990 --> 00:44:10,050 Eh bien ce que fait-il? 991 00:44:10,050 --> 00:44:12,920 L'URL n'a pas vraiment changé depuis que je frappe. 992 00:44:12,920 --> 00:44:17,330 Mais ce qui se passe à travers le wire-- OK, hmm intéressant. 993 00:44:17,330 --> 00:44:20,470 Qu'est-ce qui se passe à travers le fil ici obtient juste bizarre. 994 00:44:20,470 --> 00:44:21,090 >> D'ACCORD. 995 00:44:21,090 --> 00:44:24,670 Alors laissez-moi aller de l'avant et d'inspecter élément et allez dans l'onglet Réseau 996 00:44:24,670 --> 00:44:27,040 et essayer de faire ce technique et moins sur les chats. 997 00:44:27,040 --> 00:44:32,595 Comme je tape, littéralement, chats et-- ce qui se passe 998 00:44:32,595 --> 00:44:37,710 per-- Je ne vais pas à cliquer sur ce. 999 00:44:37,710 --> 00:44:38,210 Bien. 1000 00:44:38,210 --> 00:44:44,280 Donc, ici-bas, ce qui se passe tous les fois que je tape un caractère, apparemment? 1001 00:44:44,280 --> 00:44:45,000 Comme, le faible niveau? 1002 00:44:45,000 --> 00:44:47,860 Qu'est-ce qui se passe avec chacun de ces caractères Je tape à mon clavier? 1003 00:44:47,860 --> 00:44:48,359 Ouais? 1004 00:44:48,359 --> 00:44:50,950 AUDIENCE: [inaudible]. 1005 00:44:50,950 --> 00:44:52,340 >> DAVID MALAN: Exactement. 1006 00:44:52,340 --> 00:44:55,600 Chacun de ces caractères est aller sur Google, un à la fois. 1007 00:44:55,600 --> 00:44:58,490 Ils construisent une chaîne sur leur serveur qui représente 1008 00:44:58,490 --> 00:44:59,936 tout ce que je l'ai tapé jusqu'ici. 1009 00:44:59,936 --> 00:45:01,810 Et chaque fois que je tape un autre personnage, ils 1010 00:45:01,810 --> 00:45:04,530 utiliser leur sauce secrète d'un algorithme de recherche et de comprendre, 1011 00:45:04,530 --> 00:45:07,370 veut-il dire cette page de chat ou cette page de chat ou similaire? 1012 00:45:07,370 --> 00:45:10,620 Donc, dans un certain sens, il me donne un meilleure expérience dans ce que je fais même pas 1013 00:45:10,620 --> 00:45:11,860 besoin de compléter ma pensée. 1014 00:45:11,860 --> 00:45:14,440 Et en effet, il est un outil utile chose, saisie semi-automatique en général. 1015 00:45:14,440 --> 00:45:17,690 Si leurs algorithmes sont assez bon et si mes recherches sont assez évident, 1016 00:45:17,690 --> 00:45:19,300 Je ne dois pas taper le mot en entier. 1017 00:45:19,300 --> 00:45:22,110 Ils vont me dire ce qu'il est que je suis effectivement cherchais. 1018 00:45:22,110 --> 00:45:25,940 Donc, ce que Google appelle instantanée la recherche est juste en utilisant AJAX, 1019 00:45:25,940 --> 00:45:30,820 en utilisant un code qui leur permet de demander contenu supplémentaire via un navigateur Web 1020 00:45:30,820 --> 00:45:34,026 derrière les scènes à l'aide de cette nouvelle langue, JavaScript. 1021 00:45:34,026 --> 00:45:35,400 Donc, nous avons un couple de minutes. 1022 00:45:35,400 --> 00:45:37,710 Et laissez-moi appeler mon copain Colton place sur la scène, 1023 00:45:37,710 --> 00:45:40,090 car il semblait particulièrement amusant dernière fois 1024 00:45:40,090 --> 00:45:42,290 d'introduire une technologie que certains d'entre vous 1025 00:45:42,290 --> 00:45:44,769 ont exprimé un intérêt dans des projets finaux. 1026 00:45:44,769 --> 00:45:47,310 Nous avons pensé qu'il serait amusant de faire un bénévole, même si, aujourd'hui, 1027 00:45:47,310 --> 00:45:50,074 vous montrer un ajout à ce qui permet vous-- ouais, 1028 00:45:50,074 --> 00:45:50,990 Je vis cette première main. 1029 00:45:50,990 --> 00:45:52,900 Monte. 1030 00:45:52,900 --> 00:45:53,560 Très bien fait. 1031 00:45:53,560 --> 00:45:55,035 Bon travail. 1032 00:45:55,035 --> 00:45:57,410 Je vais projeter cela sur l'écran dans un instant. 1033 00:45:57,410 --> 00:45:58,150 Quel est votre nom pour tout le monde? 1034 00:45:58,150 --> 00:45:59,180 >> EPT: Je suis l'EPT. 1035 00:45:59,180 --> 00:45:59,410 >> DAVID MALAN: Etha? 1036 00:45:59,410 --> 00:45:59,785 >> EPT: EPT. 1037 00:45:59,785 --> 00:46:00,160 >> DAVID MALAN: l'EPT? 1038 00:46:00,160 --> 00:46:00,730 >> EPT: Ouais. 1039 00:46:00,730 --> 00:46:01,250 >> DAVID MALAN: Ravi de vous voir. 1040 00:46:01,250 --> 00:46:01,600 Bien. 1041 00:46:01,600 --> 00:46:02,590 Permettez-moi d'obtenir ce prêt. 1042 00:46:02,590 --> 00:46:04,423 Venez sur plus de la milieu avec Colton ici. 1043 00:46:04,423 --> 00:46:07,050 Qu'est-ce que Colton a dans ses mains aujourd'hui est une télécommande. 1044 00:46:07,050 --> 00:46:10,440 Alors plutôt que de rester là dans un monde tridimensionnel en regardant autour 1045 00:46:10,440 --> 00:46:14,080 que Colton a fait, maintenant EFA peut effectivement se promener en remontant, 1046 00:46:14,080 --> 00:46:16,689 bas, à gauche, et à droite comme un Contrôleur de Nintendo ou Xbox. 1047 00:46:16,689 --> 00:46:18,230 EPT: je vais tomber de la scène. 1048 00:46:18,230 --> 00:46:20,500 DAVID MALAN: Je vais tenir à peu près ici. 1049 00:46:20,500 --> 00:46:21,991 Mais cela est un risque. 1050 00:46:21,991 --> 00:46:22,490 D'ACCORD. 1051 00:46:22,490 --> 00:46:25,690 Donc, aller de l'avant et de mettre ceux sur. 1052 00:46:25,690 --> 00:46:29,315 Laissez-moi aller de l'avant et passer à l'écran ici. 1053 00:46:29,315 --> 00:46:30,670 Permettez-moi de baisser les lumières. 1054 00:46:30,670 --> 00:46:32,780 Et Colton, permettez-moi se tenir à côté de vous. 1055 00:46:32,780 --> 00:46:35,520 >> Voulez-vous expliquer ici avec le micro ce que nous faisons? 1056 00:46:35,520 --> 00:46:36,380 Et voilà. 1057 00:46:36,380 --> 00:46:37,280 >> COLTON: Bien sûr. 1058 00:46:37,280 --> 00:46:39,980 Donc maintenant nous sommes le chargement de l'Oculus, 1059 00:46:39,980 --> 00:46:43,070 Je suppose operating-- ne fonctionne pas système, mais le programme principal, où 1060 00:46:43,070 --> 00:46:46,630 vous pouvez accéder à tous les jeux et applications qui sont dans votre bibliothèque. 1061 00:46:46,630 --> 00:46:50,060 Donc maintenant, il devrait dire appuyez sur le pavé tactile pour commencer. 1062 00:46:50,060 --> 00:46:53,430 Touchpad va être sur le côté droit du casque. 1063 00:46:53,430 --> 00:46:54,569 Alors allez-y et tap-- 1064 00:46:54,569 --> 00:46:55,110 EPT: Oh, l'homme. 1065 00:46:55,110 --> 00:46:56,443 DAVID MALAN: Ouais, là vous allez. 1066 00:46:56,443 --> 00:47:00,340 1067 00:47:00,340 --> 00:47:02,460 La qualité est de voir Efa est bien meilleure qualité. 1068 00:47:02,460 --> 00:47:03,831 Ceci est juste le Wi-Fi ici. 1069 00:47:03,831 --> 00:47:05,580 COLTON: Donc, ce que vous êtes allez vouloir faire 1070 00:47:05,580 --> 00:47:08,350 est de regarder vers le haut droit de l'écran. 1071 00:47:08,350 --> 00:47:10,420 Yep, ce jeu sur la droite tout en haut. 1072 00:47:10,420 --> 00:47:14,780 Et puis, lorsque vous sélectionnez il, appuyez de nouveau sur le pavé tactile. 1073 00:47:14,780 --> 00:47:17,010 Je pense que ses Dreadhalls. 1074 00:47:17,010 --> 00:47:20,820 Et puis ici est A-- ici, laissez- me tenir vos lunettes pour vous. 1075 00:47:20,820 --> 00:47:24,420 1076 00:47:24,420 --> 00:47:25,790 >> Je viens donc lui ai donné un contrôleur. 1077 00:47:25,790 --> 00:47:28,886 Alors maintenant, il peut contrôler le jeu. 1078 00:47:28,886 --> 00:47:30,510 Il peut se déplacer et des trucs comme ça. 1079 00:47:30,510 --> 00:47:31,968 Alors allez-y et regardez vers le haut. 1080 00:47:31,968 --> 00:47:33,640 Vous devriez voir un nouveau jeu. 1081 00:47:33,640 --> 00:47:36,310 Alors allez-y et vous pouvez le faire. 1082 00:47:36,310 --> 00:47:39,320 Maintenant, vous devriez être en mesure de contrôler vous avec le contrôleur, 1083 00:47:39,320 --> 00:47:43,860 ainsi, dès que le jeu se charge ici. 1084 00:47:43,860 --> 00:47:46,356 Cela pourrait être un peu effrayant. 1085 00:47:46,356 --> 00:47:47,300 >> EPT: Maintenant, vous me dites. 1086 00:47:47,300 --> 00:47:50,132 D'ACCORD. 1087 00:47:50,132 --> 00:47:51,080 >> COLTON: Très bien. 1088 00:47:51,080 --> 00:47:52,650 Donc, vérifiez que vous pouvez déplacer. 1089 00:47:52,650 --> 00:47:52,750 D'ACCORD. 1090 00:47:52,750 --> 00:47:53,583 Vous pouvez vous déplacer. 1091 00:47:53,583 --> 00:47:54,300 Parfait. 1092 00:47:54,300 --> 00:47:56,470 Donc, si vous regardez en bas, vous avez une carte. 1093 00:47:56,470 --> 00:47:58,170 Carte vous indique où vous êtes. 1094 00:47:58,170 --> 00:47:59,720 Vous pouvez regarder autour de la salle. 1095 00:47:59,720 --> 00:48:01,440 Vous pouvez tourner complètement autour. 1096 00:48:01,440 --> 00:48:02,128 Oui exactement. 1097 00:48:02,128 --> 00:48:02,627 Faire demi-tour. 1098 00:48:02,627 --> 00:48:05,370 1099 00:48:05,370 --> 00:48:07,125 >> Alors regardez à votre gauche. 1100 00:48:07,125 --> 00:48:09,875 Je pense qu'il ya quelque chose que vous pouvez ramasser sur un tonneau dans la chambre. 1101 00:48:09,875 --> 00:48:11,709 >> EPT: Comment puis-je obtenir la la carte de la route? 1102 00:48:11,709 --> 00:48:12,375 COLTON: Look up. 1103 00:48:12,375 --> 00:48:12,980 Il suffit de regarder vers le haut. 1104 00:48:12,980 --> 00:48:13,480 Bien. 1105 00:48:13,480 --> 00:48:13,765 Et voilà. 1106 00:48:13,765 --> 00:48:15,181 Maintenant, aller de l'avant et juste tourner autour. 1107 00:48:15,181 --> 00:48:21,460 1108 00:48:21,460 --> 00:48:24,620 Donc regarder plus loin sur votre gauche. 1109 00:48:24,620 --> 00:48:25,530 Continuez à vous déplacer à gauche. 1110 00:48:25,530 --> 00:48:26,960 Continuez à regarder à gauche. 1111 00:48:26,960 --> 00:48:27,541 Continue. 1112 00:48:27,541 --> 00:48:28,040 Ouais. 1113 00:48:28,040 --> 00:48:28,720 >> EPT: Oh, cette façon. 1114 00:48:28,720 --> 00:48:29,261 >> COLTON: Ouais. 1115 00:48:29,261 --> 00:48:30,999 Marchez vers elle avec le contrôleur. 1116 00:48:30,999 --> 00:48:31,540 Et voilà. 1117 00:48:31,540 --> 00:48:32,790 Maintenant, il devrait dire le ramasser. 1118 00:48:32,790 --> 00:48:33,360 Et voilà. 1119 00:48:33,360 --> 00:48:34,290 Ramasser. 1120 00:48:34,290 --> 00:48:35,550 Bien. 1121 00:48:35,550 --> 00:48:38,286 Maintenant, nous allons sortir de cette salle. 1122 00:48:38,286 --> 00:48:42,209 Allez-y et marcher jusqu'à la porte. 1123 00:48:42,209 --> 00:48:45,000 Donc, vous allez hold-- il est dit maintenez le bouton pour forcer l'ouverture. 1124 00:48:45,000 --> 00:48:46,333 Alors allez-y et maintenez le bouton. 1125 00:48:46,333 --> 00:48:48,250 Yep, forçant ouvrir. 1126 00:48:48,250 --> 00:48:48,750 Bien. 1127 00:48:48,750 --> 00:48:49,410 Bon travail. 1128 00:48:49,410 --> 00:48:50,826 Maintenant, nous sommes en sortant de la salle. 1129 00:48:50,826 --> 00:48:56,970 1130 00:48:56,970 --> 00:49:01,366 Donc, je vais laisser le reste en place à vous et voyez ce que vous découvrez. 1131 00:49:01,366 --> 00:49:02,865 EPT: je ne vais pas dans la chambre noire. 1132 00:49:02,865 --> 00:49:07,315 1133 00:49:07,315 --> 00:49:07,815 Oh attends. 1134 00:49:07,815 --> 00:49:09,314 Maintenant, je dois aller dans le couloir sombre? 1135 00:49:09,314 --> 00:49:10,785 OK, je vais retourner [inaudible]. 1136 00:49:10,785 --> 00:49:15,520 1137 00:49:15,520 --> 00:49:16,270 COLTON: Très bien. 1138 00:49:16,270 --> 00:49:17,560 Certains autres éléments à ramasser. 1139 00:49:17,560 --> 00:49:19,370 On dirait que quelques pièces de monnaie. 1140 00:49:19,370 --> 00:49:22,242 Voilà un choix de verrouillage. 1141 00:49:22,242 --> 00:49:24,200 Donc, si vous trouvez un verrouillé porte, vous pouvez l'utiliser. 1142 00:49:24,200 --> 00:49:27,755 1143 00:49:27,755 --> 00:49:28,380 As-tu peur? 1144 00:49:28,380 --> 00:49:29,371 >> EPT: Pas encore. 1145 00:49:29,371 --> 00:49:29,871 COLTON: OK. 1146 00:49:29,871 --> 00:49:34,850 1147 00:49:34,850 --> 00:49:35,497 >> Pretend-- ouais. 1148 00:49:35,497 --> 00:49:37,330 Juste prétendre que vous êtes effectivement debout là. 1149 00:49:37,330 --> 00:49:39,580 Et si vous tournez around-- vous avez à s'y habituer. 1150 00:49:39,580 --> 00:49:40,752 Mais il est logique. 1151 00:49:40,752 --> 00:49:43,960 DAVID MALAN: Et tandis que de l'EPT reste jouer, puisque nous ne pouvions le faire toute la journée, 1152 00:49:43,960 --> 00:49:45,381 nous pouvons tous la pointe des pieds ici. 1153 00:49:45,381 --> 00:49:48,130 Mais nous avons deux autres paires, si vous voulez venir et de jouer. 1154 00:49:48,130 --> 00:49:49,980 Sinon, nous allons voir vous la prochaine mercredi. 1155 00:49:49,980 --> 00:49:51,354 Merci à notre bénévole aujourd'hui. 1156 00:49:51,354 --> 00:49:52,101 [Applaudissements] 1157 00:49:52,101 --> 00:49:54,506 1158 00:49:54,506 --> 00:49:57,392 >> [MUSIQUE - "Seinfeld THEME"] 1159 00:49:57,392 --> 00:49:58,222 1160 00:49:58,222 --> 00:50:00,180 ENCEINTE 1: Eh bien, je suis montage mettant une nouvelle PL sur. 1161 00:50:00,180 --> 00:50:01,800 Je viens de changer l'OLPF-- 1162 00:50:01,800 --> 00:50:03,980 >> SPEAKER 2: Alors qu'est-ce faites-vous exactement? 1163 00:50:03,980 --> 00:50:07,063 >> ENCEINTE 1: Eh bien, chacun de these-- ici, je vais vous montrer celui-ci ici. 1164 00:50:07,063 --> 00:50:08,690 Vous pouvez le voir ici. 1165 00:50:08,690 --> 00:50:09,510 >> Intervenant 3: Je crois que je suis bon avec ceux-ci. 1166 00:50:09,510 --> 00:50:09,933 Vous voulez un peu plus? 1167 00:50:09,933 --> 00:50:11,325 >> ENCEINTE 4: Non, je suis bonne. [Inaudible]. 1168 00:50:11,325 --> 00:50:12,200 >> Intervenant 3: Non, [inaudible]. 1169 00:50:12,200 --> 00:50:12,700 Avoir une certaine. 1170 00:50:12,700 --> 00:50:21,165 1171 00:50:21,165 --> 00:50:22,290 ENCEINTE 1: La couleur différente. 1172 00:50:22,290 --> 00:50:22,890 SPEAKER 2: OK. 1173 00:50:22,890 --> 00:50:26,690 ENCEINTE 1: En fin de compte ce qu'il fait est qu'il ajuste la couleur de--