参加型のプログラム
今回は、ブラウザの閲覧者が参加できるようなプログラムを書いていく。
参加型とは？
簡単にいうと、入力欄があって、そこに入力してもらうという作業。
これを私は勝手に「参加型」と呼んでいる(笑)
先日の、ボタンで画像を切り替えるの回は、参加型といえば参加型だけど、こちらが指示して押させたというか、そういう感じだから参加型とはちがうのかなという印象。
やっぱ受動的より、能動的のほうが楽しいし、身になると思うのよね。
そして！
今回書いてみた参加型プログラムには、条件分岐 が含まれております！
これはよく使うみたいだね～
条件分岐を書くことによって、プログラムがよりプログラムっぽくなる。
意味不明だけど、とりあえずプログラムが複雑になって、おもしろくなる、と言ったほうがよいのかな。
題材はスヌーピー♪
さっそくですが、スヌーピーに関する問題。
ちょいとむずいかも(笑)
さあ何匹！
正解パターンのアラート表示。
不正解パターンのアラート表示。
そうなんです、スヌーピーには５匹も兄弟がいるんです。
はじめて知った方も多いでしょう。
意外にもスヌーピーの世界って、けっこうリアル。
そんな可愛い～っていうだけじゃないのよ。
スヌーピーの世界にだって人間みたいにいろいろあんのよ。
そして、それぞれのアラートで「OK」をクリックするとこの画面が表示。
いいかんじにプログラムができております✨
ソースコードはこちら。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>条件分岐 if文</title> </head> <body> <script> //クエスチョン var answer = prompt("スヌーピーには何匹の兄弟がいるでしょう？", ""); //複数の回答パターン if (answer == "5" || answer == "5匹" || answer == "5ひき" || answer == "５" || answer == "５匹" || answer == "５ひき") { alert("正解です！"); } else { alert("ざんねん！正解は5匹でした。"); } </script> <p> <img src="www.snoopy.co.jp_friends_snoopy_.png" alt="snoopy_brothers"> </p> <p>公式サイト： <a href="https://www.snoopy.co.jp/friends/snoopy/" target="blank">https://www.snoopy.co.jp/friends/snoopy/</a> </p> </body> </html>
回答パターンいろいろあったと思うんで増やしてみた。
「prompt」っていうのは、今回のメインである参加型プログラムを作るのには欠かせないものである。
promptは、もとは「window.prompt」というもので、今回はその省略形。
入力欄を出すおまじないさ。笑
じっくり条件分岐やってみたらちょっとおもしろいかも。
