1
00:00:00,000 --> 00:00:04,439

2
00:00:04,439 --> 00:00:07,230
DOUG 로이드 :이 비디오에서는, 우리는 원
별도의 관심을 불러

3
00:00:07,230 --> 00:00:09,110
아주 특별한에
자바 스크립트의 요소

4
00:00:09,110 --> 00:00:11,350
당신이 편리하다는 사실을 발견
때구나

5
00:00:11,350 --> 00:00:15,750
웹 페이지를 조작하는 작업을하고
웹 페이지의 내용을 변경

6
00:00:15,750 --> 00:00:16,460
즉석에서.

7
00:00:16,460 --> 00:00:19,450
그리고 그의 개념이다
문서 객체 모델.

8
00:00:19,450 --> 00:00:23,030
같은 그래서 우리는에 우리의 비디오에서 본
자바 스크립트 객체는 매우 유연합니다.

9
00:00:23,030 --> 00:00:24,750
>> 그리고 그들은 다양한 분야를 포함 할 수 있습니다.

10
00:00:24,750 --> 00:00:28,075
그리고 우리는 많이 다루지 않았지만
세부 사항, 해당 필드 또는 속성,

11
00:00:28,075 --> 00:00:30,200
즉, 우리는 아마 더 많은 것
적절하게 전화

12
00:00:30,200 --> 00:00:33,915
심지어 개체의 컨텍스트에서
이러한 속성은 다른 객체가 될 수 있습니다.

13
00:00:33,915 --> 00:00:36,210
그리고 그 객체의 내부
다른 객체가 될 수 있습니다.

14
00:00:36,210 --> 00:00:39,630
>> 이 매우 큰 개체가
다른 개체의 많은

15
00:00:39,630 --> 00:00:43,550
의 그것의 내부, 어떤 종류의
큰 나무의이 아이디어를 생성합니다.

16
00:00:43,550 --> 00:00:47,540
이제, 문서 객체 인
자바 스크립트에서 아주 특별한 객체

17
00:00:47,540 --> 00:00:52,580
즉, 전체 웹을 구성합니다
우산의 종류에 따라 페이지

18
00:00:52,580 --> 00:00:53,470
개체.

19
00:00:53,470 --> 00:00:56,770
그리고 문서의 내부
목적은 제시 객체

20
00:00:56,770 --> 00:00:59,630
웹 페이지의 머리와 몸.

21
00:00:59,630 --> 00:01:03,760
>> 그 안에는 다른입니다
개체 등등 등등,

22
00:01:03,760 --> 00:01:08,411
전체 웹 페이지가 될 때까지
이 큰 객체로 구성되었다.

23
00:01:08,411 --> 00:01:09,660
거꾸로, 바로 여기에 무엇입니까?

24
00:01:09,660 --> 00:01:12,170
글쎄, 우리가 작동하는 방법을 알고
자바 스크립트 객체와.

25
00:01:12,170 --> 00:01:15,840
>> 우리가 객체가 있다면 그
것을, 우리의 전체 웹 페이지를 말한다

26
00:01:15,840 --> 00:01:19,590
올바른를 호출하여 의미
방법은 그 객체를 조작하는

27
00:01:19,590 --> 00:01:22,360
또는 특정 수정
속성, 우리

28
00:01:22,360 --> 00:01:25,500
의 요소를 변경할 수
우리의 페이지 프로그래밍

29
00:01:25,500 --> 00:01:30,210
자바 스크립트를 사용하는 대신 필요
HTML, 말과 일을 코드.

30
00:01:30,210 --> 00:01:33,760
그래서 여기의 예
웹 페이지 매우 간단, 맞죠?

31
00:01:33,760 --> 00:01:35,850
그것은 HTML 태그, 머리를 가지고있다.

32
00:01:35,850 --> 00:01:37,979
>> 의 내부 제목, 안녕하세요 세계가있다.

33
00:01:37,979 --> 00:01:38,770
그 때 나는 몸을 가지고있다.

34
00:01:38,770 --> 00:01:40,686
그 안에서, 내가 가진
세 가지 다른 것들.

35
00:01:40,686 --> 00:01:44,170
나는, H2 헤더 태그가
단락 및 링크.

36
00:01:44,170 --> 00:01:45,920
이것은 매우 단순한 웹 페이지이다.

37
00:01:45,920 --> 00:01:48,590
>> 그럼, 수있는 문서
등이 Look 객체?

38
00:01:48,590 --> 00:01:50,700
음, 약간의
아마 처음에는 무서운.

39
00:01:50,700 --> 00:01:52,510
그러나 그것은 정말 큰 나무입니다.

40
00:01:52,510 --> 00:01:54,890
그것의 매우 루트 문서이다.

41
00:01:54,890 --> 00:02:00,030
>> 문서가 다른입니다 내부
내 페이지의 HTML 참조 객체입니다.

42
00:02:00,030 --> 00:02:02,660
그리고 내 페이지의 HTML이 모두입니다.

