【Javascript】ホームページ作成につかえる、JQuery+Javascript+Cssサンプルコード

ホームページ作成時に、使えるコードを紹介します。

１、buttonやimageっを使わずに、クリックしたら、リンクしたサイトへ飛ばす
 (1) 説明
  ・<div>タグでboxを作成する
  ・<p>タグで文章を記載して、<a>タグでリンク先を指定する。
  ・<strong>で強調文字とする
 (2) コード
 <div style="margin-top:65px;margin-left:1170px;position:absolute;background-color:white; border: outset;  width:200px;height:30px;border-color:black;border-radius:5px">
     <p style="margin-top:4px;margin-left:14px;">
         <a href="http://www.yahoo.co.jp/" style="text-decoration: none;color:black">　　　           <strong>yahoo!</strong>
         </a>
      </p>
 </div>

※タグ内でstyle定義していますが、css側で定義した方が、レスポンシブwebサイトで対応しやすくなります。

 ２、起動時に初期設定する window.onload、もしくは、 $(document.body).readyにて、設定を行います
  ・window.onload
   文書のローディング工程の終了時に発生します。このイベントが発生した時点で、文書中の全てのオブジェクトは DOM 内にあり、全ての画像とサブフレームのロードは完了している。
  ・$(document.body).ready
　　画像の読み込みなどは待たず、 DOMツリーの構築が終わった時点で実行されます。
※window.onloadと$(document.body).readyの違いは、「$(document).ready() が先に実行されて、$(window).load() の方が後に実行される」となります。
詳しくは次のサイト一読すると理解しやすいです。
http://rcmdnk.github.io/blog/2015/07/11/computer-javascript-jquery/


３、ブラウザ判別
 (1) 説明
   window.navigator.userAgentを使って判別を行います 
 (2) コード 
   var  browzer;
    if (userAgent.indexOf("Chrome") != -1) {
        //Chrome
        _browzer = BrowzerType.chrome;
    } else if (userAgent.indexOf("Firefox") != -1) {
        //Firefox
        _browzer = BrowzerType.firefox;
    } else if (userAgent.indexOf("Trident") != -1) {
        //IE11
        _browzer = BrowzerType.ie11;
    } else if (userAgent.indexOf("MSIE") != -1) {
        //IE 6 - 10
        _browzer = BrowzerType.ie10;
    } else if (  userAgent.indexOf("Edge") == -1)
    {   // Edge
        _browzer = BrowzerType.edge;

    } else {
        //other
   }
      

４、デバイス判別
 (1) 説明
   window.navigator.userAgentを使って判別を行います 
 (2) コード 
   var _device
     var userAgen2t = window.navigator.userAgent.toLowerCase();
    if (userAgen2t.indexOf('ipad') != -1) {
        _device = DeviceType.tablet;
    } else if (userAgen2t.indexOf('iphone') != -1) {
        _device = DeviceType.sp;
    } else if (userAgen2t.indexOf('Android') != -1) {
        _device = DeviceType.sp;
    } else if (userAgen2t.indexOf('windows') != -1) {
        _device = DeviceType.pc;
    } else {
        _device = DeviceType.onther;
    };