Youtube 讓iframe有透明度

記錄一下在做youtube iframe滿版時遇到元素被遮住的問題，
可以加wmode=transparent 字串到Video的URL後面即可。
遇到IE瀏覽器記得要下meta讓IE執行edge模式

Add this in your html:

http-equiv="X-UA-Compatible" content="IE=edge" />

The page in IE is rendering in Quirk mode.

Try using Youtubes iframe embed method (if thats not what you are already doing, and add: ?wmode=transparent to the url (replace ? with & if it is not the first url variable)

[Javascript] 如果透過window物件來將字串轉換成執行程式

先前需要遇到不同狀況時，
呼叫不同含式，
但函式內部只是call不同api，
於是為了簡寫一點程式，利用字串的方法來取得函式物件，
可以使用window[你的函式字串]來轉換含式

           var runAPI = '';
                switch (reportType) {

                    case 'datastream':
                        runAPI = 'FUN_A';
                        break;

                    case 'avg':
                        runAPI = 'FUN_B';
                        break;

                    case 'max':
                        runAPI = 'FUN_C';
                        break;

                    case 'min':
                        runAPI = 'FUN_B';

                        break;

                }//end of switch

                //conv to real js function !!important
                var fnRunAPI = window[runAPI];

接著funRunAPI就變一個可執行的函式了

2015/10/21 更新

另外要使用物件或帶入參數也是可行的


window[你的函式字串](參數)

window[物件Class名稱][物件函式字串](參數)

[Javascript 茶包筆記] 簡單列表網頁的小函式

最近有客戶需要列印網頁的內容，於是找到了簡單的方法:D

//列印網頁
function printPage(text){
 
 var text= document;
 print(text);
}

[Javascript] Timer議題: setTimeout 與 setInterval的筆記

最近用timer來實作dashboard相關的機制，順便查一查筆記一下:d

字面上說明

Timeout  ==>逾時
Interval  ==>間隔

定義:

Javascript的計時功能提供了setTimeout與setInterval這兩種用法，執行後會取得一個Timer ID。

要取消計時可以用的分別是clearTimeout()和clearInterval()，然後把執行後取得的Timer ID殺掉即可

兩者差別:

setTimeout()只做一次；setInterval()會不停的的調用函數。

運作原因:

由於javascript是只有單一執行緒，因此只是告訴Js在某一段時間後，再插入執行你指定的函式

[Javascript] 日期增加運算

常用的增加時間運算函式，有興趣的朋友可以選用。可以自行設定Interval，非常方便:D
Reference: http://stackoverflow.com/questions/1197928/how-to-add-30-minutes-to-a-javascript-date-object

 function dateAdd(date, interval, units) {
        var ret = new Date(date); //don't change original date
        switch(interval.toLowerCase()) {
            case 'year'   :
                ret.setFullYear(ret.getFullYear() + units);
                break;
            case 'quarter':
                ret.setMonth(ret.getMonth() + 3*units);
                break;
            case 'month'  :
                ret.setMonth(ret.getMonth() + units);
                break;
            case 'week'   :
                ret.setDate(ret.getDate() + 7*units);
                break;
            case 'day'    :
                ret.setDate(ret.getDate() + units);
                break;
            case 'hour'   :
                ret.setTime(ret.getTime() + units*3600000);
                break;
            case 'minute' :
                ret.setTime(ret.getTime() + units*60000);
                break;
            case 'second' :
                ret.setTime(ret.getTime() + units*1000);
                break;
            default       :
                ret = undefined;
                break;
        }
        return ret;
    }

[Javascript] 常用到的日期字串轉日期物件方法

常常遇到日期字串要轉來轉去，以下是轉換的方法。
提醒自已別再忘記了XD

/*Date control*/

function convStrToDate(dateStr){
 var parseDateObj = parseDate(dateStr); //.replace(/-/g,"/");
 // $.console("parse:" + parseDateObj);
 var convDate = new Date(Date.parse(parseDateObj));
 return convDate;
}

function convDateToStr(dateObj) {
 var year = dateObj.getFullYear();
 var month = dateObj.getMonth() + 1;
 var date = dateObj.getDate();
 var hour = dateObj.getHours();
 var minute = dateObj.getMinutes();
 var second = dateObj.getSeconds();

 return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
}

function parseDate(dateStr) {
 var a = $.map(dateStr.split(/[^0-9]/), function(s) {
  return parseInt(s, 10)
 });
 return new Date(a[0], a[1] - 1 || 0, a[2] || 1, a[3] || 0, a[4] || 0, a[5] || 0, a[6] || 0);
}

[Javascript] 透過prototype的方法存取private member

記錄一下先前遇到的事情，
某一天在寫類別的時候，遇到想要用prototype去存取private member的成員，
就偷懶直接把private member改為public member XD，
查了一下Stackflow javascript - accessing private member variables from prototype-defined functions

No, there's no way to do it. That would essentially be scoping in reverse.

Methods defined inside the constructor have access to private variables because all functions have access to the scope in which they were defined.

Methods defined on a prototype are not defined within the scope of the constructor, and will not have access to the constructor's local variables.

You can still have private variables, but if you want methods defined on the prototype to have access to them, you should define getters and setters on the this object, which the prototype methods (along with everything else)will have access to.

function Dog(_dogName){
    var that = this;
    
    var dogname = _dogName || "dog" ;//default setting
  
    that._getName = function(){
       return dogname;
    };
    
    that._setName = function(newName){
         dogname = newName;
    };

};
//use getName to access private member
Dog.prototype.getName = function(){
    return  this._getName();
};
Dog.prototype.setName = function(newName){
    return  this._setName(newName);
};
    
var myDog = new Dog();
console.log("mydog:" + myDog.getName());

var tomDog = new Dog("tom");
console.log("tomDog:" + tomDog.getName());
tomDog.setName("mary");
console.log("tomDog2:" + tomDog.getName());

Fiddle看範例: Go

Reference:
Private Members in JavaScript

[Javascript] Regex group

實作拖拉上傳資料夾時，
需判斷客戶端使用的瀏覽器是否支援。
使用了regex group的功能，做個group的使用筆記。
chrome version :24.0.1312.57

var browserVersionFullNumber = $.getBrowserVersion();
 var myRegexp = /([\d]+)/g;
 var match = myRegexp.exec(browserVersionFullNumber);
 browserVersion = match[1];  // abc

[Javascript] 日期計算的應用

常常會用到又會忘記的日期格式運算。
找了一些文章說用format("yyyy-MM-dd")可以格式化但一直爆炸XD
找到的應用會直接更新在這篇。

//取得現在的日期
var currentTime = new Date(); 
//往前推30天
currentTime.setDate(currentTime.getDate() + (-30));

//第一天跟最後一天
var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);

 
//格式化yyyy/mm/dd
function dateFormat(date){
  var d  = date.getDate();
  var day = (d < 10) ? '0' + d : d;
  var m = date.getMonth() + 1;
  var month = (m < 10) ? '0' + m : m;
  var yy = date.getYear();
  var year = (yy < 1000) ? yy + 1900 : yy;
  
  var finalDate = year + "-" + m + "-" + d;
  return finalDate;
};

//日期相差的天數
function getDiffDays(endDate){
 var date1 = new Date();
  var date2 = new Date(Date.parse(endDate.replace("-", "/")));
  var date3 = date2.getTime() - date1.getTime();//時間差的毫秒数  
  var days = Math.floor(date3/(24*3600*1000));//相差天數
  return days;
};

[Javascript] 檢查json的key是否存在

太常用到了，記錄一下。使用hasOwnProperty就可以輕鬆解決嚕 wow

You don't need jQuery for this, just JavaScript. You can do it a few ways:

• typeof d.failed- returns the type ('undefined', 'Number', etc)
• d.hasOwnProperty('failed')- just in case it's inherited
• 'failed' in d- check if it was ever set (even to undefined)

[Javascript] Callback function

Callback在寫oop的javascript中非常好用， 找到了一篇非常容易理解的好文章。
Callback Functions in JavaScript

function mySandwich(param1, param2, callback) {
    alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);
    if (callback && typeof(callback) === "function") {
        callback();
    }
}

mySandwich('ham', 'cheese', 'vegetables');

[jQuery] ajax 異常錯誤

昨天遇到一個很奇怪的AJAX呼叫錯誤， 最後發現觸發的元素內的javascript:void(0)打錯了，導致JS異常=.= 找了一陣子才找到，真是扯XD

