<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>load01</title>
<script type="text/javascript" src="demo.js"></script>
<script type="text/javascript">
alert("hello");
</script>
</head>
<body>
<!--
* js的嵌入方式
1.行内js,写到标签的事件属性中：结构与行为相耦合，不建议使用
2.内部js,写到script标签中，script标签放到head标签中，无法获取按钮对象
3.外部js,引入外部的js文件
* <script type="text/javascript" src="demo.js"></script>
* 如果script标签中有src属性，此时该标签的作用为引入外部js,不能在该标签中书写js代码。
* window.onload:当前文档完全加载后执行。（不可以写多个window.onload）
完全：指的是包含图片，音频，视频等
-->
<button id="btnId" onclick="alert('Hello');">SayHello</button>
</body>
</html>
window.onload = function(){
var btnEle = document.getElementById("btnId");
btnEle.onclick = function(){
alert("dd");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>load02</title>
<!-- 2.写到script标签中，script标签放到head标签中，无法获取按钮对象 -->
<script type="text/javascript">
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>load03</title>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
<!-- 3.写到script标签中，script标签放到body标签后面，不符合我们的习惯 -->
<script type="text/javascript">
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>load04</title>
<!-- 4.使用window.onload，完美解决此问题 -->
<script type="text/javascript">
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>load05</title>
<!-- 5.引入外部的js文件 -->
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>