这几天在学JavaScript的基础知识,就把基础的知识整理一下。
1、JavaScript的四种基本的数据类型:数值(整数和实数)、字符串型(用“”或者‘’括起来的字符或者数值)、布尔型(true或false)、空值。
2、JavaScript的变量
声明变量:变量在脚本中第一次出现时候在声明中(var),变量的脚本第一次用到时就设置于内存中,便于以后使用。对于变量还有一个重要性------那就是变量的作用域。在JavaScript同样有全局变量和局部变量。全局变量之所以在所有函数之外,其作用整个函数,而局部函数是定义在函数体之内,只对该函数使用,而对其他函数则是不可见得。
3、表达式和运算符
表达式分算术表达式、字串表达式、赋值表达式、布尔表达式
运算符分单目运算符和双目运算符、三目运算符
单目运算符:-(取反)、~(取补)、++(递加1)、- -(递减1)
双目运算符:操作数1 运算符 操作数2
三目运算符:操作数?结果1:结果2
实例:简单的跑马灯效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript">
var msg="欢迎大家进入,这是一个简单的跑马灯的效果!";
var speech = 100;
var seq=0;
function Scroll() {
document.pmdForm.pmdtext.value = msg.substring(seq, msg.length)+ msg.substring(0, msg.length);
seq++;
if ( seq > msg.length ) { seq = 0 };
window.setTimeout("Scroll();", speech );
}
</script>
<title>无标题文档</title>
</head>
<body OnLoad="Scroll();" >
<form name="pmdForm">
<input name="pmdtext" type="text" />
</form>
</body>
</html>
效果如下图:
4、JavaScript的程序构成
程序控制流
If条件语句、for循环语句、while循环、break和continue语句
函数
4.1 JavaScript函数定义
Function 函数名(参数,变元){
函数体;
Return 表达式;
}
说明:
当调用函数时,所用变量或字面量均可作为变元传递。
函数由关键字Function定义。
函数名:定义自己函数的名字。
参数表,是传递给函数使用或操作的值,其值可以是常量 ,变量或其它表达式。
通过指定函数名(实参)来调用一个函数。
必须使用Return将值返回。
4.2函数中的形式参数
在函数的定义中,我们看到函数名后有参数表,这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢?在JavaScript中可通过arguments .Length来检查参数的个数。例如:
Function function_Name(exp1,exp2,exp3,exp4)
Number =function _Name . arguments .length;
if (Number>1)
document.wrile(exp2);
if (Number>2)
document.write(exp3);
if(Number>3)
document.write(exp4);
...
5、事件驱动以及事件处理
通常鼠标或热键的动作我们称之为事件(Event),而由鼠标或热键引发的一连串程序的动作,称之为事件驱动(Event Driver)。而对事件进行处理程序或函数,我们称之为事件处理程序(Event Handler)。
事件处理程序:
在JavaScript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样,可以将前面所介绍的所有函数作为事件处理程序。
格式如下:
Function 事件处理名(参数表){
事件处理语句集;
……
}
事件驱动:
单击事件onClick:他的对象可以是button(按钮对象)、checkbox(复选框)或(检查列表框、radio (单选钮)、reset buttons(重要按钮)、submit buttons(提交按钮)
选中事件onSelect:当Text或Textarea对象中的文字被加亮后,引发该事件。
获得焦点事件onFocus:当用户单击Text或textarea以及select对象时,产生该事件。此时该对象成为前台对象
失去焦点onBlur:当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时,引发该文件,他与onFocas事件是一个对应的关系。
载入文件onLoad:当文档载入时,产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值,并用一个变量为其赋值,使它可以被源代码使用。
卸载文件onUnload:当Web页面退出时引发onUnload事件,并可更新Cookie的状态。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="JavaScript"><!--
// -->
function makeArray(n){
this.length=n
return this
}
function hexfromdec(num) {
hex=new makeArray(1);
var hexstring="";
var shifthex=16;
var temp1=num;
for(x=1; x>=0; x--) {
hex[x]=Math.round(temp1/shifthex - .5);
hex[x-1]=temp1 - hex[x] * shifthex;
temp1=hex[x-1];
shifthex /= 16;
}
for (x=1; x>=0; x--) { hexstring+=getletter(hex[x]); }
return (hexstring);
}
function getletter(num) {
if (num < 10) { return num; }
else {
if (num == 10) { return "A" }
if (num == 11) { return "B" }
if (num == 12) { return "C" }
if (num == 13) { return "D" }
if (num == 14) { return "E" }
if (num == 15) { return "F" }
}
}
function rainbow(text){
var color_d1;
var allstring="";
for(i=0;i<text.length;i=i+2){
color_d1=255*Math.sin(i/(text.length/3));
color_h1=hexfromdec(color_d1);
allstring+="<FONT COLOR="+color_h1+"ff"+color_h1+">"+text.substring(i,i+2)+"</FONT>";
}
return allstring;
}
function sizefont(text){
var color_d1;
var allstring="";
var flag=0;
for(i=0,j=0;i<text.length;i=i+1){
if (flag==0) {
j++;
if (j>=7) {
flag=1;}}
if (flag==1) {
j=j-1;
if (j<=0) {
flag=0; }}
allstring+="<FONT SIZE="+ j + ">" + text.substring(i,i+1) + "</FONT>";
}
return allstring;
}
document.write("<font size=8><CENTER>")
document.write("<BR><BR>")
document.write( sizefont("这是一个获取WEB浏览器的程序"))
document.write("</CENTER></font>")
document.write("浏览器名称: "+navigator.appName+"<br>");
document.write("版本号: "+navigator.appVersion+"<br>");
document.write("代码名字: "+navigator.appCodeName+"<br>");
document.write("用户代理标识: "+navigator.userAgent);
</script>
<title>无标题文档</title>
</head>
<body>
</body>
</html>