JavaScript実習

2015年06月03日 11:12
渡辺隆行
http://www.univ-web.org/nabe/lec/InfoSys/JS/JSex.html

alert dialog その1

script要素の中にJavaScriptを埋め込む方法です.

Interactive dialog

ユーザが入力した値を画面に表示します.

このプログラムでは変数「your_name」に,promptウィンドウでユーザが入力した値を代入しています(prompt関数は,ユーザが入力した値を返すので,それが変数「your_name」に代入されます.).文字列をつなげる事ができる演算子「+」を用いて文字列を結合した上で,それを引数に取る「document.write」という関数で,文字列をウェブページに挿入しています.

反復(繰り返し)のアルゴリズムの例

ユーザが入力した値から順に0になるまでカウントダウンします.

forループで反復のアルゴリズムを実装しています.for(初期値 ; 終了条件 ; 変化)という形式でループを表現しています.

alert dialog その2

自動的に表示されるのはわずらわしいので,ボタンを押す(クリックする場合とENTERキーを押す場合がある)と表示されるようにしました.

button要素にonclick(またはonkeydown)というイベントハンドラを書いて,ボタンをクリックされたら(またはボタンにフォーカスがある状態でENTERキーが押されたら)されたら,alert関数を実行しているわけです.

confirm dialog その1

今度は,確認を求めるウィンドウを出して見ます.

分岐(選択)のアルゴリズム:confirm dialog その2

確認ウィンドウは,押されたボタンの値によって真か偽を返します.

if関数を用いると分岐のアルゴリズムを実装できます.

世界時計

世界時計です.このHTMLファイルのhead部に,関数WorldClockを定義してあります.また,このページを表示するタイミングでこの関数WorldClockを実行するために,body要素の開始タグに,「<body onload ="WorldClock()">」として関数の実行を指示する命令が書いてあります.

計算

+

eval(文字列)は,文字列に相当する数字を返します

最終更新時刻

アニメーション

アニメーションに使う図を用意しておいて,一定の時間間隔で図を切り替えています.

目が動くアニメーション用の図

自作時に利用する図:左寄り目真中の目右寄り目


クリエイティブ・コモンズ・ライセンス© Takayuki Watanabe