1
00:00:00,420 --> 00:00:01,690
이미 다시 오신 것을 환영합니다.

2
00:00:01,980 --> 00:00:03,600
그래서 나는 아주 좋은 소식을 가지고있다.

3
00:00:03,600 --> 00:00:08,130
마침내 우리는 자바 스크립트를 가져와 H.M.S.와 결합해야 할 때입니다. 평가.

4
00:00:08,250 --> 00:00:10,160
이것은 내가 제일 좋아하는 유닛이다.

5
00:00:10,170 --> 00:00:13,800
내 인생 가르침을 보냈던 모든 것을 가르치는 가장 좋아하는 주제.

6
00:00:13,860 --> 00:00:16,180
자바 스크립트가 실제로 수익을 내기 시작한 곳입니다.

7
00:00:16,200 --> 00:00:18,480
그래서 우리는이 시점까지 몇 가지 간단한 앱을 사용해 왔습니다.

8
00:00:18,540 --> 00:00:27,310
알리미와 프롬프트를 사용하여 목록을 작성하는 것이 쉽지만 매우 흥미롭지는 않지만 이제는 자바 스크립트의 힘을 최대한 발휘하기 때문에 모든 것이 바뀔 것입니다.

9
00:00:27,510 --> 00:00:48,830
그리고 나서 우리는 대화 형 게임을 만들려고하는이 유닛은 진짜 버튼과 체크 박스, 자바 스크립트, 애니메이션 및 모든 흥미로운 흥미 진진한 것들로 실제 형태로 목록을 만들 것입니다. 작은 명령 줄이나 작은 자바 스크립트 콘솔 앱이 아니라 뭔가를 공유 할 수있는 뭔가를 만든 것처럼 느껴집니다.

10
00:00:48,840 --> 00:00:55,410
그래서 우리가하는 모든 일은 DOM이라는 기술을 통해서입니다.

11
00:00:55,530 --> 00:01:01,090
그래서이 수업은 다음 몇 가지 비디오에서 몇 가지 이야기 할 DOM에 대한 소개 역할을 할 것입니다.

12
00:01:01,140 --> 00:01:05,450
DOM이 무엇인지를 정의함으로써 시작하고 싶습니다.

13
00:01:05,460 --> 00:01:08,300
왜 이것이 흥미로운 지 잘 이해하길 바랍니다.

14
00:01:08,310 --> 00:01:17,000
다른 사람들이 우리가 배우려고하는이 물건을 사용하여 구축 한 멋진 응용 프로그램을 보여줄 것입니다. 그러면 우리는 내가 선택한 것을 선택한 다음 워크 플로우를 조작하는 것에 대해 이야기 할 것입니다.

15
00:01:17,250 --> 00:01:19,230
시작하겠습니다.

16
00:01:19,230 --> 00:01:20,910
그렇다면 왜이 모든 것을 신경 써야합니까?

17
00:01:21,000 --> 00:01:22,550
그럼 여러 가지 이유가 있습니다.

18
00:01:22,680 --> 00:01:40,890
실제로 모든 큰 웹 앱은 Twitter와 Facebook Instagram YouTube Gmail과 같은 것들을 사용합니다. 그들은 모두 자바 스크립트를 사용하며 자바 스크립트의 대부분은 개와 상호 작용하는 개와 SS와 상호 작용합니다. 그래서 우리는 할일과 상호 작용합니다. 게임과 같은 것들.

19
00:01:41,130 --> 00:01:50,780
우리는 Tic tac toe를 만들 수 있습니다. 우리는 플랫폼을 Mario와 같은 게임으로 만들 수 있습니다.이 게임을 사용하여 드롭 다운 메뉴와 같은보다 실질적인 작업을 수행 할 수 있습니다.

20
00:01:50,980 --> 00:01:52,760
웹 페이지를 대화식으로 만드는 방법.

21
00:01:52,770 --> 00:01:54,470
애니메이션을 추가하는 방법.

22
00:01:54,600 --> 00:02:10,040
그리고 마지막으로 여기에있는 내용은 실제로 모든 멋진 사이트를 요약합니다. 비록 지난 몇 년 동안 실제로 돔을 조작하기 위해 많은 자바 스크립트를 사용했지만, 먼저 몇 가지 예를 먼저 보여 드리겠습니다. 정의를 시작하기 전에 이 용어들은 DOM이 어떻게 작동하는지에 대해 이야기합니다.

