JAVASCRIPT: CH11

Chương 11: Các đối tượng và hàm thường dùng trong JavaScript

11.1. addEventListener() và removeEventListener() trong javascript

- Hàm addEventListeners()
Hàm addEventListener() có tác dụng thêm sự kiện cho đối tượng HTML, sử dụng với cú pháp.
element.addEventListener('eventName',functionName);
Trong đó:
  • element là các đối tượng HTML (được gọi bằng các phương thức getElement...).
  • eventName là tên các sự kiện (bỏ chữ 'on') như click,mouseover,...
  • functionName là tên hàm mà các bạn muốn gọi khi xảy ra sự kiện.
Hoặc bạn có thể sử dụng hàm ẩn danh với cú pháp:
element.addEventListener('eventName',function(){
    //code
});
VD: Thêm sự kiện click.
<!DOCTYPE html>
<html>
 
<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>tailieucntt.org</title>
        <link rel="stylesheet" href="">
</head>
 
<body>
        <div>Click vào chữ '<em>click</em>' để xem kết quả</div>
        <p id="container"> Click</p>
        <script type="text/javascript">
               var element = document.getElementById('container');
               element.addEventListener('click', function() {
                       alert('Bạn vừa click');
               })
        </script>
</body>
 
</html>

VD: Thêm sự kiện cho đối tượng window.
<!DOCTYPE html>
<html>
 
<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>tailieucntt.org</title>
        <link rel="stylesheet" href="">
</head>
 
<body>
        <div>Kéo dãn của sổ trình duyệt để xem kết quả</div>
        <p id="container"> Click</p>
        <script type="text/javascript">
               window.addEventListener('resize', getResize);
        function getResize()
        {
               alert('Bạn vừa thay đổi kích cỡ màn hình');
        }
        </script>
</body>
 
</html>

- Hàm removeEventListener()
Trái lại với hàm addEventListener() thì hàm removeEventListener() lại có tác dụng là xóa bỏ đi các sự kiện đang được áp lên sự kiện, sử dụng với cú pháp:
element.removeEventListener('eventName', functionName, option);
Trong đó:
  • element là các đối tượng HTML (được gọi bằng các phương thức getElement...).
  • eventName là tên các sự kiện (bỏ chữ 'on') như click,mouseover,...
  • functionName là tên hàm mà bạn muốn xóa bỏ hành động.
  • option là các giá trị true|false (có thể bỏ trống).
VD: xóa bỏ sự kiện click.
<!DOCTYPE html>
<html>
 
<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>tailieucntt.org</title>
        <link rel="stylesheet" href="">
</head>
 
<body>
        <div>Click vào chữ '<em>click</em>' để xem kết quả</div>
        <p id="container">Click</p>
        <script type="text/javascript">
               var element = document.getElementById('container');
               element.addEventListener('click', getClick );
               function getClick()
               {
                       alert('Bạn vừa click');
               }
               element.removeEventListener('click', getClick);
        </script>
</body>
 
</html>
 



11.2. Các thuộc tính thường dùng trong DOM Document





- Thuộc tính activeElement



Thuộc tính này có tác dụng trả về đối tượng HTML đang focus.

VD:


<!DOCTYPE html>


<html>


 


<head>


        <meta charset="utf-8">


        <meta http-equiv="X-UA-Compatible" content="IE=edge">


        <title>tailieucntt.org</title>


        <link rel="stylesheet" href="">


</head>


 


<body onclick="getActive()">


        <div>Click vào <b>button</b> hoặc <b>input</b> để xem kết quả</div>


        <input type="text" value="Tailieucntt.org">


        <br/>


        <button>button</button>


        <p id='result'></p>


        <script type="text/javascript">


               function getActive()


               {


            //lấy ra thẻ đang được focus


                       var name = document.activeElement.tagName;


            // hiển thị


                       document.getElementById('result').innerText = name;


               }


        </script>


</body>


 


</html>





- Thuộc tính anchors

Thuộc tính này trả về một mảng đối tượng các thẻ a trong trang (không chứa href).

VD:


<!DOCTYPE html>


<html>


 


<head>


        <meta charset="utf-8">


        <meta http-equiv="X-UA-Compatible" content="IE=edge">


        <title>tailieucntt.org</title>


        <link rel="stylesheet" href="">


</head>


 


<body>


        <p>click vào <em>get</em> để xem kết quả</p>


        <a name="toidicode">Toidicode</a><br>


        <a name="facebook">facebook</a><br>


        <button onclick="getA()" >GET</button>


        <p id='result'></p>


        <script type="text/javascript">


               function getA()


               {


                       //


                       var length = document.anchors.length;


                       document.getElementById('result').innerText = length;


               }


        </script>


</body>


 


</html>





- Thuộc tính Links

-Trả về một mảng các đối tượng chứa các thẻ a, area có thuộc tính href trong trang.

VD:


<!DOCTYPE html>


<html>


<body>


 


<img src ="http://tailieucntt.org/upload/images/logo.png" width="145" height="126" alt="toidicode" usemap ="#planetmap">


 


<map name="planetmap">


  <area shape="rect" coords="0,0,82,126" href="http://tailieucntt.org" alt="toidicode">


  <area shape="circle" coords="90,58,3" href="http://tailieucntt.org" alt="toidicode">


  <area shape="circle" coords="124,58,8" href="http://tailieucntt.org" alt="toidicode">


</map>


 


<p>


  <a href="http://tailieucntt.org/tu-hoc-html-7">HTML</a><br>


  <a href="http://tailieucntt.org/tu-hoc-css-8">CSS</a>


</p>


 


<p>Click vào GET để xem kết quả</p>


 


<button onclick="myFunction()">GET</button>


 


<p id="demo"></p>


 


<script>


function myFunction() {


    var x = document.links.length;


    document.getElementById("demo").innerHTML = x;


}


</script>


 


</body>


</html> 





- Thuộc tính URL

-Trả về đường dẫn của trang hiện tại.

VD:


<!DOCTYPE html>


<html>


 


<head>


        <meta charset="utf-8">


        <meta http-equiv="X-UA-Compatible" content="IE=edge">


        <title>tailieucntt.org</title>


        <link rel="stylesheet" href="">


</head>


 


<body>


        <p>click vào <em>GET</em> để xem kết quả</p>


        <button onclick="getA()" >GET</button>


        <p id='result'></p>


        <script type="text/javascript">


               function getA()


               {


                       var length = document.URL;


                       document.getElementById('result').innerText = length;


               }


        </script>


</body>


 


</html>



 



- Thuộc tính title

-Trả về tiêu đều của trang hiện tại.

VD:


<!DOCTYPE html>


<html>


 


<head>


        <meta charset="utf-8">


        <meta http-equiv="X-UA-Compatible" content="IE=edge">


        <title>tailieucntt.org</title>


        <link rel="stylesheet" href="">


</head>


 


<body>


        <p>click vào <em>GET</em> để xem kết quả</p>


        <button onclick="getA()" >GET</button>


        <p id='result'></p>


        <script type="text/javascript">


               function getA()


               {


                       var title = document.title;


                       document.getElementById('result').innerText = title;


               }


        </script>


</body>


 


</html>



 



- Thuộc tính scripts

Trả về một mảng đối tượng chứa các thẻ script trong trang.

VD:


<!DOCTYPE html>


<html>


 


<head>


        <meta charset="utf-8">


        <meta http-equiv="X-UA-Compatible" content="IE=edge">


        <title>tailieucntt.org</title>


        <link rel="stylesheet" href="">


</head>


 


<body>


        <p>click vào <em>GET</em> để xem kết quả</p>


        <button onclick="getA()" >GET</button>


        <p id='result'></p>


        <script type="text/javascript">


               function getA()


               {


                       var sum = document.scripts.length;


                       document.getElementById('result').innerText = 'Có ' + sum + ' thẻ script';


               }


        </script>


</body>


 


</html>



 



- Thuộc tính readyState

Trả về trạng thái của trang. Bao gồm 4 trạng thái sau:


    

  • uninitialized: Trang chưa được tải.
    • 

  • loading: Trang đang được tải.
    • 

  • loaded: Trang đã được tải.
    • 

  • interactive: Trang đã tải xong
     nhưng thứ cần thiết.
    • 

  • complete: Trang đã được tải đầy
     đủ nội dung.
    • 


VD:


<!DOCTYPE html>


<html>


 


<head>


        <meta charset="utf-8">


        <meta http-equiv="X-UA-Compatible" content="IE=edge">


        <title>tailieucntt.org</title>


        <link rel="stylesheet" href="">


</head>


 


<body>


        <p>click vào <em>GET</em> để xem kết quả</p>


        <button onclick="getA()" >GET</button>


        <p id='result'></p>


        <script type="text/javascript">


               function getA()


               {


                       var status = document.readyState;


                       document.getElementById('result').innerText = 'Trạng thái của trang: ' + status;


               }


        </script>


</body>


 


</html>





- Thuộc tính images

- Trả về một mảng đối tượng chứa các thẻ img trong trang.

VD:


<!DOCTYPE html>


<html>


 


<head>


        <meta charset="utf-8">


        <meta http-equiv="X-UA-Compatible" content="IE=edge">


        <title>tailieucntt.org</title>


        <link rel="stylesheet" href="">


</head>


 


<body>


        <p>click vào <em>GET</em> để xem kết quả</p>


        <img src="http://tailieucntt.org/upload/images/logo.png" alt="toidicode">


        <img src="http://tailieucntt.org/upload/images/logo.png" alt="toidicode">


        <img src="http://tailieucntt.org/upload/images/logo.png" alt="toidicode">


        <img src="http://tailieucntt.org/upload/images/logo.png" alt="toidicode">


        <br>


        <button onclick="getA()" >GET</button>


        <p id='result'></p>


        <script type="text/javascript">


               function getA()


               {


                       var length = document.images.length;


                       document.getElementById('result').innerText = 'Số thẻ img : ' + length;


               }


        </script>


</body>


 


</html>



 



11.3. Thực hành xây dựng menu dropdown



 



- Xây dựng giao diện bằng HTML-CSS

Đầu tiên chúng ta sẽ dùng các thẻ ul-li để xây dựng giao diện menu như bình
thường.


<!DOCTYPE html>


<html>


<head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title> Xây dựng dropdown menu -tailieucntt.org</title>


</head>


<body>


    <ul id='menu'>


        <li>Trang Chủ</li>


        <li>Dịch vụ


            <ul>


                <li>Thiết kế</li>


                <li>Lập trình</li>


            </ul>


        </li>


        <li>Sản phẩm


            <ul>


                <li>Tailieucntt.org</li>


            </ul>


        </li>


    </ul>


</body>


</html>





Tiếp theo đó chúng ta sẽ thêm CSS chó nó đẹp một chút.


<!DOCTYPE html>


<html>


<head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title> Xây dựng dropdown menu -tailieucntt.org</title>


</head>


<style type="text/css" media="screen">


    ul#menu{


        list-style: none;


        position: relative;


    }


    ul li{


        display: inline-block;


        background: #e1e1e1;


        padding: 0 15px;


        border: 1px solid black;


    }


    ul li ul{


        position: absolute;


        top: 20px;


        display: none;


    }


    ul li ul li{


        display: block;


        background: #e7e7e7;


        padding: 0 10px;


    }


</style>


<body>


    <ul id='menu'>


        <li>Trang Chủ</li>


        <li>Dịch vụ


            <ul>


                <li>Thiết kế</li>


                <li>Lập trình</li>


            </ul>


        </li>


        <li>Sản phẩm


            <ul>


                <li>Tailieucntt.org</li>


            </ul>


        </li>


    </ul>


</body>


</html>







- Sử dụng javascript để tạo hiệu ứng dropdown

Sau khi đã xây dựng được giao diện rồi thì giờ chúng ta cùng bắt đầu đi vào
viết code javascript để tạo ra các dropdown cho menu.


<!DOCTYPE html>


<html>


<head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title> Xây dựng dropdown menu -tailieucntt.org</title>


</head>


<style type="text/css" media="screen">


    ul#menu{


        list-style: none;


        position: relative;


    }


    ul li{


        display: inline-block;


        background: #e1e1e1;


        padding: 0 15px;


        border: 1px solid black;


    }


    ul li ul{


        position: absolute;


        top: 20px;


        display: none;


    }


    ul li ul li{


        display: block;


        background: #e7e7e7;


        padding: 0 10px;


    }


</style>


<body>


    <ul id='menu'>


        <li>Trang Chủ</li>


        <li>Dịch vụ


            <ul>


                <li>Thiết kế</li>


                <li>Lập trình</li>


            </ul>


        </li>


        <li>Sản phẩm


            <ul>


                <li>Tailieucntt.org</li>


            </ul>


        </li>


    </ul>


    <script type="text/javascript">


        //chọn tất cả các thẻ li (con của thẻ ul có id= menu)


        var li = document.querySelectorAll('ul#menu li');


        //Duyệt tất cả các phần tử li đó


        for(i=0; i < li.length; i++){


            //và áp sự kiện click lên từng thẻ li


            li[i].addEventListener('click',function()


            {


                //chọn tất cả các thẻ ul con của thẻ li


                var ulc = document.querySelectorAll('ul#menu li ul');


                //Tiến hàn duyệt từng thẻ ul đó


                for(j=0; j< ulc.length; j++){


                    //css cho display = none


                    ulc[j].style.display = 'none';


                }


                //chọn thẻ ul con của thẻ li vừa click


                //this ở đây chính là đối tượng li vừa click


                var child = this.getElementsByTagName('ul');


                //nếu như có tồn tại ul con của li vừa click


                if(child.length >=1){


                    //tiến hành css display=block


                    child[0].style.display = 'block';


                }


            });


        }


    </script>


