一.为什么学习JavaScript

进行web自动化测试也好还是移动端自动化测试也好，必须要对系统实现用到的技术有一定的了解，而JavaScript作为世界上最流行的脚本语言，在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑的实现上都是由JavaScript驱动的，在进行自动化测试的过程中需要读懂JavaScript代码的调用关系和实现功能，才能利用selenium采用相关的技术实现自动化脚本。并且在ajax技术中页面调用js代码，而selenium是无法通过定位元素操作元素完成相应的动作，这就需要在Selenium Webdriver中调用js代码，这都要求你对js要有一定的了解。

二.什么是JavaScript

19世纪，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。由于网景公司希望能在静态HTML页面上添加一些动态效果，于是一位叫布兰登·艾克（Brendan Eich）的哥们在两周之内设计出了JavaScript语言。为什么起名叫JavaScript？原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广，但事实上JavaScript除了语法上有点像Java，其他部分基本上没关系。因为网景开发了JavaScript，一年后微软又模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联合ECMA（European Computer Manufacturers Association）组织定制了JavaScript语言的标准，被称为ECMAScript标准。所以ECMAScript是一种语言标准，而JavaScript是网景公司对ECMAScript标准的一种实现。JavaScript的标准——ECMAScript在不断发展，最新版ECMAScript 6标准（简称ES6）已经在2015年6月正式发布了，它是JavaScript语言的下一代标准，它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

JavaScript ( JS ) 是基于对象和事件驱动的安全性的脚本语言，是轻量级解释或JIT编译型的编程语言。JavaScript ( JS )为 HTML 设计师提供了一种编程工具,HTML 创作者往往都不是程序员，但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言！几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。JavaScript 可以将动态的文本放入 HTML 页面,类似于这样的一段 JavaScript 声明可以将一段可变的文本放入 HTML 页面：document.write("<h1>" + name + "</h1>").JavaScript 可以对事件作出响应,可以将 JavaScript 设置为当某事件发生时才会被执行，例如页面载入完成或者当用户点击某个 HTML 元素时.JavaScript 可以读写 HTML 元素,改变 HTML 元素的内容。javascript在数据被提交到服务器之前，可被用来验证这些数据。JavaScript 可被用来检测访问者的浏览器,并根据所检测到的浏览器，为这个浏览器载入相应的页面。JavaScript 可被用来创建 cookies,存储和取回位于访问者的计算机中的信息。javascript还可以实现ajax,还可以做后台，比如node.js等等，还有桌面引擎node-webkit可以将JavaScript渲染成桌面应用，在unity3d中使用JavaScript写游戏（unity3d使用的JavaScript的语法，特性等等）。

三.初识JavaScript

下面是Javascript的简单代码：

<html>
<head><title></title><script type="text/javascript">function alert_hello(){alert("欢迎加入javascript");}</script>
</head>
<body><input type="button" onclick="alert_hello()" value='click it'/>
</body>
</html>

技术解释：JavaScript是由<script type="text/javascript">..<javascript>代码说明，javascript脚本在<script type="text/javascript">..<javascript>之间，alert_hello()功能是弹出对话框，内容是"欢迎加入javascript"每行代码结束之后加上分号。

1. HTML引用JavaScript，一般有三种：

A. 页面直接引用js

 <script type="text/javascript">document.write('JavaScript代码');</script>

B. 引用外部js

 <script>window.onload = function(){var script = document.createElement("script");script.setAttribute("type","text/javascript");script.src = " http://xxx.com/script/ common.js ";document.getElementsByTagName("head")[0].appendChild(script); }</script>

C. 远程引用js

<script type="text/javascript" src="../common.js"></script>（相对路径）

或

<script src="http://xxx.com/script/common.js" type="text/javascript"></script>（绝对路径）；

2. JavaScript书写位置，一般有三种：

A. Html中head头部：

 <head><title>javascript引用</title><script type="text/javascript" src=" http://xxx.com/script/ common.js ">window.onload = function(){var script = document.createElement("script");script.setAttribute("type","text/javascript");script.src = " http://xxx.com/script/ common.js ";document.getElementsByTagName("head")[0].appendChild(script); }</script></head>

A. HTMLl中body:

 <body><p>javascript引用</p><script type="text/javascript" src=" http://xxx.com/script/ common.js ">  window.onload = function(){var script = document.createElement("script");script.setAttribute("type","text/javascript");script.src = " http://xxx.com/script/ common.js ";document.getElementsByTagName("head")[0].appendChild(script); }</script></body>

把JavaScript放在HTML中的body部分最底部，是最好的编程习惯，因为html是从上往下执行的，假设有js文件或者js执行耗时比较久的话，下面的html代码就无法执行了。所以放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

B. HTML标签

<p onClick="javascript:alert('你是对的！')">请点击</p>

四.JavaScript语法

下面是简单的Javascript代码：

<html>
<head><title></title><script type="text/javascript">function alert_hello(){alert("欢迎加入javascript");}</script>
</head>
<body><input type="button" onclick="alert_hello()" value='click it'/>
</body>
</html>

技术解释：JavaScript是由<script type="text/javascript">..<javascript>代码说明，javascript脚本在<script type="text/javascript">..<javascript>之间，alert_hello()功能是弹出对话框，内容是"欢迎加入javascript"每行代码结束之后加上分号。

1. HTML引用JavaScript，一般有三种：

A. 页面直接引用js

 <script type="text/javascript">document.write('JavaScript代码');</script>

B. 引用外部js

 <script>window.onload = function(){var script = document.createElement("script");script.setAttribute("type","text/javascript");script.src = " http://xxx.com/script/ common.js ";document.getElementsByTagName("head")[0].appendChild(script); }</script>

C. 远程引用js

<script type="text/javascript" src="../common.js"></script>（相对路径）

或

<script src="http://xxx.com/script/common.js" type="text/javascript"></script>（绝对路径）；

2. JavaScript书写位置，一般有三种：

A. Html中head头部：

 <head><title>javascript引用</title><script type="text/javascript" src=" http://xxx.com/script/ common.js ">window.onload = function(){var script = document.createElement("script");script.setAttribute("type","text/javascript");script.src = " http://xxx.com/script/ common.js ";document.getElementsByTagName("head")[0].appendChild(script); }</script></head>

B. HTMLl中body:

 <body><p>javascript引用</p><script type="text/javascript" src=" http://xxx.com/script/ common.js ">  window.onload = function(){var script = document.createElement("script");script.setAttribute("type","text/javascript");script.src = " http://xxx.com/script/ common.js ";document.getElementsByTagName("head")[0].appendChild(script); }</script></body>

把JavaScript放在HTML中的body部分最底部，是最好的编程习惯，因为html是从上往下执行的，假设有js文件或者js执行耗时比较久的话，下面的html代码就无法执行了。所以放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

C. HTML标签

<p onClick="javascript:alert('你是对的！')">请点击</p>

四.JavaScript语法

1. 常量和变量

A. 常量：

JavaScript常量通常称为字面常量，它是不能改变的数据，在JavaScript中，常量有以下6种基本类型：

  • 1) 整型常量：可以使用十六进制、八进制和十进制表示其值。如正整数，如1，33，55，负整数，-22，-235
  • 2) 浮点型常量：浮点型常量又称为实数常量，是由整数部分加小数部分表示，如2.34，235.89。可以使用科学或标准方法表示，如3e8,9e5等。
  • 3) 布尔常量：又称为逻辑值，只有两种状态：True或False。它主要用来说明或代表一种状态或标志。
  • 4) 字符型常量：使用单引号(')或双引号(")括起来的一个或几个字符。如"I am a student","3245","ewrt234234"等。
  • 5) 空值：Null，表示什么也没有。如试图引用没有定义的变量，则返回一个Null值。
  • 6) 特殊字符：JavaScript中有以反斜杠(/)开头的不可显示的特殊字符。通常称为控制字符。

B. 变量：

变量是计算机内存中的某个单元，为了方便计算机处理数据，应先把数据存入到内存中去，根据保存的变量类型，声明属于这种类型的变量，计算机会根据这种类型分配相应的内存单元，并将该内存单元与声明的变量对应上。通过该变量就可以把数据保存到内存或者从内存中读取出来。

1) 变量声明

