Processing forms with events (Video Version)

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

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

상호적인 연결을 하지 않도록 할 것 입니다.

따라서 여기서는 form방식을
가르쳐 드리지 않을 겁니다.

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

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

그것들을 서버로 보내는 것 대신에요.

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

만들어 두었습니다.

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

만들어 보겠습니다.

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

그래서 `document.getElementById("button")` 라고
지정하겠습니다.

다음 단계는 받는 사람 지정하는 기능을 넣는 것입니다.

따라서 `var onButtonClick = function() {` 라고 하겠습니다.

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

따라서 `document.getElementById("message")` 라고 하고,

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

그리고 `textContent +=
"You clicked me! Thank you so much!" ' 라고 하면 됩니다.

아주 감사하는 메세지군요!

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

버튼이 클릭 되었을때 그 기능이 실행되기 위해서죠.

따라서, `("click", onButtonClick)` 라고 합니다.

잠시, 지금 설명을 멈추고, 우리가 원하는대로 작동하는지
시험해 보세요.

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

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

이에 맞는 변수를 만들게요.

따라서, `var name = document.getElementById`라고 넣습니다.

ID가 있기 때문에,

저기에다가 뒀습니다.

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

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

그리고, ` + name`.

좋습니다. 자, 저 변수안에 무엇이 저장 되든지
간에, string을 만들었습니다.

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

봅시다, 맞게 한 것 같군요.

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

그리고 그것을 div와 연결 시켰습니다.

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

우리가 원하는 대로 되지 않습니다, 그렇죠?

"Heyaz [object Object]" 나 "Heyaz object Element"
를 보셨습니까?

추측건데, 이름이 Object가 아니기 때문입니다.

기분 나쁘게 하려는게 아니라, 만약 그렇다면, 물론
좋은 이름입니다.

어쨋든, 그렇다면 뭔가가 잘 못 되었다는 뜻 입니다.

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

대신에 우리는 'object (물건)'가 보입니다.

그말은 이름 변수가 우리가 원하는 string을
가르키는 것이 아니라,

어떤 object를 가르키고 있다는 것입니다.

아마 이 문제를 먼저 알고 계셨을 수도 있습니다.

우리는 총 모든 object 요소를 이름 변수 안에 저장 했습니다.

그리고 object 요소는 요소에 대한 많은 정보가

있는 큰 object이죠.

모든 요소의 특징, 모든 요소의 방법들 등 이요.

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

접근해 보아야 합니다.

그렇게 해보겠습니다. `.value`를 타이핑하겠습니다.
고쳐져야 할텐데요.

잠시 설명을 해보고, 실행해 보세요.

잘 작동됩니다. 그쵸?

아주 잘하는 실수니까, 유의하시길 바랍니다.

그리고 하나 더 흔한 실수를 보여드리고 싶습니다.

여기에 드래그(라인)을 해서,
function 바깥으로 빼 보겠습니다.

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

만약 제대로 되지 않으면, 이름을 위한

빈 string을 만들지 않았기 때문입니다.

왜 그런지 알아 내셨나요?

코드의 각 줄이 실행 될 때를 잘 생각해 보세요.

현재의 코드에서는, 브라우저가
페이지를 로딩하고 있습니다.

그리고 각 줄마다의 자바가 실행되고 있죠.

처음으로, 변수에서 button요소를 저장합니다.

그리고나서 변수에서 input요소의 값을 저장합니다.

하지만 페이지에서 로딩하는 그 시간의 값을 저장합니다.

바로 비어 있는 것이죠.

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

받는 사람이 불러지면, 그 이름은 페이지가
로딩하는 때와

string이라고 할 수 있습니다.

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

그게 바로 이 코드의 줄이 메세지 받기 기능 function

안에 있어야 하는 이유입니다.

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

이번에는 언어 값을 찾는 코드를 더해 봅시다.

여러분이 이걸 이해 하고 있다는 걸 확실하게 해봅시다.

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

음, 이 들여쓰기를 보세요. 별로네요.

이것들을 줄세워 보겠습니다.

좋아요...따라서

[쓰는 중(타이핑 중)]

그리고 사실 제가 변수를 이름 붙일 때 제 ID와 같은
것들을 붙이는 것을 아실텐데요

하지만 그건 제가 그냥 그렇게 하는 것일 뿐,
여러분은 그렇게 하지 않으셔도 됩니다.

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

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

HTML의 값 속성입니다.

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

따라서 `if (lang === "es")`입니다.

그렇다면 환영인사는 "Hola,"가 되겠죠.

계속해서 환영인사 변수를 만들어 봅시다.

환영인사는 "Hola, "와 이름 일 것입니다.

그리고 만약 언어가 "plt"와 같다면, 라틴어로

환영인사가 "Ello-hey, " 와 이름일 것입니다.

그리고 영어의 경우에는 `else` 를 사용할 수 있습니다.

이걸 여기에 옮겨 보겠습니다.

좋아요.

오, 만약 재미있는 추가적인 도전을 하고 싶다면,

이름을 위한 Pig Latin 변환자를 만들어보세요.

이름을 포함한 전체 환영인사가 번역될 수 있도록요.

그럼 꽤 깔끔할 것입니다.

이제 잠시 멈추고, 이름을 입력해 보세요.

다른 언어를 고르시고, 시도해 보세요.

괜찮죠?

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

단어게임, 숫자게임, 이야기만들기... 등

그리고 만약 칸아카데미 서버가 아닌 다른 서버를
가지고 계시다면,

자바스크립트를 이용해서 form input을 서버에
보내기 전에

미리 프로세싱을 하실 수 있으실 겁니다.

form을 통해서 keypress 나 focus event 와 같이
메세지 뿐만 아니라

많은 것을 하실 수 있습니다.

input의 값들을 보시는 것을 잊지 마시고,

그 값을 적절한 시간에 확인 할 것을 기억 하세요.

다음 챌린지에서 연습을 하실 수 있으실 겁니다.

제가 바로 개인적으로 가장 좋아하는 부분이죠.