1
00:00:01,470 --> 00:00:02,790
OK bienvenue de retour.

2
00:00:02,790 --> 00:00:05,340
Donc, cette vidéo va être un peu différente.

3
00:00:05,340 --> 00:00:11,410
Nous n'allons pas introduire de nouvelles manières de manipuler le dom, mais nous allons prendre ce que nous avons appris et faire un peu de code le long.

4
00:00:11,640 --> 00:00:13,860
Nous allons donc jouer avec la page d'accueil de Google.

5
00:00:13,950 --> 00:00:20,080
Donc, je recommande que vous ouvrez Google soit faire cela avec moi ou vous faire cela sur votre propre après que vous regardez la vidéo.

6
00:00:20,340 --> 00:00:23,780
Et nous allons juste faire des choses amusantes comme changer le logo.

7
00:00:23,940 --> 00:00:32,220
Nous allons faire une photo d'un chaton cette fois juste pour être juste à tous les amateurs de chat va changer tous les liens pour qu'ils viennent à être dot com ou quelque chose comme ça.

8
00:00:32,250 --> 00:00:43,710
Le seul point que je veux souligner dans cette leçon est que nous pouvons utiliser une boucle pour manipuler des éléments multiples afin que nous ne devions pas toujours sélectionner une chose et changer sa couleur ou sélectionner une image et changer sa source.

9
00:00:43,770 --> 00:00:49,440
Nous pouvons sélectionner toutes les images, puis parcourir cette liste et changer la source.

10
00:00:49,470 --> 00:00:51,080
Donc je vais vous montrer comment je le ferais ici.

11
00:00:51,300 --> 00:00:52,790
Nous allons donc commencer simple.

12
00:00:53,100 --> 00:00:55,050
Commençons par sélectionner ce logo.

13
00:00:55,380 --> 00:01:01,730
Et une note côté rapide si vous êtes sur Google un jour où ils ont un Doodle de Google au lieu de ce logo régulier.

14
00:01:01,860 --> 00:01:03,640
Ce n'est peut-être pas une image ici.

15
00:01:03,780 --> 00:01:06,850
Parfois, ils ont des animations de fantaisie ou des jeux interactifs.

16
00:01:06,930 --> 00:01:10,390
Et dans ce cas, ils pourraient être quelque chose comme un élément de toile.

17
00:01:10,470 --> 00:01:14,980
Donc, si vous rencontrez que lorsque vous inspectez C'est tout droit, vous pouvez simplement regarder cette partie.

18
00:01:15,010 --> 00:01:22,100
Nous avons déjà vu comment changer les sources d'images, mais je veux juste montrer que vous pouvez le faire sur le site Web de quiconque afin de le sélectionner.

19
00:01:22,530 --> 00:01:26,680
C'est une image et il a une identification de sorte que le rend facile.

20
00:01:26,850 --> 00:01:28,290
Logo de HP.

21
00:01:28,410 --> 00:01:38,660
Alors choisissons que l'on appelle notre logo égal au document que le sélecteur de requête HP logo.

22
00:01:38,880 --> 00:01:42,090
Et bien sûr, nous aurions pu utiliser élément par ID ainsi.

23
00:01:42,390 --> 00:01:46,210
Nous nous retrouvons ainsi avec Logo égal à cela.

24
00:01:46,320 --> 00:01:47,890
Nous avons donc choisi cela.

25
00:01:48,030 --> 00:01:51,540
Et si nous voulons changer l'image, nous allons changer la source.

26
00:01:51,540 --> 00:01:55,530
Nous avons besoin d'utiliser l'attribut set et j'ai juste l'image ici.

27
00:01:56,190 --> 00:01:57,650
Joli chaton

28
00:01:57,660 --> 00:01:59,070
Donc, je vais prendre ce Kidan vous êtes.

29
00:01:59,060 --> 00:02:04,540
Je vais copier cela et je vais mettre à jour la source de ce logo pour le faire.

30
00:02:04,650 --> 00:02:10,210
Do logo attribut set point au lieu de la peur.

31
00:02:10,380 --> 00:02:12,630
Nous allons juste écrire la source.

32
00:02:12,810 --> 00:02:21,160
Et le second argument est la nouvelle source et je frappe entrer et j'obtiens mon petit chat agréable Roquette apparaissent.

33
00:02:21,210 --> 00:02:22,760
Vous pourriez obtenir un message comme celui-ci.

34
00:02:22,860 --> 00:02:24,720
Selon l'image que vous utilisez.

