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ẻ aarea 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

Quảng cáo

Загрузка...

Bài viết nổi bật