Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

一．JavaScript简介
1.JavaScript是一种弱类型的脚本编程语言
2.JavaScript是由三部分组成：ECMAScript、DOM、BOM。
3.ECMAScript规定了JavaScript的基础语法、数据类型。
4.DOM(Document Object Model)文档对象模型，主要用于操作HTML元素。
5.BOM(Browser Object Model)浏览器对象模型,用于与浏览器进行操作。
6.引入方式：
（1）在HTML内部的<script></script>中编写js代码
（2）引入外部js文件：
<script type="text/javascript" src="外部js路径" ></script>
二．JavaScript的数据类型与变量
1.数据类型：String,boolean,number,null,undefined,Object;
2.JavaScript的变量是弱类型的
3.声明变量的方式：
Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

4.判断变量的数据类型：typeof(变量名)
5.注意：判断数据类型时typeof并不是总有效，还可以使用instanceof关键字判断
Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

例1（定义变量并判断其类型）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button"  value="变量类型判断" onclick="typeofVar()"/>
    </body>
    <script>
        function typeofVar(){
            alert("欢迎学习JavaScript,下面进行数据类型判断:");
            var a="×××中央人民政府万岁！";
            var b=500;
            var flag=false;
            var x;
            var y=null;
            alert("变量a的数据类型是："+typeof(a));
            alert("变量b的数据类型是："+typeof(b));
            alert("变量flag的数据类型是："+typeof(flag));
            alert("变量x的数据类型是："+typeof(x));
            alert("变量y的数据类型是："+typeof(y));
            alert("变量z的数据类型是："+typeof(z));
        }
    </script>
</html>

运行结果：
Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

........................................
三．函数
1.自定义函数声明：
Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

例2：（函数的建立）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" value="函数计算方法：" onclick="varFunction(78,59)"/>
    </body>
    <script>
        function argumentsShow(){
            var sum=arguments[0]+arguments[1]+arguments[2];
            alert(arguments.length)
            alert(sum)
        }
        argumentsShow(10,20,23,54,54,65,7,89)
        function varFunction(x,y){
            alert("JavaScrip函数计算:"+x+"+"+y+"="+(x+y));
            alert("JavaScrip函数计算:"+x+"-"+y+"="+(x-y));
            alert("JavaScrip函数计算:"+x+"*"+y+"="+(x*y));
            alert("JavaScrip函数计算:"+x+"/"+y+"="+(x/y));
        }
    </script>
</html>

运行结果：
Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

注意：js在调用一个函数时,如果这个函数有参数，我们在调用时可以不传参，少传参，多传参，语法上不会报错，arguments属性可以接收传过来的参数，以数组形式保存
例3（arguments属性的使用）：
主要代码：

function argumentsShow(){
            var sum=arguments[0]+arguments[1]+arguments[2];
            alert(arguments.length)
            alert(sum)
        }
        argumentsShow(10,20,23,54,54,65,7,89)

运行结果：

Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

四．DOM操作HTML
可以通过document获取HTML里的元素节点（html标签），称为DOM对象；
1.document常用的方法：
（1）getElementById(“id值”)通过元素的ID获取DOM对象
（2）getElementsByName("name值") 通过元素的name属性值获取一组元素
（3）getElementsByTagName("tag名") 通过元素的标签名获取一组元素
2.DOM对象的常用方法：
（1）setAttribute("属性名","属性值"); // 设置DOM对象的属性
（2）getAttribute("属性名");
3.DOM对象的属性：
（1）DOM对象的innerHTML属性代表对应的html元素中包含的html内容
（2）DOM对象的其他属性与html元素中的属性对应
例4（DOM操作HTML:复选框函数）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h3>请选择你曾经工作过的公司</h3>
        <input type="checkbox" value="jindong" name="job" onchange="check(this)"/>京东<br />
        <input type="checkbox" value="Google" name="job" onchange="check(this)"/>谷歌<br />
        <input type="checkbox" value="ali" name="job" onchange="check(this)"/>阿里巴巴<br />
        <input type="checkbox" value="tenxun" name="job" onchange="check(this)"/>腾讯<br />
        <input type="checkbox" value="baidu" name="job" onchange="check(this)"/>百度<br />
        <input type="checkbox" value="360" name="job" onchange="check(this)"/>360<br />
        <input type="checkbox" value="xiaomi" name="job" onchange="check(this)"/>小米<br />
        <br />
        <input type="checkbox" id="all" onchange="checkAll(this)"/> 全选/全不选
    </body>
    <script>
        function check(obj){
            var flag=true;
            var jobs=document.getElementsByName("job");
            for(var i=0;i<jobs.length;i++){
                if(jobs[i].checked==false){
                    flag=false;
                    break;
                }
            }
            var all=document.getElementById("all");
            if(flag){
                all.checked=true;
            }else{
                all.checked=false;
            }
        }
        function checkAll(obj){
            var jobs=document.getElementsByName("job");
            if(obj.checked){
                for(var i=0;i<jobs.length;i++){
                    jobs[i].checked=true;
                }
            }else{
                for(var i=0;i<jobs.length;i++){
                    jobs[i].checked=false;
                }
            }
        }
    </script>
