HTML5
<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内でサブスレッドを使用し、サブスレッドとデータのやり取りが行える。 ※サブスレッドでは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>
オフライン機能を持つ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 :…
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> canvas出力 </title> </head> <body> <h2> canvas出力サンプル </h2> <canvas id="canvas" width="420" height="320" style="border:1px solid black"></canvas> <h2>出力結果</h2> <img id="result"></img>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>グラデーション</title> </head> <body> <h2> グラデーションサンプル </h2> <canvas id="canvas" width="400" height="420" style="border:1px solid black"></canvas> <script type="text/javascript"> // canvas要素取得 var canv…</body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 合成制御 </title> </head> <body> <h2> 合成制御サンプル </h2> オプション選択<select style="width:160px" onchange="draw(this.value);";> <option value="source-over">source-over</option> <option value="source-in">sou…</option></select></body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 矩形陣変換 </title> </head> <body> <h2> 矩形陣変換サンプル </h2> <canvas id="canvas" width="600" height="360" style="border:1px solid black"></canvas> <script type="text/javascript"> function skew(context,an…</body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 雪効果 </title> </head> <body> <h2> 雪効果サンプル </h2> <canvas id="canvas" width="420" height="280" style="border:1px solid black"></canvas> <script type="text/javascript"> // 雪 function createFlower(c…</body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 座標変換 </title> </head> <body> <h2> 座標変換サンプル </h2> <canvas id="canvas" width="420" height="320" style="border:1px solid black"></canvas> <script type="text/javascript"> // canvas要素取得 var canvas =…</body></html>
イメージ描くをメソッド void drawImage(Image image, float x, float y) : x,y位置にそのまま表示する void drawImage(Image image, float x, float y, float width, float height) : x,y位置に伸縮して表示する void drawImage(Image image, integer sx, i…
複雑な図形を描く際には経路を使う。 使用流れ canvasRenderingContext2DのbeginPaht()で開始する canvasRenderingContext2Dのメソッドで経路を追加する arc arcTo bezierCurveTo lineTo moveTo quadraticCurveTo rect canvasRenderingContext2DのclosePaht(…
影を設定する属性 shadowBlur shadowColor shadowOffsetX shadowOffsetY <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 影を設定する</title> </head> <body> <h2> 影を設定するサンプル </h2> <canvas id="canvas" width="500" height="280" style="border:1px solid black"></canvas></body></html>
テキストを描く二つのメソッド fillText(String text, float x, float y, [float maxWidth]) strokeText(String text, float x, float y, [float maxWidth]) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> テキストを描く </title> </head> <body> <h2> テキストを描くサンプル </h2> </body></html>
四角を描く二つのメソッド fillRect(float x, float y, float width, float height) strokeRect(float x, float y, float width, float height) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 図形を描く </title> </head> <body> <h2> 図形を描くサンプル </h2> </body></html>
・ 四角を描く ・ テキストを描く ・ 影を描く ・ 円を描く ・ 角丸四角を描く ・ 多角星を描く ・ N葉っぱ花を描く ・ イメージを描く ・ 座標システム変更 ・ 雪落下 ・ 矩形陣変換 ・ 合成制御 ・ グラデーション ・ 出力
バリデーション属性を使う required pattern min,max,step checkValidityメソッドを使う setCustomValidityメソッドを使い、カスタムメッセージを表示する バリデーション属性サンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> Validity </title> </head> <body> <form action="add"> book(必須)</form></body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> progress表示 </title> </head> <body> ファイル選択<input id="file1" type="file"/><br/> 読み取り進捗<progress id="pro" value="0"></progress> <div id="result"></div> </br/></body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> ファイル中身アクセス </title> </head> <body> ファイル選択<input id="file1" type="file"/><br/> <div id="result"></div> <input type="button" value="テキスト読取" onclick="readText();"/><br/> </br/></br/></body></html>
HTML5以前では、下記のような制限があった。 単一ファイルのみアップロード クライアントコードはファイルパスのみ取得でき、内容アクセスはできない 複数ファイル選択&ファイルアクセス <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 複数file選択 </title> </head> <body> イメージ選択<input id="images" type="file" multiple accept="image/*"/> </body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC" /> <title> input and output </title> </head> <body> <form action="do"> type="color":<br/><input name="color" type="color"/><p> output:<br/><output name="a" for="color" onforminput="innerHTML=color.value;">…</output></br/></p></br/></form></body></html>
form属性 : form要素外のコンポーネントもform属性を指定して、リクエストパラメータを生成する formaction属性 : submit毎にactionを指定する formxxx属性 : submit毎にenctype、POST/GET、formtargetを指定する autofocus属性 : ロード後にフォーカスを取…
1. input要素 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> input要素 </title> </head> <body> <form action="http://www.google.co.jp" method="get"> <label><b>input要素について</label></b><br/> type=text</br/>
DND(Drag And Drop)を行う際のデータ運びに使うのはDataTransferオブジェクトである。 DataTransferの属性とメソッド dataTransfer.dropEffect : DND可能な操作 属性値は、none, copy, link, move dataTransfer.effectAllowed 属性値は、none, copy, copyLin…
HTML5では要素をドラッグ&ドロップするAPIを提供する ドラッグ&ドロップイベント ondragstart : ドラッグ開始時 イベント元 : HTML要素 ondrag : ドラッグが継続している間 イベント元 : HTML要素 ondragend : ドラッグ終了時 イベント元 : HTML要素 ondra…
head要素の内部要素について。 heda内部要素 script style link title base : ページ内ハイパーリンクの方式 href属性 target属性 : blank, parent, self, top meta : ページの情報 http-equiv属性 Expires : ページ期限切れ指定 Pragma : ローカルバッファ…
HTML5から特殊な要素が追加されている meter value : 現在値、デフォルト0 min : 最小値、デフォルト0 max : 最大値、デフォルト1 low : 指定範囲の最小値、minより大きい high : 指定範囲の最大値、maxより小さい optimum : best値? progress max : 完成値…