1
00:00:00,210 --> 00:00:02,150
OK 우리는 되돌아 올 것이다.

2
00:00:02,400 --> 00:00:10,520
자바 스크립트에 대한 소개에서 자바 스크립트를 배우는 중요한 이유 중 하나는 우리가 페이지를 대화식으로 사용할 수 있다는 것입니다.

3
00:00:10,680 --> 00:00:17,920
사용자가 버튼을 클릭하거나 무언가를 입력하거나 화살표 키를 누르거나 무엇을 하든지 코드를 실행할 수있는 방법입니다.

4
00:00:18,090 --> 00:00:24,880
주어진 시점에 실행되는 해당 코드를 페이지 시작 부분에서 바로 실행하는 것이 아니라 가질 수 있습니다.

5
00:00:25,410 --> 00:00:28,290
그렇게하기 위해서는 Dom 이벤트에 대해 이야기해야합니다.

6
00:00:28,320 --> 00:00:31,250
이 비디오는 Dom 이벤트에 대한 소개입니다.

7
00:00:31,260 --> 00:00:36,300
개념적으로 그들을 설정하는 과정과 그 다음 구문.

8
00:00:36,300 --> 00:00:38,660
그래서 제가 언급했듯이 사건은 어디 에나 있습니다.

9
00:00:38,670 --> 00:00:47,330
웹 페이지와 상호 작용할 때를 생각해보십시오. 링크를 마우스로 가리키면 팝업 될 수있는 버튼과 같은 것들을 클릭 할 수 있습니다.

10
00:00:47,370 --> 00:00:50,320
특정 페이지에서 요소를 끌어다 놓을 수 있습니다.

11
00:00:50,550 --> 00:00:56,650
사용자가 두 번 클릭하여 실행되는 코드가 있거나 실제로이 웹 페이지에 몇 가지 예가 있습니다.

12
00:00:56,670 --> 00:01:03,550
이 슬라이드 닷컴은 웹 사이트이며 왼쪽 및 오른쪽 화살표 키를 눌러 슬라이드를 변경합니다.

13
00:01:03,690 --> 00:01:10,050
따라서 왼쪽 화살표 키 또는 오른쪽 화살표 키를 누르거나 여기를 클릭하면 일부 코드가 실행됩니다.

14
00:01:10,590 --> 00:01:16,860
또한 이벤트이며 현재 슬라이드를 변경하는 코드를 실행 중입니다.

15
00:01:16,950 --> 00:01:20,930
그래서 요점은 사건들이 곳곳에 있고 그들이 정말로 흥미 롭다는 것입니다.

16
00:01:20,920 --> 00:01:35,070
웹 페이지를 대화식으로 만들 수 있기 때문에 텍스트를 변경하는 색상을 변경하는 방법에 대해 배웠던 조작 자료를 취할 수 있고 특정 상황이 발생할 때 실제로이를 수행 할 수 있기 때문에 가르치는 것이 가장 좋아하는 주제 중 하나입니다.

17
00:01:35,070 --> 00:01:38,340
그래서 이것은 정말로 기숙사를 조작 할 수있는 가능성을 열어줍니다.

18
00:01:38,370 --> 00:01:49,050
게임을 만드는 방법은 폼 유효성 검사기를 만드는 방법입니다. 우리는 정말 멋진 색상 선택기 게임을 만들고이 모든 이벤트로 인해 발생합니다.

19
00:01:49,050 --> 00:02:07,590
따라서 이러한 이벤트가 작동하는 방식은 실제로 특정 요소에 연결하여 첫 번째 버튼 또는 두 번째 H-1과 같은 요소를 선택하거나 유형이 텍스트와 동일한 입력을 선택한 다음 해당 이벤트 리스너를 연결하는 것입니다 선택된 요소.

20
00:02:07,920 --> 00:02:21,990
예를 들어 H1에서 마우스를 올리면 텍스트 입력에서 키 누르기 이벤트를들을 수있는 버튼 클릭을들을 수 있습니다. 그런 다음 해당 이벤트 간의 차이점에 대해 더 자세히 이야기하겠습니다.

21
00:02:21,990 --> 00:02:30,170
자바 스크립트에는 여러 가지 유형의 이벤트가 있지만 중요한 것은 주어진 요소에서 수신 대기중인 이벤트가 있어야한다는 것입니다.

22
00:02:30,180 --> 00:02:34,890
따라서 이전에 내가 선택한 것에 대해 이야기하고 나서 여전히 적용되는 것처럼 조작 할 수 있습니다.

23
00:02:34,920 --> 00:02:43,740
우리는 무언가를 선택할 필요가 있습니다. 그러면 우리가 선택한 이벤트에 이벤트 리스너를 추가하는 것입니다.

24
00:02:43,740 --> 00:02:49,400
특히 우리는 이벤트 리스너 추가라고하는 한 가지 방법을 항상 사용하려고합니다.

25
00:02:49,650 --> 00:03:03,070
그래서 이벤트 리스너는 패스워드 때문에 첫 번째 버튼이나 입력 타입과 같은 요소를 선택하고 우리가 선택한 것을 가지고 있으면 이벤트 리스너를 호출하고 두 개의 인수를줍니다.

26
00:03:03,330 --> 00:03:06,950
첫 번째는 우리가 듣고 싶은 이벤트 유형입니다.

27
00:03:07,350 --> 00:03:12,790
두 번째 인수는 해당 이벤트가 발생할 때 실행하려는 코드입니다.

28
00:03:13,260 --> 00:03:14,330
여기 예제가 있습니다.

29
00:03:14,400 --> 00:03:22,060
페이지의 첫 번째 버튼을 선택하는 것은 버튼의 위치 또는 모양 또는 아무 버튼이나 상관 없습니다.

30
00:03:22,350 --> 00:03:30,540
그리고 event listener click에서 button을 호출하고 두 번째 인수는 여기까지가는 함수입니다.

31
00:03:30,750 --> 00:03:33,690
그리고이 코드는 즉시 실행되지 않습니다.

32
00:03:33,690 --> 00:03:35,910
이것은 콜백이라고 기억하십시오.

33
00:03:35,910 --> 00:03:38,140
이 코드는 즉시 실행되지 않습니다.

34
00:03:38,430 --> 00:03:42,000
이 이벤트가 시작되면 실행됩니다.

35
00:03:42,000 --> 00:03:46,390
한 번의 클릭으로 javascript가 호출됩니다.

36
00:03:46,440 --> 00:03:51,630
이 기능은 빛나는 순간이며 여기로 돌아와 준비가되어 있습니다.

37
00:03:51,630 --> 00:03:56,040
그리고 그 코드가 실행되고 상담원에게 누군가가 버튼을 클릭하는 것을 기록하지 않게됩니다.

38
00:03:56,250 --> 00:04:05,290
따라서이 함수는 버튼이 선택된 버튼으로 빠르게 실행될 때마다 실행됩니다.

39
00:04:05,910 --> 00:04:07,540
여기에 또 다른 예가 있습니다.

40
00:04:07,830 --> 00:04:26,910
여기서는 버튼과 단락을 표시하고 Kery 선택기로 둘 다 선택하고 변수에 저장하고 버튼을 클릭하면 이벤트 리스너를 클릭 한 다음 클릭 이벤트를 추가합니다. 두 번째 인수는 콜백 함수입니다.

41
00:04:26,910 --> 00:04:42,260
그리고 그 버튼을 클릭 할 때마다 우리가하려고하는 것은 단락 텍스트 내용이 누군가가 버튼을 클릭하도록 변경되고 아무 버튼도 클릭하지 않고 누군가가 버튼을 클릭하면 그 버튼을 클릭하면 볼 수 있습니다.

42
00:04:42,930 --> 00:04:50,790
이제 Dom 데모 페이지를 사용하여 간단한 데모를 해보겠습니다.이 H-1을 여기서 시작하겠습니다.

43
00:04:50,810 --> 00:04:53,700
사용자가 클릭 할 때 색상을 변경하십시오.

44
00:04:53,780 --> 00:04:58,310
그렇게하기 위해서는 항상 H-1을 선택해야합니다.

45
00:04:58,810 --> 00:05:00,510
그래서 우리는 여러 가지 옵션을 가지고 있습니다.

46
00:05:00,530 --> 00:05:09,070
질의 선택자 H-1이 우리가 가지고 있는지 확인하는 질의어 선택기 문서를 사용할 것입니다.

47
00:05:09,310 --> 00:05:10,460
괜찮아.

48
00:05:10,460 --> 00:05:14,920
그런 다음 이벤트 리스너를 추가하는 H-1을 작성합니다.

49
00:05:15,010 --> 00:05:16,790
두 가지 주장이 있음을 기억하십시오.

50
00:05:16,940 --> 00:05:19,910
첫 번째는 우리가 듣고있는 사건입니다.

51
00:05:20,060 --> 00:05:24,050
그리고 우리는 다른 옵션에 대해 다른 이벤트에 관해 이야기하는 데 더 많은 시간을 할애 할 것입니다.

52
00:05:24,050 --> 00:05:30,050
지금은 클릭 만하고 두 번째는 사용자가 클릭 할 때 실행하려는 코드입니다.

53
00:05:30,310 --> 00:05:37,060
그래서 기능 및 그냥 정말 시작하고 사용자가 클릭 할 때 경고를 수행하십시오.

54
00:05:37,160 --> 00:05:44,330
그래서 우리는 각자가 이와 같이 클릭 한 경고를 할 것입니다.

55
00:05:44,750 --> 00:05:46,990
그리고 지금 엔터를 치자.

56
00:05:47,120 --> 00:05:48,700
아무 것도 즉시 바뀌지 않습니다.

57
00:05:49,190 --> 00:05:52,910
그러나 지금 내가 이것을 클릭하면 이것을 닫을 것입니다.

58
00:05:52,910 --> 00:05:54,570
페이지의 아무 곳이나 클릭하면

59
00:05:54,590 --> 00:05:56,400
H-1을 제외하고는 아무 일도 일어나지 않습니다.

60
00:05:56,620 --> 00:06:01,150
H-1을 클릭하자마자 H-1이 맞았다 고 알려줍니다.

61
00:06:01,430 --> 00:06:02,510
중요합니다.

62
00:06:02,500 --> 00:06:15,290
그것은 H-1에만 적용됩니다.하지만 H-1이 화면 전체를 가로 질러가는 지 검사하기 때문에 여기를 클릭해서 클릭 할 수 있습니다.

63
00:06:15,500 --> 00:06:30,190
그래서이 점에있어 마음에 드는 부분은 있지만, 상황에 따라 행동이 조금씩 다르게 나타나는 경우가 있습니다. CSSA를 사용하여 스테이지 1을 단축하거나 또는 어쨌든 청취자.

64
00:06:30,640 --> 00:06:35,130
따라서 경고하는 것보다는 다른 것을 시도해보십시오.

65
00:06:35,330 --> 00:06:54,260
그리고 위쪽 화살표를 누르면 이벤트 리스너를 클릭하고 여기에서 코드를 변경하면 H-1과 같은 스타일의 배경이 같고 오렌지색 배경을 만들어 보겠습니다.

66
00:06:54,250 --> 00:07:06,030
다시는 아무 것도 바뀌지 않지만 내가 무슨 일이 일어나는지주의 깊게 클릭하면 H-1이 클릭되었다는 경고가 계속 표시됩니다.

67
00:07:06,170 --> 00:07:10,360
그리고 닫을 때 주황색이됩니다.

68
00:07:10,730 --> 00:07:14,840
따라서 여기에 도덕적 인면은 주어진 요소에 둘 이상의 청취자를 가질 수 있다는 것입니다.

69
00:07:14,840 --> 00:07:28,890
그 H-1을 클릭했을 때 우리가 추가 한 첫 번째 청취자는 클릭을 듣고 경보를 울린 다음 나중에 다른 청취자를 추가하여 클릭을 청취했지만 배경색이 변경되었습니다.

70
00:07:28,910 --> 00:07:31,200
그래서 둘 다 클릭하면 실행됩니다.

71
00:07:31,390 --> 00:07:42,190
그리고 내가 다시 클릭하면 경고 메시지가 나타나고 오렌지색으로 변경된 것은 당연히 이제는 일어날 것입니다. 이미 오렌지색 이었기 때문에 당신은 그것을 보지 못합니다.하지만 당신은 나를 신뢰해야합니다.

72
00:07:42,290 --> 00:07:45,000
그것은 그것을 계속해서 오렌지색으로 계속 변경합니다.

73
00:07:45,670 --> 00:07:48,560
좋아, 나는 새로 고치고 그 모든 것을 없앨 것이다.

74
00:07:48,590 --> 00:07:52,720
또한 UL에 청취자를 추가하여 빠른 데모를하고 싶습니다.

75
00:07:52,880 --> 00:08:04,300
따라서 문서 덤프 쿼리 선택기 UL을 수행하고 하나의 ul 대신 3 개의 맹방을 가지고 있음을 기억하십시오.

76
00:08:04,490 --> 00:08:08,500
그래서 저는 그것과 같은 부모 요소에 설정할 때 어떻게되는지 보여 드리겠습니다.

77
00:08:08,510 --> 00:08:11,850
글쎄, 여기서 변수를 사용하지 않을 것입니다.

