HTML-CSS-JS学习-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_939317133/article/details/124046131

HTML+CSS+JS

系统结构

B / S架构：（以后主要走的方向是这个）

Browser / Server （浏览器 / 服务器）

优点：升级方便，只升级服务器端代码即可

缺点：速度慢，体验不好，界面不炫酷

C / S架构

Client / Server （客户端 / 服务器端）

优点：速度好，体验好，界面炫酷（娱乐型的系统多数是C/S架构）

缺点：升级麻烦，维护成本较高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>String练习</title>
</head>
<body>
<script type="text/javascript">
    var x="abc"
    alert(typeof x)
    alert(x.length)
    function User(a,b,c) {
        this.sno=a;
        this.sname=b;
        this.sage=c;
    }
    var u1=new User(111,"张三",25)
    alert(u1.sno)
    alert(u1.sname)
    alert(u1.sage)
    Product=function (pno,pname,price) {
        //属性
        this.pno=pno
        this.pname=pname
        this.price=price
        //函数
        this.getPrice=function () {
            return this.price;
        }
    }
    var pro=new Product(111,"香蕉",3.8)
    var pri=pro.getPrice()
    alert(pri)
    Product.prototype.getPname = function () {
        return this.pname
    }
    var pna = pro.getPname()
    alert(pna)
    alert(typeof null)//"Object"
    alert(typeof NaN)//"number"
    alert(typeof undefined)//"undefined"
    alert(null==NaN)//false
    alert(null==undefined)//true
    alert(NaN==undefined)//false
    </script>
</body>
</html>

JS中的事件

blur失去焦点
change下拉列表选中项改变，或文本框内容改变
click鼠标单击
dbclick鼠标双击
focus获得焦点
keydown键盘按下
keyup键盘弹起
load页面加载完毕
mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
reset表单重置
select文本被选定
submit表单提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS常用事件</title>
</head>
<body>
<script type="text/javascript">
    function sayHello() {
        alert("hello js")
    }
</script>
<input type="button" value="sdf" onclick="f1()"/>
<input type="button" value="hello1" id="01"/>
<input type="button" value="hello2" id="mybtn"/>
<input type="button" value="hello3" id="mybtn1"/>
<input type="button" value="hello4" id="mybtn2"/>
<script type="text/javascript">
    function f1() {
        alert("sad")
    }
    function doSome() {
        alert("do Some!")
    }
    //第一步：先获取这个按钮对象（document是全部小写，内置对象，可以直接用，document就代表整个HTML页面）
    var btnObj = document.getElementById("mybtn")
    //第二步：给按钮对象的onclick属性赋值
    btnObj.onclick = doSome
    function f() {
        alert("01")
    }
    var o = document.getElementById("01")
    o.onclick = f
    var mybtn1 = document.getElementById("mybtn1")
    mybtn1.onclick = function () {
        alert("test......")
    }
    document.getElementById("mybtn2").onclick = function () {
        alert("test22222")
    }
</script>
</body>
</html>

关于JS代码的执行顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于JS代码的执行顺序</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function ready() {
        var btn = document.getElementById("btn")
        btn.onclick = function () {
            alert("hello js")
        }
    }
    </script>
<input type="button" value="hello" id="btn" />
</body>
</html>

JS代码设置节点的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS代码设置节点的属性</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            var mytext = document.getElementById("mytext")
            mytext.type = "checkbox"
        }
    }
    </script>
<input type="text" id="mytext"/>
<input type="button" value="将文本框修改为复选框" id="btn"/>
</body>
</html>

DOM编程-获取文本框的value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM编程-获取文本框的value</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
        //var btnElt = window.document.getElementById("btn")
       var btnElt = document.getElementById("btn")
        alert(btnElt)//object HTMLInputElement
    }
    </script>
<input type="button" id = "btn" value="hello"/>
</body>
</html>

innerHTML和innerText操作div和spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML和innerText操作div和span</title>
    <style type="text/css">
        #div1{
            background-color: aquamarine;
            width: 300px;
            height: 300px;
            border: 1px black solid;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
        var btn1 = document.getElementById("btn1")
        btn1.onclick = function () {
            //第一步：获取div对象
            var divElt = document.getElementById("div1")
            //第二步：使用innerHTML属性设置元素内部的内容
            divElt.innerHTML = "<font color='red'>用户名不能为空！！！</font>"
        }
        var btn2 = document.getElementById("btn2")
        btn2.onclick = function () {
            //第一步：获取div对象
            var div = document.getElementById("div1")
            //第二步：使用innerHTML属性设置元素内部的内容
            div.innerText = "<font color='red'>用户名不能为空！！！</font>"
        }
    }
