Professional Documents
Culture Documents
Javascript Cơ Bản
Javascript Cơ Bản
Hng
Kin thc c bn v HTML v CSS c th gip bn to c website n gin. Nhng
nu bn mong mun 1 website sinh ng v phc tp hn, bn cn Javascript.
Javascript l ngn ng lp trnh n gin, nhng cc k mnh m v ph bin cho lp
trnh web. Cc ng dng thng thy Javascript c th k n nh:
Tng tc vi HTML v thay i ni dung v nh dng trn website d dng.
Tng tc vi cc hnh ng ca ngi dng nh nhn chut, g phm
X l v kim tra cc d liu trn form trc khi gi v server.
To v truy xut thng tin lu trong cookie trn my ngi dng.
ng vai tr nh 1 ngn ng lp trnh pha server (s dng cc framework nh
Node.js).
C nhiu phng php hc Javascript, v tt nht l ngi hc c t tay my
m trong sut qu trnh tm hiu. Bi vit hm nay s p dng phng php , v tip
cn n theo mt cch mi mong bn c d lm quen v hnh dung hn:
gamification tr chi ha ni dung bi hc.
Hy tng tng bn l nhn vt chnh trong mt game nhp vai, khi u t con s 0
trn trnh u tranh tr thnh Anh Hng trong ci Javascript. Khng g ha hn mt
hnh trnh bng phng c, nhng ng ngi ngn khi nh mnh gi tn!
INTRO CHAPTER!
Hy to nn huyn thoi ca ring bn v 1 Anh Hng Javascript!
01
02
03
04
05
<html>
<body>
<script type="text/javascript" src="ng-dn-n-file-javascript.js"></script>
</body>
</html>
Tuy nhin, trong hnh trnh Javascript c bn ny, bn khng cn phi chn code hay
file Javascript vo 1 file html v chy file ny. Bn s g code trc tip trn trnh duyt
bng cng c Console. m Console, hy bm F12 v chn tab Console khung
cng c lp trnh c hin th, hoc s dng phm tt nhanh Ctrl+Shift+J
(Chrome/Firefox).
Xong cha no? Hy sn sng chinh phc nhng th thch vit nn cu chuyn v
Anh Hng Javascript ca ring bn!
WELCOME TO CHAPTER 1!
Chc mng bn bt u hnh trnh Anh Hng Javascript!
Bin
on code trn l 1 v d khi s dng bin. Hy ngh 1 bin nh 1 ngn t c t
tn, v tn bin l tn ngn t, gi tr ca bin l vt dng trong ngn t. Bn c th
cha bt k th g bn mun trong ngn t , v khi cn tm li, bn ch cn tra ng
tn ngn t m bn cn.
Bin c 2 phn, l tn bin v gi tr ca bin. Tn bin rt n gin, khi bn c th t
tn bin ty vi cc ch ci hoa hay thng, cc con s v du gch chn (_). Cn
vi gi tr ca bin th chng ta cn thm v kiu d liu. v d trn, ta dng
bin ten cha 1 hm prompt v cha d liu kiu string. Javascript h tr nhiu
kiu d liu, nhng mc c bn bn s cn nm vng cc kiu d liu sau:
String dng cha chui k t v phi c bao quanh bi cp nhy n ()
hay nhy i ().
Number dng cha d liu kiu s nguyn, s thp phn v khng nm trong
cp nhy n hay nhy i.
Boolean l kiu logic, ch c 2 gi tr l ng (true) hoc sai (false).
Thao tc vi bin
cha trong t, bn cn phi tm 1 ngn t rng, dn tn cho ngn t (khai
bo bin) v t 1 vt g vo bn trong (gn gi tr cho bin).
01
02
03
// Khai bo vi t kha var
var level;
04
05
// Sau khi khai bo, dng du = gn gi tr
06
// Gi tr kiu s (Number)
07
level = 1;
08
09
// Khai bo v gn 1 gi tr ngay lc gi l khi to
// Gi tr kiu boolean
10
var male = true;
11
12
// Gi tr kiu chui k t (String)
13
var phancap = "Anh Hng";
14
15
/* =========================================================
16
* | HY T TAY CODE TRC KHI KO XUNG XEM CODE MU! |
* =========================================================
17
* TH THCH LEVEL 1
18
* ----------------19
* Khi to thm 3 bin cha thng tin v cp (level),
20
* im kinh nghim (xp) v im k nng (skillPoints).
* Gi tr khi to ca tng bin nh sau:
21
* - Cp : 1
22
* - im kinh nghim: 0
23
* - im k nng: 5
24
* =========================================================
25
* | HY T TAY CODE TRC KHI KO XUNG XEM CODE MU! |
* =========================================================
26
*/
27
28
29
Sau khi t xong bin, bn c th th in ra bng cch s dng hm alert() xem gi
tr. V d:
01
02
03
+ expand source
LEVEL UP! Chc mng bn ln cp 2! XP +150
var level = 1;
var xp = 0;
var skillPoints = 5;
level = level + 1; // hoc tng ng l level++;
xp = 150 * (level - 1) + 200; // s dng du ngoc trn gom nhm u tin
skillPoints = skillPoints + xp / 10;
// Ni 3 chui n gin
"Javascript" + " " + "cn bn";
// Ni 1 chui v 1 bin String
ten + " s l Anh Hng Javascript";
// Ni 1 chui vi 1 bin Number
"Cp hin ti ca bn l " + level;
/* =========================================================
* | HY T TAY CODE TRC KHI KO XUNG XEM CODE MU! |
* =========================================================
* TH THCH LEVEL 2
* ----------------* Khi to thm 3 bin l strength, agility v intel.
* S dng gi tr ca im k nng (skillPoints) pha trn
* v tnh ton gi tr khi to ca cc bin:
* - strength bng 60% im k nng cng vi 10% ca im kinh nghim.
* - agility bng 20% im k nng cng vi 20% ca im kinh nghim.
* - intel bng 20% im k nng cng vi 1000% ca cp .
* Sau khi tnh ton xong, hy xut cc ch s theo c php:
* "Ch s strength ca bn l " + ch s
* =========================================================
* | HY T TAY CODE TRC KHI KO XUNG XEM CODE MU! |
* =========================================================
*/
22
23
24
25
26
+ expand source
LEVEL UP! Chc mng bn ln cp 3! XP +200
23
24
25
LEVEL UP! Chc mng bn ln cp 4! XP +300
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
intel = intel - 5;
}
/* =========================================================
* | HY T TAY CODE TRC KHI KO XUNG XEM CODE MU! |
* =========================================================
* TH THCH LEVEL 4
* ----------------* S dng hm prompt('Bn mun chn phn cp no? a: Chin
* Binh | b: St Th | c: Th Sn') yu cu ngi
* dng nhp vo 1 k t hoc l a, hoc b, hoc c. Gi tr
* nhp vo s c x l nh sau:
* 1. Nu l k t a:
* - Cp nht phn cp Anh Hng (bin phancap): Chin Binh.
* - iu chnh ch s: strength +10, agility -10
* 2. Nu l k t b:
* - Cp nht phn cp Anh Hng (bin phancap): St Th.
* - iu chnh ch s: strength -10, agility +5, intel +5
* 3. Nu l k t c:
* - Cp nht phn cp Anh Hng (bin phancap): Th Sn.
* - iu chnh ch s: strength -10, intel +10
* 4. Nu khng phi 3 trng hp trn
* - Khng cp nht v iu chnh g c.
* =========================================================
* | HY T TAY CODE TRC KHI KO XUNG XEM CODE MU! |
* =========================================================
*/
+ expand source
LEVEL UP! Chc mng bn ln cp 5! XP +400
01
02
03
04
05
06
07
08
09
10
11
12
13
// V d vng lp while
var i = 1;
while (i < 10) {
console.log(i);
i++;
}
console.log(i);
// V d vng lp for
for (var j = 1; j < 10;j++) {
console.log(j);
}
console.log(j);
BATTLE! Bn chm trn 1 con rng gi, v buc phi git n vt qua
NEW SKILL!
Hm Math.random(): dng to gi tr ngu nhin t 0 n 1. to xc sut ngu
nhin theo %, c th s dng (Math.random() * 100).
NEW SKILL!
Hm alert(): dng xut mt chui k t qua hp thoi thng bo. C th dng
debug hay xut thng tin cho ngi dng.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/* ========================================================
* Trc khi vo trn chin, cn xem li cc ch s ca bn
* v xem xt cc thng tin ca i th.
* ========================================================*/
level = 5; // m bo bn s cp 5
var health=level*100;// Khi lng mu <= 0 th bn s cht
console.log(strength); // Quyt nh mc st thng
console.log(agility); // Quyt nh xc sut n n
console.log(intel); // Quyt nh xc sut ch mng
/* ========================================================
* Rng Gi
* -------* Chm chp v yu t hn so vi ng loi, nhng vn rt
* nguy him vi kh nng phun la c th gy st thng ch
* mng rt cao
* ========================================================*/
var dragonHealth = 600;
var dragonStr = 100;
var dragonAgi = 15;
var dragonInt = 80;
/* =========================================================
* | HY T TAY CODE TRC KHI KO XUNG XEM CODE MU! |
* =========================================================
* TH THCH LEVEL 5
* ----------------* Vit tr chi Dit Rng theo cc bc sau:
* 1. Mi lt chi, Anh Hng v Rng ln lt tn cng nhau.
* => GI : S dng vng lp while.
* 2. Anh Hng tn cng trc, Rng tn cng sau.
* 3. Tr chi kt thc khi mt phe ht mu (health < 0 hoc dragonHealth < 0).
* => GI : t 1 bin boolean kim tra.
* 4. S dng hm (Math.random() * 100) ly xc sut ngu nhin theo %.
* 5. Rng n n thnh cng khi % xc sut ngu nhin b hn dragonAgi.
* => GI : so snh dragonAgi vi (Math.random() * 100).
* 6. Anh Hng n n thnh cng khi % xc sut ngu nhin b hn agility.
* => GI : so snh agility vi (Math.random() * 100) (khc 5).
* 7. St thng do Anh Hng gy ra bng vi ch s strength.
* => GI : khi Anh Hng nh trng, gim mu Rng theo gi tr st thng.
* 8. St thng do Rng gy ra bng vi ch s dragonStr.
* => GI : khi Rng nh trng, gim mu Anh Hng theo gi tr st thng.
* 9. Anh Hng gy st thng ch mng khi % xc sut ngu nhin ln hn intel.
* => GI : so snh intel vi 1 gi tr (Math.random() * 100) (khc 5 v 6).
* 10. Rng gy st thng ch mng khi % xc sut ngu nhin ln hn dragonInt.
* => GI : so snh dragonInt vi 1 gi tr (Math.random() * 100) (khc 5,6,9)).
* 11. St thng ch mng s gy thm 200% st thng.
* => GI : nu gy st thng ch mng, gim mu i 2 ln st thng.
40
41
42
43
44
45
46
47
48
49
50
51
52
53
*
* =========================================================
* | HY T TAY CODE TRC KHI KO XUNG XEM CODE MU! |
* =========================================================
*/
+ expand source
BATTLE WON! Chc mng bn t danh hiu Dng s dit Rng!
LEVEL UP! Chc mng bn ln cp 6! XP +600
Quest 6: To v gi Hm
Hm l 1 on code ring bit c th s dng nhiu ln. Hm c th nhn tham s t
bin v tr kt qu v gn cho bin.
Trc khi s dng, hm cn c khi to vi t kha function tnHm(thamS1,
thamS2). Mi bin m hm cn s dng t bn ngoi hm c truyn vo gia hai
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Quest 7: i tng
i tng Javascript cng ging nh mt vt th thc ngoi i: c cc tnh cht
(thuc tnh) v kh nng (phng thc/hm). Hiu mt cch khc, i tng trong
Javascript l tp hp ca cc thuc tnh v cc phng thc (v bn cht cng l hm)
bn trong.
C th xem i tng nh 1 bin c bit trong Javascript, c khai bo trong cp
ngoc nhn {...} v s dng du . truy xut cc thuc tnh v phng thc bn
trong.
// C php khai bo 1 i tng
01
var RongGia = {
02
// Khai bo cc thuc tnh
03
name: 'Rng Gi',
04
phanLop: 'Rng',
age: 6969,
05
health: 600,
06
strength: 100,
07
agility: 15,
08
intel: 80,
09
// Khai bo cc phng thc
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
bay: function() {
console.log('Flappy Dragon!');
},
phunLa: function() {
console.log('Rng phun la');
},
ng: function() {
console.log('Zzz... Zzz...');
}
};
// S dng cc thuc tnh nh bin thng thng
console.log(RongGia.name);
console.log(RongGia.phanLop);
console.log(RongGia.age);
// S dng phng thc nh gi hm bnh thng
RongGia.bay();
RongGia.phunLa();
RongGia.ng();
// Bn cng c th thm cc thuc tnh v phng thc
// sau khi khi to i tng
RongGia.level = 10;
RongGia.cht = function() {
console.log('Rng ln bn th!');
};
/* =========================================================
* | HY T TAY CODE TRC KHI KO XUNG XEM CODE MU! |
* =========================================================
* TH THCH LEVEL 7
* ----------------* Khai bo mt i tng AnhHung cha cc thng tin v
* Anh Hng ca bn:
* 1. Cc thuc tnh: tn, phn lp, cp , cc ch s..
* 2. Cc phng thc v d nh i, chy, nhy, ng..
*
* =========================================================
* | HY T TAY CODE TRC KHI KO XUNG XEM CODE MU! |
* =========================================================
*/
Quest 8: Mng
Mng l tp hp nhiu phn t, vi mi phn t l 1 bin c sp xp theo th t v
c nh s ch mc (nh s t 0) cho tng bin tin truy xut. Mi bin trong mng
c th mang bt k kiu d liu no: t Number, String n c i tng v mng khc.
Cc bin trong mng c nh s tun t tng dn t 0, nn bin cui cng trong
mng s c s ch mc bng tng s lng bin tr i 1.
Mng c khai bo bn trong cp ngoc vung var tnMng = [bin1, bin2];. Cc
bin bn trong cng c truy xut bng ngoc vung theo c
php tnBin[sChMc]. S lng cc phn t bn trong mng c th c truy xut
nhanh bng thuc tnh tnBin.length (v bn cht Mng Javascript cng l 1 i
tng). Ngoi ra, thm phn t vo 1 mng c khi to, bn cn s dng
phng thc tnBin.push().
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42