web自动化测试-D2-学习笔记之二(HTML基础之JS)

HTML中的三把利器的JS 又称为JavaScript,看着好像和Java有点联系,实际上他和java半毛钱关系都没有,JavaScript和我们学习的Python、Go、Java、C++等,都是一种独立的语言,Python的解释器有Python2.7、Python3.x,浏览器具有解释JavaScript的功能,所以它才是HTML的三把利器之一。

在HTML中可以将JavaScript/JS的代码写在head中,被script标签所包裹,当浏览器解释HTML时,遇到style标签时,按照CSS规则解释,遇到Script标签时,按照JavaScript的语法规则解释。

引入JavaScript代码,类似于Python的import

<script src="public.js" type="text/javascript"></script>

head中引入JS与body中引入JS区别

html代码从上而下解析,如果在head中引入JS,影响页面打开的速度,存在风险,所以通常放在htmlbody的最下方,这样页面内容先展示,最后在加载JS。注:写在最下面要有底线,写在body内部的最底下。

注释

单行注释通过 //  多行通过 /* */

JS变量

1

2

3

4

name = ‘dsx‘; // 默认全局变量

function func() {

var name = ‘niulaoshi‘; // 局部变量

}

JS基本数据类型(JavaScript 声明数据类型通过new)

字符串

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

//定义字符串

var str = ‘你开心就好!‘;

var name = ‘大师兄‘;

// 字符串的拼接

var name_str = name+str;

//字符串操作

str = ‘大师兄‘

str.charAt(0) 根据角标获取字符串中的某一个字符  char字符

str.substring(1,3) 根据角标获取 字符串子序列 大于等于x  小于y

str.length 获取字符串长度

str.concat(‘牛教授‘)  拼接字符串

str.indexOf(‘大师‘) 获取子序列的位置

str.slice(0,1)  切片 start end

str.toLowerCase()  变更为小写

str.toUpperCase() 变更大写

str.split(‘师‘,1) 切片 返回数组 参数2 为取分割后数组的前x个元素

数字类型(JavaScript 只有一种数字类型。数字可以带小数点,也可以不带)

var age = 18;

var score = 89.22;

number = ‘18‘;

// 字符串转

var n = parseInt(number);

// 转换成小数

f =parseFloat(number)

布尔类型(true 或 false)

var t = true; var f = false;

数组类型(就是Python的列表)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

// 第一种创建方式 var list = new Array();

list[0] = ‘大师兄‘;

list[1] = ‘牛教授‘;

// 第二种创建方式

var list2 = new Array(‘大师兄‘,‘牛教授‘);

// 第三种创建方式

var list3 = [‘大师兄‘,‘牛教授‘];

数组操作

var list3 = [‘大师兄‘,‘牛教授‘];

list3.length 数组的长度

list3.push(‘dsx‘) 尾部追啊参数

list3.shift() 头部获取一个元素 并删除该元素

list3.pop() 尾部获取一个元素 并删除该元素

list3.unshift(‘dsx‘) 头部插入一个数据

list3.splice(start, deleteCount, value) 插入、删除或替换数组的元素

list3.splice(n,0,val) 指定位置插入元素

list3.splice(n,1,val) 指定位置替换元素

list3.splice(n,1) 指定位置删除元素

list3.slice(1,2) 切片;

list3.reverse() 反转

list3.join(‘-‘) 将数组根据分割符拼接成字符串

list3.concat([‘abc‘]) 数组与数组拼接

list3.sort() 排序

对象类型(等同于Python的字典)

1

2

3

4

5

var dict = {name:‘dsx‘,age:18,sex:‘男‘ };

var age = dict.age;

var name = dict[‘name‘];

delete dict[‘name‘] 删除

delete dict.age 删除

定时器

1

2

3

4

5

6

setInterval(alert(‘大师兄‘),5000); //参数1 为定时器执行的功能,第二个参数为定时器工作的间隔时间 毫秒为单位

function t1() {

console.log(‘我是大师兄‘)

}

setInterval(‘t1()‘, 5000);// 可以运行方法

JS条件判断语句

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

if (条件) {

执行代码块

} else if (条件) {

执行代码块

} else {

执行代码块

};

if (1 == 1) {

console.log()

} else if (1 != 1) {

console.log()

} else if (1 === 1) {

console.log()

} else if (1 !== 1) {

console.log()

} else if (1 == 1 && 2 == 2) { //and

console.log()

} else if (1 == 1 || 2 == 2) { //or

console.log()

}

