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
57
第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
110
Other Decks in Education
See All in Education
2025年度春学期 統計学 第15回 分布についての仮説を検証する ー 仮説検定(2) (2025. 7. 17)
akiraasano
PRO
0
110
2025年度春学期 統計学 第13回 不確かな測定の不確かさを測る ー 不偏分散とt分布 (2025. 7. 3)
akiraasano
PRO
0
120
フィードバックの伝え方、受け身のココロ / The Way of Feedback: Words and the Receiving Heart
spring_aki
1
140
(キラキラ)人事教育担当のつらみ~教育担当として知っておくポイント~
masakiokuda
0
140
Linuxのよく使うコマンドを解説
mickey_kubo
1
270
生態系ウォーズ - ルールブック
yui_itoshima
1
250
社外コミュニティと「学び」を考える
alchemy1115
2
180
”育てる”から”育つ”仕組みへ!スクラムによる新入社員教育
arapon
0
140
[Segah 2025] Gamified Interventions for Composting Behavior in the Workplace
ezefranca
0
110
小学校女性教員向け プログラミング教育研修プログラム「SteP」の実践と課題
codeforeveryone
0
110
相互コミュニケーションの難しさ
masakiokuda
0
220
探査機自作ゼミ2025スライド
sksat
3
780
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Documentation Writing (for coders)
carmenintech
74
5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
KATA
mclloyd
32
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Done Done
chrislema
185
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(“コンテンツ”);
おしまい テスト頑張ってください