Tổng quan về Javascript

Nhằm giúp người học lập trình Javascript dễ dàng. Hiệp Sĩ IT đã thiết kế bài học lập trình Javascript từ cơ bản đến năng cao. Có nhiều ví dụ về Javascript trong bài học.

JavaScript là một ngôn ngữ kịch bản dựa trên đối tượng tương đối.

Javascript Không phải là trình biên dịch, mà là trình thông dịch. Bộ thông dịch Javascript được nhúng vào trình duyệt.

Javacript thường sử dụng ở đâu trong trang web?

  • Kiểm tra các ràng buộc phia Client

  • Tạo các menu động

  • Hiển thị ngày và giờ

  • Hiện thị Windows, các hộp hội thoại (dialog box, cofirm dialog box, promt dialog box)...

Yêu cầu trước khi học Javascript :

Trước khi học Javascript bạn phải có kiến thức về HTML


Hướng dẫn học

Đối với các hướng dẫn, bạn có thể sử dụng menu ở bên trái để xem nhanh các bài hướng dẫn, hoặc bạn có thể đọc nó từ trang hiện tại đến trang kế tiếp bằng cách nhấn nút "Bài kế tiếp >>", nằm ở đầy trang hoặc nằm ở cuối trang. Nếu bạn muốn xem demo, click vào nút: Xem ví dụ .

Xem ví dụ sau:

<h2>Welcome to JavaScript</h2>  
<script>  
document.write("Học Javascript không khó, mà khổ");  
</script>  

Xem ví dụ
 

 

Giới thiệu về Javascript

JavaScript là một ngôn ngữ kịch bản (scripting language) được dùng để tạo các script ở máy client (client-side script) và máy server (server-side script). Các script ở máy client được thực thi tại trình duyệt, các script ở máy server được thực hiện trên server. Chương này sẽ giới thiệu cho chúng ta về ngôn ngữ Javascript, và cách chèn một script vào trong tài liệu HTML.

HTML lúc đầu được phát triển như là một định dạng của tài liệu có thể chuyển dữ liệu trên Internet Tuy nhiên, không lâu sau đó, trọng tâm của HTML nặng tính hàn lâm và khoa học dần chuyển hướng sang người dùng thường nhật vì ngày nay người dùng xem Internet như là một nguồn thông tin và giải trí. Các trang Web ngày càng mang tính sáng tạo và đẹp mắt hơn nhằm thu hút nhiều người dùng hơn. Nhưng thực chất kiểu dáng và nội dung bên trong vẫn không thay đổi. Và người dùng hầu như không thể điều khiển trên trang Web mỗi khi nó được hiển thị.

Javascript được phát triển như là một giải pháp cho vấn đề nêu trên. Javascript là một ngôn ngữ kịch bản được Sun Microsystems và Netscape phát triển. Nó được dùng để tạo các trang Web động và tương tác trên Internet. Đối với những người phát triển HTML, Javascript rất hữu ích trong việc xây dựng các hệ thống HTML có thể tương tác với người dùng.

JavaScript là gì?

Sun Microsystems đã viết ra một ngôn ngữ phức tạp và mạnh mẽ mà chúng ta đã biết đó là ngôn ngữ Java. Mặc dù Java có tính khả dụng cao nhưng nó lại phù hợp nhất đối với các nhà lập trình có kinh nghiệm và cho các công việc phức tạp hơn. Netscape Communications nhận thấy nhu cầu cần một ngôn ngữ thiết kế web có khả năng tương tác vớI ngườI sử dụng hay vớI các Java Applet, dễ sử dụng ngay cả vớI những ngườI lập trình ít kinh nghiệm.

LiveScript là một ngôn ngữ mớI chỉ ở dạng phác thảo, tuy nhiên nó hấp dẫn ngườI sử dụng vì hứa hẹn sẽ đáp ứng tốt những yêu cầu trên. LiveScript được thiết kế theo tinh thần của nhiều ngôn ngữ script đơn giản nhưng nó lại có tính khả dụng cao được thiết kế đặc biệt để xây dựng các trang Web (chẳng hạn như HTML và các form tương tác). Để giúp ‘bán chạy’ ngôn ngữ mới này, Netscape hợp tác với Sun cho ra đời ngôn ngữ Javascript. Trên thực tế, Microsoft là người tiên phong triển khai phiên bản của Javascript (còn có tên là Jscript), nhưng họ không sử dụng các đặc tả chính thức của Javascript.

Mục tiêu của JavaScript là nhằm cung cấp cho các nhà phát triển Web một số khả năng và quyền điều khiển chức năng cho trang Web. Mã Javascript có khả năng nhúng trong tài liệu HTML để điều khiển nội dung của trang Web và kiểm tra sự hợp lệ của dữ liệu mà người dùng nhập vào. Khi một trang hiển thị trong trình duyệt, các câu lệnh được trình duyệt thông dịch và thực thi.

JavaScript

JavaScript là một ngôn ngữ kịch bản dựa trên đối tượng nhằm phát triển các ứng dụng Internet chạy trên phía client và phía server.
Các ứng dụng client được chạy trong một trình duyệt như Netscape Navigator hoặc Internet Explorer, và các ứng dụng server chạy trên một Web server như Microsoft’s Internet Information Server hoặc Netscape Enterprise Server.

Hiệu ứng và quy tắc JavaScript

JavaScript là một ngôn ngữ lập trình được nhúng được trong các trang HTML. JavaScript nâng cao tính động và khả năng tương tác cho web-site bằng cách sử dụng các hiệu ứng của nó như thực hiện các phép tính, kiểm tra form, viết các trò chơi, bổ sung các hiệu ứng đặc biệt, tuỳ biến các chọn lựa đồ hoạ, tạo ra các mật khẩu bảo mật và hơn thế nữa.

Chúng ta có thể sử dụng JavaScript để:

Tương tác với người dùng.Chúng ta có thể viết mã để đáp lạI các sự kiện. Các sự này sẽ có thể phát sinh bởi người dùng - - nhấp chuột hay được phát sinh từ hệ thống - - định lại kích thước của trang và v.v.
Thay đổi nội dung động. Mã JavaScript có thể dùng để thay đổi nội dung và vị trí các phần tử một cách động trên một trang nhằm đáp lại sự tương tác với người dùng.
Kiểm tra tính hợp lệ dữ liệu. Chúng ta có thể viết mã nhằm kiểm tra tính hợp lệ của dữ liệu do người dùng nhập vào trước khi nó được gửi lên Web server để xử lý.
Giống như các ngôn ngữ khác, JavaScript cũng tuân thủ một số quy tắc ngữ pháp căn bản. Việc nắm vững các quy tắc ngữ pháp này có thể giúp ta đọc được script và tự viết các script không bị lỗi.

Một số trong các luật này bao gồm:

Dùng Caps. JavaScript phân biệt chữ hoa chữ thường
Dùng Pairs. Trong JavaScript, luôn luôn có cặp ký hiệu mở và đóng. Lỗi sẽ xuất hiện khi bỏ sót hoặc đặt sai một trong hai ký hiệu này.
Dùng Spaces (các ký tự trắng).Như HTML, JavaScript thường bỏ qua ký tự trắng. Trong JavaScript, ta có thể thêm vào các ký tự trắng hoặc các tab giúp cho ta dễ dàng đọc hay sửa các file script.
Dùng Chú thích (Comments).Các chú thích giúp ta ghi chú về chức năng của đoạn script, thờI gian và ngườI tạo ra đoạn script.
Mặc dù cả client-side JavaScript và server-side JavaScript đều dựa trên một ngôn ngữ nền tảng như nhau, nhưng mỗI loạI còn có thêm những tính năng chuyên biệt phù hợp với môi trường mà nó chạy. Nghĩa là, client-side JavaScript bao gồm các đối tượng được định nghĩa sẵn chỉ có thể sử dụng trên trình duyêt, Server-side JavaScript bao gồm các đối tượng và các hàm được định nghĩa sẵn chỉ có thể sử dùng trong các ứng dụng phía server (server-side applications)

Các công cụ JavaScript và IDE, và môi trường thực thi

Các công cụ sinh mã JavaScript và IDE giúp tạo ra mã JavaScript rất hữu hiệu. . Các công cụ này còn giúp ta nhanh chóng phát triển website của mình.

Một vài công cụ JavaScript và IDE được đề cập dưới đây:

Dialog Box.Công cụ này tự động tạo mã để sinh ra các hộp thoại tuỳ biến trên các trình duyệt khác nhau (alert, confirm, prompt, v.v.) mang lại kiểu dáng chuyên nghiệp cho website.
Pop-up Menu builder. Chỉ cần đưa vào các lựa chọn, công cụ này sẽ tự động tạo ra các pop-up menu trên các trình duyệt khác nhau.
Remotes. Tự động sinh mã để mở ra một cửa sổ popup.
Như chúng ta đã biết, JavaScript có thể được chạy trên máy khách (client) và máy chủ (server). Bên phía máy khách, trình duyệt sẽ thực thi mã lệnh javascript trong trang web khi mở nó. Bên phía máy chủ, mã javascript sẽ được thực thi tại máy chủ và do máy chủ thực hiện.

Client-side Java Script

Khi máy client yêu cầu một trang HTML, server sẽ kiểm tra xem trang đó có chứa script hay không. Nếu nó chứa các client-side script, server sẽ chuyển toàn bộ tài liệu bao gồm mã lệnh JavaScript và nội dung HTML của nó cho trình duyệt. Khi trình duyệt nhận được tài liệu đó, nó thực thi các mã lệnh HTML và JavaScript mà không cần bất kì sự tương tác nào với server.

JavaScript trên Web Server

Chúng ta có thể nhúng các lệnh JavaScript chạy trên server (server-side script) vào trong tài liệu HTML. Quá trình tạo ra các ứng dụng server-side là một quá trình gồm hai giai đọan.

Các trang HTML có chứa các câu lệnh JavaScript của cả client-side và server-side đều được tạo ra cùng với các file JavaScript. Tất cả các file này sẽ được biên dịch thành dạng mã thực thi được là bytecode.
Khi trình duyệt yêu cầu trang HTML, run-time engine sẽ thực thi mã lệnh server-side JavaScript rồi trả trang HTML về cho trình duyệt.
Một số công dụng của script server-side bao gồm:

Kết nối vào các cơ sở dữ liệu
Chia sẻ thông tin cho những người dùng của một ứng dụng
Truy cập vào hệ thống file trên server

Cú pháp JavaScript

JavaScript là một ngôn ngữ lập trình được dùng rộng rãi cho các trang website hiện nay. Để có thể hiểu được ngôn ngữ này thì trước hết bạn cần phải tìm hiểu sơ qua cú pháp 
Ví dụ đầu tiên về Javacript:

<script type="text/javascript">  
   document.write("JavaScript là ngôn ngữ đơn giản, dễ học.");  
</script>  

Xem ví dụ

Giải thích

Thẻ script cho biết là chúng ta đang sử dụng Javascript.
text/javascript  là kiểu nội dung cung cấp thông tin cho trình cho browser về dữ liệu 
document.write() hiển thị nội dung động cho người dùng. Chúng ta sẽ học chi tiết đối tượng document này sau. 

Làm sao đặt code Javascript vào trang web

Trong một trang web HTML JavaScript được đặt trong thẻ <script> … </ script>. Bạn có thể đặt thẻ <script> bất cứ đâu trong trang HTML, nhưng thường thẻ <script> được đặt trong thẻ <head>…</head>, Thường có 3 cách đặt code vào trang web để dễ bảo trì :

  • Đặt giữa thẻ body của HTML
  • Đặt giữa thẻ head của HTML
  • Đặt trong file.js

1. Code được đặt giữa thẻ body 

Trong ví dụ này chúng ta hiển thị thông báo thông qua hàm alert() của javascript.

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ví dụ javascript</title>
</head>

<body>
<script type="text/javascript">  
 alert("Học javascript không khó, mà khổ");  
</script>


</body>
</html>

Xem ví dụ

2. Code được đặt giữa thẻ head 

Trong ví dụ này, chúng ta tạo 1 hàm tên msg().
Để gọi hàm, chúng ta phải gọi chúng trong một event. Chúng ta sử dụng onclick event để gọi hàm msg().

Ví dụ:

<html>  
<head>  
<script type="text/javascript">  
function msg(){  
  alert("Học javascript không khó, mà khổ"); 
 
}  
</script>  
</head>  
<body>  
<p>Welcome to JavaScript</p>  
<form>  
<input type="button" value="click" onclick="msg()"/>  
</form>  
</body>  
</html>  


Xem ví dụ

3. Code được đặt trong một file JS

Chúng ta tạo file JS và nhúng nó vào trong trang HTML
Với cách này code Javacript có thể tái sử dụng được nhiều lần, trong nhiều trang html
File chứa code Javascript phải lưu với .js. Bạn nên nhúng tất cả các file  JavaScript vào một file  duy nhất. Nó làm tăng tốc độ của trang web
Ví dụ: Tạo file có tên test.js chứ hàm msg().

function msg(){  
 alert("Học lập trình không khó, mà khổ");  
}  

Bây giờ chúng ta nhúng file.js vào trang html, và gọi hàm msg() trong button với sự kiện onclick()

<html>  
<head>  
<script type="text/javascript" src="test.js"></script>  
</head>  
<body>  
<p>Welcome to JavaScript</p>  
<form>  
<input type="button" value="click" onclick="msg()"/>  
</form>  
</body>  
</html>  

Xem ví dụ

Dấu chấm phẩy là bắt buộc ?

 Bạn có thể không sử dụng dấu chấm phẩy trong trường hợp này.

<script language="javascript" type="text/javascript">
      var a = 10
      var b = 20
</script>

 Dấu chấm phẩy bắt buộc trong trường hợp hai biến a,b nằm trên một dòng.

<script language="javascript" type="text/javascript">
      var a = 10; var b = 20; 
</script>

 

Chú ý: khi code bạn nên để dấu chấm phẩy để code dễ nhìn và đẹp hơn.


Case Sensitivity

 JavaScript là ngôn ngữ nhạy cảm, nghĩa là các từ khóa ngôn ngữ, biến, tên hàm, và bất kỳ định danh nào khác phải luôn luôn được soạn đúng.
 Do đó TIME và Time sẽ có ý nghĩa khác nhau trong JavaScript.

Chú ý: nên cẩn thận khi viết tên biến và hàm trong JavaScript.

 

Lệnh, khối lệnh trong JavaScript


Các câu lệnh trong JavaScript kết thúc bằng một dấu chấm phẩy (;).
Một khối lệnh là đoạn chương trình gồm hai lệnh trở lên và được đặt  trong cặp ngoặc nhọn: { . . . }
Bên trong một khối lệnh có thể chứa một hay nhiều khối lệnh khác.


{ // khối 1


{ // khối 2


lệnh 2.1
lệnh 2.2


} // kết thúc khối lệnh 2


lệnh 1.1
lệnh 1.2


} // kết thúc khối lệnh 1
 

 

Ghi chú  (chú thích ) trong Javascript

Trong bài này chúng ta sẽ tìm hiểu cách ghi chú trong Javascript.

Hầu hết các ngôn ngữ lập trình đều hỗ trợ chức năng ghi chú (hay còn gọi là comment) nhằm giúp ta diễn giải một số đoạn code nào đó để khi đọc vào có thể hiểu ý nghĩa của chúng.
Trong quá trình thông dịch một đoạn code Javascript bỏ qua  những nơi có dòng ghi chú.

Các ưu điển của việc ghi chú trong Javascript

Có hai ưu điểm chính của việc ghi chú trong Javascript.

  1. Lập trình viên khác dễ dàng hiểu code của người khác viết.
  2. Để tránh mã không cần thiết. Đôi khi, chúng ta thêm mã để thực hiện một số công việc. Nhưng sau một thời gian, có thể cần phải vô hiệu mã. Trong trường hợp này, tốt hơn là sử dụng cách ghi chú.

Các loại ghi chú trong Javascript

Có 2 loại ghi chú trong Javascript

  1. Ghi chú trên cùng một dòng
  2. Ghi chú trên nhiều dòng

Chú thich trên cùng một dòng trong Javascript

Chúng ta sử dụng hau dấu xoẹt (//) để tạo ghi chú đơn dòng. Được sử dụng trước, sau dòng lệnh.

Ví dụ: Ghi chú trên cùng một dòng, ghi chú trước dòng lệnh.

<script>  
// It is single line comment  
document.write("hello javascript");  
</script>  

Xem ví dụ

Ví dụ: Ghi chú trên cùng một dòng, ghi chú sau dòng lệnh.

<script>  
var a=10;  
var b=20;  
var c=a+b;//It adds values of a and b variable  
document.write(c);//prints sum of 10 and 20  
</script>  

Xem ví dụ

Ghi chú nhiều dòng trong Javascript

Ghi chú trên nhiều dòng cũng có thể sử dụng trên một dòng. 
Ghi chú đa dòng là ghi chú trên nhiều dòng. Chúng ta sử dụng cú pháp sau để tạo ghi chú đa dòng

Cú pháp:

/*
Noi dung ghi chu
*/

Ví dụ:

<script>  
/* Đây là ghi chú trên nhiều dòng.  
Đoạn mã sau không thực thi */  
document.write("Học Javascript (JS) không khó, mà khổ");  
</script>  

Xem ví dụ

 

Cú pháp cơ bản của lệnh trong Javascript

1. Cú pháp cơ bản của lệnh 
JavaScript xây dựng các hàm, các phát biểu, các toán tử và các biểu thức trên cùng một dòng và kết thúc bằng ;  Cách gọi một phương thức của một đối tượng như sau:

object_name.property_name;


Ví dụ:     

<script>
document.write("Chào các bạn!<BR>");
</script>

Xem ví dụ

2. Hiển thị một dòng văn bản

Đối tượng document trong JavaScript được thiết kế sẵn hai phương thức để xuất một dòng văn bản ra màn hình client: write() và writeln().

document.write("Chuỗi văn bản");

Ví dụ:      

<script>
document.write("Chào các bạn");
document.writeln("Chúc các bạn vui vẻ!");  
</script>

Xem ví dụ

Phương thức write(): Xuất ra màn hình dòng văn bản nhưng không xuống dòng
Phương thức writeln(): Sau khi viết xong dòng văn bản tự động xuống dòng.

 

Ghi chú:  Có thể dùng “+” để ghép nhiều chuỗi ký tự.
Cho phép dùng các kí tự đặc biệt trong chuổi:  
    \n : Xuống dòng  
    \t : Tab 
    Khi có dùng các ký tự đặc biệt hoặc lệnh Writeln thì phải đặt khối JavaScript trong cặp thẻ <Pre> . . </Pre> (Thẻ quy định văn bản định dạng trước)
 

Ví dụ: Tạo trang để phân biệt sự khác nhau của write() và writeln():

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lập trình JS</title>
</head>

<body>
<PRE>
<script Language="JavaScript">
document.writeln("One,");
document.write("Two,\n");
document.write("Three ");
document.write("...");
</script>
</PRE>

</body>
</html>

Xem ví dụ

Khai báo biến trong Javascript

Cũng như các ngôn ngữ lập trình khác javascript dùng biến để lưu trữ các giá trị nhập vào, các giá trị tính toán  . . .Nói cách khác biến là vùng nhớ sử dụng để lưu trữ các giá trị khác nhau trong quá trình chương trình hoạt động.

Quy tắc đặt tên biến trong Javascript:

  1. Tên biến có thể chứa các ký tự chữ thường (a-z), chữ hoa (A-Z), chữ số (0-9), dấu gạch dưới (_).
  2. Tên biến có thể bắt đầu bằng ký tự chữ thường, chữ hoa, dấu gạch dưới. Nhưng tuyệt đối không thể bắt đầu bắt đầu bằng chữ số.
  3. Giá trị của một biến là giá trị của phép gán gần đây nhất của nó.
  4. Các biến được gán với toán tử =, biến ở bên trái còn biểu thức được ước lượng ở bên phải.

 

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: 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:    var x = 0;

Ví dụ khai báo biến đúng

var x = 10;  
var _value="sonoo";

Ví dụ khai báo biến sai

var  123=30;  
var *aa=320; 

Ví dụ khai báo biến trong Javascript

<script>  
var x = 10;  
var y = 20;  
var z=x+y;  
document.write(z);  
</script>  

Xem ví dụ

Biến toàn cục (Global Variable) trong Javascript

Biến toàn cục là biến được khai báo bên ngoài thân hàm, hoặc khai báo trong đối tượng window. Nó có thể được truy cập từ các hàm khác.

Ví dụ:

<script>  
var value=50;//global variable  
function a(){  
document.write(value);  
}  
function b(){  
document.write(value);  
}  
//gọi hàm
a();
b();
</script>  

Xem ví dụ

Khai báo biến toàn cục bên trong hàm 

Để khai báo biến toàn cục bên trong hàm, cần sử dụng đối tượng window.
Ví dụ:

window.value=90;

Bây giờ nó có thể truy cập từ các khác. Xem ví dụ sau:

<script>
function m(){  
window.value=100;//declaring global variable by window object  
}  
function n(){  
document.write(window.value);//accessing global variable from other function  
}  
//phải gọi hàm m() trước
m();
n();
</script>

Xem ví dụ
 

Kiểu dữ liệu trong Javascript

JavaScript cung cấp các kiểu dữ liệu khác nhau để nhận các loại giá trị khác nhau. Có hai loại kiểu dữ liệu trong JavaScript.

  1. Kiểu dữ liệu cơ sở
  2. Kiểu dữ liệu tham chiếu

Khác với C++ hay Java, JavaScript là ngôn ngữ có tính định kiểu thấp. Nghĩa là không phải chỉ ra kiểu dữ liệu cho biến. Kiểu dữ liệu được tự động chuyển thành kiểu phù hợp khi cần.

Ví dụ:

var a=40;//Kiểu dữ liệu số nguyên  
var b="Rahul";//Kiểu dữ liệu chuỗi

1. Các kiểu dữ liệu cơ sở

Có 5 loại kiểu cơ sở trong Javascript

Kiểu dữ liệu Giải thích
String Chuỗi ký tự. "hello"
Number kiểu số giá trị số: số nguyên, số thực.ví dụ:var a=100, b=5.5
Boolean Kiểu logic trả về false hoặc true
Undefined Đại diện giá trị chưa xác định
Null Kiểu dữ liệu null

2. Kiểu dữ liệu tham chiếu

Bảng kiểu dữ liệu tham chiếu

Kiểu dữ liệu Giải thích
Object Kiểu dữ liệu phức hợp là kiểu dữ liệu
Array Tập hợp các giá trị cùng kiểu
RegExp Một đối tượng miêu tả một pattern của các ký tự

 

Các toán tử trong Javascript

Các JavaScript là các ký hiệu được sử dụng để thực hiện các toán tử trên các toán hạng.

var sum=10+20;  

Dấu "+" là toán tử cộng, dấu "=" là toán tử gán.

Các kiểu toán tử trong Javascript

  1. Toán tử Số học
  2. Toán tử so sánh
  3. Toán tử dịch bit
  4. Toán tử điều khiển logic
  5. Toán tử đặc biệt

1. toán tử Số học

Toán tử số học được sử dụng để thực hiện các phép tính số học trên các toán hạng. Các toán tử sau đây được gọi là các toán tử số học JavaScript.

Toán tử Giải thích Ví dụ Kết quả
+ Cộng 10+20 30
- Trừ 20-10 10
* Nhân 10*20 200
/ Chia 20/10 2
% Chia lấy dư 20%10 0
++ Tăng 1 đơn vị var a=10; a++; 11
-- Giảm 1 đơn vị var a=10; a--; 9

2. Các toán tử so sánh

toán tử so sánh JavaScript dùng để so sánh hai toán hạng. Dưới đây là các toán tử so sánh:

Toán tử Giải thích Ví dụ Kết quả
== So sánh bằng 10==20 false
=== So sánh bằng và cùng kiểu dữ liệu 10==20 false
!= So sánh không bằng 10!=20 true
!== So sánh không bằng và cùng kiểu dữ liệu 20!==20 false
> Lớn hơn 20>10 true
>= Lớn hơn hoặc bằng 20>=10 true
< Nhỏ hơn 20<10 false
<= Nhỏ hơn hoặc bằng 20<=10 false

3. Các toán tử được thực hiện trên các Bit

Các Toán tử bit được thực hiện trên các toán hạng. Dưới bảng các Toán tử trên bit

Toán tử Giải thích Ví dụ Kết quả
& AND (10==20 & 20==33) false
| OR (10==20 | 20==33) false
^ XOR (10==20 ^ 20==33) false
~ NOT (phủ định) (~10) -10
<< Dịch trái (10<<2) 40
>> Dịch phải (10>>2) 2
>>> Bitwise Right Shift with Zero (10>>>2) 2

4. Các toán tử logic

Dưới đây là bảng Toán tử logic.

Toán tử Tên Ví dụ Kết quả
! Phủ định !5 0
&& Phép và 5 > 4 && 5 > 6 0
|| Phép hoặc 5 > 4 || 5 > 6 1

5. Các toán tử gán

Dưới đây là Toán tử gán

Toán tử Ví dụ Tương đương với
= x = 5 Gán 5 cho x
+= x += 5 x = x + 5
-= x -= 5 x = x – 5
*= x *= 5 x = x * 5
/= x /= 5 x = x / 5
%= x %= 5 x = x % 5

Các toán tử đặt biệt

5. Toán tử typeof

Toán tử typeof trả về kiểu dữ liệu của biến, đối tượng, hàm hoặc biểu thức.

typeof "John"                 // Returns string 
typeof 3.14                   // Returns number
typeof NaN                    // Returns number
typeof false                  // Returns boolean
typeof [1, 2, 3, 4]           // Returns object
typeof {name:'John', age:34}  // Returns object
typeof new Date()             // Returns object
typeof function () {}         // Returns function
typeof myCar                  // Returns undefined (if myCar is not declared)
typeof null                   // Returns object

Xem ví dụ

Từ ví dụ ta có thể thấy:

  • Kiểu dữ liệu của NaN là number.
  • Kiểu dữ liệu của array là object.
  • Kiểu dữ liệu của null là object.
  • Kiểu dữ liệu của một đối tượng ngày tháng là object.
  • Kiểu dữ liệu của biến chưa xác định là undefined.

Nếu đối tượng là kiểu dữ liệu mảng hoặc date bạn không thể sử dụng toán tử typeof .

6. Toán tử delete

Toán tử delete dùng để xóa thuộc tính của đối tượng

  • Toán tử delete sẽ xóa cả giá trị của thuộc tính và chính thuộc tính đó, thuộc tính đã bị xóa sẽ không thể được sử dụng trước khi được thêm lại vào đối tượng.
  • Toán tử delete được thiết kế để sử dụng với một thuộc tính của đối tượng do đó nó sẽ không có hiệu quả đối với biến hoặc hàm.
  • Toán tử delete không nên được sử dụng đối với thuộc tính được khai báo trước của đối tượng Javascript, nó có thể khiến chương trình của bạn bị lỗi.
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
delete person.age;   // or delete person["age"]; 

Xem ví dụ

Chú ý: Không nên sử dụng toán tử delete đối với thuộc tính đối tượng JavaScript được xác định trước. Nó có thể làm hỏng ứng dụng của bạn.

7. Toán tử in

Toán tử in trả về true nếu thuộc tính đang sử dụng nằm trong đối tượng đang sử dụng, ngược lại false:

// Arrays
var cars = ["Saab", "Volvo", "BMW"];
"Saab" in cars          // Returns false (specify the index number instead of value)
0 in cars               // Returns true
1 in cars               // Returns true
4 in cars               // Returns false (does not exist)
"length" in cars        // Returns true  (length is an Array property)

// Objects
var person = {firstName:"John", lastName:"Doe", age:50};
"firstName" in person   // Returns true
"age" in person         // Returns true

// Predefined objects
"PI" in Math            // Returns true
"NaN" in Number         // Returns true
"length" in String      // Returns true

Xem ví dụ

8. Toán tử instaceof

Toán tử instanceof trả về true nếu đối tượng được đang sử dụng là một thể hiện của đối tượng đang sử dụng:

var cars = ["Saab", "Volvo", "BMW"];

cars instanceof Array;          // Returns true
cars instanceof Object;         // Returns true
cars instanceof String;         // Returns false
cars instanceof Number;         // Returns false

Xem ví dụ

9. Toán tử void
The void Operator sẽ thực hiện một câu lệnh hay một biểu thức và trả về Fasle. Ví dụ sử dụng void(0) trong thẻ a để vô hiệu hóa link tránh việc tải lại trang.

<a href="javascript:void(0);">
  Useless link
</a>

<a href="javascript:void(document.body.style.backgroundColor='red');">
  Click me to change the background color of body to red
</a>

Xem ví dụ

 

Hàm alert() - confirm() - prompt() trong javascript

Hôm nay chúng ta sẽ tìm hiểu đến ba hàm rất thông dụng và hữu dụng trong javascript đó là hàm alert(), confirm() prompt(), đây là ba hàm thường được sử dụng để thông báo và lấy thông tin của người dùng để. Tuy ba hàm này rất hay sử dụng nhưng trong thực tế người ta lại tự viết ra những plugin riêng để thay đổi giao diện thay vì sử dụng giao diện mặc đinh củ chuối của nó, sau này khi học cao hơn hoặc khi đi làm chắc chắn bạn sẽ gặp vấn đề này.

1. Hiển thị hộp thoại thông báo –Lệnh alert()
Cú pháp:    

alert("Câu thông báo");


Khi đó sẽ chờ cho đến khi người sử dụng nhấn vào nút OK . 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ào 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
Ví dụ: Tạo trang (Thongbao.htm)  

<Body> 
<script Language="JavaScript">
alert("Chào mừng bạn đến với JavaScript!. \n Nhấn Ok để tiếp tục");
</script>
Chúc bạn thành công!!!
</Body> 

Xem ví dụ
 
2. Giao tiếp với người sử dụng – Lệnh prompt()
Một hộp thoại gồm 1 dòng thông báo, 1 trường nhập dữ liệu, 1 nút OK và 1 nút Cancel. Người sử dụng nhập vào trường đó rồi kích vào OK. Khi đó, ta có thể xử lý dữ liệu vừa đưa vào.
Cú pháp:         

window.prompt("Câu thông báo","nội dung mặc định");

Ví dụ:    Tạo trang (Hello.htm) hiện thị hộp thoại hỏi tên người dùng và sau đó sẽ hiển thị một thông báo chào tên mới đưa vào. 

<Body>
<script Language="JavaScript">
var   name=window.prompt("Xin chào!Bạn tên gì?","");
document.write("Xin chào bạn " + name + " ! Chúc bạn học tốt JavaScript ");
</script>
</Body>
   

Xem ví dụ

3. Hỏi đáp người sử dụng – Lệnh confirm()
Lệnh confirm() tạo ra 1 hộp thoại gồm 1 dòng thông báo, nút OK và nút Cancel. Người sử dụng có thể click vào OK. Khi đó sẽ xử lý thực hiện hành động theo yêu cầu, ngược lại khi Click vào Cancel sẽ bỏ đóng hộp thọai thông bao. 
Thường sử dụng trong các trường hỏi đáp, xác nhận quyết định xử lý thông tin từ phía người dùng   
Cú pháp:    

confirm("Câu thông báo hỏi ?");

Ví dụ:    Tạo trang (HoiDap.htm) như sau.

<html><head>
<script>
function Hoidap(){
    question = confirm("Bạn thật sự muốn truy cập Website")
    if (question !="0"){
        top.location = "http://www.tuoitre.com.vn/"
    }
}
</script>
</head>
<body>
Hãy click vào đây để truy cập website:<a href=""onClick="Hoidap();return false;">Báo Tuổi Trẻ </a> 
</body></html>

Xem ví dụ

Cách viết hàm trong Javascript

1. Định nghĩa hàm (function) trong javascript

Một hàm là một tập hợp các cấu trúc lệnh (dòng lệnh) và cuối cùng cho ra một giá trị. Nếu bạn phải thực hiện những tính toán khá dài dòng, phức tạp và phải thực hiện nhiều lần cùng một tính toán như vậy, thay vì mỗi lần tính bạn viết một đống dòng lệnh, bạn chỉ cần viết một lần và đặt tên cho nó là một hàm, rồi sau đó gọi lại hàm này bất cứ lúc nào bạn muốn, không cần phải viết lại một đống dòng lệnh nữa .

Trong một chương trình, người ta thường chia chương trình thành những đoạn nhỏ được gọi là hàm. Việc xây dựng hàm để tránh rườm rà và mất thời gian, mỗi hàm thực hiện một công việc nhất định.

Tiện lợi của hàm trong JavaScript

Có hai ưu điểm chính của hàm JavaScript.

  1. Tái sử dụng code: Chúng ta có thể gọi một hàm nhiều lần để tiết kiệm code.
  2. Giảm code trong chương trình: Hàm làm cho chương trình của chúng tôi nhỏ gọn. Chúng tôi không cần phải viết nhiều dòng mã mỗi lần để thực hiện một tác vụ chung.

Cú pháp khai báo hàm:

function name_of_funtionc(var1, var2, var33,...) {
    Khối mã lệnh Javascript
}

Trong đó:

  • function: là từ khóa của javascript nên bắt buộc phải như vậy
  • name_of_function: là tên của function, thông thường chúng ta tạo những tên có ý nghĩa như find_max, find_min, ...
  • var1, var2 var3, ... là các tham số truyền vào hàm. Ví dụ viết hàm kiểm tra số chẵn hay lẽ thì ta sẽ có một tham số đó là số cần kiểm tra.

Trả về giá trị là một chức năng của hàm, khi thực hiện trả về giá trị hàm sẽ ngừng hoạt động. Để trả về giá trị trong hàm sử dụng khóa return

Ví dụ: hàm kiểm tra chẵn, lẻ sau:

<script>
function check_number(number)
{
    if (number % 2 == 0){
        alert(number + ' là số chẵn');
    }
    else {
        alert(number + 'Số lẻ');
    }
}
 
// Sử dụng hàm kiểm tra cho 5 số
check_number(1);
check_number(2);
check_number(3);
check_number(4);
check_number(5);
</script>

Xem ví dụ

2. Hàm có return và hàm không có return

Hàm có return là hàm có sử dụng từ khóa return để đặt ở cuối hàm với mục đích trả kết quả về để sử dụng tiếp ở những đoạn code bên ngoài.  Ví dụ ta cần viết một hàm tính tổng của hai số a và b thì hàm này phải trả về giá trị là tổng của hai số a, b. Xem ví dụ sau: 

<script>
// Khai báo hàm
function sum(a, b)
{
    // trả về kết quả là a + b
    return a + b;
}
 
// Sử dụng
var a= 1;
var b= 2;
 
// truyền so1 và so2 vào hàm
var result= sum(a, b);
 
document.write(result);
</script>

Xem ví dụ

Hàm không có return là hàm không có sử dụng từ khóa return đặt trong hàm. Ví dụ viết chương trình in ra tổng của hai số a và b.

<script>
function sum(a, b)
{
    document.write('Tổng là ' + (a + b));
}
 
// Sử dụng
var a= 1;
var b= 2;
 
// truyền so1 và so2 vào hàm
sum(a, b);
</script>

Xem ví dụ

Như vậy tùy vào mục đích mà ta dùng có return hay không có return. Nhưng thông thường ta sử dụng return ở những trường hợp cần lấy kết quả đó để xử lý tiếp, như ở ví dụ trên đó là mình lấy kết quả để in thông báo.

3. Giá trị mặc định của tham số

Có một số trường hợp bạn muốn một tham số nào đó có thể được truyền hoặc không cần truyền vào đều được, lúc này chúng ta phải sử dụng nó như một tham số mặc định. Javascript không có cú pháp gán giá trị mặc định như PHP mà thay vào đó chúng ta sử dụng toán tử ||.

Ví dụ: Hàm hiển thị một thông báo. 

<script>
function showMessage(message)
{
   // Nếu message không được truyền vào hoặc giá trị nó là rỗng
   // thì sẽ được thay thế bằng giá trị 'Không có tin nhắn'
   message = message || 'Không có tin nhắn <br/>';
   document.write(message);
}
 
// Cách 1: không truyền tham số
showMessage();
 
// Cách 2: Truyền tham số
showMessage('Chào mừng bạn đến với hiệp sĩ it dot com');
</script>

Xem ví dụ

4. Hàm đệ qui trong Javascript

Một hàm được gọi là đệ quy nếu bên trong thân nó có một lời gọi đến chính nó. Nghe có vẻ vô lý nhỉ ? Một hàm làm sao có thể gọi nó mãi được, vì nếu như vậy sẽ sinh ra một vòng lặp vô tận. Nhưng trong thực tế, một hàm đệ quy luôn có điều kiện đừng được gọi là “điểm neo”. Khi đạt tới điểm neo, hàm sẽ không gọi chính nó nữa.

<script>    
function display(number) {    
    if(number<=5){    
     document.write(number+"<br>");    
     display(number+1);    
    }  
}    
    
display(1);    
</script>    

Xem ví dụ

5. 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 trong một đối tượng nào: eval, parseInt, parseFloat
5.1. Hàm eval
Chuyển đổi giá trị chuỗi thành giá trị số.
Cú pháp:  

returnval=eval (biểu thức)

Ví dụ:

<HTML> <Head><Title>Eval Example </Title>
<script Language= "JavaScript">
	var string="10+ Math.sqrt(64)";
	document.write(string+ "="+ eval(string));
</script>
</Head>
<Body> </Body>
</HTML>

Xem ví dụ

5.2. Hàm 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.
Cú pháp:  

parseInt (string, [, radix])

Ví dụ:

<HTML> <Head><Title>ParserInt Example </Title><Body>
<Script Language= "JavaScript">
document.write("Converting 0xC hex to base-10: " + parseInt(0xC,10) + "<BR>");
document.write("Converting 1100 binary to base-10:" + parseInt(1100,2) + "<BR>");
</Script>
</Body></HTML>

Xem ví dụ

5.3. Hàm 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ụ:

<Body> 
<script language= "JavaScript">
document.write("This script will show how diffrent strings are ");
document.write("Converted using parseFloat<BR>");
document.write("137= " + parseFloat("137") + "<BR>");
document.write("137abc= " + parseFloat("137abc") + "<BR>");
document.write("abc137= " + parseFloat("abc137") + "<BR>");
document.write("1abc37= " + parseFloat("1abc37") + "<BR>");
</Script>
</Body>

Xem ví dụ

Cách sử dụng câu lệnh If ... else trong Javascript

Thông thường để kiểm giá trị có thỏa mãn với giá trị mong muốn hay không ?. Trong ngôn ngữ JS (javascript) chúng ta thường dùng lệnh If để kiểm tra. Trong JS có 3 cách để sử dụng lênh if:

  • Câu lệnh if
  • Câu lệnh if else
  • Câu lênh if…else if

1. Lệnh if 

Sử dụng câu lệnh IF để lọc kết quả đúng

Cú pháp:

if(true){  
//content to be evaluated  
}  

Trong đó: True là các toán tử,biểu thức logic,quan hệ hoặc là các giá trị kiểu boolean.

Lưu đồ lệnh if:

Ví dụ:

<script>  
var a=20;  
if(a>10){  
document.write("Giá trị lớn hơn 10");  
}  
</script> 

Xem ví dụ

2. Lệnh If ... else

Phần trên chúng ta mới chỉ dùng lệnh if để kiểm tra nếu đúng còn nếu sai thì làm g?ì. Do đó trong JS hay bất kỳ ngôn ngữ lập trình nào đó đều cung cấp cho chúng ta câu lệnh else để xử lý điều kiện sai, theo cú pháp:

if(bieu thuc){  
//code tại đây
}  
else{  
//code tại đây
}  

Lưu đồ lệnh if ... else

Ví dụ:

<script>  
var a=20;  
if(a%2==0){  
document.write("a là số chẵn");  
}  
else{  
document.write("a là số lẻ");  
}  
</script>  

Xem ví dụ

3. Lệnh If...else if 

Thực thi nhiều câu lệnh với nhiều điều kiện khác nhau.
cú pháp:

if(bieuthuc1){  
//content to be evaluated if expression1 is true  
}  
else if(bieuthuc2){  
//content to be evaluated if expression2 is true  
}  
else if(bieuthuc3){  
//content to be evaluated if expression3 is true  
}  
else{  
//content to be evaluated if no expression is true  
}  

Ví dụ:

<script>  
var a=20;  
if(a==10){  
document.write("a bằng  10");  
}  
else if(a==15){  
document.write("a bằng 15");  
}  
else if(a==20){  
document.write("a bằng 20");  
}  
else{  
document.write("a không bằng 10, 15 hoặc 20");  
}  
</script>  

Xem ví dụ

 

Các lệnh lặp JS

Cũng giống như cấu trúc rẽ nhánh, cấu trúc vòng lặp cũng là một trong những thành phần quan trọng của một ngôn ngữ lập trình, vòng lặp là hành động lặp lại một khối lệnh với số lần hữu hạn.
 JS nó hỗ trợ chúng ta 4 kiểu vòng lặp(loop):

  1. Cấu trúc lặp while 
  2. Cấu trúc lặp do-while
  3. Cấu trúc lặp for 
  4. Cấu trúc lặp for-in 

1. Cấu trúc lặp while
Vòng lặp while là vòng lặp cơ bản trong JS, về nguyên tắc hoạt động thì giống như trong C/C++. Cấu trúc cơ bản của vòng lặp while.
Cú pháp:

while (expression) { 
    statement
}

Sự hoạt động của vòng lặp while:
Bước 1: tính giá trị của (biểu thức) sau while.
Bước 2: nếu giá trị tính được của (biểu thức) là ‘sai’ (==0) thì kết thúc  vòng lặp while.
Bước 3: nếu giá trị của (biểu thức) là ‘đúng’ (!=0) thì thực hiện khối lệnh sau while.
Bước 4: quay lại bước 1

Chú ý: Trong thân vòng lặp while có thể được thực hiện một lần hoặc nhiều lần và cũng có thể không được thực hiện lần nào nếu ngay từ đầu biểu thức sau while đã sai.

Biểu diễn bằng lưu đồ: 

Ví dụ cấu trúc lặp while

<script>
  i=1;
	while(i<=5){
		document.writeln("<h1> "+ i +" năm chờ đợi </h1> \n"); // \n xuống dòng
		i++;
	}
</script>

Xem ví dụ

2. Cấu trúc lặp do...while
Vòng lặp do-while cũng giống như while nhưng chỉ có điều là do-while xét điều kiện lặp sau khi mỗi vòng lặp. Cấu trúc do-while chỉ có một cú pháp.
Cú pháp:         

<?php
   do{
     statement
   }while (expresion);
?>

Giải thích cú pháp:
Bước 1: thực hiện khối lệnh sau do.
Bước 2: kiểm tra giá trị biểu thức <biểu thức> sau while, nếu có giá trị ‘đúng’ ( khác 0) thì lặp lại bước 1, nếu ‘sai’ (=0) thì kết thúc vòng lặp.
Biểu diễn bằng lưu đồ: 

Ví dụ cấu trúc lặp do ... while

<script>
    i=1;
	do{
		document.writeln("<h1> "+i+" năm yêu em! </h1> \n"); // \n xuống dòng
		i++;
	}while(i<=10);
</script>

Xem ví dụ

3. Cấu trúc lặp for
Vòng lặp for là vòng lặp khá là phức tạp hơn vòng lặp while. Vòng lặp for có hai cú pháp như sau:

Cú pháp:

for (expr1; expr2; expr3) {
    statement
}

Trong đó:
    Biểu thức 1: biểu thức khởi đầu.
    Biểu thức 2: biểu thức điều kiện - điều kiện lặp.
    Biểu thức 3: bước nhảy - thường dùng với ý nghĩa là thay đổi bước nhảy.

Cả 3 biểu thức này đều là tuỳ chọn, chúng có thể vắng mặt trong câu lệnh cụ thể nhưng các dấu chấm phẩy vẫn phải có.
Sự hoạt động của vòng lặp for:

  • Bước 1: Thực hiện biểu thức khởi đầu – Biểu thức 1.
  • Bước 2: Tính giá trị biểu thức 2 để xác định điều kiện lặp.
    - Nếu biểu thức 2 có giá trị ‘sai’ (==0) thì ra khỏi vòng lặp.
    - Ngược lại, nếu biểu thức có giá trị ‘đúng’ ( khác 0) thì chuyển tới bước 3.
  • Bước 3: Thực hiện khối lệnh sau for ( thân của for ), chuyển tới bước 4.
  • Bước 4: Thực hiện biểu thức 3, rồi quay về bước 2.

Biểu diễn bằng lưu đồ: 

Ví dụ:

<script>
for(i=0;i<10;i++){
   document.write("<h1> "+i+"năm yêu em! </h1> \n");
}
</script>

Xem ví dụ

4. Cấu trúc lặp for ... in
Câu lệnh này được sử dụng biêt tất cả các thuộc tính (properties) của một đối tượng. 

Cú pháp:

for (<variable> in <object>) {
//Các câu lệnh
}

Ví dụ:  In tất cả các thuộc tính của đối tượng Window. 

<Body><SCRIPT LANGUAGE= "JavaScript"><BODY>
document.write("The properties of the Window  object are: <BR>");
for (var x in window)
	document.write("     "+ x + ", ");
</SCRIPT></Body

Xem ví dụ

Lệnh break và lệnh continue trong PHP

1. Lệnh Break 
Trong JS, lệnh break là một lệnh mà khi gặp lệnh đó thì chương trình sẽ nhảy ra khỏi vòng lặp chứa nó.
Cú pháp 

Break;

Ví dụ:

<script>
arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 0);
for(i=0;i<arr.length;  i++ )
{
  if( arr[i] == 3 )
	break;

  document.write("Giá trị "+ arr[i] +" <br />");
}
</script>

