1.浏览器上输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1.html</title>
<script>
// // 浏览器上输出
document.write("js输出:hello world")
</head>
<body>
</body>
</html>
结果
2.弹出消息框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1.html</title>
<script>
// 弹出消息框
window.alert("弹出消息框")
</script>
</head>
<body>
</body>
</html>
结果
3.外部加载js,并解决相关js与页面加载先后的问题
由于网页页面是从上往下加载的,因此当js文件或代码需要操作html的boy中的html标签,且js代码或文件比这些标签先出现(即位于这些标签代码的上面),就会报空对象(null)错误,如下:
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1.html</title>
<!-- 加载外部脚本文件 -->
<!-- <script src="js/hello.js"></script> -->
</head>
<body>
<div id="div1"></div>
</body>
</html>
外部js文件hello.js:(也可以是内部或嵌入式的js)
// 编写脚本程序
//第一步:找到id为div1的标签
//let 定义一个变量
let div1 = document.querySelector("#div1");
//第二步:设置标签包裹的数据
//设置id为div1的标签的内容
div1.innerHTML = "hello world";
// 控制台输出
console.log(div1)
报错
解决方法一: 将js文件或js代码写在所操作html标签的后面,因为js代码可以出现在html页面的任何地方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1.html</title>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<!-- 加载外部脚本文件 -->
<script src="js/hello.js"></script>
结果正确:
解决方法二:
可以先等页面加载后再执行js文件,页面加载完毕会触发load事件,load事件只能注册一个,如果有多个,执行最后一个。
外部js文件hello.js:
window.addEventListener('load',function(){// 或简写成window.onload = function(){}
let div1 = document.querySelector("#div1");
div1.innerHTML = "hello world";
})
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1.html</title>
<!-- 加载外部脚本文件 -->
<script src="js/hello.js"></script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
运行结果正确: