配列と関数

配列：Array

  • 複数の値に順番を付けてまとめて扱う方法
インデックス
  • 何番目の値か識別するための番号
  • １ではなく「0」から始まる
  • 配列内にいくつの変数があるかわかる（lengthプロパティ）
  • 最初に追加したり、最後から削除する（pop()、push()メソッド）
新しい配列をつくる

[ ]を使う
以下では、変数「list」に配列を格納しています。

list = ['HTML', 'CSS', 'JavaScript']


Array()、new演算子を使う

list = Array('HTML', 'CSS', 'JavaScript');
list = new Array('HTML', 'CSS', 'JavaScript');
配列内のデータにアクセスする
first = list [0];  //'HTML'がfirstに代入される
list [0] = 'HTML5';  //list配列は['HTML5','CSS','JavaScript']になる。


値が存在しない番号に代入することで、配列に追加することもできます。

list [3] = 'DOM';  //list配列は['HTML5', 'CSS', 'JavaScript', 'DOM']になる。


※JavaScript における new 演算子


関数：function

  • functionとは命令をグループ化し、何度でも繰り返し使えるようにするもの
文法

functionを定義するには以下のような文法で記述します。



function ファンクション名（引数）｛
　命令文；
｝

グループ化
function myFunction() {
    var myHeader = document.getElementById( 'header' ).style;
    myHeader.width ="760px";
}

おみくじ

DOM操作のメソッド
  • DOMツリー：HTMLドキュメントの階層構造
  • DOMツリー内の個々の要素を「ノード」と呼びます
ノードを取得するgetElementByIdメソッド
  • 「IDがmyArea」のdivエレメントでノードを取得して変数に代入
  • あらかじめid属性を指定しておく必要があります
ノードにHTMLを設定するinnerHTMLプロパティ
  • innerHTMLの値を変更することにより、ノードのHTMLを動的に変更できます
<script>
var myArea = document.getElementById('myArea');
myArea.innerHTML = '<h2>ノードにHTMLを設定する</h2>'
</script>
関数について
<script>
function unsei(){
  var myArea = document.getElementById('myArea');
  var num = Math.floor(kuji.length * Math.random());
  myArea.innerHTML = kuji[num];
}
</script>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMによるおみくじ</title>
<style>
body {
	text-align: center;
}
#myArea {
 width: 500px;
 margin: 20px auto;
 padding: 8px;
	background: #F60;
 color: #FFF;
 font-size: 200%;
}
p {
 margin: 0;
 padding: 0;
}
</style>
<script>
var kuji = new Array(4);
kuji[0] = '大吉';
kuji[1] = '中吉';
kuji[2] = '小吉';
kuji[3] = '凶';

function unsei(){
//IDが「myArea」のノードを取得し、変数myAreaに代入
  var myArea = document.getElementById('myArea'); 
//0から「要素数-1」までの整数をランダムに生成して、変数numに代入
  var num = Math.floor(kuji.length * Math.random()); 
//配列「kuji」の要素を代入して、表示されるメッセージを更新
  myArea.innerHTML = kuji[num]; 
}
</script>
</head>
<body>
<h1>今日の運勢</h1>
<form>
<p>
<input type="button" value="占う" onclick="unsei();">
</p>
</form>
<div id="myArea">
<p>今日はどんな運勢でしょう？</p>
</div>
</body>
</html>
まとめ
  • DOMを使用すると、HTMLの任意の要素にアクセスできる
  • getElementByIdメソッド：指定したIDのノードを取り出su
  • innerHTML：ノードのHTMLを変更する