a. JS 是一门高级编程语言(也可称为脚本语言),通过 js 引擎转变成机器语言进行执行。
b. JS 的组成
JS语法
DOM-页面文档对象模型
BOM-浏览器对象模型
1. JS 书写形式
JS 中使用单引号书写
- 行内式
<input type="button" value="按钮显示的文字" οnclick="alert('弹框显示的内容')"
// onclick:点击 alert:弹框
- 内嵌式
// 写在<head>中
<script>alert('弹框显示的内容')</script>
- 引入式
// 写在<head>中
a. 创建一个js文件
b. 引入 <script scr="js文件地址"></script>
2. 注释
a. 单行注释 //xxx 快捷键:“ctrl+/”
b. 多行注释 /_ xxx _/ 快捷键:“shift+alt+a” 【VScode中可以自定义快捷键】
3. 输入输出语言
代码形式 | 说明 |
---|---|
alert(msg) | 浏览器弹出警示框 |
console.log(msg) | 浏览器控制台打印输出信息(浏览器检查中可看) |
prompt(info) | 浏览器弹出输入框,用户可输入 |
prompt('弹出输入框显示的标题内容');
alert('弹出警示框显示的内容');
console.log('检查元素中显示的内容');
4. 变量
用于存放数据的容器,通过变量名获取数据
1. 变量的使用
a. 声明变量
var age; // 声明一个名称为age的变量,变量名可自行设置
b. 赋值(把值存入变量中)
age = 18; // 给age变量赋值为18
c. 变量初始化(将声明变量与赋值同时书写)
var age = 18; //声明变量同时赋值18
// 可通过 console.log(age);检查是否赋值成功
// 除数字外,其他内容用’'包裹,如:var name = ’知恩‘;
<script>
var myname = prompy('输入用户名') // 用户输入后存储到myname变量中
alert(myname) // 弹出用户输入的信息内容
</script>
2. 变量更新
var name = '知恩';
name = 'IU' // 后面的IU会覆盖前面的知恩
3. 声明多个变量
var age = 18, // 多个变量中间用逗号隔开
address = '地址名',
name = '用户名'; // 最后用分号结尾
4. 声明变量的特殊情况
a. 只声明,不赋值
var name; // 输出后结果为 undefined(未定义)
b. 不声明,不赋值
// 输出后会报错
c. 不声明,只赋值
// 可以输出相应结果,但会变成全局变量,不如此使用
5. 变量命名规范
a. 由字母、数字、下划线、美元符号($)组成,如:num_01。//不能以数字开头,会报错
b. 严格区分大小写,var app/var App 是两个变量
c. 不能是关键字、保留字,如:var for while
d. 变量名必须有意义,如:nl(年龄) // 不如此设置变量名
e. 遵守驼峰命名法;首字母小写,后面的首字母需要大写,如 myFirstName
g. name 有特殊含义,不使用 name 作为变量名
交换两个变量值
设置一个场景:apple1为青苹果,apple2为红苹果,将红苹果给apple1,青苹果给apple2
a. 设置一个临时变量
var temp; // 声明一个临时变量赋值为空
var apple1 = '青苹果';
var apple2 = '红苹果';
b. 将青苹果放入临时变量
temp = apple1;
c. 将红苹果给apple1
apple1 = apple2;
d. 把临时变量中的青苹果给apple2
apple2 = temp;
5. 数据类型
a. JS 的变量数据类型是只有程序在运行过程中,根据等号后面的值来确定
b. JS 是动态语言,变量的数据类型是可变化的
c. var x = 10;x 为数字型 ; var x = ‘IU’ x 为字符串型
1. 简单数据类型
| 数据类型 | 说明 | 默认值 |
| :-------: | :---------------------------------------------: | :--------: |
| Number | 数字型,包含整型值与浮点型值,如 5,0.5 | 0 |
| Boolean | 布尔值类型,如 true=1,false=0 | false(0) |
| string | 字符串类型,如"知恩",字符串都带引号 | "" |
| Undefined | var a;声明了变量 a 但没有赋值,此时 a=undefined | Undefined |
| Null | var a = null; 声明了变量 a 为空值 | null |
1. 数字型(Number)
a. 八进制(范围 0 ~ 7)
var num = 010 // 输出为 8
b. 十六进制(范围 0 ~ 9;A ~ F)
var num =0xA // 输出为 10
c. JS 中八进制前面加 0,十六进制前面加 0x;
a. 数字范围
Number.MAX_VALUE; // 最大值
Number.MIN_VALUE; // 最小值
b. 三个特殊值
Infinity; // 无穷大(Number.MAX_VALUE * 2)
-Infinity; //无穷小(-Number.MAX_VALUE * 2)
NaN; // 非数字
c. isNAN
用来判断一个变量是否为非数字类型;输出false则为数字;输出true则为非数字;
var IU = 12;
var isok = isNAN(IU);
console.log (IU); // 输出为false
var IU ='IU';
console.log (isNAN(IU)); // 输出为true
2. 字符串型(string)
a. 字符串型可以是引号中的任意文本,只要是单引导/双引号中的文本内容都为字符串
b. 引号嵌套:单引号嵌套双引号 or 双引号嵌套单引号(外双内单/外单内双)
a. 字符串转义符(转义符都需加\
)
转义符 | 解释说明 |
---|---|
\n | 换行符 |
\\ | 斜杠\ |
\' | 单引号’ |
\" | 双引号" |
\t | tab 缩进 |
\b | 空格 |
b. 字符串长度
通过length属性获取整个字符串长度;
var str = 'my name is IU';
console.log(str.length); // 显示为15个字符,每个空格也算1个字符,如有标点符号也算一个字符
c. 字符串拼接
多个字符串可用+进行拼接;如:字符串+任何类型=拼接后的新字符串
console.log('沙漠'+'骆驼'); // 输出为 沙漠骆驼
console.log('IU'+ 18); // 输出为 IU18
console.log(12 + 12); // 输出为24 前面为数字型则为加法算数
console.log('12' + 12); // 输出为1212 前面加单引号则为字符串,相加则为新的字符串
var age =18;
console.log('IU' + age + '岁'); // 输出为IU18岁;变量不能直接写在字符串内(变量不能加引号),否则会报错
3. 布尔型(Boolean)
a. ture表示真的,在加法运算中当1计算;
console.log(true + 1); // 输出为2
b. false表示假的,在加法运算中当0计算;
console.log(false + 1); // 输出为1
4. 未定义数据类型(undefined)
// 声明变量后没有赋值的情况会有一个默认值:undefined
a.console.log(undefined + 'IU'); // 输出为undefinedIU
b.console.log(undefined + 1); // 输出为NaN(非数字型)
5. 空值(Null)
// 声明变量给null值,里面存储的值为空值
a.console.log(Null + 'IU'); // 输出为NullIU
b.console.log(Null + 1); // 输出为1
2. 获取变量数据类型
a. 利用 typeof 进行获取数据类型
b. 可通过浏览器检测面板进行判读
浅蓝色为数字型
黑色为字符串型
深蓝色为布尔型
灰色为空值/为定义数据类型
c. 通过表单/prompt 获取的数据默认是字符串型
var num =10;
console.log(typeof num); // 输出为number数字型
var str ='IU';
console.log(typeof str); // 输出为string字符串型
var str = prompt('请输入你的信息'); // 不论用户输入的内容是什么都为字符串型
3. 数据类型转换
1. 转换为字符串类型
a. toString()
var num = 1;
console.log(num.toString()); // 输出为1字符串型;toString括号内可为空
b. String() // 强制转换
var num = 1;
console.log(String(num)); // 输出为1字符串型
c. 加号拼接字符串(隐式转换)【常用】
var num = 1;
console.log(num + ''); // 输出为1字符串型
2. 转换为数字型
a. parseIut(string) // 可以把字符串转换为数字型(只能为整数)
console.log(parseInt('19')); // 输出为19
console.log(parseInt('3.94')); // 输出为3,小数会自动舍去小数点后的内容取前面的整数
console.log(parseInt('120px')); // 输出为120,120px会自动去掉px单位
console.log(parseInt('rem120px')); // 输出为NaN,因为前面为rem,120px会自动去掉
b. parseFloat(string) // 可以吧字符串转变成数字型(可以为小数)
console.log(parseFloat('3.14')); // 输出为3.14
console.log(parseInt('120px')); // 输出为120,120px会自动去掉px单位
console.log(parseInt('rem120px')); // 输出为NaN,因为前面为rem,120px会自动去掉
c. Number()
console.log(Number('3.14')); // 输出为3.14
d. js隐式转换(- * /)【算数运算】
console.log(parseFloat('3.14' - 0)); // 输出为3.14
console.log(parseFloat('123' - '120')); // 输出为3
3. 转换为布尔型
Boolean(); // 空/否定的值会转换成false,如:0、NaN、null、undefined,其他值都会转换成true;
Boolean(''); // 输出为false
Boolean('0'); // 输出为false
Boolean(12); // 输出为ture
Boolean(IU); // 输出为ture
- 编译型语言与解释型语言
a. 编译型语言是整体代码编译完成后在进行翻译再执行
b. 解释型语言是边输入代码边翻译边执行
- 标识符/关键字/保留字
a. 标识符是指开发人员为变量、属性、函数、参数取的名字,标识符不能是关键字或保留字
b. 关键字是指 JS 本身已经使用过的字,不能再用她们充当变量名、方法名,如:break、case、else、do、delete 等
c. 保留字实际上为预留的”关键字“,同样不能使用它们当变量名、方法名,如:class、byte、const、float、fimal、int 等
6. 运算符
a. 也被称为操作符,用于实现赋值、比较、执行算数运算等功能的符号
b. 可用双等号进行验算
var num = 1 + 1;
console.log(num == 2); // 输出为 true 为正确,输出 false 为错误
1. 算数运算符
a. 加号(+)
console.log(1 + 1); // 输出为2
b. 减号(-)
console.log(1 - 1); // 输出为0
c. 乘号(*)
console.log(1 * 1); // 输出为1
d. 除号(/)
console.log(1 / 1); // 输出为1
e. 取余(%)
console.log(5 % 3); // 输出为2
console.log(3 % 5); // 输出为3
// 浮点数在算数运算中会出现问题,尽量避免浮点数计算
console.log(0.1 + 0.2); // 输出为0.30000000000000004
// 表达式:由数字、运算符、变量组成的式子
// 返回值:由表达式返回的值
console.log(1 + 1); 表达式
==>2 返回值
// 在程序中 2 = 1 + 1; 将程序中右边表达式计算完毕后把返回值给左边
2. 递增与递减运算符
递增(++)与递减(–)必须配合变量使用,可放在变量前(前置递增/递减);也可放在变量后(后置递增/递减)
a. 前置递增/递减(先自加/自减,后运算)
var num = 1;
//递增
++num; // 等价于num = num + 1;输出为2
console.log(num); // 输出为2
console.log(++num + 10); // 输出为12,先加1后返回值,先计算++num
//递减
--num; // 等价于num = num - 1;输出为0
console.log(num); // 输出为0
console.log(--num + 10); // 输出为10,先减1后返回值
b. 后置递增(先返回原值,后自加)
var num = 1;
//递增
num++; // 输出为2
console.log(num); // 输出为2
console.log(num++ + 10); // 输出为11,先返回原值后自加1
console.log(num); // 输出为2
//递减
num--; // 输出为0
console.log(num); // 输出为0
console.log(num-- + 10); // 输出为11,先返回原值后自减1
console.log(num); // 输出为0
❤️ 案例
⚠️ ++a/a++单独书写时结果相同,与其他代码连用时结果不同
var a =10;
++a; // ++a = 11 ; a = 11
var b = ++a + 2; // ++a = 12 ; a = 12 ; b = 14
console.log(b); // 14
var c =10;
c++; // C++ = 11 ; c = 11;
var d = c++ + 2; // c++ = 11, c = 12 , d = 13
console.log(d); // 13
var e =10;
var f = e++ + ++e;
// 1. e++ = 10 ; e = 11 ; 先计算e++,后置先返回原值为10,后自加1得到e为11
// 2. e = 12 ; ++e = 12 ; 前置先自加1得到e为12,后返回值为12
// f = 22
console.log(f); // 22
var g = 10;
--g; // --g = 9 ; g = 9
var h = --g + 2; // --g = 8 ; g = 8 ; h = 10;
console.log(h); // 10
var c =10;
c--; // c-- = 9 ; c = 9;
var d = c-- + 2; // c-- = 9, c = 8 , d = 11
console.log(d); // 11
var e =10;
var f = e-- + --e;
// 1. e-- = 10 ; e = 9;
// 2. e = 8 ; --e = 8;
// 18
console.log(f); //18
3. 比较运算符
a. “=”作用为赋值,把后边给左边
b. “==”判断,判断两边值是否相等(注意这里会默认转换数据类型)
c. “===”全等,判断两边的值和数据类型是否完全相同
运算符 | 说明 | 案例 | 结果 |
---|---|---|---|
< | 小于号 | 1<2 | true |
> | 大于号 | 1>2 | false |
>= | 大于等于号 | 2>=2 | true |
<= | 小于等于号 | 3<=2 | false |
== | 判等号(默认转换数据类型) | 37==‘37’ | true |
!= | 不等号 | 37 != 37 | false |
=== | 全等要求值和数据类型都一致 | 37 === ‘37’ | false |
!== | 不全等 | 37 !== 37 | fasle |
4. 逻辑运算符
运算符 | 说明 | 案例 |
---|---|---|
&& | “与”/and | true&&false |
|| | “或”/or | true||false |
! | “非”/not | !true |
1. 逻辑与(并且)
console.log(3 > 5 && 3 > 2); // 输出false
console.log(3 > 2 && 3 < 5); // 输出true
// 条件同时满足则为true,只要有一个不满足则为false
2. 逻辑或
console.log(3 > 5 || 3 > 2); // 输出true
console.log(3 > 5 || 3 < 2); // 输出false
// 只要有一个条件满足则为true,都不满足则为false
3. 逻辑非(取反符)
console.log(!true); // 输出false
console.log(!false); // 输出true
4. 短路运算
// 当有多个表达式(值)的情况,左边的表达式(值)可以确定结果时,不在运算右边的表达式(值)
a. 逻辑与(表达式1&&表达式2)
i. 如果表达式1为真,则返回表达式2
console.log(123 && 456); // 输出结果为456
console.log(123 && 456 && 789); // 输出结果为789
ii. 如果表达式1为假,则返回表达式1
console.log(0 && 456); // 输出结果为0
// 0、''、null、undefined、NaN都为假
b. 逻辑或
i. 如果表达式1为真,则返回表达式1
console.log(123 || 456); // 输出结果为123
ii. 如果表达式1为假,则返回表达式2
console.log(0 || 456); // 输出结果为456
console.log(0 || 456 || 789); // 输出结果为456
案例
var a = 0;
console.log(123 || a++); // 输出为123
console.log(a); // 输出为0
var a = 1;
console.log(0 || a++); // 输出为1,若是++a则输出为2
console.log(a); // 输出为2
5. 赋值运算符
运算符 | 说明 | 案例 |
---|---|---|
= | 直接赋值 | var age = 10; |
+=/-= | 加/减一个数后在赋值 | var age = 10; age += 5; //15 |
*=、/=、%= | 乘、除、取余后在赋值 | var age = 10; age *= 5; //50 |
6. 运算符优先级
优先级 | 运算符 | 先后顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++ – ! |
3 | 算数运算符 | 先乘除后加减 |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先 && 后 || |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |