Javascript基礎勉強会
•
7 likes•2,240 views
下記勉強会の発表資料です。 --------------------------------------------------------- 【東京】【女性/女性同伴男性限定】JavaScript基礎勉強会～クリスマスカードを作ろう～ #javajo - Java女子部 | Doorkeeper https://javajo.doorkeeper.jp/events/35656 ---------------------------------------------------------
Recommended
More Related Content
What's hot
Viewers also liked
Viewers also liked (20)
Recently uploaded
Recently uploaded (7)
Javascript基礎勉強会
- 2. 自己紹介 木村茉由（きむらまゆ） 株式会社オープンストリーム所属 フロントエンドアーキテクト @kimura_m_29
- 3. ハンズオンセットアップ 1. ハンズオン用プロジェクトをcloneする 2. 依存ライブラリをダウンロード 3. アプリ起動 1. Mac 2. Win $ git clone https://github.com/kimura-m-29/xmascard_hands-on.git $ cd xmascard_hands-on/ $ npm install $ npm start $ npm run start:win
- 5. JavaScriptとは 1995年にNetscape社のブレンダンアイク氏（現 Brave Software社CEO）によって開発された言語 『Java』Scriptの名称は、当時注目株だったJavaにあ やかったもの Netscape2.0に実装され、1996年にはIE3.0に実装さ れる 現在では、ECMAインターナショナルによって ECMAScriptとして標準化されている 最新の仕様であるES6(ES2015)が2015年6月に公開さ れた 今回の勉強会では、基礎ということでES5をお勉強します
- 6. Javaとの違い(1/2) ブラウザ上で動作する 最近はサーバ上（後述）でも動作する スクリプト言語 コンパイル処理を行わずに、そのまま実行する 動的型付け プログラム実行時に型が決まる
- 7. Javaとの違い(2/2) 基本シングルスレッド 重い処理を行うと、画面が固まる WebWorkersを使うことで並行処理を行うことができる（が、 画面のUIに対する処理はメインスレッドでしか行えない） プロトタイプベースのオブジェクト指向 インスタンス生成、継承の仕方が大きく異なる 今回は触れません クロージャ 関数を返す関数を作り、外側の関数スコープの状態を含んだ関 数オブジェクトを生成する手法 今回は触れません
- 8. 関数 Javaと異なり、多重定義ができない 引数に型を指定できない 仮引数と呼び出し時の引数の数が一致しなくても呼び出せる 関数をオブジェクトとして扱うことができる（第1級関数） 関数を引数にとる関数を扱うことができる（高階関数） function 関数A(仮引数名1[,仮引数名2,…]) { // 処理 } // 呼び出す 関数A(引数1); // こちらも同じ関数が呼ばれる 関数A(引数1,引数2);
- 9. 関数 クリスマスカードと一緒に起動した、Developer Tools のConsole上で以下を実行してください function greet (name) { alert(“こんにちは、 “ + name + “さん！”); } // 呼び出す greet(“サンタ”); // こちらも同じ関数が呼ばれる greet(“サンタ”, “トナカイ”); // 文字列じゃなくても呼び出せる greet(2015);
- 10. 関数 //関数をオブジェクトとして扱うことができる（第1級関数） // -> 変数に関数を代入できる var a = function () { console.log(“call a!”); }; // 呼び出す a(); // -> “call a!” // 関数を引数にとる関数を扱うことができる（高階関数） function b(func){ // 引数で渡された関数を実行する func(); } b(a); // -> “call a!”
- 11. 変数 関数内でvarを付けるとローカル変数、付けないとグローバル 変数になる ブラウザ上で実行する場合、グローバル変数はWindowオブジェクト に属する 「window.グローバル変数」で参照できる varを付けて宣言しても、それが関数の外であればグローバル変数に なる ローカル変数のスコープは関数。ブロックスコープはない 関数内のローカル変数は、どこで宣言していても、内部の処理では関 数の先頭で宣言されたように扱われる（巻き上げ） ただし、変数への値の初期化は元の宣言箇所で行われる var 変数名 = 値;
- 12. 変数(グローバル・ローカル) function a () { var localA = “abc”; globalB = “def”; } var globalC = “ghi”; // a関数を呼び出す（=localA、globalBが宣言される） a(); console.log(localA); // -> undefined console.log(globalB); // -> “def” console.log(globalC); // -> “ghi” console.log(window.globalB); // -> “def”
- 13. 変数(巻き上げ) var a = “global a”; function b(){ console.log(a); var a = “local a”; } b(); // -> “global a”と思いきや、undefined // 内部的には↓ // function b(){ // // グローバル変数aがローカル変数aで上書きされる // var a; // console.log(a); // ローカル変数aは、まだ初期化されていない // a = “local a”; // }
- 14. if文・for文・switch文 基本的にはJavaの文法と一緒 ブロックスコープがないので、ローカル変数の名前は関数内で 一意になるようにする for (var i = 0; i < 10; i++) { // 処理 } console.log(i); // -> 10
- 15. 型変換 var a = 0; a = “Hello”; // -> エラーにならない var b = 1; b += “です”; console.log(b); // -> 1です var c = [1, 2, 3]; // 条件を評価する際に、boolean型に変換される if(c.length){ // 処理 }
- 16. 参考ページ JavaScript ガイド - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide
- 18. ハンズオン用PJで使っているツール Node（node.js） https://nodejs.org/en/ JavaScript実行環境 「サーバサイドJavaScript」で有名 JavaScriptはサーバ上でも動く、というのはこのこと 同じJavaScriptでも、ブラウザ上で動くJavaScriptとは別の 方向で進化している フロントエンド開発ではあくまで実行環境として使用する npm Nodeに同梱されているパッケージ管理ツール インストール パッケージの公開 タスク実行 Javaのmavenにちょっと近いかも pom.xmlにあたるのがpackage.json
- 19. ハンズオン用PJで使っているツール Electron http://electron.atom.io/ HTML/CSS/JavaScriptを使って、デスクトップアプリを開発 することができるツール AtomやVisual Studio CodeやKobito、Slackもこれで作られている
- 21. 使用しているライブラリ ページめくり BookBlock https://github.com/codrops/BookBlock アイコンめくり jQuery Flip https://github.com/nnattawat/flip モーダル表示 Boxer https://github.com/FormstoneClassic/Boxer
- 22. ハンズオンの進め方 ＜初級編＞ プレゼントの内容をカスタマイズしてみる ＜中級編＞ プレゼントを好きな日付に配置してみる ＜上級編＞ どの日付をめくったかを保存しておく 新しいページを追加し、1から作ってみる