1
00:00:00,000 --> 00:00:03,840
>> [Jouer de la musique]

2
00:00:03,840 --> 00:00:05,770

3
00:00:05,770 --> 00:00:08,690
>> DOUG LLOYD: Donc maintenant nous sommes vieux
pros à la programmation web, non?

4
00:00:08,690 --> 00:00:12,140
Et nous avons couvert plusieurs
langues dans les vidéos individuelles.

5
00:00:12,140 --> 00:00:14,690
Et maintenant, nous allons faire un de plus, JavaScript.

6
00:00:14,690 --> 00:00:17,370
>> D'abord les bonnes nouvelles, JavaScript
est une programmation moderne

7
00:00:17,370 --> 00:00:21,410
langue beaucoup comme PHP dont
syntaxe est dérivée de C,

8
00:00:21,410 --> 00:00:22,830
de sorte que est un bon endroit pour commencer.

9
00:00:22,830 --> 00:00:25,880
Il est aussi vieux que PHP, ainsi,
ayant été autour d'environ 20 ans.

10
00:00:25,880 --> 00:00:28,600
Il a été inventé autour de
en même temps que PHP.

11
00:00:28,600 --> 00:00:32,240
Et JavaScript est en fait assez
fondamental de l'expérience utilisateur

12
00:00:32,240 --> 00:00:32,740
de la bande.

13
00:00:32,740 --> 00:00:34,448
En fait, il y a
trois langues que je

14
00:00:34,448 --> 00:00:38,480
dirait sorte de combler le
expérience de l'utilisateur d'interagir

15
00:00:38,480 --> 00:00:42,650
avec le site Web, html,
CSS et JavaScript.

16
00:00:42,650 --> 00:00:46,030
Et maintenant parlons un
peu de JavaScript.

17
00:00:46,030 --> 00:00:50,301
>> Les mauvaises nouvelles, cependant, est avec JavaScript
qu'il met beaucoup de règles pour lui-même,

18
00:00:50,301 --> 00:00:51,300
et puis il les brise.

19
00:00:51,300 --> 00:00:54,010
Et JavaScript peut effectivement être
sorte de défi à apprendre,

20
00:00:54,010 --> 00:00:57,000
parce qu'elle est la différence C et
PHP, qui sont très structuré

21
00:00:57,000 --> 00:01:00,270
et ont des règles très rigides
pour savoir comment les choses peuvent fonctionner.

22
00:01:00,270 --> 00:01:03,690
JavaScript doit genre
d'été tellement souple

23
00:01:03,690 --> 00:01:06,650
que peut-être les choses ne vont pas
travailler comme on peut s'y attendre,

24
00:01:06,650 --> 00:01:09,830
et peut-être que nous ne pouvons vraiment pas savoir
notre premier langage de programmation

25
00:01:09,830 --> 00:01:10,769
comme JavaScript.

26
00:01:10,769 --> 00:01:12,810
Alors peut-être parce qu'il ne
définir lui-même les règles,

27
00:01:12,810 --> 00:01:15,754
et il n'a pas vraiment
appliquer de bonnes habitudes de codage.

28
00:01:15,754 --> 00:01:18,170
Mais maintenant, nous avons développé espérons
quelques bonnes habitudes de codage,

29
00:01:18,170 --> 00:01:21,470
et afin que nous puissions commencer à incursion
JavaScript dans un peu.

30
00:01:21,470 --> 00:01:25,750
>> Pour écrire JavaScript, similaire à l'ouverture
un fichier de C avec un point C prolongation

31
00:01:25,750 --> 00:01:29,770
ou un fichier PHP avec une extension PHP dot,
tout ce que nous devons faire est d'ouvrir un fichier

32
00:01:29,770 --> 00:01:31,764
avec l'extension de fichier du point de.

33
00:01:31,764 --> 00:01:34,430
On n'a pas besoin d'avoir toute spéciale
séparateurs comme nous l'avons fait en PHP.

34
00:01:34,430 --> 00:01:36,750
Ce genre de l'angle
Support d'interrogation PHP

35
00:01:36,750 --> 00:01:40,300
que nous sommes habitués à cela, la manière
Nous disons à nos navigateur que ce que nous avons est

36
00:01:40,300 --> 00:01:43,502
JavaScript est compris par
dans une balise HTML,

37
00:01:43,502 --> 00:01:46,210
et nous verrons un peu plus sur
comment faire cela dans un instant.

38
00:01:46,210 --> 00:01:48,210
>> L'autre chose qui rend
JavaScript différente,

39
00:01:48,210 --> 00:01:50,580
cependant, est qu'il fonctionne côté client.

40
00:01:50,580 --> 00:01:53,430
Alors que rappeler avec PHP
nous ne pourrions jamais vraiment voir

41
00:01:53,430 --> 00:01:57,041
le PHP qui a souligné un site Web.

42
00:01:57,041 --> 00:01:59,040
Si jamais nous vu les
source de la page, nous serions seulement

43
00:01:59,040 --> 00:02:02,830
voir le HTML qui a été
généré par ce PHP.

44
00:02:02,830 --> 00:02:04,900
Mais exécute JavaScript côté client.

45
00:02:04,900 --> 00:02:06,710
Votre JavaScript est exécuté sur votre ordinateur.

46
00:02:06,710 --> 00:02:09,050
Et voilà pourquoi vous pouvez faire
des choses comme ajouter des bloqueurs.

47
00:02:09,050 --> 00:02:09,550
Droit?

48
00:02:09,550 --> 00:02:12,704
Le blocage des publicités est généralement effectué par
tuant tout le JavaScript

49
00:02:12,704 --> 00:02:14,370
qui est en cours d'exécution sur un site Web particulier.

50
00:02:14,370 --> 00:02:19,000
Et parce qu'il aurait à
exécuter sur votre côté client de la machine,

51
00:02:19,000 --> 00:02:21,910
vous pouvez simplement arrêter la
JavaScript pour exécuter entièrement.

52
00:02:21,910 --> 00:02:27,030
Cela signifie également que lorsque vous utilisez
un site Web qui comprend JavaScript,

53
00:02:27,030 --> 00:02:32,450
vous devez envoyer la source JavaScript
Code dans le cadre de votre réponse http

54
00:02:32,450 --> 00:02:34,159
au client quand ils le demandent.

55
00:02:34,159 --> 00:02:35,950
Et si vous ne pourriez pas
vouloir utiliser JavaScript

56
00:02:35,950 --> 00:02:38,395
de faire des choses vraiment sensibles
comme l'information passant

57
00:02:38,395 --> 00:02:41,020
sur les mots de passe des utilisateurs en arrière et
de suite, parce qu'ils sont en fait

58
00:02:41,020 --> 00:02:45,610
va recevoir la totalité du code source,
pas seulement le code HTML qui est généré,

59
00:02:45,610 --> 00:02:49,030
comme ce serait le cas avec par exemple PHP.

60
00:02:49,030 --> 00:02:51,620
>> Alors, comment avons-nous incluons JavaScript
dans notre html pour commencer?

61
00:02:51,620 --> 00:02:54,520
Eh bien, similaire à CSS, en fait,
est une sorte de comment nous le faisons ici.

62
00:02:54,520 --> 00:02:56,190
Avec CSS nous avons balises de style.

63
00:02:56,190 --> 00:03:00,760
Et à l'intérieur de ces balises de style,
nous pouvons définir une feuille de style CSS.

64
00:03:00,760 --> 00:03:03,450
De même avec JavaScript
pouvons-nous ouvrir des balises de script,

65
00:03:03,450 --> 00:03:06,660
une autre balise html nous avons fait pas
parler dans notre html vidéo,

66
00:03:06,660 --> 00:03:09,720
et à écrire en JavaScript
entre ces balises de script.

67
00:03:09,720 --> 00:03:13,960
Aussi bien, comme CSS, nous
pourrait relier en dehors des fichiers CSS

68
00:03:13,960 --> 00:03:15,900
et tirez-les dans notre programme de cette façon.

69
00:03:15,900 --> 00:03:18,280
Avec CSS on peut aussi,
excusez-moi, avec JavaScript

70
00:03:18,280 --> 00:03:23,240
on peut également spécifier la source
attribut de la balise de script

71
00:03:23,240 --> 00:03:25,720
pour relier en JavaScript
séparément, de sorte que vous ne le faites pas

72
00:03:25,720 --> 00:03:27,680
avoir à l'écrire dans
entre les balises de script, nous

73
00:03:27,680 --> 00:03:29,600
il peut lier en utilisant
cette balise de script ainsi.

74
00:03:29,600 --> 00:03:33,230
Et tout comme avec le cas où CSS
nous avons recommandé qu'il était probablement

75
00:03:33,230 --> 00:03:36,090
dans votre meilleur intérêt d'écrire
votre CSS dans un fichier séparé dans le cas

76
00:03:36,090 --> 00:03:38,500
vous avez besoin de changer,
similaire faisons nous recommandons

77
00:03:38,500 --> 00:03:40,720
que vous écrivez votre
JavaScript dans des fichiers séparés

78
00:03:40,720 --> 00:03:45,460
et utiliser la source des balises de script
attribuer à attacher votre JavaScript

79
00:03:45,460 --> 00:03:49,520
dans votre html, votre page Web.

80
00:03:49,520 --> 00:03:52,610
>> Donc, les variables JavaScript, nous allons
commencer à parler de la syntaxe ici.

81
00:03:52,610 --> 00:03:53,600
Et nous allons passer par
ce genre de rapidement,

82
00:03:53,600 --> 00:03:56,640
parce que nous avons fait en PHP,
tout cela doit être assez familier.

83
00:03:56,640 --> 00:03:59,490
Donc variables JavaScript sont
très similaire à PHP, une variable.

84
00:03:59,490 --> 00:04:03,270
Il n'y a pas spécificateur de type, et
lorsque vous introduisez une variable,

85
00:04:03,270 --> 00:04:05,070
préfixer avec le mot-clé var.

86
00:04:05,070 --> 00:04:07,750
En PHP nous ferions quelque chose
comme ça, signe dollar x.

87
00:04:07,750 --> 00:04:09,950
Voilà comment nous indiquions
une variable, mais non, nous

88
00:04:09,950 --> 00:04:12,060
ne pas mentionner le type
de la variable du tout.

89
00:04:12,060 --> 00:04:15,124
Nous aimerions dire quelque chose comme
dollar signe x est égal à 44 en PHP.

90
00:04:15,124 --> 00:04:17,040
Si nous faisions la
même chose en JavaScript,

91
00:04:17,040 --> 00:04:19,589
nous dirions var x est égal à 44.

92
00:04:19,589 --> 00:04:22,780
Donc var est une sorte de notre chemin
d'introduction d'une variable.

93
00:04:22,780 --> 00:04:26,850
Voilà peut-être un peu plus intuitive
que simplement signe dollar variable.

94
00:04:26,850 --> 00:04:29,080
>> Encore une fois, car il n'y a pas
types de données, nous avons pu le faire

95
00:04:29,080 --> 00:04:34,490
avec tout type de données, cordes,
rien d'autre tout serait var.

96
00:04:34,490 --> 00:04:37,260
Conditionnels, l'ensemble de notre
vieux amis de C et PHP

97
00:04:37,260 --> 00:04:41,640
sont encore disponibles, nous avons donc si,
d'autre si, d'autre, commutateur et question

98
00:04:41,640 --> 00:04:42,240
marque côlon.

99
00:04:42,240 --> 00:04:45,890
Commutateur reste aussi souple que
était en PHP, mais tous ces vous êtes

100
00:04:45,890 --> 00:04:46,930
familier avec maintenant.

101
00:04:46,930 --> 00:04:49,900
Et de même avec les boucles sont
les vieux favoris de tout,

102
00:04:49,900 --> 00:04:52,700
faire tout, et toujours disponible pour nous.

103
00:04:52,700 --> 00:04:55,880
Donc, nous savons déjà beaucoup de
Trier JavaScript de base des fondamentaux

104
00:04:55,880 --> 00:05:01,800
juste en vertu d'avoir un peu
des connaissances maintenant sur le C et PHP.

105
00:05:01,800 --> 00:05:03,670
>> Qu'en est-il des fonctions en JavaScript?

106
00:05:03,670 --> 00:05:08,199
Eh bien, similaire à PHP chaque fonction est
introduit avec le mot-clé function.

107
00:05:08,199 --> 00:05:10,740
Vous dites que la fonction, et puis vous
commencer à définir votre fonction.

108
00:05:10,740 --> 00:05:12,531
Quel est un peu différent
sur JavaScript,

109
00:05:12,531 --> 00:05:15,700
si est la capacité d'avoir
ce qu'on appelle une fonction anonyme.

110
00:05:15,700 --> 00:05:18,880
Ainsi, vous pouvez définir des fonctions
qui ne possèdent pas un nom.

111
00:05:18,880 --> 00:05:21,222
Ceci est quelque chose que nous
vraiment ne l'ont pas vu avant.

112
00:05:21,222 --> 00:05:23,430
Nous allons vraiment utilisé le concept
d'une fonction anonyme

113
00:05:23,430 --> 00:05:27,880
un peu plus tard dans ce
vidéo, parce que ça va

114
00:05:27,880 --> 00:05:31,530
faire un peu plus de sens dans le contexte
quand on la voit dans une situation particulière

115
00:05:31,530 --> 00:05:33,120
que je l'ai conçu ici.

116
00:05:33,120 --> 00:05:35,710
Mais disons simplement jeter un oeil
ce qui d'un simple JavaScript

117
00:05:35,710 --> 00:05:37,850
fonction pourrait ressembler.

118
00:05:37,850 --> 00:05:40,610
>> Donc, je suis allé de l'avant et
ouvert mon CS50 IDE

119
00:05:40,610 --> 00:05:43,690
et je l'ai déjà exécuter Apache
pour commencer mon serveur en cours d'exécution.

120
00:05:43,690 --> 00:05:46,800
Et je dois ce fichier
Ouvrez appelé Home.html.

121
00:05:46,800 --> 00:05:48,330
Et je zoome un peu ici.

122
00:05:48,330 --> 00:05:52,090
Et dans le fond, vous pouvez voir le
Home.html est juste un tas de boutons.

123
00:05:52,090 --> 00:05:55,291
Et je prétendant au sommet ici
ce qui est la section JavaScript

124
00:05:55,291 --> 00:05:55,790
matériaux.

125
00:05:55,790 --> 00:05:59,490
Donc, il ya un tas de boutons ici,
mais qu'est-ce que ces boutons font réellement?

126
00:05:59,490 --> 00:06:03,662
>> Eh bien, nous irons à mon IED,
et je l'ai ouvrir Home.html ici.

127
00:06:03,662 --> 00:06:05,620
Au tout début,
Voici où je reliant

128
00:06:05,620 --> 00:06:07,500
dans tous mes fichiers source JavaScript.

129
00:06:07,500 --> 00:06:08,000
Droit?

130
00:06:08,000 --> 00:06:12,440
Donc je dois anonymous.js, clock.js,
Je suis en utilisant l'attribut source

131
00:06:12,440 --> 00:06:14,440
de la balise script à lier dans le fichier.

132
00:06:14,440 --> 00:06:18,660
Donc, je ne l'ai pas écrit tout
JavaScript directement dans ce fichier,

133
00:06:18,660 --> 00:06:21,790
mais je l'ai tiré dans tous les
JavaScript je l'ai écrit séparément.

134
00:06:21,790 --> 00:06:24,540
Et si nous défiler vers le bas ici, ce
devrions tous regarder un peu familier

135
00:06:24,540 --> 00:06:27,090
avec un peu de nouvelle syntaxe.

136
00:06:27,090 --> 00:06:32,655
Nous avons ici-tête tag pour
fonctions et puis un bouton.

137
00:06:32,655 --> 00:06:35,530
Je dois une entrée qui est un bouton de type,
et apparemment quand je clique dessus,

138
00:06:35,530 --> 00:06:38,130
Je vais appeler certains
Fonction Date alerte.

139
00:06:38,130 --> 00:06:41,792
Et voilà comment nous pouvons sorte de mélanger
un peu de JavaScript et HTML.

140
00:06:41,792 --> 00:06:44,500
Ils jouent en fait assez bien
ensemble, et donc apparemment quand

141
00:06:44,500 --> 00:06:48,730
Je clique sur ce bouton, je vais
d'appeler une date d'alerte de fonction.

142
00:06:48,730 --> 00:06:53,660
Et ai-je de même défini les comportements
pour tous les autres boutons que

143
00:06:53,660 --> 00:06:56,440
sont sur cette page home.html,
que nous allons continuer retour

144
00:06:56,440 --> 00:06:59,172
pour au cours de cette vidéo.

145
00:06:59,172 --> 00:07:00,880
Mais revenons en place
ici et jetez un oeil

146
00:07:00,880 --> 00:07:03,850
au clock.js, qui est le
Fichier JavaScript que je

147
00:07:03,850 --> 00:07:07,370
écrit qui a cette première fonction
nous allons jeter un oeil à.

148
00:07:07,370 --> 00:07:11,630
Comme vous pouvez le voir, je commence ma JavaScript
fonctionner avec la fonction de mot-clé,

149
00:07:11,630 --> 00:07:14,560
et je lui ai donné celui-ci un
nom, elle est appelée la date alerte.

150
00:07:14,560 --> 00:07:18,710
À l'intérieur de là, je apparemment créer un
nouvelle variable locale appelée date actuelle.

151
00:07:18,710 --> 00:07:21,500
Et je vais assigner
égal à une nouvelle date.

152
00:07:21,500 --> 00:07:24,430
Et nous pourrions obtenir dans un grand nombre de
détail quant à ce qui est une date,

153
00:07:24,430 --> 00:07:27,060
et vraiment JavaScript est si
grande que nous ne pouvons peut-

154
00:07:27,060 --> 00:07:28,330
couvrir tout dans une seule vidéo.

155
00:07:28,330 --> 00:07:32,220
Mais il suffit de dire, cela va
pour revenir à moi un élément de données

156
00:07:32,220 --> 00:07:35,470
encapsule la date et l'heure.

157
00:07:35,470 --> 00:07:39,100
Je stocker que dans une variable que je suis
va apparemment à alerter date actuelle.

158
00:07:39,100 --> 00:07:41,300
>> Eh bien, qu'est-ce que l'alerte
regard de la date actuelle comme?

159
00:07:41,300 --> 00:07:46,460
Jetons un coup d'oeil au fichier lui-même
sauvegarder plus dans la fenêtre du navigateur.

160
00:07:46,460 --> 00:07:49,551
Encore une fois, ceci est le bouton que je
ont attaché à cette fonction nommée.

161
00:07:49,551 --> 00:07:51,800
Et je clique là et
regarder ce qu'il a fait, il a alerté.

162
00:07:51,800 --> 00:07:56,140
Il a surgi cette sorte de boîte dire
moi que l'heure actuelle est, semble-t-

163
00:07:56,140 --> 00:07:59,370
ses 4 Novembre à
10:43:43 le matin.

164
00:07:59,370 --> 00:08:02,345
Et si je clique à nouveau, maintenant
il est quelques secondes plus tard, non?

165
00:08:02,345 --> 00:08:03,720
Voilà donc tous cette fonction fait.

166
00:08:03,720 --> 00:08:07,670
Lorsque je clique sur ce bouton, il
pops up un message d'alerte pour moi.

167
00:08:07,670 --> 00:08:13,806

168
00:08:13,806 --> 00:08:15,690
Donc, il n'y a vraiment pas
trop fonctions

169
00:08:15,690 --> 00:08:19,110
qui est différent de PHP,
juste un peu de nouvelle syntaxe

170
00:08:19,110 --> 00:08:22,500
qui vient de travailler avec JavaScript.

171
00:08:22,500 --> 00:08:24,650
>> Les tableaux en JavaScript sont
assez simple.

172
00:08:24,650 --> 00:08:27,200
Pour déclarer un tableau, vous utilisez
la syntaxe des supports de crochets

173
00:08:27,200 --> 00:08:30,090
que nous sommes familiers avec de PHP.

174
00:08:30,090 --> 00:08:33,432
Et similaire à PHP, nous
peut également mélanger les types de données.

175
00:08:33,432 --> 00:08:35,140
Donc ce tableau, à la fois
de ces tableaux serait

176
00:08:35,140 --> 00:08:36,960
être parfaitement légitime JavaScript.

177
00:08:36,960 --> 00:08:42,500
Un qui est tout entier, et qui
qui est mêlé à différents types de données.

178
00:08:42,500 --> 00:08:45,020
>> Quelle est quelque chose de très différent
en JavaScript, si?

179
00:08:45,020 --> 00:08:47,020
Voilà la notion d'un objet.

180
00:08:47,020 --> 00:08:50,240
Alors peut-être que vous avez entendu parler de
programmation orientée objet.

181
00:08:50,240 --> 00:08:53,370
Nous ne faisons pas beaucoup de lui dans CS50,
mais nous allons faire un peu de celui-ci

182
00:08:53,370 --> 00:08:55,670
ici dans le contexte de JavaScript.

183
00:08:55,670 --> 00:08:59,100
Maintenant JavaScript a la capacité de
se comporter comme une programmation orientée objet

184
00:08:59,100 --> 00:09:02,615
langue, mais il est lui-même pas
exclusivement orientée objet

185
00:09:02,615 --> 00:09:03,490
langage de programmation.

186
00:09:03,490 --> 00:09:05,281
Et cela vient à nouveau
Retour à la raison pour laquelle je l'ai dit, il

187
00:09:05,281 --> 00:09:10,610
peut être très difficile à apprendre
JavaScript que votre première programmation

188
00:09:10,610 --> 00:09:13,890
langue, car il ne fait pas
adapter vraiment un paradigme particulier.

189
00:09:13,890 --> 00:09:16,430
>> C d'autre part est un
langage de programmation fonctionnel.

190
00:09:16,430 --> 00:09:22,270
Si nous voulons, les fonctions sont
sorte de grand homme le patron, non?

191
00:09:22,270 --> 00:09:24,410
Ils dictent
qui se passe tout le reste.

192
00:09:24,410 --> 00:09:26,600
Nous voulons changer les variables,
nous appelons fonctions.

193
00:09:26,600 --> 00:09:28,220
Nous faisons les choses à des fonctions.

194
00:09:28,220 --> 00:09:31,250
Objets place, dans un
langage orienté objet,

195
00:09:31,250 --> 00:09:35,937
objets sorte de devenir la star et
fonctions deviennent sorte de secondaire.

196
00:09:35,937 --> 00:09:38,270
Mais ce qui est un objet, ce qui
est cette notion d'un objet?

197
00:09:38,270 --> 00:09:40,880
Eh bien, si ça aide, pense
à ce sujet au Tri

198
00:09:40,880 --> 00:09:44,540
comme d'une structure de C ou une structure
que nous avons appris sur avant.

199
00:09:44,540 --> 00:09:47,430
En C, une structure contient
un certain nombre de domaines,

200
00:09:47,430 --> 00:09:51,174
et peut-être que nous pourrions maintenant commencer à
appeler ces propriétés des champs.

201
00:09:51,174 --> 00:09:53,590
Mais les propriétés jamais vraiment
debout sur leur propre, non?

202
00:09:53,590 --> 00:09:56,410
Si je définir une structure pour une voiture
comme cela avec les deux suivantes

203
00:09:56,410 --> 00:10:00,750
des champs ou des propriétés, l'une un
entier pour l'année de la voiture

204
00:10:00,750 --> 00:10:04,290
et un autre un caractère 10
chaîne pour le modèle de la voiture,

