技术分享 | 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月前
|
数据采集 监控 机器人
浅谈网页端IM技术及相关测试方法实践(包括WebSocket性能测试)
最开始转转的客服系统体系如IM、工单以及机器人等都是使用第三方的产品。但第三方产品对于转转的业务,以及客服的效率等都产生了诸多限制,所以我们决定自研替换第三方系统。下面主要分享一下网页端IM技术及相关测试方法,我们先从了解IM系统和WebSocket开始。
79 4
|
4月前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
4月前
|
人工智能 安全 物联网
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
73 6
|
4月前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
|
4月前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
140 4
|
4月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
82 2
|
4月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
100 3
|
4月前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
4月前
|
缓存 安全 前端开发
构建高效Web应用的五大关键技术
【10月更文挑战第42天】在数字化浪潮中,Web应用已成为企业与用户互动的重要桥梁。本文将深入探讨提升Web应用性能和用户体验的五项核心技术,包括前端优化、后端架构设计、数据库管理、安全性增强以及API开发的最佳实践。通过这些技术的应用,开发者可以构建出更快、更稳定且更安全的Web应用,满足现代网络环境的需求。

热门文章

最新文章