35
00:02:24,900 --> 00:02:26,770
Je vais donc expliquer brièvement ce que c'est.

36
00:02:26,910 --> 00:02:36,470
Il est juste mentionner que nous sommes sur une page chargée de TTP que vous pouvez voir que l'image et que je place la source à B est H TTP.

37
00:02:36,570 --> 00:02:40,700
Et pour le rendre court HTP est plus sûr que HGP.

38
00:02:40,710 --> 00:02:46,400
Donc, il se plaint qu'il devrait être tous HTP Oui, nous ne devrions pas utiliser quelque chose de moins sûr.

39
00:02:46,410 --> 00:02:49,560
C'est une version vraiment simple mais elle nous permet toujours de le faire.

40
00:02:49,560 --> 00:02:53,630
Ce n'est pas un énorme problème pour ce que nous essayons juste de faire ici en jouant avec Google.

41
00:02:53,670 --> 00:03:00,990
C'est quelque chose cependant que vous voudriez considérer si vous faisant quelque chose comme ceci dans votre propre application et ce serait un problème alors.

42
00:03:01,020 --> 00:03:03,070
Revenons donc au contenu ici.

43
00:03:03,280 --> 00:03:11,230
Trouvé de changer la largeur et la hauteur de ce chat de sorte qu'il prend la même quantité d'espace que le logo Google original a fait.

44
00:03:11,460 --> 00:03:19,800
Je peux voir en fait que la hauteur était de 92 à l'origine et avec était deux cent soixante-douze.

45
00:03:20,280 --> 00:03:22,130
C'est ce qui se passe ici.

46
00:03:22,170 --> 00:03:36,300
Vous pouvez voir si je veux changer cela, je peux faire quelque chose comme ce logo dot style dot avec et prend une chaîne et juste changer que d'être de 500 pixels.

47
00:03:36,810 --> 00:03:39,720
Vous pouvez le voir s'étirer et je peux faire la même chose.

48
00:03:39,750 --> 00:03:41,530
Changez-la pour qu'elle soit de mille pixels.

49
00:03:41,970 --> 00:03:45,750
Obtenez un joli étirement kitty et nous pouvons changer la largeur.

50
00:03:45,870 --> 00:03:51,900
Je veux dire la hauteur et faisons que 500 ou pauvre chat.

51
00:03:51,900 --> 00:03:55,410
Il est juste obtenir étiré partout.

52
00:03:55,590 --> 00:03:59,550
Alors allons de l'avant et réinitialiser la hauteur à quelque chose un peu plus approprié.

53
00:03:59,730 --> 00:04:13,070
Let's go pour la hauteur d'environ 100 pixels et la largeur d'environ 200.

54
00:04:13,080 --> 00:04:16,590
Très bien pour que cela fonctionne pour nous pour l'instant juste pour un peu plus de pratique.

55
00:04:16,590 --> 00:04:34,130
Laissez-nous aussi lui donner une bordure autour de cette image afin que le logo que la frontière de style égale et nous ferons une frontière de pourpre de deux pixels et là est notre partenaire merveilleux autour de cette image.

56
00:04:34,410 --> 00:04:45,750
OK maintenant passons à ce que j'ai présenté au début de la vidéo qui sélectionne un tas d'éléments à la fois et en utilisant une boucle pour les manipuler plutôt que d'avoir à le faire individuellement.

57
00:04:45,750 --> 00:04:48,980
Donc, ce que nous allons faire est de sélectionner toutes les balises d'ancrage sur la page.

58
00:04:48,990 --> 00:04:50,740
Il y a beaucoup de liens sur cette page.

59
00:04:50,820 --> 00:04:57,290
Nous allons prendre chacun d'eux et changer l'attribut ref pour aller à un autre site Web plutôt que partout où ils vont.

60
00:04:57,510 --> 00:05:02,830
Donc, pour commencer, nous devons sélectionner toutes les balises d'ancrage de sorte que nous avons un tas de façons de le faire.

61
00:05:02,880 --> 00:05:07,170
Je vais appeler les liens sont des liens et nous allons faire document.

62
00:05:07,170 --> 00:05:23,470
Nous pourrions faire une lettre de requête tous mais je vais faire obtenir des éléments par la balise d'étiquette d'étiquette de nom et si nous regardons des liens que vous pouvez voir que nous obtenons un certain nombre sur cette page ainsi nous allons boucler par ceci.

63
00:05:23,550 --> 00:05:35,750
Nous ne pouvons pas seulement faire des liens ensemble de points attribut qui n'existe pas nous dit lien commence à attribut ce n'est pas une fonction.

