[Back To Basic] CSS overflow

overflow

• 發動條件: 區塊有設定 height 時

當內文超出一個區塊時，共有四種應對方式

• 1. overflow: visible(預設值)

當內文超出時，超出的內文會被保留(看得見)

• 2. overflow: hidden

當內文超出時，超出的內文會被裁切掉(看不見)

• 3. overflow: scroll
• 當內文超出時，超出的內文會被裁切掉，並且加上滾軸，滾動可看到所有內文
• 水平和垂直的滾軸會同時被加上，即便不需要

• 4. overflow: auto

跟 overflow: scroll 類似，但只有在必要時會加上滾軸。

overflow-x and overflow-y

• overflow-x

針對水平滾軸的設定

• overflow-y

針對垂直滾軸的設定

source code

[Back To Basic] CSS position

position

共有五種

• static(預設值)
• relative
• fixed
• absolute
• sticky

註:

• top bottom left right 屬性，使用前必須先指定position
• 每個 position 對 top bottom left right 屬性解釋的方式也不同

position: static

• 不受 top bottom left right影響
• 遵循瀏覽器預設的排版規則

position: relative

• 會受 top bottom left right影響
• 設定 relative後，會依據 top bottom left right 調整相對於預設位置的位置

position: fixed

• 會受 top bottom left right影響
• 設定 fixed 後，會依據 top bottom left right 調整相對於整個視窗的位置

position: absolute

• 會受 top bottom left right影響
• 設定 absolute後，會 top bottom left right 調整相對於父元素位置的位置
• 如果沒有父元素位置，則以 body 來調整
• 父元素位置: 就是父元素的position不能是static

position: sticky

• 會受 top bottom left right影響
• 設定 sticky後，會 top bottom left right 調整相對於Scrollbar的位置
• 依據scrollbar的位置，sticky 會在 relative 和 fix 間切換
• position 會一直保持 relative，直到滾動到指定的偏移位置(offset)，之後會改成 fixed

重疊元素

• 元素定位之後，元素可以互相交疊
• z-index 可以指定元素的前後

source code

[Back To Basic] CSS max-width

區塊元素的特性

• 會自動延展寬度到瀏覽器的邊界
• 設定 width 後可以控制元素的寬度
• 但在螢幕解析度較小的環境元素會溢出
• 藉由 max-width 來代替 width 可避免溢出的情況

註: 使用 margin: auto 的話，會自動將整個區塊置中

source code

[Back To Basic] CSS display

display

• 是版面配置最重要的屬性
• 決定元素的呈現方式
• 每個HTML元素都有預設的display值
• 大部分的元素display值為: inline 或 block

區塊元素

• 開始於新的一列，並延伸至最寬
• 常見的區塊元素
• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Inline元素

• 不會開始於新的一列，只占用必要寬度
• 常見的 inline 元素
• <span>
• <a>
• <img>

display: none

• 被用於隱藏 / 顯示元素
• 並不會刪除元素或創造元素(元素一直都存在，只是看不到)
• <script>的 display，預設值為 none

覆蓋預設值

頁面配置常常需要改變 display 的值來做出特定的樣式

e.g. <li> 原本 display 為 block，可用以下語法覆蓋預設值，改成 inline

li {

  display: inline;

}

隱藏元素時該用 display: none 還是 visibility: hidden?

• display: none
• 會將整個元素占用的空間一起移除
• visibility: hidden
• 會將元素占用的空間保留，但是看不到元素

source code

[Back To Basic] CSS Tables

Table邊框(borders)

• e.g.

table, th, td {

    border: 1px solid black;

}

• 上面的邊框看起來是二條邊框，因為table, th, td 有各自的邊框

border-collapse

• 可以合併邊框，解決border二條邊框的問題
• 預設: separate(分開)
• 可選: collapse(合併)

寬(width) 和 高(height)

• width: 100%;
• height: 50px;

水平對齊

• text-align
• 預設: left

垂直對齊

• vertical-align
• 預設: middle

水平分割樣式

• 設定下方邊框即可

th, td {

  border-bottom: 1px solid #ddd;

}

滑鼠移過的效果

tr:hover{

  background-color: pink;

}

條紋樣式表格

tr:nth-child(even) {

    background-color: pink;

}

響應式表格

• 在外層加上 div 並設定 overflow-x: auto

source code

[Back To Basic] CSS Lists

清單共2種

• 無序清單
• 有序清單

list-style-type

• 變更開頭的標記符號
• 有一些值是無序清單(<ul></ul>)專用，反之

list-style-image

指定圖片當作開頭的標記符號

list-style-position

• 指定開頭標記符號的位置
• outside(預設值，第二排文字對齊第一排文字)

list-style-type: none;

• 移除開頭標記符號
• <li></li>預設會有margin 和 padding，建議同時移除

list-style

• 簡寫: 將全部和 list-style 有關的屬性全部寫一起
• 順序為: list-style-type list-style-position list-style-image
• 如果有任一個沒填，會自動填入預設值

e.g.

list-style: square inside url("sqpurple.gif");

source code

[Back To Basic] CSS Links

link的狀態

