1
00:00:00,000 --> 00:00:10,632

2
00:00:10,632 --> 00:00:12,340
ALLISON BUCHHOLTZ-UA:
Tous droits tout le monde.

3
00:00:12,340 --> 00:00:13,520
Bienvenue à la section.

4
00:00:13,520 --> 00:00:15,315
Ce est notre avant-dernière section.

5
00:00:15,315 --> 00:00:16,542
Ce est tellement triste.

6
00:00:16,542 --> 00:00:19,500
Je ne sais pas ce que je vais faire
sans vous voir les gars tous les lundis.

7
00:00:19,500 --> 00:00:20,970
Je suppose que nous devrions just--
nous pourrions simplement

8
00:00:20,970 --> 00:00:22,710
rencontrer ici et dîner ou quelque chose.

9
00:00:22,710 --> 00:00:23,270
Je ne sais pas.

10
00:00:23,270 --> 00:00:24,370
Je vais apporter la nourriture à la place.

11
00:00:24,370 --> 00:00:26,290
Nous allons parler.

12
00:00:26,290 --> 00:00:29,900
Mais oui, la semaine prochaine
être notre dernière section.

13
00:00:29,900 --> 00:00:32,390
>> Sur cette note, vous avez un quiz de la semaine prochaine.

14
00:00:32,390 --> 00:00:35,660
Je sais que je ai oublié de faire mon, comme,
deux semaines de préavis, la semaine dernière,

15
00:00:35,660 --> 00:00:39,140
Mais je espère que vous les gars
savait ce qui se préparait.

16
00:00:39,140 --> 00:00:42,880
Espérons que ce est l'un des derniers
mi-session pour vous les gars pour le semestre.

17
00:00:42,880 --> 00:00:46,950
Mais il va couvrir toute la
matériel que nous avons dépassé.

18
00:00:46,950 --> 00:00:50,811
Donc, ce ne est pas comme vous pouvez simplement oublier
environ quatre boucles ou variables.

19
00:00:50,811 --> 00:00:52,560
Parce que nous avons appris
ceux au début,

20
00:00:52,560 --> 00:00:55,870
ceux qui sont évidemment
jeu juste pour votre quiz.

21
00:00:55,870 --> 00:01:00,150
>> Ça va être le même format, même
longueur, alors vous êtes déjà habitué.

22
00:01:00,150 --> 00:01:02,330
Il va y avoir
codage par des problèmes de main,

23
00:01:02,330 --> 00:01:06,270
peut-être un vrai faux,
peut-être certains réponse courte.

24
00:01:06,270 --> 00:01:08,090
Donc, vous devriez être
familiariser avec le format,

25
00:01:08,090 --> 00:01:10,940
surtout si vous prenez
les tests pratiques.

26
00:01:10,940 --> 00:01:13,950
Mais comme je le dis ici, ce est
cumulatif, mais nous sommes définitivement

27
00:01:13,950 --> 00:01:17,410
va se concentrer sur
choses de six semaines avant.

28
00:01:17,410 --> 00:01:24,050
Donc, nous ne allons probablement pas
de vous poser des questions sur le nombre d'octets

29
00:01:24,050 --> 00:01:26,180
sont chaque type ou
ces sortes de choses,

30
00:01:26,180 --> 00:01:29,730
mais nous allons probablement être
intéressé par des choses comme les listes chaînées,

31
00:01:29,730 --> 00:01:32,750
ou des structures de données,
ou des algorithmes différents

32
00:01:32,750 --> 00:01:33,960
que nous avons parlé.

33
00:01:33,960 --> 00:01:38,990
Donc, assurez-vous que vous êtes vraiment
sur ceux-ci, et si vous

34
00:01:38,990 --> 00:01:41,590
besoin de toutes les ressources,
voici beaucoup de ressources.

35
00:01:41,590 --> 00:01:44,790
Je viens de vous donner genre
d'une liste rapide là-bas.

36
00:01:44,790 --> 00:01:48,330
>> La semaine prochaine sera quizz
examiner pendant ce temps.

37
00:01:48,330 --> 00:01:52,290
Donc, si vous avez des questions
ou des sujets spécifiques,

38
00:01:52,290 --> 00:01:56,180
choses spécifiques sur le quiz qui
vous souhaitez aller sur, se il vous plaît

39
00:01:56,180 --> 00:02:01,780
me les envoyer à l'avance afin que je puisse
sorte de préparer du matériel pour cela.

40
00:02:01,780 --> 00:02:06,310
Et en plus de cela
section examen, nous allons

41
00:02:06,310 --> 00:02:09,616
également la tenue du cours à l'échelle
revue comme nous l'avons fait la dernière fois.

42
00:02:09,616 --> 00:02:11,490
Et il va être
fait par les mêmes personnes.

43
00:02:11,490 --> 00:02:13,030
Je ne sais pas si ce
rend meilleur ou le pire,

44
00:02:13,030 --> 00:02:15,670
mais ça va être moi,
Hannah, Davan, et Gabe nouveau.

45
00:02:15,670 --> 00:02:18,630
Donc, si vous voulez venir voir
nous tous plaisanteries avec l'autre

46
00:02:18,630 --> 00:02:21,270
et vous guidera à travers quizz
examen, vous devriez certainement

47
00:02:21,270 --> 00:02:22,600
venir à la prochaine lundi également.

48
00:02:22,600 --> 00:02:26,210
Donc, vous aurez juste un bourrage lundi
emballé d'examen quiz, ce qui est bon

49
00:02:26,210 --> 00:02:29,840
car alors vous avez mardi
à traiter à travers tout.

50
00:02:29,840 --> 00:02:32,230
>> Mais certainement faire vérifier
ces ressources.

51
00:02:32,230 --> 00:02:36,030
Study.csv.net est de loin, je
penser, l'un des plus utiles,

52
00:02:36,030 --> 00:02:37,990
surtout parce qu'il a
beaucoup de code de l'échantillon,

53
00:02:37,990 --> 00:02:40,490
il a tous les points d'alimentation
avec toutes les notes sur elle,

54
00:02:40,490 --> 00:02:44,510
qui sont vraiment ce que je dessine plus
de mes matériaux de section.

55
00:02:44,510 --> 00:02:47,480
Si il ya quelque chose dans le précédent
sections que je ai envoyés

56
00:02:47,480 --> 00:02:49,920
que vous ne pouvez pas avoir
obtenu, faites le moi savoir.

57
00:02:49,920 --> 00:02:52,520
Comme l'exemple de code de la semaine dernière,
si quelqu'un n'a pas obtenu que,

58
00:02:52,520 --> 00:02:55,930
envoyez-juste moi ou venir me parler,
et je vais me assurer que vous obtenez cela.

59
00:02:55,930 --> 00:03:02,000
>> Donc, avec cela, aujourd'hui, nous allons
être parler de JavaScript.

60
00:03:02,000 --> 00:03:04,690
Nous voici donc Tommy, qui je étais
juste parler de vous la nuit dernière.

61
00:03:04,690 --> 00:03:06,670
Je aime Tommy.

62
00:03:06,670 --> 00:03:09,040
JavaScript est son favori
la langue, comme il le dit ici.

63
00:03:09,040 --> 00:03:14,050
Ils vont essayer et vous dire que ce est
pas le meilleur, et ils seront mauvais.

64
00:03:14,050 --> 00:03:16,510
Alors Tommy est un maître JavaScript.

65
00:03:16,510 --> 00:03:19,850
Je ne suis pas tout à fait à son
niveau, mais je étais comme,

66
00:03:19,850 --> 00:03:22,900
«Tommy, comment puis-je enseigner
ces enfants javascript? "

67
00:03:22,900 --> 00:03:26,700
Alors, je ai quelques conseils, afin
je espère qu'ils travaillent sur.

68
00:03:26,700 --> 00:03:31,140
>> Ainsi, un couple de choses à savoir est que
JavaScript est un script côté client

69
00:03:31,140 --> 00:03:35,560
la langue, de sorte que PHP est quelque chose
que nous considérions plus côté serveur,

70
00:03:35,560 --> 00:03:39,280
il a été télécharger vers le serveur,
compilé et il exécuté.

71
00:03:39,280 --> 00:03:42,871
Celui-ci est exécutée
sur votre propre machine.

72
00:03:42,871 --> 00:03:43,370
D'ACCORD?

73
00:03:43,370 --> 00:03:46,960
Donc vous chargez certaines pages JavaScript,
et il se exécute sur votre machine.

74
00:03:46,960 --> 00:03:49,910
La syntaxe est très similaire à C et PHP.

75
00:03:49,910 --> 00:03:52,490
Nous allons passer par
quelques exemples de JavaScript,

76
00:03:52,490 --> 00:03:56,740
et vous allez voir que le
façon dont nous parlons sur les variables, les boucles,

77
00:03:56,740 --> 00:03:58,910
et les conditions sont très similaires.

78
00:03:58,910 --> 00:04:00,500
D'ACCORD?

79
00:04:00,500 --> 00:04:04,490
Le fait qu'ils sont si semblables est
va probablement déclencher certains d'entre vous

80
00:04:04,490 --> 00:04:08,529
jusqu'à, dans certains cas, simplement parce
vous incorporez un peu de C

81
00:04:08,529 --> 00:04:09,570
où il ne devrait pas être.

82
00:04:09,570 --> 00:04:14,130
Peut-être que vous essayez et tapez quelque chose
quand il ne doit pas être tapé.

83
00:04:14,130 --> 00:04:16,540
>> Et à ce sujet, une chose à
savoir est que JavaScript

84
00:04:16,540 --> 00:04:19,360
est typé dynamiquement
la langue, comme PHP.

85
00:04:19,360 --> 00:04:21,410
Donc, si vous les gars me souviens
de la section la semaine dernière,

86
00:04:21,410 --> 00:04:23,680
quand nous étions sorte de faire
notre cours accéléré de PHP,

87
00:04:23,680 --> 00:04:28,860
nous avons vu comment une une chaîne pourrait être
transformé en un int, et ainsi de suite.

88
00:04:28,860 --> 00:04:31,650

89
00:04:31,650 --> 00:04:34,850
Le type de vos variables
sont déterminés au moment de l'exécution,

90
00:04:34,850 --> 00:04:38,180
donc ils peuvent changer au fil
le déroulement du programme,

91
00:04:38,180 --> 00:04:43,109
et de la même manière que nous ne avons jamais
vraiment déclarer des types pour les variables PHP,

92
00:04:43,109 --> 00:04:45,900
nous allons faire la même
chose ici, où nous ne sommes pas vraiment

93
00:04:45,900 --> 00:04:49,740
commander les types de nos variables,
pour ainsi dire, comme nous le faisons en C.

94
00:04:49,740 --> 00:04:52,200
>> Et puis une chose
ce est assez cool est

95
00:04:52,200 --> 00:04:54,090
que vous pouvez l'erreur
vérifier via la console,

96
00:04:54,090 --> 00:04:57,240
avec cette grande fonction
console.log, qui

97
00:04:57,240 --> 00:05:00,930
vous permet d'imprimer sur différents
variables ou objets que nous allons

98
00:05:00,930 --> 00:05:01,750
parler.

99
00:05:01,750 --> 00:05:05,720
Tout comme la semaine dernière quand je étais
comme, "utiliser cette fonction," avec dump

100
00:05:05,720 --> 00:05:10,490
à partir de votre pset ce est une fonction
vous souhaitez utiliser, console.log.

101
00:05:10,490 --> 00:05:12,860
Je étais tellement surpris du nombre de
étudiants aux heures de bureau

102
00:05:12,860 --> 00:05:14,530
ne savait pas sur la fonction de vidage.

103
00:05:14,530 --> 00:05:19,010
Et je étais comme, "les gars, cette volonté
vous rendre la vie tellement plus facile. "

104
00:05:19,010 --> 00:05:22,960
>> Très bien, donc ce était genre de
juste une brève chose, comme toujours,

105
00:05:22,960 --> 00:05:24,000
nous avons des exemples.

106
00:05:24,000 --> 00:05:25,600
Je sais que vous les gars aiment ceux.

107
00:05:25,600 --> 00:05:30,930
Alors, voici un exemple d'une très
simple fichier JavaScript ici.

108
00:05:30,930 --> 00:05:34,000
Donc, il va juste pour créer
ce pop-up qui dit,

109
00:05:34,000 --> 00:05:36,336
"Bonjour monde," lorsque vous
accéder à la page, mais de laisser

110
00:05:36,336 --> 00:05:37,960
essayer de marcher à travers un peu cette question.

111
00:05:37,960 --> 00:05:43,440
Alors, évidemment, ce est juste
comme votre index.html normale.

112
00:05:43,440 --> 00:05:50,280
Donc, seulement notre modèle normal ici,
et nous avons HTML, nous avons notre tête,

113
00:05:50,280 --> 00:05:55,580
et tout comme avec CSS, comment nous
inclus certains fichier en dehors, non?

114
00:05:55,580 --> 00:05:59,260
Nous avons un certain type de script
texte qui est JavaScript.

115
00:05:59,260 --> 00:06:02,680
Et la source est hello.js,
qui est ici-bas.

116
00:06:02,680 --> 00:06:05,630
Ce est l'ensemble du dossier de hello.js.

117
00:06:05,630 --> 00:06:09,080
Et puis nous avons une certaine
titre et un corps HTML

118
00:06:09,080 --> 00:06:11,050
que nous ne nous soucions pas vraiment.

119
00:06:11,050 --> 00:06:15,970
>> Ce qui se passe est que, quand nous chargeons cette page,
il exécute automatiquement ce script.

120
00:06:15,970 --> 00:06:16,470
D'ACCORD?

121
00:06:16,470 --> 00:06:18,790
Donc en JavaScript
exécuter automatiquement.

122
00:06:18,790 --> 00:06:22,860
Donc, ce qu'il va faire, ça va
à se rendre immédiatement et exécuter cette.

123
00:06:22,860 --> 00:06:24,110
Et il va dire, "alerte.

124
00:06:24,110 --> 00:06:25,190
Bonjour le monde. "

125
00:06:25,190 --> 00:06:30,840
Quelle est la fonction d'alerte qui
génère effectivement cette case.

126
00:06:30,840 --> 00:06:31,540
D'ACCORD?

127
00:06:31,540 --> 00:06:33,390
Donc, ce est un peu à tous les englober.

128
00:06:33,390 --> 00:06:36,700
Il n'y a rien de plus nous avons eu
à faire que de simplement alerte,

129
00:06:36,700 --> 00:06:40,000
puis tout ce que nous voulions
au sein de notre zone d'alerte.

130
00:06:40,000 --> 00:06:40,500
D'ACCORD?

131
00:06:40,500 --> 00:06:45,080
Donc, ce est juste un super simple
exemple de ce que peut faire le JavaScript.

132
00:06:45,080 --> 00:06:48,110

133
00:06:48,110 --> 00:06:50,070
>> L'un des vraiment cool
les choses, comme nous le verrons,

134
00:06:50,070 --> 00:06:55,150
est que JavaScript vous permet
de manipuler vos pages web,

135
00:06:55,150 --> 00:06:57,720
sans avoir à
les recharger à chaque fois.

136
00:06:57,720 --> 00:07:01,830
Donc, si vous want-- par exemple, si
vous passer la souris sur quelque chose,

137
00:07:01,830 --> 00:07:04,300
si vous les gars ont jamais
vu comme des barres de menu,

138
00:07:04,300 --> 00:07:07,360
ou lorsque vous survolez une certaine
sujet, un menu déroulant apparaît,

139
00:07:07,360 --> 00:07:08,670
ce est parce que de JavaScript.

140
00:07:08,670 --> 00:07:09,170
D'ACCORD?

141
00:07:09,170 --> 00:07:12,670
Donc vous n'êtes pas recharger l'ensemble
la page pour obtenir ce menu pour montrer,

142
00:07:12,670 --> 00:07:17,240
vous cherchez juste pour certains spécifiques
l'action que l'utilisateur a pris,

143
00:07:17,240 --> 00:07:21,800
qui sont appelés événements que nous aurons
dans, et une fois que vous voyez cela, vous dites,

144
00:07:21,800 --> 00:07:25,960
"OK, modifier quelque chose sur ce
page et la rendre un aspect différent,

145
00:07:25,960 --> 00:07:28,270
mais seulement modifier ces choses spécifiques.

146
00:07:28,270 --> 00:07:29,690
Ne pas recharger le tout ".

147
00:07:29,690 --> 00:07:33,110
Donc, ce est en réalité beaucoup plus agréable, et
vous ne avez pas de recharger vos pages,

148
00:07:33,110 --> 00:07:34,510
et ce est vraiment cool.

149
00:07:34,510 --> 00:07:38,270
>> Donc déclarations variables,
de sorte que vous pouvez sorte de le voir,

150
00:07:38,270 --> 00:07:40,530
Je ai mis ici sur le dessus, faiblement typé.

151
00:07:40,530 --> 00:07:42,570
Donc, ce est très bien comme PHP.

152
00:07:42,570 --> 00:07:48,770
Nous ne avons pas besoin de dire
JavaScript quel type nous sommes

153
00:07:48,770 --> 00:07:50,740
attendant chacune de ces variables soit.

154
00:07:50,740 --> 00:07:52,560
Ils peuvent être tout ce que nous voulons types.

155
00:07:52,560 --> 00:07:57,480
Donc, vous remarquez dans ce cas, nous déclarons
les très simplement, juste avec "var"

156
00:07:57,480 --> 00:08:00,990
puis ce que nous voulons
notre nom variable soit.

157
00:08:00,990 --> 00:08:05,680
Une chose à noter est que lorsque vous
var mis en face d'un nom de variable,

158
00:08:05,680 --> 00:08:07,520
il étendues localement, il.

159
00:08:07,520 --> 00:08:09,320
D'ACCORD?

160
00:08:09,320 --> 00:08:14,025
Ce est tout à fait raisonnable pour vous
complètement simplement effacer le var

161
00:08:14,025 --> 00:08:18,970
et je viens de s est égal CS50, et
ce serait juste être une variable globale.

162
00:08:18,970 --> 00:08:19,580
D'ACCORD?

163
00:08:19,580 --> 00:08:22,490
Ainsi, vous pouvez initialiser les deux sens,
dépend juste de comment vous le voulez.

164
00:08:22,490 --> 00:08:24,448
Donc, si vous initialisation
il dans une fonction,

165
00:08:24,448 --> 00:08:28,070
et vous voulez que variable
scope rester au sein de cette fonction,

166
00:08:28,070 --> 00:08:31,620
vous allez avoir à faire
quelque chose comme var nommer une variable,

