软件测试需要具备的基础知识【功能测试】---前端知识(三)

在这里插## 标题入图片描述

您好,我是程序员小羊!

前言

为了更好的学习软件测试的相关技能,需要具备一定的基础知识。需要学习的基础知识包括:
1、计算机基础
2、前端知识
3、后端知识
4、软件测试理论
后期分四篇文章进行编写,这是第二篇

下面接着上面文章继续分享:

上面那篇文章讲了CSS基础知识,下面继续分享前端三件套的JS基础知识点

正文

一、JavaScript简介

1、JavaScript是一种轻量级的编程语言,一种脚本语言
2、JavaScript是可插入 HTML 页面的编程代码
3、JavaScript可以控制HTML页面的结构和样式
Javascript的本来应该叫livescript,但是在发布前夕,想搭上媒体超热java的顺风车,临时把名字改为了javascript。(也就是说js跟java没有关系,当时的只是想借助java的名气)

扩展知识:
Js出生的时候为了解决表单数据的合法性验证;
在这里插入图片描述
Js可以控制web前端技术的前两者:结构和样式

二、JavaScript用法

JS脚本的书写位置包括三种:
1、JS内嵌式
2、JS外链式
3、JS行内式

2.1 JS内嵌式

JS内嵌式就是把JS脚本写在HTML文档中,并且JS脚本必须位于 <script> 与 </script> 标签之间
JS脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JS</title><script>alert("弹弹弹...弹走鱼尾纹");</script></head><body>Hello World!</body>
</html>

2.2 JS外链式

1、脚本可放置与外部文件中,专门用来存在JS脚本的文件,文件后缀名为 .js
2、外部脚本很实用,相同的脚本可以被许多不同的网页引用
3、外部脚本需要在<script> 标签的 src 属性中设置

1、创建JS文件myScript.js
alert("hello");
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JS</title><script src="myScript.js"></script></head><body>Hello World!</body>
</html>

2.3 JS行内式

1、JS行内式就是把JS脚本写到HTML标签上
2、不推荐使用!不方便修改,没有实现代码的分离!

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JS</title></head><body><input type="button" value="点我呀~" onclick="alert('弹一弹...')" /></body>
</html>

三、操作 HTML 元素

1、使用JavaScript获取某个 HTML 元素,可以使用 document.getElementById(id) 方法
2、使用innerHTML来获取或插入元素内容

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JS</title></head><body><h1>我的第一个 Web 页面</h1><p id="demo">第一段内容</p><script>document.getElementById("demo").innerHTML = "段落已被修改!";</script></body>
</html>

四、JS变量

1. JS变量

变量是用于存储信息的"容器"
与代数一样,JavaScript 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)

1.1 变量的命名规范

1、变量名应该由字母、数字、下划线、$构成,不建议使用中文
2、变量名不能以数字开头
3、变量名称对大小写敏感(y 和 Y 是不同的变量)

var pi = 3.14;
var name = "张三";

1.2 创建JavaScript变量

1、在 JavaScript 中创建变量通常称为"声明"变量
2、使用 var 关键词来声明变量: var username;
3、变量声明之后,该变量是空的(它没有值)
4、为变量赋值需要使用等号: username = “张三”;

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JS</title></head><body><h1>我的第一个 Web 页面</h1><p id="demo">第一段内容</p><script>var message = "今天天气不错,心情很美丽!";document.getElementById("demo").innerHTML = message;</script></body>
</html>

五、JS函数和事件

1. JS函数

函数就是被调用时可重复使用的代码块

1.1 JS函数语法

1、使用function关键字来定义
2、代码块放到大括号中
3、通过使用 函数名() 来调用函数
4、当函数被调用时,会执行函数内的代码
function functionName() {
// 执行代码
}

案例:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JS</title></head><body><h1>我的第一个 Web 页面</h1><p id="demo">第一段内容</p><script>function update() {var message = "今天天气不错,心情很美丽!";alert(message);document.getElementById("demo").innerHTML = message;}// 调用函数update();</script></body>
</html>

2. JS事件

HTML 事件是发生在 HTML 元素上的事情
HTML 事件可以是浏览器行为,也可以是用户行为

2.1 常见的HTML事件

下面是一些常见的HTML事件的列表:
在这里插入图片描述

2.2 如何为元素绑定事件

通过元素属性绑定

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JS</title><script>function changeUsername() {alert("用户名改变了!");}</script></head><body><h1>JS事件</h1><p id="demo">这里显示时间</p><button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button><br /><input type="text" id="username" value="admin" onchange="changeUsername()"></body>
</html>

通过JS脚本绑定

事件三要素:事件源.事件类型=function(){ 触发后执行的代码 }

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>JS</title></head><body><input id="btn" type="button" value="按钮" /></body>
</html>
<script>//document 代表当前页面文档//getElementById 通过id来进行查找//onclick 鼠标单击事件类型//function(){要执行的命令}document.getElementById('btn').onclick = function() {alert("被点击了!");}
</script>

结束语:

今天这篇文章就到这里了,文底会有一些作业大家可以抽空做下,在下篇文章的时候会把答案放在最后,大厦之成,非一木之材也;大海之阔,非一流之归也,希望大家能持续关注下,文章从浅入深,也欢迎大佬们的随时指导!!!

在这里插入图片描述

作业

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/394964.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用es-hadoop同步hive和es之间数据

&#x1f4bb;近期在华为云连接es时的时候发现不能输入账号密码&#xff0c;后面联系华为工程师了解到&#xff0c;华为云默认是非安全模式&#xff0c;即不需要输入账号密码。 如果对你有所帮助&#xff0c;欢迎点赞收藏关注不迷路哦&#x1f493; 目录 使用es-hadoop同步h…

AI时代,我们还可以做什么?

最近看了本书&#xff0c;书名叫做《拐点&#xff1a;站在 AI 颠覆世界的前夜》&#xff0c;作者是万维钢。 本想着看完后&#xff0c;就能掌握一整套 AI 技巧&#xff0c;结果——竟然学了很多道理。 这本书讨论了以下话题&#xff1a; 我们该怎么理解这个 AI 大时代的哲学&am…

国产数据库备份恢复实现

数据库备份恢复是数据库高可用的基本能力&#xff0c;如何通过备份数据快速高效的恢复业务并且满足不同场景下的恢复需求&#xff0c;是各数据库厂商需要关注的要点。本文将介绍几种国产数据库的备份恢复功能&#xff0c;以加深了解。 1、数据库备份恢复方案 数据库备份是生产…

函数实例讲解(七)

文章目录 清洗数据的函数&#xff08;TRIM、CLEAN&#xff09;1、TRIM2、CLEAN3、CONCATENATE4、TEXTJOIN 函数综合练习COUNTIF Excel函数总结1、判断类2、求和类3、计数类4、求平均5、查找引用类6、求数据极值类7、四舍五入类8、提取类9、日期类10、文本处理类11、随机数12、排…

基于SpringBoot+Vue的校园失物招领系统(带1w+文档)

基于SpringBootVue的校园失物招领系统(带1w文档) 基于SpringBootVue的校园失物招领系统(带1w文档) 本课题研发的校园失物招领系统管理系统&#xff0c;就是提供校园失物招领系统信息处理的解决方案&#xff0c;它可以短时间处理完信息&#xff0c;并且这些信息都有专门的存储设…

MyBatis 基本操作 - 注解版

目录 一&#xff0c;查询 - select 1.1 全列查询 1.2 指定列查询 1.3 赋值问题 方法一&#xff1a;起别名 方法二&#xff1a;结果映射 方法三&#xff1a;添加配置 二&#xff0c;新增 - Insert 2.1 使用对象插入 2.2 获取主键 三&#xff0c;删除 - Delete 四&am…

nestjs 全栈进阶--文件上传

