1
00:00:00,360 --> 00:00:01,380
다시 오신 것을 환영합니다.

2
00:00:01,380 --> 00:00:04,380
그래서이 비디오에서 우리는 프론트 엔드에 집중할 것입니다.

3
00:00:04,620 --> 00:00:12,530
우리는 자바 스크립트에서 평가 된 각 TMLC에 대해 배울 것입니다. 아직까지는 코드를 작성하지 않지만 처음으로 코드를 볼 것입니다.

4
00:00:13,140 --> 00:00:17,900
따라서 프런트 엔드와 백엔드간에 차이점이 무엇인지 알아야 할 두 가지 중요한 사항이 있습니다.

5
00:00:18,040 --> 00:00:24,500
그리고 H.M.S의 차이점은 무엇입니까? SS 및 Javascript와 각각의 역할은 무엇입니까?

6
00:00:25,080 --> 00:00:28,740
먼저 프론트 엔드와 바코드를 논의 해 보겠습니다.

7
00:00:28,860 --> 00:00:35,610
그래서 내가 가면 알게 될 것입니다. 페이스 북에 가세요. 나는 페이스 북에 닷컴을 두드려 입력을했습니다.

8
00:00:35,610 --> 00:00:51,050
그리고 웹의 작동 방식에 관한 동영상을 다시 기억한다면 HTP 요청을 만들어 Facebook.com에 요청합니다. Facebook 서버 나 페이 스북으로 이동 한 다음 어떤 페이지에서 다시 보내 줄지 결정합니다.

9
00:00:51,210 --> 00:01:03,790
그래서 페이스 북의 경우 어떤 이미지가 무엇인지 알아야합니다. 얼마나 많은 사람들이 친구들을 갖고 있는지요. 내가 어떤 포스트를 가지고 있는지는 내 설정의 모든 부분에 있습니다. 프로필 사진은 저에게 관련된 모든 것들입니다.

10
00:01:04,110 --> 00:01:10,870
그리고 그것은 그것을 나에게 다시 보낸다 나를 보낸다 h timala는 javascript에서 말한다 나의 브라우저는 저를 위해 그것을 보여준다.

11
00:01:11,370 --> 00:01:21,650
그래서이 다이어그램은 프론트 엔드와 백엔드의 차이점을 설명합니다. 브라우저에서 볼 수있는 모든 것들이 단지 H.M.S입니다. 예.

12
00:01:21,720 --> 00:01:24,190
자바 스크립트는 빙산의 일각에 불과합니다.

13
00:01:24,270 --> 00:01:28,910
그러나 그것은 나의 브라우저가 프런트 엔드 또는 클라이언트 측이라고 본 것입니다.

14
00:01:29,250 --> 00:01:31,960
그것은 백엔드에 의해 만들어집니다.

15
00:01:32,370 --> 00:01:34,360
모든 것이 모든 논리에서 발생합니다.

16
00:01:34,440 --> 00:01:42,000
내 친구가 어떤 사진인지 파악하고 로그인했는지 알아 내면 내가 얼마나 많은 사람들이 좋아하는지 게시했습니다.

17
00:01:42,000 --> 00:01:45,970
이 모든 것은 백엔드 또는 서버 측 로직에서 비롯됩니다.

18
00:01:46,200 --> 00:01:48,000
그래서 여기에 더 많은 것을 볼 수 있습니다.

19
00:01:48,030 --> 00:01:50,820
기술에는 프론트 엔드에 많은 선택 사항이 있습니다.

20
00:01:50,850 --> 00:02:01,180
그것은 항상 HTML CSS와 자바 스크립트입니다. 백엔드에는 Python ph P Ruby javascript와 같은 다른 언어가 있습니다. 실제로이 언어를 사용합니다.

21
00:02:01,350 --> 00:02:06,570
대학원 및 몽고와 소파 D.B와 Mya의 데이터베이스가 있습니다.

22
00:02:06,570 --> 00:02:09,320
Q Lightener에는 여러 가지 선택 사항이 있습니다.

23
00:02:09,390 --> 00:02:11,010
그래서 약간 위협적입니다.

24
00:02:11,040 --> 00:02:15,060
우리는 백엔드에 관해 더 많은 것을 분명히 말할 것입니다.

25
00:02:15,060 --> 00:02:21,770
그러나 지금은 백 엔드가 녹아서 H가 녹아서 보내지는 C S가 무엇인지 기억하십시오.

26
00:02:21,780 --> 00:02:27,200
그래서 샌프란시스코에있는 내가 가장 좋아하는 레스토랑을 게으른 곰이라고 부르는 것을 예로 들어 보겠습니다.

27
00:02:27,390 --> 00:02:28,890
여기 레스토랑 페이지가 있습니다.

28
00:02:29,100 --> 00:02:31,580
이 페이지는 항상 동일합니다.

29
00:02:31,620 --> 00:02:32,810
나는 그것이 바뀔 수 있음을 의미한다.

30
00:02:32,820 --> 00:02:34,790
그러나 그것이 바뀌기 위해서.

31
00:02:34,920 --> 00:02:38,600
개발자는 H.T. 금액을 수동으로 변경하십시오.

32
00:02:38,610 --> 00:02:46,540
그래서 기본적으로 동일한 홈페이지를 얻을 때마다 페이지를 새로 고침합니다. 동일한 자주 묻는 질문과 동일한 연락처 페이지가 표시됩니다.

33
00:02:46,580 --> 00:02:48,650
나쁜 것은 아니지만 변경할 필요가 없습니다.

34
00:02:48,660 --> 00:02:50,580
그냥 식당 일뿐입니다.

35
00:02:50,610 --> 00:02:55,520
그러나 게으른 곰을위한 옐프 페이지는 동적입니다.

36
00:02:55,530 --> 00:03:05,070
그것은 언제나 새로운 리뷰가 쓰여질 때마다 바뀌어서 매번 여기에 나타날 것이고,이 경우에는 별 5 개를 평가 해 봅시다.

37
00:03:05,070 --> 00:03:06,590
나는 평론을 읽었다.

38
00:03:07,170 --> 00:03:11,840
글쎄, 아마 내 리뷰를 거부 하겠지만 리뷰를 쓴다면 여기에 나타날 것입니다.

39
00:03:11,880 --> 00:03:17,000
상황이 역동적이어서 언제나 일어날 수 있으므로 유용한 리뷰라고 할 수 있습니다.

40
00:03:17,190 --> 00:03:18,700
그것은 재미있는 리뷰였습니다.

41
00:03:19,140 --> 00:03:23,510
그리고 내가 추가 한 투표는 데이터베이스에 저장됩니다.

42
00:03:23,520 --> 00:03:27,060
뭔가가 일어나고 있습니다. 나는 이것과 상호 작용하고 있으며 계속 지속됩니다.

43
00:03:27,060 --> 00:03:32,010
이제 페이지를 새로 고치면 전혀 다른 점이 다릅니다.

44
00:03:32,100 --> 00:03:36,350
그러나 전에는 이것이 재미 있다고 생각하지 않았지만 지금은 기억하고 있습니다.

45
00:03:36,350 --> 00:03:37,740
나는 그것이 재미 있다고 생각했다.

46
00:03:37,740 --> 00:03:45,650
그래서 요점은 제가이 페이지로 갈 때 당신이 Arel Yelp가 항상 똑같은 것을 되돌려 보내지는 않는다는 것을 묻습니다.

47
00:03:45,840 --> 00:03:49,060
로그인 한 사용자가 OK라는 것을 알 수 있습니다.

48
00:03:49,290 --> 00:03:52,600
그렇다면 우리는 그의 프로필 사진을 여기에 올려 놓고 싶습니다.

49
00:03:52,710 --> 00:03:53,980
그는 무엇에 투표 했습니까?

50
00:03:54,000 --> 00:03:54,470
예.

51
00:03:54,510 --> 00:03:57,990
확인을 올바르게 강조했는지 확인합시다.

52
00:03:58,000 --> 00:03:59,260
색상을 변경하십시오.

53
00:03:59,310 --> 00:04:01,530
그에게 다시 투표하도록하지 마라.

54
00:04:01,530 --> 00:04:05,420
그리고 그에게 그 구조는 Javascript라고 말하면서 그것을 되돌려 보냅니다.

55
00:04:05,430 --> 00:04:10,150
확실히 동적 인 페이지의 또 다른 예는 Google 뉴스입니다.

56
00:04:10,620 --> 00:04:17,780
내가 새로 고침 할 때마다, 여기 NFL 점수 이상의 날씨인지 여부에 상관없이 거의 5 분마다 변화가 일어난다는 것을 의미합니다.

57
00:04:17,820 --> 00:04:19,260
나는 이것들이 라이브 업데이트 중임을 의미한다.

58
00:04:19,290 --> 00:04:23,190
어쩌면 뭔가 새로운 소식이 있습니다.

59
00:04:23,190 --> 00:04:25,590
이것은 매번 매우 다른 것입니다.

