HTML通过<script>标签定义和调用JavaScript函数，可内嵌或外链；2. 函数需先定义后调用，可通过事件触发或页面加载执行；3. 使用toString()将函数转为字符串并结合<pre>标签可显示源码；4. 建议分离结构与行为，避免document.write，注意执行时机与路径正确性。
在HTML中显示和调用JavaScript函数，主要通过<script>标签实现。你可以将JavaScript代码嵌入页面内部，也可以引用外部文件。下面介绍几种常见方式。
1. 在HTML中定义并显示JavaScript函数
使用<script>标签将JavaScript函数写在HTML文件中，浏览器加载时会解析但不会自动执行，除非被调用。
function greet() {
alert("你好，欢迎使用JavaScript！");
}
// 函数定义后不会立即运行
console.log("函数已定义");
greet(); // 调用函数
document.write("<p>函数greet已定义并在页面中调用</p>");
document.write("<pre>" + greet.toString() + "</pre>"); // 显示函数源码
</script>
说明：greet.toString()可以将函数体作为字符串输出，用于“显示”函数内容。注意document.write会影响页面结构，建议开发阶段使用console.log或innerHTML更新元素内容。
2. 通过事件触发调用函数
更常见的做法是通过用户操作（如点击按钮）来调用函数。
立即学习“Java免费学习笔记（深入）”；
<button onclick="sayHello()">点击我</button><script>
function sayHello() {
document.getElementById("output").innerHTML = "Hello from JavaScript!";
}
</script>
<div id="output"></div>
建议：避免在HTML标签中直接写复杂JS逻辑。更好的方式是使用addEventListener分离行为与结构。
3. 外部JavaScript文件中的函数调用
将函数写在外部.js文件中，然后通过src引入。
例如：创建一个script.js文件
console.log("这是来自外部JS的函数");
alert("页面已加载完成！");
}
window.onload = displayMessage; // 页面加载完成后调用
在HTML中引入：
<script src="script.js"></script>注意：确保路径正确，且脚本加载时机合理（如DOM准备好后再操作元素）。
4. 动态显示函数内容到页面
如果想让用户看到函数代码本身（比如教学场景），可以用以下方法：
<pre id="showCode"></pre><script>
function example() {
return "这是一个示例函数";
}
document.getElementById("showCode").textContent = example.toString();
</script>
提示：<pre>标签保留空格和换行，适合展示代码格式。
基本上就这些。关键是理解函数需要先定义再调用，而显示函数内容本质是将其转为字符串输出。不复杂但容易忽略细节，比如作用域和执行时机。
