前言:"人生最大的喜悅是每個人都說你做不到，你卻完成它了！"你好！我是夢陽辰！快和我一起學習起來吧!

如果你沒接觸過JavaScript：以下文章對你有幫助。

文章目錄

01.複選框的全選和取消全選

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>複選框</title>
</head>
<body>
    <script type="text/javascript" >
        window.onload=function () {
            var ff=document.getElementById("first");
            var cc=document.getElementsByName("Meng1");
            ff.onclick=function () {
                for( var i=0;i<cc.length;i++){
                    cc[i].checked=ff.checked;
                }
            }

            var all= cc.length;
            for(var i=0;i<cc.length;i++){
                cc[i].onclick=function () {
                    var checkedCount=0;
                    for(var i=0;i<cc.length;i++){
                        if(cc[i].checked){
                            checkedCount++;
                        }
                    }
                    ff.checked=(all==checkedCount);'
                }
            }

        }
    </script>
    <input type="checkbox" id="first"/>全選<Br>
    <input type="checkbox" name="Meng1" value="basketball"/>籃球<Br>
    <input type="checkbox" name="Meng1" value="football"/>足球<Br>
    <input type="checkbox" name="Meng1" value="badminton"/>羽毛球<Br>

</body>
</html>

2.獲取下拉列表選中項的value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>獲取下拉列表選中項的value</title>
</head>
<body>

   <!-- <select onchange="alert(this.value)">
        <option value="">&#45;&#45;請選擇省份</option>
        <option value="jiangxi">江西省</option>
        <option value="zhejiang">浙江省</option>
        <option value="fujiang">福建省</option>
    </select>-->


<!--或者-->
    <script>
        window.onload=function () {
            var fisEle=document.getElementById("fis");
            fisEle.onchange=function () {
                alert(this.value)
            }
        }
    </script>
   <select id="fis">
       <option value="">--請選擇省份</option>
       <option value="jiangxi">江西省</option>
       <option value="zhejiang">浙江省</option>
       <option value="fujiang">福建省</option>
   </select>
</body>
</html>

關於選擇一個位置，而關聯多個市區的問題

返回一個List集合，List集合響應瀏覽器，瀏覽器在解析集合轉換成一個新的下拉列表。

動態地獲取時間：
setInterval函數可以間隔一段時間調用函數

clearInterval函數可以取消上述函數的作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>顯示網頁時鐘</title>
</head>
<body>
    <script type="text/javascript">
         /*Js中內置的支持類：Date,可以用來獲取時間/日期*/
        //獲取系統當前時間
        var nowtime =new Date();
        //輸出
        //document.write(nowtime);
        nowtime=nowtime.toLocaleDateString();
        document.write(nowtime);
        document.write("<br>");//注意script腳本不能直接書寫，得輸出
        //當以上個是不是想要的結果時，可以通過日期獲取年月日等信息，定製日期格式
        var t = new Date();
        var year=t.getFullYear();
        var month=t.getMonth();//0-11
        var dayWeek = t.getDay();//獲取一週得第幾天（0-6）
         var day =t.getDate();//獲取日
        document.write(year+"年"+(month+1)+"月"+day+"日");
        document.write("<br>");

        //怎麼獲取時間戳
        var times =t.getTime();
        document.write(times);

        //顯示系統時鐘

    </script>

    <script type="text/javascript">
        function displayTime() {
             var time =new Date();
             var strTime=time.toLocaleString();
             document.getElementById("timeDiv").innerHTML=strTime;
        }
        //每隔一秒嗲要dispalyTime()函數
        var v;
        function start(){
            v=window.setInterval("displayTime()",1000);//setInterval間隔一段時間調用函數
        }
        function stop() {
            v=window.clearInterval(v);
        }
    </script>
    <br><br>
    <input type="button" value="顯示系統時間" onclick="start()"/>
    <input type="button" value="停止系統時間" onclick="stop()"/>
    <div id="timeDiv"></div>


</body>
</html>

02.JS的內置類Array

JS的數組類似python的列表。可以放數據的多種類型。自動擴容。

