>> Tous droite.
Donc, JavaScript.
Presque tout le monde dans cette salle a probablement un certain degré
de confort avec elle si c'était à l'époque où dans SC50
ou il a été personnelle projets web ou même
si vous avez un peu de lui avec ce projet de base de PHP passé,
mais pour la plupart partie, beaucoup d'entre vous,
même si vous avez un peu de réconfort
peut-être avec JavaScript n'ont pas été prises
pour acquis comment le fonctionnement de la langue et ce qui se passe
le dessous de la hotte et ce que nous allons essayer
faire aujourd'hui, c'est peler une partie des couches techniques
de ce qu'est JavaScript, comment elle diffère d'une langue
comme PHP, comment peut être utilisé non seulement côté client
mais également côté serveur et alors se concentrer très précisément
sur ce cadre, ne remarquerez aucune JS qui est essentiellement un moment de l'exécution,
un programme avec lequel vous peut exécuter du code JavaScript,
côté serveur et il devient sorte de plus en plus populaire
de la même taille ce jours de doute Ruby et PHP
et Python et vous verrez
qu'il a une jolie de puissantes fonctionnalités en passant par un certain
du langage intégré constructions.
Mais d'abord, une partie de la facilité trucs juste pour vous rappeler
de la façon dont cette langue fonctionne et si vous avez du mal à voir tout
De ce fait, juste cri Départ et nous ajusterons.
Ainsi, un comme en PHP il ya aucune notion d'une fonction principale,
vous venez de commencer à écrire du code
et vous pouvez à cet effet interpréter haut en bas.
Dans le contexte d'un navigateur
ou côté serveur de quelque chose nous allons voir quelques exemples
dans un bit.
Conditions, syntaxiquement équivalent à PHP ainsi que C,
C + + et d'autres langues Donc, juste pour vous donner une idée
de la façon dont nous pourrions structurer,
il ya juste une canonique état.
Expressions booléennes, même exacte syntaxiquement que vous avez vu
dans ces mêmes autres langues, à la fois pour oring
et pour mettre fin à des choses ensemble.
JavaScript doit commutateurs, un peu comme PHP et d'autres de do
et vous n'êtes pas limité, comme C dans de primitives intégrales
comme caractères et ints peut effectivement faire d'autres types de valeurs.
Boucles. Donc, ce n'est exactement le même
et probablement une douzaine de langues, tout en boucles, font tout en boucles
et puis ce truc ici.
Donc, c'est une sorte de connu sous le nom énumération rapide
et c'est une façon très intelligente de tout comme en PHP faire
pour chaque FU bar vous pouvez même,
dans un objet JavaScript où l'objet est le nom
de la variable ici, par exemple, var i dans l'objet et à chaque itération
de cette boucle, i est va être l'un
des clés de cet objet.
Donc, si vous avez un objet pour un étudiant, et un étudiant a un ID
et un nom et d'une maison, itérative je vais prendre
de la valeur de ID et le nom et maison et vous pouvez à cet effet index
en objet comme si c'était un tableau avec crochet
notation pour obtenir la valeur de l'ID de clé ou nom
ou maison et ainsi de suite.
Et contrairement à commune hypothèse, les objets JavaScript,
propriétés ne sont pas nécessairement garanti d'être
dans le même ordre, c'est aussi fidèle à PHP afin de ne pas assumer
que les choses vont rester dans le même ordre
que vous mettez les clés les paires de valeurs dans un objet.
Comment sur les tableaux?
Il ya deux façons à écrire syntaxiquement
mais ceci est sans doute le plus commun maintenant juste en utilisant carré
notation de support.
Donc, il s'agit d'une variable à appeler des numéros contenant tableau
de six nombres entiers là-bas, voici une simple chaîne
et notez ce qui est absent à partir de ces exemples,
ce que JavaScript apparemment défaut.
Ouais. Donc, il n'ya pas de notion de dactylographie, certainement pas
Dans ce contexte, ici, mais c'est en effet une chaîne.
Donc, JavaScript doit types et c'était en effet un tableau
qui est lui-même un type et chacun des éléments
dans ce tableau étaient de type nombre comme les appelle le JavaScript.
Donc, c'est un faiblement typé langue et nous verrons
que JavaScript comme PHP a un opérateur d'identité
et d'autres mécanismes d' vérifier réellement ce type
d'une variable est à la fois pour le contrôle d'erreur
et pour d'autres applications.
Et voici un exemple d'objet contenant juste un ID et un nom.
Et maintenant, remarquons que nous sommes en utilisant la notation accolade,
l'indentation et le blanc espace est une sorte de sens
et ce déclare un variable dont le nom est Rob
et dont l'ID est 1 et la type de date est ici notre numéro
et chaîne respectivement.
Et puis ce n'est quelque chose de légèrement différent
si vous avez jamais rien fait avec l'Ajax ces jours?
Vous avez probablement utilisé un objet comme celui-ci
mais ce qui est intéressant de noter ici?
Ce qui est syntaxiquement jamais si différent, juste un couple
des choses entre cet exemple qui est certes plus petit
et cet exemple plus grande.
Donc, d'abord en simples de terme, c'est quoi?
Quel est le type de personnel diriez-vous?
OK, c'est un tableau, c'est un tableau de quoi?
Objets >>.
>> OK, c'est un tableau d'objets.
Et maintenant, se concentrer sur un seul - l'une quelconque de ces objets,
ce qui est différent entre ceci et cela?
>> Les clés sont des chaînes.
>> Oui. Ainsi, l' clés sont des chaînes,
et les touches sont en réalité cordes dans les deux cas
et c'est en quelque sorte un idiot
à mon avis, la conception historique décision à chaque fois que vous utilisez
JSON, JavaScript Object Notation,
qui est essentiellement un format de transport
pour l'envoi de données typiquement à travers le réseau
entre le client et le serveur, vous devez vous rappeler
que ce n'est pas réellement JSON valide et c'est une
de ces FYIs sauf si vous jamais taper la tête contre le mur
pendant plusieurs minutes pour rien de bon raison, il n'est pas valide JSON
car les touches sont pas effectivement cité.
JSON nécessite bêtement que les touches non seulement être cités,
mais qu'elles soient doublement cotées, guillemets simples ne suffisent pas.
Donc, stupide petite chose et plus d'un fait amusant
pour les besoins d'aujourd'hui, mais ce trop serait valable JavaScript
il n'est tout simplement pas - la inverse n'est pas vrai.
Très bien.
Donc, nous allons voir beaucoup plus de cela.
Très bien.
Donc, c'est le JavaScript syntaxiquement probablement assez
familier, aucun d'entre vous qui ont jamais utilisé avant JavaScript
ce n'est pas un énorme bond de PHP ou de n'importe quelle langue de la procédure
que vous avez peut-être utilisé.
Donc, aujourd'hui, nous allons nous concentrer sur les aspects intéressants
de JavaScript particulier dans le cadre d'aucune JS
mais pas exclusivement, car jusqu'à présent, vous avez probablement,
si vous avez utilisé Javascript, utilisé à l'intérieur d'un navigateur.
Donc, pas de JS est un environnement puis dans un peu va
pour nous permettre d'accéder JavaScript code client -
côté serveur mais d'abord, Prenons un coup d'oeil
à quelque chose qui est un peu plus côté client.
Donc, je suis allé à l'intérieur et c'est lié sur le site Web de cours,
si vous voulez jouer, il existe deux sous-répertoires
dans le Zip aujourd'hui appelé plots de source zip sur le site
et ce ne sont que quelques exemples remémorant
des choses que vous pourriez avoir vu avant et j'ai en quelque sorte d'eux construit
contre plus simple à légèrement plus compliqué à taquiner
quelques-unes des caractéristiques JavaScript.
Donc, nous allons aller de l'avant et prendre un regard, par exemple, à ce.
Donc, malheureusement, la balise de clignotement était tué il ya plusieurs années
que la façon dont ont obtenu plus en plus beau
et la balise de clignotement était littéralement parenthèse ouverte clignote près support
et il sorte de pas plus avec nous.
Mais, nous pouvons encore ressusciter cette idée d'une étiquette par tout genre
de penser logiquement, comment allez-vous
de faire quelque chose comme ce clignote intuitivement?
En supposant que vous en savez un peu peu de JavaScript et CSS ou
à ce stade, il est OK, si vous ne le faites pas.
>> Définir un temps et cacher il puis après je vais marquer ce
sortir et le montrer encore.
>> Oui, parfait.
Ce genre de programme est 101,
comment voulez-vous obtenir un effet visuel comme ça?
Eh bien, vous en quelque sorte doivent montrer quelque chose
puis cacher quelque chose, spectacle quelque chose, quelque chose de cacher
et comme Jonathan propose en utilisant une sorte de temps,
une sorte de calendrier que vous pouvez faire cela à plusieurs reprises sans avoir besoin
à utiliser une boucle ou quelque chose comme ça.
Alors, laissez-moi aller dans un clin-0.html
et permettez-moi de recule la police un peu
de sorte que plus de cela s'inscrit.
Et nous allons jeter un coup d'oeil à ce qui se passe ici.
Ainsi, tout d'abord, remarquer que le corps
de cette page est super simple, à l'intérieur du corps
de la page est simplement un div.
J'ai donné arbitrairement un ID de voeux
et qui pourrait être n'importe quoi tant qu'il est unique
et puis je n'ai que quelques-uns texte simple, bonjour monde.
Donc, si je fais défiler maintenant, remarquer un peu de style moelleux.
Alors, je dis, forte salutation, qui comme vous le savez
CSS signifie simplement unique identifier l'élément
avec une idée de salutation,
taille de la police va arbitrairement être présent, la marge et le texte align.
Donc, sans intérêt détails esthétiques
pour centrer à peu près le texte.
Ainsi, la partie intéressante est dans le script tag ici
dont je suis mis à l'intérieur de la tête de la page.
Donc, We'Ll - vous pouvez faire ce dans n'importe quel nombre de façons
et nous verrons un peu itérations de ce même programme
mais nous allons commencer par le haut.
Donc, j'ai déclaré une fonction appelée clin
et apparemment, il utilise cette intégré dans la méthode DOM appelé
GetElementById qui est peut-être l'une des méthodes les plus puissants
que vous sortez de la boîte avec JavaScript pour la recherche
"Voeux" n'a pas à être guillemets comme c'était
dans HTML est soit est bien aussi longtemps
que vous êtes stylistiquement cohérente ces jours j'ose dire
beaucoup de gens utilisent Java, guillemets simples en JavaScript,
guillemets au format HTML, mais il n'a pas vraiment d'importance
aussi longtemps que vous êtes cohérent.
Donc, ici, si vous n'êtes pas familier, vous pouvez réellement accéder
avec JavaScript CSS propriétés sur les éléments.
Ainsi, remarque que j'ai déclaré une variable appelée div
et stocké à l'intérieur de cette variable,
une référence à quelque cet élément DOM est.
Donc, si vous repensez à CS50 ou une catégorie dans laquelle vous pensiez
sur les structures d'arbres et DOM, Document Object Model,
c'est juste une référence à un noeud dans un arbre,
que représente cette page
et si div.style.visibility bien égal, égaux, égaux,
caché, alors je viens veulent une bascule il
Jonathan a proposé sinon je veux
pour passer au-dessus de caché.
Or, comme dans l'autre, pour laquelle le triple égal il?
Ou qu'est-ce que par rapport à doubles égaux?
>> Équivalent strict.
Désolé >>.
>> Équivalent strict.
Donc, ce sont les opérateurs d'identité
où par vous vérifiez pas seule la valeur de la variable
que, un sens égal égal mais aussi du type de celui-ci.
Donc, même si nous n'avons pas spécifiés jusqu'ici toutes les données
types pour toutes les variables dans ce ou l'un des coulisseaux,
il existe un type associé avec cette chaîne cachée
avec cette valeur, caché et c'est de chaîne de cours.
Donc, dans ce cas, il n'a pas vraiment d'importance
car il n'ya aucun moyen que nous allons confondre une chaîne
de «caché» avec une autre valeur
mais c'est souvent une bonne habitude je dirais pour obtenir
en utilisant le, à l'égalité,
signe égal est généralement une bonne chose.
Il fera votre code plus robuste à la fois en PHP mais
et en JavaScript parce que vous avez
en cas de temps en temps d'angle où la valeur peut être égale à zéro
que vous vérifiez pour et zéro peut se confondre avec le faux
ou ne pouvait être et comme en PHP,
Javascript trop avoir de multiples valeurs faussement où par zéro
et faux et null et undefined peut tout résoudre implicitement
à faux.
Mais si vous êtes vraiment vouloir pour vérifier une valeur particulière
comme zéro, le nombre, ou faux booléen alors vous avez
d'utiliser cet opérateur d'identité.
Ainsi, il peut arriver à obtenir en tout cas, même si ici,
c'est une sorte de sens parce que nous savons que nous vérifions
pour une valeur de chaîne et c'est ne va pas être quelque chose d'autre.
Donc, voici la magie alors, si je faites défiler jusqu'à cette ligne ici,
apparemment, construite dans l'objet fenêtre
et c'est une caractéristique de l' un navigateur, vous pouvez accéder
pour ce super mondial objet appelé fenêtre,
à l'intérieur de soit certaines fonctionnalités,
si morceau de qui est réglé intervalle
et il faut apparemment quels types d'arguments?
Ouais.
>> Fonction appel et un temps.
Bon >>. Ainsi, une fonction appeler et un temps
et donc en particulier une la référence à une fonction,
un pointeur vers une fonction dans un sens
et c'est la fonction qui va
se exécutés chaque numéro de millisecondes et dans ce cas,
c'est toutes les 500 millisecondes.
Donc, c'est une façon d'induire et efficacement boucle infinie
sans utiliser itération mais au lieu dit le JavaScript
le moteur à l'intérieur du navigateur
pour ce faire tous les 500 millisecondes ou est proche
à 500 millisecondes comme il peut,
il s'avère que sous le capot,
il ya ce qu'on appelle un événement boucle et nous reviendrons à ce
dans le contexte de noeud JS qui vient constamment genre
de rester là, la filature, attente pour le travail à faire
et dès qu'il réalise,
500 millisecondes se sont écoulées clin sera appelée à nouveau
et encore et encore est aux côtés d'une autre œuvre
qui doit se faire.
Alors, que pouvons-nous améliorer ici?
Eh bien, permettez-moi d'ouvrir jusqu'à blink-1.html
et démontrer un clin-1.html
esthétiquement parfaitement identiques.
Alors, que pourrions-nous améliorer ici?
Eh bien, vous remarquerez qu'il était un peu inutile
à définir une fonction appelée Blink car combien d'
dans combien d'endroits ai-je appeler la fonction blink?
>> Juste une fois.
>> Donc, un.
Donc, ce n'était pas mal, en fait, il est probablement assez
simple.
J'ai défini une fonction clignotement, je appeler une fonction clignotement par
de ce paramètre, mais techniquement,
il n'y avait pas une raison pour et un paradigme commun
en JavaScript est en fait de faire usage de fonctions lambda
vous vous souviendrez de 51 ou fonctions anonymes
où si vous n'avez pas besoin un nom d'une fonction,
si vous ne l'appelant certainement dans un seul endroit,
pourquoi s'embêter encombrer votre code, encombrer l'esprit des programmeurs
et votre espace de nom vraiment avec des symboles
que vous n'avez pas vraiment besoin de se soucier.
Et donc, dans cette version ici,
remarque que je vous appelle window.setInterval directement
au sommet de ma balise script puis je suis de passage
dans une fonction anonyme qui ne prend aucun argument
et c'est tout à fait amende et puis le corps
de cette fonction, il apparaît est identique à ce qu'elle était avant
et la seule syntaxique différence est maintenant
ici-bas à côté de la 500.
Je ferme le corps de la fonction
et puis je dis exécuter ce code précédent,
toutes les 500 millisecondes.
Changement donc, très marginal
mais une étape vers ce qui est probablement un plus élégant
la mise en œuvre de cette.
Alors, prenons celui-ci plus loin si je vais maintenant
en un clin deux, vous aurez Voir une bibliothèque commune,
dont l'effet va
pour être totalement sans conséquence esthétiquement, mais si nous allons
en version à deux ici, un avis que dans le haut de ma tête,
J'ai inclus la dernière version de JQuery.
Et puis, ici, J'ai nettoyé
le Code un peu, il est ne va pas être un monde de plaisir
de continuer à utiliser fonctions DOM indigènes
et une sorte de brute JavaScript.
En fait, comme vous pouvez JQuery savoir est devenu si populaire
que la plupart des gens conflit avec JavaScript jQuery
mais vraiment juste un souper bibliothèque écrite utile
par un homme du nom de John Démission et depuis d'autres
qui ont fait qu'un beaucoup de choses fastidieuses
en JavaScript plus facile et plus succinct.
Donc, dans ce cas ici ce qui se passe?
Donc, j'ai cette apparence de un signe de dollar, plus que
dans un instant, puis il s'agit d'un sélecteur CSS.
Donc, c'est très semblable à esprit de ce que je faisais avant,
mais cette fois, je suis littéralement en utilisant la balise de hachage
pour indiquer un cadre unique identificateur appelé voeux
et puis apparemment . Css est une méthode intégrée
pour tout objet c'est que je viens de créer
et je vérifie la valeur de la clé de visibilité.
Et si la valeur de cette clé égaux, égaux, égaux, caché,
alors je vais l'activer et Je vais passer cette fois-ci
en utilisant le même procédé qui est apparemment surchargé
dans le sens où il possède deux signatures différentes,
une avec un argument et une avec deux arguments,
dont la seconde est le passeur,
le premier de ce qui est un getter pour ainsi dire.
Et si curieux et si vous voulez jamais regardé ce,
si nous allons à jquery.css espérons le hit top est en effet ce
et vous pouvez voir un plus explication formelle
que nous utilisons tout cela, . Css avec le nom de la propriété
puis le setter est dot CSS
avec un nom de propriété et une valeur.
Donc, légèrement plus propre, mais remarquer le genre de modèle ici
à chaque itération de ce code,
nous sorte de la rendre plus en plus serré et plus serré
et il disent de meilleures conceptions
puisque nous utilisons une personne de autre code qui est éliminé
une partie de la complexité.
Donc, maintenant nous allons faire ce encore plus simple.
Et en fait, si je retire tous les guillemets, vous voyez juste tous les
un commentaire, vous verrez comment simple, cela a eu.
La seule différence ici est bien sûr
que je suis en utilisant une bascule méthode qui vient également construit
pour jQuery et ce n'est que
parce que quelqu'un d'autre a écrit le code
qui permet de basculer effectivement le paramètre de visibilité
de tout élément DOM que vous envoyez.
Donc, de mieux en mieux.
Et oui, c'est un modèle,
même s'il s'agit d'un souper exemple simple et tri
de l'effet net stupide qui est un morceau de clignotement de texte,
c'est ce genre de pensée processus que vous devriez penser -
penser à pas nécessairement la première
écrit quelque chose de passif pour le prochain projet
mais certainement que vous parcourez avec votre conseiller ou avec moi
et vos réunions d'équipe ou vous juste revoir votre code coéquipiers
de resserrer les choses, non?
Après tout, ils sont moins -
un moins de lignes de code vous avez finalement
en théorie moins vous bogues sont susceptibles d'être invité
parce qu'il n'y a tout simplement moins de code à gâcher avec.
Très bien.
Ainsi, un couple de plats à emporter.
Les fonctions lambda, fonctions anonymes,
dont beaucoup vous ont vu
et puis aussi juste de serrage les choses avec une bibliothèque
comme jQuery dans ce cas particulier.
Très bien.
Vous avez des questions?
Faisons un autre client aspect de côté ici,
sous forme de zéro, nous avons cet effet net.
Forme super simple et apparemment si j'essaie de cliquer inscrivez-vous ici,
d'abord il me dit que vous êtes enregistré, bien, pas vraiment.
Eh bien, pourquoi est-ce?
Eh bien, voici forme-0.html très peu de code,
pas le JavaScript soit et c'est complètement une sorte de faux
de forme parce que l'action valeur est registered.html
ce qui signifie que peu importe ce que Je tape dans ce formulaire,
où est ce que ça va être envoyé sur le serveur?
Ouais. Donc, pour registered.html qui est clairement un fichier HTML
qui est donc statique fichier qui n'a pas les moyens
de prendre l'entrée d'utilisateur en supposant il n'ya pas de code JavaScript
noyé dans la masse c'est la recherche dans l'URL
donc c'est complètement un NOOP et que rien ne va se passer
avec les données présentées, mais vous pouvez voir la structure
d'une forme de HTML5 assez simple
qui a un peu de mot de passe, un petit nombre de types d'entrée.
Donc, nous allons effectivement maintenant ajouter la vérification d'erreur
et de voir comment nous pourrions améliorer cette situation.
Donc, ici, est une sorte de pauvre la manière de mettre en œuvre ce de l'homme
et c'est une sorte de méchant morceau de code.
Le rouleau de sorte, d'abord laisser vers le bas
pour voir ce qui est le même et ce qui est différent.
La seule chose différente maintenant entre cette
et la version précédente est que je vous ai donné la forme et ID
d '"enregistrement" pourrait avoir été ce que je veux
mais sa destinée à être unique identifiables même que ce n'est pas
strictement nécessaire parce que si un Cette page a seulement une forme certes, je
pourrait trouver avec l'un des les méthodes de sélection de jQuery.
Mais de cette façon est tout simplement plus déterministe.
Donc, si je monte maintenant à mon script tag, notez ce qui suit,
égaux de window.onload une fonction anonyme.
Donc, ce qui est ce fait?
Ainsi, vous pouvez rappeler que dans programmation côté client -
JavaScript pages HTML plutôt ont différents événements associés
avec des éléments, en cliquant et la présentation et la mise au point
et le flou et d'autres tels événements qui pourraient se produire
en tant qu'utilisateur typiquement interagit avec la page,
window.onload fait ce qu'il dit.
Sur l'ensemble du chargement de Windows
donc une fois que toutes les images ont été téléchargé une fois tous les fichiers ont
été téléchargé et une fois la page a été chargée,
faire le code suivant, et remarquer si je passe au fond
de cette méthode, vous remarquerez que il n'y a pas entre parenthèses
après l'accolade c'est-à-dire
que je ne suis pas l'exécution cette fonction ici maintenant,
le navigateur va exécuter pour moi quand il a déterminé
que la page est chargée.
Donc, nous allons voir ce que nous avons fait,
document.getElementById inscription
ce qui me donne juste une référence au nœud
dans l'arbre qui est de a un ID d'enregistrement.
Et maintenant, je vais enregistrer un autre gestionnaire d'événements
en faisant form.onsubmit obtient cette fonction anonyme
ce qui signifie que ce qui suit code doit exécuter chaque fois
que le formulaire est soumis.
Maintenant, la plupart de ceci est juste sorte de logique ennuyeux.
Donc, si la valeur de l' champ email dans le formulaire est
«Rien», alors vous devez fournir votre adresse e-mail,
vous criez à l'utilisateur une alerter puis retourner false.
Et puis j'ai un tas d'autres contrôles,
les contrôles pour le mot de passe,
les vérifie si le les mots de passe sont les mêmes,
les vérifie si l'accord case est cochée ou non
et je viens de crier à l'utilisateur le cas échéant
de ces tests fait échouer.
Et donc, voici un exemple encore si c'est un peu artificiel
ici le fait que j'utilise égaux, égaux, égaux,
signifie que l'utilisateur ne peut pas essayer de me tromper
en tapant dans quelle valeur.
Ou plutôt, je suis vraiment vérification de la présence
de la chaîne vide, l'utilisateur n'a pas encore tapé quoi que ce soit.
Si l'utilisateur a tapé dans littéralement zéro,
"Zéro" potentiellement pourrait être confondre avec la chaîne vide.
Et je dis que c'est un peu de sens ici
parce que, évidemment, même zéro n'est pas une adresse e-mail.
Mais si c'était un plus domaine générique comme un champ de texte
ou un nom ou une description ou quelque chose que vous voulez la valeur pour
et ce n'est pas nécessairement avoir syntaxiquement
d'être une adresse e-mail, l'utilisateur pourrait taper quelque chose comme zéro
et de nouveau coin affaire, mais c'est pourquoi la vérification généralement types est
une chose utile.
Vous êtes vraiment la vérification des l'utilisateur n'ayant rien tapé
dans ce domaine.
Donc, ce qui se passe si aucun de ces tests échouent, bien,
retour vrai à l'intérieur d'un gestionnaire d'événements
comme onsubmit signifie simplement let le comportement d'origine fait
propager et donc l' forme obtiendra soumis.
Et c'est pourquoi quand j'ai finalement cliqué présenter avant que je sois
par le biais de register.html et si je fais cela maintenant, avis,
Je suis engueulé si je ne le fais pas fournir une adresse e-mail
et je peux taper dans malan@harvard.edu,
cramoisi [transcription phonétique], cramoisi, cochant cette case,
et maintenant vous inscrire et il me dit, encore une fois,
vous êtes inscrit ou pas vraiment.
Très bien.
Donc, nous allons nettoyer ce juste un peu, puis transition
à la nouvelle récent trucs côté serveur.
Donc, si je vais dans la forme-2.html, remarquer quelques choses.
Alors, un, j'ai apporté jQuery dans le mixage
donc il est encore ce signe de dollar
et maintenant je suis en utilisant certaines méthodes jQuery.
Donc, d'abord, quel est-il le signe du dollar qui est
si spécial ici?
Quel est le signe de dollar lacé dans la plupart de code jQuery?
Ouais.
[Inaudible Remarque]
OK. Ainsi, la fonction de signe dollar passe par le DOM recherche
pour quelque chose avec cette notamment sélecteur CSS.
Alors, c'est vrai, mais presque trop précise.
C'est ce qui se passe lorsque vous passez d'une chaîne
comme dans ce cas, mais vous n'avez pas toujours avoir à passer d'une chaîne.
En fait, plus loin, dans la très première ligne ici est que ce n'est pas un
sélecteur CSS, je suis de passage dans une fonction de lambda.
Donc, plus généralement - donc, bonne réponse, mais trop précis.
Plus généralement, ce qui est signe dollar représente?
>> Juste jQuery.
>> Oui. Donc, juste jQuery ou c'est juste une fonction
que certains gars il ya ans écrit et d'autres personnes ont
depuis amélioré qui littéralement par défaut est appelé -
oops, est appelé jQuery.
Il vient - il s'avère à la différence de beaucoup
des langues des signes de dollar est une symbole parfaitement valable d'utiliser
dans le nom de variable que
en PHP signe dollar a évidemment une signification particulière
mais en JavaScript comme dans certaines langues, signe de dollar
et de souligner et d'autres comme caractères spéciaux totalement légitime
à utiliser dans votre propre symbole noms de variables.
Donc, quelqu'un a tout simplement décidé que, vous savez quoi?
Ça va être assez fastidieux
pour rendre le monde entier tapez jQuery tout le temps,
permettez-moi de sorte de plante un piquet dans le sol et dire,
«Cette bibliothèque sera utiliser le signe dollar. "
Et en fait, ce ne soulève le risque
que quelqu'un d'autre présomptueusement va utiliser le signe dollar
pour sa bibliothèque, mais il ya des façons de sorte de Assurance
que lorsque vous utilisez le dollar signer des cartes de jQuery
parce que vous pouvez tester si il a déjà été attribué
à autre chose essentiellement.
Très bien.
Donc, c'est tout ce qui est, il n'y a pas de magie.
C'est juste un sexy recherche morceau de syntaxe qui est agréable
et rapide et facile à saisir.
Donc, ce qui se passe lorsque vous tapez signe dollar paren ouvertes
puis une fonction anonyme.
Eh bien, s'avère que ce n'est notation effectivement raccourci
pour le document point parenthèse ouverte prêt.
Donc, comme Cynthia remarqué plus tôt nous avons déjà trouvé un
cas de coin.
Si vous venez de passer en la fonction de lambda,
l'effet du dollar signe est un peu différent.
En fait, qu'est-ce qui se passe réellement c'est que c'est équivalent à cela,
transmettant une référence à l'objet global de documents
c'est mondial comme l'objet de la fenêtre est
Cela vous donne une fonctionnalité spéciale
qui affecte toute la page ou un navigateur et il s'avère
que le document lorsque vous l'envelopper avec jQuery,
jQuery réalise essentiellement, oh, c'est une référence
à cet objet de document spécial,
Permettez-moi maintenant enregistrer une gestionnaire d'événement appelé prêt
ce qui n'est pas natif JavaScript ou DOM liés.
Ready est un jQuery chose qui dit
lorsque la page est chargée tous les éléments HTML
mais pas nécessairement chargé, tous les CSS et images
et les fichiers JavaScript et clignoter fichiers et les goûts.
Donc, c'est une étape avant la charge alors aller de l'avant
et exécuter ce qui suit.
Et la hausse de l'aide sur prêts moyen est que vous pouvez, vous le savez,
que tous les éléments dans votre DOM,
tous les identifier de manière unique choses avec ID, ils existent encore
si la page, son contenu sont toujours en chargement et le chargement
et vous avez une certaine icônes brisées pour un moment
ou une page blanche en arrière-plan.
Ouais.
>> Que se passerait- si [inaudible]?
>> Parfait exemple, une question parfait.
Donc, nous allons voir si nous pouvons simuler ce droit maintenant.
Alors, laissez-moi aller de l'avant et supprimer ces deux lignes ici et puis
sans se soucier de fixer le indentation, laissez-moi aller de l'avant
et supprimer ce ici - oops, celui-ci ici.
Et maintenant, permettez-moi de passer à la Cette page, aller à la forme-2.html et le type
Inscrivez-vous, rien ne semblait arriver, disons, pourquoi est que,
allons-y et ouvrez jusqu'à l'inspecteur de Chrome,
ouvrir la console juste pour voir si quelque chose se passe ici, maintenant,
inscrivez-vous, toujours rien.
Ainsi, le code est syntaxiquement amende
donc je ne vois pas tout messages d'erreur rouge,
mais ce bien est pas le cas?
Aucun de mon code est bon, ça ne marche pas si aucun
de mes codes semble être d'exécution, alors pourquoi est-ce?
Eh bien, le JavaScript et les navigateurs plus généralement exécuter l'
contenu d'une page web, haut en bas, de gauche à droite.
Et le problème est que parce que le sommet
de cette page a HTML tête alors alors le script puis un autre script,
cela va se exécuté avant ce qui est même prêt,
ou même existe dans l'arbre la représentation de la page.
La forme elle-même, pas même la corps existe à ce point.
Donc, jQuery est assez intelligent avec son contrôle d'erreur
que, s'il n'y a pas d'élément d' l'identifiant unique de l'enregistrement,
il ne va pas renflouer sur vous
et juste déclencher une certaine console erreur et de briser toute la page,
il va ignorer en silence vous, mais la raison pour laquelle aucun
de ce code est jamais exécute
parce que quand vous avez Enregistré le soumettre gestionnaire,
il n'y avait pas d'élément à associer.
Donc, c'est une sorte de pas op il.
Donc, en précisant la place, attendre jusqu'à l'âge a été chargé
si nous avons fait le window.onload chose qui est en quelque sorte
de l'ancienne école de faire ou la façon dont jQuery sexy
comme ça, nous pouvons dit-il attendu jusqu'à ce que tous
de ces balises HTML ont été analysée de sorte que même
si les images ne sont pas chargées, à moins que le noeud est dans l'arbre,
alors JQuery peut être assurer que tout y est.
Ouais.
[Inaudible Remarque]
Oui, bon, oui absolument.
Ainsi, l'autre solution à cela, si vous n'avez pas utilisé ce
ou ne se souvient pas ce qui existait,
vous pourriez absolument déplacer tout cela à la partie inférieure
de la page Web, à l'intérieur de l' corps encore mais en dessous de la forme
et qui serait également résoudre ce problème.
C'est juste généralement considéré comme une mauvaise pratique.
C'est un peu désordonné et bâclée spécialement
si vous continuez à bloquer tout au bas de la page,
surtout quand je vais garder des choses simples en mettant tout
de mon code à l'intérieur de la page HTML
quand vous pouvez bien sûr certainement prendre l'habitude
de l'affacturage hors dans un fichier séparé
à quel point il est juste agréable
de centraliser la fichiers dans la tête.
Sauf qu'il est un prix que vous payez
en mettant JavaScript autres actifs tels que les fichiers CSS
dans la tête de la page, ce qui est un risque que vous courez?
>> Plus lent chargement de la page.
>> Plus lent chargement de la page, pourquoi?
>> Parce que nous essayons pour charger toutes les bibliothèques
avant [inaudible].
>> Exactement parce que les navigateurs lire le début de code en bas,
de gauche à droite si Google analyse sont lents
ou jQuery CDN est lent ou de l'API Facebook est lent
et que ce fichier se bloque juste potentiellement en fonction
sur la façon dont vous avez chargé ce fichier, le page entière pourrait sembler se bloquer.
Et si vous voyez ce beaucoup franchement
sur les sites Web qu'ils ont beaucoup annonces de faible qualité
sur eux, nous ne sommes qu'un lent ou site accidenté pourrait accrocher une page
pour une durée indéterminée nombre de secondes
jusqu'à ce que finalement le navigateur espérons fois sur ce
et vous montre alors le reste de la page.
Donc, si vous avez déjà utilisé comme le Facebook, comme le bouton,
dans votre page Web, permettez-moi voir si je peux trouver ce
sans avoir à vous connecter ici.
Donc, si vous allez à la Bouton comme Facebook
et cliquez sur un code de get, bon sang,
permet de voir si nous pouvons trouver l'exemple,
sûrement quelqu'un avait posté ce.
[Pause]
Je vais vous donner dans quelques-uns secondes si nous ne voyons pas.
Facebook asynch - OK.
Donc, c'est le code et sauf ils ont changé récemment
que Facebook fait vous recommande d'utiliser
pour charger la bibliothèque et effectivement proposer
que vous mettez dans ce le corps de votre page.
Ainsi, Facebook vous conseille créer une sorte de stupide DIV
qui vient d'ID unique comme ce, alors encore une balise script
et tout cela complexité fait essentiellement la suivante
et ils n'utilisent pas de JQuery parce qu'ils ne veulent pas
d'assumer toute autre dépendances,
Passons ce sur un peu.
Ainsi, vous remarquerez qu'ils ont un fonction anonyme ici,
plus de détails dans un instant,
qu'ils utilisent ensuite document.createElement,
ils créent un élément DOM, c'est comme malloc pour ainsi dire
où la balise est de type script, il est alors en spécifiant
que l'attribut async de cette étiquette qui se passe
pour être vrai, alors vous allez de l'avant et comprendre ce que l'URL
de Facebook JavaScript devrait être
et ce n'est que le moyen de fantaisie
de contrôle devrait ce soit HGP ou HDPS.
Et puis finalement, vous remarquez ce que Facebook fait,
ils obtiennent le nœud DOM a un ID de Facebook racine
qui est ce qu'ils ont dit vous mettez dans la page
et puis ils joignent l'enfant si l'effet de tout cela est
à injecter sorte de dynamique une nouvelle balise de script dans votre page
comme un enfant de la DIV que vous il inséré de sorte que le reste
de la page se charge heureusement
et alors ce code fait est chargé de manière asynchrone.
Donc, pour l'essentiel après l' fait et je remettais mention
de la fonction anonyme,
ce qui est génial ce se référant à la syntaxe ici
quand je n'ai pas la seule fonction ouvrir paren, paren proches
et puis des accolades, pourquoi les paren ouverts ici
puis la fin ouverte, à proximité Paren là, qu'est ce que c'est fait?
>> [Inaudible] définissant et puis en exécutant?
>> Exactement, c'est la définition d'une fonction qui est anonyme
mais simplement définir une fonction,
bien sûr ne pas exécuter fonction jusqu'à ce que vous appelez
par nom, mais bien sûr, ce est une fonction anonyme
de sorte que vous ne pouvez pas appeler par nom, mais vous pouvez
en JavaScript exécuter une fonction anonyme juste
en encapsulant le tout entre parenthèses que nous avons fait
avec cette paren et ce Paren ici puis une fixation
à la fin de la fonction paren ouverture, de fermeture parenthèse,
si vous ne voulez pas passer tous les arguments.
Mais cela semble un peu stupide,
comme pourquoi ce supplément complexité syntaxique
que la plupart des gens ne semblent pas de reconnaître, ce qui est la valeur
enveloppement de ceux trois lignes de code
dans une fonction anonyme de cette manière.
Ouais.
>> Pour éviter d'écraser un précieux dans la [inaudible].
>> Exactement, pour éviter écraser une variable
dans la page existante, non?
Facebook est un peu présomptueusement décidé,
ils vont utiliser l' la variable E, il est fort probable
que vous ou quelqu'un utilisant le Facebook comme le bouton
ou tout autre bouchon sociale
en a une variable quelque part appelé E. Ainsi,
en encapsulant tous de leur code à l'intérieur
de cette fonction anonyme, ils essentiellement avoir leur propre champ d'application
cela ne risque pas de démolir toutes les variables existantes.
Donc, cela aussi est en fait un paradigme très commun,
en particulier lors de l'écriture un code de bibliothèque
ou lorsque vous vous ne le faites pas vouloir encombrer votre espace de nom
avec d'autres variables que vous veulent la valeur de vivre
et mourir une fois que vous quittez ce bloc de code,
c'est une technique agréable en JavaScript.
Très bien.
Ainsi donc revenir à cet exemple ici, tout ce que nous avons fait à la fin
avec cet exemple, est juste nettoyé le code.
Ainsi, il a encore un tout groupe de commutateurs, tout un tas
des conditions ici, mais remarquer un peu de syntaxe,
ce accède au nœud DOM avec l'enregistrement d'identification unique,
les moyens spatiaux recherchent maintenant un descendant de ce noeud,
trouver si c'est le type de entrée et puis même
si vous n'avez pas vu ce avant, vous savez peut-être
que cela signifie juste trouver avec le mot-clé d'entrée,
les éléments d'entrée qui a un attribut de nom avec une valeur
de messagerie, puis laisser me vague ma main à un
le reste n'est pas tout ce qui stimulant
mais vraiment juste syntaxe jQuery pour les mêmes opérations.
Très bien.
Mais ce n'est pas si important ici est la substance du côté de navigateur
mais plutôt le fait que l'on eu des moyens plus propres et plus propres
de faire réellement que le travail de code.
Très bien.
Vous avez des questions?
[Inaudible Remarque]
OK. Maintenant la partie amusante.
Donc, Node.js Pourquoi?
Qui s'en soucie?
Que savez-vous de lui aujourd'hui?
Node.js, pourquoi?
Henry [supposé orthographe].
[Inaudible Remarque]
réinitialisation de la batterie?
Qu'est - ce qui est une parfait cintre de falaise
pour la seconde moitié d'aujourd'hui.
Pourquoi ne pas aller prendre une pause de 5 minutes ici,
il ya un demi-bonbons machine, il vous le feriez si
comme des bonbons sans mettre un quart po