huong dan hoc javascript co ban nang cao 141021131105 conversion gate02
TRANSCRIPT
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
1/80
JavaScript 1
CHƢƠNG 1 LỜI NÓI ĐẦU
Vớ i HTML and Microsoft FrontPage bạn đã biết cách tạo ra trang Web - tuy nhiên chỉ mớ i ở mức biểu diễn thông tin chứ chưa phải là các trang Web động có khả năng đá p ứng
các sự kiện từ phía ngườ i dùng. Hãng Netscape đã đưa ra ngôn ngữ script có tên làLiveScript để thực hiện chức năng này. Sau đó ngôn ngữ này đượ c đổi tên thànhJavaScript để tận dụng tính đại chúng của ngôn ngữ lậ p trình Java. Mặc dù có những điểmtươ ng đồng giữa Java và JavaScript, nhưng chúng vẫn là hai ngôn ngữ riêng biệt.
JavaScript là ngôn ngữ dướ i dạng script có thể gắn vớ i các file HTML. Nó không đượ c biên dịch mà đượ c trình duyệt diễn dịch. Không giống Java phải chuyển thành các mã dễ biên dịch, trình duyệt đọc JavaScript dướ i dạng mã nguồn. Chính vì vậy bạn có thể dễ dàng học JavaScript qua ví dụ bở i vì bạn có thể thấy cách sử dụng JavaScript trên cáctrang Web.
JavaScript là ngôn ngữ dựa trên đối tượ ng, có ngh ĩ a là bao gồm nhiều kiểu đối tượ ng, ví
dụ đối tượ ng Math vớ i tất cả các chức năng toán học. Tuy vậy JavaScript không là ngônngữ hướ ng đối tượ ng như C++ hay Java do không hỗ tr ợ các lớ p hay tính thừa k ế.
JavaScript có thể đá p ứng các sự kiện như tải hay loại bỏ các form. Khả năng này cho phép JavaScript tr ở thành một ngôn ngữ script động.
Giống vớ i HTML và Java, JavaScript đượ c thiết k ế độc lậ p vớ i hệ điều hành. Nó có thể chạy trên bất k ỳ hệ điều hành nào có trình duyệt hỗ tr ợ JavaScript. Ngoài ra JavaScriptgiống Java ở khía cạnh an ninh: JavaScript không thể đọc và viết vào file của ngườ i dùng.
Các trình duyệt web như Nescape Navigator 2.0 tr ở đi có thể hiển thị những câu lệnhJavaScript đượ c nhúng vào trang HTML. Khi trình duyệt yêu cầu một trang, server sẽ gửiđầy đủ nội dung của trang đó, bao gồm cả HTML và các câu lệnh JavaScript qua mạng tớ iclient. Client sẽ đọc trang đó từ đầu đến cuối, hiển thị các k ết quả của HTML và xử lý cáccâu lệnh JavaScript khi nào chúng xuất hiện.
Các câu lệnh JavaScript đượ c nhúng trong một trang HTML có thể tr ả lờ i cho các sự kiệncủa ngườ i sử dụng như kích chuột, nhậ p vào một form và điều hướ ng trang. Ví dụ bạn cóthể kiểm tra các giá tr ị thông tin mà ngườ i sử dụng đưa vào mà không cần đến bất cứ mộtquá trình truyền trên mạng nào. Trang HTML vớ i JavaScript đượ c nhúng sẽ kiểm tra cácgiá tr ị đượ c đưa vào và sẽ thông báo vớ i ngườ i sử dụng khi giá tr ị đưa vào là không hợ plệ.
Mục đích của phần này là giớ i thiệu về ngôn ngữ lậ p trình JavaScript để bạn có thể viếtcác script vào file HTML của mình.
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
2/80
JavaScript 2
CHƢƠNG 2 NHẬP MÔN JAVASCRIPT
2.1.NHÚNG JAVASCRIPT VÀO FILE HTML
Bạn có thể nhúng JavaScript vào một file HTML theo một trong các cách sau đây: Sử dụng các câu lệnh và các hàm trong cặ p thẻ
Sử dụng các file nguồn JavaScript
Sử dụng một biểu thức JavaScript làm giá tr ị của một thuộc tính HTML
Sử dụng thẻ sự kiện (event handlers) trong một thẻ HTML nào đó
Trong đó, sử dụng cặ p thẻ ... và nhúng một file nguồnJavaScript là đượ c sử dụng nhiều hơ n cả.
2.1.1.Sử dụng thẻ SCRIPT
Script đượ c đưa vào file HTML bằng cách sử dụng cặ p thẻ và . Các thẻ có thể xuấthiện trong phần hay của file HTML. Nếuđặt trong phần , nó sẽ đượ c tải và sẵn sàng tr ướ c khi
phần còn lại của văn bản đượ c tải.
Thuộc tính duy nhất đượ c định ngh ĩ a hiện thờ i cho thẻ là “LANGUAGE=“ dùng để xác định ngôn ngữ script đượ c sử dụng. Có hai giá tr ị đượ c định ngh ĩ a là"JavaScript" và "VBScript". Vớ i chươ ng trình viết bằng
JavaScript bạn sử dụng cú pháp sau :
// INSERT ALL JavaScript HERE
Điểm khác nhau giữa cú pháp viết các ghi chú giữa HTML và JavaScript là cho phép bạnẩn các mã JavaScript trong các ghi chú của file HTML, để các trình duyệt cũ không hỗ tr ợ cho JavaScript có thể đọc đượ c nó như trong ví dụ sau đây:
Dòng cuối cùng của script cần có dấu // để trình duyệt không diễn dịch dòng này dướ idạng mã JavaScript. Các ví dụ trong chươ ng này không chứa đặc điểm ẩn của JavaScript
để mã có thể dễ hiểu hơ n.
Chú ý:
Ghi chú không đƣợ c đặttrong cặp thẻ nhƣ ghi chú trong fileHTML. Cú pháp củaJavaScript tƣơ ng tự cúpháp của C nên có thể sử dụng // hay /* ... */.
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
3/80
JavaScript 3
2.1.2. Sử dụng một file nguồn JavaScript
Thuộc tính SRC của thẻ cho phép bạn chỉ rõ file nguồn JavaScript đượ c sử dụng (dùng phươ ng pháp này hay hơ n nhúng tr ực tiế p một đoạn lệnh JavaScript vào trangHTML).
Cú pháp:
....
Thuộc tính này r ấy hữu dụng cho việc chia sẻ các hàm dùng chung cho nhiều trang khácnhau. Các câu lệnh JavaScript nằm trong cặ p thẻ và có chứa thuộctinh SRC tr ừ khi nó có lỗi. Ví dụ bạn muốn đưa dòng lệnh sau vào giữa cặ p thẻ và :document.write("Không tìm thấy file JS đƣ a vào!");
Thuộc tính SRC có thể đượ c định rõ bằng địa chỉ URL, các liên k ết hoặc các đườ ng dẫntuyệt đối, ví dụ:
Các file JavaScript bên ngoài không đượ c chứa bất k ỳ thẻ HTML nào. Chúng chỉ đượ c chứa các câu lệnhJavaScript và định ngh ĩ a hàm.
Tên file của các hàm JavaScript bên ngoài cần có đuôi.js , và server sẽ phải ánh xạ đuôi .js đó tớ i kiểu MIMEapplication/x-javascript. Đó là những gì mà server gửitr ở lại phần Header của file HTML. Để ánh xạ đuôi nàyvào kiểu MIME, ta thêm dòng sau vào file mime.typestrong đườ ng dẫn cấu hình của server, sau đó khở i động lại server:
type=application/x-javascript
Nếu server không ánh xạ đượ c đuôi .js tớ i kiểu MIME application/x-javascript , Navigatorsẽ tải file JavaScript đượ c chỉ ra trong thuộc tính SRC về không đúng cách.
Trong ví dụ sau, hàm bar có chứa xâu "left" nằm trong một cặ p dấu nháy kép:
function bar(widthPct){
document.write(" ")
}
2.3. THẺ VÀ
Cặ p thẻ này dùng để định rõ nội dung thông báo cho ngườ i sử dụng biết trình duyệt khônghỗ tr ợ JavaScript. Khi đó trình duyệt sẽ không hiểu thẻ và nó bị lờ đi, cònđoạn mã nằm trong cặ p thẻ này sẽ đượ c Navigator hiển thị. Ngượ c lại, nếu trình duyệt có
hỗ tr ợ JavaScript thì đoạn mã trong cặ p thẻ sẽ đượ c bỏ qua. Tuy nhiên,
Chú ý
Khi b ạn mu ố n ch ỉ ra m ột xâutrích d ẫ n trong m ột xâu khác c ầns ử d ụng d ấ u nháy đơ n ( ' ) để phân đị nh xâu đó. Đi ều này chophép scr ipt nh ận ra xâu ký t ự đó.
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
4/80
JavaScript 4
điều này cũng có thể xảy ra nếu ngườ i sử dụng không sử dụng JavaScript trong trìnhduyệt của mình bằng cách tắt nó đi trong hộ p Preferences/Advanced.
Ví d ụ:
Trang này có sử dụng JavaScript. Do đó bạn cần sử dụng trình duyệt Netscape Navigator từ version 2.0 tr ở đi!
Hãy kích chuột vào đây để tải về phiên bản Netscape mớ i hơ n
Nếu bạn đã sử dụng trình duyệt Netscape từ 2.0 tr ở đi mà vẫn đọc đượ c dòng chữ này thì hãy bậtPreferences/Advanced/JavaScript lên
Hình 2.3: Minh hoạ thẻ NOSCRIPT
2.3. HIỂN THỊ MỘT DÒNG TEXT
Trong hầu hết các ngôn ngữ lậ p trình, một trong những khả năng cơ sở là hiển thị ra mànhình một dòng text. Trong JavaScript, ngườ i lậ p trình cũng có thể điều khiển việc xuất ramàn hình của client một dòng text tuần tự trong file HTML. JavaScript sẽ xác định điểmmà nó sẽ xuất ra trong file HTML và dòng text k ết quả sẽ đượ c dịch như các dòng HTMLkhác và hiển thị trên trang.
Hơ n nữa, JavaScript còn cho phép ngườ i lậ p trình sinh ra một hộ p thông báo hoặc xác
nhận gồm một hoặc hai nút. Ngoài ra, dòng text và các con số còn có thể hiển thị trongtr ườ ng TEXT và TEXTAREA của một form.
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
5/80
JavaScript 5
Trong phần này, ta sẽ học cách thức write() và writeln() của đối tượ ng document.
Đối tượ ng document trong JavaScript đượ c thiết k ế sẵn hai cách thức để xuất một dòngtext ra màn hình client: write() và writeln(). Cách gọi một cách thức của một đối tượ ngnhư sau:
object_name.property_nameDữ liệu mà cách thức dùng để thực hiện công việc của nó đượ c đưa vào dòng tham số, vídụ:
document.write("Test");
document.writeln('Test');
Cách thức write() xuất ra màn hình xâu Text nhưng không xuống dòng, còn cách thức writeln() sau khi viếtxong dòng Text tự động xuống dòng. Hai cách thức này đều cho phép xuất ra thẻ HTML.
Ví dụ: Cách thức write() xuất ra thẻ HTML
Ouputting Text
This text is plain.
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
6/80
JavaScript 6
Ví dụ: Sự khác nhau của write() và writeln():
Khi duyệt sẽ đượ c k ết quả:
Hình 2.5: Sự khác nhau của write() và writeln()
2.4. GIAO TIẾP VỚI NGƢỜI SỬ DỤNG
JavaScript hỗ tr ợ khả năng cho phép ngườ i lậ p trình tạo ra một hộ p hội thoại. Nội dungcủa hộ p hội thoại phụ thuộc vào trang HTML có chứa đoạn script mà không làm ảnhhưở ng đến việc xuất nội dung trang.
Cách đơ n giản để làm việc đó là sử dụng cách thức alert(). Để sử dụng đượ c cách thứcnày, bạn phải đưa vào một dòng text như khi sử dụng document.write() vàdocument.writeln() trong phần tr ướ c. Ví dụ:
alert("Nhấn vào OK để tiế p tục");
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
7/80
JavaScript 7
Khi đó file sẽ chờ cho đến khi ngườ i sử dụng nhấn vào nút OK r ồi mớ i tiế p tục thực hiện
Thông thườ ng, cách thức alert() đượ c sử dụng trong các tr ườ ng hợ p:
Thông tin đưa và form không hợ p lệ
K ết quả sau khi tính toán không hợ p lệ
Khi dịch vụ chưa sẵn sàng để truy nhậ p dữ liệu
Tuy nhiên cách thức alert() mớ i chỉ cho phép thông báo vớ i ngườ i sử dụng chứ chưa thựcsự giao tiế p vớ i ngườ i sử dụng. JavaScript cung cấ p một cách thức khác để giao tiế p vớ ingườ i sử dụng là promt(). Tươ ng tự như alert(), prompt() tạo ra một hộ p hội thoại vớ i mộtdòng thông báo do bạn đưa vào, nhưng ngoài ra nó còn cung cấ p một tr ườ ng để nhậ p dữ liệu vào. Ngườ i sử dụng có thể nhậ p vào tr ườ ng đó r ồi kích vào OK. Khi đó, ta có thể xử lý dữ liệu do ngườ i sử dụng vừa đưa vào.
Ví dụ: Hộ p hội thoại gồm một dòng thông báo, một tr ườ ng nhậ p dữ liệu, một nút OK vàmột nút Cancel
Chươ ng trình này sẽ hỏi tên ngườ i dùng và sau đó sẽ hiển thị một thông báo ngắn sử dụngtên mớ i đưa vào. Ví dụ đượ c lưu vào file Hello.html
JavaScript Exemple
var name=window.prompt(“Hello! What‟s your name ?”,””);
document.write(“Hello ” + name + “ ! I hope you like JavaScript ”);
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
8/80
JavaScript 8
Khi duyệt có k ết quả:
Ví dụ này hiển thị dấu nhắc nhậ p vào tên vớ i phươ ng thức window.prompt. Giá tr ị đạtđượ c sẽ đượ c ghi trong biến có tên là name.
Biến name đượ c k ết hợ p vớ i các chuỗi khác và đượ c hiển thị trong cửa sổ của trình duyệtnhờ phươ ng thức document.write.
Bây giờ bạn đã có ý tưở ng về các chức năng có thể đạt đượ c qua JavaScript, chúng ta hãytiế p tục tìm hiểu thêm về chính ngôn ngữ này.
Hình2.1: Hiển thị cửa sổ nhậ p tên
Hình 2.2: Hiển thị lờ i chào ngườ i nhậ p
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
9/80
JavaScript 9
2.5. ĐIỂM LẠI CÁC LỆNH VÀ MỞ RỘNG
LỆNH/MỞ RỘNG K IỂU MÔ TẢ
SCRIPT thẻ HTML Hộ p chứa các lệnh JavaScript
SRC Thuộc tính củathẻ SCRIPT
Giữ địa chỉ của file JavaScript bên ngoài. File này phảicó phần đuôi .js
LANGUAGE thuộc tính củathẻ SCRIPT
Định rõ ngôn ngữ script đượ c sử dụng (JavaScript hoặcVBScript)
// Ghi chú trongJavaScript
Đánh dấu ghi chú một dòng trong đoạn script
/*...*/ Ghi chú trongJavaScript
Đánh dấu ghi chú một khối trong đoạn script
document.write() cách thứcJavaScript
Xuất ra một xâu trên cửa sổ hiện thờ i một cách tuần tự theo file HTML có đoạn script đó
document.writeln() Cách thức
JavaScript
Tươ ng tự cách thức document.write() nhưng viết xong
tự xuống dòng.alert() Cách thức của
JavaScriptHiển thị một dòng thông báo trên hộ p hội thoại
promt() Cách thứcJavaScript
Hiển thị một dòng thông báo trong hộ p hội thoại đồngthờ i cung cấ p một tr ườ ng nhậ p dữ liệu để ngườ i sử dụng nhậ p vào.
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
10/80
JavaScript 10
CHƢƠNG 3 BIẾN TRONG JAVASCRIPT
3.1. BIẾN VÀ PHÂN LOẠI BIẾN
Tên biến trong JavaScript phải bắt đầu bằng chữ hay dấu gạch dướ i. Các chữ số khôngđượ c sử dụng để mở đầu tên một biến nhưng có thể sử dụng sau ký tự đầu tiên.
Phạm vi của biến có thể là một trong hai kiểu sau:
Biế n toàn cục: Có thể đượ c truy cậ p từ bất k ỳ đâu trong ứng dụng.đượ c khai báo như sau :
x = 0; Biế n cục bộ: Chỉ đượ c truy cậ p trong phạm vi chươ ng trình mà nó khai báo.
Biến cục bộ đượ c khai báo trong một hàm vớ i từ khoá var như sau:
var x = 0;
Biến toàn cục có thể sử dụng từ khoá var, tuy nhiên điều này không thực sự cần thiết.
3.2. BIỂU DIỄN TỪ TỐ TRONG JAVASCRIPT
Từ tố là các giá tr ị trong chươ ng trình không thay đổi. Sauđây là các ví dụ về từ tố:
8
“The dog ate my shoe”
true
3.3. K IỂU DỮ LIỆU
Khác vớ i C++ hay Java, JavaScript là ngôn ngữ có tính định kiểu thấ p. Điều này có ngh ĩ alà không phải chỉ ra kiểu dữ liệu khi khai báo biến. Kiểu dữ liệu đượ c tự động chuyểnthành kiểu phù hợ p khi cần thiết.
Ví dụ file Variable.Html:
Datatype Example
var fruit='apples';
var numfruit=12;
numfruit = numfruit + 20;
var temp ="There are " + numfruit + " " + ".";
document.write(temp);
Các trình duyệt hỗ tr ợ JavaScript sẽ xử lý chính xác ví dụ trên và đưa ra k ết quả dướ i đây:
Chú ý
Khác v ớ i C, trongJavaScript không cóki ể u h ằng s ố CONST để bi ể u di ễ n m ột giá tr ị không đổ i nào đấ y
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
11/80
JavaScript 11
Trình diễn dịch JavaScript sẽ xem biến numfruit có kiểu nguyên khi cộng vớ i 20 và cókiểu chuỗi khi k ết hợ p vớ i biển temp.
Trong JavaScript, có bốn kiểu dữ liệu sau đây: kiể u số nguyên, kiể u d ấ u phẩ y động, kiể ulogic và kiể u chuỗ i.
1.1.1.
KIỂU NGUYÊN (INTERGER)
Số nguyên có thể đượ c biểu diễn theo ba cách:
H ệ cơ số 10 (hệ thậ p phân) - có thể biểu diễn số nguyên theo cơ số 10, chúý r ằng chữ số đầu tiên phải khác 0.
H ệ cơ số 8 (hệ bát phân) - số nguyên có thể biểu diễn dướ i dạng bát phânvớ i chữ số đầu tiên là số 0.
H ệ cơ số 16 (hệ thậ p lục phân) - số nguyên có thể biểu diễn dướ i dạng thậ plục phân vớ i hai chữ số đầu tiên là 0x.
1.1.2.
K IỂU DẤU PHẨY ĐỘNG (FLOATING POINT)
Một literal có kiểu dấu phẩy động có 4 thành phần sau:
Phần nguyên thậ p phân.
Dấu chấm thậ p phân (.).
Phần dư.
Phần mũ.
Hình 3.1: K ết quả của xử lý dữ liệu
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
12/80
JavaScript 12
Để phân biệt kiểu dấu phẩy động vớ i kiểu số nguyên, phải có ít nhất một chữ số theo saudấu chấm hay E. Ví dụ:
9.87
-0.85E4
9.87E14
.98E-3
1.1.3. K IỂU LOGIC (BOOLEAN)
Kiểu logic đượ c sử dụng để chỉ hai điều kiện : đúng hoặc sai. Miền giá tr ị của kiểu nàychỉ có hai giá tr ị
true.
false.
1.1.4.
K IỂU CHUỖI (STRING)
Một literal kiểu chuỗi đượ c biểu diễn bở i không hay nhiều ký tự đượ c đặt trong cặ p dấu "... " hay '... '. Ví dụ:
“The dog ran up the tree”
„The dog barked‟
“100”
Để biểu diễn dấu nháy kép ( " ), trong chuỗi sử dụng ( \" ), ví dụ:
document.write(“ \”This text inside quotes.\” ”);
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
13/80
JavaScript 13
2. XÂY DỰNG CÁC BIỂU THỨC TRONG JAVASCRIPT
ĐỊNH NGHĨA VÀ PHÂN LOẠI BIỂU THỨC Tậ p hợ p các literal, biến và các toán tử nhằm đánh giá một giá tr ị nào đó đượ c gọi là một
biểu thức (expression). Về cơ bản có ba kiểu biểu thức trong JavaScript:
Số học: Nhằm để lượ ng giá giá tr ị số. Ví dụ (3+4)+(84.5/3) đượ c đánh giá bằng 197.1666666667.
Chuỗi: Nhằm để đánh giá chuỗi. Ví dụ "The dog barked" + barktone + "!" làThe dog barked ferociously!.
Logic: Nhằm đánh giá giá tr ị logic. Ví dụ temp>32 có thể nhận giá tr ị sai.JavaScript cũng hỗ tr ợ biểu thức điều kiện, cú pháp như sau:
(condition) ? valTrue : valFalse
Nếu điều kiện condition đượ c đánh giá là đúng, biểu thức nhận giá tr ị valTrue, ngượ c lại nhận giá tr ị valFalse. Ví dụ:
state = (temp>32) ? "liquid" : "solid"
Trong ví dụ này biến state đượ c gán giá tr ị "liquid" nếu giá tr ị của biến temp lớ n hơ n 32; trong tr ườ ng hợ p ngượ c lại nó nhận giá tr ị "solid".
CÁC TOÁN TỬ (OPERATOR)
Toán tử đượ c sử dụng để thực hiện một phép toán nào đó trên dữ liệu. Một toán tử có thể tr ả lại một giá tr ị kiểu số, kiểu chuỗi hay kiểu logic. Các toán tử trong JavaScript có thể đượ c nhóm thành các loại sau đây: gán, so sánh, số học, chuỗ i, logic và logic bitwise.
2.1.1. GÁN
Toán tử gán là dấu bằng (=) nhằm thực hiện việc gán giá tr ị của toán hạng bên phải chotoán hạng bên trái. Bên cạnh đó JavaScript còn hỗ tr ợ một số kiểu toán tử gán rút gọn.
Ki ể u gán thông th ườ ng Ki ể u gán rút g ọn
x = x + y x + = y
x = x - y x - = y
x = x * y x * = y
x = x / y x / = y
x = x % y x % = y
2.1.2. SO SÁNH
Ngườ i ta sử dụng toán tử so sánh để so sánh hai toán hạng và tr ả lại giá tr ị đúng hay sai
phụ thuộc vào k ết quả so sánh. Sau đây là một số toán tử so sánh trong JavaScript:
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
14/80
JavaScript 14
== Tr ả lại giá tr ị đúng nếu toán hạng bên trái bằng toán hạng bên phải
!= Tr ả lại giá tr ị đúng nếu toán hạng bên trái khác toán hạng bên phải
> Tr ả lại giá tr ị đúng nếu toán hạng bên trái lớ n hơ n toán hạng bên phải
>= Tr ả lại giá tr ị đúng nếu toán hạng bên trái lớ n hơ n hoặc bằng toánhạng bên phải
< Tr ả lại giá tr ị đúng nếu toán hạng bên trái nhỏ hơ n toán hạng bên phải
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
15/80
JavaScript 15
một trong hai expr1 và expr2 đúng.
! expr Là toán tử logic NOT phủ định giá tr ị của expr.
2.1.6. BITWISE
Vớ i các toán tử thao tác trên bit, đầu tiên giá tr ị đượ c chuyển dướ i dạng số nguyên 32 bit,sau đó lần lượ t thực hiện các phép toán trên từng bit.
& Toán tử bitwise AND, tr ả lại giá tr ị 1 nếu cả hai bit cùng là 1.
| Toán tử bitwise OR, tr ả lại giá tr ị 1 nếu một trong hai bit là 1.
^ Toán tử bitwise XOR, tr ả lại giá tr ị 1 nếu hai bit có giá tr ị khác nhau
Ngoài ra còn có một số toán tử dịch chuyển bitwise. Giá tr ị đượ c chuyển thành số nguyên32 bit tr ướ c khi dịch chuyển. Sau khi dịch chuyển, giá tr ị lại đượ c chuyển thành kiểu củatoán hạng bên trái. Sau đây là các toán tử dịch chuyển:
2 tr ở thành 4 (số nhị phân
10000 tr ở thành số nhị phân 100)
>>> Toán tử dịch phải có chèn 0. Dịch chuyển toán hạng trái sang phải một số lượ ng bit bằng toán hạng phải. Bit dấu đượ c dịch chuyển từ trái (giống>>). Những bit đượ c dịch sang phải bị xoá đi. Ví dụ: -8>>>2 tr ở thành1073741822 (bở i các bit dấu đã tr ở thành một phần của số). Tất nhiên vớ isố dươ ng k ết quả của toán tử >> và >>> là giống nhau.
Có một số toán tử dịch chuyển bitwise rút gọn:
Ki ể u bi twise thông th ườ ng Ki ể u bi twise rút g ọn
x = x y x - >> y
x = x >>> y x >>> = y
x = x & y x & = y
x = x ^ y x ^ = y
x = x | y x | = y
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
16/80
JavaScript 16
BÀI TẬP
2.1.7. CÂU HỎI
Hãy đánh giá các biểu thức sau:
1. a. 7 + 5
b. "7" + "5"
c. 7 == 7
d. 7 >= 5
e. 7 = 5) && (5 > 5)
h. (7 >= 5) || (5 > 5)
2.1.8. TRẢ LỜI
Các biểu thức đượ c đánh giá như sau:
1. a. 12
b. "75"
c. true
d. true
e. true2. f. 5
g. false
h. true
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
17/80
JavaScript 17
3. CÁC LỆNH
Có thể chia các lệnh của JavaScript thành ba nhóm sau:
Lệnh điều kiện.
Lệnh lặ p.
Lệnh tháo tác trên đối tượ ng.
CÂU LỆNH ĐIỀU KIỆN
Câu lệnh điều kiện cho phép chươ ng trình ra quyết định và thực hiện công việc nào đấydựa trên k ết quả của quyết định. Trong JavaScript, câu lệnh điều kiện là if...else
if ... else
Câu lệnh này cho phép bạn kiểm tra điều kiện và thực hiện một nhóm lệnh nào đấy dựatrên k ết quả của điều kiện vừa kiểm tra. Nhóm lệnh sau else không bắt buộc phải có, nócho phép chỉ ra nhóm lệnh phải thực hiện nếu điều kiện là sai.
Cú pháp
if ( )
{
//Các câu lệnh vớ i điều kiện đúng
}
else{
//Các câu lệnh vớ i điều kiện sai
}
Ví d ụ:
if (x==10){
document.write(“x bằng 10, đặt lại x bằng 0.”);
x = 0;
}
else
document.write(“x không bằng 10.”);
Chú ý
Ký t ự { và } đượ c sử d ụng để tách các khố i mã.
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
18/80
JavaScript 18
CÂU LỆNH LẶP
Câu lệnh lặ p thể hiện việc lặ p đi lặ p lại một đoạn mã cho đến khi biểu thức điều kiện đượ cđánh giá là đúng. JavaScipt cung cấ p hai kiểu câu lệnh lặ p:
for loop
while loop
3.1.1. VÒNG LẶP FOR
Vòng lặ p for thiết lậ p một biểu thức khở i đầu - initExpr , sau đó lặ p một đoạn mã cho đếnkhi biểu thức đượ c đánh giá là đúng. Sau khi k ết thúc mỗi vòng lặ p, biểuthức incrExpr đượ c đánh giá lại.
Cú pháp:
for (initExpr; ; incrExpr){
//Các lệnh đƣợ c thự c hiện trong khi lặp}
Ví d ụ:
For loop Example
for (x=1; x
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
19/80
JavaScript 19
Ví dụ này lưu vào file for_loop.Html.
Vòng lặ p này sẽ thực hiện khối mã lệnh cho đến khi x>10.
3.1.2. WHILE
Vòng lặ p while lặ p khối lệnh chừng nào còn đượ c đánh giá là đúng
Cú pháp:
while (){
//Các câu lệnh thự c hiện trong khi lặp
}
Ví d ụ:
x=1;
while (x
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
20/80
JavaScript 20
Đoạn mã sau lặ p cho đến khi x lớ n hơ n hoặc bằng 100. Tuy nhiên nếu giá tr ị x đưa vàovòng lặ p nhỏ hơ n 50, vòng lặ p sẽ k ết thúc
Ví d ụ:
while (x
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
21/80
JavaScript 21
{
//Các câu lệnh
}
Ví d ụ
Ví dụ sau sẽ lấy ra tất cả các thuộc tính của đối tượ ng Window và in ra tên của mỗi thuộctính. K ết quả đượ c minh hoạ trên hình 5.2.
For in Example
document.write("The properties of the Window object are:
");for (var x in window)
document.write(" "+ x + ", ");
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
22/80
JavaScript 22
3.1.6. NEW
Biến new đượ c thực hiện để tạo ra một thể hiện mớ i của một đối tượ ng
Cú phápobjectvar = new object_type ( param1 [,param2]... [,paramN])
Ví dụ sau tạo đối tượ ng person có các thuộc tính firstname, lastname, age, sex. Chú ýr ằng từ khoá this đượ c sử dụng để chỉ đối tượ ng trong hàm person. Sau đó ba thể hiệncủa đối tượ ng person đượ c tạo ra bằng lệnh new
New Example
function person(first_name, last_name, age, sex){
this.first_name=first_name;
this.last_name=last_name;
this.age=age;
this.sex=sex;
}
person1= new person("Thuy", "Dau Bich", "23", "Female");
person2= new person("Chung", "Nguyen Bao", "24", "Male");
person3= new person("Binh", "Nguyen Nhat", "24", "Male");
Hình 5.2: K ết quả của lệnh for...in
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
23/80
JavaScript 23
person4= new person("Hoàn", "Đỗ Văn", "24", "Male");
document.write ("1. "+person1.last_name+" " + person1.first_name + "
" );document.write("2. "+person2.last_name +" "+ person2.first_name + "
");document.write("3. "+ person3.last_name +" "+ person3.first_name + "
");document.write("4. "+ person4.last_name +" "+ person4.first_name+"
");3.1.7. THIS
Từ khoá this đượ c sử dụng để chỉ đối tượ ng hiện thờ i. Đối tượ ng đượ c gọi thườ ng là đốitượ ng hiện thờ i trong phươ ng thức hoặc trong hàm.
Cú pháp
this [.property]
Có thể xem ví dụ của lệnh new.
Hình 5.3: K ết quả của ví dụ lệnh New
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
24/80
JavaScript 24
3.1.8. WITH
Lệnh này đượ c sử dụng để thiết lậ p đối tượ ng ngầm định cho một nhóm các lệnh, bạn cóthể sử dụng các thuộc tính mà không đề cậ p đến đối tượ ng.
Cú pháp
with (object)
{
// statement
}
Ví dụ:
Ví dụ sau chỉ ra cách sử dụng lệnh with để thiết lậ p đối tượ ng ngầm định là document vàcó thể sử dụng phươ ng thức write mà không cần đề cậ p đến đối tượ ng document
With Example
with (document){
write(“This is an exemple of the things that can be done
”);write(“With the with statment.
”);
write(“This can really save some typing”);
}
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
25/80
JavaScript 25
CÁC HÀM (FUNCTIONS)
JavaScript cũg cho phép sử dụng các hàm. Mặc dù không nhất thiết phải có, song các hàmcó thể có một hay nhiều tham số truyền vào và một giá tr ị tr ả về. Bở i vì JavaScript là ngônngữ có tính định kiểu thấ p nên không cần định ngh ĩ a kiểu tham số và giá tr ị tr ả về củahàm. Hàm có thể là thuộc tính của một đối tượ ng, trong tr ườ ng hợ p này nó đượ c xem như là phươ ng thức của đối tượ ng đó.
Lệnh function đượ c sử dụng để tạo ra hàm trong JavaScript.
Cú pháp
function fnName([param1],[param2],...,[paramN])
{
//function statement
}
Ví d ụ:
Ví dụ sau minh hoạ cách thức tạo ra và sử dụng hàm như là thành viên của một đối tượ ng.Hàm printStats đượ c tạo ra là phươ ng thức của đối tượ ng person
Function Example
function person(first_name, last_name, age, sex)
{
Hình 5.4: K ết quả của ví dụ lệnh with
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
26/80
JavaScript 26
this.first_name=first_name;
this.last_name=last_name;
this.age=age;
this.sex=sex;
this.printStats=printStats;
}
function printStats() {
with (document) {
write (" Name :" + this.last_name + " " + this.first_name + "
" );write("Age :"+this.age+"
");write("Sex :"+this.sex+"
");}
}
person1= new person("Thuy", "Dau Bich", "23", "Female");
person2= new person("Chung", "Nguyen Bao", "24", "Male");
person3= new person("Binh", "Nguyen Nhat", "24", "Male");
person4= new person("Hoan", "Do Van", "23", "Male");
person1.printStats();
person2.printStats();
person3.printStats();
person4.printStats();
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
27/80
JavaScript 27
CÁC HÀM CÓ SẴN
JavaScript có một số hàm có sẵn, gắn tr ực tiế p vào chính ngôn ngữ và không nằm trongmột đối tượ ng nào:
eval
parseInt
parseFloat
3.1.9. EVAL
Hàm này đượ c sử dụng để đánh giá các biểu thức hay lệnh. Biểu thức, lệnh hay các đốitượ ng của thuộc tính đều có thể đượ c đánh giá. Đặc biệt hết sức hữu ích khi đánh giá các
biểu thức do ngườ i dùng đưa vào (ngượ c lại có thể đánh giá tr ực tiế p).
Cú pháp:
returnval=eval (bất k ỳ biểu thức hay lệnh hợ p lệ trong Java)
Ví d ụ:
1.1.1.1.1.
Hình 8: Ví d ụ v ề hàm
Hình 5.5: K ết quả việc sử dụng hàm
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
28/80
JavaScript 28
Eval Example
var string=”10+ Math.sqrt(64)”;
document.write(string+ “=”+ eval(string));
3.1.10.
PARSEINT
Hàm này chuyển một chuỗi số thành số nguyên vớ i cơ số là tham số thứ hai (tham số nàykhông bắt buộc). Hàm này thườ ng đượ c sử dụng để chuyển các số nguyên sang cơ số 10và đảm bảo r ằng các dữ liệu đưọc nhậ p dướ i dạng ký tự đượ c chuyển thành số tr ướ c khitính toán. Trong tr ườ ng hợ p dữ liệu vào không hợ p lệ, hàm parseInt sẽ đọc và chuyểndạng chuỗi đến vị trí nó tìm thấy ký tự không phải là số. Ngoài ra hàm này còn cắt dấu
phẩy động.
Cú pháp
parseInt (string, [, radix])
Ví d ụ:
Hình 5.6 Ví dụ hàm Eval
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
29/80
JavaScript 29
perseInt Exemple
document.write("Converting 0xC hex to base-10: " + parseInt(0xC,10) +"
");document.write("Converting 1100 binary to base-10: " + parseInt(1100,2) +"
");Hình 5.7: Ví dụ parInt
3.1.11. PARSEFLOAT
Hàm này giống hàm parseInt nhưng nó chuyển chuỗi thành số biểu diễn dướ i dạng dấu phẩy động.
Cú pháp
parseFloat (string)
Ví d ụ:
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
30/80
JavaScript 30
Ví dụ sau minh hoạ cách thức xử lý của parseFloat vớ i các kiểu chuỗi khác nhau. Hình 5.8minh họa k ết quả
perseFload Exemple
document.write("This script will show how diffrent strings are ");
document.write("Converted using parseFloat
");document.write("137= " + parseFloat("137") + "
");document.write("137abc= " + parseFloat("137abc") + "
");document.write("abc137= " + parseFloat("abc137") + "
");document.write("1abc37= " + parseFloat("1abc37") + "
");MẢNG (ARRAY)
Mặc dù JavaScript không hỗ tr ợ cấu trúc dữ liệu mảng nhưng Netscape tạo ra phươ ngthức cho phép bạn tự tạo ra các hàm khở i tạo mảng như sau:function InitArray(NumElements){
this.length = numElements;for (var x=1; x
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
31/80
JavaScript 31
this[x]=0}return this;
}
Nó tạo ra một mảng vớ i kích thướ c xác định tr ướ c và điền các giá tr ị 0. Chú ý r ằng thành
phần đầu tiên trong mảng là độ dài mảng và không đượ c sử dụng.Để tạo ra một mảng, khai báo như sau:
myArray = new InitArray (10)
Nó tạo ra các thành phần từ myArray[1] đến myArray[10] vớ i giá tr ị là 0. Giá tr ị cácthành phần trong mảng có thể đượ c thay đổi như sau:
myArray[1] = "Nghệ An"
myArray[2] = "Lào"
Sau đây là ví dụ đầy đủ: Array Exemple
function InitArray(numElements) {
this.length = numElements;for (var x=1; x
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
32/80
JavaScript 32
Hình 5.9: Ví dụ mảng
SỰ KIỆN
JavaScript là ngôn ngữ định hướ ng sự kiện, ngh ĩ a là sẽ phản ứng tr ướ c các sự kiện xácđịnh tr ướ c như kích chuột hay tải một văn bản. Một sự kiện có thể gây ra việc thực hiệnmột đoạn mã lệnh (gọi là các chươ ng triình xử lý sự kiện) giúp cho chươ ng trình có thể
phản ứng một cách thích hợ p.
Ch ươ ng trình x ử lý s ự ki ện (Event handler): Một đoạn mã hay một hàmđượ c thực hiện để phản ứng tr ướ c một sự kiện gọi là chươ ng trình xử lý sự kiện. Chươ ngtrình xử lý sự kiện đượ c xác định là một thuộc tính của một thẻ HTML:
Ví dụ sau gọi hàm CheckAge() mỗi khi giá tr ị của tr ườ ng văn bản thay đổi:
Đoạn mã của chươ ng trình xử lý sự kiện không là một hàm; nó là các lệnh của JavaScriptcách nhau bằng dấu chấm phẩy. Tuy nhiên cho mục đích viết thành các module nên viếtdướ i dạng các hàm.
Một số chươ ng trình xử lý sự kiện trong JavaScript:
onBlur Xảy ra khi input focus bị xoá từ thành phần form
onClick Xảy ra khi ngườ i dùng kích vào các thành phần hay liênk ết của form.
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
33/80
JavaScript 33
onChange Xảy ra khi giá tr ị của thành phần đượ c chọn thay đổi
onFocus Xảy ra khi thành phần của form đượ c focus(làm nổi lên).
onLoad Xảy ra trang Web đượ c tải.
onMouseOver Xảy ra khi di chuyển chuột qua k ết nối hay anchor.
onSelect Xảy ra khi ngườ i sử dụng lựa chọn một tr ườ ng nhậ p dữ liệu trên form.
onSubmit Xảy ra khi ngườ i dùng đưa ra một form.
onUnLoad Xảy ra khi ngườ i dùng đóng một trang
Sau đây là bảng các chươ ng trình xử lý sự kiện có sẵn của một số đối tượ ng. Các đốitượ ng này sẽ đượ c trình bày k ỹ hơ n trong phần sau.
Đối tượ ng Chươ ng trình xử lý sự kiện có sẵn
Selection list onBlur, onChange, onFocus
Text onBlur, onChange, onFocus, onSelect
Textarea onBlur, onChange, onFocus, onSelect
Button onClick
Checkbox onClick
Radio button onClick
Hypertext link onClick, onMouseOver, onMouseOut
Clickable Imagemap area onMouseOver, onMouseOut
Reset button onClick
Submit button onClick
Document onLoad, onUnload, onError
Window onLoad, onUnload, onBlur, onFocus
Framesets onBlur, onFocus
Form onSubmit, onReset
Image onLoad, onError, onAbort
Ví dụ sau là một đoạn mã script đơ n giản của chươ ng trình xử lý sự kiện thẩm định giá tr ị đưa vào trong tr ườ ng text. Tuổi của ngườ i sử dụng đượ c nhậ p vào trong tr ườ ng này vàchươ ng trình xử lý sự kiện sẽ thẩm định tính hợ p lệ của dữ liệu đưa vào. Nếu không hợ plệ sẽ xuất hiện một thông báo yêu cầu nhậ p lại. Chươ ng trình xử lý sự kiện đượ c gọi mỗikhi tr ườ ng AGE bị thay đổi và focus chuyển sang tr ườ ng khác. Hình 5.10 minh hoạ k ếtquả của ví dụ này
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
34/80
JavaScript 34
An Event Handler Exemple
function CheckAge(form) {
if ( (form.AGE.value120) )
{
alert("Tuổi nhậ p vào không hợ p lệ! Mờ i bạn nhậ p lại");
form.AGE.value=0;
}
}
Nhậ p vào tên của bạn:
Tên
Đệm
Họ
Age
Bạn thích mùa nào nhất:
Mùa xuânMùa hạ
Mùa thu
Mùa đông
Hãy chọn những hoạt động ngoài tr ờ i mà bạn yêu thích:
Đi bộ -
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
35/80
JavaScript 35
Tr ượ t tuyết
Thể thao dướ i nướ c
Đạ p xe
Hình 5.10: Minh hoạ cho ví dụ Event Handler
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
36/80
JavaScript 36
BÀI TẬP
3.1.12. CÂU HỎI
1. Viết một đoạn lệnh JavaScript sử dụng cách thức confirm() và câu lệnh if...then để thực
hiện:Hỏi ngườ i sử dụng có muốn nhận đượ c một lờ i chào không
Nếu có thì hiện ảnh wellcome.jpg và một lờ i chào.
Nếu không thì viết ra một lờ i thông báo
2. Viết một đoạn lệnh JavaScript để thực hiện:
Hỏi ngườ i sử dụng: "10+10 bằng bao nhiêu?"
Nếu đúng thì hỏi tiế p: Có muốn tr ả lờ i câu thứ hai không?"
Nếu muốn thì hỏi: "10*10 bằng bao nhiêu?"
Đánh giá k ết quả bằng biểu thức logic sau đó viết ra màn hình:Đúng: "CORRECT"; Sai: "INCORRECT"
Gợ i ý: Sử dụng biến toàn cục lưu k ết quả đúng để so sánh vớ i k ết qủa đưa vào.
3. Câu lệnh nào trong các câu sau đây sử dụng sai thẻ sự kiện
a.
b.
c.
d. e.
f.
4. Điều gì xảy ra khi thực hiện script sau:
Exercise 5.4
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
37/80
JavaScript 37
This is my page!
5. Sử dụng vòng lặ p while để mô phỏng các vòng lặ p for sau:
a.
for (j = 4; j > 0; j --) {
document.writeln(j + "
");}
b.
for (k = 1; k
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
38/80
JavaScript 38
2. Thực hiện hỏi ngườ i sử dụng:
Exercise 3.3
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
39/80
JavaScript 39
// OUTPUT RESULT
document.write(output);
// STOP HIDING FROM OTHER BROWSERS -->
3. Các câu sai: a, c, e. Các câu đúng: b, d, f
4. Khi chươ ng trình đượ c chạy (load), hàm wellcome sẽ thực hiện hỏi tên ngườ i sử dụng, lưu tên đó vào biến toàn cục name. Khi ngườ i sử dụng sang một địa chỉ URL khác, hàm farewell() sẽ thực hiện gửi một lờ i cảm ơ n tớ i ngườ i sử dụng.
5. Sử dụng vòng lặ p while như sau:
a.
j = 5;
while (--j > 0) {
document.writeln(j + "
");}
b.
k = 1;
while (k
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
40/80
JavaScript 40
4. CÁC ĐỐI TƢỢNG TRONG JAVASCRIPT
Như đã nói JavaScript là ngôn ngữ lậ p trình d ự a trên đố i t ượ ng , nhưng không h ướ ng đố i
t ượ ng bở i vì nó không hỗ tr ợ các lớ p cũng như tính thừa k ế. Phần này nói về các đốitượ ng trong JavaScript và hình 6.1 chỉ ra sơ đồ phân cấ p các đối tượ ng.
Trong sơ đồ phân cấ p các đối tượ ng của JavaScript, các đối tượ ng con thực sự là cácthuộc tính của các đối tượ ng bố mẹ. Trong ví dụ về chươ ng trình xử lý sự kiện tr ướ c đâyform tên PHIEU_DIEU_TRAlà thuộc tính của đối tượ ng document và tr ườ ng text AGE làthuộc tính của form PHIEU_DIEU_TRA. Để tham chiếu đến giá tr ị của AGE, bạn phải sử dụng:
document.PHIEU_DIEU_TRA.AGE.value
Các đối tượ ng có thuộc tính (properties), phươ ng thức (methods), và các chươ ng trình xử lý sự kiện (event handlers) gắn vớ i chúng. Ví dụ đối tượ ng document có thuộc tính title
phản ánh nội dung của thẻ của document . Bên cạnh đó bạn thấy phươ ng thứcdocument.write đượ c sử dụng trong nhiều ví dụ để đưa văn bản k ết quả ra document .
Đối tượ ng cũng có thể có các chươ ng trình xử lý sự kiện. Ví dụ đối tượ ng link có haichươ ng trình xử lý sự kiện là onClick và onMouseOver. onClick đượ c gọi khi có đốitượ ng link đượ c kích, onMouseOver đượ c gọi khi con tr ỏ chuột di chuyển qua link.
Khi bạn tải một document xuống Navigator, nó sẽ tạo ra một số đối tượ ng cùng vớ i nhữnggiá tr ị các thuộc tính của chúng dựa trên file HTML của document đó và một vài thôngtin cần thiết khác. Những đối tượ ng này tồn tại một cách có cấ p bậc và phản ánh chínhcấu trúc của file HTML đó.
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
41/80
JavaScript 41
Sơ đồ sau sẽ minh hoạ sự phân cấ p của các đối tượ ng này
Trong sơ đồ phân cấ p này, các đối tượ ng con chính là các thuộc tính của một đối tượ ngcha. Ví dụ như một form tên là form1 chính là một đối tượ ng con của đối tượ ng document
và đượ c gọi tớ i là document.form1Tất cả các trang đều có các đối tượ ng sau đây:
navigator: có các thuộc tính tên và phiên bản của Navigator đang đượ c sử dụng, dùng cho MIME type đượ c hỗ tr ợ bở i client và plug-in đượ c cài đặttrên client.
window: là đối tượ ng ở mức cao nhất, có các thuộc tính thực hiện áp dụngvào toàn bộ cửa sổ.
document: chứa các thuộc tính dựa trên nội dung của document như tên,màu nền, các k ết nối và các forms.
location: có các thuộc tính dựa trên địa chỉ URL hiện thờ i
Window Texturea
Text
FileUpload
Password
Hidden
Submit
Reset
Radio
Checkbox
Button
Select
Plugin
Mime TypeFrame
document
Location
History
Layer
Link
Image
Area
Anchor
Applet
Plugin
Form
navigator
Option
Hình 6.1: Sơ đồ 1 - Phân cấ p đối tượ ng Navigator
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
42/80
JavaScript 42
history: Chứa các thuộc tính về các URL mà client yêu cầu tr ướ c đó.
Sau đây sẽ mô tả các thuộc tính, phươ ng thức cũng như các chươ ng trình xử lý sự kiệncho từng đối tượ ng trong JavaScript.
ĐỐI TƢỢNG NAVIGATORĐối tượ ng này đượ c sử dụng để đạt đượ c các thông tin về trình duyệt như số phiên bản.Đối tượ ng này không có phươ ng thức hay chươ ng trình xử lý sự kiện.
Các thu ộc tính
appCodeName Xác định tên mã nội tại của trình duyệt (Atlas).
AppName Xác định tên trình duyệt.
AppVersion Xác định thông tin về phiên bản của đối tượ ng navigator.
userAgent Xác định header của user - agent.
Ví d ụ
Ví dụ sau sẽ hiển thị các thuộc tính của đối tượ ng navigator
Navigator Object Exemple
document.write("appCodeName = "+navigator.appCodeName + "
");document.write("appName = "+navigator.appName + "
");document.write("appVersion = "+navigator.appVersion + "
");document.write("userAgent = "+navigator.userAgent + "
"); -
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
43/80
JavaScript 43
ĐỐI TƢỢNG WINDOWĐối tượ ng window như đã nói ở trên là đối tượ ng ở mức cao nhất. Các đối tượ ngdocument, frame, vị trí đều là thuộc tính của đối tượ ng window.
4.1.1. CÁC THUỘC TÍNH
defaultStatus - Thông báo ngầm định hiển thị lên trên thanh tr ạng thái của cửasổ
Frames - Mảng xác định tất cả các frame trong cửa sổ.
Length - Số lượ ng các frame trong cửa sổ cha mẹ. Name - Tên của cửa sổ hiện thờ i.
Parent - Đối tượ ng cửa sổ cha mẹ
Self - Cửa sổ hiện thờ i.
Status - Đượ c sử dụng cho thông báo tạm thờ i hiển thị lên trên thanh thạng tháicửa sổ. Đựơ c sử dụng để lấy hay đặt lại thông báo tr ạng thái và ghi đè lêndefaultStatus.
Top - Cửa sổ ở trên cùng.
Window - Cửa sổ hiện thờ i.
Hình 6.2: Minh hoạ cho đối tượ ng Navigator
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
44/80
JavaScript 44
4.1.2. CÁC PHƢƠNG THỨC
alert ("message") -Hiển thị hộ p hội thoại vớ i chuỗi "message" và nút OK.
clearTimeout(timeoutID) -Xóa timeout do SetTimeout đặt. SetTimeout tr ả lạitimeoutID
windowReference.close -Đóng cửa sổ windowReference.
confirm("message") -Hiển thị hộ p hội thoại vớ i chuỗi "message", nút OK vànút Cancel. Tr ả lại giá tr ị True cho OK và False cho Cancel.
[windowVar = ][window]. open("URL", "windowName", [ "windowFeatures"
] ) - Mở cửa sổ mớ i.
prompt ("message" [,"defaultInput"]) - Mở một hộ p hội thoại để nhận dữ liệuvào tr ườ ng text.
TimeoutID = setTimeout(expression,msec) - Đánh giá biểu thức expresion sau
thờ i gian msec.Ví dụ: Sử dụng tên cửa sổ khi gọi tớ i nó như là đích của một form submit hoặc trong mộtHipertext link (thuộc tính TARGET của thẻ FORM và A).
Trong ví dụ tạo ra một tớ i cửa sổ thứ hai, như nút thứ nhất để mở một cửa sổ r ỗng, sau đó một liên k ết sẽ tải file doc2.html xuống cửa sổ mớ i đó r ồi một nút khác dùng để đóng củasổ thứ hai lại, ví dụ này lưa vào file window.html :
Frame Example
Load a file into window2
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
45/80
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
46/80
JavaScript 46
ĐỐI TƢỢNG FRAME
Một cửa số có thể có một vài frame. Các frame có thể cuộn một cách độc lậ p vớ inhau và mỗi frame có URL riêng. frame không có các chươ ng trình xử lý sự kiện. Sự kiện onLoad và onUnLoad là của đối tượ ng window.
4.1.4. CÁC THUỘC TÍNH
frames - Mảng tất cả các frame trong cửa sổ.
Name - Thuộc tính NAME của thẻ
Length - Số lượ ng các frame con trong một frame.
Parent - Cửa sổ hay frame chứa nhóm frame hiện thờ i.
self - frame hiện thờ i.
Window - frame hiện thờ i.
4.1.5. CÁC PHƢƠNG THỨC
clearTimeout (timeoutID) - Xoá timeout do setTimeout lậ p. SetTimeout tr ả lạitimeoutID.
TimeoutID = setTimeout (expression,msec) - Đánh giá expression sau khi hếtthờ i gian msec.
4.1.6. SỬ DỤNG FRAME
4.1.6.1.
a) Tạo một frame (create)Để tạo một frame, ta sử dụng thẻ FRAMESET. Mục đích của thẻ này là định ngh ĩ a mộttậ p các frame trong một trang.
Ví d ụ1 : tạo frame ( hình 17)
Frame Example
Sơ đồ sau hiển thị cấu trúc của các frame: Cả 3 frame đều trên cùng một cửa sổ cha, mặcdù 2 trong số các frame đó nằm trong một frameset khác.
Top
listFrame (category html)
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
47/80
JavaScript 47
Bạn có thể gọi tớ i những frame tr ướ c đó bằng cách sử dụng thuộc tính frames như sau:
listFrame chính là top.frames[0]
contentFrame chính là top.frames[1]
navigatorFrame chính là top.frames[2]
Hình 6.4: K ết quả việc tạo frame trong
Ví d ụ 2 : Cũng giống như một sự lựa chọn, bạn có thể tạo ra một cửa sổ giống như ví dụ tr ướ c nhưng trong mỗi đỉnh của hai frame lại có một cửa sổ cha riêng từ navigateFrame.Mức frameset cao nhất có thể đượ c định ngh ĩ a như sau:
Frame Example
Trong file muske13.html lại tiế p tục đặt một frameset:
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
48/80
JavaScript 48
Frame Example
Khi đó k ết quả hiển thị của ví dụ 2 giống ví dụ 1 nhưng sự phân cấ p của các frames lạikhác hẳn:
Bạn có thể gọi tớ i các frame trên bằng cách sử dụng thuộc tính mảng frames như sau:
upperFrame chính là top.frames[0]navigatorFrame chính là top.frames[1]
listFrame chính là upperFrame.frames[0]
hoặc top.frames[0].frames[0]
contentFrame chính là upperFrame.frames[1]
hoặc top.frames[0].frames[1]
4.1.6.2. b) Cập nhật một frame (update)
Bạn có thể cậ p nhật nội dung của một frame bằng cách sử dụng thuộc tính location để đặtđịa chỉ URL và phải định chỉ rõ vị trí của frame trong cấu trúc.
Trong ví dụ trên, nếu bạn thêm một dòng sau vào navigatorFrame:
thì khi nút “Titles only” đượ c nhấn, file artist.html sẽ đượ c tải vào upperFrame, và haiframe listFrame, contentFrame sẽ bị đóng lại như chúng chưa bao giờ tồn tại.
top
upperFrame(muske13.html)
navigatorFrame(navigator.html)
listFrame (category.html)
contentFrame (titles.html)
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
49/80
JavaScript 49
ĐỐI TƢỢNG DOCUMENT
Đối tượ ng này chứa các thông tin về document hiện thờ i và cung cấ p các phươ ng thức để đưa thông tin ra màn hình. Đối tượ ng document đượ c tạo ra bằng cặ p thẻ và. Một số các thuộc tính gắn vớ i thẻ .
Các đối tượ ng anchor, forms, history, links là thuộc tính của đối tượ ng document. Khôngcó các chươ ng trình xử lý sự kiện cho các frame. Sự kiện onLoad và onUnLoad là cho đốitượ ng window.
4.1.7. CÁC THUỘC TÍNH
alinkColor - Giống như thuộc tính ALINK.
anchor - Mảng tất cả các anchor trong document.
bgColor - Giống thuộc tính BGCOLOR.
cookie - Sử dụng để xác định cookie. fgColor - Giống thuộc tính TEXT.
forms - Mảng tất cả các form trong document.
lastModified - Ngày cuối cùng văn bản đượ c sửa.
linkColor - Giống thuộc tính LINK.
links - Mảng tất cả các link trong document.
location - URL đầy đủ của văn bản.
referrer - URL của văn bản gọi nó.
title - Nội dung của thẻ .
vlinkColor - Giống thuộc tính VLINK.
4.1.8. CÁC PHƢƠNG THỨC
document.clear - Xoá document hiện thờ i.
document.close - Đóng dòng dữ liệu vào và đưa toàn bộ dữ liệu trong bộ đệmra màn hình.
document.open (["mineType"]) - Mở một stream để thu thậ p dữ liệu vào củacác phwong thức write và writeln.
document.write(expression1 [,expression2]...[,expressionN]) - Viết biểu thứcHTML lên văn bản trông một cửa sổ xác định.
document.writeln (expression1 [,expression2] ... [,expressionN] ) - Giống phươ ng thức trên nhưng khi hết mỗi biểu thức lại xuống dòng.
ĐỐI TƢỢNG ANCHORS
anchor là một đoạn văn bản trong document có thể dùng làm đích cho một siêu liên k ết. Nó đượ c xác định bằng cặ p thẻ và . Đối tượ ng anchor không có thuộc tính, phươ ng thức cũng như chươ ng trình xử lý sự kiện. Mảng anchor tham chiếu đến mỗianchor có tên trong document. Mỗi anchor đượ c tham chiếu bằng cách:
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
50/80
JavaScript 50
document.anchors [index]
Mảng anchor có một thuộc tính duy nhất là length xác định số lượ ng các anchor trongdocument, nó có thể đượ c xác định như sau:
document.anchors.length.
ĐỐI TƢỢNG FORMS
Các form đượ c tạo ra nhờ cặ p thẻ và . Phần lớ n các thuộc tínhcủa đối tượ ng form phản ánh các thuộc tính của thẻ . Có một vài phần tử (elements) là thuộc tính của đối tượ ng forms:
button
checkbox
hidden
password
radio
reset
select
submit
text
textarea
Các phần tử này sẽ đượ c trình bày sau.
Nếu document chứa một vài form, chúng có thể đượ c tham chiếu qua mảng forms. Số lượ ng các form có thể đượ c xác định như sau:
document.forms.length.
Mỗi một form có thể đượ c tham chiếu như sau:
document.forms[index]
4.1.9. CÁC THUỘC TÍNH
action thuộc tính ACTION của thẻ FORM.
elements Mảng chứa tất cả các thành phần trong một form (như checkbox,
tr ườ ng text, danh sách lựa chọnencoding Xâu chứa kiểu MIME đượ c sử dụng để mã hoá nội dung của form
gửi cho server.
length Số lượ ng các thành phần trong một form.
methodThuộc tính METHOD.
target Xâu chứa tên của cửa sổ đích khi submit form
4.1.10. CÁC PHƢƠNG THỨC
formName.submit () - Xuất dữ liệu của một form tên formName tớ i trang xử lý. Phươ ngthức này mô phỏng một click vào nút submit trên form.
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
51/80
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
52/80
JavaScript 52
href - Toàn bộ URL cho document hiện tại.
Pathname - Phần đườ ng dẫn của URL (ví dụ /chap1/page2.html).
port - Cổng truyền thông đượ c sử dụng cho máy tính host, thườ ng là cổngngầm định.
Protocol - Giao thức đượ c sử dụng (cùng vớ i dấu hai chấm) (ví dụ http:).
Search - Câu truy vấn tìm kiếm có thể ở cuối URL cho các script CGI.
Target - Giống thuộc tính TARGET của .
4.1.15. CÁC CHƢƠNG TRÌNH XỬ LÝ SỰ KIỆN
onClick - Xảy ra khi ngườ i sử dụng nhấn vào link.
onMouseOver - Xảy ra khi con chuột di chuyển qua link.
ĐỐI TƢỢNG MATHĐối tượ ng Math là đối tượ ng nội tại trong JavaScript. Các thuộc tính của đối tượ ng nàychứa nhiều hằng số toán học, các hàm toán học, lượ ng giác phổ biến. Đối tượ ng Mathkhông có chươ ng trình xử lý sự kiện.
Việc tham chiếu tớ i number trong các phươ ng thức có thể là số hay các biểu thức đượ cđnáh giá là số hợ p lệ.
4.1.16. CÁC THUỘC TÍNH
E - Hằng số Euler, khoảng 2,718.
LN2 - logarit tự nhiên của 2, khoảng 0,693.
LN10 - logarit tự nhiên của 10, khoảng 2,302.
LOG2E - logarit cơ số 2 của e, khoảng 1,442.
PI - Giá tr ị của , khoảng 3,14159.
SQRT1_2 - Căn bậc 2 của 0,5, khoảng 0,707.
SQRT2 - Căn bậc 2 của 2, khoảng 1,414.
4.1.17.
CÁC PHƢƠNG THỨC Math.abs (number ) - Tr ả lại giá tr ị tuyệt đối của number.
Math.acos (number ) - Tr ả lại giá tr ị arc cosine (theo radian) của number. Giátr ị của number phải nămg giữa -1 và 1.
Math.asin (number ) - Tr ả lại giá tr ị arc sine (theo radian) của number. Giá tr ị của number phải nămg giữa -1 và 1.
Math.atan (number ) - Tr ả lại giá tr ị arc tan (theo radian) của number.
Math.ceil (number ) - Tr ả lại số nguyên nhỏ nhất lớ n hơ n hoặc bằng number.
Math.cos (number ) - Tr ả lại giá tr ị cosine của number.
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
53/80
JavaScript 53
Math.exp (number ) - Tr ả lại giá tr ị e^ number , vớ i e là hằng số Euler.
Math.floor (number ) - Tr ả lại số nguyên lớ n nhất nhỏ hơ n hoặc bằng number.
Math.log (number ) - Tr ả lại logarit tự nhiên của number.
Math.max (num1,num2) - Tr ả lại giá tr ị lớ n nhất giữa num1 và num2
Math.min (num1,num2) - Tr ả lại giá tr ị nhỏ nhất giữa num1 và num2.
Math.pos (base,exponent ) - Tr ả lại giá tr ị base luỹ thừa exponent.
Math.random (r ) - Tr ả lại một số ngẫu nhiên giữa 0 và 1. Phwong thức này chỉ thực hiện đượ c trên nền tảng UNIX.
Math.round (number ) - Tr ả lại giá tr ị của number làm tròn tớ i số nguyên gầnnhất.
Math.sin (number ) - Tr ả lại sin của number.
Math.sqrt (number ) - Tr ả lại căn bậc 2 của number.
Math.tan (number ) - Tr ả lại tag của number.
ĐỐI TƢỢNG DATE
Đối tượ ng Date là đối tượ ng có sẵn trong JavaScript. Nó cung cấ p nhiều phươ ngthức có ích để xử lý về thờ i gian và ngày tháng. Đối tượ ng Date không có thuộc tính vàchươ ng trình xử lý sự kiện.
Phần lớ n các phươ ng thức date đều có một đối tượ ng Date đi cùng. Các phươ ng thức giớ i
thiệu trong phần này sử dụng đối tượ ng Date dateVar, ví dụ:dateVar = new Date ('August 16, 1996 20:45:04');
4.1.18. CÁC PHƢƠNG THỨC
dateVar .getDate() - Tr ả lại ngày trong tháng (1-31) cho dateVar .
dateVar .getDay() - Tr ả lại ngày trong tuần (0=chủ nhật,...6=thứ bảy) chodateVar .
dateVar .getHours() - Tr ả lại giờ (0-23) cho dateVar .
dateVar .getMinutes() - Tr ả lại phút (0-59) cho dateVar . dateVar .getSeconds() - Tr ả lại giây (0-59) cho dateVar .
dateVar .getTime() - Tr ả lại số lượ ng các mili giây từ 00:00:00 ngày 1/1/1970.
dateVar .getTimeZoneOffset() - Tr ả lại độ dịch chuyểnbằng phút của giờ địa phươ ng hiện tại so vớ i giờ quốc tế GMT.
dateVar .getYear()-Tr ả lại năm cho dateVar.
Date.parse (dateStr ) - Phân tích chuỗi dateStr và tr ả lại số lượ ng các mili giâytính từ 00:00:00 ngày 01/01/1970.
dateVar .setDay(day) - Đặt ngày trong tháng là day cho dateVar .
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
54/80
JavaScript 54
dateVar .setHours(hours) - Đặt giờ là hours cho dateVar .
dateVar .setMinutes(minutes) - Đặt phút là minutes cho dateVar.
dateVar .setMonths(months) - Đặt tháng là months cho dateVar .
dateVar .setSeconds( seconds) - Đặt giây là seconds cho dateVar .
dateVar .setTime(value) - Đặt thờ i gian là value, trong đó value biểu diễn số lượ ng mili giây từ 00:00:00 ngày 01/01/10970.
dateVar .setYear( years) - Đặt năm là years cho dateVar.
dateVar .toGMTString() - Tr ả lại chuỗi biểu diễn dateVar dướ i dạng GMT.
dateVar .toLocaleString()-Tr ả lại chuỗi biểu diễn dateVar theo khu vực thờ igian hiện thờ i.
Date.UTC (year, month, day [,hours] [,minutes] [,seconds]) - Tr ả lại số lượ ngmili giây từ 00:00:00 01/01/1970 GMT.
ĐỐI TƢỢNG STRING
Đối tượ ng String là đối tượ ng đượ c xây dựng nội tại trong JavaScript cung cấ p nhiều phươ ng thức thao tác trên chuỗi. Đối tượ ng này có thuộc tính duy nhất là độ dài (length)và không có chươ ng trình xử lý sự kiện.
4.1.19. CÁC PHƢƠNG THỨC
str.anchor (name) - Đượ c sử dụng để tạo ra thẻ (một cách động). Tham số name là thuộc tính NAME của thẻ .
str.big() - K ết quả giống như thẻ trên chuỗi str .
str.blink() - K ết quả giống như thẻ trên chuỗi str .
str.bold() - K ết quả giống như thẻ trên chuỗi str .
str.charAt(a) - Tr ả lại ký tự thứ a trong chuỗi str.
str.fixed() - K ết quả giống như thẻ trên chuỗi str .
str.fontcolor() - K ết quả giống như thẻ .
str.fontsize( size) - K ết quả giống như thẻ .
str.index0f(srchStr [,index]) - Tr ả lại vị trí trong chuỗi str vị trí xuất hiện đầutiên của chuỗi srchStr . Chuỗi str đượ c tìm từ trái sang phải. Tham số index cóthể đượ c sử dụng để xác định vị trí bắt đầu tìm kiếm trong chuỗi.
str.italics() - K ết quả giống như thẻ trên chuỗi str .
str.lastIndex0f(srchStr [,index]) - Tr ả lại vị trí trong chuỗi str vị trí xuất hiệncuối cùng của chuỗi srchStr . Chuỗi str đượ c tìm từ phải sang trái. Tham số index có thể đượ c sử dụng để xác định vị trí bắt đầu tìm kiếm trong chuỗi.
str.link(href) - Đượ c sử dụng để tạo ra một k ết nối HTML động cho chhuỗi str . Tham số href là URL đích của liên k ết.
str.small() - K ết quả giống như thẻ trên chuỗi str .
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
55/80
JavaScript 55
str.strike() - K ết quả giống như thẻ trên chuỗi str .
str.sub() - Tạo ra một subscript cho chuỗi str , giống thẻ .
str.substring(a,b) - Tr ả lại chuỗi con của str là các ký tự từ vị trí thứ a tớ i vị tríthứ b. Các ký tự đượ c đếm từ trái sang phải bắt đầu từ 0.
str.sup() - Tạo ra superscript cho chuỗi str , giống thẻ .
str.toLowerCase() - Đổi chuỗi str thành chữ thườ ng.
str.toUpperCase() - Đổi chuỗi str thành chữ hoa.
CÁC PHẦN TỬ CỦA ĐỐI TƢỢNG FORM
Form đượ c tạo bở i các phần tử cho phép ngườ i sử dụng đưa thông tin vào. Khi đó, nộidung (hoặc giá tr ị) của các phần tử sẽ đượ c chuyển đến một chươ ng trình trên server quamột giao diện đượ c gọi là Common Gateway Interface(Giao tiế p qua một cổng chung) gọi
tắt là CGISử dụng JavaScript bạn có thể viết những đoạn scripts chèn vào HTML của bạn để làmviệc vớ i các phần tử của form và các giá tr ị của chúng.
B ảng ?: Các ph ần t ử c ủa form
Phần tử Mô tả
button Là một nút bấm hơ n là nút submit hay nút reset
()
checkbox Một checkbox ()
FileUpload Là một phần tử tải file lên cho phép ngườ i sử dụng gửi lên một file()
hidden Một tr ườ ng ẩn ()
password Một tr ườ ng text để nhậ p mật khẩu mà tất cả các ký tự nhậ p vào đều hiểnthị là dấu (*)()
radio Một nút bấm ()
reset Một nút reset()
select
Một danh sách lựa chọn
(option1
option2)
submit Một nút submit ()
text Một tr ườ ng text ()
textArea Một tr ườ ng text cho phép nhậ p vàp nhiều dòng
default text)
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
56/80
JavaScript 56
Mỗi phần tử có thể đượ c đặt tên để JavaScript truy nhậ p đến chúng qua tên
4.1.20. THUỘC TÍNH TYPE
Trong mỗi phần tử của form đều có thuộc tính type, đó là một xâu chỉ định rõ kiểu của
phần tử đượ c đưa vào như nút bấm, một tr ườ ng text hay một checkbox...Xâu đó có thể là một trong các giá tr ị sau:
Text field: "text"
Radio button: "radio"
Checkbox: "checkbox"
Hidden field: "hidden"
Submit button: "submit"
Reset button: "reset"
Password field: "password"
Button: "button"
Select list: "select-one"
Multiple select lists: "select-multiple"
Textarea field: "textarea"
4.1.21. PHẦN TỬ BUTTON
Trong một form HTML chuẩn, chỉ có hai nút bấm có sẵn là submit và reset bở i vị dữ liệu
trong form phải đượ c gửi tớ i một vài địa chỉ URL (thườ ng là CGI-BIN script) để xử lý vàlưu tr ữ.
Một phần tử button đượ c chỉ định rõ khi sử dụng thẻ INPUT:
Trong thẻ INPUT, name là tên của button, thuộc tính VALUE có chứa nhãn của button sẽ đượ c hiển thị trên Navigator của browser.
Chỉ có một thẻ sự kiện duy nhất đối vớ i button là onClick . K ết hợ p vớ i nó là cách thứcduy nhất click .Phần tử buttton có khả năng mở r ộng cho phép ngườ i lậ p trình JavaScriptcó thể viết đượ c một đoạn mã lệnh JavaScript để thực thi việc thêm vào một nút bấm
trong một script.Trong ví dụ sau, thay vì sử dụng onChange, bạn có thể chỉnh sửa script để định giá biểuthức khi button đượ c bấm.
Ví dụ: Định giá một form sử dụng phần tử button.
button Example
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
57/80
JavaScript 57
form.results.value = eval(form.entry.value);
}
// STOP HIDING FROM OTHER BROWSERS -->
Enter a JavaScript mathematical expression:
The result of this expression is:
4.1.22. PHẦN TỬ CHECKBOX
Các phần tử checkbox có khả năng bật tắt dùng để chọn hoặc không chọn một thông tin.
Các checkbox có nhiều thuộc tính và cách thức hơ n button. Bảng dướ i đây là danh sáchcác thuộc tính và các cách thức của phần tử checkbox.
Bảng . Các thuộc tính và cách thức của phần tử checkbox.
Cách thức và thuộctính
Mô tả
checked Cho biết tr ạng thái hiện thờ i của checkbox (thuộc tính)
defaultChecked Cho biết tr ạng thái mặc định của phần tử (thuộc tính)
name Cho biết tên của phần tử đượ c chỉ định trong thẻ INPUT (thuộc
tính)
value Cho biết giá tr ị hiện thờ i của phần tử đượ c chỉ định trong thẻ INPUT (thuộc tính)
click() Mô tả một click vào checkbox (Cách thức)
Phần tử checkbox chỉ có một thẻ sự kiện là onClick
Ví dụ: Tạo hộ p checkbox để nhậ p vào một số r ồi lựa chọn tính nhân đôi và bình phươ ng:
checkbox Example
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
58/80
JavaScript 58
Value:
Action (default double):
Square
Result:
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
59/80
JavaScript 59
Trong script này, bạn đã thấy cách sử dụng thẻ sự kiện onClick cũng như thuộc tínhchecked là một giá tr ị kiểu Boolean có thể dùng làm điều kiện trong câu lệnh if...else
Bạn có thể thêm một checkbox tên là square vào form. Nếu hộ p này đượ c check, chươ ng
trình sẽ lấy giá tr ị của nó, nếu không, một thực thi đượ c mặc định sẽ nhân đôi giá tr ị củanó. Thẻ sự kiện onClick trong checkbox đượ c định ngh ĩ a:
( )
Khi đó nếu ngườ i dùng thay đổi một câu lệnh khác, form sẽ đượ c tính toán lại.
Để tạo ra sự mở r ộng cho checkbox. bạn có thể thay đổi hàm calculate() như sau:
function calculate(form,callingField) {
if (callingField == "result") { // if (1)
if (form.square.checked) { // if (2)
form.entry.value = Math.sqrt(form.result.value);
}
else {
form.entry.value = form.result.value / 2;
} //end if(2)
}
else {
if (form.square.checked) { // if (3)
form.result.value=form.entry.value*form.entry.value;}
else {
form.result.value = form.entry.value * 2;
} // end if (3)
} // end if (1)
}
4.1.23. PHẦN TỬ FILE UPLOAD
Phần tử này cung cấ p cho form một cách để ngườ i sử dụng có thể chỉ rõ một file đưa vàoform xử lý. Phần tử file Upload đượ c chỉ định rõ trong JavaScript bằng đối tượ ngFileUpload.
Đối tượ ng chỉ có hai thuộc tính là name và value, cả hai đều là giá tr ị xâu như các đốitượ ng khác. Không có cách thức hay thẻ file cho đối tượ ng này.
4.1.24. PHẦN TỬ HIDDEN
Phần tử hidden là phần tử duy nhất trong số tất cả các phần tử của form không đượ c hiểnthị trên Web browser. Tr ườ ng hidden có thể sử dụng để lưu các giá tr ị cần thiết để gửi tớ i
server song song vớ i sự xuất ra từ form (form submission) nhưng nó không đượ c hiển thị
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
60/80
JavaScript 60
trên trang. Mọi ngườ i có thể sử dụng trong JavaScript để lưu các giá tr ị trong suốt mộtscript và để tính toán không cần form.
Đối tượ ng hidden chỉ có hai thuộc tính là name và value, đó cũng là những giá tr ị xâugiống các đối tượ ng khác. Không có cách thức hay thẻ sự kiện nào cho đối tượ ng này.
4.1.25.
PHẦN TỬ PASSWORD
Đối tượ ng Password là đối tượ ng duy nhất trong các đối tượ ng của form mà khi gõ bất k ỳ ký tự nào vào cũng đều hiển thị dấu sao(*). Nó cho phép đưa vào những thông tin bí mậtnhư đăng ký mật khẩu...
Đối tượ ng Password có 3 thuộc tính giống tr ườ ng text là: defaultValue, name và value.Không giống vớ i hai phần tử ở trên, tr ườ ng Password có nhiều cách thức hơ n(focus(),
blur(), and select() ) và tươ ng ứng vớ i các thẻ sự kiện: onFocus, onBlur, and onSelect.
Phần này sẽ đượ c nói k ỹ hơ n trong đối tượ ng text.
4.1.26.
PHẦN TỬ RADIO
Đối tượ ng radio gần giống sự bật tắt checkbox khi có hai nút radio k ết hợ p thành mộtnhóm. Khi nhiều radio đượ c k ết hợ p thành một nhóm, chỉ có một nút đượ c chọn trong bấtk ỳ một thờ i điểm nào. Ví dụ dòng lệnh sau tạo ra một nhóm radio có ba nút tên là test:
1
2
3
Nhóm các nút radio lại bằng cách đặt cho chúng có cùng một tên trong các thẻ INPUT.
Có một vài thuộc tính để kiểm tra tr ạng thái hiện thờ i của một nhóm nút radio. Bảng sauhiển thị các thuộc tính và cách thức của đối tượ ng radio.
Bảng? . Các thuộc tính và cách thức của đối tượ ng radio.
Thuộc tính và cáchthức
Mô tả
checked Mô tả tr ạng thái hiện thờ i của phần tử radio (thuộc tính)
defaultChecked Mô tả tr ạng thái mặc định của phần tử (thuộc tính)
index Mô tả thứ tự của nút radio đượ c chọn hiện thờ i trong một nhóm
length Mô tả tổng số nút radio trong một nhóm
name Mô tả tên của phần tử đượ c chỉ định trong thẻ INPUT (thuộctính)
value Mô tả giá tr ị hiện thờ i của phần tử đượ c định ra trong thẻ INPUT(thuộc tính)
click() Mô phỏng một click trên nút radio (cách thức)
Cũng như checkbox, radio chỉ có một thẻ sự kiện là onClick.
Không có bất k ỳ một đối tượ ng form nào có thuộc tính index và length. Do một nhómradio gồm nhiều phần tử radio, nên chúng đượ c đặt trong một mảng các nút radio và đượ cđánh số từ 0. Trong ví dụ nhóm radio có tên test ở trên, nếu nhóm đó nằm trong một form
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
61/80
JavaScript 61
có tên là "testform", bạn có thể gọi tớ i nút radio thứ hai bằng tên "testform.test[1]" và cóthể kiểm tra giá tr ị của nó bằng "testform.test[1].checked"
Để minh hoạ rõ cách dùng đối tượ ng radio, ta xem ví dụ sau:
Ví dụ:
radio button Example
Value:
Action:
Double
Square
Result:
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
62/80
JavaScript 62
onChange="calculate(this.form,this.name);">
Trong ví dụ này, sự thay đổi từ checkbox ở trên là r ất khó nhận biết. Thay cho mộtcheckbox trong ví dụ tr ướ c, ở đây ta sử dụng hai nút radio vớ i hai giá tr ị khác nhau:double và square
Như ta đã biết có thể truy nhậ p đến các nút radio qua một mảng, do đó hai nút này có thể truy nhậ p bằng action[0] và action[1]. Bằng cách này, bạn chỉ cần thay đổi tham chiếuđến hàm calculate() từ form.square.checked thành form.action[1].checked.
4.1.27. PHẦN TỬ RESET
Sử dụng đối tượ ng reset, bạn có thể tác động ngượ c lại để click vào nút Reset. Cũng giốngđối tượ ng button, đối tượ ng reset có hai thuộc tính là name và value, và một cách thứcclick(), một thẻ sự kiện onClick.
Hầu hết những ngườ i lậ p trình khong sử dụng thẻ sự kiện onClick của nút reset để kiểmtra giá tr ị của nút này, đối tượ ng reset thườ ng dùng để xoá form.
Ví dụ sau minh hoạ cách sử dụng nút reset để xoá các giá tr ị của form.
Ví dụ:
reset Example
//SCRIPT>
-
8/20/2019 Huong Dan Hoc Javascript Co Ban Nang Cao 141021131105 Conversion Gate02
63/80
JavaScript 63
4.1.28. PHẦN TỬ SELECT
Danh sách lựa chọn trong các form HTML xuất hiện menu drop-down hoặc danh sáchcuộn đượ c của các đối tượ ng có thể đượ c lựa chọn. Các danh dách đượ c xây dựng bằngcách sử dụng hai thẻ SELECT và OPTION. Ví dụ:
1
2
3
tạo ra ba thành phần của menu thả drop-down vớ i ba lựa chọn 1,2 và 3. Sử dụng thuộctính SIZE bạn có thể tạo ta một danh sách cuộn vớ i số phần tử hiển thị ở lần thứ nhất. Để
bật menu drop-down trong một menu cuộn vớ i hai thành phần hiển thị, bạn có thể sử dụngnhư sau:
1
2
3
Trong cả hai ví dụ trên, ngườ i sử dụng chỉ có thể có một lựa chọn. Nếu sử dụng thuộc tínhMULTIPLE, bạn có thể cho phép ngườ i sử dụng lựa chọn nhiều hơ n một giá tr ị trongdanh sách lựa chọn:
1
2
3
Danh sách lựa chọn trong JavaScript là đối tượ ng select. Đối tượ ng này tạo ra một vàithành phần tươ ng tự các button và radio.
Vớ i các thành phần lựa chọn, danh sách các lựa chọn đượ c chứa trong một mảng đượ cđánh số từ 0. Trong tr ườ ng hợ p này, mảng là một thuộc tính của đối tượ ng select gọi làoptions.
Cả việc lựa chọn các option và từng phần tử option riêng biệt đều có những thuộc tính. Bổ sung thêm vào mảng option, ph