60
00:04:25,620 --> 00:04:28,840
그러나 이것은 항상 동일합니다.

61
00:04:29,130 --> 00:04:31,020
다시 차이점은 두 가지입니다.

62
00:04:31,020 --> 00:04:34,530
정적 페이지 대 동적 페이지입니다.

63
00:04:34,530 --> 00:04:36,650
둘 다 웹 페이지입니다.

64
00:04:36,660 --> 00:04:39,920
둘 다 TMLC와 자바 스크립트가 돌아오고 있습니다.

65
00:04:40,110 --> 00:04:46,770
하나는 백 엔드에서 서버 측 코드의 일부를 기반으로 변경 될 것입니다.

66
00:04:47,340 --> 00:04:49,600
그래서 나는 또한이 비유를 좋아한다.

67
00:04:49,740 --> 00:04:52,350
그래서 마술처럼 식당에 가면 당신은 앉아 있습니다.

68
00:04:52,380 --> 00:05:01,060
스테이크를 주문할 때 스테이크를 주문한다고 가정 해 봅시다. 스테이크를 주문할 때 부엌이 모든 것을 준비하는 부엌으로 돌아가는 요청입니다.

69
00:05:01,080 --> 00:05:02,350
그것은 일종의 백 엔드입니다.

70
00:05:02,460 --> 00:05:05,710
그것은 얼마나 오래 재료를 요리 할 것인지를 결정합니다.

71
00:05:05,970 --> 00:05:11,430
접시에있는 모든 것, 그리고 웨이터 또는 웨이트리스가 와서 테이블에 가져옵니다.

72
00:05:11,430 --> 00:05:12,480
그래서 매우 유사합니다.

73
00:05:12,480 --> 00:05:16,880
주방장이나 주방이 서버라는 요청을합니다.

74
00:05:17,070 --> 00:05:26,040
빙산의이 부분은 모든 것을 요리하는 요리를 만들어 내고 마침내 클라이언트쪽에있는 당신의 식탁으로 보내집니다.

75
00:05:27,290 --> 00:05:29,840
이제 세 살의 세 조각을 분해합시다.

76
00:05:29,940 --> 00:05:31,610
Javascript에 표시됩니다.

77
00:05:32,390 --> 00:05:35,310
따라서 각 구성 요소에 대한 자세한 내용을 살펴 보겠습니다.

78
00:05:35,330 --> 00:05:39,420
별도의 섹션과 유닛이 있지만 HDMI가 시작됩니다.

79
00:05:39,530 --> 00:05:43,760
기본적으로 하이퍼 텍스트 마크 업 언어를 의미합니다.

80
00:05:43,760 --> 00:05:44,870
상상 해봐.

81
00:05:44,880 --> 00:05:47,900
그리고 이것은 인터넷의 초창기에 실제로 일어난 일입니다.

82
00:05:47,960 --> 00:05:53,610
정보를 보내고 문서를 보내는 표준화 된 방법은 없었습니다.

83
00:05:53,720 --> 00:06:01,510
그래서 처음에 인터넷은 대학과 대학 간 통신 및 군사 도구로서의 통신에 사용된다는 것을 알고 있습니다.

84
00:06:01,520 --> 00:06:06,040
그래서 나는 내가 이것을 보내고 싶다고 말하고 싶습니다. 이것을 친구에게 보내고 싶었습니다.

85
00:06:06,560 --> 00:06:10,160
나는 이것이 대담한 OK라고 말할 필요가있다.

86
00:06:10,250 --> 00:06:12,170
이것들은 작은 글 머리 기호입니다.

87
00:06:12,260 --> 00:06:14,770
나는 이것에 대해 몇 가지 텍스트와 따옴표를 가지고있다.

88
00:06:14,770 --> 00:06:19,240
나는 그걸 부셔 버리고 그것을 다른 사람에게 보내기 위해 설명 할 방법이 필요합니다.

89
00:06:19,580 --> 00:06:36,450
해결책은 HMO였습니다. 그래서 HMO는 실제로 우리가 쉽지 않다는 말을하지 않는 것을 배우는 것이 가장 쉬운 방법이지만, 우리가 원하는 것을 설명하고 작성하는 것은 당신이 얻는 것만 큼 간단하다는 점에서 매우 간단합니다.

90
00:06:36,440 --> 00:06:39,800
따라서 HMO는 종종 웹 페이지의 명사라고합니다.

91
00:06:39,810 --> 00:06:40,830
그것은 구조입니다.

92
00:06:40,820 --> 00:06:50,570
기본적으로 해골을 말하는 사람이 여기에 이미지를 집어 넣는 것은 여기에 머리 글자를 적어 여기에 작은 머리글을 붙이면됩니다.

93
00:06:50,570 --> 00:07:04,720
그것은 당신이 페이지의 구조를 설명 할 수있게 해줍니다. 반면에 CSSA는 페이지의 스타일을 설명하는 방법입니다. HVM을 사용하여 평가 CSSA를 사용하는 방법은 전혀 아무것도하지 않습니다.

94
00:07:04,740 --> 00:07:10,540
모든 단일 웹 페이지에는 HMO가 있으며 일부 웹 페이지에는 C S가 없습니다. 일부 자바 스크립트가 없습니다.

95
00:07:10,540 --> 00:07:11,620
의무 사항은 아닙니다.

96
00:07:11,700 --> 00:07:18,990
H Tim L은 CSS 스타일 시트이므로 그 이름이 어디에서 왔는지 조금씩 배울 것입니다.

97
00:07:19,010 --> 00:07:26,030
기본적으로 HMO 스타일이기 때문에 모든 글 머리 기호를 녹색으로 만들 수 있습니다.

98
00:07:26,150 --> 00:07:32,980
첫 번째 이미지에 노란색 테두리를 지정하고 마지막 이미지에 대시가있는 큰 분홍색 테두리를줍니다.

99
00:07:33,000 --> 00:07:44,000
종종 웹 페이지의 형용사 또는 일부 사람들이 H.T. 남성 해골과 마지막 조각은 자바 스크립트입니다.

100
00:07:44,000 --> 00:07:49,170
Javascript는 아마도이 세 가지 중에서 가장 복잡한 것일 것입니다.

101
00:07:49,380 --> 00:07:52,940
그것은 우리가 페이지에 Bahjat와 상호 작용을 추가하는 방법입니다.

102
00:07:53,210 --> 00:08:02,830
따라서 우리와 자바 스크립트를 사용하면 아름다운 사이트를 만들 수 있지만 실제로는 아무것도하지 않을 것입니다. 간단한 애니메이션을 할 수는 있지만 다른 곳에서 데이터를로드 할 수는 있습니다.

103
00:08:02,830 --> 00:08:13,650
우리는 논리를 추가 할 수 없거나 자바 스크립트로 게임을 만들 수 없습니다. 여기에있는 예 중 일부를 사용할 수도 있고 사용자가로드를 클릭 할 때 수학 변경 색상을 사용할 수도 있습니다.

104
00:08:13,640 --> 00:08:15,900
Twitter의 새로운 데이터가 현재 날씨를 얻습니다.

105
00:08:15,890 --> 00:08:17,640
현재 NFL 점수.

106
00:08:17,730 --> 00:08:26,230
h tim L이 명사 C Ss이면 형용사이고 javascript는 동사의 페이지 작업입니다.

107
00:08:26,330 --> 00:08:33,400
그래서 나는이 코드를 코드에 멋지게 감싸고 있으므로 코드 펜은 훌륭한 광경입니다.

108
00:08:33,410 --> 00:08:39,460
우리는 많이 사용하지는 않을 것입니다. 왜냐하면 우리는 H-2에 LCS와 Javascript를 쓰지 않기 때문입니다.

109
00:08:39,620 --> 00:08:51,260
이 예제를 사용하여 이것을 사용하면 브라우저에 간단한 페이지를 쓸 수 있으므로 브라우저에서 작성하는 줄 텍스트를 사용할 필요가 없으므로 간단하게 페이지를 공유 할 수 있습니다. 용이하게.

110
00:08:51,260 --> 00:08:54,900
나는 3 개의 섹션 h TMLC SS와 Javascript를 가지고있다.

111
00:08:54,980 --> 00:08:58,100
여기서도 코드 자체가 중요하지 않습니다.

112
00:08:58,130 --> 00:08:59,650
그것은 개념입니다.

113
00:09:00,050 --> 00:09:06,710
그래서 한번 살펴보고 실제로 C-s 우리를 제거 할 것입니다.

114
00:09:06,870 --> 00:09:11,280
나는 내 일자리를 없애고 남은 일을 볼거야.

115
00:09:11,270 --> 00:09:14,490
일반 흑백 구조재.

116
00:09:14,510 --> 00:09:24,270
내 콘텐츠를 지정하여 내 단어이므로이 콘텐츠를 H1에서 특정 구조 요소에 배치합니다.

117
00:09:24,530 --> 00:09:26,530
그리고 이것은 다시 그 시대의 하나입니다.

