第十回ネットワークチーム講座

第十回ネットワークチーム講座資料 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(“コンテンツ”);

おしまいテスト頑張ってください

第十回ネットワークチーム講座

第十回ネットワークチーム講座

北海道科学大学　電子計算機研究部

More Decks by 北海道科学大学　電子計算機研究部

Other Decks in Education

Featured

Transcript