JS基础

Javascript 基础 
一、 变量 
var myBook; 

myBook=5; 
变量名要求以字母或 _ 打头，不能含有空格 

常见的类型有：字符串，数值，布尔和对象类型。 
var num=6 
b=(3>5) 

二、 表达式与操作符 
1、 比较操作符 
== != > < >= <= 
2、 运算操作符 
+ - * / % ++ -- 

3、 逻辑操作符 
&& || ! 
4、 位操作符 
& | ^（异或） ~ << >> >>>(填0右移操作符) 
5、 赋值操作符 
= 
+= -= *= /= 
&= |= ^= 
<<= >>= >>>= 

6、 其它操作符 
条件操作符：(条件)？值1：值2 a=5 b=6 c=(a>b)?a-b:a+b 
new操作符 var com=new Array(“Zhang”,”Li”,”wang”,”Chen”) 
delete 操作符 delete com[2] 
7、 
三、 语句 
1、 条件语句 
（1） if……else 
if (mark>60) 
s=”pass” 
else 
s=”fail” 
（2） switch 
switch（表达式){ 
case 标签1：代码块1；break; 
case 标签2：代码块2；break; 
………… 
case 标签n：代码块n；break; 
default: 缺省代码块； 
} 
（3） 
2、 循环语句 
（1） for 语句 
for（初始表达式，循环条件，递增表达式） 
{ 代码块 } 
（2） while 语句 
while（循环条件） 
{代码块} 
（3） do……while语句 
do{ 
代码块 
} while（循环条件） 

（4） label语句 
label：代码块 
（5） break语句 
跳出循环语句或 switch 
break label 跳出label标识的代码块 

（6） 
3、 其他语句 
（1） for……in语句 [forin.htm] 
for (变量 in 对象) { 
代码块 } 
（2） with（对象）{ 
代码块 } 
（3） 注释 
// 注释一行 /* */ 

（4） return 
4、 
四、 函数 
1、 函数的定义 
function 函数名（参数列表） 
{ 代码块 
} 

2、 函数的调用 
函数名（参数列表） 
3、 javascript 的全局函数 
（1） eval（字符串） 
执行该字符串 
（2） parseInt（字符串，基数） parseFloat（字符串） 
var s=”3.14” 
var j=parseInt(s) 
var k=parseFloat(s) 
parseInt(“1A”,16)=26 
（3） isNaN（表达式） ：不是数字 
（4） Number（对象）和 String（对象） 
Var n=new Number(20) 
document.write(n.toString(16)) 
（5） Escape（字符串）和unescape（字符串）将消息串格式转换为ASC码格式 
4、 方法 
（1） 滚动窗口scroll() 
scroll(x,y)：移至窗口某一点，左上角为0,0 [winscroll.htm] 
（2） 设置延迟setTimeout（“表达式”，时间） 时间：以毫秒为单位 
（3） 清除延迟clearTimeout（“延迟号”） 
如：id=setTimeout(“disp()”,1000) 
clearTimeout(id) 
（4） 

五、 Javascript 中的对象 
1、 建立自定义对象 
方法1：对象={属性1：属性值1，属性1：属性值1……属性n：属性值n} 
方法2：先定义构造函数，再new创建对象实例。 
如： function car(thecolor,thenumber,thewheels) 
{ this.color=thecolor; 
this.number=thenumber; 
this.wheels=thewheels; } 

var mycar=new car(“RED”,”13245”,4); 
2、 定义对象的方法 [oop.htm] 
function ReportInfo( ) 
{ var information=new string; 
information=”color:”+this.color+”<BR>”; 
information+=”Number:”+this.Number+”<BR>”; 
information+=”Wheels”+this.wheels; 
window.document.write(information); 
} 

3、 javascript核心语言对象 
（1） 数组对象（Array） 
建立数组：var st=new Array(“zhang”,”wang”,”li”,”chen”); 
var st1=new Array(4) 
访问数组元素： st[2] 
数组对象的属性 length (长度) [forin.htm] 
方法 sort( ) 按ASCII码排序 sort([比较函数名]) [sort.htm] 
比较函数返回值(a与b比较) <0 b排在a 的前面 
=0 保持原来次序 
>0 a排在b的前面 
reverse( ) 元素颠倒顺序 
join(分隔符) 转换成字符串 

（2） 字符串对象（String） 
属性： length 
方法：toUpperCase() 转换为大写字母 
toLowerCase() 转换为小写字母 
indexOf(字符串，起始位置) 返回子字符串在字符串中的位置，若没有，则为-1 
LastIndexOf(字符串，起始位置) 返回子字符串在字符串中最后的位置 
charAt(位置) 返回字符串中下标位置的字母 
substring（位置1，位置2）返回位置1，位置2间字符串 
split(分界符) 按分界符的分解成数组元素 
以下的为格式化字符串方法 [str.htm] 
big() blink() bold() fixed() fontcolor() fontsize() italics() small() 
strike() sub() sup() 
（3） 日期对象（Date） 
创建日期对象 
var 对象名称=new Date (参数) 
var theDate=new Date( ) 
var theDate=new Date( 1999,1,1) 
方法：getYear( ) 
getMonth() 
getDate( ) 
getHours( ) 
getMinutes( ) 
getSeconds( ) 
setYear (年份) 
setMonth(月份) 
setDate(日期) 
setHours(小时数) 
setMinutes(分钟数) 
setSeconds(秒数) 
getTime(毫秒数) 获得1970年1月1日0时0分0秒开始的豪秒 
setTime(毫秒数) 
（4） 数学对象（Math） 
属性： PI 圆周率 3.14159265 
SQRT2 2的平方根 1.414 
LN2 2的自然对数 0.693147 
E 2.718281828459 
LN10 10的自然对数 2.302585 
LOG2E 以2为底E的对数 1.442695 
LOG10E 以10为底E的对数 0.4342944819 
SQRT1-2 0.5的平方根 0.7071 
方法：min(值1，值2) 
max(值1，值2) 
round(数值) 四舍五入 
ceil (数值) 返回>=参数的最小整数 负值取0（向上取整） 
floor (数值) 截尾取整（向下取整） 
random() 0—1的随机数 
sqrt(数值) 返回数值的平方根 
abs(数值) 取绝对值 
acos (数值) arccos 反余弦 
asin(数值) 反正弦 
atan(数值) 反正切 
cos(数值) 余弦 
sin(数值) 正弦 
tan(数值) 正切 
atan(x,y) 计算极角， 夹在X正半轴与x,y间的角 
pow(x,y) X的Y次幂 
log(x) x的自然对数 
exp(x) E的X次方 

六、 文档对象 


window对象：最高一层，其属性是整个页面的属性。 
Document对象：页面上的对象都是document对象的子对象。 
Location 对象：包含了当前URL地址的属性 
Navigator 对象：包含了当前使用的浏览器的信息 
History对象：包含了客户端浏览器过去访问的URL的信息 

5、 window对象 
隐含对象名称： 
window：当前网页所在的window对象 
self：当前网页所在的window对象 
top：指最上层窗口对象，即指浏览器窗口本身，在框架中用到 
parent：父窗口对象，在框架中用到 
（1） 属性 
a. closed：判断一个窗口是否已经关闭。 
b. opener：存放的是打开它的父窗口。 Alert(opener.name) 
c. defaultStatus：在浏览器窗口下面的状态栏中缺省显示的信息。 
d. status：是状态栏中当前显示的信息。 
e. 子对象document、history、location 
location:可改变窗口中的URL 
属性：href 如window.location.href=’http://www.yahoo.com’ 
方法：reload() 重载当前的网页文件 
replace() 加载新的网页（用新的location代替老的location对象） 
history：存放已访问过的URL信息，history对象可实现网页的往前或往后浏览功能。 
属性：length 表示已访问过的站点次数 如k=window.history.length 
方法：back() 相当于浏览器中的back按钮 
forward() 相当于浏览器中的forward按钮 
go() 指定一个已访问过的URL，正数往前，负数向后 [history.htm] 
如：window.history.go(-3) 
（2） 方法 
a. open（页面地址，窗口名称，窗口风格） [winopen.htm] 
窗口风格：toolbar [=yes| no][1 | 0] 
location [=yes| no][1 | 0] 
directories [=yes| no][1 | 0] 链接工具栏 
status [=yes| no][1 | 0] 
menubar [=yes| no][1 | 0] 
scrollbars [=yes| no][1 | 0] 
resizeable [=yes| no][1 | 0] 
width 点 
height 点 
b. close( ) 
c. alert（字符串） [alert.htm] 
d. confirm（字符串） 显示确认信息 [confirm.htm] 
e. prompt（字符串，缺省值） [prompt.htm] 

（3） 

6、 document对象 
（1） 属性 
a. alinkColor 单击中的超链接的颜色 
b. vlinkColor 已访问过的超链接的颜色 
c. linkColor 超链接的颜色 
d. bgColor 背景颜色 [bgcolor.htm] 
e. fgColor 前景颜色 
f. title 页面标题 [document_bgcolor.htm] 
g. URL 
h. location [docurl.htm] 只读，不能设置 
i. cookie [cookie.htm] 
属性 document.cookie=”cookieName=cookieValue” 
[;path=pathname] 
[;expires=timeInGMTString] 格林威治时间，格式为 
星期，日-月-年 时：分：秒 
[;domain=domainName] 
[;secure] 
j. anchors 页面所有超链接存储在 anchors[]数组中。 
applets[](Java applets) forms[] (表单) image[] frames[] 
(下标从0开始) 
子对象anchors：属性 length 指明了网页文件中超链接的个数 
如：var k=document.anchors.length 
子对象links：属性 length：网页文件中超链接的个数 
如：g=links.length 
属性 href：存放超链接的URL 
如：link0=links[0].href 
子对象images： 
属性 border ：用于设置图像边框属性 
complete：图像是否被完全装载 
width ：用于设置图像的宽度 
height ：用于设置图像的高度 
name ：用于设置图像控制名称 
lowsrc：用于设置低分辩率图像 
hspace：用于设置图像的水平空白距离 
vspace：用于设置图像的垂直空白距离 
如：document.images[0].src=”a.gif” 

（2） 方法 
a. write() writeln() ：向页写入文本或者标签。 
b. open() close() ：打开或关闭一个新文档。 
c. clear() ：清除窗口 
（3） 
7、 location 对象 
（1） 属性 
URL：协议名称：//主机名称：端口号/页面路径#页面内锚标？搜索信息 
a. protocal ：协议，如http ftp gopher 
b. host：主机名称 可以是域名或IP地址 [location.htm] 
c. port：端口号，缺省情况下是80 
d. pathname 
e. hash ：锚标信息 
f. search：搜索信息 
g. hostname： 包括了主机名称和端口号，host：port 
h. href：提供了整个URL地址 
（2） 方法 
a. assign（URL地址）：将页面导航到另一个地址上去。可用“后退” 
b. reload()：刷新。 
c. replace（URL地址）：使用URL地址将当前页面代替，不能运用“后退” 

（3） 

8、 常用的事件 
（1）onBlur 某对象失去激活过程时发生 如：<body onBlur=”javascript 代码”> 
（2）onFocus 某对象刚被激活时发生<body onFocus=”javascript 代码”> [windowblur.htm] 
（3）onLoad 网页或图像装载时发生<body onLoad=”javascript 代码”> 
（4） onUnload 退出或关闭网页文件时发生<body onUnoad=”javascript 代码”> [onload.htm] 
（5） onAbort 浏览器在装载图像过程中突然中断发生 
（6） onChange 表单中的文本域中的内容发生变化时发生 
（7） onError 在网页文件或图像不能正常装载时发生 
（8） onMouseover 鼠标移到某对象上时发生 [mouseover.htm] 
（9） onMouseout 鼠标离开某对象时发生 
（10） onSelect 在文本域的某段文字被选中时发生 
（11） onSubmit 在单击“提交”按钮时发生 
（12） onClick 鼠标单击按钮时发生 

9、 
10、 

七、 表单元素 
1、 表单对象 
（1） 属性 
a. action：指明了处理表单数据的CGI或ASP程序的URL 
b. elements[]：表单中的元素，elements[0]表示第一个表单元素。 
c. length：表单中元素的个数 
d. method：取值是GET或POST 
e. name：指明表单的名称 
（2） 方法 
a. reset（）：所有元素值重新设置为缺省状态。 
b. submit（）：将表单数据发送给服务器。 
（3） 事件 
a. OnReset：单击Reset按钮或执行Reset方法前，先执行OnReset事件 
b. OnSubmit： 
2、 文本框对象 
（1） 属性 
a. defaultValue：缺省文本信息 
b. form：包含该文本框的表单 
c. name：文本框名称 
d. type：表单元素的类型，文本框为text、口令对象为password、文本区为textarea。 
e. value：文本框当前输入的信息。 

（2） 方法 
a. blur() 释放输入焦点 
b. focus() 获得输入焦点 
c. select() 使文本框中文本被选中 
（3） 事件 
a. OnBlur：文本框失去焦点时，触发Onblur 
b. OnFocus 
c. OnSelect 
d. OnKeyDown 
e. OnkeyUp 
f. OnKeyPress：按钮动作完成后，触发OnKeyPress。用户按下一键，先触发OnKeyDown、再OnkeyUp、最后是OnKeyPress。 
g. OnChange ： [textonblur.htm] 
3、 按钮对象 
（1） 属性 
a. form 
b. name 
c. type ：一般为button, 还有 submit和 reset 
d. value 
e. 

（2） 方法 
a. blur() 
b. click() 模仿单击按钮，不触发Onclick事件 
c. focus() 
（3） 事件 
a. OnBlur 
b. OnClick [cacu.htm] 
c. OnFocus 
d. OnMouseDown 
e. OnMouseUp 
（4） 

4、 单选框对象 
（1） 属性 
a. checked 
b. defaultchecked 
c. form 
d. name 
e. type: radio 
f. value 

（2） 方法：blur(), click(), focus() 
（3） 事件：OnBlur OnClick OnFocus OnMouseDown OnMouseUp 

5、 复选框对象 
（1） 属性： checked, defaultchecked, form , name ,type,value 
（2） 方法：blur(), click(), focus() 
（3） 事件：OnBlur OnChange OnClick OnFocus OnMouseDown OnMouseUp 
6、 选择列表对象 
（1） 属性：form , name ,type(select-one 或 select-multiple) 
length：选择列表中选项的长度。 
options[]： 
myselect.options.length=myselect.length 
options[I].defaultSelected：选项I是否被缺省选中。 
options[I].index：I选项的索引值。 
options[I].selected：是否被选中。 
options[I].text：选项的文本 
options[I].value：某选项的值 
selectedIndex：被选中选项的索值 

（2） 方法：blur(), focus() 
（3） 事件：OnBlur OnChange OnFocus 

检查表单 [checkform.htm] 
颜色渐变[rainbow.htm] 
数字钟[digitclock.htm] 
动态按钮[dybutton.htm] 
滚动字幕[ scroll.htm ]