(一)认识JavaScript

  • 一直以来都想写点编程语言和算法思想的学习笔记,只是,都被懒惰的自己找借口支开了,趁着在回家之前,我要好好总结自己这一年来学习编程(特别是前端开发)的所获所得,要细到每个点,每个案例的代码都要亲手敲上去运行,并记录在笔记里,以便加深记忆和理解,同时也要积极借鉴和学习各个博客论坛大牛的笔记,将其汲取为自己的知识养分,废话少说,开始!!!

首先,在学习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的语法、变量和标识符。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,509评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,806评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,875评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,441评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,488评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,365评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,190评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,062评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,500评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,706评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,834评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,559评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,167评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,779评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,912评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,958评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,779评论 2 354

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,770评论 0 8
  • 前言 归根结底,代码都是思想和概念的体现。没人能把一种程序设计语言的所有语法和关键字都记住,可以查阅参考书来解决。...
    朱细细阅读 2,935评论 4 14
  • 1.HTML DOM (Document Object Model) document.getElementByI...
    廖马儿阅读 1,422评论 0 17
  • 四为金,49为金,大写的四为庚金,为申。川为亥,大水。 地震来源于申亥相穿。申亥穿对应于人为肠道,腰背筋骨。对应城...
    风生水起2017阅读 201评论 0 0
  • 刘晨曦带着李栋去医院探望井上野仁,王旭故意翻译作假挑拨是非,井上野仁被燎的叽哇乱叫,李栋拽掉他手腕上的针头,还要进...
    黄梅枝阅读 306评论 3 12