JavaScript的语法基础（变量、数据类型、运算符、程序控制语句）！！_var rid = ""; var tj = ""; var totaltime = 1; var -优快云博客

本文链接：https://blog.youkuaiyun.com/CH040708/article/details/143496197

#JavaScript是一种web脚本编程语言，简称JS；所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。#

一、JS概述

1. 前言：

主要用于向HTML页面中添加交互行为；不需要编译，直接由浏览器解释运行，语法和Java类似。
因此，在语法学习过程中，需注意与Java对比学习。

2. 注意：

JavaScript 与 Java 是两种完全不同的语言（只是语法相似），无论在概念还是设计上。

二、HTML页面中使用JS

1. Javascript主要的三种方式：行内式，内嵌式，外链式

1.1 行内式

①. 前言

行内式：不怎么推荐使用
行内式写在<body>元素里面

②. 行内式语法的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js脚本代码的应用方式</title>
</head>
<body>
    <!-- 行内式：不推荐使用 -->
    <input type="submit" value="登录" onclick="javascript:alert('登录成功！')">
</body>
</html>

代码运行后如下：

1.2 内嵌式

①. 前言

内嵌式：js代码不多时，或者做实验时，可以用一下
内嵌式运用<script>标签运行，而 <script>标签可以放置在HTML文档中任意位置；

②. 内嵌式的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js脚本代码的应用方式</title>
    
    <!-- 内嵌式：js代码不多时，或者做实验时，可以用一下 -->
    <script>
         document.write("测试内嵌式js的引用1") 
         document.write("测试内嵌式js的引用2")
        
    </script>
</head>
<body>
</body>
</html>

代码运行后如下：

1.3 外链式

①. 前言

外链式：工程项目开发主打引用方式，可以解除耦合
外链式先创建一个.js的文件，在HTML中通过<script>标签应用实现效果

②. 外链式的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js脚本代码的应用方式</title>
    <!-- 外链式：工程项目开发主打引用方式，可以解除耦合 -->
    <script src="./1.我的第一个js程序.js">

    </script>
</head>
<body>
</body>
</html>

代码运行后如下：

三、基本的执行顺序

1. 从上到下线性执行

HTML中的JS脚本通常是从上到下线性执行的。也就是说，浏览器会按照HTML文档中JS脚本出现的顺序依次执行它们。

2. 阻塞行为

①. 前言

当浏览器遇到<script>标签时（无论是内嵌JS还是通过src属性引入的外部JS文件），它会停止解析和渲染页面，优先下载、解析并执行该标签中的JS代码。
这个过程会阻塞页面其他内容的下载和渲染，直到JS代码执行完毕。
<script>出现阻塞行为可以使用延时语句解决这个问题

②. 解决阻塞行为的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js脚本代码的应用方式</title>
    <script>
         document.write("测试内嵌式js的引用1")
         document.write("测试内嵌式js的引用2")
         document.write("测试内嵌式js的引用3")
        //  延时语句，延时30分钟
         delay(30)
        
    </script>
</head>
<body>
</body>
</html>

四、Javascript的输出方式

1. Document.write 标签

①. 前言

通过 <script> 标签运用 document.write（）的方式输出在现代 web 前端开发中已经不推荐使用，因为它会覆盖整个页面的内容

②document.write（）的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的输出方式</title>
</head>
<body>
    <!-- 在现代web前端开发中已经不推荐使用，因为它会覆盖整个页面的内容 -->
    <script>
        document.write("第一种：直接在网页页面中进行输出");
    </script>
</body>
</html>

代码运行后如下：

2. Alert 标签

①. 前言

alert( ) 代码在调试时，偶尔可以用一下

②. alert（）的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的输出方式</title>
</head>
<body>
    <!-- 代码调试时，偶尔可以用一下 -->
    <script>
        alert("通过弹窗来输出信息")
    </script>
</body>
</html>

代码运行后如下：

3. Console.log 标签

①. 前言

console.log（）标签主要用于代码调试，推荐方式

②. console.log（）标签的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的输出方式</title>
</head>
<body>
    <!-- 主要用于代码调试，推荐方式 -->
    <script>
        console.log("通过浏览器控制台输出信息"); //日志
        console.log("通过浏览器控制台输出信息，非常方便"); //日志
    </script>
</body>
</html>

代码运行后如下：

五、JavaScript 的变量和运算符

1. 变量

①. 前言

变量名可由：字母、美元符号($)、下划线(_)和数字组成，但数字不能开头。

②. 注意

不能用 JavaScript 的关键字，如var、int、true等作变量名称。
JavaScript 是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，但在使用变量之前先进行声明是一种好的习惯。变量的类型在赋值时根据数据类型来确定。

2. 数据类型

2.1 Number 标签

①. 前言

var iNum=23; //整数
var iNum=23.0; //浮点数

