正文
w3school之JavaScript学习笔记
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
在前端测试过程中，少不了听到开发说到JS，JS在webJavaScript 是浏览器脚本语言（简称JS），主要用来向HTML页面添加交互行为。
学习网址：http://www.w3school.com.cn/js/js_intro.asp
目录
1.JS概述
2.JS对象
3.JS对象实例
4.JS编程
1.JS概述
点击返回目录
通过<script></script>标签可以向HTML插入JS脚本。
具体可详见笔者另外一篇博文：关于HTML的JS代码，外部JS的说明：w3school之HTML学习笔记-脚本标签
2.JS对象
点击返回目录
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。
3.JS对象实例
点击返回目录
对象拥有属性和方法的数据。在面向对象的语言中，属性和方法被称为对象的成员。
属性是与对象相关的值。方法是能够在对象执行的动作。
3.1document对象属性
属性：
document.title:设置文档标题等价于HTML的title标签
方法：
document.write("HTML元素") :通过这个方法动态地向html文档写入值，同时显示它。在js的脚本中，通过document.write，可以显示js中写的代码。
如下：下面效果一样。
<html>
<body>
<script type="text/javascript">
document.write("<p>第一种实现方式：Hello World!</p>")
</script>
<p>第二种实现方式：Hello World!</p>
</body>
</html>
定位方法：
其实跟selenium定位元素如出一辙。通过定位到某个元素对象，动态地对其进行样式内容状态等进行改变。
document.getElementById("ID值") :通过这个获取指定ID的元素对象
document.getElementByName("Name值"):通过这个获取指定Name的元素对象
document.getElementsByTagName("Tag标签名"):通过这个获取指定Tag的元素对象
document.getElementsByClassName("类名"):通过这个获取指定类的元素对象
document.querySelectorAll("selector选择器"):通过这个获取指定CSS的元素对象
3.2元素对象
element=document.getElementById("ID名")的属性有：
变量：
element.innerHTML：元素的内容（跟selenium的text一样）
element.value：输入框的值
element.className：元素的类名
element.style.具体属性：元素的样式，颜色，背景颜色，字体大小等
element.style.displey：是否显示：不显示：element.style.displey="none"。显示：element.style.displey="block"
element.checked=true; //勾选
element.checked=false; //不勾选
方法：
element.getAttribute(name)：name是标签的属性名，该对象是获取属性值。
4.JS编程
点击返回目录
编写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。
