JavaScript实现

<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

JavaScript放置

位于 head 部分的脚本:

当脚本被调用时,或者当事件被触发时,脚本就会被执行。当你把脚本放置到 head 部分后,就可以确保在需要使用脚本之前,它已经被载入了。

使用外部 JavaScript

许希望在若干个页面中运行 JavaScript,可以将 JavaScript 写入一个外部文件中,然后以 .js 为后缀保存这个文件。

注意:外部文件不能包含<script>标签。

<html>
<head>
<script src="xxx.js">....</script>
</head>
<body>
</body>
</html>

您可以把 .js 文件放到网站目录中通常存放脚本的子目录中,这样更容易管理和维护。

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

单行注释用 / /

多行注释用 /* */

JavaScript变量

变量名称的规则:

注释:由于 JavaScript 对大小写敏感,变量名也对大小写敏感。

变量声明

用var语句声明变量,变量的声明跟java类似:

var x;
var carname;

JavaScript运算符

算数运算符:规则都跟java一样

运算符 例子 等价于 结果
= x=y   x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
运算符 描述 例子 结果
+ x=y+2 x=7
- x=y-2 x=3
* x=y*2 x=10
/ x=y/2 x=2.5
% 求余数 (保留整数) x=y%2 x=1
++ 累加 x=++y x=6
-- 递减 x=--y x=4

数字与字符串的运算

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

x=5+5;
document.write(x); //10

x="5"+"5";
document.write(x); //55

x=5+"5";
document.write(x); //55

x="5"+5;
document.write(x); //55

比较运算符

运算符 描述 例子
== 等于 x==8 为 false
=== 全等(值和类型) x===5 为 true;x==="5" 为 false
!= 不等于 x!=8 为 true
> 大于 x>8 为 false
< 小于 x<8 为 true
>= 大于或等于 x>=8 为 false
<= 小于或等于 x<=8 为 true

逻辑运算符

运算符 描述 例子
&& and (x < 10 && y > 1) 为 true
|| or (x==5 || y==5) 为 false
! not !(x==y) 为 true

条件运算符

语法:

variablename=(condition)?value1:value2 

例:

greeting=(visitor=="PRES")?"Dear President ":"Dear ";

如果变量 visitor 中的值是 "PRES",则向变量 greeting 赋值 "Dear President ",否则赋值 "Dear"。

JavaScript if..else语句

语法:

if (条件)
{
条件成立时执行代码
} 

JavaScript switch语句

语法:

switch(n)
   {
   case 1:
     执行代码块 1
     break
   case 2:
     执行代码块 2
     break
   default:
     如果n即不是1也不是2,则执行此代码
   }

JavaScript 消息框

可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

警告框:

alert("文本")

确认框:

如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

confirm("文本")

提示框:

如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

prompt("文本","默认值")

JavaScript 函数

作用:将脚本编写为函数,就可以避免页面载入时执行该脚本。

语法:

function 函数名(var1,var2,...,varX)
  {
  代码...
  }

return语句:

function prod(a,b)
{
x=a*b
return x
}

JavaScript 变量的生存期

当您在函数内声明了一个变量后,就只能在该函数中访问该变量。当退出该函数后,这个变量会被撤销。

函数之外声明的变量,则页面上的所有函数都可以访问该变量。生存期从声明它们之后开始,在页面关闭时结束

注意:在调用函数的时候不要忘了函数的“()”

JavaScript 循环

for

for (变量=开始值;变量<=结束值;变量=变量+步进值) 
{
    需执行的代码
}

while

while (变量<=结束值)
{
    需执行的代码
}

do...while

do
{
    需执行的代码
}
while (变量<=结束值)

break 语句

使用 break 语句来终止循环。

continue 语句

使用 continue 语句来终止当前的循环,然后从下一个值继续执行。

JavaScript For...In 声明

语法:

for (变量 in 对象)//"变量"可以是数组元素,也可以是对象的属性。
{
    在此执行代码
}

例:

var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

for (x in mycars)
{
document.write(mycars[x] + "
") }

JavaScript 事件

属性 当以下情况发生时,出现此事件 FF N IE
onabort 图像加载被中断 1 3 4
onblur 元素失去焦点 1 2 3
onchange 用户改变域的内容 1 2 3
onclick 鼠标点击某个对象 1 2 3
ondblclick 鼠标双击某个对象 1 4 4
onerror 当加载文档或图像时发生某个错误 1 3 4
onfocus 元素获得焦点 1 2 3
onkeydown 某个键盘的键被按下 1 4 3
onkeypress 某个键盘的键被按下或按住 1 4 3
onkeyup 某个键盘的键被松开 1 4 3
onload 某个页面或图像被完成加载 1 2 3
onmousedown 某个鼠标按键被按下 1 4 4
onmousemove 鼠标被移动 1 6 3
onmouseout 鼠标从某元素移开 1 4 4
onmouseover 鼠标被移到某元素之上 1 2 3
onmouseup 某个鼠标按键被松开 1 4 4
onreset 重置按钮被点击 1 3 4
onresize 窗口或框架被调整尺寸 1 4 4
onselect 文本被选定 1 2 3
onsubmit 提交按钮被点击 1 2 3
onunload 用户退出页面 1 2 3

JavaScript Try...Catch 语句

try...catch 可以测试代码中的错误。try 部分包含需要运行的代码,而 catch 部分包含错误发生时运行的代码。

try
{
   //在此运行代码
}
catch(err)
{
   //在此处理错误
}

JavaScript Throw 声明

Throw 声明

throw 声明的作用是创建 exception(异常)。你可以把这个声明与 try...catch 声明配合使用,以达到控制程序流并产生精确错误消息的目的。

语法

throw(exception)

例:

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") 
}

JavaScript 转义字符

代码 输出
\' 单引号
\" 双引号
\& 和号
\\ 反斜杠
\n 换行符
\r 回车符
\t 制表符
\b 退格符
\f 换页符

JavaScript 注意事项

JavaScript 字符串(String)对象

String 对象属性

属性 描述 FF IE
constructor 对创建该对象的函数的引用 1 4
length 字符串的长度 1 3
prototype 允许您向对象添加属性和方法 1 4

String 对象方法

方法 描述 FF IE
anchor() 创建 HTML 锚。 1 3
big() 用大号字体显示字符串。 1 3
blink() 显示闪动字符串。 1  
bold() 使用粗体显示字符串。 1 3
charAt() 返回在指定位置的字符。 1 3
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。 1 4
concat() 连接字符串。 1 4
fixed() 以打字机文本显示字符串。 1 3
fontcolor() 使用指定的颜色来显示字符串。 1 3
fontsize() 使用指定的尺寸来显示字符串。 1 3
fromCharCode() 从字符编码创建一个字符串。 1 4
indexOf() 检索字符串。 1 3
italics() 使用斜体显示字符串。 1 3
lastIndexOf() 从后向前搜索字符串。 1 3
link() 将字符串显示为链接。 1 3
localeCompare() 用本地特定的顺序来比较两个字符串。 1 4
match() 找到一个或多个正在表达式的匹配。 1 4
replace() 替换与正则表达式匹配的子串。 1 4
search() 检索与正则表达式相匹配的值。 1 4
slice() 提取字符串的片断,并在新的字符串中返回被提取的部分。 1 4
small() 使用小字号来显示字符串。 1 3
split() 把字符串分割为字符串数组。 1 4
strike() 使用删除线来显示字符串。 1 3
sub() 把字符串显示为下标。 1 3
substr() 从起始索引号提取字符串中指定数目的字符。 1 4
substring() 提取字符串中两个指定的索引号之间的字符。 1 3
sup() 把字符串显示为上标。 1 3
toLocaleLowerCase() 把字符串转换为小写。 - -
toLocaleUpperCase() 把字符串转换为大写。 - -
toLowerCase() 把字符串转换为小写。 1 3
toUpperCase() 把字符串转换为大写。 1 3
toSource() 代表对象的源代码。 1 -
toString() 返回字符串。 - -
valueOf() 返回某个字符串对象的原始值。 1 4

JavaScript Date对象

Date 对象

var myDate=new Date()

Date 对象属性

属性 描述 FF IE
constructor 返回对创建此对象的 Date 函数的引用。 1 4
prototype 使您有能力向对象添加属性和方法。 1 4

Date 对象方法

方法 描述 FF IE
Date() 返回当日的日期和时间。 1 3
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 1 3
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 1 3
getMonth() 从 Date 对象返回月份 (0 ~ 11)。 1 3
getFullYear() 从 Date 对象以四位数字返回年份。 1 4
getYear() 请使用 getFullYear() 方法代替。 1 3
getHours() 返回 Date 对象的小时 (0 ~ 23)。 1 3
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。 1 3
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。 1 3
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。 1 4
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。 1 3
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 1 3
getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 1 4
getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 1 4
getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。 1 4
getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。 1 4
getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。 1 4
getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 1 4
getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 1 4
getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 1 4
parse() 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。 1 3
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。 1 3
setMonth() 设置 Date 对象中月份 (0 ~ 11)。 1 3
setFullYear() 设置 Date 对象中的年份(四位数字)。 1 4
setYear() 请使用 setFullYear() 方法代替。 1 3
setHours() 设置 Date 对象中的小时 (0 ~ 23)。 1 3
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。 1 3
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。 1 3
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。 1 4
setTime() 以毫秒设置 Date 对象。 1 3
setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 1 4
setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 1 4
setUTCFullYear() 根据世界时设置 Date 对象中的年份(四位数字)。 1 4
setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 1 4
setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 1 4
setUTCSeconds() 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。 1 4
setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 1 4
toSource() 返回该对象的源代码。 1 -
toString() 把 Date 对象转换为字符串。 1 4
toTimeString() 把 Date 对象的时间部分转换为字符串。 1 4
toDateString() 把 Date 对象的日期部分转换为字符串。 1 4
toGMTString() 请使用 toUTCString() 方法代替。 1 3
toUTCString() 根据世界时,把 Date 对象转换为字符串。 1 4
toLocaleString() 根据本地时间格式,把 Date 对象转换为字符串。 1 3
toLocaleTimeString() 根据本地时间格式,把 Date 对象的时间部分转换为字符串。 1 3
toLocaleDateString() 根据本地时间格式,把 Date 对象的日期部分转换为字符串。 1 3
UTC() 根据世界时返回 1997 年 1 月 1 日 到指定日期的毫秒数。 1 3
valueOf() 返回 Date 对象的原始值。 1 4

Array 对象

Array 对象的语法:

new Array();
new Array(size);
new Array(element0, element0, ..., elementn);

对象属性

属性 描述 FF IE
constructor 返回对创建此对象的数组函数的引用。 1 4
index   1 4
input   1 4
length 设置或返回数组中元素的数目。 1 4
prototype 使您有能力向对象添加属性和方法。 1 4

对象方法

方法 描述 FF IE
concat() 连接两个或更多的数组,并返回结果。 1 4
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 1 4
pop() 删除并返回数组的最后一个元素 1 5.5
push() 向数组的末尾添加一个或更多元素,并返回新的长度。 1 5.5
reverse() 颠倒数组中元素的顺序。 1 4
shift() 删除并返回数组的第一个元素 1 5.5
slice() 从某个已有的数组返回选定的元素 1 4
sort() 对数组的元素进行排序 1 4
splice() 删除元素,并向数组添加新元素。 1 5.5
toSource() 返回该对象的源代码。 1 -
toString() 把数组转换为字符串,并返回结果。 1 4
toLocaleString() 把数组转换为本地数组,并返回结果。 1 4
unshift() 向数组的开头添加一个或更多元素,并返回新的长度。 1 6
valueOf() 返回数组对象的原始值 1 4

JavaScript 逻辑对象

下面的所有的代码行均会创建初始值为 false 的 Boolean 对象。

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)

