はじめに

プログラミング初心者のアウトプット学習です。ドットインストールのJavaScriptのおみくじ作成についてソースコードを簡単に説明してみました。 qiita初投稿につき書き方など未熟な部分もございますがご了承ください。

HTMLについて


<!DOCTYPE html><!-- 文書型宣言 -->
<html lang="ja"><!-- lang属性 -->
<head><!-- <head>タグ -->
  <meta charset="UTF-8"><!-- 文字コード指定 -->
  <!-- 情報の種類を指定する属性 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title><!-- <title>タグ -->
  <link rel="stylesheet" href="style.css"><!-- 外部cssファイルの読み込み -->
</head>
<body><!-- <body>タグ -->
  <div id="btn">?</div>
  <script type="text/javascript" src="main.js"></script><!-- 外部JavaScriptファイルの読み込み -->
</body>
</html>

・文書型宣言：ブラウザはまず、その文書がどんな言語で書かれているのか把握するため始めに記述する。今からこの仕様で書き始めるという宣言。

　文書型(HTML)
　HTMLのバージョン
　DTD(Document Type Definition / 文章の構成要素バージョン)
　上記の3つを示す。HTML5の文書型宣言はだけ。

・lang属性：言語の指定
ja：日本語
en：英語

・<head>タグ：ドキュメント全般の情報(メタデータ)を内包する要素。文書の作者情報、サーチエンジンン向けのキーワードや説明、その文書に関する情報を記述。直接は見えない。

・meta要素：空要素。文字コードを指定する場合は「charset属性」。それ以外は「name属性」か「http-equiv属性」で情報の種類を記述。1つのmeta要素には1つの属性しか指定できない。

・文字コード指定： HTMLファイルがどの文字コードで保存されているのか指定する属性。meta要素でcharset属性を指定する。HTML5では「UTF-8」が推奨されている。

・情報の種類を指定する属性：name属性。name属性で指定した情報の内容は「content属性」で記述する。
　viewport：スマホやタブレットのモバイル端末に最適にweb表示させるために必要な(Google推奨のレスポンシブwebデザイン適用時)htmlタグ。
　width=device-width：表示領域の幅。端末画面の幅に合わせることができるmeta要素のcontent属性の属性値。
　initial-scale：初期のズーム倍率でmeta要素のcontent属性の属性値。

・<title>タグ：文書にタイトルをつけるタグ。省略不可。ブックマークの表示名になる。SEOにも影響する。

・外部CSSファイル(スタイルシート)の読み込み：rel属性でファイルとの関係性を、href属性でそのファイルがある場所(URL)を指定する。

・<body>タグ：webページ表示する内容。

・<div>タグ：ブロック要素でタグ自体には意味がない。幅、高さが指定でき、前後に改行が入る。

・外部JavaScriptファイルの読み込み：type属性はHTML5では省略可。src属性で外部ファイルの読み込み。

CSSについて

/* セレクタbody */
body{
  background: #efefef;
}
/* id="btn" */
#btn{
  width: 200px;
  height: 200px;
  background: #ef454a;
  border-radius: 50%;
  margin: 30px auto;
  text-align: center;
  line-height: 200px;
  color: #fff;
  font-weight: bold;
  font-size: 42px;
  cursor: pointer;
  box-shadow: 0 10px 0 #d1483e;
  user-select: none;
}
/* :hover疑似クラス */
#btn:hover{
  opacity: 0.9;
}
/* :active疑似クラス */
#btn:active{
  box-shadow: 0 5px 0 #d1483e;
  margin-top: 35px;
}

・body：body全体を指定。
background：body全体の背景を#efefef(白系)の色にする

・id=”btn”：idがbtnの要素を指定。今回の要素はdivタグ。
下記にプロパティ(適用するスタイルの種類)の内容説明。
　width：要素の幅を200pxにする
　height：要素の高さを200pxにする
　background：要素の背景を#ef454aにする
　border-radius：要素の角の丸みを50%にする(width，heightとの併用で円が作れる)
　margin：要素の外側の余白を上下に30px，左右に自動で設定
　text-align：要素の文章を左右中心寄せにする
　line-height：行の高さを200pxにする
　color：要素の色を#fffにする
　font-weight：フォントの太さをbold(太字)にする
　cursor：マウスカーソルをリンクポインタに指定する
　box-shadow：右に0，下に10px，ぼかし0，色#d1483eの影を付ける
　user-select：テキストや画像などの要素を選択できないようにする

・id=”btn”に:hover：疑似クラスのひとつで要素の上にマウスのポインタを置いたときに実行されるクラス。
　opacity：ホバーしたときに0.9だけ透過する(0.5で半透明)

・id=”btn”に:active：疑似クラスのひとつで要素がアクティブになったときのスタイルを指定する。クリックされてから離されるまでの間の状態。下記によりボタンがクリックされている感じを表現する。
　box-shadow：右に0，下に5px，ぼかし0，色#d1483eの影を付ける
　margin-top：要素の外側の余白を35pxにする

JavaScript

```javascript "use strict";//strictモード

{
const btn = document.getElementById("btn");//定数btnの定義

btn.addEventListener("click", () => {//クリックイベントの追加
const results = ["大吉", "中吉", "凶"];//定数resultを定義。swich文でも書ける

//配列resultsからランダムに結果を出力する。
btn.textContent = results[Math.floor(Math.random()*results.length)];
//const nとして定義してもOK。
// const n = Math.floor(Math.random()*results.length);
// btn.textContent = results[n];

//swich文でおみくじの結果を表示する場合
// switch(n){
//   case 0:
//     btn.textContent = "大吉";
//     break;

//     case 1:
//     btn.textContent = "中吉";
//     break;

//     case 2:
//     btn.textContent = "凶";
//     break;
// }

});
}


・”user strict”;：strictモード。JavaScriptのコードを厳しくエラーチェックできる仕組み。全体に設定する場合は1行目に記述する。


・定数btnの定義：HTMLからid=”btn”の要素を取り出して変更不可な変数として定義。
getElementByIdメソッド：HTMLタグ内で指定したid属性を持つドキュメント要素を取得するElementオブジェクトのメソッド。


・クリックイベントの追加：ボタン要素に対してクリックイベント処理を設定。
対象要素．addEventListener(種類，関数，false)様々なイベント処理を実行することができるメソッド。
　第1引数：イベントの種類を指定、このイベントがどのようなケースに対応するのかを特定する。
　第2引数：関数を指定、任意のイベントが発生しいたときに関数内に書かれた処理を実行。
　第3引数：イベントの伝搬の方式を「true / false」で指定するが、通常はfalseを指定。


・結果として大吉、中吉、凶を定義。


・btn.textContent：id=”btn”に対して配列resultsからランダムで結果を取り出しHTML解釈はせずにそのまま文字として出力する。

参考：https://dotinstall.com/lessons/omikuji_js_v5