第二课 初探JavaScript魅力-02

变量

说起变量，我们不得不提起我们有一部比较古老的电视剧叫《包青天》。包青天有一把非常厉害的宝剑叫“尚方宝剑”，见到尚方宝剑有如见到皇帝。某种程度来说，变量具有类似于尚方宝剑的特性。

我们对第一课末的代码进行如下修改：

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')，就像尚方宝剑一样。这样的程序在功能上没有发生变化，但代码却大幅度进行了简化。

函数的定义与调用

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

function show()

{                        //定义

  alert("abc");

}

show();            //调用

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

网页换肤

很多网站都拥有网页换肤这样类似的方便功能，可以通过点击改变网页的背景颜色或图片等。

上图为hao123的网页换肤功能，在点击换肤后整个网页所有元素的背景颜色都发生了改变。如果采用上节课的方式，我们可能需要一个一个修改元素的背景颜色，操作量非常大，因此我们有更简单的方法来完成这件事。

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

css1的代码如下：

body{

  background:black;

}

input{

  width:200px;

  height:100px;

  background:yellow;

}

css2的代码如下：

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从入门到精通】第二课的更多相关文章

  1. JavaScript从入门到精通(转)

    JavaScript从入门到精通 转自: https://github.com/Eished/JavaScript_notes 视频连接:https://www.bilibili.com/video/ ...

  2. SaltStack 入门到精通第二篇：Salt-master配置文件详解

    SaltStack 入门到精通第二篇:Salt-master配置文件详解     转自(coocla):http://blog.coocla.org/301.html 原本想要重新翻译salt-mas ...

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

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  4. 【JavaScript从入门到精通】第四课初探JavaScript魅力-04

    第四课初探JavaScript魅力-04 style与className 之前我们已经讲过,style用于在JS里控制元素的样式,通过style可以选中元素的各种css属性.此外,我们也提到过,JS用 ...

  5. 【JavaScript从入门到精通】第三课 初探JavaScript魅力-03

    第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...

  6. 【JavaScript从入门到精通】第三课

    第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...

  7. 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01

    第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...

  8. 【JavaScript从入门到精通】第一课

    第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...

  9. javascript从入门到精通（二）

    第二章.数据结构 JavaScript脚本语言的数据结构包括:标识符.关键字.常量.变量等. 标识符:就是一个名称.在JavaScript用来命名变量和函数或者用作JavaScript代码中某些循环的 ...

随机推荐

  1. DP专题之概率DP

    注意:在概率DP中求期望要逆着推,求概率要正着推 概率DP求期望: 链接: http://acm.hdu.edu.cn/showproblem.php?pid=4405 dp[ i ]表示从i点走到n ...

  2. bzoj1296 [SCOI2009]粉刷匠——背包

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1296 对于不同木板之间,最终统计答案时做一个分组背包即可: 而要进行分组背包,就需要知道每个 ...

  3. bzoj4881 线段游戏——上升序列方案数

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4881 连题意都转化不了了... 题意是要求从一个数列中选出两个上升序列的方案数: 先判断是否 ...

  4. 小程序-demo：template

    ylbtech-小程序-demo: 1.返回顶部 1.app.js 2.app.json 3.app.wxss 4.project.config.json 5.pages 6.images 7. 2. ...

  5. 在使用react时的异步问题解决

    在时用react时, 常常会出现在创建一个对象后, 对象还没有创建完成就被使用的异步问题, 介于这种问题, 一种解决方法就是使用Promise, 将需要被等待的那一步放到Promise中, Promi ...

  6. Gym 100512F Funny Game (博弈+数论)

    题意:给两个数 n,m,让你把它们分成 全是1,每次操作只能分成几份相等的,求哪一个分的次数最多. 析:很明显,每次都除以最小的约数是最优的. 代码如下: #pragma comment(linker ...

  7. [App Store Connect帮助]八、维护您的 App（4.3）回复顾客评论（iOS、macOS 或 watchOS）

    您可以公开回复顾客评论,但在您的 App Store 产品页上每条评论仅会显示一条回复.您可以回复评论.编辑回复,以及删除回复. 在回复和编辑显示在 App Store 上之前(可能需要至多 24 小 ...

  8. Go语言模拟文件断点续传以及多协程读取写入文件操作

    今天整理了一个Go语言多协程拷贝文件的案例,之前用Java写过,这次用Go语言来写一下,代码不难,也很简单,但是网上没有案例,整了很长时间.下面贴出来,供其他人参考学习. func main(){ f ...

  9. 上帝造题的七分钟2/花神游历各国/GSS4 线段树维护区间开方 By cellur925

    题目传送门 或者 另一个传送门 询问区间和都好说.但是开方?? 其实是这样的,一个数(1e9)以内连续开方6次就会变成1,于是我们就可在开方操作上进行暴力修改.暴力修改的意思其实也就是找到叶子节点进行 ...

  10. 全排列（传统&&黑科技）

    近期几次考试的一些题目暴力分都有用到全排列. 全排列是个好东西啊... 回想一下,我们最开始学到全排列是什么时候呢? 大概是学搜索的时候罢... 一.传统搜索算法 想复习可以戳 https://www ...