[Jouer de la musique] 

DOUG LLOYD: Donc maintenant nous sommes vieux pros à la programmation web, non? Et nous avons couvert plusieurs langues dans les vidéos individuelles. Et maintenant, nous allons faire un de plus, JavaScript. 

D'abord les bonnes nouvelles, JavaScript est une programmation moderne langue beaucoup comme PHP dont syntaxe est dérivée de C, de sorte que est un bon endroit pour commencer. Il est aussi vieux que PHP, ainsi, ayant été autour d'environ 20 ans. Il a été inventé autour de en même temps que PHP. Et JavaScript est en fait assez fondamental de l'expérience utilisateur de la bande. En fait, il y a trois langues que je dirait sorte de combler le expérience de l'utilisateur d'interagir avec le site Web, html, CSS et JavaScript. Et maintenant parlons un peu de JavaScript. 

Les mauvaises nouvelles, cependant, est avec JavaScript qu'il met beaucoup de règles pour lui-même, et puis il les brise. Et JavaScript peut effectivement être sorte de défi à apprendre, parce qu'elle est la différence C et PHP, qui sont très structuré et ont des règles très rigides pour savoir comment les choses peuvent fonctionner. JavaScript doit genre d'été tellement souple que peut-être les choses ne vont pas travailler comme on peut s'y attendre, et peut-être que nous ne pouvons vraiment pas savoir notre premier langage de programmation comme JavaScript. Alors peut-être parce qu'il ne définir lui-même les règles, et il n'a pas vraiment appliquer de bonnes habitudes de codage. Mais maintenant, nous avons développé espérons quelques bonnes habitudes de codage, et afin que nous puissions commencer à incursion JavaScript dans un peu. 

Pour écrire JavaScript, similaire à l'ouverture un fichier de C avec un point C prolongation ou un fichier PHP avec une extension PHP dot, tout ce que nous devons faire est d'ouvrir un fichier avec l'extension de fichier du point de. On n'a pas besoin d'avoir toute spéciale séparateurs comme nous l'avons fait en PHP. Ce genre de l'angle Support d'interrogation PHP que nous sommes habitués à cela, la manière Nous disons à nos navigateur que ce que nous avons est JavaScript est compris par dans une balise HTML, et nous verrons un peu plus sur comment faire cela dans un instant. 

L'autre chose qui rend JavaScript différente, cependant, est qu'il fonctionne côté client. Alors que rappeler avec PHP nous ne pourrions jamais vraiment voir le PHP qui a souligné un site Web. Si jamais nous vu les source de la page, nous serions seulement voir le HTML qui a été généré par ce PHP. Mais exécute JavaScript côté client. Votre JavaScript est exécuté sur votre ordinateur. Et voilà pourquoi vous pouvez faire des choses comme ajouter des bloqueurs. Droit? Le blocage des publicités est généralement effectué par tuant tout le JavaScript qui est en cours d'exécution sur un site Web particulier. Et parce qu'il aurait à exécuter sur votre côté client de la machine, vous pouvez simplement arrêter la JavaScript pour exécuter entièrement. Cela signifie également que lorsque vous utilisez un site Web qui comprend JavaScript, vous devez envoyer la source JavaScript Code dans le cadre de votre réponse http au client quand ils le demandent. Et si vous ne pourriez pas vouloir utiliser JavaScript de faire des choses vraiment sensibles comme l'information passant sur les mots de passe des utilisateurs en arrière et de suite, parce qu'ils sont en fait va recevoir la totalité du code source, pas seulement le code HTML qui est généré, comme ce serait le cas avec par exemple PHP. 

Alors, comment avons-nous incluons JavaScript dans notre html pour commencer? Eh bien, similaire à CSS, en fait, est une sorte de comment nous le faisons ici. Avec CSS nous avons balises de style. Et à l'intérieur de ces balises de style, nous pouvons définir une feuille de style CSS. De même avec JavaScript pouvons-nous ouvrir des balises de script, une autre balise html nous avons fait pas parler dans notre html vidéo, et à écrire en JavaScript entre ces balises de script. Aussi bien, comme CSS, nous pourrait relier en dehors des fichiers CSS et tirez-les dans notre programme de cette façon. Avec CSS on peut aussi, excusez-moi, avec JavaScript on peut également spécifier la source attribut de la balise de script pour relier en JavaScript séparément, de sorte que vous ne le faites pas avoir à l'écrire dans entre les balises de script, nous il peut lier en utilisant cette balise de script ainsi. Et tout comme avec le cas où CSS nous avons recommandé qu'il était probablement dans votre meilleur intérêt d'écrire votre CSS dans un fichier séparé dans le cas vous avez besoin de changer, similaire faisons nous recommandons que vous écrivez votre JavaScript dans des fichiers séparés et utiliser la source des balises de script attribuer à attacher votre JavaScript dans votre html, votre page Web. 

Donc, les variables JavaScript, nous allons commencer à parler de la syntaxe ici. Et nous allons passer par ce genre de rapidement, parce que nous avons fait en PHP, tout cela doit être assez familier. Donc variables JavaScript sont très similaire à PHP, une variable. Il n'y a pas spécificateur de type, et lorsque vous introduisez une variable, préfixer avec le mot-clé var. En PHP nous ferions quelque chose comme ça, signe dollar x. Voilà comment nous indiquions une variable, mais non, nous ne pas mentionner le type de la variable du tout. Nous aimerions dire quelque chose comme dollar signe x est égal à 44 en PHP. Si nous faisions la même chose en JavaScript, nous dirions var x est égal à 44. Donc var est une sorte de notre chemin d'introduction d'une variable. Voilà peut-être un peu plus intuitive que simplement signe dollar variable. 

Encore une fois, car il n'y a pas types de données, nous avons pu le faire avec tout type de données, cordes, rien d'autre tout serait var. Conditionnels, l'ensemble de notre vieux amis de C et PHP sont encore disponibles, nous avons donc si, d'autre si, d'autre, commutateur et question marque côlon. Commutateur reste aussi souple que était en PHP, mais tous ces vous êtes familier avec maintenant. Et de même avec les boucles sont les vieux favoris de tout, faire tout, et toujours disponible pour nous. Donc, nous savons déjà beaucoup de Trier JavaScript de base des fondamentaux juste en vertu d'avoir un peu des connaissances maintenant sur le C et PHP. 

Qu'en est-il des fonctions en JavaScript? Eh bien, similaire à PHP chaque fonction est introduit avec le mot-clé function. Vous dites que la fonction, et puis vous commencer à définir votre fonction. Quel est un peu différent sur JavaScript, si est la capacité d'avoir ce qu'on appelle une fonction anonyme. Ainsi, vous pouvez définir des fonctions qui ne possèdent pas un nom. Ceci est quelque chose que nous vraiment ne l'ont pas vu avant. Nous allons vraiment utilisé le concept d'une fonction anonyme un peu plus tard dans ce vidéo, parce que ça va faire un peu plus de sens dans le contexte quand on la voit dans une situation particulière que je l'ai conçu ici. Mais disons simplement jeter un oeil ce qui d'un simple JavaScript fonction pourrait ressembler. 

Donc, je suis allé de l'avant et ouvert mon CS50 IDE et je l'ai déjà exécuter Apache pour commencer mon serveur en cours d'exécution. Et je dois ce fichier Ouvrez appelé Home.html. Et je zoome un peu ici. Et dans le fond, vous pouvez voir le Home.html est juste un tas de boutons. Et je prétendant au sommet ici ce qui est la section JavaScript matériaux. Donc, il ya un tas de boutons ici, mais qu'est-ce que ces boutons font réellement? 