167
00:08:31,620 --> 00:08:34,270
contre si vous le voulez
SCOPED globalement, vous

168
00:08:34,270 --> 00:08:36,240
peut juste faire le nom de
la variable, puis

169
00:08:36,240 --> 00:08:38,270
tout ce que vous souhaitez qu'il égal à.

170
00:08:38,270 --> 00:08:40,230
D'ACCORD?

171
00:08:40,230 --> 00:08:45,580
>> Ce est le genre de truc cool, ici-bas,
parce que si nous remarquons notre variable

172
00:08:45,580 --> 00:08:47,590
b commence comme vrai.

173
00:08:47,590 --> 00:08:51,280
Et ce que cela peut does--
il me dire ce que cela fait?

174
00:08:51,280 --> 00:08:54,190

175
00:08:54,190 --> 00:08:55,890
Donc, nous avons une certaine alerte.

176
00:08:55,890 --> 00:09:00,156
Quel serait le type de b
être dans le début?

177
00:09:00,156 --> 00:09:00,905
AUDIENCE: Boolean.

178
00:09:00,905 --> 00:09:01,330
ALLISON BUCHHOLTZ-UA: Boolean.

179
00:09:01,330 --> 00:09:01,940
Droite.

180
00:09:01,940 --> 00:09:07,260
Et puis nous réaffectons b
à cette chaîne, non?

181
00:09:07,260 --> 00:09:11,170
Alors ici, ce type de b être?

182
00:09:11,170 --> 00:09:12,480
Ce serait une chaîne, non?

183
00:09:12,480 --> 00:09:14,900
Donc, ce est important de
avis est que dans c, nous

184
00:09:14,900 --> 00:09:17,330
pourrait presque jamais faire
quelque chose comme ça.

185
00:09:17,330 --> 00:09:22,000
Nous aimerions avoir une variable,
jeté comme quelque chose d'autre,

186
00:09:22,000 --> 00:09:27,185
peut-être faire un peu de fonction avec deux
i, vais partir d'une charge d'un nombre entier.

187
00:09:27,185 --> 00:09:31,063
Mais si nous remarquons ici, b
très facilement tapez change.

188
00:09:31,063 --> 00:09:33,760
>> AUDIENCE: Patientez, de sorte que vous pouvez juste
être comme, «faire b un entier?"

189
00:09:33,760 --> 00:09:34,360
>> ALLISON BUCHHOLTZ-UA: Ouais.

190
00:09:34,360 --> 00:09:36,185
Vous pouvez simplement réaffecter b pour un entier.

191
00:09:36,185 --> 00:09:36,910
>> AUDIENCE: Vraiment?

192
00:09:36,910 --> 00:09:38,035
>> ALLISON BUCHHOLTZ-UA: Ouais.

193
00:09:38,035 --> 00:09:39,810
Et puis ce serait un int.

194
00:09:39,810 --> 00:09:43,820
Ainsi, vos variables peuvent changer au fil du
le déroulement du programme aussi.

195
00:09:43,820 --> 00:09:46,410
Ils ne sont pas strictement typés.

196
00:09:46,410 --> 00:09:49,180
Il est très faiblement typé.

197
00:09:49,180 --> 00:09:50,820
D'ACCORD?

198
00:09:50,820 --> 00:09:54,820
Fondamentalement vos variables peuvent faire ce
ils veulent, comme nous l'avons vu avec sorte de PHP.

199
00:09:54,820 --> 00:09:59,430
Ils peuvent faire des choses folles, afin
il est important d'être très prudent.

200
00:09:59,430 --> 00:10:01,200
Nommez vos variables bien.

201
00:10:01,200 --> 00:10:03,450
Si vous ne le faites pas, tout d'un coup
vous allez être comme,

202
00:10:03,450 --> 00:10:05,783
"Attends, je pensais que ce était un
ficelle, et maintenant ce est un int,

203
00:10:05,783 --> 00:10:08,170
et je ne suis pas vraiment sûr
ce qui se passe ici. "

204
00:10:08,170 --> 00:10:12,410
Donc, ce est juste un exemple simple de
montrant comment une variable peut facilement

205
00:10:12,410 --> 00:10:15,890
changer son type plus
Au cours d'un programme.

206
00:10:15,890 --> 00:10:16,870
>> D'ACCORD.

207
00:10:16,870 --> 00:10:19,200
Donc, ce devrait ressembler
Super, super-familiers.

208
00:10:19,200 --> 00:10:21,510
Donc, ce sont nos boucles en JavaScript.

209
00:10:21,510 --> 00:10:27,780
Ils sont exactement les mêmes, sauf pour
au lieu de quatre int i est égal à zéro,

210
00:10:27,780 --> 00:10:30,470
nous pourrions simplement dire var i est égal à zéro.

211
00:10:30,470 --> 00:10:34,100
Et alors nous pourrions avoir notre même genre
de l'état, même genre de mise à jour,

212
00:10:34,100 --> 00:10:36,090
i plus plus fonctionne très bien.

213
00:10:36,090 --> 00:10:39,800
Donc pattes sont les mêmes,
whiles sont les mêmes,

214
00:10:39,800 --> 00:10:41,440
et faire whiles sont exactement les mêmes.

215
00:10:41,440 --> 00:10:44,070
Même genre de format général.

216
00:10:44,070 --> 00:10:48,840
Nous remarquons, quatre, entre parenthèses,
entre parenthèses, ce est tout de même.

217
00:10:48,840 --> 00:10:51,470
Aussi il y aura des points-virgules
lorsque nous arriverons à l'exemple de code.

218
00:10:51,470 --> 00:10:55,250
Vous verrez ce est assez
près le même que c.

219
00:10:55,250 --> 00:10:59,770
>> Pour les déclarations de fonctions,
encore une fois, très similaire.

220
00:10:59,770 --> 00:11:05,100
Nous avons une fonction qui vient
dit que ce est une fonction, puis

221
00:11:05,100 --> 00:11:07,660
le nom de notre
fonction, et les entrées.

222
00:11:07,660 --> 00:11:11,590
Et encore, si nous remarquons, nous
ne ont pas de types ici que ce soit.

223
00:11:11,590 --> 00:11:12,090
Droite?

224
00:11:12,090 --> 00:11:18,150
Nous ne avons rien en disant que ces
doivent être entiers ou doubles, ou des flotteurs.

225
00:11:18,150 --> 00:11:19,530
Ils pourraient être ce qu'ils veulent.

226
00:11:19,530 --> 00:11:23,560
Ce qui est important est de remarquer que
nous avons besoin d'écrire la fonction avance

227
00:11:23,560 --> 00:11:26,430
de laisser savoir que JavaScript
ce est en fait une fonction.

228
00:11:26,430 --> 00:11:29,820
>> Donc, ce est juste une simple somme
fonction qui renvoie x ou y,

229
00:11:29,820 --> 00:11:33,800
et puis ce est aussi très cool
ce est que vous pouvez réellement

230
00:11:33,800 --> 00:11:35,950
assigner une fonction à une variable.

231
00:11:35,950 --> 00:11:41,770
Donc dans ce cas, la somme est maintenant le
fonction qui ne fait somme.

232
00:11:41,770 --> 00:11:47,740
Donc, si vous remarquez ici, nous avons
fonction, le nom de la fonction, entrées.

233
00:11:47,740 --> 00:11:48,860
Droite?

234
00:11:48,860 --> 00:11:52,120
Ici, nous avons juste la fonction et des intrants.

235
00:11:52,120 --> 00:11:54,310
Donc, ce est ce qu'on appelle une fonction anonyme.

236
00:11:54,310 --> 00:11:59,265
Et ce est quelque chose qui devrait être nouvelle
à la plupart d'entre vous, sinon vous tous.

237
00:11:59,265 --> 00:12:01,140
Donc, fondamentalement, ce que
des moyens, ce est que nous ne avons pas

238
00:12:01,140 --> 00:12:03,050
besoin de nom de notre
fonction dans ce cas.

239
00:12:03,050 --> 00:12:06,260
Nous pouvons simplement dire, "OK, je vais
avoir cette fonction qui se exécute, ici

240
00:12:06,260 --> 00:12:08,550
sont ses entrées, et voici
ce qu'il va faire. "

241
00:12:08,550 --> 00:12:12,540
Et surtout quand vous affectez
une fonction à une variable

242
00:12:12,540 --> 00:12:14,950
que vous allez manipuler,
vous ne avez pas nécessairement

243
00:12:14,950 --> 00:12:17,116
besoin de le nommer parce
vous allez faire référence

244
00:12:17,116 --> 00:12:20,990
à cette variable par
nom, pas par tous

245
00:12:20,990 --> 00:12:22,840
la fonction se appelait en réalité.

246
00:12:22,840 --> 00:12:23,550
D'ACCORD?

247
00:12:23,550 --> 00:12:27,810
>> Donc, si nous voyons ici, nous
avoir une certaine variable somme maintenant

248
00:12:27,810 --> 00:12:30,920
qui est égale à la
somme de trois et cinq.

249
00:12:30,920 --> 00:12:33,070
Et nous obtenir cela.

250
00:12:33,070 --> 00:12:36,750
Et ce serait juste avoir une alerte,
trois plus cinq égalent le nombre.

251
00:12:36,750 --> 00:12:43,950
Ce sera juste, plus concaténer
quelle que soit notre réponse était sur la corde.

252
00:12:43,950 --> 00:12:47,420
Aussi cool, plus peut concaténer des chaînes.

253
00:12:47,420 --> 00:12:53,510
>> Pour JavaScript, comme avec PHP,
HTML, CSS et comme nous le disions,

254
00:12:53,510 --> 00:12:56,450
beaucoup de lui nous sommes sorte de prendre
les roues de formation hors ici

255
00:12:56,450 --> 00:13:02,030
et vous les gars avez beaucoup de le savoir
comment vraiment comprendre ces choses.

256
00:13:02,030 --> 00:13:04,280
Ils sont légèrement différente,
mais ils ne sont pas si étrangère

257
00:13:04,280 --> 00:13:09,460
et que vous ne pouvez pas le Google des choses ou
les consulter en ligne avec les écoles w3.

258
00:13:09,460 --> 00:13:12,755
Et nous sommes vraiment vous attend
gars à, en quelque sorte, l'expérience

259
00:13:12,755 --> 00:13:14,400
et d'apprendre sur votre propre.

260
00:13:14,400 --> 00:13:19,490
Donc, je sais que cela peut sembler un peu
moins approfondie que certaines des choses que c

261
00:13:19,490 --> 00:13:21,936
nous faisons, mais ce est en fait pour une raison.

262
00:13:21,936 --> 00:13:25,060

263
00:13:25,060 --> 00:13:28,470
Mais je espère que ce ne est pas trop
différent, et ce ne est pas écrasante.

264
00:13:28,470 --> 00:13:31,940
>> Donc tableaux en JavaScript,
encore une fois très, très semblable.

265
00:13:31,940 --> 00:13:32,460
Droite?

266
00:13:32,460 --> 00:13:36,520
Nous avons un certain tableau de variables
ce est égal à crochets vides,

267
00:13:36,520 --> 00:13:40,340
et ce est juste un tableau vide.

268
00:13:40,340 --> 00:13:43,420
Ceci est souvent appelé
notation de tableau littérale.

269
00:13:43,420 --> 00:13:45,280
Ce est juste une chose que nous appelons.

270
00:13:45,280 --> 00:13:51,380
Si nous voyons tableau à deux ici, nous avons une certaine
littéral de tableau comporte trois éléments,

271
00:13:51,380 --> 00:13:51,910
droit?

272
00:13:51,910 --> 00:13:54,640
Et puis nous avons une certaine
var troisième élément qui est

273
00:13:54,640 --> 00:13:58,060
une variable qui est juste
va tenir cette chaîne, JS.

274
00:13:58,060 --> 00:14:01,760

275
00:14:01,760 --> 00:14:06,170
>> Les éléments, bons à remarquer,
sont séparées par des virgules,

276
00:14:06,170 --> 00:14:07,740
tout comme nous pourrions nous attendre.

277
00:14:07,740 --> 00:14:14,630
Et vous pouvez également accéder à ceux-ci, comme nous l'avons fait
en C, avec cette notation d'index, non?

278
00:14:14,630 --> 00:14:16,950
Si différent de PHP
Maintenant, nous allons revenir

279
00:14:16,950 --> 00:14:20,180
juste sorte de référence
à des choses par index.

280
00:14:20,180 --> 00:14:22,189
Tout comme C, ce est aussi l'indice zéro.

281
00:14:22,189 --> 00:14:25,230
Je me sens comme il serait vraiment cruel
si ils ont fait tout d'un coup une JavaScript

282
00:14:25,230 --> 00:14:30,630
index, et vous aviez complètement
repenser la façon dont vous pensez que sur les tableaux.

283
00:14:30,630 --> 00:14:36,140
>> Une chose cool, ce est que, au lieu
d'avoir à do-- si jamais vous

284
00:14:36,140 --> 00:14:39,240
voulu la longueur d'un tableau,
peut-être vous le parcourir

285
00:14:39,240 --> 00:14:43,430
jusqu'à ce que vous trouver une fin, ou
vous suffit de savoir ce que ce est.

286
00:14:43,430 --> 00:14:49,310
Parce que le JavaScript est très lâche plus
moyens que simplement le type, comme nous le voyons ici,

287
00:14:49,310 --> 00:14:53,310
nous pouvons juste faire ce tableau
plus grand parce que nous décident de.

288
00:14:53,310 --> 00:14:56,177
Si nous remarquons tableau à trois
a trois choses pour commencer,

289
00:14:56,177 --> 00:14:58,510
mais tout d'un coup,
nous sommes comme, "oh, ce est une blague.

290
00:14:58,510 --> 00:15:01,370
Nous allons en fait
pour en faire 101 choses ".

291
00:15:01,370 --> 00:15:05,300
Donc si jamais vous voulez connaître la
longueur réelle de votre tableau,

292
00:15:05,300 --> 00:15:06,680
vous le faites comme ça.

293
00:15:06,680 --> 00:15:10,470
Et nous allons voir beaucoup
de cette notation dans les exemples,

294
00:15:10,470 --> 00:15:12,730
mais avec JavaScript
il est typiquement tout ce

295
00:15:12,730 --> 00:15:16,410
objet que vous parlez
dot importe quel type de fonction

296
00:15:16,410 --> 00:15:17,740
que vous souhaitez appliquer à elle.

297
00:15:17,740 --> 00:15:18,240
D'ACCORD?

298
00:15:18,240 --> 00:15:20,520
>> Donc dans ce cas, notre
objet est un tableau à deux,

299
00:15:20,520 --> 00:15:23,470
et nous disons que nous voulons la
longueur de tableau à deux.

300
00:15:23,470 --> 00:15:25,716
Donc, cette demande tout comme la longueur à ce sujet.

301
00:15:25,716 --> 00:15:27,090
Et ce sera retourner votre longueur.

302
00:15:27,090 --> 00:15:32,610

303
00:15:32,610 --> 00:15:36,790
Aussi quelque chose à noter est
que si nous remarquons nos tableaux,

304
00:15:36,790 --> 00:15:39,830
contrairement C, ils ne ont pas
être tous du même type.

305
00:15:39,830 --> 00:15:41,670
Ce est beaucoup plus comme PHP.

306
00:15:41,670 --> 00:15:45,905
JavaScript est fondamentalement juste comme
ce meld intéressante de C et PHP.

307
00:15:45,905 --> 00:15:50,020

308
00:15:50,020 --> 00:15:52,170
Donc, nous allons passer à cela.

309
00:15:52,170 --> 00:15:56,750
Pour l'instant, nous allons simplement supposer
que vos tableaux sont essentiellement

310
00:15:56,750 --> 00:16:00,640
comme des tableaux C, en ce que
ils sont indexés zéro.

311
00:16:00,640 --> 00:16:04,120
OK, donc ce est tout.

312
00:16:04,120 --> 00:16:08,850
Vous pouvez également étendre juste une
tableau à tout index que vous souhaitez.

313
00:16:08,850 --> 00:16:14,260
Considérant que ce serait probablement SEG
la faute sur vous ou vous donner une erreur,

314
00:16:14,260 --> 00:16:15,970
JavaScript est comme, "nah, ce est bien.

315
00:16:15,970 --> 00:16:16,620
Je ai eu cette.

316
00:16:16,620 --> 00:16:19,460
Nous allons simplement aller droite
où vous voulez ".

317
00:16:19,460 --> 00:16:24,310
>> OK, donc objets sont très importants.

318
00:16:24,310 --> 00:16:29,720
Les gars, vous allez utiliser beaucoup de ces
P dans votre jeu, si je me souviens bien.

319
00:16:29,720 --> 00:16:34,780
Donc, la chose que ce sont
similaire au C sont structures.

320
00:16:34,780 --> 00:16:39,290
Alors vous pouvez penser quand about--
nous allons à droite un exemple

321
00:16:39,290 --> 00:16:41,810
après cela, je pense que ça va
faire beaucoup plus sense--

322
00:16:41,810 --> 00:16:45,830
mais on utilise essentiellement des objets à
organiser des cours lié information.

323
00:16:45,830 --> 00:16:47,780
Lorsque nous avons parlé
structs en C, nous avons souvent

324
00:16:47,780 --> 00:16:53,405
parler d'un étudiant qui avait un nom,
ID, maison, vous le savez, la concentration.

325
00:16:53,405 --> 00:16:56,030
Et ce est un peu la même chose
que nous utilisons pour les objets ici.

326
00:16:56,030 --> 00:16:59,300
Ce est juste pour organiser
des informations similaires.

327
00:16:59,300 --> 00:17:03,620
>> Vous pouvez aussi penser à ceux-ci comme plus
similaire à tableaux associatifs en PHP.

328
00:17:03,620 --> 00:17:10,010
Donc, ce serait un peu la chose
où nous avons une clé avec une certaine valeur,

329
00:17:10,010 --> 00:17:12,859
très similaire à PHP.

330
00:17:12,859 --> 00:17:15,780
Ainsi, vous pouvez initialiser un certain
objet vide, comme nous le voyons ici,

331
00:17:15,780 --> 00:17:17,390
juste avec des accolades.

332
00:17:17,390 --> 00:17:19,160
Donc tableaux sont entre crochets.

333
00:17:19,160 --> 00:17:21,220
Objets vides sont accolades.

334
00:17:21,220 --> 00:17:24,020
Bonne distinction d'avoir.

335
00:17:24,020 --> 00:17:27,319
Et ce ne sont que deux différents
façons de définir les propriétés.

336
00:17:27,319 --> 00:17:31,460
Donc, ce est une sorte de
beaucoup plus de façon à

