[Powered by Google Translate] [Semaine 9] [David J. Malan - Université de Harvard] [C'est CS50. - CS50.TV] Très bien. Bienvenue à nouveau. C'est CS50, et c'est le début de la semaine 9. Aujourd'hui, nous mettons l'accent en particulier sur la conception, non plus dans le contexte de la C mais dans le contexte de PHP et un peu de SQL et un peu de JavaScript, en particulier vers la fin des deux pset 7 et aussi le projet final. En fait, si vous êtes à ce point dans votre projet final où vraisemblablement que d'une heure ou deux il ya au moins vous commencé à réfléchir à votre projet final et que vous pensez que vous aimeriez collaborer avec les camarades de classe 1 ou 2, si vous rencontrez des problèmes de connexion avec ladite camarades de classe, n'hésitez pas à remplir le formulaire à cs50.net/partners/form. Il vous demande juste qui vous êtes, ce type de projet que vous pensez, où vous vivez seulement pour des raisons logistiques. Et puis si vous voulez garder un oeil sur la semaine prochaine ou si l'URL tableur là, vous pouvez alors voir une version en lecture seule de la doc Google dans laquelle nous recueillons ces informations. Donc, si vous voulez travailler avec quelqu'un, par tous les moyens, n'hésitez pas à rejoindre les gens par ce mécanisme. Mais la majorité des gens le faire en solo travaux. C'est tout à fait bien. Il ne faut donc pas l'impression que ce n'est en aucun cas obligatoire. Le vendredi, il n'y avait que moi et quelques-uns de l'équipe ici, théâtre vide la plupart du temps. Il y avait 3 touristes assis là-haut, donc ça a été un peu maladroit. Que nous avons parlé était bases de données et nous avons parlé de pset 7 un peu. Et si vous n'avez pas arriver à attraper ce sur la vidéo pour l'instant, c'est très bien. Je vais essayer de définir les termes que nous aurions autrement prendre pour acquis basée sur la conférence de vendredi. 

Mais aujourd'hui, nous allons essayer de vous faire le point de ne pas juste être capable de faire quelque chose comme 7 pset mais vraiment comprendre ce qui se passe sous le capot, en particulier certains des abstractions que nous avons mis en place dans le fichier functions.php pour vous rendre la vie un peu plus facile, mais en fin de compte de sorte que vous comprenez de sorte que lorsque les roues de formation se détacher en quelques semaines, vous pouvez toujours survivre dans le monde réel et de faire ce genre de choses sans aucun cadre CS50-dessous vous. Ce $ _SESSION, pour ceux d'entre vous qui sont familiers ou qui ont déjà pris la vidéo, le vendredi, ce qui ne SESSION faisons dans une application web basée sur PHP? Il s'agit d'une variable superglobale, ce qui signifie que c'est le même esprit que GET et POST et quelques autres, mais quelle est cette chose-elle utile? 

Qu'est-ce que SESSION utilisé? Ouais. [L'élève] Logging in Désolé? [L'élève] Logging in Logging in effet. En pset 7, nous vous utilisez cette superglobale SESSION afin de faciliter l'exploitation forestière po Et ce qui est bien avec cette superglobale, c'est que c'est un tableau associatif. Un tableau associatif, rappel, c'est juste un tableau, mais dont les indices ne doivent plus être des nombres comme 012. Ils peuvent être des nombres ou ils peuvent être même des chaînes. Et donc, si vous avez plongé dans pset 7 pour le moment, vous vous souviendrez que nous gardons un ID de clé appelé l'intérieur de ce tableau associatif dont la valeur est quelque chose comme 123 - quel que soit l'utilisateur actuellement connecté à l'ID utilisateur est. La motivation pour cela est que même après que l'utilisateur a visité localhost ou plus généralement sur mon site, puis ils ont ouvert une session, même si elles ne cliquez pas sur un lien ou retourner sur mon site pendant 5 minutes ou même une heure, voire une journée, mais ils quittent leur fenêtre de navigateur ouverte, via ce superglobale puis-je rappeler qu'ils sont connecté 

En d'autres termes, cela me permet de stocker quoi que ce soit légèrement plus long terme, je veux sur un utilisateur. Et vous pouvez penser que c'est vraiment comme l'incarnation d'un panier d'achat. Des endroits comme Amazon évidemment vous permettent de mettre les choses dans un panier, mais HTTP, le protocole qui alimente le Web, est apatride dans le sens où lorsque vous visitez un site Web, pour la plupart, vous n'avez pas une connexion réseau permanente entre votre navigateur et le serveur. Dès que vous avez téléchargé le code HTML et les images JPEG et les fichiers GIF et tout ça, la connexion disparaît et vous avez juste une copie du code HTML et autres joyeusetés du serveur. Mais si le serveur veut se rappeler quelque chose sur vous, le fardeau est sur le serveur d'enregistrer réellement cette information. Et si vous le programmeur qui ont le contrôle sur le serveur pouvez mettre ce que vous voulez le plus à l'intérieur de ce réseau associatif superglobale et ce sera là la prochaine fois que l'utilisateur revient, qu'il s'agisse de minutes ou même quelques jours plus tard, à moins qu'ils ne fermer la fenêtre du navigateur, au cours de laquelle SESSION point disparaît. Donc, c'est de stockage éphémère, il est non persistant, et il est destiné à disparaître dès que l'utilisateur ferme son navigateur - et pas seulement cet onglet, souvent le navigateur entier, ainsi efficacement connexion de l'utilisateur sur. Alors, comment est cette chose effectivement mises en œuvre? Jetons un coup d'oeil à un exemple simple, nous avons examiné le vendredi. Pour ceux qui ne connaissent, c'est aussi simple que cela. Il s'agit d'une page Web dont le seul but dans la vie est de me dire combien de fois j'ai visité cette page. C'est la première fois lundi que je l'ai visité, il dit 0 fois. 

Mais si je commence à recharger cette page, il est dit 1 fois, 2, 3, 4, 5, et cela finira juste continuer à compter haut, haut, haut, haut, haut à chaque fois que j'ai vraiment cliquez sur Recharger dessus. Alors, comment est ce travail? Permettez-moi aller à l'intérieur de ce fichier appelé counter.php. La partie supérieure de celui-ci est bleu tous les commentaires, mais la partie intéressante est ici. À la ligne 13, nous appelons cette fonction session_start, et c'est littéralement tout ce que vous devez faire si vous voulez avoir accès à ce superglobale spéciale appelée $ _SESSION. Cela rend tout cela possible, et nous verrons dans un instant comment c'est possible. A la ligne 16 préavis ce que je fais. Si la clé, appelée contre - en d'autres termes, la valeur d'index - "compteur" existe à l'intérieur de ce tableau appelé SESSION, alors qu'est-ce que je fais avec elle dans la ligne ci-dessous? Quelle est la ligne 18 fait? 

[Réponse de l'élève inaudible] Qu'est-ce que c'est? [L'élève] Stocker la valeur. Bon. Il est stocker la valeur qui est en ce moment SESSION dans une nouvelle variable locale temporaire, $ Compteur en minuscules. Notez que PHP est déjà en cours un peu paresseux ici. Notez que nous n'avons pas fait mention de int ou float ou une chaîne ou quelque chose comme ça parce que PHP est faiblement typé, où vous n'avez pas besoin de spécifier le type d'une variable, et dans ce cas là, je n'ai même pas encore déclarée. Je le déclare à l'intérieur de ces accolades et contrairement au C, c'est en fait bien. Peu importe combien profondément imbriqué déclaration d'une variable en PHP - à l'intérieur de l'accolade, à l'intérieur de l'accolade et autres - il sera à ce moment-là existent pour le reste du programme, pour le meilleur ou pour le pire. Ainsi, il devient immédiatement mondiale dès que vous le définissez comme nous le faisons ici. 

Sinon, si je ne trouve pas qu'il y ait quoi que ce soit dans la super SESSION, Je suis apparemment l'initialisation de ce compteur variable à 0, ainsi que supposer l'utilisateur n'a jamais été ici avant. Et puis cela bien sûr est incrémenter le compteur de quelle manière? Je met à jour la valeur qui est à l'intérieur de ce tableau associatif en le définissant égale à tout ce compteur est actuellement + 1. Si je défiler ici pour le code HTML de la page, c'est en fait assez simple. Tout ce que j'ai dans le corps de cette page est: «Vous avez visité ce site pour tant de fois et un tel." Et cela est une construction PHP. Si vous le faites <? =, Ce qui équivaut effectivement à quelle fonction? C'est vraiment équivalent à quelque chose comme printf, que nous avons vu de nombreuses fois dans C, même si, comme vous le savez peut déjà du spec dans pset 7, d'impression est également une fonction qui affiche simplement quelque chose, il ne fait pas usage de codes de format, et vous pouvez réellement dire ainsi écho. Ils sont tous très légèrement différente, même si l'effet net est finalement le même. Ainsi, cette utilisation du signe égal est juste une sorte de une façon élégante de le faire plus succincte que vous pourriez autrement être en mesure d'. C'est tout ce que ce site fait. Il imprime la valeur du compteur. Comment tout cela se passe réellement? Vous pouvez rappeler une semaine ou deux nous avons commencé il ya sous le capot comment fonctionne une page Web à l'aide de cet onglet Inspecteur. 

Chrome a cette fois dans la version Mac, la version Windows, et même la version Linux, et Firefox et IE disposent de mécanismes similaires par lequel vous avez cette débogueur intégré à l'intérieur du navigateur. Jetons un coup d'oeil à ce qui suit. Nous avons tout un tas d'onglets ici, et nous rappelons que le plus à gauche est Elements, et peu importe comment godawful le code HTML et Javascript dans une page, Rappelons qu'avec l'onglet Éléments que vous pouvez réellement parcourir le code HTML hiérarchiquement et agréable et ordonnée. Donc, si vous essayez d'apprendre à partir d'un site web comme Google ou Facebook ou bien n'importe quel site Web, sachez que vous êtes probablement mieux en regardant le code source de cette façon plutôt que de voir le code source brut, qui peut être un gâchis, comme nous l'avons vu en particulier sur le site de Google. Donc, si je la place cliquez sur l'onglet Réseau ici, nous allons voir ce qui se passe quand je visite cette page. D'abord laissez moi me vider la mémoire cache. Je vais aller dans Réglages dans Chrome, puis allez dans l'historique puis Effacer les données de navigation. Vous pourriez être utilisés pour ce faire à d'autres fins, [rires] mais quand il s'agit de développement de sites Web, c'est réellement utile - si vous riez, vous savez. [Rires] C'est effectivement très utile lors de l'élaboration sites Web, car la réalité est des choses comme les cookies et cache des choses comme les fichiers HTML, fichiers JavaScript en cache peut effectivement devenir un vrai casse-tête, car si pour une raison quelconque le navigateur décide de mettre en cache un fichier et pourtant vous avez apporté des modifications à ce fichier sur le serveur mais le navigateur n'a pas vraiment rendu compte que le fichier a été modifié et n'a donc pas fait le re-télécharger même lorsque vous cliquez sur le bouton Reload, l'un des moyens les plus infaillibles pour s'assurer que la faute n'est pas de votre code, c'est avec le comportement du navigateur, c'est d'aller ici dans votre navigateur et juste effacer toute l'histoire de sorte qu'il n'y ait pas de confusion. 

Et puis, si vous voulez vraiment être paranoïaque, quittez le navigateur, redémarrez-le, puis assurez-vous que tout fonctionne comme prévu. Donc en bref, cache compensation est bonne quand faire du développement. Nous avons donc ici l'onglet Réseau. J'ai déjà avoir visité le site 9 fois, mais laissez-moi aller de l'avant maintenant et cliquez sur Recharger. Et je suis de retour à 0. Nous allons réellement voir comment il est que cette superglobale SESSION est mis en œuvre. Je vais cliquer sur la requête 1 HTTP qui a été faite, et cette fenêtre de débogage me permet de regarder à l'intérieur de cela. Ici, je vois juste la réponse du serveur, ce qui n'est pas intéressant. J'ai vu cela dans un certain nombre de façons. Mais ce qui est techniquement intéressant sont les en-têtes. Si je défiler vers le bas ici et se concentrer sur les têtes de requête, puis cliquez sur Afficher la source, ce que je vais voir est littéralement la requête HTTP qui vient de passer de mon navigateur au serveur, GET étant le mot et puis / counter.php étant le nom du fichier, HTTP/1.1 être juste la version de HTTP que mon navigateur utilise. Cette ligne est ici un petit rappel du navigateur au serveur quel est le nom du serveur est qu'il veut parler. Et puis le reste de ce qui est parfois intéressant mais n'est pas pertinent en ce moment. 

C'est juste une sorte de curiosité. Cryptic si cette chaîne est, à tout moment de votre navigateur visite d'un site Web il est d'informer le serveur quel navigateur vous utilisez et ce système d'exploitation que vous utilisez ainsi que la version de celle-ci. Donc, si vous êtes déjà demandé comment des sites comme CNN et autres joyeusetés savoir quels sont les pourcentages d'utilisateurs de Mac sur les PC des utilisateurs Web,, Utilisateurs d'Internet Explorer, les utilisateurs de Chrome et autres, c'est parce que tous nos navigateurs disent chaque site unique là-bas ce que nous sommes. Il ne doit pas nécessairement contenir des informations personnellement identifiables, mais elle indiquer au serveur que votre adresse IP est et ce navigateur et système d'exploitation que vous utilisez. C'est donc là que cette information est. Mais ce qui est plus intéressant maintenant, quand il s'agit de ces sessions est l'en-tête de réponse. Permettez-moi de cliquer sur afficher la source à côté de la réponse. Ce qui est intéressant ici, c'est quelques choses. 1, nous sommes rentrés un code d'état 200. Nous ne voyons jamais ce code d'état parce que cela signifie que tout va bien. Il signifie littéralement correct contrairement à quelque chose d'autre. Qu'est-ce qu'un numéro nous voyons parfois que c'est mauvais? [L'élève] 404. 404, fichier non trouvé, 403 vous pourriez être tomber sur déjà, ce qui est interdit, ce qui signifie que vous avez oublié quelque chose chmod, le plus probable. Et il ya un tas d'autres. 

Ici-bas, c'est un peu fou. J'ai vraiment écrit ce fichier il ya quelques minutes en le collant dans gedit. Pourquoi cette page expireront en 1981, avant il y avait vraiment un site Web? Que se passe-t-il? 

[Réponse de l'élève inaudible] L'horodatage. Mais pourquoi? Il est quelque peu arbitraire, mais c'est réellement utile. Ce que cela veut dire à mon navigateur est ce fichier PHP que vous venez de demande a déjà expiré. En effet, elle a expiré il ya 30 ans. Mais qu'est-ce que cela signifie vraiment? Cela signifie simplement que la prochaine fois que l'utilisateur visite cette page, que ce soit par rechargement ou en tapant l'URL dans la barre d'adresse, assurez-vous d'aller chercher une nouvelle copie de celui-ci. C'est en quelque sorte un exemple de contourner la mémoire cache, un mot stupide qui signifie simplement tenter de décourager les navigateurs de fait, la mise en cache HTML qui a été envoyé à partir d'un serveur de sorte que vous n'avez pas accidentellement frappé rechargement et ensuite voir la même version du fichier. En fait, vous voulez que le serveur d'envoyer une nouvelle copie. Donc, le fait que c'est 1981 signifie simplement que c'est ce que l'appareil est de choisir comme une date arbitraire dans le passé. Mais la vraie ligne juteuse est maintenant celui-ci. Même avant 50 ans, vous êtes probablement vaguement familier avec les cookies. En ce moment, en particulier chez ceux qui sont moins à l'aise ou entre les deux, qu'est-ce qu'un cookie dans votre compréhension en ce moment même si nous sommes sur le point de faire de votre compréhension plus technique? Qu'est-ce qu'un cookie? Ouais. [L'élève] Informations sur l'utilisateur, comme si ils ont écrit leur nom d'utilisateur ou quelque chose. 

Bon. Il s'agit d'informations sur l'utilisateur, si ils ont tapé dans leur nom d'utilisateur déjà. Les cookies sont un moyen par lequel les serveurs peuvent se rappeler quelque chose au sujet d'un utilisateur. Et qu'est-ce qu'un cookie est vraiment est un fichier texte ou une séquence d'octets qui est planté par le serveur à l'intérieur de votre navigateur, et à l'intérieur de ce fichier ou partie de ces octets est une sorte d'identifiant. Peut-être que c'est littéralement votre nom d'utilisateur, mais le plus souvent c'est quelque chose de plus cryptique l'avenir comme cette chose ici - bo8dal3ct et ainsi de suite - cette chaîne alphanumérique vraiment grand qui est vraiment juste censé être un identificateur unique pour vous. Ou vous pouvez penser que c'est une sorte de tampon sur la main virtuelle. Si vous allez à un club ou un parc d'attractions, de se rappeler que vous avez effectivement payé et entré, ils ont mis un petit autocollant rouge sur la main d'une certaine sorte, et qui rappelle les gens au comptoir que vous avez déjà payé et vous pouvez aller et venir comme vous s'il vous plaît. Les cookies sont un peu dans le même esprit à cela. La première fois que j'ai visité ce site, comme je viens de le faire après avoir vidé mon cache, le serveur Web, l'appareil dans ce cas, mettre un timbre sur ma main dont le nom est PHPSESSID, l'ID de session, dont la valeur est cette chaîne alphanumérique très long. 

Donc, c'est maintenant sorte de blason sur ma main afin que la prochaine fois que je frappe recharger ou manuellement visiter cette URL dans un navigateur, mon navigateur par définition de HTTP va présenter le timbre à la main encore et encore et encore. Ainsi, même si le serveur ne sait pas nécessairement qui je suis, au moins ils savent que je suis le même utilisateur ou du moins, plus spécifiquement, le même navigateur. Et c'est donc en fin de compte la façon dont la super-SESSION est mis en œuvre. 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 si vous ne présentez ce timbre à la main. Et dès que vous présenter ce tampon sur la main, le serveur Web va essentiellement dans une petite base de données de son propre et les chèques, d'accord, je viens de voir la main de timbre bo8dal3ct utilisateur et ainsi de suite. Permettez-moi de voir quelles sont les informations que le programmeur a enregistré à l'intérieur de la super sur cet utilisateur, et laissez-moi vous assurer que ces données sont à nouveau à l'intérieur de la SESSION superglobale de sorte que le programmeur peut accéder de nouveau que les données même si elle a été créée quelques minutes ou quelques heures auparavant. Donc, en d'autres mots, les biscuits, qui a obtenu une mauvaise réputation pendant un certain temps en raison de l'insécurité dans les navigateurs et ils peuvent vraiment violer notre intimité et tout cela, ils ont en fait une grande utilité, car sans eux vous serait constamment la connexion à chaque page que vous visitez Facebook ou chaque e-mail Gmail vous lire si le navigateur n'a pas une certaine façon de se souvenir que vous avez déjà authentifié. 

C'est de cette façon cookies sont envoyés dans les deux sens à travers le fil. Autre curiosité au sujet des témoins, en particulier ici, c'est que c'est tout à fait en clair. Il n'y a pas de cryptage qui se passe ici que ce soit, et en effet je suis en utilisant HTTP pour le moment. L'un de nos moments préférés en CS50, qui est maintenant de 2 ans, a été à l'époque un outil appelé Firesheep est sorti. Il s'agissait d'un logiciel gratuit qui a été faite par un chercheur en sécurité comme un appel de réveil pour la communauté de dire à quel point atrocement mis en œuvre certains mécanismes d'authentification sur le Web étaient. Donc, pendant un certain temps, Facebook a été presque entièrement sur HTTP, HTTPS pas. Et même si vous n'avez aucune idée de comment fonctionne la crypto, S est sécurisé donc cela signifie qu'il ya au moins quelques-uns de cryptage impliqués. Facebook ne sert à chiffrer les noms d'utilisateur et mots de passe, mais dès que vous regardé votre pokes ou vos messages ou votre fil de nouvelles, tout cela a été clair. Il en était de Gmail jusqu'à ce que tout juste un an ou 2 auparavant. Chaque fois que vous vous êtes connecté, oui, ils ont utilisé un chiffrement sécurisé, mais par la suite ils n'ont pas. Et pourquoi cela pourrait-il être? Pourquoi ne pas simplement utiliser la cryptographie tout le temps en cas d'utilisation comme celui-ci? Qu'est-ce que c'est? Je crois avoir entendu quelque chose. [L'élève] Vitesse. Vitesse, non? Il ya plusieurs façons de contourner cela. Mais si vous venez sorte de penser logiquement, si vous chiffrez quelque chose, vous avez à faire au moins un peu plus de travail. En pset 2 lorsque vous mis en oeuvre César ou Vigenère, voire Crack, juste l'impression d'une chaîne est relativement facile. Chiffrement et puis en imprimant une chaîne mini nécessite un travail un peu plus. 

 Pour les super sites populaires comme Google et Facebook, si vous avez à faire plus de travail pour chaque utilisateur pour chaque page web qu'ils visitent, qui prend juste plus de temps CPU. Et si vous avez besoin de plus de temps CPU, vous pourriez avoir besoin plus de serveurs, ce qui signifie que vous pourriez avoir besoin de plus d'argent. Et pendant de nombreuses années ce n'était pas vraiment de bonnes pratiques. Les gens utilisent le cryptage SSL uniquement quand ils avaient besoin d'. Mais il s'est avéré, et que cet homme avec Firesheep fait super clair, quand vous les gars qui sont actuellement sur Facebook dès maintenant - Par curiosité, nous allons voir si vous fess up. Si vous êtes sur Facebook en ce moment dans certains onglet, même si elle n'est pas au premier plan, est votre URL ou HTTP HTTPS? [] Plusieurs élèves S. S? [Rires] D'accord. Toute HTTP? À seulement 1? D'accord. Ainsi, chacun d'entre nous peut pirater compte de ce gars Facebook dès maintenant. Pour la plupart c'est devenu activée par défaut, au moins dans certains sites. Et longue histoire courte, si votre trafic Web n'est pas chiffré, non seulement le HTML aller et venir à travers les WiFis non chiffrées, il ne faut choses comme les cookies aller et venir à travers l'air sans aucune forme de cryptage. Donc si vous avez un peu de savvy programmation ou un peu de recherche sur Google compétences de trouver un logiciel gratuit qui fait cela, tout ce que vous avez à faire est de s'asseoir dans un Starbucks ou assis dans un aéroport où il est généralement clair WiFi et juste regarder pour les mots clés tels que Set-Cookie: PHPSESSID ou parce que si vous avez le savoir-faire technique se contenter de regarder le WiFi pour tous les bits dans le flux que l'air de ce modèle, vous pouvez alors dire que PHPSESSID gars arrive à être bo8dal et ainsi de suite. Et là encore, si vous êtes suffisamment techniquement pointus ou avoir le bon outil, vous pouvez alors simplement reconfigurer votre propre navigateur de commencer à présenter ce timbre à la main à Facebook.com, Facebook va tout simplement supposer que vous êtes ce type parce que tout ce qu'ils savent n'est pas qui vous êtes mais que vous avez cet identificateur unique. Donc, si vous voler cet identifiant unique et le présenter au serveur web comme le vôtre, ils vont juste vous montrer fil de nouvelles de cette personne ou cette personne des messages ou des pokes. 

Et je voudrais maintenant Google comment activer le protocole HTTPS pour Facebook peut-être. Mais il est vraiment aussi simple que cela. Et si Facebook et Google et autres ont obtenu vraiment bon pour cela, mais gardez un œil sur tout le plus pour tous les sites Web que vous visitez qui n'utilisent pas HTTP et avoir une sorte d'informations sensibles sur eux, que ce soit financières, personnelles ou autres. S'ils ne sont pas d'utiliser ce, très probablement les cookies comme celui-ci peut être très facilement volés puis forgées, et c'est exactement ce que Firesheep fait. Vous n'avez pas besoin d'être un programmeur. Tout ce que vous avait à faire était ont une connexion Internet, télécharger cet outil gratuit, et ce qu'il faudrait faire, c'est que vous vous connectez, puis il vous montrera les noms Facebook chacun de Sanders, dans cette démonstration particulière, autour de vous et tout ce que vous avait à faire était de cliquer sur son nom et le logiciel automatisé le processus de de renifler ce cookie, il présente à Facebook comme la vôtre, et voila, vous êtes connecté po Il s'agit donc d'un autre de ces «ne fais pas ça" officiellement. Si vous avez votre propre réseau à domicile et que vous voulez bricoler, par tous les moyens, mais se rendre compte de ce fait franchir la ligne dans un environnement universitaire. 

Mais le but ici n'est vraiment pas mettre l'accent sur la façon de procéder mais comment se défendre contre ce genre de choses. Et la solution triviale ici, même s'il est lui-même imparfait, est de vraiment réduire l'utilisation de tous les sites qui n'utilisent pas le protocole HTTPS en permanence. Ainsi, des sites comme Facebook et Google ont de plus en cases où vous pouvez opter pour ce genre de chose, et les banques ont eu pendant des années pour des raisons similaires. Donc, juste un peu plus d'un facteur de la peur si nous le pouvons. Mais c'est tout en un mot. C'est ainsi qu'un serveur se souvient de qui vous êtes. Et dès qu'ils peuvent se rappeler qui vous êtes, ils peuvent se rappeler quoi que ce soit sur vous que le programmeur a stocké à l'intérieur de cette superglobale spéciale appelée $ _SESSION. Et pour pset 7, nous vous en servez trivialement juste pour se souvenir d'un int, à savoir l'identifiant unique de l'utilisateur qui a ouvert une session, de sorte que nous savons qu'ils ont été là avant. Toutes les questions, puis sur les sessions ou les cookies ou autres? Firesheep ne fonctionne plus efficacement, et vous devez mettre votre ordinateur dans un mode spécial promiscuité de sorte que vous êtes en train d'écouter le trafic en dehors de vous-mêmes. Donc, si vous êtes en train de télécharger Firesheep, de réaliser que ce n'est pas aussi facile comme il était une fois à démontrer. Très bien. Et ne pas le faire dans Sanders. Faire à la maison. Bases de données. Une des choses que nous avons faites dans pset 7 très délibérément été, nous vous donnons une table de base de données de l'échantillon pour les utilisateurs qui a des identifiants utilisateur, certains noms d'utilisateur et mots de passe cryptés certains qui s'y trouvent. Et comme vous le verrez, si vous avez pas déjà fait, vous allez devoir changer la table un peu. Vous allez devoir ajouter un peu de cache pour chacun des utilisateurs dans ce tableau, et vous allez devoir ajouter un autre tableau de l'historique, une table de portefeuilles, ou peut-être l'appeler autre chose. Mais en termes de réflexion sur la façon de le faire, nous allons ouvrir cet outil qui nous a servi le vendredi, mais si elles sont inconnues, l'appareil est livré avec un outil phpMyAdmin qui est appelé par hasard, écrit en PHP, mais son but dans la vie, après je me connecte ici jharvard de pourpre, est de me donner un moyen convivial d'afficher et de modifier ma base de données. 

La base de données que je l'exécute sur l'appareil est appelé MySQL. Ceci est très populaire, et c'est une base de données open source gratuit qui est merveilleusement facile à utiliser, en particulier avec les extrémités avant comme ça. Ce que cet outil me permet de faire, par exemple, est Poke autour des tables. Permettez-moi aller de l'avant et de le faire. Vendredi, nous avons créé une table appelée étudiants qui était super simple. Il y avait 3 colonnes - id, nom, email et - et je insérée manuellement quelques lignes comme David et Mike dans cet exemple particulier. Prenons cela un peu plus loin, et supposons que nous voulons nous souvenir plus qu'un simple nom et e-mail d'un utilisateur. Permettez-moi de cliquer ici Structure en haut. Et encore une fois, le pset vous guide à travers les étapes nécessaires ici, alors ne vous inquiétez pas si certains de cela est un peu rapide. Ensuite, je vais cliquer sur ici. Je vais ajouter un certain nombre de colonnes après e-mail parce que je veux ajouter quelque chose comme maison. J'ai oublié d'enregistrer la maison de l'étudiant. Permettez-moi cliquez sur OK, et maintenant nous avons cette forme qui est malheureusement un peu large de gauche à droite, mais je vais appeler le nom de cette maison de champ, puis le type je dois maintenant choisir. Donc, nous allons avoir une brève discussion sur les différents types de MySQL parce que PHP est faiblement typé et il joue sorte de double jeu avec les types, dans une base de données en particulier, il est important d'utiliser réellement superbe frappe à votre avantage car l'une des choses MySQL et les moteurs de base de données peut faire pour vous est de s'assurer que vous ne mettez pas de fausses données dans votre base de données. C'est en quelque sorte la vérification sans erreur à votre disposition. 

Pour la maison nous n'avons évidemment pas que ça soit un int, qui est une valeur 32 bits dans MySQL. Nous avons fait parler brièvement vendredi au sujet varchar, ce qui correspond à la longueur variable de type char. Qu'est-ce que c'est? Cela vous permet de spécifier que vous voulez que ce soit une chaîne quelconque. Vous n'avez pas vraiment savoir à l'avance combien de temps il est, donc nous allons dire arbitrairement un nom de maison peut être de 255 caractères, mais vous pourriez aller avec 32, 64 - un nombre vraiment. Mais l'avantage d'utiliser un varchar dans un champ appelé char, c'est quoi? Juste intuitivement si je descendez ici, vous remarquerez qu'il ya char et il ya varchar. Varchar est de longueur variable char; char est une longueur fixe char. Donc, basée uniquement sur cette définition, quel est l'avantage ou le désavantage de chacune de ces? En d'autres termes, qui se soucie de la distinction, ou pourquoi s'en soucier? 

Ouais. [L'élève] Varchar a plus de souplesse, mais prend plus de mémoire. Bon. Varchar prend plus - Voyons voir. Je ne sais pas si j'ai bien entendu ce droit. Pouvez-vous dire qu'une fois de plus? [L'élève] J'ai dit varchar a probablement plus de souplesse, mais il faut plus de mémoire. Intéressant. D'accord. Varchar donne probablement une plus grande flexibilité, mais prend plus de mémoire. Celui-ci n'est pas nécessairement vrai. Il dépend du contexte, mais nous allons revenir à cela. 

[Réponse de l'élève inaudible] Exactement. C'est effectivement le cas que caractères utilisent généralement plus de mémoire car un char, comme en C, est comme une corde, c'est un tableau de caractères. Donc, si vous dites un champ char de longueur 255, la base de données est littéralement vais vous donner 255 caractères. Et si la maison finit par être MATHER et 6 caractères au total, tu perds plus de 200 caractères. 

Ainsi, un varchar efficacement utilise autant de caractères que nécessaire jusqu'à concurrence d'un montant maximum. Mais le prix que vous payez est en fait la performance, potentiellement. Si vous savez d'avance que toutes vos chaînes vont être de 8 caractères - Par exemple, supposons que vous avez besoin de mots de passe d'une longueur de 8 - la hausse de l'aide d'un champ char à l'occasion, mais pas souvent, est de spécifier une longueur fixe pour quelque chose comme un mot de passe parce que maintenant la base de données peut être encore plus intelligente. Si elle sait que chaque champ char, chaque chaîne dans une colonne de la même longueur, vous récupérez la fonction d'accès aléatoire. Vous pouvez sauter entre les divers domaines chevalier dans votre base de données parce que penser à une base de données sous forme de lignes et de colonnes. Donc, si chacune des chaînes est de la même longueur, vous savez que le premier est l'octet 0, la suivante est à 8 octets puis 16, puis 24 et ainsi de suite. Donc, si toutes les chaînes sont de la même longueur, vous pouvez sauter beaucoup plus efficacement. Alors, ça peut être un avantage en termes de performances, mais en général, vous n'avez pas le luxe de savoir à l'avance, si un varchar est le chemin à parcourir. Voici un autre détail que même Facebook couru dans la suite. Ints sont grands, et nous sorte de les utiliser par défaut chaque fois que nous voulons un certain nombre, mais c'est seulement 32 bits. 

Et même si Facebook ne sont pas tout à fait 4 milliards d'utilisateurs maintenant, il ya certainement des gens là-bas avec plusieurs comptes ou les comptes qui ont été ouverts puis fermés, et ainsi de Facebook lui-même, je crois il ya quelques années a dû transition de int pour, comme il est appelé à juste titre, bigint, qui est seulement 64 bits au lieu. Donc, c'est aussi une décision de conception. Vous serait incroyablement chanceux si votre projet final s'avère démarrage, a 4 milliards et 1 utilisateurs, donner ou prendre, Dans ce cas, l'aide ints pourrait être un peu myope. Mais en réalité, votre table utilisateurs est probablement très bien avec ints. Mais pour quelque chose comme pset 7, comme votre table d'historique, vous pourriez avoir des milliers, des millions d'utilisateurs, si vous évoluez dans etrade.com. Ainsi, alors que vous pourriez ne pas avoir plus de 4 milliards d'utilisateurs, les utilisateurs que vous avez peut-être avoir plus de 4 milliards de transactions au cours du temps - achète et vend des choses et de leur histoire. Donc, si vous faites anticiper - encore une fois, ce sont des problèmes bien d'avoir si vous avez autant de données - si vous faites anticiper données dépassant la taille d'un int, aller avec quelque chose comme bigint est une direction pas assez souvent adoptée par les concepteurs parce que la figure des gens qui ne va pas être un problème, mais il est aussi facile de choisir quelque chose plus que cela. Décimal que nous utilisons dans pset 7, qui spécifie précision fixe de sorte que vous pouvez éviter les problèmes impliquant des flotteurs et en double et en reals et autres. 

Et puis il ya d'autres domaines ici. Nous allons saluer nos mains sur eux dans une certaine mesure. Mais les dates, les heures ont tous un format prescrit dans MySQL, et l'avantage de stocker des dates que les dates et non varchars signifie que la base de données peut effectivement les reformater en différents formats, si un format américain ou format européen ou autre - mais vous le voulez - beaucoup plus efficacement que s'il s'agissait simplement d'une certaine générique varchar. Et puis il ya une certaine binaire, varbinary, les blobs. Ce sont des objets binaires volumineux, et vous pouvez également stocker des données binaires ainsi que des données géométriques dans une base de données. Mais pour nous, nous allons généralement soucient entiers et varchars, etc. Finissons cet exemple avec la maison. Maison que je vais dire arbitrairement sera 255 caractères. Ensuite, la valeur par défaut, nous pourrions le faire. Nous pourrions, par défaut mettre tout le monde à Mather House, par exemple. C'est ainsi que nous avons pu préciser que la base de données devraient veiller à ce que quelqu'un a toujours une valeur. Mais je vais laisser ça être. En fait, pour les personnes qui vivent hors campus et non dans une maison, peut-être fait, je veux préciser que la valeur par défaut est NULL maison, 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. 

Encore une fois, ceci est un autre mécanisme de défense que vous pouvez mettre en place de sorte que vous n'avez même pas besoin de le mettre dans votre code PHP nécessairement. La base de données fera en sorte que les choses sont ou ne sont pas NULL. Et puis enfin, Attributs. Aucun d'entre eux sont réellement pertinents. Binaire non signé - aucun de ceux qui sont pertinents pour un varchar. Indice. Est-ce que quelqu'un sait ou se souvenir ou une conjecture quant à ce qui est un indice quelque chose comme la maison? C'est aussi en fait une décision de conception importante et relativement facile. Pour ceux qui ne l'ont pas encore vu, le vendredi nous avons parlé brièvement de clés primaires. Dans une table de base de données, une clé primaire est le champ ou la colonne qui identifie de manière unique les lignes dans la table. Ainsi, dans le tableau que nous avons actuellement ID, nous avons des noms et des courriels. Qui d'entre eux est le meilleur candidat pour être une clé primaire, dont le rôle est d'identifier de manière unique les lignes? Probablement ID. Sans doute, on pourrait également utiliser ce bien? Peut-être que vous pourriez utiliser le courrier électronique, car en théorie, il est unique à moins que les gens partagent des comptes de messagerie. Mais la réalité est que si vous utilisez un ID numérique comme 1234, ce n'est que 32 bits, alors qu'une adresse e-mail pourrait être ce nombre d'octets ou de ce octets nombreux. Donc, en termes d'efficacité pour les identificateurs uniques, il tend à être une bonne pratique que d'utiliser un int même si vous avez une certaine candidate chaîne que vous pourrait sans doute utiliser. 

Pour quelque chose comme la maison, cela ne devrait pas être une clé primaire car alors seulement 1 personne pourrait vivre dans Mather et 1 personne sur Currier et analogues. De la même façon, cela ne devrait pas être unique. La différence entre le primaire et unique, c'est que dans le cas de notre table courante, ID serait primaires, mais le courriel n'est pas la raison principale pour nous venons de parler - performances - mais il doit encore être unique. Ainsi, vous pouvez toujours appliquer l'unicité sans faire la demande que c'est un super important domaine primaire. Mais celui-ci est très utile: Index. Si vous savez d'avance pour votre projet final, pour pset 7, ou en général, que cette maison est le terrain va être quelque chose que vous chercher sur un terrain en utilisant le mot-clé select ou autre chose, alors vous pouvez dire préventivement la base de données pour travailler sa magie et assurez-vous qu'il crée en mémoire des structures de données sophistiquées nécessaires d'accélérer les recherches sur la base de la maison. Peut-être qu'il va utiliser une table de hachage, ce sera peut utiliser une liste chaînée. En réalité, il a tendance à utiliser un arbre, souvent une structure appelée B-tree - pas un arbre binaire, mais un B-tree - qui est un arbre très large que vous pourriez voir dans une classe comme CS124, la classe des structures de données. Mais enfin, vous n'avez pas à vous soucier de ce que lors de l'utilisation du logiciel de base de données intelligente. Vous pouvez simplement lui dire, "Indexer ce domaine afin que je puisse rechercher sur elle de manière plus efficace." 

Si vous laissez cette mousse et vous essayez de rechercher pour chacun dans la base de données qui vit à Mather, elle se transformer en recherche linéaire. Et si vous avez 6.000 étudiants de premier cycle qui vivent toutes dans une maison, vous allez chercher tout le tableau pour trouver les Matherites, tandis que si vous dites Index, j'espère que ce sera quelque chose de proche d'une recherche logarithmique pour trouver ces types d'étudiants. Ceci est juste une fonctionnalité gratuite pour allumer, même si elle ne viennent à un prix d'une certaine quantité d'espace. Enfin, l'auto-incrémentation, ce champ AI, ce qui signifie simplement si c'est un entier et vous ne voulez pas prendre soin d'incrémenter le vous-même chaque fois qu'il ya un nouvel utilisateur, vérifier que, et chaque utilisateur qui est inséré recevrez automatiquement un nouvel ID. Cliquons sur Enregistrer, et maintenant nous allons trouver à redire à cette conception. Si je vais dans Parcourir, notez que Mike et ma maison est NULL. Je peux utiliser phpMyAdmin pour modifier manuellement. Je peux aller ici et tapez Mather, puis appuyez sur Entrée, et remarquez maintenant le tableau est différent. Mais remarquez que je pouvais faire autre chose aussi. ID de David est 1, donc phpMyAdmin est encore juste un outil administratif; ce n'est pas quelque chose que vos utilisateurs ne sont jamais aller voir. Donc, si je la place sur l'onglet SQL en haut - et encore, pset 7 vous présenter à plusieurs de ces questions - Je peux exécuter manuellement la commande SQL Structured Query Language MISE À JOUR utilisateurs SET maison = 'Pfoho' WHERE id = 1. Ces requêtes SQL sont, bien assez, assez lisible de gauche à droite. Mettre à jour la table des utilisateurs, définissez le champ appelé la maison de Pfoho où identification de l'utilisateur est 1. Ou je pourrais même faire où email = 'malan@harvard.edu ». Tant que qui identifie moi, qui fonctionnerait aussi bien. Mais ID a tendance à être plus performant, nous allons donc le faire. Cliquons sur OK. Bon, lecture.users n'existe pas. Quel est mon erreur? Quelle est la table de fait appelé ici? C'est ce qu'on appelle les étudiants juste parce que c'est ce que nous avons fait ici en haut à gauche. C'est ce qu'on appelle les étudiants, pas les utilisateurs. Alors cliquez sur OK maintenant. 1 row affected. Requête effectuée en 0,01 secondes. Si je clique sur Parcourir maintenant, il vit maintenant dans Pfoho Malan. Donc, c'est un autre goût de SQL, mais le pset vous guidera à travers un peu plus de cela. 

Il s'agit d'une décision stupide je l'ai déjà fait ici. Je dirais que cette conception de base de données est inefficace parce que les gens de plus j'ajoute à la table des étudiants, plus d'entre nous je commencer à ajouter, plus des FO je commencer à ajouter, nous allons commencer à voir ce que les licenciements dans ce tableau? 

Ouais. [L'élève] Voyant que c'est chez les étudiants, nous utilisons le même [inaudible] La même chose - Oui, exactement. Ainsi, si 400 personnes vivent dans la Mather, donner ou prendre, finalement ce tableau va avoir 400 lignes qui disent «Mather," "Mather," "Mather," "Mather," "Mather." Nous perdons tous ces octets, et il ya un couple de plats à emporter là-bas. 1, il ya le cas où coin fou si quelqu'un paie beaucoup d'argent et renomme Mather, nous avons maintenant de changer notre table de base de données entière. Cela ne va pas arriver souvent, mais Pfoho était autrefois appelé North House il ya 15 ans, il arrive ainsi. Mais ce n'est pas tout ce que convaincant. Plus convaincant que un cas comme celui de coin besoin de mettre à jour les données en vrac pour une base de données est pourquoi êtes-vous stocker MATHER encore et encore et encore et encore? C'est beaucoup de caractères, 6 chars. Ne peut-on faire encore mieux que cela, surtout pour Pforzheimer? Nous pouvons certainement faire mieux que ce que de nombreux personnages. Pourquoi ne pas associer un identifiant unique à chaque maison et un magasin que pour chaque utilisateur? Donc, nous allons essayer. Plutôt que de simplement utiliser la table des étudiants, que je monte à ma base de données exposé ici en haut à gauche. Remarquez ici il est dit Create table. Permettez-moi de créer une nouvelle table appelée maisons. Le nombre de colonnes qui se passe à 2. Entrée. Maintenant j'ai 2 domaines. Je vais appeler ce nom, et ça va être un varchar de longueur 255, 

mais c'est assez arbitraire. Permettez-moi de mettre cela ici par convention. Donc, mettez une pièce d'identité ici. Donnons chaque maison un identifiant unique. Donnons chaque maison un nom. Précisons que l'identifiant sera non signé seulement par convention de n'utiliser que des nombres positifs. Allons-y et donnez-ce un auto-incrémentation domaine pour l'instant. Et avons-nous besoin d'autre chose? Allons-y et cliquez sur Enregistrer. Maintenant, j'ai un deuxième tableau. Notez en passant que c'est un peu cryptique la commande SQL que vous auriez dû taper manuellement si vous n'utilisez pas un outil d'administration comme phpMyAdmin. Donc, une autre raison pour laquelle nous l'utiliser. C'est en quelque sorte merveilleusement utile pédagogiquement, car vous pouvez cliquer partout et de comprendre comment les choses fonctionnent simplement en copiant et collant ce que phpMyAdmin fait. Mais la commande CREATE TABLE est ce qui vient d'être exécutée, et voici ma table. 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. Permettez-moi de ne INSERT INTO maisons, et je vais vous dire le nom de la maison va avoir une valeur de «Mather. C'est tout. Cette syntaxe est un peu plus cryptique. C'est le nom des champs que nous voulons insérer. Ce sont les valeurs que nous voulons insérer dans ces domaines. Permettez-moi cliquez sur OK. 1 ligne insérée en 0,02 secondes. Permettez-moi maintenant cliquez sur Parcourir. 

Remarquez si je clique sur Parcourir, il ya Mather, dont l'ID est l'automatisation du numéro 1. Permettez-moi de faire un autre. Laissez-moi aller dans l'onglet SQL. INSERT INTO maisons. Le nom de la maison va avoir une valeur de Pfoho et ainsi de suite. Allez. Et je peux continuer comme ça encore et encore et encore. Ou si vous vous ennuyez en utilisant phpMyAdmin, vous pouvez simplement utiliser l'onglet Insertion et ne pas avoir à taper le code SQL brut. Vous pouvez simplement taper plus rapidement en tapant, par exemple, Currier, Entrée, et maintenant, si nous cliquez sur Parcourir, il ya Currier avec un ID de 3. C'est donc ce que nous entendons par incrémentation automatique. Mais maintenant, nous devons réparer quelque chose chez les élèves. En élèves quel devrait être le type de données du champ de la maison maintenant? Il doit être un entier, non? Donc, le but ici est de factoriser, autrement connu comme la normalisation, les tableaux de sorte que nous ne stocke pas les informations de manière redondante dans l'un de mes tableaux. Et encore une fois, le chemin que nous étions sur ici va dire Mather, Mather, Mather, Mather, Pfoho, Pfoho, Pfoho, Pfoho, ce qui est très redondante en termes de gaspillage des caractères. Alors laissez-moi aller de l'avant et de le modifier en cliquant sur la structure, et laissez-moi aller de l'avant et de cocher le domaine maison, cliquez sur Modifier, et maintenant je vais changer cela soit un int. 255 est plus pertinente. Permettez-moi aller de l'avant et de dire que c'est très bien si elle est toujours NULL. Enregistrer. Maintenant, les étudiants de table a été modifiée avec succès, et remarquez à nouveau la maison est un int. Soit dit en passant, ignorer le nombre entre parenthèses quand il s'agit de ints. 

C'est pour des raisons historiques. Retour dans la journée quand vous n'avez pas de GUI, vous place avait un environnement de ligne de commande, les 10 et 11 respectivement spécifiés le nombre de caractères que vous devriez montrer dans la fenêtre de terminal pour effectivement afficher des champs. Cela n'a rien à voir avec la longueur en bits du champ réel, donc nous allons simplement ignorer pour l'instant. Maintenant, je dois aller dans ce tableau. Et si David vit à Mather, maison ne doit pas être égal à 0, qui est une valeur int par défaut le plus proche de la valeur NULL. Il doit vivre dans la maison 1. Nous allons arbitrairement que la vie de Mike dans Pfoho, de sorte que le numéro de maison 2. Maintenant, ma table est un peu plus cryptique. Mais considérer l'efficacité. Je suis maintenant en utilisant seulement 32 bits pour identifier la maison, ce qui signifie qu'il ya seulement 1 définition canonique de ma maison Mather et Pfoho et c'est dans le tableau maisons. Donc, si je veux maintenant rejoindre ces tableaux, pensez-y de cette façon. Ici, j'ai ma table des étudiants, et sur le côté droit, il ya ces chiffres, 1 et 2. 1 est Mather, 2 est Pfoho. Nous avons ces mêmes chiffres de ce tableau d'autre part, que l'on appelle des maisons, 1 et 2 et 3 pour les 3 maisons. Ce que nous voulons faire, c'est avoir la capacité dans le code, PHP et SQL, pour trier ces tableaux de rejoindre, où si ce sont les étudiants et ceux-ci sont les maisons, nous voulons en quelque sorte les combiner afin que des lignes 1 avec 1, 2 lignes allant de 2, et ainsi que nous pouvons comprendre où David et où Mike et où tout le monde vit. Pour ce faire, nous pouvons exécuter une requête SQL comme suit. SELECT * FROM élèves REJOIGNEZ-NOUS SUR maisons - Et maintenant quels domaines voulons-nous rejoindre sur? Donc students.house = houses.id. 

Un peu cryptique, mais cette partie signifie littéralement créer une nouvelle table temporaire c'est le résultat de rejoindre les étudiants et les maisons. Et comment voulez-vous combiner le bout de mes doigts ici? Réglez «terrain maison à la hauteur des maisons« champ ID étudiants. Et si j'ai maintenant cliquez sur OK, je serai de retour exactement ce que j'espérais. David est à Mather, Mike est en Pfoho, et je vois aussi les identifiants uniques. Mais le fait est maintenant, j'ai un tableau complet. Et donc l'emporter ici pour pset 7 ou vraiment pour le projet final: Si vous trouvez que vous stockez toute information redondante, qu'il s'agisse d'une maison, c'est peut-être une ville, d'état et ZIP où ZIP peuvent généralement, mais pas toujours être utilisé comme un identifiant unique, passent par l'exercice mental et ensuite avec quelque chose comme phpMyAdmin de l'affacturage sur ces données courantes car d'autant plus que le site web attire plus bien utilisé en plus populaire, c'est comment vous assurez-vous que tout est super rapide, en donnant à la base de données que de nombreux indices quant à l'unicité que possible. C'était beaucoup. Des questions? Très bien. Prenons une pause de 5 minutes de là et se regrouper. Très bien. Ce qui suit est un exemple qui a été utilisé il ya quelques années quand j'ai pris CS161, qui est la classe des systèmes d'exploitation au collège qui est connu pour être incroyable, mais une quantité folle de travail, et il se concentre vraiment sur certains des problèmes de bas niveau qui se posent dans les systèmes d'exploitation et aussi même dans le monde des bases de données. 

L'histoire qui a été racontée par mon professeur, Margo Seltzer, cette année a été la suivante. Supposons que vous avez un dortoir frigo peu pour vous et votre colocataire et tous les deux vous aimez vraiment le lait. Alors vous rentrez chez vous classe un jour, votre colocataire n'est pas encore là, vous ouvrez le frigo, et vous vous rendez compte, "Oh putain, on n'a plus de lait." Donc, vous fermez le frigo, vous marchez dans la rue à CVS et obtenir des lignes plus longues pour acheter du lait au CVS. Pendant ce temps, votre colocataire rentre de sa classe, entre dans la pièce, ouvre le frigo vraiment vouloir un peu de lait, ouvre le frigo et, "Merde, pas de lait." Alors, il ou elle ferme le frigo, sort par la porte, et va à ABP ou quelque part d'autre que CVS où vous n'allez pas cogner les uns les autres pour aller chercher du lait. Bien sûr, quelques minutes plus tard, deux d'entre vous rentrer à la maison et maintenant vous avez deux fois plus de lait que vous avez réellement envie. Et étant le lait, maintenant ça va aller mal parce que vous aimez le lait mais vous n'avez pas vraiment comme le lait, alors maintenant vous avez trop de lait, donc ça va se dégrader. Il s'agit d'une terrible, terrible situation. Ce qui aurait pu résoudre cette situation si vous étiez la maison colocataire premier? Oui. [L'élève] Vous devriez avoir laissé une note. [Rires] Bon. Vous devriez avoir laissé une note. Tu aurais dû mettre une note Post-it ou autre en disant: "Autant en emporte le lait», puis votre colocataire conceptuellement aurait été en lock-out de faire effectivement cela. Ou vous pouvez aller 1 peu plus loin. Vous pouvez littéralement verrouiller le réfrigérateur avec une sorte de cadenas, et maintenant votre colocataire va littéralement être en lock-out du réfrigérateur. Si nous généralisons revenir à la programmation, vous pouvez presque penser au réfrigérateur comme une sorte de variable ou une structure, une sorte de conteneur pour les informations. Le problème fondamental est ici que deux d'entre vous ont été autorisés à inspecter ou de lire l'état de cette structure de données, mais vous l'avez vu à différents moments et pourtant tous les deux d'entre vous a pris une décision basées sur l'état du monde à ces différents moments dans le temps. Donc, si vous aviez verrouillé le réfrigérateur, vous auriez au moins évité votre colocataire d'avoir été en mesure d'inspecter l'état du monde, afin qu'il ou elle n'aurait pas pu faire la même décision. Ainsi, les bases de données, comme il s'avère, ce problème constamment. 

Voyons voir si nous pouvons construire un scénario. Supposons que vous êtes en quelque sorte un mauvais gars et vous allez à la Bank of America ou l'un des autres endroits dans le carré ayant un côté quelques distributeurs automatiques de billets à côte, et pourtant vous avez compris comment dupliquer une carte de guichet automatique - pas si difficile. C'est juste une bande magnétique. Et si ce que vous voulez essayer de faire, c'est de jouer à ce jeu par lequel vous mettez 1 carte dans 1 machine, une autre carte dans la machine d'autre part, et vous voulez essentiellement d'essayer de retirer de l'argent en même temps, parce imaginer que l'histoire se déroule comme suit. La machine prend sur la gauche de votre carte et votre NIP, et puis vous dites: «Donnez-moi 100 $." L'ATM est programmé pour d'abord faire une sélection sur la base de données ou l'équivalent - 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? Si oui, alors cracher la somme de 100 100 $ et de soustraire de leur équilibre. Mais bien sûr, si il ya plusieurs machines ici ou multiples façons de l'inspection l'état de ce monde, le coffre de banque, de voir combien d'argent vous avez, Supposons que par hasard l'appareil sur la gauche et la droite à la fois poser cette question à peu près au même moment dans le temps. 

Et cela peut certainement se produire. Les guichets automatiques sont les ordinateurs de nos jours. Donc, si l'appareil sur la gauche dit: «Oui, vous avez au moins 100 $», Pendant ce temps l'appareil sur la droite dit: «Oui, vous avez au moins 100 $», puis deux d'entre eux procèdent à terminer leur programme et fait cracher les 100 $ et dire: «Auparavant, il fallait 200 $." "Permettez-moi de mettre à jour la variable d'aujourd'hui à 100 $ dans le compte." Mais si les deux d'entre eux ont vérifié le solde de votre compte et constaté que c'est 200 $ et deux d'entre eux, puis faites le calcul et disons 200 - 100, les machines ont potentiellement cracher deux projets de loi de 100 $ dans chaque machine, mais ils ont seulement mis à jour le solde de votre compte à la somme de 100 $. En d'autres termes, vous avez pris 200 $, mais parce qu'ils inspecté l'état du monde en même temps, puis a pris une décision basée sur cette valeur, ils ne pourraient pas faire le calcul en fin de compte correctement. Ainsi, dans une situation trop banque vous voulez vraiment avoir une sorte de lock-out de sorte que dès que vous avez vérifié l'état d'une variable qui est vraiment important, comme le solde de votre compte, ne laissez personne d'autre prendre des décisions basées sur ce que vous avez fini de faire votre truc, où dans ce cas vous êtes le guichet automatique sur la gauche. Verrouiller tout le monde dehors. Vous pouvez réellement obtenir cet effet dans un couple de différentes manières. 

La façon la plus simple de MySQL est une ligne de SQL que nous vous avons dans la spécification ensemble de problèmes qui ressemble exactement à cela. Insérez-la dans le tableau - quelque chose comme ça - un identifiant, un symbole, et une part, un certain nombre d'actions, les valeurs suivantes, par exemple. Si vous n'avez pas lu la spec encore, il s'agit d'un exemple concernant la façon allez-vous achat de 10 actions de cette penny stock pour le président Skroob, ID utilisateur dont se trouve être le numéro 7? Ceci dit INSERT INTO table ci-dessous l'identifiant, le symbole et le nombre d'actions de 7 ", DVN.V ', et 10. Mais - mais, mais, mais - la deuxième ligne est la plus importante. ON DUPLICATE KEY UPDATE = part en titres + VALUES (actions). Donc totalement cryptique prospectifs au premier coup d'œil. Mais le fait que cette requête SQL, même si elle s'enroule sur 2 lignes, est de 1 requête longue, cela signifie qu'il est atomique en ce sens que cette requête va être exécutée avec ou tous ensemble ou pas du tout. Et par définition de MySQL, c'est la façon dont ils mis en œuvre cette requête. Il est, par définition, dans le manuel de garantie pour exécuter une seule fois ou pas du tout. La motivation pour cela est la suivante. Si, dans ce cas, vous essayez d'acheter 10 actions de stock, c'est un peu la même histoire que le lait, c'est un peu la même histoire que l'ATM. 

Si vous faites l'erreur de ne pas utiliser cette syntaxe mais au lieu de sélectionner à partir de la base de données pour voir combien de parts de cette penny stock Selon le président Skroob avoir, et suppose qu'il dispose de 10 actions, et puis certains fraction de seconde plus tard, vous effectuez une instruction UPDATE, qui est une autre déclaration SQL qui dit aller de l'avant et ajouter 10 plus d'actions à sa 10 Courant de sorte que, idéalement, le total est de 20, 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 vous avez plusieurs processeurs, noyaux multiples - en d'autres termes, les ordinateurs peuvent littéralement faire plusieurs choses à la fois - il n'ya aucune garantie que votre SELECT et UPDATE votre dans ce cas, vont se produire dos à dos. Ainsi, un mauvais scénario serait que vous faites la commande SELECT pour voir combien de parts de cette penny stock ne Skroob ont, et puis un peu par hasard une autre requête de base de données est exécuté - peut-être son Skroob dans une autre fenêtre du navigateur essayer d'acheter 10 parts dans une autre fenêtre tout à fait, un peu comme l'ATM - et supposons qu'une autre requête obtient entre SELECT et UPDATE. Ce pourrait être le cas que Skroob perd maintenant un certain nombre d'actions car un autre processus d'inspecter l'état de son monde, ou il obtient plus d'actions qu'il devrait avoir. Nous n'entrerons pas dans les détails de exactement ce que ces lignes de l'histoire particulière serait, mais le fait est que si vous devez vérifier la valeur des variables et ensuite prendre une décision, s'il ya un risque que quelqu'un d'autre le faire entre ces 2 états, comme cela peut arriver dans les systèmes multiprocesseurs, dans les systèmes multicœurs, ordinateurs avec la capacité de faire plusieurs choses à la fois, de mauvaises choses peuvent arriver comptes bancaires comme étant débité à tort, d'acheter du lait deux fois plus, ou dans ce cas le nombre d'actions mauvais. Mais il ya un moyen plus facile de penser à ce sujet. 

Il s'avère que SQL prend en charge également, si vous configurez votre table correctement, quelque chose qui s'appelle les transactions, ce qui à mon avis est en réalité encore plus facile à comprendre que cela, mais ce n'est pas un 1-liner, il est donc en réalité un peu plus compliqué. Il est littéralement une déclaration dans SQL appelé START TRANSACTION. Tout comme il ya SELECT, UPDATE, INSERT, DELETE et JOIN et un tas d'autres, il ya des mots clés comme START TRANSACTION. Et puis ce que vous faites dans le cadre de pset 7 - vous n'avez pas à le faire pour pset 7; il est explicitement nié que pas nécessaire, mais pour des projets finaux, il peut être utile - si vous appelez une requête de START TRANSACTION, puis une autre requête et puis une autre, puis une autre requête, un autre, et un autre, ces requêtes ne sera pas réellement exécutée jusqu'à ce que vous appelez l'instruction SQL COMMIT, à ce moment, que ce soit 2 déclarations ou 20 états, ils seront tous exécutés à la fois, ce qui signifie que personne ne peut acheter accidentellement trop de lait ou de débit trop d'argent ou acheter des actions de trop nombreux parce que toutes vos requêtes exécutera dos à dos à dos à dos. Et c'est super important, surtout quand vous faites quelque chose comme ça. Ceci est un exemple arbitraire qui dit mettons à jour le compte bancaire en établissant un équilibre égal au solde - 1000 $ si le numéro de compte est de 2. Et puis la seconde déclaration est maintenant, nous allons déposer que $ 1000 en quelqu'un d'autre compte bancaire dont le numéro de compte est de 1. 

En d'autres termes, il s'agit d'un parfait exemple de l'endroit où vous voulez vous assurer que que ces deux déclarations se produire ou pas du tout parce que sinon, le client va se faire défoncer et vous allez prendre leur argent et de ne pas déposer ailleurs, ou la banque va se faire défoncer où vous allez déposer l'argent mais pas réellement soustraire du compte de l'utilisateur. Donc, vous voulez tous les deux pour exécuter ensemble. Entre ainsi dans les transactions mondiales. Donc, c'est quelque chose à garder à l'arrière de votre esprit, non pas tant pour les besoins de tout un projet final, mais si vous voulez prendre votre projet final quelque part, si vous voulez faire démarrer une entreprise autour d'elle, si vous voulez résoudre le problème de certains groupes étudiants sur le campus et effectivement avoir un live, site actif, ce sont le genre de bugs subtils qui peuvent survenir si vous n'avez pas tout à fait réfléchir à ce qui peut arriver si 2 personnes essayez d'accéder à votre site Web à littéralement au même moment dans le temps, où leurs requêtes pourraient autrement être imbriqués. 

Prêt pour un peu de JavaScript, un teaser de celui-ci? Il s'agit de notre dernière langue pour le semestre. Très bien. Heureusement, JavaScript semble très, très, très semblable aux 2 langues, C et PHP, nous avons fait jusqu'à présent. Il n'y a pas d'activer JavaScript pset 7, mais c'est un outil incroyablement utile quand il s'agit de faire des projets sur Internet finales ou vraiment juste la programmation web en général. Ainsi, un rapide aperçu de ce qu'on appelle DOM. Voici une page web super simple qui a vraiment dit juste bonjour, monde à la fois dans le titre et dans le corps. Comme l'indentation a laissé entendre pendant un certain temps, il ya en effet une hiérarchie de pages Web. Je pourrais faire ce bout de code HTML que même un arbre, en repensant à nos discussions sur les structures de données en C, comme suit. J'ai un nœud racine spécial appelé le nœud du document, et nous verrons l'analogue de ce en JavaScript dans un instant. Le premier enfant et fille unique de ce que dans ce cas est la balise HTML. Il n'y a pas de mappage direct du doctype. C'est quelque chose de spécial, donc nous devrions simplement l'ignorer quand il s'agit de ce DOM, cet arbre Document Object Model. Notez que la balise HTML, que j'ai représenté arbitrairement comme un rectangle, a 2 enfants: la tête et le corps. 

Ceux-ci sont même établis sous forme de rectangles. Il est utile que la tête est imagée à la gauche du corps. L'implication est que la tête vient en premier dans l'arbre. Donc, il ya en fait une commande à un arbre quand vous le dessiner comme ça, même si les formes et autres joyeusetés sont arbitraires. Tête a quant à lui un enfant unique appelé titre, et le titre a fait son propre enfant, ce qui est "bonjour tout le monde", que j'ai délibérément attiré comme un ovale ici pour la rendre légèrement différent du rectangle. Ces rectangles sont des éléments, alors bonjour, monde est vraiment un nœud de texte. C'est donc un nœud de l'arbre, mais c'est un autre type de noeud si je l'ai dessiné arbitrairement différemment. Ne même corps ont un enfant appelé bonjour, monde aussi bien, nœud si différent même si elles sont par coïncidence le même texte, mais je l'ai dessiné en utilisant la même forme. Alors, qui s'en soucie? Eh bien, ce qui est bien sur le langage HTML, c'est qu'il ne avoir ce caractère hiérarchique. Et ce qui est bien à propos de Javascript et en particulier les bibliothèques qui sont disponibles gratuitement et populaire comme jQuery, vous pouvez naviguer dans l'arborescence de façon étonnamment facile. Tout les trucs que nous avons fait en C avec des pointeurs et des arbres traversants et récursion sur les nœuds enfant de gauche à droite à l'enfant, tout d'un coup, nous pouvons trier de prendre pour acquis comme étant incroyablement enrichissante si elle n'est pas un peu frustrant mais pas un moyen efficace d'aller sur la programmation. Ainsi, avec ces langues de niveau supérieur comme JavaScript nous serons en mesure de naviguer dans cette arborescence beaucoup plus intuitive. 

Et en effet, la syntaxe va être assez familier. Si vous n'avez jamais vu avant JavaScript, c'est une référence très agréable par les gens de Mozilla, les gens qui font de Firefox, il ne faut n'hésitez pas à parcourir ce que, à votre convenance. Ce que vous trouverez - et ces lames sont identiques à ce que nous avons utilisé l'autre jour - De même, principale a disparu. Ainsi, lorsque vous écrivez un programme en JavaScript, il n'ya pas de fonction principale. Vous venez de commencer à écrire du code. Mais une distinction fondamentale entre JavaScript et C et PHP est que, tandis que C et PHP jusqu'à présent ont été exécutés côté serveur par l'appareil dans ce cas, ou plus généralement par un serveur, JavaScript par leur conception est habituellement exécuté par un navigateur. En d'autres termes, vous pouvez écrire du code JavaScript, comme nous sommes sur le point d', sur un serveur dans l'appareil, mais vous l'inclure parmi vos pages HTML, entre votre CSS, parmi vos fichiers GIF et PNG et vos vos images JPEG de sorte que lorsque l'utilisateur visite votre page Web, si vous utilisez JavaScript, que le code JavaScript vient du serveur au navigateur, et c'est le navigateur qui exécute réellement. Donc, cela a des implications significatives pour la propriété intellectuelle même. C'est idiot de même penser à protéger votre adresse IP quand il s'agit de code JavaScript parce que, par nature, de la langue, il est exécuté habituellement côté du navigateur. 

Vous pouvez le masquer, ce qui signifie que vous pouvez lui donner l'air fou et laid sans espace, horribles noms de variables, pour rendre plus difficile pour les gens de voler votre IP, mais l'essentiel est qu'il soit exécuté côté du navigateur. Même si en tant que côté serveur côté JavaScript peut être utilisé, le cas d'utilisation le plus courant actuellement est toujours sur le navigateur. Et voici à quoi il ressemble. Voici un if-else if-else, tout comme C, tout comme PHP. Voici une expression booléenne lorsque vous "ou" 2 choses ensemble. C'est à ce moment que vous "et" 2 choses ensemble. Voici une instruction switch, qui est similaire à PHP en ce que vous pouvez basculer sur les différents types de valeurs. Les boucles ont même pour les boucles ici, qui sont structurés de manière identique à ce que nous avons vu auparavant. Alors que les boucles, nous avons obtenu le faire tout en boucles. Variables, un tant soit peu différente. Vous déclarez des variables comme vous le faites en PHP et C, mais est similaire JavaScript faiblement typé. Vous ne spécifiez pas int ou float ou une chaîne ou quelque chose comme ça plus souvent. Vous pouvez spécifier var. Vous n'avez pas à spécifier var, mais elle a des implications si vous n'aimez pas. Habituellement, si vous omettez var, vous créez accidentellement une variable globale au lieu de local. Alors laissez-moi vous proposons presque toujours juste dire var, puis le nom de la variable. Ce n'est pas un type, c'est juste pour la variable var. Ce serait un exemple, que ce soit 123 ou "bonjour tout le monde". Les tableaux sont présents et syntaxiquement similaire à PHP. Je dirai var numbers puis-je utiliser des crochets à nouveau pour déclarer une variable dont le type est un tableau qui a ces nombres particuliers à l'séparées par des virgules. Et puis enfin, c'est le seul qui a l'air vraiment différent. Rappelons que dans PHP nous avons mis en place un tableau associatif pour un étudiant comme Zamyla qui pourrait ressembler à ceci, où la variable est appelée étudiant. Les crochets signifient voici un tableau. 

Le fait que je ne suis pas en utilisant des indices numériques, mais les chaînes - id, maison, et le nom - signifie qu'il s'agit d'un tableau associatif, et ces flèches avec le signe égal et l'équerre signifie que la clé est "id", la valeur est 1; la clé est «maison», la valeur est Winthrop House; la clé est "nom", la valeur est Zamyla Chan. Donc, il ya 3 touches à l'intérieur de ce tableau associatif, dont chacun a sa propre valeur. Nous avons vu que dans pset 7, ou vous sera bientôt, en même idée JavaScript, mais ça va ressembler à ceci. Alors étudiant var - pas de signe de dollar et aucune mention de type encore mais var - égal à, puis ouvrez accolades car en JavaScript lorsque vous avez paires clé-valeur, vous utilisez réellement quelque chose qui s'appelle un objet. Et ceux d'entre vous qui ne prenez APCS ou similaires souvenez peut-être des objets de Java ou des langues proches. JavaScript n'est pas Java, tout d'abord. 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, son nom, même si elle n'a aucun rapport fondamental de se Java. JavaScript a objets, et vous les créer, par voie de la notation accolade. Objets JavaScript sont à peu près équivalentes aux tableaux associatifs en PHP quand il s'agit de stocker des données à l'intérieur d'eux. 

Mais encore plus puissamment en JavaScript peut vous associer très facilement les fonctions à l'intérieur d'un objet, et si vous pouvez le faire dans d'autres langues, c'est tout un paradigme commun, comme nous le verrons. En bref, cet objet représente un étudiant, qui est particulièrement Zamyla, et il est conceptuellement similaire, juste syntaxiquement différent de cela. Nous allons en fait utiliser JavaScript dans un fichier. Il s'avère qu'il ya une balise script. Nous avons vu une balise style et nous avons vu d'autres balises HTML. La balise script sera effectivement contenir du code JavaScript. Laissez-moi aller dans l'appareil où nous avons du code source de pré-faites. Je ne l'ai pas encore publiée sur le site, mais je vais le faire après la classe. Ouvrons celui-ci, blink.html. Retour dans les années 1990, il y avait littéralement une balise HTML appelé la balise blink, et ce fut une des balises les plus éculés merveilleusement sur Internet lequel vous souhaitez visiter la page web de style années 1990 et commencer à voir texte clignotant comme celui-ci, les résultats de la balise marquis, qui avait texte va comme ceci. Une des rares fois où le monde a effectivement mis d'accord sur un format web standard, tout le monde à travers le conseil d'administration a tué le tag clin il ya quelques années. Mais on ne peut le ressusciter avec JavaScript comme une démonstration de la puissance dont vous avez quand vous pouvez écrire un programme à l'intérieur d'une page web. D'abord nous allons sauter par-dessus les nouvelles choses et se concentrer uniquement sur l'ancien. 

Voici les vieux trucs dans cet exemple. J'ai une balise HTML, une balise de tête, et une balise de titre. Ensuite, j'ai une balise body ici avec un div, qui est juste un rappel division rectangulaire de la page que je vous ai donné un identifiant unique arbitrairement des "voeux" à, 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: bonjour, monde. Maintenant, permettez-moi de faire défiler vers le sommet de ce fichier et voir ce qui est nouveau. La première chose qui est nouveau, c'est l'appoint de la balise script, et à l'intérieur de l'avis de balise script que j'ai déclaré une fonction. Pour déclarer une fonction en JavaScript, assez similaire à PHP, vous avez littéralement écrire la fonction, le nom de la fonction, les parenthèses, et peut-être quelques arguments si elle prend tout. Ensuite, j'ai obtenu mon accolade comme d'habitude, et maintenant nous avons un peu de code un peu nouvelle, mais nous allons voir ce que cela signifie. Donc div var, cela signifie juste me donner un div variable appelée. J'aurais pu appeler ce truc, mais je voulais qu'elle soit appelée div pour des raisons qui seront claires en une seconde. Puis il se trouve en JavaScript - et il s'agit du code JavaScript intégré dans ma page web - il ya une variable globale spéciale des sortes dites document. JavaScript est en fait un langage orienté objet. Nous n'allons pas entrer dans les détails dans 50 quant à ce que cela signifie, mais pour l'instant sait qu'un objet est à peu près comme un struct. Comme nous l'avons vu dans le chemin du retour quand l'un des premiers modules de problèmes où nous avons mis beaucoup d'informations dans une structure, est similaire documenter une structure spéciale qui vient avec le navigateur, est livré avec n'importe quelle page web. Ce n'est pas quelque chose que j'ai créé. A l'intérieur de cette structure du document, cependant, vous devez non seulement des données mais vous avez également des fonctions. 

Et chaque fois que vous avez une fonction à l'intérieur d'une structure, à l'intérieur d'un objet, ça s'appelle une méthode. Mais c'est la même chose. Une méthode est une fonction qui se trouve juste à être à l'intérieur de quelque chose d'autre. Donc, cela signifie que cette variable globale spéciale appelée document de a une fonction appelée getElementById qui fait littéralement cela. Il vous procurera un élément du DOM, Document Object Model arbre, dont l'ID est dans ce cas de voeux. En d'autres termes, tout ce temps que nous avons passé sur les structures de données entre en jeu ici. Cette image d'un DOM que nous avions il ya un instant, même si la page est un peu différent, si j'avais un div dans cette image, document.getElementById ce serait revenir à moi serait effectivement un pointeur le rectangle dans l'arbre, une référence du rectangle dans l'arborescence. Donc, c'est ce que signifie réellement appeler une de ces fonctions. Dans ce cas encore, il s'agit d'un div. Ce n'est pas un corps ou d'un titre. Voyons donc ce que je puis faire avec cette div maintenant que je l'ai à l'intérieur de ce div variable appelée. Il s'avère avec JavaScript, vous avez la possibilité de modifier le CSS de votre page dynamiquement. Jusqu'à présent, tous les CSS que nous avons fait, bien que limitée, est en attributs de style, ou si d'autre avons-nous mis CSS? J'ai un peu gâté celui-là. Dans la balise de style au sommet du fichier. Ou la troisième place a été? 

Un fichier externe, quelque chose. Css. Donc, ce sont les 3 endroits que nous avons fait jusqu'à présent CSS, mais le hic, c'est que nous avons codé en dur tout ça. Vous avez décidé que vous avez plongé dans pset 7, nous avons décidé avant la leçon que notre CSS serait. Mais si vous voulez changer votre CSS, vous pouvez réellement faire une fois que vous avez un langage de programmation actuelle. CSS, HTML - Langues pas de programmation. Javascript. Ainsi, il s'avère que dès que vous avez un de ces rectangles de l'arbre appelé le DOM, il a lui-même certaines données à l'intérieur de celui-ci. Ainsi, le div que je viens saisi de l'arbre a ce que nous appellerons une propriété à l'intérieur de celui-ci appelé le style et la propriété de style a lui-même une propriété appelée visibilité. Je sais ce que en recherchant un manuel d'utilisation de CSS. Il s'avère qu'il ya une propriété de visibilité CSS qui fait ce qu'il dit. Il fait quelque chose de visible ou non, visible ou non. Et comment tu fais ça est la suivante. Je demande par programme si la visibilité de cet élément div est caché, Que dois-je changer pour? Visible. Sinon, si la visibilité de cette page n'est pas caché, logiquement je ne le rendre invisible. Je n'ai aucune idée pourquoi il est visible et caché et non visible et invisible. Ce fut une décision mauvaise conception le long du chemin. Mais ceux-ci sont en effet opposés à CSS: visible et cachée. Tout cela ne fait que cela veut dire changer le CSS de mon dossier sur et en dehors, sur et en dehors pour que div particulier. Mais encore une fois, il s'agit d'une fonction appelée clin d'oeil. Lorsque la fonction est appelée clin? Il s'avère qu'il ya une autre fenêtre spéciale mondiale variable appelée, dans le même esprit de document, mais que le document se réfère à votre page Web, comme l'arbre DOM, le code HTML que vous avez envoyé à partir du serveur, se réfère à la fenêtre de chrome autour d'elle, la barre d'adresse, la barre de titre, et toutes ces choses autour de votre page web. 

Et il s'avère que l'objet window possède une fonction spéciale à l'intérieur de celui-ci s'appelle setInterval qui fait ce qu'il dit. Il établira un intervalle - dans ce cas toutes les 500 millisecondes - et, devinez, ce que ça va faire toutes les 500 millisecondes? Il va exécuter la fonction qui clignotent. Et ce qui est bien ici, c'est que nous aurions pu faire cela en C, même si nous n'avons jamais fait. C fait quelque chose qui s'appelle pointeurs de fonction où vous pouvez passer autour fonctions comme arguments. De même, en JavaScript peut vous passez le nom d'une fonction dans une autre fonction. Et remarquez ce que je fais. Je ne fais pas ça. Si je mets entre parenthèses après le clignotement, cela voudrait dire appeler la fonction de clignotement. Si je les omettre, ce qui signifie ici est la fonction de clignotement de sorte que setInterval peut appeler ça toutes les 500 millisecondes. Donc le résultat final, atroce soit-elle, est que si je vais dans localhost et aller à blink.html, J'ai maintenant ce qui se passe encore et encore. Et si je fait inspecter l'élément, nous allons voir si nous pouvons le voir. Permettez-moi Inspecter l'élément, permettez-moi de faire défiler vers le bas juste un peu, permettez-moi de choisir des éléments plus ici, et notez l'intérieur des DOM inspecteur de Chrome. Il est littéralement changer d'avant en arrière toutes les 500 millisecondes. Si nous revenons à notre ami Nate, si vous jamais demandé comment cela fonctionne, une idée similaire avec un intervalle, mais Nate rend en fait une utilisation très efficace de la couleur dans ce cas particulier ici. Alors que pouvons-nous réellement faire avec ça? Ouvrons un autre exemple et essayer quelque chose C'est programmation encore plus utile que de faire clignoter les choses. Laissez-moi aller dans notre annuaire formes aujourd'hui et aller dans form0. Il s'agissait de la forme plus laide possible que je pouvais venir avec, et laissez-moi juste vous montrer à quoi il ressemble dans un navigateur. 

Laissez-moi aller dans localhost / formulaires, et c'est form0. C'est un super vilain forme HTML qui possède quelques champs pour le courriel, un mot de passe, mot de passe, puis une case à cocher peu à accepter certaines conditions. Le hic, c'est que je visite ce formulaire et je ne veux pas vous donner mon adresse e-mail, Je ne veux pas d'accord avec les termes et conditions peut-être, je peux cliquer sur Enregistrer et cela me permet de toute façon. Cela arrive de se soumettre à un fichier PHP appelé dump.php stupide. Tout ce qu'il fait est d'imprimer le contenu de $ _GET seulement à des fins de diagnostic. C'est ce qui a été soumise par l'utilisateur à l'instant. Mais supposons que nous voulons effectivement valider la soumission du formulaire de l'utilisateur. Laissez-moi aller dans la version 1. C'est form1.html. Il semble esthétiquement tout aussi mauvais, mais remarquez comment il est fantaisie. Si je clique sur Enregistrer sans coopérer, je me crie dessus. "Vous devez fournir votre adresse email." Très bien. Alors laissez-moi essayer. Donc malan@harvard.edu. Je n'ai pas besoin d'un mot de passe. Inscrivez-vous. "Vous devez fournir un mot de passe." Très bien. Donc, je vais donner un mot de passe de pourpre. Inscrivez-vous. "Les mots de passe ne correspondent pas." Je dois maintenant entrer ici cramoisi. J'ai accidentellement vérifié que. Inscrivez-vous. "Vous devez accepter les termes et conditions." Très bien. D'accord là. Inscrivez-vous. Et maintenant, il me montre la sortie de diagnostic là-bas. 

Alors qu'est-ce qui s'est passé? Nous avons eu cette possibilité de valider la soumission de formulaire. En fait, si vous ne plongez dans pset 7, il ya une fonction de m'excuser qui le rend assez facile de crier à l'utilisateur par un message sur l'écran. J'utilise un mécanisme légèrement différent, la fonction d'alerte, ce qui n'est pas une fonction qui est sourit car elle rend messages d'utilisateurs très laid. Mais attendons de voir ce que je fais ici. C'est form1.html, et notez que j'ai un peu de syntaxe assez familier: balise body, balise de formulaire, l'attribut action, attribut de méthode. Mais remarquez que je vous ai donné ma forme d'un ID unique pour plus de commodité. Ensuite, j'ai un champ email dont le type est texte, un champ de mot de passe dont le type est champ de confirmation mot de passe, dont le type est le mot de passe puis une case à cocher dont le nom est 'accord ici, est de type case à cocher. Et puis j'ai un bouton d'envoi. Mais remarquez en haut ce que je n'ai plus. Tout d'abord, il ya une autre utilisation de la balise script. Si vous avez un peu de code JavaScript dans un autre fichier, tout comme avec les CSS, vous pouvez l'inclure. Et tu fais ça avec la source du script, puis notez que je me connecte apparemment à googleapis.com à un très long chemin, mais dont le nom de fichier se termine par jquery.min pour un minimum. js. jQuery est une bibliothèque JavaScript pour super populaire qui fait juste JavaScript d'autant plus conviviale à utiliser. Il est effectivement devenu un standard de facto. Ainsi, même si ce que vous allez voir n'est pas pur JavaScript soi, il s'agit d'une bibliothèque au-dessus de JavaScript un peu comme la bibliothèque CS50 est une couche au-dessus du code de bas niveau C, la réalité est presque tout le monde sur Internet qu'il utilise. Donc, ce ne sont pas des roues de formation. C'est tout simplement le meilleur pratiquer ces jours-ci. Maintenant, remarquez ci-dessous qui est ma propre balise script, et remarquez ce que j'ai fait ici. Il s'avère que jQuery fait quelque chose d'un peu de fantaisie. JavaScript doit signes dollar, mais ils n'ont pas de sens. 

Ils sont comme la lettre A, B ou C. jQuery a simplement adopté la convention ou sorte de revendiquaient le fait que $ sera leur symbole spécial. Donc dès que vous chargez ce fichier JavaScript global ici avec la balise script, vous avez accès à une variable globale spéciale qui s'appelle $. Il est plus correctement appelé jQuery, mais cela ne veut pas l'air aussi sexy que $. Mais $ n'a pas de signification particulière. En PHP, il avait une signification particulière. Vous avez eu à l'avoir en face d'une variable. C'est juste un truc sexy qui ils ont pris. Qu'est-ce qui se passe ici? Remarquez que je suis de passage à la fonction jQuery mon document de variable globale et puis je vais appeler. prêt. Que jQuery ne essentiellement est qu'il vous permet de prendre certaines choses JavaScript vanille comme l'objet du document, l'objet window, et si vous passez à la fonction jQuery - et encore une fois, pour être clair, il s'agit d'une fonction appelée jQuery - ce qu'il fait est qu'il revient à vous une version spéciale du document qui a plus de fonctionnalités qui lui est associée. Donc en JavaScript brute, il n'ya pas de fonction prête, mais si vous passez document à la fonction jQuery première fois, il revient à vous d'une version spéciale de l'objet document qui a plus de fonctionnalités de fantaisie. Et c'est pourquoi les gens l'aiment. Il rend juste les choses plus faciles à faire, comme nous allons voir. Alors qu'est-ce que cette ligne de code signifie? Cette ligne de code signifie ici quand le document est prêt - en d'autres termes, une fois que le navigateur se fait la lecture de ce fichier en haut en bas - aller de l'avant et d'exécuter la fonction suivante. Ce qui est vraiment intéressant dans JavaScript - et PHP a aussi - est des fonctions anonymes. En JavaScript, vous pouvez déclarer des fonctions qui n'ont pas de nom, mais ils ont un corps. Remarquez ce qui se passe ici. 

Il s'agit d'une fonction appelée prêt, et cela signifie juste faire ce qui suit quand toute la page Web est prêt, quand tout a été lu par le serveur. Que voulez-vous faire? Je veux exécuter un morceau de code. Notez que nous ne voulons pas d'exécuter ce code tout de suite. Si j'ai omis ceci, cela signifierait immédiatement commencer à exécuter ces lignes de code. Mais le fait que je veux dire, non, non, non, enveloppez-ce dans une fonction anonyme comme ceci moyens ne l'exécute pas encore; l'appeler par la suite. Nous l'avons vu il ya un moment dans notre exemple de formulaire précédent. Quelle est la fonction ne nous appelons par la suite, 500 millisecondes plus tard? Blink. Donc, l'idée même. Encore une fois, même si cela semble un peu bizarre, il suffit de prendre pour le moment sur la foi que de déclarer une fonction anonyme qui a appelé par la suite, il suffit d'écrire function () { Alors quel est le code que nous allons exécuter la suite? Ce qui suit. Cela ressemble un peu trop nouvelle, mais cela signifie, voici la fonction jQuery, et c'est maintenant un raccourci. Cet extrait de code HTML au bas de l'écran a bien sûr une certaine représentation de l'arbre. Ce n'est pas cela. Cette page est plus intéressant que ce bonjour, monde par exemple. Mais il ya un arbre qui correspond à ce tableau d'ensemble. Ce serait une douleur dans le cou d'avoir à mettre en œuvre une sorte de fonction récursive à commencer par le nœud racine, puis trouver le nœud dont l'identifiant est l'enregistrement. Alors que jQuery rend très facile pour nous, c'est littéralement ce sujet. Allez-y et moi obtenir ce que div ou forme que ce soit, quelle que soit l'élément HTML possède un ID d'enregistrement. Ceci est équivalent à document.getElementById ("enregistrement"). 

Pourquoi les gens comme jQuery? Parce que c'est plus court à taper. Mais c'est tout ce qu'il est. C'est la même idée. Donne-moi la balise dont l'ID est l'enregistrement. Et quand cette étiquette, qui se trouve être une forme, est soumis, aller de l'avant et d'exécuter ce code. Alors prenons un regard maintenant comment nous faisons la validation du formulaire. La syntaxe est certes énigmatique au premier abord, mais ce qui se passe? Si cette ligne de code est vrai, je vais crier à l'utilisateur de fournir son adresse e-mail. Alors, quelle est cette ligne de code? $ Signifie jQuery. Maintenant remarquez ceci. C'est un peu comme CSS. Si vous avez encore plongé dans CSS, vous savez que cela signifie que l'élément dont l'ID est l'enregistrement. L'espace, c'est trouver un enfant ou un descendant de l'enregistrement dont le nom est entré. Et puis cette chose entre crochets est un petit filtre. Et même si cela semble énigmatique, cela signifie simplement accéder au formulaire d'inscription dont l'ID est, aller à l'intérieur de l'élément d'entrée de celui dont le nom est le courrier électronique, puis obtenir sa valeur, quelle que soit sa valeur se trouve être - asdf si c'est tout ce que j'ai tapé ou malan@harvard.edu si c'est ce que j'ai tapé. Donc, si la valeur du champ email du formulaire == rien, crier à l'utilisateur. Sinon, si la valeur du champ Mot de passe == rien, crier à l'utilisateur. 

Sinon, si la valeur du champ mot de passe n'est pas égale à la valeur du champ de confirmation, qui était l'élément autre forme, crier à l'utilisateur. Et puis enfin - et celui-ci a aussi une nouvelle syntaxe qui lui est propre, mais une fois que vous l'avez vu, il est au moins un peu plus raisonnable - else if la forme dont l'ID est l'enregistrement comporte un élément d'entrée dont le nom est l'accord et il est vérifié, aller de l'avant et de crier à l'utilisateur. Donc, je suis entièrement d'admettre que c'est complètement écrasante au premier abord. Il ya beaucoup de nouvelle syntaxe. Mais tout de jQuery suit ces sortes de motifs. Et honnêtement, je ne savais même pas existé jusqu'à présent il ya quelques minutes. J'ai googlé, "Comment pouvez-vous vérifier si une case est cochée dans jQuery?" et c'est la syntaxe, parce qu'il ya différentes façons de le faire avec le code JavaScript réelle brut. Alors que la première page du 7 Set problème souligne, pset 7 est très bien un exercice en soi bootstrap où nous avons fourni, nous l'espérons, un cadre conceptuel qui permet de lutter contre le pset. 

Mais comme c'est souvent le cas avec le web design, c'est vraiment à vous de fouiller, incorporer des bouts de code et des exemples sur le Web aussi longtemps que vous les citer selon les modalités que sur la première feuille, et de réaliser que l'apprentissage du HTML, CSS, JavaScript et même SQL est vraiment destiné à être cet exercice à la maison alors que nous commençons à prendre ces roues d'entraînement hors tension. Et se rendre compte aussi, il ya tellement de choses que vous pouvez faire plus avec un navigateur. A l'intérieur de la plupart de ces éléments, il ya d'autres choses appelées gestionnaires d'événements. Et même si nous avons juste regardé les appelle onsubmit et onReady, vous pouvez faire des choses comme onkeydown, onkeyup, comme lorsque l'utilisateur touche une touche, vous pouvez écouter et jusqu'à ce que la touche. Gmail a des raccourcis clavier. Comment Google en œuvre des raccourcis clavier tels que C pour composer? Ils écoutent les événements, comme on les appelle, comme onkeypress ou onkeyup et onkeydown. Si vous avez déjà plané votre souris sur une option de menu et tout d'un coup, voila, un menu s'affiche ou le graphique en couleur des changements, comment font-ils cela? Plutôt que d'écouter les onReady ou onsubmit, vous écouter pour onmouseover onmouseout ou. 

Donc en bref, avec ces bases très simples que nous avons commencé à gratter la surface d'aujourd'hui et nous allons plonger dans la suite de ce mercredi, vous avez, en plus, pouvoir de mettre en œuvre le genre de choses que vous êtes déjà familier. Donc, nous allons terminer là, et nous allons continuer ce mercredi. 

[CS50.TV]