nest new upload -p pnpm pnpm i multer pnpm i -D types/multer 允许跨域 1. 单文件上传 我们去新增一个用于上传的handler Post(upload) UseInterceptors(FileInterceptor(file, {dest: uploads })) uploadFile(UploadedFile() file: Express.Multer.File, Body() body) {…

Git使用错误分析

一.fatal: Pathspec is in submodule 我做了这样的错误操作&#xff0c;在一个仓库下的一个子目录&#xff0c;执行了git init 创建了一个子仓库&#xff0c;然后想删掉这个子仓库&#xff0c;就只删除了该子目录下的.git文件夹&#xff0c;而没有删除缓存&#xff0c;执行如下…

Python | Leetcode Python题解之第328题奇偶链表

题目&#xff1a; 题解&#xff1a; class Solution:def oddEvenList(self, head: ListNode) -> ListNode:if not head:return headevenHead head.nextodd, even head, evenHeadwhile even and even.next:odd.next even.nextodd odd.nexteven.next odd.nexteven even…

UVM(3)TLM通信

基本定义 A的方框称之为PORT&#xff0c;B的圆圈称之为EXPORT 要注意&#xff1a;无论是get还是put操作&#xff0c; 其发起者拥有的都是PORT端口&#xff0c; 而不是EXPORT transport操作&#xff0c; 如 transport操作相当于一次put操作加一次get操作&#xff0c; 数据流先…

Spring统一功能处理:拦截器、响应与异常的统一管理

目录 一.拦截器 二.统一数据返回格式 三.统一异常处理 一.拦截器 拦截器是Spring框架提供的核⼼功能之⼀&#xff0c;主要⽤来拦截⽤⼾的请求&#xff0c;在指定⽅法前后&#xff0c;根据业务需要执⾏预先设定的代码。 也就是说&#xff0c;允许开发⼈员提前预定义⼀些逻辑…

c语言-文件

11 文件 目录 11 文件 一、文件系统 二、文件操作方式 1、基于缓冲区文件操作 2、基于非缓冲区文件操作 三、文件操作的常用函数 1、fopen 2、fclose 3、fputc 4、fgetc 5、rewind 6、fseek 7、fputs 8、fgets 9、fwrite 10、fread 11、fprintf 12、fscanf …

【Redis】数据结构篇

文章目录 键值对数据库是怎么实现的&#xff1f;动态字符串SDSC 语言字符串的缺陷SDS结构设计 整数集合整数集合结构设计整数集合的升级操作 哈希表哈希表结构设计哈希冲突链式哈希Rehash渐进式rehashrehash触发条件 压缩列表压缩列表结构设计连续更新压缩列表的缺陷 quicklist…

【Material-UI】Checkbox组件:Indeterminate状态详解

文章目录 一、什么是Indeterminate状态&#xff1f;二、Indeterminate状态的实现1. 基本用法示例2. 代码解析3. Indeterminate状态的应用场景 三、Indeterminate状态的UI与可访问性1. 无障碍设计2. 用户体验优化 四、Indeterminate状态的最佳实践1. 状态同步2. 优化性能3. 提供…

ubuntu20.04 环境搭建教程

1&#xff1a; Ubuntu 版本说明 我使用版本为 ubuntu20.04 ->镜像文件网上下载最新版本 mirrors.huaweicloud.com/ubuntu-releases/20.04.6/ Ubuntu 其他说明 Ubuntu 安装的位置不建议放到 C 盘(除非你只有一个 C 盘) Ubuntu 需要 120G 的空间 2&#xff1…

vue项目前端实现将table导出成excel功能2

使用插件 xlsx、xlsx-style、file-saver 具体引入见文章&#xff1a;vue项目前端实现将table导出成excel功能1 方法一 exportExcelByData&#xff1a;将数据导出成excel&#xff0c;合并单元格需要另外设置 方法二 exportExcelByDom&#xff1a;将页面dom(el-table)导出成…

媒体资讯视频数据采集-yt-dlp-python实际使用-下载视频

对于视频二创等一些业务场景&#xff0c;可能要采集youtube等的相关媒体视频资源&#xff0c;使用[yt-dlp](https://github.com/yt-dlp/yt-dlp)是一个不错的选择&#xff0c;提供的命令比较丰富&#xff0c;场景比较全面yt-dlp 是一个用 Python 编写的命令行工具&#xff0c;主…

Linux部署python3.0版本——及基本操作

&#xff08;一&#xff09;部署环境 首先查看列表&#xff0c;找到python3.0的包 yum list installed|grep python 如果没有&#xff0c;是因为yum源的问题&#xff0c;可部署阿里云镜像然后下载epel包&#xff0c;这里的内容可参考前面的阿里云镜像部署 然后进行下载 yum…

React 用户点击某个元素后只执行一次操作

React开发中经常会遇到需求&#xff1a;用户点击某个元素后只执行一次特定操作。比如&#xff0c;用户点击按钮后弹出提示框&#xff0c;但希望再次点击按钮不再触发提示框。针对这种需求&#xff0c;可以封装一个自定义Hooks来实现只允许点击一次的功能。 import {useCallbac…

Mysql,用户名重复,无法调用问题

问题描述&#xff1a; 我电脑的数据库用户名是&#xff0c;root。 因为经常需要帮别人封装程序&#xff0c;所以需要在我本机跑通别人的程序。有的程序里面也涉及到数据库&#xff0c;用户名也是&#xff0c;root&#xff0c;但是密码与我本机的不同。 之前我会修改我用户名…