22、JavaScript脚本编写实用指南

寂静夜空35

墨衍会员 · AI 创作全网分发码龄3年

关注

原创最新推荐文章于 2026-05-03 13:36:18 发布 65 阅读 AI 写同款· GEO 优化 ›

JavaScript脚本编写实用指南

在掌握了JavaScript的基础知识后，接下来就可以将这些知识应用到实际的网站脚本开发中。在这个过程中，会遇到一些常见的任务，下面将为大家详细介绍这些任务的实现方法。

1. 外部脚本文件存储脚本

通常可以将脚本代码放在 <script> 元素内，但 <script> 元素有一个可选的 src 属性，它可以引用外部的 .js 文件。 .js 文件就是一个普通的文本文件，用于存放JavaScript代码。例如，引用一个包含表单通用有效性检查例程的 .js 文件：

<script type="text/javascript" src="valform.js"></script>

当 src 属性存在时， <script> 标签内的任何代码都会被忽略。将脚本代码放在 .js 文件中的最大好处是可以在整个网站中轻松重用相同的例程。比如有一个创建翻转按钮的脚本，既可以在各个页面中复制粘贴代码，也可以将代码放在一个 .js 文件中，然后通过 <script src=""></script> 引用。 .js 文件的内容是纯JavaScript代码，不能添加任何标记。

2. 创建新的浏览器窗口

在用户进入网站或执行特定操作时，可能需要打开一个新的浏览器窗口。可以使用JavaScript的 window 对象的 open() 方法来实现，语法如下：

window.open( 'url', 'windowName' [, 'featuresList'] )

url ：指定要指向的URL的字符串。
windowName ：给新窗口命名的字符串。
featuresList ：可选参数，用于指定新窗口的特性。

例如，打开一个新窗口：

window.open( 'http://www.digitalwalk.net/more.html', 'moreWin' );

open() 方法有一个返回值，引用新创建的窗口对象。建议对返回值进行处理，以便正确处理对新窗口的引用。例如：

var moreWindow = window.open( 'http://www.digitalwalk.net/more.html', 'moreWin' );
moreWindow.document.write( 'Peek-a-boo. I am writing this from a different window' );

注意，不要将 windowName 参数留空，因为不同浏览器可能会有不同的结果。如果只是打开一个普通的新窗口，也可以不使用脚本，通过在 <a> 链接上使用 target="_blank" 属性来实现。 window.open() 的真正强大之处在于其可选的特性列表，通过这个参数可以指定新窗口打开时的外观。特性列表是一个逗号分隔的字符串，包含一些或所有以下特性的名值对：

参数	作用
Status	显示或隐藏窗口底部的状态栏
Toolbar	显示或隐藏标准浏览器工具栏（如后退和前进按钮）
Location	显示或隐藏地址/URL框
menubar	显示或隐藏菜单栏
directories	显示或隐藏标准浏览器目录按钮
resizable	允许或阻止用户调整窗口大小
scrollbars	如果文档大于窗口，启用或禁用滚动条
height	指定窗口的高度（像素）
width	指定窗口的宽度（像素）
top	指定窗口左上角的y坐标
left	指定窗口左上角的x坐标

高度、宽度、顶部和左侧参数分配像素值，其余参数分配值为1表示启用或显示该特性，值为0表示禁用或隐藏该特性。例如：

var myWin = window.open( 'second.html', 'secWin', 'left=20,top=10,width=400, height=250,toolbar=1,resizable=0,menubar=0,location=0' );

这个例子中，打开一个显示 second.html 网页的新窗口，窗口显示在浏览器的20, 10坐标处，大小为400 x 250像素。

3. 将脚本附加到链接

很多脚本编写者会在将脚本附加到 <a> 链接的点击事件上遇到困惑。虽然HTML允许使用 javascript: 协议将JavaScript命令作为 href 属性值，但更好的做法是使用 onclick 事件处理程序。以下是两种常见的场景：
- 场景一 ：想利用 <a> 链接触发脚本，但不想将用户发送到另一个页面。为了执行JavaScript语句并阻止正常的链接功能，添加一个 onclick 处理程序来调用想要执行的函数或语句，并在末尾添加 return false 语句，告诉浏览器忽略 href 值。可以将 href 值设为 # 。例如：

<a href="#" onclick="checkPage();return false">Check now</a>

场景二 ：在点击链接时进行条件检查。如果检查通过，浏览器继续访问 href 值指定的页面；如果不通过，用户停留在当前页面。例如：

<a href="continue.html" onclick="checkPage();">Continue</a>

checkPage() 函数对页面进行有效性检查。如果测试通过，返回 true ；如果需要用户注意某些事项，返回 false ，此时 href 值将被忽略。

4. 动态修改网页内容

JavaScript不仅可以对页面上现有的HTML元素做出反应，还可以动态添加内容，而无需刷新页面。除了使用DOM方法（如 createElement() 或 appendChild() ），还可以使用 innerHTML 属性。虽然 innerHTML 属性未得到W3C的认可，但在现代浏览器中得到了广泛支持。 innerHTML 属性允许设置和检索给定元素开始和结束标签之间的HTML内容，也可以处理文本内容或标记。例如，想要在不刷新整个页面的情况下更新 div 、 span 、 p 等元素的内容，可以使用以下代码：

<html>
<head>
<script type="text/javascript">
function refreshText(){
   var txt = document.getElementById( 'userText' ).value;
   document.getElementById('ontheflyupdate').innerHTML = txt;
}
</script>
</head>
<body>
<p>Did you know that the <span id='ontheflyupdate'>cowboy sat on his horse</span>?</p>
<input type='text' id='userText' value='Enter your own text here' />
<input type='button' onclick='refreshText()' value='Update'/>
</body>
</html>

当用户输入新文本并点击“Update”按钮时， span 元素的内容会更新。需要注意的是，不要对表格使用 innerHTML 属性，建议使用DOM方法来添加行和其他表格部分。

5. 表单验证

数据验证是JavaScript在HTML文档中最有用的功能之一。使用JavaScript可以在将用户提交的数据发送到互联网进行处理之前，检查数据的质量。可能需要进行以下几种类型的验证：
- 检查必填字段的值。
- 检查数字字段的数值（如年龄或五位数邮政编码）。
- 确保输入符合特定格式（如电子邮件地址或电话号码）。

为了避免使用一些让用户感到沮丧的验证技术，可以使用一个 span 元素在文本框旁边显示错误信息。设置数据验证的步骤如下：
1. 打开包含要添加验证的表单字段的网页。
2. 在文档头部添加对 validate.js 文件的引用：

<script src="validate.js" type="text/javascript"></script>

validate.js 文件的源代码如下：

MSG_REQUIRED_ERROR = 'Value is required';
MSG_INVALID_NUMBER_ERROR = 'Invalid number entered. Please try again.';
MSG_INVALID_EMAIL_ERROR = 'Invalid email address. Please try again.';
function checkRequired( valField, displayID ) {
  var displayHandler = document.getElementById( displayID );
  if ( valField.value == null || valField.value == '' ) {
    displayHandler.innerHTML = MSG_REQUIRED_ERROR;
    valField.focus();
    return false;
  }
  else {
    displayHandler.innerHTML = '';
    return true;
  }
}
function isValidNumber( valField, displayID )  {
  var displayHandler = document.getElementById( displayID );
  if ( isNaN( valField.value ) ) {
     displayHandler.innerHTML = MSG_INVALID_NUMBER_ERROR;
     valField.focus();
     return false;
  }
  else {
    displayHandler.innerHTML = '';
    return true;
  }
}
function checkEmail( valField, displayID ) {
  var displayHandler = document.getElementById( displayID );
  var emailFormat = /^[^@]+@[^@.]+\.[^@]*\w\w$/; 
  var emailStr = valField.value;
  if ( !emailFormat.test( emailStr ) ) {
    displayHandler.innerHTML = MSG_INVALID_EMAIL_ERROR;
    valField.focus();
    return false;
  }
  else {
    displayHandler.innerHTML = '';
    return true;
  }
}

在文档头部添加一个 <style> 元素，定义一个名为 .msg_container 的类选择器，用于设置错误消息的样式：

<style>
  .msg_container { color: #FF0000 }
</style>

在每个要验证的字段旁边添加一个空的 span 元素，为每个 span 元素分配一个唯一的 id 值，并添加 class="msg_container" ：

<div style="width:500px">
<p>Please provide the following information so we can spam you better:</p>
<form id="customer_form" name="customer_form" method="post" action="">
  <label>First name:<input  type="text" name="first_name" id="first_name" size="15"/></label>
     <span class="msg_container" id="first_name_msg">&nbsp;</span><br/>
  <label>Last name:<input type="text" name="last_name" id="last_name" size="25"/></label>
     <span class="msg_container" id="last_name_msg">&nbsp;</span><br/>
  <label>Age:<input type="text" name="age" id="age" size="3"/></label>
     <span class="msg_container" id="age_msg">&nbsp;</span><br/>
  <label>Email address:<input type="text" name="email" id="email" size="25"/></label>
     <span class="msg_container" id="email_msg">&nbsp;</span><br/>
  <input name="submit" type="submit"/>
</form>
</div>

对于每个要求用户填写的字段，添加一个 onblur 处理程序，调用 checkRequired() 函数。例如：

<div style="width:500px">
<p>Please provide the following information so we can spam you better:</p>
<form id="customer_form" name="customer_form" method="post" action="">
  <label>First name:<input  type="text" name="first_name" id="first_name" size="15" onblur="checkRequired( this, 'first_name_msg' )"/></label>
     <span class="msg_container" id="first_name_msg">&nbsp;</span><br/>
  <label>Last name:<input type="text" name="last_name" id="last_name" size="25" onblur="checkRequired( this, 'last_name_msg' )"/></label>
     <span class="msg_container" id="last_name_msg">&nbsp;</span><br/>
  <label>Age:<input type="text" name="age" id="age" size="3"/></label>
     <span class="msg_container" id="age_msg">&nbsp;</span><br/>
  <label>Email address:<input type="text" name="email" id="email" size="25"/></label>
     <span class="msg_container" id="email_msg">&nbsp;</span><br/>
  <input name="submit" type="submit"/>
</form>
</div>

对于每个要检查有效数字的字段，添加一个 onblur 处理程序，调用 isValidNumber() 函数。例如：

<div style="width:500px">
<p>Please provide the following information so we can spam you better:</p>
<form id="customer_form" name="customer_form" method="post" action="">
  <label>First name:<input  type="text" name="first_name" id="first_name" size="15" onblur="checkRequired( this, 'first_name_msg' )"/></label>
     <span class="msg_container" id="first_name_msg">&nbsp;</span><br/>
  <label>Last name:<input type="text" name="last_name" id="last_name" size="25" onblur="checkRequired( this, 'last_name_msg' )"/></label>
     <span class="msg_container" id="last_name_msg">&nbsp;</span><br/>
  <label>Age:<input type="text" name="age" id="age" size="3" onblur="isValidNumber( this, 'age_msg' )"/></label>
     <span class="msg_container" id="age_msg">&nbsp;</span><br/>
  <label>Email address:<input type="text" name="email" id="email" size="25"/></label>
     <span class="msg_container" id="email_msg">&nbsp;</span><br/>
  <input name="submit" type="submit"/>
</form>
</div>

对于电子邮件地址字段，添加一个 onblur 处理程序，调用 checkEmail() 函数。例如：

<div style="width:500px">
<p>Please provide the following information so we can spam you better:</p>
<form id="customer_form" name="customer_form" method="post" action="">
  <label>First name:<input  type="text" name="first_name" id="first_name" size="15" onblur="checkRequired( this, 'first_name_msg' )"/></label>
     <span class="msg_container" id="first_name_msg">&nbsp;</span><br/>
  <label>Last name:<input type="text" name="last_name" id="last_name" size="25" onblur="checkRequired( this, 'last_name_msg' )"/></label>
     <span class="msg_container" id="last_name_msg">&nbsp;</span><br/>
  <label>Age:<input type="text" name="age" id="age" size="3" onblur="isValidNumber( this, 'age_msg' )"/></label>
     <span class="msg_container" id="age_msg">&nbsp;</span><br/>
  <label>Email address:<input type="text" name="email" id="email" size="25" onblur="checkEmail( this, 'email_msg' )"/></label>
    <span class="msg_container" id="email_msg">&nbsp;</span><br/>
  <input name="submit" type="submit"/>
</form>
</div>

保存HTML文档，在浏览器中测试验证例程。

以 checkRequired() 函数为例，其工作原理如下：

function checkRequired( valField, displayID ) {
  var displayHandler = document.getElementById( displayID );
  if ( valField.value == null || valField.value == '' ) {
     displayHandler.innerHTML = MSG_REQUIRED_ERROR;
     valField.focus();
     return false;
  }
  else {
    displayHandler.innerHTML = '';
     return true;
  }
}

首先定义 displayHandler 变量，引用 id 值等于 displayID 的元素。然后评估 valField 的值是否为空，如果为空，将错误消息分配给 displayHandler.innerHTML ，输入字段获得焦点，函数返回 false ；如果不为空，清除 displayHandler.innerHTML ，返回 true 。

6. 防止垃圾邮件：加密电子邮件链接

网页上的 mailto: 电子邮件地址链接是与他人沟通的便捷方式，但也会招来垃圾邮件。可以使用JavaScript来加密电子邮件链接，提供标准和最大保护两种方式。标准保护更容易操作，但垃圾邮件发送者可能会绕过；最大保护操作较复杂，但垃圾邮件发送者几乎无法破解。加密电子邮件链接的步骤如下：
1. 打开包含要加密的电子邮件链接的网页。
2. 对于每个地址，用加密版本替换正常的电子邮件地址：
- 标准保护：将 @ 符号替换为 _at_ ，例如 steve@acmeinc.com 变为 steve_at_acmeinc.com 。
- 最大保护：将 @ 符号替换为 !a! ，点号替换为 !d! ，域名后缀替换为 !ds! ，例如 steve@acmeinc.com 变为 steve!a!acmeinc!d!!ds! 。
3. 在文档头部添加对 escrambler.js 文件的引用：

<script src="escrambler.js" type="text/javascript"></script>

escrambler.js 文件的源代码如下：

// Iterate through each link
function hrefReplacer( origStr, newStr ) {
     for ( i=0; i<=(document.links.length-1 ); i++ ) {
             if ( document.links[i].href.indexOf( origStr )!=-1 )
                      document.links[i].href= document.links[i].href.split( origStr )[0] + newStr +
                      document.links[i].href.split( origStr )[1]
     }
}
//  **********************************************************
//   unscramble( securityLevel, [domainSuffix] )
//            securityLevel: 0 = Minimal, 1 = Maximum
//            domainSuffix : suffix, if not com
//  **********************************************************
function unscramble( securityLevel, domainSuffix ) {
    // Standard format: me_at_mydomain.com
    if ( securityLevel == 0 ) {
             var separator = '_at_';
             hrefReplacer( separator, '@' );
    }
    // Maximum format: me!a!mydomain!dt!!ds!
    else {
             var separator      = '!a!';
             var dot            = '!dt!';
             var suffix                  = '!ds!';
             if ( domainSuffix == '' ) domainSuffix = 'com';
             hrefReplacer( separator, '@' );
             hrefReplacer( dot, '.' );
             hrefReplacer( suffix, domainSuffix );
    }
}

在页面底部， </body> 结束标签之前添加一个新的 <script> 元素，调用 unscrambler.js 文件中的 unscramble() 函数：
- 标准保护：

<script type="text/javascript">
unscramble( 0 );
</script>

- 最大保护（后缀为`com`）：

<script type="text/javascript">
unscramble( 1 );
</script>

- 最大保护（后缀为其他）：

<script type="text/javascript">
unscramble( 1, 'org' );
</script>

保存文件，在浏览器中测试，确保电子邮件地址在HTML源代码中正确格式化。

通过以上方法，可以更高效地编写JavaScript脚本，提升网站的用户体验和安全性。

JavaScript脚本编写实用指南

7. 特性检测而非浏览器类型检测

在编写JavaScript代码时，一个重要的原则是进行特性检测，而不是检测浏览器类型。不同的浏览器可能以不同的方式支持相同的功能，或者在不同的版本中支持情况有所变化。如果根据浏览器类型来编写代码，可能会导致在某些浏览器或版本中出现兼容性问题。

特性检测的基本思路是检查浏览器是否支持某个特定的功能或方法，而不是检查浏览器的名称或版本。例如，在使用某个新的API之前，先检查该API是否存在。以下是一个简单的示例：

if ('geolocation' in navigator) {
    // 浏览器支持地理定位API
    navigator.geolocation.getCurrentPosition(function(position) {
        console.log('当前位置：纬度 ' + position.coords.latitude + ', 经度 ' + position.coords.longitude);
    }, function(error) {
        console.log('获取位置信息时出错：' + error.message);
    });
} else {
    // 浏览器不支持地理定位API
    console.log('此浏览器不支持地理定位功能。');
}

在这个例子中，我们检查 navigator 对象中是否存在 geolocation 属性。如果存在，说明浏览器支持地理定位API，我们可以使用它来获取用户的当前位置；如果不存在，则提示用户该浏览器不支持该功能。

特性检测的优点在于它可以确保代码在支持相应功能的所有浏览器中都能正常工作，而不需要关心具体是哪个浏览器或版本。这样可以提高代码的兼容性和可维护性。

8. 使用正则表达式

正则表达式是一种强大的工具，用于在字符串中匹配、查找和替换特定的模式。在JavaScript中，可以使用内置的正则表达式对象来处理字符串。正则表达式可以用于验证用户输入、提取特定信息、替换字符串等场景。

以下是一些常见的正则表达式应用场景及示例代码：

验证电子邮件地址

function validateEmail(email) {
    var emailFormat = /^[^@]+@[^@.]+\.[^@]*\w\w$/;
    return emailFormat.test(email);
}

var email = 'example@example.com';
if (validateEmail(email)) {
    console.log('电子邮件地址有效。');
} else {
    console.log('电子邮件地址无效。');
}

在这个例子中，我们定义了一个正则表达式 emailFormat ，用于验证电子邮件地址的格式。 test() 方法用于检查给定的字符串是否匹配该正则表达式。

提取电话号码

var text = '联系我们：123-456-7890';
var phoneRegex = /\d{3}-\d{3}-\d{4}/;
var phoneNumber = text.match(phoneRegex);
if (phoneNumber) {
    console.log('提取到的电话号码：' + phoneNumber[0]);
} else {
    console.log('未找到电话号码。');
}

在这个例子中，我们使用正则表达式 \d{3}-\d{3}-\d{4} 来匹配电话号码的格式。 match() 方法用于在字符串中查找匹配该正则表达式的部分。

替换字符串中的特定内容

var originalText = 'Hello, World!';
var newText = originalText.replace(/World/, 'JavaScript');
console.log('替换后的文本：' + newText);

在这个例子中，我们使用 replace() 方法和正则表达式 /World/ 来将字符串中的 World 替换为 JavaScript 。

正则表达式的语法较为复杂，但通过学习和实践，可以掌握其基本用法，并在JavaScript开发中发挥重要作用。

总结

在JavaScript脚本编写过程中，我们可以运用多种技巧和方法来提高开发效率和代码质量。通过将脚本存储在外部 .js 文件中，实现代码的重用；使用 window.open() 方法创建新的浏览器窗口，并通过特性列表定制窗口外观；利用 onclick 事件处理程序将脚本附加到链接上，实现灵活的交互；使用 innerHTML 属性动态修改网页内容；通过表单验证确保用户输入的数据质量；加密电子邮件链接防止垃圾邮件；进行特性检测提高代码的兼容性；以及使用正则表达式处理字符串匹配和替换等操作。

这些技巧和方法相互配合，可以帮助我们构建出功能丰富、用户体验良好且安全可靠的网站。在实际开发中，我们应根据具体需求选择合适的方法，并不断学习和实践，以提升自己的JavaScript编程能力。

下面是一个简单的流程图，展示了表单验证的基本流程：

graph TD;
    A[用户输入数据] --> B[触发验证事件];
    B --> C{必填字段验证};
    C -- 不通过 --> D[显示必填字段错误信息];
    C -- 通过 --> E{数字字段验证};
    E -- 不通过 --> F[显示数字字段错误信息];
    E -- 通过 --> G{电子邮件地址验证};
    G -- 不通过 --> H[显示电子邮件地址错误信息];
    G -- 通过 --> I[数据验证通过，提交表单];

这个流程图清晰地展示了表单验证的步骤，从用户输入数据开始，依次进行必填字段、数字字段和电子邮件地址的验证，根据验证结果显示相应的错误信息或提交表单。

通过掌握这些JavaScript脚本编写的实用技巧，我们可以更好地应对各种开发需求，为用户提供更优质的网站体验。