HTML JavaScript 详解
HTML JavaScript
JavaScript 使 HTML 页面更具动态性和交互性
示例代码：
我的第一段 JavaScript
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一段 JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
点击我来显示日期和时间
</button>
<p id="demo"></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
HTML <script> 标签
HTML <script> 标签用于定义客户端脚本（JavaScript）。
<script> 元素即可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。
如需选取 HTML 元素，JavaScript 最常用 document.getElementById() 方法。
这个 JavaScript 示例向 id="demo" 的 HTML 元素内写入 "Hello JavaScript!"：
示例代码：
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>使用 JavaScript 更改文本</h1>
<p>本例把 "Hello JavaScript!" 写入 id="demo" 的 HTML 元素内：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
提示：您可在我们的 JavaScript 教程 中学习更多 JavaScript 知识。
JavaScript 的味道
以下是展示 JavaScript 能力的一些例子：
示例代码：
JavaScript 能够更改内容：
document.getElementById("demo").innerHTML = "Hello JavaScript!";
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一段 JavaScript</h1>
<p>JavaScript 可以更改 HTML 元素的内容：</p>
<button type="button" onclick="myFunction()">点击我！</button>
<p id="demo">这是一个演示。</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
JavaScript 能够更改样式：
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">JavaScript 可以更改 HTML 元素的样式。</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>
<button type="button" onclick="myFunction()">点击我！</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
JavaScript 能够更改属性：
document.getElementById("image").src = "picture.gif";
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一段 JavaScript</h1>
<p>在这里，JavaScript 更改了图像的 src 属性。</p>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "/i/eg_bulboff.gif"
} else {
pic = "/i/eg_bulbon.gif"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="/i/eg_bulboff.gif" width="109" height="180">
<p>
<button type="button" onclick="light(1)">开灯</button>
<button type="button" onclick="light(0)">关灯</button>
</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
HTML <noscript> 标签
HTML <noscript> 标签定义了替代内容，这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户：
示例代码：
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>
<p>不支持 JavaScript 的浏览器将显示 noscript 元素内的文本。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
HTML Script 标签
| 标签 | 描述 |
|---|---|
| <script> | 定义客户端脚本。 |
| <noscript> | 为不支持客户端脚本的用户定义替代内容。 |
如需所有可用的 HTML 标签的完整列表，请访问我们的 HTML 标签参考手册。
