The second lesson explores the charm of JavaScript-02
variable
Speaking of variables, we have to mention that we have an older TV series called "Bao Qingtian". Bao Qingtian has a very powerful sword called "Shangfang Sword", seeing the Shangfang sword is like seeing the emperor. To a certain extent, variables have properties similar to Shangfang's sword.
We modify the code at the end of the first lesson as follows:
function toGreen()
{
var oDiv=document.getElementById('div1'); //variable
oDiv.style.width='300px';
oDiv.style.height='300px';
oDiv.style.background='green';
}
We use var to define the variable and tell the computer that what I want to write next is a variable, oDiv is the name of the variable, and we use the variable oDiv to store the value of document.getElementById('div1') (we can simply understand it as The variable is an alias for a thing), then in this function, wherever you see Div, it is as convenient as seeing document.getElementById('div1'), just like Shangfang's sword. Such programs have not changed in function, but the code has been greatly simplified.
Function definition and call
Definition and invocation are two important concepts of functions. Let's look at such a simple JS code:
function show()
{ //definition
alert("abc");
}
show(); //call
If a function is only defined but not called, no matter how the page is refreshed, it will have no effect. Just as the law exists, but if no one breaks the law, the law does not exist. And if a function is only called but not defined, then the function cannot be executed, and an error message that the function is not defined will appear on the console. Therefore, in order for a function to execute, the definition and invocation of the function are indispensable.
Web skinning
Many websites have similar convenient functions such as page skinning, which can change the background color or picture of the webpage by clicking on it.
The picture above shows the webpage skinning function of hao123. After clicking skinning, the background color of all elements of the entire webpage has changed. If we use the method of the previous lesson, we may need to modify the background color of the elements one by one, which is very heavy, so we have an easier way to do this.
In this example, CSS is added through the external link style sheet, and two sets of different skins (that is, two different CSS files) are prepared in the external link style sheet to provide web page changes.
The code of css1 is as follows:
body{
background:black;
}
input{
width:200px;
height:100px;
background:yellow;
}
The code of css2 is as follows:
body{
background:#ccc;
}
input{
width:100px;
height:50px;
background:red;
}
In the HTML code, we can load different css files by changing the href attribute of the link, so in fact, skinning is essentially changing the css file of the external link. To achieve this, we need to manipulate the link tag in HTML. At the same time, in order to select the link tag, we need to add an id to the link tag and select it with the getElementById method in the js function, so that the href attribute can be manipulated.
The complete code is as follows:
<html>
<head>
<meta charset="utf-8">
<title>Untitled document</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>