单元2单元2任网页设计与制作基础htmlcssjs5章节.pptVIP

* WEB 应 用 开 发 单元2：网站的规划与设计 任务2：网页设计与制作基础（html+css+js）(4) 主 要 内 容 JavaScript语法 1 浏览器对象模型（BOM） 2 文档对象模型（DOM） 3 学习目标 知识目标： 掌握JavaScript基础知识 能力目标： 能够使用JavaScript制作简单的网页特效 技术应用的背景 JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，响应用户的各种操作，如网页中动态的特效、表单验证等。 一、JavaScript概述 1.JavaScript概述 浏览器端的编程语言，可以动态地生成和控制HTML元素，可以嵌入到网页中。JavaScript的运行环境是浏览器而非Web服务器，因此，它的功能是受浏览器限制的。JavaScript的主要功能是：动态操控网页上的HTML元素，控制浏览器完成一些工作。 JavaScript语法与C比较类似，但有许多很特殊的地方。 注意：JavaScript不是Java！ 一、JavaScript概述（续） 2.在HTML中使用JavaScript 方式一：使用script标签 方式二：在窗体控件的事件属性中直接输入简短的JavaScript脚本代码 方式三：使用外部JavaScript文件 script type=text/javascript JavaScript代码 /script form onsubmit=return checkData(this); method=post action=register.asp ?form / JavaScript脚本代码 script type=text/javascript” src=JavaScript文件名.js /script 外部JavaScript文件，扩展名为.js 一、JavaScript概述（续） 3.JavaScript代码解析 浏览器是以一种流的方式从上到下读入HTML网页中的内容，当它发现script标签时，根据其type属性决定将如何解析脚本程序。 要点： 函数必须先定义后使用。 函数定义好之后，并不会自动执行，必须有一个明确的调用语句。 被调用的函数其定义必须放在调用语句前面。 只有事件激发以后，相应的代码才被调用。 事件响应基于最基本的函数调用 二、JavaScript语法 1. 变量 不必声明直接使用 定义变量时不需要指定变量类型 变量类型运行时可变 五种基本数据类型 string：字串类型，以双引号或单引号界定 number：数字类型，既可以保存32位的整数，也可保存64位的浮点数 boolean：布尔类型，只有两个值：true和false object：引用类型，通常用来引用对象，比如保存网页上的文本框等控件的变量，其类型就是object undefined：当一个变量未初始化时，其值就是undefined 二、JavaScript语法（续） 2. 变量作用域 只有两种作用域：全局和局部 var global; //全局变量 function f() { var local; //局部变量 } 注意：当有多个JavaScript文件时，要注意变量的同名问题。 二、JavaScript语法（续） 3. 基本流程控制 顺序结构 分支结构 循环结构 二、JavaScript语法（续） 4.JavaScript函数 使用function关键字定义JavaScript函数 //方式1：命名函数 function f(){ alert(“Hello,World!”); } //方式2：匿名函数 var f=function (){ alert(“Hello,World!”); } 与众不同之处：函数是一个对象 二、JavaScript语法（续） 5.JavaScript对象 两种方式创建JavaScript对象： 1.字面量法： var point = { x:0, y:0 }; 2.直接创建Object类的对象实例，然后给其再添加属性和方法： var point=new Object(); point.x=100; point.y=200; alert(point.x); JavaScript对象的特点 其属性与方法可以动态地增加和删除 二、JavaScript语法（续） 6. this关键字 this关键字用于引用执行此代码的对象自身 input type=button“ value=Click me“