337
00:17:31,460 --> 00:17:35,220
est similaire à PHP, avec notre
tableaux associatifs, avec notre clé,

338
00:17:35,220 --> 00:17:39,910
et de notre valeur, alors que
celui-ci vous aurez est--

339
00:17:39,910 --> 00:17:41,920
voir ce beaucoup plus en JavaScript.

340
00:17:41,920 --> 00:17:43,550
Ceci tend à être la convention.

341
00:17:43,550 --> 00:17:47,660
Et de la même manière que nous avons fait
tableau à deux points de la longueur, ce est dit,

342
00:17:47,660 --> 00:17:51,580
"OK, me donner ça
attribuer de cet objet ".

343
00:17:51,580 --> 00:17:52,110
Droite?

344
00:17:52,110 --> 00:17:55,660
Donc, de la même manière ce était comme, "donne-moi
la longueur de l'attribut de tableau à deux, "

345
00:17:55,660 --> 00:17:59,970
cela veut dire, "donne-moi
propriété de notre objet vide ".

346
00:17:59,970 --> 00:18:02,890
Ou dans ce cas, nous sommes
assignant à une certaine valeur ici.

347
00:18:02,890 --> 00:18:06,200
Mais vous pouvez également y accéder de cette façon.

348
00:18:06,200 --> 00:18:09,090
>> Et puis ici, ce est juste
montrant deux alertes différentes.

349
00:18:09,090 --> 00:18:12,320
Donc, ce serait montrer les alertes
serait exactement la même,

350
00:18:12,320 --> 00:18:17,150
ce est juste deux façons différentes de
accéder à l'élément que nous voulons.

351
00:18:17,150 --> 00:18:19,552
Cela fait-il sens pour tout le monde?

352
00:18:19,552 --> 00:18:21,510
Je me sens comme celui-ci
rend probablement plus de sens,

353
00:18:21,510 --> 00:18:23,270
juste parce que nous sortons d'PHP.

354
00:18:23,270 --> 00:18:26,400
Mais comme nous le faisons d'autres exemples, cette
est littéralement exactement le même.

355
00:18:26,400 --> 00:18:28,170
Beaucoup d'entre elles est il suffit de changer dans la syntaxe.

356
00:18:28,170 --> 00:18:30,710

357
00:18:30,710 --> 00:18:33,030
>> OK, donc exemples.

358
00:18:33,030 --> 00:18:34,180
Je adore exemples.

359
00:18:34,180 --> 00:18:40,070
Voici donc quelques CS50
variable qui est un objet,

360
00:18:40,070 --> 00:18:42,160
et nous stockons tout cela
informations à ce sujet.

361
00:18:42,160 --> 00:18:46,680
Nous avons donc bien sûr, instructeur,
TFS, psets et enregistrées.

362
00:18:46,680 --> 00:18:51,840
Donc, nous remarquons ce sont presque
l'ensemble de types différents.

363
00:18:51,840 --> 00:18:52,340
Droite?

364
00:18:52,340 --> 00:18:56,230
Donc objets peuvent stocker
attributs de différents types.

365
00:18:56,230 --> 00:19:01,220
Nous pouvons penser qu'il est très this--
semblable à notre réseau associatif en PHP.

366
00:19:01,220 --> 00:19:07,470
Donc clé, valeur, clé, valeur,
clé, valeur, ainsi de suite et ainsi de suite.

367
00:19:07,470 --> 00:19:11,230
Ce qui est aussi intéressant de la même manière
que nous pouvons avoir des tableaux dans des tableaux,

368
00:19:11,230 --> 00:19:14,690
nous pouvons également avoir des objets à l'intérieur
objets, ou des tableaux dans des objets.

369
00:19:14,690 --> 00:19:18,410
Vous n'êtes jamais vraiment limité à
juste un seul des choses.

370
00:19:18,410 --> 00:19:24,220
Nous pouvons être très Inceptionesque, juste
continuer à aller dans le trou de lapin il.

371
00:19:24,220 --> 00:19:26,080
>> Donc, si nous remarquons, nous
avoir une certaine cours qui

372
00:19:26,080 --> 00:19:31,120
est une chaîne, instructeur qui est une chaîne,
et le réseau, un int, et un booléen.

373
00:19:31,120 --> 00:19:36,110
Donc toutes ces choses différentes.

374
00:19:36,110 --> 00:19:39,600
>> Très bien, alors, nous avons une autre.

375
00:19:39,600 --> 00:19:42,930
Donc dans ce cas, nous avons
un tableau d'objets.

376
00:19:42,930 --> 00:19:45,320
Ainsi, tout comme un objet
peut avoir une matrice en elle.

377
00:19:45,320 --> 00:19:47,210
Nous pouvons également avoir un tableau d'objets.

378
00:19:47,210 --> 00:19:51,250
Cela peut être utile pour
penser similaire à type

379
00:19:51,250 --> 00:19:54,260
de la façon dont nous avons eu un hachage
table, nous avions un tableau

380
00:19:54,260 --> 00:19:56,220
de toutes ces différentes
types de structs que

381
00:19:56,220 --> 00:19:59,070
étaient des pointeurs à des différentes
nœuds et autres joyeusetés.

382
00:19:59,070 --> 00:20:01,420
Mais dans ce cas, nous
avoir un tableau d'objets.

383
00:20:01,420 --> 00:20:04,890
Donc, ce est comme un tableau
tableaux des associatifs.

384
00:20:04,890 --> 00:20:09,430
Nous avons donc une certaine aurions premier élément
être l'objet avec le nom James

385
00:20:09,430 --> 00:20:11,340
et abritera Winthrop.

386
00:20:11,340 --> 00:20:14,780
>> Les gars, vous vous souvenez peut-
quelque chose de très similaire à ce

387
00:20:14,780 --> 00:20:21,710
avec votre dernière pset, où si vous
tiré quelque chose de votre base de données,

388
00:20:21,710 --> 00:20:24,480
la première sorte de
chose dans votre tableau était

389
00:20:24,480 --> 00:20:27,110
toutes les informations sur
le premier utilisateur qui se est réuni il,

390
00:20:27,110 --> 00:20:30,765
et puis vous aviez à l'index dans cette
pour obtenir leur stock ou de leur cache

391
00:20:30,765 --> 00:20:32,110
ou quoi.

392
00:20:32,110 --> 00:20:34,620
Donc, ce est très sensiblement les mêmes
chose, juste un peu de changement

393
00:20:34,620 --> 00:20:39,570
dans la syntaxe, le changement petit peu dans
les mots que nous utilisons pour les décrire.

394
00:20:39,570 --> 00:20:45,960
>> Donc, si nous voulions, ne importe qui peut dire
moi ce que cette alerte voudrais faire ici?

395
00:20:45,960 --> 00:20:48,780
Ou ce que ce peu de
code serait faire pour nous?

396
00:20:48,780 --> 00:20:50,992

397
00:20:50,992 --> 00:20:52,616
PUBLIC: Il va vous donner tous les noms.

398
00:20:52,616 --> 00:20:54,900
ALLISON BUCHHOLTZ-UA: droit, donc il
serait tout simplement alerter avec tous les noms

399
00:20:54,900 --> 00:20:57,960
car il passerait par
chalet i, de sorte qu'il me remette à zéro.

400
00:20:57,960 --> 00:21:01,330
Donc, il disait: OK, nous sommes à la recherche
à ce premier objet, qui

401
00:21:01,330 --> 00:21:03,210
est le premier emplacement dans notre tableau.

402
00:21:03,210 --> 00:21:06,900
Et il dit, "me donner le
attribuer, le nom de cet objet ".

403
00:21:06,900 --> 00:21:09,030
Donc, nous allons ici, nous avions
analyse, nous trouverions nom,

404
00:21:09,030 --> 00:21:11,340
et nous aimerions imprimons sur
James, Molly et Carl.

405
00:21:11,340 --> 00:21:14,410

406
00:21:14,410 --> 00:21:15,799
Toutes les questions jusqu'ici?

407
00:21:15,799 --> 00:21:17,590
JavaScript malheureusement
vous allez être

408
00:21:17,590 --> 00:21:20,950
faire beaucoup de recherche sur votre
propre, calculer la syntaxe,

409
00:21:20,950 --> 00:21:21,910
aux prises avec elle.

410
00:21:21,910 --> 00:21:25,870
Mais bien sûr, je suis toujours là,
les heures de bureau sont toujours là.

411
00:21:25,870 --> 00:21:28,260
Je pourrais être le mardi de cette semaine.

412
00:21:28,260 --> 00:21:31,050
Donc, si vous êtes là, vous pouvez
venir me rendre visite cette semaine.

413
00:21:31,050 --> 00:21:32,470
Ce serait génial.

414
00:21:32,470 --> 00:21:36,260
>> OK, donc DOM est le Document Object Model-.

415
00:21:36,260 --> 00:21:38,900
Donc, ce est juste une façon
que nous aimons à penser

416
00:21:38,900 --> 00:21:45,720
comment notre HTML et tout
au sein de son organisation.

417
00:21:45,720 --> 00:21:49,930
Ce est très bien quelque chose qui
viendra probablement sur votre quiz.

418
00:21:49,930 --> 00:21:58,150
Je sais que mon année, ce était comme voici
fichier HTML, remplir le DOM pour elle.

419
00:21:58,150 --> 00:21:59,770
Et vous suffit de remplir dans les petites choses.

420
00:21:59,770 --> 00:22:01,500
Ceux-ci devraient être des points faciles espoir.

421
00:22:01,500 --> 00:22:03,450
Je espère que vous aurez see--

422
00:22:03,450 --> 00:22:04,590
>> AUDIENCE: [inaudible]

423
00:22:04,590 --> 00:22:06,660
>> ALLISON BUCHHOLTZ-UA: Donc,
vous voyez cet arbre ici?

424
00:22:06,660 --> 00:22:07,200
>> AUDIENCE: Ouais.

425
00:22:07,200 --> 00:22:08,949
>> ALLISON BUCHHOLTZ-UA:
Donc, ils vont demander utilisation

426
00:22:08,949 --> 00:22:11,750
pour remplir ce qui se passe sous le corps.

427
00:22:11,750 --> 00:22:15,770
Peut-être sous le corps, nous avons une certaine
divs ou nous avons quelques paragraphes,

428
00:22:15,770 --> 00:22:19,160
et nous vous demandons de remplir
un arbre très bien comme ça.

429
00:22:19,160 --> 00:22:21,440
Nous allons donc marcher à travers elle.

430
00:22:21,440 --> 00:22:26,120
Ainsi, le document-objet
Modèle est juste une façon

431
00:22:26,120 --> 00:22:31,240
de structurer et de penser
sur notre graphique HTML.

432
00:22:31,240 --> 00:22:33,860

433
00:22:33,860 --> 00:22:35,840
Et aussi quand nous obtenons
en plus le JavaScript

434
00:22:35,840 --> 00:22:37,640
ça va être le
manière que nous fait

435
00:22:37,640 --> 00:22:39,990
manipuler différents
éléments sur la page.

436
00:22:39,990 --> 00:22:43,980
Nous devons trouver un moyen pour accéder à chaque
des choses dans notre HTML,

437
00:22:43,980 --> 00:22:48,050
et si cela nous donne une très
de façon standardisée en béton

438
00:22:48,050 --> 00:22:51,010
à travers les diverses pages Web pour le faire.

439
00:22:51,010 --> 00:22:53,440
>> Donc, si nous marchons seulement par
cela ici, bien sûr

440
00:22:53,440 --> 00:22:56,790
notre document est comme l'ensemble de notre dossier.

441
00:22:56,790 --> 00:22:59,350
Cela fait évidemment sens
que ce est la plus haute chose,

442
00:22:59,350 --> 00:23:03,520
puis nous avons notre HTML réel,
ce qui correspond à cette balise ici.

443
00:23:03,520 --> 00:23:08,480
Aussi, si vous en tiret vos balises
correctement, puis en créant cet arbre DOM

444
00:23:08,480 --> 00:23:10,530
devient super simple.

445
00:23:10,530 --> 00:23:12,400
Nous avons donc une certaine tête ici.

446
00:23:12,400 --> 00:23:15,780
Nous avons quelques corps qui
nous voyons la tige hors du HTML,

447
00:23:15,780 --> 00:23:18,530
ce est pourquoi nous avons la tête et le corps.

448
00:23:18,530 --> 00:23:22,880
Dans la tête, nous avons une certaine
balise de titre, un titre balise de fin,

449
00:23:22,880 --> 00:23:24,570
nous savons donc ce qui vient après la tête.

450
00:23:24,570 --> 00:23:28,040
Et au sein de notre balise de titre,
nous avons bonjour, monde.

451
00:23:28,040 --> 00:23:28,740
D'ACCORD?

452
00:23:28,740 --> 00:23:31,311
Donc, ce est cette branche entière de la main gauche.

453
00:23:31,311 --> 00:23:34,060
Et puis pour la branche de droite
ici, nous voyons que nous avons HTML,

454
00:23:34,060 --> 00:23:38,680
OK nous avons fait cette partie de la tête,
nous cherchons juste au corps,

455
00:23:38,680 --> 00:23:40,670
nous avons donc une certaine zone du corps.

456
00:23:40,670 --> 00:23:44,350
Et dans ce cadre, le seul
chose que nous avons, ce est bonjour, monde.

457
00:23:44,350 --> 00:23:45,090
D'ACCORD?

458
00:23:45,090 --> 00:23:54,130
Si nous avions des choses comme
p et certains support puis

459
00:23:54,130 --> 00:23:57,500
bonjour, monde, et puis un autre
Support p d'adieu, monde,

460
00:23:57,500 --> 00:24:00,080
nous aurions deux bulles
se détacher d'ici.

461
00:24:00,080 --> 00:24:05,550
Parce qu'ils sont tous les deux sous le corps, mais
ils sont paragraphes distincts ce cas.

462
00:24:05,550 --> 00:24:11,520
Il est certainement la pratique
à ce sujet dans des questionnaires précédents,

463
00:24:11,520 --> 00:24:14,570
ainsi que de nombreux en ligne sur elle.

464
00:24:14,570 --> 00:24:18,260
OK donc, cela permet simplement
nous voyons tout bien

465
00:24:18,260 --> 00:24:20,810
et manipuler les choses
très systématique.

466
00:24:20,810 --> 00:24:21,340
D'ACCORD?

467
00:24:21,340 --> 00:24:23,640
Nous savons exactement comment
parcourir à travers cet arbre,

468
00:24:23,640 --> 00:24:26,910
nous savons donc ce que nous voulons accéder.

469
00:24:26,910 --> 00:24:31,690
>> OK donc ce est pourquoi nous voulons
d'avoir cette sorte de modèle,

470
00:24:31,690 --> 00:24:35,190
afin que nous puissions utiliser des choses comme cela,
et nous comprenons ce qu'ils signifient,

471
00:24:35,190 --> 00:24:38,370
et ils sont normalisés
dans toutes les choses que nous faisons.

472
00:24:38,370 --> 00:24:45,900
Donc titre document de dot est juste
le titre de l'ensemble de ces our--

473
00:24:45,900 --> 00:24:48,960
sont assez explicites,
Je aime à penser.

474
00:24:48,960 --> 00:24:51,660
Donc, la première de trois
exemples disent simplement,

475
00:24:51,660 --> 00:24:54,770
"OK, donner juste moi le
titre de cette page Web ".

476
00:24:54,770 --> 00:24:58,030
Donc, il vous donnera ce que
correspond au titre.

477
00:24:58,030 --> 00:25:01,880
>> Corps document dot va vous donner
tout ce qui est au sein de ces balises body.

478
00:25:01,880 --> 00:25:03,240
Alors que vous pouvez manipuler.

479
00:25:03,240 --> 00:25:07,820
Et le corps de points du document dot
entrer HTML est très cool,

480
00:25:07,820 --> 00:25:11,660
et est peut-être pas comme super
intuitive, mais le HTML interne

481
00:25:11,660 --> 00:25:13,740
correspond à ce droit ici.

482
00:25:13,740 --> 00:25:17,410
Donc, si jamais vous voulez
manipuler le texte sur une page,

483
00:25:17,410 --> 00:25:22,700
généralement vous allez faire
quelque chose avec le point du corps HTML interne.

484
00:25:22,700 --> 00:25:23,820
D'ACCORD?

485
00:25:23,820 --> 00:25:31,341
Donc HTML intérieure tend à se référer à
ce est en fait entre ces balises.

486
00:25:31,341 --> 00:25:31,840
D'ACCORD?

487
00:25:31,840 --> 00:25:33,020
Et puis fonctions utiles.

488
00:25:33,020 --> 00:25:40,390
Donc, si vous vouliez obtenir
ne importe quel de ces derniers, tout élément,

489
00:25:40,390 --> 00:25:43,140
nous avons quelques Id, classe
nom, ou le nom de tag.

490
00:25:43,140 --> 00:25:47,100
Ceci est très similaire à
les choses que nous avons fait avec CSS, non?

491
00:25:47,100 --> 00:25:51,360
Où nous avons quelques sélecteurs
correspondent soit à un tag, une classe

492
00:25:51,360 --> 00:25:53,800
que nous les, ou un Id donnons.

493
00:25:53,800 --> 00:25:55,310
Ce est très bien de la même façon.

494
00:25:55,310 --> 00:26:00,720
Si vous avez quelque chose qui
a une certaine classe de chien,

495
00:26:00,720 --> 00:26:05,800
et vous dites obtenir des éléments par nom de tag,
et vous mettez chien dans there-- ou désolé,

496
00:26:05,800 --> 00:26:06,610
nom de la classe.

497
00:26:06,610 --> 00:26:07,770
Vous pouvez mettre point là.

498
00:26:07,770 --> 00:26:11,780
Il va retourner tous ceux
éléments à vous qui ont cette classe.

499
00:26:11,780 --> 00:26:13,880
Donc vous pouvez manipuler seulement ceux.

500
00:26:13,880 --> 00:26:18,430
De la même manière, peut-être que vous venez
vouloir manipuler certains en-tête, de sorte

501
00:26:18,430 --> 00:26:20,980
l'entête d'une h1, comme nous l'avons fait.

502
00:26:20,980 --> 00:26:24,900
Vous pourriez faire obtenir des éléments par tag
nommer, parce h1 est un nom de tag.

503
00:26:24,900 --> 00:26:29,270
Et de la même manière, si vous voulez obtenir
quelque chose unique, vous pouvez le faire get tag.

504
00:26:29,270 --> 00:26:31,100
Obtenez élément par Id.

