giáo trình javascript nghề tin học ứng dụng cao đẳng

NàI DUNG MÔN HàC Bài 1: Mở đầu Māc tiêu: Học xong ch°¡ng này, ng°ời học có khÁ năng: - Trình bày đ°ợc các khái niám về javascript - Khai báo và sử dụng biến đúng cú pháp - Sử dụng đ°ợc c

åi giãi thißu

UỶ BAN NHÂN DÂN THÀNH PHà Hâ CHÍ MINH

TR¯äNG CAO ĐÀNG BÁCH KHOA NAM SÀI GÒN

GIÁO TRÌNH MÔN H àC/MÔ ĐUN: JAVASCRIPT NGÀNH/ NGH À: TIN HàC ĀNG DĀNG TRÌNH Đà: CAO ĐÀNG

Ban hành kèm theo Quy ết định số: 459/QĐ-NSG, ngày 31 tháng 08 năm 2022

c ủa Hiệu trưởng Trường Cao Đẳng Bách Khoa Nam Sài Gòn

Tp.H ồ Chí Minh, năm 2022

äI GIâI THIÞU

Javascript là mộn học thuộc khái kiến thức chuyên ngành dành cho đái t°ợng học sinh – sinh viên ngành/ nghề Tin học ứng dụng Nhằm phục vụ cho viác giÁng d¿y và học tÁp môn javascript, nhóm tác giÁ chúng tôi biên so¿n giáo trình này dựa trên khung ch°¡ng trình chung môn tin học của Bộ Lao động Th°¡ng binh và Xã hội Nội dung giáo trình gãm 6 bài:

- Bài 1: Mở đ¿u

- Bài 2: Cấu trúc điều khiển

- Bài 3: Chuỗi, mÁng

- Bài 4: Sự kián trong javascript

- Bài 5: DOM trong javascript

- Bài 6: BOM trong javascript

Trong quá trình biên so¿n chúng tôi đã kết hợp kinh nghiám giÁng d¿y trong nhiều năm của nhóm tác giÁ với mong muán có thể giúp cho học sinh – sinh viên dß dàng nắm bắt đ°ợc nội dung của môn học Mặc dù, rất cá gắng trong quá trình biên so¿n, nh°ng chắc chắn không thể tránh khßi những thiếu sót, vì vÁy, nhóm tác giÁ chúng tôi rất mong nhÁn đ°ợc ý kiến đóng góp của b¿n đọc để giáo trình ngày một hoàn thián h¡n

Tp.Hã Chí Minh, ngày 31 tháng 8 năm 2022

Tham gia biên so¿n

1 Chủ biên: ThS Lê Thị Thùy Trang

2 &&&&

3 &&&&

M ĀC LĀC

Bài 1: Mở đ¿u 8

1.1 Các khái niám 8

1.1.1 Javascript là gì? 8

1.1.2 Javascript Framework là gì? 8

1.1.3 ¯u điểm và nh°ợc điểm của Javascript 9

1.1.4 Cách viết ch°¡ng trình javascript đ¿u tiên 9

1.1.5 Alert - confirm và prompt trong JS 10

1.1.6 Cách dùng Inspect Element 12

1.1.7 Hàm console.log trong Javascript 12

1.1.8 setTimeout và setInterval trong JS 13

1.2 Khai báo biến 14

1.2.1 Các cách khai báo biến trong javascript 15

1.2.2 Cách đặt tên cho biến trong Javascript 15

1.2.3 Cách gán giá trị cho biến trong javascript 16

1.2.4 Kiểu giá trị của biến trong Javascript 16

1.2.5 In giá trị của biến JS ra trình duyát 16

1.2.6 Các phép toán th°ờng dùng trên biến trong Javascript 16

1.3 Các toán tử 17

1.3.1 Toán tử toán học trong javascript 17

1.3.2 Toán tử gán trong javascript 19

1.3.3 Toán tử quan há trong Javascript 20

1.3.4 Toán tử luÁn lý trong Javascript 21

1.3.5 Độ °u tiên các toán tử trong Javascript 21

1.3.6 L°u ý với toán tử so sánh bằng Javascript 22

BÀI TÀP 22

Bài 2: Cấu trúc điều khiển 23

2.1 Cấu trúc if 23

2.1.1 Lánh if trong javascript 23

2.1.2 Lánh if else trong javascript 23

2.1.3 Kết hợp nhiều lánh if else trong javascript 24

2.1.4 Lánh if else lãng nhau trong javascript 25

2.2 Cấu trúc switch & case 25

2.2.1 Lánh switch case trong Javascript 25

2.2.2 Ví dụ lánh switch case trong Javascript 27

2.3 Cấu trúc vòng lặp 28

2.3.1 Vòng lặp for 28

2.3.2 Vòng lặp while/do while trong JS 28

2.3.3 Break/Continue trong Javascript 30

BÀI TÀP 31

Bài 3: Chuỗi, mÁng 33

3.1 Chuỗi string trong Javascript? 33

3.1.1 Cách nái chuỗi string trong Javascript 33

3.1.2 Xử lý string trên nhiều dòng trong Javascript 33

