JavaWeb1——第 3 章 JavaScript

第 3 章 JavaScript

1．JavaScript 简介

1.1 起源

在 1995 年时，由 Netscape 公司的 Brendan Eich，在网景导航者浏览器上首次设计 实现而成。Netscape 在最初将其脚本语言命名为 LiveScript，因为 Netscape 与 Sun 合作， 网景公司管理层希望它外观看起来像 Java，因此取名为 JavaScript。 

作用：

在前段页面中验证用户提交信息是否符合要求 和服务器发生交互，判断用户名是否存在[ajax]

1.2 特性

• 脚本语言。JavaScript 是一种解释型的脚本语言,C、C++、Java 等语言先编译 后执行,而 JavaScript 是在程序的运行过程中逐行进行解释。
• 基于对象。JavaScript 是一种基于对象的脚本语言,它不仅可以创建对象,也 能使用现有的对象。
• 简单。JavaScript 语言中采用的是弱类型的变量类型,对使用的数据类型未做 出严格的要求,是基于 Java 基本语句和控制的脚本语言。
• 动态性。JavaScript 是一种采用事件驱动的脚本语言,它不需要经过 Web 服务 器就可以对用户的输入做出响应。
• 跨平台性。JavaScript 脚本语言不依赖于操作系统,仅需要浏览器的支持。因 此一个 JavaScript 脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器 支持 JavaScript 脚本语言,目前 JavaScript 已被大多数的浏览器所支持。

2． 基本语法

js 需要包括在

<script>

标签中，这个标签可以出现在页面的任何位置

2.1 变量

• 声明： 使用 var 如：var x=65; var y=”你好”;
  1）变量的声明不需要指定数据类型，可以接受所有的数据类型
  2）变量名区分大小写，abc 和 aBc 是两个不同的变量
• 赋值： x=44;x=”abc”;x=new Date();
  1）变量可以接受任何值。
  2）声明和赋值也可同时进行 如 var x=”abc”;

2.2 函数

• 声明： 使用 function 关键字，没有指定返回值一说！参数列表也没有指定参数类型一说，因为 js 所有类型都使用 var 来声明

  1）
  var abc=function(a,b){ return a+b;}
  函数在 js 中也是一种对象，可以将函数的引用赋值给变量

  2）function add(a,b){ return a+b;}
  为函数起个名字叫 add

• 使用： 调用函数方法
  1）如果是声明方式第一种的，使用变量名+()的方式进行调用
  abc(1,2);
  2）如果是声明方式第二种的，直接使用函数名调用；
  add(1,2);

注意：

js 调用函数的时候不会检查参数列表，所以 js 中没有重载一说，add(1,2)；add(1)； add(1,”abc”)；add(“abc”)；add(1,”666”,true);add()；都是调用的同一个方法。

2.3 对象

• 对象的创建：

1）var obj = new Object(); 

2）var obj = {}; 

• 为对象添加属性方法： js 中动态的为对象添加属性和方法。

1）动态添加

obj.name = “张三”; 
obj.age = 18; 
obj.work = function(){ 
	alert(“我在工作！”);
	}

2）创建时指定

obj = {
	name:”张三”,
	age:18, 
	work:function(){ 
		alert(“我在工作”) 
		} 
	}

• 使用对象的属性或方法

1）使用属性：

alert(obj.name);

2）调用方法：

obj.work();

2.4 注释

// : 表示单行注释
/* */ : 表示多行注释

2.5 其他语法

java 中的 for，while，if-else，switch，try-catch，break，continue，以及各种运算符，在 js 中也是按照同样的方式使用的。这里不再赘述。

3．js 事件

事件就是浏览器或者用户交互时触发的行为。比如按钮点击，表单提交，鼠标滑动 等等…

3.1 js 脚本的嵌入方式

文档全部加载完成后再加载 js。js 中定义了一种 window.onload 事件可以解决以 上问题

3.2 事件的分类：

1）系统事件：如：文档加载完成。
2）用户事件：如：鼠标移入移出，单击双击等。

3.3 事件触发：

系统事件会由系统触发，如 window.onload 事件，用户事件由用户行为触发如 click 事件。主要讲解的系统事件是 window.onload，用户事件主要在操作 html 文档的时 候触发。详细事件列表可参考 w3c 离线文档中的 JavaScript->dom 事件

3.4 常见的事件

• onblur 元素失去焦点。
• onchange 域的内容被改变。
• onclick 当用户点击某个对象时调用的事件句柄。
• onfocus 元素获得焦点。
• onkeydown 某个键盘按键被按下。
• onload 一张页面或一幅图像完成加载

3.5 事件响应：

1）我们希望某个事件发生的时候我们可以做一些事情。这个称为事件的响应，比 如用户点击了一个按钮，我弹出一个框告诉用户，你成功的点击了这个按钮。
2） 事件触发后我们要执行的方法称为响应函数。如何将响应函数与事件关联起来。 我们常使用为事件赋值函数的方法。如 window.onload 事件触发时我们执行弹出对话框

 window.onload = function(){ 
 	alert(“文档加载完成了！”) 
 	}

• 也可以使用标签的事件属性来触发响应函数，如：

 <a href=”atguigu.com” οnclick=”gotoguigu()”>
 尚硅谷
 </a> //onclick 会触发 gotoguigu()函数

我们在<script></script>中定义这个函数

 <script type=”text/javascript”> 
 function gotoguigu(){ 
	 alert(“我要去上硅谷”) 
	 } 
</script>

3.6 取消事件的默认行为

• 默认行为：某些事件触发后，系统会有默认的响应处理。如： 超链接点击后会自动跳转、表单提交点击后会发送请求
• 取消默认行为的方式： return false;即可

 <script type=”text/javascript”> 
 function gotoguigu(){ 
	 alert(“我要去上硅谷”) 
	 return false;
	 } 
</script>

3.8 正确的 js 加载方式

文档加载完成后加载 js
所以我们以后写 js 的时候，请把他包在 window.onload 的响应函数里，表示文档 加载完成后会执行函数里面的代码。

<script type=”text/javascript”> 
	window.onload = function(){ 
	//js 代码
	} 
</script>

4．dom 操作

4.1 什么是 DOM：

Document Object Modal(文档对象模型)，我们浏览器把整个网页会当成一个大的对 象，利用面向对象的方式操作网页内容

4.2 DOM 模型：

4.3 document 对象

document 对象是 ==window 对象的一个属性，代表当前整个 HTML 文档，将这个文档 抽象成了 document 对象，包含了整个 dom 树的所有内容。
其本质是 window.document，而 window.可以省略。直接使用 document

4.4 DOM 查询

• 元素查询

4.5 属性操作

1）读取属性值

元素对象.属性名 

2）修改属性值

元素对象.属性名=新的属性值

4.6 文本操作

1）读取文本值：

element.firstChild.nodeValue 

2）修改文本值：

element.firstChild.nodeValue=新文本值