64
00:05:35,880 --> 00:05:40,860
Et c'est parce que cet attribut n'existe que sur des éléments et des liens individuels.

65
00:05:40,860 --> 00:05:42,640
Est cette collection de noeuds.

66
00:05:42,750 --> 00:05:47,960
Donc j'ai besoin de boucle à travers elle juste comme je ferais la boucle par n'importe quel autre arrangement comme objet.

67
00:05:48,330 --> 00:05:51,590
Donc, je ne peux pas utiliser pour chacun parce que ce n'est pas un véritable tableau.

68
00:05:51,660 --> 00:05:54,880
J'ai donc besoin d'utiliser une boucle for ou techniquement je pourrais utiliser une boucle while.

69
00:05:54,900 --> 00:05:56,310
La plupart des gens utilisent une boucle for.

70
00:05:56,490 --> 00:06:14,160
Donc, pour sont égaux à zéro est inférieur à des liens que la longueur et ajouter 1 et puis à l'intérieur de la boucle, nous allons accéder à chaque lien de liens individuels Hi.

71
00:06:14,340 --> 00:06:18,040
Commençons par l'impression de son contenu textuel.

72
00:06:18,060 --> 00:06:22,850
Donc, les liens que le contenu du texte et nous allons annuler ce journal que.

73
00:06:24,090 --> 00:06:35,140
Il s'agit donc d'un motif courant en boucle à travers un tas d'éléments et de faire quelque chose peut-être ne pas l'imprimer dans la console, mais l'afficher en quelque sorte ou changer quelque chose en changeant sa couleur.

74
00:06:35,420 --> 00:06:40,050
Nous entrons alors et vous pouvez voir que c'est le contenu textuel de tous les liens sur la page.

75
00:06:40,200 --> 00:06:50,460
Donc, nous vous faire savoir des choses comme des photos et de traduire Google lecteur lecteur plus de YouTube tous ces liens sont quelque part sur cette page qui a du sens vu que c'est la page d'accueil de Google.

76
00:06:50,520 --> 00:07:05,570
Donc, plutôt que d'imprimer les choses en un coup de la flèche vers le haut et revenir à cette boucle et commençons en fait en changeant le style afin que nous puissions voir les longueurs plus facile de les rendre une couleur différente et nous allons leur faire une bordure autour d'eux .

77
00:07:05,910 --> 00:07:19,990
Donc, je vais me débarrasser de ma console que le journal et je vais faire lynx je style et nous allons changer l'arrière-plan pour commencer et nous allons faire que un rose.

78
00:07:20,800 --> 00:07:25,050
Et si nous frappons entrer, vous pouvez voir que je vais fermer la console.

79
00:07:25,080 --> 00:07:27,790
Tous les liens sur la page sont maintenant Rose.

80
00:07:27,810 --> 00:07:29,120
J'ai un fond rose.

81
00:07:29,280 --> 00:07:31,680
Donc cette chose ici est un lien.

82
00:07:31,750 --> 00:07:34,490
Toutes ces naff sont des éléments dans le bouton de connexion.

83
00:07:34,830 --> 00:07:35,890
C'est aussi un lien.

84
00:07:36,270 --> 00:07:37,910
Alors, faisons encore une chose.

85
00:07:38,010 --> 00:07:39,140
Let's boucle à travers encore.

86
00:07:39,210 --> 00:07:43,870
Frappez la flèche vers le haut et faisons quelques choses alors faisons le style.

87
00:07:43,910 --> 00:07:52,060
La bordure est égale à un pixel et nous allons faire daht violet.

88
00:07:52,410 --> 00:08:04,980
Et sur les liens de la ligne suivante je style et nous allons changer la couleur pour être orange.

89
00:08:05,520 --> 00:08:07,880
Donc, ces deux personnes entrent.

90
00:08:07,890 --> 00:08:16,010
Et vous pouvez voir que nous obtenons ces très beaux liens sur notre page rose fond minuscule pourpre frontière non seulement une frontière régulière.

91
00:08:16,110 --> 00:08:18,090
C'est daht très fantaisie.

92
00:08:18,180 --> 00:08:20,610
Et nous obtenons du texte orange aussi.

93
00:08:21,240 --> 00:08:27,640
Mais si nous les cliquons, vous pouvez voir que les pièges n'ont pas encore changé et cela a du sens parce que nous ne les avons pas changés.

