HTML和JavaScript脚本

HTML <script> 标签

<script> 标签是用来定义一个客户端脚本（JavaScript）。

<script> 元素既可以包含脚本语句，又可以通过src属性指向外部脚本文件。

JavaScript常用图像处理、表单验证、及内容的动态变化。

选择一个HTML元素, JavaScript 经常使用 document.getElementById(id) 方法.

下面的 JavaScript 实例输出 "Hello JavaScript!" 到id="demo"的元素里面:

<p id="demo"></p>

<script>
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

让我试试

提示：你可以学习更多关于JavaScript教程。

尝试 JavaScript

这里有一些JavaScript能做什么的实例：

JavaScript 可以更改HTML内容

<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>

让我试试

JavaScript 可以改变HTML样式

<h1>我的第一个 JavaScript</h1>
<p id="demo">JavaScript 可以改变HTML元素的样式.</p>
<script>
  function myFunction() {
      document.getElementById("demo").style.fontSize = "25px";
      document.getElementById("demo").style.color = "red";
  }
</script>
<button type="button" onclick="myFunction()">点击我!</button>

让我试试

JavaScript 可以改变 HTML 属性

<script>
    function light(sw) {
        var pic;
        if (sw == 0) {
            pic = "pic_bulboff.gif"
        } else {
            pic = "pic_bulbon.gif"
        }
        document.getElementById('myImage').src = pic;
    }
</script>

<img id="myImage" src="pic_bulboff.gif" width="100" height="180">

<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>

让我试试

HTML <noscript> 标签

<noscript> 标签用于为用户禁用浏览器中的脚本或不支持客户端脚本的浏览器提供替代内容:

<p id="demo"></p>
<script>
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>对不起，浏览器不支持 JavaScript!</noscript>

<p>浏览器不支持JavaScript将显示写在noscript里面的文本</p>

让我试试

HTML Script 标签

标签 描述
<script> 定义客户端脚本
<noscript> 为不支持客户端脚本的用户定义备用内容