JavaScript

JavaScriptでループ処理

JavaScriptでループ処理をしたい場合はSetTimeoutを利用してループ処理をさせることが可能です。

※尚下記は3秒ごとにループさせる記述になります。

function loop(){
 <!--  ループさせたい処理をここに書く -->
  setTimeout(loop,3000);
}

JavaScriptで時刻に応じて処理を変える方法

JavaScriptで時刻に応じて処理を変えてみましょう。

今回は00時~11時台と、12時~23時台で分けて処理をしてみましょう。

$(function(){
	var dayDate = new Date();//日付情報を取得します。
	var hour    = dayDate.getHours();//時間の数値を取得します。

	if( hour <= 11 ) {
		//00時~11時台の処理を入れます
	} else if( hour <= 23) {
		//12時~23時台の処理を入れます
	}
});

JavaScriptでページを表示する度に画像をランダムで表示させる方法

複数の種類の画像をページ表示毎にランダムに表示させたいことってありますよね。そういった場合にJavaScriptを使用してこの処理を行ってみましょう。

<div id="randomImg"></div>

上のrandomImg内にjpg画像をランダムで挿入するJavaScriptの処理になります。

$(function() {
	img = new Array();
	img[0] = "img01";
	img[1] = "img02";
	img[2] = "img03";
	img[3] = "img04";
	img[4] = "img05";
	n = Math.floor(Math.random()*img.length);

	$('#randomImg').append(
							'<img src="' + img[n] + '.jpg" width="100" height="100" alt="">'
						);
});

JavaScriptでチェックボックスをクリックしたときの動作の切り替え

特定のチェックボックスをクリックしたときの動作の切り替えをしたい時があります。

まずチェックボックスにクラスを付与します。

<input type="checkbox" class="cb" name="" value="">

それから、JavaScriptの記述は下記です。

$(function() {
  $('.cb:checkbox').on({
    'click': function(){
      if($('.cb:checked').length > 0){
        //チェックされた時の動作
      } else {
        //チェックがはずれた時の動作
      }
    }
  });
});

JavaScriptで、ブラウザやIEのバージョン別で処理をする

UserAgentの文字列を元にブラウザを判定する方法になります。

今後UserAgentの値が変更される可能性もありますので絶対安心できる方法ではありません。

	//UserAgentで判定をする
    var ua = window.navigator.userAgent.toLowerCase();
    var av = window.navigator.appVersion.toLowerCase();

    if (ua.indexOf('msie') != -1) {
        if (av.indexOf("msie 6.") != -1) {
            //IE6の処理
        }else if (av.indexOf("msie 7.") != -1) {
            //IE7の処理
        }else if (av.indexOf("msie 8.") != -1) {
            //IE8の処理
        }else if (av.indexOf("msie 9.") != -1) {
            //IE9の処理
        }
    }else if (ua.indexOf('chrome') != -1) {
        //Chrome/Operaの処理
    }else if (ua.indexOf('safari') != -1) {
        //Safariの処理
    }else if (ua.indexOf('firefox') != -1) {
        //Firefoxの処理
    }

JavaScriptを活用してurlの文字列を取得

各ページの文字列を取得し、あらゆる処理に利用したい場合があります。

その場合は以下のように取得します。

$(function(){
	var pageURL = window.location.pathname;
    var pathArr = pageURL.split("/");
    for (var i = 1; i < pathArr.length; i++){
        path1 = pathArr[1];
        path2 = pathArr[2];
        path3 = pathArr[3];
        path3 = pathArr[4];
    };
});

これでスラッシュごとに区切って文字列が取得できます。

もしページのurlが、

http://frontendegg.com/aaa/bbb/ccc/index.html

であった場合は。

  • path1にはaaa
  • path2にはbbb
  • path3にはccc
  • path4にはindex.html

が格納されます。

jquery.cookie.jsを活用してcookieを扱ってみよう

JavaScriptでcookieを使用するのは意外と面倒ですが、jquery.cookie.jsを利用することで、cookieを簡単に扱えます。

jquery.cookie.jsこちらからダウンロードできます。

以下がhtmlの記述例です。JQueryのプラグインになりますので、jQueryとセットで利用します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

cookieの保存に関しては以下のように記述します。

$.cookie("KEY", "VALUE", { expires: 7 });

KEYには保存したいcookieの名前、VALUEには値を入れます。

{}の中は、optionが指定できます。

※有効期限の指定もできます。これが設定されていない場合は、ブラウザを閉じたタイミングで削除されます。

