技术分享 | Web测试方法与技术之JavaScript 讲解

简介: 技术分享 | Web测试方法与技术之JavaScript 讲解

JavaScript 是脚本语言,是一种轻量级的编程语言,可以插入 HTML 页面的编程代码。插入 HTML 页面后,可由所有的现代浏览器执行。

JavaScript 可以直接写入 HTML 输出流,也就是直接改变 HTML 的内容。也可以对事件做出反应,比如鼠标点击之后弹出弹窗,或者改变样式之类的。

位置

JavaScript 脚本必须位于 HTML 文档中 <script></script> 标签之间。<script> 可被放置在 HTML 页面的 <body><head> 部分中。

想要查看页面中的 JavaScript 脚本,也需要借助浏览器的开发者工具。按快捷键 F12,进入开发者工具,点击 Elements 面板,然后就可以看到 <script> 标签所处的位置了。


引用方式

对于 JavaScript 脚本来说,可以通过内部、外部两种方式引用到 HTML 中。

内部引用

<script></script> 之间的代码行包含了 JavaScript。浏览器会解释并执行位于 <script></script> 之间的 JavaScript 代码。

外部引用

<script> 的 src 属性包含了 JavaScript 外部脚本所在的路径。外部脚本代码中不能包含 <script> 标签。现在大部分的 JavaScript 脚本使用的是外部引用的方式。

<script src="myScript.js"></script>

如果想要查看外部 JavaScript 脚本的内容的话,可以在开发者工具的 Elements 界面,找到对应的标签,然后右键选择 Reveal in Sources Panel。


就可以跳转到 Source 界面,在这里可以查看 JavaScript 脚本的内容,并且可以进行调试。


输出

在 JavaScript 中,可用不同的方式显示数据。可以在浏览器的开发者工具的 Console 面板中查看输出内容。

  • 页面弹出警告框。
window.alert("hello world")
  • 将内容写到 HTML 文档中,这种方式会覆盖原来的 HTML 文件。
document.write("hello world")
  • 写入到浏览器的控制台
console.log("hello world")

操作HTML DOM

HTML DOM

HTML DOM 被称作文档对象模型(Document Object Model)。是专门适用于 HTML 的文档对象模型。可以将 HTML DOM 类比为网页的 API。它将网页中的各个元素都看作一个个对象,从而使网页中的元素也可以被计算机语言获取或者编辑。JavaScript 就可以利用 HTML DOM 动态地修改网页。


通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。通过这种方式,JavaScript 能够改变页面中的所有 HTML 元素、HTML 属性、CSS 样式,并且能对页面中的所有事件做出反应。

查找 HTML 元素

既然可以通过操作 DOM 去修改 web 页面上的元素,那么首先得先确定到底修改的是哪一个元素。这就涉及到了元素定位的问题。JavaScript 提供了三种定位元素的方式。通常可以通过 id 定位出某个元素。标签名和 class 都是可以找到多个元素,返回元素的列表。所以,如果一个元素有 id 的话,推荐使用 id 定位。

  • 通过 id 定位
document.getElementById("su")
  • 通过标签名定位
document.getElementsByTagName("span")
  • 通过类名定位
document.getElementsByClassName("btn")

修改 HTML

  • 改变内容
document.getElementById("su").innerHTML="hogwart"
  • 改变属性
document.getElementById("su").value="hogwarts"

读取 Cookie

var x = document.cookie;

使用事件

使用 JavaScript 脚本还可以配置一些操作,来实现对应的效果。

HTML 中:

<element onclick="SomeJavaScriptCode">

JavaScript 中:

