WEBVTT

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

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

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

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

00:00:23.671 --> 00:00:29.478
제가 귀여운 고양이 사진을 가지고 있지 않아서요
사진을 바꿔야겠네요

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

00:00:36.342 --> 00:00:47.869
var imageEls = 
document.getElementsByTagName("img");

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

00:00:50.668 --> 00:00:54.725
반복 동작을 하는 for 구문을 사용할 필요가 있어요
만들어 볼게요

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

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

00:01:11.456 --> 00:01:18.755
사진을 바꿀 수 없어요
태그가 자동으로 닫히게 됩니다

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

00:01:23.796 --> 00:01:27.176
태그들의 각각에 src 속성을 나타낸

00:01:27.176 --> 00:01:30.721
사진의 URL을 바꿔줄 필요가 있어요


00:01:30.721 --> 00:01:36.461
점 표기를 이용해서 속성을 바꿔줄 수 있어요
보여드릴게요

00:01:36.461 --> 00:01:43.179
먼저 괄호 표기를 이용하고

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

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

00:01:54.841 --> 00:01:57.298
이미지가 사라진 것이 보이시죠

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

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

00:02:07.664 --> 00:02:13.022
그리고 고양이로 파일 이름을 바꾸고요

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

00:02:16.842 --> 00:02:23.404
강아지가 이제 고양이로 바뀌었어요
거의 다 끝나갑니다

00:02:23.404 --> 00:02:30.897
강아지 사진에 대해 빠뜨린 것을 알아채셨나요?
아주 미묘한 건데요

00:02:30.897 --> 00:02:36.827
아직 한 가지 할 일이 남았습니다
Wikipedia에 연결하는 일이죠

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

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

00:02:47.347 --> 00:02:51.828
이 링크 ID를 주면 될거에요
혹은 혹은 getElementsByTagName을 사용하여

00:02:51.828 --> 00:02:57.096
페이지의 링크를 변경하면 됩니다

00:02:57.096 --> 00:02:59.414
정말 멋질거에요

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

00:03:06.657 --> 00:03:11.822
여기 태그에 CSS query를 보여드릴게요

00:03:11.822 --> 00:03:15.946
이제 CSS query는 강아지와 관련된 모든 링크들을
찾아낼 것입니다

00:03:15.946 --> 00:03:19.325
먼저 a를 입력합니다
이것은 제가 링크를 찾기 위함이에요

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

00:03:26.041 --> 00:03:31.950
이것은 CSS를 강아지가 있는 
링크에 연결시킨다는 것을 말해요

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

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

00:03:43.566 --> 00:03:49.467
여러분들의 자료를 더 많이 찾을 수 있는
다양한 attribute selector가 있어요

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

00:03:58.041 --> 00:04:07.992
var linkEls = document.querySelectorAll

00:04:07.992 --> 00:04:12.580
selector 안에 붙여넣을게요
중복으로 쓰이지 않도록 조심하세요

00:04:12.580 --> 00:04:22.695
이제 흘륭한 코드가 되었어요

00:04:22.695 --> 00:04:27.558
이제 이것들을 반복동작 시켜줘야 해요

00:04:27.558 --> 00:04:34.645
다시 한 번 for 구문이 사용됩니다

00:04:34.645 --> 00:04:41.642
웹페이지 링크를 Wikipedia의 고양이에 관련된
웹페이지로 바꿔주려고 합니다

00:04:41.642 --> 00:04:45.501
그래서 linkEls[i].href 입력해볼게요

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

00:04:50.681 --> 00:05:00.113
URL을 찾아 여기 아래에 써줍니다
그리고 고양이로 바꿔요

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

00:05:04.305 --> 00:05:10.532
이제 끝났네요
하지만 아직 자바스크립트를 이용하여

00:05:10.532 --> 00:05:30.526
웹페이지를 바꾸는 방법을 못 배웠네요
움직이지 말고 계세요