Xem ví dụ

Giải thích:
Đoạn chương trình trên kiểm tra if(value==3) thoát khỏi vòng lặp nên chỉ print các giá trị sau
Giá trị 1
Giá trị 2


2. Lệnh Continue:
Tong JS, lệnh continue là lệnh mà khi gặp nó thì chương trình sẽ bỏ qua những câu lệnh phía dưới nó(trong cùng 1 câu lệnh lặp) để thực hiện 1 vòng lặp mới.
Cú pháp: 

Continue;

Ví dụ:

<script>
arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 0);
for(i=0;i<arr.length;  i++ )
{
  if( arr[i] == 3 )
	continue;

  document.write("Giá trị "+ arr[i] +" <br />");
}
</script>

Xem ví dụ

Giải thích:
Trong ví dụ trên đoạn chương trình không print value có giá trị bằng ==3

Khái niệm về đôi tượng

 Như các bạn đã biết, lập trình với các object thực sự tiện lợi, thứ nhất chúng có thể tương tác như các đối tượng trong thực tế, tiếp đến là khả năng tái sử dụng và bảo trì code dễ dàng hơn rất nhiều so với cách lập trình chỉ sử dụng các hàm (tất nhiên là chúng ta có thể sử dụng kết hợp cả hai phương pháp bởi hầu hết các đoạn mã viết bằng JavaScript thường không lớn). Một đặc điểm đặc trưng khi làm việc với các object là chúng ta làm việc với các thuộc tính và các phương thức của chúng, vì vậy nếu như chúng ta có một đối tượng là quả táo chẳng hạn thì thuộc tính có thể là màu sắc, giống táo, kích thước, và phương thức của quả táo có thể là "chín" và "rụng". Khi chín thuộc tính màu sắc và khối lượng có thể bị thay đổi, cũng như khi rụng quả táo có thể bị phân hủy. Như vậy việc lập trình với các đối tượng sẽ trở nên thật sự thú vị, giống như công việc mà chúa trời đã tạo ra mọi vật trên thế giới này vậy!

 Không giống như hầu hết các ngôn ngữ hướng đối tượng khác, trên thực tế javaScript không thực sự có khái niệm lớp, trong hầu hết các ngôn ngữ lập trình bạn phải xây dựng lớp sau đó mới khai báo đối tượng để sử dụng. Trong javaScript đối tượng được tạo trực tiếp và có thể tạo bằng nhiều cách , đối tượng cũng có thể kế thừa từ đối tượng khác.