</body>


</html>

























































































































































































11.4. Đối tượng window trong javascript



- BOM trong javascript là gì?

 BOM (Browser Object Model) là
các đối tượng liên quan đến trình duyệt và mỗi một trình duyệt sẽ có những
đối tượng khác nhau nên giữa các BOM với nhau nó sẽ không tồn tại một chuẩn
chung nào cả.

Đối với DOM mà chúng ta đã được học trong các bài trước cũng là một BOM (nằm
trong BOM window). Và đối với các dạng thông báo ra ngoài màn hình cũng thế (nằm
trong BOM popup).



- Đối tượng Window

-Đối tượng window có tác dụng như với tên của nó là tác động đến của sổ
trình duyệt, và đến thời điểm mình viết bài này thì nó đã được suport trên hầu
hết các trình duyệt hiện nay.



Lấy thông số của cử sổ trình duyệt.

Như mình đã nói ở trên là: 'Mỗi một trình duyệt sẽ có một BOM khác nhau',
nên để lấy được thông số chiều rộng chiều cao của cửa sổ trình duyệt thì chúng
ta sẽ phải sử dụng các toán tử logic duyệt qua các thuộc tính lấy chiều
rộng, chiều cao của đối tượng window tương ứng với từng trình duyệt.


//Lấy chiều rộng của trình duyệt


var width = window.innerWidth


|| document.documentElement.clientWidth


|| document.body.clientWidth;


//Lấy chiều cao của trình duyệt


var height = window.innerHeight


|| document.documentElement.clientHeight


|| document.body.clientHeight;





Mở một cửa sổ mới

Để mở một cửa sổ mới trên trình duyệt với đối tượng window thì chúng ta sẽ sử
dụng phương thức open() với
cú pháp như sau:


window.open(url, name, specs, replace);

Trong đó:


    

  • url là địa chỉ mà chúng ta muốn mở.
    • 

  • name là tên bạn muốn đặt cho cửa sổ
    • 

  • specs là các thông số cho cửa sổ như: 
    • 

      

    • Chiều cao của trình
      duyệt: height=pixel
      • 

    • Chiều rộng của trình
      duyệt: width=pixel
      • 

    • Vị trí hiển thị của của
      sổ trình duyệt: top=pixel(cách trên), left=pixel(các trái)
      • 

    • Hiển thị thanh
      menu: yes|1 là có, no|0 là
      không.
      • 

    • Hiển thị thanh trạng
      thái: yes|1 là có, no|0 là
      không.
      • 

    

  • replace (không bắt buộc) là chỉ định xem URL có
     tạo ra mục nhập mới hay thay thế mục hiện tại trong danh sách lịch sử
     không. True là có và false là không.
    • 


VD:


<!DOCTYPE html>


<html>


<head>


        <meta charset="utf-8">


        <title>Tailieucntt.org demo window</title>


</head>


<body>


    <div>Click vào button để xem kết quả</div>


    <button type="button" onclick="openW()">Mở cửa sổ</button>


    <script type="text/javascript">


    function openW() {


        window.open('http://tailieucntt.org', 'toidicode', 'width=500,height=600');


    }


    </script>


</body>


 


</html>





Đóng một của sổ

Để đóng một cửa sổ bằng javascript thì chúng ta cần phải biết được đối tượng
cửa sổ mà ta muốn đóng, đối tượng đó chính là .

Cú Pháp:


wObject.close();

Trong đó: wObject là đối tượng window mà chúng ta cần đóng.

VD:


<!DOCTYPE html>


<html>


 


<head>


        <meta charset="utf-8">


        <title>Tailieucntt.org demo window</title>


</head>


 


<body>


        <div>Click vào button để xem kết quả</div>


        <button type="button" onclick="openW()">Mở cửa sổ</button>


        <button type="button" onclick="closeW()">Đóng cửa sổ</button>


        <script type="text/javascript">


               function openW() {


                       toidicode = window.open('http://tailieucntt.org', 'toidicode', 'width=500,height=600');


               }


 


               function closeW() {


                       toidicode.close();


               }


        </script>


</body>


 


</html>





Di chuyển trình duyệt

Cũng giống như đóng trình duyệt, để di chuyển trình duyệt thì bạn cũng cần
biết được đối tượng trình duyệt cần di chuyển.

Cú pháp:


wObject.moveTo(top,left)

Trong đó: wObject là đối tượng window mà chúng ta cần di
chuyển. Top là khoảng các trên, left khoảng cách trái.

VD:


<!DOCTYPE html>


<html>


 


<head>


        <meta charset="utf-8">


        <title>Tailieucntt.org demo window</title>


</head>


 


<body>


        <div>Click vào button để xem kết quả</div>


        <button type="button" onclick="openW()">Mở cửa sổ</button>


        <button type="button" onclick="moveW()">Di chuyển cửa sổ</button>


        <script type="text/javascript">


               function openW() {


                       toidicode = window.open('', '', 'width=300,height=200');


               }


 


               function moveW() {


                       toidicode.moveTo(200,400);


            toidicode.focus();


               }


        </script>


</body>


 


</html>





Thay đổi kích thức cửa sổ

Để thay đổi kích thước của trình duyệt thì chúng ta cũng cần phải biết được
đối tượng cửa sổ cần thay đổi. Và sử dụng với cú pháp sau:


wObject.resizeTo(width,height);

Trong đó: wObject là đối tượng window mà chúng ta cần thay
đổi kích cỡ. width,height là chiều rộng và chiều cao mới của trình duyệt.

VD:


<!DOCTYPE html>


<html>


 


<head>


        <meta charset="utf-8">


        <title>Tailieucntt.org demo window</title>


</head>


 


<body>


        <div>Click vào button để xem kết quả</div>


        <button type="button" onclick="openW()">Mở cửa sổ</button>


        <button type="button" onclick="resizeW()">Thay đổi kích cỡ</button>


        <script type="text/javascript">


               function openW() {


                       toidicode = window.open('', '', 'width=300,height=200');


               }


 


               function resizeW() {


                       toidicode.resizeTo(500,700);


            toidicode.focus();


               }


        </script>


