js的书写格式
- 和CSS一样, JavaScript也有三种书写格式, 分别是"行内式", "内嵌式", "外链式"
- 和CSS一样, JavaScript三种书写格式中也推荐大家使用"外链式", 遵循结构、样式、行为分离
- 行内式格式(不推荐)
<div onclick="alert('it666')">我是div</div>
- 内嵌式格式
<body>
... ...
<script>
aleart('it666');
</script>
</body>
内嵌式注意点
- 默认情况下浏览器会从上至下的解析网页, 如果将JavaScript代码写在一对head标签中, 并且想通过JavaScript代码操作界面上的元素, 那么就不能直接书写JavaScript代码, 否则无效
(错误示范)
<head>
<script>
alert('it666');
</script>
</head>
- 如果想将JavaScript代码写到一对head标签中, 并且需要通过JavaScript代码操作界面上的元素, 那么就必须加上window.onload = function () {操作界面元素的JavaScript代码}
(正确示范)
<head>
<script>
windown.onload = function () {
alert('it666');
}
</script>
</head>
- 由于默认情况下浏览器会从上至下的解析网页, 所以想通过JavaScript代码操作界面上的元素, 只需要得到元素被加载解析之后操作就可以了, 所以我们还可以将JavaScript代码写在body结束标签的前面 (通常写法)
<body>
... ...
<script>
aleart('it666');
</script>
</body>
- 外链式格式
<script src="01-JavaScript书写格式.js"></script>
外链式注意点
如果是通过外链式导入的 .js文件, 并且需要在 .js文件中操作界面上的元素,
如果是在一对head标签中导入的 .js文件,那么也必须在.js文件中加上window.onload
如果是在body结束标签前导入的 .js文件,那么就不需要加上window.onload外链式的script代码块中不能编写js代码, 即便写了也不会执行
<script src="01-JavaScript书写格式.js">
alert("hello world"); // 不会被执行
</script>
- 由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件合成为一个JS文件,以提升网页的性能和加载速度
