読者です 読者をやめる 読者になる 読者になる

liguofeng29’s blog

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

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>

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 :…

HTML5のcanvas要素 - 出力

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

HTML5のcanvas要素 - グラデーション

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

HTML5のcanvas要素 - 合成(composite)制御

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

HTML5のcanvas要素 - 矩形陣変換

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

HTML5のcanvas要素 - 座標システムと経路を使い雪落下を実現する

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

HTML5のcanvas要素 - 座標システム変換

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

HTML5のcanvas要素 - イメージを描く

イメージ描くをメソッド 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…

HTML5のcanvas要素 - 複雑な図形を描く (円、角丸四角、N角星、N葉っぱ花など)

複雑な図形を描く際には経路を使う。 使用流れ canvasRenderingContext2DのbeginPaht()で開始する canvasRenderingContext2Dのメソッドで経路を追加する arc arcTo bezierCurveTo lineTo moveTo quadraticCurveTo rect canvasRenderingContext2DのclosePaht(…

HTML5のcanvas要素 - 影を設定する

影を設定する属性 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>

HTML5のcanvas要素 - テキストを描く

テキストを描く二つのメソッド 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>

HTML5のcanvas要素 - 四角を描く

四角を描く二つのメソッド 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>

HTML5のcanvas要素 - canvasのサンプル一覧

・ 四角を描く ・ テキストを描く ・ 影を描く ・ 円を描く ・ 角丸四角を描く ・ 多角星を描く ・ N葉っぱ花を描く ・ イメージを描く ・ 座標システム変更 ・ 雪落下 ・ 矩形陣変換 ・ 合成制御 ・ グラデーション ・ 出力

HTML5のform関連 - バリデーションチェック

バリデーション属性を使う 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>

HTML5のform関連 - javascriptでクライアントファイル読み取り進捗表示

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

HTML5のform関連 - javascriptでクライアントファイル中身アクセス

<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のform関連 - 複数ファイル選択

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>

HTML5のform関連 - 新規input要素とoutput要素

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

HTML5のform関連 - 新規属性

form属性 : form要素外のコンポーネントもform属性を指定して、リクエストパラメータを生成する formaction属性 : submit毎にactionを指定する formxxx属性 : submit毎にenctype、POST/GET、formtargetを指定する autofocus属性 : ロード後にフォーカスを取…

HTML5のform関連 - input要素、label要素、button要素、select、textarea要素

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

HTML5の要素と属性 - DataTransfer

DND(Drag And Drop)を行う際のデータ運びに使うのはDataTransferオブジェクトである。 DataTransferの属性とメソッド dataTransfer.dropEffect : DND可能な操作 属性値は、none, copy, link, move dataTransfer.effectAllowed 属性値は、none, copy, copyLin…

HTML5の要素と属性 - DND(Drag And Drop) API

HTML5では要素をドラッグ&ドロップするAPIを提供する ドラッグ&ドロップイベント ondragstart : ドラッグ開始時 イベント元 : HTML要素 ondrag : ドラッグが継続している間 イベント元 : HTML要素 ondragend : ドラッグ終了時 イベント元 : HTML要素 ondra…

HTML5の要素と属性 - head要素

head要素の内部要素について。 heda内部要素 script style link title base : ページ内ハイパーリンクの方式 href属性 target属性 : blank, parent, self, top meta : ページの情報 http-equiv属性 Expires : ページ期限切れ指定 Pragma : ローカルバッファ…

HTML5の要素と属性 - HTML5新規要素③(meterとprogress)

HTML5から特殊な要素が追加されている meter value : 現在値、デフォルト0 min : 最小値、デフォルト0 max : 最大値、デフォルト1 low : 指定範囲の最小値、minより大きい high : 指定範囲の最大値、maxより小さい optimum : best値? progress max : 完成値…

HTML5の要素と属性 - HTML5新規要素②(semantic関連)

・mark - 強調される ・time - 属性:datetime - システムに時刻であり、値を提供するため。 yyyy-MM-ddTHH:mmフォーマットである <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>semantic </title> </head> <body> <article> <header> <h2><mark>HTML 5</mark>について</h2> </header> <p> <mark>HTML 5…</mark></p></article></body></html>

HTML5の要素と属性 - HTML5新規要素①(ドキュメント構造関連)

HTML5以前では、div要素で表現してたが、HTML5からはドキュメント構造を表す要素が大量に追加されている。 HTML5ドキュメント構造要素 article : 独立する完全かる文章 内部要素:header - タイトル 内部要素:footer - 脚注 内部要素:section - 段落 内部…

HTML5の要素と属性 - HTML5新規共通属性

HTML5は既存HTMLの殆どの要素は残していて、かつ新規属性を追加している。 HTML5新規属性 contentEditable属性 trueの場合、要素内の内容編集可能 継承性を持っている designMode属性 グローバルcontentEditableである onの場合、ページ全体が編集可能 hidde…

HTML5の要素と属性 - 既存HTML要素③ (表関連)

テーブル要素 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC" /> <title> テーブル定義 </title> </head> <body> <table style="width:400px" border="1"> <caption><b>テーブルのタイトル(一つのみ含む)</b></caption> <tr> <th>列1ヘッダー</th> <th>列2ヘッダー</th> </tr> <tr> <td>1-1</td> <td>1-2</td>…</tr></table></body></html>

HTML5の要素と属性 - 既存HTML要素②

アンカー(Anchor)要素 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> アンカー(Anchor) </title> </head> <body> <a href="http://www.google.co.jp"><b>現在ページ</b></a><br /> </body></html>

HTML5の要素と属性 - 既存HTML要素①

基本要素 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>基本タグ</title> <meta name="author" content="HTML5基本タグ" /> </head> <body> <h1>h1のテキスト</h1> <h2>h2のテキスト</h2> <h3>h3のテキスト</h3> <h4>h4のテキス…</h4></body></html>