3.1.3 Ép chuỗi string trong javascript 33

3.1.4 Một sá hàm xử lý string trong Javascript 34

3.2 MÁng trong Javascript? 35

3.2.1 Khai báo mÁng trong javascript 35

3.2.2 Truy xuất các ph¿n tử trong mÁng 36

3.2.3 In mÁng ra trình duyát và console 36

3.2.4 Sử dụng vòng lặp để duyát mÁng trong javascript 36

3.3 Number trong Javascript 37

3.4 Date trong Javascript 37

3.5 Xử lý ngày tháng trong Javascript 38

BÀI TÀP 39

Bài 4: Sự kián trong javascript 40

4.2 Return true/false trong Javascript 42

4.3 Sự kián onload trong Javascript 43

4.4 addEventListener trong Javascript 45

4.5 RemoveEventListener Javascript 47

4.6 Sự kián click trong Javascript 48

4.7 Sự kián hover trong Javascript 50

4.8 Sự kián onmouseout trong js 50

4.9 Sự kián ondbclick trong Javascript 52

4.10 Sự kián mousemove Javascript 52

4.11 Sự kián Submit trong Javascript 54

BÀI TÀP 56

Bài 5: DOM trong javascript 57

5.1 DOM Element trong javascript 57

5.2 DOM HTML trong Javascript 58

5.3 DOM CSS trong Javascript 60

5.4 DOM Nodes trong Javascript 62

BÀI TÀP 65

Bài 6: BOM trong javascript 66

6.1 Window trong Javascript 66

6.2 Location trong Javascript 69

6.3 History trong Javascript 72

6.4 Cookie trong Javascript 72

6.5 Navigator trong Javascript 74

6.6 Screen trong Javascript 75

BÀI TÀP 75

TÀI LIàU THAM KHÀO 76

GIÁO TRÌNH MÔN H àC Tên môn h ác: JavaScript

- NhÁn biết đ°ợc Javascript Framework

- Nắm đ°ợc kiến thức c¡ bÁn về ngôn ngữ javascript

- Thực hián đ°ợc t°¡ng tác c¡ sở dữ liáu

2 Về kỹ năng:

- VÁn dụng đ°ợc kiến thức c¡ bÁn của ngôn ngữ Javascript

- Kết hợp đ°ợc html, css và ngôn ngữ javascript trong thiết kế website

- Sử dụng thành th¿o các đái t°ợng điều khiển để hoàn thành giao dián website

3 Về năng lực tự chủ và trách nhiám:

- Rèn luyán lòng yêu nghề, t° thế tác phong công nghiáp, tính kiên trì, sáng t¿o trong công viác

NàI DUNG MÔN HàC Bài 1: Mở đầu

Māc tiêu:

Học xong ch°¡ng này, ng°ời học có khÁ năng:

- Trình bày đ°ợc các khái niám về javascript

- Khai báo và sử dụng biến đúng cú pháp

- Sử dụng đ°ợc các toán tử trong javascript

Nái dung:

1.1 Các khái nißm

1.1.1 Javascript là gì?

Javascript là một ngôn ngữ lÁp trình kịch bÁn dựa vào đái t°ợng phát triển có sẵn hoặc

tự định nghĩa Javascript đ°ợc sử dụng rộng rãi trong các ứng dụng Website Javascript đ°ợc

hỗ trợ h¿u nh° trên tất cÁ các trình duyát nh° Firefox, Chrome, trên máy tính l¿n đián tho¿i

Nhiám vụ của Javascript là xử lý những đái t°ợng HTML trên trình duyát Nó có thể can thiáp với các hành động nh° thêm / xóa / sửa các thuộc tính CSS và các thẻ HTML một cách dß dàng Hay nói cách khác, Javascript là một ngôn ngữ lÁp trình trên trình duyát ở phía client Tuy nhiên, hián nay với sự xuất hián của NodeJS đã giúp cho Javascript có thể làm viác ở backend

1.1.2 Javascript Framework là gì?

Javascript Framework là một bộ th° vián đ°ợc xây dựng dựa vào ngôn ngữ lÁp trình Javascript Mỗi framework th°ờng đ°ợc t¿o ra để phục vụ cho một lĩnh vực nào đó Ví dụ với Angular và React thì chuyên xử lý frontend, NodeJS thì chuyên xử lý backend, jQuery là một th° vián rất m¿nh khi xử lý DOM HTML và CSS

Sức m¿nh của Javascript là không thể chái cãi, bằng chứng là hián nay có rất nhiều libraries và framework đ°ợc viết bằng Javascript ra đời nh°:

- Angular: Một th° vián dùng để xây dựng ứng dụng Single Page

- NodeJS: Một th° vián đ°ợc phát triển phía Server dùng để xây dựng ứng dụng realtime

- Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile

- ExtJS: Một Framework dùng xây dựng ứng dụng quÁn lý (Web Applications)

- jQuery: Một th° vián rất m¿nh về hiểu ứng

- ReactJS: Một th° vián viết ứng dụng mobie

- Và còn nhiều th° vián khác

1.1 3 ¯u điểm và nh°ÿc điểm cÿa Javascript

¯u điểm:

- Javascript giúp thao tác với ng°ời dùng ở phía client và tách biát giữa các client Ví dụ

2 ng°ời đang truy cÁp vào 2 trình duyát khác nhau thì cÁ hai đều có những phiên xử lý Javascript khác nhau, không Ánh h°ởng l¿n nhau

- Javascript có thể ho¿t động trên nhiều nền tÁng khác nhau, từ Windows, macOS cho đến các há điều hành trên mobile

- Javascript là một ngôn ngữ dß tiếp cÁn, b¿n sẽ dß dàng học nó mà không c¿n phÁi cài đặt quá nhiều ph¿n mềm

Nh°ợc điểm:

Vì là một ngôn ngữ rất dß dàng bị soi code nên dß bị khai thác Hacker có thể nhÁp một đo¿n code bất kì vào khung console của trình duyát, lúc này trình duyát sẽ hiểu rằng đo¿n code đó là chính tháng, nên hacker có thể gửi nhửng request lên server một cách dß dàng

1.1 4 Cách vi¿t ch°¡ng trình javascript đầu tiên

Tất cÁ những đo¿n mã Javascript đều phÁi đặt trong cặp thẻ mở <script> và thẻ đóng </script>

<script language="javascript">

alert("Hello World!");

</script>

Có ba cách đặt th°ờng đ°ợc sử dụng sau đây:

Cách 1: Internal - viết trong file html hián t¿i:

Thông th°ờng chúng ta sẽ viết những đo¿n mã javascript trên ph¿n head, tuy nhiên đó không phÁi là điều kián bắt buộc, nghĩa là b¿n có thể đặt ở đâu tùy thích mißn là những đo¿n

mã đó phÁi đ°ợc bao l¿i bằng thẻ script

Cách 2: External - viết ra một file js khác rãi import vào:

Có thể viết những đo¿n mã javascript ở một file có ph¿n mở rộng là js, sau đó dùng thẻ script để import vào (giáng CSS)

<script language="javascript" src="demo.js"></script>

Cách 3: Inline - viết trực tiếp trong thẻ HTML:

Inline nghĩa là b¿n sẽ viết những đo¿n mã Javascript trực tiếp trong thẻ HTML luôn Nh° ví dụ d°ới đây là mình đang viết d¿ng inline vì đo¿n mã alert(1) đ°ợc đặt trong sự kián onclick của thẻ button

<input type="button" onclick="alert(1)" value="Click Me"/>

Viết ch°¡ng trình Hello World!

B°ớc 1: t¿o file index.html

// Lấy element có id=clickme lưu vào biến button

var button = document.getElementById('clickme');

1.1.5 Alert - confirm và prompt trong JS

Hàm alert() trong javascript

Hàm alert() có nhiám vụ in một thông báo popup, nó có một tham sá truyền vào và tham sá này chính là nội dung ta muán thông báo với ng°ời dùng

Hàm confirm() trong javascript:

Hàm confirm() cũng sẽ xuất hián một thông báo popup nh°ng nó có thêm hai sự lựa chọn là Yes và No, nếu ng°ời dùng chọn Yes thì nó trÁ về TRUE và ng°ợc l¿i nếu chọn NO thì nó sẽ trÁ về FALSE Nó cũng có một tham sá truyền vào và tham sá này chính là nội dung thông báo

<html>

<body>

<h1>The Window Object</h1>

<h2>The confirm() Method</h2>

<p>Click the button to display a confirm box.</p>

<button onclick="myFunction()">Try it</button>

Hàm prompt() trong javascript:

Hàm prompt() dùng để lấy thông tin từ ng°ời dùng, gãm có hai tham sá truyền vào là nội dung thông báo và giá trị ban đ¿u Nếu ng°ời dùng không nhÁp vào thì giá trị nó sẽ trÁ về

Muán xem cấu trúc trang web:

- Click chuột phÁi

- Chọn Inspect

Các b°ớc sao chép văn bÁn từ một trang web:

B°ớc 1: Nhấp chuột phÁi vào bất kỳ đâu trên trang web để mở danh sách thÁ xuáng và chọn tùy chọn cuái cùng, <Kiểm tra=

B°ớc 2: Một thanh bên sẽ bÁt lên ở bên phÁi màn hình của b¿n hoặc trong một sá tr°ờng hợp là ở d°ới cùng Sử dụng công cụ chọn ph¿n tử ở góc trên bên trái của trang web

B°ớc 3: Bấm vào văn bÁn b¿n muán sao chép trên trang web

B°ớc 4: Nhấp vào văn bÁn b¿n muán sao chép sẽ h°ớng b¿n tới dòng mã trong cửa sổ kiểm tra ph¿n tử n¡i b¿n có thể dß dàng sao chép nội dung của trang web qua cửa sổ Inspect Element

1.1.7 Hàm console.log trong Javascript

Console.log là một hàm của Javascript, đ°ợc sử dụng để debug / kiểm tra / xem giá trị của một biến trong Javascript Công dụng của console.log là show ra giá trị của một biến, dù biến đó thuộc kiểu dữ lliáu gì đi nữa thì v¿n đ°ợc hiển thị ở ô console trong hộp tho¿i Inspect Element

