在数字时代，JavaScript（简称JS）已经成为网页开发中不可或缺的一部分，它是一种脚本语言，能够增强网页的交互性和动态性，如何在HTML文档中直接书写JavaScript代码呢？这篇文章将带你一探究竟。
让我们了解HTML文档的基本结构，一个标准的HTML文档包含头部（head）和身体（body）两个主要部分，头部通常包含文档的元数据，而身体部分则包含网页的可见内容。
要在HTML中直接书写JavaScript代码，你可以在头部或身体部分中使用<script>标签，这个标签告诉浏览器其内容是JavaScript代码，而不是HTML代码，以下是两种常见的方法：
1、内联JavaScript：将<script>标签直接放置在HTML文档中，代码写在标签内部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 这里是JavaScript代码
console.log("Hello, World!");
</script>
</head>
<body>
<h1>欢迎来到我的网页！</h1>
</body>
</html>在上面的例子中，JavaScript代码被放置在<head>标签内，这允许在页面加载时立即执行代码，但可能会稍微延迟页面的渲染。
2、外部JavaScript文件：另一种方法是将JavaScript代码保存在一个单独的.js文件中，并通过<script>标签引入该文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="script.js"></script>
</head>
<body>
<h1>欢迎来到我的网页！</h1>
</body>
</html>在这个例子中，script.js是一个包含JavaScript代码的外部文件，这种方法有助于保持HTML文档的整洁，并且使得代码更容易维护和重用。
JavaScript代码的执行时机
同步执行：默认情况下，浏览器会同步执行<script>标签内的JavaScript代码，这意味着它会阻塞页面的渲染，直到脚本执行完成，这对于快速执行的小脚本是可行的，但对于大型脚本，可能会导致页面加载缓慢。
异步执行：为了解决这个问题，你可以使用async或defer属性来异步加载和执行JavaScript代码。
async：这个属性告诉浏览器异步下载脚本，但脚本会在下载完成后立即执行，不等待其他脚本。
<script async src="script.js"></script>
defer：这个属性允许浏览器异步下载脚本，并在文档解析完成后，按照它们在文档中出现的顺序执行。
<script defer src="script.js"></script>
注意事项
代码位置：将<script>标签放置在<body>标签的底部，可以确保在执行JavaScript代码之前，页面的DOM已经完全加载，这对于依赖于页面元素的脚本尤其重要。
编码问题：确保你的JavaScript文件和HTML文档使用相同的字符编码，通常是UTF-8，以避免出现乱码。
通过上述方法，你可以轻松地在HTML文档中直接书写JavaScript代码，从而为你的网站添加动态功能和交互性，无论是内联代码还是外部文件，选择合适的方法可以提高页面性能和用户体验。
还没有评论，来说两句吧...