◀︎STUDY JavaScript_001-1 JavaScript とは

-----

企画 / 動作 / 目的 / レイアウト

記述方式 / 動的要素
JavaScript を使う理由

サンプル - 1

このページは HTML → <a> タグで記述してあるので, 文字列をクリックするとページが移動します.

サンプル - 2

このページは HTML → <a> タグ + CSS → a:hover で記述してあるので文字列にカーソルを重ねると表示が変わり, クリックするとページが移動します.

サンプル - 3

このページは ( <a> タグではなく) HTML → <button> タグ + Attribute → onclick で記述してあるので, ボタンをクリックするとページが移動します.

サンプル - 4

このページは JavaScript → function ぼたん() と <button> タグ + Attribute → onclick で記述してあります(ページ移動はしていない).

サンプル - 3 の解説

通常, ページ移動を行うには HTML → <a> タグを作成して文字列をクリックする方法が一般的.
しかし HTML で <button> タグを記述し, Attribute → onclick の Value で小さな JavaScript である→ location.href=" "
( event handler ) を記述すれば <a> タグを使わずにページ移動が可能となる.
location は JavaScript に組み込まれている locationオブジェクト.
.href=" " は location オブジェクトのプロパティ.

サンプル - 4 の解説

ボタンがクリックされると現在ブラウザのメモリ内に読み込まれている html のソース・コードが
JavaScript の命令によって書き換わる. 同じページ内で別の結果を表示できるのでページが移動するよりも速い.
しかし reload() で元に戻る場合, ソースを再読み込みすることになるのでここが気にかかる.
JavaScript では関数として存在する複数の動作を Object (オブジェクト)として扱うことになる.
function ぼたん() がこの場合の Object ・・・つまりぼたん() が関数名となる.
この Object の役目は三つある → 「<p>タグ〜 </p> までの内容を取得する」
　　　　　　　　　　　　　　　「スタイル・シートを生成して文字色を赤に変更」
　　　　　　　　　　　　　　　「スタイル・シートを生成して文字色を赤に変更」

実習 - 1

sample_JS_001-A 〜 -D まで(4つ)のフォルダーを用意し, それらの中に必要な HTML ドキュメントを作成してみましょう.

● その1 → フォルダー名:sample_JS_001-A

2つのファイル名:sample_JS_001-A1.html / sample_JS_001-A2.html

● その2 → フォルダー名:sample_JS_001-B

2つのファイル名:sample_JS_001-B1.html / sample_JS_001-B2.html

● その3 → フォルダー名:sample_JS_001-C

2つのファイル名:sample_JS_001-C1.html / sample_JS_001-C2.html

● その4 → フォルダー名:sample_JS_001-D

ファイル名:sample_JS_001-D.html

-----

◀︎Contents　　　　　STUDY JavaScript_001-1