CT的JavaWeb学习(1)——JavaScript

2 JavaScript

2.1 介绍

完成页面的数据验证。运行在客户端,需要运行浏览器来解析执行的JavaScript代码。

特点

  1. 交互性
  2. 安全性
  3. 跨平台性

2.2 与HTML结合方式

第一种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        alert("hello world");
    </script>
</head>
<body>

</body>
</html>

第二种方式

使用script标签引入单独的.js代码文件

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

    <script type="text/javascript" src="1.js"></script>
</head>
<body>

</body>
</html>

2.3 数据类型

类型

类型标签
数值number
字符串string
对象object
布尔boolean
函数function

特殊值

  • underfined:未赋初始值的数据默认值

  • null:空值

  • NAN:非数字

定义变量格式

var 变量名;

var 变量名 = 值;

等于与全等于

==:等于 简单的字面值的比较

===:全等于 除了字面值相等还需要数据类型相等

逻辑运算

且:&&

全为true,返回最后一个表达式的值

有false,返回第一个为false的表达式的值

或:||

全为false,返回最后一个表达式的值

返回第一个为true的值

取反:!

重点:在JS中所有变量都可以作为一个boolean变量去使用

0、null、undefined、""(空串)

认为是false

2.4 数组(重点)

同样具有java中的length属性

根据最大下标值自动扩容,未赋值的值=undefined

var 数组名 = []; //空数组
var 数组名 = [true,12,"abc"];

//遍历操作
for(var i = 0;i<arr.length;i++){
    alert(arr[i]);
}

2.5 函数(重点)

定义方式

方式一

//函数
function 函数名(形参){
    函数体;
}
//带返回值的函数
function 函数名(形参){
    函数体;
    return 返回值;
}

方式二

var 函数名 = function(形参){
    函数体;
}

注意:js不允许函数重载,若重载会直接覆盖掉上一次的定义。

函数的arguments隐形参数

类似Java的可变参数

Object …args

可以用arguments[]调用出来

2.6 自定义对象

Object形式的自定义对象

//定义
var 变量名 = new Object();
变量名.属性名 =;
变量名.函数名 = function(){};

//访问
变量名.属性/函数();

{}花括号定义方式

var 变量名= {
    属性名:值,//用逗号分隔
    函数名:function(){}
};

2.7 事件

常见事件

  • onload 加载完成事件:用于页面初始化
  • onclick 单击事件:常用于按钮点击响应
  • onblur 失去焦点事件:常用于失去焦点后验证其输入内容是否合法
  • onchange 内容发生改变事件:常用于下拉列表和输入框内容发生改变事件
  • onsubmit 表单提交事件:常用于表单提交前的验证

事件的注册

告诉浏览器事件发生后要执行哪些操作代码

静态注册:通过html标签事件属性直接赋予代码

动态注册:通过js代码得到标签dom对象,再通过dom对象.事件名赋予事件响应后的代码。

动态注册步骤

  1. 获取标签对象
  2. 标签对象.事件名 = function(){}

onload事件

静态注册

//直接写在body标签
<body  onload="alert('静态注册onload事件');">
    
</body>
//写在script标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">
        function onloadFun(){
            alert('静态注册onload事件');
        }
    </script>
</head>

<body onload ="onloadFun();">
    
</body>
</html>

动态注册

//动态注册
window.onload = function(){
	alert('动态注册onload事件');
}

onclick事件

静态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">
        function onclickFun(){
            alert('静态注册onclick事件');
        }
    </script>
</head>
<body>
    <button onclick="onclickFun();">按钮</button>
</body>
</html>

动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">
        window.onload = function(){
            //1.获取对象
            var btnobj = document.getElementById("btn01");
			//2.定义事件
            btnobj.onclick = function(){
                alert("动态注册onclick事件");
            }
        }
    </script>
</head>
<body>
    <button id="btn01">btn01</button>
</body>
</html>

onblur事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type = "text/javascript">
        //静态注册onblur
        function onblurFun(){
            //console是控制台对象,用于打印
            //log()用于答应输出
            console.log("静态注册失去焦点事件");
        }
        //动态注册onblur
        window.onload = function(){
            var passwordObj = document.getElementById("password");
            
            passwordObj.onblur = function(){
                console.log("动态注册失去焦点事件");
            }
        }
    </script>
</head>
<body>
    用户名:<input type="text" onblur="onblurFun();"><br/>
    密码:<input id="password" type="text" ><br/>
</body>
</html>

onchange事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">
        function onchangeFun(){
            alert("静态注册女神改变");
        }

        window.onload = function(){
            var selObj = document.getElementById("select01");

            selObj.onchange= function(){
                alert("动态注册男神改变");
            }
        }
    </script>
</head>
<body>
    请选择你心中的女神:
    <!-- 静态注册onchange事件 -->
    <select onchange="onchangeFun();">
        <option>-女神-</option>
        <option>a</option>
        <option>b</option>
        <option>c</option>
    </select>

    请选择你心中的男神:
    <!-- 动态注册onchange事件 -->
    <select id="select01">
        <option>-男神-</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</body>
</html>

onsubmit事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">
        function onsubmitFun(){
            alert("静态注册表单提交事件-发现不合法");
            return false;
        }

        window.onload = function(){
            var formObj = document.getElementById("form01");

            formObj.onsubmit = function(){
                alert("动态注册表单提交事件----发现不合法");
            }
			//return false可以阻止表单提交
            return false;
        }
    </script>
</head>
<body>
    <!-- return false 可以阻止表单提交 -->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="静态注册"/>
    </form>

    <form action="http://localhost:8080" id="form01">
        <input type="submit" value="动态注册"/>
    </form>
</body>
</html>

2.8 DOM模型

DOM全称Document Object Model文档对象模型,就是把文档中的标签、属性、文本,转换为对象来管理

Document对象(重点)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZHjPciTI-1645450167284)(C:\Users\Tao\AppData\Roaming\Typora\typora-user-images\image-20210923191526607.png)]

  1. Document管理了所有的HTML文档内容
  2. 树形结构,有层级关系
  3. 所有标签都对象化
  4. 我们可以通过document访问所有标签对象

标签对象化:用一个类来解释一个标签

Document对象的方法(重点)

getElementById()

返回指定id的第一个对象的引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">
        /*
        当用户点击了校验按钮,获取输入框中的内容,然后校验其是否合法
        校验规则:必须由字母、数字、下划线组成,并且长度是5到12位
        */
       window.onload = function(){
           var check = document.getElementById("button01");

           check.onclick = function(){
            // 先获取需要验证的对象
            var usernameObj = document.getElementById("username");
            // 获取要验证的属性
            var usernameText = usernameObj.value;
            
            // 正则表达式
            var patt = /^\w{5,12}$/;
            // test()方法用于测试某个字符串是否符合规则
            if(patt.test(usernameText)){
                alert("用户名合法!");
            }else alert("用户名不合法!");
           }
       }
    </script>
</head>
<body>
    用户名:<input id="username" type="text" value="123"/>
    <button id="button01">校验</button>
</body>
</html>

常见的验证提示效果

文字与图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">
        /*
        当用户点击了校验按钮,获取输入框中的内容,然后校验其是否合法
        校验规则:必须由字母、数字、下划线组成,并且长度是5到12位
        */
       window.onload = function(){
           var check = document.getElementById("button01");

           check.onclick = function(){
            // 先获取需要验证的对象
            var usernameObj = document.getElementById("username");
            // 获取要验证的属性
            var usernameText = usernameObj.value;
            
            // 正则表达式
            var patt = /^\w{5,12}$/;

            var usernameSpanObj = document.getElementById("usernameSpan");

            // test()方法用于测试某个字符串是否符合规则
            if(patt.test(usernameText)){
                // usernameSpanObj.innerHTML="用户名合法";
                usernameSpanObj.innerHTML="<img src=\"r.jpg\" width=\"18\" height=\"18\">";
            }else usernameSpanObj.innerHTML="用户名不合法!";
           }
       }
    </script>
</head>
<body>
    用户名:<input id="username" type="text" value="user"/>
    <span id="usernameSpan" style="color: red;"></span>
    <button id="button01">校验</button>
</body>
</html>
getElementsByName()

返回带有指定名称的对象集合

勾选多项时,全选全不选反选的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">
        function checkAll(){
            var hobbies = document.getElementsByName("hobby");
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked=true;
            }
        }
        function checkNone(){
            var hobbies = document.getElementsByName("hobby");
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked=false;
            }
        }
        function checkReverse(){
            var hobbies = document.getElementsByName("hobby");
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked=!hobbies[i].checked;
            }
        }
    </script>
</head>
<body>
    兴趣爱好:
    <input type="checkbox" name="hobby" value="cpp">C++
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="js">JavaScript
    <br/>
    <button onclick="checkAll();">全选</button>
    <button onclick="checkNone();">全不选</button>
    <button onclick="checkReverse();">反选</button>
</body>
</html>
getElementByTagname()

根据标签名获得集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">
        function checkAll(){
            var inputs = document.getElementsByTagName("input");
            for(var i =0;i<inputs.length;i++){
                inputs[i].checked = true;
            }
        }

    </script>
</head>
<body>
    兴趣爱好:
    <input type="checkbox" value="cpp">C++
    <input type="checkbox" value="java">Java
    <input type="checkbox" value="js">JavaScript
    <br/>
    <button onclick="checkAll();">全选</button>
</body>
</html>
  1. document三种查询方法优先级:Id/Name/TagName
  2. 以上方法都要在页面加载完成后运行才可以查询到

节点的属性和方法

节点就是标签对象

方法

getElementByTagName()

获取当前节点的指定标签子节点

appendChild(oChildNode)

添加一个子节点

属性

  • childNodes:获取所有子节点
  • firstChild
  • lastChild
  • parentNode
  • nextSibling:获取当前节点的下一个节点
  • previousSibling:获取当前节点的上一个节点
  • className:获取或设置标签的class
  • innerHTML:获取内容
  • innerText:获取文本
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值