join（）函數：將數組中的元素以括號中的字符連接起來。

push（）函數，數組末尾添加元素。

pop（）函數:彈出第一個元素。

可以看出JS中的數組可以自動地模擬棧數據結構，先進先出。

reverse（）函數：數組反轉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>內置類</title>
</head>
<body>
    <script type="text/javascript">
        var arr=[];
        alert(arr.length);

        //或者
        var arr1=[1,4,false,"abc"]
        alert(arr1.length);

        //或者
        var a1=new Array(3);//代表存儲的長度

        //或者
        var a2=new Array(3,2);//代表存儲的數據
        alert(a2.length)
    </script>
</body>
</html>

03.BOM編程

1.open和close

1.BOM編程中，window對象是頂級對象，代表瀏覽器窗口。

2.window有open和close方法，可以開啓窗口和關閉窗口。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>open和coles</title>
</head>
<body>
    <script type="text/javascript">

    </script>
    <input type="button" value="開啓百度(新窗口)" onclick="window.open('http://www.baidu.com');"/>
    <input type="button" value="開啓百度(當前窗口)" onclick="window.open('http://www.baidu.com','_self');"/>
    <input type="button" value="開啓百度(父窗口）" onclick="window.open('http://www.baidu.com','_parent');"/>
    <input type="button" value="開啓百度(新窗口)" onclick="window.open('http://www.baidu.com','_blank');"/>
    <input type="button" value="開啓百度(頂級窗口)" onclick="window.open('http://www.baidu.com','_top');"/>
</body>
</html>

2.消息框和確認框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消息框和確認框</title>
</head>
<body>
    <script type="text/javascript">
        function del() {
            var ok=window.confirm("確認刪除數據嗎？");
            if(ok){
                alert("刪除成功！")
            }
        }
    </script>
    <input type="button" value="彈出消息框" onclick="window.alert('消息框！')"/>
    <input type="button" value="彈出消息框(刪除)" onclick="del();">
</body>
</html>

3.歷史消息
window.history.back();

4.獲取地址欄對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>獲取地址欄對象</title>
</head>
<body>
<script type="text/javascript">
    function goBb(){
        window.location.href="http://www.baidu.com";
    }

</script>

    <input type="button" value="百度" onclick="goBb()"/>
</body>
</html>

總結：往服務器發送請求的方式
1.表單from的提交

2.超鏈接

3.document.location

4.window.location

5.window.open(“url”）

6.直接在瀏覽器地址欄輸入URL,確認

4.將當前窗口不是top窗口將其設置爲top窗口

if(window.top!=window.self){
	window.top.location=window.self.location;
}

04.JSON

1.什麼是JSON,有什麼用？
JavaScript Object Notation(JavaScript對象標記）,簡稱JSON。（數據的交換模式）

JSON主要的作用:一種標準的數據交換格式。（目前非常流行，90%以上的系統都是採用JSON)

2.JSON是一種標準的輕量級的數據交換格式：
特點：
體積小，易解析

3.在實際開發中有兩種數據交換格式：使用最多的一個是JSON,另一個是XML.

XML體積較大，解析麻煩，但是有其優點是：語法嚴謹。（通常銀行相關的系統之間進行數據交換的話會使用XML)

//創建JSON對象(JSON也可以成爲無類型對象，
var studentObj={
"sno" :"110",
"sname" :"張三",
"sex" :"男"
};
//訪問JSON對象屬性
alert(studentObj.son+","+studentObj.sname+","+studentObj.sex);

//之前沒有使用JSON的時候，定義類，創建對象，訪問對象的屬性
Stuent=function(sno,sname,sex){
	this.sno=sno;
	this.sname=sname;
	this.sex=sex;
}
var stu = new Student("111","LiSi","男");
alert(studentObj.son+","+studentObj.sname+","+studentObj.sex);

//JSON數組
var students=[{"sno":"1","sname":"李四"},{"sno":"2","sname":"MengYangChen"},
{"sno":"3","sn ame":"XingKong"}];
//遍歷
for(var i=0;i<students.length;i++){
   var stuObj=students[i];
   alert(stuObj.sno+","+stuObj.sname+","+stuobj.sex);
}

