LogoMark.png

Webデザイン実習/2020/0630

第9回 JavaScript入門2

Webデザイン実習/20202020.06.30


第9回目の展開と要件


第9回の完成イメージ

以下、JohnSmith さん(架空の受講生)の9回目の授業終了イメージです。ダミーデータのため、リンクは無効になっていますが、みなさんの完成ページでは、それぞれのリンク先で、HTMLのサンプルが確認できるようになっている必要があります。



以下、目次を見て演習の全体像を把握してから、順に説明を読み進めて下さい。



第9回 目次


はじめに

前回に引き続き、JavaScript を使ったページの動的な変更について、いくつかの事例を体験して下さい。

サンプルをコピーするだけでは理解は深まらないので、それぞれの演習について、自分なりの追加・修正を加えて、「ここを変えたら、表示がこう変わる・・」といった練習を積極的に行って下さい。

今回の演習も、HTML と JavaScript のみでシンプルにその機能を体験します。CSSを使って見栄えを良くする必要はありません。



演習準備

演習の準備として、前回同様、新規フォルダと2つのファイルを準備します。

以上で準備完了。以下、これをを編集する形で体験してください。
尚、演習の番号は、前回からの続き番号で、演習7からスタートしています。





1. 外部変数を使う

変数とは、データを入れる「器」のようなもので、i, j, x, y, num, colorName など、JavaScriptの文法上登録された単語(予約語)と異なるものであれば、自由に名称をつけることができます。 一般に以下のように宣言して利用します。

var 変数名 = 値; ( let 変数名 = 値; )

一般に「関数」の内部で宣言された変数は、当該関数の内部でのみ有効・・というルールになっているので、別の関数の中に同じ名前の「変数」を書いても、それらを共有利用することはできません。

そこで、異なる複数の関数で同じ変数を参照して使いたいという場合は、外部変数(グローバル変数)というものを、関数から独立したかたちで、つまり、関数の枠の外で宣言(用意)して使います。

1.1. 演習7|外部変数を使う

拡大・縮小、2つのボタンで文字サイズを変更する事例です。

文字の倍率を意味する scale という変数が外部変数で、拡大・縮小2つの関数によって値が更新されます。

注)外部変数を定義すると、他のJSファイルに書かれた外部変数と衝突するリスクや、関数の中で、var を付け忘れた変数がそれを利用してしまうリスクをもたらします。その意味で「外部変数はプログラムの動作環境を汚染する(グローバル汚染といいます)」ので、不用意に利用しないことが推奨されます。



2. ユーザー入力を利用する

form の中で使われる input 等を使って、ユーザーの入力情報を利用するサンプルを作成してみましょう。ユーザー入力には input タグ の value 属性を用います。

2.1. 演習8|ユーザー入力で色を変更する

入力された色名を背景色に反映させる事例を紹介します。

style プロパティを利用すると、当該要素の様々なCSSプロパティを変更することができます。以下の例では、テキスト領域にアクセスして、ユーザーが入力した色名をターゲット要素の背景色に反映させています。


2.2. 演習9|ユーザー入力で文字列を差し替える

入力された文字列を要素の内容に反映させる事例です。

innner.HTML プロパティーを利用すると、ユーザーが入力した文字列やHTMLコードを、現状のHTMLに動的に反映させるることがことができます。

付記
ユーザーが入力した文字列を innerHTMLを使用して反映するのはセキュリティリスクを伴うので注意が必要です。


2.3. 演習10|ユーザー入力で計算させる

XとYに値を入れてCALCボタンを押すと、かけ算の結果が表示されます。

2.4. 演習11|計算処理の応用 for文を使った合計処理

整数 xs から xe までの総和を求めるプログラムの事例です。

例えば  1 から 10 までの総和( 1 + 2 + 3 +・・・+ 10 )は 55
例えば 10 から 100 までの総和(10 + 11+ 12 +・・・+ 100  )は 5005

3. JavaScript を HTML から完全に独立させる

ここまで、HTMLのタグ内に onClick() という記載をしてきましたが、これはJavaScript が HTML文書の中に混入している状態で、気持ち悪いです。

そこで、HTMLタグ内には一切スクリプトは書かない・・というこだわりをもって書き直してみましょう。イベントリスナーの定義 が必要になります。
イベントリスナーとは「御用聞き」のことで(古い日本語です)、「お声がかかったら、こんな仕事をします」ということを事前に定義するものです。

3.1. 演習12|イベントリスナーを使う

addEventListener( イベント名 , 関数名 , フェーズ );

演習10 の計算をイベントリスナーを使って書き換えた事例です。

HTMLのタグに、onClick() を書くかわりに id="ID名''。これでスッキリ。HTMLのコードの中から JavaScript がすべて無くなりました。




4. 本日の演習成果の公開

以上で、第9回の授業は終了です。お疲れさまでした。
第10回は、JavaScript ライブラリー jQuery について学習します。



PAGES

GUIDE

DATA

Last-modified: 2020-06-30 (火) 13:53:10