HTML中如何使用JavaScript？

HTML要想使用JavaScript，首先自己要拥有它，有了才可以用，就好像我们学习一样，先要认，后才知，好了废话不多说了，下面进入这个问题的解答过程。

JavaScript在HTML的存在方式

JavaScript在HTML中存在的方式有两种，一种是直接存在，一种是间接引用。这两种方式的利弊就不多讲了，都知道，只想说的就是具体的实现。

直接存在

就是直接在HTML文档中写上相应的javascript代码，具体如下：

<html><head><!-- 本文档采用的编码方式为utf-8 --><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>文档的标题</title><script language="javascript" type="text/javascript">function Say(){var strWord="Hello World!";alert(strWord);}Say();</script></head><body>		</body>
</html>

间接存在

就是在HTML文档中引入相应的js文件，具体如下：

<!-- html文档里的内容 -->
<html><head><!-- 本文档采用的编码方式为utf-8 --><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>文档的标题</title><script language="javascript" type="text/javascript" src="Common.js">					<!-- 这里里面不写其他的任何东西，因为里面存放的就是Common.js文件里的代码，虽然现在我们看不见 --></script></head><body>		</body>
</html>//下面是Common.js文档中的代码
function Say()
{var strWord="Hello World!";alert(strWord);
}
alert("aaa");

使用JavaScript

JavaScript的使用分为两种方式，一种是直接使用，另一种就是通过事件机制使用

直接使用

HTML中的javascript代码块会让浏览器的控制程序交给相应的javascript解释器去完成，如果是自定义的函数，javascript是不会将其执行的，除非我们在javascript代码块中直接调用了该函数，如：“直接存在”代码中的Say()函数一样，处理函数外，其他的凡在javascript代码块中存在的javascript语句，都会被直接解释并执行。

间接使用

针对javascript中的函数(自定义和系统自带)说的，通过javascript的事件机制实现，其事件的具体体现就是HTML为响应这个功能而在标签中添加的一些属性，其描述的是发生在html元素上的某些行为。具体的事件如下图：

下面代码是HTML中间接使用javascript的示例，通过事件来完成：

<html><head><!-- 本文档采用的编码方式为utf-8 --><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>文档的标题</title><script language="javascript" type="text/javascript">function Say(){var strWord="自定义函数的间接使用";alert(strWord);}//Say();</script></head><!-- 一个事件可以对应多个函数，直接在分号后面写上:函数名();就可以了 --><input type="button" value="内部函数" οnclick="javascript:alert('内部函数的间接使用');" /><input type="button" value="自定义函数" οnclick="javascript:Say();"<body>		</body>
</html>

JavaScript的语法基础

数据类型

数据类型包括：字符串，数字，数组，布尔，对象，null，Undefined

JavaScript中的数据类型没有相应的关键字，只能通过其值的形式来代表这种数据类型，所以称JavaScript是一种弱类型语言，所以，我们在声明变来的时候，最好给其赋上相应的值，要不然，计算机不知道这个变量代表什么数据类型，更要命的是，如果我们在没有赋初值的情况使用该变量，那么其结果达不到我们的预期结果。

下面通过代码来说明一下如何确定一个变量的数据类型。字符串：var strName ="";或者var strName;strName=""; 数字：var intCount=0;var floatCount=0.0; 数组：var arr=new Array();arr(0)="adsf"; 布尔：var flag = true;

类型转化

类型转化分为二种：隐式转换和显示转换。

隐式转换：表达式中包含不同类型数据则在计算过程中会进行隐式类型转换，具体的如下。数字 + 字符串：数字转换为字符串；数字 + 布尔值：true转换为1，false转换为0；字符串 + 布尔值：布尔值转换为字符串true或false。

显示类型转换：显示类型用到的函数如下。函数parseInt()：强制转换成整数，例：parseInt("3.14")等于3；函数parseFloat()：强制转换成浮点数，例：parseFloat("3.14")等于3.14；函数eval()：将字符串强制转换为表达式并返回结果，例：eval("1+2")等于3，eval("1<2")等于true。

