JS 教程

JS 简介

写入 HTML 输出

1	document.write("<h1>This is a heading</h1>");

您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

对事件作出反应

1	<button type="button" onclick="alert('Welcome!')">点击这里</button>

改变 HTML 内容

1 2	x=document.getElementById("demo") //查找元素 x.innerHTML="Hello JavaScript"; //改变内容

改变 HTML 图像

1 2	x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改变样式

验证输入

1	if isNaN(x) {alert("Not Numeric")};

##JS 实现

###<script> 标签

1
2
3

<script>
	alert("My First JavaScript");
</script>

JavaScript 函数

<button type="button" onclick="myFunction()">Button</button>
<script>
function myFunction()
{
	document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>

外部的 JavaScript

1	<script src="myScript.js"></script>

在 <head> 或 <body> 中引用脚本文件都是可以的。实际运行效果与您在 <script> 标签中编写脚本完全一致。

提示：外部脚本不能包含 <script> 标签。

##JS 输出

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML="我的第一段 JavaScript";
</script>

<script>
document.write("<p>我的第二段 JavaScript</p>");
</script>

</body>
</html>

访问 id=”demo” 的 HTML 元素，并把它的内容（innerHTML）替换为 “My First JavaScript”。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖（例如使用onclick）

JS 语句

1	document.getElementById("demo").innerHTML="Hello World";

用分号来结束语句是可选的
对大小写是敏感的
会忽略多余的空格
可以在文本字符串中使用反斜杠 \ 对代码行进行换行
1
2
document.write("Hello \
World!");

JS 注释

单行注释以 // 开头

多行注释以 /* 开始，以 */ 结尾

JS 变量

var a = 0, b = 2;
var c = a + b;

var name = "MM",
    ID = 110;

数据类型

数字：可以带小数点，也可以不带

极大或极小的数字可以通过科学（指数）计数法来书写：
1
2
var y=123e5; // 12300000
var z=123e-5; // 0.00123
字符串：用双引号或单引号包围
布尔：true 或 false

重新声明变量

如果重新声明 JavaScript 变量，该变量的值不会丢失

在以下两条语句执行后，变量 carname 的值依然是 “Volvo”：

1 2	var carname="Volvo"; var carname;

动态类型

相同的变量可用作不同的类型

1
2
3

var x                // x 为 undefined
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

###数组

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

或者 (condensed array):

1	var cars=new Array("Audi","BMW","Volvo");

或者 (literal array):

1	var cars=["Audi","BMW","Volvo"];

数组下标是基于零的

JS 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

1	var person={firstname:"Bill", lastname:"Gates", id:5566};

空格和折行无关紧要。声明可横跨多行：

var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};

对象属性有两种寻址方式：

1 2	name=person.lastname; name=person["lastname"];

属性和方法

对象是数据（变量），拥有属性和方法

1	var txt = "Hello";

属性：

1	txt.length=5

方法：

1
2
3

txt.indexOf()
txt.replace()
txt.search()

创建对象

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

访问对象的属性

1 2	var message="Hello world!"; var x=message.toUpperCase();

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 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

下面的所有的代码行均会创初始值为 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");

JS 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

<button onclick="myFunction('Bill Gates','CEO')">点击这里</button>

<script>
function myFunction(name,job)
{
	alert("Welcome " + name + ", the " + job);
}
</script>

注意：JavaScript 对大小写敏感

返回值

function myFunction()
{
    var x=5;
    return x * x;
}

return 后，整个 JavaScript 并不会停止执行，仅仅结束函数。

局部与全局

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

向未声明的变量赋值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

这条语句：

1	carname="Volvo";

将声明一个全局变量 carname，即使它在函数内执行。

JS 运算符

算数运算符：+、-、*、/、%、++、–

赋值运算符：=

比较运算符：==、===、!=、>、<、>=、<=

逻辑运算符：&&、||、!

条件运算符： ( ) ? a : b

+运算符用于把文本值或字符串变量加起来

=== ： x===5 为 true；x===”5” 为 false

如果把数字与字符串相加，结果将成为字符串

JS if-else 与 switch

1
2
3

if ( 条件1 ){ 执行1 }
else if ( 条件2 ) { 执行2 }
else { 执行3 }

switch(n)
{
case 1:
  执行1
  break;
case 2:
  执行2
  break;
default:
  执行3
}

##JS for 和 while 循环

for (var i=0;i<cars.length;i++)
{
	document.write(cars[i] + "<br>");
}

###for/in 语句循环遍历对象的属性：

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
{
	txt=txt + person[x];
}

###使用 while 循环来显示 cars 数组中的所有值：

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
  document.write(cars[i] + "<br>");
  i++;
}

do
{
    x=x + "The number is " + i + "<br>";
    i++;
}
while (i<5);

###break 和 continue

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

JS 标签

1
2

label:
	语句

break 和 continue 语句仅仅是能够跳出代码块的语句

1
2
3

break labelname;

continue labelname;

continue 语句（带有或不带标签引用）只能用在循环中。

break 语句（不带标签引用），只能用在循环或 switch 中。

通过标签引用，break 语句可用于跳出任何 JavaScript 代码块。

JS 错误

try
{
  	var x=document.getElementById("demo").value;
	// 自定义异常可以是字符串、数字、逻辑值或对象
	if (isNaN(x)) throw "Not a number";
  	// 在这里运行代码
}
catch(err)
{
	//在这里处理错误
}

如果 getElementById 函数出错，上面的例子也会抛出一个错误

JS 表单验证

必填表单

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

function validate_required(field, alerttxt)
{
    with (field)
    {
        if (value == null || value == "" )
        {
        	alert(alerttxt);
        	return false 
        }
        else 
        {
        	return true
        }
    }
}

function validate_form(thisform)
{
    with (thisform)
    {
        if (validate_required(email,"Email must be filled out!")==false)
        {
          	email.focus();return false
        }
    }
}

<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>

Email 验证

下面的代码检查输入的数据是否符合电子邮件地址的基本语法。

<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
    with (field)
    {
        apos=value.indexOf("@")
        dotpos=value.lastIndexOf(".")
        if (apos<1||dotpos-apos<2) 
        {
       		alert(alerttxt);
    	    return false
        }
        else
        {
          	return true
        }
    }
}

function validate_form(thisform)
{
    with (thisform)
    {
        if (validate_email(email,"Not a valid e-mail address!")==false)
        {
            email.focus();
            return false
        }
    }
}
</script>
</head>

<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

JS HTML DOM

DOM 简介

###HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

###HTML DOM 树

查找 HTML 元素

有三种方法来做这件事：

通过 id 找到 HTML 元素
1
var x=document.getElementById("intro");
如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

如果未找到该元素，则 x 将包含 null。
通过标签名找到 HTML 元素
查找 “main” 中的所有 <p> 元素：
1
2
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
通过类名找到 HTML 元素
(在 IE 5,6,7,8 中无效)

DOM HTML

改变 HTML 元素的内容

1、改变 HTML 输出流 document.write()

2、改变 HTML 内容 document.getElementById(id).innerHTML=new HTML

3、改变 HTML 属性 document.getElementById(id).attribute=new valu

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

DOM CSS

改变 HTML 元素的样式

document.getElementById(id).style.property=new style

下面的例子会改变 <p> 元素的样式：

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

本例改变了 id=”id1” 的 HTML 元素的样式，当用户点击按钮时：

<h1 id="id1">My Heading 1</h1>

<button type="button" onclick="document.getElementById('id1').style.color='red'">
点击这里
</button>

DOM 事件

对 HTML 事件做出反应

在本例中，当用户在

元素上点击时，会改变其内容：

1	<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

HTML 事件属性

向 button 元素分配 onclick 事件：

1	<button onclick="displayDate()">点击这里</button>

使用 HTML DOM 来分配事件

向 button 元素分配 onclick 事件：

1
2
3

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

1	<body onload="checkCookies()">

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

1	<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
当点击鼠标按钮时，会触发 onmousedown 事件；
当释放鼠标按钮时，会触发 onmouseup 事件；
当完成鼠标点击时，会触发 onclick 事件。

onfocus 和 onblur 事件

元素（字段，一般是 input 或 a）获得和失去焦点时

让 div 拥有 tab 并具有 onfucus 和 onblur 属性:
给元素创建tab属性：tabindex=参数 (这里和z-index类似，计算tab起点)。
1
2
3
> <div tabindex="0" hidefocus="true" onfocus='alert("得到焦点");' onblur='alert("失去焦点");' style="border:1px solid #ccc;width:200px;height:200px;outline=0;"></div>
> 
>

定义tab属性后，元素是默认会加上焦点虚线的，那么在 IE 中可以通过 hidefocus=”true” 去除！其他浏览器通过 outline=0 进行去除！

HTML DOM 元素（节点）

添加和删除节点（HTML 元素）

创建新的 HTML 元素

必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

<div id="div1">
<p id="p1">这是一个段落</p>
</div>

<script>
// 创建新的 <p> 元素
var para=document.createElement("p");
// 创建文本节点
var node=document.createTextNode("这是新段落。");
// 向 <p> 元素追加这个文本节点
para.appendChild(node);

// 找到一个已有的元素
var element=document.getElementById("div1");
// 向这个已有的元素追加新元素
element.appendChild(para);
</script>

删除已有的 HTML 元素

必须首先获得该元素的父元素

<div id="div1">
<p id="p1">这是一个段落。</p>
</div>

<script>
// 找到 id="div1" 的元素
var parent=document.getElementById("div1");
// 找到 id="p1" 的 <p> 元素
var child=document.getElementById("p1");
// 从父元素中删除子元素
parent.removeChild(child);
</script>

不引用父元素的常用解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

1 2	var child=document.getElementById("p1"); child.parentNode.removeChild(child);

JS 对象

访问对象属性：

1	objectName.propertyName

调用对象方法：

1	objectName.methodName()

###创建对象

1
2
3

person=new Object();
person.name="HHH";
person.age=55;

替代语法（使用对象 literals）：

1	person={name:"HHH",age:55};

###使用对象构造器

使用函数来构造对象：

function person(firstname,lastname,age,eyecolor)
{
    this.name=name;
    this.age=age;
}

一旦您有了对象构造器，就可以创建新的对象实例，就像这样：

1	var HHH=new person("HHH",55);

把属性添加到对象

向已有对象添加新属性：

1	person.age=56; // 直接赋值即可

把方法添加到 JavaScript 对象

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法：

function person(name,age)
{
    this.name=name;
    this.age=age;

    this.changeName=changeName;
    function changeName(name)
    {
    	this.name=name;
    }
}

JS 数字

所有 JavaScript 数字均为 64 位

整数（不使用小数点或指数计数法）最多为 15 位。

小数的最大位数是 17，但是浮点运算并不总是 100% 准确

属性：

MAX VALUE
MIN VALUE
NEGATIVE INFINITIVE
POSITIVE INFINITIVE
NaN
prototype
constructor

方法：

toExponential()
toFixed()
toPrecision()
toString()
valueOf()

1 2	var y=0377; // 八进制前缀 0 var z=0xFF; // 十六进制前缀0x

JS 字符串

计算长度 str.length

添加样式 str = s.big() + s.small() + s.bold() + s.italics()
s.blink() 闪动字符串 s.fixed() 打字机文本 strike() 删除线
s.fontcolor(“Red”) s.fontsize(16)
s.toLowerCase() s.toUpperCase()
s.sub() 下标 s.sup() 上标

定位字符串 str.indexOf(s)
定位字符串中某一个指定的字符(串)首次出现的位置，没有则返回 -1

查找字符串 str.match(s)
查找字符串中特定的字符(串)，如果找到则返回这个字符，否则返回 null

替换字符串 str.replace(/s1/, "s2")
返回替换后的字符串，原字符串斜杠包裹，新字符串普通

JS 日期

当前日期时间 Data() Fri Feb 09 2018 21:21:21 GMT+0800 (中国标准时间)

时间戳（1970/1/1年迄今毫秒数） getTime() 1518183016383

###定义日期

1	var myDate=new Date()

注释：Date 对象自动使用当前的日期和时间作为其初始值。

###操作日期

使用 setFullYear() 设置具体的日期
注意：表示月份的参数介于 0 到 11 之间。

1
2
3

var d = new Date()
d.setFullYear(1992,10,3)
document.write(d)

输出结果：Tue Nov 03 1992 21:32:52 GMT+0800 (中国标准时间)

设置 5 天后的日期

1 2	var myDate=new Date() myDate.setDate(myDate.getDate()+5)

比较日期

将当前日期与 2008 年 8 月 9 日做比较:

var myDate=new Date();
myDate.setFullYear(2008,8,9);

var today = new Date();

if (myDate>today) {  }

###日期转化

使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串

1 2	var d = new Date() document.write (d.toUTCString())

输出结果：Fri, 09 Feb 2018 13:35:52 GMT

今天是星期几

1 2	var d=new Date(); d.getDay() // 星期几（0日，6六）

###网页版动态钟表

<html>
<head>
<script type="text/javascript">
function startTime()
{
    var today=new Date()
    var h=today.getHours()
    var m=today.getMinutes()
    var s=today.getSeconds()
    // add a zero in front of numbers<10
    m=checkTime(m)
    s=checkTime(s)
    document.getElementById('txt').innerHTML=h+":"+m+":"+s
    t=setTimeout('startTime()',500)
}

function checkTime(i)
{
    if (i<10) 
    {i="0" + i}
    return i
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

JS 算数

Math（算数）对象的作用是：执行常见的算数任务。

四舍五入 Math.round(x)

Math.round(0.50) == 1
Math.round(-4.40) == -4
Math.round(-4.60) == -5

随机 0 - 1 之间的数 Math.random()

取最大/小值 Math.max()和 Math.min()

在 ECMASCript v3 之前，该方法只有两个参数。

下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数：

1	document.write(Math.floor(Math.random()*11))

JavaScript 提供 8 种可被 Math 对象访问的算数值：

常数 Math.E
圆周率 Math.PI
2 的平方根 Math.SQRT2
1/2 的平方根 Math.SQRT1_2
2 的自然对数 Math.LN2
10 的自然对数 Math.LN10
以 2 为底的 e 的对数 Math.LOG2E
以 10 为底的 e 的对数 Math.LOG10E

正则表达式

定义 RegExp

通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象，其模式是 “e”：

1	var patt1=new RegExp("e"); // 将寻找的是字符 "e"

RegExp 对象的方法

RegExp 对象有 3 个方法：test()、exec() 以及 compile()

test() 方法检索字符串中的指定值。返回值是 true 或 false。

1 2	var patt1=new RegExp("e"); document.write(patt1.test("best life"));

由于该字符串中存在字母 “e”，以上代码的输出将是：true

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

1 2	var patt1=new RegExp("e"); document.write(patt1.exec("The best things in life are free"));

由于该字符串中存在字母 “e”，以上代码的输出将是：e

您可以向 RegExp 对象添加第二个参数，以设定检索。例如，如果需要找到所有某个字符的所有存在，则可以使用 “g” 参数 (“global”)。

在使用 “g” 参数时，exec() 的工作原理如下：

找到第一个 “e”，并存储其位置
如果再次运行 exec()，则从存储的位置开始检索，并找到下一个 “e”，并存储其位置

var patt1=new RegExp("e","g");
do {
    result=patt1.exec("The best things in life are free");
    document.write(result);
}
while (result!=null)

由于这个字符串中 6 个 “e” 字母，代码的输出将是：

1	eeeeeenull

compile() 方法用于改变 RegExp。既可以改变检索模式，也可以添加或删除第二个参数。

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));

由于字符串中存在 “e”，而没有 “d”，以上代码的输出是：truefalse

JS Window

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

显示浏览器窗口的高度和宽度：（涵盖所有浏览器，不包括工具栏/滚动条）：

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

其他 Window 方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

JS Screen

window.screen 对象在编写时可以不使用 window 这个前缀。

一些属性：

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

1
2
3

<script>
document.write("可用宽度：" + screen.availWidth);
</script>

JS Location

window.location 对象在编写时可不使用 window 这个前缀。

一些例子：

location.href 返回当前页面的 URL
location.pathname 属性返回 URL 的路径名和文件名
location.assign() 方法加载新的文档
location.hostname 返回 web 主机的域名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

<html>
<head>
<script>
function newDoc()
{
	window.location.assign("http://www.w3school.com.cn")
}
</script>
</head>
  
<body>
<input type="button" value="加载新文档" onclick="newDoc()">
</body>
</html>

JS History

window.history 对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

<html>
<head>
<script>
function goBack()
{
	window.history.back()
}
</script>
</head>

<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>

JS Navigator

window.navigator 对象包含有关访问者浏览器的信息。

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

警告：来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

navigator 数据可被浏览器使用者更改
浏览器无法报告晚于浏览器发布的新操作系统

浏览器检测

由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。

由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 “window.opera”，您可以据此识别出 Opera。

例子：if (window.opera) {...some action...}

JS 消息框

警告框 alert("文本") 点击确定按钮才能继续操作

确认框 confirm("文本") 点击确定或者取消按钮才能继续，返回值 true 和 false

提示框 prompt("文本","默认值") 输入后点击确认或取消按钮才能继续

JS 计时

var t = setTimeout("javascript语句",毫秒) 未来的某时执行代码

clearTimeout(setTimeout_variable) 取消 setTimeout()

1 2	var t = setTimeout("alert('5秒')",5000) // 5s 后警告框 clearTimeout(t) // 取消 5s 后的警告框

JS Cookies

创建一个欢迎 Cookies

<html>
<head>
<script type="text/javascript">
// 检查 document.cookie 对象中是否存有 cookie
function getCookie(c_name)
{
    if (document.cookie.length>0)
    {
        c_start=document.cookie.indexOf(c_name + "=")
        if (c_start!=-1)
        { 
            c_start=c_start + c_name.length+1 
            c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=document.cookie.length
            return unescape(document.cookie.substring(c_start,c_end))
        } 
    }
    return ""
}

// 将天数转换为有效的日期，然后，我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。
function setCookie(c_name,value,expiredays)
{
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

// 如果 cookie 已设置则显示欢迎词，否则显示提示框来要求用户输入名字
function checkCookie()
{
    username=getCookie('username')
    if (username!=null && username!="")
    {
      	alert('Welcome again '+username+'!')
    }
    else 
    {
        username=prompt('Please enter your name:',"")
        if (username!=null && username!="")
        {
          	setCookie('username',username,365)
        }
    }
}
</script>
</head>

<body onLoad="checkCookie()">
</body>
</html>

JS 库

JS 框架（库，helper）

一些广受欢迎的 JavaScript 框架：

jQuery：使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象），同时提供 companion UI（用户界面）和插件
Prototype：提供用于执行常见 web 任务的简单 API；提供类和继承
MooTools：提供了可使常见的 JavaScript 编程更为简单的 API，也含有一些轻量级的效果和动画函数

其他一些在上面未涉及的框架：

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、模板等等。

CDN - 内容分发网络

如果许多不同的网站使用相同的 JavaScript 框架，那么把框架库存放在一个通用的位置供每个网页分享就变得很有意义了。

CDN (Content Delivery Network) 解决了这个问题。CDN 是包含可分享代码库的服务器网络。

Google 为一系列 JavaScript 库提供了免费的 CDN，包括：

jQuery
Prototype
MooTools
Dojo
Yahoo! YUI

如需在您的网页中使用 JavaScript 框架库，只需在 <script> 标签中引用该库即可：见下方例子

JS jQuery

引用 jQuery

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>

主要的 jQuery 函数是 $() 函数（jQuery 函数）。

jQuery 允许您通过 CSS 选择器来选取元素。

示例：分配一个函数以处理窗口加载事件：

JavaScript 方式：

function myFunction()
{
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello jQuery";
}
onload=myFunction;

jQuery 方式：

function myFunction()
{
	$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);

由于在 JavaScript 中函数就是变量，因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。

提示：jQuery 返回 jQuery 对象，与已传递的 DOM 对象不同。jQuery 对象拥有的属性和方法，与 DOM 对象的不同。不能在 jQuery 对象上使用 HTML DOM 的属性和方法。

jQuery 允许链接（链式语法）

<script>
function myFunction()
{
	$("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>

<h1 id="h01"></h1>

JS Prototype

引用 Prototype：

1 2	<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"> </script>

与 jQuery 类似，Prototype 也有自己的 $() 函数。

$() 函数接受 HTML DOM 元素的 id 值（或 DOM 元素），并会向 DOM 对象添加新的功能。

与 jQuery 不同，Prototype 没有用以取代 window.onload() 的 ready() 方法。相反，Prototype 会向浏览器及 HTML DOM 添加扩展。

示例：分配一个函数以处理窗口加载事件：

JavaScript 方式：

function myFunction()
{
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello Prototype";
}
onload=myFunction;

Prototype 方式：

function myFunction()
{
	$("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);

Event.observe() 接受三个参数：

您希望处理的 HTML DOM 或 BOM（浏览器对象模型）对象
您希望处理的事件
您希望调用的函数

与 jQuery 相同，Prototype 允许链式语法：

<script>
function myFunction()
{
	$("h01").writeAttribute("style","color:red").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>

<h1 id="h01"></h1>

JavaScript-学习笔记

JS 教程

JS 简介

写入 HTML 输出

对事件作出反应

改变 HTML 内容

改变 HTML 图像

验证输入

JavaScript 函数

外部的 JavaScript

JS 语句

JS 注释

JS 变量

数据类型

重新声明变量

动态类型

JS 对象

属性和方法

创建对象

访问对象的属性

Undefined 和 Null

声明变量类型

JS 函数

返回值

局部与全局

向未声明的变量赋值

JS 运算符

JS if-else 与 switch

JS 标签

JS 错误

JS 表单验证

必填表单

Email 验证

JS HTML DOM

DOM 简介

查找 HTML 元素

DOM HTML

DOM CSS

DOM 事件

元素上点击时，会改变其内容： 1<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

HTML 事件属性

使用 HTML DOM 来分配事件

onload 和 onunload 事件

onchange 事件

onmouseover 和 onmouseout 事件

onmousedown、onmouseup 以及 onclick 事件

HTML DOM 元素（节点）

创建新的 HTML 元素

删除已有的 HTML 元素

JS 对象

JS 对象

把属性添加到对象

把方法添加到 JavaScript 对象

JS 数字

JS 数字

JS 字符串

JS 日期

比较日期

JS 算数

正则表达式

定义 RegExp

RegExp 对象的方法

JS Window

Window 尺寸

其他 Window 方法

JS Screen

JS Location

JS History

JS Navigator

浏览器检测

JS 消息框

JS 计时

JS Cookies

JS 库

JS 框架（库，helper）

CDN - 内容分发网络

JS jQuery

JS Prototype

感谢您的鼓励支持！

元素上点击时，会改变其内容：

1
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>