javascript基础【一】_PHP教程

javascript基础【一】

2015/11/13 16:10:04

javascript自诞生之初就处于争论之中，但是这依旧不影响其成为今天WEB编程的主流语言。最初的javascript设计用于在浏览器端提供数据交互、画面渲染、会话认证等动态功能，如今node.js的流行使得javascript扩展到了服务器端。

javascript作为一门弱类型的脚本语言，语法并不复杂，作为今时代的程序猿们，无论是否进行WEB开发，熟悉了解javascript都百利无一害。所以今天就让我们来干净利落地认识下javascript吧！

一、什么是javascript？

javascript是一种动态脚本语言，专门用于Web应用开发，最主要的功能是为页面添加动态行为效果，具体有：

• 将动态文本嵌入到HTML页面；
• 响应浏览器事件（javascript是一种事件相应语言，对于用户鼠标点击、移动等行为都可以进行响应）；
• 读写HTML元素（如表单提交等）；
• 在数据提交到服务器前验证数据；
• 检测访客的浏览器信息；
• 控制cookie，包括创建和修改等；
• 基于Node.js技术进行服务器端编程；

可以说，javascript是在客户端针对HTML页面动态行为进行编程的直译型脚本语言，使得Web浏览器不仅仅是显示用户页面那么简单。但是也正是由于javascript部署在客户端，因此其安全性一直是人们关注的焦点。

二、javascript调试

javascript脚本的执行主要通过各大浏览器厂商自主开发的解析引擎实现。现有的主流javascript解析引擎主要有：Chrome的V8引擎、IE9的JS引擎以及Firefox的TraceMonkey；

进行javascript开发，我们往往习惯有个类似于VS那样的IDE可以直接使用，但是由于javascript本身就是一种“轻量级”语言，因此我们只需要简单的文本编辑器 + javascript解析引擎就可以进行开发调试了。

大家当然可以使用Windows下的记事本或者Linux的Vim编辑器，但是我建议大家还是使用专门的代码编辑器比较好，因为具有语法高亮提示、自动补全等诸多便利。这里我使用的文本编辑器是nodepad++，而搭配的调试器就是简答的Firefox，当然你也可以使用IE、Chrome甚至Safri，因为nodepad++支持多种浏览器调试。

在Notepad++中的“运行”菜单下可以选择在哪种浏览器中运行调试javascript脚本，也可以使用上面的快捷键。

三、javascript测试程序

接下来，我们提供一个非常简答的javascript脚本，里面涉及的知识点会逐一讲解。

首先是我们的javascript脚本：program.js，我们先来看一段代码：

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>document.writeln('');<br /> </li><li>document.writeln("Hello, world!");<br /></li><li>var a = 100000000000000000000e400;<br /></li><li>if (a < Infinity)<br /></li><li>{<br /></li><li>document.writeln(a);<br /></li><li>document.writeln('a less than Infinity, 3Q~~');<br /></li><li>}<br /></li><li>else<br /></li><li>{<br /></li><li>document.writeln(a);<br /></li><li>document.write('Sorry, a more than Infinity!\n');<br /></li><li>} </li></ol>

第1行：document.writeln()与document.write()都用来向终端（浏览器）输出信息，区别在于“ln”版本自带换行符；
第3行：定义一个变量，无需声明其类型，只需要使用关键字“var”即可；
第4行：javascript中依旧可以使用基本的控制结构，如if-else, while以及for等；javascript的数字统一用64位的浮点表示，所以1.0与1表示的值相同；此外，NaN表示一个不能产生正常结果的运算结果，而所有大于1.798e308的数值统一用Infinity表示，e308表示10的308次幂；所以当输入的值大于定义值时，统一显示为Infinity；

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>var a = 10, b = 9;<br /> </li><li><br /></li><li>document.writeln(a);<br /></li><li><br /></li><li>function add(x,y)<br /></li><li>{<br /></li><li>return x + y;<br /></li><li>}<br /></li><li><br /></li><li>function subtract(x,y)<br /></li><li>{<br /></li><li>return x - y;<br /></li><li>}<br /></li><li><br /></li><li>document.writeln(add(a,b)); </li></ol>

