Javascript - (2)

Topic : callback & jQuery

Lecturer: Lemon

〞

Javascript是個爛語言，

但Callback的存在讓他變得更爛了。

– Lemon

插播一下，

上個星期我有講函式相關的咚咚，

但我發現有些重要的我還沒講QAQ

所以現在要稍微補一下ㄛ

function

JS作為一個物件導向的語言，

物件是其中很重要的一環。

雖然我原本不打算教

object

ㄛ我等一下都只放JS程式碼

object

var yungyao = {
  name: "yungyao",
  weight: 8e7,
  height: 7122,
  hello() {
    console.log("Hello, I am " + this.name + ".");
  }
};
console.log(yungyao);
console.log(yungyao.name);
console.log(yungyao["weight"]); //建議用這個
yungyao.hello(); //使用method
console.log(typeof yungyao); //typeof ...
/*
{name: 'yungyao', weight: 80000000, height: 7122, , hello: ƒ}
 yungyao
 80000000
 Hello, I am yungyao.
 object
*/

有點像Python ouo

Note

function Person(name, weight, height) {
    this.name = name;
    this.weight = weight;
    this.height = height;
    this.hello = function() {
        console.log("Hello, I am " + this.name + ".");
    }
}
var yungyao = new Person("yungyao", 8e7, 7122);
var yeedrag = new Person("yeedrag", 233, 7414);
console.log(typeof yungyao);
console.log(typeof yeedrag);
console.log(yungyao);
console.log(yeedrag);
yungyao.hello();
yeedrag.hello();
/*
    object
    object
    Person {name: 'yungyao', weight: 80000000, height: 7122, hello: ƒ}
    Person {name: 'yeedrag', weight: 233, height: 7414, hello: ƒ}
    Hello, I am yungyao.
    Hello, I am yeedrag.
*/

使用建構子(Constructor)

function

很重要的一點：

函式是一種特殊的物件

function a() {
    //something
}
console.log(typeof a);
/*
    function
*/

雖然寫著function

但其實有著object的特性

pass

var yungyao = {
    name: "yungyao",
    weight: 8e7,
    height: 7122,
    hello() {
        console.log("Hello, I am " + this.name + ".");
    }
};
function pass(obj) {
    console.log(obj["name"] + " is passed to this function.");
}

pass(yungyao);
/*
    yungyao is passed to this function.
*/

函數的參數可以接收物件

pass

function add(a, b) {
    return a + b;
}
function wait(a, b, func) {
    setTimeout(function() {
        console.log(func(a, b));
    }, 3000);
    //等一下會教
    //讓程式等待3秒
}

wait(1, 2, add);
/*
    3
*/

函數的參數可以接收函數(物件)

Callback 稱為 回調、回呼函式。聽起來就很爛呢

 

簡單來說，

就是讓程式知道，他要先執行完這個函式，

再去執行下一個。

Callback

讓我們回到現實

Callback

setTimeout(function() {
    console.log("5 secs are passed")
}, 5000)

setTimeout(func, t)

這個函式會在等待t毫秒後執行func

function的建構可以直接寫在裡面ㄛ

Callback

我們考慮一個題目：

今天檸檬想要從 1 數到 10，

但每秒只能數一個數字。

for(var i = 1; i <= 10; ++i) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

這題目也太簡單ㄌㄅ

結果你就吃了一個WA。

asynchronous

JS是一個非同步的語言

 

意思是：

我的程式碼會不斷的往下執行

並不會等待前一個程式執行完畢

callback

這時我們就會需要Callback來拯救世界

for(var i = 1; i <= 10; ++i) {
    setTimeout(function(num) {
        console.log(num);
    }, 1000*i, i);
    //把輸入的參數放在時間t的後面
}

恭喜你成功變成一個會數數的人了

callback hell

Callback不一定很好。

note

這只是Callback的小介紹(?

Callback是我認為JS最難搞清楚的咚咚之一

所以如果能夠弄清Callback的用法

你的JS技術也會變得很好OuOb

這裡給一些關鍵字作為延伸學習之用：

  • arrow function expression

  • IIFE

  • async, await

〞

jQuery 一直是所有人的救贖。

– Lemon

install

有兩種方法

<!DOCTYPE html>
<html>
    <head>
        <title> Test </title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <body>
    </body>
</html>

直接從網路上抓下來w

<!DOCTYPE html>
<html>
    <head>
        <title> Test </title>
        <script src="jquery-3.6.0.min.js"></script>
    </head>
    <body>
    </body>
</html>

先去jquery.com下載，然後引用檔案

jQuery是一個JS的函式庫，

它讓Javascript變得更加簡單，

並且很大程度的加速編寫JS的速度。

intro

透過jQuery，

我們可以簡單的取用Event和元素內容，

可以藉此生成很多元素來豐富網頁，

並且製作一些動畫來做美化。

如果你們有認真聽學姊上課，

jQuery的選擇器其實就跟CSS的選擇器一樣

在語法上：$("中間打你要的咚咚").action()

e.g.

selector

$("#test").text("I love jQuery");

就可以簡單地設置文本內容

不需要討厭的getElementById()

btw選擇器你們可以自己去翻之前學姊的課ouo

因為講師想偷懶

我們可以簡易的透過jQuery來抓取事件

並且使用呼叫Callback

e.g.

event

$("#test").click(function() {
  alert("不要按ㄌ 好痛Q")
});

最常用的莫過於

$(document).ready(function() {
  console.log("Page is loaded.");
});

animation

$(document).ready(function() {
    console.log("Page is loaded.");
    $("#test").hide();
    setTimeout(function() {
        $("#test").show();
    }, 3000);
    setTimeout(function() {
        $("#test").fadeOut();
    }, 6000);
    setTimeout(function() {
        $("#test").fadeIn();
    }, 9000);
});

以及所有可以用CSS實作的動畫效果

也都能用jQuery的animate()實現

get & modify

$(document).ready(function() {
    console.log("Page is loaded.");
    console.log($("#test").text());
    setTimeout(function() {
        $("#test").text("我被改ㄌQAQ");
        console.log($("#test").text());
    }, 3000);
});

取用跟修改只差在有沒有輸入參數

相似的還有.val()、.html()

console.log($("#test").attr("class"));

.attr()可以獲取標籤的元素

css

$(document).ready(function() {
    console.log("Page is loaded.");
    setTimeout(function() {
        console.log($("#test").css("width"));
        $("#test").css("width", "1000px");
        console.log($("#test").css("width"));
    }, 3000);
});

跟剛才的有異曲同工之妙，

如果有輸入參數便是修改，

否則是抓取。

 

btw所有CSS都適用ㄛ

jQuery可以很大程度的簡化JavaScript對元素的操作，

精通jQuery可以讓人開心ㄉ寫JavaScript，

你還不學ㄇ(?

note

這裡提供關鍵字以供延伸遠：

  • Ajax
  • DOM
  • chaining

報寒訓oao

好啊都這樣啊 都不報寒訓啊

最後一堂網頁

Time for bed.

callback&jQuery

By lemonilemon

Made with Slides.com

callback&jQuery

  • 136

More from lemonilemon