如何引入

我们说的很厉害的样子,让人不禁想要赶紧开始了,那么怎么把这么厉害东东放进我们的页面呢?和 CSS 类似的,也有三种方法:

外部文件

CSS 怎么引入来着?

<link rel="stylesheet" href="style.css">

JS 呢,不一样:

<script type="text/javascript" src="javascript.js">

我也不逐单词解释了,大家应该看得懂了。可能你觉得这个写法挺复杂的(并没有吧,不过我懒,我还真觉得复杂,就一直都没记住过……

HTML5 的写法:

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

好像终于就记得住了呢。反正代码复杂了用外部文件很正常,十分正常,所以,我觉得这是常用方式。

内部嵌入

CSS 也可以直接放在页面里边,是不是?

<style>
* {
  width: 100%
}
</style>

像这样,我们一般要求把 style 标签放在 head 标签里。不过其实你放在页面的任何部位都可以正常的起作用,但是……会很混乱啊。

那 js 怎么写呢?

<script>
  alert('Hello world!')
</script>

很像,对不对?

但是对于脚本,我们一般把它们放在 </body> 这个标签之前。因为这时候页面元素加载完了,我们才可以操作。如果放在 head 里面,就有可能在代码执行的时候,被操作的元素还没加载出来。就是你想分配工作,但是员工还没到齐,就会出问题。

你说前面引用外部文件的情况,也和这个一样的。但是一些基础的可以放在前面,比如某些库(后面会讲到),但是先加载又用不到,还占用加载时间的,就不如放在后面。这个以后记得区分就行,现在就都放在 </body> 这个标签之前就对了(不容易出问题。

元素内

这个我们用到的不多,这里只是说一下。反正不是某些特别限制的情况,我不喜欢也不推荐使用。

<button onclick="alert('喵喵喵')">点击按钮触发</button>

但是别说用不到,后期还是有类似用法的。

注释

注释分为两种:

多行注释

这个和 CSS 一样 /* 这里面是注释内容,可以换行 */

不过程序员大多同时强迫症,所以可能写的很好看。以及也会用多行注释来写对文档的说明、对函数的说明等等,都有了固定的格式,被称为 JSDoc,这个我们不多说,不过如果你想深入学习 JS ,非常建议认真学习一下各种相关规范。

单行注释

// 这样就是单行注释,仅双斜线至行尾的内容被注释

用来临时让某一句不起作用就很方便。

我是不是还没和你们说过,一般编辑器里都有注释的快捷键,比如在 VS Code 里面是:Ctrl+/。可以迅速将选中部分(或者选中行,或者当前行)进行注释/取消注释。

就这样吧,虽然这一章有点短,但是都是很有用的基础呀(强行找理由……

【本章助记卡片:卡片 for 第九十章