2013/07/24

基礎から学べるJavaScript!【変数】と【演算子】

今日からアナタもプログラマー!?Web初心者のためのJavaScript入門編

JavaScriptを使ってプログラミングする際の基本的なコトを、

  • 「HTMLとCSSを使ってデザインは出来るけど、JavaScriptはまったく解らない!」
  • 「JavaScriptを使って、もっと動きのあるサイトを作りたい!」
  • 「これからWebプログラマーを目指したい!」

という方のために説明していきます。

目次

JavaScriptって?

JavaScriptとはWebブラウザ上で動作するプログラミング言語の事を言います。
Webページを読み込んだ際に、ブラウザ上で処理を実行する仕組みになっていて、処理を行う手順が書かれたものを"プログラム"や"ソースコード"などと呼びます。

実際にJavaScriptのソースコードを書く上で最低限必要なものは、

  • ・テキストエディタ
  • ・Webブラウザ

この二つだけです。

メモ帳と今ご覧になっているWebブラウザでも出来ますし、自分の使いやすいもので構いません。
ちなみに私は普段TeraPadとGoogle Chromeを使っていますので、サンプル画像はGoogle Chromeでの実行結果となります。

実際のソースコード

それでは実際にソースコードがどんなものか見ていきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Sample1</title>
<script type="text/javascript">
        function hello(){
                var x;
                x = "Hello World!!"
                alert(x);
        }
</script>
</head>
<body>
<input type="button" value="Sample1" onclick="hello()"/>
</body>
</html>

ソースコードだけ見ても何が起きるのかまったく解らないと思います。
実際に上のソースコードをコピペやテキストエディタで入力するなどして、html形式で保存した後、ブラウザで開いてみてください。


このようなボタンが表示されたかと思います。(実際に動くので押してみよう!)

ではSampleというボタンを押してみましょう。

という画像が表示されたかと思います。
ボタンが押されるとHello World!!と表示されるだけの簡単なプログラムですね。

ではまず、ソースコードについて説明します。
JavaScriptのソースコードは、html文の<script>タグで囲まれた、

<script type="text/javascript">
...	
</script>

の中に記述します。
そして、JavaScriptのソースコードを書く上での基本原則として、

  • ・ひとつの仕事の単位を文(statement)と呼び、最後に;をつけます。
  • ・1行目の文から順に処理が実行されます。

次に、ソースコードにはどんな事が書かれているのか、中身を詳しく見てみましょう。

function hello(){
		var x;
		x = "Hello World!!"
		alert(x);
	}
...
<input type="button" value="Sample1" onclick="hello()" />

一つ目の文は、

var x;

"変数を宣言する"という処理です。
変数を宣言するということは、"コンピュータ内部に文字列を格納する場所を用意する"という様なイメージです。
入力された文章や数値などのデータを取り扱うには、コンピュータにデータを記憶していてもらわなければなりません。その場所を用意してくれ!と宣言しているのです。

変数を宣言するには

var 変数名;

と記述します。

変数名の名づけ方はほぼ自由ですが、いくつか下に示すようなルールがあるので気をつけてください。

  • ・文字、数字、アンダースコアを用いる。
  • ・一文字目を数字にしてはいけない。
  • ・大文字と小文字は区別される。
  • ・JavaScriptが予約しているキーワードは使用できない(varやfunction)
  •  etc...
x = "Hello World!!"

そして二つ目の文で先に宣言したxという変数に"Hello World!!"という文字列を入れています
この処理の事を代入と呼び、=記号を使って表します。等しいと言う意味ではないので注意してください。

alert(x);

さらに三つ目の文で、新しいウインドウを開いて変数xの中身を出力するという処理を行っています。

<input type="button" value="Sample" onclick="hello()" />

これは、フォームといってデータを入力して送信してもらいたい時に多く利用されます。サンプルで使用するようなボタンを表示させるためには、

<input type="button" value="値"/>

と記述します。

今回はボタンをクリックした時に処理を行わせるために、クリック時の挙動も記述しています。
ちなみに、JavaScriptのソースコード内でコメントアウトしたい場合には

//一行コメントアウト
/*複数行のコメントアウト*/

このように記述します。

計算させてみよう

変数宣言と代入の方法がわかったところで、今度は前項で説明したソースコードに手を加え、少し高度なものにしてみましょう。

ではまずソースコードから。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Sample2</title>
<script type="text/javascript">
        function keisan(){
                var x;
                x  = Sample2.X.value;
                var y;
                y  = Sample2.Y.value;
                var z;
                z  = parseInt(x) + parseInt(y);
                alert(z);
        }
</script>
</head>
<body>
<form name="Sample2" action="Sample2.html">
<input type="text" name="X"/>
<input type="text" name="Y"/>
<input type="button" value="Sample2" onclick="keisan()"/>
</body>
</html>

このように表示されたかと思います。(これも実際に動くので数字を入れてみてください。)

実際に実行した結果です。

ブラウザでファイルを開き、テキストボックスに10と7を入力してみました。
このように数字を二つ入力してボタンを押すと、二つの数字が足された数が表示されたかと思います。

それでは詳しくソースコードにどんな事が書かれているのかを見ていきましょう。

var x;
x = Sample2.X.value;
var y;
y = Sample2.Y.value;
var z;
z = parseInt(x) + parseInt(y);
alert(z);
...
<form name="Sample2" action="Sample2.html">
<input type="text" name="X"/>
<input type="text" name="Y"/>
<input type="button" value="Sample2" onclick="hello()"/>

今度は文字列ではなく数字を扱っています。
変数に代入する際の注意点ですが、文字列の場合はダブルクオーテーションでくくる必要があります。数値の場合はそのまま代入します。

xの変数を宣言した後に

x = Sample2.X.value;

代入する値は、それぞれ

フォーム名.フォーム部品名.値;

を表していて、ボタンが押されたときにテキストボックスに入力された値を取得するという意味になります。フォームの設置についてですが、テキストボックスとボタンを配置するにはこのように記述します。

<form name="Sample2" action="Sample2.html">
<input type="text" name="X"/>
<input type="text" name="Y"/>
<input type="button" value="Sample2" onclick="hello()"/>

他にも色々なフォーム部品があるので、いずれまとめて詳しい説明をしたいと思います。

そして最後の

z = parseInt(x) + parseInt(y);

では、xとyに代入された値を加算してzに代入しています。parseIntとは文字列型を数値型に変えるという処理を行うものです。テキストボックスに入力された数字は文字として扱われ、そのままでは計算する事が出来ません。なので、数値に変換するのです。型(type)については次回詳しく説明したいと思います。

今回は加算でしたが演算子を変化させる事で色々な計算が出来ます。

四則演算等に使う記号(主なもの)
加算 + 以下 <=
減算 - 論理否定 !
乗算 * 論理積 &&
除算 / 論理和 ||
剰余 % インクリメント ++
代入 = デクリメント --
等価 == 加算代入 +=
以上 >= 減算代入 -=

ここでは紹介しきれないのですが、様々な状況によって使い分けることになるので、よく把握しておく必要があります。

まとめ

今回は入門という事で、変数や演算子といったJavaScriptの超重要かつ最も基本的な機能を説明しました。これから何度となく使っていく事になります。しっかり理解しておきましょう。
これで今日からアナタもプログラマーです!!