// đưa ra thông báo khi không tìm thấy phần tử viettel alert('viettel không tồn tại nhé'); } } // cài đặt sự kiện khi trang web tải xong document.body.onload = function() { viewSource("viet-tel"); // gọi hàm viewSource; };
Kết quả : example.html
Ví dụ đơn giản trên trạm tới hầu hết các vấn đề hay gặp khi làm việc cùng Javascript: khai báo biến, viết hàm, gọi hàm, xử lý chuỗi, vòng lặp, rẽ nhánh, cài đặt sự kiện, truy xuất và chỉnh sửa phần tử trong trang web...

Cần những gì để bắt đầu?

Trình duyệt để xem kết quả:

Một chương trình soạn thảo, chọn trong danh sách sau:

Sách tham khảo:

Website hướng dẫn:

Chương trình đầu tiên?

Cài đặt trình duyệt và trình soạn thảo ở trên.

  1. Tải ví dụ trên : example.zip về máy tính.
  2. Giải nén ra sẽ được file: example.html.
  3. Click trực tiếp vào nó để tự mở ra cùng với trình duyệt mặc định.
  4. Xác nhận trình duyệt được mở và trang web có nhiều dòng chữ màu xanh như thế này có nghĩa chương trình đã chạy thành công!

Chương trình "Hello World"?

  1. Mở trình soạn thảo.
  2. Tạo một 1 file mới.
  3. Nhập vào đoạn mã sau:
    
        <!DOCTYPE html>
        <html>
        <head>
            <script type="text/javascript">
                alert('Hello world');
            </script>
        </head>
        <body>
        </body>
        </html>
    
    
  4. Lưu file thành hello-world.html theo mã unicode
  5. Mở file hello-world.html trong trình duyệt, xác nhận có 1 khung hình chữ nhật có chữ "Hello world" và một nút có chữ "OK" hiện ra là chương trình chạy được !
Kết quả : hello-world.html

Cấu trúc điều khiển rẽ nhánh

  • Cấu trúc switch:

        switch ( giá trị ) {
    
            case giá trị 1 :
                thực thi khối lệnh 1
                beak;
            case giá trị 2 :
                thực thi khối lệnh 2
                beak;
            default:
                thực thi khối lệnh khác khi các trường hợp trên không xảy ra
        }
    
    ví dụ:
    
        <!DOCTYPE html>
        <html>
        <head>
            <title>javascript - cơ bản</title>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
        </head>
        <body>
            <script type="text/javascript">
                // hiện thông báo ngày trong tuần
                switch (new Date().getDay()) {
                	case 1:
                		alert("Hôm nay là thứ hai");
                		break;
                	case 2:
                		alert("Hôm nay là thứ ba");
                		break;
                	case 3:
                		alert("Hôm nay là thứ tư");
                		break;
                	case 4:
                		alert("Hôm nay là thứ năm");
                		break;
                	case 5:
                		alert("Hôm nay là thứ sáu");
                		break;
                	case 6: 
                		alert("Hôm nay là thứ bẩy");
                		break;
                	default:
                		alert("Hôm nay là chủ nhật");
                }
            </script>
        </body>
        </html>
    
    
  • Cấu trúc if:

        if (điều kiện đúng) {
            
            thực thi khối lệnh
            
        }
    
    ví dụ:
    
        <!DOCTYPE html>
        <html>
        <head>
            <title>javascript - cơ bản</title>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
        </head>
        <body>
            <script type="text/javascript">
                // kiểm tra sự sẵn sàng của trang web
                if (document.body) {
                	// xem chiều rộng của trang web
                	alert("Trang web rộng:" + document.body.offsetWidth + "px");
                }
            </script>
        </body>
        </html>
    
    
  • Cấu trúc if cùng else:

        if (điều kiện đúng) {
            
            thực thi khối lệnh
            
        } else { 
    
            thực thi khối lệnh khác
        }
    
    ví dụ:
    
        <!DOCTYPE html>
        <html>
        <head>
            <title>javascript - cơ bản</title>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
        </head>
        <body>
            <script type="text/javascript">
                var ngauNhien = Math.round(10 * Math.random());
    
                // kiểm tra chẵn lẻ
                if (ngauNhien % 2) {
                	alert(ngauNhien + " là số lẻ");
                } else {
                	alert(ngauNhien + " là số chẵn");
                }
            </script>
        </body>
        </html>
    
    
  • Cấu trúc if cùng else if và else:

        if (điều kiện đúng) {
            
            thực thi khối lệnh
            
        } else if (điều kiện khác đúng) { 
    
            thực thi khối lệnh
    
        } else {
    
            thực thi khối lệnh mặc định
    
        }
    
    ví dụ:
    
        <!DOCTYPE html>
        <html>
        <head>
            <title>javascript - cơ bản</title>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
        </head>
        <body>
            <script type="text/javascript">
                // lấy ngày trong tuần
                var day = new Date().getDay();
    
                if (day == 6) {
                	alert("Cuối tuần đi chơi");
                } else if (day == 0) {
                	alert("Chủ nhật đi lễ");
                } else {
                	alert("Ngày thứ đi học");
                }
            </script>
        </body>
        </html>
    
    

Cấu trúc vòng lặp

Viết hàm và gọi hàm

  • Hàm có đầy đủ tên và tham số:

        function tên của hàm (tham số 1, tham số 2 ..) {
               
               khối lệnh
    
        }
    
  • Hàm có tên thiếu tham số:

        function tên của hàm () {
               
               khối lệnh
    
        }
    
  • Hàm thiếu cả tên và tham số:

        function () {
               
               khối lệnh
    
        }
    
  • Hàm thiếu tên nhưng có tham số:

        function ( tham số 1, tham số 2 ..) {
               
               khối lệnh
    
        }
    

Nếu hàm số được đặt tên, thì tên được đặt theo qui tắc đặt tên biến.

ví dụ về viết hàm:

    <!DOCTYPE html>
    <html>
    <head>
        <title>javascript - cơ bản</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </head>
    <body>
        <script type="text/javascript">

            // hàm mẫu chỉ có tính chất minh họa!
            function ham1() {

            }

            // hàm cộng hai số
            // nhận 2 tham số là a và b
            // trả lại kết quả là tổng 2 giá trị a và b
            function cong2So(a, b) {
                return a + b;
            }

            // có thể không cần tên khi khai báo hàm
            var bien = function() {
                // thay đổi tiêu đề trang web theo ngày tháng hiện tại
                document.title = new Date();
            };
        </script>
    </body>
    </html>

Để gọi một hàm chỉ việc viết tên hàm cùng tham số truyền vào nếu có.

ví dụ về gọi hàm:

    <!DOCTYPE html>
    <html>
    <head>
        <title>javascript - cơ bản</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </head>
    <body>
        <script type="text/javascript">

            // hàm mẫu trưng bày.
            function ham1() {}
            
            function cong2So(a, b) {
                alert(a + b);
            }

            // gọi hàm mẫu
            ham1();  // gọi ra thế thôi chứ nó chẳng làm được cả.

            // hiển thị ô thông báo cùng tiêu đề trang web
            alert(document.title); // alert là hàm có sẵn trong trình duyệt
             
            // thực hiện phép cộng 2 số
            cong2So(2 , 3); // hiện thị ra ô thông báo cùng giá trị là số 5
            
            // truy cập tới một đối tượng trong DOM 
            // bằng cách gọi hàm getElementById của đối tượng document
            var vnjs = document.getElementById("header"); // trường hợp này hàm thường được bảo là phương thức


            window.location.reload(); // gọi hàm reload, bắt trình duyệt tải lại trang web
        </script>
    </body>
    </html>

Ngoài ra còn có cú pháp ít phổ biến hơn khi viết hàm:

    new Function( [tham số 1] [, tham số 2] [..., tham số n] , "khối lệnh thân hàm" );
ví dụ về sử dụng new Function:

    <!DOCTYPE html>
    <html>
    <head>
        <title>javascript - cơ bản</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </head>
    <body>
        <script type="text/javascript">
            // khởi tạo hàm cộng
            var cong2So = new Function("a", "b", "alert(a + b)");

            // gọi hàm
            cong2So(2 , 3);
        </script>
    </body>
    </html>

Phạm vi của biến

  • Biến khai báo bên trong 1 hàm gọi là biến cục bộ (địa phương)

    Biến này chỉ được tham chiếu ở trong phạm vi hàm mà nó đã khai báo. Không thể gọi từ trong hàm khác hoặc bên ngoài chương trình.

  • Biến khai báo không nằm trong bất kỳ hàm nào gọi là biến toàn cục

    Biến này được tham chiếu ở mọi nơi trong chương trình kể cả trong các hàm khác. Miễn là lúc tham chiếu đến biến này nó đã được khai báo.

"use strict"; là câu lệnh gì?

'use strict'; được viết để cho trình duyệt xem xét mã javascript một cách nghiêm ngặt (strict mode).

nó có phạm vi hoạt động giống như là ph Rình rập mãi, trong một lần vô tình eval ngủ quên alert đã tiến hành đoạt xá. */ eval = alert; // và thành công. eval("Hello world, I'm alert"); /* giờ đây linh hồn eval hiện tại không còn nữa, thay vào đó là chức năng của alert một kết cục bi thảm dành cho eval. */ })();

chuyện đáng tiếc trên sẽ không xảy ra nếu như sử dụng "use strict":

     <!DOCTYPE html>
    <html>
    <head>
        <title>javascript - cơ bản</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </head>
    <body>
        <script type="text/javascript">
            
            (function storyRewrite () {
                
                "use strict";
                
                // đoạt xá;
                eval = alert; // nhưng gây lỗi luôn !
                
                eval("Hello worl (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
              })();
              
        </script>
    </body>
</html>