JavaScript 简介

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言,也是 HTML 开发最主要的技术之一。本章主要以若干个实例来讲解 JS 的一些作用。


JavaScript 能够改变 HTML 内容

getElementById() 是多个 JavaScript HTML 方法之一。

本例使用该方法来查找 id为 demo 的 HTML 元素,并把元素内容(innerHTML)更改为 "你好 JavaScript":

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 的作用</h2>
  5. <p id="demo">JavaScript 能够改变 HTML 内容。</p>
  6. <button type="button" onclick='document.getElementById("demo").innerHTML = "你好 JavaScript!"'>点击我!</button>
  7. </body>
  8. </html>

JavaScript 能够改变 HTML 属性

本例通过改变 <img> 标签的 src 属性(source)来改变一张 HTML 图像:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 可以点亮灯泡</h2>
  5. <p>JavaScript 能够改变 HTML 属性值。</p>
  6. <p>在本例中,JavaScript 改变了图像的 src 属性值。</p>
  7. <button onclick="document.getElementById('myImage').src='/images/eg_bulbon.gif'">开灯</button>
  8. <img id="myImage" border="0" src="/images/eg_bulboff.gif" style="text-align:center;">
  9. <button onclick="document.getElementById('myImage').src='/images/eg_bulboff.gif'">关灯</button>
  10. </body>
  11. </html>

JavaScript 能够改变 HTML 样式 (CSS)

改变 HTML 元素的样式,是改变 HTML 属性的一种变种:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 改变 p 标签的样式</h2>
  5. <p id="demo">JavaScript 能够改变 HTML 元素的样式。</p>
  6. <button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">
  7. 点击我!
  8. </button>
  9. </body>
  10. </html>

JavaScript 能够 隐藏/显示 HTML 元素

可通过改变 display 样式来 隐藏/显示 HTML 元素:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 实现 隐藏/显示 p 元素</h2>
  5. <p id="demo">JavaScript 能够 隐藏/显示 HTML 元素。</p>
  6. <button type="button" onclick="document.getElementById('demo').style.display='none'">
  7. 隐藏文本!
  8. </button>
  9. <button type="button" onclick="document.getElementById('demo').style.display='block'">
  10. 显示文本!
  11. </button>
  12. </body>
  13. </html>

总结

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。

很多开源的前端框架如 jquery, easyUi 等都是在 JavaScript 的基础上封装实现的。因此学好 JavaScript 是前端开发的基础。