1
00:00:00,270 --> 00:00:05,870
Il y a quelques vidéos, j'ai introduit ce concept de sélection d'éléments puis de leur manipulation.

2
00:00:06,120 --> 00:00:14,660
Nous sélectionnons donc un H1 ou toutes les balises d'image, puis nous pouvons changer la couleur ou les animer ou les faire faire quelque chose quand vous cliquez sur eux.

3
00:00:14,670 --> 00:00:18,360
Jusqu'à présent, nous avons seulement couvert la moitié de sélection et cette vidéo.

4
00:00:18,360 --> 00:00:24,090
Nous allons présenter quelques-unes des nombreuses façons de manipuler les éléments une fois que nous les avons sélectionnés.

5
00:00:24,120 --> 00:00:26,760
Voici donc les quatre principales choses dont je veux parler.

6
00:00:26,970 --> 00:00:29,320
Le premier est comment changer un style d'élément.

7
00:00:29,340 --> 00:00:32,050
Comment pouvons-nous le rendre bleu ou le faire se cacher.

8
00:00:32,070 --> 00:00:34,070
Modifiez la taille de police.

9
00:00:34,080 --> 00:00:40,920
Ensuite, nous allons parler de l'ajout et la suppression de classes avec javascript et ensuite changer le contenu d'une balise.

10
00:00:41,010 --> 00:00:44,490
Alors, comment puis-je changer le texte à l'intérieur d'une balise H-1 par exemple.

11
00:00:44,490 --> 00:00:46,590
Et puis enfin changer les attributs.

12
00:00:46,590 --> 00:00:52,040
Alors, comment pouvons-nous changer la source sur une étiquette d'image ou la référence sur une étiquette AA.

13
00:00:52,230 --> 00:00:55,260
Nous allons commencer par parler de la propriété de style.

14
00:00:55,260 --> 00:01:11,220
Donc, lorsque le DOM est construit et un nœud individuel est fait ou un objet est fait pour chaque élément unique il ya une propriété appelée style et la propriété de style est un objet énorme des centaines de propriétés pour chaque propriété CSSA unique que nous pourrions définir.

15
00:01:11,370 --> 00:01:15,460
Ainsi, nous pouvons écrire javascript qui va alors aller style et élément différemment.

16
00:01:15,480 --> 00:01:24,730
Donc, ici, je suis en sélectionnant un élément par sa mise en évidence Id afin de le sélectionner pour l'enregistrer à une variable appelée étiquette, puis de la manipuler.

17
00:01:24,750 --> 00:01:26,370
Et ce que je fais, je me couche.

18
00:01:26,370 --> 00:01:34,190
Tag point style point couleur à être bleu tag dot style bordure de point égale à 10 pixels rouge solide.

19
00:01:34,200 --> 00:01:37,830
Il est important de noter que le côté droit doit être une chaîne.

20
00:01:38,280 --> 00:01:43,430
Donc, même si en C Ss nous n'avons pas besoin de mettre des citations autour de bleu ou autour de 70 P x.

21
00:01:43,440 --> 00:01:44,730
Ce n'est pas C Ss.

22
00:01:44,730 --> 00:01:45,720
C'est javascript.

23
00:01:45,720 --> 00:01:48,820
Nous devons donc suivre les règles javascript habituelles.

24
00:01:49,080 --> 00:01:53,550
Donc, j'ai une page web simple mis en place que je vais utiliser pour démontrer certaines de ces propriétés.

25
00:01:54,240 --> 00:02:00,190
Donc, cette page web est super simple, juste un H-1 un paragraphe au lieu de ce paragraphe.

26
00:02:00,200 --> 00:02:05,310
Il ya une étiquette forte et puis deux images de deux mélanges adorables de corgi.

27
00:02:05,640 --> 00:02:13,770
Donc, ce que je vais faire, c'est d'aller chez le Consul et je dois commencer par choisir quelque chose et je vais changer la couleur et la bordure de ce H-1.

28
00:02:13,770 --> 00:02:22,800
J'ai donc besoin de le sélectionner et il ya plusieurs façons de le faire dans un nouveau document qui interroge le sélecteur H-1.

