ぼくと同じ、JavaScriptを勉強し始めの@cervomansanさんに感化され、自分バージョンの「おみくじプログラム」を作った。
ベースはドットインストールのもの。
以下の改造をしてみた。
- ドットインストールでの改造は組み込み済み
- 外部jsファイル化した（onclickが学べた）
- 外部ファイルにしたので、asyncとdeferを指定して非同期読み込みをかけた
- 結果を画像として出力するようにした
- 乱数で結果を出し、画像ファイル名にそのまま当てた
- jsとCSSのセレクタ一貫性を理解して、キャメルケースでIDを指定した
日本版StackOverFlowと名高いQiitaで、フィードバックを頂きたくて書きました！
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>おみくじ</title>
</head>
<body>
<h1>おみくじ</h1>
<input type="button" value="あなたの運勢は？" id="jsButtom">
<p>あなたの運勢は...
<img id="jsResult"></img>
</p>
<script src="js/omikuji.js" async defer></script>
</body>
</html>
JavaScript
var jsButtom = document.getElementById('jsButtom'); //ボタンをIDでgetしてキャッシュ
jsButtom.onclick = function() { //ボタンがonclickされた時に起きる処理
var omikuji = ["daikichi", "chukichi", "shokichi", "suekichi", "kyo"];
var result = Math.floor(Math.random() * omikuji.length);
var imgFolder = "img/"; //フォルダパスをキャッシュ
var fileExtension = ".png"; //ファイル拡張子をキャッシュ
document.getElementById('jsResult').src = imgFolder + omikuji[result] + fileExtension;
};
Image
img/daikichi.png
img/chukichi.png
img/shochiki.png
img/suekichi.png
img/kyo.png
問題点
- 乱数で配列から結果を取り出し、画像名にそのまま当てたのは、スマートなのか？
- 応用性がでるように、imgFolderとfileExtensionという変数で画像の場所と拡張子を指定できるようにしたが、スマートなのか？
-
jsButtom.onclickのonclickがonClickでは動かなかった謎
セレクタのはなし
- jsでは変数にハイフンは使えない
- jsが触るID・Classにはプレフィックスを付けてわかりやすくしたい
- jsの変数記述などでセレクタと変数をあわせたい
以上の理由からキャメルケース使用に着地したのだが、良いのでしょうか？
まとめ
@cervomansanさんを見習い、Qiitaに自分の勉強過程を書いてみたが、すごく良い！
とりあえず動いたので、自分のこのコードがもっとスマートに書ける方法が知りたい。諸先輩方、なにかありませんか？
いまだ変数・関数・オブジェクトの単語の使い分けが分からない。。。
@cervomansanさんと共にJavaScriptを覚えていきたいです！
その後
【あなたの運勢は？】ボタンを押しまくってひとりで楽しんでる。
こんな気持ちは小学校以来？
他のカスタム予定としては、
- 結果に対するラッキーアイテムを表示したい（if/elseif/elseなのかwitch/caseどっちが正しいの。。。）
- クッキーを使って前の日にちのおみくじの結果を出したい
- あわせてカレンダーを出してみて、今日の日付を強調しつつ前の日付へのリンクを付けたい
- どうせなら結んでみたい（canvasで）