-
一直以来都想写点编程语言和算法思想的学习笔记,只是,都被懒惰的自己找借口支开了,趁着在回家之前,我要好好总结自己这一年来学习编程(特别是前端开发)的所获所得,要细到每个点,每个案例的代码都要亲手敲上去运行,并记录在笔记里,以便加深记忆和理解,同时也要积极借鉴和学习各个博客论坛大牛的笔记,将其汲取为自己的知识养分,废话少说,开始!!!
首先,在学习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属性) 右边写着十天内免登录,当我们把鼠标移上复选框的时候,会有文字提示:为了您的信息安全,不要在网吧等公众场合勾选等等... 鼠标移除后,文字又会消失:
我们的第一个示例代码要实现的就是这个小功能,在这里我并没有像我自己在本子上记笔记一样,从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>
运行结果:
来分析下,要实现这个功能,我们的思路是什么呢?思路是:
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的语法、变量和标识符。