當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript createelement_贝程学院：Selenium与 JavaScript

發(fā)布時(shí)間：2025/3/15 javascript 16 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript createelement_贝程学院：Selenium与 JavaScript 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一.為什么學(xué)習(xí)JavaScript

進(jìn)行web自動(dòng)化測試也好還是移動(dòng)端自動(dòng)化測試也好，必須要對(duì)系統(tǒng)實(shí)現(xiàn)用到的技術(shù)有一定的了解，而JavaScript作為世界上最流行的腳本語言，在電腦、手機(jī)、平板上瀏覽的所有的網(wǎng)頁，以及無數(shù)基于HTML5的手機(jī)App，交互邏輯的實(shí)現(xiàn)上都是由JavaScript驅(qū)動(dòng)的，在進(jìn)行自動(dòng)化測試的過程中需要讀懂JavaScript代碼的調(diào)用關(guān)系和實(shí)現(xiàn)功能，才能利用selenium采用相關(guān)的技術(shù)實(shí)現(xiàn)自動(dòng)化腳本。并且在ajax技術(shù)中頁面調(diào)用js代碼，而selenium是無法通過定位元素操作元素完成相應(yīng)的動(dòng)作，這就需要在Selenium Webdriver中調(diào)用js代碼，這都要求你對(duì)js要有一定的了解。

二.什么是JavaScript

19世紀(jì)，當(dāng)時(shí)的網(wǎng)景公司正憑借其Navigator瀏覽器成為Web時(shí)代開啟時(shí)最著名的第一代互聯(lián)網(wǎng)公司。由于網(wǎng)景公司希望能在靜態(tài)HTML頁面上添加一些動(dòng)態(tài)效果，于是一位叫布蘭登·艾克（Brendan Eich）的哥們?cè)趦芍苤畠?nèi)設(shè)計(jì)出了JavaScript語言。為什么起名叫JavaScript？原因是當(dāng)時(shí)Java語言非常紅火，所以網(wǎng)景公司希望借Java的名氣來推廣，但事實(shí)上JavaScript除了語法上有點(diǎn)像Java，其他部分基本上沒關(guān)系。因?yàn)榫W(wǎng)景開發(fā)了JavaScript，一年后微軟又模仿JavaScript開發(fā)了JScript，為了讓JavaScript成為全球標(biāo)準(zhǔn)，幾個(gè)公司聯(lián)合ECMA（European Computer Manufacturers Association）組織定制了JavaScript語言的標(biāo)準(zhǔn)，被稱為ECMAScript標(biāo)準(zhǔn)。所以ECMAScript是一種語言標(biāo)準(zhǔn)，而JavaScript是網(wǎng)景公司對(duì)ECMAScript標(biāo)準(zhǔn)的一種實(shí)現(xiàn)。JavaScript的標(biāo)準(zhǔn)——ECMAScript在不斷發(fā)展，最新版ECMAScript 6標(biāo)準(zhǔn)（簡稱ES6）已經(jīng)在2015年6月正式發(fā)布了，它是JavaScript語言的下一代標(biāo)準(zhǔn)，它的目標(biāo)是使得JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開發(fā)語言。

JavaScript ( JS ) 是基于對(duì)象和事件驅(qū)動(dòng)的安全性的腳本語言，是輕量級(jí)解釋或JIT編譯型的編程語言。JavaScript ( JS )為 HTML 設(shè)計(jì)師提供了一種編程工具,HTML 創(chuàng)作者往往都不是程序員，但是 JavaScript 卻是一種只擁有極其簡單的語法的腳本語言！幾乎每個(gè)人都有能力將短小的代碼片斷放入他們的 HTML 頁面當(dāng)中。JavaScript 可以將動(dòng)態(tài)的文本放入 HTML 頁面,類似于這樣的一段 JavaScript 聲明可以將一段可變的文本放入 HTML 頁面：document.write("<h1>" + name + "</h1>").JavaScript 可以對(duì)事件作出響應(yīng),可以將 JavaScript 設(shè)置為當(dāng)某事件發(fā)生時(shí)才會(huì)被執(zhí)行，例如頁面載入完成或者當(dāng)用戶點(diǎn)擊某個(gè) HTML 元素時(shí).JavaScript 可以讀寫 HTML 元素,改變 HTML 元素的內(nèi)容。javascript在數(shù)據(jù)被提交到服務(wù)器之前，可被用來驗(yàn)證這些數(shù)據(jù)。JavaScript 可被用來檢測訪問者的瀏覽器,并根據(jù)所檢測到的瀏覽器，為這個(gè)瀏覽器載入相應(yīng)的頁面。JavaScript 可被用來創(chuàng)建 cookies,存儲(chǔ)和取回位于訪問者的計(jì)算機(jī)中的信息。javascript還可以實(shí)現(xiàn)ajax,還可以做后臺(tái)，比如node.js等等，還有桌面引擎node-webkit可以將JavaScript渲染成桌面應(yīng)用，在unity3d中使用JavaScript寫游戲（unity3d使用的JavaScript的語法，特性等等）。

三.初識(shí)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>

技術(shù)解釋：JavaScript是由<script type="text/javascript">..<javascript>代碼說明，javascript腳本在<script type="text/javascript">..<javascript>之間，alert_hello()功能是彈出對(duì)話框，內(nèi)容是"歡迎加入javascript"每行代碼結(jié)束之后加上分號(hào)。

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

A. 頁面直接引用js

B. 引用外部js

C. 遠(yuǎn)程引用js

或

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部分最底部，是最好的編程習(xí)慣，因?yàn)閔tml是從上往下執(zhí)行的，假設(shè)有js文件或者js執(zhí)行耗時(shí)比較久的話，下面的html代碼就無法執(zhí)行了。所以放置在body代碼塊底部，那么即使js代碼耗時(shí)嚴(yán)重，也不會(huì)影響用戶看到頁面效果，只是js實(shí)現(xiàn)特效慢而已。

B. HTML標(biāo)簽

四.JavaScript語法

下面是簡單的Javascript代碼：

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

A. 頁面直接引用js

B. 引用外部js

C. 遠(yuǎn)程引用js

或

2. JavaScript書寫位置，一般有三種：

A. Html中head頭部：

B. HTMLl中body:

C. HTML標(biāo)簽

四.JavaScript語法

1. 常量和變量

A. 常量：

JavaScript常量通常稱為字面常量，它是不能改變的數(shù)據(jù)，在JavaScript中，常量有以下6種基本類型：

1) 整型常量：可以使用十六進(jìn)制、八進(jìn)制和十進(jìn)制表示其值。如正整數(shù)，如1，33，55，負(fù)整數(shù)，-22，-235
2) 浮點(diǎn)型常量：浮點(diǎn)型常量又稱為實(shí)數(shù)常量，是由整數(shù)部分加小數(shù)部分表示，如2.34，235.89。可以使用科學(xué)或標(biāo)準(zhǔn)方法表示，如3e8,9e5等。
3) 布爾常量：又稱為邏輯值，只有兩種狀態(tài)：True或False。它主要用來說明或代表一種狀態(tài)或標(biāo)志。
4) 字符型常量：使用單引號(hào)(')或雙引號(hào)(")括起來的一個(gè)或幾個(gè)字符。如"I am a student","3245","ewrt234234"等。
5) 空值：Null，表示什么也沒有。如試圖引用沒有定義的變量，則返回一個(gè)Null值。
6) 特殊字符：JavaScript中有以反斜杠(/)開頭的不可顯示的特殊字符。通常稱為控制字符。

B. 變量：

