“”是说明语句的结束，该说明语句使不支持JavaScript的浏览器把看成说明JavaScript语句，相当于把其中的JavaScript语句看成文本，不做处理，而支持JavaScript的浏览器则忽略该说明标志，并处理其中的JavaScript语句。
如：<script language=”javaScript”> <!-- Begin hide javascript > document.write(“Hello world!”); </script>
SRC 属性是另一种在HTML中放入javaScript代码的方法，如下
<script language=”javascript” SRC=”file name.js”> </script>
扩展名必须是js。相当于是一个函数整体，是独立的js文件，
Js中注释
// 表示注释单行
/* ......*/ 表示注释其中间部分
定义变量 可在文档头部分先定义要使用的变量，因为文档头在文档主体之前执行，可以保证变量先定义后使用。如下：
<html>
<head>
<script language="javascript" > greeting="var test"; </script>
</head>
<body>
<script language="javascript" > document.write(greeting); </script>
</body>
</html>
JS 是弱类型语言，使用变量可以不指定类型，系统可以自动识别进行类型转换。
对于字符串，可以用单引号或双引号，但必须成对出现，如果要在单引号字符串中使用单引号，必须在前面添加\ 作为转义符号，或如果要在双引号字符串中使用双引号，必须在前面添加\ 作为转义符号，然而，在双引号字符串中使用单引号或在单引号中使用双引号则不必添加\作为转义符号。
Js中几个显式类型转换函数：
eval 将字符串表达式的值转换成数字，如果字符串的值非数字，将回出现错误。
ParseInt 将字符串的值转换为整数，与eval不同，ParseInt返回字符串中的第一个整数，如果字符串不已数字开头则返回0，如ParseInt(“123xyz”)返回123
ParseFloat 将字符串的值转换为浮点数，类似于ParseInt。
数组：
声明： myArray=new Array[];
其属性Lengh 表示数组的长度。
函数：最好放在文档头中，确保先定义后调用。
Function function name(p1,p2 ....)
{ statement ;}
Return 语句用于返回函数处理的结果值。
For In 语句
和for 一样，重复执行一组语句，但 又和FOR 不同，他不是根据循环条件，而是根据对象定义的属性来执行该语句。例如 有employee 对象，他有name id location 三个属性，执行
for (prop in employee)
{
document.write(prop + “<BR>”);
}
其输出为
name
id
location
JS事件
<html>
<head>
<title> Use Function as enent handlers</title>
<script language="javascript" > greeting="var test"; function confirmLink(){ alert("test") if(confirm("are you ten years old or young")){ window.location="http://www.sina.com.cn"} } </script>
</head>
<body>
<P>
<A HREF="somewhere" onclick="return false" ONMOUSEOVER="confirmLink()">Confirms if you want to.</A>
</P>
</body>
</html>
onclick事件返回一个布耳值，TRUE OR FALSE。
<html>
<head>
<title>Test Document1</title>
<script language="javascript" > greeting="var test"; function gotFocus(){ document.bgColor="#FFFFFF" } function lostFocus(){ document.bgColor="#FF0000" } </script>
</head>
<body onFocus="gotFocus()" onBlur="lostFocus()" BGCOLOR="#FFFFFF">
<h1>Document1 </h1>
</body>
</html>
onBlur 事件在窗口失去焦点后触发。
图形处理事件
<html>
<head>
<title>Test IMG1</title>
<script language="javascript" > greeting="var test"; function imageLoaded(){ document.bgColor="#FFFFFF" window.defaultStatus="has been loaded." } function imageAborted(){ alert("Hi! You just aborted the loading of the last image!") } function imageError(){ alert("Error loading image!") } </script>
</head>
<body>
<h1>Image Event Handling </h1>
<p>An image is loaded after this paragraph.</p>
<IMG SRC="image1.gif" onLoad="imageLoaded()" onAbort="imageAborted()" onError="imageError()">
</body>
</html>
文本
<html>
<head>
<title>Text Field and Text Area Events</title>
<script language="javaScript"> function nameSelect(){ if (isBlank(""+ document.contest.last.value)){ document.contest.last.value="Surname"; document.contest.last.focus(); document.contest.last.select(); } } function isBlank(s){ var len=s.length var i for(i=0;i<len;++i){ if(s.charAt(i)!=" ") return false } return true } function validate(fieldName,fieldValue){ if(isBlank(fieldValue)){ alert(fieldName+"can not be blank.") return false } return true } function validateForm(){ if(!validate("the last field ",document.contest.last.value)) return false if(!validate("the email field ",document.contest.email.value)) return false if(!validate("the essay field ",document.contest.essay.value)) return false } </script>
</head>
<body>
<form name="contest" onSubmit="validateForm();">
<H2 align="center"> Contest Application </h2>
<p> last name:
<input type="text" name="last" size="16" onChange="nameSelect()">
first name:
<input type="text" name="first" size="12">
Middle initial:
<input type="text" name="initial" size="12"></p>
<p>E-mailAddress:
<input type="text" name="email" size="32" >
</p>
<p>In 50 words or less, state why you should win the context: </p>
<textarea name="essay" rows="5" cols="40" onChange="validateEssay()">
</textarea>
<p>Submit your winning entry:
<input type="Submit" name="go" value="Make me a winner"><p>
</Form>
</body>
<html>
单选 复选
<html>
<head>
<title> Button and Check Events</title>
<script language="javascript"> function showResult(){ var resultMsg="" if(document.survey.age[0].checked)resultMsg+="under30," if(document.survey.age[1].checked)resultMsg+="between 30 to 60," if(document.survey.age[2].checked)resultMsg+="over 60," if(document.survey.sex[0].checked)resultMsg+="male," if(document.survey.sex[1].checked)resultMsg+="female," if(document.survey.reading.checked)resultMsg+="reading," if(document.survey.eating.checked)resultMsg+="eating," if(document.survey.sleeping.checked)resultMsg+="sleeping," document.survey.result.value=resultMsg } function upperCaseResult(){ var newResult=document.survey.result.value document.survey.result.value=newResult.toUpperCase() } </script>
</head>
<body>
<form name="survey">
<h2 align="center">Survey Form</h2>
<p><b>Age:</b>
<input type="radio" name="age" value="under 30" onclick="showResult()">Under 30
<input type="radio" name="age" value="30to60" onclick="showResult()">30-60
<input type="radio" name="age" value="over60" onclick="showResult()">over 60</p>
<p><b>Sex:</b>
<input type="radio" name="sex" value="male" onclick="showResult()">male
<input type="radio" name="sex" value="female" onclick="showResult()">female</p>
<p><b>Interests:</b>
<input type="checkbox" name="reading" value="reading" onclick="showResult()">reading
<input type="checkbox" name="eating" value="eating" onclick="showResult()">eating
<input type="checkbox" name="sleeping" value="sleeping" onclick="showResult()">sleeping </p>
<p>
<input type="button" name="makeUpper" value="To Upper Case" onclick="upperCaseResult()"></p>
<p><b>Result:</b><input type="text" name="result" size="50"></p>
<input type="submit" name="submit" value="Submit" onclick="return confirm('Sure?')">
<input type="reset" name="reset" value="Reset" onclick="return confirm('Sure?')">
</form>
</body>
</html>
列表框
<HTML>
<HEAD>
<TITLE> Handling Selection List Events </TITLE>
<script language="javascript"> function updateOrder(){ var orderString="" var n=document.diner.entries.length for(i=0;i<n;++i){ if(document.diner.entries.options[i].selected){ orderString+=document.diner.entries.options[i].value+"\n" } } document.diner.summery.value=orderString } </script>
</HEAD>
<BODY>
<form name="diner">
<h2 align="center">The Web Diner</h2>
<p><b>Place your order:</b></p>
<select name="entries" size="6" multiple="multiple" onchange="updateOrder()">
<option value="hot dog">hot dog</option>
<option value="hot dog1">hot dog1</option>
<option value="hot dog2">hot dog2</option>
<option value="hot dog3">hot dog3</option>
<option value="hot dog4">hot dog4</option>
<option value="hot dog5">hot dog5</option>
<option value="hot dog6">hot dog6</option>
<option value="hot dog7">hot dog7</option>
<option value="hot dog8">hot dog8</option>
<option value="hot dog9">hot dog9</option>
</select>
<p><b>Yor Ordered:</b></p>
<p><textarea name="summery" rows="4" cols="20"></textarea></p>
<p><input type="submit" name="order" value="Let me have it!"></p>
</form>
</BODY>
</HTML>
字符串
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<h1>Use the string</h>
<script language="javaScript"> function displayParagraph(text){ document.write("<p>" + text +"</p>") } displayParagraph("this is big".big()) displayParagraph("this is small".small()) displayParagraph("this is small".fontsize('6')) displayParagraph("this is small".fontcolor('#123eee')) displayParagraph("this is small".link('http:\//www.sina.com.cn')) </script>
</BODY>
</HTML>
<li> <a href=\"#originator\">Your Response section (Originator)</a> 网页内部链接，即定位到网页内制定位置，前面的#不能少，注意。
Windows 对象
方法： alert
close
confirm
focus
open
prompt
setTimeout(表达式，时间间隔)，经过制定时间间隔后，对表达式求值，只执行一次
setInterval（表达式，时间间隔），经过制定时间间隔后，重复对表达式求值,会重复执行
clearTimeout(timer) 清除超时设置，注意后面的参数
clearInterval(timer) 清除超时设置，注意后面的参数
<HTML>
<HEAD>
<TITLE> Timer Demo </TITLE>
<script language="javascript"> function setTimer(){ timer1=setInterval("alert('Too slow!')",5000) } function clearTimer(){ clearInterval(timer1) alert("congratulations!") } </script>
</HEAD>
<BODY>
<script language="javascript"> setTimer() </script>
<form>
<input type="button" value="Click her within ten seconds" onclick="clearTimer(timer1)">
</form>
</BODY>
</HTML>
Form 对象
有两个方法，submit 和 reset分别用于提交和复位窗体对象的缺省值。
访问窗体元素：如可通过form.ssn.value来访问ssn 的值。
设置窗体的Method 属性用 Get 或post 来制定。
隐藏字段和 Cookie
隐藏字段不能用于持续保留，只能用于一次浏览对话期间，用户退出浏览器时，隐藏字段中包含的信息便丢失了。
Cookie 作为可持续保存状态和其他信息的方式，其保存的信息在不同的浏览器对话期间保存，直到用户关闭计算机。
使用链接
javaScript 协议：对JS 表达式求值，或装入具有表达式的页面，如果不能求出预定的值，则不能进入相关的页面。如javascript:Date()
About 协议：该协议提供内部浏览器信息的访问，装入当前浏览器的版本和其他信息。
Location 是窗口对象(window)的一个属性，如果修改了窗口中的location对象，则浏览器装如修改后的URL的所指示的文档。在document对象中不要使用该属性。
Location 对象有两个方法：reload 和replace，前者用于根据浏览器reload按钮定义的策略重新装如到窗口的当前文档。如果将TRUE 边元调用RELOAD 方法，则文档无条件的从WEB 服务器装入。
REPLACE 方法取URL 参数，从当前文档历史清单中装如URL， 并显示制定页面，以免用户单机浏览器BACK 按钮返回前一个文档。
LOCATION 对象无任何事件。
CharAt(index) 返回第 index 个字符，下标从0开始。
parent.frames[1].location.href=urlString //加载某个URL 地址
Link 对象
包装文档中包含的文本或图形的链接，属于document对象的属性。同时用string 对象的Iink也可以建立对象的链接。
Anchor对象（没弄明白）
该对象表示HTML文档中指定的偏移量的位置点，他是document对象的属性，anchor包含文档中的所有位置点。该对象没有属性、方法、也没有事件，仅用于跟踪HTML 文档而定义的指定偏移量。
History 对象
是document对象的属性，该对象没有事件，但 有一个LENGTH属性，它表示历史表的长度，有3个方法
back():装入历史表中的前一个页面，等效与单机浏览器上的back按钮
forward()：装入历史表中的下一个页面，等效与单机浏览器上的forword按钮
go()：进入历史表中的特定文档，可以去整形参数或字符串参数
go(n):当N 》0时，装入历史表中的往前数的第N个文档，N=0时，装如当前文档；否则装入历史表往后数的第N 个文档
GO（STRING）装入URL 字符串包含这个字符串的最接近的一个文档。
FrameSet对象 ROWS表示行 COLS表示列，如只有行，表示平铺，如只有列表示竖直排列，如有行有列则表示整个窗体分为4个部分，Frame里面可以嵌套
<FRAMESET ROWS="300,500" Cols="50%,50%" BORDER=5>
<FRAME SRC="url-form.htm">
<FRAME SRC="Selection List.html">
<FRAME SRC="Check Box.html">
<FRAME SRC="textarea.html">
</FRAMESET>
javascript:void
JavaScript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。
void 操作符用法格式如下：
1. javascript:void (expression)
2. javascript:void expression
expression 是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的，但是写上去是一个好习惯。
你可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何内容。
下面的代码创建了一个超级链接，当用户点击以后不会发生任何事。当用户点击链接时，void(0) 计算为 0，但在 JavaScript 上没有任何效果。
<A HREF="javascript:void(0)">单击此处什么也不会发生</A>
下面的代码创建了一个超级链接，用户单击时会提交表单。
<A HREF="javascript:void(document.form.submit())">单击此处提交表单</A>
＃ 包含了一个位置信息默认的锚点是＃top 也就是网页的上端,而javascript:void(0) 仅仅表示一个死链接.这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首,而javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0),或者<input onclick><div onclick>等.
void 运算符
避免表达式返回值。
void expression
expression 参数是任意有效的 JScript 表达式。
说明
void 运算符对表达式求值，并返回 undefined。在希望求表达式的值，但又不希望脚本的剩余部分看见这个结果时，该运算符最有用。
使用图形
IMAGE 对象，没有方法，有三个事件：ONERR() ONABORT() ONLOAD()，有BORDER COMPLETE HEIGHT WIDTH SRC 等常用属性。可以通过构造器显示的创建新的IMAGE对象类型，存放与缓存中。如：cacheImage=new Image()
cacheImage.src=”myImage.gif”
但是，用IMAGE（）构造器创建的图形不可以通过IMAGES数组访问。
算术对象
舍入函数：
round(): 返回最接近该浮点数的整数
floor() ：返回小于或等于该浮点数的最大整数
ceiling()：返回大于或等于该浮点数的最小整数
随机函数：
random()产生0和1之间的伪随机数。
MIME(Multipurpose Internet Mail Extensions):多功能Internet 邮件扩充服务，是一种多用途网际邮件扩充协议。
CSS：cascading style sheet 层叠样式表
简单例子：放在<head></head>之间
<style type="text/css"> <!-- body {font: 20pt "Arial";background-image: url("D:\Documents and Settings\user\My Documents\2.jpg");background-position:center; } h1 {font-size: large "Arial"; font-weight: bold; color: maroon} h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} p {font: 10pt/12pt "Arial"; color: black} --> </style>
可以使用类：
格式为： classes.className.tag.property=value
例如：
<style type="text/css"> <!-- classes.improtant.h1.fontsize=”36pt” --> </style>
<h1 class=”important”>This is a test class sample.</h1>
<SPAN>标志用于对所选文本采用的样式，可以用<span></span>标志包围要采用的样式的文本，然后用calss和id属性对文本采用样式。
外部定义样式：可以一次定义，多次使用，使用LINK 标志来使用外部文件中定义的样式。
<LINK REL=STYLESHEET TYPE=”TEXT/JAVASCRIPT” HREF=”外部样式名”>
REL表示为与链接对象的关系；TYPE表示所链接文件的MIME类型；HREF 表示包含样式定义的外部文件的URL
使用函数
<head>
<script language=”JavaScript”> <!-- function head() { document.write(“Hello”); } </script>
</head>
<body>
<script language=”JavaScript”> <!-- hello(); </script>
</body>
计划任务
<head>
<script> <!-- function hello() { window.alert(“Hello”); } window.setTimeout(“hello()”,5000); </script>
</head>
重复计划任务
function functionName() {
some JavaScript code
window.setTimeout(“functionName()”,schedule time);
}
window.setTimeout(“functionName()”,schedule time);
EG:
<head>
<script> <!-- function hello() { window.alert("Hello"); window.setTimeout("hello()",5000); } window.setTimeout("hello()",5000); </script>
</head>
取消计划任务
<head>
<script> <!-- function hello() { window.alert(“Hello”); } var myTimeout = window.setTimeout(“hello()”,5000); window.clearTimeout(myTimeout); </script>
</head>
在页面载入后执行函数
<head>
<script language=”JavaScript”> <!-- function bye() { window.alert(“Farewell”); } </script>
</head>
<body onUnload=”bye();”>
The page’s content.
</body>
格式化日期
<script language="javascript"> var thisDate = new Date(); var thisTimeString = thisDate.getHours(); thisDate.getMinutes(); var thisDateString = thisDate.getFullYear(); thisDate.getMonth() + "/"+ thisDate.getDate(); document.write(thisTimeString + "on"+ thisDateString); </script>
页面转向
<form>
Enter a URL: <input type="text" name="url">
<input type="button" value="GO" onClick="window.location = this.form.url.value">
</form>
载入其他页面
<html>
<head>
<title>Page Loading ...</title>
</head>
<body>
<strong>
Page Loading ... Please Wait
</strong>
</body>
</html>
<html>
<head>
<script language="javascript"> var placeHolder = window.open("holder.html","placeholder","width=200,height=200"); </script>
<title>The Main Page</title>
</head>
<body onLoad="placeHolder.close()">
<p>This is the main page</p>
</body>
</html>
Prompt 信息提示
<body>
<script language="JavaScript"> var userName = window.prompt("Please Enter Your Name","Enter Your Name Here"); document.write("Your Name is " + userName); </script>
</body>
有滚动条的窗口
<body>
<a href='#' onClick='window.open("http://www.baidu.com/","newWindow1","scrollbars=no,width=300,height=300");'>Click here</a> for a window without scrollbars
<p>
<a href='#' onClick='window.open("http://www.baidu.com/","newWindow2","scrollbars=yes,width=300,height=300");'>Click here</a> for a window with scrollbars
</body>
窗口是否可以改变大小
<body>
<a href='#' onClick='window.open("http://www.baidu.com/","newWindow1","resizable=no,width=300,height=300");'>Click here</a> for a window which cannot be resized
<p>
<a href='#' onClick='window.open("http://www.baidu.com/","newWindow2","resizable=yes,width=300,height=300");'>Click here</a> for a window which can be resized
</body>
在浏览器中载入一个新的文档
<body>
<a href="#" onClick="document.location = 'windowopen.html';">Open New Document</a>
</body>
全屏幕打开一个文档
<body>
<a href="#" onClick="window.open('http://www.juxta.com/','newWindow','fullScreen=yes');">Open a full-screen window</a>
</body>
