Javascript

javascript 判斷變數為空值

在php有個好用的函數 isEmpty()，可以快速的判斷空值，包含 空值、空字串、空物件、空陣列等

不過到了javascript，就必須自己寫了

            function isEmpty(obj){
                if(typeof(obj)=='object'){
                    for(var key in obj){
                        if(obj.hasOwnProperty(key)){return false;}
                    }
                    return true;
                }else{
                    if(typeof(obj)=='number'){if(isNaN(obj)){return false;}}
                    if(obj){return false;}else{return true;}
                }                
            }

D3.js 繪製圓餅圖(pie chart)及甜甜圈圖(donut chart)

利用arc函數繪製圓弧
            //指定繪圖容器
            var vis=d3.select("#mysvg");
            //利用d3製作myScale函數，用以讓百分比可直接對應至弧度
            //myScale(0)=0, myScale(100)=2pi
            var myScale=d3.scale.linear().domain([0,100]).range([0,2*Math.PI]);
            //資料陣列，[起始,結束,顏色]
            var datas=[[0,50,"#f00"],[50,75,"#0f0"],[75,100,"#00f"]];
            //.arc()  繪製圓弧
            //.innerRadius(內圓半徑)
            //.outerRadius(外圓半徑)
            //.startAngle(起始角度)
            //.endAngle(結束角度)

D3.js 基本繪圖

繪製直線

 
var svg = d3.select('#d3_line').append('svg');
svg.style('height',130).append('line')
.attr('x1', 40).attr('y1', 10)
.attr('x2', 200).attr('y2', 70)
.style('stroke', 'red').style('stroke-width', 5);
 

 

繪製矩型

Javascript 動畫函式庫 GreenSock出品的GSAP

在Flash還相當盛行的時候，ActionScript 是很多動畫製作人員一定要懂的程式語言。可以透過ActionScript 來自動執行一些基礎特效，或是製作如水波的擾動之類的一些特殊的特效。 其中滿有名的一個函式庫是由GreenSock所出品的GSAP(GreenSock Animation Platform)，包含TweenLite,TweenMax,TimelineLite,TimelineMax，作用有點類似jQuery，提供了一些簡便的方法製作動畫，可以說是打開了一道好入門的製作程式動畫的通道，個人覺得相當好用，且執行效能也不錯。 近期發現 GreenSock 也把這個函數庫搬到javascript來了，且語法目前看起來大致一樣，不過其實個人覺得最重要的是，他有支援jQuery ！。