1
00:00:00,270 --> 00:00:05,870
몇 가지 비디오 전에 요소를 선택하고 조작하는 개념을 도입했습니다.

2
00:00:06,120 --> 00:00:14,660
그래서 우리는 H1 또는 모든 이미지 태그를 선택한 다음 색상을 변경하거나 애니메이션을 적용하거나 클릭 할 때 무언가를 할 수 있습니다.

3
00:00:14,670 --> 00:00:18,360
지금까지 우리는 절반과이 비디오를 선택하는 것을 다루었습니다.

4
00:00:18,360 --> 00:00:24,090
일단 요소를 선택하면 요소를 조작하는 여러 가지 방법 중 몇 가지를 소개 할 것입니다.

5
00:00:24,120 --> 00:00:26,760
여기 제가 이야기하고 싶은 네 가지 주요한 것들이 있습니다.

6
00:00:26,970 --> 00:00:29,320
첫 번째는 요소 스타일을 어떻게 바꿀 것인가입니다.

7
00:00:29,340 --> 00:00:32,050
우리는 그것을 어떻게 파란색으로 만들거나 숨길 수 있습니까?

8
00:00:32,070 --> 00:00:34,070
글꼴 크기를 변경하십시오.

9
00:00:34,080 --> 00:00:40,920
다음은 자바 스크립트로 클래스를 추가하고 제거한 다음 태그의 내용을 변경하는 방법에 대해 설명하겠습니다.

10
00:00:41,010 --> 00:00:44,490
그렇다면 예를 들어 H-1 태그 내부의 텍스트를 어떻게 변경합니까?

11
00:00:44,490 --> 00:00:46,590
그리고 마지막으로 속성을 변경합니다.

12
00:00:46,590 --> 00:00:52,040
그렇다면 이미지 태그의 소스 또는 AA 태그의 참조를 어떻게 변경합니까?

13
00:00:52,230 --> 00:00:55,260
스타일 속성에 대해 이야기하면서 시작하겠습니다.

14
00:00:55,260 --> 00:01:11,220
따라서 DOM이 생성되고 개별 노드가 만들어 지거나 모든 단일 요소에 대해 객체가 만들어지면 style이라는 속성이 있고 style 속성은 설정할 수있는 모든 단일 CSSA 속성에 대해 수백 개의 속성을 가진 거대한 객체입니다.

15
00:01:11,370 --> 00:01:15,460
그래서 우리는 스타일과 요소가 다르게 갈 자바 스크립트를 작성할 수 있습니다.

16
00:01:15,480 --> 00:01:24,730
그래서 여기에서 Id 강조 표시로 요소를 선택하므로 태그라는 변수에 저장 한 다음 조작합니다.

17
00:01:24,750 --> 00:01:26,370
그리고 내가하고있는 일은 내가 정하고있다.

18
00:01:26,370 --> 00:01:34,190
도트 스타일 도트 색상을 파란색 태그 도트 스타일 점 테두리로 태그 지정하면 10 픽셀이 빨간색으로 고정됩니다.

19
00:01:34,200 --> 00:01:37,830
오른쪽이 문자열이어야한다는 점에 유의해야합니다.

20
00:01:38,280 --> 00:01:43,430
따라서 C S에서 우리는 파란색 또는 약 70 P x 주위에 따옴표를 넣을 필요가 없습니다.

21
00:01:43,440 --> 00:01:44,730
이것은 C Ss가 아닙니다.

22
00:01:44,730 --> 00:01:45,720
이것은 자바 스크립트입니다.

23
00:01:45,720 --> 00:01:48,820
그래서 우리는 여전히 규칙적인 자바 스크립트 규칙을 따라야합니다.

24
00:01:49,080 --> 00:01:53,550
그래서 간단한 웹 페이지 설정을 통해 이러한 속성 중 일부를 보여줍니다.

25
00:01:54,240 --> 00:02:00,190
따라서이 웹 페이지는 그 단락 대신 하나의 단락을 가진 H-1 단 하나의 슈퍼 단편입니다.

26
00:02:00,200 --> 00:02:05,310
강력한 태그가 있고 두 개의 사랑스러운 코기 믹스 이미지가 두 개 있습니다.

27
00:02:05,640 --> 00:02:13,770
그래서 제가 할 일은 영사관에 ​​가서 뭔가를 선택하는 것부터 시작해야합니다. 그리고 저는이 H-1의 색과 경계를 바꿀 것입니다.

