第二章在html中使用js

1在html 中的使用js有三种方法

1.1 在html 用script 标签直接把js代码加到html文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        alert('hello world')
    </script>
</body>
</html>

1.2 在html标签用事件加入js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body onload="alert('hello world')">
</body>
</html>

1.3 用script 标签加入外部的js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body >
<script src="../a.js"></script>  
</body>
</html>

// a.js 
alert('hello world')

1.4三种方式的区别

1.2 和 1.1 的好处就是js代码直接在文档中不会发出http请求，但是却不能缓存下来了，每一次请求都要加载一次， 1.3 就正好和上面相反的， 1.3会发出http请求，但是可以被浏览器缓存下来，
1.2 方式不能加载很多的js代码不然后面就无法维护了，而1.3 和1.1 没有这个问题

1.5 js 代码加入的位置

js 代码一般在三个位置加入的，
1.5.1 在head标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <script src="../a.js"></script>  
</head>
<body >

</body>
</html>


// a.js 
alert('hello world')

但是这种方式在js 中是无法访问到dom属性的，因为浏览器的在加载完成js 就马上执行了，但是此时html还没有加载出来，所以无法访问到dom的，解决的方法就是用body.onload事件加载要访问dom的js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../a.js"></script>  
</head>
<body >
  <div id="data">123456</div>
</body>
</html>


// a.js 
var div = document.getElementById('data'); // null 拿不到id为data的dom属性
console.log(div) // null
// 解决的方法 用onload事件加载要访问dom属性的js代码
document.body.onload = function() {
  var div = document.getElementById('data'); // 可以拿到dom属性
  console.log(div) // dom 对象
}

还有一个问题就是浏览器在加载js代码的时候是会阻塞html 代码的加载的，要等js 加载完成才会去加载html的，所以如果js代码量很大或用户的网络很慢就会出现浏览器的白屏了，这样用户体验很不好，所以一般不会放大量的js代码在head标签中，放也是放很少量的js代码

1.5.2 在html事件中加入js代码

这种方式同样会存在上面1.5.1的问题，而且在这种方式，还会更难维护了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        
</head>
<body >
  <div id="data" onclick="var div = document.getElementById('data'); var conent = document.getElementById('conent'); conent.innerHTML = div.innerHTML">123456</div>
  <div id= "content"></div> 
</body>
</html>
// 上面的只是很少的功能， 如果再多点就基本无法维护了

1.5.3 在body 最后面用script标签加入js代码

这种方式没有上面两种的问题，因为js代码是在css 和html的后面所以不会因为加载js代码而出现白屏了，但是在html的图片很大或者加载其他大的资源的时候，会出现js还没有加载完成，而html代码和css代码加载完成了，做成的页面假死情况（轮播图不动，按钮点击没效果的情况因为js还没有加载回来，浏览器在加载大的图片和资源）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        
</head>
<body >
  <div id="data">123456</div>
  <script src="../a.js"></script>

</body>
</html>


// a.js 
var div = document.getElementById('data'); // null 拿不到id为data的dom属性
console.log(div) // null
// 解决的方法 用onload事件加载要访问dom属性的js代码
document.body.onload = function() {
  var div = document.getElementById('data'); // 可以拿到dom属性
  console.log(div) // dom 对象
}

1.6 noscript 标签

因为浏览器有一个禁用js脚本的选项，所以就有了noscript标签，这个标签是用来在禁用js脚本的浏览器提示用户的，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        
</head>
<body >
  <div id="data">123456</div>
  <script src="../a.js"></script>
  <noscript>不让js运行不给用， 哈哈哈哈</noscript>
</body>
</html>

最后编辑于：2017.12.08 21:32:54

第二章 在html中使用js