JavaScript トレーニングfor ビギナーズ

2011/10/5 白石俊平

ねらい• この資料は、講義終了時に、皆さんが以下の状態に達していることをゴールにしています。• Web上のリソースを参照しながら、自力で

JavaScriptプログラミングを行えること。• HTML5などのトレンドを学んでいく上で最低限の基礎知識を身につけること。

• JavaScriptは「一見かんたん、実は奥が深い」という言語です。本講義では、「一見かんたん」の部分にフォーカスしてお話ししたいと思います。

もくじ• JavaScriptってなんだ？• JavaScriptの文法をまなぶ• 変数• 演算子• 配列• 関数• 制御構文

• Webブラウザ上での JavaScript

JavaScript ってなんだ？

もくじ• JavaScriptってなんだ？• JavaScriptの文法をまなぶ• Webブラウザ上での JavaScript

JavaScript は、プログラミング言語である。

• Webブラウザ上で動作するプログラミング言語• プログラミングを覚えると、「アプリ」を作れる！

• Javaとは、似てるところは少しありますが、全く違う言語です。

JavaScript で主にできること 2 つ。

• Webページを動的に書き換えられる• Webサーバと通信を行える

JavaScript でできることは増え続けている• HTML5によって、新たな APIが数多く追加• ローカルストレージ／ファイルの読み書き• 動的なグラフィック操作• マルチメディア• …

• Webブラウザ以外でも利用されることが増えてきた• Titanium Mobile• Node.js• …

JavaScript の文法をまなぶ

もくじ• JavaScriptってなんだ？• JavaScriptの文法をまなぶ• Webブラウザ上での JavaScript

JavaScript をまなぶ前に• 世界で最も気軽に試せる言語• Webブラウザさえあれば動作する• Google Chromeのコンソールを使用してみましょう。• 新しいタブ上で「ツール→ JavaScriptコンソール」をクリックして、コンソールを起動してください。

JavaScript 言語の構成要素を 6 つに分けて解説。

• 変数• 演算子• 配列• オブジェクト• 関数• 制御構文

JavaScript の変数とは• 変数とは、数値や文字列を入れておく「名前付きの箱」のようなもの。

• 「 var」キーワードを使用して、利用を開始できる• 変数に値を「代入」するには、「=」を使用する

var a; // これはコメント/* これも コメント */a = 10; // a に 10 を代入var b = 20; // 変数を作ってすぐに代入var c = a + b; // 計算結果を変数に代入

変数には「型」がある。• 数値型・・・ 1,0,-1,Infinitなど。• 論理型・・・ true,falseのいずれか• 文字列型・・・”文字列はクォートで囲みます”• オブジェクト・・・後述

var num = 0;var bool = true;var str1 = " ダブルクォート ";var str2 = ' シングルクォート ';// 文字列は連結できるvar str3 = str1 + str2;

演習1. 変数 aに 10、変数 bに 20を代入してください。2. aと bの値を「入れ替えて」ください。• ヒント：新たな変数 cを使用してください。

JavaScript の演算子• 「演算子」というのは、プラス記号やマイナス記号のように「演算」を行うための機能。

• 演算した結果は数値や文字列、論理値などになる

主な数学演算子

var a = 4, b = 2;

a + b; // 答えは 6a - b; // 答えは 2a * b; // 答えは 8a / b; // 答えは 2a % b; // 答えは 0(a + b) * a // 答えは？

+ 足し算 - 引き算* 掛け算 / 割り算% 余りを求める () 括弧内を優先し

て演算する

特殊な数学演算子

var a = 1;a++; // a の値は 2a--; // a の値は 1// これらの演算子は、変数の前にも配置できる++a;--a;

a += 3; // a の値は？

++ 値を 1 増加させる

-- 値を 1 減少させる

+= -=*= /=

値を演算した後に、再代入する

文字列演算子

var a = "Hello";var b = "World";

// 値は "Hello World" となるvar c = a + " " + b;// 値は "Hello World!" となるc += "!";

+ 文字列として結合操作を行う+= 結合操作を行った後に再代入する

主な論理演算子

var a = 3;

a % 2 == 1; // 値は truea % 2 == 0; // 値は false!(a % 2 == 0); // 値は true

=====

値が一致しているかどうか？

!=!==

== の逆

! 論理値を反転させる

真偽の結果を求めるための演算子を論理演算子という。

演習1. 変数 aに 10、変数 bに "20"を代入し、「 a+b」を実行してみてください。結果はどうなるでしょうか？

2. 文字列を数値に変換する関数「 parseInt()」を使用してみましょう。

a + parseInt(b)

