Tự học lập trình Javascript

Tự học lập trình Javascript

LỜI NÓI ĐẦU

Chào các bạn, đây là lần đầu tiên mình viết một chuyên đề về một ngôn ngữ lập trình Do đó không thể không tồn tại một số sai sót mong được sự đóp góp nhiệt tình của các bạn

Theo xu hướng hiện nay, web là một ứng dụng ngày càng được nhiều người sử dụng cùng với sự phát triển không ngừng của internet Để phát triển được một website năng động về nội dung lẫn hình thức thì đều trước hết chúng ta phải nắm được một số vấn đề cơ bản và những ngôn ngữ cũng như các công cụ giúp chúng ta có thể cho ra đời những trang web hoàn hảo

Javascript là một ngôn ngữ lập trình tương đối nhẹ, đơn giản nhưng nó lại là cánh tay đắc lực của coder cũng như designer Sau đây là nội dung quyển sách, mọi góp ý xin gởi về tungtung@gkiss.net hoặc tlqtung34@student.ctu.edu.vn Y!M: trantung8111

Chúc các bạn luôn thành công và học tốt

MỤC LỤC

  

Trang

1.1 JAVASCRIPT LÀ GÌ? 4

1.2 JAVASCRIPT CÓ THỂ LÀM GÌ? 4

1.3 SỬ DUNG JAVASCRIPT NHƯ THẾ NÀO? 4

1.4 JAVASCRIPT THỰC THI LỆNH KHI NÀO? 5

1.5 VỊ TRÍ JAVASCRIPT TRONG TRANG HTML? 6

1.6 HIỂN THỊ DỮ LIỆU BẰNG JAVASCRIPT LÊN TRÌNH DUYỆT 7

1.7 GHI CHÚ TRONG JAVASCRIPT 7

CHƯƠNG 2: BIẾN TRONG JAVASCRIPT 8 2.1 KHAI BÁO BIẾN 8

2.2 CÁC QUI TẮC VỀ BIẾN 8

CHƯƠNG 3: CÁC TOÁN TỬ 9 3.1 HỆ THỐNG PHÉP TÍNH TRONG JAVASCRIPT 9

3.2 TOÁN TỬ GÁN TRONG JAVASCRIPT 9

3.3 NỐI CÁC CHUỖI KÝ TỰ 10

3.4 PHÉP CỘNG TRONG CHUỖI VÀ SỐ 10

3.5 TOÁN TỬ SO SÁNH 10

3.6 TOÁN TỬ LOGIC 11

3.7 TOÁN TỬ ĐIỀU KIỆN 11

CHƯƠNG 4: CÁC PHÁT BIỂU 12 4.1 CÂU LỆNH IF… ELSE 12

4.2 CÂU LỆNH SWITCH…CASE 13

4.3 VÒNG LẶP FOR 14

4.4 VÒNG LẶP WHILE 15

4.5 VÒNG LẶP DO…WHILE 15

4.6 VÒNG LẶP FOR…IN 16

4.7 CÂU LỆNH BREAK VA CONTINUE 16

CHƯƠNG 5: CỬA SỔ THÔNG BÁO 17 5.1 HỘP THOẠI CẢNH BÁO 17

5.2 HỘP THOẠI XÁC NHẬN 17

5.3 HỘP THOẠI NHẬP LIỆU 18

CHƯƠNG 6: HÀM (FUNCTION) TRONG JAVASCRIPT 19 6.1 HÀM KHÔNG THAM SỐ 19

6.2 HÀM CÓ THAM SỐ 20

6.3 HÀM CÓ TRẢ VỀ GIÁ TRỊ SAU KHI THỰC HIỆN LỆNH 20

6.4 GỌI HÀM TRONG MỘT HÀM KHÁC 20

CHƯƠNG 7: SỰ KIỆN TRONG JAVASCRIPT 21 7.1 SỰ KIỆN LÀ GÌ ? 21

7.2 SỰ KIỆN VỚI FORM 22

7.3 SỰ KIỆN VỚI HÌNH ẢNH 22

7.4 SỰ KIỆN VỚI IMAGE MAP 22

7.5 SỰ KIỆN VỚI LINK 22

7.6 SỰ KIỆN VỚI WINDOW 22

CHƯƠNG 8: MẢNG TRONG JAVASCRIPT 22 8.1 MẢNG CƠ BẢN 22

8.2 NỐI MẢNG (CONCAT) 23

8.3 NỐI CÁC PHẦN TỬ TRONG MẢNG (JOIN) 23

8.4 XÓA MỘT PHẦN TỬ Ở CUỐI MẢNG (POP) 24

8.5 THÊM MỘT PHẦN TỬ VÀO CUỒI MẢNG (PUSH) 24

