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()中執行