變量是計(jì)算機(jī)內(nèi)存中的某個(gè)單元，為了方便計(jì)算機(jī)處理數(shù)據(jù)，應(yīng)先把數(shù)據(jù)存入到內(nèi)存中去，根據(jù)保存的變量類型，聲明屬于這種類型的變量，計(jì)算機(jī)會(huì)根據(jù)這種類型分配相應(yīng)的內(nèi)存單元，并將該內(nèi)存單元與聲明的變量對(duì)應(yīng)上。通過該變量就可以把數(shù)據(jù)保存到內(nèi)存或者從內(nèi)存中讀取出來。

1) 變量聲明

這是一個(gè)非常容易出錯(cuò)的點(diǎn)，局部變量必須一個(gè) var 開頭，如果未使用var，則默認(rèn)表示聲明的是全局變量（跟python的使用習(xí)慣不太相同），聲明變量的格式：var myVariable;。

2) 變量命名規(guī)范

注意：變量名區(qū)分大小寫，允許包含字母、數(shù)字、美元符號(hào)($)和下劃線，但第一個(gè)字符不允許是數(shù)字，不允許包含空格和其他標(biāo)點(diǎn)符號(hào)；變量命名長度應(yīng)該盡可能的短，并抓住要點(diǎn)，盡量在變量名中體現(xiàn)出值的類型；盡量避免使用沒有意義的命名；禁止使用JavaScript關(guān)鍵詞、保留字全名

3) 變量的作用域：

在JavaScript中有全局變量和局部變量。全局變量是定義在所有函數(shù)體之外，其作用范圍是整個(gè)函數(shù)；而局部變量是定義在函數(shù)體之內(nèi)，只對(duì)其該函數(shù)是可見的，而對(duì)其它函數(shù)則是不可見得。代碼實(shí)例：

2. 表達(dá)式和運(yùn)算符

A. 表達(dá)式

表達(dá)式是使用各種運(yùn)算符把兩個(gè)數(shù)據(jù)或者多個(gè)數(shù)據(jù)結(jié)合起來，生成一個(gè)新的值。如2+4=6，5%7=35，19<9=false,表達(dá)式是以運(yùn)算符為基礎(chǔ)的，而運(yùn)算符有很多種。

3. 函數(shù)

函數(shù)對(duì)任何一門語言來說都是核心的概念。在JavaScript里，函數(shù)即對(duì)象，程序可以隨意操控它們。函數(shù)可以嵌套在其他函數(shù)中定義，這樣它們就可以訪問它們被定義時(shí)所處的作用域中的任何變量。

A. 函數(shù)定義

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

funcname是要聲明的函數(shù)名稱的標(biāo)識(shí)符。函數(shù)名之后的圓括號(hào)中是參數(shù)列表，參數(shù)之間使用逗號(hào)分隔。當(dāng)調(diào)用函數(shù)時(shí)，這些標(biāo)識(shí)符則指代傳入函數(shù)的實(shí)參。function語句里的花括號(hào)是必需的，這和while循環(huán)和其他一些語句所使用的語句塊是不同的，即使函數(shù)體內(nèi)只包含一條語句，仍然必須使用花括號(hào)將其括起來。

實(shí)例：1!+2!+3!+4!+n!=

1. 控制語句

A. 條件語句：通過判斷表達(dá)式的值來決定執(zhí)行還是跳過某些語句，包括if語句和switch語句。

1) If語句語法：

if(expression)statement1 elsestatement2

if語句條件的求值結(jié)果永遠(yuǎn)是一個(gè)布爾值，即只能是true或false。花括號(hào)中的語句，只有在給定條件的求值結(jié)果是true的情況下才會(huì)執(zhí)行。

2) switch語句語法：

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

switch語句執(zhí)行一個(gè)多路分支，它會(huì)根據(jù)算expression的值，根據(jù)條件判斷，查找case子句的表達(dá)式是否和expression的值相同。如果找到匹配的case，那么將會(huì)執(zhí)行這個(gè)case對(duì)應(yīng)的代碼塊。如果找不到匹配的case，那么將會(huì)執(zhí)行default標(biāo)簽中的代碼塊。每一個(gè)case語句塊的結(jié)尾處都使用了關(guān)鍵字break。break語句可以使解釋器跳出switch語句或循環(huán)語句。

