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:08,790
私たちは、javascriptで評価された各TMLCについて、まだ実際にコードを書くつもりはないが、初めてコードを見ることになるでしょう。

4
00:00:08,790 --> 00:00:12,530
 

5
00:00:13,140 --> 00:00:17,900
だから、フロントエンドとバックエンドの違いはあなたが知りたいことが2つあります。

6
00:00:18,040 --> 00:00:23,970
そしてまた、Hの違いは何ですか？ M. S. SSとJavascriptとそれぞれの役割は何か？

7
00:00:25,080 --> 00:00:28,740
それでは、フロントエンド対バコットについて議論することから始めましょう。

8
00:00:28,860 --> 00:00:35,610
だから私はあなたに行くときはFacebookを見てみましょう私はFacebookのドットコムを打つ私は入力を押して知っている。

9
00:00:35,610 --> 00:00:43,050
 

10
00:00:43,050 --> 00:00:50,850
そして、あなたがウェブの仕組みに関するビデオを覚えていれば、私はHTPリクエストを作成して、Facebookのドットコムを求めて、それがFacebookのサーバーに行くか、最終的にFacebookに戻って、どのページを送り返すかを決めます。

11
00:00:51,210 --> 00:00:56,760
 

12
00:00:56,760 --> 00:01:02,400
 

13
00:01:02,400 --> 00:01:03,790
だから、Facebookの場合はどのようなイメージが何の物語を把握する必要があります何人の友達が私はどのような投稿が私のすべての設定のトップにある高プロファイルの写真は私に関係するすべてのものがあります。

14
00:01:04,110 --> 00:01:10,200
そして、それは私に戻ってそれを送信します私の時間を送信するelseaはjavascriptで私のブラウザは私のために表示されます。

15
00:01:10,200 --> 00:01:10,870
 

16
00:01:11,370 --> 00:01:16,980
だから、ここのこの図では、フロントエンドとバックエンドの違いを説明しています。ブラウザで見ることができるすべてのものがちょうどH.です。

17
00:01:16,980 --> 00:01:21,650
M. S. はい。

18
00:01:21,720 --> 00:01:24,190
そしてjavascriptはちょうど氷山の先端です。

19
00:01:24,270 --> 00:01:28,910
しかし、それは私のブラウザがフロントエンドまたはクライアント側であると見なすものです。

20
00:01:29,250 --> 00:01:31,960
バックエンドによって構築されます。

21
00:01:32,370 --> 00:01:34,360
すべてのことが起こるすべてのロジック。

22
00:01:34,440 --> 00:01:40,680
私がログインしているかどうかを調べると、どの友達がどの写真であるかを知ることができます。

23
00:01:40,680 --> 00:01:42,000
 

24
00:01:42,000 --> 00:01:45,970
そのすべては、バックエンドまたはサーバー側のロジックから来ています。

25
00:01:46,200 --> 00:01:48,000
だからここにもっとたくさんあることがわかる。

26
00:01:48,030 --> 00:01:50,820
技術にはフロントエンドに非常に多くの選択肢があります。

27
00:01:50,850 --> 00:01:58,010
バックエンドのHTML CSSとjavascriptは、Python ph P

28
00:01:58,020 --> 00:02:01,180
Ruby javascriptのような異なる言語を実際に使用しています。これは実際に使用するものです。

29
00:02:01,350 --> 00:02:06,570
ポストグラウンドとMongoとソファDのデータベースがあります。 BさんとMyaさん。

30
00:02:06,570 --> 00:02:09,320
Q Lightenerにはたくさんの選択肢があります。

31
00:02:09,390 --> 00:02:11,010
だから少し怖いです。

32
00:02:11,040 --> 00:02:15,060
バックエンドについては、そのユニットに着くときにはっきりと話すつもりです。

33
00:02:15,060 --> 00:02:20,940
しかし、今のところ、バックエンドは、Hが溶けて、C Sが送り返されるものであることを覚えておいてください。

34
00:02:20,940 --> 00:02:21,770
 

35
00:02:21,780 --> 00:02:27,200
だからここでサンフランシスコの私の好きなレストランをレイジークマと呼んでみましょう。

36
00:02:27,390 --> 00:02:28,890
ここにレストランのページがあります。