205
00:10:04,290 --> 00:10:07,150
Je peux dire quelque chose comme ça,
Je peux déclarer une nouvelle variable

206
00:10:07,150 --> 00:10:10,080
de voiture Type de struct Herbie.

207
00:10:10,080 --> 00:10:13,730
Et puis je peux dire quelque chose
comme égaux herbie.year 1963,

208
00:10:13,730 --> 00:10:15,850
et herbie.model égale Beetle.

209
00:10:15,850 --> 00:10:17,000
C'est bon.

210
00:10:17,000 --> 00:10:19,680
Je suis en utilisant les champs de la
contexte de la structure,

211
00:10:19,680 --> 00:10:22,290
mais je ne pouvais jamais juste
dire quelque chose comme ça.

212
00:10:22,290 --> 00:10:22,790
Droit?

213
00:10:22,790 --> 00:10:26,836
Je ne peux pas utiliser le nom de domaine
indépendant de la structure.

214
00:10:26,836 --> 00:10:28,210
Il est en quelque sorte d'une chose fondamentale.

215
00:10:28,210 --> 00:10:32,990
>> Ainsi, les champs étant
fondamentale pour les structures C

216
00:10:32,990 --> 00:10:39,050
sont très similaires aux propriétés étant
fondamentale pour les objets JavaScript.

217
00:10:39,050 --> 00:10:42,080
Mais ce qui les rend
particulièrement intéressant

218
00:10:42,080 --> 00:10:46,230
est que les objets peuvent aussi avoir ce
sont appelées méthodes, qui sont vraiment

219
00:10:46,230 --> 00:10:50,730
juste un mot de fantaisie pour les fonctions qui
sont inhérentes à l'objet ainsi.

220
00:10:50,730 --> 00:10:55,340
Donc, il est une fonction qui ne peut être
appelée dans le contexte d'un objet.

221
00:10:55,340 --> 00:10:59,200
Seulement un objet qui a défini
cette fonction à l'intérieur de son,

222
00:10:59,200 --> 00:11:02,020
si vous pensez à un
struct, la fonction

223
00:11:02,020 --> 00:11:05,720
est définie à l'intérieur celles définissant
accolades de la structure.

224
00:11:05,720 --> 00:11:07,980
Donc, cela signifie seulement quelque chose
à la structure.

225
00:11:07,980 --> 00:11:10,960
Et que ce genre de ce que nous faisons
ici avec des objets et des méthodes.

226
00:11:10,960 --> 00:11:13,580
Il est fondamentalement comme nous sommes
définir une fonction qui

227
00:11:13,580 --> 00:11:16,670
n'a de sens que sur un
objet particulier, et nous

228
00:11:16,670 --> 00:11:19,440
appeler cela une méthode de l'objet.

229
00:11:19,440 --> 00:11:23,180
Et nous ne pouvons jamais appeler ça
fonction indépendante de l'objet,

230
00:11:23,180 --> 00:11:29,260
tout comme nous ne pouvons pas dire l'année ou le modèle
indépendante de la structure en C.

231
00:11:29,260 --> 00:11:32,300
>> Donc, la programmation fonctionnelle
paradigmes ressembler à quelque chose comme ça.

232
00:11:32,300 --> 00:11:35,450
Fonction et puis quand vous passez
dans l'objet comme paramètre.

233
00:11:35,450 --> 00:11:38,650
Dans une programmation orientée objet
langues, cette sorte de obtient

234
00:11:38,650 --> 00:11:43,464
a retourné, et nous aimerions penser
comme ça, object.function.

235
00:11:43,464 --> 00:11:45,380
Donc, ce genre de points que
opérateur impliquant à nouveau

236
00:11:45,380 --> 00:11:49,540
qu'il est une sorte de propriété
ou un attribut de l'objet lui-même.

237
00:11:49,540 --> 00:11:53,240
Mais voici ce que un objet
langage de programmation orienté

238
00:11:53,240 --> 00:11:57,150
pourrait faire pour faire une fonction
appel à une méthode, encore une fois, ce qui

239
00:11:57,150 --> 00:12:00,260
est juste un mot spécial pour une fonction
qui est inhérente à un objet.

240
00:12:00,260 --> 00:12:03,440
Ceci est ce que
syntaxe pourrait ressembler.

241
00:12:03,440 --> 00:12:09,360
Et donc nous allons commencer à voir quelques-uns des
dans le contexte de JavaScript.

242
00:12:09,360 --> 00:12:12,470
>> Vous pouvez aussi penser à un objet
un peu comme un tableau associatif,

243
00:12:12,470 --> 00:12:14,160
dont nous sommes familiers avec de PHP.

244
00:12:14,160 --> 00:12:17,720
Rappelez-vous un tableau associatif permet
nous avons paires clé-valeur, à la place

245
00:12:17,720 --> 00:12:23,040
d'avoir des index 0, un, deux, trois,
et ainsi de suite, comme nous sommes habitués à partir de C

246
00:12:23,040 --> 00:12:23,940
tableaux.

247
00:12:23,940 --> 00:12:27,472
Les tableaux associatifs peuvent mapper
mots, comme dans la vidéo PHP,

248
00:12:27,472 --> 00:12:29,180
nous parlions
garnitures de pizzas.

249
00:12:29,180 --> 00:12:31,180
Et si nous avions un tableau
appelées pizzas, et nous

250
00:12:31,180 --> 00:12:36,670
eu fromage était une clé et 8,99 $ était le
valeur, puis pepperoni était une clé,

251
00:12:36,670 --> 00:12:39,190
9,99 $ était une valeur, et ainsi de suite.

252
00:12:39,190 --> 00:12:43,300
Et donc nous pouvons aussi penser à un
opposer sorte de semblable à un associative

253
00:12:43,300 --> 00:12:43,840
tableau.

254
00:12:43,840 --> 00:12:47,020
Et si cette syntaxe ici
créerait un nouvel objet

255
00:12:47,020 --> 00:12:50,950
Herbie appelé avec deux
propriétés à l'intérieur.

256
00:12:50,950 --> 00:12:57,310
Année, qui est attribué la valeur 1963,
et le modèle, qui est assigné la chaîne

257
00:12:57,310 --> 00:12:58,140
Scarabée.

258
00:12:58,140 --> 00:13:01,770
>> Et remarque ici que je suis en utilisant
guillemets simples en JavaScript.

259
00:13:01,770 --> 00:13:05,570
Vous pouvez utiliser des guillemets simples ou doubles
quand vous parlez de cordes.

260
00:13:05,570 --> 00:13:07,772
Il est juste classiquement
Le cas qui la plupart du temps

261
00:13:07,772 --> 00:13:10,230
quand vous écrivez JavaScript,
il suffit d'utiliser des guillemets simples.

262
00:13:10,230 --> 00:13:15,050
Mais je ne pouvais utiliser des guillemets ici, et
ce serait parfaitement bien ainsi.

263
00:13:15,050 --> 00:13:17,470
>> Alors rappelez-vous comment, dans
PHP nous avons eu cette notion

264
00:13:17,470 --> 00:13:22,730
d'un pour chaque boucle qui nous permettrait
pour parcourir la totalité de la valeur de la clé

265
00:13:22,730 --> 00:13:25,270
une paires de associatif
tableau, parce que nous

266
00:13:25,270 --> 00:13:29,050
ne pas avoir cette capacité à itérer
à 0, un, deux, trois, quatre,

267
00:13:29,050 --> 00:13:30,710
et ainsi de suite?

268
00:13:30,710 --> 00:13:35,010
JavaScript a quelque chose de très similaire,
mais il ne l'appelle pas un pour chaque boucle,

269
00:13:35,010 --> 00:13:38,960
on appelle ça un pour en boucles.

270
00:13:38,960 --> 00:13:42,890
Donc, si je l'ai dit à moi comme
ce, pour la clé var dans l'objet,

271
00:13:42,890 --> 00:13:48,670
qui est en quelque sorte similaire à dire
pour chaque quelque chose d'aussi quelque chose.