29
00:02:25,320 --> 00:02:33,030
Et puis je vais vous montrer H-1 style qui est un objet géant tonnes et tonnes de propriétés.

30
00:02:33,600 --> 00:02:41,680
Donc, je vais essayer de changer l'un d'eux comme le H-1 de couleur sombre de style et de faire que le jaune.

31
00:02:42,520 --> 00:02:45,560
Et vous pouvez le voir immédiatement changé en jaune.

32
00:02:45,570 --> 00:02:54,300
Même chose avec la bordure H-1 que le style que la frontière égale let's faire cinq pixels rose solide.

33
00:02:56,100 --> 00:02:56,950
Et voilà.

34
00:02:57,210 --> 00:03:01,190
Donc, bien sûr, si nous voulions juste que ce soit jaune avec une bordure rose.

35
00:03:01,290 --> 00:03:04,910
À partir du moment où la page chargée il n'y a aucune raison d'utiliser javascript pour le faire.

36
00:03:04,920 --> 00:03:18,670
Nous venons de le mettre dans notre fichier CSSA, nous utiliserons javascript si nous voulions qu'il devienne jaune et ont une bordure rose lorsque l'utilisateur a été sur la page pendant cinq secondes ou s'il voulait qu'il se produise lorsque l'utilisateur défilé à une partie spécifique de La page ou dans l'utilisateur a cliqué sur quelque chose.

37
00:03:18,690 --> 00:03:23,450
Il s'agit de rendre les choses interactives et nous verrons comment le faire bientôt.

38
00:03:24,960 --> 00:03:38,150
Eh bien, la bonne chose à propos de l'utilisation de la propriété de style est que si vous vous trouvez manipuler un tas de fichiers sur un élément individuel comme je le fais ici et changer cinq propriétés différentes sur ce tag il ya certainement une meilleure façon.

39
00:03:38,460 --> 00:03:40,740
Et il ya quelques raisons qu'il ya une meilleure façon.

40
00:03:40,740 --> 00:03:43,350
Le premier est que ce code n'est pas très sec.

41
00:03:43,350 --> 00:03:46,740
Il ya beaucoup de répétitions taggé style style balisé.

42
00:03:46,740 --> 00:03:50,670
Plus important encore, il ya ce concept appelé la séparation des préoccupations.

43
00:03:50,820 --> 00:03:57,210
Donc la séparation des préoccupations est ce concept que notre H M L R C S s pas javascript.

44
00:03:57,210 --> 00:04:00,840
Sont chacun responsable de leur propre petit domaine et nous ne voulons pas.

45
00:04:00,840 --> 00:04:02,830
Nous ne voulons pas beaucoup de croisement entre eux.

46
00:04:02,850 --> 00:04:12,930
Donc, dans ce diagramme, vous pouvez voir qu'il ya un peu de croisement entre chaque équipe avec laquelle est la structure et javascript qui est ce comportement et puis voir évaluer est la présentation.

47
00:04:12,930 --> 00:04:25,840
Et il ya un peu de chevauchement avec H html javascript, mais n'oubliez pas qu'il était avant C Ss est venu vous avez dû écrire vos styles individuellement dans chaque élément unique où nous utilisons réellement l'attribut de style.

48
00:04:26,130 --> 00:04:33,500
Dans ce cas notre présentation le style a été réellement tissé dans la structure et avec C Ss nous les avons maintenant séparés dehors.

49
00:04:33,570 --> 00:04:38,710
Donc, notre HMO est pure structure et notre succès est pure style.

50
00:04:38,880 --> 00:04:52,620
Donc, ce javascript s'inscrit dans le fait qu'il devrait contrôler le comportement d'une page et parfois cela signifie changer la façon dont les choses regardent, mais plutôt que de simplement changer les propriétés à l'intérieur du javascript en fait faire le style dans le javascript.

51
00:04:52,680 --> 00:04:57,530
Ce que nous pouvons faire, c'est de les activer et de les désactiver dans le fichier CSSA.

