ACCP V4.0
第八章
JavaScript 核心语言对象
ACCP V4.02
回顾
声明一个变量 x,初值为 10,对应的 js代码?
alert(10+,30”);显示为什么效果?
将字符串转换为整数,使用哪个函数?
var x=“c”,var y;
switch( x)
{ case,a”:
y=5;
case?b?,
y=6;
default:
y=0;
}
指出代码错误
ACCP V4.03
目标
使用数组
使用循环语句控制应用程序
创建自定义函数
理解 JavaScript 对象
使用 String,Math 和 Date 等对象
ACCP V4.04
数组 4-1
声明数组
var 数组名 = new Array(数组大小 );
例,var emp = new Array(3)
添加元素
emp[0] =,AA";
emp[1] =,BB";
emp[2] =,CC";
AA
BB
CC
emp
也可以声明数组并赋初值:
例,var emp=new Array(“AA”,,BB”,,CC”);
ACCP V4.05
<HTML>
<HEAD>
<TITLE>使用数组 </TITLE>
<SCRIPT LANGUAGE = "JavaScript">
var emp = new Array(3);
emp[0] = "Ryan Dias";
emp[1] = "Graham Browne";
emp[2] = "David Greene";
document.write("数组 emp中的数据为,<HR>");
document.write(emp[0]+"<BR>");
document.write(emp[1]+"<BR>");
document.write(emp[2]+"<BR>");
</SCRIPT>
</HEAD>
</HTML>
数组 4-2
ACCP V4.06
数组 4-3
常用属性
length,返回数组中元素的个数
常用方法方 法 说 明
join 将数组中的元素组合成字符串
reverse 颠倒数组元素的顺序,使第一个元素成为最后一个,而最后一个元素成为第一个
sort 对数组元素进行排序
ACCP V4.07
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
var emp = new Array(3);
emp[0] = "Ryan Dias";
emp[1] = "Graham Browne";
emp[2] = "David Greene";
emp.sort( );
document.write(“排序结果是,<HR>");
document.write(emp[0]+"<BR>");
document.write(emp[1]+"<BR>");
document.write(emp[2]+"<BR>");
</SCRIPT>
</HEAD>
</HTML>
数组排序 4-2
ACCP V4.08
循环
for循环
do-while
while
ACCP V4.09
<HTML>
<HEAD>
<TITLE>For 循环演示 </TITLE>
<SCRIPT LANGUAGE = "JavaScript">
document.write("<H2 align=center>打印金字塔直线 </H2>");
for (var i= 0; i<100; i=i+5)
document.write("<HR align=center width=" + i+"%>");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
for循环例:
var i;
for (i=0; i<10; i++)
{
// 语句 ;
}
for 循环如何实现当 i=5 时,<HR align=center width=5% >
ACCP V4.010
<HEAD>
<STYLE type="text/css">
.myfont
{
font-size:150;
color:#c99c96;
font-family:Webdings //产生埃及图像的特殊字体
}
</STYLE>
<script language="JavaScript">
document.write("<H3>每个字符都对应一个漂亮的埃及图像 </H3>");
do
{
var c = prompt("输入一个字符,输入 N 或 n停止 ","A") ;
document.write ("<font class=myfont >"+c+"</font>");
}while (c !="N" && c !="n");
</SCRIPT>
</HEAD>
while循环
while(循环条件 )
{
//语句;
}
do- while循环
do
{
//语句;
}while(循环条件 );
while和 do- while循环先执行,后判断循环条件输入一个字符,直到 N停止,用哪个循环
ACCP V4.011
JavaScript 函数内置函数
eval 函数,用于计算字符串表达式的值
isNaN 函数:用于验证参数是否为 NaN(非数字)JavaScript 代码
<SCRIPT LANGUAGE = "JavaScript">
var str1=prompt(“输入一个表达式,我给您计算 ","1+1");
var result=eval(str1);
document.write(str1+"="+result);
var x = prompt("输入一些数据 ","0");
if (isNaN(x))
alert (x + " 不是一个数字 ");
else
alert (x + " 是一个数字 ");
</SCRIPT>
ACCP V4.012
自定义函数
定义函数,
function 函数名 ( 参数 1,参数 2,… )
{
语句 ;
}
调用函数:
函数调用一般和表单元素的事件一起使用,调用格式为:
事件名=,函数名,;
function sum ( one,two)
{
var result = one + two;
return result;
}
<INPUT name=“add” type=“button” value=“加法 "
onClick="sum(2,5)">
表示单击此按钮时,
调用函数 sum( )执行
ACCP V4.013
函数的应用
num1
num2
result
ACCP V4.014
定义函数
JavaScript 代码
<HEAD>
<SCRIPT language="JavaScript" >
function compute(op)
{
var num1,num2;
num1=parseFloat(document.myform.num1.value);
num2=parseFloat(document.myform.num2.value);
if (op=="+")
document.myform.result.value=num1+num2 ;
if (op=="-")
document.myform.result.value=num1-num2 ;
if (op=="*")
document.myform.result.value=num1*num2 ;
if (op=="/" && num2!=0)
document.myform.result.value=num1/num2 ;
}
</SCRIPT>
</HEAD>
定义函数 compute( ),完成计算的功能。 op参数代表运算符号
ACCP V4.015
调用函数
<FORM action="" method="post" name="myform" >
<P>第一个数 <INPUT name="num1" type="text">
<BR>第二个数 <INPUT name="num2" type="text">
</P><P>
<INPUT name="addButton" type="button" value="+ "
onClick="compute('+')">
<INPUT name="subButton" type="button" value="- "
onClick="compute('-')">
<INPUT name="mulButton" type="button" value="× "
onClick="compute('*')">
<INPUT name="divButton" type="button" value="÷ "
onClick="compute('/ ')">
</P>
<P>计算结果 <INPUT name="result" type="text">
</P></FORM>
ACCP V4.016
JavaScript 对象简介 2-1
对象是属性和 /方法的组合
属性是对象所拥有的一组外观特征,一般为名词
方法是对象可以执行的功能,一般为动词例如:汽车
Ferrari
对象:汽车属性:型号:法拉利颜色:绿色方法:前进、刹车、倒车
ACCP V4.017
JavaScript 对象简介 2-2
三类对象浏览器对象脚本对象
HTML 对象
浏览器窗口 window
文档 document
url地址等
String字符串对象
Date日期对象
Math数学对象等各种 HTML标签,
段落 <P>
图片 <IMG>
超链接 <A>等
ACCP V4.018
String 对象 3-1
创建字符串有两种不同方法,
使用 var 语句
var newstr =,这是我的字符串 "
创建 String 对象
var newstr = new String (“这是我的字符串 ")
ACCP V4.019
String 对象 3-2
名 称 说 明属性 length 返回字符串的长度方法
big( ) 增 大字符串文本
blink( ) 使字符串文本闪烁 ( IE
浏览器不支持 )
bold( ) 加粗字符串文本
fontcolor( ) 确定字体颜色
italics( ) 用斜体显示字符串
indexOf(“子字符串,,起始位置 ) 查找子字符串的位置
strike( ) 显示加删除线的文本
sub( ) 将文本显示为下标
… …
toLowerCase( ) 将字符串转换成小写
toUpperCase( ) 将字符串转换成 大写语法:
indexOf(“查找的子字符串”,查找的起始位置 )
返回子字符串所在的位置,如果没找到,返回 - 1
例如:
var x
var y=“abcdefg”;
x=y.indexOf(“c”,0 );
//返回结果为 2,起始位置是 0
ACCP V4.020
<SCRIPT LANGUAGE = "JavaScript">
function checkEmail( )
{
var e=document.myform.email.value;
if (e.length==0) //检测长度是否为 0,即是否为空
{
alert("电子邮件不能为空 !");
return ;
}
if (e.indexOf("@",0)==-1) //检测是否包含” @”符号
{
alert("电子邮件格式不正确 \n必须包含 @符号! ");
return ;
}
if (e.indexOf(".",0)==-1) //检测是否包含”,”符号
{
alert("电子邮件格式不正确 \n必须包含,符号! ");
return ;
}
document.write("恭喜您!,注册成功!欢迎进入古城热线! ");
}
检查电子邮件 email
是否包含,@”和,,”
String 对象 3-3
返回结果 -1表示没找到,@”字符
ACCP V4.021
Math 对象 2-1
名称 说 明属性
PI ∏的值,约等于 3.1415
LN10 10 的自然对 数的值,约等于 2.302
E Euler 的常量的值,约等于 2.718。 Euler 的常量用作自然对数的底数
abs(y) 返回 y 的绝对值
sin (y) 返回 y 的正弦,返回值以弧度为单位 。
cos (y) 返回 y 的余弦,返回值以弧度为单位
tan (y) 返回 y 的正切,返回值以弧度为单位
min (x,y) 返回 x 和 y 两个数中较小的数
max (x,y) 返回 x 和 y 两个数中较大的数
random 返回 0-1的随机数方法 round (y) 四舍五入取整sqrt (y) 返回 y 的平方根
Math.random( ),产生 0- 1的随机小数
Math.round( ):四舍五入取整,如 9.34 取整为 9
ACCP V4.022
<HTML>
<HEAD>
<META http-equiv="refresh" content="2">
<TITLE>自动刷新 </TITLE>
<SCRIPT language="JavaScript" >
document.write("2秒自动刷新,随机显示图片 ");
var i=0;
i=Math.round(Math.random( )*8+1);
document.write("<IMG width=640 height=433 src="+ i +".jpg>");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Math 对象 2-2
假定随机产生的数字 i=3,上述代码即为:
<IMG width=640 height=433 src=3.jpg>
显示第三幅图片( 3.jpg)
如何实现每隔 2秒刷新网页
Math.round(Math.random( )*8+1)
产生 1-9的数字
ACCP V4.023
Date 对象 10-1
Date 对象存储的日期为自 1970 年 1 月 1 日
00:00:00 以来的毫秒数
var 日期对象 = new Date (年,月,日等参数 )
例:
var mydate=new Date(,July 29,1998,10:30:00,)
如果没有参数,表示当前日期和时间例:
var today = new Date( )
ACCP V4.024
Date 对象 10-2
Data 方法的分组:
方法分组 说 明
setxxx 这些方法用于设置时间和日期值
getxxx 这些方法用于获 取时间和日期值
Toxxx 这些方法用于从 Date 对象返回字符串值
parsexxx & UTCxx 这些方法用于解析字符串
ACCP V4.025
Date 对象 10-3
用作 Date 方法的参数的整数:
值 整 数
Seconds 和 minutes 0 至 59
Hours 0 至 23
Day 0 至 6( 星期 几 )
Date 1 至 31( 月份中的天数 )
Months 0 至 11( 一月 至十二月 )
ACCP V4.026
Date 对象 10-4
Set 方法:
方法 说明
setDate 设置 Date 对象中月份中的天数,其值介于 1 至 31
之间 。
setHours 设置 Date 对象中的小时数,其值介于 0 至 23 之间 。
setMinutes 设置 Date 对象中的分钟数,其值介于 0 至 59 之间 。
setSeconds 设置 Date 对象中的秒数,其值介于 0 至 59 之间 。
setTime 设置 Date 对象中的时间值 。
setMonth 设置 Date 对象 中的月份,其值介于 1 至 12 之间 。
ACCP V4.027
Date 对象 10-5
Get 方法:
方法 说明
getDate 返回 Date 对象中月份中的天数,其值介于 1 至 31 之间
getDay 返回 Date 对象中的星期几,其值介于 0 至 6 之间
getHours 返回 Date 对象中的小时数,其值介于 0 至 23 之间
getMinutes 返回 Date 对象中的分钟数,其值介于 0 至 59 之间
getSeconds 返回 Date 对象中的秒数,其值介于 0 至 59 之间
getMonth 返回 Date 对象中的月份,其值介于 0 至 11 之间
getFullYear 返回 Date 对象中的年份,其值为四位数
getTime 返回自 某一时刻 ( 1970 年 1 月 1 日 ) 以来的毫秒数
ACCP V4.028
Date 对象 10-6
方 法 说 明
ToGMTString 使用 格林尼治标准时间 (GMT) 数据格式将 Date 对象转换成字符串表示
ToLocaleString 使用当地时间 格式将 Date 对象转换成字符串表示
To 方法:
Parse 方法和 UTC 方法方 法 说 明
Date.parse (date
string )
用日期字符串表示自 1970 年 1 月 1 日以来的毫秒数
Date.UTC (year,
month,day,hours,
min.,secs,)
Date 对象中自 1970 年 1 月 1 日以来的毫秒数
ACCP V4.029
<HTML>
<BODY>
<script language="javaScript">
var now= new Date( );
var hour = now.getHours( );
if (hour>=0 && hour <=12)
document.write("上午好 !")
if (hour>12 && hour<= 18)
document.write("下午好 !");
if (hour>18 && hour <24)
document.write("晚上好 !");
document.write("<P>今天日期,"+now.getYear()+"年,
+(now.getMonth( )+1)+"月 "+now.getDate()+"日 ");
document.write("<P>现在时间,"+now.getHours()+"点 "+now.getMinutes(
)+"分 ");
</script>
</body>
</HTML>
Date对象 10-7
如何实现获得当前日期和时间获得小时,即当前是几点判断上午、下午还是晚上月份数字 0- 11,注意+ 1
ACCP V4.030
Date对象 10-8
setTimeout的用法:
setTimeout(“调用的函数”,”定时的时间”)
例:
var myTime= setTimeout(” disptime( )”,1000) ;
clearTimeout( myTime) ;
本例的时间可以采用定时显示,使用定时器函数,每隔 1秒调用 disptime( )函数显示时间每隔 1000毫秒调用函数
disptime( )执行关闭定时器
ACCP V4.031
Date 对象 10-8
JavaScript 代码<SCRIPT language="JavaScript">
function disptime( )
{
var time = new Date( ); //获得当前时间
var hour = time.getHours( ); //获得小时、分钟、秒
var minute = time.getMinutes( );
var second = time.getSeconds( );
var apm="AM"; //默认显示上午,AM
if (hour>12) //按 12小时制显示
{
hour=hour-12;
apm="PM" ;
}
if (minute < 10) //如果分钟只有 1位,补 0显示
minute="0"+minute;
if (second < 10) //如果秒数只有 1位,补 0显示
second="0"+second;
document.myform.myclock.value= hour+":"+minute+":"+
second+" "+apm;
var myTime = setTimeout("disptime( )",1000);
}
</SCRIPT>
无边框的文本框 myclock
使用定时器函数,每隔 1秒调用 disptime( )
函数刷新显示获得小时、分钟、秒根据 12小时制调整时间和 AM/PM标志确保分钟和秒显示位数为 2 位
var myTime = setTimeout("disptime( )",1000);
设置定时器每隔 1秒( 1000毫秒),调用函数 disptime( )执行,
刷新时钟显示
ACCP V4.032
Date对象 10-10
<STYLE type="text/css">
<!--
/*设置样式:无边框的文本框 */
INPUT {
font-size,50px;
color,#CC0000;
border-style:none
}
-->
</STYLE>
</HEAD>
<BODY onLoad="disptime( )">
<FORM NAME="myform">
<INPUT name="myclock" type="text" value="" >
</FORM>
设置样式:无边框的文本框
Onload ( ) 事件,页面加载就调用函数,disptime
(显示时间)
ACCP V4.033
总结
Array对象常用的属性是 length,排序方法,sort
循环语句分为,for 循环,while循环,do-while
循环
Eval( )函数可以计算某个计算表达式的值,
isNaN( )函数可用于判断是否是一个数字
String对象的 indexOf( )方法用于查找子字符串
Math对象的 random( )方法可以产生 0- 1的随机数
Date对象有 setxxx( )方法用于设置日期和时间,
getxxx( )方法用于获得日期和时间