<!DOCTYPE html>
<html>
<head>
<title>this is a html web</title>
<meta charset="utf-8">
</head>
<body onload="checkCookies()">
<!-- document.write的使用 写入 HTML 输出-->
<!-- 您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。 -->
<p>
document.write("<h1>this is a heading</h1>")
</p>
<!-- button点击事件 -->
<p><button type="button" onclick="alert('欢迎使用html')">点我</button></p>
<!-- 改变 元素内容 -->
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
x.style.color = "#ff0000"; //改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里改变元素内容</button>
<p></p>
<script>
function changeImage()
{
element = document.getElementById('myImage')
if (element.src.match('hui')) {
element.src = "./images/huang.png"
}else{
element.src = "./images/hui.png"
}
}
</script>
<!-- 图片可用相对路径 也可以用绝对路径 -->
<!-- 输入框 -->
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="myInput" type="text" name="请输入数字。如果输入值不是数字，浏览器会弹出提示框。">
<script>
function InputFuction()
{
var x = document.getElementById("myInput").value;
if (x==""||isNaN(x)) {
alert("不是数字");
}
}
</script>
<button type="button" onclick="InputFuction()">点击验证输入内容</button>
<!-- 分号用于分隔 JavaScript 语句。通常我们在每条可执行的语句结尾添加分号。使用分号的另一用处是在一行中编写多条语句。提示：您也可能看到不带有分号的案例。在 JavaScript 中，用分号来结束语句是可选的。
JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性
可以在文本字符串中使用反斜杠对代码行进行换行 document.write("Hello \ World!");
JavaScript 变量
变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
JavaScript 数据类型
JavaScript 变量还能保存其他数据类型，比如文本值 (name="Bill Gates")。
在 JavaScript 中，类似 "Bill Gates" 这样一条文本被称为字符串。
JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。
当您向变量分配文本值时，应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。
在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：
var name="Gates", age=56, job="CEO";
或
var name="Gates",
age=56,
job="CEO";
重新声明 JavaScript 变量
如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：
var carname="Volvo";
var carname;
JavaScript 数据类型
字符串、数字、布尔、数组、对象、Null、Undefined
JavaScript 拥有动态类型，这意味着相同的变量可用作不同的类型：
var x // x 为 undefined
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串
字符串可以是引号中的任意文本。您可以使用单引号或双引号
var answer="Nice to meet you!";
var answer="He is called 'Bill'";
var answer='He is called "Bill"';
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
极大或极小的数字可以通过科学（指数）计数法来书写：
var y=123e5; // 12300000
var z=123e-5; // 0.00123
布尔（逻辑）只能有两个值：true 或 false。常用在条件测试中
JavaScript 数组
下面的代码创建名为 cars 的数组：
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或者 (condensed array):
var cars=new Array("Audi","BMW","Volvo");
JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"Bill", lastname:"Gates", id:5566};
上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行：
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"];
Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
声明变量类型
当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
carname="Volvo";
将声明一个全局变量 carname，即使它在函数内执行。
如果把数字与字符串相加，结果将成为字符串。
-->
<p>点击按钮，遍历对对象person的属性</p>
<button type="button" onclick="ForInFunction()">点击遍历person</button>
<p id="textDemo"></p>
<script type="text/javascript">
function ForInFunction(){
var x;
var txt="";
var person={firstname:"Bill",lastname:"Gates",age:"56"};
for (x in person) {
txt=txt+person[x]+" ";
}
document.getElementById("textDemo").innerHTML=txt;
}
</script>
<!--
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
JavaScript 测试和捕捉
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
Throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
throw exception
异常可以是 JavaScript 字符串、数字、逻辑值或对象。
-->
<p></p>
<script>
var txt="";
function message()
{
try
{
addlert("Welcome guest!");
}
catch(err)
{
txt="本页有一个错误。\n\n";
txt+="错误描述：" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
}
</script>
<input type="button" value="查验代码块是否正确" onclick="message()">
<p></p>
<script>
function throwFunction()
{
try
{
var x=document.getElementById("throwDemo").value;
if(x=="") throw "值为空";
if(isNaN(x)) throw "不是数字";
if(x>10) throw "太大";
if(x<5) throw "太小";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="错误：" + err + "。";
}
}
</script>
<p>请输入一个5到10之间的数字</p>
<input type="text" id="throwDemo">
<button type="button" onclick="throwFunction()">测试输入值</button>
<p id="mess"></p>
<!--
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：
用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？
-->
<!-- 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素
提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
改变 HTML 内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
document.getElementById(id).innerHTML=new HTML
改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value
-->
<script type="text/javascript">
document.getElementById("imageMales").src="./images/卢浦大桥.png"
</script>
<!-- 改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style -->
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p id="changeColor">change text color</P>
<script type="text/javascript">
function changeColorFunction(){
document.getElementById("changeColor").style.color="red";
}
</script>
<button type="button" onclick="changeColorFunction()">点击改变颜色</button>
<!-- visibility 隐藏和显示 -->
<p id="visibilityId">这是一段文本，点击按钮隐藏或者显示该文本</p>
<script type="text/javascript">
function visibilityFunction(){
var btn=document.getElementById("visibilityBtn");
if (btn.innerText=="隐藏") {
btn.innerText="显示";
document.getElementById("visibilityId").style.visibility="hidden";
}else{
btn.innerText="隐藏";
document.getElementById("visibilityId").style.visibility="visible";
}
}
</script>
<button id="visibilityBtn" type="button" onclick="visibilityFunction()">隐藏</button>
<!-- 对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
onclick=JavaScript
HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
-->
<h1 onclick="this.innerHTML='谢谢!'">点击文本改变内容</h1>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
<p onclick="changetext(this)">点击文本改变内容</p>
<!-- 使用 HTML DOM 来分配事件
HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件： -->
<button id="displayBtn">点击按钮执行<em>displayDate()</em>函数</button>
<script type="text/javascript">
document.getElementById("displayBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("displayDemo").innerHTML=Date();
}
</script>
<p id="displayDemo"></p>
<!-- onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。 -->
<script type="text/javascript">
function checkCookies(){
if (navigator.cookieEnabled==true) {
alert("已启用cookies");
}else
alert("未启用cookies");
}
</script>
<!-- onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。 -->
<script type="text/javascript">
function onchangeFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
请输入英文字符：<input type="text" id="fname" onchange="onchangeFunction()">
<P>当您离开输入字段时，会触发将输入文本转化为大写的函数</P>
<!-- onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。 -->
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color: green;width: 120px;height: 20px;padding: 10px;color: #ffffff">把鼠标移到上面</div>
<script type="text/javascript">
function mOver(obj){
obj.innerHTML="谢谢"
}
function mOut(obj){
obj.innerHTML="把鼠标移到上面"
}
</script>
<p></p>
<!-- onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。 -->
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color: green;color: #ffffff;width: 90px;height: 20px;padding: 10px;font-size: 12px">请点击</div>
<script type="text/javascript">
function mDown(obj){
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}
function mUp(obj){
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>
<p></p>
<h1 onmouseover="style.color='red'" onmouseout="style.color='blue'">
请把鼠标移到这段文本上</h1>
<div id="divdiv">
<p>这是段落一</p>
<p>这是段落二</p>
</div>
<script type="text/javascript">
var para=document.createElement("p");
var node=document.createTextNode("这是新增段落三");
para.appendChild(node);
var element=document.getElementById("divdiv");
element.appendChild(para);
</script>
<!-- 这段代码创建新的 <p> 元素：
var para=document.createElement("p");
如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
var node=document.createTextNode("这是新段落。");
然后您必须向 <p> 元素追加这个文本节点：
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：
var element=document.getElementById("div1");
这段代码向这个已有的元素追加新元素：
element.appendChild(para); -->
<script type="text/javascript">
// var element=document.getElementById("divdiv");
element.removeChild(para);
</script>
<!--
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...
此外，JavaScript 允许自定义对象。
-->
<!-- 数字精度
整数（不使用小数点或指数计数法）最多为 15 位。
小数的最大位数是 17，但是浮点运算并不总是 100% 准确：
如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。
提示：绝不要在数字前面写零，除非您需要进行八进制转换。
-->
<!--
返回当日的日期和时间
1.使用 Date() 方法获得当日的日期。
getTime()
2.getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
setFullYear()
3.使用 setFullYear() 设置具体的日期。
toUTCString()
4.使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。
getDay()
4.使用 getDay() 和数组来显示星期，而不仅仅是数字。
-->
<script type="text/javascript">
document.write(Date()+"<br />");
var d=new Date();
document.write("从 1970/01/01 至今已过去 " + d.getTime() + " 毫秒"+"<br />");
var d = new Date();
d.setFullYear(1992,10,3);
document.write(d+"<br />");
var d = new Date();
document.write (d.toUTCString()+"<br />");
var d=new Date()
var weekday=new Array(7)
weekday[0]="星期日"
weekday[1]="星期一"
weekday[2]="星期二"
weekday[3]="星期三"
weekday[4]="星期四"
weekday[5]="星期五"
weekday[6]="星期六"
document.write("今天是" + weekday[d.getDay()])
var myDate=new Date();
myDate.setFullYear(2008,8,9);
var today = new Date();
if (myDate>today)
{
alert("Today is before 9th August 2008");
}
else
{
alert("Today is after 9th August 2008");
}
</script>
<p></p>
<!-- 数组对象的作用是：使用单独的变量名来存储一系列的值。 -->
<script type="text/javascript">
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
// 遍历数组
for (i=0;i<mycars.length;i++)
{
document.write(mycars[i] + "<br />")
}
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
// 合并数组
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))
// 使用 join() 方法将数组的所有元素组成一个字符串。
document.write(arr.join());
document.write("<br />");
document.write(arr.join("."));
document.write("<br />");
// 文字数组 - sort() 使用 sort() 方法从字面上对数组进行排序
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr+"<br/>");
document.write(arr.sort())
document.write("<br />");
// 数字数组 - sort() 使用 sort() 方法从数值上对数组进行排序。
function sortNumber(a, b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr+"<br/>")
document.write(arr.sort(sortNumber))
</script>
<!--
Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）
创建 Boolean 对象
使用关键词 new 来定义 Boolean 对象。下面的代码定义了一个名为 myBoolean 的逻辑对象：
var myBoolean=new Boolean()
如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。否则，其值为 true（即使当自变量为字符串 "false" 时）
下面的所有的代码行均会创建初始值为 false 的 Boolean 对象。
var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);
下面的所有的代码行均会创初始值为 true 的 Boolean 对象：
var myBoolean=new Boolean(1);
var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Bill Gates");
-->
<script type="text/javascript">
var b1=new Boolean( 0)
var b2=new Boolean(1)
var b3=new Boolean("")
var b4=new Boolean(null)
var b5=new Boolean(NaN)
var b6=new Boolean("false")
var b7=new Boolean()
document.write("0 是逻辑的 "+ b1 +"<br />")
document.write("1 是逻辑的 "+ b2 +"<br />")
document.write("空字符串是逻辑的 "+ b3 + "<br />")
document.write("null 是逻辑的 "+ b4+ "<br />")
document.write("NaN 是逻辑的 "+ b5 +"<br />")
document.write("字符串 'false' 是逻辑的 "+ b6 +"<br />")
document.write(b7+"<br/>")
</script>
<!--
Math 对象
Math（算数）对象的作用是：执行普通的算数任务。
Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。
算数值
JavaScript 提供 8 种可被 Math 对象访问的算数值：
常数
圆周率
2 的平方根
1/2 的平方根
2 的自然对数
10 的自然对数
以 2 为底的 e 的对数
以 10 为底的 e 的对数
这是在 Javascript 中使用这些值的方法：（与上面的算数值一一对应）
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
Math 对象的 round 方法对一个数进行四舍五入。
document.write(Math.round(4.7)) //5
Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数：
document.write(Math.random())
使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数：
document.write(Math.floor(Math.random()*11))
-->
<script type="text/javascript">
// round()的使用
document.write(Math.round(0.456)+"<br/>")
document.write(Math.round(0.789)+"<br/>")
document.write(Math.round(0.5)+"<br/>")
document.write(Math.round(-4.45)+"<br/>")
document.write(Math.round(-4.67)+"<br/>")
// random()的使用 使用 random() 来返回 0 到 1 之间的随机数。
document.write(Math.random()+"<br/>")
// 使用 max() 来返回两个给定的数中的较大的数。（在 ECMASCript v3 之前，该方法只有两个参数。）
document.write(Math.max(5,7) + "<br />")
document.write(Math.max(-3,5) + "<br />")
document.write(Math.max(-3,-5) + "<br />")
document.write(Math.max(7.25,7.30) + "<br />")
// 使用 min() 来返回两个给定的数中的较小的数。（在 ECMASCript v3 之前，该方法只有两个参数。）
document.write(Math.min(5,7,2,3) + "<br />")
document.write(Math.min(-3,5) + "<br />")
document.write(Math.min(-3,-5) + "<br />")
document.write(Math.min(7.25,7.30))
</script>
<!--
什么是 RegExp？
RegExp 是正则表达式的缩写。
当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。
简单的模式可以是一个单独的字符。
更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。
您可以规定字符串中的检索位置，以及要检索的字符类型，等等。
定义 RegExp
RegExp 对象用于存储检索模式。
通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象，其模式是 "e"：
var patt1=new RegExp("e");
当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。
RegExp 对象的方法
RegExp 对象有 3 个方法：test()、exec() 以及 compile()。
test()
test() 方法检索字符串中的指定值。返回值是 true 或 false。
example：
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
example：
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
compile()
compile() 方法用于改变 RegExp。
compile() 既可以改变检索模式，也可以添加或删除第二个参数。
-->
<p></p>
<script type="text/javascript">
var patt1=new RegExp("e","g")
do{
result=patt1.exec("the best things in life are free")
document.write(result+"<br/>")
}
while(result!=null)
</script>
<script type="text/javascript">
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d"); //由于字符串中存在 "e"，而没有 "d"
document.write(patt1.test("The best things in life are free"));
</script>
<!--
Window 尺寸
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：
-->
<p id="wh"></p>
<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
x=document.getElementById("wh");
x.innerHTML="浏览器的内部窗口宽度：" + w + "，高度：" + h + "。"
</script>
<!--
其他 Window 方法
一些其他方法：
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
-->
<!--
Window Screen
window.screen 对象包含有关用户屏幕的信息。
window.screen 对象在编写时可以不使用 window 这个前缀。
一些属性：
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
Window Screen 可用宽度
screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
Window Screen 可用高度
screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。
-->
<!--
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
Window Location
window.location 对象在编写时可不使用 window 这个前缀。
一些例子：
location.href 属性返回当前页面的 URL
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.assign() 方法加载新的文档
-->
<script>
function newDoc()
{
window.location.assign("http://www.w3school.com.cn")
}
</script>
<p><input type="button" value="加载新文档" onclick="newDoc()"></p>
<!--
Window History
window.history 对象包含浏览器的历史。
window.history 对象在编写时可不使用 window 这个前缀。
为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。
一些方法：
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
-->
<!--
window.navigator
window.navigator 对象包含有关访问者浏览器的信息。
window.navigator 对象在编写时可不使用 window 这个前缀。
警告：来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：
navigator 数据可被浏览器使用者更改
浏览器无法报告晚于浏览器发布的新操作系统
浏览器检测
由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。
由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。
例子：if (window.opera) {...some action...}
-->
<div id="example"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
<!--
警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法：
alert("文本")
确认框
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
语法：
confirm("文本")
提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法：
prompt("文本","默认值")
-->
<p><input type="button" onclick="disp_alert()" value="显示警告框"></p>
<script type="text/javascript">
function disp_alert()
{
alert("再次向您问好！在这里，我们向您演示" + '\n' + "如何向警告框添加折行。")
}
</script>
<!-- JavaScript 计时
通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。-->
<!-- 计时 5 秒后弹出一个警告框 -->
<script type="text/javascript">
function timedMsg(){
setTimeout("alert('5秒了')",5000);
}
</script>
<p><button onclick="timedMsg()">点击按钮5秒后给出提示</button></p>
<!-- 一个无穷循环中的计时事件 -->
<script type="text/javascript">
var t=0;
function timedOut(){
document.getElementById("timedOutTxt").innerText=t;
t++;
setTimeout("timedOut()",1000);
}
</script>
<p id="timedOutTxt"><button onclick="timedOut()">开始计时</button>计时</p>
<!-- 带有停止按钮的无穷循环中的计时事件
setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()
setTimeout()
语法
var t=setTimeout("javascript语句",毫秒)
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。
-->
<script type="text/javascript">
var t=0
var tim
function startTimedOut(){
document.getElementById("stTimeTxt").value=t
t=t+1
tim=setTimeout("startTimedOut()",1000)
}
function stopTimedOut(){
t=0;
setTimeout("document.getElementById('stTimeTxt').value=0",0);
clearTimeout(tim);
}
</script>
<form>
<input type="button" value="开始计时！" onClick="startTimedOut()">
<input type="text" id="stTimeTxt">
<input type="button" value="停止计时！" onClick="stopTimedOut()">
</form>
<!-- 什么是cookie?
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。
cookie 用来识别用户。
名字 cookie
当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 cookie 中取回的。
密码 cookie
当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。
日期 cookie
当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息："Your last visit was on Tuesday August 11, 2005!"。日期也是从 cookie 中取回的。 -->
<!-- JavaScript 库 - jQuery、Prototype、MooTools。
jQuery
jQuery 是目前最受欢迎的 JavaScript 框架。
它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。
jQuery 同时提供 companion UI（用户界面）和插件。
许多大公司在网站上使用 jQuery：
Google
Microsoft
IBM
Netflix
Prototype
Prototype 是一种库，提供用于执行常见 web 任务的简单 API。
API 是应用程序编程接口（Application Programming Interface）的缩写。它是包含属性和方法的库，用于操作 HTML DOM。
Prototype 通过提供类和继承，实现了对 JavaScript 的增强。
MooTools
MooTools 也是一个框架，提供了可使常见的 JavaScript 编程更为简单的 API。
MooTools 也含有一些轻量级的效果和动画函数。
YUI - Yahoo! User Interface Framework，涵盖大量函数的大型库，从简单的 JavaScript 功能到完整的 internet widget。
其他框架
Ext JS - 可定制的 widget，用于构建富因特网应用程序（rich Internet applications）。
Dojo - 用于 DOM 操作、事件、widget 等的工具包。
script.aculo.us - 开源的 JavaScript 框架，针对可视效果和界面行为。
UIZE - Widget、AJAX、DOM、模板等等。-->
</body>
</html>
网友评论