首页 web前端 js教程 JavaScript简介_javascript技巧

JavaScript简介_javascript技巧

May 16, 2016 pm 04:14 PM
javascript 简介

本文不是参考手册式文章,仅适用于对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中写入:

复制代码 代码如下:


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

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

内嵌式

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

复制代码 代码如下:


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

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

外联式

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

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

复制代码 代码如下:

var btn = document.getElementById("btn");
btn.onclick = function() {
     alert("be clicked");
}

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

复制代码 代码如下:


   
       
   
   

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

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Python ORM 性能基准测试:比较不同 ORM 框架 Python ORM 性能基准测试:比较不同 ORM 框架 Mar 18, 2024 am 09:10 AM

对象关系映射(ORM)框架在python开发中扮演着至关重要的角色,它们通过在对象和关系数据库之间建立桥梁,简化了数据访问和管理。为了评估不同ORM框架的性能,本文将针对以下流行框架进行基准测试:sqlAlchemyPeeweeDjangoORMPonyORMTortoiseORM测试方法基准测试使用了一个包含100万条记录的SQLite数据库。测试对数据库执行了以下操作:插入:向表中插入10,000条新记录读取:读取表中的所有记录更新:更新表中所有记录的单个字段删除:删除表中的所有记录每个操作

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

Python ORM 在大数据项目中的应用 Python ORM 在大数据项目中的应用 Mar 18, 2024 am 09:19 AM

对象关系映射(ORM)是一种编程技术,允许开发人员使用对象编程语言来操作数据库,而无需直接编写sql查询。python中的ORM工具(例如SQLAlchemy、Peewee和DjangoORM)简化了大数据项目的数据库交互。优点代码简洁性:ORM消除了编写冗长的SQL查询的需要,这提高了代码简洁性和可读性。数据抽象:ORM提供了一个抽象层,将应用程序代码与数据库实现细节隔离开来,提高了灵活性。性能优化:ORM通常会使用缓存和批量操作来优化数据库查询,从而提高性能。可移植性:ORM允许开发人员在不

深入了解常用的7种Java设计模式 深入了解常用的7种Java设计模式 Dec 23, 2023 pm 01:01 PM

了解Java设计模式:常用的7种设计模式简介,需要具体代码示例Java设计模式是一种解决软件设计问题的通用解决方案,它提供了一套被广泛接受的设计思想与行为准则。设计模式帮助我们更好地组织和规划代码结构,使得代码具有更好的可维护性、可读性和可扩展性。在本文中,我们将介绍Java中常用的7种设计模式,并提供相应的代码示例。单例模式(SingletonPatte

如何在JavaScript中获取HTTP状态码的简单方法 如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务

使用 Python ORM 实现高效的数据持久性 使用 Python ORM 实现高效的数据持久性 Mar 18, 2024 am 09:25 AM

对象关系映射(ORM)是一种技术,它允许在面向对象编程语言和关系数据库之间建立桥梁。使用pythonORM可以显着简化数据持久性操作,从而提高应用程序的开发效率和可维护性。优势使用PythonORM具有以下优势:减少样板代码:ORM自动生成sql查询,从而避免编写大量的样板代码。简化数据库交互:ORM提供了一个统一的接口,用于与数据库交互,简化了数据操作。提高安全性:ORM使用参数化查询,可以防止SQL注入等安全漏洞。促进数据一致性:ORM确保对象与数据库之间的同步,维护数据一致性。选择ORM有

如何使用WebSocket和JavaScript实现在线电子签名系统 如何使用WebSocket和JavaScript实现在线电子签名系统 Dec 18, 2023 pm 03:09 PM

如何使用WebSocket和JavaScript实现在线电子签名系统概述:随着数字化时代的到来,电子签名被广泛应用于各个行业中,以取代传统的纸质签名。WebSocket作为一种全双工通信协议,可以与服务器进行实时的双向数据传输,结合JavaScript可以实现一个在线电子签名系统。本文将介绍如何使用WebSocket和JavaScript来开发一个简单的在线

WebSocket与JavaScript:实现实时在线财经新闻的关键技术 WebSocket与JavaScript:实现实时在线财经新闻的关键技术 Dec 17, 2023 pm 11:21 PM

WebSocket与JavaScript:实现实时在线财经新闻的关键技术引言:随着互联网的发展,实时在线财经新闻对投资者和金融从业者来说变得越来越重要。传统的网络通信方式难以实现实时更新,而WebSocket协议和JavaScript提供了一种高效、可靠的解决方案。本文将介绍WebSocket与JavaScript的基本原理,并通过具体代码示例来演示如何利用

See all articles