0
できる つくれる               JavaScript               〜 超初学者向け講座 〜13年1月12日土曜日
アジェンダ              ★   前置き:プログラミングを学ぶ って?              ★   JavaScriptって なんだ?              ★   覚えておきたい事項              ★   基...
プログラミングを               学ぶ って?13年1月12日土曜日
ご参加の目的                     (勝手な推測)              ★業務で必要になので勉強しておきた              い。              ★   作ってみたいものがある。           ...
プログラミングが              あなたに提供するものは              問題解決のための手段13年1月12日土曜日
それを得るための    はじめの一歩から始めましょう13年1月12日土曜日
JavaScriptって                 なんだ?13年1月12日土曜日
JavaScriptとは         ✴       ウェブブラウザで動作する              (実質)唯一のプログラミング言語                 ※JavaScript以外にもVBScript等の言語は動作するので...
話題のかわいいあのサイトの動きも                http://pararaehon.com/13年1月12日土曜日
面白げな文字列生成ツールも               http://starwing.net/               suddenly_death.html13年1月12日土曜日
本格的なゲームも              http://www.smokymonkeys.com/                        triglav/13年1月12日土曜日
JavaScriptで作れます13年1月12日土曜日
JavaScriptで作れます                ※要:気合と根性13年1月12日土曜日
JavaScriptで                  やれることはいろいろ              ★ぶっちゃけ、ブラウザの中でやりた              いことはほとんどなんでもできます。              • 最近はブラ...
覚えておきたい事項               (JavaScriptを勉強するにあたって)13年1月12日土曜日
主要なウェブブラウザ      現在、主要であると言われているブラウザは            だいたいこのへん    InternetExplorer   Opera(オペラ)    (インターネット    エクスプローラ)         ...
レンダリングエンジン         JavaScriptは、ブラウザに搭載されている            レンダリングエンジン上で動く                         WebKit                      ...
レンダリングエンジンとは?              ★HTML,CSS,JavaScriptという、              Webページ記述用言語を解釈し、              実際に画面上に表示するためのプ            ...
実は                  ブラウザごとに採用している                 レンダリングエンジンが異なる                         Prest              Trident       ...
( ^o^)☎┐もしもし13年1月12日土曜日
( ^o^)☎┐IEでずれる、ですか?13年1月12日土曜日
( ^o^)Г☎チンッ13年1月12日土曜日
何が起こるかというと      WebKitではズレないけどTridentだとズレる       というようなケースが発生したりする。                        表示する形を決定づけるための              Tri...
何が起こるかというと      WebKitではズレないけどTridentだとズレる       というようなケースが発生したりする。               クロスブラウザ問題                  表示する形を決定づけるため...
クロスブラウザ問題              ★HTML,CSS,JavaScriptをブラウザで確認した              時に起こるブラウザ間の挙動差異による問題              ★主にブラウザの独自仕様や        ...
イメージ✴同じゲームでもPS3版とXBOX版で動きが違うとか    レンダリングエンジン                                                           レンダリングエンジン         ...
クロスブラウザ問題を                   なんとかするには              ★原因そのものを何とかするのは              一個人には不可能              ★XBOXとかPS3の問題を直して、今 ...
クロスブラウザ問題を                   なんとかするには              ★ 原因そのものを何とかするのは               一個人には不可能                  クロスブラウザ対応スク   ...
具体的な例(1)              ★http://codezine.jp/article/detail/              158              • CodeZineの記事              ★   htt...
具体的な例(2)              ★http://allabout.co.jp/gm/gc/              39897/2/              • JavaScriptで通信を使おうとすると・・・         ...
現実問題として              ★クロスブラウザ問題に対応したプロ              グラミングは大変              • 純粋な手間              • 検証の煩雑さ              • 本来や...
ライブラリを                  使いましょう              ★jQueryをはじめとするJavaScriptラ              イブラリは、これらの差異を吸収した              形で実装してくれ...
基本を              ハンズオンで勉強13年1月12日土曜日
事前に      ★     JavaScriptでは、文字列要素中以外を除           き、全角文字は使用できません。         • 例えば suuji = 123 など              全角数字はエラー      ★...
リテラルについて13年1月12日土曜日
リテラルとは     ★     JavaScriptでプログラムに直接記述する          データのこと。     ★        定数とも表現する。   var hensuu1 = これは変数です ; // 文字   var suu...
変数     ★        なんらかの値を保持しておくための要素              var hensuu1 = これは変数です ;                                        3713年1月12日土曜日
変数     ★        なんらかの値を保持しておくための要素        ローカル変数として      識別させるためのキーワード                         代入演算子              var hens...
数値と数字     ★     数値は純粋な数そのものを指し          数字は数文字を指します。      var suuti = 123; // 数値      var suuji = 456 ; // クオートでくくられた数字   ...
論理値     ★     論理値はtrue(真)またはfalse(偽)          の2値しかとりえない値     ★        条件分岐等で使用      var ronri = true; // これは真            ...
関数     ★     (開発者の実装によって)定義される、          一連の実行可能なコードのこと      function square(x){        return x * x; // 引数として受け取った値を2乗して返...
関数                    変数と同名の関数がある場合、     ★        (開発者の実装によって)定義される、                    呼び出しは変数が優先される。             識別子    ...
関数リテラル     ★        名前を付けない関数     ★        無名関数・ラムダ関数とも呼びます。      var square = function(x){ return x*x; }                 ...
オブジェクト     ★     名前の付けられた値を集めたものをオブ          ジェクトと呼びます。     ★     個々のデータ値をそのオブジェクトの          プロパティと呼びます      Image.width /...
オブジェクトリテラル     ★        オブジェクトを生成し     ★     そのオブジェクトのプロパティを定義し          ておくことが出来るリテラル      { width : 50 , height : 100 } ...
配列     ★        データ値の集合     ★        集合は順番で管理     ★        順番のことをインデックスという      var games = [ mario , pokemon , tetris , z...
配列リテラル     ★        配列を生成し     ★     その配列の要素を定義しておくことが出          来るリテラル      [ mario , pokemon , tetris , zelda ]         ...
式 について13年1月12日土曜日
式とは     ★     JavaScriptインタプリタが評価して生成で          きるもの         • さっきまで触れていた「リテラル」も「式」の一              つ     ★     式同士の値を評価して値...
演算子についての参考URL     ★      http://www.scollabo.com/banban/          java/operation.html                                     ...
文 について13年1月12日土曜日
文とは     ★        JavaScriptに何かをさせるもの     ★        制御命令のようなもの     ★     プログラムとは「文」がいくつか集まっ          てできているもの               ...
if文(1)     ★     論理値を評価し、Trueである場合          記述されている処理を実行する      var age = 18;      // 値が18以上かどうか      if (age >= 18 ){    ...
if文(2) else句     ★     論理値を評価し、Trueでない場合のとき          の処理を書く         var age = 14;         // 値が18以上かどうか         if (age >=...
if文(3) else if文     ★     論理値を評価し、Trueでない場合のとき          の次の判断を書く         var age = 14;         if (age >= 18 ){ // 値が18以上か...
for文     ★        ループする処理     ★        指定した回数くりかえす     ★     以下の例は10回繰り返し、繰り返し回数          を画面に出力する      for(var i = 0; i <...
function文     ★        関数を定義する文        function print(msg) {          docment.write( msg + <br /> );        }             ...
return文     ★        関数が返却する値を定義する文        function square(x) {          return x*x;        }                             ...
繰り返しと分岐については              これで行えるようになりました。               式・文・メソッドについては               スライドに書ききれないため              ハンズオンにて適宜続き...
Upcoming SlideShare
Loading in...5
×

できるつくれるJavascript 初学者講座

1,425

Published on

2013年1月12日

Transcript of "できるつくれるJavascript 初学者講座"

  1. 1. できる つくれる JavaScript 〜 超初学者向け講座 〜13年1月12日土曜日
  2. 2. アジェンダ ★ 前置き:プログラミングを学ぶ って? ★ JavaScriptって なんだ? ★ 覚えておきたい事項 ★ 基本をハンズオンで勉強 213年1月12日土曜日
  3. 3. プログラミングを 学ぶ って?13年1月12日土曜日
  4. 4. ご参加の目的 (勝手な推測) ★業務で必要になので勉強しておきた い。 ★ 作ってみたいものがある。 ★ プログラミングを覚えたい。 ★初心者向けなので。そのうち役に立 つかもしれない。 413年1月12日土曜日
  5. 5. プログラミングが あなたに提供するものは 問題解決のための手段13年1月12日土曜日
  6. 6. それを得るための はじめの一歩から始めましょう13年1月12日土曜日
  7. 7. JavaScriptって なんだ?13年1月12日土曜日
  8. 8. JavaScriptとは ✴ ウェブブラウザで動作する (実質)唯一のプログラミング言語 ※JavaScript以外にもVBScript等の言語は動作するのですが、 対応ブラウザがごく一部(主にIE)に限られているため実質使えません。 なお、JavaScript以外を動作させる指定については、HTML5において黒歴史認定されたそうです。 813年1月12日土曜日
  9. 9. 話題のかわいいあのサイトの動きも http://pararaehon.com/13年1月12日土曜日
  10. 10. 面白げな文字列生成ツールも http://starwing.net/ suddenly_death.html13年1月12日土曜日
  11. 11. 本格的なゲームも http://www.smokymonkeys.com/ triglav/13年1月12日土曜日
  12. 12. JavaScriptで作れます13年1月12日土曜日
  13. 13. JavaScriptで作れます ※要:気合と根性13年1月12日土曜日
  14. 14. JavaScriptで やれることはいろいろ ★ぶっちゃけ、ブラウザの中でやりた いことはほとんどなんでもできます。 • 最近はブラウザ内のみにとどまらず、サー バー側の処理も作成できるようになりまし た(Node.js) 1413年1月12日土曜日
  15. 15. 覚えておきたい事項 (JavaScriptを勉強するにあたって)13年1月12日土曜日
  16. 16. 主要なウェブブラウザ 現在、主要であると言われているブラウザは だいたいこのへん InternetExplorer Opera(オペラ) (インターネット エクスプローラ) FireFox (ファイアフォックス) GoogleChrome Safari(サファリ) (グーグルクローム) 1613年1月12日土曜日
  17. 17. レンダリングエンジン JavaScriptは、ブラウザに搭載されている レンダリングエンジン上で動く WebKit 1713年1月12日土曜日
  18. 18. レンダリングエンジンとは? ★HTML,CSS,JavaScriptという、 Webページ記述用言語を解釈し、 実際に画面上に表示するためのプ ログラムのこと ★ブラウザに様々な要素が 表示されるのはこれのおかげ 1813年1月12日土曜日
  19. 19. 実は ブラウザごとに採用している レンダリングエンジンが異なる Prest Trident Gecko WebKit WebKit 1913年1月12日土曜日
  20. 20. ( ^o^)☎┐もしもし13年1月12日土曜日
  21. 21. ( ^o^)☎┐IEでずれる、ですか?13年1月12日土曜日
  22. 22. ( ^o^)Г☎チンッ13年1月12日土曜日
  23. 23. 何が起こるかというと WebKitではズレないけどTridentだとズレる というようなケースが発生したりする。 表示する形を決定づけるための Trident 「レンダリングエンジンが異なる」 ということは、 「出力結果も異なり得る」ということ WebKit WebKit 2313年1月12日土曜日
  24. 24. 何が起こるかというと WebKitではズレないけどTridentだとズレる というようなケースが発生したりする。 クロスブラウザ問題 表示する形を決定づけるための Trident 「レンダリングエンジンが異なる」 ということは、 「出力結果も異なり得る」ということ WebKit WebKit 2413年1月12日土曜日
  25. 25. クロスブラウザ問題 ★HTML,CSS,JavaScriptをブラウザで確認した 時に起こるブラウザ間の挙動差異による問題 ★主にブラウザの独自仕様や レンダリングエンジンのバグが原因で発生する ★ IE8以前のバージョンは、バグが顕著・・・ 2513年1月12日土曜日
  26. 26. イメージ✴同じゲームでもPS3版とXBOX版で動きが違うとか レンダリングエンジン レンダリングエンジン ある画面で止まっ XBOXより てしまう。PS3版 動きが遅い! HTML,CSS,JavaScript では正常なのに! ※実際はソフトをXBOX用とPS3用で作り分けるため、これは例として正しくありません。あくまでイメージ、 2613年1月12日土曜日
  27. 27. クロスブラウザ問題を なんとかするには ★原因そのものを何とかするのは 一個人には不可能 ★XBOXとかPS3の問題を直して、今 使ってる人に配布しなおしてって言わ れたら無理 ★よって、自分たちが作るもの側が原 因となる問題にあわせてやるしかない 2713年1月12日土曜日
  28. 28. クロスブラウザ問題を なんとかするには ★ 原因そのものを何とかするのは 一個人には不可能 クロスブラウザ対応スク リプトを書くのは ★ XBOXとかPS3の問題を直して、今 正直すごい大変 使ってる人に配布しなおしてって言わ れたら無理 ★ よって、自分たちが作るもの側が原 因となる問題にあわせてやるしかない 2813年1月12日土曜日
  29. 29. 具体的な例(1) ★http://codezine.jp/article/detail/ 158 • CodeZineの記事 ★ http://jsfiddle.net/seino/baMje/ • ここで見てみよう 2913年1月12日土曜日
  30. 30. 具体的な例(2) ★http://allabout.co.jp/gm/gc/ 39897/2/ • JavaScriptで通信を使おうとすると・・・ 3013年1月12日土曜日
  31. 31. 現実問題として ★クロスブラウザ問題に対応したプロ グラミングは大変 • 純粋な手間 • 検証の煩雑さ • 本来やらなくてもいい問題 感 3113年1月12日土曜日
  32. 32. ライブラリを 使いましょう ★jQueryをはじめとするJavaScriptラ イブラリは、これらの差異を吸収した 形で実装してくれています。 • ただし吸収率は100%ではありません。 ★時間と技術に余裕があるなら、自分 で差分吸収したライブラリを作るの も、手ではありますが・・・! 3213年1月12日土曜日
  33. 33. 基本を ハンズオンで勉強13年1月12日土曜日
  34. 34. 事前に ★ JavaScriptでは、文字列要素中以外を除 き、全角文字は使用できません。 • 例えば suuji = 123 など 全角数字はエラー ★ 全角スペースなども同様です。 ★ ハンズオン中、コードが動かなくなっ たら先ずここを疑ってみてください。 3413年1月12日土曜日
  35. 35. リテラルについて13年1月12日土曜日
  36. 36. リテラルとは ★ JavaScriptでプログラムに直接記述する データのこと。 ★ 定数とも表現する。 var hensuu1 = これは変数です ; // 文字 var suuti = 12; // 数値 3613年1月12日土曜日
  37. 37. 変数 ★ なんらかの値を保持しておくための要素 var hensuu1 = これは変数です ; 3713年1月12日土曜日
  38. 38. 変数 ★ なんらかの値を保持しておくための要素 ローカル変数として 識別させるためのキーワード 代入演算子 var hensuu1 = これは変数です ; 識別子 値 行末 3813年1月12日土曜日
  39. 39. 数値と数字 ★ 数値は純粋な数そのものを指し 数字は数文字を指します。 var suuti = 123; // 数値 var suuji = 456 ; // クオートでくくられた数字 3913年1月12日土曜日
  40. 40. 論理値 ★ 論理値はtrue(真)またはfalse(偽) の2値しかとりえない値 ★ 条件分岐等で使用 var ronri = true; // これは真 4013年1月12日土曜日
  41. 41. 関数 ★ (開発者の実装によって)定義される、 一連の実行可能なコードのこと function square(x){ return x * x; // 引数として受け取った値を2乗して返す } 4113年1月12日土曜日
  42. 42. 関数 変数と同名の関数がある場合、 ★ (開発者の実装によって)定義される、 呼び出しは変数が優先される。 識別子 一連の実行可能なコードのこと 基本、変数と同じ識別子にしないこと function square(x){ return x*x; // 引数として受け取った値を2乗して返す } 4213年1月12日土曜日
  43. 43. 関数リテラル ★ 名前を付けない関数 ★ 無名関数・ラムダ関数とも呼びます。 var square = function(x){ return x*x; } 4313年1月12日土曜日
  44. 44. オブジェクト ★ 名前の付けられた値を集めたものをオブ ジェクトと呼びます。 ★ 個々のデータ値をそのオブジェクトの プロパティと呼びます Image.width // 50 Image.height //100 4413年1月12日土曜日
  45. 45. オブジェクトリテラル ★ オブジェクトを生成し ★ そのオブジェクトのプロパティを定義し ておくことが出来るリテラル { width : 50 , height : 100 } 4513年1月12日土曜日
  46. 46. 配列 ★ データ値の集合 ★ 集合は順番で管理 ★ 順番のことをインデックスという var games = [ mario , pokemon , tetris , zelda ] games[3] // ゲームの集合の4番目 4613年1月12日土曜日
  47. 47. 配列リテラル ★ 配列を生成し ★ その配列の要素を定義しておくことが出 来るリテラル [ mario , pokemon , tetris , zelda ] 4713年1月12日土曜日
  48. 48. 式 について13年1月12日土曜日
  49. 49. 式とは ★ JavaScriptインタプリタが評価して生成で きるもの • さっきまで触れていた「リテラル」も「式」の一 つ ★ 式同士の値を評価して値を生成するものを 演算子と呼ぶ • 例えば12 + 5 の「+」は加算演算子 4913年1月12日土曜日
  50. 50. 演算子についての参考URL ★ http://www.scollabo.com/banban/ java/operation.html 5013年1月12日土曜日
  51. 51. 文 について13年1月12日土曜日
  52. 52. 文とは ★ JavaScriptに何かをさせるもの ★ 制御命令のようなもの ★ プログラムとは「文」がいくつか集まっ てできているもの 5213年1月12日土曜日
  53. 53. if文(1) ★ 論理値を評価し、Trueである場合 記述されている処理を実行する var age = 18; // 値が18以上かどうか if (age >= 18 ){ 処理を記述... } 5313年1月12日土曜日
  54. 54. if文(2) else句 ★ 論理値を評価し、Trueでない場合のとき の処理を書く var age = 14; // 値が18以上かどうか if (age >= 18 ){ 処理を記述... } else { trueではなかった時の処理を記述... } 5413年1月12日土曜日
  55. 55. if文(3) else if文 ★ 論理値を評価し、Trueでない場合のとき の次の判断を書く var age = 14; if (age >= 18 ){ // 値が18以上かどうか 処理を記述... } else if (age >= 16 ){ // では16以上かどうか 処理を記述... } else { // どの条件にも合致しなかったら trueではなかった時の処理を記述... } 5513年1月12日土曜日
  56. 56. for文 ★ ループする処理 ★ 指定した回数くりかえす ★ 以下の例は10回繰り返し、繰り返し回数 を画面に出力する for(var i = 0; i < 10 ; i++){ docment.write( i + <br /> ); } 5613年1月12日土曜日
  57. 57. function文 ★ 関数を定義する文 function print(msg) { docment.write( msg + <br /> ); } 5713年1月12日土曜日
  58. 58. return文 ★ 関数が返却する値を定義する文 function square(x) { return x*x; } 5813年1月12日土曜日
  59. 59. 繰り返しと分岐については これで行えるようになりました。 式・文・メソッドについては スライドに書ききれないため ハンズオンにて適宜続きを行なって まいりたいと思います。13年1月12日土曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×