JavaScript/Sample
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*JavaScript 入門サンプル
~
はじめに、''このページの内容を学習すると何ができるように...
-事例1-6：https://koichi-inoue.github.io/JS_Sample_01
-事例7-12：https://koichi-inoue.github.io/JS_Sample_02
~
***CONTENTS
#contents2_1
~
**はじめての制御体験
ここでは、JavaScript によるページ内の要素の動的変更を体験...
Webサイトにおける JavaScript の主な役割は「ボタンクリック...
ページ内には様々な要素（Element）がありますが、それらを制...
ここでは、以下の４つの事例で、対象の捕らえ方と、動作指示...
-''document.body''
＞ ページ全体を命令の対象とする
-''document.getElementById( ID名 )''
＞ ID名が定義された要素を命令の対象とする
-''document.getElementsByClassName( クラス名 )''
＞ CLASS名が定義された要素を命令の対象とする
-''document.getElementsByTagName( タグ名 )''
＞ HTML要素（タグ）を命令の対象とする
~
ちなみに、IDとCLASS については、以下のことを再確認しまし...
-ID：ページの中に唯一の存在。同じ名前が複数存在してはいけ...
--ID名は、HTMLの中では、<h1 id="PageTitle"> のように書き...
--ID名は、CSSの中では、&color(red){''#''};PageTitle { } ...
-CLASS：ページの中に同じ名前が複数存在する場合に使います。
--CLASS名は、HTMLの中では、<p class="message"> のように書...
--CLASS名は、CSSの中では、&color(red){''.''};message { }...
~
***準備
JavaScript の基礎体験をするために 簡単なHTMLページを準備...
-デスクトップに ''SampleJS'' という名称のフォルダを作って...
~
-以下のコードを ''index.html'' として SampleJS フォルダに...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript Sample</title>
</head>
<body>
<header>
<h1>JavaScript Sample</h1>
</header>
<article>
ここに追加のコードを書き込んでいきます
</article>
<footer>
<p>https://www.example.com</p>
</footer>
</body>
</html>
この後、このファイルにHTMLのコードを追記していきます。
~
-以下の１行を 新規のファイルとして作成し、''script.js'' ...
// JavaScript Sample
この後、このファイルにJavaScriptのコードを追記していきま...
~
-''HTMLファイルと JavaScript ファイルを関連付けする''
HTMLファイルの <head> 部分に以下一行を加えてください。こ...
<script src="script.js"></script>
~
以上で、準備完了です。
JavaScript を正確に理解するには「文法」の知識が必要になる...
-[[JavaScript/Syntax]]
-[[JavaScript/BOM]]
-[[JavaScript/DOM]]
~
'''では、簡単な体験からはじめましょう。'''
~
***事例１｜ページにアクセスする
document.body
''ボタンをクリックすると背景色が red に変わる''という簡単...
-index.html の article の中に以下のコードを追記して下さい。
<h2>事例１｜ページにアクセスする</h2>
<button onClick="MyFunction01()" >Click Me !</button>
-script.js の先頭に以下のコードを追記して下さい。
// body の背景色を変える
function MyFunction01() {
var obj = document.body;
obj.style.backgroundColor = 'red';
}
-補足解説（今は、ざっくり理解程度でOKです）
--onClick= は ''ボタンクリックで MyFunction01 を呼び出す'...
--function ではじまるこのようなスクリプトを「関数」といい...
--JavaScriptでは''文末に [ ; ] をつけるのが基本ルールです...
--var obj は、obj という名称の「変数（Variable）」の準備...
「変数」は「データを入れる器」とイメージするとよいでしょ...
--document.body は HTML文書の body オブジェクト を指しま...
--obj = doc・・ の「=」は、右辺のデータを左辺に渡すこと...
--style.backgroundColor は、スタイルプロパティ.背景色を指...
-動作確認
このHTMLをブラウザで表示して、ボタンをクリックすると、bod...
--ボタンをクリック
--MyFunction01() が呼び出される
--変数 obj に body オブジェクトがセットされる（相手が捕ま...
--obj のスタイル.背景色 に red がセットされる
-補足解説：「関数」について
関数とは、function で始まるプログラムのことで、{ } の中...
--関数はどこに書く？
関数は一般に JavaScript ファイル（xxxx.js）の中に書きます...
--関数の名前の付け方は？
function の直後に書く関数の名前（MyFunction01など）は自由...
一般に「動詞＋目的語」のパターンでネーミングします。以...
色を変える ＞ ChangeColor
~
'''以下、続けて事例を追加しますが、ファイルを新規につくる...
~
***事例２｜ID要素にアクセスする
document.getElementById( ID名 ) ← ID要素を捕まえます。
''ボタンをクリックするとID要素の背景色が yellow に変わる'...
-HTML側に以下のコードを追加して下さい。
<h2 id="ID01">事例２｜ID要素にアクセスする</h2>
<button onClick="MyFunction02()" >Click Me!</button>
-JS側に以下のコードを追加して下さい。
// ID要素の背景色を変える
function MyFunction02(){
var obj = document.getElementById('ID01');
obj.style.backgroundColor = 'yellow';
}
~
***事例３｜CLASS要素にアクセスする
document.getElementsByClassName( クラス名 )
getElement ではなく getElement''s'' と複数形であることに...
''ボタンクリックで CLASS要素の背景色が green に変わる''と...
ページ内に複数存在する同一の要素すべてに何らかの処理を施...
以下の例では、すべてのリスト項目の行の背景が green になり...
-HTML側に以下のコードを追記して下さい。
<h2>事例３｜CLASS要素にアクセスする</h2>
<button onClick="MyFunction03()" >Click Me !</button>
<ul>
<li class="Class01">A</li>
<li>B</li>
<li class="Class01">C</li>
<li>D</li>
<li class="Class01">E</li>
<li>F</li>
<li class="Class01">G</li>
</ul>
複数の li 要素に class="Class01" が追記されていることが重...
-JS側に以下のコードを追記して下さい。
// CLASS要素の背景色を変える
function MyFunction03(){
// Class01の把握（情報が line[0], line[1] ,line[2]・...
var lines = document.getElementsByClassName('Class01...
// i 番目の pタグ部分の背景を green に
for( var i=0; i<lines.length; i++ ){
lines[i].style.backgroundColor = 'green';
}
}
-補足解説
--document.getElement''s''ByClassName メソッドは、クラス...
--for( 初期条件; 繰り返し条件; ステップ ) { 処理 } は、一...
--lines.length は、配列 lines[ ] の要素数を意味します。
~
***事例４｜HTML要素にアクセスする
document.getElementsByTagName( タグ名 )
getElement ではなく getElement''s'' と複数形であることに...
''ボタンクリックで HTML要素の背景色が blue に変わる''とい...
p タグ部分の背景を red にするには、body の背景を赤にした...
document.p.style.backgroundColor = "red"; ← これは正し...
document.body の body はページに１つだけの特別なものです...
-HTML側に以下のコードを追記して下さい。
<h2>事例４｜HTML要素にアクセスする</h2>
<button onClick="MyFunction04()" >Click Me !</button>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specime...
</p>
-JS側に以下のコードを追記して下さい。
// HTML要素の背景色を変える
function MyFunction04() {
// pタグの把握（複数の情報が obj[0], obj[1] ,obj[2]・...
var obj = document.getElementsByTagName("p");
// pタグの存在する数だけ処理をくりかえす
for( var i=0; i<obj.length; i++ ) {
// i 番目の pタグ部分の背景を blue に
obj[ i ].style.backgroundColor = "blue";
}
}
~
''参考：querySelector の利用''
document.querySelector（単品セレクト） や document.queryS...
~
~
**関数を効率的に作る
例えば R,G,B ３つのボタンで、背景色をそれぞれ変更するには...
-HTML側
<ul>
<li><button onClick="MyFunctionR()">RED</button></li>
<li><button onClick="MyFunctionG()">GREEN</button></li>
<li><button onClick="MyFunctionB()">BLUE</button></li>
</ul>
-JS側
function MyFunctionR(){
var obj = document.body;
obj.style.backgroundColor = 'red';
}
function MyFunctionG(){
var obj = document.body;
obj.style.backgroundColor = 'green';
}
function MyFunctionB(){
var obj = document.body;
obj.style.backgroundColor = 'blue';
}
~
ただし、この例では３つの同じようなプログラムが３回も記述...
~
***事例５｜引数を使う
function 関数名( 引数 ) { 処理 }
''ひとつの関数で複数の処理に対応する''という事例です。
''引数（ひきすう）''とは、関数実行時に呼び出し側が関数に...
背景色を変更せよ（赤色で）;
のような形式で「赤色で」の部分を変数化して、その値を処理...
-HTML側 に以下のコードを追加して下さい。
<h2>事例５｜引数の利用</h2>
<ul>
<li><button onClick="MyFunction05('red')">RED</button...
<li><button onClick="MyFunction05('green')">GREEN</bu...
<li><button onClick="MyFunction05('blue')">BLUE</butt...
</ul>
-JS側 に以下のコードを追加して下さい。
// 引数を用いた背景色の変更
function MyFunction05( col ){
var obj = document.body;
obj.style.backgroundColor = col;
}
例えば最初のボタンがクリックされると、関数 MyFunction05()...
~
***事例６｜汎用性のある関数を用意する
function 関数名( 引数 ){ 汎用性のある処理 };
''ボタンクリックのたびにページの背景色がランダムに変わる'...
この機能は「ページの背景色を変える」という親機能（メイン...
-HTML側に以下のコードを追加して下さい。
<h2>事例６｜汎用性のある関数を用意する</h2>
<button onClick="MyFunction06()" >Click Me!</button>
-JS側に以下のコードを追加して下さい。
//ランダムな16進6桁のカラーコードを生成（汎用性のある関...
function randomColor(){
var col = Math.floor( Math.random() * 0xFFFFFF ).toS...
for( var i = col.length; i<6; i++ ) { col = '0' + co...
return '#' + col;
}
// 背景色の変更
function MyFunction06( ){
var obj = document.body;
obj.style.backgroundColor = randomColor();
}
-補足解説
--Math.floor() メソッドは、引数の値以下となる最大の整数を...
--Math.random() メソッドは、0.0 - 1.0 の範囲の乱数を発生...
--0xFFFFFF を乗算しているのは、最大値1.0 の乱数に色値の最...
--.toString(16) は得られた 10進数を16進文字列に変換するメ...
--この for文では、カラーコードの文字列を6桁にするため、計...
--col.length は、16進文字列の文字列長を意味します。
--col = "0" + col; は、"0" と現在の文字列col を連結した...
--return の直前に "#" を連結しているので、最終的には以下...
#F32A45, #03C024, #0005F4, #004D3B ・・・など
~
''参考：rgb(r,g,b) 型の表記を生成するパターン''
「ランダムな色をつくる」部分について、rgb(r,g,b) 型の表記...
function randomColorRGB(){
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 randomColorRGB(){
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( ) と randomColorRGB( ) ...
~
~
**外部変数を理解する
JSファイルの中に書かれた関数はそれぞれ独立して動くので、...
では、''異なる複数の関数で同じ変数を参照したい''場合はど...
~
***事例７｜外部変数を使う
var 変数名 = 値; （ let 変数名 = 値; ）
''拡大・縮小、２つのボタンで文字サイズを変更する''事例で...
文字の倍率を意味する scale という変数が外部変数で、拡大・...
-HTML側に以下のコードを追加して下さい。
<h2>事例７｜外部変数を使う</h2>
<!-- 拡大用と縮小用のボタンを追加 -->
<input type="button" value="LARGE" onClick="enlarge();">
<input type="button" value="SMALL" onClick="reduce();">
<!-- 拡大・縮小のターゲット要素に id="ID07" を定義 -->
<p id="ID07">
Lorem Ipsum is simply dummy text of the printing and t...
Lorem Ipsum has been the industry's standard dummy tex...
1500s, when an unknown printer took a galley of type a...
to make a type specimen book.
</p>
-JS側に外部変数と２つの関数を追記して下さい
//外部変数の宣言・定義（以下２つの関数で共通して利用）
var scale = 100;
// 文字を拡大する関数
function enlarge(){
scale *= 1.25; // scale = scale * 1.25 と同義（現在...
var obj = document.getElementById('ID07');
obj.style.fontSize = scale + '%';
}
//文字を縮小する関数
function reduce(){
scale /= 1.25; // 現在のscaleを1.25で割る
var obj = document.getElementById('ID07');
obj.style.fontSize = scale + '%';
}
~
~
**ユーザー入力を利用する
ユーザー入力には input タグ の value 属性を用います。
~
***事例８｜ユーザー入力で色を変更する
''入力された色名を背景色に反映させる''事例を紹介します。
style プロパティを利用すると、当該要素の様々なCSSプロパテ...
-HTML側に以下のコードを追加して下さい。
<h2 id="ID08">ユーザー入力で背景色を変更</h2>
<form onsubmit="return false;">
<input id="COL" type="text" placeholder="Color Name">
<input type="button" onClick="ChangeBGColor()" value...
</form>
-JS側に以下のコードを追加して下さい。
// ユーザー入力でターゲット要素の背景色を変更
function ChangeBGColor() {
var obj = document.getElementById('ID08'); // ターゲッ...
var col = document.getElementById('COL'); // 入力
obj.style.backgroundColor = col.value;
}
-''補足解説''
--input type = "text"・・ とすることで、テキスト入力が可...
--placeholder は、テキスト入力エリアに初期表示される文字...
--col.value の value は当該オブジェクトが持つ「値」、すな...
~
***事例９｜ユーザー入力で文字列を差し替える
''入力された文字列を要素の内容に反映させる''事例です。
innner.HTML プロパティーを利用すると、ユーザーが入力した...
-HTML側に以下のコードを追加して下さい。
<h2 id="ID09">ユーザー入力で文字列を変更</h2>
<form onsubmit="return false;">
<input id="NAME" type="text" placeholder="Your Name">
<input type="button" onClick="ChangeContent()" value...
</form>
-JS側に以下のコードを追加して下さい。
// ユーザー入力でターゲット要素の文字列を変更
function ChangeContent(){
var m = document.getElementById('ID09'); // ターゲッ...
var n = document.getElementById('NAME'); // 入力
var res = 'こんにちは <b>' + n.value + '</b> さん';
m.innerHTML = res;
}
-補足解説
--onsubmit="return false;" は、ページをリロードさせないた...
--innerHTML プロパティは、当該要素の内部の記述を意味しま...
''付記''
ユーザーが入力した文字列を innerHTMLを使用して反映するの...
~
***事例10｜ユーザー入力で計算させる
XとYに値を入れてCALCボタンを押すと、かけ算の結果が表示さ...
-HTML側に以下のコードを追加して下さい。
<h2>掛け算フォーム</h2>
<form>
<input id="X" type="text" size="8" placeholder="INPU...
<input id="Y" type="text" size="8" placeholder="INPU...
<p>
<input id="ANS" type="text" size="12" placeholde...
<button type="button" onClick="Calc01()">乗算</b...
</p>
</form>
-JS側に以下のコードを追加して下さい。
// ２つの値を掛け算するプログラム
function Calc01() {
var ans = document.getElementById('ANS'); // ターゲ...
var x = document.getElementById('X'); // 入力１
var y = document.getElementById('Y'); // 入力２
ans.value =Number( x.value ) * Number( y.value );
}
-補足解説
--Number( ) は、値を「数値データ」として扱うことを強制す...
-＋演算の役割（加算または文字列連結）に注意
上記の掛け算処理は、以下の形式でも実現します。
ans.value = x.value * y.value;
しかし、 乗算 [ * ]ではなく加算 [ + ] だとどうなるか・・
ans.value = x.value + y.value; → 54 + 72 = 5472
つまり２つの数値の和ではなく、数字が連結されて出てしまい...
JavaScriptは、変数の型（数値か文字列か）の区別があいま...
したがって、数値の和として処理したい場合は、それを数値...
ans.value = Number(x.value) + Number(y.value);
~
***事例11｜計算処理の応用 for文を使った合計処理
''整数 xs から xe までの総和を求める''プログラムの事例で...
例えば 1 から 10 までの総和（ 1 + 2 + 3 +・・・+ 10 ）...
例えば 10 から 100 までの総和（10 + 11+ 12 +・・・+ 100 ...
-HTML側に以下のコードを追加して下さい。
<h2>総和を求める</h2>
<form>
最小値: <input id="XS" type="text"><br>
最大値: <input id="XE" type="text"><br>
<br>
総和 = <input id="ANS2" type="text">
<button type="button" onClick="Calc02()">総和</button>
</form>
-JS側に以下のコードを追加して下さい。
// 総和を求めるプログラム
function Calc02() {
var ans = document.getElementById('ANS2'); // ターゲッ...
var xs = document.getElementById('XS'); // 入力１
var xe = document.getElementById('XE'); // 入力２
// 変数 s に順次値を足し込む
var s = 0;
for(var i=Number(xs.value); i<=Number(xe.value); i++){
s = s + i;
}
ans.value = s;
}
-補足解説
--for 文は { } 内の処理を繰り返します。
--この例では、i の値が xs から xe まで、１つづつ増えなが...
--s = s + i; は、直前の s に i を加えたあと、その結果を改...
~
~
**JavaScript を HTML から完全に独立させる
ここまで、HTMLのタグ内に onClick() という記載をしてきまし...
そこで、HTMLタグ内には一切スクリプトは書かない・・という'...
イベントリスナーとは「御用聞き」のことで（古い日本語です...
~
***事例12｜イベントリスナーを使う
addEventListener( イベント名 , 関数名 , フェーズ );
''事例10 の計算をイベントリスナーを使って書き換えた''事例...
HTMLのタグに、onClick() を書くかわりに id="ID名''。これで...
-HTML側に以下のコードを追加して下さい。
<h2>イベントリスナーを使う</h2>
<form>
<input id="X3" type="text" size="8" placeholder="INPUT...
<input id="Y3" type="text" size="8" placeholder="INPUT...
<p>
<input id="ANS3" type="text" size="12" placeholder="...
<button id="CALC03" type="button">乗算</button>
</p>
</form>
-JS側に以下のコードを追加して下さい。
// クリックイベントに反応するイベントリスナーを定義
window.onload = function() {
var btn = document.getElementById('CALC03');
btn.addEventListener('click', Calc03, false);
}
// イベントハンドラー
function Calc03() {
var ans = document.getElementById('ANS3');
var x = document.getElementById('X3');
var y = document.getElementById('Y3');
ans.value =Number( x.value ) * Number( y.value );
}
-補足解説
--window.onload には「HTMLの読み込みがすべて終了した後に...
--addEventListener("click",CalcData,true); は、''click'' ...
-''付記：''addEventListener() の第３引数について
addEventListener()の第３引数は、useCaptureの設定で、イベ...
--true: Captureフェーズ
ルートオブジェクト（HTMLだとDocumentオブジェクト）からイ...
-- false: Targetフェーズ, あるいは Bubblingフェーズ
---Targetフェーズ：イベントが発生したオブジェクト上のイベ...
---Bubblingフェーズ：イベントが発生したオブジェクトの直接...
//Targetフェーズが普通の感覚なので、第３引数はほとんど fa...
~
~
**サンプル
***事例1-6
-DEMO：https://koichi-inoue.github.io/JS_Sample_01/
-CODE：https://github.com/koichi-inoue/JS_Sample_01
~
***事例7-12
-DEMO：https://koichi-inoue.github.io/JS_Sample_02/
-CODE：https://github.com/koichi-inoue/JS_Sample_02
~
***BOMを含めた事例
-DEMO：https://koichi-inoue.github.io/JS_Sample_03/
-CODE：https://github.com/koichi-inoue/JS_Sample_03
~
~
//***サンプル
//以下、上記事例の一部を含んだサンプルです。
//&ref(JavaScriptSamples.zip);
~
~
終了行:
*JavaScript 入門サンプル
~
はじめに、''このページの内容を学習すると何ができるように...
-事例1-6：https://koichi-inoue.github.io/JS_Sample_01
-事例7-12：https://koichi-inoue.github.io/JS_Sample_02
~
***CONTENTS
#contents2_1
~
**はじめての制御体験
ここでは、JavaScript によるページ内の要素の動的変更を体験...
Webサイトにおける JavaScript の主な役割は「ボタンクリック...
ページ内には様々な要素（Element）がありますが、それらを制...
ここでは、以下の４つの事例で、対象の捕らえ方と、動作指示...
-''document.body''
＞ ページ全体を命令の対象とする
-''document.getElementById( ID名 )''
＞ ID名が定義された要素を命令の対象とする
-''document.getElementsByClassName( クラス名 )''
＞ CLASS名が定義された要素を命令の対象とする
-''document.getElementsByTagName( タグ名 )''
＞ HTML要素（タグ）を命令の対象とする
~
ちなみに、IDとCLASS については、以下のことを再確認しまし...
-ID：ページの中に唯一の存在。同じ名前が複数存在してはいけ...
--ID名は、HTMLの中では、<h1 id="PageTitle"> のように書き...
--ID名は、CSSの中では、&color(red){''#''};PageTitle { } ...
-CLASS：ページの中に同じ名前が複数存在する場合に使います。
--CLASS名は、HTMLの中では、<p class="message"> のように書...
--CLASS名は、CSSの中では、&color(red){''.''};message { }...
~
***準備
JavaScript の基礎体験をするために 簡単なHTMLページを準備...
-デスクトップに ''SampleJS'' という名称のフォルダを作って...
~
-以下のコードを ''index.html'' として SampleJS フォルダに...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript Sample</title>
</head>
<body>
<header>
<h1>JavaScript Sample</h1>
</header>
<article>
ここに追加のコードを書き込んでいきます
</article>
<footer>
<p>https://www.example.com</p>
</footer>
</body>
</html>
この後、このファイルにHTMLのコードを追記していきます。
~
-以下の１行を 新規のファイルとして作成し、''script.js'' ...
// JavaScript Sample
この後、このファイルにJavaScriptのコードを追記していきま...
~
-''HTMLファイルと JavaScript ファイルを関連付けする''
HTMLファイルの <head> 部分に以下一行を加えてください。こ...
<script src="script.js"></script>
~
以上で、準備完了です。
JavaScript を正確に理解するには「文法」の知識が必要になる...
-[[JavaScript/Syntax]]
-[[JavaScript/BOM]]
-[[JavaScript/DOM]]
~
'''では、簡単な体験からはじめましょう。'''
~
***事例１｜ページにアクセスする
document.body
''ボタンをクリックすると背景色が red に変わる''という簡単...
-index.html の article の中に以下のコードを追記して下さい。
<h2>事例１｜ページにアクセスする</h2>
<button onClick="MyFunction01()" >Click Me !</button>
-script.js の先頭に以下のコードを追記して下さい。
// body の背景色を変える
function MyFunction01() {
var obj = document.body;
obj.style.backgroundColor = 'red';
}
-補足解説（今は、ざっくり理解程度でOKです）
--onClick= は ''ボタンクリックで MyFunction01 を呼び出す'...
--function ではじまるこのようなスクリプトを「関数」といい...
--JavaScriptでは''文末に [ ; ] をつけるのが基本ルールです...
--var obj は、obj という名称の「変数（Variable）」の準備...
「変数」は「データを入れる器」とイメージするとよいでしょ...
--document.body は HTML文書の body オブジェクト を指しま...
--obj = doc・・ の「=」は、右辺のデータを左辺に渡すこと...
--style.backgroundColor は、スタイルプロパティ.背景色を指...
-動作確認
このHTMLをブラウザで表示して、ボタンをクリックすると、bod...
--ボタンをクリック
--MyFunction01() が呼び出される
--変数 obj に body オブジェクトがセットされる（相手が捕ま...
--obj のスタイル.背景色 に red がセットされる
-補足解説：「関数」について
関数とは、function で始まるプログラムのことで、{ } の中...
--関数はどこに書く？
関数は一般に JavaScript ファイル（xxxx.js）の中に書きます...
--関数の名前の付け方は？
function の直後に書く関数の名前（MyFunction01など）は自由...
一般に「動詞＋目的語」のパターンでネーミングします。以...
色を変える ＞ ChangeColor
~
'''以下、続けて事例を追加しますが、ファイルを新規につくる...
~
***事例２｜ID要素にアクセスする
document.getElementById( ID名 ) ← ID要素を捕まえます。
''ボタンをクリックするとID要素の背景色が yellow に変わる'...
-HTML側に以下のコードを追加して下さい。
<h2 id="ID01">事例２｜ID要素にアクセスする</h2>
<button onClick="MyFunction02()" >Click Me!</button>
-JS側に以下のコードを追加して下さい。
// ID要素の背景色を変える
function MyFunction02(){
var obj = document.getElementById('ID01');
obj.style.backgroundColor = 'yellow';
}
~
***事例３｜CLASS要素にアクセスする
document.getElementsByClassName( クラス名 )
getElement ではなく getElement''s'' と複数形であることに...
''ボタンクリックで CLASS要素の背景色が green に変わる''と...
ページ内に複数存在する同一の要素すべてに何らかの処理を施...
以下の例では、すべてのリスト項目の行の背景が green になり...
-HTML側に以下のコードを追記して下さい。
<h2>事例３｜CLASS要素にアクセスする</h2>
<button onClick="MyFunction03()" >Click Me !</button>
<ul>
<li class="Class01">A</li>
<li>B</li>
<li class="Class01">C</li>
<li>D</li>
<li class="Class01">E</li>
<li>F</li>
<li class="Class01">G</li>
</ul>
複数の li 要素に class="Class01" が追記されていることが重...
-JS側に以下のコードを追記して下さい。
// CLASS要素の背景色を変える
function MyFunction03(){
// Class01の把握（情報が line[0], line[1] ,line[2]・...
var lines = document.getElementsByClassName('Class01...
// i 番目の pタグ部分の背景を green に
for( var i=0; i<lines.length; i++ ){
lines[i].style.backgroundColor = 'green';
}
}
-補足解説
--document.getElement''s''ByClassName メソッドは、クラス...
--for( 初期条件; 繰り返し条件; ステップ ) { 処理 } は、一...
--lines.length は、配列 lines[ ] の要素数を意味します。
~
***事例４｜HTML要素にアクセスする
document.getElementsByTagName( タグ名 )
getElement ではなく getElement''s'' と複数形であることに...
''ボタンクリックで HTML要素の背景色が blue に変わる''とい...
p タグ部分の背景を red にするには、body の背景を赤にした...
document.p.style.backgroundColor = "red"; ← これは正し...
document.body の body はページに１つだけの特別なものです...
-HTML側に以下のコードを追記して下さい。
<h2>事例４｜HTML要素にアクセスする</h2>
<button onClick="MyFunction04()" >Click Me !</button>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specime...
</p>
-JS側に以下のコードを追記して下さい。
// HTML要素の背景色を変える
function MyFunction04() {
// pタグの把握（複数の情報が obj[0], obj[1] ,obj[2]・...
var obj = document.getElementsByTagName("p");
// pタグの存在する数だけ処理をくりかえす
for( var i=0; i<obj.length; i++ ) {
// i 番目の pタグ部分の背景を blue に
obj[ i ].style.backgroundColor = "blue";
}
}
~
''参考：querySelector の利用''
document.querySelector（単品セレクト） や document.queryS...
~
~
**関数を効率的に作る
例えば R,G,B ３つのボタンで、背景色をそれぞれ変更するには...
-HTML側
<ul>
<li><button onClick="MyFunctionR()">RED</button></li>
<li><button onClick="MyFunctionG()">GREEN</button></li>
<li><button onClick="MyFunctionB()">BLUE</button></li>
</ul>
-JS側
function MyFunctionR(){
var obj = document.body;
obj.style.backgroundColor = 'red';
}
function MyFunctionG(){
var obj = document.body;
obj.style.backgroundColor = 'green';
}
function MyFunctionB(){
var obj = document.body;
obj.style.backgroundColor = 'blue';
}
~
ただし、この例では３つの同じようなプログラムが３回も記述...
~
***事例５｜引数を使う
function 関数名( 引数 ) { 処理 }
''ひとつの関数で複数の処理に対応する''という事例です。
''引数（ひきすう）''とは、関数実行時に呼び出し側が関数に...
背景色を変更せよ（赤色で）;
のような形式で「赤色で」の部分を変数化して、その値を処理...
-HTML側 に以下のコードを追加して下さい。
<h2>事例５｜引数の利用</h2>
<ul>
<li><button onClick="MyFunction05('red')">RED</button...
<li><button onClick="MyFunction05('green')">GREEN</bu...
<li><button onClick="MyFunction05('blue')">BLUE</butt...
</ul>
-JS側 に以下のコードを追加して下さい。
// 引数を用いた背景色の変更
function MyFunction05( col ){
var obj = document.body;
obj.style.backgroundColor = col;
}
例えば最初のボタンがクリックされると、関数 MyFunction05()...
~
***事例６｜汎用性のある関数を用意する
function 関数名( 引数 ){ 汎用性のある処理 };
''ボタンクリックのたびにページの背景色がランダムに変わる'...
この機能は「ページの背景色を変える」という親機能（メイン...
-HTML側に以下のコードを追加して下さい。
<h2>事例６｜汎用性のある関数を用意する</h2>
<button onClick="MyFunction06()" >Click Me!</button>
-JS側に以下のコードを追加して下さい。
//ランダムな16進6桁のカラーコードを生成（汎用性のある関...
function randomColor(){
var col = Math.floor( Math.random() * 0xFFFFFF ).toS...
for( var i = col.length; i<6; i++ ) { col = '0' + co...
return '#' + col;
}
// 背景色の変更
function MyFunction06( ){
var obj = document.body;
obj.style.backgroundColor = randomColor();
}
-補足解説
--Math.floor() メソッドは、引数の値以下となる最大の整数を...
--Math.random() メソッドは、0.0 - 1.0 の範囲の乱数を発生...
--0xFFFFFF を乗算しているのは、最大値1.0 の乱数に色値の最...
--.toString(16) は得られた 10進数を16進文字列に変換するメ...
--この for文では、カラーコードの文字列を6桁にするため、計...
--col.length は、16進文字列の文字列長を意味します。
--col = "0" + col; は、"0" と現在の文字列col を連結した...
--return の直前に "#" を連結しているので、最終的には以下...
#F32A45, #03C024, #0005F4, #004D3B ・・・など
~
''参考：rgb(r,g,b) 型の表記を生成するパターン''
「ランダムな色をつくる」部分について、rgb(r,g,b) 型の表記...
function randomColorRGB(){
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 randomColorRGB(){
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( ) と randomColorRGB( ) ...
~
~
**外部変数を理解する
JSファイルの中に書かれた関数はそれぞれ独立して動くので、...
では、''異なる複数の関数で同じ変数を参照したい''場合はど...
~
***事例７｜外部変数を使う
var 変数名 = 値; （ let 変数名 = 値; ）
''拡大・縮小、２つのボタンで文字サイズを変更する''事例で...
文字の倍率を意味する scale という変数が外部変数で、拡大・...
-HTML側に以下のコードを追加して下さい。
<h2>事例７｜外部変数を使う</h2>
<!-- 拡大用と縮小用のボタンを追加 -->
<input type="button" value="LARGE" onClick="enlarge();">
<input type="button" value="SMALL" onClick="reduce();">
<!-- 拡大・縮小のターゲット要素に id="ID07" を定義 -->
<p id="ID07">
Lorem Ipsum is simply dummy text of the printing and t...
Lorem Ipsum has been the industry's standard dummy tex...
1500s, when an unknown printer took a galley of type a...
to make a type specimen book.
</p>
-JS側に外部変数と２つの関数を追記して下さい
//外部変数の宣言・定義（以下２つの関数で共通して利用）
var scale = 100;
// 文字を拡大する関数
function enlarge(){
scale *= 1.25; // scale = scale * 1.25 と同義（現在...
var obj = document.getElementById('ID07');
obj.style.fontSize = scale + '%';
}
//文字を縮小する関数
function reduce(){
scale /= 1.25; // 現在のscaleを1.25で割る
var obj = document.getElementById('ID07');
obj.style.fontSize = scale + '%';
}
~
~
**ユーザー入力を利用する
ユーザー入力には input タグ の value 属性を用います。
~
***事例８｜ユーザー入力で色を変更する
''入力された色名を背景色に反映させる''事例を紹介します。
style プロパティを利用すると、当該要素の様々なCSSプロパテ...
-HTML側に以下のコードを追加して下さい。
<h2 id="ID08">ユーザー入力で背景色を変更</h2>
<form onsubmit="return false;">
<input id="COL" type="text" placeholder="Color Name">
<input type="button" onClick="ChangeBGColor()" value...
</form>
-JS側に以下のコードを追加して下さい。
// ユーザー入力でターゲット要素の背景色を変更
function ChangeBGColor() {
var obj = document.getElementById('ID08'); // ターゲッ...
var col = document.getElementById('COL'); // 入力
obj.style.backgroundColor = col.value;
}
-''補足解説''
--input type = "text"・・ とすることで、テキスト入力が可...
--placeholder は、テキスト入力エリアに初期表示される文字...
--col.value の value は当該オブジェクトが持つ「値」、すな...
~
***事例９｜ユーザー入力で文字列を差し替える
''入力された文字列を要素の内容に反映させる''事例です。
innner.HTML プロパティーを利用すると、ユーザーが入力した...
-HTML側に以下のコードを追加して下さい。
<h2 id="ID09">ユーザー入力で文字列を変更</h2>
<form onsubmit="return false;">
<input id="NAME" type="text" placeholder="Your Name">
<input type="button" onClick="ChangeContent()" value...
</form>
-JS側に以下のコードを追加して下さい。
// ユーザー入力でターゲット要素の文字列を変更
function ChangeContent(){
var m = document.getElementById('ID09'); // ターゲッ...
var n = document.getElementById('NAME'); // 入力
var res = 'こんにちは <b>' + n.value + '</b> さん';
m.innerHTML = res;
}
-補足解説
--onsubmit="return false;" は、ページをリロードさせないた...
--innerHTML プロパティは、当該要素の内部の記述を意味しま...
''付記''
ユーザーが入力した文字列を innerHTMLを使用して反映するの...
~
***事例10｜ユーザー入力で計算させる
XとYに値を入れてCALCボタンを押すと、かけ算の結果が表示さ...
-HTML側に以下のコードを追加して下さい。
<h2>掛け算フォーム</h2>
<form>
<input id="X" type="text" size="8" placeholder="INPU...
<input id="Y" type="text" size="8" placeholder="INPU...
<p>
<input id="ANS" type="text" size="12" placeholde...
<button type="button" onClick="Calc01()">乗算</b...
</p>
</form>
-JS側に以下のコードを追加して下さい。
// ２つの値を掛け算するプログラム
function Calc01() {
var ans = document.getElementById('ANS'); // ターゲ...
var x = document.getElementById('X'); // 入力１
var y = document.getElementById('Y'); // 入力２
ans.value =Number( x.value ) * Number( y.value );
}
-補足解説
--Number( ) は、値を「数値データ」として扱うことを強制す...
-＋演算の役割（加算または文字列連結）に注意
上記の掛け算処理は、以下の形式でも実現します。
ans.value = x.value * y.value;
しかし、 乗算 [ * ]ではなく加算 [ + ] だとどうなるか・・
ans.value = x.value + y.value; → 54 + 72 = 5472
つまり２つの数値の和ではなく、数字が連結されて出てしまい...
JavaScriptは、変数の型（数値か文字列か）の区別があいま...
したがって、数値の和として処理したい場合は、それを数値...
ans.value = Number(x.value) + Number(y.value);
~
***事例11｜計算処理の応用 for文を使った合計処理
''整数 xs から xe までの総和を求める''プログラムの事例で...
例えば 1 から 10 までの総和（ 1 + 2 + 3 +・・・+ 10 ）...
例えば 10 から 100 までの総和（10 + 11+ 12 +・・・+ 100 ...
-HTML側に以下のコードを追加して下さい。
<h2>総和を求める</h2>
<form>
最小値: <input id="XS" type="text"><br>
最大値: <input id="XE" type="text"><br>
<br>
総和 = <input id="ANS2" type="text">
<button type="button" onClick="Calc02()">総和</button>
</form>
-JS側に以下のコードを追加して下さい。
// 総和を求めるプログラム
function Calc02() {
var ans = document.getElementById('ANS2'); // ターゲッ...
var xs = document.getElementById('XS'); // 入力１
var xe = document.getElementById('XE'); // 入力２
// 変数 s に順次値を足し込む
var s = 0;
for(var i=Number(xs.value); i<=Number(xe.value); i++){
s = s + i;
}
ans.value = s;
}
-補足解説
--for 文は { } 内の処理を繰り返します。
--この例では、i の値が xs から xe まで、１つづつ増えなが...
--s = s + i; は、直前の s に i を加えたあと、その結果を改...
~
~
**JavaScript を HTML から完全に独立させる
ここまで、HTMLのタグ内に onClick() という記載をしてきまし...
そこで、HTMLタグ内には一切スクリプトは書かない・・という'...
イベントリスナーとは「御用聞き」のことで（古い日本語です...
~
***事例12｜イベントリスナーを使う
addEventListener( イベント名 , 関数名 , フェーズ );
''事例10 の計算をイベントリスナーを使って書き換えた''事例...
HTMLのタグに、onClick() を書くかわりに id="ID名''。これで...
-HTML側に以下のコードを追加して下さい。
<h2>イベントリスナーを使う</h2>
<form>
<input id="X3" type="text" size="8" placeholder="INPUT...
<input id="Y3" type="text" size="8" placeholder="INPUT...
<p>
<input id="ANS3" type="text" size="12" placeholder="...
<button id="CALC03" type="button">乗算</button>
</p>
</form>
-JS側に以下のコードを追加して下さい。
// クリックイベントに反応するイベントリスナーを定義
window.onload = function() {
var btn = document.getElementById('CALC03');
btn.addEventListener('click', Calc03, false);
}
// イベントハンドラー
function Calc03() {
var ans = document.getElementById('ANS3');
var x = document.getElementById('X3');
var y = document.getElementById('Y3');
ans.value =Number( x.value ) * Number( y.value );
}
-補足解説
--window.onload には「HTMLの読み込みがすべて終了した後に...
--addEventListener("click",CalcData,true); は、''click'' ...
-''付記：''addEventListener() の第３引数について
addEventListener()の第３引数は、useCaptureの設定で、イベ...
--true: Captureフェーズ
ルートオブジェクト（HTMLだとDocumentオブジェクト）からイ...
-- false: Targetフェーズ, あるいは Bubblingフェーズ
---Targetフェーズ：イベントが発生したオブジェクト上のイベ...
---Bubblingフェーズ：イベントが発生したオブジェクトの直接...
//Targetフェーズが普通の感覚なので、第３引数はほとんど fa...
~
~
**サンプル
***事例1-6
-DEMO：https://koichi-inoue.github.io/JS_Sample_01/
-CODE：https://github.com/koichi-inoue/JS_Sample_01
~
***事例7-12
-DEMO：https://koichi-inoue.github.io/JS_Sample_02/
-CODE：https://github.com/koichi-inoue/JS_Sample_02
~
***BOMを含めた事例
-DEMO：https://koichi-inoue.github.io/JS_Sample_03/
-CODE：https://github.com/koichi-inoue/JS_Sample_03
~
~
//***サンプル
//以下、上記事例の一部を含んだサンプルです。
//&ref(JavaScriptSamples.zip);
~
~
ページ名:
