JavaScriptクイックスタート

JavaScriptトレーニング
for ビギナーズ
2011/10/5 白石俊平

ねらい
• この資料は、講義終了時に、皆さんが以下の状態に
達していることをゴールにしています。
• Web上のリソースを参照しながら、自力でJavaScript
プログラミングを行えること。
• HTML5などのトレンドを学んでいく上で最低限の基
礎知識を身につけること。
• JavaScriptは「一見かんたん、実は奥が深い」とい
う言語です。本講義では、「一見かんたん」の部分
にフォーカスしてお話ししたいと思います。

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

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

• Webブラウザ上で動作するプログラミング言語
• プログラミングを覚えると、「アプリ」を作れる！
• Javaとは、似てるところは少しありますが、全く違
う言語です。

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

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

JavaScriptでできること
は増え続けている
• HTML5によって、新たなAPIが数多く追加
• ローカルストレージ／ファイルの読み書き
• 動的なグラフィック操作
• マルチメディア
• …
• Webブラウザ以外でも利用されることが増えてきた
• Titanium Mobile
• Node.js
• …

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; // 答えは6
a - b; // 答えは2
a * b; // 答えは8
a / b; // 答えは2
a % b; // 答えは0
(a + b) * a // 答えは？

特殊な数学演算子
++ 値を1増加させ -- 値を1減少させ
るる
+= -= 値を演算した後に、再代入
する
*= /=
var a = 1;
a++; // aの値は2
a--; // aの値は1
// これらの演算子は、変数の前にも配置できる
++a;
--a;

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

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

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

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

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

== 値が一致してい != ==の逆
=== るかどうか？ !==
! 論理値を反転さ
せる

var a = 3;

a % 2 == 1; // 値はtrue
a % 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("文字列");」という関数呼び出しで行
うことができます。

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

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

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）を作成し、以下のコードで内容を確認して
ください。
console.log(array);

• 上記配列の要素"e"を、"o"で上書きしてもう一度内容を
確認してみてください。
• 上記配列の最後に"!"という要素を追加してください。
• 「配列の『配列.length』番目に要素を追加する」という方
法をとっていただくとベストです。

「オブジェクト」って
なんだ？
• 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 str = new String("string");

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

演習
• オブジェクトを作成し、操作する練習です。
• nameとageというプロパティを持つオブジェクトを
作り、変数personに代入してください（値はあなた
の名前と年齢を使用してください）
• 以下のコードを実行し、オブジェクトが正しく作成
されていることを確認してください。
console.log(person);

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

JavaScriptの関数とは？
• 関数というのは、「値を入れて呼び出したら、何か
が起こって、なにか返ってくる」というシロモノ。
• JavaScriptプログラムは、ほぼすべて関数の中で行
われる→関数を理解することはとっても重要

(1, 2)
引数（ひきすう）
関数「add」
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を使用して書きなおして
みましょう。

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文を使用して条件文
を書き加えてください。

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

制御構文の演習
• 配列を一つ引数に取り、奇数番目の要素のみalert()で出力するという
関数「showOdds」を作成してください。
• 配列を一つ引数に取り、3で割れるインデックスの要素を大文字に、
それ以外をそのままalert()で出力する関数「nabeatsu()」を作成して
ください。
• 実行例：["a", "b", "c", "d", "e"]を渡されたら、"A", "b", "c", "D", "e"とalert()
で順に出力される。

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>
<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,など）プロパティに関数
をセットする。

よく使用するイベン
ト

• window.onload / document.body.onload・・・ページの読み込みが終
了し、DOMが構築し終わったら呼び出される。
• element.onclick・・・クリックされた
• element.onchange・・・値が変化した
• form.onsubmit・・・フォームが送信される際に呼び出される

DOM操作演習3
<!DOCTYPE html>
<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のコードを読んでみましょう。

JavaScriptクイックスタート

More Related Content

What's hot

Viewers also liked

Similar to JavaScriptクイックスタート

More from Shumpei Shiraishi

Recently uploaded

JavaScriptクイックスタート