Web 自動化之 HTML JavaScript 詳解

文章目錄

- - 一、HTML 常用標簽
  - 二、javascript 腳本
  - - 1、什么是 javascript(js)
    - 2、 js變量和函數
    - 3、js 彈窗處理
    - 4、js 流程控制語句和 switch 結構語句應用

一、HTML 常用標簽

HTML：超文本標記語言
超文本：不僅只包含文字，還有超鏈接、視頻…這些元素
HTML與HTML5(H5)
HTML5=HTML+一些其他特殊標簽比如：canvas 畫圖標簽
HTML結構標簽對：

網頁的標題常用標簽分為：雙標簽+單標簽

<html>
<head>
<title>我的個人頁面</title>
</head>
<body>
<!‐‐段落標簽‐‐>
<p>
<font size="6" color="blue" ><b><i>自我介紹</i></b></font>
</p>
姓名：hc<br/>
專業：計算機軟件<br/>
圖片:<br/><img src="hc2.png"></img><br/>
<a href="https://wwww.baidu.com" target="_black" >查看更多</a>
<!‐‐‐分隔線‐‐‐>
<hr width="100%" size="1" color="red"/>
<!‐‐常用標簽：表格 ‐‐>
<table border="1" width="300px" height="300px">
<!‐‐行標簽‐‐>
<tr>
<!‐‐列標簽‐‐>
<td colspan="2">1</td>
<td rowspan="3">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table><!‐‐常用標簽：表單 數據提交‐‐>
<form action="url地址" method="">
<!‐‐提交的方式：post/get get:url傳遞參數 post通過表單傳參 post方式更加安全‐
‐>
<!‐‐文本框 密碼框 按鈕 復選框 單選框‐‐>
用戶名:<input type="text"></input><br/>
密碼:<input type="password"></input><br/>
<!‐‐單選框‐‐>
性別：<input type="radio" name="xb" >男</input> <input type="radio"
name="xb">女</input><br/>
<!‐‐復選框 ‐‐>
愛好：<input type="checkbox" >學習</input> <input type="checkbox"
>money</input> <input type="checkbox" >小姐姐</input> <br/>
上傳作業:<input type="file" id="f1" >學習</input>
計算機語言:
<select>
<option>java</option>
<option>Python</option>
<option>php</option>
</select> <br/>
文本域：
<textarea cols="25" rows="10"></textarea> <br/>
普通按鈕：
<input type="button" value="打卡學習" ></input><br/>
特殊按鈕（提交按鈕）:
<input type="submit" value="提交"></input><br/>
特殊按鈕（重置按鈕）:
<input type="reset" value="重置"></input><br/>
</form>
</body>
</html>

前端頁面布局：div table frame 框架
基于frame來進行頁面設計：

<html>
<frameset rows="30%,*">
<frame src="mypage.html" ></frame>
<frameset cols="50%,50%">
<frame src="https://taobao.com"></frame>
<frame src="https://www.baidu.com/"></frame>
</frameset>
</frameset>
</html>

二、javascript 腳本

用戶交互：必須懂明白javascript腳本

1、什么是 javascript(js)

javascript:前端腳本語言，實現用戶的交互
網頁端執行js腳本兩種方式：

內嵌式
外部導入

2、 js變量和函數

<html><head><title>網頁的標題</title><script  language="javascript">document.write("執行外部js腳本"+"<br/>")<!--變量-->var a=10;var name="xingyao";var c= true;document.write(a+"<br/>");document.write(name+"<br/>");document.write(c+"<br/>");<!--javascript函數-->function zt1(){<!--函數體語句-->var value1="正在學習<<Python基礎>>";document.getElementById("result").value=value1;}function zt2(){<!--函數體語句-->var value2="正在學習<<接口自動化測試>>";document.getElementById("result").value=value2;}function zt3(){<!--函數體語句-->var value3="正在學習<<web自動化測試>>";document.getElementById("result").value=value3;}function zt8(){<!--函數體語句-->document.getElementById("result").value=name;}function abc(){alert("操作成功！！");}function con(){var res=confirm("請問需要刪除此商品？");if (res==true){alert("刪除");}}function pro(){var res=prompt("請輸入需要刪除的商品的編號");alert(res);}function jiesuan(){var paymoney;<!--int類型轉化  parseInt-->var price=parseInt(document.getElementById('danjian').value);var count=parseInt(document.getElementById('shuliang').value);var paytype=document.getElementById('fangshi').value;<!-- isNaN 表示不是一個數字   !isNaN()判斷參數是數字-->if (!isNaN(price) && !isNaN(count)){<!--計算支付金額--><!--選擇不同的支付方式，計算方式不一樣-->switch(paytype){case "9":case "8":case "7":case "6":paymoney=price*count*parseInt(paytype)/10;break;default:alert("請選擇支付方式！！！");	}<!--計算支付金額顯示在結算金額輸入框 -->document.getElementById('jsje').value=paymoney+"元";}else{alert("Q幣單價及Q幣的數量必須是數字！！！");}}</script></head><body><hr color="red" size="2" width="100%"><form><input type="button" value="專題一" onclick="zt1()"></input><br/><input type="button" value="專題二"  onclick="zt2()" ></input><br/><input type="button" value="專題三" onclick="zt3()"></input><br/>.....<br/><input type="button" value="專題八" onclick="zt8()"></input><br/>當前學習階段:<input type="text"  id="result" value="Python基礎"></input><br/><hr color="red" size="2" width="100%"><input type="button"  value="alert彈窗" onclick="abc()"></input><br/><input type="button"  value="confirm彈窗" onclick="con()"></input><br/><input type="button"  value="prompt彈窗" onclick="pro()"></input><br/></form><hr color="red" size="2" width="100%"><form>支付方式:<select id="fangshi"><option value="9">現金支付(9折)</option><option value="8">支付寶支付（8折）</option><option value="7"> 微信支付（7折）</option><option value="6">京東支付（6折）</option></select><br/>Q幣單價：<input type="text" id="danjian"></input><br/>購買數量：<input type="text" id="shuliang"></input><input type="button"  value="結算"  onclick="jiesuan()"></input><br/>結算金額：<input type="text" id="jsje" ></input></form></body>
</html>

3、js 彈窗處理

網頁的彈窗有三種

提示彈窗
包含確定和取消的彈窗
包含確定和取消的彈窗+用戶輸入

4、js 流程控制語句和 switch 結構語句應用

if/else 語句進行控制
if(條件){
}
else{
}
if/else 嵌套
if(條件){
if(條件){
}
else{
}
}
else{
if(條件){
}
else{
}
}
switch語句
switch(變量){
case 常量1：
js代碼；
break；
case 常量2:
js代碼；
break；
case 常量3:
js代碼；
break；
…
default:
js代碼
break；
}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/80425.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/80425.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/80425.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！