37
00:02:29,100 --> 00:02:31,580
このページは常に同じです。

38
00:02:31,620 --> 00:02:32,810
私はそれが変わる可能性があることを意味する。

39
00:02:32,820 --> 00:02:34,790
しかし、それが変わるために。

40
00:02:34,920 --> 00:02:38,600
開発者はHに入る必要があります。 T. 量を手動で変更してください。

41
00:02:38,610 --> 00:02:44,490
だから、基本的に同じホームページを手に入れるたびに、私はそのページをリフレッシュします。私は同じよくある質問と同じ連絡先のページを取得します。

42
00:02:44,730 --> 00:02:46,540
 

43
00:02:46,580 --> 00:02:48,650
それは悪いことではありませんが、変更する必要はありません。

44
00:02:48,660 --> 00:02:50,580
それは単なるレストランのページです。

45
00:02:50,610 --> 00:02:55,520
しかし、レイジークマのYelpページは動的です。

46
00:02:55,530 --> 00:03:01,110
それは新しいレビューが書き込まれるたびに変更されるので、毎回ここに表示されます。この場合、5つ星の評価をしましょう。

47
00:03:01,170 --> 00:03:05,070
 

48
00:03:05,070 --> 00:03:06,590
私はレビューを読む。

49
00:03:07,170 --> 00:03:11,840
あなたはおそらく私のレビューを拒否しますが、もし私がレビューを書いたら、それはここに表示されます。

50
00:03:11,880 --> 00:03:17,000
物事は彼らが常に起こっている動的なので、私はああ、それは有用なレビューだったと言うことができる。

51
00:03:17,190 --> 00:03:18,700
それは面白いレビューでした。

52
00:03:19,140 --> 00:03:23,510
私が加えた投票はデータベースに保存されています。

53
00:03:23,520 --> 00:03:27,060
何かが起こっている私はこれと相互作用しており、それは永続している。

54
00:03:27,060 --> 00:03:32,010
だから私は今ページをリフレッシュする場合、それは非常に異なっていない異なっている。

55
00:03:32,100 --> 00:03:36,350
しかし、以前は私がこれが面白かったとは思わなかったのに対して、今は覚えています。

56
00:03:36,350 --> 00:03:37,740
私はそれが面白いと思った。

57
00:03:37,740 --> 00:03:44,250
だから基本的には、私がこのページに行くとき、私はあなたにArel Yelpが必ず同じことを返すだけではないことを尋ねます。

58
00:03:44,250 --> 00:03:45,650
 

59
00:03:45,840 --> 00:03:49,060
これは、ユーザーがログインしていることを確認する予定です。

60
00:03:49,290 --> 00:03:52,600
もしそうなら、私たちは彼のプロフィール画像をここに入れたいと思う。

61
00:03:52,710 --> 00:03:53,980
彼は何かに投票しましたか？

62
00:03:54,000 --> 00:03:54,470
はい。

63
00:03:54,510 --> 00:03:57,990
OKを正しく強調表示していることを確認しましょう。

64
00:03:58,000 --> 00:03:59,260
色を変更します。

65
00:03:59,310 --> 00:04:01,530
彼にもう一度投票させてはいけません。

66
00:04:01,530 --> 00:04:05,420
そして、彼にその構造はJavascriptと言い、それを返す。

67
00:04:05,430 --> 00:04:10,150
間違いなくダイナミックなページの別の例は、Googleニュースです。

68
00:04:10,620 --> 00:04:15,330
私がリフレッシュするたびに、ここでNFLのスコア以上の天気かどうか、ここで何か変わるほぼ5分ごとを意味します。

69
00:04:15,330 --> 00:04:17,780
 

70
00:04:17,820 --> 00:04:19,260
これらはライブアップデートです。

71
00:04:19,290 --> 00:04:23,190
多分それは何か変わったニュースが変わるという新しい物語かもしれない。

72
00:04:23,190 --> 00:04:25,590
これは毎回非常に異なっています。

73
00:04:25,620 --> 00:04:28,840
しかし、これは常に同じです。

74
00:04:29,130 --> 00:04:31,020
だから違いは2つのことです。

75
00:04:31,020 --> 00:04:34,530
1つは静的ページ対動的ページです。

76
00:04:34,530 --> 00:04:36,650
どちらもウェブページです。

