３−１．WEB系エンジニアになるためのインプット（JavaScript基礎）

12477 ワード
HTML bootstrap4 JavaScript CSS HTML テキストリンク

はじめに

こちらの記事の続きとなる。
２−２．WEB系エンジニアになるためのインプット（Linux基礎）
先の記事はLinux基礎を作るまでのインプットとそのアウトプットの記事となります。
今回は次のカテゴリとしてJavaScriptをインプット＆アウトプットしていく。

教材と環境は下記の通りです。
・教材はUdemy for businessを活用する。
　[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門
　（講師：たにぐち まこと（ともすた））
・開発環境はVisual Studio Code（Version: 1.52.0）を利用する。

また、HTMLとCSSおよびBootstrapは既に学習済みのため、今回は詳しく触れない。

準備するHTMLとCSS

ベースとして下記コードを予め準備し、JavaScriptの実装を経験する。

HTML

Bootstrapのバージョンはv4.5を利用する。
教材ではv3を使っているが、本実装では最新版を使って臨機応変に対応させる。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TODAY</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h1>TODAY</h1>
  </header>

  <div class="container">
    <p class="date">20xx/01/23</p>
  </div>

  <!-- Optional JavaScript; choose one of the two! -->
  <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

CSS

style.css
body {
  font-family: arial;
  text-align: center;
}

header {
  margin-bottom: 100px;
}

h1 {
  background-color: #000;
  color: #fff;
  margin: 0;
  padding: 10px;
  font-size: 18px;
}

.date {
  font-size: 300%;
  font-family: 'Times New Roman', Times, serif;
}

表示される画面

こちらが表示されることが確認できる。
真ん中の表示される日付をJavaScriptを使って、最終的には今日時点の日付を取得していく。

scriptタグ

上記のHTMLで直接日付を表示しているpタグ部分をまずはscriptタグを使って書き直してみる。

修正前
<p class="date">20xx/01/23</p>
修正後
<script>
  document.write('<p　class="date">20xx/01/23</p>');
</script>

参考：計算結果を表示

先ほどの修正前箇所を下記コードに書き換えると、日付が表示されていた部分は13と表示されるようになる。

計算結果
<script>
  document.write(10+3);
</script>

また、文字と数値計算の区別はシングルクォーテーションの有無で変わる。その例を下記に示す。

文字と計算結果
<script>
  document.write('10+3の結果は'+ (10+3) + 'です');
</script>

参考：変数を使った計算

先ほどの数値計算を変数を使って表現することもできる。

変数を使った計算
<script>
  var answer = 10 + 3;
  document.write('10+3の結果は'+ answer + 'です');
</script>

本日の日付を表示

最終的な目標とした日付の表示の実装を進める。

日にちだけの表示

先ほどの修正前箇所を下記コードに書き換えると、本日の日にちが表示されるようになる。
今回はインスタンスとメソッドがキーとなる。

本日の日にち表示
<script>
  var today = new Date();
  document.write("<p>今日は、"+ today.getDate() +"日です。</p>")
</script>

日付の表示（目標点）

先ほどの修正前箇所を下記コードに書き換えると、yyyy/mm/ddの形式で日付が表示される。
なお、月の取得のgetMonthメソッドは注意が必要で、1月が０、2月が1などと1ずつ少ない値が取得されるためプラス１が必要である。

本日の日付を表示
<script>
   var today = new Date();
   var todayHtml = today.getFullYear() + '/' + (today.getMonth()+1) + '/' + today.getDate();
   document.write('<p class="date">' + todayHtml + '</p>');
</script>

これで目標とした JavaScriptを使った本日の日付表示を実装することができた。

さいごに

まずはJavaScriptの基礎の基礎を実装した。
次回はHTML,CSS,JavaScriptを使った簡単なストップウォッチのようなものを作成してみる。