JavaScript 基础之一-优快云博客

本文介绍了JavaScript的基本概念、特性及架构，涵盖了数据类型、事件处理机制、常见错误等内容，并详细讲解了如何创建对象及其方法。

什么是JavaScript?

JavaScrjpt是由Netscape公司开发的一种脚本语言（scrptingIanguage)。在HTML基础上，使用Javascript可以开发交互式Web网页．Javascript的使用使得网页和用户之间多了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加动态的内容．运行用Javascript编写的程序需要支持Javascript语言的浏览器。

Javascr短小精悍，又是在客户机上执行的，大大提高了网页的浏览束度和交互能力．同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。
Javascript是一种脚本语言，它采取小程序段的方式实现编程,像其他脚本语言一样，Javascript同样也是提供了一个简易的开发过程；它的基本结构形式与C、C++不同，不像这些语言一样，需要先编译，而是在
程序运行过程中被逐行地被解释．它与HTML表示结合在一起。

JavaScript特性

基于对象、跨平台

动态性

javascript是动态的可以直接对用户操作做出响应,无需经过Web服务器程序,以某事件作为驱动,如用户单击按钮提交、滚动鼠标等

安全性

即不可以访问本地文件、服务器文件、删除等操作，仅仅实现网页之间的交互，功能专一。

JavaScript架构

[javascript]view plaincopy 
   
 <scriptlanguage="javascript"type="text/javascript"> 
  
 //添加javascript代码 
  
 </script>

数据类型

1.基础数据类型

数值型、字符串型、逻辑型、undefined、null

2.复合数据类型

对象、数组、函数

由于JavaScript是一种无类型语言，所以，数组元素可以是任意的数据类型，同一数组的不同元素也可以具有不同的类型，数组元素也可以是其它数组，可以创建多维数组

数组声明如下：

[javascript]view plaincopy 
   
 
   
 /************************** 
 *声明数组的三种方式 
 **************************/ 
 //声明一个无类型数组 
 varstrArray=newArray(); 
 //声明一个长度为5的数组 
 varstrArray=newArray(5); 
 //声明一个函数5个指定元素的数组 
 varstrArray=newArray(1,2,3,4,5); 
  
 //Array对象的length属性用于说明数组包含的元素个数 
 varintNum=strArray.length; 

事件处理机制

单击事件按钮例子：当单击事件触发时，弹出提示框，表示单击事件触发。

实现代码：

[javascript]view plaincopy 
   
 
   
 <scriptlanguage="javascript"type="text/javascript"> 
 //对单击事件作出响应 
 functionClick() 
 { 
 alert("单击事件触发！"); 
 } 
  
 </script> 
  
 <body>//给单击按钮添加事件Onclick="javascript:Click()"事件 
 <inputname="单击"type="button"align="middle"value="单击按钮"onclick="javascript:Click()"/> 
 </body> 

Javascript是一种松散类型、动态类型语言，声明变量时无需指定数据类型，从而更灵活、简单。

运算符、比较运算符、逻辑符号、三大流程控制语句、VB/C/C++等语言类型，我们都很熟悉

常见错误

1.区分大小写

如函数 function number(){} 与 function Number() {} 是两个不同的函数。

2.单引号、双引号

JS本身并没有规定一定使用双引号或单引号，但为了代码易读我们再JS代码中使用单引号而在HTML中使用双引号。例如

[javascript]view plaincopy 
   
 <scriptlanguage="javascript"type="text/javascript"> 
 //单双引号分开，使代码容易理解 
 vartemp='<h2class=“a”>Alist</h2> 
  
 </script>

4.不支持重载，会将原有函数覆盖掉

5.换行符

[javascript]view plaincopy 
   
 <scriptlanguage="javascript"type="text/javascript"> 
  
 //"\"为换行符 
 vartemp='<h2class=“a”>Alist</h2>\ 
 <ol>\ 
 <ol>\ 
  
 </script>

JavaScript应用的很广，也很多，是一种目前流行的脚本语言。

====================================================================================

JavaScript与JScript关系
1. 这样追溯的以前,javaScript和Jscript分别是netscape公司和microsoft公司为自己的浏览器而设计开发的脚本语言，在这两种脚本语言没有统一标准以前，很多的Web程序员不得不为不同的浏览器而设计不同的脚本语言运行，很是苦恼，为了解决脚本同一问题，于是诞生了ECMAScript,是一种国际标准化的javascript版本。现在的主流浏览器都支持这种版本。现在javaScript这个词也是代表这两种标准的意思，于是用了这个词语。
JavaScript开发环境与编辑工具
1. 它的运行环境很简单，只需要拥有浏览器既可以运行javaScript代码
2. 编辑工作也有很多种，比如常见的PSPad、DreamWave、VS、记事本等等
JavaScript基本架构
1. [javascript] view plain copy
  1. <spanstyle="font-size:18px;"><head>
  2. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  3. <title>第一份JavaScript程序</title>
  4. </head>
  5. <body>
  6. <scriptlanguage="javascript">
  7. //批注文字隐藏
  8. 
  11. </script>
  12. </body>
  13. </html></span>
  上面的是为了解决浏览器不兼容的问题，如果旧版浏览器不兼容JavaScript代码，将隐藏JavaScript代码，否则会把它视为HTML代码一部分显示在浏览器中，称为无用信息。
JavaScript程序代码的位置

4.1 Head区域的JavaScript代码

在Head区域的JavaScript代码是为了保证运行程序代码调用前相关函数程序代码已经加载，因为代码执行是从上到下依次执行，通常这个区域代码为了Body区域程序代码所调用的事件或处理函数，如下代码执行结果：

[html]view plaincopy 
   
 
   
 <spanstyle="font-size:18px;"><title>第一份JavaScript程序</title> 
 <scriptlanguage="javascript"> 
 //批注文字隐藏 
 <!-- 
 functionshowmessage() 
 { 
 alert("Head区域的JavaScript程序代码"); 
 } 
 --> 
 </script> 
 </head> 
 <bodyonload="JavaScript:showmessage();"> 
 <h2>Head区域的JavaScript程序代码</h2> 
 <hr> 
 在Head区域运行事件处理程序 
 </body></span> 

执行结果为：

当弹出框弹出来时，Body部分内容已经显示出来，即这部分代码已经加载完，Body部分代码是在Head区域之前加载。

4.2 Head区域的JavaScript代码

[javascript]view plaincopy 
   
 
   
 <spanstyle="font-size:18px;"><!--先加载--> 
 <linkhref="css/admin.global.css"rel="stylesheet"type="text/css"/> 
 <linkhref="css/admin.index.css"rel="stylesheet"type="text/css"/> 
 <!--后加载--> 
 <scriptsrc="js/jquery-1.4.2.min.js"type="text/javascript"></script> 
 <scriptsrc="js/jquery.utils.js"type="text/javascript"></script> 
 <linkhref="jBox/Skins/Green/jbox.css"rel="stylesheet"type="text/css"/></span> 

上面链接CSS文件或是JS文件是按着从上到下顺序加载的,如果某个文件需要用到另一个文件,那么就需要放在该文件之前在家,否则则会出错,这也是我们经常遇到的问题,希望大家多多注意.

5 Body区域的JavaScript代码

在加载网页时，Body区域内的程序代码会马上运行，这些程序代码输出的内容属于网页的一部分，看下面代码

[javascript]view plaincopy 
   
 
   
 <spanstyle="font-size:18px;"><body> 
 <h2>Body区域的JavaScript程序代码</h2> 
 <hr> 
 <scriptlanguage="javascript"> 
 //批注文字隐藏 
 <!-- 
 alert("Body区域的JavaScript程序代码"); 
 --> 
 </script> 
 在Body区域运行事件处理程序 
 </body></span> 

执行结果为：

此次执行结果中，Body在<JavaScript>后面的代码没有执行，说明在Body里的代码用网页加载时马上执行，而不是调用时再执行，因此需要调用或处理事件的函数或代码应当放入Head区域里面。

另外，如果把调用代码卸载Body里面，因为我们所做的操作都是属于网页一部分，也需要写在网页内部。

6 写作风格

JavaScript写作风格在上一篇博客已经说明，这里需要注意下载 { } 大括号后面没有“ ；”号。

======================================================================

怎么样创建一个对象?
1. 利用Object创建自定义对象
  1. JavaScript能够自定义对象来扩展程序的功能，不仅如此，它还能扩展JavaScript提供的内置对象，新增内置对象的属性或方法
  2. 例如下面代码,创建一个myObj对象
  3. [javascript] view plain copy
    1. <spanstyle="font-size:18px;"><scriptlanguage="javascript"type="text/javascript">
    2. //声明一个对象副本
    3. varmyObj=newObject();
    4. //简写形式
    5. varmyObj=new{};
    6. </script></span>
  4. 给对象增加属性
2. [javascript] view plain copy
  1. <spanstyle="font-size:18px;">//给对象增加属性
  2. myObj.Name='李龙生';
  3. myObj.Age=24;</span>
3. 也可以用with语句
  1. [javascript] view plain copy
    1. <spanstyle="font-size:18px;">//with语句对对象操作
    2. with(myObj)
    3. {
    4. Name='李龙生';
    5. Age='24';
    6. }</span>

PS:JavaScript的对象可以看做是一个数组，对象名即数组名，属性即数组元素，属性值即元素值。

利用构造函数创建对象
1. 构造函数(Constructor Function)是一个函数，能够定义对象的属性和方法，其实，JavaScript内置对象也是一些构造函数，如Object、Array、String等分别对应Object()、Array()、String()构造函数。

1. JavaScript能够自己建立对象的构造函数，定义对象拥有的属性和方法，然后,利用定义好的函数建立对象,也可以把它视为一个对象的声明，如下代码：
2. 1. [javascript] view plain copy
    1. <spanstyle="font-size:18px;"><scriptlanguage="javascript"type="text/javascript">
    2. //定义一个验证登陆函数
    3. functionyanzheng(UserName,UserPassWord)
    4. {
    5. this.name=UserName;
    6. this.password=UserPassWord;
    7. }
    8. </script></span>
  1. 上述构造函数拥有两个参数值，可以建立属性值，this命令指的是建立的对象本身.
  1. 使用new命令建立对象副本
  2. [javascript] view plain copy
    1. <spanstyle="font-size:18px;">//实例化对象
    2. yanzheng1=newyanzheng('李龙生','123456');</span>
一般方式对象副本方式增加属性和方法
1. 只需通过对象自己增加，很简单不再举例子。
通过JavaScript的Prototype对象增加属性和方法
1. JavaScript属于一种基于原型语言，不同于Java、VB等，基于原型的语言其类与实例对象区别不大
1. 例如我们可以拿一个现成的对象作为原型建立其他对象，此对象可以分享原型对象的属性和方法，使用prototype对象可以继承其他对象，而这一点是基于Class中，做不到的，在Class中需要用深浅复制的Prototype模式才可以实现。
1. 每一个对象都拥有Prototype属性，这个属性会被创建这个对象副本的对象所继承，这样创建新对象时不用重复已有的属性、方法，节省了内存空间。
1. 增加属性

[javascript]view plaincopy 
   
 <spanstyle="font-size:18px;">//通过原型增加级别属性 
 yanzheng.prototype.Level="管理员";</span>

增加方法

[javascript]view plaincopy 
   
 <spanstyle="font-size:18px;">//通过原型增加登陆方法 
 yanzheng.prototype.login=BeginLogin;</span>

e. 通过Prototype继承其它对象

继承不但可以使用原对象作为原型建立其它对象，还可以扩展对象的属性和方法，例如对上面验证函数如果新增一个安全模式验证函数，但它也需要用户名、密码，只需继承上面即可。看下面代码

[javascript]view plaincopy 
   
 
   
 <spanstyle="font-size:18px;">//登陆模式 
 functionSSL(ssl) 
 { 
 this.SSL=ssl; 
 } 
 //prototype对象的继承 
 SSL.prototype=newyanzheng();</span> 