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>
网友评论