Javascriptレシピ⑤

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

###連想配列のループ処理

連想配列とはキーと値のペアで構成される配列です。

const array = {
    key: 'value',
    key:'value',
}

プロパティを指定するには2種類の方法があります。

//ドット記法
array.key

//ブラケット記法
array['key']

const obj = {}
for(const i=0; i<5; i++){
    obj[i] = i*100;
}

for(const key in obj){
    if(obj.hasOwnProperty(key)){
        const val = obj[key];
        console.log(val);
}

//for in文でループ処理をしてプロパティを出力しています。

###Javascriptの実行が遅い時

JSは外部ファイルに記述する
JSファイルの読み込みは/bodyの直前にする
無駄な変数宣言や毎回のDOM生成をしない

###ファイルのダウンロード

Blobオブジェクトとwindow.URL.createObjectURLメソッドを使います。

<a href='./wanko.txt' download='wanko'>ダウンロード</a>

const blob = new Blob(
    [text],
    {'type':'text'})
    const url =window.URL.createObjectURL(blob)
    document.getElemntById('link') = url
}

###JSでselect要素にoption追加

selectタグを取得
optionタグを作成、テキストとvalueを設定
appendChildでタグ追加

<button onVlick='add()'>add</button>

<select name='name' id='select'>
    <option value='1'>1</option>
    <option value='2'>2</option>
</select>


function add(){
    const select = document.getElementById('select');
const option = dociument.createElement(option);
option.text=3;
option.value=3;
select.appendChild(option);
}

###JSでのセッションの情報管理

セッションとはフロント側でデータを一時保存できる機能のことです。

//SessionStorageが使用可能か判定
if(('sessionStrage' in window) && (window.sessionStotagr !== null)){
    //ok
}    else{
    //no
}

//SessionStorageへデータを保存
sessionStorage.setItem('session_save',1);
window.sessionStorage.seiItem('session_save',1);
sessionStorage.session_save = 1;

//データを取り出す
get_storage = sessionStorage.getItem(session_save);
get_storage = window.sessionStorage.getItem(''session_save);
get_storage = sessionStorage.session_save;

//データを削除
sessionStorage.removeItem('session_save');
window.sessioStorage.removeItem('session_save');

//全削除（初期化）する
sessionStorage.clear();
window.sessionStorage.clear();

###文字コードを変換

文字コードとは機械語を人が読める文字に変換するための規約です。

文字列の1文字の文字コードの確認には

文字列.charCodeAt(数値)

文字コードのデコードには

String.fromCharCode(数値);

###処理の順番の変更

console.log('a');
cetTimeout(()=>{
    console.log('b')},0
);
console.log('c');


let num = 100;
console.log(num);
new Promise((resolve,reject) => {
    num +=100;
    console.log(num);
    resolve(num);
}).then((num)
 =>{
    setTimeout(()=>{
    num+=200},0);
    console.log(num);
}).then((num) =>{
    console.log(num);
})

//100 200 400 400

###配列の最後の要素を書き換える

const array = ['a','b','c']

array[array.length - 1] = 'e';

array.pop();
//削除

delete.array[2];

###配列の最後の要素を書き換える

const array = ['a','b','c']

array[array.length - 1] = 'e';

array.pop();
//削除

delete.array[2];

###動的変数

varでの変数宣言はやめましょう。

let:動的変数、最大代入可能
const:静的変数、再代入不可能

関数内で宣言した変数は外部から参照できず、constは値の変更はできません。

###textareaオブジェクト

textarea要素を扱うことが出来ます。

document.getElementById('wanko').value
//valueでプロパティを使用できます
document.getElementById('wanko').value = pome

document.getElementById('wanko').value.row = '10'

const input_message = document.getElementById('message').value;
message = 'input_message';
document.getElemtntById('output_message').innerHTML = message;