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)

ĐẠI HỌC BÁCH KHOA HÀ NỘI VIỆN ĐÀO TẠO LIÊN TỤC -    - BÁO CÁO MƠN PROJECT Đề tài: Thuật tốn JavaScript Cấu trúc 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 TỔNG QUAN VỀ JAVASCRIPT 1.1 JavaScript ? 1.2 JavaScript làm gì? 1.3 Cách sử dụng JavaScript 1.4 Cách thực thi lệnh JavaScript 1.5 Vị trí JavaScript trang HTML 1.6 Hiển thị liệu JavaScript lên trình duyệt 1.7 Ghi JavaScript CHƯƠNG BIẾN TRONG JAVASCRIPT 2.1 Cách khai báo biến 2.2 Khai báo nhiều biến đồng thời 2.3 Quy tắc đặt tên biến CHƯƠNG CÁC TOÁN TỬ 3.1 Toán tử toán học JavaScript 3.2 Toán tử gán JavaScript 11 3.3 Toán tử quan hệ JavaScript 12 3.4 Toán tử logic 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 liệu 17 CHƯƠNG HÀM TRONG JAVASCRIPT 17 5.1 Hàm gì? 17 5.2 Phân loại hàm 18 5.3 Cách khai báo gọi hàm khơng có tham số 19 5.4 Cách khai báo gọi hàm có tham số 19 5.5 Gọi hàm thông qua kiện 21 5.6 Lệnh return 21 CHƯƠNG 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 while 25 6.4 Câu lệnh break continue 26 CHƯƠNG SỬ DỤNG ĐỐI TƯỢNG TRONG JAVASCRIPT 29 7.1 Đối tượng JavaScript 29 7.2 Cách khai báo đối tượng 30 7.3 Cách truy cập vào thuộc tính đối tượng 30 7.4 Cách truy cập vào phương thức đối tượng 31 CHƯƠNG CÁC PHƯƠNG THỨC XỬ LÝ MẢNG TRONG JAVASCRIPT 31 8.1 Chuyển mảng dạng chuỗi ký tự 31 8.2 Thêm phần tử 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 phần tử 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 mảng lại với 33 8.7 Trích xuất phần mảng 33 8.8 Xác định số lượng phần tử mảng 34 CHƯƠNG BIỂU THỨC CHÍNH QUY TRONG JAVASCRIPT 34 9.1 Phương thức match 34 9.2 Biểu thức quy 34 CHƯƠNG 10 CÁC LỆNH XỬ LÝ LỖI TRONG JAVASCRIPT 35 10.1 Lệnh try catch 35 10.2 Lệnh throw 36 10.3 Lệnh finally 36 CHƯƠNG TỔNG QUAN VỀ JAVASCRIPT 1.1 JavaScript ? JavaScript (viết tắt JS) ngơn ngữ lập trình kịch phía máy khách, mã lệnh thực thi trình duyệt người dùng JavaScript sử dụng rộng rãi việc kết hợp với HTML/CSS để thiết kế web động 1.2 JavaScript làm gì? JavaScript cung cấp cho designer cơng cụ lập trình HTML khơng phải ngơn ngữ lập trình, JavaScript ngơn ngữ lập trình với cú pháp đơn giản Hầu hết người nhúng đoạn mã JavaScript vào trang HTML làm cho trở nên sinh động JS đưa vào trang HTML đoạn văn mà trước nội dung trang web chưa có JS phản hồi lại với kiện người sử dụng nhấn chuột lên phần tử trang HTML thay đổi giá trị nhập liệu JS đọc thay đổi nội dung phần tử trang HTML JS dùng để kiểm tra liệu trước trình duyệt gửi liệu đến máy chủ Điều giúp cho máy chủ xử lý nhiều JS dùng để phát loại trình duyệt khác để tải phần thiết kế phù hợp với trình duyệt JS dung để sử dụng tạo tập tin cookie lưu trữ truy xuất thơng tin máy tính người truy cập website 1.3 Cách sử dụng JavaScript Để sử dụng JS đơn giản, cần đưa câu lệnh JS vào thẻ HTML Ví dụ: Xuất trình duyệt câu “Hello World!” Ta thêm thẻ HTML vào JS : Để tránh trường hợp số trình duyệt khơng hỗ trợ JS gây lỗi website có sử dụng JS, ta thêm đoạn sau HTML cho nội dung JS 1.4 Cách thực thi lệnh JavaScript JS trang web thực thi lệnh trường hợp sau : TH1 : Thực lệnh trang web tải trình duyệt người sử dụng TH2 : Thực lệnh nhận tác động nhấn nút, di chuyển chuột đưa chuột lên phần tử HTML… Ví dụ : Trường hợp : Trường hợp : 1.5 Vị trí JavaScript trang HTML - Đặt cặp thẻ trang web : - Đặt cặp thẻ trang web : - Đặt tập tin js sau nhúng tập tin vào website Tạo tập tin alert js có nội dung sau : 1.6 Hiển thị liệu JavaScript lên trình duyệt Để in giá trị JS trình duyệt, ta sử dụng câu lệnh đơn giản sau : Cú pháp : document.write(""); Ví dụ : Ta dùng câu lệnh để in giá trị chuỗi, số, thẻ HTML… 1.7 Ghi JavaScript Lập trình đoạn mã khơng đơn giản vài dịng lệnh mà đơi lên đến ngàn dòng lệnh trang web nên ta cần ghi cho dòng lệnh, đoạn mã, đoạn lệnh để người khác đọc hiểu đoạn mã có ý nghĩa Có kiểu ghi thường sử dụng ngơn ngữ lập trình: - Dịng ghi đơn bắt đầu với // - Nhiều dòng ghi bắt đầu /* kết thúc với */ CHƯƠNG BIẾN TRONG JAVASCRIPT 2.1 Cách khai báo biến 2.1.1 Khai báo biến Để khai báo biến (hay gọi tạo biến), ta sử dụng cú pháp sau: var tên biến; Ví dụ, khai báo biến có tên hoten var hoten; 2.1.2 Khai báo giá trị cho biến Sau khai báo, biến chưa gán giá trị mặc định có giá trị undefined Để gán giá trị cho biến, ta sử dụng cú pháp sau: tên biến = giá trị; Ví dụ: Gán giá trị cho biến hoten Nguyễn Văn A 2.1.3 Cập nhật giá trị biến Sau biến gán giá trị, muốn cập nhật cho giá trị ta sử dụng cú pháp sau: tên biến = giá trị mới; Ví dụ: Cập nhật lại giá trị biến hoten thành Nguyễn Văn B - Lệnh if else dùng để kiểm tra điều kiện, điều kiện đoạn mã xác định thực thi, cịn điều kiện sai đoạn mã xác định khá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 dạng nâng cao lệnh if else - Lệnh if else if else dùng để mở rộng phạm vi kiểm tra điều kiện khác tất điều kiện phía sai - Cú pháp : 23 Ví dụ : 6.2 Lệnh switch… case Trong JavaScript, lệnh switch case sử dụng với cú pháp sau: Ví dụ 1: Hiển thị tên loại nước uống có giá trị với số tiền mà bạn có 24 Ví dụ : 6.3 Vòng lặp while while 6.3.1 Vòng lặp while - Vòng lặp while dùng để lặp lại việc thực thi đoạn mã điều kiện mà ta đưa - Cú pháp: while () 25 { //Các câu lệnh thực lặp } Ví dụ 1: Dùng vịng lặp while để hiển thị dãy số tăng dần 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 while - Tương tự vòng lặp while, vòng lặp while dùng để lặp lại việc thực thi đoạn mã điều kiện mà ta đưa - Tuy nhiên, vòng lặp while lần đoạn mã thực thi 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 lặp } while(điều kiện); Ví dụ : Dùng vòng lặp while để hiển thị dãy số tăng dần từ đến chín 6.4 Câu lệnh break continue 6.4.1 Câu lệnh break 26 Câu lệnh break dùng để kết thúc việc thực vịng lặp for hay while Chương trình tiếp tục thực câu lệnh sau chỗ kết thúc vịng lặp Cú pháp: break; Ví dụ 1: Sử dụng lệnh break vịng lặp while Ví dụ 2: Sử dụng lệnh break vịng lặp for Ví dụ 3: Sử dụng lệnh break vòng lặp while - Lệnh break dùng để ngăn chặn việc thực thi câu lệnh nằm sau trường hợp so sánh trùng khớp lệnh switch case Ví dụ: 27 - Ngồi ra, lệnh break cịn dùng để khỏi khối lệnh Tuy nhiên, khối lệnh phải gắn nhản, dùng lệnh break phải gọi kèm theo nhản khối lệnh Ví dụ: 6.4.2 Câu lệnh continue - Lệnh continue thường đặt vào bên vòng lặp như: for, while, while - Khi lệnh continue thực thi, câu lệnh lại lần lặp bị bỏ qua Ví dụ 1: Sử dụng lệnh continue vịng lặp for Ví dụ 2: Sử dụng lệnh continue vịng lặp while 28 Ví dụ 3: Sử dụng lệnh continue vòng lặp while CHƯƠNG SỬ DỤNG ĐỐI TƯỢNG TRONG JAVASCRIPT 7.1 Đối tượng JavaScript - Trong JavaScript, đối tượng loại biến đặc biệt, lưu trữ nhiều giá trị đồng thời - Giá trị lưu tên không đơn chuỗi, số, mà cịn hàm - Những tên lưu trữ giá trị đơn chuỗi, số, gọi thuộc tính - Những tên lưu trữ giá trị hàm gọi phương thức Ví dụ: Câu lệnh dùng để tạo đối tượng có tên SinhVien, đối tương SinhVien có hai thuộc tính phương thức : Thuộc tính name có giá trị chuỗi Nguyễn Văn A Thuộc tính year có giá trị số 1993 Phương thức intro có giá trị hàm function(){alert("Tên: " + this.name)} 29 7.2 Cách khai báo đối tượng Cú pháp : var tên đối tượng = { tên thuộc tính thứ nhất:giá trị, tên thuộc tính thứ hai:giá trị, tên thuộc tính thứ ba:giá trị, tên phương thức thứ nhất:function(){ //Danh sách câu lệnh phương thức }, tên phương thức thứ hai:function(){ //Danh sách câu lệnh phương thức }, tên phương thức thứ ba:function(){ //Danh sách câu lệnh phương thức } } Ví dụ: 7.3 Cách truy cập vào thuộc tính đối tượng - Việc truy cập vào thuộc tính đối tượng trả giá trị thuộc tính - Để truy cập vào thuộc tính đối tượng, ta sử dụng cú pháp sau: tên đối tượng.tên thuộc tính Ví dụ : Để lấy họ tên sinh viên dùng cú pháp SinhVien.name 30 7.4 Cách truy cập vào phương thức đối tượng - Việc truy cập vào phương thức đối tượng giúp câu lệnh phương thức thực thi - Để truy cập vào phương thức đối tượng, ta sử dụng cú pháp sau: tên đối tượng.tên phương thức() Ví dụ : Để thực thi câu lệnh phương thức intro ta dùng cú pháp SinhVien.intro() CHƯƠNG CÁC PHƯƠNG THỨC XỬ LÝ MẢNG TRONG JAVASCRIPT 8.1 Chuyển mảng dạng chuỗi ký tự - Phương thức toString() dùng để chuyển mảng dạng chuỗi ký tự Cú pháp: array.toString(); Ví dụ: Giá trị biến text : HTC,Nokia,Samsung,LG,Apple - Ngoài ra, ta dùng phương thức join() để chuyển mảng dạng chuỗi ký tự - Tuy nhiên, phương thức join() ta xác định thêm ký tự đặt phần tử mảng chuỗi trả 31 Cú pháp : array.join(chuỗi ký tự ngăn cách phần tử mảng chuỗi trả về) ; Ví dụ: Giá trị biến text : HTC -Nokia -Samsung -LG -Apple 8.2 Thêm phần tử vào vị trí cuối mảng - Phương thức push() dùng để thêm phần tử vào vị trí cuối mảng Cú pháp: array.push(giá trị phần tử thêm vào cuối mảng); Ví dụ: Thêm phần tử có giá trị chuỗi Lenovo vào cuối mảng mobile 8.3 Xóa phần tử vị trí cuối mảng - Phương thức pop() dùng để xóa phần tử nằm vị trí cuối mảng - Cú pháp: array.pop(); Ví dụ: Xóa phần tử nằm vị trí cuối mảng mobile 8.4 Thêm phần tử vào vị trí đầu mảng - Phương thức unshift() dùng để thêm phần tử vào vị trí đầu mảng - Cú pháp: array.unshift(giá trị phần tử thêm vào đầu mảng); Ví dụ: Thêm phần tử có giá trị chuỗi Lenovo vào đầu mảng mobile 32 8.5 Xóa phần tử vị trí đầu mảng - Phương thức shift() dùng để xóa phần tử nằm vị trí đầu mảng - Cú pháp: array.shift() ; Ví dụ : Xóa phần tử nằm vị trí mảng mobile 8.6 Ghép mảng lại với - Phương thức concat() dùng để ghép mảng lại với trả mảng - Cú pháp: var tên mảng = array1.concat(array2, array3, , arrayN); Ví dụ: Kết quả: Honda,Yamaha,Suzuki,Hà Nội,Hải Phịng,Nguyễn Văn A,1998,Samsung,iPhone 8.7 Trích xuất phần mảng - Phương thức slice() dùng để trích xuất phần mảng ban đầu trả mảng - Cú pháp: var tên mảng = array.slice(start, end); Trong đó: "start" số phần tử bắt đầu trích xuất "end" số phần tử kết thúc việc trích xuất (mảng trả khơng bao gồm phần tử này) 33 Ví dụ: Khi mảng abc là: Nokia,Apple,LG,Honda 8.8 Xác định số lượng phần tử mảng Thuộc tính length dùng để trả số lượng phần tử mảng Ví dụ: Xác định số lượng phần tử mảng mobile CHƯƠNG BIỂU THỨC CHÍNH QUY TRONG JAVASCRIPT 9.1 Phương thức match - Phương thức match() dùng để trả ký tự (hoặc chuỗi ký tự) trùng khớp với ký tự (hoặc chuỗi ký tự) mà bạn muốn tìm kiếm bên chuỗi Ví dụ: Tuy nhiên, có hai vấn đề lớn việc tìm kiếm ký tự chuỗi phương thức match(): o Thứ nhất: Phương thức match() phân biệt trường hợp chữ in hoa chữ thường o Thứ hai: Phương thức match() trả kết tìm thấy Do vậy, để giải hai vấn đề trên, ta cần phải sử dụng đến biểu thức quy 9.2 Biểu thức quy - Biểu thức quy (Regular Expression) dùng để xây dựng nên mẫu tìm kiếm chuỗi - Khi bạn muốn tìm thứ bên chuỗi biểu thức quy mơ tả thứ mà bạn muốn tìm - Biểu thức quy có cú pháp sau: 34 /ký tự chuỗi ký tự muốn tìm/bổ nghĩa - Trong đó, "bổ nghĩa" có hai loại phổ biến: o i: không phân biệt chữ in hoa hay chữ thường ký tự chuỗi ký tự mà bạn muốn tìm o g: tìm tất trường hợp trùng khớp Ví dụ 1: Tìm chữ fOx (khơng phân biệt trường hợp chữ in hoa hay chữ thường) bên chuỗi text Ví dụ 2: Tìm tất chữ chuỗi text Ví dụ 3: Tìm tất chữ dO chuỗi text không phân biệt chữ in hoa hay chữ in thường CHƯƠNG 10 CÁC LỆNH XỬ LÝ LỖI TRONG JAVASCRIPT 10.1 Lệnh try catch - Lệnh try dùng để kiểm tra (thực thi) đoạn mã, đoạn mã có chứa câu lệnh bị lỗi câu lệnh nằm phía sau câu lệnh bị lỗi không thực thi Tuy nhiên, câu lệnh nằm ngồi lệnh try thực thi bình thường - Lệnh try cần phải sử dụng kèm với lệnh catch lệnh finally - Lệnh catch dùng để xác định đoạn mã đoạn mã thực thi đoạn mã bên lệnh try có chứa câu lệnh bị lỗi Ví dụ: 35 10.2 Lệnh throw - Lệnh throw thường đặt bên lệnh try - Lệnh throw có chức ném lỗi Ví dụ: 10.3 Lệnh finally - Lệnh finally thường đặt phía sau lệnh try try … catch - Lệnh finally dùng để thực thi đoạn mã mặc định 36 Ví dụ: 37 ... 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 ... CÁC TOÁN TỬ 3 .1 Toán tử toán học JavaScript 3.2 Toán tử gán JavaScript 11 3.3 Toán tử quan hệ JavaScript 12 3.4 Toán tử logic JavaScript 13 CHƯƠNG... QUAN VỀ JAVASCRIPT 1. 1 JavaScript ? 1. 2 JavaScript làm gì? 1. 3 Cách sử dụng JavaScript 1. 4 Cách thực thi lệnh JavaScript 1. 5 Vị trí JavaScript