JavaScriptクイックスタート
Upcoming SlideShare
Loading in...5
×
 

JavaScriptクイックスタート

on

  • 2,752 views

まだ作りかけ。

まだ作りかけ。

Statistics

Views

Total Views
2,752
Views on SlideShare
2,748
Embed Views
4

Actions

Likes
8
Downloads
29
Comments
1

1 Embed 4

http://paper.li 4

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JavaScriptクイックスタート JavaScriptクイックスタート Presentation Transcript

  • 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; // 答えは6 a - b; // 答えは2 a * b; // 答えは8 a / b; // 答えは2 a % b; // 答えは0 (a + b) * a // 答えは?
  • 特殊な数学演算子 ++ 値を1増加させ -- 値を1減少させ る る += -= 値を演算した後に、再代入 する *= /=var a = 1;a++; // aの値は2a--; // 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; // 値は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("文字列");」という関数呼び出しで行 うことができます。
  • 「配列」ってなんだ?• 変数の連続した並び。
  • 配列をつくる• 角カッコ([])を用いて作成。 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を使用して書きなおして みましょう。 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; }
  • 制御構文の演習• 配列を一つ引数に取り、奇数番目の要素のみalert()で出力するという 関数「showOdds」を作成してください。• 配列を一つ引数に取り、3で割れるインデックスの要素を大文字に、 それ以外をそのままalert()で出力する関数「nabeatsu()」を作成して ください。 • 実行例:["a", "b", "c", "d", "e"]を渡されたら、"A", "b", "c", "D", "e"とalert() で順に出力される。
  • 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,など)プロパティに関数 をセットする。
  • よく使用するイベント• window.onload / document.body.onload・・・ページの読み込みが終 了し、DOMが構築し終わったら呼び出される。• element.onclick・・・クリックされた• element.onchange・・・値が変化した• form.onsubmit・・・フォームが送信される際に呼び出される
  • 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などのトレンドを学んでいく上で最低限の基 礎知識を身につけること。• 機会があったら、お仕事でもプログラミングにトラ イしてみてください。きっと楽しいですよ!