二つの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…
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があるので、グ…
DHTMLは、DOM(Document Object Model)前の動的にHTMLを変更する技術である。 DHTMLのモデル関連 window : javascriptのトップオブジェクト。 navigator : ブラウザ frames location : ページURL hisotry : 履歴 document : HTML all body forms anchors link…
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>
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…
通常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>
DOM(Document Object Model) アクセス方法 要素IDでアクセス : document.getElementById(idVal) 要素間の関係でアクセス Node parentNode Node previousSibling Node nextSibling Node childNodes Node getElementsByTasName(tagName) Node firstChild Node …
・オブジェクト <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…
・例外処理 <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>…
・実行方法 <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>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> Animation </title> <style type="text/css"> /* keyframe指定 */ @-webkit-keyframes 'moving' { /* 開始 */ 0% { left: 100px; } /* 40%時のフレーム */ 40% { left: 150px; } /* 60%時のフレーム */ 60% { left: 75px; } /…</meta></head></html>
背景色動画効果 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 背景色変換 </title> <style type="text/css"> div { width: 400px; height: 50px; border: 1px solid black; background-color: red; padding: 10px; /* CSS標準属性を指定する */ -moz-transition: background-co…</meta></head></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> matrix </title> <style type="text/css"> div { position: absolute; width: 120px; height: 120px; background-color: #bbb; border: 1px solid black; } div.a { left: 50px; top: 50px; } div.b { left: …</meta></head></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> transform-origin </title> <style type="text/css"> div { position: absolute; width: 90px; height: 90px; background-color: #bbb; border: 2px solid black; } div.a { left: 30px; top: 30px; } div.b …</meta></head></html>
コンポーネントの基本変形サンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> transform </title> <style type="text/css"> div { display: inline-block; width: 60px; height: 60px; background-color: #bbb; border: 2px solid black; margin: 20px; } </style> </meta></head></html>
メディア毎のCSSを指定する。 文法： @media not|only 設備タイプ [and 属性] ブラウザ幅によるレイアウト調整サンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> media query </title> <style type="text/css"> /* デフォルトCSS */ #container{ text-align: center; margin: auto; width: 750px; } …</meta></head></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> cursor属性 </title> <style type="text/css"> div#container { border: 1px solid black; padding: 5px; width: 600px; height: 140px; display: box; display: -moz-box; display: -webkit-box; box-orient: …</meta></head></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> list-style </title> <style type="text/css"> li { background-color: #aaa; } </style> </head> <body> イメージを使用する <ul style="list-style-image:url(hana.gif);"> <li>列1-1</li> <li>列1-2</li> <li>列1-3</li></ul></body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> table関連 </title> <style type="text/css"> table { width: 400px; border: 1px solid black; margin:20px; } td { background-color:#ccc; border: 1px solid black; } </style> </head> <body> セルは連結、表タイトル…</body></html>
・columns属性を利用して、複数カラムを実現する。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> columns属性 </title> <style type="text/css"> div#container{ margin:auto; width: 440px; border: 1px solid black; } div#content { /* カラム幅、 カラム数、*/ columns: 130px 3; -moz…</meta></head></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> box-shadow </title> <style type="text/css"> div { width: 300px; height: 50px; border: 1px solid black; margin: 30px; } </style> </head> <body> <div style="box-shadow: -10px -8px 6px #444;"> box…</div></body></html>
list-item属性値は対象をul形式に変換する。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> list-item </title> <style type="text/css"> body>div{ display: list-item; list-style-type: disc ; margin-left: 20px; } div>div{ display: list-item; list-style-type: sq…</meta></head></html>