switch (a) {

case 1:

console.log(111);

break;

case 2:

console.log(222);

break;

default:

console.log(333)

}

JS循环语句

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

第一种循环

循环的是角标

tmp = [‘宝马‘, ‘奔驰‘, ‘尼桑‘];

tmp = ‘宝马奔驰尼桑‘;

tmp = {‘宝马‘: ‘BMW‘, ‘奔驰‘: ‘BC‘};

for (var i in tmp) {

console.log(tmp[i])

}

第二种循环

不支持字典的循环

for (var i = 0; i < 10; i++) {

console.log(tmp[i])

}

第三种循环

while (1 == 1) {

console.log(111)

}

函数定义

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

1、普通函数

function 函数名(形参, 形参, 形参) {

执行代码块

}

函数名(形参, 形参, 形参);

2、匿名函数 匿名函数没有名字,无法调用时找到,将整个函数当做一个参数传递

setInterval(function () {

console.log(11)

}, 5000);

3、自执行函数创建函数并且自动执行

当引入多个js文件时,函数名可能会出现重复,这时通过自执行函数,保证每一个js文件都会被解析,从而生成独立的容器,防止调用冲突

(function (name) {

console.log(name)

})(‘dsx‘);

作用域

Python的作用域是以函数作为作用域的,其他语言以代码块({})作为作用域的。

JavaScript是以函数作为作用域

function tmp() {

var name = ‘dsx‘;

console.log(name)

}

tmp();

console.log(name);

2、函数作用域在函数未被调用之前,已经创建

var name = ‘nhy‘;

function a() {

var name=‘dsx‘;

function b() {

console.log(name);

}

return b

}

var c = a();

c();

3、函数的作用域存在作用域链(代码不执行时,先生成作用域链)

当函数嵌套函数时,每一个函数为一个作用域,多层就叫做作用域链,查找遵循作用域链规则

function outer() {

name = ‘nn‘;

function inner() {

var name = ‘ii‘

console.log(‘in‘, name)

}

console.log(‘out‘, name);

inner()

}

outer();

函数不调用时,只生成作用域,当调用时遵循作用域链执行,name都为hhh

function outer() {

var name = ‘nn‘;

function inner() {

console.log(‘in‘, name)

}

var name = ‘hhh‘;

console.log(‘out‘, name);

inner()

}

outer();

4、函数内,局部变量提前声明 JavaScript的函数在运行前会找到函数内的所有局部变量执行

var xxx;

function func() {

console.log(name);

var name = ‘dsx‘;

}

func();

面向对象

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

// 在JavaScript中,方法和类写法类似,区别方式为是否有this,如果有就可以当做是类来用

// JavaScript的类默认就拥有了Python的构造函数__init__

function Foo(name) {

this.name = name;

}

// 创建对象时JavaScript需要用到new关键字来创建对象

var obj = new Foo(‘dsx‘);

console.log(obj.name);

// 类中定义方法,虽然可以用,但是在多个实例时存在重复实例方法,浪费资源

// 创建对象时,say每次创建对象,都会创意一个say的方法。

function Foo1(name) {

this.name = name;

this.say = function () {

console.log(this.name)

}

}

var obj1 = new Foo1(‘dsx_obj1‘);

obj1.say();

// 完善类的定义

function Foo2(name) {

this.name = name

}

// 类的原型,将共用的的方法抽出来,当在实例化后,只创建了一个叫做Foo2的对象,对象内只有name,在调用方法时去现在Foo中找,没有找到,会在去原型中找

是否有该方法。有执行,没有就报错

Foo2.prototype = {

say: function () {

console.log(this.name)

}

};

var obj2 = new Foo2(‘dsx_obj2‘);

obj2.say();

序列化

1

2

JSON.stringify(obj) 序列化

JSON.parse(str) 反序列化

转义

转义中文或特殊字符

1

2

3

4

5

6

7

8

9

10

11

1、在标准的url的规范中是不允许出现中文字符或某些特殊字符的,所以要进行转义

2、& 代表参数的链接,如果就是想传& 给后端那么必须转义

decodeURI(url) URl中未转义的字符

decodeURIComponent(url) URI组件中的未转义字符

encodeURI(url) URI中的转义字符

encodeURIComponent(url) 转义URI组件中的字符

字符串转义

var name=‘大师兄‘

escape(name) 对字符串转义

unescape(name) 转义字符串解码

原文地址:https://www.cnblogs.com/blackbird0423/p/8847223.html

时间: 2024-10-10 23:36:20

