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 相关文章推荐
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
python画折线图的程序
2018/07/26 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
python tornado使用流生成图片的例子
2019/11/18 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
青年创业培训欢迎词
2014/01/08 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
素质教育培训心得体会
2016/01/19 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js