• :link
• 普通、尚未瀏覽過
• :visited
• 瀏覽過後
• :hover
• 滑鼠經過
• :active
• 被點擊的當下

執行優先順序

:link = :visited > :hover > :active

Text Decoration

大部分情況會移除 Text Decoration

text-decoration: none

Background Color

也可搭配底色

source code

[Back To Basic] CSS Icons

加入圖示

• 使用第三方 icon 函式庫
• 這些圖示都是可伸縮向量

第三方函式庫

• Font Awesome Icons

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

• Bootstrap Icons

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

• Google Icons

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

source code

[Back To Basic] Javascript - XMLHttp

XMLHttpRequest

• XMLHttpRequest 是 AJAX 的基石
• 所有瀏覽器都支援(IE7+)
• 可在背景進行資料交換

跨域訪問

• 為了安全的理由，現今瀏覽器不允許跨域訪問。
• 網站和資料來源需要在同一個伺服器上

舊瀏覽器(IE5、IE6)

• 舊瀏覽器使用ActiveX代替XMLHttpRequest

XMLHttpRequest 物件方法

• new XMLHttpRequest()
• 建立XMLHttpRequest物件

• abort()
• 取消現存請求

• getAllResponseHeaders()
• 取得所有Header資訊

• getResponseHeader()
• 取得指定Header資訊

• open(method, url, async, user, psw)
• method: GET POST...
• url: 檔案位置
• async: 是否要非同步處理
• user: 使用者名稱
• psw: 使用者密碼

• send()
• 發送請求(get使用)

• send(string)
• 發送請求(post使用)

• setRequestHeader()
• 新增請求的Header

XMLHttpRequest 物件屬性

• onreadystatechange
• 當readyState改變成ready時，要執行的function

• readyState
• XMLHttpRequest的狀態
• 0: 請求尚未初始化
• 1: 伺服器連線建立
• 2: 請求被接收
• 3: 處理請求中
• 4: 完成請求，且response已回覆

• responseText
• response的資料視為text

• responseXML
• response的資料視為XML格式

• status
• 請求回覆的狀態(代號)

• statusText
• 請求回復的狀態(文字)

source code

[Back To Basic] Javascript - AJAX

什麼是AJAX

AJAX(Asynchronous JavaScript And XML): 非同步的javascript和XML

• AJAX不是程式語言
• AJAX是藉由 XMLHttpRequest 向伺服器發出請求並透過HTML和Javascript顯示資料的組合
• AJAX是一個不太好的名稱，傳輸的資料格式可以用XML也可以用json
• 可以更新部分的頁面，不用重新載入整個頁面

source code

[Back To Basic] Javascript - Cookies

什麼是 Cookie

• 當 Server 傳送頁面到瀏覽器(browser)時，Server 會遺忘所有跟使用者(User)有關的資訊
• Cookie 的目的就是紀錄和使用者(User)有關的資訊
• 當瀏覽器(browser) 向 Server請求(request)頁面時，cookies會附加在請求(request)上，達成上述目的
• 所以 cookie 會跟著每一個請求(request)
• 存太多資訊在 cookies 會有效能問題

新增 Cookie:

document.cookie = "userName=Shawn";

指定有效日期: 

document.cookie = "userName=Shawn; expires=Thu, 18 Dec 2019 12:00:00 UTC";

指定路徑:

document.cookie = "userName=Shawn; expires=Thu, 18 Dec 2019 12:00:00 UTC; path=/";

讀取 Cookie:

const data = document.cookie;

變更 Cookie:

• 跟新增 Cookie 做法相同。
• 舊的 Cookie 會被覆蓋掉。

刪除 Cookie:

• 指定有效日期(讓它過期)
• 且指定路徑，確保刪除正確的 Cookie

source code

[Back To Basic] Javascript - Timing Events

Javascript ，可以指定特定的時間間隔(time intervals)，執行函式。

共有三種方法跟時間間隔(time intervals)有關:

• setTimeout(function, milliseconds)
• 等待 milliseconds 後，執行一次 function

• setInterval(function, milliseconds)
• 每經過 milliseconds ，執行一次 function，持續不斷

• clearTimeout(timeoutVariable)
• 停止指定的計時

source code

[Back To Basic] Javascript - Popup Boxes

javascript有三種彈出窗(popup boxes)

• Alert Box

window.alert('alert');

• Confirm box

window.confirm('Yes or No');

• Prompt box

window.prompt('enter somthing:', 'Test');

source code

[Back To Basic] Javascript - Navigator

window.navigator 包含了訪客的瀏覽器資訊。

• cookie是否啟用: navigator.cookieEnabled
• 瀏覽器的應用名稱: navigator.appName
• 註: IE11, Chrome, Firefox, and Safari的應用名稱都是NetScape
• 瀏覽器的應用代碼名稱: navigator.appCodeName
• 註: Chrome, Firefox, IE, Safari, and Opera的應用代碼名稱都是Mozilla
• 瀏覽器引擎的產品名稱: navigator.product
• 註: 大部分瀏覽器都是Gecko
• 瀏覽器版本: navigator.appVersion
• 使用者代理標頭: navigator.userAgent
• 瀏覽器平台(作業系統): navigator.platform
• 瀏覽器語言: navigator.language
• 瀏覽器是否連上網路: navigator.onLine
• 使否可使用Java: navigator.javaEnabled()

