chapter 1 basement

Transcript chapter 1 basement

第4章
JavaScript 语言2
学习网站：http://xin126.cn/
函数
• 函数是一段能够实现某种功能的代码块，它可以
被事件处理或其他语句调用。
<html> <head>
<script type="text/javascript">
function displaymessage() {
alert("Hello World!") }
</script> </head> <body>
<form> <input type="button" value="Click me!"
onclick="displaymessage()" > </form>
</body> </html>
例01.htm
2
函数
• 内置函数
– eval 函数
– isNaN 函数
• 用户自定义函数
– 创建用户定义的函数
function funcName(argument1,argument2,etc)
{statements; }
3
内置函数
•
eval()
1. 返回表达式的结果
2. 执行语句
<SCRIPT LANGUAGE ="JavaScript">
var x=2+3;
document.write(eval(x+7));
var s=alert(x);
eval(s);
</SCRIPT>
例02.htm
4
内置函数
•
isNaN(x)
用于判断其参数是否是 NaN(not a number),如果是
数据值型数据返回false,否则返回true;
document.write(isNaN(123)+ "<br />")
document.write(isNaN(-1.23)+ "<br />")
document.write(isNaN(5-2)+ "<br />")
document.write(isNaN(0)+ "<br />")
document.write(isNaN("Hello")+ "<br />")
document.write(isNaN("2005/12/12")+ "<br />")
例03.htm
5
内置函数
•
Number(x)
•
•
•
把参数x转换为数字;
如果无法转换为数字，那么 Number() 函数返回 NaN。
对于布尔值，是true返回值为1，false返回值为0;
document.write(Number(5) + "<br />")
document.write(Number("hello") + "<br />")
document.write(isNaN(true)+ "<br />")
document.write(isNaN(false)+ "<br />")
例04.htm
6
自定义函数
function funcName(argument1,argument2,etc)
{statements; }
<script type="text/javascript">
function displaymessage() {
alert("Hello World!") }
</script>
<form> <input type="button" value="Click me!"
onclick="displaymessage()" > </form>例01.htm
7
函数示例
<FORM METHOD=POST ACTION="" NAME="form1">
num1:<INPUT TYPE="text" NAME="textnum1"><br>
num2:<INPUT TYPE="text" NAME="textnum2">
<INPUT TYPE="button" value="计算" onclick="Execute1()">
</FORM>
8
函数示例
function Execute1()
{
num1=Number(document.form1.textnum1.value);
num2=Number(document.form1.textnum2.value);
function Execute2(num1,num2)
{ if (num1>num2) return num1;
else return num2;
}
alert(Execute2(num1,num2));
}
例4-3-1.html
9
事件和事件对象概念
• JavaScript程序是典型的事件驱动程序
• 事件是在网页上进行的操作
• 如： JavaScript事件
onClick
onChange （单行、多行文本域或选择框发生改变时）
onFocus （获得焦点）
onBlur （失去焦点）
onMouseOver（鼠标移动到对象上）
onMouseOut （鼠标移出指定对象）
onLoad （载入文件）
onUnload （卸载文件）
10
onChange事件示例
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function checkNum(num){
if (num == ""){ alert("请输入一个数字值");
return false; }
if (isNaN (num)){ alert("请输入一个数字值");
return false; }
else alert ("谢谢！"); }
</SCRIPT>
</HEAD><BODY bgColor = white><FORM>
请输入一个数字：<INPUT type = text size = 5
onChange="checkNum(this.value)" >
</FORM></BODY></HTML>
例05.htm
11
onFocus/onBlur事件示例
<HTML>
<BODY BGCOLOR=“red">
<FORM>
<INPUT type = text
onblur="(document.bgColor=‘green')"
onfocus="(document.bgColor=‘blue')">
</FORM>
</BODY>
</HTML>
例06.htm
12
onLoad onUnLoad事件示例
<HTML> <HEAD> <TITLE>您好</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function hello()
{ alert("欢迎光临本站，文件载入成功！"); }
function unloadhello()
{ alert(" 欢迎下次再来！"); }
</SCRIPT> </HEAD>
<BODY onLoad="hello()" onUnLoad="unloadhello()">
<a href="06.htm">打开06页面</a></BODY>
</HTML>
例07.htm
13
对象
• JavaScript是一种基于对象（Object-Based）的语言，
而不是面对对象（Object-Oriented）的语言。
• 对象中包含属性（变量）及用于处理数据的方法
（函数）。
• 要访问对象的属性，必须指定对象名及属性：
objectName.propertyName
• 要访问对象方法,必须指定对象名及需要的方法：
objectName.method()
14
字符串对象
• 字符串对象用于操纵和处理字符串。
创建字符串对象的方法
(var) x = “This is a javascript”
• 字符串的属性length（返回字符串的长度）
document.write(x.length)
例08.htm
15
字符串对象的方法
名称
big
small
bold
strike
toLowerCase
toUpperCase
描述
增大字符串文本大小。
缩小字符串文本大小。
使字符串文本为粗体。
显示带删除线的文本。
将字符串转换成小写。
将字符串转换成大写。
var s1=“hello,大家好！”
document.write("<BR>"+s1.big())
document.write("<BR>"+s1.small())
document.write("<BR>"+s1.bold())
document.write("<BR>"+s1.strike())
document.write("<BR>"+s1.toUpperCase())
document.write("<BR>"+s1.toLowerCase())
16
例4-4-1.html
字符串对象的方法(2)
名称
charAt(n)
charCodeAt(n)
concat(string2)
描述
返回字符串中第n个位置的字符。
返回字符串中第n个位置字符的unicode码
连接字符串。
var s1 = "This is a javascript! ";
s2="you are welcome!"
document.write(s1.charAt(8));
document.write(s1.charCodeAt(8));
document.write(s1.concat(s2));
例09.html
17
字符串对象的方法(3)
indexOf(string, [startIndex])
搜索string字符串在主字符串中出现的位置（索引值从0开
始计数），startIndex用于设置从第几个字符开始查找。
若搜索的是空串返回0，搜索不到返回-1。
var s= "this is an Example of indexOf.";
document.write(s.indexOf("s"));
document.write(s.indexOf("s",4));
document.write(s.indexOf(""));
document.write(s.indexOf("k"));
document.write(s.indexOf("e",5));
3
18
6
0
-1
17
Math对象
• Math 对象是内部静态对象，不需要创建可
以直接使用。
• 属性
– PI
– LN10(10的自然对数)
– LN2(2的自然对数)
document.write(Math.PI+"<br />");
document.write(Math.LN10+"<br />");
document.write(Math.LN2+“<br />”); 例10.htm
19
Math对象示例
<SCRIPT LANGUAGE = "JavaScript">
function area(x)
{ var a = Math.PI * x * x;
alert ("半径为" + x + " " + "的圆的面积为" + " " + a);
}
</SCRIPT>
<FORM>
输入圆的半径：<INPUT TYPE = TEXT size = 5 name = "r">
<input type = button value = "显示面积"
onclick=“area(this.form.r.value)">
</FORM>
例11.htm
20
Math对象
• 方法
–
–
–
–
–
abs(number) 计算绝对值
sqrt(number) 计算平方根
max(number1,number2) 返回两数中较大的一个
min(number1,number2)
返回两数中较小的一个
round(number) 将参数四舍五入取整
document.write("-15的绝对值："+Math.abs(-15)+"<br />");
document.write("返回20 50中较大的数："+Math.max(20,50)+"<br />");
document.write("返回20 50中较小的数："+Math.min(20,50)+"<br />");
document.write("返回8的平方根："+Math.sqrt(8)+"<br />");
document.write("将3.614四舍五入"+Math.round(3.614)+"<br />");
例12.htm
21
random方法
• Math.random()方法可以产生一个0-1的随机数。
• 思考：如何生成一个0-100之间的随机整数？
Math.round(Math.random()*100)
练习：做一个猜数字的游戏。例13.htm
22
猜数字游戏
<SCRIPT LANGUAGE="JavaScript">
var x;
x=Math.round(Math.random()*100);
function checkNum(num){
if (x>num){ alert("猜小了！");
return false;}
if (x<num){ alert("猜大了");
return false;}
if (x==num) {return true;}
}
</SCRIPT>
23
猜数字游戏
<form action="14.htm" method="post" >
请输入0-100之间的整数：
<input name="number" type="text">
<input type="submit" name="Submit" value="我
猜！" onClick="return
checkNum(this.form.number.value)">
</form>
24
Date对象
• Date 是内置对象，包含日期和时间信息。
• 用法：
var now = new Date ();
document.write(now);
例15.htm
25
get方法组
方法
getDate
从日期对象中返回一个月中的某一天（1-31）
getDay
从日期对象中返回一星期中的某一天（0-6）
getHours
从日期对象中返回小时数（0-23）
getMinutes
从日期对象中返回分钟数（0-59）
getSeconds
从日期对象中返回秒数（0-59）
getMonth
从日期对象中返回月份（0-11）
getYear
从日期对象中返回年份（Year大于等于1900）
getTime
返回自1970年1月1日以来所经过的时间（毫秒）
26
描述
set方法组
方法
setDate
为日期对象设置一个月中的某一天（1-31）
setHours
为日期对象设置小时数（0-23）
setMinutes
为日期对象设置分钟数（0-59）
setSeconds
为日期对象设置秒数（0-59）
setMonth
设置日期对象中的月份（0-11）
setYear
设置日期对象中的年份值，该值必须大于1900。
setTime
设置日期对象内的时间值
27
描述
Date对象示例:显示动态时钟（1）
<SCRIPT LANGUAGE="JavaScript">
document.write("<span id='time'></span>")
setInterval(function timer () { var now = new Date ();
time.innerText=now.getYear()+"年"
+(now.getMonth()+1)+"月"
+now.getDate()+"日
星期"+"日一二三四五六".charAt(now.getDay())+" "
+now.getHours()+":"+now.getMinutes()+":"+now.getSeconds()}
,1000)
</SCRIPT>
setInterval():用来实现每经过指定时间后计算表达式或调用函
数。例16.htm
28
with语句
• with语句用于执行一组语句，所有这些语句都假定
引用指定的对象。
<HTML>
• 用法
with (object)
{ statements; }
29
<HEAD>
<SCRIPT LANGUAGE ="JavaScript">
var a, b, c;
var r=10;
with (Math) {
a = PI * r * r;
b = r * cos(PI);
c = r * sin(PI/2);
}
document.write (a +"<BR>");
document.write (b +"<BR>");
document.write (c +"<BR>");
</SCRIPT>
</HEAD>
</HTML>
Date对象示例:显示动态时钟（1）改写
<SCRIPT LANGUAGE="JavaScript">
document.write("<span id='time'></span>")
setInterval(function () { var now=new Date();
with(now)
time.innerText=getYear()+"年"+(getMonth()+1)+"月
"+getDate()+"日星期"+"日一二三四五六
".charAt(getDay())+"
"+getHours()+":"+getMinutes()+":"+getSeconds()}
,1000)
</SCRIPT>
30
Date对象示例:显示动态时钟（2）
<SCRIPT LANGUAGE="JavaScript">
<!-document.write("<span id='time'></span>")
setInterval("time.innerText=new
Date().toLocaleString()",1000)
//-->
</SCRIPT> 例4-4-7.htm
方法
toLocalString
31
描述
根据本地时间把 Date 对象转换为字符串
END
学习网站：http://xin126.cn/
32

chapter 1 basement

Transcript chapter 1 basement

Directory