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
第十回ネットワークチーム講座
Search
北海道科学大学 電子計算機研究部
July 11, 2016
Education
0
69
第十回ネットワークチーム講座
src="
https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js
"
北海道科学大学 電子計算機研究部
July 11, 2016
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
55
第11回Network講座2019
densan
0
70
第10回Network講座2019
densan
0
46
第09回Network講座2019
densan
1
160
第08回Network講座2019
densan
0
49
第07回Network講座2019
densan
0
46
第06回Network講座2019
densan
0
71
第05回Network講座2019
densan
0
51
第04回Network講座2019
densan
0
100
Other Decks in Education
See All in Education
人になにかを教えるときに考えていること(2025-05版 / VRC-LT #18)
sksat
4
1k
計算情報学研究室 (数理情報学第7研究室)紹介スライド (2025)
tomonatu8
0
510
演習問題
takenawa
0
5k
America and the World
oripsolob
0
510
第1回大学院理工学系説明会|東京科学大学(Science Tokyo)
sciencetokyo
PRO
0
3.8k
Gamified Interventions for Composting Behavior: A Case Study Using the Gamiflow Framework in a Workplace Setting
ezefranca
1
120
Data Management and Analytics Specialisation
signer
PRO
0
1.4k
미국 교환학생 가서 무료 홈스테이 살면서 인턴 취업하기
maryang
0
110
バックオフィス組織にも「チームトポロジー」の考えが使えるかもしれない!!
masakiokuda
0
110
Webリテラシー基礎
takenawa
0
5k
日本の教育の未来 を考える テクノロジーは教育をどのように変えるのか
kzkmaeda
1
210
Visualisation Techniques - Lecture 8 - Information Visualisation (4019538FNR)
signer
PRO
0
2.4k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Code Review Best Practice
trishagee
68
18k
Fireside Chat
paigeccino
37
3.5k
Writing Fast Ruby
sferik
628
61k
Being A Developer After 40
akosma
90
590k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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(“コンテンツ”);
おしまい テスト頑張ってください