Web开发之JavaScript

小引
笔者认为web开发包括设计html,javascript,css,以及一种高级语言,比如c#,java等等,本文分为三部分,第一部分为简单介绍javascript,第二部分为理解ECMAscript,最后部分为为javascript基础,所以针对javascript笔者不是很深理解,只能从下面几点对他进行分析,要是不对,请指出,谢谢!主要内容为:

第一部分:

javascript
特点
javascript的实现
ECMAScript标准
javascript的发展

第二部分:

关于 ECMAScript
1、相同的句法
2、面向对象编程
3、函数也是对象
4、对象都有原型
5、数据构造方便
6、JavaScript对象符号(JSON)
7、Fifth Edition

第三部分:
1、javascript语法
2、变量
3、数据类型
4、条件语句
5、循环语句
6、函数
参考

第一部分:
javascript介绍
JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择.
特点
是一种脚本编写语言
JavaScript是一种脚本语言,它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样,需要先编译,而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起,从而方便用户的使用操作。 基于对象的语言。JavaScript是一种基于对象的语言,同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此,许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
简单性
JavaScript的简单性主要体现在:首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型,并未使用严格的数据类型。
安全性
JavaScript是一种安全性语言,它不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。
动态性的
JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页(Home Page)中执行了某种操作所产生的动作,就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。
跨平台性
JavaScript是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑,软件仅需一个字处理软件及一浏览器,无须WEB服务器通道,通过自己的电脑即可完成所有的事情。
综合
JavaScript 是一种新的描述语言,它可以被箝入到 HTML 的文件之中。 JavaScript语言可以做到回应使用者的需求事件 (如: form 的输入) ,而不用任何的网路来回传输资料,所以当一位使用者输入一项资料时,它不用经过传给伺服端 (server)处理,再传回来的过程,而直接可以被客户端 (client) 的应用程式所处理。
JavaScript 和 Java 很类似,但到底并不一样! Java 是一种比 JavaScript 更复杂许多的程式语言,而 JavaScript 则是相当容易了解的语言。JavaScript 创作者可以不那麽注重程式技巧,所以许多 Java 的特性在 Java Script 中并不支援。
JavaScript实现
核心(ECMAScript)——JavaScript的核心ECMAScript描述了该语言的语法和基本对象
文档对象模型(DOM)——DOM描述了处理网页内容的方法和接口
浏览器对象模型(BOM)——BOM描述了与浏览器进行交互的方法和接口

ECMAScript标准

1997年,欧洲计算机制造商协会(ECMA)在JavaScript语言规范的基础上制定了ECMA-262标准,形成了网页脚本语言的规范。目前各主流浏览器均支持符合 ECMA-262标准的脚本语言。从此,Web浏览器就开始努力(虽然有着不同程度的成功和失败)将ECMAScript作为JavaScript实现的基础。尽管ECMAScript是一个重要的标准,但它并不是JavaScript唯一的部分,当然,也不是唯一被标准化的部分。实际上,一个完整的JavaScript实现是由以下3个不同部分组成的:
核心(ECMAScript)——JavaScript的核心ECMAScript描述了该语言的语法和基本对象
文档对象模型(DOM)——DOM描述了处理网页内容的方法和接口
浏览器对象模型(BOM)——BOM描述了与浏览器进行交互的方法和接口
目前所有的主流 Web 浏览器都支持 ECMA-262 第三版,即JavaScript 1.5版本,JavaScript 1.6-1.9只是ECMAScript (JavaScript on Gecko)升级至JavaScript 2.0的临时代号。
JavaScript的发展趋势

语言永远被当做工具,这一点从来都没有被改变过,以后也不会,语言是使用及和其他技术进行交流的方式和手段。例如,在Windows平台上,使用ADODB组件可以使JavaScript能处理支持SQL的数据库中的数据,使用FSO组件可以实现本地文件IO功能。这一切都说明了JavaScript位于应用开发的最顶端,其与低层技术的实现无关。
尽管平台技术不断发生变化,JavaScript仍将以不变的形式去使用平台提供的能力从而适应新的需求。未来的一段时间内,Web开发将是开发者众聚之地,也是JavaScript变得紫红的时代。

第二部分:

关于 ECMAScript
ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言(JAVAScript),目前推荐遵循的是ECMAScript 262(http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM),首先ECMAScript规范描述了脚本编程语言应实现的基本内容如下:语法 ,数据和变量的类型 ,语句 ,关键字 ,保留字 ,运算符 对象。所以符合ECMA-262规范的脚本编程语言必须实现该规范描述的所有的"类型、值、对象、属性、函数和程序语法及语义",并且必须支持Unicode字符标准(UCS)。在此基础上,每个具体实现还可以指定"额外的类型、值、对象、属性和函数",可以定义新的"程序和正则表达式语法"等。
1、相同的句法
首先是相同的句法,ECMAScript与其他流行的开放语言如c#,java,很类似,也就意味着其他语言风格看起来很想在ECMAScript上,比如


复制代码 代码如下:

for(i = 0; i < a.length; i++) {
if (a[i] == x)
return i;
}

2、面向对象编程
ECMAScript的支持面向对象编程。在ECMAScript对象命名属性的值。对象的属性,函数可以被称为方法。
window.setTitle(user.name);
3、函数也是对象
ECMAScript的功能是对象和属性作为参数传递,可以存储,并作为结果返回。从函数式编程上,让你的函数和方法导入功能从他们的调用者那里得到一个简单而灵活的方式。


复制代码 代码如下:

var recent = posts.sort(function(a, b) {
return (a.date > b.date ? -1 : 1);
}).slice(0, 10);

4、对象都有原型
受到本身程序语言的鼓舞,ECMAScript的对象继承原型对象的属性,基于原型的编程方便容易委托和灵活的覆盖对象的行为。


复制代码 代码如下:

function Car() { }
Car.prototype = new Object();
Car.prototype.wheels = 4;
Car.prototype.color = "black";
function RaceCar() { }
RaceCar.prototype = new Car();
RaceCar.prototype.color = "red";
var vroom = new RaceCar();
vroom.wheels // 4
vroom.color // "red"

5、数据构造方便
ECMAScript中谈到许多常见的数据类型,这样可以节省时间,使你的程序更加易读速记。
Arrays
var digits = [3, 1, 4, 1, 5, 9];
Objects

var img = { width: 320, height:160, src: "images/es.png" };
正则表达式

var email = /([^@]*)@([^@]*)/;
6、JavaScript对象符号(JSON)

JSON是一种流行,轻量级的数据交换格式。 JSON是交互式的网页和网络服务,部分特别有用,因为它的语法是ECMAScript的语法的一个子集。

7、Fifth Edition
欧洲计算机制造商协会最近公布的新的ECMAScript标准第五版的最终候选人草案。一些新的功能包括:
1、提高标准库
2、标准化的JSON库
3、反射的getter和setter方法

第三部分:
1、javascript语法
1.1区分大小写
1.2弱项类型变量
var MyName="Xinzhu";var Age =22;var School="Gxnu";var male=true; 1.3每项结尾分号可有,可无
1.4括号用于代码块

复制代码 代码如下:

if(myName=="xinzhu"){
var age=22;
alert(age);
}

1.5javascript注释方式和c语言,java相同
2、变量

通过var关键字声明,如:var boy="xinzhu";这里要注意,首字符是字母,可以是大小写,下划线和$,剩下的可以是下划线,$,任意之母;变量名不可以是关键字或者保留字

3、数据类型
underfined,代表一切不可知的事情,可以将underfined赋值给任何变量或者属性,但是并不意味清除该变量,反而会因此多了一个属性
null,大概有这个概念,但是什么东西都没有
boolean,是和非,用于代码处理和控制代码流程
Number,线性的事物,大小写和次序分明,用于代码进行批量处理,可以控制代码迭代或循环
String,面向人们的理性事物,可以通过人机沟通的信息,代码可以理解人的意图

4、条件语句

比较操作符,逻辑操作符,if语句,switch语句,这些都会很简单不布列
5、循环语句

for, while, 太简单不布列
6、函数
javascript代码只有function一种形式,function就是函数的类型,用于完成一个事件的方法
格式:


