第一课 初探JavaScript魅力-01
JavaScript是什么
如今我们打开一个大型的网站，都会有很多JS效果的功能和应用。对于学过CSS+HTML的同学，即使是像淘宝那样的网站，用一两天时间也可以将布局写出来。但对于一个网页来说，除去CSS，HTML这样描述静态布局的元素外，还有诸如弹窗，幻灯，编辑等很难用纯粹的CSS+HTML实现的功能，而这些都是通过JavaScript来完成。
那么JavaScript究竟是什么呢？对比HTML+CSS这两者只能制作观看难以交互（虽然可以通过hover伪类进行交互但功能有限）的静态网页而言，我们给Javascript进行如下定义：
JavaScript是一门用于给网页添加功能、交互的脚本语言。
我们以百度首页登录框为例，实际上我们打开百度首页的时候，登录框就已经包含在了网页代码中。在我们点击登录之前，登录框css的display属性为none；而当我们点击之后，其display属性变为了block，从而就显示了出来——这个过程便是由JS控制的。淘宝的幻灯效果也是同理，我们通过鼠标移动到不同的元素来改变元素的背景颜色(background-colr)和文字颜色(color)。
第一个JS特效 鼠标提示框
如上图126邮箱十天免登陆的提示，当我们将鼠标移动到框上时，会出现相应的文字提示，当鼠标移开时，对应的文字提示消失。我们将模仿它写一个鼠标提示框。该功能的具体实现是：当鼠标移入到框上的时候，让该div显示，鼠标移出框的时候，让该div隐藏。
到这里，不得不补充一个JS里非常重要的一个概念：事件。这里我们以第一个JS事件：onclick事件为例说明。
在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')这一段被重复使用了多次，我们可以通过引入一个新的概念：变量将他们进行合并，我们将在下一课进行细讲。
相关推荐
【小程序开发从入门到精通教程】是一门全面深入讲解微信小程序开发的课程，旨在帮助初学者快速掌握小程序的开发技能并提升至精通水平。通过这门课程，学习者可以了解到微信小程序的整个生命周期，从创建项目、设计...
在本课程“精通JavaScript+jQuery第8课”中，我们将深入探讨JavaScript这门强大的脚本语言及其与jQuery库的结合应用。JavaScript，作为Web开发的基础，是实现网页动态交互的关键，而jQuery则以其简洁易用的API大大...
这套教程按照学习路线分为四个阶段，从基础篇到高手篇逐步进阶： 1. **基础篇**：涵盖Python开发基础和核心特性，如变量、运算符、分支与循环、字符串、列表、字典、函数、递归、文件处理、面向对象编程、异常处理...
- **1995 年**：Sun 正式发布了 Java 的第一个版本。 ### Java 开发工具 常用的 Java 开发工具有： - **记事本**：最基础的编辑器，适合初学者学习语法。 - **JCreator**、**JBuilder**：这些工具已不再流行。 - ...
在实际操作中，你将一步步构建自己的第一个网页，体验从无到有的过程。通过不断的练习和项目实践，你将逐渐精通HTML，为成为Web开发工程师打下坚实的基础。记得，学习HTML并非一蹴而就，持续练习和不断探索才是进步...
在第6课中，学生可以学到JavaScript事件的相关知识，这是处理用户交互的必备技能。第7课涉及如何使用JavaScript操作HTML表格和表单元素。第8课讲授JavaScript的调试和优化技巧，帮助开发者写出更高效、更稳定的代码...
同时，利用互联网资源如 51CTO 的专题“jQuery 从入门到精通”以及其他在线教程，可以帮助开发者更快地掌握 jQuery 的精髓。 总之，jQuery 是一个功能强大、易于使用的工具，它不仅能够帮助开发者解决复杂的 DOM ...
python入门到高级全栈工程师培训视频学习资料；本资料仅用于学习，请查看后24小时之内删除。 【课程内容】 第1章 01 计算机发展史 02 计算机系统 03 小结 04 数据的概念 05 进制转换 06 原码补码反码 07 物理层和...
如果你作过一段时间的专业Web设计者，你很可能用过所见即所得的编辑器。或许重复不断地用手工插入黑体tag使...教程的第一课要求你按F1键，浏览帮助系统，或者在帮助系统中查询。 现在让我们制作一些标准的HTML页面。
总的来说，这套教程全面覆盖了从入门到精通微信小游戏开发的过程，包括营销策略、技术实现、发布与更新等多个方面，对于想学习微信游戏开发的人来说是一份宝贵的资源。通过学习，开发者可以了解微信小游戏的开发流程...
### 织梦仿站系列教程知识点概述 #### 一、织梦仿站基本概念与应用场景 **1.1 织梦仿站定义** ...通过上述知识点的详细介绍，相信初学者能够对织梦仿站有一个全面而深刻的认识，并掌握从入门到精通所需的各项技能。
精通JavaScript开发| 重新介绍 JavaScript（JS 教程）| 麻省理工学院公开课：计算机科学及编程导论| JavaScript中的this陷阱的最全收集--没有之一| JS函数式编程指南| JavaScript Promise迷你书（中文版）| 腾讯移动...