[Javascript] JavaScript 物件導向的寫法

Javascript物件寫法真是多到爆，希望多看能找出一些寫起來易都跟維護的程式。

順便在這篇記錄一下。

JavaScript 物件導向的寫法

[JavaScript] 驗證物件為null或undefined

如果檢查物件是否為null或undefined

if(typeof(foo) !== 'undefined' && foo != null) {
    //you can use foo!
}

[Javascript] Prototype 繼承

記錄一些關於Prototype的讀後感:)


Prototype的好處?
Javascript可使用Prototype來擴充類別的方法，
可以增加其效能，可將全部已instances的物件，
全部加上新的方法。

為什麼要用jQuery.fn?
jQuery中的jQuery.fn ($.fn) 其實就是等於 jQuery.prototype，
意即:

$.fn = $.prototype

所以寫外掛的時候就能輕鬆擴充jQuery的函式庫了。

為什麼不直接用$.prototype?


主要在於早期的jQuery.fn裡的每個內容並不使用prototype來實作，
而是採繞行整個物件的方式，
因為物件內的屬性跟方法可能很多，導致速度很慢，
後續版本改用prototype來提升效能，
為避免已存在的外掛程式被破壞。
所以才有會$.fn = $.prototype的別名存在。

Reference:

用javascript的prototype來玩繼承

[Javascript 茶包筆記] 變更JSON物件的屬性

//add a new property to JSON object

object["property"] = value; 

or

object.property = value; 

[Javascript 茶包筆記] -Array

//combine two arrays

var firstArray  = new Array(1,2,3);
var secondArray = new Array(4,5,6);
var combinedArray = firstArray.concat(secondArray);

[[Javascript 茶包筆記]] 小數點運算

JavaScript 要取到小數點下的指定位數，要四捨五入時有內建的toFixed()函數可使用，

例：
var num = new Number(13.3714);
document.write(num.toFixed());
document.write(num.toFixed(1));
document.write(num.toFixed(3));
document.write(num.toFixed(10));

結果：

13
13.4
13.371
13.3714000000

[Javascript 茶包筆記] setTimeout 倒數計數

專案需用到倒數計數的功能，
以下是一個簡單的測試版本，
另外又在網上找到一個將秒數轉時分秒(TimeToHMS)
javascript func。

script範例程式如下：

//20分鐘
var allTime = 1200000;
$(document).ready(function(){
$("#myDiv").css("border","3px solid red");
DoTestCount();
});

function DoTestCount()
{
if(allTime <= 0){
//dopostback
__doPostBack(this.btnSubmit,"")
}
else
{
var timeTmp = allTime/1000;
var currentTimeHMS = TimeToHMS(timeTmp)
$("#myDiv").text(currentTimeHMS)
setTimeout("DoTestCount()",1000);
}
allTime-=1000;
}

/* convert seconds value to H:MM:SS format */
function TimeToHMS(seconds)
{
sec = seconds % 60;
temp = ( seconds - sec ) / 60;

minute = temp % 60;
hour = (temp - minute) / 60;

if(!(isFinite(sec) && isFinite(minute) && isFinite(hour))) /* invalid time */
{
return ("");
}

time_str = hour;
time_str += ":";
time_str+=(minute<10)?("0"+minute):minute;
time_str+=":";
time_str+=(sec<10)?("0"+sec):sec;

return (time_str);
}

網頁配置如下：