43
00:02:02,660 --> 00:02:06,900
그리고 HTML의 내부
개체, 나는 머리 개체가,

44
00:02:06,900 --> 00:02:09,000
이는이 모든 것을 의미한다.

45
00:02:09,000 --> 00:02:11,009
>> 그리고 거기의 내부,
나는 제목 개체가 있습니다.

46
00:02:11,009 --> 00:02:15,620
그리고 거기의 내부에, 나는 또 다른이
그건 그냥 인사 세계의 객체.

47
00:02:15,620 --> 00:02:18,020
나는 내 몸을 가질 수
이 같은 표현.

48
00:02:18,020 --> 00:02:22,850
>> 내 몸의 내부, 나는 H2가
개체 및 단락에 대한 P 객체

49
00:02:22,850 --> 00:02:25,270
및 링크에 대한 객체입니다.

50
00:02:25,270 --> 00:02:29,660
그리고이 전체 계층 구조
큰 나무로 표현 될 수있다

51
00:02:29,660 --> 00:02:31,990
작은 작은 많은
물건은 나오는.

52
00:02:31,990 --> 00:02:33,740
지금, 물론, 경우
우리는, 프로그래밍있어

53
00:02:33,740 --> 00:02:35,560
큰 나무 같은 것을 생각하지 않습니다.

54
00:02:35,560 --> 00:02:37,980
우리는 실제보고 싶어
코드와 관련된 것들.

55
00:02:37,980 --> 00:02:40,790
>> 그리고 다행히도, 우리는 할 수
우리의 개발자 도구를 사용하여

56
00:02:40,790 --> 00:02:46,080
실제로 살펴보고
이 웹 사이트의 문서 객체.

57
00:02:46,080 --> 00:02:48,150
그리고 이제 그렇게 할 수 있습니다.

58
00:02:48,150 --> 00:02:49,580
그래서 브라우저 탭을 열었습니다.

59
00:02:49,580 --> 00:02:51,540
>> 그리고 개발자 도구를 열었다.

60
00:02:51,540 --> 00:02:54,460
그리고 자바 스크립트가 내 비디오에, 나는
콘솔이 아니라고 언급

61
00:02:54,460 --> 00:02:56,770
유일한 곳 어디
우리는 정보를 인쇄,

62
00:02:56,770 --> 00:02:59,560
또한 장소 어디
우리는 입력 정보를 수 있습니다.

63
00:02:59,560 --> 00:03:01,380
이런 맥락에서 어떤
나는 말할거야

64
00:03:01,380 --> 00:03:05,720
내가 다시 좀하고 싶습니다
문서 객체,

65
00:03:05,720 --> 00:03:07,502
그래서 그것을 한 번 봐 가지고 시작할 수 있습니다.

66
00:03:07,502 --> 00:03:08,460
그래서 나는 이것을 어떻게 할 수 있는가?

67
00:03:08,460 --> 00:03:10,740
글쎄, 내가 원하는 경우
정말 멋지게 정리,

68
00:03:10,740 --> 00:03:16,317
나는 console.dir, D-I-R을 말하는거야.
지금, 난 그냥 인쇄에 CONSOLE.LOG를 사용

69
00:03:16,317 --> 00:03:17,400
무언가 아주 간단합니다.

70
00:03:17,400 --> 00:03:20,450
그러나 나는이를 구성하려면
계층 적 객체처럼,

71
00:03:20,450 --> 00:03:23,800
나는 그것이 일종의 구조화 할
디렉토리 구조 등을 포함한다.

72
00:03:23,800 --> 00:03:27,400
>> 그래서 문서를 console.dir 싶다.

73
00:03:27,400 --> 00:03:28,430
나는 Enter 키를 누르거야.

74
00:03:28,430 --> 00:03:32,350
그리고 바로 아래에 지금,
나는 여기에서 확대합니다

75
00:03:32,350 --> 00:03:36,000
나는이 응답 문서를 가지고
그 옆에 작은 화살표가.

76
00:03:36,000 --> 00:03:39,470
지금, 나는이 화살표를 열 때,
물건을 많이있을 것입니다.

77
00:03:39,470 --> 00:03:42,560
>> 그러나 우리는 많이 무시하는거야
그것과 초점의 단지 종류의

78
00:03:42,560 --> 00:03:46,250
가장 중요한 부분에, 우리 때문에
이 문서를 탐색 할 수 시작할 수 있습니다.

79
00:03:46,250 --> 00:03:50,125
DOM보다 훨씬 더있다
노드와 자식 노드 바로 부모입니다.

80
00:03:50,125 --> 00:03:51,500
보조 물건을 많이가있다.

81
00:03:51,500 --> 00:03:52,280
>> 그래서 나는이를 열거야.

82
00:03:52,280 --> 00:03:54,610
그리고 전체 많아요
물건의이 나타납니다.

83
00:03:54,610 --> 00:03:59,000
하지만 걱정 모두이다
바로 여기, 자식 노드.

84
00:03:59,000 --> 00:04:00,410
의 그을 열어 보자.

