JavaScript高级程序设计

最新推荐文章于 2023-12-02 16:16:01 发布

Supreme_lwl

最新推荐文章于 2023-12-02 16:16:01 发布

阅读量1k

点赞数 1

分类专栏： JavaScript 前端

本文链接：https://blog.csdn.net/qq_42515626/article/details/104303439

版权

前端同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

一、JavaScript简介

组成

一个完整的Javascript应由下列三部分组成：
- 核心（ECMAScript）
- 文档对象模型（DOM）
- 浏览器对象模型（BOM）

二、在HTML中使用Javascript

script元素

HTML5为script定义了下列6个属性
- async：可选。表示应立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本（异步执行）。只对外部脚本文件有效。
- charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少人使用。
- defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
- language：已废弃。原来用于表示编写代码使用的脚本语言。
- src：可选。表示包含要执行代码的外部文件。
- type：必选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型，也称MIME类型。
在XHTML中的用法

用CData片段来包含Javascript代码：

三、基本概念

6种数据类型
- Undefined
- Boolean
- String
- Null
- Number
- Object
语句：
- if
- do-while
- while
- for
- for-in
- label
- break和continue
- with
- switch

四、变量、作用域和内存问题

基本类型值在内存中占据固定大小的空间，因此被保存在栈内存中。
引用类型的值是对象，保存在堆内存中。

五、引用类型

Object类型

（1）字面量方式

var person = {

“name”:“aaa”,

“age”:“18”,

}

（2）new

var person = new Object();
Array类型

（1）创建数组
- 使用array构造函数
  
  var colors = new Array(20);
- 使用字面量方式
  
  var colors = [“red”,“blue”];
（2）检测数组
- instanceof
- Array.isArray()
（3）栈方法
- push()
- pop()
（4）队列方法
- push()
- shift()：取出第一个元素
- unshift()：在数组前端添加任意项并返回数组的长度。
- pop()：从数组的后端移除一个元素
（5）重排序方法
- resverse：将数组逆转。
- sort：默认按升序排列数组项，会将值转换成字符串之后再进行比较。
（6）操作方法
- concat()：colors.concat(“red”) 。将colors复制一份，"red"接在colors数组的后面，并返回这个新数组。
- slice()：如果只有一个参数，slice()方法返回从该参数指定位置开始到当前数组末尾的所有项；如果有两个参数，该方法返回起始和结束位置之间的项，但不包括结束位置的项。
- splice()：
  - 删除：splice(0,2) 代表从第0项开始，删除两个元素。
  - 插入/替换：splice(2，1，“red”,“green”) 代表从第2项开始，删除1个元素，并且在第二项的位置插入“red”和"green"，如果要删除多项，则可以继续在方法里面增加参数。
（7）位置方法：查找某个元素在数组中的位置。
- indexOf()：从前面开始往后面开始查找，两个参数，第一个是要查找的项，第二个（可选）是开始查找的位置。
- lastIndexOf()：从后面开始往前面查找。
（8）迭代方法
- every()：对数组的每一项运行给定的函数，如果该函数对每一项都返回true，则返回true。
- filter()：对数组的每一项运行给定的函数，返回该函数会返回true的项组成的数组。
- forEach()：对数组中的每一项运行给定的函数。这个方法没有返回值。
- map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
- some()：对数组的每一项运行给定函数，如果该函数对任一项返回true，则返回true。
（9）归并方法
- reduce()：从前往后遍历一遍，四个参数：前一个值、当前值、项的索引、数组对象
- reduceRight()：从后往前遍历一遍
Date类型

（1）var now = new Date()；不传参数，默认创建一个当前日期和时间的对象

（2）根据特定日期创建日期对象：必须传入从1970年1月1日开始所经过的毫秒数，为了简化这个过程，有两个方法
- Date.parse()：传入一个日期作为日期
- Date.UTC()：参数分别是年份、基于0的月份、日、小时数、分钟、秒、毫秒数。其中只有前两个参数是必需的。
（3）Date.now()：返回当前的时间的毫秒数。与var date = +new Date()作用是一样的。

（4）日期格式化方法
- toDateString()：以特定于实现的格式显示星期几、月、日和年。
- toTimeString()：以特定于实现的格式显示时、分、秒和时区。
- toLocaleDateString()：以特定于地区的格式显示星期几、月、日和年。
- toLocaleTimeString()：以特定于实现的格式显示时、分、秒；
- toUTCString()：以特定于实现的格式完整的UTC日期。
RegExp类型

（1）表达式：var expression = / pattern / flags ; pattern部分可以是任何简单或复杂的正则表达式，flags可以是：g、i、m中的任意一个或多个。

（2）3个标志：
- g表示全局（global）模式
- i表示不区分大小写模式
- m表示多行（multiline）模式
（3）RegExp实例属性
- global
- ingoreCase
- lastIndex
- multiline
- source
（4）RegExp实例方法
- exec()：返回一个匹配项。
Function类型

（1）函数声明与函数表达式：解析器会率先读取函数声明，并使其在执行任何代码之前可用，而函数表达式则必须等到解析器执行到它所在的代码行。
- 函数声明：function sum(num1,num2){…}
- 函数表达式：var fun = function(num1,num2){…}
（2）函数内部属性
- arguments：包含着传入函数中所有参数。arguments.callee()用于递归调用。
- this
（3）函数的属性
- length：表示函数希望接受的命名参数的个数
- prototype：保存所有实例方法
（4）函数的方法
- apply()：在特定的作用域中调用函数，以扩充函数的作用域。接收两个参数，第一个是在其中运行函数的作用域，另一个是参数数组。
- call()：在特定的作用域中调用函数，第一个参数是this没有变化，变化的是其余参数都直接传递给函数，也就是传递给函数的参数必须逐个列举出来。
- bind()：创建一个函数的实例，其this值对绑定到传给bind()函数的值。
基本包装类型

（1）Boolean

（2）Number
- toFixed()方法会按照指定的小数位返回数值的字符串表示。
- toExponential()方法返回以指数表示法表示的数值的字符串形式。
- toPrecision()方法接受一个参数，表示数值的所有数字的位数（不包括指数部分）。
（3）String
- charAt()：返回给定位置的那个字符。
- charCodeAt()：返回给定位置的那个字符的字符编码。
- concat()
- slice()
- substr()
- substring()
- indexOf()
- lastIndexOf()
- trim()
- localeCompare()方法比较两个字符串大小
- fromCharCode()方法接收一个或多个字符编码，然后将他们转换成一个字符串。
单体内置对象

（1）Global对象
- URL编码：encodeURL()、encodeURLComponent()
- eval()方法：只接收一个参数，即要执行的字符串，它会将传入的参数当作实际的ECMAScript语句来解析，然后把执行结果插入到原位置。
（2）Math对象
- min()、max()
- ceil()、floor()、round()
- random()

六、面向对象的程序设计

理解对象

（1）创建对象

var person = {

name:"Nicholas",

age:"29",

job:"...",

sayName:function(){

alert(this.name)

}

}

（2）数据属性
- Configurable：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。
- Enumerable：表示能否通过for-in循环返回属性。
- Writable：表示能否修改属性的值。
- Value：包含这个属性的数据值。
（3）访问器属性
- Configurable：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。
- Enumerable：表示能否通过for-in循环返回属性。
- Get：在读取属性时调用的函数。默认值为undefined
- Set：在写入属性时调用的函数。默认值为undefined
创建对象

（1）工厂模式

（2）构造函数模式

（3）原型模式：只要创建一个新韩淑，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。

（4）组合使用构造函数模式和原型模式

（5）动态原型模式

（6）寄生构造函数模式

（7）稳妥构造函数模式
继承

（1）原型链

（2）借用构造函数

（3）组合继承

（4）原型式继承

（5）寄生式继承

（6）寄生组合式继承

七、函数表达式

递归：由于在函数内部调用了本身，故一旦函数更换名字，则函数内部的递归就会报错。用arguments.callee()方法来实现递归可以解决这个问题。
闭包：指有权访问另一个函数作用域中的变量的函数。
模仿块级作用域，此内定义的变量将仅在该作用域中可用：(function(){

})();
私有变量：任何在函数中定义的变量，都可以认为是私有变量，因为不能在函数的外部访问这些变量。

八、BOM

window对象

（1）全局作用域：所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

（2）窗口关系及框架：如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。可以通过索引值或框架名称来访问相应的window对象。

（3）窗口位置：window.screenLeft、window.screenTop

（4）窗口大小：window.innerWidth、window.innerHeight

（5）导航和打开窗口：
- window.open()：接收四个参数-要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。
- resizeTo()：调整大小
- moveTo()：移动位置
- close()：关闭窗口
（6）间歇调用和超时调用
- 间歇调用：setInterval(“alert(‘Hello world’)”,10000);
- 超时调用：setTimeout(“alert(‘Hello World’)”,1000);
（7）系统对话框
- alert()
- confirm()
- prompt()：提示框
location对象

（1）查询字符串参数
- location.search：返回从问号到URL末尾的所有内容
（2）位置操作
- location.assign()：打开新URL并在浏览器的历史纪录中生成一条记录。
- location.hash
- location.hostname
- location.pathname
- location.port
navigator对象
screen对象
history对象

（1）history.go(-1)后退一页

十、DOM

DOM节点：
- appendChild()：向childNodes列表的末尾添加一个节点
- insertBefore()：插入到特定节点的前面
- replaceChild()：接收两个参数，要插入的节点和要替换的节点
- removeChild()：接受一个参数，要被移除的节点
Dom文档

（1）查找 HTML 元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

（2）改变 HTML 元素

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

（3）添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

（4）添加事件处理程序

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

（5）查找 HTML 对象

属性	描述	DOM
document.anchors	返回拥有 name 属性的所有元素。	1
document.applets	返回所有元素（HTML5 不建议使用）	1
document.baseURI	返回文档的绝对基准 URI	3
document.body	返回元素	1
document.cookie	返回文档的 cookie	1
document.doctype	返回文档的 doctype	3
document.documentElement	返回元素	3
document.documentMode	返回浏览器使用的模式	3
document.documentURI	返回文档的 URI	3
document.domain	返回文档服务器的域名	1
document.domConfig	废弃。返回 DOM 配置	3
document.embeds	返回所有元素	3
document.forms	返回所有元素	1
document.head	返回元素	3
document.images	返回所有元素	1
document.implementation	返回 DOM 实现	3
document.inputEncoding	返回文档的编码（字符集）	3
document.lastModified	返回文档更新的日期和时间	3
document.links	返回拥有 href 属性的所有和元素	1
document.readyState	返回文档的（加载）状态	3
document.referrer	返回引用的 URI（链接文档）	1
document.scripts	返回所有

DOM元素

（1）通过 id 查找 HTML 元素

var myElement = document.getElementById("intro");

（2）通过标签名查找 HTML 元素

var x = document.getElementsByTagName("p");

（3）通过类名查找 HTML 元素

var x = document.getElementsByClassName("intro");

（4）通过 CSS 选择器查找 HTML 元素

var x = document.querySelectorAll("p.intro");

（5）通过 HTML 对象选择器查找 HTML 对象

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

DOM HTML

（1）改变 HTML 输出流

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

（2）改变 HTML 内容

document.getElementById(id).innerHTML = new text

（3）改变属性的值

document.getElementById(id).attribute = new value

DOM CSS

（1）改变 HTML 样式

document.getElementById(id).style.property = new style

DOM 动画

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p><button onclick="myMove()">单击我</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
}
</script>

</body>
</html>

DOM事件

（1）对事件作出反应
```
<h1 onclick="this.innerHTML = 'Hello!'">点击此文本！</h1>
```
（2）HTML 事件属性

时间是？

（4）onchange 事件

（5）onmouseover 和 onmouseout 事件
事件监听器

（1）addEventListener() 方法
```
document.getElementById("myBtn").addEventListener("click", displayDate);
```
（2）向元素添加事件处理程序
```
element.addEventListener("click", function(){ alert("Hello World!"); });
```
（3）向 Window 对象添加事件处理程序
```
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});
```
（4）事件冒泡和事件捕获

在 addEventListener() 方法中，你能够通过使用“useCapture”参数来规定传播类型：
```
addEventListener(event, function, useCapture);
```
默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

（5）removeEventListener() 方法

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：
```
element.removeEventListener("mousemove", myFunction);
```
DOM导航

（1）在节点之间导航
- parentNode
- childNodes[nodenumber]
- firstChild
- lastChild
- nextSibling
- previousSibling
（2）子节点和节点值

访问 innerHTML 属性等同于访问节点的 nodeValue
```
var myTitle = document.getElementById("demo").firstChild.nodeValue;
```
（3）DOM根节点
- document.body - 文档的 body
- document.documentElement - 完整文档
（4）nodeName 属性
- nodeName 是只读的
- 元素节点的 nodeName 等同于标签名
- 属性节点的 nodeName 是属性名称
- 文本节点的 nodeName 总是 #text
- 文档节点的 nodeName 总是 #document
（5）nodeValue 属性
- 元素节点的 nodeValue 是 undefined
- 文本节点的 nodeValue 是文本文本
- 属性节点的 nodeValue 是属性值
（6）nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。
DOM集合

（1）HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。HTMLCollection 对象是类数组的 HTML 元素列表（集合）。

（2）HTML HTMLCollection 长度

length 属性定义了 HTMLCollection 中元素的数量
节点列表

（1）HTML DOM NodeList 对象
- NodeList 对象是从文档中提取的节点列表（集合）。
- NodeList 对象与 HTMLCollection 对象几乎相同。
- 如使用 getElementsByClassName() 方法，某些（老的）浏览器会返回 NodeList 对象而不是 TMLCollection。
- 所有浏览器都会为 childNodes 属性返回 NodeList 对象。
- 大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象
（2）HTML DOM Node List 长度

length 属性定义节点列表中的节点数

（3）HTMLCollection 与 NodeList 的区别
- HTMLCollection（前一章）是 HTML 元素的集合。

NodeList 是文档节点的集合。
- NodeList 和 HTML 集合几乎完全相同。
HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。
- 它们都有定义列表（集合）中项目数的 length 属性。
它们都可以通过索引 (0, 1, 2, 3, 4, …) 像数组那样访问每个项目。
- 访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。
访问 NodeList 项目，只能通过它们的索引号。
- 只有 NodeList 对象能包含属性节点和文本节点。
节点列表不是数组！
- 节点数组看起来像数组，但并不是。
能够遍历节点列表并像数组那样引用其节点。
- 无法对节点列表使用数组方法，比如 valueOf()、push()、pop() 或 join()。

十三、事件

事件流

（1）事件冒泡：即时间开始时由最具体的元素接收，然后逐渐向上级传播

（2）事件捕获：跟事件冒泡的顺序相反

（3）DOM事件流：事件捕获阶段、处于目标阶段、冒泡阶段
1. 事件处理程序：相应某个事件的函数就叫事件处理程序。
（1）HTML事件处理程序：普通的onclick事件

（2）DOM0 级事件处理程序：将一个函数赋值给一个事件处理程序属性。

（3）DOM2 级事件处理程序：定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()，用addEventListener()方法添加的事件必须用removeEventListener()方法移除，所以添加的匿名函数无法移除。

btn.addEventListener("click",function(){

alert(this.id);

},false);

上面的代码为一个按钮添加了onclick事件处理程序，而且该事件会在冒泡阶段会被触发，因为最后一个参数是false，如果最后一个参数是true则代表该事件会在捕获阶段被触发。

（4）IE事件处理程序：IE实现了与DOM类似的两个方法：attachEvent()、detachEvent()。两个参数是事件处理程序名称和事件处理程序函数。只会把事件添加到冒泡阶段。与DOM0级方法的区别就是作用域不同，DOM0级添加的事件会在其所属元素的作用域内运行，而此方法会在全局作用域中运行，因此this===window。

btn.attachEvent("onclick",function(){

alert("Clicked");

});

（5）跨浏览器的事件处理程序
事件对象

（1）DOM中的事件对象：无论事件处理程序时使用什么方法，都会传入event对象。

（2）IE中的事件对象：window.event

（3）跨浏览器的事件对象
事件类型

（1）UI事件：不一定与用户操作有关的事件
- load
- unload
- abort
- error
- scroll
（2）焦点事件：会在页面元素获得或失去焦点时触发。
- blur (在元素失去焦点时触发，不会冒泡)
- DomFocusIn (在元素获得焦点时触发)
- DOMFocusOut (在元素失去焦点时触发)
（3）鼠标与滚轮事件
- click (在用户单击主鼠标按钮)
- dbclick (在用户双击主鼠标按钮)
（4）键盘与文本事件
- keydown
- keypress
（5）复合事件

（6）变动事件

（7）HTML5事件

（8）设备事件

（9）触摸与手势事件
内存和性能

（1）事件委托：对“事件处理程序过多”问题的解决就是事件委托。
模拟事件

（1）DOM中的事件模拟：可以在document对象上使用createeEvent()方法创建event对象

（2）IE中的事件模拟：调用document.createdEventObject()方法可以在IE中创建event对象

Supreme_lwl

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级程序设计

一、JavaScript简介组成一个完整的Javascript应由下列三部分组成：核心（ECMAScript）文档对象模型（DOM）浏览器对象模型（BOM）二、在HTML中使用Javascriptscript元素HTML5为script定义了下列6个属性async：可选。表示应立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本（异步执行...
复制链接

扫一扫