雲端: https://drive.google.com/drive/folders/1kohHGa26dy5PgJtM22jIu7MhlIuc7Q3g?usp=sharing
# 前端基礎
## html、 css、 js 是什麼?
## 安裝
* [Visual Studio Code下載](https://code.visualstudio.com/)
* **安裝套件**
* [Live Server ](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) <將程式碼即時的呈現畫面>
* [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) <自動閉合Html標籤>
* [Prettier-Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) <協助排版作業>
* [Chinese](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant) <VS code 中文>
## 快捷鍵
| 快捷鍵 | 功能 |
| -------- | -------- |
| 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://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© 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 => 一個網址下的圖片
```
# 登入登出
## 建立檔案
```
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://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
* .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
* .css
```
section {
width: 50vw;
background-color: white;
border-radius: 10px;
padding: 1%;
}
```
### **打叉icon**
* .html
* 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://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
* .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
* .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
* .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
* .css
```
.bottom {
display: flex;
justify-content: center;
align-items: center;
color: white;
margin: 2% 0;
}
.bottom a {
font-weight: bold;
color: white;
}
```
### **footer**
* .html
* .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
Google Drive
Gist
Clipboard
Sign in with Wallet