272
00:13:48,670 --> 00:13:53,850
Mais tout ce que je fais ici est l'itération
à travers toutes les touches de mon objet.

273
00:13:53,850 --> 00:13:56,070
Et à l'intérieur de l'bouclés
accolades là, je le ferais

274
00:13:56,070 --> 00:14:03,410
utiliser l'objet touche crochets de se référer
à la valeur à cet emplacement clé.

275
00:14:03,410 --> 00:14:05,400
>> Sinon, il ya
même une autre approche.

276
00:14:05,400 --> 00:14:10,880
Si je viens soucie seulement de la
les valeurs, je peux dire pour la clé de l'objet,

277
00:14:10,880 --> 00:14:12,360
et il suffit d'utiliser la clé à l'intérieur.

278
00:14:12,360 --> 00:14:17,240
Donc, pour la clé var dans l'objet, je dois
à utiliser objets supports de carrés

279
00:14:17,240 --> 00:14:19,340
clé à l'intérieur de la boucle.

280
00:14:19,340 --> 00:14:24,580
Pour la touche var d'objet, je peux
il suffit d'utiliser la clé à l'intérieur de la boucle,

281
00:14:24,580 --> 00:14:29,040
parce que je suis juste spécifiquement
parlant des valeurs là.

282
00:14:29,040 --> 00:14:32,630
>> Donc, nous allons peut-être prendre un
regardez la différence

283
00:14:32,630 --> 00:14:35,670
juste pour vous montrer rapidement
la différence entre quatre

284
00:14:35,670 --> 00:14:40,730
dans et pour de très spécifique avec un
tableau, que nous avons ici, la semaine tableau.

285
00:14:40,730 --> 00:14:43,616
Donc, je dois trouver un nouveau tableau
que je remplis à sept cordes,

286
00:14:43,616 --> 00:14:46,240
Lundi Mardi Mercredi,
Jeudi, vendredi, samedi, dimanche.

287
00:14:46,240 --> 00:14:50,530
Et je veux maintenant itérer
Grâce à cet éventail,

288
00:14:50,530 --> 00:14:53,090
imprimer certaines informations.

289
00:14:53,090 --> 00:14:58,780
Si je utiliser une boucle dans
pour imprimer des informations,

290
00:14:58,780 --> 00:15:00,710
qu'est-ce que vous pensez que je vais obtenir?

291
00:15:00,710 --> 00:15:01,710
Eh bien, nous allons jeter un coup d'oeil.

292
00:15:01,710 --> 00:15:05,300
Et avant de sauter sur
à ma fenêtre de navigateur,

293
00:15:05,300 --> 00:15:08,090
il suffit de savoir que
console.log est en quelque sorte d'un

294
00:15:08,090 --> 00:15:10,630
façon de faire une impression F en JavaScript.

295
00:15:10,630 --> 00:15:12,040
Mais quelle est la console?

296
00:15:12,040 --> 00:15:14,940
Eh bien, voilà ce que nous allons
d'aller jeter un oeil à ce moment.

297
00:15:14,940 --> 00:15:16,850
>> OK, donc nous sommes de retour ici
dans ma fenêtre de navigateur,

298
00:15:16,850 --> 00:15:19,410
et je vais ouvrir
mes outils de développement.

299
00:15:19,410 --> 00:15:22,290
Encore une fois, je suis juste frapper F12
d'ouvrir les outils de développement.

300
00:15:22,290 --> 00:15:25,670
Et remarquez qu'ici au
top Je ai choisi console.

301
00:15:25,670 --> 00:15:28,480
Donc ceci est la notion
d'une console de développeur,

302
00:15:28,480 --> 00:15:30,500
et il nous permettra de
imprimer des informations sur,

303
00:15:30,500 --> 00:15:33,000
un peu comme le terminal, mais
comme vous le verrez un peu plus tard,

304
00:15:33,000 --> 00:15:37,720
nous pouvons également saisir des informations dans
d'interagir avec notre page web.

305
00:15:37,720 --> 00:15:42,320
Je vais pour agrandir un peu ici,
et je vais cliquez maintenant sur au test.

306
00:15:42,320 --> 00:15:45,230
Et quatre test-- Je ne vais pas
vous montrer le code de ce moment,

307
00:15:45,230 --> 00:15:47,479
mais vous l'aurez si vous
télécharger le code source qui

308
00:15:47,479 --> 00:15:50,380
est associé à cette video--
est juste que dans la boucle

309
00:15:50,380 --> 00:15:52,610
que nous avons vu juste un
il ya la deuxième sur la diapositive.

310
00:15:52,610 --> 00:15:54,810
>> Donc, je vais clic qui
bouton, et ici,

311
00:15:54,810 --> 00:15:58,440
voici ce qui a imprimé dans le
console, 0, un, deux, trois, quatre, cinq,

312
00:15:58,440 --> 00:15:58,940
six.

313
00:15:58,940 --> 00:16:02,490
Je ne suis pas imprimer les informations
l'intérieur de ces lieux de tableau,

314
00:16:02,490 --> 00:16:05,180
parce que je utilisé un dans la boucle.

315
00:16:05,180 --> 00:16:10,670
Et à l'intérieur du corps de la boucle, je
vient d'être imprimée sur la touche pas objet clé.

316
00:16:10,670 --> 00:16:18,600
Mais si je clair maintenant ma console, et je
pour passer à l'essai, et quatre d'essai

317
00:16:18,600 --> 00:16:22,500
Je dis que je l'utilise pour de la boucle
la place et imprimer clé,

318
00:16:22,500 --> 00:16:28,079
si je clique que, maintenant, je suis en train de le
éléments réels à l'intérieur de mon objet

319
00:16:28,079 --> 00:16:29,120
ou mon tableau dans ce cas.

320
00:16:29,120 --> 00:16:31,760
Mon tableau des jours de la semaine.

321
00:16:31,760 --> 00:16:33,480
Je ai imprimé lundi
Mardi mercredi.

322
00:16:33,480 --> 00:16:36,930
Voilà donc la différence entre
une dans la boucle, qui imprime

323
00:16:36,930 --> 00:16:43,410
seulement les touches si vous utilisez tout simplement la clé
intérieur du corps de la boucle,

324
00:16:43,410 --> 00:16:46,850
et un pour la boucle, qui imprime
les valeurs si vous utilisez tout simplement

325
00:16:46,850 --> 00:16:48,870
clé à l'intérieur du corps de la boucle.

326
00:16:48,870 --> 00:16:52,380
>> Très bien, comment pouvons-nous commencer dès maintenant à
concaténer des chaînes et peut-être mélanger

327
00:16:52,380 --> 00:16:57,220
certaines variables avec interpolation
comme si nous étions en mesure de le faire en PHP?

328
00:16:57,220 --> 00:16:59,410
Eh bien, nous sommes assez familier
avec cette de PHP.

329
00:16:59,410 --> 00:17:04,109
Voilà comment nous pourrions le faire en utilisant le
opérateur point pour concaténer des chaînes.

330
00:17:04,109 --> 00:17:06,260
En JavaScript, cependant,
nous utilisons en fait quelque chose

331
00:17:06,260 --> 00:17:09,290
appelé l'opérateur de plus, qui
est peut-être même un peu plus

332
00:17:09,290 --> 00:17:10,470
intuitive, non?

333
00:17:10,470 --> 00:17:12,609
Nous ajoutons un tas
des chaînes ensemble.

334
00:17:12,609 --> 00:17:14,520
Donc, nous allons tête en arrière
encore et voir ce que cela

335
00:17:14,520 --> 00:17:18,693
imprimera si nous essayons d'imprimer
toutes les informations en matrice semaines.

336
00:17:18,693 --> 00:17:20,859
Tout droit, en vertu ici
en vertu de la concaténation de chaîne,

337
00:17:20,859 --> 00:17:24,822
Je dois deux options, le renforcement de la chaîne
V1 et V2 bâtiment de chaîne.

