WEBVTT

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

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

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

00:00:11.442 --> 00:00:13.648
따라서 여기서는 form방식을 
가르쳐 드리지 않을 겁니다.

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

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

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

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

00:00:28.096 --> 00:00:30.045
만들어 두었습니다.

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

00:00:34.027 --> 00:00:36.666
만들어 보겠습니다.

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

00:00:41.457 --> 00:00:49.307
그래서 `document.getElementById("button")` 라고
지정하겠습니다.

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

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

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

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

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

00:01:10.709 --> 00:01:20.707
그리고 `textContent +=
"You clicked me! Thank you so much!" ' 라고 하면 됩니다.

00:01:20.707 --> 00:01:23.161
아주 감사하는 메세지군요!

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

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

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

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

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

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

00:01:52.850 --> 00:01:55.834
이에 맞는 변수를 만들게요.

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

00:02:04.770 --> 00:02:07.337
ID가 있기 때문에,

00:02:07.337 --> 00:02:11.322
저기에다가 뒀습니다.

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

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

00:02:22.720 --> 00:02:24.203
그리고, ` + name`.

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

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

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

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

00:02:44.899 --> 00:02:47.732
그리고 그것을 div와 연결 시켰습니다.

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

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

00:02:55.632 --> 00:03:01.877
"Heyaz [object Object]" 나 "Heyaz object Element"
를 보셨습니까?

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

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

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

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

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

00:03:16.482 --> 00:03:20.682
그말은 이름 변수가 우리가 원하는 string을 
가르키는 것이 아니라,

00:03:20.682 --> 00:03:23.581
어떤 object를 가르키고 있다는 것입니다.

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

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

00:03:31.885 --> 00:03:34.987
그리고 object 요소는 요소에 대한 많은 정보가

00:03:34.987 --> 00:03:37.095
있는 큰 object이죠.

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

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

00:03:43.472 --> 00:03:46.211
접근해 보아야 합니다.

00:03:46.211 --> 00:03:51.918
그렇게 해보겠습니다. `.value`를 타이핑하겠습니다.
고쳐져야 할텐데요.


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

00:03:56.177 --> 00:03:57.984
잘 작동됩니다. 그쵸?

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

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

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

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

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

00:04:25.997 --> 00:04:28.050
빈 string을 만들지 않았기 때문입니다.

00:04:28.050 --> 00:04:29.693
왜 그런지 알아 내셨나요?

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

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

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

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

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

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

00:04:50.460 --> 00:04:52.465
바로 비어 있는 것이죠.

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

00:04:56.320 --> 00:05:00.421
받는 사람이 불러지면, 그 이름은 페이지가
로딩하는 때와

00:05:00.421 --> 00:05:02.877
string이라고 할 수 있습니다.

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

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

00:05:08.529 --> 00:05:13.190
안에 있어야 하는 이유입니다.

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

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

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

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

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

00:05:34.546 --> 00:05:36.891
이것들을 줄세워 보겠습니다.

00:05:36.891 --> 00:05:38.842
좋아요...따라서

00:05:38.842 --> 00:05:41.453
[쓰는 중(타이핑 중)]

00:05:46.773 --> 00:05:51.234
그리고 사실 제가 변수를 이름 붙일 때 제 ID와 같은 
것들을 붙이는 것을 아실텐데요

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

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

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

00:06:03.627 --> 00:06:06.880
HTML의 값 속성입니다.

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

00:06:11.250 --> 00:06:17.212
따라서 `if (lang === "es")`입니다.

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

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

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

00:06:35.105 --> 00:06:41.218
그리고 만약 언어가 "plt"와 같다면, 라틴어로


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

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

00:06:53.167 --> 00:06:55.366
이걸 여기에 옮겨 보겠습니다.

00:06:55.366 --> 00:06:56.799
좋아요.

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

00:07:00.374 --> 00:07:03.840
이름을 위한 Pig Latin 변환자를 만들어보세요.


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

00:07:07.678 --> 00:07:10.009
그럼 꽤 깔끔할 것입니다.

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

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

00:07:19.098 --> 00:07:20.239
괜찮죠?

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

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

00:07:27.316 --> 00:07:30.029
그리고 만약 칸아카데미 서버가 아닌 다른 서버를
가지고 계시다면,

00:07:30.029 --> 00:07:33.447
자바스크립트를 이용해서 form input을 서버에
보내기 전에

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

00:07:35.361 --> 00:07:38.522
form을 통해서 keypress 나 focus event 와 같이
메세지 뿐만 아니라

00:07:38.522 --> 00:07:40.701
많은 것을 하실 수 있습니다.

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

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

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

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