Thực hành phần nền tảng cơ bản và cú pháp trong JavaScript

Science and Technology

Tóm tắt nền tảng cơ bản và cú pháp trong JavaScript

JavaScript là một ngôn ngữ kịch bản có thể dùng để tạo các script ở phía client và các script ở phía server.
Mục tiêu của JavaScript là cung cấp người phát triển trang Web những khả năng và các điều khiển chức năng của trang Web.
JavaScript có thể làm nâng cao hơn tính động và tính tương tác của web site với những hiệu ứng đặc biệt.
JavaScript có thể sử dụng để cung cấp các Sự tương tác người dùng, thay đổi nội dung động, xác nhận tính hợp lệ của dữ liệu…
Tương tự như các ngôn ngữ khác, JavaScript cũng tuân theo các quy tắc ngữ pháp cơ bản như phân biệt chữ hoa, chữ thường, sử dụng các cặp dấu mở đóng, sử dụng các ký tự điều khiển và sử dụng các dòng chú thích.
Các công cụ sinh mã JavaScript và môn trường IDE giúp tạo ra các đoạn mã JavaScript nhanh hơn.
Các câu lệnh JavaScript có thể được chèn trong tài liệu HTML với nhiều cách khác nhau như sử dụng thẻ SCRIPT, liên kết với file nguồn JavaScript ở bên ngoài…
Một biến là một tham chiếu đến một vị trí trong bộ nhớ.
Các biến có một phạm vi được xác định tại vị trí sử dụng trong script.
Các kiểu dữ liệu khác nhau được JavaScript cung cấp là Numbers, Logical hoặc Boolean, Strings và Null.
Một nguyên dạng(literal) có thể là Integer, Floating-point, String, Boolean và null.
JavaScript dùng cả toán tử một ngôi và toán tử hai ngôi.
Các toán tử khác nhau được JavaScript hỗ trợ là: Toán tử số học, toán tử so sánh, toán tử logic, Toán tử chuỗi, toán tử lượng giá.
Độ ưu tiên của toán tử xác định thứ tự mà toán tử thực hiện.

Một biểu thức là một tập hợp lệ các nguyên dạng, các biến, và các toán tử và trả về một giá trị đơn.
Mảng được dùng để lưu trữ một tập hợp các biến có cùng tên..

JavaScript hỗ trợ mảng nhiều chiều.

Câu lệnh điều kiện dùng để kiểm tra một điều kiện. Các câu lệnh điều kiện khác nhau là: if ..else và switch.

Các cấu trúc để điều khiển lặp trong một chương trình gọi là vòng lặp như các vòng lặp for, Do… while, while, và các câu lệnh break & continue, for.. in và with.

JavaScript có các hàm được định nghĩa sẵn để sử dụng trong script.

Mục tiêu bài học

Kết thúc chương này, bạn có thể:

Hiểu những cú pháp cơ bản của JavaScript
Kiểu dữ liệu
Các phép toán
Biểu thức
Mảng
Các câu lệnh điều kiện
Các cấu trúc lặp
Các hàm

Các bước trong chương này được trình bày rất chi tiết, đầy đủ và rõ ràng. Bạn sẽ hiểu rõ hơn những nội dung trong bài lý thuyết và cách sử dụng công cụ. Hãy thực hiện theo các bước dưới đây một cách cẩn thận.

Thực hiện trong 1h30’ đầu

Trong phần thực hành này, chúng ta sẽ viết vài chương trình JavaScript đơn giản.

Hiểu được những cú pháp cơ bản của JavaScript

Mở notepad hay một trình soạn thảo khác

Nhập vào đoạn mã sau:


<HTML>
    <HEAD>
            <TITLE> First JavaScript Program </TITLE>
    </HEAD>
    <BODY BGCOLOR="#00FF00">
             <SCRIPT LANGUAGE="JAVASCRIPT">
                        document.writeln(" Hello World !!");
                        document.writeln(" This is My First JavaScript Program ");
             </SCRIPT>
    </BODY>
 </HTML>

Ví dụ 2: Độ tuổi chịu trách nhiệm hình sự

Chương trình này yêu cầu bạn nhập vào tên và tuổi, nếu tuổi nhỏ hơn 18 thì xuất ra màn hình câu “You are not eligible” ngược lại xuất ra câu“You are eligible”. Trong chương trình này, chúng ta sẽ dùng các biến, các phát biểu điều kiện và các hàm.

Mở notepad hay một trình soạn thảo khác

Nhập vào đoạn mã sau:


<html>
    <script language="JavaScript">
    function check() 
    {
    if (myform.age.value < 18) 
    {
        document.writeln("<P><H4><I> You are not eligible</I></H4></P>"+myform.name.value);
    }
    else 
    {
          document.writeln("<H4><I>You are  eligible</I></H4>"+myform.name.value);
    }
    }
    
    function losefocus() 
    {
    if (myform.name.value == "") 
    {
    alert("You can not leave the name field blank"); 
    myform.name.focus();
    return false; }
    }
    </script><body><form name="myform"  onChange="losefocus()">
    <P><h5><i>Enter name:<i><h5>
    <input name="name" type="text" size="35" onBlur="losefocus()"></P>
    <h5><i>Enter age:<i><h5>
    <input name="age" type="text" size="5"></P>
    <input type="button" value="Check" onClick="check()">
    <input type="reset" value="Clear">
    </form>
    </body>
<html>

Kết quả của ví dụ 2 (sau khi nhấn vào nút Check)

Mảng

Trong ví dụ sau, chúng ta sẽ tạo một mảng tên các website. Khi một người dùng yêu cầu mở một website, website đó sẽ được mở trên một cửa sổ mới.

Mở notepad hay một trình soạn thảo khác

Nhập vào đoạn mã sau:


<HTML>
    <HEAD>
              <TITLE> New Document </TITLE>
    </HEAD>
    
    <BODY BGCOLOR="#FFFFFF">
               <script>
                     var url_names = new  Array("yahoo.com","hotmail.com","google.com"); 
                     var a_url; 
    
                      for (var loop = 0; loop <url_names.length; loop++)
                      {
    
                          // make the name of a url, for example http://www.hits.org/
                           a_url = "http://www." + url_names[loop] + "/";
    
                          // open a window
                            var  new_window=open(a_url,"new_window","width=300,height=300");
    
                        // wait for the click
                         alert("hit ok for the next site");
    
                          }
                  </script>
    </BODY>
</HTML>

Thực hiện trong 1h30’ tiếp theo

Tạo một trang đăng nhập như hình dưới đây và viết chương trình kiểm tra tính hợp lệ của username và password:
- Nếu username và password hợp lệ thì hiển thị thông báo “ Welcome to world of JavaScript”.
- Nếu username và password không hợp lệ thì hiển thị thông báo “ Invalid Username or password”.

Gợi ý:

Tạo các text field (trường văn bản), button (nút lệnh) và các label (nhãn) dùng trong thẻ Form
Viết một hàm JavaScript để kiểm tra tính hợp lệ của username và password
Sự kiện nhấn vào button (nút) để gọi hàm kiểm tra
Hiển thị các hộp cảnh báo tương ứng