Cú pháp console.log() trong javascript:

Lánh console.log() có cú pháp là console.log(value), trong đó value là một biến hoặc một giá trị muán in ra

Ví dụ 1: console.log() một biến bình thường

var website = 'Javascript';

1.1.8 setTimeout và setInterval trong JS

Hàm setTimeout() trong Javascript:

Hàm setTimeout() dùng để thiết lÁp một khoÁng thời gian nào đó sẽ thực hián một nhiám vụ nào đó và nó chỉ thực hián đúng một l¿n

Cú pháp: setTimeout(function, time)

Trong đó:

- function: là nội dung c¿n thực hián, đây là một hàm

- time: là khoÁng thời gian bao nhiêu (tính bằng mili giây) thì function đó sẽ thực hián

Ví dụ: Sau 3 giây thì xuất hián câu chào lên màn hình

setTimeout(function(){

alert("Chào mừng bạn đến với freetuts.net");

}, 3000);

Hàm clearTimeout() trong Javascript:

GiÁ sử b¿n xây dựng chức năng sau 3 giây thì sẽ xuất hián thông báo, tuy nhiên sau 2 giây ch°¡ng trình muán hủy bß thì phÁi làm thế nào? Lúc này b¿n phÁi sử dụng hàm clearTimeout()

Tham sá truyền vào hàm clearTimeout() là đái t°ợng setTimeout() nên lúc này ban phÁi đặt hàm setTimeout() vào một biến cụ thể