运算符

算术运算符：+(可作为字符串的连接运算符)，-，*，/，++，--，%(取余)；赋值运算符：=，+=等；关系运算符：==，!=，===(严格等于)，>，<，>=，<=；逻辑运算符：&&，||，！。其他的不说了，具体的也不讲了，自己下去试试就知道了。

块结构

顺序结构

顺序结构就是单条的语句连续的集合。break；continue；等等单条的语句。顺序结构无处不在，单条语句也可以称为顺序结构。

选择结构

if…else（二选一）格式

//可以嵌套if—else；可以直有if；可以省略{},但if或else之作用于其后一语句
if(表达式)
{//表达式为真执行的代码}
else
{//表达式为假执行的代码}

switch…case(多选一)格式

switch(表达式)
{case 匹配1: 语句……;break;case 匹配2: 语句……;break;default://表达式的结果和所有匹配值没有对上时，就会执行该块代码
}

循环结构

for格式

for(初始条件;判断条件;每次循环后动作)
{//循环代码块
}

while格式

while(判断条件)
{//循环代码块
}

do……while格式

do{//第一次，先执行，后判断
}while(判断条件)

for……in(遍历数组)

var myArr= new Array("0","1","2");
for(var index in myArr)
{alert(myArr[index]);
}

异常处理结构

try……catch……finnally

try
{//手动抛出一个异常throw new Error("自定义错误信息提示！"); 
}
catch(ex)
{   //显示异常错误信息提示alert("错误：" + ex.message);
}
finally
{alert("无论是否抓到异常都执行该块的代码！");
}

函数

通用的格式，其他的在其面向对象的特点中讲解

//方法一：
function 函数名()
{//这种方法可以作为“函数”的私有方法
}
//方法二：
var fMethod = function()
{//此时变量名fMethod就是该方法的变量名(不包含括号)，方法一和方法二的功能是一样的//这种方法也可以作为“函数”的私有方法
}
//方法三：
fMethod = function()
{//此方法变量名fMethod就是该方法的变量名(不包括括号),这种方法作为“函数”的内部方法//此函数为全局函数，可以作为“函数”内的一个方法，但是没有意思，其不具有封装性，外界可以直接通过它的名字就可以访问到他
}
//方法四：
this.fMethod = function()
{//此方法运用了封装的技术，this指该函数的对象，也就是说外界不能直接访问到它，需要“对象”才可以
}

注意：函数中会有一个隐含的arguments对象来保存函数的参数，arguments就是一个数组，我们不需要再在函数中声明参数了，使用参数时，直接往里面传送就行了。也就是说，functiona()和functiona(x,y)两个函数的定义其实是一个函数的定义，我们的参数完全不必用；使用函数，当需要往里面传参数的时候，就直接传就行，当要找到那些传进去的参数时，就直接使用aruments数组(这个不用我们定函数的时候，声明这个变来那个，是系统自动给我们提供的)

面向对象的特点

我们在进行编程的时候，都是先编写一个函数，然后，那个地方需要的时候，我们就调用它，先编写的那个函数就是一个模板，不会自动执行，只有当我们调用它的时候他才会执行，ok，知道这个后，我们在看JavaScript，在JavaScript中的函数有个很大的特点，就是可以实现嵌套，就是我A函数除了可以有些变量外，里面还可以有B函数，因为这个机制，JavaScript就可以实现面向对象的封装特性，另外，JavaScript中有种变量可以存放函数这么一个东西，相应于函数指针，也就是说A函数有一个变量，这个变量时之前定义的B函数，这样，A函数就可以通过这个变量实现对B所有方法和变量的继承，当然，在A函数也可以通过这个变量把B函数中的函数改变一下，这样就是先了重写的机制，当然，函数中也可以实现重载的机制。在这段话的描述中，我们说的那个“函数（A）”和我们面向对象的类差不多，但是，又不是类，不知道他具体叫什么，知道它的机制就行，我们可以把这个“函数”叫做“类”，在这里需要注意的时候，这个“函数”也可以当成一般的函数那样被调用，上面说到的那个“变量（指向其他函数）”，我们称它为“对象”，好了，具体的不多说了，下面我们看看JavaScript到底怎么实现了面向对象的封装，继承和多态的机制。

封装

封装使方法和变量具有了一定的界限，达到一种不是任何“东西”说想用就可以用的目的，使用他们时需要通过“门卫”才可以用，这样使的数据安全性(设想成千上万个无相关的函数都可以访问这些变量，这个隐患是多么的大)大大提供。javascript通过“函数”来实现。

<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>封装测试</title><script language="javascript" type="text/javascript">			function Human(name){	// 私有属性 var _name = "qingshan";/* this通常指向的是我们正在执行的函数本身具有封装性的公有属性，对象名.strname不能strname="青山"这么定义，这样外界就可以直接调用了strname，注意虽访问无限制，但是其生存期受限*/this.strname="qingshan";// 私有方法 function setName()  //可转化为 var setName = function(){_name = name;strname=_name;alert("私有方法，用于设置姓名！");}/* 具有封装性的公有方法 对象名.sayHello()不能sayHello = function()这样定义，这样的话，当他存在后，外界就可以直接sayHello()这样的调用 */this.sayHello = function(){					alert("调用共有方法：Hello, my name is " + strname);}// 模拟构造函数，它就是一个私有方法function constructor(){alert("调用构造函数");setName();alert("构造函数调用结束");					} //使用定义的函数constructor();//return this;}// 增加类的静态方法 staticMethod是静态方法的名称，可以随意变Human.staticMethod = function(){alert("通过‘类’直接调用静态方法");}// 通过原型(prototype)增加公有方法Human.prototype.sayGoodbye = function(){alert("通过原型调用共有方法：Goodbye, " + strname);}// 当成类来使用var m_human = new Human("青山");m_human.sayHello();//m_human.setName();无法调用m_human.sayGoodbye();// 调用类的静态方法Human.staticMethod();// 直接当成函数使用Human("青山");</script></head><body></body>
</html>

继承

对于之前的描述继承的机制其实不是一种真正的机制，真正的是使用原型链的形式弄，在这里需要知道的是，function函数的对象里面有一个prototype属性，这个属性里面可以存放其父的引用，我们在定义了一个function的对象后，当使用这个对象的一个方法的时候，它会现在自己的返回内进行查找看看有没有相应的方法，如果没有，系统会顺着prototype的引用往父函数中查找相应的查找，依次类推，知道找到为止，下面的代码说的是通过原型链的方法进行继承

<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>继承测试</title><script language="javascript" type="text/javascript">			//定义父function Father(){	//定义共有属性this.name ="";this.age = 0;}//通过原型的方式定义共有方法Father.prototype.setName = function(name){this.name = name;}Father.prototype.setAge = function(age){this.age=age;;}				Father.prototype.sayHello = function(){alert("父类中的sayHello()方法调用结果：" + this.name + "；" + this.age);}			//定义子function Son(name,age){//当Son中没有相应的方法时，系统会顺着prototype中的引用，查找父类中的prototype方法this.setName(name);this.setAge(age);}//继承Son.prototype=new Father();//覆盖父类中的sayHello方法Son.prototype.sayHello = function(){alert("子类中的sayHello()方法调用结果：" + this.name + ";" + this.age);}//测试var c=new Son("青山（子类）",20);c.sayHello();			</script></head><body></body>
</html>

多态

多态的实现包括方法的重载和重写，关于重写，上面继承中已经有了，下面只写一个关于重载的实例，因为javascript是弱类型语言，其变量只有在输入的情况下才可以确定其类型，根据这个特点，我们可以实现其多态，具体如下：

<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>多态</title><script language="javascript" type="text/javascript">function SayWord(wordType){// 通过typeof函数，判定不同类型的参数。if (typeof(wordType)=="string")alert("我是：string");else if (typeof(wordType)=="number")alert("我是：number");elsealert("我是：others");}//测试SayWord("a");SayWord(12);SayWord(true);</script></head><body></body>
</html>