②. Number 标签的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的数据类型</title>
</head>
<body>
    <script>
        var num1 = 23;
        var num2 =23.1;
        document.write(num1+"<br>");
        document.write(num2+"<br>");
        document.write(num2 +"->数据类型："+typeof nub2+ "<br>");
        document.write(num1 +"->数据类型："+typeof nub1+ "<br>");
    </script>
</body>
</html>

代码运行后如下：

2.2 String 标签

①. 前言

String 标签是一组被单引号或双引号括起来的文本，比如： var string1="This is a string";

②. string 标签的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的数据类型</title>
</head>
<body>
    <script>
        var str1 = "双引号定义字符串";
        var str2 = "单引号定义字符串"
        document.write(str1+"<br>");
        document.write(str2+"<br>");
        document.write(str1 +"->数据类型："+typeof str1+ "<br>");
        document.write(str2 +"->数据类型："+typeof str2+ "<br>");
    </script>
</body>
</html>

代码运行后如下：

2.3 Boolean 标签

①. 前言

Boolean 标签用法输出结果：true和false, 比如: var b = true;

②. boolean 标签的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的数据类型</title>
</head>
<body>
    <script>
        var b=true;
        document.write(b+"->数据类型："+ typeof b + "<br>");
    </script>
</body>
</html>

代码运行后如下：

2.4 Undefined 标签

①. 前言

比如： var width ; 上面语句定义的变量 width，没有初始值，将被赋值 undefined

②. undefined 标签的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的数据类型</title>
</head>
<body>
    <script>
        var  u = undefined ;
        document.write(u+"->数据类型："+ typeof u + "<br>");
    </script>
</body>
</html>

代码运行后如下：

2.5 Null标签

①. 前言

Null 标签表示一个空值，与 undefined 值相等

②. null 标签的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的数据类型</title>
</head>
<body>
    <script>
        var u=null;
        document.write(u+"->数据类型："+ typeof u + "<br>");
    </script>
</body>
</html>

代码运行后如下：

2.6 Object 标签

①. 前言

Object 标签对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。

②. object 标签的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的数据类型</title>
</head>
<body>
    <script>       
        var u=['tom','jack','joe']; // 在js中，数据属于对象object类型
        var u2= new Array('tom','jack','joe');
        document.write(u2)
    </script>
</body>
</html>

代码运行后如下：

3. 变量提升现象

概念：所有的变量的声明语句（不包含赋值），都会被提升到代码的头部

        console.log(num);
        var num = 10;
        document.write(num)
        //实际运行效果（变量提升现象）
        var num;
        console.log(num);
        num =10;

六、JavaScript的运算符

运算符包含了typeof运算符、算术运算符、赋值运算符、比较运算符、布尔运算符

1. typeof运算符

① 前言

<typeof>元素常用于确定JavaScript变量的类型的

② typeof运算符的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的数据类型</title>
</head>
<body>
    <script>
        var u=null;
        document.write(u+"->数据类型："+ typeof u + "<br>");
    </script>
</body>
</html>

代码运行后如下：

2. 算术运算符

① 前言

算术运算符包含了加减乘除运算符 + - * / 和取余运算符 % 和自加自减运算符 ++ --

② 算术运算符的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运算符</title>
</head>
<body>
      <script>
        var a=1;  //++ a=a+1
        var b=1;
      
        //自加(自减)运算符载变量名后面，先返回变量的值，然后才开始自加
        console.log(a++);
        c=a;
        a=a++
      </script>
</body>
</html>

代码运行后如下：

3. 赋值运算符

① 前言

赋值运算符包含了基础赋值运算符 = 和算术赋值结合运算符 += -= *= /= %=

② 赋值运算符的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运算符</title>
</head>
<body>
      <script>
        //自加(自减)运算符载变量名后面，先自加，再先返回加后的值，
        console.log(++a); // 先a=a+1 ；然后返回。

        //算术赋值结合运算符 += -= *=  /=  %=
        console.log(a+=b);   //a=a+b
      </script>
</body>
</html>

代码运行后如下：

4. 比较运算符

① 前言

比较运算符用于比较两个值的大小，然后返回一个布尔值，表示是否满足指定的条件

② 比较运算符的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运算符</title>
</head>
<body>
      <script>
         var a=1;  
         var b="1";
        //ture false
        console.log( a == b);  //true
        //相等运算符不要求数据类型完全一致，只要转换后值能一样即可
        //严格相等运算符要求数据类型完全一致
        console.log( a === b); //false
      </script>
</body>
</html>

代码运行后如下：

5. 布尔运算符

5.1 . 前言

布尔值取反： !true// false 和 !false// true
非布尔值取反：对于非布尔值，取反运算符会将其转为布尔值。以下六个值取反后为true，其他值都为false。undefined、null、false、0、NaN、空字符串

5.2. 且运算符 &&

① 前言

全部为真则为真，有一个为假则为假，全部为假则为假；理解： a为真，且b为真吗？

