3、Javascript学习 - IT软件人员学习系列文章

接下来，我们开始进入Javascript语言的学习。

Javascript语言是一种解释性的语言，不同于ASP.NET、C#语言的这种编译性的语言。它随着HTML网页的发布而发布，就是说嵌入到HTML页面中进行运行。

下面是一段简单的Javascript语言：

<script type=”text/javascript”>

         alert(“Hello World”);

</script>

上面的Javascript脚本将显示一个对话框，并提示显示“Hello World”字符串。

 

一、Javascript脚本在页面中的嵌入方式有三种：

1、文件链接嵌入方式。在HTML页面的head标记内进行嵌入。

<script src="scripts/jQuery/jquery-1.11.1.js"></script>

上述的标记告诉HTML页面引擎在对应的目录下找到Javascript脚本语言文件并运行之。

 

2、HTML页面嵌入方式。在HTML页面上进行嵌入（放在HTML页面的head和body内）。

<script type="text/javascript">

    var test = "";

    var str = $.JSFn.PlugInInfo.Name;

    $("#Label1").html(str);

</script>

上述Javascript脚本语言将设置Label1标记的内容。

 

3、直接在HTML标记属性嵌入。在HTML标记内进行嵌入Javascript脚本。

<input type=”button” id=”btnOK” onclick=”javascript:alert(“Hello World”);” />

上述的脚本嵌入在按钮标记属性内部，点击按钮将显示对话框。

 

二、Javascript语言概述

Javascript语言是大小写敏感的，所以在事件onclick和onClick是不一样的，这个要注意，当发现脚本错误的时候，检查脚本大小写问题。Javascript包括六种数据类型:Number、String、Boolean、Undefined、Null和Function型。

 

三、Javascript语言的编程。

引用命名空间的概念，JavaScript的这些概念全部都是处于window这个命名空间下面的。

 

 

下面通过程序举例说明:

 

变量：

 

<script type="text/javascript" language="javascript">

var oopVar=new String("JavaScript Variable OOP");

document.write(oopVar);                        

document.write("<br><br>");                    

window.oopVar ="Window.oopVar";                 

document.write(oopVar);                        

 </script>                                           

 

函数：

 

<script type="text/javascript" language="javascript">

function OOPFunction()                         

{                                              

return new String("JavaScript Function OOP");

}                                               

document.write(window.OOPFunction());           

</script>                                          

 

 

 

对象：

 

<script type="text/javascript" language="javascript">

function OOPObject()                            

{                                               

this.title=new String("JavaScript Object OOP");

}                                                

var oopOjbect=new OOPObject ();                 

document.write(window.oopOjbect.title);         

</script>                                           

 

以上的代码印证了JavaScript的所有全局变量、全局函数和全局对象都是基于window这个命名空间的，或者也可以说是基于window这个基类的。

 

下面说说JavaScript语言中另一个重要的概念：匿名函数。举例如下：

 

<script type="text/javascript" language="javascript">           

function()                                                    

{                                                            

this.title=new String("JavaScript Anonymity Function OOP");

}                                                           

</script>                                                        

 

与其说是匿名函数，不过是JavaScript语言中一个重要而特殊的概念，即没有函数名称的函数就称为匿名函数。

 

这里我再做说明，匿名函数的作用域同样是基于window这个命名空间的，只不过在语法上，我们无法通过函数名称的调用来调用匿名函数。但是匿名函数可以按下面的写法运行：

 

<script type="text/javascript" language="javascript">          

(function()                                                  

{                                                           

Var title=new String("JavaScript Anonymity Function OOP");

document.write(title);                                  

})();                                                        

</script>                                                       

 

我们无法通过函数名称来调用匿名函数，但是可以通过指针来间接运行匿名函数，举例如下：

 

<script type="text/javascript" language="javascript">                          

var anonyObject=new function()                                             

{                                                          

this.title=new String("JavaScript Anonymity Function OOP");

this.AnonyFunction=function()                            

{                                     

return this.title;                 

}                                     

};                                                         

document.write(window.anonyObject.title);                                  

document.write("<br><br>");                                               

document.write(window.anonyObject.AnonyFunction());                       

</script>                                                                     

 

例子中，第一行，anonyObject这个对象指向的是一个匿名函数。而对象是基于window命名空间的，所以可以通过 第10行和第14行来调用这个匿名函数的内容。注意，这里的anonyObject是一个对象，与下面这个函数是不一样的：

 

<script type="text/javascript" language="javascript">                          

function AnonyObjcet ()                                              

{                                                           

this.title=new String("JavaScript Anonymity Function OOP");

this.AnonyFunction=function()                            

{                                      

return this.title;                 

}                                     

};                                                         

var anonyObject=new AnonyObjcet();

</script>                                                                     

 

这个例子中，可以认为anonyObject对象指向的是AnonyObjcet这个名称的函数。

 

对象相当于动态方法，而匿名函数相当于静态方法。

 

匿名函数的好处有很多，以后再说。

 

四、Javascript的相关框架。

现在Javascript有很多个框架，比如ExtJS、jQuery、YUI等等，后续我们会对jQuery这个框架进行介绍。

 

 

下面提供Javascript学习所需要看的书籍：

http://pan.baidu.com/s/1ntMFOMH