JavaScript编程实践与解决方案
立即解锁
发布时间: 2025-08-20 01:27:20 阅读量: 1 订阅数: 5 
JavaScript入门与实践指南
### JavaScript 编程实践与解决方案
#### 1. 正则表达式的应用
正则表达式在 JavaScript 中是处理字符串的强大工具，下面通过几个具体的例子来展示其应用。
- **去除重复单词**
- **问题描述**：有一个字符串 “This sentence has has a fault and and we need to fix it.”，需要去除其中重复的单词。
- **解决方案**：
```javascript
var myString = "This sentence has has a fault and and we need to fix it.";
var myRegExp = /(\b\w+\b) \1/g;
myString = myString.replace(myRegExp,"$1");
```
- **代码解释**：正则表达式 `/(\b\w+\b) \1/g` 中，`(\b\w+\b)` 定义了一个捕获组，匹配一个完整的单词。`\b` 表示单词边界，`\w+` 表示一个或多个字母、数字或下划线。`\1` 表示匹配与第一个捕获组相同的内容。`g` 标志表示全局匹配。在 `replace` 方法中，`$1` 表示第一个捕获组的内容，将重复的单词替换为一个。
- **另一种创建 RegExp 对象的问题及解决**：如果使用 `new RegExp` 来创建正则表达式对象，代码如下：
```javascript
var myRegExp = new RegExp("(\\b\\w+\\b) \\1","g");
```
这里需要使用两个反斜杠 `\\` 来表示正则表达式中的特殊字符，同时传递 `g` 标志进行全局匹配。
- **替换特定单词**
- **问题描述**：将句子 “a dog walked in off a street and ordered a finest beer” 中的所有 “a” 替换为 “the”，但只替换单独的 “a”，不替换包含 “a” 的其他单词。
- **解决方案**：
```javascript
var myString = "a dog walked in off a street and ordered a finest beer";
var myRegExp = /\ba\b/gi;
myString = myString.replace(myRegExp,"the");
alert(myString);
```
- **代码解释**：正则表达式 `/\ba\b/gi` 中，`\b` 表示单词边界，确保只匹配单独的 “a”。`g` 标志表示全局匹配，`i` 标志表示忽略大小写。
- **去除违禁单词**
- **问题描述**：在一个节食网站的留言板上，需要去除与糖果相关的违禁单词，将其替换为 “salad”。
- **解决方案**：
```javascript
var myRegExp = /(sugar )?candy|choc(olate|oholic)?/gi;
var myString = "Mmm, I love chocolate, I’m a chocoholic. I love candy too, sweet, sugar candy";
myString = myString.replace(myRegExp,"salad");
alert(myString);
```
- **代码解释**：正则表达式 `/(sugar )?candy|choc(olate|oholic)?/gi` 可以匹配 “sugar candy”、“candy”、“chocolate”、“chocoholic” 等单词。`(sugar )?` 表示 “sugar ” 是可选的，`(olate|oholic)?` 表示 “olate” 或 “oholic” 是可选的。
#### 2. 网页广告的随机显示
在网页顶部显示广告图片，当页面加载时随机选择一张图片，并且每四秒更换一次图片，确保在所有图片都显示过之前不重复显示。
- **解决方案**：
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var imagesSelected = new Array(false,false,false);
var noOfImages = 3;
var totalImagesSelected = 0;
function window_onload()
{
setInterval("switchImage()",4000);
}
function switchImage()
{
var imageIndex;
if (totalImagesSelected == noOfImages)
{
for (imageIndex = 0; imageIndex < noOfImages; imageIndex++)
{
imagesSelected[imageIndex] = false;
}
totalImagesSelected = 0;
}
var selectedImage = Math.floor(Math.random() * noOfImages) + 1;
while (imagesSelected[selectedImage - 1] == true)
{
selectedImage = Math.floor(Math.random() * noOfImages) + 1;
}
totalImagesSelected++;
imagesSelected[selectedImage - 1] = true;
document.imgAdvert.src = "AdvertImage" + selectedImage + ".jpg";
}
</script>
</head>
<body onload="window_onload()">
<img src="AdvertImage1.jpg" name="imgAdvert" />
</body>
</html>
```
- **代码解释**：
- `imagesSelected` 数组用于记录每张图片是否已经被显示过。
- `window_onload` 函数在页面加载时调用 `setInterval` 函数，每四秒调用一次 `switchImage` 函数。
- `switchImage` 函数中，首先检查是否所有图片都已经显示过，如果是，则重置 `imagesSelected` 数组。然后随机选择一张未显示过的图片，并更新 `imagesSelected` 数组和图片的 `src` 属性。
#### 3. 根据出生日期计算星期几
创建一个表单，让用户输入出生日期，然后根据输入的信息告诉用户他出生在星期几。
- **解决方案**：
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var days = new Array();
days[0] = "Sunday";
days[1] = "Monday";
days[2] = "Tuesday";
days[3] = "Wednesday";
days[4] = "Thursday";
days[5] = "Friday";
days[6] = "Saturday";
function dayOfWeek()
{
var form = document.form1;
var date = parseInt(form.txtDate.value)
var year = parseInt(form.txtYear.value)
if (isNaN(date) || isNaN(year))
{
alert("Please enter a valid whole number");
}
else
{
if (date < 1 || date > 31)
{
alert("Day of the month must be between 1 and 31");
}
else
{
userDate = date + " ";
userDate = userDate +
form.selMonth.options[form.selMonth.selectedIndex].value;
userDate = userDate + " " + year;
var dateThen = new Date(userDate);
alert(days[dateThen.getDay()]);
}
}
}
</script>
</head>
<body>
<p>Find the day of your birth</p>
<p>
<form name="form1">
<input type="text" name="txtDate" size="2" maxlength="2">
<select name=selMonth>
<option selected value="Jan">Jan</option>
<option selected value="Feb">Feb</option>
<option selected value="Mar">Mar</option>
<option selected value="Apr">Apr</option>
<option selected value="May">May</option>
<option selected value="Jun">Jun</option>
<option selected value="Jul">Jul</option>
<option selected value="Aug">Aug</option>
<option selected value="Sept">Sept</option>
<option selected value="Oct">Oct</option>
<option selected value="Nov">Nov</option>
<option selected value="Dec">Dec</option>
</select>
<input type="text" name="txtYear" size="4" maxlength="4" />
<br>
<input type="button" value="Day of the week"
onclick="dayOfWeek()" name="button1" />
</form>
</p>
</body>
</html>
```
- **代码解释**：
- `days` 数组存储了一周七天的名称。
- `dayOfWeek` 函数首先获取用户输入的日期和年份，进行基本的输入验证。如果输入有效，则创建一个 `Date` 对象，并使用 `getDay` 方法获取星期几的索引，最后从 `days` 数组中获取对应的星期几名称并弹出提示框。
#### 4. 使用 Cookie 记录页面访问次数和显示不同广告
- **记录页面访问次数**
- **问题描述**：创建一个页面，记录用户在过去一个月内访问该页面的次数。
- **解决方案**：
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript"
type="text/JavaScript"
src="CookieFunctions.js"></script>
<script type="text/javascript">
var pageViewCount = getCookieValue("pageViewCount");
var pageFirstVisited = getCookieValue("pageFirstVisited");
if (pageViewCount == null)
{
pageViewCount = 1;
pageFirstVisited = new Date();
pageFirstVisited.setMonth(pageFirstVisited.getMonth() + 1);
pageFirstVisited = pageFirstVisited.toGMTString();
setCookie("pageFirstVisited",pageFirstVisited,"","")
}
else
{
pageViewCount = Math.floor(pageViewCount) + 1;
}
setCookie("pageViewCount",pageViewCount,"","")
</script>
</head>
<body>
<script>
var pageHTML = "You’ve visited this page " + pageViewCount;
pageHTML = pageHTML + " times since " + pageFirstVisited;
document.write(pageHTML);
</script>
</body>
</html>
```
- **代码解释**：通过 `getCookieValue` 函数获取 `pageViewCount` 和 `pageFirstVisited` 两个 Cookie 的值。如果 `pageViewCount` 不存在，则将其初始化为 1，并记录当前日期加一个月作为 `pageFirstVisited`。每次访问页面时，`pageViewCount` 加 1，并更新 Cookie。最后在页面上显示访问次数和首次访问日期。
- **显示不同广告**
- **问题描述**：使用 Cookie 每次用户访问网页时显示不同的广告。
- **解决方案**：
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript" type="text/JavaScript" src="CookieFunctions.js"></
script>
</head>
<body>
<img src="AdvertImage1.jpg" name="imgAdvert">
<script type="text/javascript">
var imageNumber = getCookieValue("displayedImages");
var totalImages = 3;
if (imageNumber == null)
{
imageNumber = "1";
}
else
{
imageNumber = Math.floor(imageNumber) + 1;
}
if (totalImages == imageNumber)
{
setCookie("displayedImages","","","Mon, 1 Jan 1970 00:00:00");
}
else
{
setCookie("displayedImages",imageNumber,"","");
}
document.im
```
400次
会员资源下载次数
300万+
优质博客文章
1000万+
优质下载资源
1000万+
优质文库回答
0
0
复制全文
相关推荐
最低0.47元/天 解锁专栏
赠100次下载
百万级
高质量VIP文章无限畅学
千万级
优质资源任意下载
千万级
优质文库回答免费看
立即解锁
专栏目录
最新推荐
构建可扩展医疗设备集成方案：飞利浦监护仪接口扩展性深入解析
# 摘要
本文探讨了医疗设备集成的重要性和面临的挑战，重点分析了飞利浦监护仪接口技术的基础以及可扩展集成方案的理论框架。通过研究监护仪接口的技术规格、数据管理和标准化兼容性，本文阐述了实
【Matlab优化算法实战】：精通Matlab实现复杂问题优化的技巧
# 摘要
本文全面概述了Matlab优化算法的理论基础、实践操作以及高级应用。首先，介绍了数学优化问题的分类和优化
【机器人灵巧手医疗应用】：手术精度革命的新工具
# 摘要
随着医疗技术的进步，机器人灵巧手在手术精度和康复辅助方面展现出巨大潜力，已成为推动医疗领域创新的重要力量。本文首先介绍了机器人灵巧手在医疗领域的应用背景，随后深入探讨了其技术原理，包括机械结构设计、控制系统、以及传感技术。文章还通过具体应用案例，如外科手术、康复辅助以及医学教育与培训，分析了灵巧手的实际应
STM8点阵屏汉字显示：用户界面设计与体验优化的终极指南
# 摘要
STM8点阵屏技术作为一种重要的显示解决方案，广泛应用于嵌入式系统和用户界面设计中。本文首先介绍STM8点阵屏的技术基础，然后深入探讨汉字显示的原理，并着重分析用户界面设计策略，包括布局技巧、字体选择、用户交互逻辑及动态效果实现等。接着，本文详细阐述了STM8点阵屏的编程实践，涵盖开
【C#跨平台开发与Focas1_2 SDK】：打造跨平台CNC应用的终极指南
# 摘要
本文全面介绍了C#跨平台开发的原理与实践，从基础知识到高级应用，详细阐述了C#语言核心概念、.NET Core与Mono平台的对比、跨平台工具和库的选择。通过详细解读Focas1_2 SDK的功能与集成方法，本文提供了构建跨平台CNC应用的深入指南，涵盖CNC通信协议的设计、跨平台用户界面的开发以及部署与性能优化策略。实践案例分析部分则通过迁移现有应用和开发新应用的实战经验，向读者展示了具体的技术应用场景。最后，本文对
【游戏物理引擎基础】：迷宫游戏中的物理效果实现
# 摘要
本文详细探讨了基于wxWidgets的跨平台多媒体开发，涵盖了多媒体处理的基础理论知识、在wxWidgets中的实践应用，以及相关应用的优化与调试方法。首先介绍多媒体数据类型与
MATLAB程序设计模式优化：提升pv_matlab项目可维护性的最佳实践
# 摘要
本文全面探讨了MATLAB程序设计模式的基础知识和最佳实践，包括代码的组织结构、面向对象编程、设计模式应用、性能优化、版本控制与协作以及测试与质量保证。通过对MATLAB代码结构化的深入分析，介绍了函数与脚本的差异和代码模块化的重要性。接着，本文详细讲解了面向对象编程中的类定义、继承、封装以及代码重用策略。在设计模式部分，本文探讨了创建型、结构型和行为型模式在MATLAB编程中的实现与应用
【BT-audio音频抓取工具比较】：主流工具功能对比与选择指南
# 摘要
本文旨在全面介绍BT-audio音频抓取工具，从理论基础、功能对比、实践应用到安全性与隐私保护等多个维度进行了深入探讨。通过分析音频信号的原理与格式、抓取工具的工作机制以及相关法律和伦理问题，本文详细阐述了不同音频抓取工具的技术特点和抓取效率。实践应用章节进一步讲解了音频抓取在不同场景中的应用方法和技巧，并提供了故障排除的指导。在讨论工具安全性与隐私保护时，强调了用户数据安全的重要性和提高工具安全性的策略。最后，本文对音频抓取工具的未来发展和市场需求进行了展望，并提出了选择合适工具的建议。整体而言，本文为音频抓取工具的用户提供了一个全面的参考资料和指导手册。
# 关键字
音频抓取；
【调试与性能优化】：LMS滤波器在Verilog中的实现技巧
# 摘要
本文详细探讨了最小均方(LMS)滤波器的理论基础、硬件实现、调试技巧以及性能优化策略，并通过实际案例分析展示了其在信号处理中的应用。LMS滤波器作为一种自适应滤波器，在数字信号处理领域具有重要地位。通过理论章节，我们阐述了LMS算法的工作原理和数学模型，以及数字信号处理的基础知识。接着，文章介绍了LMS滤波器的Verilog实现，包括Verilog语言基础、模块
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
