一.javaweb笔记之javaScript简介+基本语法+事件驱动+DOM

1.JavaScript 简介

1. 1. 起源

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

2. 2. 特性

         ① 脚本语言。JavaScript是一种解释型的脚本语言,C、C++、Java等语言先编译  后执行,   而JavaScript是在程序的运行过程中逐行进行解释。

         ②基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也    能使用现有的对象。

         ③简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做    出严格的要求,是基于Java基本语句和控制的脚本语言。

         ④动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务    器就可以对用户的输入做出响应。

         ⑤跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因    此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支    持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

          

2. JavaScript 基本语法
   1. 编写位置

         ① 编写到 HTML 中 <script> 标签中。

<script type="text/javascript">         </ script >

         ②写在外部的 .js 文件中。然后通过 script 标签引入。

< script type = "text/javascript" src = "script.js" ></ script >

2. 2. 变量

①变量的声明

[1] 变量声明时不需要指定类型，可以为其赋值任何类型的数据。

[2]JavaScript 严格区分大小写， Num 和 num 是完全不同的两个变量。

②变量的使用：变量在使用过程中可以接受不同类型的值。

3. 3. 函数

①函数声明

[1] 使用 function 关键字

[2] 不需要指定形参类型

[3] 不需要指定返回值

function sum(n, m) {      return n + m; }

②函数调用

       调用 JavaScript 函数时系统不检查传入参数的个数和类型。

③函数也是对象

在 JavaScript 中，函数也作为一种数据类型存在，而且是引用数据类型，函数名就是指向其内存空间地址的引用。

var a = function() {      return 2; }; var b = a; a.fname = "tom"; alert(b.fname); // 结果为 tom

④函数的执行

   函数名 + ( ) 。

var a = function() {      return 2; }; alert(a()); // 结果为 2

4. 4. 对象

                     ① 对象的创建

          第一种，使用new Object()创建

var obj = new Object();

          第二种，使用{}创建

var obj = {};

          ②为对象添加属性

n         第一种，通过 对象.属性名 = “属性值” 添加

obj.name = "zhangsan"; obj.age = 12; obj.sum = function (a,b){ return a+b; }

n         第二种，使用{}创建对象时，直接向对象中添加属性

var obj = {"name" : "zhangsan",              "age" : 21,              "sum" : function (a,b){ return a+b;}              };

5. 5. this 关键字

在 JavaScript 函数中， this 关键字指向的是调用当前函数的对象。    

var obj01 = {        name : "obj01 name" ,        getName : showName     };      var obj02 = {        name : "obj02 name" ,        getName : showName     };      function showName() {        alert( this .name);     }     obj01.getName(); // 结果为 obj01 name     obj02.getName(); // 结果为 obj02 name

3. JavaScript 事件驱动
   1. 事件

①用户事件：用户操作，例如单击、鼠标移入、鼠标移出等。

②系统事件：由系统触发的事件，例如文档加载完成。

2. 2. 自定义事件响应函数

①从文档对象模型中获取控件对象 [ 借助 DOM API 实现 ]

②声明一个事件响应函数

③将事件响应函数的引用赋值给控件对象的事件属性

  例如： window.onload = function(){}

3. 3. 取消控件默认行为

①默认行为

      [1] 超链接跳转页面

      [2]submit 按钮提交表单

②取消方式： return false

4. JavaScript 嵌入方式
   1. 浏览器加载顺序

①按从上到下的顺序加载

②遇到 script 标签先执行脚本程序，执行完成后再继续加载

2. 2. 嵌入 HTML 标签的事件属性中

< button onclick = "alert('hello');" > 点我 </ button >

        结构与行为耦合，不推荐使用

3. 3. 嵌入 head 标签内

<script type="text/javascript">      var btnEle = document.getElementById( "btn" );     btnEle.onclick = function () {        alert( "hello" );     }; </ script > </head> < body >      < button id = "btn" > 点我 </ button > </ body >

                    无法获取 body 标签中的节点

4. 4. 嵌入 body 标签后面

                    可以获取节点，但是不符合常规习惯

5. 5. window 对象

代表当前浏览器窗口

6. 6. onload 事件

                    将整个文档加载完成后触发

7. 7. 使用 window.onload 完美解决问题

                   

