shokolog.com

Study HTML5 & JavaScript (2) – Slide Show App

本日もJavaScriptとHTML5のお勉強です。

今日は、「スライドショー」Appをコンプリートしました。

再生ボタンを押すと、

壮大なクラシック音楽が流れながら画像が見れる、

と結構シュールなサンプルでした。

サンプルそのままの素材とGUIなので、オシャな感じではないですが、

まず先にコードを書いて覚える、ということを重きに学習しました。

 

昨日からやたらと書いていて

document.getElementById(“IDの名前〇〇”); //指定IDの取得

が出てくるので要注意です。

JavaScriptからHTML5のIDを読み取る、

という両コードの橋渡し的な役割なのでよく出てくるようです。

以下、学習内容とメモです。

—

・サムネイル画像をクリックすると画像が表示されるビューアーの作成

function 関数名 (imageNo){
}

引数imageNoに、表示したい画像番号を渡す

document.getElementById(“ID名〇〇”).src = 配列名〇〇[imageNo];

メイン画像の切替

（指定IDのsrcにアクセスし、配列に入れておいた画像を呼び出して表示）

配列 = document.getElementByClassName(“クラス名〇〇”)

クラス名〇〇を元にエレメントを取得（全てのサムネール画像要素の取得）

DOM要素.classList.remove(“取り除くクラス名〇〇”)

slectクラスを削除する

DOM要素.classList.add(“追加するクラス名〇〇”)

slectクラスを追加する（選択されたサムネール画像にslectクラスを追加）

onClick = “・・・”

マウスが押されたら関数〇〇を実行する

 

・スライドショー（タイマーを使って画像を順に切替）

<button type=”button”>

　ボタンに表示するラベル

</button>

ボタンの作成（<imput>タグでもボタンはつくれるが、<button>方が

ボタンのテキストを複雑に変更できたり画像を貼り付けたりできる）

clearInterval(タイマー変数名)

インターバルタイマーをクリアする（setInterval関数で開始したタイマーは、

生成されたタイマー変数をclearInterval関数に渡して止めることが出来る）

 

・音楽データの再生・一時停止・停止

<audio src=”音楽データファイル” controls autoplay loop></audio>

src : 再生する音楽データファイルを指定

controls : 再生/一時停止、ボリュームなどを操作するコントロールバーが表示

autoplay : ページを開いたときに自動的に再生を開始

loop : 繰り返し再生

<audio controls autoplay loop>

<source src=”音楽データファイル1″></source>

<source src=”音楽データファイル2″></source>

<source src=”音楽データファイルn”></source>

</audio>

*再生できるファイル形式がwebブラウザーによって異なるので、

AUDIOタグだけでは全ての環境に対応することが出来ない

よって、複数のファイル形式を記述できるSOURCEタグも一緒に書く

要素.play()

音楽・動画データの再生

要素.pause()

音楽・動画データの一時停止

要素.load()

音楽・動画データの再読み込み / 音楽・動画データの停止

 

・スライダーバーによる音楽ボリュームの変更

<input type=”range” id=”ID” value=”初期値” min=”最小値” max=”最大値” step=”間隔”> 

レンジ入力欄（スライダーバー）の作成

id : 要素を特定するためのIDを指定

value : 初期値の指定

min : 最小値の指定（省略時は0）

max : 最大値の指定（省略時は100）

step : 数値の間隔を指定(省略時は1)

*現在、Chrome、Safari、Operaブラウザーに対応

要素.volume

ボリュームの変更

onChange = “・・・”

スライダーが変化したときに発生するイベント

disabledプロパティ

一度だけしか押せないボタン作成時に使用

ex.) document.getElementById(“buttonStart”).disabled = false;

（ボタンの有効化 false）

無効にしたボタンを再度クリック可能にする

—

1回勉強したら 絶対に忘れない脳みそがほしいです。