var do_alert = setTimeout(function(){

alert("Chào mừng bạn đến với freetuts.net");

<input type="button" onclick="clearAlert()" value="Clear" />

Hàm setInterval() trong Javascript:

Hàm setInterval() có cú pháp và chức năng giáng nh° hàm setTimeout(), tuy nhiên với hàm setInterval() thì sá l¿n thực hián lã mãi mãi

Ví dụ: Cứ sau 3 giây thì xuất hián câu chào một l¿n

Hàm clearInterval() trong Javascript:

T°¡ng tự nh° hàm clearTimeout(), hàm clearInterval() sẽ xóa đi nhiám vụ mà ta đã thiết lÁp trong hàm setInterval(), và ta cũng phÁi đặt setInterval() trong một biến thì mới clear đ°ợc

Ví dụ: Sử dụng hàm setInterval() để xuất câu chào lên màn hình và sá l¿n xuất hián chỉ 1 l¿n duy nhất

var interval_obj = setInterval(function(){

alert("Chào mừng bạn đến với freetuts.net");

clearInterval(interval_obj);

}, 3000);

Trong ví dụ này nội dung thực hián là xuất hián câu chào và ngay lÁp tức xóa nhiám

vụ của interval luôn nên nó chỉ thực hián 1 l¿n

1.2 Khai báo bi¿n

1.2.1 Các cách khai báo bi¿n trong javascript

Cách 1: Khai báo biến trong JS bằng từ khóa var

Để khai báo một biến ta sử dụng từ khóa var tenbien

var username;

Cách 2: Khai báo biến trong JS bằng từ khóa let

Sử dụng từ khóa let tenbien

let username;

Biến khai báo bằng từ khoá let chỉ có ph¿m vi trong khái khai báo mà thôi Vì vÁy nó sẽ tái

°u trong tr°ờng hợp b¿n c¿n khai báo một biến chỉ sử dụng t¿m thời trong một ph¿m vi nhất định

Ví dụ này thì biến domain chỉ có ph¿m vi trong lánh if mà thôi

Cách 3: Khai báo biến trong JS bằng từ khóa const

Sử dụng từ khóa const tenbien

const username = 'giá trß';

Const là một hằng sá, vì vÁy khi khai báo biến const thì ta phÁi gán giá trị cho nó luôn, sau này cũng không thể thay đổi giá trị cho biến

1.2.2 Cách đặt tên cho bi¿n trong Javascript

Khi đặt tên cho biến phÁi tuân thủ theo những quy tắc d°ới đây:

- Tên biến phÁi là các chữ không dấu viết hoa hoặc viết th°ờng, các chữ sá từ 0-9

và dấu g¿ch d°ới (_)

- Tên biến bắt đ¿u phÁi là chữ hoặc dấu g¿ch d°ới (_), nếu bắt đ¿u bằng sá là sai

- Tên biến có thể đặt dài hay ngắn tùy vào lÁp trình viên

Ngoài cách khai báo từng biến đ¡n lẻ nh° trên thì b¿n có thể gộp nó vào một dòng duy nhất nh° sau:

var username, _username, username, username90;

1.2.3 Cách gán giá trß cho bi¿n trong javascript

Để gán giá trị cho biến ta dùng dấu bằng (=) để gán vế phÁi vào vế trái

Có hai cách gán thông dụng đó là vừa khai báo biến vừa gán giá trị và khai báo rãi mới gán giá trị:

var username = 'thehalfheart';

var username;

username = 'thehalfheart';

1.2.4 Kiểu giá trß cÿa bi¿n trong Javascript

Trong Javascript rất h¿n chế về kiểu dữ liáu nh°ng bù l¿i c¡ chế xử lý kiểu dữ liáu của

nó rất linh ho¿t, giúp lÁp trình viên có thể chuyển đổi một cách dß dàng Đó là vì mọi kiểu dữ liáu đều có thể quy về đái t°ợng và mỗi đái t°ợng ta có thể bổ sung các ph°¡ng thức xử lý riêng

Giáng nh° php, để xác định biến có kiểu dữ liáu là gì thì ta dựa vào giá trị mà nó đang

có Có nghĩa khi b¿n gán một con sá không có dấu chấm động thì nó sẽ là kiểu INT, nếu gán một chuỗi thì là kiểu String

// Biến website đag kiểu String

var website = 'thehalfehart';

// Biến website chuyển sang kiểu INT

1.2.5 In giá trß cÿa bi¿n JS ra trình duyßt

Để in giá trị của biến hoặc một chuỗi nào đó ra trình duyát thì ta sử dụng hàm document.write(value)

Khi làm viác với biến thì chúng ta th°ờng sử dụng các phép toán nh°:

1.3.1 Toán tử toán hác trong javascript

Các toán tử Javascript sá học th°ờng dùng trong javascript

1.3.2 Toán tử gán trong javascript

Các toán tử Javascript gán th°ờng dùng trong javascript

1.3.3 Toán tử quan hß trong Javascript

Toán tử quan há dùng để thể hián mái quan há giữa hai toán tử trong toán học, còn trong lÁp trình thì ta dùng toán tử quan há để nói đến mái quan há giữa hai biến hoặc hai giá trị nào đó Kết quÁ của toán tử quan há sẽ trÁ về một trong hai giá trị TRUE hoặc FALSE

1.3.4 Toán tử lu¿n lý trong Javascript

Toán tử luân lý dùng để kết hợp hay phủ định biểu thức có chứa các toán tử quan há, kết quÁ của sự kết hợp sẽ có giá trị là TRUE hoặc FALSE

1.3.5 Đá °u tiên các toán tử trong Javascript

Khi tính giá trị của biểu thức thì phÁi tuân theo thứ tự °u tiên của các toán tử trong biểu thức đó Ví dụ biểu thức có các phép toán nhân chia cộng trừ thì ta phÁi áp dụng quy tắc tính phép nhân và chia tr°ớc, sau đó mới tính đến phép cộng và trừ

1.3.6 L°u ý vãi toán tử so sánh b¿ng Javascript

Khác với các ngôn ngữ cao cấp khác nh° C# thì khi khai báo biến b¿n không c¿n phÁi khai báo kiểu dữ liáu cho biến mà nó sẽ dựa vào giá trị mà b¿n truyền cho biến, vì vÁy b¿n có thể chuyển đổi giá trị cho biến với nhiều kiểu dữ liáu khác nhau

var a = 12; // a đang ở kiểu number

a = '12'; // a bây giờ là kiểu string

Về nguyên tắc thì cÁ hai toán tử đều có chung một chức năng là so sánh giá trị của hai biến, tuy nhiên với toán tử == thì chỉ so sánh giá trị mà không so sánh kiểu dữ liáu, còn toán tử === thì có so sánh luôn kiểu dữ liáu

// FALSE vì mặc dù giá trị bằng nhau nhưng

// kiểu dữ liệu của a là number, của b là string

document.write(a === b);

BÀI T¾P

1 Dùng Type of để kiểm tra kiểu dữ liáu

2 Dùng constructor để kiểm tra kiểu dữ liáu

3 Ép kiểu INT sang kiểu String

4 Ép kiểu Date sang String

5 Ép kiểu String sang Number

6 Ép kiểu Date sang Number

7 Ép sang kiểu Boolean

8 Chia lấy d° trong Javascript

9 Chia lấy ph¿n nguyên trong Javascript

Bài 2: Cấu trúc điÁu khiển

Māc tiêu:

Học xong ch°¡ng này, ng°ời học có khÁ năng:

- Trình bày đ°ợc cú pháp các cấu trúc điều khiển

- Sử dụng các cấu trúc điều khiển đúng cú pháp để giÁi quyết các bài toán cụ thể

2.1.3 K¿t hÿp nhiÁu lßnh if else trong javascript

2.1.4 Lßnh if else lồng nhau trong javascript

Cũng giáng nh° các ngôn ngữ lÁp trình khác, ta có thể lãng các câu lánh if l¿i với nhau, nghĩa là bên trong câu lánh if sẽ chứa câu lánh if khác

2.2 Cấu trúc switch & case

2.2.1 Lßnh switch case trong Javascript

Lánh switch case có công dụng giáng nh° lánh if else đó là đều dùng để rẻ nhánh ch°¡ng trình, ứng với mỗi nhánh sẽ có một điều kián cụ thể và điều kián đó phÁi sử dụng toán

tử so sánh bằng, còn đái với lánh if else thì b¿n có thể truyền vào một mánh đề bất kì và sử dụng nhiều toán tử khác nhau

Quy trình ch¿y nh° sau:

- Nếu tham sá variable có giá trị là value_1 thì những đo¿n code nằm bên trong case 1

sẽ đ°ợc thực hián, ng°ợc l¿i sẽ nhÁy xuáng case tiếp theo

- Lúc này nếu variable có giá trị là value_2 thì những đo¿n code trong case 2 sẽ đ°ợc thực hián, ng°ợc l¿i kiểm tra tiếp xem còn case nào không

- NhÁn thấy không còn case nào nữa nên nó sẽ kiểm tra có lánh default không? Vì có lánh default nên nó sẽ ch¿y đo¿n code trong lánh default đó rãi thoát khßi switch case

Ví dụ: Viết ch°¡ng trình cho ng°ời dùng nhÁp vào một sá, kiểm tra sá đó là sá chẵn hay sá

lẻ

var number = parseInt(prompt("Nhập số cần kiểm tra"));

var mod = (number % 2);

document.write("Ký tự bạn nhập không phải số");

}

2.2.2 Ví dā lßnh switch case trong Javascript

Đề bài: Viết ch°¡ng trình cho ng°ời dùng nhÁp một màu, kiểm tra màu đó có phÁi màu đß (red) hay màu vàng (yellow) hay không? Nếu không phÁi thì thông báo cho ng°ời dùng biết nhÁp sai màu

Tr°ờng hợp không có default: tr°ờng hợp này nếu b¿n nhÁp một màu khác với màu đß (red) và vàng (yellow) thì sẽ không có thông báo gì

var color = prompt("Nhập màu cần kiểm tra");

sử dụng lánh break để thoát khßi lánh switch nên sẽ ch¿y thẳng xuáng case phía d°ới luôn

mà không c¿n kiểm tra điều kián

var color = prompt("Nhập màu cần kiểm tra");

var color = prompt("Nhập màu cần kiểm tra");

docment.write("Màu bạn nhập không có trong hệ thống"); }

