JavaScriptでよく使う記述まとめ

動的配列

function printArray(intArr){
    let outputString = "[";
    for (let i = 0; i < intArr.length; i++) {
        outputString += intArr[i] + " ";
    }
    console.log(outputString + "]");
}

// 初期配列を2つの項目に設定します。
let dArr = [2,3];

console.log("Insert/Delete at the beginning O(n)");
printArray(dArr);

// 配列の先頭に要素を追加します。O(n)
// unshift(値)メソッドを使います。
dArr.unshift(3);
// 引数はいくつでも設定できます。
dArr.unshift(3,43,5234,34);
printArray(dArr);

// 最初の要素を削除します。O(n)
// shift()メソッドを使います。
dArr.shift();
printArray(dArr);

// インデックス2の位置にある要素を削除します。O(n)
// splice()メソッドを使います。splice(スタート、削除したい数、追加したい値)
dArr.splice(2, 1);
printArray(dArr);

dArr.unshift(343,343,232,12,23,-23,10);
printArray(dArr);

// 配列の途中に要素を追加します。
console.log("Insert/Delete at the middle O(n)");
dArr.splice(Math.floor(dArr.length / 2), 0, 4);
printArray(dArr);
// splice()でいくつでもデータを追加することができます。
dArr.splice(Math.floor(dArr.length / 2), 0,343,32,23,24,12,23,98,767);
printArray(dArr);

// 配列の途中の要素を削除します。
dArr.splice(Math.floor(dArr.length / 2), 1);
// 配列の途中から、5つ先まで削除します。
dArr.splice(Math.floor(dArr.length / 2), 5);
printArray(dArr);

console.log("Insert/Delete at the end O(1)");

// 配列の最後に要素を追加します。
// 1つの要素をプッシュします。
dArr.push(4);
dArr.push(50);
printArray(dArr);

// 配列の最後に複数要素を追加します。いくつでも可能です。
dArr.push(6,3,4,54);
printArray(dArr);

// 配列の最後を削除します。
// 1つの要素を削除します。
dArr.pop();
printArray(dArr);

console.log("Pop 5 from end ");

// 後ろから5つの要素を削除します。
for(let i = 0; i < 5; i++) {
    dArr.pop();
}
printArray(dArr);

concat

配列を結合する

function printArray(intArr){
    for (let i = 0; i < intArr.length; i++){
        process.stdout.write(intArr[i] + " ");
    }
    console.log();
}

// 初期配列を2つの項目に設定します。
dArr = [2,3];
printArray(dArr);

// 配列の末尾に要素を追加します。動的配列は内部に配列を管理しているので問題なく処理します。
dArr.push(30);
dArr.push(645);
dArr.push(23);
dArr.push(-35);
dArr.push(325);
dArr.push(1425);
dArr.push(0);
dArr.push(98);

printArray(dArr);

// 配列の最後に多くの値を追加します。
dArr = dArr.concat([3,34,3542,10,202,34,203,-75,-56,45,0,43,1132])
printArray(dArr)

toFixed(digits)

小数点以下を指定された桁数に四捨五入した値を文字列で返す。

let num = 2.3416;
num.toFixed(2)
//2.34

配列の要素の並べ替え

Array.sort(function(a,b){return a-b;})

forで1つずつ比べなくて良いし、1行で済む！

オブジェクトの配列をアルファベット順に並べ替える

Array.sort(function(a, b){
    if(a.name < b.name)return -1;
    if(a.name > b.name)return 1;
    return 0;
});

push() メソッド

配列の末尾に 1 つ以上の要素を追加する。また戻り値として新しい配列の要素数を返す。

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

staticメソッド

インスタンスなしでも使える関数になる！
https://recursionist.io/dashboard/course/2/lesson/273

ステートレスオブジェクト

状態を持たないオブジェクト。単なる名前空間で、変数や関数を囲むだけ。オブジェクトのインスタンスを作る必要がなく、すべてのクラスの変数とメソッドに直接アクセスできる。
https://recursionist.io/dashboard/course/2/lesson/278

オブジェクトの記述

例

const person = {
  name: ['Bob', 'Smith'],
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
};

ドットによるアクセス

person.name
person.greeting()

[]によるアクセス

person[`name`]
person[`greeting`]()

連想配列

キーの存在チェック

if (key in hashmap) {
}

test()メソッド

/正規表現/.test(文字列)

正規表現のパターンを文字列から探してtrueかfalseを返す。

正規表現

\dは数値を意味する。[0-9]と同じ。
[AB]はAまたはB、[^A]はA以外を意味する。
https://recursionist.io/dashboard/problems/34

/^#[A-Fa-f\d]{6}$/

https://recursionist.io/dashboard/problems/submissions/193922
https://qiita.com/iLLviA/items/b6bf680cd2408edd050f

テンプレートリテラル${}

