Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第10回Web講座
Search
北海道科学大学 電子計算機研究部
July 26, 2017
Programming
0
32
第10回Web講座
JQuery
北海道科学大学 電子計算機研究部
July 26, 2017
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
40
第11回Network講座2019
densan
0
65
第10回Network講座2019
densan
0
34
第09回Network講座2019
densan
1
130
第08回Network講座2019
densan
0
41
第07回Network講座2019
densan
0
41
第06回Network講座2019
densan
0
49
第05回Network講座2019
densan
0
41
第04回Network講座2019
densan
0
63
Other Decks in Programming
See All in Programming
禅の心を手に入れよ
eltociear
1
340
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
170
Git Rebase
bkuhlmann
11
1.6k
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
180
Ruby GitHub Packages
bkuhlmann
0
640
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
使ってみよう Azure AI Document Intelligence
kosmosebi
2
360
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
3
210
新宿ダンジョンを可視化してみた
satoshi7190
3
390
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
120
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
VS Code をプロダクトにどう取り込むか
onomax
1
690
Featured
See All Featured
Writing Fast Ruby
sferik
622
60k
Music & Morning Musume
bryan
41
5.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
7
3.4k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
Embracing the Ebb and Flow
colly
80
4.2k
How GitHub (no longer) Works
holman
305
140k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
A Tale of Four Properties
chriscoyier
152
22k
Faster Mobile Websites
deanohume
300
30k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
13
8.3k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
For a Future-Friendly Web
brad_frost
172
9k
Transcript
第十回ネットワーク チーム講座資料 jQuery
目次 • jQueryとは • jQueryの基本ルール • jQueryメソッド
jQuery JavaScript用のライブラリの一つ。 ブラウザごとの違いを容易に吸収でき、JavaScriptのコードを簡略化 することが出来る。 とっつきやすくてDOM操作やイベント追加などもしやすい。
ほぼ同様の機能を持つスクリプトでも、大きく短縮できる ←jQueryなし jQueryあり→
書いてみよう 1. 「drawCanvas.html」を作成し、次のページと同様に記述 Emmetを使って記述できるよう考えてみよう ただし、一つ目のscript要素は下の説明欄からコピーしてよい。
書いてみよう
canvas要素 HTML5の機能の一つ。 • 画像フォーマットを使わずにJavaScriptで図形を描画 • 画像フォーマットをcanvasに読み込み、JavaScriptを使って合成や トリミングなどの編集を行う • 動画の1フレームを切り取り画像化する などができる。
余談 canvas要素に対してはCSSでwidth/heightの指定を行ってはいけない。 canvas要素のデフォルトサイズは高さ150px幅300pxで設定されてお り、CSSでwidth/heightの値を指定するとデフォルトサイズを引き延ば した状態で表示するので、意図した形で表示されないためである。 興味がある場合、試してみると良い。
書いてみよう 2. jsフォルダ内に「drawCanvas.js」を作成し次のスライドの通り記 述する。 (3つ先のスライドまでで一個のjsファイル)
書いてみよう
書いてみよう
書いてみよう
結果
jQueryの使い方 HTML文書上のデータを取得する場合、以下のように記述する。 主なセレクタ(要素、クラス、IDなど)の指定方法はCSSと共通。 取得したデータはDOMノードではなく、jQueryオブジェクトとなる。 $(セレクタ).メソッド(引数); var 変数 = $(セレクタ);
jQueryオブジェクト jQueryで使えるメソッド・プロパティを持ったオブジェクトのこと。 内部にはDOMノードが配列として格納されている。
readyイベント DOM要素全てが読み込まれたとき実行されるjQueryイベント。 以下のように記述して使用する。 「処理」には殆どの場合、無名関数「function () { }」を指定する。 $( 処理 );
ready( 処理 );
thisオブジェクト 呼び出し元のオブジェクトのことを指す。 この場合、「$(“#file”)」の部分が呼び出し元となるのだが、thisオブ ジェクトはJavaScriptで定義されている仕組みなので、jQueryオブ ジェクトではなくDOMノードが入っている。
File API JavaScriptからローカルのファイルを扱うためのインタフェース。 属性に「type=“file”」を指定したInput要素からファイルを選択する ことで、プログラム内でローカルのファイルを扱うことが出来る。 Input要素のDOMノードが持つfilesプロパティからfileListオブジェク トを取得でき、その中に選択したファイルが格納されている。
FileList Readyイベント内に以下のように「console.log(this.files)」を追加
FileList
コンストラクタ オブジェクトを作成する際に呼び出され、初期化などを行う関数。 同じ構造のオブジェクトを複数生成する時や、特定の用途に使用す るオブジェクトをデフォルトのコントラクタで生成する時に使用す る。 また、コンストラクタによって作成されたオブジェクトを 「インスタンス」と呼ぶ。
コンストラクタ • コンストラクタの呼び出し (インスタンスの生成) function 名前(引数){ this.キー = 初期値; }
名前.prototype.メソッド = function() { 処理 }; • コンストラクタの宣言 var inst = new 名前();
イベントオブジェクト イベントに関する情報が格納されたオブジェクト addEventListenerメソッドやonメソッドで作製したイベントリスナー で指定した関数の第一引数に自動的に渡される。
onメソッド 対象としたjQueryオブジェクトに対して指定したイベントが起こった時、 特定の処理を実行するメソッド。イベントは複数指定することが出来る 他、セレクタとデータは省略できる。 • セレクタ…処理を行う要素を指定(省略の場合、対象に処理を行う) • データ…イベントオブジェクトの要素として渡される $(対象).on(“イベント名”, “セレクタ”,
データ,処理);
.attrメソッド jQueryのメソッドの一つ。指定した要素の属性とその値を取得・設 定することが出来る。 1. セレクタで指定した要素の属性値を取得 2. セレクタで指定した要素の属性値を設定 $(“セレクタ”).attr(“属性名”, “属性値”); $(“セレクタ”).attr(“属性名”);
.cssメソッド jQueryのメソッドの一つ。CSSプロパティの値を取得・設定すること が出来る。 1. セレクタで指定した要素のプロパティの値を取得 2. セレクタで指定した要素のプロパティの値を設定 $(“セレクタ”).css(“プロパティ名”, “プロパティ値”); $(“セレクタ”).css(“プロパティ名”);
.htmlメソッドと.textメソッド jQueryのメソッドで、HTMLとテキストをそれぞれ取得・編集できる。 1. セレクタで指定した要素の値を取得 2. セレクタで指定した要素の値を設定 $(“セレクタ”).html(“HTML文”); $(“セレクタ”).html(); $(“セレクタ”).text(); $(“セレクタ”).text(“テキスト”);
.prependメソッドと.appendメソッド jQueryメソッド。指定した要素の子要素の最初(最後)にそれぞれ 引数で指定したコンテンツを追加する。 1. セレクタで指定した要素の一番最初にコンテンツを追加 2. セレクタで指定した要素の一番最後にコンテンツを追加 $(“セレクタ”).prepend(“コンテンツ”); $(“セレクタ”).append(“コンテンツ”);
おしまい テスト頑張ってください