Java前端-JavaScript的使用

风花雪夜尽风华

于 2024-07-29 19:00:58 发布

阅读量226

点赞数 8

文章标签：前端 java javascript

本文链接：https://blog.csdn.net/2301_79975618/article/details/140778226

版权

一：目录

1.javascript的介绍

2.ECMAScript的使用

3.DOM的使用

4.BOM的使用

5.JavaScript的使用案例

二：javascript的介绍

JavaScript是Web中的一种功能强大的脚本语言，常用于为网页添加各式各样的动态功能。它由ECMAScript，DOM，BOM三部分组成。

1.ECMAScript：Javascript的核心，它规定了JavaScript的编程语法和基础核心内容。

2.DOM：对页面上的各种元素进行操作。

3.BOM：它提供了独立于内容的，可以与浏览器窗口进行互动的对象。

三：ECMAScript的使用：

基本与Java一致，不再详细赘述。

四：DOM的使用：

1.js对象的创建：

<html>
    <head>
        <title>js对象的创建</title>
        <!--
        一：对象的创建：
            1.字面量形式创建：
                var 对象名={};//空对象
                var 对象名={
                    键:值,
                    键:值,
                    ...
                };
                赋值：对象名.键=值(如果建存在，则表示修改数据；如果不存在，则表示添加数据);
            2.通过new Object创建：
                var 对象名=new Object();
            3.通过Object对象的create方法创建：
                var 对象名=new Object(null);创建空对象；
                var 对象名=new Object(参考对象)创建非空对象
        二：对象的序列化与反序列化：
            //序列化对象,把一个JavaScript对象序列化为一个JSON字符串
            JSON.stringify(object);
            //反序列化对象：
            JSON.parse(jsonstr);
        -->
    </head>
    <body>
        <script>
            //1.字面量创建:
            var use={};//空对象
            use.uname="zhangsan";
            use.age=19;
            console.log(use);
            //非空对象的创建:
                var use1={
                uname:"zhangsan",//字符串类型
                age:18,          //数值类型
                sayhello:function(){//函数
                    console.log("hello");
                },
                animals:["cat","dog"],//数组
                iscool:true,    //boolean型
                dog:{           //对象
                    name:"二狗",
                    age:3
                }
            };
            console.log(use1);
            //2.通过new Object创建：
            var use2=new Object();
            use2.name="lisi";
            use2.age=19;
            console.log(use2);
            //3.通过Object对象的create方法创建：
            var use3=new Object(use2);
            console.log(use3.name);

            //序列化与反序列化
            var u=JSON.stringify(use1);
            console.log(u);
            var u1=JSON.parse(u);
            console.log(u1);
        </script>
    </body>
</html>

2.DOM节点的操作：

<html>
    <head>
        <title>DOM节点操作</title>
        <!-- 
        创建节点:对象为document
            createElement()     创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象。
            createTextNode()    创建一个文本节点，可以传入文本内容。
            innerHTML           向标签中添加HTML。
            innerText           向标签中添加文本。
            write()             将任意字符串插入到文档中。
        插入节点:对象为节点
            appendChild()       向元素中添加新的子节点，作为最后一个子节点。
            A.insertBefore(B,ref);      向指定的已有的节点之前插入新的节点(A表示父元素，B表示新子元素。ref表示指定子元素)
        节点的属性赋值:
            1.节点名.属性名=属性值;                 //不能设置自定义属性
            2.节点名.setAttribute(属性名,属性值);
        直接查找结点:对象为document
            1.getElementByName()
            2.getElementById()
            3.getElementByClassName()
            4.getElementByTagName()
        间接查找节点:对象为节点
            1.childNodes
            2.firstChild        第一个节点文本节点或元素节点
            3.lastChild
            4.nextSibling       元素的下一个兄弟节点
            5.parentNode
            6.previousSibling   元素的上一个兄弟节点
            7.firstElementChild 第一个元素节点
            8.lastElementChild  最后一个元素节点
        删除节点:对象为要删除节点的父节点
            removeChild()       从元素中删除子节点
        对节点设置CSS样式
            节点对象.style.属性=属性值
         -->
    </head>
    <body>
        <button onclick="a()">添加</button>
        <div id="d">

        </div>
        <script>
                function a(){
                var div=document.getElementById("d");    
                    //第一种方法
                // var pp=document.createElement("p");
                // var txt=document.createTextNode("这是一段文本");
                // pp.appendChild(txt);
                // div.appendChild(pp);
                    //第二种方法
                // var pp=document.createElement("p");
                // pp.innerHTML="这是一段文本";
                // div.appendChild(pp);
                    //第三种方法
                // var txt="<p>这是一个文本标签</p>";
                // div.innerHTML+=txt;
            }
        </script>  
    </body>
</html>

3.DOM节点操作：

<html>
    <head>
        <title>DOM表单操作</title>
        <!-- 
        获取表单:
            1.document.表单名称;
            2.document.getElementById(表单id);
            3.document.forms[表单名称];     //得到当前文档中的表单集合
            4.document.forms[索引];         //从0开始
        当使用name属性或者标签名称获取表单元素时都返回一个数组(因为name属性或标签名称可能不唯一)
        单选框或多选框的操作:
            1.根据name属性值获取元素集合;
            2.遍历集合，调用checked属性判断是否被选中
        下拉框的操作:
            1.获取下拉框;
            2.获取下拉框的所有下拉对象;
                下拉框对象.options;
            3.获取下拉框被选中项的索引
                下拉框对象.selectedIndex
            4.获取被选中项的值
                当通过options获取选中项的value属性值时,
                若没有value属性，取option标签中的值;
                .value|.text
            表单的提交:
                1.使用button按钮+onclick事件提交表单;
                2.使用submit按钮+onclick="return 函数()"事件提交表单
                    返回true|false
                3.使用表单属性onsubmit="return 函数()"与第二种用法一致。
         -->
    </head>
    <body>
        <form id="f" action=""  method="post">
            姓名:<input type="text" id="uname"><br>
            密码:<input type="password" id="pwd"><br>
            <input type="radio" name="gender" value="man">男</input>
            <input type="radio" name="gender" value="woman">女</input><br>
            <input type="checkbox" name="hobby" value="sing">唱歌
            <input type="checkbox" name="hobby" value="dance">跳舞
            <input type="checkbox" name="hobby" value="bask">打篮球<br>
            <select name="城市" id="chose">
                <option value="chengshi">城市</option>
                <option value="henan">河南</option>
                <option value="hebei">河北</option>
                <option value="beijing">北京</option>
            </select><br>
            <button  type="button" onclick="sub()">获取</button>
            <!-- <input type="button" onclick="sub()" value="提交"> -->
            <!-- <input type="submit" onclick="return sub()" value="提交"> -->
        </form>
        <script>
            function sub(){
                var radios=document.getElementsByName("gender");
                for(var i=0;i<radios.length;i++){
                    if(radios[i].checked)
                    console.log(radios[i].value);
                }

                var check=document.getElementsByName("hobby");
                for(var j=0;j<check.length;j++){
                    if(check[j].checked)
                    console.log(check[j].value);
                }

                var selects=document.getElementById("chose");  
                var choses=selects.options;
                var num=selects.selectedIndex;
                console.log(choses[num]);
                console.log(choses[num].innerText);
                var value=selects.value;
                console.log(value);
            }

            //表单提交1:
            // function sub(){
            //     var ff=document.getElementById("f");
            //     var uname=document.getElementById("uname").value;
            //     if(uname==null||uname.trim()=="")
            //     {
            //         alert("账号为空");
            //         return;
            //     }
            //     ff.submit();
            // }
            //表单提交2:
            // function sub(){
            //     var ff=document.getElementById("f");
            //     var uname=document.getElementById("uname").value;
            //     if(uname==null||uname.trim()=="")
            //     {
            //         alert("账号为空");
            //         return false;
            //     }
            //         return true;
            // }
        </script>
    </body>
</html>

4.事件绑定：

<head>
    <head>
        <title>js</title>
        <!-- 
        事件处理程序
            响应某个事件的函数就叫做事件处理程序
            1.HTML事件处理程序;
            2.DOM 0级事件处理程序
                将一个函数赋值给一个事件处理程序属性(只能为同一个元素的同一个事件设置同一个事件程序，重复就覆盖)
            3.DOM 2级事件处理程序
                addEventLister()
                    参数：
                        1.事件名;
                        2.处理事件的函数;
                        3.事件冒泡(false)或捕获(true)
                removeEventLister()
                    只能移除有事件名的
         -->
    </head>
    <body>
        1.HTML事件处理程序:
        <button name="单击" onclick=event1()>单击事件</button>
        <button name="双击" ondblclick=event2()>双击事件</button><br>
        2.DOM 0级事件处理程序:
        <button type="button" id="btn">0级事件</button><br>
        3.DOM 2级事件处理程序:
        <button name="2级事件处理程序">2级事件</button><br>
        <script>
            function event1(){
                alert("单击事件触发了");
            }
            function event2(){
                alert("双击事件触发了");
            }

            var event3=document.getElementById("btn");
            event3.onclick=function(){
                console.log("hello");
            }

            var event4=document.getElementsByName("2级事件处理程序");
            event4.addEventLister("mouseover",function(){   //无事件名不能被移除
                console.log("鼠标悬停...");
            })
        </script>
    </body>