这是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量（跟python的使用习惯不太相同），声明变量的格式：var myVariable;。

2) 变量命名规范

注意：变量名区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号；变量命名长度应该尽可能的短，并抓住要点，尽量在变量名中体现出值的类型；尽量避免使用没有意义的命名；禁止使用JavaScript关键词、保留字全名

3) 变量的作用域：

在JavaScript中有全局变量和局部变量。全局变量是定义在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见得。代码实例：

 <script language="javascript" type="text/javascript"><!--var a = "我是全局变量";function check(){var a = "我是局部变量";document.write(a);}check();//--></script>

2. 表达式和运算符

A. 表达式

表达式是使用各种运算符把两个数据或者多个数据结合起来，生成一个新的值。如2+4=6，5%7=35，19<9=false,表达式是以运算符为基础的，而运算符有很多种。

3. 函数

函数对任何一门语言来说都是核心的概念。在JavaScript里，函数即对象，程序可以随意操控它们。函数可以嵌套在其他函数中定义，这样它们就可以访问它们被定义时所处的作用域中的任何变量。

A. 函数定义

function funcname([arg1 [,arg2 [...,argn]]]){statement;
}

funcname是要声明的函数名称的标识符。函数名之后的圆括号中是参数列表，参数之间使用逗号分隔。当调用函数时，这些标识符则指代传入函数的实参。function语句里的花括号是必需的，这和while循环和其他一些语句所使用的语句块是不同的，即使函数体内只包含一条语句，仍然必须使用花括号将其括起来。

实例：1!+2!+3!+4!+n!=

<script language="javascript" type="text/javascript">
<!--
//定义函数计算阶乘
function factorial( n ){ return ( n <= 1 ) ? 1 : n * factorial( n-1 );
}
//定义函数计算阶乘的和
function result(n)
{
iTem=0;
for(i=1;i<=n;i++){iTem+=factorial(i);}
return iTem;
}
//-->
</script>

1. 控制语句

A. 条件语句：通过判断表达式的值来决定执行还是跳过某些语句，包括if语句和switch语句。

1) If语句语法：

if(expression)statement1
elsestatement2

if语句条件的求值结果永远是一个布尔值，即只能是true或false。花括号中的语句，只有在给定条件的求值结果是true的情况下才会执行。

2) switch语句语法：

switch (expression){case value1: statement1;break;case value2: statement2;break;case value3: statement3;break;default: statement4;
}

switch语句执行一个多路分支，它会根据算expression的值，根据条件判断，查找case子句的表达式是否和expression的值相同。如果找到匹配的case，那么将会执行这个case对应的代码块。如果找不到匹配的case，那么将会执行default标签中的代码块。每一个case语句块的结尾处都使用了关键字break。break语句可以使解释器跳出switch语句或循环语句。

B. 循环语句

JavaScript有4种循环语句：while、do/while、for、for/in，它们的工作原理一样：只要给定条件仍能得到满足，包含在循环语句里的代码就将重复地执行下去。一旦给定条件的求值结果不再是true，循环也就到此为止。其中最常用的循环就是对数组元素的遍历

（1） While语法

while(expression){statement
}

while语句属于前测试循环语句，也就是说，在循环体内的代码被执行之前，就会对出口条件求值，当表达式expression是真值时则循环执行statement，直到expression的值为假值为止；如果是假值，那么程序将跳过循环。

（2） do while语法：

do{statement
}while(expression);

do while语句是后测试循环，即退出条件在执行循环内部的代码之后计算。这意味着在计算表达式之前，至少会执行循环主体一次。

（3） for语法：

for(initialize;test;increment){statement;
}

for语句提供了一种比while语句更加方便的循环控制结构，用for循环来重复执行一些代码的好处是循环控制结构更加清晰。

（4） for in语法：

 for(variable in object){statement
}

variable通常是一个变量名，也可以是一个可以产生左值的表达式或一个通过var语句声明的变量，总之必须是一个适用于赋值表达式左侧的值。object是一个表达式，这个表达式的计算结果是一个对象。同样，statement是一个语句或语句块，它构成了循环的主体。for/in循环可以用来更方便地遍历对象属性成员。　　在执行for/in语句的过程中，javascript解释器首先计算object表达式。如果表达式为null或undefined。javascript解释器将会跳过循环并执行后续的代码。如果表达式等于一个原始值，这个原始值将会转换为与之对应的包装对象(wrapper object)。否则，expression本身已经是对象了。javascript会依次枚举对象的属性来执行循环。然而，在每次循环前，javascript都会先计算variable表达式的值，并将属性名(一个字符串)赋值给它。

2. 对象

javascript 中的对象(物体)，和其它编程语言中的对象一样，一个对象可以是一个单独的拥有属性和类型的实体。可以比照现实生活中的对象(物体)来理解它，拿它和一个杯子做下类比。一个杯子是一个对象(物体)，有颜色，图案，重量等属性。对象的属性。Javascript在调用方法和属性如下：

  • objectName.method
  • objectName.propertyName

javascript提供了17个内置对象，如Array对象、Date对象、正则表达式对象、string对象、Global对象。

3. 事件

每个对象可以识别和相应某些系行为，这些操作行为称之为事件，事件是可以被 JavaScript 侦测到的行为， 常用的事件有click，dbclick,load,unload,change等。为了要使用这些事件，就需要在事件中使用这些处理程序，它的使用方法为制定HTML代码插入事件处理程序： on 事件名=””。引号内可以是任何javascript语句，方法或者函数等等，所谓的事件处理程序，指的是事件被激活的时候，要执行javascript程序代码。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

A. onload 和 onUnload

当用户进入或离开页面时就会触发 onload 和 onUnload 事件。onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼："Welcome John Doe!"。

B. onFocus, onBlur 和 onChange

onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。

下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。

<input type="text" size="30" id="email" onchange="checkEmail()">

C. onSubmit

onSubmit 用于在提交表单之前验证所有的表单域。

下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

D. onMouseOver 和 onMouseOut

onMouseOver 和 onMouseOut 用来创建“动态的”按钮。

下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框：

<a href="http://www.w3school.com.cn" onmouseover="alert('An onMouseOver event');return false">
<img src="w3school.gif" width="100" height="30"></a>

五.Python和JavaScript

在自动化测试过程中，经常会处理一些异步请求，这就需要Python能解析js的包了，调用JavaScript代码，或者客户端和服务器数据进行了加密，所以我们需要调用js开发加密或者解密函数来处理数据，这些都在用Selenium进行自动化测试过程中要用到。Python的第三方库execjs 实现了在 Python 环境中调用 Javascript 引擎，执行js代码的功能，它提供了简单易用的api。

首先把实现的Javascript语言开发求1!+2!+3!+4!....+n!的和函数保存到en.js文件中

function factorial( n ){ return ( n <= 1 ) ? 1 : n * factorial( n-1 );
}
function result(n)
{
iTem=0;
for(i=1;i<=n;i++){iTem+=factorial(i);}
return iTem;
}

在python开发代码调用en.js文件中的'result'函数，传入参数执行。

import execjs
#执行本地的js
def get_js():f = open(r"en.js", 'r', encoding='UTF-8')line = f.readline()htmlstr = ''while line:htmlstr = htmlstr + lineline = f.readline()return htmlstrjsstr = get_js()
ctx = execjs.compile(jsstr)
print(ctx.call('result','5'))

javascript createelement_贝程学院：Selenium与 JavaScript相关推荐

  1. 开发浏览器监控网页数据变化_贝程学院：Selenium辅助开发工具Firebug和Firepath

    在Selenium开发脚本利用辅助开发工具,可以节省许多时间,提高开发效率和软件质量,降低开发成本.在selenium开发脚本或进行测试前是必须对页面元素进行定位的,而Firefox提供了两个非常使用 ...

  2. xpath 第一个元素_贝程学院：Selenium与XPath

    一.为什么学习XPath XPath (XML Path Language)最初是用来在 XML 文档中定位 DOM 节点的语言.由于 HTML 也可以算作 XML 的一种实现,所以 Selenium ...

  3. Python|并发编程|爬虫|单线程|多线程|异步I/O|360图片|Selenium及JavaScript|Scrapy框架|BOM 和 DOM 操作简介|语言基础50课：学习（12）

    文章目录 系列目录 原项目地址 第37课:并发编程在爬虫中的应用 单线程版本 多线程版本 异步I/O版本 总结 第38课:抓取网页动态内容 Selenium 介绍 使用Selenium 加载页面 查找 ...

  4. 视频教程-JavaScript从入门到进阶视频课程-JavaScript

    JavaScript从入门到进阶视频课程 南京大学软件工程硕士,全栈开发工程师,全栈讲师. 曾就职于中软国际.擎天科技.华为等公司,擅长Java开发.Web前端.Python爬虫.PHP等领域技术.从 ...

  5. 视频教程-2020全新Javascript基础面试视频前端js教程-JavaScript

    2020全新Javascript基础面试视频前端js教程 7年的开发架构经验,曾就职于国内一线互联网公司,开发工程师,现在是某创业公司技术负责人, 擅长语言有node/java/python,专注于服 ...

  6. 视频教程-Javascript - Es6之Promise精讲系列-JavaScript

    Javascript - Es6之Promise精讲系列 全栈开发工程师,现职于北京一家学院的全栈教学主任. 8年前端开发经验.4年移动端开发经验.4年UI设计经验.3年一线教学经验. 精通Node. ...

  7. JavaScript 第四课 案例研究：JavaScript图片库

    主要内容: 编写一个优秀的标记文件 编写一个JavaScript函数以显示用户想要查看的内容 由标记出发函数调用 使用几个新方法扩展这个JavaScript函数 学习过DOM,我们用JavaScrip ...

  8. javascript编程题_如何开始使用JavaScript进行竞争性编程

    javascript编程题 by Priyabrata Biswas 通过Priyabrata Biswas 如何开始使用JavaScript进行竞争性编程 (How to get started w ...

  9. javascript用户登录_SAP HANA XS的JavaScript安全事项

    公众号:matinal 前言部分 我们都知道web程序都有潜在的安全隐患问题,那么SAP HANA XS的JavaScript也是一样,使用服务器端JavaScript编写应用程序代码,也有潜在的外部 ...

最新文章

  1. 《Java并发编程入门与高并发面试》or 《Java并发编程与高并发解决方案》笔记
  2. VC++ error C2248: “CObject::CObject”: 无法访问 private 成员(在“CObject”类中声明)
  3. com/mysql/jdbc/sqlerror_com.mysql.jdbc.sqlerror
  4. 高仿114la网址导航源码完整最新版
  5. 最近一段时间的手工作品
  6. Python+Android进行TensorFlow开发
  7. yolov3-tiny 训练一个检测器(2)
  8. 准银河字母、当铺密码、摩斯电码详解
  9. 重启tomcat服务器
  10. ps把一张图里面的文字去掉而不改变字后面的背景；把同一个颜色的改为别的颜色
  11. 计算机的主要元器件介绍,计算机基础电子元器件介绍
  12. vim学习笔记-tags用法
  13. 2018年视频云服务市场格局进入整合阶段，阿里云视频云位居市场竞争力领导者的位置
  14. SpaceSniffer 磁盘清理软件 windows
  15. 百度UEditor 图片粘贴上传，实现图文粘贴，图片自动上传
  16. 华为日历怎么显示一月_华为P20使用感受
  17. python10086查询系统_Python数字移动设备取证
  18. 语法错误与语义错误（所有语言通用版）
  19. 计算机专业留学加拿大,留学加拿大计算机专业如何选择院校？
  20. 解决ActiveMQ服务停掉后无限重连问题

热门文章

  1. 系统间通信3：RPC的基本概念
  2. VTK修炼之道58：图形基本操作进阶_点云配准技术（迭代最近点ICP算法）
  3. C# 中的eval ()函数
  4. 【CyberSecurityLearning 71】DC系列之DC-2渗透测试（WordPress）
  5. 在pycharm安装MySQLdb库和pymysql库的区别
  6. 实现 ASP.NET WebForm Client
  7. 使用cordova serve build以及tomcat进行web 调试。
  8. 不带头节点的单链表如何头插（多图易懂）
  9. 80x86描述符总结及解析描述符的小程序
  10. 线索二叉树(基于链表存储树结点)