一. js 编写方式

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

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

• 位置二：script 标签中

  <a class="google" href="#">Google一下</a>
  
  <script>
    const googleEl = document.querySelector(".google")
    googleEl.onclick = function() {
      alert('Google一下')
    }
  </script>

• 位置三：外部的 script 文件

  需要通过 script 元素的 src 属性来引入 js 文件

  html

  <script src="./bing.js"></script>

  bing.js

  const bingEl = document.querySelector("bing")
  bingEl.onClick = function() {
    alert('Bing一下')
  }

二. noscript 元素

• 如果运行的浏览器不支持 js，那么我们如何给用户更好的提示呢?

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

• 下面的情况下，浏览器将显示包含在 <noscript> 中的内容:

  • 浏览器不支持脚本

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

    

三. js 编写的注意事项

• 注意一：script 元素不能写成单标签，加 / 可以，不推荐
  • 即不能写成 <script src="index.js"/>，虽然浏览器会解析，但是标准中是不支持的
• 注意二：在外联式引用 js 文件时，script 标签中不可以写 js 代码，会被引用的 js 文件给覆盖掉
• 注意三：省略 type 属性
  • 在以前的代码中，<script> 标签中会使用 type=“text/javascript”
  • 现在可不写这个代码了，因为 js 是所有现代浏览器以及 HTML5 中的默认脚本语言
• 注意四：加载顺序
  • 作为 HTML 文档内容的一部分，js 默认遵循 HTML 文档的加载顺序，即自上而下的加载顺序
  • 推荐将 js 代码和编写位置放在 body 子元素的最后一行
• 注意五：js 代码严格区分大小写
  • HTML 元素和 CSS 属性不区分大小写，但是在 js 中严格区分大小写
• 后续补充：script 元素还有 defer、async 属性，后续再详细讲解

四. js 交互方式

• js 有如下和用户交互的手段：

  • 最常见的是通过 console.log，目前大家掌握这个即可

    交互方法	方法说明	效果查看
    alert	接受一个参数	弹窗查看
    console.log	接受多个参数	在浏览器控制台查看
    document.write	接受多个字符串	在浏览器页面查看
    prompt	接受一个参数	在浏览器接受用户输入

五. Chrome 的调试工具

• 在前面我们利用 Chrome 的调试工具来调试了 HTML、CSS，它也可以帮助我们来调试 js

• 当我们在 js 中通过 console 函数显示一些内容时，也可以使用 Chrome 浏览器来查看：

  

• 另外补充几点：

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

六. js 语句和分号

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

  • 语句英文是 Statements

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

    alert('hello world');
    alert('你好啊');

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

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

• 推荐：

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

七. js 注释

• 在 HTML、CSS 中我们都添加过注释，js 也可以添加注释

• js 的注释主要分为三种：

  // 单行注释
  
  /*
  	多行注释
  */
  
  /**
   * 这是一个文档注释
   * @param {string} name 姓名
   * @param {number} age 年龄
   */
  function say(name, age) {}

  注意：

  • js 不支持注释的嵌套

八. Vscode 插件和配置

• ES7+ React/Redux/React-Native snippets

  • 这个插件是在 react 开发中会使用到的，但是咱们会经常用到它里面的打印语句 clg

• Bracket Pair Colorizer 2

  • 但是该插件已经不再推荐使用了

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

  • 如何配置呢？

    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs":"active"
    // vscode 设置 setting.json 文件中添加上述两段代码，即可