LogoMark.png

JavaScript/Sample

JavaScript Sample

JavaScriptJavaScript/SyntaxJavaScript/BOMJavaScript/DOM

CONTENTS


はじめての制御体験

JavaScript によるページ内要素の制御を体験します。

HTMLはページ内に要素を記述し、CSSは当該要素の表示スタイルを定義します。しかし例えば「ボタンクリックで表示が変わる」といった、ページ要素の「動的」な変更は、HTML・CSSにはできません。そこで、JavaScript を使った「命令」の記述が必要になります。

命令というものは、一般に「誰かに対して、何らかの動作を指示する」というかたちになりますが、JavaScript も同じで、例えば「ページの中の ID = ”XXX”の部分(命令の対象)に、背景色の変更(命令の内容)を指示する」といった手続きを記述することになります。

ページ内には様々な要素(Element)がありますが、それらを制御するには、はじめに相手を捕まえる、つまり命令の対象を捉える必要があります。

ここでは、以下の4つの事例で、対象の捉え方と、動作指示の仕方を体験します。やたらと長い綴りでウンザリするかもしれませんが、とりあえず、これだけあれば、対象を捉えることができます。覚えて書くのではなく、コピペで貼ればいい・・と割り切りましょう。

ちなみに、IDとCLASS については、以下のことを再確認しましょう。


準備

JavaScript の基礎体験をするために 簡単なHTMLページを準備します。

以上で、準備完了です。

JavaScript を正確に理解するには「文法」の知識が必要になるのですが、このページでは「まずは体験する」ということを目的に、細かい説明を省いています。このページの事例を一通り体験して後、以下のページで JavaScriptの文法 や BOM・DOM についてご確認ください。

では、簡単な体験からはじめましょう。


事例1|ページにアクセスする

document.body

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


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


事例2|ID要素にアクセスする

document.getElementById( ID名 )   ← ID要素を捕まえます。

ボタンをクリックするとID要素の背景色が yellow に変わるという事例です。


事例3|CLASS要素にアクセスする

document.getElementsByClassName( クラス名 )

getElement ではなく getElements と複数形であることに注意して下さい。

ボタンクリックで CLASS要素の背景色が green に変わるという事例です。

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

以下の例では、すべてのリスト項目の行の背景が green になります。

事例4|HTML要素にアクセスする

document.getElementsByTagName( タグ名 )

getElement ではなく getElements と複数形であることに注意して下さい。

ボタンクリックで HTML要素の背景色が blue に変わるという事例です。

p タグ部分の背景を red にするには、body の背景を赤にしたのと同じ発想で、以下のように書けるのでは?・・と思いがちですが、残念ながら、これは正常に処理されません。

document.p.style.backgroundColor = "red";  ← これは正しく機能しません。

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

参考:querySelector の利用
document.querySelector(単品セレクト) や document.querySelectorAll(複数セレクト) によって、要素を取得する方法もあります。querySelector では、セレクタ部分が、クラス名だけでなく、一般のHTML要素名や、子孫セレクタでも使える点で万能ツールと言えます。



関数を効率的に作る

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

ただし、この例では3つの同じようなプログラムが3回も記述されていて、明らかに効率が悪い・・。そこで以下、引数(ひきすう)を使って改善します。


事例5|引数を使う

function 関数名( 引数 ) { 処理 }

ひとつの関数で複数の処理に対応するという事例です。

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

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

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


事例6|汎用性のある関数を用意する

function 関数名( 引数 ){ 汎用性のある処理 };

ボタンクリックのたびにページの背景色がランダムに変わる事例です。

この機能は「ページの背景色を変える」という親機能(メインプログラム)と、「ランダムな色情報を作成する」という子機能(サブプログラム)の2つに分解することができます。このような場合は、汎用性のある(他のプログラムでも使える)サブプログラム部分を独立させておくと、例えば「ボタンの色をランダムに変える」という仕事にも流用することができます。関数をつくる場合は独立性を高く(汎用性を高く)することで、以後のプログラミング作業を効率の良いものにすることができます。

参考:rgb(r,g,b) 型の表記を生成するパターン
「ランダムな色をつくる」部分について、rgb(r,g,b) 型の表記を生成する事例も紹介します。こちらの方が応用が効くかもしれません。

function RandomColor2(){ 
     var r = Math.floor( 256*Math.random() );
     var g = Math.floor( 256*Math.random() );
     var b = Math.floor( 256*Math.random() );
     return 'rgb(' + r + ',' + g + ',' + b + ')';
}

ちなみに以下のようにするとRGB の値にそれぞれウエイトを与えることができます。以下の数値設定では、シアン系の明るい色の範囲が出ます。

function RandomColor2(){
     var r = Math.floor(  16*Math.random() + 128 );
     var g = Math.floor( 128*Math.random() + 128 );
     var b = Math.floor( 128*Math.random() + 128 );
     return 'rgb(' + r + ',' + g + ',' + b + ')';
}

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




外部変数を理解する

JSファイルの中に書かれた関数はそれぞれ独立して動くので、別の関数の中に同じ名前の「変数」が存在しても問題はありません。「変数」はそれが属する関数の中でのみ有効・・というのが原則です。

では、異なる複数の関数で同じ変数を参照したい場合はどうするか?この場合は、外部変数(グローバル変数)と呼ばれる関数の外でつくられる変数を利用します。

事例7|外部変数を使う

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

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

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

ユーザー入力を利用する

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

事例8|ユーザー入力で色を変更する

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

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


事例9|ユーザー入力で文字列を差し替える

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

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

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


事例10|ユーザー入力で計算させる

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

事例11|計算処理の応用 for文を使った合計処理

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

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

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

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

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

事例12|イベントリスナーを使う

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

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

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




サンプル

事例1-6

事例7-12

BOMを含めた事例




補足:インタラクティブな「動き」の実現

インタラクティブ1 →DEMO

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


インタラクティブ2 →DEMO

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

インタラクティブ3 →DEMO

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




PAGES

GUIDE

DATA

添付ファイル: fileJavaScriptSamples.zip 87件 [詳細]
Last-modified: 2020-06-30 (火) 16:01:48