505
00:26:31,100 --> 00:26:32,710
Et ils sont en réalité beaucoup de ces derniers.

506
00:26:32,710 --> 00:26:36,300
Ce ne sont que comme trois des très nombreux.

507
00:26:36,300 --> 00:26:39,600
Donc, si vous allez en ligne, comme
Je vais encourager les

508
00:26:39,600 --> 00:26:45,342
que vous fassiez, et faire un peu
recherche sur votre propre,

509
00:26:45,342 --> 00:26:48,450
Je recommande vraiment
recherche dans l'ensemble de ceux-ci.

510
00:26:48,450 --> 00:26:50,880
Ils pourraient être super
utile, en particulier lorsque

511
00:26:50,880 --> 00:26:57,180
vous voulez juste genre de manipuler
choses très spécifiques sans avoir

512
00:26:57,180 --> 00:27:00,390
de passer et essayer
pour analyser tout ce.

513
00:27:00,390 --> 00:27:03,540
>> OK, donc la dernière chose
JavaScript est des événements.

514
00:27:03,540 --> 00:27:10,730
Alors, quand je parlais plus tôt
d'aller sur un site Web,

515
00:27:10,730 --> 00:27:14,340
et lorsque vous survolez quelque chose,
ou de votre souris survole quelque chose,

516
00:27:14,340 --> 00:27:15,420
autre chose qui se passe.

517
00:27:15,420 --> 00:27:17,900
Ce est ce que nous aimerions
penser comme un événement.

518
00:27:17,900 --> 00:27:23,970
Donc, ce que nous avons que la force
être utile ici est onclick.

519
00:27:23,970 --> 00:27:29,140
Donc, le mien était sur le vol stationnaire, qui, je suis
sûr, est juste sur le vol stationnaire.

520
00:27:29,140 --> 00:27:31,300
Aussi une tonne de ces
que vous pouvez rechercher.

521
00:27:31,300 --> 00:27:34,340
Il ya toute une liste en ligne
des choses différentes

522
00:27:34,340 --> 00:27:37,130
que vous pouvez écouter.

523
00:27:37,130 --> 00:27:41,220
>> Mais les événements JavaScript sont
fondamentalement juste répondre à des choses

524
00:27:41,220 --> 00:27:42,430
que votre utilisateur fait.

525
00:27:42,430 --> 00:27:42,930
Droite?

526
00:27:42,930 --> 00:27:45,220
Donc, votre utilisateur fait
quelque chose, ce est un événement,

527
00:27:45,220 --> 00:27:48,340
et JavaScript répondra
mais vous souhaitez qu'elle.

528
00:27:48,340 --> 00:27:49,770
Il répondra en conséquence.

529
00:27:49,770 --> 00:27:54,630
Donc dans ce cas, nous avons
certains onload fenêtre de dot.

530
00:27:54,630 --> 00:27:57,170
Donc ce que cela dit est, "attendre
jusqu'à leur chargement de la fenêtre ".

531
00:27:57,170 --> 00:27:57,780
D'ACCORD?

532
00:27:57,780 --> 00:28:02,102
Alors, quand chargé, onload de tout,
alors vous pouvez exécuter cette fonction.

533
00:28:02,102 --> 00:28:03,810
Alors, quand tout est
chargé, vous allez

534
00:28:03,810 --> 00:28:07,760
d'avoir une certaine touche de recherche
qui obtient un élément par Id,

535
00:28:07,760 --> 00:28:13,740
et il imprime quoi que
élément est que le bouton de recherche.

536
00:28:13,740 --> 00:28:17,050
Et puis nous avons cette variable,
nous disons: «OK, onclick."

537
00:28:17,050 --> 00:28:20,390
Alors, quand nous entendons un clic
sur le bouton de recherche,

538
00:28:20,390 --> 00:28:23,990
exécuter cette fonction, qui est une
alerte, vous avez cliqué sur le bouton Rechercher.

539
00:28:23,990 --> 00:28:28,910
>> Donc ce qui arrive est-- ce est un bon
petite représentation graphique ici.

540
00:28:28,910 --> 00:28:31,480
Donc nos documents charges,
ce est notre onload,

541
00:28:31,480 --> 00:28:34,340
nous trouvons notre Recherche
bouton, qui est la suivante.

542
00:28:34,340 --> 00:28:36,570
Nous recherchons pour notre bouton Rechercher.

543
00:28:36,570 --> 00:28:40,790
Et puis, quand le bouton de recherche est
cliqué, il correspond à droite ici.

544
00:28:40,790 --> 00:28:41,980
Onclick.

545
00:28:41,980 --> 00:28:47,300
Puis nous avons finalement alertons nos utilisateurs,
qui est cette dernière ligne ici.

546
00:28:47,300 --> 00:28:48,250
D'ACCORD?

547
00:28:48,250 --> 00:28:52,960
Donc, chacun de ces quatre étapes seulement
correspond aux quatre boîtes

548
00:28:52,960 --> 00:28:55,031
là-bas sur le fond.

549
00:28:55,031 --> 00:28:56,405
Cela fait-il sens pour tout le monde?

550
00:28:56,405 --> 00:29:01,120

551
00:29:01,120 --> 00:29:05,200
>> Et puis une chose que je vais juste
parler très, très brièvement, que je

552
00:29:05,200 --> 00:29:08,660
vous encourager à les gars
Allez regarder est plus dans

553
00:29:08,660 --> 00:29:13,210
jQuery, qui est juste une bibliothèque
qui est construit au-dessus de JavaScript.

554
00:29:13,210 --> 00:29:16,480
Il est super utile, car
avec la plupart des bibliothèques.

555
00:29:16,480 --> 00:29:18,320
Il ya beaucoup de fonctions.

556
00:29:18,320 --> 00:29:21,930
Donc, si jamais il ya quelque chose qui
vous voulez faire en JavaScript,

557
00:29:21,930 --> 00:29:24,880
votre premier réflexe
ne devrait pas être de penser

558
00:29:24,880 --> 00:29:27,340
de, "quelle fonction devrait
Je Code? "Il devrait être,

559
00:29:27,340 --> 00:29:29,560
"Permettez-moi vois quelqu'un est
déjà fait pour moi. "

560
00:29:29,560 --> 00:29:32,800
Parce que neuf fois sur dix,
quelqu'un aura déjà fait,

561
00:29:32,800 --> 00:29:35,760
et ils ont probablement fait mieux.

562
00:29:35,760 --> 00:29:39,990
Les gens passent beaucoup de temps à faire cela,
et JavaScript est très largement utilisé,

563
00:29:39,990 --> 00:29:42,810
afin que les gens sont constamment
essayer de faire mieux.

564
00:29:42,810 --> 00:29:47,110
Et jQuery a beaucoup de fonctions
qui sera sans doute utile de vous

565
00:29:47,110 --> 00:29:50,470
dans votre projet final si vous êtes
faire quelque chose avec la conception web.

566
00:29:50,470 --> 00:29:53,480
Comme je aime à le dire ", le travail
plus intelligemment, pas plus difficile. "

567
00:29:53,480 --> 00:29:57,130
Si vous les gars ce faire, il va être génial.

568
00:29:57,130 --> 00:30:00,330
Lorsque nous sommes au hackathon je ne ai pas
veux que vous soyez tous stressés.

569
00:30:00,330 --> 00:30:03,600
Je veux que vous soyez comme, "je ai eu
ce. jQuery a mon retour.

570
00:30:03,600 --> 00:30:05,790
Je ne ai pas besoin d'écrire ces fonctions ".

571
00:30:05,790 --> 00:30:07,636
>> Il suffit donc de deux choses à
souviens, je vais

572
00:30:07,636 --> 00:30:10,220
pour vous permettre de gars regardez plus
dans jQuery sur votre propre.

573
00:30:10,220 --> 00:30:13,070
Tout ce que je vais dire, ce est qu'il
fait des choses assez impressionnants

574
00:30:13,070 --> 00:30:15,220
et peut rendre votre vie
beaucoup plus facile.

575
00:30:15,220 --> 00:30:17,150
Mais ce que vous voulez
avoir, ce est tout ce fichier

576
00:30:17,150 --> 00:30:21,020
que vous allez être en utilisant,
vous allez vouloir ces deux lignes.

577
00:30:21,020 --> 00:30:25,630
Vous allez avoir la
scénario de js js jQuery points.

578
00:30:25,630 --> 00:30:28,500
Et effectivement la source
va être une certaine URL.

579
00:30:28,500 --> 00:30:35,870
Si vous Google jQuery, Google
accueille effectivement tous les fichiers pour vous.

580
00:30:35,870 --> 00:30:38,950
Donc, vous voulez absolument
URL entrée qui place.

581
00:30:38,950 --> 00:30:41,130
Je viens de mettre cela ici
pour des raisons de simplicité.

582
00:30:41,130 --> 00:30:45,180
Tout cela signifie, ce est où
trouver votre bibliothèque jQuery.

583
00:30:45,180 --> 00:30:48,600
Ce est énorme, de sorte que vous ne voulez pas
de l'héberger sur votre propre ordinateur

584
00:30:48,600 --> 00:30:53,390
si vous ne pouvez l'éviter, ce est pourquoi nous
ont tendance à tout mettre dans l'URL de Google qui

585
00:30:53,390 --> 00:30:55,880
accueille tous ces fichiers pour vous.

586
00:30:55,880 --> 00:30:56,380
D'ACCORD?

587
00:30:56,380 --> 00:30:58,850
Vous Google, je promets
il sera là.

588
00:30:58,850 --> 00:31:01,200
>> Et puis tout
Fichier JavaScript que vous êtes

589
00:31:01,200 --> 00:31:07,150
utilise, ce est donc que quelques-uns externe
Fichier JavaScript que vous utilisez.

590
00:31:07,150 --> 00:31:11,570
De la même manière que nous relions à notre CSS
fichiers, ce est la même chose.

591
00:31:11,570 --> 00:31:15,480
Cette juste des liens vers le fichier
où votre Javascript.

592
00:31:15,480 --> 00:31:18,970
Et je ai quelques exemples
avec JavaScript simple.

593
00:31:18,970 --> 00:31:20,220
Donc, nous irons à travers elle.

594
00:31:20,220 --> 00:31:27,230
Et puis dans votre index JavaScript,
qui est votre fichier JavaScript ici,

595
00:31:27,230 --> 00:31:30,900
ce est une sorte de l'emballage
que vous avez pour jQuery.

596
00:31:30,900 --> 00:31:33,860
Vous êtes presque 99,9
pour cent du temps d'aller

597
00:31:33,860 --> 00:31:36,800
d'avoir ceci dans votre fichier index.js.

598
00:31:36,800 --> 00:31:40,010
Parce que ce est cela dit,
"Ne pas exécuter quoi que ce soit

599
00:31:40,010 --> 00:31:43,480
jusqu'à ce que votre document est effectivement
prêt », ce qui est exactement ce que vous voulez.

600
00:31:43,480 --> 00:31:46,600
Parce que si votre document ne est pas prêt,
et jQuery commence à faire les choses,

601
00:31:46,600 --> 00:31:48,020
ce est juste un gâchis.

602
00:31:48,020 --> 00:31:50,480
Donc, vous voulez toujours avoir ce wrapper.

603
00:31:50,480 --> 00:31:55,760
Et puis pour les choses qui vont là-bas, je
en laissant aux propres parcourant de vos gars.

604
00:31:55,760 --> 00:32:04,610
>> OK, alors y at-il des questions à droite
maintenant environ JavaScript en général?

605
00:32:04,610 --> 00:32:07,420
Ou le modèle DOM?

606
00:32:07,420 --> 00:32:10,780
Sinon, nous avons une certaine fraîcheur
exemples que nous pouvons passer,

607
00:32:10,780 --> 00:32:13,120
que vous les gars peuvent me aider code.

608
00:32:13,120 --> 00:32:15,877
Mais je vais aussi être
super sympa, et si vous

609
00:32:15,877 --> 00:32:17,960
ne veulent rien dire
pour ces derniers, ce est bien.

610
00:32:17,960 --> 00:32:20,510
Je peux aussi vous donner des exemples.

611
00:32:20,510 --> 00:32:24,581
Mais rien sur le
PowerPoint avant de passer?

612
00:32:24,581 --> 00:32:25,080
Cool.

613
00:32:25,080 --> 00:32:26,990
>> Je me sens comme vous les gars devez énergie.

614
00:32:26,990 --> 00:32:31,516
Donc, je pense que nous allons commencer
avec mon exemple de premier parti.

615
00:32:31,516 --> 00:32:33,390
Nous avons trois exemples,
vous avez votre choix.

616
00:32:33,390 --> 00:32:37,720
Nous avons donc l'horloge, où nous allons
mettre en oeuvre une horloge réelle qui est

617
00:32:37,720 --> 00:32:41,430
va mettre à jour au fil du temps.

618
00:32:41,430 --> 00:32:43,310
Nous avons cette fonction grande Twitter.

619
00:32:43,310 --> 00:32:44,560
This-- vous savez quoi, tenir le coup.

620
00:32:44,560 --> 00:32:47,220
Nous allons faire de cette disparaître.

621
00:32:47,220 --> 00:32:47,950
Bam.

622
00:32:47,950 --> 00:32:49,060
D'ACCORD.

623
00:32:49,060 --> 00:32:56,132
>> Nous avons cette fonction grande Twitter
ici, that-- Je sais, à droite?

624
00:32:56,132 --> 00:32:57,090
Ça va être génial.

625
00:32:57,090 --> 00:32:58,350
Est-ce que vous les gars excité?

626
00:32:58,350 --> 00:33:01,170
Cela va compter le nombre
de caractères que vous avez laissé,

627
00:33:01,170 --> 00:33:04,520
donc si je tape en ce moment,
évidemment, il dit encore 140,

628
00:33:04,520 --> 00:33:06,190
mais nous savons que ce ne est pas le cas.

629
00:33:06,190 --> 00:33:08,570
Et puis avec notre dernier
ici, cliquez ici pour faire la fête.

630
00:33:08,570 --> 00:33:12,150
Qu'est-ce qui va se passer, ce est quand
nous cliquons, le fond de

631
00:33:12,150 --> 00:33:13,340
va changer de couleurs.

632
00:33:13,340 --> 00:33:17,060
Alors vous les gars avez vos options de
celui que vous voulez faire en premier.

633
00:33:17,060 --> 00:33:19,800
Je promets que je vais le prendre très facile sur vous.

634
00:33:19,800 --> 00:33:22,680
Je me sens comme tout le monde est un peu
de seulement très discret aujourd'hui.

635
00:33:22,680 --> 00:33:25,540
Alors je vais vous guider à travers la façon dont
nous mettrons en œuvre tous ces.

636
00:33:25,540 --> 00:33:28,520
Si vous voulez carillon
en, ce est très bien, mais je

637
00:33:28,520 --> 00:33:30,020
se sentir comme tout le monde est un peu fatigué.

638
00:33:30,020 --> 00:33:32,970
Donc, je vais vous guider
par ces exemples.

639
00:33:32,970 --> 00:33:35,015
Avons-nous quelque chose qui
nous aimerions faire en premier?

640
00:33:35,015 --> 00:33:38,140

641
00:33:38,140 --> 00:33:39,475
Ne importe qui?

642
00:33:39,475 --> 00:33:41,350
Aucune préférence?

643
00:33:41,350 --> 00:33:41,867
D'ACCORD.

644
00:33:41,867 --> 00:33:42,450
Vous savez quoi?

645
00:33:42,450 --> 00:33:43,290
Nous sommes sur partie.

646
00:33:43,290 --> 00:33:48,380
Je me sens comme vous les gars ont besoin d'un little--
oui, nous ferons d'abord celui du parti.

647
00:33:48,380 --> 00:33:48,880
D'ACCORD.

648
00:33:48,880 --> 00:33:51,470

649
00:33:51,470 --> 00:33:56,930
>> Donc, ce que nous avons ce est ici--
pas censé être là.

650
00:33:56,930 --> 00:33:57,910
Maintenant ce est bon.

651
00:33:57,910 --> 00:33:59,810
D'ACCORD.

652
00:33:59,810 --> 00:34:03,110
Donc ce que nous avons ici est
juste une simple page HTML

653
00:34:03,110 --> 00:34:07,840
que vous les gars devraient tous être super
familiariser avec de vos deux dernières psets.

654
00:34:07,840 --> 00:34:10,212
nous avons notre type de doc ici.

655
00:34:10,212 --> 00:34:10,920
Tout le monde peut voir?

656
00:34:10,920 --> 00:34:11,420
D'ACCORD.

657
00:34:11,420 --> 00:34:12,560
Cool.

658
00:34:12,560 --> 00:34:13,900
Nous avons notre HTML évidemment.

659
00:34:13,900 --> 00:34:18,360
Nous avons quelques-tête qui est
lié à une feuille de style qui

660
00:34:18,360 --> 00:34:21,420
vient de faire ma police belle et grande et audacieuse.

661
00:34:21,420 --> 00:34:23,489
Donc, ne vous inquiétez pas à ce sujet.

662
00:34:23,489 --> 00:34:26,437
>> Nous avons certains corps avec
un fond d'Id, OK?

663
00:34:26,437 --> 00:34:28,520
Parce que nous allons être
changeant l'arrière-plan.

664
00:34:28,520 --> 00:34:31,964
Alors, quand nous changeons la
fond de notre corps,

665
00:34:31,964 --> 00:34:35,965
nous nous souvenons d'il ya deux semaines
lorsque nous traitons avec des pages Web.

666
00:34:35,965 --> 00:34:36,840
Donc bon d'avoir cela.

667
00:34:36,840 --> 00:34:39,270
Et nous avons quelques Id égale parti.

668
00:34:39,270 --> 00:34:43,909
Ce h ref livre signifie simplement que
ça va aller à la même page.

669
00:34:43,909 --> 00:34:47,120
Et cliquez ici pour faire la fête,
ce est pourquoi quand nous cliquons il,

670
00:34:47,120 --> 00:34:48,940
il faut changer les couleurs, heureusement.

671
00:34:48,940 --> 00:34:54,322
>> Et puis nous avons un script ici que
est simplement liée à ce parti js de points

672
00:34:54,322 --> 00:34:58,100
fichier, qui est vide, car
nous ne avons pas encore fait quoi que ce soit.

673
00:34:58,100 --> 00:35:00,450
Et ce est tellement triste.

674
00:35:00,450 --> 00:35:06,100
Mais très vite, il va changer
couleurs, et ce sera génial.

675
00:35:06,100 --> 00:35:10,520
>> Donc, je vais juste vous promener gars
à la façon dont nous pourrions aborder ce.

