
在HTML中使用JavaScript
在HTML中使用JavaScript的方法我们使用最多的有两种:嵌套在HTML内、引入外部文件
嵌套在HTML
<script>元素实现,像这样:
<!DOCTYPE html>
在<script>中定义了6个属性,其中有个属性已被废除(language)
- async: 可选,只是用与外部脚本文件,目的是告诉浏览器立即下载文件,但不会立即执行,知道网页内容完全解释完后再去执行脚本,但是如果存在多个脚本的时候,不会保证脚本被执行的顺序
- defer: 可选,只是用与外部脚本文件,目的是告诉浏览器立即下载文件,但不会立即执行,直到网页内容完全解释完后再去执行脚本,和async不一样的是,它保证脚本执行顺序,从上到下
- src: 表示需要执行的外部脚本的路径
- type: 必选属性,表示编码使用的脚本语言的内容类型(MIME类型),实际上,服务器在传送文件时使用的类型通常是application/javascript,但是这个type值很可能会被忽略,所以我在现在一直使用type="text/javascript",或者type="text/ecmascript"
- charset: 指定src指定文件的代码的字符集
注意
1、直接使用 <script>元素嵌套在页面内是,元素内的代码中不可以再次出现</script>的字符转,像这样:
<!DOCTYPE html>
如果代码中这样写的话,页面在解释showScript函数时,检测到</script>时就以为已经完全加载了脚本了,但实际并不是!淡然也有办法解决他,就是使用转义符:
<!DOCTYPE html>
2、元素<script>的使用位置
我们传统的使用方法就是在<head>内使用,但是还有一种使用方法,就是卸载<body>内-------
<!DOCTYPE html>
像上面写的话有个好处就是,页面不会因为未完全加载脚本而出现空白页面,也就给用户一种页面响应变快的感觉,也算是优化了!
引入外部文件
在页面内引入外部的脚本文件也是我们经常使用的方法,写法也很多讲究
<!DOCTYPE html>
defer属性,也就是延迟执行,页面会立即加载这两个脚本,但不会立即执行,等到解析到</html>后,才会按照顺序,先执行demo4.js然后执行 demo5.js。
<!DOCTYPE html>
当<script>标签内出现async时,加载的机制和defer差不多,执行在执行两个脚本的时候,并不保证demo4.js会在demo5.js之前执行。
<noscript>的出现
我们不能保证全部的浏览器都会支持脚本语言或者浏览器是否禁用了脚本,那<noscript>元素的出现就是为了在这种情况友好的化解这个“尴尬”:
<!DOCTYPE html>
以上写法就会在页面不支持或者已经禁用脚本的情况下告诉用户页面未能达到预期效果的原因。
总结
其实使用脚本的方法也没有硬性的约束,还是看具体的场景,不过使用外部脚本文件的开发者一般会注意到以下几点优势:
- 可维护
- 可缓存
- 适应未来
说下这个缓存,就是说,有些情况下,可能会有多个页面使用同一个脚本文件,此时只需一个页面加载下脚本,其他的页面就不用加载脚本了。
















