如何在 HTML 页面上编写 JavaScript 代码？

创建动态且引人入胜的网站的秘诀在于集成 HTML 和 JavaScript，这对开发人员来说是一项重要的技能。毫无疑问，HTML 的静态网页很受欢迎，并且是初学者的垫脚石，但用户更喜欢动态且引人入胜的网页。能够与网站互动并使用其内容是一种体验，只有动态网页才能提供。

将 JavaScript 代码集成到 HTML 页面中是 Web 开发人员的一项重要技能。JavaScript 是一种强大的脚本语言，允许开发人员为 HTML 网站添加动态功能和交互性。

JavaScript

JavaScript 使用变量来存储各种类型的数据。与某些其他编程语言相比，JavaScript 是灵活类型的，因此变量可以存储各种数据类型，包括整数、文本、布尔值、数组、对象等等。变量是使用“let”、“const”或“var”关键字声明的。

示例

Open Compiler
var myName = 'Arya';
console.log(myName);

  • 表达式和运算符 - JavaScript 提供了多种运算符，包括算术运算符、赋值运算符、比较运算符、逻辑运算符和三元运算符。这些运算符使您能够赋值、比较值以及根据条件做出判断并执行数学计算。

示例

Open Compiler
let w = 4;
w = w + 1;
 
console.log(w);

  • 条件语句 - 了解 JavaScript 中的条件语句（如“if”、“else if”和“else”）非常重要，以使其更具响应性和适应性。

示例

Open Compiler
if (true) {
   console.log('This message will print!'); 
}

  • JavaScript 循环（包括“for”、“while”和“do...while”）允许您重复执行代码段。循环对于有效地管理数据列表、迭代数组和执行重复性任务至关重要。

示例

Open Compiler
let sale = true;

sale = false;

if(sale) {
   console.log('Time to buy!');
} else{
   console.log('Time to wait for a sale.');
}

了解作用域对于使用 JavaScript 至关重要。根据变量的定义位置，它们的应用范围会有所不同。JavaScript 的强大闭包概念使函数即使在外部函数完成运行后仍可以访问其封闭的作用域。

通过掌握这些基本的 JavaScript 原则，您可以为创建更复杂和高级的 Web 应用程序奠定基础。随着您在 JavaScript 方面的熟练程度提高，您会遇到更复杂的主题和功能，这些功能使您能够构建尖端的 Web 体验。

使用的方法

  • 内联脚本

  • 外部脚本

Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.

内联脚本

使用“script”元素，内联脚本技术将 JavaScript 代码直接添加到 HTML 文档中。使用此方法，JavaScript 代码可以在放置在 HTML 中的位置立即执行。

算法

  • 将“script”元素包含到 HTML 文件中以内联嵌入 JavaScript。

  • 为了指定包含的内容是 JavaScript 代码，请在“script”元素中包含“type”属性，并将其设置为“text/javascript”。

  • 您的 JavaScript 代码应直接写入“script”元素内部。可以添加变量、函数、事件侦听器和其他 JavaScript 语句。

  • 在 HTML 文本中正确放置内联脚本至关重要。它可以放置在“head”或“body”部分。

  • 保存并在浏览器中打开文件，然后重复所需的动作。

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <title>How’s Inline JavaScript programmed</title>
</head>
<body>
   <h1>Hello, Inline JavaScript!</h1>
   <button onclick="showAlert()">Click Me</button>

   <script>
      function showAlert() {
         alert("You clicked the button!");
      }
   </script>
</body>
</html>

对于简短的脚本或一次性使用的情况，内联脚本技术很实用。但是，过度依赖内联脚本可能会导致维护问题和代码重复。最佳实践是将 JavaScript 代码分解成单独的文件，并且仅在需要进行简短交互或少量代码时才偶尔使用内联脚本方法。此方法简化了 JavaScript 代码库的维护，提高了可重用性，并有助于更好的代码结构。

外部脚本

外部脚本技术使用外部 JavaScript 文件链接到 HTML 页面。此方法将 JavaScript 代码保存在外部文件中，而不是直接将其集成到 HTML 内容中。

算法

  • 首先创建外部 JavaScript 文件，方法是创建一个新的文本文件，并使用 .js 扩展名，例如“script.js”。

  • 将外部文件链接到 HTML - 使用“script”元素和“src”属性将外部 JavaScript 文件链接到您的 HTML 页面。“src”元素应指示外部 JavaScript 文件的位置。

  • 脚本标签的位置 - 建议将“script”标签紧接在结束“body”标签（""）之前放置。通过将其放置在此处，您可以确保浏览器在加载完整 HTML 内容后加载 JavaScript，从而防止潜在的页面呈现延迟。

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <title>Writing an External JavaScript Code</title>
   <script src="external.js"></script>
</head>
<body>
   <h1>Hello, External JavaScript!</h1>
   <button onclick="showAlert()">Click Me</button>
</body>
</html>

您可以通过使用外部脚本技术来保持 HTML 和 JavaScript 代码之间的清晰分离，从而增强代码的结构和可维护性。在处理较大的 JavaScript 代码库或需要在多个网页上使用相同的 JavaScript 代码时，此方法非常有用。它确保了更有效、更组织化和更专业的开发过程。

结论

总而言之，能够集成 JavaScript 和 HTML 是一项宝贵的技能，对于希望开发动态且引人入胜的网页的人来说是必要的。在本文中，我们尝试研究了几种 JavaScript 和 HTML 集成的方案。要使用任何提到的方案，都需要一定的定制要求和技术熟练程度。

我们还介绍了一些 JavaScript 编码的基础知识，以便编码人员在开始集成之前先熟悉 JavaScript 语言。开发人员必须熟悉这些概念，以便处理事件、使用 DOM 并设计常见的用例，如表单验证、图像滑块和 AJAX 查询。

通过将 JavaScript 集成到 HTML 网站中，开发人员获得了无数机会来构建独特的、以用户为中心的 Web 体验。因此，这项技能值得您投入时间和精力去练习。

更新于： 2023年8月18日

222 次查看

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告