Hiển thị các bài đăng có nhãn JavaScript-Browser-BOM. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn JavaScript-Browser-BOM. Hiển thị tất cả bài đăng
Thứ Tư, 12 tháng 2, 2014
JavaScript Cookies
Cookie cho phép bạn lưu trữ thông tin người sử dụng trong các trang web.
Cookies là gì?
Cookies là dữ liệu, lưu trữ trong các tập tin văn bản nhỏ, trên máy tính của bạn.
Khi một máy chủ web đã gửi một trang web đến một trình duyệt, kết nối được đóng cửa, và các máy chủ quên tất cả mọi thứ về người dùng.
Cookie đã được phát minh để giải quyết vấn đề "làm thế nào để ghi nhớ thông tin về người sử dụng":
- Khi người dùng truy cập một trang web, tên của ông có thể được lưu trữ trong một cookie.
- Thời gian tiếp theo người dùng truy cập trang web, cookie "nhớ" tên của mình.
Cookie sẽ được lưu trong các cặp tên-giá trị như:
username=John Doe
Khi một yêu cầu trình duyệt một trang web từ một máy chủ, cookies thuộc trang được thêm vào
theo yêu cầu. Bằng cách này, máy chủ được các dữ liệu cần thiết để "nhớ" thông tin về người sử dụng.
Tạo ra một Cookie với JavaScript
JavaScript có thể tạo ra các cookie, đọc cookie và xóa các tập tin cookie với các tài sản document.cookie .
Với JavaScript, cookie có thể được tạo ra như thế này:
document.cookie="username=John Doe";
Bạn cũng có thể thêm một hạn sử dụng (UTC hoặc giờ GMT thời gian). Theo mặc định, các tập tin cookie sẽ bị xóa khi trình duyệt được đóng lại:
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
Với một tham số đường dẫn, bạn có thể cho trình duyệt những gì con đường cookie thuộc về. Theo mặc định, các tập tin cookie thuộc về trang hiện tại.
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
Đọc một Cookie với JavaScript
Với JavaScript, cookie có thể được đọc như thế này:
var x = document.cookie;
 | document.cookie sẽ trở lại tất cả các cookie trong một chuỗi giống như: cookie1 = giá trị; cookie2 = giá trị; cookie3 = giá trị; |