第5行开始定义了一个简单的函数，一个是加法（add），另一个则是减法（subject），然后在终端输出时调用该函数；

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>document.writeln("Global Object...");<br /> </li><li>var MyObj = {};<br /></li><li><br /></li><li>MyObj.member = {'first-name': "Alice", last_name : "Winston"};<br /></li><li><br /></li><li>MyObj.record = {<br /></li><li>airline: 'T2B',<br /></li><li>number: 777,<br /></li><li>departure: {<br /></li><li>Date:"Sunday",<br /></li><li>Time:"2015-11-01",<br /></li><li>City:"Taiwan"<br /></li><li>},<br /></li><li>arrival: {<br /></li><li>Date:'Monday',<br /></li><li>Time:"2015-11-02",<br /></li><li>City:"Beijing"<br /></li><li>}<br /></li><li><br /></li><li>};<br /></li><li><br /></li><li>document.writeln("Retrive a non-exit attribute value ..exa..MyObj.people..");<br /></li><li>document.writeln(MyObj.people);<br /></li><li><br /></li><li>document.writeln("typeof MyObj.member is ...");<br /></li><li>document.writeln(typeof MyObj.member);<br /></li><li><br /></li><li>document.writeln("MyObj.record.number is ...");<br /></li><li>document.writeln(typeof MyObj.record.number);<br /></li><li><br /></li><li>document.writeln('MyObj.record.airline is ...');<br /></li><li>document.writeln(typeof MyObj.record.airline); </li></ol>

由于javascript的函数中没有局部域，因此经常使用全局域。有编程经验的大伙儿都知道，全局变量非常容易混乱，所以建议像本文一样在开头统一建立一个全局对象，然后所有的操作作为其中的一部分，也就是说我们定义的全局对象其实是一个“全局容器”。
javascript中简单数据类型包括数字、字符串、布尔值、null值和undefined五种，其它所有的值都是对象，如数组、函数以及正则表达式。简言之，javascript中对象就是可变的键控集合（keyed collections）。对象由不同的属性组成，属性的名字可以是包括空字符串在内的任意字符串，属性值可以是除undefined之外的任何值。

第2行初始化一个空的全局对象MyObj;
第4行为对象MyObj添加一个属性member，而member又是一个对象，包含两个键值对，每个键值对用','分隔，最后一个属性不用加符号；
第7-8行的属性名为一个字符串，这里建议使用javascript的标识符规范（数字、字母与下划线，首字符只能是字母），因为这样写可以省略掉“”来表示字符串，如“first-name”不能省略“”，而可以写成first_name；不仅如此，在对象的属性检索时可以方便的使用引用符号“.”进行，比如MyObj.member.last_name，而非规范标识符只能用MyObj.member.["first-name"],非常麻烦；

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>//对象属性值的更新<br /> </li><li>document.writeln('Attribute value update...');<br /></li><li>document.writeln(' Once Date is ' + typeof MyObj.record.departure.date);<br /></li><li><br /></li><li>MyObj.record.departure.Date = 'Saturday';<br /></li><li><br /></li><li>document.writeln(MyObj.record.departure.Date);<br /></li><li><br /></li><li>//对象枚举<br /></li><li>document.writeln('Object enume...')<br /></li><li>var name;<br /></li><li>for (name in MyObj.record)<br /></li><li>{<br /></li><li>document.writeln(name + ':' + MyObj.record[name]); </li></ol>

第3行使用typeof获得对象的类型，typeof运算符的值只有"string"、"boolen"、"undefined"、"function"和"object"五种；
第5行直接对已有的属性更新，若已存在，则更新；若没有，则创建该属性键值对；
第9行展示了枚举一个对象的所有属性，借助for-in结构，我们可以枚举出所有的属性（包括函数和原型中的属性），而且得到的枚举不一定是按顺序的，所以一般建议使用for(）的形式规定遍历方式；

接下来是我们的program.html

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li><strong style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-style:initial;border-color:initial;"><html><br />  </li><li><strong style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-style:initial;border-color:initial;"><body><br /> </li><li><strong style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-style:initial;border-color:initial;"><pre class="brush:php;toolbar:false"><br /> </li><li><strong style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-style:initial;border-color:initial;"> <br /> </li><li><strong style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-style:initial;border-color:initial;">