Báo cáo môn project 1 đề tài thuật toán javascript và cấu trúc dữ liệu (javascript algorithms and data structures)

JS có thể phản hồi lại với một sự kiện nào đó như người sử dụng nhấn chuột lên một phần tử của trang HTML hoặc thay đổi một giá trị nào đó trong ô nhập liệu.. Hiển thị dữ liệu bằng JavaS

VIỆN ĐÀO TẠO LIÊN TỤC

-    -

BÁO CÁO MÔN PROJECT 1

Đề tài: Thuật toán JavaScript và Cấu trúc dữ liệu

(JavaScript Algorithms and Data Structures)

Giảng viên hướng dẫn: TS Trần Vĩnh Đức

Sinh viên thực hiện:

Nguyễn Thị Ngọc Mai - 20219144

Hà Nội, năm 2022

MỤC LỤC

CHƯƠNG 1 TỔNG QUAN VỀ JAVASCRIPT 1

1.1 JavaScript là gì ? 1

1.2 JavaScript có thể làm gì? 1

1.3 Cách sử dụng JavaScript 1

1.4 Cách thực thi lệnh JavaScript 2

1.5 Vị trí JavaScript trong trang HTML 3

1.6 Hiển thị dữ liệu bằng JavaScript lên trình duyệt 4

1.7 Ghi chú trong JavaScript 5

CHƯƠNG 2 BIẾN TRONG JAVASCRIPT 5

2.1 Cách khai báo một biến 5

2.2 Khai báo nhiều biến đồng thời 7

2.3 Quy tắc đặt tên biến 7

CHƯƠNG 3 CÁC TOÁN TỬ 8

3.1 Toán tử toán học trong JavaScript 8

3.2 Toán tử gán trong JavaScript 11

3.3 Toán tử quan hệ trong JavaScript 12

3.4 Toán tử logic trong JavaScript 13

CHƯƠNG 4: CÁC KIỂU DỮ LIỆU TRONG JAVASCRIPT 14

4.1 Dữ liệu kiểu string 14

4.2 Dữ liệu kiểu number 15

4.3 Dữ liệu kiểu Boolean 15

4.4 Dữ liệu kiểu object 16

4.5 Dữ liệu kiểu undefined 16

4.6 Dữ liệu kiểu array 16

4.7 Cách xác định kiểu dữ liệu 17

CHƯƠNG 5 HÀM TRONG JAVASCRIPT 17

5.2 Phân loại hàm 18

5.3 Cách khai báo và gọi hàm không có tham số 19

5.4 Cách khai báo và gọi hàm có tham số 19

5.5 Gọi hàm thông qua một sự kiện 21

5.6 Lệnh return 21

CHƯƠNG 6 CÁC LỆNH TRONG JAVASCRIPT 22

6.1 Lệnh điều kiện 22

6.2 Lệnh switch… case 24

6.3 Vòng lặp while và do while 25

6.4 Câu lệnh break và continue 26

CHƯƠNG 7 SỬ DỤNG ĐỐI TƯỢNG TRONG JAVASCRIPT 29

7.1 Đối tượng trong JavaScript 29

7.2 Cách khai báo một đối tượng 30

7.3 Cách truy cập vào thuộc tính của đối tượng 30

7.4 Cách truy cập vào phương thức của đối tượng 31

CHƯƠNG 8 CÁC PHƯƠNG THỨC XỬ LÝ MẢNG TRONG JAVASCRIPT 31

8.1 Chuyển mảng về dạng chuỗi ký tự 31

8.2 Thêm một phần tử mới vào vị trí cuối mảng 32

8.3 Xóa phần tử ở vị trí cuối mảng 32

8.4 Thêm một phần tử mới vào vị trí đầu mảng 32

8.5 Xóa phần tử ở vị trí đầu mảng 33

8.6 Ghép các mảng lại với nhau 33

8.7 Trích xuất một phần của mảng 33

8.8 Xác định số lượng phần tử của mảng 34

CHƯƠNG 9 BIỂU THỨC CHÍNH QUY TRONG JAVASCRIPT 34

9.1 Phương thức match 34

9.2 Biểu thức chính quy 34

CHƯƠNG 10 CÁC LỆNH XỬ LÝ LỖI TRONG JAVASCRIPT 35

10.1 Lệnh try và catch 35 10.2 Lệnh throw 36 10.3 Lệnh finally 36

CHƯƠNG 1 TỔNG QUAN VỀ JAVASCRIPT 1.1 JavaScript là gì ?

JavaScript (viết tắt là JS) là một ngôn ngữ lập trình kịch bản phía máy khách, mã

lệnh được thực thi bởi trình duyệt của người dùng

JavaScript được sử dụng rộng rãi trong việc kết hợp với HTML/CSS để thiết kế web động

1.2 JavaScript có thể làm gì?

JavaScript cung cấp cho designer một công cụ lập trình vì HTML không phải là một ngôn ngữ lập trình, nhưng JavaScript là một ngôn ngữ lập trình với cú pháp rất đơn giản Hầu hết mọi người có thể nhúng các đoạn mã JavaScript vào những trang HTML làm cho nó trở nên sinh động hơn

JS có thể đưa vào trang HTML một đoạn văn bản mới mà trước đó nội dung của trang web này chưa hề có

JS có thể phản hồi lại với một sự kiện nào đó như người sử dụng nhấn chuột lên một phần tử của trang HTML hoặc thay đổi một giá trị nào đó trong ô nhập liệu

JS có thể đọc hoặc thay đổi nội dung của các phần tử trong trang HTML

JS có thể dùng để kiểm tra dữ liệu trước khi trình duyệt gửi dữ liệu đến máy chủ Điều này giúp cho máy chủ không phải xử lý quá nhiều

JS có thể dùng để phát hiện các loại trình duyệt khác nhau để có thể tải những phần thiết kế phù hợp với trình duyệt đó

JS có thể dung để sử dụng tạo các tập tin cookie lưu trữ và truy xuất thông tin trên máy tính của người truy cập website

1.3 Cách sử dụng JavaScript

Để sử dụng JS rất đơn giản, chúng ta chỉ cần đưa các câu lệnh của JS vào trong thẻ

<script> của HTML

Ví dụ: Xuất ra trình duyệt câu “Hello World!”

Ta cũng có thể thêm thẻ của HTML vào JS :

Để tránh trường hợp một số trình duyệt không hỗ trợ JS và có thể gây ra lỗi khi website

có sử dụng JS, ta có thể thêm một đoạn sau khi chú của HTML cho nội dung của JS

1.4 Cách thực thi lệnh JavaScript

JS trong một trang web thực thi lệnh trong 2 trường hợp sau :

TH2 : Thực hiện lệnh khi nhận được một tác động nào đó như nhấn nút, di chuyển chuột hoặc đưa chuột lên một phần tử nào đó của HTML…

Ví dụ :

Trường hợp 1 :

Trường hợp 2 :

1.5 Vị trí JavaScript trong trang HTML

- Đặt trong cặp thẻ <head> của trang web :

- Đặt trong cặp thẻ <body> của trang web :

- Đặt trong tập tin js sau đó nhúng tập tin này vào website Tạo tập tin alert js có nội dung sau :

1.6 Hiển thị dữ liệu bằng JavaScript lên trình duyệt

Để in ra một giá trị nào đó bằng JS ra trình duyệt, ta sử dụng câu lệnh đơn giản sau :

Cú pháp :

Ví dụ :

Ta có thể dùng câu lệnh này để in các giá trị có thể chuỗi, số, thẻ HTML…

1.7 Ghi chú trong JavaScript

Lập trình đoạn mã sẽ không đơn giản là một vài dòng lệnh mà đôi khi có thể lên đến

cả ngàn dòng lệnh trên một trang web nên ta cần ghi chú cho các dòng lệnh, đoạn mã, đoạn lệnh để khi chúng ta hoặc người khác đọc có thể hiểu được đoạn mã đó có ý nghĩa

gì

Có 2 kiểu ghi chú thường được sử dụng trong ngôn ngữ lập trình:

- Dòng ghi chú đơn bắt đầu với //

- Nhiều dòng ghi chú bắt đầu bằng /* và kết thúc với */

CHƯƠNG 2 BIẾN TRONG JAVASCRIPT 2.1 Cách khai báo một biến

2.1.1 Khai báo một biến

Để khai báo một biến (hay còn gọi là tạo một biến), ta sử dụng cú pháp như sau:

var tên biến;

Ví dụ, khai báo một biến có tên là hoten

var hoten;

2.1.2 Khai báo giá trị cho biến

Sau khi khai báo, nếu biến vẫn chưa được gán giá trị thì mặc định nó sẽ có giá trị là undefined

Để gán giá trị cho một biến, ta sử dụng cú pháp như sau:

tên biến = giá trị;

Ví dụ:

Gán giá trị cho biến hoten là Nguyễn Văn A

2.1.3 Cập nhật giá trị của biến

Sau khi một biến đã được gán giá trị, nếu muốn cập nhật cho nó một giá trị mới thì

2.1.4 Khai báo biến và gán giá trị đồng thời

Thay vì phải chia thành hai bước: (1) khai báo biến (2) gán giá trị thì ta có thể gôm chung thành một bước khai báo biến rồi gán giá trị luôn

Ví dụ:

2.2 Khai báo nhiều biến đồng thời

- Ta có thể khai báo nhiều biến một lượt bằng cách dùng dấu phẩy ngăn giữa các tên biến, rồi sau đó gán giá trị cho từng biến

Ví dụ:

- Ta cũng có thể vừa khai báo vừa gán giá trị cho biến Tuy nhiên, không bắt buộc phải gán giá trị cho tất cả các biến cùng một lượt

Ví dụ:

2.3 Quy tắc đặt tên biến

- Tên biến là một tập hợp gồm một hoặc nhiều ký tự

- Tên biến có thể chứa các ký tự trong danh sách bên dưới:

Các chữ cái in hoa A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V,

W, X, Y, Z

Các chữ cái thường a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z Các chữ số 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

- Tên biến không được bắt đầu bằng một chữ số

Một số ví dụ đặt tên biến đúng quy

Thông thường chúng ta sử dụng các toán tử toán học như cộng, trừ, nhận, chia để

xử lý thay đổi giá trị các biến trong JavaScript

Sau đây là bảng danh sách các toán tử trong JavaScript loại toán học hay dùng

+ Phép cộng Nếu là chuỗi thì nó sẽ thực hiện thao tác nối chuỗi,

còn nêu là số thì nó sẽ cộng hai số lại Ví dụ:

- Phép trừ và dùng với number Ví dụ:

* Phép nhân và dùng với number Ví dụ:

/ Phép chia và dùng với number Ví dụ:

% Phép chia lấy phần dư, nghĩa là khi chia hai số lại với nhau và

kết quả nó sẽ lấy phần dư của phép toán Ví dụ:

Trường hợp chia dư 0:

Trường hợp chia dư khác 0:

++ Phép tăng giá trị hiện tại lên 1 đơn vị Phép này có hai cách sử

dụng đó là đặt nó trước biến và đặt nó sau biến

Trường hợp đứng trước biến thì nó sẽ tăng trước khi lấy giá trị,

Trường hợp đứng sau biến thì nó sẽ lấy giá trị rồi giảm xuống, ví dụ:

3.2 Toán tử gán trong JavaScript

Tương đương với x = x + y Ví dụ:

-= x-=y Tương đương với x = x - y Ví dụ:

*= x*=y Tương đương với x = x * y Ví dụ:

/= x/=y Tương đương với x = x / y Ví dụ:

%= x%=y Tương đương với x = x % y Ví dụ:

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

>= a >= b Trả về TRUE nếu a lớn hơn hoặc bằng b và FALSE

nếu a nhỏ hơn b

<= a <= b Trả về TRUE nếu a nhỏ hơn hoặc bằng b và FALSE

nếu a lớn hơn b

== a == b Trả về TRUE nếu a bằng b và FALSE nếu a khác b

!= a != b Trả về TRUE nếu a khác b và FALSE nếu a bằng b

Ví dụ:

3.4 Toán tử logic 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

Bảng sau đây mô tả các toán tử luận lý trong JavaScript

Toán

tử

Ý nghĩa

&& AND: trả về kết quả là TRUE khi cả hai toán hạng đều TRUE

|| OR: trả về kết quả là TRUE khi cả hai hoặc một trong hai toán hàng

là TRUE

! NOT: Chuyển đổi giá trị của toán hạng từ TRUE sang FALSE hoặc

từ FALSE sang TRUE

Ví dụ:

CHƯƠNG 4: CÁC KIỂU DỮ LIỆU TRONG JAVASCRIPT