338
00:17:24,822 --> 00:17:26,530
Et nous allons voir pourquoi nous
besoin V2 dans une seconde.

339
00:17:26,530 --> 00:17:28,610
Mais je vais clique sur
bâtiment chaîne V1, qui

340
00:17:28,610 --> 00:17:30,360
est le code que nous étions
juste jeter un oeil à,

341
00:17:30,360 --> 00:17:32,980
l'console.log avec tous les avantages.

342
00:17:32,980 --> 00:17:35,910
Voyons si cette gravures
sur ce que nous attendons.

343
00:17:35,910 --> 00:17:39,939
>> Le lundi est le numéro du jour de la semaine 01,
Le mardi est jour numéro 11 de la semaine.

344
00:17:39,939 --> 00:17:41,730
Eh bien, ce que je tentais
à faire il était obtenir

345
00:17:41,730 --> 00:17:46,280
à imprimer lundi est le numéro du jour
l'un, le mardi est le numéro de deux jours.

346
00:17:46,280 --> 00:17:50,140
Mais il semble que je suis
toujours imprimant une.

347
00:17:50,140 --> 00:17:51,260
Eh bien, pourquoi est-ce?

348
00:17:51,260 --> 00:17:55,600
Eh bien, il se trouve, prendre un autre regard
à ce petit bout de code ici.

349
00:17:55,600 --> 00:18:00,160
Notez que nous utilisons le plus de
l'opérateur dans deux contextes différents.

350
00:18:00,160 --> 00:18:03,221
>> Et voici où peut-être les choses
que nous avons sorte de disons,

351
00:18:03,221 --> 00:18:03,970
oh, il est si grand.

352
00:18:03,970 --> 00:18:05,910
Nous ne traitons pas avec des types de données plus.

353
00:18:05,910 --> 00:18:08,220
Mais voici où le fait
que nous perdons des types de données

354
00:18:08,220 --> 00:18:10,960
peut effectivement être un peu
d'un problème pour nous.

355
00:18:10,960 --> 00:18:16,260
Maintenant que l'opérateur plus est utilisé pour
concaténer des chaînes et ajouter des numéros

356
00:18:16,260 --> 00:18:19,550
ensemble, JavaScript a
pour faire sa meilleure estimation

357
00:18:19,550 --> 00:18:22,030
à ce que je veux faire pour moi.

358
00:18:22,030 --> 00:18:23,900
Et dans ce cas, il devinait mal.

359
00:18:23,900 --> 00:18:29,340
Ce jour juste enchaîné, qui serait
0, un, deux, trois, quatre, cinq, ou six,

360
00:18:29,340 --> 00:18:32,060
et alors il a juste concaténer
que puis concaténées un.

361
00:18:32,060 --> 00:18:35,020
Il n'a pas fait ajouter leur ensemble.

362
00:18:35,020 --> 00:18:37,320
Et si ces langues,
PHP et JavaScript,

363
00:18:37,320 --> 00:18:39,196
qui fait abstraction
cette notion de types,

364
00:18:39,196 --> 00:18:40,820
vous ne devez pas traiter avec elle plus.

365
00:18:40,820 --> 00:18:43,600
Ils ne disposent toujours types sous le capot.

366
00:18:43,600 --> 00:18:46,780
Et nous pouvons, dans des situations
comme ça, tirer parti de ce fait

367
00:18:46,780 --> 00:18:49,240
en disant quelque chose
comme peut-être ce qui

368
00:18:49,240 --> 00:18:53,210
est révélateur JavaScript, par le
Ainsi, traiter cela comme un entier,

369
00:18:53,210 --> 00:18:57,100
ne pas le traiter comme une chaîne, même
si nous sommes mélangeant cordes

370
00:18:57,100 --> 00:18:58,940
et entiers ici.

371
00:18:58,940 --> 00:19:02,204
>> Il est juste une de ces choses
qu'il semble si grande dans le contexte

372
00:19:02,204 --> 00:19:04,120
que nous ne devons pas
traiter avec des types plus,

373
00:19:04,120 --> 00:19:05,828
mais parfois vous aurez
courir dans une situation

374
00:19:05,828 --> 00:19:09,110
exactement comme celui-ci où le fait que
vous ne disposez pas de contrôle sur les types

375
00:19:09,110 --> 00:19:11,220
peut se retourner contre vous
si vous ne faites pas attention.

376
00:19:11,220 --> 00:19:18,285
Et si nous y faire un saut vers IDE, je suis
aller à effacer ma console à nouveau,

377
00:19:18,285 --> 00:19:20,660
et je vais cliquez chaîne
Version bâtiment de deux, ce qui

378
00:19:20,660 --> 00:19:23,052
est où je utiliser cette fonction parse int.

379
00:19:23,052 --> 00:19:25,260
Maintenant, il est l'impression de
information que je attendre.

380
00:19:25,260 --> 00:19:29,330
Numéro du jour de l'une de lundi, mardi
est le numéro de deux jours, et ainsi de suite.

381
00:19:29,330 --> 00:19:31,170
>> Donc, nous allons parler de fonctions encore.

382
00:19:31,170 --> 00:19:34,790
Je l'ai promis que nous serions parler anonyme
fonctions, et maintenant le contexte pour que

383
00:19:34,790 --> 00:19:36,360
est enfin arrivé.

384
00:19:36,360 --> 00:19:39,980
Donc, avant de le faire, nous allons parler à nouveau
sur les tableaux pour juste une seconde.

385
00:19:39,980 --> 00:19:42,120
Donc, les tableaux sont une spéciale
cas d'un objet.

386
00:19:42,120 --> 00:19:45,180
En fait, tout dans
JavaScript est en fait un objet.

387
00:19:45,180 --> 00:19:47,190
Donc, les fonctions sont un
cas particulier d'un objet,

388
00:19:47,190 --> 00:19:49,770
entiers sont une spéciale
cas d'un objet,

389
00:19:49,770 --> 00:19:52,152
mais des tableaux spécifiquement
un certain nombre de méthodes.

390
00:19:52,152 --> 00:19:55,110
Rappelez-vous, car ils sont des objets,
ils peuvent avoir des propriétés et des méthodes.

391
00:19:55,110 --> 00:19:58,600
Ils ont un certain nombre de procédés que
peut être appliqué à ces objets.

392
00:19:58,600 --> 00:20:01,197
Il ya une méthode appelée
taille, array.size,

393
00:20:01,197 --> 00:20:03,030
qui sera de retour à
vous que vous pourriez vous attendre

394
00:20:03,030 --> 00:20:05,120
le nombre d'éléments dans votre tableau.

395
00:20:05,120 --> 00:20:08,480
Array.pop, un peu comme
notre notion de sautaient

396
00:20:08,480 --> 00:20:11,110
d'une pile, si vous vous souvenez
piles de notre vidéo,

397
00:20:11,110 --> 00:20:13,810
Supprime le dernier élément du tableau.

398
00:20:13,810 --> 00:20:17,110
Array.push ajoute un nouvel élément
à la fin d'un tableau.

399
00:20:17,110 --> 00:20:20,910
Array.shift est une sorte de
comme DQ, il épissures sur

400
00:20:20,910 --> 00:20:23,610
le premier élément d'un tableau.

401
00:20:23,610 --> 00:20:27,549
>> Mais il ya aussi une autre spéciale
méthode d'un tableau appelé carte.

402
00:20:27,549 --> 00:20:29,340
Et cela est une sorte de
concept intéressant.

403
00:20:29,340 --> 00:20:30,930
Alors, quelle est l'idée d'une carte?

404
00:20:30,930 --> 00:20:33,880
Vous allez vraiment voir cette
dans plusieurs autres langues,

405
00:20:33,880 --> 00:20:38,550
et nous ne parlons pas d'un
sorte de cartographes carte ici,

406
00:20:38,550 --> 00:20:41,480
nous parlons d'une fonction de cartographie.

407
00:20:41,480 --> 00:20:44,110
Dans le contexte que nous sommes
parlons ici, une carte