B. 循環(huán)語句

JavaScript有4種循環(huán)語句：while、do/while、for、for/in，它們的工作原理一樣：只要給定條件仍能得到滿足，包含在循環(huán)語句里的代碼就將重復(fù)地執(zhí)行下去。一旦給定條件的求值結(jié)果不再是true，循環(huán)也就到此為止。其中最常用的循環(huán)就是對(duì)數(shù)組元素的遍歷

（1） While語法

while(expression){statement }

while語句屬于前測試循環(huán)語句，也就是說，在循環(huán)體內(nèi)的代碼被執(zhí)行之前，就會(huì)對(duì)出口條件求值，當(dāng)表達(dá)式expression是真值時(shí)則循環(huán)執(zhí)行statement，直到expression的值為假值為止；如果是假值，那么程序?qū)⑻^循環(huán)。

（2） do while語法：

do{statement }while(expression);

do while語句是后測試循環(huán)，即退出條件在執(zhí)行循環(huán)內(nèi)部的代碼之后計(jì)算。這意味著在計(jì)算表達(dá)式之前，至少會(huì)執(zhí)行循環(huán)主體一次。

（3） for語法：

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

for語句提供了一種比while語句更加方便的循環(huán)控制結(jié)構(gòu)，用for循環(huán)來重復(fù)執(zhí)行一些代碼的好處是循環(huán)控制結(jié)構(gòu)更加清晰。

（4） for in語法：

for(variable in object){statement }

variable通常是一個(gè)變量名，也可以是一個(gè)可以產(chǎn)生左值的表達(dá)式或一個(gè)通過var語句聲明的變量，總之必須是一個(gè)適用于賦值表達(dá)式左側(cè)的值。object是一個(gè)表達(dá)式，這個(gè)表達(dá)式的計(jì)算結(jié)果是一個(gè)對(duì)象。同樣，statement是一個(gè)語句或語句塊，它構(gòu)成了循環(huán)的主體。for/in循環(huán)可以用來更方便地遍歷對(duì)象屬性成員。　　在執(zhí)行for/in語句的過程中，javascript解釋器首先計(jì)算object表達(dá)式。如果表達(dá)式為null或undefined。javascript解釋器將會(huì)跳過循環(huán)并執(zhí)行后續(xù)的代碼。如果表達(dá)式等于一個(gè)原始值，這個(gè)原始值將會(huì)轉(zhuǎn)換為與之對(duì)應(yīng)的包裝對(duì)象(wrapper object)。否則，expression本身已經(jīng)是對(duì)象了。javascript會(huì)依次枚舉對(duì)象的屬性來執(zhí)行循環(huán)。然而，在每次循環(huán)前，javascript都會(huì)先計(jì)算variable表達(dá)式的值，并將屬性名(一個(gè)字符串)賦值給它。

2. 對(duì)象

javascript 中的對(duì)象(物體)，和其它編程語言中的對(duì)象一樣，一個(gè)對(duì)象可以是一個(gè)單獨(dú)的擁有屬性和類型的實(shí)體。可以比照現(xiàn)實(shí)生活中的對(duì)象(物體)來理解它，拿它和一個(gè)杯子做下類比。一個(gè)杯子是一個(gè)對(duì)象(物體)，有顏色，圖案，重量等屬性。對(duì)象的屬性。Javascript在調(diào)用方法和屬性如下：

objectName.method
objectName.propertyName

javascript提供了17個(gè)內(nèi)置對(duì)象，如Array對(duì)象、Date對(duì)象、正則表達(dá)式對(duì)象、string對(duì)象、Global對(duì)象。

3. 事件

