Webの基礎知識

まず、HTML、CSS、JSの位置付けを理解する。

HTMLの基本

タグと閉じタグで囲う「要素」の解説。

<!--DOM要素-->
<タグ名 属性="値">テキスト</タグ名>

「セレクタ」「プロパティ」「値」などの解説。

/*セレクタ*/
セレクタ {
    プロパティ: 値;
}

オブジェクト指向「オブジェクト（何が）」「プロパティ（どうなる）」「メソッド（どうする）」や「DOM」「変数」「関数」などを解説。

//プロパティ
オブジェクト.プロパティ = 値;

//メソッド
オブジェクト.メソッド(引数);

//変数
var 変数名 = 値;

//関数
function 関数名(引数){
//処理
}

イベントと制御構造の解説。イベントは「いつ」にあたる部分。制御構造は「分岐」と「反復」。

//イベントリスナ
オブジェクト.addEventListener("イベント名", 
//処理
, false);

//if文（分岐）
if (条件式) {
//処理
}

//for文（反復）
for (初期化式; 条件式; 増減式) {
//処理
}

※参考：【JSの基本-後編】書ける前に読む！HTML、CSS、JSの書式-5

GitHubにソースコードを追加（2020/07/24追加）

※参考：ソースコード

上記の内容を抜粋した動画版。CodePen使ってYoutube上でライブコーディングしてみた。

YoutubeのURLはこちら！