Javascript Cơ Bản

Javascript c bn Hnh trnh ca mt Anh 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!

Javascript c th c s dng d dng vi th HTML script: ch cn a cc cu

lnh Javascript vo trong cp th hoc nhng 1 file Javascript bn ngoi. 01

02

03

04

05

06

07

// G code y

01

02

03

04

05

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).

Trng hp nu bn khng mun s dng Console thc hnh m mun vit ln

web th hy s dng cc phng thc xut d liu ra trang tn l document.write(). V

d:

01

02

03

document.write("Ti tn l Phc!"); // Hin th ch Ti tn l Phc website var name = "Phc"; document.write(name); // Hin th ch Phc website.

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!

Quest 1: Kin to Anh Hng Bin v kiu d liu

Vic lu tr d liu l mt trong nhng iu quan trng nht khi lp trnh. Thng

thng, cc d liu tm s c lu gi bng cc bin (variable) trong b nh. i vi

Javascript, bn cn khai bo bin bng t khavar trc khi gn d liu cho bin .

Mi Anh Hng u cn c 1 tn gi lu danh s sch, v tin khoe vi cc em gi

xinh p trong qun ru :>. Hy g li on code bn di vo Console v nhp tn

vo hp thoi c x ra.

NEW SKILL! Hm prompt(): dng nhn nhp liu t ngi dng v tr v dng chui k t.

V d lm quen vi bin 01

02

var ten = prompt('Xin cho! Hy gi tn Anh Hng ca bn:'); ten;

Hm prompt() l hm vit sn ca h thng nhn nhp liu t ngi dng (ta s tm

hiu thm v hm phn sau). Kt qu ca hm s tr v bt c g ngi dng nhp

vo hp thoi. Nu bn mun s dng kt qu , bn cn phi lu tr n bng

1 bin. dng th 1, ta khai bo bin ten v gn cho n kt qu tr v ca

hm prompt(). Sau ny, bt c khi no bn cn, bn ch cn gi bin cn thit ly

d liu m bin gi. l l do khi bn gi ln bin ten dng 2, bn s thy li gi

tr m bn va nhp. Sng cha

Demo: http://jsfiddle.net/6QhmR/1/

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).

Object l mt i tng ni chung vi cc thuc tnh v phng thc ring. Ta s tm hiu v Object phn 7.

Array l mng, dng cha tp hp nhiu bin. Phn 8 s gip bn hiu r hn.

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

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

// Khai bo vi t kha var var level;

// Sau khi khai bo, dng du = gn gi tr // Gi tr kiu s (Number) level = 1;

// Khai bo v gn 1 gi tr ngay lc gi l khi to // Gi tr kiu boolean var male = true;

// Gi tr kiu chui k t (String) var phancap = "Anh Hng";

/* ========================================================= * | HY T TAY CODE TRC KHI KO XUNG XEM CODE MU! | * ========================================================= * TH THCH LEVEL 1 * ----------------- * Khi to thm 3 bin cha thng tin v cp (level), * im kinh nghim (xp) v im k nng (skillPoints). * Gi tr khi to ca tng bin nh sau: * - Cp : 1 * - im kinh nghim: 0 * - im k nng: 5 * ========================================================= * | HY T TAY CODE TRC KHI KO XUNG XEM CODE MU! | * ========================================================= */

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

var name = "Thachpham.com";

alert(name);

+ expand source LEVEL UP! Chc mng bn ln cp 2! XP +150

Quest 2: Sc mnh tnh ton Cc ton t c bn

Javascript h tr y cc ton t c bn cng tr nhn chia. Ngoi ra, bn s lm

quen vi 2 ton t mi l ++ (tng gi tr ca bin kiu Number ln 1.0 n v) v

(gim gi tr ca bin kiu Number xung 1.0 n v). Th t tnh ton (trong trng

hp khng s dng du ngoc trn gom nhm u tin) l nhn chia trc, cng tr

