JavaScript基础语法
学习目标
- js三种引用方式
- 行内
- 内联
- 外链
- js注释
- 单行注释
- 多行注释
- js输入输出语句
- 输入
- 输出
- 变量
- 声明
- 赋值
- 数据类型
- 判断数据类型
- 数据类型转换
- 运算符
- 数学
- 赋值
- 比较
- 逻辑
- 自增自减
JavaScript代码的书写位置
- 和
css
一样,我们的js
也可以有多种方式书写在页面上让其生效 js
也有多种方式书写,分为 行内式, 内嵌式,外链式
注意事项
一行的结束就被认定为语句的结束,通常在结尾加上一个分号";"来表示语句的结束
-
“;”分号要在英文状态下输入,同样,JS中的代码和符号都要在英文状态下输入。
-
虽然分号“;”也可以不写,但我们要养成编程的好习惯,记得在语句末尾写上分号。
-
JavaScript对换行、缩进、空格不敏感。也就是说:
-
虽然分号不是必须加的,但是为了程序今后要压缩,如果不加分号,压缩之后将不能运行了。
alert(123)alert(456)
行内式 JS 代码(不推荐)
- 写在标签上的 js 代码需要依靠事件(行为)来触发
<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('我是一个弹出层');">点击一下试试</a>
<!-- 写在其他元素上 -->
<div onclick="alert('我是一个弹出层')">点一下试试看</div>
<!--
注:onclick 是一个事件(点击事件),当点击元素的时候执行后面的 js 代码
-->
在a标签:不要在href中加入链接而是加入**JavaScript:**用来告诉浏览器不需要跳转,需要执行一个动作。
在非a标签中 需要用on+动作进行组合属性,如:οnclick="alert(‘我是一个弹出层’)"含义是鼠标点击这个div时弹出“我是一个弹出层"的弹窗。
内嵌式 JS 代码
- 内嵌式的 js 代码会在页面打开的时候直接触发
<!-- 在 html 页面书写一个 script 标签,标签内部书写 js 代码 -->
<script type="text/javascript">
alert('我是一个弹出层')
</script>
<!--
注:script 标签可以放在 head 里面也可以放在 body 里面
-->
js内嵌式也叫内联式:成对的出现,也可以多对出现,执行顺序由上往下依次执行,每对标签也可以重复书写属性,执行顺序也是由上往下依次执行。
每个属性之间要以;进行分隔。
以防止后期压缩时造成报错。
压缩的原理是节约带宽,压缩的过程是删除空格和注释。
PS:使用内联式就不要在内联式标签上书写内容了。
外链式 JS 代码(推荐)
- 外链式 js 代码只要引入了 html 页面,就会在页面打开的时候直接触发
- 新建一个
.js
后缀的文件,在文件内书写js
代码,把写好的js
文件引入html
页面
// 我是 index.js 文件
alert('我是一个弹出层')
<!-- 我是一个 html 文件 -->
<!-- 通过 script 标签的 src 属性,把写好的 js 文件引入页面 -->
<script src="index.js"></script>
<!-- 一个页面可以引入多个 js 文件 -->
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>
外链式不要在引入标签上及中间填写内容,即使填写了也没有任何作用,因为已经有了src属性了
不管是内联式还是外联式都不需要触发条件,打开页面进行自动执行。
同样外链式也可以引入多个文件,执行顺序根据引入顺序由上往下依次执行。
推荐引入的标签写在body的末尾。
JS 中的注释
- 学习一个语言,先学习一个语言的注释,因为注释是给我们自己看的,也是给开发人员看的
- 写好一个注释,有利于我们以后阅读代码
单行注释
- 一般就是用来描述下面一行代码的作用
- 可以直接写两个
/
,也可以按ctrl + /
// 我是一个单行注释
// 下面代码表示在浏览器里面出现一个弹出层
alert('我是一个弹出层')
多行注释
-
一般用来写一大段话,或者注释一段代码
-
可以直接写
/**/
然后在两个星号中间写注释-
各个编辑器的快捷键不一样,
vscode
是ctrl + shift + a
-
快捷键修改为: ctrl + shift + /
vscode → 首选项按钮 → 键盘快捷方式 → 查找 原来的快捷键 → 修改为新的快捷键 → 回车确认
-
/*
我是一个多行注释
*/
/*
注释的代码不会执行
alert('我是一个弹出层')
alert('我是一个弹出层')
*/
alert('我是一个弹出层')
注释除了方便阅读,还可以阻断代码的执行。
JavaScript输入输出语句
为了方便信息的输入输出,JS中提供了一些输入输出语句,其常用的语句如下:
方法 | 说明 | 归属 |
---|---|---|
alert(msg) | 浏览器弹出警示框 | 浏览器 |
console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
prompt(info) | 浏览器弹出输入框,用户可以输入 | 浏览器 |
- 注意:alert() 主要用来显示消息给用户,console.log() 用来给程序员自己看运行时的消息。document.write() 方法将内容写到 HTML 文档中。
变量(重点)
什么是变量
-
语法:
var 变量名 = 值
-
白话:变量就是一个装东西的盒子。
通俗:变量是用于存放数据的容器。 我们通过 变量名 获取数据,甚至数据可以修改。
变量在内存中的存储
本质:变量是程序在内存中申请的一块用来存放数据的空间。类似我们酒店的房间,一个房间就可以看做是一个变量。 变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据 也就是说,我们向内存中存储了一个数据,然后要给这个数据起一个名字,为了是我们以后再次找到他
定义变量及赋值
// 定义一个变量
var num;
// 给一个变量赋值
num = 100;
// 定义一个变量的同时给其赋值
var num2 = 200;
- 注意:
- 一个变量名只能存储一个值
- 当再次给一个变量赋值的时候,前面一次的值就没有了
- 变量名称区分大小写(
JS
严格区分大小写)
变量的使用
- 变量的声明
- 变量的赋值
声明变量
// 声明变量
var age; // 声明一个 名称为age 的变量
- var 是一个 JS关键字,用来声明变量( variable 变量的意思 )。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管
- age 是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间
赋值
age = 10; // 给 age 这个变量赋值为 10
- = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
- 变量值是程序员保存到变量空间里的值
变量的初始化
var age = 18; // 声明变量同时赋值为 18
// 声明一个变量并赋值, 我们称之为变量的初始化。
变量语法扩展
-
更新变量
一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。
var age = 66; age = 666; // 最后的结果就是666因为66 被覆盖
-
同时声明多个变量
同时声明多个变量时,只需要写一个 var, 多个变量名之间使用英文逗号隔开。
var age = 10, name = '千锋济南', sex = 2;
-
声明变量特殊情况
情况 说明 结果 var age ; console.log (age); 只声明 不赋值 undefined console.log(age) 不声明 不赋值 直接使用 报错 age = 10; console.log (age); 不声明 只赋值 10
扩展: 交换变量的值
方法一
var v1 = 1;
var v2 = 2;
var temp = v1;
v1 = v2
v2 = temp
方法二
var num1 = 10;
var num2 = 20;
//把num1的变量中的值和num2变量中的值,取出来相加,重新赋值给num1这个变量
num1 = num1 + num2;//30
//num1变量的值和num2变量的值取出来,相减的结果重新赋值给num2
num2 = num1 - num2;//10
//num1变量的值和num2变量的值取出来,相减的结果重新赋值给num1
num1 = num1 - num2;//20
console.log(num1, num2);
方法三
var num1 = 10;
var num2 = 20;
num1 = num1 ^ num2;
num2 = num1 ^ num2;
num1 = num1 ^ num2;
console.log(num1, num2);
// 位运算 按位异或 了解
变量的命名规则和命名规范
-
规则: 必须遵守的,不遵守就是错
- 一个变量名称可以由 数字、字母(a-zA-Z)、英文下划线(_)、美元符号($) 组成,如:userrAge, num01, _name
- 严格区分大小写 var qf; 和 var Qf;
- 不能由数字开头 18age 是错误的
- 不能是 保留字 或者 关键字 编辑器中高亮的部分
- 不要出现空格
-
规范: 建议遵守的(开发者默认),不遵守不会报错
-
变量名尽量有意义(语义化) nl → age
-
遵循驼峰命名规则,由多个单词组成的时候
大驼峰 UserName 小驼峰 userNameKangbazi
-
不要使用中文
-
关键字和保留字
标识符
标识(zhi)符:就是指开发人员为变量、属性、函数、参数取的名字。
标识符不能是关键字或保留字。
关键字
关键字:是指 JS本身已经使用了的字,不能再用它们充当变量名、方法名。
包括:break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。
保留字
保留字:实际上就是预留的“关键字”,意思是现在虽然还不是关键字,但是未来可能会成为关键字,同样不能使用它们当变量名或方法名。
包括:boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。
数据类型(重点)
数据类型简介
()
-
为什么需要数据类型
在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。 js是一个工具,为了解决生活中各种各样的需求,需要不同的数据类型 姓名 年龄 薪资等 简单来说,数据类型就是数据的类别型号。
-
变量的数据类型
变量是用来存储值的所在处,它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定:
var age = 10; // 这是一个数字型 var areYouOk = '是的'; // 这是一个字符串
在代码运行时,变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的,运行完毕之后, 变量就确定了数据类型。JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型:
var x = 6; // x 为数字 var x = "Bill"; // x 为字符串
-
数据类型的分类
JS 把数据类型分为两类:
- 基本数据类型 (Number,String,Boolean,Undefined,Null) 也可以叫简单
- 复杂数据类型 (object)
-
是指我们存储在内存中的数据的类型
-
我们通常分为两大类 基本数据类型 和 复杂数据类型
基本数据类型
- 数值类型(number)
- 一切数字都是数值类型(包括二进制,十进制,十六进制等)
NaN
(not a number),一个非数字
- 字符串类型(string)
- 被引号包裹的所有内容(可以是单引号也可以是双引号)
- 布尔类型(boolean)
- 只有两个(
true
或者false
)
- 只有两个(
- null类型(null)
- 只有一个,就是
null
,表示空的意思
- 只有一个,就是
- undefined类型(undefined)
- 只有一个,就是
undefined
,表示没有值的意思
- 只有一个,就是
-
字面量
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
- 数字字面量:8, 9, 10
- 字符串字面量:‘千锋济南’, “大前端”
- 布尔字面量:true,false
-
数字型 Number
JavaScript 数字类型既可以保存整数,也可以保存小数(浮点数)。
var age = 21; // 整数 var Age = 21.3747; // 小数
-
数字型进制
最常见的进制有二进制、八进制、十进制、十六进制。
// 1.八进制数字序列范围:0~7 var num1 = 07; // 对应十进制的7 var num2 = 019; // 对应十进制的19 var num3 = 08; // 对应十进制的8 // 2.十六进制数字序列范围:0~9以及A~F var num = 0xA;
现阶段我们只需要记住,在JS中八进制前面加0,十六进制前面加 0x
-
数字型范围
JavaScript中数值的最大和最小值
- 最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
- 最小值:Number.MIN_VALUE,这个值为:5e-32
-
-
数字型三个特殊值
- Infinity ,代表无穷大,大于任何数值
- -Infinity ,代表无穷小,小于任何数值
- NaN ,Not a number,代表一个非数值
-
isNaN
用来判断一个变量是否为非数字的类型,返回 true 或者 false
var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false ,21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName));// true ,"andy"是一个非数字
-
字符串型 String
字符串型可以是引号中的任意文本,其语法为 双引号 “” 和 单引号’’
var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串 var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串 // 常见错误 var strMsg3 = 我爱大肘子; // 报错,没使用引号,会被认为是js代码,但js没有这些语法
因为 HTML 标签里面的属性使用的是双引号,JS 这里我们更推荐使用单引号。
-
字符串引号嵌套
JS 可以用单引号嵌套双引号 ,或者用双引号嵌套单引号 (外双内单,外单内双)
var strMsg = '我是"高帅富"程序猿'; // 可以用''包含"" var strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含'' // 常见错误 var badQuotes = 'What on earth?"; // 报错,不能 单双引号搭配
-
字符串转义符
类似HTML里面的特殊字符,字符串中也有特殊字符,我们称之为转义符。
转义符都是 \ 开头的,常用的转义符及其说明如下:
转义符 解释说明 \n 换行符,n 是 newline 的意思 \ \ 斜杠 \ ’ ’ 单引号 " ”双引号 \t tab 缩进 \b 空格 ,b 是 blank 的意思 -
字符串长度
字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。
var strMsg = "我是来自北方的狼,来南方寻找心爱的花姑娘!"; alert(strMsg.length); // 显示 21
-
字符串拼接
-
多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
-
拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串
//1.1 字符串 "相加" alert('hello' + ' ' + 'world'); // hello world //1.2 数值字符串 "相加" alert('100' + '100'); // 100100 //1.3 数值字符串 + 数值 alert('11' + 12); // 1112
- + 号总结口诀:数值相加 ,字符相连
-
-
字符串拼接加强
console.log('杰哥' + 18); // 只要有字符就会相连 var age = 18; console.log('杰哥age岁啦'); // 这样不行哦 console.log('杰哥' + age); // pink老师18 console.log('杰哥' + age + '岁啦'); // pink老师18岁啦
- 经常会将字符串和变量来拼接,变量可以很方便地修改里面的值
- 变量是不能添加引号的,因为加引号的变量会变成字符串
- 如果变量两侧都有字符串拼接,口诀“引引加加 ”,删掉数字,变量写加中间
-
-
布尔型Boolean
布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。
布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0。
console.log(true + 1); // 2 console.log(false + 1); // 1
-
Undefined和 Null
一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时,注意结果)
var variable; console.log(variable); // undefined console.log('你好' + variable); // 你好undefined console.log(11 + variable); // NaN console.log(true + variable); // NaN
一个声明变量给 null 值,里面存的值为空(学习对象时,我们继续研究null)
var vari = null; console.log('你好' + vari); // 你好null console.log(11 + vari); // 11 console.log(true + vari); // 1
复杂数据类型(暂时先不讲)
- 对象类型(object)
- 函数类型(function)
判断数据类型
-
既然已经把数据分开了类型,那么我们就要知道我们存储的数据是一个什么类型的数据
-
使用
typeof
关键字来进行判断 -
获取检测变量的数据类型
typeof 可用来获取检测变量的数据类型
var num = 18; console.log(typeof num) // 结果 number
不同类型的返回值
// 第一种使用方式
var n1 = 100;
console.log(typeof n1);
// 第二种使用方式
var s1 = 'abcdefg';
console.log(typeof(s1));
数据类型转换
- 数据类型之间的转换,比如数字转成字符串,字符串转成布尔,布尔转成数字等
其他数据类型转成数值
-
Number(变量)
可以把一个变量强制转换成数值类型
可以转换小数,会保留小数
可以转换布尔值
遇到不可转换的都会返回
NaN
-
parseInt(变量)
从第一位开始检查,是数字就转换,知道一个不是数字的内容
开头就不是数字,那么直接返回
NaN
不认识小数点,只能保留整数
-
parseFloat(变量)
从第一位开始检查,是数字就转换,知道一个不是数字的内容
开头就不是数字,那么直接返回
NaN
认识一次小数点
-
除了加法以外的数学运算
运算符两边都是可运算数字才行
如果运算符任何一遍不是一个可运算数字,那么就会返回
NaN
加法不可以用
其他数据类型转成字符串
-
变量.toString()
有一些数据类型不能使用
toString()
方法,比如undefined
和null
-
String(变量)
所有数据类型都可以
-
使用加法运算
在 JS 里面,
+
由两个含义字符串拼接: 只要
+
任意一边是字符串,就会进行字符串拼接加法运算:只有
+
两边都是数字的时候,才会进行数学运算
其他数据类型转成布尔
-
Boolean(变量)
在 js 中,只有
''
、0
、null
、undefined
、NaN
,这些是false
其余都是
true
运算符
- 就是在代码里面进行运算的时候使用的符号,不光只是数学运算,我们在
js
里面还有很多的运算方式
数学运算符
-
+
只有符号两边都是数字的时候才会进行加法运算
只要符号任意一边是字符串类型,就会进行字符串拼接
-
-
会执行减法运算
会自动把两边都转换成数字进行运算
-
*
会执行乘法运算
会自动把两边都转换成数字进行运算
-
/
会执行除法运算
会自动把两边都转换成数字进行运算
-
%
会执行取余运算
会自动把两边都转换成数字进行运算
浮点数的精度问题
浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。
var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100); // 结果不是 7, 而是:7.000000000000001
所以:不要直接判断两个浮点数是否相等 !
表达式和返回值
表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解:是由数字、运算符、变量等组成的式子
表达式最终都会有一个结果,返回给开发者,称为返回值
赋值运算符
-
=
就是把
=
右边的赋值给等号左边的变量名var num = 100
就是把 100 赋值给 num 变量
那么 num 变量的值就是 100
-
+=
var a = 10; a += 10; console.log(a); //=> 20
a += 10
等价于a = a + 10
-
-=
var a = 10;
a -= 10; console.log(a); //=> 0
a -= 10
等价于a = a - 10
-
*=
var a = 10; a *= 10; console.log(a); //=> 100
a *= 10
等价于a = a * 10
-
/+
var a = 10; a /= 10; console.log(a); //=> 1
a /= 10
等价于a = a / 10
-
%=
var a = 10; a %= 10; console.log(a); //=> 0
a %= 10
等价于a = a % 10
比较运算符
-
==
-
比较符号两边的值是否相等,不管数据类型
1 == '1'
两个的值是一样的,所以得到
true
-
-
===
-
比较符号两边的值和数据类型是否都相等
1 === '1'
两个值虽然一样,但是因为数据类型不一样,所以得到
false
-
-
!=
-
比较符号两边的值是否不等
1 != '1'
因为两边的值是相等的,所以比较他们不等的时候得到
false
-
-
!==
-
比较符号两边的数据类型和值是否不等
1 !== '1'
因为两边的数据类型确实不一样,所以得到
true
-
-
>=
-
比较左边的值是否 大于或等于 右边的值
1 >= 1
结果是true
1 >= 0
结果是true
1 >= 2
结果是false
-
-
<=
-
比较左边的值是否 小于或等于 右边的值
1 <= 2
结果是true
1 <= 1
结果是true
1 <= 0
结果是false
-
-
>
-
比较左边的值是否 大于 右边的值
1 > 0
结果是true
1 > 1
结果是false
1 > 2
结果是false
-
-
<
-
比较左边的值是否 小于 右边的值
1 < 2
结果是true
1 < 1
结果是false
1 < 0
结果是false
-
逻辑运算符
-
&&
-
进行 且 的运算
符号左边必须为
true
并且右边也是true
,才会返回true
只要有一边不是
true
,那么就会返回false
true && true
结果是true
true && false
结果是false
false && true
结果是false
false && false
结果是false
-
-
||
-
进行 或 的运算
符号的左边为
true
或者右边为true
,都会返回true
只有两边都是
false
的时候才会返回false
true || true
结果是true
true || false
结果是true
false || true
结果是true
false || false
结果是false
-
-
!
-
进行 取反 运算
本身是
true
的,会变成false
本身是
false
的,会变成true
!true
结果是false
!false
结果是true
-
短路运算(逻辑中断)
短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;
-
逻辑与
语法: 表达式1 && 表达式2
- 如果第一个表达式的值为真,则返回表达式2 - 如果第一个表达式的值为假,则返回表达式1
console.log( 123 && 456 ); // 456 console.log( 0 && 456 ); // 0 console.log( 123 && 456&& 789 ); // 789
-
逻辑或
语法: 表达式1 || 表达式2
- 如果第一个表达式的值为真,则返回表达式1 - 如果第一个表达式的值为假,则返回表达式2
console.log( 123 || 456 ); // 123 console.log( 0 || 456 ); // 456 console.log( 123 || 456 || 789 ); // 123
自增自减运算符(一元运算符)递增和递减运算符概述
如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减(--)运算符来完成。
在 JavaScript 中,递增(++)和递减(--)既可以放在变量前面,也可以放在变量后面。放在变量前面时,我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。
注意:递增和递减运算符必须和变量配合使用。
-
递增运算符
-
前置递增运算符
++num 前置递增,就是自加1,类似于 num = num + 1,但是 ++num 写起来更简单。
使用口诀:先自加,后返回值
var num = 10; alert(++num + 10); // 21
-
后置递增运算符
num++ 后置递增,就是自加1,类似于 num = num + 1 ,但是 num++ 写起来更简单。
使用口诀:先返回原值,后自加
var num = 10; alert(10 + num++); // 20
-
-
递减运算符
-
前置递减运算符
–num 前置递减,就是自减1,类似于 num = num - 1,但是 --num 写起来更简单。
使用口诀:先自减,后返回值
var num = 10; alert(--num + 10); // 19
-
后置递减运算符
num-- 后置递减,就是自减1,类似于 num = num - 1 ,但是 num-- 写起来更简单。
使用口诀:先返回原值,后自减
var num = 10; alert(10 + num--); // 20
-
运算符优先级
- 一元运算符里面的逻辑非优先级很高
- 逻辑与比逻辑或优先级高