Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
株式会社ステラリンク
〒743-0065
山口県光市上島田7-1-1
http://www.stellalink.co.jp/
info@stellalink.co.jp
Web × プログラミング
~jQuery 編~
代表取締役 石川 博之...
本日のアジェンダ
 開会
 セッション
 JavaScriptについて(おさらい)
 jQueryについて
 前回のおさらい
 制作タイム
 質問&相談タイム
 まとめ・閉会
 次回のテーマ
2
セッション
7
JavaScriptについて(おさらい)
JavaScript
 スクリプト言語
 マルチパラダイムプログラミング言語
 弱い動的型付け
 元々はNetspace, Inc.が開発
 Netscape Navigator 2.0で初搭...
Webのしくみとプログラミング
リクエスト
レスポンスクライアント サーバ
URLからサーバを特定
リクエスト
レスポンス受信
受信結果を解析
スクリプトの場合は処理
画面表示
リクエスト受信
スクリプトの場合は処理
結果をブラウザに返す
9
Webのしくみとプログラミング
UI
Webサーバ
DBプログラム等
HTTP
request
response
(HTML等)
10
JavaScriptにより
画面上のオブジェクトを
動的に操作
jQuery
 JavaScriptコードを容易に実装できるようにした軽量ライブラリ
 2006年初版
 主な特徴
 ブラウザに依存しないセレクタによるDOM選択
 DOM操作と変更
 イベント
 CSS操作
 エフェクト、アニ...
jQuery
 採用環境の拡大 → 事実上のデファクトスタンダードへ
 Microsoft、ノキアでの採用
 開発環境での対応
 Ruby on RailsでのJavaScriptライブラリとしての採用
 WordPressなどのCM...
使用方法
 ライブラリの取り込み
 <script type="text/javascript" src="jquery.js"></script>
 呼び出しの実行
 $.trim(str);
 $(‘p.foo’).addClas...
で、実際どうなの?
 現在も採用は多い
 エフェクトやアニメーションはCSSでの実装に移行しつつある
 JavaScript自体の拡張により同様の実装が容易にできつつある
 より軽量化するために素のJavaScriptや別のライブラリに...
今日の課題
15
https://goo.gl/RMnfpa
さあ、ライブプログラミングの時間だ!
17
ご清聴ありがとうございました
18
質問&相談タイム
20
まとめ
21
次回のテーマ
22
次回
11/16(木) 18:30~
24
本日はありがとうございました
25
26
Upcoming SlideShare
Loading in …5
×

「Web × プログラミング」 ~jQuery編~ #2

228 views

Published on

「Web × プログラミング」 ~jQuery編~ #2
ウェブを支える技術を知り、覚え、活用!さまざまなプログラムとウェブとの関わりや技術を基礎から知り学ぶ勉強会。

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

「Web × プログラミング」 ~jQuery編~ #2

  1. 1. 株式会社ステラリンク 〒743-0065 山口県光市上島田7-1-1 http://www.stellalink.co.jp/ info@stellalink.co.jp Web × プログラミング ~jQuery 編~ 代表取締役 石川 博之  日時:2017/10/19 18:30~20:00 (毎月第3木曜)  会場:Creative Coworking カラム (山口県周南市) 株式会社ステラリンク 〒743-0065 山口県光市上島田7-1-1 http://www.stellalink.co.jp/ info@stellalink.co.jp
  2. 2. 本日のアジェンダ  開会  セッション  JavaScriptについて(おさらい)  jQueryについて  前回のおさらい  制作タイム  質問&相談タイム  まとめ・閉会  次回のテーマ 2
  3. 3. セッション 7
  4. 4. JavaScriptについて(おさらい) JavaScript  スクリプト言語  マルチパラダイムプログラミング言語  弱い動的型付け  元々はNetspace, Inc.が開発  Netscape Navigator 2.0で初搭載  現在は ECMAScript-262 にて仕様定義あり  http://www.ecma-international.org/publications/standards/Ecma-262.htm 8
  5. 5. Webのしくみとプログラミング リクエスト レスポンスクライアント サーバ URLからサーバを特定 リクエスト レスポンス受信 受信結果を解析 スクリプトの場合は処理 画面表示 リクエスト受信 スクリプトの場合は処理 結果をブラウザに返す 9
  6. 6. Webのしくみとプログラミング UI Webサーバ DBプログラム等 HTTP request response (HTML等) 10 JavaScriptにより 画面上のオブジェクトを 動的に操作
  7. 7. jQuery  JavaScriptコードを容易に実装できるようにした軽量ライブラリ  2006年初版  主な特徴  ブラウザに依存しないセレクタによるDOM選択  DOM操作と変更  イベント  CSS操作  エフェクト、アニメーション  Ajax  ユーティリティ(ブラウザ情報取得、each関数等)  拡張性 → jQueryプラグイン  「$関数」  jQuery名前空間の別名(エイリアス) 11 $var = ‘A’; jQuery(‘A’) $(‘A’)
  8. 8. jQuery  採用環境の拡大 → 事実上のデファクトスタンダードへ  Microsoft、ノキアでの採用  開発環境での対応  Ruby on RailsでのJavaScriptライブラリとしての採用  WordPressなどのCMSでの採用例  Ajaxに容易に対応できることによる採用の拡大 12
  9. 9. 使用方法  ライブラリの取り込み  <script type="text/javascript" src="jquery.js"></script>  呼び出しの実行  $.trim(str);  $(‘p.foo’).addClass(‘bar’);  $(‘p.foo a.bar’).addClass(‘bar’);  $(‘p.foo > a.bar’).addClass(‘bar’);  複数のDOMノードを操作する場合は 13
  10. 10. で、実際どうなの?  現在も採用は多い  エフェクトやアニメーションはCSSでの実装に移行しつつある  JavaScript自体の拡張により同様の実装が容易にできつつある  より軽量化するために素のJavaScriptや別のライブラリに置き換える動 きも出てきている 14
  11. 11. 今日の課題 15 https://goo.gl/RMnfpa
  12. 12. さあ、ライブプログラミングの時間だ! 17
  13. 13. ご清聴ありがとうございました 18
  14. 14. 質問&相談タイム 20
  15. 15. まとめ 21
  16. 16. 次回のテーマ 22
  17. 17. 次回 11/16(木) 18:30~ 24
  18. 18. 本日はありがとうございました 25
  19. 19. 26

×