cloud9_note

cloud9に限らないメモ

View on GitHub

JavaScript

ページ読み込み時に呼び出す

window.onload = function(){
    // ページ読み込み時に実行したい処理
}

参考

変更が発生したときに呼び出す

<input type="text" name="main_pull_request_url" id="id_main_pull_request_url" oninput="updateInputState()"/>

イベントループ

  1. コールスタック
    • 関数の呼び出し順。
    • LIFO
    • JavaScriptエンジン内で実装される。
  2. ヒープ
    • 動的に使用されるメモリ領域。
    • JavaScriptエンジン内で実装される。
  3. タスクキュー
    • 関数の呼び出し準。
    • FIFO
    • JavaScriptエンジン内で実装される。
  4. Web API
    • DOM, Event, setTimeout, Ajax等を指す。
    • ノンブロッキング（非同期）に実行される。
    • ブラウザが提供する。

イメージ

while(queue.waitForMessage()){
  queue.processNextMessage();
}

queue.waitForMessageはもしその時点でメッセージが存在しないのであれば、同期的にメッセージが到着するのを待ちます。

参考

配列操作

map

'use strict'

const list = [1, 2, 3, 4, 5];
console.info(list.map((v , i, array) => {
    return array[i] * 2;
}));
console.info(list);

[ 2, 4, 6, 8, 10 ]
[ 1, 2, 3, 4, 5 ]

filter

'use strict'

const list = [1, 2, 3, 4, 5];
console.info(list.filter((v, i, array) => {
    return v % 2 == 0;
}));
console.info(list);

[ 2, 4 ]
[ 1, 2, 3, 4, 5 ]

find

最初に条件に一致した要素を返す。

'use strict'

const list = [1, 2, 3, 4, 5];
console.info(list.find((v, i, array) => {
    return v % 2 == 0;
}));

2

slice

部分配列を返す

import, require, export

export

module.exports

// export
// filename : sample.js
const hoge = () => {
    // pass
}

module.exports = hoge;

// require
const sample = require('./sample');
sample();

module.exports.関数名

// export
// filename : sample.js
const hoge = () => {
    // pass
}

module.exports.hoge = hoge;

// require
const sample = require('./sample');
sample.hoge();

参考

Mapオブジェクト

Javaとだいたい同じだが、forの書き方が違う。

// なにかMapオブジェクトを返す関数。
const map = getMap();

// map.entries()でも、mapでも同様。
for (const [key, value] of map.entries()) {
    console.log(`${key}: ${value}`);
}

ブラウザでファイルを読み込む

前提

自動読み込みはできない。必ずユーザ操作が必要。

HTML

<input type="file" id="job_list_load" />
<button id="job_list_load_button" onclick="load()">Load</button>

JavaScript

let jobList = [];
function load() {
    const input = document.getElementById('job_list_load');
    const filepath = input.files[0];
    console.info("filepath: ", filepath);
    if (filepath) {
        const reader = new FileReader();
        reader.onload = function(e) {
            try {
                jobList = JSON.parse(e.target.result);
                console.info(jobList);
            } catch (e) {
                alert('Jobデータファイルの読み込みに失敗しました。' + e);
                console.error(e);
            }
        }
        reader.readAsText(filepath);
    } else {
        const errorMessage = 'ファイルが選択されていません。';
        alert(errorMessage);
        console.error(errorMessage);
    }
}

コールバックで共通化する

    function loadData(id, onSucess, onError) {
        const input = document.getElementById(id);
        const filepath = input.files[0];
        console.info("filepath: ", filepath);
        if (filepath) {
            const reader = new FileReader();
            reader.onload = function(e) {
                try {
                    const data = JSON.parse(e.target.result);
                    console.info(data);
                    onSucess(data);
                } catch (e) {
                    alert(onError + e);
                    console.error(e);
                }
            }
            reader.readAsText(filepath);
        } else {
            const errorMessage = 'ファイルが選択されていません。';
            alert(errorMessage);
            console.error(errorMessage);
            return;
        }
    }

    let dependencyList = [];
    function loadDependencies() {
        const id = 'dependencies_load';
        const message = 'ジョブ依存ファイルの読み込み'
        const errorMessage = 'ジョブ依存の読み込みに失敗しました。'

        loadData(id, (data) => {
            dependencyList = data;
            console.info(message + " finished.")
            document.getElementById('load_schedule').style.visibility = 'visible';
        }, errorMessage);
    }

    let scheduledList = [];
    function loadScheduleList() {
        const id = 'load_schedule_list';
        const message = 'Jobスケジュールファイルの読み込み'
        const errorMessage = 'Jobスケジュールファイルの読み込みに失敗しました。'

        loadData(id, (data) => {
            scheduledList = data;
            console.info(message + " finished.");
            document.getElementById('load_job').style.visibility = 'visible';
        }, errorMessage);
    }

    function loadJobList() {
        const id = 'load_job_list';
        const message = 'Jobデータファイルの読み込み'
        const errorMessage = 'Jobデータファイルの読み込みに失敗しました。'

        loadData(id, (data) => {
            jobList = data;
            (async function() {
                await addDependencies();
                await addScheduled();
                await drawChart();
            })();
            console.info(message + " finished.")
        }, errorMessage);
    }

JSON - Base64変換