</html>

运行结果：
单选：
Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

手动全选：

Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等
点击全选：

Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等
全不选：

五．BOM操作浏览器
1.window对象是BOM的顶级对象（代表浏览器）
2.Location代表地址栏
（1）常用属性：location.herf=”要跳转的地址”;
（2）常用方法：location.reload()刷新页面;
3.history代表浏览器历史列表：
常用方法：
（1）history.back();//后退到上一个浏览页面;
（2）History.go(n);//n可以为正数或者负数;
例4（BOM操作浏览器展示）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BOM实现自动开关灯</title>
        <script type="text/javascript">
            function functionon(obj){
                obj.setAttribute("src","img/on.gif")
            }
            function functionoff(obj){
                obj.setAttribute("src","img/off.gif")
            }
        </script>
    </head>
    <body>
        <h3>利用BOM实现自动开关灯</h3>
        <img src="img/off.gif" onmouseover="functionon(this)" onmouseout="functionoff(this)"/>
    </body>
</html>

运行结果：
鼠标移上等后：
Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等
鼠标离开等后：

Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

例5（BOM中的location的使用）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        input{
            width: 80px;
            height: 20px;
        }
    </style>
    <script type="text/javascript">
    //网页跳转
        function widbaidu(){
            location.href="http://www.baidu.com"
        }
        function wid360(){
            location.href="http://www.360.com"
        }
        function widjindong(){
            location.href="http://www.jindong.com"
        }
        function widali(){
            location.href="http://www.alibaba.com"
        }
        function widtenxun(){
            location.href="http://www.qq.com"
        }
        function widreload(){
            location.reload();
        }
        //网页刷新      
    </script>
    <body>
        <input type="button" value="百度" onclick="widbaidu(this)"/><br />
        <input type="button" value="360" onclick="wid360(this)"/><br />
        <input type="button" value="京东" onclick="widjindong(this)"/><br />
        <input type="button" value="阿里巴巴" onclick="widali(this)"/><br />
        <input type="button" value="腾讯" onclick="widtenxun(this)"/><br />
        <br />
        <input type="button" value="刷新" onclick="widreload(this)"/>
    </body>
</html>

运行结果：

Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等
点击百度：

Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等
........................
例6（BOM历史记录的操作）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        input{
            width: 120px;
            height: 25px;
        }
        #wangzhi{
            width: 600px;
            height: 400px;
            border: 1px solid black;
        }
    </style>
    <body>
        <div id="wangzhi">
            <a href="http://www.baidu.com">百度</a>
            <a href="http://www.163.com">163</a>
            <a href="http://www.sina.com">新浪</a>
            <a href="http://www.jindong.com">京东</a>
            <a href="http://www.qq.com">腾讯</a>
        </div>
        <div id="history">
            <br />
            <input type="button" value="刷新" onclick="widreload(this)"/>&nbsp;&nbsp;&nbsp;
            <input type="button" value="跳转下一浏览界面" onclick="winhistory1(this)"/>&nbsp;&nbsp;&nbsp;
            <input type="button" value="返回上一浏览界面" onclick="winhistory2(this)"/>
        </div>
    </body>
    <script type="text/javascript">
        //网页刷新  
        function widreload(){
            location.reload();
        }
        //历史记录
        function winhistory1(){
            window.history.go(-1);
        }
        function winhistory2(){
            window.history.back();
        }
    </script>
</html>

运行结果：
Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

返回点击下一个按钮：
Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

六．JavaScript改变CSS样式
1.语法：
DOM对象.style.样式属性名=样式属性值
2.例：
（1）DOM.style.Visibility=”hidden”隐藏元素;
（2）DOM.style.visibility=”visible”显示元素;
例7（利用js改变CSS样式）：
外部CSS代码：

