第5章 Javascript控制语句-优快云博客

本文介绍了一种使用JavaScript实现网页背景颜色动态切换的方法，通过点击不同颜色的菜单按钮来改变页面背景。同时，文章还展示了如何使用try-catch语句进行异常捕捉和处理，确保程序在遇到错误时能够正常运行。

<body id="PageBody" style="background: red">
<script type="text/javascript">
    function ChangeBgColor(colorIndex) {
        var dombody = document.getElementById("PageBody");
        if (dombody == null) {
            return;
        } else {
            switch (colorIndex) {
                case 1:
                    dombody.style.background = "#666666";
                    break;
                case 2:
                    dombody.style.background = "#003333";
                    break;
                case 3:
                    dombody.style.background = "#ccccff";
                    break;
                case 4:
                    dombody.style.background = "#6699cc";
                    break;
                default:
                    dombody.style.background = "white";
                    break;
            }
        }
    }
</script>
<div style="width: 100px; height: 20px; text-align: center; background-color: #666666;" onclick="ChangeBgColor(1)"></div>
<div style="width: 100px; height: 20px; text-align: center; background-color: #003333;" onclick="ChangeBgColor(2)"></div>
<div style="width: 100px; height: 20px; text-align: center; background-color: #ccccff;" onclick="ChangeBgColor(3)"></div>
<div style="width: 100px; height: 20px; text-align: center; background-color: #6699cc;" onclick="ChangeBgColor(4)"></div>
</body>

使用4个DIV元素作为颜色菜单，单击相应菜单将引起网页背景的改变。

<div style="width: 261px; height: 70px; background-color: #cccccc;" id = "NameList" align="center"></div>
<script type="text/javascript">
    var names = new Array("Lily", "Tomson", "Alex", "Jack");
    for(i=0; i<names.length; i++) {
        var tn = document.createTextNode(names[i] + " ");
        var nameList = document.getElementById("NameList");
        nameList.appendChild(tn);
    }
</script>

以名字为内容创建文本节点，并添加到显示名字的层容器中。

for-in语句：通常用于遍历某个集合的每个元素。

for (n in set) {
    语句组;
}

try-catch语句：异常捕捉和处理。try-catch-finally类似。

<script type="text/javascript">
    try {
        var n = error;// 人为引发一个错误，因为error未定义就使用
    } catch(e) {
        alert("错误：" + e.description);
    }
</script>

throw语句：将异常抛出。父级try-catch语句可以接收到子级抛出的异常。

<script type="text/javascript">
    try {
        var total = 100;// 被除数
        var parts = 0;// 除数
        if(parts == 0) {
            throw "Error:parts is zero";// 抛出异常
        }
        alert("每人" + total/parts + "份");
    } catch (e) {
        alert(e);
    }
</script>