week12.md
download docx note 網頁設計第三次上課.docx
改變圖片 querySelector
在console裡面打要查詢的Class就會顯示裡面有什麼
window.document.getElementById("header");
windows size
window.innerHeight : 內部高度
window.innerWidth :內部寬度
window.document.body.clientHeight指的是從window 取得document，再從document取得body，再從body取得clientHeight
早期瀏覽器需要這樣寫才可以支援不同的瀏覽器
現在的瀏覽器以上三種基本都支援
window.open() : 開新視窗
window.close() : 關視窗
window.moveTo() : 切到某個視窗
window.resizeTo() : 視窗重新設定大小
screen.width : 屬性返回訪問者屏幕的寬度（以像素為單位）。
screen.avaiwidth : 屬性返回訪問者屏幕的寬度（以像素為單位），減去Windows任務欄之類的界面功能。
下面是顯示螢幕寬度的範例
以下用https://www.w3schools.com/js/js_window_location.asp做範例
window.location.href : 指的是https://www.w3schools.com/js/js_window_location.asp
window.location.hostname : 指的是 www.w3schools.com
window.location.pathname : 指的是 js/js_window_location.asp
window.location.protocol : 指的是 https:
window.location.assign() : 指的是轉到另一個地方去
顯示結果
可以在開發人員工具裡的console直接連到youtobe
port name預設是80(加網址後面)
EX:
port可以幫主我們在一個網址開很多頁面
History就是瀏覽的歷史紀錄
可以使用在console中使用
history.back() : 返回上一頁
history.forward() : 去到下一頁(如果沒有就會return define)
瀏覽器取得物件代表名稱
可以直接在console打nevigator看所有物件
Java在瀏覽器裡面已經差不多出局了
alert會顯示這樣的訊息
confirm會顯示這樣的訊息
promt會顯示這樣的訊息
可以接收回傳值
上面3個如果顯示的文字要換行，和C一樣，+\n
在console裡面加不加window都沒差
** # JavaScript Timing Events(important) **
setTimeout(function, milliseconds) : 幾個毫秒以後，呼叫function
setInterval()在一些固定動作上會比setTimeout()還順暢
setTimeout()要用遞迴去做，setInterval()會自己一直執行
Cookie是會存在瀏覽器裡的一段字
Cookie通常都要搭配server端，設好Cookie後，每次要傳資訊到server端時，也會傳cookie值。
這需要伺服器端，下學期會詳細說明
這個也常用在伺服端
在DOM中，所有HTML元素都定義為objects。
可以對網頁做任何修改，只要開開發人員，然後作修改
document.getElementById(id), (#)
document.getElementsByTagName(name), EX : body, p, h1…..
document.getElementsByClassName(name), (.)
document.createElement(element)跟innerhtml設定差不多
document裡面有很多屬性
需要用到時再來查
Document.getElementsByTagName
querySelectorAll()，這個是後來的函式，它的作用比較強大
這邊是選定tag <p>裡面有class= intro的content
querySelectorAll() 會取得所有的
querySelector() 會取得第一個
現在伺服端也不太需要自己去取表單，套件做很好
上圖如果對有內容的網頁做，內容會全部清空，現在少用
用getElementById改圖片
如果不是用querySelector，就要用陣列去指定，不過可以指定是哪個
position: relative; 這個是相對位置
而position: absolute; 這個是絕對位置
而position: fix; 固定位置，會在指定位置裏不動
onclick也可以用在元素上
下面是把內容寫在函式裡 this是指當前tag
這個是顯示日期
事件也可以設定
如果沒有onmouseout的話，字變了就不會改回來了
想要觸發好幾個函數就可以用這個，這個好用!!
Function也可以直接寫在裡面
addEventListener可以觸發好幾個，會先執行
alert ("Hello World!");
再執行
alert ("This function was also executed!");
把外部的參數包進一個函數去使用稱為closure(閉包)
addEventListener(event, function, useCapture);
useCapture預設式false
這個差在true的話會先讀外面(層)再讀裡面，false會先讀裡面再讀外面
上面是DOM(Document Object Model)模型
以下是範例
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
From the HTML above you can read:
<html> is the root node (是根結點)
<html> has no parents (最外層)
<html> is the parent of <head> and <body> (在他們倆個的上一層)
<head> is the first child of <html>
<body> is the last child of <html>
and:
<head> has one child: <title> (在他的下一層)
<title> has one child (a text node): "DOM Tutorial" (一個文字也算一個節點!!)
<body> has two children: <h1> and <p>
<h1> has one child: "DOM Lesson one"
<p> has one child: "Hello world!"
<h1> and <p> are siblings (在同一層)
以下可以取得互相關係的函數
parentNode
childNodes[nodenumber] (nodenumber指的是0, 1, 2, 3…位置節點)
firstChild
lastChild
nextSibling
previousSibling
EX:
<title id="demo">DOM Tutorial</title>
以下都可以取得DOM Tutorial
var myTitle =
document.getElementById("demo").innerHTML;
var myTitle =
document.getElementById("demo").firstChild.nodeValue;
var myTitle =document.getElementById("demo").childNodes[0].nodeValue;
第一個方法比較方便，但二，三的方法執行速度會比較快
這種取法要很理解父子間的關係
上圖和下圖是先進去網站之後再按run的結果
nodeName永遠都會轉成正規的大寫
nodeValue 對tag的值是 null，對text的值是text，對屬性(id)的值是裡面的內容
nodeType :
Node Type Example
ELEMENT_NODE 1 <h1 class="heading">W3Schools</h1>
ATTRIBUTE_NODE 2 class = "heading" (deprecated)
TEXT_NODE 3 W3Schools
COMMENT_NODE 8 <!-- This is a comment -->
DOCUMENT_NODE 9 The HTML document itself (the parent of <html>) DOCUMENT_TYPE_NODE 10 <!Doctype html>
nodeType現在比較少用，了解一下就好
Append(附加)
新增元素
移除元素
替換元素
getElementsByTagName所取得的值看起來很像陣列但其實不是
利用迴圈和style讓3個都變紅色
An HTMLCollection is NOT an array! 不能用for(var x in a )…之類的，但可以用a[i]; i++;
所有的瀏覽器都會傳回nodeList object for childNode
這個跟上面的collection很像，都可以判斷length也可以改style
Collection 用 getElementById(id), getElementBytag(index number) , getElementByClass(name)可以存取比較多項目
nodeList 用querSelector，存取tag(index number) 只有nodeList可以包含屬性節點(attribute node)和文字節點(text node)
nodeList 也不是陣列