Eh bien, nous irons à mon IED, et je l'ai ouvrir Home.html ici. Au tout début, Voici où je reliant dans tous mes fichiers source JavaScript. Droit? Donc je dois anonymous.js, clock.js, Je suis en utilisant l'attribut source de la balise script à lier dans le fichier. Donc, je ne l'ai pas écrit tout JavaScript directement dans ce fichier, mais je l'ai tiré dans tous les JavaScript je l'ai écrit séparément. Et si nous défiler vers le bas ici, ce devrions tous regarder un peu familier avec un peu de nouvelle syntaxe. Nous avons ici-tête tag pour fonctions et puis un bouton. Je dois une entrée qui est un bouton de type, et apparemment quand je clique dessus, Je vais appeler certains Fonction Date alerte. Et voilà comment nous pouvons sorte de mélanger un peu de JavaScript et HTML. Ils jouent en fait assez bien ensemble, et donc apparemment quand Je clique sur ce bouton, je vais d'appeler une date d'alerte de fonction. Et ai-je de même défini les comportements pour tous les autres boutons que sont sur cette page home.html, que nous allons continuer retour pour au cours de cette vidéo. Mais revenons en place ici et jetez un oeil au clock.js, qui est le Fichier JavaScript que je écrit qui a cette première fonction nous allons jeter un oeil à. Comme vous pouvez le voir, je commence ma JavaScript fonctionner avec la fonction de mot-clé, et je lui ai donné celui-ci un nom, elle est appelée la date alerte. À l'intérieur de là, je apparemment créer un nouvelle variable locale appelée date actuelle. Et je vais assigner égal à une nouvelle date. Et nous pourrions obtenir dans un grand nombre de détail quant à ce qui est une date, et vraiment JavaScript est si grande que nous ne pouvons peut- couvrir tout dans une seule vidéo. Mais il suffit de dire, cela va pour revenir à moi un élément de données encapsule la date et l'heure. Je stocker que dans une variable que je suis va apparemment à alerter date actuelle. 

Eh bien, qu'est-ce que l'alerte regard de la date actuelle comme? Jetons un coup d'oeil au fichier lui-même sauvegarder plus dans la fenêtre du navigateur. Encore une fois, ceci est le bouton que je ont attaché à cette fonction nommée. Et je clique là et regarder ce qu'il a fait, il a alerté. Il a surgi cette sorte de boîte dire moi que l'heure actuelle est, semble-t- ses 4 Novembre à 10:43:43 le matin. Et si je clique à nouveau, maintenant il est quelques secondes plus tard, non? Voilà donc tous cette fonction fait. Lorsque je clique sur ce bouton, il pops up un message d'alerte pour moi. Donc, il n'y a vraiment pas trop fonctions qui est différent de PHP, juste un peu de nouvelle syntaxe qui vient de travailler avec JavaScript. 

Les tableaux en JavaScript sont assez simple. Pour déclarer un tableau, vous utilisez la syntaxe des supports de crochets que nous sommes familiers avec de PHP. Et similaire à PHP, nous peut également mélanger les types de données. Donc ce tableau, à la fois de ces tableaux serait être parfaitement légitime JavaScript. Un qui est tout entier, et qui qui est mêlé à différents types de données. 

Quelle est quelque chose de très différent en JavaScript, si? Voilà la notion d'un objet. Alors peut-être que vous avez entendu parler de programmation orientée objet. Nous ne faisons pas beaucoup de lui dans CS50, mais nous allons faire un peu de celui-ci ici dans le contexte de JavaScript. Maintenant JavaScript a la capacité de se comporter comme une programmation orientée objet langue, mais il est lui-même pas exclusivement orientée objet langage de programmation. Et cela vient à nouveau Retour à la raison pour laquelle je l'ai dit, il peut être très difficile à apprendre JavaScript que votre première programmation langue, car il ne fait pas adapter vraiment un paradigme particulier. 

C d'autre part est un langage de programmation fonctionnel. Si nous voulons, les fonctions sont sorte de grand homme le patron, non? Ils dictent qui se passe tout le reste. Nous voulons changer les variables, nous appelons fonctions. Nous faisons les choses à des fonctions. Objets place, dans un langage orienté objet, objets sorte de devenir la star et fonctions deviennent sorte de secondaire. Mais ce qui est un objet, ce qui est cette notion d'un objet? Eh bien, si ça aide, pense à ce sujet au Tri comme d'une structure de C ou une structure que nous avons appris sur avant. En C, une structure contient un certain nombre de domaines, et peut-être que nous pourrions maintenant commencer à appeler ces propriétés des champs. Mais les propriétés jamais vraiment debout sur leur propre, non? Si je définir une structure pour une voiture comme cela avec les deux suivantes des champs ou des propriétés, l'une un entier pour l'année de la voiture et un autre un caractère 10 chaîne pour le modèle de la voiture, Je peux dire quelque chose comme ça, Je peux déclarer une nouvelle variable de voiture Type de struct Herbie. Et puis je peux dire quelque chose comme égaux herbie.year 1963, et herbie.model égale Beetle. C'est bon. Je suis en utilisant les champs de la contexte de la structure, mais je ne pouvais jamais juste dire quelque chose comme ça. Droit? Je ne peux pas utiliser le nom de domaine indépendant de la structure. Il est en quelque sorte d'une chose fondamentale. 

Ainsi, les champs étant fondamentale pour les structures C sont très similaires aux propriétés étant fondamentale pour les objets JavaScript. Mais ce qui les rend particulièrement intéressant est que les objets peuvent aussi avoir ce sont appelées méthodes, qui sont vraiment juste un mot de fantaisie pour les fonctions qui sont inhérentes à l'objet ainsi. Donc, il est une fonction qui ne peut être appelée dans le contexte d'un objet. Seulement un objet qui a défini cette fonction à l'intérieur de son, si vous pensez à un struct, la fonction est définie à l'intérieur celles définissant accolades de la structure. Donc, cela signifie seulement quelque chose à la structure. Et que ce genre de ce que nous faisons ici avec des objets et des méthodes. Il est fondamentalement comme nous sommes définir une fonction qui n'a de sens que sur un objet particulier, et nous appeler cela une méthode de l'objet. Et nous ne pouvons jamais appeler ça fonction indépendante de l'objet, tout comme nous ne pouvons pas dire l'année ou le modèle indépendante de la structure en C. 

Donc, la programmation fonctionnelle paradigmes ressembler à quelque chose comme ça. Fonction et puis quand vous passez dans l'objet comme paramètre. Dans une programmation orientée objet langues, cette sorte de obtient a retourné, et nous aimerions penser comme ça, object.function. Donc, ce genre de points que opérateur impliquant à nouveau qu'il est une sorte de propriété ou un attribut de l'objet lui-même. Mais voici ce que un objet langage de programmation orienté pourrait faire pour faire une fonction appel à une méthode, encore une fois, ce qui est juste un mot spécial pour une fonction qui est inhérente à un objet. Ceci est ce que syntaxe pourrait ressembler. Et donc nous allons commencer à voir quelques-uns des dans le contexte de JavaScript. 

Vous pouvez aussi penser à un objet un peu comme un tableau associatif, dont nous sommes familiers avec de PHP. Rappelez-vous un tableau associatif permet nous avons paires clé-valeur, à la place d'avoir des index 0, un, deux, trois, et ainsi de suite, comme nous sommes habitués à partir de C tableaux. Les tableaux associatifs peuvent mapper mots, comme dans la vidéo PHP, nous parlions garnitures de pizzas. Et si nous avions un tableau appelées pizzas, et nous eu fromage était une clé et 8,99 $ était le valeur, puis pepperoni était une clé, 9,99 $ était une valeur, et ainsi de suite. Et donc nous pouvons aussi penser à un opposer sorte de semblable à un associative tableau. Et si cette syntaxe ici créerait un nouvel objet Herbie appelé avec deux propriétés à l'intérieur. Année, qui est attribué la valeur 1963, et le modèle, qui est assigné la chaîne Scarabée. 

Et remarque ici que je suis en utilisant guillemets simples en JavaScript. Vous pouvez utiliser des guillemets simples ou doubles quand vous parlez de cordes. Il est juste classiquement Le cas qui la plupart du temps quand vous écrivez JavaScript, il suffit d'utiliser des guillemets simples. Mais je ne pouvais utiliser des guillemets ici, et ce serait parfaitement bien ainsi. 

Alors rappelez-vous comment, dans PHP nous avons eu cette notion d'un pour chaque boucle qui nous permettrait pour parcourir la totalité de la valeur de la clé une paires de associatif tableau, parce que nous ne pas avoir cette capacité à itérer à 0, un, deux, trois, quatre, et ainsi de suite? JavaScript a quelque chose de très similaire, mais il ne l'appelle pas un pour chaque boucle, on appelle ça un pour en boucles. Donc, si je l'ai dit à moi comme ce, pour la clé var dans l'objet, qui est en quelque sorte similaire à dire pour chaque quelque chose d'aussi quelque chose. Mais tout ce que je fais ici est l'itération à travers toutes les touches de mon objet. Et à l'intérieur de l'bouclés accolades là, je le ferais utiliser l'objet touche crochets de se référer à la valeur à cet emplacement clé. 

Sinon, il ya même une autre approche. Si je viens soucie seulement de la les valeurs, je peux dire pour la clé de l'objet, et il suffit d'utiliser la clé à l'intérieur. Donc, pour la clé var dans l'objet, je dois à utiliser objets supports de carrés clé à l'intérieur de la boucle. Pour la touche var d'objet, je peux il suffit d'utiliser la clé à l'intérieur de la boucle, parce que je suis juste spécifiquement parlant des valeurs là. 

Donc, nous allons peut-être prendre un regardez la différence juste pour vous montrer rapidement la différence entre quatre dans et pour de très spécifique avec un tableau, que nous avons ici, la semaine tableau. Donc, je dois trouver un nouveau tableau que je remplis à sept cordes, Lundi Mardi Mercredi, Jeudi, vendredi, samedi, dimanche. Et je veux maintenant itérer Grâce à cet éventail, imprimer certaines informations. Si je utiliser une boucle dans pour imprimer des informations, qu'est-ce que vous pensez que je vais obtenir? Eh bien, nous allons jeter un coup d'oeil. Et avant de sauter sur à ma fenêtre de navigateur, il suffit de savoir que console.log est en quelque sorte d'un façon de faire une impression F en JavaScript. Mais quelle est la console? Eh bien, voilà ce que nous allons d'aller jeter un oeil à ce moment. 

OK, donc nous sommes de retour ici dans ma fenêtre de navigateur, et je vais ouvrir mes outils de développement. Encore une fois, je suis juste frapper F12 d'ouvrir les outils de développement. Et remarquez qu'ici au top Je ai choisi console. Donc ceci est la notion d'une console de développeur, et il nous permettra de imprimer des informations sur, un peu comme le terminal, mais comme vous le verrez un peu plus tard, nous pouvons également saisir des informations dans d'interagir avec notre page web. Je vais pour agrandir un peu ici, et je vais cliquez maintenant sur au test. Et quatre test-- Je ne vais pas vous montrer le code de ce moment, mais vous l'aurez si vous télécharger le code source qui est associé à cette video-- est juste que dans la boucle que nous avons vu juste un il ya la deuxième sur la diapositive. 

Donc, je vais clic qui bouton, et ici, voici ce qui a imprimé dans le console, 0, un, deux, trois, quatre, cinq, six. Je ne suis pas imprimer les informations l'intérieur de ces lieux de tableau, parce que je utilisé un dans la boucle. Et à l'intérieur du corps de la boucle, je vient d'être imprimée sur la touche pas objet clé. Mais si je clair maintenant ma console, et je pour passer à l'essai, et quatre d'essai Je dis que je l'utilise pour de la boucle la place et imprimer clé, si je clique que, maintenant, je suis en train de le éléments réels à l'intérieur de mon objet ou mon tableau dans ce cas. Mon tableau des jours de la semaine. Je ai imprimé lundi Mardi mercredi. Voilà donc la différence entre une dans la boucle, qui imprime seulement les touches si vous utilisez tout simplement la clé intérieur du corps de la boucle, et un pour la boucle, qui imprime les valeurs si vous utilisez tout simplement clé à l'intérieur du corps de la boucle. 

Très bien, comment pouvons-nous commencer dès maintenant à concaténer des chaînes et peut-être mélanger certaines variables avec interpolation comme si nous étions en mesure de le faire en PHP? Eh bien, nous sommes assez familier avec cette de PHP. Voilà comment nous pourrions le faire en utilisant le opérateur point pour concaténer des chaînes. En JavaScript, cependant, nous utilisons en fait quelque chose appelé l'opérateur de plus, qui est peut-être même un peu plus intuitive, non? Nous ajoutons un tas des chaînes ensemble. Donc, nous allons tête en arrière encore et voir ce que cela imprimera si nous essayons d'imprimer toutes les informations en matrice semaines. Tout droit, en vertu ici en vertu de la concaténation de chaîne, Je dois deux options, le renforcement de la chaîne V1 et V2 bâtiment de chaîne. Et nous allons voir pourquoi nous besoin V2 dans une seconde. Mais je vais clique sur bâtiment chaîne V1, qui est le code que nous étions juste jeter un oeil à, l'console.log avec tous les avantages. Voyons si cette gravures sur ce que nous attendons. 

