1
00:00:00,000 --> 00:00:06,440
자바스크립트를 사용해 보기 위해 강아지와 관련된 웹페이지를 가지고 돌아왔어요

2
00:00:06,440 --> 00:00:11,888
웹페이지의 강아지를 전체적으로 고양이로 바꿔볼거에요

3
00:00:11,888 --> 00:00:17,464
제가 무시했던 방 안에 코끼리가 있어요

4
00:00:17,464 --> 00:00:23,671
음, 실제로는 방에 두 마리의 강아지가 있네요

5
00:00:23,671 --> 00:00:29,478
제가 귀여운 고양이 사진을 가지고 있지 않아서요
사진을 바꿔야겠네요

6
00:00:29,487 --> 00:00:36,342
그럼 getElementsByTagName을 이용해서 사진을 찾아볼게요

7
00:00:36,342 --> 00:00:47,869
var imageEls = 
document.getElementsByTagName("img");

8
00:00:47,869 --> 00:00:50,668
이제, 여러 번 반복해야 하기 때문에

9
00:00:50,668 --> 00:00:54,725
반복 동작을 하는 for 구문을 사용할 필요가 있어요
만들어 볼게요

10
00:00:54,725 --> 00:01:04,427
var i = 0; i < imageEls.length; i++

11
00:01:04,427 --> 00:01:11,456
for 구문 안에 뭐라고 써야 할까요?
사진 태그가 innerHTML을 가지고 있지 않기 때문에

12
00:01:11,456 --> 00:01:18,755
사진을 바꿀 수 없어요
태그가 자동으로 닫히게 됩니다

13
00:01:18,755 --> 00:01:23,796
대신에, 강아지처럼 보이게 사진에 변화를 줄 필요가 있어요

14
00:01:23,796 --> 00:01:27,176
태그들의 각각에 src 속성을 나타낸

15
00:01:27,176 --> 00:01:30,721
사진의 URL을 바꿔줄 필요가 있어요


16
00:01:30,721 --> 00:01:36,461
점 표기를 이용해서 속성을 바꿔줄 수 있어요
보여드릴게요

17
00:01:36,461 --> 00:01:43,179
먼저 괄호 표기를 이용하고

18
00:01:43,179 --> 00:01:50,653
자바스크립트 이름처럼 HTML 속성 이름을 입력합니다

19
00:01:50,653 --> 00:01:54,841
그러고 나서 새로운 값을 설정할거에요
빈 공간으로 두면 됩니다 src = " "

20
00:01:54,841 --> 00:01:57,298
이미지가 사라진 것이 보이시죠

21
00:01:57,298 --> 00:02:01,672
이것은 “” 공백이 이미지의 어느 점도 가리키지 않기 때문이에요

22
00:02:01,672 --> 00:02:07,664
이 새로운 URL이 어떻게 동작하는지 이해하기 위해서는,
이전의 URL을 여기에 옮겨볼게요

23
00:02:07,664 --> 00:02:13,022
그리고 고양이로 파일 이름을 바꾸고요

24
00:02:13,022 --> 00:02:16,842
칸 아카데미에 이미 고양이 사진에 대한 URL이 있다는 것을
저는 이미 알고 있었기에 가능한 겁니다

25
00:02:16,842 --> 00:02:23,404
강아지가 이제 고양이로 바뀌었어요
거의 다 끝나갑니다

26
00:02:23,404 --> 00:02:30,897
강아지 사진에 대해 빠뜨린 것을 알아채셨나요?
아주 미묘한 건데요

27
00:02:30,897 --> 00:02:36,827
아직 한 가지 할 일이 남았습니다
Wikipedia에 연결하는 일이죠

28
00:02:36,827 --> 00:02:41,448
다른 사람이 연결하려고 하면, 그들은
저의 속임수에 걸려들게 됩니다

29
00:02:41,448 --> 00:02:47,347
그래서 다른 사람에게 대신에 고양이 사진을 보내주려고 합니다
어떻게 자바스크립트에서 링크를 찾아낼 수 있을까요?

30
00:02:47,347 --> 00:02:51,828
이 링크 ID를 주면 될거에요
혹은 혹은 getElementsByTagName을 사용하여

31
00:02:51,828 --> 00:02:57,096
페이지의 링크를 변경하면 됩니다

32
00:02:57,096 --> 00:02:59,414
정말 멋질거에요

33
00:02:59,414 --> 00:03:06,657
그리고 강아지 관련 페이지로 연결될 링크를 찾습니다
CSS query selector를 이용해서요

34
00:03:06,657 --> 00:03:11,822
여기 태그에 CSS query를 보여드릴게요

35
00:03:11,822 --> 00:03:15,946
이제 CSS query는 강아지와 관련된 모든 링크들을
찾아낼 것입니다

36
00:03:15,946 --> 00:03:19,325
먼저 a를 입력합니다
이것은 제가 링크를 찾기 위함이에요

37
00:03:19,325 --> 00:03:26,041
그러고 나서 [href*="Dog"]를 입력합니다

38
00:03:26,041 --> 00:03:31,950
이것은 CSS를 강아지가 있는 
링크에 연결시킨다는 것을 말해요

39
00:03:31,950 --> 00:03:38,166
그리고 색깔은 자주색으로 설정하겠습니다

40
00:03:38,166 --> 00:03:43,566
좋아요, 이것이 attribute selector(속성 선택) 부분입니다

41
00:03:43,566 --> 00:03:49,467
여러분들의 자료를 더 많이 찾을 수 있는
다양한 attribute selector가 있어요

42
00:03:49,467 --> 00:03:58,041
이제 자바스크립트에서 해보기 위해,
document.querySelectorAll을 사용해볼 수 있습니다

43
00:03:58,041 --> 00:04:07,992
var linkEls = document.querySelectorAll

44
00:04:07,992 --> 00:04:12,580
selector 안에 붙여넣을게요
중복으로 쓰이지 않도록 조심하세요

45
00:04:12,580 --> 00:04:22,695
이제 흘륭한 코드가 되었어요

46
00:04:22,695 --> 00:04:27,558
이제 이것들을 반복동작 시켜줘야 해요

47
00:04:27,558 --> 00:04:34,645
다시 한 번 for 구문이 사용됩니다

48
00:04:34,645 --> 00:04:41,642
웹페이지 링크를 Wikipedia의 고양이에 관련된
웹페이지로 바꿔주려고 합니다

49
00:04:41,642 --> 00:04:45,501
그래서 linkEls[i].href 입력해볼게요

50
00:04:45,501 --> 00:04:50,681
이것은 우리가 바꾸고자 하는 속성 이름이기 때문에
다음으로 =을 입력하고

51
00:04:50,681 --> 00:05:00,113
URL을 찾아 여기 아래에 써줍니다
그리고 고양이로 바꿔요

52
00:05:00,113 --> 00:05:04,305
페이지의 URL을 확실히 알기 때문에 가능할거에요

53
00:05:04,305 --> 00:05:10,532
이제 끝났네요
하지만 아직 자바스크립트를 이용하여

54
00:05:10,532 --> 00:05:30,526
웹페이지를 바꾸는 방법을 못 배웠네요
움직이지 말고 계세요