javascript 変数と配列の書き方入門

2014-08-05

前回はjavascriptの読み込み方について確認しました。

ここではjavascriptの変数と配列の書き方、使い方をまとめまていきます。

javascriptの変数の書き方・使い方

まずは変数の書き方。他の言語と同じなので、既にPHPなどを使ったことがあるなら簡単にわかるところなのでさくっといきましょう。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic Jacvascript</title>
</head>
<body>
  <h1>Hello</h1>
  <p>this is Paragraph</p>

  <p id="total"></p>

  <p id="message"></p>

  <p id="link"></p>

  <p id="color"></p>

  <script src="js/basic-var.js"></script>
</body>
</html>

このHTMLに数字、文字列、HTMLタグを入れていきます。操作の流れはこんな感じ。

変数を定義
変数に値を入れる
挿入したい場所を指定
その場所へ変数を入れる

Number

//variables
var price;
var quantity;
var total;

price = 100;
quantity = 3;
total = price * quantity;

var element = document.getElementById('total');
element.innerHTML = total;

String

//string
var user_name;
var message;

user_name = 'Yamada';
message = 'Good evening!';

var element = document.getElementById('message');
element.innerHTML = 'Hi' + user_name + message;

HTML Tags

//tag
var link;

link = '<a href=\"#\">more</a>';

var element = document.getElementById('link');
element.innerHTML = link;

これらをブラウザで表示すると以下のようになります。

javascriptの配列の書き方・使い方

配列も他の言語と同じ。配列は変数と違い複数の値（例えばクラスの名簿など）を入れることができるもの。データベースを扱う際は基本的に配列やオブジェクトの形で取り出します。

配列の作り方はこんな感じ。横一列で書いても、縦に書いてもOK。配列の特定の値を取り出すには[]の中に取り出したい位置を記述。配列の位置は0から始まって+1ずつ増加します。

また、for文を使うことですべての値を取り出すことも可能。

//array
var colors = ['white','red','blue','green','black'];

//other
var colors = ['white',
              'red',
              'blue',
              'green',
              'black'];

//get array item
var blue = colors[2];

var element = document.getElementById('color');
element.innerHTML = blue;


//get all item
for (var i = 0; i < colors.length; i++) {
  document.write(colors[i] +'<br>');
}

これをブラウザで表示すると以下のようになります。