<script> alert(1+1); </script>
答がダイアログで表示されましたか?ゲームに欠かせない博打要素、ランダム。
<script> alert(Math.random()); </script>
0以上1未満の乱数が表示されます(リロードする度に変わる!)条件分岐のif(イフ)を使ってラッキーな日かそうでもないかを占うプログラムにしましょう。
<script> if (Math.random() < 0.2) { alert("今日はいいことあるよ!"); } else { alert("今日は割りとフツーな日。"); } </script>
HTMLを使って画面をつくります。
<html> <body> <h1>占いゲーム</h1> <button id=btn>占う</button> </body> </html>
<と>で囲まれたモノをタグと呼び、文字(テキスト)をマークアップするのでHTML(Hyper Text Markup Language)。ボタンが押されたら結果を表示するように、さっきのプログラムと合体します。
<html> <body> <h1>占いゲーム</h1> <button id=btn>占う</button> </body> <script> btn.onclick = function() { if (Math.random() < 0.2) { alert("今日はいいことあるよ!"); } else { alert("今日は割りとフツーな日。"); } } </script> </html>
占いゲームができました!<html> <head> <style> body { font-family: sans-serif; margin: 10vw; text-align: center; background-color: #ccf; color: #000; } button { font-size: 150%; padding: 1em; margin: 2em; } </style> </head> <body> <h1>占いゲーム</h1> <button id=btn>占う</button><br> いいことあるかも? </body> <script> btn.onclick = function() { if (Math.random() < 0.2) { alert("今日はいいことあるよ!"); } else { alert("今日は割りとフツーな日。"); } } </script> </html>
HTML、CSS、JavaScript、いろいろ調べて改造してみよう!<!DOCTYPE html> <html><head> <meta charset="utf-8"> </head> <body>はろー</body><html>
<!DOCTYPE html> <html><head> </head> <body>はろー</body><html>
DOCTYPEにずらずらと長いURLを指定した時代もありました。