Miki's Blog

フロントエンジニアに、俺はなる!

【書籍学習ログ】HTML/CSS/JavaScript 基礎 - 【4日目】

Chapter 5 JavaScriptのきほんを学ぼう

1月26日(土) 0.5h

HTML内にスクリプトを記述する

<div class="container">
   <script>
    // スクリプト
   </script>
</div>

文法

命令の記述

オブジェクト. メソッド( パラメータ )
誰に. どうする( なにを )

コメント
/*
複数行
コメント
*/

// 1行コメント
変数宣言
var answer = 10; // var 変数名 = 値;

メソッド

画面に文字を表示する
   document.write('<p class="date">20XX/01/23</p>');
日時を取得する
// 今日の日付を取得
var today = new Date(); // 現在日時を取得
var today_year = today.getFullYear(); // 年4桁
var today_month = tosay.getMonth(); // 月
var today_date = today.getDate(); // 日

// 任意日時を取得
var new_year = new Date(2017, 1, 1); // 元旦
絶対値
var num = Math.abs(-10); // numは絶対値10

成果物

f:id:gomagaru:20190127235429j:plain

まとめと感想

Hugoテーマを使う以外で、はじめてJavaScriptのソースをさわった。
変数宣言やメソッドの使い方などは、他言語での感覚と同じように記述できた。
画面に文章を出すときdocument.writeメソッドに与える文字列に
<p>要素を含めて記述する点が印象に残った。
( '<p class="date">' + todayHTML + '</p>' )

次章で、Webページ上のイベント関連を書けるようなので楽しみ。