Để tạo đối tượng bạn có ba cách cơ bản để tạo đối tượng như sau:

  1. Sử dụng  object literal
  2. Sử dụng Đối Tượng Object 
  3. Sử dụng phương thức khởi tạo (dùng từ khóa new)

1. Sử Dụng Object Literal

Object literal là cách tạo đối tượng sử dụng danh sách các cặp tên khoá và giá trị khoá (key và key-value) được đặt trong cặp dấu ngoặc { }.

Cú pháp:

object={property1:value1,property2:value2.....propertyN:valueN}

Giữa thuộc tính và giá trị có dấu ":"

Ví dụ:

<script>  
emp={id:102,name:"Shyam Kumar",salary:40000}  
document.write(emp.id+" "+emp.name+" "+emp.salary);  
</script>  

Xem ví dụ

2. Sử dụng Đối Tượng Object

Bạn có thể sử dụng từ khoá new để tạo đối tượng mới từ đối tượng Object được cung cấp sẵn trong JavaScript.

Cú pháp:

var objectname=new Object(); 

Ví dụ:

<script>  
var emp=new Object();  
emp.id=101;  
emp.name="Ravi Malik";  
emp.salary=50000;  
document.write(emp.id+" "+emp.name+" "+emp.salary);  
</script>  

Xem ví dụ

Đối tượng Object là đối tượng cha mà tất cả các đối tượng khác trong JavaScript đều kế thừa từ đối tượng Object này.

3. Sử Dụng Hàm Constructor

Sử dụng hàm constructor để tạo đối tượng là một cách phổ biến trong JavaScript. Với cách làm này tương tự như cách sử dụng đối tượng Object tuy nhiên chúng ta sẽ định nghĩa một hàm constructor để thay cho đối tượng Object.

Ví dụ:

<script>  
function Emp(id,name,salary){  
this.id=id;  
this.name=name;  
this.salary=salary;  
}  
e=new Emp(103,"BillGate",30000);  
  
document.write(e.id+" "+e.name+" "+e.salary);  
</script>  

Xem ví dụ

Ở trên sử dụng hàm constructor Emp chúng ta có thể tạo ra đối tượng e với các thuộc tính là id, name và salary.

4. Thuộc Tính

Thuộc tính được dùng để lưu trữ các thông tin (dữ liệu) về đối tượng. Thuộc tính giống như biến nhưng nó được giới hạn trong phạm vi của một đối tượng nhất định.

Ví dụ :

<script>
var peter = {
    name: "Peter",
    age: 24,
};
docuemnt.write("Tên: "+peter.name+ " Tuổi:"+peter.age);
</script>

Xem ví dụ

Ở ví dụ trên chúng ta có đối tượng person có các thuộc tính là name và age.

Trong JavaScript để truy cập giá trị của thuộc tính chúng ta sử dụng dấu ".".

5. Khai báo phương thức trong đối tượng Javascript

Chúng ta có thể khai báo phương trong đối tượng JS. Nhưng, trước khi khai báo phương thức, chúng ta cần thêm thuộc tính của hàm cùng tên với phương thức

Ví dụ:

<script>  
function Emp(id,name,salary){  
this.id=id;  
this.name=name;  
this.salary=salary;  
  
this.changeSalary=changeSalary; // Tên hàm cùng tên thuộc tính của phương thức  
function changeSalary(otherSalary){  
this.salary=otherSalary;  
}  
}  
e=new Emp(103,"Steve Job",30000);  
document.write(e.id+" "+e.name+" "+e.salary);  
e.changeSalary(45000);  
document.write("<br>"+e.id+" "+e.name+" "+e.salary);  
</script>  

Xem ví dụ

 

Mảng trong JS (javascript)

Mảng trong JS là một đối tượng. Mảng là một tập hợp các phần tử cố định có cùng một kiểu, được lưu trữ liên tiếp nhau trong các ô nhớ. Kiểu phần tử có thể là có các kiểu bất kỳ: ký tự, số, chuỗi ký tự…; 

Trong JS có 3 cách khai báo mảng

  1. Sử dụng  array literal
  2. Sử dụng đối tượng Array tạo mảng
  3. Sử dụng phương thức khởi tạo (contructor)

1. Sử dụng  array literal

Cú pháp:

var arrayname=[value1,value2.....valueN]; 

Các giá trị chứa trong dấu [ ] và cách nhau bởi dấu ,.

Ví dụ:

<script>  
var emp=["Tý","Tèo","Tôm"];  
for (i=0;i<emp.length;i++){  
document.write(emp[i] + "<br/>");  
}  
</script>

Xem ví dụ

Thuộc tính emp.length cho biết chiều dài của mảng.

2. Sử dụng đối tượng Array tạo mảng.

Cú pháp:

var arrayname=new Array();

Sử dụng từ khóa new để tạo một đối tượng

Ví dụ:

<script>  
var i;  
var emp = new Array();  
emp[0] = "Arun";  
emp[1] = "Varun";  
emp[2] = "John";  
  
for (i=0;i<emp.length;i++){  
document.write(emp[i] + "<br>");  
}  
</script>  

Xem ví dụ

3. Sử dụng phương thức khởi tạo (contructor)

Để tạo đối tượng mảng ta có thể dùng phương thức khởi tạo của đối tượng Array để truyền các giá trị cho mảng.

Ví dụ:

<script>  
var emp=new Array("Mì","Tôm","Thịt");  
for (i=0;i<emp.length;i++){  
document.write(emp[i] + "<br>");  
}  
</script>  

Xem ví dụ

Chuỗi trong JS

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

Trong JS có 2 cách tạo chuỗi

  1. Sử dụng string literal
  2. Sử dụng đối tượng chuỗi

1. Sử dụng string literal

Dùng dấu nháy kép " " để tạo chuỗi

Cú pháp:

var stringname="Chuỗi ký tự";  

Ví dụ:

<script>  
var str="Đây là chuỗi literal";  
document.write(str);  
</script>  

Xem ví dụ

2. Sử dụng đối tượng chuỗi

Cú pháp:

var stringname=new String("Chuỗi");

Dùng từ khóa new để tạo đối tượng

Ví dụ:

<script>  
var stringname=new String("hello tô mì gõ");  
document.write(stringname);  
</script>  

Xem ví dụ

Phương thức xử lý chuỗi.

Dưới đây danh sách xử lý chuỗi trong JS

  1. charAt(index)
  2. concat(str)
  3. indexOf(str)
  4. lastIndexOf(str)
  5. toLowerCase()
  6. toUpperCase()
  7. slice(beginIndex, endIndex)
  8. trim()

1. Phương thức charAt(index)

Phương thức charAt(index) trả về giá trị tại vị trí index

<script>  
var str="javascript";  
document.write(str.charAt(2));  
</script>  

Kết quả: v

2. Phương thức concat(str)

Phương thức concat(str) dùng để nối 2 chuỗi.

<script>  
var s1="Hello";  
var s2=" tô mì gõ";  
var s3=s1.concat(s2);  
document.write(s3);  
</script>  

Xem ví dụ

3. Phương thức indexOf(str)

Phương thức indexOf(str) trả về vị trí của của chuỗi cần tìm.

<script>  
var s1="javascript from Hiệp Sĩ IT indexof";  
var n=s1.indexOf("from");  
document.write(n);  
</script>  

Kết quả: 11

4. Phương thức lastIndexOf(str)

Phương thức lastIndexOf(str) trả về vị trí của của chuỗi cần tìm. Tính từ bên phải chuỗi (cuối chuỗi).

<script>  
var s1="javascript from Hiep si IT indexof";  
var n=s1.lastIndexOf("IT");  
document.write(n);  
</script>  

Xem ví dụ

5. Phương thức toLowerCase()

Phương thức toLowerCase() chuyển chuỗi hoa sang chuỗi thường.

<script>  
var s1="ĐÂY LÀ VÍ DỤ CHUYỂN TỪ CHỮ HOA SANG CHỮ THƯỜNG";  
var s2=s1.toLowerCase();  
document.write(s2);  
</script>  

Xem ví dụ

6. Phương thức toUpperCase()

Phương thức toUpperCase() chuyển chuỗi thường sang chuỗi hoa.

<script>  
var s1="Đây là ví dụ chuyển từ chuỗi thường sang chuỗi hoa";  
var s2=s1.toUpperCase();  
document.write(s2);  
</script>  

Xem ví dụ

7. Phương thức slice(beginIndex, endIndex)

Phương thức slice(beginIndex, endIndex) cắt chuỗi tại vị trí bắt đầu (beginIndex) vị trí cần cắt (endIndex)

<script>  
var s1="abcdefgh";  
var s2=s1.slice(2,5);  
document.write(s2);  
</script>  

Xem ví dụ

6. Phương thức trim()

Phương thức trim() xóa khoảng trắng 2 đầu chuỗi.

<script>  
var s1="     javascript trim    ";  
var s2=s1.trim();  
document.write(s2);  
</script>  

Xem ví dụ

Một số cách xử lý chuỗi.

Trường hợp trong chuỗi cũng có xuất hiện dấu nháy đơn hoặc nháy đôi thì bắt buộc bạn phải thêm ký tự \ đằng trước dấu nháy đó nếu không sẽ bị lỗi cũ pháp.

Ví dụ:

<script>
var message = "Học lập trình tại \"hiep si it \" quá sướng";
var domain = 'hiep si it - \'học lập trình web\'';
document.write(message)
document.write(domain)
</script>

Xem ví dụ

Ngoài ra còn nhiều ký hiệu kết hợp với dấu \ nữa như trong bảng dưới đây:

Code Kết quả
\' single quote
\" double quote
\\ backslash
\n new line
\r carriage return
\t tab
\b backspace
\f form feed

Để nối chuỗi chúng ta sử dụng dấu + để gép hai chuỗi (hoặc biến) lại với nhau.

$message = "Hello"+" Tô mì gõ";

Hoặc

$message1 = "Hello";
$message2 =" Tô mì gõ";
$message= $message1 + $message2;

Lưu ý khi xuống hàng của chuỗi trong Javascript

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

// Đúng
var message = "Chào mừng bạn đến với"
              + "hiep si it dot com";

// Sai
var message = "Chào mừng bạn đến với
              hiep si it dot com";

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

Ví dụ:

var message = "Chào mừng bạn đến với\
              hiep si it dot com";

 

Đối tượng date của JS

Đối tượng date JavaScript có thể được sử dụng để lấy năm, tháng và ngày. Bạn có thể hiển thị bộ đếm thời gian trên trang web bằng sử dụng đối tượng date của JavaScript.
Chúng ta có thể sử dụng nhiều phương thức khởi tạo khác nhau để tạo đối tượng ngày. Đối tượng Date cung cấp nhiều phương thức có ích để xử lý về thời gian và ngày tháng. 

Phương thức khởi tạo của đối tượng Date

Bạn có thể sử dụng 4 biến thể phương thức khởi tạo (constructor ) của Date để tạo đối tượng date.

Date()  
Date(milliseconds)  
Date(dateString)  
Date(year, month, day, hours, minutes, seconds, milliseconds)  

Các phương xử lý trên đối tượng date của JS

Bảng phương thức xử lý về thời gian giả sử ta có biến : dateVar= new Date()

Phương thức  Giải thích
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) cho dateVar.
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ây tính từ 00:00:00 ngày 01/01/1970.
dateVar.setDay(day) Đặt ngày trong tháng là day cho dateVar.
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/1970.
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ời gian hiện thời.
Date.UTC (year, month, day [,hours] [,minutes] [,seconds]) Trả lại số lượng mili giây từ 00:00:00 01/01/1970 GMT.

Các ví dụ về đối tượng Date của JS

Ví dụ: Hiển thị ngày giờ

Ngày và giờ hiện tại: <span id="txt"></span>  
<script>  
var today=new Date();  
document.getElementById('txt').innerHTML=today;  
</script>  

Xem ví dụ

Ví dụ: Hiển thị ngày/tháng/năm

