JavaScript基础①[JavaScript]

Web前端

发布于：2020年4月4日

JavaScript是干什么的？

1. JavaScript是干什么的？

HTML是基本的网页（文字，图片，视频）
CSS是通过布局和样式让网页更加美观
JavaScript是给网页添加动画和一些其他的交互事件，让网页变得更加活泼。

JavaScript跟编程语言差不多，不过它不是编程语言，它是脚本语言，它的运行不需要编译，直接由解释器解释执行。它也有变量，函数。

1.1 JavaScript可以完成的效果

数据校验（输入的密码，年龄，用户名是否符合要求）
图片轮播
广告弹框

1.2 JavaScript的特点

语法相对来说比较简单（弱类型的变量类型）
跨平台（JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持）

1.3 JavaScript代码在哪里书写

第一种方式：网页内（可以放在网页的任意位置）

<script    type = "text/javascript">
</script>

第二种方式：行内通过事件引入

第三种方式：外部引入方式

<script type = "text/javascript" src = "test.js"></script>

警告框：

window.alert('Hello World!');//alert('Hello World');

1.4 JavaScript中的所有数据类型

字符串（String）
数字 (number)
布尔(boolean)
数组(array)
对象(object)
空(null)
未定义(undefined)

输出的字符串里面包含单引号，则用双引号引用。

输出的字符串里面包含双引号，则用单引号引用。

或者使用转义字符。

1.5变量的定义

变量的定义用：var

var str = "Hello World!"
alert(str);

注册表单的创建，以及函数的应用，焦点事件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function check(){
            var username = document.getElementById("username");
            var usernameMsg = document.getElementById("usernameMsg");
            var emailMsg = document.getElementById("emailMsg");
            var passworldMsg = document.getElementById("passwordMsg");
            var repassworldMsg = document.getElementById("repasswordMsg");

            var    isPass = true;


                console.log(username);
                console.log(username.value);

                var length = username.value.length;
                if(length < 3 || length > 6)
                {
//                    alert("用户名长度必须是3 - 6位");
                    usernameMsg.innerText = "用户名长度必须是3 - 6位";
                    isPass = false;
                }else{
                    usernameMsg.innerText = "";
                    isPass = false;
                }

            var email = document.getElementById("email").value;

            var p = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;

            if(p.test(email) == false){
//                alert("邮箱格式不正确");
                emailMsg.innerText = "邮箱格式不正确!";
                isPass = false;
            }else{
                email.innerText = "";
            }


            var password = document.getElementById("password").value;
            var repassword = document.getElementById("repassword").value;
            if(password.length<6 || password.length>10)
            {
//                alert("密码必须在6 - 10位之间");    
                passworldMsg.innerText = "密码必须在6 - 10 位之间！";
                isPass = false;

            }else{
                if(password != repassword){
//                    alert("两次输入密码不一致");
                repassworldMsg.innerText = "两次输入密码不一致！";
                    isPass = false;
                }else{
                repassworldMsg.innerText = "";
                }
            }
//            if (isPass == false) {
//                return false;
//            } else{
//                return true;
//            }

            return isPass;


            }

                //onblur失去焦点开始调用
            function checkUsername(username){
                var usernameMsg = document.getElementById("usernameMsg");

                var length = username.value.length;
                if (length < 3 || length > 6) {
                    usernameMsg.innerText = "用户名长度必须是3 - 6位";
                } else{
                    usernameMsg.innerText = "";
                }
            }

            function checkEmail(email){
            var emailMsg = document.getElementById("emailMsg");
            var p = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;

            if(p.test(email.value) == false){
                emailMsg.innerText = "邮箱格式不正确!";
            }else{
                emailMsg.innerText = "";
            }
            }

            function checkPassword(){
            var password = document.getElementById("password").value;
            var repassword = document.getElementById("repassword").value;
            if(password.length<6 || password.length>10)
            {
//                alert("密码必须在6 - 10位之间");    
                passworldMsg.innerText = "密码必须在6 - 10 位之间！";
                isPass = false;

            }else{
                if(password != repassword){
//                    alert("两次输入密码不一致");
                repassworldMsg.innerText = "两次输入密码不一致！";
                    isPass = false;
                }else{
                repassworldMsg.innerText = "";
                }
            }
            }

            function checkPassword(){
            var password = document.getElementById("password")
            var passworldMsg = document.getElementById("passwordMsg");
            var repassword = document.getElementById("repassword").value;
            if(password.value.length<6 || password.value.length>10)
            {
//                alert("密码必须在6 - 10位之间");    
                passworldMsg.innerText = "密码必须在6 - 10 位之间！";
                isPass = false;

            }else{
                passworldMsg.innerText = "";
                if(password.value != repassword){
                passworldMsg.innerText = "两次输入密码不一致！";
                    isPass = false;
                }else{
                passworldMsg.innerText = "";
                }
            }

            }
        </script>



    </head>
    <body>

        <form action="register.jsp"  onsubmit="return check()">
            <table border="1" width="500px" height="500px">
                <tr>
                    <td colspan="2" align="center">注册</td>

                </tr>
                <tr align="center">
                    <td colspan="">用户名:</td>
                    <td align="left"><input type="text" name="" id="username" onblur="checkUsername(this)"/>
                    <font color="red" id="usernameMsg"></font>
                    </td>
                </tr>
                <tr align="center">
                    <td colspan="">邮箱：</td>
                    <td align="left"><input type="text" name="" id="email" onblur="checkEmail(this)" />
                    <font color="red" id = "emailMsg"></font>
                    </td>
                </tr>
                <tr align="center">
                    <td colspan="">密码：</td>
                    <td align="left"><input type="password" name="" id="password" onblur="checkPassword(this)" />
                    <font color="red" id="passwordMsg"></font>
                    </td>
                </tr>
                <tr align="center">
                    <td colspan="">重复密码：</td>
                    <td align="left"><input type="password" name="" id="repassword" onblur="checkPassword(this)"/>
                    <font color="red" id="repasswordMsg"></font>
                    </td>
                </tr>

                <tr align="center">
                    <td colspan="2"><input type="submit" name="注册"  /></td>                
                </tr>
            </table>
        </form>
    </body>
</html>