</body>


 


</html>



 



11.5. Đối tượng location trong javascript



 



- Đối tượng location trong javascript

Đối tượng location là con của đối tượng window và đối tượng location này
chuyên dùng để xử lý, điều hướng url của trang web.

Cú pháp:


window.location;

Trong đối tượng location cũng bao gồm rất nhiều các thuộc tính, phương thức
con khác. Các bạn có thể console.log(window.location) để
xem chi tiết.



- Các thuộc tính trong location

Dưới đây mình sẽ liệt kê ra các thuộc tính và chức năng của nó trong đối tượng
location:


    

  • hash: gán hoặc
     lấy phần sau dấu # của URL.
    • 

  • host: gán hoặc
     lấy hostname và port number của URL.
    • 

  • hostname: gán hoặc
     lấy hostname.
    • 

  • href: gán hoặc lấy URL.
    • 

  • origin: trả về đường dẫn đầy
     đủ của trang hiện tại.
    • 

  • pathname: gán hoặc
     lấy path name của URL.
    • 

  • port: gán hoặc
     lấy port của URL.
    • 

  • search: lấy phần query string của URL.
    • 


VD: hiển thị tất cả các thông tin của trình duyệt.


<!DOCTYPE html>


<html>


 


<head>


        <meta charset="utf-8">


        <title>Tailieucntt.org demo location</title>


</head>


<style type="text/css" media="screen">


        p{


               border:1px solid #dddddd;


               background: #e1e1e1;


               padding: 10px;


        }


</style>


<body>


        <div>Click vào button để xem kết quả</div>


        <button type="button" onclick="getInfo()">Click để hiển thị thông tin trang</button>


        <p id="results"></p>


        <script type="text/javascript">


               function getInfo() {


                       var info = 'hash: ' + window.location.hash + '<br>';


                       info += 'host: ' + window.location.host + '<br>';


                       info += 'hostname: ' + window.location.hostname + '<br>';


                       info += 'href: ' + window.location.href + '<br>';


                       info += 'origin: ' + window.location.origin + '<br>';


                       info += 'pathname: ' + window.location.pathname + '<br>';


                       info += 'port: ' + window.location.port + '<br>';


                       info += 'search: ' + window.location.search + '<br>';


                       document.getElementById('results').innerHTML = info;


               }


        </script>


</body>


 


</html>



VD: Redirect trang web bằng javascript.


<!DOCTYPE html>


<html>


<head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>Tailieucntt.org  demo location</title>


</head>


<body>


    <p>click vào button để xem kết quả</p>


    <button onclick="redirect()" >Di chuyển trang</button>


    <script>


        function redirect(){


            window.location.href = "http://tailieucntt.org";


        }


    </script>


</body>


</html>


 



- Các Phương thức trong location







Phương thức reload()

Phương thức reload() có
tác dụng tải lại trang web, giống như khi bạn ấn F5 trên bàn phím.

Cú pháp:


window.location.reload();

VD: Reload trang web bằng các nhấn vào button.


<!DOCTYPE html>


<html>


<head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>Tailieucntt.org  demo location</title>


</head>


<body>


    <p>click vào button để xem kết quả</p>


    <button onclick="reload()" >Load lại trang</button>


    <script>


        function reload(){


            window.location.reload();


        }


    </script>


</body>


</html>





Phương thức replace()

-Phương thức này cũng có tác dụng redirect url như thuộc tính href, nhưng
khi sử dụng replace() thì
trình duyệt sẽ không lưu vào lịch sử, còn href thì có lưu.

Cú Pháp:


window.location.replace(url);

Trong đó: url là địa chỉ mà các bạn muốn redirect.

VD:


<!DOCTYPE html>


<html>


<head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>Tailieucntt.org  demo location</title>


</head>


<body>


    <p>click vào button để xem kết quả</p>


    <button onclick="replace()" >Di chuyển trang</button>


    <script>


        function replace(){


            window.location.replace('http://tailieucntt.org');


        }


    </script>


</body>


</html>





Phương thức assign()

Phương thức này thì lại không khác gì thuộc tính href.

Cú Pháp:


window.location.assign(url);

Trong đó: url là địa chỉ mà các bạn muốn redirect.

VD:


<!DOCTYPE html>


<html>


<head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>Tailieucntt.org  demo location</title>


</head>


<body>


    <p>click vào button để xem kết quả</p>


    <button onclick="assign()" >Di chuyển trang</button>


    <script>


        function assign(){


            window.location.assign('http://tailieucntt.org');


        }


    </script>


</body>


</html>


 











11.6. Cookie trong javascript



- Cookie là gì?

Cookie là một file dữ liệu được lưu trữ ở mỗi máy của client và đối với mỗi
trình duyệt nó sẽ lưu ở mỗi một ổ khác nhau, còn về thời gian sống của cookie
có thể là vĩnh viễn hoặc cũng có thể là một thời gian nhất định (do chúng ta
thiết lập).

VD: Cookie của chorme.












Vì cookie lưu ở máy của client, nên khi chúng ta tắt trình duyệt đi thì
cookie vẫn tồn tại nếu như khoảng thời gian sống của nó vẫn còn, điều này khác
so với session. Tuy nhiên vì cookie được lưu trữ ở client nên chúng ta cần
phải cân nhắc kỹ trước khi sử dụng nó(bảo mật).



- Cookie trong javascript







Tạo cookie

Để tạo cookie trong javascript chúng ta sử dụng cú pháp sau:


window.document.cookie = 'option';


//hoặc


document.cookie = 'option';

Trong đó: option là các thông số cấu hình của cookie
như tên, thời gian sống,...

VD: Tạo cookie có tên là name và
có giá trị là 'VuThanhTai'.


document.cookie = 'name=VuThanhTai';

VD: Tạo cookie kèm với thời gian sống expires.


document.cookie = 'name=vuthanhtai; expires=Thu, 22 Dec 2017 19:55:20 UTC';

VD: Tạo cookie kèm kèm theo path.


document.cookie = 'name=vuthanhtai; expires=Thu, 22 Dec 2017 19:55:20 UTC;path=/';







Đọc cookie.

Để đọc cookie thì các bạn chỉ cần sử dụng cú pháp:


var data = document.cookie;

Khi đó tất cả các cookie hiện có sẽ được trả về biến data dưới dạng string
và mỗi cookie sẽ cách nhau bởi một dấu ;.



Thay đổi giá trị của cookie

Để thay đổi cookie thực ra chỉ là các bạn tạo mới một cookie có cùng name với
cookie các bạn muốn thay đổi.

VD: Mình sẽ thay đổi cookie giá trị của cookie name
thành tailieucntt.org.


