---
title: 基礎課程
tags: JavaScript
---
JavaScript概論
---
* 簡稱JS
* 是動態腳本
* 可以寫在瀏覽器上(前端) 也可以寫在Node.js上(後端)
* 可以讓網頁動起來
* 可應用到網頁的前端跟後端 Andoird還有IOS App上
* 可寫手機版網頁嵌入App內(如:line today)
* 兩個=是模糊的 三個=是嚴謹的
在HTML加入JS的兩種方法
---
1. 在head或body內用script tag去包JS的內容
```htmlembedded=
<script>
裡面包JS的語法
</script>
```
2. 也可在專案內加入一個副檔名.js的檔案
在head或body內引入JS連結
```htmlembedded=
<script src="./index.js"></script>
```
console.log()
---
* 在console裡面log出我們紀錄的訊息
* 可以用來顯示提示用戶的訊息
```javascript=
console.log(裡面輸入要顯示在console的資訊)
```
alert
---
* BOM指令=全域的情況使用
* 跳出提示框
* 兩種alert的方式:
```javascript=
alert('123');
window.alert('456');
```
* 也可以用跳出的提示框詢問yes or no
```javascript=
confirm ('Delete?');
confirm ('submit?');
```
* 可以彈出視窗輸入數字
```javascript=
prompt('input num1',0);
window.prompt('input num1');
```
document.write
---
* 將單純的字串輸出，以及輸出變數字串
* 測試使用
```javascript=
var TestString='Have a good time.';
document.write('Welcome to Wibibi.<br>'+TestString);
```
查看資料
---
* 可以查看資料的指令
```javascript=
typeof(123)
number
```
null undefined NaN empty
---
* null 沒有東西 可以指定一個變數為null
* undefined 變數存在但未定義
* NaN(not a number) 數字*字串=NaN
* empty 初始值/判斷是否為空值
變數與常數
---
* 宣告變數的符號'=',代表把右邊的內容給左邊
* 宣告變數的三種方式：
let 區域變數 - 取代var 可用的地方比較多
同一個區域只能有一個被let宣告的變數
var 全域變數 - 可被改變的變數
同一個區域重複使用var 新宣告的變數會替代之前宣告的舊變數
const 常數 - 不可被改變的變數(常數)
* 修改變數內容
```javascript=
let a1 = "aaa"
console.log(a1) //此時的a1是aaa
a1 = "bbb" //再次宣告不需要let
console.log(a1) //此時的a1是bbb
```
* 宣告變數-字串 string
* 跳脫字元 \n
* 字串兩邊要用"或'包起來
* 例：宣告一個名字的變數 並且顯示在console裡面
```javascript=
let myName = '翎'//字串
console.log(myName)
```
* 如果let後面+的兩邊放的是字串
不會變成運算
會自動變成字串的連接
* 例：宣告我的名字是翎 999歲
相加後結果會顯示 翎999歲
```javascript=
let myName = '翎'
let age = '999歲'
let word = myName + age
console.log(word)
```
* 例：透過宣告字串實現提示訊息
提示訊息：錯誤 或 提示訊息：成功
```javascript=
let title = '提示訊息：'
let title1 = '錯誤'
let title2 = '成功'
let alert1 = title + title1
let alert2 = title + title2
```
* 宣告變數-數字 number
* 數字可以直接輸入不需要用符號包起來
* 小數與整數在JS是同一個類型
* 例：宣告一個分數的變數 並顯示出來
```javascript=
let score = 100
console.log(score)
```
* 例：用數字做四則運算
```javascript=
let num = 100
console.log(num + 200)
```
* 例：取餘數 100取3的餘數 餘1
可用來判斷奇偶數
```javascript=
let num = 100
console.log(num % 3)
```
* 字串轉數字：
如果數字要運算時
建議要習慣轉換
避免妳不知道他是字串還是數字
結果錯誤
例:
```javascript=
let num1 = 123;//number
let num2 = "456";//string
// parseInt parsFloat Number
combineNum = num1 + num2;
// console.log(combineNum)//字串相加
combineNum= num1 + parseInt(num2);
```
* 數字轉字串：
例:
```javascript=
let num1 = 123;//number
let num2 = "456";//string
let newNum1 = num1.toString();
console.log(newNum1);
console.log(typeof(newNum1));
```
* 宣告變數-布林值 boolean
* 只會有TURE跟FALSE
* 例：宣告一個布林值 並顯示出來
```javascript=
let isFake = false
console.log(isFake)
```
* FLAG式紀錄狀態的標記
只有1和0兩個數
* 宣告變數-是否是空值
* undefined跟null一樣都是空值
* 例：宣告一個包包是空的 並顯示出來
```javascript=
let bag = undefined
console.log(bag)
```
陣列 Array
---
* 用[]框起來
* 比較偏向在資料處理
* 類似群組的概念
例：A班裡面有 小新 妮妮 阿呆 風間 正男
```javascript=
let classA = ['小新', '妮妮', '阿呆', '風間', '正男']
```
* 陣列沒有長度限制 可以不停往裡面加東西
* 新增陣列內容的語法
例：在A班內加入小愛
```javascript=
let classA = ['小新', '妮妮', '阿呆', '風間', '正男']
console.log('轉學前：',classA)
classA.push('小愛')
console.log('轉學後：',classA)
```
* 陣列的索引稱為index
* 索引都是從0開始
* 顯示陣列內容
例:將陣列內容顯示出來
```javascript=
let classA = ['小新', '妮妮', '阿呆', '風間', '正男']
console.log('第一筆', classA[0])
console.log('第二筆', classA[1])
console.log('第三筆', classA[2])
```
* 顯示陣列長度
例：A班陣列的長度 會顯示5
可用來放在迴圈內
當作迴圈次數的依據
```javascript=
let classA = ['小新', '妮妮', '阿呆', '風間', '正男']
console.log(classA.length)
```
* 從陣列取value或加入value
例:從尾端取值
```javascript=
let reA=aryFirst.pop();//從末端取出值 原本的值取出後消失
```
例:從前端取值
```javascript=
let reB=aryFirst.shift();//從前端取出值 原本的值取出後消失
```
例:從末端+值
```javascript=
let reC=aryFirst.push();//從末端加入值
```
例:從前端+值
```javascript=
let reC=aryFirst.unshift();//從前端加入值
```
物件Object
---
* 用{}框起來
* 用在存放文字跟數據
* 可將物件放入陣列使用
* 宣告有屬性的物件
例:一個名片
```javascript=
const card = {
name : '名片',
adress： '台北市',
age: 999,
}
```
* 顯示物件內容
例:宣告一個物件內容 名字 名片 年齡
console.log Card裡面的name項目
```javascript=
const card = {
name : '名片',
adress： '台北市',
age: 999,
}
console.log('名字',card.name)
```
判斷式if else
---
* 判斷式是直接幫我們把條件轉成布林值
* 如果符合條件就執行A選項不符合就執行B選項
例：如果小於100小餘50就顯示 大於 否則就顯示 錯誤
```javascript=
if(100>50){
console.log('大於')
}else{
console.log('錯誤')
}
```
* 判斷式常用的邏輯運算子有 && || !
* && 兩邊都T = T
* || 兩邊只要有一邊是T = T
* ! 把結果反向
* === 判斷兩邊的東西是否相等
如:兩個成績相等= T
```javascript=
let scoreA = 100
let scoreB = 100
let condition = score === 100
console.log('condition',condition)
```
流程控制switch case
---
* 有點類似if...else if...else
例：如果把成績分成好幾個Case
```javascript=
let score = 100
switch(score){
case :100
console.log('考了100分')
break;
case 60:
console.log('考了60分')
break;
case 30:
console.log('考了30分')
break;
default:
console.log('沒去考試')
break;
}
```
for迴圈
---
* 條件裡面 宣告變數 宣告次數 每次+多少
* i++ → i = i + 1
* 例:i從0開始跑 跑到10時停止 每次跑完+1
會顯示 0 1 2 3 4 5 6 7 8 9
```javascript=
for(let i = 0; i < 10; i = i ++){
console.log('i:',i)
}
```
* i + = 2 → i = i + 2
* 基本迴圈
例:i從5開始跑 跑到10時停止 每次跑完+2
會顯示 5 7 9
```javascript=
for(let i = 5; i < 10; i+=2){
console.log('i:',i)
}
```
* 陣列迴圈
例：宣告一個classA班級裡面有三個人
將陣列內容用迴圈印出來
```javascript=
let classA = [100, 70, 59]
for(let classA=0; i < classA.length; i++){
console.log('i:', classA[i])
}
```
* 陣列迴圈進階
例：先把迴圈加入一個40
再讓迴圈跑到2就把索引2改成999
所以console.log的結果會變成100 79 999 40
```javascript=
let classA = [100, 70, 59]
classA.push(40)
for(let classA=0; i < classA.length; i++){
if(i===2){
classA[i] = 999
}
}
console.log('classA', classA)
```
* 物件迴圈
例: 設定兩個物件
用迴圈依次印出來
```javascript=
const post =[
{
name:'大雄'
desc:'貼文一'
},
{
name:'小叮噹'
desc:'貼文一'
}
]
for(let classA=0; i < posts.length; i++){
if(i===1){
let post = posts[i]
console.log(post)
}
}
```
while迴圈
---
* while迴圈條件如果是true會直接跑到當掉
* 例：給迴圈一個判斷式 跑到10
避免跑到當掉
```javascript=
let condition = true//如果是一直是true會一直無限迴圈
let target = 10//給他一個次數上限
let i = 0//從0開始
while(condition){
if(i === target){//如果跑到10
condition = false//就會變成false 就會停止
}
console.log(i)//沒停止的話印出i
i++//每次+1
}
```
函數Function
---
* function的宣告與執行方式
```javascript=
function hello () {
console.log('你好')
}
hello()//要寫這個才會執行
```
* 打包的概念 把函數內的東西打包 帶到哪裡都方便
* function的簡寫
* 沒參數的function
例:宣告一個function以後可以在各頁面簡短的輸入獲取function內容
```javascript=
function addMoney() {
console.log(100 + 200)
}
//結帳頁面輸入
addMoney()
//購物車頁面
addMoney()
```
* 有參數的function
例:讓function裡面接受三個傳入的參數
結果顯示出三個參數
以及運算的結果
```javascript=
function addMoney(price1, price2, discount) {
console.log('price1', price1);
console.log('price2', price2);
console.log('discount', discount);
console.log(price1 + price2 - discount)
}
//結帳頁面輸入
addMoney(2000, 100, 50)
//購物車頁面
addMoney(3000, 200 , 100)
```
* return 有回傳值的function
例:將function裡面的參數運算後
return出去
宣告一個變數顯示出來function的運算結果
```javascript=
function addMoney(price1, price2, discount) {
let result = price1 + price2 - discount
return result//將結果傳出去
}
let total = addMoney(5000, 5000, 1000)
console.log('total',total);
```
* 回傳值的function+if...else
例:如果花費超過兩萬就是白金會員
五萬就是尊榮會員
```javascript=
function addMoney(price1, price2, discount) {
let result = price1 + price2 - discount
let message = '普通會員'
if(result >= 50000){
message = '尊榮會員'
return message //跟break有同樣的效果
//沒輸入return的話 他會繼續比對下面的條件
}
if(result >= 20000){
message = '白金會員'
return message
}
return message//將結果傳出去
}
let msg = addMoney(5000, 5000, 1000)//變數名稱可以隨便設定
console.log('msg',msg);
```
* 結合物件使用function
例:寫一個構造函數
```javascript=
function createCard(initName){
this.name = initName//this.→當下是什麼要執行函數本身
}
const a1 = new createCard('小明')//new→建立 構造
const a2 = new createCard('小明2')
const a3 = new createCard('小明3')
const a4 = new createCard('小明4')
const a5 = new createCard('小明5')
const a6 = new createCard('小明6')
console.log(a1);
console.log(a2);
console.log(a3);
console.log(a4);
console.log(a5);
console.log(a6);
// 透過這樣的方式可以保證我的程式碼不會漏掉name這個屬性減少出錯
```
* 另一種function的宣告方式
例:
```javascript=
let Hello = function() {}
```
* function的簡寫
```javascript=
let Hello = () => {}
```
迴圈的略過continue跟braeak
---
* 放在迴圈內可略過
例:用while迴圈印出1.2.3.4.6.7.done
```javascript=
let k=0;
while(k<10){
k++;
if(k==5) continue;
if(k==8) break;
else console.log(k);
}
console.log("done")
```
類別class
---
* class是語法糖 並不是真正的class
* ?????????????????????????
HTML DOM
---
* 瀏覽器下兩個重要的全域變數
1. windows =>一整個瀏覽器的功能操作
如
```javascript=
window.alert("")
```
2. document =>可以拿到這個檔案的標籤
* 取得元素
如:在window裝一個監聽器 讀取到頁面以後執行function
設定一個變數 內容是一個函數
這函數在document裡面 是透過id:title去取得的
* 如果script標籤再上面的話有時會讀不到
```javascript=
window.addEventListener('load', function () {
document.getElementById('title')
})
```
* 例:如果偵測到 click這個動作 就執行function console.log點下去
```javascript=
const b1 = document.getElementById('btn')
b1.addEventListener('click', function (){
console.log('點下去')
})
```
Sign in with Wallet
Connect another wallet