软件测试开发/全日制丨Web端测试—JavaScript讲解 学习笔记

2024-01-04

本文转自测试人社区,霍格沃兹测试开发学社学员笔记
原文链接:https://ceshiren.com/t/topic/29440

一、简介

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

作用

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

二、用法

2.1、位置

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

2.2、引用方式

  • 内部: <script>alert("我的第一个 JavaScript");</script>
  • 外部: <script src=”myScript.js”></script>

三、输出

3.1、显示数据

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

四、基础语法

4.1、字面量

  • 数字:整数、小数、科学技术(e)
  • 字符串:单引号、双引号
  • 数组: []
  • 对象: {}
  • 函数: function

4.2、变量

  • 声明变量: var
  • 赋值: =

4.3、操作符

  • 算术运算符: = + - * /
  • 赋值运算符: = += -=
  • 比较运算符: < > == === !=

4.4、函数

  • 关键字: function
function myFunction(a,b){return a*b;}

五、操作 HTML DOM

5.1、HTML DOM

  • 文档对象模型:Document Object Model

5.2、查找 HTML 元素

  • 通过 id: var x=document.getElementById("xx");
  • 通过标签名: var y=x.getElementsByTagName("p");
  • 通过类名: var x=document.getElementsByClassName("xx");

5.3、改变 HTML

  • 内容: document.getElementById(id).innerHTML=新的 HTML
  • 属性: document.getElementById(id).attribute=新属性值

5.4、Cookie

  • 读取: var x = document.cookie;

5.5、使用事件

  • 当用户点击鼠标时: onclick=JavaScript
  • 当网页已加载时: onload=JavaScript
  • 当图像已加载时: onunload=JavaScript
  • 当鼠标移动到元素上时: onmouseover=JavaScript
  • 当输入字段被改变时: onchange=JavaScript
  • 当用户触发按键时: onmousedown=JavaScript

六、操作 浏览器 BOM

6.1、浏览器对象模型

  • Window 对象
  • 所有浏览器都支持 window 对象。它表示浏览器窗口
  • 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
  • HTML DOM 的 document 也是 window 对象的属性之一

6.2、浏览器窗口

  • 获取浏览器窗口尺寸:

    • window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
    • window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
  • 打开新窗口: window.open()

  • 关闭当前窗口: window.close()

6.3、用户屏幕

  • 可用的屏幕宽度: screen.availWidth
  • 可用的屏幕高度: screen.availHeight

6.4、当前页面的地址

  • 返回 web 主机的域名: location.hostname
  • 返回当前页面的路径和文件名: location.pathname
  • 返回所使用的 web 协议: location.protocol

6.5、浏览器的历史

  • 与在浏览器点击后退按钮相同: history.back()
  • 与在浏览器中点击向前按钮相同: history.forward()

推荐

Python全栈开发与自动化测试开发班

由浅入深实战进阶,从小白到高手

以Python全栈开发为基础,深入教授自动化测试技能,为学员打造全面的技术能力。通过系统学习和实际项目实战,学员将具备在职场中脱颖而出的竞争力。不仅能够灵活运用Python进行开发,还能够保障项目质量通过自动化测试手段。这是一个全面提升职业竞争力的机会。

课程详情

Python开发必备基础技能与项目实战

Pvthon 编程语言/算法和数据结构/面向对象编程Web后端开发/前端开发/测试管理平台项目实战

人工智能ChatGPT实战

人工智能辅助学习各种开发和测试技能/Pytorch深度学框架/平台开发实战

数据分析与自动化办公

数据采集/Pandas与数据处理技术/ECharts与数据可视化技术/爬虫实战/自动化办公/批量文件处理

UI自动化测试与高级项目实战

Web自动化测试/App自动化测试/ PageObject设计模式

接口自动化测试

接口协议分析/Mock实战/服务端接口测试

性能测试

性能测试流程与方法/JMeter 脚本参数化/Grafana监控系统搭建

简历指导与模拟面试

1V1简历指导/模拟真实面试/测试开发岗面试全攻略名企私教服务
名企专家1v1辅导/行业专家技术指导/针对性解决工作难题/绩效提升辅导与晋升复盘

课程亮点

名企私教服务 先学习后付费 高额奖学金

专属社群+晚自习在线答疑

5V1全方位辅导作业+考试强化学习效果

简历修改 模拟面试 就业内推 面试复盘

image.png

福利一: 测试开发精品课免费学

image.png

福利二:免费领取技能图谱&大厂面试题合集

image.png

e4de1166c0b6a944f3fe30fdd71e77f.png

软件测试开发全日制线下班

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

软件测试开发/全日制丨Web端测试—JavaScript讲解 学习笔记 的相关文章

随机推荐