[Work/Class/Web基礎/js_basic]

JavaScriptの基礎 ページ遷移を伴わない書き換え

divのidを取得し,中身を書き換える

<div id="hogehoge">
  <p>
    色々ナンタラカンタラ
  </p>
</div>

というdiv指定がある時,

document.getElementById("取得したいdivのid名")

という命令文でこのdivを取得し,そこに

取得したdiv.innerHTML = "書き換える内容のhtml文";

と書くことで,ページ遷移をともなわずに,divの内容を書き換えることができる.

命令文をまとめると

document.getElementById("書き換える対象のdivのid名").innerHTML = 
   "<p>書き換える内容をhtmlコードで指定</p>";

となる.

HTMLファイルとJavaScriptファイルを別にした具体的な例を示す.→動作確認ページ

htmlファイル「231_JSBasic_RewriteInnerHTML.html」は以下の通り.

<!DOCTYPE html>
<!-- 231_JSBasic_RewriteInnerHTML.html -->

<html lang="ja">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8" />
	<title>JavaScriptの基礎 innerHTMLで書き換える.</title>

	<script type="text/javascript" src="./231_JSBasic_RewriteInnerHTML.js" >
	</script>
</head>
<body>

  <input type="button" value="ボタンを押したら書き換え" onclick="onClickButton();" />

  <div id="RewritingDiv">
    <p>
      ここが書き換わります.
    </p>
  </div>

</body>
</html>

対応する「231_JSBasic_RewriteInnerHTML.js」は以下の通り.

/* 231_JSBasic_RewriteInnerHTML.js */
function onClickButton(){
    document.getElementById("RewritingDiv").innerHTML="<p><strong>書き換えました!</strong></p>";
}

カウンタを使って複数回書き換える

数を数える変数(カウンタ変数と呼ぶ)を使って,何回変更したかを数えておくことで,複数回異なる書き換えを行うことができる.→動作確認ページ

htmlファイル「232_JSBasic_RewriteInnerHTML_MultiTimes.html」は以下の通り.(htmlファイルの内容は前と変わっていない.読み出すJavaScriptファイルが変わっているだけ)

<!DOCTYPE html>
<!-- 232_JSBasic_RewriteInnerHTML_MultiTimes.html -->

<html lang="ja">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8" />
	<title>JavaScriptの基礎 innerHTMLで何回も書き換える.</title>

	<script type="text/javascript" src="./232_JSBasic_RewriteInnerHTML_MultiTimes.js">
	</script>
</head>
<body>

  <input type="button" value="ボタンを押したら書き換え" onclick="onClickButton();" />

  <div id="RewritingDiv">
    <p>
      ここが書き換わります.
    </p>
  </div>

</body>
</html>

対応するJavaScriptファイル「JSBasic32_RewriteInnerHTML_MultiTimes.js」は以下の通り.

/* 232_JSBasic_RewriteInnerHTML_MultiTimes.js */
var buttonCounter = 0; //カウンタ変数
function onClickButton(){
    if(buttonCounter == 0){
	document.getElementById("RewritingDiv").innerHTML =
	    "<p>最初の書き換え</p>";
	buttonCounter++;
    }
    else if(buttonCounter == 1){
	document.getElementById("RewritingDiv").innerHTML =
	    "<p>2回目の書き換え</p>";
	buttonCounter++;
    }
    else if(buttonCounter == 2){
	document.getElementById("RewritingDiv").innerHTML =
	    "<p>3回目の書き換え.<br />最初に戻ります.</p>";
	buttonCounter = 0;
    }
}

function指定の外にカウンタ変数を宣言し0を入れておき,関数が呼ばれるたびにカウンタ変数を一つ増やす(「変数名++;」は整数の変数1増やす意味の命令.ポストインクリメント,もしくは単にインクリメントと呼ぶ).2回目の書き換えではカウンタ変数の中身を0に戻すことで,ループさせている.

画像を置き換える

innerHTMLを使って画像を置き換える例を以下に示す.→動作確認ページ

フラグ変数imgFlagの中身を0と1で切り替えて,GoogleロゴとYahooロゴを交互に表示している.このように状態が0と1とで交互に入れ替わる変数のことをトグル(toggle)変数,トグルスイッチなどと呼称する.

ダブルクォーテーションとシングルクォーテーションの使い方に注意.innerHTMLに代入するHTMLコードの中身でダブルクォーテーションを使い,HTML全体を括るのはシングルクォーテーションを使うのが,他言語のトレンドと合わせた最近の作法の模様.

htmlファイル「233_JSBasic_RewriteInnerHTML_ReplaceImg.html」は以下の通り.

<!DOCTYPE html>
<!-- 233_JSBasic_RewriteInnerHTMLReplaceImg.html -->

<html lang="ja">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8" />
  <title>JavaScriptの基礎 innerHTMLで画像を置き換える</title>

  <script type="text/javascript" src="./233_JSBasic_RewriteInnerHTML_ReplaceImg.js">
  </script>
</head>
<body>

  <input type="button" value="ボタンを押したら書き換え" onclick="onClickButton();" />

  <div id="RewritingDiv">
    <img src="https://www.google.co.jp/images/srpr/logo11w.png" alt="Googleロゴ" />
  </div>

</body>
</html>

対応するJavaScriptファイル「233_JSBasic_RewriteInnerHTML_ReplaceImg.js」は以下の通り.

/* 233_JSBasic_RewriteInnerHTML_ReplaceImg.js */
var imgFlag = 0;
function onClickButton(){
    if(imgFlag == 0){
	document.getElementById("RewritingDiv").innerHTML =
	    '<img src="http://k.yimg.jp/images/top/sp2/cmn/logo-ns-131205.png" alt="Yahooのロゴ" />';
	imgFlag = 1;
    }
    else{ //imgFlagが0以外の時
	document.getElementById("RewritingDiv").innerHTML =
	    '<img src="https://www.google.co.jp/images/srpr/logo11w.png" alt="Googleのロゴ" />';
	imgFlag = 0;
    }

}