676
00:35:10,520 --> 00:35:14,030
Donc la première chose que
nous pourrions faire,

677
00:35:14,030 --> 00:35:18,050
si nous changeons le fond de
le corps, la première chose que nous pourrions

678
00:35:18,050 --> 00:35:22,730
faire est effectivement saisir
ce que le corps est, non?

679
00:35:22,730 --> 00:35:27,690
Donc, nous voulons avoir la somme, notre
fond, et si vous remarquez,

680
00:35:27,690 --> 00:35:29,567
Je viens de commencer à taper automatiquement.

681
00:35:29,567 --> 00:35:32,400
Il ya rien de spécial que nous
besoin de faire pour nos fichiers JavaScript.

682
00:35:32,400 --> 00:35:35,820
Je peux commencer à déclarer des variables,
et déclarant fonctions aléatoires.

683
00:35:35,820 --> 00:35:38,110
Et ce est beaucoup plus sous forme libre.

684
00:35:38,110 --> 00:35:41,930
Ce est comme avec C, nous vous avons donné tous
ces règles strictes, et vous ont grandi,

685
00:35:41,930 --> 00:35:43,220
de sorte que nous sommes comme, "aller de l'avant.

686
00:35:43,220 --> 00:35:44,000
Être libre.

687
00:35:44,000 --> 00:35:44,870
Faites ce que vous voulez. "

688
00:35:44,870 --> 00:35:46,280
Et ce est ce que JavaScript est.

689
00:35:46,280 --> 00:35:48,390
Donc, nous avons une certaine expérience ici.

690
00:35:48,390 --> 00:35:55,900
Avec notre modèle DOM, nous savons que nous
peut faire le document dot obtenir élément,

691
00:35:55,900 --> 00:36:00,290
et si nous remarquons ici,
notre corps a une Id.

692
00:36:00,290 --> 00:36:00,930
Droite?

693
00:36:00,930 --> 00:36:06,310
Ainsi, nous pouvons obtenir ne document en
Id, et voici un simple.

694
00:36:06,310 --> 00:36:08,295
Quel est notre Id que nous voulons ici?

695
00:36:08,295 --> 00:36:09,170
AUDIENCE: Contexte.

696
00:36:09,170 --> 00:36:11,280
ALLISON BUCHHOLTZ-UA: Contexte.

697
00:36:11,280 --> 00:36:12,230
Parfait.

698
00:36:12,230 --> 00:36:14,250
Et virgule à la fin.

699
00:36:14,250 --> 00:36:15,610
Cela n'a pas encore disparu.

700
00:36:15,610 --> 00:36:17,330
Vous avez encore besoin de vos points-virgules.

701
00:36:17,330 --> 00:36:17,830
D'ACCORD.

702
00:36:17,830 --> 00:36:19,690
Donc, ce est notre premier.

703
00:36:19,690 --> 00:36:23,880
Et quand nous cliquons sur quelque chose, nous
vouloir quelque chose se passe, non?

704
00:36:23,880 --> 00:36:28,270
Donc, nous pourrions vouloir une variable
Ce est l'attente d'un clic.

705
00:36:28,270 --> 00:36:32,410
Ce que nous allons faire, ce est que nous allons
rendre notre lien plus semblable à un bouton.

706
00:36:32,410 --> 00:36:43,140
Donc, nous allons avoir un certain bouton
est égal à documenter dot obtenir élément par Id.

707
00:36:43,140 --> 00:36:48,670
Et si je vous parle de la
cliquez sur le lien ou cliquez ici pour faire la fête

708
00:36:48,670 --> 00:36:51,850
lien, ce pourrait être ici mon Id?

709
00:36:51,850 --> 00:36:52,590
Parti.

710
00:36:52,590 --> 00:36:55,200
Correct.

711
00:36:55,200 --> 00:36:56,500
OK pas trop mal jusqu'à présent.

712
00:36:56,500 --> 00:36:59,060
Tout le monde à obtenir ce que nous faisons?

713
00:36:59,060 --> 00:37:02,100
>> OK, alors maintenant nous avons notre
bouton, et nous voulons

714
00:37:02,100 --> 00:37:04,140
les choses changent quand on clique dessus.

715
00:37:04,140 --> 00:37:08,750
Donc, si nous nous souvenons de notre PowerPoint,
très simple chose que nous pouvons faire

716
00:37:08,750 --> 00:37:12,140
est juste touche dot onclick, non?

717
00:37:12,140 --> 00:37:14,750

718
00:37:14,750 --> 00:37:18,730
Et cela va correspondre une certaine fonction.

719
00:37:18,730 --> 00:37:20,620
Ce est une fonction anonyme.

720
00:37:20,620 --> 00:37:24,620
Et ce juste as-- en fait je suis
va faire un peu plus grand.

721
00:37:24,620 --> 00:37:27,330
>> Donc ce que je ai fait
ici, ce est que je dis, OK,

722
00:37:27,330 --> 00:37:31,810
quand nous cliquons notre bouton, qui est
ce lien que nous venons de parler,

723
00:37:31,810 --> 00:37:34,270
nous allons exécuter
cette fonction anonyme.

724
00:37:34,270 --> 00:37:35,845
Nous ne avons pas besoin des entrées.

725
00:37:35,845 --> 00:37:37,220
Nous ne nous soucions pas ce que dit l'utilisateur.

726
00:37:37,220 --> 00:37:38,800
Quand ils cliquent sur elle, nous sommes
allons faire ce que nous voulons,

727
00:37:38,800 --> 00:37:40,660
qui est de changer la couleur de fond.

728
00:37:40,660 --> 00:37:42,640
D'ACCORD?

729
00:37:42,640 --> 00:37:47,224
Donc, ce est pourquoi nous ne avons pas toutes les entrées,
nous avons simplement cette fonction anonyme.

730
00:37:47,224 --> 00:37:49,390
Et maintenant, nous allons en fait
d'écrire cette fonction.

731
00:37:49,390 --> 00:37:55,040
>> Donc, il ya un tas de façons vous
pourrait générer une couleur aléatoire.

732
00:37:55,040 --> 00:37:59,010
La façon dont je l'ai fait était de
générer trois nombres aléatoires

733
00:37:59,010 --> 00:38:01,910
et les convertir à un triple RVB.

734
00:38:01,910 --> 00:38:06,130
Donc, cela vous montre que quelques-uns fraîche
les choses que si vous êtes comme, "oh,

735
00:38:06,130 --> 00:38:08,464
Je ai besoin de générer un aléatoire
Numéro. "si vous googlé,

736
00:38:08,464 --> 00:38:09,630
ce est ce que vous trouverez.

737
00:38:09,630 --> 00:38:17,580
>> Nous avons donc trois différents
choses, Var, pas rouge à nouveau, vert.

738
00:38:17,580 --> 00:38:18,080
Droite?

739
00:38:18,080 --> 00:38:20,740
Ce sont donc les trois
choses qui font une couleur.

740
00:38:20,740 --> 00:38:22,220
Bleu, rouge et vert.

741
00:38:22,220 --> 00:38:22,960
Cool.

742
00:38:22,960 --> 00:38:27,050
Et ce que nous pouvons faire, ce est que nous savons
qu'il doit être comprise entre 255,

743
00:38:27,050 --> 00:38:30,140
et si vous avez regardé un peu de
Générateur de nombres aléatoires,

744
00:38:30,140 --> 00:38:36,000
vous pourriez obtenir quelque chose comme les mathématiques
points aléatoires, qui, si vous regardez cette place

745
00:38:36,000 --> 00:38:39,230
renvoie à un certain nombre
entre zéro et un.

746
00:38:39,230 --> 00:38:39,980
D'ACCORD?

747
00:38:39,980 --> 00:38:44,470
Et ce nombre faire notre
Triplets RVB aller entre les deux?

748
00:38:44,470 --> 00:38:47,240
Zéro et quoi?

749
00:38:47,240 --> 00:38:49,000
Que peuvent-ils aller jusqu'à?

750
00:38:49,000 --> 00:38:49,950
255.

751
00:38:49,950 --> 00:38:53,320
Donc, si les mathématiques dot aléatoire
passe entre zéro et un,

752
00:38:53,320 --> 00:38:56,365
comment pourrions-nous vouloir convertir ce?

753
00:38:56,365 --> 00:38:56,990
Public: Durée?

754
00:38:56,990 --> 00:38:57,830
ALLISON BUCHHOLTZ-UA: Oui, exactement.

755
00:38:57,830 --> 00:38:58,677
Le temps est donc 255.

756
00:38:58,677 --> 00:39:00,888
>> AUDIENCE: [inaudible]
Ce est comme [inaudible].

757
00:39:00,888 --> 00:39:02,471
ALLISON BUCHHOLTZ-UA: Math dot aléatoire.

758
00:39:02,471 --> 00:39:03,096
AUDIENCE: Cool.

759
00:39:03,096 --> 00:39:04,580
ALLISON BUCHHOLTZ-UA: Oui.

760
00:39:04,580 --> 00:39:06,300
JavaScript prend juste soin de vous.

761
00:39:06,300 --> 00:39:07,580
D'ACCORD.

762
00:39:07,580 --> 00:39:09,360
Donc, nous pouvons le faire pour tout cela.

763
00:39:09,360 --> 00:39:10,540
Droite?

764
00:39:10,540 --> 00:39:16,480
Math dot moments aléatoires 255.

765
00:39:16,480 --> 00:39:17,740
Copiez ce.

766
00:39:17,740 --> 00:39:18,820
Cool.

767
00:39:18,820 --> 00:39:23,350
Donc, la chose est, cela peut
pas retourner un entier.

768
00:39:23,350 --> 00:39:24,080
Droite?

769
00:39:24,080 --> 00:39:26,450
Peut-être que nous obtenons un nombre
entre zéro et un,

770
00:39:26,450 --> 00:39:32,150
et il l'amène à être légèrement
off et nos RGBs ne peuvent pas être flotteurs.

771
00:39:32,150 --> 00:39:33,360
Ils doivent être entiers.

772
00:39:33,360 --> 00:39:37,610
Donc, si vous avez essayé cela, ce serait sans doute
avoir un comportement erratique.

773
00:39:37,610 --> 00:39:38,810
Il serait un peu funky.

774
00:39:38,810 --> 00:39:43,200
Donc, ce que nous faisons est que nous voulons faire
assurer que ceux-ci sont arrondis,

775
00:39:43,200 --> 00:39:45,400
et vous pourriez compléter de toute façon.

776
00:39:45,400 --> 00:39:47,110
Je ai arrondi avec plancher.

777
00:39:47,110 --> 00:39:49,680
Donc, je ai toujours fait en sorte
qu'il arrondi.

778
00:39:49,680 --> 00:39:54,440
Mais aller hors de la simplicité
était de simplement obtenir un nombre aléatoire,

779
00:39:54,440 --> 00:39:57,920
comment pensez-vous que nous
pourrait-chaussée ce numéro?

780
00:39:57,920 --> 00:40:00,720
Il est très similaire.

781
00:40:00,720 --> 00:40:02,810
Toute idée?

782
00:40:02,810 --> 00:40:06,450
Donc, si aléatoire était juste mathématiques dot
aléatoire, donc pensez-vous que nous ferions étage?

783
00:40:06,450 --> 00:40:09,670
Math-de-chaussée de points.

784
00:40:09,670 --> 00:40:11,340
Et vous pouvez également faire des mathématiques dot plafond.

785
00:40:11,340 --> 00:40:14,030
Round est une sorte de ambiguë
parce que vous ne avez pas

786
00:40:14,030 --> 00:40:16,110
savoir se il faut arrondir ou arrondi à l'inférieur.

787
00:40:16,110 --> 00:40:20,797
Donc, généralement nous le faisons toujours mathématiques
chaussée point, mathématiques dot plafond.

788
00:40:20,797 --> 00:40:21,380
Mais honestly--

789
00:40:21,380 --> 00:40:22,780
>> Public: Est-ce que toute l'étage plus bas?

790
00:40:22,780 --> 00:40:24,740
>> ALLISON BUCHHOLTZ-UA: Plancher arrondit.

791
00:40:24,740 --> 00:40:26,990
Et ce est juste un choix de ma part.

792
00:40:26,990 --> 00:40:32,370
>> Alors maintenant, nous avons nos trois numéros
qui ont été générées de façon aléatoire,

793
00:40:32,370 --> 00:40:36,610
et ce que nous allons faire maintenant, ce est que nous sommes
aller juste pour changer le fond.

794
00:40:36,610 --> 00:40:37,310
D'ACCORD?

795
00:40:37,310 --> 00:40:41,490
Donc, nous avons déjà notre
sorte de fond stockées

796
00:40:41,490 --> 00:40:43,280
dans cet élément appelé fond.

797
00:40:43,280 --> 00:40:47,300
Donc, ce que vous remarquerez est, si
vous avez joué autour avec cela,

798
00:40:47,300 --> 00:40:50,460
nous voulons changer le style.

799
00:40:50,460 --> 00:40:53,812
Et ce est quelque chose qui sorte de
vous Google et comprendre,

800
00:40:53,812 --> 00:40:55,020
voudrait comment changer la couleur.

801
00:40:55,020 --> 00:40:59,210
>> Mais la façon dont vous accédez à cette couleur est
fond dot dot de fond style.

802
00:40:59,210 --> 00:41:03,490
Donc, cela veut dire donné
cet objet, fond,

803
00:41:03,490 --> 00:41:06,920
qui se réfère à ce que
Id élément là-haut,

804
00:41:06,920 --> 00:41:10,690
nous allons regarder le
le style dans le style

805
00:41:10,690 --> 00:41:13,280
nous allons regarder le fond.

806
00:41:13,280 --> 00:41:14,270
D'ACCORD?

807
00:41:14,270 --> 00:41:17,630
Et si vous allez et regardez cette place,
il pourrait faire un peu plus de sens,

808
00:41:17,630 --> 00:41:21,930
mais ce est fondamentalement juste dit,
"Donnez-moi cet attribut très spécifique

809
00:41:21,930 --> 00:41:25,770
de ce que je ai défini plus tôt. "

810
00:41:25,770 --> 00:41:32,340
Donc, ce que nous sommes en train de changer à est
certains RVB, parce que ce est logique.

811
00:41:32,340 --> 00:41:34,780
Nous utilisons RVB triple, non?

812
00:41:34,780 --> 00:41:41,530
Et nous have-- Je veux me assurer que je
obtenir le bon nombre de citations ici.

813
00:41:41,530 --> 00:41:43,940
Donc, ce que nous faisons est que nous avons
RGB, et nous allons

814
00:41:43,940 --> 00:41:46,800
to-- ce est comme
concaténation, qui est rouge.

815
00:41:46,800 --> 00:41:50,030

816
00:41:50,030 --> 00:41:52,610
Et puis nous voulons une certaine virgule.

817
00:41:52,610 --> 00:41:59,925
Et puis nous voulons plus vert,
puis certains virgule, et un peu de bleu.

818
00:41:59,925 --> 00:42:10,640

819
00:42:10,640 --> 00:42:14,120
>> De sorte que ces avantages tout
dire comme la concaténation.

820
00:42:14,120 --> 00:42:19,810
Donc, ce est juste de créer ce
chaîne qui se passe au sein de RVB.

821
00:42:19,810 --> 00:42:20,310
D'ACCORD?

822
00:42:20,310 --> 00:42:23,200

823
00:42:23,200 --> 00:42:26,684
>> AUDIENCE: [inaudible], plus ensuite
l'un plus vert puis rouge.

824
00:42:26,684 --> 00:42:30,163
>> ALLISON BUCHHOLTZ-UA: Ouais,
parce que je ai raté cela.

825
00:42:30,163 --> 00:42:30,890
L'amende infligée à celui-là.

826
00:42:30,890 --> 00:42:32,110
Oh, attendez.

827
00:42:32,110 --> 00:42:32,610
Non.

828
00:42:32,610 --> 00:42:36,770
Parce que je dois me assurer
que je ai eu tous ces droite.

829
00:42:36,770 --> 00:42:39,680

830
00:42:39,680 --> 00:42:43,950
Je vais donc expliquer en momento uno.

831
00:42:43,950 --> 00:42:47,040
Vert, bleu, parfait.

832
00:42:47,040 --> 00:42:47,971
Maintenant, je ai fini.

833
00:42:47,971 --> 00:42:48,470
Je crois.

834
00:42:48,470 --> 00:42:51,570

835
00:42:51,570 --> 00:42:52,530
>> D'ACCORD.

836
00:42:52,530 --> 00:42:58,085
Donc, ce que ce est, ce est que fond
va être réglé sur une chaîne de caractères.

837
00:42:58,085 --> 00:42:58,585
Droite?

838
00:42:58,585 --> 00:42:59,710
Ce est ce que nous avons ici.

839
00:42:59,710 --> 00:43:05,870
Il va y avoir une certaine RVB 255 virgule
255 virgule zéro, ou tout numéro que vous

840
00:43:05,870 --> 00:43:06,512
y at-il.

841
00:43:06,512 --> 00:43:08,220
Nous faisons donc ici,
nous avons une chaîne de caractères.

842
00:43:08,220 --> 00:43:11,910
Et ce que nous voulons faire, ce est que nous sommes
sorte de créer dynamiquement

843
00:43:11,910 --> 00:43:14,010
que lorsque nous avons effectivement exécuter ce programme.

844
00:43:14,010 --> 00:43:16,570
Donc, ce est une chaîne de caractères.

845
00:43:16,570 --> 00:43:20,290
De plus concatène avec
la valeur que le rouge a,

846
00:43:20,290 --> 00:43:23,320
qui concatène avec un
virgule, qui concatène

847
00:43:23,320 --> 00:43:26,090
avec ce qui est vert, et
ainsi de suite, et ainsi de suite.

848
00:43:26,090 --> 00:43:26,660
D'ACCORD?

849
00:43:26,660 --> 00:43:32,210
Jusqu'à la fin, qui est la
fermeture de parenthèses ce RGB ici.

850
00:43:32,210 --> 00:43:32,800
D'ACCORD?

851
00:43:32,800 --> 00:43:37,230
>> Alors qu'est-ce que cela va
générer une certaine commande vraiment

852
00:43:37,230 --> 00:43:42,770
ce est-RGB de trois nombres
ce contexte est maintenant réglé.

853
00:43:42,770 --> 00:43:43,940
D'ACCORD?

854
00:43:43,940 --> 00:43:46,510
Donc, nous allons voir si cela fonctionne.

855
00:43:46,510 --> 00:43:49,720
Je espère que ce est le cas, parce que si elle
ne pas, je vais être triste réel.