Le lundi est le numéro du jour de la semaine 01, Le mardi est jour numéro 11 de la semaine. Eh bien, ce que je tentais à faire il était obtenir à imprimer lundi est le numéro du jour l'un, le mardi est le numéro de deux jours. Mais il semble que je suis toujours imprimant une. Eh bien, pourquoi est-ce? Eh bien, il se trouve, prendre un autre regard à ce petit bout de code ici. Notez que nous utilisons le plus de l'opérateur dans deux contextes différents. 

Et voici où peut-être les choses que nous avons sorte de disons, oh, il est si grand. Nous ne traitons pas avec des types de données plus. Mais voici où le fait que nous perdons des types de données peut effectivement être un peu d'un problème pour nous. Maintenant que l'opérateur plus est utilisé pour concaténer des chaînes et ajouter des numéros ensemble, JavaScript a pour faire sa meilleure estimation à ce que je veux faire pour moi. Et dans ce cas, il devinait mal. Ce jour juste enchaîné, qui serait 0, un, deux, trois, quatre, cinq, ou six, et alors il a juste concaténer que puis concaténées un. Il n'a pas fait ajouter leur ensemble. Et si ces langues, PHP et JavaScript, qui fait abstraction cette notion de types, vous ne devez pas traiter avec elle plus. Ils ne disposent toujours types sous le capot. Et nous pouvons, dans des situations comme ça, tirer parti de ce fait en disant quelque chose comme peut-être ce qui est révélateur JavaScript, par le Ainsi, traiter cela comme un entier, ne pas le traiter comme une chaîne, même si nous sommes mélangeant cordes et entiers ici. 

Il est juste une de ces choses qu'il semble si grande dans le contexte que nous ne devons pas traiter avec des types plus, mais parfois vous aurez courir dans une situation exactement comme celui-ci où le fait que vous ne disposez pas de contrôle sur les types peut se retourner contre vous si vous ne faites pas attention. Et si nous y faire un saut vers IDE, je suis aller à effacer ma console à nouveau, et je vais cliquez chaîne Version bâtiment de deux, ce qui est où je utiliser cette fonction parse int. Maintenant, il est l'impression de information que je attendre. Numéro du jour de l'une de lundi, mardi est le numéro de deux jours, et ainsi de suite. 

Donc, nous allons parler de fonctions encore. Je l'ai promis que nous serions parler anonyme fonctions, et maintenant le contexte pour que est enfin arrivé. Donc, avant de le faire, nous allons parler à nouveau sur les tableaux pour juste une seconde. Donc, les tableaux sont une spéciale cas d'un objet. En fait, tout dans JavaScript est en fait un objet. Donc, les fonctions sont un cas particulier d'un objet, entiers sont une spéciale cas d'un objet, mais des tableaux spécifiquement un certain nombre de méthodes. Rappelez-vous, car ils sont des objets, ils peuvent avoir des propriétés et des méthodes. Ils ont un certain nombre de procédés que peut être appliqué à ces objets. Il ya une méthode appelée taille, array.size, qui sera de retour à vous que vous pourriez vous attendre le nombre d'éléments dans votre tableau. Array.pop, un peu comme notre notion de sautaient d'une pile, si vous vous souvenez piles de notre vidéo, Supprime le dernier élément du tableau. Array.push ajoute un nouvel élément à la fin d'un tableau. Array.shift est une sorte de comme DQ, il épissures sur le premier élément d'un tableau. 

