# 網站開發
2024清大網站開發程式設計營 & 自主學習計畫
## 摘要
一篇關於我在營隊學到的東西和延伸到自主學習的實作應用
---
# 2024 清大網站開發程式設計營
## 前言
### 網頁是什麼？
打開瀏覽器後所顯示出來的畫面。
分為前端與後端，前端是由HTML, CSS, JavaScript這三種語言所組成。
| HTML | CSS | JavaScript |
|:------------:|:--------:|:------------------:|
| 架構 | 美術 | 邏輯 |
| 定義網頁內容 | 美化外觀 | 數學運算、邏輯操作 |
---
## Part 1. HTML
### 介紹
#### 1. HTML Element(元素)
網頁是由許多個元素構成，而每一個元素都有各自的功能。
大部分的元素都有「開頭」與「結尾」
```
<tagname>文字</tagname>
<tagname> 開頭tag
</tagname> 結尾tag
```
#### 2. HTML Attributes(屬性)
屬性：提供有關元素的額外訊息
所有的元素都能加上屬性
屬性都是放在開頭tag
屬性幾乎都是以名稱跟數值的方式出現 (name = "value")
```
<p>連結元素中含有href，告訴網頁點擊他後會去哪裡</p>
<a href="https://discord.com/channels/@me">discord</a>
```
輸出:
<p>連結元素中含有href，告訴網頁點擊他後會去哪裡</p>
<a href="https://discord.com/channels/@me">discord</a>
### 標題 Title
#### 1.標題字分為六個大小 `<h> </h>`
```
<h1>Title</h1>
<h2>Title</h2>
<h3>Title</h3>
<h4>Title</h4>
<h5>Title</h5>
<h6>Title</h6>
```
輸出:
> <h1>Title</h1>
> <h2>Title</h2>
> <h3>Title</h3>
> <h4>Title</h4>
> <h5>Title</h5>
> <h6>Title</h6>
### 段落 Paragraphs
#### 1. 放段落的地方 `<p> </p>`
```
<h3>這是標題</h3>
<p>這是放段落文字的地方</p>
```
輸出:
> <h3>這是標題</h3>
> <p>這是放段落文字的地方</p>
>
#### 2. 打出多個空格 ` `
```
<h3>這是標題</h3>
<p>這裡是放段落文字的地方 這樣就有三個空白</p>
```
輸出:
> <h3>這是標題</h3>
> <p>這裡是放段落文字的地方 這樣就有三個空白</p>
>
#### 3. 在段落中換行 `<br/>`
開頭tag跟結尾tag省略成此形式
```
<h3>這是標題</h3>
<p>這裡是放段落文字的地方 這樣就有三個空白<br/>這樣可以換行
</p>
```
輸出:
> <h3>這是標題</h3>
> <p>這裡是放段落文字的地方 這樣就有三個空白<br/>這樣可以換行
> </p>
>
### 文件格式 Text Formatting
多個格式包在一起，可以疊加喔！
| 效果 | 語法 |
| -------------------- | -------------------- |
| 粗體 | `<strong></strong>` |
| 上標字 | ``<sup></sup>`` |
| 斜體 | ``<em></em> `` |
| 標記文字 | ``<mark></mark> `` |
| 較小的文字 | ``<small></small> `` |
| 刪除線 | ``<del></del>`` |
| 插入字，通常有下底線 | ``<ins></ins> `` |
| 下標字 | ``<sub></sub>`` |
### 圖片 image(img)
#### 1. 在網頁中放圖片 `<img/>`
| 效果 | 語法 |
| ------------------------------------------------------ | ---------------- |
| 指定圖片網址 | `src=""` |
| 設定圖片寬度 | ``width="_px"`` |
| 設定圖片高度 | ``height="_px"`` |
| 圖片的替代文字：當圖片載入失敗或者有視覺障礙的人聆聽時便會顯示這段文字 | ``alt="" `` |
```
<img
src="https://pbs.twimg.com/media/FC8s5LmaAAAJPtz.jpg"
width="400px"
height="600px"
alt="這是一張可愛的圖"
/>
```
輸出:
> <img
> src="https://pbs.twimg.com/media/FC8s5LmaAAAJPtz.jpg"
> width="400px"
> height="600px"
> alt="這是一張可愛的圖"
> />
### 連結 Link
#### 1. 放連結 `<a></a>`
用來導向至其他網頁
href 屬性指定目標網址。
```
<p>連結元素中含有href，告訴網頁點擊他後會去哪裡</p>
<a href="https://discord.com/channels/@me">discord</a>
```
輸出:
> <p>連結元素中含有href，告訴網頁點擊他後會去哪裡</p>
> <a href="https://discord.com/channels/@me">discord</a>
想額外開一個新的分頁就：
```
<a href="https://github.com/XXXXXX" target="_blank">GitHub 頁面</a>
```
### 區塊 Div
#### 1. 分類程式碼`<div></div>`
```
<div>
<h3>one</h3>
<p>區塊通常是方便美術排版的</p>
</div>
<div>
<h3>two</h3>
<p>區塊通常是方便程式碼的分類</p>
</div>
```
輸出:
> <div>
> <h3>one</h3>
> <p>區塊通常是方便美術排版的</p>
> </div>
>
> <div>
> <h3>two</h3>
> <p>區塊通常是方便程式碼的分類</p>
> </div>
### 註解 Comments
#### 1.寫註解的地方 `<!---->`
```
<!-- 我被無視了 Q_Q -->
```
輸出:(畢竟是註解所以看不到啊)
<!-- 我被無視了 Q_Q -->
---
## Part 2. CSS
### 介紹
* 控制網頁的外觀和排版的語言。
* 描述 HTML 文件的呈現方式的語言。
* 設定文字顏色、字體、間距、對齊方式、邊框等。
例子:改顏色
```
<h1 style="color: red">red title</h1>
<h1 style="color: rgb(255, 128, 0);">orange title</h1>
```
例子輸出:
> <h1 style="color: red">red title</h1>
> <h1 style="color: rgb(255, 128, 0);">orange title</h1>
>
### 有三種方法在html中使用css
#### 1. 內聯樣式 (Inline Styles)
直接在 HTML 標籤中使用 style 屬性。
`<p style="color: blue;">blue words</p>`
#### 2. 內部樣式 (Internal Styles)
在 HTML 文件的 `<head>` 區域中使用 `<style>`標籤。
#### 3. 第三種外部樣式 (External Styles)
使用外部 CSS 文件，並在 HTML 文件中通過 `<link>` 標籤引用。
```
// styles.css，這是另一個檔案
p {
color: red;
}
// index.html，這是主檔案
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>red。</p>
</body>
```
### 先備知識
CSS 的語法很簡單，分成兩個部分：目標與效果
使用 class 類別=>幫元素貼上一個「分類」，可以重複使用。所以被貼上該分類的元素，都會取得該分類的效果
css 中的寫法是句點「.」+「類別名稱」
類別名稱基本上能自由定義
(不過用詞上只能使用英文與 - )
html 中的寫法則是替需要指定元素中的屬性加上 class
class="類別名稱"
注意 html 的類別不要加點「.」
類別只能在 style 中宣告，或者在獨立的 css 檔案中宣告
### 文字顏色
```
color： 文字顏色;
```
### 文字大小
```
font-size： ???px;
```
### 文字對齊方式
```
text-align： 對齊方式;
(center, left, right, bottom)
```
### 背景顏色
```
background-color： 顏色;
```
### 圓角
```
border-radius: ??%;
```
---
## Part 3. JavaScript
### 介紹
- 功能
讓網頁動態更新內容，處理使用者輸入並執行複雜的邏輯操作。
- 特色
跨平台：可以在多種操作系統和瀏覽器上執行。
動態類型：變數在執行時可以改變類型。
事件驅動：可以處理各種使用者事件，如點擊、移動滑鼠、鍵盤輸入等。
:::danger
Java 跟 JavaScript 是毫無相關的程式語言!!!
:::
### 列印、顯示數值/文字
```
console.log(數值/文字);
```
### 變數
```
let N; //宣告變數N
N=10; //把N設成數字/字串/...
```
### 資料型別
- String(字串) `let s = "hi!";`
- Number(數字) `let n = 328;`
- Boolean(布林值)`let b = true;`
- Array(陣列)
```
let colors = ["red", "green", "blue"];
console.log(colors[1]) //green
```
- Object(物件)
```
let person = {
name: "Daisy",
age: 16,
isStudent: true
};
console.log(person.name); // Daisy
console.log(person.age); // 16
console.log(person.isStudent); // true
person.age = 17;
console.log(person.age); // 17
person['likeCat'] = true; // 新增 likeCat 為 true
console.log(person.likeCat); // 顯示 true
```
### 基本運算符號
+, -, *, /, %
```
let a = 1+2;
console.log(a); // 3
let b = 3-2;
console.log(b); // 1
let c = 4*5;
console.log(c); // 20
let d = 6/2;
console.log(d); // 3
let e = 10%3;
console.log(e); // 1
```
### 條件語句
- if, if...else, if...else if...else
```
let score = 90;
if (score >= 80) {
console.log("高分！");
} else if (score >= 60) {
console.log("及格了！");
} else {
console.log("再加油");
}
// output: 高分！
```
- switch
```
let age = 17;
switch (true) {
case (age >= 0 && age <= 5):
console.log("免費");
break;
case (age >= 6 && age <= 12):
console.log("兒童票");
break;
case (age >= 13 && age <= 18):
console.log("學生票");
break;
default:
console.log("普通票");
}
// 學生票
```
### 邏輯運算符
- &&(and), ||(or)
- 用法跟C++相同
### 迴圈
- for loop
- while loop
- do...while
- 以上用法也和C++相同
### 函數
#### 定義函數
```
function sayHello() {
console.log("Hello World");
}
```
#### 用函數
```
sayHello();
```
#### 帶參數
```
function greet(name) {
console.log("Hello, " + name + "!");
}
greet(Daisy) // Hello, Daisy!
```
#### 有回傳值
```
function add(a, b) {
return a + b;
}
console.log(add(9, 10)) // output: 19
```
---
## Part 4. JavaScript 與網頁視覺動畫
### 前言
- 讓JS找到元素在哪裡
替指定元素設定id
```
//html檔案裡
<body>
<div>
<p id = "picture">pic</p>
</div>
<script>
console.log('Hello')
</script>
</body>
```
- 透過` <script> `元素插入 JavaScript 程式碼在裡
他會在網頁打開的瞬間被==自動執行==
#### 獲取元素（getElementById）
用`.getElementById("")` 來找元素。
```
<body>
<div>
<p id = "picture">pic</p>
</div>
<script>
console.log('Hello')
let pic = document.getElementById("picture")
pic.style.color = "red";//把pic抓出來，把它的 style 的 color 改成紅色
pic.innerText = "This is a paragraph, not a picture.";//把裡面文字改掉
</script>
</body>
```
### 事件
#### 1. 點擊按鈕
1. 創一個按鈕，並讓程式碼找到這個按鈕的存在
2. 創建事件(addEventListener)
- 設定按鈕，當什麼動作發生時，就執行什麼指令
- 下方的例子：
當點擊動作發生時
就執行將pic顏色改成藍色，並改變文字
```
<body>
<div>
<p id = "picture">pic</p>
<button id = "btn">click me</button> <!-- Step 1. -->
</div>
<script>
// console.log('Hello')
let pic = document.getElementById("picture")
let btn = document.getElementById("btn");// Step 1.
btn.addEventListener("click", () => {// Step 2.
pic.style.color = "blue";
pic.innerText = "Hi";
});
</script>
</body>
```
- "click" 便是指點擊動作
- 動作都是規範好的，每一個都是關鍵字
- 不能亂打，需要實際去搜尋看什麼動作對應什麼關鍵字
#### 2. 讀取輸入框
1. 創造一個輸入框`<input id="input" type="text" placeholder="輸入中...?" /> `，並讓程式碼找到這個按鈕的存在
2. 如果被點擊時，取得使用者的輸入數值，p顯示的文字變成該數值
3. 把輸入框清空or改成其他東西(?)
```
<body>
<div>
<p id = "picture">pic</p>
<input id="input" type="text" placeholder="輸入中...?" /> <!-- Step 1. -->
<button id = "btn">Enter</button>
</div>
<script>
// console.log('Hello')
let pic = document.getElementById("picture")
let btn = document.getElementById("btn");
let myInput = document.getElementById("input");// Step 1.
btn.addEventListener("click", () => {// Step 2.
let inputValue = myInput.value;
pic.innerText = inputValue;
myInput.value = ""; // Step 3.
});
</script>
</body>
```
#### 3. Canvas
Canvas 是 Html 的元素` <canvas>`
我們可以用 Canvas 來繪製圖形，就像用畫筆在畫布上畫畫一樣。
1. 創造畫布，讓程式知道它是誰
2. canvas 提供了一種名為 getContext('2d') 的方法，可以讓我們取得他的畫筆
如果要繪製這個畫布都必須透過這個畫筆
3. 將畫筆的顏色變成藍色
4. 繪製一個正方形
ctx.fillRect(x, y, width, height)
也就是從 (x,y) 這個座標點繪製一個寬 width 高 height 的正方形
```
<body>
<canvas id="myCanvas" width="300" height="300"></canvas><!--Step 1.-->
<script>
const canvas = document.getElementById("myCanvas");// Step 1.
const ctx = canvas.getContext("2d");// Step 2.
ctx.fillStyle = "blue";// Step 3.
ctx.fillRect(50, 50, 150, 150);//Step 4.
</script>
</body>
```
---
# 自主學習計畫
## 計畫流程
- 整理營隊學習內容
- 設定主題，實作網站
- 學習如何使用git上傳檔案至github
- 解決上傳後遇到的問題
- 把網站架設到網路上
- 持續增加網站內容
## 檔案上傳
### 前置作業
- 安裝git
- 檢查有無安裝好，有的話會顯示版本
- ```
git --version
```
- 在Github建立一個空的repository
### 上傳步驟
1. 打開終端機（Terminal）或 Git Bash
```
cd 儲存程式碼的資料夾
```
2. 初始化 Git 倉庫
```
git init
```
3. 加入遠端 repository（將 URL 換成自己的）
```
git remote add origin https://github.com/帳號名稱/repository名稱.git
```
4. 加入所有檔案
```
git add .
```
5. 提交檔案
```
git commit -m "幫這個上傳命名"
```
6. 推送到 GitHub（第一次需加上 -u）
```
git push -u origin main
```
p.s. main的部分要看repo預設分支名稱是什麼
如果不確定分支叫什麼，可以先輸入：
```
git branch
```
會看到像這樣的輸出：
`* master`或是`* main`，這就是名稱
### 遇到的問題
#### 遠端 origin 已經存在
- 在步驟3跳出`錯誤: 遠端 origin 已經存在。`
- 原因：Git 發現你早就設定過一個叫 origin 的遠端連結了，所以拒絕新增。
- 解決方法：先刪除舊的，再新增
- 指令：
1. 刪除原本的 origin 設定
```
git remote remove origin
```
2. 重新加上正確的遠端連結（替換成你自己的 repo URL）
```
git remote add origin https://github.com/帳號名稱/repository名稱.git
```
#### 身份驗證失敗
- 跳出
```
Username for 'https://github.com': XXXX
Password for 'https://XXXX@github.com':
remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
致命錯誤: 'https://github.com/XXXX/XXXXX.git/' 身份驗證失敗
```
- 原因：GitHub 已經不再支援使用「帳號密碼」的方式登入推送（從 2021 年就停止了）
- 解決方法：Personal Access Token（PAT）
- 步驟：
1. 產生Token
- 前往 GitHub 的 PAT 頁面（須登入）：https://github.com/settings/tokens
- 點選右上角 Generate token (classic)
- 填寫：
Note：取名字
Expiration：建議選 90 days 或 No expiration（視安全需求）
Scopes 權限：✅ repo（推送/修改 repo 必選）
- 點擊下方綠色按鈕「Generate token」
- 複製產生的 Token！
> 這個只會顯示一次，要馬上複製貼到記事本等地方。
2. 用 Token 登入 Git
#### 上傳推送失敗
- 跳出
```
錯誤: RPC 失敗。HTTP 400 curl 22 The requested URL returned error: 400
send-pack: unexpected disconnect while reading sideband packet
致命錯誤: 遠端意外掛斷了
```
- GitHub 中途把它「斷線」了
- 原因：檔案太大、網路不穩或 Git 設定限制推送大小
- 解決方法：
1. 增加 Git 的 HTTP buffer 限制
```
git config --global http.postBuffer 524288000
```
將 Git 傳輸緩衝區改成 500MB（預設只有 1MB），解決大檔推送時的中斷問題。
2. 確認資料夾內沒有單一檔案超過 100MB
3. 再執行 push
```
git push origin main
```
## 網站架設
### 步驟
1. 確認HTML檔案中的進入點叫 index.html
2. 開啟 GitHub Pages 功能
- 打開 GitHub repository 網頁
- 點選Settings
- 在左邊側欄，找到 Pages
- 設定
- Source：選擇 `Deploy from a branch`
- Branch：選擇 `main`
- Folder：選 `/(root)`
- 點Save
- 設定完之後，會在 Pages 那一欄看到：
```
Your site is live at https://XXXXXXXX
```
這個網址就是公開網站網址
### 想修改檔案？
在Terminal
```
git add .
git commit -m "更新說明，例如：修正首頁文字"
git push origin main
```
### 遇到的問題
#### 路徑問題
- 在電腦上模擬的畫面和網站連結呈現的不同
- 原因：在HTML裡引用 CSS、圖片、JS 檔案的路徑，在本地和 GitHub Pages 的根目錄可能不一樣
- 解決方法：將路徑引用從相對路徑改成絕對路徑
```
| 類型 | 範例 | 說明 |
| ------ | ------------------------------------ | ------------------------------------------- |
| 絕對路徑 | `/CKBG_8th/images/logo.png` | 從網站根目錄出發，最穩定（推薦用在 GitHub Pages） |
| 相對路徑 | `../images/logo.png` 或 `./images/...`| 根據「目前這個 HTML 檔案的位置」計算，容易出錯 |
| 網址路徑 | `https://...` | 適合使用 CDN 或其他網站上的資源 |
```
# 作品
可以幫我去Github的repository按星星💫嗎(｡･ω･｡)
### 高中社團網站
程式碼：https://github.com/AriesDaisy/CKBG_8th
網站（電腦版）：https://ariesdaisy.github.io/CKBG_8th
---
# 資料來源
> 以上筆記參考自營隊講師的簡報：Ray Realms Blog
> Part1: https://ray-realms-blog.zeabur.app/article/9ee7f4ed-c936-461c-90f3-15d8ad626c26
> Part2: https://ray-realms-blog.zeabur.app/article/6683d763-5f17-4913-bdaa-576933e48737
> Part3: https://ray-realms-blog.zeabur.app/article/fd22b20e-6358-4a1b-be9c-9ee108c99102
> Part4: https://ray-realms-blog.zeabur.app/article/e4d3e885-909a-422b-82dc-1041ecad0aa7?fbclid=IwY2xjawE0N5pleHRuA2FlbQIxMAABHR-cCU9xe4cF_Igfn7GGzpKwbq8XcxP4uSnrixd0TNdp1c-oZmTzLd-ZlQ_aem_cBO_w_MVgVk7qFP8OtL4vg
Sign in with Wallet
Connect another wallet