JavaScript简明教程-----01

水深无声 2021-09-09 03:12 393阅读 0赞

## JavaScript简明教程-----01 ##

### 文章目录 ###

*   *  JavaScript简明教程-----01
     *   *  一、JS介绍
         *  二、变量的定义
         *  三、数据类型
         *   *  1、数字
             *  2、字符串
             *  3、布尔值
             *  4、未定义值
             *  5、空值
         *  四、运算符
         *   *  1、算数运算符
             *  2、赋值运算符
             *  3、比较运算符
             *  4、逻辑运算符
             *  5、条件运算符
         *  五、表达式
         *  六、类型转换
         *   *  1、隐式类型转换
             *  2、显示类型转换
             *   *  1）字符串转换为数字
                 *  2）数字转换为字符串
         *  七、准转义字符
         *  八、注释的写法
         *   *  1、单行注释
             *  2、多行注释

### 一、JS介绍 ###

网页开发分为了：  
JavaScript，  
CSS，  
HTML

其中，CSS是控制样式的  
HTML是控制网页的结构的  
JavaScript是控制网页的行为的。

在网页中，引入JavaScript有三种方式：  
1、内部引入  
2、外部引入  
3、元素事件引入

### 二、变量的定义 ###

在JavaScript语言中，  
定义一个变量主要是使用 var的方式  
例如：

var a = 1057;
    var b = 1064;
    var c = 1045;

如果你接触了 es6 ，那么还有两种方式进行变量的定义：  
1、let  
2、const  
let 是定义一个局部的变量，一般会在函数中进行使用，而 const 是定义一个常数了啦。  
例如：  
使用 function 关键字可以定义一个函数。

function say_hello()
    { 
    	let name = "Tom";
    	document.write("Hello World! </br>");
    	document.write("From </br>");
    	document.write(name);
    }
    say_hello();

在这里，let 是定义了一个局部变量 name，let name = “Tom”，  
意思是换行。

注意，在JavaScript中，所有的变量都是这么定义的，不管它是什么类型，都是用 var， let， const的呦~

### 三、数据类型 ###

#### 1、数字 ####

在JavaScript中，只有数字这样一个数据类型，所有的 int float double 都是数字类型的

#### 2、字符串 ####

字符串大家肯定非常熟悉，这里就不必多说了，我们后面讲几个字符串的内置函数以及属性就可以了。

#### 3、布尔值 ####

true  
false  
这两个值大家肯定也是十分熟悉的吧，就是在循环以及选择语句的时候会经常使用到的一个判断的数值啦。

#### 4、未定义值 ####

如果只是进行了声明而并没有进行赋值，那么就是一个未定义的值了啦

undefined

#### 5、空值 ####

如果一个变量的值为 null ，那么，  
系统就不会分配内存空间

null

### 四、运算符 ###

#### 1、算数运算符 ####

加：+  
减：-  
乘：\*  
除：/  
取余：%  
自加一：++  
自减一：–

#### 2、赋值运算符 ####

等于：=  
加等于：+=  
减等于：-=  
乘等于：\*=  
除等于：/=

#### 3、比较运算符 ####

等于：==  
大于：>  
小于：<  
大于等于：>=  
小于等于：<=  
不等于：！=

#### 4、逻辑运算符 ####

与：&&  
或：||  
非：！

#### 5、条件运算符 ####

var a = 条件 ？ 表达式1 ： 表达式2

其中：

条件为 true 选择表达式1  
条件为 false 选择表达式2

### 五、表达式 ###

表达式是由变量（操作数），操作符等构成的

### 六、类型转换 ###

#### 1、隐式类型转换 ####

var a = 1057;
    var b = "i love you";
    var c = a + b;
    document.write(c)

这个例子就是把 a = 1057 这个数字变量强制转换为了字符串对象。

#### 2、显示类型转换 ####

##### 1）字符串转换为数字 #####

Number()  
parseInt()  
parseFloat()

第一种方法是转换为数字，  
第二种方法是转换为整型数字，  
第三种方法是转换为小数数字。  
例如：  
（这里写一个简单的完整的网页吧）

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset = "utf-8">
    		<title>
    			the_first_html
    		</title>
    	</head>
    	<body>
    		<script type = "text/javascript"> var str_0 = "1057.1045"; document.write(Number(str_0)); document.write("</br>"); document.write(parseInt(str_0)); document.write("</br>"); document.write(parseFloat(str_0)); document.write("</br>"); </script>
    	</body>
    </html>

我们运行上述代码，效果图如下图所示：  
![在这里插入图片描述][d4be9d3e45db78fe069dadf0ac59dee4.png_pic_center]  
以及  
![在这里插入图片描述][50d33c0e89d57f7480c79c8b8a3d3ae9.png_pic_center]

##### 2）数字转换为字符串 #####

如果需要把一个数字转换为字符串，那么就需要进行使用 toString（）方法来实现：  
例如：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset = "UTF-8">
            <title>
                no title
            </title>
            <script type = "text/javascript"> var a = 2017; var b = a.toString() + 1000; document.write(b); </script>
        </head>
        <body>
        </body>
    </html>

在这里也是写了一个完整的HTML了啦。  
效果图如下所示：  
![在这里插入图片描述][d5f172987a42448d3d5e27235380b063.png_pic_center]  
以及  
![在这里插入图片描述][f31ea051651775c2cb39c77a359f6362.png_pic_center]  
这个就是显性的强制转换将数字转换为了字符串的方法  
toString（）啦~

### 七、准转义字符 ###

" 对应于---- "  
’ 对应于---- ’  
\\n 对应于---- 换行  
注意一下：  
\\n 是在一个字符串中的换行  
而

<br/> 是在 document.write() 中的换行

### 八、注释的写法 ###

在JavaScript中，有单行注释以及多行注释之分：

#### 1、单行注释 ####

// 这是 JavaScript 的 单行注释
    // 单行注释

#### 2、多行注释 ####

当然，多行注释也可以写一些单行注释的啦~~~

**以上就是js学习的第一部分内容，后续我会持续的进行更新的，希望大家多多关照了啦~~~**

[d4be9d3e45db78fe069dadf0ac59dee4.png_pic_center]: /images/20210813/bed8edafa4724d4b828723486e87f467.png
[50d33c0e89d57f7480c79c8b8a3d3ae9.png_pic_center]: /images/20210813/69d64aeec93b48ae8e51e3982b59354f.png
[d5f172987a42448d3d5e27235380b063.png_pic_center]: /images/20210813/e645ab5ee308422db9c42867e25d88d1.png
[f31ea051651775c2cb39c77a359f6362.png_pic_center]: /images/20210813/bd25f471f84f459b99b8cd9c106f5aa2.png