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 也不是陣列
download docx note 網頁設計第十一次上課.docx
BOM,MODULE,STORAGE,CANVAS
前面先複習5/7號的內容
新增內容 : calculator2, clock2, e2c2, e2c解說
calculator2主要把運算都放到一個格子裡面
用eval完成運算(再次強調，eval很危險，不要隨便使用)
clock2主要是把之前的setTimeout(showTime,1000); 改成 setInterval
setTimeout只會跑一次要用遞迴，setInterval本身就會自己跑
e2c是英中翻譯機，利用字串a dog chase a cat再把它split(‘ ’)利用空白分割裡面的內容，成為一個一個字，最後再放到e2c矩陣裡翻譯
Join是把矩陣裡面的所有物件都加入後面的”?”，這裡是加空白
e2c2是上面e2c的強化版，跟5/7號裡面的translator.html類似，利用的是Deno.args裡的功能(這是額外的函式庫)
Deno.args.slice(0)把下面輸入的字逐字翻譯(從第1個)
hash是指在網址後面加#...的東西
像上面的這個是把hash丟入網站裡面
#符號是用來當書籤用的，當網頁很長時，可以透過書籤做整理
(#後面輸入id)
其他的BOM在5/14就說得差不多了
<script type="module"> import {hello} from './hello.js' hello() </script>
這個是比較新的寫法，如果希望程式更有彈性且模組化，就可以用
但是它需要伺服器才可以用Q^Q
現在就先簡單介紹如何開伺服器
1.先到需要開伺服器的檔案那裡開終端機
2.在終端機打deno upgrade
3.把伺服器安裝進去，在終端機打
deno install --allow-net --allow-readhttps://deno.land/std@0.97.0/http/file_server.ts
出現✅ Successfully installed file_server就是成功了!!
如果安裝過要強制安裝要輸入 :
deno install --allow-net --allow-read -f https://deno.land/std@0.97.0/http/file_server.ts
之後指定要上去的文件，在終端機打 file_server ./(目前資料夾，如果是../就是上個資料夾)
之後他就會顯示文件在伺服器的位置了
我的找不到位置QQ
這個有分localStorage(存在本地)和sessionStorage(存在本地可以重整，但離開就會不見)
利用localStorage可以跨網頁取得資訊，前面第一張圖是先存(‘user1’)的資訊(‘snoopy’)，之後另一個網頁呼叫localStorage.getItem(‘user1’)就會印出snoopy
這種方法只可本地使用，自己設定的東西只有自己能看到
現在的瀏覽器基本上都支援localStorage，所以不用加前面的那個也可以，就直接寫像下面這樣
這個是沒伺服器目前網頁唯一儲存的方法
下面這個是sessionStorage，和localStorage寫法差不多，不過sessionStorage重整資料還在，離開就會重來
上面的程式最後會長的像左邊那樣
//主要是先生成畫板
var c = document.getElementById("myCanvas");
c var ctx = c.getContext("2d");
//放入圖片
document.getElementById("ball");
//再拿畫筆畫
ctx.beginPath();
//回傳話板
ctx.stroke();
windows.onload = main指的是一開始帶入main函式
ctx.clearRect(矩形的的x, 矩形的的y, 矩形的的width, 矩形的的height);
這裡是設置ctx.clearRect(0, 0, canvas.width, canvas.height);
代表從0到整個畫板做清除
這個是順暢的動畫，用windows.requestAnimationFrame做動畫
上面這個和剛剛上上面的那個差在update()，這個會反彈
程式碼不一定要從上看到下，有些程式碼就要從下看到上
這個是可以取得滑鼠位置的程式碼，如下圖
document.getElementById(‘myCanvas’).toDataURL()
可以存canvas裡面的圖
這個是繪畫板，用點選、移動、放開按鍵事件(e)進行繪圖動作
下面是乒乓球遊戲，很複雜
遊戲大變數 :
主要框架 :
遊戲初始化和遊戲動作 :
遊戲繪製 :
玩家和內部內容 :
電腦和內部內容
球的部分跟上一個反彈的球差不多，不過有奇怪的符號 ? 和 :
而且超長
如果要遊戲模板可以用下面的
遊戲框架 phaser -- https://phaser.io/
download docx note 網頁設計第十二次上課.docx
1.dropdown 下拉式功能表，使用前面的功能顯示(display: none+hover後改變成block)
2.modularize 模組化: 把CSS獨立出來再用
<link rel="stylesheet" href="???.css"/>做使用
3.topbar 把前面的dropdown做修改再美化，加上hash標籤
4.dropright 可以使用float: right把想移動到右邊的內容移動
5.page 用程式直接填檔案
querySelectorAll() 會取得所有的
querySelector() 會取得第一個
這個寫法比較單一性，而且無法返回上一頁，下面的hash比較好用，也不會這麼囉嗦
6.hash 這個是比較弱的hash，真正會用的是下面的generalhash
windows.onhashchange是代表書籤改變就會執行
http://domain/#admin的location.hash=”#admin”
所以上面的windows.location.hash.toLowerCase()就是指後面的那個#???
後面的toLowerCase()可有可無
然後下面是當改變成其中一個case時就會執行後面的show
7.generalhash 這個是精簡版，跟上面的hash只有差在main裡
裡面要加or” “是因為假設一開始沒有標籤，會出現undefine
8.beautybutton 這個只是設CSS讓按鈕比較好看，要讓按鈕變好看，可以在padding上做調整
9.chart 這個圖表引用外部資源:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.js"></script>
長的像這樣，把網路上的資源拿來用
10.map
套用地圖功能
11.fetch 這個用到伺服端先不講
這裡的範例有使用JQuery，這個基本上用CSS都做得出來，稍微了解就好
$代表甚麼 ? Q : 可以代表任何一個東西，可以是變數，可以是函式，這裡代表JQuery函式，呼叫JQuery去改變裡面的節點
這個繪畫版長上面這樣
下面這個是他的區間id
上面是調顏色和大小及位置的funtion
上面是按下按鈕變換
上面是按下滑鼠，可以開始畫，偵測上面給的顏色和大小
最後這個是點generate image(button)可以產生剛剛畫的圖案
也可以用這樣，丟到指定id裡面
使用…可以在板子上顯示裡面的文字內容，可以做修改
需要引用CSS和JS :
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css">
就像這樣，可以顯示數學式
## Markdown
引用外部資源讓這裡也可以用markdown語言
上面兩個例子都是使用外部套件!
## infiniteScroll
這個是無限下滑，跟FB那種很像
下面的是早期的寫法
設定CSS到區塊裡，創建節點，建造區域，再遞迴循環
上面是在測捲動位置，判斷在哪，然後再看要不要呼叫callback。 這個比較複雜，但可以使用，只要知道要改哪邊就可以
按下按鈕觸發convert()功能
可以讓我們放入內容之後做變化，跟w3school提供的編譯功能蠻像的
download docx note 網頁設計第十四次上課.docx
這個是響應式的網站設計，根據不同裝置做出不同顯示方式
主要是用下面的方式:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@media only screen and (max-width: 600px) {
/* For tablets: */
//響應式的變化寫在裡面
}
@media only screen and (max-width: 768px) {
/* For desktop: */
//響應式的變化寫在裡面
}
前面的@media是專門給手機，平板，有螢幕用的。
也有@printer不過很少用
width=device-widh //代表this的寬度變成裝置寬度
initial-scale=1.0 //代表初始設定為100%
把網頁用網格分開，好做排版
利用下面的控制選項，可以讓圖片(或選項)自動調整大小
img {
width: 100%;
height: auto;
}
再配合前面的@media，就可以讓網頁觀賞性大提升
Video標籤:
<video width="320" height="240" controls> //可改成autoplay或muted
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag. //不支援時顯示
</video>
Audio標籤
<audio controls> //可改成autoplay或muted
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element. //不支援時顯示
</audio>
這兩個基本上算是在介紹套件，網路上的RWD通常都設計得還不錯，但要用需要標明出處喔!!
Grid layout是比較新的寫法，通常搭配div來做使用
可以設置其他元素改變樣式
設置inline-grid不會填滿螢幕，會固定大小
可以設置容器物件間格
也可以讓每個間格都一樣
justify-content: start; //全部靠左
justify-content: end; //全部靠右
align-content: center; //全部靠中
align-content: start; //全部靠上
align-content: end; //全部靠下
align-content: space-evenly; //平均分配
align-content: space-around; //上下正常，中間空很大
可以指定物體位置
這邊也可以用
grid-column: 1 / 3; //從1到2
grid-column: 1 / span 2 //從1開始，在後兩格
grid-row: 2/ 4; //從2到3
grid-column: 2 / span 2 //從2開始，在後兩格
下面的例子是把收到這個class的區域取名子，再帶入到grid裡
.和.中間要有空格!
指定位置上大小
如果要寫大網站，或是很複雜的CSS，可以用這個套件，比較好維護，可以宣告變數。
這個必須要經過編譯，才可以轉成CSS。
可以在VScode裡面打下面的指令行安裝:
npm install -g sass //用node.js安裝
choco install sass //用choco安裝
brew install sass/sass/sass //make電腦安裝
如果安裝好了，要編譯就打以下指令
sass source/stylesheets/index.scss build/stylesheets/index.css
可以寫.sass版本的code和.scss的code。
sass不寫{}或;之類的符號，而scss需要，感覺scss可讀性較高
數學式運算，引用外部資源
Init()其實我不太了QQ，不過好像沒他就沒法執行
如果要使用localStorage，這個是很好的參考!
這部分..恩，我只能說這部份程式碼很大，我稍微整理:
const Report = {};
const Pos = { order: { totalPrice: 0, records: [], submitted: false } };
const Lib = {};
const Setting = {};
const Shop = { name: '茶舖子', address: '金門縣金寧鄉安美村湖南 33 號', tel: '082-333333', items: {'紅茶': 20, '綠茶': 20, '珍珠奶茶': 35 }, addons: {'去冰': 0, '半糖': 0, '熱': 0, '加鮮奶': 10 }, orderCount: 0, };
const Ui = {};
//先把每個資料夾的主要東西列出來，這些都是大物件，用pos讓我們選單，再把單送到shop矩陣的物件裡面，再用localStorge去存(沒伺服端的替代方法)，report是把shop的東西放到裡面讓我們可以看到，setting把shop的物件列出，再使我們可以修改，甚至增加裡面的內容，lib式顯示時間(定單)，ui是版面的變動控制。
這是一個很有系統化的程式，可以看看他的原始碼