Javascript 编写一个简单的聊天机器人

最新推荐文章于 2024-06-23 09:41:19 发布

原创

最新推荐文章于 2024-06-23 09:41:19 发布 · 3.4k 阅读

68 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #机器人 #开发语言

本文详细介绍了如何使用HTML、CSS和基本JavaScript从头构建一个简单的聊天机器人，重点在于JavaScript编程和DOM操作，而非AI。教程逐步指导读者实现聊天功能，包括用户输入监听、消息响应和DOM更新。

在本 Web 开发教程中，我们将了解如何使用 HTML、CSS 和 vanilla JavaScript 创建基本的聊天机器人。本练习侧重于 JS 基础知识，而不是任何类型的人工智能（AI）。为了使该过程更简单，更易于学习，我没有使用任何第三方库。我将通过专注于JavaScript编程语言的基础知识从头开始构建聊天机器人。

在这里插入图片描述
本练习旨在帮助 JavaScript 程序员了解聊天机器人的工作原理以及 Web 开发人员如何使用 JavaScript 构建基本的聊天机器人。

在 JavaScript 中创建聊天机器人

首先，首先创建一个 HTML 文件。让我们创建一个文件名 index.html，其中包含以下代码：

<!DOCTYPE html>

<html>

   …

<div id="main">

    <div><input id="input" type="text" placeholder="Write something..." autocomplete="off"  autofocus="true"/></div>

</div>

   …

</html>

在这里，我们创建了一个 id 为“main”的 div，其中我们有一个输入字段，用户可以在其中键入文本并与机器人通信。这是基本的 HTML 设置。在此过程中，我们将添加更多功能。

接下来，我们还需要向网页添加一些布局样式。因此，让我们创建一个名为 style.css 的CSS文件。使用以下样式表代码：

#main {
   
    
    position: fixed; 
    top: 40%; 
    right: 200px; 
 
    …
} 
.messages {
   
   
	display: flex;
	flex-direction: column;
	overflow: scroll;
	height: 90%;
	width: 100%;
	background-color: white;
	padding: 15px;
	margin: 15px;
	border-radius: 10px;
}
 
   …

创建.js文件

现在，创建一个.js文件，然后使用以下 JavaScript 代码在其中设置一些基本功能：

document.addEventListener("DOMContentLoaded", () => {
   
   
  document.querySelector("#input").addEventListener("keydown", function(e) {
   
   
    if (e.code === "Enter") {
   
   
        console.log("You pressed the enter button!")
    }