document.cookie = 'name=tailieucntt.org; expires=Thu, 22 Dec 2017 19:55:20 UTC';







Xóa cookie

Để xóa cookie thì các bạn cũng sử dụng thủ thuật giống mình đã từng làm trong
PHP là set cho thời gian sống của nó nhỏ hơn thời gian hiện tại.

VD: Mình sẽ xóa cookie name ở trên bằng cách cho thông số expires về nhỏ hơn thời gian hiện tại.


document.cookie = 'name=tailieucntt.org; expires=Thu, 22 Dec 1990 19:55:20 UTC';







11.7. Đối tượng history trong javascript



- History trong javascript

History trong javascript là đối tượng lưu trữ toàn bộ lịch sử từ lúc chúng
ta bật trình duyệt web lên cho đến khi tắt đi. Và dựa vào nó ta có thể theo dõi
được lịch sử của truy cập của chúng ta bằng javascript.

Cú pháp:


window.history;


//hoặc


history;

Đối tượng này gồm cac thuộc tính và phương thức sau:












Nhưng ở đây mình sẽ trình bài một số các thuộc tính và phương thức hay được
sử dụng nhất thôi.







- Các thành phần trong history







Thuộc tính length

Thuộc tính length lưu lại tổng số các trang mà các bạn đã duyệt.

Cú Pháp:


history.length;

VD:


<!DOCTYPE html>


<html>


<head>


        <meta charset="utf-8">


        <meta http-equiv="X-UA-Compatible" content="IE=edge">


        <title>Tailieucntt.org demo history</title>


</head>


<body>


        <p>Click vào button để xem kết quả</p>


        <button type="button" onclick="getLenghth()">Click</button>


        <script type="text/javascript">


               function getLenghth() {


                       alert(history.length);


               }              


        </script>      


</body>


</html>







Phương thức Back()

Đây là phưowng thức lưu lại trang web chúng ta vừa truy cập gần nhất.

Cú Pháp:


history.back();

VD:


<!DOCTYPE html>


<html>


<head>


        <meta charset="utf-8">


        <meta http-equiv="X-UA-Compatible" content="IE=edge">


        <title>Tailieucntt.org demo history</title>


</head>


<body>


        <p>Click vào button để xem kết quả</p>


        <button type="button" onclick="getBack()">Click</button>


        <script type="text/javascript">


               function getBack() {


                       history.back();


               }              


        </script>      


</body>


</html>





Phương thức forward()

Phương thức này sẽ giúp chúng ta di chuyển lại trang vừa rồi, khi chúng ta vừa back().

Cú Pháp:


history.forward();







Phương thức go()

Cho phép chúng ta quay trở về trang vừa load cách đây n lần.

Cú Pháp:


history.go(-n);

Trong đó: n là số trang mà chúng ta muốn quay trở lại.

VD:


<!DOCTYPE html>


<html>


<head>


        <meta charset="utf-8">


        <meta http-equiv="X-UA-Compatible" content="IE=edge">


        <title>Tailieucntt.org demo history</title>


</head>


<body>


        <p>Click vào button để xem kết quả</p>


        <button type="button" onclick="getBack()">Click</button>


        <script type="text/javascript">


               function getBack() {


                       //quay về trang vừa load cách đây 2 lần


                       history.go(-2);


               }              


        </script>      


</body>


</html>











11.8. Đối tượng navigator trong javascript





- Đối tượng navigator

Đối tượng navigator trong javascript là nơi lưu trữ tất cả các thông
tin về trình duyệt mà người dùng đang sử dụng để truy cập vào website của chúng
ta. Và đối tượng navigator này cũng thuộc nhóm BOM trong
javascript.

Cú Pháp:


window.navigator;


//hoặc


navigator;







- Các thuộc tính trong navigator







appCodeName

Thuộc tính này trả về code name của trình duyệt
mà khách truy cập đang sủ dụng.

Cú Pháp:


navigator.appCodeName;





appName

Thuộc tính này trả về tên của trình duyệt mà khách truy cập đang sử dụng.

Cú Pháp:


navigator.appName;





appVersion

Thuộc tính này trả về version của trình duyệt mà khách đang truy cập.

Cú Pháp:


navigator.appversion;





cookieEnabled

Thuộc tính này dùng để kiểm tra xem trình duyệt có bật cookie hay không. Nó
sẽ trả về true nếu trình duyệt bật và ngược lại sẽ trả về false nếu không bật.

VD:


<!DOCTYPE html>


<html>


 


<head>


        <meta charset="utf-8">


        <title>Tailieucntt.org demo navigator</title>


</head>


<style type="text/css" media="screen">


        p{


               border:1px solid #dddddd;


               background: #e1e1e1;


               padding: 10px;


        }


</style>


<body>


        <div>Click vào button để xem kết quả</div>


        <button type="button" onclick="getInfo()">Click</button>


        <p id="results"></p>


        <script type="text/javascript">


               function getInfo() {


                       var app = navigator.cookieEnabled;


                       if(app){


                               data = 'Trình duyệt có bật cookie';


                       } else {


                               data = 'Trình duyệt không bật cookie';


                       }


                       document.getElementById('results').innerHTML = data;


               }


        </script>


</body>


 


</html>



 



language

Thuộc tính này trả về ngôn ngữ trình duyệt của client.

Cú Pháp:


navigator.language;





onLine

Thuộc tính này kiểm tra xem trình duyệt có đang trực tuyến hay không. Nó sẽ trả
về true nếu có
và false nếu
không.

Cú pháp:


navigator.onLine;





platform

Thuộc tính này trả về hệ điều hànhcủa trình duyệt.

Cú Pháp:


navigator.platform;





product

Thuộc tính này trả về engine của trình duyệt mà người dùng đang sử dụng/


navigator.product;





userAgent

Thuộc tính này trả về agent của trình duyệt.

Cú Pháp:


navigator.userAgent;







- Các phương thức







JavaEnabled()

Phương thức này có tác dụng kiểm tra xem trình duyệt có đang bật java (không
phải javascipt đâu nhé) không? Nó sẽ trả về true nếu có, và ngược lại
flase nếu không.

VD:


<!DOCTYPE html>


<html>


 


<head>


        <meta charset="utf-8">


        <title>Tailieucntt.org demo navigator</title>


</head>


<style type="text/css" media="screen">


        p{


               border:1px solid #dddddd;


               background: #e1e1e1;


               padding: 10px;


        }


</style>


<body>


        <div>Click vào button để xem kết quả</div>


        <button type="button" onclick="getInfo()">Click</button>


        <p id="results"></p>


        <script type="text/javascript">


               function getInfo() {


                       var app = navigator.javaEnabled();


                       if(app){


                               data = 'Trình duyệt có bật java';


                       } else {


                               data = 'Trình duyệt không bật java';


                       }


                       document.getElementById('results').innerHTML = data;


               }


        </script>


</body>


 


</html>





taintEnabled()

Phương thức này kiểm tra xem trình duyệt có đang xóa dữ liệu không? Nhưng kể
từ phiên bản JavaScript 1.2 đã không còn hỗ trợ phương thức này nữa.







11.9. Đối tượng screen trong Javascript







- Đối tượng
screen

Đối tượng screen trong javascript chứa các thông số về màn hình của người
dùng.

Cú Pháp:


window.screen;


//hoặc


screen;

Đối tượng này gồm có 6 thuộc tính với 6 chức năng khác nhau và bài
này chúng ta sẽ tìm hiểu hết 6 thuộc tính đó.



- Các thuộc tính







width - height

Hai thuộc tính này trả về chiều rộng và chiều cao (Đơn vị pixel) của màn
hình thiết bị mà người dùng đang sử dụng.

Cú Pháp:


//lấy chiều rộng


screen.width;


//Lấy chiều cao


screen.height;

VD:


<!DOCTYPE html>


<html>


 


<head>


<meta charset="utf-8">


    <title>Tailieucntt.org demo navigator</title>


</head>


<style type="text/css" media="screen">


    p{


        border:1px solid #dddddd;


        background: #e1e1e1;


        padding: 10px;


    }


</style>


<body>


    <div>Click vào button để xem kết quả</div>


    <button type="button" onclick="getInfo()">Click</button>


    <p id="results"></p>


    <script type="text/javascript">


        function getInfo() {


            var data = "Màn hình của bạn <br>";


            data += "rộng: " + screen.width + "<br>";


            data += "Cao: " + screen.height;


            document.getElementById('results').innerHTML = data;


        }


    </script>


</body>


 


</html>





availWidth - availHeight

Hai thuộc tính này cũng trả về chiều rộng và chiều cao của màn hình, nhưng
đây là màn hình của trình duyệt.









Cú Pháp:


//Lấy availWidth


screen.availWidth;


//Lấy availHeight


screen.availHeight;

VD:


<!DOCTYPE html>


<html>


 


<head>


        <meta charset="utf-8">


        <title>Tailieucntt.org demo screen</title>


</head>


<style type="text/css" media="screen">


        p{


               border:1px solid #dddddd;


               background: #e1e1e1;


               padding: 10px;


        }


</style>


<body>


        <div>Click vào button để xem kết quả</div>


        <button type="button" onclick="getInfo()">Click</button>


        <p id="results"></p>


        <script type="text/javascript">


               function getInfo() {


                       var data = "Màn hình trình duyệt của bạn <br>";


                       data += "Rộng: " + screen.availWidth + "<br>";


                       data += "Cao: " + screen.availHeight;


                       document.getElementById('results').innerHTML = data;


               }


        </script>


</body>


 


</html>





colorDepth

Thuộc tính này trả về color Depth - số lượng màu sắc hiển thị được trên màn
hình.

Cú Pháp:


screen.colorDepth;

VD:


<!DOCTYPE html>


<html>


 


<head>


        <meta charset="utf-8">


        <title>Tailieucntt.org demo screen</title>


</head>


<style type="text/css" media="screen">


        p{


               border:1px solid #dddddd;


               background: #e1e1e1;


               padding: 10px;


        }


</style>


<body>


        <div>Click vào button để xem kết quả</div>


        <button type="button" onclick="getInfo()">Click</button>


        <p id="results"></p>


        <script type="text/javascript">


               function getInfo() {


                       var data = "Color Depth của màn hình: "+ screen.colorDepth;


                       document.getElementById('results').innerHTML = data;


               }


        </script>


</body>


 


</html>





pixelDpth

Thuộc tính này trả về pixel Depth của màn hình.

Cú Pháp:


screen.pixelDepth;

VD:


<!DOCTYPE html>


<html>


 


<head>


        <meta charset="utf-8">


        <title>Tailieucntt.org demo screen</title>


</head>


<style type="text/css" media="screen">


        p{


               border:1px solid #dddddd;


               background: #e1e1e1;


               padding: 10px;


        }


</style>


<body>


        <div>Click vào button để xem kết quả</div>


        <button type="button" onclick="getInfo()">Click</button>


        <p id="results"></p>


        <script type="text/javascript">


               function getInfo() {


                       var data = "Color Depth của màn hình: "+ screen.pixelDepth;


                       document.getElementById('results').innerHTML = data;


               }


        </script>


</body>


 


</html>







11.9. Time events trong javascript



- setTimeout() - clearTimeout()







setTimeout()

Hàm setTimeout() có tác dụng thực thi hành động sau khoảng thời gian nào đó,
và nó chỉ thực hiện đúng một lần.

Cú Pháp:


setTimeout(function, milliseconds);

Trong đó:


    

  • function là hàm thực thi hành động.
    • 

  • milliseconds là thời gian sau bao nhiêu mili giây
     thì thực hiện function.
    • 


VD: Mình sẽ viết hàm setTimout() sao
cho khi bạn load trang web được 3 giây thì nó sẽ alert ra thông báo chào.


<!DOCTYPE html>


<html>


<head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>Tailieucntt.org time events</title>


</head>


<body>


    <div>Đợi 3 giây để xem kết quả</div>


    <script type="text/javascript">


        setTimeout(function(){


            alert('Chào mừng bạn đã đến với website tailieucntt.org');


        },3000);


    </script>


</body>


</html>





clearTimeout()

Hàm này sẽ có tác dụng hủy hành động của hàm  setTimeout().

Cú Pháp:


clearTimeout(timeout);

Trong đó: timeout là
biến mà hàm setTimeout() được gán.

VD: Mình sẽ hủy hàm setTimout() ở VD trên.


<!DOCTYPE html>


<html>


<head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>Tailieucntt.org time events</title>


</head>


<body>


    <div>Đợi 3 giây để xem kết quả</div>


    <script type="text/javascript">


        var timeout = setTimeout(function(){


            alert('Chào mừng bạn đã đến với website tailieucntt.org');


        },3000);


        clearTimeout(timeout);


    </script>


</body>


</html>







- setIntervar() - clearIntervar()







setIntervar()

Hàm này cũng có chức năng là thực hiện hành động sau khoản thời gian bao nhiêu
giây, nhưng nó sẽ thực hiện lại nhiều lần như một vòng lặp, cứ sau mỗi khoảng
thởi gian mà chúng ta xác định nó sẽ lại thực hiện lại.

Cú Pháp:


setInterval(function, milliseconds);

