CodeGym /Khóa học Java /Mô-đun 3 /Tương tác của mã JavaScript với trình duyệt

Tương tác của mã JavaScript với trình duyệt

Mô-đun 3
Mức độ , Bài học
Có sẵn

4.1 Đối tượng trình duyệt

Như bạn đã biết, ngôn ngữ JavaScript hoạt động bên trong trình duyệt, do đó, bằng cách nào đó, nó cần phải tương tác với cùng trình duyệt này. Để làm điều này, trình duyệt có một số đối tượng và chức năng có sẵn từ JavaScript.

Đầu tiên là an object window, mô tả cửa sổ trình duyệt. Hay đúng hơn, tôi đã từng mô tả khi trình duyệt không có tab. Bây giờ, đối tượng cửa sổ mô tả tab trình duyệt hiện tại trong đó trang có tập lệnh được tải.

Thứ hai, đây là an object documenttài liệu chịu trách nhiệm về tài liệu được hiển thị trong tab. Điều này có thể hơi khó hiểu. Để đơn giản, giả sử tài liệu đó là nội dung được hiển thị cho người dùng và cửa sổ là nội dung tài liệu này được hiển thị.

Thứ ba, đây là an object consolecái chịu trách nhiệm xuất ra bảng điều khiển trình duyệt. Có, các trình duyệt cũng có bảng điều khiển, nó chủ yếu được sử dụng để gỡ lỗi tập lệnh và hiển thị thông báo lỗi. Bạn thường có thể mở nó bằng cách nhấn nút F12 trong trình duyệt của mình.

Object window, là đối tượng cấp cao nhất cho tất cả các đối tượng trang. Và mặc dù bạn có thể viết trực tiếp tên đối tượng documenttrong consoletập lệnh của mình, trên thực tế, tên window.documentvà tệp window.console.

4.2 Hộp thoại trong JavaScript

phương thức cảnh báo ()

Nó cũng an object windowcó một số chức năng hiển thị với tập lệnh trang. Được sử dụng phổ biến nhất là alert(). Nó cho phép bạn hiển thị một hộp thoại có thông báo cho người dùng. Tập lệnh sau đó bị treo cho đến khi người dùng nhấp vào OK.

Ví dụ:

alert("JavaScript is the best!");

phương thức dấu nhắc()

Ngoài ra còn có một chức năng mà bạn có thể yêu cầu người dùng nhập một số giá trị - đây là prompt().

Ví dụ:

var age = prompt("Enter Year of Birth");

phương thức xác nhận ()

Bạn có thể hiển thị hộp thoại có hai nút Ok- Cancelhỏi người dùng về một số hành động.

Ví dụ:

var isOK = confirm("Are you ready");

Sự kiện onload() 4.3

Và một khoảnh khắc hữu ích và thú vị nữa. Cửa sổ trình duyệt có sự kiện kích hoạt khi tài liệu được tải đầy đủ. Bạn có thể chỉ định mã sẽ được thực thi sau khi tài liệu được tải và hiển thị.

Điều này có thể được thực hiện theo ba cách.

Đầu tiên, bạn có thể nhúng mã JavaScript trực tiếp vào trang HTML dưới dạng giá trị thuộc tính:

<body onload="alert('document loaded');">
  <img src="big-image.png">
</body>

Thứ hai, bạn có thể nhúng mã JavaScript một cách đơn giản vào trang HTML:

<head>
    <script>
        function load()
        {
            alert('document loaded');
        }
        window.onload = load;
    </script>
</head>
<body>
    <img src="big-image.png">
</body>

Thứ ba, chúng ta có thể viết nó ngắn hơn một chút bằng cách khai báo một hàm ẩn danh:

<head>
    <script>
        window.onload = function () {
            alert('document loaded');
        }
    </script>
</head>
<body>
    <img src="big-image.png">
</body>

4.4 sự kiện onclick()

Và cuối cùng, một sự kiện (event) quan trọng khác là event OnClick. Xảy ra trên bất kỳ phần tử nào mà người dùng đã nhấp vào. Giống như event OnLoadnó có thể được thiết lập theo nhiều cách khác nhau, vì vậy chúng tôi sẽ chỉ đưa ra cách đơn giản nhất:

<body>
  <img src="big-image.png" onclick="alert('user clicked on the image');">
</body>

Bình luận
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION