<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js的三种引入方式</title> </head> <body> <h1>js的三只引入方式</h1> <!-- 第一种 --> <h3 style="color:red">1.直接在元素的时间方法属性上写js代码</h3> <!-- 点击这几个字时,会弹出“哈哈哈哈哈”的字符串 --> <h3 id="tips" onclick="alert('哈哈哈哈哈')">Javascript很好玩</h3><br> <hr> <!-- 第二种 --> <h3 style="color:red">2.将js脚本写在script标签中,仅限当前页面使用</h3><br> <!-- 第一个按钮 --> <form action=""> <input type="text" name="sit" value="php中文网"> <button type="button" onclick="alert(sit.value)">显示站点</button> </form> <!-- 第二个按钮 --> <form action=""> <input type="text" name="username"> <button type="button" onclick="check(username)">登陆</button> </form> <!-- 写js脚本 --> <script> function check (username){ // 非空验证 // 验证username的值是否等于0 if(username.value.length===0){ alert('用户名不能为空') }else{ alert('通过') } } </script> <br> <hr> <!-- 第三种 --> <h3 style="color:red">3.导入外部样式表</h3> <form action="" > <input type="text" name="" value="" placeholder="我是猪"> <button>确定</button> </form> <!-- 引用外部样式表 --> <script src="js.js"></script> </body> </html>
点击 "运行实例" 按钮查看在线实例