1 00:00:00,000 --> 00:00:02,570 [Powered by Google Translate] [Semaine 9] 2 00:00:02,570 --> 00:00:04,740 [David J. Malan - Université de Harvard] 3 00:00:04,740 --> 00:00:07,170 [C'est CS50. - CS50.TV] 4 00:00:07,170 --> 00:00:12,350 Très bien. Bienvenue à nouveau. C'est CS50, et c'est le début de la semaine 9. 5 00:00:12,350 --> 00:00:16,600 Aujourd'hui, nous mettons l'accent en particulier sur la conception, non plus dans le contexte de la C 6 00:00:16,600 --> 00:00:20,010 mais dans le contexte de PHP et un peu de SQL et un peu de JavaScript, 7 00:00:20,010 --> 00:00:23,730 en particulier vers la fin des deux pset 7 et aussi le projet final. 8 00:00:23,730 --> 00:00:26,310 En fait, si vous êtes à ce point dans votre projet final 9 00:00:26,310 --> 00:00:30,100 où vraisemblablement que d'une heure ou deux il ya au moins vous commencé à réfléchir 10 00:00:30,100 --> 00:00:33,730 à votre projet final et que vous pensez que vous aimeriez collaborer avec les camarades de classe 1 ou 2, 11 00:00:33,730 --> 00:00:36,150 si vous rencontrez des problèmes de connexion avec ladite camarades de classe, 12 00:00:36,150 --> 00:00:40,570 n'hésitez pas à remplir le formulaire à cs50.net/partners/form. 13 00:00:40,570 --> 00:00:42,880 Il vous demande juste qui vous êtes, ce type de projet que vous pensez, 14 00:00:42,880 --> 00:00:44,870 où vous vivez seulement pour des raisons logistiques. 15 00:00:44,870 --> 00:00:49,510 Et puis si vous voulez garder un oeil sur la semaine prochaine ou si l'URL tableur là, 16 00:00:49,510 --> 00:00:53,520 vous pouvez alors voir une version en lecture seule de la doc Google 17 00:00:53,520 --> 00:00:56,010 dans laquelle nous recueillons ces informations. 18 00:00:56,010 --> 00:00:58,930 Donc, si vous voulez travailler avec quelqu'un, par tous les moyens, n'hésitez pas à rejoindre les gens 19 00:00:58,930 --> 00:01:00,480 par ce mécanisme. 20 00:01:00,480 --> 00:01:02,690 Mais la majorité des gens le faire en solo travaux. C'est tout à fait bien. 21 00:01:02,690 --> 00:01:06,120 Il ne faut donc pas l'impression que ce n'est en aucun cas obligatoire. 22 00:01:06,120 --> 00:01:09,680 Le vendredi, il n'y avait que moi et quelques-uns de l'équipe ici, 23 00:01:09,680 --> 00:01:11,100 théâtre vide la plupart du temps. 24 00:01:11,100 --> 00:01:14,600 Il y avait 3 touristes assis là-haut, donc ça a été un peu maladroit. 25 00:01:14,600 --> 00:01:18,970 Que nous avons parlé était bases de données et nous avons parlé de pset 7 un peu. 26 00:01:18,970 --> 00:01:22,200 Et si vous n'avez pas arriver à attraper ce sur la vidéo pour l'instant, c'est très bien. 27 00:01:22,200 --> 00:01:26,770 Je vais essayer de définir les termes que nous aurions autrement prendre pour acquis 28 00:01:26,770 --> 00:01:28,840 basée sur la conférence de vendredi. 29 00:01:28,840 --> 00:01:32,550 >> Mais aujourd'hui, nous allons essayer de vous faire le point 30 00:01:32,550 --> 00:01:34,990 de ne pas juste être capable de faire quelque chose comme 7 pset 31 00:01:34,990 --> 00:01:37,360 mais vraiment comprendre ce qui se passe sous le capot, 32 00:01:37,360 --> 00:01:41,910 en particulier certains des abstractions que nous avons mis en place dans le fichier functions.php 33 00:01:41,910 --> 00:01:45,780 pour vous rendre la vie un peu plus facile, mais en fin de compte de sorte que vous comprenez 34 00:01:45,780 --> 00:01:48,760 de sorte que lorsque les roues de formation se détacher en quelques semaines, vous pouvez toujours survivre 35 00:01:48,760 --> 00:01:53,750 dans le monde réel et de faire ce genre de choses sans aucun cadre CS50-dessous vous. 36 00:01:53,750 --> 00:01:57,500 Ce $ _SESSION, pour ceux d'entre vous qui sont familiers 37 00:01:57,500 --> 00:02:01,960 ou qui ont déjà pris la vidéo, le vendredi, ce qui ne SESSION faisons 38 00:02:01,960 --> 00:02:04,330 dans une application web basée sur PHP? 39 00:02:04,330 --> 00:02:09,650 Il s'agit d'une variable superglobale, ce qui signifie que c'est le même esprit que GET et POST 40 00:02:09,650 --> 00:02:13,970 et quelques autres, mais quelle est cette chose-elle utile? 41 00:02:13,970 --> 00:02:18,320 >> Qu'est-ce que SESSION utilisé? Ouais. [L'élève] Logging in 42 00:02:18,320 --> 00:02:21,040 Désolé? [L'élève] Logging in Logging in effet. 43 00:02:21,040 --> 00:02:25,100 En pset 7, nous vous utilisez cette superglobale SESSION afin de faciliter l'exploitation forestière po 44 00:02:25,100 --> 00:02:28,600 Et ce qui est bien avec cette superglobale, c'est que c'est un tableau associatif. 45 00:02:28,600 --> 00:02:33,190 Un tableau associatif, rappel, c'est juste un tableau, mais dont les indices ne doivent plus être des nombres 46 00:02:33,190 --> 00:02:37,670 comme 012. Ils peuvent être des nombres ou ils peuvent être même des chaînes. 47 00:02:37,670 --> 00:02:44,890 Et donc, si vous avez plongé dans pset 7 pour le moment, vous vous souviendrez que nous gardons un ID de clé appelé 48 00:02:44,890 --> 00:02:50,330 l'intérieur de ce tableau associatif dont la valeur est quelque chose comme 123 - 49 00:02:50,330 --> 00:02:53,780 quel que soit l'utilisateur actuellement connecté à l'ID utilisateur est. 50 00:02:53,780 --> 00:02:59,470 La motivation pour cela est que même après que l'utilisateur a visité localhost 51 00:02:59,470 --> 00:03:02,720 ou plus généralement sur mon site, puis ils ont ouvert une session, 52 00:03:02,720 --> 00:03:07,320 même si elles ne cliquez pas sur un lien ou retourner sur mon site pendant 5 minutes 53 00:03:07,320 --> 00:03:10,730 ou même une heure, voire une journée, mais ils quittent leur fenêtre de navigateur ouverte, 54 00:03:10,730 --> 00:03:14,370 via ce superglobale puis-je rappeler qu'ils sont connecté 55 00:03:14,370 --> 00:03:21,140 >> En d'autres termes, cela me permet de stocker quoi que ce soit légèrement plus long terme, je veux sur un utilisateur. 56 00:03:21,140 --> 00:03:24,390 Et vous pouvez penser que c'est vraiment comme l'incarnation d'un panier d'achat. 57 00:03:24,390 --> 00:03:27,740 Des endroits comme Amazon évidemment vous permettent de mettre les choses dans un panier, 58 00:03:27,740 --> 00:03:32,230 mais HTTP, le protocole qui alimente le Web, est apatride 59 00:03:32,230 --> 00:03:34,230 dans le sens où lorsque vous visitez un site Web, 60 00:03:34,230 --> 00:03:37,290 pour la plupart, vous n'avez pas une connexion réseau permanente 61 00:03:37,290 --> 00:03:39,270 entre votre navigateur et le serveur. 62 00:03:39,270 --> 00:03:42,190 Dès que vous avez téléchargé le code HTML et les images JPEG et les fichiers GIF et tout ça, 63 00:03:42,190 --> 00:03:48,200 la connexion disparaît et vous avez juste une copie du code HTML et autres joyeusetés du serveur. 64 00:03:48,200 --> 00:03:53,000 Mais si le serveur veut se rappeler quelque chose sur vous, 65 00:03:53,000 --> 00:03:57,580 le fardeau est sur le serveur d'enregistrer réellement cette information. 66 00:03:57,580 --> 00:04:00,130 Et si vous le programmeur qui ont le contrôle sur le serveur 67 00:04:00,130 --> 00:04:04,400 pouvez mettre ce que vous voulez le plus à l'intérieur de ce réseau associatif superglobale 68 00:04:04,400 --> 00:04:06,850 et ce sera là la prochaine fois que l'utilisateur revient, 69 00:04:06,850 --> 00:04:12,070 qu'il s'agisse de minutes ou même quelques jours plus tard, à moins qu'ils ne fermer la fenêtre du navigateur, 70 00:04:12,070 --> 00:04:14,360 au cours de laquelle SESSION point disparaît. 71 00:04:14,360 --> 00:04:17,779 Donc, c'est de stockage éphémère, il est non persistant, et il est destiné à disparaître 72 00:04:17,779 --> 00:04:22,360 dès que l'utilisateur ferme son navigateur - et pas seulement cet onglet, souvent le navigateur entier, 73 00:04:22,360 --> 00:04:24,930 ainsi efficacement connexion de l'utilisateur sur. 74 00:04:24,930 --> 00:04:28,000 Alors, comment est cette chose effectivement mises en œuvre? 75 00:04:28,000 --> 00:04:31,360 Jetons un coup d'oeil à un exemple simple, nous avons examiné le vendredi. 76 00:04:31,360 --> 00:04:33,340 Pour ceux qui ne connaissent, c'est aussi simple que cela. 77 00:04:33,340 --> 00:04:35,910 Il s'agit d'une page Web dont le seul but dans la vie est de me dire 78 00:04:35,910 --> 00:04:38,000 combien de fois j'ai visité cette page. 79 00:04:38,000 --> 00:04:41,670 C'est la première fois lundi que je l'ai visité, il dit 0 fois. 80 00:04:41,670 --> 00:04:46,940 >> Mais si je commence à recharger cette page, il est dit 1 fois, 2, 3, 4, 5, 81 00:04:46,940 --> 00:04:49,800 et cela finira juste continuer à compter haut, haut, haut, haut, haut 82 00:04:49,800 --> 00:04:53,130 à chaque fois que j'ai vraiment cliquez sur Recharger dessus. 83 00:04:53,130 --> 00:04:58,830 Alors, comment est ce travail? Permettez-moi aller à l'intérieur de ce fichier appelé counter.php. 84 00:04:58,830 --> 00:05:02,490 La partie supérieure de celui-ci est bleu tous les commentaires, mais la partie intéressante est ici. 85 00:05:02,490 --> 00:05:06,670 À la ligne 13, nous appelons cette fonction session_start, 86 00:05:06,670 --> 00:05:09,600 et c'est littéralement tout ce que vous devez faire si vous voulez avoir accès 87 00:05:09,600 --> 00:05:13,610 à ce superglobale spéciale appelée $ _SESSION. 88 00:05:13,610 --> 00:05:17,430 Cela rend tout cela possible, et nous verrons dans un instant comment c'est possible. 89 00:05:17,430 --> 00:05:20,350 A la ligne 16 préavis ce que je fais. 90 00:05:20,350 --> 00:05:25,960 Si la clé, appelée contre - en d'autres termes, la valeur d'index - "compteur" 91 00:05:25,960 --> 00:05:32,310 existe à l'intérieur de ce tableau appelé SESSION, alors qu'est-ce que je fais avec elle dans la ligne ci-dessous? 92 00:05:32,310 --> 00:05:36,650 Quelle est la ligne 18 fait? 93 00:05:36,650 --> 00:05:40,360 >> [Réponse de l'élève inaudible] Qu'est-ce que c'est? [L'élève] Stocker la valeur. Bon. 94 00:05:40,360 --> 00:05:45,800 Il est stocker la valeur qui est en ce moment SESSION dans une nouvelle variable locale temporaire, 95 00:05:45,800 --> 00:05:48,250 $ Compteur en minuscules. 96 00:05:48,250 --> 00:05:50,770 Notez que PHP est déjà en cours un peu paresseux ici. 97 00:05:50,770 --> 00:05:55,550 Notez que nous n'avons pas fait mention de int ou float ou une chaîne ou quelque chose comme ça 98 00:05:55,550 --> 00:06:00,480 parce que PHP est faiblement typé, où vous n'avez pas besoin de spécifier le type d'une variable, 99 00:06:00,480 --> 00:06:03,310 et dans ce cas là, je n'ai même pas encore déclarée. 100 00:06:03,310 --> 00:06:08,980 Je le déclare à l'intérieur de ces accolades et contrairement au C, c'est en fait bien. 101 00:06:08,980 --> 00:06:13,800 Peu importe combien profondément imbriqué déclaration d'une variable en PHP - 102 00:06:13,800 --> 00:06:16,650 à l'intérieur de l'accolade, à l'intérieur de l'accolade et autres - 103 00:06:16,650 --> 00:06:21,230 il sera à ce moment-là existent pour le reste du programme, 104 00:06:21,230 --> 00:06:22,680 pour le meilleur ou pour le pire. 105 00:06:22,680 --> 00:06:26,930 Ainsi, il devient immédiatement mondiale dès que vous le définissez comme nous le faisons ici. 106 00:06:26,930 --> 00:06:31,620 >> Sinon, si je ne trouve pas qu'il y ait quoi que ce soit dans la super SESSION, 107 00:06:31,620 --> 00:06:34,680 Je suis apparemment l'initialisation de ce compteur variable à 0, 108 00:06:34,680 --> 00:06:37,580 ainsi que supposer l'utilisateur n'a jamais été ici avant. 109 00:06:37,580 --> 00:06:40,030 Et puis cela bien sûr est incrémenter le compteur de quelle manière? 110 00:06:40,030 --> 00:06:44,480 Je met à jour la valeur qui est à l'intérieur de ce tableau associatif 111 00:06:44,480 --> 00:06:49,530 en le définissant égale à tout ce compteur est actuellement + 1. 112 00:06:49,530 --> 00:06:53,520 Si je défiler ici pour le code HTML de la page, c'est en fait assez simple. 113 00:06:53,520 --> 00:06:58,920 Tout ce que j'ai dans le corps de cette page est: «Vous avez visité ce site pour tant de fois et un tel." 114 00:06:58,920 --> 00:07:00,350 Et cela est une construction PHP. 115 00:07:00,350 --> 00:07:06,080 Si vous le faites 00:07:12,600 C'est vraiment équivalent à quelque chose comme printf, que nous avons vu de nombreuses fois dans C, 117 00:07:12,600 --> 00:07:15,940 même si, comme vous le savez peut déjà du spec dans pset 7, 118 00:07:15,940 --> 00:07:20,160 d'impression est également une fonction qui affiche simplement quelque chose, il ne fait pas usage de codes de format, 119 00:07:20,160 --> 00:07:23,270 et vous pouvez réellement dire ainsi écho. 120 00:07:23,270 --> 00:07:27,460 Ils sont tous très légèrement différente, même si l'effet net est finalement le même. 121 00:07:27,460 --> 00:07:31,270 Ainsi, cette utilisation du signe égal est juste une sorte de une façon élégante de le faire 122 00:07:31,270 --> 00:07:34,910 plus succincte que vous pourriez autrement être en mesure d'. 123 00:07:34,910 --> 00:07:38,370 C'est tout ce que ce site fait. Il imprime la valeur du compteur. 124 00:07:38,370 --> 00:07:40,550 Comment tout cela se passe réellement? 125 00:07:40,550 --> 00:07:43,250 Vous pouvez rappeler une semaine ou deux nous avons commencé il ya sous le capot 126 00:07:43,250 --> 00:07:47,910 comment fonctionne une page Web à l'aide de cet onglet Inspecteur. 127 00:07:47,910 --> 00:07:51,900 >> Chrome a cette fois dans la version Mac, la version Windows, et même la version Linux, 128 00:07:51,900 --> 00:07:59,510 et Firefox et IE disposent de mécanismes similaires par lequel vous avez cette débogueur intégré 129 00:07:59,510 --> 00:08:01,400 à l'intérieur du navigateur. 130 00:08:01,400 --> 00:08:03,040 Jetons un coup d'oeil à ce qui suit. 131 00:08:03,040 --> 00:08:06,960 Nous avons tout un tas d'onglets ici, et nous rappelons que le plus à gauche est Elements, 132 00:08:06,960 --> 00:08:10,700 et peu importe comment godawful le code HTML et Javascript dans une page, 133 00:08:10,700 --> 00:08:15,710 Rappelons qu'avec l'onglet Éléments que vous pouvez réellement parcourir le code HTML hiérarchiquement 134 00:08:15,710 --> 00:08:17,050 et agréable et ordonnée. 135 00:08:17,050 --> 00:08:19,370 Donc, si vous essayez d'apprendre à partir d'un site web comme Google ou Facebook 136 00:08:19,370 --> 00:08:22,370 ou bien n'importe quel site Web, sachez que vous êtes probablement mieux 137 00:08:22,370 --> 00:08:26,360 en regardant le code source de cette façon plutôt que de voir le code source brut, 138 00:08:26,360 --> 00:08:29,580 qui peut être un gâchis, comme nous l'avons vu en particulier sur le site de Google. 139 00:08:29,580 --> 00:08:32,220 Donc, si je la place cliquez sur l'onglet Réseau ici, 140 00:08:32,220 --> 00:08:34,830 nous allons voir ce qui se passe quand je visite cette page. 141 00:08:34,830 --> 00:08:38,669 D'abord laissez moi me vider la mémoire cache. 142 00:08:38,669 --> 00:08:43,570 Je vais aller dans Réglages dans Chrome, puis allez dans l'historique 143 00:08:43,570 --> 00:08:46,420 puis Effacer les données de navigation. 144 00:08:46,420 --> 00:08:48,170 Vous pourriez être utilisés pour ce faire à d'autres fins, [rires] 145 00:08:48,170 --> 00:08:51,990 mais quand il s'agit de développement de sites Web, c'est réellement utile - 146 00:08:51,990 --> 00:08:55,980 si vous riez, vous savez. [Rires] 147 00:08:55,980 --> 00:08:59,310 C'est effectivement très utile lors de l'élaboration sites Web, car la réalité est 148 00:08:59,310 --> 00:09:04,100 des choses comme les cookies et cache des choses comme les fichiers HTML, fichiers JavaScript en cache 149 00:09:04,100 --> 00:09:06,390 peut effectivement devenir un vrai casse-tête, car si pour une raison quelconque 150 00:09:06,390 --> 00:09:11,500 le navigateur décide de mettre en cache un fichier et pourtant vous avez apporté des modifications à ce fichier sur le serveur 151 00:09:11,500 --> 00:09:14,670 mais le navigateur n'a pas vraiment rendu compte que le fichier a été modifié 152 00:09:14,670 --> 00:09:19,060 et n'a donc pas fait le re-télécharger même lorsque vous cliquez sur le bouton Reload, 153 00:09:19,060 --> 00:09:23,210 l'un des moyens les plus infaillibles pour s'assurer que la faute n'est pas de votre code, 154 00:09:23,210 --> 00:09:26,480 c'est avec le comportement du navigateur, c'est d'aller ici dans votre navigateur 155 00:09:26,480 --> 00:09:29,950 et juste effacer toute l'histoire de sorte qu'il n'y ait pas de confusion. 156 00:09:29,950 --> 00:09:33,210 >> Et puis, si vous voulez vraiment être paranoïaque, quittez le navigateur, redémarrez-le, 157 00:09:33,210 --> 00:09:35,660 puis assurez-vous que tout fonctionne comme prévu. 158 00:09:35,660 --> 00:09:38,820 Donc en bref, cache compensation est bonne quand faire du développement. 159 00:09:38,820 --> 00:09:40,690 Nous avons donc ici l'onglet Réseau. 160 00:09:40,690 --> 00:09:46,020 J'ai déjà avoir visité le site 9 fois, mais laissez-moi aller de l'avant maintenant et cliquez sur Recharger. 161 00:09:46,020 --> 00:09:47,500 Et je suis de retour à 0. 162 00:09:47,500 --> 00:09:52,100 Nous allons réellement voir comment il est que cette superglobale SESSION est mis en œuvre. 163 00:09:52,100 --> 00:09:55,990 Je vais cliquer sur la requête 1 HTTP qui a été faite, 164 00:09:55,990 --> 00:09:58,810 et cette fenêtre de débogage me permet de regarder à l'intérieur de cela. 165 00:09:58,810 --> 00:10:01,970 Ici, je vois juste la réponse du serveur, ce qui n'est pas intéressant. 166 00:10:01,970 --> 00:10:04,030 J'ai vu cela dans un certain nombre de façons. 167 00:10:04,030 --> 00:10:06,350 Mais ce qui est techniquement intéressant sont les en-têtes. 168 00:10:06,350 --> 00:10:11,770 Si je défiler vers le bas ici et se concentrer sur les têtes de requête, puis cliquez sur Afficher la source, 169 00:10:11,770 --> 00:10:14,400 ce que je vais voir est littéralement la requête HTTP 170 00:10:14,400 --> 00:10:17,250 qui vient de passer de mon navigateur au serveur, 171 00:10:17,250 --> 00:10:21,400 GET étant le mot et puis / counter.php étant le nom du fichier, 172 00:10:21,400 --> 00:10:25,670 HTTP/1.1 être juste la version de HTTP que mon navigateur utilise. 173 00:10:25,670 --> 00:10:31,070 Cette ligne est ici un petit rappel du navigateur au serveur quel est le nom du serveur est 174 00:10:31,070 --> 00:10:33,020 qu'il veut parler. 175 00:10:33,020 --> 00:10:38,200 Et puis le reste de ce qui est parfois intéressant mais n'est pas pertinent en ce moment. 176 00:10:38,200 --> 00:10:40,090 >> C'est juste une sorte de curiosité. 177 00:10:40,090 --> 00:10:43,530 Cryptic si cette chaîne est, à tout moment de votre navigateur visite d'un site Web 178 00:10:43,530 --> 00:10:47,110 il est d'informer le serveur quel navigateur vous utilisez 179 00:10:47,110 --> 00:10:50,040 et ce système d'exploitation que vous utilisez ainsi que la version de celle-ci. 180 00:10:50,040 --> 00:10:52,650 Donc, si vous êtes déjà demandé comment des sites comme CNN et autres joyeusetés 181 00:10:52,650 --> 00:10:56,860 savoir quels sont les pourcentages d'utilisateurs de Mac sur les PC des utilisateurs Web,, 182 00:10:56,860 --> 00:11:00,820 Utilisateurs d'Internet Explorer, les utilisateurs de Chrome et autres, c'est parce que tous nos navigateurs 183 00:11:00,820 --> 00:11:04,300 disent chaque site unique là-bas ce que nous sommes. 184 00:11:04,300 --> 00:11:07,410 Il ne doit pas nécessairement contenir des informations personnellement identifiables, 185 00:11:07,410 --> 00:11:13,060 mais elle indiquer au serveur que votre adresse IP est et ce navigateur et système d'exploitation que vous utilisez. 186 00:11:13,060 --> 00:11:14,720 C'est donc là que cette information est. 187 00:11:14,720 --> 00:11:19,960 Mais ce qui est plus intéressant maintenant, quand il s'agit de ces sessions est l'en-tête de réponse. 188 00:11:19,960 --> 00:11:22,530 Permettez-moi de cliquer sur afficher la source à côté de la réponse. 189 00:11:22,530 --> 00:11:24,590 Ce qui est intéressant ici, c'est quelques choses. 190 00:11:24,590 --> 00:11:27,580 1, nous sommes rentrés un code d'état 200. 191 00:11:27,580 --> 00:11:29,840 Nous ne voyons jamais ce code d'état parce que cela signifie que tout va bien. 192 00:11:29,840 --> 00:11:32,920 Il signifie littéralement correct contrairement à quelque chose d'autre. 193 00:11:32,920 --> 00:11:36,380 Qu'est-ce qu'un numéro nous voyons parfois que c'est mauvais? [L'élève] 404. 194 00:11:36,380 --> 00:11:39,860 404, fichier non trouvé, 403 vous pourriez être tomber sur déjà, 195 00:11:39,860 --> 00:11:43,660 ce qui est interdit, ce qui signifie que vous avez oublié quelque chose chmod, le plus probable. 196 00:11:43,660 --> 00:11:45,190 Et il ya un tas d'autres. 197 00:11:45,190 --> 00:11:47,760 >> Ici-bas, c'est un peu fou. 198 00:11:47,760 --> 00:11:52,340 J'ai vraiment écrit ce fichier il ya quelques minutes en le collant dans gedit. 199 00:11:52,340 --> 00:11:57,100 Pourquoi cette page expireront en 1981, avant il y avait vraiment un site Web? 200 00:11:58,010 --> 00:12:00,730 Que se passe-t-il? 201 00:12:00,730 --> 00:12:04,390 >> [Réponse de l'élève inaudible] L'horodatage. Mais pourquoi? 202 00:12:06,110 --> 00:12:09,120 Il est quelque peu arbitraire, mais c'est réellement utile. 203 00:12:09,120 --> 00:12:15,500 Ce que cela veut dire à mon navigateur est ce fichier PHP que vous venez de demande a déjà expiré. 204 00:12:15,500 --> 00:12:18,580 En effet, elle a expiré il ya 30 ans. 205 00:12:18,580 --> 00:12:20,260 Mais qu'est-ce que cela signifie vraiment? 206 00:12:20,260 --> 00:12:22,500 Cela signifie simplement que la prochaine fois que l'utilisateur visite cette page, 207 00:12:22,500 --> 00:12:25,540 que ce soit par rechargement ou en tapant l'URL dans la barre d'adresse, 208 00:12:25,540 --> 00:12:28,010 assurez-vous d'aller chercher une nouvelle copie de celui-ci. 209 00:12:28,010 --> 00:12:30,840 C'est en quelque sorte un exemple de contourner la mémoire cache, 210 00:12:30,840 --> 00:12:33,790 un mot stupide qui signifie simplement tenter de décourager les navigateurs 211 00:12:33,790 --> 00:12:37,260 de fait, la mise en cache HTML qui a été envoyé à partir d'un serveur 212 00:12:37,260 --> 00:12:41,490 de sorte que vous n'avez pas accidentellement frappé rechargement et ensuite voir la même version du fichier. 213 00:12:41,490 --> 00:12:43,730 En fait, vous voulez que le serveur d'envoyer une nouvelle copie. 214 00:12:43,730 --> 00:12:47,440 Donc, le fait que c'est 1981 signifie simplement que c'est ce que l'appareil est de choisir 215 00:12:47,440 --> 00:12:50,280 comme une date arbitraire dans le passé. 216 00:12:50,280 --> 00:12:53,380 Mais la vraie ligne juteuse est maintenant celui-ci. 217 00:12:53,380 --> 00:12:57,550 Même avant 50 ans, vous êtes probablement vaguement familier avec les cookies. 218 00:12:57,550 --> 00:13:01,820 En ce moment, en particulier chez ceux qui sont moins à l'aise ou entre les deux, 219 00:13:01,820 --> 00:13:04,120 qu'est-ce qu'un cookie dans votre compréhension en ce moment 220 00:13:04,120 --> 00:13:06,980 même si nous sommes sur le point de faire de votre compréhension plus technique? 221 00:13:08,150 --> 00:13:10,070 Qu'est-ce qu'un cookie? Ouais. 222 00:13:10,070 --> 00:13:13,890 [L'élève] Informations sur l'utilisateur, comme si ils ont écrit leur nom d'utilisateur ou quelque chose. 223 00:13:13,890 --> 00:13:17,370 >> Bon. Il s'agit d'informations sur l'utilisateur, si ils ont tapé dans leur nom d'utilisateur déjà. 224 00:13:17,370 --> 00:13:21,190 Les cookies sont un moyen par lequel les serveurs peuvent se rappeler quelque chose au sujet d'un utilisateur. 225 00:13:21,190 --> 00:13:25,810 Et qu'est-ce qu'un cookie est vraiment est un fichier texte ou une séquence d'octets 226 00:13:25,810 --> 00:13:28,340 qui est planté par le serveur à l'intérieur de votre navigateur, 227 00:13:28,340 --> 00:13:31,960 et à l'intérieur de ce fichier ou partie de ces octets est une sorte d'identifiant. 228 00:13:31,960 --> 00:13:35,640 Peut-être que c'est littéralement votre nom d'utilisateur, mais le plus souvent c'est quelque chose de plus cryptique l'avenir 229 00:13:35,640 --> 00:13:43,700 comme cette chose ici - bo8dal3ct et ainsi de suite - cette chaîne alphanumérique vraiment grand 230 00:13:43,700 --> 00:13:47,050 qui est vraiment juste censé être un identificateur unique pour vous. 231 00:13:47,050 --> 00:13:49,790 Ou vous pouvez penser que c'est une sorte de tampon sur la main virtuelle. 232 00:13:49,790 --> 00:13:53,020 Si vous allez à un club ou un parc d'attractions, de se rappeler que vous avez effectivement payé 233 00:13:53,020 --> 00:13:55,850 et entré, ils ont mis un petit autocollant rouge sur la main d'une certaine sorte, 234 00:13:55,850 --> 00:13:59,270 et qui rappelle les gens au comptoir que vous avez déjà payé 235 00:13:59,270 --> 00:14:01,340 et vous pouvez aller et venir comme vous s'il vous plaît. 236 00:14:01,340 --> 00:14:04,250 Les cookies sont un peu dans le même esprit à cela. 237 00:14:04,250 --> 00:14:08,070 La première fois que j'ai visité ce site, comme je viens de le faire après avoir vidé mon cache, 238 00:14:08,070 --> 00:14:11,620 le serveur Web, l'appareil dans ce cas, mettre un timbre sur ma main 239 00:14:11,620 --> 00:14:15,030 dont le nom est PHPSESSID, l'ID de session, 240 00:14:15,030 --> 00:14:18,260 dont la valeur est cette chaîne alphanumérique très long. 241 00:14:18,260 --> 00:14:22,470 >> Donc, c'est maintenant sorte de blason sur ma main afin que la prochaine fois que je frappe recharger 242 00:14:22,470 --> 00:14:25,230 ou manuellement visiter cette URL dans un navigateur, 243 00:14:25,230 --> 00:14:29,230 mon navigateur par définition de HTTP va présenter le timbre à la main 244 00:14:29,230 --> 00:14:31,940 encore et encore et encore. 245 00:14:31,940 --> 00:14:34,550 Ainsi, même si le serveur ne sait pas nécessairement qui je suis, 246 00:14:34,550 --> 00:14:39,610 au moins ils savent que je suis le même utilisateur ou du moins, plus spécifiquement, le même navigateur. 247 00:14:39,610 --> 00:14:45,660 Et c'est donc en fin de compte la façon dont la super-SESSION est mis en œuvre. 248 00:14:45,660 --> 00:14:51,200 Le serveur n'a aucune idée de qui vous êtes quand vous revenez sur un site web pour la deuxième ou la troisième fois 249 00:14:51,200 --> 00:14:53,410 si vous ne présentez ce timbre à la main. 250 00:14:53,410 --> 00:14:55,530 Et dès que vous présenter ce tampon sur la main, 251 00:14:55,530 --> 00:14:59,370 le serveur Web va essentiellement dans une petite base de données de son propre 252 00:14:59,370 --> 00:15:06,040 et les chèques, d'accord, je viens de voir la main de timbre bo8dal3ct utilisateur et ainsi de suite. 253 00:15:06,040 --> 00:15:09,850 Permettez-moi de voir quelles sont les informations que le programmeur a enregistré 254 00:15:09,850 --> 00:15:12,380 à l'intérieur de la super sur cet utilisateur, 255 00:15:12,380 --> 00:15:17,000 et laissez-moi vous assurer que ces données sont à nouveau à l'intérieur de la SESSION superglobale 256 00:15:17,000 --> 00:15:19,830 de sorte que le programmeur peut accéder de nouveau que les données 257 00:15:19,830 --> 00:15:23,360 même si elle a été créée quelques minutes ou quelques heures auparavant. 258 00:15:23,360 --> 00:15:26,150 Donc, en d'autres mots, les biscuits, qui a obtenu une mauvaise réputation pendant un certain temps 259 00:15:26,150 --> 00:15:29,990 en raison de l'insécurité dans les navigateurs et ils peuvent vraiment violer notre intimité et tout cela, 260 00:15:29,990 --> 00:15:31,900 ils ont en fait une grande utilité, car sans eux 261 00:15:31,900 --> 00:15:36,110 vous serait constamment la connexion à chaque page que vous visitez Facebook 262 00:15:36,110 --> 00:15:40,680 ou chaque e-mail Gmail vous lire si le navigateur n'a pas une certaine façon de se souvenir 263 00:15:40,680 --> 00:15:43,320 que vous avez déjà authentifié. 264 00:15:43,320 --> 00:15:46,640 >> C'est de cette façon cookies sont envoyés dans les deux sens à travers le fil. 265 00:15:46,640 --> 00:15:52,470 Autre curiosité au sujet des témoins, en particulier ici, c'est que c'est tout à fait en clair. 266 00:15:52,470 --> 00:15:54,930 Il n'y a pas de cryptage qui se passe ici que ce soit, 267 00:15:54,930 --> 00:15:57,240 et en effet je suis en utilisant HTTP pour le moment. 268 00:15:57,240 --> 00:16:00,890 L'un de nos moments préférés en CS50, qui est maintenant de 2 ans, 269 00:16:00,890 --> 00:16:04,750 a été à l'époque un outil appelé Firesheep est sorti. 270 00:16:04,750 --> 00:16:08,320 Il s'agissait d'un logiciel gratuit qui a été faite par un chercheur en sécurité 271 00:16:08,320 --> 00:16:13,250 comme un appel de réveil pour la communauté de dire à quel point atrocement mis en œuvre 272 00:16:13,250 --> 00:16:17,900 certains mécanismes d'authentification sur le Web étaient. 273 00:16:17,900 --> 00:16:22,880 Donc, pendant un certain temps, Facebook a été presque entièrement sur HTTP, HTTPS pas. 274 00:16:22,880 --> 00:16:25,640 Et même si vous n'avez aucune idée de comment fonctionne la crypto, S est sécurisé 275 00:16:25,640 --> 00:16:27,950 donc cela signifie qu'il ya au moins quelques-uns de cryptage impliqués. 276 00:16:27,950 --> 00:16:30,610 Facebook ne sert à chiffrer les noms d'utilisateur et mots de passe, 277 00:16:30,610 --> 00:16:33,560 mais dès que vous regardé votre pokes ou vos messages ou votre fil de nouvelles, 278 00:16:33,560 --> 00:16:35,360 tout cela a été clair. 279 00:16:35,360 --> 00:16:37,870 Il en était de Gmail jusqu'à ce que tout juste un an ou 2 auparavant. 280 00:16:37,870 --> 00:16:41,100 Chaque fois que vous vous êtes connecté, oui, ils ont utilisé un chiffrement sécurisé, 281 00:16:41,100 --> 00:16:44,300 mais par la suite ils n'ont pas. Et pourquoi cela pourrait-il être? 282 00:16:44,300 --> 00:16:49,210 Pourquoi ne pas simplement utiliser la cryptographie tout le temps en cas d'utilisation comme celui-ci? 283 00:16:49,210 --> 00:16:53,700 Qu'est-ce que c'est? Je crois avoir entendu quelque chose. [L'élève] Vitesse. 284 00:16:53,700 --> 00:16:56,250 Vitesse, non? Il ya plusieurs façons de contourner cela. 285 00:16:56,250 --> 00:16:59,610 Mais si vous venez sorte de penser logiquement, si vous chiffrez quelque chose, 286 00:16:59,610 --> 00:17:01,820 vous avez à faire au moins un peu plus de travail. 287 00:17:01,820 --> 00:17:05,460 En pset 2 lorsque vous mis en oeuvre César ou Vigenère, voire Crack, 288 00:17:05,460 --> 00:17:07,760 juste l'impression d'une chaîne est relativement facile. 289 00:17:07,760 --> 00:17:12,040 Chiffrement et puis en imprimant une chaîne mini nécessite un travail un peu plus. 290 00:17:12,040 --> 00:17:14,520 >>  Pour les super sites populaires comme Google et Facebook, 291 00:17:14,520 --> 00:17:18,839 si vous avez à faire plus de travail pour chaque utilisateur pour chaque page web qu'ils visitent, 292 00:17:18,839 --> 00:17:20,520 qui prend juste plus de temps CPU. 293 00:17:20,520 --> 00:17:22,920 Et si vous avez besoin de plus de temps CPU, vous pourriez avoir besoin plus de serveurs, 294 00:17:22,920 --> 00:17:24,270 ce qui signifie que vous pourriez avoir besoin de plus d'argent. 295 00:17:24,270 --> 00:17:27,579 Et pendant de nombreuses années ce n'était pas vraiment de bonnes pratiques. 296 00:17:27,579 --> 00:17:31,440 Les gens utilisent le cryptage SSL uniquement quand ils avaient besoin d'. 297 00:17:31,440 --> 00:17:34,960 Mais il s'est avéré, et que cet homme avec Firesheep fait super clair, 298 00:17:34,960 --> 00:17:37,920 quand vous les gars qui sont actuellement sur Facebook dès maintenant - 299 00:17:37,920 --> 00:17:39,880 Par curiosité, nous allons voir si vous fess up. 300 00:17:39,880 --> 00:17:42,620 Si vous êtes sur Facebook en ce moment dans certains onglet, même si elle n'est pas au premier plan, 301 00:17:42,620 --> 00:17:46,610 est votre URL ou HTTP HTTPS? 302 00:17:46,610 --> 00:17:50,560 [] Plusieurs élèves S. S? [Rires] 303 00:17:50,560 --> 00:17:55,510 D'accord. Toute HTTP? À seulement 1? D'accord. 304 00:17:55,510 --> 00:17:58,940 Ainsi, chacun d'entre nous peut pirater compte de ce gars Facebook dès maintenant. 305 00:17:58,940 --> 00:18:04,100 Pour la plupart c'est devenu activée par défaut, au moins dans certains sites. 306 00:18:04,100 --> 00:18:08,120 Et longue histoire courte, si votre trafic Web n'est pas chiffré, 307 00:18:08,120 --> 00:18:12,960 non seulement le HTML aller et venir à travers les WiFis non chiffrées, 308 00:18:12,960 --> 00:18:16,760 il ne faut choses comme les cookies aller et venir à travers l'air 309 00:18:16,760 --> 00:18:18,940 sans aucune forme de cryptage. 310 00:18:18,940 --> 00:18:23,540 Donc si vous avez un peu de savvy programmation ou un peu de recherche sur Google compétences 311 00:18:23,540 --> 00:18:27,410 de trouver un logiciel gratuit qui fait cela, tout ce que vous avez à faire est de s'asseoir dans un Starbucks 312 00:18:27,410 --> 00:18:30,680 ou assis dans un aéroport où il est généralement clair WiFi 313 00:18:30,680 --> 00:18:36,070 et juste regarder pour les mots clés tels que Set-Cookie: PHPSESSID ou 314 00:18:36,070 --> 00:18:39,300 parce que si vous avez le savoir-faire technique se contenter de regarder le WiFi 315 00:18:39,300 --> 00:18:43,010 pour tous les bits dans le flux que l'air de ce modèle, 316 00:18:43,010 --> 00:18:50,840 vous pouvez alors dire que PHPSESSID gars arrive à être bo8dal et ainsi de suite. 317 00:18:50,840 --> 00:18:53,890 Et là encore, si vous êtes suffisamment techniquement pointus ou avoir le bon outil, 318 00:18:53,890 --> 00:18:58,890 vous pouvez alors simplement reconfigurer votre propre navigateur de commencer à présenter ce timbre à la main 319 00:18:58,890 --> 00:19:05,030 à Facebook.com, Facebook va tout simplement supposer que vous êtes ce type 320 00:19:05,030 --> 00:19:09,880 parce que tout ce qu'ils savent n'est pas qui vous êtes mais que vous avez cet identificateur unique. 321 00:19:09,880 --> 00:19:14,650 Donc, si vous voler cet identifiant unique et le présenter au serveur web comme le vôtre, 322 00:19:14,650 --> 00:19:16,860 ils vont juste vous montrer fil de nouvelles de cette personne 323 00:19:16,860 --> 00:19:18,980 ou cette personne des messages ou des pokes. 324 00:19:18,980 --> 00:19:23,190 >> Et je voudrais maintenant Google comment activer le protocole HTTPS pour Facebook peut-être. 325 00:19:23,190 --> 00:19:25,150 Mais il est vraiment aussi simple que cela. 326 00:19:25,150 --> 00:19:27,660 Et si Facebook et Google et autres ont obtenu vraiment bon pour cela, 327 00:19:27,660 --> 00:19:31,870 mais gardez un œil sur tout le plus pour tous les sites Web que vous visitez qui n'utilisent pas HTTP 328 00:19:31,870 --> 00:19:35,020 et avoir une sorte d'informations sensibles sur eux, 329 00:19:35,020 --> 00:19:37,490 que ce soit financières, personnelles ou autres. 330 00:19:37,490 --> 00:19:43,180 S'ils ne sont pas d'utiliser ce, très probablement les cookies comme celui-ci peut être très facilement volés 331 00:19:43,180 --> 00:19:46,270 puis forgées, et c'est exactement ce que Firesheep fait. 332 00:19:46,270 --> 00:19:48,250 Vous n'avez pas besoin d'être un programmeur. 333 00:19:48,250 --> 00:19:51,680 Tout ce que vous avait à faire était ont une connexion Internet, télécharger cet outil gratuit, 334 00:19:51,680 --> 00:19:56,490 et ce qu'il faudrait faire, c'est que vous vous connectez, puis il vous montrera les noms Facebook 335 00:19:56,490 --> 00:20:00,170 chacun de Sanders, dans cette démonstration particulière, autour de vous 336 00:20:00,170 --> 00:20:03,260 et tout ce que vous avait à faire était de cliquer sur son nom et le logiciel automatisé le processus de 337 00:20:03,260 --> 00:20:05,970 de renifler ce cookie, il présente à Facebook comme la vôtre, 338 00:20:05,970 --> 00:20:07,990 et voila, vous êtes connecté po 339 00:20:07,990 --> 00:20:11,190 Il s'agit donc d'un autre de ces «ne fais pas ça" officiellement. 340 00:20:11,190 --> 00:20:14,660 Si vous avez votre propre réseau à domicile et que vous voulez bricoler, par tous les moyens, 341 00:20:14,660 --> 00:20:17,530 mais se rendre compte de ce fait franchir la ligne dans un environnement universitaire. 342 00:20:17,530 --> 00:20:20,030 >> Mais le but ici n'est vraiment pas mettre l'accent sur la façon de procéder 343 00:20:20,030 --> 00:20:22,320 mais comment se défendre contre ce genre de choses. 344 00:20:22,320 --> 00:20:26,180 Et la solution triviale ici, même s'il est lui-même imparfait, 345 00:20:26,180 --> 00:20:31,360 est de vraiment réduire l'utilisation de tous les sites qui n'utilisent pas le protocole HTTPS en permanence. 346 00:20:31,360 --> 00:20:34,520 Ainsi, des sites comme Facebook et Google ont de plus en cases 347 00:20:34,520 --> 00:20:36,200 où vous pouvez opter pour ce genre de chose, 348 00:20:36,200 --> 00:20:40,000 et les banques ont eu pendant des années pour des raisons similaires. 349 00:20:40,000 --> 00:20:43,580 Donc, juste un peu plus d'un facteur de la peur si nous le pouvons. Mais c'est tout en un mot. 350 00:20:43,580 --> 00:20:46,420 C'est ainsi qu'un serveur se souvient de qui vous êtes. 351 00:20:46,420 --> 00:20:50,760 Et dès qu'ils peuvent se rappeler qui vous êtes, ils peuvent se rappeler quoi que ce soit sur vous 352 00:20:50,760 --> 00:20:56,140 que le programmeur a stocké à l'intérieur de cette superglobale spéciale appelée $ _SESSION. 353 00:20:56,140 --> 00:20:59,750 Et pour pset 7, nous vous en servez trivialement juste pour se souvenir d'un int, 354 00:20:59,750 --> 00:21:02,260 à savoir l'identifiant unique de l'utilisateur qui a ouvert une session, 355 00:21:02,260 --> 00:21:05,880 de sorte que nous savons qu'ils ont été là avant. 356 00:21:05,880 --> 00:21:12,450 Toutes les questions, puis sur les sessions ou les cookies ou autres? 357 00:21:12,450 --> 00:21:15,130 Firesheep ne fonctionne plus efficacement, 358 00:21:15,130 --> 00:21:18,310 et vous devez mettre votre ordinateur dans un mode spécial promiscuité 359 00:21:18,310 --> 00:21:20,700 de sorte que vous êtes en train d'écouter le trafic en dehors de vous-mêmes. 360 00:21:20,700 --> 00:21:23,940 Donc, si vous êtes en train de télécharger Firesheep, de réaliser que ce n'est pas aussi facile 361 00:21:23,940 --> 00:21:26,850 comme il était une fois à démontrer. 362 00:21:26,850 --> 00:21:29,070 Très bien. Et ne pas le faire dans Sanders. Faire à la maison. 363 00:21:29,070 --> 00:21:30,890 Bases de données. 364 00:21:30,890 --> 00:21:33,580 Une des choses que nous avons faites dans pset 7 très délibérément 365 00:21:33,580 --> 00:21:37,780 été, nous vous donnons une table de base de données de l'échantillon pour les utilisateurs qui a des identifiants utilisateur, 366 00:21:37,780 --> 00:21:41,020 certains noms d'utilisateur et mots de passe cryptés certains qui s'y trouvent. 367 00:21:41,020 --> 00:21:44,520 Et comme vous le verrez, si vous avez pas déjà fait, vous allez devoir changer la table un peu. 368 00:21:44,520 --> 00:21:47,710 Vous allez devoir ajouter un peu de cache pour chacun des utilisateurs dans ce tableau, 369 00:21:47,710 --> 00:21:51,130 et vous allez devoir ajouter un autre tableau de l'historique, une table de portefeuilles, 370 00:21:51,130 --> 00:21:53,310 ou peut-être l'appeler autre chose. 371 00:21:53,310 --> 00:21:56,740 Mais en termes de réflexion sur la façon de le faire, nous allons ouvrir cet outil 372 00:21:56,740 --> 00:22:00,570 qui nous a servi le vendredi, mais si elles sont inconnues, l'appareil est livré avec un outil 373 00:22:00,570 --> 00:22:04,680 phpMyAdmin qui est appelé par hasard, écrit en PHP, 374 00:22:04,680 --> 00:22:07,950 mais son but dans la vie, après je me connecte ici jharvard de pourpre, 375 00:22:07,950 --> 00:22:15,160 est de me donner un moyen convivial d'afficher et de modifier ma base de données. 376 00:22:15,160 --> 00:22:18,040 >> La base de données que je l'exécute sur l'appareil est appelé MySQL. 377 00:22:18,040 --> 00:22:23,420 Ceci est très populaire, et c'est une base de données open source gratuit qui est merveilleusement facile à utiliser, 378 00:22:23,420 --> 00:22:25,620 en particulier avec les extrémités avant comme ça. 379 00:22:25,620 --> 00:22:29,350 Ce que cet outil me permet de faire, par exemple, est Poke autour des tables. 380 00:22:29,350 --> 00:22:30,890 Permettez-moi aller de l'avant et de le faire. 381 00:22:30,890 --> 00:22:36,580 Vendredi, nous avons créé une table appelée étudiants qui était super simple. 382 00:22:36,580 --> 00:22:41,680 Il y avait 3 colonnes - id, nom, email et - et je insérée manuellement quelques lignes 383 00:22:41,680 --> 00:22:44,420 comme David et Mike dans cet exemple particulier. 384 00:22:44,420 --> 00:22:47,290 Prenons cela un peu plus loin, et supposons que nous voulons nous souvenir plus 385 00:22:47,290 --> 00:22:49,660 qu'un simple nom et e-mail d'un utilisateur. 386 00:22:49,660 --> 00:22:53,090 Permettez-moi de cliquer ici Structure en haut. 387 00:22:53,090 --> 00:22:55,440 Et encore une fois, le pset vous guide à travers les étapes nécessaires ici, 388 00:22:55,440 --> 00:22:58,150 alors ne vous inquiétez pas si certains de cela est un peu rapide. 389 00:22:58,150 --> 00:22:59,690 Ensuite, je vais cliquer sur ici. 390 00:22:59,690 --> 00:23:02,270 Je vais ajouter un certain nombre de colonnes après e-mail 391 00:23:02,270 --> 00:23:04,130 parce que je veux ajouter quelque chose comme maison. 392 00:23:04,130 --> 00:23:06,640 J'ai oublié d'enregistrer la maison de l'étudiant. 393 00:23:06,640 --> 00:23:11,400 Permettez-moi cliquez sur OK, et maintenant nous avons cette forme qui est malheureusement un peu large de gauche à droite, 394 00:23:11,400 --> 00:23:13,710 mais je vais appeler le nom de cette maison de champ, 395 00:23:13,710 --> 00:23:16,050 puis le type je dois maintenant choisir. 396 00:23:16,050 --> 00:23:18,870 Donc, nous allons avoir une brève discussion sur les différents types de MySQL 397 00:23:18,870 --> 00:23:24,590 parce que PHP est faiblement typé et il joue sorte de double jeu avec les types, 398 00:23:24,590 --> 00:23:29,430 dans une base de données en particulier, il est important d'utiliser réellement superbe frappe à votre avantage 399 00:23:29,430 --> 00:23:33,260 car l'une des choses MySQL et les moteurs de base de données peut faire pour vous 400 00:23:33,260 --> 00:23:37,910 est de s'assurer que vous ne mettez pas de fausses données dans votre base de données. 401 00:23:37,910 --> 00:23:41,850 C'est en quelque sorte la vérification sans erreur à votre disposition. 402 00:23:41,850 --> 00:23:46,250 >> Pour la maison nous n'avons évidemment pas que ça soit un int, qui est une valeur 32 bits dans MySQL. 403 00:23:46,250 --> 00:23:49,810 Nous avons fait parler brièvement vendredi au sujet varchar, ce qui correspond à la longueur variable de type char. 404 00:23:49,810 --> 00:23:54,720 Qu'est-ce que c'est? Cela vous permet de spécifier que vous voulez que ce soit une chaîne quelconque. 405 00:23:54,720 --> 00:23:56,840 Vous n'avez pas vraiment savoir à l'avance combien de temps il est, 406 00:23:56,840 --> 00:24:00,100 donc nous allons dire arbitrairement un nom de maison peut être de 255 caractères, 407 00:24:00,100 --> 00:24:04,190 mais vous pourriez aller avec 32, 64 - un nombre vraiment. 408 00:24:04,190 --> 00:24:10,700 Mais l'avantage d'utiliser un varchar dans un champ appelé char, c'est quoi? 409 00:24:10,700 --> 00:24:15,110 Juste intuitivement si je descendez ici, vous remarquerez qu'il ya char et il ya varchar. 410 00:24:15,110 --> 00:24:19,520 Varchar est de longueur variable char; char est une longueur fixe char. 411 00:24:19,520 --> 00:24:24,730 Donc, basée uniquement sur cette définition, quel est l'avantage ou le désavantage de chacune de ces? 412 00:24:24,730 --> 00:24:30,490 En d'autres termes, qui se soucie de la distinction, ou pourquoi s'en soucier? 413 00:24:31,660 --> 00:24:35,750 >> Ouais. [L'élève] Varchar a plus de souplesse, mais prend plus de mémoire. 414 00:24:35,750 --> 00:24:40,730 Bon. Varchar prend plus - Voyons voir. Je ne sais pas si j'ai bien entendu ce droit. 415 00:24:40,730 --> 00:24:42,360 Pouvez-vous dire qu'une fois de plus? 416 00:24:42,360 --> 00:24:45,850 [L'élève] J'ai dit varchar a probablement plus de souplesse, mais il faut plus de mémoire. 417 00:24:45,850 --> 00:24:51,170 Intéressant. D'accord. Varchar donne probablement une plus grande flexibilité, mais prend plus de mémoire. 418 00:24:51,170 --> 00:24:53,220 Celui-ci n'est pas nécessairement vrai. 419 00:24:53,220 --> 00:24:56,290 Il dépend du contexte, mais nous allons revenir à cela. 420 00:24:56,290 --> 00:25:03,230 >> [Réponse de l'élève inaudible] Exactement. 421 00:25:03,230 --> 00:25:06,900 C'est effectivement le cas que caractères utilisent généralement plus de mémoire 422 00:25:06,900 --> 00:25:10,950 car un char, comme en C, est comme une corde, c'est un tableau de caractères. 423 00:25:10,950 --> 00:25:13,690 Donc, si vous dites un champ char de longueur 255, 424 00:25:13,690 --> 00:25:16,910 la base de données est littéralement vais vous donner 255 caractères. 425 00:25:16,910 --> 00:25:22,290 Et si la maison finit par être MATHER et 6 caractères au total, 426 00:25:22,290 --> 00:25:25,090 tu perds plus de 200 caractères. 427 00:25:25,090 --> 00:25:29,640 >> Ainsi, un varchar efficacement utilise autant de caractères que nécessaire 428 00:25:29,640 --> 00:25:31,590 jusqu'à concurrence d'un montant maximum. 429 00:25:31,590 --> 00:25:35,470 Mais le prix que vous payez est en fait la performance, potentiellement. 430 00:25:35,470 --> 00:25:39,740 Si vous savez d'avance que toutes vos chaînes vont être de 8 caractères - 431 00:25:39,740 --> 00:25:43,090 Par exemple, supposons que vous avez besoin de mots de passe d'une longueur de 8 - 432 00:25:43,090 --> 00:25:47,350 la hausse de l'aide d'un champ char à l'occasion, mais pas souvent, 433 00:25:47,350 --> 00:25:51,100 est de spécifier une longueur fixe pour quelque chose comme un mot de passe 434 00:25:51,100 --> 00:25:53,300 parce que maintenant la base de données peut être encore plus intelligente. 435 00:25:53,300 --> 00:25:58,160 Si elle sait que chaque champ char, chaque chaîne dans une colonne de la même longueur, 436 00:25:58,160 --> 00:26:00,780 vous récupérez la fonction d'accès aléatoire. 437 00:26:00,780 --> 00:26:05,110 Vous pouvez sauter entre les divers domaines chevalier dans votre base de données 438 00:26:05,110 --> 00:26:07,940 parce que penser à une base de données sous forme de lignes et de colonnes. 439 00:26:07,940 --> 00:26:11,670 Donc, si chacune des chaînes est de la même longueur, 440 00:26:11,670 --> 00:26:17,820 vous savez que le premier est l'octet 0, la suivante est à 8 octets 441 00:26:17,820 --> 00:26:20,240 puis 16, puis 24 et ainsi de suite. 442 00:26:20,240 --> 00:26:24,500 Donc, si toutes les chaînes sont de la même longueur, vous pouvez sauter beaucoup plus efficacement. 443 00:26:24,500 --> 00:26:26,710 Alors, ça peut être un avantage en termes de performances, 444 00:26:26,710 --> 00:26:29,420 mais en général, vous n'avez pas le luxe de savoir à l'avance, 445 00:26:29,420 --> 00:26:32,170 si un varchar est le chemin à parcourir. 446 00:26:32,170 --> 00:26:36,030 Voici un autre détail que même Facebook couru dans la suite. 447 00:26:36,030 --> 00:26:39,670 Ints sont grands, et nous sorte de les utiliser par défaut chaque fois que nous voulons un certain nombre, 448 00:26:39,670 --> 00:26:41,750 mais c'est seulement 32 bits. 449 00:26:41,750 --> 00:26:46,210 >> Et même si Facebook ne sont pas tout à fait 4 milliards d'utilisateurs maintenant, 450 00:26:46,210 --> 00:26:48,680 il ya certainement des gens là-bas avec plusieurs comptes 451 00:26:48,680 --> 00:26:50,960 ou les comptes qui ont été ouverts puis fermés, 452 00:26:50,960 --> 00:26:55,130 et ainsi de Facebook lui-même, je crois il ya quelques années a dû transition de int 453 00:26:55,130 --> 00:27:00,010 pour, comme il est appelé à juste titre, bigint, qui est seulement 64 bits au lieu. 454 00:27:00,010 --> 00:27:02,230 Donc, c'est aussi une décision de conception. 455 00:27:02,230 --> 00:27:06,570 Vous serait incroyablement chanceux si votre projet final s'avère démarrage, 456 00:27:06,570 --> 00:27:10,010 a 4 milliards et 1 utilisateurs, donner ou prendre, 457 00:27:10,010 --> 00:27:13,200 Dans ce cas, l'aide ints pourrait être un peu myope. 458 00:27:13,200 --> 00:27:16,230 Mais en réalité, votre table utilisateurs est probablement très bien avec ints. 459 00:27:16,230 --> 00:27:19,340 Mais pour quelque chose comme pset 7, comme votre table d'historique, 460 00:27:19,340 --> 00:27:23,700 vous pourriez avoir des milliers, des millions d'utilisateurs, si vous évoluez dans etrade.com. 461 00:27:23,700 --> 00:27:26,020 Ainsi, alors que vous pourriez ne pas avoir plus de 4 milliards d'utilisateurs, 462 00:27:26,020 --> 00:27:30,070 les utilisateurs que vous avez peut-être avoir plus de 4 milliards de transactions au cours du temps - 463 00:27:30,070 --> 00:27:33,200 achète et vend des choses et de leur histoire. 464 00:27:33,200 --> 00:27:38,090 Donc, si vous faites anticiper - encore une fois, ce sont des problèmes bien d'avoir si vous avez autant de données - 465 00:27:38,090 --> 00:27:40,920 si vous faites anticiper données dépassant la taille d'un int, 466 00:27:40,920 --> 00:27:47,740 aller avec quelque chose comme bigint est une direction pas assez souvent adoptée par les concepteurs 467 00:27:47,740 --> 00:27:49,710 parce que la figure des gens qui ne va pas être un problème, 468 00:27:49,710 --> 00:27:51,930 mais il est aussi facile de choisir quelque chose plus que cela. 469 00:27:51,930 --> 00:27:55,380 Décimal que nous utilisons dans pset 7, qui spécifie précision fixe 470 00:27:55,380 --> 00:27:59,840 de sorte que vous pouvez éviter les problèmes impliquant des flotteurs et en double et en reals et autres. 471 00:27:59,840 --> 00:28:02,440 >> Et puis il ya d'autres domaines ici. Nous allons saluer nos mains sur eux dans une certaine mesure. 472 00:28:02,440 --> 00:28:07,270 Mais les dates, les heures ont tous un format prescrit dans MySQL, 473 00:28:07,270 --> 00:28:10,830 et l'avantage de stocker des dates que les dates et non varchars 474 00:28:10,830 --> 00:28:15,730 signifie que la base de données peut effectivement les reformater en différents formats, 475 00:28:15,730 --> 00:28:18,800 si un format américain ou format européen ou autre - mais vous le voulez - 476 00:28:18,800 --> 00:28:22,700 beaucoup plus efficacement que s'il s'agissait simplement d'une certaine générique varchar. 477 00:28:22,700 --> 00:28:25,150 Et puis il ya une certaine binaire, varbinary, les blobs. 478 00:28:25,150 --> 00:28:28,580 Ce sont des objets binaires volumineux, et vous pouvez également stocker des données binaires 479 00:28:28,580 --> 00:28:30,750 ainsi que des données géométriques dans une base de données. 480 00:28:30,750 --> 00:28:34,350 Mais pour nous, nous allons généralement soucient entiers et varchars, etc. 481 00:28:34,350 --> 00:28:36,230 Finissons cet exemple avec la maison. 482 00:28:36,230 --> 00:28:40,030 Maison que je vais dire arbitrairement sera 255 caractères. 483 00:28:40,030 --> 00:28:42,850 Ensuite, la valeur par défaut, nous pourrions le faire. 484 00:28:42,850 --> 00:28:47,440 Nous pourrions, par défaut mettre tout le monde à Mather House, par exemple. 485 00:28:47,440 --> 00:28:49,710 C'est ainsi que nous avons pu préciser que la base de données 486 00:28:49,710 --> 00:28:52,460 devraient veiller à ce que quelqu'un a toujours une valeur. Mais je vais laisser ça être. 487 00:28:52,460 --> 00:28:55,270 En fait, pour les personnes qui vivent hors campus et non dans une maison, 488 00:28:55,270 --> 00:28:59,590 peut-être fait, je veux préciser que la valeur par défaut est NULL maison, 489 00:28:59,590 --> 00:29:04,890 et puis j'ai besoin de cocher cette case et indiquer la base de données qu'il est normal si la maison de l'utilisateur est NULL. 490 00:29:04,890 --> 00:29:07,270 >> Encore une fois, ceci est un autre mécanisme de défense que vous pouvez mettre en place 491 00:29:07,270 --> 00:29:10,590 de sorte que vous n'avez même pas besoin de le mettre dans votre code PHP nécessairement. 492 00:29:10,590 --> 00:29:14,630 La base de données fera en sorte que les choses sont ou ne sont pas NULL. 493 00:29:14,630 --> 00:29:17,310 Et puis enfin, Attributs. 494 00:29:17,310 --> 00:29:18,920 Aucun d'entre eux sont réellement pertinents. 495 00:29:18,920 --> 00:29:22,880 Binaire non signé - aucun de ceux qui sont pertinents pour un varchar. 496 00:29:22,880 --> 00:29:24,220 Indice. 497 00:29:24,220 --> 00:29:27,320 Est-ce que quelqu'un sait ou se souvenir ou une conjecture quant à ce qui est un indice 498 00:29:27,320 --> 00:29:29,510 quelque chose comme la maison? 499 00:29:29,510 --> 00:29:35,240 C'est aussi en fait une décision de conception importante et relativement facile. 500 00:29:35,240 --> 00:29:39,200 Pour ceux qui ne l'ont pas encore vu, le vendredi nous avons parlé brièvement de clés primaires. 501 00:29:39,200 --> 00:29:43,240 Dans une table de base de données, une clé primaire est le champ ou la colonne 502 00:29:43,240 --> 00:29:46,270 qui identifie de manière unique les lignes dans la table. 503 00:29:46,270 --> 00:29:49,150 Ainsi, dans le tableau que nous avons actuellement ID, nous avons des noms et des courriels. 504 00:29:49,150 --> 00:29:52,050 Qui d'entre eux est le meilleur candidat pour être une clé primaire, 505 00:29:52,050 --> 00:29:55,810 dont le rôle est d'identifier de manière unique les lignes? 506 00:29:55,810 --> 00:29:57,530 Probablement ID. 507 00:29:57,530 --> 00:29:59,930 Sans doute, on pourrait également utiliser ce bien? 508 00:29:59,930 --> 00:30:02,860 Peut-être que vous pourriez utiliser le courrier électronique, car en théorie, il est unique 509 00:30:02,860 --> 00:30:05,380 à moins que les gens partagent des comptes de messagerie. 510 00:30:05,380 --> 00:30:09,980 Mais la réalité est que si vous utilisez un ID numérique comme 1234, 511 00:30:09,980 --> 00:30:14,170 ce n'est que 32 bits, alors qu'une adresse e-mail pourrait être ce nombre d'octets ou de ce octets nombreux. 512 00:30:14,170 --> 00:30:16,610 Donc, en termes d'efficacité pour les identificateurs uniques, 513 00:30:16,610 --> 00:30:19,270 il tend à être une bonne pratique que d'utiliser un int 514 00:30:19,270 --> 00:30:23,090 même si vous avez une certaine candidate chaîne que vous pourrait sans doute utiliser. 515 00:30:23,090 --> 00:30:26,760 >> Pour quelque chose comme la maison, cela ne devrait pas être une clé primaire 516 00:30:26,760 --> 00:30:30,770 car alors seulement 1 personne pourrait vivre dans Mather et 1 personne sur Currier et analogues. 517 00:30:30,770 --> 00:30:32,790 De la même façon, cela ne devrait pas être unique. 518 00:30:32,790 --> 00:30:37,830 La différence entre le primaire et unique, c'est que dans le cas de notre table courante, 519 00:30:37,830 --> 00:30:42,620 ID serait primaires, mais le courriel n'est pas la raison principale pour nous venons de parler - 520 00:30:42,620 --> 00:30:44,740 performances - mais il doit encore être unique. 521 00:30:44,740 --> 00:30:47,200 Ainsi, vous pouvez toujours appliquer l'unicité sans faire la demande 522 00:30:47,200 --> 00:30:49,520 que c'est un super important domaine primaire. 523 00:30:49,520 --> 00:30:52,610 Mais celui-ci est très utile: Index. 524 00:30:52,610 --> 00:30:56,180 Si vous savez d'avance pour votre projet final, pour pset 7, ou en général, 525 00:30:56,180 --> 00:30:59,480 que cette maison est le terrain va être quelque chose que vous chercher sur un terrain 526 00:30:59,480 --> 00:31:01,910 en utilisant le mot-clé select ou autre chose, 527 00:31:01,910 --> 00:31:05,180 alors vous pouvez dire préventivement la base de données pour travailler sa magie 528 00:31:05,180 --> 00:31:10,510 et assurez-vous qu'il crée en mémoire des structures de données sophistiquées nécessaires 529 00:31:10,510 --> 00:31:13,770 d'accélérer les recherches sur la base de la maison. 530 00:31:13,770 --> 00:31:17,860 Peut-être qu'il va utiliser une table de hachage, ce sera peut utiliser une liste chaînée. 531 00:31:17,860 --> 00:31:21,260 En réalité, il a tendance à utiliser un arbre, souvent une structure appelée B-tree - 532 00:31:21,260 --> 00:31:24,090 pas un arbre binaire, mais un B-tree - qui est un arbre très large 533 00:31:24,090 --> 00:31:27,370 que vous pourriez voir dans une classe comme CS124, la classe des structures de données. 534 00:31:27,370 --> 00:31:31,800 Mais enfin, vous n'avez pas à vous soucier de ce que lors de l'utilisation du logiciel de base de données intelligente. 535 00:31:31,800 --> 00:31:35,890 Vous pouvez simplement lui dire, "Indexer ce domaine afin que je puisse rechercher sur elle de manière plus efficace." 536 00:31:35,890 --> 00:31:40,250 >> Si vous laissez cette mousse et vous essayez de rechercher pour chacun dans la base de données qui vit à Mather, 537 00:31:40,250 --> 00:31:42,710 elle se transformer en recherche linéaire. 538 00:31:42,710 --> 00:31:45,360 Et si vous avez 6.000 étudiants de premier cycle qui vivent toutes dans une maison, 539 00:31:45,360 --> 00:31:47,900 vous allez chercher tout le tableau pour trouver les Matherites, 540 00:31:47,900 --> 00:31:52,190 tandis que si vous dites Index, j'espère que ce sera quelque chose de proche d'une recherche logarithmique 541 00:31:52,190 --> 00:31:54,510 pour trouver ces types d'étudiants. 542 00:31:54,510 --> 00:31:56,750 Ceci est juste une fonctionnalité gratuite pour allumer, 543 00:31:56,750 --> 00:31:59,530 même si elle ne viennent à un prix d'une certaine quantité d'espace. 544 00:31:59,530 --> 00:32:02,690 Enfin, l'auto-incrémentation, ce champ AI, 545 00:32:02,690 --> 00:32:05,830 ce qui signifie simplement si c'est un entier et vous ne voulez pas prendre soin d'incrémenter le vous-même 546 00:32:05,830 --> 00:32:07,570 chaque fois qu'il ya un nouvel utilisateur, vérifier que, 547 00:32:07,570 --> 00:32:11,910 et chaque utilisateur qui est inséré recevrez automatiquement un nouvel ID. 548 00:32:11,910 --> 00:32:15,620 Cliquons sur Enregistrer, et maintenant nous allons trouver à redire à cette conception. 549 00:32:15,620 --> 00:32:20,200 Si je vais dans Parcourir, notez que Mike et ma maison est NULL. 550 00:32:20,200 --> 00:32:22,420 Je peux utiliser phpMyAdmin pour modifier manuellement. 551 00:32:22,420 --> 00:32:25,110 Je peux aller ici et tapez Mather, puis appuyez sur Entrée, 552 00:32:25,110 --> 00:32:27,740 et remarquez maintenant le tableau est différent. 553 00:32:27,740 --> 00:32:29,270 Mais remarquez que je pouvais faire autre chose aussi. 554 00:32:29,270 --> 00:32:33,530 ID de David est 1, donc phpMyAdmin est encore juste un outil administratif; 555 00:32:33,530 --> 00:32:35,970 ce n'est pas quelque chose que vos utilisateurs ne sont jamais aller voir. 556 00:32:35,970 --> 00:32:38,810 Donc, si je la place sur l'onglet SQL en haut - 557 00:32:38,810 --> 00:32:41,450 et encore, pset 7 vous présenter à plusieurs de ces questions - 558 00:32:41,450 --> 00:32:45,260 Je peux exécuter manuellement la commande SQL Structured Query Language 559 00:32:45,260 --> 00:32:56,410 MISE À JOUR utilisateurs SET maison = 'Pfoho' WHERE id = 1. 560 00:32:56,410 --> 00:33:00,830 Ces requêtes SQL sont, bien assez, assez lisible de gauche à droite. 561 00:33:00,830 --> 00:33:04,350 Mettre à jour la table des utilisateurs, définissez le champ appelé la maison de Pfoho 562 00:33:04,350 --> 00:33:06,830 où identification de l'utilisateur est 1. 563 00:33:06,830 --> 00:33:11,480 Ou je pourrais même faire où email = 'malan@harvard.edu ». 564 00:33:11,480 --> 00:33:14,860 Tant que qui identifie moi, qui fonctionnerait aussi bien. 565 00:33:14,860 --> 00:33:18,810 Mais ID a tendance à être plus performant, nous allons donc le faire. 566 00:33:18,810 --> 00:33:22,950 Cliquons sur OK. Bon, lecture.users n'existe pas. Quel est mon erreur? 567 00:33:22,950 --> 00:33:26,220 Quelle est la table de fait appelé ici? 568 00:33:26,220 --> 00:33:28,770 C'est ce qu'on appelle les étudiants juste parce que c'est ce que nous avons fait ici en haut à gauche. 569 00:33:28,770 --> 00:33:31,860 C'est ce qu'on appelle les étudiants, pas les utilisateurs. Alors cliquez sur OK maintenant. 570 00:33:31,860 --> 00:33:34,330 1 row affected. Requête effectuée en 0,01 secondes. 571 00:33:34,330 --> 00:33:38,010 Si je clique sur Parcourir maintenant, il vit maintenant dans Pfoho Malan. 572 00:33:38,010 --> 00:33:42,070 Donc, c'est un autre goût de SQL, mais le pset vous guidera à travers un peu plus de cela. 573 00:33:42,070 --> 00:33:44,710 >> Il s'agit d'une décision stupide je l'ai déjà fait ici. 574 00:33:44,710 --> 00:33:47,820 Je dirais que cette conception de base de données est inefficace 575 00:33:47,820 --> 00:33:51,650 parce que les gens de plus j'ajoute à la table des étudiants, 576 00:33:51,650 --> 00:33:54,730 plus d'entre nous je commencer à ajouter, plus des FO je commencer à ajouter, 577 00:33:54,730 --> 00:33:58,320 nous allons commencer à voir ce que les licenciements dans ce tableau? 578 00:34:00,840 --> 00:34:06,020 >> Ouais. [L'élève] Voyant que c'est chez les étudiants, nous utilisons le même [inaudible] 579 00:34:06,020 --> 00:34:07,360 La même chose - Oui, exactement. 580 00:34:07,360 --> 00:34:10,400 Ainsi, si 400 personnes vivent dans la Mather, donner ou prendre, 581 00:34:10,400 --> 00:34:15,000 finalement ce tableau va avoir 400 lignes qui disent «Mather," "Mather," 582 00:34:15,000 --> 00:34:16,590 "Mather," "Mather," "Mather." 583 00:34:16,590 --> 00:34:19,820 Nous perdons tous ces octets, et il ya un couple de plats à emporter là-bas. 584 00:34:19,820 --> 00:34:23,080 1, il ya le cas où coin fou si quelqu'un paie beaucoup d'argent 585 00:34:23,080 --> 00:34:25,949 et renomme Mather, nous avons maintenant de changer notre table de base de données entière. 586 00:34:25,949 --> 00:34:29,730 Cela ne va pas arriver souvent, mais Pfoho était autrefois appelé North House il ya 15 ans, 587 00:34:29,730 --> 00:34:32,310 il arrive ainsi. Mais ce n'est pas tout ce que convaincant. 588 00:34:32,310 --> 00:34:36,000 Plus convaincant que un cas comme celui de coin besoin de mettre à jour les données en vrac 589 00:34:36,000 --> 00:34:41,150 pour une base de données est pourquoi êtes-vous stocker MATHER encore et encore et encore et encore? 590 00:34:41,150 --> 00:34:43,020 C'est beaucoup de caractères, 6 chars. 591 00:34:43,020 --> 00:34:45,500 Ne peut-on faire encore mieux que cela, surtout pour Pforzheimer? 592 00:34:45,500 --> 00:34:48,320 Nous pouvons certainement faire mieux que ce que de nombreux personnages. 593 00:34:48,320 --> 00:34:51,790 Pourquoi ne pas associer un identifiant unique à chaque maison 594 00:34:51,790 --> 00:34:55,020 et un magasin que pour chaque utilisateur? Donc, nous allons essayer. 595 00:34:55,020 --> 00:35:00,610 Plutôt que de simplement utiliser la table des étudiants, que je monte à ma base de données exposé ici en haut à gauche. 596 00:35:00,610 --> 00:35:02,600 Remarquez ici il est dit Create table. 597 00:35:02,600 --> 00:35:04,550 Permettez-moi de créer une nouvelle table appelée maisons. 598 00:35:04,550 --> 00:35:08,880 Le nombre de colonnes qui se passe à 2. Entrée. 599 00:35:08,880 --> 00:35:11,200 Maintenant j'ai 2 domaines. 600 00:35:11,200 --> 00:35:14,600 Je vais appeler ce nom, et ça va être un varchar de longueur 255, 601 00:35:14,600 --> 00:35:18,770 >> mais c'est assez arbitraire. Permettez-moi de mettre cela ici par convention. 602 00:35:18,770 --> 00:35:22,840 Donc, mettez une pièce d'identité ici. Donnons chaque maison un identifiant unique. 603 00:35:22,840 --> 00:35:25,360 Donnons chaque maison un nom. 604 00:35:25,360 --> 00:35:30,980 Précisons que l'identifiant sera non signé seulement par convention de n'utiliser que des nombres positifs. 605 00:35:30,980 --> 00:35:35,020 Allons-y et donnez-ce un auto-incrémentation domaine pour l'instant. 606 00:35:35,020 --> 00:35:38,160 Et avons-nous besoin d'autre chose? 607 00:35:38,160 --> 00:35:41,010 Allons-y et cliquez sur Enregistrer. 608 00:35:41,010 --> 00:35:42,480 Maintenant, j'ai un deuxième tableau. 609 00:35:42,480 --> 00:35:45,860 Notez en passant que c'est un peu cryptique la commande SQL 610 00:35:45,860 --> 00:35:50,280 que vous auriez dû taper manuellement si vous n'utilisez pas un outil d'administration comme phpMyAdmin. 611 00:35:50,280 --> 00:35:51,990 Donc, une autre raison pour laquelle nous l'utiliser. 612 00:35:51,990 --> 00:35:55,480 C'est en quelque sorte merveilleusement utile pédagogiquement, car vous pouvez cliquer partout 613 00:35:55,480 --> 00:36:01,050 et de comprendre comment les choses fonctionnent simplement en copiant et collant ce que phpMyAdmin fait. 614 00:36:01,050 --> 00:36:04,150 Mais la commande CREATE TABLE est ce qui vient d'être exécutée, et voici ma table. 615 00:36:04,150 --> 00:36:11,370 Permettez-moi maintenant aller de l'avant et d'utiliser SQL premières plutôt que de simplifier à l'excès en cliquant sur l'onglet Insertion. 616 00:36:11,370 --> 00:36:15,040 Permettez-moi de ne INSERT INTO maisons, 617 00:36:15,040 --> 00:36:22,230 et je vais vous dire le nom de la maison va avoir une valeur de «Mather. 618 00:36:22,230 --> 00:36:24,790 C'est tout. Cette syntaxe est un peu plus cryptique. 619 00:36:24,790 --> 00:36:26,660 C'est le nom des champs que nous voulons insérer. 620 00:36:26,660 --> 00:36:30,390 Ce sont les valeurs que nous voulons insérer dans ces domaines. Permettez-moi cliquez sur OK. 621 00:36:30,390 --> 00:36:34,410 1 ligne insérée en 0,02 secondes. Permettez-moi maintenant cliquez sur Parcourir. 622 00:36:34,410 --> 00:36:42,020 >> Remarquez si je clique sur Parcourir, il ya Mather, dont l'ID est l'automatisation du numéro 1. 623 00:36:42,020 --> 00:36:45,000 Permettez-moi de faire un autre. Laissez-moi aller dans l'onglet SQL. 624 00:36:45,000 --> 00:36:52,950 INSERT INTO maisons. Le nom de la maison va avoir une valeur de Pfoho et ainsi de suite. 625 00:36:52,950 --> 00:36:56,350 Allez. Et je peux continuer comme ça encore et encore et encore. 626 00:36:56,350 --> 00:36:59,470 Ou si vous vous ennuyez en utilisant phpMyAdmin, vous pouvez simplement utiliser l'onglet Insertion 627 00:36:59,470 --> 00:37:01,000 et ne pas avoir à taper le code SQL brut. 628 00:37:01,000 --> 00:37:04,690 Vous pouvez simplement taper plus rapidement en tapant, par exemple, Currier, Entrée, 629 00:37:04,690 --> 00:37:07,610 et maintenant, si nous cliquez sur Parcourir, il ya Currier avec un ID de 3. 630 00:37:07,610 --> 00:37:09,920 C'est donc ce que nous entendons par incrémentation automatique. 631 00:37:09,920 --> 00:37:12,280 Mais maintenant, nous devons réparer quelque chose chez les élèves. 632 00:37:12,280 --> 00:37:16,240 En élèves quel devrait être le type de données du champ de la maison maintenant? 633 00:37:16,240 --> 00:37:19,450 Il doit être un entier, non? 634 00:37:19,450 --> 00:37:23,950 Donc, le but ici est de factoriser, autrement connu comme la normalisation, les tableaux 635 00:37:23,950 --> 00:37:27,940 de sorte que nous ne stocke pas les informations de manière redondante dans l'un de mes tableaux. 636 00:37:27,940 --> 00:37:31,130 Et encore une fois, le chemin que nous étions sur ici va dire Mather, Mather, 637 00:37:31,130 --> 00:37:34,220 Mather, Mather, Pfoho, Pfoho, Pfoho, Pfoho, ce qui est très redondante 638 00:37:34,220 --> 00:37:36,240 en termes de gaspillage des caractères. 639 00:37:36,240 --> 00:37:40,820 Alors laissez-moi aller de l'avant et de le modifier en cliquant sur la structure, 640 00:37:40,820 --> 00:37:44,620 et laissez-moi aller de l'avant et de cocher le domaine maison, cliquez sur Modifier, 641 00:37:44,620 --> 00:37:46,990 et maintenant je vais changer cela soit un int. 642 00:37:46,990 --> 00:37:49,490 255 est plus pertinente. 643 00:37:49,490 --> 00:37:54,010 Permettez-moi aller de l'avant et de dire que c'est très bien si elle est toujours NULL. Enregistrer. 644 00:37:54,010 --> 00:37:55,870 Maintenant, les étudiants de table a été modifiée avec succès, 645 00:37:55,870 --> 00:37:59,090 et remarquez à nouveau la maison est un int. 646 00:37:59,090 --> 00:38:02,220 Soit dit en passant, ignorer le nombre entre parenthèses quand il s'agit de ints. 647 00:38:02,220 --> 00:38:03,770 >> C'est pour des raisons historiques. 648 00:38:03,770 --> 00:38:06,920 Retour dans la journée quand vous n'avez pas de GUI, vous place avait un environnement de ligne de commande, 649 00:38:06,920 --> 00:38:11,580 les 10 et 11 respectivement spécifiés le nombre de caractères que vous devriez montrer 650 00:38:11,580 --> 00:38:13,950 dans la fenêtre de terminal pour effectivement afficher des champs. 651 00:38:13,950 --> 00:38:19,150 Cela n'a rien à voir avec la longueur en bits du champ réel, donc nous allons simplement ignorer pour l'instant. 652 00:38:19,150 --> 00:38:20,990 Maintenant, je dois aller dans ce tableau. 653 00:38:20,990 --> 00:38:24,610 Et si David vit à Mather, maison ne doit pas être égal à 0, 654 00:38:24,610 --> 00:38:27,350 qui est une valeur int par défaut le plus proche de la valeur NULL. 655 00:38:27,350 --> 00:38:29,810 Il doit vivre dans la maison 1. 656 00:38:29,810 --> 00:38:36,870 Nous allons arbitrairement que la vie de Mike dans Pfoho, de sorte que le numéro de maison 2. 657 00:38:36,870 --> 00:38:40,160 Maintenant, ma table est un peu plus cryptique. 658 00:38:40,160 --> 00:38:41,960 Mais considérer l'efficacité. 659 00:38:41,960 --> 00:38:44,860 Je suis maintenant en utilisant seulement 32 bits pour identifier la maison, 660 00:38:44,860 --> 00:38:49,530 ce qui signifie qu'il ya seulement 1 définition canonique de ma maison Mather et Pfoho 661 00:38:49,530 --> 00:38:52,090 et c'est dans le tableau maisons. 662 00:38:52,090 --> 00:38:55,880 Donc, si je veux maintenant rejoindre ces tableaux, pensez-y de cette façon. 663 00:38:55,880 --> 00:39:01,980 Ici, j'ai ma table des étudiants, et sur le côté droit, il ya ces chiffres, 1 et 2. 664 00:39:01,980 --> 00:39:04,180 1 est Mather, 2 est Pfoho. 665 00:39:04,180 --> 00:39:08,580 Nous avons ces mêmes chiffres de ce tableau d'autre part, que l'on appelle des maisons, 666 00:39:08,580 --> 00:39:11,020 1 et 2 et 3 pour les 3 maisons. 667 00:39:11,020 --> 00:39:14,990 Ce que nous voulons faire, c'est avoir la capacité dans le code, PHP et SQL, 668 00:39:14,990 --> 00:39:18,800 pour trier ces tableaux de rejoindre, où si ce sont les étudiants et ceux-ci sont les maisons, 669 00:39:18,800 --> 00:39:22,050 nous voulons en quelque sorte les combiner afin que des lignes 1 avec 1, 670 00:39:22,050 --> 00:39:25,670 2 lignes allant de 2, et ainsi que nous pouvons comprendre où David 671 00:39:25,670 --> 00:39:28,000 et où Mike et où tout le monde vit. 672 00:39:28,000 --> 00:39:31,850 Pour ce faire, nous pouvons exécuter une requête SQL comme suit. 673 00:39:31,850 --> 00:39:40,470 SELECT * FROM élèves REJOIGNEZ-NOUS SUR maisons - 674 00:39:40,470 --> 00:39:43,000 Et maintenant quels domaines voulons-nous rejoindre sur? 675 00:39:43,000 --> 00:39:49,520 Donc students.house = houses.id. 676 00:39:49,520 --> 00:39:54,150 >> Un peu cryptique, mais cette partie signifie littéralement créer une nouvelle table temporaire 677 00:39:54,150 --> 00:39:56,690 c'est le résultat de rejoindre les étudiants et les maisons. 678 00:39:56,690 --> 00:40:00,340 Et comment voulez-vous combiner le bout de mes doigts ici? 679 00:40:00,340 --> 00:40:05,280 Réglez «terrain maison à la hauteur des maisons« champ ID étudiants. 680 00:40:05,280 --> 00:40:10,220 Et si j'ai maintenant cliquez sur OK, je serai de retour exactement ce que j'espérais. 681 00:40:10,220 --> 00:40:15,890 David est à Mather, Mike est en Pfoho, et je vois aussi les identifiants uniques. 682 00:40:15,890 --> 00:40:18,640 Mais le fait est maintenant, j'ai un tableau complet. 683 00:40:18,640 --> 00:40:23,020 Et donc l'emporter ici pour pset 7 ou vraiment pour le projet final: 684 00:40:23,020 --> 00:40:25,830 Si vous trouvez que vous stockez toute information redondante, 685 00:40:25,830 --> 00:40:28,850 qu'il s'agisse d'une maison, c'est peut-être une ville, d'état et ZIP 686 00:40:28,850 --> 00:40:32,050 où ZIP peuvent généralement, mais pas toujours être utilisé comme un identifiant unique, 687 00:40:32,050 --> 00:40:35,810 passent par l'exercice mental et ensuite avec quelque chose comme phpMyAdmin 688 00:40:35,810 --> 00:40:40,660 de l'affacturage sur ces données courantes car d'autant plus que le site web attire plus bien utilisé 689 00:40:40,660 --> 00:40:45,440 en plus populaire, c'est comment vous assurez-vous que tout est super rapide, 690 00:40:45,440 --> 00:40:51,930 en donnant à la base de données que de nombreux indices quant à l'unicité que possible. 691 00:40:51,930 --> 00:40:53,860 C'était beaucoup. 692 00:40:53,860 --> 00:40:59,010 Des questions? Très bien. Prenons une pause de 5 minutes de là et se regrouper. 693 00:41:01,600 --> 00:41:03,540 Très bien. 694 00:41:03,540 --> 00:41:08,680 Ce qui suit est un exemple qui a été utilisé il ya quelques années quand j'ai pris CS161, 695 00:41:08,680 --> 00:41:10,960 qui est la classe des systèmes d'exploitation au collège 696 00:41:10,960 --> 00:41:15,160 qui est connu pour être incroyable, mais une quantité folle de travail, 697 00:41:15,160 --> 00:41:19,810 et il se concentre vraiment sur certains des problèmes de bas niveau qui se posent dans les systèmes d'exploitation 698 00:41:19,810 --> 00:41:22,700 et aussi même dans le monde des bases de données. 699 00:41:22,700 --> 00:41:27,040 >> L'histoire qui a été racontée par mon professeur, Margo Seltzer, cette année a été la suivante. 700 00:41:27,040 --> 00:41:30,990 Supposons que vous avez un dortoir frigo peu pour vous et votre colocataire 701 00:41:30,990 --> 00:41:34,030 et tous les deux vous aimez vraiment le lait. 702 00:41:34,030 --> 00:41:36,360 Alors vous rentrez chez vous classe un jour, votre colocataire n'est pas encore là, 703 00:41:36,360 --> 00:41:39,650 vous ouvrez le frigo, et vous vous rendez compte, "Oh putain, on n'a plus de lait." 704 00:41:39,650 --> 00:41:42,070 Donc, vous fermez le frigo, vous marchez dans la rue à CVS 705 00:41:42,070 --> 00:41:45,830 et obtenir des lignes plus longues pour acheter du lait au CVS. 706 00:41:45,830 --> 00:41:48,470 Pendant ce temps, votre colocataire rentre de sa classe, 707 00:41:48,470 --> 00:41:51,690 entre dans la pièce, ouvre le frigo vraiment vouloir un peu de lait, 708 00:41:51,690 --> 00:41:54,130 ouvre le frigo et, "Merde, pas de lait." 709 00:41:54,130 --> 00:41:57,890 Alors, il ou elle ferme le frigo, sort par la porte, et va à ABP 710 00:41:57,890 --> 00:42:00,910 ou quelque part d'autre que CVS où vous n'allez pas cogner les uns les autres 711 00:42:00,910 --> 00:42:02,790 pour aller chercher du lait. 712 00:42:02,790 --> 00:42:04,820 Bien sûr, quelques minutes plus tard, deux d'entre vous rentrer à la maison 713 00:42:04,820 --> 00:42:07,740 et maintenant vous avez deux fois plus de lait que vous avez réellement envie. 714 00:42:07,740 --> 00:42:10,670 Et étant le lait, maintenant ça va aller mal parce que vous aimez le lait 715 00:42:10,670 --> 00:42:14,200 mais vous n'avez pas vraiment comme le lait, alors maintenant vous avez trop de lait, donc ça va se dégrader. 716 00:42:14,200 --> 00:42:16,830 Il s'agit d'une terrible, terrible situation. 717 00:42:16,830 --> 00:42:22,920 Ce qui aurait pu résoudre cette situation si vous étiez la maison colocataire premier? Oui. 718 00:42:22,920 --> 00:42:25,970 [L'élève] Vous devriez avoir laissé une note. [Rires] 719 00:42:25,970 --> 00:42:28,090 Bon. Vous devriez avoir laissé une note. 720 00:42:28,090 --> 00:42:32,320 Tu aurais dû mettre une note Post-it ou autre en disant: "Autant en emporte le lait», 721 00:42:32,320 --> 00:42:36,830 puis votre colocataire conceptuellement aurait été en lock-out de faire effectivement cela. 722 00:42:36,830 --> 00:42:38,010 Ou vous pouvez aller 1 peu plus loin. 723 00:42:38,010 --> 00:42:41,060 Vous pouvez littéralement verrouiller le réfrigérateur avec une sorte de cadenas, 724 00:42:41,060 --> 00:42:44,870 et maintenant votre colocataire va littéralement être en lock-out du réfrigérateur. 725 00:42:44,870 --> 00:42:48,520 Si nous généralisons revenir à la programmation, 726 00:42:48,520 --> 00:42:51,610 vous pouvez presque penser au réfrigérateur comme une sorte de variable ou une structure, 727 00:42:51,610 --> 00:42:53,500 une sorte de conteneur pour les informations. 728 00:42:53,500 --> 00:42:58,290 Le problème fondamental est ici que deux d'entre vous ont été autorisés à inspecter 729 00:42:58,290 --> 00:43:02,370 ou de lire l'état de cette structure de données, 730 00:43:02,370 --> 00:43:08,050 mais vous l'avez vu à différents moments et pourtant tous les deux d'entre vous a pris une décision 731 00:43:08,050 --> 00:43:11,920 basées sur l'état du monde à ces différents moments dans le temps. 732 00:43:11,920 --> 00:43:15,570 Donc, si vous aviez verrouillé le réfrigérateur, vous auriez au moins évité votre colocataire 733 00:43:15,570 --> 00:43:19,070 d'avoir été en mesure d'inspecter l'état du monde, 734 00:43:19,070 --> 00:43:22,530 afin qu'il ou elle n'aurait pas pu faire la même décision. 735 00:43:22,530 --> 00:43:25,780 Ainsi, les bases de données, comme il s'avère, ce problème constamment. 736 00:43:25,780 --> 00:43:31,050 >> Voyons voir si nous pouvons construire un scénario. 737 00:43:31,050 --> 00:43:34,310 Supposons que vous êtes en quelque sorte un mauvais gars et vous allez à la Bank of America 738 00:43:34,310 --> 00:43:37,950 ou l'un des autres endroits dans le carré ayant un côté quelques distributeurs automatiques de billets à côte, 739 00:43:37,950 --> 00:43:41,200 et pourtant vous avez compris comment dupliquer une carte de guichet automatique - pas si difficile. 740 00:43:41,200 --> 00:43:42,730 C'est juste une bande magnétique. 741 00:43:42,730 --> 00:43:45,180 Et si ce que vous voulez essayer de faire, c'est de jouer à ce jeu 742 00:43:45,180 --> 00:43:49,060 par lequel vous mettez 1 carte dans 1 machine, une autre carte dans la machine d'autre part, 743 00:43:49,060 --> 00:43:51,980 et vous voulez essentiellement d'essayer de retirer de l'argent en même temps, 744 00:43:51,980 --> 00:43:54,930 parce imaginer que l'histoire se déroule comme suit. 745 00:43:54,930 --> 00:43:57,350 La machine prend sur la gauche de votre carte et votre NIP, 746 00:43:57,350 --> 00:44:00,240 et puis vous dites: «Donnez-moi 100 $." 747 00:44:00,240 --> 00:44:04,790 L'ATM est programmé pour d'abord faire une sélection sur la base de données ou l'équivalent - 748 00:44:04,790 --> 00:44:10,780 quelle que soit la base de données qu'il utilise - pour voir ce que cela utilisateur disposer d'au moins 100 $ dans son compte? 749 00:44:10,780 --> 00:44:16,180 Si oui, alors cracher la somme de 100 100 $ et de soustraire de leur équilibre. 750 00:44:16,180 --> 00:44:20,470 Mais bien sûr, si il ya plusieurs machines ici ou multiples façons de l'inspection 751 00:44:20,470 --> 00:44:23,560 l'état de ce monde, le coffre de banque, de voir combien d'argent vous avez, 752 00:44:23,560 --> 00:44:26,780 Supposons que par hasard l'appareil sur la gauche et la droite 753 00:44:26,780 --> 00:44:30,140 à la fois poser cette question à peu près au même moment dans le temps. 754 00:44:30,140 --> 00:44:34,160 >> Et cela peut certainement se produire. Les guichets automatiques sont les ordinateurs de nos jours. 755 00:44:34,160 --> 00:44:37,670 Donc, si l'appareil sur la gauche dit: «Oui, vous avez au moins 100 $», 756 00:44:37,670 --> 00:44:42,150 Pendant ce temps l'appareil sur la droite dit: «Oui, vous avez au moins 100 $», 757 00:44:42,150 --> 00:44:47,420 puis deux d'entre eux procèdent à terminer leur programme et fait cracher les 100 $ 758 00:44:47,420 --> 00:44:50,820 et dire: «Auparavant, il fallait 200 $." 759 00:44:50,820 --> 00:44:54,890 "Permettez-moi de mettre à jour la variable d'aujourd'hui à 100 $ dans le compte." 760 00:44:54,890 --> 00:44:58,780 Mais si les deux d'entre eux ont vérifié le solde de votre compte et constaté que c'est 200 $ 761 00:44:58,780 --> 00:45:02,000 et deux d'entre eux, puis faites le calcul et disons 200 - 100, 762 00:45:02,000 --> 00:45:06,990 les machines ont potentiellement cracher deux projets de loi de 100 $ dans chaque machine, 763 00:45:06,990 --> 00:45:11,360 mais ils ont seulement mis à jour le solde de votre compte à la somme de 100 $. 764 00:45:11,360 --> 00:45:15,130 En d'autres termes, vous avez pris 200 $, mais parce qu'ils inspecté l'état du monde 765 00:45:15,130 --> 00:45:18,840 en même temps, puis a pris une décision basée sur cette valeur, 766 00:45:18,840 --> 00:45:21,930 ils ne pourraient pas faire le calcul en fin de compte correctement. 767 00:45:21,930 --> 00:45:25,520 Ainsi, dans une situation trop banque vous voulez vraiment avoir une sorte de lock-out 768 00:45:25,520 --> 00:45:28,450 de sorte que dès que vous avez vérifié l'état d'une variable 769 00:45:28,450 --> 00:45:31,220 qui est vraiment important, comme le solde de votre compte, 770 00:45:31,220 --> 00:45:36,070 ne laissez personne d'autre prendre des décisions basées sur ce que vous avez fini de faire votre truc, 771 00:45:36,070 --> 00:45:38,920 où dans ce cas vous êtes le guichet automatique sur la gauche. 772 00:45:38,920 --> 00:45:41,160 Verrouiller tout le monde dehors. 773 00:45:41,160 --> 00:45:44,650 Vous pouvez réellement obtenir cet effet dans un couple de différentes manières. 774 00:45:44,650 --> 00:45:48,660 >> La façon la plus simple de MySQL est une ligne de SQL que nous vous avons 775 00:45:48,660 --> 00:45:52,030 dans la spécification ensemble de problèmes qui ressemble exactement à cela. 776 00:45:52,030 --> 00:45:57,420 Insérez-la dans le tableau - quelque chose comme ça - un identifiant, un symbole, et une part, un certain nombre d'actions, 777 00:45:57,420 --> 00:45:59,660 les valeurs suivantes, par exemple. 778 00:45:59,660 --> 00:46:03,370 Si vous n'avez pas lu la spec encore, il s'agit d'un exemple concernant la façon allez-vous 779 00:46:03,370 --> 00:46:07,340 achat de 10 actions de cette penny stock pour le président Skroob, 780 00:46:07,340 --> 00:46:10,340 ID utilisateur dont se trouve être le numéro 7? 781 00:46:10,340 --> 00:46:14,070 Ceci dit INSERT INTO table ci-dessous l'identifiant, le symbole et le nombre d'actions 782 00:46:14,070 --> 00:46:18,200 de 7 ", DVN.V ', et 10. 783 00:46:18,200 --> 00:46:21,510 Mais - mais, mais, mais - la deuxième ligne est la plus importante. 784 00:46:21,510 --> 00:46:26,310 ON DUPLICATE KEY UPDATE = part en titres + VALUES (actions). 785 00:46:26,310 --> 00:46:28,350 Donc totalement cryptique prospectifs au premier coup d'œil. 786 00:46:28,350 --> 00:46:31,990 Mais le fait que cette requête SQL, même si elle s'enroule sur 2 lignes, 787 00:46:31,990 --> 00:46:35,920 est de 1 requête longue, cela signifie qu'il est atomique 788 00:46:35,920 --> 00:46:41,000 en ce sens que cette requête va être exécutée avec ou tous ensemble ou pas du tout. 789 00:46:41,000 --> 00:46:45,100 Et par définition de MySQL, c'est la façon dont ils mis en œuvre cette requête. 790 00:46:45,100 --> 00:46:51,010 Il est, par définition, dans le manuel de garantie pour exécuter une seule fois ou pas du tout. 791 00:46:51,010 --> 00:46:54,020 La motivation pour cela est la suivante. 792 00:46:54,020 --> 00:46:58,540 Si, dans ce cas, vous essayez d'acheter 10 actions de stock, 793 00:46:58,540 --> 00:47:02,260 c'est un peu la même histoire que le lait, c'est un peu la même histoire que l'ATM. 794 00:47:02,260 --> 00:47:04,970 >> Si vous faites l'erreur de ne pas utiliser cette syntaxe 795 00:47:04,970 --> 00:47:09,610 mais au lieu de sélectionner à partir de la base de données pour voir combien de parts de cette penny stock 796 00:47:09,610 --> 00:47:13,750 Selon le président Skroob avoir, et suppose qu'il dispose de 10 actions, 797 00:47:13,750 --> 00:47:19,330 et puis certains fraction de seconde plus tard, vous effectuez une instruction UPDATE, 798 00:47:19,330 --> 00:47:24,810 qui est une autre déclaration SQL qui dit aller de l'avant et ajouter 10 plus d'actions 799 00:47:24,810 --> 00:47:28,700 à sa 10 Courant de sorte que, idéalement, le total est de 20, 800 00:47:28,700 --> 00:47:33,490 le problème est que dans les systèmes de bases de données d'aujourd'hui et parce que dans les ordinateurs d'aujourd'hui 801 00:47:33,490 --> 00:47:35,990 vous avez plusieurs processeurs, noyaux multiples - 802 00:47:35,990 --> 00:47:38,920 en d'autres termes, les ordinateurs peuvent littéralement faire plusieurs choses à la fois - 803 00:47:38,920 --> 00:47:44,270 il n'ya aucune garantie que votre SELECT et UPDATE votre dans ce cas, 804 00:47:44,270 --> 00:47:46,150 vont se produire dos à dos. 805 00:47:46,150 --> 00:47:49,140 Ainsi, un mauvais scénario serait que vous faites la commande SELECT 806 00:47:49,140 --> 00:47:51,670 pour voir combien de parts de cette penny stock ne Skroob ont, 807 00:47:51,670 --> 00:47:54,710 et puis un peu par hasard une autre requête de base de données est exécuté - 808 00:47:54,710 --> 00:47:57,740 peut-être son Skroob dans une autre fenêtre du navigateur essayer d'acheter 10 parts 809 00:47:57,740 --> 00:48:00,700 dans une autre fenêtre tout à fait, un peu comme l'ATM - 810 00:48:00,700 --> 00:48:05,410 et supposons qu'une autre requête obtient entre SELECT et UPDATE. 811 00:48:05,410 --> 00:48:10,210 Ce pourrait être le cas que Skroob perd maintenant un certain nombre d'actions 812 00:48:10,210 --> 00:48:14,340 car un autre processus d'inspecter l'état de son monde, 813 00:48:14,340 --> 00:48:17,800 ou il obtient plus d'actions qu'il devrait avoir. 814 00:48:17,800 --> 00:48:23,250 Nous n'entrerons pas dans les détails de exactement ce que ces lignes de l'histoire particulière serait, 815 00:48:23,250 --> 00:48:28,380 mais le fait est que si vous devez vérifier la valeur des variables et ensuite prendre une décision, 816 00:48:28,380 --> 00:48:32,500 s'il ya un risque que quelqu'un d'autre le faire entre ces 2 états, 817 00:48:32,500 --> 00:48:36,220 comme cela peut arriver dans les systèmes multiprocesseurs, dans les systèmes multicœurs, 818 00:48:36,220 --> 00:48:41,220 ordinateurs avec la capacité de faire plusieurs choses à la fois, de mauvaises choses peuvent arriver 819 00:48:41,220 --> 00:48:44,530 comptes bancaires comme étant débité à tort, d'acheter du lait deux fois plus, 820 00:48:44,530 --> 00:48:46,730 ou dans ce cas le nombre d'actions mauvais. 821 00:48:46,730 --> 00:48:48,370 Mais il ya un moyen plus facile de penser à ce sujet. 822 00:48:48,370 --> 00:48:53,290 >> Il s'avère que SQL prend en charge également, si vous configurez votre table correctement, 823 00:48:53,290 --> 00:48:56,920 quelque chose qui s'appelle les transactions, ce qui à mon avis est en réalité encore plus facile à comprendre 824 00:48:56,920 --> 00:49:00,650 que cela, mais ce n'est pas un 1-liner, il est donc en réalité un peu plus compliqué. 825 00:49:00,650 --> 00:49:04,960 Il est littéralement une déclaration dans SQL appelé START TRANSACTION. 826 00:49:04,960 --> 00:49:08,300 Tout comme il ya SELECT, UPDATE, INSERT, DELETE et JOIN et un tas d'autres, 827 00:49:08,300 --> 00:49:10,970 il ya des mots clés comme START TRANSACTION. 828 00:49:10,970 --> 00:49:13,560 Et puis ce que vous faites dans le cadre de pset 7 - 829 00:49:13,560 --> 00:49:17,270 vous n'avez pas à le faire pour pset 7; il est explicitement nié que pas nécessaire, 830 00:49:17,270 --> 00:49:18,830 mais pour des projets finaux, il peut être utile - 831 00:49:18,830 --> 00:49:22,820 si vous appelez une requête de START TRANSACTION, puis une autre requête 832 00:49:22,820 --> 00:49:25,620 et puis une autre, puis une autre requête, un autre, et un autre, 833 00:49:25,620 --> 00:49:31,860 ces requêtes ne sera pas réellement exécutée jusqu'à ce que vous appelez l'instruction SQL COMMIT, 834 00:49:31,860 --> 00:49:37,220 à ce moment, que ce soit 2 déclarations ou 20 états, ils seront tous exécutés à la fois, 835 00:49:37,220 --> 00:49:42,770 ce qui signifie que personne ne peut acheter accidentellement trop de lait ou de débit trop d'argent 836 00:49:42,770 --> 00:49:46,340 ou acheter des actions de trop nombreux parce que toutes vos requêtes exécutera 837 00:49:46,340 --> 00:49:48,410 dos à dos à dos à dos. 838 00:49:48,410 --> 00:49:51,580 Et c'est super important, surtout quand vous faites quelque chose comme ça. 839 00:49:51,580 --> 00:49:54,900 Ceci est un exemple arbitraire qui dit mettons à jour le compte bancaire 840 00:49:54,900 --> 00:50:00,200 en établissant un équilibre égal au solde - 1000 $ si le numéro de compte est de 2. 841 00:50:00,200 --> 00:50:04,260 Et puis la seconde déclaration est maintenant, nous allons déposer que $ 1000 842 00:50:04,260 --> 00:50:07,310 en quelqu'un d'autre compte bancaire dont le numéro de compte est de 1. 843 00:50:07,310 --> 00:50:10,400 >> En d'autres termes, il s'agit d'un parfait exemple de l'endroit où vous voulez vous assurer que 844 00:50:10,400 --> 00:50:13,590 que ces deux déclarations se produire ou pas du tout 845 00:50:13,590 --> 00:50:15,450 parce que sinon, le client va se faire défoncer 846 00:50:15,450 --> 00:50:17,670 et vous allez prendre leur argent et de ne pas déposer ailleurs, 847 00:50:17,670 --> 00:50:20,470 ou la banque va se faire défoncer où vous allez déposer l'argent 848 00:50:20,470 --> 00:50:23,140 mais pas réellement soustraire du compte de l'utilisateur. 849 00:50:23,140 --> 00:50:25,810 Donc, vous voulez tous les deux pour exécuter ensemble. 850 00:50:25,810 --> 00:50:29,140 Entre ainsi dans les transactions mondiales. 851 00:50:29,140 --> 00:50:31,360 Donc, c'est quelque chose à garder à l'arrière de votre esprit, 852 00:50:31,360 --> 00:50:34,710 non pas tant pour les besoins de tout un projet final, 853 00:50:34,710 --> 00:50:36,700 mais si vous voulez prendre votre projet final quelque part, 854 00:50:36,700 --> 00:50:39,040 si vous voulez faire démarrer une entreprise autour d'elle, 855 00:50:39,040 --> 00:50:41,270 si vous voulez résoudre le problème de certains groupes étudiants sur le campus 856 00:50:41,270 --> 00:50:45,210 et effectivement avoir un live, site actif, ce sont le genre de bugs subtils qui peuvent survenir 857 00:50:45,210 --> 00:50:49,480 si vous n'avez pas tout à fait réfléchir à ce qui peut arriver si 2 personnes 858 00:50:49,480 --> 00:50:54,190 essayez d'accéder à votre site Web à littéralement au même moment dans le temps, 859 00:50:54,190 --> 00:50:56,890 où leurs requêtes pourraient autrement être imbriqués. 860 00:50:58,840 --> 00:51:01,420 >> Prêt pour un peu de JavaScript, un teaser de celui-ci? 861 00:51:01,420 --> 00:51:04,320 Il s'agit de notre dernière langue pour le semestre. Très bien. 862 00:51:04,320 --> 00:51:09,940 Heureusement, JavaScript semble très, très, très semblable aux 2 langues, C et PHP, 863 00:51:09,940 --> 00:51:11,140 nous avons fait jusqu'à présent. 864 00:51:11,140 --> 00:51:14,340 Il n'y a pas d'activer JavaScript pset 7, mais c'est un outil incroyablement utile 865 00:51:14,340 --> 00:51:18,840 quand il s'agit de faire des projets sur Internet finales ou vraiment juste la programmation web en général. 866 00:51:18,840 --> 00:51:20,950 Ainsi, un rapide aperçu de ce qu'on appelle DOM. 867 00:51:20,950 --> 00:51:23,600 Voici une page web super simple qui a vraiment dit juste bonjour, monde 868 00:51:23,600 --> 00:51:25,970 à la fois dans le titre et dans le corps. 869 00:51:25,970 --> 00:51:29,270 Comme l'indentation a laissé entendre pendant un certain temps, 870 00:51:29,270 --> 00:51:31,380 il ya en effet une hiérarchie de pages Web. 871 00:51:31,380 --> 00:51:34,220 Je pourrais faire ce bout de code HTML que même un arbre, 872 00:51:34,220 --> 00:51:37,470 en repensant à nos discussions sur les structures de données en C, comme suit. 873 00:51:37,470 --> 00:51:40,710 J'ai un nœud racine spécial appelé le nœud du document, 874 00:51:40,710 --> 00:51:43,650 et nous verrons l'analogue de ce en JavaScript dans un instant. 875 00:51:43,650 --> 00:51:48,330 Le premier enfant et fille unique de ce que dans ce cas est la balise HTML. 876 00:51:48,330 --> 00:51:49,880 Il n'y a pas de mappage direct du doctype. 877 00:51:49,880 --> 00:51:53,170 C'est quelque chose de spécial, donc nous devrions simplement l'ignorer quand il s'agit de ce DOM, 878 00:51:53,170 --> 00:51:55,810 cet arbre Document Object Model. 879 00:51:55,810 --> 00:51:59,530 Notez que la balise HTML, que j'ai représenté arbitrairement comme un rectangle, 880 00:51:59,530 --> 00:52:02,890 a 2 enfants: la tête et le corps. 881 00:52:02,890 --> 00:52:04,840 >> Ceux-ci sont même établis sous forme de rectangles. 882 00:52:04,840 --> 00:52:08,970 Il est utile que la tête est imagée à la gauche du corps. 883 00:52:08,970 --> 00:52:11,960 L'implication est que la tête vient en premier dans l'arbre. 884 00:52:11,960 --> 00:52:14,910 Donc, il ya en fait une commande à un arbre quand vous le dessiner comme ça, 885 00:52:14,910 --> 00:52:17,460 même si les formes et autres joyeusetés sont arbitraires. 886 00:52:17,460 --> 00:52:20,360 Tête a quant à lui un enfant unique appelé titre, 887 00:52:20,360 --> 00:52:25,170 et le titre a fait son propre enfant, ce qui est "bonjour tout le monde", 888 00:52:25,170 --> 00:52:32,210 que j'ai délibérément attiré comme un ovale ici pour la rendre légèrement différent du rectangle. 889 00:52:32,210 --> 00:52:37,420 Ces rectangles sont des éléments, alors bonjour, monde est vraiment un nœud de texte. 890 00:52:37,420 --> 00:52:39,850 C'est donc un nœud de l'arbre, mais c'est un autre type de noeud 891 00:52:39,850 --> 00:52:41,730 si je l'ai dessiné arbitrairement différemment. 892 00:52:41,730 --> 00:52:45,000 Ne même corps ont un enfant appelé bonjour, monde aussi bien, 893 00:52:45,000 --> 00:52:47,910 nœud si différent même si elles sont par coïncidence le même texte, 894 00:52:47,910 --> 00:52:52,100 mais je l'ai dessiné en utilisant la même forme. Alors, qui s'en soucie? 895 00:52:52,100 --> 00:52:56,820 Eh bien, ce qui est bien sur le langage HTML, c'est qu'il ne avoir ce caractère hiérarchique. 896 00:52:56,820 --> 00:53:01,010 Et ce qui est bien à propos de Javascript et en particulier les bibliothèques qui sont disponibles gratuitement 897 00:53:01,010 --> 00:53:07,120 et populaire comme jQuery, vous pouvez naviguer dans l'arborescence de façon étonnamment facile. 898 00:53:07,120 --> 00:53:11,790 Tout les trucs que nous avons fait en C avec des pointeurs et des arbres traversants et récursion sur les nœuds 899 00:53:11,790 --> 00:53:15,300 enfant de gauche à droite à l'enfant, tout d'un coup, nous pouvons trier de prendre pour acquis 900 00:53:15,300 --> 00:53:19,450 comme étant incroyablement enrichissante si elle n'est pas un peu frustrant 901 00:53:19,450 --> 00:53:22,470 mais pas un moyen efficace d'aller sur la programmation. 902 00:53:22,470 --> 00:53:24,470 Ainsi, avec ces langues de niveau supérieur comme JavaScript 903 00:53:24,470 --> 00:53:28,340 nous serons en mesure de naviguer dans cette arborescence beaucoup plus intuitive. 904 00:53:28,340 --> 00:53:30,430 >> Et en effet, la syntaxe va être assez familier. 905 00:53:30,430 --> 00:53:32,950 Si vous n'avez jamais vu avant JavaScript, c'est une référence très agréable 906 00:53:32,950 --> 00:53:35,910 par les gens de Mozilla, les gens qui font de Firefox, 907 00:53:35,910 --> 00:53:38,370 il ne faut n'hésitez pas à parcourir ce que, à votre convenance. 908 00:53:38,370 --> 00:53:41,590 Ce que vous trouverez - et ces lames sont identiques à ce que nous avons utilisé l'autre jour - 909 00:53:41,590 --> 00:53:44,030 De même, principale a disparu. 910 00:53:44,030 --> 00:53:47,010 Ainsi, lorsque vous écrivez un programme en JavaScript, il n'ya pas de fonction principale. 911 00:53:47,010 --> 00:53:48,690 Vous venez de commencer à écrire du code. 912 00:53:48,690 --> 00:53:51,660 Mais une distinction fondamentale entre JavaScript et C et PHP 913 00:53:51,660 --> 00:53:55,890 est que, tandis que C et PHP jusqu'à présent ont été exécutés côté serveur 914 00:53:55,890 --> 00:53:59,180 par l'appareil dans ce cas, ou plus généralement par un serveur, 915 00:53:59,180 --> 00:54:04,270 JavaScript par leur conception est habituellement exécuté par un navigateur. 916 00:54:04,270 --> 00:54:08,440 En d'autres termes, vous pouvez écrire du code JavaScript, comme nous sommes sur le point d', 917 00:54:08,440 --> 00:54:13,080 sur un serveur dans l'appareil, mais vous l'inclure parmi vos pages HTML, entre votre CSS, 918 00:54:13,080 --> 00:54:16,100 parmi vos fichiers GIF et PNG et vos vos images JPEG 919 00:54:16,100 --> 00:54:19,170 de sorte que lorsque l'utilisateur visite votre page Web, si vous utilisez JavaScript, 920 00:54:19,170 --> 00:54:21,770 que le code JavaScript vient du serveur au navigateur, 921 00:54:21,770 --> 00:54:24,540 et c'est le navigateur qui exécute réellement. 922 00:54:24,540 --> 00:54:27,960 Donc, cela a des implications significatives pour la propriété intellectuelle même. 923 00:54:27,960 --> 00:54:32,600 C'est idiot de même penser à protéger votre adresse IP quand il s'agit de code JavaScript 924 00:54:32,600 --> 00:54:37,560 parce que, par nature, de la langue, il est exécuté habituellement côté du navigateur. 925 00:54:37,560 --> 00:54:40,360 >> Vous pouvez le masquer, ce qui signifie que vous pouvez lui donner l'air fou et laid 926 00:54:40,360 --> 00:54:45,400 sans espace, horribles noms de variables, pour rendre plus difficile pour les gens de voler votre IP, 927 00:54:45,400 --> 00:54:48,120 mais l'essentiel est qu'il soit exécuté côté du navigateur. 928 00:54:48,120 --> 00:54:51,790 Même si en tant que côté serveur côté JavaScript peut être utilisé, 929 00:54:51,790 --> 00:54:54,480 le cas d'utilisation le plus courant actuellement est toujours sur le navigateur. 930 00:54:54,480 --> 00:54:59,800 Et voici à quoi il ressemble. Voici un if-else if-else, tout comme C, tout comme PHP. 931 00:54:59,800 --> 00:55:02,420 Voici une expression booléenne lorsque vous "ou" 2 choses ensemble. 932 00:55:02,420 --> 00:55:04,330 C'est à ce moment que vous "et" 2 choses ensemble. 933 00:55:04,330 --> 00:55:08,300 Voici une instruction switch, qui est similaire à PHP 934 00:55:08,300 --> 00:55:10,810 en ce que vous pouvez basculer sur les différents types de valeurs. 935 00:55:10,810 --> 00:55:15,180 Les boucles ont même pour les boucles ici, qui sont structurés de manière identique à ce que nous avons vu auparavant. 936 00:55:15,180 --> 00:55:18,110 Alors que les boucles, nous avons obtenu le faire tout en boucles. 937 00:55:18,110 --> 00:55:20,290 Variables, un tant soit peu différente. 938 00:55:20,290 --> 00:55:24,560 Vous déclarez des variables comme vous le faites en PHP et C, 939 00:55:24,560 --> 00:55:27,860 mais est similaire JavaScript faiblement typé. 940 00:55:27,860 --> 00:55:32,730 Vous ne spécifiez pas int ou float ou une chaîne ou quelque chose comme ça plus souvent. 941 00:55:32,730 --> 00:55:34,240 Vous pouvez spécifier var. 942 00:55:34,240 --> 00:55:38,040 Vous n'avez pas à spécifier var, mais elle a des implications si vous n'aimez pas. 943 00:55:38,040 --> 00:55:42,000 Habituellement, si vous omettez var, vous créez accidentellement une variable globale au lieu de local. 944 00:55:42,000 --> 00:55:46,420 Alors laissez-moi vous proposons presque toujours juste dire var, puis le nom de la variable. 945 00:55:46,420 --> 00:55:48,740 Ce n'est pas un type, c'est juste pour la variable var. 946 00:55:48,740 --> 00:55:52,930 Ce serait un exemple, que ce soit 123 ou "bonjour tout le monde". 947 00:55:52,930 --> 00:55:58,910 Les tableaux sont présents et syntaxiquement similaire à PHP. 948 00:55:58,910 --> 00:56:03,690 Je dirai var numbers puis-je utiliser des crochets à nouveau pour déclarer une variable 949 00:56:03,690 --> 00:56:08,870 dont le type est un tableau qui a ces nombres particuliers à l'séparées par des virgules. 950 00:56:08,870 --> 00:56:11,740 Et puis enfin, c'est le seul qui a l'air vraiment différent. 951 00:56:11,740 --> 00:56:16,700 Rappelons que dans PHP nous avons mis en place un tableau associatif pour un étudiant 952 00:56:16,700 --> 00:56:20,220 comme Zamyla qui pourrait ressembler à ceci, où la variable est appelée étudiant. 953 00:56:20,220 --> 00:56:23,370 Les crochets signifient voici un tableau. 954 00:56:23,370 --> 00:56:28,500 >> Le fait que je ne suis pas en utilisant des indices numériques, mais les chaînes - id, maison, et le nom - 955 00:56:28,500 --> 00:56:30,990 signifie qu'il s'agit d'un tableau associatif, 956 00:56:30,990 --> 00:56:34,490 et ces flèches avec le signe égal et l'équerre 957 00:56:34,490 --> 00:56:37,310 signifie que la clé est "id", la valeur est 1; 958 00:56:37,310 --> 00:56:39,310 la clé est «maison», la valeur est Winthrop House; 959 00:56:39,310 --> 00:56:41,800 la clé est "nom", la valeur est Zamyla Chan. 960 00:56:41,800 --> 00:56:47,110 Donc, il ya 3 touches à l'intérieur de ce tableau associatif, dont chacun a sa propre valeur. 961 00:56:47,110 --> 00:56:52,880 Nous avons vu que dans pset 7, ou vous sera bientôt, en même idée JavaScript, 962 00:56:52,880 --> 00:56:55,220 mais ça va ressembler à ceci. 963 00:56:55,220 --> 00:57:00,070 Alors étudiant var - pas de signe de dollar et aucune mention de type encore mais var - 964 00:57:00,070 --> 00:57:05,860 égal à, puis ouvrez accolades car en JavaScript lorsque vous avez paires clé-valeur, 965 00:57:05,860 --> 00:57:08,900 vous utilisez réellement quelque chose qui s'appelle un objet. 966 00:57:08,900 --> 00:57:13,490 Et ceux d'entre vous qui ne prenez APCS ou similaires souvenez peut-être des objets de Java 967 00:57:13,490 --> 00:57:15,140 ou des langues proches. 968 00:57:15,140 --> 00:57:17,880 JavaScript n'est pas Java, tout d'abord. 969 00:57:17,880 --> 00:57:21,600 C'était quelques années délibérées décision de conception pour faire tomber il ya quelque chose d'autre qui était populaire, 970 00:57:21,600 --> 00:57:25,640 son nom, même si elle n'a aucun rapport fondamental de se Java. 971 00:57:25,640 --> 00:57:31,490 JavaScript a objets, et vous les créer, par voie de la notation accolade. 972 00:57:31,490 --> 00:57:36,710 Objets JavaScript sont à peu près équivalentes aux tableaux associatifs en PHP 973 00:57:36,710 --> 00:57:40,030 quand il s'agit de stocker des données à l'intérieur d'eux. 974 00:57:40,030 --> 00:57:44,100 >> Mais encore plus puissamment en JavaScript peut vous associer très facilement les fonctions 975 00:57:44,100 --> 00:57:48,040 à l'intérieur d'un objet, et si vous pouvez le faire dans d'autres langues, 976 00:57:48,040 --> 00:57:50,040 c'est tout un paradigme commun, comme nous le verrons. 977 00:57:50,040 --> 00:57:54,380 En bref, cet objet représente un étudiant, qui est particulièrement Zamyla, 978 00:57:54,380 --> 00:58:00,380 et il est conceptuellement similaire, juste syntaxiquement différent de cela. 979 00:58:00,380 --> 00:58:03,840 Nous allons en fait utiliser JavaScript dans un fichier. 980 00:58:03,840 --> 00:58:05,570 Il s'avère qu'il ya une balise script. 981 00:58:05,570 --> 00:58:08,180 Nous avons vu une balise style et nous avons vu d'autres balises HTML. 982 00:58:08,180 --> 00:58:11,510 La balise script sera effectivement contenir du code JavaScript. 983 00:58:11,510 --> 00:58:15,500 Laissez-moi aller dans l'appareil où nous avons du code source de pré-faites. 984 00:58:15,500 --> 00:58:18,700 Je ne l'ai pas encore publiée sur le site, mais je vais le faire après la classe. 985 00:58:18,700 --> 00:58:21,770 Ouvrons celui-ci, blink.html. 986 00:58:21,770 --> 00:58:27,560 Retour dans les années 1990, il y avait littéralement une balise HTML appelé la balise blink, 987 00:58:27,560 --> 00:58:30,340 et ce fut une des balises les plus éculés merveilleusement sur Internet 988 00:58:30,340 --> 00:58:36,140 lequel vous souhaitez visiter la page web de style années 1990 et commencer à voir texte clignotant comme celui-ci, 989 00:58:36,140 --> 00:58:39,810 les résultats de la balise marquis, qui avait texte va comme ceci. 990 00:58:39,810 --> 00:58:45,070 Une des rares fois où le monde a effectivement mis d'accord sur un format web standard, 991 00:58:45,070 --> 00:58:48,250 tout le monde à travers le conseil d'administration a tué le tag clin il ya quelques années. 992 00:58:48,250 --> 00:58:52,860 Mais on ne peut le ressusciter avec JavaScript comme une démonstration de la puissance dont vous avez 993 00:58:52,860 --> 00:58:56,660 quand vous pouvez écrire un programme à l'intérieur d'une page web. 994 00:58:56,660 --> 00:59:00,240 D'abord nous allons sauter par-dessus les nouvelles choses et se concentrer uniquement sur l'ancien. 995 00:59:00,240 --> 00:59:01,780 >> Voici les vieux trucs dans cet exemple. 996 00:59:01,780 --> 00:59:06,350 J'ai une balise HTML, une balise de tête, et une balise de titre. 997 00:59:06,350 --> 00:59:11,210 Ensuite, j'ai une balise body ici avec un div, qui est juste un rappel division rectangulaire de la page 998 00:59:11,210 --> 00:59:14,720 que je vous ai donné un identifiant unique arbitrairement des "voeux" à, 999 00:59:14,720 --> 00:59:18,320 juste pour que j'ai une façon de s'y référer de manière unique, qui a un peu de texte très simple: 1000 00:59:18,320 --> 00:59:20,220 bonjour, monde. 1001 00:59:20,220 --> 00:59:23,940 Maintenant, permettez-moi de faire défiler vers le sommet de ce fichier et voir ce qui est nouveau. 1002 00:59:23,940 --> 00:59:27,710 La première chose qui est nouveau, c'est l'appoint de la balise script, 1003 00:59:27,710 --> 00:59:31,280 et à l'intérieur de l'avis de balise script que j'ai déclaré une fonction. 1004 00:59:31,280 --> 00:59:34,610 Pour déclarer une fonction en JavaScript, assez similaire à PHP, 1005 00:59:34,610 --> 00:59:37,930 vous avez littéralement écrire la fonction, le nom de la fonction, les parenthèses, 1006 00:59:37,930 --> 00:59:40,400 et peut-être quelques arguments si elle prend tout. 1007 00:59:40,400 --> 00:59:43,510 Ensuite, j'ai obtenu mon accolade comme d'habitude, et maintenant nous avons un peu de code un peu nouvelle, 1008 00:59:43,510 --> 00:59:45,230 mais nous allons voir ce que cela signifie. 1009 00:59:45,230 --> 00:59:48,670 Donc div var, cela signifie juste me donner un div variable appelée. 1010 00:59:48,670 --> 00:59:50,530 J'aurais pu appeler ce truc, mais je voulais qu'elle soit appelée div 1011 00:59:50,530 --> 00:59:52,620 pour des raisons qui seront claires en une seconde. 1012 00:59:52,620 --> 00:59:57,480 Puis il se trouve en JavaScript - et il s'agit du code JavaScript intégré dans ma page web - 1013 00:59:57,480 --> 01:00:01,760 il ya une variable globale spéciale des sortes dites document. 1014 01:00:01,760 --> 01:00:04,780 JavaScript est en fait un langage orienté objet. 1015 01:00:04,780 --> 01:00:07,230 Nous n'allons pas entrer dans les détails dans 50 quant à ce que cela signifie, 1016 01:00:07,230 --> 01:00:11,180 mais pour l'instant sait qu'un objet est à peu près comme un struct. 1017 01:00:11,180 --> 01:00:14,740 Comme nous l'avons vu dans le chemin du retour quand l'un des premiers modules de problèmes 1018 01:00:14,740 --> 01:00:17,150 où nous avons mis beaucoup d'informations dans une structure, 1019 01:00:17,150 --> 01:00:21,330 est similaire documenter une structure spéciale qui vient avec le navigateur, 1020 01:00:21,330 --> 01:00:24,810 est livré avec n'importe quelle page web. Ce n'est pas quelque chose que j'ai créé. 1021 01:00:24,810 --> 01:00:28,210 A l'intérieur de cette structure du document, cependant, vous devez non seulement des données 1022 01:00:28,210 --> 01:00:30,010 mais vous avez également des fonctions. 1023 01:00:30,010 --> 01:00:34,090 >> Et chaque fois que vous avez une fonction à l'intérieur d'une structure, à l'intérieur d'un objet, 1024 01:00:34,090 --> 01:00:36,490 ça s'appelle une méthode. Mais c'est la même chose. 1025 01:00:36,490 --> 01:00:40,110 Une méthode est une fonction qui se trouve juste à être à l'intérieur de quelque chose d'autre. 1026 01:00:40,110 --> 01:00:42,990 Donc, cela signifie que cette variable globale spéciale appelée document de 1027 01:00:42,990 --> 01:00:47,690 a une fonction appelée getElementById qui fait littéralement cela. 1028 01:00:47,690 --> 01:00:52,460 Il vous procurera un élément du DOM, Document Object Model arbre, 1029 01:00:52,460 --> 01:00:55,520 dont l'ID est dans ce cas de voeux. 1030 01:00:55,520 --> 01:00:59,200 En d'autres termes, tout ce temps que nous avons passé sur les structures de données entre en jeu ici. 1031 01:00:59,200 --> 01:01:01,400 Cette image d'un DOM que nous avions il ya un instant, 1032 01:01:01,400 --> 01:01:06,100 même si la page est un peu différent, si j'avais un div dans cette image, 1033 01:01:06,100 --> 01:01:11,180 document.getElementById ce serait revenir à moi serait effectivement un pointeur 1034 01:01:11,180 --> 01:01:15,440 le rectangle dans l'arbre, une référence du rectangle dans l'arborescence. 1035 01:01:15,440 --> 01:01:18,410 Donc, c'est ce que signifie réellement appeler une de ces fonctions. 1036 01:01:18,410 --> 01:01:21,960 Dans ce cas encore, il s'agit d'un div. Ce n'est pas un corps ou d'un titre. 1037 01:01:21,960 --> 01:01:26,480 Voyons donc ce que je puis faire avec cette div maintenant que je l'ai à l'intérieur de ce div variable appelée. 1038 01:01:26,480 --> 01:01:32,580 Il s'avère avec JavaScript, vous avez la possibilité de modifier le CSS de votre page dynamiquement. 1039 01:01:32,580 --> 01:01:39,060 Jusqu'à présent, tous les CSS que nous avons fait, bien que limitée, est en attributs de style, 1040 01:01:39,060 --> 01:01:41,730 ou si d'autre avons-nous mis CSS? 1041 01:01:42,730 --> 01:01:45,810 J'ai un peu gâté celui-là. Dans la balise de style au sommet du fichier. 1042 01:01:45,810 --> 01:01:49,180 Ou la troisième place a été? 1043 01:01:50,710 --> 01:01:54,590 >> Un fichier externe, quelque chose. Css. 1044 01:01:54,590 --> 01:01:56,730 Donc, ce sont les 3 endroits que nous avons fait jusqu'à présent CSS, 1045 01:01:56,730 --> 01:01:59,310 mais le hic, c'est que nous avons codé en dur tout ça. 1046 01:01:59,310 --> 01:02:04,060 Vous avez décidé que vous avez plongé dans pset 7, nous avons décidé avant la leçon que notre CSS serait. 1047 01:02:04,060 --> 01:02:07,380 Mais si vous voulez changer votre CSS, vous pouvez réellement faire 1048 01:02:07,380 --> 01:02:09,370 une fois que vous avez un langage de programmation actuelle. 1049 01:02:09,370 --> 01:02:13,910 CSS, HTML - Langues pas de programmation. Javascript. 1050 01:02:13,910 --> 01:02:18,200 Ainsi, il s'avère que dès que vous avez un de ces rectangles de l'arbre 1051 01:02:18,200 --> 01:02:23,050 appelé le DOM, il a lui-même certaines données à l'intérieur de celui-ci. 1052 01:02:23,050 --> 01:02:27,820 Ainsi, le div que je viens saisi de l'arbre a ce que nous appellerons une propriété à l'intérieur de celui-ci 1053 01:02:27,820 --> 01:02:34,390 appelé le style et la propriété de style a lui-même une propriété appelée visibilité. 1054 01:02:34,390 --> 01:02:37,330 Je sais ce que en recherchant un manuel d'utilisation de CSS. 1055 01:02:37,330 --> 01:02:41,160 Il s'avère qu'il ya une propriété de visibilité CSS qui fait ce qu'il dit. 1056 01:02:41,160 --> 01:02:44,530 Il fait quelque chose de visible ou non, visible ou non. 1057 01:02:44,530 --> 01:02:46,810 Et comment tu fais ça est la suivante. 1058 01:02:46,810 --> 01:02:50,510 Je demande par programme si la visibilité de cet élément div est caché, 1059 01:02:50,510 --> 01:02:53,390 Que dois-je changer pour? Visible. 1060 01:02:53,390 --> 01:02:58,840 Sinon, si la visibilité de cette page n'est pas caché, logiquement je ne le rendre invisible. 1061 01:02:58,840 --> 01:03:04,070 Je n'ai aucune idée pourquoi il est visible et caché et non visible et invisible. 1062 01:03:04,070 --> 01:03:06,000 Ce fut une décision mauvaise conception le long du chemin. 1063 01:03:06,000 --> 01:03:09,530 Mais ceux-ci sont en effet opposés à CSS: visible et cachée. 1064 01:03:09,530 --> 01:03:15,520 Tout cela ne fait que cela veut dire changer le CSS de mon dossier sur et en dehors, sur et en dehors 1065 01:03:15,520 --> 01:03:16,870 pour que div particulier. 1066 01:03:16,870 --> 01:03:20,630 Mais encore une fois, il s'agit d'une fonction appelée clin d'oeil. Lorsque la fonction est appelée clin? 1067 01:03:20,630 --> 01:03:24,080 Il s'avère qu'il ya une autre fenêtre spéciale mondiale variable appelée, 1068 01:03:24,080 --> 01:03:28,220 dans le même esprit de document, mais que le document se réfère à votre page Web, 1069 01:03:28,220 --> 01:03:31,700 comme l'arbre DOM, le code HTML que vous avez envoyé à partir du serveur, 1070 01:03:31,700 --> 01:03:35,250 se réfère à la fenêtre de chrome autour d'elle, la barre d'adresse, la barre de titre, 1071 01:03:35,250 --> 01:03:37,880 et toutes ces choses autour de votre page web. 1072 01:03:37,880 --> 01:03:42,800 >> Et il s'avère que l'objet window possède une fonction spéciale à l'intérieur de celui-ci s'appelle setInterval 1073 01:03:42,800 --> 01:03:44,360 qui fait ce qu'il dit. 1074 01:03:44,360 --> 01:03:48,600 Il établira un intervalle - dans ce cas toutes les 500 millisecondes - 1075 01:03:48,600 --> 01:03:52,270 et, devinez, ce que ça va faire toutes les 500 millisecondes? 1076 01:03:52,270 --> 01:03:55,240 Il va exécuter la fonction qui clignotent. 1077 01:03:55,240 --> 01:03:58,560 Et ce qui est bien ici, c'est que nous aurions pu faire cela en C, même si nous n'avons jamais fait. 1078 01:03:58,560 --> 01:04:01,580 C fait quelque chose qui s'appelle pointeurs de fonction où vous pouvez passer autour fonctions 1079 01:04:01,580 --> 01:04:03,140 comme arguments. 1080 01:04:03,140 --> 01:04:07,620 De même, en JavaScript peut vous passez le nom d'une fonction dans une autre fonction. 1081 01:04:07,620 --> 01:04:10,630 Et remarquez ce que je fais. Je ne fais pas ça. 1082 01:04:10,630 --> 01:04:14,380 Si je mets entre parenthèses après le clignotement, cela voudrait dire appeler la fonction de clignotement. 1083 01:04:14,380 --> 01:04:17,430 Si je les omettre, ce qui signifie ici est la fonction de clignotement 1084 01:04:17,430 --> 01:04:21,330 de sorte que setInterval peut appeler ça toutes les 500 millisecondes. 1085 01:04:21,330 --> 01:04:28,200 Donc le résultat final, atroce soit-elle, est que si je vais dans localhost et aller à blink.html, 1086 01:04:28,200 --> 01:04:32,120 J'ai maintenant ce qui se passe encore et encore. 1087 01:04:32,120 --> 01:04:34,950 Et si je fait inspecter l'élément, nous allons voir si nous pouvons le voir. 1088 01:04:34,950 --> 01:04:38,550 Permettez-moi Inspecter l'élément, permettez-moi de faire défiler vers le bas juste un peu, 1089 01:04:38,550 --> 01:04:44,320 permettez-moi de choisir des éléments plus ici, et notez l'intérieur des DOM inspecteur de Chrome. 1090 01:04:44,320 --> 01:04:48,840 Il est littéralement changer d'avant en arrière toutes les 500 millisecondes. 1091 01:04:48,840 --> 01:04:55,660 Si nous revenons à notre ami Nate, 1092 01:04:55,660 --> 01:05:00,020 si vous jamais demandé comment cela fonctionne, une idée similaire avec un intervalle, 1093 01:05:00,020 --> 01:05:04,810 mais Nate rend en fait une utilisation très efficace de la couleur dans ce cas particulier ici. 1094 01:05:04,810 --> 01:05:07,350 Alors que pouvons-nous réellement faire avec ça? 1095 01:05:07,350 --> 01:05:09,990 Ouvrons un autre exemple et essayer quelque chose 1096 01:05:09,990 --> 01:05:12,940 C'est programmation encore plus utile que de faire clignoter les choses. 1097 01:05:12,940 --> 01:05:17,990 Laissez-moi aller dans notre annuaire formes aujourd'hui et aller dans form0. 1098 01:05:17,990 --> 01:05:20,820 Il s'agissait de la forme plus laide possible que je pouvais venir avec, 1099 01:05:20,820 --> 01:05:23,290 et laissez-moi juste vous montrer à quoi il ressemble dans un navigateur. 1100 01:05:23,290 --> 01:05:28,960 >> Laissez-moi aller dans localhost / formulaires, et c'est form0. 1101 01:05:28,960 --> 01:05:33,400 C'est un super vilain forme HTML qui possède quelques champs pour le courriel, un mot de passe, 1102 01:05:33,400 --> 01:05:37,190 mot de passe, puis une case à cocher peu à accepter certaines conditions. 1103 01:05:37,190 --> 01:05:41,350 Le hic, c'est que je visite ce formulaire et je ne veux pas vous donner mon adresse e-mail, 1104 01:05:41,350 --> 01:05:44,730 Je ne veux pas d'accord avec les termes et conditions peut-être, je peux cliquer sur Enregistrer 1105 01:05:44,730 --> 01:05:46,920 et cela me permet de toute façon. 1106 01:05:46,920 --> 01:05:50,800 Cela arrive de se soumettre à un fichier PHP appelé dump.php stupide. 1107 01:05:50,800 --> 01:05:58,420 Tout ce qu'il fait est d'imprimer le contenu de $ _GET seulement à des fins de diagnostic. 1108 01:05:58,420 --> 01:06:01,580 C'est ce qui a été soumise par l'utilisateur à l'instant. 1109 01:06:01,580 --> 01:06:05,010 Mais supposons que nous voulons effectivement valider la soumission du formulaire de l'utilisateur. 1110 01:06:05,010 --> 01:06:06,530 Laissez-moi aller dans la version 1. 1111 01:06:06,530 --> 01:06:11,420 C'est form1.html. Il semble esthétiquement tout aussi mauvais, mais remarquez comment il est fantaisie. 1112 01:06:11,420 --> 01:06:15,450 Si je clique sur Enregistrer sans coopérer, je me crie dessus. 1113 01:06:15,450 --> 01:06:17,320 "Vous devez fournir votre adresse email." 1114 01:06:17,320 --> 01:06:21,670 Très bien. Alors laissez-moi essayer. Donc malan@harvard.edu. Je n'ai pas besoin d'un mot de passe. 1115 01:06:21,670 --> 01:06:25,100 Inscrivez-vous. "Vous devez fournir un mot de passe." Très bien. 1116 01:06:25,100 --> 01:06:28,470 Donc, je vais donner un mot de passe de pourpre. Inscrivez-vous. 1117 01:06:28,470 --> 01:06:32,300 "Les mots de passe ne correspondent pas." Je dois maintenant entrer ici cramoisi. 1118 01:06:32,300 --> 01:06:35,710 J'ai accidentellement vérifié que. Inscrivez-vous. 1119 01:06:35,710 --> 01:06:39,860 "Vous devez accepter les termes et conditions." Très bien. D'accord là. Inscrivez-vous. 1120 01:06:39,860 --> 01:06:43,700 Et maintenant, il me montre la sortie de diagnostic là-bas. 1121 01:06:43,700 --> 01:06:45,630 >> Alors qu'est-ce qui s'est passé? 1122 01:06:45,630 --> 01:06:48,330 Nous avons eu cette possibilité de valider la soumission de formulaire. 1123 01:06:48,330 --> 01:06:51,420 En fait, si vous ne plongez dans pset 7, il ya une fonction de m'excuser 1124 01:06:51,420 --> 01:06:54,620 qui le rend assez facile de crier à l'utilisateur par un message sur l'écran. 1125 01:06:54,620 --> 01:06:57,580 J'utilise un mécanisme légèrement différent, la fonction d'alerte, 1126 01:06:57,580 --> 01:07:03,690 ce qui n'est pas une fonction qui est sourit car elle rend messages d'utilisateurs très laid. 1127 01:07:03,690 --> 01:07:05,710 Mais attendons de voir ce que je fais ici. 1128 01:07:05,710 --> 01:07:09,620 C'est form1.html, et notez que j'ai un peu de syntaxe assez familier: 1129 01:07:09,620 --> 01:07:12,920 balise body, balise de formulaire, l'attribut action, attribut de méthode. 1130 01:07:12,920 --> 01:07:17,050 Mais remarquez que je vous ai donné ma forme d'un ID unique pour plus de commodité. 1131 01:07:17,050 --> 01:07:19,190 Ensuite, j'ai un champ email dont le type est texte, 1132 01:07:19,190 --> 01:07:23,780 un champ de mot de passe dont le type est champ de confirmation mot de passe, dont le type est le mot de passe 1133 01:07:23,780 --> 01:07:28,070 puis une case à cocher dont le nom est 'accord ici, est de type case à cocher. 1134 01:07:28,070 --> 01:07:30,380 Et puis j'ai un bouton d'envoi. 1135 01:07:30,380 --> 01:07:33,050 Mais remarquez en haut ce que je n'ai plus. 1136 01:07:33,050 --> 01:07:35,810 Tout d'abord, il ya une autre utilisation de la balise script. 1137 01:07:35,810 --> 01:07:40,520 Si vous avez un peu de code JavaScript dans un autre fichier, tout comme avec les CSS, vous pouvez l'inclure. 1138 01:07:40,520 --> 01:07:44,530 Et tu fais ça avec la source du script, puis notez que je me connecte apparemment 1139 01:07:44,530 --> 01:07:50,349 à googleapis.com à un très long chemin, mais dont le nom de fichier se termine par jquery.min 1140 01:07:50,349 --> 01:07:52,420 pour un minimum. js. 1141 01:07:52,420 --> 01:07:55,969 jQuery est une bibliothèque JavaScript pour super populaire qui fait juste JavaScript 1142 01:07:55,969 --> 01:07:58,230 d'autant plus conviviale à utiliser. 1143 01:07:58,230 --> 01:08:00,610 Il est effectivement devenu un standard de facto. 1144 01:08:00,610 --> 01:08:04,090 Ainsi, même si ce que vous allez voir n'est pas pur JavaScript soi, 1145 01:08:04,090 --> 01:08:09,340 il s'agit d'une bibliothèque au-dessus de JavaScript un peu comme la bibliothèque CS50 est une couche 1146 01:08:09,340 --> 01:08:13,670 au-dessus du code de bas niveau C, la réalité est presque tout le monde sur Internet qu'il utilise. 1147 01:08:13,670 --> 01:08:18,030 Donc, ce ne sont pas des roues de formation. C'est tout simplement le meilleur pratiquer ces jours-ci. 1148 01:08:18,030 --> 01:08:22,830 Maintenant, remarquez ci-dessous qui est ma propre balise script, et remarquez ce que j'ai fait ici. 1149 01:08:22,830 --> 01:08:27,450 Il s'avère que jQuery fait quelque chose d'un peu de fantaisie. 1150 01:08:27,450 --> 01:08:29,660 JavaScript doit signes dollar, mais ils n'ont pas de sens. 1151 01:08:29,660 --> 01:08:32,870 >> Ils sont comme la lettre A, B ou C. 1152 01:08:32,870 --> 01:08:36,670 jQuery a simplement adopté la convention ou sorte de revendiquaient le fait 1153 01:08:36,670 --> 01:08:40,280 que $ sera leur symbole spécial. 1154 01:08:40,280 --> 01:08:44,950 Donc dès que vous chargez ce fichier JavaScript global ici avec la balise script, 1155 01:08:44,950 --> 01:08:49,080 vous avez accès à une variable globale spéciale qui s'appelle $. 1156 01:08:49,080 --> 01:08:53,009 Il est plus correctement appelé jQuery, mais cela ne veut pas l'air aussi sexy que $. 1157 01:08:53,009 --> 01:08:56,250 Mais $ n'a pas de signification particulière. En PHP, il avait une signification particulière. 1158 01:08:56,250 --> 01:08:58,440 Vous avez eu à l'avoir en face d'une variable. 1159 01:08:58,440 --> 01:09:01,670 C'est juste un truc sexy qui ils ont pris. 1160 01:09:01,670 --> 01:09:03,389 Qu'est-ce qui se passe ici? 1161 01:09:03,389 --> 01:09:08,830 Remarquez que je suis de passage à la fonction jQuery mon document de variable globale 1162 01:09:08,830 --> 01:09:10,860 et puis je vais appeler. prêt. 1163 01:09:10,860 --> 01:09:15,480 Que jQuery ne essentiellement est qu'il vous permet de prendre certaines choses JavaScript vanille 1164 01:09:15,480 --> 01:09:17,889 comme l'objet du document, l'objet window, 1165 01:09:17,889 --> 01:09:20,790 et si vous passez à la fonction jQuery - 1166 01:09:20,790 --> 01:09:24,429 et encore une fois, pour être clair, il s'agit d'une fonction appelée jQuery - 1167 01:09:24,429 --> 01:09:28,240 ce qu'il fait est qu'il revient à vous une version spéciale du document 1168 01:09:28,240 --> 01:09:30,700 qui a plus de fonctionnalités qui lui est associée. 1169 01:09:30,700 --> 01:09:34,760 Donc en JavaScript brute, il n'ya pas de fonction prête, 1170 01:09:34,760 --> 01:09:37,810 mais si vous passez document à la fonction jQuery première fois, 1171 01:09:37,810 --> 01:09:40,960 il revient à vous d'une version spéciale de l'objet document 1172 01:09:40,960 --> 01:09:43,030 qui a plus de fonctionnalités de fantaisie. 1173 01:09:43,030 --> 01:09:48,230 Et c'est pourquoi les gens l'aiment. Il rend juste les choses plus faciles à faire, comme nous allons voir. 1174 01:09:48,230 --> 01:09:49,820 Alors qu'est-ce que cette ligne de code signifie? 1175 01:09:49,820 --> 01:09:52,690 Cette ligne de code signifie ici quand le document est prêt - 1176 01:09:52,690 --> 01:09:56,830 en d'autres termes, une fois que le navigateur se fait la lecture de ce fichier en haut en bas - 1177 01:09:56,830 --> 01:09:59,200 aller de l'avant et d'exécuter la fonction suivante. 1178 01:09:59,200 --> 01:10:03,540 Ce qui est vraiment intéressant dans JavaScript - et PHP a aussi - 1179 01:10:03,540 --> 01:10:05,450 est des fonctions anonymes. 1180 01:10:05,450 --> 01:10:10,560 En JavaScript, vous pouvez déclarer des fonctions qui n'ont pas de nom, mais ils ont un corps. 1181 01:10:10,560 --> 01:10:12,570 Remarquez ce qui se passe ici. 1182 01:10:12,570 --> 01:10:16,220 >> Il s'agit d'une fonction appelée prêt, et cela signifie juste faire ce qui suit 1183 01:10:16,220 --> 01:10:20,220 quand toute la page Web est prêt, quand tout a été lu par le serveur. 1184 01:10:20,220 --> 01:10:23,090 Que voulez-vous faire? Je veux exécuter un morceau de code. 1185 01:10:23,090 --> 01:10:27,120 Notez que nous ne voulons pas d'exécuter ce code tout de suite. 1186 01:10:27,120 --> 01:10:34,350 Si j'ai omis ceci, cela signifierait immédiatement commencer à exécuter ces lignes de code. 1187 01:10:34,350 --> 01:10:39,040 Mais le fait que je veux dire, non, non, non, enveloppez-ce dans une fonction anonyme comme ceci 1188 01:10:39,040 --> 01:10:43,000 moyens ne l'exécute pas encore; l'appeler par la suite. 1189 01:10:43,000 --> 01:10:45,430 Nous l'avons vu il ya un moment dans notre exemple de formulaire précédent. 1190 01:10:45,430 --> 01:10:49,990 Quelle est la fonction ne nous appelons par la suite, 500 millisecondes plus tard? Blink. 1191 01:10:49,990 --> 01:10:51,480 Donc, l'idée même. 1192 01:10:51,480 --> 01:10:53,950 Encore une fois, même si cela semble un peu bizarre, il suffit de prendre pour le moment sur la foi 1193 01:10:53,950 --> 01:10:57,060 que de déclarer une fonction anonyme qui a appelé par la suite, 1194 01:10:57,060 --> 01:11:01,720 il suffit d'écrire function () { 1195 01:11:01,720 --> 01:11:05,380 Alors quel est le code que nous allons exécuter la suite? Ce qui suit. 1196 01:11:05,380 --> 01:11:10,460 Cela ressemble un peu trop nouvelle, mais cela signifie, voici la fonction jQuery, 1197 01:11:10,460 --> 01:11:13,430 et c'est maintenant un raccourci. 1198 01:11:13,430 --> 01:11:18,830 Cet extrait de code HTML au bas de l'écran a bien sûr une certaine représentation de l'arbre. 1199 01:11:18,830 --> 01:11:21,730 Ce n'est pas cela. Cette page est plus intéressant que ce bonjour, monde par exemple. 1200 01:11:21,730 --> 01:11:25,210 Mais il ya un arbre qui correspond à ce tableau d'ensemble. 1201 01:11:25,210 --> 01:11:28,910 Ce serait une douleur dans le cou d'avoir à mettre en œuvre une sorte de fonction récursive 1202 01:11:28,910 --> 01:11:34,380 à commencer par le nœud racine, puis trouver le nœud dont l'identifiant est l'enregistrement. 1203 01:11:34,380 --> 01:11:38,340 Alors que jQuery rend très facile pour nous, c'est littéralement ce sujet. 1204 01:11:38,340 --> 01:11:43,000 Allez-y et moi obtenir ce que div ou forme que ce soit, quelle que soit l'élément HTML 1205 01:11:43,000 --> 01:11:45,820 possède un ID d'enregistrement. 1206 01:11:45,820 --> 01:11:52,440 Ceci est équivalent à document.getElementById ("enregistrement"). 1207 01:11:52,440 --> 01:11:54,170 >> Pourquoi les gens comme jQuery? 1208 01:11:54,170 --> 01:12:00,110 Parce que c'est plus court à taper. Mais c'est tout ce qu'il est. C'est la même idée. 1209 01:12:00,110 --> 01:12:02,630 Donne-moi la balise dont l'ID est l'enregistrement. 1210 01:12:02,630 --> 01:12:06,300 Et quand cette étiquette, qui se trouve être une forme, est soumis, 1211 01:12:06,300 --> 01:12:08,300 aller de l'avant et d'exécuter ce code. 1212 01:12:08,300 --> 01:12:11,320 Alors prenons un regard maintenant comment nous faisons la validation du formulaire. 1213 01:12:11,320 --> 01:12:15,950 La syntaxe est certes énigmatique au premier abord, mais ce qui se passe? 1214 01:12:15,950 --> 01:12:21,050 Si cette ligne de code est vrai, je vais crier à l'utilisateur de fournir son adresse e-mail. 1215 01:12:21,050 --> 01:12:22,970 Alors, quelle est cette ligne de code? 1216 01:12:22,970 --> 01:12:25,560 $ Signifie jQuery. Maintenant remarquez ceci. 1217 01:12:25,560 --> 01:12:27,920 C'est un peu comme CSS. 1218 01:12:27,920 --> 01:12:33,370 Si vous avez encore plongé dans CSS, vous savez que cela signifie que l'élément dont l'ID est l'enregistrement. 1219 01:12:33,370 --> 01:12:39,840 L'espace, c'est trouver un enfant ou un descendant de l'enregistrement dont le nom est entré. 1220 01:12:39,840 --> 01:12:42,970 Et puis cette chose entre crochets est un petit filtre. 1221 01:12:42,970 --> 01:12:47,010 Et même si cela semble énigmatique, cela signifie simplement accéder au formulaire d'inscription dont l'ID est, 1222 01:12:47,010 --> 01:12:51,230 aller à l'intérieur de l'élément d'entrée de celui dont le nom est le courrier électronique, 1223 01:12:51,230 --> 01:12:55,440 puis obtenir sa valeur, quelle que soit sa valeur se trouve être - 1224 01:12:55,440 --> 01:12:59,670 asdf si c'est tout ce que j'ai tapé ou malan@harvard.edu si c'est ce que j'ai tapé. 1225 01:12:59,670 --> 01:13:05,250 Donc, si la valeur du champ email du formulaire == rien, crier à l'utilisateur. 1226 01:13:05,250 --> 01:13:09,700 Sinon, si la valeur du champ Mot de passe == rien, crier à l'utilisateur. 1227 01:13:09,700 --> 01:13:19,520 >> Sinon, si la valeur du champ mot de passe n'est pas égale à la valeur du champ de confirmation, 1228 01:13:19,520 --> 01:13:22,850 qui était l'élément autre forme, crier à l'utilisateur. 1229 01:13:22,850 --> 01:13:25,680 Et puis enfin - et celui-ci a aussi une nouvelle syntaxe qui lui est propre, 1230 01:13:25,680 --> 01:13:29,270 mais une fois que vous l'avez vu, il est au moins un peu plus raisonnable - 1231 01:13:29,270 --> 01:13:34,060 else if la forme dont l'ID est l'enregistrement comporte un élément d'entrée dont le nom est l'accord 1232 01:13:34,060 --> 01:13:39,720 et il est vérifié, aller de l'avant et de crier à l'utilisateur. 1233 01:13:39,720 --> 01:13:42,520 Donc, je suis entièrement d'admettre que c'est complètement écrasante au premier abord. 1234 01:13:42,520 --> 01:13:46,530 Il ya beaucoup de nouvelle syntaxe. Mais tout de jQuery suit ces sortes de motifs. 1235 01:13:46,530 --> 01:13:49,880 Et honnêtement, je ne savais même pas existé jusqu'à présent il ya quelques minutes. 1236 01:13:49,880 --> 01:13:53,640 J'ai googlé, "Comment pouvez-vous vérifier si une case est cochée dans jQuery?" 1237 01:13:53,640 --> 01:13:55,680 et c'est la syntaxe, parce qu'il ya différentes façons de le faire 1238 01:13:55,680 --> 01:13:58,010 avec le code JavaScript réelle brut. 1239 01:13:58,010 --> 01:14:01,030 Alors que la première page du 7 Set problème souligne, 1240 01:14:01,030 --> 01:14:04,500 pset 7 est très bien un exercice en soi bootstrap 1241 01:14:04,500 --> 01:14:08,650 où nous avons fourni, nous l'espérons, un cadre conceptuel qui permet de lutter contre le pset. 1242 01:14:08,650 --> 01:14:12,280 >> Mais comme c'est souvent le cas avec le web design, c'est vraiment à vous de fouiller, 1243 01:14:12,280 --> 01:14:16,680 incorporer des bouts de code et des exemples sur le Web aussi longtemps que vous les citer 1244 01:14:16,680 --> 01:14:17,960 selon les modalités que sur la première feuille, 1245 01:14:17,960 --> 01:14:21,460 et de réaliser que l'apprentissage du HTML, CSS, JavaScript et même SQL 1246 01:14:21,460 --> 01:14:26,020 est vraiment destiné à être cet exercice à la maison alors que nous commençons à prendre ces roues d'entraînement hors tension. 1247 01:14:26,020 --> 01:14:29,150 Et se rendre compte aussi, il ya tellement de choses que vous pouvez faire plus avec un navigateur. 1248 01:14:29,150 --> 01:14:33,790 A l'intérieur de la plupart de ces éléments, il ya d'autres choses appelées gestionnaires d'événements. 1249 01:14:33,790 --> 01:14:37,140 Et même si nous avons juste regardé les appelle onsubmit et onReady, 1250 01:14:37,140 --> 01:14:40,310 vous pouvez faire des choses comme onkeydown, onkeyup, 1251 01:14:40,310 --> 01:14:43,410 comme lorsque l'utilisateur touche une touche, vous pouvez écouter et jusqu'à ce que la touche. 1252 01:14:43,410 --> 01:14:45,940 Gmail a des raccourcis clavier. 1253 01:14:45,940 --> 01:14:49,490 Comment Google en œuvre des raccourcis clavier tels que C pour composer? 1254 01:14:49,490 --> 01:14:54,120 Ils écoutent les événements, comme on les appelle, comme onkeypress ou onkeyup et onkeydown. 1255 01:14:54,120 --> 01:14:56,360 Si vous avez déjà plané votre souris sur une option de menu 1256 01:14:56,360 --> 01:15:00,180 et tout d'un coup, voila, un menu s'affiche ou le graphique en couleur des changements, 1257 01:15:00,180 --> 01:15:01,920 comment font-ils cela? 1258 01:15:01,920 --> 01:15:06,940 Plutôt que d'écouter les onReady ou onsubmit, vous écouter pour onmouseover onmouseout ou. 1259 01:15:06,940 --> 01:15:10,920 >> Donc en bref, avec ces bases très simples que nous avons commencé à gratter la surface d'aujourd'hui 1260 01:15:10,920 --> 01:15:13,940 et nous allons plonger dans la suite de ce mercredi, vous avez, en plus, 1261 01:15:13,940 --> 01:15:17,530 pouvoir de mettre en œuvre le genre de choses que vous êtes déjà familier. 1262 01:15:17,530 --> 01:15:21,620 Donc, nous allons terminer là, et nous allons continuer ce mercredi. 1263 01:15:22,690 --> 01:15:24,320 >> [CS50.TV]