Trong đó:


    

  • function là hàm thực thi hành động.
    • 

  • milliseconds là thời gian sau bao nhiêu mili giây
     thì thực hiện function.
    • 


VD: Mình sẽ viết hàm setInterval() sao
cho cứ 1 giây thì lại in ra số mới (số mới = số cũ +1).


<!DOCTYPE html>


<html>


<head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>Tailieucntt.org time events</title>


</head>


<body>


    <div>Đợi 1 giây để xem kết quả</div>


    <p id="result">0</p>


    <script type="text/javascript">


        var result = document.getElementById('result');


        var i = 1;


        setInterval(function(){


            result.innerText = i;


            i++; 


        },1000);


    </script>


</body>


</html>





clearIntelval()

Hàm này cũng giống như hàm clearTimeout() là
có tác dụng hủy hành động của hàm setInterval().

Cú Pháp:


clearInterval(interval);

Trong đó: interval là
tên biến chứa hàm setIntervar() mà
ta muốn hủy.

VD: Mình sẽ hủy hàm setInterval() ở trên.


<!DOCTYPE html>


<html>


<head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>Tailieucntt.org time events</title>


</head>


<body>


    <div>Đợi 1 giây để xem kết quả</div>


    <p id="result">0</p>


    <script type="text/javascript">


        var result = document.getElementById('result');


        var i = 1;


        var interval = setInterval(function(){


            result.innerText = i;


            i++; 


        },1000);


        clearInterval(interval);


    </script>


</body>


</html>







11.10. Đối tượng date trong javascript





- Đối tượng date trong javascript

Đối tượng date trong javascript là nơi xử lý các vấn đề về thời gian.

Để khởi tạo đối tượng date trong javascript chúng ta có 4 cách:

+ Khởi tạo ngày giờ tại thời điểm hiện tại:


new Date();

+Khởi tạo ngày giờ từ giá trị time millisecond:


new Date(milliseconds);

Trong đó: milliseconds là thời gian chúng ta muốn khởi tạo đơn vị mili giây.

Xem ví dụ

+Khởi tạo ngày giờ từ một dateString:


new Date(dateString);

Trong đó: dateString có dạng "tháng ngày, năm giờ:phút:giây"
trong đó tháng là tên tiếng anh. VD: April 06, 2017 12:00:00.

Xem ví dụ

+Khởi tạo ngày giờ từ một date string dạng atrribute:


new Date(year, month, day, hours, minutes, seconds, milliseconds)

Trong đó:


    

  • year là năm.
    • 

  • month là tháng.
    • 

  • hours là giờ.
    • 

  • minutes là phút.
    • 

  • seconds là giây.
    • 

  • milliseconds là mili giây.
    • 






- Các Phương thức của Date



Các phương thức get dữ liệu


    

  • getDate() trả về ngày trong
     tháng (1 - 31).
    • 

  • getDay() trả về ngày
     trong tuần (0-6), với chủ nhật là 0, thứ 2 là 1, thứ 3 là 2 ,...
    • 

  • getMonth() trả về tháng trong
     năm (0 - 11).
    • 

  • getFullYear() trả về năm dạng đầy
     đủ (YYYY).
    • 

  • getHours() trả về số giờ dạng
     24h (0 - 23).
    • 

  • getMinutes() trả về phút
     trong giờ (0 - 59).
    • 

  • getSeconds() trả về số
     giây trong phút (0 - 59).
    • 

  • getMilliSeconds() trả về tích
     tắc trong giây (0 - 999).
    • 

  • getTime() Trả về thời gian
     dạng mili giây.
    • 


VD:


function get() {


    var date = new Date();


    var data = 'Ngày trong tháng: ' + date.getDate() + '<br />';


    data += 'Ngày trong tuần: ' + date.getDay() + '<br />';


    data += 'Tháng trong năm: ' + date.getMonth() + '<br />';


    data += 'Năm đầy đủ: ' + date.getFullYear() + '<br />';


    data += 'Giờ: ' + date.getHours() + '<br />';


    data += 'Phút: ' + date.getMinutes() + '<br />';


    data += 'Giây: ' + date.getSeconds() + '<br />';


    data += 'Mili Giây: ' + date.getMilliseconds() + '<br />';


    data += 'Time dạng mili giây: ' + date.getTime() + '<br />';


    document.getElementById('result').innerHTML = data;


}



Tương tự chúng ta cũng có các Hàm lấy ra thời gian dạng UTC.

VD:


function get() {


    var date = new Date();


    var data = 'Ngày trong tháng: ' + date.getUTCDate() + '<br />';


    data += 'Ngày trong tuần: ' + date.getUTCDay() + '<br />';


    data += 'Tháng trong năm: ' + date.getUTCMonth() + '<br />';


    data += 'Năm đầy đủ: ' + date.getUTCFullYear() + '<br />';


    data += 'Giờ: ' + date.getUTCHours() + '<br />';


    data += 'Phút: ' + date.getUTCMinutes() + '<br />';


    data += 'Giây: ' + date.getUTCSeconds() + '<br />';


    data += 'Mili Giây: ' + date.getUTCMilliseconds() + '<br />';


    document.getElementById('result').innerHTML = data;


}





Các phương thức set


    

  • setDate(x) thiết
     lập ngày trong tháng (1 - 31).
    • 

  • setMonth(x) thiết lập tháng
     trong năm (0 - 11).
    • 

  • setFullYear(x) thiết lập năm
     dạng đầy đủ (YYYY).
    • 

  • setHours(x) thiết lập số giờ
     dạng 24h (0 - 23).
    • 

  • setMinutes(x) thiết lập phút
     trong giờ (0 - 59).
    • 

  • setSeconds(x) thiết lập số
     giây trong phút (0 - 59).
    • 

  • setMilliSeconds(x) thiết
     lập tích tắc trong giây (0 - 999).
    • 

  • setTime(x) thiết lập thời
     gian dạng mili giây.
    • 


VD:


function set() {


    var date = new Date();


    date.setDate(06);


    date.setMonth(04);


    date.setFullYear(2017);


    date.setHours(15);


    date.setMinutes(05);


    date.setSeconds(10)


    date.setMilliseconds(120);


}



Và tương tự chúng ta cũng có các set dạng UTC.

VD:


function set() {


    var date = new Date();


    date.setUTCDate(06);


    date.setUTCMonth(04);


    date.setUTCFullYear(2017);


    date.setUTCHours(15);


    date.setUTCMinutes(05);


    date.setUTCSeconds(5);


    date.setUTCMilliseconds(120);


}





Các phương thức khác.

