前端学习日志-The Begging Of JavaScript

2022-04-22

终于跨过了菠萝菠萝的HTML的部分，为了赶进度开始速通JavaScript吧

没有什么自信就是了

Something About JavaScript

JavaScript既是前端语言又是后端语言

当 JavaScript 运行在用户的终端网页，而不是运行在服务器上的时候，我们称之为“前端语言”。前端语言是服务于页面的显示和交互，不能直接操作数据库。

后端语言是运行在服务器上的，比如 Java、C++、PHP 等等，这些语言都能够操作数据库（对数据库进行“增删改查”），并在后台执行各种任务。

另外，Node.js 是用 JavaScript 开发的，我们也可以用 Node.js 技术进行服务器端编程

JavaScript的组成

JavaScript 基础分为三个部分：

ECMAScript： JavaScript 的语法标准。包括变量、表达式、运算符、函数、if 语句、for 语句等。
DOM： Document Object Model（文档对象模型），JS 操作页面上的元素（标签）的 API。比如让盒子移动、变色、改变大小、轮播图等等。
BOM： Browser Object Model（浏览器对象模型），JS 操作浏览器部分功能的 API。通过 BOM 可以操作浏览器窗口，比如弹框、控制浏览器跳转、获取浏览器分辨率等等。

通俗理解就是：ECMAScript 是 JS 的语法；DOM 和 BOM 是浏览器运行环境为 JS 提供的 API。

JavaScript的特点

1、解释型语言

什么是解释型语言呢？小编也很好奇，那么到底什么是解释型语言呢？解释型语言就是解释的语言，它可以解释语言，所以叫解释型语言。那么这就是解释型语言的全部内容了，大家学会了吗？

解释型语言的意思是：程序执行之前，不需要事先被翻译为机器码；而是在运行时，边翻译边执行（翻译一行，执行一行），如Java， JS等。与之相对的是编译型语言，如C， C++等

为什么 JS 是解释型语言呢？这和浏览器的工作原理有关。浏览器中有一个专门的“JS 解析器”可以让 JS 边解析边执行。

由于少了事先编译这一步骤，所以解释型语言开发起来尤为方便，但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了 JIT 技术，使得运行速度得以改善。

2、单线程

3、ECMAScript标准

用JavaScript写一个Hello World吧！

好麻烦啊每次都要打一遍JavaScript，之后就叫JS吧

引入JS代码有三种方式：

行内式：写在标签内部。
内嵌式（内联式）：写在 head 标签中。
外链式：引入外部 JS 文件。

1、行内式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <!--下一行是JS代码-->
        <input type="button" value="点我点我" onclick="alert('烂尾 Hello 方式1')" />
    </body>
</html>

可以将单行或少量 JS 代码写在 HTML 标签的事件属性中（以 on 开头的属性），比如放在上面的 onclick点击事件中。
这种书写方式，不推荐使用，原因是：可读性差，尤其是需要编写大量 JS 代码时，很难维护；引号多层嵌套时，也容易出错。
关于代码中的「引号」，在 HTML 标签中，我们推荐使用双引号，JS 中我们推荐使用单引号。

2、内嵌式（内联式）

我们可以在 HTML 页面的 <body> 标签里放入<script type=”text/javascript”></script>标签对，并在<script>里书写 JavaScript 代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <script type="text/javascript">
            <!--在这里写 js 代码-->
            alert('烂尾 hello2');
            console.log('LanWei hello 方式2');
        </script>
    </body>
</html>

text 表示纯文本，因为 JavaScript 代码本身就是纯文本。
可以将多行 JS 代码写到 <script> 标签中。
内嵌式 JS 是学习时常用的方式。

3、外链式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <!-- 外链式：引入外部的 js 文件：这个 utils.js 文件与当前的 html 文件，处于同一级目录 -->
        <script src="utils.js"></script>
    </body>
</html>

上面这段代码，依然是放到 body 标签里，可以和内嵌的 JS 代码并列。
上方代码的 script 标签已经引入了外部 JS 文件，所以这个标签里面，不可以再写 JS 代码。

不用想也知道第三种方式最常用，因为这样安排符合“高内聚，低耦合”的要求，很少有人会把一大堆JS代码塞到HTML文件里

关于window.onload：先加载，最后执行

上面的三种方式，有个共同的地方是：JS 代码都是写在</body>中的，准确来说，是在页面标签元素的后面，在 body结束标签的前面

浏览器会从上至下解析网页，当你需要通过JS操作页面上的标签元素的时候，假如将JS代码、<script>标签写到<head>标签中，或者写在页面元素的前面，那么这样的JS是无效的，因为标签元素在此时都还没来得及加载，自然无法操作。

但是！！！当你需要通过 JS 来操作界面上的标签元素的时候，如果实在想把 JS 写到<head>标签中，那么就必须用 window.onload 将 JS 代码进行包裹。代码格式如下：

<head>
  window.onload = function(){
    // 这里可以写操作界面元素的JS代码，等页面加载完毕后再执行
    ...
  }
</head>

window.onload的含义是：等界面上所有内容都加载完毕后（不仅要等文本加载完毕，而且要等图片也要加载完毕），再执行{}中的代码。做到了先加载，最后执行，也就是：等页面加载完毕后再执行。

感觉类似编译型语言了都（

我们可以根据具体需求，将 window.onload 写在 <head>标签中，或者写在<script>标签中。

JS一些简单的语法规则

1、JS对换行、缩进、空格都不敏感，每条语句以一个分号结尾

也就是说：

<script type="text/javascript">
    alert('今天蓝天白云');
    alert('我很高兴');
</script>

与下面的

1
2
3

<script type="text/javascript">
    alert('今天蓝天白云');alert('我很高兴');
</script>

注意！！！

每一条语句末尾千万要记得加分号！虽然分号不是必须假的，但是如果不添加分号，浏览器会自动添加分号，导致消耗一些系统资源和性能，甚至有可能添加错误。

2、所有的符号都是英文的AKA半角的

3、JS严格区分大小写

前端代码的注释

HTML

1	<!-- 我是 HTML 注释 -->

1 2	/* 我是 CSS 注释 / /CSS只有这一种注释方式，没有双斜杠的注释方式，并且注释要写在<style>标签里才算生效*/

// 我是注释

或

/*
	多行注释1
	多行注释2
*/