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

2
00:00:05,452 --> 00:00:09,953
우리는 여기의 칸아카데미에 있는 웹페이지들이
보안상의 문제로 서버와

3
00:00:09,953 --> 00:00:11,442
상호적인 연결을 하지 않도록 할 것 입니다.

4
00:00:11,442 --> 00:00:13,648
따라서 여기서는 form방식을 
가르쳐 드리지 않을 겁니다.

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

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

7
00:00:20,550 --> 00:00:23,074
그것들을 서버로 보내는 것 대신에요.

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

9
00:00:28,096 --> 00:00:30,045
만들어 두었습니다.

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

11
00:00:34,027 --> 00:00:36,666
만들어 보겠습니다.

12
00:00:36,666 --> 00:00:41,457
첫 번째 단계는 변수에 button (버튼) 요소를 
저장 하는 것입니다.

13
00:00:41,457 --> 00:00:49,307
그래서 `document.getElementById("button")` 라고
지정하겠습니다.

14
00:00:49,307 --> 00:00:53,192
다음 단계는 받는 사람 지정하는 기능을 넣는 것입니다.

15
00:00:53,192 --> 00:00:57,885
따라서 `var onButtonClick = function() {` 라고 하겠습니다.

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

17
00:01:03,770 --> 00:01:08,729
따라서 `document.getElementById("message")` 라고 하고,

18
00:01:08,729 --> 00:01:10,709
친절한 짧은 메세지를 하기 위해, 'div' 를 넣습니다.