856
00:43:49,720 --> 00:43:50,250
Oh non.

857
00:43:50,250 --> 00:43:52,710
OK, tenir le coup.

858
00:43:52,710 --> 00:43:56,730
Certainement fond
dot dot fond de style.

859
00:43:56,730 --> 00:43:59,569
Je suis définitivement disparus
quelque chose juste petite.

860
00:43:59,569 --> 00:44:00,610
Ne pas vous les gars détestent cela?

861
00:44:00,610 --> 00:44:04,020
Lorsque ce est juste un petit peu d'erreur?

862
00:44:04,020 --> 00:44:04,990
Fond Tout-Puissant.

863
00:44:04,990 --> 00:44:08,391

864
00:44:08,391 --> 00:44:08,890
RVB.

865
00:44:08,890 --> 00:44:09,765
>> AUDIENCE: [inaudible]

866
00:44:09,765 --> 00:44:11,729

867
00:44:11,729 --> 00:44:12,770
ALLISON BUCHHOLTZ-UA: Non

868
00:44:12,770 --> 00:44:14,050
Je ai essayé ceci avant la classe.

869
00:44:14,050 --> 00:44:16,570
Je ai tout ce que je faisais avant
classe dans le cas je étais comme,

870
00:44:16,570 --> 00:44:17,970
"Attends, ce que je ne ai fait de mal?"

871
00:44:17,970 --> 00:44:23,190
Parce que je étais comme, «je vais probablement
ce gâchis à un moment donné ".

872
00:44:23,190 --> 00:44:24,150
Plus vert.

873
00:44:24,150 --> 00:44:26,250
Tout semble que ce est
concaténé correctement.

874
00:44:26,250 --> 00:44:29,620

875
00:44:29,620 --> 00:44:30,520
D'ACCORD.

876
00:44:30,520 --> 00:44:31,870
>> AUDIENCE: [inaudible]

877
00:44:31,870 --> 00:44:33,810
>> ALLISON BUCHHOLTZ-UA: Oh, là vous allez.

878
00:44:33,810 --> 00:44:35,520
Ce est ce que je avais besoin.

879
00:44:35,520 --> 00:44:36,805
Regardez ça.

880
00:44:36,805 --> 00:44:40,090
Tiffany pour sauver.

881
00:44:40,090 --> 00:44:40,590
Parfait.

882
00:44:40,590 --> 00:44:41,090
D'ACCORD.

883
00:44:41,090 --> 00:44:43,834
Maintenant, nous allons voir si cela fonctionne.

884
00:44:43,834 --> 00:44:44,816
Oh mon Dieu.

885
00:44:44,816 --> 00:44:45,641
D'ACCORD.

886
00:44:45,641 --> 00:44:46,140
Attendez.

887
00:44:46,140 --> 00:44:48,280
>> AUDIENCE: Space après la seconde plus.

888
00:44:48,280 --> 00:44:50,310
>> ALLISON BUCHHOLTZ-UA: Lequel?

889
00:44:50,310 --> 00:44:52,910
Oh, attends, attends.

890
00:44:52,910 --> 00:44:54,870
usure de l'espace?

891
00:44:54,870 --> 00:44:57,209
>> AUDIENCE: Deuxième avantage dans
la concaténation vert.

892
00:44:57,209 --> 00:44:58,250
ALLISON BUCHHOLTZ-UA: Oh.

893
00:44:58,250 --> 00:44:59,570
PUBLIC: Il n'y a pas d'espace
après la ainsi, ouais.

894
00:44:59,570 --> 00:45:00,790
ALLISON BUCHHOLTZ-UA: Vous
ne ont pas besoin que, mais-

895
00:45:00,790 --> 00:45:01,190
AUDIENCE: Oh, vous ne avez pas?

896
00:45:01,190 --> 00:45:01,910
ALLISON BUCHHOLTZ-UA: Il semble assez.

897
00:45:01,910 --> 00:45:02,530
AUDIENCE: OK.

898
00:45:02,530 --> 00:45:03,030
D'ACCORD.

899
00:45:03,030 --> 00:45:05,170
>> ALLISON BUCHHOLTZ UA:
Voyons voir si cela fonctionne.

900
00:45:05,170 --> 00:45:05,670
D'ACCORD.

901
00:45:05,670 --> 00:45:07,836
Je suis évidemment à ne pas
cette démo, qui me rappelle

902
00:45:07,836 --> 00:45:12,810
d'une conférence la semaine dernière,
mais je sais que cela va fonctionner.

903
00:45:12,810 --> 00:45:15,860
Je sais que cela va fonctionner.

904
00:45:15,860 --> 00:45:16,580
Si proche.

905
00:45:16,580 --> 00:45:22,330
Sauf Je ai accidentellement supprimé
mon script sur celui-ci.

906
00:45:22,330 --> 00:45:24,035
Non, il est parti de points js.

907
00:45:24,035 --> 00:45:25,776
OK tenir.

908
00:45:25,776 --> 00:45:28,650
Je vais copier, et je suis aussi
juste aller tout supprimer,

909
00:45:28,650 --> 00:45:30,108
parce que je ai eu ce travail plus tôt.

910
00:45:30,108 --> 00:45:32,470

911
00:45:32,470 --> 00:45:33,770
>> Je promets cela fonctionne.

912
00:45:33,770 --> 00:45:36,160
Sinon, je vais vous montrer ce que Tommy est.

913
00:45:36,160 --> 00:45:38,890
Et il.

914
00:45:38,890 --> 00:45:42,380
>> AUDIENCE: Vous faites référence partie
dot CSS, et ce est un point de parti js.

915
00:45:42,380 --> 00:45:45,940
>> ALLISON BUCHHOLTZ-UA: Ah, bien
ici est partie js de points.

916
00:45:45,940 --> 00:45:49,187
OK, qu'est-ce que je fais de différent?

917
00:45:49,187 --> 00:45:50,520
OK, nous allons voir si cela fonctionne maintenant.

918
00:45:50,520 --> 00:45:54,180

919
00:45:54,180 --> 00:45:54,980
Bam.

920
00:45:54,980 --> 00:46:02,110
Donc, je ne sais pas ce que je ai fait différemment,
mais ce est ce qui devrait arriver.

921
00:46:02,110 --> 00:46:03,230
Plutôt cool.

922
00:46:03,230 --> 00:46:06,650
Je ai cliqué sur ce, comme toujours.

923
00:46:06,650 --> 00:46:11,185
Mais nous pouvons essayer de voir ce que je ai fait
différemment que celui-ci avait.

924
00:46:11,185 --> 00:46:14,560
Je ne sais pas pour vous les gars, mais ce
regarde essentiellement ce que je viens d'écrire.

925
00:46:14,560 --> 00:46:17,950
Il était probablement un manquant
virgule est quelque part mon truc.

926
00:46:17,950 --> 00:46:22,064
En fait, après, je pense que je manquais
un point-virgule ici effectivement.

927
00:46:22,064 --> 00:46:24,230
Mais je ne pouvais pas le voir parce que
il était hors de l'écran.

928
00:46:24,230 --> 00:46:29,040
>> Mais si l'on remarque, ce est assez
près exactement ce que je viens d'écrire.

929
00:46:29,040 --> 00:46:33,010
Je pense que probablement la partie la plus difficile de
ce est juste un peu de cette bonne chose

930
00:46:33,010 --> 00:46:36,830
ici, la compréhension
ce qu'il fait là.

931
00:46:36,830 --> 00:46:42,230
Ces sortes de choses que vous apprenez
vraiment juste par googler et honnêtement

932
00:46:42,230 --> 00:46:42,880
juste essayer.

933
00:46:42,880 --> 00:46:46,770
Si vous pensez qu'il ya une certaine
attribut, il l'est probablement.

934
00:46:46,770 --> 00:46:48,382
Alors, essayez.

935
00:46:48,382 --> 00:46:49,090
Voir ce qui se passe.

936
00:46:49,090 --> 00:46:53,000
Comme je l'ai dit, il ya beaucoup de
l'expérimentation avec JavaScript,

937
00:46:53,000 --> 00:46:56,810
et PHP, et tout ce qui
des trucs, et CSS en particulier.

938
00:46:56,810 --> 00:47:00,046
Ce est le seul vrai
façon de le comprendre.

939
00:47:00,046 --> 00:47:07,100
>> OK, donc après ce fiasco avec le parti
js points, nous avons deux autres options.

940
00:47:07,100 --> 00:47:10,650
Nous avons horloge ou Twitter.

941
00:47:10,650 --> 00:47:12,190
Ils sont à la fois intéressant.

942
00:47:12,190 --> 00:47:17,720
Peut-être pas aussi amusant que de parti,
qui a eu un peu fraîche stroboscopique

943
00:47:17,720 --> 00:47:19,595
chose à la fin.

944
00:47:19,595 --> 00:47:21,714
Avez-vous les gars avez une préférence?

945
00:47:21,714 --> 00:47:22,380
AUDIENCE: Horloge?

946
00:47:22,380 --> 00:47:22,950
ALLISON BUCHHOLTZ-UA: Horloge?

947
00:47:22,950 --> 00:47:23,450
D'ACCORD.

948
00:47:23,450 --> 00:47:25,390
Cool.

949
00:47:25,390 --> 00:47:30,460
>> Encore une fois, nous avons notre
vide fichier JavaScript.

950
00:47:30,460 --> 00:47:35,800
Et comme nous le voyons ici, nous
avoir une très simple HTML.

951
00:47:35,800 --> 00:47:40,010
Nous avons notre feuille de style, qui vient
Formats ce qu'il devrait ressembler.

952
00:47:40,010 --> 00:47:42,860
Nous avons notre div avec
un ID de l'horloge, qui

953
00:47:42,860 --> 00:47:44,420
dit simplement, "cela devrait être une horloge."

954
00:47:44,420 --> 00:47:47,650
Et nous avons notre lien
à notre fichier JavaScript

955
00:47:47,650 --> 00:47:51,400
Ce est en fait aller à
générer notre horloge pour nous.

956
00:47:51,400 --> 00:47:56,060
Parce que le truc cool, ce est que vous pouvez
définir JavaScript pour actualiser automatiquement

957
00:47:56,060 --> 00:47:56,963
lui-même.

958
00:47:56,963 --> 00:47:57,810
D'ACCORD?

959
00:47:57,810 --> 00:48:01,580
Ainsi, au lieu d'attendre la
utilisateur pour frapper Actualiser sur une page

960
00:48:01,580 --> 00:48:03,840
de sorte que vous pouvez obtenir
temps jour, JavaScript

961
00:48:03,840 --> 00:48:06,760
peut mettre à jour mais il aime.

962
00:48:06,760 --> 00:48:12,082
>> Donc, comme avec notre dernier, nous voulions
pour accéder à notre arrière-plan, à droite?

963
00:48:12,082 --> 00:48:14,790
Alors, que pensez-vous pourrait être la
première chose que nous voulons faire ici?

964
00:48:14,790 --> 00:48:19,538
Si nous sommes en quelque sorte d'aller au large
ce genre de paradigme ici?

965
00:48:19,538 --> 00:48:22,200
Nous voulons probablement
accéder à notre horloge, non?

966
00:48:22,200 --> 00:48:24,724
Donc, nous avons une certaine var
horloge, qui equals--

967
00:48:24,724 --> 00:48:26,140
qu'est-ce qu'on pense que ça va être?

968
00:48:26,140 --> 00:48:29,290

969
00:48:29,290 --> 00:48:42,670
Document obtenir dot élément by-- Je ai aussi
l'amour et de notre Sublime-- Id Id est horloge.

970
00:48:42,670 --> 00:48:43,585
Point-virgule.

971
00:48:43,585 --> 00:48:45,710
Vous avez pour vous assurer d'obtenir
ces points-virgules, cette fois,

972
00:48:45,710 --> 00:48:47,835
parce que je me sens comme ça
le problème était la dernière fois.

973
00:48:47,835 --> 00:48:55,980
OK, comme je disais juste à essayer
avoir JavaScript se rafraîchir,

974
00:48:55,980 --> 00:48:59,655
il ya cette grande fonction, je
sais que ce est bien pratique l'année dernière,

975
00:48:59,655 --> 00:49:02,780
Je ne suis pas sûr que ce est très pratique pour cette
pset, mais ça se appelle intervalle déterminé.

976
00:49:02,780 --> 00:49:05,640

977
00:49:05,640 --> 00:49:08,200
Et ce est en fait vraiment
cool si vous les gars font rien

978
00:49:08,200 --> 00:49:11,460
avec le temps ou d'obtenir
des informations à jour.

979
00:49:11,460 --> 00:49:13,700
Sur un site Web pour une finale
projet, ce est probablement

980
00:49:13,700 --> 00:49:16,240
une fonction que vous voulez
se familiariser avec des super.

981
00:49:16,240 --> 00:49:19,730
Alors, que définir l'intervalle ne est que
nous allons lui donner une fonction,

982
00:49:19,730 --> 00:49:21,830
et combien de fois il se doit
appeler cette fonction.

983
00:49:21,830 --> 00:49:22,430
D'ACCORD?

984
00:49:22,430 --> 00:49:26,890
>> Donc dans ce cas, nous allons juste
créer à nouveau une fonction anonyme,

985
00:49:26,890 --> 00:49:31,530
OK, ça va pour obtenir
notre jour, et notre temps,

986
00:49:31,530 --> 00:49:33,780
puis mettre à jour les choses et l'afficher.

987
00:49:33,780 --> 00:49:35,130
Donc, nous allons vous inquiétez à ce sujet.

988
00:49:35,130 --> 00:49:39,120
Nous serons comme générer horloge ici.

989
00:49:39,120 --> 00:49:41,750
Mais ce que nous avons besoin est la façon dont
souvent pour l'actualiser.

990
00:49:41,750 --> 00:49:43,930
Donc dans ce cas, ce est juste millisecondes.

991
00:49:43,930 --> 00:49:46,877
Donc, nous allons juste
faire 100 millisecondes.

992
00:49:46,877 --> 00:49:48,210
Bien sûr, tout à fait arbitraire.

993
00:49:48,210 --> 00:49:50,600
Si vous vouliez mettre à jour
beaucoup plus lentement, vous pourriez.

994
00:49:50,600 --> 00:49:53,300
Nous pouvons déranger
avec l'intervalle de jeu,

995
00:49:53,300 --> 00:49:57,240
comment grand notre intervalle est après que nous obtenions
une horloge de travail, qui je espère que je vais

996
00:49:57,240 --> 00:49:59,660
accès.

997
00:49:59,660 --> 00:50:04,110
Donc, ce est juste de dire, "OK, appel
cette fonction toutes les 100 millisecondes. "

998
00:50:04,110 --> 00:50:04,805
D'ACCORD?

999
00:50:04,805 --> 00:50:07,280
Ce est tout ce qu'il fait.

1000
00:50:07,280 --> 00:50:12,290
>> Donc ce que nous voulons que notre fonction
faire, ce est que nous voulons avoir une date

1001
00:50:12,290 --> 00:50:14,200
et quelque temps ce est
nous allons avoir.

1002
00:50:14,200 --> 00:50:19,740
Afin que nous puissions commencer avec notre
Date égale quelque chose,

1003
00:50:19,740 --> 00:50:22,708
et notre temps est égale à quelque chose
que nous ne savons pas encore.

1004
00:50:22,708 --> 00:50:26,070

1005
00:50:26,070 --> 00:50:29,300
Ou fait, nous avons juste besoin ce jour, parce
Date va tout inclure.

1006
00:50:29,300 --> 00:50:34,310

1007
00:50:34,310 --> 00:50:40,010
Encore une fois si vous venez de Google rien
ce que vous voulez faire, si vous écrivez, "OK,

1008
00:50:40,010 --> 00:50:41,980
Je veux avoir le temps
via JavaScript, «il

1009
00:50:41,980 --> 00:50:45,890
vous donnera cette grande
fonction appelée date de get.

1010
00:50:45,890 --> 00:50:48,664
Littéralement, la plupart des choses
que vous voulez faire,

1011
00:50:48,664 --> 00:50:50,830
JavaScript va avoir
il fait pour vous déjà.

1012
00:50:50,830 --> 00:50:55,770
Donc, ce est littéralement comme neuf
Connaître la date, qui est creating--

1013
00:50:55,770 --> 00:50:58,600
ou nouvelle date, rather--
qui génère

1014
00:50:58,600 --> 00:51:03,690
un objet qui représente une date.

1015
00:51:03,690 --> 00:51:08,200
>> Et ce que nous allons faire ici est
ce est-- Je vais écrire ce,

1016
00:51:08,200 --> 00:51:10,820
puis expliquer ce qu'il fait.

1017
00:51:10,820 --> 00:51:12,560
Donc, je vais me assurer que je reçois ce droit.

1018
00:51:12,560 --> 00:51:17,950

1019
00:51:17,950 --> 00:51:23,440
>> OK, donc ce que cette fonction
fait, ce est que nous sommes juste

1020
00:51:23,440 --> 00:51:30,680
créer le code HTML qui est en fait
va aller au sein de notre div id de l'horloge.

1021
00:51:30,680 --> 00:51:34,610
Donc ce que cela va faire
est tout simplement générer une chaîne de caractères, OK?

1022
00:51:34,610 --> 00:51:38,510
Ce est ensuite va être
transplantées dans notre HTML.

1023
00:51:38,510 --> 00:51:42,130
Fondamentalement, ce qu'il va faire est
quelle que soit nous-- ce que je vais vous montrer

1024
00:51:42,130 --> 00:51:49,070
ce est que tout ce que nous disons est HTML,
nous allons remplacer ce texte ici

1025
00:51:49,070 --> 00:51:51,090
avec tout ce que HTML est.

1026
00:51:51,090 --> 00:51:56,390
Donc, cela va permettre
nous changeons notre point horloge

1027
00:51:56,390 --> 00:52:00,940
HTML d'être juste le texte de cette
devrait être une horloge, de montrer effectivement

1028
00:52:00,940 --> 00:52:05,630
les numéros et les choses que nous nous soucions
à propos, et effectivement heures.

1029
00:52:05,630 --> 00:52:09,810
>> Donc, ce que nous allons faire, ce est que nous sommes
va commencer à générer le code HTML.

1030
00:52:09,810 --> 00:52:16,520
Ainsi, de la même manière que nous avons utilisé
à faire, plus égaux pour les entiers,

1031
00:52:16,520 --> 00:52:20,461
vous pouvez maintenant le faire pour les chaînes,
sauf qu'il va les concaténer.

1032
00:52:20,461 --> 00:52:20,960
Droite?

