【TypeScript】interface

用法 interface(接口),可以強制定義class的屬性名稱,數量,型別 定義class //インターフェイスは定義だけで実装がない、クラスのようなものですものです //クラスに特定な機能を実装を強制する目的で利用されます interface Animal { name: string;//「name」というプロパティーをクラスに強制する legs: number; isCry: boolean; cry(): void; } class Dog implements Animal { name: string=’Maru’; legs: number=4; isCry: boolean=true; cry(): void{ if (this.isCry) { console.log(‘bow, wow!’); } } } 定義物件 interface Animal { name: string; legs: number; isCry: boolean; cry(): void; } let Dog: Animal { […]

【TypeScript】Generics 泛型

用法 透過參數客製化class,是TypeScript獨有的機能 傳統的寫法 class NumberStore{ data: number; } class StringStore{ data: string; } //型チェックができません class AnyStore{ data: any } 使用泛型的寫法 //Tという文字は自由に名付けられる class Store<T>{ data: T; getStore(): T{ return this.data; } } let stringStore=new Store(); stringStore.data = ‘X’; console.log(stringStore.getStore()); //’X’ let numberStore = new Store(); numberStore.data = 100000; console.log(numberStore.getStore()); //100000 函數的泛型 function hello<T>(keyword: T) { console.log(`Log: […]

【JavaScript】getter / setter

getter跟setter都是寫在物件底下的function方法 getter 給物件綁定訪問時(Access)可取得的函數 var obj = { log: [‘example’,’test’], get latest() { if (this.log.length == 0) { return undefined; }else{ return this.log[this.log.length – 1]; } } } console.log(obj.log); //[‘example’, ‘test’] console.log(obj.latest); // “test” setter setter可以設定參數,然後讓物件回傳不同的值 //language 是一個物件 var language = { set current(name) { this.log.push(name); }, log: [] } language.current = ‘EN’; //透過setter設定參數 console.log(language.log); // […]

【WordPress】常用函數

bloginfo:網站的各項重要資料  變數  意義  bloginfo(‘name’)  網站名  bloginfo(‘url’)  網址  bloginfo(‘charset’)  網址  bloginfo(‘description’)  網站描述  bloginfo(‘stylesheet_url’)  style.css 檔案所在的路徑 wp_title() 網站當前頁面名稱 其他  變數  意義  language_attributes()  網站語系  is_home() post相關函數 ※的函數需要在the_post()的底下才能作用  變數  意義  have_post()  回傳目前有沒有文章 回傳值:true / false  the_post()  處理一件文章  ※the_title()  文章標題  ※the_permalink()  文章網址  ※the_category(“, “)  顯示分類,各分類之間用「, 」分隔  ※the_author()  顯示作者  ※comments_popup_link (“無留言時”,  “一則留言時”, “多留言時”) 當跳出留言的功能啟動的話,導入留言視窗 若無啟動留言功能,則不顯示  ※edit_post_link(“編輯連結的標題”, ” 標題前的字符”, ” 標題後的字符”) 以管理員或作者身分登入時才顯示。顯示一個可以用來編輯當前文章的編輯連結 […]

【Angular】TypeScript class

用法 列別名稱通常用「大駝峰式命名」 函數與變數通常用「小駝峰式命名」 class 類別名 { 訪問修飾符 屬性名: 型別=値; constructor(參數: 型別) { this.屬性名2=’屬性名2′; //這行可以透過private 建構子參數省略不寫 } 函數(參數: 型別): 回傳値型別{ console.log(this.屬性名=’屬性名’); } } 訪問修飾符的種類 public 外部可存取,無指定訪問修飾符時為default設定 protected 原生類別或派生類別可存取 private 僅限原生類別可存取 ※TypeScript最終還是JavaScript,指定訪問修飾符可以讓開發時檢查程式碼,如果硬要無視他,仍然可以執行。 範例 //定義類別 class Animal { // 屬性名 age: number = 10; // 建構子 constructor(private isCry: boolean, private legs: number) { //這邊參數用private代表默認代入↓ //this.isCry=isCry; } // 函數 cry(): […]

【CSS】Color Name

REF: W3Schools Color Name HEX Display White #FFFFFF Ivory #FFFFF0 LightYellow #FFFFE0 Yellow #FFFF00 Snow #FFFAFA FloralWhite #FFFAF0 LemonChiffon #FFFACD Cornsilk #FFF8DC SeaShell #FFF5EE LavenderBlush #FFF0F5 PapayaWhip #FFEFD5 BlanchedAlmond #FFEBCD MistyRose #FFE4E1 Bisque #FFE4C4 Moccasin #FFE4B5 NavajoWhite #FFDEAD PeachPuff #FFDAB9 Gold #FFD700 Pink #FFC0CB LightPink #FFB6C1 Orange #FFA500 LightSalmon #FFA07A DarkOrange #FF8C00 Coral #FF7F50 HotPink […]

【CSS】outline

説明 outline位在border外面 .box .box width: 300px height: 200px background-color: mistyrose border: 2px solid hotpink outline: 1px solid red Display . FireFox的outline bug 如果裡面的東西超出box的話,outline也會被撐開 ※其他瀏覽器不會有這個問題 .box  .inner .box width: 300px height: 200px background-color: mistyrose border: 2px solid hotpink outline: 1px solid red .inner background-color: moccasin height: 300px width: 100px  Display 解決方法 改用box-shadow做出outline的效果 .box .inner .box width: […]

【JavaScript】select元素相關操作

#mySelect.options 回傳選項清單 select#mySelect option apple option banana option grape console.log(mySelect.options) //回傳所有options的集合 //型態為HTMLOptionsCollection #mySelect.selectedIndex 回傳目前被選取到的index select#mySelect option apple option banana option grape console.log(mySelect.selectedIndex) //0

【Angular】TypeScript 函式與參數

參數與回傳値的型別定義 TypeScript的函式寫法有以下需求 必須指定參數型別 必須指定回傳値型別 function hello(name: string, number: number): string{ //這邊指定回傳值型別 return `hello ${name} and ${number}`; } console.log(hello(“blank”, 100)); //hello blank and 100 如果函式沒有回傳値的話,回傳値的型別為「void」 function hello(name: string): void{ return `hello ${name}`; } console.log(hello(“blank”)); //hello blank 省略指定參數 參數的冒號「:」前面加問號「?」表示這個參數可以省略 function hello(name?: string): string{ return `hello ${name}`; } console.log(hello()); //hello undefine //如果沒有設問號的話,使用hello()時,括號裡面一定要放參數。直接使用hello()的話會造成錯誤。 函式內定義參數 可以在定義函式時就指定好參數內容 function hello(name: string = ‘Taro’): string{ return `hello ${name}`; } console.log(hello()); […]