Javascriptレシピ⑧

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

onChangeイベント

<input type='text' id='input_message' value='' onChange='func1()'>

function func1(){
    const input_message = document.getElementId('input_message').value;
    document.getElementById('out').innerHTML = input_message.toUpperCase();

FileReader

CSVや画像ファイルをブラウザから直接読み取ったりアプロード出来ます。

const text = new Blob(['テスト'], {type:'text/plain'});
const file_reader = new FileReader();

file_reaeder.onload = function(e){
    console.log(file_reader.result);
};

file_reader.readAsText(text);

オブジェクトをシリアライズ

シリアライズとはインスタンスを送信可能なように変換することです。
ｊｓではJSON文字列に変換します。
JSON.stringfyメソッドを使用します。
関数のオブジェクト、symbol、undefineシリアライズ出来ません。
配列の中にある場合はnullになります。
第二引数にはkey,valueが渡されます。

const obj = {id='1', name='sds';}
const after_obj = JSON.stringfy(obj, (key,value){
    if(value === null){
        return;)
    }
    return value;
})

第三引数はspace変数で、変換後のJSONの文字列のインデントが設定できます。

FormData

FormDataオブジェクトとはサーバーにデーターを送信する際に使用するオブジェクトです。
ユーザーが入力するデータや任意のデータをサーバーに送信できます。

function func1() {
    const formData = new FormData(document.forms.form1);
    formData.append('key1','value');
    for (item of formData) {
        console.log(item);
    }
    return false;
}