1
00:00:01,470 --> 00:00:02,790
よろしくお願いします。

2
00:00:02,790 --> 00:00:05,340
だからこのビデオは少し違ってくるだろう。

3
00:00:05,340 --> 00:00:09,750
私たちはDOMを操作するための新しい方法を紹介するつもりはありませんが、私たちが学んだことを受け取り、コードを少しずつ実行します。

4
00:00:09,780 --> 00:00:11,410
 

5
00:00:11,640 --> 00:00:13,860
だからGoogleのホームページで遊ぶつもりだ。

6
00:00:13,950 --> 00:00:18,990
だから、私はあなたと一緒にこれを行うか、あなたがビデオを見た後にあなた自身でこれを行うGoogleを開くことをお勧めします。

7
00:00:18,990 --> 00:00:20,080
 

8
00:00:20,340 --> 00:00:23,780
そして、ロゴの変更などの楽しいことをやっていきます。

9
00:00:23,940 --> 00:00:28,530
今度は、すべてのリンクを変更してドットコムやそのようなものになるように、すべての猫愛好家に公平になるように、今回は子猫の写真を撮ります。

10
00:00:28,530 --> 00:00:32,220
 

11
00:00:32,250 --> 00:00:37,410
 

12
00:00:37,410 --> 00:00:42,810
 

13
00:00:42,810 --> 00:00:43,710
このレッスンで強調したい点の1つは、ループを使用して複数の要素を操作できるため、必ずしも1つのものを選択して色を変更したり、1つの画像を選択してソースを変更する必要はありません。

14
00:00:43,770 --> 00:00:49,440
すべての画像を選択し、そのリストをループし、それぞれの画像を元に戻すことができます。

15
00:00:49,470 --> 00:00:51,080
だから私はここでそれをどうやってやるのかを見せてくれるだろう。

16
00:00:51,300 --> 00:00:52,790
だから私たちは簡単に始めるでしょう。

17
00:00:53,100 --> 00:00:55,050
このロゴを選択して始めましょう。

18
00:00:55,380 --> 00:01:00,480
この通常のロゴの代わりにGoogle Doodleを持っている日にGoogleにいらっしゃいましたら、迅速なご注意をお願いします。

19
00:01:00,480 --> 00:01:01,730
 

20
00:01:01,860 --> 00:01:03,640
ここのイメージではないかもしれません。

21
00:01:03,780 --> 00:01:06,850
時には彼らは派手なアニメーションやインタラクティブなゲームを持っています。

22
00:01:06,930 --> 00:01:10,390
その場合、キャンバス要素のようなものかもしれません。

23
00:01:10,470 --> 00:01:14,980
ですから、あなたがそれを遭遇したときにそれが遭遇したら、それは大丈夫です。あなたはこの部分をちょうど見ることができます。

24
00:01:15,010 --> 00:01:19,650
すでに画像ソースを変更する方法を見てきましたが、誰かのウェブサイトでこれを行うことができるので、選択するだけです。

25
00:01:19,690 --> 00:01:22,100
 

26
00:01:22,530 --> 00:01:26,680
それはイメージであり、それはIDを持っているので、簡単です。

27
00:01:26,850 --> 00:01:28,290
HPロゴ

28
00:01:28,410 --> 00:01:34,100
だから、それを私たちのロゴと呼ぶことを選択しましょう。

29
00:01:37,320 --> 00:01:38,660
 

30
00:01:38,880 --> 00:01:42,090
もちろんIDで要素を使用することもできます。

31
00:01:42,390 --> 00:01:46,210
だから我々はそれに等しいロゴで終わる。

32
00:01:46,320 --> 00:01:47,890
だから我々はこれを選択した。

33
00:01:48,030 --> 00:01:51,540
そして、イメージを変更したい場合は、ソースを変更します。

34
00:01:51,540 --> 00:01:55,530
私たちはset属性を使う必要があり、ここにはただのイメージしかありません。

35
00:01:56,190 --> 00:01:57,650
ニースの子猫。

36
00:01:57,660 --> 00:01:59,070
だから私はあなたがこのキダンを取るつもりです。

37
00:01:59,060 --> 00:02:04,540
私はそれをコピーし、私はそれを行うためにこのロゴのソースを更新するつもりです。

38
00:02:04,650 --> 00:02:10,210
恐怖の代わりにロゴのドットセット属性を使用します。

39
00:02:10,380 --> 00:02:12,630
ソースを書くだけです。

40
00:02:12,810 --> 00:02:20,420
そして2番目の引数は新しいソースで、私はenterを押して、私は素敵な小さな猫Roquetteが表示されます。

