Enviar pesquisa
Carregar
マークアップ講座 04 jQuery - JavaScript
•
0 gostou
•
850 visualizações
eiji sekiya
Seguir
マークアップ講座 04 jQuery - JavaScript
Leia menos
Leia mais
Design
Vista de apresentação de diapositivos
Denunciar
Compartilhar
Vista de apresentação de diapositivos
Denunciar
Compartilhar
1 de 38
Baixar agora
Baixar para ler offline
Recomendados
Start React with Browserify
Start React with Browserify
Muyuu Fujita
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Makoto Chiba
Vue.js 2.0を試してみた
Vue.js 2.0を試してみた
Toshiro Shimizu
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
Kawaz的jQuery入門
Kawaz的jQuery入門
Kohki Miki
Recomendados
Start React with Browserify
Start React with Browserify
Muyuu Fujita
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Makoto Chiba
Vue.js 2.0を試してみた
Vue.js 2.0を試してみた
Toshiro Shimizu
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
Kawaz的jQuery入門
Kawaz的jQuery入門
Kohki Miki
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Ryuma Tsukano
One Time Binding & Digest Loop
One Time Binding & Digest Loop
Kon Yuichi
Ma gician <wide version> @meguro.es 2019/10/10
Ma gician <wide version> @meguro.es 2019/10/10
Eucen Stew
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
The master plan ofscaling a web application
The master plan ofscaling a web application
Yusuke Wada
HTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
Angular js or_backbonejs
Angular js or_backbonejs
Omasa Yusaku
Jsf アプリ作ったった
Jsf アプリ作ったった
Oda Shinsuke
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Satoshi Anai
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
Takahiro Maki
AngularJS入門
AngularJS入門
Kenji Shirane
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
IRI MO
はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)
はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)
a know
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Akira Inoue
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
Hiroki Toyokawa
Mais conteúdo relacionado
Mais procurados
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Ryuma Tsukano
One Time Binding & Digest Loop
One Time Binding & Digest Loop
Kon Yuichi
Ma gician <wide version> @meguro.es 2019/10/10
Ma gician <wide version> @meguro.es 2019/10/10
Eucen Stew
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
The master plan ofscaling a web application
The master plan ofscaling a web application
Yusuke Wada
HTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
Angular js or_backbonejs
Angular js or_backbonejs
Omasa Yusaku
Jsf アプリ作ったった
Jsf アプリ作ったった
Oda Shinsuke
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Satoshi Anai
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
Takahiro Maki
AngularJS入門
AngularJS入門
Kenji Shirane
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
IRI MO
はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)
はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)
a know
Mais procurados
(20)
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
One Time Binding & Digest Loop
One Time Binding & Digest Loop
Ma gician <wide version> @meguro.es 2019/10/10
Ma gician <wide version> @meguro.es 2019/10/10
Web制作勉強会 #2
Web制作勉強会 #2
The master plan ofscaling a web application
The master plan ofscaling a web application
HTML5 on ASP.NET
HTML5 on ASP.NET
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Angular js or_backbonejs
Angular js or_backbonejs
Jsf アプリ作ったった
Jsf アプリ作ったった
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
AngularJS入門
AngularJS入門
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)
はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)
Semelhante a マークアップ講座 04 jQuery - JavaScript
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Akira Inoue
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
Hiroki Toyokawa
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
normalian
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発
tak-nakamura
TDC20111031_Groovy_Geb
TDC20111031_Groovy_Geb
Nobuhiro Sue
Web development fundamental
Web development fundamental
Takuya Kumagai
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Daizen Ikehara
Java/Androidセキュアコーディング
Java/Androidセキュアコーディング
Masaki Kubo
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
Daisuke Yamazaki
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
scala+liftで遊ぼう
scala+liftで遊ぼう
youku
HTML5最新動向
HTML5最新動向
Shumpei Shiraishi
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Hishikawa Takuro
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
インフラジスティックス・ジャパン株式会社
Selenium webdriver使ってみようず
Selenium webdriver使ってみようず
Oda Shinsuke
Visualforce + jQuery
Visualforce + jQuery
Salesforce Developers Japan
HTML5&API総まくり
HTML5&API総まくり
Shumpei Shiraishi
No3
No3
Daisuke Yamazaki
20110714 j queryベーシック
20110714 j queryベーシック
良太 増子
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
Semelhante a マークアップ講座 04 jQuery - JavaScript
(20)
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発
TDC20111031_Groovy_Geb
TDC20111031_Groovy_Geb
Web development fundamental
Web development fundamental
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Java/Androidセキュアコーディング
Java/Androidセキュアコーディング
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
scala+liftで遊ぼう
scala+liftで遊ぼう
HTML5最新動向
HTML5最新動向
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
Selenium webdriver使ってみようず
Selenium webdriver使ってみようず
Visualforce + jQuery
Visualforce + jQuery
HTML5&API総まくり
HTML5&API総まくり
No3
No3
20110714 j queryベーシック
20110714 j queryベーシック
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
Mais de eiji sekiya
ぐるなびあるあるLt2017
ぐるなびあるあるLt2017
eiji sekiya
Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
eiji sekiya
フロントエンド実装 グロースのポイント
フロントエンド実装 グロースのポイント
eiji sekiya
Webサービスにおける Surface Pro 3 対応とは
Webサービスにおける Surface Pro 3 対応とは
eiji sekiya
マークアップ講座 03 スマートフォン・デバイス最適化
マークアップ講座 03 スマートフォン・デバイス最適化
eiji sekiya
マークアップ講座 02 CSS
マークアップ講座 02 CSS
eiji sekiya
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
マークアップ講座 01a プロローグ
マークアップ講座 01a プロローグ
eiji sekiya
Mais de eiji sekiya
(8)
ぐるなびあるあるLt2017
ぐるなびあるあるLt2017
Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
フロントエンド実装 グロースのポイント
フロントエンド実装 グロースのポイント
Webサービスにおける Surface Pro 3 対応とは
Webサービスにおける Surface Pro 3 対応とは
マークアップ講座 03 スマートフォン・デバイス最適化
マークアップ講座 03 スマートフォン・デバイス最適化
マークアップ講座 02 CSS
マークアップ講座 02 CSS
マークアップ講座 01b HTML
マークアップ講座 01b HTML
マークアップ講座 01a プロローグ
マークアップ講座 01a プロローグ
マークアップ講座 04 jQuery - JavaScript
1.
マークアップ講座
2.
jQuery - JavaScript
3.
1. jQueryとは 2.
jQueryの特長 3. jQueryの基本構文 4. JavaScriptの基本構文 5. jQuery実装
4.
1. jQueryとは 2.
jQueryの特長 3. jQueryの基本構文 4. JavaScriptの基本構文 5. jQuery実装
5.
1. jQueryとは jQuery
『jQuery』 http://jquery.com/ • JavaScriptライブラリ • 2006年リリース • John Resig (ジョン・レシグ) 『John Resig - JavaScript Programmer』 http://ejohn.org/
6.
1. jQueryとは 現在の最新バージョン
(2014年9月現在) • IE互換版(PC) : 1.11.1 • IE非対応版(Mobile) : 2.1.1
7.
1. jQueryとは 2.
jQueryの特長 3. jQueryの基本構文 4. JavaScriptの基本構文 5. jQuery実装
8.
2. jQueryの特長 •
クロスブラウザ実装に適している • ドットシンタックスのシンプル、軽量、CSSライクな 構文 • CSSとの高い親和性 • Ajax、コールバック取得など複雑な実装も容易 • プラグインが豊富、プラグイン開発が手軽に行える • 圧倒的なシェア 利用Webサイト 60.1% JSライブラリ中 94.0% 『W3Techs』 http://w3techs.com/
9.
2. jQueryの特長 【TOPIC】jQuery
≠ jQuery Mobile • jQueryとjQuery Mobileは別物 • 現状ではjQuery Mobileの利用メリッ トはほとんどない(私見)
10.
1. jQueryとは 2.
jQueryの特長 3. jQueryの基本構文 4. JavaScriptの基本構文 5. jQuery実装
11.
3. jQueryの基本構文 基本構文
! jQuery(‘.sample’).html('text'); (以下”$”) $('.sample').html('text'); ! $(selector).method(value); ! $(セレクタ).メソッド(値);
12.
3. jQueryの基本構文 セレクタ
! $('[element]').html('text'); ! $('#[id]').html('text'); ! $('.[class]').html('text'); ! $('[[attribute]]').html('text'); ! $('[[attribute=value]]').html('text');
13.
3. jQueryの基本構文 Event
Handling (delegate) ! $(document).on('click', '.sample', function () { sampleFunction(); }); $(document).on('click', '.sample', sampleFunction); ! $(document).on('[イベント]', '[セレクタ]', [関 数]);
14.
3. jQueryの基本構文 DOM
ready ! $(document).ready(function() { sampleFunction(); }); $(document).ready(sampleFunction); ■ 省略型 $(function() { sampleFunction(); }); $(sampleFunction); • DeveloperToolにおける青い線のタイミング
15.
3. jQueryの基本構文 window
load ! $(window).load(function() { sampleFunction(); }); ! $(window).load(sampleFunction); • DeveloperToolにおける赤い線のタイミング
16.
3. jQueryの基本構文 method
『jQuery API Documentation』 http://api.jquery.com/
17.
3. jQueryの基本構文 本講座で取り扱うメソッド
取得系 メソッド内容 $().text(); テキストの取得と設定 $().html(); HTMLコードの取得と設定 $().on(); イベント(delegate)の設定 $().off(); イベント(delegate)の解除 $().height(); 高さの取得と設定 $().scrollTop(); スクロール量の取得 $().css(); CSS要素の取得と設定
18.
3. jQueryの基本構文 method
on、height、scrollTop http://codepen.io/sekiyaeiji/pen/nIqrJ?editors=001 css http://codepen.io/sekiyaeiji/pen/Ckgse?editors=101
19.
3. jQueryの基本構文 本講座で取り扱うメソッド
処理系 メソッド内容 $().fadeIn(); フェード処理により表示状態に遷移 $().fadeOut(); フェード処理により非表示状態に遷移 $().fadeToggle(); fadeIn処理とfadeOut処理の反復 $().slideDown(); 縦スライドにより表示状態に遷移 $().slideUp(); 縦スライドにより非表示状態に遷移 $().slideToggle(); slideDown処理とslideUp処理の反復 $().addClass(); class値を付与 $().removeClass(); class値を削除 $().toggleClass(); addClass処理とremoveClass処理の反復
20.
3. jQueryの基本構文 method
fadeIn、fadeOut、fadeToggle http://codepen.io/sekiyaeiji/pen/LxhsJ?editors=101 slideDown、slideUp、slideToggle http://codepen.io/sekiyaeiji/pen/AJfiu?editors=101 addClass、removeClass、toggleClass http://codepen.io/sekiyaeiji/pen/igeqd?editors=011
21.
3. jQueryの基本構文 【WORKSHOP1】
動かしてみましょう fadeIn、fadeOut、fadeToggle slideDown、slideUp、slideToggle addClass、removeClass、toggleClass ! のどれかを利用した、ブロックの表示・非表示の 処理を書いてみましょう(10分)
22.
3. jQueryの基本構文 モダン実装
jQuery + CSS Animation jQuery(JS)アニメーションより処理が軽い slide http://codepen.io/sekiyaeiji/pen/eFkoG?editors=011 fade http://codepen.io/sekiyaeiji/pen/tuGny?editors=011
23.
1. jQueryとは 2.
jQueryの特長 3. jQueryの基本構文 4. JavaScriptの基本構文 5. jQuery実装
24.
4. JavaScriptの基本構文 即時関数
! (function () { ~ })(); • JavaScriptファイル全体をこれでラッピングする 定義 ! var sampleVariable = 'サンプルテキスト';
25.
4. JavaScriptの基本構文 関数
function sampleFunction () { ~ } function [関数名] ([引数]) { [処理] }
26.
4. JavaScriptの基本構文 条件文
if ([条件式]) { [処理] } else if ([条件式]) { [処理] } else { [処理] }
27.
4. JavaScriptの基本構文 デバッグログ
! console.log([変数]); console.log(‘[ログコメント]’);
28.
4. JavaScriptの基本構文 コメントアウト
! // 1行コメント ! /* 複数行 コメント */ http://codepen.io/sekiyaeiji/pen/Gwtvd?editors=001
29.
1. jQueryとは 2.
jQueryの特長 3. jQueryの基本構文 4. JavaScriptの基本構文 5. jQuery実装
30.
5. jQuery実装 jQuery読み込み
google api利用 ! <script src="//ajax.googleapis.com/ajax/ libs/jquery/1.11.1/jquery.min.js"></script>
31.
5. jQuery実装 jQuery実装
1 モーダルウィンドウ http://codepen.io/sekiyaeiji/ pen/qbush?editors=011
32.
5. jQuery実装 【WORKSHOP2】
カスタマイズしてみましょう モーダルウィンドウの表示・非表示に 別の動きを与えてみましょう
33.
5. jQuery実装 jQuery実装
2 スクロールハンドリング http://codepen.io/sekiyaeiji/ pen/FhvGi?editors=011
34.
5. jQuery実装 jQuery実装
3 パララックスの基礎 http://codepen.io/sekiyaeiji/ pen/wHxbq?editors=001
Baixar agora