[Back To Basic] Javascript - String methods

常見的String處理方式

雖然string是 Primitive values，合理來說不能擁有property或method，但是javascript的特性之一，就是primitive values在執行property或method時，會被視為object。

• length

取得字串長度

• indexOf("比對的字串", 從第n個index的位置開始算)

由左往右開始比對，回傳"第一個符合的字串"的"第一個字元"的"index"(從0開始)，沒有比對成功就回傳-1

• lastIndexOf("比對的字串", 從第n個index的位置開始算)

由左往右開始比對，回傳"最後一個符合的字串"的"第一個字元"的"index"(從0開始)，沒有比對成功就回傳-1

• search("搜尋的文字")

可用正則表達式搜尋，但不像indexOf有第二個參數

• 取出部分文字，共三個方法
• slice(start, end)
• 從字串中取出部分
• 參數可負值(IE8以前不支援)
• end值不給，就從start取到最後
• substring(start, end)
• 參數不可負值
• 其他都跟slice()一樣
• substr(start, length)
• 第二個參數是要取出的長度
• start可負值(IE8以前不支援)
• end值不給，就從start取到最後

• replace()

將特定文字代替成另一段文字

• 預設只替代找到的第一段文字
• 大小寫視為不同
• 可配合正則表達式撰寫邏輯

• 大小寫轉換
• 變大寫: toUpperCase()
• 變小寫: toLowerCase()
• concat()

字串相連，用來取代 + 號的功能，如下，這兩行處理的結果相同

e.g.

var text = "Hello" + " " + "World!";

var text = "Hello".concat(" ", "World!");

• trim()

將字串左右的所有空白移除，IE8以前不支援

IE8以前的做法: replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '')

• 取出特定字元，共三個方法
• charAt()
• 取出特定位置的字元
• 找不到值回傳""的空值
• charCodeAt()
• 取出特定位置的字元的unicode
• 字串[索引值]
• ECMAScript 5的語法，可以在字串上使用 [ ] 的符號
• IE7以前不支援
• 看起來很像陣列，但不是
• 若找不到值會回傳undefined
• 只能取值不能設值
• split(特定的符號)

以特定的符號，將字串轉換成陣列

source code

[Back To Basic] Javascript - Strings