41
00:02:21,210 --> 00:02:22,760
このようなメッセージが表示されることがあります。

42
00:02:22,860 --> 00:02:24,720
使用する画像によって異なります。

43
00:02:24,900 --> 00:02:26,770
そこで、これについて簡単に説明します。

44
00:02:26,910 --> 00:02:33,300
表示されているようにTTPがロードされたページにあり、Bにソースを設定したイメージがH

45
00:02:33,300 --> 00:02:36,470
TTPであることだけを言及しています。

46
00:02:36,570 --> 00:02:40,700
それを短くするために、HTPはHGPより安全です。

47
00:02:40,710 --> 00:02:46,400
だから、それはすべてのHTPでなければならないと不平を言っているはい、私たちはあまり安全ではないものを使うべきではありません。

48
00:02:46,410 --> 00:02:49,560
それは本当にシンプルなバージョンですが、それでも私たちはそれを可能にします。

49
00:02:49,560 --> 00:02:53,630
私たちがここでやろうとしていることはGoogleで遊んでいるだけの大きな問題ではありません。

50
00:02:53,670 --> 00:02:58,020
あなたのアプリケーションでこのようなことをしているのかどうかを検討したいのですが、それは問題になります。

51
00:02:58,020 --> 00:03:00,990
 

52
00:03:01,020 --> 00:03:03,070
だからここのコンテンツに戻る。

53
00:03:03,280 --> 00:03:09,330
この猫の幅と高さを変更して、元のGoogleロゴと同じスペースを占めるようにしました。

54
00:03:09,570 --> 00:03:11,230
 

55
00:03:11,460 --> 00:03:19,800
私は実際に高さが元々92であったのを見ることができます。

56
00:03:20,280 --> 00:03:22,130
そして、それはここで起こっていることです。

57
00:03:22,170 --> 00:03:31,510
私はこれを変更したいのかどうかを知ることができます。私はこのロゴドットスタイルドットのような何かをすることができますし、文字列を取るだけで500ピクセルに変更します。

58
00:03:31,530 --> 00:03:36,300
 

59
00:03:36,810 --> 00:03:39,720
あなたはそれが伸びているのを見ることができ、私は同じことをすることができます。

60
00:03:39,750 --> 00:03:41,530
1000ピクセルに変更します。

61
00:03:41,970 --> 00:03:45,750
素敵なストレッチキティを取得し、幅を変更することができます。

62
00:03:45,870 --> 00:03:51,900
私は身長を意味し、それを500または貧しい猫にしましょう。

63
00:03:51,900 --> 00:03:55,410
それはちょうどその場所のいたる所に伸びている。

64
00:03:55,590 --> 00:03:59,550
それでは、高さをもう少し適切なものに戻しましょう。

65
00:03:59,730 --> 00:04:06,690
高さが約100ピクセル、幅が約200になるようにしましょう。

66
00:04:09,960 --> 00:04:13,070
 

67
00:04:13,080 --> 00:04:16,590
今のところ私たちのためにもう少し練習をしてもうまくいくように。

68
00:04:16,590 --> 00:04:26,040
そのイメージの周りにも境界線を付けて、そのスタイル境界線が等しくなるようにして、2ピクセルのパープルの紫色の境界線を作成し、そのイメージの周りに素晴らしいパートナーがいます。

69
00:04:26,040 --> 00:04:34,130
 

70
00:04:34,410 --> 00:04:39,690
 

71
00:04:39,690 --> 00:04:45,750
それでは、一度にたくさんの要素を選択し、ループを使って個別に行うのではなく、それらを操作するビデオの冒頭で紹介した内容に移りましょう。

72
00:04:45,750 --> 00:04:48,980
では、ページ上のすべてのアンカータグを選択することになります。

73
00:04:48,990 --> 00:04:50,740
このページには多くのリンクがあります。

74
00:04:50,820 --> 00:04:56,600
私たちはそれぞれを取ってref属性を変更し、どこに行くのではなく、他のいくつかのWebサイトに行きます。

75
00:04:56,610 --> 00:04:57,290
 

76
00:04:57,510 --> 00:05:02,830
開始するには、すべてのアンカータグを選択する必要があります。そのためには、さまざまな方法があります。

77
00:05:02,880 --> 00:05:07,170
私はそれをリンクと呼ぶつもりで、私たちは文書をやるでしょう。

78
00:05:07,170 --> 00:05:15,540
私たちはクエリーレターをすべて行うことができますが、タグ名のアンカータグで要素を取得します。リンクを参照すると、このページで多くの情報が得られるので、これをループします。

