javascriptの備忘録

javascriptの備忘録を掲載します。 実用的なコードを掲載していきます。

2013年06月

JavaScript Garden は


JavaScriptというプログラム言語の一番奇妙な部分についてのドキュメント集です。


javascriptの不思議なことが記載されていて面白い。
http://bonsaiden.github.io/JavaScript-Garden/ja/


以下の使用法はエラーとなる。
2.toString(); // シンタックスエラーが発生する 

ただ、以下の場合は正常に動く。
2..toString();
2 .toString();
(2).toString();


なぜ使えるか、その不思議が記載されています。
 
----------------------------------------------------------
VB C# .NET Freamworkの備忘録
http://ari-it.doorblog.jp/
javascriptの備忘録
http://ari-java.doorblog.jp/
--------------------------------------------------------- 

backgroudcolorをRGBからHEXに変換

javascript内でエレメントの色を取得すると、ブラウザやバージョンごとに表示形式が異なる。
表示形式には2種類があり、RGBとHEX(#000000)形式です。

お使いのブラウザで下記コードで実行すると表示形式が分かる。

$(id).style.color = black;
alert($(id).style.color);



ただ、javascriptで色を扱い、処理する際に不便となるため、どちらかの形式に統一したい。
今回はRGB形式であればHEX(#000000)に変換する関数を紹介します。

function colorToHex(color) {

    if (color.substr(0, 1) == '#') {
        return color;
    }
    var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);

    var red = parseInt(digits[2]);
    var green = parseInt(digits[3]);
    var blue = parseInt(digits[4]);
    
    var rgb = blue | (green << 8) | (red << 16);
    return digits[1] + '#' + rgb.toString(16);
};


----------------------------------------------------------
VB C# .NET Freamworkの備忘録
http://ari-it.doorblog.jp/
javascriptの備忘録
http://ari-java.doorblog.jp/
--------------------------------------------------------- 

document.getElementsByClassName


 クラス名をもとにエレメントを取得する関数です。

詳細は使用法については、以下のサイトを参考。
https://developer.mozilla.org/ja/docs/Web/API/document.getElementsByClassName

使用方法


   var elements = document.getElementsByClassName("allMode"); 
for (var i = 0; i < elements.length; i++)
{

if (elements[i].innerHTML=="")
{
’nop
}
}

 
上記コードをGoogle Chrome 9.0 や Safari 5.0では問題なく動作しますが、IE8では対応していないため、getElementsByClassName以降のjavascriptが実行されません。

対応方法としてgetElementsByClassNameと同等の関数を作成して、対応しました。

参考サイト
http://t87r.wordpress.com/2011/02/13/getelementsbyclassname%E3%82%AF%E3%83%A9%E3%82%B9%E5%90%8D%E3%82%92ie%E3%81%A7%E4%BD%BF%E3%81%86/


function getElementsByClassName(targetClass){
   var foundElements = new Array();   
   if (document.all){                             
       var allElements = document.all;
   }
   else {                                              
      var allElements = document.getElementsByTagName("*");
   }
   for (i=0,j=0;i<allElements.length;i++) {
       if (allElements[i].className == targetClass) {  
           foundElements[j] = allElements[i];               
           j++;
       }
   }
   return foundElements;     
}

    var elements = getElementsByClassName("allMode"); 
for (var i = 0; i < elements.length; i++)
{

if (elements[i].innerHTML=="")
{
’nop
}


また、使用したことはありませんが、HTML5で規定されているgetElementsByClassNameが使用できるようにするためのライブラリが以下のサイトで用意されています。

http://www.html5.jp/library/dom_getElementsByClassName.html


----------------------------------------------------------
VB C# .NET Freamworkの備忘録
http://ari-it.doorblog.jp/
javascriptの備忘録
http://ari-java.doorblog.jp/
--------------------------------------------------------- 

年月のコンボボックスを作成します。

月末の場合は、翌月の年月のコンボボックスを作成します。

//年月のコンボボックス設定
function setYMList(selectY,selectM,selectD){

// 月末日チェック
var endDate = new Date(selectY, selectM, 0).getDate();
if(endDate == selectD)
{
// 翌月設定 月末の場合は翌月のコンボボックスを作成するように変更する。
selectM = selectM+1;
selectD = 1;
}


// 日付の作成
var dateYM = new Date(selectY, selectM-1, selectD);

//削除
$('searchYM').innerHTML ="";

// 月の追加 本月から12ヶ月分のリストを作成 
var i =0;
while (i < 12) {

        $('searchYM').options[i] = new Option(dateYM.getFullYear() + "年" + ("0"+(dateYM.getMonth()+1)).slice(-2) + "月",dateYM.getFullYear()+("0"+(dateYM.getMonth()+1)).slice(-2));
//一か月加算
dateYM.setMonth(dateYM.getMonth() + 1);
i++;
    }
}


----------------------------------------------------------
VB C# .NET Freamworkの備忘録
http://ari-it.doorblog.jp/
javascriptの備忘録
http://ari-java.doorblog.jp/
--------------------------------------------------------- 

日付のコンボボックスを作成します。

月は0~11を設定します。
例)2012/11/15 の場合
new Date(2012,10,15)となる。

2012/01/02
var dobj = new Date(2012,0,2)

日付の取得は
dobj .getFullYear()  /* 2012を取得 */
dobj .getMonth()  /* 0を取得 */
dobj .getDate() /* 2を取得 */


※月は「dobj .getMonth() +1


本題のコンボボックス

// 日付の設定
function setDList(selectY, selectM,selectD) {
// 月末日の取得
//(月は0~11) 日(1~)
// 日にちに0を設定すると先月の月末日の日にちを設定したことと同じ意味となる。 
var dateObj = new Date(selectY, selectM, 0);
 
//削除
$('searchD').innerHTML = "";

// 追加
for (var i = 0;i <= (dateObj.getDate() - selectD);i++) {

        $('searchD').options[i] = new Option(i+selectD, i+selectD);
    }

}

----------------------------------------------------------
VB C# .NET Freamworkの備忘録
http://ari-it.doorblog.jp/
javascriptの備忘録
http://ari-java.doorblog.jp/
--------------------------------------------------------- 

このページのトップヘ