1033
00:52:20,960 --> 00:52:26,070
Comme nous l'avons vu avec le point du parti js, ce seulement
concatène toutes ces choses ensemble.

1034
00:52:26,070 --> 00:52:31,970
Ainsi, vous pouvez concaténer différents bits
HTML à partir de variables, ou des morceaux de cordes

1035
00:52:31,970 --> 00:52:33,750
que vous écrivez
vous-même, et ce juste

1036
00:52:33,750 --> 00:52:38,650
permet vraiment de dynamique
générer du HTML, qui est plutôt cool.

1037
00:52:38,650 --> 00:52:42,040
Donc, si vous avez quelque chose
très utilisateur spécifique,

1038
00:52:42,040 --> 00:52:44,130
cela peut vous permettre de faire cela.

1039
00:52:44,130 --> 00:52:47,550
>> Donc, nous avons HTML, pour Je vais
essayer de me assurer d'avoir ce droit.

1040
00:52:47,550 --> 00:52:49,890
Donc, nous allons faire un peu de tête h1.

1041
00:52:49,890 --> 00:52:53,610
Donc, ce est important de réaliser ici
ce est que ce est en fait juste HTML.

1042
00:52:53,610 --> 00:52:54,460
Droite?

1043
00:52:54,460 --> 00:52:56,610
Nous vous écrivons réelle
code HTML ici, ce est

1044
00:52:56,610 --> 00:53:01,090
pas seulement une chaîne dans la normale
manière que nous aurions penser.

1045
00:53:01,090 --> 00:53:02,930
Donc, nous avons un certain HTML.

1046
00:53:02,930 --> 00:53:04,940
Ceci est considéré comme une chaîne ici cependant.

1047
00:53:04,940 --> 00:53:10,380
Et nous faisons la date dot-- nous
vouloir obtenir nos heures.

1048
00:53:10,380 --> 00:53:12,910
Encore une fois, si vous étiez à regarder
quoi que ce soit sur la date,

1049
00:53:12,910 --> 00:53:16,160
il vous dira ce sont tous
les attributs de cette date a.

1050
00:53:16,160 --> 00:53:17,670
Et voici ce que vous pouvez utiliser sur elle.

1051
00:53:17,670 --> 00:53:20,620
Donc, il a probablement des choses comme
obtenir heures, et obtenir des minutes,

1052
00:53:20,620 --> 00:53:24,669
et obtenir des secondes, et obtenir des millisecondes,
et qui sait quoi d'autre qu'ils ont.

1053
00:53:24,669 --> 00:53:27,210
Mais si vous regardez dans le
la documentation, tout sera là.

1054
00:53:27,210 --> 00:53:31,980
>> Nous avons donc obtenir heures,
puis nous voudrions

1055
00:53:31,980 --> 00:53:35,614
pour concaténer que je suis with--
va déplacer ce ici.

1056
00:53:35,614 --> 00:53:38,780
Donc, si nous générons en ce moment, nous sommes
effectivement générer le temps, non?

1057
00:53:38,780 --> 00:53:43,590
Nous avons heures, et puis ce est
entre les heures et minutes?

1058
00:53:43,590 --> 00:53:45,080
Vous avez un point-virgule, non?

1059
00:53:45,080 --> 00:53:48,010
Donc, nous voulons faire un peu de virgule ici.

1060
00:53:48,010 --> 00:53:51,780
Et puis nous voulons obtenir notre
minutes, de la même manière

1061
00:53:51,780 --> 00:53:56,450
que nous avons la date dot obtenir heures,
comment pourrions-nous obtenir nos minutes?

1062
00:53:56,450 --> 00:54:01,542
Il est littéralement courant Recevez dot
minutes, que je aime en quelque sorte.

1063
00:54:01,542 --> 00:54:03,250
Ce est comme, "oh, comment
puis-je obtenir mes minutes? "

1064
00:54:03,250 --> 00:54:05,850
Je viens d'obtenir mes minutes.

1065
00:54:05,850 --> 00:54:07,500
>> D'ACCORD.

1066
00:54:07,500 --> 00:54:10,990
Et puis nous avons un autre colon ici.

1067
00:54:10,990 --> 00:54:16,350
Et puis si nous voulons obtenir notre
seconde, comment pourrions-nous obtenir notre seconde?

1068
00:54:16,350 --> 00:54:17,400
Date de dot obtenir secondes.

1069
00:54:17,400 --> 00:54:20,390

1070
00:54:20,390 --> 00:54:21,590
Je pense que ce est plutôt cool.

1071
00:54:21,590 --> 00:54:23,589
Et ce qui est important de
réaliser, ce est que nous avons aussi

1072
00:54:23,589 --> 00:54:31,730
besoin de fermer notre balise HTML ici, parce que
il devrait encore être HTML valide, alors h1.

1073
00:54:31,730 --> 00:54:33,481
Cool.

1074
00:54:33,481 --> 00:54:43,110
>> Donc, après cela, nous pouvons faire l'horloge
dot HTML interne est égale à HTML.

1075
00:54:43,110 --> 00:54:43,930
D'ACCORD?

1076
00:54:43,930 --> 00:54:46,470
Alors ne oubliez pas que je ai dit
HTML interne essentiellement

1077
00:54:46,470 --> 00:54:50,610
prend tout ce qui est entre le
deux balises dont nous avons parlé

1078
00:54:50,610 --> 00:54:54,470
et des inserts ou manipule
tout ce qui est là-dedans?

1079
00:54:54,470 --> 00:54:58,290
Donc ce que cela fait, si
nous revenons à notre horloge,

1080
00:54:58,290 --> 00:55:04,180
est que l'horloge se réfère à
tout dans ce div.

1081
00:55:04,180 --> 00:55:09,770
Ce est le HTML interne
Id de cette horloge div.

1082
00:55:09,770 --> 00:55:13,930
Et donc ça va changer pour
le code HTML que nous venons généré,

1083
00:55:13,930 --> 00:55:16,750
qui, qui, espérons-le,
espérons-le, nous l'espérons,

1084
00:55:16,750 --> 00:55:21,026
affiche le temps en ce moment.

1085
00:55:21,026 --> 00:55:23,960
Nous verrons.

1086
00:55:23,960 --> 00:55:25,170
Bien sûr.

1087
00:55:25,170 --> 00:55:26,860
Tant de questions techniques.

1088
00:55:26,860 --> 00:55:31,480
La just-- Allison je suis
hors jeu aujourd'hui mes gars.

1089
00:55:31,480 --> 00:55:34,136
OK, cela fonctionne.

1090
00:55:34,136 --> 00:55:35,760
Point horloge HTML interne.

1091
00:55:35,760 --> 00:55:42,097
Ce était HTML Vraiment?

1092
00:55:42,097 --> 00:55:43,180
Aussi ce est ce qui se passe.

1093
00:55:43,180 --> 00:55:48,750
Lorsque vous ne pouvez pas voir quelque chose que vous,
il suffit de regarder votre code source.

1094
00:55:48,750 --> 00:55:49,250
D'ACCORD.

1095
00:55:49,250 --> 00:55:51,912

1096
00:55:51,912 --> 00:55:54,870
Voulez-vous savoir une œuvre fraîche autour
que nous allons faire ici?

1097
00:55:54,870 --> 00:55:55,740
>> AUDIENCE: Pouvez-vous faire des majuscules?

1098
00:55:55,740 --> 00:55:56,580
Les lettres majuscules?

1099
00:55:56,580 --> 00:55:58,996
Parce que vous avez obtenir heures,
et ensuite obtenir minutes.

1100
00:55:58,996 --> 00:56:02,590
>> ALLISON BUCHHOLTZ-UA: Il
est d'obtenir heures et get-- oh.

1101
00:56:02,590 --> 00:56:04,945
Vous soient: étoile d'or.

1102
00:56:04,945 --> 00:56:08,114

1103
00:56:08,114 --> 00:56:09,030
Ce est un test, les gars.

1104
00:56:09,030 --> 00:56:13,630

1105
00:56:13,630 --> 00:56:17,330
Je vous promets qu'il travaillait avant la classe.

1106
00:56:17,330 --> 00:56:22,590
>> OK, mais quelque chose de cool de savoir est
que vous pouvez also-- si parfois

1107
00:56:22,590 --> 00:56:26,560
vos fichiers externes sont
obtenir un peu fou,

1108
00:56:26,560 --> 00:56:30,960
vous pouvez également juste les mettre droite
ici, ce qui tend à fixer les choses.

1109
00:56:30,960 --> 00:56:35,840
Sauf que ce est comme vraiment laid.

1110
00:56:35,840 --> 00:56:38,050
Cours de formater tout.

1111
00:56:38,050 --> 00:56:41,425
Assurez-vous que tout est joli.

1112
00:56:41,425 --> 00:56:41,925
D'ACCORD.

1113
00:56:41,925 --> 00:56:47,200

1114
00:56:47,200 --> 00:56:50,621
>> Je voulais faire toutes les démos fraîches,
et ils sont tout simplement pas en travaillant.

1115
00:56:50,621 --> 00:56:51,555
D'ACCORD.

1116
00:56:51,555 --> 00:56:53,890
Script var horloge.

1117
00:56:53,890 --> 00:57:00,350
Quoi qu'il en soit, ce qui est important est
que ce est la manière générale

1118
00:57:00,350 --> 00:57:01,870
que vous souhaitez formater JavaScript.

1119
00:57:01,870 --> 00:57:04,490
Comme vous pouvez le voir, il peut être
parfois très capricieux,

1120
00:57:04,490 --> 00:57:08,780
même quand il était littéralement
travailler il ya deux secondes.

1121
00:57:08,780 --> 00:57:11,820
Ou il n'y a pas deux secondes,
mais très, très récemment.

1122
00:57:11,820 --> 00:57:16,070
>> Donc, pour vous montrer ce que ça devrait ressembler,
et pour vous montrer que je ne suis pas fou,

1123
00:57:16,070 --> 00:57:19,730
et que tout est exactement le
même, ce est ce que ça devrait ressembler.

1124
00:57:19,730 --> 00:57:27,410
Vous allez juste faire partie supérieure
ici, et si vous affichez source de la page,

1125
00:57:27,410 --> 00:57:32,160
si vous remarquez, il a fait des
des choses folles, je simplifiées il.

1126
00:57:32,160 --> 00:57:35,710
En outre, le crédit à Tommy
McWilliam, qui fait

1127
00:57:35,710 --> 00:57:38,810
m'a aidée à créer ces exemples,
ce est pourquoi je sais qu'ils travaillent.

1128
00:57:38,810 --> 00:57:41,560
Parce que Tommy est un maître JavaScript.

1129
00:57:41,560 --> 00:57:43,180
Mais si l'on remarque, nous avons un certain ensemble.

1130
00:57:43,180 --> 00:57:45,170
Nous avons notre fonction d'horloge ici.

1131
00:57:45,170 --> 00:57:48,450
Ce est tout le code JavaScript
nous venons d'écrire, ou certaines d'entre elles.

1132
00:57:48,450 --> 00:57:51,470
Nous venons d'écrire celui-ci ici.

1133
00:57:51,470 --> 00:57:54,260
Et il a un supplément
fonction qui Tapis juste qu'il

1134
00:57:54,260 --> 00:57:57,790
en plaçant un zéro devant un
lettre ou devant un numéro se il est

1135
00:57:57,790 --> 00:57:59,412
un seul d'entre eux.

1136
00:57:59,412 --> 00:58:02,120
Donc, si vous remarquez, ce est assez
près exactement ce que nous venons d'écrire.

1137
00:58:02,120 --> 00:58:06,230
Vous avez une horloge variable
a notre élément, obtenir élément par ID,

1138
00:58:06,230 --> 00:58:07,252
qui est horloge.

1139
00:58:07,252 --> 00:58:08,960
Nous avons notre intervalle défini
fonction, ce est

1140
00:58:08,960 --> 00:58:12,670
une fonction anonyme
qui exécute tout cela.

1141
00:58:12,670 --> 00:58:16,940
Nous avons une certaine chaîne de départ
HTML que nous alors dynamiquement

1142
00:58:16,940 --> 00:58:20,750
générer en ayant une certaine
tête h1, concaténation

1143
00:58:20,750 --> 00:58:23,950
avec obtenir les heures, plus
notre côlon, plus obtenir

1144
00:58:23,950 --> 00:58:26,860
les minutes, plus un autre
colon, ainsi que nos secondes,

1145
00:58:26,860 --> 00:58:29,330
et enfin le code HTML de fin pour elle.

1146
00:58:29,330 --> 00:58:34,210
Et puis nous mettons à jour notre horloge
dot HTML interne au format HTML,

1147
00:58:34,210 --> 00:58:37,640
et nous mettons à jour toutes les 100 millisecondes.

1148
00:58:37,640 --> 00:58:39,060
D'ACCORD?

1149
00:58:39,060 --> 00:58:42,470
>> Je promets que je vois ne suis pas fou.

1150
00:58:42,470 --> 00:58:43,440
Je ne sais pas.

1151
00:58:43,440 --> 00:58:47,160
Je ne sais pas pourquoi il ne me aime pas.

1152
00:58:47,160 --> 00:58:54,030
Je me sens comme semble le même,
mais apparemment il me déteste.

1153
00:58:54,030 --> 00:58:59,600
>> Donc, nous allons voir si le troisième tour va mieux.

1154
00:58:59,600 --> 00:59:00,970
Nous sommes là pour voir.

1155
00:59:00,970 --> 00:59:02,910
Je ne suis pas sûr de savoir comment cela va aller.

1156
00:59:02,910 --> 00:59:06,700
Tout le monde est au moins de mettre le
contre, comme tout le thème général

1157
00:59:06,700 --> 00:59:08,480
de JavaScript, si?

1158
00:59:08,480 --> 00:59:15,660
Je espère que ce est au moins utile, plus
que de montrer que ce est un peu capricieux.

1159
00:59:15,660 --> 00:59:21,190
Mais votre jeu de problème sera très amusant.

1160
00:59:21,190 --> 00:59:22,590
Ça va être génial.

1161
00:59:22,590 --> 00:59:24,820
Ce ne sera pas tout à fait aussi fastidieuse
comme cela, je ne pense pas.

1162
00:59:24,820 --> 00:59:28,100
Vous obtenez réellement de
voir les choses vraiment cool.

1163
00:59:28,100 --> 00:59:31,734
>> Donc, last but not least,
nous allons essayer une Twitter.

1164
00:59:31,734 --> 00:59:32,900
Je suis vraiment peur maintenant, les gars.

1165
00:59:32,900 --> 00:59:35,762
Je ne sais pas comment cela va aller.

1166
00:59:35,762 --> 00:59:39,930
Mais juste pour vous donner un peu
plus de goût, et ce est effectivement

1167
00:59:39,930 --> 00:59:44,190
cordes et manipulation
entrées, ce que nous allons faire

1168
00:59:44,190 --> 00:59:50,960
est, si l'on remarque ici avec HTML--
celui-ci a un peu plus--

1169
00:59:50,960 --> 00:59:57,200
nous avons une certaine zone de texte, qui
correspond à cette zone de texte ici.

1170
00:59:57,200 --> 00:59:58,030
D'ACCORD?

1171
00:59:58,030 --> 01:00:00,420
Et cela a un ID de texte.

1172
01:00:00,420 --> 01:00:04,520
Nous restylée un peu
avec une certaine largeur et la hauteur

1173
01:00:04,520 --> 01:00:07,310
que nous avons prédéterminée,
et nous avons H1,

1174
01:00:07,310 --> 01:00:11,260
qui vient de notre tête est celui qui
représente nos caractères.

1175
01:00:11,260 --> 01:00:14,570
Nous lui avons donné un peu de Id
caractères restants,

1176
01:00:14,570 --> 01:00:18,660
puis nous avons un script
ici, que je suis vraiment

1177
01:00:18,660 --> 01:00:20,790
espérant troisième fois de
le charme ici, les gars.

1178
01:00:20,790 --> 01:00:26,750
>> Donc ce que nous voulons faire,
dans la même veine générale

1179
01:00:26,750 --> 01:00:31,480
que nous avons fait avec js horloge de points
et du parti dot js Comme nous l'avons remarqué,

1180
01:00:31,480 --> 01:00:35,980
ce est que nous avons effectivement commencé par l'accaparement
les choses qui nous tiennent à coeur, non?

1181
01:00:35,980 --> 01:00:42,330
Donc dans ce cas, il ya deux
les choses qui nous tiennent à, OK?

1182
01:00:42,330 --> 01:00:47,199
Une chose que nous sommes en fait assez
étudier et, à partir des données de dessin,

1183
01:00:47,199 --> 01:00:48,990
et une chose qui
nous sommes en train de changer.

1184
01:00:48,990 --> 01:00:52,110

1185
01:00:52,110 --> 01:00:53,730
Donc, il ya notre HTML.

1186
01:00:53,730 --> 01:01:00,370
Si ce est notre page web ici, ce est
les données que nous étudions?

1187
01:01:00,370 --> 01:01:03,860
Ça va être tout ce que
le texte dans nos boîtes, non?

1188
01:01:03,860 --> 01:01:05,310
Donc tout ce que je tape ici.

1189
01:01:05,310 --> 01:01:08,150
Ce est ce que je veux savoir, ou
ce est ce que je veux regarder.

1190
01:01:08,150 --> 01:01:10,690
Et ce qui se passe pour être
changer sur notre page Web?

1191
01:01:10,690 --> 01:01:13,550

1192
01:01:13,550 --> 01:01:14,880
Les caractères restants.

1193
01:01:14,880 --> 01:01:19,550
Donc, de la même manière, nous voulons
commencer par l'initialisation de variables

1194
01:01:19,550 --> 01:01:22,030
qui maintiennent effectivement sur ces éléments.

1195
01:01:22,030 --> 01:01:22,890
D'ACCORD?

1196
01:01:22,890 --> 01:01:29,930
Donc, si nous avons quelques var
ce est notre zone de texte,

1197
01:01:29,930 --> 01:01:33,681
et nous avons une certaine var qui est restants.

1198
01:01:33,681 --> 01:01:34,180
Droite?

1199
01:01:34,180 --> 01:01:36,190
Donc, ceux-ci vont
tenir ces deux choses.

1200
01:01:36,190 --> 01:01:42,370
Ainsi, le même genre de chose,
le document dot-- OK, je suis

1201
01:01:42,370 --> 01:01:45,920
va se assurer que ce est
aller travailler cette fois.

1202
01:01:45,920 --> 01:01:49,620
Je suis très catégorique.

1203
01:01:49,620 --> 01:01:53,310
OK, donc si nous voulons que notre
zone de texte, selon

1204
01:01:53,310 --> 01:01:55,710
à notre HTML, ce est notre identifiant?

1205
01:01:55,710 --> 01:01:56,420
Quelle est notre identité?

1206
01:01:56,420 --> 01:01:59,500

1207
01:01:59,500 --> 01:02:05,540
Il va juste être du texte, car
ce qui crée notre zone de texte, OK,

1208
01:02:05,540 --> 01:02:10,320
et de notre Id est un texte, ce est donc
comment nous pouvons saisir ce qu'il ya dedans.

1209
01:02:10,320 --> 01:02:12,130
OK, point-virgule.

1210
01:02:12,130 --> 01:02:13,940
Je vais être super
précise à ce sujet,

1211
01:02:13,940 --> 01:02:16,300
parce que je veux que cela fonctionne pour le moment.

1212
01:02:16,300 --> 01:02:22,120
OK, faire la même chose,
obtenir élément par Id.

1213
01:02:22,120 --> 01:02:25,970
Je me demande vraiment ce qui a
causé les deux autres de gâcher.

1214
01:02:25,970 --> 01:02:29,750
OK, puis dans celui-ci,
que voulons-nous pour accéder?

1215
01:02:29,750 --> 01:02:30,760
Quel est notre Id ici?

1216
01:02:30,760 --> 01:02:33,980

1217
01:02:33,980 --> 01:02:36,261
Nous avons un autre Id
notre HTML, ce est quoi?

1218
01:02:36,261 --> 01:02:37,552
AUDIENCE: Caractères restants.

1219
01:02:37,552 --> 01:02:39,343
ALLISON BUCHHOLTZ-UA:
Caractères restants.

1220
01:02:39,343 --> 01:02:43,360

1221
01:02:43,360 --> 01:02:44,330
>> D'ACCORD.

1222
01:02:44,330 --> 01:02:46,010
Cool.

1223
01:02:46,010 --> 01:02:49,800
Donc je vais juste
écrire ce vraiment rapide.

1224
01:02:49,800 --> 01:02:53,706

1225
01:02:53,706 --> 01:02:55,330
Je vais juste écrire ce deuxième.

1226
01:02:55,330 --> 01:02:56,190
Ainsi, la zone de texte.

1227
01:02:56,190 --> 01:02:59,550

1228
01:02:59,550 --> 01:03:06,180
Ce qui est intéressant est B il function--
ya beaucoup de fonctions qui non seulement

1229
01:03:06,180 --> 01:03:09,690
correspondent à votre
souris, mais votre clavier.

1230
01:03:09,690 --> 01:03:10,190
D'ACCORD?

1231
01:03:10,190 --> 01:03:16,540
Donc vous pouvez dire quand une touche est
pressé, vous pouvez faire des choses comme ça.

1232
01:03:16,540 --> 01:03:20,450
Donc celui que nous utilisons
est appelé sur la touche jusqu'à, qui

1233
01:03:20,450 --> 01:03:25,320
dit: «Si vous avez appuyé sur une touche
votre clavier, lorsque l'utilisateur a levé

1234
01:03:25,320 --> 01:03:28,064
leur doigt sur ce bouton,
et la clé est devenu non pressée,

1235
01:03:28,064 --> 01:03:29,480
alors nous allons faire quelque chose ".

1236
01:03:29,480 --> 01:03:29,980
D'ACCORD?

1237
01:03:29,980 --> 01:03:31,370
Donc, ce est logique, non?

1238
01:03:31,370 --> 01:03:33,540
Parce que chaque caractère
nous tapons, nous allons

1239
01:03:33,540 --> 01:03:36,550
d'avoir à lever nos doigts sur
de celui-ci, de sorte que lorsque la clé monte,

1240
01:03:36,550 --> 01:03:40,980
nous pouvons savoir pour diminuer
nos caractères restants.

1241
01:03:40,980 --> 01:03:44,440
>> Donc, nous avons une certaine sur la touche
, et de la même façon,

1242
01:03:44,440 --> 01:03:47,480
nous allons dire,
"OK, quand nous faisons cela, nous

1243
01:03:47,480 --> 01:03:55,110
vont créer une fonction qui
va prendre e, "dans ce cas,

1244
01:03:55,110 --> 01:03:58,800
et ce que nous voulons faire est
calculer le nombre restant.

1245
01:03:58,800 --> 01:04:02,510
OK, alors nous allons commencer tout
par la création d'une variable.

1246
01:04:02,510 --> 01:04:05,830
Donc, nous avons une certaine variable r,
que cela va représenter

1247
01:04:05,830 --> 01:04:07,720
combien de personnages que nous avons laissé.

1248
01:04:07,720 --> 01:04:08,890
D'ACCORD?

1249
01:04:08,890 --> 01:04:14,540
Nous savons que nous commencions par
140, et si nous voulons savoir,

1250
01:04:14,540 --> 01:04:18,360
disons, la longueur de cette
chaîne qui est entrée été,

1251
01:04:18,360 --> 01:04:20,860
vous les gars ne ont aucune idée
comment nous pourrions faire cela?

1252
01:04:20,860 --> 01:04:23,900
Juste basé sur de l'évidence
choses, comme si nous voulions heures,

1253
01:04:23,900 --> 01:04:25,870
nous avons utilisé obtenir heures.

1254
01:04:25,870 --> 01:04:28,860
Nous savons que notre objet est
zone de texte, mais pourriez-vous les gars

1255
01:04:28,860 --> 01:04:33,050
penser à ce qui pourrait venir après?

1256
01:04:33,050 --> 01:04:35,280
Toutes les idées?

1257
01:04:35,280 --> 01:04:41,730
>> Donc le genre de celui de moins
intuitif, mais ce est la valeur de longueur de point.

1258
01:04:41,730 --> 01:04:44,700
Il suffit donc de me donner quelques
attribut de valeur

1259
01:04:44,700 --> 01:04:46,500
est en fait la longueur de cette chaîne.

1260
01:04:46,500 --> 01:04:50,340
Donc, il va dire, "OK, je suis à la recherche
à toute cette chaîne dans une zone de texte,

1261
01:04:50,340 --> 01:04:52,730
et je vais le dire
vous combien de temps il est. "

1262
01:04:52,730 --> 01:04:55,500
Parce que si nous nous souvenons cordes
sont vraiment simplement des tableaux,

1263
01:04:55,500 --> 01:04:58,110
afin que nous puissions simplement prendre la longueur d'entre eux.

1264
01:04:58,110 --> 01:05:01,860
Alors que nous avons.

1265
01:05:01,860 --> 01:05:04,058
Cool.

1266
01:05:04,058 --> 01:05:09,360
>> Alors ce que nous voulons faire, ce est nous
ne voudrez plus jamais permettre à l'utilisateur

1267
01:05:09,360 --> 01:05:12,340
à l'entrée de plus de
140 caractères, non?

1268
01:05:12,340 --> 01:05:15,610
Parce que si nous disons: "Oh, vous
ne ont autant restants, "

1269
01:05:15,610 --> 01:05:20,522
puis les laisser faire cela
de toute façon, nous avons été couché.

1270
01:05:20,522 --> 01:05:22,230
Et ce est un autre
chose qui le JavaScript

1271
01:05:22,230 --> 01:05:24,530
peut être vraiment bon
pour, est la validation de l'utilisateur

1272
01:05:24,530 --> 01:05:29,062
et faire en sorte que votre
l'utilisateur se inscrit dans les règles

1273
01:05:29,062 --> 01:05:30,270
que vous avez fourni à eux.

1274
01:05:30,270 --> 01:05:36,020
Donc, si vous voulez faire des choses comme faire
assurer entrée de quelqu'un de leur adresse e-mail,

1275
01:05:36,020 --> 01:05:40,242
ou faire en sorte que quand ils
entrer deux mots de passe, ils correspondent.

1276
01:05:40,242 --> 01:05:41,200
JavaScript peut le faire.

1277
01:05:41,200 --> 01:05:44,010
Vous voulez faire quelque chose comme, "quand
le formulaire est soumis », ou comme,

1278
01:05:44,010 --> 01:05:48,170
"Quand le bouton Soumettre le formulaire est
cliqué, vérifiez toutes ces choses. "

1279
01:05:48,170 --> 01:05:49,670
Et nous pouvons le faire JavaScript.

1280
01:05:49,670 --> 01:05:52,680
Donc, ce est exactement ce
nous allons faire ici.

1281
01:05:52,680 --> 01:05:57,810
>> Donc, ce pourrait être un moyen de vérifier si
ils sont allés plus de 140 caractères?

1282
01:05:57,810 --> 01:06:03,310
Qu'est-ce qui va se passer à
notre valeur de r se ils essayer?

1283
01:06:03,310 --> 01:06:04,760
Ça va être négatif, non?

1284
01:06:04,760 --> 01:06:07,380
Ou ça va être moins
supérieure ou égale à zéro.

1285
01:06:07,380 --> 01:06:13,690
Donc, nous pouvons utilisons un si ce est
comme tout le reste.

1286
01:06:13,690 --> 01:06:14,270
D'ACCORD?

1287
01:06:14,270 --> 01:06:20,480
Et nous avons une certaine zone de texte dot
valeur, et ce que nous faisons ici

1288
01:06:20,480 --> 01:06:29,940
ce est que nous sommes juste cutting-- ce est quoi?

1289
01:06:29,940 --> 01:06:30,900
Désolé.

1290
01:06:30,900 --> 01:06:32,732
Celui-ci, nous voulons juste return false.

1291
01:06:32,732 --> 01:06:34,030
Je me suis confus.

1292
01:06:34,030 --> 01:06:36,560
Tous Frazzled des choses ne fonctionne pas.

1293
01:06:36,560 --> 01:06:40,010
OK, nous voulons juste
return false, puis nous

1294
01:06:40,010 --> 01:06:44,160
vouloir afficher le
caractères restants, non?

1295
01:06:44,160 --> 01:06:48,720
Donc, avec l'horloge, nous avons fait
quelque chose avec HTML interne, non?

1296
01:06:48,720 --> 01:06:52,070
Où nous installons il égal à un certain
variables, de sorte que peut-on faire ici?

1297
01:06:52,070 --> 01:06:54,590

1298
01:06:54,590 --> 01:06:57,750
Que sommes-nous en train de changer le code HTML interne?

1299
01:06:57,750 --> 01:07:02,843

1300
01:07:02,843 --> 01:07:03,780
>> AUDIENCE: Restant?

1301
01:07:03,780 --> 01:07:05,738
>> ALLISON BUCHHOLTZ-UA:
Nous changeons restant.

1302
01:07:05,738 --> 01:07:09,217

1303
01:07:09,217 --> 01:07:11,300
Très bien, et que faisons-nous
vouloir régler égale à?

1304
01:07:11,300 --> 01:07:14,440

1305
01:07:14,440 --> 01:07:18,437
Il va être r, parce que ce
devraient être nos caractères restants.

1306
01:07:18,437 --> 01:07:19,600
D'ACCORD?

1307
01:07:19,600 --> 01:07:26,060
Donc, je suis vraiment nerveux pour voir si
cela fonctionne maintenant, mais nous allons voir.

1308
01:07:26,060 --> 01:07:28,960

1309
01:07:28,960 --> 01:07:29,460
Laissez ce.

1310
01:07:29,460 --> 01:07:34,690

1311
01:07:34,690 --> 01:07:37,700
Ce est vraiment très rapide.

1312
01:07:37,700 --> 01:07:38,970
[Inaudible] OK.

1313
01:07:38,970 --> 01:07:44,574

1314
01:07:44,574 --> 01:07:45,990
Encore une fois, je vais vous montrer.

1315
01:07:45,990 --> 01:07:49,430
Pour une raison quelconque,
mienne décide de ne pas travailler,

1316
01:07:49,430 --> 01:07:53,354
mais ce que je vais vous montrer, ce est que cette
est-- oh je devais mettre cela en.

1317
01:07:53,354 --> 01:07:57,470
OK, on ​​constate le même genre de
chose ici, obtenir la zone de texte.

1318
01:07:57,470 --> 01:08:01,070
>> Aussi, si vous gars préavis, se il est
jamais quelque chose que vous voulez faire,

1319
01:08:01,070 --> 01:08:04,080
et vous ne savez pas comment faire
il suffit de cliquer source de la page,

1320
01:08:04,080 --> 01:08:06,632
et ils vont vous dire.

1321
01:08:06,632 --> 01:08:07,840
Parfois, ça va être chiffré.

1322
01:08:07,840 --> 01:08:11,147
Pour votre pset, nous chiffrons tout,
de sorte qu'il ressemble à du charabia.

1323
01:08:11,147 --> 01:08:13,480
Mais si jamais il ya un très
site cool que vous aimez,

1324
01:08:13,480 --> 01:08:17,729
si vous cliquez simplement source de la page,
il va vous dire comment le faire.

1325
01:08:17,729 --> 01:08:20,770
Encore une fois, travailler plus intelligemment, pas plus dur.

1326
01:08:20,770 --> 01:08:24,250
Et comme vous le voyez ici, tous
ces choses sont les mêmes.

1327
01:08:24,250 --> 01:08:31,930
celui-là prend juste quelques sous-chaîne
que, je oublie exactement ce qu'il fait.

1328
01:08:31,930 --> 01:08:36,980
Mais il faut évidemment une certaine chaîne
de la valeur de zéro à dix,

1329
01:08:36,980 --> 01:08:41,540
et retourne false ce qui devrait arrêter
l'utilisateur d'entrer plus,

1330
01:08:41,540 --> 01:08:46,040
puis met à jour l'évidence
le HTML interne il.

1331
01:08:46,040 --> 01:08:47,410
>> Cool.

1332
01:08:47,410 --> 01:08:53,000
So Big Kebab à partir d'aujourd'hui,
expérience, regardez le code source

1333
01:08:53,000 --> 01:08:58,359
car il va vous aider beaucoup,
et tout le monde, parfois JavaScript

1334
01:08:58,359 --> 01:09:03,200
peut être difficile de travailler avec et ne pas
travailler toujours la façon dont vous attendez d'elle,

1335
01:09:03,200 --> 01:09:05,700
mais juste continuer à essayer
parce que je promets que ce sera.

1336
01:09:05,700 --> 01:09:08,376
Je promets tous ces exemples
travaillaient avant la classe.

1337
01:09:08,376 --> 01:09:09,750
Je ne comprends pas ce qui est arrivé.

1338
01:09:09,750 --> 01:09:13,069
Je ai littéralement tout la même chose.

1339
01:09:13,069 --> 01:09:17,660
>> Une dernière chose que je veux juste
vous montrer les gars qui peuvent être super utile

1340
01:09:17,660 --> 01:09:21,630
in-- est ce qui fonctionnait auparavant?

1341
01:09:21,630 --> 01:09:23,935
Nous avons parti au travail, ne avons-nous?

1342
01:09:23,935 --> 01:09:26,569
Je pense que oui.

1343
01:09:26,569 --> 01:09:27,069
Oui.

1344
01:09:27,069 --> 01:09:27,630
Nous l'avons fait.

1345
01:09:27,630 --> 01:09:28,250
Impressionnant.

1346
01:09:28,250 --> 01:09:31,189
OK, donc une chose qui
Vous devriez savoir

1347
01:09:31,189 --> 01:09:33,340
est le journal de la console dont je ai parlé.

1348
01:09:33,340 --> 01:09:37,040
Donc consoler journal de point de bonjour.

1349
01:09:37,040 --> 01:09:40,430
Donc, ce est une sorte de
JavaScript équivalent de printf.

1350
01:09:40,430 --> 01:09:42,810
Donc, si jamais vous voulez
inspecter vos variables

1351
01:09:42,810 --> 01:09:49,649
ou voir ce qui se passe là-bas, ce
vous pouvez faire est, si nous inspectons élément,

1352
01:09:49,649 --> 01:09:51,899
est ce que vous voulez aller
, et vous allez à consoler,

1353
01:09:51,899 --> 01:09:53,770
vous verrez que ce imprimé bonjour.

1354
01:09:53,770 --> 01:09:55,750
>> Donc, nous pourrions avoir
impression que nous voulions.

1355
01:09:55,750 --> 01:10:04,170
Si nous le voulions pour imprimer fond
dot de fond style dot,

1356
01:10:04,170 --> 01:10:08,454
nous devrions être en mesure de voir le
Triple RVB qui revient.

1357
01:10:08,454 --> 01:10:11,140
Ou non.

1358
01:10:11,140 --> 01:10:13,520
Je oublie exactement comment vous
imprimer une variable comme ça,

1359
01:10:13,520 --> 01:10:17,249
mais vous devriez être capable de
imprimer des choses comme ça.

1360
01:10:17,249 --> 01:10:19,040
Ce sera très utile
pour votre pset lorsque

1361
01:10:19,040 --> 01:10:23,330
vous essayez de manipuler
coordonne ou autres joyeusetés.

1362
01:10:23,330 --> 01:10:25,270
Alors ils changent également cette pièce en classe.

1363
01:10:25,270 --> 01:10:30,750
Ceci est différent des dernières années, de sorte que
juste être gentil avec vos FO, ou les TF

1364
01:10:30,750 --> 01:10:36,350
aux heures de bureau, plutôt, parce que nous sommes
type d'apprentissage avec vous les gars.

1365
01:10:36,350 --> 01:10:41,230
Mais le journal de la console était super, super
utile pour JavaScript année dernière.

1366
01:10:41,230 --> 01:10:42,740
Donc l'aimer.

1367
01:10:42,740 --> 01:10:43,780
Apprenez à utiliser.

1368
01:10:43,780 --> 01:10:49,026
Il est plus facile à utiliser que GDB, de sorte que
doit être au moins un point de plus.

1369
01:10:49,026 --> 01:10:50,650
Mais merci les gars portent avec moi.

1370
01:10:50,650 --> 01:10:53,400
Je suis désolé que mon
des exemples pour une raison quelconque,

1371
01:10:53,400 --> 01:10:55,410
n'a tout simplement pas envie de
coopérer avec moi, mais je

1372
01:10:55,410 --> 01:11:01,010
espère que cela a aidé sorte de vous obtenir un
peu plus dans la zone de JavaScript.

1373
01:11:01,010 --> 01:11:04,980
Et envoyez-moi toutes vos questions pour
la semaine prochaine, donc je peux être super réparé,

1374
01:11:04,980 --> 01:11:09,420
et je vais apporter des bonbons et même extra
des bonbons parce que ce était ridicule.

1375
01:11:09,420 --> 01:11:14,000
Mais vous les gars êtes grand,
et ont une semaine géniale.

1376
01:11:14,000 --> 01:11:15,584