JavaScript

講師 - 呂家睿

  • 建中資訊38屆學術長+副社
  • 玩雀魂
  • 頭像是應急食品
  • 被電爛
  • 有問題歡迎來問我啊
  • Fastapi
  • Qt(C++)
  • 數學好難
  • 一點點sandbox
  • Machine Learning
  • discord bot
  • 打開電腦

學術力

Function   函式

Function   函式

假設你要烤pizza

烤pizza的程式

主函式

準備材料

揉麵團

預熱烤箱200 度

麵團成捏餅狀

加配料:番茄醬、蘑菇

烤10分鐘

Function   函式

如果你忽然想烤五個pizza了

烤pizza的程式

假設你一次只能處理一個Pizza

或者你除了烤pizza還要做別的事

烤pizza的程式

主函式

收拾整理的程式

烤雞的程式

外送的程式

接訂單的程式

問題:

  • 太長而且重複
  • 混在一起不乾淨整潔 

主函式

Function   函式

這時候我們就適合用函式!

外送的程式

接訂單的程式

烤pizza函式

準備材料

揉麵團

預熱烤箱200 度

麵團成捏餅狀

加配料:番茄醬、蘑菇

烤10分鐘

定義一次

主函式

反覆使用

烤pizza函式

烤pizza函式

烤pizza函式

烤pizza函式

烤pizza函式

分別定義

...

烤pizza函式

...

接訂單

...

收拾整理

主函式

烤pizza函式

烤pizza函式

烤pizza函式

收拾整理

收拾整理

接訂單

Function   函式

function bake_pizza()
{
    console.log("Preparing the ingredient ...")
    console.log("Kneeling the dough ...")
    console.log("Heating the oven to 200 degrees ...")
    console.log("Shape the dough ...")
    console.log("Adding the toppings: tomato & mushrooms ...")
    console.log("Baking for 10 minutes ...")
    console.log("Done!!")
}

for(let i = 0; i < 5; i++)
{
    bake_pizza()
}

function + 名字()

定義函式

內容寫在一對大括號裡面

呼叫函式

Function   函式

假如我們要考不同種類的pizza呢?

準備材料

揉麵團

預熱烤箱200 度

麵團成捏餅狀

加配料:番茄醬、蘑菇

烤10分鐘

蘑菇Pizza

準備材料

揉麵團

預熱烤箱180 度

麵團成捏餅狀

加配料: 火腿、鳳梨...

烤20分鐘

夏威夷Pizza

非常像

函式的參數:

  • 讓函式可以稍有變化
  • 函式裡面的變數

Parameter 參數

function bake_pizza(temp, ingridient, time)
{
    console.log("Preparing the ingredient ...")
    console.log("Kneeling the dough ...")
    console.log("Heating the oven to", temp, "degrees ...")
    console.log("Shape the dough ...")
    console.log("Adding the toppings:", ingridient.join(", "))
    console.log("Baking for", time, "minutes ...")
    console.log("Done!!")
}


bake_pizza(200, ["mushroom", "tomato sauce"], 10)
bake_pizza(180, ["ham", "pineapple", "tomato sauce", "cheese"], 20)
console.log(`Heating the oven to ${temp} degrees ...`)
console.log(`Adding the toppings: ${ingridient.join(", ")}`)
console.log(`Baking for" ${time} "minutes ...`)

"字串" + 非字串 + "字串"

`字串 ${非字串} 字串`

good

參數

  • 只能在函式裡面用
  • 不同函式之間的參數不會互相影響
  • 可以是基礎或複雜的變數型態

template literals 樣板字串

Parameter 參數

標準pizza 和客製化的 pizza

function bake_pizza_standard(
    temp = 200, 
    ingridient = ["mushroom", "tomato sauce"], 
    time = 10
)
{
    console.log("Preparing the ingredient ...")
    console.log("Kneeling the dough ...")
    console.log(`Heating the oven to ${temp} degrees ...`)
    console.log("Shape the dough ...")
    console.log(`Adding the toppings: ${ingridient.join(", ")}`)
    console.log(`Baking for" ${time} "minutes ...`)
    console.log("Done!!")
}

bake_pizza_standard(undefined, ["ham"])
bake_pizza_standard(1000)
function bake_pizza_free(...args)
{
    console.log("Preparing the ingredient ...")
    console.log("Kneeling the dough ...")
    console.log(`Heating the oven to ${args[0]} degrees ...`)
    console.log("Shape the dough ...")
    console.log(`Adding the toppings: ${args[1].join(", ")}`)
    console.log(`Baking for" ${args[2]} "minutes ...`)
    console.log("Done!!")
}

bake_pizza_free(1, [2, 3], 4)

如果有某種參數特別常用到，可以設為預設值

用args可以傳無限多個參數

回傳值 return value

紀錄烤pizza的總時間

函式:

變數、參數

回傳值

let total_time = 0

function bake_pizza(temp, ingridient, time)
{
    console.log("Preparing the ingredient ...")
    console.log("Kneeling the dough ...")
    console.log(`Heating the oven to ${temp} degrees ...`)
    console.log("Shape the dough ...")
    console.log(`Adding the toppings: ${ingridient.join(", ")}`)
    console.log(`Baking for" ${time} "minutes ...`)
    console.log("Done!!")
    return time*1.5 + 10    
}

total_time += bake_pizza(200, ["mushroom", "tomato sauce"], 10)
total_time += bake_pizza(180, ["ham", "pineapple", "tomato sauce", "cheese"], 20)
console.log(total_time)

Function   函式

全域變數

區域變數

只能在一定範圍內使用

任何地方都能用

function a()
{
    let x = 0
    console.log(x)
}

{
    let y = 1
    console.log(y)
}

a()
console.log(x)
console.log(y)
let z = 100
function b()
{
    console.log(z)
}

{
    console.log(z)
}

b()
console.log(z)

為何還要用return?

  • 全域變數用多了會很混亂
  • 多個函式搶一個變數

Object   物件

Object   物件

const myPizza = {
    crust: "thin",
    toppings: ["cheese"],
    isHot: true,            
    price: 15,
    eat() {
        console.log("You ate the pizza, you feel determined")
    }          
};

properties屬性

變數

method方法

可以如何使用這個東西 -> 函式

在javascript裡面幾乎所有東西都是一個物件

屬性

方法

Object   物件

const myPizza = {
    crust: "thin",
    toppings: ["cheese"],
    isHot: true,            
    price: 15,
    eat() {
        console.log("You ate the pizza, you feel determined")
    }          
};

console.log(myPizza.crust)
console.log(myPizza.toppings)
myPizza.eat()
myPizza.crust = "thick"
console.log(myPizza.crust)

我們可以使用 . 來取用這個物件裡面的方法或屬性

如何"看"你的物件

console.log(Object.keys(myPizza))
console.log(Object.values(myPizza))
console.log(Object.entries(myPizza))

看有哪些屬性、方法

看有屬性、方法的內容

看全部

Object   物件

const myPizza = {
    crust: "thin",
    toppings: ["cheese"],
    isHot: true,            
    price: 15,
    eat() {
        console.log("You ate the pizza, you feel determined")
    },
  	upgrade(){
        this.price += 10
        this.toppings = ["cheese", "ham", "mushroom"]
    }     
};

console.log(myPizza.price, myPizza.toppings)
myPizza.upgrade()
console.log(myPizza.price, myPizza.toppings)

當我們想要修改物件的屬性時，我們會傾向在內部完成以保持整潔，這就是封裝encapsulation的特性

this代表物件本身，如果我們在物件裡需要用到他的屬性，需要在前面加上this

"private" property

function createPizza() {
    let secretSauce = "Spicy Honey"
    return {
        getSauce() {
            return secretSauce
        }
    }
}

const securedPizza = createPizza()
console.log(securedPizza.getSauce())
console.log(securedPizza.secretSauce)

如果有些pizza的資訊你想要保密怎麼辦?

物件會"記住"

secretSauce變數

函式和物件

function createPizza() {
    let secretSauce = "Spicy Honey"
    return {
        getSauce() {
            return secretSauce
        }
    }
}

const securedPizza = createPizza()
console.log(securedPizza.getSauce())
console.log(securedPizza.secretSauce)

JS中幾本上所有東西都是物件，包括函式

物件會"記住"

secretSauce變數

下課!!!!!

Made with Slides.com