LogoMark.png

JavaScript/Sample

JavaScript Sample

JavaScriptJavaScript/SyntaxJavaScript/BOMJavaScript/DOM

CONTENTS


はじめの一歩

準備

以下の体験をするために 簡単なHTMLページを準備して下さい。
準備がない場合は、以下をダウンロードして利用して下さい。
https://github.com/koichi-inoue/CSS_Sample_01

ページにアクセスする:document.body

ボタンをクリックすると背景色が赤に変わるという簡単な事例です。

以下、事例を追加しますが、JSファイルを新規につくる必要はありません。既存の JSファイルに追加して試すことが可能です。


ID要素にアクセスする:document.getElementById( id )


CLASS要素にアクセスする:document.getElementsByClassName( class )

ページ内に複数存在する同一の要素すべてに何らかの処理を施す場合、要素名を単純に指定するだけでは動きません。この場合、要素の数だけ処理を繰り返す必要があり、一般に for 文を用いた繰り返し制御が必要になります。
 以下の例では、すべてのリスト項目の行の背景が赤になります。

タグにアクセスする:document.getElementsByTagName( tag )

p タグ部分の背景を赤にします。以下のように書けるのでは?
document.p.style.backgroundColor = "red"; 

残念ながら、これは正常に処理されません

document.body の body はページに1つだけの特別なものですが、<p>はページ内に複数ある前提なので、簡単に相手を特定できません。ひとつづつ掌握して、指示を出す必要があります。よってClassの場合と同様、以下のように記述する必要があります。

関数を理解する

ひとつのJSファイルには複数の関数(プログラム)を書くことができます。
関数名は自由につけることができますが、同名の関数が存在してはいけません。ライブラリー等のインクルードなど、複数のJSファイルを読み込む場合は、それらの中に定義された関数名とも競合しないよう注意が必要です。

JSファイルの中に複数の関数を並べる場合、その順番も基本的には自由です。ただし、誰が読んでも理解しやすいように整理するとともに、コメントをつけるなどして、説明を補足するのが賢明です。

単純な関数の列挙

例えば R,G,B 3つのボタンで、背景色をそれぞれ変更するには・・。シンプルに考えると、以下のように3つのボタンをつくって、それぞれに対応する3つの関数を用意すれば、各ボタンで色を変えることができます。

ただし、この例では3つの同じような関数があって、明らかに無駄があると言えます。そこで以下、引数(ひきすう)を使って改善します。

「引数」を使う

引数(ひきすう)とは、関数実行時に呼び出し側が関数に引き渡すデータです。例えば、

背景色を変更せよ(赤色で);

のような形式で「色名の部分を変数化して、それを処理に利用してもらう」ようにすれば、ひとつの関数であらゆる色に対応できるようになります。

関数の独立性を高める

ボタンをクリックするたびにページの背景色がランダムに変わるという仕事を考えます。この仕事には「ページの背景色」という限定的な部分と、「ランダムな色情報を作成する」という汎用的な部分があります。このような場合は、汎用的な部分を独立させておくと、例えば「ボタンの色をランダムに変える」という仕事にも使い回すことができます。関数をつくる場合は独立性を高く(汎用性を高く)することで、以後のプログラミング作業を効率の良いものにすることができます。

以上、上記で紹介した RandomColor( ) と RandomColor2( ) は独立性の高い関数です。そのまま他のプログラムでも利用が可能です。



外部変数を理解する

JSファイルの中に書かれた関数はそれぞれ独立して動くので、別の関数の中に同じ名前の「変数」が存在しても問題はありません。「変数」はそれが属する関数の中でのみ有効・・というのが原則です。
 では、異なる複数の関数で同じ変数を参照したい場合はどうするか?この場合は、外部変数(グローバル変数)と呼ばれる関数の外でつくられる変数を利用します。

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

ユーザー入力を利用する

ユーザー入力には input タグ の value 属性を用います。

入力された色名を背景色に反映させる

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

入力された文字列を要素の内容に反映させる

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

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

計算させる →DEMO

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

for文を使った合計処理

事例7と同様のフォームで、整数 xs から xe までの総和を求めるプログラム

例えば [ 1 ]  から [ 10 ] までの総和( 1 + 2 + 3 +・・・+ 10 )は 55
例えば [ 10 ] から [100 ] までの総和(10 + 11+ 12 +・・・+ 100 は 5,005




JavaScript を完全に独立させる

ここまで、HTMLのタグ内に onClick() という記載をしてきましたが、これはJavaScript がHTML文書の中に混入している状態で、気持ち悪いです。そこで、HTMLタグ内には一切スクリプトは書かない・・というこだわりで書着なおしてみましょう。「イベントリスナーの定義」が必要になります。

イベントリスナーを使う

インタラクティブ1 →DEMO

マウスの位置情報を用いたインタラクティブなサンプルを紹介します。この事例では、画面上のクリックした位置にBOXが移動します。


インタラクティブ2 →DEMO

先の事例の応用で、クリックした場所へBOXがアニメーションします。まずはアニメーションする仕組みをソースコードから読み取って下さい。

インタラクティブ3 →DEMO

上の事例を配列変数を使ってさらに応用します。

サンプル

以下、上記事例の一部を含んだサンプルです。
fileJavaScriptSamples.zip



PAGES

GUIDE

DATA

添付ファイル: fileJavaScriptSamples.zip 56件 [詳細]
Last-modified: 2020-02-02 (日) 17:41:07