8.6 ĐẢO NGƯỢC MỘT MẢNG (REVERSE) 24

8.7 LOẠI BỎ MỘT PHẦN TỬ Ở ĐẦU MẢNG (SHIFT) 24

8.8 TẠO MẢNG MỚI TỪ MỘT MẢNG CÓ SẲN (SLICE) 24

8.9 SẮP XẾP MẢNG (SORT) 25

8.10 THÊM VÀ XÓA CÁC PHẦN TỬ CỦA MẢNG (SPLICE) 25

8.11 CHUYỂN MỘT MẢNG THÀNH CHUỖI (TOSTRING) 25

8.12 THEM PHẦN TỬ VÀO ĐẦU MẢNG (UNSHIFT) 25

CHƯƠNG 9: ĐỐI TƯỢNG MATH VÀ THIẾT LẬP THỜI GIAN CHẠY 26 9.1 ĐỐI TƯỢNG MATH 26

9.2 THIẾT LẬP THỜI GIAN CHẠY 27

CHƯƠNG 1: LÀM QUEN VỚI JAVASCRIPT 1.1 JAVASCRIPT LÀ GÌ?

JavaScript được thiết kế để tạo ra các tương tác vào các trang HTML

JavaScript là một ngôn ngữ kịch bản (scripting language)

Một ngôn ngữ kịch bản là một ngôn ngữ lập trình nhẹ

JavaScript thường được nhúng trực tiếp vào các trang HTML

JavaScript là một ngôn ngữ thông dịch nghĩa là script thực hiện mà không cần sự biên dịch

JavaScript thì hoàn toàn miễn phí

1.2 JAVASCRIPT CÓ THỂ LÀM GÌ?

- JavaScript cung cấp cho những designer một công cụ lập trình vì HTML là không phải là một ngôn ngữ lập, 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 ứng 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ể dùng để 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 SỬ DUNG JAVASCRIPT NHƯ THẾ NÀO?

Để 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”

Để 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ủa chúng ta

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

1.4 JAVASCRIPT THỰC THI LỆNH KHI NÀO?

JS trong một trang web thực thi theo 2 cách sau:

TH1: Thực hiện lệnh ngay khi trang web được tải về trình duyệt của người sử dụng

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 …

alert("This alert box was called with the onload event"); }

alert("This alert box was called with the onload event"); }

1.5 VỊ TRÍ JAVASCRIPT TRONG TRANG HTML?

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

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 chúng ta chỉ dụng câu lệnh đơn giản sau

Chúng 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

Khi chúng ta lập trình đoạn mã sẽ không đơn giản là một vài dòng mà đôi khi có thể lên đến cả ngàn dòng lệnh trên một trang nên chúng ta cần ghi chú cho các dòng lệnh, đoạn mã 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 dấu //

CHƯƠNG 2: BIẾN TRONG JAVASCRIPT 2.1 KHAI BÁO BIẾN

Biến được dùng để lưu trữ những thông tin trong quá trình xử lý một vấn đề nào đó Như chúng ta đã học tại các trường phổ thông thì:

• z dùng để lưu trữ tổng giá trị của 2 biến x và y

Với JS cũng vậy biến dùng để lưu trữ một giá trị nào đó có thể là một chuỗi, một đối tượng, một con

số, một mảng, một phép toán nào đó Để khai báo một biến trong JavaScript chúng ta chỉ cần đặt một câu lệnh var trước tên của biến

var <tên biến>;

Chúng ta có thể khai báo trước biến và không cần đưa giá trị vào biến đó

Cách đặt tên biến nên sử dụng trong lập trình

• Đặt tên biến có đầy đủ ý nghĩa với nội dung biến sẽ chứa

• Chữ cái đầu tên trong cụm từ tạo tên biến nên là chữ thường và các chữ cái đầu tiên trong các từ còn

Toán tử là một trong những phần không thể thiếu trong bất kỳ ngôn ngữ lập trình nào Nếu chúng

ta hiểu rõ toán tử thì các dòng sử lý lệnh của chúng ta sẽ gắn gọn và dể hiểu hơn

Cho biến x=10 và y=5

3.7 TOÁN TỬ ĐIỀU KIỆN

//variablename=(condition)?value1:value2

ketqua = ( tuoi> 5)? "vao cap 1" : "khong duoc vao cap 1";

document.write(ketqua);

CHƯƠNG 4: CÁC PHÁT BIỂU 4.1 CÂU LỆNH IF… ELSE

Câu điều kiện thường được sử dụng để thực hiện các hành động khác nhau với những điều kiện khác nhau

Câu điều kiện là câu lệnh mà chúng ta thường xuyên sử dụng khi viết mã cho bằng bất kỳ ngôn ngữ nào Để thực hiện nhưng hành động khác nhau trong những điều kiện khác nhau

