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의 값들을 보시는 것을 잊지 마시고,
그 값을 적절한 시간에 확인 할 것을 기억 하세요.
다음 챌린지에서 연습을 하실 수 있으실 겁니다.
제가 바로 개인적으로 가장 좋아하는 부분이죠.