Mais il ya aussi une autre spéciale méthode d'un tableau appelé carte. Et cela est une sorte de concept intéressant. Alors, quelle est l'idée d'une carte? Vous allez vraiment voir cette dans plusieurs autres langues, et nous ne parlons pas d'un sorte de cartographes carte ici, nous parlons d'une fonction de cartographie. Dans le contexte que nous sommes parlons ici, une carte est une opération spéciale de nous peut effectuer sur un tableau d'appliquer une fonction particulière à chaque élément de ce tableau. et ainsi nous dirions en ce cas, peut-être Array.map, et à l'intérieur de celui-ci, nous passons dans la carte est une fonction que nous voulons à appliquer à chaque élément. Donc, il est en quelque sorte analogue à l'utilisation une boucle pour itérer sur tous les éléments et appliquer un particulier fonctionner à chaque élément, juste JavaScript a construit dans cette notion d'une application qui peut être appliquée. Et ceci est un grand contexte parler d'une fonction anonyme. 

Alors disons que nous avons ce tableau d'entiers. Il a appelé nums, et il a obtenu cinq choses en elle, un, deux, trois, quatre, cinq. Maintenant, je veux un peu la carte sur la fonction de ce tableau. Je veux avoir une fonction applique pour chaque élément de la matrice. Eh bien, disons que ce que je veux faire est de simplement doubler tous les éléments. Qu'est-ce que je pourrais faire est de simplement utiliser une boucle pour var I est égale à 0, I est inférieur à ou égal à 4, Je plus, plus, et puis doubler chaque numéro unique. Mais je peux aussi faire quelque chose comme ça. Je peux dire nums était autrefois un deux trois Quatre cinq, maintenant, cependant, je voudrais que vous appliquer une cartographie sur ce tableau où je voudrais que vous à doubler chaque numéro. Et cela est exactement Qu'est-ce qu'il se passe ici. Mais ce que je remarque en passant en tant qu'argument de la carte. Ceci est une fonction anonyme. Et notez que je ne l'ai pas donnée cette fonction un nom, Je ne l'ai donné une liste de paramètres. Et ceci est un exemple d'une fonction anonyme. 

Nous serions généralement jamais appeler cette fonction en dehors du contexte de la carte. Nous définissant comme un paramètre à la carte, et donc nous ne sont pas vraiment besoin d'avoir un nom pour elle si le seule chose qui se soucie est la carte et il est défini droit là à l'intérieur de la carte. Et donc cela est une fonction anonyme. Nous avons pas été en mesure pour ce faire auparavant. Carte Quelques fonction accepte un paramètre, num, et ce que cette fonction ne est rendements NUM fois 2. Et donc après cette cartographie a été appliquée, cela est maintenant ce nums regards comme, deux, quatre, six, huit, 10. Et nous crevons à mon fenêtre de navigateur et juste regarde ça très rapidement ainsi. 

Je dois donc un autre bouton ici dans ma page d'accueil appelée double. Et quand je clique double, et il raconte moi avant il était un, deux, trois, quatre, cinq après deux, quatre, six, huit, 10. Et si je reviens en arrière et double-clic encore une fois, deux, quatre, six, huit, 10. Et puis après, quatre, huit, 12, 16, puis 20. Et ce que je fais dans cette fonction? Eh bien, si nous pop un peu plus d'IDE, et Je tire ma fonction anonyme, ici sur la ligne de sept à 13 ans, je suis faire une œuvre de fantaisie petit peu ici, mais je suis juste imprimer ce qui est actuellement dans le tableau. Ensuite, sur la ligne 16, 17, et 18, il est mon plan. Ceci est où je vais appliquer ce doublement fonction pour chaque élément. Et puis, un peu plus bas, Je suis juste faire la même chose Je faisais avant, sauf que maintenant je suis imprimer le contenu de la matrice après. Mais tout ce que je l'ai fait ici est il suffit d'utiliser une fonction anonyme à la carte à travers un tableau entier. 

Donc, un de plus grand sujet pour parler en JavaScript est la notion d'un événement. Un événement est quelque chose qui arrive lorsqu'un utilisateur interagit avec votre web page, donc peut-être qu'ils cliquez sur quelque chose, ou peut-être que la page est fini de charger, ou peut-être qu'ils ont déménagé leur souris sur quelque chose, ou ils ont tapé quelque chose dans un champ d'entrée. Toutes ces choses sont des événements qui se produisent sur notre page web. Et JavaScript a le la capacité à soutenir quelque chose appelé un gestionnaire d'événements, qui est une fonction de rappel qui répond à un événement html. Et ce qui est une fonction de rappel? Eh bien, il est généralement juste un autre nom pour une fonction anonyme. Il est une fonction qui répond à un événement. Et voilà où nous en arrivons à la idée de certaines fonctions de liaison à un attribut HTML particulier. La plupart des éléments HTML ont soutien pour un attribut que nous ne parlions pas dans le html vidéo pour quelque chose comme le clic ou sur le vol stationnaire ou sur la charge, tous ces événements que vous pouvez ensuite écrire des fonctions qui traitent de ces événements lorsque ces événements se produire sur votre page web. 