バッククォーテーションで文字列を記述したものをテンプレートリテラルと呼びます。
テンプレートリテラルでは改行文字をそのまま改行として入力できるほかに文字列の中に式や変数の値を埋め込むことができます。
シングルクォーテーションなどを使って文字列を記述した場合、改行を行うにはエスケープシーケンスの \n を記述する必要がありました。テンプレートリテラルでは、改行したい位置で Enter を入力するだけで済みます。

文字列の中に式を埋め込む

${式}
変数や式を組み込むための記号。

let a = 5;
let b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."

+を使わずにもっと読みやすく表記することができる。

let a = 5;
let b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

HTML

Javascriptの読み込み

bodyタグの最下部に以下を記述する

<script type="text/javascript" src="script/vending_machine.js"></script>

scriptフォルダのvending_machine.jsというファイルを読み込む。

ノードのコピー(HTML)

例）py-2が入った要素が3つ出てくるのでdiv1のコピーを作成する。

let div2 = div1.cloneNode(true);

要素のノード.cloneNode(true)はノードの完全コピーを生成する。
div2 = div1 というのはオブジェクト参照をコピーすることを意味するので注意。
https://recursionist.io/dashboard/course/15/lesson/298

style属性の追加

style属性にCSSを書く
例）背景画像を設定して、文字の色を白にする。

containerDiv.style = "background-image: url(画像のurl); color: white;"

innerHTML

pタグの書き方

for文を使って、pタグを<p></p><p></p><p></p>のように足し合わせてdialogStringを作る。これは後にcontainer.innerHTMLを使うとpタグが1列で入るのでブラウザ上では改行されることになるため。(pタグがブロック要素のため)({dialogString}を使って追加する)
例）

    let container = document.createElement("div");
    let dialogString = ``;
    //for文を使って、pタグを```<p></p><p></p><p></p>```のように足し合わせてdialogStringを作る。
    for(let i = 0; i < inputElementNodeList.length; i++){
        let currEle = inputElementNodeList[i];
        let value = parseInt(currEle.value);
        if(value > 0){
            let attribute = currEle.getAttribute(multiplierAttribute);
            dialogString += `<p class="rem1p3 calculation-box mb-1 pr-2">${value} × $${attribute}</p>`;
        }
    }
    let total = billSummation(inputElementNodeList, multiplierAttribute);
    let totalString = `<p class="rem1p3 pr-2">total: $${total}</p>`;
    container.innerHTML = `
    <h2 class="pb-1">${title}</h2>
    <div class="d-flex justify-content-center">
        <div class="text-right col-8 px-1 calculation-box">
            //dialogStringを追加
            ${dialogString}
            ${totalString}
        </div>
    </div>
    `;

querySelectorAll

// querySelectorはセレクタの文字列を取得する。
const form = document.querySelector("#bank-form");

// querySelectorAll(`input[name="id名"]`)によってinputタグの特定のidの情報を取得する。

let email = form.querySelectorAll(`input[name="userEmail"]`)[0].value;

//formの中から、name="userAccountType"を持つinputでchecked属性がtrueのものをリストで取得し、
その中から0番目のものの値を取得。
(name="userAccountType1"とname="userAccountType2"が存在する場合に使える。)
let type = form.querySelectorAll(`input[name="userAccountType"]:checked`).item(0).value;

document.getElementByIdは、documentの中(今スクリーン上にあるもの)を検索する。
したがって、Javascriptで作成中の要素にdocument.getElementById()は使えないので、
要素名.querySelectorAll()を使う。

addEventListener

EventTarget.addEventListener(eventType, callback)
ターゲットのオブジェクトにイベントリスナーを登録する。イベントが発生するたびにコールバック関数が実行される。
コールバック関数は、イベントオブジェクトのパラメータを 1 つ受け取ることができ、常に void を返す必要がある。このイベントオブジェクトには、どのようなイベントが発生したのか、いつ発生したのか、なぜ発生したのかなど、発生したイベントに関する追加情報が含まれている。

例）rightBtnがクリックされた時にslideJump関数を実行するイベントリスナーを設定する。

rightBtn.addEventListener("click", function(){
    slideJump(1, "right")
});

以下のように書くと、クリックした時ではなくページを更新したときにnew Event("click")が行われ、slideJump関数が実行されてしまう。

rightBtn.addEventListener("click", slideJump(1, "right"));

ブラウザイベント

setInterval

一定時間ごとに関数を実行する。

setInterval(関数,時間)

clearIntervalでsetIntervalの処理を停止できる。

changeイベント

target.addEventListener("change", function(){
});

selectオブジェクト

selectオブジェクトの値（value）を取得

selectオブジェクトのデフォルト値を設定する(選択項目を選択した状態に設定する)

let select1 = document.getElementById("select1");
select1.options[i].selected = true;

Event.currentTarget

Eventオブジェクトが発生した要素を取得できる。

jQuery

スムーススクロール(アンカージャンプ)

jQueryの読み込み

<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>

JavaScriptのコード

$('a[href^="#"]').click(function(){
    let speed = 500;
    let href= $(this).attr("href");
    let target = $(href == "#" || href == "" ? 'html' : href);
    let position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });

localStorage