Bên cạnh các hàm get và set thì đối tượng date còn hỗ trợ chúng ta các
phương thức:


    

  • toDateString() chuyển đổi thời
     gian về dạng date string.
    • 

  • toISOString() chuyển đổi thời
     gian về dạng ISO (YYYY-MM-DDTHH:mm:ss.sssZ).
    • 

  • toJSON() chuyển đổi thời
     gian về dạng JSON (YYYY-MM-DDTHH:mm:ss.sssZ).
    • 

  • toLocaleDateString() chuyển đổi về
     ngày theo chuyển địa phương.
    • 

  • toLocaleTimeString() chuyển đổi về giờ
     theo chuyển địa phương.
    • 

  • toString() chuyển đổi thơi
     gian về dạng string.
    • 

  • valueOf() chuyển đổi thời
     gian về dạng nguyên thủy.
    • 


VD:


function get() {


    var date = new Date();


    var data = 'toDateString(): ' + date.toDateString() + '<br />';


    data += 'toISOString(): ' + date.toISOString() + '<br />';


    data += 'toJSON(): ' + date.toJSON() + '<br />';


    data += 'toLocaleDateString(): ' + date.toLocaleDateString() + '<br />';


    data += 'toLocaleTimeString(): ' + date.toLocaleTimeString() + '<br />';


    data += 'toString(): ' + date.toString() + '<br />';


    data += 'valueOf(): ' + date.valueOf() + '<br />';


    document.getElementById('result').innerHTML = data;


}







11.11. Use strict mode trong javascript





- Use strict là gì?

Use strict dịch sang
tiếng việt thì có nghĩa là sử dụng sự nghiêm ngặt. Khi một đoạn lệnh được khai
báo use strict thì
tất cả các dòng code ở phía dưới dòng khai báo use strict sẽ được quản lý một
cách nghiêm ngặt hơn về cú pháp.

Khi sử dụng use strict mode
thì những dòng code trước đây bạn có thể chạy bình thường có thể sẽ không chạy
được nữa.

VD:

Không khai báo sử dụng chế độ strict mode.


for (i = 0; i <= 10; i++) {


        document.write(i  + '<br />');


    }





Đoạn code trên sẽ vẫn chạy và hoạt động bình thường. Nhưng,
bây giờ mình sẽ khai báo sử dụng strict mode xem có
chạy được không nhé!


"use strict"


for (i = 0; i <= 10; i++) {


    document.write(i  + '<br />');


}





Ngay lập tức các bạn sẽ nhận được dòng log báo lỗi như sau:


index.html:12 Uncaught ReferenceError: i is not defined at index.html:12



- Các nghiêm ngặt của strict mode

Khi sử dụng strict mode bạn sẽ không thể làm được những điều sau nữa:



Gán giá trị cho biến chưa được khai báo.

Trong chế độ thường bạn có thể làm như này để gán giá trị cho một biến chưa
khai báo:


i = 'học lập trình online tailieucntt.org';


alert(i);





Nhưng strict mode thì không thể:


"use strict"


i = 'học lập trình online tailieucntt.org';


alert(i);





Để khắc phục được điều trên thì bạn cần phải khai báo biến với từ khóa var hoặc let.


"use strict"


var i = 'học lập trình online tailieucntt.org';


// or


let i = 'học lập trình online tailieucntt.org';


alert(i);



Báo lỗi khi sử dụng delete.

Nếu như ở chế độ thường thì bạn có thể xóa bất kỳ một thứ gì bằng từ
khóa delete, mặc dù xóa được hay không nó cũng không báo lỗi. Nhưng khi sử
dụng chế độ strict mode thì những thứ không thể xóa
được nó sẽ báo lỗi ngay.

VD:

Chế độ thường:


function getName (name)


{


    alert(name)


}


delete getName;


//không có gì xảy ra mặc dù delete không xóa


//được hàm





Chế độ strict mode:


"use strict"


function getName (name)


{


    alert(name)


}


delete getName;


//Uncaught SyntaxError: Delete of an unqualified 


//identifier in strict mode.







Các tham số của hàm không được trùng
nhau

Nếu như chế độ thường bạn có thể khai báo các tham số truyền vào hàm được
phép trùng nhau thì giờ đây khi sử dụng chế độ strict mode thì nó sẽ báo lỗi
ngay lập tức.

VD:

Chế độ thường:


function getName (name, name, age)


{


    //code


}


//chạy bình thường.



Chế độ strict mode:


"use strict"


function getName (name, name, age)


{


    //code


}


//Uncaught SyntaxError: Duplicate parameter name not allowed in this context







Không cho phép khai báo biến dưới dạng hệ
nhị phân.

Các số khi khai báo dưới dạng như phân hay nói cách khác thì có tiền tố
(prefix) 0 đằng
trước thì sẽ không được chấp nhận

VD:

Chế độ thường:


var num = 01010;

Chế độ strict mode:


var num = 01010;


//Uncaught SyntaxError: Octal literals are not allowed in strict mode.



Không được phép ghi đè lên thuộc tính chỉ
được phép đọc.

VD:

Chế độ thường:


var obj = {};


Object.defineProperty(obj, 'ver', {value: 1, writable: false});


obj.ver = 10;


//không có gì xảy ra





Chế độ strict mode:


"use strict"


var obj = {};


Object.defineProperty(obj, 'ver', {value: 1, writable: false});


obj.ver = 10;







Không sử dụng được with

VD:

Chế độ thường:


var bar = 1;


var foo = 2;


with (bar){


    console.log(foo);


}


//2





Chế độ strict mode:


"use strict"


var bar = 1;


var foo = 2;


with (bar){


    console.log(foo);


}


//Uncaught SyntaxError: Strict mode code may not include a with statement







Không cho phép khai báo biến trong eval

Vì lý do bảo mật nên khi sử dụng strict mode thì bạn sẽ không thể nào có thể
khai báo được biến bên trong nó nữa.


"use strict"


eval ("var x = 4");


alert(x);


//Uncaught ReferenceError: x is not defined







Không chấp nhận khai báo các keyword

Ở chế độ strict mode thì các bạn sẽ không sử dụng được các từ khóa sau để
khai báo làm tên biến, hằng,...


    

  • implements
    • 

  • interface
    • 

  • let
    • 

  • package
    • 

  • private
    • 

  • protected
    • 

  • public
    • 

  • static
    • 

  • yield
    • 

  • arguments
    • 


VD:

Chế độ thường:


var implements = 'Học Lập Trình Online tại Tailieucntt.org';


alert(implements);


//chạy bình thường.





Chế độ strict mode:


"use strict"


var implements = 'Học Lập Trình Online tại Tailieucntt.org';


alert(implements);


//Uncaught SyntaxError: Unexpected strict mode reserved word



















        

      












Subscribe to:
Posts (Atom)