408
00:20:44,110 --> 00:20:47,950
est une opération spéciale de nous
peut effectuer sur un tableau

409
00:20:47,950 --> 00:20:51,630
d'appliquer une fonction particulière
à chaque élément de ce tableau.

410
00:20:51,630 --> 00:20:55,190
et ainsi nous dirions en
ce cas, peut-être Array.map,

411
00:20:55,190 --> 00:21:00,330
et à l'intérieur de celui-ci, nous passons
dans la carte est une fonction que nous voulons

412
00:21:00,330 --> 00:21:02,430
à appliquer à chaque élément.

413
00:21:02,430 --> 00:21:07,299
Donc, il est en quelque sorte analogue à l'utilisation
une boucle pour itérer sur tous les éléments

414
00:21:07,299 --> 00:21:09,340
et appliquer un particulier
fonctionner à chaque élément,

415
00:21:09,340 --> 00:21:14,830
juste JavaScript a construit dans cette
notion d'une application qui peut être appliquée.

416
00:21:14,830 --> 00:21:19,700
Et ceci est un grand contexte
parler d'une fonction anonyme.

417
00:21:19,700 --> 00:21:22,370
>> Alors disons que nous avons
ce tableau d'entiers.

418
00:21:22,370 --> 00:21:25,370
Il a appelé nums, et il a obtenu cinq
choses en elle, un, deux, trois, quatre,

419
00:21:25,370 --> 00:21:26,410
cinq.

420
00:21:26,410 --> 00:21:30,620
Maintenant, je veux un peu la carte
sur la fonction de ce tableau.

421
00:21:30,620 --> 00:21:34,337
Je veux avoir une fonction applique
pour chaque élément de la matrice.

422
00:21:34,337 --> 00:21:37,420
Eh bien, disons que ce que je veux
faire est de simplement doubler tous les éléments.

423
00:21:37,420 --> 00:21:42,520
Qu'est-ce que je pourrais faire est de simplement utiliser une boucle
pour var I est égale à 0, I est inférieur à

424
00:21:42,520 --> 00:21:47,390
ou égal à 4, Je plus, plus, et
puis doubler chaque numéro unique.

425
00:21:47,390 --> 00:21:49,580
Mais je peux aussi faire quelque chose comme ça.

426
00:21:49,580 --> 00:21:53,420
Je peux dire nums était autrefois
un deux trois Quatre cinq,

427
00:21:53,420 --> 00:21:58,310
maintenant, cependant, je voudrais que vous
appliquer une cartographie sur ce tableau

428
00:21:58,310 --> 00:22:00,400
où je voudrais que vous
à doubler chaque numéro.

429
00:22:00,400 --> 00:22:02,540
Et cela est exactement
Qu'est-ce qu'il se passe ici.

430
00:22:02,540 --> 00:22:06,870
Mais ce que je remarque en passant
en tant qu'argument de la carte.

431
00:22:06,870 --> 00:22:09,080
Ceci est une fonction anonyme.

432
00:22:09,080 --> 00:22:11,140
Et notez que je ne l'ai pas donnée
cette fonction un nom,

433
00:22:11,140 --> 00:22:13,290
Je ne l'ai donné une liste de paramètres.

434
00:22:13,290 --> 00:22:16,370
Et ceci est un exemple
d'une fonction anonyme.

435
00:22:16,370 --> 00:22:21,270
>> Nous serions généralement jamais appeler cette
fonction en dehors du contexte de la carte.

436
00:22:21,270 --> 00:22:24,110
Nous définissant comme un paramètre
à la carte, et donc nous ne sont pas vraiment

437
00:22:24,110 --> 00:22:27,910
besoin d'avoir un nom pour elle si le
seule chose qui se soucie est la carte

438
00:22:27,910 --> 00:22:30,339
et il est défini droit
là à l'intérieur de la carte.

439
00:22:30,339 --> 00:22:31,880
Et donc cela est une fonction anonyme.

440
00:22:31,880 --> 00:22:34,680
Nous avons pas été en mesure
pour ce faire auparavant.

441
00:22:34,680 --> 00:22:38,400
Carte Quelques fonction
accepte un paramètre, num,

442
00:22:38,400 --> 00:22:41,890
et ce que cette fonction ne
est rendements NUM fois 2.

443
00:22:41,890 --> 00:22:45,330
Et donc après cette
cartographie a été appliquée,

444
00:22:45,330 --> 00:22:50,090
cela est maintenant ce nums regards
comme, deux, quatre, six, huit, 10.

445
00:22:50,090 --> 00:22:52,090
Et nous crevons à mon
fenêtre de navigateur et juste

446
00:22:52,090 --> 00:22:55,240
regarde ça
très rapidement ainsi.

447
00:22:55,240 --> 00:22:58,000
>> Je dois donc un autre bouton ici
dans ma page d'accueil appelée double.

448
00:22:58,000 --> 00:23:03,570
Et quand je clique double, et il raconte
moi avant il était un, deux, trois, quatre,

449
00:23:03,570 --> 00:23:07,250
cinq après deux, quatre, six, huit, 10.

450
00:23:07,250 --> 00:23:11,930
Et si je reviens en arrière et double-clic
encore une fois, deux, quatre, six, huit, 10.

451
00:23:11,930 --> 00:23:17,400
Et puis après, quatre,
huit, 12, 16, puis 20.

452
00:23:17,400 --> 00:23:20,440
Et ce que je fais dans cette fonction?

453
00:23:20,440 --> 00:23:25,210
Eh bien, si nous pop un peu plus d'IDE, et
Je tire ma fonction anonyme, ici

454
00:23:25,210 --> 00:23:28,780
sur la ligne de sept à 13 ans, je suis
faire une œuvre de fantaisie petit peu ici,

455
00:23:28,780 --> 00:23:32,240
mais je suis juste imprimer
ce qui est actuellement dans le tableau.

456
00:23:32,240 --> 00:23:36,580
Ensuite, sur la ligne 16, 17,
et 18, il est mon plan.

457
00:23:36,580 --> 00:23:40,930
Ceci est où je vais appliquer ce doublement
fonction pour chaque élément.

458
00:23:40,930 --> 00:23:43,530
Et puis, un peu plus bas,
Je suis juste faire la même chose

459
00:23:43,530 --> 00:23:46,640
Je faisais avant, sauf que maintenant je suis
imprimer le contenu de la matrice

460
00:23:46,640 --> 00:23:48,167
après.

461
00:23:48,167 --> 00:23:50,500
Mais tout ce que je l'ai fait ici est
il suffit d'utiliser une fonction anonyme

462
00:23:50,500 --> 00:23:53,640
à la carte à travers un tableau entier.

463
00:23:53,640 --> 00:23:58,466
>> Donc, un de plus grand sujet pour parler en
JavaScript est la notion d'un événement.

464
00:23:58,466 --> 00:24:01,590
Un événement est quelque chose qui arrive
lorsqu'un utilisateur interagit avec votre web

465
00:24:01,590 --> 00:24:04,715
page, donc peut-être qu'ils cliquez sur quelque chose,
ou peut-être que la page est fini de charger,

466
00:24:04,715 --> 00:24:07,200
ou peut-être qu'ils ont déménagé
leur souris sur quelque chose,

467
00:24:07,200 --> 00:24:09,290
ou ils ont tapé quelque chose
dans un champ d'entrée.

468
00:24:09,290 --> 00:24:14,260
Toutes ces choses sont des événements
qui se produisent sur notre page web.

469
00:24:14,260 --> 00:24:17,460
Et JavaScript a le
la capacité à soutenir quelque chose

470
00:24:17,460 --> 00:24:21,760
appelé un gestionnaire d'événements, qui
est une fonction de rappel qui

471
00:24:21,760 --> 00:24:23,329
répond à un événement html.

472
00:24:23,329 --> 00:24:24,620
Et ce qui est une fonction de rappel?

473
00:24:24,620 --> 00:24:27,328
Eh bien, il est généralement juste un autre
nom pour une fonction anonyme.

