第四章 JavaScript语法
4.1 JavaScript是什么
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
alert(new Date());
</script>
</body>
</html>
4.2 JavaScript的基本语法
4.2.1 简介
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<p>这是一个HEML段落</p>
<script language="javascript" type="text/javascript">
var x=3;
alert(x);
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<p>这是一个HEML段落</p>
<script language="javascript" type="text/javascript">
<!--
var x=3;
alert(x);
-->
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<a href="javascript:alert(new Date());">javascript</a><br />
<input type="button" value="test" onclick="alert(new Date());" />
</body>
</html>
4.2.2 JacaScript中的保留关键字
|
Abstract
|
Extends
|
Int
|
Super
|
Boolean
|
|
False
|
Interface
|
Switch
|
Break
|
Final
|
|
Long
|
Synchronized
|
Byte
|
Finally
|
Native
|
|
This
|
Case
|
Float
|
New
|
Throw
|
|
Catch
|
For
|
Null
|
Throws
|
Char
|
|
Function
|
Package
|
Transient
|
Class
|
Goto
|
|
Private
|
True
|
Const
|
If
|
Protected
|
|
Try
|
Continue
|
Inplements
|
Public
|
Var
|
|
Default
|
Import
|
Return
|
Void
|
Do
|
|
In
|
Short
|
While
|
Double
|
Instanceof
|
|
Static
|
With
|
Else
|
|
|
4.3 运算符
同Java，C，C++
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
for(var i=0;i<10;i++)
{
alert(i);
}
</script>
</body>
</html>
4.4 程序的流程控制
同Java，C，C++
4.5 函数
4.5.1 一般函数
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
var msg="全局变量";
function square(x,y)
{
var sum;
sum=x*y+y*y;
return sum;
}
function show()
{
var msg="局部变量";
alert(msg);
}
var sum;
alert("sum="+sum);
sum=square(2,3);
alert("sum="+sum);
//上面的两句可以改写为下面的语句
//alert("sum="+square(2,3));
show();
alert(msg);
</script>
</body>
</html>
4.5.2 参数可变函数
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
function testparams()
{
var params="";
for(var i=0;i<arguments.length;i++)
{
params=params+" "+arguments[i];
}
alert(params);
}
testparams("abc",123);
testparams(123,456,"abc");
</script>
</body>
</html>
4.5.3 动态创建函数
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
var square=new Function("x","y","var sum;sum=x*x+y*y;return sum;");
alert(square(3,2));
</script>
</body>
</html>
4.5.4 系统函数
|
encodeURI(string
|
对一个uri字符串编码后的结果
|
|
decodeURL(string)
|
对一个uri字符串解码后的结果
|
|
parseInt(string,编码)
|
把一个字符串转为整数
|
|
parseFloat(string,编码)
|
把一个字符串转为
|
|
isNaN
|
检测parseInt和parseFloat方法返回值是否为NaN
|
4.6 对象
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
function Person()
{
}
var person1=new Person();
person1.age=18;
person1.name="王康";
alert(person1.name+":"+person1.age);
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
function Person()
{
}
var person1=new Person();
person1.age=18;
person1.name="王康";
//alert(person1.name+":"+person1.age);
function sayFunc()
{
alert(person1.name+":"+person1.age);
}
person1.say=sayFunc;
person1.say();
</script>
</body>
</html>
4.6.2 构造方法和this关键字
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
function Person(name,age)
{
this.age=age;
this.name=name;
this.say=sayFunc;
}
function sayFunc()
{
alert(person1.name+":"+person1.age);
}
person1=new Person("王康",22);
person1.say();
</script>
</body>
</html>
4.6.3 在函数中修改参数的值
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
function Person(name,age)
{
this.age=age;
this.name=name;
this.say=sayFunc;
}
function sayFunc()
{
alert(person1.name+":"+person1.age);
}
function change(p)
{
p.name="王健";
p.age=24;
}
person1=new Person("王康",22);
person1.say();
change(person1);
person1.say();
</script>
</body>
</html>
4.7 JavaScript的内部对象
4.7.1 Obetct对象
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
function getAttributeValue(attr)
{
alert(person[attr]);
}
var person=new Object();
person.name="王康";
person.age=22;
getAttributeValue("name");
getAttributeValue("age");
</script>
</body>
</html>
4.7.2 String对象
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<!--属性-->
<script language="javascript" type="text/javascript">
var mystr=new String("王康");
var len=mystr.length;
alert(len);
</script>
<!--方法-->
<script language="javascript" type="text/javascript">
//为字符串对象中的内容加上HTML的定位标签，类似的还有big、bold
var a="This is a book";
alert(a.anchor("book"));
//charAt、charCodeAt、fontcolor
var a="This is a book";
alert(a.charAt('k'));
</script>
</body>
</html>
4.7.3 Date对象
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
var date=new Date();
alert(date);
var str=date.getYear()+"年";
str+=date.getMonth()+"月";
str+=date.getDate()+"日";
str+=date.getHours()+"：";
str+=date.getMinutes()+"：";
str+=date.getSeconds();
alert(str);
</script>
</body>
</html>
4.7.4 toString方法
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
var x=328;
alert("hex="+x.toString(16)+"bin="+x.toString(2));
</script>
</body>
</html>
4.8 专门用于对象的语句
4.8.1 with语句
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
var date=new Date();
with(date)
{
var str=getYear()+"年";
str+=getMonth()+"月";
str+=getDate()+"日";
str+=getHours()+"：";
str+=getMinutes()+"：";
str+=getSeconds();
alert(str);
}
</script>
</body>
</html>
4.8.2 for……in语句
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
function Person()
{
this.name="王康";
this.age=22;
this.height=175;
}
var p1=new Person();
var prop,str="";
for(prop in p1)
{
str+=prop+" ";
}
alert(str);
str="";
for(prop in p1)
{
str+=p1[prop]+" ";
}
alert(str);
</script>
</body>
</html>
4.9 数组
4.9.1 数组列表
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
var arr=["王康",123,'li',3.25];
for(var i=0;i<arr.length;i++)
{
alert(arr[i]);
}
var arr=[["王康",123,'li',3.25],[34,45,56,78,98,00]]
for(var i=0;i<arr.length;i++)
{
for(var j=0;j<arr[i].length;j++)
{
alert(arr[i][j]);
}
}
</script>
</body>
</html>
4.9.2 用对象方式实现数组
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="Text/javascript">
function MyArray()
{
this.length=arguments.length;
for(var i=0;i<this.length;i++)
{
this[i]=arguments[i];
}
}
var str="";
var arr=new MyArray(4,3.5,5,"fgf");
for(var i=0;i<arr.length;i++)
{
str+=arr[i]+"\n";
}
alert(str);
</script>
</body>
</html>
4.9.3 Array对象
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
var arr=new Array();
arr[0]=3.5;
arr[1]="王康";
arr[2]=12;
arr.sort();
var x,str="";
for(x in arr)
{
str+=x+":"+arr[x]+"\n";
}
alert(str);
</script>
</body>
</html>
4.10 思考与实践
