Javascriptレシピ⑦

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

###window.closeメソッド

window.closeメソッドはブラウザのタブを閉じる処理を行います。

ブラウザのタブはどれもwindowオブジェクトが持ってるのでwindow.closeメソッドでタブの操作が出来ます。

let _window;
_window = window.open('http://ttt');
setTimeout(() => _window.close(), 3000);

###includesメソッド

文字列や配列の中に引数で指定した値が含まれているかどうかをチェックしてくれます。
第二引数に開始インデックスを数値として指定できます。

const arr = 'wanko pome';
arr.includes('o', 3);
//true

indexOfメソッドも似たような役割ですが、こちらは指定した値が含まれる場合は要素のインデックスを、ない場合は−１を返します。
指定した値が含まれているかどうかだけのチェックではなく、その値に対して何か操作を加えたいケースではindexOfを使います。

const wanko = 'pome';
wanko.indexOf('p');
//0

大文字小文字関係なく調べたい場合はtoLowerCaseやtoUpperCase

wanko.toUpperCase().includes('w');

###正規表現で文字列の抽出

正規表現を使うと複雑なパターンによる文字列検索が行なえます。
URLやメールアドレスの形式になっているか、スクレイピングの判断に役立ちます。

書き方は二種類あります。

①スラッシュで囲まれた正規表現リテラルを使用する

  定数として決められたパターンを照合させたい時に使います。

const wanko =/abc/;

②正規表現オブジェクトのRegExpを使用する

動的な操作に対し使用します。

const wanko = new RegExp('abc');

文字列に一致するものがあるかテストするメソッドをRegExpは持っています。

const str = '32312edwd1d1';
/ab*c+[0-9]*/g.test(str);

###アクセス元の端末がスマホかどうかを判定する

端末情報はJavascriptのnavigatorオブジェクトに格納されています。
navigatorオブジェクトのuserAgentプロパティによってスマホかどうか判断します。
userAgentプロパティを文字列検索かけてスマホかタブレットか判定していきます。

const ut = navigator.userAgent;

if(ut.indexOf('iPhone') > 0 || ut.indexOf('iPod') > 0){
    'smaho';
} else if(ut.indexOf('iPad'){
'tablet';}else{
    'pc';
}

###テキストボックスから値を取得

テキストボックスの要素をJavascriptで指定し、その要素のvalueプロパティを参照することで取得できます。

①getEementByIdを使う方法

const message = document.getElementById('input').value;

②フォームからたどっていく方法

const message = document.forms.form1.input.value;

###ミリ秒単位の経過時間を取得する方法

ミリ秒は１０００ミリ秒で１秒に換算されます。

onClickでstart()とstop()をボタン要素に書きます。
変数宣言を忘れないで下さい。

function start(){
    stare_time = new Date();
}

function stop(){
    end_time = new Date();
    diff = end_time.getTime() - start_time.getTime();
 }

###マウスオーバーイベント

マウスオーバーイベントは要素にマウスが乗った時に発火するイベントです。
逆にマウスが離れた時に発火するmouseoutイベントもあります。

wanko.addEventListner('mouseover', function(event){
    //
}, false);

//forで複数の要素に対してマウスオーバーを指定しています。

for(i = 1; i <= 3; i++) {
    const elem = document.getElementById('div' +i);
    elem.addEventListener('mouseover', event => {
        event.target.style.background = 'orange';
        setTimeout(function() {
            event.target.style.backgroundColor = '';
        },500);
    }, false);
}