52
00:04:57,570 --> 00:05:08,380
Donc l'un des modèles qui est vraiment commun, c'est que nous définissons une classe CSSA comme highlight et que la classe highlight aura cinq ou six ou plusieurs propriétés différentes que nous changeons.

53
00:05:08,380 --> 00:05:13,210
Et puis nous pouvons alors sélectionner un élément avec javascript et lui donner cette classe en surbrillance.

54
00:05:13,210 --> 00:05:18,930
Ainsi en Javascript avec une ligne nous pouvons ajouter une classe qui changera alors cinq propriétés différentes.

55
00:05:19,150 --> 00:05:22,660
Jetons un oeil à la façon dont cela serait mis en œuvre en Javascript.

56
00:05:22,690 --> 00:05:36,200
Donc, plutôt que de sélectionner une étiquette, puis de changer de style, mais la couleur pour être bleu et ensuite style de bordure d'être 10 pixels rouges solides ce que nous pourrions faire à la place est de trouver une classe dans cette classe pourrait être appelé quelque chose.

57
00:05:36,250 --> 00:05:41,940
Habituellement, vous voulez qu'il soit un peu significatif afin de refléter ce que la classe est censée faire.

58
00:05:42,040 --> 00:05:45,040
Est-ce quelque chose qui est mis en évidence ou est-ce une réponse correcte.

59
00:05:45,040 --> 00:05:49,840
Un score élevé pour une raison quelconque que vous appliquez la classe en essayant de trouver un bon nom.

60
00:05:50,170 --> 00:05:57,820
Donc, ce n'est pas un bon nom, mais une certaine classe une certaine classe est de changer la couleur pour être bleu et la bordure 10 pixels rouges solides.

61
00:05:57,820 --> 00:06:13,790
Ensuite, tout ce que je dois faire est de sélectionner ma balise et puis tag point liste de la classe dot ajouter une classe et qui donnera ma balise avec l'idée de mettre en évidence une nouvelle classe appelée une classe dans tous ces styles seront appliqués.

62
00:06:13,810 --> 00:06:16,030
Il ya quelques autres choses que nous pouvons faire avec la liste de classe.

63
00:06:16,270 --> 00:06:30,760
Donc, dans cet exemple, je montre trois méthodes d'ajouter que nous avons déjà vu qui est la façon dont nous pouvons ajouter une classe de supprimer qui prend un nom de classe et il supprime ce nom de classe de la liste de classe et la liste de classe toggle qui est extrêmement utile.

64
00:06:30,760 --> 00:06:31,960
Il faut un nom de classe.

65
00:06:32,080 --> 00:06:39,270
Et si l'élément donné a déjà cette classe, il le supprimera si l'élément n'a pas cette classe puis je l'activerai.

66
00:06:39,280 --> 00:06:40,550
Très très utile.

67
00:06:40,630 --> 00:06:42,180
Nous allons l'utiliser tout le temps plus tard.

68
00:06:42,400 --> 00:06:46,990
Permettez-moi donc de vous le démontrer avant de revenir à mon exemple ici.

69
00:06:46,990 --> 00:06:49,300
Je vais vraiment définir une nouvelle classe.

70
00:06:49,690 --> 00:07:00,390
Donc, plutôt que de faire une nouvelle feuille de style et en utilisant un lien, je vais juste utiliser une balise de style juste pour le bien du temps.

71
00:07:00,530 --> 00:07:04,140
Donc je vais définir une classe que vous allez juste appeler grand.

72
00:07:04,990 --> 00:07:14,670
Et ce que je vais faire est de changer la taille de la police à 100 pixels et de changer la couleur pour être orange.

73
00:07:15,010 --> 00:07:22,540
Et enfin, laissez-nous lui donner une bordure de cinq pixels rouges solides.

74
00:07:22,960 --> 00:07:24,280
Je vais donc en rester là.

75
00:07:24,370 --> 00:07:30,900
Si je rafraîchir ma page rien ne change bien sûr, mais quand je veux faire est d'appliquer cette classe à quelque chose.

76
00:07:30,950 --> 00:07:37,120
Donc, je vais faire ce paragraphe ont la grande classe à faire que j'ai besoin de le sélectionner jusqu'à présent.