註: 不要用這些資訊判斷瀏覽器的版本

source code

[Back To Basic] Javascript - History

window.history 包含瀏覽器的歷史

為了保護使用者的隱私，javascript 在操作這個物件上，會有一些限制。

• 回到上一個 url: history.back()
• 前往下一個 url: history.forward()

source code

[Back To Basic] Javascript - Location

window.location 可以取得現在頁面的 URL，且可導向到新的頁面

• 取得現在頁面的URL: location.href
• 取得網域名稱(domain name): location.hostname
• 取得現在頁面的路徑和檔案名稱: location.pathname
• 取得現在頁面使用的協定: location.protocol
• 導向新的頁面: location.assign('新的URL')
• 取得現在頁面使用的port號: location.port
• 大部分的瀏覽器不會顯示預設的port號

source code

[Back To Basic] Javascript - Screen

• window.screen 包含使用者螢幕的資訊
• window.screen 的 window 可以省略寫成 screen.xxx

screen 的屬性(properties)

• 螢幕寬度: screen.width
• 螢幕高度: screen.height
• 螢幕可視寬度(扣除任務欄、邊框等): screen.availWidth
• 螢幕可視高度(扣除任務欄、邊框等): screen.availHeight
• 顏色深度(單一顏色使用N個 bits):screen.colorDepth
• 螢幕像素深度: screen.pixelDepth

source code

[Back To Basic] Javascript - Window

BOM(Browser Object Model)

• 瀏覽器物件模型，允許 javascript 和瀏覽器溝通。
• 沒有官方標準
• 大部分現代瀏覽器都已經實作

Window 物件(Object)

• 被所有的瀏覽器支持
• window 代表的就是瀏覽器
• 所有全域的 javascript 物件、方法、變數都是 window 的一部分
• 全域變數(global variables) 是 window 的屬性(properties)
• 全域函式(global functions) 是 window 的方法(methods)

DOM是Window的一部分

視窗大小(window size)

這兩個屬性(properties)可以決定視窗的大小

• window.innerHeight 瀏覽器高度
• window.innerWidth 瀏覽器寬度

註: 這兩個數值不包含滾動條(scrollbar)和工具列(toolbar)的寬、高度

IE瀏覽器

IE8、7、6、5使用以下的屬性

• document.documentElement.clientHeight
• document.documentElement.clientWidth
• document.body.clientHeight
• document.body.clientWidth

跨瀏覽器解決方案

var width = window.innerWidth

    || document.documentElement.clientWidth

    || document.body.clientWidth;

var height = window.innerHeight

    || document.documentElement.clientHeight

    || document.body.clientHeight;

source code

[Back To Basic] Javascript - DOM Node Lists

NodeList 物件(objects) 是一組從document中的節點(nodes)。

NodeList 和 HTMLCollection 幾乎相同。

• getElementsByClassName() 有些瀏覽器回傳 NodeList，有些回傳 HTMLCollection
• childNodes 回傳 NodeList
• querySelectorAll() 大部分瀏覽器回傳 NodeList

NodeList和HTMLCollection的差別

• HTMLCollection 可以用 name / index / id 來搜尋；NodeList 只能用 index
• NodeList可以包含 attributes nodes 和 text nodes；HTMLCollection不行

HTMLCollection 不是陣列，不能用陣列的方法(methods)

source code

[Back To Basic] Javascript - DOM Collections

HTMLCollection 是一個物件(object)，陣列狀的一種型別。

可以用 index 取出 HTMLCollection 中的元素

e.g.
const collection = document.getElementsByTagName('p');
const text = collection[1].textContent; // 取出文字

取得 HTML Collection 數量: collection.length; // 取得長度

HTMLCollection 不是陣列，不能用陣列的方法(methods)

source code

[Back To Basic] Javascript - DOM Nodes

新增節點

• 建立元素
• 附加元素

const div1 = document.createElement('div'); // 建立元素

const text1 = document.createTextNode('This is my div'); // 建立文字節點

div1.appendChild(text1); // 附加文字

document.body.appendChild(div1); // 附加元素到body

insertBefore()

附加元素都會在最後面，若想新增再最前面可用 insertBefore()

語法: parent.insertBefore(newChild, refChild);

parent: 父節點

newChild: 新增的節點

refChild: 參考的節點

新增的節點，會新增在參考的節點之前

const text2 = document.createTextNode('This is my second setence.');

div1.insertBefore(text2, text1);

刪除節點

• 刪除元素

div1.removeChild(text1);

刪除時一定要知道"父節點"是誰，很麻煩。

最常使用的解決方式(找出自己的父節點，再刪除自己)：

text1.parentNode.removeChild(text1); // 刪除text1

替換節點: replaceChild()

語法: parent.replaceChild(newChild, refChild);

parent: 父節點

newChild: 新增的節點

refChild: 要被替代的節點

const text3 = document.createTextNode('My new text3.');

div1.replaceChild(text3, text2);

source code