2.3.2 Vòng lặp while/do while trong JS

Vòng lặp while trong javascript:

Ví dụ: Lặp với điều kián phức t¿p

// Biến lưu giá trị người dùng nhập vào

var value = null;

// Trong khi giá trị bé hơn 1 hoặc giá trị lớn hơn 10

// thì chạy thân vòng lặp

while (value < 1 || value > 10){

value = prompt("Nhập vào số từ 1 -> 10");

}

// Sau khi nhập đúng thì in ra màn hình

alert("Số bạn vừa nhập là " + value);

Vòng lặp do while trong javascript

Trong đó condition là điều kián để dừng vòng lặp

Ví dụ: Chứng minh rằng vòng lặp do while luôn luôn lặp ít nhất là 1 l¿n

// Biến lưu giá trị người dùng nhập vào

var value = null;

alert("Số bạn vừa nhập là " + value);

2.3.3 Break/Continue trong Javascript

Lệnh break trong Javascript:

Lánh break có tác dụng dừng vòng lặp cho dù điều kián của vòng lặp v¿n đang đúng, hay nói cách khác là nó thoát khßi vòng lặp một cách đột xuất và không quan tâm đến điều kián lặp

Lánh break có thể sử dụng với mọi vòng lặp nh° vòng lặp for, while và do while, each,

Ví dụ 1: Vòng lặp for lặp từ 1 tới 10 và bị dừng t¿i vòng lặp thứ 5

for (var i = 1; i <= 10; i++)

Lệnh continue trong Javascript:

Khác hoàn toàn với lánh break, lánh continue trong javascript có tác dụng bß qua một b°ớc lặp nào đó, nghĩa là lúc gặp lánh continue thì tất cÁ những đo¿n code nằm bên d°ới sẽ không đ°ợc thực hián mà nó sẽ nhÁy qua vòng lặp mới luôn

Ví dụ 1: Vòng lặp for bß qua đo¿n code in ra giá trị 5

for (var i = 1; i <= 10; i++)

1 Kiểm tra sá nguyên d°¡ng javascript

2 Kiểm tra sá nguyên âm javascript

3. Tính tổng hai sá bằng Javascript

4 Viết hàm giÁi ph°¡ng trình bÁc nhất 1 Án javascript

5 T¿o ứng dụng giÁi ph°¡ng trình bÁc 1 bằng javascript

6 Kiểm tra sá nguyên tá Javascript

7 Bài tÁp t¿o hàm trong Javascript

Bài 3: Chußi, m¿ng

Māc tiêu:

Học xong ch°¡ng này, ng°ời học có khÁ năng:

- Khai báo và sử dụng đ°ợc một sá hàm thông dụng của chuỗi trong javascript

- Khai báo và sử dụng đ°ợc một sá hàm thông dụng của mÁng trong javascript

Nái dāng:

3 1 Chußi string trong Javascript?

3 1.1 Cách nßi chußi string trong Javascript

Chuỗi là một đo¿n text có thể có một hoặc nhiều ký tự và thông th°ờng chúng ta sẽ l°u trữ nó vào một biến, biến này ta sẽ gọi là biến có kiểu dữ liáu là String (chuỗi) Tất cÁ các chuỗi đều phÁi đ°ợc bao quanh bằng cặp dấu nháy đ¡n ' hoặc nháy kép "

