JS基础

JS入门知识
数据类型
变量
运算符与表达式

···

1. JS入门知识

JavaScript是运行在浏览器编程语言

1.1 前端的三门语言

HTML：确定网页结构
CSS：确定网页样式
JS：确定网页交互

1.2 JS三个组成部分

ECMAScript：确定JS的语法规范
DOM：JS动态操作网页内容
BOM：JS动态操作浏览器窗口

1.3 JS三种书写位置

类似于css的三种书写方式

行内式：写在标签内部
行内式写法需要把属性值写在onclick属性里面
内联式：写在script标签里面，script标签一般放在里的最下面
外联式：写在JS文件中，使用script标签的src属性引入

1.4 JS的两种注释写法

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

1.5 输入与输出语句

输出语句

alert() 弹出一个提示框
console.log() 控制打印台数据（不是给用户看，而是给程序员自己看）
document.write() 在页面输出数据（里面可以写标签）

输出语句

prompt() 弹出一个输入框：可以输入文本
confirm () 弹出一个确认框

···

2. 数据类型

2.1 数据类型介绍

1.为什么需要有数据类型？
* 每一种编程语言都有自己的语法规则,在处理数据的时候,也会有自己的规则,不是任何数据都可以处理的。
2.什么是数据类型？
* js编译器在解析代码的时候,会产生各种不同的数据。而不同的数据’运算’与’存储’方式都不同, 计算机需要对这些数据进行分类,称之为数据类型。

2.2 五种基本数据类型

string类型：字符串
一切用引号、双引号、反引号包起来的内容识别为字符串
number类型：数值
一切数字
boolean类型：布尔
布尔类型只有两个值：true和false
undefined：未定义
只有一个值：undefined
null：空值
只有一个值null

2.3 typeof类型检测

		console.log(typeof 123)
        console.log(typeof '123')
        console.log(typeof true)
        console.log(typeof underfined)
        console.log(typeof null)

语法结果：显示这个数据是什么数据类型

···

3. 变量

3.1 变量的基本使用

变量的作用：在内存中存储数据
变量的使用

声明变量：给予一个空间用于存储
变量赋值：变量名 = ：赋值运算
变量取值：读取变量中存储的数据（用输入输出语句读取）
变量也可以在声明的时候赋值
```
>let age = 23
```

3.2 变量使用注意事项

变量名不允许重复声明
变量可以重复赋值，重新赋值时，会抵消旧值
变量之间赋值：复制num1的值给num2

 	let num1
    num1 = 100
    let num2 = num1
    document.write(num1)
    document.write(num2)

交换两个变量之间的值
不可直接 num1=num2 ， num2=num1
正确交换方式：使用第三方变量

	let temp = num1 //将num1的值存入temp
        num1 = num2 //将num2的值给num1
        num2 = temp //j将存入temp的值给num2
        console.log(num1, num2)

3.3 变量的命名规则和规范

命名规则

变量不能使用关键字作为变量名
变量名必须以：字母、下划线_ 、$符号开头
结尾可以是字母、下划线_ 、$符号、数字

命名规范

取名要有意义，一般用英语名词（要快点捡起单词）
多个单词使用驼峰命名法 : 类似rootSize

3.4 常量

变量：值可以修改，使用let声明
常量：值不可以修改，使用const声明

 	const PI = 3.14
        PI = 6.18 //报错 常量无法修改
        console.log(PI)

3.5 字面量

js中的数据有两种使用方法：
第一种 : 先存入变量中, 通过变量取值语法来使用
变量 : 指的是内存中的一块空间,里面的数据是可变的。(变量是内存空间)
第二种 : 不存入变量中,直接拿来使用
字面量 : 指的是一个固定的数据（字面量是数据）

// 1. 把数据(字面量)存入变量中
// 变量名 = 字面量
        let name = 'ikun'
        console.log( name )
//2. 直接使用
        console.log( 10 + 10 )//20

3.6 变量作用域

三种作用域
1. 作用域：变量可以使用的范围
2. 全局作用域（全局变量）：在函数外面let的变量
3. 局部作用域（局部变量）：在函数里面let的变量
4. 块级作用域（块级变量）：在分支或循环大括号中let的变量
作用域链
默认情况下，代码处于全局作用域(0级链),当声明一个函数之后就会开辟一个局部作用域（1级），而函数里面又可以声明一个函数,又会形成新的作用域（2级），以此类推形成的结构称之为作用域链
变量访问的规则：就近原则
当你在一个作用域访问变量的之后，首先会看当前作用域有没有声明。如果有则访问。没有则往上级作用域查找，有没有声明。有则访问，没有则继续往上。直到作用域最顶端0级，如果还没有找到。则程序报错 xxx is not defined
匿名函数
匿名函数的作用：开辟局部作用域，避免全局变量污染

···

4. 运算符与表达式

1.运算符；用于运算的符号
2.表达式 : 由运算符组成的式子
重点: 表达式一定会有运算结果

4.1 算数运算符

算术运算符：+ 、- 、* 、/ 、%(求模,取余数)

4.2 赋值运算符

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

4.3 自增自减运算符

自增(自身+1)运算符 ++
自增表达式: num++
自减(自身-1)运算符 –
自减表达式: num–

4.4 连接符

1.如果字符串不需要变量取值 : ‘’
2.如果字符串需要变量取值 : ${变量名}

//需求：让用户输入  名字  和  年龄。  控制台打印‘大家好，我的名字叫：xxx,我的年龄是：xxx’
    let name = prompt('请输入您的姓名')
    let age = prompt('请输入您的年龄')

    //1.错误方式 ： 此时name和age都是字符串的一部分，无法取值
    // console.log('大家好我的名字叫：name, 我的年龄是：age')

    //2.正确方式： 使用连接符 +
    // +号 ： 只要遇到字符串,就是连接符
    // console.log('大家好,我的名字叫' + name + '我的年龄是:' + age)

    //3.推荐方式： 使用模板字符串  反引号`` 
    //作用： 拼接字符串 ${ 变量名 }
    console.log(`大家好,我的名字叫:${name}, 我的年龄是:${age}`)

4.5 关系运算符

1.关系运算符作用 : 比较两个数据的关系 >、>=、<、<=、= =(相等)、!=(不等)、===(全等)、!= = =(不全等)
!= 和!= = 结果一定相反
=号注意点
= : 赋值运算符右边数据存入左边容器
== : 相等运算只比较值，不比较数据类型
=== : 全等运算既比较值，也比较数据类型

2.关系表达式 : 由关系运算符组成的式子例如: 2 > 1
重点：关系表达式的运算结果一定是布尔类型： true成立 false不成立

4.6 逻辑运算符

&& :逻辑与，读作并且（一假则假）
|| :逻辑或，读作或者（一真则真）
! :逻辑非，读作取反
当有全等运算===时，先比较数据类型

4.7 运算符的优先级

运算符优先级：不同的运算符在一个式子中的运算顺序
() : 优先级最高
一元：++、 --、 !
算术：+ 、- 、* 、/ 、%
关系：>、>=、<、<=、= =(相等)、!=(不等)、= = =(全等)、!= = =(不全等)
逻辑：&&、||、 !
赋值：= 、+= 、-= 、 *= 、/= 、%=
开发中遇到复杂的式子，一般使用()小括号提升优先级

原文链接：https://blog.csdn.net/m0_45039257/article/details/123022616