object.onclick=function(){SomeJavaScriptCode};
相关文章
|
3天前
|
敏捷开发 测试技术
软件测试中的探索性测试方法
【6月更文挑战第12天】探索性测试,一种灵活的测试实践,旨在通过自由形式的探索发现软件的潜在缺陷。它不依赖于事先编写的测试用例,而是鼓励测试人员利用直觉、经验和创造力来指导测试过程。本文将深入探讨探索性测试的核心概念、实施策略以及它如何增强传统测试方法的有效性。
|
4天前
|
JSON 前端开发 JavaScript
在JavaScript中,异步编程是一种处理非阻塞操作(如网络请求、文件读写等)的重要技术
【6月更文挑战第12天】JavaScript中的异步编程通过Promise和async/await处理非阻塞操作。Promise管理异步操作的三种状态,防止回调地狱,支持链式调用和并行处理。async/await是ES8引入的语法糖,使异步代码更像同步代码,提高可读性。两者结合使用能更高效地处理复杂异步场景。
16 3
|
4天前
|
JavaScript 前端开发 UED
深入理解JavaScript中的节流与防抖技术
理解并合理运用节流与防抖技术,可以帮助我们优化事件处理函数的执行频率,从而提升应用的性能和用户体验。这两种技术通过减少不必要的计算和DOM操作,使得Web应用程序能够更加流畅地运行。 通过掌握防抖和节流的实现原理及应用场景,开发者可以更加灵活地编写高效且性能优化的代码,对于面对高频事件处理时尤其重要。在开发中合理选择使用防抖或节流,将直接影响到应用的响应性和效率。
8 1
|
1天前
|
机器学习/深度学习 人工智能 Devops
软件测试中的自动化技术发展趋势
随着信息技术的不断发展,软件测试领域也在不断创新与进步。本文将探讨软件测试中自动化技术的发展趋势,分析当前主流的自动化测试工具以及未来可能的发展方向,帮助读者更好地了解并应对软件测试领域的挑战。
6 0
|
3天前
|
机器学习/深度学习 敏捷开发 人工智能
探索软件测试中的AI辅助技术
【6月更文挑战第12天】在软件开发生命周期中,测试环节是确保产品质量的关键环节。随着人工智能技术的飞速发展,AI辅助的软件测试方法正在改变传统的测试流程。本文将探讨AI如何优化测试过程,提高缺陷检测的准确性和效率,并预测未来AI在软件测试领域的应用趋势。
12 1
|
4天前
|
机器学习/深度学习 人工智能 测试技术
技术创新与实践:我的自动化测试之路
自动化测试作为软件开发领域中的重要一环,对于项目质量和效率起着至关重要的作用。本文将分享我在自动化测试方面的实践经验和感悟,包括技术创新、挑战及解决方案,以及对未来发展的展望。
13 0
|
5天前
|
编译器 测试技术 Linux
技术洞察:循环语句细微差异下的性能探索(测试while(u--);和while(u)u--;的区别)
该文探讨了两种循环语句(`while(u--);` vs. `while(u) u--;`)在性能上的微妙差异。通过实验发现,后者比前者平均执行速度快约20%,原因在于循环条件检查的顺序影响了指令数量。尽管差异可能在多数情况下不显著,但在性能关键的代码中,选择合适的循环结构能优化执行效率。建议开发者在编写循环时考虑编译器优化和效率。未来研究可扩展到不同编译器、优化级别及硬件架构的影响。
|
7天前
|
前端开发 JavaScript API
JavaScript中的异步编程技术探究
JavaScript作为一种前端开发语言,具有强大的异步编程能力,本文将深入探讨JavaScript中的异步编程技术,包括回调函数、Promise、async/await以及最新的ES2022中的并行执行模型,帮助开发者更好地理解和应用JavaScript异步编程。
|
8天前
|
敏捷开发 测试技术 持续交付
探索软件测试中的模拟对象技术
【6月更文挑战第7天】本文深入探讨了软件测试领域中的模拟对象技术,分析了其定义、应用场景以及如何有效利用模拟对象提高测试效率和质量。通过具体案例,展示了模拟对象在单元测试、集成测试中的关键作用,并讨论了实施模拟对象时可能遇到的挑战及解决方案。
|
9天前
|
数据挖掘 测试技术
软件测试的艺术:确保质量的创造性方法
【6月更文挑战第6天】在数字化时代,软件无处不在。它们渗透到我们生活的方方面面,从个人使用到企业运营。然而,随着软件的普及和复杂性的增加,确保其质量和性能变得至关重要。软件测试是这一过程的核心,它不仅是一门科学,更是一种艺术。本文将探讨如何通过创造性的方法来提高软件测试的效率和效果,从而确保最终产品能够满足用户的期望和需求。