JAVAWeb----JavaScript-优快云博客

本文链接：https://blog.youkuaiyun.com/SSM_spring/article/details/89715842

JavaScript

JavaScript简介
1. 起源

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

作用：

在前段页面中验证用户提交信息是否符合要求

和服务器发生交互，判断用户名是否存在

1. 特性

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

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

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

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

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

JavaScript基本语法
1. 编写位置

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

</script>

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

1. 变量

①变量的声明

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

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

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

1. 函数

①函数声明

[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

1. 对象

①对象的创建

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

var obj = new Object();

第二种，使用{}创建

var obj = {};

②为对象添加属性

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

obj.name = "zhangsan";

obj.age = 12;

obj.sum = function(a,b){

return a+b;

}

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

var obj = {"name" : "zhangsan",

"age" : 21,

"sum" : function(a,b){ return a+b;}

};

1. 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

JavaScript事件驱动
1. 事件用户的操作，当操作发生时js如何给用户反馈需要自定义事件的响应函数

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

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

1. 自定义事件响应函数

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

②声明一个事件响应函数

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

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

1. 取消控件默认行为

①默认行为

[1]超链接跳转页面

[2]submit按钮提交表单

②取消方式：return false

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

①按从上到下的顺序加载

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

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

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

1. 嵌入head标签内

var btnEle = document.getElementById("btn");

btnEle.onclick = function() {

alert("hello");

};

</script>

</head>

<body>

</body>

无法获取body标签中的节点

1. 嵌入body标签后面

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

1. window对象

代表当前浏览器窗口

1. onload事件

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

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

window.onload = function() {

var btnEle = document.getElementById("btn");

btnEle.onclick = function() {

alert("hello");

};

</script>

</head>

<body>

</body>

DOM
1. DOM标准

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

1. document对象

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

1. DOM树

父元素：直接包含当前元素的元素就是当前元素的父元素

子元素：当前元素直接包含的元素就是当前元素的子元素

祖先元素：直接或间接包含当前元素的所有元素都是当前元素的祖先元素

后代元素：当前元素直接或间接包含的元素就是当前元素的后代元素

兄弟元素：有相同父元素的元素是兄弟元素

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

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

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

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

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

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

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

1. DOM查询API

①元素查询

功能	API	返回值
●在整个文档范围内查询元素节点
根据id值查询	document.getElementById(“id值”)	一个具体的元素节点
根据标签名查询	document.getElementsByTagName(“标签名”)	元素节点数组
根据name属性值查询	document.getElementsByName(“name值”)	元素节点数组

●在具体元素节点范围内查找子节点
查找全部子节点	element.childNodes【W3C考虑换行，IE≤9不考虑】	节点数组
查找第一个子节点	element.firstChild【W3C考虑换行，IE≤9不考虑】	节点对象
查找最后一个子节点	element.lastChild【W3C考虑换行，IE≤9不考虑】	节点对象
查找指定标签名的子节点	element.getElementsByTagName(“标签名”)	元素节点数组

●查找指定元素节点的父节点：element.parentNode

●查找指定元素节点的兄弟节点
查找前一个兄弟节点	node.previousSibling【W3C考虑换行，IE≤9不考虑】	节点对象
查找后一个兄弟节点	node.nextSibling【W3C考虑换行，IE≤9不考虑】	节点对象

②属性操作

[1]读取属性值

元素对象.属性名

[2]修改属性值

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

③文本操作

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

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

1. 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代码