85
00:04:00,410 --> 00:04:03,810
>> 거기의 내부 봐요
익숙한 일, HTML.

86
00:04:03,810 --> 00:04:07,670
우리의 문서의 내부 그래서
한 단계 아래로, HTML.

87
00:04:07,670 --> 00:04:08,550
나는를 엽니 다.

88
00:04:08,550 --> 00:04:10,380
우리는 무엇을 기대?

89
00:04:10,380 --> 00:04:13,760
>> 당신이 우리의 다이어그램에서 기억 경우,
우리는 HTML 내부에 무엇을 찾을 것인가?

90
00:04:13,760 --> 00:04:17,275
트리 아래에 어떤 두 개의 노드인가?

91
00:04:17,275 --> 00:04:17,899
의 알아 보자.

92
00:04:17,899 --> 00:04:18,940
우리는 HTML을 엽니 다.

93
00:04:18,940 --> 00:04:22,079
우리는 자식 노드 아래로 이동합니다.

94
00:04:22,079 --> 00:04:23,440
>> 개폐 팝.

95
00:04:23,440 --> 00:04:25,990
머리와 몸이있다.

96
00:04:25,990 --> 00:04:28,540
그리고 우리는 머리를 열 수 있습니다.

97
00:04:28,540 --> 00:04:30,460
자식 노드로 이동합니다.

98
00:04:30,460 --> 00:04:31,460
음, 제목이있다.

99
00:04:31,460 --> 00:04:33,293
>> 그리고 우리가 갈 수 있고,
이 같은에 영원히.

100
00:04:33,293 --> 00:04:34,770
우리는뿐만 아니라 몸이 작업을 수행 할 수 있습니다.

101
00:04:34,770 --> 00:04:40,090
그러나 우리가 볼 수있는 방법이있다
큰 개체로 구성 문서.

102
00:04:40,090 --> 00:04:42,610
우리가 보면 그리고 큰
많이 보이는 개체

103
00:04:42,610 --> 00:04:47,480
코드처럼, 그것은 우리가 시작할 수 있다는 것을 의미한다
사용이 큰 객체를 조작하는

104
00:04:47,480 --> 00:04:51,220
코드는 무엇을 변경하는 우리의
웹 사이트는 보이는 것 같은 느낌이 든다.

105
00:04:51,220 --> 00:04:54,920
>> 그래서 매우 강력한 도구입니다
우리는 지금 우리의 처분에 있습니다.

106
00:04:54,920 --> 00:04:57,360
우리가 방금 본 그래서,
문서 객체 자체

107
00:04:57,360 --> 00:05:01,392
그것의 내부의 모든 개체
다만, 속성과 메소드를

108
00:05:01,392 --> 00:05:04,100
우리가 한 모든 다른 개체와 같은
자바 스크립트에서 함께 일하고.

109
00:05:04,100 --> 00:05:08,370
그러나 우리는 이러한 속성을 사용할 수 있으며
종류의 드릴 다운 그 방법을 사용

110
00:05:08,370 --> 00:05:10,900
그리고 큰 문서에서하면 얻을
하부 및 더 낮은,

111
00:05:10,900 --> 00:05:13,360
미세하고 미세한 입자
세부 사항, 우리까지

112
00:05:13,360 --> 00:05:17,510
매우 특정 부분에 도착 우리의
우리가 변경하고자하는 웹 페이지를 참조하십시오.

113
00:05:17,510 --> 00:05:22,700
>> 그리고 우리는의 속성을 업데이트 할 때
개체를 문서 또는 그 메소드를 호출,

114
00:05:22,700 --> 00:05:24,450
일이 우리의 웹 페이지에서 일어날 수 있습니다.

115
00:05:24,450 --> 00:05:28,420
그리고 우리는 어떤 상쾌 할 필요가 없습니다
이러한 변경 사항을 적용합니다.

116
00:05:28,420 --> 00:05:33,160
>> 그리고 그에게 정말 멋진 기능입니다
우리가 코드로 작업 할 때이있다.

117
00:05:33,160 --> 00:05:37,185
그래서 이러한 속성 중 일부 무엇인가
문서 객체의 부분이 있습니까?

118
00:05:37,185 --> 00:05:40,100
글쎄, 당신은 아마 보았다
그들 중 몇 정말 빨리

119
00:05:40,100 --> 00:05:42,700
우리가 압축하는 한 같은
거대한 문서를 통해

120
00:05:42,700 --> 00:05:45,150
객체 우리는 단지 웹 브라우저에서 보았다.

121
00:05:45,150 --> 00:05:48,420
>> 그러나 이들 중 몇
내부 HTML 같은 것들이있을 수 있습니다.

122
00:05:48,420 --> 00:05:52,950
그리고 당신도 나를 기억 수도 있습니다
자바 스크립트 비디오에서 이것을 사용하여

123
00:05:52,950 --> 00:05:54,950
맨 마지막에 때
이벤트에 대해 얘기했다.

