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……finnallytry
{
//手动抛出一个异常
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");
else
alert("我是:others");
}
//测试
SayWord("a");
SayWord(12);
SayWord(true);
</script>
</head>
<body>
</body>
</html>
闭包
闭包就是函数的嵌套,通过内部函数(闭包)读取,外部函数里面的数据。闭包可以读取外部函数内的变量;闭包使读取的外部变量的那个值始终保持在内存中。