1
00:00:00,300 --> 00:00:03,940
이제 우리는 Domm이 왜 흥미로운 지에 대해 왜 신경 써야하는지에 대해 논의했습니다.

2
00:00:03,990 --> 00:00:07,640
그리고 우리는 문서 객체 모델이 무엇을 의미하는지에 대해서도 이야기했습니다.

3
00:00:07,680 --> 00:00:15,130
사실 자바 스크립트 객체를 사용하는 페이지의 모든 요소의 모델 인 최상위 객체를 문서라고합니다.

4
00:00:15,240 --> 00:00:18,340
그래서 훌륭합니다. 그러나 우리는 아직 그걸로 아무 것도하지 않는 방법을 보았습니다.

5
00:00:18,390 --> 00:00:23,460
그래서이 비디오에서는 개를 사용하여 사물을 조작하는 과정을 간략하게 소개 할 것입니다.

6
00:00:23,790 --> 00:00:29,630
그래서 저는 전체 과정을 선택하고 조작하는 두 개의 키워드로 끓여 냈습니다.

7
00:00:29,670 --> 00:00:47,840
그래서 우리가 특수 문자 또는 모든 h 또는 모든 이미지 태그의 클래스를 사용하여 셀렉터를 작성하는 곳을 평가하고 요소를 선택한 다음 배경색 보라색 테두리와 같은 스타일을 자바 스크립트와 Dom 및 채우기와 함께 적용합니다.

8
00:00:47,850 --> 00:00:51,380
매우 다른 방식으로 요소를 선택하지만 요소도 선택합니다.

9
00:00:51,480 --> 00:01:01,260
우리는 자바 스크립트 코드를 작성하여 요소를 선택하고이를 우리에게 반환 한 다음 우리가 속성을 변경하여 무언가를 선택하고 조작합니다.

10
00:01:01,290 --> 00:01:09,750
다음 슬라이드에서는 H-1 헤더를 어떻게 선택할 수 있는지 그리고 어떻게 분홍색으로 바꿀 수 있는지 보여 드리겠습니다.

11
00:01:09,750 --> 00:01:15,290
나는 지난 몇 편의 비디오에서 이것을 많이 말하고 있었지만, 당신은 개념만큼이나 구문에 초점을 맞추기를 원하지 않습니다.

12
00:01:15,330 --> 00:01:18,930
다음 몇 개의 비디오는 선택 및 조작의 핵심입니다.

13
00:01:18,930 --> 00:01:21,150
이것은 어떻게 작동하는지에 대한 개요 일뿐입니다.

14
00:01:21,150 --> 00:01:25,600
이 슬라이드에서는 C와 마찬가지로 H1을 선택하는 방법을 보여 드리겠습니다.

15
00:01:25,620 --> 00:01:28,580
주어진 요소를 선택하는 방법에는 여러 가지가 있습니다.

16
00:01:28,800 --> 00:01:36,920
이 경우에이 코드 문서 도트 쿼리 선택기 H-1은이 페이지에서 H-1을 선택할 것입니다.

17
00:01:37,050 --> 00:01:40,960
여기서는이 녹색 상자를 강조 표시하여 선택 대상을 볼 수 있습니다.

18
00:01:41,340 --> 00:01:48,640
다시 var H-1 이것은 쿼리 선택기 8 : 1을 문서화하는 모든 변수와 동일합니다.

19
00:01:48,690 --> 00:01:52,420
따라서 우리는 쿼리 선택기에 더 많은 시간을 할애하여 정의 된 내용과 작동 방식을 정의합니다.

20
00:01:52,470 --> 00:01:59,920
그러나이 H1을 나타내는 객체를 반환하고이를 H-1 변수에 저장합니다.

21
00:01:59,970 --> 00:02:02,190
이것이 바로 선정 과정입니다.

22
00:02:02,190 --> 00:02:11,170
다음 부분은 그것을 조작하기 위해 그것을 조작하고 있습니다. 나는 모든 것을 할 수 있습니다. 여기에서 할 일은 모두 분홍색으로 변하는 것입니다.

23
00:02:11,490 --> 00:02:18,470
그래서 우리는 H-1 점 스타일을 나타내는 객체를 가진 변수 인 H-1을 작성합니다.

24
00:02:18,510 --> 00:02:25,580
그것은 하나의 속성이고 그 스타일 속성은 다른 속성이 많은 거대한 개체이며 색상이 그 중 하나입니다.

25
00:02:25,920 --> 00:02:28,920
그래서 H-1은 스타일을하지만 컬러는 핑크색과 같습니다.

26
00:02:28,920 --> 00:02:30,240
그리고 그게 우리가해야 할 전부입니다.

27
00:02:30,270 --> 00:02:37,500
그리고 브라우저에서 해당 속성을 분홍색으로 변경하고 분홍색으로 바꾸면 표시되는 내용을 자동으로 업데이트합니다.

28
00:02:37,500 --> 00:02:41,140
그래서 우리는 여기에서 선택한 다음 조작했습니다.

29
00:02:42,120 --> 00:02:43,560
그래서 여기에 또 하나의 예가 있습니다.

30
00:02:43,610 --> 00:02:45,230
조금 더 복잡합니다.

31
00:02:45,240 --> 00:02:52,940
매 초마다 파란색과 흰색 사이의 배경색을 바꾸는 아주 간단한 애니메이션을 만들고 있습니다.

32
00:02:52,950 --> 00:02:58,620
그래서 우리가 먼저해야 할 일은 몸을 선택하고 그것을 조작하기 위해서입니다.

33
00:02:58,740 --> 00:03:06,720
나는 문서 덤프 쿼리 셀렉터를 사용하는 또 다른 라인을 가지고 있는데, 우리는 다음 비디오 문서에서 쿼리 셀렉터 본문으로 돌아갈 것입니다.

34
00:03:06,780 --> 00:03:15,450
그래서 나에게 body 요소를주었습니다. body 요소는 body 변수에 저장 한 객체 모델을 실제로 제공합니다.

35
00:03:15,450 --> 00:03:23,940
그런 다음이 변수를 파란색으로 만듭니다. 파란색에서 흰색 또는 흰색으로 이동할지 여부를 알아야하기 때문에 사용할 부울입니다.

36
00:03:24,030 --> 00:03:28,870
그래서 그것은 거짓으로 시작한 다음 몇 년 전에 우리가 다루었던 간격을 사용하고 있습니다.

37
00:03:28,920 --> 00:03:32,230
그것이 어떻게 작동 하는지를 기억하지 못한다면 기본적으로 두 가지 주장이 필요합니다.

38
00:03:32,340 --> 00:03:39,030
첫 번째는 함수를 실행하는 코드이고 두 번째는 밀리 초 단위의 숫자 또는 시간입니다.

39
00:03:39,150 --> 00:03:46,230
따라서이 코드는 1000 초 또는 1 초에 1 초마다 발생합니다.

40
00:03:46,560 --> 00:03:51,080
그래서이 코드가 무엇을하는지는 배경이 현재 파란색인지 확인하는 것입니다.

41
00:03:51,180 --> 00:03:56,330
그런 다음 배경이 흰색이면 파란색으로 변경합니다.

42
00:03:56,610 --> 00:04:00,030
그래서 더 자세히 살펴보기 위해 if는 파란색입니다.

43
00:04:00,120 --> 00:04:01,640
그래서 그것은 단지 변수입니다.

44
00:04:01,650 --> 00:04:02,900
그것은 거짓으로 시작합니다.

45
00:04:02,910 --> 00:04:07,890
따라서 페이지가 처음으로로드되는 배경은 흰색이고 파란색은 false입니다.

46
00:04:07,920 --> 00:04:16,570
따라서이 줄은 실행되지 않지만 본문에서는 스타일이 어두운 배경이 파란색 인이 16 진수 색상과 같습니다.

47
00:04:16,770 --> 00:04:18,840
이렇게하면 배경이 파란색으로 바뀝니다.

48
00:04:19,140 --> 00:04:22,960
그래서 우리는 단지 blue 변수를 false에서 true로 변경합니다.

49
00:04:23,130 --> 00:04:27,690
그리고 느낌표 또는 not 연산자를 사용하여 좋은 정렬 방법입니다.

50
00:04:27,780 --> 00:04:32,550
그러면이 코드는 다음 번에 파란색으로 실행됩니다.

51
00:04:32,850 --> 00:04:36,870
그래서이 코드는 몸체는 스타일을 실행하지만 배경은 흰색과 같습니다.

52
00:04:36,870 --> 00:04:38,550
이제 우리는 흰색으로 돌아갈 것입니다.

53
00:04:38,670 --> 00:04:42,980
이것은 실행되지 않습니다 그리고 우리는 다시 거짓으로 파란색으로 변경됩니다.

54
00:04:43,290 --> 00:04:44,980
그리고 그것은 영원히 계속됩니다.

55
00:04:45,090 --> 00:04:49,950
그러니 매 초마다 바뀌는 배경색만큼 산만 해지기를 원하지 않을 것입니다.

56
00:04:50,190 --> 00:04:57,450
그러나 이것은 우리가 H1을 검은 색에서 분홍색으로 바꾸는 것보다 더 복잡한 일을 할 수 있음을 보여줍니다.

57
00:04:57,450 --> 00:05:06,260
그래서 이것을 모두 두 단어로 감싸기 위해 우리가 선택하는 조작을 선택하십시오. 우리는 요소를 나타내는 어떤 객체를 움켜 쥐고 우리는 그들에게 뭔가를합니다.

58
00:05:06,750 --> 00:05:12,370
따라서이 단원의 나머지 부분은 다양한 선택 방법과 조작 방법에 중점을 둡니다.

59
00:05:12,390 --> 00:05:17,190
따라서 다음 비디오는 자바 스크립트를 사용하여 요소를 선택하는 다양한 방법에 대해 자세히 살펴볼 예정입니다.

60
00:05:17,190 --> 00:05:19,470
우리는 이미 하나의 큐리 선택기를 보았습니다.