124
00:05:54,950 --> 00:05:56,125
이 내부 HTML은 무엇입니까?

125
00:05:56,125 --> 00:05:59,030
음, 그냥 무슨
태그 사이에.

126
00:05:59,030 --> 00:06:01,590
>> 그리고 내부 HTML,
예를 들면, 타이틀의

127
00:06:01,590 --> 00:06:05,390
우리가 보관 한 경우 태그에가는
잠시 전에 예를 들어 그

128
00:06:05,390 --> 00:06:08,020
안녕하세요 세계했을 것이다.

129
00:06:08,020 --> 00:06:10,140
즉 우리의 페이지의 제목이었다.

130
00:06:10,140 --> 00:06:12,370
다른 속성
노드 이름을 포함하는

131
00:06:12,370 --> 00:06:15,810
HTML의 이름이고
제목과 같은 요소입니다.

132
00:06:15,810 --> 00:06:19,100
ID입니다 ID,
HTML 요소의 속성.

133
00:06:19,100 --> 00:06:23,790
>> 우리가 특별히 표시 할 수 있음을 기억하자
우리의 HTML의 특정 요소

134
00:06:23,790 --> 00:06:27,510
일반적으로 ID 속성과
CSS의 맥락에서 유용,

135
00:06:27,510 --> 00:06:29,000
특히.

136
00:06:29,000 --> 00:06:33,217
에 대한 참조 부모 노드,
그냥 저 위의 DOM의 내용.

137
00:06:33,217 --> 00:06:35,800
그리고 자식 노드, 인
아래로 나를 아래 무엇을 참조.

138
00:06:35,800 --> 00:06:37,950
그리고 우리는 많이 보았다
다만 통해 찾고.

139
00:06:37,950 --> 00:06:42,970
우리가 가진 방법 자식 노드, 즉이다
트리에 더 낮은.

140
00:06:42,970 --> 00:06:46,590
>> 속성 그건 그냥 배열이다
HTML의 요소의 속성.

141
00:06:46,590 --> 00:06:50,270
따라서 특성의 예는 수도
당신은 이미지 태그가있는 경우 수,

142
00:06:50,270 --> 00:06:54,090
보통 소스 속성을 가지고
어쩌면 높이 및 폭 특성.

143
00:06:54,090 --> 00:06:57,120
그리고 그것은 단지 배열 될 것이다
관련된 모든 속성의

144
00:06:57,120 --> 00:06:59,300
그 HTML 요소.

145
00:06:59,300 --> 00:07:04,140
>> 스타일이 다른 하나입니다
CSS를 상징 하는가

146
00:07:04,140 --> 00:07:06,050
특정 요소의 스타일.

147
00:07:06,050 --> 00:07:08,310
그리고 나중에이에
비디오, 우리는 특별히거야

148
00:07:08,310 --> 00:07:14,592
레버리지 스타일은 몇 가지로 만들려면
우리의 웹 사이트에 대한 변경.

149
00:07:14,592 --> 00:07:15,800
그래서 사람들은 몇 가지 특성이 있습니다.

150
00:07:15,800 --> 00:07:17,591
>> 또한 몇 가지가 있습니다
우리가 할 수있는 방법

151
00:07:17,591 --> 00:07:22,450
또한 더 빨리 어쩌면 분리하는 데 사용
문서 객체의 요소.

152
00:07:22,450 --> 00:07:26,730
아마도, 가장 다양한
이러한 것을 getElementById의.

153
00:07:26,730 --> 00:07:31,190
그래서, 때문에 같은 것을 말할 수있다
이 문서에있어서의 기억

154
00:07:31,190 --> 00:07:34,880
, document.getElementById를 객체.

155
00:07:34,880 --> 00:07:39,820
>> 그리고 그 괄호 안에 지정
특정 ID를 가진 HTML 요소

156
00:07:39,820 --> 00:07:42,330
내가 이전했다고 속성
설정하고, 나는 즉시거야

157
00:07:42,330 --> 00:07:46,685
해당 요소에서 오른쪽으로 이동
전체 웹 사이트의.

158
00:07:46,685 --> 00:07:49,310
그래서 어쩌면 드릴 필요가 없습니다
모든 단일 계층을 통해 아래로.

159
00:07:49,310 --> 00:07:52,841
난 그냥 그것을 찾기 위해이 방법을 사용할 수 있습니다,
종류의 열 추구 미사일처럼,

160
00:07:52,841 --> 00:07:53,340
권리?

161
00:07:53,340 --> 00:07:56,300
그냥 가서 발견
정확히이 찾고있는 사람이 있는지.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName입니다
정신에 매우 유사합니다.

163
00:07:59,290 --> 00:08:02,500
어쩌면이 모두를 찾아 낼 것입니다
굵은 태그 또는 P 태그의 모든

164
00:08:02,500 --> 00:08:05,920
나에게 모든 것을 배열을 제공
나는 그와 함께 일할 수있다.

165
00:08:05,920 --> 00:08:12,080
에 ap​​pendChild 뭔가를 추가
아래 트리에서 한 수준.