77
00:04:36,660 --> 00:04:39,920
どちらもTMLCで、Javascriptは戻ってきます。

78
00:04:40,110 --> 00:04:46,770
1つは、バックエンドで何らかの種類のサーバーサイドコードに基づいて変更される予定です。

79
00:04:47,340 --> 00:04:49,600
だから私はまた、このレストランの類推が好きです。

80
00:04:49,740 --> 00:04:52,350
あなたが魔法のようにレストランに行くと、あなたは座ります。

81
00:04:52,380 --> 00:04:58,230
ステーキを注文するときにステーキを注文するとしましょう。キッチンがあなたのためにすべてを準備するキッチンに戻ってくるリクエストを出しています。

82
00:04:58,230 --> 00:05:01,060
 

83
00:05:01,080 --> 00:05:02,350
それはバックエンドのようなものです。

84
00:05:02,460 --> 00:05:05,710
それはどのくらいの時間それらを調理するためにどの原料を決定する。

85
00:05:05,970 --> 00:05:11,430
プレートの上にあるすべてのもの、そしてウェイターまたはウェイトレスが来て、それをあなたのテーブルに持ち込みます。

86
00:05:11,430 --> 00:05:12,480
それはとても似ています。

87
00:05:12,480 --> 00:05:16,880
シェフやキッチンがサーバーであることをリクエストします。

88
00:05:17,070 --> 00:05:22,530
氷山のこの部分は、それを一緒に置く料理をすべて調理して、そして最後にそれはあなたのクライアント側のあなたのテーブルに返されます。

89
00:05:22,530 --> 00:05:26,040
 

90
00:05:27,290 --> 00:05:29,840
だから今、彼の老人の3つの作品を分解しましょう。

91
00:05:29,940 --> 00:05:31,610
Javascriptで言う

92
00:05:32,390 --> 00:05:35,310
だから我々は、これらのコンポーネントのそれぞれについて多くの詳細を調べるつもりです。

93
00:05:35,330 --> 00:05:39,420
別のセクションとユニットがありますが、HDMIがそこから開始します。

94
00:05:39,530 --> 00:05:43,760
基本的にハイパーテキストマークアップ言語の略です。

95
00:05:43,760 --> 00:05:44,870
想像してみろ。

96
00:05:44,880 --> 00:05:47,900
そして、これはインターネットの初期の段階で実際に起こったことです。

97
00:05:47,960 --> 00:05:53,610
情報を送信して文書を送信する標準化された方法はありませんでした。

98
00:05:53,720 --> 00:05:59,810
だから当初、インターネットは大学と大学の間で通信するために、また軍事ツールとしても使われていました。

99
00:05:59,820 --> 00:06:01,510
 

100
00:06:01,520 --> 00:06:06,040
だから私は送るつもりだと言いましょう。私はこれを友人に送りたがっています。

101
00:06:06,560 --> 00:06:10,160
私はOKと言いたいこれは太字です。

102
00:06:10,250 --> 00:06:12,170
これらは小さな弾丸ポイントです。

103
00:06:12,260 --> 00:06:14,770
私はこれについていくつかのテキストと引用符を持っています。

104
00:06:14,770 --> 00:06:19,240
私はそれを打ち破り、それを他人に送る方法を必要としています。

105
00:06:19,580 --> 00:06:28,230
ソリューションはHMOだったので、HMOは実際には簡単なことだとは言いませんが、私たちが望むものだけを記述し、書くことはあなたが得るものであるという点で非常に簡単です。

106
00:06:28,220 --> 00:06:35,390
 

107
00:06:35,390 --> 00:06:36,450
 

108
00:06:36,440 --> 00:06:39,800
したがって、HMOはしばしばウェブページの名詞と呼ばれます。

109
00:06:39,810 --> 00:06:40,830
それは構造です。

110
00:06:40,820 --> 00:06:48,360
基本的に骨格と言う人もいますが、ここにイメージを入れてここに箇条書きを置くと、ここの見出しにはちょうどその下にある小さな見出しが置かれます。

111
00:06:48,360 --> 00:06:50,570
 

112
00:06:50,570 --> 00:06:58,350
それはあなたがページの構造を記述することを可能にする一方でCSSAはページのスタイルを記述する方法ですHVMが評価するCSSAを単独で使用する方法は本当に何もしません。

