JavaScript教程--从入门到精通(3)

2023-02-19 18:36:02JavaScript021

JavaScript教程--从入门到精通(3),第1张

JavaScript程序构成

JavaScript脚本语言的基本构成是由控制语句函数对象方法属性等来实现编程的

一程序控制流在任何一种语言中程序控制流是必须的它能使得整个程序减小混乱使之顺利按其一定的方式执行下面是JavaScript常用的程序控制流结构及语句:1 if条件语句　基本格式if（表述式）语句段1 else语句段2 　功能若表达式为true 则执行语句段1 否则执行语句段2 　说明 if else 语句是JavaScript中最基本的控制语句通过它可以改变语句的执行顺序表达式中必须使用关系语句来实现判断它是作为一个布尔值来估算的它将零和非零的数分别转化成false和true 若if后的语句有多行则必须使用花括号将其括起来　if语句的嵌套if（布尔值）语句1 else（布尔值）语句2 else if（布尔值）语句3 ……else 语句4 　在这种情况下每一级的布尔表述式都会被计算若为真则执行其相应的语句否则执行else后的语句　2 For循环语句　基本格式for（初始化条件增量）语句集　功能实现条件循环当条件成立时执行语句集否则跳出循环体　说明初始化参数告诉循环的开始位置必须赋予变量的初值条件是用于判别循环停止时的条件若条件满足则执行循环体否则跳出增量主要定义循环控制变量在每次循环时按什么方式变化三个主要语句之间必须使用逗号分隔　3 while循环　基本格式while（条件）语句集该语句与For语句一样当条件为真时重复循环否则退出循环　For与while语句两种语句都是循环语句使用For语句在处理有关数字时更易看懂也较紧凑而while循环对复杂的语句效果更特别

4 break和continue语句与C++语言相同使用break语句使得循环从For或while中跳出 continue使得跳过循环内剩余的语句而进入下一次循环

二函数函数为程序设计人员提供了一个丰常方便的能力通常在进行一个复杂的程序设计时总是根据所要完成的功能将程序划分为一些相对独立的部分每部分编写一个函数从而使各部分充分独立任务单一程序清晰易懂易读易维护 JavaScript函数可以封装那些在程序中可能要多次用到的模块并可作为事件驱动的结果而调用的程序从而实现一个函数把它与事件驱动相关联这是与其它语言不样的地方

1 JavaScript函数定义Function 函数名（参数变元）{函数体Return 表达式}说明　当调用函数时所用变量或字面量均可作为变元传递　函数由关键字Function定义　函数名定义自己函数的名字　参数表是传递给函数使用或操作的值其值可以是常量变量或其它表达式　通过指定函数名（实参）来调用一个函数　必须使用Return将值返回　函数名对大小写是敏感的　2 函数中的形式参数在函数的定义中我们看到函数名后有参数表这些参数变量可能是一个或几个那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments Length来检查参数的个数例 Function function_Name(exp exp exp exp )Number =function _Name arguments lengthif (Number>）document wrile(exp )if (Number>)document write(exp )if(Number>)document write(exp )

三事件驱动及事件处理1 基本概念JavaScript是基于对象(object based)的语言这与Java不同 Java是面向对象的语言而基于对象的基本特征就是采用事件驱动(event driven) 它是在用形界面的环境下使得一切输入变化简单化通常鼠标或热键的动作我们称之为事件（Event）而由鼠标或热键引发的一连串程序的动作称之为事件驱动（Event Driver）而对事件进行处理程序或函数我们称之为事件处理程序（Event Handler）

2 事件处理程序在JavaScript中对象事件的处理通常由函数(Function)担任其基本格式与函数全部一样可以将前面所介绍的所有函数作为事件处理程序格式如下 Function 事件处理名（参数表）{事件处理语句集 ……}

3 事件驱动JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的它主要有以下几个事件（1）单击事件onClick当用户单击鼠标按钮时产生onClick事件同时onClick指定的事件处理程序或代码将被调用执行通常在下列基本对象中产生 button（按钮对象）checkbox（复选框）或（检查列表框）radio （单选钮）reset buttons（重要按钮）submit buttons（提交按钮）

例可通过下列按钮激活change()文件 <Form><Input type= button Value= onClick= change() ></Form>在onClick等号后可以使用自己编写的函数作为事件处理程序也可以使用JavaScript中内部的函数还可以直接使用JavaScript的代码等例 <Input type= button value= onclick=alert( 这是一个例子）（2）onChange改变事件当利用text或texturea元素输入字符值改变时发该事件同时当在select表格项中一个选项状态改变后也会引发该事件例 <Form><Input type= text name= Test value= Test onCharge= check( this test) ></Form>（3）选中事件onSelect当Text或Textarea对象中的文字被加亮后引发该事件（4）获得焦点事件onFocus当用户单击Text或textarea以及select对象时产生该事件此时该对象成为前台对象（5）失去焦点onBlur当text对象或textarea对象以及select对象不再拥有焦点而退到后台时引发该文件他与onFocas事件是一个对应的关系（6）载入文件onLoad当文档载入时产生该事件 onLoad一个作用就是在首次载入一个文档时检测cookie的值并用一个变量为其赋值使它可以被源代码使用（7）卸载文件onUnload当Web页面退出时引发onUnload事件并可更新Cookie的状态

四范例范例下例程序是一个自动装载和自动卸载的例子即当装入HTML文档时调用loadform()函数而退出该文档进入另一HTML文档时则首先调用unloadform()函数确认后方可进入 <HTML><HEAD><script Language= JavaScript ><! function loadform(){alert( 这是一个自动装载例子! )}function unloadform(){alert( 这是一个卸载例子! )}// ></Script></HEAD><BODY OnLoad= loadform() OnUnload= unloadform() ><a >调用</a></BODY></HTML>　范例这是一个获取浏览器版本号的程序该程序首先显示一个波浪一提示信息之后显示浏览器的版本号有关信息 <><head><script language= JavaScript ><! // >function makeArray(n){this length=nreturn this}function hexfromdec(num) {hex=new makeArray( )var hexstring= var shifthex= var temp =numfor(x= x>= x ) {hex[x]=Math round(temp /shifthex )hex[x ]=temp hex[x] * shifthextemp =hex[x ]shifthex /= }for (x= x>= x ) { hexstring+=getletter(hex[x])}return (hexstring)}　function getletter(num) {if (num <) { return num}else {if (num == ) { return A }if (num == ) { return B }if (num == ) { return C }if (num == ) { return D }if (num == ) { return E }if (num == ) { return F }}}function rainbow(text){var color_d var allstring= for(i= i<text lengthi=i+ ){color_d = *Math sin(i/(text length/ ))color_h =hexfromdec(color_d )allstring+= <FONT COLOR= +color_h + ff +color_h + >+text substring(i i+ )+ </FONT>}return allstring}　function sizefont(text){var color_d var allstring= var flag= for(i= j= i<text lengthi=i+ ){if (flag== ) {j++if (j>= ) {flag= }}if (flag== ) {j=j if (j<= ) {flag= }}allstring+= <FONT SIZE= + j + >+ text substring(i i+ ) + </FONT>}return allstring}document write( <font size= ><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><body></body></>输出结果图所示

图

lishixinzhi/Article/program/Java/JSP/201311/19230

下面复制于网络，详细讲解javascript中的各种控制结构。

一、条件选择结构

条件选择语句用于基于不同的条件来执行不同的动作，通常在写代码时，总是需要为不同的决定来执行不同的

动作，可以在代码中使用条件语句来完成该任务。

在JavaScript中，我们可使用以下条件语句：

if 语句：只有当指定条件为true时，使用该语句来执行代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JS流程控制语句</title>

</head>

<body>

<p>如果时间早于 20:00，会获得问候 "Good day"。</p>

var time=new Date().getHours()

document.write("当前北京时间："+time)

function myFunction()

{

var x=""

if (time<20)

{

x="Good day"

}

document.getElementById("demo").innerHTML=x

}

</script>

</body>

</html>

运行的结果为：

if...else语句：当条件为true时执行代码，当条件为 false 时执行其他代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JS流程控制语句</title>

</head>

<body>

<p>如果时间早于 20:00，会获得问候 "Good day"。如果时间晚于 20:00，会获得问候 "Good evening"。</p>

var time=new Date().getHours()

document.write("当前北京时间："+time)

function myFunction()

{

var x=""

if (time<20)

{

x="Good day"

}

else

{

x="Good evening"

}

document.getElementById("demo").innerHTML=x

}

</script>

</body>

</html>

运行的结果为：

if...else if....else 语句：使用该语句来选择多个代码块之一来执行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JS流程控制语句</title>

</head>

<body>

<p>如果时间早于 10:00，会获得问候 "Good morning"。</p>

<p>如果时间早于 20:00，会获得问候 "Good day"。</p>

<p>如果时间晚于 20:00，会获得问候 "Good evening"。</p>

var time=new Date().getHours()

document.write("当前北京时间："+time)

function myFunction()

{

var x=""

if (time<10)

{

x="Good morning"

}

else if (time<20)

{

x="Good day"

}

else

{

x="Good evening"

}

document.getElementById("demo").innerHTML=x

}

</script>

</body>

</html>

运行的结果为：

switch语句：使用该语句来选择多个代码块之一来执行。switch 语句用于基于不同的条件来执行不同的动作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JS流程控制语句2</title>

</head>

<body>

<p>点击下面的按钮来显示今天是周几：</p>

var d=new Date().getDay()

document.write("今天的星期代表数字："+d)

function myFunction()

{ var x

switch (d)

{

case 0:

x="Today it's Sunday"

break

case 1:

x="Today it's Monday"

break

case 2:

x="Today it's Tuesday"

break

case 3:

x="Today it's Wednesday"

break

case 4:

x="Today it's Thursday"

break

case 5:

x="Today it's Friday"

break

case 6:

x="Today it's Saturday"

break

}

document.getElementById("demo").innerHTML=x

}

</script>

</body>

</html>

运行的结果：

default关键字的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JS流程控制语句2</title>

</head>

<body>

<p>点击下面的按钮来显示今天是周几：</p>

var d=new Date().getDay()

document.write("今天的星期代表数字："+d)

function myFunction()

{ var x

switch (d)

{

case 6:

x="Today it's Saturday"

break

case 0:

x="Today it's Sunday"

break

default:

x="Looking forward to the Weekend"

}

document.getElementById("demo").innerHTML=x

}

</script>

</body>

</html>

运行的结果为：

二、循环结构

循环可以将代码块执行指定的次数。

JavaScript支持不同类型的循环：

(1)for语句：循环代码块一定的次数

for(var box=1box<=10box++)

{

document.write("box="+box+"<br/>")

}

运行的结果为：

(2)for...in语句：循环遍历对象的属性

var box={

name:"张三",

age:24,

sex:"男"

}

for(x in box)

{

document.write(box[x]+"<br/>")

}

运行的结果为：

(3)while语句：当指定的条件为 true 时循环指定的代码块。先判断，再执行语句，这种比较实用。

var box=1

while(box<=5)

{

document.write("box="+box+"<br/>")

box++

}

运行的结果为：

(4)do...while - 同样当指定的条件为 true 时循环指定的代码块。先执行一次，再判断

var box=1

do{

document.write("box="+box+"<br/>")

box++

}while(box<=10)

运行的结果为：

三、其他语句

(1)break语句：用于跳出循环。

for(var box=1box<=10box++)

{

if(box==5)

{

break//强制退出整个循环

}

document.write("box="+box+"<br/>")

}

运行的结果为：

执行到第四次循环时不再继续执行，跳出了真个循环,，输出的少了box=5以后的循环。

(2)continue语句：用于跳过循环中的一个迭代。

for(var box=1box<=10box++)

{

if(box==5)

{

continue//退出当前循环，还会继续执行后面的循环

}

document.write("box="+box+"<br/>")

}

运行的结果为：

执行到第四次循环时，跳出第五次循环，继续向下面执行，输出的少了box=5。

(3)with语句：将代码的作用域设置到一个特定的对象中

先来看一般我们是怎么样输出对象的属性的值的：

var box={

name:"张三",

age:24,

sex:"男"

}

var n=box.name

var a=box.age

var s=box.sex

document.write(n+"<br/>")

document.write(a+"<br/>")

document.write(s)

运行的结果为：

改用with语句来写：

var box={

name:"张三",

age:24,

sex:"男"

}

with(box){

var n=name

var a=age

var s=sex

}

document.write(n+"<br/>")

document.write(a+"<br/>")

document.write(s)

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：js是多大码的衣服

# 下一篇：CSS之字体图标 icon 的多种实现

推荐阅读

热门文章

最新发布

标签列表

JavaScript教程--从入门到精通(3)

给您推荐相同类型的内容：