166
00:08:12,080 --> 00:08:16,440
>> 그래서 나는 완전히 새로운를 추가 할 수 있습니다
요소 한 수준 낮은.

167
00:08:16,440 --> 00:08:19,700
아니면 내가의 요소를 제거 할 수 있습니다
뿐만 아니라 내가 원하는 경우 한 단계 낮은

168
00:08:19,700 --> 00:08:22,870
내 웹 페이지에서 무언가를 삭제합니다.

169
00:08:22,870 --> 00:08:28,480
이제, 빠른 코딩 노트와 빠른
두통은 희망, 메모를 저장.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- D는 소문자입니다.

171
00:08:31,670 --> 00:08:36,950
나는 얼마나 많은 시간을 말할 수 없다
사용 getElementById와 대문자

172
00:08:36,950 --> 00:08:38,336
이 D.

173
00:08:38,336 --> 00:08:39,460
정말 흔한 일 때문에.

174
00:08:39,460 --> 00:08:42,990
우리가 단어 ID를 작성하는 경우, 그것은있어
일반적으로 자본 나는 자본 D.

175
00:08:42,990 --> 00:08:44,240
그리고 내 코드는 작동하지 않습니다.

176
00:08:44,240 --> 00:08:45,630
그리고 그 이유를 알아낼 수 없습니다.

177
00:08:45,630 --> 00:08:49,490
이건 정말, 정말, 정말입니다
모두가 만드는 일반적인 버그,

178
00:08:49,490 --> 00:08:51,890
에도 전문가
영원히 이렇게되었다.

179
00:08:51,890 --> 00:08:55,410
그러니, getElementById 인식,
그 D는 소문자입니다.

180
00:08:55,410 --> 00:09:00,080
희망, 그 여러 저장
상심의 적어도 분.

181
00:09:00,080 --> 00:09:02,204
>> 그래서이 모든 것이 우리에게 무엇을 말해 주는가?

182
00:09:02,204 --> 00:09:03,120
우리는 이러한 방법이있다.

183
00:09:03,120 --> 00:09:04,161
우리는 이러한 속성을 가지고있다.

184
00:09:04,161 --> 00:09:06,610
이제, 우리는에서 시작하는 경우
문서, 문서.

185
00:09:06,610 --> 00:09:10,220
무엇이든, 우리는 지금 어떤 얻을 수 있습니다
우리의 웹 페이지의 한 조각

186
00:09:10,220 --> 00:09:14,870
우리는 JavaScript를 사용하도록
다만이 메서드를 호출하여

187
00:09:14,870 --> 00:09:19,940
과 특성을 활용
우리는 다양한 위치에서 찾을 수있다.

188
00:09:19,940 --> 00:09:24,890
>> 이것은,이 말의 얻을 수 있습니다
document.getElementById를,

189
00:09:24,890 --> 00:09:28,560
어쩌면 긴 태그 이름을 가지고,
어쩌면 당신은 나중에 더 많은 통화를 할.

190
00:09:28,560 --> 00:09:31,230
상황이 조금 장황 얻을 수 있습니다.

191
00:09:31,230 --> 00:09:34,480
그리고 프로그래머, 당신은했듯이
아마이 영상의 많은 볼,

192
00:09:34,480 --> 00:09:36,600
우리는 말의 일을 좋아하지 않는다.

193
00:09:36,600 --> 00:09:38,520
>> 우리는 빨리 일을 할 수 있도록하고자.

194
00:09:38,520 --> 00:09:42,640
그래서 우리는 더 싶습니다
간결한 방법은 무엇인가 대답.

195
00:09:42,640 --> 00:09:46,270
그래서에 리드 이런 종류의
뭔가의 개념은 jQuery를했다.

196
00:09:46,270 --> 00:09:49,170
이제 jQuery를 자바 스크립트 없습니다.

197
00:09:49,170 --> 00:09:50,350
그것은 자바 스크립트의 일부가 아니다.

198
00:09:50,350 --> 00:09:54,790
>> 그것은 기록 된 라이브러리입니다
일부 자바 스크립트 프로그래머

199
00:09:54,790 --> 00:09:57,060
약 10 년 전.

200
00:09:57,060 --> 00:10:01,300
그리고 그 목표는이 무엇을 단순화하는 것입니다
라는 클라이언트 측 스크립트, 어떤

201
00:10:01,300 --> 00:10:04,310
우리가 무엇인지 기본적으로
DOM 조작에 대한 이야기​​.

202
00:10:04,310 --> 00:10:11,090
그래서 만약 내가 수정 싶어
내 웹 페이지의 배경색, 어쩌면

203
00:10:11,090 --> 00:10:11,980
특정 사업부.

204
00:10:11,980 --> 00:10:15,325
>> 자, 내가 분명히 받고 있어요
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
그리고 나는 그것의 배경 색상을 설정합니다.

206
00:10:16,950 --> 00:10:20,720
난 그냥 순수 자바 스크립트를 사용하고있는 경우
문서 객체 모델을 사용하여,

