JavaScript编写方法

1.HTML行内

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

效果如下：

 百度一下

如上段代码段，我们把js代码写到了a标签中，在我们之前的学习过程中，我们习惯于在body体内书写我们所需要的html代码，这种方法虽然可行，但是生硬，并且不利于别人阅读，在我们的潜意识中，a标签所包含的内容应为超链接，所以我并不推荐，但是这个是可以运行的。

2.script标签中

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

效果如下：

谷歌

相对于第一种书写方法来说，第二种较为清晰，很好的通过script标签将html部分和js内容分隔开，使得读者在浏览源代码时候相对舒服一点。对于新手而言，此方法比较好；但如果要写的是项目，而且是很长的大项目时，如果还是将js代码内嵌在html页面中的话，整篇页面的代码长度过长，不利于读者的阅读，新手（例如我）可以学习，但是不是太推荐。

3.外部的script文件

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

<script>
const  g=dpcument.querySelector(.'demo')
g.onlick()=function(){
alert('hello world');
}
</script>

如图所示，相对于前两种代码风格来看，第三种方法将js代码单独用一个文件来进行书写。这样书写的好处是：① 代码整体界面相对简洁 ② 便于后期维护项目，读者可以通过alt+鼠标左键快速查看js文件，此方法是大家应该要掌握的、