<戻る(Back

目次

  1. HTMLの要素を取得する
  2. HTMLの要素を生成する
  3. @media条件を取得する
  4. イベント設定
  5. 文字列を置換する
  6. 型変換
  7. シングルクォート(')とダブルクォート(")の使い分け

[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コーディングで使用するので。