2、JavaScript能做些什么？

2.1 直接写入 HTML 输出流

javascript可以做网页吗 怎么用javascript做网页_javascript可以做网页吗


.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js直接写入练习</title>
</head>
<body>

<p>
    JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
    只能在 HTML 输出流中使用 <strong>document.write</strong>。
    如果在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>

</body>
</html>

生成页面效果

javascript可以做网页吗 怎么用javascript做网页_html_02


需要注意的是：只能在 HTML 输出中使用 document.write。如果在文档加载后使用该方法，会覆盖整个文档。

2.2 对事件的反应(以alert为例)

javascript可以做网页吗 怎么用javascript做网页_javascript可以做网页吗_03


.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert练习</title>
</head>
<body>

<h1>我的第一个 JavaScript</h1>
<p>
    JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>
<button type="button" onclick="alert('欢迎学习JavaScript!')">点我获取网页提示</button>

</body>
</html>

生成页面效果

javascript可以做网页吗 怎么用javascript做网页_javascript可以做网页吗_04

2.3 改变HTML内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

我们会经常看到 document.getElementById("id")。这个方法是 HTML DOM 中定义的。DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变HTML内容练习</title>

    <script>
    function myFunction()
    {
        x=document.getElementById("demo");   /*找到元素*/
        x.innerHTML="Hello JavaScript!";     /*改变内容*/
    }
    </script>

</head>
<body>

<h1>我的第一段 JavaScript</h1>
<p id="demo">
    JavaScript 能改变 HTML 元素的内容。
</p>
<button type="button" onclick="myFunction()">点击这里改变HTML元素内容</button>

</body>
</html>

生成页面效果

1.原本的html元素内容如下图

javascript可以做网页吗 怎么用javascript做网页_javascript可以做网页吗_05


2.点击按钮后元素内容被改变

javascript可以做网页吗 怎么用javascript做网页_javascript可以做网页吗_06

2.4 改变HTML图像

JavaScript通过动态地改变 HTML 图像的来源（src：）来改变HTML图像

.html代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>改变HTML图像练习</title>
</head>
<body>

<script>
function changeImage()
{
   element=document.getElementById('myimage')    /*找到img元素*/
   if (element.src.match("bulbon"))              /**/
   {
      element.src="images/bulboff.png";
   }
   else
   {
      element.src="images/bulbon.png";
   }
}
</script>
<img id="myimage" onclick="changeImage()" src="images/bulboff.png" width="200" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

</body>
</html>

生成页面效果

1.未点击之前

javascript可以做网页吗 怎么用javascript做网页_页面效果_07


2.点击后

javascript可以做网页吗 怎么用javascript做网页_javascript可以做网页吗_08

知识点总结

  • JavaScript通过动态地改变 HTML 图像的来源（src：）来改变HTML图像
  • 以上实例中代码 element.src.match("bulbon") 的作用是：
    检索img标签src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 路径替换为为 bulboff.png，若匹配不到 bulbon 字符串，src路径替换为 bulbon.png
  • 其实所谓的改变HTML图像就是通过if else来判断什么时候通过更新img路径src来改变图像

2.5 改变HTML样式

.html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>改变HTML元素样式练习</title>

    <script>
    function myFunction()
    {
       x=document.getElementById("demo") // 找到元素
       x.style.color="#ff0000";          // 改变样式
    }
    </script>

</head>
<body>

<h1>JavaScript改变HTML元素样式练习</h1>
<p id="demo">
    JavaScript 能改变 HTML 元素的样式。
</p>
<button type="button" onclick="myFunction()">点击这里</button>

</body>
</html>

生成页面效果

1.点击前

javascript可以做网页吗 怎么用javascript做网页_javascript可以做网页吗_09


2.点击后

javascript可以做网页吗 怎么用javascript做网页_html_10