79
00:05:15,540 --> 00:05:23,470
 

80
00:05:23,550 --> 00:05:35,070
リンクを行うことはできませんドットセット属性は存在しません。

81
00:05:35,070 --> 00:05:35,750
 

82
00:05:35,880 --> 00:05:40,860
そして、その属性は個々の要素とリンク上にのみ存在するからです。

83
00:05:40,860 --> 00:05:42,640
このノードの集合です。

84
00:05:42,750 --> 00:05:47,960
だから、オブジェクトのような他の配列をループするようにループする必要があります。

85
00:05:48,330 --> 00:05:51,590
実際の配列ではないので、私はそれぞれのために使用することはできません。

86
00:05:51,660 --> 00:05:54,880
ですから、私はforループを使う必要がありますし、技術的にはwhileループを使うこともできます。

87
00:05:54,900 --> 00:05:56,310
ほとんどの人はforループを使います。

88
00:05:56,490 --> 00:06:05,640
ですから、ゼロは等しい長さのリンクは長さよりも小さく、1を追加してから、ループ内で個々のリンクリンクにアクセスします。

89
00:06:08,700 --> 00:06:14,160
 

90
00:06:14,340 --> 00:06:18,040
テキストコンテンツを印刷することから始めましょう。

91
00:06:18,060 --> 00:06:22,850
したがって、そのテキストコンテンツをリンクし、そのログを取り消します。

92
00:06:24,090 --> 00:06:28,710
 

93
00:06:28,710 --> 00:06:35,140
だから、これは要素の束をループして何かをする一般的なパターンですが、コンソールでそれを印刷するのではなく、何らかの形でそれを表示したり、色を変える何かを変えたりします。

94
00:06:35,420 --> 00:06:40,050
そこでEnterキーを押すと、これがページ上のすべてのリンクのテキストコンテンツであることがわかります。

95
00:06:40,200 --> 00:06:46,320
だから、写真のようなものを知って、Googleとドライブの翻訳をするYouTubeを再生するこれらすべてのリンクはこのページのどこかにあり、Googleのホームページであることが分かります。

96
00:06:46,320 --> 00:06:50,460
 

97
00:06:50,520 --> 00:06:56,460
 

98
00:06:56,460 --> 00:07:02,190
 

99
00:07:02,610 --> 00:07:05,570
だから、ちょうどヒットの上矢印で物事を印刷し、このループに戻って実際にスタイルを変更して、長さがわかるようにしてみましょう。別の色にして、それらの周りに境界線を作ってみましょう。

100
00:07:05,910 --> 00:07:14,520
だから私はログと私はスタイルのlynxをやるつもりだ私のコンソールを取り除くつもりだ、私たちはバックグラウンドを開始するように変更し、ピンクにしましょう。

101
00:07:15,150 --> 00:07:19,990
 

102
00:07:20,800 --> 00:07:25,050
私たちがenterを押すと、コンソールを閉じることができます。

103
00:07:25,080 --> 00:07:27,790
ページ上のリンクはすべてピンクになりました。

104
00:07:27,810 --> 00:07:29,120
私はピンクの背景を持っています。

105
00:07:29,280 --> 00:07:31,680
だからここのところはリンクです。

106
00:07:31,750 --> 00:07:34,490
これらのナフはすべてサインインボタンの項目です。

107
00:07:34,830 --> 00:07:35,890
それはまたリンクです。

108
00:07:36,270 --> 00:07:37,910
それでもう一つやりましょう。

109
00:07:38,010 --> 00:07:39,140
もう一度ループしましょう。

110
00:07:39,210 --> 00:07:43,870
上向きの矢印を押して、いくつかのことをやってみましょう。スタイルを作ってみましょう。

111
00:07:43,910 --> 00:07:52,060
枠線は1ピクセルに等しく、ダッシュ紫色にしましょう。

112
00:07:52,410 --> 00:08:04,980
次のラインでは、私はスタイルを変え、色をオレンジ色に変えましょう。

113
00:08:05,520 --> 00:08:07,880
だから2人が入りました。

114
00:08:07,890 --> 00:08:14,820
そして、あなたは私たちのページの上にこれらの本当に美しいリンクを得ることができますピンクの背景小さな紫色のボーダーだけでなく、定期的なボーダーを参照してください。

115
00:08:14,820 --> 00:08:16,010
 

116
00:08:16,110 --> 00:08:18,090
それは非常に素晴らしいです。

117
00:08:18,180 --> 00:08:20,610
そしてそこにはオレンジ色のテキストもあります。

