w3school之JavaScript学习笔记

时间:2023-03-09 03:49:32
w3school之JavaScript学习笔记

在前端测试过程中,少不了听到开发说到JS,JS在webJavaScript 是浏览器脚本语言(简称JS),主要用来向HTML页面添加交互行为。

学习网址:http://www.w3school.com.cn/js/js_intro.asp

目录

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。