【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’, […]

【Angular v4】環境架設

下載檔案 Angular quickstart node.js 環境建置 安裝node.js 解壓縮quickstart 依序輸入這3個指令 cd 指向quickstart路徑 npm install npm start 檔案編輯 app/component.ts→定義元件 index.html→定義首頁 main.ts→啟動Web APP style.css→定義全體Web APP的樣式 編輯元件 打開app/component.ts import { Component } from ‘@angular/core’; @Component({ selector: ‘my-app’, template: ` <h1>Hello {{name}}</h1> //變數用2個大括弧包起來 <h2>text</h2> `, styles: [` //撰寫style h1 { color: red; } h2 { color: bluec; } `] }) export […]

【JavaScript】假的scroll-bar

步驟 隱藏原生的scroll-bar 用CSS做出一個假的bar 算出scroll-bar的長度 當發生滑動時,改變bar的top 隱藏原生的scroll-bar 外層定義一個box,裡面要有假的bar與內容wrapper 外層box設overflow: hidden 內層wrapper設padding-left,這樣真正的scroll-bar就會超出外層box而被卡掉 .box#box .scroll-bar#bar .wrapper#wrapper img.items#items(src=”https://ianchen.thisistap.com/wp-content/uploads/OOD.jpg” width=”300px”) .box border: 1px solid #000 width: 300px height: 300px overflow: hidden .wrapper width: 100% height: 100% overflow-y: scroll padding-right: 28px Display 用CSS做出一個假的bar 利用絕對定位將假bar定位在box的右上方 .box#box .scroll-bar#bar .wrapper#wrapper .box border: 1px solid #000 width: 300px height: 300px overflow: hidden position: relative .wrapper […]

【JavaScript】previousElementSibling / nextElementSibling

説明 尋找前面 / 後面的元素 p#first 前面的元素 p#second 後面的元素 console.log(second.previousElementSibling); //<p id=”first”>​前面的元素​</p> console.log(first.nextElementSibling); //<p id=​”second”>​後面的元素​</p>​​  

【JavaScript】requestAnimationFrame

功能 楨率高的動畫函數。 setInterval最小時間單位是1毫秒,如果需要短時間大幅度的動態效果,則setInterval會顯得吃力。 這時就可以使用requestAnimationFrame 解説 requestAnimationFrame的callback函數的【第一個參數】會變成時間戳(=記錄當下的時間) requestAnimationFrame(step); function step(ggg){ console.log(ggg); //會回傳當下的時間,但只會回傳一次 } 如果想要讓時間戳一直回傳過來,就要在callback函式裡面呼叫requestAnimationFrame requestAnimationFrame(step); function step(ggg){ console.log(ggg); requestAnimationFrame(step); //會一直回傳時間戳過來 } 動畫的概念: 定義初始時間値,與變動時間値 紀錄毎次變動時間 減去 初始時間的相差値 相差値會越來越大 requestAnimationFrame(step); //定義初始時間値 let start=null; function step(ggg){ if(start==null){ start=ggg; //在一開始的時候帶入時間初始値 } let passed=ggg-start; //算出現在時間與初始時間的相差値 console.log(start); //會回傳初始時間値 console.log(passed); //會回傳經過的時間 requestAnimationFrame(step); } 用這個相差値帶入style的參數,就可以做出動態效果 button(onclick=”requestAnimationFrame(step)”) click me #animatebox #animatebox width: 300px height: 200px […]

【JavaScript】event.target

説明 配合click / mouserover事件使用,指出目前的target元素 .outer(onclick=”action()”) .inner span click me .outer background-color: #eee width: 200px height: 40px text-align: center .inner line-height: 40px display: inline-block function action(){ console.log(event.target); } 應用例:收合選單 如果選單的標題與內容不小心寫在同一層級, 事件又想要綁在最外層的元素, 可以配合contains鎖定事件觸發的目標。 ul li(onclick=”show(this)”) .title 第一層選單 click me .content 這是第一層選單的內容 br |內容… br |內容… br |內容… li(onclick=”show(this)”) .title 第二層選單 click me .content 這是第二層選單的內容 br |內容… br […]

【JavaScript】事件屬性的參數

説明 【事件屬性】 設定事件時,不使用事件綁定(addEventListener) 而將事件直接寫在tag的on事件屬性裡面 this的用法 ATTR的括弧裡面要寫this(要寫完整的this,不能任意命名) function內要放第一個變數,變數名稱自定義,不能用this .element(onclick=”getAction(this)”) click me function getAction(th){ console.log(th); } //”<div class=’element’ onclick=’getAction(this)’>click me</div>” ※注意 如果在function裡面直接用this,會變成叫出window (global) .element(onclick=”getAction(this)”) click me function getAction(th){ console.log(this); } //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} event的用法 function內直接用event就好 .element(onclick=”getAction()”) click me function getAction(m){ console.log(event); } //MouseEvent {isTrusted: true, screenX: 47, screenY: 162, […]

【JavaScript】customize select-picker

説明 利用JS與CSS,自定義select-picker的style 用<select>跟<option>做出真選單 隱藏掉<select>(隱藏真選單) 〔JS部分〕 讀取真選單<select>的內容,抓到後會是NodeList形式,給它轉換成陣列 換成陣列後,用mapping method,填充成<li>option內容</li>的形式 做出一個假的option wrapper / open-bar,然後把<li>們放進去 範例 引用函式庫:FontAwesome .selector select option 台灣 option 香港 option 柬埔寨 option 越南 option 緬甸 option 澳洲 option 美國 option 中國 option 澳洲 option 法國 option 印尼 option 英國 br br .selector select option good option apple option orange option red option beauty option […]

【HTML】disabled

説明 disabled是input相關屬性,可以讓input的內容無法編輯、修改。 若text input裡面有文字(value內容),則使用者無法修改 若radio button / checkbox預設為勾選,則使用者無法取消勾選 若radio button / checkbox預設為不勾選,則使用者無法勾選他 範例 text <input type=”text” value=”fixed text” disabled /> radio button <input name=”rd-dis” type=”radio”checked disabled/> <label>radio one</label> <input name=”rd-dis” type=”radio” disabled/> <label>radio two</label> radio one radio two checkbox <input type=”checkbox” checked disabled/> <label>checkbox one</label> <input type=”checkbox” disabled/> <label>checkbox two</label> checkbox one checkbox two select […]