#wai{
    width: 590px;
    margin-left: 370px;
    height: 470px;
    border: 1px solid darkgray;
}
#shi{
    width: 590px;
    height: 180px;
    border: 0px solid black;
    text-align: center;
    font-size: 14px;
}
#tu{
    width: 590px;
    border: 0px solid black;
    height: 270px;
    background-image:url(../img/u=331322561,735315717&fm=27&gp=0.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.anniu{
    width: 590px;
    margin-left: 370px;
    height: 40px;
    border: 0px solid black;
    text-align: right;
}
input{
    margin-top: 15px;
}
img{
    display: none;
}
#shi1{
    width: 590px;
    height: 210px;
    border: 0px solid black;
    text-align: center;
    font-size: 14px;
}
#tu1{
    width: 590px;
    border: 0px solid black;
    height: 240px;
    background-image: url(../img/u=1873429136,1954675529&fm=27&gp=0.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
body{
    background-image: url(../img/u=2026787301,2338968328&fm=27&gp=0.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

外部Js代码：

//切换图片
var falg1=true;
function nexttu(){
    if(falg1){
        var tu= document.getElementById("tu");
        tu.style.backgroundImage="url(img/timg.jpg)"
        falg1=false;
    }else{
        var tu= document.getElementById("tu");
        tu.style.backgroundImage="url(img/u=331322561,735315717&fm=27&gp=0.jpg)"
        falg1=true;
    }       
}
//显示元素
function jsVisible(){
    var aVisible=document.getElementById("tu");
    aVisible.style.visibility="visible";
}
//显示元素2
function jsVisible1(){
    var aVisible=document.getElementById("tu1");
    aVisible.style.visibility="visible";
}

//隐藏元素
function jsHidden(){
    var aVisible=document.getElementById("tu");
    var img=document.getElementsByTagName("img");
    aVisible.style.visibility="hidden";
    img.style.display="block";
}
//隐藏元素2
function jsHidden1(){
    var aVisible=document.getElementById("tu1");
    var img=document.getElementsByTagName("img");
    aVisible.style.visibility="hidden";
    img.style.display="block";
}

Html代码1：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JS操作CSS样式</title>
    </head>
    <link rel="stylesheet" type="text/css" href="css/jscss.css"/>
    <script type="text/javascript" src="js/jscss.js" ></script>
    <body>
        <h2 style="text-align: center;">古诗文欣赏</h2>
        <div id="wai">
            <div class="nei" id="shi">
                    <h3>春望</h3>
                <hr/>       
                    <p>国破山河在，城春草木深。</p>
                    <p>感时花溅泪，恨别鸟惊心。</p>
                    <p>烽火连三月，家书抵万金。</p>
                    <p>白头搔更短，浑欲不胜簪。</p>
            </div>
            <div class="nei" id="tu">
            </div>
        </div>
        <div class="anniu">
            <a href="sjcss2.html"><input type="button" value="下一首" onclick="nextshi(this)"/></a>
            <input id="peitu" type="button" value="切换配图" onclick="nexttu(this)"/>
            <input type="button" value="显示配图" onclick="jsVisible()"/>
            <input type="button" value="隐藏配图" onclick="jsHidden()"/>
        </div>
    </body>
</html>

Html代码2：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JS操作CSS样式</title>
    </head>
    <link rel="stylesheet" type="text/css" href="css/jscss.css"/>
    <script type="text/javascript" src="js/jscss.js" ></script>
    <body>
        <h2 style="text-align: center;">古诗文欣赏</h2>
        <div id="wai">
            <div class="nei" id="shi1">
                    <h3 style="align-content: 18px;">饮酒</h3>
                <hr/>       
                    <p>结庐在人境，而无车马喧。</p>
                    <p>问君何能尔？心远地自偏。</p>
                    <p>采菊东篱下，悠然见南山。</p>
                    <p>山气日夕佳，飞鸟相与还。</p>
                    <p>此中有真意，欲辨已忘言。</p>
            </div>
            <div class="nei" id="tu1">
                <img src="img/下载.jpg" />
            </div>
        </div>
        <div class="anniu">
            <a href="jscss.html"><input type="button" value="上一首"/></a>
            <input id="peitu" type="button" value="切换配图" onclick="nexttu1()"/>
            <input type="button" value="显示配图" onclick="jsVisible1()"/>
            <input type="button" value="隐藏配图" onclick="jsHidden1()"/>
        </div>
    </body>
</html>

运行结果：

Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

点击切换配图：

Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

点击隐藏配图：

Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

点击显示配图：

Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

点击下一首：
Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

后续操作不再展示

七．JavaScript自定义对象
1.方式一：通过Object的构造函数从无到有地构建一个对象（“空手套白狼的”的方式）
格式语法：
Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

例8（自定义构造函数）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var per=new Object();
            per.name="×××";
            per.age="50";
            per.getName()=function(){
                return this.name;
            };
            alert("直接获取任务姓名："+per.name);
            alert("通过getName获取人物姓名:"+per.getName);
            alert("获取人物年龄："+per.getAge);
        </script>
    </head>
    <body>
    </body>
</html>

运行结果：

Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

2.方式二：通过定义一个函数作为“模板”，实例化一个对象：

Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

3.方式三：通过“字面量”方式定义对象：
var 对象名={key1:value1,key2:value2...};
如何遍历对象？
for...in语法糖
for(var key in per){
alert(key+"======>"+per[key]);
}

                                                                                                                【本次总结完毕】

Java学习总计（二十五）——JavaScript:变量，函数，DOM，BOM，以及操作CSS等

猜你喜欢