118
00:08:21,240 --> 00:08:26,730
しかし、それらをクリックすると、トラップはまだ変更されていないことがわかります。

119
00:08:26,730 --> 00:08:27,640
 

120
00:08:27,750 --> 00:08:31,230
だから私はそれらをすべてWDWに行くように変更したい。

121
00:08:31,270 --> 00:08:36,590
ドットコムをしていることは、詐欺に行く必要があります。 私はすでに自分のリンクを選択しています。

122
00:08:36,630 --> 00:08:41,620
この巨大なコレクションと私はすでにループが書かれているので、私はそれを再利用するつもりです。

123
00:08:42,540 --> 00:08:45,680
そしてこれを繰り返すだけで、たくさんのことができます。

124
00:08:45,690 --> 00:08:51,070
だから、あなたがそれぞれを使うことができないこれらの4つのループを書くことができれば、心地よくなります。

125
00:08:51,090 --> 00:08:52,610
ですから、forループを使用する必要があります。

126
00:08:52,680 --> 00:08:53,770
私たちはこれを常にしています。

127
00:08:53,790 --> 00:08:59,050
そして、ここからJeyの質問に達するまで、このタイプの行をたくさん書いていきます。

128
00:08:59,310 --> 00:09:02,080
だから我々はIをリンクするつもりだ。

129
00:09:02,430 --> 00:09:08,580
そして、我々は始めるつもりですが、すべてのライトが消える場所を印刷して、そのログをキャンセルします。

130
00:09:10,050 --> 00:09:16,060
そして、atraのそのlog get属性を取り消すつもりです。

131
00:09:18,240 --> 00:09:19,770
ちょうどそれのように。

132
00:09:20,400 --> 00:09:25,740
そして、私たちは技術的にそれを発明する必要はありませんが、あなたが見ているほうが簡単です。

133
00:09:26,250 --> 00:09:33,990
私たちはここに見るために私たちの常時閉会のプリントを欠いています。そして今、私たちはすべてのリンクのリストを取得しています。興味深いことに、それらのいくつかを見ることができます。

134
00:09:37,320 --> 00:09:40,290
 

135
00:09:40,380 --> 00:09:45,090
これはjavascript forward zeroまたはnoへのリンクです。

136
00:09:45,150 --> 00:09:53,280
 

137
00:09:53,280 --> 00:10:01,710
だから、それらのうちのいくつかは空です。彼らは8つのトレフを持っていません。それらのうちのいくつかは別のウェブサイトに行くか、またはそれらのいくつかはここのような相対パスであり、

138
00:10:01,770 --> 00:10:02,310
OK。

139
00:10:02,490 --> 00:10:04,730
だから、今それらを変更しましょう。

140
00:10:04,890 --> 00:10:11,230
Compton-Rockブログのリンク私は属性を設定しており、それを常に記録する必要はありません。

141
00:10:11,430 --> 00:10:17,400
そして、それらをHGFに変えてHPFをWに変えたいと思っているものに変えましょう。 W. それはちょうどそのようなHTPコロンスラッシュスラッシュBWドットBingドットコムです。

142
00:10:17,430 --> 00:10:25,930
そして我々はエンターを押した。

143
00:10:26,340 --> 00:10:27,930
それは何か変わったようには見えません。

144
00:10:27,930 --> 00:10:29,570
私たちがリンクを打つと、私たちが持っているものだけを見ます。

145
00:10:29,880 --> 00:10:32,650
 

146
00:10:32,820 --> 00:10:40,110
ひとりひとりがドットコムになり、要素インスペクタでも調べることができます。それはドットコムになります。

147
00:10:40,110 --> 00:10:42,480
テストするために最後に行うことは、クリックすることです。

148
00:10:42,780 --> 00:10:45,870
ですから、すぐにサインインボタンを押すか、Gmailを終了してみてください。

149
00:10:45,990 --> 00:10:52,860
 

150
00:10:53,580 --> 00:10:59,730
 

151
00:10:59,790 --> 00:11:05,580
要約すると、一連のリンクを選択し、forループを使ってそのコレクションをループし、そのループ内で各要素に何かできるようにしてから、それらをすべて繰り返します。

152
00:11:05,580 --> 00:11:07,470
 

153
00:11:07,500 --> 00:11:14,310
だから私は背景色を境界線に変更しました。フォントの色を変更しました。数行しか書かず、このページに20〜30種類の長さがあります。

154
00:11:14,310 --> 00:11:19,500
これは、次のいくつかのビデオで多く使用するパターンです。

155
00:11:19,500 --> 00:11:22,470