<script type="text/javascript">     window.onload = function () {         var btnEle = document.getElementById( "btn" );        btnEle.onclick = function () {            alert( "hello" );        };     }; </ script > </ head > < body >      < button id = "btn" > 点我 </ button > </ body >

5. DOM
   1. DOM 标准

        Document Object Model ：文档对象模型 定义了访问和处理 HTML 文档的标准方                法。是 W3C 国际组织制定的统一标准，在很多计算机语言中都有不同实现如 C# 、 PHP 、          Java 、 Ruby 、 perl 、 python 等

2. 2. document 对象

                   window 对象的一个属性，代表当前 HTML 文档，包含了整个文档的树形结构。获           取 document 对象的本质方法是： window.document ，而“ window. ”可以省略。

3. 3. DOM 树

父元素：直接包含当前元素的元素就是当前元素的父元素 子元素：当前元素直接包含的元素就是当前元素的子元素 祖先元素：直接或间接包含当前元素的所有元素都是当前元素的祖先元素 后代元素：当前元素直接或间接包含的元素就是当前元素的后代元素 兄弟元素：有相同父元素的元素是兄弟元素

4. 4. 节点 (Node)
      1. HTML 文档中的每个成分都是一个节点， HTML 文档是由 DOM 节点构成的集合。
      2. 节点的分类

①文档节点 (Document) ： DOM 标准将整个 HTML 文档的相关信息封装后得到的对象。

②元素节点 (Element) ： DOM 标准将 HTML 标签的相关信息封装后得到的对象。

③属性节点 (Attribute) ： DOM 标准将 HTML 标签属性的相关信息封装后得到的对象。

④文本节点 (Text) ： DOM 标准将 HTML 文本的相关信息封装后得到的对象。

1. 3. 3. 节点的属性

1. nodeName: 代表当前节点的名字，只读属性。如果给定节点是一个文本节点，nodeName 属性将返回内容为 #text 的字符串。
2. nodeType：返回一个整数, 这个数值代表着给定节点的类型，只读属性。  1 -- 元素节点    2 -- 属性节点    3 -- 文本节点
3. nodeValue：返回给定节点的当前值(字符串)，可读写的属性。

1. 元素节点, 返回值是 null
2. 属性节点: 返回值是这个属性的值
3. 文本节点: 返回值是这个文本节点的内容

5. 5. DOM 查询 API

① 元素查询

功能	API	返回值
·在整个文档范围内查询元素节点
根据 id 值查询	document.getElementById(“id 值 ”)	一个具体的元素节点
根据标签名查询	document.getElementsByTagName(“ 标签名 ”)	元素节点数组
根据 name 属性值查询	document.getElementsByName(“name 值 ”)	元素节点数组
·在具体元素节点范围内查找子节点
查找全部子节点	element.childNodes 【 W3C 考虑换行， IE ≤ 8 不考虑】	节点数组
查找第一个子节点	element.firstChild 【 W3C 考虑换行， IE ≤ 8 不考虑】	节点对象
查找最后一个子节点	element.lastChild 【 W3C 考虑换行， IE ≤ 8 不考虑】	节点对象
查找指定标签名的子节点	element.getElementsByTagName(“ 标签名 ”)	元素节点数组
·查找指定元素节点的父节点： element.parentNode
·查找指定元素节点的兄弟节点
查找前一个兄弟节点	node.previousSibling 【 W3C 考虑换行， IE ≤ 8 不考虑】	节点对象
查找后一个兄弟节点	node.nextSibling 【 W3C 考虑换行， IE ≤ 8 不考虑】	节点对象

② 属性操作

      [1] 读取属性值

元素对象 . 属性名

[2] 修改属性值

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

③ 文本操作

      [1] 读取文本值： element.firstChild.nodeValue

      [2] 修改文本值： element.firstChild.nodeValue= 新文本值

6. 6. DOM 增删改 API

API	功能
document.createElement(“ 标签名 ”)	创建元素节点并返回，但不会自动添加到文档中
document.createTextNode(“ 文本值 ”)	创建文本节点并返回，但不会自动添加到文档中
element.appendChild(ele)	将 ele 添加到 element 所有子节点后面
parentEle.insertBefore(newEle,targetEle)	将 newEle 插入到 targetEle 前面
parentEle.replaceChild(newEle, oldEle)	用新节点替换原有的旧子节点
parentEle.removeChild(childNode)	删除指定的子节点
element.innerHTML	读写 HTML 代码