[HTMLの要素を取得する]
- document.querySelector(args)
-
args: 基本(body,div,a,,,)、class属性(.~で指定)、id属性(#~で指定)
-
使用例:
document.querySelector("body");
document.querySelector(".myclass");
document.querySelector("#myid");
- document.getElementById(args)
-
args: id属性(#~で指定)
-
使用例:
document.getElementById("myid");
[HTMLの要素を生成する]
- document.createElement(args)
-
args: 基本(body,div,a,,,)、class属性(.~で指定)、id属性(#~で指定)
-
使用例:
let Ele = document.createElement("div");
[@media条件を取得する]
- window.matchMedia(args)
-
args: 条件式(max-width: 480pxなど)
argsは""もしくは''で括る
-
使用例:
const mediaQuery = window.matchMedia('(max-width: 480px)');
if( mediaQuery.matches )
{
~trueの時の処理~
}
[イベント設定]
- ハンドラーセット
-
タグ要素.onmouseover = (event) => { 呼び出し関数名 }
タグ要素.onclick = (event) => { 呼び出し関数名 }
- リスナーセット
-
タグ要素.addEventListener( "click", 呼び出し関数名 )
タグ要素.addEventListener( "click", (event) => 呼び出し関数名 )
タグ要素.addEventListener( "click", (event) => {~スクリプト処理~} )
[文字列を置換する]
- 文字列.replace(args1,args2)
-
args1: 置換元
args2: 置換先
-
※replaceAllは無いので注意
-
args1で正規表現を使えば繰り返しを指定できる。/[a-z][A-Z].+?/g
gが正規表現のオプションで繰り返しを意味する。
[型変換]
- 数値
-
parseInt(文字列)
parseInt(文字列, 2): 文字列を2進数として数値に変換
parseFloat(文字列)
- 文字
-
toString(文字列)
toString(2): 数値を2進数に変換して文字列へ変換
toString(16): 数値を16進数に変換して文字列へ変換
[シングルクォート(')とダブルクォート(")の使い分け]
JavaScriptでは、文字列を表すのに'と"の2つを使うことができます。
そのため、スクリプトの中が煩雑になりやすく、コーディネーターに
よってもムラが出てきます。
個人的には、JavaScript上での文字列には'の使用をおすすめします。
"は、HTMLコーディングで使用するので。