[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;
    }

}