JavaScript脚本编程.ppt

JavaScript脚本语言,DHTML与Javascript概念 DHTML称为动态HTML，动态HTML网页的基础是HTML语言，利用CSS层叠样式表进行布局，并利用Javascript控制网页元素。 Javascript是一种基于对象和事件驱动并具有安全性能的脚本语言。当在一个HTML文件中增加Javascript脚本后，浏览器打开这个文件时，浏览器读出这个脚本并执行其指令。 在一个HTML文档被载入到浏览器之后，每一个标记（元素）都是一个对象,这种语言有很多种不同的叫法，例如微软称Javascript为JScript ECMA（一个标准化机构）负责制定这个语言的标准，最新的标准为ECMA-262，这个文档提供了所有有关的细节 Javascript是大小写敏感的语言,Javascript特点 是一种解释型语言，与HTML标记结合在一起，方便用户使用 是一种基于对象的语言 是一种简单的语言，变量类型为弱类型，未采用严格的数据类型 是一种安全的语言，不允许访问本地硬盘，不能将数据存入到服务器上，不允许对网络文档进行修改和删除 是一种跨平台的语言,JavaScript概念 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。浏览器通过内置一个JS解释器，执行JavaScript脚本指令。,编写第一个Javascript脚本 kk document.write(“”+” Brower Name is “+navigator.appName); ,观察上一段代码 无论何时想把Javascript加入到HTML文档中，都要使用标签 使用document.write（）方法可以在当前页面上输出某些文本、HTML标记等 Javascript使用+将一些短的字符串组合成一个长的字符串,Javascript基本语法 基本数据类型 数字类型 整数，如10,-2345等 浮点数，如2.12，-3.245，4.87e23等 字符串，如”hello world”，或者hello world。在javascript中，不象c语言，字符和字符串变量都是包含在双引号或者单引号中的，因此，对字符和字符串类型不加以区分,布尔型，true或者false 常量 整数常量、实数常量、字符串常量、布尔常量 null常量，表示值为空 变量 变量是一个容纳数据的容器 变量的命名：任何字母、数字、下划线、美元符号的组合都可以成为变量的名称，唯一的限制是变量的名称不可以以数字开头，而且不能和javascript中的保留字重复,变量的声明：使用var关键字。如 var mytest；或者var mytest=5；注意：javascript是一种弱类型的语言（和c语言相比），用户在声明变量的时候，不需要声明其类型，并且在使用中可以随时改变其类型。如 var x；x=5；x=“hello”； 变量的作用域：分为全局变量和局部变量。全局变量是定义在所有函数体之外，其作用范围从其定义之处一直到文档结束；局部变量则定义在函数体之内，只在函数体内可见。,var scope = “global“; function outerFunction() var scope = “local“; document.write(“The value of scope is: “ + scope);innerFunction(); function innerFunction() document.write(“The value of scope is: “ + scope); outerFunction();,数据类型之间的转换 3+2=？ 3+”2”=？ 3+3+”2”=？ 最重要的两种数据类型转化 数字到字符串 字符串到数字,字符串到数字 Javascript提供了两个内置的函数，parseInt和parseFloat parseInt（“42”）=? parseInt(“42.33”)=? parseFloat(“42”)=? parseFloat(“42.33”)=?,数字到字符串 方法：“ ”+number，如“ ”+2500=？ 注意：任意一个字符串都作为一个javascript对象存在,表达式和运算符 算数运算符：+ - * / % + - 逻辑运算符：& | ! 比较运算符： = = != 条件表达式：（条件）？A : B,基本程序语句 条件和分支语句 If语句：形式 if ( ) 语句块 else 语句块 Switch语句：形式 switch （） case label1: 语句块1 case label2: 语句块2 . default: 语句块n ,循环语句 For语句： 形式 for（初始化部分；条件部分；更新部分） 语句块 While语句：形式 while（条件） 语句块 Break语句：结束当前的循环，把程序的控制权交给循环的下一条语句，即跳出整个循环 Continue语句：结束当前的某一次循环，但是没有跳出整个循环,函数 函数为程序设计人员提供了方便，通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数，从而使得程序清晰，易懂、易读、易维护 定义函数 函数定义和函数调用不同，定义函数只是让js解释器知道函数的存在，而只有函数被调用，代码才会执行,定义的基本语法： function 函数名称（参数表） 函数代码 返回值使用return语句 函数必须先定义后调用 问题：函数定义在一个script标记对中，能不能在另一个script中调用？,Javascript对象 面向对象的程序设计方法有以下三个特性 封装性 继承性 多态性 Javascript是基于对象的，把复杂对象统一起来，形成一个非常强大的对象系统，我们可以使用以下几种对象 由浏览器根据web页面的内容自动提供的对象-A Javascript内置的对象，如String，event等-B 用户自定义的对象-C,对象种类A 这种对象是网页和浏览器本身各种实体元素在javascript程序中的体现 navigator对象：管理着当前使用的浏览器的版本号、运行的平台以及使用的语言等信息 常用属性：appName：浏览器名称；appVersion：浏览器版本号 示例,window对象：代表整个浏览器窗口，处于对象模型的最顶层 常用的属性和方法：confirm（），alert（），close（） 示例 document对象：代表整个文档 常用方法：getElementById（）,对象种类B String对象：处理所有的字符串操作 Date对象：处理日期和时间的操作 定义：new Date； 示例：输出当前的时钟和分钟 Math对象：处理各种数学运算 使用：Math.数学函数（参数） 示例：输出sin(1)的值,数组对象：将数据组织在一起，下标从零开始，javascript中的数组不需要指定大小 定义：var s=new Array（） 示例,Javascript的事件 当用户发出单击鼠标、移动鼠标等动作（但不仅限于此）时，我们称之为发生了一个“事件”。而“事件处理程序”则是指事件发生时执行的一系列javascript代码。 事件处理程序与事件的绑定 通过设置标签属性来绑定，事件名称：事件处理程序,事件对象 事件对象的产生 每当一个事件激发的时候，一个对应的event object被浏览器在内存中创建，例如当你点击一个按钮的时候，一个event object被创建 对象的属性反映了事件的一些信息，浏览器在创建一个事件对象的时候，对它的属性赋值，如鼠标的坐标等 几乎所有的事件对象的属性都是只读的 注意：事件对象只在你的事件处理函数中是有效的,注意：事件处理器的返回值，为false表示取消默认的处理（如点击一个超级链接默认转到相应的网页，通过设置onclick返回值为false可以取消这种默认处理）,常见事件 Onclick ondbclick Onload Onunload Onmouseover Onmouseout onmousemove,Javascript与CSS的结合 通过改变元素对象的className属性，改变元素的CSS规则 通过改变元素对象的style集合属性（优先级最高） 实例-围绕鼠标的星星特效（pixelTop，pixelLeft属性）,例子 显示鼠标坐标（关键：事件处理函数，event的x，y属性） 改变状态栏显示内容(关键：window.status) 改变文字颜色 改变文字内容（innerText）,Javascript中定时器的使用 window.setTimeout(代码，时间） window.setInterval(代码，时间） 代码如”a()” 上述两个函数都返回一个ID，取消执行分别用window.clearTimeout（ID）， window.clearInterval（ID）， 实例：实现一个文本对象的闪烁(display-none,blcok;visibilityv