目录
前言：
既然页面好看了起来，那么我们肯定是想要有动态事件的，所以这里我们学习JavaScript。
直通车：
硬核归纳HTML+CSS+JS系列之HTML+XHTML部分（W3C标准）
硬核归纳HTML+CSS+JS系列之CSS部分（W3C标准）
我们有了基本的页面，也可以在页面中注入各种颜色，那么我们需要页面动起来，就需要使用js（解释性脚本语言）。
在数百万张页面中，JavaScript被用来改进设计、验证表单、检测浏览器、创建cookies等等。
导入JavaScript有：
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
一、JavaScript放置位置
1、位于head部分的脚本
当脚本被调用时，或者当事件被触发时，脚本就会被执行。所以当你把脚本放置到head部分后，就要确保在需要使用脚本之前，它已经被载入了。
<html> <head> <script type="text/javascript"> .... </script> </head> ....
2、位于body部分的脚本
在页面载入脚本时就会被执行。当你把脚本放置于body部分后，他就会生成页面的内容。
3、使用外部JavaScript
如果你希望若干个页面运行JavaScript，同时不在每个页面写相同的脚本。注意：外部文件不能包<script标签。
例如：
html> <head> <script src="xxx.js">....</script> </head> <body> </body> </html>
二、JavaScript语句
JavaScript语句是发给浏览器的命令，这些命令的作用是告诉浏览器要做的事情。
JavaScript代码时JavaScript语句的序列，例如向网页输出一个标题和两个段落：
<script type="text/javascript">
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>
JavaScript可以分批地组合起来，以左花括号开始，右花括号结束。
例如：
<script type="text/javascript">
{
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
}
</script>
三、注释
我们知道shell也是解释性的脚本语言，所以学习语言之前，我们一般也都是有一个简单的例子，然后去一一学习语法函数。这里我们需要知道注释是怎么写的。
1、单行注释：用//开始就好
2、多行注释：以/*开头，以*/结尾，就是和我们的C语言是一致的。
四、变量
你在学习C语言的变量命名规则对JavaScript也是使用的，这里我们需要注意定义声明的不同。
1、声明创建JavaScript变量
使用var语句来声明JavaScript变量（这个与shell不同，shell直接书写即可）
例如：
var x=5这里我直接设置变量并且赋值，如果是文本，则需要双引号。
其中C语言的加减算数也同样使用与JavaScript
2、运算法
和C语言一样，算术运算符和赋值运算符同样适用与JavaScript，但是这里有一个亮点就是用于字符串的+运算法（这个java 是有的），直接使用即可。
其中比较运算符合逻辑运算符也是一致，但是这里介绍===全等运算法，即值和类型也相同，这个是C语言和java都没有的。
五、流程控制语句
有着C语言的经验，那么流程控制语句自然也就是那么几种，并且也都是一致的。例如：
IF语句：
<script type="text/javascript">
//If the time is less than 10,
//you will get a "Good morning" greeting.
//Otherwise you will get a "Good day" greeting.
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("Good morning!")
}
else
{
document.write("Good day!")
}
</script>
switch：
<script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.
var d=new Date()
theDay=d.getDay()
switch (theDay)
{
case 5:
document.write("Finally Friday")
break
case 6:
document.write("Super Saturday")
break
case 0:
document.write("Sleepy Sunday")
break
default:
document.write("I'm looking forward to this weekend!")
}
</script>
那么你肯定会立刻想到，循环语句对吧，它的形式和shell类似，不同于C语言，所以我们之后介绍。
六、消息框
在JavaScript中可以创建三种消息框：警告框、确认框、提示框。
1、警告框
警告框经常用于确保用户可以得到某些信息，出现之后，需要点击确认按钮才能继续进行操作。
语法：
alert("文本")
2、确认框
语法：confirm("文本")
3、提示框：
语法：prompt("文本","默认值")
七、函数
好的编程语言怎么少得了函数呢，将脚本编写为函数，就可以避免页面载入时执行脚本。例如：
html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!")
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" οnclick="displaymessage()" >
</form>
</body>
</html>
1、创建函数的语法,与C语言不同，没有返回类型，需要使用function标识
function 函数名(var1,var2,...,varX)
{
代码．．．
}
当然也是有return语句的，用法也是一致的。
八、循环语句
1、For循环，语法与C语言一致
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
document.write("The number is " + i)
document.write("<br />")
}
</script>
</body>
</html>
2、while循环
<html>
<body>
<script type="text/javascript">
var i=0
while (i<=10)
{
document.write("The number is " + i)
document.write("<br />")
i=i+1
}
</script>
</body>
</html>
3、do-while循环
<html>
<body>
<script type="text/javascript">
var i=0
do
{
document.write("The number is " + i)
document.write("<br />")
i=i+1
}
while (i<0)
</script>
</body>
</html>
九、break和continue
break语句来终止循环，continue语句来终止当前循环，然后下一个值继续执行。
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){break}
document.write("The number is " + i)
document.write("<br />")
}
</script>
</body>
</html>
十、For...In声明
For...In声明用来遍历数组或者对象属性（其实我个人觉得也就是foreach语句），这个在shell中也是有涉及的。
语法：
for (变量 in 对象)
{
在此执行代码
}
<html>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
</body>
</html>
十一、事件
我们已经基本了解了JavaScript，但是要发挥它的作用，事件肯定是少不了的。JavaScript使我们有能力创建动态页面，事件是可以被JavaScript侦测到的行为。
1、onload和onUnload
当用户进入或离开页面时就会触发onload和onUnload事件。onload事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。
onload和onUnload事件也常用来处理用户进入或离开时所创建的cookies。
2、onFocus,onBlur和onChange
onFoucus、onBlur和onChange事件通常相互配合来验证表单。
3、onSubmit
onSubmit用于提交表单之前验证的所有的表单域。
4、onMouseOver和onMouseOut
十二、Try...Catch语句
学习编程语言一般后半部分就是文件和错误处理机制。这里也是一样的。
语法：
try
{
//在此运行代码
}
catch(err)
{
//在此处理错误
}
<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
{
adddlert("Welcome guest!")
}
catch(err)
{
txt="此页面存在一个错误。\n\n"
txt+="错误描述: " + err.description + "\n\n"
txt+="点击OK继续。\n\n"
alert(txt)
}
}
</script>
</head>
<body>
<input type="button" value="View message" οnclick="message()" />
</body>
</html>
十三、Throw声明
那么既然都有了try...catch，肯定有throw，作用是创建exception
<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","")
try
{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
}
catch(er)
{
if(er=="Err1")
alert("Error! The value is too high")
if(er == "Err2")
alert("Error! The value is too low")
}
</script>
</body>
</html>
十四、onerror事件
使用onerror事件是一种老式的标准的在网页中捕获JavaScript错误的方法。
语法：
οnerrοr=handleErrfunction handleErr(msg,url,l)
{
//Handle the error here
return true or false
}
<html>
<head>
<script type="text/javascript">
οnerrοr=handleErr
var txt=""
function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n"
txt+="Error: " + msg + "\n"
txt+="URL: " + url + "\n"
txt+="Line: " + l + "\n\n"
txt+="Click OK to continue.\n\n"
alert(txt)
return true
}
function message()
{
adddlert("Welcome guest!")
}
</script>
</head>
<body>
<input type="button" value="View message" οnclick="message()" />
</body>
</html>
十五、特殊字符
有些时候我们需要插入特殊字符，虽然C语言也一致，但是这里我们复习一下：
| 代码 | 输出 |
|---|---|
| ' | 单引号 |
| " | 双引号 |
| & | 和号 |
| \ | 反斜杠 |
| \n | 换行符 |
| \r | 回车符 |
| \t | 制表符 |
| \b | 退格符 |
| \f | 换页符 |
十六、对象
如果你学习过java，那么一定知道刚开始也是基础语法，后面就到了对象部分，这里也是一样的，因为JavaScript也是面向对象的编程语言。
而在面向对象学习中，我们肯定会接触各种封装好的对象，例如字符串对象、数组等等。
十七、字符串（String)对象
我们学习字符串对象，其实大多数时候学习的是其中的方法，这里和java是对应的。例如求长度可以直接.length，得到下标可以有indexOf()。但是又有新的方式。例如match()方法用来查找字符串中特定的字符，返回值为字符。
replace方法在字符串中用某些字符替换字符，当然，有很多，具体的也和java一样提供了对象参考手册，大家可以查看。
十八、Date（日期）对象
有getTime()、setFullYear（）、toUTCString()、getDay()等方法。
var myDate=new Date();
myDate.setFullYear(2008,8,9);
var today = new Date();
if (myDate>today)
{
alert("Today is before 14th January 2010");
}
else
{
alert("Today is after 14th January 2010");
}
十九、Array对象
当然array也有很多发方法，例如合并数组的concat()，用数组的元素组成字符串的-join()方法，排序的-sort()方法。
var mycars=new Array() mycars[0]="Saab" mycars[1]="Volvo" mycars[2]="BMW"
二十、Boolean逻辑对象
Boolean对象用于将非逻辑值转换为逻辑值（true或false）
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)
二十一、Math算数对象
我们有round()、random()、max()、min()等方法。
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
二十二、RegExp对象
RegExp对象用于规定在文本中检索的内容，是正则表达式的缩写。
1、定义RegExp对象用于存储检索模式
var patt1=new RegExp("e");
2、对象方法
RegExp对象有3个方法：test()、exec()以及compile()。
test方法检索字符串中的指定值，返回值是true或false。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
exec方法检索字符串中的指定值，返回值是被找到的值。如果没有发现匹配，则返回null。
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
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"));
二十三、DOM对象
除了内置的JavaScript对象外，还可以使用JavaScript访问并处理所有的HTML DOM对象。
更多的JavaScript对象还有：
| 对象 | 描述 |
|---|---|
| Window | JavaScript顶层中的顶层对象。Window对象会呈现一个浏览器窗口。每当<body>或者<frameset>标签出现，Window对象都会被自动创建 |
| Naviqator | 包含客户端浏览器的信息 |
| Screen | 包含客户端显示屏的信息 |
| History | 包含浏览器窗口访问过的URL |
| Location | 包含当前URL的信息 |
HTML DOM
| 对象 | 描述 |
|---|---|
| Document | 代表整个 HTML 文档，用来访问页面中的所有元素。 |
| Anchor | 代表 <a> 元素。 |
| Area | 代表图像地图中的 <area> 元素。 |
| Base | 代表 <base> 元素。 |
| Body | 代表图像地图中的 <body> 元素。 |
| Button | 代表 <button> 元素。 |
| Event | 代表事件的状态 |
| Form | 代表 <form> 元素 |
| Frame | 代表 <frame> 元素 |
| Frameset | 代表 <frameset> 元素 |
| Iframe | 代表 <iframe> 元素 |
| Image | 代表 <img> 元素 |
| Input button | 代表 HTML 表单中的按钮 |
| Input checkbox | 代表 HTML 表单中的选择框 |
| Input file | 代表 HTML 表单中的 fileupload 。 |
| Input hidden | 代表 HTML 表单中的隐藏域。 |
| Input password | 代表 HTML 表单中的密码域。 |
| Input radio | 代表 HTML 表单中的单选框。 |
| Input reset | 代表 HTML 表单中的重置按钮。 |
| Input submit | 代表 HTML 表单中的确认按钮。 |
| Input text | 代表 HTML 表单中的文本输入域。 |
| Link | 代表 <link> 元素 |
| Meta | 代表 <meta> 元素 |
| Object | 代表一个 <Object> 元素 |
| Option | 代表 <option> 元素 |
| Select | 代表 HTML 表单中的选择列表。 |
| Style | 代表某个单独的样式声明。 |
| Table | 代表 <table> 元素。 |
| TableData | 代表 <td> 元素。 |
| TableRow | 代表 <tr> 元素。 |
| Textarea | 代表 <textarea> 元素。 |
二十四、浏览器检测
我们上面看到Navigator对象，我们只需要使用这个对象就可以检测浏览器的信息。
<html>
<body>
<script type="text/javascript">
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
document.write("Browser name: "+ browser)
document.write("<br />")
document.write("Browser version: "+ version)
</script>
</body>
</html
二十五、Cookies
cookie用来识别用户。它是存储于访问者的计算机中的变量，每当同一台计算机通过浏览器请求某个页面时，就会发送这个cookie。可以使用JavaScript来创建和取回cookie的值。
创建存储cookie
<html>
<head>
<script type="text/javascript">
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 ""
}
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())
}
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>
二十六、表单验证
1、表单验证
<html>
<head>
<script type="text/javascript">
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}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" οnsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
E-mail验证
<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"οnsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
二十七、动画
我们使用JavaScript可以创建动态的图像，窍门是：通过不同的事件来切换图像。例如：
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.b1.src ="/i/eg_mouse2.jpg"
}
</script>
</head>
<body>
<a href="http://www.w3school.com.cn" target="_blank">
<img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()" />
</a>
</body>
</html>
二十八、图像地图
图像地图是值带有可点击区域的图像。
例如：
html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>
<body>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onMouseOver="writeText('The Sun and the gas giant
planets like Jupiter are by far the largest objects
in our Solar System.')"
href ="sun.htm" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="90,58,3"
onMouseOver="writeText('The planet Mercury is very
difficult to study from the Earth because it is
always so close to the Sun.')"
href ="mercur.htm" target ="_blank" alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
onMouseOver="writeText('Until the 1960s, Venus was
often considered a twin sister to the Earth because
Venus is the nearest planet to us, and because the
two planets seem to share many characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>
<p id="desc"></p>
</body>
</html>
二十九、计时
通过使用JavaScript，我们有能力做到一个设定的时间间隔之后执行代码，而不是在函数被调用后立即执行，我们称为计时事件。
两个关键方法，一个是setTimeout()（未来的某时执行代码），另一个是clearTimeout()（取消setTimeout)
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
</body>
</html>
三十、创建自己的对象
当然，我们肯定可以创建自己的对象，访问对象的方法也和java一致。例如创建一个对象如下：
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
}
后记与展望：
我结合了C语言和JAVA语言学习的经验来讲解，如果有基础很快就会入门了，后面对象部分有大量的代码，不要慌（哈哈哈），仔细看看是很简单的。
到了这里基本的页面我们已经没有问题了，但是要深入学习的话，可以去了解HTML DOM、DHTML、ASP。
那么HTML+CSS+JS系列就到此为止了哦，如果有帮助的话，点个赞呀。