---
# System prepended metadata

title: 體驗營

---


雲端: https://drive.google.com/drive/folders/1kohHGa26dy5PgJtM22jIu7MhlIuc7Q3g?usp=sharing

# 前端基礎

## html、 css、 js 是什麼?
![](https://hackmd.io/_uploads/BkXEmBPnn.png)

![](https://hackmd.io/_uploads/Sy1BZKSCh.png)

## 安裝
* [Visual Studio Code下載](https://code.visualstudio.com/)
![](https://hackmd.io/_uploads/SkJUVfs3n.png)


![](https://hackmd.io/_uploads/H1FduorJ6.png)


* **安裝套件**
![](https://hackmd.io/_uploads/S126cf4y6.png)

    * [Live Server ](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) <將程式碼即時的呈現畫面>
![](https://hackmd.io/_uploads/HkzsZ_S1p.png)


    * [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) <自動閉合Html標籤>
![](https://hackmd.io/_uploads/rJzacXE16.png)
 
    * [Prettier-Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) <協助排版作業>
![](https://hackmd.io/_uploads/Syv28G4yp.png)

    * [Chinese](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant) <VS code 中文>
![](https://hackmd.io/_uploads/SJBESFH0n.png)




## 快捷鍵


| 快捷鍵 | 功能 |
| -------- | -------- |
| Ctrl+Z | 返回前一步 | 
| Ctrl+F | 搜尋 |
| Ctrl+/ | 註解 |
| Ctrl+S | 存檔 |
| !+Tab | Html 基本格式 |

## 標籤式語言規則
包含**起始標籤**（Opening Tag） & **結束標籤**（Closing Tag）
起始標籤和結束標籤中間則放入**內容**（Content）

* 元素（element）
```
<p>內容</p>  <!-- 文字段落標籤 -->
<div>內容</div>  <!-- 文章標籤 -->
```

* 置空元素(empty element)
```
<br />  <!-- 換行標籤 -->
<hr />  <!-- 水平線標籤 -->
```


## HTML5 結構標籤
| 標籤名稱 | 簡單說明 |
| --- | --- |
| `<header>` | 網頁頁首，經常包含 logo、標題、導航列或介紹文字 |
| `<nav>` | 網站操作導航列 |
| `<aside>` | 跟主要內文沒有直接聯繫的側欄，常用來做功能按鈕設計與輔助說明文字 |
| `<main>` | 主要內容 |
| `<article>` | 文章 |
| `<section>` | 章節段落 |
| `<footer>` | 網頁結尾，經常包含版權資訊、聯絡方式 |

![結構範例](https://i.imgur.com/QxoeUeM.png)

網頁範例: https://tech.udn.com/tech/story/123717/7436349?from=udn_ch1024_editor_main_index

## 常見語意標籤

| 標籤名稱              | 說明                    |
| --------------------- | ----------------------- |
| `<div></div>`         | 區塊，沒有特定語意      |
| `<button></button>`   |                         |
| `<p></p>`             | Paragraph（段落）的縮寫 |
| `<h1></h1>~<h6></h6>` | Heading，標題文字大到小 |
| `<br/>`               | 跳下一行                |
| `<a href=""></a>`     | 用來連結到其他網頁 |
| `<img src=" " alt=" " />` | 圖片，src設定圖片的網址 |
| `<ul><li></li></ul>` | 清單 |
| `<form action="資料傳送到哪裡" method="get/post"></form>` | 表單 |
| `<input type="" />` | 輸入框，type => button、text、checkbox、email、password |
| `<label></label>` | 給input的標題 |


## 實作練習
* index.html 空白網頁
```
<!-- 定義文件類型為 HTML -->
<!DOCTYPE html>
<html lang="en">
<!-- 給電腦看的指令，不會顯示在畫面 -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 網頁標題 -->
  <title>Document</title>
  <!-- 連結到css -->
  <link rel="stylesheet" href="./css/main.css">
</head>
<!-- 要顯示在網頁上的內容 -->
<body>
  <!-- 內容 -->
</body>
</html>
```

* index.html 加入文字
```
<header>
    <nav>
        <ul>
            <li><a href="#">即時</a></li>
            <li><a href="#">政治</a></li>
            <li><a href="#">國際</a></li>
            <li><a href="#">兩岸</a></li>
            <li><a href="#">經濟</a></li>
        </ul>
    </nav>

    <button class="login-button" onclick="alert('已登入')">登入</button>
</header>
<main>
    <article>
        <h1>iPhone 15 Pro Max搶手 預購可能11月才拿到</h1>
        <p>2023/9/16 13:04（9/16 13:21 更新）</p>
        <img src="./image/2000x1125_wmkn_3215278701258_0.jpg" alt="Error" />
        <p>圖為iPhone 15 Pro Max。（圖取自蘋果網頁
            <a href="https://www.apple.com/tw/">apple.com</a>）
        </p>

        <section>
            <h2>路透社報導</h2>
            <p>在全球智慧型手機市場衰退影響6月季度iPhone業績後，這些跡象很可能會緩解外界對蘋果旗艦機需求的一些疑慮。</p>
            <p>面對華為競爭日益激烈且北京當局擴大限制公務員使用iPhone的情況，<br/>
                在中國買iPhone 15 Pro Max要等4到5週，也意味著可望緩解外界對蘋果第3大市場遭遇打擊的疑慮。</p>    
        </section>

        <section>
            <h2>蘋果官網</h2>
            <p>在中國訂購iPhone 15 Pro後等待交貨的時間稍短，為2到3週。蘋果表示，iPhone 15可能會在9月22日交貨，也就是門市發售日。</p>
            <p>在最大市場美國，買家必須等待6到7週才能拿到iPhone 15 Pro Max；在日本得等5到6週。iPhone 15 Pro Max是蘋果近日推出的iPhone 15系列中價格最高的機款。</p>    
            <p>但像在中國，等待iPhone 15 Pro的時間較短；在美國和日本，128GB版本僅需2到3週。</p>
        </section>
    </article>

    <form>
        <h3>填寫表單</h3>
        <p>
            <label>請輸入帳號:</label>
            <input type="text"/>
        </p>
        <p>
            <label>請輸入密碼:</label>
            <input type="password"/>
        </p>

        <input type="submit" value="送出" onclick="alert('已送出')"/>
        <input type="reset" value="清除" onclick="console.log('已清除')"/>
    </form>  
</main>

<footer>
    Copyright&copy; 2023, BIRC.
</footer>
```

* main.css
```
/* Reset some default browser styles */
body,
h1,
h2,
h3,
li,
p,
ul {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f0f0f0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-button {
    background-color: #fff;
    border: none;
    border-radius: 5px;
    width: 80px;
    padding: 5px;
    cursor: pointer;
}

nav ul {
    list-style: none;
    display: flex;
}

nav li {
    margin: 0 15px;
}

nav a {
    text-decoration: none;
    color: #fff;
}

main {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    font-size: 28px;
    margin-bottom: 10px;
}

img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

section {
    margin-bottom: 20px;
}

h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

p {
    line-height: 1.6;
    margin-bottom: 10px;
}

form {
    margin-top: 20px;
}

label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
}

input[type="submit"],
input[type="reset"] {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

footer {
    text-align: center;
    padding: 10px;
    background-color: #333;
    color: #fff;
}

```

## 縮排
```
<form>
    <h3>填寫表單</h3>
    <p>
        <label>請輸入帳號:
        </label>
        <input type="text"/>
    </p>
    <p>
        <label>請輸入密碼:
        </label>
        <input type="password"/>
    </p>
</form> 
```

#### 優點
* 讓自己撰寫程式碼時更清楚區域與階層關係
* 幫程式除錯時，能快速找到修改區域或位置
* 接手別人的專案或別人接手你的專案，都能快速了解程式架構



## 相對路徑 絕對路徑
* 相對路徑
```
.目前的目錄
/根目錄
..上一層目錄
```
```
sign-up.html => 同層目錄中的 html 檔

./css/index.css => 同層目錄中的 css 資料夾，裡面的 css 檔

../image/logo.png => 上一層目錄中的 img 資料夾，裡面的圖檔
```

* 絕對路徑
```
C:\Users\user\Desktop\體驗營\image => 電腦C槽下的一張圖片

https://www.ntub.edu.tw/var/file/0/1000/img/1595/logo.png => 一個網址下的圖片
```


# 登入登出
![](https://hackmd.io/_uploads/ryroXXNJa.png)
## 建立檔案
```
0918
 |一css
 |    |一index.css
 |    |一sign-up.css
 |    |一reset.css
 |
 |一image
 |一js
 |    |一index.js
 |
 |一index.html
 |一sign-up.htm
```

## 連結
Icon: https://fontawesome.com/v4/icons/
    `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">`
    
## index.css
```
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(../image/background.jfif);
  backdrop-filter: blur(3px);
  height: 100vh;
}

nav {
  width: calc(100% - 60px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 30px;
}
nav p {
  font-size: 15px;
}
nav ul {
  display: flex;
  flex-direction: row;
  align-items: center;
}
nav ul li {
  padding: 10px;
  color: #fff;
  cursor: pointer;
}
nav ul li button {
  background-color: transparent;
  border: 1px solid white;
  border-radius: 50px;
  color: white;
  padding: 10px 20px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
}

h1 {
  font-size: 40px;
  text-align: center;
  color: #fff;
  font-family: 'Bowlby One SC', cursive;
}

form {
  width: 300px;
  background: #fff;
  padding: 40px 50px;
  border-radius: 10px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 5px 5px #424242;
}
form label {
  color: #808080;
  font-size: 16px;
}
form label i {
  padding-right: 5px;
}
form input[type=text],
form input[type=password] {
  padding: 10px;
  width: calc(100% - 20px);
  border-radius: 20px;
  border: 0;
  background-color: #e5e8eb;
  margin: 5px 0 16px;
}
form input:focus {
  box-shadow: 0px 10px 15px rgb(224, 224, 224);
  outline: none;
  background-color: #fff;
}
form input[type=button] {
  background-color: #588157;
  border-radius: 20px;
  color: #fff;
  border: 0;
  padding: 10px 0;
  margin: 15px 0;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
}
form a {
  font-size: 16px;
  text-align: center;
  color: #808080;
}
p {
  font-size: 12px;
  color: #fff;
}
p a {
  color: #fff;
}
footer{
  height: 10%;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-self: center;
  align-items: center;
}
```

## **註冊畫面**
### **reset.css**
```
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}

ol, ul {
    list-style: none;
}
caption, th {
    text-align: left;
}
/*h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}*/
q:before, q:after {
    content: '';
}
abbr, acronym {
    border: 0;
}
```
在head連接reset.css

### **body**
* .html
![](https://hackmd.io/_uploads/Sk2LzKH0h.png)

* 文字樣式連結
    https://fonts.google.com/
    https://fonts.google.com/specimen/Montserrat?query=Montserrat

* 補充
    * Serif (襯線)
    * Sans Serif (無襯線)
    * Display (展示)
    * Handwriting (手寫)
    * Monospace (等寬字體)

* .css
```
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  background-image: url(../image/background.jfif);
}
```

### **nav**
* .html
![](https://hackmd.io/_uploads/ByHhptrRh.png)

* .css
```
nav {
  width: calc(100% - 60px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 30px;
}

nav p {
  font-size: 15px;
}

nav ul {
  display: flex;
  flex-direction: row;
  align-items: center;
}

nav ul li {
  padding: 10px;
  color: #fff;
  cursor: pointer;
}

nav ul li button {
  background-color: transparent;
  border: 1px solid white;
  border-radius: 50px;
  color: white;
  padding: 10px 20px;
  font-family: 'Montserrat', sans-serif;
}
```

### **中間白色區域**
* .html
![](https://hackmd.io/_uploads/S1-0zYH02.png)

* .css
```
section {
    width: 50vw;
    background-color: white;
    border-radius: 10px;
    padding: 1%;
}
```

### **打叉icon**
* .html
![](https://hackmd.io/_uploads/S1vZQYHR2.png)

* icon連結
    https://fontawesome.com/v4/icons/
    https://fontawesome.com/v4/icon/times
    
* .css

```
section i {
    float: right;
    color: #b4b4b4;
    cursor: pointer;
}

section i::before {
    font-size: 30px;
}
```

### **大標題文字**
* .html
![](https://hackmd.io/_uploads/Hy047YBRn.png)

    ![](https://hackmd.io/_uploads/HkwC4qHCh.png)

* 文字樣式連結
    https://fonts.google.com/specimen/Bowlby+One+SC?query=Bowlby+One+SC
    
* .css
```
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

section h1 {
    font-size: 40px;
    font-family: 'Bowlby One SC', cursive;
    margin: 30px 0;
}
```

### **需要填的選項們**
* .html
![](https://hackmd.io/_uploads/SyqwjcB0h.png)

* .css
1. 基本&通用樣式
```
.fillins {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 0 7%;
}

.fillin {
    width: 40%;
    margin-bottom: 5%;
}

.fillin p {
    margin-left: 5%;
    margin-bottom: 3%;
    color: #808080;
}

.fillin input {
    width: 90%;
    padding: 5%;
    border-radius: 25px;
    border: transparent;
    background-color: #e5e8eb;
    font-weight: bold;
    font-size: 1em;
}

::placeholder {
    color: #b9b9b9;
    font-family: 'Montserrat', sans-serif;
}
```
2. 密碼
```
.password {
    letter-spacing: 10px;
}
```
3. 下拉式選單
```
.fillin select {
    width: 50%;
    padding: 5%;
    border-radius: 25px;
    border: transparent;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 1em;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    /*在選擇框的最右側中間顯示小箭頭圖片*/
    background: url("../image/down-arrow.png") 90% 50% no-repeat scroll transparent;
    /*爲下拉小箭頭留出一點位置，避免被文字覆蓋*/
    background-color: #e5e8eb;
}

.fillin input:focus,
.fillin select:focus {
    background-color: white;
    box-shadow: 0 10px 15px rgb(224, 224, 224);
    outline: none;
}
```

### **勾選區**
* .html
![](https://hackmd.io/_uploads/B1rEVKrCn.png)

* .css
```
#flexCheckDefault {
    width: 20px;
    height: 20px;
    margin: 0;
}

label a {
    font-weight: bold;
    color: #000;
}

section input[type=checkbox] {
    width: 25px;
    height: 25px;
    background-color: white;
    border-radius: 50%;
    border: 2px solid #ddd;
    appearance: none;
    cursor: pointer;
    margin-right: 10px;
}

section .checkbox:checked {
    background-color: #588157;
}
```

### **註冊按鈕**
* .html
![](https://hackmd.io/_uploads/SJr34KB0h.png)

* .css
```
label a {
    font-weight: bold;
    color: #000;
}

.start {
    margin: 3% 0;
}

.start a {
    padding: 2% 13%;
    background-color: rgb(73, 73, 228);
    border: transparent;
    border-radius: 30px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
}

.start a:hover {
    background-color: rgb(32, 32, 184);
}
```

### **底部切換到登入的連結**
* .html
![](https://hackmd.io/_uploads/HkfA4trCn.png)
* .css
```
.bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    margin: 2% 0;
}

.bottom a {
    font-weight: bold;
    color: white;
}
```

### **footer**
* .html
![](https://hackmd.io/_uploads/HkV3zcBC2.png)

* .css
```
footer{
    color: white;
    font-size: 12px;
    height: 10%;
    position: fixed;
    bottom: 0px;
    display: flex;
    justify-self: center;
    align-items: center;
}
```

## JavaScript
### 使用語法
* 測試用的畫面
在外部新增一個畫面較jsTest.html
並且在js的資料夾內新增一個test.js
```
0918
 |一css
 |    |一index.css
 |    |一sign-up.css
 |    |一reset.css
 |
 |一image
 |一js
 |    |一index.js
 |    |一test.js
 |
 |一index.html
 |一sign-up.htm
 |一jsTest.html
```
在jsTest.html中輸入
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TestJs</title>
</head>
<body>
  <form action="/test.html">
    <input id="fristInput">
    <input id="lastInput">
    <button type="submit">submit</button>
  </form>
</body>
</html>
```
### html中導入JS
```    
        <script src="js路徑"></script>
```
### 在JS中的程式
* 彈跳顯示
```
        alert();
```
* 呼叫function
```
        function test(){
            alert();
        }
```
jsTest.html在大約12行的地方，新增onclick="test()"
```
        <button type="submit" onclick="test()">submit</button>
```
* 宣告變數
```
        var => 全域變數
        let => 區域變數
        const => 不可變動變數
```
#### 嘗試呼叫變數
* 先宣告兩個不同的變數
```
        var name1 = '廖一丞';
        let name2 = '林小茜';
```
* 在functuon中呼叫
```
        alert(name1);
        alert(name2);
```
* 取得標籤名稱(id)
在最上方新增兩個變數
```
        var fristInput = document.getElementById("fristInput");
        var lastInput = document.getElementById("lastInput");
```
* 判斷是否有接收到資料
```  
        if (fristInput.value.length == 0){
            alert('沒有輸入第一個輸入格');
        } else if (lastInput.value.length == 0){
            alert('沒有輸入最後一個輸入格');
        } else {
            alert(你都有打你很棒);
        }
```

## 幫登入畫面做簡單的防呆
```
        1. 去幫login網頁中的input 命名:使用者名稱給[userName],密碼給[password]
        2. 建立一個login的function
        3. 判斷其中有沒有值
        4. 最後用彈跳視窗顯示輸出
```


## 參考網址
https://javascript.alphacamp.co/javascript-past-and-present.html
https://ithelp.ithome.com.tw/articles/10287709?sc=rss.qu