118
00:09:26,580 --> 00:09:28,730
특정 구문에 대해 걱정하지 마십시오.

119
00:09:28,910 --> 00:09:32,920
우리는 앞서 많은 비디오들을 가지고 있으며 이것들은 세부 사항들과 이것들 각각에 대해 설명 할 것입니다.

120
00:09:33,050 --> 00:09:36,910
그러나 근본적으로 이것은 큰 글자를 여기에 만드는 것을 말하고 있습니다.

121
00:09:36,980 --> 00:09:47,510
이것은 목록을 작성하고 그것을 총알 지점으로 만들고 다른 총알 지점을 만든 다음 여기에 단추를 만들어라는 버튼을 만드는 개별 목록 항목으로 지정하는 것입니다.

122
00:09:47,540 --> 00:09:50,950
당신이 볼 수 있듯이 그것은 단지 구조입니다.

123
00:09:50,960 --> 00:09:54,110
자 이제 우리를 방문하거나 다시 보자.

124
00:09:54,120 --> 00:09:55,970
내가 여기서하고있는 것을 내가 볼 수있다.

125
00:09:56,120 --> 00:10:17,730
여기에있는 H-1을 보라색으로 만들어서 녹색으로 바꿀 수 있고 초록색으로 바꿀 수 있습니다. 또한 버튼에 배경색과 텍스트 색상이있는 테두리를 만들어서 변경할 수 있도록 말하고 있습니다. 그 녹색 텍스트 색상 수 있습니다.

126
00:10:17,780 --> 00:10:20,020
녹색을 변화시키는 것이 무엇인지보기가 어렵습니다.

127
00:10:20,120 --> 00:10:31,610
나는 더 큰 경계 20 픽셀을 그녀가 거기에서 볼 수 있도록 주어서 형용사가 있고 마지막 부분은 자바 스크립트입니다.

128
00:10:31,970 --> 00:10:35,420
그래서 javascript없이 버튼은 아무것도하지 않습니다.

129
00:10:35,450 --> 00:10:41,180
이제 우리가 한 것은 사용자가 버튼을 클릭 할 때 표시되는 자바 스크립트입니다.

130
00:10:41,340 --> 00:10:51,640
임의의 색상을 선택하고 여기에서 배경 색상을 임의의 색상으로 변경하여 클릭하고 임의의 색상을 얻을 수 있도록하십시오.

131
00:10:52,460 --> 00:10:58,440
그래서이 자바 스크립트를 제거하고 다시 시도했는데 어떤 동사도 없기 때문에 아무 일도 일어나지 않습니다.

132
00:10:58,430 --> 00:11:00,410
명사와 첨가물 일뿐입니다.

133
00:11:00,450 --> 00:11:06,520
논리를 추가 할 수있는 자바 스크립트를 추가하는 것만으로도 구조적 뼈대와 위에있는 약간의 스킨이 있습니다.

134
00:11:06,840 --> 00:11:08,300
그래서 자바 스크립트 정말 중요합니다.

135
00:11:08,370 --> 00:11:16,110
이것은 실제 생산 현장에서 가장 많이 할 수있는 일은 아니지만 광산 스위퍼를 만들 수있는 게임 일 것입니다.

136
00:11:16,130 --> 00:11:19,800
이것은 페이스 북이 페이지에 가입하는 양식 일 수도있는 채팅일지도 모릅니다.

137
00:11:19,860 --> 00:11:22,080
자바 스크립트를 사용하여 대화식으로 만들 수 있습니다.

138
00:11:22,280 --> 00:11:25,510
다시 한번 여러분이 코드 펜을 가지고 놀아 볼 것을 권합니다.

139
00:11:25,640 --> 00:11:28,340
당신은 이것을 연결하고 조금 탐험해야합니다.

140
00:11:28,350 --> 00:11:30,280
다음 동영상의 가장자리를 서두를 필요가 없습니다.

141
00:11:30,290 --> 00:11:32,960
원하는 경우 이러한 색상 중 일부를 변경해보십시오.

142
00:11:32,960 --> 00:11:34,590
이 중 일부를 변경해보십시오.

143
00:11:34,640 --> 00:11:36,190
코드에 집중하지 마십시오.

144
00:11:36,290 --> 00:11:40,020
주변을 둘러 보는 것은 재미 있지만,이 모든 것을 이해할 압박감은 없습니다.

145
00:11:40,040 --> 00:11:46,060
HDMI가 C S가하는 일과 Javascript가하는 일에 대한 매우 높은 수준의 개요를 제외하고는.