JavaScript基本

Contents

1 記述方法
2 スクリプトの記述場所
- 2.1 ページ内に記述
- 2.2 スクリプトファイルに記述
3 結果
4 要約

記述方法

<head></head>内か、<body></body>内に記述します。

スクリプトの記述場所

ページ内に記述

例）h1の文言を変える

    <div id="doc3" class="yui-t1">
      <div id="hd">
        <h1>ページ ヘッダー</h1>
      </div>
      <div id="bd">
        <div id="yui-main">
          <div class="yui-b">
            <div class="yui-g">
              <div class="yui-u first">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                  Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
                  in, rhoncus quis, dui. Aliquam erat volutpat.</p>
		<script>
			var myHeading = document.querySelector('h1');
			myHeading.textContent = 'Hello world!123';
		</script>

<h1>ページヘッダー</h1>

</div>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor

in, rhoncus quis, dui. Aliquam erat volutpat.</p>

var myHeading = document.querySelector('h1');

myHeading.textContent = 'Hello world!123';

</script>

スクリプトファイルに記述

ファイル内関数を呼び出す事によりスクリプトを動かす事ができます。

例）ボタンを押下するとgetListText()スクリプトが動く（id=”ft”の場所に結果を出力する）

    <script type="text/javascript" src="./startjs/start.js"></script><!-- 相対パス,or 絶対パスで指定(http://....) -->
  </head>
・・・・・
		<ul id="sakanaNodes">
		  <li><strong>いわし</strong></li>
		  <li></li>
		  <li><em>あじ</em></li>
		  <li><a href="#">くじら</a></li>
		  <li></li>
		</ul>

		<form action="#">
		  <input type="button" value="テキストを取得" onclick="fGetListText()" />
		</form>

                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                  Maecenas sit amet metus.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="yui-b">ナビゲーション</div>
      </div>
	
      <div id="ft">
        <p>フッター</p>
      </div>

</head>

・・・・・

</ul>

</form>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Maecenas sit amet metus.</p>

</div>

<div class="yui-b">ナビゲーション</div>

</div>

</div>

./startjs/start.js

function fGetListText(){
    var s="";
    var parentObj=document.getElementById("sakanaNodes");
    for(var i in parentObj.childNodes){
        var childObj=parentObj.childNodes[i];
        if(childObj.nodeName=="LI"){
                  s+="innerText: "+childObj.innerText+"<br>";
        }
    }
    document.getElementById("ft").innerHTML=s;
}