78
00:08:12,130 --> 00:08:14,640
Adamant 청취자.

79
00:08:15,250 --> 00:08:16,140
딸깍 하는 소리.

80
00:08:16,550 --> 00:08:17,930
이것이 첫 번째 주장입니다.

81
00:08:17,930 --> 00:08:25,560
두 번째는 이와 같이 실행하려는 기능입니다.

82
00:08:25,880 --> 00:08:27,410
그리고 저는 시작할 것입니다.

83
00:08:27,680 --> 00:08:35,720
로그를 잘하는 콘솔을 클릭 만하면됩니다.

84
00:08:35,810 --> 00:08:37,210
그것은 수동적 인 목소리입니다.

85
00:08:37,250 --> 00:08:38,050
나쁜 생각.

86
00:08:38,300 --> 00:08:39,270
하자.

87
00:08:39,460 --> 00:08:43,550
훨씬 더 나은 UL을 클릭했습니다.

88
00:08:43,880 --> 00:08:44,520
승인.

89
00:08:44,720 --> 00:08:48,430
이제 콘솔을 열어두고 UL을 클릭합시다.

90
00:08:48,980 --> 00:08:50,420
그러나 우리는 어떻게 기름을 클릭 할 것인가?

91
00:08:50,450 --> 00:08:53,090
우물에는 그 안에 3 명의 동맹국이 있기 때문입니다.

92
00:08:53,120 --> 00:08:55,290
UL은이 모든 것입니다.

93
00:08:55,320 --> 00:09:00,890
따라서 어떤 우두머리가 우물에서 어느 곳에서나 빠르게 움직이고 있습니다.

94
00:09:01,040 --> 00:09:02,820
여기서 숫자가 증가하는 것을 볼 수 있습니다.

95
00:09:02,930 --> 00:09:07,150
이 콘솔의 점 로그를 빨리 실행하려고합니다.

96
00:09:08,120 --> 00:09:14,290
한 번 더 새로 고침하고 이번에는 동맹 자체를 바꾸고 싶다고합시다.

97
00:09:14,300 --> 00:09:17,540
개인 동맹을 클릭하면 어떤 일이 일어나길 원합니다.

98
00:09:17,960 --> 00:09:19,400
이를 수행하는 데는 몇 가지 방법이 있습니다.

99
00:09:19,420 --> 00:09:26,360
그리고 우리는 가장 단순한 것으로 시작하여 하나의 청취자를 각 동맹 자에게 머리로 붙이는 것으로 시작합니다.

100
00:09:26,360 --> 00:09:32,940
우리가 결국 할 일은 한 청취자를 UL에 연결 한 다음 그 청취자 내부에 연결하는 것입니다.

101
00:09:32,990 --> 00:09:39,250
우리는 UL 내부의 어떤 거짓말이 하나의 Lessner를 통해 모두 클릭되었는지 발견 할 것입니다.

102
00:09:39,250 --> 00:09:55,570
당분간 우리는 모든 거짓말에 별도의 청취자를 추가 할 것입니다. 그래서 우리 동맹국을 선택하여 시작할 필요가 있습니다. 그래서 우리 동맹국은 문서도 큐어 선택기와 동등합니다.

103
00:09:55,570 --> 00:09:59,040
좋아, 우리는 for 루프를 할 필요가있다.

104
00:09:59,210 --> 00:10:02,190
그래서 var I는 0입니다.

105
00:10:02,410 --> 00:10:04,880
우리가 항상이 일을한다고 말했던 것을 기억하십시오.

106
00:10:04,880 --> 00:10:14,740
그래서 나는 그 길이만큼의 동맹국 들보 다 더하기 플러스처럼.

107
00:10:15,050 --> 00:10:20,600
그리고 여기에서 우리는 실제로 각각의 동맹국에 청취자를 추가 할 것입니다.

108
00:10:20,840 --> 00:10:21,940
그래서 그렇게 보입니다.

109
00:10:21,960 --> 00:10:39,220
Elyse I 그렇게 특정 동맹국과 이벤트 리스너 클릭 기능을 제공하고 조금만 수행했습니다.

110
00:10:39,770 --> 00:10:41,920
그리고 우리가 실행하고 싶은 코드.

111
00:10:42,320 --> 00:10:49,250
클릭 한 동맹국의 색을 바꾸어 보라색으로 변경합시다.

112
00:10:49,250 --> 00:10:51,250
그래서 우리에게는 몇 가지 다른 옵션이 있습니다.

