JavaScript脚本语言(发).ppt

JavaScript脚本语言基本知识 目标 JavaScript简介JavaScript与HTML网页JavaScript基本语法函数的使用程序流程控制 6 1JavaScript简介 为什么引入JavaScript 采用超链接技术只能提供一种静态的信息资源 缺少动态的客户端与服务器端的交互 因而在一段时间防碍了Internet技术的发展 而JavaScript的出现 无凝为Internet网上用户带来了一线生机 可以这样说 JavaScript的出现是时代的需求 是当今的信息时代造就了JavaScript 2020 3 10 4 JavaScript给我们带了什么 JavaScript的出现 它可以使得信息和用户之间不仅只是一种显示和浏览的关系 而是实现了一种实时的 动态的 可交式的表达能力 从而使静态的HTML页面被可提供动态实时信息 并对客户操作进行反应的Web页面的取代 JavaScript脚本正是满足这种需求而产生的语言 它深受广泛用户的喜爱的欢迎 它是众多脚本语言中较为优秀的一种 它与WWW的结合有效地实现了网络计算和网络计算机的蓝图 2020 3 10 5 JavaScript是什么 JavaScript是一种基于对象 Object 和事件驱动 EventDriven 并具有安全性能的脚本语言 使用它的目的是与HTML超文本标记语言 Java小程序一起实现在一个Web页面中链接多个对象 与Web客户交互作用 从而可以开发客户端的应用程序等 它是通过嵌入或调入在标准的HTML语言中实现的 它的出现弥补了HTML语言的缺陷 它是Java与HTML折衷的选择 具有以下几个基本特点 2020 3 10 6 脚本编写语言 2020 3 10 7 JavaScript是一种脚本语言 它采用小程序段的方式实现编程 像其它脚本语言一样 JavaScript同样已是一种解释性语言 它提供了一个简易的开发过程 它的基本结构形式与C C VB Delphi十分类似 但它不像这些语言一样 需要先编译 而是在程序运行过程中被逐行地解释 它与HTML标识结合在一起 从而方便用户的使用操作 基于对象的语言 2020 3 10 8 JavaScript是一种基于对象的语言 同时以可以看作一种面向对象的 这意味着它能运用自己已经创建的对象 因此 许多功能可以来自于脚本环境中对象的方法与脚本的相互作用 简单性 2020 3 10 9 JavaScript的简单性主要体现在 首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计 从而对于学习Java是一种非常好的过渡 其次它的变量类型是采用弱类型 并未使用严格的数据类型 安全性 2020 3 10 10 JavaScript是一种安全性语言 它不允许访问本地的硬盘 并不能将数据存入到服务器上 不允许对网络文档进行修改和删除 只能通过浏览器实现信息浏览或动态交互 从而有效地防止数据的丢失 动态性 2020 3 10 11 JavaScript是动态的 它可以直接对用户或客户输入做出响应 无须经过Web服务程序 它对用户的反映响应 是采用以事件驱动的方式进行的 所谓事件驱动 就是指在主页 HomePage 中执行了某种操作所产生的动作 就称为 事件 Event 比如按下鼠标 移动窗口 选择菜单等都可以视为事件 当事件发生后 可能会引起相应的事件响应 跨平台性 2020 3 10 12 JavaScript是依赖于浏览器本身 与操作环境无关 只要能运行浏览器的计算机 并支持JavaScript的浏览器就可正确执行 从而实现了 编写一次 走遍天下 的梦想 网页交互性 2020 3 10 13 实际上JavaScript最杰出之处在于可以用很小的程序做大量的事 无须有高性能的电脑 软件仅需一个字处理软件及一浏览器 无须WEB服务器通道 通过自己的电脑即可完成所有的事情 JavaScript语言可以做到回应使用者的需求事件 如 form的输入 而不用任何的网路来回传输资料 所以当一位使用者输入一项资料时 它不用经过传给服务器端 server 处理 再传回来的过程 而直接可以被客户端 client 的应用程式所处理 综上所述 JavaScript是一种有较强生命力和发展潜力的脚本描述语言 它可以被直接嵌入到HTML文档中 供浏览器解释执行 直接响应客户端事件 并调用相应的处理方法 迅速返回处理结果并更新页面实现WEB交互性和动态的要求 同时将一部分工作交给客户端处理 将WEB服务器的资源消耗降到最低 JavaScript能做什么 JavaScript脚本语言由于其效率高 功能强大等特点 在表单数据合法性验证 网页特效 交互式菜单 动态页面 数值计算等获得广泛的应用 JavaScript和Java的区别 虽然JavaScript与Java有紧密的联系 但却是两个公司开发的不同的两个产品 Java是SUN公司推出的新一代面向对象的程序设计语言 特别适合于Internet应用程序开发 JavaScript是Netscape公司的产品 其目的是为了扩展NetscapeNavigator功能 而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言 它的前身是LiveScript 基于对象和面向对象 Java是一种真正的面向对象的语言 即使是开发简单的程序 必须设计对象 JavaScript是种脚本语言 它可以用来制作与网络无关的 与用户交互作用的复杂软件 它是一种基于对象 ObjectBased 和事件驱动 EventDriver 的编程语言 因而它本身提供了非常丰富的内部对象供设计人员使用 解释和编译 两种语言在其浏览器中所执行的方式不一样 Java的源代码在传递到客户端执行之前 必须经过编译 因而客户端上必须具有相应平台上的仿真器或解释器 它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚 JavaScript是一种解释性编程语言 其源代码在发往客户端执行之前不需经过编译 而是将文本格式的字符代码发送给客户编由浏览器解释执行 强变量和弱变量 两种语言所采取的变量是不一样的 Java采用强类型变量检查 即所有变量在编译之前必须作声明 如 Integerx Stringy x 1234 x 4321 其中X 1234说明是一个整数 Y 4321说明是一个字符串 JavaScript中变量声明 采用其弱类型 即变量在使用前不需作声明 而是解释器在运行时检查其数据类型 如 x 1234 y 4321 前者说明x为其数值型变量 而后者说明y为字符型变量 代码格式不一样 Java是一种与HTML无关的格式 其代码以字节代码的形式保存在独立的文档中 JavaScript的代码是一种文本字符格式 可以直接嵌入HTML文档中 并且可动态装载 编写HTML文档就像编辑文本文件一样方便 嵌入方式不一样 在HTML文档中 两种编程语言的标识不同 JavaScript使用 来标识Java使用 来标识 JavaScript程序运行环境 软件环境 Windows95 98或其以上 浏览器 用于编辑HTML文档的字符编辑器硬件配置 首先必须具备运行Windows95 98或WindowsNT的基本硬件配置环境 推荐 基本内存32M CRT只少需要256颜色 分辨率在640X480以上 CPU只少233以上 鼠标和其它外部设置 根据需要选用 下面我们通过一个例子 编写第一个JavaScript程序 通过它可说明JavaScript的脚本是怎样被嵌入到HTML文档中的 举例 1 html 2020 3 10 23 2020 3 10 24 1 html 编写第一个JavaScript程序 如同HTML标识语言一样 JavaScript程序代码是一些可用字处理软件浏览的文本 它在描述页面的HTML相关区域出现 在 之间就可加入JavaScript代码 alert 是JavaScript的窗口对象方法 其功能是弹出一个具有OK对话框并显示 中的字符串 通过标识说明 若不认识JavaScript代码的浏览器 则所有在其中的标识均被忽略 若认识 则执行其结果 使用注释这是一个好的编程习惯 它使其他人可以读懂你的代码 2020 3 10 25 6 2JavaScript与HTML 为了运用JavaScript控制HTML页面上的对象 JavaScript的代码必须与HTML代码结合在一起 嵌入JavaScript代码的位置 之间当脚本被调用时 或者当事件被触发时 脚本就会被执行 当你把脚本放置到head部分后 就可以确保在需要使用脚本之前 它已经被载入了 之间在页面载入时脚本就会被执行 当你把脚本放置于body部分后 它就会生成页面的内容 两者混合使用 JavaScript代码与HTML代码常见的结合方式一般有两种 将JavaScript直接嵌入HTML文档 基本语法 举例 例6 1 html 基本语法 外部文件 js 的语法 2020 3 10 32 使用外部JS文件 举例 Myjs js例6 3 html 34 HTML表单标记 网页中的表单用于创建 问卷注册信息简答题调查 表单在网页中用于向网站的访问者请求信息 Form 表单的基本语法 基本语法 举例 例6 4 html 表单的input对象 基本语法 说明 text password checkbox radio image hidden file button submit resetname value checked 表2 11标记的属性值 举例 例6 5 html3 html 举例 例6 6 html 举例 例6 7 html 举例 4 html 表单的select对象 基本语法 显示值1显示值2 下拉菜单举例 例6 8 html2 html5 html 菜单列表举例 例6 9 html 表单的textarea对象 基本语法 举例 例6 10 html6 html 表单对象的引用 语法 Document 表单名 对象名 属性举例 例6 11 html 6 3基本语法 编程术语 大小写敏感 JavaScript对大小写敏感 相同的字母 大小写不同 代表的意义也不同 NameNAMEname写代码是一定要确保输入正确 数据类型 numberJavaScript数值可以是整数和浮点值整型值可以是正整数 负整数和0 可以用10进制 8进制和16进制来表示 在JavaScript中大多数字是用十进制表示的 浮点值为带小数部分的数 也可以用科学计数法来表示 这就是说 大写或小写 e 用来表示10的次方 如453 45e20 01等 NaN 不是数 当对不适当的数据进行数学运算时使用 例如字符串或未定义值 正无穷大 在JScript中如果一个正数太大的话使用它来表示 53 数据类型 string一个字符串值是排在一起的一串字母 数字和标点符号 字符串数据类型用来表示JavaScript中的文本 脚本中可以包含字符串文字 这些字符串文字放在一对匹配的的单引号或双引号中 字符串中可以包含双引号 该双引号两边需加单引号 也可以包含单引号 该单引号两边需加双引号 下面是字符串的示例 HappyamI fromcareI mfree Avast yelubbers roaredthetechnician 42 请注意 JavaScript中没有表示单个字符的类型 如C 的char 要表示JavaScript中的单个字符 应创建一个只包含一个字符的字符串 包含零个字符 的字符串是空 零长度 字符串 54 boolean尽管字符串和数字类型可以有无数不同的值 boolean数据类型却只有两个值 它们是文字true和false Boolean值是一个真值 它表示一个状态的有效性 说明该状态为真或假 null表示什么也没有 它可以和任何类型进行安全的转换 undefined声明变量后未赋值时的类型 方便后面使用object复杂的数据可以构成数据对象类型 可以把对象看成是一个命名好的容器 可以容纳数据 如该容器的某个属性值 以及对这些数据采取操作 56 变量的声明 对于一个用var声明的变量 可以在声明时赋给它一个特殊的常量null 若声明了一个变量 但不给它任何值 包括null 那么这个变量确实存在 但是却处于未定义状态 其类型为undefined 这时如果直接引用 就会产生一个错误 例如 此用法是错误的 varabc vardef 5 abc 变量的另一个重要属性就是变量的作用域 在JavaScript中同样有全局变量和局部变量 全局变量定义在所有函数之外 其作用范围是所有函数 而局部变量定义在函数内 只在该函数内有效 变量a b和c只能在其各自的函数中被访问 变量的作用域 脚本 函数function1局部变量a 函数function2局部变量b 函数function3局部变量c 可由函数1 函数2和函数3访问 全局变量gg 全局变量不需要以var关键字进行声明 但局部变量则必须以此关键字来声明 变量命名规则 变量的命名规则a 变量名必须以字母或下划线 开始 其余字符可以是字母 数字 下划线等 b 变量名中除下划线作为连字符外 不能有空格 或其他符号 c 不能使用JavaScript中的关键字作变量名 注意 JavaScript区分字母大小写 变量声明举例 Vara Vara b c Vara 2 Vara 2 b 5 在JavaScript中 变量的类型由其值的类型来决定 a 在JavaScript中 变量可以用命令var作声明 如varmytest 如varmytest Thisisabook b 在JavaScript中 变量可以不作声明 而在使用时再根据数据的类型来确定其变量的类型 如 x 100y 125 xy truecost 19 5这里 X为整数 Y为字符串 XY为布尔型 COST为实型 变量的类型 注释 语法 这是单行注释 这是多行注释 保留字和未来保留字 在JavaScript中定义了40多个关键字 也称保留字 这些保留字是JavaScript内部使用的 不能作为变量名 函数名 方法名和对象名 常用保留字参见课本 表达式 表达式指具有一定值的 将常量 变量等由运算符按照一定的法则连接起来的式子 63 运算符 运算符对一个或多个变量或值 操作数 进行运算 并返回一个新值根据所执行的运算 运算符可分为以下类别 算术运算符逻辑运算符赋值运算符 算术运算符 逻辑运算符 思考 x与x 的区别 号的用法 1 数字相加如 a 1 2 2 链接字符串如 a a b c 的用法 1 如果不在赋值表达式中 i 同 i同i i 1 2 如果在赋值表达式中 a i 同a i i a i同a i 1 i 赋值运算符用 表示 是将内容或值传给变量 一般用于变量内容的设置 X 5 x 5 x 2 等注意 和 的区别 与其他运算符的结合X 3x 3 赋值运算符 运算符的优先级 从高到低顺序为 非运算符 算术运算 逻辑运算 赋值运算括号 71 语句 JavaScript程序由若干语句组成 JavaScript语句包含若干表达式 关键词和运算符 如 varhisname Mike Jackson 语句块 用 括起来的一组JavaScript语句称为语句块语句块作为一段单独的语句可以被其它JavaScript代码调用 比如 函数 选择语句 循环语句 程序流程控制 课程内容安排 JS控制语句概述选择语句if语句 if else语句 if else if语句 switch语句循环语句for语句 while语句 do while语句 for in语句 break和continue语句异常处理语句try catch语句 try catch finally语句 throw语句 JS控制语句概述 JavaScript中提供了多种用于程序流程控制的语句 这些语句分为选择和循环两大类选择语句是指根据条件来选择一个任务分支的语句统称 实现分支程序设计switch实现多路选择功能 在给定的多个选择中选择一个符合条件的分支来执行在编程中有些指令需要重复执行很多遍 这就要编写大量的代码 而计算机则是专门用来快速完成重复和繁琐的工作 因此编程语言也就提供循环语句来减少重复指令的编写 if语句 if语句生活中一个形象的例子 某人在看钟表上的时间 如果小于凌晨6点就决定继续睡 如果大于6点 就起床去上班 编程中也有类似的问题 此时可用if语句来描述之 其测试一个Boolean表达式 结果为真则执行某段程序 if 条件语句 语句组 程序语句序列 if else语句 if else语句if语句仅根据表达式的值决定是否执行某个任务 没有其它更多的选择 而if else语句则提供双路选择功能 if 表达式成立时 语句组1 有效的程序语句 else 表达式不成立时 语句组2 有效的程序语句 if else if语句 if else if语句当有多个可供判断选择的条件时 单个if else语句显然不能表达 于是有了if else if语句 严格的说if else if不是单独的语句 而是由多个if else组合而成 实现多路判断 if 语句组1 elseif 语句组2 else 语句组3 switch语句 switch语句用if else语句实现多路选择结构使程序看起来不清晰 也不容易维护 于是可以选择switch语句代替之 switch实现多路选功能 在给定的多个选择中选择一个符合条件的分支来执行 switch case 语句组1 case 语句组2 default 语句组3 例5 4 循环语句 在编程中有些指令需要执行很多遍 这就要编写大量的代码 而计算机则是专门用来快速完成重复和繁琐的工作 因此编程语言也就提供循环语句来减少重复指令的编写将重复执行的动作放在循环语句中 计算机将根据条件执行之 JavaScript的循环语句包括 for while do while for in等4种 for语句 遇到重得执行指定次数的代码时 使用for循环比较合适在执行for循环执行体中的语句前 有三个语句将得到执行 这三个语句的运行结果将决定是否要进入for循环体 for 表达式1 表达式2 表达式3 语句组 while语句 while循环在执行循环体前测试一个条件 如果条件成立则进入循环体 否则跳到循环后的第一条语句 一些重复执行动作的情形比较简单时就不需要用for循环 可以使用while循环代替 while 条件表达式 语句组 do while语句 do while语句先执行一遍循环体 循环体内的语句执行之后再测试一个条件表达式 如果表达式成立则继续执行下一轮循环 否则跳到do while代码段后的第一条语句 do 语句组 while 条件表达式 for in语句 for in语句是for语句的一个变体 同样是for循环语句for in通常用于遍历某个集合的每个元素 比如数组由很多元素 其元素索引构成了一个集合 使用for in语句可以遍历该集合 进而取得所有元素数据 for ninset 语句组 break语句将无条件跳出并结束当前的循环结构 continue语句的作用是忽略其后的语句并结束此轮循环和开始新的一轮循环 异常处理语句 程序运行过程中难免会出错 出错后的运行结果往往是不正确的 因此运行时出错的程序通常被强制中止 运行时的错误统称为异常try catchtry catch finallythrow 为了能在错误发生时得到一个处理的机会 JavaScript提供了异常处理语句 try catch语句 try catch是一个异常捕捉和处理代码结构 当try块中的代码发生异常时 将由catch块捕捉以及处理 try tryStatements catch exception catchStatements try catch finally语句 try catch finally语句作用与try catch语句一样 唯一的区别就是当所有过程执行完毕之后前者的finally块无条件被执行throw语句当多个结构嵌套时 处于里层try catch语句不打算自己处理异常则可以将其抛出 父级try catch语句可以接收到子级抛出的异常 try tryStatements catch exception handleStatements finally fianllyStatements 数组 课程内容安排 数组介绍创建数组数组元素的基本操作数组对象常见的操作 数组介绍 数组的概念 JavaScript数组是指将多个数据编码存储 提供一致的存取方式的集合 与其它程序语言不同的是 JavaScript的数组元素的数据类型可以不相同 实际开发中 总是面临大量数据存储的问题 JavaScript语言不像C C 那样合适用于数据结构的设计 因此需要系统内部提供针对大量数据存储的工具 数组因此而产生 JavaScript数组的目标是能组织存储各种各样的数据 并且访问方式和其它语言一样 特点是能混合存储类型不相同的数据 数组介绍 单维数组 与多维数组等效的数组 数组元素 是指存储在数组中并赋予唯一索引号的数据段 各元素的数据类型可以是任意有效的JavaScript数据类型 元素按添加进数组的顺序存储于数组中 示意图如下 创建数组 创建一个空数组通过指定数组长度创建数组通过指定数组元素创建数组直接创建数组 创建数组 创建一个空数组数组在创建时可以不包含任何元素数据 即空数组 创建后返回一个数组对象 使用该对象可以往数组中添加元素 语法如下 上述语句将创建一个空数组 变量Obj引用创建后的数组对象 通过此变量可以操作数组 Array 为数组对象的构造函数 varObj newArray 创建数组 通过指定数组长度创建数组在创建数组时可以指定数组的元素长度 通过这种方式可以创建一个有指定元素个数的数组对象 语法如下 Size指明新建的数组有多少个元素 数组对象的length将被设置为Size 仅指定长度但没有实际填充元素及其数据的数组将得不到数据存储空间 varObj newArray Size 创建数组 通过指定数组元素创建数组新建的数组将包含创建时指定的元素 通常用在数据已经准备就绪的场合 语法如下 varObj newArray 元素1 元素2 元素N 创建数组演示 数组善于将每个独立的数据组织起来 提供一致的访问方式 现在创建一个数组用于保存 Peter Tom Vicky 和 Jet 这几个学生的名字 创建数组演示 0102通过指定元素创建数组03 脚本程序开始04varstudents newArray Peter Tom Vicky Jet 05for ninstudents 逐个输出数组中的名字06 07document write students n 将名字写入当前文档流08 0910 直接创建数组JavaScript创建数组的另一种简便的方式是使用 运算符直接创建 数组的元素也是创建时被指定 这种方法的目标也是创建数组 与前面的方法相比仅仅是语法上的不同 varObj 元素1 元素2 元素3 元素N 数组元素的基本操作 读取数组元素添加数组元素删除数组元素数组元素的个数 以下是最基本的数组操作 我们在使用数组时基本上都涉及到 后面我们将对它们逐一进行讲解 提示 尽管有很多种创建方式 但通常使用其中一种就足够 数组元素的基本操作 读取数组元素读取数组元素最简单的方法就是使用 运算符 使用 运算符可以一次读取一个数组元素 语法如下 目标元素通常由下标索引号决定 例如读取第一个元素为 数组名 0 依此类推下面的代码从一个填有商品名字数组中读出第二种商品的名字 数组名 下标索引 varproducts newArray 洗衣粉 香皂 洗洁精 商品列表varproduct products 1 取出第二种商品 数组元素的基本操作 添加数组元素JavaScript的数组可以动态添加新元素 也可以动态删除原有的元素 下一小节讲解如何删除 添加新元素通常使用Array对象的push方法 push方法是将新元素添加到数组的尾部 使用unshift可以将指定个数的新元素插入数组的开始位置 形成新的数组 下面是添加元素的一般形式 也可以使用 运算符指定一个新下标来添加新元素 新元素添加到指定的下标处 如果指定的下标超过数组的长度 数组将被扩展为新下标指定的长度 varstudents newArray 创建一个没有任何元素的数组students push Lily 将Lily的名字添加到数组中 数组元素的基本操作 删除数组元素通常使用delete运算符删除一个指定的元素 如果需要删除全部元素只需要删除数组对象即可 使用语法如下 例如 使用数组作为学生名单 现要删除数组中第一个元素 代码如下 delete数组名 下标 varnames Array 李莉 杨杨 有两个名字的名单deletenames 0 删除第一名字 莉莉 数组元素的基本操作 数组元素的个数数组对象的length 长度 属性指示了数组元素的个数 通过设定length属性可以指定数组的长度 在得知长度情况下可以方便的遍历整个数组 读取数组元素个数信息的方法如下代码所示 尽管指定了数组的length属性 真正的有效元素只包含已经存入数据的元素 其它没有真正填充数据的元素仍然为空 varObj newArray 1 2 3 varcount Obj length 数组对象常见的操作 将数组转换为字符串toString方法将数组表示为字符串 各个元素按顺序排列组合成为字符串返回 radix为可选项参数 表示进制 当对象是数字对象时 该参数起作用 对象名是数组对象变量名 方法执行后各元素以 隔开按顺序加入字符串中 将数组元素连接成字符串可以使用join方法将各元素组合为字符串 连接符号由用户指定 语法如下 分隔符 必选项 是一个字符串串对象 作为各元素间的分隔字符串 对象名 toString radix 数组名 join 分隔符 数组对象常见的操作 在数组尾部添加元素push方法一次可以添加单个元素或多个元素到数组末端 使用语法如下 元素 可选项 可以是一个或多个JavaScript对象 使用 分隔 数组名 push 元素1 元素2 元素N 删除数组的最后一个元素pop方法的作用是移除数组末尾的一个元素 前面讲过使用delete运算符删除指定的元素 与delete不同 pop方法删除最后一个元素后还将其返回 语法如下 数组名 pop 数组对象常见的操作 移除数组顶端的元素pop方法是移除数组末端的一个元素 而shift方法正好相反 其移除数组的第一个元素并将其返回 该方法执行后数组剩下的元素向前移动 下标索引号重新调整从0开始按顺序赋予所有元素 Shift的语法如下 在大家所熟知的基本数据结构中 队列非常有用 其遵循选进先出 FIFO 的规则 与堆栈不同 s