>> [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?
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.
>> 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]