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日 星期二

我的requireJS初學練習筆記

練習範例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日 星期四

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

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

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


放假之
紀念日及節日
日期
(含星期六、日)
放假日數
備註
中華民國開國紀念日
11日(星期五)至13日(星期日)
3

農曆除夕及春節假期
26日(星期六)至214日(星期日)

9
農曆除夕適逢星期日,於211(星期四)補假,調整212日(星期五)為放假日,並於130日(星期六)補行上班。
和平紀念日
227日(星期六)至229日(星期一)
3
和平紀念日(228日),適逢星期日,於229(星期一)補假。
兒童節及民族掃墓節
42日(星期六)至45日(星期二)
4
兒童節及民族掃墓節(44日)適逢星期一,兒童節於43日(星期日)放假並於45日(星期二)補假。
端午節
69日(星期四)至612日(星期日)
4
端午節(69日)適逢星期四,調整610日(星期五)為放假日,並於64日(星期六)補行上班。
中秋節
915(星期四)918日(星期日)
4
中秋節(915日)適逢星期四,調整916日(星期五)為放假日,並於910日(星期六)補行上班。
國慶日
108日(星期六)至1010日(星期一)
3

資料來源:http://www.dgpa.gov.tw/ct.asp?xItem=12425&CtNode=233&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官方網站上的範例啦~