JavaScript 2

ダイアログ
ダイアログを使用したデバッグ
ダイアログの使用例
関数
課題

解答例

ダイアログ

prompt

          word = prompt("合言葉は? ", "秘密!");

ダイアログボックスを表示し、入力された値を返す
prompt(メッセージ, 入力が省略された場合に返す値)

alert

          alert("合言葉は「"  + word + "」です。");

警告ダイアログを表示

confirm

          if( confirm("よろしいですか?") )

確認ダイアログを表示し、入力されたyes/noの値を返す

close

          close();

ウィンドウを閉じる

Window オブジェクト

webブラウザで動作するJavaScriptの最上位に位置するオブジェクトであり、画面上に表示される全てのオブジェクトの親となるグローバルオブジェクト

Windowオブジェクトの主なプロパティ

プロパティ名	機能
status	ブラウザのステータスバーに表示する文字列
opener	このウィンドを開いたウィンドウ
name	ウィンドウの名前
closed	ウィンドウが閉じているときに真(true)，開いているときには偽(false)
window	このウィンドウへの参照

Windowオブジェクトのメソッド（一部)

メソッド名	機能
alert(message)	警告ダイアログを開く
confirm(question)	確認ダイアログを開く． true/falseを返す
prompt(message,default)	入力のためのダイアログを開く．messageをダイアログに表示し，入力を待つ．defaultは入力を省略した場合の戻り値
open()	新しくウィンドウを開く
forcus()	このウィンドウをアクティブにする
blur()	このウィンドウを背面に移動する
close()	このウィンドウを閉じる
moveBy(x,y)	ウィンドウを指定したピクセル分移動する
moveTo(x,y)	ウィンドウを移動する
resizeBy(width,height)	ウィンドウサイズを指定したピクセル分広げる
resizeTo(width,height)	ウィンドウサイズを変更する
scrollBy(x,y)	指定したピクセル分だけスクロールする
scrollTo(x,y)	指定した位置までスクロールする
setInterval(code, interval)	codeを一定間隔の時間(interval)でくり返し実行する
setTimeout(code, delay)	delay時間後にcodeを実行する
clearInterval()	setIntervalで指定したくり返し実行を解除する
clearTimeout()	setTimeoutで設定したコードの実行を解除する

ダイアログを使用したデバッグ

alertメソッドを用いれば変数の値などを表示することができるので，デバッグに利用することができる．

[例題]

現在の日付と時刻を調べ，表示するページを作成せよ．ただし，表示する文字サイズ(font size)は，「秒」の値を7で割った余りに1を加えたものとすること．

HTML

全体の構想：

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=Shift-JIS">
      <meta http-equiv="Content-Script-Type" content="text/javascript">
      <title>ex1-2</title>
   </head>
   <body>
       <script type="text/javascript">
          (a) 変数宣言などの準備
          (b) 現在の日時を取得する
          (c) 「秒」をもとに文字サイズを決める
          (d) 日時を書き出す
       </script>
   </body>
</html>

(b) 現在の日時を取得する

          var now = new Date();  // 現在の日時を変数 now に記憶

          var size = now.getSeconds() % 7 + 1;

(d) 日時を書き出す

<Hn>yy年mm月dd日 hh時mm分ss秒</Hn>

と書き出す．ただし，nはサイズ．
文字サイズは<Hn>～</Hn>タグで指定することにする．
このためのスクリプトは，

          document.write("<h",size,">",    // サイズ
                         now.getFullYear(),"年",
                         now.getMonth()+1,"月",
                         now.getDate(),"日",
                         now.getHours(),"時",
                         now.getMinutes(),"分",
                         now.getSeconds(),"秒",
                         "</h",size,">");

デバッグ

alert文を利用した，デバッグの方法を説明する．

次の内容の HTMLファイルを作成したとする．

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=Shit-JIS">
      <meta http-equiv="Content-Script-Type" content="text/javascript">
      <title>ex1-2</title>
   </head>
   <body>
       <script type="text/javascript">
          var now = new Date();
          var size = now.getSeconds() % 7 + 1;
          documentwrite("<h",size,">",
                         now.getFullYear(),"年",
                         now.getMonth(),"月",
                         now.getDate(),"日"
                         now.getHours(),"時",
                         now.getMinutes(),"分",
                         now.getSeconds(),"秒",
                         "</h",size,">");
       </script>
   </body>
</html>

上のページをブラウザに表示しようとしても正しく実行されない．

以下，原因を追求し，正しく動作させるまでのデバッグの過程を例示する．

ファイル中に alert 文を入れ，どこで動作しなくなるか調べる
- このページを表示しようとしても，最初の alert 文さえも実行されない
- JavaScriptの最初の行が実行されないことから，このスクリプトには，文法上の誤りがあると判断できる
文法上で疑わしい箇所をコメントアウトする
- ダイアログが2度表示され，「始まり」と現在の日時が，それぞれのダイアログに表示される．
  これから，コメントアウトした箇所以外は正しく実行されることがわかる．
コメントアウトする範囲を変更し，誤りを探す範囲を狭めて行く

これを繰り返すと，文法上の誤りが

                         now.getDate(),"日"

にあることがわかる．

      "日" → "日",

と修正する．

再び，ブラウザに表示してみる．

このページの実行
- 今度は，alert文によるダイアログが順に表示されるが，最後のalert("終わり")が実行されない
- これからわかるように，文法上の誤りがあると，スクリプトが全く実行されない
- alert文によるダイアログが3つまで表示され，最後の alert文が実行されないことから， documentwrite( ... ) に誤りがあることが判明する
- documentwrite → document.write と修正する
再度，ブラウザに表示してみると，今度は，「月」に表示される数値が誤っていることわかるので，これを修正する．
```
          now.getMonth()   →   now.getMonth()+1
	  
```

ダイアログの使用例

上のHTMLファイルで表示されるページ

Mathクラス

      var mynumber = Math.floor(Math.random()*10);

乱数
```
        Math.random()
```
小数部の切り捨て
```
        Math.floor(x)
```

関数

上のHTMLファイルで表示されるページ

関数

       //  関数： 現在の時刻を文字列で返す
       function getTime() {
          var time, date;
	  date = new Date();   // 現在の日時を取得
	  // 時、分、秒を文字列に変換し連結
	  time = date.getHours().toString() + "時"
	         + date.getMinutes().toString() + "分"
		 + date.getSeconds().toString() + "秒";
	  return time;
       }

メソッド

数値を文字列に変換[toString()]

	  time = date.getHours().toString() + "時"

文字列に対してサイズを指定[fontsize(n)]

	                  getTime().fontsize(i),

文字列に対して色を指定[fontcolor(color)]

	                  getTime().fontsize(i).fontcolor("red"),

課題2

以下の処理を行う Web ページを JavaScript を使用して作成しなさい．

作成する Webページは指定された名前のファイルに保存し，ブラウザにより，正常に動作することを確認すること．

JavaScriptでは文字列を評価する関数 eval(st) が用意されている．
eval関数に数式を文字列として与えれば，
```
      eval("3+4+2")  → 9
```
のように，数式の計算値を得ることができる．

関数機能

eval(st) stを評価した値を戻り値として返す

promptダイアログを使用して計算式を入力すると，入力式は，定数ではないので，文字列として受け取られてしまう．上で述べた eval を利用すると文字列として受け取った計算式を計算（評価)することができる．

promptダイアログを使用して，計算式を受け取り，それを評価した結果を表示するページをファイル ex2-1.html に作成せよ．

時間に余裕がある場合には，次の問題にも取り組んで下さい．
ダイアログボックスより，生年月日を受け取り，今日がその誕生日から数えて何日目であるかを表示するページを作成せよ．
作成するファイル名は， ex2-2.html とする．
[ヒント] Dateクラスの持つ getTime メソッドを使用する．

関数	機能
eval(st)	stを評価した値を戻り値として返す

学部> 学科> 研究室> 授業