23
00:02:10,080 --> 00:02:11,870
나는 너에게 몇 웹 사이트를 보여주고 싶다.

24
00:02:12,540 --> 00:02:20,910
그래서 첫 번째는 Google 뿐이며, 내가 얼마나 관심을 기울이는 지 알지 못하지만, Google에서 Halo와 같은 것을 검색하기 시작하면됩니다.

25
00:02:21,000 --> 00:02:34,020
주목할 점은 이것이 모든 티모 (Timo)라는 것입니다. 이것은 어떤 종류의 div이거나 뭔가 들리는 부분입니다. 내가 입력 할 때 헬멧 키티를 입력하면 새로운 결과를 얻습니다.

26
00:02:34,020 --> 00:02:39,080
그게 전부 자바 스크립트로 끝났지 만, 이것은 우리가 몇 가지 비디오 후에 할 수있는 일종의 일입니다.

27
00:02:39,120 --> 00:02:43,770
물론 우리는 Google이 가지고있는 백엔드를 작성할 수는 없지만 여기서는 프론트 엔드 기능을 수행 할 수 있습니다.

28
00:02:43,770 --> 00:02:49,090
HMO의 모든 성공은 당신이 보는 이러한 모든 효과를 쉽게 복제 할 수 있습니다.

29
00:02:49,110 --> 00:03:01,000
그래서 내가 강조하고 싶은 것은 Tomi의 웹 사이트입니다.이 Brough의 코스 단추가 있습니다. 클릭하면 오른쪽에서부터 모든 것을 푸시하는 메뉴가 나오고 모든 카테고리를 선택할 수 있습니다.

30
00:03:01,290 --> 00:03:06,400
카테고리 위로 마우스를 가져 가면이 하위 메뉴가 나타납니다.

31
00:03:06,660 --> 00:03:11,140
그래서 그것들은 모두 자바 스크립트 일이 페이지에 추가되고 있습니다.

32
00:03:11,140 --> 00:03:13,230
이것들은 아마도 목록 항목과 앵커 태그 일 것입니다.

33
00:03:13,350 --> 00:03:19,790
그것들은 숨겨진 페이지에 추가되고 있으며 대화 형 작업을 많이 스크롤하면서 색상이 달라집니다.

34
00:03:19,830 --> 00:03:22,430
그래서 내가 보여주고 싶은 것은 내가 가장 좋아하는 것 중 하나입니다.

35
00:03:22,650 --> 00:03:24,560
패드 공격이라고하는 웹 사이트입니다.

36
00:03:24,780 --> 00:03:26,030
그래서 이것은 조금 다릅니다.

37
00:03:26,100 --> 00:03:33,210
실제로 사용하는 웹 응용 프로그램이 아니지만 H.T로 할 수있는 것의 재미있는 장난감이자 훌륭한 기술 데모입니다. 쥐.

38
00:03:33,250 --> 00:03:37,940
SS 자바 스크립트에서 그래서 나는 당신이 가서 스스로 이것을 시도하는 것이 좋습니다.

39
00:03:38,080 --> 00:03:48,810
Patta tap com을 누르면 내가 누르는 모든 키에 내 키보드에서 타이핑을 시작합니다. 재생되는 사운드와 재생되는 멋진 애니메이션에 해당합니다.

40
00:03:48,900 --> 00:03:51,940
그럼 내가 보여 줄게.

41
00:03:52,080 --> 00:03:54,100
다른 하나가 있습니다.

42
00:03:55,860 --> 00:04:02,230
그래서 어딘가에서 길을 잃을 수 있습니다.

43
00:04:03,510 --> 00:04:06,010
그래서 이것은 우리가 할 수있는 일을 요약합니다.

44
00:04:06,120 --> 00:04:19,710
우리는 특정 키를 누를 때만 코드가 실행되도록 키를 누른 상태에서 대화 형 작업을 수행 한 다음 해당 코드가 사운드로 재생되는 것이 아니라 시각적으로 볼 수있는 내용을 변경합니다.

45
00:04:19,710 --> 00:04:26,280
따라서 단순히 지속적으로 기록하는 것이 아니라 경고를 사용하는 것이 아니라 CSSA에서 실제로 나타난 화면을 변경하는 것입니다.

46
00:04:26,700 --> 00:04:31,790
그래서이 예제들이 우리가 배우려고하는 멋진 것들에 대해 적어도 조금은 흥분하게 만들었을 것입니다.