JavaScript语法

 JavaScript是什么

JavaScript介绍

1.JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

2.作用：

①. 网页特效（监听用户的一些行为让网页作出对应的反馈）

②. 表单验证（针对表单数据的合法性进行判断）

③. 数据交互（获取后台的数据，渲染到前台）

④. 服务端编程（node.js）

3.组成：
①. ECMAScript：规定了js基础语法核心知识。（比如：变量、分支语句、循环语句等等）

②. Web APIs：包括DOM操作文档（比如对页面元素进行移动、大小、添加删除等操作）和BOM操作浏览器（比如页面弹窗，检测窗口宽度、存储数据到浏览器等等）。

JavaScript书写位置

1. 内部JavaScript：直接写在HTML文件里，用script标签包住。

规范写法：script标签写在</body>上方。

拓展：alert（'你好，JS'）页面弹出警告对话框

2. 外部JavaScript：代码写在以.js结尾的文件中，通过script标签引入HTML页面中。

注意：script标签中间无需写代码，否则会被忽略。

3. 内联JavaScript：代码写在标签内部。

JavaScript的注释符

1. 单行注释：

• 符号：//
• 作用：//右边这一行的代码会被忽略
• 快捷键：ctrl+/

2. 块注释：

• 符号：/* */
• 作用：在/*和*/中间的代码会被忽略
• 快捷键：shift+alt+A

JavaScript的结束符

• 代表语句结束
• 英文分号
• 可写可不写
• 换行符（回车）会被识别成结束符，所以一个完整的语句不要手动换行
• 为了风格统一，要写结束符就统一写，不写结束符就统一不写

JavaScript输入和输出语法

1.输出语法：

document.wirte('要输出的内容')

• 向body内输出内容
• 如果输出的内容是标签，也会被解析成网页元素

alert('要输出的内容')

• 页面弹出警告对话框

console.log('控制台打印')

• 控制台输出语法，程序员调试使用

2.输入语法：

prompt('请输入：')

显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

字面量

在计算机科学中，字面量是在计算机科学中描述事/物。（包括数字字面量、字符串字面量、数组字面量、对象字面量等等）

变量

变量是什么

变量：是计算机中用来存储数据的“容器”，可以让计算机变得有记忆。（变量不是数据本身，仅仅是一个用于存储数据的容器）

变量基本使用

1. 声明变量：使用变量之前首先要创建变量（专业说法：变量声明）。语法：

let 变量名

• 声明变量由两部分组成：声明关键字、变量名（标识）
• let即关键字，关键字是系统提供的专门用来声明变量的词语

2. 变量赋值：定义了一个变量之后，就能够对变量进行初始化（赋值）。在变量名后加上一个“=”，后面接着数值。

3. 更新变量：变量赋值后，可以通过简单地给它一个不同的值来更新它。（let不允许多次声明一个变量）

变量的本质

程序在内存中申请的一块用来存放数据的小空间

变量命名规则与规范

1. 规则：（必须遵守，不遵守会报错）

• 不能用关键字（关键字是有特殊含义的字符，JavaScript内置的一些英语词汇，比如：let、if、var、for等）
• 只能用下划线、字母、数字、$组成，且数字不能开头
• 字母严格区分大小写，如Age和age是不同的变量

2.规范：（建议，不遵守不会报错）

• 起名要有意义
• 遵守小驼峰命名法（第一个单词首字母小写，后面每个单词首字母大写）

变量拓展-数组

数组是一种可以按顺序保存多个数据

1. 声明语法：

let arr = [数据1， 数据2， 数据3， 数据4， ……]

• 数组是按顺序保存，所以每个数据都有自己的编号
• 计算机的编号从0开始
• 在数组中，数据的编号叫下标或索引
• 数组可以存储任意类型的数据

2.取值语法：

数组名[下标]

3.一些术语

• 元素：数组中保存的每个数据都叫数组元素
• 长度：数组中数据的个数，通过数组的length属性获得

let arr = [1,2,3,4]
console.log(arr[1]) //2
console.log(arr.length) //4

数据类型

数据类型

1. JS数据类型整体分为两大类：

• 基本数据类型：number 数字类型、string 字符串型、boolean 布尔型、undefined 未定义型、null 空类型
• 引用数据类型：object 对象、function 函数、array 数组

2. 字符串类型：通过单引号（''）、双引号（""）或反引号（``）包裹的数据都叫字符串，单引号和双引号没有本质上区别，但推荐使用单引号（在HTML语法中推荐使用双引号）

注意事项：

• 无论单引号或是双引号必须成对使用
• 单引号/双引号可以互相嵌套，但是不以自己嵌套自己
• 可以使用转义符\输出单引号和双引号

字符串拼接：

console.log('ATM' + '10086') //ATM10086

模板字符串：用来拼接字符串和变量，在输出的语句中使用反引号，且用${}包住变量。

let age
document.log('Your age is ${age}')

3. 布尔类型：只有两个固定的值ture（表示肯定的数据）和false（表示否定的数据）。

4. 未定义类型：只有一个值undefined，声明变量不赋值的情况下，变量的默认值为undefined。（可以用该类型判断用户是否传递数据过来）

5. 空类型：null表示值为空，变量赋值了，但是内容为空。

检测数据类型

1. 控制台输出语句：数字类型和布尔型颜色为蓝色，字符串和undefined颜色为灰色。

2. 通过typeof关键字检测数字类型

console.log(typeof 123)

类型转换

使用表单、prompt获取过来的数据类型都是字符串型，此时就不能直接进行简单的加法运算。

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换叫做隐式转换。

规则：

• +号两边只要有一个是字符串，都会把另外一个转成字符串（+号作为正号解析可以转换成数字型）
• 除了+以外的算术运算符，比如 - * / 等都会把数据转成数字类型

显示转换

1. 转换为数字型：

console.log(Number('10.111')) //10.111,但是这里面不能放除了数字以外的数据，否则会返回NaN
console.log(parseInt('10.111')) //10，只保留整数部分
console.log(parseFloat('10.111')) //10.111,可以放除了数字以外的数据，但是只会输出数字，而且数字需要放开头

2. 转换为字符串型：

console.log(String(10))
let age = 10
console.log(age.toString()) // 10
// 如果括号里面是2，则转换为二进制
console.log(age.toString(2)) // 1010

运算符

算术运算符：+、-、*、/、%

赋值运算符：=、+=、-=、*=

一元运算符：++、--

比较运算符：>、<、>=、<=、==、!=、===、!==（结果只会得到true或false）

逻辑运算符：&&、||、！

false 0 ' ' null undefined 为假的，其余全为真的。

运算符优先级

1. 小括号
2. 一元运算符（++、--、！）
3. 算数运算符
4. 关系运算符
5. 相等运算符
6. 逻辑运算符（先&&后||）
7. 赋值运算符
8. 逗号运算符

语句

表达式和语句

1. 表达式：是一组代码的集合，JavaScript解释器会将其计算出一个结果

2. 语句：js整句或命令，js语句以分号结束（可以省略）

• if语句：

if(条件){
  条件满足运行的代码
}else if(){

}else{

}

• 三元运算符

条件 ? 满足条件执行的代码 : 不满足条件执行的代码

• switch语句

switch(数据){
    case 值1:
        代码1
        break
    case 值2:    
        代码2
        break
    case 值3:
        代码3
        break
    default：
        代码n
        break
}

• while循环

while(循环条件){
    需要重复执行的代码（循环体）
}

• for循环

for(声明记录循环次数的变量；循环条件；变化值){
    循环体
}

3. 断点调试：在浏览器中按F12，按Sources选项，选择所运行的代码，接着选择断点，刷新页面。

数组

操作数组

• 改：数组[下标]=新值
• 增：arr.push（新增的内容），增加在最后面，arr,unshift（新增的内容），增加在最前面，且能返回新数组的长度
• 删：arr.pop()（删除数组最后一个元素，并返回该元素的值）、arr.shift()（删除数组第一个元素，并返回该元素的值）、arr.splice(起始位置，删除的个数)

函数

函数使用

声明语法：

function 函数名(参数列表){
    函数体
}

函数调用：函数名（传递的参数列表）

函数返回值：用return，return会结束当前函数

匿名函数

let fn = function(){
    //函数体
}
fn()

立即执行函数：（防止变量污染）

(function fn(形参){
    //函数体
}(实参))；//两个立即执行函数中间必须要加分号
(function fn(形参){
    //函数体
})(实参)//两种写法都可以

函数传值技巧：
 

function fn(x = 0,y = 0){
    //函数体
}
function fn(){
    x = x || 0
    y = y || 0
    //函数体
}

对象

对象

JavaScript中的一种数据类型，可以理解为一种无序的数据集合，可以详细的描述一个事物。

对象使用

1.对象声明语法：

let 对象名 = {
    属性名：属性值，//当属性名中有特殊符号如空格、中横线等时需要加引号
    方法名：函数//匿名函数
}

2.访问对象：

console.log(对象名.属性名)
console.log(对象名['属性名'])
对象名.方法名()

操作对象

1.重新赋值(新增)：
对象.属性名 = 新值

对象.方法 = function(){}

2.删除：

delete 对象.属性名

遍历对象

for (k in 对象名){
    console(对象名[k])
}

数学对象

Math.ceil:向上取整

Math.floor:向下取整

Math.max:取最大值

Math.min：取最小值

Math.round：四舍六入五取大

取随机数：

Math.floor(Math.random() *(max - min + 1) ) + min

---

参考资料：

黑马程序员web前端进阶教程，前端html5+css3+移动端项目实战（含华为新闻，b站移动端等）_哔哩哔哩_bilibili