Javascript是通過客戶端瀏覽器進行解析，瀏覽器內(nèi)置了負責解析Javascript的解析器，由于每一種瀏覽器的解析器不一樣，所以可能會出現(xiàn)相同的JS代碼在不同的瀏覽器效果不一樣，故日常測試中一定需要考慮兼容性測試。
Javascript的作用是提供頁面交互效果，通過對頁面上的元素進行操控從而達到頁面元素按照預期進行顯示。本文以編寫測試小工具用到的js模塊來進行說明。
Javascript模塊
1.獲取html前端數(shù)據(jù)
1.輸入框：var input=$("#input").val()? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//獲取輸入框輸入的內(nèi)容
2.單選框：var radio=$('input[name="form-project-manager[]"]:checked').val() ?//選中單選框后對應的實際是value值
3.下拉框(單選)：var?option?=?$('#drop').val()
4.表格中某行某列的值：var txt=document.getElementById ("table");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?txt.rows[i].cells[j].innerHTML;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//獲取table中第i行第j列的值
2.前后端數(shù)據(jù)交互
1.前端html按鈕元素處綁定onclick事件，如下面所示綁定了POST()
<button?id="POST"?class="btn btn-primary btn-block"?type="button"?onclick="POST()">Submit</button>
2.點擊按鈕后觸發(fā)Javascript編寫post()函數(shù)
function POST(){
post_data_string=JSON.stringify(value())? ? //獲取到的前端數(shù)據(jù)
$.post( ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??//發(fā)起ajax的post請求
"/unlock/post", ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 請求的url，此URL為發(fā)起POST請求時的URL地址，即URL配置里面的地址
post_data_string, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 發(fā)送的數(shù)據(jù)
function(data_post_code){ ? ? ? ? ? ? ? ? ? ? ? ?// 回調函數(shù)，data_post_code為后端處理后的結果
code=data_post_code.code
if(code==0){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//根據(jù)code返回的結果返回給前端的彈窗顯示結果頁面
$("#modal-submit").modal('show')
$('.container1').text(data_post_code.message)
$('.modal-title').text("成功")}
else{
$("#modal-submit").modal('show')
$('.container1').text(data_post_code.message)
$('.modal-title').text("失敗")}});};
3.前端html彈框元素透出后端結果，至此完成前后端交互整個過程
3.事件概念的理解
事件是javaScript和DOM之間交互的橋梁，遵循你若觸發(fā)，我便執(zhí)行，即事件發(fā)生，調用它的處理函數(shù)執(zhí)行相應的JavaScript代碼給出響應。
本次小工具重點用到了onclick事件，onclick事件：單擊元素時執(zhí)行功能，具體的實現(xiàn)方式可見前后端數(shù)據(jù)交互中的說明
4.this的作用域【待補充】
5.通過radio控制div里的內(nèi)容顯示或隱藏，無法對按鈕button生效
1)html中對單選框元素綁定divClick()事件
<input type="radio" id="options Radios" name="options Radiosinline" value="1" class="mr-1" checked onclick="divClick(); "style="margin-left:30px;"><span class="mr-6 text-muted">單選框1</span>
2)根據(jù)綁定的divClick()事件，Javascript中根據(jù)單選框的值來對div里的內(nèi)容進行顯示或隱藏
function divClick(){
var show=$('input[name="optionsRadiosinline"]:checked').val()
if(show=="1"){
document.getElementById("div").style.display="block"; ? ? //顯示
}
else{
document.getElementById("div").style.display="none"; ? ? //隱藏
}
}
6.實時監(jiān)聽輸入框非空
$("#input").on("input",function(){
if ($('#input').val()==""){
$(this).addClass("is-invalid");
}
elseif($('#input').val()!==""){
$(this).removeClass("is-invalid");
}});
實戰(zhàn)中一些收獲點，持續(xù)補充
1.盡量復用同一個元素，比如出現(xiàn)在不同頁面下拉框元素，但由于輸出效果一致，無需在html中寫兩個下拉框元素，只需寫一個即可
2.同一個按鈕，期望由于單選框選擇的差異，可在前端輸出相應的文案，可按照如下的方式完成：
var show=$('input[name="optionsRadiosinline"]:checked').val()
if(show=="1"){
$('#POST').text("確認添加")
}
else{
$('#POST').text("提交申請")
}
3.強制往輸入框內(nèi)寫入期望的值
document.getElementById("input").value=message[0]
4.下拉框選項需通過后端代碼傳回的值進行顯示
// 獲取后端的值
code=data_post_code.code
message=data_post_code.message
data=data_post_code.data
var options="";
for(vari=0,len=data.length;i<len;i++){
var parkdata=data[i]; //拼接成多個<option><option/>
if(i==0){
options='<option value="'+parkdata[0]+'" selected>'+parkdata[0]+'</option>'
}
else{
options+='<option value="'+parkdata[0]+'">'+parkdata[0]+'</option>'
}
}
$("#drop").append(options);//根據(jù)selectpicker根據(jù)你自己的ID寫)填充到select標簽中
$('#drop').selectpicker('refresh');//必須有的，強制刷新，不加會導致數(shù)據(jù)在前端無法顯示$('#drop').selectpicker('render');//render方法
5.一個按鈕上需要綁定多個函數(shù)，采用分號即可
<a>?<button?class="btn btn-primary btn-block"?type="button"?onclick="P1();P2()">查詢</button></a>
6.table元素中的值需通過后端代碼傳回的值進行顯示【待補充】
