JavaScript笔记
Javascript
JavaScript调式：
IE 工具Internet 选项高级禁用脚本调试（Internet Explorer）不选中；显示每个脚本错误的通知（选中）
其它程序的调试：（1）打印（alter针对JavaScript），（2）删一段改一段
一、1、程序开发分为客户端、服务器端
客户端开发的好处 减少客户端到服务器端的往返。 表单验证
服务器端开发的好处 web应用的核心逻辑集中管理
胖客户端、瘦客户端
2、客户端编程的主要技术
javascript（最主要的）；vbscript；jscript；applet；activex组件
plug-in技术（价值在于：让专家级程序员开发新型语言）
3、JavaScript (ECMAScript)
基础语法；DOM（Document Object Model）；BOM（Brower Object Model）
4、 一个完整的JavaScript实现是由以下3个不同部分组成的：
核心（ECMAScript）；文档对象模型（DOM）； 浏览器对象模型（BOM）
5、JavaScript和Java的区别
（1）基于对象和面向对象 ；（2）解释和编译 ；（3）强变量和弱变量
JavaScript中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型（x=1234; //数值型变量 y＝“4321”; //字符型变量）
（4）代码格式不一样 （5）嵌入方式不一样
6、在网页中加入JavaScript
通过在网页中加入<Script>…</Script>标记JavaScript的开始和结束，JavaScript代码放到<Script type="text/javascript" >…</Script>之间或<Script language=”javascript" >…</Script>
也可以引入一个外部的JavaScript文件，这个JavaScript文件一般以.js作为扩展名<Script language=”javascript" src=”filename.js” >…</Script>
原则上，放在<head></head>之间。但视情况可以放在网页的任何部分
一个页面可以有几个<Script>…</Script，不同部分的方法和变量，可以共享。
7、JavaScript的数据类型
The primary (primitive) data types are: String ；Number ；Boolean
The composite (reference) data types are: Object ；Array
The special data types are: Null ；Undefined (var a;)
8、控制字符
JavaScript中有些以反斜杠（\）开头的不可显示的特殊字符。通常称为控制字符。
\b :表示退格符；\f :表示换页；\n :表示换行符；\r :表示回车符。
\t :表示Tab符号；\' :表示单引号本身；\" :表示双引号本身。
9、类型转换
Operation Result
Add a number and a string The number is coerced into a string.
Add a Boolean and a string The Boolean is coerced into a string.
Add a number and a Boolean The Boolean is coerced into a number.
10、JavaScript基本语法
变量
JavaScript是一门弱类型的语言，所有的变量定义均以var来实现
JavaScript的变量建议先定义，再使用
JavaScript区分大小写
虽然JavaScript可以不需定义即可直接使用变量，但不建议这么做
数组定义 var arr = new Array(3); 通过arr.length取得数组的长度
注释的写法－－》和java的一样
11、数组（未定义的值显示为 undefined）
使用方式： myarray=new Array(num) 或 myarray=new Array(value1,value2…)
num不设定，则按数组默认的最大长度自动设定。若数组为空显示为0；
二．1、JavaScript基本语法—运算符
算术运算 +、-、*、/ >、<、=、>=、<=、==
逻辑运算 与：&& 或：|| 非：!
字符串运算符 连接运算：+
取子集：substring(index1,index2) (第index1个字符取到第index2个字符)
字符搜索indexOf[charactor,fromIndex]
条件表达式 条件?A:B
substring 方法
返回位于String对象中指定位置的子字符串。
strVariable.substring(start,end) 或 "String Literal".substring(start,end)
参数 Start 指明子字符串的起始位置，该索引从 0 开始起算。
End 指明子字符串的结束位置，该索引从 0 开始起算。
说明 substring方法将返回一个包含从start到最后（不包含end）的子字符串的字符串。
substring方法使用start和end两者中的较小值作为子字符串的起始点。例如，strvar.substring(0, 3)和strvar.substring(3, 0)将返回相同的子字符串。
如果start或end为NaN或者负数，那么将其替换为0。
子字符串的长度等于start和end之差的绝对值。例如，在strvar.substring(0, 3)和strvar.substring(3, 0)返回的子字符串的的长度是 3。
2、JavaScript基本语法—控制语句
if语句 i f(条件) else if(条件1) else…
switch 语句 switch(i) case i1:… casei2:… default:…
for do…while while(条件)…
3、JavaScript内置类型
typeof 返回值有六种可能： "number," "string," "boolean," "object," "function," 和 "undefined."
4、字符串对象
属性：length
方法：字体控制： big() blink() bold() fixed() fontcolor(color) fontsize(size) Italics() small() anchor()
字符串：toLowCase() toUpperCase() indexOf(char,fromIndex) substring(start,end)
<script language=javascript>
var strVariable = "This is a string object";
strVariable = strVariable.big().big().big().big().big().big().big().big().big();
strVariable = strVariable.bold();
strVariable = strVariable.link("http://www.microsoft.com");
document.write(strVariable);
</script>
<BR>This is a string object
5、Math对象 常用方法：
abs() 绝对值；sin() , cos() 正弦余弦值；asin() , acos() 反正弦反余弦
tan() , atan() 正切反正切；round() 四舍五入；sqrt() 平方根；pow(x,y) x的y次方
6、Date对象 创建方式： myDate = new Date();
日期起始值:１9７０年１月１日００:００:００
getYear(): 返回年数 setYear(): 设置年数
getMonth(): 返回月数 setMonth():设置月数
getDate(): 返回日数 setDate():设置日数
getDay(): 返回星期几 setDay():设置星期数
getHours():返回小时数 setHours():设置小时数
getMinutes():返回分钟数setMintes():设置分钟数
getSeconds():返回秒数 setSeconds():设置秒数
getTime() : 返回毫秒数 setTime() :设置毫秒数
8、 JavaScript基本语法—函数
（1）利用function来定义一个函数 ；（2）传入参数 （3）传出值 用return，不用写返回值类型
9、 JavaScript事件处理
onFocus：在用户为了输入而选择select、text、textarea等时
onBlur：在select、text、password、textarea失去焦点时
onChange：在select、text、textarea的值被改变且失去焦点时 onchange="alert('ok')"
onClick：在一个对象被鼠标点中时（button,checkbox,radio,link,reset,submit,text,textarea等）
onLoad：出现在一个文档完成对一个窗口的载入时（一般写在body中）
onUnload：当用户退出一个文档时
onMouseOver：鼠标被移动到一个对象上时
onMouseOut：鼠标从一个对象上移开时
onSelect：当form对象中的内容被选中时
onSubmit：出现在用户通过提交按钮提交一个表单时
onsubmit="return true;" 程序进行提交 onsubmit="return false;" 程序禁止提交
10、JavaScript的对话框
警告框(alert)：出现一个提示信息；
询问框(prompt)：返回输入的值；var username=prompt（” 请输入你的名字”）
确认框(confirm)：根据不同的选择，返回true/false （确定—true；取消—false）
11、使用eval
不使用eval alert ("3"+"2"); --〉32
使用eval的上下文环境 alert (eval("3") + eval("2")); --〉5
eval()函数可以把一个字符串当作一个JavaScript表达式一样去执行它
12、javascript hijacking
函数劫持
通过替换js函数的实现来达到劫持这个函数调用的目的
13、对象
this 指的是当前的对象（标签）
for…in In后跟一个对象，对此对象中的所有元素循环一次
<script language="javascript">
var arr = new Array("java","asp","jsp","servelent");
for(eee in arr){
document.write(eee+"----");
document.write(arr[eee]+"<br>");
}
</script>
with 为一段代码建立一个缺省的对象，任何无对象的属性引用，都将使用该缺省的对象
with(document){
write("i"+"<br>");
write("love"+"<Br>");
write("rr"+"<br>");
}
new 用于生成一个新的对象
14、Try…Catch…
try {
document.writeln("Beginnng the try block")
document.writeln("No exceptions yet") // Create a syntax error
eval("6 + * 3")
document.writeln("Finished the try block with no exceptions")
} catch(err) {
document.writeln("Exception caught, ")
document.writeln("Error name: " + err.name)
document.writeln("Error message: " + err.message)
}
15、窗口中的对象和元素(BOM) Browser Object Model
window 当前窗口window.status=" ";；
新开窗口var win = window.open()；通过本地窗口控制新开窗口win.close();
location 获取或设置现有文档的URL(window.location或window.location="../01.html";
document.location)
history 先前访问过的URL的历史列表；history.back();常用方法：back()，go(number)
document 当前的文档对象 document.write()：向客户端浏览器输出内容；document.formName：可以用这个方法得到表单名称；document.referrer
16、技巧：setTimeout,setInterval
<script language=javascript>
//var a = window.setInterval("alert('Hello, world')", 2000);
var a = window.setTimeout("alert('Hello, world')", 2000); (递归调用)
</script>
<input type=button value="停止" onclick=clearTimeout(a);>
在Input后加入<div id= "usernameError"></div>或<span id="usernameError"></span>在检查程序中插入document.getElementById("usernameError").innerHTML="<font color='red'>请输入正确的用户名,用户名长度为3-18位！</font>";
innerHTML表示在<div></div> 标签之中插入信息
趣味JavaScript程序
黑客帝国(ex1/matrix.htm)
鼠标跟随(ex2/mouseTrace.htm)
找相同图片游戏(ex1/game/game.htm)
飘浮的云(ex1/floating.htm)
打字效果(ex1/printer.htm)
TicTacToe游戏(ex1/tictactoe.htm)
星球大战(ex1/starcraft/)
实用JavaScript程序
图片下拉列表(ex2/DropDown/)
相互关联的列表(ex2/relative.htm)
抽屉式菜单(ex2/drawer.htm)
滑入式菜单（ex2/slip.htm）
滚动下拉菜单 (ex2/pulldown.htm)
日历(ex2/calendar)
输入判断js函数(ex2/pd.*)
window.open教程(window.open.htm)
确实要删除该条记录吗
<script language="javascript">
function a_onclick() {
var cv
cv=window.confirm('确实要删除该条记录吗?')
if(cv==true){return true}
else{return false}
}
</script>
程序优化
function a_onclick_new() {
event.returnValue=window.confirm('确实要删除该条记录吗?')
}
学习HTML / CSS / JavaScript的方法
Alert() 重点掌握表单输入的判断
prototype.js是由Sam Stephenson写的一个javascript类库
Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.
《不可多得的Javascript(AJAX)开发工具 － Aptana》
内针
<html>
<head><title></title></head>
<body>
<table width=500 alige=”center” border=1>
<tr><td><iframe name=”i” width=”100%” height=”100” src=”01.html”/></td></tr>
</table>
</body>
</html>
JavaScript调式：
IE 工具Internet 选项高级禁用脚本调试（Internet Explorer）不选中；显示每个脚本错误的通知（选中）
其它程序的调试：（1）打印（alter针对JavaScript），（2）删一段改一段
一、1、程序开发分为客户端、服务器端
客户端开发的好处 减少客户端到服务器端的往返。 表单验证
服务器端开发的好处 web应用的核心逻辑集中管理
胖客户端、瘦客户端
2、客户端编程的主要技术
javascript（最主要的）；vbscript；jscript；applet；activex组件
plug-in技术（价值在于：让专家级程序员开发新型语言）
3、JavaScript (ECMAScript)
基础语法；DOM（Document Object Model）；BOM（Brower Object Model）
4、 一个完整的JavaScript实现是由以下3个不同部分组成的：
核心（ECMAScript）；文档对象模型（DOM）； 浏览器对象模型（BOM）
5、JavaScript和Java的区别
（1）基于对象和面向对象 ；（2）解释和编译 ；（3）强变量和弱变量
JavaScript中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型（x=1234; //数值型变量 y＝“4321”; //字符型变量）
（4）代码格式不一样 （5）嵌入方式不一样
6、在网页中加入JavaScript
通过在网页中加入<Script>…</Script>标记JavaScript的开始和结束，JavaScript代码放到<Script type="text/javascript" >…</Script>之间或<Script language=”javascript" >…</Script>
也可以引入一个外部的JavaScript文件，这个JavaScript文件一般以.js作为扩展名<Script language=”javascript" src=”filename.js” >…</Script>
原则上，放在<head></head>之间。但视情况可以放在网页的任何部分
一个页面可以有几个<Script>…</Script，不同部分的方法和变量，可以共享。
7、JavaScript的数据类型
The primary (primitive) data types are: String ；Number ；Boolean
The composite (reference) data types are: Object ；Array
The special data types are: Null ；Undefined (var a;)
8、控制字符
JavaScript中有些以反斜杠（\）开头的不可显示的特殊字符。通常称为控制字符。
\b :表示退格符；\f :表示换页；\n :表示换行符；\r :表示回车符。
\t :表示Tab符号；\' :表示单引号本身；\" :表示双引号本身。
9、类型转换
Operation Result
Add a number and a string The number is coerced into a string.
Add a Boolean and a string The Boolean is coerced into a string.
Add a number and a Boolean The Boolean is coerced into a number.
10、JavaScript基本语法
变量
JavaScript是一门弱类型的语言，所有的变量定义均以var来实现
JavaScript的变量建议先定义，再使用
JavaScript区分大小写
虽然JavaScript可以不需定义即可直接使用变量，但不建议这么做
数组定义 var arr = new Array(3); 通过arr.length取得数组的长度
注释的写法－－》和java的一样
11、数组（未定义的值显示为 undefined）
使用方式： myarray=new Array(num) 或 myarray=new Array(value1,value2…)
num不设定，则按数组默认的最大长度自动设定。若数组为空显示为0；
二．1、JavaScript基本语法—运算符
算术运算 +、-、*、/ >、<、=、>=、<=、==
逻辑运算 与：&& 或：|| 非：!
字符串运算符 连接运算：+
取子集：substring(index1,index2) (第index1个字符取到第index2个字符)
字符搜索indexOf[charactor,fromIndex]
条件表达式 条件?A:B
substring 方法
返回位于String对象中指定位置的子字符串。
strVariable.substring(start,end) 或 "String Literal".substring(start,end)
参数 Start 指明子字符串的起始位置，该索引从 0 开始起算。
End 指明子字符串的结束位置，该索引从 0 开始起算。
说明 substring方法将返回一个包含从start到最后（不包含end）的子字符串的字符串。
substring方法使用start和end两者中的较小值作为子字符串的起始点。例如，strvar.substring(0, 3)和strvar.substring(3, 0)将返回相同的子字符串。
如果start或end为NaN或者负数，那么将其替换为0。
子字符串的长度等于start和end之差的绝对值。例如，在strvar.substring(0, 3)和strvar.substring(3, 0)返回的子字符串的的长度是 3。
2、JavaScript基本语法—控制语句
if语句 i f(条件) else if(条件1) else…
switch 语句 switch(i) case i1:… casei2:… default:…
for do…while while(条件)…
3、JavaScript内置类型
typeof 返回值有六种可能： "number," "string," "boolean," "object," "function," 和 "undefined."
4、字符串对象
属性：length
方法：字体控制： big() blink() bold() fixed() fontcolor(color) fontsize(size) Italics() small() anchor()
字符串：toLowCase() toUpperCase() indexOf(char,fromIndex) substring(start,end)
<script language=javascript>
var strVariable = "This is a string object";
strVariable = strVariable.big().big().big().big().big().big().big().big().big();
strVariable = strVariable.bold();
strVariable = strVariable.link("http://www.microsoft.com");
document.write(strVariable);
</script>
<BR>This is a string object
5、Math对象 常用方法：
abs() 绝对值；sin() , cos() 正弦余弦值；asin() , acos() 反正弦反余弦
tan() , atan() 正切反正切；round() 四舍五入；sqrt() 平方根；pow(x,y) x的y次方
6、Date对象 创建方式： myDate = new Date();
日期起始值:１9７０年１月１日００:００:００
getYear(): 返回年数 setYear(): 设置年数
getMonth(): 返回月数 setMonth():设置月数
getDate(): 返回日数 setDate():设置日数
getDay(): 返回星期几 setDay():设置星期数
getHours():返回小时数 setHours():设置小时数
getMinutes():返回分钟数setMintes():设置分钟数
getSeconds():返回秒数 setSeconds():设置秒数
getTime() : 返回毫秒数 setTime() :设置毫秒数
8、 JavaScript基本语法—函数
（1）利用function来定义一个函数 ；（2）传入参数 （3）传出值 用return，不用写返回值类型
9、 JavaScript事件处理
onFocus：在用户为了输入而选择select、text、textarea等时
onBlur：在select、text、password、textarea失去焦点时
onChange：在select、text、textarea的值被改变且失去焦点时 onchange="alert('ok')"
onClick：在一个对象被鼠标点中时（button,checkbox,radio,link,reset,submit,text,textarea等）
onLoad：出现在一个文档完成对一个窗口的载入时（一般写在body中）
onUnload：当用户退出一个文档时
onMouseOver：鼠标被移动到一个对象上时
onMouseOut：鼠标从一个对象上移开时
onSelect：当form对象中的内容被选中时
onSubmit：出现在用户通过提交按钮提交一个表单时
onsubmit="return true;" 程序进行提交 onsubmit="return false;" 程序禁止提交
10、JavaScript的对话框
警告框(alert)：出现一个提示信息；
询问框(prompt)：返回输入的值；var username=prompt（” 请输入你的名字”）
确认框(confirm)：根据不同的选择，返回true/false （确定—true；取消—false）
11、使用eval
不使用eval alert ("3"+"2"); --〉32
使用eval的上下文环境 alert (eval("3") + eval("2")); --〉5
eval()函数可以把一个字符串当作一个JavaScript表达式一样去执行它
12、javascript hijacking
函数劫持
通过替换js函数的实现来达到劫持这个函数调用的目的
13、对象
this 指的是当前的对象（标签）
for…in In后跟一个对象，对此对象中的所有元素循环一次
<script language="javascript">
var arr = new Array("java","asp","jsp","servelent");
for(eee in arr){
document.write(eee+"----");
document.write(arr[eee]+"<br>");
}
</script>
with 为一段代码建立一个缺省的对象，任何无对象的属性引用，都将使用该缺省的对象
with(document){
write("i"+"<br>");
write("love"+"<Br>");
write("rr"+"<br>");
}
new 用于生成一个新的对象
14、Try…Catch…
try {
document.writeln("Beginnng the try block")
document.writeln("No exceptions yet") // Create a syntax error
eval("6 + * 3")
document.writeln("Finished the try block with no exceptions")
} catch(err) {
document.writeln("Exception caught, ")
document.writeln("Error name: " + err.name)
document.writeln("Error message: " + err.message)
}
15、窗口中的对象和元素(BOM) Browser Object Model
window 当前窗口window.status=" ";；
新开窗口var win = window.open()；通过本地窗口控制新开窗口win.close();
location 获取或设置现有文档的URL(window.location或window.location="../01.html";
document.location)
history 先前访问过的URL的历史列表；history.back();常用方法：back()，go(number)
document 当前的文档对象 document.write()：向客户端浏览器输出内容；document.formName：可以用这个方法得到表单名称；document.referrer
16、技巧：setTimeout,setInterval
<script language=javascript>
//var a = window.setInterval("alert('Hello, world')", 2000);
var a = window.setTimeout("alert('Hello, world')", 2000); (递归调用)
</script>
<input type=button value="停止" onclick=clearTimeout(a);>
在Input后加入<div id= "usernameError"></div>或<span id="usernameError"></span>在检查程序中插入document.getElementById("usernameError").innerHTML="<font color='red'>请输入正确的用户名,用户名长度为3-18位！</font>";
innerHTML表示在<div></div> 标签之中插入信息
趣味JavaScript程序
黑客帝国(ex1/matrix.htm)
鼠标跟随(ex2/mouseTrace.htm)
找相同图片游戏(ex1/game/game.htm)
飘浮的云(ex1/floating.htm)
打字效果(ex1/printer.htm)
TicTacToe游戏(ex1/tictactoe.htm)
星球大战(ex1/starcraft/)
实用JavaScript程序
图片下拉列表(ex2/DropDown/)
相互关联的列表(ex2/relative.htm)
抽屉式菜单(ex2/drawer.htm)
滑入式菜单（ex2/slip.htm）
滚动下拉菜单 (ex2/pulldown.htm)
日历(ex2/calendar)
输入判断js函数(ex2/pd.*)
window.open教程(window.open.htm)
确实要删除该条记录吗
<script language="javascript">
function a_onclick() {
var cv
cv=window.confirm('确实要删除该条记录吗?')
if(cv==true){return true}
else{return false}
}
</script>
程序优化
function a_onclick_new() {
event.returnValue=window.confirm('确实要删除该条记录吗?')
}
学习HTML / CSS / JavaScript的方法
Alert() 重点掌握表单输入的判断
prototype.js是由Sam Stephenson写的一个javascript类库
Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.
《不可多得的Javascript(AJAX)开发工具 － Aptana》
内针
<html>
<head><title></title></head>
<body>
<table width=500 alige=”center” border=1>
<tr><td><iframe name=”i” width=”100%” height=”100” src=”01.html”/></td></tr>
</table>
</body>
</html>