Et alors peut-être votre html ressemble à quelque chose comme ça. Et je dois ici deux boutons, un bouton et deux boutons, et ici je dois actuellement rien de défini, mais cela est où l'attribut sur clic est apparemment partie de ma balise html. Donc, apparemment, lorsque je définis ce qui est passe à l'intérieur de cet attribut, ça va être un peu de JavaScript fonction qui répond à l'événement vraisemblablement de cliquer sur touche un ou deux boutons. 

Ce qui est plutôt cool à ce sujet est que nous peuvent écrire un gestionnaire d'événement générique. Et cet événement manieur créer un objet de l'événement. Et l'objet d'événement va nous dire lequel des deux boutons a cliqué. Maintenant, comment ça marche? Eh bien, il pourrait ressembler à ceci. Donc, nous allons d'abord définir nos boutons d'avoir une réponse à la fonction de rappel fonction qui sera appelé lorsque le bouton est cliqué, nous appelons événement nom d'alerte. Et remarquez dans les deux cas nous sommes passer dans ce paramètre d'événement. Donc, nous appelons cette fonction ou lorsque cette fonction est déclenchée par l'événement se produit, ça va pour créer cet objet de l'événement et de le transmettre comme un paramètre Nom de l'alerte. Et cet objet de l'événement est va contenir des informations à propos de quel bouton a été cliqué. Et comment fait-elle cela? Eh bien, il pourrait ressembler à ceci. Alors maintenant, dans mon séparée Fichier JavaScript, je pourrais devoir trouver ce Nom de la fonction d'alerte, qui accepte à nouveau ce paramètre de l'événement. Et puis voici où je détection quel bouton a été déclenché, var déclencheur est égal événement dot élément source. Quelle était la source qui a créé cet objet événement qui a été adoptée en? Était-ce un bouton ou était-ce bouton à deux? 

Et puis ici, tout ce que je fais est imprimer trigger.innerhtml. Eh bien, dans ce cas, dans ce contexte, trigger.innerhtml est tout simplement ce qui est écrit sur le bouton. Il se trouve si nous sautons retour pour une deuxième, qui serait être ce qui est entre les balises de bouton. Ce sera un bouton ou deux boutons. Et nous allons jeter un oeil à comment ce gestionnaire d'événement serait regarder si nous l'avions en cours d'exécution dans la pratique. 

Alors tout d'abord, vous avez ouvertes events.js, qui est le fichier JavaScript où Je l'ai défini cette fonction. Et comme vous pouvez le voir, il est à peu près exactement ce que nous venons de voir sur la diapositive il ya une seconde. Et je vais aller sur le page d'accueil que nous utilisons. Et je dois ici touche un et deux boutons. Et je clique sur un bouton. Vous avez cliqué sur un bouton, si vous peut voir ici dans l'alerte. D'ACCORD. Cliquez sur le bouton deux, vous cliqué sur un bouton deux. 

Donc, les deux boutons ont la même appel de fonction, non? Ils étaient tous les deux nom d'alerte événement, mais cet objet événement qui est créé lorsque l'on clique sur il nous indique quel bouton a été cliqué. Nous ne devons écrire deux séparés fonctions ou de traiter avec avoir de passer toute information supplémentaire. Nous sommes en train de compter sur ce qui en JavaScript faire pour nous, ce qui est de créer ce que sorte d'objet d'événement en notre nom. Il ya beaucoup plus à de JavaScript ce que nous avons couvert dans cette vidéo, mais ceux-ci comportant fondamentale vous devriez un temps assez long façons de l'apprentissage tout vous besoin de savoir à ce sujet langue intéressant. Je suis Doug Lloyd. Ceci est CS50.