复制代码 代码如下:

function functionName([arg0,arg1,arg2......argN]){
statements
[returm[expression]]
}

例子:


复制代码 代码如下:

function sayHello(sName){
alert("Hello"+sName);
}
sayName(xinzhu);//调用

参考

1、2012年3月编程语言排行榜:JavaScript语言的回归(1) 
2、it公司面试手册
3、Standard ECMA-262:http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm
4、ecmascript:http://www.ecmascript.org/index.php
5、《精通JavaScript.jQuery》

时间: 2012-03-28

javascript开发随笔二 动态加载js和文件

这时候最好的做法就是按需引入,动态引入组件js和样式,文件load完成后调用callback,运行js.代码还是很简便的 1. 判断文件load完成.加载状态ie为onreadystatechange,其他为onload.onerror 复制代码 代码如下: if(isie){ Res.onreadystatechange = function(){ if(Res.readyState == 'complete' || Res.readyState == 'loaded'){ Res.onrea

javascript开发随笔3 开发iframe富文本编辑器的一点体会

就把遇到的问题记录一下.写这篇文章时用的TinyMCE编辑器就很强大,但毕竟是第三方的,项目也考虑了这些,如果做些自定义的东西不太方便. 1. 判断光标位置的元素(或者选中的部分)的样式.光标位置改变的时候更新工具栏对应按钮的样式.什么情况下光标的位置会改变呢?是键盘方向键和鼠标点击,于是就判断键盘事件和鼠标事件来执行光标移动的处理. a. 获得光标位置或选中元素:首先getSelection,创建range.然后获得元素,获取到元素之后就可以或得样式.tagName等等,做更多的操作,运行代码

JavaScript 开发工具webstrom使用指南

看到网上一篇介绍webstrom的文章,觉得功能确实强大,也知道为什么阿里巴巴的前端传到github上的文件为啥都有一个 .idea 文件,(传说淘宝内部推荐写js用webstrom) 我们可以理解 IDE 就是集成了很多你想要的功能,或者你不想要的功能.换句话说就是装了很多插件的 editor ,所以到目前为止,我还觉得没必要给它装什么插件. 那么接下来开始介绍webstrom的特色功能: WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具 任何一个编辑

javascript移动设备Web开发中对touch事件的封装实例

在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现. zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 tap 事件在某些安卓设备上存在事件穿透的 bug,其他类型的事件也或多或少的存在一些兼容性问题. 于是乎,干脆自己动手对这些常用的手势事件进行了封装,由于没有太多真实的设备来进行测试,可能存在一些兼容性问题,下面的代码也只是在 iOS 7.Andorid 4 上的一些比较常见的浏览器中测试通过. t

javascript开发随笔一 preventDefault的必要

不加的话貌似只在ie6出现过问题.出现过:改变图片地址,结果图片不见了,加载样式,但样式文件没了.就像是中断了资源的下载一样,正确时解释是 IE6下使用A元素来做按钮的时候一定要记得在onclick事件里面调用preventDefault(),IE6会强制关闭当前活动的HTTP连接,导致正在请求的其他资源或脚本加载不正常. 但资源如果已经被缓存了,就没有这个问题了 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> </head>

JavaScript插件化开发教程 (一)

一,开篇分析 Hi,大家!今天这系列文章主要是说说如何开发基于"JavaScript"的插件式开发,我想很多人对"插件"这个词并不陌生, 有的人可能叫"组件"或"部件",这不重要,关键是看如何设计,如何做一个全方位的考量,这是本文的重点阐述的概念.我想大家对 "jQuery插件的方式"有一定的了解,我们结合这个话题一起讨论一下,最终给出相关的实现方案,来不断提高自己的谁能力. 二,进入插件正题 一般来说,j

javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足

onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性! 在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件. 这样一来问题就解决了. 那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了. 但是oninput有个诡异,必须用addEventListener的方式来绑定事件.否则无效. 好

弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】

本文实例讲述了弱类型语言javascript开发中的一些坑.分享给大家供大家参考,具体如下: 测试1: (未声明变量自动提升为全局变量) test1(); function test1() { function setName() { name = '张三'; // 此处没有var声明,提升至全局 } setName(); console.log(name);// '张三' } 测试2: (函数内部局部变量的变量提升) test2(); function test2() { var a = 1;

JavaScript 开发中规范性的一点感想

可谓一劳永逸,不要重复造轮子:) 1.常用的方法统一放置 例如:在用户注册时,时常需要判断文本框中字符是否是汉字.英文.数字或邮箱地址等等.何不把这些方法统一放在一个脚本中,取名叫做utility.js呢? 复制代码 代码如下: //待需要时另存为一个js function isNull(obj) { if (!obj || obj.length==0 || obj=="") { parent.MyAlert("标注名不能为空!",alertImg); return

设计模式中的facade外观模式在JavaScript开发中的运用

概念 外观模式(门面模式),是一种相对简单而又无处不在的模式.外观模式提供一个高层接口,这个接口使得客户端或子系统更加方便调用. 外观模式并不是适配器模式,适配器模式是一种包装器,用来对接口进行适配以便在不兼容系统中使用它.而创建外观元素则是图个方便.它并不用于达到需要特定接口的客户系统打交道这个目的,而是用于提供一个简化的接口. JavaScript代码示例 用一段再简单不过的代码来表示 var getName = function(){ return ''svenzeng" } var ge

关于html+ashx开发中几个问题的解决方法

问题1:用委托字典代替switch...case. 这个问题是在处理请求时发现的,大家肯定也不愿意在自己的项目中建许多的handler来处理那么多的请求,于是就想到在一个handler里处理多个请求,ajax请求中都加一个action的参数,在handler里根据这个action做相应的处理或返回相应的数据,这里肯定没有人用if...else来判断action,大多数人都会想到用switch...case,一开始我也是用的switch,但渐渐地发现,每个case不像一个代码块,不能为其中的变量提

javascript开发中因空格引发的错误

废话不多说,先上代码给大家看看 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

jQuery移动web开发中的页面初始化与加载事件

页面初始化事件(pagebeforecreate.pagecreate) Jquery Mobile会自动基于page"内的增强的约定自动初始化一些插件.例如:给一个input输入框约定了type=range属性会自动生成一个自定义滑动条.这些自动初始化的行为是受"page"插件控制的,它在执行前后部署部署事件,允许你在初始化前后操作页面,或者甚至自己提供初始化行为,禁止自动初始化.注以下的页面初始化事件在每个"page"只被触发一次,与每次页面在显示或者

10个在JavaScript开发中常遇到的BUG

就算最牛的JavaScript开发者也会犯错.有时候导致程序的执行结果和预期不一样,有时候根本无法运行.这里我总结了10个常见的错误,我相信不管是初级还是资深开发者都可能遇到. 相等混淆 x是否和y相等?x是否为真?在JavaScript中,如何正确地做相等判断很重要,但似乎很多人搞不清楚.简单概括一下,主要是下面三种情况:条件判断(if, &&, etc.),相等操作符(==),和严格相等操作符(===). 甚至,有的时候会不小心把赋值(=)当做相等操作符使用,千万不要搞错了! 避免使用

UTF8编码开发中页面空白问题的解决方法

原因是全部采用utf8编码,包含文件的时候,最后的二进制流中包含了多次UTF8 BOM标记,IE不能正常解析包含多个UTF8 BOM 标记的页面,直接替换成实际显示的回车,这样导致一个空行,而firefox却没有这个问题. 故如果模板采用包含的方法包含多个utf8文件需要用ultraedit保存时另存为功能 选择utf8 无bom格式保存即可. 另外,如果中文页面在html head标记中将title标记放在<meta http-equiv="content-type" cont

javascript移动开发中touch触摸事件详解

事件对象是用来记录一些事件发生时的相关信息的对象.事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁! W3C DOM把事件对象作为事件处理函数的第一个参数传入进去 IE将事件对象作为window对象的一个属性(相当于全局变量) originalEvent对象 在一次偶然的使用中,我发现当使用on()函数并且传入第二个选择器参数时,e.touches[0]的访问为undefined,打印e发现,它的事件对象不是原生的事件对象.经查阅发现