optionのパラメータ内容は以下になります。

  • expires → 有効期限(日数)
  • path → 有効なパス(ドメイン全体で利用したい場合は’/’を設定)
  • domain → 有効なドメイン
  • secure → HTTPS接続の場合のみにcookieを送信(デフォルトはfalse)

cookieの取得は下記になります。

※保存時に設定したKEYを元に取り出す。

$.cookie("KEY");

cookieの削除は下記になります。

※保存時に設定したKEYを元に取り出す。

$.removeCookie("KEY");

※パスを指定する場合は下記になります。

$.removeCookie("KEY", { path: "/" });

JavaScriptでスマホのタッチイベントを取得する方法

スマホでタッチイベントを取得して、挙動を制御したり、値を取得して、何らかの動作を実行したりすることは、今後増えてくると思います。

そこでJavaScriptを使ったタッチベントの取得方法等を記述します。

document.addEventListener("タッチイベント", touchXXXHandler, false);
function touchXXXHandler(event) {
  //処理を記述
}

タッチイベントについては2種類ある。

1つの指でタッチした場合と、2つの指でタッチした場合がある。

【1つの指】

  • touchstart = 新しくスクリーンに指が触れた時に発生するイベント
  • touchend = スクリーンから指を離した時に発生するイベント
  • touchmove = スクリーンに触れている指をスライドさせた時に発生するイベント
  • touchcancel = システムによってタッチイベントがキャンセルされた時に発生するイベント

【2つの指】

  • gesturestart = 新しくスクリーンに指が触れた時に発生するイベント
  • gestureend = スクリーンから指を離した時に発生するイベント
  • touchmove = スクリーンに触れている指をスライドさせた時に発生するイベント
  • gesturecancel = システムによってタッチイベントがキャンセルされた時に発生するイベント

イベント情報に関してはオブジェクト毎に3つのリストがある。

  • touches = スクリーンに触れている各指の情報
  • targetTouches = 同じノード内で開始された各指の情報
  • changedTouches = イベント発生の元となった指の情報

そしてリストからは以下の情報を取得することができる。

  • clientX = クライアント領域(viewport)に対するX座標
  • clientY = クライアント領域(viewport)に対するY座標
  • screenX = 画面の表示領域に対する指のX座標
  • screenY = 画面の表示領域に対する指のX座標
  • pageX = ページ全体に対する指のX座標
  • pageY = ページ全体に対する指のY座標
  • target = タッチイベントが発生したノード
  • identifier = それぞれのタッチイベントに対する、ユニークな値

下記が取得方法の例です。(1本めの指のX座標を取得する時)

event.touches[0].pageX;

iframeを使用したyoutubeの埋め込み

今回はiframeを使用してyoutubeの埋め込みをする方法をご紹介する。

尚、動画のIDとはは下記URL例の「?v=」以降の箇所になる。

https://www.youtube.com/watch?v=Ye_J4fIAV2A

<iframe width="幅" height="高さ" src="https://www.youtube.com/embed/動画のID"></iframe>

また動画IDの後に「?」を記述し、パラメータを記述することで、あらゆる表示の操作ができる。

一部パラメーター例

  • コントロールバーを隠す → autohide=1
  • 全画面表示ボタンを非表示 → fs=0
  • タイトルバーを非表示 → showinfo=1
  • 関連動画を非表示 → rel=0
  • 自動的に動画を表示 → autoplay=1

また、連続してパラメータを利用するときは、下記のようにセミコロン「;
」を挟んで記述する。基本的に「1(表示)」「0(非表示)」。

url例

https://www.youtube.com/embed/Ye_J4fIAV2A?autohide=1;fs=0;showinfo=1;rel=0;autoplay=1

JavaScriptでコピーガード

ページ内の写真や文章をコピーされたくない時があります。

下記を実装すれば右クリックしたときに表示されるコンテキストメニューが表示されなくなります。

document.body.addEventListener("contextmenu", function(e){
    e.preventDefault();
}, false);

また、下記を記述すれば、キーボードを使ったコピペソースコードの表示ができないようになります。

document.onkeydown = function(e) {

    if (e.ctrlKey && (e.keyCode === 67 || e.keyCode === 86 || e.keyCode === 85 || e.keyCode === 117 || e.keycode === 17 ) {
        return false;
    }
};

以下が禁止しているキーコードです。

  • 67 = C
  • 86 = V
  • 85 = U
  • 116 = F5
  • 17 = Ctrl

もちろん技術的に詳しい方であればコピーできてしまいますが、一般の知識の方に対する対策であればこれで十分かと思います。