28
00:02:13,770 --> 00:02:22,800
그래서 나는 그것을 선택해야하고 새로운 선택기에서 쿼리 선택기 H-1을 사용하는 방법은 여러 가지가 있습니다.

29
00:02:25,320 --> 00:02:33,030
그리고 저는 여러분에게 거대한 객체 톤과 수많은 속성 인 H-1 스타일을 보여 드리겠습니다.

30
00:02:33,600 --> 00:02:41,680
그래서 H-1 스타일의 짙은 색과 같이 그 중 하나를 변경하여 노란색으로 만들려고합니다.

31
00:02:42,520 --> 00:02:45,560
그리고 당신은 그것이 즉시 노란색으로 바뀌는 것을 볼 수 있습니다.

32
00:02:45,570 --> 00:02:54,300
테두리가 같은 스타일 인 테두리 H-1의 경우와 동일한 것은 5 개의 픽셀을 단색으로 처리해 보겠습니다.

33
00:02:56,100 --> 00:02:56,950
그리고 거기에 우리가 간다.

34
00:02:57,210 --> 00:03:01,190
물론 핑크색 테두리가 노란색으로 표시되기를 원하면 물론입니다.

35
00:03:01,290 --> 00:03:04,910
페이지가로드 될 때부터 자바 스크립트를 사용하는 이유가 없습니다.

36
00:03:04,920 --> 00:03:18,670
CSSA 파일에 넣으면 자바 스크립트를 사용하여 노란색으로 바뀌고 사용자가 5 초 동안 페이지에있을 때 분홍색 테두리가 생기거나 사용자가 특정 부분으로 스크롤했을 때 발생하기를 원하는 경우 자바 스크립트를 사용합니다. 페이지 또는 사용자가 뭔가를 클릭합니다.

37
00:03:18,690 --> 00:03:23,450
모든 것을 대화 형으로 만드는 것에 관한 것입니다. 곧이를 수행하는 방법을 살펴 보겠습니다.

38
00:03:24,960 --> 00:03:38,150
스타일 속성을 사용하는 것에 대한 좋은 점은, 내가 여기에서하는 것처럼 개별 요소에서 여러 파일을 조작하는 경우이 태그에서 다섯 가지 속성을 변경하는 것이 확실히 좋은 방법이라는 것입니다.

39
00:03:38,460 --> 00:03:40,740
그리고 더 좋은 방법이 있다는 몇 가지 이유가 있습니다.

40
00:03:40,740 --> 00:03:43,350
첫 번째는 매우 건성 코드가 아니라는 것입니다.

41
00:03:43,350 --> 00:03:46,740
태그가 지정된 스타일의 태그가 반복적으로 많이 나옵니다.

42
00:03:46,740 --> 00:03:50,670
더 중요한 것은 우려의 분리라는이 개념이 있지만.

43
00:03:50,820 --> 00:03:57,210
따라서 관심사의 분리는 우리의 H M L R C S가 자바 스크립트가 아니라는 개념입니다.

44
00:03:57,210 --> 00:04:00,840
각자 자신의 작은 영역에 대한 책임이 있으며 우리는 그것을 원하지 않습니다.

45
00:04:00,840 --> 00:04:02,830
우리는 그들 사이에 많은 크로스 오버를 원하지 않습니다.

46
00:04:02,850 --> 00:04:12,930
그래서이 다이어그램에서 구조와 자바 스크립트 사이에 약간의 크로스 오버가 있다는 것을 알 수 있습니다. 자바 스크립트는 그 행동이며 평가는 프리젠 테이션입니다.

47
00:04:12,930 --> 00:04:25,840
Html 자바 스크립트와 약간의 겹침이 있지만 C Ss가 오기 전에 실제로는 스타일 속성을 사용하는 모든 요소에 개별적으로 스타일을 작성해야한다는 것을 기억하십시오.

48
00:04:26,130 --> 00:04:33,500
이 경우 우리의 프리젠 테이션 스타일은 실제로 구조로 짜여졌 고 C S와 함께 이제는 그들을 구분했습니다.

49
00:04:33,570 --> 00:04:38,710
따라서 우리의 HMO는 순수한 구조이며, 우리의 성공은 순수한 스타일입니다.

50
00:04:38,880 --> 00:04:52,620
그래서 JavaScript가 맞는 것은 페이지의 동작을 제어해야한다는 것입니다. 때로는 상황이 어떻게 보이는지를 변경하는 것이 아니라 자바 스크립트에서 실제로 스타일을 변경하는 것보다는 자바 스크립트의 속성을 변경하는 것입니다.