94
00:08:27,750 --> 00:08:31,230
Donc, je veux les changer tous pour aller à WDW.

95
00:08:31,270 --> 00:08:36,590
Être dot com doit aller à la con. Et j'ai déjà mes liens sélectionnés.

96
00:08:36,630 --> 00:08:41,620
Cette énorme collection et j'ai déjà cette boucle écrite donc je vais le réutiliser.

97
00:08:42,540 --> 00:08:45,680
Et juste pour répéter ceci est quelque chose qui fera beaucoup.

98
00:08:45,690 --> 00:08:51,070
Donc, obtenez confortable si vous pouvez écrire ces quatre boucles où nous ne pouvons pas utiliser un pour chacun.

99
00:08:51,090 --> 00:08:52,610
Nous devons donc utiliser une boucle for.

100
00:08:52,680 --> 00:08:53,770
Nous le faisons tout le temps.

101
00:08:53,790 --> 00:08:59,050
Et d'ici sur jusqu'à ce que nous arrivions à Jey question, nous allons écrire ce type de ligne beaucoup.

102
00:08:59,310 --> 00:09:02,080
Donc nous allons les liens I.

103
00:09:02,430 --> 00:09:08,580
Et nous allons commencer, mais juste imprimer où chaque lumière va donc annuler ce journal.

104
00:09:10,050 --> 00:09:16,060
Et nous allons annuler ce log d'attribuer l'attribut de atra.

105
00:09:18,240 --> 00:09:19,770
Juste comme ça.

106
00:09:20,400 --> 00:09:25,740
Et nous n'avons pas techniquement besoin d'inventer cela, mais juste pour qu'il soit plus facile pour vous de voir.

107
00:09:26,250 --> 00:09:40,290
Et nous manquons notre clôture constante de clôture pour voir ici et maintenant nous obtenons une liste de tous les liens et il est intéressant que vous pouvez voir que certains d'entre eux.

108
00:09:40,380 --> 00:09:45,090
Celui-ci est le lien vers cette chose javascript forward zéro ou non.

109
00:09:45,150 --> 00:10:01,710
Donc, certains d'entre eux sont juste vides, ils n'ont pas un Tref certains d'entre eux vont à des sites Web distincts ou certains d'entre eux sont des chemins relatifs comme celui-ci ici et certains d'entre eux sont absolus comme celui-ci ici.

110
00:10:01,770 --> 00:10:02,310
D'ACCORD.

111
00:10:02,490 --> 00:10:04,730
Alors changeons-les maintenant.

112
00:10:04,890 --> 00:10:11,230
Compton-Rock blog links J'ai obtenu l'attribut set et nous n'avons pas besoin de constamment le log lui attribut set.

113
00:10:11,430 --> 00:10:17,400
Et nous allons les changer pour être ce que nous voulons HGF nous voulons changer HPF pour être W.W ..

114
00:10:17,430 --> 00:10:25,930
C'est HTP colon slash slash BW point Bing dot com juste comme ça.

115
00:10:26,340 --> 00:10:27,930
Et nous avons frappé entrer.

116
00:10:27,930 --> 00:10:29,570
Ça ne ressemble à rien de changé.

117
00:10:29,880 --> 00:10:32,650
Si nous tapons des liens et nous regardons juste ce que nous avons.

118
00:10:32,820 --> 00:10:42,480
Chacun va maintenant à être dot com et nous pouvons également inspecter un et nous pouvons voir dans l'inspecteur d'élément Il va être dot com.

119
00:10:42,780 --> 00:10:45,870
Et la dernière chose que nous faisons pour le tester est de cliquer sur un.

120
00:10:45,990 --> 00:10:52,860
Nous allons donc rapidement le bouton d'ouverture de session ou quittons Gmail et vous pouvez le voir s'ouvrir pour moi.

121
00:10:53,580 --> 00:11:07,470
Donc, pour résumer, nous avons sélectionné un tas de choses une collection de liens et ensuite nous parcourons cette collection avec une boucle for et puis à l'intérieur de celle pour loop nous pouvons faire quelque chose à chaque élément individuel qui sera alors répété à tous.

122
00:11:07,500 --> 00:11:19,500
Donc, j'ai changé la couleur de fond la frontière la couleur de la police nous avons changé la référence et nous avons seulement eu à écrire quelques lignes et il a été appliqué à je ne sais pas 20 ou 30 longueurs différentes sur cette page.

123
00:11:19,500 --> 00:11:22,470
C'est donc un modèle que nous allons utiliser beaucoup dans les prochaines vidéos.