一、JavaScript编写方式
位置一：HTML代码行内（不推荐）
<!-- 方式一：行内编写 -->
<a href="javascript:alert('hello world')">hello world</a>
<!-- 方式二：行内编写，通过监听事件的方式 -->
<!-- href='#' 会导致点击后跳转到页面头部 -->
<a href="#" onclick="alert('hello world!')">hello world</a>
<!-- href="javascript:void(0)" 可以解决点击超链接跳转到页面头部的问题； void()是一个不会返回值的方法，它会执行方法内部的表达式 -->
<a href="javascript:void(0)" onclick="alert('hello world!')">hello world</a>
位置二：script标签中
<script src="./js/demo01.js"></script>
位置三：外部的script文件
- 需要通过script元素的
src属性来引入JavaScript文件
<script>alert("hello world1")</script>
二、noscript元素的使用
如果运行的浏览器不支持JavaScript, 那么我们如何给用户更好的提示呢?
- 针对早期浏览器不支持 JavaScript 的问题，需要一个页面
优雅降级的处理方案; - 最终，
<noscript>元素出现，被用于给不支持 JavaScript 的浏览器提供替代内容;
下面的情况下, 浏览器将显示包含在<noscript>中的内容:
-
浏览器不支持脚本;
-
浏览器对脚本的支持被关闭。
<noscript><h1>您的浏览器不支持JavaScript, 请打开或者更换浏览器~</h1>
</noscript>
三、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中
严格区分大小写；
后续补充：script元素还有defer、async属性，我们后续再详细讲解
四、JavaScript交互方式
JavaScript有如下和用户交互的手段：
- 最常见的是通过
console.log, 目前大家掌握这个即可;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* */</style>
</head>
<body><!-- <input type="text"> --><script>// 1.交互方式一: alert函数alert("Hello World");// 2.交互方式二: console.log函数, 将内容输出到控制台中(console)// 使用最多的交互方式console.log("Hello Coderwhy");// 编写的JavaScript代码出错了// message.length// 3.交互方式三: document.write()document.write("Hello Kobe");// 4.交互方式四: prompt函数, 作用获取用户输入的内容var result = prompt("请输入你的名字: ");alert("您刚才输入的内容是:" + result);</script>
</body>
</html>
1.Chrome的调试工具
在前面我们利用Chrome的调试工具来调试了HTML、CSS，它也可以帮助我们来调试JavaScript。
当我们在JavaScript中通过console函数显示一些内容时，也可以使用Chrome浏览器来查看：
另外补充几点：
- 如果在代码中出现了错误，那么可以在console中显示错误；
- console中有个
>标志，它表示控制台的命令行- 在命令行中我们可以直接编写JavaScript代码，按下enter会执行代码；
- 如果希望编写多行代码，可以按下
shift+enter来进行换行编写；
- 在后续我们还会学习如何通过debug方式来调试、查看代码的执行流程；
五、JavaScript语句和分号
语句是向浏览器发出的指令，通常表达一个操作或者行为（Action）。
- 语句英文是Statements；
- 比如下面这个就是一条
赋值语句；
var a = 1 + 2;
1 + 2 叫做表达式，一个为了得到返回值的计算式。
语句和表达式的区别在于，前者主要为了进行某种操作，一般情况下不需要返回值；后者则是为了得到返回值，一定会返回一个值。
通常每条语句的后面我们会添加一个分号，表示语句的结束：
- 分号的英文是semicolon
- 当存在换行符（line break）时，在大多数情况下可以省略分号；
- JavaScript 将换行符理解成“隐式”的分号；
- 这也被称之为
自动插入分号（Automatic Semicolon Insertion 简称ASI）；
分号表示一条语句的结束。JavaScript 允许省略行尾的分号。事实上，确实有一些开发者行尾从来不写分号。但是，由于下面要讨论的原因，建议还是
不要省略这个分号。
是否省略分号的讨论
六、JavaScript注释方式
在HTML、CSS中我们都添加过注释，JavaScript也可以添加注释。
JavaScript的注释主要分为三种：
- 单行注释
- 多行注释
- 文档注释（VSCode中需要在单独的JavaScript文件中编写才有效）
详情见代码
// 单行注释
/* 多行注释 */
/*** 文档注释*/
注意：JavaScript也不支持注释的嵌套
VSCode插件和配置
推荐一个VSCode的插件：（个人经常使用的）
- ES7+ React/Redux/React-Native snippets
- 这个插件是在react开发中会使用到的，但是我经常用到它里面的打印语句；
另外再推荐一个插件：
Bracket Pair Colorizer 2，但是该插件已经不再推荐使用了；- 因为VSCode已经内置了该功能，我们可以直接通过VSCode的配置来达到插件的效果；
- 如何配置呢？
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs":"active"
