Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

JavaScriptクイックスタート

3.044 Aufrufe

Veröffentlicht am

まだ作りかけ。

Veröffentlicht in: Technologie

JavaScriptクイックスタート

  1. 1. JavaScriptトレーニング for ビギナーズ 2011/10/5 白石俊平
  2. 2. ねらい• この資料は、講義終了時に、皆さんが以下の状態に 達していることをゴールにしています。 • Web上のリソースを参照しながら、自力でJavaScript プログラミングを行えること。 • HTML5などのトレンドを学んでいく上で最低限の基 礎知識を身につけること。• JavaScriptは「一見かんたん、実は奥が深い」とい う言語です。本講義では、「一見かんたん」の部分 にフォーカスしてお話ししたいと思います。
  3. 3. もくじ• JavaScriptってなんだ?• JavaScriptの文法をまなぶ • 変数 • 演算子 • 配列 • 関数 • 制御構文• Webブラウザ上でのJavaScript
  4. 4. JavaScriptってなんだ?
  5. 5. もくじ• JavaScriptってなんだ?• JavaScriptの文法をまなぶ• Webブラウザ上でのJavaScript
  6. 6. JavaScriptは、プログラミング言語である。• Webブラウザ上で動作するプログラミング言語• プログラミングを覚えると、「アプリ」を作れる!• Javaとは、似てるところは少しありますが、全く違 う言語です。
  7. 7. JavaScriptで主にできること2つ。• Webページを動的に書き換えられる• Webサーバと通信を行える
  8. 8. JavaScriptでできることは増え続けている• HTML5によって、新たなAPIが数多く追加 • ローカルストレージ/ファイルの読み書き • 動的なグラフィック操作 • マルチメディア • …• Webブラウザ以外でも利用されることが増えてきた • Titanium Mobile • Node.js • …
  9. 9. JavaScriptの文法をまなぶ
  10. 10. もくじ• JavaScriptってなんだ?• JavaScriptの文法をまなぶ• Webブラウザ上でのJavaScript
  11. 11. JavaScriptをまなぶ前に• 世界で最も気軽に試せる言語 • Webブラウザさえあれば動作する • Google Chromeのコンソールを使用してみましょう。 • 新しいタブ上で「ツール→JavaScriptコンソール」をク リックして、コンソールを起動してください。
  12. 12. JavaScript言語の構成要素を6つに分けて解説。• 変数• 演算子• 配列• オブジェクト• 関数• 制御構文
  13. 13. JavaScriptの変数とは• 変数とは、数値や文字列を入れておく「名前付きの 箱」のようなもの。• 「var」キーワードを使用して、利用を開始できる• 変数に値を「代入」するには、「=」を使用する var a; // これはコメント /* これも コメント */ a = 10; // aに10を代入 var b = 20; // 変数を作ってすぐに代入 var c = a + b; // 計算結果を変数に代入
  14. 14. 変数には「型」がある。• 数値型・・・1,0,-1,Infinitなど。• 論理型・・・true,falseのいずれか• 文字列型・・・”文字列はクォートで囲みます”• オブジェクト・・・後述 var num = 0; var bool = true; var str1 = "ダブルクォート"; var str2 = シングルクォート; // 文字列は連結できる var str3 = str1 + str2;
  15. 15. 演習1. 変数aに10、変数bに20を代入してください。2. aとbの値を「入れ替えて」ください。 • ヒント:新たな変数cを使用してください。
  16. 16. JavaScriptの演算子• 「演算子」というのは、プラス記号やマイナス記号 のように「演算」を行うための機能。• 演算した結果は数値や文字列、論理値などになる
  17. 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. 18. 特殊な数学演算子 ++ 値を1増加させ -- 値を1減少させ る る += -= 値を演算した後に、再代入 する *= /=var a = 1;a++; // aの値は2a--; // aの値は1// これらの演算子は、変数の前にも配置できる++a;--a;a += 3; // aの値は?
  19. 19. 文字列演算子 + 文字列として結合操作を行う += 結合操作を行った後に再代入する var a = "Hello"; var b = "World"; // 値は"Hello World"となる var c = a + " " + b; // 値は"Hello World!"となる c += "!";
  20. 20. 主な論理演算子 真偽の結果を求めるための演算子を論理演算子という。 == 値が一致してい != ==の逆 === るかどうか? !== ! 論理値を反転さ せるvar a = 3;a % 2 == 1; // 値はtruea % 2 == 0; // 値はfalse!(a % 2 == 0); // 値はtrue
  21. 21. 演習1. 変数aに10、変数bに"20"を代入し、「a+b」を実 行してみてください。結果はどうなるでしょう か?2. 文字列を数値に変換する関数「parseInt()」を使用 してみましょう。 a + parseInt(b)
  22. 22. 演習• 変数aに10、変数bに5を代入した後、 「a=<aの値>、b=<bの値>、a+b=<a+bの値>」 とアラート表示してください。 • ヒント:文字列結合演算子と数学演算子をうまく利用してくださ い。 • ヒント:アラートは「alert("文字列");」という関数呼び出しで行 うことができます。
  23. 23. 「配列」ってなんだ?• 変数の連続した並び。
  24. 24. 配列をつくる• 角カッコ([])を用いて作成。 var array1 = []; var array2 = [1, "文字列", true]
  25. 25. 配列を操作する• 数値の「添字」を使用して、配列に値を入れたり出 したり、が可能。• 添字は0から始まる• 「配列.length」が配列自身の長さを表す // 配列を作って値を代入 var a = []; a[0] = "白石"; a[1] = "俊平"; // vの値は何になるでしょう? var v = a[0]; a.length; // 配列の長さ
  26. 26. 演習• "H", "e", "y"という、3つの文字列を要素に持つ配列(変 数名はarray)を作成し、以下のコードで内容を確認して ください。 console.log(array);• 上記配列の要素"e"を、"o"で上書きしてもう一度内容を 確認してみてください。• 上記配列の最後に"!"という要素を追加してください。 • 「配列の『配列.length』番目に要素を追加する」という方 法をとっていただくとベストです。
  27. 27. 「オブジェクト」ってなんだ?• JavaScriptにおいては、「名前:値」の組(プロパ ティ)をまとめて保持できる型(という理解でまずは 良い)。 var water = { name: "クリスタルゲイザー", price: 98 }; // オブジェクトから値を読み出す water.name; // オブジェクトに値を突っ込む water.price = 100; // もともと存在しないプロパティに値をセット water.amount = 500;
  28. 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() + "日です");
  29. 29. 演習• オブジェクトを作成し、操作する練習です。• nameとageというプロパティを持つオブジェクトを 作り、変数personに代入してください(値はあなた の名前と年齢を使用してください)• 以下のコードを実行し、オブジェクトが正しく作成 されていることを確認してください。 console.log(person);• 年齢を3歳サバを読んで(3減らす)みてください。
  30. 30. JavaScriptの関数とは?• 関数というのは、「値を入れて呼び出したら、何か が起こって、なにか返ってくる」というシロモノ。• JavaScriptプログラムは、ほぼすべて関数の中で行 われる→関数を理解することはとっても重要 (1, 2) 引数(ひきすう) 関数「add」 3 戻り値(もどりち)
  31. 31. 関数を「呼び出す」• 「関数名(引数1, 引数2…)」と書けば関数を呼び出 せる。• Webブラウザでは、様々な関数が最初から利用可能 // 引数を与えて呼び出す alert("こんにちは"); // 戻り値を変数に代入する var result = confirm("あなたは男性ですか?");
  32. 32. 演習• JavaScriptで標準的に利用できる関数をいくつか 使ってみましょう。 alert("こんにちは"); var result = confirm("元気ですか?"); parseInt("20") + 10; setTimeout("alert(test)", 1000);
  33. 33. 関数を「つくる」• 「function 関数名(仮引数1,…) { 処理… }」と いう形で、関数を自作することができる。• 戻り値を戻す場合はreturn。 // add関数の作成 function add(a, b) { return a + b; } // add関数を呼び出して結果をアラート alert(add(1, 2));
  34. 34. 演習• 与えられた数値を2乗して返す関数「square()」を 作り、自分で呼び出して動作を確かめてみてくださ い。
  35. 35. 関数も「オブジェクト」• 関数もオブジェクトの一種なので、変数に代入した り、オブジェクトに突っ込んだりできる。 // 関数を変数に代入 var a = add; a(3, 4); // オブジェクトのプロパティとして使用 var obj = { a: add }; obj.a(5, 6);
  36. 36. メソッド?• オブジェクトに所属する関数のことを「メソッド」 と呼んだり、呼ばなかったり。• 配列や文字列などはオブジェクトなので、たくさん のメソッドを呼び出せる。 // すべて大文字に "abcde".toUpperCase(); // 配列を結合して文字列に ["Shumpei", "Shiraishi"].join(" ");
  37. 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. 38. 演習• 配列を引数に取り、全要素を半角スペースで結合し て、すべて大文字にして返す関数「joinAndUpper」 を作成してください。 // joinAndUpperを呼び出す例 // 結果は"SHUMPEI SHIRAISHI"となる。 var a = ["shumpei", "shiraishi"]; joinAndUpper(a);
  39. 39. 演習• joinAndUpperをWebブラウザ上で使ってみましょう。• http://bit.ly/joinAndUpperにアクセスしてテスト用の HTMLをダウンロードし、作成したjoinAndUpper関数を ボタンで呼び出せるようにしてください。
  40. 40. JavaScriptの制御構文• 制御構文とは、プログラムの流れを制御するための「条件分 岐」や「繰り返し」のこと。• メジャーな言語は、だいたい同じような制御構文を備える (一度覚えれば、どの言語でも応用が効く)• JavaScriptで覚えるべき制御構文は以下の4つ。 • if-else • switch • for • while• 他にもbreakやcontinueなどあるが、今回は省略
  41. 41. if-else• 条件分岐の基本構文。• カッコ内の値がtrueの場合のみ、処理を実行する• else以下は省略可能 var a = 100; if (a % 3 == 0) { alert("余りはありません"); } else if (a % 3 == 1) { alert("余りは1です"); } else { alert("余りは0でも1でもありません"); }
  42. 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. 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でもありません"); }
  44. 44. 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; }}
  45. 45. for• 繰り返し(ループ)処理を行う構文• forのあとのカッコには、「3つの項」(初期値、繰り返し条件、ルー プ後の処理)を「セミコロン」で分けて書く for (var i = 0; i < 5; i++) { alert(i); }
  46. 46. forの演習• これまで何度かお世話になっている、配列のjoinメソッドを自作して みましょう(注:下のコードにはバグがありますが、今はそのまま でお願いします)。 function joinArray(array, delim) { var result = ""; for (var i = 0; i < array.length; i++) { result += array[i]; result += delim; } return result; }
  47. 47. while• 繰り返し(ループ)処理を行う構文• 条件式がtrueの間、ループし続ける。 var i = 3; while (i > 0) { alert(i); i--; }
  48. 48. 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; }
  49. 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. 50. 制御構文の演習• 配列を一つ引数に取り、奇数番目の要素のみalert()で出力するという 関数「showOdds」を作成してください。• 配列を一つ引数に取り、3で割れるインデックスの要素を大文字に、 それ以外をそのままalert()で出力する関数「nabeatsu()」を作成して ください。 • 実行例:["a", "b", "c", "d", "e"]を渡されたら、"A", "b", "c", "D", "e"とalert() で順に出力される。
  51. 51. Webブラウザ上でのJavaScript
  52. 52. もくじ• JavaScriptってなんだ?• JavaScriptの文法をまなぶ • 変数 • 演算子 • 関数 • 制御構文• Webブラウザ上でのJavaScript
  53. 53. Webブラウザ上でのJavaScriptの主な特徴• Webブラウザ上で実行されるJavaScriptプログラム では、以下の2つの変数が最初から利用可能である ことが特徴 • window・・・alert、confirmなど、様々な関数や変数 を定義したグローバルオブジェクト • document・・・DOM(Document Object Model)の ルートオブジェクト
  54. 54. windowオブジェクトとは• 「window」という名前の変数として定義されてい るグローバルオブジェクト• alert、confirmなど、様々な関数や変数を定義• window=グローバル環境 • window.alert()はalert()だけで呼び出せる • グローバルに定義した変数や関数は、windowオブ ジェクトのメンバーとしてもアクセスできるwindow.alert("こんにちは");v = "グローバル変数";alert(window.v); // "グローバル変数"
  55. 55. windowオブジェクトが持つ主な変数・関数• alert("文字列")• confirm("文字列")・・・戻り値は真偽値• setTimeout(関数, 遅延ミリ秒数)・・・関数の遅延 実行。戻り値はタイマーID(数値)。• setInterval(関数,間隔ミリ秒数)・・・関数の繰り返 し実行。戻り値はタイマーID(数値)。• clearTimeout()、clearInterval()・・・タイマーの キャンセル• open()、close()・・・サブウィンドウのオープン、 クローズ
  56. 56. windowオブジェクトの関数を利用する演習• 以下のコードをファイルに保存して、実行してみましょ う。<!DOCTYPE html><script>function timerfunc() { var cancel = confirm("タイマーをキャンセルしますか?"); if (cancel) { clearInterval(timer); alert("キャンセルしました。"); }}var timer= setInterval(timerfunc, 3000);</script>
  57. 57. DOMとは何か?• DOM=Document Object Model• HTMLの文書構造に、JavaScriptからアクセスする ためのデータ構造• HTMLマークアップはツリー構造を取るため、DOM もツリー構造となる。 document head body h1
  58. 58. DOMの基本的なメソッド• document.getElementById("ID")・・・id属性の値を指定して、 要素オブジェクトを取得する• document.getElementsByTagName("タグ名")・・・タグの名 前を指定して、要素オブジェクトを取得する(複数)• document.title・・・文書のタイトル• document.head、document.body・・・head要素、body要素• element.innerHTML・・・要素内のHTMLコードを読み書きす る• element.style・・・要素のスタイル• element.addEventListener()・・・要素のイベントを処理する
  59. 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. 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. 61. DOMイベント• ユーザがボタンを押した、マウスカーソルが重なった、ペー ジが読み込まれた、などのイベントを捕捉して処理を行うの がUIプログラミングの基本。• イベントを捕捉する方法は二種類 • element.addEventListener("イベント名", 関数, useCapture)・・・ 要素のイベントを処理する • 第三引数(useCapture)は基本的にfalseで良い(第三引数を理解する には、DOMイベントモデルについてのもう少し詳しい知識が必要) • element.onXXX(onclick, onmousemove,など)プロパティに関数 をセットする。
  62. 62. よく使用するイベント• window.onload / document.body.onload・・・ページの読み込みが終 了し、DOMが構築し終わったら呼び出される。• element.onclick・・・クリックされた• element.onchange・・・値が変化した• form.onsubmit・・・フォームが送信される際に呼び出される
  63. 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. 64. DOMツリーを操作するメソッド• document.createElement()・・・要素オブジェクトを作成する• element.appendChild()・・・子要素を追加する• element.childNodes・・・子要素を全て取得する• element.removeChild()・・・子要素を削除する• element.setAttribute()・・・属性をセットする• …
  65. 65. DOM操作演習4• dom-example4.htmlのコードを読んでみましょう。
  66. 66. DOMツリーの操作はすごく面倒。• dom-example4.htmlを実行し、コードを読んでみて ください。• DOM操作を劇的に容易にしてくれるライブラリと して、jQueryが有名 • jq-example4.htmlと見比べてみてください。
  67. 67. まとめ• 本講義を通じて、もともとの「ねらい」が達成でき ていることを祈ります(できていなかったら、講師 の実力不足です)。 • プログラミングやJavaScriptは「自分にもできるこ と」と言う思いをいだいて頂くこと。 • HTML5などのトレンドを学んでいく上で最低限の基 礎知識を身につけること。• 機会があったら、お仕事でもプログラミングにトラ イしてみてください。きっと楽しいですよ!

×