liguofeng29’s blog

個人勉強用ブログだっす。

javascript

jQueryを埋め込む

if (!window.jQuery) { document.body.appendChild((function(){ var s = document.createElement("script"); s.type = "text/javascript"; s.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"; return s; })()); } $.fn.jquery

jQuery - 拡張

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>

jQuery - jQuery.promise([queue][,target])

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 - Deferredオブジェクト

Deferredオブジェクトは、時間がかかる処理の進行状態に応じてcallback関数を設定できるために用意されている。 生成 jQeury.Deferred() Deferredメソッド done(doneCallback) : 成功時 fail(failCallback) : 失敗時 progress(callback) : 進行中 always(don…

jQuery - Ajax関連 (jQuery.get(), jQuery.post())

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 - Ajax関連 (serialize, load)

・ 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>

Ajax - レスポンス処理

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概要

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>

WebSocket - 簡易複数チャットサンプル

サーバ 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概要

WebSocketは、javascriptを通してサーバと接続を行い継続的に通信(ソケット通信)を行えようにするための仕組みである。 WebSocketのメソッド send() : データ送信 close() : 通信切断 WebSocketのリスナー onopen : 接続確立時 onerror : エラー時 onclose :…

postMessageとonmessage

二つの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内のサブスレッド

Workerは、javascript内でサブスレッドを使用し、サブスレッドとデータのやり取りが行える。 ※サブスレッドではDOM操作はできない。 ・サブスレッドで素数を取得するサンプル <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>

HTML5 - オフラインwebアプルサンプル

オフライン機能を持つ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>

HTML5 - Web Storage

WebStorageはwebアプリのデータをクライアントで保存できる仕組み。 cookieの場合以下のデメリットがある サイズは4KB HTTPリクエスト中に毎回送信される セキュリティに問題 Storageの実装 Session Storage : セッション有効中に保存される Local Storage :…

javascript - イベントバインド

バインドサンプル <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…

javascript - DHTML(geoloaction属性、google map表示)

navigatorのgeolocation属性は、HTML5からブラウザの位置を取得できる。 Geolocationのメソッド getCurrentPosition(onSuccess, onError, options) int watchCurrentPosition(onSuccess, onError, options) clearWatch(watchId) Callback関数function(positi…

javascript - DHTML(documentオブジェクト、cookie使用)

javascript内のdocumentは、HTMLDocumentでもあり、DHTMLのオブジェクトでもある。 DHTMLのdocumentのメソッド close() open() write() writeln() DHTMLのdocumentの属性 all anchors applets cookie documentElement forms frames images lastModified link…

javascript - DHTML(screen属性、navigator属性)

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…

javascript - DHTML(location属性、history属性)

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…

javascript - DHTML(windowオブジェクト)

windowオブジェクト <script type="text/javascript"> // グローバル変数定義時は、windowsの属性として存在する var a = 5; document.write(window.a === a); window.book = "windowのbook属性"; document.write("<br>" + book); </script> ※ 複数のframeがある場合には、複数のwindowがあるので、グ…

javascript - DHTML概要

DHTMLは、DOM(Document Object Model)前の動的にHTMLを変更する技術である。 DHTMLのモデル関連 window : javascriptのトップオブジェクト。 navigator : ブラウザ frames location : ページURL hisotry : 履歴 document : HTML all body forms anchors link…

javascript - HTML要素削除

HTML要素削除 メソッド removeChild(oldNode) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> removeChild </title> </head> <body id="test"> <input id="add" type="button" value="div追加" disabled onclick="add();" /> </body></html>

javascript - HTML要素追加

HTML要素を追加する手順 1 node生成 OR node複製 document.createElement(Tag) <script type="text/javascript"> // divタグ生成 var div1 = document.createElement("div"); </script> Node colneNode(boolean deep) deep : 対象node以降をクローンするか <script type="text/javascript"> // IDで要素取得 var ul = document.getEle…

javascript - HTML要素編集

通常HTML要素変更に使う属性 innerHTML value className style options[index] <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> HTML要素変更 </title> </head> <body> 第<input id="row" type="text" size="2" />行 第 第<input id="column" type="text" size="2" />列 <br/> 値を…</br/></body></html>

javascript - HTML要素アクセス

DOM(Document Object Model) アクセス方法 要素IDでアクセス : document.getElementById(idVal) 要素間の関係でアクセス Node parentNode Node previousSibling Node nextSibling Node childNodes Node getElementsByTasName(tagName) Node firstChild Node …

javascript - 基本③

・オブジェクト <script type="text/javascript"> // 定義 function Person(name, age) { // 属性 this.name = name; this.age = age; } // 生成 var p1 = new Person(); var p2 = new Person("name", 55); </script> 属性 obj.propName obj[propName] <script type="text/javascript"> function Person(name, age) { // 属性 this.na…

javascript - 基本②

・例外処理 <script type="text/javascript"> try { for (var i = 0; i < 10; i++) { document.writeln(i + '<br />'); if (i > 4) throw new Error('iが4より大きい'); } } catch (e) { document.writeln("catch処理 : " + e.message + '<br/>'); } finally { document.writeln("finally処</script>…

javascript - 基本①

・実行方法 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> JavaScript実行方法 </title> </head> <body> <a href="javascript:alert('JavaScript実行');">JavaScript実行</a> <script type="text/javascript"> alert("J…</body></html>