javascript基础语法及变量相关
1、JS概述
-
历史
1995年,js最早出现在Netscape的浏览器中
1996年,IE3中也开始出现了JS,叫做JScrip
1997年,ECMA制定了js标准规范ECMAScript(ES)
2009年,JS开始向服务器发展,出现了 Nodejs
-
现状
既可以在客户端浏览器,也可以运行在服务器端 -
特点
解释型语言,编译一行执行一行弱类型语言
基于对象
跨平台性 -
应用场景
开始客户端浏览器的交互效果
服务器端的开发,web服务器的创建,数据库的访问。
2、搭建开发环境
-
浏览器
自带的JS解释器
谷歌/火狐/IE/欧鹏/safari -
Node.js
官网:www.nodeji.org
查看是否安装
node -v 回车 11.3
-
运行JS
浏览器
创建01.js和 01.html两个文件,把js文件嵌入到html文件中,使用浏览器打开html
Node 拖拽js 文件 回车
3,JS的语法规范
(1)区分大小写
(2)结束的分号可以省略
(3)分为单行注释(//)和多行注释(/**/)
4、变量
变量是用于存储数据的容器
(1)声明变量
var x =1
使用 VAR 关键字声明了一个变量名称 叫X,然后把数据保存到变量中。
练习:声明多个变量,分别保存一个员工的编号、姓名、性别、生日、工资,最后打印出来。
(2)变量的命名规则
变量可以由字母,数字,下划线,美元符号组成,不能以数字作为开头
不能使用关键字和保留字
语义
username
(3)变量赋值
变量声明后,如果未赋值,则保存的值为undefined(未定义)
变量可以多次赋值,并且赋不同类型的值,也是弱类型语言的特(4)一次声明多个变量
var a=1,b=2,c;
多个变量之间用逗号隔开
练习:声明多个变量分别保存语文、数学、总成绩;打印出总成绩。
var chinese=70,math=60,total =chinese+math;
console.log(chinese,math,total);
5、常量
用于存储固定不变的数据,使用const关键字声明
声明的同时必须赋值,不允许重新赋值
const pi=3.14
课后任务
(1)复习今天内容,整理思维导图
(2)练习
声明变量保存圆的半径,声明常量保存圆周率,将计算的面积和周长分别保存到变量,最后打印出周长和面积
var r=4;
const pi=3.14;
var area= pi*r *r;
var len = 2*pi *r
console.log(area,len);
交换两个变量的值
a=1 b=2 交换后 a=2 b=1
var a=1,b=2,c;
var c=a,a=b,b=c;
console.log(a,b);
预习js第二天,数据类型 数据类型转化 运算符
6、数据类型
分为原始类型和引用类型
原始类型分为数值型、字符串型、布尔型、未定义型、空;
(1)数值型
分为整型和浮点型
1 2 3 4 5 6 7 8 9 10
8进制
1 2 3 4 5 6 7 10 11 12
16进制
1 2 3 4…9 a…f
8进制:以0开头的数字
16进制:以0x开头的数字,a-f代表10-16,不区分大小写。
3141.5e-1
314.15
31.415e+1
3.1415e+2
浮点型分为浮点小数和定点小数
typeof 数据 检测数据类型
(2)字符串型
查看任意一个字符的Unicode码
‘s’.charCodeAt()
(3)布尔型
只有两个值,分别是true和false,代表真和假
常用于记录当前的状态,例如是否登录,是否注册,是否为会员。。。
一些运算的结果也是布尔型的值 例如3》5
(4)未定义型
只有一个值undefined,声明了变量未赋值则为 undefined
var uname;
console.log(uname,typeof uname);
(5)空
只有一个值NULL,类型是object,常用于和对象(引用类型)数据一起使用
var person=null;
console.log(person,typeof person);//object
7、数据类型的转化
(1)隐式转换
运算过程中自动发生的转化,不需要人为干预。
var n1=1+'2';
console.log(n1,typeof n1);//'12' '1'+'2' 拼接'12'
数值+布尔型
布尔型转换成数值型 true=1 false=0
2+true //3
2+false //2
(2)布尔型 +字符串
布尔型转为字符串
true+‘4’ //‘true4’
练习:查看以下程序的运行结果
var a=5,b=true,c='tedu';
console.log(a+b+c); //'6tedu' //'6tedu'
console.log(b+c+a); //'truetedu5' //'truetedu5'
console.log(c+a+b); //'tedu5true' //'tedu5true'
(3)加号(+)的作用
执行数值间的加法运算
执行字符串间的拼接,会将数据转为字符串
var a=5-'b'
console.log(a) //NAN 5-NAN not a number 不是一个数字
var a=5+null
console.log(a) //5 这里NULL转为0 输出结果为5+0=5
var a=5+nudefined
console.log(a) //NAN
隐式转换的特点(加减乘除)
如果加号两端的数据有一个为字符串,则另一个也会转化为字符串,最后执行拼接。
其他情况会将非数字隐式转换为数值型,在转换的过程中自动调用函数Number来完成的
(4)强制转换
- 强制转换为数值 ------------- Number()
var a=Number('5',)
console.log(a,typeof a) //5 number
-----------------------------------------------------------------------------------------
var a=Number('5b',)
console.log(a,typeof a) //NaN number
-----------------------------------------------------------------------------------------
var a=Number(true)
console.log(a,typeof a) //1 number
-----------------------------------------------------------------------------------------
var a=Number(NULL)
console.log(a,typeof a) //undefined number
-----------------------------------------------------------------------------------------
var a=Number(undefined)
console.log(a,typeof a) //NaN
NAN : not a number 不是一个数字,没有成功转换为数值返回这个结果,NaN和任何数字执行加减乘除运算结果还是NaN
-
强制转为整型 -------------------- parseInt()
通常用于将字符串和小数转为整型var p1=parseInt(null); console.log(p1) //NaN -------------------------------------------------------------------------------------- var p2=parseInt(undefined) console.log(p2) //NaN -------------------------------------------------------------------------------------- var p3=parseInt(3.14) console.log(p3) //3 去除小数点部分 -------------------------------------------------------------------------------------- var p4=parseInt('6.18a') console.log(p4) //6 -------------------------------------------------------------------------------------- var p5=parseInt(p5) console.log(p5) //NaN -------------------------------------------------------------------------------------- var p6=parseInt(true) console.log(p6) //NaN
-
强制转为浮点型 ----------------------parseFloat()
常用于将字符串转为浮点型
parseFloat(true) //NaN parseFloat(5a) //NaN parseFloat(3.14) //3.14 parseFloat(null) //NaN parseFloat(undefined) //NaN
-
将数值和布尔型转为字符串
var num=2; var str1=num.toString(); console.log(str1,typeof str1) //'2',str
8、运算符
表达式:由数据或者由运算符连接的数据所组成的形式
运算符包含有算术运算符、比较运算符、逻辑运算符、位运算符、赋值运算符、三目运算符
-
算术运算符
±*/% ++ –%取余 -------------------console.log(5%3) //商1余2 输出结果为2
console.log(3%5) //输出结果为3
++自增 在原来基础上加1
var a=1 b=a++ 先把a赋值给b 然后a再执行自增1
var a=1 b=++a a先执行自增1 然后在把自增后的a赋值给b
–自减 在原来基础上减1
var a=1 b=a-- 先把a赋值给b 然后a再执行自减1
var a=1 b=–a a先执行自减1 然后在把自减后的a赋值给b
-
比较运算符
< > >= <= != == ===(全等于) !==(全不等于)
console.log(3=='3') //true console.log(3==='3') //false console.log(1==true) //true console.log(1===true) //false ==只是比较值是否相同,可能发生数据类型转换 ===不仅比较值,还需要比较两边的数据类型 数值与字符串比较 字符串会隐式转换为数值 -------------------------------------------------------------------------------------- console.log('3'<'5') // 字符串相互比较是比较Unicode码 console.log(3>'10a') // false 10a先转为NaN console.loge(3<'10a') //false 10a先转为NaN console.log(3=='10a') //false 10a先转为NaN NAN与任意比较都为输出结果都为false //甚至两个NaN比较也同样为false
-
逻辑运算符
&&(逻辑与/并且) 关联的两个条件都是true 结果是true,否则是false||(逻辑或/或者) 关联的两个条件有一个是true 结果为true,否则是false
!(逻辑非) 取反 非真为假 非假为真 例:var a=3>1 !a则为false
上一篇: antd form表单验证,表单初始值
推荐阅读