今日学习内容:
JavaScript 使 HTML 页面更具动态性和交互性
实例
<!DOCTYPE html> <html> <body> <h1>我的第一段 JavaScript</h1> <button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> 点击我来显示日期和时间 </button> <p id="demo"></p> </body> </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>
JavaScript 的味道
以下是展示 JavaScript 能力的一些例子:
实例
JavaScript 能够更改内容:
document.getElementById("demo").innerHTML = "Hello JavaScript!";
实例
JavaScript 能够更改样式:
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
实例
JavaScript 能够更改属性:
document.getElementById("image").src = "picture.gif";
HTML <noscript> 标签
HTML <noscript>
标签定义了替代内容,这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户:
实例
<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> <noscript>抱歉,您的浏览器不支持 JavaScript!</noscript>