JS-2 JavaScript的编写方式及注意事项；noscript元素；JS的交互方式；Chrome的调试工具；JS语句和分号；JS的三种注释；VSCode插件和配置

1_JavaScript的编写方式

位置一：HTML代码行内（不推荐）

<a href="#" onclick="alert('百度一下')">百度一下</a>
<a href="javascript: alert('百度一下')">百度一下</a>

位置二：script标签中

  <a class="google" href="#">Google一下</a>

  <script>
    var googleAEl = document.querySelector(".google")
    googleAEl.onclick = function() {
      alert("Google一下")
    }
  </script>

位置三：外部的script文件. 需要通过script元素的src属性来引入JavaScript文件

  <a class="bing" href="#">bing一下</a>
  <script src="./js/bing.js"></script>

2_JavaScript编写的注意事项

注意一: script元素不能写成单标签

• 在外联式引用js文件时，script标签中不可以写JavaScript代码，并且script标签不能写成单标签；
• 即不能写成<script src="index.js"/>；

注意二: 省略type属性

• 以前的代码中，<script>标签中会使用 type=“text/javascript”；
• 现在不写这个代码，因为JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言；

注意三: 加载顺序

• 作为HTML文档内容的一部分，JavaScript默认遵循HTML文档的加载顺序，即自上而下的加载顺序；
• 推荐将JavaScript代码和编写位置放在body子元素的最后一行；

注意四: JavaScript代码严格区分大小写

HTML元素和CSS属性不区分大小写，但是在JavaScript中严格区分大小写；

3_ noscript元素

, 如何给用户提示

• 针对早期浏览器不支持 JavaScript 的问题，需要一个页面优雅降级的处理方案;
• 最终，<noscript> 元素出现，被用于给不支持 JavaScript 的浏览器提供替代内容;

下面的情况下, 浏览器将显示包含在noscript中的内容

• 浏览器不支持脚本;
• 浏览器对脚本的支持被关闭。

<noscript>
    <h1>您的浏览器不支持JavaScript, 请打开或者更换浏览器~</h1>
</noscript>

4_JavaScript的交互方式

常见的是通过console.log, 首先掌握这个;

5_Chrome的调试工具

在JavaScript中通过console函数显示一些内容时，可以使用Chrome浏览器来查看：

补充：

• 如果在代码中出现了错误，那么可以在console中显示错误；
• console中有个 > 标志，它表示控制台的命令行
• 在命令行中我们可以直接编写JavaScript代码，按下enter会执行代码； 如果希望编写多行代码，可以按下shift+enter来进行换行编写；
• 还有通过debug方式来调试、查看代码的执行流程；

6_JavaScript语句和分号

语句，向浏览器发出的指令，通常表达一个操作或者行为（Action）

• 语句英文是Statements；
• 比如前面编写的每一行代码都是一个语句，用于告知浏览器一条执行的命令；

通常每条语句的后面我们会添加一个分号，表示语句的结束：

• 分号的英文是semicolon
• 当存在换行符（line break）时，在大多数情况下可以省略分号；
• JavaScript 将换行符理解成“隐式”的分号；
• 这也被称之为自动插入分号（an automatic semicolon）；

推荐：

• 前期在对JavaScript语法不熟悉的情况推荐添加分号；
• 后期对JavaScript语法熟练的情况下，任意！

7_JavaScript的注释

在HTML、CSS中添加过注释，JavaScript也可以添加注释。

JavaScript的注释主要分为三种：

• 单行注释： 两个斜杠 //
• 多行注释： /* 注释内容 */
• 文档注释（VSCode中需要在单独的JavaScript文件中编写才有效）
  • 一般是在js文件中写，先写一个函数function，然后在函数外面写/**，就会触发文档注释

注意：JavaScript不支持注释的嵌套

8_VSCode插件和配置

推荐一个VSCode的插件：

• ES7+ React/Redux/React-Native snippets
• 这个插件是在react开发中会使用到的，用到它里面的打印语句；

// 方式一: log -> enter
console.log("Hello");
    
/*方式二： react插件 -> clg -> enter */
console.log("Hello");

另一个插件：

• Bracket Pair Colorizer 2，但是该插件已经不再推荐使用了；

• 因为VSCode已经内置了该功能，我们可以直接通过VSCode的配置来达到插件的效果；