1 00:00:00,000 --> 00:00:39,630 2 00:00:39,630 --> 00:00:41,880 DAVID J. Malan: Très bien, si ce ici est le bras Myo 3 00:00:41,880 --> 00:00:44,450 bande, un couple dont nous avoir des projets définitifs CS50. 4 00:00:44,450 --> 00:00:47,533 Et ce fut une démonstration nous en attente vous à l'avance où l'essentiel 5 00:00:47,533 --> 00:00:51,120 ce bras assez serré baguage ici l'écoute de vos mouvements musculaires 6 00:00:51,120 --> 00:00:54,280 qui sont ensuite mappé dans le logiciel l'ordinateur portable de Colton ici qui 7 00:00:54,280 --> 00:00:57,230 eu iTunes et que chanson déjà en file d'attente. 8 00:00:57,230 --> 00:01:00,270 Plutôt que de me faire des démonstrations de cela, Colton a été dans le laboratoire 9 00:01:00,270 --> 00:01:04,129 clairement toute la semaine obtenir une démonstration prêt pour un volontaire courageux. 10 00:01:04,129 --> 00:01:07,430 Si quelqu'un veut venir sur up-- vu votre première main. 11 00:01:07,430 --> 00:01:09,540 Venez sur place. 12 00:01:09,540 --> 00:01:12,530 >> Bien. 13 00:01:12,530 --> 00:01:13,886 Et quel est votre nom? 14 00:01:13,886 --> 00:01:14,800 >> PUBLIC: Euh, Maria. 15 00:01:14,800 --> 00:01:16,550 >> DAVID J. Malan: Maria, ravi de vous voir. 16 00:01:16,550 --> 00:01:17,310 Venez par ici. 17 00:01:17,310 --> 00:01:19,550 Permettez-moi de vous présenter à Colton. 18 00:01:19,550 --> 00:01:21,290 Colton, cette Maria. 19 00:01:21,290 --> 00:01:23,050 >> COLTON: Salut, ravi de vous rencontrer. 20 00:01:23,050 --> 00:01:24,330 >> DAVID J. Malan: Tous droit, si la première étape, nous sommes 21 00:01:24,330 --> 00:01:26,204 allez avoir vous mettez ce sur votre avant-bras 22 00:01:26,204 --> 00:01:29,280 de sorte qu'il est assez étanche jusqu'à près de votre coude. 23 00:01:29,280 --> 00:01:31,940 Et pendant ce temps, nous allons avoir mettre sur notre verre Google 24 00:01:31,940 --> 00:01:33,720 et nous mélangeons technologies aujourd'hui. 25 00:01:33,720 --> 00:01:36,340 >> COLTON: d'abord, nous devrons brancher ce dans les choses. 26 00:01:36,340 --> 00:01:37,170 >> DAVID J. Malan: OK. 27 00:01:37,170 --> 00:01:39,795 En fait, il faut mettre votre bras comme près de ce câble que possible 28 00:01:39,795 --> 00:01:41,160 afin que nous puissions d'abord synchroniser le haut. 29 00:01:41,160 --> 00:01:42,740 >> COLTON: Faisons cela. 30 00:01:42,740 --> 00:01:46,500 >> DAVID J. Malan: Et pendant ce temps, de sorte que tout le monde peut obtenir un coup d'oeil de plus près, 31 00:01:46,500 --> 00:01:50,290 nous lançons la caméra de Andrew sur l'écran là. 32 00:01:50,290 --> 00:01:54,460 Nous avons donc un câble USB qui est étant branché sur le brassard de Maria. 33 00:01:54,460 --> 00:02:00,230 Et permettez-moi de l'écran de Colton jette sur le projecteur suivant. 34 00:02:00,230 --> 00:02:06,000 >> Donc Colton enregistre le dispositif maintenant comme un Myo connecté à ce câble. 35 00:02:06,000 --> 00:02:08,060 Et maintenant, que Maria va faire momentanément 36 00:02:08,060 --> 00:02:10,120 est réellement marcher à travers les étapes d'étalonnage 37 00:02:10,120 --> 00:02:12,830 et enseigner le logiciel comment ses muscles répondent 38 00:02:12,830 --> 00:02:16,070 quand elle assurez-vous pré-défini gestes qui comprend le logiciel. 39 00:02:16,070 --> 00:02:17,910 Si vous souhaitez aller dans avant de l'écran. 40 00:02:17,910 --> 00:02:26,840 41 00:02:26,840 --> 00:02:30,090 OK, continuer d'essayer. 42 00:02:30,090 --> 00:02:31,860 >> COLTON: aller comme ça. 43 00:02:31,860 --> 00:02:32,970 Et comme ça. 44 00:02:32,970 --> 00:02:34,563 Et tout le chemin à droite. 45 00:02:34,563 --> 00:02:35,922 Retourner. 46 00:02:35,922 --> 00:02:37,740 >> DAVID J. Malan: OK. 47 00:02:37,740 --> 00:02:38,960 Point de vue différent. 48 00:02:38,960 --> 00:02:39,620 Il est pas vous. 49 00:02:39,620 --> 00:02:40,350 Il nous est. 50 00:02:40,350 --> 00:02:41,749 >> MARIA: OK. 51 00:02:41,749 --> 00:02:42,540 DAVID J. Malan: Non 52 00:02:42,540 --> 00:02:46,720 53 00:02:46,720 --> 00:02:51,540 Passons le plus haut il est donc plus près de votre coude, ou encore plus serré. 54 00:02:51,540 --> 00:02:52,680 Bien. 55 00:02:52,680 --> 00:02:53,270 >> Et ce est parti. 56 00:02:53,270 --> 00:02:56,780 Ce serait un bon moment pour CS52X. 57 00:02:56,780 --> 00:02:57,670 Nous y voilà. 58 00:02:57,670 --> 00:02:58,760 >> Très agréable. 59 00:02:58,760 --> 00:03:01,170 D'accord. 60 00:03:01,170 --> 00:03:02,790 Pouce à Pinky. 61 00:03:02,790 --> 00:03:03,380 >> Très agréable. 62 00:03:03,380 --> 00:03:05,140 Répartissez vos doigts. 63 00:03:05,140 --> 00:03:06,240 Bon. 64 00:03:06,240 --> 00:03:06,910 Agitez droit. 65 00:03:06,910 --> 00:03:15,052 66 00:03:15,052 --> 00:03:17,010 Il est curieusement montrant vous avec le hand-- gauche 67 00:03:17,010 --> 00:03:19,665 >> COLTON: Ouais, ce est bizarre. 68 00:03:19,665 --> 00:03:21,790 DAVID J. Malan: Wave le droit et aller de l'avant. 69 00:03:21,790 --> 00:03:22,998 Avance rapide pour passer ou suivante. 70 00:03:22,998 --> 00:03:25,020 Voilà droit des vagues OK. 71 00:03:25,020 --> 00:03:26,650 >> MARIA: Je don't-- attendre. 72 00:03:26,650 --> 00:03:28,430 >> DAVID J. Malan: Besoin d'aide? 73 00:03:28,430 --> 00:03:30,027 >> COLTON: Donc vous allez comme ça. 74 00:03:30,027 --> 00:03:31,860 MARIA: Il est le tournant autre chose, cependant. 75 00:03:31,860 --> 00:03:32,390 COLTON: Il est. 76 00:03:32,390 --> 00:03:34,250 DAVID J. Malan: Ouais, je ne sais pas pourquoi il est vous montrant un gaucher. 77 00:03:34,250 --> 00:03:36,458 COLTON: Pourquoi pensez-vous pas try-- juste essayer de faire comme ça. 78 00:03:36,458 --> 00:03:38,910 79 00:03:38,910 --> 00:03:40,090 >> DAVID J. Malan: Non? 80 00:03:40,090 --> 00:03:42,580 Peut-être atteindre votre bras un peu plus droit 81 00:03:42,580 --> 00:03:46,070 et rendre plus abrupt comme ça. 82 00:03:46,070 --> 00:03:48,176 Ouais, OK, viens. 83 00:03:48,176 --> 00:03:49,670 >> MARIA: Je suis désolé. 84 00:03:49,670 --> 00:03:51,170 DAVID J. Malan: Il est pas votre faute. 85 00:03:51,170 --> 00:03:53,018 COLTON: Il est très bien. 86 00:03:53,018 --> 00:03:55,430 DAVID J. Malan: Très bien. 87 00:03:55,430 --> 00:03:56,220 Well-- 88 00:03:56,220 --> 00:03:57,620 >> MARIA: Devrions-nous, alors? 89 00:03:57,620 --> 00:03:59,620 DAVID J. Malan: Oui, nous allons vous laisser filer. 90 00:03:59,620 --> 00:04:03,130 Donc, si quelqu'un souhaite faire une projet final à l'aide de ce bord de coupe 91 00:04:03,130 --> 00:04:07,707 matériel, réaliser ça pourrait prendre un peu de temps pour s'y habituer. 92 00:04:07,707 --> 00:04:10,290 Et this-- la réalité est la suivante est en fait très saignant bord. 93 00:04:10,290 --> 00:04:12,040 >> Ceci est ce qu'on appelle le kit de développement, qui 94 00:04:12,040 --> 00:04:14,956 est destiné à être essentiellement une pré-version de sorte que les gens peuvent faire exactement 95 00:04:14,956 --> 00:04:18,690 this-- lutter avec elle, figure comment les corps des gens travaillent 96 00:04:18,690 --> 00:04:19,980 avec la technologie. 97 00:04:19,980 --> 00:04:21,750 Donc, si vous voulez ensuite, après lecture, 98 00:04:21,750 --> 00:04:23,750 nous pouvons vous venir prendre un autre coup à lui. 99 00:04:23,750 --> 00:04:26,970 Mais sinon, une salve d'applaudissements, si nous pourrions, par Maria de venir sur place. 100 00:04:26,970 --> 00:04:28,770 >> MARIA: Je vous remercie. 101 00:04:28,770 --> 00:04:30,390 >> DAVID J. Malan: Je vous remercie. 102 00:04:30,390 --> 00:04:34,945 Nous allons accrocher à cela, mais nous allons donner vous-- comment sur une balle anti-stress ici? 103 00:04:34,945 --> 00:04:38,620 Oh, et-- si-- oui, merci. 104 00:04:38,620 --> 00:04:39,715 Bien. 105 00:04:39,715 --> 00:04:45,750 Donc, pour les curieux, si vous étiez familier avec le choix judicieux 106 00:04:45,750 --> 00:04:47,670 que nous y fait plus tôt, d'une télévision incroyable 107 00:04:47,670 --> 00:04:50,210 montrer que vous devez absolument être binge-watching sur Netflix 108 00:04:50,210 --> 00:04:51,110 est celui-là. 109 00:04:51,110 --> 00:04:54,472 >> ENCEINTE 1: Mesdames et Messieurs, un magicien nommé Josh. 110 00:04:54,472 --> 00:05:04,710 111 00:05:04,710 --> 00:05:08,050 >> DAVID J. Malan: Et apparemment, il est une chose me texte au cours de conférence maintenant. 112 00:05:08,050 --> 00:05:11,190 On me dit que Maria eu un anniversaire hier. 113 00:05:11,190 --> 00:05:14,095 Alors joyeux anniversaire de CS50 Maria ainsi. 114 00:05:14,095 --> 00:05:18,720 115 00:05:18,720 --> 00:05:22,090 >> Donc vous avez pu le lire dans le mois dernier que ce messieurs ici, Steve 116 00:05:22,090 --> 00:05:25,260 Ballmer, qui était en fait classe de 1977 à l'université, 117 00:05:25,260 --> 00:05:27,170 récemment pris sa retraite de Microsoft. 118 00:05:27,170 --> 00:05:29,620 Il était étudiant ici, puis quelques années plus tard 119 00:05:29,620 --> 00:05:31,910 se trouve à Stanford Business School 120 00:05:31,910 --> 00:05:34,160 quand il a reçu un téléphone appeler à partir d'un de ses amis qui 121 00:05:34,160 --> 00:05:36,516 avait vécu dans le couloir de lui ici à Harvard. 122 00:05:36,516 --> 00:05:38,640 Le nom de cet ami était le projet de loi Gates, et à l'époque, 123 00:05:38,640 --> 00:05:42,700 il tentait de recruter Steve être le premier homme d'affaires, vraiment, 124 00:05:42,700 --> 00:05:45,720 dans une petite entreprise nom de Microsoft. 125 00:05:45,720 --> 00:05:48,960 >> Une longue histoire courte, Steve a finalement été conquis, 126 00:05:48,960 --> 00:05:52,130 rejoint Microsoft quand ils eu seulement 30 employés. 127 00:05:52,130 --> 00:05:54,300 Et au moment où il à la retraite tout récemment, 128 00:05:54,300 --> 00:05:58,100 la société avait 100 000 employés au cours des dernières années. 129 00:05:58,100 --> 00:06:01,171 Et si un site connu sous le nom The Verge préparé cet hommage en vidéo 130 00:06:01,171 --> 00:06:02,920 que nous avons pensé partagé qui vous donne 131 00:06:02,920 --> 00:06:08,380 un sentiment de combien d'énergie Steve apporte à toute présentation qu'il donne. 132 00:06:08,380 --> 00:06:11,884 133 00:06:11,884 --> 00:06:12,550 [VIDEO LECTURE] 134 00:06:12,550 --> 00:06:16,220 -Microsoft Est comme un quatrième enfant. 135 00:06:16,220 --> 00:06:18,260 Les enfants font quitter la maison. 136 00:06:18,260 --> 00:06:21,875 Dans ce cas, je suppose Je pars de la maison. 137 00:06:21,875 --> 00:06:23,270 Hey Bill, whazzap? 138 00:06:23,270 --> 00:06:24,200 >> -Wazzap? 139 00:06:24,200 --> 00:06:25,320 >> -Hé, Wazzap? 140 00:06:25,320 --> 00:06:28,590 Nous avons reçu un énorme occasion. 141 00:06:28,590 --> 00:06:30,210 Et le projet de loi nous a donné cette opportunité. 142 00:06:30,210 --> 00:06:35,520 143 00:06:35,520 --> 00:06:36,770 Je tiens à remercier le projet de loi pour cela. 144 00:06:36,770 --> 00:06:39,630 Je veux que vous aussi. 145 00:06:39,630 --> 00:06:42,500 Le rythme de l'innovation ne va pas ralentir. 146 00:06:42,500 --> 00:06:45,140 >> Ça va aller plus vite et plus rapide. 147 00:06:45,140 --> 00:06:50,165 Il pourrait y avoir un peu de concurrents qui sont malheureusement éliminés! 148 00:06:50,165 --> 00:06:54,337 149 00:06:54,337 --> 00:06:59,564 >> Je l'aime cette société. 150 00:06:59,564 --> 00:07:00,064 Oui! 151 00:07:00,064 --> 00:07:03,452 152 00:07:03,452 --> 00:07:08,250 Je suis un PC, et je l'aime cette société! 153 00:07:08,250 --> 00:07:13,090 >> Développeurs, développeurs, développeurs, développeurs, développeurs,, 154 00:07:13,090 --> 00:07:14,560 développeurs, développeurs. 155 00:07:14,560 --> 00:07:17,500 156 00:07:17,500 --> 00:07:18,970 Oui! 157 00:07:18,970 --> 00:07:19,950 Les développeurs Web! 158 00:07:19,950 --> 00:07:21,420 >> Les développeurs Web! 159 00:07:21,420 --> 00:07:22,890 Les développeurs Web! 160 00:07:22,890 --> 00:07:25,830 161 00:07:25,830 --> 00:07:28,770 Écoutez ce que vous obtenir, sans frais supplémentaires! 162 00:07:28,770 --> 00:07:31,960 >> L'exécutif MS-DOS, un rendez-vous calandre, une pile de cartes, un bloc-notes, 163 00:07:31,960 --> 00:07:33,750 une horloge, un panneau de contrôle. 164 00:07:33,750 --> 00:07:35,461 Et, pouvez-vous le croire? 165 00:07:35,461 --> 00:07:35,960 Reversie! 166 00:07:35,960 --> 00:07:37,270 >> Les graver sur CD! 167 00:07:37,270 --> 00:07:38,660 Affichez-les à MSN! 168 00:07:38,660 --> 00:07:40,422 Vous les envoyer à vos amis! 169 00:07:40,422 --> 00:07:41,790 >> Tout en un seul clic! 170 00:07:41,790 --> 00:07:48,670 One Microsoft, une stratégie, un team-- concentré, discipliné, professionnel, 171 00:07:48,670 --> 00:07:50,610 et expert dans tout ce que nous faisons. 172 00:07:50,610 --> 00:07:52,670 Permettez-moi d'utiliser une ligne d'un vieux film. 173 00:07:52,670 --> 00:07:54,810 >> Les relations sont comme des requins. 174 00:07:54,810 --> 00:07:57,480 Ils se déplacent vers l'avant ou ils meurent. 175 00:07:57,480 --> 00:08:01,470 Je pense effectivement technologie sociétés sont les mêmes. 176 00:08:01,470 --> 00:08:04,801 >> [FIN LECTURE VIDÉO] 177 00:08:04,801 --> 00:08:08,050 DAVID J. Malan: Donc, nous sommes très heureux de annoncer que Steve se joindra à nous 178 00:08:08,050 --> 00:08:13,320 ici dans CS50 mercredi prochain à la place et le temps ici d'habitude. 179 00:08:13,320 --> 00:08:14,750 Espace sera probablement limitée. 180 00:08:14,750 --> 00:08:19,650 Et si vous joindre à nous en personne, se il vous plaît la tête aujourd'hui ou peu de temps après 181 00:08:19,650 --> 00:08:22,600 à cs50.harvard.edu/register. 182 00:08:22,600 --> 00:08:25,780 >> Et nous allons suivre par Mardi confirmant taches. 183 00:08:25,780 --> 00:08:29,900 Réjouissez-vous que la prochaine Mercredi lors de conférence en CS50. 184 00:08:29,900 --> 00:08:33,706 Maintenant, dans d'autres nouvelles, je me trouvais à rencontré ce dans The Crimson juste 185 00:08:33,706 --> 00:08:34,289 l'autre jour. 186 00:08:34,289 --> 00:08:37,370 >> Il se trouve que l'un des employés de CS50 et au moins l'un des élèves de CS50 187 00:08:37,370 --> 00:08:40,299 est actuellement en cours d'exécution pour UC président et vice-président, 188 00:08:40,299 --> 00:08:42,950 qui me ramenait à mes propres jours en arrière 189 00:08:42,950 --> 00:08:45,920 quand je perdu l'élection UC lamentablement. 190 00:08:45,920 --> 00:08:48,210 Mais la doublure d'argent in qui est je toujours 191 00:08:48,210 --> 00:08:50,604 raconter l'histoire est que l'un des je suis sûr 192 00:08:50,604 --> 00:08:52,770 de nombreuses raisons je perdu la élection était un manque complet 193 00:08:52,770 --> 00:08:54,103 d'un talent pour parler en public. 194 00:08:54,103 --> 00:08:56,950 Et très honnêtement, il m'a conduit, cette expérience 195 00:08:56,950 --> 00:09:02,235 Je pense que mon année junior, pour réellement signer pour Harvard Computer Society, qui 196 00:09:02,235 --> 00:09:04,610 est le groupe sur le campus que détient différents entretiens techniques 197 00:09:04,610 --> 00:09:05,318 et d'autres choses. 198 00:09:05,318 --> 00:09:08,117 Je pris sur leur enseignement séminaires et donc 199 00:09:08,117 --> 00:09:09,950 eu l'occasion, un merveilleuse occasion, 200 00:09:09,950 --> 00:09:12,620 de commencer à travailler sur exactement cela. 201 00:09:12,620 --> 00:09:15,000 Mais aussi, je eu l'occasion au cours de cette expérience 202 00:09:15,000 --> 00:09:16,930 apprendre moi-même d'autant plus HTML. 203 00:09:16,930 --> 00:09:21,080 Et si je tergiversé hier soir par en regardant à travers le site Web HTML 204 00:09:21,080 --> 00:09:28,066 Je fis comme en 1997, '98, pour ma campagne qui ressemble à ceci ici. 205 00:09:28,066 --> 00:09:29,920 Je sais. 206 00:09:29,920 --> 00:09:33,340 >> Because-- et bien sûr, un avis cette décision de conception étonnante en 1998 207 00:09:33,340 --> 00:09:33,850 ou autres joyeusetés. 208 00:09:33,850 --> 00:09:36,475 La première chose que vous voulez que les utilisateurs à faire lors de sa visite votre site 209 00:09:36,475 --> 00:09:39,860 est d'avoir à cliquer sur un autre lien juste pour entrer dans votre site ici avec le moine 210 00:09:39,860 --> 00:09:43,940 derrière un rideau comme enveloppé où apparemment ma plate-forme de campagne était. 211 00:09:43,940 --> 00:09:46,330 Et cela est tout ce que vous aurez aujourd'hui est juste une capture d'écran. 212 00:09:46,330 --> 00:09:49,500 Mais je lisais, comme, mes affiches de campagne la nuit dernière 213 00:09:49,500 --> 00:09:50,490 et ma plate-forme. 214 00:09:50,490 --> 00:09:52,960 >> Et je suis tellement en colère à l'époque. 215 00:09:52,960 --> 00:09:55,380 Ma plate-forme était-- il était intéressant. 216 00:09:55,380 --> 00:09:57,730 Donc je l'ai calmé depuis. 217 00:09:57,730 --> 00:10:03,550 Mais un jour, je vais courir à nouveau et espérons mieux cette fois. 218 00:10:03,550 --> 00:10:07,265 >> Donc, HTML, que la langue dans laquelle je faisais que in-- vous allez bientôt faire beaucoup plus-- 219 00:10:07,265 --> 00:10:09,140 est quelque chose que nous avons été parler de la fin 220 00:10:09,140 --> 00:10:12,460 et largement tenir pour acquis maintenant que nous avons passés à d'autres langues. 221 00:10:12,460 --> 00:10:15,650 Mais arrêtons-nous juste un instant et mettre un peu de ces choses dans leur contexte. 222 00:10:15,650 --> 00:10:18,040 Ainsi, dans une phrase, ce que le HTML? 223 00:10:18,040 --> 00:10:19,370 >> Ou, ce qui est utilisé pour? 224 00:10:19,370 --> 00:10:20,208 Tout le monde? 225 00:10:20,208 --> 00:10:20,708 Oui. 226 00:10:20,708 --> 00:10:22,002 >> PUBLIC: balisage pour les sites web. 227 00:10:22,002 --> 00:10:23,460 DAVID J. Malan: balisage pour le site Web. 228 00:10:23,460 --> 00:10:27,100 Donc, il est un langage de balisage qui vous permet de structurer une page Web. 229 00:10:27,100 --> 00:10:30,040 Tête monte ici, titre Va Ici, le corps va ici. 230 00:10:30,040 --> 00:10:33,280 Ceci est en gras, cela est italics-- ce genre de détail. 231 00:10:33,280 --> 00:10:33,830 >> OK, bon. 232 00:10:33,830 --> 00:10:37,620 Donc CSS vous-- et je laisse a pris quelques libertés, il 233 00:10:37,620 --> 00:10:40,990 avec le gras et en italique parce que face Voilà qui est mieux mis en œuvre à cet égard. 234 00:10:40,990 --> 00:10:42,096 CSS est-- quoi? 235 00:10:42,096 --> 00:10:42,845 Dire dans une phrase. 236 00:10:42,845 --> 00:10:46,000 237 00:10:46,000 --> 00:10:46,720 Tout le monde à tous. 238 00:10:46,720 --> 00:10:46,870 Ouais. 239 00:10:46,870 --> 00:10:49,286 >> Public: Décoration et choses, comme la façon de le concevoir. 240 00:10:49,286 --> 00:10:51,769 241 00:10:51,769 --> 00:10:52,810 DAVID J. Malan: OK, bon. 242 00:10:52,810 --> 00:10:55,420 Embellissements qui vous permettent à concevoir ou styliser il 243 00:10:55,420 --> 00:10:59,540 avec des choses comme gras et italique et couleurs et aussi plus fin 244 00:10:59,540 --> 00:11:01,330 positionnement grain d'éléments. 245 00:11:01,330 --> 00:11:04,520 Il sorte de vous permet de prendre les choses les dernier mile de sorte que si, par exemple, 246 00:11:04,520 --> 00:11:08,130 dans Pset7, vous avez sans doute remarqué sur votre portefeuille page si vous êtes à ce point 247 00:11:08,130 --> 00:11:12,270 déjà que la table par défaut que vous faire pour montrer actions des avoirs de l'utilisateur 248 00:11:12,270 --> 00:11:15,740 et de l'argent ressemble probablement assez hideux par défaut, sans espace blanc. 249 00:11:15,740 --> 00:11:18,420 Le genre de Crammed tout ensemble en rangées et en colonnes. 250 00:11:18,420 --> 00:11:20,662 >> Eh bien, avec un peu de CSS, que vous pouvez réaliser, 251 00:11:20,662 --> 00:11:23,870 vous pouvez effectivement modifier cela et faire quelque chose de beaucoup plus familier et plus 252 00:11:23,870 --> 00:11:24,870 plus jolie à regarder. 253 00:11:24,870 --> 00:11:27,730 Donc CSS est sur la stylisation de sites Web. 254 00:11:27,730 --> 00:11:31,970 Mais ensuite, nous avons introduit une autre langue, PHP, qui nous permet de faire quoi? 255 00:11:31,970 --> 00:11:36,400 256 00:11:36,400 --> 00:11:37,590 >> Disons simplement faire quoi? 257 00:11:37,590 --> 00:11:38,177 Tout le monde. 258 00:11:38,177 --> 00:11:40,010 Vous avez aventurer au-delà les deux premières lignes. 259 00:11:40,010 --> 00:11:40,260 Ouais. 260 00:11:40,260 --> 00:11:41,719 >> PUBLIC: générer du contenu dynamique. 261 00:11:41,719 --> 00:11:42,718 DAVID J. Malan: Parfait. 262 00:11:42,718 --> 00:11:43,850 Générer du contenu dynamique. 263 00:11:43,850 --> 00:11:45,808 Et vous pouvez le faire en un certain nombre de langues. 264 00:11:45,808 --> 00:11:50,120 Il nous arrive d'utiliser PHP parce qu'il est en partie si semblable à la syntaxe C. 265 00:11:50,120 --> 00:11:52,000 >> Mais PHP fait exactement cela. 266 00:11:52,000 --> 00:11:54,620 Il vous permet de générer dynamiquement sortie. 267 00:11:54,620 --> 00:11:57,890 Et une partie de cette production pourrait être HTML, comme nous l'avons généralement faisons. 268 00:11:57,890 --> 00:12:00,160 Et il est aussi, car il est un langage de programmation, est 269 00:12:00,160 --> 00:12:03,240 le mécanisme par l'intermédiaire duquel nous pouvons parler aux bases de données. 270 00:12:03,240 --> 00:12:05,730 >> Et nous pouvons faire des requêtes à d'autres serveurs comme yahous 271 00:12:05,730 --> 00:12:08,660 et programmatique rien faire vraiment que vous pourriez autrement 272 00:12:08,660 --> 00:12:10,400 vouloir forcer un ordinateur à faire. 273 00:12:10,400 --> 00:12:13,580 Donc, PHP permet de nous commençons sortie dynamique le contenu. 274 00:12:13,580 --> 00:12:16,900 Donc, par cette logique, je ne dois un site web dynamique en 1998. 275 00:12:16,900 --> 00:12:18,460 >> Il était juste une page Web statique. 276 00:12:18,460 --> 00:12:22,250 Mon contenu a dû être changé par manuellement avec gedit ou un équivalent. 277 00:12:22,250 --> 00:12:25,290 Mais PHP est ce que nous avons utilisé ou aurait pu utiliser, plutôt, 278 00:12:25,290 --> 00:12:27,260 quelque chose comme le Site Frosh GI, qui 279 00:12:27,260 --> 00:12:31,160 était censé prendre les inscriptions et gérer une liste de choses que users-- 280 00:12:31,160 --> 00:12:33,550 sont en fait commuter temps, même si nous nous trouvons 281 00:12:33,550 --> 00:12:35,990 à utiliser Perl, un autre langue à l'époque. 282 00:12:35,990 --> 00:12:40,350 >> Et puis enfin, nous avons introduit SQL-- Structured Query Language. 283 00:12:40,350 --> 00:12:43,845 Ainsi, encore un autre langage qui est utilisé pour quoi? 284 00:12:43,845 --> 00:12:46,660 285 00:12:46,660 --> 00:12:47,639 Utilisé pour quoi? 286 00:12:47,639 --> 00:12:49,430 Pouvons-nous aventurer slight-- OK, on ​​ne va pas 287 00:12:49,430 --> 00:12:51,263 pour obtenir beaucoup plus loin de l'orchestre ici. 288 00:12:51,263 --> 00:12:53,432 PUBLIC: Il est un protocole utilisé pour parler aux bases de données. 289 00:12:53,432 --> 00:12:55,640 DAVID J. Malan: Un protocole utilisé pour parler aux bases de données. 290 00:12:55,640 --> 00:12:56,181 Permettez-moi de tweak. 291 00:12:56,181 --> 00:12:59,280 Il est un langage naturel utilisé parler à databases-- sélectionne 292 00:12:59,280 --> 00:13:01,280 et inserts et les suppressions et les mises à jour et fait 293 00:13:01,280 --> 00:13:03,840 encore plus de fonctionnalités que nous avons même pas plongé 294 00:13:03,840 --> 00:13:07,920 en mais vous pouvez avoir explore-- à explorer pour, par exemple, un projet final. 295 00:13:07,920 --> 00:13:09,560 Il ya donc ces différentes pièces. 296 00:13:09,560 --> 00:13:13,100 >> Et nous espérons que Pset7, même si sa spécification est assez longue, 297 00:13:13,100 --> 00:13:15,990 il est délibérément longue pour vous guider par la façon dont ces choses peuvent tous 298 00:13:15,990 --> 00:13:17,210 dactylographiées. 299 00:13:17,210 --> 00:13:20,300 Maintenant, le lundi, nous présenté notre dernière langue 300 00:13:20,300 --> 00:13:23,430 que nous allons présenter officiellement dans la course-- qui est, JavaScript. 301 00:13:23,430 --> 00:13:25,720 Ceci, comme PHP, est un langage interprété. 302 00:13:25,720 --> 00:13:28,110 >> Mais une distinction clé Je proposais lundi 303 00:13:28,110 --> 00:13:32,730 est que, alors que PHP est en cours d'exécution ou étant interprété sur le serveur, qui 304 00:13:32,730 --> 00:13:35,990 dans ce cas l'appareil de CS50, ou peut-être quelques-uns web commercial 305 00:13:35,990 --> 00:13:39,370 serveur sur l'Internet, JavaScript généralement 306 00:13:39,370 --> 00:13:43,650 est une langue qui fonctionne côté client pas serveur side-- si dans le navigateur. 307 00:13:43,650 --> 00:13:46,970 Ce qui veut dire, comme quand je l'ouvris jusqu'à Facebook code source et trouvé tous 308 00:13:46,970 --> 00:13:51,510 de ces fichiers .js, l'implication était que lorsque vous visitez Facebook ou plus 309 00:13:51,510 --> 00:13:54,810 Sites ces jours, vous obtenez non seulement HTML, CSS, non seulement, 310 00:13:54,810 --> 00:13:59,370 mais tout un tas de JavaScript Code souvent sous la forme de fichiers .js. 311 00:13:59,370 --> 00:14:03,970 Et puis il est le browser-- votre propre Mac ou PC-- qui exécute ce code. 312 00:14:03,970 --> 00:14:05,990 >> Mais votre navigateur exécute. 313 00:14:05,990 --> 00:14:08,070 Vous pouvez penser à une sorte de bac à sable. 314 00:14:08,070 --> 00:14:12,420 Alors que le code JavaScript ne devrait pas être en mesure de supprimer des fichiers sur votre ordinateur. 315 00:14:12,420 --> 00:14:14,730 Il ne devrait pas être capable de envoyer des e-mails sur votre compte. 316 00:14:14,730 --> 00:14:17,760 Votre navigateur type effet de restreindre ce que vous pouvez faire avec lui. 317 00:14:17,760 --> 00:14:20,630 >> Donc, dans ce sens, il est un peu moins puissant, peut-être, que C. 318 00:14:20,630 --> 00:14:24,030 Mais JavaScript peut, comme un de côté, être utilisé sur le serveur, 319 00:14:24,030 --> 00:14:27,740 si nous allons tendance à ne pas parler à ce sujet dans ce contexte. 320 00:14:27,740 --> 00:14:29,740 Alors maintenant, nous allons lier ces ensemble. 321 00:14:29,740 --> 00:14:34,000 Il ya une semaine, plus, nous avons présenté certains HTML sur la page web de super ennuyeux left--. 322 00:14:34,000 --> 00:14:35,000 >> Dit juste bonjour monde. 323 00:14:35,000 --> 00:14:38,110 Et puis je proposais sur le droit nous pouvons genre de voler des idées 324 00:14:38,110 --> 00:14:41,470 de notre discussion de des structures de données en C 325 00:14:41,470 --> 00:14:45,270 et de réfléchir à la façon dont cette hiérarchique langage de balisage sur la gauche 326 00:14:45,270 --> 00:14:49,720 pourrait être élaboré ou mis en œuvre dans la mémoire comme une structure arborescente avec des noeuds réel 327 00:14:49,720 --> 00:14:51,400 et les pointeurs et ce genre de détails. 328 00:14:51,400 --> 00:14:53,820 Sur la droite, nous appelons que d'un document DOM-- 329 00:14:53,820 --> 00:14:56,800 Objet modèle-- qui est juste une façon élégante de dire arbre. 330 00:14:56,800 --> 00:14:59,520 >> Maintenant, pourquoi est-ce utile de penser de cette façon? 331 00:14:59,520 --> 00:15:01,680 Parce que maintenant, avec JavaScript, parce que nous avons 332 00:15:01,680 --> 00:15:05,810 code qui arrive à jouer dans ce environnement, le code HTML réel qui est 333 00:15:05,810 --> 00:15:08,360 été envoyé au navigateur déjà et a déjà 334 00:15:08,360 --> 00:15:12,690 été chargé en mémoire par le navigateur dans un arbre dans votre ordinateur de 335 00:15:12,690 --> 00:15:18,270 RAM comme ça, on peut utiliser JavaScript de fait traverser ou marcher ou recherche 336 00:15:18,270 --> 00:15:21,800 ou changer cet arbre DOM cependant nous voulons. 337 00:15:21,800 --> 00:15:24,040 Donc en fait, si vous pensez sur facebook.com, 338 00:15:24,040 --> 00:15:27,660 si vous utilisez la fonction de chat, si vous Gmail utilisation et la fonction de Gchat, 339 00:15:27,660 --> 00:15:30,540 tout où vous avez les messages provenant encore et encore 340 00:15:30,540 --> 00:15:35,880 et encore, ces messages sont sans doute, comme, LI balise, balises d'élément de liste, peut-être. 341 00:15:35,880 --> 00:15:37,940 >> Ou peut-être qu'ils sont juste divs qui gardent apparaissant 342 00:15:37,940 --> 00:15:39,770 chaque fois que vous recevez un message instantané. 343 00:15:39,770 --> 00:15:42,960 Et ce qui signifie que tout ce que Facebook ou Google est en train de faire 344 00:15:42,960 --> 00:15:45,200 est toute fois que vous obtenez une message du serveur, 345 00:15:45,200 --> 00:15:48,740 ils utilisent probablement le JavaScript juste ajouter un autre nœud 346 00:15:48,740 --> 00:15:52,700 à ce tree-- un autre noeud de cet arbre puis visuellement semble juste 347 00:15:52,700 --> 00:15:54,570 comme une nouvelle ligne de texte sur votre écran. 348 00:15:54,570 --> 00:15:57,100 Mais ils insertion dans cette structure de données. 349 00:15:57,100 --> 00:15:59,742 >> Donc, dans les classes comme Cs124 et d'autres, vous aurez 350 00:15:59,742 --> 00:16:02,200 en fait écrire plus de code contre structures de données de ce genre. 351 00:16:02,200 --> 00:16:04,310 Mais pour l'instant en JavaScript, nous allons supposer 352 00:16:04,310 --> 00:16:07,920 nous obtenons toutes ces fonctionnalités gratuitement à partir de la langue elle-même. 353 00:16:07,920 --> 00:16:09,210 Alors regardons un exemple. 354 00:16:09,210 --> 00:16:13,120 >> Permettez-moi d'ouvrir un fichier appelé form.html. 355 00:16:13,120 --> 00:16:14,601 Il est super simple. 356 00:16:14,601 --> 00:16:15,600 Il semble juste comme ça. 357 00:16:15,600 --> 00:16:17,860 >> Pas de CSS, sans penser à l'esthétique. 358 00:16:17,860 --> 00:16:19,810 Il est purement fonctionnel et apparemment je suis 359 00:16:19,810 --> 00:16:24,000 demandant un email, un mot de passe, mot de passe de nouveau, puis un chèque 360 00:16:24,000 --> 00:16:26,150 à accepter certains termes et conditions. 361 00:16:26,150 --> 00:16:28,740 Qu'est-ce que le code source de ce ressemble est probablement quelque chose 362 00:16:28,740 --> 00:16:31,030 vous pouvez le deviner avec un peu de la pensée maintenant. 363 00:16:31,030 --> 00:16:32,840 Je dois une balise de formulaire ici. 364 00:16:32,840 --> 00:16:36,190 >> Une action est apparemment va aller vers un fichier appelé register.php. 365 00:16:36,190 --> 00:16:37,870 La méthode que je vais utiliser est d'obtenir. 366 00:16:37,870 --> 00:16:40,880 Et puis je dois un texte champ dont le nom est email. 367 00:16:40,880 --> 00:16:43,340 >> Je dois un champ de mot de passe dont le nom est le mot de passe. 368 00:16:43,340 --> 00:16:45,420 Je l'ai eu une autre champ de mot de passe dont le nom 369 00:16:45,420 --> 00:16:47,342 est quelque peu arbitraire confirmation. 370 00:16:47,342 --> 00:16:49,690 Il est juste un autre paramètre HTTP. 371 00:16:49,690 --> 00:16:54,430 >> Et puis nous nous ne l'avons pas utilisé ces sauf depuis l'IMS Frosh démo en class-- 372 00:16:54,430 --> 00:16:56,692 une case à cocher qui est il suffit de taper égale chèque. 373 00:16:56,692 --> 00:16:57,900 Et je vais appeler cet accord. 374 00:16:57,900 --> 00:17:00,700 Donc je l'ai genre de arbitrairement mais commodément nommé ces domaines. 375 00:17:00,700 --> 00:17:03,450 Alors que maintenant, quand cette forme se soumis, nous allons voir ce qui se passe. 376 00:17:03,450 --> 00:17:07,290 Si je fais malan@harvard.edu, Je vais faire un mot de passe de pourpre. 377 00:17:07,290 --> 00:17:09,530 Je vais faire un mot de passe de rien. 378 00:17:09,530 --> 00:17:10,910 Il ne faut pas coopérer. 379 00:17:10,910 --> 00:17:12,280 >> Et je ne vais pas cocher la case. 380 00:17:12,280 --> 00:17:13,940 Permettez-moi de cliquez sur Enregistrer. 381 00:17:13,940 --> 00:17:15,420 Et il dit, hm, vous êtes inscrit. 382 00:17:15,420 --> 00:17:16,069 Pas vraiment. 383 00:17:16,069 --> 00:17:17,450 >> Mais l'adresse URL modifiée. 384 00:17:17,450 --> 00:17:22,280 Donc, cette forme a été clairement permis de se soumettre à register.php. 385 00:17:22,280 --> 00:17:25,160 Mais sans doute, je serais attraper certaines de ces erreurs. 386 00:17:25,160 --> 00:17:27,569 Maintenant, dans Pset7 et certains de nos exemples de cours, 387 00:17:27,569 --> 00:17:30,130 nous aurions généralement imprimer un grand message d'erreur rouge ici 388 00:17:30,130 --> 00:17:33,760 dire, le nom manquant, ou manquant mot de passe. 389 00:17:33,760 --> 00:17:37,680 Nous l'avons fait avant et nous avons la détection d'erreur côté serveur fait. 390 00:17:37,680 --> 00:17:41,580 >> Mais de nombreux sites Web de nos jours faire la détection d'erreur côté client 391 00:17:41,580 --> 00:17:42,810 où l'URL ne change pas. 392 00:17:42,810 --> 00:17:44,101 Toute la page ne se recharge pas. 393 00:17:44,101 --> 00:17:46,940 Vous obtenez une rétroaction instantanée à partir du navigateur. 394 00:17:46,940 --> 00:17:48,070 Peut-être que quelque chose va rouge. 395 00:17:48,070 --> 00:17:49,190 >> Peut-être que vous obtenez un pop up. 396 00:17:49,190 --> 00:17:53,240 Mais vous ne perdez pas de temps à envoyer le serveur de données qui est incomplet. 397 00:17:53,240 --> 00:17:56,050 Donc, nous allons voir comment nous pourrions atteindre cette fonctionnalité ainsi. 398 00:17:56,050 --> 00:17:59,660 >> Permettez-moi de passer à form1.html, qui a la même apparence. 399 00:17:59,660 --> 00:18:03,530 Mais si cette fois je fais malan@harvard.edu et je tape pourpre 400 00:18:03,530 --> 00:18:07,350 et je ne collabore pas plus mais cliquez sur Enregistrer, notez maintenant. 401 00:18:07,350 --> 00:18:08,940 Il est pas la solution la plus sexy. 402 00:18:08,940 --> 00:18:10,900 Je l'ai pris au moins cette erreur. 403 00:18:10,900 --> 00:18:12,900 Et je l'ai utilisé l'alerte fonction dans JavaScript-- 404 00:18:12,900 --> 00:18:14,090 qui nous sommes seulement à l'aide en classe. 405 00:18:14,090 --> 00:18:16,430 En général, vous ne devriez pas utiliser cette car il peut très rapidement sortir 406 00:18:16,430 --> 00:18:17,160 de contrôle. 407 00:18:17,160 --> 00:18:19,180 Mais les mots de passe ne correspondent pas est l'erreur. 408 00:18:19,180 --> 00:18:21,120 >> Permettez-moi aller de l'avant et cliquez sur OK. 409 00:18:21,120 --> 00:18:25,040 Mais ce que la livraison clé ici est que l'URL n'a pas changé. 410 00:18:25,040 --> 00:18:27,960 Donc, je l'ai gaspillage pas dérangé le temps du serveur, lui demandant 411 00:18:27,960 --> 00:18:30,750 une question que je pouvais avoir compris la réponse à moi-même. 412 00:18:30,750 --> 00:18:33,210 >> Et l'utilisateur, même si parlons de ce sujet 413 00:18:33,210 --> 00:18:35,264 plus que celle de l'utilisateur aller à penser à ce sujet, 414 00:18:35,264 --> 00:18:36,680 va avoir une rétroaction instantanée. 415 00:18:36,680 --> 00:18:39,044 Il n'y a pas de latence avec la connectivité du réseau. 416 00:18:39,044 --> 00:18:40,460 Alors regardons ce code source. 417 00:18:40,460 --> 00:18:45,600 >> Regards Form1.html structurellement similaire ici. 418 00:18:45,600 --> 00:18:46,810 La forme est en fait le même. 419 00:18:46,810 --> 00:18:48,330 Mais nous allons voir ce que je faisais ici. 420 00:18:48,330 --> 00:18:49,913 Et il ya différentes façons de le faire. 421 00:18:49,913 --> 00:18:53,690 Et je l'ai fait le plus directement suiveur mais pas façon la plus élégante encore. 422 00:18:53,690 --> 00:18:54,869 Je dois une balise script. 423 00:18:54,869 --> 00:18:57,035 La parole est ensuite document.getElementById ("enregistrement"). 424 00:18:57,035 --> 00:19:00,090 425 00:19:00,090 --> 00:19:04,420 Et je stocke cette valeur en forme, une variable. 426 00:19:04,420 --> 00:19:05,520 >> Alors qu'ai-je fait? 427 00:19:05,520 --> 00:19:08,960 Vous pouvez penser document.getElementById comme étant 428 00:19:08,960 --> 00:19:11,200 une fonction spéciale qui JavaScript permet 429 00:19:11,200 --> 00:19:14,400 que les mains littéralement vous un pointeur vers l'un des noeuds 430 00:19:14,400 --> 00:19:16,520 ou des rectangles dans cet arbre. 431 00:19:16,520 --> 00:19:21,470 Alors maintenant, voilà ce que notre variable de formulaire dans JavaScript est effectivement pointé. 432 00:19:21,470 --> 00:19:25,120 >> Alors maintenant, la syntaxe est différente de C. Mais nous font quelques choses ici. 433 00:19:25,120 --> 00:19:30,360 Un, celui-ci est un peu étrange recherche, certainement par rapport à C. 434 00:19:30,360 --> 00:19:32,180 Mais regardez à la ligne 35. 435 00:19:32,180 --> 00:19:35,130 Ainsi, sur la gauche form.onsubmit. 436 00:19:35,130 --> 00:19:38,060 Rappelons que onsubmit est comme un champ dans une structure. 437 00:19:38,060 --> 00:19:41,480 Si vous pensez que de la variable de formulaire vient d'être une structure C, 438 00:19:41,480 --> 00:19:42,600 il pourrait avoir quelques champs. 439 00:19:42,600 --> 00:19:46,410 >> Retour dans la journée, nous avons eu les noms des étudiants, ID, maisons, ce genre de domaines. 440 00:19:46,410 --> 00:19:48,520 Il suffit de penser onsubmit comme un autre domaine. 441 00:19:48,520 --> 00:19:53,380 Mais il est un domaine spécial parce que la navigateur est préprogrammée pour attendre 442 00:19:53,380 --> 00:19:57,530 .onsubmit de ne pas être une valeur comme un nombre ou une chaîne, 443 00:19:57,530 --> 00:20:01,180 mais être en fait une fonction ou l'adresse d'une fonction 444 00:20:01,180 --> 00:20:02,570 dans la mémoire de l'ordinateur. 445 00:20:02,570 --> 00:20:04,740 >> Et en effet, voilà ce que ce mot-clé ici fait. 446 00:20:04,740 --> 00:20:06,710 Cela en dit, me donner une nouvelle fonction. 447 00:20:06,710 --> 00:20:09,390 Mais quel est son nom va être, apparemment? 448 00:20:09,390 --> 00:20:10,800 >> En repensant à lundi. 449 00:20:10,800 --> 00:20:13,430 450 00:20:13,430 --> 00:20:17,170 Quel est le nom de cette fonction basée sur la syntaxe? 451 00:20:17,170 --> 00:20:19,784 Non, je veux dire, il ya clairement aucun nom associated-- certainement 452 00:20:19,784 --> 00:20:21,200 pas dans ce que je l'ai souligné ici. 453 00:20:21,200 --> 00:20:22,560 >> Mais qui est réellement OK. 454 00:20:22,560 --> 00:20:25,840 Ceci est une fonction anonyme, ou un fonction lambda comme certains pourraient l'appeler. 455 00:20:25,840 --> 00:20:27,589 Et cela signifie juste il est encore une fonction. 456 00:20:27,589 --> 00:20:29,400 Il est juste, vous ne pouvez pas l'appeler par son nom. 457 00:20:29,400 --> 00:20:30,057 Mais qui est OK. 458 00:20:30,057 --> 00:20:33,140 Étant donné que de plus, le navigateur a été préprogrammé par des sociétés comme Google 459 00:20:33,140 --> 00:20:38,540 ou Microsoft ou Mozilla ou d'autres à il suffit de savoir que si le champ .onsubmit 460 00:20:38,540 --> 00:20:43,400 à l'intérieur d'un élément de formulaire a le valeur, le traiter comme un function-- 461 00:20:43,400 --> 00:20:44,750 un pointeur de fonction, si vous voulez. 462 00:20:44,750 --> 00:20:46,910 Et appeler lorsque le formulaire est soumis. 463 00:20:46,910 --> 00:20:50,350 >> Donc, ce code doit être exécuté lorsque le formulaire est soumis? 464 00:20:50,350 --> 00:20:52,526 Apparemment tout, à l'intérieur de l'accolade. 465 00:20:52,526 --> 00:20:53,650 Et cela est juste stylistique. 466 00:20:53,650 --> 00:20:55,626 >> Vous pouvez le faire comme nous avons tendance à faire dans CS50. 467 00:20:55,626 --> 00:20:58,250 Mais en JavaScript, la plupart des gens ont tendance à rester sur la même ligne 468 00:20:58,250 --> 00:21:01,960 simplement parce qu'il est plus clairement associée à cette fonction de mots clés. 469 00:21:01,960 --> 00:21:03,240 Alors maintenant, que fais-je? 470 00:21:03,240 --> 00:21:08,616 >> Si form.email.value égal égaux la chaîne vide ou rien, voici 471 00:21:08,616 --> 00:21:11,490 une alerte où je vais dire, vous devez fournir votre adresse e-mail, 472 00:21:11,490 --> 00:21:12,690 et puis retourner faux. 473 00:21:12,690 --> 00:21:15,720 Et il est faux de dire que ce retour empêche la soumission du formulaire. 474 00:21:15,720 --> 00:21:19,480 Pendant ce temps, si la valeur du mot de passe blanc, je vais crier à l'utilisateur 475 00:21:19,480 --> 00:21:21,150 et dites, vous devez fournir un mot de passe. 476 00:21:21,150 --> 00:21:23,700 >> Pendant ce temps, les choses deviennent un peu de fantaisie ici. 477 00:21:23,700 --> 00:21:29,160 Si form.password.value ne le fait pas form.confirmation.value égal, 478 00:21:29,160 --> 00:21:31,680 l'autre domaine, crier à l'utilisateur que les mots de passe 479 00:21:31,680 --> 00:21:33,860 ne correspondent pas comme ils n'a pas à l'heure. 480 00:21:33,860 --> 00:21:35,780 Et puis celui-ci est un peu plus sexy parce que je 481 00:21:35,780 --> 00:21:40,470 sais que je savais que conceptuellement vérifier est le nom d'une case à cocher. 482 00:21:40,470 --> 00:21:45,680 >> Donc, je peux utiliser un point d'exclamation Point-à-dire si le chèque est pas 483 00:21:45,680 --> 00:21:48,040 checked-- il est l'opérateur booléen valeur, vrai ou false-- 484 00:21:48,040 --> 00:21:49,700 Je crie à l'utilisateur pour cette raison. 485 00:21:49,700 --> 00:21:52,300 Sinon, si nous obtenons par l'ensemble de ces conditions, 486 00:21:52,300 --> 00:21:53,270 disons simplement revenir vrai. 487 00:21:53,270 --> 00:21:54,700 Laissez le formulaire soumis. 488 00:21:54,700 --> 00:21:56,560 Et ce sera alors se produire. 489 00:21:56,560 --> 00:21:57,740 >> Voyons taper cramoisi. 490 00:21:57,740 --> 00:22:00,230 Nous allons vérifier la boîte, cliquez sur Enregistrer. 491 00:22:00,230 --> 00:22:01,979 Et maintenant je vais à la destination. 492 00:22:01,979 --> 00:22:03,270 Maintenant, il n'y a pas là la base de données. 493 00:22:03,270 --> 00:22:05,370 Il ya rien d'intéressant dans register.php. 494 00:22:05,370 --> 00:22:07,980 Je voulais juste quelque chose à réellement parler. 495 00:22:07,980 --> 00:22:09,140 Permettez-moi de faire une pause, ici. 496 00:22:09,140 --> 00:22:16,270 Vous avez des questions sur ce que nous venons de faire ou ce que certains de cette nouvelle syntaxe est? 497 00:22:16,270 --> 00:22:17,640 OK, ouais? 498 00:22:17,640 --> 00:22:20,025 >> Auditoire: Alors, tout case est automatiquement un booléen. 499 00:22:20,025 --> 00:22:21,650 Vous ne devez pas déclarer comme ça. 500 00:22:21,650 --> 00:22:22,649 >> DAVID J. Malan: Exact. 501 00:22:22,649 --> 00:22:29,340 Toute case qui est envoyé à vous de un formulaire HTML à votre code JavaScript 502 00:22:29,340 --> 00:22:31,760 seront traitées, oui, comme un Boolean value-- vrai ou faux. 503 00:22:31,760 --> 00:22:32,635 Il est une bonne question. 504 00:22:32,635 --> 00:22:36,080 Alors que les autres valeurs, de Bien sûr, avoir été texte, les chaînes AKA. 505 00:22:36,080 --> 00:22:38,500 >> Très bien, alors laissez-moi rembobiner un peu plus loin. 506 00:22:38,500 --> 00:22:39,900 Quel a été le point entier de cela? 507 00:22:39,900 --> 00:22:41,400 Juste pour être clair. 508 00:22:41,400 --> 00:22:44,940 Comme nous le savons déjà, même de Pset7 et même de la conférence de la semaine dernière 509 00:22:44,940 --> 00:22:51,120 exemples, que nous ne pouvons évidemment vérifier $ _POST $ _GET Voir si l'utilisateur donne-nous 510 00:22:51,120 --> 00:22:52,200 une valeur vide. 511 00:22:52,200 --> 00:22:54,400 Rappelez-vous la fonction vide en PHP. 512 00:22:54,400 --> 00:22:58,040 >> Donc, juste pour être clair, ce qui est une raison nous pourrions aussi 513 00:22:58,040 --> 00:23:00,535 envie de faire cette vérification d'erreur à l'intérieur du navigateur? 514 00:23:00,535 --> 00:23:03,350 515 00:23:03,350 --> 00:23:06,080 Quelle est la motivation ici? 516 00:23:06,080 --> 00:23:06,580 Ouais. 517 00:23:06,580 --> 00:23:09,735 >> PUBLIC: plus rapide, et vous ne le faites pas envoyer des données inutiles sur le serveur. 518 00:23:09,735 --> 00:23:10,610 DAVID J. Malan: Bon. 519 00:23:10,610 --> 00:23:11,170 Il est plus rapide. 520 00:23:11,170 --> 00:23:12,920 Vous ne envoyez pas inutile données pour le serveur. 521 00:23:12,920 --> 00:23:14,670 >> Ainsi, vous obtenez une plus réponse immédiate. 522 00:23:14,670 --> 00:23:16,560 Et dans l'ensemble, l'utilisateur expérience est mieux. 523 00:23:16,560 --> 00:23:17,900 Pensez à l'alternative. 524 00:23:17,900 --> 00:23:21,160 >> Si pour Gmail-- et était le cas il ya plusieurs années. 525 00:23:21,160 --> 00:23:24,160 Supposons que vous avez un nouveau message Gmail compte, mais le seul moyen grâce 526 00:23:24,160 --> 00:23:26,510 de voir que est à, comme, recharger la page entière. 527 00:23:26,510 --> 00:23:29,030 Ou supposons que vous cliquez sur un lien pour lire un email. 528 00:23:29,030 --> 00:23:31,600 >> Tout doit donc recharger que vous pouvez voir l'e-mail. 529 00:23:31,600 --> 00:23:33,380 Ou Facebook-- vous obtenez un message de chat. 530 00:23:33,380 --> 00:23:36,000 Vous ne voyez pas ce que vous rechargez la page ou cliquez sur un lien. 531 00:23:36,000 --> 00:23:38,380 >> Comme, ce serait un terriblement expérience utilisateur ennuyeux. 532 00:23:38,380 --> 00:23:41,300 Et voici ce qu'elle était, clairement, quand je courais pour UC 533 00:23:41,300 --> 00:23:44,760 et sur le web est beaucoup moins dynamique et JavaScript n'a pas été aussi popularisé 534 00:23:44,760 --> 00:23:45,601 comme il est maintenant. 535 00:23:45,601 --> 00:23:47,850 Et les choses deviennent beaucoup plus dynamique et beaucoup plus 536 00:23:47,850 --> 00:23:49,900 côté client dans ce sens. 537 00:23:49,900 --> 00:23:54,370 >> Mais il ya un hic ici, et cette est une sorte de chasse aux sorcières ennuyeux. 538 00:23:54,370 --> 00:23:58,720 Tout simplement parce que vous ajoutez côté client détection comme cela ne signifie pas 539 00:23:58,720 --> 00:24:01,430 vous pouvez ou devez abandonner détection de côté de serveur. 540 00:24:01,430 --> 00:24:04,080 Vous voulez essentiellement à mettre votre Vérification des erreurs dans les deux endroits. 541 00:24:04,080 --> 00:24:05,830 Parce que ce qui était un de la leçon 542 00:24:05,830 --> 00:24:10,270 de l'article que je lis quelques extraits de cette system-- CMS stupide 543 00:24:10,270 --> 00:24:14,410 Content Management system-- qui était la mise en oeuvre de son système d'authentification, 544 00:24:14,410 --> 00:24:16,790 sa connexion via ce mécanisme? 545 00:24:16,790 --> 00:24:19,515 546 00:24:19,515 --> 00:24:20,469 JavaScript. 547 00:24:20,469 --> 00:24:21,499 >> PUBLIC: JavaScript. 548 00:24:21,499 --> 00:24:23,290 DAVID J. Malan: JavaScript, exactement, non? 549 00:24:23,290 --> 00:24:24,610 Il a été l'utilisation de JavaScript. 550 00:24:24,610 --> 00:24:27,120 Et littéralement, vous les gars ont joué un peu probablement 551 00:24:27,120 --> 00:24:28,700 avec l'inspecteur de Chrome. 552 00:24:28,700 --> 00:24:30,890 Et si je peux le trouver, inspecter élément. 553 00:24:30,890 --> 00:24:33,670 >> Permettez-moi passer à faire toutes les options de Google Chrome. 554 00:24:33,670 --> 00:24:37,080 Et voilà comment il est facile de désactiver JavaScript dans un navigateur. 555 00:24:37,080 --> 00:24:38,950 Vérifiez, pas plus JavaScript. 556 00:24:38,950 --> 00:24:41,070 >> Donc, en toute équité, beaucoup de nos jours le web 557 00:24:41,070 --> 00:24:43,430 va tout simplement de rompre parce que Gmail et autres sites-- 558 00:24:43,430 --> 00:24:46,140 Facebook-- supposer que JavaScript est activé. 559 00:24:46,140 --> 00:24:50,180 Mais si vous faites quelque chose de stupide comme seulement valider une entrée de l'utilisateur 560 00:24:50,180 --> 00:24:52,520 et la vérification pour les erreurs sur le côté du client, 561 00:24:52,520 --> 00:24:54,940 un adversaire pourrait facilement le faire. 562 00:24:54,940 --> 00:24:57,180 Et puis même plus intelligents adversaire comme vous les gars 563 00:24:57,180 --> 00:25:01,120 maintenant pourrait utiliser Telnet ou Curl ou des commandes de ligne de commande seulement 564 00:25:01,120 --> 00:25:05,300 et fait envoyer des messages au serveur qui ne sont pas de la même erreur cochée. 565 00:25:05,300 --> 00:25:08,380 >> Donc, ce qui est plus d'un d'interface utilisateur décision 566 00:25:08,380 --> 00:25:13,060 qu'il ne l'est une technique réel improvement-- la mise en œuvre 567 00:25:13,060 --> 00:25:14,410 côté client de quelque chose comme ça. 568 00:25:14,410 --> 00:25:16,800 Alors maintenant un rapide coup d'œil, mais Je vais laisser la parole à la marche en ligne 569 00:25:16,800 --> 00:25:17,674 à travers de celui-ci. 570 00:25:17,674 --> 00:25:21,480 En forme de deux, nous sommes allés en fait par et nettoyé le code un peu. 571 00:25:21,480 --> 00:25:23,650 Mais permettez-moi de céder la parole à un des vidéos que nous allons probablement 572 00:25:23,650 --> 00:25:27,970 Intégrer dans Pset8 qui montre juste vous un syntaxe similaire en utilisant une bibliothèque appelée 573 00:25:27,970 --> 00:25:32,320 jQuery, qui est un super, super bibliothèque populaire en JavaScript 574 00:25:32,320 --> 00:25:34,510 que franchement la plupart des gens il suffit d'utiliser ces jours 575 00:25:34,510 --> 00:25:37,070 et même de prêter à confusion JavaScript être lui-même. 576 00:25:37,070 --> 00:25:38,950 >> Et elle tend à impliquer certains signes de dollar 577 00:25:38,950 --> 00:25:41,350 et des mots-clés comme le document ici entre parenthèses. 578 00:25:41,350 --> 00:25:44,480 Mais encore une fois, permettez-moi de céder la parole à des tutoriels plus lents en ligne 579 00:25:44,480 --> 00:25:46,750 plutôt que d'immobilisme en seulement syntaxe. 580 00:25:46,750 --> 00:25:48,630 Passons à quelque chose d'un peu plus frais 581 00:25:48,630 --> 00:25:50,520 en termes de demandes de ce. 582 00:25:50,520 --> 00:25:57,730 >> Donc, en particulier, me laisser aller de l'avant et ouvrir ce ici. 583 00:25:57,730 --> 00:25:58,340 Allons. 584 00:25:58,340 --> 00:25:59,380 Nous y voilà. 585 00:25:59,380 --> 00:26:01,500 >> Permettez-moi d'ouvrir cette image ici. 586 00:26:01,500 --> 00:26:03,450 Inutilement compliqué la recherche, mais il 587 00:26:03,450 --> 00:26:07,880 décrit une technique appelée AJAX-- Asynchronous JavaScript et XML, où 588 00:26:07,880 --> 00:26:10,530 X pour XML est en fait plus vraiment utilisé. 589 00:26:10,530 --> 00:26:13,430 Il a tendance à utiliser quelque chose autre appelé JSON. 590 00:26:13,430 --> 00:26:16,560 >> Mais voici comment quelque chose comme Google Maps ou Google Earth fonctionne. 591 00:26:16,560 --> 00:26:18,060 Essayons à la volée, en fait. 592 00:26:18,060 --> 00:26:21,590 Permettez-moi aller de l'avant et ouvre jusqu'à Chrome sur mon navigateur. 593 00:26:21,590 --> 00:26:26,236 >> Et laissez-moi aller dans, dire, maps.google.com. 594 00:26:26,236 --> 00:26:29,260 595 00:26:29,260 --> 00:26:31,930 Et en fait, si vous êtes vieux suffit de se rappeler ce que, 596 00:26:31,930 --> 00:26:35,600 comme, MapQuest était comme retour dans la journée, et peut-être qu'ils fonctionnent toujours comme ça. 597 00:26:35,600 --> 00:26:38,870 Lorsque vous avez utilisé pour rechercher quelque chose-- 33 Oxford Street, Cambridge, Mass, 598 00:26:38,870 --> 00:26:40,650 Faisons this-- vous serait en fait, si vous 599 00:26:40,650 --> 00:26:43,000 voulu déplacer vers le haut et bas, gauche et droite, 600 00:26:43,000 --> 00:26:44,920 vous souhaitez ressembler à un grosse flèche sur le dessus, et il 601 00:26:44,920 --> 00:26:46,921 serait vous montrer un autre cadre de la carte ici. 602 00:26:46,921 --> 00:26:49,753 Ou vous faites un clic gauche et vous irait ici, ou un autre clic 603 00:26:49,753 --> 00:26:51,000 et vous voulez aller ici. 604 00:26:51,000 --> 00:26:53,000 Mais au lieu de ces jours, nous avons bien sûr juste 605 00:26:53,000 --> 00:26:55,970 prendre pour acquis que nous pouvons aller autour de Cambridge assez rapidement 606 00:26:55,970 --> 00:26:57,550 juste en cliquant et glissant. 607 00:26:57,550 --> 00:26:59,130 Mais remarquez, il ya quelques problèmes. 608 00:26:59,130 --> 00:27:02,160 >> Si je fais cela assez rapidement, ce qui semble être le cas 609 00:27:02,160 --> 00:27:05,960 comme je traîne un peu trop vite pour l'ordinateur à tenir le rythme? 610 00:27:05,960 --> 00:27:07,160 Que voyez-vous? 611 00:27:07,160 --> 00:27:07,660 Ouais. 612 00:27:07,660 --> 00:27:09,232 >> PUBLIC: Les pixels ne rafraîchissent pas. 613 00:27:09,232 --> 00:27:10,940 DAVID J. Malan: Le pixels Ne rafraîchissez pas. 614 00:27:10,940 --> 00:27:12,870 Il ya actually-- et vous pourrait voir cela, en fait, 615 00:27:12,870 --> 00:27:15,360 si vous regardez en ligne et pause ce fait ou ralentit les choses 616 00:27:15,360 --> 00:27:18,600 pour once-- vous verrez qu'il ya des des tuiles, des carrés, des rectangles ou que 617 00:27:18,600 --> 00:27:22,040 sont absents de la carte jusqu'à ce que une fraction de seconde plus tard, plus de données, 618 00:27:22,040 --> 00:27:24,390 plus d'images en fait apparaît à l'écran. 619 00:27:24,390 --> 00:27:29,810 Et en fait, si nous faisons cela en regardant jusqu'à Chrome's-- disons, Chrome-- 620 00:27:29,810 --> 00:27:30,310 Voyons. 621 00:27:30,310 --> 00:27:31,090 Nous ne pouvons pas faire cela. 622 00:27:31,090 --> 00:27:31,860 >> Oh, oups. 623 00:27:31,860 --> 00:27:34,761 Ouvrons maps.google.com. 624 00:27:34,761 --> 00:27:36,660 Permettez-moi de rendre la fenêtre plus grande encore. 625 00:27:36,660 --> 00:27:38,836 >> Retour à 33 Oxford Street. 626 00:27:38,836 --> 00:27:42,010 627 00:27:42,010 --> 00:27:43,760 Quel a été le site, je suis sur récemment? 628 00:27:43,760 --> 00:27:46,440 Je devais ce, comme, diatribe privé à moi-même que je serais un message instantané alors 629 00:27:46,440 --> 00:27:48,470 tout ami qui était en ligne qui voulait l'entendre. 630 00:27:48,470 --> 00:27:49,345 Il ya un certain site Web. 631 00:27:49,345 --> 00:27:52,680 Je pense qu'il est donc Comcast-- un très grand fournisseur de services Internet américain. 632 00:27:52,680 --> 00:27:56,355 Vous pouvez, lors de la signature de nouveaux câbles service de modem ou d'un service de télévision par câble, 633 00:27:56,355 --> 00:27:59,230 ils ont une forme très raisonnable où ils vous demandent votre adresse. 634 00:27:59,230 --> 00:28:01,450 Et avoir cette incroyable fonctionnalité appelée auto complète, 635 00:28:01,450 --> 00:28:04,600 comme Google, qui commence à se remplir dans la réponse à votre question. 636 00:28:04,600 --> 00:28:08,090 >> Le problème est, ils le font d'auto-complétion sur les premières choses que vous tapez. 637 00:28:08,090 --> 00:28:12,890 Donc, si vous commencez à taper dans 33, il va vous montrer littéralement chaque maison 638 00:28:12,890 --> 00:28:15,790 en Amérique qui commence avec le nombre 33 639 00:28:15,790 --> 00:28:17,920 avant de continuer à attendez-vous à taper plus. 640 00:28:17,920 --> 00:28:20,660 Donc, si vous tapez 33 Oxford, puis il vous montre toutes les rues 641 00:28:20,660 --> 00:28:24,726 en Amérique qui a 33 Oxford son nom, indépendamment de la ville 642 00:28:24,726 --> 00:28:25,350 que vous êtes. 643 00:28:25,350 --> 00:28:26,320 >> Et puis vous continuez à taper. 644 00:28:26,320 --> 00:28:28,930 Et enfin, il se rend compte qu'ils ne sont pas offre de service à votre domicile à Cambridge 645 00:28:28,930 --> 00:28:29,920 ou quelque chose comme ça. 646 00:28:29,920 --> 00:28:33,410 Mais le fait est, ce qui est le plus la mise en œuvre de stupide auto 647 00:28:33,410 --> 00:28:34,140 compléter jamais. 648 00:28:34,140 --> 00:28:36,400 >> Et je vais juste hors sur cette tangente à nouveau. 649 00:28:36,400 --> 00:28:39,040 Mais il ya de bonnes manières à utiliser JavaScript et de mauvaises manières. 650 00:28:39,040 --> 00:28:40,750 Et pas nécessairement la meilleure. 651 00:28:40,750 --> 00:28:46,360 >> Mais le point ici, avant cette tirade, était d'ouvrir les outils ici 652 00:28:46,360 --> 00:28:49,480 et ouvrir les outils de développement, comme nous l'avons encouragé avant, 653 00:28:49,480 --> 00:28:52,840 et de regarder le Réseau onglet que je clique vraiment rapide. 654 00:28:52,840 --> 00:28:55,400 Et remarquez tout un tas de requêtes get arrivé. 655 00:28:55,400 --> 00:28:57,310 Tout cela est arrivé parce que je traînais. 656 00:28:57,310 --> 00:29:00,170 >> Et le plus probable, en effet beaucoup de ces lignes 657 00:29:00,170 --> 00:29:04,060 maintenant sont l'image JPEG slash types MIME ou types de contenu. 658 00:29:04,060 --> 00:29:07,750 En effet, ce chrome est de faire chaque fois que je clique et faites glisser, cliquez sur 659 00:29:07,750 --> 00:29:11,650 et la traînée, est qu'il est la réalisation, oh, je besoin d'aller demander à Google pour la tuile 660 00:29:11,650 --> 00:29:15,080 sur la carte qui est ici, télécharger rapidement via HTTP, 661 00:29:15,080 --> 00:29:19,550 et puis l'ajouter à la soi-disant DOM aux navigateurs Web dans l'arbre de la mémoire 662 00:29:19,550 --> 00:29:24,430 représentation de telle sorte que l'utilisateur, moi, voit que dalle mise à jour. 663 00:29:24,430 --> 00:29:26,795 Et cela est dû une technique appelée AJAX. 664 00:29:26,795 --> 00:29:28,920 Retour dans la journée, il a vraiment ce fut le cas que si vous 665 00:29:28,920 --> 00:29:33,050 voulu changer ce qui est sur l'écran, vous devez cliquer sur haut, bas, gauche, 666 00:29:33,050 --> 00:29:33,550 droit. 667 00:29:33,550 --> 00:29:34,740 Et puis une nouvelle page serait ouvrir. 668 00:29:34,740 --> 00:29:36,531 Mais ces jours-ci, tout est plus dynamique. 669 00:29:36,531 --> 00:29:40,490 Il arrive dans la façon dont nous les humains espérons qu'il serait effectivement de manière interactive. 670 00:29:40,490 --> 00:29:43,210 Et il y parvient en moyen d'une technique appelée 671 00:29:43,210 --> 00:29:46,170 AJAX, qui est peut-être le meilleur expliquée par un exemple. 672 00:29:46,170 --> 00:29:49,730 Tout d'abord, laissez-moi aller de l'avant et ouvrir un fichier 673 00:29:49,730 --> 00:29:53,540 appelé quote.php dans le code de distribution d'aujourd'hui. 674 00:29:53,540 --> 00:29:56,200 >> Et puis laissez-moi faire whoops symbol--. 675 00:29:56,200 --> 00:30:02,399 Laissez-moi faire symbole = GOOG pour juste un peu de bouillon. 676 00:30:02,399 --> 00:30:04,440 Ou en fait, nous allons faire la l'un de l'Pset GRATUIT. 677 00:30:04,440 --> 00:30:05,270 Entrez. 678 00:30:05,270 --> 00:30:06,580 >> Et maintenant remarqué que je serai de retour. 679 00:30:06,580 --> 00:30:09,210 Donc, cela est vraiment fichier PHP court que je 680 00:30:09,210 --> 00:30:13,210 écrit qui emprunte simplement le code à partir de la fonction de recherche de Pset7 681 00:30:13,210 --> 00:30:17,830 et crache utilisant cette accolade et citations et la notation du côlon, apparemment, 682 00:30:17,830 --> 00:30:22,747 Le prix de l'action en cours pour la entreprise que vous passez via get. 683 00:30:22,747 --> 00:30:24,580 Donc ce qui est différent de plus de ce que nous avons 684 00:30:24,580 --> 00:30:26,496 fait dans cet avis je suis crachant littéralement 685 00:30:26,496 --> 00:30:27,870 ce qui ressemble à du code JavaScript. 686 00:30:27,870 --> 00:30:30,020 >> En fait, ceci est un objet JavaScript. 687 00:30:30,020 --> 00:30:34,130 En fait, juste pour être plus clair, JavaScript Object Notation-- JSON-- 688 00:30:34,130 --> 00:30:38,330 est juste une façon élégante de dire que vous peut représenter des données en JavaScript beaucoup 689 00:30:38,330 --> 00:30:41,660 comme vous pouvez en PHP en utilisant des paires de valeurs de clés. 690 00:30:41,660 --> 00:30:44,270 Donc, si je voulais déclarer une variable en JavaScript 691 00:30:44,270 --> 00:30:47,872 à Zamyla représente, pour instance-- une structure pour Zamyla-- 692 00:30:47,872 --> 00:30:49,580 et nous l'appellerons étudiant, cette variable. 693 00:30:49,580 --> 00:30:53,060 Son identité est une maison est Winthrop, et le nom est Zamyla. 694 00:30:53,060 --> 00:30:55,490 >> Mais je peux aussi avoir un tableau d'objets. 695 00:30:55,490 --> 00:30:58,710 Donc, si je voulais vraiment avoir un tableau en JavaScript contenant 696 00:30:58,710 --> 00:31:01,740 plusieurs de ces objets, ce temps représentant personnel, 697 00:31:01,740 --> 00:31:04,910 Je pourrais avoir ces trois morceaux de code de retour 698 00:31:04,910 --> 00:31:08,560 à dos à dos pour ces trois anciens membres du personnel. 699 00:31:08,560 --> 00:31:12,201 Ainsi, la syntaxe, assez similaire à both-- à PHP. 700 00:31:12,201 --> 00:31:13,700 Mais ce qui est particulièrement JavaScript. 701 00:31:13,700 --> 00:31:15,940 Il est la notation de l'objet. 702 00:31:15,940 --> 00:31:17,240 Alors, quel est ce utile? 703 00:31:17,240 --> 00:31:21,580 >> Si je écrire du code qui crache JSON-- JavaScript Object Notation-- choses qui 704 00:31:21,580 --> 00:31:24,670 ressemble à ceci ou choses qui ressemble à la structure de Zamyla, 705 00:31:24,670 --> 00:31:27,730 Je peux effectivement utiliser cette dans les programmes que je vous écris. 706 00:31:27,730 --> 00:31:30,660 Permettez-moi de passer à ajax0.html. 707 00:31:30,660 --> 00:31:33,310 Et ce too-- pas beaucoup réfléchi à l'esthétique. 708 00:31:33,310 --> 00:31:34,660 Mais regardez ce qui arrive. 709 00:31:34,660 --> 00:31:37,050 >> Permettez-moi aller de l'avant et tape gratuitement ici. 710 00:31:37,050 --> 00:31:38,490 Cliquez sur Obtenir un devis. 711 00:31:38,490 --> 00:31:41,060 Et remarquez l'URL n'a pas changé. 712 00:31:41,060 --> 00:31:47,250 Mais je l'ai fait obtenir un pop up avec apparemment penny prix de l'action d'aujourd'hui de 0,15 $. 713 00:31:47,250 --> 00:31:49,062 Donc pas si mal que ça. 714 00:31:49,062 --> 00:31:52,020 Mais la différence est que quelque part, ces données revient à moi directement. 715 00:31:52,020 --> 00:31:54,250 Mais prenons un pas vers quelque chose de plus familier. 716 00:31:54,250 --> 00:31:58,900 Dans la version d'un de cela, laissez-moi tapez à nouveau libre, cliquez sur Obtenir un devis, 717 00:31:58,900 --> 00:32:01,146 et maintenant-- oh, ce fut en fait la version jQuery. 718 00:32:01,146 --> 00:32:03,270 Alors laissez moi-- je ne l'ai pas avance rapide assez loin. 719 00:32:03,270 --> 00:32:05,830 Permettez-moi de passer à la version deux, qui est l'endroit où je voulais. 720 00:32:05,830 --> 00:32:07,260 Remarquez que ce que je fais ici. 721 00:32:07,260 --> 00:32:10,370 Je dois une web page-- super version simple d'une page Web 722 00:32:10,370 --> 00:32:14,260 vous pouvez utiliser aujourd'hui avec un champ de texte gratuitement ici et puis apparemment juste 723 00:32:14,260 --> 00:32:14,880 texte. 724 00:32:14,880 --> 00:32:16,860 >> Ce ne sont pas une forme ici, apparemment. 725 00:32:16,860 --> 00:32:19,360 Mais si je clique reçois citation, remarque ma page web 726 00:32:19,360 --> 00:32:22,760 est en train de changer, comme si je viens de recevoir un nouveau message instantané 727 00:32:22,760 --> 00:32:25,360 ou comme si je viens d'emménager le carte et nécessaire pour obtenir davantage de données 728 00:32:25,360 --> 00:32:29,220 dynamiquement ajouté à la page web sans changement d'URL et l'utilisateur 729 00:32:29,220 --> 00:32:30,980 expérience se interrompu. 730 00:32:30,980 --> 00:32:35,750 En effet, je suis toujours à la exactement la même ajax2.html place--. 731 00:32:35,750 --> 00:32:39,080 >> Alors regardons seulement à cet exemple et de voir comment cela se passe. 732 00:32:39,080 --> 00:32:42,490 Laissez-moi aller dans ajax2.html. 733 00:32:42,490 --> 00:32:44,770 Et remarquez la forme première. 734 00:32:44,770 --> 00:32:47,092 >> Ici, je me tourne hors d'auto-complétion. 735 00:32:47,092 --> 00:32:48,800 Parfois, il se ennuyeux si le navigateur 736 00:32:48,800 --> 00:32:50,508 est d'essayer de vous montrer toute votre histoire. 737 00:32:50,508 --> 00:32:53,450 Ainsi, vous pouvez le faire en HTML par juste dire auto-complétion éteint. 738 00:32:53,450 --> 00:32:57,290 >> Je vous ai donné ce texte un champ symbol-- plutôt, un ID de symbole. 739 00:32:57,290 --> 00:32:58,977 Et maintenant, cette fonctionnalité est intéressante. 740 00:32:58,977 --> 00:33:01,310 Nous avons pas parlé durée, mais vous pouvez penser 741 00:33:01,310 --> 00:33:03,177 comme une balise de paragraphe ou balise div. 742 00:33:03,177 --> 00:33:05,010 Il est ce qu'on appelle un dans l'élément de ligne, qui 743 00:33:05,010 --> 00:33:07,415 signifie que vous ne serez pas un paragraphe casser au-dessus et en dessous. 744 00:33:07,415 --> 00:33:11,530 Il va juste rester en ligne sans frapper l'équivalent de saisir. 745 00:33:11,530 --> 00:33:17,980 Donc, je l'ai donné ce morceau de HTML à déterminer un identificateur unique 746 00:33:17,980 --> 00:33:20,130 que je arbitrairement appelé prix. 747 00:33:20,130 --> 00:33:21,560 Et je dois un bouton Envoyer. 748 00:33:21,560 --> 00:33:25,420 >> Parce que maintenant ici-- et cela est effectivement superbe incroyable de voir comment peu de code 749 00:33:25,420 --> 00:33:27,660 vous pouvez écrire à faire relativement soignée things-- 750 00:33:27,660 --> 00:33:31,800 remarquerez que je l'ai fait ici, si je défiler vers le haut à la tête de cette page. 751 00:33:31,800 --> 00:33:34,970 Je l'ai inclus dans la première ma tête une balise script 752 00:33:34,970 --> 00:33:37,410 qui fait référence en fait un Fichier JavaScript ailleurs. 753 00:33:37,410 --> 00:33:39,702 Ceci est de l'organisation qui écrit jQuery, 754 00:33:39,702 --> 00:33:42,660 et cela est juste de vous donner la dernière version de la bibliothèque jQuery. 755 00:33:42,660 --> 00:33:46,305 >> Donc, cela est un peu comme forte inclure dans C ou exiger en PHP. 756 00:33:46,305 --> 00:33:48,900 Vous utilisez la balise script avec un attribut de la source. 757 00:33:48,900 --> 00:33:52,030 Mais maintenant mon propre code est va être bon ici. 758 00:33:52,030 --> 00:33:54,170 >> Remarquez je utiliser une fonction appelée devis. 759 00:33:54,170 --> 00:33:56,180 Et il semble un peu cryptique au premier coup d'œil. 760 00:33:56,180 --> 00:33:57,305 Mais nous allons taquiner cet appart. 761 00:33:57,305 --> 00:33:59,090 Donnez-moi une variable appelée URL. 762 00:33:59,090 --> 00:34:01,390 Attribuez-lui littéralement cette chaîne. 763 00:34:01,390 --> 00:34:04,530 Ainsi, guillemets simples et doubles JavaScript me donne juste une chaîne. 764 00:34:04,530 --> 00:34:06,900 Qu'est-ce que le plus de faire? 765 00:34:06,900 --> 00:34:08,199 Concaténation. 766 00:34:08,199 --> 00:34:12,610 >> Donc, cela est maintenant la syntaxe jQuery qui prend un peu de temps pour s'y habituer. 767 00:34:12,610 --> 00:34:18,310 Mais cette juste moyen va me chercher le DOM nœud dont l'identifiant unique est symbole. 768 00:34:18,310 --> 00:34:21,929 Le hashtag-il des moyens symbole d'identification unique. 769 00:34:21,929 --> 00:34:24,929 >> Le symbole du dollar dans le les parenthèses juste signifier, envelopper cette 770 00:34:24,929 --> 00:34:28,510 jQuery dans une sorte de sauce secrète afin vous obtenez des fonctionnalités supplémentaires. 771 00:34:28,510 --> 00:34:31,880 Et puis .val est apparemment une fonction, ou comme on dit maintenant, 772 00:34:31,880 --> 00:34:35,219 une méthode à l'intérieur de ce noeud qui vous donne juste la valeur. 773 00:34:35,219 --> 00:34:38,896 Donc en bref, laid et confusion que cela puisse paraître à première vue, 774 00:34:38,896 --> 00:34:42,020 Cela signifie simplement obtenir de l'utilisateur a tapé dans, le mettre à la fin de la chaîne 775 00:34:42,020 --> 00:34:42,880 il en concaténant. 776 00:34:42,880 --> 00:34:43,739 Ce est tout. 777 00:34:43,739 --> 00:34:46,070 >> Alors maintenant, trois dernières lignes. 778 00:34:46,070 --> 00:34:48,690 Vous pouvez presser beaucoup de des fonctionnalités de trois lignes. 779 00:34:48,690 --> 00:34:52,199 Ce signe de dollar, en tant que de côté, est juste un surnom 780 00:34:52,199 --> 00:34:55,800 pour une variable globale spéciale appelé littéralement jQuery. 781 00:34:55,800 --> 00:34:57,060 >> Dollar sign semble juste cool. 782 00:34:57,060 --> 00:35:00,080 Ainsi, la communauté jQuery juste genre de utilisée comme leur symbole spécial. 783 00:35:00,080 --> 00:35:02,470 Cela ne signifie pas ce que cela signifie en PHP. 784 00:35:02,470 --> 00:35:06,356 En JavaScript, signe de dollar est tout comme une lettre de l'alphabet 785 00:35:06,356 --> 00:35:07,480 ou un certain nombre de variables. 786 00:35:07,480 --> 00:35:09,000 >> Vous pouvez juste avoir comme nom. 787 00:35:09,000 --> 00:35:09,770 Semble juste cool. 788 00:35:09,770 --> 00:35:11,890 Donc la communauté adopté comme un surnom 789 00:35:11,890 --> 00:35:13,390 pour leur propre bibliothèque appelée jQuery. 790 00:35:13,390 --> 00:35:15,060 >> Et il est super populaire. 791 00:35:15,060 --> 00:35:17,620 Donc obtenir JSON est exactement cela. 792 00:35:17,620 --> 00:35:19,920 Il est une fonction que le gens de jQuery écrit 793 00:35:19,920 --> 00:35:23,340 qui obtient JSON à partir d'un Server-- JavaScript Object Notation. 794 00:35:23,340 --> 00:35:25,680 D'après ce que l'URL est ce que ça va pour obtenir cette information? 795 00:35:25,680 --> 00:35:27,790 Apparemment, à partir de cette URL ici. 796 00:35:27,790 --> 00:35:31,180 >> Et que devrait faire le navigateur comme dès qu'il revient cette réponse? 797 00:35:31,180 --> 00:35:36,500 Et ceci est la magie de AJAX, ainsi speak-- Asynchronous JavaScript dans XML. 798 00:35:36,500 --> 00:35:41,320 Il est difficile de voir avec un tel exemple simple que nous avons eu ici. 799 00:35:41,320 --> 00:35:44,730 >> Mais ceci est asynchrone en le sens que mon code lorsque 800 00:35:44,730 --> 00:35:48,530 exécuté envoyé un message à la serveur pour aller me chercher du JSON. 801 00:35:48,530 --> 00:35:51,340 Et il est arrivé super rapide que je suis une réponse. 802 00:35:51,340 --> 00:35:55,130 Mais ce qui est intéressant est que cette ligne de code n'a pas accrocher mon ordinateur. 803 00:35:55,130 --> 00:35:56,550 >> Je ne vois pas une icône de la filature. 804 00:35:56,550 --> 00:35:59,200 Je ne perds pas le capacité de se déplacer ma souris. 805 00:35:59,200 --> 00:36:01,340 Mon navigateur était en fait parfaitement bien. 806 00:36:01,340 --> 00:36:06,290 >> Parce que la façon gère JavaScript la réponse du serveur est la suivante. 807 00:36:06,290 --> 00:36:09,740 Vous enregistrez ce que vous appelez une fonction de rappel, qui 808 00:36:09,740 --> 00:36:12,830 signifie simplement que, hey, JavaScript. 809 00:36:12,830 --> 00:36:16,100 Dès que le serveur répond avec JSON, 810 00:36:16,100 --> 00:36:18,750 se il vous plaît appeler cette fonction anonyme. 811 00:36:18,750 --> 00:36:23,910 >> Et se il vous plaît passé dans cette fonction toutes les chaînes que le serveur cracher 812 00:36:23,910 --> 00:36:26,080 comme un argument appelé données. 813 00:36:26,080 --> 00:36:28,360 Donc, en d'autres termes, si Je l'assemblage dynamique 814 00:36:28,360 --> 00:36:33,370 un quote.php URL passant dans cette symbole comme Free ou GOOG ou quoi, 815 00:36:33,370 --> 00:36:36,830 Je puis dire JavaScript aller chercher cette URL. 816 00:36:36,830 --> 00:36:39,080 Rappelez-vous que le navigateur va retourner quelque chose 817 00:36:39,080 --> 00:36:42,680 qui ressemble à l'heure, à ce que nous avons vu. 818 00:36:42,680 --> 00:36:45,940 >> Et ce que le second argument ici pour obtenir JSON dit 819 00:36:45,940 --> 00:36:48,450 est d'appeler cette fonction lorsque le serveur revient 820 00:36:48,450 --> 00:36:52,440 si elle est de 10 millisecondes à partir de maintenant ou 10 secondes à partir de maintenant. 821 00:36:52,440 --> 00:36:55,840 Et dès que vous le faites, ajouter le prix de la page. 822 00:36:55,840 --> 00:36:58,030 Cette syntaxe ici juste signifie aller chercher le noeud 823 00:36:58,030 --> 00:37:01,940 de l'arbre dont l'identificateur unique est price-- ce laps nous l'avons vu. 824 00:37:01,940 --> 00:37:04,320 >> Cette méthode appelée HTML juste dit, allez remplacer 825 00:37:04,320 --> 00:37:08,770 le code HTML qui est là avec data.price. 826 00:37:08,770 --> 00:37:10,200 Quel est data.price? 827 00:37:10,200 --> 00:37:12,850 Eh bien, le navigateur, rappelons-le, m'a montré ce retour. 828 00:37:12,850 --> 00:37:14,540 Donc, ce sont des données. 829 00:37:14,540 --> 00:37:18,100 >> Et donc il est un peu cryptique pour voir les virgules ici. 830 00:37:18,100 --> 00:37:19,350 Mais en fait, permettez-moi de le faire. 831 00:37:19,350 --> 00:37:22,890 Permettez-moi de coller ce très vite dans gedit 832 00:37:22,890 --> 00:37:27,240 et montrer ce que nous avons montré La structure de Zamyla plus tôt. 833 00:37:27,240 --> 00:37:31,610 >> Qu'est-ce que le serveur envoie dos est un petit objet qui ressemble à ceci. 834 00:37:31,610 --> 00:37:37,140 Et si data.price est juste me donner 0,1515. 835 00:37:37,140 --> 00:37:39,310 Donc, beaucoup de mouvement ici les pièces en une seule fois. 836 00:37:39,310 --> 00:37:41,860 >> Mais les faits marquants est que nous avons cette capacité 837 00:37:41,860 --> 00:37:44,600 à faire HTTP supplémentaire requêtes en utilisant JavaScript 838 00:37:44,600 --> 00:37:46,090 sans avoir à recharger la page. 839 00:37:46,090 --> 00:37:49,580 Et puis nous pouvons changer la page Web à la volée. 840 00:37:49,580 --> 00:37:51,850 Et il se trouve que JavaScript et d'autres langages 841 00:37:51,850 --> 00:37:54,510 peut être utilisé maintenant non seulement à muter pages Web, 842 00:37:54,510 --> 00:37:57,960 mais en fait écrire des logiciels dans un ordinateur réel, 843 00:37:57,960 --> 00:38:00,240 ne se limitent pas à Chrome ou similaire. 844 00:38:00,240 --> 00:38:03,530 >> En fait, si-- Colton, diriez-vous vous joindre à nous remonter ici 845 00:38:03,530 --> 00:38:06,100 avec votre code de laboratoire, et Chang ainsi? 846 00:38:06,100 --> 00:38:09,140 Allons de l'avant, après avoir parlé fonctions anonymes et rappels 847 00:38:09,140 --> 00:38:13,090 et vraiment tenter le sort ici avec une démonstration en direct avec des saignements 848 00:38:13,090 --> 00:38:16,480 technologie de pointe, l'un des ces dispositifs Elite mouvement. 849 00:38:16,480 --> 00:38:18,940 Maintenant, ce dispositif, rappel, est un petit appareil USB 850 00:38:18,940 --> 00:38:25,620 ainsi que that-- est beautiful-- qui se raccorde à vos ports USB. 851 00:38:25,620 --> 00:38:29,120 >> Et puis il constitue une entrée sous la forme de gestes humains 852 00:38:29,120 --> 00:38:32,560 par la détection en utilisant des rayons infrarouges, essentiellement, les mouvements de votre bras. 853 00:38:32,560 --> 00:38:35,150 Ainsi, alors que ce que Maria a essayé sur avant était musclé, 854 00:38:35,150 --> 00:38:39,000 fait sentir ce qui change votre bras, cette base est infrarouge. 855 00:38:39,000 --> 00:38:44,390 Donc, il est à la recherche pour les mouvements dans la sorte de sphère d'un pied ou deux 856 00:38:44,390 --> 00:38:46,190 du dispositif lui-même. 857 00:38:46,190 --> 00:38:48,950 >> Alors pourquoi je prends pas un coup de couteau à la première? 858 00:38:48,950 --> 00:38:53,100 Et allons-y et jetez vous sur les frais généraux ici. 859 00:38:53,100 --> 00:38:56,250 Mettons donc l'ordinateur portable de Colton ici. 860 00:38:56,250 --> 00:38:58,360 Nous avons Andrew sur le téléviseur. 861 00:38:58,360 --> 00:39:00,160 Et que voulez-vous que je fasse d'abord? 862 00:39:00,160 --> 00:39:02,409 >> COLTON: Aller de l'avant et juste mettre vos mains sur ce gars 863 00:39:02,409 --> 00:39:04,430 et vous verrez quelques paillettes fabuleux. 864 00:39:04,430 --> 00:39:07,230 >> DAVID J. Malan: Très bien. 865 00:39:07,230 --> 00:39:11,110 Tout cela se passe en temps réel. 866 00:39:11,110 --> 00:39:11,889 D'accord. 867 00:39:11,889 --> 00:39:12,680 Tout droit, et oui. 868 00:39:12,680 --> 00:39:14,119 So nice. 869 00:39:14,119 --> 00:39:15,410 Très bien, que pouvons-nous faire? 870 00:39:15,410 --> 00:39:17,900 >> COLTON: Allez à l'écran suivant et voir. 871 00:39:17,900 --> 00:39:19,136 >> DAVID J. Malan: Très bien. 872 00:39:19,136 --> 00:39:21,780 >> COLTON: Un petit jeu amusant où vous aurez à faire des robots. 873 00:39:21,780 --> 00:39:24,738 >> DAVID J. Malan: Très bien, si ce est faux mains me montrant ce qu'il faut faire. 874 00:39:24,738 --> 00:39:27,920 COLTON: Oui Alors allez-y et de saisir l'un des blocs 875 00:39:27,920 --> 00:39:30,637 et mettre sur le dessus du corps de ce robot. 876 00:39:30,637 --> 00:39:32,137 DAVID J. Malan: Oh, il est ma main. 877 00:39:32,137 --> 00:39:34,000 Oh. 878 00:39:34,000 --> 00:39:34,780 OK, adorable. 879 00:39:34,780 --> 00:39:37,500 880 00:39:37,500 --> 00:39:38,650 Attendez une minute, OK. 881 00:39:38,650 --> 00:39:41,320 Nous y voilà. 882 00:39:41,320 --> 00:39:43,590 >> COLTON: Je fait un sur accident. 883 00:39:43,590 --> 00:39:45,423 >> DAVID J. Malan: OK, je vais prendre ce type. 884 00:39:45,423 --> 00:39:45,923 Bon sang! 885 00:39:45,923 --> 00:39:48,467 886 00:39:48,467 --> 00:39:51,550 Lorsque nous pratiquions ce dernier nuit, vous savez ce que cela a dégénéré en? 887 00:39:51,550 --> 00:39:54,285 >> Comme ça. 888 00:39:54,285 --> 00:39:55,490 D'accord. 889 00:39:55,490 --> 00:39:55,990 Suivant un? 890 00:39:55,990 --> 00:39:56,860 >> COLTON: Bien sûr. 891 00:39:56,860 --> 00:39:58,818 >> DAVID J. Malan: Très bien, et il ya une troisième. 892 00:39:58,818 --> 00:40:01,130 893 00:40:01,130 --> 00:40:01,674 Bien. 894 00:40:01,674 --> 00:40:03,215 COLTON: Et dans celui-ci, vous obtenez to-- 895 00:40:03,215 --> 00:40:04,923 DAVID J. Malan: Oh, est belle celle-ci. 896 00:40:04,923 --> 00:40:06,650 COLTON: --yeah, chercher en dehors de cette fleur. 897 00:40:06,650 --> 00:40:07,441 DAVID J. Malan: OK. 898 00:40:07,441 --> 00:40:11,170 899 00:40:11,170 --> 00:40:11,670 Non? 900 00:40:11,670 --> 00:40:14,515 Omission. 901 00:40:14,515 --> 00:40:15,570 >> COLTON: Oh, là vous allez. 902 00:40:15,570 --> 00:40:18,680 >> DAVID J. Malan: Ah, coup d'oeil. 903 00:40:18,680 --> 00:40:19,830 Très agréable. 904 00:40:19,830 --> 00:40:22,470 Eh bien, pourquoi ne pas «nous prenons à un bénévole ici 905 00:40:22,470 --> 00:40:24,180 qui voudrait venir sur place. 906 00:40:24,180 --> 00:40:27,500 Que diriez-là dans le vert, est-il? 907 00:40:27,500 --> 00:40:30,540 >> Tout droit, et nous allons have-- au lieu de cela, certains d'entre vous 908 00:40:30,540 --> 00:40:34,590 pourrait connaître ce jeu ici-- couper la corde, peut-être? 909 00:40:34,590 --> 00:40:35,100 Voyons. 910 00:40:35,100 --> 00:40:37,320 Nous avons nos verres par ici? 911 00:40:37,320 --> 00:40:38,625 >> D'accord. 912 00:40:38,625 --> 00:40:39,270 Merci. 913 00:40:39,270 --> 00:40:39,380 Quel est votre nom? 914 00:40:39,380 --> 00:40:40,350 >> PUBLIC: Laura. 915 00:40:40,350 --> 00:40:41,266 >> DAVID J. Malan: Laura? 916 00:40:41,266 --> 00:40:42,120 Agréable à voir. 917 00:40:42,120 --> 00:40:45,600 Si cela ne vous dérange pas de mettre Google verre sur vos lunettes. 918 00:40:45,600 --> 00:40:46,970 Ceci est Colton. 919 00:40:46,970 --> 00:40:47,650 >> COLTON: Salut. 920 00:40:47,650 --> 00:40:48,140 Ravi de vous rencontrer. 921 00:40:48,140 --> 00:40:49,600 >> DAVID J. Malan: OK, viens autour. 922 00:40:49,600 --> 00:40:52,516 Très bien, alors ce que vous allez faire ici, ayant joué auparavant, 923 00:40:52,516 --> 00:40:55,650 est mis votre main sur le Leap Motion ici. 924 00:40:55,650 --> 00:40:57,210 Et maintenant votre flèche doit se déplacer. 925 00:40:57,210 --> 00:40:57,710 Oh, Non. 926 00:40:57,710 --> 00:40:58,066 >> PUBLIC: Non 927 00:40:58,066 --> 00:40:58,780 >> DAVID J. Malan: Nous ne veulent pas quitter encore. 928 00:40:58,780 --> 00:40:59,280 OK, attendre. 929 00:40:59,280 --> 00:41:01,200 Par ici. 930 00:41:01,200 --> 00:41:03,530 Donc remarquerez que vous maintenez votre doigt sur quelque chose, 931 00:41:03,530 --> 00:41:06,750 la souris commence à passer au vert, qui est de savoir comment vous avez cliqué. 932 00:41:06,750 --> 00:41:08,980 >> Donc planer sur Play. 933 00:41:08,980 --> 00:41:10,970 Et d'un seul doigt est très bien. 934 00:41:10,970 --> 00:41:13,869 Et maintenant, cliquez sur le petit bonhomme vert sur la gauche. 935 00:41:13,869 --> 00:41:15,410 Et maintenant tenir jusqu'à ce qu'il remplisse en vert. 936 00:41:15,410 --> 00:41:15,640 Bon. 937 00:41:15,640 --> 00:41:16,990 Maintenant, comme, un niveau en haut. 938 00:41:16,990 --> 00:41:20,190 >> PUBLIC: Oui, nous voulons un niveau, ici. 939 00:41:20,190 --> 00:41:21,660 >> DAVID J. Malan: Bon. 940 00:41:21,660 --> 00:41:25,500 OK, donc tout ce que vous avez à faire est de couper la corde. 941 00:41:25,500 --> 00:41:28,240 Votre curseur est le blanc là-bas. 942 00:41:28,240 --> 00:41:28,880 >> Très agréable. 943 00:41:28,880 --> 00:41:31,290 944 00:41:31,290 --> 00:41:32,790 Très bien, il est sur le point de devenir plus difficile. 945 00:41:32,790 --> 00:41:34,800 Donc, maintenez votre doigt sur la prochaine maintenant. 946 00:41:34,800 --> 00:41:37,370 947 00:41:37,370 --> 00:41:39,030 Bon. 948 00:41:39,030 --> 00:41:39,999 Celui-ci est difficile. 949 00:41:39,999 --> 00:41:40,966 >> PUBLIC: Oh merde. 950 00:41:40,966 --> 00:41:41,466 D'accord. 951 00:41:41,466 --> 00:41:42,466 Il veut aller dans ce sens. 952 00:41:42,466 --> 00:41:44,890 Oh merde, that-- 953 00:41:44,890 --> 00:41:47,120 >> DAVID J. Malan: Ouais. 954 00:41:47,120 --> 00:41:50,700 Objectif secondaire est d'obtenir toutes les étoiles. 955 00:41:50,700 --> 00:41:53,920 Tout droit, à côté. 956 00:41:53,920 --> 00:41:57,504 >> Voyons voir si vous pouvez obtenir cette troisième. 957 00:41:57,504 --> 00:41:58,004 Bon. 958 00:41:58,004 --> 00:42:05,980 959 00:42:05,980 --> 00:42:06,840 OK, aller là-bas. 960 00:42:06,840 --> 00:42:08,850 >> Bien sûr. 961 00:42:08,850 --> 00:42:11,230 Oh, très bien. 962 00:42:11,230 --> 00:42:11,930 Bien. 963 00:42:11,930 --> 00:42:13,534 >> Alors, pourquoi ne nous levions pas ici aujourd'hui? 964 00:42:13,534 --> 00:42:15,200 Laissé à personne sur place qui veut jouer. 965 00:42:15,200 --> 00:42:16,880 Merci beaucoup à Laura notre bénévole. 966 00:42:16,880 --> 00:42:18,730 Et nous allons vous voir lundi. 967 00:42:18,730 --> 00:42:21,190 >> PUBLIC: Vous voulez sans doute ces arrière. 968 00:42:21,190 --> 00:42:23,640 >> SPEAKER 2: Lors de la prochaine CS50-- 969 00:42:23,640 --> 00:42:35,222