1
00:00:00,300 --> 00:00:03,940
Alors maintenant, nous avons discuté pourquoi vous devriez vous soucier du Domm pourquoi il est passionnant.

2
00:00:03,990 --> 00:00:07,640
Et nous avons également parlé de ce que signifie le modèle d'objet document.

3
00:00:07,680 --> 00:00:15,130
Le fait qu'il est juste un modèle de chaque élément sur une page en utilisant des objets javascript l'objet de niveau supérieur est appelé le document.

4
00:00:15,240 --> 00:00:18,340
Donc, c'est bien, mais nous n'avons pas encore vu comment faire quoi que ce soit.

5
00:00:18,390 --> 00:00:23,460
Donc, dans cette vidéo, je vais brièvement présenter le processus de manipulation des choses en utilisant le chien.

6
00:00:23,790 --> 00:00:29,630
J'ai donc bouilli tout le processus à deux mots-clés sélectionner et manipuler.

7
00:00:29,670 --> 00:00:47,840
Donc, juste comme voir évaluer où nous écrivons un sélecteur pour sélectionner quelque chose avec la classe de spécial ou tous h ou toutes les étiquettes d'image que nous sélectionnons des éléments et ensuite nous appliquons des styles comme la couleur de fond violet frontière un pixel noir solide avec javascript et Dom et la population.

8
00:00:47,850 --> 00:00:51,380
Nous sélectionnons également des éléments bien que nous le fassions d'une manière très différente.

9
00:00:51,480 --> 00:01:01,260
Nous écrivons du code javascript qui va et sélectionne les éléments et les retourne à nous et puis nous changeons les propriétés sur eux afin que nous sélectionnons quelque chose et ensuite nous le manipuler.

10
00:01:01,290 --> 00:01:09,750
Donc, dans les prochaines diapositives je vais vous montrer comment il pourrait sélectionner ce H-1 mon en-tête et comment nous pourrions le changer pour être rose.

11
00:01:09,750 --> 00:01:15,290
Je l'ai dit beaucoup dans les dernières vidéos, mais je ne veux pas que vous vous concentriez sur la syntaxe autant que les concepts.

12
00:01:15,330 --> 00:01:18,930
Les prochaines vidéos vont se retrouver dans le fond de la sélection et de la manipulation.

13
00:01:18,930 --> 00:01:21,150
Ceci est juste un aperçu de la façon dont il fonctionne.

14
00:01:21,150 --> 00:01:25,600
Donc, sur cette diapositive je vais montrer comment vous pouvez choisir que H1 tout comme avec C.

15
00:01:25,620 --> 00:01:28,580
Il ya beaucoup de façons différentes de sélectionner un élément donné.

16
00:01:28,800 --> 00:01:36,920
Dans ce cas, cette ligne de code document point requêtes sélecteur H-1 va sélectionner le H-1 sur cette page.

17
00:01:37,050 --> 00:01:40,960
Donc j'ai mis en évidence ici avec cette boîte verte pour que vous puissiez voir ce qui est sélectionné.

18
00:01:41,340 --> 00:01:48,640
Donc à nouveau var H-1 c'est n'importe quelle variable que nous voulons document égaux que le sélecteur de requête 8: 1.

19
00:01:48,690 --> 00:01:52,420
Donc, nous allons passer beaucoup plus de temps avec le sélecteur de requêtes et de définir ce qu'il est et comment il fonctionne.

20
00:01:52,470 --> 00:01:59,920
Mais il retourne un objet qui représente ce H1 et il enregistre que dans la variable H-1.

21
00:01:59,970 --> 00:02:02,190
C'est donc le processus de sélection.

22
00:02:02,190 --> 00:02:11,170
La prochaine partie est de la manipuler afin de le manipuler je peux faire toutes sortes de choses et tout ce que je vais faire ici est de changer la couleur pour être rose.

23
00:02:11,490 --> 00:02:18,470
Alors nous écrivons simplement H-1 qui est notre variable qui a l'objet représentant le style de point H-1.

24
00:02:18,510 --> 00:02:25,580
C'est une propriété et que la propriété de style est un objet énorme avec un tas d'autres propriétés et la couleur est l'un d'entre eux.

25
00:02:25,920 --> 00:02:28,920
Ainsi H-1 fait le style mais la couleur est égale à rose.

26
00:02:28,920 --> 00:02:30,240
Et puis c'est tout ce que nous avons à faire.

27
00:02:30,270 --> 00:02:37,500
Et le navigateur voit que je changer cette propriété à rose et il met automatiquement à jour ce qui est affiché en le tournant rose.

28
00:02:37,500 --> 00:02:41,140
Nous avons donc choisi ici et puis nous avons manipulé.