下面的所有的代码行均会创初始值为 true 的 Boolean 对象:

var myBoolean=new Boolean(true)
var myBoolean=new Boolean("true")
var myBoolean=new Boolean("false")
var myBoolean=new Boolean("Richard")

创建 Boolean 对象的语法:

new Boolean(value);	//构造函数
Boolean(value);		//转换函数

JavaScript 算数对象

Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。

Math 对象属性

属性 描述 FF IE
E 返回算术常量 e,即自然对数的底数(约等于2.718)。 1 3
LN2 返回 2 的自然对数(约等于0.693)。 1 3
LN10 返回 10 的自然对数(约等于2.302)。 1 3
LOG2E 返回以 2 为底的 e 的对数(约等于 1.414)。 1 3
LOG10E 返回以 10 为底的 e 的对数(约等于0.434)。 1 3
PI 返回圆周率(约等于3.14159)。 1 3
SQRT1_2 返回返回 2 的平方根的倒数(约等于 0.707)。 1 3
SQRT2 返回 2 的平方根(约等于 1.414)。 1 3

Math 对象方法

方法 描述 FF IE
abs(x) 返回数的绝对值。 1 3
acos(x) 返回数的反余弦值。 1 3
asin(x) 返回数的反正弦值。 1 3
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 1 3
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。 1 3
ceil(x) 对数进行上舍入。 1 3
cos(x) 返回数的余弦。 1 3
exp(x) 返回 e 的指数。 1 3
floor(x) 对数进行下舍入。 1 3
log(x) 返回数的自然对数(底为e)。 1 3
max(x,y) 返回 x 和 y 中的最高值。 1 3
min(x,y) 返回 x 和 y 中的最低值。 1 3
pow(x,y) 返回 x 的 y 次幂。 1 3
random() 返回 0 ~ 1 之间的随机数。 1 3
round(x) 把数四舍五入为最接近的整数。 1 3
sin(x) 返回数的正弦。 1 3
sqrt(x) 返回数的平方根。 1 3
tan(x) 返回角的正切。 1 3
toSource() 返回该对象的源代码。 1 -
valueOf() 返回 Math 对象的原始值。 1 4

例:

document.write(Math.round(0.60)

JavaScript 浏览器检测

Navigator 对象

JavaScript Navigator 对象包含了有关访问者浏览器的所有信息。接下来我们学习 Navigator 对象的两个属性。

属性

例:

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)