プログラミング(javascript) part1 alert onClick

こんにちはrickyです。

9月に更新しようとしたら、ドットマトリクスの実験がうまくいかず、予定が狂ってしまいました。

スクロールを実装しようとしていたのですが、どうも抵抗を入れていなかったのが原因らしく、後日改めて実験します。

・・・たぶん

本題

今回はプログラミングに移って、javascriptのalert機能を使っていきます。

(警告!)なっている個所をクリックするとアラートダイアログが出現し、Okを押し続けるとホームページを切り替えるというものになります。

ちょっとしたイタズラに使えそうな機能です。

さてソースコードです。

<!DOCTYPE html><!DOCTYPE html><HTML> <HEAD> <title>BottomUpGame</title> <META charset="UTF-8"> <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> <SCRIPT TYPE="text/javascript"> function switchClick() { alert("自爆します"); for(var i=5;i>0;i--) { alert(i); } document.write("bomb!!"); } </SCRIPT> </HEAD> <BODY> <H1 CLASS="center"><SPAN onClick="switchClick()">警告!</SPAN></H1> </BODY> </HTML>

解説

サクラエディタに記述をしています。

拡張子はhtmlにします。

文字化けする際はUTF-8で開きなおして下さい。

onClick関数を使ってクリックが出来るようにし、関数を呼び出します。

呼び出された関数はalertメソッドで文章を表示させ、for文を使ってカウントダウンをします。

最後にdocument.writeメソッドで文字を出力し、完成です。

f:id:knroro1877887:20181006222258p:plain

f:id:knroro1877887:20181006222340p:plain

あとがき

今回はjavascriptについて書きました。

htmlと組み合わせると動的な処理を行えるのでなかなか楽しかったです。

本当はOkをクリックしなくても自動でカウントダウンさせたかったのですが、やり方が分からずじまいでした。

alertメソッドは一度しか呼ばれないのかもしれません。

分かる方がいたら教えて頂けると嬉しいです。

次回は電子工作に戻る予定です。

お楽しみに~