在前端测试过程中,少不了听到开发说到JS,JS在webJavaScript 是浏览器脚本语言(简称JS),主要用来向HTML页面添加交互行为。
学习网址:http://www.w3school.com.cn/js/js_intro.asp
通过<script></script>标签可以向HTML插入JS脚本。
具体可详见笔者另外一篇博文:关于HTML的JS代码,外部JS的说明:w3school之HTML学习笔记-脚本标签
JavaScript 中的所有事物都是对象:数字、字符串、数组、函数。
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
访问对象属性的语法是:objectName.propertyName。
访问对象方法的语法是:objectName.methodName()。
2.1 JS数字
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带。
所有 JavaScript 数字均为 64 位。
如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。
创建 Number 对象的语法:
var myNum=new Number(value);
var myNum=Number(value);
方法:
toString():转成字符型
valueOf():返回一个 Number 对象的基本数字值。
2.2JS字符串
可以是引号中的任意文本。您可以使用单引号或双引号。
创建 String 对象的语法:
new String(s);
String(s);
var txt="Hello World!"
属性:
txt.length
方法:
txt.indexOf("需检索的字符串值"):可返回某个指定的字符串值在字符串(如txt)中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。
txt.lastIndexOf("需检索的字符串值"):可返回某个指定的字符串值在字符串(如txt)中最后出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。
txt.match():检索一个字符串(txt.match(searchvalue))或检索一个正则表达式的匹配(txt.match(/pattern/[g或者i)]),返回指定匹配的值g表示多次匹配,i表示不区分大小写。如果无g,表示只匹配一次,返回第一次匹配到的数据。
txt.replace():将字符串的一些字符替换成另一个字符串。可以按照字符串匹配,也可以按照正则表达式匹配。入参同match。
txt.split(分隔符):将字符串分隔成数组。String.split() 执行的操作与Array.join执行的操作是相反的。
txt.big():字体变大
txt.small():字体变小
txt.bold():字体加粗
txt.italics():字体变斜体
txt.fontcolor("Red") :设置字体颜色
txt.fontsize(16):设置字体大小
txt.toLowerCase():设置字体小写
txt.toUpperCase():设置字体大写
txt.sub():字体上标
txt.sup():字体下标
txt.link("http://www.w3school.com.cn"):设置链接
2.3 JS数组
数组:通过new Array()创建数组或用[]创建。通过[索引]访问。JS的数组和Python的列表类似。字
创建Array对象的语法:
var arr =new Array()
arr [0]="Saab"
或
var arr =new Array("Saab","Volvo","BMW")
或
var arr =["Saab","Volvo","BMW"]
属性:
arr.length:返回数组长度。
方法:
arr.contat(另一个数组):合并另个数组。
arr.contat(连接符号):使用 join() 方法将数组的所有元素组成一个字符串。
arr.sort():数组排序,从小到大排。
arr.reverse():颠倒数组中元素的顺序。
2.4JS对象
对象:通过{}创建。通过[key]或句点访问。JS的数组和Python的字典类似。
创建对象的语法:
var obj =new Object()
obj.fisrtname="Saab"
或
var obj={firstname:"Saab",secondname:"Volvo"}
2.5 JS日期
创建日期对象的语法:
var d=new Date()
方法:
Date():获取当前时间。
d.getTime():返回从 1970 年 1 月 1 日至今的毫秒数。
d.setFullYear(年,月(从0开始),日) :设置具体的日期。
d.getDay():获取星期,如今天是星期日,那么就返回0,星期一,那么返回1,依次类推。
2.6JS正则表达式
创建RegExp对象的语法:
var patt1=new RegExp("e");
方法:
patt1.test(被匹配的字符串):test() 方法检索字符串中的指定值。返回值是 true 或 false。
patt1.exec(被匹配的字符串):exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。
patt1.compile("d"):用于改变 RegExp,改变检索模式,如检索模式由e改为d。
对象拥有属性和方法的数据。在面向对象的语言中,属性和方法被称为对象的成员。
属性是与对象相关的值。方法是能够在对象执行的动作。
<html> <body> <script type="text/javascript"> document.write("<p>第一种实现方式:Hello World!</p>") </script> <p>第二种实现方式:Hello World!</p> </body> </html>
编写JS脚本注意点:
数据类型:字符串、数字、布尔、数组、对象、Null、Undefined
布尔:只能有两个值:true 或 false。
Undefined :这个值表示变量不含有值。
null:可以通过将变量的值设置为 null 来清空变量。
用;号在每条可执行的语句结尾添加。
浏览器会按照编写顺序来执行每条语句。
代码块由{}包围。
JavaScript 对大小写敏感。
JavaScript会忽略多余的空格。
在文本字符串中使用反斜杠对代码行进行换行。
注释:单行注释以 // 开头。多行注释以 /* 开始,以 */ 结尾。
变量用var声明。一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。
变量必须以字母开头。变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)。
当您向变量分配文本值时,应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。
使用function来定义函数。
字符串能够用+号连接。
可用条件运算符:variablename=(condition)?value1:value2
break和continue可以用于循环语句中。break 语句用于跳出循环。continue 用于跳过循环中的一个迭代。
4.1JS函数
语法如下:
function functionname(argument1,argument2...,argumentN)
{
这里是要执行的代码;
[return 返回值;]
}
调用:
可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。
4.2if语句
语法如下:
if (条件 1)
{
当条件 1 为 true 时执行的代码;
}
else if (条件 2)
{
当条件 2 为 true 时执行的代码;
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码;
}
4.3switch语句
语法如下:
switch(n)
{
case 1:
执行代码块 1;
break;
case 2:
执行代码块 2;
break;
default:
n 与 case 1 和 case 2 不同时执行的代码;
}
说明:
首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
4.4for语句
4.4.1for
循环代码块一定的次数。
语法如下:
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块;
}
说明:
语句 1 在循环(代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
4.4.2for/in
循环遍历对象的属性。
语法如下:
for (x in 数组或对象)
{
被执行的代码块;
}
4.5while语句
4.5.1while
当指定的条件为 true 时循环指定的代码块。
语法如下:
while (条件)
{
需要执行的代码;
}
4.5.2do/while
同样当指定的条件为 true 时循环指定的代码块。
语法如下:
do
{
需要执行的代码;
}
while (条件);
说明:
该循环至少会执行一次。
4.6JS标签
语法如下:
label 标签名:
语句
说明:
continue [标签名](带有或不带标签引用)只能用在循环中。
break 语句(不带标签引用),只能用在循环或 switch 中。
通过标签引用,break [标签名]可用于跳出任何 JavaScript 代码块。
4.7try语句
语法如下:
try
{
在这里运行代码;
也可以自己throw exception;
}
catch(err)
{
在这里处理错误;
}
说明:
try 语句允许我们定义在执行时进行错误测试的代码块。
catch(err) 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。类似Python中的except。
JavaScript 语句 try 和 catch 是成对出现的。
throw 语句允许我们创建自定义错误。放在try中。类似Python中的raise。