从零开始的JavaScript基础！

一、JavaScript 的概述

二、如何在HTML页面中使用JS

（一）、行内式

（二）、内嵌式

（三）、外链式

（四）、基本执行顺序

1.从上到下线性执行：

2.阻塞行为：

（五）、JS 输出方式

1. alert() 通过浏览器弹出框进行输出

2.document.write() 直接在网页页面中进行输出

3.console.log() 通过浏览器控制台进行输出，此方法最常用！

（六）、注释

1、单行注释

2、多行注释

三、JS 语法基础

（一）、变量

1.变量名

2.数据类型

3.变量提升现象

（二）、运算符

1.typeof 运算符

2.算术运算符

（1）、加减乘除运算符：+ 、-、 *、 /

（2）、取余运算符：%

（3）、自增自减运算符： ++、 --

3.算术赋值结合运算符： += -= *= /= %=

4.比较运算符

编辑

5.布尔运算符

（1）、取反运算符： !

（2）、且运算符： &&

（3）、或运算符： ||

一、JavaScript 的概述

JavaScript 是一种web脚本编程语言，简称 JS；主要用于向HTML页面中添加交互行为；不需要编译，直接由浏览器解释运行，语法和Java类似。因此，在语法学习过程中，需注意与Java对比学习。
注意：JavaScript 与 Java 是两种完全不同的语言（只是语法相似），无论在概念还是设计上。

二、如何在HTML页面中使用JS

与CSS的引用类似，主要有三种方式：行内式，内嵌式，外链式

（一）、行内式

直接在HTML中 <body> 标签内添加 js 脚本，一般需要监听事件（非常不推荐，了解即可）

行内式比较简单直接，适合较少且简单的代码，但这不利于代码较多或者其他网页的复用

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的使用方式及执行顺序</title>
</head>
<body>
        <!-- 行内式：直接在HTML标签内添加js脚本，一般需要监听事件（非常不推荐，了解即可） -->
        <input type="submit" value="登录" onclick="javascript:alert('登录成功');"/>
</body>
</html>

运行结果如下：

（二）、内嵌式

在HTML文档中任意位置内嵌 js 脚本

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的使用方式及执行顺序</title>
</head>
<body>
    <!-- 内嵌式：js代码不多时，或者做实验时，可以用一下 -->
    <script>
        // 文档对象输出函数
        document.write("测试内嵌js的引用")  //document.write()向网页输出内容
    </script>
</body>
</html>

运行结果如下：

（三）、外链式

在HTML文档中任意位置，通过src属性链接外部js脚本（可以是本地文件，也可以是网络URL）

运行代码如下：

首先创建一个名为 script.js 的文件，内容如下：

document.write("外链式引用JS脚本");

然后在 HTML 文件中引入这个js文件：

<!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>
    <!-- 外链式：在HTML文档中任意位置，通过src属性链接外部js脚本 
         （可以是本地文件，也可以是网络URL） -->
    <!-- 外链式：工程项目开发主打引用方式，可以解除耦合 -->
    <script src="./1_my.js">
    </script>
</body>
</html>

运行结果如下：

注意：

1. <script> 标签可以放置在HTML文档中任意位置；

2. 在HTML文档中，<script>标签的个数没有限制；

（四）、基本执行顺序

1.从上到下线性执行：

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

2.阻塞行为：

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

因此可以使用 delay（time）来使网页的内容延迟出现，避免阻塞行为的出现。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的使用方式及执行顺序</title>
</head>
<body>
    <script>
        document.write("测试内嵌js的引用")
        document.write("测试内嵌js的引用")
        document.write("测试内嵌js的引用")
        // 延时语句，延时30分钟
        Delay(30)
    </script>
</body>
</html>

（五）、JS 输出方式

有三种 JS 输出方式：alert() 、document.write() 、console.log()

1. `alert()` 通过浏览器弹出框进行输出

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的输出方式</title>
</head>
<body>
    <!-- 代码调试时，偶尔能用一下 -->
    <script> 
        alert("第一种：通过浏览器弹出框进行输出"); 
    </script>
</body>
</html>

运行结果如下：

2.`document.write()` 直接在网页页面中进行输出

运行代码如下：

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

运行结果如下：

3.`console.log()` 通过浏览器控制台进行输出，此方法最常用！

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的输出方式</title>
</head>
<body>
    <!-- 主要用于代码的调试，强烈推荐这种方式 -->
    <script> 
        console.log("第三种：通过浏览器控制台进行输出！此方法最常用！"); 
    </script>
</body>
</html>

运行结果如下：

主要用于代码的调试，强烈推荐这种方式。在运行代码后点击F12，点控制台即可查看。

（六）、注释

1、单行注释

单行注释以 // 开头。

任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。

快捷键：ctrl+/

2、多行注释

多行注释以 /* 开头，以 */ 结尾。

任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。

三、JS 语法基础

（一）、变量

1.变量名

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

变量的声明和赋值语句var的语法为：var 变量名称1[=初始值1] , 变量名称2[=初始值2]...;
注意：

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

2.数据类型

使用 typeof 查询数据类型

数值类型（number）：包括整数和浮点数。例如 8、5.20 等。

运行代码如下：

    <script> 
        // 数字 number
        var x1=65.30;
        document.write(x1 + " -> 数据类型："+ typeof x1 + "<br>");

        var x2=65;
        document.write(x2 + " -> 数据类型："+ typeof x2 + "<br>");
    </script>

运行结果如下：

字符串类型（string）：用单引号或双引号括起来的字符序列。例如 'Hello'、"World" 等。

运行代码如下：

    <script> 
        //字符串 string
        var str1="Good morning!"; 
        document.write(str1 + " -> 数据类型："+ typeof str1 + "<br>"); 

        //双引号包含带单引号的字符串 string
        var str2="This is 'Tom'"; 
        document.write(str2 + " -> 数据类型："+ typeof str2 + "<br>");

        //单引号包含带双引号的字符串 string
        var str3='This is "Tom"';
        document.write(str3 + " -> 数据类型："+ typeof str3 + "<br>");
    </script>

运行结果如下：

布尔类型（boolean）：只有两个值，true 和 false。常用于条件判断和逻辑运算。

运行代码如下：

    <script> 
        // 布尔值 boolean
        var x=true;
        document.write(x + " -> 数据类型："+ typeof x + "<br>");
    </script>

运行结果如下：

null 类型：表示一个空值，通常用于表示对象为空或者变量尚未赋值。

运行代码如下：

    <script> 
        // 特殊情况：尽管 null 是一个表示空值的特殊关键字，
        // 但 typeof null 会返回 "object"。
        // 这是一个著名的 JavaScript 特性，
        // 虽然有些令人困惑，但已经存在了很长时间（知道一下就行，不必理会）
        var person2=null;
        document.write(person2 + " -> 数据类型："+ typeof person2 + "<br>");
    </script>

运行结果如下：

undefined 类型：表示变量已声明但未赋值的状态。

运行代码如下：

    <script> 
        // 未定义类型 undefined
        var person1;
        document.write(person1 + " -> 数据类型："+ typeof person1 + "<br>");
    </script>

运行结果如下：

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

运行代码如下：

    <script> 
        // 对象 object   （对象类型下的数组类型）
        var persons = new Array("Tom","Jack","Kate");
        document.write(persons + " -> 数据类型："+ typeof persons + "<br>");
    </script>

运行结果如下：

3.变量提升现象

变量提升是JavaScript中的一个概念。简单来说，就是在代码执行之前，JavaScript会把变量的声明提升到当前作用域的最前面。

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

    <script> 
        // 原来写的语句（变量先用后声明）
        console.log(num);
        var num = 10; 

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

（二）、运算符

1.typeof 运算符

typeof 是用于确定JavaScript变量的类型的

运行代码如下：

    <script> 
        var x1 = 8;
        document.write(x1 + " -> 数据类型："+ typeof x1 + "<br>");
    </script>

运行结果如下：

2.算术运算符

（1）、加减乘除运算符：+ 、-、 *、 /

运行代码如下：

    <script>
        var a=1;
        var b=2;
        var c=a+b;
        document.write(c+"->的数据类型："+typeof c+"<br>");
    </script>

运行结果如下：

（2）、取余运算符：%

运行代码如下：

    <script> 
        //取余运算符 ：%
        var a=4;
        var b=3;
        var c=a%b;
        document.write(c+"->的数据类型："+typeof c+"<br>");
    </script>

运行结果如下：

（3）、自增自减运算符： ++、 --

运行代码如下：

    <script> 
        //自增自减运算符：  ++、   --
        //自增自减运算符：  ++、   --
        var a=1;
        var b=1;
        document.write(++a +"->的数据类型："+typeof a+"<br>");
        document.write(b++ +"->的数据类型："+typeof b+"<br>");
    </script>

运行结果如下：

自加运算符在变量后面（b++），先返回变量的值，然后才开始自加，相当于c=b;b=b+1;这样返回的值就是1.

3.算术赋值结合运算符： += -= *= /= %=

运算符	举例	等同于
+=	a+=b	a=a+b
-=	a-=b	a=a-b
*=	a*=b	a=a*b
/=	a/=b	a=a/b
%=	a%=b	a=a%b

运行代码如下：

    <script> 
        var a=1;
        var b=1;
        console.log(a+=b); //a=a+b，a=2
        console.log(a*=b); //a=a*b，由于上面的运算a以及赋值为2，所以a*b=2*1=2
        console.log(a%=b); //a=a%b
    </script>

运行结果如下：

4.比较运算符

比较运算符用于比较两个值的大小，然后返回一个布尔值，表示是否满足指定的条件，它返回的结果是True和False。
注意：相等运算符不严格要求数据类型相等,只要转换后的值相等就可以；严格相等是对数据类型也要一致。

运行代码如下

    <script>
            var a=1;
            var b="1";
            var c=2
            console.log(a==b); 
            console.log(a===b);
            console.log(a>c);
    </script>

运行结果如下：

5.布尔运算符

（1）、取反运算符： !

①布尔值取反

！true 运行结果为false

！false 运行结果为true

②非布尔值取反

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

（2）、且运算符： &&

全部为真则为真，有一个为假则为假，全部为假则为假

运行代码如下：

    <script>
        //且运算符 ： &&
         var a=true;
        var b=false;
        console.log(a && b);
    </script>

运行结果如下：

（3）、或运算符： ||

全部为真则为真，有真有假也为真，全部为假则为假

运行代码如下：

    <script>
        //或运算符： ||
         var a=true;
        var b=false;
        console.log(a || b);
    </script>

运行结果如下：

将源代码再自行运行一遍加深理解！