Để nái chuỗi string trong JS thì chúng ta sử dụng dấu + để gép hai chuỗi hoặc biến kiểu String Object l¿i với nhau

var message = "chào mừng bạn" + "đến với ngôn ngữ lập trình

Javascript";

3 1.2 Xử lý string trên nhiÁu dòng trong Javascript

Khi muán Enter xuáng hàng một chuỗi trong Javascript thì bắt buộc phÁi sử dụng dấu + để nái chuỗi, nếu không sẽ bị lỗi cú pháp

Ví dụ: Dùng dấu + để nái chuỗi

Nếu muán viết gọn h¡n thì sử dụng dấu \ để báo cho trình duyát biết là có xuáng hàng

Ví dụ: Dùng ký tự \ để khai báo chuỗi trên nhiều dòng

var message = "Chào mừng bạn đến với \

ngôn ngữ lập trình Javascript";

Hoặc cũng có thể sử dụng dấu `nội dung chuỗi` để khai báo

var message = `Chào mừng bạn đến với

ngôn ngữ lập trình Javascript`;

3 1.3 Ép chußi string trong javascript

Nếu muán ép một giá trị nào đó sang kiểu chuỗi thì có thể sử dụng cú pháp string.toString()

// Trước khi chuyển đổi

var number = 12;

alert(typeof number);

// Sau khi chuyển đổi

number = number.toString();

alert(typeof number);

Từ khóa typeof vars sẽ trÁ về kiểu dữ liáu của biến vars

Ngoài cách trên b¿n có thể sử dụng đái t°ợng String để t¿o hoặc ép chuỗi, và vì là đái t°ợng nên nó phÁi có từ khóa new đặt đằng tr°ớc

Ví dụ: Sử dụng String object hoặc String function

// String object

var message = new String("chào mừng bạn đến với JS");

// String function

var message = String("chào mừng bạn đến với JS");

Lúc này dù truyền vào là kiểu gì đi nữa thì kết quÁ v¿n trÁ về kiểu string Tuy nhiên khuyến khích không nên sử dụng cách này bởi vì ch°¡ng trình sẽ ch¿y chÁm h¡n

3 1.4 Mát sß hàm xử lý string trong Javascript

Tìm kiếm chuỗi string trong JS

Hàm indexOf()

Để tìm kiếm chuỗi con thì ta sử dụng hàm String.indexOf(str), trong đó str là chuỗi con và String là chuỗi cha Hàm này sẽ trÁ kết quÁ về kết quÁ là vị trí xuât hián đ¿u tiên của chuỗi (bắt đ¿u là vị trí 0), nếu không tìm thấy chuỗi con thì nó sẽ trÁ về -1

var string = "Chào mừng bạn đến với js";

document.write("Vị trí xuất hiện chuỗi js là: " +

string.indexOf("js"));

Hàm lastIndexOf()

Tr°ờng hợp nếu chuỗi con xuất hián nhiều l¿n trong chuỗi cha thì kết quÁ cũng trÁ về

vị trí xuất hián của chuỗi con đ¿u tiên VÁy làm thế nào để lấy vị trí của chuỗi con cuái cùng trong chuỗi cha? Ta sẽ sử dụng hàm String.lastIndexOf(str), hàm này sẽ trÁ về vị trí xuất hián của chuỗi con cuái cùng và trÁ về -1 nếu không tìm thấy

var string = "Website freetuts.net - học lập trình miễn phí tại js";

document.write("Vị trí xuất hiện chuỗi jslà: " +

string.lastIndexOf("js"));

Hàm search()

Ngoài hai hàm trên b¿n có thể sử dụng hàm string.search(str) để tìm kiếm, tác dụng của nó cũng giáng nh° hàm string.indexOf(str)

var string = "Chào mừng bạn đến với js";

document.write("Vị trí xuất hiện chuỗi js là: " +

string.search("js"));

Cắt chuỗi string trong JS

- slice(start, end)

Tìm kiếm và lặp chuỗi trong JS

Để tìm kiếm và lặp một chuỗi con nào đó thì b¿n sử dụng hàm replace(str_find, str_replace), trong đó str_find là chuỗi c¿n tìm và str_replace là chuỗi sẽ đ°ợc thay thế chuỗi str_find

var string = "Welcome to js";

document.write(string.replace("js", "javascript"));

3 2 M¿ng trong Javascript?

3 2.1 Khai báo m¿ng trong javascript

MÁng là một lo¿i dữ liáu d¿ng tÁp hợp nhiều ph¿n tử, trong đó mỗi ph¿n tử sẽ đ°ợc đánh dấu vị trí bằng chỉ mục Nếu mÁng có 10 ph¿n tử thì sá thứ tự các ph¿n tử sẽ là từ [0 -> 9]

Chúng ta th°ờng sử dụng mÁng để l°u trữ dữ liáu d¿ng danh sách Ví dụ để l°u trữ danh sách tên sinh viên trong một lớp nào đó thì có thể sử dụng mÁng, mỗi ph¿n tử sẽ là tên của một thành viên trong lớp

Khai báo mảng trong javascript:

Khai báo vãi từ khóa new Array()

Cú pháp: Có thể t¿o mÁng rỗng hoặc gán giá trị ngay lúc khởi t¿o

var name_array = new Array();

// Hoặc

var name_array = new Array(1,2,3);

Khai báo vãi cặp dấu ngoặc vuông []

var name_array = [];

// Hoặc

var name_array = [1,2,3];

3 2.2 Truy xuất các phần tử trong m¿ng

Để truy xuất đến một ph¿n tử trong mÁng thì chúng ta phÁi biết đ°ợc vị trí c¿n lấy Ví

dụ mÁng có 10 ph¿n tử, và b¿n muán lấy ph¿n tử thứ 5 thì chỉ mục của nó sẽ là (5-1 = 4), t¿i

3 2.4 Sử dāng vòng lặp để duyßt m¿ng trong javascript

Để đếm tổng sá ph¿n tử của một mÁng chúng ta sẽ dùng thuộc tính length

var t = new Array(1,2,3);

alert(t.length); // 3 phần tử

MÁng có 3 ph¿n tử thì tức là chỉ mục bắt đ¿u từ 0 -> 2, vì vÁy thì sẽ duyát các sá từ 0

- 2 cho vòng lặp

Duyệt mảng với vòng lặp for

Để lặp mÁng với vòng lặp for thì chúng ta phÁi dùng thuộc tính length nh° trên để đếm tổng

sá ph¿n tử Sau đó, ở mỗi vòng lặp chúng ta sử dụng cú pháp truy xuất đến ph¿n tử của mÁng

để xử lý

var name_array = [1,2,3];

for (var i = 0; i < name_array.length; i++){

3.3 Number trong Javascript

Trong Javascript có một đái t°ợng th°ờng đ°ợc dùng để xử lý kiểu dữ liáu number,

đó là đái t°ợng Number Đái t°ợng này có hai d¿ng, đó là sá có dấu chấm động và sá không

Các hàm xử lý number trong Javascript

Nhóm toàn cục:

- Number(type) trÁ về một number và định d¿ng c¡ sá type = (nhị phân, thÁp phân, thÁp lục phân)

- parseFloat() chuyển sang một sá float

- parseInt() chuyển sang một sá integer

Nhóm cục bộ:

- toString() chuyển sang kiểu string

- toFixed(n) chuyển sang sá có n sá lẻ ở đằng sau

- toPrecision(n) chuyển sang sá có chiều dài là n

- valueOf() lấy giá trị của biến hoặc một giá trị nào đó

3.4 Date trong Javascript

Date là một object (đái t°ợng) giúp lÁp trình viên lấy đ°ợc thời gian hián t¿i ở máy khách client, qua đó sẽ xử lý những chức năng c¿n đến thông sá thời gian này

Ví dụ, trang web b¿n c¿n thiết lÁp thời gian cứ 1 phút là tự động reload trang thì lúc này có thể sử dụng đái t°ợng Date để tính toán

Cú pháp khởi t¿o của date trong JS nh° sau:

// Cách 1

var timeObj = new Date();

var timeObj = new Date(value);

var timeObj = new Date(dateString);

// Cách 2

var timeObj = new Date(year, monthIndex);

var timeObj = new Date(year, monthIndex, day);

var timeObj = new Date(year, monthIndex, day, hours);

var timeObj = new Date(year, monthIndex, day, hours, minutes); var timeObj = new Date(year, monthIndex, day, hours, minutes,

seconds);

var timeObj = new Date(year, monthIndex, day, hours, minutes,

seconds, milliseconds);

Cách thứ nhất: Truyền vào tham sá là chuỗi hoặc một giá trị

- Nếu không truyền tham sá nào vào thì nó sẽ trÁ về ngày giờ hián t¿i, tức là ngay thời điểm ch¿y lánh

- dateString là một chuỗi định d¿ng ngày tháng c¿n lấy

- value cũng có thể là một dãy sá đ°ợc chuyển từ ngày giờ c¿n lấy sang miliseconds Cách thứ hai: Nó có tái đa là 7 tham sá truyền vào:

- year là năm c¿n lấy

- monthIndex là tháng c¿n lấy

- day là ngày trong tháng c¿n lấy

- hours là giờ c¿n lấy

- minuites là phút c¿n lấy

- seconds là giây c¿n lấy

3 5 Xử lý ngày tháng trong Javascript

Các hàm nhóm Date Get trong Javascript

Trong Javascript tổng cộng có 10 hàm thiết lÁp thời gian thông dụng:

- getDate() lấy ngày (1 - 31)

- getDay() lấy ngày trong tu¿n (0-6)

- getFullYear() lấy năm đ¿y đủ (YYYY)

- getYear() lấy năm 2 sá cuái (YY)

- getHours() lấy sá giờ (0 - 23)

- getMiliSeconds() lấy sá mili giây (0 - 999)

getMinutes() lấy sá phút (0 - 59)