1 00:00:00,000 --> 00:00:01,940 >> [Lecture de musique] 2 00:00:01,940 --> 00:00:11,130 3 00:00:11,130 --> 00:00:14,620 >> DAVID Malan: Ceci est CS 50, et ceci est le début de la neuvième semaine. 4 00:00:14,620 --> 00:00:18,240 Et ce que nous avons pensé que nous ferions aujourd'hui ne sont pas seulement clore le chapitre sur la semaine dernière de 5 00:00:18,240 --> 00:00:22,670 matériel où nous nous sommes concentrés sur le serveur programmation web côté avec PHP et SQL, 6 00:00:22,670 --> 00:00:23,549 des trucs de base de données. 7 00:00:23,549 --> 00:00:25,590 Nous en parlerons un peu de sécurité aujourd'hui et puis 8 00:00:25,590 --> 00:00:29,590 passage à une programmation côté client langue connue comme JavaScript. 9 00:00:29,590 --> 00:00:31,330 Mais d'abord, certains rachat. 10 00:00:31,330 --> 00:00:35,030 >> Vous vous souviendrez que sur Mercredi, je suis parti 11 00:00:35,030 --> 00:00:37,550 d'écrire un site Web qui pris dans l'entrée de l'utilisateur 12 00:00:37,550 --> 00:00:41,120 par un formulaire HTML qui ensuite stockées que les noms d'entrée de l'utilisateur, téléphone 13 00:00:41,120 --> 00:00:43,124 numéros, et téléphone portable transporteurs dans la base de données. 14 00:00:43,124 --> 00:00:45,540 Et puis je eu un peu de commande script de ligne écrit en PHP 15 00:00:45,540 --> 00:00:47,956 qui était censé parcourir sur les lignes dans la base de données 16 00:00:47,956 --> 00:00:49,400 et envoyer des messages texte. 17 00:00:49,400 --> 00:00:53,870 Malgré plusieurs, plusieurs tentatives, nous ne pas obtenir ce travail à la fin. 18 00:00:53,870 --> 00:00:57,820 >> Je passais donc toute cette semaine de travail sur ce code pour nous faire passé le point 19 00:00:57,820 --> 00:01:01,220 où nous nous sommes quittés, selon lequel tous les Je suis à la fin du mercredi 20 00:01:01,220 --> 00:01:05,500 était ce message texte de Margo que je luttais, 21 00:01:05,500 --> 00:01:09,940 suivie d'un message de texte d'un autre camarade de classe, vous avez ce David. 22 00:01:09,940 --> 00:01:14,030 Suivi par celui-ci, merveilleusement encourageant. 23 00:01:14,030 --> 00:01:15,840 Continué à aller, très encourageant. 24 00:01:15,840 --> 00:01:20,960 Je suis presque jusqu'à alors-- et qui est la note que nous avons fini le mercredi. 25 00:01:20,960 --> 00:01:25,850 Et puis en fait peut-être mon préféré, un moment plus tard, ce entra. 26 00:01:25,850 --> 00:01:27,000 Merde Retransmissions en direct. 27 00:01:27,000 --> 00:01:31,080 >> Donc, aujourd'hui, nous fixons ce avec une rapide regarder ce que je l'ai fait depuis. 28 00:01:31,080 --> 00:01:35,440 Donc, tout ce code est disponible de la semaine dernière, huit semaines en ligne, 29 00:01:35,440 --> 00:01:36,300 code source. 30 00:01:36,300 --> 00:01:39,425 Et vous verrez que je suis allé à travers, et je réellement nettoyé un peu les choses. 31 00:01:39,425 --> 00:01:42,080 Je présenté un autre couple caractéristiques d'une base de données SQL. 32 00:01:42,080 --> 00:01:45,300 Par exemple, plutôt que juste faire transporteur de charbon var 33 00:01:45,300 --> 00:01:47,310 car je pense que je l'ai fait à la volée la semaine dernière. 34 00:01:47,310 --> 00:01:49,820 Je place le définit comme ce qu'on appelle une énumération. 35 00:01:49,820 --> 00:01:53,310 >> Et certains d'entre vous ont vu ce comme nous avons exploré C. Enum est en fait 36 00:01:53,310 --> 00:01:56,820 une fonction de C où vous pouvez énumérer tout un tas de constantes 37 00:01:56,820 --> 00:01:59,640 et affecter les valeurs automatiques, comme un, deux, trois, quatre 38 00:01:59,640 --> 00:02:01,330 sans avoir les numéros de code des disques. 39 00:02:01,330 --> 00:02:04,780 Donc SQL prend en charge le même, laquelle, si vous avez un champ de base de données que vous ne 40 00:02:04,780 --> 00:02:09,389 vouloir prendre sur l'un des finis valeurs, vous pouvez littéralement spécifier 41 00:02:09,389 --> 00:02:13,120 comme je l'ai fait là-bas pour quatre transporteurs de téléphones portables américains populaires. 42 00:02:13,120 --> 00:02:13,819 >> Donc je l'ai fait. 43 00:02:13,819 --> 00:02:16,610 Et je fait un certain nombre de changements que De plus, la plus importante étant 44 00:02:16,610 --> 00:02:20,090 était d'obtenir e-mail fonctionne parce rappel, que ce programme est appuyé sur lequel 45 00:02:20,090 --> 00:02:23,470 généralement appelé un e-mail à passerelle SMS, qui est juste 46 00:02:23,470 --> 00:02:27,670 une façon élégante de dire que Verizon, et AT & T, et d'autres personnes soutiennent un serveur, 47 00:02:27,670 --> 00:02:30,740 de sorte que si elle reçoit e-mail, il le convertit en SMS 48 00:02:30,740 --> 00:02:33,290 et envoie un texte un message sur le téléphone de quelqu'un. 49 00:02:33,290 --> 00:02:37,010 Donc, si je l'ai fait correctement, ici est une forme nouvelle et améliorée 50 00:02:37,010 --> 00:02:39,259 qui va parler Code nouveau et amélioré, qui 51 00:02:39,259 --> 00:02:40,300 vous pouvez jouer avec en ligne. 52 00:02:40,300 --> 00:02:44,140 Et il faut espérer que mon bip de téléphone dans un instant. 53 00:02:44,140 --> 00:02:47,240 >> Alors d'abord, je vais taper mon nom. 54 00:02:47,240 --> 00:02:51,400 Deuxièmement, je ne vais pas à faire cette fois. 55 00:02:51,400 --> 00:02:53,920 Je vais faire Inspecter l'élément. 56 00:02:53,920 --> 00:02:56,710 Et ceci est juste un petite chose que je ne sais pas 57 00:02:56,710 --> 00:02:59,250 créer des heures de post-production travaille comme je l'ai fait la dernière fois. 58 00:02:59,250 --> 00:03:02,300 Il est maintenant mon numéro de téléphone. 59 00:03:02,300 --> 00:03:03,560 >> Je vais choisir Verizon. 60 00:03:03,560 --> 00:03:10,260 Et ici, nous allons activer ce microphone ici, et viser ce mon téléphone ici. 61 00:03:10,260 --> 00:03:13,130 Je vais cliquez sur Enregistrer, qui devrait, espérons 62 00:03:13,130 --> 00:03:14,530 mettre dans la base de données. 63 00:03:14,530 --> 00:03:16,780 Maintenant, je vais aller à la programme en ligne de commande, qui 64 00:03:16,780 --> 00:03:20,825 rappel a été appelé slash dot texte, et croiser les doigts. 65 00:03:20,825 --> 00:03:24,092 66 00:03:24,092 --> 00:03:26,527 Et ce est parti. 67 00:03:26,527 --> 00:03:27,501 >> [DINGS téléphone] 68 00:03:27,501 --> 00:03:28,962 >> [Applaudissements] 69 00:03:28,962 --> 00:03:31,815 70 00:03:31,815 --> 00:03:34,940 DAVID Malan: Donc, plus amusant que this-- il est amusant, bien sûr, si je suis en elle. 71 00:03:34,940 --> 00:03:38,004 Mais il est plus amusant, je pensais que, si nous créé un de ces moments de cinéma 72 00:03:38,004 --> 00:03:40,420 où comme quelque chose de vraiment Il ya un problème dans le monde, 73 00:03:40,420 --> 00:03:42,860 et comme tous les gens NSA les téléphones portables commencent à émettre des bips 74 00:03:42,860 --> 00:03:44,860 avec des messages texte les avertissant de ce fait. 75 00:03:44,860 --> 00:03:47,026 Donc, je pensais que nous allions essayer de recréer la même chose ici, 76 00:03:47,026 --> 00:03:49,610 où ne pas utiliser une base de données, Je place à l'avance 77 00:03:49,610 --> 00:03:51,490 a écrit un programme qui ressemble à ceci. 78 00:03:51,490 --> 00:03:53,660 >> Ceci est un index.php-- et je mets ce code en ligne 79 00:03:53,660 --> 00:03:56,710 comme well-- qui, apparemment, rend juste form.php, 80 00:03:56,710 --> 00:04:00,990 en utilisant un paradigme de style MVC que nous parler plus en détail dans le jeu de problème 81 00:04:00,990 --> 00:04:01,650 Sept. 82 00:04:01,650 --> 00:04:02,910 Cette forme est assez simple. 83 00:04:02,910 --> 00:04:06,634 Il va se soumettre à un fichier appelé here.php par la poste. 84 00:04:06,634 --> 00:04:09,300 Et il est apparemment vais demander un nom et un numéro de téléphone, 85 00:04:09,300 --> 00:04:11,400 et ensuite par l'intermédiaire de ce qu'on appelle Sélectionnez le menu, il est 86 00:04:11,400 --> 00:04:14,250 vais vous donner au moins quatre transporteurs de téléphones portables américains populaires, 87 00:04:14,250 --> 00:04:17,470 et vous permettent ensuite de manière efficace prendre les présences en cliquant ici. 88 00:04:17,470 --> 00:04:20,471 >> Et ici, quant à lui, va emprunter une partie du code de la dernière fois. 89 00:04:20,471 --> 00:04:22,553 Et si vous vous contentez ce, vous verrez qu'il ya 90 00:04:22,553 --> 00:04:23,900 tout un tas de vérification d'erreur. 91 00:04:23,900 --> 00:04:26,640 Mais la beauté à la fin est que nous ne sommes pas à écrire à une base de données aujourd'hui. 92 00:04:26,640 --> 00:04:29,130 Nous gardons les choses simples et juste envoi espérons 93 00:04:29,130 --> 00:04:32,190 un message texte via la fonction I écrit sur le passé appel quelques jours 94 00:04:32,190 --> 00:04:36,270 Texte, qui est en fonctions. php, qui est encore disponible en ligne. 95 00:04:36,270 --> 00:04:38,210 >> Donc, si vous souhaitez participer à cette. 96 00:04:38,210 --> 00:04:40,190 On ne va pas à stocker quoi que ce soit. 97 00:04:40,190 --> 00:04:43,809 Aller à l'URL ici en temps réel. 98 00:04:43,809 --> 00:04:46,850 Ne pas soumettre tout de suite, mais de laisser voir si nous pouvons avoir un de ces film 99 00:04:46,850 --> 00:04:49,830 moments où le téléphone portable de tout le monde commence à émettre des bips, espérons juste 100 00:04:49,830 --> 00:04:53,580 une fois cette année, contrairement à 2011 où ce a horriblement mal tourné. 101 00:04:53,580 --> 00:04:58,910 Et une fois que vous allez à cette adresse, vous devriez voir une forme super simple 102 00:04:58,910 --> 00:05:03,884 que si vous avez un nom, un téléphone cellulaire nombre, et un support de téléphone portable qui 103 00:05:03,884 --> 00:05:06,175 correspond à la liste là, aller l'avant et remplir le formulaire. 104 00:05:06,175 --> 00:05:07,880 Mais ne frappe pas présenter tout de suite. 105 00:05:07,880 --> 00:05:10,850 >> La forme va ressembler à ceci. 106 00:05:10,850 --> 00:05:13,660 Allez-y et tapez votre nom, votre numéro de téléphone. 107 00:05:13,660 --> 00:05:17,670 Oop, quelqu'un va de l'avant de la courbe. 108 00:05:17,670 --> 00:05:18,170 Ce est OK. 109 00:05:18,170 --> 00:05:19,340 OK, tout le monde est rempli le formulaire. 110 00:05:19,340 --> 00:05:21,400 Cela devrait fonctionner sur un téléphone, aussi, si vous voulez. 111 00:05:21,400 --> 00:05:23,695 Tout droit, à vos marques, prêts, partez. 112 00:05:23,695 --> 00:05:24,195 Hit ici. 113 00:05:24,195 --> 00:05:27,275 114 00:05:27,275 --> 00:05:27,775 Quoi? 115 00:05:27,775 --> 00:05:31,140 116 00:05:31,140 --> 00:05:31,640 Non. 117 00:05:31,640 --> 00:05:34,410 118 00:05:34,410 --> 00:05:40,250 Je jure devant Dieu, je l'ai testé ce à plusieurs reprises aujourd'hui. 119 00:05:40,250 --> 00:05:41,720 Vous l'avez? 120 00:05:41,720 --> 00:05:43,145 >> [Interposition VOIX] 121 00:05:43,145 --> 00:05:46,470 122 00:05:46,470 --> 00:05:49,560 >> DAVID Malan: OK, peut-être une erreur d'utilisateur. 123 00:05:49,560 --> 00:05:50,550 Voilà deux. 124 00:05:50,550 --> 00:05:53,300 Il a travaillé pour deux d'un quelques centaines, trois, quatre. 125 00:05:53,300 --> 00:05:55,940 OK, ce qui est bon. 126 00:05:55,940 --> 00:05:58,520 Quatre sur cinq pour décision correcte que diriez-vous. 127 00:05:58,520 --> 00:05:59,810 >> Alors, que vient de se passer? 128 00:05:59,810 --> 00:06:02,727 On peut donc supposer, sans voir votre écrans, pourquoi pourrait-elle avoir erronée? 129 00:06:02,727 --> 00:06:05,518 Il est probablement que nous étions juste essayer de faire trop de connexions 130 00:06:05,518 --> 00:06:08,110 pour le serveur de messagerie de Harvard tout à une fois de la même adresse IP. 131 00:06:08,110 --> 00:06:10,740 Je devine juste que je ne l'ai pas avoir le luxe de tests 132 00:06:10,740 --> 00:06:13,220 ce code avec certains 300 personnes à l'avance 133 00:06:13,220 --> 00:06:16,040 mais pour l'instant se rendre compte que qui devrait au moins 134 00:06:16,040 --> 00:06:18,250 avoir obtenu le travail fait cette fois. 135 00:06:18,250 --> 00:06:22,880 >> Très bien, alors pourquoi est-ce tout le plus germane à ce qui se passe? 136 00:06:22,880 --> 00:06:24,900 Eh bien d'abord, un rapide quelques annonces. 137 00:06:24,900 --> 00:06:29,350 Donc un, si vous souhaitez vous joindre à Chang, et Nick, et d'autres à déjeuner ce vendredi, 138 00:06:29,350 --> 00:06:32,400 faire RSVP à l'adresse habituelle il. 139 00:06:32,400 --> 00:06:35,650 Si vous envisagez de concentration ou faire un secondaire en CS, 140 00:06:35,650 --> 00:06:38,941 si vous êtes un étudiant en deuxième année, ou étudiant de première année, ou encore junior ou senior à ce point 141 00:06:38,941 --> 00:06:42,490 et peut encore serrer dans les cours, se rendre compte que l'école d'ingénieurs 142 00:06:42,490 --> 00:06:45,620 est la collecte gratuitement et Ben La crème et des conseils de glace de Jerry 143 00:06:45,620 --> 00:06:48,910 ce mercredi peu après la classe à 16h00 dans le bâtiment CS 144 00:06:48,910 --> 00:06:49,771 Maxwell Dworkin. 145 00:06:49,771 --> 00:06:51,520 Si cela est trop rapide sur l'écran, juste aller 146 00:06:51,520 --> 00:06:55,260 à cs50.harvard.edu pour un lien à l'événement Facebook 147 00:06:55,260 --> 00:06:57,140 où vous pouvez voir plus de détails. 148 00:06:57,140 --> 00:07:01,390 >> Pendant ce temps, je pensais corriger une autre chose que je fait une gaffe mercredi. 149 00:07:01,390 --> 00:07:04,400 Avère que l'ID de Mark sur Facebook était pas trois. 150 00:07:04,400 --> 00:07:05,230 Il était quatre. 151 00:07:05,230 --> 00:07:08,330 Avère qu'il avait plus de tests comptes que je me souviens. 152 00:07:08,330 --> 00:07:12,400 Mais ce que cela sentait comme une opportunité à faire est de tirer vers le haut une URL comme ceci. 153 00:07:12,400 --> 00:07:16,680 >> Donc, il se trouve que Facebook a une API, Application Programming Interface, 154 00:07:16,680 --> 00:07:20,070 qui est un mécanisme par lequel vous peut demander des données par programme 155 00:07:20,070 --> 00:07:24,480 à Facebook et obtenir machine arrière les informations lisibles, pas les pages web 156 00:07:24,480 --> 00:07:28,690 mais juste le texte brut, quelque chose appelé JavaScript Object Notation. 157 00:07:28,690 --> 00:07:32,150 Et en fait, si je visite cette URL, et zoomer, par défaut, 158 00:07:32,150 --> 00:07:34,960 cela est-Marc publiquement l'information accessible. 159 00:07:34,960 --> 00:07:37,430 >> Et le détail intéressant ici est juste que sa carte d'identité 160 00:07:37,430 --> 00:07:40,670 est en effet, nombre de quatre, que je réalisé dès que je l'ai fait. 161 00:07:40,670 --> 00:07:44,260 Vous pouvez le faire vous-même si vous le savez votre nom d'utilisateur Facebook si vous en avez un. 162 00:07:44,260 --> 00:07:45,440 Il suffit de taper là-haut il. 163 00:07:45,440 --> 00:07:46,640 Et rien de tout cela est privé. 164 00:07:46,640 --> 00:07:48,670 Je fais juste ce même dans le mode de navigation privée. 165 00:07:48,670 --> 00:07:49,900 Donc, je ne suis même pas connecté. 166 00:07:49,900 --> 00:07:54,440 Et vous voyez que je apparemment était numéro d'utilisateur 6454 167 00:07:54,440 --> 00:07:56,480 sur Facebook, qui est non trop mal ces jours-ci. 168 00:07:56,480 --> 00:07:59,900 Donc, de toute façon, vous verrez aussi plus d'informations là-bas. 169 00:07:59,900 --> 00:08:02,150 >> Et l'aspect utile de qui est ce que vous 170 00:08:02,150 --> 00:08:06,890 pouvez écrire votre propre logiciel intègre en quelque sorte les données de ce genre 171 00:08:06,890 --> 00:08:08,170 dans votre propre application. 172 00:08:08,170 --> 00:08:10,650 Vous pouvez permettre aux utilisateurs de vous connecter à votre site Web, 173 00:08:10,650 --> 00:08:14,190 ne pas utiliser leur propre nom d'utilisateur personnalisé et mot de passe, mais peut-être leur connexion Facebook 174 00:08:14,190 --> 00:08:16,170 et obtenir des informations même de leurs amis, 175 00:08:16,170 --> 00:08:18,740 si ils approuvent tel, ou similaire. 176 00:08:18,740 --> 00:08:21,430 Donc noter que CS50, trop, a certains de ses propres API, 177 00:08:21,430 --> 00:08:24,620 une pour les données de catalogue de cours, certains pour les câlins menus dans la salle 178 00:08:24,620 --> 00:08:26,730 salles, tous de la et les emplacements des bâtiments 179 00:08:26,730 --> 00:08:30,930 sur le campus, nous avons une API pour ainsi que vous pouvez interroger de manière similaire et obtenir 180 00:08:30,930 --> 00:08:35,520 données textuelles dos que vous pouvez intégrer dans un PHP ou JavaScript, ou même, 181 00:08:35,520 --> 00:08:38,320 bien que moins fréquemment, un C repose projet final. 182 00:08:38,320 --> 00:08:41,190 >> En effet à l'avance pour la finale projet sont quelques jalons. 183 00:08:41,190 --> 00:08:42,980 Vous avez un e-mail de l'autre jour. 184 00:08:42,980 --> 00:08:45,761 Sachez que la proposition est due lundi prochain. 185 00:08:45,761 --> 00:08:49,010 Il est pas nécessairement contraignant, mais vous ne devront recevoir vos compagnons d'enseignement 186 00:08:49,010 --> 00:08:51,260 approbation avant de faire toutes les modifications qui suivent. 187 00:08:51,260 --> 00:08:54,280 Et puis sont en avance d'une certain nombre d'autres étapes. 188 00:08:54,280 --> 00:08:56,542 >> Donc, pour vous taquiner, trop, avec quelques possibilités, 189 00:08:56,542 --> 00:08:58,250 nous avons un tas de ces ampoules de couleur. 190 00:08:58,250 --> 00:09:01,190 Et certains d'entre vous ont maintenant une certaine de ceux-ci dans votre chambre d'étudiant ainsi. 191 00:09:01,190 --> 00:09:02,920 Et ils ont aussi une API. 192 00:09:02,920 --> 00:09:07,300 Donc, rappeler ces semaines de bulbes binaires il ya que Dan Bradley et Ansel 193 00:09:07,300 --> 00:09:08,780 Duff a créé pour nous. 194 00:09:08,780 --> 00:09:12,560 Ils ont utilisé une interface logicielle à cette ampoule, qui à l'heure actuelle 195 00:09:12,560 --> 00:09:15,232 est branché sur l'électricité et puis via sans fil 196 00:09:15,232 --> 00:09:17,690 est reliée à une petite chose appelé le Pont ici-bas, 197 00:09:17,690 --> 00:09:21,280 comme un petit propriétaire de routeur à ce dispositif particulier. 198 00:09:21,280 --> 00:09:26,540 >> Mais il se trouve que je sais comment envoyer des messages HTTP, comme nous le faisons maintenant, 199 00:09:26,540 --> 00:09:31,670 Je peux envoyer un message comme celui-ci cette ampoule pour l'allumer ou éteindre 200 00:09:31,670 --> 00:09:34,000 ou faire un certain nombre de d'autres opérations sur elle. 201 00:09:34,000 --> 00:09:36,110 Remarquez que ça ne se, il est pas affiché. 202 00:09:36,110 --> 00:09:37,760 Il ya un autre appelé vente. 203 00:09:37,760 --> 00:09:39,630 Il ya effectivement quelques autres verbes. 204 00:09:39,630 --> 00:09:42,920 Mais remarquez qu'il ya un chemin là-bas, réduire API, réduire nouveau développeur, 205 00:09:42,920 --> 00:09:44,990 réduire la lumière, un slash, slash état. 206 00:09:44,990 --> 00:09:49,060 >> Voilà apparemment juste le chemin que la société, Philips, 207 00:09:49,060 --> 00:09:51,640 vous avez décidé de frapper avec une requête HTTP 208 00:09:51,640 --> 00:09:55,010 si vous voulez changer l'état de l'ampoule utilisant le protocole HTTP 1.1. 209 00:09:55,010 --> 00:09:56,380 Puis notez la ligne blanche. 210 00:09:56,380 --> 00:10:00,170 Et puis enfin ce qui ressemble à genre de tableau d'une certaine sorte, 211 00:10:00,170 --> 00:10:04,730 ce message va être appelée JavaScript Object Notation, ou Jason. 212 00:10:04,730 --> 00:10:08,000 Et ce que vous voyez ici est que il ya trois paires de valeurs clés. 213 00:10:08,000 --> 00:10:09,115 >> Une clé est appelé. 214 00:10:09,115 --> 00:10:10,990 Et sa valeur apparemment va être vrai. 215 00:10:10,990 --> 00:10:13,612 La luminosité est de 128, ce qui est une sorte de int. 216 00:10:13,612 --> 00:10:15,820 Et puis le temps de transition est zéro, ce qui est apparemment 217 00:10:15,820 --> 00:10:17,970 combien de temps ça va prendre pour faire de cette chose sur. 218 00:10:17,970 --> 00:10:19,890 >> Donc maintenant cette ampoule est éteinte. 219 00:10:19,890 --> 00:10:22,880 Mais si je fais exactement this-- laisser moi aller à un peu de feuille de triche 220 00:10:22,880 --> 00:10:25,200 que Dan a mis en place en advance-- et je vais 221 00:10:25,200 --> 00:10:27,920 à aller de l'avant et copier la commande suivante. 222 00:10:27,920 --> 00:10:30,200 Curl, comme certains d'entre vous aurait glané sur CS50 223 00:10:30,200 --> 00:10:35,080 Discutez est un utilitaire comme Telnet comme que vous pouvez simuler les requêtes HTTP, 224 00:10:35,080 --> 00:10:36,360 met spécifiquement. 225 00:10:36,360 --> 00:10:39,710 Je peux envoyer ces données, précisément ce que nous venons de 226 00:10:39,710 --> 00:10:43,430 vu il ya un moment particulier à cette URL ici. 227 00:10:43,430 --> 00:10:46,310 Et puis Curl va gérer tous les en-têtes nécessaires 228 00:10:46,310 --> 00:10:47,600 et y de l'analyse. 229 00:10:47,600 --> 00:10:54,700 >> Donc, tout ce que je dois faire est de copier ce en une fenêtre de terminal et appuyez sur Entrée. 230 00:10:54,700 --> 00:10:56,000 Et l'ampoule qui se passe. 231 00:10:56,000 --> 00:10:59,060 Et tout cela va à travers mon ordinateur sans fil 232 00:10:59,060 --> 00:11:01,960 d'une certaine manière vers le bas sur le pont, qui est alors parler de cette ampoule. 233 00:11:01,960 --> 00:11:02,960 Je peux faire autre chose. 234 00:11:02,960 --> 00:11:07,050 Je peux faire cette chose aller rouge par exemple. 235 00:11:07,050 --> 00:11:11,040 Je peux par exemple faire cette chose passer au vert. 236 00:11:11,040 --> 00:11:12,220 Je peux le faire aller bleu. 237 00:11:12,220 --> 00:11:14,760 >> Et remarquez dans chacun de ces cas, tout ce que je change 238 00:11:14,760 --> 00:11:18,540 est la valeur dite de teinte effectivement lui donner un peu de couleur. 239 00:11:18,540 --> 00:11:20,320 Permettez-moi de coller celui-ci en tant que bien. 240 00:11:20,320 --> 00:11:21,000 Maintenant, il est bleu. 241 00:11:21,000 --> 00:11:24,672 >> Et vous pouvez faire encore plus fantaisistes choses where-- Allons au vert. 242 00:11:24,672 --> 00:11:26,630 Et je pouvais le faire de bien sûr, avec mon propre code. 243 00:11:26,630 --> 00:11:30,670 Mais même l'API elle-même soutient les opérations géniaux 244 00:11:30,670 --> 00:11:35,510 comme ça, qui va maintenant la peine nous pour les 30 prochaines secondes. 245 00:11:35,510 --> 00:11:39,170 >> Voilà donc un avant-goût de ce que vous pourriez faire avec un API, celui-ci impliquant 246 00:11:39,170 --> 00:11:40,010 ampoules. 247 00:11:40,010 --> 00:11:42,510 Notez que CS50 a un couple paires de Google verre Si vous souhaitez 248 00:11:42,510 --> 00:11:45,380 tiens à attaquer à quelque chose le long de ces lignes, Arduino Uno, qui 249 00:11:45,380 --> 00:11:48,670 sont de minuscules ordinateurs, essentiellement, sur une petite carte de circuit 250 00:11:48,670 --> 00:11:50,470 que vous pouvez connecter fils et d'autres choses 251 00:11:50,470 --> 00:11:52,732 et, en fait le contrôle votre environnement du monde réel. 252 00:11:52,732 --> 00:11:54,940 Et puis il ya un couple de nouveaux jouets que nous avons. 253 00:11:54,940 --> 00:11:59,294 Celui-ci vient d'arriver littéralement la autre jour par la poste, un brassard Myo. 254 00:11:59,294 --> 00:12:01,710 Et je pensais qu'il est un moyen de vous excité à propos de projets 255 00:12:01,710 --> 00:12:03,720 que vous pouvez utiliser avec ce matériel serait 256 00:12:03,720 --> 00:12:08,900 être à jouer à ce petit clip qu'ils utilisent pour taquiner les gens 257 00:12:08,900 --> 00:12:10,500 que nous vivons maintenant dans l'avenir. 258 00:12:10,500 --> 00:12:13,494 259 00:12:13,494 --> 00:12:15,490 >> [Lecture de musique] 260 00:12:15,490 --> 00:13:33,410 261 00:13:33,410 --> 00:13:37,109 >> DAVID Malan: Donc, dans quelques semaines, vous trop peut être si cool à la foire de CS50. 262 00:13:37,109 --> 00:13:39,150 Un autre dispositif que nous avoir un tas de qui nous sommes 263 00:13:39,150 --> 00:13:42,090 heureux de prêter pour des projets est appelé un dispositif de commande de mouvement. 264 00:13:42,090 --> 00:13:45,030 Ceci est un petit appareil USB vous vous connectez à un ordinateur 265 00:13:45,030 --> 00:13:47,520 vous permet d'interagir avec votre ordinateur portable, Mac ou PC, 266 00:13:47,520 --> 00:13:51,570 comme si vous aviez comme un Kinect Xbox et en fait faire des mouvements physiques plus 267 00:13:51,570 --> 00:13:54,509 comme nous le voyons dans cette vision de l'avenir. 268 00:13:54,509 --> 00:13:56,505 >> [Lecture de musique] 269 00:13:56,505 --> 00:15:03,380 270 00:15:03,380 --> 00:15:06,260 >> DAVID Malan: Donc, même si vous avez aucune idée de comment quelque chose comme ça 271 00:15:06,260 --> 00:15:10,050 pourrait éventuellement être inventé ou travail sur un niveau de matériel, peu importe. 272 00:15:10,050 --> 00:15:13,520 Même après quelques mois de CS50, et une compréhension de la programmation 273 00:15:13,520 --> 00:15:19,460 plus généralement, la programmation web et plus récemment, et puis aussi des API, et HTTP, 274 00:15:19,460 --> 00:15:21,830 vous aurez accès via API de logiciels si vous 275 00:15:21,830 --> 00:15:24,680 ne veulent emprunter un de ces dispositifs à réellement parler à ce 276 00:15:24,680 --> 00:15:27,180 et ne pas avoir à vous soucier de l'application sous-jacente 277 00:15:27,180 --> 00:15:30,220 détails, ce qui est tout à fait compatible avec cette notion de superposition 278 00:15:30,220 --> 00:15:33,610 une abstraction que nous avons vu tout au long du semestre. 279 00:15:33,610 --> 00:15:37,990 >> Donc, aussi le week-end, vu un couple de pièces nouvelles. 280 00:15:37,990 --> 00:15:40,640 Allez d'abord, aller à des séminaires si vous voudraient apprendre quelque chose 281 00:15:40,640 --> 00:15:42,160 plus sur un certain nombre de sujets. 282 00:15:42,160 --> 00:15:43,340 Voir l'URL il. 283 00:15:43,340 --> 00:15:45,890 Et celui-ci a été envoyé à moi par Chang, qui vous le savez, 284 00:15:45,890 --> 00:15:47,850 qui a l'impression de notre armée d'éléphants. 285 00:15:47,850 --> 00:15:49,910 Et ce fut un titre comme suit. 286 00:15:49,910 --> 00:15:51,280 Je suis terrifié de ma nouvelle TV. 287 00:15:51,280 --> 00:15:54,301 Pourquoi je suis peur de faire de cette chose et vous serait trop. 288 00:15:54,301 --> 00:15:56,050 Nous sommes donc maintenant à la signaler au cours du semestre, 289 00:15:56,050 --> 00:15:58,860 trop, où même si vous avez le moindre de compréhension 290 00:15:58,860 --> 00:16:02,620 de la façon dont fonctionne le web, et HTTP, et de sécurité, des choses comme ça 291 00:16:02,620 --> 00:16:03,980 devrait commencer à attirer votre attention. 292 00:16:03,980 --> 00:16:07,450 Mais aussi, vous l'aurez compris, si ces choses sont ou ne sont pas 293 00:16:07,450 --> 00:16:08,430 menaces réelles. 294 00:16:08,430 --> 00:16:10,940 >> Je prends donc quelques extraits de cet article ici. 295 00:16:10,940 --> 00:16:12,540 Et l'histoire est la suivante. 296 00:16:12,540 --> 00:16:14,300 Je suis maintenant le propriétaire de une nouvelle Smart TV, qui 297 00:16:14,300 --> 00:16:18,470 promet de livrer en streaming contenu multimédia, jeux, application, 298 00:16:18,470 --> 00:16:21,450 les médias sociaux, et internet navigation, oh et TV aussi. 299 00:16:21,450 --> 00:16:24,410 Le seul problème est que je suis maintenant peur de l'utiliser, dit l'auteur. 300 00:16:24,410 --> 00:16:29,592 Vous seriez aussi si vous lisez la 46 page politique de confidentialité de votre téléviseur. 301 00:16:29,592 --> 00:16:31,800 La quantité de données ce recueille chose est stupéfiant. 302 00:16:31,800 --> 00:16:35,710 Il enregistre où, quand, comment, et pour combien de temps vous utilisez le téléviseur. 303 00:16:35,710 --> 00:16:38,190 Il définit les cookies de suivi, comme nous l'avons discuté, 304 00:16:38,190 --> 00:16:40,560 et balises conçues pour détecter lorsque vous avez 305 00:16:40,560 --> 00:16:43,185 contenu particulier vu ou un message particulier 306 00:16:43,185 --> 00:16:45,230 si vous voulez vérifier le courrier sur votre TV. 307 00:16:45,230 --> 00:16:48,430 Il enregistre les applications que vous utiliser, les sites que vous visitez, 308 00:16:48,430 --> 00:16:52,280 et comment vous interagissez avec le contenu, faire tout cela via votre téléviseur intelligent. 309 00:16:52,280 --> 00:16:55,470 Il a également, yet-- creepier qui est mon addition-- 310 00:16:55,470 --> 00:16:58,140 est doté d'un appareil photo à la reconnaissance faciale. 311 00:16:58,140 --> 00:17:01,010 >> Le but est de fournir contrôle de geste pour la télévision 312 00:17:01,010 --> 00:17:05,490 et vous permettra de vous connecter à compte en utilisant votre visage personnalisé. 313 00:17:05,490 --> 00:17:08,940 À l'inverse, les images sont enregistré sur la télévision au lieu de téléchargé 314 00:17:08,940 --> 00:17:09,940 à un serveur d'entreprise. 315 00:17:09,940 --> 00:17:12,520 En revanche, l'Internet connexion rend l'ensemble TV 316 00:17:12,520 --> 00:17:14,811 vulnérables aux pirates qui ont démontré leur capacité 317 00:17:14,811 --> 00:17:16,700 de prendre le contrôle complet de la machine. 318 00:17:16,700 --> 00:17:20,880 >> Plus troublant, comme si cela ne assez intelligent, est le microphone. 319 00:17:20,880 --> 00:17:23,599 Le téléviseur dispose d'une voix fonction reconnaissance 320 00:17:23,599 --> 00:17:26,859 qui permet aux téléspectateurs de contrôler l'écran avec des commandes vocales. 321 00:17:26,859 --> 00:17:30,290 Mais le service est livré avec un avertissement plutôt sinistre. 322 00:17:30,290 --> 00:17:33,030 Se il vous plaît être conscient que si vos paroles sont 323 00:17:33,030 --> 00:17:36,210 personnelle ou autre sensible l'information, cette information 324 00:17:36,210 --> 00:17:40,310 seront parmi les données saisies et transmis à un tiers. 325 00:17:40,310 --> 00:17:40,870 Compris? 326 00:17:40,870 --> 00:17:45,860 Ne dites personnelles ou sensibles choses devant votre téléviseur. 327 00:17:45,860 --> 00:17:47,280 >> Donc, cela est effectivement pour de vrai. 328 00:17:47,280 --> 00:17:50,530 Et il est difficile de ne pas voir si vous aller à Best Buy ou similaire pour les téléviseurs 329 00:17:50,530 --> 00:17:51,030 ces jours-ci. 330 00:17:51,030 --> 00:17:52,540 Ils sont tous intelligents, en quelque sorte. 331 00:17:52,540 --> 00:17:54,740 Et ils obtiennent plus intelligents et plus effrayant. 332 00:17:54,740 --> 00:17:57,490 Et ils sont tout simplement la collecte de données de façon que nous avons parlé 333 00:17:57,490 --> 00:18:01,840 et puis le télécharger via HTTP ou un autre protocole à un serveur. 334 00:18:01,840 --> 00:18:05,720 >> Donc, ce fut d'un article amusant dans ce site en ligne 335 00:18:05,720 --> 00:18:08,940 ici, qui a parlé d'un notamment bug ou un code erronée 336 00:18:08,940 --> 00:18:11,340 que nous pouvons attacher dans la discussion de la semaine dernière. 337 00:18:11,340 --> 00:18:15,730 Donc, ce titre était aussi suit, l'histoire va ici, 338 00:18:15,730 --> 00:18:18,720 Josh Breckman a travaillé pour une entreprise qui a décroché un contrat 339 00:18:18,720 --> 00:18:22,390 à développer une gestion de contenu système, ou CMS comme on les appelle, 340 00:18:22,390 --> 00:18:24,380 pour un assez grand site Web du gouvernement. 341 00:18:24,380 --> 00:18:27,300 Une grande partie du projet consistait à l'élaboration d'un système de gestion de contenu 342 00:18:27,300 --> 00:18:29,840 afin que les employés seraient en mesure de construire et de maintenir 343 00:18:29,840 --> 00:18:31,877 la constante évolution contenu pour leur site. 344 00:18:31,877 --> 00:18:34,210 Les choses se sont plutôt bien pour quelques jours après la mise en. 345 00:18:34,210 --> 00:18:37,020 Mais le sixième jour, les choses allaient moins bien. 346 00:18:37,020 --> 00:18:39,500 Tout le contenu sur le site avait complètement disparu. 347 00:18:39,500 --> 00:18:42,950 Et toutes les pages ont conduit à la valeur par défaut, se il vous plaît entrer contenu de la page Web. 348 00:18:42,950 --> 00:18:43,810 Oups. 349 00:18:43,810 --> 00:18:46,080 Josh a été appelé à enquêter et remarqué 350 00:18:46,080 --> 00:18:49,390 que l'on particulièrement gênant adresse IP externe avait 351 00:18:49,390 --> 00:18:53,380 Gone in et supprimé tous le contenu sur le système. 352 00:18:53,380 --> 00:18:56,290 >> L'adresse IP ne faisait pas partie à un pirate plié à l'étranger 353 00:18:56,290 --> 00:18:58,340 à détruire utile l'information du gouvernement. 354 00:18:58,340 --> 00:19:05,190 Elle a décidé de googlebot.com, Très propre exploration du Web spider de Google. 355 00:19:05,190 --> 00:19:06,010 Oups. 356 00:19:06,010 --> 00:19:09,150 Après un peu de recherche et de brouillage pour trouver une sauvegarde noncorrupt, 357 00:19:09,150 --> 00:19:10,180 Josh a trouvé le problème. 358 00:19:10,180 --> 00:19:12,700 >> Un utilisateur a copié et collé une partie du contenu d'un 359 00:19:12,700 --> 00:19:15,670 page à l'autre, y compris un Modifier le lien hypertexte 360 00:19:15,670 --> 00:19:17,577 pour modifier le contenu de la page. 361 00:19:17,577 --> 00:19:20,160 Normalement, ce ne serait pas une question depuis un utilisateur extérieur serait 362 00:19:20,160 --> 00:19:24,320 besoin d'entrer un nom et un mot de passe, mais le système d'authentification CMS, 363 00:19:24,320 --> 00:19:27,520 le système de connexion, ne pas prendre en compte 364 00:19:27,520 --> 00:19:30,980 piratage sophistiqué techniques de Google araignée. 365 00:19:30,980 --> 00:19:31,700 Oups. 366 00:19:31,700 --> 00:19:33,610 >> Comme il se trouve, Google Araignée ne pas utiliser 367 00:19:33,610 --> 00:19:36,950 les cookies, ce qui signifie qu'il peut contourner facilement un chèque pour le 368 00:19:36,950 --> 00:19:39,840 est connecté de cookie est faux. 369 00:19:39,840 --> 00:19:42,620 Il ne fait pas attention à Java script, que feriez normalement 370 00:19:42,620 --> 00:19:45,170 inciter et rediriger les utilisateurs qui ne sont pas connectés. 371 00:19:45,170 --> 00:19:48,610 Il ne suit cependant tous lien hypertexte sur chaque page qu'il trouve, 372 00:19:48,610 --> 00:19:51,700 y compris ceux avec Supprimer la page dans le titre. 373 00:19:51,700 --> 00:19:52,650 Oups. 374 00:19:52,650 --> 00:19:56,070 >> Alors qu'est-ce que cela signifie en plus termes techniques mais assez accessible? 375 00:19:56,070 --> 00:19:58,340 Cela signifie simplement que tout au long de leur site web, 376 00:19:58,340 --> 00:20:02,287 ils avaient les URL semblable à celui que vous pouvez voir dans le problème réglé sept. 377 00:20:02,287 --> 00:20:04,620 Rappel de problème mis sept ou savoir à problème posé sept 378 00:20:04,620 --> 00:20:06,411 que vous êtes mis au défi, entre autres, 379 00:20:06,411 --> 00:20:08,570 à vendre des actions au nom des utilisateurs. 380 00:20:08,570 --> 00:20:14,010 Mais l'application de cette fonction par de faire via des hyperliens dans votre utilisateur 381 00:20:14,010 --> 00:20:16,880 interface, probablement pas le plus intelligent idée 382 00:20:16,880 --> 00:20:20,300 parce que si votre site est en quelque sorte soit accessible par un être humain 383 00:20:20,300 --> 00:20:23,577 Qui est en cliquant autour ou acheter un bot comme Google ou une araignée 384 00:20:23,577 --> 00:20:26,160 comme on les appelle qui est juste exploration du Web essayant à l'index 385 00:20:26,160 --> 00:20:29,060 le web comme un moteur de recherche, ils pourraient très facilement 386 00:20:29,060 --> 00:20:31,340 frappé par obtenir ce genre d'URL. 387 00:20:31,340 --> 00:20:33,770 Et qui est fonctionnellement équivalent à, dans ce cas, 388 00:20:33,770 --> 00:20:37,000 la vente de toutes les actions de Google. 389 00:20:37,000 --> 00:20:40,030 >> Maintenant, franchement, il est tout à fait stupide que la CMS 390 00:20:40,030 --> 00:20:43,240 utilisé JavaScript et les cookies pour mettre en œuvre son système de connexion 391 00:20:43,240 --> 00:20:47,100 et ne pas le faire côté serveur, comme vous les gars faire et de la volonté dans PSet 7XX 392 00:20:47,100 --> 00:20:49,940 il ya un login.php file-- toujours, toujours, 393 00:20:49,940 --> 00:20:52,789 toujours la sécurité devrait être effectuée sur le côté serveur, 394 00:20:52,789 --> 00:20:56,080 non pas sur le côté client parce que, comme cela article suggère et vous pourriez vous 395 00:20:56,080 --> 00:20:59,600 voir à un moment donné, il est trivial pour un utilisateur, bon ou mauvais, 396 00:20:59,600 --> 00:21:02,860 à juste désactiver JavaScript pour ne pas mentionner les cookies. 397 00:21:02,860 --> 00:21:06,020 Voilà donc votre WTF quotidien. 398 00:21:06,020 --> 00:21:07,970 >> Il ya un plus, qui est juste un peu effrayant, 399 00:21:07,970 --> 00:21:11,360 donc je vais le mentionner si seulement comme une leçon de vie. 400 00:21:11,360 --> 00:21:14,850 Chaque fois que vous utilisez une application appelé comme Snapchat ou similaires 401 00:21:14,850 --> 00:21:19,380 qui dit ces photos ne durent cinq secondes pour dix secondes, ou autres joyeusetés. 402 00:21:19,380 --> 00:21:21,680 Ils sont éphémères qui est absolument pas le cas. 403 00:21:21,680 --> 00:21:25,670 Comme il est impossible, numériquement, de mettre en œuvre une certaine forme de vidéo, 404 00:21:25,670 --> 00:21:30,150 ou une image, ou le partage de ces textuelle qu'un destinataire de l'autre extrémité 405 00:21:30,150 --> 00:21:31,660 ne peut pas sauver ces données. 406 00:21:31,660 --> 00:21:34,300 >> Dans la manière la plus naïve, quelqu'un pourraient prendre leur téléphone. 407 00:21:34,300 --> 00:21:36,850 Et ils ont une deuxième fenêtre 10 tout en regardant quelque pression 408 00:21:36,850 --> 00:21:39,410 juste prendre un autre téléphone et le photographier, évidemment. 409 00:21:39,410 --> 00:21:41,660 Ainsi, vous pouvez préserver quelque chose de cette façon numérique. 410 00:21:41,660 --> 00:21:44,620 Certains d'entre vous savent comment prendre captures d'écran sur votre téléphone. 411 00:21:44,620 --> 00:21:49,290 En fait, si vous ne savez pas cela, réaliser au moins Snapchat, 412 00:21:49,290 --> 00:21:51,040 et je pense que d'autres applications de nos jours, 413 00:21:51,040 --> 00:21:53,720 au moins vous dire si la bénéficiaire a effectivement 414 00:21:53,720 --> 00:21:55,310 pris une capture d'écran de votre image. 415 00:21:55,310 --> 00:22:00,870 >> Mais pire encore, ce fut la snappening, que quelqu'un a inventé récemment, 416 00:22:00,870 --> 00:22:04,680 où certains 100000 snaps avait été libéré 417 00:22:04,680 --> 00:22:09,310 dans ce qu'on appelle un fichier torrent sur divers sites Web en fin de compte. 418 00:22:09,310 --> 00:22:12,000 Et ceux-ci contenaient tout un tas des messages privés et les messages. 419 00:22:12,000 --> 00:22:15,210 Il se trouve plupart d'entre eux bénigne, donc pas ce que vous pourriez attendre. 420 00:22:15,210 --> 00:22:17,580 Mais parce que les gens avaient utilisé un site Web tiers, 421 00:22:17,580 --> 00:22:20,270 connectant avec leur Snapchat nom d'utilisateur et mot de passe, puis 422 00:22:20,270 --> 00:22:23,470 sauver tous leurs clichés sur ce site tiers. 423 00:22:23,470 --> 00:22:26,130 Et ce fut ce tiers site qui a été piraté, 424 00:22:26,130 --> 00:22:30,710 qui voulait juste dire quelqu'un a compris comment pour obtenir tous les 100,000 de ces images 425 00:22:30,710 --> 00:22:33,822 dans leur propre disque dur pour les partager ensuite. 426 00:22:33,822 --> 00:22:36,030 Franchement, là aussi, il est en quelque sorte de stupide que Snapchat 427 00:22:36,030 --> 00:22:39,360 est mis en oeuvre de telle sorte que un tiers peut trier d'interception 428 00:22:39,360 --> 00:22:43,310 les données et qu'il est pas lié à votre propre application en cours d'exécution sur le téléphone. 429 00:22:43,310 --> 00:22:46,947 Mais, là aussi, se rendre compte que ces choses ne devraient pas vous prendre par surprise, 430 00:22:46,947 --> 00:22:49,030 ou du moins il devrait être une leçon de vie ici. 431 00:22:49,030 --> 00:22:52,220 Si vous souhaitez la technique détails, rendez-vous à cette URL, il 432 00:22:52,220 --> 00:22:53,570 qui est dans les diapositives d'aujourd'hui. 433 00:22:53,570 --> 00:23:00,960 Tout droit, des questions sur Les leçons de la vie d'aujourd'hui dans CS? 434 00:23:00,960 --> 00:23:02,710 Éteindre ça. 435 00:23:02,710 --> 00:23:04,970 Rien du tout? 436 00:23:04,970 --> 00:23:06,301 Rien du tout? 437 00:23:06,301 --> 00:23:09,050 Je dois beaucoup de gens qui arrivent leur Snapchat ou quelque chose maintenant. 438 00:23:09,050 --> 00:23:11,690 >> Très bien, alors SQL, Structured Query Language. 439 00:23:11,690 --> 00:23:12,509 Terminons cette. 440 00:23:12,509 --> 00:23:14,300 Et aussi, même si nous ne faisons que gratter 441 00:23:14,300 --> 00:23:16,310 la surface de cette langue, nous allons vous donner 442 00:23:16,310 --> 00:23:18,930 suffisante de la langue sous la forme d'PSet 7 443 00:23:18,930 --> 00:23:22,140 de sorte que vous pouvez aborder certains fonctionnalité assez courante. 444 00:23:22,140 --> 00:23:24,912 Mais rends compte qu'il ya un couple choses que nous ne nécessitent pas de vous, 445 00:23:24,912 --> 00:23:27,120 mais ils vont être importante venir derniers projets 446 00:23:27,120 --> 00:23:30,760 et certainement venir faire réel sites Web avec des utilisateurs réels 447 00:23:30,760 --> 00:23:32,040 est cette décision de conception. 448 00:23:32,040 --> 00:23:34,460 >> Il se trouve que dans une base de données MySQL, vous 449 00:23:34,460 --> 00:23:37,460 avoir des grappes de choix comme les types de données pour les colonnes 450 00:23:37,460 --> 00:23:41,670 et d'autres choses, mais vous avez aussi le choix d'une mémoire dite 451 00:23:41,670 --> 00:23:44,570 moteur pour l'ensemble de vos données, le genre de système de fichiers, 452 00:23:44,570 --> 00:23:46,700 si vous êtes familier, pour l'ensemble de vos données. 453 00:23:46,700 --> 00:23:48,830 Quel format est-il finalement stocké dans? 454 00:23:48,830 --> 00:23:53,300 Et le plus commun, peut-être, a été MyISAM et InnoDB, les termes techniques 455 00:23:53,300 --> 00:23:56,060 que nous soucions seulement dans la mesure où une a 456 00:23:56,060 --> 00:23:58,500 et on n'a pas la fonction suivante. 457 00:23:58,500 --> 00:24:00,390 >> Supposons que vous avez un petit frigo dortoir. 458 00:24:00,390 --> 00:24:03,030 Et supposons que vous et votre colocataire, qui partagent cette réfrigérateur, 459 00:24:03,030 --> 00:24:04,682 sont vraiment friands de lait par exemple. 460 00:24:04,682 --> 00:24:07,140 Et cela est, en fait, la manière dont le histoire m'a été racontée chemin du retour 461 00:24:07,140 --> 00:24:10,890 le jour où je pris un cours appelé CS 161 Systèmes d'exploitation, qui 462 00:24:10,890 --> 00:24:12,580 explore de façon similaire à ce sujet. 463 00:24:12,580 --> 00:24:13,760 Donc, vous avez ce réfrigérateur. 464 00:24:13,760 --> 00:24:14,630 Vous êtes sur le lait. 465 00:24:14,630 --> 00:24:17,000 Et vous rentrez chez vous, votre colocataire toujours à la classe ou que ce soit, 466 00:24:17,000 --> 00:24:19,208 et vous décidez que je vais aller chercher un peu de lait. 467 00:24:19,208 --> 00:24:22,630 Donc, vous fermez le réfrigérateur, le blocage le dortoir, traverser la rue 468 00:24:22,630 --> 00:24:25,330 CVS ou ailleurs, et obtenir en ligne pour acheter du lait. 469 00:24:25,330 --> 00:24:28,960 >> Pendant ce temps, votre colocataire rentre à la maison de classe, pénètre dans la chambre d'étudiant, 470 00:24:28,960 --> 00:24:31,802 ouvre le réfrigérateur, réalise également ooph, nous sommes à court de lait. 471 00:24:31,802 --> 00:24:33,760 Donc, il ou elle ferme la réfrigérateur, puis passe 472 00:24:33,760 --> 00:24:35,610 pour aller à l'autre CVS, qui se trouve être 473 00:24:35,610 --> 00:24:38,470 un pâté de maisons des autres CVS sur la place, et obtient en ligne 474 00:24:38,470 --> 00:24:40,230 là pour obtenir un peu de lait. 475 00:24:40,230 --> 00:24:42,524 Maintenant, bien sûr, quelques minutes plus tard, vous obtenez à la fois en arrière, 476 00:24:42,524 --> 00:24:44,690 et le pire de tous les possibles résultats est arrivé. 477 00:24:44,690 --> 00:24:45,792 Vous avez tous deux du lait. 478 00:24:45,792 --> 00:24:47,500 Et vous ne faites pas vraiment comme le lait tant que ça. 479 00:24:47,500 --> 00:24:49,625 Donc, l'un d'eux est juste aller à se dégrader à un moment donné. 480 00:24:49,625 --> 00:24:55,941 Alors maintenant, vous avez une quantité excessive de lait dans le frigo parce que pourquoi? 481 00:24:55,941 --> 00:24:57,072 >> [Inaudible] 482 00:24:57,072 --> 00:24:59,780 DAVID Malan: Ouais, vous ne l'avez pas en quelque sorte de communiquer les uns avec les autres 483 00:24:59,780 --> 00:25:00,904 que vous receviez lait. 484 00:25:00,904 --> 00:25:04,320 Ainsi, dans le plus simple des façons dans le monde humain, 485 00:25:04,320 --> 00:25:08,390 comment pourriez-vous éviter cette stupide scénario de se produire comme 486 00:25:08,390 --> 00:25:09,750 que vous ne retrouvez avec un. 487 00:25:09,750 --> 00:25:10,840 Texte, oui bon. 488 00:25:10,840 --> 00:25:12,877 Mais comment? 489 00:25:12,877 --> 00:25:13,460 Post-it. 490 00:25:13,460 --> 00:25:14,626 DAVID Malan: Un post-it. 491 00:25:14,626 --> 00:25:17,150 Toute forme de communication qui raconte votre colocataire 492 00:25:17,150 --> 00:25:18,670 ne vont pas dans le réfrigérateur pour le lait. 493 00:25:18,670 --> 00:25:20,440 Je vais aller réapprovisionner sur mon propre. 494 00:25:20,440 --> 00:25:22,770 Donc, vous avez besoin d'une certaine manière pour verrouiller cette ressource. 495 00:25:22,770 --> 00:25:27,180 Donc, nous pouvons faire this-- nous pouvons genre de ruiner l'histoire et se transformer en une histoire CS 496 00:25:27,180 --> 00:25:30,360 lequel penser de ce que, tout comme un variable qui stocke une certaine valeur. 497 00:25:30,360 --> 00:25:32,570 Et maintenant, la valeur du lait est égale à zéro, 498 00:25:32,570 --> 00:25:35,410 que vous ne voulez pas que votre colocataire pour inspecter cette variable 499 00:25:35,410 --> 00:25:38,730 et ensuite prendre une décision lui-même sur la base de l'état de cette variable 500 00:25:38,730 --> 00:25:42,430 si vous êtes dans le processus de changer l'état de ladite variable. 501 00:25:42,430 --> 00:25:46,140 >> Ainsi, l'une des lignes de SQL que nous vous donner à PSet spécification 7 502 00:25:46,140 --> 00:25:47,310 est celui-là. 503 00:25:47,310 --> 00:25:49,740 Et nous ne dépensons pas un énorme quantité de temps à en parler. 504 00:25:49,740 --> 00:25:55,100 Mais il se trouve, si vous essayez à acheter des actions dans le financement du CS50 505 00:25:55,100 --> 00:25:58,000 que vous avez déjà certaines actions de vous 506 00:25:58,000 --> 00:26:01,750 veulent être en mesure de faire un certain nombre des choses instantanément ensemble. 507 00:26:01,750 --> 00:26:04,360 Vous voulez être en mesure de effectivement, à un niveau élevé, 508 00:26:04,360 --> 00:26:06,700 vérifier tout droit, si je veux à acheter plus d'actions de Free, 509 00:26:06,700 --> 00:26:08,780 la penny stock nous parler dans la spécification, 510 00:26:08,780 --> 00:26:10,660 Je veux d'abord vérifier le nombre d'actions que je dois. 511 00:26:10,660 --> 00:26:11,810 Et si elle est de cinq ans. 512 00:26:11,810 --> 00:26:14,600 Et si je veux Achetez-en 10 de plus, je finalement 513 00:26:14,600 --> 00:26:17,069 voulez avoir 15 parts de stock. 514 00:26:17,069 --> 00:26:18,360 Je dois donc poser deux questions. 515 00:26:18,360 --> 00:26:20,230 Quel est l'état de la variable? 516 00:26:20,230 --> 00:26:21,470 Quel est l'état de la ligne? 517 00:26:21,470 --> 00:26:22,970 Combien d'actions dois-je actuellement? 518 00:26:22,970 --> 00:26:24,636 Alors, vous voulez aller de l'avant et mettre à jour. 519 00:26:24,636 --> 00:26:27,720 Voilà donc l'analogue de la lait que vous vérifiez la ligne, 520 00:26:27,720 --> 00:26:30,730 et puis vous voulez le mettre à jour parce que si vous voulez acheter 10 parts, 521 00:26:30,730 --> 00:26:32,521 vous ne voulez pas changer la ligne à 10, vous 522 00:26:32,521 --> 00:26:35,300 vouloir le changer à 5 plus 10 ou, bien sûr, 15. 523 00:26:35,300 --> 00:26:40,030 >> Cette ligne de code assure que ces deux idées conceptuelles 524 00:26:40,030 --> 00:26:42,810 arriver ensemble ou pas du tout. 525 00:26:42,810 --> 00:26:46,920 Personne, y compris un autre utilisateur qui est connecté au même site, 526 00:26:46,920 --> 00:26:49,900 peut en quelque sorte interrompre le contrôle de la ligne 527 00:26:49,900 --> 00:26:52,960 et la mise à jour de la ligne, le sélectionner et la mise à jour si vous voulez. 528 00:26:52,960 --> 00:26:57,360 Et la syntaxe est pas super évident, mais cette seule ligne, longue est qu'il est, 529 00:26:57,360 --> 00:27:01,150 assure que ces deux opérations vérifier la variable ou vérifier la ligne 530 00:27:01,150 --> 00:27:04,660 et mettre à jour la ligne arrive atomique. 531 00:27:04,660 --> 00:27:06,849 >> Oh nous y revoilà. 532 00:27:06,849 --> 00:27:07,890 message texte sur mon téléphone. 533 00:27:07,890 --> 00:27:09,954 Faisons donc ce une peu plus concret. 534 00:27:09,954 --> 00:27:12,120 Supposons que vous n'êtes pas la mise en œuvre d'un réfrigérateur, 535 00:27:12,120 --> 00:27:16,400 et vous n'êtes pas la mise en œuvre PSet 7 mais une banque réelle, 536 00:27:16,400 --> 00:27:20,000 ou un guichet automatique, un guichet automatique Machine, où vous en quelque sorte 537 00:27:20,000 --> 00:27:22,960 veulent être en mesure d'habiliter aux utilisateurs de transférer de l'argent 538 00:27:22,960 --> 00:27:24,500 d'un compte à un autre. 539 00:27:24,500 --> 00:27:25,100 OK, accrocher. 540 00:27:25,100 --> 00:27:26,683 Je vais couper ce moment, je vous remercie. 541 00:27:26,683 --> 00:27:30,450 Donc, nous voulons aller de l'argent d'un numéro de compte 542 00:27:30,450 --> 00:27:33,600 dans un autre compte nombre, en particulier de 100 $. 543 00:27:33,600 --> 00:27:37,690 Donc, ce genre est d'un arbitraire exemple, où vous, l'ATM, 544 00:27:37,690 --> 00:27:41,060 pourraient vouloir exécuter deux SQL requêtes, soustraire d'un compte, 545 00:27:41,060 --> 00:27:42,430 et ajouter à l'autre compte. 546 00:27:42,430 --> 00:27:46,766 Mais vous voulez vous assurer que ceux-ci deux lignes à la fois se produisent ou pas du tout. 547 00:27:46,766 --> 00:27:48,640 Vous ne voulez pas quelque chose se faire interrompre. 548 00:27:48,640 --> 00:27:51,440 Vous ne faites pas une mauvaise gars intelligent en quelque sorte debout à Bank of America 549 00:27:51,440 --> 00:27:53,270 avec deux guichets automatiques à l'avant de lui et en quelque sorte 550 00:27:53,270 --> 00:27:55,270 sorte de taper dans le des commandes à la fois, 551 00:27:55,270 --> 00:28:01,230 espérons essayer de déduire $ 200 au lieu de 100 $ et ayant seulement 100 $ crédité. 552 00:28:01,230 --> 00:28:04,450 En bref, vous voulez que ce se comporter exactement comme vous le souhaitez. 553 00:28:04,450 --> 00:28:06,540 >> Et comme vous le faites ce en base de données SQL est 554 00:28:06,540 --> 00:28:09,350 vous l'envelopper dans ce qui est appelé une transaction. 555 00:28:09,350 --> 00:28:14,290 Littéralement dans SQL, vous pouvez appeler CS50 de fonction de la requête en citant début unquote 556 00:28:14,290 --> 00:28:15,370 transaction. 557 00:28:15,370 --> 00:28:18,640 Ensuite, vous pouvez exécuter un nombre quelconque de requêtes SQL suivantes, 558 00:28:18,640 --> 00:28:20,870 mais aucun d'entre eux prendre effectuer sur la base de données 559 00:28:20,870 --> 00:28:25,880 jusqu'à ce que vous appelez requête entre guillemets engager, si à nouveau en utilisant PHP. 560 00:28:25,880 --> 00:28:29,810 Et de cette façon, vous pouvez vous assurer que tous, même si vous avez 1000 utilisateurs 561 00:28:29,810 --> 00:28:32,080 frapper votre base de données en même temps, SQL 562 00:28:32,080 --> 00:28:34,540 promettent que ces deux requêtes seront 563 00:28:34,540 --> 00:28:36,740 mis en place l'un après l'autre. 564 00:28:36,740 --> 00:28:40,330 Donc, vous ne finissent pas avec excès de lait ou le mauvais montant, en fin de compte, 565 00:28:40,330 --> 00:28:40,830 de l'argent. 566 00:28:40,830 --> 00:28:43,110 >> Donc, gardez cela à l'esprit, non pas tant pour PSet 7 567 00:28:43,110 --> 00:28:45,250 mais pour des projets finaux si vous êtes réellement 568 00:28:45,250 --> 00:28:49,690 essayer de déplacer les données autour de sur les tables que vous pourriez ici. 569 00:28:49,690 --> 00:28:53,980 Mais peut-être encore plus simple et plus évident à comprendre avec un exemple 570 00:28:53,980 --> 00:28:54,860 est celui-là. 571 00:28:54,860 --> 00:28:57,760 Et quelqu'un nous ont envoyé sur ce que l'autre jour 572 00:28:57,760 --> 00:28:59,600 quand il a vu quelque chose de semblable en ligne. 573 00:28:59,600 --> 00:29:03,480 >> Donc, à ma connaissance, le système d'axe est pas vulnérable à cette attaque. 574 00:29:03,480 --> 00:29:06,637 Et je ne sais pas si elle utilise même la base de données SQL sous la hotte. 575 00:29:06,637 --> 00:29:08,470 Mais nous allons utiliser pour l'intérêt de la discussion. 576 00:29:08,470 --> 00:29:10,178 Voici l'écran qui Les gens ont tendance à Harvard 577 00:29:10,178 --> 00:29:13,620 à voir lors de la connexion avec leur Nombre Harvard ID et leur code PIN. 578 00:29:13,620 --> 00:29:19,020 Et supposons que le système d'axe étaient mis en œuvre en PHP et MySQL avec un 579 00:29:19,020 --> 00:29:22,000 base de données, le code qui quelqu'un il ya quelques années aurait pu écrire 580 00:29:22,000 --> 00:29:23,270 pourrait ressembler à ceci. 581 00:29:23,270 --> 00:29:25,230 Tout d'abord, déclarer une variable appelée nom d'utilisateur. 582 00:29:25,230 --> 00:29:27,560 Et obtenir ce à partir de la super POST. 583 00:29:27,560 --> 00:29:30,140 Puis obtenir une autre variable appelé mot de passe et faire la même chose. 584 00:29:30,140 --> 00:29:33,080 Et puis juste exécuter cette longue requête ici, 585 00:29:33,080 --> 00:29:36,690 sélectionnez étoiles FROM utilisateurs WHERE nom d'utilisateur est égal à tel ou tel 586 00:29:36,690 --> 00:29:38,510 et le mot de passe est égale à tel ou tel. 587 00:29:38,510 --> 00:29:40,660 >> Notez que le bouclés accolades je l'ai utilisé ici 588 00:29:40,660 --> 00:29:42,880 juste dire à PHP, aller avant et remplacer 589 00:29:42,880 --> 00:29:45,400 la valeur de ces deux les variables là. 590 00:29:45,400 --> 00:29:50,090 Ils ne sont pas strictement nécessaire, mais ils ont tendance à éviter les erreurs de syntaxe subtiles. 591 00:29:50,090 --> 00:29:53,650 Donc, cela semble complètement correct à première vue. 592 00:29:53,650 --> 00:29:54,240 Et il est. 593 00:29:54,240 --> 00:29:56,680 Vous pourriez mettre en œuvre la Système de broche de cette façon. 594 00:29:56,680 --> 00:30:00,460 >> Mais supposons que super étudiant intelligent et malicieux 595 00:30:00,460 --> 00:30:03,020 entrée ce que sa broche. 596 00:30:03,020 --> 00:30:05,550 Donc je l'ai enlevé la balle signe ici dans la maquette, 597 00:30:05,550 --> 00:30:08,760 et je l'ai fait révélé ce qu'il ou elle pourrait être saisie. 598 00:30:08,760 --> 00:30:10,350 Et il est un peu étrange. 599 00:30:10,350 --> 00:30:13,850 Mais ce qui vous saute au visage à potentiellement inquiétant l'entrée de l'utilisateur, 600 00:30:13,850 --> 00:30:16,450 même si vous avez aucune idée de ce signifie une attaque par injection SQL. 601 00:30:16,450 --> 00:30:20,300 Pourquoi ce regard un peu louche? 602 00:30:20,300 --> 00:30:21,050 Qu'est ce que ce est? 603 00:30:21,050 --> 00:30:21,550 [Inaudible] 604 00:30:21,550 --> 00:30:24,260 DAVID Malan: La ou est un peu méfiant. 605 00:30:24,260 --> 00:30:26,310 En fait, voilà un mot-clé à partir de SQL. 606 00:30:26,310 --> 00:30:28,105 Donc, cela ne présage rien de bon. 607 00:30:28,105 --> 00:30:29,980 Le fait qu'il y ait tous ces apostrophes 608 00:30:29,980 --> 00:30:32,646 there-- en fait, un des plus faciles des moyens de briser certaines bases de données 609 00:30:32,646 --> 00:30:35,880 est en tapant un nom comme O'Reilly qui a une apostrophe dans le 610 00:30:35,880 --> 00:30:38,600 parce que si l'homme qui a écrit le code dans les coulisses 611 00:30:38,600 --> 00:30:41,570 ne tient pas compte du fait qu'il pourrait être guillemets simples dans un utilisateur de 612 00:30:41,570 --> 00:30:45,060 entrée, et il ou elle utilise guillemets simples dans leur code, 613 00:30:45,060 --> 00:30:46,040 mauvaises choses peuvent arriver. 614 00:30:46,040 --> 00:30:47,870 >> En fait, pire encore, considérez ceci. 615 00:30:47,870 --> 00:30:50,600 Si ce fut de nouveau le code que quelqu'un à Harvard ans 616 00:30:50,600 --> 00:30:53,100 il ya écrit pour la broche système, notez ce qui est 617 00:30:53,100 --> 00:30:56,220 Informations pour obtenir remplacé nom d'utilisateur et mot de passe 618 00:30:56,220 --> 00:30:59,780 si l'utilisateur tape à nouveau Skroob que leur nom d'utilisateur 619 00:30:59,780 --> 00:31:03,960 et un, deux, trois, quatre, cinq, citation entre guillemets ou une égaux 620 00:31:03,960 --> 00:31:04,660 citer un. 621 00:31:04,660 --> 00:31:07,220 Et remarquez ce qui est la clé ici est que l'utilisateur n'a pas 622 00:31:07,220 --> 00:31:09,900 commencé leur mot de passe ou leur épingle avec une citation. 623 00:31:09,900 --> 00:31:12,610 Et ils ne sont pas terminées, il avec une citation parce qu'il ou elle 624 00:31:12,610 --> 00:31:16,315 est à supposer que si la programmeur n'a pas été si forte, 625 00:31:16,315 --> 00:31:18,690 ils vont avoir les guillemets simples dans leur code. 626 00:31:18,690 --> 00:31:19,860 >> Alors, voici le code. 627 00:31:19,860 --> 00:31:23,820 Et la substitution que pourrait maintenant se produire est ce. 628 00:31:23,820 --> 00:31:26,350 Et je l'ai souligné ce l'utilisateur a tapé dans. 629 00:31:26,350 --> 00:31:28,480 Donc, avant, après. 630 00:31:28,480 --> 00:31:33,330 Et remarquez ce qui est légèrement inquiétant maintenant sur la moitié droite de ce code SQL? 631 00:31:33,330 --> 00:31:36,300 Il est un peu plus complexe, certes, que les requêtes que nous avons vu. 632 00:31:36,300 --> 00:31:38,550 Mais cela ne peut peut-être être une bonne chose si vous êtes 633 00:31:38,550 --> 00:31:42,240 disant sélectionnez étoiles, qui est sélectionnez tout de la table de l'utilisateur 634 00:31:42,240 --> 00:31:46,630 où nom d'utilisateur est égal Skroob et le mot de passe est égale à un, deux, trois, quatre, 635 00:31:46,630 --> 00:31:49,610 cinq ou un égale un. 636 00:31:49,610 --> 00:31:53,860 Quelle est la conséquence logique de cette dernière clause sans doute? 637 00:31:53,860 --> 00:31:55,650 Il est juste toujours vrai. 638 00:31:55,650 --> 00:31:59,930 >> Et parce que nous avons en quelque sorte deviné ou compris par essai et erreur 639 00:31:59,930 --> 00:32:02,760 que le programmateur qui écrit ce code n'a pas 640 00:32:02,760 --> 00:32:07,250 anticiper une personne humaine ou mauvaise tapant apostrophes ainsi, 641 00:32:07,250 --> 00:32:10,350 nous pouvons syntaxiquement compléter la requête SQL 642 00:32:10,350 --> 00:32:12,260 avec quelque chose absurde mais quelque chose qui 643 00:32:12,260 --> 00:32:15,930 est syntaxiquement incorrecte qui est toujours vraie. 644 00:32:15,930 --> 00:32:19,130 Donc, si ce code est utilisé pour répondre la question vrai ou faux devrait 645 00:32:19,130 --> 00:32:22,930 cet utilisateur est autorisé à passer, la réponse est toujours apparemment va 646 00:32:22,930 --> 00:32:26,930 pour être vrai parce que ce sera toujours de choisir quelque chose de la base de données 647 00:32:26,930 --> 00:32:29,280 parce que l'un des cours est toujours égal à un. 648 00:32:29,280 --> 00:32:30,360 >> Alors, quelle est la solution? 649 00:32:30,360 --> 00:32:33,290 Eh bien dans PSet 7, nous avons effectivement éviter tout cela ensemble. 650 00:32:33,290 --> 00:32:37,360 Nous vous donnons une fonction de recherche, et nous vous encourager à utiliser des points d'interrogation 651 00:32:37,360 --> 00:32:40,430 comme des espaces réservés, similaire dans l'esprit de% s de printf, 652 00:32:40,430 --> 00:32:43,710 mais ce qui est essentiel sur les points d'interrogation ici est si vous avez réellement lu par 653 00:32:43,710 --> 00:32:46,950 functions.php, où notre fonction de requête est mis en œuvre, 654 00:32:46,950 --> 00:32:52,780 ces points d'interrogation sont échappés, laquelle tout ce qui potentiellement dangereux 655 00:32:52,780 --> 00:32:58,210 comme une apostrophe est activé dans une apostrophe échappé. 656 00:32:58,210 --> 00:33:00,590 >> Voilà donc ce que est passe vraiment si vous 657 00:33:00,590 --> 00:33:04,850 utiliser la fonction de requête de CS50 ou un nombre quelconque des bibliothèques libres de tiers qui 658 00:33:04,850 --> 00:33:06,000 faire la même chose. 659 00:33:06,000 --> 00:33:09,850 N'a pas d'importance dans ce cas, en vert, si l'utilisateur a tapé dans une seule offre 660 00:33:09,850 --> 00:33:12,070 parce que la requête fonction que nous avons écrit est 661 00:33:12,070 --> 00:33:15,120 va ajouter des barres obliques inverses avant une telle citation dangereux. 662 00:33:15,120 --> 00:33:17,360 Donc, ce ne sont pas, dans fait, va être légitime. 663 00:33:17,360 --> 00:33:20,910 Ceci est comme taper dans un fou à la recherche mot de passe qui est, bien sûr, ne va pas 664 00:33:20,910 --> 00:33:23,490 être le mot de passe réel de Skroob. 665 00:33:23,490 --> 00:33:28,260 >> Donc, les plats à emporter pour CS50 est un, absolument toujours utiliser quelque chose 666 00:33:28,260 --> 00:33:30,860 comme la fonction de requête de CS50 la bibliothèque ou sous-jacente, 667 00:33:30,860 --> 00:33:32,560 qui se trouve être appelé PDO. 668 00:33:32,560 --> 00:33:35,880 Mais jamais, jamais, ne jamais faire ce type de code 669 00:33:35,880 --> 00:33:39,472 sans échapper ou de lavage comme ils disent vos entrées. 670 00:33:39,472 --> 00:33:42,430 Et vous serez à un moment donné probablement rencontré certains site comme celui-ci. 671 00:33:42,430 --> 00:33:46,060 En fait, il semble être le cas comme dans les aéroports et les hôtels dans des endroits 672 00:33:46,060 --> 00:33:48,880 où ils disposent d'une connexion Wi-Fi accès que vous devez être connecté pour, 673 00:33:48,880 --> 00:33:51,010 ces sites sont toujours horriblement mis en œuvre. 674 00:33:51,010 --> 00:33:55,680 Et donc une sorte de plaisir à la maison exercice, pas à des fins malveillantes ou plus 675 00:33:55,680 --> 00:33:59,170 d'un plaisir sur la route exercice, est de taper juste 676 00:33:59,170 --> 00:34:02,850 une apostrophe, une apostrophe, dans un formulaire sur un certain site Web 677 00:34:02,850 --> 00:34:03,810 et voir ce qui se passe. 678 00:34:03,810 --> 00:34:06,660 Et si le serveur tombe en panne ou donne vous une sorte de message d'erreur, 679 00:34:06,660 --> 00:34:09,690 il peut très bien être que quelqu'un n'a pas prévu cela. 680 00:34:09,690 --> 00:34:15,239 Et puis, vous devez alerter le bon autorités et ne pas continuer. 681 00:34:15,239 --> 00:34:20,843 >> Alors maintenant, vous les gars devrait, espérons comprendre un peu plus d'humour de geek ici. 682 00:34:20,843 --> 00:34:24,120 >> [Rires] 683 00:34:24,120 --> 00:34:27,571 684 00:34:27,571 --> 00:34:29,070 DAVID Malan: Vous savez que vous êtes un geek. 685 00:34:29,070 --> 00:34:30,944 Pour les prochaines années, vous vous souviendrez 686 00:34:30,944 --> 00:34:33,520 qui petites tables Bobby est en raison de ce dessin animé ici. 687 00:34:33,520 --> 00:34:36,760 Donc, gardez cela à l'esprit que nous changement de contexte une dernière fois 688 00:34:36,760 --> 00:34:38,770 aujourd'hui à JavaScript. 689 00:34:38,770 --> 00:34:41,600 Nous avons passé relativement peu temps sur la syntaxe de PHP 690 00:34:41,600 --> 00:34:43,440 car il est en fait Super similaire à C. 691 00:34:43,440 --> 00:34:47,300 Et bien assez, trop JavaScript est super similaire à la syntaxe de C 692 00:34:47,300 --> 00:34:49,639 ainsi que nous le verrons dans juste un moment et que nous allons 693 00:34:49,639 --> 00:34:51,205 voir plus tard cette semaine en particulier. 694 00:34:51,205 --> 00:34:54,080 Ce que vous pouvez faire avec cette langue, cependant, est d'autant plus puissant, 695 00:34:54,080 --> 00:34:55,790 en particulier avec les API. 696 00:34:55,790 --> 00:34:56,960 >> Mais d'abord un tour rapide. 697 00:34:56,960 --> 00:35:00,450 Donc un, en JavaScript, il est pas de fonction principale, qui est agréable. 698 00:35:00,450 --> 00:35:02,650 Comme avec PHP, vous pouvez simplement écrire du code. 699 00:35:02,650 --> 00:35:04,310 Conditions ressemblent à ceci. 700 00:35:04,310 --> 00:35:07,100 Et des expressions booléennes pourrait ressembler à ceci ou comme cela. 701 00:35:07,100 --> 00:35:09,530 Commutateurs existent, et ils pourrait ressembler à ceci. 702 00:35:09,530 --> 00:35:10,970 Quatre boucles ressemblent à ceci. 703 00:35:10,970 --> 00:35:12,390 Alors que les boucles ressemblent à ceci. 704 00:35:12,390 --> 00:35:14,160 Avez whiles ressembler à ceci. 705 00:35:14,160 --> 00:35:16,850 Et puis les tableaux ressemblent ce, très similaire à PHP. 706 00:35:16,850 --> 00:35:20,740 Mais notez que, dans JavaScript vous déclarer une variable pas avec un dollar 707 00:35:20,740 --> 00:35:25,190 signer, pas avec un type de données mais littéralement en disant var pour variable avant. 708 00:35:25,190 --> 00:35:27,900 Il est trop faiblement typé en ce qu'il comporte types, 709 00:35:27,900 --> 00:35:29,729 mais vous ne déclarez pas explicitement. 710 00:35:29,729 --> 00:35:31,520 Et puis une chaîne, pour exemple, pourrait ressembler 711 00:35:31,520 --> 00:35:34,350 comme ça, cette chaîne étant appelée dans ce cas s. 712 00:35:34,350 --> 00:35:35,410 Et puis un objet. 713 00:35:35,410 --> 00:35:37,010 Et ce que nous verrons plus avant longtemps. 714 00:35:37,010 --> 00:35:41,470 Et un objet est peut-être l'un des le plus souvent vu des structures de données 715 00:35:41,470 --> 00:35:44,050 dans une base de JavaScript programme car il permet 716 00:35:44,050 --> 00:35:46,680 d'associer arbitraire paires clé-valeur juste 717 00:35:46,680 --> 00:35:51,240 comme les tableaux associatifs de PHP et tout comme votre propre table de hachage 718 00:35:51,240 --> 00:35:54,042 ou essayer que nous avons mis en il ya quelques semaines. 719 00:35:54,042 --> 00:35:56,250 Donc, nous allons voir ce que fait nous pouvons faire avec JavaScript. 720 00:35:56,250 --> 00:35:59,410 Et en particulier, cela est une liste de blanchisserie de caractéristiques 721 00:35:59,410 --> 00:36:02,300 que les navigateurs ont cette nous permettent de brancher JavaScript 722 00:36:02,300 --> 00:36:05,470 dans un site de la manière suivante. 723 00:36:05,470 --> 00:36:09,340 JavaScript est souvent utilisé comme un côté client langage de script. 724 00:36:09,340 --> 00:36:10,130 Il est pas compilé. 725 00:36:10,130 --> 00:36:11,370 Elle aussi est interprété. 726 00:36:11,370 --> 00:36:15,740 Mais contrairement à PHP, qui a été en cours d'exécution sur le serveur, dans le serveur web, 727 00:36:15,740 --> 00:36:18,220 ou profondément à l'intérieur de la clients, JavaScript 728 00:36:18,220 --> 00:36:22,190 est différent en ce qu'il fonctionne généralement dans le navigateur. 729 00:36:22,190 --> 00:36:26,060 >> Ainsi, tout code JavaScript que vous commencez à écrire pour PSet 8, ou votre projet final, 730 00:36:26,060 --> 00:36:29,890 ou dans le monde réel est généralement aller être enregistré sur le serveur, absolument 731 00:36:29,890 --> 00:36:33,110 dans un point ou un point HTML JS pour fichier JavaScript. 732 00:36:33,110 --> 00:36:35,770 Mais le navigateur va à télécharger que JavaScript 733 00:36:35,770 --> 00:36:39,530 code pour votre propre instance de Chrome, ou IE ou Firefox, ou autre chose. 734 00:36:39,530 --> 00:36:43,870 Et le code qui se passe réellement à obtenir exécutée à l'intérieur de votre propre navigateur. 735 00:36:43,870 --> 00:36:46,560 Juste pour le rendre plus réel, Voyons ce sous une forme concrète. 736 00:36:46,560 --> 00:36:50,120 >> Nous ne savons pas ce que fait ce code sans lire vraiment à travers elle. 737 00:36:50,120 --> 00:36:52,670 Mais laissez-moi aller à Facebook.com sans vous connecter. 738 00:36:52,670 --> 00:37:00,440 Laissez-moi aller inspecter le et aller, disons, Réseau et recharger la page. 739 00:37:00,440 --> 00:37:04,150 Et nous allons see-- permettez-moi décale Recharger la Page pour obtenir toutes les demandes à nouveau. 740 00:37:04,150 --> 00:37:08,850 Et le premier fichier que je vois est CSS, CSS. 741 00:37:08,850 --> 00:37:10,880 Voici la première JavaScript fichier, et je dois 742 00:37:10,880 --> 00:37:14,600 aucune idée de ce que cela fait, mais ici est une partie du code JavaScript 743 00:37:14,600 --> 00:37:16,180 qui entraîne Facebook. 744 00:37:16,180 --> 00:37:18,400 Il est même pas vraiment que révélant pour agrandir. 745 00:37:18,400 --> 00:37:20,260 Il est toujours aussi absurde. 746 00:37:20,260 --> 00:37:24,341 >> Mais vous verrez même en bas, il ya encore plus de ces fichiers JavaScript. 747 00:37:24,341 --> 00:37:24,840 Oups. 748 00:37:24,840 --> 00:37:25,440 Voilà un ping. 749 00:37:25,440 --> 00:37:28,550 Descendons un peu en outre, en outre, en outre. 750 00:37:28,550 --> 00:37:29,894 Il ya un. 751 00:37:29,894 --> 00:37:31,238 Il ya un. 752 00:37:31,238 --> 00:37:31,880 Il ya un. 753 00:37:31,880 --> 00:37:35,820 >> Ainsi, même si Facebook, derrière la scènes, est écrit en partie en PHP 754 00:37:35,820 --> 00:37:39,100 et la version de celui-ci propre Facebook, il ya une énorme quantité de JavaScript. 755 00:37:39,100 --> 00:37:41,330 En fait, aucun des chat que vous faites sur Facebook, 756 00:37:41,330 --> 00:37:45,520 l'une des mises à jour en ligne de la chronologie que cela se produise en temps réel, tout cela 757 00:37:45,520 --> 00:37:47,944 est entraîné par JavaScript. 758 00:37:47,944 --> 00:37:48,444 Ouais? 759 00:37:48,444 --> 00:37:50,235 >> PUBLIC: Je ne suis pas sûr si cela est Facebook, 760 00:37:50,235 --> 00:37:53,624 mais je pensais que Facebook a développé leur propre langue de code interne? 761 00:37:53,624 --> 00:37:54,540 DAVID Malan: Ils l'ont fait. 762 00:37:54,540 --> 00:37:58,110 Voilà pourquoi je dis un écart de PHP appelé Hip Hop qu'ils ont effectivement 763 00:37:58,110 --> 00:38:03,440 fonctionnalités ajoutées à ce que, lorsque Mark première œuvre Facebook, 764 00:38:03,440 --> 00:38:04,710 il a été écrit en PHP. 765 00:38:04,710 --> 00:38:07,370 Et ce genre de est resté le genre de langage frontal 766 00:38:07,370 --> 00:38:09,030 qu'ils utilisent pour beaucoup de leur codage, mais il 767 00:38:09,030 --> 00:38:11,870 n'a pas été une langue qui est échelles particulièrement bien à des milliards 768 00:38:11,870 --> 00:38:12,630 de personnes. 769 00:38:12,630 --> 00:38:15,300 Et ils ont ajouté leur propre améliorations dans les coulisses. 770 00:38:15,300 --> 00:38:17,049 Et ils utilisent un certain nombre d'autres langues 771 00:38:17,049 --> 00:38:19,170 pour diverses pièces de leur infrastructure. 772 00:38:19,170 --> 00:38:24,080 Alors oui, il est un écart de ce que nous savons maintenant que PHP. 773 00:38:24,080 --> 00:38:26,610 >> Donc, nous allons jeter un coup d'oeil à quelques exemples 774 00:38:26,610 --> 00:38:28,890 de la façon dont nous pourrions utiliser JavaScript ici. 775 00:38:28,890 --> 00:38:32,530 Dans le code source d'aujourd'hui, nous avons une tas de fichiers, dont le premier, 776 00:38:32,530 --> 00:38:34,090 nous allons appelé DOM zéro. 777 00:38:34,090 --> 00:38:36,770 Donc DOM zéro se présente comme suit. 778 00:38:36,770 --> 00:38:40,730 Laissez-moi aller dans ce répertoire et ouvrir domzero.html, 779 00:38:40,730 --> 00:38:44,970 dont le sommet a un type de document déclaration, en disant voici HTML 5. 780 00:38:44,970 --> 00:38:46,440 Et maintenant, voici une balise HTML. 781 00:38:46,440 --> 00:38:47,540 Voici l'étiquette de tête. 782 00:38:47,540 --> 00:38:49,210 Et voici ce qui est nouveau aujourd'hui. 783 00:38:49,210 --> 00:38:52,620 >> Nous avons maintenant une balise script à l'intérieur de la tête de la page. 784 00:38:52,620 --> 00:38:55,290 Et cela ne semble très peu, mais un avis 785 00:38:55,290 --> 00:38:58,410 que je l'ai défini une scénario, un JavaScript. 786 00:38:58,410 --> 00:39:01,050 Et en passant, depuis cette est une idée fausse très répandue, 787 00:39:01,050 --> 00:39:05,220 JavaScript a absolument rien à voir avec Java, le langage 788 00:39:05,220 --> 00:39:08,010 que certains d'entre vous ont appris à APCS. 789 00:39:08,010 --> 00:39:10,480 Il était plus d'une commercialisation chose que tout, 790 00:39:10,480 --> 00:39:12,980 équitation le sillage de Java il ya quelques années. 791 00:39:12,980 --> 00:39:17,300 Mais JavaScript, rien à voir avec Java, tout de même, et fâcheusement, 792 00:39:17,300 --> 00:39:18,480 dénomination confuse. 793 00:39:18,480 --> 00:39:21,890 >> Voici donc comment vous déclarez une fonction en JavaScript, fonction dire littéralement, 794 00:39:21,890 --> 00:39:24,556 puis le nom de la fonction, alors tous les arguments qu'il pourrait prendre, 795 00:39:24,556 --> 00:39:25,530 tout comme dans PHP. 796 00:39:25,530 --> 00:39:28,990 Met en JavaScript, l'un des plus fonctions ennuyeux qui existent est alerte. 797 00:39:28,990 --> 00:39:31,392 Ceci est une petite fenêtre qui apparaîtra et vous alerter 798 00:39:31,392 --> 00:39:32,600 à une certaine information. 799 00:39:32,600 --> 00:39:33,766 Il est généralement mal vu. 800 00:39:33,766 --> 00:39:35,980 Mais nous allons l'utiliser comme notre premier exercice ici. 801 00:39:35,980 --> 00:39:37,900 >> Notez quelques fonctionnalités de JavaScript. 802 00:39:37,900 --> 00:39:41,524 Les guillemets simples et doubles guillemets ne fait plus d'importance. 803 00:39:41,524 --> 00:39:43,690 Guillemets simples et doubles citations peuvent être échangés, 804 00:39:43,690 --> 00:39:46,220 alors que dans C, vous devez utiliser guillemets pour les chaînes, 805 00:39:46,220 --> 00:39:48,150 et vous avez deux simples Cours pour les caractères. 806 00:39:48,150 --> 00:39:51,150 Dans le monde JavaScript, beaucoup de gens, la plupart des gens 807 00:39:51,150 --> 00:39:54,970 utilisez des guillemets simples cordes juste parce qu'il est une chose stylistique. 808 00:39:54,970 --> 00:39:58,330 Mais ce qui est l'opérateur plus ici, que nous avons pas vu avant? 809 00:39:58,330 --> 00:39:59,836 >> PUBLIC: concaténation. 810 00:39:59,836 --> 00:40:00,960 DAVID Malan: concaténation. 811 00:40:00,960 --> 00:40:02,450 Alors C n'a même pas cela. 812 00:40:02,450 --> 00:40:04,820 PHP dispose l'opérateur point, qui fait cela. 813 00:40:04,820 --> 00:40:09,710 JavaScript a l'opérateur plus, qui est de prêter à confusion, tout comme Java. 814 00:40:09,710 --> 00:40:11,440 Maintenant, ce qui se passe ici? 815 00:40:11,440 --> 00:40:14,260 >> Alors, voici où une base compréhension de cette image 816 00:40:14,260 --> 00:40:17,010 nous avons jeté un couple vient il ya jours en jeu. 817 00:40:17,010 --> 00:40:19,620 Rappelez-vous quand nous avions simple version d'un HTML page-- 818 00:40:19,620 --> 00:40:20,830 il a juste dit bonjour monde. 819 00:40:20,830 --> 00:40:22,770 Et puis nous avons dessiné un arbre à droite, qui 820 00:40:22,770 --> 00:40:27,320 eu un tas de rectangles et les lignes les reliant comme un arbre généalogique. 821 00:40:27,320 --> 00:40:30,820 Voilà donc le soi-disant DOM ou Modèle Objet de Document. 822 00:40:30,820 --> 00:40:36,759 Et il se trouve que vous pouvez accéder rectangles dans l'arbre avec la syntaxe 823 00:40:36,759 --> 00:40:37,550 comme celle-ci. 824 00:40:37,550 --> 00:40:41,370 Vous dites littéralement document, qui est un variable globale spéciale dans un JavaScript 825 00:40:41,370 --> 00:40:45,890 programme qui a une fonction associé à ce que vous pouvez accéder 826 00:40:45,890 --> 00:40:50,280 similaire à une structure, mais vous simplement dire point, puis le nom de la fonction, 827 00:40:50,280 --> 00:40:52,390 obtenir élément par ID. 828 00:40:52,390 --> 00:40:55,460 >> L'élément que je veux faire est apparemment citer le nom Fin de citation. 829 00:40:55,460 --> 00:40:57,150 Et puis je veux obtenir sa valeur. 830 00:40:57,150 --> 00:40:58,330 Maintenant, nous obtenons en avant de nous-mêmes. 831 00:40:58,330 --> 00:41:00,038 Je ne suis même pas sûr de ce que tout cela est à propos. 832 00:41:00,038 --> 00:41:03,000 Avance rapide de laisser à l'HTML sur la page, ce qui est super simple. 833 00:41:03,000 --> 00:41:05,370 >> Remarquez que je l'ai défini Un formulaire ici-bas. 834 00:41:05,370 --> 00:41:07,940 Remarquez que je lui ai donné un unique, ID, même si nous ne l'avons pas utilisé 835 00:41:07,940 --> 00:41:08,870 cet attribut avant. 836 00:41:08,870 --> 00:41:11,300 Mais cela existe en HTML. 837 00:41:11,300 --> 00:41:15,570 Vous pouvez identifier de façon unique un certain morceau de HTML avec un identifiant comme ça. 838 00:41:15,570 --> 00:41:19,880 >> Remarquez maintenant this-- se révèle HTML soutient, par cette liste de blanchisserie 839 00:41:19,880 --> 00:41:22,490 Il ya un moment, un ensemble groupe de gestionnaires d'événements. 840 00:41:22,490 --> 00:41:25,060 Et ce gestionnaire d'événements est dit sur soumettre. 841 00:41:25,060 --> 00:41:28,730 Sur l'utilisateur soumission de cette forme, composez le code suivant. 842 00:41:28,730 --> 00:41:31,360 Et le code qui va d'être appelé ou exécuté 843 00:41:31,360 --> 00:41:35,260 est exactement cela, la grecque fonction suivie par return false. 844 00:41:35,260 --> 00:41:37,360 Tout le reste doit être assez familier. 845 00:41:37,360 --> 00:41:42,050 >> Voici une entrée de type texte, dont ID, dans ce cas, va être nom. 846 00:41:42,050 --> 00:41:45,430 Nous ne disposons pas d'un attribut de nom réel ce time-- et un bouton de soumission. 847 00:41:45,430 --> 00:41:48,330 Donc, la page qui ressemble à ceci. 848 00:41:48,330 --> 00:41:52,890 Et le comportement qui en résulte, vous verrez, ressemble à ceci. 849 00:41:52,890 --> 00:41:56,940 La page, il hosts local dit bonjour David, à peine une esthétique 850 00:41:56,940 --> 00:41:58,340 façon de saluer un utilisateur. 851 00:41:58,340 --> 00:41:59,950 Mais qu'est-ce qui se passe réellement? 852 00:41:59,950 --> 00:42:01,360 >> Eh bien, imaginez ce que cela est. 853 00:42:01,360 --> 00:42:02,310 Ceci est un champ de texte. 854 00:42:02,310 --> 00:42:04,635 Et selon le HTML ici, je lui ai donné 855 00:42:04,635 --> 00:42:07,350 un identificateur unique appelé citation de nom unquote. 856 00:42:07,350 --> 00:42:09,770 Pendant ce temps, je l'ai dit lorsque l'utilisateur soumet ce formulaire 857 00:42:09,770 --> 00:42:13,820 en appuyant sur Entrée ou cliquez sur le Soumettre bouton, appeler la fonction appelée Greet 858 00:42:13,820 --> 00:42:15,410 et puis retourner False. 859 00:42:15,410 --> 00:42:16,870 Prenons ceux en sens inverse. 860 00:42:16,870 --> 00:42:20,590 Remarquez quand je cliquez sur Soumettre, le URL de cette page ne change pas. 861 00:42:20,590 --> 00:42:22,420 L'icône du navigateur ne pas commencer à tourner. 862 00:42:22,420 --> 00:42:27,050 Je ne suis pas allé partout, et ce est littéralement parce que je l'ai dit return false. 863 00:42:27,050 --> 00:42:31,534 Retour circuits courts arrêts ou Faux le comportement d'un formulaire par défaut. 864 00:42:31,534 --> 00:42:33,700 Alors que nous laisse alors avec cette dernière question. 865 00:42:33,700 --> 00:42:34,764 Qu'est-ce que Greet faire? 866 00:42:34,764 --> 00:42:36,680 Eh bien, apparemment Saluez appelle une fonction appelée 867 00:42:36,680 --> 00:42:39,250 Alert, passe dans une longue discussion qui est 868 00:42:39,250 --> 00:42:43,950 le résultat de la concaténation ensemble une bouquet de chaînes, bonjour virgule espace, 869 00:42:43,950 --> 00:42:45,810 alors tout ce que cela retourne. 870 00:42:45,810 --> 00:42:51,490 Alors document est comme un mondiale variable pour que la racine de l'arbre, 871 00:42:51,490 --> 00:42:55,560 appel d'une fonction spéciale, autrement maintenant connu sous le nom d'une méthode. 872 00:42:55,560 --> 00:42:57,650 Une fonction qui est à l'intérieur d'une variable est 873 00:42:57,650 --> 00:42:59,640 une méthode dite à la place d'une fonction. 874 00:42:59,640 --> 00:43:01,570 >> Donc obtenir élément par ID. 875 00:43:01,570 --> 00:43:03,940 Quel élément vous faire vouloir obtenir par son ID? 876 00:43:03,940 --> 00:43:06,970 Ils ont dit citer le nom et puis d'évaluer le plus précisément. 877 00:43:06,970 --> 00:43:12,000 En d'autres termes, ce code tout simplement trouve le champ de texte dont l'ID est le nom 878 00:43:12,000 --> 00:43:13,380 et obtient ensuite sa valeur. 879 00:43:13,380 --> 00:43:16,460 Donc, si je devais changer ce et dire Davin à la place de David, 880 00:43:16,460 --> 00:43:20,670 et cliquez sur soumettre, maintenant nous une salutation pour Davin. 881 00:43:20,670 --> 00:43:22,890 >> Très bien, alors tout beau et bon. 882 00:43:22,890 --> 00:43:25,480 Mais nous allons voir si nous pouvons faire ce un peu plus propre depuis seulement 883 00:43:25,480 --> 00:43:28,190 écrire du code comme ceci est généralement va être mal vu. 884 00:43:28,190 --> 00:43:30,060 Cela va regarder effrayant. 885 00:43:30,060 --> 00:43:32,330 Mais ce qui est le premier différence que vous remarquerez ici 886 00:43:32,330 --> 00:43:35,970 dans cette version, en plus de la changement de nom à un DOM? 887 00:43:35,970 --> 00:43:41,110 Ce qui ressemble structurellement différent sur ce rapport à l'autre? 888 00:43:41,110 --> 00:43:41,932 Ouais? 889 00:43:41,932 --> 00:43:43,890 AUDIENCE: Le formulaire début du script maintenant? 890 00:43:43,890 --> 00:43:46,570 DAVID Malan: Oui, la forme est au-dessus du script pour une raison curieuse. 891 00:43:46,570 --> 00:43:48,736 Voilà donc la première chose qui me saute aux yeux, aussi. 892 00:43:48,736 --> 00:43:50,990 Et heureusement au moins, cette partie est identique. 893 00:43:50,990 --> 00:43:53,470 Donc, la seule chose qui semble à la différence est la suivante. 894 00:43:53,470 --> 00:43:55,296 >> Voici donc ce qui est génial JavaScript sur 2. 895 00:43:55,296 --> 00:43:57,420 Et il est difficile de comprendre au premier coup d'œil, 896 00:43:57,420 --> 00:44:00,670 notamment pour les projets finals le cas vous êtes à la recherche à l'exemple de code en ligne, 897 00:44:00,670 --> 00:44:04,200 mais cela se résume à quelques caractéristiques syntaxiques de base. 898 00:44:04,200 --> 00:44:06,230 Voici encore une fois que document de variable globale. 899 00:44:06,230 --> 00:44:09,540 Voici de nouveau cette méthode ou fonction qui dit se l'élément par ID. 900 00:44:09,540 --> 00:44:11,570 Cette fois, je veux obtenir l'ID appelé démonstration. 901 00:44:11,570 --> 00:44:12,490 Où est-ce? 902 00:44:12,490 --> 00:44:15,400 Voilà apparemment droit ici, la forme elle-même. 903 00:44:15,400 --> 00:44:20,010 >> Et maintenant remarquer que, apparemment, si je revenir ce nœud de l'arbre qui 904 00:44:20,010 --> 00:44:22,940 représente la forme lui-même, pas un champ de texte, 905 00:44:22,940 --> 00:44:26,970 il se trouve que la forme, que nœud ou un rectangle de l'arbre, 906 00:44:26,970 --> 00:44:30,450 A ce que nous appellerons une propriété, très, très, très similaire 907 00:44:30,450 --> 00:44:35,390 en esprit sur une struct en C. Il est juste un élément de données à l'intérieur de ce rectangle. 908 00:44:35,390 --> 00:44:38,300 >> Donc, je dois la forme ici, et je suis fixation, 909 00:44:38,300 --> 00:44:44,650 ou je l'attribution, à sa sur Soumettre gestionnaire ou plutôt sur Soumettre propriété 910 00:44:44,650 --> 00:44:45,740 la fonction suivante. 911 00:44:45,740 --> 00:44:49,000 Et cela est, de loin, le plus fou chose jusqu'à présent syntaxiquement. 912 00:44:49,000 --> 00:44:53,610 Il se trouve en JavaScript et en PHP, et franchement d'ailleurs en C, 913 00:44:53,610 --> 00:44:58,990 même si nous ne le faisons pas, vous pouvez ajouter anonyme, anonyme, ou Alias ​​lambda 914 00:44:58,990 --> 00:45:03,000 les fonctions qui ne possèdent pas un nom mais peut être appelé quand même. 915 00:45:03,000 --> 00:45:07,050 >> Donc ce que je fais ici est que je suis assigne cette propriété sur Soumettre, qui 916 00:45:07,050 --> 00:45:14,330 est à l'intérieur de ce noeud de mon arbre DOM, un fonction, pointeur de fonction si vous voulez. 917 00:45:14,330 --> 00:45:16,310 Cette fonction n'a pas nom, mais qui n'a pas 918 00:45:16,310 --> 00:45:19,110 d'importance parce que nous verrons dans un instant comment l'appeler. 919 00:45:19,110 --> 00:45:21,780 Lorsque cette fonction est appelée, ce code est exécuté, puis 920 00:45:21,780 --> 00:45:24,210 false est retourné comme avant. 921 00:45:24,210 --> 00:45:25,800 >> Mais remarquez ce que je fais. 922 00:45:25,800 --> 00:45:27,830 À ce stade de la histoire, je dois un formulaire. 923 00:45:27,830 --> 00:45:30,190 Il a un identifiant unique appelé démonstration. 924 00:45:30,190 --> 00:45:33,740 Ici, je dois une balise script qui exécute le code suivant. 925 00:45:33,740 --> 00:45:37,720 Il se fixe à ce nœud dans l'arbre qui lui est sur Soumettre 926 00:45:37,720 --> 00:45:40,260 bien cette fonction ici. 927 00:45:40,260 --> 00:45:44,310 Et juste par nature de la façon dont les navigateurs fonctionnent, quand je clique sur Envoyer maintenant ou appuyez sur Entrée, 928 00:45:44,310 --> 00:45:45,889 cette fonction va se faire appelé. 929 00:45:45,889 --> 00:45:48,680 Il n'a pas besoin de nom, car qui le diable se soucie de ce qu'il a appelé. 930 00:45:48,680 --> 00:45:52,540 Le seul moment où il va jamais à obtenir appelé est lorsque je soumets le formulaire. 931 00:45:52,540 --> 00:45:55,130 Il n'y a pas besoin de moi, le développeur humain, 932 00:45:55,130 --> 00:45:57,330 à appeler effectivement nulle part ailleurs. 933 00:45:57,330 --> 00:46:00,720 >> Maintenant, juste comme un teaser, comme si cela ne sont pas assez hallucinante, 934 00:46:00,720 --> 00:46:03,330 nous pouvons même faire cette regarder en utilisant plus cryptique 935 00:46:03,330 --> 00:46:05,850 une bibliothèque super populaire appelé jQuery. 936 00:46:05,850 --> 00:46:08,760 En fait jQuery et JavaScript sont souvent confondu. 937 00:46:08,760 --> 00:46:12,790 Et ce que nous ferons mercredi est début l'utilisation de ce langage et ces bibliothèques 938 00:46:12,790 --> 00:46:16,030 à construire de plus en plus asynchrone et des applications dynamiques 939 00:46:16,030 --> 00:46:18,950 comme carte se les applications, les applications 940 00:46:18,950 --> 00:46:22,360 Cette mise à jour de la page Web en temps réel temps, un peu comme Facebook ou Gchat 941 00:46:22,360 --> 00:46:27,130 faire, et non plus se borner à hitting Envoyer par GET ou juste après 942 00:46:27,130 --> 00:46:27,630 seul. 943 00:46:27,630 --> 00:46:29,055 Je vais donc vous voir mercredi. 944 00:46:29,055 --> 00:46:31,805 945 00:46:31,805 --> 00:46:35,550 >> [Lecture de musique] 946 00:46:35,550 --> 00:48:09,728