演習• 変数 aに 10、変数 bに 5を代入した後、「 a=<aの値>、 b=<bの値>、 a+b=<a+bの値>」とアラート表示してください。• ヒント：文字列結合演算子と数学演算子をうまく利用してください。

• ヒント：アラートは「 alert("文字列 ");」という関数呼び出しで行うことができます。

「オブジェクト」ってなんだ？• JavaScriptにおいては、「名前 :値」の組（プロパティ）をまとめて保持できる型。

var water = { name: " クリスタルゲイザー ", price: 98};// オブジェクトから値を読み出すwater.name;// オブジェクトに値を突っ込むwater.price = 100;// もともと存在しないプロパティに値をセットwater.amount = 500;

オブジェクトを作成するための new 演算子• オブジェクトを生成するための正式な構文は「 new 型名 (引数 1, 引数 2…)」

• {}（オブジェクトリテラル）や []（配列リテラル）は、 new Object()や new Array()の短縮形

var obj = new Object();var array = new Array();

var date = new Date();alert(" 今日は " + date.getDate() + " 日です ");

演習• オブジェクトを作成し、操作する練習です。• nameと ageというプロパティを持つオブジェクトを作り、変数 personに代入してください（値はあなたの名前と年齢を使用してください）

• 以下のコードを実行し、オブジェクトが正しく作成されていることを確認してください。

• 年齢を 3歳サバを読んで（ 3減らす）みてください。

console.log(person);

「配列」ってなんだ？• 変数の連続した並び。

配列をつくる• 角カッコ（ []）を用いて作成。

var array1 = [];var array2 = [1, " 文字列 ", true]

配列を操作する• 数値の「添字」を使用して、配列に値を入れたり出したり、が可能。

• 添字は 0から始まる• 「配列 .length」が配列自身の長さを表す

// 配列を作って値を代入var a = [];a[0] = " 白石 ";a[1] = " 俊平 ";

// v の値は何になるでしょう？var v = a[0];a.length; // 配列の長さ

演習• "H", "e", "y"という、 3つの文字列を要素に持つ配列（変数名は array）を作成し、以下のコードで内容を確認してください。

• 上記配列の要素 "e"を、 "o"で上書きしてもう一度内容を確認してみてください。

• 上記配列の最後に "!"という要素を追加してください。• 「配列の『配列 .length』番目に要素を追加する」という方法をとっていただくとベストです。

console.log(array);

JavaScript の関数とは？• 関数というのは、「値を入れて呼び出したら、何かが起こって、なにか返ってくる」というシロモノ。

• JavaScriptプログラムは、ほぼすべて関数の中で行われる→関数を理解することはとっても重要

関数「 add 」

(1, 2)

3

引数（ひきすう）

戻り値（もどりち）

関数を「呼び出す」• 「関数名 (引数 1, 引数 2…）」と書けば関数を呼び出せる。

• Webブラウザでは、様々な関数が最初から利用可能

// 引数を与えて呼び出すalert(" こんにちは ");

// 戻り値を変数に代入するvar result = confirm(" あなたは男性ですか？ ");

演習• JavaScriptで標準的に利用できる関数をいくつか使ってみましょう。

alert(" こんにちは ");var result = confirm(" 元気ですか？ ");parseInt("20") + 10;setTimeout("alert('test')", 1000);

関数を「つくる」• 「 function 関数名 ( 仮引数 1,…) { 処理… }」という形で、関数を自作することができる。

• 戻り値を戻す場合は return。// add 関数の作成function add(a, b) { return a + b;}// add 関数を呼び出して結果をアラートalert(add(1, 2));

演習• 与えられた数値を 2 乗して返す関数「 square()」を作り、自分で呼び出して動作を確かめてみてください。

関数も「オブジェクト」• 関数もオブジェクトの一種なので、変数に代入したり、オブジェクトに突っ込んだりできる。

// 関数を変数に代入var a = add;a(3, 4);// オブジェクトのプロパティとして使用var obj = { a: add};obj.a(5, 6);

メソッド？• オブジェクトに所属する関数のことを「メソッド」と呼んだり、呼ばなかったり。

• 配列や文字列などはオブジェクトなので、たくさんのメソッドを呼び出せる。

// すべて大文字に"abcde".toUpperCase();

// 配列を結合して文字列に["Shumpei", "Shiraishi"].join(" ");

演習• いろいろなメソッドを試してみましょう。

var str = "abcde"str.toLowerCase();str.substring(3);str.charAt(4);

var arr = [1, 2, 3, 4];arr.join(":");arr.slice(2);arr.push(5);

演習• 配列を引数に取り、全要素を半角スペースで結合して、すべて大文字にして返す関数「 joinAndUpper」を作成してください。

// joinAndUpper を呼び出す例// 結果は "SHUMPEI SHIRAISHI" となる。var a = ["shumpei", "shiraishi"];joinAndUpper(a);

演習• joinAndUpperをWebブラウザ上で使ってみましょう。• http://bit.ly/joinAndUpperにアクセスしてテスト用の

HTMLをダウンロードし、作成した joinAndUpper関数をボタンで呼び出せるようにしてください。

JavaScript の制御構文• 制御構文とは、プログラムの流れを制御するための「条件分

岐」や「繰り返し」のこと。• メジャーな言語は、だいたい同じような制御構文を備える（一度覚えれば、どの言語でも応用が効く）

• JavaScriptで覚えるべき制御構文は以下の 4つ。• if-else• switch• for• while

• 他にも breakや continueなどあるが、今回は省略

if-else• 条件分岐の基本構文。• カッコ内の値が trueの場合のみ、処理を実行する• else以下は省略可能

var a = 100;if (a % 3 == 0) { alert(" 余りはありません ");} else if (a % 3 == 1) { alert(" 余りは 1 です ");} else { alert(" 余りは 0 でも 1 でもありません ");}

if-else の演習• 配列の内容をスペース区切りで結合し、大文字 / 小文字を切り替える joinAndChangeCase()を作成してください。

• 第二引数で 0（大文字に変換）、 1（小文字に変換）、それ以外（変換なし）のいずれかの数値を受け取るものとします。

function joinAndChangeCase(array, changeCase) { var str = array.join(" "); if (changeCase == 0) { return str.toUpperCase(); } else if (changeCase == 1) { return str.toLowerCase(); } else { return str; }}

switch-case• 値が複数分岐する際に用いられる文• case 句の値と一致する部分が実行される。• breakを書かないと、処理が下にストンと落ちる（ fall through）• default 句が elseの代わり

var a = 100;switch (a % 3) { case 0: alert(" 余りはありません "); break; case 1: alert(" 余りは 1 です "); break; default: alert(" 余りは 0 でも 1 でもありません ");}

switch-case の演習• joinAndChangeCaseを switch-case文で書きなおして下さい。

function joinAndChangeCase(array, changeCase) { var str = array.join(" "); switch(changeCase) { case 0: return str.toUpperCase(); case 1: return str.toLowerCase(); default: return str; }}

for• 繰り返し（ループ）処理を行う構文• forのあとのカッコには、「 3つの項」（初期値、繰り返し条件、ループ後の処理）を「セミコロン」で分けて書く

for (var i = 0; i < 5; i++) { alert(i);}

for の演習• これまで何度かお世話になっている、配列の joinメソッドを自作してみましょう（注：下のコードにはバグがありますが、今はそのままでお願いします）。

function joinArray(array, delim) { var result = ""; for (var i = 0; i < array.length; i++) { result += array[i]; result += delim; } return result;}

while• 繰り返し（ループ）処理を行う構文• 条件式が trueの間、ループし続ける。

var i = 3;while (i > 0) { alert(i); i--;}

while の演習• forの演習で作成した joinArray関数を、whileを使用して書きなおしてみましょう。

function joinArray(array, delim) { var result = ""; var i = 0; while (i < array.length) { result += array[i]; result += delim; i++; } return result;}

制御構文の演習• forの演習で作成した joinArray関数には、「文字列の最後に区切り文字が余計に一つ付与されてしまう」というバグがあります。これを修正してください（以下のコードはバグのあるコードです）。

• ヒント：「もし iの値がループの最終値（ array.length – 1）でなければ、 result += delimを実行する」となるよう、 if文を使用して条件文を書き加えてください。

function joinArray(array, delim) { var result = ""; for (var i = 0; i < array.length; i++) { result += array[i]; // 下のコードが常に実行されてしまうのが問題 result += delim; } return result;}

Web ブラウザ上でのJavaScript

もくじ• JavaScriptってなんだ？• JavaScriptの文法をまなぶ• 変数• 演算子• 関数• 制御構文

• Webブラウザ上での JavaScript

Web ブラウザ上でのJavaScript の主な特徴

• Webブラウザ上で実行される JavaScriptプログラムでは、以下の 2つの変数が最初から利用可能であることが特徴• window・・・ alert、 confirmなど、様々な関数や変数を定義したグローバルオブジェクト

• document・・・ DOM（ Document Object Model）のルートオブジェクト

window オブジェクトとは• 「window」という名前の変数として定義されているグローバルオブジェクト

• alert、 confirmなど、様々な関数や変数を定義• window=グローバル環境• window.alert()は alert()だけで呼び出せる• グローバルに定義した変数や関数は、windowオブジェクトのメンバーとしてもアクセスできる

window.alert(" こんにちは ");v = " グローバル変数 ";alert(window.v); // " グローバル変数 "

window オブジェクトが持つ主な変数・関数• alert("文字列 ")• confirm("文字列 ")・・・戻り値は真偽値• setTimeout(関数 , 遅延ミリ秒数）・・・関数の

遅延実行。戻り値はタイマー ID（数値）。• setInterval(関数 , 間隔ミリ秒数）・・・関数の繰り返し実行。戻り値はタイマー ID（数値）。

• clearTimeout()、 clearInterval()・・・タイマーのキャンセル

• open()、 close()・・・サブウィンドウのオープン、クローズ

window オブジェクトの関数を利用する演習• 以下のコードをファイルに保存して、実行してみましょう。

<!DOCTYPE html><script>function timerfunc() { var cancel = confirm(" タイマーをキャンセルしますか？ "); if (cancel) { clearInterval(timer); alert(" キャンセルしました。 "); }}var timer= setInterval(timerfunc, 3000);</script>

DOM とは何か？• DOM=Document Object Model• HTMLの文書構造に、 JavaScriptからアクセスするためのデータ構造

• HTMLマークアップはツリー構造を取るため、 DOMもツリー構造となる。document

head

body

h1

DOM の基本的なメソッド• document.getElementById("ID")・・・ id 属性の値を指定して、要素オブジェクトを取得する

• document.getElementsByTagName("タグ名 ")・・・タグの名前を指定して、要素オブジェクトを取得する（複数）

• document.title・・・文書のタイトル• document.head、 document.body・・・ head要素、 body要素

• element.innerHTML・・・要素内の HTMLコードを読み書きする

• element.style・・・要素のスタイル• element.addEventListener()・・・要素のイベントを処理する

DOM 操作演習 1• 以下のコードを書いてみましょう。

<!DOCTYPE html><meta charset="UTF-8"><input id="title"><button onclick="changeTitle()"> タイトル変更 </button><script>function changeTitle() { var titleElem = document.getElementById("title"); var newTitle = titleElem.value; document.title = newTitle;}</script>

DOM 操作演習 2• 以下のコードを書いてみましょう。

<!DOCTYPE html><meta charset="UTF-8"><button style="position:absolute;" onclick="moveButton()"> クリック </button><script>var left = 0;function moveButton() { var button = document.getElementsByTagName("button")[0]; left += 4; button.style.left += left + "px";}</script>

DOM イベント• ユーザがボタンを押した、マウスカーソルが重なった、ページが読み込まれた、などのイベントを捕捉して処理を行うのが UIプログラミングの基本。

• イベントを捕捉する方法は二種類• element.addEventListener("イベント名 ", 関数 ,

useCapture)・・・要素のイベントを処理する• 第三引数（ useCapture）は基本的に falseで良い（第三引数を理解するには、 DOMイベントモデルについてのもう少し詳しい知識が必要）

• element.onXXX（ onclick, onmousemove,など）プロパティに関数をセットする。

DOM 操作演習 3• 以下のコードを書いてみましょう。

<!DOCTYPE html><meta charset="UTF-8"><input type="range" id="r" min=0 value=50 max=100><div id="d" style="border: 1px solid gray; width: 50px; height: 20px"></div><script>var r = document.getElementById("r");var d = document.getElementById("d");r.addEventListener("change", function() { d.style.width = r.value + "px";}, false);</script>

DOM ツリーを操作するメソッド

• document.createElement()・・・要素オブジェクトを作成する

• element.appendChild()・・・子要素を追加する• element.childNodes・・・子要素を全て取得する• element.removeChild()・・・子要素を削除する• element.setAttribute()・・・属性をセットする• …

DOM 操作演習 4• dom-example4.htmlのコードを読んでみましょう。

DOM ツリーの操作はすごく面倒。

• dom-example4.htmlを実行し、コードを読んでみてください。

• DOM操作を劇的に容易にしてくれるライブラリとして、 jQueryが有名• jq-example4.htmlと見比べてみてください。

まとめ• 本講義を通じて、もともとの「ねらい」が達成できていることを祈ります（できていなかったら、講師の実力不足です）。• プログラミングや JavaScriptは「自分にもできること」と言う思いをいだいて頂くこと。

• HTML5などのトレンドを学んでいく上で最低限の基礎知識を身につけること。

• 機会があったら、お仕事でもプログラミングにトライしてみてください。きっと楽しいですよ！