Ví dụ: nếu bạn đủ 22 điểm bạn sẽ được vào Đại Học, nếu bạn có điểm dưới 22 bạn sẽ học hệ Cao Đẳng.

Trong JavaScript chúng ta có những kiểu câu điều kiện IF sau:

c Câu lệnh IF… ELSE IF … ELSE

Sử dụng câu lệnh điều kiện này trong trường hợp có nhiều điều kiện đặt ra và khi thỏa mỗi điều kiện

code to be executed if n is different from case 1 and 2 }

startValue: giá trị bắt đầu

endValue: giá trị cuối cùng

varIncrement: giá trị tăng của vòng lặp

break;

} document.write("The number is " + i);

document.write("<br />");

}

</script>

</body>

continue;

} document.write("The number is " + i);

CHƯƠNG 5: CỬA SỔ THÔNG BÁO

JavaScript có 3 kiểu hiển thị hộp thoại thông báo: Alert box(Cảnh báo), Confirm box(xác nhận), Prompt box(gợi ý)

5.1 HỘP THOẠI CẢNH BÁO

Là loại hộp thoại cảnh báo thường được sử dụng để báo cho người sử dụng có chắc chắn muốn thực hiện thao tác họ đăng thực hiện hay không Khi hộp thông báo hiện lên, nếu người dùng nhấn nút OK thì quá trình thực hiện thao tác mới được tiến hành

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JavaScript training </title>

sử dụng nhấn vào nút "Cancel" hành động sẽ bị hủy bỏ

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JavaScript training </title>

Cú pháp:

prompt(text,value);

text: là thông tin hiển thị trên hộp thoại

value: là giá trị mặc định hiển thị trong ô nhập liệu của hộp thoại

Ví dụ:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JavaScript training </title>

document.write("Xin chào " + name);

Để trình duyệt kết hợp với JavaScript một cách linh động chúng ta có thể đưa các đoạn mã JavaScript

mà một hàm và khi cần dùng đến chức năng mà hàm cung cấp chúng ta chỉ cần gọi hàm ra sử dụng

Khi sử dụng hàm chúng ta có nhiều lợi ích như không phải viết lại các đoạn mã giống nhau, có thể gọi hàm ở bất kỳ nơi đâu trên trang HTML mà chúng ta muốn và cũng có thể gọi hàm trên các trang HTML khác nếu chúng ta đưa hàm này vào tập tin js

var1, var2 … varX: được gọi là các tham số của hàm Hàm có thể có nhiều tham số hoặc không có

tham sao nào cả

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JavaScript training </title>

6.3 HÀM CÓ THAM SỐ

Ví dụ:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JavaScript training </title>

<input type="button" onclick="show_alert('Hay nhap vao nhung gi ban

muon')" value="Hiện Alert Box" />

</body>

</html>

6.4 HÀM CÓ TRẢ VỀ GIÁ TRỊ SAU KHI THỰC HIỆN LỆNH

Thông thường hàm sử dụng để xử lý một chức năng nào đó và sau khi xử lý xong thường phải trả về các giá trị Để trả về một giá trị nào đó sau khi xử lý chúng ta dùng lệnh return

Ví dụ:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JavaScript training </title>

Chú ý: Biến trong các một hàm bất kỳ chỉ có tác dụng trong hàm đó chứ không hề ảnh hưởng đến các

hàm khác cho dù tên biến giống nhau

CHƯƠNG 7: SỰ KIỆN TRONG JAVASCRIPT 7.1 SỰ KIỆN LÀ GÌ ?

Sự kiện là những hành động của người sử dụng được phát hiện bởi JavaScript Tất cả các thành phần của trang web đều có sự kiện, điều mà có thể kích hoạt một đoạn mã JavaScript Ví dụ về các sự kiện:

• Nhấn chuột

• Tải một trang web hoặc một hình ảnh

• Di chuyển chuột qua một vị trí nào đó của trang web

• Lựa chọn một ô nhập liệu trong HTML form

y - Tọa độ y của chuột khi có một sự kiện xảy ra

JavaScript định ra 5 loại sự kiện sau: FORM, Images, image map link, and window Những sự kiện này được liên kết với các thẻ HTML trong trang web

7.2 SỰ KIỆN VỚI FORM

blur: Sự kiện xảy ra khi chúng ta rời khỏi một phần tử nào đó của FORM

change: Sự kiện xảy ra khi chúng ta thay đổi giá trị một phần tử nào đó của FORM

focus: Sự kiện xảy ra khi chúng ta đến một phần tử nào đó của FORM

reset: Sự kiện xảy ra khi chúng ta thiết lập lại giá trị cho FORM nào đó

