第二课 初探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. POJ - 1470 Closest Common Ancestors(离线Tarjan算法)

    1.输出测试用例中是最近公共祖先的节点,以及这个节点作为最近公共祖先的次数. 2.最近公共祖先,离线Tarjan算法 3. /* POJ 1470 给出一颗有向树,Q个查询 输出查询结果中每个点出现次 ...

  2. SPOJ:Fibonacci Polynomial(矩阵递推&前缀和)

    Problem description. The Fibonacci numbers defined as f(n) = f(n-1) + f(n-2) where f0 = 0 and f1 = 1 ...

  3. word2vec中的数学原理(转)

  4. Gym 100512B Betting Fast (题意+概率)

    题意:你开始有 s 元钱,然后你要在 t 场内赚到 n 元,每次赢的概率是 p,并且要越快越好. 析:当时没注意这个条件,要越快越好,然后写概率dp,怎么看也不像是对.其实是每次赌 min(s, n- ...

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

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

  6. CentOS7.5 -- Ansible部署与应用

    第1章 Ansible概述 Ansible是一个配置管理系统configuration management system python 语言是运维人员必须会的语言 ansible 是一个基于pyth ...

  7. mac上 mysql 突然无法启动的问题

    创建: 2018/02/12 更新: 2018/02/12 补充如何不用sudo 更新: 2018/02/24 补充解决方案1,纠正不用sudo的方案.纠正一些错别字 更新: 2018/08/20 补 ...

  8. Mac下Ruby升级与Rails的安装

    也是醉了,网上查了半天一脸懵逼.然后自己动手试试 gem install rails瞬间命令行就没反应了,以为命令行挂了,但是一会儿报错说是没有权限. 好吧,那么来这个 sudo gem instal ...

  9. 洛谷 P4014 分配问题 【最小费用最大流+最大费用最大流】

    其实KM更快--但是这道题不卡,所以用了简单粗暴的费用流,建图非常简单,s向所有人连流量为1费用为0的边来限制流量,所有工作向t连流量为1费用为0的边,然后对应的人和工作连(i,j,1,cij),跑一 ...

  10. Visual Studio 2015 个版本下载

    Visual Studio 2015是一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具.代码管控工具.集成开发环境(IDE)等等.所写的目标代码适用于微软支持的所有 ...