JavaScript的编写方式
这里小编写一个简单代码，展示JavaScript三种编写方式
HTML代码行内（可以理解为内联样式）
a.第一种方式
一个123的网址，通过点击实现浏览器显示welcome字样提升（与浏览器进行交互），结果:
onclick:点击事件通过alert函数执行（）内为单引号否则与外面双引号冲突（报错）
b.第二种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
</style>
</head>
<body>
<a href="javascript:alert('welcome')">www.123.com</a>
</body>
</html>
这种方式了解即可，真正开发中已经不用这种方式写代码！
原因是:
1.这种代码阅读性太差了
2.当Javascript代码非常多的时候，用这种方式会非常繁琐，维护非常麻烦
编写在script元素之内
<script>
alert("hello word")
</script>
每一次运行代码/刷新网页都会显示如下图:
那如果想要将方式一中a元素实现点击显示呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style></style>
</head>
<body>
<a class="wl" href=""="#">www.123.com</a>
<script>
var wlAEI = document.querySelector(".wl")
wlAEI.onclick = function() {
alert("welcome")
}
</script>
</body>
</html>
就可以实现点击www.123.com，显示提示信息！！！
单独新建JS文件
需要通过script元素的src属性来引入JavaScript文件
noscript元素
若运行的浏览器不支持JavaScript，给用户怎么进行提升？
- 需要一个页面降级处理方案
2.noscript元素被用于JavaScript浏览器提供代替内容
这个代码Google浏览器支持JavaScript代码:
<a class=“wl” href=""="#">www.123.com
显示结果:
我们在练习noscript这类型元素时可以关闭掉Javascript支持功能！
关掉步骤:
显示结果不能正常运行，这种时候我们使用noscript:
这时候如果我们打开Google浏览器支持JavaScript功能，将不会显示这个p元素提示内容
Javascript编写注意事项
注意一: script元素不能写成单标签
在外联式引用js文件时，script标签中不可以写JavaScript代码，并且script标签不能写成单标签；
即不能写成script src=“index.js”/>；
也不允许既引用外部JS文件，同时编写新的JS代码
注意二: 省略type属性
在以前的代码中，
现在可不写这个代码了，因为JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言
javascript// An highlighted blockvar foo = 'bar';
注意三: 加载顺序
作为HTML文档内容的一部分，JavaScript默认遵循HTML文档的加载顺序，即自上而下的加载顺序；
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
</style>
</head>
<body>
<a class="wl" href=""="#">www.123.com</a>
<script>
alert("welcome")
</script>
</body>
</html>
先解析a元素，如果有别的再进行依次解析最终解析script元素，如果我现在将script放在a元素之前呢？
为null，前面没有wl标记的内容，所以它的加载方式为自上而下顺序。
那么有人会说:“设置过放在前面的JS元素啊”
那是因为有一个Window.onload = function (){
}回调函数进行页面回调加载，默认没有设置这种函数/这种特性，加载顺序自上而下
JavaScript可以放在HTML外面，也可以放在body与HTML中间，推荐将JavaScript代码和编写位置放在body子元素的最后一行；因为JavaScript为HTML文档的一部分！
注意四: JavaScript代码严格区分大小写
HTML元素和CSS属性不区分大小写，但是在JavaScript中严格区分大小写；
Javascript与浏览器交互方式
alert函数交互
文章前面我们提到了alert函数的交互方式，显示一个弹窗，可以告诉浏览器弹出的内容（浏览器默认提供的交互方式）并且接受一个参数
console.log交互
为什么叫consloge.log？
前面有一个对象，对象里面有一个函数或方法（是一种特殊的函数)（后面续写函数与方法区别)
console.log(“hello wlin”)
浏览器网页界面显示为空白，这种console.log交互方式在控制台展示
这也是开发中最多的交互方式，非常重要！
document.write()交互
在script元素中写入document.write(“hello wlin”)
运行，（它是将内容写入在网页/文档中)，我们以后在开发中可以用JS拿到服务器内容数据，输出在页面当中！（在Dom中在详谈）
prompt交互
前面提到的交互方式都是浏览器呈现出来的，我们没有办法接受浏览器给我们的内容，假如我们希望浏览器在页面某个位置输入一个内容，并且我们可以在程序中读取这个内容，我们首先想到的是input元素，但是必须要结合dom（后面dom再详谈）
我们使用prompt函数（浏览器提供的函数）
有一个输入框，我们怎么拿到数据呢？这个函数有返回值
var result = prompt（）
alert（“输入内容为:“ + rssult）点击确定进行提示
我们可以通过函数返回值可以获取到用户输入的内容
真实开发中交互方式二用的最多，别的很少见!
chrome调试工具
console.log不仅能进行打印，而且还能提示JavaScript代码报错（在控制台查看）
console有一个>符号，我们可以在这里直接编写JS代码（在这里简单编写代码，多行的一般不会在这里编写，想写多行代码时，这里不能直接敲回车，代码进行执行了，按住shift键+回车可以多行编写代码）
如何通过debug方式进行调试查看代码执行流程，后续文章详谈!
JavaScript语句（statements)和分号
向浏览器发出指令，表达一个操作或者行为（action）
编写的每一行代码都是一个语句，告知浏览器一条执行命令的行为。每一条语句后面添加一个分号（语句结束）存在换行符时，可以省略分号，JavaScript将换行符理解为隐式分号（自动插入分号）
有些公司加分号/有些不加分号
市场流行不加分号（加上分号也不会错）最终代码会用webpack进行打包（丑化），空格换行符等进行删掉，自动加上分号。看公司代码整体风格规范
学习JavaScript情况推荐加上分号!
JavaScript常见注释
- Ctrl+/ 单行注释
- /**/ 多行注释
- 文档注释
/** */在JS单独文件中编写会有JSdoc提示（vscode自动生成插件）
进行对参数注解，{}为参数类型注解，对文档整体做注解（第二行编写）
下面对say进行调用，vscode进行有文档注释，帮助我们后期编写代码高效，减少与团队成员沟通成本，代码标准规范 必须掌握，后期开发第三方库非常规范
vscode不支持在HTML中编写，单独支持JS单独文件
JavaScript不支持注释嵌套
vscode插件配置
补充console.log快速编写方式
- 直接写log+回车自动生成console.log()
- clg+回车自动生成
clg要安装一个插件:
在扩展搜索react，有一个ES7+React/Redux/React-Native snippets插件（有很多提示，后面大多数快捷可以使用这个插件）
编写css代码大括号｛} vscode有时不是很明显
Bracket Pair Colorizer 2，但是该插件已经不再推荐使用了；因为VSCode已经内置了该功能，我们可以直接通过VSCode的配置来达到插件的效果；
配置方式:
“editor.bracketPairColorization.enabled”: true,“editor.guides.bracketPairs”:“active”
在文件 首选项，点击右上角设置图标点击，会出来Json配置信息，将这个配置方式复制即可!
代码多的时候光标在哪一个区域，大括号有明显显示
