实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js脚本的引入方式</title>
<link rel="stylesheet" href="style01.css">
</head>
<body>
<!-- 1.直接在元素的事件方法属性上写js代码 -->
<!-- onclick是click事件对应的方法,this默认指向当前元素对象,可以省略 -->
<h3 id="tips" onclick="alert(this.id)">JavaScript很好玩的</h3>
<h3 id="tips" onclick="alert(id)">JavaScript很好玩的</h3>
<!-- 在表单中,事件方法属性可以直接使用表单元素的name属性访问同一个form标签内的元素 -->
<form action="">
<input type="text" name="site" value="php中文网">
<button type="button" onclick="alert(site.value)">显示站点</button>
</form>
<!-- 更多情形下, 事件方法属性的值是一个JS函数(函数我们后面会专门讨论) -->
<form action="">
<input type="text" name="username" placeholder="用户名">
<button type="button" onclick="check(username)">验证</button>
</form>
<!-- 2.将js脚本写script标签中,仅限当前页面使用 -->
<script>
function check(username) {
// js中的注释写法: 单行
/*
该函数用来验证用户名是否为空
*/
if (username.value.length === 0) {
alert('用户名空空如也');
} else {
alert('验证通过');
}
}
</script>
<!-- 3. 将js脚本写到外部的js文件中 -->
<!-- 在页面放一个小球,然后让他运行起来,我们将对应的js脚本写到外部 -->
<div id="ball"></div>
<script src="js01.js"></script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
