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.点击后