More Related Content
Webページで学ぶJavaScript2013 第5回 むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8 BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門！ What's hot (20)
非ガチ勢「よし、Coffee script使おう！」 Webページで学ぶJavaScript2013 第8回 普段Djangoを使っている人間がruby on railsを勉強してみた話 フリーランスミートアップを開催してきた@Creators MeetUp #44 JavaScriptユーティリティライブラリの紹介 Webページで学ぶJavaScript2013 第7回 グリッドレイアウトを簡単に行うJavaScript！Masonry.js JavaFXとRoboVMを使ってiOS上で動くアプリを試してみた 毎日ブログを書いてみた ブロガーズフェスティバル 2015 Viewers also liked (9)
Alfresco node lifecyle, services and zones 企業のためのコンテンツプラットホーム Alfresco 開発者向けAlfrescoのご紹介（2013/03/27 JJUG ナイトセミナー「Java製OSS特集」発表資料） Liferayのパートナーの視点からみた オープンソースのこれから Alfresco勉強会#26 Alfresco SDK + Eclipseで開発してみよう 全社情報共有サイトへの Alfresco Community 5 導入事例紹介 - 第27回Alfresco勉強会 Similar to 今さら始めるJavaScript (20)
第四回 JavaScriptから始めるプログラミング2016 Web development fundamental HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv... Web development fundamental_v2 ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生：柳井 政和 jQueryの先に行こう！最先端のWeb開発トレンドを学ぶ Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン Webapp startup example_to_dolist Javascriptのデザインパターン【勉強会資料】 RESTful開発フロントエンド編（SPA・AltJS・フレームワーク） 「html5 boilerplate」から考える、これからのマークアップ More from Ashitaba YOSHIOKA (20)
メタプログラミングRuby勉強会#7（fluentプラグイン） Alfresco Java Foundation API Alfresco and Web Script (English) 今さら始めるJavaScript
- 3. 自己紹介
‣ mryoshio
→ A社の社員
→ AlfrescoやLiferayのコンサルタントやっています
→ ソースコードを読んだりカスタマイズしたり
→ Twitterでは基本的に愚痴か食事など生活臭漂うツイートだけです
→ Facebookやってますがフレンド申請スパムには引っかかりません
- 4. 後ろ向きな動機（ me）
‣ JavaScriptやりたくない
→ レスポンシブWebデザインとやらが言われているので重い腰を上げざ
るを得ない気がする。こんな調子でRetina対応とかもしないと駄目
なのだろうか。⃝ppleェ...
‣ レスポンシブWebデザイン
→ Webサイトを作り際の方法の1つ。視聴する端末の解像度に合わせて
表示内容を適切に変化させる。PCだろうがタブレットのような携帯
端末だろうがちゃんと見られるようにしろということ
→ （参考: http://designmodo.com/responsive-design-examples/）
- 5. 前向きな動機（ me）
‣ 技術の幅が広がる
→ 偏見を捨てて取り組むと面白かったことが過去に幾つもあるのでやっ
てみてもいいかも。人としての心の幅も広がるといいね（希望）
‣ プロトタイプを作れる
→ JavaScriptライブラリを使えるとフロントを持つプロトタイプくら
いは自分で作れるようになる。本格的にレイアウトきれいにするなら
デザイナを入れるべきだけど
‣ 手に職を
→ Ajaxという言葉が出てからJavaScript関連技術はプロジェクト内で
も重宝されてきた気がするので身に着けておいて損は無い。私は
JavaScriptライブラリが出る前から書いてたけどね（ドヤッ
- 7. JavaScriptライブラリを探してみよう
‣ ライブラリ?
→ プログラムなんてのは（JavaScriptに限らず）簡単に汚く書けてしまう。
そこで、偉大な先人が用意してくれたライブラリを使うことで定型的なメ
ソッドやかゆいところに手が届くメソッドを、クロスブラウザで簡単に実
行できる
‣ 何ができるの?
→ DOMの操作、タイマーの設定、HTTPリクエスト、イベント処理などを簡
単に行える
- 8. きっとお気に入りが見つかるはず
‣ jQuery
→ 日本で最も使われているのではないかと思う（体感）。使いやすいし、プ
ラグインを入れることで機能を簡単に拡張できる。プラグインを書くこと
も割と簡単
‣ Dojo
→ 日本ではあまり聞かないけど名前が良い。私はこれが好きである。
‣ Prototype
→ シンプル。とにかくシンプル
- 11. jQueryで楽したコード
‣ id: hogeのテキストボックスに対し...
→ 値を取得/設定 => $( #hoge ).val(); / $( #hoge ).val( new value );
→ text クラスを追加 => $("#hoge").addClass("text");
→ text クラスを削除 => $("#hoge").removeClass("text");
- 12. jQueryで楽したコード2
‣ 東京電力の最新供給状況を取得して表示
function successCb(data) {
var el;
$.each(data, function(k, v) {
el = $("<span/>");
el.text(k+" => "+v);
el.append($("<br/>"));
$("#latest").append(el);
});
};
$.ajax({
success: successCb,
timeout: 5000,
dataType: "jsonp",
url: "http://tepco-usage-api.appspot.com/latest.json"
});
- 18. 参考
‣ デモで利用したライブラリ群
→ jQuery => http://jquery.com/
→ jQuery UI => http://jqueryui.com/
→ jWizard => http://dominicbarnes.us/jWizard/
→ jQuery Slider^2 => http://wex.im/jquery-slider2
![目次
‣ 自己紹介
‣ 後ろ向きな動機
‣ 前向きな動機
‣ 何を始めたらよいのか分からない人へ
‣ 楽したい
‣ [デモ] それらしく見えるサイト
‣ おわりに](https://image.slidesharecdn.com/javascript-120704041302-phpapp01/85/JavaScript-2-320.jpg)
![[デモ] それらしく見えるサイト](https://image.slidesharecdn.com/javascript-120704041302-phpapp01/85/JavaScript-13-320.jpg)
