JavaScript环境搭建及常量、变量

灰太狼 2022-10-15 01:57 4阅读 0赞

### 零基础认识 ###

*   *  一、JS概述
     *   *  1、历史
         *  2、现状
         *  3、特点
         *  4、应用场景
     *  二、搭建开发环境
     *   *  1、前端：浏览器端
         *  2、后端：服务器端
         *  3、运行js
     *  三、JS语法规范
     *  四、变量
     *   *  1、声明变量 var
         *  2、变量的命名规则
         *  3、变量的赋值
     *  五、常量
     *   *  1、声明常量 const
         *  2、声明特点
     *  六、 总练习

## 一、JS概述 ##

### 1、历史 ###

(1)1995年，JS（JavaScript）最早出现在Netscape的浏览中；

(2)1996年，IE3中出现了JavaScript，因为和1995年已经有JavaScript存在了，于是就把它称作JScript;

(3)1997年，JS被提交给国际组织ECMA，并制订了JS的标准规范ECMAScript;

(4)2009年，JS遵循CommonJS规范，开始向服务器端（也就是后端）发展，于是出现了Node. js;

综上：2009年前JS只是嵌入在html中在前端使用发展，2009年出现Node.js后，前端和后端一块发展。

### 2、现状 ###

全栈开发，既可以运行在客户端浏览器，也可以运行在服务器端。

### 3、特点 ###

(1)解释型语言：编译一行，执行一行；

(2)弱类型语言：相对其它语言，javascript只有一种类型var 为变量赋值时会自动判断类型并进行转换 ；

(3)基于对象：后期操作均基于对象；

(4)跨平台：可以在不同操作系统中执行。

### 4、应用场景 ###

(1)前端：开发客户端，也就是浏览器端的交互效果；

(2)后端：服务器端开发，例如：数据库操作、其他服务器端的  
调用、数据库访问等。

## 二、搭建开发环境 ##

### 1、前端：浏览器端 ###

浏览器都有本身自带的JS解释器，用来执行JS代码，因此有浏览器就可。

### 2、后端：服务器端 ###

(1)Node. js是运行在服务器端的JS解释器，需要单独安装；

(2)官网：[www.nodejs.org][] ，下载长期版LTS即可；

(3)安装好后在cmd下进行测试：node -v (此命令是用来查看当前版本号的)。

### 3、运行js ###

> 实例：编写hello world。分别创建01.html和01.js,将01.js嵌入01.html中。如下：

(1)新建01.js,写入：console. log(hello world);

(2)新建01.html,写入：`<script src="01.js"> </script>`，这是为了将01.js文件嵌入01.html文件中；

(3)查看结果

①浏览器端：打开浏览器—鼠标右击—检查—控制台—hello world  
   ②后端：win+r — cmd — node 拖拽js文件 回车

综上：使用浏览器查看要新建html，而且不能以汉字命名，汉字会乱码；cmd下不会乱码，也能查看。一般我们都建议在cmd下查看且不建议使用汉字命名。

## 三、JS语法规范 ##

(1) 区分大小写；

(2) 每行结束的分号可以省略；

(3) 分为单行注释（//…）和多行注释（/\* … \*/）。

## 四、变量 ##

> 可以改变的数值，存储数据的容器。

### 1、声明变量 var ###

> ① var x=1; 一次声明一个变量  
>   
> 解释：使用关键字声明了变量x，然后把1赋值给了x  
>   
> ② var a=3,b=5; 一次性声明多个变量，之间用逗号隔开  
>   
> 解释：使用关键字声明了变量a和变量b，然后把3赋值给了a，5赋值给了b

### 2、变量的命名规则 ###

可以由字母、数字、下划线、美元符号组成，但不能以数字开头，不能使用关键字和汉字。推荐以下可读性较强的命名方法：

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>驼峰命名法</td> 
   <td>userName、userPassword</td> 
  </tr> 
  <tr> 
   <td>下划线命名法</td> 
   <td>user_name、user_Passward</td> 
  </tr> 
 </tbody> 
</table>

### 3、变量的赋值 ###

(1) 变量声明后未赋值未则为 undefined (未定义)；

(2) 具有弱类型语言的特点：可以多次赋值并且可以赋不同类型的值。

> 练习1：声明变量分别保存多组商品的单价和数量，声明变量保存总价，最后打印出总价。

var price1=25,num1=4;
      var price2=15,num2=10;
      var total=price1*num1+price2*num2;
      console.log(total);

> 练习2：要求声明变量，分别保存语文、数学、总成绩，然后计算出总成绩。最终打印三个变量。

var num1=`90,num2=100;
      var sum=num1+num2;
      console.log(num1,num2,sum);

## 五、常量 ##

> 可以确定的数值，存储数据的容器

### 1、声明常量 const ###

### 2、声明特点 ###

常量一旦声明，必须赋值。不允许重新赋值

> 练习：const声明圆周率

const pi=3.14;
      console.log(pi);

## 六、 总练习 ##

> 练习1：声明变量保存圆的半径，声明常量保存圆周率，最后计算圆的周长和面积

var r=28;
      const pi=3.14;
      var len=2*pi*r;  //周长
      var area=pi*r*r; //面积
      console.log(len,area);
      //注意：若r=5会存在误差，这是计算机底层运算造成的。人为控制不了。

> 练习2：a=1,b=2 交换两个变量的值

var a=1,b=2;
      var c=a;
      a=b;
      b=c;
      console.log(a,b);

[www.nodejs.org]: https://nodejs.org/en/