More Related Content Similar to JavaScriptクイックスタート Similar to JavaScriptクイックスタート (20) More from Shumpei Shiraishi More from Shumpei Shiraishi (20) 2. ねらい
• この資料は、講義終了時に、皆さんが以下の状態に
達していることをゴールにしています。
• Web上のリソースを参照しながら、自力でJavaScript
プログラミングを行えること。
• HTML5などのトレンドを学んでいく上で最低限の基
礎知識を身につけること。
• JavaScriptは「一見かんたん、実は奥が深い」とい
う言語です。本講義では、「一見かんたん」の部分
にフォーカスしてお話ししたいと思います。
13. JavaScriptの変数とは
• 変数とは、数値や文字列を入れておく「名前付きの
箱」のようなもの。
• 「var」キーワードを使用して、利用を開始できる
• 変数に値を「代入」するには、「=」を使用する
var a; // これはコメント
/* これも
コメント */
a = 10; // aに10を代入
var b = 20; // 変数を作ってすぐに代入
var c = a + b; // 計算結果を変数に代入
14. 変数には「型」があ
る。
• 数値型・・・1,0,-1,Infinitなど。
• 論理型・・・true,falseのいずれか
• 文字列型・・・”文字列はクォートで囲みます”
• オブジェクト・・・後述
var num = 0;
var bool = true;
var str1 = "ダブルクォート";
var str2 = 'シングルクォート';
// 文字列は連結できる
var str3 = str1 + str2;
17. 主な数学演算子
+ 足し算 - 引き算
* 掛け算 / 割り算
% 余りを求める () 括弧内を優先し
て演算する
var a = 4, b = 2;
a + b; // 答えは6
a - b; // 答えは2
a * b; // 答えは8
a / b; // 答えは2
a % b; // 答えは0
(a + b) * a // 答えは？
18. 特殊な数学演算子
++ 値を1増加させ -- 値を1減少させ
る る
+= -= 値を演算した後に、再代入
する
*= /=
var a = 1;
a++; // aの値は2
a--; // aの値は1
// これらの演算子は、変数の前にも配置できる
++a;
--a;
a += 3; // aの値は？
19. 文字列演算子
+ 文字列として結合操作を行う
+= 結合操作を行った後に再代入する
var a = "Hello";
var b = "World";
// 値は"Hello World"となる
var c = a + " " + b;
// 値は"Hello World!"となる
c += "!";
20. 主な論理演算子
真偽の結果を求めるための演算子を論理演算子という。
== 値が一致してい != ==の逆
=== るかどうか？ !==
! 論理値を反転さ
せる
var a = 3;
a % 2 == 1; // 値はtrue
a % 2 == 0; // 値はfalse
!(a % 2 == 0); // 値はtrue
25. 配列を操作する
• 数値の「添字」を使用して、配列に値を入れたり出
したり、が可能。
• 添字は0から始まる
• 「配列.length」が配列自身の長さを表す
// 配列を作って値を代入
var a = [];
a[0] = "白石";
a[1] = "俊平";
// vの値は何になるでしょう？
var v = a[0];
a.length; // 配列の長さ
26. 演習
• "H", "e", "y"という、3つの文字列を要素に持つ配列（変
数名はarray）を作成し、以下のコードで内容を確認して
ください。
console.log(array);
• 上記配列の要素"e"を、"o"で上書きしてもう一度内容を
確認してみてください。
• 上記配列の最後に"!"という要素を追加してください。
• 「配列の『配列.length』番目に要素を追加する」という方
法をとっていただくとベストです。
27. 「オブジェクト」って
なんだ？
• JavaScriptにおいては、「名前:値」の組（プロパ
ティ）をまとめて保持できる型（という理解でまずは
良い）。
var water = {
name: "クリスタルゲイザー",
price: 98
};
// オブジェクトから値を読み出す
water.name;
// オブジェクトに値を突っ込む
water.price = 100;
// もともと存在しないプロパティに値をセット
water.amount = 500;
28. オブジェクトを作成す
るための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() + "日です");
33. 関数を「つくる」
• 「function 関数名(仮引数1,…) { 処理… }」と
いう形で、関数を自作することができる。
• 戻り値を戻す場合はreturn。
// add関数の作成
function add(a, b) {
return a + b;
}
// add関数を呼び出して結果をアラート
alert(add(1, 2));
36. メソッド？
• オブジェクトに所属する関数のことを「メソッド」
と呼んだり、呼ばなかったり。
• 配列や文字列などはオブジェクトなので、たくさん
のメソッドを呼び出せる。
// すべて大文字に
"abcde".toUpperCase();
// 配列を結合して文字列に
["Shumpei", "Shiraishi"].join(" ");
37. 演習
• いろいろなメソッドを試してみましょう。
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);
38. 演習
• 配列を引数に取り、全要素を半角スペースで結合し
て、すべて大文字にして返す関数「joinAndUpper」
を作成してください。
// joinAndUpperを呼び出す例
// 結果は"SHUMPEI SHIRAISHI"となる。
var a = ["shumpei", "shiraishi"];
joinAndUpper(a);
42. 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;
}
}
43. 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でもありません");
}
46. forの演習
• これまで何度かお世話になっている、配列のjoinメソッドを自作して
みましょう（注：下のコードにはバグがありますが、今はそのまま
でお願いします）。
function joinArray(array, delim) {
var result = "";
for (var i = 0; i < array.length; i++) {
result += array[i];
result += delim;
}
return result;
}
49. 制御構文の演習
• 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;
}
50. 制御構文の演習
• 配列を一つ引数に取り、奇数番目の要素のみalert()で出力するという
関数「showOdds」を作成してください。
• 配列を一つ引数に取り、3で割れるインデックスの要素を大文字に、
それ以外をそのままalert()で出力する関数「nabeatsu()」を作成して
ください。
• 実行例：["a", "b", "c", "d", "e"]を渡されたら、"A", "b", "c", "D", "e"とalert()
で順に出力される。
54. windowオブジェクトと
は
• 「window」という名前の変数として定義されてい
るグローバルオブジェクト
• alert、confirmなど、様々な関数や変数を定義
• window=グローバル環境
• window.alert()はalert()だけで呼び出せる
• グローバルに定義した変数や関数は、windowオブ
ジェクトのメンバーとしてもアクセスできる
window.alert("こんにちは");
v = "グローバル変数";
alert(window.v); // "グローバル変数"
56. windowオブジェクトの
関数を利用する演習
• 以下のコードをファイルに保存して、実行してみましょ
う。
<!DOCTYPE html>
<script>
function timerfunc() {
var cancel = confirm("タイマーをキャンセルしますか？");
if (cancel) {
clearInterval(timer);
alert("キャンセルしました。");
}
}
var timer= setInterval(timerfunc, 3000);
</script>
58. DOMの基本的なメソッ
ド
• document.getElementById("ID")・・・id属性の値を指定して、
要素オブジェクトを取得する
• document.getElementsByTagName("タグ名")・・・タグの名
前を指定して、要素オブジェクトを取得する（複数）
• document.title・・・文書のタイトル
• document.head、document.body・・・head要素、body要素
• element.innerHTML・・・要素内のHTMLコードを読み書きす
る
• element.style・・・要素のスタイル
• element.addEventListener()・・・要素のイベントを処理する
59. 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>
60. 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>
61. DOMイベント
• ユーザがボタンを押した、マウスカーソルが重なった、ペー
ジが読み込まれた、などのイベントを捕捉して処理を行うの
がUIプログラミングの基本。
• イベントを捕捉する方法は二種類
• element.addEventListener("イベント名", 関数, useCapture)・・・
要素のイベントを処理する
• 第三引数（useCapture）は基本的にfalseで良い（第三引数を理解する
には、DOMイベントモデルについてのもう少し詳しい知識が必要）
• element.onXXX（onclick, onmousemove,など）プロパティに関数
をセットする。
62. よく使用するイベン
ト
• window.onload / document.body.onload・・・ページの読み込みが終
了し、DOMが構築し終わったら呼び出される。
• element.onclick・・・クリックされた
• element.onchange・・・値が変化した
• form.onsubmit・・・フォームが送信される際に呼び出される
63. 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>
64. DOMツリーを操作する
メソッド
• document.createElement()・・・要素オブジェクトを作成する
• element.appendChild()・・・子要素を追加する
• element.childNodes・・・子要素を全て取得する
• element.removeChild()・・・子要素を削除する
• element.setAttribute()・・・属性をセットする
• …
67. まとめ
• 本講義を通じて、もともとの「ねらい」が達成でき
ていることを祈ります（できていなかったら、講師
の実力不足です）。
• プログラミングやJavaScriptは「自分にもできるこ
と」と言う思いをいだいて頂くこと。
• HTML5などのトレンドを学んでいく上で最低限の基
礎知識を身につけること。
• 機会があったら、お仕事でもプログラミングにトラ
イしてみてください。きっと楽しいですよ！