207
00:10:20,720 --> 00:10:23,990
맞아, 물건을 많이입니까?
중요 document.getElementById

208
00:10:23,990 --> 00:10:25,531
colorDiv.style.backgroundColor 녹색 =.

209
00:10:25,531 --> 00:10:27,260

210
00:10:27,260 --> 00:10:28,050
>> 아휴.

211
00:10:28,050 --> 00:10:30,110
즉, 말을 많이했다.

212
00:10:30,110 --> 00:10:31,720
너무 입력 할 수있는 많은입니다.

213
00:10:31,720 --> 00:10:35,760
그리고 jQuery를, 우리는 아마 말할 수있다
이 조금 더 간결하게.

214
00:10:35,760 --> 00:10:39,350
그것을있는 떨어져 무역은 어쩌면 조금의
비트 갑자기 더 애매한,

215
00:10:39,350 --> 00:10:39,850
권리?

216
00:10:39,850 --> 00:10:43,580
>> 적어도 긴 조금 더
우리가 무슨 일을하는지에 대한 설명 적.

217
00:10:43,580 --> 00:10:49,947
이 달러 기호, 괄호,
작은 따옴표, 해시, colorDiv, 오른쪽?

218
00:10:49,947 --> 00:10:50,780
그게 무슨 뜻 이죠?

219
00:10:50,780 --> 00:10:53,640
글쎄, 그건 그냥 기본적이다
document.getElementById를 colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> 그러나 속기 이런 종류의
jQuery를 사용하여 그것을하는 방법.

221
00:10:58,700 --> 00:11:01,380
그냥 지금 살펴 보자
다른 몇 가지 방법에

222
00:11:01,380 --> 00:11:04,520
내가 실제로 수 있음
이 문서 개체를 사용하여

223
00:11:04,520 --> 00:11:06,807
모델 내 사이트의 조각을 조작 할 수 있습니다.

224
00:11:06,807 --> 00:11:09,140
특히, 우리는거야
조작 작업을 할

225
00:11:09,140 --> 00:11:14,090
특정의 색
웹 페이지에 사업부, colorDiv.

226
00:11:14,090 --> 00:11:15,299
그럼 그 살펴 보자.

227
00:11:15,299 --> 00:11:15,798
괜찮아.

228
00:11:15,798 --> 00:11:16,700
그래서 페이지입니다.

229
00:11:16,700 --> 00:11:20,750
당신이 다운로드 할 때 그것은 test.html를 불렀다
이것은 당신이 어설프게하려는 경우.

230
00:11:20,750 --> 00:11:24,730
그리고 나는 잔뜩있어
이 페이지의 버튼.

231
00:11:24,730 --> 00:11:27,730
그리고 각각의 기능을 말하는거야
배경 색, 녹색, 보라색 들면

232
00:11:27,730 --> 00:11:31,330
오렌지, 레드, 블루, 하나의 기능
배경 색상, 이벤트 핸들러

233
00:11:31,330 --> 00:11:34,360
배경색 및 jQuery를 사용 대.

234
00:11:34,360 --> 00:11:38,147
나는 무엇을 이야기하고
때 나는이 일을 해요?

235
00:11:38,147 --> 00:11:39,230
그래서 우리는 버튼을 봤어요.

236
00:11:39,230 --> 00:11:41,521
자, 살펴 보자
여기에 소스 코드의 일부.

237
00:11:41,521 --> 00:11:44,770
우리는 test.html를 시작합니다.

238
00:11:44,770 --> 00:11:48,100
배경 그래서 각각의 기능
색상은 내가 여기에 입력 한 것입니다.

239
00:11:48,100 --> 00:11:49,350
나를 조금 스크롤 보자.

240
00:11:49,350 --> 00:11:56,170

241
00:11:56,170 --> 00:11:58,820
>> 그리고 당신은 내가를 알 수 있습니다
이 버튼을 정의한

242
00:11:58,820 --> 00:12:03,990
이 버튼을 클릭하면 대답,
보라색려면 함수를 호출합니다.

243
00:12:03,990 --> 00:12:06,670
이 버튼을 클릭하면, 오히려,
함수가 녹색으로 전화,

244
00:12:06,670 --> 00:12:08,710
빨간색으로, 오렌지를 설정, 파란색 전원을 켭니다.

245
00:12:08,710 --> 00:12:11,880
당신은 아마이 있음을 추측 할 수
최고의 디자인은 아마 아니다

246
00:12:11,880 --> 00:12:12,460
감각, 오른쪽?

247
00:12:12,460 --> 00:12:16,490
>> 내가 할 수 있다면 좋을 것입니다
보다 일반적인 접근 방식을 가지고있다.

248
00:12:16,490 --> 00:12:19,570
음, 우리는 먼저 살펴 보겠습니다
그 5 가지 기능이 무엇인지에

249
00:12:19,570 --> 00:12:24,400
중요 document.getElementById
보라색 ​​colorDiv.style.background =

250
00:12:24,400 --> 00:12:27,250
빨강, 녹색, 오렌지
각각 파란색.

251
00:12:27,250 --> 00:12:30,930
그래서,하지 특히​​ 최고의 디자인.

252
00:12:30,930 --> 00:12:33,390
>> 버튼의 다음 세트
나는 내가 작성한되고있다

253
00:12:33,390 --> 00:12:36,380
라는 하나의 함수
그 분명히 색상을 변경

254
00:12:36,380 --> 00:12:38,960
인수로 문자열을 받아들입니다.

255
00:12:38,960 --> 00:12:40,290
그래서이 조금 더 낫다.

256
00:12:40,290 --> 00:12:43,840
빨간색, 보라색, 녹색, 오렌지,,
푸른 이제 인수입니다.

257
00:12:43,840 --> 00:12:46,230
그래서 더 일반적인를 작성했습니다
경우 자바 스크립트 기능,

258
00:12:46,230 --> 00:12:47,771
이는 다음과 같을 수 있습니다.

259
00:12:47,771 --> 00:12:48,680
내가 전달하고있다.

260
00:12:48,680 --> 00:12:52,090
이 기능은 색상을 변경입니다
컬러라는 인수를 기대.

261
00:12:52,090 --> 00:12:54,970
그리고 설정 말하는거야
색상 배경​​ 색상.

262
00:12:54,970 --> 00:12:58,390
그래서 여기에 내가 여기있어 무엇을 나타냅니다.

263
00:12:58,390 --> 00:12:59,770
그래서 조금 더 낫다.

264
00:12:59,770 --> 00:13:02,740
>> 그러나 나는 할 수 있습니다
보다 더 잘 할.

265
00:13:02,740 --> 00:13:06,140
우리가 살펴 봐야 아래로 이동하는 경우
이벤트 핸들러 상황에서,

266
00:13:06,140 --> 00:13:07,860
이제 모든 호출은 같은 모양.

267
00:13:07,860 --> 00:13:10,340
당신에 대한 기억이 있다면 우리의
이벤트 핸들러에 대한 논의,

268
00:13:10,340 --> 00:13:15,770
나는의에 대한 정보를 얻을 수 있습니다
이 버튼을 클릭하고를 사용했다.

269
00:13:15,770 --> 00:13:19,560
>> 그래서 event.JavaScript에, 나는했습니다
작성된 색상 변경 이벤트, 어떤

270
00:13:19,560 --> 00:13:21,110
클릭 된 버튼을 파악한다.

271
00:13:21,110 --> 00:13:23,250
즉, 트리거 선의 오브젝트.

272
00:13:23,250 --> 00:13:25,240
그리고 여기, 정말 말의 가져옵니다.

273
00:13:25,240 --> 00:13:27,420
하지만 내가 뭘하는 난입니다
배경 설정

274
00:13:27,420 --> 00:13:30,340
triggerObject inner.HTML에 색상.

275
00:13:30,340 --> 00:13:34,170
즉, 텍스트의
버튼 태그 사이.

276
00:13:34,170 --> 00:13:36,500
>> 그리고 나는 분명히해야
소문자를 설정합니다.

277
00:13:36,500 --> 00:13:40,780
그리고 그것이 내가 전체를 변환 할 수있는 방법
문자열을 사용하여 자바 스크립트에서 소문자로

278
00:13:40,780 --> 00:13:42,940
그 방법은 소문자로.

279
00:13:42,940 --> 00:13:46,570
나는 색상을 설정할 때 때문에,
내가 여기서 할 노력하고있어로,

280
00:13:46,570 --> 00:13:48,260
색상은 모두 소문자이어야한다.

281
00:13:48,260 --> 00:13:50,920
>> 하지만 내가 가진 버튼,
우리는 또 다른 모습을 가지고가는 경우에,

282
00:13:50,920 --> 00:13:55,890
텍스트가 있다는 것을 알
보라색에 대한 자본 P로 작성.

283
00:13:55,890 --> 00:13:59,140
그 다음에 아주
여기에 바닥 나는 분명히

284
00:13:59,140 --> 00:14:02,630
시도뿐만 아니라이 사용 jQuery를 수행.

285
00:14:02,630 --> 00:14:06,000
이 경우, 사실이 아니에요
모든 함수를 호출.

286
00:14:06,000 --> 00:14:11,430
난 그냥 클래스를 해요, 상기 한
이 버튼에 사용하는 것은 JQ 버튼입니다.

287
00:14:11,430 --> 00:14:12,360
이게 다예요.

288
00:14:12,360 --> 00:14:14,950
>> 어떻게 jQuery를 내가 뭘하는지 알고 있나요?

289
00:14:14,950 --> 00:14:18,740
그런데, 이것은 장점 중 하나이다
jQuery를의 단점을 슬래시.

290
00:14:18,740 --> 00:14:21,560
그것은 나를 일을하도록 허용 할 수 있습니다
매우 간결하지만, 아마