<script>  
var date=new Date();  
var day=date.getDate();  
var month=date.getMonth()+1;  
var year=date.getFullYear();  
document.write("<br>Ngày/tháng/năm: "+day+"/"+month+"/"+year);  
</script>  

Xem ví dụ

Ví dụ: Tạo trang date

<head><meta content="charset=utf-8"></head>
<Script Language="JavaScript"> 
mydate = new Date(); 
myday = mydate.getDay() ;  
mymonth = mydate.getMonth()+1; 
myweekday= mydate.getDate(); 
weekday= myweekday; 
myyear= 1900  + mydate.getYear(); 
myhours = mydate.getHours(); 
ampmhour = (myhours > 12) ? myhours - 12 : myhours; 
ampm = (myhours >= 12) ? 'Buổi chiều ' : ' Buổi sáng '; 
myminutes = mydate.getMinutes(); 
myminutes = ((mytime < 10) ? ':0' : ':') + mytime; 
if(myday == 0) 	
day = " Chủ nhật , "; 
else if(myday == 1) 
			day = " Thứ hai , "; 
		else if(myday == 2) 
			day = " Thứ ba, "; 
				else if(myday == 3) 
					day = " Thứ tư, "; 
					else if(myday == 4) 
						day = " Thứ năm , "; 
						else if(myday == 5) 
							day = " Thứ sáu , "; 
							else if(myday == 6) 
								day = " Thứ bảy , "; 
</script> 
<body> 	
<script> 
document.write("<b>" +"Bây giờ là: "+ ampmhour + "" + myminutes +"  "+ ampm) 
document.write(" - " + day + " Ngày " + myweekday +" "); 
document.write( " Tháng " + mymonth + "  Năm " + year + "</font>"); 
</script> 
</body>
 

Xem ví dụ

Các ví dụ thời gian hiện tại của JS

Ví dụ hiển thị thời gian hiện tại

Thời gian hiện tại: <span id="txt"></span>  
<script>  
var today=new Date();  
var h=today.getHours();  
var m=today.getMinutes();  
var s=today.getSeconds();  
document.getElementById('txt').innerHTML=h+":"+m+":"+s;  
</script>  

Xem ví dụ

Ví dụ đồng hồ kỹ thuật số
Chúng ta hãy xem ví dụ đơn giản để hiển thị đồng hồ kỹ thuật số sử dụng đối tượng Date của JS.

Có hai cách để đặt khoảng thời gian trong JavaScript: bằng phương thức setTimeout () hoặc setInterval ().

Thời gian hiện tại: <span id="txt"></span>  
<script>  
window.onload=function(){getTime();}  
function getTime(){  
var today=new Date();  
var h=today.getHours();  
var m=today.getMinutes();  
var s=today.getSeconds();  
// add a zero in front of numbers<10  
m=checkTime(m);  
s=checkTime(s);  
document.getElementById('txt').innerHTML=h+":"+m+":"+s;  
setTimeout(function(){getTime()},1000);  
}  
//setInterval("getTime()",1000);//another way  
function checkTime(i){  
if (i<10){  
  i="0" + i;  
 }  
return i;  
}  
</script>  

Xem ví dụ


 

Đối tượng Math của JS

Đố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ày chứ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

Các thuộc tính:

Thuộc tính Giải thích
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 PI, 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.

Các phương thức

Phương thức Giải thích
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.
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ần nhấ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.

Các ví dụ về đối tượng Math

1. Math.sqrt(n)

Phương thức math.sqrt(n) trả về giá trị căn bậc 2 .

Căn bậc 2 của là: <span id="p1"></span>    
<script>    
document.getElementById('p1').innerHTML=Math.sqrt(4);    
</script>    

Xem ví dụ

2. Math.random()

Phương thức math.random() trả về giá trị ngẫu nhiên trong khoảng 0 đến 1.

Số random: <span id="p2"></span>    
<script>    
document.getElementById('p2').innerHTML=Math.random();    
</script>   

Xem ví dụ

3. Math.pow(m,n)

Phương thức math.pow(m,n) trả về giá trị là mn.

3 mũ 4 là: <span id="p3"></span>    
<script>    
document.getElementById('p3').innerHTML=Math.pow(3,4);    
</script>    

Xem ví dụ

4. Math.floor(n)

Phương thức math.floor(n) trả lại số nguyên lớn nhất nhỏ hơn hoặc bằng n. Ví dụ: 3.5 sẽ là 3, 5.9 sẽ là 5 etc.

N=4.6: <span id="p4"></span>    
<script>    
document.getElementById('p4').innerHTML=Math.floor(4.6);    
</script>    

Xem ví dụ

5. Math.ceil(n)

Phương thức Math.ceil(n) trả lại số nguyên nhỏ nhất lớn hơn hoặc bằng n. Ví dụ:3.7 sẽ là 4, 5.9 se là 6

4.6 là: <span id="p5"></span>    
<script>    
document.getElementById('p5').innerHTML=Math.ceil(4.6);    
</script>    

Xem ví dụ

6. Math.round(n)

Phương thức math.round(n) trả về số làm tròn gần nhất. Nếu phần thập phân lớn hơn bằng 0.5 thì sẽ làm tròn 1, ngược lại sẽ làm tròn 0.Ví dụ: 3.7 sẽ là 4, 3.3 sẽ là 3, 5.9 sẽ là 9.

Làm tròn 4.3 là: <span id="p6"></span><br>    
Làm tròn 4.7 là: <span id="p7"></span>    
<script>    
document.getElementById('p6').innerHTML=Math.round(4.3);   
document.getElementById('p7').innerHTML=Math.round(4.7);    
</script>    

Xem ví dụ

Đối tượng Number trong JS

Trong Javascript có một đối tượng thường được dùng để xử lý kiểu dữ liệu number đó là đối tượng Number, đối tượng này thường có hai dạng đó là số có dấu chấm động và số không có dấu chấm động.

Cú pháp:

var n=new Number(value);

Nếu giá trị không thể chuyển đổi giá trị sang dạng số, nó trả về NaN (Không phải là một Số) có thể dùng phương thức isNaN () để kiểm.

Ví dụ: Có thể gán trực tiếp số cho biến

<script>
var x=102;//integer value  
var y=102.7;//floating point value  
var z=13e4;//exponent value, output: 130000  
var n=new Number(16);//integer value by number object  
</script>

Xem ví dụ

Hằng của đối tượng Number

Bảng danh sách các hằng 

Hằng Giải thích
MIN_VALUE Trả về giá trị nhỏ nhất trong Javascript có thể tới 5E-324 .
MAX_VALUE Trả về số lớn nhất có thể trong JavaScript có thể tới 1.7976931348623157E+308.
POSITIVE_INFINITY Trả về giá trị dương vô cực.
NEGATIVE_INFINITY Trả về giá trị âm vô cực .
NaN Giá trị không phải số.

Bảng danh sách các phương thức của đối tượng Number:
Phương thức Giải thích
toExponential() Làm một số hiển thị ở dạng số mũ, ngay cả khi số này là trong một dãy trong đó JavaScript thường sử dụng ký hiệu chuẩn.
toFixed() Định dạng một số với một số chữ số đặc trưng tới bên phải của phần thập phân.
toLocaleString() Trả về một phiên bản giá trị chuỗi của số hiện tại trong một định dạng mà có thể đa dạng theo thiết lập nội bộ của trình duyệt.
toPrecision() Định nghĩa bao nhiêu chữ số (bao gồm các chữ số ở bên phải và bên trái phần thập phân) để hiển thị một số.
toString() Đổi số sang chuỗi.
valueOf() Trả về giá trị của số.
isNaN() Kiểm tra xem một giá trị nào đó có phải là NaN hay không.

Đôi tượng Boolean trong JS

Đối tượng Boolean có 2 trạng thái: true hoặc false. 

Cú pháp:

Boolean b=new Boolean(value);  

Giá trị mặc định của đối tượng Boolean là false.

Ví dụ:

<script>  
document.write(10<20);//true  
document.write(10<5);//false  
</script>  

Xem ví dụ

Các thuộc tính của đối tượng Boolean

Thuộc tính Giải thích
constructor Tạo một đối tượng.
prototype Cho phép thêm phương thức và thuộc tính trong nguyên mẫu (prototype) Boolean.
Các phương thức của đối tượng Boolean
Phương thức Giải thích
toSource() Trả về nguồn của đối tượng Boolean như một chuỗi.
toString() Chuyển kiểu dữ liệu của đối tượng Boolean thành chuỗi.
valueOf() Chuyển các kiểu dữ liệu khác thành kiểu boolean.

 

Đối tượng forms trongJS

Các form được tạo ra nhờ cặp thẻ <FORM> . . . </FORM>. Có một vài phần tử (elements) của đối tượng forms như: Button, checkbox, password, radio, reset, select, submit, text, textarea

Thuộc tính Giải thích
Action thuộc tính ACTION của thẻ FORM.
Elements Mảng chứa các thành phần trong form (như checkbox, textBOX . .
Encoding 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.
Method Thuộc tính METHOD.
target Xâu chứa tên của cửa sổ đích khi submit form

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ương thức này mô phỏng một click vào nút submit trên form.

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ội dung (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 qua mộ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à CGI

Phần tử Cú pháp Mô tả
Button <Input Type="button"> Một nút
Checkbox <Input Type="checkbox"> Một checkbox
FileUpload <Input Type="File"> Một phần tử tải File cho phép sử dụng gửi File 
Hidden <Input Type="hidden"> Một trường ẩn
Password <Input Type="password"> Một trường text để nhập mật khẩu (*)
Radio <Input Type="radio"> Một nút chọn
Reset <Input Type="reset"> Một nút reset
Select <Select>
<Option>option1</Option>
<Option>option2</Option>
</Select>
Một danh sách lựa chọn
Submit <Input Type="submit"> Một nút submit
Text <Input Type="text"> Một trường text
textArea <Textarea> default text
</Textarea>
Một trường text cho phép nhập nhiều dòng

Thuộc tính Name : Mỗi phần tử được đặt tên để JavaScript truy cập đến chúng qua 
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... 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"

1. 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 địa chỉ URL để xử lý và lưu trữ. Một phần tử button được chỉ định rõ khi sử dụng thẻ INPUT:
<INPUT TYPE="button" NAME="name" VALUE= "buttonName">
“name” là tên của button, “buttonname” là nhãn của button sẽ được hiển thị.
Chỉ có một sự kiện duy nhất là onClick. 
Ví dụ:Trang Button.htm Định giá trị trong form sử dụng phần tử button. ​​​​​​ 

<HTML>
<Head><Title>button Example</Title>
<Script Language="JavaScript">
function calculate() {
	document.frm.results.value = eval(document.frm.entry.value);
}
</Script>
</Head>
<Body>
<form Method="POST" name="frm">
Nhập biểu thức:
<INPUT TYPE="text" NAME="entry" VALUE="3+5+6"> <BR>
Kết quả:
<INPUT TYPE=text NAME="results" onFocus="this.blur();"> <BR>
<INPUT TYPE="button" VALUE="Calculate" onClick="calculate();">
</form>
</Body></HTML>

Xem ví dụ

2. 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ào form xử lý. 

3. Phần tử hidden
Phần tử hidden là phần tử không được hiển thị 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  nhưng nó không được hiển thị trên trang. 

4. Phần tử Password
Đối tượng Password là đối tượng mà khi gõ bất kỳ ký tự nào vào cũng đều hiển thị dấu sao(*). Dùng để nhập những thông tin bí mật như mật khẩu...

5. Phần tử radio
Đối tượng radio gần giống sự bật tắt checkbox. 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ất kỳ một thời điểm nào. 
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. Bảng sau hiển thị các thuộc tính và cách thức của đối tượng radio

Thuộc tính và cách thức Mô tả
checked Mô tả trạng thái hiện thời của phần tử radio
defaultChecked Mô tả trạng thái mặc định của phần tử
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
value Mô tả giá trị hiện thời của phần tử được định ra trong thẻ INPUT
click() Mô phỏng một click trên nút radio (cách thức)

Ví dụ:

<HTML><Head><Title>Radio button Example</Title>
<Script>
function calculate(callingField) {
       if (callingField == "result") {
         if (document.frm.action[1].checked) {
           document.frm.entry.value = Math.sqrt(document.frm.result.value); 
         } else {
           document.frm.entry.value = document.frm.result.value / 2;
         }
       } else {
         if (document.frm.action[1].checked) {
           document.frm.result.value=document.frm.entry.value*document.frm.entry.value;
         } else {
           document.frm.result.value = document.frm.entry.value * 2;
         }
       }
     }
</Script>
</Head>
<BODY><form METHOD=POST name="frm">
Value: <INPUT TYPE="text" NAME="entry" VALUE=0 
onChange="calculate(this.name);"> <BR>
Action:<BR>
<INPUT TYPE="radio" NAME="action" VALUE="twice"
onClick="calculate(this.name);"> Double<BR>
<INPUT TYPE="radio" NAME="action" VALUE="square" 
onClick="calculate(this.name);"> 
Square <BR> Result: <INPUT TYPE=text NAME="result" VALUE=0  
 onChange="calculate(this.name);"> 
</document.frm>
</Body></HTML>

Xem ví dụ

6. Phần tử reset
Sử dụng đối tượng 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 sự kiện onClick. Đối tượng reset dùng để xoá form.
Ví dụ: Trang ResetButton.htm minh hoạ cách sử dụng nút reset để xoá các giá trị của form. 

<HTML>
<Head>
<Title>reset Example</Title>
<Script Language="JavaScript">
function clearForm(form) {
	form.value1.value = "Form";
	form.value2.value = "Cleared";
}
</Script>
</Head>
<Body>
<Form Method=Post>
<Input Type="text" NAME="value1"><BR> 
<Input Type="text" NAME="value2"><BR> 
<Input Type="reset" VALUE="Clear Form" onClick="clearForm(this.form);">
</Form>
</Body></HTML>

Xem ví dụ

7. Phần tử select
Danh sách lựa chọn trong các form xuất hiện menu drop-down hoặc danh sách cuộ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ằng cách sử dụng hai thẻ SELECT và OPTION. 

<SELECT NAME="test"> 
     <option SELECTED value=1>1 </option>
     <option value=2>2</option>
     <optin value=3>3</option>
</SELECT>

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ộc tí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ụng như sau:

<SELECT NAME="test" SIZE=2> 
      <option SELECTED value=1>1 </option>
     <option value=2>2</option>
     <optin value=3>3</option>
</SELECT>

Trong cả hai VÍ DỤ: trên, người sử dụng chỉ có 1 lựa chọn. Nếu sử dụng thuộc tính MULTIPLE, bạn có thể cho phép người sử dụng lựa chọn nhiều hơn 1 giá trị trong danh sách lựa chọn:

<SELECT NAME="test" SIZE=2 MULTIPLE>
 <option SELECTED value=1>1 </option>
     <option value=2>2</option>
     <optin value=3>3</option>
</SELECT>

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ài thà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ần tử select có thuộc tính selectedIndex, có chứa số thứ tự của option được lựa chọn hiện thời.
Mỗi option trong danh sách lựa chọn đều có một vài thuộc tính:

Thuộc tính Giải thích
DEFAULTSELECTED Cho biết option có mặc định là chọn trong thẻ OPTION hay không.
INDEX Chứa giá trị số thứ tự của option hịên thời trong mảng option.
SELECTED Cho biết trạng thái hiện thời của option
TEXT Có chứa giá trị của dòng text hiển thị trên menu cho mỗi option, và thuộc tính value mọi giá trị chỉ ra trong thẻ OPTION.

Ví dụ:

<html>
<body>
<script>
function testCbo(){
	
	id= document.frm.cbotest.options[document.frm.cbotest.selectedIndex].value
	name= document.frm.cbotest.options[document.frm.cbotest.selectedIndex].text
	alert("ID: "+id+"Tên: "+name)
}
</script>
<Form method=post name="frm" >
  <select  name="cbotest" onchange="testCbo()">
  <option value="1">Tý</option>
  <option value="2">Tèo</option>
  <option value="3">Tủn</option>
  <option value="4">Tửng</option>
  </select>
</Form>
</body>
</html>

Xem ví dụ

8. Phần tử submit
Nút Submit là một trường hợp đặc biệt của button, cũng như nút Reset. Nút này đưa thông tin hiện tại từ các trường của form tới địa chỉ URL được chỉ ra trong thuộc tính ACTION của thẻ form sử dụng cách thức METHOD chỉ ra trong thẻ FORM.

9. Phần tử Text
Phần tử này nằm trong những phần tử hay được sử dụng nhất trong các form HTML. Trường text cho phép nhập vào một dòng đơn.
Bảng sau mô tả các thuộc tính và phương thức.

Cách thức và thuộc tính Mô tả
defaultValue Chỉ ra giá trị mặc định của phần tử được chỉ ra trong thẻ INPUT (thuộc tính)
name Tên của đối tượng được chỉ ra trong thẻ INPUT (thuộc tính)
value Giá trị hiện thời của phần tử (thuộc tính)
focus() Mô tả việc con trỏ tới trường text (cách thức)
blur() Mô tả việc con trỏ rời trường text (cách thức)
select() Mô tả việc lựa chọn dòng text trong trường text (cách thức)

Ví dụ:

<TITLE>TextField Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
	function echo(currentField){
       if (currentField == "first")
         document.frm.second.value = document.frm.first.value; 
       else
         document.frm.first.value = document.frm.second.value; 
     }
</SCRIPT>
</HEAD>
<BODY>
<FORM name="frm">
	<INPUT TYPE=text NAME="first" onChange="echo(this.name);"> 
	<INPUT TYPE=text NAME="second"  onChange="echo(this.name);"> 
</FORM>
</BODY>
</HTML>

Xem ví dụ

10. Phần tử Textarea
Thẻ TEXTAREA cung cấp một hộp cho phép nhập số  dòng text do người thiết kế định trước.

Ví dụ:

<TEXTAREA NAME="fieldName" ROWS=10 COLS=25>
     Default Text Here
</TEXTAREA>


 

Các lệnh thao tác trên đối tương của JS

Các lệnh giúp chúng ta dễ dàng thao tác trên đối tượng

1. Lệnh For...in
Câu lệnh này được sử dụng biêt tất cả các thuộc tính (properties) của một đối tượng. 

Cú pháp:

for (<variable> in <object>) {
//Các câu lệnh
}

Ví dụ:  Tạo trang (ForIn.htm)  in tất cả các thuộc tính của đối tượng Window. 

<Body><SCRIPT LANGUAGE= "JavaScript">
document.write("The properties of the Window  object are: <BR>");
for (var x in window)
	document.write("     "+ x + ", ");
</SCRIPT></Body>

Xem ví dụ

2. Biến 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áp:

objectvar = new object_type ( param1 [,param2]... [,paramN])

3. Từ Khóa This
Từ khoá this được sử dụng để chỉ đối tượng hiện thời. 

this [.property]

4. Lệnh 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.

with(object){
	// statement
}

Ví dụ: Tạo trang (Object.htm) minh hoạ cách tạo và sử dụng biến New, từ khoa this và lệnh with.

<HTML> 
<HEAD><TITLE>Function Example </TITLE>
<Script Language= "JavaScript">
function person(first_name, last_name, age, sex){
	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 + "<BR>" );
	write("Age :"+this.age+"<BR>");
	write("Sex :"+this.sex+"<BR>");
	}
}
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();
</SCRIPT>
</HEAD>
<BODY> </BODY>
</HTML>

