Javascriptレシピ③

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

###parseIntメソッド

グローバル関数で文字列を整数に変換してくれます。

parseInt('100',2);

２進数で１００と表示されたものを１０進数に変換しています。

parseFloatは浮動小数点リテラルを使用することが出来るので、２．０のように小数点表記したければ使いましょう。

numberメソッドは浮動小数点を扱うことが出来るのですが、文字列に対応できません。

###innerHTMLメソッド

html要素の中身を変更することが出来ます。

element.innerHTML = '';

こうするとelement要素の内容が空になります。

###joinメソッド

配列の文字列を連結することが出来ます。

const wanko =['toy','poo'];
const result = wanko.join('');
//デバッグするとtoypoo

const wanko =['toy','poo'];
const result = wanko.join();
//デバッグでtoy,poo

const wanko =['toy','poo'];
const result = wanko.join(':');
//デバッグでtoy:poo

###concat

concatメソッドも文字列の連結をすることが出来ます。

const arr1 = [1,2,3,4,5,6];
const arr2 = [];

arr2 = arr1.concat();
arr.push(7);



console.log(arr2);
//[1,2,3,4,5,6,7]

//ここで重要なのはconcat()が新しい配列を返してくれるということです。

###match

matchメソッドは正規表現で指定した値があるかどうかを返してくれます。
該当する文字列がない場合はnullが返ってきます。

var str2 = "123-4567, 000-1111";
console.log( str2.match( /\d{3}-\d{4}/g ) );

正規表現は呪文のようですが使えると便利そうで楽しかと思います。

###locationオブジェクト

locationオブジェクトにはURLに関する情報が格納されています。
UPLからパラメータを取得したり、指定したアドレスに移動したりする時に使います。

console.log(location);
//いろいろな情報が沢山デバッグされます。

const url = location.href;
console.log(url);
//urlが戻り値として変数にかくのうされています。

location.href = 'http://wankowankowanko';
//該当したページに遷移出来ます。

###真偽値・三項演算子

真偽値とはtrueとfalseのことです。
値なので''で囲う必要はありません。

三項演算子はif文の代用になるものです。
かなりの頻度で使うかと思います。

const wanko = 'toypoo';
const dog = wanko === toypoo ?1 :2

trueの時は?の１
falseの時は:の２
が変数に格納されます。

###alertメソッド

alert('wanko');

警告ウィンドウが表示されます。

###confrimメソッド

const wanko = confirm('toypooですか？');
document.write(answer);

確認のダイアログが表示されます。
yesの時はtrue,noの時はfalseを返します。

###prompeメソッド

promptメソッドは入力ダイアログボックスを表示させます。

const wanko = prompt('名前は？');
document.write(wanko);

//第二引数を指定すると初期値がセットされます。

const wanko = prompt('名前は？','わん');
document.write(wanko);

###serIntervalメソッドとsetTimeoutメソッド

setIntervalメソッドは一定時間ごとに特定の処理を繰り返します。
setTimeoutは一定時間後に特定の処理を一度だけ行います。

const count = 0;
const countUp = () => {
    console.log(count++);
}
setInterval(countup,1000);

//これを
setInterval(()=>{
    console.log(countUp++);
});

//とも書けます。

//処理を止める時はclearIntervalを使います。
//その場合はidを決めてあげましょう。

const count = 0;
const countUp = () => {
    console.log(count++);
}
const id = setInterval(()=>{
    countUp();
    if(count > 100){
        claerInterval(id);
    }},1000);

###if文

上から順に処理されるので各順番に気をつけましょう。

###switch文

ifよりスマートに書けます。

const dog = 'toypoo';
switch(dog){
    case'toypoo':
        document.write('write');
        break;
    case'pome':
        document.write('');
    case'siba':
        document.write('');
        break;
    default:
        document.write('dog');
}


//caseからbreakまでがひとかたまりです。