はじめてのJS - JavaScriptはじめのいっぽ

占いゲームをつくろう

  1. 計算させる
  2. 占う
  3. ボタンを出す
  4. CSSで飾る

おまじない

  1. 位置ずれを防ぐ
  2. 文字化けを防ぐ

次はどこへ?

  1. つくろう
  2. みせよう

占いゲームをつくろう

計算させる

プログラミングとは、コンピューターに自分の思い通りに計算させること。次のプログラムを打ち込んで、ブラウザ(Chrome推奨)で開いてみよう。 コピペしないのが上達の近道!

<script> alert(1+1); </script>

答がダイアログで表示されましたか?
おめでとう!JavaScriptプログラミング、はじめのいっぽ、完了です!
+-*/で四則演算、小数点や括弧も使えます。

GOTO メニュー

占う

ゲームに欠かせない博打要素、ランダム。

<script> alert(Math.random()); </script>

0以上1未満の乱数が表示されます(リロードする度に変わる!)

条件分岐のif(イフ)を使ってラッキーな日かそうでもないかを占うプログラムにしましょう。

<script> if (Math.random() < 0.2) { alert("今日はいいことあるよ!"); } else { alert("今日は割りとフツーな日。"); } </script>

GOTO メニュー

ボタンを出す

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>

占いゲームができました!
buttonにbtnという名前を付け、btn.onclick = で、そのボタンが押されたときに動かすプログラムを設定しました。

GOTO メニュー

CSSで飾る

画面のデザインを変えるにはheadタグ内のstyleタグ、CSSを使います。

<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、いろいろ調べて改造してみよう!

GOTO メニュー


おまじない

文字化けを防ぐ

文字はコンピューターで扱うために数値化されています。どの文字を何の値にするかは好みですが、最近は utf-8 が主流です。 流儀が違うと文字化けします。HTML内に文字コードを指定するタグを含めて、その文字コードで保存することで、文字化けを防ぎましょう。

<!DOCTYPE html> <html><head> <meta charset="utf-8"> </head> <body>はろー</body><html>

GOTO メニュー

位置ずれを防ぐ

HTMLには数十年の歴史があります。タグの解釈がバージョンによって少しずつ異なるため、最新のHTML5であることを明示することで、位置ずれを防ぎましょう。

<!DOCTYPE html> <html><head> </head> <body>はろー</body><html>

DOCTYPEにずらずらと長いURLを指定した時代もありました。

GOTO メニュー


次はどこへ?

つくろう

つくればつくるほどに腕は上がります。ネット上のいろんなサンプルを見て、真似て、改造して、自分のモノにしてください。

GOTO メニュー

みせよう

つくったもの、勇気を出して人に見せてみよう。「つくってみた」とツイートするもよし。「ちょっとみてくれない?」と隣の人に見せるもよし。 もらった感想が次つくるもののヒントになる。いいものができたらコンテストへの参加も検討しよう!

GOTO メニュー


CC BY 一日一創 by @taisukef