</head>

五：BOM的使用：

1.BOM常用方法：

<html>
    <head>
        <title>BOM的使用</title>
        <!-- 
        1.window的open方法(打开新窗口)
        2.setTimeout定时器的使用(返回值为定时器的id值)(延迟操作)
        3.clearTimeout(id)清除定时器的使用
        4.setInterval定时器的使用(周期性执行脚本)
        5.clearInterval(id)清除定时器的使用
         -->
    </head>
    <body>
        <button id="open">打开百度</button><br>
        <button id="start">开始</button><br>
        <button id="end">停止</button><br>
        <button id="start2">start</button><br>
        <button id="end2">end</button><br>
        <h2 id="time"></h2>
        <h2 id="time2"></h2>
        <script>
        document.getElementById("open").onclick=function(){
            window.open("http://www.baidu.com","_self");
        }

        document.getElementById("start").onclick=a;
        var endid;
        function a(){
            var time=new Date().toLocaleTimeString();       //获取到当前时间
            document.getElementById("time").innerHTML=time; //将当前时间赋值给id为time的标签
            endid=setTimeout(a,1000);                       //每一秒钟重复赋值
        }

        document.getElementById("end").onclick=function(){
            clearTimeout(endid);
        }

        var end2id;
        document.getElementById("start2").onclick=function(){
            end2id=setInterval(b,1000);
        }
        function b(){
            var time=new Date().toLocaleTimeString();
            document.getElementById("time2").innerHTML=time;
        }

        document.getElementById("end2").onclick=function(){
            clearInterval(end2id);
        }
        </script>
    </body>
</html>

2.BOM常用对象的使用：

<html>
    <head>
        <title>BOM对象的使用</title>
        <!-- 
        1.history对象的使用
            back方法
            forward方法
            go方法
        2.location对象的使用
            href方法用来获取或设置整个URL
            reload方法刷新页面
            replace方法替换当前页面re
         -->
    </head>
    <body>
        <button id="btn" onclick="get()">获取</button>
        <button id="btn1" onclick="rush()">刷新</button>
        <button id="btn3" onclick="set()">设置</button>
        <button id="btn4" onclick="replace()">替换</button>
        <script>
            function get(){
                document.write(location.href);
            }
            function rush(){
                location.reload();
            }
            function set(){
                location.href="BOM对象.html";       //可以返回
            }
            function replace(){
                location.replace("js事件绑定.html");//不能返回
            }
        </script>
    </body>
</html>

六：JavaScript使用案例

实现向服务器提交表单前的校验：

<html>
    <head>
        <title>BOM对象的使用</title>
        <!-- 
        1.history对象的使用
            back方法
            forward方法
            go方法
        2.location对象的使用
            href方法用来获取或设置整个URL
            reload方法刷新页面
            replace方法替换当前页面re
         -->
    </head>
    <body>
        <button id="btn" onclick="get()">获取</button>
        <button id="btn1" onclick="rush()">刷新</button>
        <button id="btn3" onclick="set()">设置</button>
        <button id="btn4" onclick="replace()">替换</button>
        <script>
            function get(){
                document.write(location.href);
            }
            function rush(){
                location.reload();
            }
            function set(){
                location.href="BOM对象.html";       //可以返回
            }
            function replace(){
                location.replace("js事件绑定.html");//不能返回
            }
        </script>
    </body>
</html>

风花雪夜尽风华

关注

8
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Java前端-JavaScript的使用

JavaScript是Web中的一种功能强大的脚本语言，常用于为网页添加各式各样的动态功能。它由ECMAScript，DOM，BOM三部分组成。1.ECMAScript：Javascript的核心，它规定了JavaScript的编程语法和基础核心内容。2.DOM：对页面上的各种元素进行操作。3.BOM：它提供了独立于内容的，可以与浏览器窗口进行互动的对象。
复制链接

扫一扫