② 且运算符 && 的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运算符</title>
</head>
<body>
      <script>
         var a=1;
         var b=1;
         var c=1;
         var a=false;
         var b=true;
         var c=true;
        console.log(a && b); //a为真，且b为真吗？
      </script>
</body>
</html>

代码运行后如下：

5.3. 或运算符 ||

① 前言

全部为真则为真，有真有假也为真，全部为假则为假；理解： a为真，或b为真吗？

② 或运算符 || 的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运算符</title>
</head>
<body>
      <script>
         var a=1;
         var b=1;
         var c=1;
         var a=false;
         var b=true;
         var c=true;
        console.log(a || b); //a为真，或b为真吗？
        console.log(a || b||c); //a为真，或b为真吗？
      </script>
</body>
</html>

代码运行后如下：

七、JavaScript的条件语句

一、条件语句

1. 单向判断 if...

① 前言

if 语句是最基本的条件语句，是一个关系表达式，用来实现判断。如果“条件”的值为true，则执行{ }里面的语句。否则则跳过if语句执行后面的语句。

②. if语句的运用

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的条件语句</title>
</head>

<body>
    <script> 
        // if语句
        var num = 3;
        if (num === 3) 
        {
            num++;
        }
        console.log(num);   // 4
    </script>
</body>
</html>

代码运行后如下：

2. 双向判断 if...else...

① 前言

if 语句如果“条件”的值为true，则执行{ }里面的语句。否则则执行else if { }里面的语句

②. if...else...语句（三目运算符）的运用

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的条件语句</title>
</head>

<body>
    <script> 
        // if...else...语句（及其嵌套使用）
        var eat = true;
        var food = "猪肉炖粉条";
        if (eat) 
        {
            if (food == "双椒鱼头") 
            {
                console.log('就吃：双椒鱼头'); 
            }
            else
            {
                console.log("就吃：猪肉炖粉条");
            }
        } 
        else 
        {
            console.log('还没到饭点');
        }
    </script>
</body>
</html>

代码运行后如下：

（三目运算符）的运用

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的条件语句</title>
</head>

<body>
    <script> 
        // 判断一个数是奇数还是偶数（三目运算符实现）
        var n = 100;
        console.log(n % 2 === 0 ? '偶数' : '奇数');
    </script>
</body>
</html>

代码运行后如下：

3. 多向判断语句 if...else if...else if...

① 前言

if 语句如果“条件”的值为true，则执行{ }里面的语句；否则则执行else if { }里面的语句；else if { }语句如果“条件”的值为true，则执行else { }里面的语句。

②. if...else if...else if...语句的运用

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的条件语句</title>
</head>

<body>
    <script> 
        // if...else...语句（及其嵌套使用）
        var eat = true;
        var food = "猪肉炖粉条";
        if (eat) 
        {
            if (food == "双椒鱼头") 
            {
                console.log('就吃：双椒鱼头'); 
            }
            else
            {
                console.log("就吃：猪肉炖粉条");
            }
        } 
        else 
        {
            console.log('还没到饭点');
        }
    </script>
</body>
</html>

代码运行后如下：

4. 多向判断语句 switch

① 前言

switch 语句中变量的值等于数值1时，执行第一个 case 语句之后的语句段，直到break语句，然后跳出 switch 语句；

②. switch 语句的运用

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的条件语句</title>
</head>

<body>
    <script> 
        //  多向判断语句  switch
        var x = 3;
        switch (x)
        {   
            case 0 :  console.log("x为0");  
                      break;
            case 1 :  console.log("x为1");  
                      break;
            default : console.log("x既不是0也不是1");  
        }
    </script>

</body>
</html>

代码运行后如下：

二、循环语句

1. for循环

① 前言

for 语句实现条件循环，当“条件”成立时，执行语句段；否则跳出循环体，循环结束。

for (初始化；条件;增量){
    语句段；
}

② for循环语句的运用

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的循环语句</title>
</head>

<body>

    <script>
        //  递增输出1~10
        for(var i=1;i<=10;i++)
        {
            console.log(i);
        }
</body>
</html>

代码运行后如下：

2. while循环

① 前言

while语句适合条件复杂无法预知循环次数的循环，for语句适合已知循环次数的循环

② for循环语句的运用

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的循环语句</title>
</head>

<body>

    <script>
        // 递增输出0~9
        var i = 0;
        while (i < 10) 
        {
            console.log('i的值为:' + i);
            i = i + 1;
        }
</body>
</html>

代码运行后如下：

3. break和continue语句

break语句用于无条件跳出循环结构或switch语句，break语句是单独使用的。
continue语句是结束本轮循环，跳转到循环的开始处，从而开始下一轮循环。

死循环的案例（不要使用，会卡死！）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的循环语句</title>
</head>

<body>

    <script>
        // 永久循环（死循环），如果确实需要永久循环，推荐这种写法。
        while (1) 
        {
            console.log('每天早上对你说一句肉麻话: 我爱你,中国');
        }
</body>
</html>