JS 用法

HTML 页面使用 <script> 来添加 JS。

  • <head> 添加 JS。
  • <body> 添加 JS。
  • 外部引用 JS。

JS - <head> 添加 JS 添加

把 JS 添加在 <head>,document.write()会在页面加载时向 HTML 页面输出文本:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title> pangugle 教程</title>
		<script>
			document.write("<p>这是一个段落</p>");
		</script>
	</head>
	<body>
		pangugle 教程
	</body>
</html>

JS - <body> 添加

把 JS 添加在 <body>,页面加载时会执行。
innerHTML 会替换 id="demo" 的内容 :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title> pangugle 教程</title>
	</head>
	<body>
		<div id="demo"></div>
		<script>
			var demo = document.getElementById("demo"); //获取元素
			demo.innerHTML = "这是个节点"; //替换文本
		</script>
	</body>
</html>

可以将 JS 片段添加在 <body> 或 <head> 中,或者同时添加到两个部分中。但是常用的做法是添加在 <head> 。

JS - 外部引用

JS 文件的文件扩展名是 .js。
文件里面不再需要用 <script> 包含起来。

index.js :

document.write("<p>这是一个段落</p>");

index.html :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title> pangugle 教程</title>
		<script src="js/index.js"></script>
	</head>
	<body>
		pangugle 教程
	</body>
</html>

外部引用跟添加 JS 片段一样,可添加在 <body> 或 <head> 中,还可以添加多个 js 脚本。
实例的效果跟在 "<head> 添加" 的效果是一样的

JavaScript - 函数和事件

添加函数和事件能让用户与页面进行交互。如以下实例,点击按钮,页面会弹出'你好!':

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title> pangugle 教程</title>
		<script>
			function btnClick(){
				alert('你好!');
			}
		</script>
	</head>
	<body>
		<button onclick="btnClick()">按钮</button>
	</body>
</html>

onclick - 点击事件
btnClick 函数名