欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

javascript基础语法及变量相关

程序员文章站 2022-03-02 11:54:18
...

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