[Lecture de musique] DAVID Malan: Ceci est CS 50, et ceci est le début de la neuvième semaine. Et ce que nous avons pensé que nous ferions aujourd'hui ne sont pas seulement clore le chapitre sur la semaine dernière de matériel où nous nous sommes concentrés sur le serveur programmation web côté avec PHP et SQL, des trucs de base de données. Nous en parlerons un peu de sécurité aujourd'hui et puis passage à une programmation côté client langue connue comme JavaScript. Mais d'abord, certains rachat. Vous vous souviendrez que sur Mercredi, je suis parti d'écrire un site Web qui pris dans l'entrée de l'utilisateur par un formulaire HTML qui ensuite stockées que les noms d'entrée de l'utilisateur, téléphone numéros, et téléphone portable transporteurs dans la base de données. Et puis je eu un peu de commande script de ligne écrit en PHP qui était censé parcourir sur les lignes dans la base de données et envoyer des messages texte. Malgré plusieurs, plusieurs tentatives, nous ne pas obtenir ce travail à la fin. Je passais donc toute cette semaine de travail sur ce code pour nous faire passé le point où nous nous sommes quittés, selon lequel tous les Je suis à la fin du mercredi était ce message texte de Margo que je luttais, suivie d'un message de texte d'un autre camarade de classe, vous avez ce David. Suivi par celui-ci, merveilleusement encourageant. Continué à aller, très encourageant. Je suis presque jusqu'à alors-- et qui est la note que nous avons fini le mercredi. Et puis en fait peut-être mon préféré, un moment plus tard, ce entra. Merde Retransmissions en direct. Donc, aujourd'hui, nous fixons ce avec une rapide regarder ce que je l'ai fait depuis. Donc, tout ce code est disponible de la semaine dernière, huit semaines en ligne, code source. Et vous verrez que je suis allé à travers, et je réellement nettoyé un peu les choses. Je présenté un autre couple caractéristiques d'une base de données SQL. Par exemple, plutôt que juste faire transporteur de charbon var car je pense que je l'ai fait à la volée la semaine dernière. Je place le définit comme ce qu'on appelle une énumération. Et certains d'entre vous ont vu ce comme nous avons exploré C. Enum est en fait une fonction de C où vous pouvez énumérer tout un tas de constantes et affecter les valeurs automatiques, comme un, deux, trois, quatre sans avoir les numéros de code des disques. Donc SQL prend en charge le même, laquelle, si vous avez un champ de base de données que vous ne vouloir prendre sur l'un des finis valeurs, vous pouvez littéralement spécifier comme je l'ai fait là-bas pour quatre transporteurs de téléphones portables américains populaires. Donc je l'ai fait. Et je fait un certain nombre de changements que De plus, la plus importante étant était d'obtenir e-mail fonctionne parce rappel, que ce programme est appuyé sur lequel généralement appelé un e-mail à passerelle SMS, qui est juste une façon élégante de dire que Verizon, et AT & T, et d'autres personnes soutiennent un serveur, de sorte que si elle reçoit e-mail, il le convertit en SMS et envoie un texte un message sur le téléphone de quelqu'un. Donc, si je l'ai fait correctement, ici est une forme nouvelle et améliorée qui va parler Code nouveau et amélioré, qui vous pouvez jouer avec en ligne. Et il faut espérer que mon bip de téléphone dans un instant. Alors d'abord, je vais taper mon nom. Deuxièmement, je ne vais pas à faire cette fois. Je vais faire Inspecter l'élément. Et ceci est juste un petite chose que je ne sais pas créer des heures de post-production travaille comme je l'ai fait la dernière fois. Il est maintenant mon numéro de téléphone. Je vais choisir Verizon. Et ici, nous allons activer ce microphone ici, et viser ce mon téléphone ici. Je vais cliquez sur Enregistrer, qui devrait, espérons mettre dans la base de données. Maintenant, je vais aller à la programme en ligne de commande, qui rappel a été appelé slash dot texte, et croiser les doigts. Et ce est parti. [DINGS téléphone] [Applaudissements] DAVID Malan: Donc, plus amusant que this-- il est amusant, bien sûr, si je suis en elle. Mais il est plus amusant, je pensais que, si nous créé un de ces moments de cinéma où comme quelque chose de vraiment Il ya un problème dans le monde, et comme tous les gens NSA les téléphones portables commencent à émettre des bips avec des messages texte les avertissant de ce fait. Donc, je pensais que nous allions essayer de recréer la même chose ici, où ne pas utiliser une base de données, Je place à l'avance a écrit un programme qui ressemble à ceci. Ceci est un index.php-- et je mets ce code en ligne comme well-- qui, apparemment, rend juste form.php, en utilisant un paradigme de style MVC que nous parler plus en détail dans le jeu de problème Sept. Cette forme est assez simple. Il va se soumettre à un fichier appelé here.php par la poste. Et il est apparemment vais demander un nom et un numéro de téléphone, et ensuite par l'intermédiaire de ce qu'on appelle Sélectionnez le menu, il est vais vous donner au moins quatre transporteurs de téléphones portables américains populaires, et vous permettent ensuite de manière efficace prendre les présences en cliquant ici. Et ici, quant à lui, va emprunter une partie du code de la dernière fois. Et si vous vous contentez ce, vous verrez qu'il ya tout un tas de vérification d'erreur. Mais la beauté à la fin est que nous ne sommes pas à écrire à une base de données aujourd'hui. Nous gardons les choses simples et juste envoi espérons un message texte via la fonction I écrit sur le passé appel quelques jours Texte, qui est en fonctions. php, qui est encore disponible en ligne. Donc, si vous souhaitez participer à cette. On ne va pas à stocker quoi que ce soit. Aller à l'URL ici en temps réel. Ne pas soumettre tout de suite, mais de laisser voir si nous pouvons avoir un de ces film moments où le téléphone portable de tout le monde commence à émettre des bips, espérons juste une fois cette année, contrairement à 2011 où ce a horriblement mal tourné. Et une fois que vous allez à cette adresse, vous devriez voir une forme super simple que si vous avez un nom, un téléphone cellulaire nombre, et un support de téléphone portable qui correspond à la liste là, aller l'avant et remplir le formulaire. Mais ne frappe pas présenter tout de suite. La forme va ressembler à ceci. Allez-y et tapez votre nom, votre numéro de téléphone. Oop, quelqu'un va de l'avant de la courbe. Ce est OK. OK, tout le monde est rempli le formulaire. Cela devrait fonctionner sur un téléphone, aussi, si vous voulez. Tout droit, à vos marques, prêts, partez. Hit ici. Quoi? Non. Je jure devant Dieu, je l'ai testé ce à plusieurs reprises aujourd'hui. Vous l'avez? [Interposition VOIX] DAVID Malan: OK, peut-être une erreur d'utilisateur. Voilà deux. Il a travaillé pour deux d'un quelques centaines, trois, quatre. OK, ce qui est bon. Quatre sur cinq pour décision correcte que diriez-vous. Alors, que vient de se passer? On peut donc supposer, sans voir votre écrans, pourquoi pourrait-elle avoir erronée? Il est probablement que nous étions juste essayer de faire trop de connexions pour le serveur de messagerie de Harvard tout à une fois de la même adresse IP. Je devine juste que je ne l'ai pas avoir le luxe de tests ce code avec certains 300 personnes à l'avance mais pour l'instant se rendre compte que qui devrait au moins avoir obtenu le travail fait cette fois. Très bien, alors pourquoi est-ce tout le plus germane à ce qui se passe? Eh bien d'abord, un rapide quelques annonces. Donc un, si vous souhaitez vous joindre à Chang, et Nick, et d'autres à déjeuner ce vendredi, faire RSVP à l'adresse habituelle il. Si vous envisagez de concentration ou faire un secondaire en CS, si vous êtes un étudiant en deuxième année, ou étudiant de première année, ou encore junior ou senior à ce point et peut encore serrer dans les cours, se rendre compte que l'école d'ingénieurs est la collecte gratuitement et Ben La crème et des conseils de glace de Jerry ce mercredi peu après la classe à 16h00 dans le bâtiment CS Maxwell Dworkin. Si cela est trop rapide sur l'écran, juste aller à cs50.harvard.edu pour un lien à l'événement Facebook où vous pouvez voir plus de détails. Pendant ce temps, je pensais corriger une autre chose que je fait une gaffe mercredi. Avère que l'ID de Mark sur Facebook était pas trois. Il était quatre. Avère qu'il avait plus de tests comptes que je me souviens. Mais ce que cela sentait comme une opportunité à faire est de tirer vers le haut une URL comme ceci. Donc, il se trouve que Facebook a une API, Application Programming Interface, qui est un mécanisme par lequel vous peut demander des données par programme à Facebook et obtenir machine arrière les informations lisibles, pas les pages web mais juste le texte brut, quelque chose appelé JavaScript Object Notation. Et en fait, si je visite cette URL, et zoomer, par défaut, cela est-Marc publiquement l'information accessible. Et le détail intéressant ici est juste que sa carte d'identité est en effet, nombre de quatre, que je réalisé dès que je l'ai fait. Vous pouvez le faire vous-même si vous le savez votre nom d'utilisateur Facebook si vous en avez un. Il suffit de taper là-haut il. Et rien de tout cela est privé. Je fais juste ce même dans le mode de navigation privée. Donc, je ne suis même pas connecté. Et vous voyez que je apparemment était numéro d'utilisateur 6454 sur Facebook, qui est non trop mal ces jours-ci. Donc, de toute façon, vous verrez aussi plus d'informations là-bas. Et l'aspect utile de qui est ce que vous pouvez écrire votre propre logiciel intègre en quelque sorte les données de ce genre dans votre propre application. Vous pouvez permettre aux utilisateurs de vous connecter à votre site Web, ne pas utiliser leur propre nom d'utilisateur personnalisé et mot de passe, mais peut-être leur connexion Facebook et obtenir des informations même de leurs amis, si ils approuvent tel, ou similaire. Donc noter que CS50, trop, a certains de ses propres API, une pour les données de catalogue de cours, certains pour les câlins menus dans la salle salles, tous de la et les emplacements des bâtiments sur le campus, nous avons une API pour ainsi que vous pouvez interroger de manière similaire et obtenir données textuelles dos que vous pouvez intégrer dans un PHP ou JavaScript, ou même, bien que moins fréquemment, un C repose projet final. En effet à l'avance pour la finale projet sont quelques jalons. Vous avez un e-mail de l'autre jour. Sachez que la proposition est due lundi prochain. Il est pas nécessairement contraignant, mais vous ne devront recevoir vos compagnons d'enseignement approbation avant de faire toutes les modifications qui suivent. Et puis sont en avance d'une certain nombre d'autres étapes. Donc, pour vous taquiner, trop, avec quelques possibilités, nous avons un tas de ces ampoules de couleur. Et certains d'entre vous ont maintenant une certaine de ceux-ci dans votre chambre d'étudiant ainsi. Et ils ont aussi une API. Donc, rappeler ces semaines de bulbes binaires il ya que Dan Bradley et Ansel Duff a créé pour nous. Ils ont utilisé une interface logicielle à cette ampoule, qui à l'heure actuelle est branché sur l'électricité et puis via sans fil est reliée à une petite chose appelé le Pont ici-bas, comme un petit propriétaire de routeur à ce dispositif particulier. Mais il se trouve que je sais comment envoyer des messages HTTP, comme nous le faisons maintenant, Je peux envoyer un message comme celui-ci cette ampoule pour l'allumer ou éteindre ou faire un certain nombre de d'autres opérations sur elle. Remarquez que ça ne se, il est pas affiché. Il ya un autre appelé vente. Il ya effectivement quelques autres verbes. Mais remarquez qu'il ya un chemin là-bas, réduire API, réduire nouveau développeur, réduire la lumière, un slash, slash état. Voilà apparemment juste le chemin que la société, Philips, vous avez décidé de frapper avec une requête HTTP si vous voulez changer l'état de l'ampoule utilisant le protocole HTTP 1.1. Puis notez la ligne blanche. Et puis enfin ce qui ressemble à genre de tableau d'une certaine sorte, ce message va être appelée JavaScript Object Notation, ou Jason. Et ce que vous voyez ici est que il ya trois paires de valeurs clés. Une clé est appelé. Et sa valeur apparemment va être vrai. La luminosité est de 128, ce qui est une sorte de int. Et puis le temps de transition est zéro, ce qui est apparemment combien de temps ça va prendre pour faire de cette chose sur. Donc maintenant cette ampoule est éteinte. Mais si je fais exactement this-- laisser moi aller à un peu de feuille de triche que Dan a mis en place en advance-- et je vais à aller de l'avant et copier la commande suivante. Curl, comme certains d'entre vous aurait glané sur CS50 Discutez est un utilitaire comme Telnet comme que vous pouvez simuler les requêtes HTTP, met spécifiquement. Je peux envoyer ces données, précisément ce que nous venons de vu il ya un moment particulier à cette URL ici. Et puis Curl va gérer tous les en-têtes nécessaires et y de l'analyse. Donc, tout ce que je dois faire est de copier ce en une fenêtre de terminal et appuyez sur Entrée. Et l'ampoule qui se passe. Et tout cela va à travers mon ordinateur sans fil d'une certaine manière vers le bas sur le pont, qui est alors parler de cette ampoule. Je peux faire autre chose. Je peux faire cette chose aller rouge par exemple. Je peux par exemple faire cette chose passer au vert. Je peux le faire aller bleu. Et remarquez dans chacun de ces cas, tout ce que je change est la valeur dite de teinte effectivement lui donner un peu de couleur. Permettez-moi de coller celui-ci en tant que bien. Maintenant, il est bleu. Et vous pouvez faire encore plus fantaisistes choses where-- Allons au vert. Et je pouvais le faire de bien sûr, avec mon propre code. Mais même l'API elle-même soutient les opérations géniaux comme ça, qui va maintenant la peine nous pour les 30 prochaines secondes. Voilà donc un avant-goût de ce que vous pourriez faire avec un API, celui-ci impliquant ampoules. Notez que CS50 a un couple paires de Google verre Si vous souhaitez tiens à attaquer à quelque chose le long de ces lignes, Arduino Uno, qui sont de minuscules ordinateurs, essentiellement, sur une petite carte de circuit que vous pouvez connecter fils et d'autres choses et, en fait le contrôle votre environnement du monde réel. Et puis il ya un couple de nouveaux jouets que nous avons. Celui-ci vient d'arriver littéralement la autre jour par la poste, un brassard Myo. Et je pensais qu'il est un moyen de vous excité à propos de projets que vous pouvez utiliser avec ce matériel serait être à jouer à ce petit clip qu'ils utilisent pour taquiner les gens que nous vivons maintenant dans l'avenir. [Lecture de musique] DAVID Malan: Donc, dans quelques semaines, vous trop peut être si cool à la foire de CS50. Un autre dispositif que nous avoir un tas de qui nous sommes heureux de prêter pour des projets est appelé un dispositif de commande de mouvement. Ceci est un petit appareil USB vous vous connectez à un ordinateur vous permet d'interagir avec votre ordinateur portable, Mac ou PC, comme si vous aviez comme un Kinect Xbox et en fait faire des mouvements physiques plus comme nous le voyons dans cette vision de l'avenir. [Lecture de musique] DAVID Malan: Donc, même si vous avez aucune idée de comment quelque chose comme ça pourrait éventuellement être inventé ou travail sur un niveau de matériel, peu importe. Même après quelques mois de CS50, et une compréhension de la programmation plus généralement, la programmation web et plus récemment, et puis aussi des API, et HTTP, vous aurez accès via API de logiciels si vous ne veulent emprunter un de ces dispositifs à réellement parler à ce et ne pas avoir à vous soucier de l'application sous-jacente détails, ce qui est tout à fait compatible avec cette notion de superposition une abstraction que nous avons vu tout au long du semestre. Donc, aussi le week-end, vu un couple de pièces nouvelles. Allez d'abord, aller à des séminaires si vous voudraient apprendre quelque chose plus sur un certain nombre de sujets. Voir l'URL il. Et celui-ci a été envoyé à moi par Chang, qui vous le savez, qui a l'impression de notre armée d'éléphants. Et ce fut un titre comme suit. Je suis terrifié de ma nouvelle TV. Pourquoi je suis peur de faire de cette chose et vous serait trop. Nous sommes donc maintenant à la signaler au cours du semestre, trop, où même si vous avez le moindre de compréhension de la façon dont fonctionne le web, et HTTP, et de sécurité, des choses comme ça devrait commencer à attirer votre attention. Mais aussi, vous l'aurez compris, si ces choses sont ou ne sont pas menaces réelles. Je prends donc quelques extraits de cet article ici. Et l'histoire est la suivante. Je suis maintenant le propriétaire de une nouvelle Smart TV, qui promet de livrer en streaming contenu multimédia, jeux, application, les médias sociaux, et internet navigation, oh et TV aussi. Le seul problème est que je suis maintenant peur de l'utiliser, dit l'auteur. Vous seriez aussi si vous lisez la 46 page politique de confidentialité de votre téléviseur. La quantité de données ce recueille chose est stupéfiant. Il enregistre où, quand, comment, et pour combien de temps vous utilisez le téléviseur. Il définit les cookies de suivi, comme nous l'avons discuté, et balises conçues pour détecter lorsque vous avez contenu particulier vu ou un message particulier si vous voulez vérifier le courrier sur votre TV. Il enregistre les applications que vous utiliser, les sites que vous visitez, et comment vous interagissez avec le contenu, faire tout cela via votre téléviseur intelligent. Il a également, yet-- creepier qui est mon addition-- est doté d'un appareil photo à la reconnaissance faciale. Le but est de fournir contrôle de geste pour la télévision et vous permettra de vous connecter à compte en utilisant votre visage personnalisé. À l'inverse, les images sont enregistré sur la télévision au lieu de téléchargé à un serveur d'entreprise. En revanche, l'Internet connexion rend l'ensemble TV vulnérables aux pirates qui ont démontré leur capacité de prendre le contrôle complet de la machine. Plus troublant, comme si cela ne assez intelligent, est le microphone. Le téléviseur dispose d'une voix fonction reconnaissance qui permet aux téléspectateurs de contrôler l'écran avec des commandes vocales. Mais le service est livré avec un avertissement plutôt sinistre. Se il vous plaît être conscient que si vos paroles sont personnelle ou autre sensible l'information, cette information seront parmi les données saisies et transmis à un tiers. Compris? Ne dites personnelles ou sensibles choses devant votre téléviseur. Donc, cela est effectivement pour de vrai. Et il est difficile de ne pas voir si vous aller à Best Buy ou similaire pour les téléviseurs ces jours-ci. Ils sont tous intelligents, en quelque sorte. Et ils obtiennent plus intelligents et plus effrayant. Et ils sont tout simplement la collecte de données de façon que nous avons parlé et puis le télécharger via HTTP ou un autre protocole à un serveur. Donc, ce fut d'un article amusant dans ce site en ligne ici, qui a parlé d'un notamment bug ou un code erronée que nous pouvons attacher dans la discussion de la semaine dernière. Donc, ce titre était aussi suit, l'histoire va ici, Josh Breckman a travaillé pour une entreprise qui a décroché un contrat à développer une gestion de contenu système, ou CMS comme on les appelle, pour un assez grand site Web du gouvernement. Une grande partie du projet consistait à l'élaboration d'un système de gestion de contenu afin que les employés seraient en mesure de construire et de maintenir la constante évolution contenu pour leur site. Les choses se sont plutôt bien pour quelques jours après la mise en. Mais le sixième jour, les choses allaient moins bien. Tout le contenu sur le site avait complètement disparu. Et toutes les pages ont conduit à la valeur par défaut, se il vous plaît entrer contenu de la page Web. Oups. Josh a été appelé à enquêter et remarqué que l'on particulièrement gênant adresse IP externe avait Gone in et supprimé tous le contenu sur le système. L'adresse IP ne faisait pas partie à un pirate plié à l'étranger à détruire utile l'information du gouvernement. Elle a décidé de googlebot.com, Très propre exploration du Web spider de Google. Oups. Après un peu de recherche et de brouillage pour trouver une sauvegarde noncorrupt, Josh a trouvé le problème. Un utilisateur a copié et collé une partie du contenu d'un page à l'autre, y compris un Modifier le lien hypertexte pour modifier le contenu de la page. Normalement, ce ne serait pas une question depuis un utilisateur extérieur serait besoin d'entrer un nom et un mot de passe, mais le système d'authentification CMS, le système de connexion, ne pas prendre en compte piratage sophistiqué techniques de Google araignée. Oups. Comme il se trouve, Google Araignée ne pas utiliser les cookies, ce qui signifie qu'il peut contourner facilement un chèque pour le est connecté de cookie est faux. Il ne fait pas attention à Java script, que feriez normalement inciter et rediriger les utilisateurs qui ne sont pas connectés. Il ne suit cependant tous lien hypertexte sur chaque page qu'il trouve, y compris ceux avec Supprimer la page dans le titre. Oups. Alors qu'est-ce que cela signifie en plus termes techniques mais assez accessible? Cela signifie simplement que tout au long de leur site web, ils avaient les URL semblable à celui que vous pouvez voir dans le problème réglé sept. Rappel de problème mis sept ou savoir à problème posé sept que vous êtes mis au défi, entre autres, à vendre des actions au nom des utilisateurs. Mais l'application de cette fonction par de faire via des hyperliens dans votre utilisateur interface, probablement pas le plus intelligent idée parce que si votre site est en quelque sorte soit accessible par un être humain Qui est en cliquant autour ou acheter un bot comme Google ou une araignée comme on les appelle qui est juste exploration du Web essayant à l'index le web comme un moteur de recherche, ils pourraient très facilement frappé par obtenir ce genre d'URL. Et qui est fonctionnellement équivalent à, dans ce cas, la vente de toutes les actions de Google. Maintenant, franchement, il est tout à fait stupide que la CMS utilisé JavaScript et les cookies pour mettre en œuvre son système de connexion et ne pas le faire côté serveur, comme vous les gars faire et de la volonté dans PSet 7XX il ya un login.php file-- toujours, toujours, toujours la sécurité devrait être effectuée sur le côté serveur, non pas sur le côté client parce que, comme cela article suggère et vous pourriez vous voir à un moment donné, il est trivial pour un utilisateur, bon ou mauvais, à juste désactiver JavaScript pour ne pas mentionner les cookies. Voilà donc votre WTF quotidien. Il ya un plus, qui est juste un peu effrayant, donc je vais le mentionner si seulement comme une leçon de vie. Chaque fois que vous utilisez une application appelé comme Snapchat ou similaires qui dit ces photos ne durent cinq secondes pour dix secondes, ou autres joyeusetés. Ils sont éphémères qui est absolument pas le cas. Comme il est impossible, numériquement, de mettre en œuvre une certaine forme de vidéo, ou une image, ou le partage de ces textuelle qu'un destinataire de l'autre extrémité ne peut pas sauver ces données. Dans la manière la plus naïve, quelqu'un pourraient prendre leur téléphone. Et ils ont une deuxième fenêtre 10 tout en regardant quelque pression juste prendre un autre téléphone et le photographier, évidemment. Ainsi, vous pouvez préserver quelque chose de cette façon numérique. Certains d'entre vous savent comment prendre captures d'écran sur votre téléphone. En fait, si vous ne savez pas cela, réaliser au moins Snapchat, et je pense que d'autres applications de nos jours, au moins vous dire si la bénéficiaire a effectivement pris une capture d'écran de votre image. Mais pire encore, ce fut la snappening, que quelqu'un a inventé récemment, où certains 100000 snaps avait été libéré dans ce qu'on appelle un fichier torrent sur divers sites Web en fin de compte. Et ceux-ci contenaient tout un tas des messages privés et les messages. Il se trouve plupart d'entre eux bénigne, donc pas ce que vous pourriez attendre. Mais parce que les gens avaient utilisé un site Web tiers, connectant avec leur Snapchat nom d'utilisateur et mot de passe, puis sauver tous leurs clichés sur ce site tiers. Et ce fut ce tiers site qui a été piraté, qui voulait juste dire quelqu'un a compris comment pour obtenir tous les 100,000 de ces images dans leur propre disque dur pour les partager ensuite. Franchement, là aussi, il est en quelque sorte de stupide que Snapchat est mis en oeuvre de telle sorte que un tiers peut trier d'interception les données et qu'il est pas lié à votre propre application en cours d'exécution sur le téléphone. Mais, là aussi, se rendre compte que ces choses ne devraient pas vous prendre par surprise, ou du moins il devrait être une leçon de vie ici. Si vous souhaitez la technique détails, rendez-vous à cette URL, il qui est dans les diapositives d'aujourd'hui. Tout droit, des questions sur Les leçons de la vie d'aujourd'hui dans CS? Éteindre ça. Rien du tout? Rien du tout? Je dois beaucoup de gens qui arrivent leur Snapchat ou quelque chose maintenant. Très bien, alors SQL, Structured Query Language. Terminons cette. Et aussi, même si nous ne faisons que gratter la surface de cette langue, nous allons vous donner suffisante de la langue sous la forme d'PSet 7 de sorte que vous pouvez aborder certains fonctionnalité assez courante. Mais rends compte qu'il ya un couple choses que nous ne nécessitent pas de vous, mais ils vont être importante venir derniers projets et certainement venir faire réel sites Web avec des utilisateurs réels est cette décision de conception. Il se trouve que dans une base de données MySQL, vous avoir des grappes de choix comme les types de données pour les colonnes et d'autres choses, mais vous avez aussi le choix d'une mémoire dite moteur pour l'ensemble de vos données, le genre de système de fichiers, si vous êtes familier, pour l'ensemble de vos données. Quel format est-il finalement stocké dans? Et le plus commun, peut-être, a été MyISAM et InnoDB, les termes techniques que nous soucions seulement dans la mesure où une a et on n'a pas la fonction suivante. Supposons que vous avez un petit frigo dortoir. Et supposons que vous et votre colocataire, qui partagent cette réfrigérateur, sont vraiment friands de lait par exemple. Et cela est, en fait, la manière dont le histoire m'a été racontée chemin du retour le jour où je pris un cours appelé CS 161 Systèmes d'exploitation, qui explore de façon similaire à ce sujet. Donc, vous avez ce réfrigérateur. Vous êtes sur le lait. Et vous rentrez chez vous, votre colocataire toujours à la classe ou que ce soit, et vous décidez que je vais aller chercher un peu de lait. Donc, vous fermez le réfrigérateur, le blocage le dortoir, traverser la rue CVS ou ailleurs, et obtenir en ligne pour acheter du lait. Pendant ce temps, votre colocataire rentre à la maison de classe, pénètre dans la chambre d'étudiant, ouvre le réfrigérateur, réalise également ooph, nous sommes à court de lait. Donc, il ou elle ferme la réfrigérateur, puis passe pour aller à l'autre CVS, qui se trouve être un pâté de maisons des autres CVS sur la place, et obtient en ligne là pour obtenir un peu de lait. Maintenant, bien sûr, quelques minutes plus tard, vous obtenez à la fois en arrière, et le pire de tous les possibles résultats est arrivé. Vous avez tous deux du lait. Et vous ne faites pas vraiment comme le lait tant que ça. Donc, l'un d'eux est juste aller à se dégrader à un moment donné. Alors maintenant, vous avez une quantité excessive de lait dans le frigo parce que pourquoi? [Inaudible] DAVID Malan: Ouais, vous ne l'avez pas en quelque sorte de communiquer les uns avec les autres que vous receviez lait. Ainsi, dans le plus simple des façons dans le monde humain, comment pourriez-vous éviter cette stupide scénario de se produire comme que vous ne retrouvez avec un. Texte, oui bon. Mais comment? Post-it. DAVID Malan: Un post-it. Toute forme de communication qui raconte votre colocataire ne vont pas dans le réfrigérateur pour le lait. Je vais aller réapprovisionner sur mon propre. Donc, vous avez besoin d'une certaine manière pour verrouiller cette ressource. Donc, nous pouvons faire this-- nous pouvons genre de ruiner l'histoire et se transformer en une histoire CS lequel penser de ce que, tout comme un variable qui stocke une certaine valeur. Et maintenant, la valeur du lait est égale à zéro, que vous ne voulez pas que votre colocataire pour inspecter cette variable et ensuite prendre une décision lui-même sur la base de l'état de cette variable si vous êtes dans le processus de changer l'état de ladite variable. Ainsi, l'une des lignes de SQL que nous vous donner à PSet spécification 7 est celui-là. Et nous ne dépensons pas un énorme quantité de temps à en parler. Mais il se trouve, si vous essayez à acheter des actions dans le financement du CS50 que vous avez déjà certaines actions de vous veulent être en mesure de faire un certain nombre des choses instantanément ensemble. Vous voulez être en mesure de effectivement, à un niveau élevé, vérifier tout droit, si je veux à acheter plus d'actions de Free, la penny stock nous parler dans la spécification, Je veux d'abord vérifier le nombre d'actions que je dois. Et si elle est de cinq ans. Et si je veux Achetez-en 10 de plus, je finalement voulez avoir 15 parts de stock. Je dois donc poser deux questions. Quel est l'état de la variable? Quel est l'état de la ligne? Combien d'actions dois-je actuellement? Alors, vous voulez aller de l'avant et mettre à jour. Voilà donc l'analogue de la lait que vous vérifiez la ligne, et puis vous voulez le mettre à jour parce que si vous voulez acheter 10 parts, vous ne voulez pas changer la ligne à 10, vous vouloir le changer à 5 plus 10 ou, bien sûr, 15. Cette ligne de code assure que ces deux idées conceptuelles arriver ensemble ou pas du tout. Personne, y compris un autre utilisateur qui est connecté au même site, peut en quelque sorte interrompre le contrôle de la ligne et la mise à jour de la ligne, le sélectionner et la mise à jour si vous voulez. Et la syntaxe est pas super évident, mais cette seule ligne, longue est qu'il est, assure que ces deux opérations vérifier la variable ou vérifier la ligne et mettre à jour la ligne arrive atomique. Oh nous y revoilà. message texte sur mon téléphone. Faisons donc ce une peu plus concret. Supposons que vous n'êtes pas la mise en œuvre d'un réfrigérateur, et vous n'êtes pas la mise en œuvre PSet 7 mais une banque réelle, ou un guichet automatique, un guichet automatique Machine, où vous en quelque sorte veulent être en mesure d'habiliter aux utilisateurs de transférer de l'argent d'un compte à un autre. OK, accrocher. Je vais couper ce moment, je vous remercie. Donc, nous voulons aller de l'argent d'un numéro de compte dans un autre compte nombre, en particulier de 100 $. Donc, ce genre est d'un arbitraire exemple, où vous, l'ATM, pourraient vouloir exécuter deux SQL requêtes, soustraire d'un compte, et ajouter à l'autre compte. Mais vous voulez vous assurer que ceux-ci deux lignes à la fois se produisent ou pas du tout. Vous ne voulez pas quelque chose se faire interrompre. Vous ne faites pas une mauvaise gars intelligent en quelque sorte debout à Bank of America avec deux guichets automatiques à l'avant de lui et en quelque sorte sorte de taper dans le des commandes à la fois, espérons essayer de déduire $ 200 au lieu de 100 $ et ayant seulement 100 $ crédité. En bref, vous voulez que ce se comporter exactement comme vous le souhaitez. Et comme vous le faites ce en base de données SQL est vous l'envelopper dans ce qui est appelé une transaction. Littéralement dans SQL, vous pouvez appeler CS50 de fonction de la requête en citant début unquote transaction. Ensuite, vous pouvez exécuter un nombre quelconque de requêtes SQL suivantes, mais aucun d'entre eux prendre effectuer sur la base de données jusqu'à ce que vous appelez requête entre guillemets engager, si à nouveau en utilisant PHP. Et de cette façon, vous pouvez vous assurer que tous, même si vous avez 1000 utilisateurs frapper votre base de données en même temps, SQL promettent que ces deux requêtes seront mis en place l'un après l'autre. Donc, vous ne finissent pas avec excès de lait ou le mauvais montant, en fin de compte, de l'argent. Donc, gardez cela à l'esprit, non pas tant pour PSet 7 mais pour des projets finaux si vous êtes réellement essayer de déplacer les données autour de sur les tables que vous pourriez ici. Mais peut-être encore plus simple et plus évident à comprendre avec un exemple est celui-là. Et quelqu'un nous ont envoyé sur ce que l'autre jour quand il a vu quelque chose de semblable en ligne. Donc, à ma connaissance, le système d'axe est pas vulnérable à cette attaque. Et je ne sais pas si elle utilise même la base de données SQL sous la hotte. Mais nous allons utiliser pour l'intérêt de la discussion. Voici l'écran qui Les gens ont tendance à Harvard à voir lors de la connexion avec leur Nombre Harvard ID et leur code PIN. Et supposons que le système d'axe étaient mis en œuvre en PHP et MySQL avec un base de données, le code qui quelqu'un il ya quelques années aurait pu écrire pourrait ressembler à ceci. Tout d'abord, déclarer une variable appelée nom d'utilisateur. Et obtenir ce à partir de la super POST. Puis obtenir une autre variable appelé mot de passe et faire la même chose. Et puis juste exécuter cette longue requête ici, sélectionnez étoiles FROM utilisateurs WHERE nom d'utilisateur est égal à tel ou tel et le mot de passe est égale à tel ou tel. Notez que le bouclés accolades je l'ai utilisé ici juste dire à PHP, aller avant et remplacer la valeur de ces deux les variables là. Ils ne sont pas strictement nécessaire, mais ils ont tendance à éviter les erreurs de syntaxe subtiles. Donc, cela semble complètement correct à première vue. Et il est. Vous pourriez mettre en œuvre la Système de broche de cette façon. Mais supposons que super étudiant intelligent et malicieux entrée ce que sa broche. Donc je l'ai enlevé la balle signe ici dans la maquette, et je l'ai fait révélé ce qu'il ou elle pourrait être saisie. Et il est un peu étrange. Mais ce qui vous saute au visage à potentiellement inquiétant l'entrée de l'utilisateur, même si vous avez aucune idée de ce signifie une attaque par injection SQL. Pourquoi ce regard un peu louche? Qu'est ce que ce est? [Inaudible] DAVID Malan: La ou est un peu méfiant. En fait, voilà un mot-clé à partir de SQL. Donc, cela ne présage rien de bon. Le fait qu'il y ait tous ces apostrophes there-- en fait, un des plus faciles des moyens de briser certaines bases de données est en tapant un nom comme O'Reilly qui a une apostrophe dans le parce que si l'homme qui a écrit le code dans les coulisses ne tient pas compte du fait qu'il pourrait être guillemets simples dans un utilisateur de entrée, et il ou elle utilise guillemets simples dans leur code, mauvaises choses peuvent arriver. En fait, pire encore, considérez ceci. Si ce fut de nouveau le code que quelqu'un à Harvard ans il ya écrit pour la broche système, notez ce qui est Informations pour obtenir remplacé nom d'utilisateur et mot de passe si l'utilisateur tape à nouveau Skroob que leur nom d'utilisateur et un, deux, trois, quatre, cinq, citation entre guillemets ou une égaux citer un. Et remarquez ce qui est la clé ici est que l'utilisateur n'a pas commencé leur mot de passe ou leur épingle avec une citation. Et ils ne sont pas terminées, il avec une citation parce qu'il ou elle est à supposer que si la programmeur n'a pas été si forte, ils vont avoir les guillemets simples dans leur code. Alors, voici le code. Et la substitution que pourrait maintenant se produire est ce. Et je l'ai souligné ce l'utilisateur a tapé dans. Donc, avant, après. Et remarquez ce qui est légèrement inquiétant maintenant sur la moitié droite de ce code SQL? Il est un peu plus complexe, certes, que les requêtes que nous avons vu. Mais cela ne peut peut-être être une bonne chose si vous êtes disant sélectionnez étoiles, qui est sélectionnez tout de la table de l'utilisateur où nom d'utilisateur est égal Skroob et le mot de passe est égale à un, deux, trois, quatre, cinq ou un égale un. Quelle est la conséquence logique de cette dernière clause sans doute? Il est juste toujours vrai. Et parce que nous avons en quelque sorte deviné ou compris par essai et erreur que le programmateur qui écrit ce code n'a pas anticiper une personne humaine ou mauvaise tapant apostrophes ainsi, nous pouvons syntaxiquement compléter la requête SQL avec quelque chose absurde mais quelque chose qui est syntaxiquement incorrecte qui est toujours vraie. Donc, si ce code est utilisé pour répondre la question vrai ou faux devrait cet utilisateur est autorisé à passer, la réponse est toujours apparemment va pour être vrai parce que ce sera toujours de choisir quelque chose de la base de données parce que l'un des cours est toujours égal à un. Alors, quelle est la solution? Eh bien dans PSet 7, nous avons effectivement éviter tout cela ensemble. Nous vous donnons une fonction de recherche, et nous vous encourager à utiliser des points d'interrogation comme des espaces réservés, similaire dans l'esprit de% s de printf, mais ce qui est essentiel sur les points d'interrogation ici est si vous avez réellement lu par functions.php, où notre fonction de requête est mis en œuvre, ces points d'interrogation sont échappés, laquelle tout ce qui potentiellement dangereux comme une apostrophe est activé dans une apostrophe échappé. Voilà donc ce que est passe vraiment si vous utiliser la fonction de requête de CS50 ou un nombre quelconque des bibliothèques libres de tiers qui faire la même chose. N'a pas d'importance dans ce cas, en vert, si l'utilisateur a tapé dans une seule offre parce que la requête fonction que nous avons écrit est va ajouter des barres obliques inverses avant une telle citation dangereux. Donc, ce ne sont pas, dans fait, va être légitime. Ceci est comme taper dans un fou à la recherche mot de passe qui est, bien sûr, ne va pas être le mot de passe réel de Skroob. Donc, les plats à emporter pour CS50 est un, absolument toujours utiliser quelque chose comme la fonction de requête de CS50 la bibliothèque ou sous-jacente, qui se trouve être appelé PDO. Mais jamais, jamais, ne jamais faire ce type de code sans échapper ou de lavage comme ils disent vos entrées. Et vous serez à un moment donné probablement rencontré certains site comme celui-ci. En fait, il semble être le cas comme dans les aéroports et les hôtels dans des endroits où ils disposent d'une connexion Wi-Fi accès que vous devez être connecté pour, ces sites sont toujours horriblement mis en œuvre. Et donc une sorte de plaisir à la maison exercice, pas à des fins malveillantes ou plus d'un plaisir sur la route exercice, est de taper juste une apostrophe, une apostrophe, dans un formulaire sur un certain site Web et voir ce qui se passe. Et si le serveur tombe en panne ou donne vous une sorte de message d'erreur, il peut très bien être que quelqu'un n'a pas prévu cela. Et puis, vous devez alerter le bon autorités et ne pas continuer. Alors maintenant, vous les gars devrait, espérons comprendre un peu plus d'humour de geek ici. [Rires] DAVID Malan: Vous savez que vous êtes un geek. Pour les prochaines années, vous vous souviendrez qui petites tables Bobby est en raison de ce dessin animé ici. Donc, gardez cela à l'esprit que nous changement de contexte une dernière fois aujourd'hui à JavaScript. Nous avons passé relativement peu temps sur la syntaxe de PHP car il est en fait Super similaire à C. Et bien assez, trop JavaScript est super similaire à la syntaxe de C ainsi que nous le verrons dans juste un moment et que nous allons voir plus tard cette semaine en particulier. Ce que vous pouvez faire avec cette langue, cependant, est d'autant plus puissant, en particulier avec les API. Mais d'abord un tour rapide. Donc un, en JavaScript, il est pas de fonction principale, qui est agréable. Comme avec PHP, vous pouvez simplement écrire du code. Conditions ressemblent à ceci. Et des expressions booléennes pourrait ressembler à ceci ou comme cela. Commutateurs existent, et ils pourrait ressembler à ceci. Quatre boucles ressemblent à ceci. Alors que les boucles ressemblent à ceci. Avez whiles ressembler à ceci. Et puis les tableaux ressemblent ce, très similaire à PHP. Mais notez que, dans JavaScript vous déclarer une variable pas avec un dollar signer, pas avec un type de données mais littéralement en disant var pour variable avant. Il est trop faiblement typé en ce qu'il comporte types, mais vous ne déclarez pas explicitement. Et puis une chaîne, pour exemple, pourrait ressembler comme ça, cette chaîne étant appelée dans ce cas s. Et puis un objet. Et ce que nous verrons plus avant longtemps. Et un objet est peut-être l'un des le plus souvent vu des structures de données dans une base de JavaScript programme car il permet d'associer arbitraire paires clé-valeur juste comme les tableaux associatifs de PHP et tout comme votre propre table de hachage ou essayer que nous avons mis en il ya quelques semaines. Donc, nous allons voir ce que fait nous pouvons faire avec JavaScript. Et en particulier, cela est une liste de blanchisserie de caractéristiques que les navigateurs ont cette nous permettent de brancher JavaScript dans un site de la manière suivante. JavaScript est souvent utilisé comme un côté client langage de script. Il est pas compilé. Elle aussi est interprété. Mais contrairement à PHP, qui a été en cours d'exécution sur le serveur, dans le serveur web, ou profondément à l'intérieur de la clients, JavaScript est différent en ce qu'il fonctionne généralement dans le navigateur. Ainsi, tout code JavaScript que vous commencez à écrire pour PSet 8, ou votre projet final, ou dans le monde réel est généralement aller être enregistré sur le serveur, absolument dans un point ou un point HTML JS pour fichier JavaScript. Mais le navigateur va à télécharger que JavaScript code pour votre propre instance de Chrome, ou IE ou Firefox, ou autre chose. Et le code qui se passe réellement à obtenir exécutée à l'intérieur de votre propre navigateur. Juste pour le rendre plus réel, Voyons ce sous une forme concrète. Nous ne savons pas ce que fait ce code sans lire vraiment à travers elle. Mais laissez-moi aller à Facebook.com sans vous connecter. Laissez-moi aller inspecter le et aller, disons, Réseau et recharger la page. Et nous allons see-- permettez-moi décale Recharger la Page pour obtenir toutes les demandes à nouveau. Et le premier fichier que je vois est CSS, CSS. Voici la première JavaScript fichier, et je dois aucune idée de ce que cela fait, mais ici est une partie du code JavaScript qui entraîne Facebook. Il est même pas vraiment que révélant pour agrandir. Il est toujours aussi absurde. Mais vous verrez même en bas, il ya encore plus de ces fichiers JavaScript. Oups. Voilà un ping. Descendons un peu en outre, en outre, en outre. Il ya un. Il ya un. Il ya un. Ainsi, même si Facebook, derrière la scènes, est écrit en partie en PHP et la version de celui-ci propre Facebook, il ya une énorme quantité de JavaScript. En fait, aucun des chat que vous faites sur Facebook, l'une des mises à jour en ligne de la chronologie que cela se produise en temps réel, tout cela est entraîné par JavaScript. Ouais? PUBLIC: Je ne suis pas sûr si cela est Facebook, mais je pensais que Facebook a développé leur propre langue de code interne? DAVID Malan: Ils l'ont fait. Voilà pourquoi je dis un écart de PHP appelé Hip Hop qu'ils ont effectivement fonctionnalités ajoutées à ce que, lorsque Mark première œuvre Facebook, il a été écrit en PHP. Et ce genre de est resté le genre de langage frontal qu'ils utilisent pour beaucoup de leur codage, mais il n'a pas été une langue qui est échelles particulièrement bien à des milliards de personnes. Et ils ont ajouté leur propre améliorations dans les coulisses. Et ils utilisent un certain nombre d'autres langues pour diverses pièces de leur infrastructure. Alors oui, il est un écart de ce que nous savons maintenant que PHP. Donc, nous allons jeter un coup d'oeil à quelques exemples de la façon dont nous pourrions utiliser JavaScript ici. Dans le code source d'aujourd'hui, nous avons une tas de fichiers, dont le premier, nous allons appelé DOM zéro. Donc DOM zéro se présente comme suit. Laissez-moi aller dans ce répertoire et ouvrir domzero.html, dont le sommet a un type de document déclaration, en disant voici HTML 5. Et maintenant, voici une balise HTML. Voici l'étiquette de tête. Et voici ce qui est nouveau aujourd'hui. Nous avons maintenant une balise script à l'intérieur de la tête de la page. Et cela ne semble très peu, mais un avis que je l'ai défini une scénario, un JavaScript. Et en passant, depuis cette est une idée fausse très répandue, JavaScript a absolument rien à voir avec Java, le langage que certains d'entre vous ont appris à APCS. Il était plus d'une commercialisation chose que tout, équitation le sillage de Java il ya quelques années. Mais JavaScript, rien à voir avec Java, tout de même, et fâcheusement, dénomination confuse. Voici donc comment vous déclarez une fonction en JavaScript, fonction dire littéralement, puis le nom de la fonction, alors tous les arguments qu'il pourrait prendre, tout comme dans PHP. Met en JavaScript, l'un des plus fonctions ennuyeux qui existent est alerte. Ceci est une petite fenêtre qui apparaîtra et vous alerter à une certaine information. Il est généralement mal vu. Mais nous allons l'utiliser comme notre premier exercice ici. Notez quelques fonctionnalités de JavaScript. Les guillemets simples et doubles guillemets ne fait plus d'importance. Guillemets simples et doubles citations peuvent être échangés, alors que dans C, vous devez utiliser guillemets pour les chaînes, et vous avez deux simples Cours pour les caractères. Dans le monde JavaScript, beaucoup de gens, la plupart des gens utilisez des guillemets simples cordes juste parce qu'il est une chose stylistique. Mais ce qui est l'opérateur plus ici, que nous avons pas vu avant? PUBLIC: concaténation. DAVID Malan: concaténation. Alors C n'a même pas cela. PHP dispose l'opérateur point, qui fait cela. JavaScript a l'opérateur plus, qui est de prêter à confusion, tout comme Java. Maintenant, ce qui se passe ici? Alors, voici où une base compréhension de cette image nous avons jeté un couple vient il ya jours en jeu. Rappelez-vous quand nous avions simple version d'un HTML page-- il a juste dit bonjour monde. Et puis nous avons dessiné un arbre à droite, qui eu un tas de rectangles et les lignes les reliant comme un arbre généalogique. Voilà donc le soi-disant DOM ou Modèle Objet de Document. Et il se trouve que vous pouvez accéder rectangles dans l'arbre avec la syntaxe comme celle-ci. Vous dites littéralement document, qui est un variable globale spéciale dans un JavaScript programme qui a une fonction associé à ce que vous pouvez accéder similaire à une structure, mais vous simplement dire point, puis le nom de la fonction, obtenir élément par ID. L'élément que je veux faire est apparemment citer le nom Fin de citation. Et puis je veux obtenir sa valeur. Maintenant, nous obtenons en avant de nous-mêmes. Je ne suis même pas sûr de ce que tout cela est à propos. Avance rapide de laisser à l'HTML sur la page, ce qui est super simple. Remarquez que je l'ai défini Un formulaire ici-bas. Remarquez que je lui ai donné un unique, ID, même si nous ne l'avons pas utilisé cet attribut avant. Mais cela existe en HTML. Vous pouvez identifier de façon unique un certain morceau de HTML avec un identifiant comme ça. Remarquez maintenant this-- se révèle HTML soutient, par cette liste de blanchisserie Il ya un moment, un ensemble groupe de gestionnaires d'événements. Et ce gestionnaire d'événements est dit sur soumettre. Sur l'utilisateur soumission de cette forme, composez le code suivant. Et le code qui va d'être appelé ou exécuté est exactement cela, la grecque fonction suivie par return false. Tout le reste doit être assez familier. Voici une entrée de type texte, dont ID, dans ce cas, va être nom. Nous ne disposons pas d'un attribut de nom réel ce time-- et un bouton de soumission. Donc, la page qui ressemble à ceci. Et le comportement qui en résulte, vous verrez, ressemble à ceci. La page, il hosts local dit bonjour David, à peine une esthétique façon de saluer un utilisateur. Mais qu'est-ce qui se passe réellement? Eh bien, imaginez ce que cela est. Ceci est un champ de texte. Et selon le HTML ici, je lui ai donné un identificateur unique appelé citation de nom unquote. Pendant ce temps, je l'ai dit lorsque l'utilisateur soumet ce formulaire en appuyant sur Entrée ou cliquez sur le Soumettre bouton, appeler la fonction appelée Greet et puis retourner False. Prenons ceux en sens inverse. Remarquez quand je cliquez sur Soumettre, le URL de cette page ne change pas. L'icône du navigateur ne pas commencer à tourner. Je ne suis pas allé partout, et ce est littéralement parce que je l'ai dit return false. Retour circuits courts arrêts ou Faux le comportement d'un formulaire par défaut. Alors que nous laisse alors avec cette dernière question. Qu'est-ce que Greet faire? Eh bien, apparemment Saluez appelle une fonction appelée Alert, passe dans une longue discussion qui est le résultat de la concaténation ensemble une bouquet de chaînes, bonjour virgule espace, alors tout ce que cela retourne. Alors document est comme un mondiale variable pour que la racine de l'arbre, appel d'une fonction spéciale, autrement maintenant connu sous le nom d'une méthode. Une fonction qui est à l'intérieur d'une variable est une méthode dite à la place d'une fonction. Donc obtenir élément par ID. Quel élément vous faire vouloir obtenir par son ID? Ils ont dit citer le nom et puis d'évaluer le plus précisément. En d'autres termes, ce code tout simplement trouve le champ de texte dont l'ID est le nom et obtient ensuite sa valeur. Donc, si je devais changer ce et dire Davin à la place de David, et cliquez sur soumettre, maintenant nous une salutation pour Davin. Très bien, alors tout beau et bon. Mais nous allons voir si nous pouvons faire ce un peu plus propre depuis seulement écrire du code comme ceci est généralement va être mal vu. Cela va regarder effrayant. Mais ce qui est le premier différence que vous remarquerez ici dans cette version, en plus de la changement de nom à un DOM? Ce qui ressemble structurellement différent sur ce rapport à l'autre? Ouais? AUDIENCE: Le formulaire début du script maintenant? DAVID Malan: Oui, la forme est au-dessus du script pour une raison curieuse. Voilà donc la première chose qui me saute aux yeux, aussi. Et heureusement au moins, cette partie est identique. Donc, la seule chose qui semble à la différence est la suivante. Voici donc ce qui est génial JavaScript sur 2. Et il est difficile de comprendre au premier coup d'œil, notamment pour les projets finals le cas vous êtes à la recherche à l'exemple de code en ligne, mais cela se résume à quelques caractéristiques syntaxiques de base. Voici encore une fois que document de variable globale. Voici de nouveau cette méthode ou fonction qui dit se l'élément par ID. Cette fois, je veux obtenir l'ID appelé démonstration. Où est-ce? Voilà apparemment droit ici, la forme elle-même. Et maintenant remarquer que, apparemment, si je revenir ce nœud de l'arbre qui représente la forme lui-même, pas un champ de texte, il se trouve que la forme, que nœud ou un rectangle de l'arbre, A ce que nous appellerons une propriété, très, très, très similaire en esprit sur une struct en C. Il est juste un élément de données à l'intérieur de ce rectangle. Donc, je dois la forme ici, et je suis fixation, ou je l'attribution, à sa sur Soumettre gestionnaire ou plutôt sur Soumettre propriété la fonction suivante. Et cela est, de loin, le plus fou chose jusqu'à présent syntaxiquement. Il se trouve en JavaScript et en PHP, et franchement d'ailleurs en C, même si nous ne le faisons pas, vous pouvez ajouter anonyme, anonyme, ou Alias ​​lambda les fonctions qui ne possèdent pas un nom mais peut être appelé quand même. Donc ce que je fais ici est que je suis assigne cette propriété sur Soumettre, qui est à l'intérieur de ce noeud de mon arbre DOM, un fonction, pointeur de fonction si vous voulez. Cette fonction n'a pas nom, mais qui n'a pas d'importance parce que nous verrons dans un instant comment l'appeler. Lorsque cette fonction est appelée, ce code est exécuté, puis false est retourné comme avant. Mais remarquez ce que je fais. À ce stade de la histoire, je dois un formulaire. Il a un identifiant unique appelé démonstration. Ici, je dois une balise script qui exécute le code suivant. Il se fixe à ce nœud dans l'arbre qui lui est sur Soumettre bien cette fonction ici. Et juste par nature de la façon dont les navigateurs fonctionnent, quand je clique sur Envoyer maintenant ou appuyez sur Entrée, cette fonction va se faire appelé. Il n'a pas besoin de nom, car qui le diable se soucie de ce qu'il a appelé. Le seul moment où il va jamais à obtenir appelé est lorsque je soumets le formulaire. Il n'y a pas besoin de moi, le développeur humain, à appeler effectivement nulle part ailleurs. Maintenant, juste comme un teaser, comme si cela ne sont pas assez hallucinante, nous pouvons même faire cette regarder en utilisant plus cryptique une bibliothèque super populaire appelé jQuery. En fait jQuery et JavaScript sont souvent confondu. Et ce que nous ferons mercredi est début l'utilisation de ce langage et ces bibliothèques à construire de plus en plus asynchrone et des applications dynamiques comme carte se les applications, les applications Cette mise à jour de la page Web en temps réel temps, un peu comme Facebook ou Gchat faire, et non plus se borner à hitting Envoyer par GET ou juste après seul. Je vais donc vous voir mercredi. [Lecture de musique]