XML範例：

3.JSON的語法格式

var studentObj={
	"屬性名" :"屬性值",
	"屬性名":"屬性值",
	"屬性名":"屬性值"
	};
//訪問JSON對象(JSON也可以稱爲無類型對象，輕量級，輕巧。體積小。易解析）
//屬性值可以爲任意類型

4.eval函數
作用:將字符串當作一段JS代碼解釋並執行。

window.eval("var i=100;");
alert("i="+i);

在JS當中：[]和{}有什麼區別？
[]是數組。

{}是JSON。

java中的數組：int[] arr={1,2,3};

JS中的數組：var arr=[1,2,3,4];

JSON：var jsonObj={“emai”:“[email protected]”,“age”:25};

05.設置table的tbody

案例：將Java傳到瀏覽器的JSON數據，展示到瀏覽器上(重點）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script type="text/javascript">
        //有這些json數據
        var data= {
            "total": 4,
            "emps": [{"empno": 23, "name": "MengYangChen", "sal": 8000.0},
                {"empno":24,"name":"XingKong","sal":900.00},
                {"empno": 27, "name": "Meng", "sal": 800.0},
                {"empno":29,"name":"Xing","sal":1000.00}
            ]
        };
        //將數據展示到table當中
        window.onload=function () {
            var displayEle=document.getElementById("display");
            displayEle.onclick=function (){
                var emps=data.emps;
                var Chars="";
                for(var i=0;i<emps.length;i++){
                    var emp=emps[i];
                    Chars+="<tr>"
                    Chars+="<td>"+emp.empno+"</td>";
                    Chars+="<td>"+emp.name+"</td>";
                    Chars+="<td>"+emp.sal+"</td>";
                    Chars+="</tr>"
                }
                //將字符串Chars輸出到tbody中
                document.getElementById("Yun").innerHTML=Chars;
                document.getElementById("count").innerText=data.total;
            }
        }
    </script>
    <input type="button" value="顯示員工信息" id="display"/>
    <h2>員工信息表</h2>
    <hr>
    <table border="2px" width="80%">
        <tr>
            <th>員工編號</th>
            <th>員工名字</th>
            <th>員工薪資</th>
        </tr>
        <tbody id="Yun">
            <!--<tr>
                <td>23</td>
                <td>MengYangChen</td>
                <td>8000.00</td>
            </tr>
            tr>
                <td>24</td>
                <td>XingKong</td>
                <td>8000.00</td>
            </tr>
            tr>
                <td>27</td>
                <td>Meng</td>
                <td>8000.00</td>
            </tr>
            tr>
                <td>29</td>
                <td>Xing</td>
                <td>8000.00</td>
            </tr>-->
        </tbody>
    </table>
    總記錄條數爲<sapn id="count">0</sapn>
</body>
</html>

“一眼就能看得到頭，不是我們想要的生活，我們爲之努力，不是爲了飛黃騰達，睥睨羣雄，而是努力讓自己的生活多一種可能，給自己的未來多一份驚喜。”
我是夢陽辰，期待下次與你相遇！

關注公衆號【輕鬆玩編程】回覆關鍵字“電子書”，“計算機資源”，“Java從入門到進階”，”JavaScript教程“，“算法”，“Python學習資源”，“人工智能”等即可獲取學習資源。

最通俗易懂的JavaScript實用案例

文章目錄

01.複選框的全選和取消全選

02.JS的內置類Array

03.BOM編程

04.JSON

05.設置table的tbody

【面試準備】又一次失敗的面試經歷，題目離譜～資深軟件測試工程師

dotnet 8 版本與銀河麒麟V10和UOS系統的 glibc 兼容性

我們能做到的，比想象的更多（夢陽辰---2020上半年總結）

你不得不知道的JSP知識點

（回溯算法）求解N皇后問題

Servlet進階教程（你不得不知道的Servlet知識點）

XML入門教程（XML這樣學）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結