NoteSortOut.md
download docx note 網頁設計筆記統整.docx
download docx note 網頁設計第一周.docx
##超連結
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML link are defined with the a tag:</p>
<a href="https://www.w3schools.com/">this is a link</a>
</body>
</html># 一级標題
## 二级標題
段落以空白行分隔。
行末兩個空格 産生斷行。
文本屬性：_斜體_、
**粗體**、`等寬字型Monospace`。
水平線：
---
列表：
* 張三
* 李四
* 王二
編號列表：
1. 不論
2. 三七
3. 二十一
[連結](http://example.com)
> Markdown使用電郵用字元「>」來引用。
行間<abbr title="Hypertext Markup Language">HTML</abbr>亦受支援。HTML : 章節標題共有六種層次，從 h1 到 h6，通常 h1 代表最大的第一層標題，會用最大的字型顯示，而 h6 則是最小的第六層標題，會用最小的字型顯示。
盡量縮排顯示他的層次
H是標題 h0字體大小跟p一樣但放在p後面不會跳行 (p是跳行)
P是內容
[object](連結) 這可以使object點了就可以超連結
cd 資料夾路徑名稱/ : 切換到那個資料夾
pwd : 查看目前資料夾路徑
ls –A : 顯示隱藏檔
git是版本管理軟體
git clone + 連結: 可以把網站的儲存庫資料丟到VS裡面(存在目前資料夾路徑)
資料上傳3步驟
git add –A : 把所有資料加進儲存庫
git commit –m ”content” : 加一個訊息到儲存庫顯示頁面
git push origin main : 把所有專案推到網站上 (可能要輸入那個網站的帳密)
4部重置硬體分支
第一步：git checkout <branch_name>
很明顯，進入那個分支。
第二步 ：git pull -s recursive -X theirs
進行遠程分支更改，並在發生衝突時將其替換。在這裡，如果您這樣做，git status您將得到類似這樣的信息，那麼您的分支將在“提交/主”之前3次提交。
第三步 ：git reset --hard origin/<branch_name>
第四步 ：git fetch
硬重置您的分支。
download docx note 網頁設計第二周.docx
<h1>…</h1>第一層<h2>…</h2>第二層<h3>….以此類推
<p>…</p>是段落 //會換行，在裡面換行和空白也不會換
要在裡面空白要用 一個空白一次
<a href=”https:……….”></a> //a代表超連結， href = hyper link reference
<html lang=”en-US”>//指定語言:英文
<p title=”….”>000</p> || <h1 title=”….”>000</h1> //會在數標移道000時做出….的補充
通常attribute後是雙引號，但想在內容(…)裡打雙引號可以在attribute後名用單引號 EX:’….”…”….’
<hr/> //畫水平線，加/表示直接結束，可加可不加
<br/>是換行
<pre>…</pre> //performat預格式化(不要格式化)怎麼輸入怎麼出來
Style 可以用在任何有文字的地方 :<h1>,<p>…
<p style=”color:red;”>This is a red paragraph.</p>// style=”color:red”->是CSS的寫法把字變顏色/*color:red = color:#ff0000”採16進位(ff=255)越大顏色比例越多(光)*/
<body style=”background-color:powderblue;”> //設置背景顏色，也可以用#RGB
<h1 style=”font-size:60px;”>……..</h1> //可以使字形變得更大或更小，px=pixel
<h1 style=”font-size:300%;”>……..</h1> //也可以用倍率調整大小
<h1 style=”font-family:verdana;”>…</h1> || <p style=”font-family:courier;”>…</p> //改變字形verdana,courier是其中一小部分
<h1 style=”tect-align:center;”> //字體向哪裡對齊，向中=center，向左=left (預設)，向右=right
可以用在任何有文字的地方 :<h1>,<p>…
EX : <p><em>………</em></p>
: 粗體
: 強調(的字體)
: 斜體
: 強調(的字體)
: 標記(的字體) ，如下
: 加刪除線
: 變小
: 插入字體
: 下標
: 上標
<blockqote cite=”http://www.........”>
Content
</ blockqote > //會縮排來表示這個引用
<p>…<q>…</q></p> //<q>是行內的引用，效果是… :”…”，多了冒號和雙引號
<p>…<abbr title=”World Health Organization”>WHO</abbr>…</p> //<abbr> 是縮寫，但不常用，主要是讓顯示的WHO下面有底線表示
<address>…</address> //算是語意標記，也不常用，會有不同字體
<p><cite>…</cite>…</p> //<cite>也是引用，會有不同字體
<bdo dir=”…”>…</bdo> //<bdo>是把整行倒過來，dir是讓…在尾句以(…)顯示
<!-- ……… --> //註解不會顯示猶如// /**/ 幫我們了解成是在幹嘛
顏色表示不只可以用#ff6347，也可以用rgb(255,99,71,1)/*Red,Green,Blue*/和
hsl(9,100%,64%,1)/*美術常用(原型，彩度，亮度，透明度)*/表示
也可以設邊邊的顏色
?px是外框的厚度，soloid代表外邊是實線，dotted代表外邊是點狀的虛線
dashed代表外邊是點狀(較長)的虛線
<style> //在<head>裡面
body {background-color: powerblue;}; //對於所有body標記的背景都變powerblue
h1 {color: blue;} //對於所有h1標記的文字顏色都變blue
p {color: red;} //對於所有p標記的文字顏色都變red
</style> //一次到用到全部的效果
<link rel=”stylesheet” href=”styles.css”> //在<head>裡面
先設定在外面的一個檔(styles.css)，再用link rel去引用
CSS整體套用就類似上面 EX:
link 可以設 target，¬_blank是開新視窗，self在原本地方開，parent開副視窗，top最頂層的視窗。現在¬_blank最常用
絕對路徑
相對路徑
相對路徑是寫在同一層的，如果要不同就要加/…/如上圖最下面那個一樣
現在他們都在/html/層
如果無法穩定知道根目錄的話可以用下面的這個../回到上一層
<img src=”img_....jpg” alt=”………..” width=”…” height=”…”> //放圖檔，alt是圖片不存在時會顯示的字
//建議用style顯示width和height，如下圖
圖片和超連結做結合
上面是image map，用shap限定形狀再用coord指定位置，來使特定部分才可以超連結(上圖是電腦)，不過這通常需要特殊軟體輔助
預設的表格(沒有用style)
<tr>代表table role是一列(橫的)
<th>代表table head是標頭
<td>是指表格的欄位內容 // 每個th,td都代表一欄
加上style以後
border-collape是使每一欄中間不會有分隔
tr:nth-child(even) : 使偶數列的做裡面的事
其他的就在4.style和 8.colors 之間找
<ul>代表unorder list(點點)
<ol>代表order list(1.2.3….)
<li>代表list item
<div>是一個區塊性元素(會換行)
<span>不會換行in the line
<div> & <span>常用在排版
<label>其實可加可不加
<input>可以使user在裡面打字
type=”submit”有送出其實沒什麼用，因為沒伺服器
value是傳給伺服器的，先不用學
type=”radio” 就會出現這種選項
name有一個出現3次，所以有3個選項
type=”checkbox”出現前面可以打勾的類型
name有三個出現3次，所以有3個選項而且可以複選
<select>會出現者種選項，要改裡面的名子不是改value的，是改它後面的那個
<option>是<select>裡面的項目，
如果在option加selected : <option..... selected >…<option>，...會成為預選項目
如果在select加size : <select …….size=”3”>，代表選項只會同時出現3個項目
如果在select尾句加mutiple代表可以多選
<textarea>代表一個較大的填入區塊 // rows=幾列(橫)，cols=幾行(直)
onclick是代表按了button之後會發生的事
上圖是input的type類型，下列介紹上面的幾個
<datalist>是代表，可以向select一樣選，也可以像input一樣輸入
如果要不同的類型，可以在input後面的type作變更
type="number"，可在最後的min=..，max=..做輸入大小限制
type="range"，一樣min=..，max=..做輸入大小限制
type="search"，純粹搜尋
cd .. : 回到上一層 // ../是回到上一層，打資料夾名是去到下一層
cd name : 到name的資料夾
ls : 顯示根目錄(當前資料夾)裡的物件
cat fileName : 可以將fileName的內容顯示
download docx note 網頁設計第三次上課.docx
如果要使用CC (creative commons)
將以下HTML碼貼到你的網頁上，讓使用者知道你的授權方式
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="創用 CC 授權條款" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />本著作係採用<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">創用 CC 姓名標示 4.0 國際 授權條款</a>授權.
CSS是一種排版語言，可以讓網頁呈現比較美的感覺。內容和格式分開，網頁好維護。
選擇器一共有3種
第一種無: 可以把指定的東西都加上屬性, 第二次上課有提過
第二種id : id具有唯一性, 一個詞在一份文件只能出現一次 .
第三種class : class可以指一整群, 只要有class標籤 .
下面是組合用法
CSS註解表示方式 : /*…*/ , 不能使用//在CSS
Html註解表示方式 : <!--…-->
顏色不只可以用文字表示，也可以用RGB表示(第2次上課有提到)
表示背景顏色用"background-color:...", 而文字顏色用”color:…”
也可以設邊(border)的顏色
a是表示透明度
Opacity 是設置透明度， div是指區塊(會換行) EX:
<body>
<h1>這裡是網頁標題</h1>
<div>這裡是網頁第一個區塊的內容</div>
<div>這裡是網頁第二個區塊的內容</div>
...
</body>
Background-repeat:
b
Width:
甚麼類型直接一次寫(最常用)
Margin collapse
margin : 下左上右，也可以 margin : ..px
Padding也可以上下左右不同大小(較少用)
用法和Box model 差不多
字體顏色和字左右對齊
設置陰影
自行一般都不會設，因為作業系統會有不一樣的設定
可以先去網站找icon再用原始碼把它進去
: 繼承
<ul>代表unorder list(點點)
<ol>代表order list(1.2.3….)
<li>代表list item
可以在文字的前面加一張圖
顯示的形式
不顯示直接影藏
一個接一個不換行
會換行
到達最大寬度就不再變化，通常用在電腦網頁和手機網頁共用的網站原始碼
static
relative
fixed
absolute
Sticky(別人往下它不會往下)
download docx note 網頁設計第四次上課.docx
型式 : div+空格+?
div p = (div和p中間的空格代表div以下不論幾層都可以找到，但要包在<div>和</div>中間)
div .abc = (在div裡找class是abc的)
div #abc = (在div裡找id是abc的)
型式 : div > ?
div > p = (一定要在下一層才會收到，如果在div和p之間多一層就不會顯示)
型式 : div + ?
型式 : div ~ ?
常用 : scroll , auto
scroll 是不管有沒有超出都會顯示卷軸，auto是有超出才顯示卷軸
可以指定橫(x)和直(y)要執行的指令
Clear
Clearfix(自創的Class)
這個是CSS DISPLAY裡面的功能
如果只有block就會如下圖顯示 :
後面的都是利用前面教過的東西再組合而成
最普通的版本
Navbar
把點和邊消除
Vertial Navbar
比較美觀的寫法
Horizontal Navbar
比較美觀的寫法
跟前面Vertial 的寫法差不多，就不贅述了
這個比較複雜一點
功能表大概都是用這個技巧做的
利用超連結<a> 加上img src=””之後再用style來修飾(float,border,margin….)
_blank代表按下去會開新的視窗
_top 代表按下去會直接進網頁
[中夸號表示屬性]，可以設定屬性 = “…”時條件成立
利用input和裡面的padding和border，float…製作
這裡就是考驗排版能力了
alt的意思 Q:ALT是圖片不存在時會顯示的字
:after的意思(???)
download docx note 網頁設計第五次上課.docx
(較有挑戰性)
弱型態語言:python, javascript
不需要宣告變數型態
JavaScript 做的功能大致上都是把網頁的字串塞入，或一掉或修改CSS屬性把影藏便顯示，把顯示變影藏
另一個範例
document.getElementById後面加.改什麼 : 指定特定位置物件做出改變(後面要輸入物件id)
html在網頁裡面被表達成樹狀結構，每個節點(p,div…)都可以做修改
另一個範例
網頁遇到問題時，可以去 自訂及管理Googe Chrome>更多選項>開發人員工具程式碼，也可以利用裡面的console作互動，更了解程式碼的含意
JavaScript也可以做到變數(用var宣告)帶入
下面是對內容做style的修改
寫在<script>…</script>裡的程式碼預設一開始就會執行，不像button要點還要加type=”button” onclick=…..
補充:src代表source(源文件), href代表hypertext reference(超文本引用)
這兩個用的地方不一樣
src——>img標籤，script標籤，iframe標籤 /*<img src="pic_trulli.jpg" >*/
href——>link標籤，a標籤 /*<a href="https://www.w3schools.com/">W3Schools</a>*/
也可以引用其他網站的資料(要完整路徑)
這種做法很沒效率
上面這個會先跳出小視窗才會進到網頁，因為script先被執行
按了會跳出影印
這個在開發人員選項做練習，在網頁上(w3school)寫會比較慢
直接用deno和vscode做練習
安裝deno(https://deno.land/manual@v1.9.1/getting_started/installation) : 先開windows powershell，打入指令iwr https://deno.land/x/install/install.ps1 -useb | iex
安裝choco(https://chocolatey.org/install?fbclid=IwAR1aKTJHpY5nJ8ALMr8y7O439oxwHM3HmKr4w9St6MzMsOyvNVYPcJ1WuWQ)
Deno載好以後就可以在VScode裡打開發人員選項的形式
進去deno要輸入deno
按control+D返回，取消deno輸入
Javascript的打印是用console.log(“Hello JavaScrip”)
下面是while迴圈
git clone 網址 :可以把網頁上的檔案複製到本地資料夾
補充 : .\是代表這層，..\是代表上一層(在VScode終端機輸入)
Ex: c:\ccc\wp\test.html，如果要用wp裡面的a.jpg要先回到上一層再找
pwd是檢視目前所在資料夾
ls是代表檢視這層所有資料夾，如果是要看上一層的a.jpg就要打:ls ../ai
(/和\是同樣的意思/在linus較常用)
download docx note 網頁設計第六次上課.docx
1995最好的瀏覽器公司是netscape，微軟害怕這個然後就有了IE
在這個時候netscape推出Javascript，但netscape後來倒了，之後由AOL接手
但也營運不了，所以最後送給營運原始碼的組織。
後來netscape就變成Moeilla，也可以說是firefox。
Javascript只花了10天完成，後續大家可以再改，但不容易(因為不是私人的)，要經由投票後才可，每年都會有些微改動
Vue.js/React.js是現在流行的框架，但不適合初學著，語法會變很難
Vanilla(香草).js 原生的javascript，不用安裝，是騙人的網站 0byte
console.log(“”); 就是等於 C裡面的printf(“”);
變數一律採用var
console.log可以直接放變數(不加’’或””)
在Javasript一樣可以用break, continue
Javasript 的for可以用不一樣的格式(跟phython較像)
這個意思是把a裡面的元素一個一個印出來，%s(印字串)加了=後面不會有空格，如果只寫console.log(“o=”,o)，=後面會多一個空格
上面的這個是in
會把變數i帶入索引值(0,1,2,3…)，a[i]代表a的第i個(=of)
A的大小就代表他要跑幾次
不用宣告型態的就是動態語言
以下網址可以在開發人員工具中操作，學習
programmermedia.org/root/陳鍾誠/書籍/JavaScript/基礎/string.md?fbclid=IwAR1QLCsv1TfScre0PPeh_LjiyIGL84d6-FXKQcmURvPcWfuiRiSfY-BpmxQ
programmermedia.org/root/陳鍾誠/書籍/JavaScript/基礎/array.md
list.push代表把物件推到最後面
list.join(‘a’)代表每個物件加上’a ’
ascii codes和 Unicode 前128碼相同
==是值相等但型態可以不相等，===是值相等型態也相，Javascript中用===較多
download docx note 網頁設計第七次上課.docx
網頁設計要加入JavaScript的功能，要用<script>…</script>
如果要寫在網頁上就要加
JavaScript可以嵌在HDML裡
Console.log只會出現在開發人員工具的Console裡，不會出現在網頁上
JavaScript的陣列用[]夸起來(C用{})，用a.length可以取得列數(2)
而a[0].length是取得列(0)裡面的字數(3)
“+p+”打印出p的值和夸號(+是代表加左右邊的符號)
匿名函數把名字塞到funtion前面(add)
JavaScript的語法很隨性，一種問題可以用10種不同的寫法，而且分號可加可不加，像Phython，C就比較嚴謹。
逗號會有空格，而+m代表會緊跟在後面 (而且這裡的字還不會有顏色欸!)
函數不會改變廣域變數的值，只是改到複製的值，原本的值不變。
而陣列就好像指標，複製位置，改的是位置裡的值。
一個函數可以當參數，Funtion裡面的接收值可以接收函數，但Funtion要return函數型式，而且只能填函數
上面這個是用函數帶入參數，讓f===add函式
上方的圖左半邊是積分，右半邊是微分
微分的基本公式 {f(x+Δx)-f(x)}/ Δx ，Δx代表很微小的距離，微分主要是求斜率
而積分是求面積，上圖左上方的F()代表0到x的面積，而我們再把這F帶入微分公式(右下)就會得到{F(x+Δx)-F(x)}/ Δx，也就是圖中x到Δx的面積
，會等於{f(x)* Δx}/ Δx也就是f(x)。(”等於{f(x)* Δx}/ Δx” 最後這個我不懂，為什麼要除Δx ?)
微積分很重要，處理連續函數。
而離散數學，處理分散數據。
第一個輸出和第二個輸出都是一樣的，只不過一個是函式寫在外面，另一個是寫在裡面。
上圖的fucntion df()就是用微分定義下去寫的，其中，dx越小(通常0.001)越好
上面的funtion意思是===df(函式, 在x等於多少時函數微分值)
上圖也是用定義寫的，他把面積切成很多小塊再把他們加起來
一開始area是0，在x=a的地方慢慢加到x=b的地方
x慢慢累加，一次加dx，面積也一次加f(x)*dx
下面是each(自定義funtion)的用法，較為進階
以函數為參數
上面兩張圖的輸出是一樣的，差在一個是用in，一個是用of
**
a的大小就代表他要跑幾次。如果是矩陣，有多少個元素就跑幾次
in會把變數(i)帶入索引值(0,1,2,3…)，a[i]代表a的第i個(=of)
of意思是把a裡面的元素(x)一個一個帶入函式
用in和of下面的裡面的變數型態就是array( [] )
map(function, array)，push是把a矩陣推到ma矩陣裡(push把最後一位增加)
(用另一個存變化的值)
最後再回傳ma值，
run其實沒做什麼，就只是把東西印出來
<img src= "https://github.com/stereomp3/wp109b/blob/main/homework/picture/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88%E7%AC%AC%E4%B8%83%E6%AC%A1%E4%B8%8A%E8%AA%B2/21.png"alt= "error">
可以透過新增矩陣，增加其他物件到另一個物件裡面
this是指自己函式加上.什麼，就是指物件裡的東西 Javascript在寫物件時可以用建構函數(constructor)(這個也算自定義) EX:
class Circle {
constructor(r) {
this.r = r
}
area() {
return 3.14*this.r*this.r;
}
}
var c1 = new Circle(1)
console.log("c1.r=%d", c1.r);
console.log("c1.area()=%d", c1.area());
var c2 = new Circle(2)
console.log("c2.area()=%d", c2.area());
執行結果
csienqu-teacher:object csienqu$ node circleClass
c1.r=1
c1.area()=3.14
c2.area()=12.56
用constructor把變數丟到物件(this)裡面，要用時，直接呼叫var x = circle(?) 就可以把變數丟到函式裡面。 每次呼叫class裡的東西，要先宣告
***重點!!!
MainGame/*class名稱，可以視作一種種類(int之類的)*/ mainGame/*宣告名稱*/
如果裡面有變數要存取(constructor)，就可以這樣宣告
MainGame mainGame = new MainGame(0);
也可以 MainGame = class MainGame(0)//這好像是古老式寫法，不確定
***重點!!!
Deno.args會偵測後面打的文字，之後用自訂函式mt帶入Deno.args
mt函式先把後面打的逐字存到c[]裡，再把這些字依序放入cword
然後由eword去存取c2e[cword]裡面的英文字//c2e.狗 = dog , c2e[‘狗’] = dog
之後再push到e[]裡然後回傳，就翻譯完成了(push把最後一位增加)
再用console.log印出，就完成了只能翻譯有限內容的程式
參考範例: JavaScript物件介紹
參考範例: JavaScript物件導向
download docx note 網頁設計第八次上課.docx
let和var的區別 let的作用範圍只在block，而var是在整區生效。 EX:
function varTest() {
var x = 1;
{
var x = 2; // 這裡的 x 與 function 區塊內部的 x 是一樣的，因此會影響 function 區塊內所有的 x
console.log(x); // 2
}
console.log(x); // 2
}
function letTest() {
let x = 1;
{
let x = 2; // 這裡的 x 與 function 區塊內部的 x 是不同的，只會作用在這層 block 區塊中
console.log(x); // 2
}
console.log(x); // 1
上面這是物件搭配for的用法，可以將陣列裡的物件印出
This 是代表函式本身
上面的面積答案會有誤差是因為用的是浮點數(雙精度浮點數)運算
如果要做浮點數運算判斷的話，最好不要用等於，這很容易是bug的來源
用兩個差異的絕對值是不是最小判斷比較好
EX :
Math是JavaScript的函示庫Math.abs是代表後面a-b的絕對值
歷史上有很多大災難的bug就是浮點數造成的，千萬不要用等於在浮點數上
上面的setRadius可以把r帶入之後再回傳circle所以後面可以再接他自己
JavaScript的寫法是
var c1 = new Circle(1);
但在C++ 的寫法是
Circle c1 = new Circle(1);
物件導向的好處是可以比較好看，好統整。
這邊的累加不用物件導向，就會很麻煩
要寫網頁，或伺服器的話，基本上都要去買雲端，會給你伺服器流量
上面的Dog, Cat, Bird 都繼承在animal裡面，用得好的話，會讓程式變漂亮
在物件裡面的function一般都稱作method
*
子類別需要在constructor()中呼叫super()來使用父類別的建構函(constructor)
有一點像共用事件
super() 只能在constructor()中執行
download docx note 網頁設計第九次上課.docx
前幾周講到03-js 這禮拜先快速帶過 下周後再詳細講解功能
04-dom, 05-bom 是在講一些基本的功能，可以參考
06-module 是比較先進的語法，先不討論
07-storage 可以把一些東西暫存在網頁上
08-canvas 這個裡面講的功能很有趣(繪圖功能)，如果要做遊戲可以先看，裡面有些東西要開伺服器
11-app 裡面有可以讓人貼文的寫法，但因為沒有伺服器，所以只能貼在區域，貼文F5就會消失，作網站很多東西都是從留言板開始。這裡面有很多功能可以慢慢看
一個前端網站最多只能存5MB，而且存只能在單台電腦
套版和參考樣式必須要把來源貼上，並說明
## 04-dom
- CACULATOR
盡量不要用eval，因為會有資訊安全的問題。駭客可以傳盜取的程式進去eval，直接算出他想要的資料
這裡把計算的結果塞到result.innertext裡面。
value是代表欄位出現的值(字串)
在 ‘*’後面有selected代表預設值
使用
<meta charset='utf-8'>
可以支援輸入各種文字
- 有加function的話，需要呼叫函式才會執行，不然不會執行
data是一個大Class所以要先呼叫他才能用裡面的函式
prompt可以跳出小視窗讓使用者可以輸入簡單的字串
EDIABLE
prompt可以跳出小視窗讓使用者可以輸入簡單的字串
GETINNER
innerHTML用在程式碼比較多
這邊可以不用onmouseover改用hover
這個範例用JavaScript寫style可以做出CSS做不到的效果
display和visibility的差別在當display使用none時，空間會消失
但visibility使用hidden空間不消失，只有隱藏
TRANSLATOR
台積電會成功是因為他只是代工做晶圓，對客戶絕對保密。
C語言如果學得好，他可以寫虛擬機，編譯器，作業系統…，但需要硬體基礎
download docx note 網頁設計第三次上課.docx
在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 也不是陣列
第十一次上課