お帰りなさい。
このビデオでは、フロントエンドに焦点を当てます。
私たちは、javascriptで評価された各TMLCについて、まだ実際にコードを書くつもりはないが、初めてコードを見ることになるでしょう。
だから、フロントエンドとバックエンドの違いはあなたが知りたいことが2つあります。
そしてまた、Hの違いは何ですか？ M. S. SSとJavascriptとそれぞれの役割は何か？
それでは、フロントエンド対バコットについて議論することから始めましょう。
だから私はあなたに行くときはFacebookを見てみましょう私はFacebookのドットコムを打つ私は入力を押して知っている。
そして、あなたがウェブの仕組みに関するビデオを覚えていれば、私はHTPリクエストを作成して、Facebookのドットコムを求めて、それがFacebookのサーバーに行くか、最終的にFacebookに戻って、どのページを送り返すかを決めます。
だから、Facebookの場合はどのようなイメージが何の物語を把握する必要があります何人の友達が私はどのような投稿が私のすべての設定のトップにある高プロファイルの写真は私に関係するすべてのものがあります。
そして、それは私に戻ってそれを送信します私の時間を送信するelseaはjavascriptで私のブラウザは私のために表示されます。
だから、ここのこの図では、フロントエンドとバックエンドの違いを説明しています。ブラウザで見ることができるすべてのものがちょうどH.です。
M. S. はい。
そしてjavascriptはちょうど氷山の先端です。
しかし、それは私のブラウザがフロントエンドまたはクライアント側であると見なすものです。
バックエンドによって構築されます。
すべてのことが起こるすべてのロジック。
私がログインしているかどうかを調べると、どの友達がどの写真であるかを知ることができます。
そのすべては、バックエンドまたはサーバー側のロジックから来ています。
だからここにもっとたくさんあることがわかる。
技術にはフロントエンドに非常に多くの選択肢があります。
バックエンドのHTML CSSとjavascriptは、Python ph P
Ruby javascriptのような異なる言語を実際に使用しています。これは実際に使用するものです。
ポストグラウンドとMongoとソファDのデータベースがあります。 BさんとMyaさん。
Q Lightenerにはたくさんの選択肢があります。
だから少し怖いです。
バックエンドについては、そのユニットに着くときにはっきりと話すつもりです。
しかし、今のところ、バックエンドは、Hが溶けて、C Sが送り返されるものであることを覚えておいてください。
だからここでサンフランシスコの私の好きなレストランをレイジークマと呼んでみましょう。
ここにレストランのページがあります。
このページは常に同じです。
私はそれが変わる可能性があることを意味する。
しかし、それが変わるために。
開発者はHに入る必要があります。 T. 量を手動で変更してください。
だから、基本的に同じホームページを手に入れるたびに、私はそのページをリフレッシュします。私は同じよくある質問と同じ連絡先のページを取得します。
それは悪いことではありませんが、変更する必要はありません。
それは単なるレストランのページです。
しかし、レイジークマのYelpページは動的です。
それは新しいレビューが書き込まれるたびに変更されるので、毎回ここに表示されます。この場合、5つ星の評価をしましょう。
私はレビューを読む。
あなたはおそらく私のレビューを拒否しますが、もし私がレビューを書いたら、それはここに表示されます。
物事は彼らが常に起こっている動的なので、私はああ、それは有用なレビューだったと言うことができる。
それは面白いレビューでした。
私が加えた投票はデータベースに保存されています。
何かが起こっている私はこれと相互作用しており、それは永続している。
だから私は今ページをリフレッシュする場合、それは非常に異なっていない異なっている。
しかし、以前は私がこれが面白かったとは思わなかったのに対して、今は覚えています。
私はそれが面白いと思った。
だから基本的には、私がこのページに行くとき、私はあなたにArel Yelpが必ず同じことを返すだけではないことを尋ねます。
これは、ユーザーがログインしていることを確認する予定です。
もしそうなら、私たちは彼のプロフィール画像をここに入れたいと思う。
彼は何かに投票しましたか？
はい。
OKを正しく強調表示していることを確認しましょう。
色を変更します。
彼にもう一度投票させてはいけません。
そして、彼にその構造はJavascriptと言い、それを返す。
間違いなくダイナミックなページの別の例は、Googleニュースです。
私がリフレッシュするたびに、ここでNFLのスコア以上の天気かどうか、ここで何か変わるほぼ5分ごとを意味します。
これらはライブアップデートです。
多分それは何か変わったニュースが変わるという新しい物語かもしれない。
これは毎回非常に異なっています。
しかし、これは常に同じです。
だから違いは2つのことです。
1つは静的ページ対動的ページです。
どちらもウェブページです。
どちらもTMLCで、Javascriptは戻ってきます。
1つは、バックエンドで何らかの種類のサーバーサイドコードに基づいて変更される予定です。
だから私はまた、このレストランの類推が好きです。
あなたが魔法のようにレストランに行くと、あなたは座ります。
ステーキを注文するときにステーキを注文するとしましょう。キッチンがあなたのためにすべてを準備するキッチンに戻ってくるリクエストを出しています。
それはバックエンドのようなものです。
それはどのくらいの時間それらを調理するためにどの原料を決定する。
プレートの上にあるすべてのもの、そしてウェイターまたはウェイトレスが来て、それをあなたのテーブルに持ち込みます。
それはとても似ています。
シェフやキッチンがサーバーであることをリクエストします。
氷山のこの部分は、それを一緒に置く料理をすべて調理して、そして最後にそれはあなたのクライアント側のあなたのテーブルに返されます。
だから今、彼の老人の3つの作品を分解しましょう。
Javascriptで言う
だから我々は、これらのコンポーネントのそれぞれについて多くの詳細を調べるつもりです。
別のセクションとユニットがありますが、HDMIがそこから開始します。
基本的にハイパーテキストマークアップ言語の略です。
想像してみろ。
そして、これはインターネットの初期の段階で実際に起こったことです。
情報を送信して文書を送信する標準化された方法はありませんでした。
だから当初、インターネットは大学と大学の間で通信するために、また軍事ツールとしても使われていました。
だから私は送るつもりだと言いましょう。私はこれを友人に送りたがっています。
私はOKと言いたいこれは太字です。
これらは小さな弾丸ポイントです。
私はこれについていくつかのテキストと引用符を持っています。
私はそれを打ち破り、それを他人に送る方法を必要としています。
ソリューションはHMOだったので、HMOは実際には簡単なことだとは言いませんが、私たちが望むものだけを記述し、書くことはあなたが得るものであるという点で非常に簡単です。
したがって、HMOはしばしばウェブページの名詞と呼ばれます。
それは構造です。
基本的に骨格と言う人もいますが、ここにイメージを入れてここに箇条書きを置くと、ここの見出しにはちょうどその下にある小さな見出しが置かれます。
それはあなたがページの構造を記述することを可能にする一方でCSSAはページのスタイルを記述する方法ですHVMが評価するCSSAを単独で使用する方法は本当に何もしません。
すべての単一のWebページにはHMOがあります。いくつかのWebページにはC Sがありません.SSにはJavaScriptがありません。
必須ではありません。
H Tim Lはカスケーディング・スタイル・シートであり、その名前がどこから来ているのかちょっと分かるでしょう。
基本的にHMOのスタイルになっているので、これらのすべての箇条書きを緑にするようなことを言うことができます。
最初のイメージに黄色のボーダーを与え、最後のイメージに大きなピンクのボーダーを付けます。
それは、しばしば、ウェブページの形容詞または何人かの人々がHに肌を言うと考えられる。 T.
男性の骨格とここの最後の部分はjavascriptです。
Javascriptはおそらく、これらの3つのうち、おそらく最も複雑なものです。
これは、Bahjatとインタラクティブ機能をページに追加する方法です。
だから、私たちとJavascriptでは見た目の美しいサイトを作ることができますが、実際には何もしません。簡単なアニメーションを行うことができますが、どこか他の場所からデータを読み込むことができます。
私たちは論理を追加することができないか、またはjavascriptを使ってゲームをすることはできません。私がここにある例のいくつかを使用したり、ユーザーがロードをクリックしたときに数学の色を変更したりできます。
Twitterからの新しいデータが現在の天気を取得します。
現在のNFLスコア。
h tim Lが名詞C Ssの形容詞である場合、javascriptは動詞であり、ページ上のアクションです。
ですから、私はこれをすべてコードにうまく収めたので、コードペンはすばらしい光景です。
我々は本当にたくさん使うつもりはありませんが、H-2をLCSとJavascriptに書き始めたわけではありません。
私はこれを例として使用するつもりですが、これによってブラウザに単純なページを書くだけで、ブラウザで書いた線のテキストを使う必要がなくなり、とても分かりやすいものにすることができます簡単に。
私は3つのセクションh TMLC SSとJavascriptを持っています。
コード自体はここでも重要なことではありません。
それがコンセプトです。
だから見てみましょう、私は実際に私のC - s私たちを取り除くつもりです。
私は自分の仕事を取り除くつもりです。あなたは私たちに残されたものを見るでしょう。
平らな黒と白の構造素材。
私はこれらが私の言葉であるように私のコンテンツを指定しています、そして、私はH1の特定の構造要素にその内容をラッピングしています。
そして、これもまたその時代の一つです。
特定の構文について心配する必要はありません。
私たちには、これほど多くのビデオがあり、詳細とそれぞれの詳細について説明します。
しかし、基本的にこれは大きな文章をここに作っているということです。
これは、リストを作成して、私に別の箇条書きを付けて、私にここでボタンを作ってくれるボタンを作ってくれるということを言う別のリストアイテムにすることです。
あなたがそれを見ることができるように、それはちょうど構造である自身のものです。
それでは、私たちに行ってみましょう。
私はここで何をしているのかを見ることができます。
ここにあるH-1を紫色にして、緑色に変えて緑色に変えることができます。また、ボタンに境界線があることを言って、バックグラウンドカラーとテキストカラーを白にして、変更することもできますそれは緑のテキストカラーになります。
それが緑を変えるものを見るのは難しいです。
私はそれが彼女がそこに見ることができるように、形容詞があり、最後の部分は私たちのJavascriptであることができるはるかに大きな境界20ピクセルを与えることができます。
だからjavascriptなしでボタンは何もしない。
今私たちがやったのは、ユーザーがボタンをクリックしたときに表示されるjavascriptです。
ランダムな色を選んで背景色をランダム色に変更して、クリックしてランダムな色を得るようにします。
だから私はこのjavascriptを取り除き、私は何も動詞を持っていないので何も起こらないようにしようとした。
名詞と添加物です。
ちょうど構造的なスケルトンと少し上の肌の上に私は私のロジックを追加することができます私のJavaScriptを追加します。
だから本当に重要なjavascript。
これはまさにあなたが本当の生産現場でやりそうなことではありませんが、あなたは私の掃除機を作るかもしれないゲームを持っているでしょう。
これは、Facebookのチャットであ​​る可能性がありますページにサインアップするフォームかもしれない。
あなたはそれをインタラクティブにするためにjavascriptを使用します。
もう一度、コードペンで遊ぶことをお勧めします。
あなたはこれにリンクして少し探検しなければなりません。
次のビデオの端を動かすことは急いではありません。
必要に応じてこれらの色の一部を変更してみてください。
これを変更してみてください。
コードに集中しないでください。
それは周りを遊ぶだけで楽しいですが、これを理解する圧力はありません。
C Sが何をするのかHDMIが何をするのか、そしてJ-JavaScriptが何をするのかについての非常に高いレベルの概要を除いて。
右