爪哇小子: JavaScript

顯示具有 JavaScript 標籤的文章。顯示所有文章

2015年4月24日星期五

【筆記】在JavaScript中使用正規表示式擷取目標字串

(function(){

 var input = '1990Mar02Taipei35';

 var num = /(\d+)\D+(\d+)(\D+)(\d+)/g;
 
 var result = num.exec(input);

  console.log(RegExp.$1 + ' 年在 ' + RegExp.$3 + ' 的數值是: ' 
              + RegExp.$4);

})();

2014年8月26日星期二

2014年4月26日星期六

【分享】YUI Compressor - JavaScript與CSS的壓縮工具

你是否有曾經因為某些網頁載入時間太久，而跳離該網頁？所以在開發網頁時，網頁程式的輕量化是一個重點。

現在大部份的網頁，除了HTML文件本身外，都還會使用JavaScript和CSS來做網頁設計與版型編排，也都是使用引入的方式來使用，在網頁開啟的時候，也是要先下載到使用者的電腦中，再由瀏覽器執行與呈現，所以這兩者檔案大小，也是影響網頁呈現是否順暢的重要因素。

在這裡我要分享一個名為YUI Compressor這個JavaScript與CSS的壓縮工具，這裡所謂壓縮並非像7-zip或tar那種壓縮，而是把程式碼「最小化」的意思。

YUI Compressor是採BSD授權，先到這裡下載，下載回來後，可以得到一個yuicompressor-x.y.z.jar，前面的x、y、z表示它的版號，這裡使用2.4.8來做說明。

請注意，這是個Java應用程式，所以在執行這個jar檔之前，電腦中要先安裝Java。

再來我寫了一個test.js，內容如下：

var add = function(a, b){
        var c = a + b;
        return c;
};
var sub = function(a, b){
        var c = a - b;
        return c;
};
var multiply = function(a, b){
        var c = a * b;
        return c;
};
var divide = function(a, b){
        if(b === 0){
                return 0;
        }
        var c = a / b;
        return c;
}

將上列程式碼儲存後，它的檔案大小為260 byte：

-rw-r--r--  1 bioyang  staff     260  4 26 16:05 test.js

再來我使用YUI Compressor來進行壓縮：

java -jar yuicompressor-2.4.8.jar test.js -o test-min.js --charset utf-8 --type js

上列的指令中，-o表示要輸出的檔案名稱，--charset是指定壓縮的字元編碼格式，--type是用來告知輸入的檔案是.js或.css，它在輸入的檔案副檔名沒指定時才需要。

其它參數可以參考YUI Compressor文件。

壓縮之後可以看到檔案大小有明顯的減少：

-rw-r--r--  1 bioyang  staff     195  4 26 16:10 test-min.js

使用編輯器來打開test-min.js：

var add=function(e,d){var f=e+d;return f};var sub=function(e,d){var f=e-d;return f};var multiply=function(e,d){var f=e*d;return f};var divide=function(e,d){if(d===0){return 0}var f=e/d;return f};

可以看到除了壓縮大小處理之後，它也能對程式碼做些類似加密、混碼的動作，這對不想讓別人清楚看到程式碼結構的人，是一個非常方便的功能，但如果不要這個功能的話，可以在執行指令時，加上--nomunge這個參數。

當你的.js檔案愈大時，檔案大小減少的感覺會更明顯，比如我下載一個未壓縮的jQuery函式庫回來，還沒壓縮前的大小為：

-rw-r--r--@ 1 bioyang  staff  282944  4 26 16:20 jquery-1.11.0.js

我再用YUI Compressor來進行壓縮後，大小變成：

-rw-r--r--  1 bioyang  staff  108081  4 26 16:23 jquery-my-min.js

更有感！

當然像jQuery這種函式庫若要應用在正式產品上面時，通常還是下載他們壓縮後的版本回來使用，這裡只是用它來做個範例說明。

2014年4月22日星期二

【JS筆記】正規表示式(Regular Expression)中帶有星號(*)的比對模式

先來看一個帶有星號的比對模式：

var pattern = /ab*c/;

pattern.test('abc');  //結果為 true
pattern.test('ac');  //結果為 true
pattern.test('abbbbc');  //結果為 true

pattern.test('adc');  //結果為 false

pattern.test('zabbbbcx'); //結果為 true

由上面的程式碼可以知道，當在比對模式中有出現*時，表示在比對的字串中，在「星號前面的符號有出現0個或多個」的情況下，才能匹配成功。

所以要以/ab*c/這個模式比對成功的話，在比對的字串中，要出現a與c，且中間包著「0」到「多個」的b，才是匹配成功。

參考來源：

JavaScript RegExp * Quantifier

2014年4月18日星期五

【JS筆記】JavaScript格式化數字加上千分數逗點

在網頁呈現數字資料時，常會使用千分位符號來標示數字，幫助閱讀，在JavaScript，可以使用正規表示式來達成這樣的標示：

var thousandComma = function(number)
{
 var num = number.toString();
 var pattern = /(-?\d+)(\d{3})/;
 
 while(pattern.test(num))
 {
  num = num.replace(pattern, "$1,$2");
 
 }
 return num;

}
console.log(thousandComma(1234567.89));

在上例中，先定義一個正規表示式，如第4行，這個模式表示「一個字串中，如果未3碼為數字，且前面有一個或多個數字，就會和此模式匹配」。

在第6行中，第一次的while迴圈測試1234567.89這個字串是否與pattern匹配時，因為1234567這一片段符合，所以結果是true，跑到第8行時，對1234567.89這個字串使用replace函式時，會回傳1234,567.89，其中$1代表符合第一個(-?\d+)的部份，也是就1234，$2代表符合第二個(\d{3})的部份，就567。

在第二次的while迴圈測試時，1234這一片段仍然符合，會跑到第8行時，對1234567.89這個字串，使用replace函式時，1234,567.89中的1234會被替換成1,234，整個字串變成1,234,567.89。

在第三次的while迴圈測試時，因為已經沒有「未3碼為數字，且前面有一個或多個數字」的片段，此時就會回傳false離開while迴圈，上列的thousandComma(1234567.89)就會回傳1,234,567.89。

最後，要注意的是，上列第4行的第一個小括號中的+不能寫成*，不然會造成無窮迴圈喔！

2014年4月10日星期四

【分享】使用vim編輯JavaScript時，開啟自動完成的功能

在使用vim來編輯JavaScript時，是可以使用「自動完成」功能的，但vim預設是未啟動該功能，所以在編輯模式下，使用

Ctrl +
x

開啟x mode後：

再按

Ctrl +
o

預設是沒作用的：

要開啟該功能，先要切換到指令模式(command mode)下，在指令模式中輸入：

:set omnifunc=javascriptcomplete#CompleteJS

指令輸入後，切換回編輯模式中，按下Ctrl + X後，再按Ctrl + O，就會出現自動完成的選項：

但這只是暫時間的設定，關閉vim後，再次開啟編輯JavaScript時，自動完成功能就會關閉。

若要vim在編輯.js檔案時，就預設開啟自動完成的功能，就需要編輯vimrc這個檔案(以Ubuntu為例)：

$ sudo vi /etc/vim/vimrc

在檔案的最下方加入下列指令：

autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS

下面是在Mac設定的方式。

若是在Mac(以我的電腦為例)，要先去編輯/usr/share/vim/下的vimrc檔案：

sudo vi /usr/share/vim/vimrc

在檔案的最下方加入下列指令後儲存：

syntax on

再來新增或編輯，家目錄下的vimrc

vim ~/.vimrc

在檔案的最下方加入下列指令：

autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS

上面是在Mac設定的方式。

儲存後，再以vim來編輯.js檔案時就能有自動完成的功能。

若想學好，這本書不錯哦！

參考來源：

How to auto-complete JavaScript syntax in Vim

2014年4月2日星期三

【筆記】用CSS漸層實作文字區塊的透明遮掩效果

一直好奇在亞馬遜網站中，有一種文字透明遮掩效果是怎麼做出來的，像這樣：

可以看到上列文字區塊的下方，有漸漸淡去的效果。

有天找了時間去研究，原來就是利用區塊漸層的效果，就能做得出來了。首先看一下CSS的部份：

.txtGradient {
   z-index: 2;
   position: relative;
   height: 50px; 
   margin-top: -50px;
   overflow: hidden;
   background: -moz-linear-gradient(
     bottom, 
     rgb(255, 255, 255) 15%,

     rgba(255, 255, 255, 0) 100%
   ); 
   background: -webkit-gradient(
     linear,
     bottom,
     top,
     color-stop(15%, rgb(255, 255, 255)),
     color-stop(100%, rgba(255, 255, 255, 0))
   );
   background: -webkit-linear-gradient(
     bottom,
     rgb(255,255,255) 15%,
     rgba(255, 255, 255, 0) 100%
   );
   background: -o-linear-gradient(
     bottom,
     rgb(255,255,255) 15%,
     rgba(255, 255, 255, 0) 100%
   );
   background: -ms-linear-gradient(
     bottom,
     rgb(255,255,255) 15%,
     rgba(255, 255, 255, 0) 100%
   );

   background: linear-gradient(
     bottom,
     rgb(255, 255, 255) 15%,
     rgba(255, 255, 255, 0) 100%
   );
}

上列主要對我們要用來遮掩的區塊設定漸層的效果，其中linear-gradient屬性的設定主要是由下往上用白色來做漸層，這樣就會讓被遮掩的區塊由上往下慢慢變透明的效果。

這個屬性的設定和參數，可以參考linear-gradient。

再來於HTML中加入文字區塊和要遮掩的區塊：



Duplicate the circle
Because the circle is now a clipping mask, it won’t be visible. 
We need something to be visible that the user can see. 
Let’s duplicate the circle. Now we have two circles ontop of each other, one is a clipping mask,
 the other is a circle with a green stroke.
 


see more

再來我用一點JavaScript來增加一點動畫效果：

做出來的效果就會像這樣：

點了See more之後：

上方文字區塊就有整個展開的感覺。

若你有興趣的話，上列程式碼可以在這裡下載。

2014年3月29日星期六

【JS筆記】正規表示式(Regular Expression)中帶有中括號的比對模式

前面探討過一個簡單的正規表示式：

var pat = /abc/;
pat.test('abc is before def');  //true
pat.test('ab');    //false

以上列的模式/abc/來比對字串時，只有要比對的字串中，一定包含著「abc」這個字串，匹配才會成功，test()函式才會回傳true。

再來看看，若上列的模式用一對中括號包起來呢？如下列模式：

var pat1 = /[abc]/;
pat1.test('ab'); //true
pat1.test('apple'); //true
pat1.test('big'); //true
pat1.test('dig'); //false

由上列的範例，好像只要比對的字串中，只要含有比對模式中一個字元，就能匹配成功？

是的，就是這樣沒錯。

當比對模式有用[]包起來時，只要比對的字串中，含有任何一個中括號內的字元，就能匹配成功。

另外，也可以使用－來表示一個區間內的比對字元，如：

var pat2 = /[A-Z]/;  //比對的字串中，要含有任一個由A至Z的「大寫」字母
pat2.test('apple');  //false
pat2.test('Apple');  //true
var pat3 = /[1-9]/;  //比對的字串中，要含有任一個由1至9的數字
pat3.test('abc');  //false
pat3.test('1st');  //true

如果你想學好JavaScript，我推薦：

還有：

參考資料：

JavaScript RegExp Object
Regular Expression (RegExp) in JavaScript javascript regexp（石頭閒語）

2014年3月27日星期四

【JS筆記】使用Rhino shell來執行JavaScript

很多時候，我若要寫個JavaScript就要先寫個HTML檔案，然後再寫JavaScript，若使用Rhino來執行，就不用這麼麻煩了。

Rhino是個開源(open-source)的，而且完全用Java寫成的JavaScript的實作，只要我的電腦可以執行Java，就可以使用它，可以到這裡下載。

下載完成後，只要把下載的檔案解壓縮，然後用Windows的「命令提示字元」或Linux的「終端機」
前往解壓後的資料夾，執行js.jar，如：

$ cd tools/JavaScript/rhino1_7R4
$ java -jar js.jar
Rhino 1.7 release 4 2012 06 18
js>

之後，我們就可以如在文字編輯器中寫JavaScript撰寫程式碼，如：

js> var a = 1, b = 2;
js> a + b
3

【JS筆記】正規表示式(Regular Expression)的「^」與「$」特殊符號

若想要有個方便的工具來練習JavaScript，可以看看使用Rhino shell來執行JavaScript這一篇。

我先來寫一個最簡單的表示式：

var pat1 = /java/;
var str1 = 'javascript'; 
var str2 = 'i love java'; 
pat1.test(str1);  //結果為 true

pat1.test(str2);  //結果為 true

因為上列比對的兩個字串str1和str2中，都有全為小寫的java，所以比對的結果都會回傳true。

用白話文來講，就是比對的字串中，只要有java，就能匹配成功。

再來我們在表示式中，加入一個^的特殊字元：

var pat2 = /^java/; 
var str1 = 'javascript';
var str2 = 'I love java';

pat2.test(str1);  //結果為 true
pat2.test(str2);  //結果為 false

上列比對的兩個字串中，都有全為小寫的java，但這次str1比對的結果回傳true，而str2比對的結果回傳false。

由上面的例子我可以知道，在正規表示式中，加入^後，則比對的目標字串的起始位置，要含有^後面的字元或字串，才能成功匹配，才會回傳true，例如上列的str1起始四個字元與定義的模式java匹配，而str2雖然含有java，但它不在一開頭的位置上。

用白話文來講，使用這樣的比對模式時，就是比對的字串，開頭的四個字元一定要是java，才能匹配成功。

這裡要注意的是，^要放在比對模式的第一個字元，若放在其他地方，則有「否定」的意思，這之後會去探討。

延續上面的例子，再來看另一個特殊字元$，它若放在比對模式的「最後一個字元」，則表示要比對的字串，最後結尾的部份，要符合$符號前面定義的模式，才能匹配成功。

若它是放在比對模式中的其他位置，是沒有特殊意義的，這點要注意。

看看下面的範例。

var pat3 = /java$/;
pat3.test(str1); //結果為false
pat3.test(str2); //結果為true，因為str2是java結尾，所以比對成功

var str3 = 'I love jave';
pat3.test(str3); //結果為 false
var str4 = 'I love javaa';
pat3.test(str4); //結果為 false

所以用白話文來講，使用這樣的比對模式時，就是比對的字串，結尾的最後四個字元一定要是java，才能匹配成功。

我知道了^和$在正規表示中的意思了，那下列的比對模式，要怎樣的字串才能匹配成功呢？

var pat4 = /^java$/;

有時間就try一下吧！

參考資料：

JavaScript RegExp Object
Regular Expression (RegExp) in JavaScript javascript regexp（石頭閒語）

2014年3月24日星期一

【JS筆記】勇敢面對JavaScript中正規表示式(Regular Express)

首先，若想要有個方便的工具來練習JavaScript，可以看看使用Rhino shell來執行JavaScript這一篇。

根據W3C的定義，在JavaScript中，正規表示式(regular expression)是一個描述字元模式 (a pattern of characters) 的物件，它可以用來查看某一段文字是否符合我們定義的文字模式，也可以用來找尋或取代文字中符合模式的字串，而且在String和RegExp中定義了一些方法，搭配正規表示式，就能對文字進行強大的模式匹配、搜尋或取代的功能。

我們要得到一個regular expression的物件的話，可以使用下列語法：

var pt = new RegExp(pattern, modifiers);

或是

var pt = /pattern/modifiers; //我自己實作上比較常用這一方式

上列語法中：pattern是我們要定義的「表式示的模式」(pattern of expression)。

而modifiers指明我們想要做是「不分大小寫」、「全部」或「多行」的比對，定義如下：

i：做不分大小寫(case-0insensitvie matching)的比對。

g：對全部要比對的字串，做比對，而不是比對成功後就停下來。

m：做多行的比對。

用些例子來說明吧！

//這個表示式的意思是，要找比對的字串中，有沒有含有字母「e」或「E」。
var reg1 = new RegExp('e', 'i');　
//或者 var reg1 = /e/i; 請注意，這裡不用單引號或雙引號來包字串

//然後用來測試字串
reg1.test('e'); //結果 true
reg1.test('E'); //結果 true

這次若不加i再測試看看：

//這個表示式的意思是，要找比對的字串中，有沒有含有字母「e」，
//沒加「i」，所以有分大小寫
var reg1 = new RegExp('e');
reg1.test('e'); //結果為 true
reg1.test('E'); //結果為 false

從上列結果來看，若有加i的modifier的話，則在比對時，就不會去分大小寫。

再來看g這個modifier，要看這個參數的功能我們要用String的match()函式來說明。

var reg = /has/;
var para = 'He has a friend who has a dog that has long tail';
para.match(reg);    //結果為has

在上列程式中，match()函式會以array object回傳比對成功的結果，雖然在我們比對的字串para中有三個has，但這裡回傳的陣列只包含了第一個比對成功的字串。

再來加入g參數：

var reg = /has/g;
para.match(reg); //結果 has,has,has

現在回傳的陣列長度為3，包含了三個「has」了。

上列的也可以一起混用，如：

var reg = /has/gi; //比對不分大小寫，而且要比對到字串結尾為止
para.match(reg); //結果 has,has,has

至於m這個modifier，目前還沒想到比較好的例子，在這裡先跳過了。

接下來，我要開始探索比對模式的部份。

如果你想學好JavaScript，我推薦：

還有：

2014年1月21日星期二

【筆記】使用d3 cloud做標籤雲

在網路上搜尋使用JavaScript來做標籤雲的套件很多，但我目前覺得最好用的是這一套：d3 cloud，以d3為基礎，來做標籤雲的呈現，下列範例使用d3 cloud的範例程式稍做修改後來做說明。

先在html中新增一個要放入標籤雲的div：

再來在程式中引入d3和d3 cloud的函式庫 (在上列的d3 cloud連結中可以下載範例和函式庫)：

最後撰寫我要的標籤雲部份：

(function() {
  var fill = d3.scale.category20();
  //要顯示於標籤雲的資料內容，為一個JSON物件的陣列
  var data = [
      {
        text : "透視C語言",
        size : 37,
        url : 'http://www.tenlong.com.tw/items/9862769408?item_id=886353'
      },
      {
        text : "超圖解 Arduino",
        size : 35,
        url : 'http://www.tenlong.com.tw/items/9863120847?item_id=577739'
      },
      {
        text : "Linux Shell 程式設計",
        size : 25,
        url : 'http://www.tenlong.com.tw/items/986276970X?item_id=887065'
      },
      {
        text : "無瑕的程式碼",
        size : 40,
        url : 'http://www.tenlong.com.tw/items/PG-001?item_id=884070'
      },
      {
        text : "挑戰大數據",
        size : 23,
        url : 'http://www.tenlong.com.tw/items/9865764040?item_id=883951'
      },
      {
        text : "Android 大螢幕手機",
        size : 23,
        url : 'http://www.tenlong.com.tw/items/9862018143?item_id=887255'
      } ];
  d3.layout.cloud().size([ 300, 300 ]).words(data).padding(3).rotate(
      0).font('"微軟正黑體",Impact').fontSize(function(d) {
    return d.size;
  }).on("end", draw).start();

  function draw(words) {
    d3.select("#tag") //要插入標籤雲的tag id
    .append("svg").attr("width", 300).attr("height", 300)
    .append("g").attr("transform", "translate(150,150)") //這裡的值要對應到繪圖區域的寬、高的一半，針對不同的瀏覽器要設可以使用的值，如Chrome為-webkit-transform
    .selectAll("text").data(words).enter().append("text")
    .style("font-size", function(d) {
          return d.size + "px";
        })
    .style("font-family", '"微軟正黑體",Impact')
    .style("cursor", 'pointer')//當滑鼠移上去時，變換cursor
    .style("fill", function(d, i) {
      return fill(i);
    }).attr("text-anchor", "middle")
    .attr("transform",//跟上面的transform一樣，需依不同的瀏覽器設定對應的值
        function(d) {
          return "translate(" + [ d.x, d.y ] + ")rotate(" + d.rotate + ")";
        })
    .text(function(d) {
      return d.text;
    }).on('click', function(d) {//點按文字後，開啟超連結
      window.open(d.url);
    });
  }
}());

最後的結果像這樣呈現：

上列範例原始碼可以在這裡下載。

2013年11月28日星期四

【筆記】Colorbox - 好用的jQuery燈箱插件 (jQuery lightbox plugin)

之前看同事已有採用Colorbox這個jQuery插件來做網頁燈箱，最近拜歐剛好有需要在網頁上實作燈箱的需要，終於能夠深入一探它的好用。

一進入到Colorbox的開發者網頁，就闡明Colorbox是「一個輕量級、可客製化的jQuery燈箱插件」 (A lightweight customizable lightbox plugin for jQuery)，拜歐在使用的過程也是有這種體會：「好用」，那就直接來個初體驗吧！

因為是jQuery的插件，所以在引入前，應該先引入jQuery函式庫，先在<body>的最下方引入JS檔案：

另外記得在<head>引入css檔案：

接著加入一個button，等下用來觸發燈箱：

開始撰寫JS程式碼：

(function(){
 $('button').on('click', function(){
  $.colorbox({
   html : '
Hello lightbox!!!
', //在燈箱中要顯示的html字段
   width : 700, //燈箱中間區塊的寬度
   height : 600, //燈箱中間區塊的高度
   onClosed : function(){ //當燈箱關閉時的callback funtion
    alert('Lightbox is closed');
   }
  });
 });
})();

上列中要傳入的參數其實滿多的，以方便客製化，除了在燈箱中可以放入字段，也可以顯示照片，或嵌入一個iframe，詳細參數列表，可以參考上列的開發者網站。

執行後的結果如：

拜歐在上列的程式碼中，有加入一個onClosed的callback function，就是在燈箱關閉後，會去執行，在此練習，就是直接altert一段訊息。

關閉上列的燈箱後，接著就會跳出下列訊息：

練習程式碼下載。

2013年11月25日星期一

【筆記】使用Handlebars JS函式庫實做項目列表

之前在Handlebars的初體驗中，有介紹Handlebars這個JavaScript的函式庫做樣版的替換，拜歐在後續的研讀中發現，用這個函式來做項目列表，好像也是不錯的選擇。

拜歐使用一個包含多個物件的陣列來做了一個範例，實際上運用應該是使用Ajax向伺服器端要求一串JSON字串，再來替換樣版成所需要的HTML字段。

首先一樣在<body>的最下方加入要引用的JS檔：

再來一樣加入一個樣板如：

這裡要注意的是，用了{{#each this}}和{{/ecah}}把<li>包住。最後開是JavaScript的程式碼：

(function(){
 //現在我們要替換的是一個陣列
 var bookArr = [
   {title : "First book", author : "Javakid"},
   {title : "Second book", author : "Javakid2"},
   {title : "Third book", author : "Javakid3"}
 ];
 var template = Handlebars.compile($('#booklist').html()); //取得id為booklist的script中的html字段
 $('ul.books').append(template(bookArr)); //把上面陣列的內容替換為樣板中的內容
})();

執行後結果如：

原始檔可以在這裡下載。

2013年11月21日星期四

【筆記】Handlebars的初體驗

昨天在看jQuery的線上教學時，講者有一段專門在講Handlebars，整個看下來，覺得是個不錯用的JS函式庫，若有機會直接使用JavaScript使用一些Open Data的JSON，就可以用這個函式庫來處理，先寫一些程式來試用看看。

首先到Handlebars官網下載該函式庫，下載後，再新建一個html文件，在html中先引入jQuery函式庫和剛下載的Handlebars函式庫：

再來在<body>中插入一個範本，如：

再來，要開始寫我們的程式碼了。

 var book = {
  title : "First book", //這裡的屬性要和上列的template中{{}}中的一樣
  author : "Javakid"
 };
 var content = $('#booklist').html();//取得上列的template內容
 console.log(content); //可以先把content印出來，確認jQuery是有作用的

到這一步，用Chrome開啟html文件，應該在console中可以看到下列內容：

開始使用Handlebars的API：

var template = Handlebars.compile(content);
var html = template(book);

 $(document.body).append(html);  //直接把html片段加到body中

完整的JavaScript程式碼如下：

(function(){
 var book = {
  title : "First book", //這裡的屬性要和上列的template中{{}}中的一樣
  author : "Javakid"
 };
 var content = $('#booklist').html(); //取得上列的template內容
 //console.log(content);

 var template = Handlebars.compile(content);
 var theBook = template(book);

 var html = template(book);

  $(document.body).append(html); //直接把html片段加到body中
})()

開啟網頁後，應該會看到下列的結果：

範例原始碼下載。

若在要替換的值中加入html標籤的話，會有什麼樣的結果呢？如把上列的book物件改成：

var book = {
 title : "First book",
 author : "Javakid" //加了strong
};

結果是把<strong>整個顯示出來，而不是強調中間包裹的字串：

這時就要將上方中樣板的script修改一下：

上列的樣板中，title和author旁都多加了一個大括號，變成有三個大括號包覆著，再用瀏覽器開啟html，就能如預期地顯示加強效果：

您也許也有興趣看看【筆記】使用Handlebars JS函式庫實做項目列表

2013年11月19日星期二

【筆記】JavaScript中的神奇毛毛蟲 (~~)

「~~」就是指鍵盤上方數字鍵「1」右邊的那顆鍵，今天在看學習jQuery的好網站-30 Days to Learn jQuery的教學影片中，使用到這一個運算子，讓原本對JavaScript就不熟的拜歐，更加驚嘆它的高深莫測。

在影中講到「~~」的功能是把boolean轉成number：

var a = ~~true;
console.log(a); // 結果為1
var b = ~~false;
console.log(b); // 結果為0

知道「~~」意義之後，我們可以這樣運用，在下列程式碼中，判斷calc字串若等於「add」的話，val就加1，否則就減1，通常功力比較淺的拜歐，就會這樣寫：

 var calc = 'add';
 var val = 0;
 if(calc === 'add'){
  val += 1;
 }else{
  val -= 1;
 }
 console.log(val);//結果為1

這樣的可讀性高，但看起來不酷XD，若使用「~~」，可以這樣寫：

var calc = 'add';
var val = 0;

val += ~~(calc === 'add') || -1;
//如果calc不等於'add'，則||前面的結果為0，val就變成加「-1」
console.log(val);  //結果為1

嗯，這樣酷多了。

2008年11月18日星期二

【筆記】新開一個網頁時，以全螢幕開啟

有時在撰寫網頁時，需要另開視窗來顯示說明或新的網頁，下列範例說明如何以全螢幕新開一個網頁視窗。

var openToFullScreen = function(){
  var myWin = window.open('http://bioankeyang.blogspot.tw/','','fullscreen=yes');
  myWin.moveTo(0,0);
  myWin.resizeTo(screen.width, screen.height);
};

上列的window.open方法，請參考W3C官網說明。

再來新增一顆按鈕，來做新開網頁視窗的動作：

你可以點按下列按鈕，看看執行結果：

2008年10月20日星期一

【筆記】用javascript來開新視窗

用javascript來開新視窗的語法如下：

window.open('你要開的視窗','','menubar=no,status=no,scrollbars=yes,top=260,left=480,toolbar=no,width=300,height=250');

2008年6月7日星期六

【筆記】開新網頁並可以接收其回傳值

var ReturnValue=window.showModalDialog('AAA.aspx?BBB=' + BBB, 
          '', 
          'dialogHeight: 280px; dialogWidth: 850px; dialogTop: px; dialogLeft: px; edge: Sunken; center: Yes; help: No; resizable: Yes; status: No; scroll: auto;');

2008年5月8日星期四

取得rowIndex

使用者若是要使用滑鼠按一下表格的儲存格就可以取得rowIndex的屬性，語法是：
rowIndex = event.srcElement.parentElement.rowIndex;

訂閱：文章 (Atom)

Amazon Ads

2015年4月24日 星期五

2014年8月26日 星期二

2014年4月26日 星期六

2014年4月22日 星期二

2014年4月18日 星期五

2014年4月10日 星期四

2014年4月2日 星期三

2014年3月29日 星期六

2014年3月27日 星期四

2014年3月24日 星期一

2014年1月21日 星期二

2013年11月28日 星期四

Hello lightbox!!!

2013年11月25日 星期一

2013年11月21日 星期四

2013年11月19日 星期二

2008年11月18日 星期二

2008年10月20日 星期一

2008年6月7日 星期六

2008年5月8日 星期四