Javascript（一），JS基础知识，书写，工具台，变量，数据类型-CSDN博客

前言❤️❤️

hello hello💕，这里是洋不写bug~😄，欢迎大家点赞👍👍，关注😍😍，收藏🌹🌹
这是学习JS的第一篇博客，本篇文章中的知识都是JS入门基础知识，比较多，但是都很简单，快来学习吧🐵
🎆个人主页：洋不写bug的博客
🎆所属专栏：前端基础
🎆铁汁们对于前端的各种常用核心语法，都可以在上面的前端专栏学习，专栏正在持续更新中🏀，有问题可以写在评论区或者私信我哦~

1，JavaScript基础知识了解

1，什么是JavaScript

JavaScript是目前最流行的编程语言之一（后面就称之为JS），它是一个脚本语言，主要是在客户端上去运行的。
JavaScript在最初只是用于完成简单的表单验证，也就是验证数据的合法性，但是后来一不小心就火了

JavaScript有很多的功能：

网页开发 (相比前面学的html有更复杂的特效和用户交互)
网页游戏开发
服务器开发
电脑桌面程序开发
手机 app 开发
那对于大部分人来说，学习JavaScript就是进行网页开发

JavaScript跟CSS跟HTML之间是个什么样的关系呢？
html是网页的结构，CSS是网页的表现，JavaScript是网页的行为
简单来说，就是html用于写这个网页的框架和大体内容，那么CSS用来调网页中内容的样式，JavaScript加入更复杂的特效和用户交互。

2，JS运行

JS是主要运行在浏览器上的，浏览器中有两个引擎，一个是渲染引擎
渲染引擎：就是用来解析 html + CSS, 也就是我们平常说的 "内核"
JS 引擎：也就是 JS 解释器，典型的就是 Chrome 中内置的 V8，JS 引擎逐行读取 JS 代码内容，然后解析成二进制指令，再执行。
3，JS的组成

JS具体是由三个部分组成的：

1.ECMAScript (简称 ES): JavaScript 语法
我们要特别注意一点，那就是ECMAScript 并不等同于JavaScript，它指的是JS的语法部分，我们只用JS语法，只能实现一些简单的逻辑，是远远达不到当前网页这么多样的功能的。

2.DOM: 页面文档对象模型，对页面中的元素进行操作
例如这个微软浏览器的搜索框，可以在搜索框中输入文字，也可以删除文字，进行搜索，这就依赖了DOM，DOM就是让我们对页面中的元素进行一些增删改查的操作

3.BOM: 浏览器对象模型，对浏览器窗口进行操作
浏览器的左上角都有这些按钮，刷新页面和退回到上一页，这个的使用其实就要用到BOM模型

2，JS的书写

1，行内式

行内式是将 JavaScript 代码直接嵌入到 HTML 元素的内部，通过 HTML 元素的事件属性（例如onclick）来编写 JavaScript 逻辑

这里创建个html文件，在body里面写上一个按钮，加上onclick属性，就是点击按钮后会出现什么效果
alert就是JS中的一个内置函数，作用就是弹出一个包含指定内容的对话框。（在JS中，字符串用单引号和双引号括都可以，推荐在html中使用双引号，在JS中使用单引号）
代码和运行效果如下：
```
<body>
    <input type="button" value="点我一下" onclick="alert('haha')">
</body>
```
2，内嵌式

直接写JS代码，不像刚刚的行内式那样嵌入到元素内部，那么浏览器就无法执行这段代码，示例如下：
```
<body>
    alert('haha');
</body>
```
为了让浏览器识别执行JS代码，就需要把JS代码写到一个script标签中吗，script 标签是 HTML 中用于嵌入或引入 JavaScript 代码的核心标签，后续会经常用到
内嵌式，简单来说，也就是把JS代码语句写在script标签中，标记一下这是JS语句，让浏览器执行
代码和效果示例如下：
```
<body>
    <script>
        alert('haha');
        </script>
</body>
```
3，外部式

把JS代码写到外部.js文件中，让浏览器去读取执行，称之为外部式

