JavaScript笔记

极客JavaScript笔记

注：本文部分内容参考与《JavaScript程序设计第3版》、W3School中JavaScript参考手册

JavaScript介绍

  1. JavaScripts是互联网上最流行的脚本语言，这门语言可用于web和HTML，更可广泛用于服务器端、pc端、移动端。

  2. JavaScript脚本语言：

    • JavaScript是一种轻量级的编程语言

    • JavaScript是可插入的HTML页面的编程代码

    • JavaScript插入HTML页面后，可由所有浏览器执行

JavaScript实现

  1. JavaScript用法：

    • HTML中的脚本必须位于<script> </script>标签之间

    • 脚本可被放置在HTML页面的<body>和 <head>部分中

  2. JavaScript标签：

    • 在HTML中插入JavaScript，使用<script>标签

    • 在<script> </script>之间书写代码

  3. JavaScript使用限制

    • 在HTML中，不限制脚本数量

    • 通常会把脚本放置于<head>标签中，以不干扰页面内容

JavaScript输出

  1. JavaScript通常用来操作HTML

  2. 文档输出：document.write("<p>this is my first JavaScript</p>");

JavaScript语法

  1. JavaScript语句：向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

  2. 分号：语句的分割是分号（；）。！！注意：分号是可选项，有时候看到不以分号隔开的。

  3. JavaScript代码：按照编写顺序依次执行

  4. 标识符：JavaScript标识符必须以字母、下划线或美元符号开始，JavaScript关键字

  5. JavaScript对大小写敏感

  6. 空格：JavaScript会忽略多余的空格

  7. 代码换行：不能在单词间换行

  8. 保留字：很多

JavaScript注释

单行注释：// 多行注释/**/

JavaScript变量

使用 var 关键字定义变量

JavaScript数据类型

typeof操作符，返回变量的类型。

  1. Undefined:只有一个值，即特殊的Undefined。使用var声明变量但未对其加以初始化时

      var message;
      alter(message==undefined);//true

  2. Null:是第二个只有一个值的数据类型，这个特殊之就是Null。从逻辑角度看，null值表示一个空对象指针。

      var car=null;
      alter(typeof car);//object

  3. Boolean：只有两个字面值true和false。区分大小写。

  4. Number：

    1. 浮点数值：就是该数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。

    2. 数值范围: 最小值Number_MIN_VALUE对应转化为-Infinity（负无穷）。最大值同理

    3. NaN: 即非数值（not a number）是一个特殊的值。

    4. 数值转换：有三个函数可以把非数值转换为数值：Number()、parseInt()、parseFloat()

  5. String: 用于表示由零或多个16位Unicode字符组成的字符序列，字符串。可以有单双引号表示

  6. Object：ECMAScript中的对象起始就是一组数据和功能的j集合。可通过new 操作符创建对象。

JavaScript操作符

  1. 一元操作符：递增和递减++ --，一元加减+ -表正负

  2. 位操作符: 按位非NOT（~）、按位与AND（&）、按位或OR（|）、按位异或XOR(^)

      左移(<<)、有符号右移(>>)、有符号右移>>>

  3. 布尔操作符：逻辑非NOT（！）、逻辑与AND（&&）、逻辑或OR（||）

  4. 乘性操作符： 乘法（*）、除法（/）、求模（%）

  5. 加性操作符： 加法操作符（+）、减法操作符（-）

  6. 关系操作符：小于（<）、大于（>）、小于等于（>=）、大于等于（>=）

  7. 相等操作符: 相等（==）、不相等（！=）、全等（===）、不全等（！==）

  8. 条件操纵符：三元运算符 ？：

  9. 赋值操作符： 赋值操作符 = 、*=、 /=、 %= 、 += 、 - =等

  10. 逗号操作符：可声明多个变量，赋值有多个时返回最后一项

JavaScript语句

  1. if语句

  2. do-while语句

  3. while语句

  4. for语句

  5. for-in语句

  6. label语句

  7. break语句和continue语句

  8. with语句：作用是将代码的作用域设置到一个特定的对象中。

  9. switch语句

JavaScript函数

基本语法如下：

  function functionName(arg1,arg2...argN){
      statements；
  }

注：在定义时不必指定是否返回值。位于return后的任何代码都不会执行。

参数在内部用一个数组表示，ECMAJavascript函数的参数不介意传递进来多少个参数，也不在乎其数据类型。

  1. 理解参数：在函数体内部可通过arguments对象来访问这个参数组。

  2. 没有重载：后定义的函数覆盖先定义的同名函数。

JavaScript事件

什么是事件？事件可以被JavaScript侦测到的行为

主要事件：事件名均小写，为美观采用驼峰规则，函数名采用驼峰规则

事件描述
onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移出事件
onChange 文本内容改变事件
onSelect 文本框选中事件
onFocus 光标聚集事件
onBlur 失去焦点事件
onLoad 网页加载事件
onUnload 关闭网页使事件

DOM简介

HTML　DOM：当网页被加载时，浏览器就会创建页面的文档对象模型（document　object　model）

  1. JavaScript能够改变页面中的所有HTML元素

  2. JavaScript能够改变页面中的所有HTML属性

  3. JavaScript能够改变页面中的所有CSS样式

  4. JavaScript能够对页面中的所有事件做出反应

DOM操作HTML

  1. 改变HTML输出流：注意绝对不要在文档加载完成之后使用document.write()。这会覆盖文档

  2. 寻找元素：通过id或标签名找到元素。document.getElementById、document.getElementByTagName()

  3. 改变HTML内容：使用属性 innerHTML=" ",例：document.getElementById("pid").innerHTML=" "

  4. 改变HTML属性：使用属性attribute=" "，例：document.getElementById("aid").href=" "

常用方法详解：

方法描述
getElementsByName() 通过name属性获取name，返回一个数组
getElementByTagName() 通过标签名获取元素
getAttribute() 获取元素属性
setAttribute() 设置元素属性
childNodes() 访问子节点
parentNode() 访问父节点
createElement() 创建元素节点
createTextNode() 创建文本节点
insertBefore() 插入节点
removeChild() 删除节点
offsetHeight() 网页尺寸（不包含滚动条）
scrollHeight() 网页尺寸（包含滚动条）

 

DOM操作CSS

通过DOM对象改变CSS：语法　document.getElementById(id).style.property=new style

DOMEventListener

  • addEventListener()方法：用于向指定元素添加事件句柄

  • removeEventListener()方法：移出方法添加的事件句柄

JS事件详解

事件流：

  1. 事件流：描述的是在页面中接受事件的顺序

  2. 事件冒泡：由最具体的元素接受，然后逐级向上传播至最不具体的元素的节点（文档）

  3. 事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收的事件。

事件处理：

  1. HTML事件处理：直接添加到HTML结构中

  2. DOM０级事件处理：把一个函数赋值给一个事件处理程序属性（缺点：多个事件会覆盖）

  3. DOM２级事件处理：addEventListener("事件名"，"事件处理函数"，"布尔值")

         removeEventListener()；true：事件冒泡----false：事件捕获

  4. IE事件处理程序：attachEvent、detachEvent

事件对象:

  1. 事件对象：在触发DOM事件d的时候都会产生一个对象

  2. 事件对象event：

    • type属性:获取事件类型

    • target属性：获取事件目标

    • stopPropagation()方法:阻止事件传播（冒泡）

    • preventDefault()方法：阻止事件默认行为

W3School据JavaScript参考手册

JavaScript对象

  • String字符串对象：length属性，indexOf(),match(),replace(),toUpperCase(),toLowerCase(),split()

  • Date日期对象：可获取当前日期，getFullYear(),getTime(),setFullYear(),getDay(),setTime()

  • Array数组对象：concat(),sort(),push(),reverse()

  • Math对象：round(),random(),max(),min(),abs()

  • Boolean对象：toString(),valueOf()

  • Number对象：toString(),valueOf()

  • RegExp对象：详参手册

  • Functions对象：number(),isNaN(),parseInt(),parseFloat(),String(),encodeURI()

  • Events对象: 常用属性：onblur，onchange，onclick，onfocus，onkeydown，onload，onselect等

Browser对象

  • Window对象

Window对象是BOM的核心，window对象是指当前的浏览器窗口

所有的JavaScript全局对象、函数以及变量均自动生成为window对象的成员

全局变量是window对象的属性，全局函数是window对象的方法

甚至HTML DOM的document也是window对象的属性之一

window.innerHeright：浏览器窗口的内部高度 window.innerWidth：浏览器窗口的内部宽度

window.open()、window.close()、setInterval()、setTimeout()、alert()、scrollTo()

  • Navigator对象

window.navigator对象包含有关浏览器的信息

属性：appName返回浏览器名称、appVersion返回浏览器的平台和版本信息、cookieEnabled是否启用

方法：javaEnabled()规定浏览器是否启用Java

  • Screen对象

window.screen对象包含有关客户端显示屏幕的信息

属性：availWidth、availHeight、width、height

  • History对象

window.history对象包含浏览器的历史（url）的集合

length属性：返回URL数量、back()后退、forward()前进、go()例go(-2)，相当于单击两次后退

  • Location对象

window.location对象包含有关当前URL的信息

属性：host、hostname、href、pathname、port、protocol、search

方法：assign()加载新的文档、reload()重新加载当前文档、replace()用新的文档替换当前的文档

HTML DOM对象

DOM节点

在HTML DOM中，每个部分都是节点：

  • 文档本身是文档节点

  • 所有HTML元素是元素节点

  • 所有HTML属性是属性节点

  • HTML元素内的文本是文本节点

  • 注释是注释节点

  • DOM Document对象

每个载入浏览器的HTML文档都会成为document对象

document对象使我们可以从脚本中对HTML页面中所有元素进行访问

属性：body、cookie、domain、lastModified、title、URL

方法：close()、open()、getElementById()、getElementsByTagName、write()

  • DOM Element对象

在HTML DOM中，Element对象表示HTML元素。

Element对象可以拥有的类型为元素节点、文本节点、注释节点的子节点

NodeList对象表示节点列表，比如HTML元素的子节点集合

DOM Element常用属性和方法

可用于所有HTML元素上：

常用属性/方法描述
element.attributes 返回元素属性的NameNodeMap
element.className 设置或返回元素的class属性
element.clientHeight 返回元素的可见区域高度
element.offsetHeight 返回元素的高度
element.innerHTML 设置或返回元素的内容
element.style 设置或返回元素的style属性
element.toString() 把元素转换为字符串
element.appendChild() 向元素添加子节点，作为最后一个子节点
element.getELementByTagName() 返回拥有指定标签名的所有子元素的集合
element.removeChild() 从元素中移出子节点
element.removeAttribute() 从元素中移出属性
element.setAttribute() 把指定属性设置或更改为指定值
nodelist.item() 返回NodeList中位于指定下标的节点
nodelist.length 返回NodeList中的节点数

区别：clientHeight与offsetHeight

在CSS盒子模型中，外边距margin，边框border，内边距padding，内容content

height属性为内容的高度，即content.height

clientHeight为盒子内部的可视区域高度，内容+上下内边距，即content.height+padding*2

offsetHeight为盒子的高度，内容+上下内边距+上下边框，即content.height+padding *2+border *2

区别：document.body与document.documentElement

document.body返回的是DOM（文档对象模型）中的body节点，即<body>

document.documentElement返回的是DOM中的html节点，即<html>

  • DOM Attribute对象

在HTML DOM中，Attribute对象表示HTML属性。

HTML属性始终属于HTML元素

属性：例attr.X----->name、value、length等

DOM 4 警告！

在W3C DOM Core中，Attr(attribute)对象从Node对象继承所有属性和方法。

但是！在DOM 4 中，Attr对象不再从Node继承。

为了保证未来的代码安全，应避免在属性对象上使用节点对象属性和方法。

  • DOM Event对象

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

Event Handlers事件句柄

HTML 4.0 的新特性之一是能够使HTML事件触发浏览器的行为，比如当用户点击某个HTML元素启动一段JavaScript。下面是一个属性列表，可将之插入HTML标签定义事件的行为。注：常用且同类属性只列一个

属性此事件发生在何时
onblur 元素失去焦点
onchange 域的内容被改变
onclick 当用户点击某个对象时调用的事件句柄
onerror 在加载文档或图像错误时发生
onfocus 元素获得焦点
onload 一张页面或一幅图像完成加载时
onmousedown 鼠标按键被按下
onselect 文本被选中
onsubmit 确认按钮被点击

标准Event属性

下面列出了2级DOM事件标准定义的属性。---还有鼠标/键盘属性，详参手册。

属性描述
target 返回触发此事件的元素（事件的目标节点）
currentTarget 返回其事件监听器触发该事件的元素
type 返回当前Event对象表示的事件的名称

标准Event方法

下面列出了2级DOM事件标准定义的方法。IE的事件模型不支持这些方法。

方法描述
initEvent() 初始化新创建的Event对象的属性
preventDefault() 通知浏览器不要执行与事件关联的默认动作
stopPropagation() 不再派发事件，阻止事件冒泡

JS面向对象

认识面向对象

  • 一切事物皆对象

  • 对象具有封装和继承性

  • 信息隐藏

基本面向对象

函数构造器构造对象

深入JavaScript面向对象

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/turbosha/p/10157260.html