Category Archives: Javascript

JavaScript Date常見錯誤

Posted on by | Leave a reply

經常使用PHP mktime()的開發者在使用JavaScript new Date()的時候最常忘記的狀況就是 javascript的月份參數必須要 -1, 因為他的月份是從0開始代表1月份。


$year = 2018;
$month = 05;
$day = 31;
$h = "09";
$i = "10";
$s = "00";
echo mktime($h,$i,$s,$month,$day,$year);



var year = 2018;
var month = "05";
var day = 31;
var h = "09";
var i = "10";
var s = "00";

console.log(new Date(year, month-1, day, h, i, s));

JavaScript splice 常見錯誤

Posted on by | Leave a reply

splice的功能是把array裡面的某個片段切割出來，
他跟pop有點像但能夠做到的比pop更多。
但很常見的錯誤是切割出來我們會以為回傳的是Object/String/Number，
其實他依然是array的型態。

所以若如果你從array分離出來，return的東西依然是array。
即使只有一個物件在裡面，你還是得用 index = 0 提取出來。
如下：

var myArray = ["a","b","c"];
var theOne = myArray.splice(0,1); //trying to get "a" out

console.log(theOne[0]); // still in Array format, so we need to use index to get it out

搭配AngularJS與jQuery一起使用

Posted on by | Leave a reply

很多時候angularJS的便利性讓我們在開發網路應用程式變得非常方便，尤其是ng-repeat與ng-model，能夠讓我們瞬間更換頁面上面的資訊，不用再像傳統的jQuery的做法，必須要根據selector去一一更換。

即便如此，我們還是有需要使用到jQuery的時候，尤其是當Web Designer不熟悉angularJS時，他設計好的模板就只能支援jQuery（如Modal的功能）。

因此，讓兩者可以並存並且共同發揮其專長就變得很重要了。

假設我們寫了一個 angularJS的 function，$scope.loadCandidate()，需要在jQuery去呼叫他，方法如下：

//HTML
<div id="myCtrl" ng-app="myApp" ng-controller="myCtrl">
</div>

//AngularJS
var app = angular.module("myApp",[]);
app.controller("myCtrl", function($scope){
   $scope.loadSmt = function(){
     //do something
   }
});

//jQuery
function callMe(){
angular.element(document.querySelector('#myCtrl')).scope().loadSmt(); //強迫angularjs的function被執行
angular.element(document.querySelector('#myCtrl')).scope().$apply(); //記得下apply來觸發angularjs的【update】機制
}

 

shadowbox.js, how to use shadow box in more advanced way?

Posted on by | Leave a reply

Offical Website: http://www.shadowbox-js.com/index.html

sometimes we might need to decide what images need to be played instead of using 

<a href="..." rel="shadowbox[Vacation]"><img src="..."/></a>

This is how we can do to create an Array to store all the object

<a id="item_img" href="javascript:;">Click me to play ShadowBox</a>

<a href="{original_img_link}" class="sbox"><img src="{thumb_img_link}"/></a>
<a href="{original_img_link}" class="sbox"><img src="{thumb_img_link}"/></a>
<a href="{original_img_link}" class="sbox"><img src="{thumb_img_link}"/></a>
<a href="{original_img_link}" class="sbox"><img src="{thumb_img_link}"/></a>
<a href="{original_img_link}" class="sbox"><img src="{thumb_img_link}"/></a>


<script>
//the array list going to be played
var play_array = [];

//we use jquery to insert the url into the list
$("a.sbox").each(function(index, element) {
		play_array.push({
			content:    element.href,
        	        player:     "img",	
			title:	   element.title,
		});			
});

Shadowbox.init({
		handleOversize: "resize",
		continuous: true,
		modal: false,
		skipSetup: true,
		counterType: "skip"
});
	
Shadowbox.setup("a.sbox", {
		gallery:        "sbox",
		continuous:     true,
		counterType:    "skip"
});

$("#item_img").click(function(){					
    Shadowbox.open(play_array);			
});

</script>

Javascript Blink

Posted on by | Leave a reply

在網路上找到的blink不是只能用於IE就是只相容於FF, 於是自己嘗試寫了一個JavaScript Blink的功能.
在IE8 及FF測試都沒問題. 閃爍的頻率在SetTimeout裡面可以設定, 1000表示1秒, 2000為2秒, 以此類推.





征才 

JavaScript除錯application/javascript

Posted on by | Leave a reply

剛在JavaScript寫程式時,
發現我的Ajax功能在FireFox可以跑成功, Firebug也偵測不出問題,
但用IE時卻出現錯誤, 顯示說某某行找不到物件.
後來去找了很久才知道原來問題出在一個平時很少注意的地方:

乍看之下可能會覺得以上兩行沒有甚麼差別, 但其實問題就在type的部分,
在FF是可以辨識成功的, 但在IE(測試環境IE8)的情況下就讀取不到Javascript.
所以以後要多注意囉.

[IDEA]存取Windows系統ClipBoard

Posted on by | Leave a reply

製作一個Javascript EDITOR, 可以直接存取Windows 系統 ClipBoard(剪貼簿)的資料/圖片,

如果沒有限定瀏覽器當然最好, 但如果功能只能在IE使用也OK.

以下的CODE參考自某論壇，還沒有嘗試過，先在此記錄一下：

function SetToClipboard(text) {
if (isIE)
window.clipboardData.setData(“Text”, text);
else if (isFF) {
try {
netscape.security.PrivilegeManager.enablePrivilege(“UniversalXPConnect”);
} catch (every) { window.alert(jsresClipboardNotAllowed); return null;}
var clip = Components.classes[“@mozilla.org/widget/clipboardhelper;1”].getService(Components.interfaces.nsIClipboardHelper);
clip.copyString(text);
}
}

如果在editor能夠進行裁剪更佳~

還沒實作過, 這個IDEA如果可以實現, 在部落格寫教學將會非常方便. (不用一直使用圖片編輯器來處理圖像)