征服javascript学习笔记(一)——认识js

作为一名专注并且热爱前端(也好意思说)的“伪前端”,js一直是我心中的痛,说完全不懂吧,也知道点,能写简单的东西,也用过jquery写交互和逻辑以及一些简单动画,说懂吧,不算,随便一个问题都能难倒我,但我不甘如此啊,于是乎,既然新的一年要做出一些实实在在的事情,那么没有什么比把它搞定更实在的了。故而,我会在学习的过程中,把一些笔记、心得,在这里记录下来,起名“征服javascript”,以便自己查看,或者也会对某些看到的朋友有帮助。既然是学习的过程,完整性和准确性就不敢打包票了,所以,如果您发现了什么问题也是正常的。欢迎交流。好了,不废话了,正题:

要学一样东西,首先得有一个大概的认识。

对于js,最直观的认识,莫过于,当我们用html搭好了网站的骨架、用css美化了它,然后呢?似乎还缺少什么,对的,js最初的产生,就是用来控制浏览器和给网页添加活力和交互性的。至于java和长得很像的javascript这哥俩的关系,相信大伙都听过雷峰塔的段子,就不啰嗦了。

javascript可以做什么?

我们可以想象一下,如果没有它,做不了什么,那么就知道它可以做什么了。

交互性,比如对于鼠标的悬停和点击给予一定的响应和反馈,操作页面中的元素;表单验证;控制浏览器窗口;利用自身的日期和时间特性,生成时钟、日历等;设置cookie;即时构建页面或者创建基于web的应用程序等。

说到javascript时,我们经常谈什么

一个完整的js实现,包括:

核心(ECMAScript)、DOM、BOM

ECMAScript

我们常见的web浏览器是ECMAScript实现的宿主环境之一,为什么说之一呢,因为这个,曾让很多人觉得,它只能在浏览器里工作,还有其他的宿主环境比如node(一种服务端js平台)和Adobe Flash。

它规定了这门语言的下列组成部分:

语法、类型、语句、关键字、保留字、操作符、对象

DOM

不得不说的DOM,提供访问和操作网页内容的方法和接口。

当然不只是因为js,很多人印象比较深的可能就是操作DOM,增删查之类的。其实不是,DOM是文档对象模型的英文缩写,跟js没关系,每个网页都有它的DOM结构,也有说法叫DOM树,树上的每个对象可以称为“节点”(node),可以使用js对其进行修改。如果节点包含html标签,称为“元素节点”,否则是文本节点。当然可以推出,元素节点可能包含文本节点。

BOM

浏览器对象模型,它是处理浏览器窗口和框架,人们也习惯把所有针对浏览器的javascript扩展算作BOM的一部分,比如:

  • 弹出新浏览器窗口
  • 移动、缩放、关闭浏览器窗口
  • 提供浏览器详细信息的navigator对象
  • 提供浏览器所加载页面详细信息的location对象
  • 提供用户显示器分辨率信息的screen对象
  • cookie等

语句

即我们通常见到的条件判断语句、循环语句,label语句,with语句等,用来执行一些符合某种逻辑的操作

对象

有人说它是面向对象,有人说那样不严格,应该是基于对象。不管哪种说法,我觉得,对于初学者都没什么影响的,因为,都不知道在说什么…

在说对象的时候,都喜欢拿猫、狗什么的打比方,来解释什么是属性,什么是方法。比如它们有耳朵、鼻子、眼睛等等,这些是属性,会跑、会叫,这些是方法,能够控制这些,就能指挥它做很多事,那,这些跟写程序有什么关联呢?

貌似不知所云,其实不是,我们会获取一个东西,会对它进行操作,会对数据进行处理,这些都可以看做是对象。

属性

比如,如果一个对象是文档,那么它会有标题;一个对象是表单,它可能有文本输入框、单选框等。改变对象的属性就修改了对象本身,相同的属性名可以用于不同的对象,比如,猫有耳朵,狗也有耳朵,人也有耳朵。另外,有些属性本身也可以是对象,对象可以有子对象。

方法

对象可以做的事情,称之为“方法”。

比如,猫会叫,链接、按钮可以点击click()、窗口可以打开open()等。

简单来说,可以把“对象”、“属性”看做名词,方法是“动词”。

对象、属性、方法组合,组合可以更好的描述对象或过程,比如

对象和属性 car.wheel

对象和方法 car.run()

以上写法称为“点号语法”

事件

之前就说过,js是用来处理“行为”和“数据”的,既然有行为,肯定要发生什么,称为“事件”。
js里面有很多的事件处理程序,当用户在网页上进行相应的操作,就会触发它。比如,很常见的“onclick、onload”等,那么是不是所有用户的行为都需要去响应呢,也不是,你需要关心的是哪些事件是你的需求,能有比较好的体验或者应该响应。

值和变量

值:在js中,一段信息就是一个值,比如我们熟悉的“数字、字符串”等。当然还有别的,后续详细记录。
变量:是用来存储值的,学过编程的都知道,都喜欢用一个盒子或一个房子来做比喻,道理都一样。可存,可取,可操作

提示:变量名区分大小写,不能包含空格和其他标点,不能以数字开头,不能是js的保留字。

操作符

简单说来,就是“+、—、*、/”等,当然,还有++、–此类。
需要注意的是,数字和字符串相加,结果是字符串,这个也是有规律可循,后面遇到再详述。

赋值和比较

赋值:将一个值放入到一个变量,就是赋值,使用赋值操作符完成,例如:myName=”idea”;

除了=,还有“+=、-=、*=、/=、%=”等。

比较:两个值或者变量可以进行比较,操作符有“==、===、!=、>=”等这些。

上面基本列出了我们说起js时会说到的东西。仅对js进行了一下概览,以后的文章里会对其进行逐个详述。

小结

js是一种专为与网页交互而设计的脚本语言,它为网页开发人员提供了操控网页元素和响应用户行为的方法。最近两年,由于各种框架和node、react等的流行,它似乎变得更加强大,有更大的想象空间和应用场景。

然而,或许因为它的强大,让很多人觉得,掌握了它就很厉害或者它很难学,其实大可不必,戒除浮躁,踏踏实实,一步一个脚印,相信要不了多久就能有不错的进步。

这是我们的第一步,后续会深入学习。一起加油吧!~