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
56
第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
Gaps in Therapy in IBD - IBDInnovate 2025 CCF
higgi13425
0
500
ANS-C01_2回不合格から合格までの道程
amarelo_n24
1
260
【品女100周年企画】_抜粋
shinagawajoshigakuin_100th
0
770
CHARMS-HP-Banner
weltraumreisende
0
230
2025年度春学期 統計学 第1回 イントロダクション (2025. 4. 10)
akiraasano
PRO
0
180
自己紹介 / who-am-i
yasulab
PRO
3
5.2k
Avoin jakaminen ja Creative Commons -lisenssit
matleenalaakso
0
1.9k
2025年度春学期 統計学 第3回 クロス集計と感度・特異度,データの可視化 (2025. 4. 24)
akiraasano
PRO
0
130
IMU-00 Pi
kanaya
0
370
JOAI2025講評 / joai2025-review
upura
0
170
今も熱いもの!魂を揺さぶる戦士の儀式:マオリ族のハカ
shubox
0
210
2025年度春学期 統計学 第4回 データを「分布」で見る (2025. 5. 1)
akiraasano
PRO
0
100
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Designing for Performance
lara
610
69k
Building Adaptive Systems
keathley
43
2.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
A better future with KSS
kneath
238
17k
Agile that works and the tools we love
rasmusluckow
329
21k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Gamification - CAS2011
davidbonilla
81
5.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Become a Pro
speakerdeck
PRO
29
5.4k
Documentation Writing (for coders)
carmenintech
72
4.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(“コンテンツ”);
おしまい テスト頑張ってください