51
00:04:52,680 --> 00:04:57,530
우리가 할 수있는 일은 CSSA 파일 내부에서 그들을 켜고 끄는 것입니다.

52
00:04:57,570 --> 00:05:08,380
그래서 실제로 사용되는 패턴 중 하나는 하이라이트와 같은 CSSA 클래스를 정의하고 하이라이트 클래스가 5,6 개 또는 다양한 속성을 가지게된다는 것입니다.

53
00:05:08,380 --> 00:05:13,210
그리고 나서 자바 스크립트로 요소를 선택하고 강조 클래스를 제공 할 수 있습니다.

54
00:05:13,210 --> 00:05:18,930
따라서 자바 스크립트에서 한 줄을 사용하여 다섯 가지 속성을 변경하는 클래스를 추가 할 수 있습니다.

55
00:05:19,150 --> 00:05:22,660
Javascript에서 이것이 어떻게 구현되는지 살펴 보겠습니다.

56
00:05:22,690 --> 00:05:36,200
따라서 태그를 선택하고 스타일을 변경하는 대신 색상을 파란색으로 설정 한 다음 테두리를 스타일링하여 10 픽셀로 채우십시오. 대신 할 수있는 것은 해당 클래스의 클래스를 찾을 수 있다는 것입니다.

57
00:05:36,250 --> 00:05:41,940
일반적으로 클래스가하는 일을 반영하여 다소 의미가 있기를 원합니다.

58
00:05:42,040 --> 00:05:45,040
그것은 강조되고있는 것이거나 정답입니다.

59
00:05:45,040 --> 00:05:49,840
시도하는 수업을 적용하는 이유가 무엇이든간에 높은 점수를 얻으려면 좋은 이름이 필요합니다.

60
00:05:50,170 --> 00:05:57,820
그래서 이것은 좋은 이름은 아니지만 일부 클래스는 파란색으로 테두리를 변경하고 일부 10 픽셀은 빨간색으로 채색을 변경합니다.

61
00:05:57,820 --> 00:06:13,790
그럼 내가 할 일은 내 태그를 선택한 다음 점 클래스 목록에 점을 추가하는 것입니다. 일부 클래스를 추가하면 내 태그에 강조 표시 아이디어가 주어집니다.이 모든 스타일에서 일부 클래스라는 새 클래스가 적용됩니다.

62
00:06:13,810 --> 00:06:16,030
우리가 수업 목록으로 할 수있는 몇 가지 다른 것들이 있습니다.

63
00:06:16,270 --> 00:06:30,760
그래서이 예제에서는 클래스 이름을 취하는 class remove를 추가하는 방법과 클래스 목록에서 해당 클래스 이름을 제거한 다음 매우 유용한 클래스 목록 토글을 제거하는 세 가지 방법을 보여줍니다.

64
00:06:30,760 --> 00:06:31,960
클래스 이름이 필요합니다.

65
00:06:32,080 --> 00:06:39,270
그리고 주어진 원소가 이미 그 클래스를 가지고 있다면, 그 원소가 그 클래스를 가지고 있지 않다면 그것을 제거 할 것이고, 그 원소를 켜기로합니다.

66
00:06:39,280 --> 00:06:40,550
매우 유용합니다.

67
00:06:40,630 --> 00:06:42,180
우리는 나중에 그것을 항상 사용할 것입니다.

68
00:06:42,400 --> 00:06:46,990
제가 여기서 예증으로 돌아 가기 전에 여러분에게 보여 드리겠습니다.

69
00:06:46,990 --> 00:06:49,300
나는 실제로 새로운 클래스를 정의하려고합니다.

70
00:06:49,690 --> 00:07:00,390
따라서 새로운 스타일 시트를 만들고 링크를 사용하는 것보다는 시간 만 위해 스타일 태그를 사용하려고합니다.

71
00:07:00,530 --> 00:07:04,140
그래서 저는 이것을 방금 큰 클래스라고 정의 할 것입니다.

72
00:07:04,990 --> 00:07:14,670
그리고 글꼴 크기를 100 픽셀로 변경하고 색상을 주황색으로 변경합니다.

73
00:07:15,010 --> 00:07:22,540
그리고 마지막으로 5 픽셀의 단색을 채우십시오.

74
00:07:22,960 --> 00:07:24,280
그래서 나는 그것에 맡길 것이다.

75
00:07:24,370 --> 00:07:30,900
내 페이지를 새로 고침해도 과정이 바뀌지 않지만 내가 원할 때 그 수업을 무언가에 적용하는 것입니다.

76
00:07:30,950 --> 00:07:37,120
그래서 지금까지이 단락을 선택해야하는 큰 수업을이 단락에 만들 것입니다.

77
00:07:37,120 --> 00:07:44,900
단락은 쿼리 선택기 단락과 동일한 문서입니다.

78
00:07:47,180 --> 00:07:47,820
승인.

79
00:07:48,010 --> 00:07:53,130
클래스 목록을 살펴 보겠습니다. 그러면 빈 목록임을 알 수 있습니다.

80
00:07:53,140 --> 00:07:55,970
이 단락에는 아직 할당 된 수업이 없습니다.

81
00:07:56,140 --> 00:08:05,310
따라서 P-Dub 클래스 목록에 점 추가를 추가하고 클래스를 크게 추가하려고 할 때 필요한 모든 것을 할당하려고합니다.

82
00:08:06,190 --> 00:08:07,240
그리고 거기에 우리가 간다.

83
00:08:07,720 --> 00:08:11,370
따라서 내 스타일 시트의 새로운 변경 사항을 자동으로 반영합니다.

84
00:08:11,440 --> 00:08:13,540
내가해야 할 일은 큰 수업을 추가하는 것뿐입니다.

85
00:08:13,780 --> 00:08:18,880
이렇게하면이 작업이 훨씬 쉬워지고 책임을 분리한다는 것을 알 수 있기를 바랍니다.

86
00:08:18,880 --> 00:08:27,610
그래서 javascript는 실제로 개별 속성을 직접 수동으로 조작하지 않고 SS의 특정 부분을 켜거나 끕니다.

87
00:08:27,610 --> 00:08:32,120
이제 Javascript 대신 가능한 한 사물을 조금만 바꾸고 있습니다.

88
00:08:32,470 --> 00:08:45,940
그래서 내가 그것을 제거하기를 원한다면 클래스가없는 클래스는 클래스를 제거하지 말고 커다란 것을 제거하지 말고 내가 가장 좋아하는 것은 토글이다.

89
00:08:45,940 --> 00:08:52,940
그래서 토글을 치고 Enter를 누르면 등급이 지정되지 않으므로 클래스를 크게 지정합니다.

90
00:08:53,320 --> 00:08:56,420
이제 big이 이미 할당되어 있으므로 제거됩니다.

91
00:08:56,440 --> 00:09:09,610
따라서이 경우 엄청난 글꼴 클래스에서이 미친 오렌지를 만드는 것은 분명히 유용하지 않지만 사용자가 클릭 할 수있게하려면 목록을 작성하는 것과 같은 작업을 수행하는 것이 좋습니다.

92
00:09:09,880 --> 00:09:11,440
그리고 그것을 통해 그것을 교차합니다.

93
00:09:11,650 --> 00:09:15,400
그러나 그들은 다시 클릭 할 수 있습니다. 그러면 교차되지 않거나 정상으로 돌아갑니다.

94
00:09:15,430 --> 00:09:16,400
그렇게 될 것입니다.

95
00:09:16,410 --> 00:09:23,700
또는 클래스를 토글하여 클래스를 수행 할 수 있으므로 완료된 클래스를 다시 클릭 할 수 있습니다.

96
00:09:23,800 --> 00:09:24,820
제거되었습니다.

97
00:09:24,820 --> 00:09:27,000
그것은 토글을 사용할 수있는 경우의 한 예입니다.

98
00:09:27,100 --> 00:09:29,740
하지만 정말 유용합니다.

99
00:09:29,740 --> 00:09:34,090
마지막으로 수업 목록을 가져올 때는 기술적으로 배열이 아니라는 것입니다.

100
00:09:34,090 --> 00:09:37,840
즉, 클래스를 추가하려면 광고를 사용해야합니다.

101
00:09:37,870 --> 00:09:39,900
우리는 푸시와 같은 것을 할 수 없습니다.

102
00:09:40,150 --> 00:09:44,000
그래서 사소한 일이지만 기술적으로 배열이 아니라는 것을 아는 것이 중요합니다.

103
00:09:44,470 --> 00:09:48,260
그래서 우리는 자바 스크립트를 통해 스타일을 조작하는 두 가지 다른 방법을 다루었습니다.

104
00:09:48,280 --> 00:09:55,340
첫 번째 것은 한 번에 하나의 속성을 수동으로 처리하는 것입니다. 하나 또는 두 가지 일을하는 경우 정직하게 작동합니다.