每個(gè)對(duì)象可以識(shí)別和相應(yīng)某些系行為，這些操作行為稱之為事件，事件是可以被 JavaScript 偵測到的行為，常用的事件有click，dbclick,load,unload,change等。為了要使用這些事件，就需要在事件中使用這些處理程序，它的使用方法為制定HTML代碼插入事件處理程序： on 事件名=””。引號(hào)內(nèi)可以是任何javascript語句，方法或者函數(shù)等等，所謂的事件處理程序，指的是事件被激活的時(shí)候，要執(zhí)行javascript程序代碼。網(wǎng)頁中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)的事件。比方說，用戶點(diǎn)擊某按鈕時(shí)產(chǎn)生一個(gè) onClick 事件來觸發(fā)某個(gè)函數(shù)。事件在 HTML 頁面中定義。

A. onload 和 onUnload

當(dāng)用戶進(jìn)入或離開頁面時(shí)就會(huì)觸發(fā) onload 和 onUnload 事件。onload 事件常用來檢測訪問者的瀏覽器類型和版本，然后根據(jù)這些信息載入特定版本的網(wǎng)頁。onload 和 onUnload 事件也常被用來處理用戶進(jìn)入或離開頁面時(shí)所建立的 cookies。例如，當(dāng)某用戶第一次進(jìn)入頁面時(shí)，你可以使用消息框來詢問用戶的姓名。姓名會(huì)保存在 cookie 中。當(dāng)用戶再次進(jìn)入這個(gè)頁面時(shí)，你可以使用另一個(gè)消息框來和這個(gè)用戶打招呼："Welcome John Doe!"。

B. onFocus, onBlur 和 onChange

onFocus、onBlur 和 onChange 事件通常相互配合用來驗(yàn)證表單。

下面是一個(gè)使用 onChange 事件的例子。用戶一旦改變了域的內(nèi)容，checkEmail() 函數(shù)就會(huì)被調(diào)用。

C. onSubmit

onSubmit 用于在提交表單之前驗(yàn)證所有的表單域。

下面是一個(gè)使用 onSubmit 事件的例子。當(dāng)用戶單擊表單中的確認(rèn)按鈕時(shí)，checkForm() 函數(shù)就會(huì)被調(diào)用。假若域的值無效，此次提交就會(huì)被取消。checkForm() 函數(shù)的返回值是 true 或者 false。如果返回值為true，則提交表單，反之取消提交。

D. onMouseOver 和 onMouseOut

onMouseOver 和 onMouseOut 用來創(chuàng)建“動(dòng)態(tài)的”按鈕。

下面是一個(gè)使用 onMouseOver 事件的例子。當(dāng) onMouseOver 事件被腳本偵測到時(shí)，就會(huì)彈出一個(gè)警告框：

五.Python和JavaScript

在自動(dòng)化測試過程中，經(jīng)常會(huì)處理一些異步請(qǐng)求，這就需要Python能解析js的包了，調(diào)用JavaScript代碼，或者客戶端和服務(wù)器數(shù)據(jù)進(jìn)行了加密，所以我們需要調(diào)用js開發(fā)加密或者解密函數(shù)來處理數(shù)據(jù)，這些都在用Selenium進(jìn)行自動(dòng)化測試過程中要用到。Python的第三方庫execjs 實(shí)現(xiàn)了在 Python 環(huán)境中調(diào)用 Javascript 引擎，執(zhí)行js代碼的功能，它提供了簡單易用的api。

首先把實(shí)現(xiàn)的Javascript語言開發(fā)求1!+2!+3!+4!....+n!的和函數(shù)保存到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開發(fā)代碼調(diào)用en.js文件中的'result'函數(shù)，傳入?yún)?shù)執(zhí)行。

import execjs #執(zhí)行本地的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'))

總結(jié)

以上是生活随笔為你收集整理的javascript createelement_贝程学院：Selenium与 JavaScript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： python中 s是什么意思_pytho
下一篇： android textview 文字居