iPad用のテキストエディターアプリに「 LiquidLogic 」というのがあります。
ただのテキストエディターではなく、さまざまな機能が搭載されていますが、
ここでは JavaScript を使ったHTMLファイル（ホームページのソースファイル）の編集について紹介します。
このアプリではHTMLファイルの内容をエディター画面に書き込んだあと、左上の目鏡の形のアイコンをタップすると、ホームページ上での見え方を確かめることができます。
２つのHTMLファイルの例を挙げておきます。
● １つめは、図形を描く例です。
この記事のタイトル画像を描くものです。
------------------ samazama.html -------------------------------
<html>
<head>
<script>
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
/* -------------------------------------
* 正方形を３つ描く
* ----------------------------------- */
ctx.fillStyle = "rgb(200,0,0)"; //赤
ctx.fillRect (10, 10, 50, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; //青、半透明
ctx.fillRect (30, 30, 50, 50);
ctx.strokeStyle = "green";
ctx.strokeRect(80,80,20,20);
/* -------------------------------------
* 三角形を２つ描く
* ----------------------------------- */
ctx.strokeStyle = "blue";
/* パスを初期化 */
ctx.beginPath();
/* １つめのサブパス */
ctx.moveTo(130, 10);
ctx.lineTo(145, 50);
ctx.lineTo(105, 50);
ctx.closePath();
/* ２つ目のサブパス */
ctx.moveTo(120, 60);
ctx.lineTo(145, 100);
ctx.lineTo(115, 100);
ctx.closePath();
/* これまで描いたパスを表示 */
ctx.stroke();
/* -------------------------------------
* 横棒を描く
* ----------------------------------- */
ctx.strokeStyle = "purple";
/* パスを初期化 */
ctx.beginPath();
/* １つめのサブパス */
ctx.moveTo(30, 100);
ctx.lineTo(70, 100);
/* これまで描いたパスを表示 */
ctx.stroke(); }
/* -------------------------------------
* 塗りつぶした三角形を描く
* ----------------------------------- */
ctx.fillStyle = "pink"
/* パスを初期化 */
ctx.beginPath();
/* １つめのサブパス */
ctx.moveTo(50, 110);
ctx.lineTo(90, 190);
ctx.lineTo(10, 190);
ctx.closePath();
/* 三角形を塗りつぶす */
ctx.fill();
/* -------------------------------------
* 円を描く
* ----------------------------------- */
/* 塗りつぶした円 */
ctx.fillStyle = 'rgb(192, 80, 77)'; // 赤っぽい
/* パスを初期化 */
ctx.beginPath();
ctx.arc(140, 150, 35, 0, Math.PI*2, false);
ctx.closePath();
/* 円を塗りつぶす */
ctx.fill();
/* 円周 */
ctx.strokeStyle = 'rgb(80, 192, 77)'; // 緑っぽい
/* パスを初期化 */
ctx.beginPath();
ctx.arc(90, 90, 30, 0, Math.PI*2, false);
ctx.closePath();
/* 円を塗りつぶす */
ctx.stroke();
/* 円弧と弦で囲まれた図形を塗りつぶす */
ctx.fillStyle = 'rgb(80, 192, 77)'; // 緑っぽい
/* パスを初期化 */
ctx.beginPath();
ctx.arc(220, 70, 60, 30 * Math.PI / 180, 150 * Math.PI / 180, true);
ctx.closePath();
/* 図形を塗りつぶす */
ctx.fill();
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
--------------------------------------------------------------------------------------------
● ２つめは満年齢を計算する例です。
エラーチェックは何も行なっていませんので、変な日付を入れても結果は保証しません。
--------------------- yourAge.html -----------------------------------------------------
-----------------------------------------------------------------------------------------------------
※コメント投稿者のブログIDはブログ作成者のみに通知されます