JavaScript DOM 学习(1) Hello World

最新推荐文章于 2022-02-17 09:36:37 发布

韦轩

最新推荐文章于 2022-02-17 09:36:37 发布

阅读量607

点赞数 1

分类专栏： JavaScript DOM

本文链接：https://blog.csdn.net/weiyongxuan/article/details/44684869

版权

JavaScript DOM 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、JavaScript弹窗式的HelloWorld

<!DOCTYPE html>
<html>
<head>
<title>TestJs.html</title>
</head>
<script type="text/javascript">
	//1.当整个html文档完全加载成功后触发window.onload事件
	//当事件触发后，执行函数体里面的内容
	window.onload = function() {
	//2.获取所有的button结点，并取得第一个元素
		var btn = document.getElementsByTagName("button")[0];
		//3.为button的onclick事件赋值，当点击button时，执行函数体
		btn.onclick = function() {
		//4.弹出对话框hello world
			alert("Hello World !");
		}
	}
</script>
<body>
	<button>clickme</button>
</body>
</html>

二、JS代码写在页面的那个位置？

<!DOCTYPE html>
<html>
<head>
<title>TestJs.html</title>
</head>
<body>
<!-- 更简单的写法，但是不利于代码维护，js代码与html的耦合度太高-->
	<button οnclick="alert('Hello World !')">clickme</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>TestJs.html</title>
<script type="text/javascript">
//什么时候写JS代码？
//写在title的位置，html文档没有完全加载，无法获取
	window.onload = function() {
		var btn = document.getElementsByTagName("button")[0];
		btn.onclick = function() {
			alert("Hello World !");
		}
	}
</script>
</head>

<body>
	<button>clickme</button>
</body>
</html>
<script type="text/javascript">
//什么时候写JS代码？
//写在html代码的最后位置，可以正常获取，但是不符合写js代码的习惯
	window.onload = function() {
		var btn = document.getElementsByTagName("button")[0];
		btn.onclick = function() {
			alert("Hello World 2!");
		}
	}
</script>

window.onclick事件在整个html文档被加载完全后执行，所以，一般的js代码写在title标签之后的window.onclick函数体内

韦轩

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM 学习(1) Hello World

一、JavaScript弹窗式的HelloWorldTestJs.html //1.当整个html文档完全加载成功后触发window.onload事件 //当事件触发后，执行函数体里面的内容 window.onload = function() { //2.获取所有的button结点，并取得第一个元素 var btn = document.getElementsByTag
复制链接

扫一扫

专栏目录