JavaScriptの使い方・メソッド・プロパティまとめ

workplace IT

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)

サイズ、長さ

文字数(lengthプロパティ)

ループ、論理

for/while(ループ処理)
If/else/Switch/Case(条件分岐)
オブジェクトの各プロパティに反復処理(for in)

ランダム

0~1の乱数を求める(Math.random関数)

jQuery

jQuery読み込み
show/fadeIn/slideDownメソッド(要素をアニメーションさせながら表示)
stopメソッド(アニメーションを途中で中断・スキップ)
hasClassメソッド(セレクタがクラスを持つ・持たないで条件分岐)
hoverメソッド(マウスカーソルが乗ってる間だけ処理実行)
offsetメソッド(要素の縦、横の位置を取得)

コメント