0:00:00.552,0:00:05.452
form(형식, 형성)은 웹페이지에서 정보를 [br]서버로 전송하기 위한 방법입니다.

0:00:05.452,0:00:09.953
우리는 여기의 칸아카데미에 있는 웹페이지들이[br]보안상의 문제로 서버와

0:00:09.953,0:00:11.442
상호적인 연결을 하지 않도록 할 것 입니다.

0:00:11.442,0:00:13.648
따라서 여기서는 form방식을 [br]가르쳐 드리지 않을 겁니다.

0:00:13.648,0:00:16.997
하지만, 웹페이지들을 조작하기 위해 여러분이 [br]자바스크립트를 배우고 있기 때문에

0:00:16.997,0:00:20.550
자바에서 form 방식을 수행하기 위해 어떻게 하면[br]되는지를 알려드리 겠습니다.

0:00:20.550,0:00:23.074
그것들을 서버로 보내는 것 대신에요.

0:00:23.074,0:00:28.096
이 페이지에 사용자들의 이름과 언어를 알아내기[br]위해 제가 여러 form요소들을

0:00:28.096,0:00:30.045
만들어 두었습니다.

0:00:30.045,0:00:34.027
그리고 사용자가 이 버튼을 누르면 그들에게 [br]'안녕하세요'를 그들의 언어로 웹페이지가 말하도록

0:00:34.027,0:00:36.666
만들어 보겠습니다.

0:00:36.666,0:00:41.457
첫 번째 단계는 변수에 button (버튼) 요소를 [br]저장 하는 것입니다.

0:00:41.457,0:00:49.307
그래서 `document.getElementById("button")` 라고[br]지정하겠습니다.

0:00:49.307,0:00:53.192
다음 단계는 받는 사람 지정하는 기능을 넣는 것입니다.

0:00:53.192,0:00:57.885
따라서 `var onButtonClick = function() {` 라고 하겠습니다.

0:00:57.885,0:01:03.770
그리고 그 안에는, 메세지를 첨부하도록 시작해 보겠습니다.

0:01:03.770,0:01:08.729
따라서 `document.getElementById("message")` 라고 하고,

0:01:08.729,0:01:10.709
친절한 짧은 메세지를 하기 위해, 'div' 를 넣습니다.

