JS JavaScript

JavaScript 的作用
- 用于界面的交互效果
  - 表单验证
  - 游戏
  - 后台 (node.js)
JavaScript 的引入方式

 // 引入方式 js<script src="js文件的路径"></script>// 内嵌式的 js<script>// js 代码</script>// 重定向的地方<a href="js代码"></a>

JavaScript 的调试工具

 // 输出到控制台
console.log()
// 写入内容到 html 页面中
docunent.writh()
// 带有提示信息的警示框
alert()

JavaScript 的组成部分
- ECMAScript : 规定了JS的语法
- BOM ：浏览器对象模型(Browser Object Model)
- DOM ：文档对象模型 (Document Object Model)

ECMAScript

JS 的命名规范
在 js 中严格区分大小写
- 必须以字母，下划线，$ 开头，其余部分可以是数字，字母，下划线，$
- 不可以使用 js 中的关键字和保留字
- 命名要有意义（见名思义）
- 驼峰命名法
  - MySelfLove（大驼峰命名法）
  - getElementsByClassName（小驼峰命名法）
- js 自己的命名习惯
- 首字母大写 Number, String, Object;
变量

变量是存储数据的容器

   // 变量的生命赋值// 在js中使用var和let这两个关键字进行变量的声明// 先声明一个变量在赋值var num;num = 1;// 声明一个变量的同时赋值var num = 1;// 一次声明多个变量，在单个进行赋值，通用逗号隔开var num, num1, num2;num = 1, num1 = 2, unm2 = 3;// 一次性声明多个变量的同时进行赋值，通用逗号隔开var num = 1, num1 = 2, num = 3;

数据类型

通过学习数据类型能够了解到计算机能够处理的 js 中的数据，也能够清楚地知道变量可能会存贮的数据。

   Object.prototype.toString.call(值)  // 可以检测任意数据类型typeof(值) // 可以检测任意数据类型().const == Number/String...(数据类型)  // 可以检测任意数据类型

根据数据在内存中的存储位置不同分为初始数据类型和引用数据类型

初始数据类型

这类型的数据存储在内存中的栈区

1. 数据型- 整形- 浮点型- 最大值最小值：Number.MAX_VALUE（最大值）； Number.MIN_VALUE（最小值）；- 科学计数法
**在 js 中 0 可以作为除数，结果为 Infinity；如果被除数为负数，结果为 -Infinity；**
2. 字符串> 字符串使用引号包裹- 单双引号的功能相同- 单引号内部不能嵌套单引号，双引号内部不能嵌套双引号- 单双引号可以相互嵌套，但是不可以交叉使用- 如果在字符串中需要使用单双引号，可以用转义字符 () 来将他们转为普通字符
3. 布尔值true,false flag = true（判断为真）;flag = false（判断为假）**在 js 中，除了空字符串 (""),0,false,null,undefined,NaN 为假，其余都为真**
4. undefined未定义- 只声明变量未赋值，变量默认值是 undefined- 使用 var 声明的变量，在访问变量之前，变量的值为 undefined，这个现象叫做变量提升 使用 let 没有变量提升不会在声明之前访问到 let 声明的变量- 函数没有返回值时，默认值是 undefined
5. null空，占位符
6. Symbol独一无二的值。

引用数据类型

这种类型的数据保存在堆区中
- Object
- Function
- Array
运算符

+(加) 、-(减)、*(乘)、/(除)、%(取余)、**(次方)、++(加加相当于加一)、–(减减相当于减一)

(+)

1.用于正常的加法运算：会将非数值类型转换为数值类型进行运算
2.用于字符串的拼接：任意数据类型与字符串相加结果为拼接后的字符串
(-、*、/、%)

正常的运算，会将非数值类型转化为数值类型进行运算，如果能够转为数值型将进行正常的运算，如果不能，结果为 NaN(Not a Number)
(++、–)

++ 或 – 在前面，先进行自增或自减，然后再参与运算 ++ 或 – 在后面，先进行运算，再进行自增或自减
赋值运算 (=、+=、-=、*=、/=、%=、**=)
关系运算符 (>、<、>=、<=、==(等于)、===(绝对等于) 、 !=(不等于)、!==(绝对不等于))

比较规则
- 数值型与数值型比较，正常比较
- 数值型与其他数据类型比较，会将其他的数据类型转换为数值类型进行比较，如果无法转换为数值型，结果为 false，否则正常比较
- 字符串与字符串进行比较：依次比较字符的 ASCII 编码值，直到能够分出大小为止。
逻辑运算符与 (&&) 或 (||) 非 (!)
1. 与：&&
  
  与运算的最终结果：运算符两边的表达方式，哪一个可以决定他的真假，最终结果为哪一个（两边都为真输出为真）如果与运算左侧的表达是为假，那么不会去看右边的的表达式的真假，最终结果为左侧表达式的值，这叫短路原则
2. 或：||
  
  运算的最终结果，左右两侧有一个表达式为真，结果为真，如果两个的值都为假，运算两边的表达式，哪一个决定他的真假，最终结果为哪一个如果左侧表达式为真，不会去看右侧的表达式结果，最终结果为左侧表达式的值，这叫做短路原则，给函数参数设置默认值的时候会用到
3. 非：！
  
  取反，表达式为真，取反为假；原表达式为假，取反为真

一元运算符

new delete -（负） +（正）
三元运算符

表达式?表达式为真的返回值：表达式为假的返回值；
特殊运算符

, 分隔符 () 提升运算的优先级

流程控制

默认情况下代码会从上往下执行，当需要根据不同的条件执行不同的代码的时候，需要使用流程控制

顺序结构

代码正常的执行顺序

分支结构

根据不同的条件去执行不同的代码

if 分支

用于判断范围

应用

判断出数字的奇偶数；

// 洗发水// 买洗发水 15 元，香皂 2 元，牙刷 5 元，总计 100 元// 1. 确定 100 元能够购买单个商品的最多数量// 2. 通过循环将每种商品的数量进行确定// 3. 判断条件：商品的价格相加为 100// 洗发水var a,b,c;for(a=0;a<=6;a++){// 香皂for(b=0;b<=50;b++){// 牙膏for(c=0;c<=20;c++){if(a*15+b*2+c*5==100){console.log(a,b,c)}}}}// 单路分支if（条件）{// 条件满足时执行的代码}// 双路分支if（条件 1){// 条件 1 满足时执行的代码}else if（条件 2){// 条件 1 不满足时，条件 2  满足时执行的代码}// 多路分支if（条件 1){// 条件 1 满足时执行的代码}else if（条件 2){// 条件 1 不满足时，条件 2 满足时执行的代码}else if（条件 3){// 条件 1，2 不满足时，条件 3 满足时执行的代码}else{// 条件都不满足时执行的代码}// 嵌套分支if（条件 1){// 条件一满足执行的代码if（条件 2){// 条件 1，条件 2 满足执行的代码if（条件 3){// 条件 1，条件 2，条件 3 都满足执行的代码}else{// 条件 1，条件 2 满足，条件 3 不满足执行的代码}}else{// 条件 1 满足，条件 2 不满足执行的代码}}else{// 条件一不满足执行的代码}

switch

用于判断单个的值是否满足条件

应用

根据传入的数值的不同显示不同的星期

switch（值）{case条件 1：条件一满足时执行的代码break;  // 用于终止后面的条件判断case条件 2：条件二满足时执行的代码break;case条件 3：条件三满足时执行的代码break;...default: 条件都不满足时执行的代码break;}

一、for 循环

根据一定的条件去重复的执行同一段代码。（在条件满足的情况下，重复的执行循环体）

循环的组成：

初始值；终止值；进步值；循环体

语法

for（初始值；终止值；进步值）{// 循环体}

应用

当需要重复的多次的执行某一段代码时候

数组的遍历， DOM 元素的遍历

求 1-100 的和，求 1-100 的所有偶数，求 100-1000 之间的水仙花数

二、while 循环

在满足条件的情况下重复的执行某一段代码，如果没有终止循环的条件，那么会陷入死循环

当我们知道循环条件，不知道循环次数的时候使用 while 循环

三、do_while 循环

在满足条件的情况下重复的执行某一段代码，如果没有终止循环的条件，那么会陷入死循环；但是会先执行循环体后判断条件

当我们知道循环条件，不知道循环次数的时候可以使用 do_while 循环

四、for 循环和 while 循环的区别

for 循环必须要知道循环次数，while 循环不需要
优先考虑使用 for 循环
当我们可以明确的写出初始值，终止值，步进值的时候一定选择 for 循环。

五、while 循环和 do_while 的区别

while 循环只要条件不满足就不会执行循环体，do_while 不论条件是否满足都会先执行一次循环体

while 循环先判断条件，再执行循环体；do_while 循环先执行循环体，再判断条件

内置顶层函数

Number()

将任意数据转化为数据型，如果不能，最终结果为 NaN

数值型转为本身
数值型的字符串转为对相应的数值型；
空字符串转为 0，其余字符串转为 NaN
true 转为 1，false 转为 0
undefined 转为 NaN
null 转为 0

parselnt()

将任意数据类型转为整型

如果一个字符串中只包含数字，转为十进制数
如果字符串开始有很多空格，会从第一个不为空格的位置开始转换，直到第一个不为数字的值结束
如果字符串中第一个字符不是数字，- 数字，空格开头的，转换为 NaN
如果有两个参数，第一个表示的是要转换的数字，第二个表示的是进制（当前数字是几进制的），结果是一个十进制的数字
会将无意义的前导 0 和后岛 0 去掉

parseFloat()

将任意数据类型转换为浮点型（小数）

只识别一个小数点
如果转换的数据是有效的整数，那么会返回整数，不会返回浮点数
其余规则与 parseInt 相同（除了进制）

String()

将任意数据类型转换为字符串

如果是 null，undefined 转为"null"，“undefined”
如果是数值型，转为本身的字符串，123 转为"123"
如果是布尔值，true 转为 “true”,false 转为"false"

Boolean()

除了空字符串，null，undefined，false，0，NaN 为假，其余都为真

isnNaN()

判断一个数据是否能够转为数值型

如果能够转为数值型返回 false

如果不能，返回 true

eval()

将一段字符串当成代码执行

在执行的时候需要将字符串先解析成代码再执行，会影响性能
在不必要的情况下不要使用
安全性能差

前置类型转换

不论数据是什么数据类型，都会转成相应的数据类型

Number
String
Boolean
parseInt
parseFloat

详细的转换规则请看内置顶层函数部分

隐式类型转换

在 js 中进行数据运算的时候，运算符两端的数据类型是任意的，而这种现象是因为 js 在进行运算的时候帮助我们进行了隐式的数据类型转换，这是 js 弱类型语言的表现

算数运算符类
- 减、乘、除
运算的时候会将非数值型转换为数值型进行运算（隐式的调用了 Number()，将非数值型转为数值型）

如果转换不成功，整个表达式的结果为 NaN
- 加
如果与字符串相加，会返回拼接后的结果

与非字符串相加，规则同上（减乘除）
关系运算符类

除了字符串与字符串比较以外，其余数据类型在进行比较的时候会将非数值型转为数值型进行比较（隐式的调用 Number() 进行转换），如果转换不成功结果为 false

字符串与字符串进行比较的是每一个字符的 ASCII 编码值

逻辑运算符

与或非运算会隐式的调用 Boolean() 函数对参与运算的表达式（数据）进行数据类型转换（转为布尔型）

语句中存在的数据类型转换

if，while，do_while 和三元表达式中参与判断的数据都会隐式的调用 Boolean() 函数进行转换比较

以上所涉及到的数据类型转换都会按照相应的规则去转换，转换规则参照内置顶层函数
数据类型转换就是将参与运算的数据转为我们需要的数据类型

window

每一个浏览器页面都有窗口，window 对象在 js 中是全局的 (global)；在 js 中声明的全局变量或函数其实都是在 window 对象上面添加了一个属性或方法，所以我们可以在 js 中的任何一个地方访问到他

window 对象的属性

属性名	作用
innerWidth	返回窗口的宽度
innerHeight	返回窗口的高度
screen.width	屏幕的宽度
scree.height	屏幕的高度
top	返回最顶层的窗口的对象（当有 iframes 存在时可以使用）

window 对象的方法

方法	参数	作用
alert	一段文本	弹出一段具有提示信息的弹出框
confirm	文本	弹出一个具有确认取消按钮的对话框
prompt	文本	弹出一个具有输入框和确认取消按钮的对话框（执行结果是用户在输入框中输入的内容）
open	url	通过脚本打开一个新的窗口
close	无	关闭当前窗口
scrollBY	X,Y	根据指定的偏移量滚动文档
scrollTO	X,Y	将文档滚动到制定位置
setInterval	callback,time	每过一段时间执行一次代码
clearInterval	无	清除掉 setInterval 设置的时间函数
setTimeout	callback,time	经过一短时间在执行代码（只执行一次）
clearTimeout	无	清楚 setTimeout 设置的时间函数

location 对象属性

属性	描述	可读写性	结
herf	包含整个 url 的一个字符串	读写	http://www.baidu.com:80/javascript/001/BOM/?file=README.md#location 对象
origin	包含页面来源的域名标准形式字符串	只读	http://www.baidu.com:80
protocol	包含 url 对应协议的字符串，最后一个“:”	只读	http:
host	包含域名和端口号的字符串，如果没有端口号则只有域名	只读	www.baidu.com:80
hostname	包含 url 域名的字符串	只读	www.baidi.com
port	包含端口号的字符串	只读	80
pathname	包含 url 中路径部分的字符串，开头有一个“/”	只读	/javascript/001/BOM/
search	包含 URL 参数（查询字符串）的字符串，开头有一个“?”	只读	?file=README.md
hash	包含块标识符的字符串，开头有一个"#"	只读	#location 对象

location 对象方法

属性	参数	返回值	功能	兼容性
assign	erl	undefined	加载给 url 的内容资源	全部
reload	Boolean	undefined	重新加载来自当前 url 的资源（刷新本页）	全部
replace	url	undefined	用给定的 url 替换掉当前的资源	全部
toString	无	包含整个 url 的字符串	获取本窗口的 url（只能获取，无法修改，读取效果与 location.href 相同）

对象的扩展

对象的解构赋值

将数组或对象的数据一一拿出来赋值给变量，这个过程就是解构赋值

对象的解构赋值：变量名与属性名是一一对应的，在进行匹配时不需要关心变量所在的位置，只需要关心变量名称就可以，变量位置的改变不会影响变量存储的数据
数组的解构赋值：变量与数组元素从前往后一一对应，一单变量的位置发生改变变量所存储的数据也会发生变化。

对象的拷贝

浅拷贝

浅拷贝是将对象在内存中的地址进行复制，最终的结果是两个变量指向同一个对象，修改其中任意一个都会对另外一个造成影响 ===>也就是“传址”

深拷贝

深拷贝是在内存中重新开辟了一块区域用来保存新的对象，然后将原来对象中的所有属性和方法进行依次拷贝，放置到新的对象中，这样两个变量保存的对象的地址不是同一个，修改任意一个不会影响另外一个。

内存空间

栈区

存储的是初始数据类型

存储或读取的特点：先入后出，后入先出

初始数据类型不可更改，也就是 1 不可能变成 2，true 不可能变成 false。我们平时对数据的修改是对变量的更新，而不是修改数据本身

堆区

存储的是引用新数据类型

我们通过变量保存的不是数据本身，而是数据在内存中的存储地址（指针）

JS JavaScript相关推荐

阿提拉公司 java_Atitit 文件上传架构设计实现机制解决方案实践java php c#.net js javascript c++ python...
Atitit 文件上传架构设计实现机制解决方案实践 java php c#.net js javascript c++ python 1 . 上传的几点要求 2 1 .1. 本地预览 2 1 ...
atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97
atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97 1. 实现html5化界面的要解决的策略1 1.1. Js交互1 1.2. 动态参 ...
java swing调用H5_atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97...
atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97 1.实现html5化界面的要解决的策略 1.1.Js交互 Firefox与Chro ...
[js]JavaScript Number.toPrecision() 函数详解
[js]JavaScript Number.toPrecision() 函数详解 JavaScript: numberObject.toPrecision( [ precision ] ) 如果没有提 ...
Atitit. 数据约束校验原理理论与架构设计理念模式java php c#.net js javascript mysql oracle...
Atitit. 数据约束校验原理理论与架构设计理念模式java php c#.net js javascript mysql oracle 1. 主键1 2. uniq index2 3. ...
java 返回js,Javascript返回上一页
1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.for ...
Eclipse去除js(JavaScript)验证错误
这篇文章主要是对Eclipse去除js(JavaScript)验证错误进行了介绍.在Eclipse中,js文件常常会报错.可以通过如下几个步骤解决第一步: 去除eclipse的JS验证: 将wind ...
常用js(javascript)函数
常用js(javascript)函数 1.常规函数 javascript常规函数包括以下9个函数: (1)alert函数:显示一个警告对话框,包括一个OK按钮. (2)confirm函数:显示一个确认 ...
模仿微信朋友圈图片浏览 js javascript 支持图片预览，滑动切换，双指缩放，图片缓存
模仿微信朋友圈图片浏览 js javascript 支持图片预览,滑动切换,双指缩放,图片缓存 2017年08月10日 12:11:38 阅读数:2311 previewImage-mobile 仿 ...
原生JS javascript解除绑定事件 JS删除绑定事件
原生JS javascript解除绑定事件 JS删除绑定事件一.直接删除法 1.适用于直接绑定的事件,如: <h1 id="h1" onclick="_click ...