一步一腳印工作札記

利用 SCSS 變數來設定背景顏色可以省去不少力氣，別再做個傻傻的碼農了^^ HTML: <div>AAAAA</div> <div>AAAAA</div> <div>AAAAA</div> <div>AAAAA</div> <div>AAAAA</div> SCSS: $colors : (1: #664454, 2: yellow, 3: #00ff75, 4: #985544, 5: #665566);   @for $i from 1 through 5 {     div:nth-child(#{$i}){       text-align: center;     background-color: map-get ( $colors , $i);     }   }

這裡利用 forEach 及加入 function  toggleOpen  來改變所有子元素字體大小顏色，只要一旦在文字上按下，字體會變大及改變顏色。 HTML: <div class="panels">   <div class="panel panel1">123</div>   <div class="panel panel2">123</div>   <div class="panel panel3">123</div>   <div class="panel panel4">123</div>   <div class="panel panel5">123</div> </div> CSS: . tyy {  color: red;   font-size:80px; } JavaScript: const panels = document.querySelectorAll('.panel'); function toggleOpen () {   this.classList.toggle('tyy');   // 或可以直接寫成   this.style.color = "red";   this.style.fontSize = "80px";   this.style.backgroundColor = "green"; } panels.forEach(panel => panel.addEventListener('click', toggleOpen ));

CSS3 裡面在版面配置中，提供了最新 display:flex 裡面可用的參數屬性相當多，今天無意中發現了比較不同的東西，在這裡記錄下來供大家參考: HTML: <section class="sn">   <header>Header</header>   <main>Main</header>   <nav>Nav</nav>   <footer>H</footer> </section> CSS:   section{          display: flex;           flex-wrap : wrap;   // 支援 flex 自動換行   }   section > * {     padding: 1em;     box-sizing : border-box;   // 使用 border-box 模式   }   header{       flex-basis : 100%;    //  佔滿一整行       order: 1;                   //   order 用來顯示呈現畫面的順序，序號由 1 開始   }   main{       flex-grow : 1;    //  讓 main 佔據  1/4 (4 是由 main & nav 合起來計算)       order: 2;   }   nav{        flex-grow : 3;     //  讓 nav 佔據  3/4 (4 是由 main & nav 合起來計算)       order: 3;  }  footer{       flex-basis: 100%;       order: 4; }

利用不同的 JS 元件來製作有如動畫效果的圖片，下面範例介紹一款好用的動畫效果的 js framework (GreenSock)，GreenSock 裡面常用到 4種: TweenMax 、 TweenLite 、 TimelineLite 還有 TimelineMax ， 底下利用 TweenMax 來做介紹(先講最後的效果就是當圖被點繫到時，會自動從大圖縮到小圖).. 1. 首先引用 cdn 來載入 Tween(沒引入那就GG了 ...): https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js 2. 加入程式碼: HTML: <p style="text-align:center"><img id= "pic" src="https://i.zzz.com/xxx.jpg" onClick="scaleSmall()" /></p>     // 路徑照片 xxx.jpg 請自行置換 <p style="text-align:center">請點擊照片</p> JavaScript:  function scaleSmall(){ var photo = document.getElementById("pic"); TweenMax.to(photo, 10, {width:150, height:100});     // 圖縮至 width  height 大小 }

MVC 中要使用 JavaScript Alert 和一般在寫 WebForm 是差很多的， 在一般 ASP.NET WebForm 中我們可以在 C# Code 加入 Response.Write("<script>alert("這是簡單範例")</script>"); 或用 RegisterStartupScript 、RegisterClientInclude 等等方式.. 那 MVC 如何呼叫呢?基本介紹幾個範例如下 1. 利用 TempData 一次性資料暫存記錄 Controller: public ActionResult Example()         {             return View();         }         public ActionResult DisplayMessage()         {             TempData["message"] = "這是一個簡單的範例";             return RedirectToAction("Example", "Home");         } View: @{     ViewBag.Title = "Example"; } <h2>Example</h2> @Html.ActionLink("Click Me", "DisplayMessage") <br/> // 判斷一次性 @if (TempData["message"] != null) {      <script>          var message = @Html.Raw(Json.Encode(TempData["message"]));          alert(message);      </script> } 2. 利用 Ajax 及 JSON 格式傳遞格式後由前端處理 V

介紹透過 Entity Framework 讀取資料庫內容，說明整個 Model & View 如何直接對現在 DB Table 做欄位 ORM (Object Relational Mapping)，範例中抓取資料庫欄位 MrkId(股票代號)、StkName(股票代號)後，顯示於網頁畫面。 Step 1. 在專案 Models 中建立資料庫 .edmx 選擇ADO.NET實體資料模型 選擇第一個 EF(也就是 Entility Framework) 決定資料庫連線及在 Web.Config 中是否加入ConnectionString 名稱 選擇所要對應到的資料庫 Table 從方案總管中就可以看到完成的 edmx Step 2. Controller 中這裡為使用 HomeController.cs => Index Action加入:  public class HomeController : Controller     {         public ActionResult Index()         {             List<Models. TS_StockTickData > result = new List<Models. TS_StockTickData >(); using (Models.TSDATAEntities2 tse = new Models.TSDATAEntities2())                 result = (from s in tse.TS_StockTickData select s).ToList();   // 將所有抓到的 Row 內容寫入到 List( ) 中回傳給 View                  return View(result);             }         } Step 3. View 中的 Index.cshtml 加入: @model IEnumerable<MVCApplication1.Models.TS_StockDataTemp>  <table> @for

最近想在 ASP.NET 專案使用 SASS 取替自己寫了很久的 CSS(畢竟少打很多字也有更多的彈性)，突然才發現 SASS 語法又忘了一大半，不過在 ASP.NET 上好像.sass 不支援 intellisense ，有人會的話也請不吝賜教，這裡留個簡單例子來提醒快半腦殘的自己^^。言歸正傳，SASS 其實最終需要再解析回 CSS 但在寫法上不但支援 SCSS @變數，利用 tab 嵌入以減少使用大括號的寫法，更是讓 SASS 成為攻城獅學會後再也無法接受CSS 的一大要素。下面例子為一個簡單的 TabSelect 並讓其具有 hover 的特性，游標指到時字體Color 改為黃色並向上 1em 顯示.. HTML: <ul>   <li>Hello1</li>   <li>Hello2</li>   <li>Hello3</li>   <li>Hello4</li>   <li>Hello5</li> </ul> SASS: body,html   background: black ul   display: flex   list-style: none   align-items: center   align-content: center   vertical-align: middle   margin: 50px   padding: 12px   width: 850px   height: 150px   li         width: 150px     margin: 5px     padding: 12px     text-align: center     &:nth-of-type(1),     // & 指 parent，這裡就是指 li     &:nth-of-type(2),     &:nth-of-type(3),     &:nth-of-type(4),     &:nth-of-type(5)         color: blue    

XmlSerializer 可以用幫助我們將文件或內容轉成 XML 格式，也可利用 Deserializer 方法轉回原先格式。以下提供一個 飯粒 範例說明: C#: using System.Xml.Serialization; using XMLPractice;  // 自訂 namespace namespace XMLPractice    { [ XmlRoot ("RootList")] public class RootClass {      [ XmlArray ("AuthorList")]         public Author[] At; // 包含了 Author 作者類別      [ XmlArray ("List")]         public Items[] Ie;   // 包含了 Items作者類別  }   public class AuthorEx     {         [ XmlAttribute ("id")] // 建立屬性 id         public int ele_id;         [ XmlText ()] // 建立內容 value 就是結果中的 皮皮、球球 二人組         public string ele_name;     }     public class Items     {         [ XmlText ()]         public string itmes_name;     } }  try {       //Serialization of String Object       RootClass Rclass = new RootClass { At = new[] { new Author{ ele_id = 1, ele_name = "皮皮" },     new Author{ele_id = 2, ele_name = "球球"} } };                   Rclass.Ie = new[] { new

在 MSDN 上面看到一篇文章，簡述到有關屬性類別，覺得不錯就拿來寫了個範例並分享給大家，其中類別 Author 用來定義一個作者屬性類別使用，方便以後定義自己開發的類別時(如 SampleClass)，可以加上作者屬性(EX: Willison)，而 AllowMultiple 為 true 則允許多人加入屬性，這樣以後有人找到 bug 在 SampleClass 中，那原兇是誰呢?? 我想大家都知道是 Willison 了吧 ^^ (偷偷改名嗎?... ) C#: [System. AttributeUsage (System.AttributeTargets.Class | System.AttributeTargets.Struct, AllowMultiple = true)]    class Author : System.Attribute   {         string name;         public double version;         public Author()         {                 this.name = name;                 version = 1.0;         } }  [ Author ("Willison", version = 1.1)]  static class  SampleClass  {       static public void SampleFunc()       {           MessageBox.Show("SampleFunc");       }  } 參考如下:  https://msdn.microsoft.com/zh-tw/library/sw480ze8(v=vs.90).aspx

C# 中的委託是利用方法當作函數的參數，方便不同種類及功能的實現，一般包括有 delegate 、Action 、Func 、Predicate  四種，在這裡僅針對 Action & Func 兩種做介紹，有興趣的話再請各位自行研究其它兩種。 1. Action 可以沒有參數到 16個參數，沒有傳回值，範例如下透過泛型帶入2個參數 p1, p2 委託 ActionFunc 做為委託方法帶入函數 Test 中，根據帶入型別分別顯示出 "Hello World" & 17 的結果出來。 // T1 T2 為泛型參數定義 pubic static void Test<T1, T2>( Action action, T1 p1, T2 p2) {     action (p1, p2); } public static void ActionFunc (string s, string h) {       MessageBox.Show( s+h); } public static void ActionFunc (int s, int h) {       MessageBox.Show( (s+h).ToString( )); } Test<string, string>(ActionFunc, "Hello", " World"); Test<int , int>(ActionFunc, 8, 9); 2. Func 一樣可以沒有參數到 16個參數，但必須有傳回值，範例如下透過泛型帶入2個參數 p1, p2 委託 FuncExample 做為委託方法帶入函數 Test 中，根據帶入型別一樣顯示出 "Hello World" & 17 的結果出來， 而其中須有回傳值設定(見紅字)，最後透過 action(p1,p2) 回傳字串顯示 "OK String" & "OK int"。 // T1 T2 為泛型參數定義 pubic static void Test<T1, T2>( Func <T1, T2,

List 在 c# 中非常好用，其中加入一般類型皆可之外，還可加入物件，以下寫個簡單的範例供參考: C#: public class tempcls {        public int first{ get; set; }        public int second{ get; set; }        public tempcls(int x, int y) // Constructor       {             this.first = x;             this.second = y;       }       public string replyAnswer( )      {             return  (this.first + this.second).ToString( ); // 求和      } } List< tempcls > alist = new List< tempcls >( ){ new tempcls (3,4), new tempcls (5,6), new tempcls (9,8)}; alist. ForEach (x => MessageBox.Show(x.replayAnswer)); // 利用 Lambada 及 ForEach 將結果 7 11 17   顯示出來

剛學習到 $.fn ，可以說這是個好用的類，可以把許多複雜的事簡單化，當然要記下來，首先舉下面原始的寫法一般我們要將一個 div 背景設為紅色，通常會寫成如下: $<'div'>.css("background-color","red"); 但是現在可以將它改變為 $.fn.ChangeColor(bgclr) {      this.css("background-color", bgclr);  }  $<'div'>.ChangeColor("red"); 也許會覺得多寫了一些 code ，但是它不僅可以根據自己的要求更名了，而且萬一明天搞不好連字體顏色也要改藍色時，那.....只要加上底下藍色的部份就好啦 ，簡單就達到擴充性。 ^^ $.fn.ChangeColor(bgclr, foreclr ) {      this.css("background-color", bgclr);       this.css("color", foreclr);  }  $<'div'>.ChangeColor("red", "blue" );

最近開始有機會接觸到 React.js ，不過因為專案開發都是使用 APS.NET ，研究了一段時間後，終於對這個前段 (Web Front End)有了基本的了解及認識，在這裡小表一下心得: 呼叫時一定要從 Script 目錄中讀取三個 javascript :  react.js 、react-dom.js 、browser.min.js  這是在ASP.NET 下使用  React 的關鍵，很重要 很重要 很重要 ^^....   下面飯粒使用 React 依序呼叫陣列: JS:     <script src="Scripts/react.js"></script>     <script src="Scripts/react-dom.js"></script>     <script src="Scripts/browser.min.js"></script>     <script type=" text/babel ">       var arr = [         <h1>Hello Emily</h1>,         <h2>Hello Ryan</h2>,         ];       ReactDOM.render(            <div>{arr}</div>,         document.getElementById('example')       );           </script> 結果:

看完 The WWW ( 如何進行網站壓力測試：以不動產交易實價查詢服務網為例 ) 的一些心得，不論是 Web OR WinForm 等等.. 壓力測試都免不了是個關鍵及重點，產品或專案的好壞通常都要經過千錘百鍊才能成就... 1. 硬體設備及機器，要使用專業的設備，不要使用虛擬機器。 2. 最好要有獨立 IP 網段及壓受測所有相關主機放置同一網段，避免網路環境影響。 3. 要有良好的負載平衡規劃(Load Balance)，並利用多個 IP 實測相關平衡作業和效能。 4. 根據架構、流量、需求等定義合理的測試上限數據(如同時上線人數)，來要求達到合理的效能極限。當設備或像網站更新速度、轉頁等有一定瓶頸即應認定為效能的極限而非把主機操到掛才當做是壓測效能的臨界值。 5. 壓測專注目標在 整體穩定性 、 整體發揮性能 、 耐壓程度及負載平衡

之前使用委派都會如以下這樣寫，但目前有更好更簡單的寫法 Func，比較看看，有看出來差在那裡嗎? 舊有寫法:  delegate int delDefine(int x, int y); public int TestFunction(int a, int b){ return (a+b);}  delDefine = TestFunction; int result = delDefine(6, 9);  // 輸出 15 利用 Func: Func< int , int , int> delDefine = TestFunction;   // Func 前面皆為參數輸入(藍字)，輸入最多16個，最後一個決定輸出結果 int result = delDefine(6, 9);  // 輸出 15

C# 中常會用到繼承的概念，繼承後如何呼叫到基底父類別或繼承後子類別的方法很有學問，這裡會介紹到 new & override 的差別.. C# baseClass bc = new baseClass( ); DerivedClass dc = new DerivedClass( ); 假設類別各有以下方法: class baseClass{ public void  Method1( ) { console.write("base Method1"); } public void  Method2( ) { console.write("base Method2"); } }; class DerivedClass{ public void  Method1( ) { console.write("Derived Method1"); } public void  Method2( ) { console.write("Derived Method2"); } }; 重點來了 == > 若我們把 DerivedClass 修改一下，寫成: class DerivedClass{ public new void Method1( ) { console.write("Derived Method1"); } public new void Method2( ) { console.write("Derived Method2"); } }; baseClass xc = new DerivedClass( ) 呼叫會得到 // Output base Method1 base Method2 這是因為使用 new 時會隱藏擴充類別方法，而呼叫到基底類別方法，這應該不會是一般繼承後相要得到的結果，除非真的要使用到基底類別方法。若我們要得到 DerivedClass Method 也就是擴充類別方法的話，就必須使用到 override & virtual 關鍵字，程式如下: class baseClass{ public  virtual    void  

LINQ 可用來讀取 Object 、 SQL 、 XML 等各種不同的資料種類， 這裡寫個範例介紹有關讀取 MSSQL 抓取 Table 欄位值的方法。 SQL:  Table Name => TS_TestTable; 欄位內容如下前為欄位名，後面為型態: ID :                   tinyint Name :             string Address :         string  這裡要注意 Linq 對到 SQL 彼此之間對數值的型別轉換  //   LINQ    SQL  //  byte       tinint  //  int32      int  //  int16      smallint  //  int64      bigint C#: using System.Data.Linq; using System.Data.Linq.Mapping; using System.Data; using System.Linq; [ Table ] public class TS_TestTable    // C# 程式中先建立一個類Table 的類別 {         [ Column (IsPrimaryKey = true)]      //  可宣告此為唯一鍵值         public byte ID;         [ Column ]         public string Name;         [ Column ]         public string Address; } // 透過物件類別建立來連接 DB 及 取得 Table< > public class CTableClass: DataContext {         public CTableClass(string strConnect) : base(strConnect) { }         public Table<TS_TestTable> TS_TestTables; }   try   {            // 連接資料庫字串(包括 DBName 、

Promise 常用來處理非同步流程，當執行成功時 resolve( ) 處理 .done( ); 失敗時 reject( ) 處理 .fail( );另外當成功執行 .done 之後還可以透過 .then( ) 繼續執行其它的處理，避免過多 CallBack 處理程序而造成 CallBack hell 。範例內容如下，並可參考連結有更詳細的說明 HTML: <button id="rs">ReSolve</button> <button id="rj">Reject</button> JQuery: var def= jQuery. Deferred ( ); $("#rs").click(() => def.resolve( ));     // handle resolve $("#rj").click(() => def.reject( ));       // handle reject var task = def. promise ( ); task.done( ( ) => {alert('Resolve Clicked!');})     // success to handle .done .then( ( ) => {alert('Call again for Resolve!');})   // next when .done finish .fail( ( ) => {alert('Reject Clicked!');})   // fail to handle .fail .always( ( ) => {$("button").prop("disabled", true);});   // here is always to handle without success or fail 參考連結:  http://blog.darkthread.net/post-2016-12-22-js-promise.aspx

最近看到一些使用 ECMAScript 的使用文章，在這裡做個記錄， 也許幫助自己記憶也能幫助別人(會用到Arrow Function，需要對 Arrow Function 先了解) 1. 建立新物件 & 新陣列的方法 未給值: var Object = new Object( ) 或寫成 var Object = { } var NewArray = new Array( ) 或寫成 var NewArray = [ ] 給值 var Object = {firstName: Scott, lastName: Wang, age: 31, }; var NewArray = [11,22,33,44 ] 2. 函數中未包含參數，但透過 arguments 搞定 var Add = ( ) => { alert(arguments.length); alert(arguments[2];}  // 3 45 Add(23,45,12); 3. 利用陣列當做參數計算 (利用apply ) var Add = ( ) => {  var sum;  for (var i = 0, j = arguments.length; i < j; i++) {         sum += arguments[i]; } Add.apply(null, [2,3,4,5]);  // 14 4. 函式附著到物件上( attach Function) Circulate(Num1, Num2) {    return {        first: Num1,        last:  Num2,        Add: ( ) => { this.first + this.last },        Sub: ( ) => { this.first - this.last }   } } Circulate cc =  Circulate(100, 25) cc.Add( )  // 125 cc.Sub( )  //   75 5. 依上例，利用 prototype 加入新的函數 cc.Multi( )  // Type Error Circu

好用的 Javascript 語法介紹給大家，先看看一個範例(將HTML <p> tag 的背景色設成紅色): HTML :    <p>1234567</p> function ChangeColor(obj, clr) {     obj.css('background-color',clr) } JQUERY: $(function(){     ChangeColor($('p'), red); }); 這是正規的寫法，利用 arrow function 則寫成下面: var ChangeColor = (obj, clr) => obj.css('background-color',clr) 這樣看起來是不是簡潔多了呢? 重點就在於 function 改用 => 來代替，只有一個參數時連括號也可省略(這裡用了兩個參數 obj clr 所以不能省哦)，底下這個例子是在示範多個回應式，就請大家自請參考領略了 ^^ HTML :    <p id="#p1">1234567</p>    <p id="#p2">ABCDEF</p> JQUERY: var ChangeColor2 = (obj1, obj2) => { obj1.css('background-color',red),  obj2.css('background-color',blue) $(function(){     ChangeColor2($('#p1'), $('#p2')); }); 另外介紹需要回傳值時，要注意到使用  function ( ) => (( ) => "footbar")( ) 回傳 "footbar" 要在 function 前後使用括號，並且在最後使用一個 ( )，整個範例內容如下: HTML : <p>777</p> <div>555<

專案中網頁需要播放 *.mp4 格式影片，HTML5 設定很簡單，影片也確定路徑及內容都沒問題，但卻無法播放，最後終於得到教訓 ^^...， 關鍵在於 IIS MIME (Multipurpose Internet Mail Extension) 類型中未加入該項 ，因此設定 IIS MIME 類型選項，並在 副檔名加入 .mp4 ， 類型加入 video/mp4  之後  重新啟動 IIS 站台 ，問題立馬解決 ^^ 真是令人興奮。學海無涯，知識永遠都在前面，等待後人不斷的發現進步。

最近看到一個小範例利用HTML5 加上 JQuery $.data 來做到動態改變顏色的方式， 覺得可以做個記錄下來，看完後對 $.data 的使用應該更為清楚。 HTML: <div class="color-list" data-color ="#330">改變背景色</div> JQuery: var selector = '.color-list' $(selector).css('background-color',function() {     return $(this).data('color') })

網頁中常會用到水平 tab 來排列，滑鼠移到上方時下方會出現一條底線，這是怎麼做到的呢? 讓我們看下去吧.... HTML : <ul> <li><a href="#intro">INTRO</a></li> <li><a href="#">PRO</a></li> <li><a href="#flip-3d">3D-FLIP</a></li> <li><a href="#slide">SLIDE</a></li> <li><a href="#switch">SWITCH</a></li> <li><a href="#water-fill">WATER FILL</a></li> </ul> PS: CSS 中要將 list 中的黑點去掉可用 list-style:none (自己常會忘記.. 那就寫下來吧) SCSS : ul{     list-type:none;    width:500px;    display:flex;   // 利用 flex 水平排列    justify-content:space-between;    // 平均分配空白    li{         a{                text-decoration:none;  //  隱藏底線                &:after{                      content:'\00a0';  // 寫入底線                      height:2px;  // 底線高度                      display:block;   // 利用 block 特性顯示到下方