Submit Search
Upload
Web制作勉強会 #2
•
0 likes
•
614 views
Moto Yan
Follow
Web制作勉強会第二回の資料 jQuery入門です。
Read less
Read more
Design
Report
Share
Report
Share
1 of 26
Download now
Download to read offline
Recommended
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
Learning jQuery
Learning jQuery
taiju higashi
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
civic Sasaki
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
Atsushi Tadokoro
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
モテる JavaScript
モテる JavaScript
Osamu Monoe
TypeScriptへの入口
TypeScriptへの入口
Sunao Tomita
Recommended
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
Learning jQuery
Learning jQuery
taiju higashi
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
civic Sasaki
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
Atsushi Tadokoro
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
モテる JavaScript
モテる JavaScript
Osamu Monoe
TypeScriptへの入口
TypeScriptへの入口
Sunao Tomita
JQuery入門
JQuery入門
sayoko miura
Webpackにトライ 基本編
Webpackにトライ 基本編
シオリ ショウノ
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
しくみ製作所
Java script
Java script
sayoko miura
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしよう
Yuusuke Takeuchi
モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目
大樹 小倉
141115 making web site
141115 making web site
Himi Sato
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
Capybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピング
Koji Nakamura
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Maaya Ishida
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
Mayu Kimura
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
Rubyによるクローラー開発
Rubyによるクローラー開発
しくみ製作所
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
Muyuu Fujita
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
Muyuu Fujita
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
parrotstudio
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
jQueryで気をつけてほしいこと
jQueryで気をつけてほしいこと
良太 増子
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
More Related Content
What's hot
JQuery入門
JQuery入門
sayoko miura
Webpackにトライ 基本編
Webpackにトライ 基本編
シオリ ショウノ
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
しくみ製作所
Java script
Java script
sayoko miura
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしよう
Yuusuke Takeuchi
モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目
大樹 小倉
141115 making web site
141115 making web site
Himi Sato
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
Capybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピング
Koji Nakamura
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Maaya Ishida
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
Mayu Kimura
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
Rubyによるクローラー開発
Rubyによるクローラー開発
しくみ製作所
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
Muyuu Fujita
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
Muyuu Fujita
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
parrotstudio
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
jQueryで気をつけてほしいこと
jQueryで気をつけてほしいこと
良太 増子
What's hot
(20)
JQuery入門
JQuery入門
Webpackにトライ 基本編
Webpackにトライ 基本編
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
Java script
Java script
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしよう
モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目
141115 making web site
141115 making web site
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Capybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピング
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
はじめよう Backbone.js
はじめよう Backbone.js
Rubyによるクローラー開発
Rubyによるクローラー開発
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
WordPress を使いこなそう
WordPress を使いこなそう
jQueryで気をつけてほしいこと
jQueryで気をつけてほしいこと
Similar to Web制作勉強会 #2
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
JavaScriptトレンド総括(2014)
JavaScriptトレンド総括(2014)
VOYAGE GROUP
Web development fundamental
Web development fundamental
Takuya Kumagai
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
terurou
javascript を Xcode でテスト
javascript を Xcode でテスト
Yoichiro Sakurai
ちゃんとWeb会議スライド『Coffee script』
ちゃんとWeb会議スライド『Coffee script』
H2O Space. Co., Ltd.
Java scriptの進化
Java scriptの進化
maruyama097
TypeScriptをオススメする理由
TypeScriptをオススメする理由
Yusuke Naka
Re-frame and A-Frame
Re-frame and A-Frame
Kazuhiro Hara
Web development fundamental_v2
Web development fundamental_v2
Takuya Kumagai
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
Takumi Ohashi
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発
tak-nakamura
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Hishikawa Takuro
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
Inside frogc in Dart
Inside frogc in Dart
Goro Fuji
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
Hiroki Toyokawa
20110714 j queryベーシック
20110714 j queryベーシック
良太 増子
全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験
AdvancedTechNight
Java script1
Java script1
Kiminari Homma
Similar to Web制作勉強会 #2
(20)
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
JavaScriptトレンド総括(2014)
JavaScriptトレンド総括(2014)
Web development fundamental
Web development fundamental
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
javascript を Xcode でテスト
javascript を Xcode でテスト
ちゃんとWeb会議スライド『Coffee script』
ちゃんとWeb会議スライド『Coffee script』
Java scriptの進化
Java scriptの進化
TypeScriptをオススメする理由
TypeScriptをオススメする理由
Re-frame and A-Frame
Re-frame and A-Frame
Web development fundamental_v2
Web development fundamental_v2
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Inside frogc in Dart
Inside frogc in Dart
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
20110714 j queryベーシック
20110714 j queryベーシック
全部入り!WGPで高速JavaScript+HML5体験
全部入り!WGPで高速JavaScript+HML5体験
Java script1
Java script1
Web制作勉強会 #2
1.
Web Designing Talk
#2 徹底入門! jQuery ウゴくページヘの道。
2.
今日のテーマ
ウゴく 動きのあるページを作れるようになろう。 2
3.
そのために… ちょっと 「プログラミング」をしてもらいます。
3
4.
典型的反応例 俺文系だからプログラミングとかできねーし。
4
5.
黙れ小僧!
5
6.
文系病
そういうのを文系病と言います。 6
7.
ウゴ(動)くページを作ろう • ポインタを重ねると画像が変わる
• クリックしたら詳細がウニョって出る • スライドショーっぽく画像が流れる 7
8.
ページが動けば心も く
ゴ ウ 題して、「恋する❤」ページを作る会
9.
9
10.
本日の内容 •
実際に動かすには? • Javascriptについての解説(30秒) • jQueryとは? • Javascriptの書き方 • ラクラクjQueryの使い方 • 秘技プラグインへの道 • 制作タイム 10
11.
実際に動かすには? •
CSSで状態を定義する • Flash使っちゃう 今日はコレ • Javascriptで動かす etc.... 11
12.
Javascriptについて
• ブラウザ上で動く事実上唯一のプログ ラミング言語。 • JavascriptとJavaは違う。 • 略すならJSと略しましょう。 以上。 12
13.
Javascriptについて
細かくやると。。 Javascriptは元々Netscape社が開発したプロトタイプベースオブジェクト指向言語です。現在はECMAScriptという名前 で標準化されており、この実装には各ブラウザのJavascriptの他にFlashのActionScriptやJScriptなどがあります。主にク ライアントサイドで用いられるための言語として開発、普及が行われましたが、近年はnode.jsなどを始めとしたサーバサ イドJSも注目を集めています。言語としての特徴は動的型付け言語で、前述のとおりプロトタイプベースの言語であるこ と、またファイル制御などについては標準のIOを持たず、サンドボックス内で実行される前提になっているところに特徴が ある。言語的には無名関数や高階関数をサポートしており、記述すると関数型言語のような記述になることが多いです。ま た、整数型を持たず、内部的には浮動小数点演算がベースになっているため、Javascript登場時には実行速度がすこぶる遅 かったです。またサンドボックスの実装がこなれていなかったこともあり、IEではActiveXと組み合わさってセキュリティ い。 ホールがいくつかあったため、実行速度の遅さと大した活用法が見出されていなかったこともあり、ほとんど普及していま せんでした。しかし2000年代前半からGoogleMapsなどを始めとしたAjax技術の再発見により、言語の価値が再評価され ることになりました。現在ではJavascriptの開発も徐々に大規模化してきており、prototype.jsやjQueryといったライブ 良 ラリ化にとどまらず、CoffeeScriptのようなJavascriptの記述性を高めるために、Javascriptをターゲット言語とした コードジェネレータ実装まで登場し始めている。なお、言語の基本的な制御構文や演算子についてはC言語のそれらを下敷 でも きにしているため、CやJavaを扱ったことのある人間であれば入り口はとっつきやすい。しかしオブジェクト指向の部分に ついてはC++やJavaといったクラスベースのオブジェクト指向言語とは異なるプロトタイプベースを採用しているため、慣 熟にはそれなりに経験が必要と思われます。またバッドノウハウを必要とする場面も多く、オライリーのサイ本とチョウ チョ本は事実上必携です。 どう 割と 13
14.
jQueryとは?
• JavascriptでHTMLを動かすのをとっ ても簡単にしてくれるライブラリ • 実質業界標準 機能集のこと • イカしてる 14
15.
Javascriptの書き方
書き方は主に2種類 • HTMLのonホニャララ属性に書く <h1 onmouseover= alert( マウスが乗った ) >見出し</h1> • scriptタグの中に書く <script type= text/javascript > alert( このプログラムがロードされた ); </script> 15
16.
Javascriptの書き方
よく使うonホニャララ属性 • onmouseover/onmouseout ポインタが乗った時、離れた時 • onclick/ondoubleclick クリック時、ダブルクリック時 • onload 読み込み完了時 16
17.
ラクラクjQueryの使い方
jQueryの使用を宣言する。 HTMLの<head>∼</head>の間に次をぶ ち込む。 <script type="text/javascript" src="https:// ajax.googleapis.com/ajax/libs/jquery/ 1.8.3/jquery.min.js"></script> 17
18.
ラクラクjQueryの使い方
全ては対象を操作する。 $( #header ).attr( src , a.jpeg ); 対象 操作 18
19.
ラクラクjQueryの使い方
CSSの記法で対象を選択するので直感的 $( #header ).attr( src , a.jpeg ); CSS記法 src属性をa.jpegに変更 19
20.
ラクラクjQueryの使い方
各部の詳細。 何の機能を使うか $( #header ).attr( src , a.jpeg ); jQueryを使う宣言 文の終わり 20
21.
ラクラクjQueryの使い方
よく使う機能 attr 指定した属性を取得、変更 slide アニメーションを付ける bind イベント発生時の処理を指定 21
22.
ラクラクjQueryの使い方
もっと多彩な機能がほしい時は http://semooh.jp/jquery/ 22
23.
秘技プラグインへの道
「何か」をしたいと思った時、すでにそ れは誰かが作った後かもしれません。 巨人の肩に立つ。 23
24.
秘技プラグインへの道 •
「jquery プラグイン」でググろう。 • 自分が欲しい機能の名前を知ろう。 • ライトボックス、カルーセル、スター レーティング、スライドショーetc 語彙が豊富な人でないと、 インターネットを使うのは難しい。 24
25.
秘技プラグインへの道
イイと思ったヤツははてブで公開中。 http://b.hatena.ne.jp/calcs/ 25
26.
ボクと契約して
Webデザイナーになってよ! Web Creation Seminar
Download now