这里在原来放html代码的目录里再创建一个.js为后缀的文件，在JS文件中写入alert用于弹出对话框

在script这个标签中，使用src属性，读取这个js文件的位置
代码和执行效果如下：

这种外部式写法非常适用于JS代码比较多的情况，这样我们把JS代码写入到外部文件中，然后读取即可

3，浏览器开发者工具台

在浏览器中有个开发者工具台，想看一段JS代码的效果的话，直接在上面写就可以了，不用写在什么script标签中
因为这个工具台的作用就是让我们调试小段JS代码效果的，已经标记好了

右键点击检查，点击控制台，输入alert代码，然后按回车，JS代码就可以执行了
具体步骤和过程见下图：

上面用的是微软浏览器，那么谷歌浏览器工具台的位置就在这里：

4，变量

1，变量的定义

在JS中变量的定义跟Java中是有很大的不同的
在定义变量时，直接用var或者let，是不需要写变量类型的，示例如下：
```
<body>
    <script>
        var name = "mark";
        console.log(name);
    </script>
</body>
```
这里定义了一个字符串变量，并且进行赋值
下面的这个console是JS中的一个内置对象，主要用于浏览器跟开发者工具台之间的一些交互
调用这个对象的log方法（这里方法的调用跟Java类似），这个log方法的作用就是在工具台上打印出这个变量。

当执行这段代码，在网页中打开控制台，就会发现name显示在了上面（如下图）

也可以用let，这次赋值个数字，在工具台中看下：
```
<body>
    <script>
        let age = 20;
        console.log(age);
    </script>
</body>
```
那let还是var，它们两个有啥区别呢？
建议铁汁们用let，因为let比var的出现时间要晚，相当于是var的升级版，let改进了var的一些缺陷，使用let来定义的变量，作用域，生命周期，基本上跟Java是类似的。

2，强/弱类型

在下面这段代码中，a原来是数字型，现在却可以把字符串赋给字符型数据，并且还不报错，JS本身用let定义变量就是通用的，因此，JS就是弱类型语言。
```
   <body>
    <script>
        let age = 20;
        age = 'a';
        console.log(age);
    </script>
</body>
```
在C，C++，Java中，这样直接写肯定是不行的，至少要进行个强制类型转换，这些语言就是强语言类型

3，动态/静态类型

在刚刚的代码上加个typeof方法，（typeof方法就是查看变量的数据类型）
这里在赋值完数字看一次，赋值完字符串再看一次，代码如下：

看运行结果会发现，在代码11行的时候，age的类型是number，但是在13行，这时候已经被字符串赋值了，这时候就成了String类型
像这种代码在执行过程中，变量类型可以随时发生变化，像JS这种语言我们就称为动态类型语言。

在Java，C++中，变量定义的时候是什么类型，在运行过程中就是什么类型，是不能轻易改变的，它们就是静态类型语言。

4，基本数据类型

以下就是JS中的几种基本数据类型，接下来会一个一个解析
number: 数字。不区分整数和小数.
boolean: true 真，false 假.
string: 字符串类型.
undefined: 只有唯一的值 undefined. 表示未定义的值.
null: 只有唯一的值 null. 表示空值.

1，number

看下这段代码和工作台展示的结果：

<body>
    <script>
        let a = 10;
        let b = 3.1415926;
        console.log(typeof(a));
        console.log(typeof(b));
    </script>
</body>

在这里插入图片描述

看完会发现，在JS中是不区分整数和浮点数的，统一用数字类型number来表示

表示各种进制的话，就在前面加上特定的符号，在JS中除了八进制，其他是跟Java的表示相同的

    <script>
        let a = 10;    //十进制直接写就可以
        let b = 0o7;   //八进制在前面加上0o
        let c = 0xa;   //十六进制以0x开头
        let d = 0b10;  //二进制以0b开头
    </script>

在转化时有个小技巧，那就是一个八进制数字对应三个二进制数字，一个十六进制数字对应四个二进制数字😄

还有几个特殊的数字类型：

Infinity: 无穷大，大于任何数字。表示数字已经超过了 JS 能表示的范围.
-Infinity: 负无穷大，小于任何数字。表示数字已经超过了 JS 能表示的范围.
NaN: 表示当前的结果不是一个数字.（Not a Number）
看下下面这段代码：
```
    <script>
       console.log(10/0);
       console.log(-10/0);
       console.log("hello world" - 1);
    </script>
```
那这里字符串减去一个数字，JS会试图将“hello world”转为一个数字，但是发现解析不成数字，那转换结果就是NAN，NAN无论进行什么运算，结果都是NAN。

2，boolean

boolean表示真和假，true为真，false为假
在C语言中，布尔类型在可以参与运算，把它们看作0和1，C语言中的这种设定是不科学的，因此在Java就没有这一设定
在JS中，boolean类型也可以当作数字进行运算，代码示例如下：
```
    <script>
       let a = true;
       console.log(typeof(a));
       a = a + 1;
       console.log(typeof(a)); 
    </script> 
```
3，string

string类型也很简单，可以使用单引号，也可以使用双引号
甚至用单引号套双引号，双引号套单引号，都不会出错：
```
<body>
    <script>
       let a = "hello 'JS'";
       let b = 'hello "world"';
       alert(a);
       alert(b);
    </script>
</body>
```
转义字符也是基本上跟Java用法是一样：
```
    <script>
       let a = "hello\n JS";
       alert(a);
    </script>
```
包括对长度的查询，跟Java中也是一样的：
```
    <script>
       let a = "hello JS";
       alert(a.length)
    </script>
```
包括字符串的拼接规则，也是跟Java一模一样，这里写段代码简单演示一下：
```
<body>
    <script>
       let a = true;
       console.log(a);
       console.log(typeof(a));
       a = a + 1;
       console.log(typeof(a)); 
       console.log(a);
    </script> 
</body>
```
4，undefined

前面提到的JS数据类型跟C语言和Java中都类似，但是这个undefined是JS中特有的，意思就是未定义数据类型。

当写了一个变量并且没有给它赋值时，它就是未定义数据类型
未定义数据类型跟其他数据类型进行运算会怎么样呢？
下面就写代码来试一下：
```
    <script>
       let a;
       console.log(a);
       console.log(a + "10");
       console.log(a + 10);
       console.log(a + true);
    </script> 
```
这里会发现：
undefined是可以跟字符串拼接的
在跟数字运算时，JS会试图将其转化为一个数字，发现不行，就转成NaN，NaN无论进行什么运算，结果都是NaN

那为什么跟boolean类型运算结果也是NaN呢？
因为boolean类型在运算时会被转为number类型🐵

5，null

null表示当前的变量是一个空值，这个空值跟前面刚刚讲的undefined有啥区别呢？

它们虽然表示的都是一种取值非法的情况，但是侧重点跟用法都是不同的，undefined是对变量没有定义，而null表示当前的值为空。
undefined跟number类型运算时结果是NaN，而null表示当前值为空，因此是可以跟数字类型进行计算的
示例如下：
```
    <script>
       let a = null;
       console.log(a + 20);
    </script> 
```
可能有的铁汁会说：undefined无定义数据类型不就代表这个数据类型是空的吗

我们可以这样理解：
null 是“有盒子，但盒子里明确放了一个‘空’的标识”—— 变量已经被声明，并且被主动赋值为 “空”（比如 let box = null），相当于我们刻意把盒子清空，并明确告诉它 “这里就是空的”
undefined 更像 “有盒子，但盒子里什么都没放”—— 变量已经被声明（盒子存在），但从未被赋值（比如 let box;），这不是主动清空，而是 “自然未填充” 的状态。

结语💕💕

JS部分的知识是很简单的，大部分东西跟C，JAVA中的类似，而且写代码的规则比较宽松，铁汁们只要多写代码，很快就能掌握💪
以上就是今天的所有内容啦～完结撒花～🥳🎉🎉