The first lesson to explore the charm of JavaScript-01
What is JavaScript
Nowadays, when we open a large website, there will be many functions and applications of JS effects. For students who have learned CSS+HTML, even a website like Taobao can write the layout in a day or two. But for a web page, in addition to CSS, HTML and other elements that describe static layout, there are also functions such as pop-up windows, slideshows, editing, etc. that are difficult to achieve with pure CSS+HTML, and these are all done through JavaScript.
So what exactly is JavaScript? Compared with HTML+CSS, which can only produce static web pages that are difficult to interact with (although they can interact through hover pseudo-classes but have limited functions), we define Javascript as follows:
JavaScript is a scripting language used to add functionality and interactivity to web pages.
Let's take the login box of the Baidu homepage as an example. In fact, when we open the Baidu homepage, the login box is already included in the webpage code. Before we click to log in, the display property of the css of the login box is none; and when we click, its display property becomes block, which is displayed - this process is controlled by JS. Taobao's slideshow effect is the same, we change the background color (background-colr) and text color (color) of elements by moving the mouse to different elements.
The first JS special effect mouse prompt box
As shown in the above figure 126 mailbox ten-day free login prompt, when we move the mouse over the box, the corresponding text prompt will appear, and when the mouse is moved away, the corresponding text prompt will disappear. We will imitate it to write a mouse tooltip. The specific implementation of this function is: when the mouse moves into the frame, the div is displayed, and when the mouse moves out of the frame, the div is hidden.
At this point, I have to add a very important concept in JS: events . Here we take the first JS event: the onclick event as an example.
Include the following code in the html:
<input type="button" value="按钮" />
这样会相应生成一个按钮，但点击无效，因为按钮本身并没有任何功能，因此我们要向按钮增加onclick事件来实现功能。onclick事件所代表的含义是当元素被点击时，该事件实现。
将上方代码改为：
<input type="button" value="按钮" onclick="alert('zcvzxcvzx')"/>
当我们再点击按钮时，便会激活onclick事件，弹出弹框。
简单来说，事件就是用户的操作。用户操作分为很多，对于按钮来说有点击，以及我们待会会用到的鼠标移入，鼠标移出等等。将来我们会遇到更多的事件，这里不再赘述，以后慢慢说。
回到我们的第一个JS特效中来。为了实现：鼠标移入到checkbox的时候，让div显示，鼠标移出checkbox的时候，让div隐藏这样的效果，我们引入两个新的事件：onmouseover和onmouseout。如果你懂英文的话，很容易就明白，前者是指鼠标移入元素时触发的事件，后者是鼠标移开元素时触发的事件。
现在我们来分析，如何让鼠标移入到input的时候，让div1显示呢？其实就是当鼠标移入到input上时，将其display属性改为block。那么，这句话应该如何用JS来写呢？答案是这样的：
<input type="checkbox" onmouseover="div1.style.display='block';"/> <div id="div1"> 为了您的信息安全。。。。 </div>
我们将div1.style.display='block'这句话拿出来仔细分析。首先，div1是div的id，代表了选择了该div。其次，.代表的是什么含义呢？.类似于汉语的“的”，表示所属关系。等号在JS里并不是相等的意思，而是赋值（把等号右边的东西赋给左边）。所以这句话的意思就是div1的style（样式）里的display属性赋值为block。因此，当我们将鼠标移动到checkbox上后，便会触发onmouserover事件，将div1显示出来。同理，通过onmouseout事件可以在鼠标离开时将div1隐藏。
完整的代码如下：
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
#div1{
width:200px;
height: 100px;
background: #CCC;
border: 1px solid #999;
display: none;
}
</style>
</head>
<body>
<input type="checkbox" onmouseover="div1.style.display='block';" onmouseout="div1.style.display='none';" />
<div id="div1">
为了您的信息安全。。。。
</div>
</body>
</html>
实现的效果如下：
不兼容问题
我们已经学会了写一个最简单的JS小程序，但它存在一些小问题。在chrome和IE浏览器下，它能很好地运行，但如果使用火狐浏览器，你会惊讶的发现程序没有反应。在错误控制台中我们可以看到，错误提示为“div1 is not defined”，即div1没有被定义。
你或许会觉得奇怪，为什么说div1没有被定义呢？原因是在JS里，直接使用ID进行元素选择是不兼容的（火狐或者低版本的chrome），我们应该采用更加兼容的写法：document.getElementById()。
因此我们可以将上面的代码进行改写：
<input type="checkbox"
onmouseover="getElementById('div1').style.display='block';"
onmouseout="getElementById('div1').style.display='none';" />
getElementById的意思是通过id来获取元素，在本例中即通过getElementById获取了div1的元素来使用，这样在任何浏览器下都不会产生兼容性问题了。
初识函数
提起函数大家想到的应该首先是数学里的函数，不过JS里的函数和数学函数的关系并不是很大。我们用一个简单的小东西来阐述什么是JS里的函数。
现在我们向网页添加一个框，其宽为200px，高也为200px，背景为红色。同时我们希望当我们的鼠标移动到框上时，其宽高变为300px，背景变为绿色。利用我们前面所学到的知识我们可以解决这个问题，代码如下：
<html>
<head>
<meta charset="utf-8" />
<title>
无标题文档
</title>
<style>
#div1{
width:200px;
height: 200px;
background: red;
}9
</style>
</head>
<body>
<div id="div1" onmouseover="document.getElementById('div1').style.width='300px';document.getElementById('div1').style.height='300px';document.getElementById('div1').style.background='green';"onmouseout="document.getElementById('div1').style.width='200px';document.getElementById('div1').style.height='200px';document.getElementById('div1').style.background='red';">
</div>
</body>
</html>
实现的效果如下：
显而易见的是，虽然完成了功能，但这样的代码无论编写还是查看都太恶心了。还记得，我们写css很少把这么多的样式写在行间而是选择写在样式表里，JS也同样，通常可以通过函数的方式将代码简洁化。
JS的函数的最基本格式为：function+函数名+(){},()内为参数(可以不写，暂时不用管)，{}内为函数体。
因此，我们通过函数将上方的代码进行改造：
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {
width:200px;
height:200px;
background:red;
}
</style>
<script>
function toGreen()
{
document.getElementById('div1').style.width='300px';
document.getElementById('div1').style.height='300px';
document.getElementById('div1').style.background='green';
}
function toRed()
{
document.getElementById('div1').style.width='200px';
document.getElementById('div1').style.height='200px';
document.getElementById('div1').style.background='red';
}
</script>
</head>
<body>
<div id="div1" onmouseover="toGreen()" onmouseout="toRed()">
</div>
</body>
</html>
将函数写在script标签中，然后将行内的代码写在函数里，行内只使用函数名调用函数，这样比之前显得更简洁。
此外，在写css的时候，我们普遍有一个小小的习惯叫重用，即相同的代码尽可能只写一次。在JS里，同样应当遵循这样的规则。在上面的例子中，document.getElementById('div1')这一段被重复使用了多次，我们可以通过引入一个新的概念：变量将他们进行合并，我们将在下一课进行细讲。