Javascriptレシピ⑥ #JavaScript

Javascriptの簡単なメモです。
アプリ制作に応用できる基本レシピですので、参考にされたい方はどうぞ。

アロー関数


const wanko = function(a){
    return r+r;
};

//アロー関数を使うと

const wanko = r => {
    return r+r;
};

//関数が一行の時は

const wanko = r => r+r;

プログレスバー


<progress id='progress' value='0' max='100'>0%</progress>
<inoput type='button' id='button' onClick='func1()' value='スタート'>

let val;
let intervaiID;

function func1() {
    val= 0;
    document.getElementById(button).disabled = true;
    intervalID = setInterval('update()', 50);
}

function update(){
    val += 1;
    document.getElementById('progress').value = val; 
    document.getElementById('progress').innerText = val + '%';

    if(val = 100){
        clearInterval(intervalID);
        document.getElementBiId('button').disabled =false;
    }
}

日時比較

Dateオブジェクトを使用します。
new Date()でインスタンス化して、インスタンスをもとに計算していきます。


let startTime = new Date();
let endTime = new Date();
let elapsedtTime = endTime.getTime() - startTime.getTime();

let mins = elapsedTime / (1000 * 60);
let secs = elapsedTime / 1000;
Math.floor(mins);
Math.floor(sexs);

無名関数と即時関数


//普通の関数
function sum(a,b){
    const result = a+b;
    return result;
}
const answer = sum(1,2);
console.log(answer);

//無名関数
const sum = (a,b) =>{
    const result = a+b;
    return result;
}
const answer = sum(1,2);

無名関数は関数を変数に入れることが出来ます。
変数に関数を格納できるというのが無名関数のメリットですね。

即時関数とは定義するとすぐに実行される関数です。


const sum = ((a,b) => {
    const result = a+b;
    return result;
})(1,2);
comsole.log(sum);

プログラムがスッキリしています。

DOM操作

Windowオブジェクトはブラウザが持つ情報をすべて持っています。
DocumentオブジェクトはアクセスしているWebサイトそのものでHTMLなどを保持しています。

DOMとはDocument Objrct Modelで、Documentオブジェクトを通じて個々の要素を取得操作することが出来ます。

WindowオブジェクトはHTMLをdocumentオブジェクトに変換する時にツリー構造という構造で保持します。

DOMの動作はdocumentオブジェクトのgetElementByIdメソッドを使います。




const p = document.createElement('p');
const text = document.createTextNode('要素３');
document.body.appendChild(p).appendChild(text);

JSはブラウザ上で動作しているのでブラウザ上で組み立てられて表示されるHTMLの変更ができます。

Arrayオブジェクト


const family = new Array('pome','toypoo','siba');

//長さ
console.log(family.length);

//sliceでは０番目と２番めの一つ前の１番目が指定されます。
console.log(family.slice(0,2));

//reverseでは配列の要素の順番をひっくり返せます。
console.log(family.reverse());

//pushでは配列の末尾に新しい要素を追加し、追加後の要素数を取得できます。
console.log(family.push('a','b'));

//5

//popでは末尾の要素を削除します。
const last = family.pop();

//unshiftでは先頭に要素を追加します。
const start = family.unshift('a');

//indexOfは要素のインデックスを取得します
const wan = family.indexOf('pome');

//spliceはインデックスの位置を指定して要素を削除します。
const remove = family.splice(pos,1);

//任意の箇所を削除する
delete family[1];

//多次元配列
const familybig = family[1];

Mathオブジェクト

//円周率
console.log(Math.PI);

//√計算
comnsole.log(Math.sqrt(64));

//最大値取得
Console.log(Math.max(1,2,3,4,5));

//四捨五入した値を取得
console.log(Math.round(3434.434343));

Mathオブジェクトはstaticなオブジェクトのためnewしなくても使えます。