本科网页设计与制作实例教程978 7 307 10379 5 教学全套课件资源包03 教学课件第9章 JavaScript语言基础.ppt

《本科网页设计与制作实例教程978 7 307 10379 5 教学全套课件资源包03 教学课件第9章 JavaScript语言基础.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计与制作实例教程主讲教师9.1JavaScript基础9.2事件响应9.3对象基础第9章JavaScript语言基础本章主要介绍了JavaScript的基本知识及应用，包括JavaScript的特点、使用方式、位置，JavaScript脚本的基本语法、控制语句。学习重点第9章JavaScript语言基础1.JavaScript的特点在实际应用中，JavaScript具有以下几个基本特点。（1）脚本编写语言。（2）基于对象的语言。（3）简单性。（4）动态性。（5）跨平台性。（6）安全性。9.1

2、.1JavaScript概述9.1JavaScript基础2.JavaScript的使用方式（1）嵌入方式。这是最常用的方法，JavaScript脚本直接置于〈script〉和〈/script〉之间。格式为〈scriptlanguage="JavaScript"〉〈!--JavaScript脚本--〉〈/script〉9.1.1JavaScript概述9.1JavaScript基础（2）引用方式。若JavaScript脚本较长，则可以保存为一个文件（后缀为.js），然后再调用该文件即可。调用方式为

3、〈scriptsrc="URL"language="JavaScript"〉…〈/script〉9.1.1JavaScript概述9.1JavaScript基础1.基本数据类型JavaScript提供了4种基本的数据类型：数值（整数和实数）、字符串型、布尔型（true或false）和空值。2.变量（1）变量的命名。JavaScript的变量通过var声明，var可以声明任何类型的数据。格式为var变量名；或var变量名="变量值"；9.1.2JavaScript语法9.1JavaScript基础（

4、2）变量的类型。JavaScript中有全局变量和局部变量2种变量。其中，全局变量定义在所有函数体之外，其作用范围是整个程序；局部变量定义在函数体之内，只对该函数是可见的，对其他函数不可见。9.1.2JavaScript语法9.1JavaScript基础3．常量常量是指程序执行过程中值不变的变量。4.表达式表达式是变量、常量、布尔及运算符的集合，可分为算术表达式、字串表达式、赋值表达式及布尔逻辑表达式等。9.1.2JavaScript语法9.1JavaScript基础5．函数函数是指进行复杂的程序

5、设计时，将所要完成的复杂功能划分成一些相对独立的部分，为每个部分所编写的程序。格式为function函数名（参数）{函数体；Return表达式；}9.1.2JavaScript语法9.1JavaScript基础1.算术运算符JavaScript中的算术运算符如下表所示。9.1.3运算符9.1JavaScript基础2.比较运算符JavaScript中的比较运算符如下表所示。9.1.3运算符9.1JavaScript基础3.布尔逻辑运算符9.1.3运算符9.1JavaScript基础1．if条件语句

6、if(表达式)语句段1；…else语句段2；…若表达式为true，则执行语句段1；否则执行语句段2。9.1.4控制语句9.1JavaScript基础2．for循环语句for(初始化；条件；增量)语句集；实现条件循环，当条件成立时，执行语句集，否则跳出循环体。3.while循环语句while(条件)语句集；该语句与for语句一样，当条件为真时，重复循环，否则退出循环。9.1.4控制语句9.1JavaScript基础4．break和continue语句与C++语言相同，使用break语句可以使循环从f

7、or或while中跳出，continue可以跳过循环内剩余的语句而进入下一次循环。9.1.4控制语句9.1JavaScript基础用户在超链接上单击、改变文本框内容和页面关闭等都是事件的实现。下表列出了常用的JavaScript事件。9.2.1事件处理概述9.2事件响应不同的HTML元素可以产生不同的事件，每个事件都有与之对应的事件处理属性（以“on+事件名”的方式命名），只需为其指定（编写）事件对应的事件处理程序，就可以处理这个事件。常见的HTML元素及其事件处理属性如下表所示。9.2.1事件处

8、理概述9.2事件响应为事件处理属性设置处理程序的格式为on事件名=事件处理函数（或JavaScript语句）9.2.1事件处理概述9.2事件响应1．onBlur事件当一个对象失去焦点时，blur事件被触发。〈inputtype=textname=usernameonBlur="if(this．value==′′){alert(′youmustinputavalue!′)；this．focus()；}"〉9.2.2事件处理器9.2事件响应2．onChange事件当文本输入区的内容被更