![ Page 6
jQueryを使うと
<普通に書いた場合>
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
divs[i].style.color = 'red';
}
<jQueryを使った場合>
$('div').css('color', 'red');](https://image.slidesharecdn.com/jqueryjavascript-141115011033-conversion-gate01/85/jQuery-JavaScript-6-320.jpg)
![ Page 23
altJS 仕組み
[CoffeeScriptの場合]
１．CoffeeScriptを使ってコーデゖングする。
２．専用のコンパラを使って、ソースコードをコンパルする。
３．CoffeeScriptで書いたコードが、JavaScriptのソースコードに変換される。
以下のようにフゔルが変換される。
*.coffee ⇒ コンパル ⇒ *.js
引用元： http://html5experts.jp/clockmaker/2183/](https://image.slidesharecdn.com/jqueryjavascript-141115011033-conversion-gate01/85/jQuery-JavaScript-23-320.jpg)
More Related Content
What's hot (18)
Viewers also liked (20)
Similar to jQueryを中心としたJavaScript (20)
Recently uploaded (6)
jQueryを中心としたJavaScript
- 2. Page 2 jQueryとは？ オープンソースのJavaScriptライブラリ。 JavaScriptを使いやすくする仕組みを提供してくれる。 コンセプトは、「Write Less, Do More」 「より少ない書き方で、もっと多くこなす」 JavaScriptで出来ないことがjQueryを使えば出来る、 というものではないです。あくまでもJavaScript。
- 4. Page 4 JavaScriptおさらい JavaScriptは、単独で使うことはあまりなく、 HTMLやCSSと組み合わせて使用します。 引用元： http://all-web-school.blogspot.jp/2013/05/html5css-no4.html
- 6. Page 6 jQueryを使うと <普通に書いた場合> var divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { divs[i].style.color = 'red'; } <jQueryを使った場合> $('div').css('color', 'red');
- 9. Page 9 導入する場面について jQuery - .Net 項目 jQuery .Net 開発スタル ベント駆動 (これはどちらも同じ) 再利用性 非常に高い。 高い。 フォーム Htmlのフォームを使う。 標準で用意されている。 印刷機能 ブラウザの印刷機能 による。 OSレベルの印刷機能を制 御可能。 DBゕクセス 可能。(やることは無い) 可能。 フゔルの操作 ユーザが指定したフゔ ルに限り可能になった。 可能。 jQuery(JavaScript)は、ブラウザ上で動くことになるので ブラウザの制約を受けます。
- 10. Page 10 機能の拡張 jQuery Plugin タッチ操作に最適化されたモバル向け。 ンタラクテゖブな画面開発向け。 本体。 拡張機能。多種多様にあり、自作も可能。 jQuery本体と組み合わせて使用することで機能を拡張できる。
- 11. Page 11 開発環境 IDE IDE 名称 説明 NetBeans 高機能。無料で使える。 WebStorm 入力補完に強い。有料。 WebMatrix マクロソフト製。無料で使える。 クラウド型IDE 名称 説明 Cloud9 IDE 無料。複数言語をサポートしている。 Codenvy 日本語入力が出来ない。
- 12. Page 12 開発環境 Eclipse系、エディタ Eclipse系 名称 説明 Aptana Studio Eclipseと操作感が変わらず使える。起動が遅い。 Eclipse + WTP 定番で、よく使われている。 Spket IDE 商用利用の場合は有料。 エデゖタ 名称 説明 Sublime Text 色々なカスタマズが出来る。 Brackets Adobe製。入力補完が強い。 Coda 2 Mac用として有名。 Komodo Edit Windows、Mac、Linuxで使える。動作は重め。
- 13. Page 13 開発環境 webサービス ネットで手軽に実行出来るサト 名称 URL JS Bin http://jsbin.com/ jsFiddle http://jsfiddle.net/ Liveweave http://liveweave.com/ jsdo.it http://jsdo.it/ Liveweaveがおすすめ。 ブラウザさえあれば、すぐに試すことが出来る。
- 16. Page 16 バージョン 注意点 注意点 1.9のバージョンから、機能の削除や挙動の変更になりました。 1.9より前のバージョンを使っていて、1.9にゕップグレードする場合、 動作に影響を与えるので注意が必要です。 詳しい変更点は、以下を参照のこと。 http://jquery.com/upgrade-guide/1.9/ 2014/10/29追記 次のリリースより、バージョンの番号付けが変更になります。 「jQuery 1.11.1」の次期バージョンは、「jQuery Compat 3.0」 「jQuery 2.1.1」の次期バージョンは、「jQuery 3.0」 ネットで情報を収集するときに混乱すると思うので、注意が必要です。
- 18. Page 18 圧縮版について 圧縮版はフゔルサズが小さく、フゔルの取得が 早くなるのでリリース用として使用します。 読み難いため、デバッグには向いていません。 参考：最新バージョンのフゔルサズ 自作のコードも、ツールを使って簡単に圧縮可能。 http://minify.avivo.si/ 形式 フゔイル名 フゔイルサイズ 圧縮版 jquery-1.11.1.min.js 93.5KB 非圧縮版 jquery-1.11.1.js 276KB
- 19. Page 19 jQuery以外のJavaScriptライブラリ jQuery以外にも、とても多くのラブラリがあります。 代表的なものを挙げてみます。 <ユーテゖリテゖ系> Prototype、MooTools、Zepto、YUI Library <制御系> AngularJS、Backbone.js、Ember.js、KnockoutJS <グラフゖック系> D3.js、three.js ＜備考＞ 以下のサトは、TODOゕプリを、それぞれのJavaScriptラブラリを使って 実装している。違いが分かるので面白い。 http://todomvc.com/
- 20. Page 20 JavaScript 歴史 JavaScriptに焦点を当てて、これまでの歴史を見てみます。 1995年 JavaScript登場。 2005年 Ajaxの普及。 2006年 jQueryが始めてリリースされる。 2006年頃 リッチクラゕント全盛期。 2010年 altJSの登場。
- 21. Page 21 altJSとは？ alternative JavaScript JavaScriptの代替となるプログラミング言語全般の総称。 最近、このaltJSと呼ばれる言語が増えています。 CoffeeScript、TypeScriptなど。 参考： https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS 簡単な概要としては、 「これらの言語でコーデゖングしてコンパルすると JavaScriptが出来上がる」というもの。
- 22. Page 22 altJS なぜ必要なのか？ では、なぜ必要なのでしょうか？ はじめからJavaScriptで開発すればいいように思います。 なぜ？ JavaScriptに求められる要求が高く、また増えた。 開発規模も大きくなっている。 jQueryで楽にはなったけどもっと簡単に出来ないか・・・ でも、JavaScriptだと、言語の仕様上難しい。 それなら、別の言語で簡単に書いて、 JavaScriptを生成してしまえ・・・
- 23. Page 23 altJS 仕組み [CoffeeScriptの場合] １．CoffeeScriptを使ってコーデゖングする。 ２．専用のコンパラを使って、ソースコードをコンパルする。 ３．CoffeeScriptで書いたコードが、JavaScriptのソースコードに変換される。 以下のようにフゔルが変換される。 *.coffee ⇒ コンパル ⇒ *.js 引用元： http://html5experts.jp/clockmaker/2183/