Giới thiệu về JavaScript

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.

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.

  1. 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.
  2. 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

Nhúng JavaScript vào trong trang Web

Chúng ta có thẻ chèn các lệnh JavaScritp vào trong một tài liệu HTML theo những cách sau đây:

1. Nhúng các câu lệnh trực tiếp vào trong tài liệu bằng cách sử dụng thẻ <SCRIPT>
2. Liên kết file nguồn JavaScript với tài liệu HTML
3. Đặt các biểu thức JavaScript làm giá trị cho thuộc tính của thẻ HTML.
4. Dùng như trình xử lý sự kiện trong các thẻ HTML.

Chúng ta có xem chi tiết một số ví dụ sau đây:

• Dùng thẻ SCRIPT

  Mã JavaScript cụ thể được nhúng vào trong tài liệu HTML bằng thẻ SCRIPT. Chúng ta có thể nhúng nhiều script vào trong cùng một tài liệu, mỗi script nằm trong một thẻ SCRIPT. Khi trình duyệt gặp phải một thẻ <SCRIPT> nào đó, nó sẽ đọc từng dòng một cho đến khi gặp thẻ đóng </SCRIPT>. Tiếp đến nó sẽ kiểm tra lỗi trong các câu lệnh JavaScript. Nếu gặp

  phải lỗi, nó sẽ cho hiển thị lỗi đó trong chuỗi các hộp cảnh báo (alert boxes) lên màn hình. Nếu không có lỗi, các câu lệnh sẽ được biên dịch sao cho máy tính có thể hiểu được lệnh đó.

  Cú pháp như sau:

• <script language="JavaScript">

• </script>

• Thuộc tính language trong thẻ script chỉ ra ngôn ngữ mà trình duyệt sẽ dùng để biên dịch script. Chúng ta cũng có thể chỉ rõ phiên bản JavaScript nào sẽ được trình duyệt sử dụng.

  <script language="JavaScript1.2">
      

• <! - -statements //- -> là các thẻ chú thích. Những thẻ này được dùng để báo cho trình duyệt bỏ qua các câu lệnh chứa trong nó. < ! là thẻ mở của thẻ chú thích, //- -> là thẻ đóng. Các thẻ này không bắt buộc phải có, nhưng ta nên đưa chúng vào trong các đoạn script. Chỉ có Netscape 2.0 và các phiên bản sau đó mới hỗ trợ JavaScript. Các thẻ chú thích đảm bảo các phiên bản cũ hoặc các trình duyệt không hỗ trợ JavaScript sẽ bỏ qua các câu lệnh được nhúng trong tài liệu HTML.

  Các câu lệnh JavaScript phải được kết thúc bằng dấu chấm phẩy ( ;).

  Trong ví dụ sau đây, ngôn ngữ script được đặt là JavaScript. Các thẻ chú thích được dùng để các phiên bản cũ của trình duyệt bỏ qua script nằm trong các thẻ chú thích. Các phiên bản trình duyệt mới sẽ thực thi các câu lệnh JavaScript.

  <HTML>
      <HEAD>
           <script language = "JavaScript">
               
            </script>
      </head>
      <body>
           <P>Enjoy the learning experience!!! 
      </BODY>
  </HTML>
      

  Kết quả:

  Dùng JavaScript

Trên lý thuyết các câu lệnh JavaScript có thể đặt ở bất kỳ nơi nào trong tài liệu HTML. Tuy nhiên, nên đặt các câu lệnh script trong phần <head> và </head>. Điều này đảm bảo tất cả các câu lệnh đều được đọc và biên dịch trước khi nó được gọi từ trong phần BODY.

• Dùng file bên ngoài

  Thường các câu lệnh JavaScript được nhúng trong một tài liệu HTML. Tuy nhiên, chúng ta có thể tạo ra một file riêng chứa mã JavaScript. File này có thể được liên kết với một tài liệu HTML. Thuộc tính SRC (source) của thẻ SCRIPT dùng để chỉ ra file chứa JavaScript mà nó cần sử dụng. Khi xác định file nguồn, ta có thể dùng tên đường dẫn tương đối và tuyệt đối ở trong thuộc tính SRC.

   
  <script language="JavaScript" src="filename.js"> 
  </script> 
  

  Đó là file văn bản chứa các mã lệnh JavaScript, tên file có phần mở rộng là “.js”. Nó chỉ có thể chứa các câu lệnh và các hàm JavaScript. Ta không thể đưa các thẻ HTML vào trong nó.

  Trong ví dụ sau đây, có hai file được tạo ra. File thứ nhất - “test.htm” là một file tài liệu HTML. File thứ hai - “test.js” là file văn bản có chứa mã JavaScript. File này được liên kết với file tài liệu HTML.

  File HTML: (test.htm)

  <HTML>
      <HEAD>
          <script src = "test.js"> </script>
      </head>
      <body>
           <P>Enjoy the learning experience!!!
      </body> 
  </html>
      

  File nguồn JavaScript: (test.js)

  document.write("Hi! How are you?")

  Kết quả:

  Dùng JavaScript – File ngoài

  Lưu các file test.htm và test.js trong cùng một thư mục.

  Đây là một ví dụ đơn giản mô tả tính năng liên kết các file riêng chứa mã lệnh JavaScript. Tuy nhiên, việc thực hiện chức năng liên kết các file sẽ rất có lợi khi ta muốn chia sẻ các hàm cho nhiều tài liệu HTML. Trong trường hợp này, chúng ta có thể tạo ra một file .js với các hàm thông thường. File này được liên kết với các tài liệu cần nó. Nếu ta muốn điều chỉnh hoặc thêm vào một vài hàm, ta chỉ cần thực hiện thay đổi trong một file mà thôi thay vì phải trong nhiều tài liệu HTML.

  Đuôi .js phải được server ánh xạ đến kiểu MINE là application/x-javascript. Server lúc ấy sẽ gởi nó trong phần đầu (header) của giao thức HTTP.

  Để ánh xạ đuôi .js với kiểu MIME ta thêm dòng code sau vào file chứa các kiểu MIME trong thư mục config của server. Sau đó ta sẽ khởi động lại server.

  type=application/x-javascript exts=js

  Nếu server không ánh xạ đuôi .js đến application/x-javascript MIME thì trình duyệt sẽ không tải đúng file JavaScript được xác định trong thuộc tính SRC.

• Đặt các biểu thức JavaScript là giá trị cho các thuộc tính của thẻ HTML

  Chúng ta có thể dùng biểu thức JavaScript làm giá trị cho thuộc tính của thẻ HTML. Các giá trị đó được thực hiện một cách động mỗi khi trang được trình duyệt tải vào. Cú pháp như sau:

• & {expression};

Trong đó expression là biểu thức JavaScript sẽ được thực hiện.

Chẳng hạn ta có thể định nghĩa một biến chứa độ rộng. Chúng ta có thể dùng biến này để xác định độ rộng của một đường kẻ ngang trên trang Web. Trong ví dụ sau đây, giá trị độ rộng được đặt là 10:

<HTML>
    <HEAD>
         <SCRIPT>
               var lineawidth = 10;
         </SCRIPT>
    <BODY>
          <H2>Using entities</H2>
          <HR awidth="&{lineawidth};%" align = "left">
    </BODY>
 </HTML>
    

Khi mã được thực thi, thì phần tử HR sẽ dùng giá trị cuả biến lineawidth như minh họa trong hình dưới đây

Dùng các biểu thức JavaScript

Một biểu thức JavaScript chỉ có thể được sử dụng bên phía phải của phần tên/giá trị (name/value pair) trong thẻ HTML. Chẳng hạn khi chúng ta dùng

HR WIDTH="&{lineawidth};%"

<HR WIDTH= "10%">

Nếu chúng ta sử dụng

<H4>&{myTitle};</H4>,

• Dùng JavaScript trong trình xử lý sự kiện

  Chúng ta có thể tạo một trình xử lý sự kiện cho một thẻ HTML dùng mã JavaScript. Một sự kiện là một hành động được hỗ trợ bởi một đối tượng. Một trình xử lý sự kiện là đoạn mã sẽ đuợc thực thi nhằm đáp trả một sư kiện. Cú pháp là:

• <TAG event handler="JavaScript code">

TAG là một thẻ HTML. Event handler là tên của trình xử lý sự kiện, và JavaScript code là một loạt các câu lệnh JavaScript được thực thi khi sự kiện được kích hoạt.

Trong ví dụ sau đây, sự kiện onClick đựơc kích hoạt khi người dùng nhấp chuột vào phần tử BUTTON. Trình xử lý sự kiện được gọi để đáp trả sự kiện đó. Trình xử lý sự kiện có chứa mã JavaScript được thực thi bởi trình duyệt.

<HTML>
    <SCRIPT LANGUAGE = "JavaScript">
    function greeting () {
        alert ("Hi There !!");
    }
    </SCRIPT>
    <BODY>
          <FORM>
               <INPUT TYPE="button" VALUE="Greeting" 
               onClick="greeting()">
           </FORM>
    </BODY>
</HTML>
    

Kết quả:

Dùng JavaScript - Alert

Ví dụ đơn giản sử dụng các hộp thông báo và phương thức write

Trong ví dụ minh họa dưới đây, hướng dẫn cách sử dụng các phương thức confirm, alert và write.

<HTML>
    <HEAD> 
          <SCRIPT LANGUAGE = "Javascript">
             confirm ("Are you Sure?");
             alert("OK");
             document.write(" Thank You !");
          </SCRIPT>
    </HEAD>
</HTML>