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