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:
JavaScriptIt is a scripting language used to add functionality and interaction 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 login box css 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="按钮" />
This will generate a button accordingly, but the click is invalid, because the button itself does not have any function, so we need to add the onclick event to the button to achieve the function. The meaning of the onclick event is that when the element is clicked, the event is realized.
Change the above code to:
<input type="button" value="按钮" onclick="alert('zcvzxcvzx')"/>
When we click the button again, the onclick event will be activated and the popup will pop up.
In simple terms, events are user actions. User actions are divided into many, clicks for buttons, and mouse in, mouse out, etc., which we will use later. We will encounter more events in the future, so I won't repeat them here, but I will talk about them later.
Back to our first JS effect. In order to achieve: when the mouse moves into the checkbox, let the div display, when the mouse moves out of the checkbox, let the div hide this effect, we introduce two new events: onmouseover and onmouseout. If you understand English, it is easy to understand that the former refers to the event triggered when the mouse moves into the element, and the latter refers to the event triggered when the mouse moves away from the element.
Now let's analyze, how to make div1 display when the mouse is moved into the input? In fact, when the mouse is moved into the input, its display property is changed to block. So, how should this sentence be written in JS? The answer is this:
<input type="checkbox" onmouseover="div1.style.display='block';"/>
<div id="div1">
For the safety of your information. . . .
</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'/>
<style>
#div1{
width:200px;
height:100px;
background:#CCC;
border:1px solid #999;
}
</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="getElementById('div1').style.width='200px'; getElementById('div1').style.height='200px'; document.getElementById('div1').style.background='red';">
为了您的信息安全。。。。
</div>
</body>
</html>
实现的效果如下：
显而易见的是，虽然完成了功能，但这样的代码无论编写还是查看都太恶心了。还记得，我们写css很少把这么多的样式写在行间而是选择写在样式表里，JS也同样，通常可以通过函数的方式将代码简洁化。
JS的函数的最基本格式为：function+函数名+(){},()内为参数(可以不写，暂时不用管)，{}内为函数体。
因此，我们通过函数将上方的代码进行改造：
<html>
<head>
<meta charset='utf-8'/>
<style>
#div1{
width:200px;
height:100px;
background:#CCC;
border:1px solid #999;
}
</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')这一段被重复使用了多次，我们可以通过引入一个新的概念：变量将他们进行合并，我们将在下一课进行细讲。