29
00:02:42,120 --> 00:02:43,560
J'ai donc un autre exemple.

30
00:02:43,610 --> 00:02:45,230
C'est un peu plus compliqué.

31
00:02:45,240 --> 00:02:52,940
Nous faisons une animation très simple où chaque seconde nous changeons la couleur de fond du corps entre le bleu et le blanc.

32
00:02:52,950 --> 00:02:58,620
Donc, ce que nous devons faire en premier est de sélectionner le corps et puis de le manipuler afin de le sélectionner.

33
00:02:58,740 --> 00:03:06,720
J'ai une autre ligne en utilisant le dump de document sélecteur de requête que nous allons revenir à nouveau dans le prochain document vidéo que le corps du sélecteur de requête.

34
00:03:06,780 --> 00:03:15,450
Donc cela me donne l'élément de corps où il me donne réellement la représentation d'objet le modèle de celui que je sauve dans la variable de corps.

35
00:03:15,450 --> 00:03:23,940
Ensuite, j'ai cette variable est le bleu qui est juste un booléen que je vais utiliser parce que je dois savoir si je vais du bleu au blanc ou blanc au bleu.

36
00:03:24,030 --> 00:03:28,870
Donc, il commence comme faux et puis je suis en utilisant l'intervalle qui nous avons couvert il ya quelques années.

37
00:03:28,920 --> 00:03:32,230
Si vous ne vous rappelez pas comment cela fonctionne, il prend essentiellement deux arguments.

38
00:03:32,340 --> 00:03:39,030
Le premier est un code pour exécuter une fonction et le second est un nombre ou un temps en millisecondes.

39
00:03:39,150 --> 00:03:46,230
Donc, il prend ce nombre de millisecondes qui est mille ou une seconde et chaque seconde il appellera ce code.

40
00:03:46,560 --> 00:03:51,080
Donc, ce que ce code fait, il vérifie si le fond est actuellement bleu si elle est.

41
00:03:51,180 --> 00:03:56,330
Nous le changeons alors pour être blanc si le fond est blanc puis nous le changeons pour être bleu.

42
00:03:56,610 --> 00:04:00,030
Donc, pour regarder de plus près, nous avons notre si est bleu.

43
00:04:00,120 --> 00:04:01,640
Donc c'est juste variable.

44
00:04:01,650 --> 00:04:02,900
Il commence comme faux.

45
00:04:02,910 --> 00:04:07,890
Ainsi, la première fois que la page charge l'arrière-plan est blanc, le bleu est faux.

46
00:04:07,920 --> 00:04:16,570
Donc cette ligne ne s'exécute pas, mais celle-ci ne fait pas le même corps de fond sombre foncé égale à cette couleur hexadécimale qui est bleu.

47
00:04:16,770 --> 00:04:18,840
Donc cela change l'arrière-plan pour être bleu.

48
00:04:19,140 --> 00:04:22,960
Alors nous changeons simplement notre variable bleue de false à true.

49
00:04:23,130 --> 00:04:27,690
Et c'est une belle façon de le faire avec le point d'exclamation ou l'opérateur non.

50
00:04:27,780 --> 00:04:32,550
Donc, ce code s'exécute à nouveau la prochaine fois est bleu est déjà vrai.

51
00:04:32,850 --> 00:04:36,870
Donc, ce code ne courir le corps ne style, mais l'arrière-plan est égal à blanc.

52
00:04:36,870 --> 00:04:38,550
Maintenant, nous allons revenir au blanc.

53
00:04:38,670 --> 00:04:42,980
Ceci ne fonctionne pas et alors nous changeons le bleu de nouveau à faux.

54
00:04:43,290 --> 00:04:44,980
Et ça continue à jamais.

55
00:04:45,090 --> 00:04:49,950
Donc, pas que vous voudriez quelque chose de distrayant comme une couleur de fond qui change à chaque seconde.

56
00:04:50,190 --> 00:04:57,450
Mais cela va montrer que nous pouvons faire des choses plus complexes que simplement changer un H1 de noir à rose.

57
00:04:57,450 --> 00:05:06,260
Donc, pour envelopper tout cela jusqu'à deux mots sélectionner manipuler nous sélectionnons Nous saisissons quelques objets qui représentent des éléments et ensuite nous leur faisons quelque chose.

58
00:05:06,750 --> 00:05:12,370
Donc, le reste de cette unité va être axée sur les différentes façons de sélectionner et puis différentes manières de manipuler.

59
00:05:12,390 --> 00:05:17,190
Donc, la prochaine vidéo va plonger profondément dans les différentes façons de sélectionner des éléments en utilisant javascript.

60
00:05:17,190 --> 00:05:19,470
Nous avons vu un sélecteur déjà fausses.