JavaScript简介


Posted in Javascript onFebruary 15, 2015

本文不是参考手册式文章,仅适用于对JS产生一个大致的认知,如需JS的详细语法与应用请移步w3school

JavaScript是什么?

JavaScript的诞生

在1995年前后,当时世界上的主流带宽为28.8Kbps,现在世界平均下载带宽为21.9Mbps(数据来源于http://www.netindex.com)。当时的网民,每提交一次表单,都需要等待很久才能收到服务器的回应,甚至很可能等了几分钟收到的却是说缺少了某一项。为了改善用户体验,嵌入浏览器客户端的能实现简单表单判断的脚本诞生了,这就是JavaScript。

JavaScript最早是工作于Netscape (网景公司)的 Brendan Eich为即将在1995年发行的NetscapeNavigator 2.0(NN2.0)开发的,当时叫做LiveScript。由于当时是和非常热门的Sun公司合作的,为了赶上当时的潮流——Java语言,这门语言被命名为JavaScript。

JavaScript跟Java有什么关系?

这也是外行人听到JavaScript的第一反应,也是这门语言被诟病最多的问题之一。

严格的说,没有半毛钱关系。如果非要扯上关系,也许就是两者的部分函数相同、面向对象思想、判断结构、循环语句相同等等等等,但这些显然不是Java的专利,而是编程语言的共识。

JavaScript的标准化及发展历史

JavaScript推出时,用户体验更好的NN 浏览器主宰了浏览器市场,而微软一直在追赶。在推出IE3的时候,微软发布了VBScript并以JScript为名,实际上和Netscape的JavaScript没有多大区别(用今天的话来讲就是山寨)。面对微软的竞争,Netscape和Sun公司将自己的JavaScript草案提交给ECMA(欧洲计算机制造商协会)对JavaScript进行了标准化,最后形成了ECMAScript 的第一个版本(ECMA-262)。

有意思的是,网景公司在标准化JavaScript之后,内部却出现了问题,JavaScript的研究停滞,而微软则趁机赶超,推出了IE4,内置了第一个遵循ECMA规范的JavaScript引擎,比NN提前了一年。再加上微软系统逐步占领计算机操作系统市场,其预装的IE浏览器市场份额逐渐加大,NN不断被挤占市场。然而,当微软失去了最大的对手后,它就没有了发展的动力,IE6~IE8,无论是界面渲染还是脚本执行,都互不兼容,成为浏览器史上的一朵奇葩,也是前端开发者的噩梦。

1.v1 1997年06月 首版

2.v2 1998年06月 格式修正,以使得其形式与ISO/IEC16262国际标准一致

3.v3 1999年12月 强大的正则表达式,更好的文字链处理,新的控制指令,异常处理,错误定义更加明确,数输出的格式化及其它改变

4.v4 未完成...可能更明确的类的定义,命名空间等等...

5.v5 2009年12月  新增“严格模式(strict mode)”,一个子集用作提供更彻底的错误检查,以避免结构出错。澄清了许多第3版本的模糊规范,and accommodates behaviour of real-world implementations that differed consistently from that specification。增加了部分新功能,如getters及setters,支持JSON以及在物件属性上更完整的反射。

****2004年6月欧洲计算机制造商协会发表了ECMA-357标准,它是ECMAScript的一个扩延,它也被称为E4X(ECMAScript for XML)。

JavaScript跟ECMAScript有什么关系?

其实问题应该是JavaScript、JScript、ECMAScript三者有什么关系。实际上,ECMAScript是总的规范,JavaScript和JScript都是依照这个规范开发的,和ECMAScript相容,但包含了超出ECMAScript的功能。不过,现在无论是哪种,都通称为JavaScript,只因其最早出现,影响力最大,名字流传至今。

JavaScript能干什么?

网页上面,一切需要逻辑处理的操作都可以由JavaScript来完成。譬如:

•表单验证

•动画效果

•网页游戏

•倒计时

•……

还有很多很多种应用,在这里不赘述,相信大家学会这门语言之后会发现很多应用到的地方。

为什么要学JavaScript?

1.因为你别无选择,只有JavaScript可以控制所有常用的浏览器,而且JavaScript是世界上最重要的编程语言之一,学习web技术必须学会JavaScript。

2.JavaScript是一种优美的语言,它很好,所以我们要学

JavaScript的定位

1.JavaScript是一门轻量级的脚本语言,不需要编译,由JavaScript解析引擎解析运行(一般指浏览器,当然不排除node之类的解析器)

2.JavaScript拥有非函数式语言特性、函数式语言特性和动态语言特性,它的语法非常灵活

3.JavaScript是一门面向对象的编程语言,在JavaScript界有一句话:万物皆对象。其继承是基于原型的继承(我之前已经专门写了一篇阐述原型继承的文章)

4.JavaScript是一门类C语言,所以只要学过C的人都很容易上手JavaScript

5.JavaScript的编写不需要编译器,而只需要文本编辑器(记事本就免了,这里强烈推荐sublime text)

JavaScript有什么?

现在大家用的JavaScript包含了三大部分:DOM、BOM、ECMAScript(或称core js)。

DOM

这里默认大家对HTML、CSS至少有所了解,如果是直接跳过HTML、CSS来看本文的话,先看此处。

DOM,文档对象模型(document object model)

我们知道,XHTML要求标签必须闭合,嵌套必须正确。而标签的嵌套,就产生了父子关系(或者说,祖先-后代关系)。而DOM,提供了大量的API,让我们可以轻松操作DOM树。后面我会开一篇文章专门讲JS DOM。

使用DOM,我们能动态修改页面内容,调整样式等等,这也是JS多样化的一个体现。

BOM

BOM,浏览器对象模型(brower object model)

和DOM类似,只不过主体变成了浏览器。浏览器同样提供了大量的API,其中部分对JS开放,为我们提供了操作浏览器窗口的方法。

常见用处:

1.弹出新浏览器窗口的能力;

2.移动、关闭和更改浏览器窗口大小的能力;

3.可提供WEB浏览器详细信息的导航对象;

4.可提供浏览器载入页面详细信息的本地对象;

5.可提供用户屏幕分辨率详细信息的屏幕对象;

6.支持Cookies;

7.Internet Explorer对BOM进行扩展以包括ActiveX对象类,可以通过JavaScript来实现ActiveX对象。

ECMAScript core

也叫JS core,随便怎么叫,意思一样,都是表示JS这门语言的核心组成,包括变量定义,垃圾回收,语法,作用域等等。和上面提到的DOM和BOM不同,它们只要求我们能使用这些API,而ECMAScript core则是这门语言的精髓所在,需要不断钻研。下一章将进一步讲JS的语法。

JavaScript的使用

行内式

行内式即写在标签中的JavaScrip,例如我们在HTML中写入:

<button onclick="alert('be clicked');">点击</button>

当我们点击按钮时,将会弹框显示"be clicked"。
但注意,强烈不建议这么做,因为这样会给维护带来巨大的麻烦,每次需要更改事件我们都需要先找到该元素,然后修改其javascript内容,而且这些javascript代码也无法复用。

另外,写在标签中的事件需要带'on',而且标签内只能通过事件引入js,而不能写简单的js表达式

内嵌式

内嵌式即在html的script标签中写js代码,做法是在HTML中新增一个script标签,然后在标签中间插入你的任意js代码,如下:

<html>

    <body>

        <button id="btn">点击</button>

    </body>

    <script>

        <span style="font-family: Arial, Helvetica, sans-serif;">var btn = document.getElementById("btn");</span><pre name="code" class="javascript">        btn.onclick = function() {

            alert("be clicked");

        }

</script></html>

用内嵌式的话,就比行内式自由很多,可以写更多的代码,也可以避免引号的转义问题,维护也变得更轻松。但问题也是存在的,这些代码只能适用于这个页面,而无法被其他页面使用。

外联式

外联式把以上两种形式的缺点全部解决了。做法如下:

先新建一个文件,把后缀改为.js。例如,我们新建一个click.js文件,然后把刚才写的内嵌式里面的js代码拷贝进去(注意不包括script标签)

var btn = document.getElementById("btn");

btn.onclick = function() {

     alert("be clicked");

}

然后在HTML中通过script标签引入

<html>

    <body>

        <button id="btn">点击</button>

    </body>

    <script src="click.js"></script>

</html>

这样的好处在于同样的js代码可以被多个HTML页面共享,坏处是增加了文件数,增大了请求所需时间,所以应增强代码的复用性,并且最后要合并js文件(把不同的js文件合并成一个js文件)

Javascript 相关文章推荐
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 Javascript
JavaScript的原型继承详解
Feb 15 #Javascript
javascript 闭包详解
Feb 15 #Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 #Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 #Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 #Javascript
浅谈javascript中this在事件中的应用
Feb 15 #Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 #Javascript
You might like
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
js有序数组的连接问题
2013/10/01 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
Python去除列表中重复元素的方法
2015/03/20 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
详解Scrapy Redis入门实战
2020/11/18 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
如何现实servlet的单线程模式
2014/08/05 面试题
团日活动总结书
2014/05/08 职场文书
小学教师党员承诺书
2015/04/27 职场文书
叶问观后感
2015/06/15 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang