-
什么是JavaScript
JavaScript简称js
JavaScript是一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果，增加用户与网页的交互性。
作为一种客户端脚本语言，JavaScript可以直接嵌入HTML，并在浏览器中执行。
与HTML和CSS不同，JavaScript使得网页不在是静态的，而是可以根据用户的操作动态变化的。
JavaScript的作用
JavaScript在前端开发中扮演着重要的角色，其应用领域包括但不限于：
客户端脚本：用于在用户浏览器中执行，实现动态效果和用户交互。
网页开发：与HTML和CSS协同工作，使得网页具有更强的交互性和动态性。
后端开发：使用Node.js JavaScript也可以在服务器端运行，实现服务器端应用的开发。
JavaScript的导入方式
script标签
- 内联样式
- 外联样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导入方式</title>
</head>
<body>
<h1>导入方式</h1>
<script src="./导入方式.js"></script>
<script>
console.log('hello 内联样式');
</script>
</body>
</html>运行结果：
内联样式：<script>console.log('内联样式');</script>
外联样式<scrip src="./js文件的路径.js">;</script>
//js文件内容
console.log('hello 外联样式')变量
变量是计算机存储数据的“容器”
1.声明变量：
语法：
let 变量名- 要想使用变量，首先需要创建变量(标识)
- let即关键字(let:允许、许可、让、要)，所谓关键字是系统提供专门用来声明(定义)变量的词语
举例：
let age- 我们声明了一个age变量
- age即变量的名称、也叫标识符
2.变量赋值：
定义了一个变量后，你就能够初始化它(赋值)。在变量名之后跟上一个"="，然后是数字。
<script>
//1.声明一个年龄变量
let age
//2.赋值=赋值
age = 18
console.log（age）
//3.声明的同时直接赋值 变量的初始化
let age = 18
<script>3.更新变量：
变量赋值后，还可以通过简单地给他一个不同的值来更新它。
//声明了一个age变量，同时里面存放了18这个数据
let age = 18
//变量里面的数据发生变化更改为19
age = 19
//页面输出的结果为19
console.log(age)//声明了一个age变量，同时里面存放了18这个数据
let age = 18
//这里不允许多次声明一个变量，没有理由重新声明变量
let age = 19
//输出会报错
console.log(age)主要：let不允许多次声明一个变量。
4.声明多个变量：
变量赋值后，还可以通过简单地给它一个不同的值来更新它。
语法：多个变量中间用逗号隔开。
let age = 18, uname = '迪丽热巴'常量
概念：使用const声明的变量为"常量"
使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let。
命名规范：和变量一致
常量使用：
//声明一个常量
const G = 9.8
//输出这个常量
console.log(G)注意：常量不允许重新赋值，声明的时候必须赋值(初始化)
小技巧：不需要重新赋值的数据使用const
数据类型
JS数据类型整体分为两大类
基本数据类型：number 数字型 、string 字符串型 、boolean 布尔型 、undefined 未定义型、 null空类型
引用数据类型：object 对象
数字类型（Number）
即我们数学中学习到的数字，使用时整数、小数、正数、复数。
JavaScript中的正数、负数、小数等统一称为数字类型。
数字可以有很多操作，比如乘法*、除法/、加法+、减法-等等，所以经常和算数运算符一起。
数字运算符也叫算数运算符，主要包括加、减、乘、除、取余（求模）。
- +：求和
- -：求差
- *：求积
- /：求商
- %：取模（取余数）
NaN代表一个计算错误。它是一个不正确的或者一个未定义的数字操作所得到的结果
console.log('老师' - 2) //NaN
NaN是粘性的。任何对NaN的操作都会返回NaN
console.log(NaN + 2) //NaN字符串类型（String）
单引号(")、双引号(" ")、反引号（`）包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
let uname = '小明' //使用单引号
let gender = "男" //使用双引号
let goods = `小米` //使用反引号
let tel = '13681113456' //看上去是数字，但是引号包裹了就是字符串
let str = '' //这种情况叫空字符串注意事项：
1.无论单引号或是双引号必须成对使用
2.单引号/双引号可以互相嵌套，但是不以自己嵌套自己（口诀：外双内单，或者外单内双）
3.必要时可以使用转义符\，输出单引号或双引号
字符串拼接：
场景：+运算符 可以实现字符串的拼接。
口诀：数字相加，字符相连
documen.write('我叫'+'刘德华') //我叫刘德华
let uname = '刘德华'
let song = '忘情水'
documen.write*(uname + song) //刘德华忘情水模板字符串
- 使用场景
拼接字符串和变量
在没有它之前，要拼接变量比较麻烦
document.write('大家好，我叫' + name + ',今年' + age + '岁')- 语法
``（反引号）
内容拼接变量时，用${ }包住变量
document.write('大家好，我叫${name},今年${age}岁')布尔类型（boolean）
表示肯定或否定时在计算机中对应的时布尔类型数据。
它有两个固定的值true和false，表示肯定的数据用true（真），表示否定的数据用false（假）。
//JacaScript 好玩不
let isCool = true
console.log（isCool）未定义类型（undefined）
未定义时比较特殊的类型，只有一个值undefined。
什么情况会出现未定义类型？
只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少【直接】为某个变量赋值为undefined。
let age //声明变量但是未赋值
document.write（age） //输出undefined
工作中的使用场景：
我们开发中经常声明一个变量，等待传送过来的数据。
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。
null（空类型）
JacaScript中的null仅仅时一个代表"无"、"空" 或 "值未知"的特殊值
let obj = null
console.log(obj) //nullnull和undfined区别
- undefined表示没有赋值
- null表示赋值了，但是内容为空
通过typeof关键字检测数据类型
typeof运算符可以返回检测的数据类型。它支持两种语法形式：
1.作为运算符:typeof x (常用写法)
2.函数形式:typeof(x)
换言之，有括号和没括号，得到的结果时一样的，所有我们直接使用运算符的写法。
类型转换
为什么需要类型转换
JavaScript是弱数据类型：JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。
坑：使用表单、promot获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。
console.log('10000'+2000) //输出结果 100002000此时需要转换变量的数据类型。
通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。
隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
规则 ：
+号两边只要有一个是字符串，都会把另一个转成字符串
除了+以外的算数运算符 不如 - * / 等都会把数据转换成数字类型
缺点：
转换类型不明确，靠经验才能总结
小技巧：
+号为正号解析可以转换成数字型
任何数据和字符串相加都是字符串
显式转换
编写程序时过度依赖系统内部的隐式转换时不严谨的，因为隐式转换规律并不清晰，大多是靠经验总结的规律，为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。
概念：
自己写代码告诉系统该转成什么类型
转换为数字型
- Number（数字）
转成数字类型
如果字符串内容里有非数字，转换失败时结果为NaN (Not a Number)即不是一个数字
NaN也是number类型的数据，代表非数字
- parselnt（数据）
只保留整数
- parseFloat（数据）
可以保留小数
运算符
目标：能够使用赋值运算符简化代码
- 赋值运算符：对变量进行赋值的运算符
- 已经学过的赋值运算符： = 将等号右边的值赋予左边，要求左边必须是一个容器
其他赋值运算符：
+=
-=
*=
/=
%=
- 使用这些运算符可以在对变量赋值时进行快速操作
我们以+=赋值运算符来举例
1.以前我们让一个变量加1如何做的？
<script>
let num = 1
num = num + 1
console.log(num) //结果是2
</script>2.现在我们有一个简单的写法
<script>
let num = 1
num += 1
console.log(num) //结果是2
</script>一元运算符
目标：能够使用一元运算符做自增运算
众多的JavaScript的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符
- 二元运算符
例：
let num = 10 + 20- 一元运算符：
例：正负号
- 问题：我们以前让一个变量每次+1，以前我们怎么做的呢？
let num = 1
num = num + 1我们可以有更简便的写法了
-
自增
符号：++
作用：让变量的值+1
- 自减
符号：--
作用：让变量的值-1
使用场景：经常用于计数来使用。比如进行10次操作，用它来计算进行了多少次
自增运算符的用法：
前置自增
let num = 1
++num //让num的值加1变二后置自增
let num = 1
num++ //让num的值加1变二其作用相当于 num +=1
比较运算符
使用场景：比较两个数据大小、是否相等
- 比较运算符
>:左边是否大于右边
<:左边是否小于右边
>=：左边是否大于或等于右边
<=：左边是否下于或等于右边
==：左右两边值是否相等
===：左右两边是否类型和值都相等
!==：左右两边是否不全等
比较结果为boolean类型，即只会得到true或false
- 对比
= 是赋值
== 是判断
=== 是全等
开发中判断是否相等，强烈推荐使用 ===
- NaN不等于任何值，包括它本身
涉及到"NaN"都是false
尽量不要比较小数，因为小数有精度问题
逻辑运算符
- 提问：如果我想判断一个变量num是否大于5且小于10，怎么办？
错误写法：5<num<10
- 使用场景：逻辑运算符用来解决多重条件判断
正确写法：num>5 && num<10
| 符号 | 名称 | 日常读法 | 特点 | 口诀 |
|---|---|---|---|---|
| && | 逻辑与 | 并且 | 符号两边都为true 结果才为true | 一假则假 |
| || | 逻辑或 | 或者 | 符号两边有一个 true就为true | 一真则真 |
| ！ | 逻辑非 | 取反 | true变false false变true | 真变假，假变真 |
运算符优先级
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | （） |
| 2 | 一元运算符 | ++ -- ！ |
| 3 | 算数运算符 | 先* / % 后 + |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先&& 后 || |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | ， |
- 一元运算符里面的逻辑非优先级很高
- 逻辑与比逻辑或优先级高
扫一扫
3354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
