【JavaScript从入门到精通】第二课初探JavaScript魅力-02

时间 2019-11-06

标签 javascript 入门精通第二初探魅力栏目 JavaScript 繁體版

原文原文链接

第二课初探JavaScript魅力-02

变量

提及变量，咱们不得不提起咱们有一部比较古老的电视剧叫《包青天》。包青天有一把很是厉害的宝剑叫“尚方宝剑”，见到尚方宝剑有如见到皇帝。某种程度来讲，变量具备相似于尚方宝剑的特性。javascript

咱们对第一课末的代码进行以下修改：css

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

咱们用var对变量进行定义，告诉计算机我接下来要写的是一个变量,oDiv是变量的名字，咱们用oDiv这个变量把document.getElementById('div1')的值存起来（咱们能够简单理解为变量是给一个东西取了个别名），那么在这个函数里凡是见到Div的地方便如同见到document.getElementById('div1')，就像尚方宝剑同样。这样的程序在功能上没有发生变化，但代码却大幅度进行了简化。html

函数的定义与调用

定义和调用是函数的两个重要概念。咱们来看这么一段简单的JS代码：java

function show()       
{                        //定义
  alert("abc");
}
show();            //调用

若是一个函数只有定义，而没调用，不管如何刷新页面，也没有任何效果。就像法律虽然存在，但若是没有人犯法，法律便如同不存在同样。而若是一个函数只有调用而没有定义，那么函数也没法执行，而且控制台会出现函数没有被定义的报错。所以，想让函数执行，函数的定义和调用缺一不可。浏览器

网页换肤

不少网站都拥有网页换肤这样相似的方便功能，能够经过点击改变网页的背景颜色或图片等。ide

上图为hao123的网页换肤功能，在点击换肤后整个网页全部元素的背景颜色都发生了改变。若是采用上节课的方式，咱们可能须要一个一个修改元素的背景颜色，操做量很是大，所以咱们有更简单的方法来完成这件事。函数

本例经过外链样式表来添加css，在外链样式表中准备两套不一样的皮肤（即两个不一样的css文件）提供网页变化。网站

css1的代码以下：3d

body{
  background:black;
}
input{
  width:200px;
  height:100px;
  background:yellow;
}

css2的代码以下：htm

body{
  background:#ccc;
}
input{
  width:100px;
  height:50px;
  background:red;
}

在HTML代码中，咱们经过更改link的href属性即可以加载不一样的css文件，因此其实换肤本质上就是更改外链的css文件。为了达成这个目的，咱们须要操做HTML里的link标签。同时为了选中link标签，咱们须要给给link标签加上id并在js函数里用getElementById方法选中，这样就能够对其href属性进行操做了。

完整代码以下：

<html>
  <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <link id="l1" rel="stylesheet" type="text/css" href="css1.css" />
    <script>
      function skin1()
      {
	      var oL=document.getElementById('l1');
	      oL.href='css1.css';
      }

      function skin2()
      {
	      var oL=document.getElementById('l1');
	      oL.href='css2.css';
      }
    </script>
  </head>
  <body>
    <input type="button" value="皮肤1" onclick="skin1()" />
    <input type="button" value="皮肤2" onclick="skin2()" />
  </body>
</html>

点击皮肤1和皮肤2就能够对网页进行换肤啦。

从这个例子里，咱们学到如下几点：

任何标签均可以加id，例如本例的link能够，甚至连body，html也能够。
任何标签的任何属性均可以经过JS进行修改。
HTML里的属性名和JS里保持一致，HTML里面怎么写，VALUE里面就怎么写。

if判断

if语句在JS里用于判断，其基本格式为

if(条件){
  语句1
}
else{
  语句2
}

其中else不是必要的。整个语句表明的含义为，若是条件成立，则执行语句1，若是条件不成立，则执行语句2。举一个生活中最简单的小例子，若是天气预报有雨，咱们则带伞，若是不下雨，则不带伞。这个例子用if语句的话描述以下：

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

那么if语句在JavaScript里面应该怎么应用呢？咱们再举一个网页的小例子。

Google上方菜单栏的“更多”选项，当咱们点击的时候，会展开一个菜单栏，再次点击的时候会收回。这个很是经常使用的功能就是用if语句完成的。和onmouseout和onmouseover不一样，虽然咱们每次进行的都是点击操做，但根据菜单栏展开状态的不一样，每次点击产生的效果也就不同。当菜单栏处于显示状态的时候，进行点击的操做是让菜单栏隐藏；反之，当菜单栏处于隐藏状态时，进行点击的操做是让菜单栏显示。用一句简单的话来描述咱们须要干的事情就是：当点击的时候，若是div是显示的，将其隐藏掉（将其display属性改成none）；反之，将其显示出来（将其display属性改成block）。

所以，咱们能够用if语句进行表达：

if(div是显示的){
  oDiv.style.display='none';
}
else{
  oDiv.style.display='block';  
}

完整代码以下：

<html>
  <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <style>
#div1 {width:100px; height:200px; background:#CCC; display:none;}
  </style>
  <script>
    function showHide()
    {
  	  var oDiv=document.getElementById('div1');

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

  <body>
    <input type="button" value="显示隐藏" onclick="showHide()" />
    <div id="div1">
    </div>
  </body>
</html>

效果以下：

这里出现了一个新的符号，==(双等号)。咱们以前讲过，在JS里=表明赋值（改变），而双等号则更接近于数学中的等号，其做用是判断两边是否相等。在本例中，oDiv.style.display=='block'即表明对display的值是否为block进行判断，若是成立则表明div1是显示的状态，执行if语句将其隐藏；反之不成立则表明div1是隐藏状态，执行else语句将其显示。

为a连接添加JS

HTML中的a连接你们应该再熟悉不过了，可是你们知道，a连接也是能够添加JS的吗？一般状况下，咱们在a标签的href属性里放的值是网址，不过实际上也能够在里面放入JS函数执行。

<a href="javascript:alert('a');">连接</a>

使用上述代码，点击连接一样能够执行JS函数。冒号前的javascript能够告诉浏览器，咱们要执行的不是网址而是JS代码，冒号后的则是执行内容。

不过，通常来说，咱们都不会真的在a标签里放JS代码，而是让它空着：

<a href="javascript:;">连接</a>

这样作的目的有两个。首先，在a标签里面放代码很是很差，这一点咱们学到事件的时候就会明白。其次，这种写法比起在href属性中使用#有一个优点：点击后没有反应，不会直接跳到网页的顶部。

例外的className

在网页换肤的时候咱们讲过，HTML里的属性名和JS里保持一致，HTML里面怎么写，VALUE里面就怎么写——惟一的例外就是className。由于JS里的class是保留字，在JS里有其余做用，若是咱们在JS里直接使用HTML里的class属性，程序是不会执行的，因此JS用className代替了class。当咱们想改变一个元素的class时，采用如下写法：

<html>
  <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
      #div1 {
        width:100px;
        height:100px; border:
        1px solid black;
      }
      .box {
        background:red;
      }
    </style>
    <script>
      function toRed()
      {
	    var oDiv=document.getElementById('div1');
  	    oDiv.className='box'; //className,而不是class
      }
    </script>
  </head>

  <body>
    <input type="button" value="变红" onclick="toRed()" />
    <div id="div1">
    </div>
  </body>
</html>

【JavaScript从入门到精通】第二课 初探JavaScript魅力-02

第二课 初探JavaScript魅力-02