web自动化测试-D2-学习笔记之二(HTML基础之JS)的相关文章

Dynamic CRM 2013学习笔记(二十三)CRM JS智能提示(CRM 相关的方法、属性以及页面字段),及发布前调试

我们知道在CRM的js文件里引用XrmPageTemplate.js后,就可以实现智能提示,但每个js文件都引用太麻烦了,其实可以利用vs的功能让每个js文件自动实现智能提示CRM的js: 另外,我们调试js,发布js文件也是比较繁琐的事情,最好的办法是全部调好,再发布上去,本文介绍用firefox + firebug + frame可以很方便地调试CRM js,全部调好后,再上传js,明显可以加快开发的速度. 1. 智能提示 CRM相关的方法属性的vs 里加上XrmPageTemplate.j

Dynamic CRM 2013学习笔记(二十三)CRM JS智能提示,及firebug frame调试

我们知道在CRM的js文件里引用XrmPageTemplate.js后,就可以实现智能提示,但每个js文件都引用太麻烦了,其实可以利用vs的功能让每个js文件自动实现智能提示CRM的js: 另外,我们调试js,发布js文件也是比较繁琐的事情,最好的办法是全部调好,再发布上去,本文介绍用firefox + firebug + frame可以很方便地调试CRM js,全部调好后,再上传js,明显可以加快开发的速度.   1. vs 里加上XrmPageTemplate.js: http://yunp

Web前端开发学习笔记(二)

Homework2:http://my.ss.sysu.edu.cn/wiki/display/WEB/Homework+2+-+Movie+Review 这份作业跟布局相关,因此很多都是布局的知识: 1.display属性的block,inline-block,inline值的区分 其实真正需要区分的是inline-block和inline.都是在同一行内,怎么区分他们呢?首先要明白块元素和行内元素很重要的一点区别:块元素的高度和宽度我们都是可以控制的,而行内元素是不可以的.block对应的就

web自动化测试-D3-学习笔记之二(Selenium-WebDriverApi接口详解)

浏览器操作 1 2 3 4 5 6 7 8 # 刷新 driver.refresh() # 前进 driver.forward() # 后退 driver.back() 获取标签元素 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 # 通过ID定位目标元素 driver.find_element_by_id('i1') # 通过className定位目标元素 driver.find_element_by_class_name

python 学习笔记十二 CSS基础(进阶篇)

1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 css存在方式: 元素内联 页面嵌入 外部引入 语法:style = 'key1:value1;key2:value2;' 1.元素内联(在标签中使用css) <!--在标签使用--> &

java学习笔记(二)基础语法(上)

Java 作为一门编程语言,与其它语言一样,有字符集,标识符和关键字,变量,常量,语句等编程语言的基本要素. 关键字:abstract抽象的,boolean布尔型,break跳出循环,continue中止本次循环,byte字节型,case,catch,char,class,const,default,do,double,else,extends,assert,final,finally,float ,for,if,implements,import,instandceof,int,interfa

Dynamic CRM 2013学习笔记(二十七)无代码 复制/克隆方法

前面介绍过二种复制/克隆方法:<Dynamic CRM 2013学习笔记(十四)复制/克隆记录> 和<Dynamic CRM 2013学习笔记(二十五)JS调用web service 实现多条记录复制(克隆)功能>. 第一种方法,是复制单个同类型实体:第二种方法是在list界面,复制多条记录到另一个实体:这二种方法都要coding. 下面介绍一种复制方法,无需代码,就可以在创建时,把另一实体的相关信息克隆出来. 一.需求 现有二个实体,一个RC, 一个RC Change(RC的子实

Dynamic CRM 2013学习笔记(二十八)用JS动态设置字段的change事件、必填以及可见

我们知道通过界面设置字段的change事件,是否是必填,是否可见非常容易.但有时我们需要动态地根据某些条件来设置,这时有需要通过js来动态地控制了. 下面分别介绍如何用js来动态设置.   一.动态设置字段的change事件 // form on load event function onLoad() { init();   pageAttr.delivery_from.addOnChange(deliveryFromChange); pageAttr.type.addOnChange(typ

【web开发学习笔记】Structs2 Action学习笔记(二)

action学习笔记2-有关于action method的讨论 Action执行的时候并不一定要执行execute方法,可以在配置文件中配置Action的时候用method=来指定执行哪个方法 也可以在url地址中动态指定(动态方法调用DMI)(推荐) 方法一 <struts> <constant name="struts.devMode" value="true" /> <package name="user" e