引入html中js有三种方式:
1、直接在元素标签中引入
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>html三种引入js的方式</title> </head> <body> <!--1、直接在标签属性中引入--> <h1 id="tips" onclick="console.log(id)">直接在标签属性中引入js</h1> <!--2、将js脚本写在script标签中,仅限当前页面使用--> <form action=""> <input type="text" name="username" placeholder="用户名"> <button type="button" onclick="check(username)">验证</button> </form> <script> function check(username){ if(username.value.length === 0){ alert("用户名空空如也"); }else{ alert('验证通过!'); } } </script> <!--3、将js作为外部文件引入--> <form action=""> <input type="text" name="username" placeholder="用户名"> <button type="button" onclick="check(username)">验证</button> </form> <script src="JS.js"></script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
引入的js.js文件如下
实例
function check(username){ if(username.value.length === 0){ alert("用户名不能为空"); }else{ alert('验证通过!'); } }
运行实例 »
点击 "运行实例" 按钮查看在线实例