什么是JavaScript？
是一种客户交互脚本语言
客户：有两个含义第一指的是客户端，第二个指的是用户。
交互：指的是用户动作之后，页面或服务器会有相应的反馈。
脚本：指的是需要按一定顺序才能正常执行的。
怎么使用JavaScript
直接使用script标签，在标签中写JS语言即可。也可以在JavaScript标签中使用src属性来进行外链脚本文件。跟CSS的外联样式表使用基本相同。
变量
定义变量的方法
- var 变量名
- let 变量名
如何选择使用哪个方法来定义变量。以现在的标准来讲，一般情况下都应该优先使用let来定义变量。在某情况下才会使用var来定义变量
变量名命名规范，不要使用特殊字符（除了大小写英文字母、数字0-9还有下划线_以外的所有字符都是特殊字符）。不能使用纯数字，也不能使用数字开头。
变量的赋值
=赋值符，作用是把右边的值赋给左边 例如： let a = “牛奶”;
变量可以认为是一个有名字用于存放数据的容器
变量的数据类型
分类为标量类型
一、字符串(string)
定义字符串需要使用定界符('或者")包裹
一般情况下单引号或双引号做定界是没有区别的。但是如果字符串中有单引号，我们就使用双引号作为定界符，反则亦然。
\转义符它的主要有两个作用：
- 把后一位的字符转为纯字符串
- 用于特殊字符的输出，比方说换行符
+拼接符 把左右两边的字符串进行拼接
二、数字(Number)
- 整型(Integer)：整数，包括负数
- 浮点型(float)：小数，包括负数
+ - * / %这五个是最常用的运算方法。并且它们的运算顺序也遵循正常计算方法，也就是说先乘除后加减。如果有需要提前运算的话一样可以使用()。小括号是优先运算符
自运算
i++,++i
自增符或者叫递增符。当前值加一后返回给自己 i++ -->i=i+1;
i++跟++i一般情况下是相同的，但如果在自增的同时进行调用。就会有两种情况。
i++ 是先调用后运算
++i 是先运算后调用
i–,--i
自减或者叫做递减，其原理跟自增一样。
三、布尔型(Boolean)
只有两值true和false
上面两种类型是复合型
四、数组(Array)
定义数组
格式：
let 数组名 = Array(元素1,元素2,…)
let 数组名 = [元素1,元素2,…]
调用数组中元素的方法
数组名[下标(键值)]
注意：在JS中所有的下标都是从0开始
多维数组
数组中的元素也是一个数组。在数组中有多一层的数组我们叫二维数组，再多一层叫三维数组。
五、对象(Object)
定义对象
格式：
let 对象名 = {属性1：值，属性2：值…}
调用对象属性的方法
对象.属性
下面三种分类为特殊型
null 空类型
undefined 值未定义，也是所有变量的默认值
NaN 非数字。not a number。由于NaN是泛指所有非数字的值，所有NaN是不等于NaN。无法直接用这个值进行判断
基础语法
判断语句
格式：
if(判断条件){当判断条件成立时执行的语句}
扩展格式：
if(判断条件){当判断条件成立时执行的语句}
else{当判断条件不成立时执行的语句}
也叫做二路选择语句
比较运算
比较符号两边的值。如果符合该符号的预期结果则返回布尔值true，否则返回false
==、>、>=、<、<=、！=、===（严格等于）
扩展格式2：
if(条件1){当条件1成立时执行的语句}
else if(条件2){当前面条件不成立时并且条件2成立时执行}
else if(条件3)…
[else{前面所有条件都不成立时执行}]
判断的条件也就是小括号的值最终会以布尔值来进行判断，如果最终不是布尔，那JS会对里面的值进行转换。一般来讲只要是正经可以使用的值就是true，比方说123，"字符串"等可以真使用的值。比较特殊的值有数字0会自动转换为false，所有特殊值null、undefined、NaN都是转换为false。
switch 语句
格式
switch(判断值){
case 对比值1:
如果对比值1等于判断值就执行的语句
break;
case 对比值2:
如果对比值2等于判断值就执行的语句
break;
……
default:
当所有对比值都不等于判断值时执行语句
break;
}
一般来讲switch都是可以使用if语句来进行替用的，但本来switch语句会更加方便阅读并且它的执行效率会比if…else要更高，所以能用switch的，都应该使用switch
===严格等于也叫做绝对等于，除了值要相同外，数据类型也必须要相同才会返回true。
循环语句
for循环
格式
for(初始化;判断条件;循环后执行的语句){当判断条件成立时执行的语句}
循环作用
- 需要重复使用的语句时，我们可以使用循环来完成
- 有些计算需要用于循环来完成
- 数组的遍历
数组的遍历
数组的遍历是指吧数组中的元素一个一个进行调用
while循环
格式
while(循环条件){
循环条件成立执行的语句
}
由于使用while循环比较容易写成死循环，所以使用for循环会比它更多一些
do…while循环
格式
do{
语句
}while(循环条件);
do…while循环里的语句至少会执行一次
for…in循环
格式
for(属性变量 in 对象){
执行的语句
}
作用：是用于对象的遍历
关键字说明
- break 跳出当前语句
- continent 跳出当前环节执行下一个环节
自定义函数
自定义函数就是用户自定义下来的函数。所谓的函数就是在程序中封装好的语句。
定义格式
function 函数名(参数1,参数2){
执行的语句
}
PS：定义函数时，所用函数中的语句是不执行的
调用格式：
函数名(参数,参数…)
作用
- 用于重复调用的语句，在需要的时候可以直接调用
- 可以通过参数的改变把结果改变
- 把复杂的语句进行分割，方便阅读与修改
有返回值的函数就是该函数使用了关键字return把需要的值返回出去。
函数执行了关键字return的话就是结束当前函数。
变量的作用域
变量的作用域是指变量可以作用的区域，一般这些区域都是以函数作用分割。
一般情况下，高级的域所定义在变量是可以直接在低级域(使用函数分割出来的区域)中使用。这样的变量我们叫做全局变量。
在函数中定义的变量它的作用域只在该函数中或其低级的函数生效，所以这样的变量我们叫做局部变量。
var关键字与let关键字的区别
- var有着编译级别的优先级
- let同一个作用域只能定义一个变量名
JavaScript的内置对象
什么是对象？
所拥有相同属性与方法的集合就是对象。(这个是JS中对象的概念，在其它面向对象语言中这是类的概念)
对象的属性：可以静态描述对象的信息就是属性
调用方法：对象名.属性名
对象方法：对象要把做的事情，或者可以对对象做的事情就是方法
调用方法：对象名.方法名()
new关键字，用于实例化对象。实例化对象是从对象集合中把一个个体作用研究的对象。只用实例化后对象才能使用
什么是JS内置对象？
不需要创建JS本就有的对象
字符串对象
常用属性：
length：返回对象的长度(字的多少)
常用方法：
indexOf：返回目标字符串在原字符串对象所在位置的下标
substr：返回目标字符串从指定开始下标到指定长度之间的所有字符串
substring：返回目标字符串从指定开始下标到指定结束下标的所有字符串
数组对象：
常用属性：
length：返回对象的长度（元素的个数）
常用方法：
push：为数组添加一个新的元素，返回新数组的长度
pop：；移除数组中最后一个元素，返回该元素
splice：移除数组中指定位置一个或多个元素，有需要可以用新的元素替换移除的元素。返回的是移除的元素
reverse：返回原数组倒序的数组
join：返回一个使用字符串连接起所有数组元素的字符串
PS：在JS中赋值是有两种赋值形式。一种是直接赋值，另一种是引用赋值。
直接赋值：指的是把值直接赋值给变量(值的拷贝)
引用赋值：指的是把值的内存地址进行传递(地址的拷贝)
一般情况下都是直接赋值
sort：使用指定方法对象数组中的元素进行排序。会使用函数中的方法来进行排序，基本准则是如果返回值小于零则原位置不动。如果大于零则元素位置相关调换
日期对象：
用于日期的处理与生成的方法
getTime 获取当前日期对象的时间戳，时间戳指的是从1970年1月1日零时零分零秒开始算到该日期的毫秒数(不同语言的单位可能不同，比方说PHP是按秒算的)
数学对象：
提供各种用数学计算的方法或者常数
常用方法：
random：生成一个0~1的伪随机数。有可能为0，不可能为1
round：四舍五入到整数的方法
floor：向下取整
ceil：向上取整
BOM与DOM
BOM浏览器操作对象
由于JS是基于对象开发的编程语言，所以实际上它所有内容都相当于是对象中的属性或方法。这由于JS最大的对象就是window(浏览器)
DOM文档操作对象
DOM就是对页面元素的操作
页面中的所有元素都是以节点的形式进行表现
获取页面中指定节点对象的方法：
通过ID获取节点对象
格式：document.getElemmentById(ID名)
通过标签名获取节点对象
格式：document.getElementsByTagName(标签名)
注意：由于一个页面中可能有多个同名的标签，所以这个方法获得到的是对要使用其中一个节点需要加上标签来使用。
通过Name值来获取节点对象
格式：document.getElementsByName(name值)
通过Class名来获取节点对象
格式：document.getElementsByClassName(Class名)
得到的是Element对象，所以可以使用Element的属性与方法。
注意是Element里的节点(Node)又成了ElementNode与TextNode
JavaScript的事件绑定与触发
JS事件就是可以为页面中的元素绑定一些指定的事件。通过这些事件触发，我们去执行指定的语句。
JS功能开发流程：
一、功能流程
功能流程就是指用户在使用该功能的过程
比如计算器的功能流程：
- 用户需要在数字1与数字2的输入的地方填入数字
- 用户会根据自己需要选择一个运算方法的按钮去点击
- 用户会在显示结果的地方看到两个数字按要求运算后的结果
二、数据流程
数据流程就是程序上按照功能流程下来应该执行的流程
比如计算器的数据流程
- 获取数字1与数字2用户输入的值
- 得到用户选择运算方法
- 把得到数字1跟数字2使用运算方法进行运算并得到结果
- 把结果输出到页面指定的位置上
小知识点：
字符串转换成数字的方法：
- 使用函数parseFloat()或者parseInt()
- 使用强制转型Number()
- 使用运算来转型 *1
所有JS功能的基本步骤
- 获取：指的是根据功能要求获取用户输入的信息或者是系统中的信息
- 处理：指的是根据功能把获取的数据进行处理
- 反馈：指的是根据功能要求把处理好的结果反馈给用户或者服务器
关键字this是指对象本身
Element对象
| 属性/方法 | 描述 |
|---|---|
| element.accesskey | 设置或返回元素的快捷键 |
| element.appendChild | 向元素添加新的子节点，作为最后一个子节点 |
| element.attributes | 返回元素属性的NameNodeMap |
| element.childNodes | 返回元素子节点的NodeList |
| element.className | 设置或返回元素的class属性 |
| element.clientHeight | 返回元素的可见高度 |
| element.clientWidth | 返回元素的可见宽度 |
| element.cloneNode() | 克隆元素 |
| element.compareDocumentPosition() | 比较两个元素的文档位置 |
| element.contentEditable | 设置或返回元素的文本方向 |
| element.dir | 设置或返回元素的内容是否可编辑 |
| element.firstChild | 返回元素的首个子元素 |
| element.getAttribute() | 返回元素节点的指定属性值 |
| element.getAttributeNode() | 返回指定的属性节点 |
| element.getElementsByTagName() | 返回拥有指定标签名的所有子元素的集合 |
| element.getFeature() | 返回实现了指定特性的API的某个对象 |
| element.getUserData() | 返回关联元素上键的对象 |
| element.hasAttribute | 如果元素拥有指定属性，则返回true，否则返回false |
| element.hasAttributes | 如果元素拥有属性，则返回true，否则返回false |
| element.hasChildNodes | 如果元素拥有子节点，则返回true，否则返回false |
| element.id | 设置或返回元素的id |
| element.innerHTML | 设置或返回元素的内容 |
| element.insertBefore() | 在指定的已有的子节点之前插入新节点 |
| element.isContentEditable | 设置或返回元素的内容 |
| element.isDefaultNamespace() | 如果指定的namespaceURL是默认的，则返回true，否则返回false |
| element.isEqualNode() | 检查两个元素是否相等 |
| element.isSameNode() | 检查两个元素是否是相同的节点 |
| element.isSupported() | 如果元素支持指定特性，则返回true |
| element.lang | 设置或返回元素的语言代码 |
| element.lastChild | 返回元素的最后一个子元素 |
| element.namespaceURL | 返回元素的namespaceURL |
| element.nextSibling | 返回位于相同节点树层级的下一个节点 |
| element.nodeName | 返回元素的名称 |
| element.nodeType | 返回元素的节点类型 |
| element.nodeValue | 设置或返回元素值 |
| element.normalize() | 合并元素中相邻的文本节点，并移除空的文本节点 |
| element.offsetHeight | 返回元素的高度 |
| element.offsetWidth | 返回元素的宽度 |
| element.offsetLeft | 返回元素的水平偏移位置 |
| element.offsetParent | 返回元素的偏移容器 |
| element.offsetTop | 返货元素的垂直偏移位置 |
| element.ownerDocument | 返回元素的根元素(文档对象) |
| element.parentNode | 返回元素的父节点 |
| element.previousSibling | 返回位于相同节点树层级的前一个元素 |
| element.removeAttribute() | 从元素中移除指定属性 |
| element.removeAttributeNode() | 移除指定的属性节点，并返回被移除的节点 |
| element.removeChild() | 从元素中移除子节点 |
| element.replaceChild() | 替换元素中的子节点 |
| element.scrollHeight | 返回元素的整体高度 |
| element.scrollLeft | 返回元素左边缘与视图之间的距离 |
| element.scrollTop | 返回元素上边缘与视图之间的距离 |
| element.scrollWidth | 返回元素的整体宽度 |
| element.setAttribute() | 把指定属性设置或更改为指定值 |
| element.setAttributeNode() | 设置或更改指定属性节点 |
| element.setIdAttribute() | element.setIdAttributeNode() |
| element.setUserData() | 把对象关联到元素上的键 |
| element.style | 设置或返回元素的style属性 |
| element.tabIndex | 设置或返回元素的tab键控制次序 |
| element.tagName | 返回元素的标签名 |
| element.textContent | 设置或返回节点及其后代的文本内容 |
| element.titile | 设置或返回元素的title属性 |
| element.toString() | 把元素转换为字符串 |
| element.item() | 返回NodeList中位于指定下标的节点 |
| element.length | 返回NodeList中的节点数 |
逻辑运算符：
！ 逻辑非，返回当前值的反值
&& 逻辑与，当符号两边的值同时为true时，才返回true。
|| 逻辑或，当符号两边的值只要有一个为true时，就返回true
PS：逻辑运算符中同样有着优先顺序
例子：
!true && true => false
!true || true => true
!(true || true) => false
true && false || true && true => true
true || false && true || false => true
JavaScript定时器
setTimeout 等待指定的时间后执行语句，返回当前定时器的ID
setInterval 周期性的执行语句，返回当前定时器的ID
clearTimeout 清除setTimeout定时器，需要传入指定定时器ID为参数
clearInterval 清除setInteraval定时器，需要传入指定定时器ID为参数
扫一扫
1689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
