2016-02-01から1ヶ月間の記事一覧
・競合を解消 var j = jQuery.noConflict(); j("#id").html("innerHTML"); ・jQuery対象生成 jQuery(expression[,context]) jQuery(elements) jQuery(html[,document]) jQuery(html,props) jQuery(objects) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> jQuery対象取得 …</meta></head></html>
jQeury1.7からCallbackの仕組みを提供している Callbacks対象生成 jQeury.Callbacks(flags) flags種類 once : 一回だけfire memory : 前回の引数をキャッシュする unique : 重複する関数なし stopOnFalse : falseを返す関数で実行中止 Callbacksのメソッド a…
純粋なjavascriptの場合、異なるブラウザでイベント発生原の取得方法が異なる。 jQeuryは、ブラウザによる取得方法の差異を解消している。 jQeuryのイベント原の属性 data : イベントdata pageX : mouseのX座標 pageY : mouseのY座標 currentTarget : 伝播中…
jQeuryは、汎用的にバインドする方法以外に特定のイベント紐付けも提供している。 イベント種類 mouse関連 click(), dbclick(), hover(), mousedown(), mouseenter(), mouseleaver(), mousemove(), mouseout, mouseover(), mouseup(), focusin(), focusout()…
jQueryは、javascriptのイベントバインドを簡略化している。 バインド関連メソッド ready(fn) : ロードされたら呼ばれる関数紐付け 代表的なのが、$(document).ready(fn) : body要素内にonloadがないこと。あればreadyは呼ばれない。 bind(type[,data], fn(e…
jQueryは、node生成、削除、追加、複製などができる。 DOMのnode操作関連メソッド 生成 $("<a></a>") $("<a></a>", { href: "xxxx.html", target: "_blank", "class": "myClass" }); // 1.8から？ $("<div></div>", { width: 100, height: 100, css: {border: "5px solid gray"}, addC…
DOMのコンテンツには主にinnetHTML、テキスト、value属性など。 jQueryオブジェクトのメソッド innetText html() html(val) テキスト text() text(val) formの要素 val() val(val) val(Array) - 複数選択select,checkboxなど <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> jQueryのコンテンツ操作 </title> </meta></head></html>
jQueryを通してDOMのCSSを操作できる。 class関連 addClass(class) hasClass(class) removeClass(class) toggleClass(class) : classがあれば追加、なければ削除！！ css関連 css(name) : 取得 css(name, value) : 単一設定 css(properties) : 複数設定 位置…
jQueryを通してDOMの属性の取得、追加、削除の操作が可能。 取得 attr(name) prop(propName) 追加 attr(name, value) attr(map) attr(key, fn) prop(properties) prop(name, value) prop(key, fn) 削除 removeAttr(name) removeProp(name) ※attrとpropの違い…
jQuery対象にname-value形式で一時データ保存先として保存、取得ができる。 jQueryオブジェクトのメソッド ・保存 data(name, value) data(obj) : ({name1:value1, name2:value2})形式 ・取得 data() ・削除 removeData([name]) removeData([list]) jQuery名…
jQuery.メソッド()を色々提供している。 一部メソッド jQuery.support : javascript対象取得し、属性値でブラウザ情報など取得 ajax boxModel など jQuery.error(string) : Errorを投げる jQuery.globalEval(code) : codeを実行する jQuery.isArray(object) …
jQuery.fn.extend(object) : jQueryオブジェクトに対して拡張を行う。 jQuery.extend(object) : jQuery名前空間に対して拡張を行う。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery </title> </head> <body> 赤<input name="color" type="checkbox" value="red" /> 青</body></html>
jQuery1.5からすべてのjQueryオブジェクトにpromise()が追加されている。jQueryオブジェクトのアニメキューの進捗を監視し、doneCallback,failCallbakを設定できる。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> promise </title> <style type="text/css"> div { height: 50px; width: 50px; float: left; …</meta></head></html>
![はてなブックマーク - jQuery - jQuery.promise([queue][,target])](https://b.hatena.ne.jp/entry/image/https://javait.hatenablog.com/entry/2016/02/22/220655)
Deferredオブジェクトは、時間がかかる処理の進行状態に応じてcallback関数を設定できるために用意されている。 生成 jQeury.Deferred() Deferredメソッド done(doneCallback) : 成功時 fail(failCallback) : 失敗時 progress(callback) : 進行中 always(don…
jQueryは簡易的な方法で非同期通信のget,postを送信できる。 GET jQuery.get(url[,data][,callback][,type]) type : xml, json, script, text, html jQuery.getJSON(url[,data][,callback]) - type = json jQuery.getScript(url[,data][,callback]) - type =…
・ jQuery.param(obj) - objをリクエストパラメータに変換 ・ serialize() - jQueryオブジェクトが含むフォームの要素をリクエストパラメータに変換 ・ serializeArray() - jQueryオブジェクトが含むフォームの要素を配列に変換 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> jQuery-serialize </title> </head> <body> </body></html>
XMLHttpRequestがレスポンスを処理するための属性は responseText responseXML JSONレスポンスを処理するサンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>XMLリクエスト送信</title> <style type="text/css"> select { width: 120px; font-size: 11pt; } </style> </head> <body> </body></html>
Ajaxは、非同期通信を行うための仕組みであり、オブジェクトXMLHttpRequestを使い実現する。 Ajax全称 Asynchronous Javascript And XML XMLHttpRequestのメソッド abort() : リクエスト中止 getAllResponseHeaders() : ヘッダ取得 getResponseHeader("key")…
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テトリス</title> <script type="text/javascript" src="tetris.js"> </script> <style type="text/css"> body>div { font-size:13pt; padding-bottom: 8px; } span { font-family: tmb; font-size:20pt; color: …</meta></head></html>
サーバ import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.net.ServerSocket; import java.net.Socket; import java.net.SocketException; import java.security.MessageDigest; import java.util.ArrayLi…
WebSocketは、javascriptを通してサーバと接続を行い継続的に通信(ソケット通信)を行えようにするための仕組みである。 WebSocketのメソッド send() : データ送信 close() : 通信切断 WebSocketのリスナー onopen : 接続確立時 onerror : エラー時 onclose :…
二つのwindowのHTML間でデータのやり取りを行うために用意されているAPI。 ・targetWIndow.postMessage(message, targetOrigin) ・onmessage <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> 選択本表示 </title> <script type="text/javascript"> var chooseBook = function() { // window表示 v…</meta></head></html>
Workerは、javascript内でサブスレッドを使用し、サブスレッドとデータのやり取りが行える。 ※サブスレッドではＤＯＭ操作はできない。 ・サブスレッドで素数を取得するサンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> Worker</title> </head> <body> <p>素数 <div id="result"></div> </p> <script> // Worker生成(別スレッドになる) var …</body></html>
オフライン機能を持つwebappを作成してみる。 ・オフライン機能を持つindex.html、online.js、offline.jsを作成する index.html <html manifest="index.manifest"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> topページ </title> <script type="text/javascript" src="online.js"> </script> </head> …</html>
WebStorageはwebアプリのデータをクライアントで保存できる仕組み。 cookieの場合以下のデメリットがある サイズは4KB HTTPリクエスト中に毎回送信される セキュリティに問題 Storageの実装 Session Storage : セッション有効中に保存される Local Storage :…
バインドサンプル <input type="button" value="ボタン1" onclick="sampleFun1()" /> <script type="text/javascript"> function sampleFun1() { alert("sampelFun1"); } </script> <input type="button" id="btn2" value="ボタン2"/> <script type="text/javascript"> function sampleFun2() { a…
navigatorのgeolocation属性は、HTML5からブラウザの位置を取得できる。 Geolocationのメソッド getCurrentPosition(onSuccess, onError, options) int watchCurrentPosition(onSuccess, onError, options) clearWatch(watchId) Callback関数function(positi…
javascript内のdocumentは、HTMLDocumentでもあり、DHTMLのオブジェクトでもある。 DHTMLのdocumentのメソッド close() open() write() writeln() DHTMLのdocumentの属性 all anchors applets cookie documentElement forms frames images lastModified link…
windowのscreen属性は、Screenオブジェクトであり、ディスプレイを表す。 属性値取得 <script type="text/javascript"> alert(window.screen); var str = "screen属性:\n"; for(var propname in window.screen) { str += propname + ": " + window.screen[propname] + "\n" } alert(str); </script> w…
windowのhistory属性は、Historyオブジェクトである。 メソッド back() foward() go(intValue) windowのlocation属性は、Locationオブジェクトである。 属性 hostname href host port pathname protocal <script type="text/javascript"> var loc = window.location; var locStr = "現在loca…
