您的位置：首页 > Web前端 > JavaScript

JavaScript总结(二：基础知识）

2013-08-19 12:44 423 查看

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="内部函数" onclick="javascript:alert('内部函数的间接使用');" />
		<input type="button" value="自定义函数" onclick="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");
				else
					alert("我是：others");
			}
			
			//测试
			SayWord("a");
			SayWord(12);
			SayWord(true);
		</script>
	</head>
	<body>
	</body>
</html>

闭包

闭包就是函数的嵌套，通过内部函数(闭包)读取，外部函数里面的数据。闭包可以读取外部函数内的变量；闭包使读取的外部变量的那个值始终保持在内存中。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航