• strings是由零到多個字元(characters)組成的
• 可用單引號(')或雙引號(")包覆表示
• 可以使用引號在字串中，但是要避免包覆的符號
• e.g. var name = "I am 'Shawn'";
• 取得字串長度的語法
• name.length

特殊字元

反斜線跳脫字元(backslash escape character)，特殊符號可藉由反斜線(\)，以字串方式顯示。

e.g.

var x = "\"Shawn\""; 最後會顯示 "Shawn"

常見的如下

• \' 產生 '
• \" 產生 "
• \\ 產生 \

字串過長

盡量使用+來連接，不要用\，因為有些瀏覽器不支援\

e.g.

var x = "Hi "\

"Shawn";

var x = "Hi " +

"Max";

*.String可以變成Object，但是盡量不要用，因為程式碼變複雜而且效能變差

[Back To Basic] Javascript - 事件(Events)

事件(Events)

HTML事件(events)

HTML事件(events)可以是瀏覽器(browsers)做了某件事情，也可以是使用者(users)做了某件事情。

當HTML事件(events)發生時，可以執行某些Javascript的事件(events)。

<element event="JavaScript Code">

e.g.

.html

<button onclick="onClick()">

.js

onClick(){

 ...

}

總結: HTML事件(events)和Javascript事件(events)是相互配合使用的。

[Back To Basic] Javascript - 物件(Objects)

物件(Objects)

javascript其實也是物件導向概念的一種語言，物件(Object)可以有屬性(properties)和方法(methods)。

e.g.

var person = {

  firstName: "Tseng"

  lastName: "Shawn",

  fullName : function() {

    return this.firstName + " " + this.lastName;

  }

}

相對於原始變數(Primitive Data)，一個變數對應一個值; 物件(Objects)可以想像成一個裝了多個變數的容器(container)。

屬性(properties)

一組屬性(property)的語法: name: value; 

e.g. var person ={ name:"Shawn" }

取得/設定屬性值

• objectName.propertyName; e.g. person.firstName
• objectName["propertyName"]; e.g. person["firstName"]

方法(methods)

用function定義之。

e.g.

var person = {

  fullName : function() {

    return this.firstName + " " + this.lastName;

  }

}

關鍵字: this

在一個function中使用this, 這個this就代表擁有者(owner)的意思，"誰"擁有了這個function，this就是"誰"。

e.g.

var person = {

  firstName: "Tseng"

  lastName: "Shawn",

  fullName : function() {

    return this.firstName + " " + this.lastName;

  }

}

因為person擁有fullName, 所以這邊的this就代表person

使用物件(Objects)的方法(methods)

接續上例: person.fullName()

[Back To Basic] Javascript - functions

Functions

Javascript的function是一段用來執行特定任務的程式碼，在被調用(invoke)/呼叫(call)時執行。

function的語法

function name(parameter1, parameter2){

  // 會被執行的程式碼寫在這邊

  return returnValue; // 可以有回傳值，回傳給調用(invoke)/呼叫(call)的地方

}

• function的名稱命名規則跟變數(variables)一樣。
• parameter是區域變數(local variables)，亦即只存在function中。
• 可以被使用n次

調用(invoke)/呼叫(call)

• 有加()才是使用function中的程式碼
• 沒加()，會回傳整個function

e.g.

function getHello(){

  return "hello";

}

var x = count(); 結果: x會等於"hello"

var x= count; 結果: x會等於function getHello(){  return "hello"; }

總之，function也可以做為變數(variables)來使用，跟其他的程式語言很不同的思維

區域變數(local variables)

亦即在特定的區域中才存在，所以變數名稱可在不同區域中重複使用。

[Back To Basic] Javascript - 資料型別(data types)

資料型別的概念

• Javascript由左至右執行，順序不同會造成不同的結果。

e.g. 

var x = 1 + 2 + "Booster"; 結果: 3Booster

var x = "Booster" + 1 + 2; 結果: Booster12

Javascript有動態型別的特性，所以才造成上方這種現象。

動態型別(dynamic types)

同一個變數可以用來存放不同型別的資料

Javascript的型別

• string
• number
• boolean
• array
• object
• undefined
• 在宣告變數的當下，沒有給定初始值，變數值和型別都是undefined e.g. var x;
• 可以指定變數為undefined，變數值和型別都會變undefined e.g. var x = undefined;
• null
• 表示不存在
• typeof null 的結果是 object，這是javascript的bug
• 可以用來清空object，型別仍然是object

e.g.

var x = {title:"test"};

x = null;

也可以用undefined清空，但是型別會變成undefined

• function

空值(empty value)

空值和undefined完全無關，空值的變數還是有值和型別。

e.g. var x = ""; x是空值，x的型別是string

typeof

可用來取得變數的型別

undefined和null的關係

• undefined的型別: undefined
• null的型別: null
• undefined和null的值相同
• undefined和null的型別不同

typeof undefined           // undefined

typeof null                    // object

null === undefined       // false

null == undefined         // true

Primitive Data 和 Complex Data

Primitive Data包含

• string
• number
• boolean
• undefined

型別明確，沒有property或method。

Complex Data包含

• function
• object

array, object, null的型別都是"object"，所以不要懷疑

在javascript中array是object

在javascript中null是object

function(){}的型別是function

[Back To Basic] css - 字形(Font)

Serif和Sans-serif的差別

字形以系列可分為兩種

• 一般系列(generic family)
• 數個“字形系列”擁有相似的外觀(像是都有襯線、等寬的特徵)
• 襯線(Serif)
• 非襯線(Sans-Serif)
• 等寬(Monospace)
• 字形系列(font family)
• 專指特定的字形
• Times New Roman(Serif的一種)
• Georgia(Serif的一種)
• Arial(Sans-serif的一種)

*.在電腦螢幕上，襯線類型的字體(Serif)，是比較容易閱讀的

在css中設定字形

1. 字形設定上，建議設定n種字形，當瀏覽器不支援時還可以有其他備案。
2. 第一個字形是最想使用的，依序排列，建議在最後放上一般系列(generic family)的字形讓瀏覽器去挑選最相似的方案
3. 如果字形的名稱的單字超過一個，務必加上雙引號(“)

e.g. font-family: "Times New Roman", Times, serif;

斜體設定font-style

兩個都是斜體

1. italic
2. oblique (支援程度較差)

字體大小font-size

在設定字體大小前，HTML的標籤一定要正常使用，該是標題的就是用<h1>-<h6>，該是段落文字就是用<p>，不要覺得字體大小改變和標籤無關，就不遵守這個準則。

可設定為

1. 絕對大小(一樣可以透過瀏覽器的縮放功能(Zoom)來調整字體大小)
2. 相對大小(w3c建議使用，但是在比較舊的ie版本上會有一點問題，大會更大，小會更小)
3. 若無設定，<p>的預設字體大小: 16px=1em

總結以上作法，

在body設定字體大小如下

body {

  font-size: 100%;

}

再使用相對大小就可以支援所有瀏覽器，也符合w3c的建議了

• 字體重量font- weight，可以設定字體的粗細來表示字體的”重量”

[Back To Basic] css - 文字(text)

文字(Text)

• 屬性(Property)
• 文字顏色: color
• 預設字體顏色定義在body上，如下

body {

  color: blue;

}

• 通常設定color時，background-color也須同時設定，這兩個屬性是相輔相成的
• 對齊: text-align
• 水平的文字對齊 ，left(預設) / right / center / justify

Justify: 將每行文字弄成等寬

• 裝飾: text-decoration
• 增加底線、刪除線等等的修飾符號
• 盡量不要使用底線(underline)在不是超連結的文字上，會讓使用者很困惑
• 字母大小寫設定: text-transform
• 全部大寫
• 全部小寫
• 開頭大寫
• 設定第一行的縮排: text-indent
• 字母和字母間的空白設定: letter-spacing
• 單字和單字間的空白設定: word-spacing
• 行距: line-height
• 文字方向: direction (怪怪的 感覺是靠右對齊)
• 文字陰影: text-shadow: 水平位置 垂直位置 顏色

e.g. text-shadow: 3px 2px red;

[Back To Basic] Javascript - 運算符號(operator)

算數運算

• 相加: +
• 相簡: -
• 相乘: *
• 相除: /
• 次方: **
• x**y 等同於 Math.pow(x,y)
• 餘數: % 
• 遞增: ++
• 遞減: --

附註

• 先 */ 後 +-, 除非使用括號
• 若優先權相同，則由左至右做運算

算數運算縮寫

• x += y 等於 x = x + y
• x -= y 等於 x = x - y
• x *= y 等於 x = x * y
• x /= y 等於 x = x / y
• x %= y 等於 x = x % y

字串運算

• 合併: +, e.g. "Shawn" + " " + "Tseng" 變成 "Shawn Tseng"

字串運算縮寫

var name1 = "Shawn"

var name2 = " Tseng"

name1 += name2 => name1會變成 "Shawn Tseng"

比較運算

• 相等[值(value)]: ==
• 完全相等[值(value)和型別(type)]: ===
• 不等於: !=
• 不等於[嚴謹; 值(value)或型別(type)]: !==
• 大於: >
• 小於: <
• 大於等於: >=
• 小於等於: <=
• 條件運算: ?

邏輯運算

• 和: &&
• 或: ||
• 非: !

型別運算

• typeof(): 取得變數的型別
• instanceof(): 判斷變數是否為型別

二進制位元運算(Bitwise)

...略

[Back To Basic] Javascript - 變數(Variables)

變數(Variables)

變數是儲存資料、數值的容器，概念取自於數學的代數。

e.g.

var x = 1;

var y = 2;

var z = x + y;

Javascript中的識別(Identifiers)概念

• 所有的變數名稱不可重複(識別)
• 注意變數命名的規則
• 有區分大小寫
• 避免使用保留字

符號 =

• 指定值使用: =
• 比較是否相等使用: ==

e.g.

var x = x + 1

將x + 1 的值指定給x

var result = (y == 2)

判斷y是否等於2

Javascript的資料型態(data type)

• 數值 e.g. var pi = 3.14;
• 字串 e.g. var name = "Shawn"; 或 var name = 'Shawn';

宣告(declaring)/創造(creating)變數(variables)

沒有預設值的變數值為undefined

e.g. var order;

重複宣告變數

一個變數同時宣告兩次，若原本存在值，值不會消失

e.g.

var userName = 'Shawn';

var userName;

結果userName會等於'Shawn'

自動型別轉換

在運算式中，若有數字用引號括住，從它開始之後都會被視為字串

e.g.

var x = "5" + 2 + 3;

x會等於523

var x = 2 + 3 + "5";

x會等於55

[Back To Basic] HTML5 - Web Workers

Web Workers

是在背景運行的javascript，不會影響頁面的效能。

Web Workers中的javascript是和頁面中的javscript分離的，所以可以獨立在背景運行；相對於這個概念而言，普通的javascript在執行或運算時，是需要等待，直到處理完成後才能進行下一個操作的。

Step1. 確認瀏覽器是否支援Web Worker

Step2. 建立要用Web Worker機制執行的javascript

Step3. 建立Web Worker

Step4. 其他:停止、清除

附註:
因為web worker要執行的js檔案，是外部的檔案，所以以下的object不能操作

• window
• document
• parent

[Back To Basic] HTML5 - Web Storage

Web Storage

目的: 將一些使用者(user)的資料暫存在瀏覽器(client-side)中(取代cookie機制)。

特性

• 將資料暫存於瀏覽器(client-side)中
• 相較於cookie更為安全
• 相較於cookie有更大的儲存空間(至少 5mb)
• 處理資料的過程不會影響網站的效能
• 儲存的資訊永遠不會回傳server
• 依照域名(Domain)和協定(Protocol)來做為儲存單位，亦即同一來源的頁面可以共享同一份資料

WebStorage類型

1. LocalStorage(window.localStorage) - 儲存"沒有"有效期限的資料
2. SessionStorage(window.sessionStorage) - 瀏覽器頁籤一關閉，資料就消失

使用前確認

請確認瀏覽器是否支援此功能，請加入以下程式碼:

if (typeof(Storage) !== "undefined") {

  // Code for localStorage/sessionStorage.

} else {

  // Web Storage support..

}

localStorage

• 存值
• localStorage.setItem("userName", "Shawn");
• localStorage.userName = "Shawn";
• 取值
• var name = localStorage.getItem("userName");
• var name = localStorage.userName;
• 清除值
• localStorage.removeItem("userName");

附註: 值都是string的型別，如果是其他型別，請記得轉型後再做邏輯處理。

sessionStorage

使用方式與localStorage類似，只有資料的生命週期不同而已

• 存值
• sessionStorage.setItem("userName", "Shawn");
• sessionStorage.userName = "Shawn";
• 取值
• var name = sessionStorage.getItem("userName");
• var name = sessionStorage.userName;
• 清除值
• sessionStorage.removeItem("userName");

[Back To Basic] HTML5 - 拖放功能(drag and drop)

任何的元素(elements)皆可以拖拉。

Step1 讓元素可被拖動

加入屬性(attributes): draggable="true"

e.g.

<div draggable="true"></div>

Step2 定義"拖"(drag)事件

哪個元素(elements)可以被拖動(drag)，定義被拖動時會發生什麼樣的事情，加入以下程式碼:

<img id="draggableImage" src="fox.jpg" alt="The fox" draggable="true" ondragstart="drag(event)">

function drag(event) {

  // 將id暫存起來

  event.dataTransfer.setData('draggable-item-id', event.target.id);

}

Step3 定義可以被"放"(drop)的元素或位置

    Step3-1 event.preventDefault()

    預設所有的元素(elements)不能被放在其他的元素(elements)中，為了要允許允許"放"(drop)這件事情，必須把預設的處理事件停止掉，加入以下程式碼:

<div ondragover="allowDrop(event)"></div>

function allowDrop(event) {

  event.preventDefault()

}

    

Step3-2 定義"放"(drop)事件

哪個元素(elements)可以被放置(drop)，加入以下程式碼:

<div ondrop="drop(event)"></div>

function drop(event) {

  // 藉由id取出element後附加上去

  var id = event.dataTransfer.getData("draggable-item-id");

  event.target.appendChild(document.getElementById(id));

}

source code

[Back To Basic] HTML5 - 定位(geolocation)

用於找到使用者的位置(需使用者同意)

source code

錯誤處理、例外處理

source code

顯示地圖

範例是用google map，記得將key填入，關鍵字: google map api。
source code

延伸服務

在取到位置之後可以使用延伸的服務，

• 取得最新的位置
• 顯示附近的地標資訊
• 導航
• ...

常用的api

• getCurrentPosition - 取得目前位置相關資訊
• watchPosition - 持續監視位置
• clearWatch - 停止watchPosition

[Back To Basic] HTML5 - canvas vs SVG

SVG

• 2D
• 基於XML描述(每個元素[elements]都有DOM)
• 位置改變時不須重劃，瀏覽器會自動重新計算並渲染
• 適合有大區塊的應用(e.g. google map)
• 支持javascript事件處理
• 不適合遊戲應用

canvas

• 2D
• javascript
• 位置改變時必須重劃
• 不支持javascript事件處理
• 可以存成.jpg或.png
• 適合遊戲應用

[Back To Basic] HTML5 - SVG / Scalable Vector Graphics(可伸縮向量圖形)

<svg></svg>

• 是一個容器的概念
• 是w3c推薦的圖形作法

source code

[Back To Basic] HTML5 - 畫布(canvas)

<canvas></canvas>

canvas是用來繪製圖形的元素，特性如下

• 藉由javascript來作畫
• 本身只是一個容器(畫布)的概念
• 一個沒有邊界和內容的矩形
• 最少指定三個屬性
• id(讓javascript找到並操作)
• 寬度
• 高度

 附註: width和height需用HTML的屬性，不可用css指定，會跑版，原因不明。

source code

[Back To Basic] HTML5 - 瀏覽器支援(Browser Support)

舊瀏覽器

舊瀏覽器看到未知的元素(elements)，會自動解釋為inline的元素。

所以新的元素(elements)建議補上 display: block;

e.g.

header, section, footer, aside, nav, main, article, figure {

  display: block; 

}

自訂元素(elements)

source code

IE8以前的處理方式

IE8以前不可以對未知的element設定樣式，因此必須透過HTML5Shiv來解決這個問題。

HTML5Shiv

[Back To Basic] HTML5 - HTML5簡介(Intro)

HTML5有什麼新東西?

• 語義元素(semantic elements)
• 顧名思義從element的名稱就可以知道這個區塊的意義
• e.g. <article></article>
• 表單元素(form elements)的新屬性(attributes)
• e.g. type="number"
• 圖形元素(graphic elements)
• SVG
• Canvas
• 多媒體元素(multimedia elements)
• e.g. <audio>、<video>
• 新的API
• 地理位置(geolocation)
• 拖放功能(drag and drop)
• local storage(取代cookie)
• application cache
• web workers
• SSE

背後推行的兩個組織

• W3C

核心理念: 制定出明確的HTML5和XHTML規範

背後支持的廠商: Microsoft

• whatwg

核心理念: 以現存的HTML不斷的增加功能(只增不減)，亦即，不會有未來的版本出現

背後支持的廠商: Opera、Mozilla、Chrome、Safari

[Back To Basic] css - outline

Outline在border的外圍加上”一條線”，讓HTML元素更明顯，主要目的就是強調HTML元素。其特性如下

• 不像margin會加上留白
• 有可能會覆蓋到其他元素
• Outline的寬度不算在width和總寬度內

property

• outline-style(必要)
• outline-color: 有個invert可以使用，反轉顏色(實驗後，顏色會等同於color)，確保outline的存在感
• outline-width
• outline-offset
• outline

簡寫

e.g. Outline: 5px solid yellow;

可包含以下三個資訊，順序不重要

• outline-width
• outline-style (必要)
• outline-color

offset

outline-offset 這個屬性可以在outline和border之間增加空白(透明的)

e.g. outline-offset: 15px;

[Back To Basic] css - 盒子模型(box model)

盒子模型(box model)

任一個HTML元素都可以被當成是一個盒子(box)，在css的術語中，box model講的就是設計和版面配置，box model概念如下圖

• Content可能是文字、圖片
• Padding和Margin是透明的
• 設定width和height的意思是設定Content的寬高，不包含padding、border、margin，所以要把layout做好，必須特別注意這點

[Back To Basic] css - 寬度(width)、高度(height)

寬度(width)、高度(height)

• 寬度(width)不包含padding、border、margin，除非使用 box-sizing: border-box;
• max-width
• width:如果螢幕解析度比width小，會跑出scrollbar，max-width:則會自動縮小到符合螢幕解析度的寬度
• 必要時，max-width會覆蓋width的值

[Back To Basic] css - padding

用來創造HTML元素”內容”周遭的留白(邊框之內)

單邊設定

padding-top

padding-right

padding-bottom

padding-left

簡寫(規則和border、margin相同)

padding: 25px 50px 75px 100px;

附註

• 不可以負值
• width和padding的關係，依據box-sizing的設定決定
• 預設:總寬度 = width + 左右padding + 左右border
• box-sizing: border-box;。總寬度 = width(不管padding和border，自動計算content的寬度)

[Back To Basic] css - 留白(margin)

留白(margin)

用來創造HTML元素周遭的留白(邊框之外)

單邊設定

margin-top: 100px;

margin-bottom: 100px;

margin-right: 150px;

margin-left: 80px;

簡寫(規則和border相同)

margin: 25px 50px 75px 100px;

附註

• 可以負值
• 兩個元素的margin如果上下交疊，會取最大值

e.g.

h1 {

  margin: 0 0 50px 0;

}

h2 {

  margin: 20px 0 0 0;

}

h1和h2之間的margin只會有50而不是70，這情境被稱為Margin Collapse

[Back To Basic] css - 邊框(border)

邊框樣式(border-style)

為必要的屬性(property)，否則其他跟邊框有關的屬性都無效

邊框寬度(border-width)

• border-width: 上 右 下 左
• 預設邊框寬度值:
• thin
• medium
• thick

邊框顏色(border-color)

• 無設定的話，繼承HTML元素的color

單邊設定

• border-top-style: dotted;
• border-right-style: solid;
• border-bottom-style: dotted;
• border-left-style: solid;

簡寫規則

• 四個值分別指定給: border-width: 上 右 下 左
• 三個值分別指定給: border-width: 上 右左 下
• 二個值分別指定給: border-width: 上下 右左 
• 一個值分別指定給: border-width: 上右下左

速寫

• border: 5px solid red;
• border-left: 6px solid red;
• 其他規則皆相同

附註

邊框圓角(border-radius), IE8以前不支援

[Back To Basic] css - 背景(background)

設定背景

• 顏色色塊 background-color: color;
• 圖片 background-image: url("路徑/圖片名稱.副檔名");
• 預設重複顯示圖片直到補滿垂直和水平空間
• 背景圖片如何重複 background-repeat: repeat-x / repeat-y / no-repeat
• 背景圖片顯示位置 background-position: right top
• 背景圖片和卷軸的關係 background-attachment: fixed
• 可用速寫方式將上述屬性整合在一行(shorthand property)，順序如下，任一個屬性皆可省略

相關屬性(attributes)

background-color

background-image

background-repeat

background-attachment

background-position

簡寫: background: #ffffff url("img_tree.png") no-repeat right top;

[Back To Basic] css - Color

連結

[Back To Basic] css - 如何加入到網頁中

加入css到網頁中的方式

• 外部樣式表(external)

在<head></head>中加入

<link rel="stylesheet" type="text/css" href="檔案路徑及名稱.css">

• 內部樣式表(internal)

在<head></head>中加入

<style>

…

h1 {

  color: red;

}

…

</style>

• 單一樣式(inline) ç盡量少用

針對單一HTML元素(element)使用，e.g.

<h1 style="color:red;">title</h1>

層疊順序

Q:若一個HTML元素同時被多個樣式表指定同一樣式，將會如何顯示呢?

A:以最後套用的為主

順序: inline => internal&external => 瀏覽器預設(browser default)

[Back To Basic] css - 語法(Syntax)和選擇器(Selectors)

css組成的語法

Selector { property1 : value1; property2 : value2; }

• 選擇器(Selector) － 選定想要設計樣式的HTML元素(element)
• 宣告區塊(Declaration block) － {}括號內是宣告區塊，區塊間可以有一個或多個的宣告(declarations)
• 宣告(Declaration) － 一個宣告會有一個屬性名稱(property name)和一個屬性值(property value)

選擇器(Selector)

用來尋找特定的HTML元素(element)，藉由名稱(name)、id、類別(class)、屬性(attribute)

• 同一頁面所有相同HTML元素，e.g. p { color:red; }
• 藉由id指定唯一的HTML元素，e.g. #par { color:red; }
• 藉由class指定一整群的HTML元素，e.g. .error { color:red; }

附註

*.上面三個套用方式，可以混合使用，e.g. p.error { color:red; }

*.一個HTML元素可套用多個類別(class)，e.g. 

<p class="error large">This paragraph refers to two classes.</p>

*.多個HTML元素，若擁有共同的樣式，可簡化成這樣：

h1, h2, p {

  color: red;

}

註解(comments)

1. /* 註解內容 */

2. 多行

/* 註解內容1

註解內容2

註解內容3 */

[Back To Basic] css - 簡介(Introduction)

css是為網頁設計樣式的語言，有堆疊樣式的特性。

css和HTML的關係

起初樣式都定義在HTML中，後來隨著系統日漸龐大，維護性變很差，才有各司其職的概念，HTML專心在網頁的骨架上，Css專心在樣式、版面配置上。

[Back To Basic] Javascript - 註解(Comments)

註解(Comments)

單行註解

// 我是註解，這段文字在執行時會被忽略，可以協助了解程式碼，可增加程式碼的可讀性

多行註解

/*

我是註解，這段文字在執行時會被忽略，

可以協助了解程式碼，可增加程式碼的可讀性。

*/

註: 大部分情境都使用單行，多行使用在正式文件中。

[Back To Basic] Javascript - Syntax(語法)

Syntax(語法)

Javscript的值(Value)有兩種

• 常數(literals)
• 數值 e.g. 123   10.1
• 字串 e.g. 'Name'

• 變數(variables)

使用在暫存資料。

e.g. 

宣告變數: var x;

指定值:     x = 1;

運算符號

共四種: + - * /

e.g. (1 + 2) * 3

賦值符號

符號為: =

e.g. var x = 1;

表達式(Expressions)

由數值、變數及運算符號組合而成，稱之。

e.g.

5 * 10

x * 10

"Shawn" + " " + "Tseng"

註解(Comments)

共兩種寫法

• // 這個內容不會被執行
• /* 這個內容不會被執行 */

大小寫視為不同(Camel Sensitive)

小駝峰命名法(Lower Camel Case)

字元集(Character Set): Javscript使用Unicode

[Back To Basic] Javascript - 陳述式(Statement)

Statement

不曉得中文是什麼，statement的概念如下:

computer program是一串可以被電腦(computer)執行的指令(instructions)，在程式語言中，這些指令(instructions)被稱為statement。

附註: 在HTML的格式底下，javascript的statement是瀏覽器在執行的。

Javascript的statement

javascript的陳述式由下列五種類型的陳述組成。

• Values
• Operators
• Expressions
• Keywords
• Comments

一行一行的陳述式執行的順序就是文件由上而下的順序。

附註: JavaScript programs (and JavaScript statements) are often called JavaScript code.

分號(semicolons)

每個陳述式必須用分號分開:

var a, b, c;

a = 5;

b = 6;

c = a + b;

也可以寫成一行，但是一樣要用分號分開。

附註:雖然可以不寫，但是強烈建議要用。

空白字元(whitespace)

Javascript會忽略空白，所以可以在適當的位置加上空白增加可讀性。

e.g.

var person = "Shawn";

var x = y + z;

陳述式的長度限制

以可讀性為主要考量，在撰寫程式碼時盡量一句陳述式一行，若過長可在運算符號後換行

e.g.

document.getElementById("demo").innerHTML =

"Hello World!";

Javascript程式碼區塊

陳述式可以被放在同一個區塊間，通常用大括號 { } 限定範圍，目的就是要讓這些陳述式同時被執行。

e.g.

function myFunction() {

  document.getElementById("demo1").innerHTML = "Hello";

  document.getElementById("demo2").innerHTML = "Hi";

}

[Back To Basic] Javascript - 輸出(output)資訊的四種方式

輸出(output)

1. 元素輸出: document.getElementById("demo").innerHTML
2. HTML文件輸出: document.write()
• 如果在HTML整份文件(document)載入完後才使用這個語法，頁面會完全被覆蓋
3. 彈跳視窗: window.alert('information')
4. 瀏覽器控制台(按下F12): console.log()

[Back To Basic] Javascript - 應該被寫在網頁的哪裡

WhereTo

Javascript應該要寫在哪裡?

1. 內部: <script>這裡</script>
• 有些人會加上 type="text/javascript"，這個非必要，預設在HTML中的腳本語言(script)就是javascript
2. 外部: <script src="檔案路徑/檔案名稱.js"></script>
• e.g.<script src="myScript.js"></script>
• 既然是外部引用了，就別在標籤裡寫javascript

外部引用的好處

1. 將HTML和javascript分離，增加可讀性及維護性
2. 快取javascript可以加速頁面載入

<script></script>放哪裡

• <head>這裡</head>
• <body>這裡</body>
• 放在<body></body>會加快顯示的速度，因為javascript的編譯工作會卡住顯示的工作

[Back To Basic] Javascript - Introduction

Javascript簡介

getElementById(): 藉由id取得特定的element

e.g. 

.html

<p id="demo">Paragraph 1</p>

.js

document.getElementById("demo") 或 document.getElementById('demo') 皆可取得element

javascript可做到的事情

• 改變HTML元素(elements)的屬性(attributes)
• 改變HTML元素(elements)的樣式(styles)

[Back To Basic] HTML5 - Input 屬性(Attributes)

• value

預設值

• readonly

唯讀(值無法改變)

• disabled

不可使用(表單送出時，這個輸入框的值也不會被送出)

• size

輸入框長度(n個字元)

• maxlength

最大可輸入的長度

• 沒有預設的回饋，如果要做一些警告訊息的話，必須自己寫一些code
• 最安全的方式還是由server接收時確認

HTML5新增的屬性(Attributes)

• autocomplete
• form和input皆可使用
• 提示使用者輸入過的文字
• novalidate
• form的屬性
• 在submit的時候不用驗證表單內的所有輸入框
• autofocus
• 顧名思義，就是在頁面載入後自動鎖定這個輸入框
• form
• 指定input所屬的form
• formaction
• 可使用在type="submit"或type="image"的情境
• 將指定的控制項送到指定的連結(url)
• formenctype
• 可使用在type="submit"或type="image"的情境
• 指定表單資料的加密方式(只有在form的method="post"才可使用)
• formmethod
• 可使用在type="submit"或type="image"的情境
• 指定http method的動詞
• formnovalidate
• 可使用在type="submit"的情境
• 可指定此控制項送出時，不驗證表單
• formtarget
• 可使用在type="submit"或type="image"的情境
• 可指定送出後，如何顯示response
• height 和 width
• 可指定type="image"時圖片的寬高
• 使用圖片時一定要指定寬高，不然render的期間會因畫面閃爍造成使用者體驗不佳
• list
• 可參考<datalist>預先定義好的選項
• min 和 max
• 指定數值類型控制項的上下限
• 可使用的type有number, range, date, datetime-local, month, time, week
• multiple
• 可使用在type=email,或file
• 允許單一控制項擁有一個以上的值
• pattern
• 可以設定正則表達式在控制項上
• 可使用在type=text, search, url, tel, email, password
• 記得用提示幫助使用者了解這個控制向的規則
• placeholder
• 可在輸入值之前顯示提示訊息在控制向上
• 可使用在type=text, search, url, tel, email, password
• required
• 必填
• 可使用在type= text, search, url, tel, email, password, date pickers, number, checkbox, radio, file
• step
• 可指定可輸入數值的間隔
• 可使用在type= number, range, date, datetime-local, month, time, week
• 可以配合min和max使用

[Back To Basic] HTML5 - Input Types

Input的屬性(attributes) - type

• text

單行文字

• password

密碼

• submit

送出表單資料的按鈕

附註: 如果"value"(按鈕上的文字)沒有給定，會有預設值

• reset

重設表單資料的按鈕，會將表單的值恢復到預設值

• radio

單選，同一群組的"name"要一致，每個選項的"value"要給定

• checkbox

可不選或多選，同一群組的"name"要一致，每個選項的"value"要給定

• button

按鈕

HTML5提供的type

附註: 如果舊的瀏覽器無法顯示，則顯示text

• color

顏色選擇器

• date

日期選擇，可搭配最大最小值設定

• max e.g. max="1979-12-31"
• min e.g.  min="2000-01-02"
• datetime-local

日期+時間選擇(無時區)

• email

e-mail，有些瀏覽器會自動驗證

• file

檔案選取、附加

• month

日期選擇(年月)

• number，可搭配最大最小值設定

數值

• max e.g. max="5"
• min e.g.  min="1"
• range，可搭配最大最小值設定

範圍，e.g. slider bar

• max e.g. max="5"
• min e.g.  min="1"
• search

搜尋欄位的功能跟單行文字(text)類似

• tel(目前只有safari支援)

電話號碼

• time

時間選擇(無時區)

• url

一般的url網址，有些瀏覽器會自動驗證

• week

可以選擇某年某周

source code

[Back To Basic] HTML5 - Form Elements

<input>

屬性(attributes) - type

可以讓input用不同的方式顯示，預設是"text"

元素(elements) - <select>和<option>

兩個元素相互搭配可以定義出一個下拉清單

• <option>屬性(attributes) - selected

<option>是可以被選擇的選項，在有多個選項時，預設第一個選項會被選取。

也可用selected指定選取特定的選項。

• <select>屬性(attributes) - size 

可以設定同時可以看到的選項數量

• <select>屬性(attributes) - multiple

可以讓下拉選單"多選"

元素(elements) - <textarea>

可以設定多行的<input>

*.寬和高可以用HTML或CSS設定

• HTML - 屬性(attributes) - rows&cols

rows: 高度

cols:寬度

• CSS - width&height

rows <=> width

cols <=>height

元素(elements) - <button>

可以點擊的按鈕；type永遠要設為 type="button"，不同的瀏覽器可能會使用不同的預設type

瀏覽器不會顯示未知的元素(elements)，所以使用瀏覽器看不懂的元素並不會造成網頁毀損

HTML新元素(elements) - <datalist>

• <datalist>可以預先定義一組選項，再用下面這個規則設定input和datalist的關聯。
• <input>屬性(attributes) - list要等於<datalist>屬性(attributes) - id。

HTML新元素(elements) - <output>

可以做為計算的結果

• 給定output name屬性: <output name="x"></output>
• 藉由<form>屬性(attributes) - oninput 來將結果呈現在output
• 演算法寫在oninput上

source code

[Back To Basic] HTML5 - Form

<form></form>

一張表單，目的是蒐集使用者輸入的資料。提供的輸入元件有很多，像是文字輸入框(text field)、核取方塊(checkbox)、單選按鈕(radio button)、送出按鈕(submit)，等等。

*. 這個標籤不會顯示，但是有實際功能。

<input>

這是最重要的表單元件。可以藉由"type"屬性(attribute)，選擇呈現的元件。

• <input type="text"> 文字輸入框(text field)
• 預設寬度為，20個字元
• <input  type="radio"> 單選按鈕(radio button)
• 單選
• <input  type="submit"> 送出按鈕(submit)
• 將資料送到form-handler

<form>的屬性(attribute)

• action
• form-handler的位置，這個頁面通常包含這一些專門做表單資料處理的腳本(script)
• e.g. <form action="/handle.php">
• 如果action沒有設定，預設會送到自己這頁
• target
• <form target="_blank">，可指定送出的結果開新的瀏覽器頁籤(new tab) / 框架(frame) / 現在的視窗(window)
• target預設是_self -現在的視窗(window)
• method
• 可以指定HTTP method
• GET
• 預設值是get
• 送出的表單資料會顯示在頁面位址，e.g.?input1=aaa&input2=bbb
• 注意事項
• 會將表單資料附加在url後方
• url長度限制大約3000個字元
• 避免使用get傳輸敏感的資料
• 使用者想要將表單結果建立成書籤非常有用
• 主要運用在"不考慮"安全性的資料
• POST
• 主要運用在"考慮"安全性的資料
• 沒有大小限制

<input>的屬性(attribute) - name

每個input一定都要有name這個屬性，才會被正常送出。

將表單資料群組化<fieldset>

用<fieldset></fieldset>將同個群組的<input>包起來，可配合<legend></legend>給群組標題。