js的三种引入方式
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>js脚本的引入方式</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<!-- 1.直接在元素的事件方法属性上写js代码 -->
<h3 id="tips" onclick="console.log(this.id)">js很好玩</h3>
<!-- this可以省略，默认只想当前元素 -->
<form action="">
<input type="text" name="site" value="php中文网">
<button type="button" onclick="console.log(site.value)">显示类型</button>
<!-- 不同标签之间可以用标签的name属性连接 -->
<input type="text" name="username" placeholder="用户名">
<button type="button" onclick="check(username)">验证</button>
</form>
</body>
</html>
<!-- 2.将js脚本写script标签中，仅限当前页面使用 -->
<script>
function check(username){
if(username.value.length === 0){
alert("用户名空空如也！");
}else{
alert("验证通过");
}
}
</script>
<!-- 3.将js脚本接到外部的js文件中 -->
<!-- <script src="js.js"></script> -->外联时的外联文件的代码：
function check(username){
if(username.value.length === 0){
alert("用户名空空如也！");
}else{
alert("验证通过");
}
}点击 "运行实例" 按钮查看在线实例
直接在元素的事件方法属性上写js代码
将js脚本写script标签中，仅限当前页面使用
将js脚本接到外部的js文件中