19
00:01:10,709 --> 00:01:20,707
그리고 `textContent +=
"You clicked me! Thank you so much!" ' 라고 하면 됩니다.

20
00:01:20,707 --> 00:01:23,161
아주 감사하는 메세지군요!

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

22
00:01:28,796 --> 00:01:31,711
버튼이 클릭 되었을때 그 기능이 실행되기 위해서죠.

23
00:01:31,711 --> 00:01:36,491
따라서, `("click", onButtonClick)` 라고 합니다.

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

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

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

27
00:01:52,850 --> 00:01:55,834
이에 맞는 변수를 만들게요.

28
00:01:55,834 --> 00:02:04,770
따라서, `var name = document.getElementById`라고 넣습니다.

29
00:02:04,770 --> 00:02:07,337
ID가 있기 때문에,

30
00:02:07,337 --> 00:02:11,322
저기에다가 뒀습니다.

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

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

33
00:02:22,720 --> 00:02:24,203
그리고, ` + name`.

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

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

36
00:02:38,772 --> 00:02:41,688
봅시다, 맞게 한 것 같군요.

37
00:02:41,688 --> 00:02:44,899
이름input을 찾았고, 환영인사string을 만들었습니다.

38
00:02:44,899 --> 00:02:47,732
그리고 그것을 div와 연결 시켰습니다.

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

40
00:02:53,032 --> 00:02:55,632
우리가 원하는 대로 되지 않습니다, 그렇죠?

41
00:02:55,632 --> 00:03:01,877
"Heyaz [object Object]" 나 "Heyaz object Element"
를 보셨습니까?

42
00:03:01,877 --> 00:03:04,761
추측건데, 이름이 Object가 아니기 때문입니다.

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

44
00:03:08,073 --> 00:03:10,508
어쨋든, 그렇다면 뭔가가 잘 못 되었다는 뜻 입니다.

45
00:03:10,508 --> 00:03:13,704
사용자가 무엇을 입력하든지 그것을 볼 수 있어야 하는데,

46
00:03:13,704 --> 00:03:16,482
대신에 우리는 'object (물건)'가 보입니다.

47
00:03:16,482 --> 00:03:20,682
그말은 이름 변수가 우리가 원하는 string을 
가르키는 것이 아니라,

48
00:03:20,682 --> 00:03:23,581
어떤 object를 가르키고 있다는 것입니다.

49
00:03:23,581 --> 00:03:26,647
아마 이 문제를 먼저 알고 계셨을 수도 있습니다.

50
00:03:26,647 --> 00:03:31,885
우리는 총 모든 object 요소를 이름 변수 안에 저장 했습니다.

51
00:03:31,885 --> 00:03:34,987
그리고 object 요소는 요소에 대한 많은 정보가

52
00:03:34,987 --> 00:03:37,095
있는 큰 object이죠.

53
00:03:37,095 --> 00:03:39,532
모든 요소의 특징, 모든 요소의 방법들 등 이요.

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

55
00:03:43,472 --> 00:03:46,211
접근해 보아야 합니다.

56
00:03:46,211 --> 00:03:51,918
그렇게 해보겠습니다. `.value`를 타이핑하겠습니다.
고쳐져야 할텐데요.


57
00:03:51,918 --> 00:03:56,177
잠시 설명을 해보고, 실행해 보세요.

58
00:03:56,177 --> 00:03:57,984
잘 작동됩니다. 그쵸?

59
00:03:57,984 --> 00:04:01,913
아주 잘하는 실수니까, 유의하시길 바랍니다.

60
00:04:01,913 --> 00:04:05,007
그리고 하나 더 흔한 실수를 보여드리고 싶습니다.

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

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

63
00:04:22,740 --> 00:04:25,997
만약 제대로 되지 않으면, 이름을 위한

64
00:04:25,997 --> 00:04:28,050
빈 string을 만들지 않았기 때문입니다.

65
00:04:28,050 --> 00:04:29,693
왜 그런지 알아 내셨나요?

66
00:04:29,693 --> 00:04:33,937
코드의 각 줄이 실행 될 때를 잘 생각해 보세요.

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

68
00:04:37,098 --> 00:04:39,770
그리고 각 줄마다의 자바가 실행되고 있죠.

69
00:04:39,770 --> 00:04:42,928
처음으로, 변수에서 button요소를 저장합니다.

70
00:04:42,928 --> 00:04:46,817
그리고나서 변수에서 input요소의 값을 저장합니다.

71
00:04:46,817 --> 00:04:50,460
하지만 페이지에서 로딩하는 그 시간의 값을 저장합니다.

72
00:04:50,460 --> 00:04:52,465
바로 비어 있는 것이죠.

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

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

75
00:05:00,421 --> 00:05:02,877
string이라고 할 수 있습니다.

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

77
00:05:06,201 --> 00:05:08,529
그게 바로 이 코드의 줄이 메세지 받기 기능 function

78
00:05:08,529 --> 00:05:13,190
안에 있어야 하는 이유입니다.

79
00:05:13,190 --> 00:05:18,757
따라서 메세지가 나타나는 시간의 값을 찾아 낼 수 있습니다.

80
00:05:18,757 --> 00:05:21,938
이번에는 언어 값을 찾는 코드를 더해 봅시다.

81
00:05:21,938 --> 00:05:24,414
여러분이 이걸 이해 하고 있다는 걸 확실하게 해봅시다.

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

83
00:05:31,769 --> 00:05:34,546
음, 이 들여쓰기를 보세요. 별로네요.

84
00:05:34,546 --> 00:05:36,891
이것들을 줄세워 보겠습니다.

85
00:05:36,891 --> 00:05:38,842
좋아요...따라서

86
00:05:38,842 --> 00:05:41,453
[쓰는 중(타이핑 중)]

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

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

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

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

91
00:06:03,627 --> 00:06:06,880
HTML의 값 속성입니다.

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

93
00:06:11,250 --> 00:06:17,212
따라서 `if (lang === "es")`입니다.

94
00:06:17,212 --> 00:06:23,684
그렇다면 환영인사는 "Hola,"가 되겠죠.

95
00:06:23,684 --> 00:06:26,809
계속해서 환영인사 변수를 만들어 봅시다.

96
00:06:26,809 --> 00:06:35,105
환영인사는 "Hola, "와 이름 일 것입니다.

97
00:06:35,105 --> 00:06:41,218
그리고 만약 언어가 "plt"와 같다면, 라틴어로


98
00:06:41,218 --> 00:06:48,538
환영인사가 "Ello-hey, " 와 이름일 것입니다.

99
00:06:48,538 --> 00:06:53,167
그리고 영어의 경우에는 `else` 를 사용할 수 있습니다.

100
00:06:53,167 --> 00:06:55,366
이걸 여기에 옮겨 보겠습니다.

101
00:06:55,366 --> 00:06:56,799
좋아요.

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

103
00:07:00,374 --> 00:07:03,840
이름을 위한 Pig Latin 변환자를 만들어보세요.


104
00:07:03,840 --> 00:07:07,678
이름을 포함한 전체 환영인사가 번역될 수 있도록요.

105
00:07:07,678 --> 00:07:10,009
그럼 꽤 깔끔할 것입니다.

106
00:07:10,009 --> 00:07:13,295
이제 잠시 멈추고, 이름을 입력해 보세요.

107
00:07:13,295 --> 00:07:19,098
다른 언어를 고르시고, 시도해 보세요.

108
00:07:19,098 --> 00:07:20,239
괜찮죠?

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

110
00:07:24,691 --> 00:07:27,316
단어게임, 숫자게임, 이야기만들기... 등

111
00:07:27,316 --> 00:07:30,029
그리고 만약 칸아카데미 서버가 아닌 다른 서버를
가지고 계시다면,

112
00:07:30,029 --> 00:07:33,447
자바스크립트를 이용해서 form input을 서버에
보내기 전에

113
00:07:33,447 --> 00:07:35,361
미리 프로세싱을 하실 수 있으실 겁니다.

114
00:07:35,361 --> 00:07:38,522
form을 통해서 keypress 나 focus event 와 같이
메세지 뿐만 아니라

115
00:07:38,522 --> 00:07:40,701
많은 것을 하실 수 있습니다.

116
00:07:40,701 --> 00:07:44,152
input의 값들을 보시는 것을 잊지 마시고,

117
00:07:44,152 --> 00:07:47,289
그 값을 적절한 시간에 확인 할 것을 기억 하세요.

118
00:07:47,289 --> 00:07:50,031
다음 챌린지에서 연습을 하실 수 있으실 겁니다.

119
00:07:50,031 --> 00:07:52,644
제가 바로 개인적으로 가장 좋아하는 부분이죠.