使用JavaScript制作动态网页-1

JavaScript是什么

JavaScript是一种描述语言，基于对象和事件驱

动的脚本语言。

1. JavaScript的特点

脚本语言（一种轻量级的编程语言）一种解释性语言（无需预编译）被设计为向HTML页面添加交互行为运行于客户端

2. ECMAScript是JavaScript的标准和基础

3. JavaScript与JAVA的关系

javaScript与java名字虽然相像，但是它们没有关系。JavaScript和Java都与sun公司有合作，是借势Java

JavaScript的发展

95年LiveScript（Netscape公司）（为了减轻服务器压力创建）Netscape将其更名为JavaScript微软IE3.0并附带JScript、CEnvi的ScriptEase以及JavaScript三足鼎立97年JavaScript1.1版本被ECMA（欧洲计算机制造商）标准化为ECMAScript的全新脚本语言

JavaScript学习

JavaScript的组成

关于ECMAScript

ECMAScript定义了脚本语言的所有属性、方法和对象，包括语法、类型、关键字、保留字、运算符、对象等除了JavaScript外，同时也是Nombas的ScriptEase和Flash脚本ActionScript的基础

关于DOM

DOM(Document Object Model文档对象模型)

HTML和XML的应用程序接口（API）把整个页面规划为层级式的节点结构（如下图）

关于BOM

BOM(Browser Object Model浏览器对象模型)

可对浏览器窗口进行访问和操作包括

1.弹出新的浏览器窗口

2.移动、关闭浏览器窗口及调节浏览器窗口大小

3.获取用户屏幕分辨率的屏幕对象

4.WEB浏览器详细的定位对象

-对象举例

1.Window对象

2.Navigator对象

3.Screen对象

4.History对象

5.Location对象

JavaScript的使用

JavaScript的语法

注意

（1）””部分是非必须的，为了规避老版本浏览器不识别

（2）“//”是 JavaScript 的注释符号（/**/也是注释符号），它会阻止

JavaScript 编译器对这一行的编译

（3）type属性不推荐写成 language= " javascript " ，不符合XHMLT1.0

示例：

引用JavaScript的3种方式

HTML标签中引用

常用的框输入/输出/确认

◆alert()

alert(“提示信息”); //提示信息框

示例：

你好 html

◆prompt()

prompt(“提示信息”, “输入框的默认信息”);

prompt(“请输入姓名”, “张三”);

prompt(“请输入姓名”);

示例：

你好 html

◆confirm（

confirm(“确认信息？”); //确定则返回true，取消则返回false

示例：

你好 html

JavaScript的基础语法

注释

JavaScript的注释方法，与Java一致

//或者/* */

变量声明和使用

1、由于 JavaScript 对大小写敏感，变量名也对大小写敏感 （y 和 Y 是两个不同的变量）

2、变量必须以字母或下划线或美元符$开始 ，不能使用关键字作为变量名

◆JavaScript的变量声明

//JS的变量声明 ，是通过 var 语句来声明的，无需指定数据类型

var num = 10 ;

var str = "JavaScript" ;

//当然也可声明多个，之间用逗号隔开

var num =10 ,

str = "JavaScript";

//省略 var 语句，直接变量声明

num = 100; //相当于window.num= 100;即全局变量 （不推荐）

JavaScript的变量使用

建议先定义后使用

-+ 运算符用于把文本值或字符串变量加起来（连接起来），如果是两个数字则为数学运算加号

= 运算符用于给变量赋值，变量可以重复赋不同类型的值JS的语法约定

代码区分大小写

变量、对象和函数的名称有意义，最好使用驼峰

式命名

句尾的分号最好不要省略

数据类型

运算符

typeof运算符

typeof检测变量的返回值，为字符串类型typeof运算符返回值如下：

undefined：变量被声明后，但未被赋值

string：用单引号或双引号来声明的字符串

boolean：true或false

number：整数或浮点数

function：函数方法

object：对象 或 数组 或 Null 类型

转换函数

parseInt():字符串转换为整数

parseFloat():字符串转换为浮点数

toString()：返回字符串

强制类型转换

Boolean()：转化为逻辑值

Number()：对象转化为数字

String()：对象转化为字符串

运算符

◆逻辑控制符

1.if条件语句

variablename = ( condition ) ? value1 : value2 ;

2.switch多分支语句

◆流程控制语句

1.while和do while循环语句

2.for循环语句

for ( 变量=开始值; 变量<=结束值; 变量=变量+步进值 )

{

//需执行的代码

}

for ( 变量a in 对象obj )

{

// 获得 obj[a];

}

3.循环中断

break

使用 break 语句来终止循环

continue

使用 continue 语句来终止当前的循环，然后从下一个值继续执行

◆语法规则

JavaScript中的函数定义

JavaScript中的函数

一组可以随时随地运行的语句

将脚本编写为函数以避免页面载入时执行该脚本

分类

系统函数

自定义函数

/*系统函数举例*/

parseInt("143dd") //将字符串转化为整数，结果为143

parseFloat("143.33dd") //解析一个字符串，并返回一个浮点数，结

果为143.33

/*自定义函数*/

//根据函数的语法自定义的函数

myfun(123);

如何调用函数

函数可以通过其名字加上括号中的参数进行调用

你好

事件

JavaScript侦测到的行为

事件举例：鼠标点击页面或图像载入鼠标悬浮于页面的某个热点之上在表单中选取输入框表单提交键盘按键

-

例题:

◆需求说明

制作留言板提交效果

点击“提交”按钮表单提交

提交前让用户确认，确认后提交 ，否则不提交

标题：

内容：

程序调试

错误分类

语法错误

逻辑错误

程序调试的方法

注释调试法输出调试法

alert()调试法

document.write()调试法

console对象调试法（IE不支持）

-调试工具

Firebug、浏览器自带开发窗口

使用JavaScript实现动态交互

BOM概述

BOM使得JavaScript能与浏览器进行“对话”

主要是Window对象的操作

History对象

Location对象

Document对象

例题:

新浪

---

HTML DOM innerHTML 属性

定义和用法

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

语法

Object.innerHTML = "HTML";// 设置

var html = Object.innerHTML;// 获取