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
callback&jQuery
- 160