【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()); […]

【Angular】TypeScript型別宣告

説明 TypeScript的練習網站 TypeScript必須在定義變數時就宣告型別,並且不可改變變數的型別。 宣告字串 var title: string = ‘Angular’; //title = 10000 ←不可以把變數的型態改成數值 title = ‘Angular4’; //如果用var宣告的話就可以改變文字內容 宣告數值 var num: number = 9; 宣告布林值 var isOpen: boolean = true; 宣告陣列 文字陣列 var array: string[] = [‘name’, ’email’, ‘body’]; 數字陣列 var numbers: number[] = [1, 5, 7]; 混合陣列 var data: [number, string, number] = [0, ‘apple’, […]