當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript createelement_贝程学院：Selenium与 JavaScript

發布時間：2025/3/15 javascript 33 豆豆

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

一.為什么學習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

B. 引用外部js

C. 遠程引用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部分最底部，是最好的編程習慣，因為html是從上往下執行的，假設有js文件或者js執行耗時比較久的話，下面的html代碼就無法執行了。所以放置在body代碼塊底部，那么即使js代碼耗時嚴重，也不會影響用戶看到頁面效果，只是js實現特效慢而已。

B. HTML標簽

四.JavaScript語法

下面是簡單的Javascript代碼：

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

A. 頁面直接引用js

B. 引用外部js

C. 遠程引用js

或

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

A. Html中head頭部：

B. HTMLl中body:

C. HTML標簽

四.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中有全局變量和局部變量。全局變量是定義在所有函數體之外，其作用范圍是整個函數；而局部變量是定義在函數體之內，只對其該函數是可見的，而對其它函數則是不可見得。代碼實例：

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!=

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() 函數就會被調用。

C. onSubmit

onSubmit 用于在提交表單之前驗證所有的表單域。

下面是一個使用 onSubmit 事件的例子。當用戶單擊表單中的確認按鈕時，checkForm() 函數就會被調用。假若域的值無效，此次提交就會被取消。checkForm() 函數的返回值是 true 或者 false。如果返回值為true，則提交表單，反之取消提交。

D. onMouseOver 和 onMouseOut

onMouseOver 和 onMouseOut 用來創建“動態的”按鈕。

下面是一個使用 onMouseOver 事件的例子。當 onMouseOver 事件被腳本偵測到時，就會彈出一個警告框：

五.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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python中 s是什么意思_pytho
下一篇： springcloud分布式事务_Spr