Xem ví dụ

 

Mô hình đối tượng Browser (Browser Object Model)

Mô hình đối tượng Browser  dùng để tương tác với trình duyệt.

Đối tượng mặc định của trình duyệt là window có nghĩa khi gọi các phương thức thuộc đối tượng window bạn phải dùng từ khóa window rồi đến phương thức window.

Ví dụ:

window.alert("hello Hiep si IT"); 

Hoặc

alert("hello Hie Si It")

Bạn có thể sử dụng rất nhiều đối tượng khác được xác định bên dưới đối tượng đối tượng window:

Chú ý: Đối tượng document thường dùng cho các thẻ HTML. Document tạo ra DOM (Document Object Model)

Đối tượng window trong JS

Đối tượng Window đại diện cho một cửa sổ trong trình duyệt. Một đối tượng Window  được tạo ra tự động bởi trình duyệt.
Window  là đối tượng của trình duyệt, nó không phải là đối tượng của javascript. Các đối tượng javascript là chuỗi, mảng, ngày, v.v ...

Nếu văn bản HTML chứa các thẻ frame hoặc iframe. Thì trình duyệt tạo thêm đối tượng window cho mỗi frame

Các phương thức của đối tượng window

Bảng danh sách các phương thức quan trọng của đối tượng window

Phương thức Giải thích
alert ("message") Hiển thị hộp hội thoại với chuỗi "message" và nút OK.
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.
prompt ("message" [,"defaultInput"]) Mở một hộp hội thoại để nhận dữ liệu vào trường text.
[windowVar = ][window]. open("URL", "windowName", [ "windowFeatures" ] ) Mở cửa sổ mới.
close() Đóng cửa sổ hiện tại.
TimeoutID = setTimeout(expression,msec) Đánh giá biểu thức expresion sau thời gian mse.

1. Ví dụ sử dụng hàm alert()

Khi đó sẽ chờ cho đến khi người sử dụng nhấn vào nút OK . 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ào 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
<Body> 
<script Language="JavaScript">
alert("Chào mừng bạn đến với JavaScript!. \n Nhấn Ok để tiếp tục");
</script>
Chúc bạn thành công!!!
</Body> 

Xem ví dụ

2. Ví dụ sử dụng hàm confirm()

Lệnh confirm() tạo ra 1 hộp thoại gồm 1 dòng thông báo, nút OK và nút Cancel. Người sử dụng có thể click vào OK. Khi đó sẽ xử lý thực hiện hành động theo yêu cầu, ngược lại khi Click vào Cancel sẽ bỏ đóng hộp thọai thông bao. 
Thường sử dụng trong các trường hỏi đáp, xác nhận quyết định xử lý thông tin từ phía người dùng.

html><head>
<script>
function Hoidap(){
    question = confirm("Bạn thật sự muốn truy cập Website")
    if (question !="0"){
        top.location = "http://www.tuoitre.com.vn/"
    }
}
</script>
</head>
<body>
Hãy click vào đây để truy cập website:<a href="" onClick="Hoidap();return false;">
Báo Tuổi Trẻ </a> 
</body></html>

Xem ví dụ

3. Ví dụ sử dụng hàm prompt()

Một hộp thoại gồm 1 dòng thông báo, 1 trường nhập dữ liệu, 1 nút OK và 1 nút Cancel. Người sử dụng nhập vào trường đó rồi kích vào OK. Khi đó, ta có thể xử lý dữ liệu vừa đưa vào.

<Body>
<script Language="JavaScript">
var   name=window.prompt("Xin chào!Bạn tên gì?","");
document.write("Xin chào bạn " + name + " ! Chúc bạn học tốt JavaScript ");
</script>
</Body>

Xem ví dụ

4. Ví dụ sử dụng hàm open() và close()

Hiển thị nội dung trong cửa sổ mới

<HTML>
<HEAD>
<TITLE>Frame Example </TITLE>
</HEAD>
<BODY> 
<FORM>
<INPUT TYPE="button" VALUE="Open Second Window"  onClick="msgWindow=window.open('http://www.google.com.vn','window2','resizable=no,width=200,height=200')">
<P>
<A HREF="doc2.html" TARGET="window2"> 
Load a file into window2 </A>
</P>
<INPUT TYPE="button" VALUE="Close Second Window"
	onClick="msgWindow.close()">
</FORM>
</BODY>
</HTML>

Xem ví dụ

4. Ví dụ sử dụng hàm setTimeout()

Hàm này thực thi sau milliseconds

<script type="text/javascript">  
function msg(){  
setTimeout(  
function(){  
alert("Welcome to Hiệp Sĩ IT sau 2 giây")  
},2000);  
  
}  
</script>  
  
<input type="button" value="click" onclick="msg()"/>  

Xem ví dụ

Đối Tượng History Trong JS

Đối tượng history JavaScript đại diện cho một mảng các URL đã truy cập bởi người dùng.  Bằng cách sử dụng đối tượng này, bạn có thể tải trang trước, chuyển tiếp hoặc bất kỳ trang cụ thể nào.

Đối tượng History là thuộc tính của window. bạn có thể truy cập như sau:

window.history 

Hoặc

history  

1. Thuộc tính của đối tượng History

Đối tượng History có một thuộc tính duy nhất

Thuộc tính Giải thích
length Số lượng các URL trong đối tượng.

2. Phương thức của đối tượng History

Thuộc tính Giải thích
forward() Được sử dụng để tham chiếu tới URL mới được thăm trước đây.
back() Được sử dụng để tham chiếu tới URL kế tiếp trong danh sách.
go (delta | "location") Được sử dụng để chuyển lên hay chuyển xuống delta bậc hay di chuyển đến URL xác định bởi location trong danh sách. Dịch chuyển lên phía trên khi delta dương và xuống phía dưới khi delta âm.

Ví dụ về history

history.back();//for previous page  
history.forward();//for next page  
history.go(2);//for next 2nd page  
history.go(-2);//for previous 2nd page  

 

Đối tượng Navigator trong JS

Đối tượng navigator JavaScript được sử dụng để phát hiện trình duyệt. Nó có thể được sử dụng để lấy thông tin trình duyệt như appName, appCodeName, userAgent vv

Đối tượng Navigator là thuộc tính của Window. Truy cập thuộc tính theo cú pháp:

window.navigator 

Hoặc

navigator  

Các thuộc tính của đối tượng Navigator

Có nhiều thuộc tính của đối tượng Navigator để lấy thông tinh trình duyệt:

Thứ tự. Thuộc tính Giải thích
1 appName Xác định tên trình duyệt.
2 appVersion Xác định phiên bản trình duyệt.
3 appCodeName Xác định tên mã nội tại của trình duyệt (Atlas).
4 cookieEnabled Trả về true nếu trình duyệt cho phép ghi cookie
5 userAgent Xác định header của user - agent.
6 language Xác định ngôn ngữ của trình duyệt. Nó chỉ được hỗ trợ trong Netscape và Firefox .

Các phương thức của đối tượng JS

No. Phương thức Giải thích
1 javaEnabled() True nếu trình duyệt cho phép chạy JS.

Ví dụ: 

<script>  
document.writeln("<br/>navigator.appCodeName: "+navigator.appCodeName);  
document.writeln("<br/>navigator.appName: "+navigator.appName);  
document.writeln("<br/>navigator.appVersion: "+navigator.appVersion);  
document.writeln("<br/>navigator.cookieEnabled: "+navigator.cookieEnabled);  
document.writeln("<br/>navigator.language: "+navigator.language);  
document.writeln("<br/>navigator.userAgent: "+navigator.userAgent);  
document.writeln("<br/>navigator.platform: "+navigator.platform);  
document.writeln("<br/>navigator.onLine: "+navigator.onLine);  
</script>  

Xem ví dụ

 

 

Đối tượng Screen của JavaScript

Đối tượng Screen của JavaScript chứa thông tin của màn hình trình duyệt. Nó có thể được sử dụng để hiển thị chiều rộng, chiều cao, màu sắc của màn hình vv

Đối tượng Screen là thuộc tính của Window, vì vậy nó có thể được truy cập bởi:

window.screen  

Hoặc

screen  

Thuộc tính của đối tượng Screen trong JavaScript

Có nhiều thuộc tính của đối tượng Screen trả về thông tin của trình duyệt.

Thứ tự. Thuộc tính Giải thích
1 width Xác định chiều rộng của màn hình
2 height Xác định chiều cao của màn hình
3 availWidth Lấy chiều rộng màn hình của người dùng (không bao gồm thanh Taskbar nằm dọc)
4 availHeight Lấy chiều cao màn của người dùng (không bao gồm thanh Taskbar nằm ngang)
5 colorDepth Lấy độ phân giải màu sắc màn hình của người dùng
6 pixelDepth Lấy độ phân giải phân giải màn hình của người dùng.

Ví dụ: 

<script>  
document.writeln("<br/>screen.width: "+screen.width);  
document.writeln("<br/>screen.height: "+screen.height);  
document.writeln("<br/>screen.availWidth: "+screen.availWidth);  
document.writeln("<br/>screen.availHeight: "+screen.availHeight);  
document.writeln("<br/>screen.colorDepth: "+screen.colorDepth);  
document.writeln("<br/>screen.pixelDepth: "+screen.pixelDepth);  
</script>  

Xem ví dụ

Đối tượng Location trong JS

Đối tượng location chứa các thông tin về URL hiện tại (URL của trang web mà bạn đang truy cập)

Với việc truy cập vào các thuộc tính của đối tượng location, ta sẽ lấy được những thông tin của URL hiện tại như: giao thức, tên máy chủ, tên dường dẫn, chuỗi truy vấn, chỗ neo,....

 Dưới đây là danh sách các thuộc tính thường được sử dụng nhất của đối tượng location:

Thuộc tính Mô tả
href Trả về URL hiện tại
protocol Trả về giao thức của URL hiện tại
hostname Trả về tên máy chủ của URL hiện tại
pathname Trả về tên đường dẫn của URL hiện tại
search Trả về chuỗi truy vấn của URL hiện tại
hash Trả về chỗ neo (anchor) của URL hiện tại

Ngoài ra, đối tượng location còn cung cấp một số phương thức như:

Phương thức Mô tả
reload() Tải lại trang hiện tại
replace() Điều hướng trang hiện tại sang một trang khác
assign() Điều hướng trang hiện tại sang một trang khác

1. Lấy URL hiện tại

- Để lấy URL hiện tại, ta truy cập vào thuộc tính href của đối tượng location.

Ví dụ:

<script>
    var x = location.href;
    document.write(x);
</script>

Xem ví dụ

2. Lấy tên máy chủ của URL hiện tại

Để lấy tên máy chủ của URL hiện tại, ta truy cập vào thuộc tính hostname của đối tượng location.

Ví dụ:

<script>
    var x = location.hostname;
    document.write(x);
</script>

Xem ví dụ

3. Chuyển trang 

