[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:06.44,Default,,0000,0000,0000,,자바스크립트를 사용해 보기 위해 강아지와 관련된 웹페이지를 가지고 돌아왔어요
Dialogue: 0,0:00:06.44,0:00:11.89,Default,,0000,0000,0000,,웹페이지의 강아지를 전체적으로 고양이로 바꿔볼거에요
Dialogue: 0,0:00:11.89,0:00:17.46,Default,,0000,0000,0000,,제가 무시했던 방 안에 코끼리가 있어요
Dialogue: 0,0:00:17.46,0:00:23.67,Default,,0000,0000,0000,,음, 실제로는 방에 두 마리의 강아지가 있네요
Dialogue: 0,0:00:23.67,0:00:29.48,Default,,0000,0000,0000,,제가 귀여운 고양이 사진을 가지고 있지 않아서요\N사진을 바꿔야겠네요
Dialogue: 0,0:00:29.49,0:00:36.34,Default,,0000,0000,0000,,그럼 getElementsByTagName을 이용해서 사진을 찾아볼게요
Dialogue: 0,0:00:36.34,0:00:47.87,Default,,0000,0000,0000,,var imageEls = \Ndocument.getElementsByTagName("img");
Dialogue: 0,0:00:47.87,0:00:50.67,Default,,0000,0000,0000,,이제, 여러 번 반복해야 하기 때문에
Dialogue: 0,0:00:50.67,0:00:54.72,Default,,0000,0000,0000,,반복 동작을 하는 for 구문을 사용할 필요가 있어요\N만들어 볼게요
Dialogue: 0,0:00:54.72,0:01:04.43,Default,,0000,0000,0000,,var i = 0; i < imageEls.length; i++
Dialogue: 0,0:01:04.43,0:01:11.46,Default,,0000,0000,0000,,for 구문 안에 뭐라고 써야 할까요?\N사진 태그가 innerHTML을 가지고 있지 않기 때문에
Dialogue: 0,0:01:11.46,0:01:18.76,Default,,0000,0000,0000,,사진을 바꿀 수 없어요\N태그가 자동으로 닫히게 됩니다
Dialogue: 0,0:01:18.76,0:01:23.80,Default,,0000,0000,0000,,대신에, 강아지처럼 보이게 사진에 변화를 줄 필요가 있어요
Dialogue: 0,0:01:23.80,0:01:27.18,Default,,0000,0000,0000,,태그들의 각각에 src 속성을 나타낸
Dialogue: 0,0:01:27.18,0:01:30.72,Default,,0000,0000,0000,,사진의 URL을 바꿔줄 필요가 있어요\N
Dialogue: 0,0:01:30.72,0:01:36.46,Default,,0000,0000,0000,,점 표기를 이용해서 속성을 바꿔줄 수 있어요\N보여드릴게요
Dialogue: 0,0:01:36.46,0:01:43.18,Default,,0000,0000,0000,,먼저 괄호 표기를 이용하고
Dialogue: 0,0:01:43.18,0:01:50.65,Default,,0000,0000,0000,,자바스크립트 이름처럼 HTML 속성 이름을 입력합니다
Dialogue: 0,0:01:50.65,0:01:54.84,Default,,0000,0000,0000,,그러고 나서 새로운 값을 설정할거에요\N빈 공간으로 두면 됩니다 src = " "
Dialogue: 0,0:01:54.84,0:01:57.30,Default,,0000,0000,0000,,이미지가 사라진 것이 보이시죠
Dialogue: 0,0:01:57.30,0:02:01.67,Default,,0000,0000,0000,,이것은 “” 공백이 이미지의 어느 점도 가리키지 않기 때문이에요
Dialogue: 0,0:02:01.67,0:02:07.66,Default,,0000,0000,0000,,이 새로운 URL이 어떻게 동작하는지 이해하기 위해서는,\N이전의 URL을 여기에 옮겨볼게요
Dialogue: 0,0:02:07.66,0:02:13.02,Default,,0000,0000,0000,,그리고 고양이로 파일 이름을 바꾸고요
Dialogue: 0,0:02:13.02,0:02:16.84,Default,,0000,0000,0000,,칸 아카데미에 이미 고양이 사진에 대한 URL이 있다는 것을\N저는 이미 알고 있었기에 가능한 겁니다
Dialogue: 0,0:02:16.84,0:02:23.40,Default,,0000,0000,0000,,강아지가 이제 고양이로 바뀌었어요\N거의 다 끝나갑니다
Dialogue: 0,0:02:23.40,0:02:30.90,Default,,0000,0000,0000,,강아지 사진에 대해 빠뜨린 것을 알아채셨나요?\N아주 미묘한 건데요
Dialogue: 0,0:02:30.90,0:02:36.83,Default,,0000,0000,0000,,아직 한 가지 할 일이 남았습니다\NWikipedia에 연결하는 일이죠
Dialogue: 0,0:02:36.83,0:02:41.45,Default,,0000,0000,0000,,다른 사람이 연결하려고 하면, 그들은\N저의 속임수에 걸려들게 됩니다
Dialogue: 0,0:02:41.45,0:02:47.35,Default,,0000,0000,0000,,그래서 다른 사람에게 대신에 고양이 사진을 보내주려고 합니다\N어떻게 자바스크립트에서 링크를 찾아낼 수 있을까요?
Dialogue: 0,0:02:47.35,0:02:51.83,Default,,0000,0000,0000,,이 링크 ID를 주면 될거에요\N혹은 혹은 getElementsByTagName을 사용하여
Dialogue: 0,0:02:51.83,0:02:57.10,Default,,0000,0000,0000,,페이지의 링크를 변경하면 됩니다
Dialogue: 0,0:02:57.10,0:02:59.41,Default,,0000,0000,0000,,정말 멋질거에요
Dialogue: 0,0:02:59.41,0:03:06.66,Default,,0000,0000,0000,,그리고 강아지 관련 페이지로 연결될 링크를 찾습니다\NCSS query selector를 이용해서요
Dialogue: 0,0:03:06.66,0:03:11.82,Default,,0000,0000,0000,,여기 태그에 CSS query를 보여드릴게요
Dialogue: 0,0:03:11.82,0:03:15.95,Default,,0000,0000,0000,,이제 CSS query는 강아지와 관련된 모든 링크들을\N찾아낼 것입니다
Dialogue: 0,0:03:15.95,0:03:19.32,Default,,0000,0000,0000,,먼저 a를 입력합니다\N이것은 제가 링크를 찾기 위함이에요
Dialogue: 0,0:03:19.32,0:03:26.04,Default,,0000,0000,0000,,그러고 나서 [href*="Dog"]를 입력합니다
Dialogue: 0,0:03:26.04,0:03:31.95,Default,,0000,0000,0000,,이것은 CSS를 강아지가 있는 \N링크에 연결시킨다는 것을 말해요
Dialogue: 0,0:03:31.95,0:03:38.17,Default,,0000,0000,0000,,그리고 색깔은 자주색으로 설정하겠습니다
Dialogue: 0,0:03:38.17,0:03:43.57,Default,,0000,0000,0000,,좋아요, 이것이 attribute selector(속성 선택) 부분입니다
Dialogue: 0,0:03:43.57,0:03:49.47,Default,,0000,0000,0000,,여러분들의 자료를 더 많이 찾을 수 있는\N다양한 attribute selector가 있어요
Dialogue: 0,0:03:49.47,0:03:58.04,Default,,0000,0000,0000,,이제 자바스크립트에서 해보기 위해,\Ndocument.querySelectorAll을 사용해볼 수 있습니다
Dialogue: 0,0:03:58.04,0:04:07.99,Default,,0000,0000,0000,,var linkEls = document.querySelectorAll
Dialogue: 0,0:04:07.99,0:04:12.58,Default,,0000,0000,0000,,selector 안에 붙여넣을게요\N중복으로 쓰이지 않도록 조심하세요
Dialogue: 0,0:04:12.58,0:04:22.70,Default,,0000,0000,0000,,이제 흘륭한 코드가 되었어요
Dialogue: 0,0:04:22.70,0:04:27.56,Default,,0000,0000,0000,,이제 이것들을 반복동작 시켜줘야 해요
Dialogue: 0,0:04:27.56,0:04:34.64,Default,,0000,0000,0000,,다시 한 번 for 구문이 사용됩니다
Dialogue: 0,0:04:34.64,0:04:41.64,Default,,0000,0000,0000,,웹페이지 링크를 Wikipedia의 고양이에 관련된\N웹페이지로 바꿔주려고 합니다
Dialogue: 0,0:04:41.64,0:04:45.50,Default,,0000,0000,0000,,그래서 linkEls[i].href 입력해볼게요
Dialogue: 0,0:04:45.50,0:04:50.68,Default,,0000,0000,0000,,이것은 우리가 바꾸고자 하는 속성 이름이기 때문에\N다음으로 =을 입력하고
Dialogue: 0,0:04:50.68,0:05:00.11,Default,,0000,0000,0000,,URL을 찾아 여기 아래에 써줍니다\N그리고 고양이로 바꿔요
Dialogue: 0,0:05:00.11,0:05:04.30,Default,,0000,0000,0000,,페이지의 URL을 확실히 알기 때문에 가능할거에요
Dialogue: 0,0:05:04.30,0:05:10.53,Default,,0000,0000,0000,,이제 끝났네요\N하지만 아직 자바스크립트를 이용하여
Dialogue: 0,0:05:10.53,0:05:30.53,Default,,0000,0000,0000,,웹페이지를 바꾸는 방법을 못 배웠네요\N움직이지 말고 계세요