初探JavaScript魅力02学习总结

上一篇文章中我们的代码最后是写成了下图这样的：

其实，我们还可以再简化。
这就需要用到---变量。
我来举个例子，让你更好的理解什么叫做变量。
有一个人，他的名字叫巴勃罗.迭戈.荷瑟.山迪亚哥.弗朗西斯科.德.保拉.居安.尼波莫切诺.克瑞斯皮尼亚诺.德.罗斯.瑞米迪欧斯.西波瑞亚诺.德.拉.山迪西玛.特立尼达.玛利亚.帕里西奥.克里托.瑞兹.布拉斯科.毕加索。 为了方便，大家在叫他的时候就直接简称“毕加索”。

这一长串的名字可以用“毕加索”三个字代替，那这三个字我们就可以看做是这一长串的名字的变量。

JavaScript中我们是用var来对变量进行定义的。
那上面这个例子就可以理解成
var 毕加索=巴勃罗.迭戈.荷瑟.山迪亚哥.弗朗西斯科.德.保拉.居安.尼波莫切诺.克瑞斯皮尼亚诺.德.罗斯.瑞米迪欧斯.西波瑞亚诺.德.拉.山迪西玛.特立尼达.玛利亚.帕里西奥.克里托.瑞兹.布拉斯科.毕加索

那么

巴勃罗.迭戈.荷瑟.山迪亚哥.弗朗西斯科.德.保拉.居安.尼波莫切诺.克瑞斯皮尼亚诺.德.罗斯.瑞米迪欧斯.西波瑞亚诺.德.拉.山迪西玛.特立尼达.玛利亚.帕里西奥.克里托.瑞兹.布拉斯科.毕加索画了一幅画=毕加索画了一幅画

所以上一篇最后的那段代码我们可以简写成这个样子：

function toGreen()
{   
  var oDiv=document.getElementById('div1');   
  oDiv.style.width='300px';
  oDiv.style.height='300px';
  oDiv.style.background='green';
}

这里面

var oDiv=document.getElementById('div1');

变量oDiv这几个字母直接就可以替代document.getElementById('div1')这一大长串。

if 语句

if(预报有雨){
  带伞
}
else{
  不带伞
}

图上这个功能：一个按钮，如果它隐藏了一部分，那点击按钮后，它就显示出来；如果他显示出来了，那点击按钮，它就隐藏起来。

其中script中代码

<script>
    function showHide()
    {
      var oDiv=document.getElementById('div1');

        if(oDiv.style.display=='block')
          {
            oDiv.style.display='none';
          }
          else
          {
            oDiv.style.display='block';
          }
     }
  </script>

只要理解了if语句，利用之前学到的东西就可以把这个功能做出来。上面出现了一个新的符号，==(双等号)。在JS里=代表赋值（改变），而双等号则更接近于数学中的等号，其作用是判断两边是否相等。在本例中，oDiv.style.display=='block'即代表对display的值是否为block进行判断，如果成立则代表div1是显示的状态，执行if语句将其隐藏；反之不成立则代表div1是隐藏状态，执行else语句将其显示。