JavaScript高级

错误处理

编程中有三种类型的错误:(a)语法错误,(b)运行时错误,以及(c)逻辑错误。

语法错误

语法错误,也称为解析错误,在传统编程语言的编译时和JavaScript中的解释时发生。

例如,以下行导致语法错误,因为它缺少右括号。

<script type="text/javascript">
   <!--
	  window.print(;
   //-->
</script>

当JavaScript中出现语法错误时,只有与语法错误包含在同一线程中的代码才会受到影响,而其他线程中的其余代码将被执行,假设它们中的任何内容都不依赖于包含错误的代码。

运行时错误

运行时错误(也称为异常)在执行期间(编译/解释之后)发生。

例如,以下行导致运行时错误,因为此处语法正确,但在运行时,它尝试调用不存在的方法。

<script type="text/javascript">
   <!--
	  window.printme();
   //-->
</script>

异常也会影响它们发生的线程,允许其他JavaScript线程继续正常执行。

逻辑错误

逻辑错误可能是最难追踪的错误类型。 这些错误不是语法或运行时错误的结果。 相反,当你在驱动你的脚本的逻辑中犯了错误并且你没有得到你期望的结果时,它们会发生。

您无法捕获这些错误,因为这取决于您的业务需求,您希望在程序中添加哪种类型的逻辑。

try...catch...finally 语句

最新版本的JavaScript增加了异常处理功能。 JavaScript实现了try ... catch ... finally构造以及throw运算符来处理异常。

您可以捕获程序员生成的和运行时异常,但是您无法捕获JavaScript语法错误。

这是try ... catch ... finally块语法 −

<script type="text/javascript">
   <!--
	  try {
		 // Code to run
		 [break;]
	  } 
	  
	  catch ( e ) {
		 // Code to run if an exception occurs
		 [break;]
	  }
	  
	  [ finally {
		 // Code that is always executed regardless of 
		 // an exception occurring
	  }]
   //-->
</script>

try块必须紧跟一个catch块或一个finally块(或两者之一)。 当try块中发生异常时,异常放在e中并执行catch块。 在try / catch之后无条件执行可选的finally块。

例子

这是一个我们试图调用一个不存在的函数的例子,而这个函数又引发了异常。 让我们看看它如何在没有尝试的情况下表现出来−

<html>
   <head>
	  
	  <script type="text/javascript">
		 <!--
			function myFunc()
			{
			   var a = 100;
			   alert("Value of variable a is : " + a );
			}
		 //-->
	  </script>
	  
   </head>
   
   <body>
	  <p>Click the following to see the result:</p>
	  
	  <form>
		 <input type="button" value="Click Me" onclick="myFunc();" />
	  </form>
	  
   </body>
</html>

现在让我们尝试使用try ... catch捕获此异常并显示用户友好的消息。 如果要从用户隐藏此错误,也可以禁止显示此消息。

<html>
   
   <head>
	  
	  <script type="text/javascript">
		 <!--
			function myFunc()
			{
			   var a = 100;
			   try {
				  alert("Value of variable a is : " + a );
			   } 
			   
			   catch ( e ) {
				  alert("Error: " + e.description );
			   }
			}
		 //-->
	  </script>
	  
   </head>
   
   <body>
	  <p>Click the following to see the result:</p>
	  
	  <form>
		 <input type="button" value="Click Me" onclick="myFunc();" />
	  </form>
	  
   </body>
</html>

您可以使用finally块,它将始终在try / catch之后无条件执行。 这是一个例子。

<html>
   
   <head>
	  
	  <script type="text/javascript">
		 <!--
			function myFunc()
			{
			   var a = 100;
			   
			   try {
				  alert("Value of variable a is : " + a );
			   }
			   
			   catch ( e ) {
				  alert("Error: " + e.description );
			   }
			   
			   finally {
				  alert("Finally block will always execute!" );
			   }
			}
		 //-->
	  </script>
	  
   </head>
   
   <body>
	  <p>Click the following to see the result:</p>
	  
	  <form>
		 <input type="button" value="Click Me" onclick="myFunc();" />
	  </form>
	  
   </body>
</html>

throw语句

您可以使用throw语句来引发内置异常或自定义异常。 稍后可以捕获这些异常,您可以采取适当的措施。

例子

以下示例演示如何使用throw语句。

<html>
   
   <head>
	  
	  <script type="text/javascript">
		 <!--
			function myFunc()
			{
			   var a = 100;
			   var b = 0;
			   
			   try{
				  if ( b == 0 ){
					 throw( "Divide by zero error." ); 
				  }
				  
				  else
				  {
					 var c = a / b;
				  }
			   }
			   
			   catch ( e ) {
				  alert("Error: " + e );
			   }
			}
		 //-->
	  </script>
	  
   </head>
   
   <body>
	  <p>Click the following to see the result:</p>
	  
	  <form>
		 <input type="button" value="Click Me" onclick="myFunc();" />
	  </form>
	  
   </body>
</html>

您可以使用字符串,整数,布尔值或对象在一个函数中引发异常,然后您可以在与上面相同的函数中捕获该异常,或者使用try ... catch块在另一个函数中捕获该异常。

onerror()方法

onerror事件处理程序是第一个促进JavaScript中的错误处理的功能。 只要页面发生异常,就会在窗口对象上触发错误事件。

<html>
   
   <head>
	  
	  <script type="text/javascript">
		 <!--
			window.onerror = function () {
			   alert("An error occurred.");
			}
		 //-->
	  </script>
	  
   </head>
   
   <body>
	  <p>Click the following to see the result:</p>
	  
	  <form>
		 <input type="button" value="Click Me" onclick="myFunc();" />
	  </form>
	  
   </body>
</html>

onerror事件处理程序提供三条信息来识别错误的确切性质 −

  • Error message − 浏览器为给定错误显示的相同消息
  • URL − 发生错误的文件
  • Line number− 给定URL中导致错误的行号

以下是显示如何提取此信息的示例。

例子

<html>
   
   <head>
	  
	  <script type="text/javascript">
		 <!--
			window.onerror = function (msg, url, line) {
			   alert("Message : " + msg );
			   alert("url : " + url );
			   alert("Line number : " + line );
			}
		 //-->
	  </script>
	  
   </head>
   
   <body>
	  <p>Click the following to see the result:</p>
	  
	  <form>
		 <input type="button" value="Click Me" onclick="myFunc();" />
	  </form>
	  
   </body>
</html>

您可以以您认为更好的方式显示提取的信息。

您可以使用onerror方法(如下所示)在加载图像时出现任何问题时显示错误消息。

<img src="myimage.gif" onerror="alert('An error occurred loading the image.')" />

您可以使用带有许多HTML标记的onerror来显示错误时的相应消息。

验证

在客户端输入所有必要数据然后按下“提交”按钮后,通常用于在服务器上进行的表单验证。 如果客户端输入的数据不正确或者丢失了,则服务器必须将所有数据发送回客户端,并请求使用正确的信息重新提交表单。 这真是一个漫长的过程,曾经给服务器带来了很多负担。

JavaScript提供了一种在将客户端计算机上的数据发送到Web服务器之前验证其数据的方法。 表单验证通常执行两个功能。

  • 基本验证 - 首先,必须检查表单以确保填写所有必填字段。它只需要循环遍历表单中的每个字段并检查数据。
  • 数据格式验证 - 其次,必须检查输入的数据的格式和值是否正确。 您的代码必须包含适当的逻辑来测试数据的正确性。

例子

我们将举例说明验证过程。 这是一个简单的html格式表单。

<html>
   
   <head>
	  <title>Form Validation</title>
	  
	  <script type="text/javascript">
		 <!--
			// Form validation code will come here.
		 //-->
	  </script>
	  
   </head>
   
   <body>
	  <form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
		 <table cellspacing="2" cellpadding="2" border="1">
			
			<tr>
			   <td align="right">Name</td>
			   <td><input type="text" name="Name" /></td>
			</tr>
			
			<tr>
			   <td align="right">EMail</td>
			   <td><input type="text" name="EMail" /></td>
			</tr>
			
			<tr>
			   <td align="right">Zip Code</td>
			   <td><input type="text" name="Zip" /></td>
			</tr>
			
			<tr>
			   <td align="right">Country</td>
			   <td>
				  <select name="Country">
					 <option value="-1" selected>[choose yours]</option>
					 <option value="1">USA</option>
					 <option value="2">UK</option>
					 <option value="3">INDIA</option>
				  </select>
			   </td>
			</tr>
			
			<tr>
			   <td align="right"></td>
			   <td><input type="submit" value="Submit" /></td>
			</tr>
			
		 </table>
	  </form>
	  
   </body>
</html>

基本验证

首先让我们看看如何进行基本表单验证。 在上面的表单中,我们调用validate()来在onsubmit事件发生时验证数据。 以下代码显示了此validate()函数的实现。

<script type="text/javascript">
   <!--
	  // Form validation code will come here.
	  function validate()
	  {
	  
		 if( document.myForm.Name.value == "" )
		 {
			alert( "Please provide your name!" );
			document.myForm.Name.focus() ;
			return false;
		 }
		 
		 if( document.myForm.EMail.value == "" )
		 {
			alert( "Please provide your Email!" );
			document.myForm.EMail.focus() ;
			return false;
		 }
		 
		 if( document.myForm.Zip.value == "" ||
		 isNaN( document.myForm.Zip.value ) ||
		 document.myForm.Zip.value.length != 5 )
		 {
			alert( "Please provide a zip in the format #####." );
			document.myForm.Zip.focus() ;
			return false;
		 }
		 
		 if( document.myForm.Country.value == "-1" )
		 {
			alert( "Please provide your country!" );
			return false;
		 }
		 return( true );
	  }
   //-->
</script>

数据格式验证

现在我们将看到如何在将输入的表单数据提交到Web服务器之前验证它们。

以下示例显示如何验证输入的电子邮件地址。 电子邮件地址必须至少包含“@”符号和点(。)。 此外,'@'不能是电子邮件地址的第一个字符,最后一个点必须至少是'@'符号后面的一个字符。

例子

<script type="text/javascript">
   <!--
	  function validateEmail()
	  {
		 var emailID = document.myForm.EMail.value;
		 atpos = emailID.indexOf("@");
		 dotpos = emailID.lastIndexOf(".");
		 
		 if (atpos < 1 || ( dotpos - atpos < 2 )) 
		 {
			alert("Please enter correct email ID")
			document.myForm.EMail.focus() ;
			return false;
		 }
		 return( true );
	  }
   //-->
</script>

动画

您可以使用JavaScript创建复杂的动画,但不限于以下元素 −

  • 烟花
  • 淡化效果
  • 滚入或滚出
  • Page-in或Page-out
  • 物体运动

本教程提供了有关如何使用JavaScript创建动画的基本知识。

JavaScript可用于根据逻辑方程或函数确定的某种模式在页面周围移动大量DOM元素(<img />, <div>或任何其他HTML元素)

JavaScript提供了以下两个在动画程序中经常使用的函数。

  • setTimeout(function,duration) - 此函数从现在起持续数毫秒后调用函数。
  • setInterval(function,duration) - 该函数在每个持续时间毫秒后调用函数。
  • clearTimeout(setTimeout_variable) - 该函数调用清除setTimeout()函数设置的任何计时器。

JavaScript还可以设置DOM对象的许多属性,包括它在屏幕上的位置。 您可以设置对象的顶部和左侧属性,以将其放置在屏幕上的任何位置。 这是它的语法。

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points; 

or

// Set distance from top edge of the screen.
object.style.top = distance in pixels or points; 

操作动画

因此,让我们使用DOM对象属性和JavaScript函数实现一个简单的动画,如下所示。 以下列表包含不同的DOM方法。

  • 我们使用JavaScript函数getElementById()来获取DOM对象,然后将其分配给全局变量imgObj。
  • 我们已经定义了一个初始化函数init()来初始化imgObj,我们已经设置了它的位置和左边的属性。
  • 我们在窗口加载时调用初始化函数。
  • 最后,我们调用moveRight()函数将左边距离增加10个像素。 您也可以将其设置为负值,将其移动到左侧。

例子

<html>
   
   <head>
	  <title>JavaScript Animation</title>
	  
	  <script type="text/javascript">
		 <!--
			var imgObj = null;
			
			function init(){
			   imgObj = document.getElementById('myImage');
			   imgObj.style.position= 'relative'; 
			   imgObj.style.left = '0px'; 
			}
			
			function moveRight(){
			   imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
			}
			
			window.onload =init;
		 //-->
	  </script>
	  
   </head>
   
   <body>
   
	  <form>
		 <img   src="/images/html.gif" />
		 <p>Click button below to move the image to right</p>
		 <input type="button" value="Click Me" onclick="moveRight();" />
	  </form>
	  
   </body>
</html>

自动化动画

在上面的示例中,我们看到了每次单击时图像如何向右移动。 我们可以使用JavaScript函数setTimeout()自动执行此过程,如下所示−

这里我们添加了更多方法。 那么让我们看看这里有什么新东西 −

  • moveRight()函数调用setTimeout()函数来设置imgObj的位置。
  • 我们添加了一个新函数stop()来清除setTimeout()函数设置的计时器,并将对象设置在其初始位置。

例子

<html>
   
   <head>
	  <title>JavaScript Animation</title>
	  
	  <script type="text/javascript">
		 <!--
			var imgObj = null;
			var animate ;
			
			function init(){
			   imgObj = document.getElementById('myImage');
			   imgObj.style.position= 'relative'; 
			   imgObj.style.left = '0px'; 
			}
			
			function moveRight(){
			   imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
			   animate = setTimeout(moveRight,20); // call moveRight in 20msec
			}
			
			function stop(){
			   clearTimeout(animate);
			   imgObj.style.left = '0px'; 
			}
			
			window.onload =init;
		 //-->
	  </script>
	  
   </head>
   
   <body>
   
	  <form>
		 <img   src="/images/html.gif" />
		 <p>Click the buttons below to handle animation</p>
		 <input type="button" value="Start" onclick="moveRight();" />
		 <input type="button" value="Stop" onclick="stop();" />
	  </form>
	  
   </body>
</html>

滚动鼠标事件

这是一个简单的示例,显示了鼠标事件的图像翻转。

让我们看看我们在下面的例子中使用了什么 −

  • 在加载此页面时,“if”语句检查图像对象是否存在。 如果图像对象不可用,则不会执行此块。
  • Image()构造函数创建并预加载一个名为image1的新图像对象。
  • 为src属性分配名为/images/html.gif的外部图像文件的名称。
  • 同样,我们在此对象中创建了image2对象并分配了/images/http.gif。
  • #(哈希标记)禁用链接,以便浏览器在单击时不会尝试转到URL。 此链接是图像。
  • 当用户的鼠标移动到链接上时触发onMouseOver事件处理程序,当用户的鼠标离开链接(图像)时触发onMouseOut事件处理程序。
  • 当鼠标在图像上移动时,HTTP图像从第一个图像变为第二个图像。 当鼠标远离图像时,将显示原始图像。
  • 当鼠标远离链接时,初始图像html.gif将重新出现在屏幕上。
<html>
   
   <head>
	  <title>Rollover with a Mouse Events</title>
	  
	  <script type="text/javascript">
		 <!--
			if(document.images){
			   var image1 = new Image(); // Preload an image
			   image1.src = "/images/html.gif";
			   var image2 = new Image(); // Preload second image
			   image2.src = "/images/http.gif";
			}
		 //-->
	  </script>
	  
   </head>
   
   <body>
	  <p>Move your mouse over the image to see the result</p>
	  
	  <a href="#" onMouseOver="document.myImage.src=image2.src;" onMouseOut="document.myImage.src=image1.src;">
	  <img name="myImage" src="/images/html.gif" />
	  </a>
   </body>
</html>

多媒体

JavaScript导航器对象包含一个名为plugins的子对象。 此对象是一个数组,浏览器上安装的每个插件都有一个条目。 navigator.plugins对象仅由Netscape,Firefox和Mozilla支持。

例子

这是一个示例,显示如何列出浏览器中安装的所有插件 −

<html>
   
   <head>
	  <title>List of Plug-Ins</title>
   </head>
   
   <body>
	  <table border="1">
		 <tr>
			<th>Plug-in Name</th>
			<th>Filename</th>
			<th>Description</th>
		 </tr>
		 
		 <script language="JavaScript" type="text/javascript">
			for (i=0; i<navigator.plugins.length; i++) {
			   document.write("<tr><td>");
			   document.write(navigator.plugins[i].name);
			   document.write("</td><td>");
			   document.write(navigator.plugins[i].filename);
			   document.write("</td><td>");
			   document.write(navigator.plugins[i].description);
			   document.write("</td></tr>");
			}
		 </script>
		 
	  </table>
	  
   </body>
</html>

检查插件

每个插件在数组中都有一个条目。 每个条目都具有以下属性 −

  • name − 是插件的名称。
  • filename − 是加载以安装插件的可执行文件。
  • description − 是由开发人员提供的插件的描述。
  • mimeTypes − 是一个数组,其中包含插件支持的每种MIME类型的一个条目。

您可以在脚本中使用这些属性来查找已安装的插件,然后使用JavaScript,您可以播放相应的多媒体文件。 看一下下面的例子。

<html>
   
   <head>
	  <title>Using Plug-Ins</title>
   </head>
   
   <body>
   
	  <script language="JavaScript" type="text/javascript">
		 media = navigator.mimeTypes["video/quicktime"];
		 
		 if (media){
			document.write("<embed src='quick.mov' height=100 width=100>");
		 }
		 else
		 {
			document.write("<img src='quick.gif' height=100 width=100>");
		 }
	  </script>
	  
   </body>
</html>

控制多媒体

让我们举一个适用于几乎所有浏览器的实例 −

<html>
   
   <head>
	  <title>Using Embeded Object</title>
	  
	  <script type="text/javascript">
		 <!--
			function play()
			{
			   if (!document.demo.IsPlaying()){
				  document.demo.Play();
			   }
			}
			function stop()
			{
			   if (document.demo.IsPlaying()){
				  document.demo.StopPlay();
			   }
			}
			function rewind()
			{
			   if (document.demo.IsPlaying()){
				  document.demo.StopPlay();
			   }
			   document.demo.Rewind();
			}
		 //-->
	  </script>
	  
   </head>
   
   <body>
	  
	  <embed   name="demo"
	  src="http://www.amrood.com/games/kumite.swf"
	  width="318" height="300" play="false" loop="false"
	  pluginspage="http://www.macromedia.com/go/getflashplayer"
	  swliveconnect="true">
	  </embed>
	  
	  <form name="form"   action="#" method="get">
		 <input type="button" value="Start" onclick="play();" />
		 <input type="button" value="Stop" onclick="stop();" />
		 <input type="button" value="Rewind" onclick="rewind();" />
	  </form>
	  
   </body>
</html>

调试

不时,开发人员在编码时会犯错误。 程序或脚本中的错误称为错误。

查找和修复错误的过程称为调试,是开发过程的正常部分。 本节介绍可以帮助您完成调试任务的工具和技术。

IE中的错误消息

追踪错误的最基本方法是在浏览器中启用错误信息。 默认情况下,当页面上发生错误时,Internet Explorer会在状态栏中显示错误图标。

双击此图标将转到一个对话框,显示有关发生的特定错误的信息。

由于此图标很容易被忽略,因此Internet Explorer会为您提供在发生错误时自动显示“错误”对话框的选项。

要启用此选项,请选择工具→Internet选项→高级选项卡。 然后最后选中“显示关于每个脚本错误的通知”框选项,如下所示 −

Firefox或Mozilla中的错误消息

Firefox,Netscape和Mozilla等其他浏览器会将错误消息发送到名为JavaScript Console或Error Consol的特殊窗口。 要查看控制台,请选择工具→错误控制或Web开发。

遗憾的是,由于这些浏览器在发生错误时不提供可视指示,因此您必须保持控制台处于打开状态,并在脚本执行时注意错误。

错误通知

在控制台或Internet Explorer对话框中显示的错误通知是语法和运行时错误的结果。 这些错误通知包括发生错误的行号。

如果您使用的是Firefox,则可以单击错误控制台中可用的错误,转到脚本中出现错误的确切行。

如何调试脚本

有多种方法可以调试JavaScript −

使用JavaScript验证器

检查JavaScript代码是否存在奇怪错误的一种方法是通过一个程序运行它来检查它以确保它是有效的并且它遵循该语言的官方语法规则。 这些程序称为验证解析器或简称验证器,通常带有商业HTML和JavaScript编辑器。

最方便的JavaScript验证器是Douglas Crockford的JavaScript Lint,它可以在Douglas Crockford的JavaScript Lint免费获得。

只需访问该网页,将JavaScript(仅限JavaScript)代码粘贴到提供的文本区域,然后单击jslint按钮。 该程序将解析您的JavaScript代码,确保所有变量和函数定义遵循正确的语法。 它还会检查JavaScript语句,例如if和while,以确保它们也遵循正确的格式

将调试代码添加到您的程序

您可以使用程序中的alert()或document.write()方法来调试代码。 例如,您可以编写如下内容−

var debugging = true;
var whichImage = "widget";

if( debugging )
alert( "Calls swapImage() with argument: " + whichImage );
var swapStatus = swapImage( whichImage );

if( debugging )
   alert( "Exits swapImage() with swapStatus=" + swapStatus );

通过检查alert()出现的内容和顺序,您可以非常轻松地检查程序的运行状况。

使用JavaScript调试器r

调试器是一个将脚本执行的所有方面置于程序员控制之下的应用程序。 调试器通过一个接口提供对脚本状态的细粒度控制,该接口允许您检查和设置值以及控制执行流程。

将脚本加载到调试器后,可以一次运行一行或指示在某些断点处停止。 一旦执行停止,程序员就可以检查脚本及其变量的状态,以确定是否有问题。 您还可以查看变量值的变量。

适用于Mozilla和Netscape浏览器的最新版本的Mozilla JavaScript调试器(代号为Venkman)可在http://www.hacksrus.com/~ginda/venkman下载。

开发人员的有用提示

您可以记住以下提示,以减少脚本中的错误数量并简化调试过程 −

  • 使用大量的注释。 通过注释,您可以解释为什么以您的方式编写脚本并解释特别困难的代码部分。
  • 始终使用缩进来使代码易于阅读。 缩进语句还使您可以更轻松地匹配开始和结束标记,花括号以及其他HTML和脚本元素。
  • 编写模块化代码。 尽可能将语句分组为函数。 函数允许您对相关语句进行分组,并以最少的工作量测试和重用代码部分。
  • 在命名变量和函数的方式上保持一致。 尝试使用足够长的有意义的名称,并描述变量的内容或函数的用途。
  • 命名变量和函数时使用一致的语法。 换句话说,保持全部小写或全部大写; 如果您更喜欢Camel-Back符号,请始终如一地使用它。
  • 以模块化方式测试长脚本。 换句话说,在测试它的任何部分之前,不要尝试编写整个脚本。 在添加下一部分代码之前写一篇文章并使其工作。
  • 使用描述性变量和函数名称,避免使用单字符名称。
  • 注意你的引号。 请记住,引号在字符串周围成对使用,并且两个引号必须具有相同的样式(单引号或双引号)。
  • 注意你的等号。 您不应该使用单个=进行比较。
  • 使用var关键字显式声明变量。

图像

您可以使用JavaScript来创建客户端图像映射。客户端图像映射由<img />标记的usemap属性启用,并由特殊的<map>和<area>扩展标记定义。

正常情况下,使用<img />元素将要形成地图的图像插入到页面中,除了它带有一个名为usemap的额外属性。 usemap属性的值是<map>元素上您将要遇到的name属性的值,前面是井号或井号。

<map>元素实际上为图像创建了地图,通常紧跟在<img />元素之后。它充当实际定义可点击热点的<area />元素的容器。 <map>元素只携带一个属性,name属性,它是标识地图的名称。这就是<img />元素知道要使用哪个<map>元素的方式。

<area>元素指定定义每个可点击热点边界的形状和坐标。

当鼠标移动到图像的不同部分时,以下代码组合了图像映射和JavaScript,以在文本框中生成消息。

<html>
   
   <head>
	  <title>Using JavaScript Image Map</title>
	  
	  <script type="text/javascript">
		 <!--
			function showTutorial(name){
			   document.myform.stage.value = name
			}
		 //-->
	  </script>
	  
   </head>
   
   <body>
	  <form name="myform">
		 <input type="text" name="stage" size="20" />
	  </form>
	  
	  <!-- Create  Mappings -->
	  <img src="/images/usemap.gif" alt="HTML Map" border="0" usemap="#tutorials"/>
	  
	  <map name="tutorials">
		 <area shape="poly" 
			coords="74,0,113,29,98,72,52,72,38,27"
			href="/perl/index.htm" alt="Perl Tutorial"
			target="_self" 
			onMouseOver="showTutorial('perl')" 
			onMouseOut="showTutorial('')"/>
		 
		 <area shape="rect" 
			coords="22,83,126,125"
			href="/html/index.htm" alt="HTML Tutorial" 
			target="_self" 
			onMouseOver="showTutorial('html')" 
			onMouseOut="showTutorial('')"/>
		 
		 <area shape="circle" 
			coords="73,168,32"
			href="/php/index.htm" alt="PHP Tutorial"
			target="_self" 
			onMouseOver="showTutorial('php')" 
			onMouseOut="showTutorial('')"/>
	  </map>
   </body>
</html>

浏览器

重要的是要理解不同浏览器之间的差异,以便按照预期的方式处理每个浏览器。 因此,了解您的网页运行的浏览器非常重要。

要获取有关您的网页当前正在运行的浏览器的信息,请使用内置的导航器对象。

Navigator属性

您可以在网页中使用几个与Navigator相关的属性。 以下是每个名称和说明的列表。

序号 属性和描述
1 appCodeName
此属性是一个字符串,其中包含浏览器的代码名称,Netscape for Netscape和Microsoft Internet Explorer for Internet Explorer。
2 appVersion
此属性是一个字符串,其中包含浏览器的版本以及其他有用的信息,例如其语言和兼容性。
3 language
此属性包含浏览器使用的语言的双字母缩写。 仅限网景。
4 mimTypes[]
此属性是一个包含客户端支持的所有MIME类型的数组。 仅限网景。
5 platform[]
此属性是一个字符串,其中包含编译浏览器的平台。“Win32”用于32位Windows操作系统
6 plugins[]
此属性是一个包含客户端上已安装的所有插件的数组。 仅限网景。
7 userAgent[]
此属性是一个字符串,其中包含代码名称和浏览器版本。 该值被发送到始发服务器以识别客户端。

Navigator方法

有几种特定于Navigator的方法。 这是他们的名字和描述的列表。

序号 描述
1 javaEnabled()
此方法确定是否在客户端中启用了JavaScript。 如果启用了JavaScript,则此方法返回true; 否则,它返回false。
2 plugings.refresh
此方法使新安装的插件可用,并使用所有新插件名称填充插件阵列。 仅限网景。
3 preference(name,value)
此方法允许签名脚本获取和设置一些Netscape首选项。 如果省略第二个参数,则此方法将返回指定首选项的值; 否则,它设置值。 仅限网景。
4 taintEnabled()
如果启用了数据污染,则此方法返回true; 否则是假的。

浏览器检测

有一个简单的JavaScript可用于查找浏览器的名称,然后可以向用户提供HTML页面。

<html>
   
   <head>
	  <title>Browser Detection Example</title>
   </head>
   
   <body>
	  
	  <script type="text/javascript">
		 <!--
			var userAgent   = navigator.userAgent;
			var opera       = (userAgent.indexOf('Opera') != -1);
			var ie          = (userAgent.indexOf('MSIE') != -1);
			var gecko       = (userAgent.indexOf('Gecko') != -1);
			var netscape    = (userAgent.indexOf('Mozilla') != -1);
			var version     = navigator.appVersion;
			
			if (opera){
			   document.write("Opera based browser");
			   // Keep your opera specific URL here.
			}
			
			else if (gecko){
			   document.write("Mozilla based browser");
			   // Keep your gecko specific URL here.
			}
			
			else if (ie){
			   document.write("IE based browser");
			   // Keep your IE specific URL here.
			}
			
			else if (netscape){
			   document.write("Netscape based browser");
			   // Keep your Netscape specific URL here.
			}
			
			else{
			   document.write("Unknown browser");
			}
			// You can include version to along with any above condition.
			document.write("<br /> Browser version info : " + version );
		 //-->
	  </script>
	  
   </body>
</html>

输出

Mozilla based browser
Browser version info : 5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