select: Sự kiện xảy ra khi chúng ta chọn một đoạn văn bản nào đó

submit: Sự kiện xảy ra khi chúng ta muốn gửi dữ liệu trong FORM từ trình duyệt đến máy chủ 7.3 SỰ KIỆN VỚI HÌNH ẢNH

about: tạo ra một hành động hủy bỏ chức năng

error: Có lỗi xảy ra

load: một đối được đã tải xong

7.4 SỰ KIỆN VỚI IMAGE MAP

mouseOut: Chuột được di chuyển ra ngoài từ link của MAP

mouseOver: Chuột được di chuyển lên link của MAP

7.5 SỰ KIỆN VỚI LINK

click: Một đối tượng link được nhấn

mouseOut: Chuột được di chuyển ra ngoài từ link

mouseOver: Chuột được di chuyển lên link

7.6 SỰ KIỆN VỚI WINDOW

blur: Rời khỏi một phần tử nào đó

error: Một lỗi xảy ra

focus: Chuyển đến một phần tử nào đó

load: Load một phần tử

unload: Thoát khỏi một phần tử

CHƯƠNG 8: MẢNG TRONG JAVASCRIPT 8.1 MẢNG CƠ BẢN

var students = new Array();

students[0] = "Nguyen Van A";

students[1] = "Nguyen Van B";

students[2] = "Nguyen Van C";

Cách 2:

var students=new Array("Nguyen Van A","Nguyen Van B","Nguyen Van C");

Cách 3:

var students=["Nguyen Van A","Nguyen Van B","Nguyen Van C"];

Khi chúng ta có nhiều mảng và chúng ta muốn nối các mảng lại với nhau thì chúng ta dùng phương

thức concat() của đối tượng mảng

8.3 NỐI CÁC PHẦN TỬ TRONG MẢNG (JOIN)

Phương thức này giúp chúng ta có thể tạo ra một chuỗi từ các phần tử trong một mảng và được ngăn cách bằng một ký tự bất kỳ

document.write(charaters);

</script>

8.4 XÓA MỘT PHẦN TỬ Ở CUỐI MẢNG (POP)

Để bỏ đi một phần tử ở cuối mảng chúng ta có thể sử dụng phương thức pop()

8.5 THÊM MỘT PHẦN TỬ VÀO CUỒI MẢNG (PUSH)

Phương thức push() dùng để thêm 1 phần tử vào cuối mảng, và sau khi thực hiện phương thức này

chúng ta sẽ nhận được giá trị chiều dài mới của mảng

8.6 ĐẢO NGƯỢC MỘT MẢNG (REVERSE)

Để đảo ngược thứ tự của một mảng trong JavaScript, chúng ta sử dụng phương thức reverse()

8.7 LOẠI BỎ MỘT PHẦN TỬ Ở ĐẦU MẢNG (SHIFT)

Phương thức shift() dùng để loại bỏ phần tử ở đầu mảng Sau đó trả về giá trị của phần tử mảng đã

Phương thức slice(start, end) giúp chúng ta tạo một mảng mới từ một mảng đã có sẵn bằng cách nhập

8.10 THÊM VÀ XÓA CÁC PHẦN TỬ CỦA MẢNG (SPLICE)

Phương thức splice() giúp chúng ta xóa các phần tử trong mảng theo vị trí nhập vào (giống slice()) và thêm vào các phần tử mảng mới vào cuối mảng (giống push())

8.11 CHUYỂN MỘT MẢNG THÀNH CHUỖI (TOSTRING)

Phương thức toString() giúp chúng ta chuyển một mảng thành một chuỗi, hãy xem ví dụ sau:

8.12 THEM PHẦN TỬ VÀO ĐẦU MẢNG (UNSHIFT)

Phương thức unshift() giúp chúng ta thêm các giá trị vào một mảng và trả về một mảng mới

Ví dụ:

<script type="text/javascript">

var str_1 = ["a","b","c",1,2,3];

3 Math.random() Lấy ngẫu nhiên một số

4 Math.max(x,y,z, ,n) Lấy số có giá trị lớn nhất trong chuỗi số

5 Math.min(x,y,z, ,n) Lấy số có giá trị nhỏ nhất trong chuỗi số

6 Math.abs(x) Trả về giá trị số nguyên dương

9.2 THIẾT LẬP THỜI GIAN CHẠY

JavaScript có thể thực hiện một chức năng nào đó sau một thời gian được định trước

setTimeout() - Thực hiện một số lệnh với thời gian được định trước trong tương lai

clearTimeout() - Hủy hàm setTimeout()

<input type="button" value="Start count!" onClick="timedCount()">

<input type="text" id="txt" />