软件测试学习笔记丨JavaScript 基本知识

106 阅读4分钟

本文转自测试人社区,原文链接:ceshiren.com/t/topic/287…

JavaScript

简介

  • JavaScript 是一种脚本语言

    • 一种轻量级的编程语言
    • 是可插入 HTML 页面的编程代码
    • 插入 HTML 页面后,可由所有的现代浏览器执行
  • 作用

    • 直接写入 HTML 输出流
    • 对事件的反应
    • 改变 HTML 内容
    • 改变 HTML 图像
    • 改变 HTML 样式
    • 验证输入

用法

  • 脚本必须位于 标签之间
  • 可被放置在 HTML 页面的 和 部分中
  • 引用方式
    • 内部:
    • 外部:

输出

  • 显示数据
    • 弹出警告框:window.alert()
    • 将内容写到 HTML 文档中:document.write()
    • 写入到浏览器的控制台:console.log()

基础语法

  • 字面量
    • 数字:整数、小数、科学计数法(e)
    • 字符串:单引号、双引号
    • 数组:[ 1],与python的列表 list 一样
    • 对象:{ 1},与python的字典 dict 一样
    • 函数:function,类似python的 def 函数关键字
  • 变量
    • 声明变量:var
    • 赋值:=
  • 操作符
    • 算术运算符:=、 +、 -、 *、 /
    • 赋值运算符: = 、 +=、 -=
    • 比较运算符:<、>、 ==、 ===(从内容到类型完全相同)、 !=
  • 函数
    • 关键字:function
    • function myFunction(a,b){return a*b;}

操作 HTMl DOM

  • 文档对象模型:Document Object Mdel

  • 查找 HTML 元素
    • 通过 id:var x=document.getElementById(“xx”); 找到一个
    • 通过标签名:var y=x.getElementByTagName(“p”); 找到一组
    • 通过类名:var z=document.getElementByClassName(“xx”); 找到一组
  • 改变 HTML
    • 内容:document.gerElementById(id).innerHTML=新的HTML
    • 属性:document.getElementById(id).attribute=新的属性值
  • Cookie
    • 读取:var x = document.cookie;
  • 使用事件
    • 当用户点击鼠标时:onclick=JavaScript
    • 当网页已加载时:onload=JavaScript
    • 当图像已加载时:onunload=JavaScript
    • 当鼠标移动到元素上时:onmouseover=JavaScript
    • 当输入字段被改变时:onchange=JavaScript
    • 当用户触发按键时:onmousedown=JavaScript

操作浏览器 BOM

  • 浏览器对象模型
    • Window 对象
    • 所有浏览器都支持 window 对象,它表示浏览器窗口
    • 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
    • HTML DOM 的 document 也是 window 对象的属性之一
  • 浏览器窗口
    • 获取浏览器窗口尺寸
      • window.innerHeight:浏览器窗口的内部高度,包括滚动条
      • window.innerWidth:浏览器窗口的内部宽度,包括滚动条
    • 打开新窗口:window.open()
      • 关闭当前窗口:window.close()
  • 用户屏幕
    • 可用的屏幕宽度:screen.availWidth
    • 可用的屏幕高度:screen.availHeight
  • 当前页面的地址
    • 返回 web 主机的域名:location.hostname
    • 返回当前页面的路径和文件名:location.pathname
    • 返回所使用的 web 协议:location.protocol
  • 浏览器的历史
    • 与在浏览器点击后退按钮相同:history.back()
    • 与在浏览器中点击向前按钮相同:history.forward()

推荐学习

【霍格沃兹测试开发】7天软件测试快速入门带你从零基础/转行/小白/就业/测试用例设计实战

【霍格沃兹测试开发】最新版!Web 自动化测试从入门到精通/ 电子商务产品实战/Selenium (上集)

【霍格沃兹测试开发】最新版!Web 自动化测试从入门到精通/ 电子商务产品实战/Selenium (下集)

【霍格沃兹测试开发】明星讲师精心打造最新Python 教程软件测试开发从业者必学(上集)

【霍格沃兹测试开发】明星讲师精心打造最新Python 教程软件测试开发从业者必学(下集)

【霍格沃兹测试开发】精品课合集/ 自动化测试/ 性能测试/ 精准测试/ 测试左移/ 测试右移/ 人工智能测试

【霍格沃兹测试开发】腾讯/ 百度/ 阿里/ 字节测试专家技术沙龙分享合集/ 精准化测试/ 流量回放/Diff

【霍格沃兹测试开发】Pytest 用例结构/ 编写规范 / 免费分享

【霍格沃兹测试开发】JMeter 实时性能监控平台/ 数据分析展示系统Grafana/Docker 安装

【霍格沃兹测试开发】接口自动化测试的场景有哪些?为什么要做接口自动化测试?如何一键生成测试报告?

【霍格沃兹测试开发】面试技巧指导/ 测试开发能力评级/1V1 模拟面试实战/ 冲刺年薪百万!

【霍格沃兹测试开发】腾讯软件测试能力评级标准/ 要评级表格的联系我

【霍格沃兹测试开发】Pytest 与Allure2 一键生成测试报告/ 测试用例断言/ 数据驱动/ 参数化

【霍格沃兹测试开发】App 功能测试实战快速入门/adb 常用命令/adb 压力测试

【霍格沃兹测试开发】阿里/ 百度/ 腾讯/ 滴滴/ 字节/ 一线大厂面试真题讲解,卷完拿高薪Offer !

【霍格沃兹测试开发】App自动化测试零基础快速入门/Appium/自动化用例录制/参数配置

【霍格沃兹测试开发】如何用Postman 做接口测试,从入门到实战/ 接口抓包(最新最全教程)

【霍格沃兹测试开发】6 小时轻松上手功能测试/ 软件测试工作流程/ 测试用例设计/Bug 管理