474
00:24:27,328 --> 00:24:30,170
Il est une fonction qui
répond à un événement.

475
00:24:30,170 --> 00:24:34,130
Et voilà où nous en arrivons à la
idée de certaines fonctions de liaison

476
00:24:34,130 --> 00:24:38,060
à un attribut HTML particulier.

477
00:24:38,060 --> 00:24:41,420
La plupart des éléments HTML ont
soutien pour un attribut

478
00:24:41,420 --> 00:24:45,170
que nous ne parlions pas dans le html
vidéo pour quelque chose comme le clic

479
00:24:45,170 --> 00:24:50,540
ou sur le vol stationnaire ou sur la charge,
tous ces événements

480
00:24:50,540 --> 00:24:53,120
que vous pouvez ensuite écrire des fonctions
qui traitent de ces événements

481
00:24:53,120 --> 00:24:56,090
lorsque ces événements
se produire sur votre page web.

482
00:24:56,090 --> 00:24:59,170
>> Et alors peut-être votre html
ressemble à quelque chose comme ça.

483
00:24:59,170 --> 00:25:02,240
Et je dois ici deux boutons,
un bouton et deux boutons,

484
00:25:02,240 --> 00:25:04,620
et ici je dois actuellement
rien de défini,

485
00:25:04,620 --> 00:25:11,170
mais cela est où l'attribut sur
clic est apparemment partie de ma balise html.

486
00:25:11,170 --> 00:25:15,220
Donc, apparemment, lorsque je définis ce qui est
passe à l'intérieur de cet attribut,

487
00:25:15,220 --> 00:25:18,590
ça va être un peu de JavaScript
fonction qui répond à l'événement

488
00:25:18,590 --> 00:25:24,360
vraisemblablement de cliquer sur
touche un ou deux boutons.

489
00:25:24,360 --> 00:25:28,580
>> Ce qui est plutôt cool à ce sujet est que nous
peuvent écrire un gestionnaire d'événement générique.

490
00:25:28,580 --> 00:25:32,370
Et cet événement manieur
créer un objet de l'événement.

491
00:25:32,370 --> 00:25:37,000
Et l'objet d'événement va nous dire
lequel des deux boutons a cliqué.

492
00:25:37,000 --> 00:25:38,064
Maintenant, comment ça marche?

493
00:25:38,064 --> 00:25:39,730
Eh bien, il pourrait ressembler à ceci.

494
00:25:39,730 --> 00:25:44,860
Donc, nous allons d'abord définir nos boutons
d'avoir une réponse à la fonction de rappel

495
00:25:44,860 --> 00:25:47,470
fonction qui sera appelé
lorsque le bouton est cliqué,

496
00:25:47,470 --> 00:25:49,520
nous appelons événement nom d'alerte.

497
00:25:49,520 --> 00:25:53,320
Et remarquez dans les deux cas nous sommes
passer dans ce paramètre d'événement.

498
00:25:53,320 --> 00:25:55,460
Donc, nous appelons cette fonction
ou lorsque cette fonction

499
00:25:55,460 --> 00:26:00,330
est déclenchée par l'événement se produit,
ça va pour créer cet objet de l'événement

500
00:26:00,330 --> 00:26:03,300
et de le transmettre comme un
paramètre Nom de l'alerte.

501
00:26:03,300 --> 00:26:07,270
Et cet objet de l'événement est
va contenir des informations

502
00:26:07,270 --> 00:26:09,800
à propos de quel bouton a été cliqué.

503
00:26:09,800 --> 00:26:11,580
Et comment fait-elle cela?

504
00:26:11,580 --> 00:26:13,654
Eh bien, il pourrait ressembler à ceci.

505
00:26:13,654 --> 00:26:15,570
Alors maintenant, dans mon séparée
Fichier JavaScript, je pourrais

506
00:26:15,570 --> 00:26:17,420
devoir trouver ce
Nom de la fonction d'alerte, qui

507
00:26:17,420 --> 00:26:19,500
accepte à nouveau ce paramètre de l'événement.

508
00:26:19,500 --> 00:26:24,640
Et puis voici où je détection
quel bouton a été déclenché,

509
00:26:24,640 --> 00:26:28,100
var déclencheur est égal événement
dot élément source.

510
00:26:28,100 --> 00:26:33,150
Quelle était la source qui a créé
cet objet événement qui a été adoptée en?

511
00:26:33,150 --> 00:26:36,390
Était-ce un bouton ou était-ce bouton à deux?

512
00:26:36,390 --> 00:26:40,710
>> Et puis ici, tout ce que je fais est
imprimer trigger.innerhtml.

513
00:26:40,710 --> 00:26:43,860
Eh bien, dans ce cas, dans ce
contexte, trigger.innerhtml

514
00:26:43,860 --> 00:26:45,940
est tout simplement ce qui est écrit sur le bouton.

515
00:26:45,940 --> 00:26:48,830
Il se trouve si nous sautons
retour pour une deuxième, qui serait

516
00:26:48,830 --> 00:26:51,670
être ce qui est entre les balises de bouton.

517
00:26:51,670 --> 00:26:54,150
Ce sera un bouton ou deux boutons.

518
00:26:54,150 --> 00:26:57,320
Et nous allons jeter un oeil à
comment ce gestionnaire d'événement serait

519
00:26:57,320 --> 00:27:01,080
regarder si nous l'avions en cours d'exécution dans la pratique.

520
00:27:01,080 --> 00:27:03,850
>> Alors tout d'abord, vous avez
ouvertes events.js,

521
00:27:03,850 --> 00:27:06,517
qui est le fichier JavaScript où
Je l'ai défini cette fonction.

522
00:27:06,517 --> 00:27:08,558
Et comme vous pouvez le voir, il est
à peu près exactement ce que

523
00:27:08,558 --> 00:27:10,230
nous venons de voir sur la diapositive il ya une seconde.

524
00:27:10,230 --> 00:27:14,890
Et je vais aller sur le
page d'accueil que nous utilisons.

525
00:27:14,890 --> 00:27:17,660
Et je dois ici touche
un et deux boutons.

526
00:27:17,660 --> 00:27:19,820
Et je clique sur un bouton.

527
00:27:19,820 --> 00:27:23,930
Vous avez cliqué sur un bouton, si vous
peut voir ici dans l'alerte.

528
00:27:23,930 --> 00:27:25,810
D'ACCORD.

529
00:27:25,810 --> 00:27:28,980
Cliquez sur le bouton deux, vous
cliqué sur un bouton deux.

530
00:27:28,980 --> 00:27:32,150
>> Donc, les deux boutons ont la
même appel de fonction, non?

531
00:27:32,150 --> 00:27:35,840
Ils étaient tous les deux nom d'alerte
événement, mais cet objet événement

532
00:27:35,840 --> 00:27:41,900
qui est créé lorsque l'on clique sur
il nous indique quel bouton a été cliqué.

533
00:27:41,900 --> 00:27:44,650
Nous ne devons écrire deux séparés
fonctions ou de traiter avec avoir

534
00:27:44,650 --> 00:27:46,470
de passer toute information supplémentaire.

535
00:27:46,470 --> 00:27:48,220
Nous sommes en train de compter sur
ce qui en JavaScript

536
00:27:48,220 --> 00:27:53,772
faire pour nous, ce qui est de créer ce que
sorte d'objet d'événement en notre nom.

537
00:27:53,772 --> 00:27:56,730
Il ya beaucoup plus à de JavaScript
ce que nous avons couvert dans cette vidéo,

538
00:27:56,730 --> 00:27:58,521
mais ceux-ci comportant
fondamentale vous devriez

539
00:27:58,521 --> 00:28:00,690
un temps assez long façons de
l'apprentissage tout vous

540
00:28:00,690 --> 00:28:04,030
besoin de savoir à ce sujet
langue intéressant.

541
00:28:04,030 --> 00:28:05,000
Je suis Doug Lloyd.

542
00:28:05,000 --> 00:28:07,010
Ceci est CS50.

543
00:28:07,010 --> 00:28:09,181