Để chuyển trang trong JS, ta truy cập vào thuộc tính href ame của đối tượng location.

Ví dụ:

<script>
 location.href ="http://www.google.com.vn"
</script>

Xem ví dụ

4. Tải lại trang hiện tại

- Để tải lại trang hiện tại, ta truy cập vào phương thức reload() của đối tượng location.

- Phương thức reload() có ý nghĩa giống như khi ta bấm vào nút "Tải lại trang này" trên trình duyệt.

Ví dụ:

<html>
<body>
    <button type="button" onclick="tai_lai_trang()">Tải lại trang</button>
    <script>
        function tai_lai_trang(){
            location.reload();
        }
    </script>
</body>
</html>

Xem ví dụ

DOM là gì?

DOM là viết tắt của chữ Document Object Model, dịch tạm ra là mô hình các đối tượng trong tài liệu HTML. 

Như các bạn biết trong mỗi thẻ HTML sẽ có những thuộc tính (Properties) và có phân cấp cha - con với các thẻ HTML khác. Sự phân cấp và các thuộc tính của thẻ HTML này ta gọi là selector và trong DOM sẽ có nhiệm vụ xử lý các vấn đề như đổi thuộc tính của thẻ, đổi cấu trúc HTML của thẻ, ...

Bạn có thể tham khảo hình vẽ dưới đây để hiểu rõ hơn về DOM.

Cú pháp:

window.document

Hoặc

document  

Các phương thức của đối tượng DOM

Chúng ta có thể truy cập và thay đổi nội dung của tài liệu bằng các phương thức của nó.
Các phương thức quan trọng của đối tượng tài liệu như sau:

Phương thức Giải thích
write("string") Xuất chuỗi ra trình duyệt.
writeln("string") Xuất chuỗi ra trinh duyệt và xuống dòng.
getElementById(id) Lấy các thành phần theo id của thẻ HTML..
getElementsByName(tagname) Lấy phần tử theo tên, chính là thuộc tính name trong thẻ.
getElementsByTagName(name) Lấy phần tử theo tên thẻ HTML.
getElementsByClassName() Lấy phần tử theo thuộc tính class.

Ví dụ: Truy xuất và thông báo ra nội dung của thẻ HTML có id là hiepsi.

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hiep si IT javascript</title>
</head>

<body>
    <div id="hello">Chào mừng các bạn đến với website học lập trình online </div>
    <div id="hiepsi">Hiep SI IT</div>

    <script type="text/javascript">
        var element = document.getElementById('hiepsi');
        var content = element.innerHTML;
        alert(content);
    </script>
</body>

</html>

Xem ví dụ

Ví dụ: Tìm và lấy ra nội dung của thẻ HTML có class name là hello.

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hiệp Sĩ IT javascript</title>
</head>

<body>
    <div class="hello">Chào mừng các bạn đến với website học lập trình online </div>
    <div class="hiepsi">Hiệp Sĩ IT</div>

<script type="text/javascript">
     var element = document.getElementsByClassName('hello');
     //Lấy ra nội dung của thẻ đầu tiên
     var content = element[0].innerHTML;
     alert(content);
</script>
</body>

</html>

Xem ví dụ

Truy cập giá trị của field bằng đối tượng Document

Trong ví dụ này, chúng ta sẽ nhận được giá trị của văn bản do người sử dụng nhập vào. Ở đây, chúng ta đang sử dụng document.form1.name.value để lấy giá trị của filed name.
Ở đây, Document  là phần tử gốc đại diện cho tài liệu html.
form1 là tên của form.
name là tên thuộc tính của thẻ input.
value là thuộc tính, trả về giá trị của văn bản do người sử dụng nhập vào.

Ví dụ:

<script type="text/javascript">  
function printvalue(){  
var name=document.form1.name.value;  
alert("Welcome: "+name);  
}  
</script>  
  
<form name="form1">  
Enter Name:<input type="text" name="name"/>  
<input type="button" onclick="printvalue()" value="print name"/>  
</form>  

Xem ví dụ

Phương thức getElementById()  trong JS

Lấy các thành phần theo id của thẻ HTML.

Trong trang trước, chúng ta đã sử dụng document.form1.name.value để lấy giá trị của giá trị đầu vào. Thay vì điều này, chúng ta có thể sử dụng phương thức document.getElementById () để nhận giá trị của văn bản được nhập vào. Nhưng chúng ta cần định nghĩa id cho trường (field) đầu vào.

Ví dụ:

<script type="text/javascript">  
function getcube(){  
var number=document.getElementById("number").value;  
alert(number*number*number);  
}  
</script>  
<form>  
Enter No:<input type="text" id="number" name="number"/><br/>  
<input type="button" value="cube" onclick="getcube()"/>  
</form>  

Xem ví dụ

 

Phương thức getElementsByName() trong JS

Lấy phần tử theo tên, chính là thuộc tính name trong thẻ.

Cú pháp:

document.getElementsByName("name")  

Tên là bắt buộc

Trong ví dụ này, chúng ta sẽ đếm tổng số giới tính. Ở đây, chúng tôi đang sử dụng phương thức getElementsByName () để nhận tất cả các giới tính.

<script type="text/javascript">  
function totalelements()  
{  
var allgenders=document.getElementsByName("gender");  
alert("Total Genders:"+allgenders.length);  
}  
</script>  
<form>  
Male:<input type="radio" name="gender" value="male">  
Female:<input type="radio" name="gender" value="female">  
  
<input type="button" onclick="totalelements()" value="Total Genders">  
</form>  

Xem ví dụ

Phương thức getElementsByTagName() trong JS

    Lấy phần tử theo tên, chính là thuộc tính name trong thẻ.

Cú pháp:

document.getElementsByTagName("name")  

Tên thẻ là bắt buộc

Trong ví dụ này, chúng ta sẽ đếm tổng số đoạn văn bản  được sử dụng trong đối tượng document . Để làm điều này, chúng ta đã gọi phương thức document.getElementsByTagName ("p") trả lại tổng số đoạn văn.

<script type="text/javascript">  
function countpara(){  
var totalpara=document.getElementsByTagName("p");  
alert("total p tags are: "+totalpara.length);  
  
}  
</script>  
<p>This is a pragraph</p>  
<p>Here we are going to count total number of paragraphs by getElementByTagName() method.</p>  
<p>Let's see the simple example</p>  
<button onclick="countpara()">count paragraph</button>  

Xem ví dụ

Trong ví dụ này, chúng ta sẽ tính tổng số thẻ h2 và h3 được sử dụng trong đối tượng.

<script type="text/javascript">  
function counth2(){  
var totalh2=document.getElementsByTagName("h2");  
alert("total h2 tags are: "+totalh2.length);  
}  
function counth3(){  
var totalh3=document.getElementsByTagName("h3");  
alert("total h3 tags are: "+totalh3.length);  
}  
</script>  
<h2>This is h2 tag</h2>  
<h2>This is h2 tag</h2>  
<h3>This is h3 tag</h3>  
<h3>This is h3 tag</h3>  
<h3>This is h3 tag</h3>  
<button onclick="counth2()">count h2</button>  
<button onclick="counth3()">count h3</button>  

Xem ví dụ

Lưu ý: Đầu ra của các ví dụ đưa ra có thể khác nhau trên trang này vì nó sẽ đếm tổng số p, tổng số h2 và tổng số thẻ h3 được sử dụng trong tài liệu này.

Thuộc tính innerHTML trong JS

Thuộc tính innerHTML có thể được dùng để xuất HTML động .
Nó được sử dụng chủ yếu trong các trang web để tạo ra các html động như là mẫu đăng ký, mẫu bình luận, liên kết vv

Ví dụ về thuộc tính innerHTML

Trong ví dụ này, chúng ta sẽ tạo ra các biểu form html khi người dùng nhấp vào nút.
Trong ví dụ này, chúng tôi đang tự động viết các mẫu html bên trong thẻ div có id mylocation. Chúng ta xác định vị trí này bằng cách gọi phương thức document.getElementById ().

<script type="text/javascript" >  
function showcommentform() {  
var data="Name:<input type='text' name='name'><br>Comment:<br><textarea rows='5' cols='80'></textarea>  <br><input type='submit' value='Post Comment'>";  
document.getElementById('mylocation').innerHTML=data;  
}  
</script>  
<form name="myForm">  
<input type="button" value="comment" onclick="showcommentform()">  
<div id="mylocation"></div>  
</form>  
					

Xem ví dụ

Ví dụ khác về việc dấu, hiển thị form sử dụng thuộc tính innerHTML

   <html>  
<head>  
<title>First JS</title>  
<script>  
var flag=true;  
function commentform(){  
var cform="<form action='Comment'>Enter Name:<br><input type='text' name='name'/><br/>"  
cform+="Enter Email:<br><input type='email' name='email'/><br>Enter Comment:<br/>"  
cform+="<textarea rows='5' cols='70'></textarea><br><input type='submit' value='Post Comment'/></form>";  
if(flag){  
document.getElementById("mylocation").innerHTML=cform;  
flag=false;  
}else{  
document.getElementById("mylocation").innerHTML="";  
flag=true;  
}  
}  
</script>  
</head>  
<body>  
<button onclick="commentform()">Comment</button>  
<div id="mylocation"></div>  
</body>  
</html>

Xem ví dụ

Thuộc tính innerText trong JS

Thuộc tính innerText có thể được dùng để xuất văn bản động trên tài liệu html. Ở đây, văn bản sẽ không được hiểu là văn bản html nhưng văn bản thông thường.

Nó được sử dụng chủ yếu trong các trang web để tạo ra các nội dung động như xuất tin nhắn xác nhận, tạo mật khẩu mạnh vv

Ví dụ thuộc tính innerText

Trong ví dụ này, chúng tôi sẽ hiển thị mật khẩu sau phím được nhấn.

<script type="text/javascript" >  
function validate() {  
var msg;  
if(document.myForm.userPass.value.length>5){  
msg="good";  
}  
else{  
msg="poor";  
}  
document.getElementById('mylocation').innerText=msg;  
 }  
  
</script>  
<form name="myForm">  
<input type="password" value="" name="userPass" onkeyup="validate()">  
Strength:<span id="mylocation">no strength</span>  
</form>  

Xem ví dụ

Các lệnh xử lý lỗi trong JavaScript

JavaScript cung cấp cho ta bốn loại lệnh dùng để kiểm soát và xử lý lỗi: try, catch, throw, finally

1) Lệnh "try" và "catch" trong JavaScript


- Như chúng ta đã biết:

Khi thực thi một đoạn mã JavaScript, nếu một câu lệnh nào đó bị lỗi thì việc thực thi sẽ kết thúc
(tất cả những câu lệnh nằm phía sau câu lệnh bị lỗi sẽ không được thực thi)

Từ đây, lệnh try giúp chúng ta tránh tình trạng này.

- Lệnh try được dùng để kiểm tra (thực thi) một đoạn mã, nếu đoạn mã đó có chứa câu lệnh bị lỗi thì những câu lệnh nằm phía sau câu lệnh bị lỗi sẽ không được thực thi. Tuy nhiên, những câu lệnh nằm ngoài lệnh try thì vẫn thực thi bình thường.

- Lệnh try cần phải sử dụng kèm với lệnh catch hoặc lệnh finally

(Nhưng thông thường thì lệnh try được sử dụng chung với lệnh catch nhiều hơn)

- Lệnh catch dùng để xác định một đoạn mã và đoạn mã đó sẽ được thực thi nếu đoạn mã bên trong lệnh try có chứa câu lệnh bị lỗi (Điều đó đồng nghĩa với việc: nếu đoạn mã bên trong lệnh try không chứa câu lệnh bị lỗi thì đoạn mã bên trong lệnh catch sẽ không được thực thi).

Cú pháp: 

try {
Khối code để try
}
catch(err) {
Khối mã để xử lý lỗi
 }

 Ví dụ:

<html>
<body><p id=”demo”></p><script>
try {
adddlert(“Welcome guest!”);
}
catch(err) {
document.getElementById(“demo”).innerHTML = err.message;
}
</script>

</body>
</html>

hiepsiithtml1

 Lưu ý: Lệnh catch phải có một tham số (điển hình ví dụ trên là tham số err), tham số này dùng để lưu trữ một đối tượng, đối tượng này chứa các thông tin về lỗi của câu lệnh bị lỗi trong lệnh try.

2. Lệnh "throw" trong JavaScript


- Lệnh throw thường được đặt bên trong lệnh try

- Lệnh throw có chức năng ném ra một lỗi (hoặc cũng có thể nói là tạo ra một lỗi)

- Lưu ý: Sau khi lệnh throw "được thực thi" thì một lỗi sẽ được tạo ra, điều đó cũng đồng nghĩa với việc câu lệnh bị lỗi. Do đó, những câu lệnh còn lại nằm phía sau lệnh throw sẽ không được thực thi.

Ví dụ:

Ví dụ này kiểm tra đầu vào. Nếu giá trị là sai, một ngoại lệ (err) được ném ra. Ngoại lệ (err) được tóm bởi lệnh catch và một thông báo lỗi tùy chỉnh được hiển thị:

<html>
<body><p>Hãy nhập một số trong khoảng từ 5 đến 10:</p><input id="demo" type="text">
<button type="button" onclick="myFunction()">Kiểm tra giá trị nhập vào</button>
<p id=”message”></p>

<script>
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "rỗng";
if(isNaN(x)) throw "không phải là số";
x = Number(x);
if(x < 5) throw "quá nhỏ";
if(x > 10) throw "quá lớn";
}
catch(err) {
message.innerHTML = "Input is " + err;
}
}
</script>

</body>
</html>

hiepsiitthml2

3. Lệnh "finally" trong JavaScript

- Lệnh finally thường được đặt phía sau lệnh try hoặc try ... catch

- Lệnh finally dùng để thực thi một đoạn mã mặc định
(mặc cho đoạn mã bên trong lệnh try có chứa câu lệnh bị lỗi hay không)

<script>
    function KiemTraDuLieu() {
        document.getElementById("demo").innerHTML = "";
        var number = document.getElementById("number").value;
        try{ 
            if(number == ""){
                throw "Bạn chưa nhập giá trị";
            }else if(isNaN(number)){
                throw "Giá trị bạn nhập không phải là một số";
            }else if(number < 1){
                throw "Giá trị vừa nhập nhỏ hơn giá trị cho phép";
            }else if(number > 10){
                throw "Giá trị vừa nhập lớn hơn giá trị cho phép";
            }
            document.getElementById("demo").innerHTML = "Hợp lệ";
        }
        catch(err){
            document.getElementById("demo").innerHTML = err;
        }
        finally{
            document.getElementById("number").value = "";
        }
    }
</script>

 

Khái niệm sự kiện và xử lý 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 như: Click chuột . . . 
Chương trình xử lý sự kiện (Event handler) là 1 đoạn mã hay 1 hàm được thực hiện để phản ứng trước 1 sự kiện được xác định là một thuộc tính của một thẻ HTML:

Cú pháp:

<tagName  eventHandler = "JavaScript Code or Function">

Ví dụ:Trang EventHander.htm thẩm định giá trị đưa vào trong trường text Tuổi phai hợp lệ nếu sẽ xuất hiện thông báo yêu cầu nhập lại. 
 

