JavaScript简介之它能做什么


2、JavaScript能做些什么?

2.1 直接写入 HTML 输出流


.html代码




    
    js直接写入练习



JavaScript 能够直接写入 HTML 输出流中:

只能在 HTML 输出流中使用 document.write。 如果在文档已加载后使用它(比如在函数中),会覆盖整个文档。

生成页面效果

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


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


.html代码




    
    alert练习



我的第一个 JavaScript

JavaScript 能够对事件作出反应。比如对按钮的点击:

生成页面效果


2.3 改变HTML内容

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

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

.html代码




    
    改变HTML内容练习

    




我的第一段 JavaScript

JavaScript 能改变 HTML 元素的内容。

生成页面效果
1.原本的html元素内容如下图

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


2.4 改变HTML图像

JavaScript通过动态地改变 HTML 图像的来源(src:)来改变HTML图像

.html代码




  
  改变HTML图像练习





点击灯泡就可以打开或关闭这盏灯

生成页面效果

1.未点击之前

2.点击后


知识点总结

  • 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代码




    
    改变HTML元素样式练习

    




JavaScript改变HTML元素样式练习

JavaScript 能改变 HTML 元素的样式。

生成页面效果

1.点击前

2.点击后