用法
语句，会在页面加载时执行。
<body> 中的
<!DOCTYPE html> <html> <body> . . < > document.write(\"<h1>这是一个标题</h1>\"); document.write(\"<p>这是一个段落</p>\"); </ > . . </body> </html>
<head> 中的 函数
<!DOCTYPE html> <html> <head> < > function myFunction() { document.getElementById(\"demo\").innerHTML=\"我的第一个 函数\"; } </ > </head> <body> <h1>我的 Web 页面</h1> <p id=\"demo\">一个段落</p> <button type=\"button\" =\"myFunction()\">尝试一下</button> </body> </html>
<body> 中的 函数
<!DOCTYPE html> <html> <body> <h1>我的 Web 页面</h1> <p id=\"demo\">一个段落</p> <button type=\"button\" =\"myFunction()\">尝试一下</button> < > function myFunction() { document.getElementById(\"demo\").innerHTML=\"我的第一个 函数\"; } </ > </body> </html>
外部的
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 文件的文件扩展名是 .js。
如需使用外部文件，请在 < > 标签的 \"src\" 属性中设置该 .js 文件：
<!DOCTYPE html> <html> <body> < src=\"my .js\"></ > </body> </html>
你可以将脚本放置于 <head> 或者 <body>中，放在 < > 标签中的脚本与外部引用的脚本运行效果完全一致。
my .js 文件代码如下：
function myFunction()
{
document.getElementById(\"demo\").innerHTML=\"我的第一个 函数\";
}
直接写入 HTML 输出流
document.weite(\"<p>直接写入HTML输出流</p>\");
对事件的反应
<button type=\"button\" =\"alert(\'当点击后显示的事件\')“>点击按钮</button>
alert()函数多用在代码测试 点击事件
改变 HTML 内容
x = document.getElementById(\"XXX\") //查找的id元素
x.innerHTML=\"Hello \"; //配合上述的点击事件则可以实现HTML内容的改变
改变 HTML 图像
< > function 方法名() { element=document.getElementById(\'元素名\') if (element.src.match(\"图一\")) { element.src=\"/images/图二.gif\"; } else { element.src=\"/images/图一.gif\"; } } </ > <img id=\"元素名\" =\"方法名()\" src=\"/images/pic_bulboff.gif\" width=\"100\" height=\"180\">
改变 HTML 样式
x=document.getElementById(\"demo\") //找到元素
x.style.color=\"#ff0000\"; //改变样式
验证输入
var x=document.getElementById(\"demo\").value;
if(isNaN(x)||x.replace(/(^\\s*)|(\\s*$)/g,\"\")==\"\"){
alert(\"不是数字\");
}else{
alert(\"是数字\");
}
继续阅读与本文标签相同的文章
下一篇 :
轻松构建 基于docker的 redis 集群
-
独家 | 关于数据湖架构、战略和分析的8大错误认知（附链接）
2026-05-19栏目： 教程
-
独家｜手把手教你赋能Jupyter Notebooks！（附代码）
2026-05-19栏目： 教程
-
万字长文详解文本抽取：从算法理论到实践（附“达观杯”官方baseline实现解析及答疑）
2026-05-19栏目： 教程
-
干货 | 关于机器学习的知识点，全在这篇文章里了
2026-05-19栏目： 教程
-
独家｜利用OpenCV,Python和Ubidots来构建行人计数器程序（附代码&解析）
2026-05-19栏目： 教程