软件测试基础篇——JavaScript基础
JavaScript
1、常见的HTML标签（掌握）
- html：超文本标识语言，用来制作【超文本文档】的一门标签语言，产出物：网页/页面，也被成为“html文件”，“web文件”
备注：WEB端应用程序——>网站类型的项目——>通过【浏览器】进行访问的操作：学员后台管理系统
- html基本语法：
<html>
<head>
<title>页面的标题title>
head>
<body>
页面的内容
body>
html>
html标签：标志着html文件的开始和结束
head标签：头部标签，声明页面头部内容
title标签：题目标签，声明页面的标题
body标签：页面主体标签
备注：head部分是可以省略的，但是不推荐这么做
-
生成第一个html页面
-
方式一：利用文本编辑工具（了解）
将文件的后缀改为： .html 或 .htm
-
方式二：利用开发工具HBuilder
meta标签：字符集设置标签，设置编码格式（内容显示）
<meta charset="UTF-8"> 中文编码格式
-
-
关注点：清楚每个标签以及属性，在页面中能够产生的实际效果即可：标签+属性<—–>页面效果
-
常见的一些说法：
-
html标签：通常是用尖括号包裹的关键词：<关键词>，大部分的标签都是成对出现的：<开始标签>，开始和结束标签，也被称为开放标签和闭合标签。
-
空的html元素：指的是单个出现的标签，比如：
<br> 换行标签，<hr> 水平线标签 -
html标签属性：指的是给标签添加附加效果，属性一般是放在开始标签中
格式：<开始标签 属性名=“属性值”>
-
html元素：指的是从某个开始标签，到某个结束标签之间所包含的内容
-
属性：背景色属性：bgcolor 背景图片属性：background
颜色设置：除了写颜色对应的单词外，还可以利用【RGB颜色表示法/十六进制颜色表示法】：#六位字母，数字，字母数字组合 #三位
数字：0-9 字母：a-f
-
-
常见的文本标签
<b>b> 加粗（粗体标签）
<small>small> 小号字标签
<big>big> 大号字标签
<i>i> 斜体标签
<em>em> 着重文字标签
<del>del> 删除线标签，文字中画线表示删除
<ins>ins> 下划线标签，文字下划线表示插入效果
<sub>sub> 下标
<sup>sup> 上标
- 其它的标签
<h1>-<h6> 标题标签 加粗，换行
<p>p> 段落标签 换行，行间距，一对p标签，相当于是一个段落
align="设置位置" center 居中 right 靠右 left 靠左
<img src="图片的路径信息"/> 图片标签
alt="图片提示信息设置" 生效的场景：图片无法正常显示
width="设置宽度" height="设置高度" 两种表示形式：百分比：以显示页面作为100%的参考，自动调整百分比占位；像素值px：给了一个固定的值
<embed src="音视频文件的路径信息" />
<a href="设置要跳转到的页面">a> 超链接标签：实现页面之间的跳转
<font color="设置字体颜色" size="设置字体大小" >font> 设置字体标签
html注释： 注释的内容不参与显示，备注，解释说明的作用
- 表格标签
①构成表格的三要素：
<table>
<tr>
<td>单元格内容td>
tr>
table>
②属性：
边框：border
边框颜色：bordercolor
③其它标签：
<caption>表的标题（表名）caption>
<th>特殊的列th> 居中，加粗
2、表单的应用（掌握）
- 表单：主要用于搜集不同类型的用户输入，表单是一个区域，在区域中有各种不同的输入项，比如文本框，密码框，单选，复选框（多选）…
- 表单的组成：
<form action="指定表单数据提交位置" method="指定提交的方法get/post">
<input type="" /> 用来指定输入项的类型：
下拉列表：
<select>
<option>列表值option>
select>
文本域：
<textarea>textarea>
cols="设置列宽"
rows="设置行高"
当标签对中包裹内容，会把该内容填充在文本域
type="button"：普通按钮
type="reset"：重置按钮
type="submit"：提交按钮
form>
form标签的两个属性：
action：动作属性，指定表单数据提交位置
method：方法属性，指定提交的方法get/post
get：一般会把数据直接提交到action指定页面的url地址栏中
post：一般直接提交到服务器
3、CSS样式表（了解）
- 概述：CSS样式表目的：给不同的页面添加不同的样式修饰，因为html标签提供的样式比较单一
- 分类一：内部样式表 放在****中
格式一：
<style type="text/css">
选择器 {属性1：值1;属性2：值2;属性3：值3...}
style>
备注：选择器：关键词，来源于标签
格式二：类样式表：把样式表做成共享的状态，如果有标签需要，直接做引用
<style type="text/css">
.类名{属性1：值1;属性2：值2…}
style>
引用：<开始标签 class=“类名”>
相同的属性，以类样式为准，不同的属性，就做融合
CSS样式表的背景属性：
background-color：设置背景色
background-image：设置背景图 url(图片位置路径信息)
background-repeat：设置背景图的平铺方式：repeat-x（横向平铺）repeat-y（竖向平铺）repeat（铺满）no-repeat（根据图片大小占据背景空间）
-
行内样式表（内嵌样式表）
- 概述：放在开始标签中进行声明的，只针对该标签当前包裹的内容生效
- 格式：<开始标签 style=“属性1:值1;属性2:值2…”>
-
外部样式表
-
概述：样式表和html文件是分离开的，样式表单独生成一个文件：xxx.css，如果某一个html文件需要关联该样式表，直接做引用即可
-
格式：
-
新建—>CSS文件—>空白的文档：把style标签中的写法直接照搬过来：选择器+类样式
-
引用外部样式表
格式一：放在head标签
-
-
<link href="引用外部css文件" rel="stylesheet" type="text/css"/>
格式二：放在head标签（了解）
<style type="text/css">
@import "外部css文件"
style>
import：导入
4、JavaScript基本语法
- 概述：JS最初目的是为了验证表单(页面)各个输入项数据的合法性或正确性
例：JS问世前：用户提交表单数据——>服务器：验证+存储管理 JS问世后：用户提交表单数据—–>JS验证——>服务器
- JS特征：
JavaScript是一门：
①具有面向对象能力：又被称为“基于对象”，指的是在JS语言中，已经有声明好的对象和方法（函数），可以直接拿来使用（调用）
②事件驱动：html+css主要实现网站的静态效果，JS是可以实现网站的动态效果
③解释型：指的是JS代码编写完成，不需要进行编译，直接执行（运行）
例：Java语言：执行过程：Java源文件（源代码）—–>编译—–>字节码文件—–>运行（执行）
JS语言：执行过程：JS源文件（源代码）—–>运行（执行）
④客户端脚本语言：指的是只要系统中有【浏览器】，就可以执行（运行）JS代码
⑤松散型：指的是JS中声明变量，是不用指定数据类型，由传递的值决定变量的数据类型
例：JAVA语言，声明一个变量，是需要提前指定变量的数据类型，比如，声明一个整数类型的变量：数据类型 变量名=值; int x=23; String name=“张三”;
JS语言：声明一个变量，只需要用var关键词修饰即可，格式：var 变量名=值; 比如:var i=7;
⑥跨平台性：可以在多个操作系统中使用该技术，主要依赖于浏览器。
备注：
强类型语言：指的是在该语言中，变量的声明必须指定数据类型：数据类型 变量名=值;
弱类型语言：指的是在该语言中，变量的声明不需要指定数据类型，由传递的值来决定。
5、JavaScript基本语法
- JS代码的编写
- 格式一：直接写入在html文件
<script language="JavaScript">
JS代码
script>
注意：既可以放在head标签中，也可以放在body标签内，如果都有，执行的过程：按照顺序来执行—–>先head，再body
-
输出方法：alert(“内容”)：以弹窗的形式进行内容的输出
-
JS注释：解释说明，不参与执行
-
格式二：外部JS文件：JS代码和HTML文件分开
-
新建——>JS文件：XXX.js——>空白的文档：直接写JS代码
-
html文件引用外部JS文件：
<script language="JavaScript" src="引用的外部JS文件"> JS代码;//不会被执行 script>注意：有外部引用js文件的script标签，嵌套的JS代码是不会被执行的
-
-
变量的应用
-
变量：指的是在运行过程中允许发生改变的量，被称为“变量”，作用：用来接收代码执行过程中会发生改变的数据
-
变量的声明（创建）：
①声明变量的同时进行赋值：
var 变量名=值; 或 var 变量名1=值1,变量名2=值2,变量名3=值3…
②先声明变量，再进行赋值
声明变量：var 变量名;
声明多个变量：var 变量名1,变量名2,变量名3…;
③标识符的命名规则：起名字的规则
-
首个字符必须是大小写字母，下划线_，美元符号$
-
其他位置上的字符可以有字母，数字，下划线，$
-
不能使用关键词/关键字（指的是当前操作中已经有特殊含义的词语）
-
区分大小写，例：var name; var Name; 两个不同的变量
-
-
变量的调用：直接拿上变量名做操作即可
- CSS样式表：分类——>写法
内部样式表：head
<style type="text/css">
选择器{属性：值...}
.类名{属性：值...}
style>
<开始标签 class=“类名”>
行内样式表：
<开始标签 style=“属性：值”>
外部样式表：XXX.css
引用：
<link href="关联外部css文件" rel="stylesheet" type="text/css"/>
@import "外部css文件"
- JS基本语法
- 特征
- JS代码编写方式
- 变量
5、JavaScript支持的数据类型
-
数值型 number
- 整数类型
- 小数（浮点）类型
-
查看变量的数据类型：typeof(变量名) 或 typeof 变量名
-
字符串类型 string
-
概述：由引号(单+双)包裹的任意个字符
var name=“张三”; var sdept=‘testing2303’; var age=“18”;
-
注意事项：引号的组合支持：单双，双单；不支持：单单，双双
-
-
布尔类型 boolean
布尔类型的值只有两个：true false
备注：true：非0的整数，一般是1；false：0
-
转义字符
- 概述：一般是由【\字符】反斜杠开头，配合一些字符，达到不同的显示效果
- 常见的转义字符：
- \n 换行
- \t 水平制表符，等同于Tab键作用
- \r 回车符，等同于按下Enter回车键
- \ ’ 转单引号’
- \ " 转双引号”
- \ \ 转单斜杠\
-
空值 object对象
var 变量名=null; 创建一个空的对象
例：var x=null; 创建一个空的对象x
-
未定义值 undefined
var 变量名; 只是把变量给创建出来而已
6、JavaScript运算符应用
- 赋值运算符
= 赋值：把等号右边的值，赋值给等号左边的变量
复合赋值运算符
+=：a+=b—–>a=a+b
–=：a–=b—–>a=a-b
*=：a *=b——>a=a *b
/=：a/=b——>a=a/b 除尽
%=：a%=b—–>a=a%b 取余数
针对布尔类型的数据进行操作：
&=：与等 a&=b—–>a=a&b 只要有false，整体结果就是false
|=：或等 a|=b——>a=a|b 只要有true，整体结果就是true
^=：异或等 a^=b——>a=a ^=b 相同为假false，不同为真true
- 算术运算符
- – + * / %取余（取模）
- ++ 自增运算符
- – – 自减运算符
注意：如果++或- -出现在变量名的前面：先计算，后赋值；如果++或- -出现在变量名的后面，先赋值，后计算；++或- -只针对变量中存储的数据进行计算操作
- 比较运算符
> < >= <=
==恒等 判相等：只看字面值
===绝对等 判相等：不仅看字面值，还要看数据类型
!=不相等：只看字面值
!==不相等：不仅看字面值，还要看数据类型
- 逻辑运算符
- ！非运算 思想：取反 !=true=false; !false=true;
- &&与运算 思想：只要有false，结果就是false
- ||或运算 思想：只要有true，结果就是true
- 条件运算符（三元运算符）
格式：布尔（判断）表达式?参数一：参数二
思想：如果表达式的结果为true，执行参数一，否则执行参数二
- 字符串运算符
+ 拼接 场景：字符串+字符串 字符串+数字 数字+字符串 求和场景：数字+数字
+= 先拼接再赋值 a+=b—》a=a+b
7、判断条件语句
- if语句
格式一：思想：只关注条件成立后的操作
if(判断条件){
语句块;（条件成立后要做的事情）
}
格式二：思想：不管条件成立与否，都有对应的操作
if(判断条件){
语句块1;（条件成立后做的事情）
}else{
语句块2;（条件不成立做的事情）
}
格式三：思想：多条件的判定操作
if(判断条件1){
语句块1;
}else if(判断条件2){
语句块2;
}else if(判断条件3){
语句块3;
}else{
语句块n;(所有的条件都不成立)
}
8、循环语句
-
JS运算符：
赋值运算符 =
算数运算符 ++ - - 变量名前：先计算，后赋值 变量名后：先赋值，再计算 只针对变量中存储的数据进行操作
比较运算符
逻辑运算符：连接多个判断表达式 与 或 非 优先级：先看非运算，再看与运算符，最后看或运算
条件运算符：布尔表达式？参数一：参数二
字符串运算符 拼接
-
语句结构：
判断条件语句：
格式一：if语句 只关注条件成立后的操作
格式二：if…else语句 不管条件成立与否，都有对应的操作
格式三：if…else…if语句 多条件的判断操作
- 语句结构之间是可以互相嵌套使用的(if系列的语句，switch分支语句，循环语句)
prompt()：以弹窗的形式给用户提供一个输入框
其它的输出语句：
console.log(“输出的内容”); 把内容输出在控制台
document.write(“输出的内容”); 把内容输出在当前页面中
-
switch分支语句
-
格式：
switch(值/常量表达式){
case 值1:语句块1;break;
case 值2:语句块2;break;
case 值3:语句块3;break;
…
default:语句块n;
}
-
思想：拿上switch后面的值或常量表达式的结果值，和每一个case后面的值做匹配，匹配成功，就执行后面对应的语句块；如果都没有匹配上，就执行default后面的语句块
备注：常量表达式：指的是该表达式一定会产生一个具体的结果值
-
如果case后面没有break，俺么匹配成功后，语句块会一直向下执行，除非遇到break或者执行到default才会终止操作
-
循环语句：思想：只要条件成立，就会一直执行代码块**
-
for语句：
for(定义循环变量;循环条件;循环变量的计算操作){
循环体;
}
-
while语句：
定义循环变量
while(循环条件){
循环体;
循环变量的计算操作;
}
-
do…while语句：
定义循环变量
do{
循环体;
循环变量的计算操作;
}while(判断条件);
-
while和do…while区别
while语句有可能循环体一次都不会执行，因为它先看的判断条件;
do…while语句循环体至少会执行一次，因为它先看do后面的循环体。
-
-
循环语句四要素：
①循环变量：用来接收循环过程中发生改变的数据量
②循环条件（判断条件）：用来决定循环的执行或终止
③循环体：指的是条件成立后，一直要做的事情（代码块）
④循环变量的计算操作：控制着变量中存储数据的改变的操作
9、函数的应用
- 函数：又被称为“方法”，实现某个功能，进行代码块的封装操作
例：功能——》实现方式——》借助于【函数】这一项技术—–》封装该功能所对应的代码块
- 函数的创建：
function 函数名(参数1，参数2…){
函数体;
return 返回值;
}
解释：
①函数名参考标识符的命名规则
②小括号内的参数部分：可选可写的，如果需要用到参数，再来进行声明；如果小括号内写了参数，该函数也被称为”有参函数“；如果没写参数，简称为“无参函数”；
③return语句：可选可写的，return：返回；如果需要函数进行返回值的操作，就写上return语句，该函数也被称为“有返回值函数”；如果没有写return，简称为“无返回值函数”
④在创建函数时，小括号中声明的这些参数，被称为“形式参数”，简称“形参”（因为这些参数还没有被赋予具体的值）
⑤return语句不具备输出、显示、打印的功能，只是把函数的结果返回出来而已；如果想要得到返回值，还得借助于输出语句
- 函数的调用，只有函数被调用，函数才会被执行，函数体中的代码块也会被运行
格式：函数名(); 或 函数名(参数值1，参数值2…);
在函数调用时，小括号内传递的参数值，被称为“实际参数”，简称“实参”；传值的过程：实参传递给形参
- 语句结构
分支语句：
switch(值){
case 值:语句块;break;
default:语句块n;
}
循环语句：for while do…while
核心：循环变量 循环条件 循环体 循环变量的计算操作
- 函数操作：创建，调用
根据参数的有无：无参函数，有参函数——>看小括号内是否写参数
根据有无返回值：无返回值函数，有返回值函数——>看大括号内是否写return
function 函数名(参数){
函数体;
return 返回值;
}
函数名(); 函数名(实参);
10、匿名函数
- 概述：这类函数是没有名字的，是由变量来进行接收的
- 格式：
var 变量名=function(形参1,形参2…){
函数体;
return 返回值;
}
- 匿名函数的调用：
变量名(); 或者 变量名(实参1,实参2…);
- 匿名函数也可以当作实参值来进行操作
11、全局函数
- 概述：直接调用函数名来使用(已经声明好的)
- 全局函数
eval()：识别并执行字符串中的JS代码
encodeURI() 对字符进行编码
decodeURI() 对字符进行解码
isNaN() 判断是否为数字，是数字返回false，不是数字返回true：只看字面值
parseInt() 数据类型转换：转整数类型
12、事件的操作
-
事件：指的是用户在页面中发生的一系列操作行为，这些操作行为就被称为“事件”——>针对页面中的元素控件操作，比如：点击页面中的按钮，就会触发点击事件。
-
并不是所有的操作场景，都有对应的时间；对于程序员而言，就只关注好哪些操作，会触发对应的事件场景即可：
关注点：用户操作<——>事件场景
-
常见的事件：
-
焦点事件：
onblur：失去焦点
onfocus：获得焦点
-
键盘事件：
onkeydown：按下键盘任意一个按键
onkeypress：按下键盘任意一个按键，且必须产生一个字符
onkeyup：释放键盘任意一个按键
-
载入事件：
onload：加载事件
onunload：离开页面
-
点击事件
onclick 单击鼠标左键
ondbclick 双击鼠标左键
-
鼠标事件
onmousedown 单击鼠标任意一个按键
onmousemove 鼠标在控件元素移动
onmouseover 鼠标移动到某个控件
onmouseout 鼠标移开某个控件
onmouseup 释放(抬起)鼠标任意一个按键
-
其它事件（设置在form标签）
onreset 重置按钮事件
onsubmit 提交按钮事件
-
-
事件的处理方式：函数
-
方式一：
思想：把事件看成是标签的属性进行设置
<开始标签 事件名=“函数调用操作”>
备注：触发了该事件，就会进行函数的调用操作，言外之意，事件的处理过程，全部是封装在函数中来进行代码编写的
-
<script language="JavaScript">
事件处理过程对应的函数
script>
-
方式二：
思想：把事件的设置，以及事件处理的函数，全部放在JS代码中来实现
<开始标签 id=“id值”>结束标签>
<script language="JavaScript">
//1.先找到要设置(关联)事件的标签控件
//通过已有的方法配合id值，获取到控件元素，交给变量做存储
var 变量名=document.getElementById("id值");
//2.通过匿名函数实现事件处理：
变量名.事件=function(){
函数体;
}
script>
注意：方式二的写法，一定是：控件先行，事件处理要放在控件元素的后方进行设置—–>先有控件，再有事件和事件处理过程
13、正则表达式的应用
-
概述：正则表达式，提供了一个字符模板(字符模式)，通过该模板能够进行数据的匹配操作，验证输入项数据的合法性或正确性
-
组成：正则表达式是由普通字符，以及特殊字符(元字符)构成的模式字符串。
-
正则表达式的通配符：
-
字符类
[字符] 匹配任意一个字符
[^字符] 把中括号内的字符给排除在外
\d 匹配一个数字
\D 匹配除数字外的字符
\w 匹配大小写字母，数字，下划线_
-
量词
？ 前一项最多出现一次
+前一项至少出现一次
*前一项任意次
{n} 前一项恰饭出现n次
{n，} 前一项至少出现n次
{n，m} 前一项至少出现n次，但不超过m次
-
指定位置的匹配
^字符 匹配以该字符开头的行数据
字符$ 匹配以该字符结尾的行数据
\b 匹配单词的边界
\B 匹配单词的非边界
-
选择匹配符
字符1 | 字符2 匹配两边任意一个字符即可
-
分组
()：通过小括号将多个字符看成是一个整体，对该整体进行操作
-
-
正则表达式的创建：
var 变量名=/正则表达式模板/;
-
正则表达式的判定：
-
方式一：test()：匹配成功返回true，失败返回false
变量名.test(“检测的数据”);
-
方式二：exec()：匹配失败，返回null；匹配成功，返回数组(集合)，数组中第一个元素值是匹配成功的数据，数组中剩下的值，取决于模板的分组()，一个分组就是数组中的一个元素值。
变量名.exec(“检测的数据”);
-
-
如何在JS代码中获取到表单输入框的内容？name属性
格式：表单name.输入框name.value
-
获取数组中的值：数组变量名[下标]