>> [Jouer de la musique]
>> DAVID MALAN: Ceci est CS50.
Ceci est le début de la neuvième semaine.
Et c'est ce qui aurait été 200e anniversaire de M. Boole.
Donc, ce sont les boursiers à qui nous avons fait allusion
pas mal de fois sur l'utilisation de Les variables booléennes vrai et faux,
1 et 0 et tel.
Et ce fut de Google Pour lui rendre hommage aujourd'hui.
Il aurait eu 200.
Donc, si vous souhaitez joindre à nous pour le déjeuner CS50,
jetez un oeil à le lien sur le site Web du cours.
Et ces visages et les amis comme ceux-ci vous attendent ici à Cambridge.
Faces comme celles-ci vous attendent à New Haven.
Et, de fait, Ken à New Haven aimablement fait
ce qu'on appelle un GIF animé d'Eli ici lors d'un récent lunch-- un GIF est encore
un autre format de fichier graphique, avec lequel vous êtes familiar-- que
regarde un petit quelque chose de ce genre.
Alors juste une séquence de-- OK.
Personne ici à Cambridge rit.
Mais à New Haven, cet est vraiment drôle, non?
Bien.
>> Donc, ne nous rejoindre là-bas.
Ici, à Harvard, spécifiquement, ce mercredi,
si vous êtes un étudiant en deuxième année ou freshman even-- ou même la pensée junior-- de décision
un interrupteur dans l'ordinateur la science, savoir que il y
être un CS conseille juste ce Mercredi, peu de temps après la classe
à 16h00 dans l'ordinateur bâtiment des sciences Maxwell Dworkin.
Nous allons mettre cela sur le cours de site d'ici demain, aussi bien.
Donuts, je l'ai dit, seront servis.
>> Bien.
Story-- tellement drôle que je poussais autour sur l'Internet,
et je trouvé quelques vieilles archives de mon ancien site.
Et il se contourner ce out-- temps, il semble très opportune
car je crois que les élections de communications unifiées sont sur le point d'engins de nouveau.
Donc, je courais pour UC, perdu lamentablement.
Et peut-être cela était en partie pourquoi.
Donc, ce fut mon site à l'époque.
Pour une raison quelconque, je pensais qu'il était une bonne idée, avant de dire aux gens
ce que ma plate-forme était et pourquoi ils devraient voter pour moi, qu'ils ont
cliquer pour entrer de découvrir que informations, qui, rétrospectivement, est
sorte de chair de poule.
Je ne sais pas vraiment ce que cela était.
>> Mais certainement il n'a pas aider ma campagne.
Je ai aussi trouvé que par la haute année-- je devais ce calendrier Muppet.
Muppets étaient sorte de en vogue à l'époque.
Ou peut-être qu'ils ne sont pas.
Je devais un calendrier Muppet à l'époque.
Et je pensais que ce serait cool de nom mon ordinateur sur le réseau de Harvard
frogman.student.harvard.edu.
À l'époque, nous avions tous unique les noms d'hôte identifiables.
Et vous pourriez choisir une vanité nommer à la place de votre propre nom.
Et je suis allé avec l'homme-grenouille pour une raison quelconque.
>> Et puis je started-- je passais beaucoup de temps en cliquant sur ces liens à travers
ce matin.
Et ce fut ma page à propos, qui maintenant sorte de semble adorable.
Mais il témoigne aussi de tout dans quelle mesure la technologie a venir.
Je veux dire, retour dans la journée, un 486 était quelque chose.
Ces jours-ci, il est super, super, super lent et bien moins
que vous pourriez avoir dans votre propres poches de nos jours.
Il ya plus de là que était encore plus embarrassant.
Je vais donc en rester là.
Mais ce fut ma première incursion dans web-- oh, non.
Cela n'a pas été.
Ma première incursion réel dans la programmation web était ce site, dont je viens oublié.
À un certain point, je appris à faire des images de fond répétitives.
Et donc je trouvais ce pavage efficace, comme joueur de hockey, le football et le golf
boule, ou quelle qu'elle soit pour le site Frosh GI.
Et ce fut fait, véritablement la premier projet basé sur le web, je pris on--
Je pense que peut-être sophomore année, année-- juniors
après avoir pris CS50 et CS51, un des classes de suivi sur les communes.
Je remarquai dans la recherche à travers les archives
que l'un de mes successeurs et amis, Lee, sorte de changé
le droit d'auteur à lui-même.
Mais ce fut en effet quelque chose qui Je dois posséder l'embarras.
Mais à l'époque, ce a été le premier site,
comme je le disais il ya quelques semaines, qui pourrait freshman
inscrivez-vous pour les sports intra-muros ici.
Et il se trouve que les images de fond
comme ça ne sont pas une bonne idée.
Mais le web était nouveau, et nous étions tous expérimentons.
Et voici ce que je apparemment fait à l'époque.
Bien.
Alors sans plus tarder, nous passons engrenages aujourd'hui pour vous donner, vraiment,
la dernière pièce que vous pourriez trouver particulièrement utile pour les projets finaux
mais aussi que va commencer à faire le world wide web entier
se sentir un peu plus compréhensible.
En effet, nous allons mettre en place une langue de plus de programmation
appelé JavaScript qui est semblable et différent de différentes façons
de langues, nous avons regardé jusqu'ici.
>> Donc C, le rappel, est-ce langage compilé.
Vous avez à courir par un compilateur.
Vous obtenez le code source d'opposition code, ou zéros et de uns.
Et ce sont des zéros et ceux qui votre CPU, Central Processing Unit,
fait comprendre.
PHP, en revanche, est pas un langage compilé.
Il ya un quoi?
Il est un langage interprété.
Donc, il ya un programme appelle un interpréteur qui
a lire it-- haut en en bas, de gauche à droite-
et comprendre ce que tous votre syntaxe fait et signifie,
que ce soit une boucle ou une condition ou tout autre numéro de programmation
construit.
Voilà donc un langage interprété.
>> Ensuite, nous avons introduit HTML.
Et HTML est même pas un langage de programmation.
Nous aimerions appelons quoi?
Un langage de balisage, qui est juste une sorte de fantaisie façon de dire qu'il
n'a pas constructions de programmation comme nous l'avons vu, même de retour dans la journée de Scratch.
Il n'y a pas de boucles.
Il n'y a pas de conditions.
Il est vraiment une langue sur le marquage de vos données
et le formatage ou la structuration d'une certaine façon.
>> CSS, quant à lui, de la même pas un langage de programmation.
Il est même plus esthétiquement orienté.
Et il vous permet de trier de peaufiner des choses comme la taille et les couleurs police
et de placement et tout ça.
Puis nous avons eu
>> SQL.
Donc SQL est en effet une programmation la langue dans un certain sens,
bien adapté spécifiquement aux bases de données.
Mais même si nous ne vous présentons sélectionner et insérer et supprimer et mettre à jour
et quelques autres, avère vous pouvez réellement
écrire ou fonctions procédures, car ils sont
appelé, dans SQL qui ressemblent et agissent tout à fait comme les fonctions PHP et C.
Savent que ceux qui existent donc.
Mais nous ne même pas la peine avec eux comme nous suffit de gratter la surface ici.
Et puis JavaScript, le dernier des nos langues officiellement présentés.
Donc JavaScript, aussi, est un langage interprété.
Et ceux qui connaissent, font vous voulez distinguer
avec une certaine caractéristique à la fois C et PHP?
Qu'est-ce qui le rend différent?
>> PUBLIC: Il est pas compilé.
>> DAVID MALAN: Dites à nouveau?
>> PUBLIC: Il est pas compilé.
>> DAVID MALAN: Il est pas compilé.
Donc, elle aussi, est interprété.
Donc, il est pas compilé.
Mais qui le rend un peu comme PHP.
Mais il est encore différent de PHP d'une certaine façon frappante,
au moins dans la façon dont nous allons l'utiliser.
Ouais?
>> PUBLIC: Il fonctionne côté client.
>> DAVID MALAN: Il fonctionne côté client, le plus souvent.
Voilà en effet le distinctif caractéristique pour nous en ce moment.
C était côté serveur dans le sens que nous avons tout fait dans CS50 IDE.
PHP a été jusqu'ici côté serveur dans la mesure où
comme elle, aussi, obtient interpreted-- pas compilé, mais interpreted--
l'intérieur CS50 IDE, ce qui bien sûr est juste un ou plusieurs serveurs dans le nuage.
>> Mais JavaScript, même si vous vous allez
pour commencer à écrire pour, disons, pset huit et peut-être définitive projects-- vous êtes
aller à droite dans CS50 IDE et l'enregistrer
dans des fichiers au sein CS50 IDE, IDE CS50 et, à leur tour, les serveurs cloud
sur lequel il est hébergé, ne vont pas d'interpréter ou d'exécuter votre code.
Au contraire, il va être envoyé dans forme inchangée jusqu'au navigateur.
Et ça va être ensuite IE ou Chrome ou Firefox ou Safari
ou quel que soit ce que l'interprète fait il, de haut en bas, de gauche à droite.
Donc, la clé qui distingue caractéristique pour aujourd'hui
est que JavaScript est côté client PHP et, par exemple,
a été côté serveur.
Maintenant, cela a des implications intéressantes pour, comme, la propriété intellectuelle
et qui peut réellement voir votre code.
Et en effet, vous pouvez aller sur le web et voir plus
tout code que quelqu'un a écrit en JavaScript.
Parfois, il est lisible, il est parfois masquée.
Mais plus sur cela en temps voulu.
>> Donc JavaScript, joliment assez, est super-similaire, syntaxiquement, à C.
Et tout comme PHP, il n'y a aucune fonction principale.
Si vous voulez commencer à écrire Code JavaScript, comme vous le verrez aujourd'hui,
vous venez de commencer à l'écrire.
Mais il est, vous verrez, en particulier utile dans le contexte des navigateurs web.
Cependant, ma petite disclaimer-- habituellement l'heure, à
a été de dire que vous ne pouvez plus en plus usage aujourd'hui JavaScript côté serveur
en utilisant un cadre de fantaisie appelé Node.js que certains des propres applications de CS50
sont écrits dans.
Vérifiez 50 utilise effectivement Node.js.
Mais nous allons nous concentrer sur JavaScript côté client de maintenant.
>> Voici donc un ensemble de conditions en PHP.
Désolé, in-- effectivement, que déclaration, trop est correcte.
Voici également un ensemble de conditions en JavaScript.
Syntaxiquement, il est identique à C et PHP.
Les expressions de M. Boole sont, De même, syntaxiquement
identique à la fois C et PHP.
Nous avons aussi des commutateurs JavaScript qui semblent identiques.
Nous avons pour les boucles qui sont structuré de manière identique,
tout en boucles, faire tout en boucles.
>> Celui-ci est un peu différent.
PHP avait le pour chaque construction que vous utilisez peut-être
ou vont utiliser dans pset sept, peut-être.
JavaScript a cette version spéciale de pour le cas où vous dites littéralement quelque chose
comme par clé variable dans l'objet, qui est une façon très succincte de dire,
si je dois un object-- et nous allons parler de ces nouveau dans un moment--
et je tiens à itérer sur tous les des paires de clés de valeur à l'intérieur,
Je ne dois pas comprendre comment les index numériquement avec zéro, un,
deux trois.
>> Je peux littéralement dire cela.
Et à chaque itération, JavaScript pour moi vais mettre à jour la clé variable
être la première touche, puis sur la touche suivante, puis sur la touche suivante, puis la touche suivante,
et ainsi de suite.
Et je peux obtenir à sa valeur en traitant un objet en JavaScript, comme nous le verrons,
comme si elle est un tableau associatif en PHP.
En effet, si vous avez finalement enveloppé votre esprit autour de ce qui est un tableau associatif
en PHP, vous pouvez penser pour l'instant que identique à un objet en JavaScript.
Mais cela a un peu de une simplification excessive.
>> Arrays ressemblent, bien assez, identiques à PHP, sauf pour un caractère.
Il ya une chose qui manque ici que nous avons vu la semaine dernière avec PHP.
Ce qui est omis?
Ouais?
Aucun signe de dollar.
Donc, nous sommes de retour à un monde plus normal où
les variables ne sont pas des signes de dollar.
Mais vous faites précéder les var, généralement.
Et var signifie variable.
Et tout comme PHP est lâche typed-- lequel il ya des types,
il ya des nombres et des chaînes et les flotteurs et ainsi forth--
JavaScript doit similaire types.
Mais il est faiblement typé dans que nous le les programmeurs ne doivent pas les spécifier.
Nous devons juste être conscient que les différents types existent.
>> Variables, meanwhile-- voici comment nous pourrions déclarer "Bonjour, monde"
comme une chaîne.
Notez qu'il est identique à PHP, mais aucun signe de dollar.
Et ceci est quelque chose que nous allons commencer à voir plus aujourd'hui,
par lequel vous avez un objet avec des clés et des valeurs.
Et si vous voulez essayer de déduire de la dernière week--
la syntaxe est un peu différent.
Mais un peu de bon sens check-- combien touches cet objet ne semblent avoir?
Donc, je vois quatre.
Je vois deux.
>> Donc, il est en fait deux.
Donc, cela est une collection de deux paires clé-valeur.
La clé est le symbole dont la valeur est FB.
La clé est le prix dont la valeur est 101,53.
Donc, ce sont deux paires clé-valeur.
Et rappelez-vous, PHP-- et cela est nouveau juste une sorte de différence syntaxique.
Il est pas tout à fait intellectuellement intéressant.
PHP aurait pu écrire ce même chose comme citant follows--, est égal.
Et je modifier ces à crochets.
Et puis-je changer cela un mot cité, le «prix».
Et puis je ne l'utilise un colon.
Qu'est-ce que je sers la semaine dernière?
Ouais, le signe égal flèche notation funky.
>> Et puis je l'ai fait la même chose ici.
Même chose ici.
Et c'est tout.
Donc, il est très bien si cela n'a pas vraiment coulé dans la mémoire juste
encore parce qu'il est vraiment intellectuellement inintéressant.
Il est juste différences syntaxiques.
Mais les idées sont exactement les mêmes.
A l'intérieur de cette variable citant en JavaScript
est une collection de paires clé-valeur, dont l'un est le symbole, dont l'un
est le prix.
Et je peux obtenir à ces valeurs avec la syntaxe suivante.
Tout comme en PHP, je pouvais faire quelque chose like-- laisser
moi de faire cette case, un peu plus grand.
Tout comme en PHP, je pouvais faire this-- oh, merde.
Allons.
>> Tout comme dans PHP-- OK, nous allons il suffit d'utiliser les notes de l'intervenant.
Tout comme en PHP, je peux faire $ $ devis devis ["symbole"],
et cela va me faire la valeur de «symbole».
En JavaScript, il va être identique, de sorte que je ne peux le faire.
La seule chose qui est manquant est le signe dollar.
>> Si bien assez, alors, il ya pas tout ce que la syntaxe de bien nouveau.
Donc, ce qui aujourd'hui nous nous concentrons sur, vraiment, est certaines des idées et des applications.
Et le premier de ces l'application que vous pourriez
ont vu si vous plongé dans pset sept est déjà cette syntaxe.
Donc, en pset sept, si vous avez vu ou pas vu encore,
savent qu'il ya un fichier que nous donnons vous avez appelé config.json-- JavaScript
Object Notation.
Pourquoi?
Nous voulions être en mesure de vous fournir un modèle avec des paires clé-valeur.
Nous voulions être en mesure de vous donner une liste de l'hôte, le nom du serveur.
Nous voulions vous donner un espace réservé pour votre nom d'utilisateur
et un espace réservé pour votre mot de passe.
Si vous ne voyez pas ce encore, ne vous inquiétez pas.
Plus à ce sujet dans pset sept [? spec. ?] Et alors,
de toute évidence, nous voulons que vous pour remplir le à dos
parce que quand vous vous connectez à CS50 IDE, chacun de vous
avoir votre propre nom d'utilisateur et mot de passe.
>> Donc, nous pourrions avons utilisé une demi-douzaine ou différents formats de fichiers plus.
Nous aurions pu utiliser un fichier .txt.
Nous pourrions utiliser un fichier CSV.
Nous pourrions avons utilisé un Fichier INI, un fichier XML,
tout un tas d'autres acronymes vous ne pourriez pas avoir jamais entendu parler.
Il est un peu arbitraire à la fin de la journée.
Mais super populaire ces jours-ci est un texte format appelé JSON-- JavaScript Object
Notation-- qui ressemble à ceci.
Il est un peu cryptique, de remarquer les motifs.
Vous commencez avec un bouclés ouverte accolade, et vous vous retrouvez avec le même.
A l'intérieur de ce est quelque chose.
Il est une paire clé-valeur.
Alors ceci est un objet que je suis en regardant sur l'écran ici
qui a une clé, qui a une valeur.
Et juste d'inférer sur la base du modèle précédent, ce qui est la clé ici?
Base de données, la chose à le côté gauche du côlon.
>> Maintenant, la valeur se trouve être a plusieurs lignes cette fois.
Mais la valeur commence avec un bouclés accolade et se termine par une accolade.
Alors, que proposeriez-vous est le type de la valeur de base de données?
Un dictionnaire ou, un peu plus succinctement, un objet.
Droit?
Ceci est une sorte de structure de données qui peut utiliser d'autres structures au sein de lui-même.
Donc, si tout cela nous sommes appeler un object-- et un objet
est juste un tas de clé-valeur pairs-- la valeur de la base de données elle-même est un objet.
La valeur de base de données a tout un tas des paires de valeurs clés, le premier d'entre eux
est l'hôte, puis nom, puis nom d'utilisateur, mot de passe, puis,
dont chacune des valeurs, quant à lui, il est juste une chaîne ennuyeuse entre guillemets.
>> Donc, même si cela ne super clair pour l'instant,
sachez que ceci est juste une norme façon, assez ennuyeux
de stocker des données dans un format standard.
Mais les erreurs courantes que vous pourrait faire, même dans pset sept,
sont de petites choses stupides, comme si vous accidentellement omettre la virgule il.
Cela va se traduire dans le fichier pas nécessairement être lisible.
Si vous omettez accidentellement des choses comme la citations, ça ne va pas être lisible.
Donc, il est un format de fichier très tatillon, mais il en est un qui est super commun.
Et il nous arrive de l'utiliser, même si vous ne l'utilisez toute JavaScript contraire,
dans pset sept.
>> Bien.
Alors rappelez-vous cette image.
Nous avons parlé, en HTML, que le code pourrait ressembler à ceci.
Ceci est le langage de balisage hypertexte [Inaudible] pour juste "bonjour, monde."
Mais alors, nous avons proposé une tandis que de retour si ça aide,
vous voudrez peut-être commencer à penser sur ce déjà comme un arbre.
En fait, l'indentation que nous utiliser juste pour l'amour de lisibilité
ou pour l'amour sur le style de la gauche peut sorte de
être traduits dans cet arbre, où vous avoir une certaine nœud racine spéciale que nous allons
génériquement appelé le document, en dessous de laquelle est l'élément HTML racine ou tag, HTML,
qui présente alors deux les enfants, la tête et le corps.
>> Et puis, à son tour, la tête a un titre.
Et le titre a une valeur de texte.
Et le corps a de même une valeur de texte.
Donc, si vous dites à l'aise que oui, vous pourriez profiter de cette HTML
et dessiner une image comme cela, le côté droit
est un beau modèle mental parce que maintenant que nous avons JavaScript, une programmation
langue que les navigateurs peuvent exécuter et interpréter pour vous,
il se trouve que ce nous sommes sur le point de le faire dans le code
est de commencer à manipuler cette structure arborescente en mémoire.
Nous ne disposons pas de construire l'arborescence dans la mémoire.
Nous ne devons pas faire de tri structure de données pset-cinq de style
complexité.
Le navigateur, bien assez, sur l'interprétation HTML haut en bas,
gauche ou à droite, va littéralement nous livrer l'équivalent d'un pointeur
à cet arbre entier gratuitement.
Il fait tout le travail acharné.
Voilà ce que Mozilla et Apple et d'autres ont fait pour nous.
>> Et avec JavaScript allons-nous être en mesure de contrôler et de modifier et de le faire
choses intéressantes à cet arbre, autrement connu
comme un DOM ou Document Object Model.
Quel genre de choses?
Eh bien, il se trouve que en JavaScript, il ya
cette liste de blanchisserie de événements qui peuvent avoir lieu.
Et nous avons pas vraiment utilisé que mot depuis la semaine zéro et pset
zéro lorsque nous avons parlé de Scratch.
La plupart d'entre vous probablement ne pas utiliser un événement dans votre projet de Scratch.
Mais vous pourriez rappeler simple Marco Polo
par exemple, où nous avons eu deux sprites, dont l'un dit, Marco.
L'autre dont puis, sur l'écoute et d'entendre cet événement, dit Polo.
Si non, vous pouvez regarder en arrière aussi loin en arrière.
>> Mais cela est juste pour dire, et vous pouvez sorte de
déduire les noms de ces choses, JavaScript, il se trouve,
va nous donner un moyen d'écouter pour la souris ou la souris descendre monter
ou la touche de descendre ou la touche monter ou onselect onsubmit
ou onresizing quelque chose.
En d'autres termes, toute action physique que l'homme peut prendre avec un navigateur
que vous faites chaque jour, vous pouvez écrire code qui écoute pour ces événements
et fait ensuite quelque chose d'approprié.
>> Par exemple, si vous utilisez Google Maps, ce qui se passe si vous cliquer et déplacer
la souris, typiquement?
Si vous cliquez et faites glisser?
Ouais?
Exactement.
La carte commence à se déplacer.
Ainsi, vous pouvez sorte de voir ce qui est ici, ce qui est là-bas.
Et comment Google de mettre en œuvre ce que cela?
Eh bien, sans doute, ils sont en utilisant un couple de ces événements
auditeurs, qui dit, écouter de la souris
down-- donc lorsque l'utilisateur physiquement pousse son trackpad ou son souris
vers le bas.
Et puis, nous sommes à la recherche quelque chose comme le mouvement
ou un autre événement qui nous permet de capturer la traînée.
Et en fait, la traînée est similaire dans ce dot dot dot liste des options possibles.
>> Donc cela va être un puissant façon de commencer à répondre à l'utilisateur
même avant qu'il ou elle clique effectivement quelque chose explicite comme pour soumettre.
Mais nous allons introduire quelques sujets pour y arriver.
La transition Mais d'abord, laissez- dans une certaine code réel.
Donc, je vais aller de l'avant et ouvrir dom-0,
qui est un exemple très simple ici que si je zoome simplement
a cette entrée ici pour moi.
Et je vais aller de l'avant et tapez "David" pour mon nom et cliquez sur Envoyer.
>> Et puis, bien sorte de bon marché, je avoir cette invite qui apparaît qui dit,
"bonjour, David!"
Donc, ce genre d'est comme notre «bonjour, monde"
que nous avons fait quelque temps en arrière en C et même dans PHP parce que je l'ai dynamiquement
sorti mon nom.
Je peux faire le nom de quelqu'un d'autre ici.
Je ne pouvais tout simplement changer cela, comme, Hannah, cliquez sur Soumettre.
Et en effet, les petits changements de pop-up.
>> Maintenant, les pop-ups sont l'un des la plupart des victimes de violence fonctionnalités du Web.
Et en fait, de retour dans les bloqueurs de pop-up jour
est entré en vogue parce que vous irait à certains website--
peut-être un place-- douteuse qui serait soudain
commencer émaillant votre écran avec tout un tas de pop-ups.
Et donc cette capacité de pop up les fenêtres à l'avant de l'utilisateur
n'a pas été particulièrement bien reçu par l'humanité.
Voilà pourquoi vous voyez cette chose prévenir,
ce qui rend tout simplement toute cette chose laide.
Donc, nous allons avoir besoin d'un meilleure façon de demander à l'utilisateur.
Mais pour l'instant, cela semble fonctionner.
Il suffit donc de manière intuitive, ce qui semble se produire ici?
Je vais de l'avant et cliquez sur soumettre, et puis quelque chose se passe, clairement.
Mais ce qui ne se passe pas est-ce arrivé toute la semaine dernière fois que je clique sur Envoyer?
Ce qui n'a pas arriver sur l'écran?
Pardon?
Recharger.
L'URL n'a pas changé du tout.
Je l'ai dit était dom-0, et je suis toujours à dom-0.
Normalement, nous aimerions avoir changé à un autre URL, comme register.php ou similaire.
>> Mais même quand je rejette cette chose en cliquant sur OK,
remarquerez que l'URL reste entièrement posée.
Et, en fait, si je suis un peu sceptiques, laissez-moi ouvrir de Chrome.
Permettez-moi d'ouvrir l'onglet Réseau.
Et remarquez il est vide pour le moment.
Permettez-moi aller de l'avant et de demander le réexamen de Maria.
Il n'y a pas que ce soit le trafic réseau.
Donc, il n'y a pas HTTP.
>> Donc, en effet, si je regarde le code source this-- pour me permettre de fermer cette fenêtre
et aller voir la source.
Intéressant.
Il semble qu'il y ait une certaine de nouvelles étiquettes, parmi eux script.
Donc, nous allons jeter un coup d'oeil dans les CS50 IDE exactement ce que je envoyé à l'utilisateur.
>> Donc, ici nous allons est-- se concentrer sur le HTML seulement.
Voici la moitié inférieure de dom-0.html.
Et remarquez qu'il a un titre, une étiquette de tête, une étiquette de corps, une balise form.
Mais ce qui saute à vous comme différente, surtout si vous avez jamais
écrit toute JavaScript vous-même.
Permettez-moi de faire défiler un peu à droite ici.
Je dois une entrée, une autre entrée pour les soumettre.
Je dois un ID, qui est une sorte de nouveau.
Mais nous ne le voyons avec CSS.
Quoi d'autre est certainement nouveau?
Ouais?
Agréable.
>> Bien.
Alors, où il est dit onsubmit, remarquer ce qui semble suivre.
Ceci est un attribut dans la nomenclature HTML.
Sa valeur est cette chaîne citée ici.
Et cela ressemble un peu bizarre au premier coup d'œil.
Il est pas HTML.
Il est pas CSS.
Ceci est, comme vous pouvez le deviner, JavaScript.
Il semble donc que construit dans cette page Web est une fonction appelée saluer.
Et je déduire que tout car il est un mot, saluer.
Il a obtenu une parenthèse ouverte, fermer la parenthèse, point-virgule.
On dirait une fonction C, ressemble à une fonction PHP.
>> Et en effet, il va être une fonction JavaScript.
Puis je retourne faux.
Nous y reviendrons que dans un instant.
Mais où est cette fonction définie?
Eh bien, laissez-moi défiler vers le haut au début du fichier.
Et même si elle est une longue ligne, il est relativement simple.
Permettez-moi ici et Zoom arrière se concentrer sur ces quatre lignes.
>> Donc, en JavaScript, tout simplement comme PHP, vous venez
disons, littéralement, le mot «fonction», le nom de la fonction,
et de parenthèses puis avec toute arguments-- pas d'arguments dans ce cas.
Et il n'y a aucun type de retour en JavaScript, tout comme PHP.
Donc, il est un peu plus lâche que C. Accolade ouverte, accolade à proximité.
Construit en JavaScript est une function-- un function-- pas recommandé
mais une fonction appelée alerte dont le seul but dans la vie
est de tirer vers le haut que assez laid invite qui nous l'avons vu il ya un instant.
>> Or, cette est une sorte de bouchée.
Qu'est ce qui se passe ici?
Commençons donc à mettre en évidence tout ici.
Voilà le même argument pour alerter.
Et ce qui se passe?
Cela ressemble exactement comme une chaîne.
Et il se trouve, contrairement à PHP et à la différence C, il n'a pas d'importance en JavaScript
si vous guillemets simples ou doubles.
Ils vont être équivalent.
Et franchement, il est juste populaire ces jours-
pour les programmeurs JavaScript pour toujours utiliser des guillemets simples pour une raison quelconque.
Il est juste la chose à faire.
Mais nous pourrions utiliser des guillemets, ainsi.
>> Alors Plus est un nouveau personnage.
Mais ceux d'entre vous qui avez fait cela avant, ce qui ne signifie en plus?
Ouais.
Concaténer.
Donc, nous avons vu ce en PHP.
Il ya juste le point opérateur en PHP qui
va concaténer deux chaînes ensemble.
C était une douleur dans le cou pour ce faire.
Rappel de pset six, qui était une douleur particulière dans le cou,
vous auriez à utiliser quelque chose comme strcat
après l'allocation de mémoire sur la pile ou du tas.
Vous avez eu à sauter à travers des cerceaux juste pour concaténer deux chaînes.
En JavaScript, il est super simple.
Il suffit d'utiliser l'opérateur de plus entre eux.
>> Ainsi, le complexe à la recherche chose semble être présent
parce que à la fin de toute cette chaîne, je viens
concaténer sur un point d'exclamation.
Donc, si ce qui a été popping up a été "bonjour, David", "bonjour, Hannah,"
"bonjour, Maria," et ainsi de suite, clairement cette chose milieu entre les deux
avantages doivent me donner accès à quoi?
Qu'est-ce qu'il ya dedans pour vous?
Ouais.
Alors je vais faire semblant ici la répondre à leur nom, non?
Donc, leur nom a surgi dans la finale résultat. Qu'est-ce que cela signifie?
Eh bien, je proposai que plus tôt dans image que le soi-disant DOM
a cet élément racine spécial chemin jusqu'à top appelé document.
Et maintenant, il se trouve, ça va être une variable globale spéciale
en JavaScript, intégré qui est un tas ensemble de fonctionnalités utiles.
Parmi les fonctionnalités utile est le capacité à obtenir à tout nœud descendant.
Ces carrés ou des rectangles ou des ellipses sont quelques noeuds dans un arbre, pour ainsi dire.
>> Donc, il se trouve que intégré Document de l'objet de JavaScript
est une fonction, autrement connu comme un méthode, qui est ce qu'on appelle getElementById.
La syntaxe d'appel une fonction en JavaScript
qui est à l'intérieur d'un objet ou d'un variable est juste avec la notation par points.
Et nous avons vu cela dans C ce que la syntaxe de la structure.
Vous voyez cela dans pset sept, en quelque sorte, en quelque sorte, quand vous voyez CS50 :: query.
Le côlon du côlon en PHP est un autre manière d'appeler une fonction qui est
à l'intérieur d'un objet.
>> Mais pour l'instant en JavaScript, il est juste un point.
Et donc cette fonction, bien assez, sorte de
dit ce qu'il does-- obtenir élément par ID.
Un élément est juste un autre nom pour une étiquette ou un nœud dans le DOM.
Et donc obtenir par ID élément "name" signifie this-- voici mon HTML.
Et sur cette base HTML, ce qui nœud ou ce balise HTML suis-je
va être remis programmation en appelant document.getElementById?
>> Oui exactement.
Je vais pour obtenir l'entrée il élément dont l'ID est "nom".
Donc spécifiquement, vous pouvez penser à cette fonction,
getElementById, comme un moyen de donner sauvegarder un pointeur vers ce noeud spécifique
dans l'arbre.
Nous avons pas tiré cette arbre, mais il est une façon
d'obtenir l'accès à ce rectangle ou rectangle que
en identifiant de manière unique par l'intermédiaire de son identification.
>> Maintenant, pourquoi est-ce utile?
Eh bien, il se trouve qu'une fois que vous avez obtenu
ce noeud, ce rectangle de la image, ce noeud à l'intérieur,
à son tour, a tout un tas de paires clé-valeur properties--
ou de données, une valeur qui est appelé.
Donc, littéralement, il est une sorte de gorgée d'expliquer le tout.
Mais à la fin de la journée, Tout cela ne fait que vous donner
une chaîne que l'utilisateur a tapé dans de cette façon hiérarchique.
Mais je ne aime pas deux de ces choses.
Ou plutôt, il ya toujours une certaine curiosité.
Tout cela a semblé fonctionner.
Pourquoi pensez-vous que je revins fausse après l'appel de saluer?
Cela ressemble un peu laid, que Je ai deux déclarations il
séparées par des points-virgules.
Prenez une supposition.
Si je l'ai enlevé return false, ce qui pourrait arriver, juste instinctivement?
Désolé, dire encore?
>> Ouvrez un tas de Windows.
Donc potentiellement être quelque chose comme cela pourrait se produire.
Quoi d'autre?
Pourrait soumettre une demande où?
Pour la même page.
Donc, en fait, que ce que La réponse de plus près ici,
même si, contrairement dans le passé, je ne l'ai pas
spécifié l'attribut action, qui, normalement, nous avons à faire.
Avère qu'il ya un défaut. Si vous ne spécifiez pas l'action,
il est comme dire entre guillemets ou le nom du fichier lui-même,
qui dans ce cas serait être comme dom-0.html.
Il est juste genre de déduire, ou plutôt implicite.
>> Et si je ne le fais pas, allons préavis.
Permettez-moi de sauver ce.
Et je l'ai enlevé return false.
Permettez-moi de revenir à ce exemple et la force recharger.
Et vous pourriez avoir vu moi de suggérer ceci sur CS50 discuter d'un tas de fois.
Si quelque chose a jamais agissant funky et la navigateur est ne pas se comporter comme prévu,
souvent vous aurez envie de tenir Maj, puis cliquez sur Recharger.
Cela forcera chaque fichier à recharger et ne pas utiliser le cache local de votre navigateur
ou une copie de sorte que maintenant, laissez-moi aller de l'avant et ouvrir mon inspecteur, l'onglet Réseau.
Je vais à cliquer Préserver Connexion parce que je
ne veulent pas de supprimer les lignes une fois que je me emmené ailleurs.
>> Permettez-moi ici et aller de l'avant Type de Andi, cliquez sur Envoyer.
Bien.
Cela semble comme prévu.
Il dit: «Bonjour, Andi."
Permettez-moi de cliquez sur OK.
Intéressant.
Notez que la page a changé, mais à la page originale.
Notez l'URL genre de changement.
Il a ajouté un point d'interrogation, qui est habituellement un indicateur
que nous avons essayé de présenter quelque chose.
Ensuite, à la base, encore plus explicitement,
voici la requête HTTP réel, qui a obtenu une réponse de la 200 qui
m'a ramené ici.
>> Donc, ce ne sont pas ce que nous voulons faire, non?
Parce que je ne veux pas recharger la page entière.
Je voulais retourner à la place fausse de façon à court-circuit
le comportement par défaut du navigateur, qui était, bien sûr, de soumettre la page.
>> Donc, nous allons jeter un oeil à un marginalement meilleur exemple.
Ceci est une version d'un dom.
Et remarquez ce qui suit.
Il est OK si vous ne digèrent pas le toutes les lignes de code.
Mais ce qui est fondamentalement différent sur cette mise en oeuvre?
Je vais le stipuler se comporte de la même, fait la même chose.
Qu'ai-je de toute évidence fait différemment?
Ouais?
>> AUDIENCE: [inaudible].
DAVID MALAN: Ouais.
Donc la fonction est définie differently-- en d'autres termes, absents de la forme,
là-haut sur la ligne ou 7-- plutôt, la ligne 8-- plus
dois-je l'attribut onsubmit.
Dans l'exemple précédent, je devais cela.
Et puis je me suis littéralement écrit mon code ici.
Et puis je l'ai dit return false.
Et si elle n'a pas frotter vous dans le mauvais sens encore,
il devrait commencer à la mesure que, tout comme en HTML,
lorsque nous avons commencé à collaborer le mêler avec CSS dans les attributs de style,
il a juste commencé à devenir un peu désordre ou se sentir un peu mal.
>> De même ici, si vous commencez à prendre HTML,
et puis vous automatiquement plop un peu de code JavaScript
au milieu d'une chaîne entre guillemets, il est ne va pas être très maintenable.
Droit?
Il est même pas évident au premier abord lieu où le code JavaScript est.
Donc, ce serait vraiment bien que un principe de meilleure conception,
gardons notre HTML complètement séparer de notre JavaScript.
>> Donc, pour ce faire, ce que nous avons fait ici est l'following--
nous utilisons simplement pour le balisage HTML seulement.
Et donc en version un de cela, tous les Je avoir est un formulaire avec un identifiant unique.
Et puis ici, je profite d'une caractéristique particulière de JavaScript
par lequel je peux avoir ce qui est appelé une fonction anonyme.
Donc, il se trouve que si je l'appelle document.getElementById de «démonstration»
qui est comme moi donner un pointeur vers ce noeud dans mon arbre, l'élément de formulaire,
pour ainsi dire.
>> Maintenant, je sais juste de sachant un peu de HTML
maintenant nous allons avoir lu certaines en ligne référence, un élément de formulaire prend en charge
tout un tas d'événement dans listeners-- Autrement dit, la liste de blanchisserie de l'événement
les auditeurs que nous avons vu il ya un instant.
Je sais que la lecture de la documentation que onsubmit est un événement valide
écouteur pour un élément de formulaire.
>> Donc, une fois je sais que, il est sûr pour moi de faire
l'following-- obtenir ce noeud de l'arbre, l'élément de formulaire,
et accéder à sa soi-disant onsubmit propriété.
Donc, le point signifie simplement ceci est une propriété,
comme une valeur spéciale à l'intérieur de celui-ci.
Et quel type de données que je suis affectation, apparemment,
à onsubmit, qui est efficacement une variable à l'intérieur
de ce noeud dans l'arbre?
Il est un champ à l'intérieur de cette structure.
Quel est le type de données?
>> Une fonction, ouais.
Donc, il se trouve que PHP a cette.
Et même si nous n'a pas vous dire à ce sujet,
C a aussi des pointeurs de fonctions, les capacité à passer et assigner des fonctions
que les valeurs de variables elles-mêmes.
Et on ne va pas à régresser à C.
Mais pour l'instant, il se trouve que sur le côté droit ici,
même si elle semble un peu génial, ce moyen, bon navigateur,
me donner une fonction.
Je ne vais pas même pas la peine de donner un nom parce que je suis littéralement
va affecter appelons- l'adresse de cette fonction
immédiatement à onsubmit.
En d'autres termes, le navigateur, vous ne devez pas de savoir ce que cette fonction est appelée.
Vous avez juste besoin de savoir où il est en mémoire.
Et il suffit juste avoir un signe égal il
et de ne pas prendre la peine de nommer ce, comme foo ou saluer ou tout autre mot.
Et maintenant cela est juste une chose stylistique.
Je pourrais passer cette accolade sur the-- sorry-- ligne suivante
comme nous le faisons habituellement CS50.
Mais en JavaScript, il est effectivement stylistiquement commune
juste garder l'accolade, le première, sur cette première ligne.
>> Mais au-delà, il ya rien d'interessant.
Ce accolade ouverte juste délimite le début de ma fonction.
La fonction est maintenant identiques, sauf que je l'ai
inclus le faux de retour à l'intérieur de cette fonction.
Parce qu'il tourne out-- et vous feriez seulement
le savoir de la lecture l'documentation--
que si la fonction que vous affectez au gestionnaire onsubmit retourne false,
le navigateur sait juste et accepte de ne pas soumettre le formulaire à un serveur.
Si elle retourne vrai, il soumettra à un serveur pour des raisons que nous verrons
sont utiles dans un instant.
>> Et puis, le point-virgule après l'accolade là juste
signifie que je suis fait la définition de la fonction.
Vous savez ce qu'il faut appeler dès que vous entendez une soumission.
Bien.
Ceci est encore sans doute genre de laid.
Alors, que pouvons-nous faire?
>> Eh bien, il se trouve alors en version à deux, ce qui est le last--
et nous allons juste regard sur cette.
Au risque de faire il laid, il se trouve
qu'il ya une bibliothèque dans le monde appelle jQuery.
Et jQuery est un super- bibliothèque JavaScript populaire
qui est si populaire que la plupart toute JavaScript-- il est pas
rare que les gens confondent jQuery avec JavaScript.
Pourquoi?
JavaScript lui-même a très verbose façons de faire things--
document.getElementById, dadadadadada.
Vous finissez par avoir très longues lignes de code.
>> Donc un homme nommé John Resid, qui fonctionne réellement pour un démarrage
ces jours-ci, est sorti avec cette bibliothèque ans
il ya que beaucoup de gens ont contribué à appelé jQuery qui change
la syntaxe de la façon suivante.
Et juste pour que vous avez vu cela, parce que vous aurez toujours
voir cela si faire un projet final basé sur le Web,
ce serait le moyen équivalent de l'application de cette même fonction à l'aide
cette bibliothèque particulière.
>> Maintenant, plutôt que allumeuse à part dans sa totalité,
Regardons simplement à certains modèles.
Cette syntaxe semble avoir combien de fonctions anonymes
ou des fonctions anonymes ou fonctions lambda AKA?
Deux, non?
Et vous savez que, même si vous n'êtes pas super confortable avec cela,
simplement par le fait qu 'il dit function () deux fois.
>> Et il se trouve que ce que ce code est doing--
et nous référons à des références en ligne, finalement, un peu d'aide avec cela.
Cela signifie juste que quand le document est prêt,
allez-y et vous inscrire la fonction suivante
que le gestionnaire soumet à l'HTML élément dont idée unique est démo.
Et puis, quand cela arrive, appeler ces deux lignes de code.
Et cela est, malheureusement, un plus manière verbeuse de dire return false.
Et nous en avons parlé juste parce que vous verrez ce type de code en ligne.
Et ça n'a rien à se laisser impressionner par.
Mais plutôt, gardez à l'esprit que ce qui est va être commune en JavaScript
est ce paradigme.
Et voilà pourquoi nous montrons tout pour l'instant.
Bien.
Donc, sans trop d'habitation bien que sur la syntaxe,
sont il ya des questions sur ces exemples ou des idées à ce jour?
Bien.
Donc, nous allons l'utiliser pour quelque chose d'utile.
Faire une page Web qui indique juste bonjour, telle et telle est pas tout à fait intéressant,
pas de underwhelm.
Celui-ci ne va pas être beau, mais il va faire quelque chose d'utile.
Permettez-moi de revenir à mon répertoire ici et d'ouvrir, dire, la forme-0.html.
>> Donc, supposons que ceci est la première année sports intra-muros page d'inscription
sans CSS ou tout sens de la conception.
Et je veux aller de l'avant et Enregistrez-vous ici avec un mot de passe.
Et je vais accepter les termes et les conditions et cliquez sur Enregistrer.
Et maintenant, le site dit, "Vous êtes enregistré! (Eh bien pas vraiment.)"
Qui semble comme il a travaillé, mais laissez-moi aller de l'avant et de la force de rechargement.
>> Et permettez-moi de dire, non, vous ne le faites pas besoin de mon adresse e-mail réelle.
Ou peut-être, nous dirons juste courrier là-dedans.
Mot de passe sera, comme, 12345.
Et puis, juste parce que je suis un idiot, maintenant il est 123456789.
Et je ne vais pas de vérifier votre boîte.
>> Hmm.
Bien.
Donc, il ya plusieurs possibilités pour l'amélioration ici.
Et vous savez, ou allez voir dans pset sept, que vous pouvez écrire code--
et vous devrez écrire code dans PHP-- à défendre
contre ces types d'utilisateurs erreurs parce que l'utilisateur clairement
n'a pas coopéré.
Et il ou elle ne vous a pas donné tous les valeurs que vous vouliez ou même dans le format
que vous les vouliez.
Donc, vous le verrez dans pset sept qui nous pourrions certainement avoir une certaine
si les conditions qui disent si l'adresse e-mail
est pas un username@something.edu, Nous pourrions simplement
dire désolé et présenter des excuses à l'utilisateur beaucoup, comme vous pourriez être dans pset sept.
Ou si ils ont pas vérifié cette boîte, se révèle en PHP, vous pouvez détecter que,
aussi.
Et certainement, si les mots de passe ne correspondent pas comme dans register.php
pset pour sept, vous pouvez détecter que.
Mais cela est une douleur dans le cou que maintenant ils demandent
nous d'aller tout le chemin vers le serveur.
L'utilisateur est informé de l'erreur.
Et au moins, sauf si vous utilisez quelques techniques fantaisistes,
maintenant ils doivent cliquer sur la flèche de retour.
Ne serait-il pas agréable, comme un grand nombre de sites Web d'aujourd'hui,
si vous aviez plus immédiate rétroaction, instantanément?
>> En d'autres termes, laissez-moi aller à la version un, qui va pas être joli.
Mais il a cette caractéristique.
Malan, 12345, 123456789, pas va vérifier la boîte, enregistrer.
Les mots de passe ne correspondent pas.
Ainsi, même si ce pop-up est ugly-- nous pouvons remplacer éventuellement
avec quelque chose comme Bootstrap, que vous verrez dans pset sept
est un très populaire library-- je l'ai fait détectent que les mots de passe ne correspondent pas.
Bien.
Eh bien, permettez-moi de résoudre ce que l'utilisateur.
Laissez-moi aller de l'avant et dis 12345, 12345.
Toujours pas de vérifier l'accord.
Vous devez accepter les termes et conditions.
Alors pourquoi?
>> Si nous avons déjà posé qu'il ya un moyen,
et nous vous avons tenus dans pset sept pour détecter erreur
de telles conditions côté serveur, pourquoi devrais-je
embêter aussi le faire en JavaScript?
Qu'est-ce qu'un argument en faveur de l'ajout ce
vous êtes sur le point de voir comme some-- il ya une complexité supplémentaire.
>> Peut-être il n'y a pas à l'envers.
Qu'est ce que ça pourrait être?
AUDIENCE: [inaudible].
DAVID MALAN: Oh, intéressant.
Exploits potentiels.
Alors bien sûr, si vous n'êtes pas la manipulation entrée utilisateur erronée que grande,
il est peut être d'autant mieux si elle n'a même pas atteindre votre serveur.
Je voudrais repousser là et par exemple, vous devriez probablement
fixer à la fois de ces problèmes.
Mais que ce soit juste.
Quoi d'autre?
>> AUDIENCE: [inaudible].
>> DAVID MALAN: Ouais.
Ce code, comme nous l'avons dit, est interprété sur le côté client.
Il ne dérange pas le serveur, ce qui signifie qu'il ne
une incidence sur la charge ou la capacité du serveur.
Et maintenant, pour peu vieux moi, cela n'a pas d'effet significatif
parce que je dois un utilisateur en ce moment.
>> Mais si vous êtes tout site web de taille décente,
en particulier les plus grands, comme Facebook, plus vous pouvez garder les gens hors
de votre serveur le mieux car un serveur, bien sûr,
ne dispose que d'une quantité limitée de mémoire vive, un nombre fini de gigahertz,
un nombre fini de choses il peut le faire par unité de temps.
Donc, si il ya plus de gens dans le monde de frapper votre serveur,
connectant accidentellement à tort, tout aussi bien, si vous
peut garder que la charge de votre serveur.
De plus, en particulier sur un mobile device-- Si vous avez déjà
ou se connecter à my.harvard La netid de Yale ou similaire,
il ya ce le temps de latence avec beaucoup de des sites comme celle par laquelle il prend,
comme, un putain de seconde ou deux parfois.
Et puis, mon Dieu, si vous les fautes de frappe, alors vous devez frapper en arrière et refaire.
Donc, il ya de latence, surtout sur les connexions réseau lentes.
Mais JavaScript, parce il est exécuté sur le client
et n'a pas besoin d'aller d'avant en arrière à travers un Internet potentiellement lente
connexion, vous pouvez obtenir rétroaction presque instantanée.
>> Alors regardons à ce.
Permettez-moi de Open Up-forme 0 et regarder le HTML ici.
Et nous allons voir tout ce qui se passe.
Ceci est une forme dont la action est register.php.
Je suis juste en utilisant obtenez que je pouvais voir l'URL.
Mais pour les mots de passe, nous serions sûrement voulons pour changer ce pour poster dans la réalité.
Voici un champ de type texte d'entrée.
Voici une autre entrée champ de type mot de passe.
Voici, si vous ne l'avez jamais vu, une entrée de type case à cocher.
>> Mais il n'y a pas JavaScript ici que ce soit.
Ceci est juste HTML va à register.php.
Mais dans la version un, où je commencé à obtenir ces pop-ups,
nous allons voir ce qui se passe réellement ici.
Dans la version une, ce qui Je vais see-- I
pensais que je pouvais caler assez avec assez de mots, mais je suis sorti.
>> Dans la version One-- là nous allons.
Dans la version un, remarquer la following-- et est mise en oeuvre pas la meilleure,
mais il est mon premier.
Notez que le dessous forme, je dois une balise script.
Et une balise script signifie, hey, navigateur, ici
vient un peu de code en, généralement, JavaScript.
Et maintenant, remarque ce que je fais.
Sur line-- je peux à peine lire it-- ligne 32, il est dit,
var form-- alors donnez-moi une variable appelée forme.
Et puis obtenir document.getElementId d '"enregistrement".
Qu'est-ce que c'est?
Eh bien, permettez-moi de rembobiner ici.
Et remarquez, ah, je donnai l'élément de formulaire une idée arbitraire, mais descriptive
de l'enregistrement.
Donc, cela me donne une variable me permet de saisir ce nœud,
ce rectangle dans l'arbre appelé forme.
des moyens form.onsubmit, hé navigateur, enregistrer un écouteur d'événement
sur ce formulaire.
En d'autres termes, lorsque cette forme est soumis, exécutez le code suivant.
Il n'a pas besoin d'un nom parce que Pourquoi avez-vous besoin de connaître le nom?
Vous avez juste besoin de savoir ce que pour exécuter, ergo
il est une fonction anonyme ou lambda.
Et cette fonction est l'ensemble de ces lignes ici.
Et maintenant, pour être honnête, même si vous pourraient ne pas avoir jamais écrit JavaScript
avant, il est juste logique C et PHP.
Donc, si form.email.value == "" - donc si le champ email est vide,
crier à l'utilisateur ", vous devez fournir votre adresse e-mail ".
Sinon, si form.password.value Yell est vierge à l'utilisateur,
"Vous devez fournir votre mot de passe."
>> Plus intéressant encore, logiquement, si form.password.value ne le fait pas
égale form.confirmation.value-- d'où vient la confirmation vient-il?
Permettez-moi de revenir en arrière.
Eh bien, je ai appelé cette entrée champ ici le mot de passe.
Et je appelé celui-là confirmation.
Je pourrais l'ai appelé mot de passe deux ou autre chose.
Je vérifie logiquement que ces deux sont les mêmes.
Else-- il se trouve présente M. Boole again-- une valeur booléenne, la case à cocher.
Donc, si je dis, exclamation point-- sinon form.agreement.checked,
crier à l'utilisateur ainsi.
>> Donc, cette syntaxe que vous verrez est très commun en JavaScript,
où vous avez cette notation en pointillés.
Vous commencez avec un objet ici.
Vous plongez dans plus profond à un à une propriété comme mot de passe.
Et puis vous obtenez à sa valeur réelle.
Et encore une fois, voici l'entrée.
Voici le mot de passe nom.
Et sa valeur est quel que soit le humaine a effectivement tapé dans.
>> Donc, dans l'ensemble de ces cas, je suis retourné faux.
Mais sinon, je retourne vrai.
Et maintenant nous voyons un utilisation convaincante du moment
vous revenir faux Arrêtez ce que l'utilisateur de faire
et faire de lui choisir nouveau ou tapez à nouveau.
Sinon, nous revenons vrai.
>> Et permettez-moi de vous présenter un autre variante de ce juste
de semer une certaine compréhension de celui-ci.
Eh bien, dans la version 2 de cette forme-2-- Je vais le faire avec un geste de la main.
Ceci est, pour ceux qui sont curieux, la version jQuery,
ceux d'entre vous qui voudraient barboter dans cette bibliothèque.
Mais soyons start-- et des questions?
Permettez-moi une pause pour un moment parce qui était rapide et beaucoup.
>> Mais la bonne chose ici est que tous les du code est à peu près la même chose.
Le nouveau truc est ce qui est le DOM?
Quels sont ces rectangles?
Quels sont ces nœuds?
Qu'est-ce qu'une fonction anonyme?
Qu'est-ce qu'un gestionnaire d'événement?
Mais heureusement, la plupart de qui est juste cercle complet de, disons, la semaine zéro.
Bien.
Donc, quelque chose de légèrement plus intéressant?
Eh bien, tout d'abord, laissez-moi aller avant et d'ouvrir Google Maps.
Et vous remarquerez que pour une moment, sur la fraction de seconde,
remarquer ce qui arrive quand Je clique assez vite.
Et cette connexion à Harvard est si vite que vous ne remarquerez pas vraiment il.
Mais qu'est-ce que vous sorte de sorte de voir si je cliquer et faire glisser très vite?
Ceux d'entre vous regarder en ligne, si vous ralentissez à la vitesse de cette 0.5x,
vous pouvez voir ce mieux.
>> Qu'est-ce qui se passait juste avant que je cliqués et déplacés?
Permettez-moi d'essayer ici-- laissez-moi faire autre chose, comme 90210.
Allons plus loin.
Cela a été très rapide, trop.
Que diriez-vous Disney World?
Nous y voilà.
D'ACCORD.
Qu'avez-vous vu pour une fraction de seconde?
Juste, comme, carrés, non?
Les espaces réservés pour les carreaux?
>> Eh bien, ce qui se passe ici?
Google Maps est un bel exemple de cette technologie qui est appelée AJAX.
Et cela est l'endroit où nous allons commencer à utiliser le code JavaScript dans un particulier
manière séduisante.
Retour dans la journée, il y avait ce site Web appelé MapQuest.
Et je l'aurais pris un capture d'écran de ce billet depuis les années 1990,
où si vous vouliez voir ici sur la carte,
vous littéralement cliquez sur une flèche au sommet que vous a montré
une place différente de la carte.
Si vous vouliez aller à gauche, vous cliqué une flèche qui vous a montré
une place différente de la carte.
Et certains sites le font encore aujourd'hui.
Mais même MapQuest a obtenu mieux, comme Google Maps.
>> Au lieu de cela, ce qui est mieux ces jours est sites Web qui utilisent AJAX.
Autrement connu comme AJAX-- Asynchronous JavaScript and XML,
qui est juste une façon élégante de dire une technologie ou une technique qui
permet à un navigateur en utilisant JavaScript de faire des requêtes HTTP supplémentaires
après que la page a été chargée.
Qu'est-ce que cela signifie?
Eh bien, ce serait un peu de gênant dans Gmail
si chaque fois que vous vouliez de vérifier votre courrier,
vous aviez littéralement faire Control-R ou Commande-R ou cliquez sur le bouton Recharger
et la page darn ensemble serait recharger.
Droit?
Il serait clignoter en blanc probablement pour la deuxième.
Vous souhaitez voir la barre de progression stupide.
Et juste pour voir si vous avez de nouveaux courrier, la page Web entière et l'URL
vous êtes au aurait pour recharger.
>> Mais cela ne ce qui se passe dans Gmail.
Droit?
Lorsque vous recevez un nouveau mail dans Gmail, ce qui se passe sur l'écran?
Il montre juste en haut, à droite?
Il apparaît comme par magie comme une nouvelle ligne dans le tableau.
Cela implique en fait une quantité décente de complexité.
En fait, si vous pensez à cet arbre, qui, même si est simple ici,
Gmail-- et je voudrais avoir à regarder le code d'être sure--
a probablement un tableau HTML ou peut-être une liste non ordonnée qu'elle rend
chacun de votre boîte de réception e-mails comme.
>> Et donc si vous imaginez cela, il est un arbre en mémoire lorsque vous êtes
l'utilisation de Gmail qui ressemble sorte de sorte de comme ça, quand Google réalise, ooh,
vous avez un nouvel email, il n'a pas voulons reconstruire l'arbre tout entier.
Au contraire, il veut trouver le nœud l'arbre qui représente votre boîte de réception
et il suffit d'insérer un nouveau nœud.
>> Donc, très similaire à PSEt cinq, où vous eu pour insérer des noeuds dans une table de hachage,
fait similaire Google, via Code JavaScript qu'il a écrit,
Traverse cet arbre, comprendre où est que la boîte de réception partie de la fenêtre,
puis insérer une nouvelle ligne.
Et une nouvelle ligne signifie simplement un ou plusieurs nouveaux noeuds dans un arbre.
>> Et donc AJAX est cette technique qui permet exactement cela.
Une fois que vous avez visité une URL, Toutefois folle de temps il est,
et une fois que la page a été chargé, vous pouvez toujours
saisir plus de données à partir de la internet-- que ce soit
un courriel ou une tuile d'un map-- saisir les coulisses
et puis l'insérer dans la page de sorte que l'homme n'a pas vraiment
avoir à attendre pour cela.
>> Facebook Messenger fonctionne de la même façon.
Tout nombre d'autres websites-- Oh, en fait, même cette.
Je veux dire, cela est, franchement, sorte de un ennuyeux disposent ces jours.
Si je me mets à la recherche de cette cats-- est une sorte de une expérience utilisateur horrible.
Il vient de commence la recherche pour moi.
Eh bien ce que fait-il?
L'URL n'a pas vraiment changé depuis que je frappe.
Mais ce qui se passe à travers le wire-- OK, hmm intéressant.
Qu'est-ce qui se passe à travers le fil ici obtient juste bizarre.
>> D'ACCORD.
Alors laissez-moi aller de l'avant et d'inspecter élément et allez dans l'onglet Réseau
et essayer de faire ce technique et moins sur les chats.
Comme je tape, littéralement, chats et-- ce qui se passe
per-- Je ne vais pas à cliquer sur ce.
Bien.
Donc, ici-bas, ce qui se passe tous les fois que je tape un caractère, apparemment?
Comme, le faible niveau?
Qu'est-ce qui se passe avec chacun de ces caractères Je tape à mon clavier?
Ouais?
AUDIENCE: [inaudible].
>> DAVID MALAN: Exactement.
Chacun de ces caractères est aller sur Google, un à la fois.
Ils construisent une chaîne sur leur serveur qui représente
tout ce que je l'ai tapé jusqu'ici.
Et chaque fois que je tape un autre personnage, ils
utiliser leur sauce secrète d'un algorithme de recherche et de comprendre,
veut-il dire cette page de chat ou cette page de chat ou similaire?
Donc, dans un certain sens, il me donne un meilleure expérience dans ce que je fais même pas
besoin de compléter ma pensée.
Et en effet, il est un outil utile chose, saisie semi-automatique en général.
Si leurs algorithmes sont assez bon et si mes recherches sont assez évident,
Je ne dois pas taper le mot en entier.
Ils vont me dire ce qu'il est que je suis effectivement cherchais.
Donc, ce que Google appelle instantanée la recherche est juste en utilisant AJAX,
en utilisant un code qui leur permet de demander contenu supplémentaire via un navigateur Web
derrière les scènes à l'aide de cette nouvelle langue, JavaScript.
Donc, nous avons un couple de minutes.
Et laissez-moi appeler mon copain Colton place sur la scène,
car il semblait particulièrement amusant dernière fois
d'introduire une technologie que certains d'entre vous
ont exprimé un intérêt dans des projets finaux.
Nous avons pensé qu'il serait amusant de faire un bénévole, même si, aujourd'hui,
vous montrer un ajout à ce qui permet vous-- ouais,
Je vis cette première main.
Monte.
Très bien fait.
Bon travail.
Je vais projeter cela sur l'écran dans un instant.
Quel est votre nom pour tout le monde?
>> EPT: Je suis l'EPT.
>> DAVID MALAN: Etha?
>> EPT: EPT.
>> DAVID MALAN: l'EPT?
>> EPT: Ouais.
>> DAVID MALAN: Ravi de vous voir.
Bien.
Permettez-moi d'obtenir ce prêt.
Venez sur plus de la milieu avec Colton ici.
Qu'est-ce que Colton a dans ses mains aujourd'hui est une télécommande.
Alors plutôt que de rester là dans un monde tridimensionnel en regardant autour
que Colton a fait, maintenant EFA peut effectivement se promener en remontant,
bas, à gauche, et à droite comme un Contrôleur de Nintendo ou Xbox.
EPT: je vais tomber de la scène.
DAVID MALAN: Je vais tenir à peu près ici.
Mais cela est un risque.
D'ACCORD.
Donc, aller de l'avant et de mettre ceux sur.
Laissez-moi aller de l'avant et passer à l'écran ici.
Permettez-moi de baisser les lumières.
Et Colton, permettez-moi se tenir à côté de vous.
>> Voulez-vous expliquer ici avec le micro ce que nous faisons?
Et voilà.
>> COLTON: Bien sûr.
Donc maintenant nous sommes le chargement de l'Oculus,
Je suppose operating-- ne fonctionne pas système, mais le programme principal, où
vous pouvez accéder à tous les jeux et applications qui sont dans votre bibliothèque.
Donc maintenant, il devrait dire appuyez sur le pavé tactile pour commencer.
Touchpad va être sur le côté droit du casque.
Alors allez-y et tap--
EPT: Oh, l'homme.
DAVID MALAN: Ouais, là vous allez.
La qualité est de voir Efa est bien meilleure qualité.
Ceci est juste le Wi-Fi ici.
COLTON: Donc, ce que vous êtes allez vouloir faire
est de regarder vers le haut droit de l'écran.
Yep, ce jeu sur la droite tout en haut.
Et puis, lorsque vous sélectionnez il, appuyez de nouveau sur le pavé tactile.
Je pense que ses Dreadhalls.
Et puis ici est A-- ici, laissez- me tenir vos lunettes pour vous.
>> Je viens donc lui ai donné un contrôleur.
Alors maintenant, il peut contrôler le jeu.
Il peut se déplacer et des trucs comme ça.
Alors allez-y et regardez vers le haut.
Vous devriez voir un nouveau jeu.
Alors allez-y et vous pouvez le faire.
Maintenant, vous devriez être en mesure de contrôler vous avec le contrôleur,
ainsi, dès que le jeu se charge ici.
Cela pourrait être un peu effrayant.
>> EPT: Maintenant, vous me dites.
D'ACCORD.
>> COLTON: Très bien.
Donc, vérifiez que vous pouvez déplacer.
D'ACCORD.
Vous pouvez vous déplacer.
Parfait.
Donc, si vous regardez en bas, vous avez une carte.
Carte vous indique où vous êtes.
Vous pouvez regarder autour de la salle.
Vous pouvez tourner complètement autour.
Oui exactement.
Faire demi-tour.
>> Alors regardez à votre gauche.
Je pense qu'il ya quelque chose que vous pouvez ramasser sur un tonneau dans la chambre.
>> EPT: Comment puis-je obtenir la la carte de la route?
COLTON: Look up.
Il suffit de regarder vers le haut.
Bien.
Et voilà.
Maintenant, aller de l'avant et juste tourner autour.
Donc regarder plus loin sur votre gauche.
Continuez à vous déplacer à gauche.
Continuez à regarder à gauche.
Continue.
Ouais.
>> EPT: Oh, cette façon.
>> COLTON: Ouais.
Marchez vers elle avec le contrôleur.
Et voilà.
Maintenant, il devrait dire le ramasser.
Et voilà.
Ramasser.
Bien.
Maintenant, nous allons sortir de cette salle.
Allez-y et marcher jusqu'à la porte.
Donc, vous allez hold-- il est dit maintenez le bouton pour forcer l'ouverture.
Alors allez-y et maintenez le bouton.
Yep, forçant ouvrir.
Bien.
Bon travail.
Maintenant, nous sommes en sortant de la salle.
Donc, je vais laisser le reste en place à vous et voyez ce que vous découvrez.
EPT: je ne vais pas dans la chambre noire.
Oh attends.
Maintenant, je dois aller dans le couloir sombre?
OK, je vais retourner [inaudible].
COLTON: Très bien.
Certains autres éléments à ramasser.
On dirait que quelques pièces de monnaie.
Voilà un choix de verrouillage.
Donc, si vous trouvez un verrouillé porte, vous pouvez l'utiliser.
As-tu peur?
>> EPT: Pas encore.
COLTON: OK.
>> Pretend-- ouais.
Juste prétendre que vous êtes effectivement debout là.
Et si vous tournez around-- vous avez à s'y habituer.
Mais il est logique.
DAVID MALAN: Et tandis que de l'EPT reste jouer, puisque nous ne pouvions le faire toute la journée,
nous pouvons tous la pointe des pieds ici.
Mais nous avons deux autres paires, si vous voulez venir et de jouer.
Sinon, nous allons voir vous la prochaine mercredi.
Merci à notre bénévole aujourd'hui.
[Applaudissements]
>> [MUSIQUE - "Seinfeld THEME"]
ENCEINTE 1: Eh bien, je suis montage mettant une nouvelle PL sur.
Je viens de changer l'OLPF--
>> SPEAKER 2: Alors qu'est-ce faites-vous exactement?
>> ENCEINTE 1: Eh bien, chacun de these-- ici, je vais vous montrer celui-ci ici.
Vous pouvez le voir ici.
>> Intervenant 3: Je crois que je suis bon avec ceux-ci.
Vous voulez un peu plus?
>> ENCEINTE 4: Non, je suis bonne. [Inaudible].
>> Intervenant 3: Non, [inaudible].
Avoir une certaine.
ENCEINTE 1: La couleur différente.
SPEAKER 2: OK.
ENCEINTE 1: En fin de compte ce qu'il fait est qu'il ajuste la couleur de--