課程簡介
HTML >> CSS >> Javascript
基本架構 >> 網頁美觀 >> 互動
講師介紹
吳苡溱(沒有綽號)
IG :@cmioc30__qin95
景美電腦資訊社-焦鱈(景資一枝花)
興趣:(在電資社我就不說打扣了) 所以我要說跳舞、其實還有自拍
簡單的上課規則
- 不會直接發問
- 有問題記得問
- 愉快心情上課
- 簡報錯了記得提醒
- 有空就練練
網頁的組成
網頁的組成
HTML
Javascript
CSS
建立網頁架構
可以在網頁中加入圖片文字連結等
讓網頁更加美觀
可以排版改變風格
讓網頁不只呈現靜態的功能
能建立互動式網頁
什麼是HTML
- 全名Hyper Text Markup Language
- 網頁技術最基礎的部分
- 是標記語言不是程式語言
- 主要用途是定義網頁的內容
什麼是HTML
- 使用標籤Tag來表示功能單位
- 使用巢狀結構來組合標籤
什麼是HTML
找一個網頁
按下F12
如何寫HTML
可以使用
Visual Studio Code
如何寫HTML
1.新增資料夾
如何寫HTML
2.開啟vscode
3.新增資料夾
如何寫HTML
4.新增檔案
5.檔名記得加.html
按下!+enter
即可開始寫網頁
如何寫HTML
6.在左邊工具列下載這兩個
最後按下Go Live 即可打開網頁
一些快捷鍵
起手式 | !+ Enter |
---|---|
回上一步 | Ctrl+Z |
儲存 | Ctrl+ S |
一些快捷鍵
自動儲存
HTML元素
以上3個加起來就是元素
但並不是每個元素都有結尾標籤
HTML的結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>:讓瀏覽器知道這個文件是HTML。
<html>:標定網頁原始碼的範圍。
・lang="en":設定元素的語系。
<head>:告訴瀏覽器網頁如何編碼,控制網頁與外部的連結
<body>:HTML文件會顯示給人們的主體。
常用HTML標籤
<h1>標題</h1>
<h2>標題</h2>
<h3>標題</h3>
<h4>標題</h4>
<h5>標題</h5>
<h6>標題</h6>
<p>段落段落段落段落段落段落</p>
<p>YES</p>
<br>
<p>NO</p>
標題
段落
換行
常用HTML標籤
<ol>
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ol>
<ul>
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ul>
<dl>
<dt>被定義的名詞</dt>
<dd>解釋一</dd>
<dd>解釋二</dd>
</dl>
<dl>
<dt>beautiful</dt>
<dd>美麗的,漂亮的</dd>
<dd>美好的;極好的</dd>
</dl>
有序清單
無序清單
定義清單
常用HTML標籤
<img src="圖片網站位置" />
- 複製圖片網址
- 儲存圖片到檔案中寫上圖片檔名
<a href="網址">文字</a>
超連結
常用HTML標籤
表格
<table border="1">
<caption>價目表</caption>
<tr>
<th>書包</th>
<th>鉛筆</th>
</tr>
<tr>
<td>紅色 $400</td>
<td>紅色 $200</td>
</tr>
<tr>
<td>藍色 $400</td>
<td>藍色 $200</td>
</tr>
<tr>
<td>彩色 $500</td>
<td>彩色 $300</td>
</tr>
</table>
- border: 邊框
-
<tr>:橫列
-
<td>:直行
-
<th>:欄位標題
-
caption:表格的標題
常用HTML標籤
表格
<table border="1">
<tr>
<th>項目</th>
<th>金額</th>
</tr>
<tr>
<td>iPhone 15</td>
<td>$44,900</td>
</tr>
<tr>
<td>AirPods3</td>
<td>$8,490</td>
</tr>
<tr>
<td colspan="2">總金額: $53,390</td>
</tr>
</table>
-
水平合併多行的儲存格
-
colspan="2" 表示從這一行開始往右合併至下一行
-
後面幾列的 <tr> 中同樣位置的 <td> 就要省略不寫
常用HTML標籤
表格
<table border="1">
<tr>
<th>項目</th>
<th>金額</th>
</tr>
<tr>
<td>iPhone 15</td>
<td>$44,900</td>
</tr>
<tr>
<td>AirPods3</td>
<td>$8,490</td>
</tr>
<tr>
<td colspan="2">總金額: $53,390</td>
</tr>
</table>
水平合併多行的儲存格
-
colspan="2" 表示從這一行開始往右合併至下一行
-
後面幾列的 <tr> 中同樣位置的 <td> 就要省略不寫
常用HTML標籤
表格
<table border="1">
<tr>
<th>項目</th>
<th>金額</th>
<th>總金額</th>
</tr>
<tr>
<td>iPhone 15</td>
<td>$44,900</td>
<td rowspan="2">$53,390</td>
</tr>
<tr>
<td>AirPods3</td>
<td>$8,490</td>
</tr>
</table>
垂直合併多列儲存格
- rowspan="2" 表示從這一列開始往下合併至下一列
- rowspan="0" 表示儲存格從這一列開始合併到最後一列的意思。
CSS
第二堂放課
- HTML 網頁主要結構
- CSS 用來處理排版含樣式細節
CSS屬性設定
- 基本語法
- 設定文字大小
- 設定文字粗細
屬性名稱:屬性內容
font-size:32px
font-weight:normal
font-size:16px
font-weight:bold
CSS屬性設定
同時多屬性設定
用分號隔開
font-weight:bold ; font-size:16px
套用CSS樣式
- 基本語法
<h3 style="css樣式">標題</h3>
<div style="css樣式">內容</div>
- 簡單範例
<h3 style="color:red">標題</h3>
<div style="font-weight:bold;coloe:blue">內容</div>
建議使用的標籤
<div>就是甚麼都沒有的文字</div>
<span>就是甚麼都沒有的文字</span>
標籤的顯示模式
- 行內模式(不換行)
- 區塊模式(自動換行)
- 隱藏模式 none
<span>、<a>、<img>
<div>、<h1>、<ul>、<table>
透過CSS的display屬性設定
文字相關設定
- 顏色
- 大小
- 粗細
color:pink
color:#ffe6d7 色碼
font-size:16px
font-size:2em 2倍大
font-weight:normal
font-weight:blod
文字相關設定
- 裝飾
- 在區塊中對齊
text-decoration:underine
text-decoration:line-through
text-align:left
text-align:center
CSS區塊模型
CSS區塊模型
<div>文字</div>
文字
<div>123</div>
<div>456</div>
456
123
<div>景美<span>一枝花</span></div>
景美一枝花
CSS區塊模型
小padding
大padding
Text
Text
<div style="padding:10px">Text</div>
區塊邊框
- 邊框
2.藍色寬實邊框
- 沒有邊框
3.紅色虛線邊框
<div style="border:3px solid blue">Text</div>
<div style="border:1px dashed red">Text</div>
<div style="border:0px">Text</div>
外邊距 Margin
- 外邊距為0
- 下方的外邊距為10px
背景顏色
區塊的高度與寬度
- 區塊的寬度(預設和上一層標籤等寬)
- 區塊的高度(隨內容縮放)
- 使用限制
width:500px
width:50%
height:300px
height:150%
區塊模式標籤才能設定
CSS選擇器
CSS選擇器
- 區分CSS和HTML
Class選擇器
原始程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="color:pink;font-weight:blod">粗粗粉色</div>
<div style="font-size:2em;color:green">大大綠色</div>
</body>
</html>
Class選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
{color:red;font-weight:blod}
{font-size:2em;color:green}
</style>
</head>
<body>
<div>粗粗粉色</div>
<div>大大綠色</div>
</body>
</html>
Class選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.stycle-rb{color:red;font-weight:blod}
.stycle-2g{font-size:2em;color:green}
</style>
</head>
<body>
<div class="stycle-rb">粗粗粉色</div>
<div class="stycle-2g">大大綠色</div>
</body>
</html>
id選擇器
id選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#title{
font-size:30px;
margin:10px;
text-align:center
}
.stycle-rb{color:red;font-weight:blod}
.stycle-2g{font-size:2em;color:green}
</style>
</head>
<body>
<div id="title">標標標題</div>
<div class="stycle-rb">粗粗粉色</div>
<div class="stycle-2g">大大綠色</div>
</body>
</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>
<style>
#title{
font-size:30px;
margin:10px;
text-align:center
}
body{color:red;font-weight:blod}
</style>
</head>
<body>
<div id="title">標標標題</div>
<div>粗粗粉色</div>
<div>大大綠色</div>
</body>
</html>
CSS樣式檔案
CSS樣式檔案
- 將CSS獨立成一個檔案
在HTML的head標籤中加入
<link rel="stylesheet"type="text/css"href="檔案路徑"/>
切版 RWD
第三堂放課
網頁切版核心觀念
網頁切版核心觀念
基本需求
- 版面寬度不能超過營幕
- 資訊重疊或無法閱讀
網頁切版核心觀念
本質
- 區塊標籤為本質
- 無止境的巢狀迴圈
網頁切版核心觀念
容器
- 外層的標籤
- 同時是更外層標籤的項目
ex:綠色是黃色的容器,綠色是灰色的項目
網頁切版核心觀念
項目
- 內層的項目
- 也是更內層標籤的容器
ex:綠色是灰色的項目,綠色是黃色的容器
網頁切版
網頁切版
- 直向排列->橫向排列
- 水平對齊
- 垂直對齊
網頁切版
將容器中的項目並排
display:block
display:flex
網頁切版
寬度配置
display:flex
display:flex
flex:none;
width:50%;
flex:none;
width:50%;
flex:none;
width:100px;
flex:auto;
網頁切版
多層次結構
display:flex
display:flex
flex:設定
flex:設定
flex:設定
flex:設定
;display:flex
flex:設定
對齊方式
對齊方式
水平對齊
在容器上使用
justify-contect屬性
水平靠右
水平置中
display:flex;justify-content:end;
display:flex:justify-concent:center;
flex:none;
width:30%
flex:none;
width:30%
flex:none;
width:30%
flex:none;
width:30%
flex:none;
width:30%
對齊方式
垂直對齊
在容器上使用
align-items屬性
垂直靠下
垂直置中
display:flex;align-item:flex-end;
display:flex:align-items:center;
對齊方式
完美置中
display:flex;
justify-content:center;align-item:center;
flex:none;
width:50%;
RWD回應式設計
RWD回應式設計
在不同大小的螢幕上,使我們的網頁都能正常顯示
RWD回應式設計
電腦螢幕
手機螢幕
RWD回應式設計
RWD回應式設計
- 基本語法
@media(螢幕條件){
套用css
}
- 範例
@media(max-width:1200px){
螢幕寬度在1200px以下使用
}
RWD回應式設計
透過flex-wrap調整
display:flex
flex:none;wideth:50%
flex:none;wideth:50%
flex-wrap:wrap
width:90%
flex:none;wideth:50%
width:90%
RWD回應式設計
透過font-size調整
比較大的字
比較大的字
比較小的字
比較小的字
RWD回應式設計
顯示切換
- HTML程式碼
- css程式碼
<div class="computer">電腦版</div>
<div class="phone">手機板</div>
.computer{display:block}
.phone{display:none}
@media(max-width:500px){
//螢幕小於500px
.computer{display:none}
.phone{display:block}
}
javascript
第四堂放課
javascript簡介
- 主要用在網頁前端開發
- java !=javascript
javascript簡介
- 範例
<scritp>
console.log("Hello World");
<script>
javascript簡介
- 註解(JS、CSS)
單行 //
多行 /*文字*/
- 註解(HTML)
<!--文字-->
資料
程式中最基本的運作資料
- 所有程式都是由資料所成
- 資料分成不同的形態
資料
程式中最基本的運作資料
- 所有程式都是由資料所成
- 資料分成不同的形態
資料
程式中最基本的運作資料
-
數字
- 3
- 3.14
- -3
- -3.14
資料
程式中最基本的運作資料
-
字串
- "早安"
- "HELLO"
- '早安安'
資料
程式中最基本的運作資料
-
布林值
- true
- false
資料
程式中最基本的運作資料
-
空值
- undefined
- null
變數
- 宣告
let 變數名稱
- 範例
let x;
let name;
變數
- 使用已宣告的變數名稱
let x;
console.log(x);
指定變數中的資料
指定變數中的資料
- 指定資料語法
let 變數名稱=資料
宣告過的變數名稱=資料
- 範例
let x;
console.log(x);
x=5;
console.log(x);
x="Hello";
console.log(x);
常數
常數
- 宣告
const 常數名稱=資料
- 範例
const x=3;
x=102; //錯誤
運算符號
運算符號
- 算術運算
- 指定運算
- 比較運算
- 單元運算
- 邏輯運算
運算符號
- 算術運算
- 加 +
- 減 -
- 乘 *
- 除 /
- 模 %
運算符號
- 指定運算
- =
- +=
- -=
- *=
- /=
- %=
運算符號
- 比較運算
- >
- <
- >=
- <=
- ==
運算符號
- 單元運算
- ++
- --
- !
運算符號
- 邏輯運算
- &&
- ||
輸入
輸入
- 格式
prompt(字串,字串)
- 範例
prompt("輸入一個數字","預設值")
javascript
第五堂放課
流程控制
流程控制
判斷式:不同情況不同處理方式
- 基本語法
if(布林值){
如果布林值為true,執行此程式區塊
}
else{
如果布林值是false,執行此程式區塊
}
流程控制
判斷式:不同情況不同處理方式
- 基本語法
if(布林值){
如果布林值為true,執行此程式區塊
}
else if(布林值){
如果布林值是true,執行此程式區塊
}
else{
如果上方都是false,執行此程式區塊
}
流程控制
迴圈:重複執行程式區塊
- while迴圈
- 基本語法
while(布林值){
如果布林值是true,執行這個程式區塊
執行完畢後,回到開頭在執行一次
}
流程控制
迴圈:重複執行程式區塊
- while迴圈
- 範例
let n=0;
while(n<5){
console.log(n);
n++;
}
流程控制
迴圈:重複執行程式區塊
- for迴圈
- 基本語法
for(初始化程式;布林值;執行){
如果布林值是true,執行這個程式區塊
執行完畢後,回到開頭在執行一次
}
流程控制
迴圈:重複執行程式區塊
- for迴圈
- 範例
for(let n=0;n<5;n++){
console.log(n);
}
流程控制
迴圈指令
- break
- 範例
let n=0;
while(n<3){
if(n==1){
break;
}
console.log(n);
}
流程控制
迴圈指令
- continue
- 範例
let n=0;
while(n<3){
if(n==1){
continue;
}
console.log(n);
}
函式
函式
使用流程
- 建立
- 呼叫
函式
- 建立函示
function 函式名稱(參數名稱列表){
函式內部的程式區塊
}
- 建呼叫函示
函式名稱(參數資料列表)
函式
- 建立函示
function test(){
console.log("函式執行")
}
- 建呼叫函示
test();
test();
test();
函式
- 建立函示
function show(chat){
console.log(chat);
}
- 建呼叫函示
show("hello");
show(3);
show(true);
函式
- 建立函示
function abc(n1,n2){
let sum=n1+n2;
console.log(sum);
}
- 建呼叫函示
show(3,4);
show("hello","world");
函式
- 建立函示
let 函式名稱=function (參數名稱列表){
函式內部的程式區塊
}
函式迴傳值
函式迴傳值
- 建立、呼叫函式
- 參數的運用
- 迴傳值的運用
函式迴傳值
- 結束語法
函式結束,回傳值 undifined
function 函式名稱(參數名稱列表){
程式區塊
return;
}
函式結束,回傳值自訂
function 函式名稱(參數名稱列表){
程式區塊
return 回傳值;
}
函式迴傳值
function aabcc(){
console.log("hello");
return;
}
aabcc();
函式迴傳值
function aabcc(n1,n2){
console.log(n1+n2);
return "hello";
}
aabcc(3,4);
函式迴傳值
function aabcc(n1,n2){
let sum=n1+n2
return sum;
}
let aaaa=aabcc(3,4);
console.log(aaaa);
javascript
第六堂放課
物件基礎
物件基礎
- 是一種資料型態
- 可以裝資料的資料型態
- 所以我們可以說他是個容器
物件基礎
1.建立
2.使用
建立物件
- 建立
- 程式碼
new Object()
let obj=new Object();
obj
建立物件成員
- 建立
- 程式碼
物件.成員名稱=資料
let obj=new Object();
obj.x=4;
obj.y=7;
obj
x:4
y:7
建立物件成員
- 建立
- 程式碼
物件.成員名稱=資料
let obj=new Object();
obj.x=4;
obj.y=7;
obj.show=function(){
console.log("Hello");
};
obj
x:4
y:7
show.function(){..}
物件基礎
- 建立
- 程式碼
物件.成員名稱=資料
let obj=new Object();
obj.x=4;
obj.y=7;
obj.show=function(){
console.log("Hello");
};
obj
x:4
y:7
show.function(){..}
成員非函式,稱為屬性
成員是函式,稱為方法
使用物件
- 可透過.存取物件的成員
物件.成員
- 程式碼
let obj=new Object();
obj.x=4;
obj.y=7;
odj.show=function(){
console.log("Hello");
};
console.log(obj);
console.log(obj.y);
obj.show();
物件方法中this關鍵字
使用this關鍵字
- 程式碼
let obj=new Object();
obj.x=4;
obj.y=7;
obj.show=function(){
console.log( this.x , this.y );
};
obj
x:3
y:7
show.function(){..}
使用JSON語法建立物件
使用JSON語法建立物件
- 建立
{成員名稱:資料,成員名稱:資料,....}
- 程式碼
let obj1={};
let obj2={
x:4,
y:7,
show:function(){
console.log(this.x,this.y)
}
};
陣列物件
陣列物件
- 利用有順序的編號來管理內部資料
陣列物件
- 建立
new Array()
or
[]
- 程式碼
let arr=[];
陣列物件
- 使用陣列的push方法
陣列.push(資料)
- 程式碼
let arr=[];
arr.push(4);
arr.push(7);
4 | 7 |
---|
arr
0
1
陣列物件
- 取得資料
陣列[編號]
- 程式碼
let arr=[];
arr.push(4);
arr.push(7);
console.log(arr[0]);
console.log(arr[1]);
4 | 7 |
---|
arr
0
1
陣列物件
- length屬性取的陣列長度
陣列.length
- 程式碼
let arr=[];
console.log(arr.length);
arr.push(4);
arr.push(7);
console.log(arr.length);
4 | 7 |
---|
arr
0
1
陣列物件
- 直接將資料進[]中
[資料,資料,資料,.....]
- 程式碼
let arr=[4,7];
arr.push(3);
4 | 7 | 3 |
---|
arr
0
1
2
HTML DOM
第七堂放課
HTML DOM
HTML DOM
- 每個Html標籤在JS引擎中都有對應的標籤物件,稱為Html Element
- 把Html 標籤物件串在一起,最物件結構就是Html dom
HTML DOM
HTML程式碼
網頁畫面
HTML in JS
HTML DOM
HTML程式碼
網頁畫面
HTML in JS
window
screen
div
h4
body
doucument
window 物件基本操作
window 物件基本操作
- 隨時可以用內建的window變數取得
console.log(window)
- window物件包含有用的屬性
window.innerWidth
window.innerHeight
- window物件包含有用的方法
window.pompt("輸入資料","預設值")
window.alart("彈出警告視窗")
window 物件基本操作
- screen物件是window物件的一個屬性
window.screen
- screen物間包含有用的屬性
window.screen.width
window.screen.height
window 物件基本操作
- document物件是window物件的一個屬性
window.document
可簡寫成document
- document物件包含有用的屬性
document.title;
document.body;
- document物件包含有用的方法
document.querySelector("CSS選擇器");
body物件基本操作
body物件基本操作
- body 物件是document 物件的一個屬性
document.body
- body物件包含有用的屬性
document.body.innerHTML
document.body.className
document.body.id
其他標籤物件基本操作
其他標籤物件基本操作
操作步驟
- 取得標籤物件
- 操作標籤物件
其他標籤物件基本操作
1.在HTML想要操作的標籤加上id屬姓
<div id="content">文文文文 </div>
<span id="keyword">字字字字字</span>
2.在Javascript程式中利用
document.querySelector()方法取得標籤物件
let divElement=document.querySelector("#content")
let spanElement=document.querySelector("#keyword")
取得標籤物件
其他標籤物件基本操作
<div id="content">文文文文</div>
<script>
let divElement=document.querySelector("#content")
divElement.innerHTML="這是一個新字";
divElement.className="welcome";
divElement.style.fontSize="30px";
divElement.style.color="blue";
</script>
操作標籤物件
配合使用者點擊
配合使用者點擊
在希望被點擊的標籤上加上onclick標籤
<div id="comtent">文文文文</div>
<button onclick="change();">點點點</button>
<script>
function change(){
let divElm=document.querySelector("#content")
divElm.innerHTML="這是新的字";
divElm.style.color="blue";
}
</script>
javaScript 事件處理
第八堂放課
事件處裡的基本觀念
事件處裡的基本觀念
- 發生了一件事情
- 執行相對應的程式處裡
事件處裡的基本觀念
- 常見的事件種類
click 滑鼠點擊
mouseover 滑鼠移入
mouseout 滑鼠移出
mousedown 滑鼠按下
mouseup 滑鼠放開
事件處裡的操作方式
事件處裡的操作方式
關鍵
- 在哪個標籤上發生的事件
- 事件的種類式甚麼
- 事件對應的處裡函式
事件處裡的操作方式
註冊事件處理函式
- 基本語法
<div 事件名稱="程式碼">標籤內文 </div>
<button 事件名稱="程式碼">標籤內文</button>
- 範例
<div onclick="change();">點點</div>
<script>
function change(){
document.body.innerHTML="Hello";
}
</script>
事件處裡的操作方式
範例一
- 典籍改變標籤本身內文
<div onclick="change(this);">原原原原</div>
<script>
function change(elem){
elem.innerHTML="新新新新";
}
</script>
事件處裡的操作方式
範例二
- 滑鼠按住、放開同時運作的範例程式
<button>
onmousedown="down(this);"
onmouseup="up(this);"
>按鈕</button>
<script>
function down(elem){
elem.style.color="red";
}
function up(elem){
elem.style.color="black";
}
</script>
箭頭函式
箭頭函式
函式的核心
- 函式的本體
- 函式的參數
- 函式的回傳值
箭頭函式
箭頭函式語法
- 普通函式語法一
function 函式名稱(函式參數列表){
函式區塊內部的程式碼
return 回傳值
};
- 普通函式語法二
let 函式名稱=function(函式參數列表){
函式區塊內部的程式碼
return 回傳值
};
箭頭函式
箭頭函式語法
- 箭頭函式的基本語法
let 函式名稱=(函式參數列表)=>{
函式區塊內部的程式碼
return 回傳值
};
箭頭函式
箭頭函式語法
- 普通函式語法一
function add(n1,n2){
let result=n1+n2;
return result;
};
- 普通函式語法二
let add=function(n1,n2){
let result=n1+n2;
return result;
};
箭頭函式
箭頭函式語法
- 箭頭函式的基本語法
let add=(n1,n2)=>{
let result=n1+n2;
return result;
};
箭頭函式
箭頭函式簡化語法
- 可簡化的箭頭函式
let 函式名稱=(函式參數列表)=>{
return 回傳值;
}
- 箭頭函式簡化的語法
let 函式名稱=(函式參數列表)=>(回傳值);
箭頭函式
箭頭函式簡化語法
- 無法簡化
let add=(n1,n2)=>{
let result=n1+n2;
return result;
}
- 箭頭函式簡化的語法
let add=(n1,n2)=>(n1+n2);
- 可簡化
let add=(n1,n2)=>{
return n1+n2 ;
}
javaScript 解構賦值
第九堂放課
javaScript 解構賦值
- 解構:把陣列或物件中的資料拆開
- 賦值:將拆開的資料分別放入個別的變數中
陣列解構賦值
陣列解構賦值
- 傳統作法
let arr=[3,4,5];
let d1=arr[0];
let d2=arr[1];
let d3=arr[2];
- 解構賦值的語法
let arr=[3,4,5];
let [d1,d2,d3]=arr;
陣列解構賦值
- 宣告與賦值的分開
let arr=[3,4,5];
let d1,d2,d3;
[d1,d2,d3]=arr;
- 預設值
let arr=[3,4];
let d1,d2,d3;
[d1,d2=2,d3=5]=arr;
變形
物件解構賦值
物件解構賦值
- 傳統作法
let obj={x:3,y:4};
let x=obj.x;
let y=obj.y;
- 解構賦值的語法
let obj={x:3,y:4};
let {x,y}=obj;
將物件中的資料分開賦值給變數按照物件成員名稱做對應
物件解構賦值
- 宣告與賦值分開
let obj={x:3,y:4};
let x,y;
({x,y}=obj);//不合宣告一起執行要加();
- 預設值
let obj={x:3};
let x,y;
({x,y=5}=obj);
變形
- 指定新的變數名稱
let obj={x:3,y:4};
let newx,newy;
({x:newx,y:newy}=obj);
其餘運算符號
其餘運算符號
- 運算符號: 三個點(...)
- 運用在解構賦值
陣列:把剩餘的資料包在一個新陣列中
物件:把剩餘的成員包在一個新陣列
其餘運算符號
運用在陣列結構賦值
其餘運算符號
運用在陣列結構賦值
未逐一指定名稱的剩餘值
運用其餘運算符號,包在新陣列中
- 陣列結構賦值的運用
let arr=[3,4,5,6,7];
let [d1,d2,...data]=arr;
cobnsole.log(data); //[5,6,7]
- 限制:必須放在最後面
let arr=[3,4,5,6,7];
let [d1,...data,d2,d3]; //錯誤
其餘運算符號
運用在物件結構賦值
其餘運算符號
運用在物件結構賦值
未逐一指定名稱的剩餘值
運用其餘運算符號,包在新物件中
- 物件結構賦值的運用
let obj={x:3,y:4,z:5};
let {x,...data}=obj;
cobnsole.log(data); //[y:4,z:5]
- 限制:必須放在最後面
let obj={x:3,y:4,z:5};
let [...data,x]; //錯誤
javaScript 解構賦值
第十堂放課
網址
網址
網址
網址
.github.io
網址
網址
網址
要寫些字
上傳資料夾
網址
網址
網址
複製
網址
加上/資料夾名稱/網頁名稱
deck
By jasmine0905
deck
- 163