Question

我正在w3schools.com工作，我通常会尝试阅读代码并理解代码行的功能，我对这段代码感到有些困惑：

function myFunction() {
 var message, x;
 message = document.getElementById("message");
 message.innerHTML = "";
 x = document.getElementById("demo").value;
 try { 
    if(x == "") throw "empty";
    if(isNaN(x)) throw "not a number";
    x = Number(x);
    if(x < 5) throw "too low";
    if(x > 10) throw "too high";
 }
 catch(err) {
    message.innerHTML = "Input is " + err;
 }
}

部分：

var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;

第一行是否声明了变量message和x？第二行是有道理的，但在第三行是否声明未定义？第四行究竟做了什么？

Answer 1

1. var message, x;
2. message = document.getElementById("message");
3. message.innerHTML = "";
4. x = document.getElementById("demo").value;

第1行：您可以在单个var语句之后声明（并可选地赋值给）多个变量，以逗号分隔。

第3行：将对象'message'上的'property'nenerHTML设置为空字符串。

注意：第2行返回的对象'message'已经具有string类型的属性'innerHTML'（如果存在id =“message”的元素），因为它是特定类型的对象（ HTMLElement）但通常，您可以将任何值分配给对象上先前未定义的属性，并且它将创建该属性。例如：

var obj = {}
alert (typeof obj.newproperty) // undefined
obj.newproperty = "hello"
alert (typeof obj.newproperty) // string

第4行：

document.getElementById("demo")

是对id =“demo”

的元素的引用

x = document.getElementById("demo").value

将变量x设置为该元素上属性“value”的值（如果存在，或者如果不存在则设置为undefined。）

注意：没有id =“demo”的元素存在，那么该行会在尝试引用null对象的属性（值）时抛出错误。

Answer 2

第一行声明了消息和x变量。我不知道你声明undefined是什么意思，但是第三行将message元素的内容（内部HTML）设置为空字符串。最后一行将x设置为demo元素的value属性。 value属性包含默认值或用户在文本字段中键入的值（或脚本设置的值）。

Answer 3

<html>
<body onload="setTimeout(fall,1000)" onkeydown="Moves()">

    <img id="square" style="position:absolute; left:10px; top:0px;    
    width:50px; height:50px; background-color:red;" />

    <img id="rectangle" style="position:absolute; left:10px; top:130px; 
    width:150px; height:10px; background-color:blue;" />

    <script>
        var over_edge = false;
        var can_fall = true;

        function fall(){
            var s = document.getElementById("square");
            s.style.top = parseInt(s.style.top) + 25 + 'px';


            var r = document.getElementById("rectangle");
            //r.style.top=130 + 'px';

            if(!over_edge) {
                if(parseInt(s.style.top) >= parseInt(r.style.top) - parseInt(s.style.height)) {
                    s.style.top = parseInt(r.style.top) - parseInt(s.style.height);
                    can_fall = false;
                }
            }
            if(can_fall || over_edge)
                setTimeout(fall, 1000);
        }

        function Moves(){
            var s = document.getElementById("square");
            if (event.keyCode==39) { 
                s.style.left = parseInt(s.style.left)+10+'px';}

                var r = document.getElementById("rectangle");
                //r.style.width=150 + 'px';

                if(parseInt(s.style.left) >= parseInt(r.style.left) + parseInt(r.style.width)) {
                    if(!over_edge) {
                        over_edge = true;
                        fall();             // trigger falling over the edge but only once
                    }
                }
            }

    </script>
</body>
</html>

JavaScript分配说明

3 个答案: