HTML、CSS、JavaScript

>Wecode辞書Studioの第1週目Keywords
•HTML、CSSって何?なんで?
•HTML、CSS、JavaScriptの関係
• .html, .css, .jsの3種類のファイルを接続する方法
•スクリプトタグの位置の違い
•Webページで発生する可能性のあるイベントのタイプ
•イベントとJavaScript関数の関係
> 1. HTML、CSSって何?なんで?
ある分野を学び始めるにあたって、その業界で使われている用語の定義を正確に理解することが最も基礎的であるが、最も重要な学習の第一歩とも言える.プロフェッショナルにとっては簡単かもしれませんが、非プロフェッショナルにとってHTML、CSSの定義も多くの問題を提起してくれたので、多くのことを学びました.
HTMLは、ハイパーテキストタグ言語、ハイパーテキストタグ言語でプログラミングされる言語ではありません.
問:では、ここの表記言語とプログラミング言語は何ですか.
マークアップ言語(markup language,markup language)は、マークなどを用いてドキュメントやデータ構造を記述する言語であり、ページフレームワークを固定する役割を果たす.プログラミング言語は、コンピュータシステムを駆動するソフトウェアを記述するための形式言語であり、寸法言語からなる静的ページを動的に生成する機能を有する.
問:静的ページとは何ですか.動的ページとは何ですか.
静的Webページは、コンピュータでメモ帳を開くように、格納されたコンテンツに従って表示され、動的Webページは他の変数によって変更されたページです.
私たちが見ているほとんどのページは動的なページで、ニュースを見たり、ポータルサイトの掲示板や漫画を見たりする行為は、ユーザーの要求に応じて動的に生成され、希望のページを送信します.

ソース:https://titus94.tistory.com/4
問:なぜHTMLとCSSが重要なのか.
HTMLは前述したように、ウェブページを作成するスケルトンやフレームワークともいえる.しかし、このHTMLをどのように作成するかには大きな違いがあります.
コードというサイトを作成すると言ったら
「strongまたはspan style=」font-size:22 pxなどでラップされたページを作成し、もう一人が「h 3」でラップされたページを作成すると言っている場合、ラップされたページに最初に表示されるページはどれですか?
検索エンジンはh 3に囲まれたページを表示します.これは、h 3で包まれたページがタイトルを意味するためですが、strongやspanなどは視覚的な装飾です.
つまり、私たちの目はネイバーのページなどを見ると、どれが本文なのか、どれがタイトルなのか、カップパソコンでは区別できないということです.そのため、機械的な検索エンジンでは、どのラベルがどのような機能を持っているかを見分けることができず、効率的にWebページからデータを抽出することができません.この問題を解決するために作られたのが「意味学的ラベル」です.特定のラベルに意味を与え、新しいWebページの作成を試み始め、「ビジュアルWebページ」と呼ばれます.そのため、HTMLをどのように書くかも非常に重要な問題です.
CSSでは、Webページを装飾するためのスタイル言語であり、レイアウトとスタイルを定義する際に高い自由度を持っています.
CSSを一度変更するだけで、HTMLに対してバッチ処理や指定された変更、すなわち重複除外を行うことができます.これにより、重複するコードを減らすことができます.例えば、過去にCSSがなかった場合、HTMLにfontタグを1つずつ入力する必要があったが、CSSの出現はこのような重複を解消することができる.このような状況は少数の人が利用するサイトでは大きな違いはないかもしれませんが、GoogleやFacebookなど世界の数億人が利用するWebサービスでは大きな違いが発生します.
2.HTML、CSSとJavaScriptの関係
HTML、CSSとJavaScriptの関係は何ですか?
この3つは,ページインタフェースを構成する3つの要素といえる.
1.ページ構造とコンテンツを構成するHTML
2.Webページの外観とスタイルを装飾できる積層スタイルシート
3.ウェブページの動作やアプリケーションなどの機能を担当するJavaScript.
この3つの要素の関係を下図に示します.

ソース:https://blog.naver.com/dartplus/220482039444
3..html, .css, .jsの3種類のファイルを接続する方法
では、HTML、CSS、JSはどのように接続するのでしょうか.
まず、CSSファイルに接続する方法は大きく3つあります.
1.内線スタイルと2.内部スタイルシート、3.外部スタイルシート.
まず、行内スタイルシートはタグにstyle=「プロパティ:プロパティ」を使用します.形でスタイルを変えることです.
style=color:blueをタグとして適用します.

内部スタイルシートは、複数の場所にスタイルを適用する場合に使用します.
ヘッダーラベルで定義し、styleラベルとstyleラベルの間に記述します.

最後に、スタイル情報をより高い外部スタイルシートとして保存します.この方法はlinkタグを使用して外部スタイルシートを接続する方法です.

JavaScriptとHTMLの接続には2つの方法があります.
1.Webドキュメントでscriptタグを使用してJavaScriptを作成する
通常、javascriptソースコードが短い場合は、Webドキュメントでjavascriptを実行する場所ですぐにコードが記述されます.実行するJavaScriptソースコードをscriptタグとscriptタグの間に作成します.

外部スクリプトファイルを使用してJavaScriptを作成
CSSと同様に、JavaScriptソースをファイルとして保存し、Webドキュメントに接続して使用することもできます.これにより、WebドキュメントにJavaScriptソースコードが表示されず、HTMLラベルとCSSのみが保持され、ソースコードがよりきれいになります.

4.スクリプトタグの位置の違い
スクリプトタグは、Webドキュメント内の任意の場所に配置できます.スクリプトは、挿入された場所で直接実行されます.また、scriptタグは、1つのドキュメントで複数使用できます.JavaScriptは通常、Webドキュメントの画像やテキストなどの要素を制御するので、画像やテキストを表示した後に実行することが望ましい.したがって、下図のようにbodyタグの直前に挿入するだけでよい.

  <script>
    var heading = document.querySelector('#heading');
    heading.onclick = function(){
      heading.style.color="red";
    }
  </script>
</body>

5.Webページで発生する可能性のあるイベントのタイプ
イベント(event)とは、WebブラウザがHTML要素で発生したイベントを指します.Webページで使用されるJavaScriptは、これらのイベントに応答して特定の操作を実行できます.



ソース:https://jenny-daru.tistory.com/17
6.イベントとJavaScript関数との関係
まず関数とは何でしょうか.
JAvascriptプログラムは、1つの動作を実行するだけでなく、複数の動作を接続します.この操作の目的に応じて組み合わせたコマンドを関数(function)と呼ぶ.
ほとんどの関数は、ユーザーが画面のボタンをクリックしたり、プロジェクトを選択したりしたときに実行されます.このようにボタンをクリックしたり、アイテムを選択したりすることを「アクティビティ」といいます.また,イベント発生時に実行される関数を「イベントプロセッサ」と呼ぶ.