113
00:06:58,340 --> 00:07:04,720
 

114
00:07:04,740 --> 00:07:10,540
すべての単一のWebページにはHMOがあります。いくつかのWebページにはC Sがありません.SSにはJavaScriptがありません。

115
00:07:10,540 --> 00:07:11,620
必須ではありません。

116
00:07:11,700 --> 00:07:18,350
H Tim Lはカスケーディング・スタイル・シートであり、その名前がどこから来ているのかちょっと分かるでしょう。

117
00:07:18,360 --> 00:07:18,990
 

118
00:07:19,010 --> 00:07:26,030
基本的にHMOのスタイルになっているので、これらのすべての箇条書きを緑にするようなことを言うことができます。

119
00:07:26,150 --> 00:07:32,980
最初のイメージに黄色のボーダーを与え、最後のイメージに大きなピンクのボーダーを付けます。

120
00:07:33,000 --> 00:07:39,110
それは、しばしば、ウェブページの形容詞または何人かの人々がHに肌を言うと考えられる。 T.

121
00:07:39,360 --> 00:07:44,000
男性の骨格とここの最後の部分はjavascriptです。

122
00:07:44,000 --> 00:07:49,170
Javascriptはおそらく、これらの3つのうち、おそらく最も複雑なものです。

123
00:07:49,380 --> 00:07:52,940
これは、Bahjatとインタラクティブ機能をページに追加する方法です。

124
00:07:53,210 --> 00:07:58,940
だから、私たちとJavascriptでは見た目の美しいサイトを作ることができますが、実際には何もしません。簡単なアニメーションを行うことができますが、どこか他の場所からデータを読み込むことができます。

125
00:07:58,940 --> 00:08:02,830
 

126
00:08:02,830 --> 00:08:08,150
 

127
00:08:08,150 --> 00:08:13,650
私たちは論理を追加することができないか、またはjavascriptを使ってゲームをすることはできません。私がここにある例のいくつかを使用したり、ユーザーがロードをクリックしたときに数学の色を変更したりできます。

128
00:08:13,640 --> 00:08:15,900
Twitterからの新しいデータが現在の天気を取得します。

129
00:08:15,890 --> 00:08:17,640
現在のNFLスコア。

130
00:08:17,730 --> 00:08:25,730
h tim Lが名詞C Ssの形容詞である場合、javascriptは動詞であり、ページ上のアクションです。

131
00:08:26,330 --> 00:08:33,400
ですから、私はこれをすべてコードにうまく収めたので、コードペンはすばらしい光景です。

132
00:08:33,410 --> 00:08:39,160
我々は本当にたくさん使うつもりはありませんが、H-2をLCSとJavascriptに書き始めたわけではありません。

133
00:08:39,620 --> 00:08:45,090
 

134
00:08:45,290 --> 00:08:50,330
 

135
00:08:50,340 --> 00:08:51,260
私はこれを例として使用するつもりですが、これによってブラウザに単純なページを書くだけで、ブラウザで書いた線のテキストを使う必要がなくなり、とても分かりやすいものにすることができます簡単に。

136
00:08:51,260 --> 00:08:54,900
私は3つのセクションh TMLC SSとJavascriptを持っています。

137
00:08:54,980 --> 00:08:58,100
コード自体はここでも重要なことではありません。

138
00:08:58,130 --> 00:08:59,650
それがコンセプトです。

139
00:09:00,050 --> 00:09:06,710
だから見てみましょう、私は実際に私のC  -  s私たちを取り除くつもりです。

140
00:09:06,870 --> 00:09:11,280
私は自分の仕事を取り除くつもりです。あなたは私たちに残されたものを見るでしょう。

141
00:09:11,270 --> 00:09:14,490
平らな黒と白の構造素材。

142
00:09:14,510 --> 00:09:21,890
私はこれらが私の言葉であるように私のコンテンツを指定しています、そして、私はH1の特定の構造要素にその内容をラッピングしています。

143
00:09:21,890 --> 00:09:24,270
 

144
00:09:24,530 --> 00:09:26,530
そして、これもまたその時代の一つです。

145
00:09:26,580 --> 00:09:28,730
特定の構文について心配する必要はありません。

146
00:09:28,910 --> 00:09:32,920
私たちには、これほど多くのビデオがあり、詳細とそれぞれの詳細について説明します。

147
00:09:33,050 --> 00:09:36,910
しかし、基本的にこれは大きな文章をここに作っているということです。

148
00:09:36,980 --> 00:09:43,010
これは、リストを作成して、私に別の箇条書きを付けて、私にここでボタンを作ってくれるボタンを作ってくれるということを言う別のリストアイテムにすることです。

149
00:09:43,010 --> 00:09:47,510
 

150
00:09:47,540 --> 00:09:50,950
あなたがそれを見ることができるように、それはちょうど構造である自身のものです。

151
00:09:50,960 --> 00:09:54,110
それでは、私たちに行ってみましょう。

152
00:09:54,120 --> 00:09:55,970
私はここで何をしているのかを見ることができます。

153
00:09:56,120 --> 00:10:03,750
 

154
00:10:04,490 --> 00:10:12,830
 

155
00:10:13,700 --> 00:10:17,730
ここにあるH-1を紫色にして、緑色に変えて緑色に変えることができます。また、ボタンに境界線があることを言って、バックグラウンドカラーとテキストカラーを白にして、変更することもできますそれは緑のテキストカラーになります。

156
00:10:17,780 --> 00:10:20,020
それが緑を変えるものを見るのは難しいです。

157
00:10:20,120 --> 00:10:26,970
私はそれが彼女がそこに見ることができるように、形容詞があり、最後の部分は私たちのJavascriptであることができるはるかに大きな境界20ピクセルを与えることができます。

158
00:10:26,960 --> 00:10:31,610
 

159
00:10:31,970 --> 00:10:35,420
だからjavascriptなしでボタンは何もしない。

160
00:10:35,450 --> 00:10:41,180
今私たちがやったのは、ユーザーがボタンをクリックしたときに表示されるjavascriptです。

161
00:10:41,340 --> 00:10:50,030
ランダムな色を選んで背景色をランダム色に変更して、クリックしてランダムな色を得るようにします。

162
00:10:50,030 --> 00:10:51,640
 

163
00:10:52,460 --> 00:10:57,800
だから私はこのjavascriptを取り除き、私は何も動詞を持っていないので何も起こらないようにしようとした。

164
00:10:57,810 --> 00:10:58,440
 

165
00:10:58,430 --> 00:11:00,410
名詞と添加物です。

166
00:11:00,450 --> 00:11:05,840
ちょうど構造的なスケルトンと少し上の肌の上に私は私のロジックを追加することができます私のJavaScriptを追加します。

167
00:11:05,850 --> 00:11:06,520
 

168
00:11:06,840 --> 00:11:08,300
だから本当に重要なjavascript。

169
00:11:08,370 --> 00:11:14,100
これはまさにあなたが本当の生産現場でやりそうなことではありませんが、あなたは私の掃除機を作るかもしれないゲームを持っているでしょう。

170
00:11:14,100 --> 00:11:16,110
 

171
00:11:16,130 --> 00:11:19,800
これは、Facebookのチャットであ​​る可能性がありますページにサインアップするフォームかもしれない。

172
00:11:19,860 --> 00:11:22,080
あなたはそれをインタラクティブにするためにjavascriptを使用します。

173
00:11:22,280 --> 00:11:25,510
もう一度、コードペンで遊ぶことをお勧めします。

174
00:11:25,640 --> 00:11:28,340
あなたはこれにリンクして少し探検しなければなりません。

175
00:11:28,350 --> 00:11:30,280
次のビデオの端を動かすことは急いではありません。

176
00:11:30,290 --> 00:11:32,960
必要に応じてこれらの色の一部を変更してみてください。

177
00:11:32,960 --> 00:11:34,590
これを変更してみてください。

178
00:11:34,640 --> 00:11:36,190
コードに集中しないでください。

179
00:11:36,290 --> 00:11:40,020
それは周りを遊ぶだけで楽しいですが、これを理解する圧力はありません。

180
00:11:40,040 --> 00:11:46,060
C Sが何をするのかHDMIが何をするのか、そしてJ-JavaScriptが何をするのかについての非常に高いレベルの概要を除いて。

181
00:11:46,340 --> 00:11:46,630
右