|---|
Thay đổi một Cookie với JavaScript
Với JavaScript, bạn có thể thay đổi một cookie theo cùng một cách như bạn tạo ra nó:
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
Cookie cũ được ghi đè.
Xóa một Cookie với JavaScript
Xóa một cookie là rất đơn giản. Chỉ cần thiết lập các tham số hết hạn vào một ngày trôi qua:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
Lưu ý rằng bạn không cần phải chỉ định một giá trị cookie khi bạn xóa một tập tin cookie.
Cookie dây
Tài sản document.cookie trông giống như một chuỗi văn bản bình thường. Nhưng nó không.
Ngay cả khi bạn viết một chuỗi toàn bộ cookie document.cookie, khi bạn đọc nó ra một lần nữa, bạn chỉ có thể xem các cặp tên-giá trị của nó.
Nếu bạn đặt một cookie mới, cookies cũ không ghi đè. Cookie mới được thêm vào document.cookie, vì vậy nếu bạn đọc document.cookie một lần nữa bạn sẽ nhận được một cái gì đó như:
cookie1 = giá trị; cookie2 = giá trị;
Nếu bạn muốn tìm giá trị của một cookie sẽ được chỉ định, bạn phải viết một hàm JavaScript để tìm kiếm cho các giá trị cookie trong chuỗi cookie.
JavaScript Cookie Ví dụ
Trong ví dụ để làm theo, chúng ta sẽ tạo ra một cookie để lưu tên của một khách truy cập.
Lần đầu tiên một người truy cập đến trang web, ông sẽ được yêu cầu điền vào tên của mình. Tên này sau đó được lưu trữ trong một cookie.
Trong thời gian tới khách truy cập đến trang đó, ông sẽ nhận được một thông điệp chào mừng.
Ví dụ, chúng ta sẽ tạo ra 3 chức năng JavaScript:
- Một chức năng để thiết lập một giá trị cookie
- Một chức năng để có được một giá trị cookie
- Một chức năng để kiểm tra một giá trị cookie
Một chức năng để thiết lập một Cookie
Đầu tiên, chúng ta tạo ra một chức năng mà các cửa hàng tên của khách truy cập trong một biến cookie:
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
Ví dụ giải thích:
Các thông số của hàm trên là tên của các tập tin cookie (CNAME), giá trị của cookie (cvalue), và số ngày cho đến khi các tập tin cookie nên hết hạn (exdays).
Chức năng đặt một cookie bằng cách cộng các cookiename, giá trị cookie, và hết hạn chuỗi.
Một chức năng để có được một Cookie
Sau đó, chúng tôi tạo ra một chức năng mà trả về giá trị của một cookie quy định:
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
Chức năng giải thích:
Lấy cookiename như tham số (CNAME).
Tạo ra một biến (tên) với các văn bản để tìm kiếm (CNAME + "=").
Chia document.cookie trên dấu chấm phẩy vào một mảng được gọi là ca (ca = document.cookie.split (';')).
Vòng lặp thông qua các ca mảng (i = 0; i <ca.length; i + +), và đọc mỗi giá trị cắt (c = ca [i] trim ().).
Nếu cookie được tìm thấy (c.indexOf (tên) == 0), trả về giá trị của cookie (c.substring (name.length, c.length).
Nếu cookie không tìm thấy, trở về "".
Một chức năng để kiểm tra một Cookie
Cuối cùng, chúng tôi tạo ra các chức năng để kiểm tra nếu một cookie được thiết lập.
Nếu cookie được thiết lập nó sẽ hiển thị một lời chào.
Nếu cookie không được thiết lập, nó sẽ hiển thị một hộp nhắc, yêu cầu tên của người sử dụng, và lưu trữ các tập tin cookie tên người dùng cho 365 ngày, bằng cách gọi hàm setCookie:
function checkCookie()
{
var username=getCookie("username");
if (username!="")
{
alert("Welcome again " + username);
}
else
{
username = prompt("Please enter your name:","");
if (username!="" && username!=null)
{
setCookie("username",username,365);
}
}
}
{
var username=getCookie("username");
if (username!="")
{
alert("Welcome again " + username);
}
else
{
username = prompt("Please enter your name:","");
if (username!="" && username!=null)
{
setCookie("username",username,365);
}
}
}
Tất cả cùng nhau Bây giờ
Ví dụ
<!DOCTYPE html>
<html>
<head><script>
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
function checkCookie()
{
var user=getCookie("username");
if (user!="")
{
alert("Welcome again " + user);
}
else
{
user = prompt("Please enter your name:","");
if (user!="" && user!=null)
{
setCookie("username",user,30);
}
}
}
</script></head>
<body onload="checkCookie()"></body>
</html>
Thử nó cho mình »
Ví dụ trên chạy checkCookie () chức năng khi tải trang.
JavaScript Timing Events
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript có thể được thực hiện trong các khoảng thời gian.
Này được gọi là thời gian sự kiện.
|
JavaScript Thời gian Sự kiện
Với JavaScript, nó có thể thực hiện một số mã ở thời gian khoảng thời gian xác định. Này được gọi là thời gian sự kiện.
Nó rất dễ dàng với các sự kiện thời gian trong JavaScript. Hai phương pháp chính được sử dụng là:
- setInterval () - thực hiện một chức năng, hơn và hơn nữa, khoảng thời gian quy định
- setTimeout () - thực hiện một chức năng, một lần, sau khi chờ đợi một số quy định của mili giây
Lưu ý: Các setInterval () và setTimeout () là cả hai phương pháp của đối tượng HTML DOM của Windows.
SetInterval () Phương pháp
Phương pháp setInterval () sẽ chờ đợi một số quy định của mili giây, và sau đó thực hiện một chức năng nhất định, và nó sẽ tiếp tục thực hiện các chức năng, một lần tại mỗi-khoảng thời gian nhất định.
Cú pháp
window.setInterval("javascript function",milliseconds);
Các window.setInterval () phương pháp có thể được viết không có tiền tố cửa sổ.
Tham số đầu tiên của setInterval () phải là một chức năng.
Tham số thứ hai chỉ ra độ dài của thời gian khoảng thời gian giữa mỗi lần thực hiện.
Lưu ý: Có 1.000 mili giây trong một giây.
Ví dụ
Cảnh báo "hello" mỗi 3 giây:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to wait 3 seconds, then alert "Hello".</p>
<p>After clicking away the alert box, an new alert box will appear in 3 seconds. This goes on forever...</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
setInterval(function(){alert("Hello")},3000);
}
</script>
</body>
</html>
Thử nó cho mình »
Ví dụ chỉ cho bạn cách setInterval () phương pháp hoạt động, nhưng nó không phải là rất có thể bạn muốn cảnh báo một tin nhắn mỗi 3 giây.
Dưới đây là một ví dụ mà sẽ hiển thị thời gian hiện tại. Phương pháp setInterval () được sử dụng để thực hiện chức năng một lần mỗi 1 giây, giống như một chiếc đồng hồ kỹ thuật số.
Ví dụ
Hiển thị thời gian hiện tại:
<!DOCTYPE html>
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script>
</body>
</html>
Thử nó cho mình »
Làm thế nào để ngăn chặn các Thực hiện?
Phương pháp clearInterval () được sử dụng để ngăn chặn hành thêm các chức năng quy định trong setInterval (phương pháp).
Cú pháp
window.clearInterval(intervalVariable)
Các window.clearInterval () phương pháp có thể được viết không có tiền tố cửa sổ.
Để có thể sử dụng phương pháp () clearInterval, bạn phải sử dụng một biến toàn cầu khi tạo phương pháp khoảng thời gian:
myVar=setInterval("javascript function",milliseconds);
Sau đó, bạn sẽ có thể để ngăn chặn sự thực thi bằng cách gọi clearInterval () phương pháp.
Ví dụ
Cùng ví dụ như trên, nhưng chúng tôi đã thêm một nút "Stop thời gian":
<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction()
{
clearInterval(myVar);
}
</script>
<button onclick="myStopFunction()">Stop time</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction()
{
clearInterval(myVar);
}
</script>
Thử nó cho mình »
SetTimeout () Phương pháp
Cú pháp
window.setTimeout("javascript function",milliseconds);
Các window.setTimeout () phương pháp có thể được viết không có tiền tố cửa sổ.
Phương pháp setTimeout () sẽ chờ đợi số quy định của mili giây, và sau đó thực hiện các chức năng quy định.
Tham số đầu tiên của setTimeout () phải là một chức năng.
Tham số thứ hai chỉ ra bao nhiêu phần nghìn giây, từ bây giờ, bạn muốn thực hiện các tham số đầu tiên.
Ví dụ
Chờ 3 giây, sau đó cảnh báo "Xin chào":
<!DOCTYPE html>
<html>
<body>
<p>Click the button to wait 3 seconds, then alert "Hello".</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
setTimeout(function(){alert("Hello")},3000);
}
</script>
</body>
</html>
Thử nó cho mình »
Làm thế nào để ngăn chặn các Thực hiện?
Phương pháp clearTimeout () được sử dụng để ngăn chặn việc thực hiện các chức năng quy định trong setTimeout (phương pháp).
Cú pháp
window.clearTimeout(timeoutVariable)
Các window.clearTimeout () phương pháp có thể được viết không có tiền tố cửa sổ.
Để có thể sử dụng clearTimeout () phương pháp, bạn phải sử dụng một biến toàn cầu khi tạo phương pháp thời gian chờ:
myVar=setTimeout("javascript function",milliseconds);
Sau đó, nếu chức năng chưa được thực hiện, bạn sẽ có thể để ngăn chặn sự thực thi bằng cách gọi clearTimeout () phương pháp.
Ví dụ
Cùng ví dụ như trên, nhưng chúng tôi đã thêm một nút "Stop cảnh báo":
<!DOCTYPE html>
<html>
<body>
<p>Click the first button alert "Hello" after waiting 3 seconds.</p>
<p>Click the second button to prevent the first function to execute. (You must click it before the 3 seconds are up.)</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myStopFunction()">Stop the alert</button>
<script>
var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
clearTimeout(myVar);
}
</script>
</body>
</html>
Thử nó cho mình »
JavaScript Popup Boxes
JavaScript có ba loại hộp popup như: hộp báo, hộp Xác nhận, và hộp Prompt.
Hộp cảnh báo
Một hộp cảnh báo thường được sử dụng nếu bạn muốn chắc chắn rằng thông tin đến cho người sử dụng thông qua.
Khi một hộp cảnh báo xuất hiện, người dùng sẽ phải bấm vào nút "OK" để tiến hành.
Cú pháp
window.alert("sometext");
Các window.alert phương pháp có thể được viết không có tiền tố cửa sổ.
Ví dụ
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display an alert box.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
alert("I am an alert box!");
}
</script>
</body>
</html>
Thử nó cho mình »
Xác nhận Box
Một hộp xác nhận thường được sử dụng nếu bạn muốn sử dụng để xác minh hoặc chấp nhận một cái gì đó.
Khi một hộp xác nhận hiện ra, người dùng sẽ phải bấm vào một trong hai "OK" hoặc "Hủy" để tiến hành.
Nếu người dùng nhấp "OK", hộp trả về true. Nếu người dùng nhấp "Cancel", hộp trả về false.
Cú pháp
window.confirm("sometext");
Các window.confirm () phương pháp có thể được viết không có tiền tố cửa sổ.
Ví dụ
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display a confirm box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
var r=confirm("Press a button!");
if (r==true)
{
x="You pressed OK!";
}
else
{
x="You pressed Cancel!";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
Thử nó cho mình »
Hộp dấu nhắc
Một hộp nhắc thường được sử dụng nếu bạn muốn người dùng nhập vào một giá trị trước khi vào một trang.
Khi một hộp nhắc bật lên, người dùng sẽ phải bấm vào một trong hai "OK" hoặc "Hủy" để tiến hành sau khi nhập một giá trị đầu vào.
Nếu người dùng nhấp "OK" hộp trả về giá trị đầu vào. Nếu người dùng nhấp chuột "Hủy bỏ" hộp trả về null.
Cú pháp
window.prompt("sometext","defaultText");
Các window.prompt () phương pháp có thể được viết không có tiền tố cửa sổ.
Ví dụ
<!DOCTYPE html>
<html>
<body>
<p>Click the button to demonstrate the prompt box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
var person=prompt("Please enter your name","Harry Potter");
if (person!=null)
{
x="Hello " + person + "! How are you today?";
document.getElementById("demo").innerHTML=x;
}
}
</script>
</body>
</html>
Thử nó cho mình »
Dòng Breaks
Để hiển thị ngắt dòng bên trong một hộp popup, sử dụng một back-slash tiếp theo là nhân vật n.
Ví dụ
<!DOCTYPE html>
<html>
<body>
<p>Click the button to demonstrate line-breaks in a popup box.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
alert("Hello\nHow are you?");
}
</script>
</body>
</html>
Thử nó cho mình »
Đăng ký:
Bài đăng (Atom)