2015年8月11日星期二

我的AngularJS初學筆記(三) Filters

利用AngularJS過濾器(Filters)
可以將資料轉換成大寫、小寫、貨幣格式
或達成排序、過濾篩選資料等效果

以下是我的練習範例

See the Pen AngularJS 練習範例3 Filters by AllenYu (@allenyjs) on CodePen.

2015年8月8日星期六

我的AngularJS初學筆記(二) Controllers

練習用AngularJS透過Controllers來控制網頁
並且透過$scope物件做雙向設定
在網上有許多介紹$scope物件的文章
http://www.dotblogs.com.tw/blackie1019/archive/2013/09/21/119101.aspx
http://ithelp.ithome.com.tw/question/10133017

以下是我練習的範例

See the Pen AngularJs練習範例2 by AllenYu (@allenyjs) on CodePen.

我的AngularJS初學筆記(一) Expressions 與 Directives

在使用前必須先載入angular.js 在官網上可以下載
第一步在需要設為AngularJS管轄區域的html tag上加上屬性data-ng-app
例如<body data-ng-app=""> 或 <div data-ng-app="">
以往用Javascript或Jquery需要數行的程式碼
用AngularJS只要做些簡單的屬性設定就可以完成

以下是我了練習範例

See the Pen angular練習範例1 by AllenYu (@allenyjs) on CodePen.

2015年8月4日星期二

練習範例1

test1.html

在HTML檔案中引入require.js並將data-main設為js資料夾中的common檔案，由於requireJS預設副檔名為js所以可以省略


                    <html>
            <head>
              <script data-main="js/common" src="js/require.js"></script>
            </head>
            <body>
              123
            </body>
          </html>

js(Folder)

common.js


                    require.config({
              paths: {
                  jquery: 'jquery-2.1.4.min',
                  underscore: 'underscore',
                  backbone: 'backbone'
              }
          });
          require(['test1']);

test1.js


                    define(function (require) {
              var $ = require('jquery');
            var _ = require('underscore');
            var backbone = require('backbone');

              $(function(){
                  alert("a");
                  var JQv=$().jquery;
                  var BKv=Backbone.VERSION;
                  var Undv=_.VERSION;

                  var myView = Backbone.View.extend({
                      el: $("body"),
                      initialize: function () {
                          this.showLoadinfo(JQv,Undv,BKv);
                      },
                      showLoadinfo: function (JQv,BKv,Undv) {
                          var hStr="<h1>載入測試</h1><ul id='mylist'>";
                          hStr+="<li>1. JQuery版本:"+JQv+"</li>";
                          hStr+="<li>2. Backbone版本:"+Undv+"</li>";
                          hStr+="<li>3. underscore版本:"+BKv+"</li>";
                          hStr+="</ul>";
                          this.$el.html(hStr);
                      }
                  });
                  var myLoadinfoView = new myView();

              });
          });

結果:

載入測試

1. JQuery版本:2.1.4
2. Backbone版本:1.2.1
3. underscore版本:1.8.3

練習範例2

test2.html

在HTML檔案中引入require.js並將data-main設為js資料夾中的test2檔案，由於requireJS預設副檔名為js所以可以省略


                    <html>
            <head>
              <script data-main="js/test2" src="js/require.js"></script>
            </head>
            <body>
              123
            </body>
          </html>

js(Folder)

common2.js


                    require.config({
              paths: {
                  jquery: 'jquery-2.1.4.min',
                  underscore: 'underscore',
                  backbone: 'backbone',
                  myTestFunc: 'myTestFunc'
              }
          });
          require(['test1']);

test2.js


                    require(['common2'], function (common){
            require(['myTestFunc']);
          });

myTestFunc.js


                    define(function (require) {
              var $ = require('jquery');
            var _ = require('underscore');
            var backbone = require('backbone');

              $(function(){
                  alert("a");
                  var JQv=$().jquery;
                  var BKv=Backbone.VERSION;
                  var Undv=_.VERSION;

                  var myView = Backbone.View.extend({
                      el: $("body"),
                      initialize: function () {
                          this.showLoadinfo(JQv,Undv,BKv);
                      },
                      showLoadinfo: function (JQv,BKv,Undv) {
                          var hStr="<h1>載入測試</h1><ul id='mylist'>";
                          hStr+="<li>1. JQuery版本:"+JQv+"</li>";
                          hStr+="<li>2. Backbone版本:"+Undv+"</li>";
                          hStr+="<li>3. underscore版本:"+BKv+"</li>";
                          hStr+="</ul>";
                          this.$el.html(hStr);
                      }
                  });
                  var myLoadinfoView = new myView();

              });
          });

結果:

載入測試

1. JQuery版本:2.1.4
2. Backbone版本:1.2.1
3. underscore版本:1.8.3

2015年7月30日星期四

105年政府行政機關紀念日及節日放假一覽表

放假之紀念日及節日	日期（含星期六、日）	放假日數	備註
中華民國開國紀念日	1月1日（星期五）至1月3日（星期日）	3日
農曆除夕及春節假期	2月6日（星期六）至2月14日（星期日）	9日	農曆除夕適逢星期日，於2月11（星期四）補假，調整2月12日（星期五）為放假日，並於1月30日（星期六）補行上班。
和平紀念日	2月27日（星期六）至2月29日（星期一）	3日	和平紀念日（2月28日），適逢星期日，於2月29日(星期一）補假。
兒童節及民族掃墓節	4月2日（星期六）至4月5日（星期二）	4日	兒童節及民族掃墓節（4月4日）適逢星期一，兒童節於4月3日（星期日）放假並於4月5日（星期二）補假。
端午節	6月9日（星期四）至6月12日（星期日）	4日	端午節（6月9日）適逢星期四，調整6月10日（星期五）為放假日，並於6月4日（星期六）補行上班。
中秋節	9月15日(星期四)至9月18日（星期日）	4日	中秋節（9月15日）適逢星期四，調整9月16日（星期五）為放假日，並於9月10日（星期六）補行上班。
國慶日	10月8日（星期六）至10月10日（星期一）	3日

資料來源:http://www.dgpa.gov.tw/ct.asp?xItem=12425&CtNode=233&mp=7
行政院人事行政總處

資料來源:http://www.dgpa.gov.tw/ct.asp?xItem=12426&ctNode=1287&mp=7

行政院人事行政總處

宿霧 x 薄荷島 x 自由行 Backpacking tour in Cebu and in Bohol【我在宿霧(I am in Cebu)】

久違的宿霧這是我們第一天落腳的地方IT PARK
對於曾經於此小待過數個月的我卻時有點熟悉
但如今的樣貌又有點陌生了
在這個區域裡可以看到高樓商辦林立許多外商進駐
所以園區內及外圍可以找到一些酒吧、日本料理、韓國料理...等美食
當然麥當勞、星巴克、小七超商一應具全
附近有知名的水藍城堡Waterfront Hotel 裡面有賭場可以小玩一下
走出園區大門右轉可以找到蠻多按摩SPA店
還有KTV及小型韓貨超市，相當便利
所以這次我選擇住宿的飯店就在IT PARK旁的Zerenity Hotel
便宜乾淨蠻多到當地遊學的學生居住的Hotel
晚上也不用怕肚子餓喔
由於宿霧搭計程車蠻便宜的所以到當地旅遊可以把計程車當成主要交通工具
如果想體驗搭乘吉普尼的話可以結伴或找個男性友人一起搭乘

這玩意當地人稱他為 "HELLO HELLO" 但是呢我個人認為它就是剉冰如果硬要比的話我還是覺得我們的剉冰料多好吃但是既然人都到國外了當然還是要來嚐嚐

這裡就是著名的Cebu Santo Nino Church(聖嬰大教堂) 及Carbon市集一代
來到這別忘了要去看看麥哲倫的十字架喔這次因為十字架正在整修真的蠻可惜的~

麗笙大酒店Radisson Blu Hotel旁邊還有當地最大的購物中心SM Mall 當然宿霧有很多的Mall例如Ayala mall、Rabinson mall... 順帶一提Rabinson mall附近的皇冠酒店有蠻多刺激的娛樂設施及4D電影還有賭場有興趣可以去看看

薄荷島有許多非常古老的教堂及保留當地特設文的建築但是交通就不像宿霧這麼方面了建議要在這觀光可以找個地陪或是下船後買套裝行程吧

2015年7月29日星期三

我的初學Backbone筆記

BackboneJS是一套前端 Javascript Framework 簡介可以參考維基百科

網路上有很多前輩高手寫的詳細介紹及教學

使用前必須先載入Backbone.js及Underscore.js

可於Backbone官方網站中找到Backbone 1.2.1

Underscore的部分可以在Underscore官方網站中找到underscorejs1.8.3

以下是我練習的範例

1. Model基本使用練習


//1.選告一個變數(Someone)為模型
var Someone = Backbone.Model.extend({
    initialize: function(){
        //此處為初始化時執行的動作
        document.write("Hello");
    }
});

//2.建立實體
var SomeoneObj_1 = new Someone();

//3.設定這個模型實體中的資料用JSON格式
SomeoneObj_1.set({ name: "Thomas", age: 67});

//4.用get取得指定的資料並印於畫面上
document.write(SomeoneObj_1.get("name"));
document.write(SomeoneObj_1.get("age"));

點選JS看完整範例

See the Pen 1.backbone Model練習 by AllenYu (@allenyjs) on CodePen.

2. Collection使用練習


//1.選告一個變數(person)為模型
var person = Backbone.Model.extend({
   defaults: {
      myname: "Allen",
      myaction: "eat"
    },
    initialize: function(){
        document.write(this.attributes.myname+" 初始化 ");
    }
});

//2.選告一個變數(people)為集合
var people = Backbone.Collection.extend({
  model: person
});

//3.建立模型實體
var personObj = new person();

//4.建立集合實體並帶入personObj
var peopleObj = new people({personObj});

//5.取出帶入的結果並印於畫面上
document.write(peopleObj.models[0].attributes.myname);
document.write(peopleObj.models[0].attributes.myaction);

點選JS看完整範例

See the Pen 2. Backbone Collection練習範例 by AllenYu (@allenyjs) on CodePen.

3. View使用練習Part1

See the Pen 3.backbone VIEW基礎應用練習 by AllenYu (@allenyjs) on CodePen.

4. View使用練習Part2

See the Pen 4.backbone VIEW進階應用練習 by AllenYu (@allenyjs) on CodePen.

5. 綜合練習

See the Pen 5.Backbone 綜合應用練習 by AllenYu (@allenyjs) on CodePen.

有了基本的了解後，後面其他進階的用法就可以參考Backbone官方網站上的範例啦~

資深初心者

2015年8月11日星期二

我的AngularJS初學筆記(三) Filters

2015年8月8日星期六

我的AngularJS初學筆記(二) Controllers

我的AngularJS初學筆記(一) Expressions 與 Directives

2015年8月4日星期二

我的requireJS初學練習筆記

練習範例1

結果:

載入測試

練習範例2

結果:

載入測試

2015年7月30日星期四

2016 民國105年節日放假一覽表

實際放假行事曆以行政院人事行政總處公布為準

105年政府行政機關紀念日及節日放假一覽表

宿霧 x 薄荷島 x 自由行 Backpacking tour in Cebu and in Bohol【我在宿霧(I am in Cebu)】

2015年7月29日星期三

我的初學Backbone筆記

BackboneJS是一套前端 Javascript Framework 簡介可以參考維基百科

使用前必須先載入Backbone.js及Underscore.js

可於Backbone官方網站中找到Backbone 1.2.1

Underscore的部分可以在Underscore官方網站中找到underscorejs1.8.3

以下是我練習的範例

關於我自己

2015年8月11日 星期二

2015年8月8日 星期六

2015年8月4日 星期二

練習範例1

結果:

載入測試

練習範例2

結果:

載入測試

2015年7月30日 星期四

實際放假行事曆以行政院人事行政總處公布為準

105年政府行政機關紀念日及節日放假一覽表

2015年7月29日 星期三

BackboneJS是一套前端 Javascript Framework 簡介可以參考維基百科

使用前必須先載入Backbone.js及Underscore.js

可於Backbone官方網站中找到Backbone 1.2.1

Underscore的部分可以在Underscore官方網站中找到underscorejs1.8.3

以下是我練習的範例

2015年8月11日星期二

2015年8月8日星期六

2015年8月4日星期二

2015年7月30日星期四

2015年7月29日星期三