25/05/2018, 07:31

Thực hành sử dụng các đối tượng của trình duyệt trong JavaScript

Kết thúc chương này, bạn có thể: Làm việc với các sự kiện thường dùng Sử dụng các đối tượng của trình duyệt Attributes (các thuộc tính) Methods (các phương thức) Các bước trong chương này ...

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

Làm việc với các sự kiện thường dùng
Sử dụng các đối tượng của trình duyệt

Attributes (các thuộc tính)
Methods (các phương thức)

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.

Trong phần này, chúng ta sẽ thực thi một số đoạn mã JavaScript để hiểu rõ hơn về một số khái niệm.

Mở notepad hoặc một trình soạn thảo văn bản khác

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

<html>
    <body>
             <script language="JavaScript">
                    document.write("<B> Your Window information is as      follows:</B>");
                     document.write("<BR>");
                    document.write(window.history);
                    document.write("<BR>");
                    document.write(window.location);
                   document.write("<BR>");
                   document.write(window.navigator);
          </script>
    </body>
 </html>

Kết quả của Ví dụ 1

Mở notepad hoặc một trình soạn thảo văn bản khác

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

<html>
    <body>
           <script language="JavaScript">
                document.write("<B> Your Window information is as follows:</B>");
                document.write("<BR>");
                document.write(window.history);
                document.write("<BR>");
                document.write(window.location);
                document.write("<BR>");
                document.write(window.navigator);
           </script>
    </body>
</html<

Kết quả của ví dụ 2

Mở notepad hoặc một trình soạn thảo văn bản khác

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

<HTML>
    <HEAD>
             <TITLE> Using Document Object </Title>
    </HEAD>
    <BODY BGCOLOR="lavender">
              <script language="JavaScript">
                function call()
                {
                   fm.text1.value=document.title;
                }
              </script>
              <FORM name="fm">
                   <INPUT type = text name = text1 size=30>
                    <INPUT type= button name= "btn1" value="Click to identify the title of a document" onClick="call()">
              </FORM>
    </BODY>
</HTML>

Kết quả của ví dụ 3

Mở notepad hoặc một trình soạn thảo văn bản khác

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

<HTML>
    <HEAD>
             <TITLE> Using Document Object </Title>
    </HEAD>
    <BODY BGCOLOR="lavender">
              <H3> Please Enter complete URL: For example http://www.yahoo.com </H3>
              <script language="JavaScript">
                  function call()
                  {
                     location.replace(fm.text1.value);
                  }
              </script>
              <FORM name="fm">
                   <INPUT type = text name = text1 size=30>
                   <INPUT type= button name= "btn1" value="Click to load your favorite web site" onClick="call()">
              </FORM>
    </BODY>
</HTML>

Kết quả của Ví dụ 4

Mở notepad hoặc một trình soạn thảo văn bản khác

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

<HTML>
    <HEAD>
            <TITLE> Using History Object </Title>
    </HEAD>
    <BODY BGCOLOR="lavender">
            <script language="JavaScript">
    
                 function callp()
                 {
                      history.back();
                  }
    
             </script>
             <FORM name="fm">
                  <INPUT type = text name = text1 size=30>
                  <BR><BR>
                  <INPUT type= button name= "btn2" value="Click to load previous page" 
    
                  onClick="callp()"><BR><BR>
    
              </FORM>
    </BODY>
</HTML>

Kết quả của Ví dụ 5

Viết một chương trình bằng JavaScirpt minh họa việc sử dụng các thuộc tính màu chữ, màu nền của đối tượng Document, như hình dưới đây
Gợi ý:
- Tạo một form sắp xếp như hình sau
- Viết 2 hàm bằng JavaScript
- Gọi những hàm đó khi sự kiện onClick của nút lệnh xảy ra
- Sử dụng các thuộc tính document.text and document.bgColor
:

Viết một chương trình bằng JavaScript minh họa việc sử dụng các thuộc tính URL và location của đối tượng document, như hình dưới đây
Gợi ý:
- Tạo một form sắp xếp như hình sau
- Viết 2 hàm bằng JavaScript
- Gọi những hàm dó khi sự kiện onClick của các nút lệnh xảy ra
- Sử dụng thuộc tính document.URL và document.location
: