[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.55,0:00:05.45,Default,,0000,0000,0000,,form(형식, 형성)은 웹페이지에서 정보를 \N서버로 전송하기 위한 방법입니다.
Dialogue: 0,0:00:05.45,0:00:09.95,Default,,0000,0000,0000,,우리는 여기의 칸아카데미에 있는 웹페이지들이\N보안상의 문제로 서버와
Dialogue: 0,0:00:09.95,0:00:11.44,Default,,0000,0000,0000,,상호적인 연결을 하지 않도록 할 것 입니다.
Dialogue: 0,0:00:11.44,0:00:13.65,Default,,0000,0000,0000,,따라서 여기서는 form방식을 \N가르쳐 드리지 않을 겁니다.
Dialogue: 0,0:00:13.65,0:00:16.100,Default,,0000,0000,0000,,하지만, 웹페이지들을 조작하기 위해 여러분이 \N자바스크립트를 배우고 있기 때문에
Dialogue: 0,0:00:16.100,0:00:20.55,Default,,0000,0000,0000,,자바에서 form 방식을 수행하기 위해 어떻게 하면\N되는지를 알려드리 겠습니다.
Dialogue: 0,0:00:20.55,0:00:23.07,Default,,0000,0000,0000,,그것들을 서버로 보내는 것 대신에요.
Dialogue: 0,0:00:23.07,0:00:28.10,Default,,0000,0000,0000,,이 페이지에 사용자들의 이름과 언어를 알아내기\N위해 제가 여러 form요소들을
Dialogue: 0,0:00:28.10,0:00:30.04,Default,,0000,0000,0000,,만들어 두었습니다.
Dialogue: 0,0:00:30.04,0:00:34.03,Default,,0000,0000,0000,,그리고 사용자가 이 버튼을 누르면 그들에게 \N'안녕하세요'를 그들의 언어로 웹페이지가 말하도록
Dialogue: 0,0:00:34.03,0:00:36.67,Default,,0000,0000,0000,,만들어 보겠습니다.
Dialogue: 0,0:00:36.67,0:00:41.46,Default,,0000,0000,0000,,첫 번째 단계는 변수에 button (버튼) 요소를 \N저장 하는 것입니다.
Dialogue: 0,0:00:41.46,0:00:49.31,Default,,0000,0000,0000,,그래서 `document.getElementById("button")` 라고\N지정하겠습니다.
Dialogue: 0,0:00:49.31,0:00:53.19,Default,,0000,0000,0000,,다음 단계는 받는 사람 지정하는 기능을 넣는 것입니다.
Dialogue: 0,0:00:53.19,0:00:57.88,Default,,0000,0000,0000,,따라서 `var onButtonClick = function() {` 라고 하겠습니다.
Dialogue: 0,0:00:57.88,0:01:03.77,Default,,0000,0000,0000,,그리고 그 안에는, 메세지를 첨부하도록 시작해 보겠습니다.
Dialogue: 0,0:01:03.77,0:01:08.73,Default,,0000,0000,0000,,따라서 `document.getElementById("message")` 라고 하고,
Dialogue: 0,0:01:08.73,0:01:10.71,Default,,0000,0000,0000,,친절한 짧은 메세지를 하기 위해, 'div' 를 넣습니다.
Dialogue: 0,0:01:10.71,0:01:20.71,Default,,0000,0000,0000,,그리고 `textContent +=\N"You clicked me! Thank you so much!" ' 라고 하면 됩니다.
Dialogue: 0,0:01:20.71,0:01:23.16,Default,,0000,0000,0000,,아주 감사하는 메세지군요!
Dialogue: 0,0:01:23.16,0:01:28.80,Default,,0000,0000,0000,,마지막으로, 세번째 단계는 메세지를 받는 기능을\N버튼에 추가 하겠습니다.
Dialogue: 0,0:01:28.80,0:01:31.71,Default,,0000,0000,0000,,버튼이 클릭 되었을때 그 기능이 실행되기 위해서죠.
Dialogue: 0,0:01:31.71,0:01:36.49,Default,,0000,0000,0000,,따라서, `("click", onButtonClick)` 라고 합니다.
Dialogue: 0,0:01:36.49,0:01:42.96,Default,,0000,0000,0000,,잠시, 지금 설명을 멈추고, 우리가 원하는대로 작동하는지\N시험해 보세요.
Dialogue: 0,0:01:42.96,0:01:47.97,Default,,0000,0000,0000,,이제, form 에 있는 것들을 기반해서 진짜 뭔가를 \N말해보도록 해보겠습니다.
Dialogue: 0,0:01:47.97,0:01:52.85,Default,,0000,0000,0000,,사용자가 이름 input부분에 무엇을 입력하든지\N알아 내기 위해 어떻게 해야 할 지 봅시다.
Dialogue: 0,0:01:52.85,0:01:55.83,Default,,0000,0000,0000,,이에 맞는 변수를 만들게요.
Dialogue: 0,0:01:55.83,0:02:04.77,Default,,0000,0000,0000,,따라서, `var name = document.getElementById`라고 넣습니다.
Dialogue: 0,0:02:04.77,0:02:07.34,Default,,0000,0000,0000,,ID가 있기 때문에,
Dialogue: 0,0:02:07.34,0:02:11.32,Default,,0000,0000,0000,,저기에다가 뒀습니다.
Dialogue: 0,0:02:11.32,0:02:17.12,Default,,0000,0000,0000,,환영 인사를 위해 새로운string을 만들고, 그것을\N이름과 연결지어 보겠습다.
Dialogue: 0,0:02:17.12,0:02:22.72,Default,,0000,0000,0000,,따라서, `var greeting = "Heyaz"` 라고 하겠습니다.\N제일 제가 좋아하는 환영인사 랍니다.
Dialogue: 0,0:02:22.72,0:02:24.20,Default,,0000,0000,0000,,그리고, ` + name`.
Dialogue: 0,0:02:24.20,0:02:30.35,Default,,0000,0000,0000,,좋습니다. 자, 저 변수안에 무엇이 저장 되든지 \N간에, string을 만들었습니다.
Dialogue: 0,0:02:30.35,0:02:38.77,Default,,0000,0000,0000,,그리고 이제, 여기의 text에 들어 있는 내용은 \N정말 '환영인사'가 되어야 합니다.
Dialogue: 0,0:02:38.77,0:02:41.69,Default,,0000,0000,0000,,봅시다, 맞게 한 것 같군요.
Dialogue: 0,0:02:41.69,0:02:44.90,Default,,0000,0000,0000,,이름input을 찾았고, 환영인사string을 만들었습니다.
Dialogue: 0,0:02:44.90,0:02:47.73,Default,,0000,0000,0000,,그리고 그것을 div와 연결 시켰습니다.
Dialogue: 0,0:02:47.73,0:02:53.03,Default,,0000,0000,0000,,잠시 설명을 멈추시고, 그렇게 작동되는지 확인해 보세요.
Dialogue: 0,0:02:53.03,0:02:55.63,Default,,0000,0000,0000,,우리가 원하는 대로 되지 않습니다, 그렇죠?
Dialogue: 0,0:02:55.63,0:03:01.88,Default,,0000,0000,0000,,"Heyaz [object Object]" 나 "Heyaz object Element"\N를 보셨습니까?
Dialogue: 0,0:03:01.88,0:03:04.76,Default,,0000,0000,0000,,추측건데, 이름이 Object가 아니기 때문입니다.
Dialogue: 0,0:03:04.76,0:03:08.07,Default,,0000,0000,0000,,기분 나쁘게 하려는게 아니라, 만약 그렇다면, 물론\N좋은 이름입니다.
Dialogue: 0,0:03:08.07,0:03:10.51,Default,,0000,0000,0000,,어쨋든, 그렇다면 뭔가가 잘 못 되었다는 뜻 입니다.
Dialogue: 0,0:03:10.51,0:03:13.70,Default,,0000,0000,0000,,사용자가 무엇을 입력하든지 그것을 볼 수 있어야 하는데,
Dialogue: 0,0:03:13.70,0:03:16.48,Default,,0000,0000,0000,,대신에 우리는 'object (물건)'가 보입니다.
Dialogue: 0,0:03:16.48,0:03:20.68,Default,,0000,0000,0000,,그말은 이름 변수가 우리가 원하는 string을 \N가르키는 것이 아니라,
Dialogue: 0,0:03:20.68,0:03:23.58,Default,,0000,0000,0000,,어떤 object를 가르키고 있다는 것입니다.
Dialogue: 0,0:03:23.58,0:03:26.65,Default,,0000,0000,0000,,아마 이 문제를 먼저 알고 계셨을 수도 있습니다.
Dialogue: 0,0:03:26.65,0:03:31.88,Default,,0000,0000,0000,,우리는 총 모든 object 요소를 이름 변수 안에 저장 했습니다.
Dialogue: 0,0:03:31.88,0:03:34.99,Default,,0000,0000,0000,,그리고 object 요소는 요소에 대한 많은 정보가
Dialogue: 0,0:03:34.99,0:03:37.10,Default,,0000,0000,0000,,있는 큰 object이죠.
Dialogue: 0,0:03:37.10,0:03:39.53,Default,,0000,0000,0000,,모든 요소의 특징, 모든 요소의 방법들 등 이요.
Dialogue: 0,0:03:39.53,0:03:43.47,Default,,0000,0000,0000,,사용자가 무엇을 타이핑했는지 알아내기 위해,\N우리는 value요소의 특정한 특징에
Dialogue: 0,0:03:43.47,0:03:46.21,Default,,0000,0000,0000,,접근해 보아야 합니다.
Dialogue: 0,0:03:46.21,0:03:51.92,Default,,0000,0000,0000,,그렇게 해보겠습니다. `.value`를 타이핑하겠습니다.\N고쳐져야 할텐데요.\N
Dialogue: 0,0:03:51.92,0:03:56.18,Default,,0000,0000,0000,,잠시 설명을 해보고, 실행해 보세요.
Dialogue: 0,0:03:56.18,0:03:57.98,Default,,0000,0000,0000,,잘 작동됩니다. 그쵸?
Dialogue: 0,0:03:57.98,0:04:01.91,Default,,0000,0000,0000,,아주 잘하는 실수니까, 유의하시길 바랍니다.
Dialogue: 0,0:04:01.91,0:04:05.01,Default,,0000,0000,0000,,그리고 하나 더 흔한 실수를 보여드리고 싶습니다.
Dialogue: 0,0:04:05.01,0:04:13.96,Default,,0000,0000,0000,,여기에 드래그(라인)을 해서, \Nfunction 바깥으로 빼 보겠습니다.
Dialogue: 0,0:04:13.96,0:04:22.74,Default,,0000,0000,0000,,잠시 설명을 멈추시고, 입력창에 타이핑 후 버튼을 눌러 보세요.
Dialogue: 0,0:04:22.74,0:04:25.100,Default,,0000,0000,0000,,만약 제대로 되지 않으면, 이름을 위한
Dialogue: 0,0:04:25.100,0:04:28.05,Default,,0000,0000,0000,,빈 string을 만들지 않았기 때문입니다.
Dialogue: 0,0:04:28.05,0:04:29.69,Default,,0000,0000,0000,,왜 그런지 알아 내셨나요?
Dialogue: 0,0:04:29.69,0:04:33.94,Default,,0000,0000,0000,,코드의 각 줄이 실행 될 때를 잘 생각해 보세요.
Dialogue: 0,0:04:33.94,0:04:37.10,Default,,0000,0000,0000,,현재의 코드에서는, 브라우저가\N페이지를 로딩하고 있습니다.
Dialogue: 0,0:04:37.10,0:04:39.77,Default,,0000,0000,0000,,그리고 각 줄마다의 자바가 실행되고 있죠.
Dialogue: 0,0:04:39.77,0:04:42.93,Default,,0000,0000,0000,,처음으로, 변수에서 button요소를 저장합니다.
Dialogue: 0,0:04:42.93,0:04:46.82,Default,,0000,0000,0000,,그리고나서 변수에서 input요소의 값을 저장합니다.
Dialogue: 0,0:04:46.82,0:04:50.46,Default,,0000,0000,0000,,하지만 페이지에서 로딩하는 그 시간의 값을 저장합니다.
Dialogue: 0,0:04:50.46,0:04:52.46,Default,,0000,0000,0000,,바로 비어 있는 것이죠.
Dialogue: 0,0:04:52.46,0:04:56.32,Default,,0000,0000,0000,,그리고 나서, function을 정의하고 메세지 받는 기능으로 지정합니다.
Dialogue: 0,0:04:56.32,0:05:00.42,Default,,0000,0000,0000,,받는 사람이 불러지면, 그 이름은 페이지가\N로딩하는 때와
Dialogue: 0,0:05:00.42,0:05:02.88,Default,,0000,0000,0000,,string이라고 할 수 있습니다.
Dialogue: 0,0:05:02.88,0:05:06.20,Default,,0000,0000,0000,,따라서 받는사람은 절대로 사용자가 타이핑한 \N가장 최근의 것을 찾아 낼 수가 없습니다.
Dialogue: 0,0:05:06.20,0:05:08.53,Default,,0000,0000,0000,,그게 바로 이 코드의 줄이 메세지 받기 기능 function
Dialogue: 0,0:05:08.53,0:05:13.19,Default,,0000,0000,0000,,안에 있어야 하는 이유입니다.
Dialogue: 0,0:05:13.19,0:05:18.76,Default,,0000,0000,0000,,따라서 메세지가 나타나는 시간의 값을 찾아 낼 수 있습니다.
Dialogue: 0,0:05:18.76,0:05:21.94,Default,,0000,0000,0000,,이번에는 언어 값을 찾는 코드를 더해 봅시다.
Dialogue: 0,0:05:21.94,0:05:24.41,Default,,0000,0000,0000,,여러분이 이걸 이해 하고 있다는 걸 확실하게 해봅시다.
Dialogue: 0,0:05:24.41,0:05:29.60,Default,,0000,0000,0000,,받는사람 (listener)안에, 'lang'이라는 \N변수 속에 언어를 저장하겠습니다.
Dialogue: 0,0:05:31.77,0:05:34.55,Default,,0000,0000,0000,,음, 이 들여쓰기를 보세요. 별로네요.
Dialogue: 0,0:05:34.55,0:05:36.89,Default,,0000,0000,0000,,이것들을 줄세워 보겠습니다.
Dialogue: 0,0:05:36.89,0:05:38.84,Default,,0000,0000,0000,,좋아요...따라서
Dialogue: 0,0:05:38.84,0:05:41.45,Default,,0000,0000,0000,,[쓰는 중(타이핑 중)]
Dialogue: 0,0:05:46.77,0:05:51.23,Default,,0000,0000,0000,,그리고 사실 제가 변수를 이름 붙일 때 제 ID와 같은 \N것들을 붙이는 것을 아실텐데요
Dialogue: 0,0:05:51.23,0:05:55.29,Default,,0000,0000,0000,,하지만 그건 제가 그냥 그렇게 하는 것일 뿐,\N여러분은 그렇게 하지 않으셔도 됩니다.
Dialogue: 0,0:05:55.29,0:05:59.79,Default,,0000,0000,0000,,이제 저는 사용자들이 선택한 언어로 각 메세지를\N얻어 낼 수 있도록 해보 겠습니다.
Dialogue: 0,0:05:59.79,0:06:03.63,Default,,0000,0000,0000,,값이 drop-down(하단으로 메뉴나 엘리먼트가 \N나오는 법)으로 보이는 것이 아님을 주의해 주세요.
Dialogue: 0,0:06:03.63,0:06:06.88,Default,,0000,0000,0000,,HTML의 값 속성입니다.
Dialogue: 0,0:06:06.88,0:06:11.25,Default,,0000,0000,0000,,따라서 'lang' 은 "en", "es", 또는 "plt"이어야 합니다.
Dialogue: 0,0:06:11.25,0:06:17.21,Default,,0000,0000,0000,,따라서 `if (lang === "es")`입니다.
Dialogue: 0,0:06:17.21,0:06:23.68,Default,,0000,0000,0000,,그렇다면 환영인사는 "Hola,"가 되겠죠.
Dialogue: 0,0:06:23.68,0:06:26.81,Default,,0000,0000,0000,,계속해서 환영인사 변수를 만들어 봅시다.
Dialogue: 0,0:06:26.81,0:06:35.10,Default,,0000,0000,0000,,환영인사는 "Hola, "와 이름 일 것입니다.
Dialogue: 0,0:06:35.10,0:06:41.22,Default,,0000,0000,0000,,그리고 만약 언어가 "plt"와 같다면, 라틴어로\N
Dialogue: 0,0:06:41.22,0:06:48.54,Default,,0000,0000,0000,,환영인사가 "Ello-hey, " 와 이름일 것입니다.
Dialogue: 0,0:06:48.54,0:06:53.17,Default,,0000,0000,0000,,그리고 영어의 경우에는 `else` 를 사용할 수 있습니다.
Dialogue: 0,0:06:53.17,0:06:55.37,Default,,0000,0000,0000,,이걸 여기에 옮겨 보겠습니다.
Dialogue: 0,0:06:55.37,0:06:56.80,Default,,0000,0000,0000,,좋아요.
Dialogue: 0,0:06:56.80,0:07:00.37,Default,,0000,0000,0000,,오, 만약 재미있는 추가적인 도전을 하고 싶다면,
Dialogue: 0,0:07:00.37,0:07:03.84,Default,,0000,0000,0000,,이름을 위한 Pig Latin 변환자를 만들어보세요.\N
Dialogue: 0,0:07:03.84,0:07:07.68,Default,,0000,0000,0000,,이름을 포함한 전체 환영인사가 번역될 수 있도록요.
Dialogue: 0,0:07:07.68,0:07:10.01,Default,,0000,0000,0000,,그럼 꽤 깔끔할 것입니다.
Dialogue: 0,0:07:10.01,0:07:13.30,Default,,0000,0000,0000,,이제 잠시 멈추고, 이름을 입력해 보세요.
Dialogue: 0,0:07:13.30,0:07:19.10,Default,,0000,0000,0000,,다른 언어를 고르시고, 시도해 보세요.
Dialogue: 0,0:07:19.10,0:07:20.24,Default,,0000,0000,0000,,괜찮죠?
Dialogue: 0,0:07:20.24,0:07:24.69,Default,,0000,0000,0000,,이제, 여러분은 form input과 약간의 \N자바스크립트로 많은 것을 할 수 있으실 겁니다.
Dialogue: 0,0:07:24.69,0:07:27.32,Default,,0000,0000,0000,,단어게임, 숫자게임, 이야기만들기... 등
Dialogue: 0,0:07:27.32,0:07:30.03,Default,,0000,0000,0000,,그리고 만약 칸아카데미 서버가 아닌 다른 서버를\N가지고 계시다면,
Dialogue: 0,0:07:30.03,0:07:33.45,Default,,0000,0000,0000,,자바스크립트를 이용해서 form input을 서버에\N보내기 전에
Dialogue: 0,0:07:33.45,0:07:35.36,Default,,0000,0000,0000,,미리 프로세싱을 하실 수 있으실 겁니다.
Dialogue: 0,0:07:35.36,0:07:38.52,Default,,0000,0000,0000,,form을 통해서 keypress 나 focus event 와 같이\N메세지 뿐만 아니라
Dialogue: 0,0:07:38.52,0:07:40.70,Default,,0000,0000,0000,,많은 것을 하실 수 있습니다.
Dialogue: 0,0:07:40.70,0:07:44.15,Default,,0000,0000,0000,,input의 값들을 보시는 것을 잊지 마시고,
Dialogue: 0,0:07:44.15,0:07:47.29,Default,,0000,0000,0000,,그 값을 적절한 시간에 확인 할 것을 기억 하세요.
Dialogue: 0,0:07:47.29,0:07:50.03,Default,,0000,0000,0000,,다음 챌린지에서 연습을 하실 수 있으실 겁니다.
Dialogue: 0,0:07:50.03,0:07:52.64,Default,,0000,0000,0000,,제가 바로 개인적으로 가장 좋아하는 부분이죠.