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

点此查看所有教程、项目、源码导航本文目录1. 前言2. 如何引入JS代码3. 如何确定script标签的位置3.1 代码执行顺序3.2 script位置探讨3.3 script最佳位置4. 浏览器不支持JS的情况处理4.1 现状4.2 使用noscript标签5. 小结1. 前言上一篇给大家聊了很多关于JS的事情大家想必已经迫不及待想知道如何在网页中使用JS。本篇就来介绍下。2. 如何引入JS代码还记得如何在网页中使用CSS么可以这样!DOCTYPEhtmlhtmlheadmetacharsetutf-8stylebody{background-color:grey;color:white;}/style/headbody你好/body/html我们通过在头部放置了style标签然后就可以在style标签中编写CSS代码了。差不多的是我们可以通过在头部放置script标签来编写JS代码如下!DOCTYPEhtmlhtmlheadmetacharsetutf-8stylebody{background-color:grey;color:white;}/stylescriptalert(1);/script/headbody你好/body/htmlscript和/script中间就是我们编写的js代码了。alert(1);这句代码的意思是在网页上显示一个弹窗弹窗的内容是1。所以上面代码效果如下我们的JS已经在网页中成功运行了3. 如何确定script标签的位置解决了如何放入JS后。还需要进一步确认我们的script标签放在哪里是最合适的。3.1 代码执行顺序首先查看下面的代码!DOCTYPEhtmlhtmlheadmetacharsetutf-8title网页标题/titlescriptalert(1);/script/headbody你好scriptalert(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的前方。如下!DOCTYPEhtmlhtmlheadmetacharsetutf-8title网页标题/title/headbody你好scriptalert(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脚本时提示信息如下!DOCTYPEhtmlhtmlheadmetacharsetutf-8/headbodynoscript您好您的浏览器不支持或者禁用了JavaScript导致本网站某些功能无法正常使用请知晓。/noscript/body/html当浏览器没禁用JS时上述文本内容不会显示。当我们禁用了JS时上述内容就会在网页显示出来。大家可以使用Chrome浏览器尝试下。5. 小结本节重点是如何通过script标签将JS代码带入网页中这样我们才可以开始学习JS。