HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。
ファーストステップ
ログ表示/Console.log(ログに文字列表示)
HTMLでJSファイル読み込み
変数
var（変数の宣言）
文章内に変数を挿入（${}）
オブジェクトの作成、読み取り
windowオブジェクト
alertメソッド（ダイアログメッセージ表示）/とりあえずJavaScriptを動かす
confirmメソッド（確認ダイアログの表示）
setIntervalメソッド（一定時間ごとに処理を実行）
documentオブジェクト
open/writeメソッド（新しいウィンドウを開く/HTMLを描写）
querySelectorメソッド（セレクタから要素を取得）
配列
arrayオブジェクトの作成（配列の宣言）
配列に値を追加（pushメソッド）
配列から値を削除（spliceメソッド）
配列内にある値のインデックス番号を返す（indexOf）
配列内の数値を合計、平均を求める
Elementオブジェクト(DOM)
DOMとは何か
getElementByIdメソッド（IDから要素を取得）
addEventListenerメソッド（イベントを付与）
innerHTMLメソッド（HTMLの内容を変更）
style.backgroundColorプロパティ（背景色の変更）
getBoundingClientRectメソッド（要素の座標を取得）
canvas
Canvas作成(HTML)
fillRect/fillStyle（図形描画・色の変更）
計算
四則演算/算術演算子について
小数点を切り捨てて整数にする（Math.floor関数）
変換
大文字、小文字（toLowerCase、toUpperCase）
抽出
文字列の一部を抜き出す（charAtメソッド、[]）
文字列から指定範囲を抜き出す（Sliceメソッド）
文字列の最初の一文字、最後の一文字を抽出
文字列内の特定の文字のインデックス番号を取得（indexOf）
サイズ、長さ
ループ、論理
for/while（ループ処理）
If/else/Switch/Case（条件分岐）
オブジェクトの各プロパティに反復処理（for in）
ランダム
jQuery
jQuery読み込み
show/fadeIn/slideDownメソッド（要素をアニメーションさせながら表示）
stopメソッド（アニメーションを途中で中断・スキップ）
hasClassメソッド（セレクタがクラスを持つ・持たないで条件分岐）
hoverメソッド（マウスカーソルが乗ってる間だけ処理実行）
offsetメソッド（要素の縦、横の位置を取得）
コメント