《网页设计实例教程 教学课件 ppt 作者 陈旭东 孙永芳 崔为花 张晓诺 09》由会员分享，可在线阅读，更多相关《网页设计实例教程 教学课件 ppt 作者 陈旭东 孙永芳 崔为花 张晓诺 09（57页珍藏版）》请在金锄头文库上搜索。
1、,网页制作实例教程 第9章 JavaScript基本知识,本章内容,9.1 基 本 概 念 9.2 JavaScript 基本语法 9.3 JavaScript事件的使用 9.4 使用JavaScript操作HTML对象 9.5 JavaScript应用实例,9.1 基 本 概 念,9.1.1 什么是JavaScript 9.1.2 JavaScript基本特点 9.1.3 Ajax和JQuery的概念 9.1.4 在页面中使用JavaScript,9.1.1 什么是JavaScript,JavaScript是由网景（Netscape）公司开发的，最初的版本称为Livescript。自从Sun
2、公司推出著名的Java语言之后，Netscape公司引进了Sun公司有关Java的程序概念，将自己原有的Livescript 重新进行设计，并改名为JavaScript。 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动。使用它的目的是与HTML一起实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。,JavaScript具有很多优点：,1.简单性 JavaScript是一种脚本编写语言，它采用小程序段的方式实现编程，像其它脚本语言一样，JavaScrip
3、t同样也是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C+、VB、Delphi十分类似。但它不需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。 2.动态性 JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。,JavaScript具有很多优点：,3.跨平台性 JavaScript是
4、依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。 4.节省网络交互时间 JavaScript是一种基于客户端浏览器的语言，用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的，即使是必须调用服务器端的某个功能，浏览器只将用户输入验证后的信息提交给远程的服务器，大大减少了服务器的开销。 常用的网页脚本技术有JavaScript、VBScript和JScript。其中VBScript和JScript都是微软推出的脚本技术。相对于JavaScript，VBScript代码琐碎，
5、难以阅读，在微软的软件中能得到很好的支持，但在其他大公司的软件里就不那么风光了。而JScript现在只有微软的IE浏览器支持。JavaScript代码易于阅读，易于学习掌握。几乎所有的浏览器都能很好的支持JavaScript。,9.1.2 JavaScript基本特点,1JavaScript是基于对象的（Object-Based） 说它基于对象（Object-Based），而不是面向对象（Object-Oriented），主要是因为它没有提供抽象、继承、重载等有关面向对象的许多功能，而是把HTML对象、浏览器对象以及自身的内置对象等统一起来，形成一个非常强大的对象系统。 2JavaScript
6、是事件驱动的（Event-Driven） 事件驱动（Event-Driven）是指JavaScript所实现的功能根据页面上产生的事件来执行。比如鼠标点击、键盘按键等。特定的脚本代码功能要和不同的事件联系起来，当在页面上发生相应事件时由浏览器解释执行。,9.1.2 JavaScript基本特点,3是一种脚本编写语言 脚本语言的意思就是不需要编译，嵌入在HTML网页中，以源码形式存在，由浏览器解释执行。在代码形式上以小程序段的方式编程，提供了一个简易的开发过程。 4安全性 使用JavaScript不能访问本地硬盘，不能把数据存到服务器上，不允许对网络文档进行修改和删除。因而该语言具有很高的安全性
7、。 在这里澄清一下概念，不要以为JavaScript和Java有什么关系。它们虽然在语法上相似，但却是不同公司产品，应用范围也不同。Java是可以支持企业级架构的高级程序设计语言，而JavaScript是只用于网页的脚本语言。,9.1.3 Ajax和JQuery的概念,AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 它是Javascript通过调用浏览器提供的对象与服务器进行异步交互的网络访问技术，即可以在客户端界面不进行整体刷新的情况下，从服务器获取某些数据。 jQuery是一个
8、快速的，简洁的javaScript库，使用户能更方便地处理HTML文档对象、页面事件、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。,9.1.4 在页面中使用JavaScript,JavaScript代码是嵌入到HTML文件中的，主要有两种形式： 1在页面中嵌入脚本代码 在HTML文件中可以进行JavaScript功能的定义，使用标记可以在页面的头部内定义脚本功能，也可以在主体内进行定义。,实例9-1 在页面头部嵌入脚本代码, Javascript基本程序语句 document.w
9、rite(“嗨！这行文本由Javascript代码生成！“); /向页面输出文本 function welcome() /*该函数执行时弹出一个对话框：*/ alert(“欢迎来到本站“); welcome(); /调用函数使其执行 ,实例9-2 在body内嵌入脚本代码, Javascript基本程序语句 document.write(“嗨！这行文本由Javascript代码生成！“); /向页面输出文本 function welcome() /*该函数执行时弹出一个对话框：欢迎来到本站*/ alert(“欢迎来到本站“); welcome(); /调用函数使其执行 ,2引入外部脚本文件,将
10、脚本代码另存为文件，文件名的格式为：*.js，一般在页面的头部内引入外部脚本。假设外部脚本文件为jquery.js，则引入脚本文件的语句为： 引入脚本程序 ,9.2 JavaScript 基本语法,9.2.1 弱类型的概念 9.2.2 变量和常量 9.2.3 运算符和表达式 9.2.4 基本程序语句,9.2.1 弱类型的概念,Javascript是弱类型的编程语言。弱类型语言是相对强类型语言来说的，在强类型语言中，变量类型有多种，例如int char float boolean 等。 在定义JavaScript的变量时不用区分类型，关键字都使用var，可以随便的给variable赋值，不会有任
11、何问题。可是赋给变量的值本身自己却是有类型的，在编写javascript程序时要区分清楚，否则在进行运算时会出错，, /* 变量类型根据赋值来确定*/ var num = 8; /声明num变量，赋值为8，则num数据类型为整型 num=“开心“; /给num变量赋值“开心“，num变量的类型转换为字符串型 var o = new Date(); /o为Date类型的对象 function output( val ) /*函数参数不必声明*/ /*函数返回值可以是任意类型*/ return true; ,弱类型的基本特点,由以上代码可以看到，弱类型的基本特点： 1）在定义变量的时候，关键字都是
12、var，变量的实际类型由赋值决定。 2）自定义函数有没有返回值以及返回值的类型不必声明，由return语句决定。,实例9-5 Javascript类型转换函数,在使用script变量的有一种容易混淆的情况，例如一个变量以字符串类型存储了数字，然后下面的程序要进行数学运算，这是就要使用javascript的类型转换函数，如下代码所示： var add1 = “5“; var add2 = “6“; var sum1 = add1 + add2; var sum2 = parseInt(add1) + parseInt(add2); document.write(sum1); document.w
13、rite(“); document.write(sum2); ,输出： 56 11,9.2.2 变量和常量,1常量 在JavaScript中，常量有一下六种基本类型。 （1）整型常量：可以使用十进制、十六进制和八进制，如：50、0xFF、071。十六进制数字前要以0x开始，八进制数字以0开始就可以。示例如下： var a=5; /十进制格式 var b=0xf; /十六进制格式 var c=071; /八进制格式 （2）实型常量：由整数部分和小数部分组成，也可以使用科学计数法，如：12.35、5E7等。 （3）布尔常量：布尔类型只有两种状态：true或false。用于比较和判断。 （4）字符型
14、常量：用单引号或双引号括起来的一个或几个字符。如：“hello“、“123“、a、this。 （5）空值：表示什么都没有，使用null来表示。访问为未赋值的变量返回undefined。 （6）转义符：如果要在字符串中加入特殊字符，要使用“”进行转义处理。如： var txt=“We are the so-called “Vikings“ from the north.n“,2变量的类型和声明,变量的类型对应着常量的类型。变量类型包括数值型（整数，实数）、字符型、布尔型、对象型。声明变量有两种方式：使用关键字var显式声明变量，也可以使用赋值语句隐式地声明变量。建议显式声明所有变量。 var i
15、=5; /i为整型变量 d=3.2; /隐式声明变量d，赋值3.2，则d 为实型变量 var s = “hello“; / s 为字符串变量 var c = c; /c为字符型变量 var o = new Date(); /o为object类型变量 var b = true; /b为布尔型变量,3变量的命名,每个变量都有一个名字，通过名字来访问其内容。命名变量要注意一下几点： （1）命名规范：变量名只能由字母（AZ，az）、数字（09）、下划线（_）和美元符号（$）四种字符组成，且第一个字母必须是字母、下划线或美元符号。如score24、_score、Sco7Re、$score 都是合法的标识
16、符。 （2）区分大小写：JavaScript语言区分大小写，如com和Com将认为是两个不同的变量名。 （3）不能是保留字：不能使用JavaScript中的保留关键字作为用户自定义标识符。例如：int、else、void、import等，否则在页面载入时会提示编译错误。,4变量的作用域,变量的作用域指变量的作用范围或使用范围。变量可分为全局变量和局部变量。在函数外部定义的变量叫做全局变量。全局变量的作用域是从定义位置开始直到当前HTML文档结束；在函数内部定义的变量叫做局部变量，它只作用于函数内部。,第一部分在head内，第二部分body内, var num=5; /定义全局变量 function welcome() var o = new Date(); /定义局部变量 alert(“欢迎来到本站“); welcome(); document.write(num); /*访问全局变量num*/ ,1算术运算符 给定x = 5，表9-1解释了算数运算
