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文件
<scriptsrc="./demo/js"></script><script>const g=dpcument.querySelector(.'demo')
g.onlick()=function(){
alert('hello world');
}
</script>复制代码
如图所示,相对于前两种代码风格来看,第三种方法将js代码单独用一个文件来进行书写。这样书写的好处是:①
代码整体界面相对简洁 ②
便于后期维护项目,读者可以通过
alt+鼠标左键快速查看js文件,此方法是大家应该要掌握的