-
一直以来都想写点编程语言和算法思想的学习笔记，只是，都被懒惰的自己找借口支开了，趁着在回家之前，我要好好总结自己这一年来学习编程（特别是前端开发）的所获所得，要细到每个点，每个案例的代码都要亲手敲上去运行，并记录在笔记里，以便加深记忆和理解，同时也要积极借鉴和学习各个博客论坛大牛的笔记，将其汲取为自己的知识养分，废话少说，开始！！！
首先，在学习JS之前，你应该掌握HTML和CSS3，它们是构建一个网页的基础，只有熟练运用它们，才能更深层次地去学习WEB开发，关于HTML和CSS3,我会在后续的时间内再进行更新。(笑，明明是学习笔记，为什么要写用教程的口吻，哈哈，因为这样更有带入感嘛~)
学习完HTML和CSS3之后，我们只能做出一个静态网页，要真正要进行前端开发，这是远远不够的，我们还需要学习一门编程语言，JavaScript就是因WEB而产生的，关于JS的介绍，网上有很多，我翻阅了一些，
下面的三段，引用前端大牛阮一峰的《JavaScript 标准参考教程》的开篇：
JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。
JavaScript 是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多，只能用来做一些数学和逻辑运算。JavaScript 本身不提供任何与 I/O（输入/输出）相关的 API，都要靠宿主环境（host）提供，所以 JavaScript 只合适嵌入更大型的应用程序环境，去调用宿主环境提供的底层 API。
目前，已经嵌入 JavaScript 的宿主环境有多种，最常见的环境就是浏览器，另外还有服务器环境，也就是 Node 项目。从语法角度看，JavaScript语言是一种“对象模型”语言。各种宿主环境通过这个模型，描述自己的功能和操作接口，从而通过 JavaScript 控制这些功能。但是，JavaScript 并不是纯粹的“面向对象语言”，还支持其他编程范式（比如函数式编程）。
通过这三句话，我们从概念上初步认识了JS，在最开始学习JS的时候，我是这样理解它的：JS，不就是给静态网页添加动态效果和功能嘛，哈哈，其实在基础学习阶段，的确是这样的，随着后面的学习，JS也许会给我们带来不一样的东西，不过等到学到那个程度再说吧！
我们大家都有登录邮箱的时候吧，在登录上方有一个复选框（input元素的checkbox属性） 右边写着十天内免登录,当我们把鼠标移上复选框的时候，会有文字提示：为了您的信息安全，不要在网吧等公众场合勾选等等... 鼠标移除后，文字又会消失：
a1.png
我们的第一个示例代码要实现的就是这个小功能，在这里我并没有像我自己在本子上记笔记一样，从JS的语法啊数据结构讲起，因为这样未免显得很枯燥，来看我的实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个JS特效</title>
<style type="text/css">
#err{
width: 200px;
height: 100px;
background-color: #ccc;
border: 1px solid #ddd;
display: none;
}
</style>
</head>
<body>
邮箱:<input type="text"/><br/><br/>
密码:<input type="password"/><br/><br/>
<input type="checkbox"
onmouseover="document.getElementById('err').style.display='block';"
onmouseout="document.getElementById('err').style.display='none';"/>
<span>十天内免密登录</span>
<div id="err">
为了您的信息安全,请不要在网吧等公众场合使用该功能！
</div>
</body>
</html>
运行结果:
a2.png
来分析下，要实现这个功能，我们的思路是什么呢？思路是：
1.在复选框下事先布局好了一个div 并把提示文字写好；
2.最开始的时候，我们还得让div隐藏，这个用display:none；
3.然后鼠标移上去就显示，哈哈，是不是想到了，这个时候，让display变成block不就可以了，答案就是如此；
4.然后鼠标移除之后又变成display:none。
onmouseover="document.getElementById('err').style.display='block';"
onmouseout="document.getElementById('err').style.display='none';"
上面这2行加粗的代码就使用了我们的JavaScript，我来稍作说明一下，onmouseover和onmouseout是JS里的内置事件，所谓的事件，就是用户或者浏览器对网页进行操作时的动作，onmouseover是鼠标移入，onmouseout是鼠标移出，document.getElementById（'err'）这句话就是告诉浏览器我要操作一个id为err的html元素了，相当于是一个仪式（也就是DOM操作，后续会讲），至于.符号，它是一个从属操作符（我自己瞎定义的），含义就是什么什么的,比如我的书，可以说成“我.书”,大概就是这个意思，至于=也就是赋值运算符，意为把右边的东西赋给左边，这就是JS在HTML里的第一种使用方法，即元素行内使用。
小节：感觉自己很废话啊，希望看的人能够听懂把，下一节开始正式讲JS的语法、变量和标识符。
网友评论