Trong JavaScript, các kiểu dữ liệu được chia thành những loại cơ bản như sau:

4.1 Dữ liệu kiểu string

Trong JavaScript, các dữ liệu thuộc kiểu string (hay còn được gọi là "chuỗi") là một

tập hợp gồm các ký tự, chúng được viết bên trong cặp dấu nháy kép hoặc cặp dấu nháy đơn

Ví dụ:

o Giá trị của biến a là một chuỗi được viết bên trong cặp dấu nháy kép

o Giá trị của biến b là một chuỗi được viết bên trong cặp dấu nháy đơn

4.2 Dữ liệu kiểu number

Trong JavaScript, các dữ liệu thuộc kiểu number (hay còn được gọi là "số") là một tập hợp của các con số (0 - 9) không chứa dấu khoảng trắng và có thể chứa dấu trừ (-)

nằm ở đầu để đại diện cho số âm

Nếu một số được đặt bên trong gặp dấu nháy kép hoặc cặp dấu nháy đơn thì nó sẽ bị chuyển sang kiểu dữ liệu string

Ví dụ:

4.3 Dữ liệu kiểu Boolean

Trong JavaScript, các dữ liệu thuộc kiểu boolean chỉ có thể nhận một trong hai giá

4.4 Dữ liệu kiểu object

