HTML-JS-CSDN博客

本文链接：https://blog.csdn.net/javaren001/article/details/124724952

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

HTML-JS

一、JavaScript简介
二、JavaScript引入方式
- 2.1内部脚本
- 2.2 外部脚本
三、BOM
四表单验证小案例

一、JavaScript简介

JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。

JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？如改变页面内容、修改指定元素的属性值、对表单进行校验等，

二、JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：

内部脚本：将 JS代码定义在HTML页面中
外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

2.1内部脚本

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间
如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    alert("hello js1");
</script>
</body>
</html>

script代码可以放在HTML的任意位置

2.2 外部脚本

第一步：定义外部 js 文件。
第二步：在页面中引入外部的js文件
引入方式：

<script src="../js/demo.js"></script>

注意：

外部脚本不能包含 <script> 标签

在js文件中直接写 js 代码即可，不要在 js文件中写 script 标签
<script> 标签不能自闭合

在页面中引入外部js文件时，不能写成 <script src="../js/demo.js" />。

三、BOM

BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。
BOM 中包含了如下对象：

Window：浏览器窗口对象
window 对象是 JavaScript 对浏览器的窗口进行封装的对象。
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
History 对象是 JavaScript 对历史记录进行封装的对象。
Location：地址栏对象
Location 对象是 JavaScript 对地址栏封装的对象

下图是 BOM 中的各个对象和浏览器的各个组成部分的对应关系
在这里插入图片描述

3.1 Window对象函数

比较常用的函数：
在这里插入图片描述
setTimeout(function,毫秒值) : 在一定的时间间隔后执行一个function，只执行一次
setInterval(function,毫秒值) :在一定的时间间隔后执行一个function，循环执行

3.2 DOM的封装对象

封装的对象分为

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

3.3 获取 Element对象

Document 对象中提供了以下获取 Element 元素对象的函数

getElementById()：根据id属性值获取，返回单个Element对象
getElementsByTagName()：根据标签名称获取，返回Element对象数组
getElementsByName()：根据name属性值获取，返回Element对象数组
getElementsByClassName()：根据class属性值获取，返回Element对象数组

3.4 事件监听

HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的 按钮被点击、鼠标移动到元素之上、按下键盘按键 等都是事件。

事件监听是JavaScript 可以在事件被侦测到时==执行一段逻辑代码

3.5 事件绑定

JavaScript 提供了两种事件绑定方式：

方式一：通过 HTML标签中的事件属性进行绑定

<input type="button" οnclick='on()’>

方式二：通过 DOM 元素属性绑定

<input type="button" id="btn">
<script>
document.getElementById("btn").onclick = function (){
    alert("我被点了");
}
</script>

3.6 常见事件

onclick
鼠标单击事件
onblur
元素失去焦点
onfocus
元素获得焦点
onload
某个页面或图像被完成加载
onsubmit
当表单提交时触发该事件
onkeydown
某个键盘的键被按下
onmouseover
鼠标被移到某元素之上
onmouseout
鼠标从某元素移开

四表单验证小案例

环境准备：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>
<script>
   在此处书写JS代码
</script>
</body>
</html>

CSS：

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.reg-content{
    padding: 30px;
    margin: 3px;
}
a, img {
    border: 0;
}

body {
    background-image: url("../imgs/reg_bg_min.jpg") ;
    text-align: center;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    padding: 0;
    height: 90px;

}
.inputs{
    vertical-align: top;
}

.clear {
    clear: both;
}

.clear:before, .clear:after {
    content: "";
    display: table;
}

.clear:after {
    clear: both;
}

.form-div {
    background-color: rgba(255, 255, 255, 0.27);
    border-radius: 10px;
    border: 1px solid #aaa;
    width: 424px;
    margin-top: 150px;
    margin-left:1050px;
    padding: 30px 0 20px 0px;
    font-size: 16px;
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);
    text-align: left;
}

.form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {
    width: 268px;
    margin: 10px;
    line-height: 20px;
    font-size: 16px;
}

.form-div input[type="checkbox"] {
    margin: 20px 0 20px 10px;
}

.form-div input[type="button"], .form-div input[type="submit"] {
    margin: 10px 20px 0 0;
}

.form-div table {
    margin: 0 auto;
    text-align: right;
    color: rgba(64, 64, 64, 1.00);
}

.form-div table img {
    vertical-align: middle;
    margin: 0 0 5px 0;
}

.footer {
    color: rgba(64, 64, 64, 1.00);
    font-size: 12px;
    margin-top: 30px;
}

.form-div .buttons {
    float: right;
}

input[type="text"], input[type="password"], input[type="email"] {
    border-radius: 8px;
    box-shadow: inset 0 2px 5px #eee;
    padding: 10px;
    border: 1px solid #D4D4D4;
    color: #333333;
    margin-top: 5px;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
    border: 1px solid #50afeb;
    outline: none;
}

input[type="button"], input[type="submit"] {
    padding: 7px 15px;
    background-color: #3c6db0;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    min-width: 80px;
    border: none;
    color: #FFF;
    box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
}

input[type="button"]:hover, input[type="submit"]:hover {
    background-color: #5a88c8;
}

input[type="button"]:active, input[type="submit"]:active {
    background-color: #5a88c8;
}
.err_msg{
    color: red;
    padding-right: 170px;
}
#password_err,#tel_err{
    padding-right: 195px;
}

#reg_btn{
    margin-right:50px; width: 285px; height: 45px; margin-top:20px;
}

img：
在这里插入图片描述
JS代码书写：

<script>
    /*获取用户名输入框 元素对象*/
    var usernameE = document.getElementById("username");
    /*当用户名失去焦点的时候调用checkName方法*/
    usernameE.onblur=checkName;
    /*正则表达式，6到12位*/
    var reg = /^\w{6,12}$/;
    function checkName() {
        /*去除空格，获取输入框的文本*/
        var username = usernameE.value.trim();
        /*获取被隐藏的文本*/
        var errNameE = document.getElementById("username_err");
        /*对用户输入的文本进行判断*/
        var flag = reg.test(username);
        if(flag)
            errNameE.style.display='none'
        else
            /*如果输入的内容不满足正则表达式，显示被隐藏的文本*/
            errNameE.style.display='block'
        return flag
    }

    /*同用户名输入一样*/
    var passE = document.getElementById("password");
    passE.onblur=checkPass
    function checkPass(){
        var pass = passE.value.trim();
        var b = reg.test(pass);
        var errE = document.getElementById('password_err');
        if(b){
            errE.style.display='none'
        }else {
            errE.style.display = 'block'
        }
        return b
    }
    /*当用户名及密码的输入不正确时，表单无法提交*/
    var fromE = document.getElementById('reg-form');
    /*onsubmit 表单提交时触发 true提交，false不提交*/
    fromE.onsubmit =function () {
        return checkName() && checkPass()
    }
</script>