「JavaScript」カテゴリーアーカイブ

HTML5入門その3-コンソールを使ったデバッグ

2014/10/03 admin

この項，実質Javascript入門です

つづきです

次のHTMLを　debug.html　という名前で保存してブラウザで開いてみてください．

<!DOCTYPE html>
<html>
<head>
<title>コンソールを使ったデバッグ</title>
<meta charset="UTF-8">
</head>
<body>
<h1>コンソールを使ったデバッグ</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var mycolor = "#ff0000";
context.fillStyle = mycolor;//変数mycolorがここに代入
oontext.fillRect(100, 100, 20, 20);//四角形を描画する
</script>
</body>
</html>

四角形が描画されるはずですが，描画されません！

どこかにバグ（プログラム上の問題）があります．

このバグを探し，誤りを修正することを「デバッグ」と言います．

この方法を２つやってみましょう．

（１）コンソールに出たエラー表示を手がかりにする

この場合，debug.html:15　の表記から15行目にエラーがあることがわかります．

今回はこれで修正すればいいのですが，エラーの場所が本当はそこではなかったり，このエラー表示が出ないこともあります．また，思ったように表示されていない場合にも次の方法で確認することができます．

（２）コンソールログを使う
次のdebug.htmlのHTMLを全て次の物に入れ替えてください．

<!DOCTYPE html>
<html>
<head>
<title>コンソールを使ったデバッグ</title>
<meta charset="UTF-8">
</head>
<body>
<h1>コンソールを使ったデバッグ</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var mycolor = "#ff0000";
console.log("テスター１");//新しく追加
context.fillStyle = mycolor;//変数mycolorがここに代入
console.log("テスター２");//新しく追加
oontext.fillRect(100, 100, 20, 20);
console.log("テスター３");//新しく追加
</script>
</body>
</html>

14行目，16行目，18行目にコンソールに表示させるプログラムを追加しています．

ですので，コンソールにはエラーの他にこのように表示されます．

18行目の　console.log(“テスター３”);　でコンソールには”テスター３”と表示されるはずなのに表示されていません．つまりこのプログラムはこの直前で停止していることがわかります．

目を皿にして探してみてください．

17行目が

oontext.fillRect(100, 100, 20, 20);

になっています．正しくは

context.fillRect(100, 100, 20, 20);

ですね．

修正して保存し，再読込してみましょう．今度は”テスター3”までコンソールに表示されたと思います．

まとめ

変数の中身を見たいときは，見たいタイミングの行で

console.log(変数名);

実行のタイミングや，どこまで実行されているかだけ確認したい場合は

console.log(“好きな名前”);

と書いて実行してみましょう．

HTML5, JavaScript, Unity, プログラミングお作法

HTML5入門その２ーコンソールの使い方

2014/09/30 admin

この項，実質Javascript入門です

［準備］

プログラムの動きを見るためにコンソールという機能を使用します．この機能はプログラム内の変数や実行した場所がちゃんと実行されているか検知することができます．私はテスター代わりに使用しています．

このテスターになるコマンドは
console.log(hoge);
です．

（余談）ちなみにUnityでは
Debug.Log (hoge);//C#,JSとも

このコンソールをFirefoxでは
ツール＞Web開発＞Webコンソール
で表示できます

［使い方］

実行を検知したいだけであれば，検知したい場所（行）に
console.log(“固有名詞”);
と入力します
その行が実行されれば，コンソールに”固有名詞”と表示されます．

変数たとえばhogeという名前の変数の中身をチェックしたければその検知したい場所（行）に
console.log(hoge);
と入力します
その行が実行されれば，コンソールに変数の中身＝例えば3　とか　4.3　とか false　などと表示されます

（コンソールにtrueと表示された例）

まずは，このテスターを作ってみましょう．

<!DOCTYPE html>
<html>
<head>
<title>コンソールのテスト</title>
<meta charset="UTF-8">
</head>
<body>
<h1>コンソールの表示テスト</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var mycolor = "#ff0000";
context.fillStyle = mycolor;//変数mycolorがここに代入
context.fillRect(100, 100, 20, 20);
console.log(mycolor);
</script>
</body>
</html

解説

（クリックで拡大）

結果はこのように表示されます

１６行目の

console.log(mycolor);

を

console.log("mycolor");

に変更してみましょう．ダブルクォーテーションで囲むだけです．
結果はどうなりましたか？

“　”で囲むと，変数ではなく「固有名詞」となり，それ自信を表示してくれます．

これはバグの取り方にも使われます．（次へ）

HTML5, JavaScript, プログラミングお作法

HTML5入門その1-canvas

2014/09/23 admin

HTML5で実装されているcanvasを実行してみましょう．
以下を別の名前で作成し，保存してください．

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>無題ドキュメント</title>
</head>

<body>

 <canvas id="myCanvas" width="200" height="200"
style="border:1px solid #000000;"><!--キャンバスを設定，名前はmyCanvas　幅200，高さ200，境界線hは１ピクセルの1本線で黒色-->
</canvas>

<script type="text/javascript">
var c = document.getElementById("myCanvas");//入れ物（変数）cはmyCanvasって名前のやつね
var ctx = c.getContext("2d");//変数ctxに入れろ＝＞変数ｃを2次元としてね

//var ctx = myCanvas.getContext("2d");//これもOK
ctx.fillStyle = "#FF0000";//色　HEX値（16進数）で指定
ctx.fillRect(0,0,10,100);//左上0,0の座標から幅10,高さ100に彩色される
line();//lineって指示のセットあるでしょ，あれをこのタイミングでやっちゃって

function line(){//lineって名前の指示の塊をはここからですよ〜
ctx.lineWidth = 5;//ctxってやつに線を用意します幅は5pxで
ctx.strokeStyle = '#00FF00';//ctxってやつに描くときの色は#00ff00ね
ctx.beginPath();//ctxの書き始めるんで一旦リセットね
ctx.moveTo(0, 0);//ctxの０，０に移動して
ctx.lineTo(200, 200);//ctxに線を引きます200，200まで
ctx.closePath();//パスはここまでね
ctx.stroke();//じゃ描いて

}
</script>
</body>
</html>

何かが描画されたかたと思います．

必ず，HTML5でcanvas対応のブラウザを使ってくださいね．