<HTML>
<HEAD><Title> An Event Handler Exemple </Title>
<Script Language= "JavaScript">
function CheckAge() {
if ( (document.frmDieutra.AGE.value<0)||(document.frmDieutra.AGE.value>120) ) {
alert("Tuổi nhập vào không hợp lệ! Mời bạn nhập  lại");
	document.frmDieutra.AGE.value=0;
	}
}
</Script>
</Head><Body>
<Form NAME="frmDieutra">
Nhập vào tên của bạn:<BR>
Tên <Input Type=Text Name="TEN" ><BR>
Đệm <Input Type=Text Name="DEM" ><BR>
Họ  <Input Type=Text Name="HO" ><BR>
Age <Input Type=Text Name="AGE" onChange="CheckAge()"><BR>
<Input Type="button" Value="Submit">
<Input Type="Reset" Value="Reset">
</Form>
</Body></HTML>

Xem ví dụ

Một số sự kiện trong JavaScript:

Phương thức Giải thích
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ên kết của form.
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

Các sự kiện có sẵn của một số đối tượng.  

Đố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ụ: Trang LoadUnLoad.htm

<HTML> 
<HEAD> <TITLE>Event Handler</TITLE> 
</HEAD> 
<BODY onLoad="alert('Welcome to my page!');" onUnload="alert('Goodbye! ');"> 
<IMG SRC="Logo.jpg"> 
</BODY> 
</HTML>

Xem ví dụ

Biểu thức chính quy RegExp (regular expression)

Cũng như những ngôn ngữ lập trình khác biểu thức quy tắc (regular expression/ RegExp) là một tính năng đắc lực để kiểm tra, so sánh, thay thế, tách, ghép một chuỗi nào đó theo một quy tắc bạn quy định, nếu bạn đã tìm hiểu về biểu thức quy tắc trong ngôn ngữ PHP rồi thì sẽ thấy javaScript cũng có cách quy định tương tự chỉ khác ở một số hàm xử lý biểu thức quy tắc. Có 2 phương thức của RegExp để kiểm tra là exec và test, có một vài phương thức của chuỗi hữu dụng với biểu thức quy tắc là search, match, split, replace.

Trong javaScript ta có 2 cách để khai báo biểu thức quy tắc:

  1. Khai báo với 2 dấu "/" ở đầu và cuối biểu thức
  2. Khai báo thông qua việc tạo đối tượng RegExp

Cách thứ nhất thường dùng nhiều hơn bởi sự đơn giản trong khai báo.
Khi xử lý một chuỗi với biểu thức điều kiện một điều quan trọng là bạn muốn khi áp dụng ký tự có phân biệt chữ in hoa in thường hay không và áp dụng cho đoạn chuỗi đầu tiên tìm được hay tất cả các đoạn chuỗi hợp quy tắc, ta sẽ được tìm hiểu điều này sau đây:

  • "/quy tắc/" biểu thức có phân biệt chữ in hoa, in thường, và chỉ áp dụng cho đoạn chuỗi đầu tiên tìm thấy đúng quy tắc
  • "/quy tắc/g" biểu thức có phân biệt hoa - thường và áp dụng cho tất cả đoạn chuỗi hợp quy tắc
  • "/quy tắc/i" biểu thức không phân biệt hoa - thường, và chỉ áp dụng cho đoạn chuỗi đầu tiên tìm thấy đúng quy tắc
  • "/quy tắc/gi" biểu thức không phân biệt hoa - thường, và áp dụng cho tất cả đoạn chuỗi hợp quy tắc

Ví dụ: thay ký tự n bằng dấu "*"

<script>
var str = 'Xin chào!, tôi là Nguyen Hữu PHP 777';
var str1 = str.replace(/n/gi, '*');
document.write(str1);
var str2 = str.replace(/n/,'*');
document.write(str2);
</script>

Xem ví dụ

Tiếp theo ta sẽ tìm hiểu cách viết biểu thức quy tắc với cách dùng ký tự đại diện được quy ước trong biểu thức.
Quy tắc về vị trí

  • "^" nghĩa là bắt đầu một chuỗi
  • "$" nghĩa là kết thúc một chuỗi
  • "\b" nghĩa là điểm giữa một ký tự là từ và ký tự không phải là từ, ký tự là từ ở đây là ký tự từ A-z, 0-9
  • "\B" ngược lại với '/b'
<script>
var str = 'Nguyen Van Toan';
var str3 = str.replace(/n\b/, '*');
document.write(str3);
var str4 = str.replace(/n\B/, '*');
document.write(str4);
</script>

Xem ví dụ

Quy tắc về những ký tự metasymbol

  • "." đại diện bất kỳ ký tự nào
  • "\d" đại diện cho một ký tự số từ 0-9, tương đương với cách viết [0-9]
  • "\D" đại diện cho một ký tự không phải là kiểu số từ 0-9, ngược lại với "\d"
  • "\s" đại diện cho một ký tự là khoảng trắng
  • "\S" đại diện cho một ký tự không phải là khoảng trắng, ngược lại với "\s"
  • "\w" đại diện cho một ký tự từ A-Z hoặc a-z hoặc 0-9, hoặc ký tự gạch dưới "_"
  • "\W" đại diện cho một ký tự không phải là từ A-Z, a-z, 0-9, ký tự gạch dưới "_"

Ví dụ:

<script>
var str = 'Xin chào!, tôi là VANKHUONG 777';
var str5 = str.replace(/\w/g, '*');
document.write(str5)
</script>

Xem ví dụ

Quy tắc về số lượng ký tự

  • "x?" nghĩa là một ký tự "x" hoặc không có ký tự nào
  • "x*" nghĩa là một hoặc nhiều ký tự "x" hoặc không có ký tự nào
  • "x+" nghĩa là có ít nhất một ký tự x
  • "x{n}" nghĩa là ký tự x lặp lại n lần
  • "x{n,}" nghĩa là ký tự x lặp lại ít nhất n lần
  • "x{n,m}" nghĩa là ký tự x lặp lại từ n tới m lần

Ví dụ:

<script>
var str = 'good night, godgad, gd, gooogle';
var str6 = str.replace(/go?d/gi, '*');
document.write(str6);
var str7 = str.replace(/g(oo)?d/gi, '*');
document.write(str7);
var str8 = str.replace(/go*d/gi, '*');
document.write(str8);
var str9 = str.replace(/go+/gi, '*');
document.write(str9);
var str10 = str.replace(/o{2}/gi, '*');
document.write(str10);
var str11 = str.replace(/o{2,}/gi, '*');
document.write(str11);
var str12 = str.replace(/go{1,3}d/gi, '*');
document.write(str12);
</script>

Xem ví dụ

Quy tắc về danh sách ký tự
"[...]" trong dấu ngoặc vuông liệt kê danh sách những ký tự hợp quy tắc, có thể dùng dấu gạch giữa "-"giữa 2 ký tự để thể hiện danh sách những ký tự trong khoảng 2 ký tự theo vị trí ASCII của ký tự
"[^...]" chức năng thì ngược lại với "[...]" thay vì liệt kê những ký tự hợp quy tắc, nó cho biết bất kỳ ký tự nào ngoài danh sách các ký tự trong dấu ngoặc vuông 

Ví dụ:

<script>
var str ='ABCDEF, abcdef, 12345';
var str13 = str.replace(/[Ab1]/g, '*');
document.write(str13);
var str14 = str.replace(/[A-Cd-f1-35]/g, '*');
document.write(str14);
var str15 = str.replace(/[^A-f4-5]/g, '*');
document.write(str15);
</script>

Xem ví dụ

Các hàm trong đối tượng Regular Expression

Khi khai báo một chuổi Regular Expression (Đa số chúng ta dùng cách rút gọn) thì chúng ta đã tạo ra một đối tượng RegExp, với các hàm được định nghĩa như sau:
test() Hàm này sẽ kiểm tra tham số truyền vào có trùng với chuỗi "pattern" mà ta đã định nghĩa hay không. Hàm trả về giá trị true nếu chuỗi nhập vào có mẫu ta cần tìm và false nếu tìm không thấy.
exec() Hàm này trả về một mảng chứa các đoạn trùng khớp với "pattern" chúng ta định nghĩa và trả về null nếu không tìm thấy.
Chúng ta còn có thể sử dụng rút gọn mà không cần khai báo chuổi Regular Expression. 

Ví dụ: dùng hàm test

<html>
<body>
    <p id="demo"></p>
    <script>
        var str = "Hiep si it huong dan hoc lap trinh web";
        var reg = /Hiep/; // kiem tra xem trong str có chữ Hiep?
        var result = reg.test(str);
        document.getElementById("demo").innerHTML = result;
    </script>
</body>
</html>

Xem ví dụ

Với biểu thức quy tắc bạn có thể có nhiều cách viết khác nhau cùng theo một quy tắc hay cùng cho bạn kết quả giống nhau, có người viết dài người viết ngắn nhưng miễn sao bạn thấy dễ hiểu là được, nếu bạn viết quen thì biểu thức nhìn sẽ ngắn hơn. Nếu bạn không hiểu rõ các quy ước trong biểu thức quy tắc thì bạn cũng chẳng hiểu người khác viết gì vì đa số những người có kinh nghiệm đều viết biểu thức ngắn và chặt chẽ, hy vọng bạn thấy bài viết này bổ ích và có thể vận dụng nó một cách hiệu quả.

Kiểm tra hợp lệ form

Điều quan trọng là dữ liệu được gửi bởi người dùng bởi vì nó có thể có các giá trị không phù hợp. 
JavaScript cung cấp một số cách kiểm tra phía client, Vì vậy, quá trình xử lý sẽ nhanh hơn so với  phía máy chủ. Hầu hết các nhà phát triển web thích xác nhận tính hợp lệ bằng JavaScript.
Thông qua JavaScript, chúng ta có thể xác nhận tên, mật khẩu, email, ngày tháng, số điện thoại di động vv. Có hợp lệ?

Ví dụ kiểm tra tính hợp lệ của form

Trong ví dụ này, chúng ta sẽ kiểm tra tên và mật khẩu. Tên không được để trống tên và mật khẩu không được nhỏ hơn 6 ký tự. Người sử dụng sẽ chuyển qua trang khác, nếu nhập đúng yêu cầu.

<script>  
function validateform(){  
var name=document.myform.name.value;  
var password=document.myform.password.value;  
  
if (name==null || name==""){  
  alert("Name can't be blank");  
  return false;  
}else if(password.length<6){  
  alert("Password must be at least 6 characters long.");  
  return false;  
  }  
}  
</script>  
<body>  
<form name="myform" method="post" action="abc.jsp" onsubmit="return validateform()" >  
Name: <input type="text" name="name"><br/>  
Password: <input type="password" name="password"><br/>  
<input type="submit" value="register">  
</form>  

Xem ví dụ

Ví dụ kiểm tra mật khẩu nhập lại có khớp với mật khẩu ban đầu?

<script type="text/javascript">  
function matchpass(){  
var firstpassword=document.f1.password.value;  
var secondpassword=document.f1.password2.value;  
  
if(firstpassword==secondpassword){  
return true;  
}  
else{  
alert("password must be same!");  
return false;  
}  
}  
</script>  
  
<form name="f1" action="register.jsp" onsubmit="return matchpass()">  
Password:<input type="password" name="password" /><br/>  
Re-enter Password:<input type="password" name="password2"/><br/>  
<input type="submit">  
</form>  

Xem ví dụ

Ví dụ kiểm tra số trong JS

Hãy kiểm giá trị nhập vào có phải số?. Ở đây, chúng ta đang sử dụng hàm isNaN ()

<script>  
function validate(){  
var num=document.myform.num.value;  
if (isNaN(num)){  
  document.getElementById("numloc").innerHTML="Enter Numeric value only";  
  return false;  
}else{  
  return true;  
  }  
}  
</script>  
<form name="myform" onsubmit="return validate()" >  
Number: <input type="text" name="num"><span id="numloc"></span><br/>  
<input type="submit" value="submit">  
</form>  

Xem ví dụ

kiểm tra form hợp lệ

Tạo ra hàm kiểm tra hợp lệ bằng cách dùng từng phần tử input trong form để kiểm tra.

<html>
<head>
<title>Check Form Register</title>
<META name="Author" content="Scorpion">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript">
    function checkinput(){
        username=document.myform.username;
        password=document.myform.password;
        password1=document.myform.password1;
        hoten=document.myform.hoten;
        diachi=document.myform.diachi;
        email=document.myform.email;
        dienthoai=document.myform.dienthoai;
        reg1=/^[0-9A-Za-z]+[0-9A-Za-z_]*@[\w\d.]+.\w{2,4}$/;
        testmail=reg1.test(email.value);
        if(username.value==""){
            alert("Hãy chọn tên đăng nhập");
            username.focus();
            return false;
        }
        if(password.value==""){
            alert("Chưa nhập mật khẩu");
            password.focus();
            return false;
        }
        if(password1.value==""||password1.value!==password.value){
            alert("Mật khẩu lần 2 chưa khớp");
            password1.focus();
            return false;
        }
        if(hoten.value==""){
            alert("Hãy nhập vào họ tên của bạn");
            hoten.focus();
            return false;
        }
        if(diachi.value==""){
            alert("Chưa nhập địa chỉ");
            diachi.focus();
            return false;
        }
        if(!testmail){
            alert("Địa chỉ email không hợp lệ");
            email.focus();
            return false;
        }
        if(isNaN(dienthoai.value)){
            alert("Số điện thoại chưa chính xác");
            dienthoai.focus();
            return false;
        }
        else alert('OK, đã nhập đúng dữ liệu');
        return true;
    }
</script>
</head>

<body>
<form name="myform" method="post" action="#" onsubmit="return checkinput();">
        <table align="center">
          <p><strong><font color="#FF0000">Đăng ký thành viên</font></strong>
             </p>
          <tr>
            <td>Xin vui lòng nhập đúng<br />
              các thông tin cá nhân</td>
          </tr>
          <p></p>
          <tr>
            <td><b>Tên đăng nhập:</b></td>
            <td><input type="text" name="username" /></td>
          </tr>
          <tr>
            <td><b>Mật khẩu:</b></td>
            <td><input type="password" name="password" /></td>
          </tr>
          <tr>
            <td><b>Nhập lại Mật khẩu:</b></td>
            <td><input type="password" name="password1" /></td>
          </tr>
          <tr>
            <td><b>Họ tên:</b></td>
            <td><input type="text" size="30" name="hoten" /></td>
          </tr>
          <tr>
            <td><b>Địa chỉ:</b></td>
            <td><input type="text" size="30" name="diachi" /></td>
          </tr>
          <tr>
            <td><b>Email:</b></td>
            <td><input type="text" size="30" name="email" /></td>
          </tr>
          <tr>
            <td><b>Số điện thoại:</b></td>
            <td><input type="text" size="20" name="dienthoai" /></td>
          </tr>
          <p align="center"> </p>
        </table>
        <p align="center">
            <input type="submit" value="Đăng ký" style="color:yellow;background:green">
            <input type="reset" value="Làm lại" style="color:yellow;background:green">
        </p>
      </form>
</body>
</html>

Xem ví dụ