JavaScript基础
Cookies:
Cookies是什么 ?
Web浏览器和服务器使用HTTP协议进行通信，并且HTTP是一种无状态协议。但对于一个商业网站它需要保持不同的页面间的会话信息。例如在完成多页后，一个用户注册结束。但是，如何保持所有网页用户的会话信息。
在许多情况下，使用Cookie来记忆和跟踪的喜好，采购，佣金，并要求更好的访问体验或网站的统计数据等信息的最有效的方法。
它是如何工作的 ?
服务器发送一些数据到访问者的浏览器以cookie的形式。该浏览器可以接受cookie。如果是这样，它是为访问者存储在硬盘驱动器上的一个纯文本的记录。现在，当访问者到达您的网站其他页面，浏览器发送相同cookie到服务器进行检索。一旦检索到，服务器知道/记得刚才发生了什么存储。
Cookies有5个可变长度字段的纯文本数据记录：
-
Expires : cookie将过期的日期。如果这是空白的，那么就是当访问者退出浏览器cookie将到期。
-
Domain : 网站的域名。
-
Path : 路径设置 cookie 目录或网页。如果想要从任何目录或页面，那么cookie 是空的。
-
Secure : 如果该字段包含“安全”二字，那么cookie仅可检索到一个安全的服务器。如果该字段为空，没有限制存在。
-
Name=Value : Cookie设置在键和值对的形式来获取。
的Cookie最初设计用于CGI编程和cookies的数据是在Web浏览器和Web服务器之间自动传输的，所以在服务器上的CGI脚本可以读取和写入存储在客户端上的cookie的值。
JavaScript的也可以操作使用文档对象的cookie属性。 JavaScript可以读取，创建，修改和删除适用于当前网页的cookie或Cookies。
储存Cookies:
创建一个cookie的最简单的方法是一个字符串值分配到document.cookie对象，它是这样的：
语法
document.cookie = "key1=value1;key2=value2;expires=date";
在这里，expires属性选项。如果提供这个属性有一个有效的日期或时间，那么cookie将在给定的日期或时间满期，而后cookies的值将无法访问到。
注意：Cookie的值可能不包括分号，逗号或空白。出于这个原因，可能需要使用JavaScript 的 escape()函数将其存储的值在cookie之前进行编码。如果这样做，当读取cookie的值时也必须使用相应的unescape()函数。
例子：
下面是示例，设置在输入客户名称在cookie。
<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
if( document.myform.customer.value == "" ){
alert("Enter some value!");
return;
}
cookievalue= escape(document.myform.customer.value) + ";";
document.cookie="name=" + cookievalue;
alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie();"/>
</form>
</body>
</html>
这将产生以下结果。现在进入一些在文本框中，然后按下按钮“Set Cookie”设置cookie。
| Enter name: |
现在，有一个cookie叫name。可以设置使用由逗号分隔multiplekey= value对应多个cookie。
你将在下一节学习如何读取该cookie。
读取Cookies:
读取cookie和写入一样简单，因为 document.cookieobject 的值是cookie。所以每当要访问cookie，可以使用这个字符串。
该字符串 document.cookie将继续由分号，其中name是一个cookie的名称，值是它的字符串值分隔的名称=值对的列表。
您可以使用字符串split()函数来打破串入键和值如下：
例子：
下面是一个例子，以获得上一节设置的cookie。
<html>
<head>
<script type="text/javascript">
<!--
function ReadCookie()
{
var allcookies = document.cookie;
alert("All Cookies : " + allcookies );
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for(var i=0; i<cookiearray.length; i++){
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
alert("Key is : " + name + " and Value is : " + value);
}
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
<input type="button" value="Get Cookie" onclick="ReadCookie()"/>
</form>
</body>
</html>
注：这里的length 是Array类的方法，该方法返回一个数组的长度。我们将在一个单独的章节讨论数组。到那个时候，请尽量消化它。
这将产生以下结果。现在按按钮“Get Cookie”，看看在上一节中如何设置cookie。
注意：有可能在机器上已设置了一些其他的Cookie。所以，上面的代码会显示所有设置cookie。
设置Cookies的过期日期：
可以通过设置的到期日期和保存cookie中的失效日期延长超出当前浏览器会话cookie中的寿命。这可以通过设置expires属性的日期和时间来完成。
例子：
下面的例子演示了如何设置cookie1个月后过期：
<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
var now = new Date();
now.setMonth( now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie="name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>
删除Cookie：
有时如果想删除一个cookie，以便后续尝试读取cookie返回什么。要做到这一点，你只需要在到期日设置在过去的某个时间。
例子：
下面的例子演示了如何通过设置有效期限一个月以前删除cookie：
<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
var now = new Date();
now.setMonth( now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie="name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>
注：不设置日期，可以使用setTime()函数看到新值。
页面重定向：
页面重定向是什么？
当你点击一个URL来访问一个网页X，但在内部你被定向到另一页Y，仅仅是因为页面重定向。这一概念是从不同于 JavaScript 页面刷新 。
可能有各种原因，为什么想从原来的页面重定向。下面列出的几个原因：
-
如果不喜欢你的域名，可以重定向到一个新的。同时，要引导所有访问者到新网站。在这种情况下，可以保持旧的域名，但放在一个页面到一个页面重定向使所有的旧域名游客可以来到新的域名。
-
基于浏览器的版本，或者名字不同的页面，也可以根据不同的国家，而不是用服务器端网页重定向，可以使用客户端页面重定向到登陆用户在相应的页面。
-
搜索引擎可能已经收录新页面。不过，在移动到另一个域名，那么不喜欢失去访客通过搜索引擎来了。所以，可以使用客户端页面的重定向。但请记住，这不应该做的，使搜索引擎傻瓜，否则，这可能让网站被取缔。
页面重新方向如何工作 ?
示例1:
这使用JavaScript在客户端页面的重定向是非常简单的。网站访问者重定向到一个新的页面，只需要添加在head部分加入一行如下：
<head> <script type="text/javascript"> <!-- window.location="http://www.newlocation.com"; //--> </script> </head>
示例 2:
可以将其重定向到一个新的页面之前显示相应的信息给网站访客。这将需要一个位时间延迟加载新页。以下是简单的例子来实现相同的：
<head>
<script type="text/javascript">
<!--
function Redirect()
{
window.location="http://www.newlocation.com";
}
document.write("You will be redirected to main page in 10 sec.");
setTimeout('Redirect()', 10000);
//-->
</script>
</head>
这里的 setTimeout()是一个内置的JavaScript函数，可用于给定的时间间隔之后执行另一个函数。
示例3:
以下是例子重定向基于其浏览器不同的网页访问者：
<head>
<script type="text/javascript">
<!--
var browsername=navigator.appName;
if( browsername == "Netscape" )
{
window.location="http://www.location.com/ns.html";
}
else if ( browsername =="Microsoft Internet Explorer")
{
window.location="http://www.location.com/ie.html";
}
else
{
window.location="http://www.location.com/other.html";
}
//-->
</script>
</head>
对话框：
JavaScript支持三种重要类型的对话框。这些对话框可以用来引发和警报，或得到确认的任何输入或有来自用户的一种输入。
在这里，我们将一个一个地来看每个对话框：
Alert 对话框:
一个警告对话框，主要是用来给一个警告信息给用户。就像如果一个输入字段要求输入一些文字，但用户不输入字段则作为验证，可以使用警告框，如下给出警告信息的一部分：
<head>
<script type="text/javascript">
<!--
alert("Warning Message");
//-->
</script>
</head>
然而，一个警告框仍然可以用于友好的消息。警告框，给人只有一个“Ok”按钮来选择和继续。
确认对话框：
一个确认对话框主要用于把用户的同意的任何选项。它显示一个对话框，有两个按钮：确定和取消。
如果用户点击OK按钮，窗口的方法confirm()将返回true。如果用户点击取消按钮confirm() 返回 false。可以使用确认对话框，如下所示：
<head>
<script type="text/javascript">
<!--
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
alert("User wants to continue!");
return true;
}else{
alert("User does not want to continue!");
return false;
}
//-->
</script>
</head>
Prompt Dialog Box:
当你想弹出一个文本框来获取用户输入的提示对话框中是非常有用的。因此，它使您能够与用户交互。用户需要填写字段，然后单击确定。
使用对话框 prompt() 是一种方法，它有两个参数(I)要在文本框中显示(Ⅱ)默认字符串文本框中显示的标签显示。
这个对话框有两个按钮：确定和取消。如果用户点击“OK”按钮的窗口法prompt()将从文本框返回输入的值。如果用户点击“取消”按钮窗口方式prompt()返回null。
可以使用提示对话框，如下所示：
<head>
<script type="text/javascript">
<!--
var retVal = prompt("Enter your name : ", "your name here");
alert("You have entered : " + retVal );
//-->
</script>
</head>
void是在JavaScript中的一个重要的关键字可被用作其单操作数之前出现一元运算符，其可以是任何类型。
此运算符指定不需要返回值，进行计算的表达式。它的语法可能是下列之一：
<head> <script type="text/javascript"> <!-- void func() javascript:void func() or: void(func()) javascript:void(func()) //--> </script> </head>
实例1:
这个操作最常见的用途是在客户端JavaScript：URL，它可以评估计算其边界效应的表达式，而不显示计算表达式的值的浏览器。
在这里，表达 alert('Warning!!!') 进行评估计算，但没有加载回当前文档：
<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<a href="javascript:void(alert('Warning!!!'))">Click me!</a>
</body>
实例2:
另一例子下面的链接什么也不做，因为表达式“0”在JavaScript中没有任何影响。这里，表达式“0”被评估计算，但它不被装入回当前文档：
<head> <script type="text/javascript"> <!-- //--> </script> </head> <body> <a href="javascript:void(0))">Click me!</a> </body>
实例3:
void的另一个用途是故意产生不确定的值，如下所示：
<head>
<script type="text/javascript">
<!--
function getValue(){
var a,b,c;
a = void ( b = 5, c = 7 );
document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}
//-->
</script>
</head>
页面打印：
很多时候，你想给一个按钮，在网页上通过一个实际的打印机打印出网页的内容。
JavaScript可使用window对象的print函数就可以实现这样的功能。
当执行JavaScript的print函数window.print()将会打印当前页面。可以使用onclick事件如下直接调用此函数：
<head> <script type="text/javascript"> <!-- //--> </script> </head> <body> <form> <input type="button" value="Print" onclick="window.print()" /> </form> </body>
这将产生以下按钮，打印此页。点击试试：
这符合打印出来的页面，但这个不是一个推荐的方式。打印机友好的页面实际上只是一个文本，没有图像，图形或广告页面。
可以使用以下页式打印机友好方式：
-
使页面的副本，并离开了不需要的文本和图形，然后从原始链接到该打印机友好的页面。
-
如果你不想让页面的额外副本，那么可以使用像适当的注释标记打印文本 <!-- PRINT STARTS HERE -->..... <!-- PRINT ENDS HERE --> 然后你可以使用PERL或其他脚本在后台清除打印文本和显示进行最后的打印。网站使用同样的方法给打印设备对我们网站的访客。
如何打印页面：
如果没有人在提供上述设备，那么你可以使用浏览器的标准工具栏让网页打印出来。按照链接如下：
File --> Print --> Click OK button.