副队长JavaScript教程(2)–在网页中使用JS

点此查看所有教程、项目、源码导航

1. 前言

上一篇，给大家聊了很多关于JS的事情，大家想必已经迫不及待，想知道如何在网页中使用JS。

本篇就来介绍下。

2. 如何引入JS代码

还记得如何在网页中使用CSS么，可以这样：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><style>body{background-color:grey;color:white;}</style></head><body>你好</body></html>

我们通过在头部，放置了<style>标签，然后就可以在<style>标签中编写CSS代码了。

差不多的是，我们可以通过在头部，放置<script>标签，来编写JS代码，如下：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><style>body{background-color:grey;color:white;}</style><script>alert(1);</script></head><body>你好</body></html>

<script>和</script>中间，就是我们编写的js代码了。alert(1);这句代码的意思是在网页上显示一个弹窗，弹窗的内容是1。所以上面代码效果如下：

我们的JS已经在网页中成功运行了！

3. 如何确定script标签的位置

解决了，如何放入JS后。还需要进一步确认，我们的script标签，放在哪里是最合适的。

3.1 代码执行顺序

首先查看下面的代码：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>网页标题</title><script>alert(1);</script></head><body>你好<script>alert(2);</script></body></html>

我们设置了网页的标题，通过JS代码弹窗显示数字1，网页内容区域是你好。我们打开该网页，发现效果如下：

从上图我们可以清晰的发现，网页已经加载了标题，执行了alert(1);代码显示了弹窗，但是body区域的你好却没有显示出来。

这是为何呢？

其实非常简单，我们的浏览器在处理网页时，是自上而下，依次加载网页代码的，这点非常重要，所以在上面的例子中，先显示了网页，然后执行了alert(1);，此时由于我们没有点击确定，所以alert(1);并未执行完成，所以下面的body部分浏览器并未加载。所以在点击确定之前，body区域是无法显示内容的。

3.2 script位置探讨

根据上面的讨论，如果将script标签放到head区域，则会导致网页先加载script里面的代码，然后再加载body区域。

如果script里面的代码比较多，执行时间比较长，那么body就会等待一段时间才能显示出来。

此时网页会显示一片空白，用户体验无疑非常糟糕。

所以我们推荐的做法是：将script标签放到body内部最后边，也就是贴近</body>的前方。

如下：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>网页标题</title></head><body>你好<script>alert(1);</script></body></html>

我们预览该代码，可以发现在显示弹窗前，已经加载body的你好了。

3.3 script最佳位置

网页代码都是自上而下，浏览器一次加载执行。

所以script放置的最佳位置，是body的最后头。

4. 浏览器不支持JS的情况处理

4.1 现状

就目前的现状而言，不支持JS的浏览器，几乎已经找不到了。但是也不排除这种情况的存在性。

另外比较常见的情况是，浏览器禁用了JS功能，这个还是比较常见的。

例如在Chrome浏览器中，如下图，选择【不允许网站使用JavaScript】即可禁用JS：

那么，当浏览器不支持、或者禁用了JS时，咋办呢。

此时我们应该至少提示用户，您现在浏览器不支持或者禁用了JS。

4.2 使用noscript标签

我们可以使用noscript标签，来加载网页不支持JS脚本时提示信息，如下：

<!DOCTYPEhtml><html><head><metacharset="utf-8"></head><body><noscript>您好，您的浏览器不支持或者禁用了JavaScript，导致本网站某些功能无法正常使用，请知晓。</noscript></body></html>

当浏览器没禁用JS时，上述文本内容不会显示。当我们禁用了JS时，上述内容就会在网页显示出来。

大家可以使用Chrome浏览器尝试下。

5. 小结

本节重点是如何通过script标签，将JS代码带入网页中，这样我们才可以开始学习JS。