113
00:10:51,290 --> 00:10:54,600
내가해야 할 일은 클릭 한 동맹자를 말하는 것입니다.

114
00:10:54,800 --> 00:11:05,320
그래서 저는이 동맹국을 할 수 있습니다. 비록이 키워드를 사용하는 것이 훨씬 쉬운 방법이기 때문에 정말 좋은 해결책은 아닙니다.

115
00:11:05,680 --> 00:11:23,100
청취자의 내부에서 클릭 한 항목이나 가리킨 항목 또는 키 누르기가 발생한 항목을 나타내는 키워드는 at 이벤트 직전에 이동하는 요소가 무엇이든지 무엇이든간에 을 참고하여.

116
00:11:23,140 --> 00:11:30,640
그래서 저는이 색이 보라색과 같은 도트 스타일을 쓸 수 있습니다.

117
00:11:31,000 --> 00:11:33,140
그리고 실제로 그것은 더 명백한 것입니다.

118
00:11:33,230 --> 00:11:34,150
작은 글꼴입니다.

119
00:11:34,150 --> 00:11:36,670
그래서 분홍색을 그렇게 해보 죠.

120
00:11:37,040 --> 00:11:38,500
나는 들어갔다.

121
00:11:38,500 --> 00:11:46,020
즉시 아무 일도 일어나지 않지만, 동맹국을 클릭하면 분홍색으로 변하는 것을 알 수 있습니다.

122
00:11:47,410 --> 00:11:53,960
그리고 계속 클릭하면 계속 분홍색으로 변합니다. 당신은 말할 수 없습니다.

123
00:11:54,080 --> 00:12:03,670
따라서 개별적으로 반복되는 것들을 선택하고 각각에 이벤트 리스너를 추가하는이 패턴은 실제로 매우 일반적입니다.

124
00:12:03,710 --> 00:12:11,170
우리는 우리가 만드는 다음 몇 가지 프로젝트에서 항상 그것을 볼 것입니다.

125
00:12:11,270 --> 00:12:20,830
여기에서 마지막으로 언급 할 것은 괄호로 함수를 작성하고 여기에 이름을 지정하지 않은 것처럼 여기에서했던 것처럼 익명의 함수를 항상 사용할 필요는 없다는 것입니다.

126
00:12:20,990 --> 00:12:22,330
당신은 그렇게 할 필요가 없습니다.

127
00:12:22,370 --> 00:12:25,790
여기에서했던 것처럼 별도로 명명 된 함수를 선언 할 수 있습니다.

128
00:12:26,090 --> 00:12:33,890
함수 변경 텍스트 그리고 우리가해야 할 일은 이벤트 리스너를 추가하거나 클릭 한 다음 텍스트를 변경하는 버튼을 말하는 것입니다.

129
00:12:34,070 --> 00:12:39,890
우리가 원하는 것이 아닌 함수를 즉시 실행하기 때문에 나중에 괄호를 사용하지 않는다.

130
00:12:40,180 --> 00:12:51,100
따라서 우리는이 함수의 값을 전달하는 중입니다. 기본적으로이 퀵 리스너에 내용을 전달하고 있으며 사용자가이 버튼을 클릭 할 때 실행하려는 함수가 여기에 있습니다.

131
00:12:51,190 --> 00:12:52,810
그러나 아직 실행하지 마십시오.

132
00:12:52,820 --> 00:12:55,350
그래서이 둘은 똑같이 작동 할 것입니다.

133
00:12:55,370 --> 00:12:57,030
그것은 단지 선호의 문제입니다.

134
00:12:57,190 --> 00:13:00,830
대부분의 경우 나중에 발생할 수있는 몇 가지 차이점이 있습니다.

135
00:13:00,880 --> 00:13:02,980
나는 이것을 많이 사용하는 것을 선호한다.

136
00:13:03,230 --> 00:13:10,160
익명의 함수를 사용하지 않는 유일한 방법은 시계 리스너 외부의 다른 곳에서 코드를 다시 사용해야하는 경우입니다.

137
00:13:10,150 --> 00:13:22,600
그래서 개별적으로 직접 실행하거나이 함수를 복제하는 대신 다른 빠른 수신기 대신 실행하고 싶으면 이름을 지정한 다음 두 번 사용하는 이름을 복제합니다.

138
00:13:23,060 --> 00:13:30,650
좋아요. 다음에 당신은 빠른 Wisner 's와 우리가 지난 몇 몇 비디오에서 배운 것들을 사용하여 빠른 연습을 할 수있는 기회를 갖게 될 것입니다.