0:01:10.709,0:01:20.707
그리고 `textContent +=[br]"You clicked me! Thank you so much!" ' 라고 하면 됩니다.

0:01:20.707,0:01:23.161
아주 감사하는 메세지군요!

0:01:23.161,0:01:28.796
마지막으로, 세번째 단계는 메세지를 받는 기능을[br]버튼에 추가 하겠습니다.

0:01:28.796,0:01:31.711
버튼이 클릭 되었을때 그 기능이 실행되기 위해서죠.

0:01:31.711,0:01:36.491
따라서, `("click", onButtonClick)` 라고 합니다.

0:01:36.491,0:01:42.959
잠시, 지금 설명을 멈추고, 우리가 원하는대로 작동하는지[br]시험해 보세요.

0:01:42.959,0:01:47.971
이제, form 에 있는 것들을 기반해서 진짜 뭔가를 [br]말해보도록 해보겠습니다.

0:01:47.971,0:01:52.850
사용자가 이름 input부분에 무엇을 입력하든지[br]알아 내기 위해 어떻게 해야 할 지 봅시다.

0:01:52.850,0:01:55.834
이에 맞는 변수를 만들게요.

0:01:55.834,0:02:04.770
따라서, `var name = document.getElementById`라고 넣습니다.

0:02:04.770,0:02:07.337
ID가 있기 때문에,

0:02:07.337,0:02:11.322
저기에다가 뒀습니다.

0:02:11.322,0:02:17.115
환영 인사를 위해 새로운string을 만들고, 그것을[br]이름과 연결지어 보겠습다.

0:02:17.115,0:02:22.720
따라서, `var greeting = "Heyaz"` 라고 하겠습니다.[br]제일 제가 좋아하는 환영인사 랍니다.

0:02:22.720,0:02:24.203
그리고, ` + name`.

0:02:24.203,0:02:30.351
좋습니다. 자, 저 변수안에 무엇이 저장 되든지 [br]간에, string을 만들었습니다.

0:02:30.351,0:02:38.772
그리고 이제, 여기의 text에 들어 있는 내용은 [br]정말 '환영인사'가 되어야 합니다.

0:02:38.772,0:02:41.688
봅시다, 맞게 한 것 같군요.

0:02:41.688,0:02:44.899
이름input을 찾았고, 환영인사string을 만들었습니다.

0:02:44.899,0:02:47.732
그리고 그것을 div와 연결 시켰습니다.

0:02:47.732,0:02:53.032
잠시 설명을 멈추시고, 그렇게 작동되는지 확인해 보세요.

0:02:53.032,0:02:55.632
우리가 원하는 대로 되지 않습니다, 그렇죠?

0:02:55.632,0:03:01.877
"Heyaz [object Object]" 나 "Heyaz object Element"[br]를 보셨습니까?

0:03:01.877,0:03:04.761
추측건데, 이름이 Object가 아니기 때문입니다.

0:03:04.761,0:03:08.073
기분 나쁘게 하려는게 아니라, 만약 그렇다면, 물론[br]좋은 이름입니다.

0:03:08.073,0:03:10.508
어쨋든, 그렇다면 뭔가가 잘 못 되었다는 뜻 입니다.

0:03:10.508,0:03:13.704
사용자가 무엇을 입력하든지 그것을 볼 수 있어야 하는데,

0:03:13.704,0:03:16.482
대신에 우리는 'object (물건)'가 보입니다.

0:03:16.482,0:03:20.682
그말은 이름 변수가 우리가 원하는 string을 [br]가르키는 것이 아니라,

0:03:20.682,0:03:23.581
어떤 object를 가르키고 있다는 것입니다.

0:03:23.581,0:03:26.647
아마 이 문제를 먼저 알고 계셨을 수도 있습니다.

0:03:26.647,0:03:31.885
우리는 총 모든 object 요소를 이름 변수 안에 저장 했습니다.

0:03:31.885,0:03:34.987
그리고 object 요소는 요소에 대한 많은 정보가

0:03:34.987,0:03:37.095
있는 큰 object이죠.

0:03:37.095,0:03:39.532
모든 요소의 특징, 모든 요소의 방법들 등 이요.

0:03:39.532,0:03:43.472
사용자가 무엇을 타이핑했는지 알아내기 위해,[br]우리는 value요소의 특정한 특징에

0:03:43.472,0:03:46.211
접근해 보아야 합니다.

0:03:46.211,0:03:51.918
그렇게 해보겠습니다. `.value`를 타이핑하겠습니다.[br]고쳐져야 할텐데요.[br]

0:03:51.918,0:03:56.177
잠시 설명을 해보고, 실행해 보세요.

0:03:56.177,0:03:57.984
잘 작동됩니다. 그쵸?

0:03:57.984,0:04:01.913
아주 잘하는 실수니까, 유의하시길 바랍니다.

0:04:01.913,0:04:05.007
그리고 하나 더 흔한 실수를 보여드리고 싶습니다.

0:04:05.007,0:04:13.960
여기에 드래그(라인)을 해서, [br]function 바깥으로 빼 보겠습니다.

0:04:13.960,0:04:22.740
잠시 설명을 멈추시고, 입력창에 타이핑 후 버튼을 눌러 보세요.

0:04:22.740,0:04:25.997
만약 제대로 되지 않으면, 이름을 위한

0:04:25.997,0:04:28.050
빈 string을 만들지 않았기 때문입니다.

0:04:28.050,0:04:29.693
왜 그런지 알아 내셨나요?

0:04:29.693,0:04:33.937
코드의 각 줄이 실행 될 때를 잘 생각해 보세요.

0:04:33.937,0:04:37.098
현재의 코드에서는, 브라우저가[br]페이지를 로딩하고 있습니다.

0:04:37.098,0:04:39.770
그리고 각 줄마다의 자바가 실행되고 있죠.

0:04:39.770,0:04:42.928
처음으로, 변수에서 button요소를 저장합니다.

0:04:42.928,0:04:46.817
그리고나서 변수에서 input요소의 값을 저장합니다.

0:04:46.817,0:04:50.460
하지만 페이지에서 로딩하는 그 시간의 값을 저장합니다.

0:04:50.460,0:04:52.465
바로 비어 있는 것이죠.

0:04:52.465,0:04:56.320
그리고 나서, function을 정의하고 메세지 받는 기능으로 지정합니다.

0:04:56.320,0:05:00.421
받는 사람이 불러지면, 그 이름은 페이지가[br]로딩하는 때와

0:05:00.421,0:05:02.877
string이라고 할 수 있습니다.

0:05:02.877,0:05:06.201
따라서 받는사람은 절대로 사용자가 타이핑한 [br]가장 최근의 것을 찾아 낼 수가 없습니다.

0:05:06.201,0:05:08.529
그게 바로 이 코드의 줄이 메세지 받기 기능 function

0:05:08.529,0:05:13.190
안에 있어야 하는 이유입니다.

0:05:13.190,0:05:18.757
따라서 메세지가 나타나는 시간의 값을 찾아 낼 수 있습니다.

0:05:18.757,0:05:21.938
이번에는 언어 값을 찾는 코드를 더해 봅시다.

0:05:21.938,0:05:24.414
여러분이 이걸 이해 하고 있다는 걸 확실하게 해봅시다.

0:05:24.414,0:05:29.599
받는사람 (listener)안에, 'lang'이라는 [br]변수 속에 언어를 저장하겠습니다.

0:05:31.769,0:05:34.546
음, 이 들여쓰기를 보세요. 별로네요.

0:05:34.546,0:05:36.891
이것들을 줄세워 보겠습니다.

0:05:36.891,0:05:38.842
좋아요...따라서

0:05:38.842,0:05:41.453
[쓰는 중(타이핑 중)]

0:05:46.773,0:05:51.234
그리고 사실 제가 변수를 이름 붙일 때 제 ID와 같은 [br]것들을 붙이는 것을 아실텐데요

0:05:51.234,0:05:55.291
하지만 그건 제가 그냥 그렇게 하는 것일 뿐,[br]여러분은 그렇게 하지 않으셔도 됩니다.

0:05:55.291,0:05:59.787
이제 저는 사용자들이 선택한 언어로 각 메세지를[br]얻어 낼 수 있도록 해보 겠습니다.

0:05:59.787,0:06:03.627
값이 drop-down(하단으로 메뉴나 엘리먼트가 [br]나오는 법)으로 보이는 것이 아님을 주의해 주세요.

0:06:03.627,0:06:06.880
HTML의 값 속성입니다.

0:06:06.880,0:06:11.250
따라서 'lang' 은 "en", "es", 또는 "plt"이어야 합니다.

0:06:11.250,0:06:17.212
따라서 `if (lang === "es")`입니다.

0:06:17.212,0:06:23.684
그렇다면 환영인사는 "Hola,"가 되겠죠.

0:06:23.684,0:06:26.809
계속해서 환영인사 변수를 만들어 봅시다.

0:06:26.809,0:06:35.105
환영인사는 "Hola, "와 이름 일 것입니다.

0:06:35.105,0:06:41.218
그리고 만약 언어가 "plt"와 같다면, 라틴어로[br]

0:06:41.218,0:06:48.538
환영인사가 "Ello-hey, " 와 이름일 것입니다.

0:06:48.538,0:06:53.167
그리고 영어의 경우에는 `else` 를 사용할 수 있습니다.

0:06:53.167,0:06:55.366
이걸 여기에 옮겨 보겠습니다.

0:06:55.366,0:06:56.799
좋아요.

0:06:56.799,0:07:00.374
오, 만약 재미있는 추가적인 도전을 하고 싶다면,

0:07:00.374,0:07:03.840
이름을 위한 Pig Latin 변환자를 만들어보세요.[br]

0:07:03.840,0:07:07.678
이름을 포함한 전체 환영인사가 번역될 수 있도록요.

0:07:07.678,0:07:10.009
그럼 꽤 깔끔할 것입니다.

0:07:10.009,0:07:13.295
이제 잠시 멈추고, 이름을 입력해 보세요.

0:07:13.295,0:07:19.098
다른 언어를 고르시고, 시도해 보세요.

0:07:19.098,0:07:20.239
괜찮죠?

0:07:20.239,0:07:24.691
이제, 여러분은 form input과 약간의 [br]자바스크립트로 많은 것을 할 수 있으실 겁니다.

0:07:24.691,0:07:27.316
단어게임, 숫자게임, 이야기만들기... 등

0:07:27.316,0:07:30.029
그리고 만약 칸아카데미 서버가 아닌 다른 서버를[br]가지고 계시다면,

0:07:30.029,0:07:33.447
자바스크립트를 이용해서 form input을 서버에[br]보내기 전에

0:07:33.447,0:07:35.361
미리 프로세싱을 하실 수 있으실 겁니다.

0:07:35.361,0:07:38.522
form을 통해서 keypress 나 focus event 와 같이[br]메세지 뿐만 아니라

0:07:38.522,0:07:40.701
많은 것을 하실 수 있습니다.

0:07:40.701,0:07:44.152
input의 값들을 보시는 것을 잊지 마시고,

0:07:44.152,0:07:47.289
그 값을 적절한 시간에 확인 할 것을 기억 하세요.

0:07:47.289,0:07:50.031
다음 챌린지에서 연습을 하실 수 있으실 겁니다.

0:07:50.031,0:07:52.644
제가 바로 개인적으로 가장 좋아하는 부분이죠.