sau v t tri sang phi.

01

02

03

04

05

06

07

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;

Ngoi ra, Javascript s dng ton t + ni cc chui k t.

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

// 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


Quest 3: Sc mnh logic Cc ton t so snh

Trn con ng hnh hip, Anh Hng s gp rt nhiu cm d v la lc. Chnh v th,

Anh Hng cn phi so snh chnh xc v s dng sc mnh logic nhn ra chn

tng ng/sai ca mi s vt, s vic.

Trong Javascript, kt qu ca mi so snh u l 1 bin kiu boolean: hoc l true,

hoc l false. so snh gia cc bin hay cc biu thc, bn c th s dng === cho

so snh bng, !== cho so snh khng bng, cho so snh hn km. NEW SKILL!

Hm console.log(): c th c dng in gi tr ca mt bin.

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

// So snh 2 bin String var test1 = ("Javascript" === "JAVAscript"); var test2 = ("Javascript" === "Javascript"); var test3 = ("Javascript" !== "javascript"); console.log(test1); console.log(test2); console.log(test3);

// So snh 2 bin Number test1 = (1 > 2); test2 = (0 < -5); test3 = (1.5 === 1.4999); console.log(test1); console.log(test2); console.log(test3);

// So snh 2 biu thc Number test1 = (1 - 2 + 3 - 4) = 1; console.log(test1); console.log(test2);

// So snh 1 bin Number v 1 bin String test3 = 15 === "15"; console.log(test3);

23

24

25

LEVEL UP! Chc mng bn ln cp 4! XP +300

Quest 4: La chn nh mnh iu kin v r nhnh

Chc mng bn nm vng cc k nng c bn, v n lc la chn phn cp

Anh Hng. Bn s c la chn gia 3 phn cp vi 3 c im v ch s khc nhau.

Cc la chn trong Javascript s dn n cc iu kin r nhnh khc nhau. to ra

cc la chn trong Javascript, bn s s dng t kha if hoc if...else. Cc la

chn c th lng ghp vi nhau to ra cc lung r nhnh phc tp. Tuy nhin, cn

cn trng v qu nhiu lung r nhnh s khin on code kh hiu v kh bo tr v

sau.

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

/* Cu lnh if thng thng * ------------------------ * Biu thc * Khi biu thc logic trong ngoc */ if (level < 4) { console.log('Bn cha t cp ti thiu tham gia th thch.'); }

// Cu lnh if...else if (level >= 4) { console.log('Bn cp tham gia th thch level 4.'); } else { console.log('Bn cn t t nht level 4 tham gia th thch.'); }

// Cu lnh if...else if...else if (level > 4) { console.log('Bn d sc vt qua th thch level 4.'); } else if (level === 4) { console.log('Bn sc vt qua th thch level 4.'); } else { console.log('V ung sa thm cho mau ln nha cng!'); }

// phn 1, bn khai bo bin ten // v s dng gi gi tr v tn Anh Hng ca bn // Ta s kim tra xem bn c th gi li chnh xc khng // thng hoc pht theo kt qu var kiemTraTen = prompt('Tn Anh Hng ca bn l g?'); if (kiemTraTen === ten) { console.log('Chnh xc! Bn c tr nh rt tt! intel +5!'); intel = intel + 5; } else { console.log('T tht! Tn chnh mnh m khng nh sao?! intel -5!');

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! | * ========================================================= */


Quest 5: u trng Sinh T Vng lp

Anh Hng no cng phi tri qua qu trnh tp luyn v u tranh gian kh t n

vinh quang. Qu trnh i hi nhng n lc lp i lp li n khi t c mt ,

mt mc ch no .

Vic lp cc thao tc trong lp trnh c gi l vng lp, v l mt trong nhng thnh

phn quan trng nht ca lp trnh. Vng lp s c 1 iu kin duy tr v khi iu

kin khng c m bo th vng lp s kt thc. i vi Javascript c bn, c 2

cch to vng lp: vng lp for v vng lp while. C 2 u bao gm 2 thnh phn:

iu kin duy tr vng lp, v thn vng lp cha cc thao tc s c lp.

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 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!


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

ngoc, v c gi l tham s. bt hm tr v 1 gi tr no , bn cn s dng t

kha return tnBinMunTrV;. return s kt thc hm ngay lp tc, nn nu c cu

lnh no pha sau, cu lnh s khng c thc thi.

Mt lu khi s dng hm l ng m m qu nhiu x l trong mt hm. 1 hm x

l chui khng cn phi bit y ct chui, o chui, nhn i chui.., m ch cn

thc hin tt 1 chc nng thi. y l mt thi quen lp trnh tt, s gip code n

gin, d hiu v d bo tr qua thi gian.

01

02

03

04

05

06

// Ly v d tr chi dit Rng phn 5 // To hm gy st thng gim mu // Tham s truyn vo: bin Number satThuong // Kt qu tr v: bin Number luongMauHienTai function gaySatThuong(luongMauHienTai, satThuong) { luongMauHienTai = luongMauHienTai - satThuong; return luongMauHienTai; }

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

// s dng hm, bn cn phi gi hm var luongMau = 100; var satThuong = 49; var luongMauConLai = gaySatThuong(luongMau, satThuong); console.log(luongMauConLai);

/* ========================================================= * | HY T TAY CODE TRC KHI KO XUNG XEM CODE MU! | * ========================================================= * TH THCH LEVEL 6 * ----------------- * Vit li tr chi Dit Rng, c s dng hm : * 1. Tnh ton kh nng n n. * 2. Tnh ton lng mu cn li sau khi b st thng. * * ========================================================= * | HY T TAY CODE TRC KHI KO XUNG XEM CODE MU! | * ========================================================= */


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. 01

02

03

04

05

06

07

08

09

10

// C php khai bo 1 i tng var RongGia = { // Khai bo cc thuc tnh name: 'Rng Gi', phanLop: 'Rng', age: 6969, health: 600, strength: 100, agility: 15, intel: 80,

// Khai bo cc phng thc

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

// Khai bo v khi to mng v d var phanlopAnhHung = ['Chin Binh','St Th','Th Sn']; console.log(phanlopAnhHung.length); console.log(phanlopAnhHung[0]); console.log(phanlopAnhHung[1]); console.log(phanlopAnhHung[phanlopAnhHung.length - 1]); // hm console.log() rt hu ch xem ton b phn t trong mng console.log(phanlopAnhHung);

// Mng rng var danhHieu = [];

// Thm phn t mi danhHieu.push('Dng s dit rng'); console.log(danhHieu); phanlopAnhHung.push('Anh Hng'); console.log(phanlopAnhHung.length); console.log(phanlopAnhHung[phanlopAnhHung.length - 1]);

// Truy xut tng phn t trong mng vi vng lp var soPhanTu = phanlopAnhHung.length; for (var i=0; i < soPhanTu; i++) { console.log(phanlopAnhHung[i ]); }

/* ========================================================= * | HY T TAY CODE TRC KHI KO XUNG XEM CODE MU! | * ========================================================= * TH THCH LEVEL 8 * ----------------- * Hy s dng vng lp v hm prompt() yu cu ngi dng * nhp vo cu tr li cho 3 cu hi sau: * 1. Bn c ngi yu cha? * 2. Bn c thch n rau dn khng?

29

30

31

32

33

34

35

36

37

38

39

40

41

42

* 3. Ngi yu bn c thch n rau dn khng? * Sau , lu tt c cu tr li vo 1 mng v xut ngc li * tng cu tr li bng hm alert(). * * ========================================================= * | HY T TAY CODE TRC KHI KO XUNG XEM CODE MU! | * ========================================================= */

Documents

Javascript Cơ Bản