77
00:07:37,120 --> 00:07:44,900
Paragraphe est égal au document que le paragraphe sélecteur de requête.

78
00:07:47,180 --> 00:07:47,820
D'ACCORD.

79
00:07:48,010 --> 00:07:53,130
Et commençons juste par regarder la liste de classe et vous pouvez voir que c'est vide.

80
00:07:53,140 --> 00:07:55,970
Il n'y a pas encore de classes affectées à ce paragraphe.

81
00:07:56,140 --> 00:08:05,310
Donc, si je veux assigner un tout ce que j'ai besoin de faire est de dire P-Dub liste de la liste dot ajouter et je veux ajouter la classe big.

82
00:08:06,190 --> 00:08:07,240
Et voilà.

83
00:08:07,720 --> 00:08:11,370
Il reflète donc automatiquement les nouvelles modifications de ma feuille de style.

84
00:08:11,440 --> 00:08:13,540
Tout ce que je devais faire, c'est ajouter la grande classe.

85
00:08:13,780 --> 00:08:18,880
J'espère que vous verrez que c'est beaucoup plus facile et que nous séparons les responsabilités.

86
00:08:18,880 --> 00:08:27,610
Donc, tout ce qui est javascript fait est il se met en ou hors une partie spécifique de la SS plutôt que manuellement manuellement manipuler des propriétés individuelles.

87
00:08:27,610 --> 00:08:32,120
Nous changeons maintenant les choses le moins possible au lieu de notre Javascript.

88
00:08:32,470 --> 00:08:45,940
Donc, si je veux supprimer tout ce que j'ai besoin de faire est de classe classless pas enlever grand et mon préféré dont j'ai mentionné est super utile est basculer.

89
00:08:45,940 --> 00:08:52,940
Donc, si je touche toggle en ce moment et appuyez sur Entrée il n'ya pas de classe attribuée, donc il va lui attribuer la classe grande.

90
00:08:53,320 --> 00:08:56,420
Maintenant big est déjà affecté, donc il va l'enlever.

91
00:08:56,440 --> 00:09:09,610
Donc, ce n'est utile évidemment pas dans ce cas de rendre cette orange fou dans la classe de police énorme, mais ce que nous pourrions faire est sur quelque chose comme une liste à faire si nous voulons que l'utilisateur soit en mesure de cliquer dessus pour faire.

92
00:09:09,880 --> 00:09:11,440
Et cela va le briser.

93
00:09:11,650 --> 00:09:15,400
Mais ils peuvent cliquer à nouveau et puis il va décrocher ou simplement revenir à la normale.

94
00:09:15,430 --> 00:09:16,400
Cela serait fait.

95
00:09:16,410 --> 00:09:23,700
Ou nous pourrions le faire en basculant une classe afin que nous puissions avoir une classe appelée fait et je clique appliqué cliquez de nouveau.

96
00:09:23,800 --> 00:09:24,820
Il est supprimé.

97
00:09:24,820 --> 00:09:27,000
C'est juste un exemple de lorsque vous pouvez utiliser la bascule.

98
00:09:27,100 --> 00:09:29,740
Mais c'est vraiment très utile.

99
00:09:29,740 --> 00:09:34,090
Le dernier point que j'apporterai sur la liste de classe est que ce n'est techniquement pas un tableau.

100
00:09:34,090 --> 00:09:37,840
Cela signifie que nous devons utiliser une annonce pour ajouter une classe.

101
00:09:37,870 --> 00:09:39,900
Nous ne pouvons pas faire quelque chose comme pousser.

102
00:09:40,150 --> 00:09:44,000
Donc, juste une note mineure, mais il est important de savoir que ce n'est pas techniquement un tableau.

103
00:09:44,470 --> 00:09:48,260
Nous avons donc abordé deux manières différentes de manipuler le style via notre javascript.

104
00:09:48,280 --> 00:09:55,340
La première est de le faire manuellement une propriété à la fois, ce qui est honnêtement fine si vous faites juste une ou deux choses.