JavaScript简介之它能做什么
2022/4/27 1:15:01
本文主要是介绍JavaScript简介之它能做什么,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
2、JavaScript能做些什么?
2.1 直接写入 HTML 输出流
.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>
生成页面效果
需要注意的是:只能在 HTML 输出中使用 document.write。如果在文档加载后使用该方法,会覆盖整个文档。
2.2 对事件的反应(以alert为例)
.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>
生成页面效果
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元素内容如下图
2.点击按钮后元素内容被改变
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.未点击之前
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代码
<!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.点击前
2.点击后
这篇关于JavaScript简介之它能做什么的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?
- 2024-05-30java excel上传--poi
- 2024-05-30安装笔记本应用商店的pycharm,再安排pandas等模块,说是没有打包工具?
- 2024-05-29java11新特性