291
00:14:21,560 --> 00:14:22,570
같은 직관적으로.

292
00:14:22,570 --> 00:14:25,570
아마도 그 다른 세 만들
조금 더 내가 뭘하는지 감지.

293
00:14:25,570 --> 00:14:29,010
여기에,하지만, 무슨 일이야?

294
00:14:29,010 --> 00:14:31,940
>> 분명히, 작성
익명 함수

295
00:14:31,940 --> 00:14:36,790
그로드 할 때마다 내 문서
그래서 document.ready, 준비

296
00:14:36,790 --> 00:14:38,760
일부 기능이 일어날 것입니다.

297
00:14:38,760 --> 00:14:40,490
기본적으로 때 문서가 준비?

298
00:14:40,490 --> 00:14:42,310
내 페이지가로드 할 때이다.

299
00:14:42,310 --> 00:14:46,540
>> 그래서 빨리 내 페이지가로드로,
기능에 따라 항상 준비가되어 있습니다.

300
00:14:46,540 --> 00:14:54,310
그것은 말한다 경우 유형 jQButton의 대상,
또는 클래스 jQButton이 클릭되었을 경우,

301
00:14:54,310 --> 00:14:55,570
이 기능을 실행합니다.

302
00:14:55,570 --> 00:14:59,360
그래서 여기에 익명의 기능이다,
다른 하나의 내부에 정의.

303
00:14:59,360 --> 00:15:03,930
>> 내 전체 문맥 그래서
여기에 지금까지 내 페이지입니다

304
00:15:03,930 --> 00:15:06,520
이로드 할 때이 함수를 호출합니다.

305
00:15:06,520 --> 00:15:09,740
그리고이 기능을 기다리고 있습니다
단추를 클릭합니다.

306
00:15:09,740 --> 00:15:14,490
그리고 버튼을 클릭, JQ
구체적 버튼 클릭,

307
00:15:14,490 --> 00:15:17,150
그것은이 다른 호출
기능을 것입니다

308
00:15:17,150 --> 00:15:21,250
배경을 설정합니다
colorDiv의 색이 될

309
00:15:21,250 --> 00:15:25,990
어떤 텍스트는 태그 사이에 있습니다.

310
00:15:25,990 --> 00:15:28,050
>> 이것은의 개념이다
어떤 버튼은 클릭했다.

311
00:15:28,050 --> 00:15:31,230
그러나 그렇지 않으면,이 일종의입니다
이벤트와 유사한 행동.

312
00:15:31,230 --> 00:15:34,460
그냥 같은 방식의 I
jQuery를이를 표현하는 것입니다.

313
00:15:34,460 --> 00:15:36,790
다시 말하지만, 그것은 아마
더 많은 협박.

314
00:15:36,790 --> 00:15:40,840
그것은만큼 분명하지 않다
event.js 같은,

315
00:15:40,840 --> 00:15:45,080
이는 어쩌면 조금 더
자세한하지만 조금 덜

316
00:15:45,080 --> 00:15:46,000
협박.

317
00:15:46,000 --> 00:15:51,460
>> 그러나 우리는 브라우저를 통해 다시 팝업 경우
창, 내가 잘 clicking-- 시작하면,

318
00:15:51,460 --> 00:15:52,690
그 보라색으로 변경되었습니다.

319
00:15:52,690 --> 00:15:54,450
이것은 스트링 방법을 사용하여 녹색이다.

320
00:15:54,450 --> 00:15:56,500
이는 이벤트 핸들러를 이용하여 오렌지색이다.

321
00:15:56,500 --> 00:15:58,300
>> 이것은 바로, jQuery를 사용하여 빨간색?

322
00:15:58,300 --> 00:16:01,270
그들은 모두 정확히 같은 동작합니다.

323
00:16:01,270 --> 00:16:06,509
그들은 단지 그것을 다른 사용 할
문제를 해결하기 위해 접근한다.

324
00:16:06,509 --> 00:16:08,550
에 더 많은있다
jQuery를 다음 우리는 확실히있어

325
00:16:08,550 --> 00:16:10,050
이 비디오에 대해 이야기 할 것입니다.

326
00:16:10,050 --> 00:16:15,410
당신이 더 많은 것을 배우고 싶은 경우에, 당신은 할 수
문서의 jQuery를 정렬로 이동

327
00:16:15,410 --> 00:16:19,710
약 꽤 자세한 내용을 보려면
이 매우 유연 라이브러리, 어떤

328
00:16:19,710 --> 00:16:22,550
클라이언트 쪽 일을 위해 중대하다
이러한 우리가 무엇을하고 있는지와 같은 스크립팅

329
00:16:22,550 --> 00:16:26,240
모양을 조작하는
우리의 웹 페이지의 느낌

330
00:16:26,240 --> 00:16:28,750
문서 객체 모델.

331
00:16:28,750 --> 00:16:29,650
나는 더그 로이드입니다.

332
00:16:29,650 --> 00:16:31,930
이 CS50입니다.

333
00:16:31,930 --> 00:16:34,022