博客列表 >html中引入js的三种方式(时间:2019年1月18日 10:38)

html中引入js的三种方式(时间:2019年1月18日 10:38)

过儿的博客
过儿的博客原创
2019年01月18日 14:10:401232浏览

引入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('验证通过!');
    }
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ图片20190117120816.png

1.png

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议