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函数
Aug 01 Javascript
Javascript 汉字字节判断
Aug 01 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
Three.js基础部分学习
Jan 08 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
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实现文件安全下载
2006/10/09 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
jquery $.getJSON()跨域请求
2011/12/21 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
js中function()使用方法
2013/12/24 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
python实现的分层随机抽样案例
2020/02/25 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
《我的第一本书》教学反思
2014/02/15 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
保安公司服务承诺书
2014/05/28 职场文书
档案保密承诺书
2014/06/03 职场文书
留学生求职信
2014/06/03 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL
关于MySQL中explain工具的使用
2023/05/08 MySQL