JavaScript介绍
JS是一种运行在客户端（浏览器）的编程语言，实现人机交互效果
作用：
-
网页特效 (监听用户的一些行为让网页作出对应的反馈)
-
表单验证 (针对表单数据的合法性进行判断)
-
数据交互 (获取后台的数据, 渲染到前端)
-
服务端编程 (node.js)
组成：
- ECMAScript：规定了js基础语法核心知识。
- Web APIs：
- DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
- BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等
JavaScript权威网站
JavaScript书写位置
-
内部JavaScript
直接写在html文件里，用script标签包住
script标签写在上面，即html文件底部
将
<script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。 -
外部JavaScript
代码写在以.js结尾的文件里，通过script标签，引入到html页面中
示例：
<script src="my.js"></script>script标签中间无需写代码，否则会被忽略
外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读
-
内联JavaScript
代码写在标签内部（后面vue框架会用这种模式）
示例：
<button onclick="alert('test')">点我</button>
JS基本语法
注释
- 单行注释
//- 快捷键：
ctrl+/
- 块注释
/* */- 快捷键：
shift+alt+A
运算符
赋值运算符
=：将等号右边的值赋予给左边, 要求左边必须是一个容器
其他赋值运算符：+=、-=、*=、/=、%=
一元运算符
++和–，即自增和自减
前置自增：先自加再使用
后置自增：先使用再自加
比较运算符
> ： 左边是否大于右边
<： 左边是否小于右边
>=： 左边是否大于或等于右边
<=： 左边是否小于或等于右边
==： 左右两边值是否相等
===： 左右两边是否类型和值都相等
!==： 左右两边是否不全等
比较结果为boolean类型，即只会得到 true 或 false
对比：
= 单等是赋值
== 是判断
=== 是全等
开发中判断是否相等，强烈推荐使用 ===
字符串比较，是比较的字符对应的ASCII码
NaN不等于任何值，包括它本身
不同类型之间比较会发生隐式转换
逻辑运算符
逻辑与：&&
逻辑或：||
逻辑非：!
运算符优先级
一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高
结束符
使用英文分号;代表语句结束
实际开发中可写可不写
语句
表达式和语句
表达式是可以被求值的代码，JavaScript 引擎会将其计算出一个结果。
因为表达式可被求值，所以它可以写在赋值语句的右侧
语句是一段可以执行的代码
语句不一定有值，所以比如 alert() for和break 等语句就不能被用于赋值。
分支语句
-
if语句
if(条件){满足条件要执行的代码 } -
双分支if
if(条件){满足条件要执行的代码 }else{不满足条件执行的代码 } -
多分支if
if(条件1){代码1 }else if(条件2){代码2 } ... else{代码n } -
三元运算符
条件?满足条件执行的代码:不满足条件执行的代码 -
switch语句
switch(数据){case 值1:代码1breakcase 值2:代码2breakdefault:代码nbreak }
循环语句
-
while循环
while(循环条件){要重复执行的代码（即循环体） } -
for循环
for(变量起始值;终止条件;变量变化量){循环体 }
继续循环使用continue
跳出循环使用break
输入输出
输出语法
-
body内输出
document.write('要输出的内容')作用：向body内输出内容
如果输出的内容写的是标签，也会被解析成网页元素
-
警告框输出
alert('要输出的内容')作用：页面弹出警告对话框
-
控制台输出
conosole.log('控制台打印')作用：控制台输出语法，程序员调试使用
输入语法
prompt('请输入：')
作用：显示一个对话框，对话框中包含含一条文字信息，用来提示用户输入文字
代码执行顺序：按HTML文档流顺序执行JavaScript代码
但是，alert() 和 prompt() 它们会跳过页面渲染先被执行
字面量
在计算机科学中，字面量（literal）是在计算机中描述 事/物
包括数字字面量、字符串字面量、数组字面量、对象字面量 等等
变量
变量是计算机存储数据的“容器”
**变量本质：**是程序在内存中申请的一块用来存放数据的小空间
变量的使用
声明变量
语法：let+变量名
let 不允许多次声明一个变量
声明多个变量：
多个变量中间用逗号隔开let 变量1 = 值1, 变量2 = 值2
变量赋值
语法：变量名 = 数值
也可以声明时直接赋值
let 变量名 = 赋值
更新变量
再次进行变量赋值即可
变量命名规则与规范
规则：
-
不能用关键字
- 关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等
-
只能用下划线、字母、数字、$组成，且数字不能开头
-
字母严格区分大小写，如 Age 和 age 是不同的变量
规范：
-
起名要有意义
-
遵守小驼峰命名法
- 第一个单词首字母小写，后面每个单词首字母大写。例：userName
数组
数组 (Array) —— 一种将 一组数据存储在单个变量名下 的优雅方式
-
**元素：**数组中保存的每个数据都叫数组元素
-
**下标：**数组中数据的编号
-
**长度：**数组中数据的个数，通过数组的length属性获得
数组声明
语法：let 数组名 = [数据1,数据2,……,数据n]
-
数组是按顺序保存，所以每个数据都有自己的编号
-
计算机中的编号从0开始
-
在数组中，数据的编号也叫索引或下标
-
数组可以存储任意类型的数据
数组使用
语法：数组名[下标]（下标从0开始）
操作数组
-
新增
数组名.push(元素1,...,元素n)将一个或多个元素添加到数组末尾，并返回数组的新长度数组名.unshift(元素1,...,元素n)将一个或多个元素添加到数组的开头，并返回数组的新长度 -
删除
数组名.pop()从数组中删除最后一个元素，并返回该元素的值数组名.shift()从数组中删除第一个元素并返回该元素的值数组名.splice(start，deleteCount)从起始位置删除几个元素（deleteCount可选）
常量
使用 const 声明的变量称为“常量”。
当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let
常量不允许重新赋值,声明的时候必须赋值（初始化）
数据类型
基本数据类型
number 数字型
JavaScript 中的正数、负数、小数等 统一称为 数字类型。
数学运算符也叫算术运算符，主要包括加+、减-、乘*、除/、取余%（求模）
NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果
NaN 是粘性的。任何对 NaN 的操作都会返回 NaN
string 字符串型
通过单引号（ ‘’） 、双引号（ “”）或反引号( ` ) 包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
必要时可以使用转义符 \，输出单引号或双引号
\'或\"
+运算符 可以实现字符串的拼接。
数字相加，字符相连
模板字符串
拼接字符串和变量
语法：
-
`` (反引号)
-
在英文输入模式下按键盘的tab键上方那个键
-
内容拼接变量时，用 ${ } 包住变量
-
示例：
-
document.write(`我的名字是${name}，今年${age}岁`)
boolean 布尔型
表示肯定或否定时在计算机中对应的是布尔类型数据。
它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）
undefined 未定义型
未定义是比较特殊的类型，只有一个值 undefined。
只声明变量，不赋值的情况下，变量的默认值为 undefined，
null 空类型
JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值
null 和 undefined 区别：
- undefined 表示没有赋值
- null 表示赋值了，但是内容为空
引用类型
object 对象
检测数据类型
typeof 运算符可以返回被检测的数据类型。它支持两种语法形式：
- 作为运算符：
typeof 变量名（常用的写法） - 函数形式：
typeof(变量名）
类型转换
JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚
使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算
隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
规则：
+号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
显示转换
转换为数字型
-
Number(数据)
- 转成数字类型
- 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
- NaN也是number类型的数据，代表非数字
-
parseInt(数据)
- 只保留整数
-
parseFloat(数据)
- 可以保留小数
转换为字符型:
- String(数据)
- 变量.toString(进制)
函数
function，是被设计为执行特定任务的代码块
函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。
函数使用
函数声明
function 函数名(参数列表) {函数体
}
参数列表可以省略
示例：
function f1(){document.write('hello')
}function f2(num1,num2){document.write(num1+num2)
}
函数命名规范
和变量命名基本一致
尽量小驼峰式命名法
前缀应该为动词
命名建议：常用动词约定
函数调用
函数名(传递的参数列表)
如果某个参数没有给对应形传实参，默认是undefined
函数返回值
当函数需要返回数据出去时，用return关键字
区别于java的是，java需要声明返回类型，这里直接返回就可以了
示例：
function getSum(x,y){return x+y
}
没有return的函数默认返回undefined
匿名函数
没有名字的函数, 无法直接使用。
-
函数表达式
将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式
语法：
lef fn = function(){函数体 }调用：
fn() -
立即执行函数
避免全局变量时间的污染
// 方式1 (function(){函数体})();// 方式2 (function(){函数体}());多个立即执行函数要用 ; 隔开，要不然会报错
对象
JavaScript里的一种数据类型
对象组成
对象由属性和方法组成
let 对象名 = {属性名: 属性值,方法名: 函数
}
对象使用
对象声明
let 对象名 = {}//示例
let 对象名 = new Object()//示例
let person = {}
对象属性调用
//语法：对象名.属性名//示例
let person = {uname: '老师',age: 18,gender: '女'
}console.log(person.name)
如果对象属性为多次属性或 - 等属性，点操作就不能使用了
需要换用以下方式：
//示例：
let person = {'user-name': '老师',age: 18,gender: '女'
}console.log(person['user-name'])
对象属性修改
语法：对象名.属性名 = 新值
对象新增属性
语法：对象名.新属性 = 新值
示例：
let person = {uname: '老师',age: 18,gender: '女'
}person.address = '成都'
对象删除属性
语法：delete 对象名.属性
对象方法
方法的声明和正常函数声明相同
let 对象名 = {方法名: function() {...}
}
方法调用和属性调用类似：对象名.方法名()
遍历对象
使用 for in 语法进行遍历
//示例
let person = {uname: '老师',age: 18,gender: '女'
}for (let i in person){console.log(i) //打印属性名console.log(person[i]) //打印属性值
}
内置对象
JavaScript内部提供的对象，包含各种属性和方法给开发者调用
Math
Math对象是JavaScript提供的一个“数学”对象
Math对象包含的方法有：
- random：生成0-1之间的随机数（包含0不包括1）
- ceil：向上取整
- floor：向下取整
- max：找最大数
- min：找最小数
- pow：幂运算
- abs：绝对值
