0:00:00.000,0:00:06.440
자바스크립트를 사용해 보기 위해 강아지와 관련된 웹페이지를 가지고 돌아왔어요

0:00:06.440,0:00:11.888
웹페이지의 강아지를 전체적으로 고양이로 바꿔볼거에요

0:00:11.888,0:00:17.464
제가 무시했던 방 안에 코끼리가 있어요

0:00:17.464,0:00:23.671
음, 실제로는 방에 두 마리의 강아지가 있네요

0:00:23.671,0:00:29.478
제가 귀여운 고양이 사진을 가지고 있지 않아서요[br]사진을 바꿔야겠네요

0:00:29.487,0:00:36.342
그럼 getElementsByTagName을 이용해서 사진을 찾아볼게요

0:00:36.342,0:00:47.869
var imageEls = [br]document.getElementsByTagName("img");

0:00:47.869,0:00:50.668
이제, 여러 번 반복해야 하기 때문에

0:00:50.668,0:00:54.725
반복 동작을 하는 for 구문을 사용할 필요가 있어요[br]만들어 볼게요

0:00:54.725,0:01:04.427
var i = 0; i < imageEls.length; i++

0:01:04.427,0:01:11.456
for 구문 안에 뭐라고 써야 할까요?[br]사진 태그가 innerHTML을 가지고 있지 않기 때문에

0:01:11.456,0:01:18.755
사진을 바꿀 수 없어요[br]태그가 자동으로 닫히게 됩니다

0:01:18.755,0:01:23.796
대신에, 강아지처럼 보이게 사진에 변화를 줄 필요가 있어요

0:01:23.796,0:01:27.176
태그들의 각각에 src 속성을 나타낸

0:01:27.176,0:01:30.721
사진의 URL을 바꿔줄 필요가 있어요[br]

0:01:30.721,0:01:36.461
점 표기를 이용해서 속성을 바꿔줄 수 있어요[br]보여드릴게요

0:01:36.461,0:01:43.179
먼저 괄호 표기를 이용하고

0:01:43.179,0:01:50.653
자바스크립트 이름처럼 HTML 속성 이름을 입력합니다

0:01:50.653,0:01:54.841
그러고 나서 새로운 값을 설정할거에요[br]빈 공간으로 두면 됩니다 src = " "

0:01:54.841,0:01:57.298
이미지가 사라진 것이 보이시죠

0:01:57.298,0:02:01.672
이것은 “” 공백이 이미지의 어느 점도 가리키지 않기 때문이에요

0:02:01.672,0:02:07.664
이 새로운 URL이 어떻게 동작하는지 이해하기 위해서는,[br]이전의 URL을 여기에 옮겨볼게요

0:02:07.664,0:02:13.022
그리고 고양이로 파일 이름을 바꾸고요

0:02:13.022,0:02:16.842
칸 아카데미에 이미 고양이 사진에 대한 URL이 있다는 것을[br]저는 이미 알고 있었기에 가능한 겁니다

0:02:16.842,0:02:23.404
강아지가 이제 고양이로 바뀌었어요[br]거의 다 끝나갑니다

0:02:23.404,0:02:30.897
강아지 사진에 대해 빠뜨린 것을 알아채셨나요?[br]아주 미묘한 건데요

0:02:30.897,0:02:36.827
아직 한 가지 할 일이 남았습니다[br]Wikipedia에 연결하는 일이죠

0:02:36.827,0:02:41.448
다른 사람이 연결하려고 하면, 그들은[br]저의 속임수에 걸려들게 됩니다

0:02:41.448,0:02:47.347
그래서 다른 사람에게 대신에 고양이 사진을 보내주려고 합니다[br]어떻게 자바스크립트에서 링크를 찾아낼 수 있을까요?

0:02:47.347,0:02:51.828
이 링크 ID를 주면 될거에요[br]혹은 혹은 getElementsByTagName을 사용하여

0:02:51.828,0:02:57.096
페이지의 링크를 변경하면 됩니다

0:02:57.096,0:02:59.414
정말 멋질거에요

0:02:59.414,0:03:06.657
그리고 강아지 관련 페이지로 연결될 링크를 찾습니다[br]CSS query selector를 이용해서요

0:03:06.657,0:03:11.822
여기 태그에 CSS query를 보여드릴게요

0:03:11.822,0:03:15.946
이제 CSS query는 강아지와 관련된 모든 링크들을[br]찾아낼 것입니다

0:03:15.946,0:03:19.325
먼저 a를 입력합니다[br]이것은 제가 링크를 찾기 위함이에요

0:03:19.325,0:03:26.041
그러고 나서 [href*="Dog"]를 입력합니다

0:03:26.041,0:03:31.950
이것은 CSS를 강아지가 있는 [br]링크에 연결시킨다는 것을 말해요

0:03:31.950,0:03:38.166
그리고 색깔은 자주색으로 설정하겠습니다

0:03:38.166,0:03:43.566
좋아요, 이것이 attribute selector(속성 선택) 부분입니다

0:03:43.566,0:03:49.467
여러분들의 자료를 더 많이 찾을 수 있는[br]다양한 attribute selector가 있어요

0:03:49.467,0:03:58.041
이제 자바스크립트에서 해보기 위해,[br]document.querySelectorAll을 사용해볼 수 있습니다

0:03:58.041,0:04:07.992
var linkEls = document.querySelectorAll

0:04:07.992,0:04:12.580
selector 안에 붙여넣을게요[br]중복으로 쓰이지 않도록 조심하세요

0:04:12.580,0:04:22.695
이제 흘륭한 코드가 되었어요

0:04:22.695,0:04:27.558
이제 이것들을 반복동작 시켜줘야 해요

0:04:27.558,0:04:34.645
다시 한 번 for 구문이 사용됩니다

0:04:34.645,0:04:41.642
웹페이지 링크를 Wikipedia의 고양이에 관련된[br]웹페이지로 바꿔주려고 합니다

0:04:41.642,0:04:45.501
그래서 linkEls[i].href 입력해볼게요

0:04:45.501,0:04:50.681
이것은 우리가 바꾸고자 하는 속성 이름이기 때문에[br]다음으로 =을 입력하고

0:04:50.681,0:05:00.113
URL을 찾아 여기 아래에 써줍니다[br]그리고 고양이로 바꿔요

0:05:00.113,0:05:04.305
페이지의 URL을 확실히 알기 때문에 가능할거에요

0:05:04.305,0:05:10.532
이제 끝났네요[br]하지만 아직 자바스크립트를 이용하여

0:05:10.532,0:05:30.526
웹페이지를 바꾸는 방법을 못 배웠네요[br]움직이지 말고 계세요