javaScript基础(笔记)
笔记的都一些 javaScript 特有的概念,不做概念的讲解
一、ECMAScript
- javaScript
ECMAScript
DOM
BOM - var 声明
- typeof
- 弱类型
- 数据类型6种
String,Nunber,Boolean,UNdefined,null,Object - console 控制台输出
- document.write 页面输出
- alert()弹出窗口输出
- 栈 变量
- 堆 对象
- typeof 对象 返回function
- 函数创建
函数对象(不用)
函数声明(常用)
函数变量(常用) - JS中的所有的参数传递都是按值传递的
- 函数嵌套
- 匿名函数用变量来接收
- 对象的属性值可以是任何的数据类型,也可以是个函数。
- this用法一样
- 工厂方法创建对象大量
- 构造函数创建对象初始化
- 原型
- 显示原型,隐式原型
- 原型链
- 对象的隐式属性
- 函数也是对象
- 向上查找直到Object
- tostring
- in查找自身含有的属性方法(继承)
- hasOwnProperty 查找自身含有特定的属性方法(非继承)
- Myclass类对象在原型中含有hasOwnProperty方法
- 几种继承的思想以及做法
原型链继承
借用构造函数继承
组合继承(重要)
原型式继承
寄生式继承
寄生组合式继承 - javaScript自动回收机制
我们将不用的对象赋值为null就okkk - 作用域
- 声明提前
函数声明提前:在所有代码执行之前被执行,能在函数声明前调用此函数 - 全局作用域
Windows作为对象
HTML的script标签内的都是全局作用域 - 函数作用域
每调用一次函数就会创建一个新的作用域 - 作用域链
逐级向上查找直到全局作用域,没有报错 - javaScript常用对象
- 创建数组
- 数组常用的方法属性
- forEach方法遍历
- concat合并数组其他有一堆不说了都不难
- 函数对象的方法
call()
apply() - arguments
arguments是一个类数组对象
arguments是封装实参的对象
arguments里面有一个callee,就是当前正在指向的函数的对象 - Date对象(不说了)
- Math对象(不说了)
- String对象(不说了)
- RegExp对象(不说了)
二、DOM
- DOM
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 - HTML DOM 模型被结构化为 对象树
- 通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量
- 终于体会到javaScript的牛笔了
- HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
- 节点,太多了不说了
- 节点的类型不同,属性和方法也都不尽相同。
- 常用节点
- 文档节点:整个HTNL文档
- 元素节点:HTML文档中的HTML标签
- 属性节点:元素的属性
- 文本节点:HTML标签中的文本内容
-
文档节点啥都能干
-
元素节点最常用的节点
-
属性节点
表示一个个的标签属性,是元素节点的一部分
元素节点.getAttributeNode(“属性名”),根据元素节点的属性名获取一个属性节点对象。 -
文本节点
表示的是HTML标签以外的文本内容
元素节点.firstChild;,获取元素节点的第一个子节点,一般为文本节点 -
DOM文档操作
-
文档对象代表您的网页,,如果您希望访问 HTML 页面中的任何元素,那么您总是从访问 document 对象开始。
-
下面是一些如何使用 document 对象来访问和操作 HTML 的实例。
-
查找 HTML 元素(太多了不说了)
document.getElementByXXX -
获取HTML的值(太多了不说了)
-
改变HTML的值(太多了不说了)
-
修改HTML的值(太多了不说了)
-
查找HTML的值(太多了不说了)
-
总之这个玩意很牛比
-
DOM文档事件
HTML事件可以触发浏览器中的行为,比方说当用户点击某个 HTML 元素时启动一段 JavaScript。 -
前后端连起来了
-
下面是DOM文档事件
-
窗口事件
由窗口触发该事件 (同样适用于 标签) -
表单事件
表单事件在HTML表单中触发 (适用于所有 HTML 元素,但该HTML元素需在form表单内) -
键盘鼠标事件
-
媒体四事件
-
事件冒泡
-
事件的冒泡(Bubble):所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发,在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡。
-
事件的委派:我们希望只绑定一次事件,即可应用到多个的元素上,即使元素是后添加的,我们可以尝试将其绑定给元素的共同的祖先元素,也就是事件的委派。事件的委派,是指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。事件委派是利用了事件冒泡,通过委派可以减少事件绑定的次数,提高程序的性能。
-
事件绑定
-
事件传播
三、BOM
-
BOM模型
-
浏览器对象模型(BOM)使javaScript有能力与浏览器对话
-
浏览器对象模型(Browser Object Model (BOM))尚无正式标准。
-
由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是BOM的方法和属性。
-
浏览器对象模型(BOM)可以使我们通过JS来操作浏览器,在BOM中为我们提供了一组对象,用来完成对浏览器的操作。
-
常见的BOM对象
-
Window:代表的是整个浏览器窗口,同时Window也是网页中的全局对象
-
Navigator:代表当前的浏览器的信息,通过该对象可以我识别不同的浏览器信息
-
Location:代表当前的浏览器地址栏信息,通过Location可以获得地址栏信息,或者操作浏览器跳转页面
-
History:代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录,由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页,而且该操作只在当次访问时有效
-
Screen:代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息
-
这些BOM对象在浏览器中都是作为window对象的属性保存的,可以通过window对象来使用,也可以直接使用
-
Window对象:
javaScript有三种类型的弹出框:警告框,确认框,提示框 -
警告框alert:如果要确保信息传递给用户,通常会使用警告框。当警告框弹出时,用户将需要单击“确定”来继续。方法可以不带window前缀
-
确认框confirm:如果您希望用户验证或接受某个东西,则通常使用“确认”框。(方法可以不带前缀)
当确认框弹出时,用户将不得不单击“确定”或“取消”来继续进行。
如果用户单击“确定”,该框返回 true。如果用户单击“取消”,该框返回 false。(方法可以不带前缀) -
提示框:如果您希望用户在进入页面前输入值,通常会使用提示框。
当提示框弹出时,用户将不得不输入值后单击“确定”或点击“取消”来继续进行。
如果用户单击“确定”,该框返回输入值。如果用户单击“取消”,该框返回 NULL。(方法可以不带前缀) -
定时事件:
JavaScript 可以在时间间隔内执行,这就是所谓的定时事件( Timing Events)。
window 对象允许以指定的时间间隔执行代码,这些时间间隔称为定时事件。 -
通过 JavaScript 使用的有两个关键的方法:
setTimeout(function, milliseconds)
在等待指定的毫秒数后执行函数。
setInterval(function, milliseconds)
等同于 setTimeout(),但持续重复执行该函数。
setTimeout() 和 setInterval() 都属于 window 对象的方 -
延时器:setTimeout() 方法:延时器
-
定时器:setInterval() 方法:定时器
setInterval() 方法在每个给定的时间间隔重复给定的函数。 -
常用窗口属性:窗口尺寸
-
其他窗口方法:开关移动调整
-
Navigator:代表对当前浏览器的信息(不用了)
-
userAgent:一般我们只会使用userAgent来判断浏览器的信息,userAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容,不同的浏览器会有不同的userAgent
-
Location对象:Location对象中封装了浏览器的地址栏的信息,如果直接打印location,则可以获取到地址栏的信息(当前页面的完整路径)
-
Location常用属性:网络那些东西,不说了
-
Locating常用方法:
assign():用来跳转到其它的页面,作用和直接修改location一样
reload():用于重新加载当前页面,作用和刷新按钮一样,如果在方法中传递一个true,作为参数,则会强制清空缓存刷新页面
replace():可以使用一个新的页面替换当前页面,调用完毕也会跳转页面,它不会生成历史记录,不能使用回退按钮回退 -
History对象:History对象可以用来操作浏览器向前或向后翻页
-
History常用属性:
console.log(history); //输出history对象
console.log(history.length); //可以获取到当成访问的链接数量 -
History常用方法
back():可以回退到上一个页面,作用和浏览器的回退按钮一样
forward():可以跳转到下一个页面,作用和浏览器的前进按钮一样
go():可以用来跳转到指定的页面,它需要一个整数作为参数 -
Screen对象:
Screen 对象包含有关客户端显示屏幕的信息。没有应用于 screen 对象的公开标准,不过所有浏览器都支持该对象。 -
Screen对象描述:
每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出,以达到用户的显示要求。例如,一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像,它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。另外,JavaScript 程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。 -
Screen对象属性:就是有关屏幕的一些设置,具体的不说了
四、javaScript高级语法
- Exception异常
- Error错误
- error 对象提供两个有用的属性:
name:设置或返回错误名
message :设置或返回错误消息(一条字符串) - error 的 name 属性可返回六个不同的值(不说了)
- 异常捕获:try {}catch {} 不说了
- Eval 错误
EvalError 指示 eval() 函数中的错误。更新版本的 JavaScript 不会抛出任何 EvalError,请使用 SyntaxError 代替。 - 范围错误
RangeError 会在您使用了合法值的范围之外的数字时抛出。 - 引用错误
假如您使用(引用)了尚未声明的变量,则 ReferenceError 会被抛出: - URI 错误
假如您在 URI 函数中使用非法字符,则 URIError 被抛出: - 主动抛出内置异常/之定义异常(具体不说了)
- JSON,AJAX,Cookie,XML,WebStorage,Closure,还有一些新特性这些另开。