Trong JavaScript, các dữ liệu thuộc kiểu object (hay còn được gọi là "đối

tượng") là một tập hợp gồm những cái tên và mỗi cái tên sẽ chứa đựng một giá trị dữ

liệu

Ví dụ:

4.5 Dữ liệu kiểu undefined

Trong JavaScript, khi một biến được khai báo mà không gán giá trị thì biến đó sẽ

có giá trị là undefined và kiểu dữ liệu cũng là undefined

Ví dụ:

4.6 Dữ liệu kiểu array

Trong JavaScript, array còn được gọi là mảng, nó là một trường hợp đặc biệt của đối tượng Mảng là một loại biến đặc biệt có thể lưu trữ nhiều giá trị đồng thời, mỗi giá trị được gọi là một phần tử mảng

Ví dụ:

- Mỗi hàm sẽ có một cái tên và hàm chỉ thực thi khi nó được gọi đến tên

Ví dụ: Hàm gồm ba câu lệnh với chức năng là hiển thị một câu giới thiệu về bản

thân

- Một hàm có thể được gọi nhiều lần hay nói cách khác là không giới hạn số lần gọi hàm

Ví dụ:

5.2 Phân loại hàm

- Hàm được chia làm hai loại cơ bản: hàm không có tham số và hàm có tham số

- Hàm không có tham số là hàm mà kết quả thực thi của nó luôn luôn không thay đổi

Ví dụ:

o Hàm GioiThieuBanThan bên dưới là một hàm không có tham số

o Kết quả thực thi của nó luôn là hiển thị dòng chữ "Tôi là Nguyễn Văn A sinh

năm 1998"

- Hàm có tham số là loại hàm mà khi gọi hàm ta phải truyền giá trị vào cho nó Tùy

Ví dụ:

5.3 Cách khai báo và gọi hàm không có tham số

- Để khai báo (khởi tạo) một hàm thuộc thoại không có tham số, ta sử dụng cú pháp

5.4 Cách khai báo và gọi hàm có tham số

- Để khai báo một hàm thuộc thoại có tham số, ta sử dụng cú pháp như sau:

function tên hàm(tham số thứ nhất, tham số thứ hai, tham số thứ ba, ) {

//Danh sách các câu lệnh của hàm

- Để tránh tình trạng tham số bị nhận giá trị undefined thì trong lúc khai báo hàm ta

có thể gán giá trị mặc định cho các tham số, khi đó nếu lúc gọi hàm ta không truyền giá trị cho tham số thì tham số sẽ sử dụng giá trị mặc định được gán lúc khai báo

Ví dụ:

5.5 Gọi hàm thông qua một sự kiện

- Ta có thể thiết lập việc một hàm nào đó sẽ được thực thi khi một sự kiện nào đó

xảy ra (Ví dụ như: khi người dùng click chuột vào một phần tử, dí chuột vào một phần

tử, ) bằng cách đặt câu lệnh gọi hàm vào bên trong thuộc tính sự kiện của phần tử

Ví dụ:

5.6 Lệnh return

- Lệnh return dùng để trả về cho hàm một giá trị

Ví dụ:

CHƯƠNG 6 CÁC LỆNH TRONG JAVASCRIPT 6.1 Lệnh điều kiện

- Lệnh if else dùng để kiểm tra một điều kiện, nếu điều kiện đó là đúng thì một đoạn mã xác định sẽ được thực thi, còn nếu điều kiện đó sai thì một đoạn mã xác định khác sẽ được thực thi

- Cú pháp:

Ví dụ:

6.1.3 Câu lệnh if… else if… else

- Lệnh if else if else là một dạng nâng cao của lệnh if else

- Lệnh if else if else dùng để mở rộng phạm vi kiểm tra các điều kiện khác nếu

tất cả những điều kiện phía trên là sai

- Cú pháp :

Ví dụ :

6.2 Lệnh switch… case

Trong JavaScript, lệnh switch case được sử dụng với cú pháp như sau:

Ví dụ 1: Hiển thị tên của loại nước uống có giá trị bằng đúng với số tiền mà bạn

đang có

{

//Các câu lệnh thực hiện trong khi lặp }

Ví dụ 1: Dùng vòng lặp while để hiển thị dãy số tăng dần từ một đến chín

Ví dụ 2: Dùng vòng lặp while để hiển thị dãy số giảm dần từ tám xuống hai

6.3.2 Vòng lặp do while

- Tương tự như vòng lặp while, vòng lặp do while dùng để lặp lại việc thực thi một đoạn mã nếu điều kiện mà ta đưa ra vẫn còn đúng

- Tuy nhiên, đối với vòng lặp do while thì ở lần đầu tiên đoạn mã sẽ được thực thi

luôn mà không cần phải kiểm tra điều kiện

- Cú pháp :

do{

//Các câu lệnh thực hiện trong khi lặp

} while(điều kiện);

Ví dụ : Dùng vòng lặp do while để hiển thị dãy số tăng dần từ một đến chín

6.4 Câu lệnh break và continue

Câu lệnh break dùng để kết thúc việc thực hiện của vòng lặp for hay while Chương

trình được tiếp tục thực hiện tại câu lệnh ngay sau chỗ kết thúc của vòng lặp

Cú pháp:

break;

Ví dụ 1: Sử dụng lệnh break trong vòng lặp while

Ví dụ 2: Sử dụng lệnh break trong vòng lặp for

Ví dụ 3: Sử dụng lệnh break trong vòng lặp do while

- Lệnh break cũng dùng để ngăn chặn việc thực thi những câu lệnh nằm sau trường

hợp so sánh trùng khớp trong lệnh switch case

Ví dụ:

- Ngoài ra, lệnh break còn được dùng để thoát khỏi một khối lệnh Tuy nhiên, khối lệnh đó phải được

gắn một nhản, và khi dùng lệnh break thì phải gọi kèm theo nhản của khối lệnh đó

Ví dụ:

6.4.2 Câu lệnh continue

- Lệnh continue thường được đặt vào bên trong các vòng lặp như: for, while, do while

- Khi lệnh continue được thực thi, những câu lệnh còn lại của lần lặp hiện tại sẽ bị bỏ

qua

Ví dụ 1: Sử dụng lệnh continue trong vòng lặp for

Ví dụ 3: Sử dụng lệnh continue trong vòng lặp do while

CHƯƠNG 7 SỬ DỤNG ĐỐI TƯỢNG TRONG JAVASCRIPT

7.1 Đối tượng trong JavaScript

- Trong JavaScript, đối tượng là một loại biến đặc biệt, nó có thể lưu trữ nhiều giá trị đồng thời

- Giá trị được lưu trong tên không chỉ đơn thuần là chuỗi, số, mà nó còn có thể là một hàm

- Những cái tên lưu trữ các giá trị đơn thuần như chuỗi, số, thì được gọi là thuộc tính

- Những cái tên lưu trữ giá trị là một hàm thì được gọi là phương thức

Ví dụ: Câu lệnh dưới đây dùng để tạo một đối tượng có tên là SinhVien, đối tương

SinhVien có hai thuộc tính và một phương thức :

Thuộc tính name có giá trị là chuỗi Nguyễn Văn A

Thuộc tính year có giá trị là số 1993

Phương thức intro có giá trị là hàm function(){alert("Tên: " + this.name)}