版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第10章JavaScript基础目录JavaScript概述01JavaScript程序基础02JavaScript消息框和函数03JavaScript事件处理0410.1JavaScript概述JavaScript是由Netscape公司开发并随Navigator导航者一起发布的、介于Java与HTML之间、基于对象事件驱动的编程语言。因它的开发环境简单，不需要Java编译器，而是直接运行在Web浏览器中，因此倍受Web设计者的喜爱。10.1.1JavaScript特点解释性：不同于编译性的语言，它是解释性语言，直接由浏览器执行。简单性：语言结构简单，容易学习。安全性：不允许访问本地的硬盘，同时不能将数据存入到服务器，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，这样可以有效的防止数据丢失。动态性：可以直接对用户或客户输入做出响应，不需要通过web服务器，它的响应是通过事件驱动完成的，比如按下鼠标、选择菜单等等。跨平台性：只依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机并支持JavaScript的都可以运行。10.1.2JavaScript代码编写下面来编写第一个JavaScript程序。下面的JavaScript实现了弹出消息框的功能，运行后屏幕会相继显示两个消息框，第一个是：“欢迎光临JS世界！”，第二个是“精彩内容即将呈现！”。<html>
<head>
<ScriptLanguage="JavaScript">
alert("欢迎光临JS世界!");
alert("精彩内容即将呈现！");
</Script>
</head>
</html>JavaScript代码由<ScriptLanguage="JavaScript">...</Script>说明，表示JavaScript脚本源代码将放入其间。语句alert()是JavaScript的窗口对象方法，其功能是弹出一个具有OK对话框并显示（）中的字符串。10.1.3JavaScript代码的加入JavaScript代码可以放在<head></head>，也可以直接将JavaScript脚本加入body中，例如：<body><ScriptLanguage="JavaScript">alert("欢迎光临JS世界!");
alert("精彩内容即将呈现！");</Script></body><ScriptLanguage="JavaScript">通过属性Language="JavaScript"说明标识中是使用的何种语言，这里是JavaScript语言,表示在JavaScript中使用的语言。上述代码将在浏览器解析到<body>部分时被执行，弹出两个消息框。10.1.4JavaScript的调用方式JavaScript可以使用以下几种方式调用：1）脚本在head标记中，定义成函数的形式，在body中调用。例如下面在head中写了一个函数，函数的内容是弹出消息框，在body中通过命令按钮的单击事件来调用。<head>
<script>
functionmessage()
{
window.alert("welcome!");
}
</script>
<title>js调用</title></head><body>
<formaction="post">
<inputtype="button"onclick="message()"value="单击">
</form></body>10.1.4JavaScript的调用方式2）脚本位于外部JS文件中，在head中引入，在body中调用。例如这里写了一个“message（）”的函数，放在demo.js文件中，需要把该文件在head区通过插入JavaScript的标签导入。在body区域的按钮的单击事件中调用了“message()”函数。<!DOCTYPEhtml><htmllang="en"><head><scriptsrc="demo.js"></script>
<title>js调用</title></head><body>
<formaction="post">
<inputtype="button"onclick="message()"value="单击">
</form></body></html>demo.js文件如下：functionmessage()
{
window.alert("welcome!");
}10.1.4JavaScript的调用方式3）直接在body中写Javascript代码，例如：<body><ScriptLanguage="JavaScript">alert（“欢迎光临！”）；alert(“下面将进入代码学习”);</Script></body>10.1.4JavaScript的调用方式4）直接写在事件处理的代码中。这种方式直接在按钮的单击事件中写入处理代码。这种方式适合代码短小的情况。下面的例子实现了单击“单击我”按钮，弹出“操作错误”的消息框。<inputtype="button"onclick="alert('操作错误')"value="点击我">10.2Javascript程序基础10.2.1语句JavaScript语句是发给浏览器的命令，这些命令的作用是告诉浏览器该执行什么操作。语句的类型主要包括：变量声明语句、输入/输出语句、表达式语句、程序流向控制语句和返回语句。1)语句JS语句同Java语句相同，在语句中可以包含变量、关键字、运算符和表达式，语句结束符使用英文分号“；”，在语句的结尾也可以不使用结束符。下面是JS语句的例子：varname="王小鱼";varr=3.0;c=2*3.14*r;其中，第1条语句是定义一个变量name，将字符串“王小鱼”赋值给变量name；第2条语句是将小数3.0赋值给浮点变量r；第3条语句是复合赋值语句，首先计算赋值运算符“=”右侧的表达式，然后将计算结果赋值给浮点变量c。10.2.1语句2）代码块JS代码块使用一对大括号“{}”将多条JS语句组合在一起，完成一个特定的功能。JS代码块一般在函数、条件结构、循环结构内部使用。下面是一个JS函数的案例代码：functionverify(){
r=3.0;c
=2*3.14*r;
alert(c);}其中，function为声明JS函数的关键字，verify（）是函数名称，函数主体使用一对大括号“{}”括起来，由大括号括起来的是Js代码块。10.2.1语句3）注释语句
JS的注释分为单行注释和多行注释，被注释的内容将不会被执行。单行注释使用双斜杠，多行注释用单斜杠加星号表示。varname=”ss”;//定义一个变量/*以下代码将不会被执行varn=5;for(i=1;i<=n;i++)s=s+i;*/10.2.2程序结构JavaScript脚本语言是通过语句、函数、对象、方法和属性来实现编程的，在程序结构上有顺序、循环、选择三种基本结构。任何简单或复杂的算法都可以由这三种基本的结构组合而成。图10-2显示了这三种结构的流程图：IF选择结构基本格式：if（条件表达式）
语句段１；
......
else
语句段２；
.....
功能：若表达式为true，则执行语句段１；否则执行语句段２。IF语句嵌套IF嵌套语句用于处理有多分支的情况，其执行过程为依次判断表达式的值，如果值为True，则执行相应的语句，否则执行else后的语句。其结构如下：if（条件表达式）语句块１；
else
if（条件表达式）语句块２；
elseif（条件表达式）语句块３；
……
else语句块４；
10.2.2程序结构switchcase语句<scripttype="text/javascript">
varscore=prompt("请输入你的成绩");
switch(Math.floor(score/10))//获得分数的十位上的数字{case10:case9:document.write("考试成绩为"+score+"分，优秀！");break;case8:document.write("考试成绩为"+score+"分，良好！");break;case7:document.write("考试成绩为"+score+"分，中等！");break;
case6:document.write("考试成绩为"+score+"分，及格！");break;case5:case4:case3:case2:case1:case0:document.write("考试成绩为"+score+"分，不及格！");break;default:document.write("输入错误！");break;
}
</script>10.2.2程序结构循环语句for和whilefor语句和while语句都可以实现循环的功能，其中for语句的基本格式如下：
for（初始化；条件；增量）
{语句块；}
功能：实现条件循环，当条件成立时，执行语句块，否则跳出循环体。
说明：
初始化参数告诉循环的开始位置，必须赋予变量的初值；
条件：是用于判别循环停止时的条件。若条件满足，则执行循环体，否则跳出。
增量：主要定义循环控制变量在每次循环时按什么方式变化。
三个主要语句之间，必须使用逗号分隔。10.2.2程序结构while（条件）
{语句块}；
该语句与For语句一样，当条件为真时，重复循环执行语句块，否则退出循环。用while语句实现的程序为：<body><scripttype="text/javascript">vari=1,sum=0;while(i<=100){sum=sum+i;i=i+1;}document.write("1～100的数字之和为"+sum);</script></body>10.2.3函数函数是预先编写好的完成某一个独立功能的代码组合，是由事件驱动或者被调用的能够重复执行的单元。JavaScript函数定义：Function函数名（参数,变元）{函数体;Return表达式;}函数由关键字Function定义，后面的函数名表示定义自己函数的名字，函数名区分大小写。参数表是传递给函数使用或操作的值，其值可以是常量、变量或其它表达式。
用户通过指定函数名（实参）来调用一个函数，当调用函数时,所用变量或字面量均可作为变元传递。要注意的是，必须使用return将值返回。
例如下面在<head>区写了名称为c(n1,n2)的函数，函数的功能是返回两个参数（n1和n2）和的2倍。10.3Javascript消息框
JS消息对话框主要有三种：警告框alert(message)确认框confirm(message)提示框:prompt(text,defautValue)警告框用于弹出警告消息。例如下面的js代码执行后，会弹出三条警告框消息。<ScriptLanguage="JavaScript">//JavaScriptAppearsherealert("此次执行将删除所有的数据!");alert("请再次确认是否已经保存数据!");alert("数据删除后将不能再恢复！");</Script>10.4Javascript事件处理
JavaScript是采用事件驱动(event-driven)的模式。通常鼠标或热键的动作称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（EventDriver），对事件进行处理程序或函数，称之为事件处理程序（EventHandler）。在JavaScript中对象事件的处理通常由函数(function)担任。其基本格式与函数全部一样，可以将前面所介绍的所有函数作为事件处理程序。
格式如下：function
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论