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
36
第10回Web講座
JQuery
北海道科学大学 電子計算機研究部
July 26, 2017
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 Programming
See All in Programming
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
550
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
31k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
Deep Dive into ~/.claude/projects
hiragram
8
1.5k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
110
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
300
GraphRAGの仕組みまるわかり
tosuri13
8
480
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
940
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Optimizing for Happiness
mojombo
379
70k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
Designing for humans not robots
tammielis
253
25k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Code Reviewing Like a Champion
maltzj
524
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
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(“コンテンツ”);
おしまい テスト頑張ってください