</script>
<input type="button" value="设置div中的内容(innerHTML)" id="btn1"/>
<input type="button" value="设置div中的内容(innerText)" id="btn2"/>
<div id="div1"></div>
</body>
</html>

DOM编程-关于正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM编程-关于正则表达式</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            var email = document.getElementById("email").value
            var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
            var ok = emailRegExp.test(email)
            if (!ok){
                document.getElementById("emailError").innerText="邮箱地址不合法"
            }else {
                document.getElementById("emailError").innerText="邮箱地址合法"
            }
        }
        document.getElementById("email").onfocus = function () {
            document.getElementById("emailError").innerText=""
        }
    }
    </script>
<input type="text" id="email"/>
<span id="emailError"style="color: #ff0000;font-size: 12px"></span>
<br>
<input type="button" value="验证邮箱" id="btn"/>
</body>
</html>

去除字符串的前后空白trim

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>去除字符串的前后空白trim</title>
</head>
<body>
<script type="text/javascript">
    //低版本的IE浏览器不支持字符串的trim()函数
    //自己对String类扩展一个全新的trim()函数
    String.prototype.trim = function(){
        return this.replace(/^\s+/,"").replace(/\s+$/,"")
    }
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            var username = document.getElementById("username").value
            //去除前后空白
            username = username.trim()
            //测试
            alert("--->" + username + "<----")
        }
    }
    </script>
<input type="text" id="username"/>
<input type="button" value="获取用户名" id="btn"/>
</body>
</html>

表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style type="text/css">
        span{
            color: red;
            font-size: 12px;
        }
        </style>
</head>
<body>
<script type="text/javascript">
    window.onload =function () {
        //给用户名文本框绑定blur事件
        var usernameElt = document.getElementById("username")
        //获取username的span标签
        var usernameErrorSpan = document.getElementById("usernameError")
        usernameElt.onblur = function () {
            //获取用户名
            var username = usernameElt.value
            username=username.trim()
            //判断用户名是否为空
            if (username=== ""){
                usernameErrorSpan.innerText = "用户名不能为空"
            }else {if (username.length<6||username.length>14){
                usernameErrorSpan.innerText = "用户名长度必须在【6-14】之间"
            }else {
            }
            }
        }
        //给username这个文本框绑定获得焦点事件
        usernameElt.onfocus =function () {
            //清空非法的value
            if (usernameErrorSpan.innerText!==""){
                usernameElt.value=""
            }else {
            }
            //清空span
            usernameErrorSpan.innerText = ""
            var regExp = /^[A-Za-z0-9]+$/
            var ok = regExp.test(username)
            if (ok){
            }
            else {
                usernameErrorSpan.innerText = "用户名只能由数字和字母组成"
            }
        }
        //获取密码错误提示的span标签
        var wdErrorSpan = document.getElementById("wdError")
        //获取确认密码框对象
        var userwd2Elt = document.getElementById("userwd2")
        userwd2Elt.onblur = function () {
            //获取密码和确认密码
            var userwdElt = document.getElementById("userwd")
            var userwd = userwdElt.value
            var userwd2 = userwd2Elt.value
            if (userwd != userwd2){
                //密码不一致
                wdErrorSpan.innerText = "密码不一致"
            }else {
                //密码一致
            }
        }
        //绑定focus事件
        userwd2Elt.onfocus = function () {
            if (wdErrorSpan.innerText != ""){
                userwd2Elt.value = ""
            }
            wdErrorSpan.innerText = ""
        }
        //给email绑定blur事件
        var emailElt = document.getElementById("email")
        //获取email的span
        var emailSpan = document.getElementById("emailError")
        email.onblur = function () {
            //获取email
            var email = emailElt.value
            var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
            var ok = emailRegExp.test(email)
            if (ok){
                //合法
            }else {
                //不合法
                emailSpan.innerText = "邮箱不合法"
            }
        }
        //给email绑定foucs
        emailElt.onfocus = function () {
            if (emailSpan.innerText != ""){
                emailElt.value = ""
            }
            emailSpan.innerText = ""
        }
        //给提交按钮绑定鼠标点击事件
        var submitBtnElt = document.getElementById("submitBtn")
        submitBtnElt.onclick = function () {
            //触发username的blur userwd2的blur email的blur
            usernameElt.focus()
            usernameElt.blur()
            userwd2Elt.focus()
            userwd2Elt.blur()
            emailElt.focus()
            emailElt.blur()
            if (usernameErrorSpan.innerText == "" && wdErrorSpan.innerText == "" && emailElt.innerText == ""){
                var userFormElt = document.getElementById("userForm")
                userFormElt.submit()
            }
        }
    }
    </script>
<form id="userForm" action = "http://localhost:8080/jd/save" method="get"><br>
    用户名<input type="text" name="username" id="username"/><span id="usernameError"></span><br>
    密码<input type="text" name="userwd" id="userwd"/><br>
    确认密码<input type="text" id="userwd2"/><span id="wdError"></span><br>
    邮箱<input type="text" name="email" id="email"/><span id="emailError"></span><br>
    <input type="button" value="注册" id="submitBtn"/><br>
    <input type="reset" value="重置"/>
</form>
</body>
</html>

完善了一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style type="text/css">
        span{
            color: red;
            font-size: 12px;
        }
        </style>
</head>
<body>
<script type="text/javascript">
    window.onload =function () {
        //给用户名文本框绑定blur事件
        var usernameElt = document.getElementById("username")
        //获取username的span标签
        var usernameErrorSpan = document.getElementById("usernameError")
        usernameElt.onblur = function () {
            //获取用户名
            var username = usernameElt.value
            username=username.trim()
            //判断用户名是否为空
            if (username=== ""){
                usernameErrorSpan.innerText = "用户名不能为空"
            }else {if (username.length<6||username.length>14){
                usernameErrorSpan.innerText = "用户名长度必须在【6-14】之间"
            }else {
            }
            }
        }
        //给username这个文本框绑定获得焦点事件
        usernameElt.onfocus =function () {
            //清空非法的value
            if (usernameErrorSpan.innerText!==""){
                usernameElt.value=""
            }else {
            }
            //清空span
            usernameErrorSpan.innerText = ""
            var regExp = /^[A-Za-z0-9]+$/
            var ok = regExp.test(username)
            if (ok){
            }
            else {
                usernameErrorSpan.innerText = "用户名只能由数字和字母组成"
            }
        }
        //获取密码错误提示的span标签
        var wdErrorSpan = document.getElementById("wdError")
        //获取确认密码框对象
        var userwd2Elt = document.getElementById("userwd2")
        userwd2Elt.onblur = function () {
            //获取密码和确认密码
            var userwdElt = document.getElementById("userwd")
            var userwd = userwdElt.value
            var userwd2 = userwd2Elt.value
            if (userwd != userwd2){
                //密码不一致
                wdErrorSpan.innerText = "密码不一致"
            }else {
                //密码一致
            }
        }
        //绑定focus事件
        userwd2Elt.onfocus = function () {
            if (wdErrorSpan.innerText != ""){
                userwd2Elt.value = ""
            }
            wdErrorSpan.innerText = ""
        }
        //给email绑定blur事件
        var emailElt = document.getElementById("email")
        //获取email的span
        var emailSpan = document.getElementById("emailError")
        email.onblur = function () {
            //获取email
            var email = emailElt.value
            var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
            var ok = emailRegExp.test(email)
            if (ok){
                //合法
            }else {
                //不合法
                emailSpan.innerText = "邮箱不合法"
            }
        }
        //给email绑定foucs
        emailElt.onfocus = function () {
            if (emailSpan.innerText != ""){
                emailElt.value = ""
            }
            emailSpan.innerText = ""
        }
        //给提交按钮绑定鼠标点击事件
        var submitBtnElt = document.getElementById("submitBtn")
        submitBtnElt.onclick = function () {
            //触发username的blur userwd2的blur email的blur
            usernameElt.focus()
            usernameElt.blur()
            userwd2Elt.focus()
            userwd2Elt.blur()
            emailElt.focus()
            emailElt.blur()
            if (usernameErrorSpan.innerText == "" && wdErrorSpan.innerText == "" && emailElt.innerText == ""){
                var userFormElt = document.getElementById("userForm")
                userFormElt.submit()
            }
        }
    }
    </script>
<form id="userForm" action = "http://localhost:8080/jd/save" method="get"><br>
    <table><tr>
            <th>用户名</th>
                <td><input type="text" name="username" id="username"/></td>
                <td><span id="usernameError"></span></td>
        </tr><br>
        <tr><th>密码</th><td><input type="text" name="userwd" id="userwd"/></td></tr><br>
        <tr><th>确认密码</th><td><input type="text" id="userwd2"/></td><td><span id="wdError"></span></td></tr><br>
        <tr><th>邮箱</th><td><input type="text" name="email" id="email"/></td><td><span id="emailError"></span></td></tr><br>

        <tr><td colspan="2" align="center"><input type="button" value="注册" id="submitBtn"/><input type="reset" value="重置"/></td></tr>
    </table>
</form>
</body>
</html>