web前端（html-js）
阿新 • • 發佈：2020-09-16
HTML
第1章 Html簡介與基本標籤
由標籤組成的叫做標記語言。
超文字標記語言
HTML（網頁結構）、CSS（網頁樣式）、JavaScript（網頁行為）。
Html學習內容：
- 表單標籤
- 表格及框架
- 基本概念和基本標籤
第2章 表格及框架
標籤：tr 、 th 、td 、table
特徵：
- 沒有外觀
- 大小隨內容而變
-
<table border="1px" align="center"> <thead style="background-color: blue"> <tr align="center"> <th colspan="1">第一行第一列</th> <th>第一行第二列</th> </tr> </thead> <tbody style="background-color: yellow;"> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </tbody> <tfoot style="background-color: green;"> <tr> <td>第三行第一列</td> <td>第三行第二列</td> </tr> </tfoot> </table>- 跨行 colspan
- 跨列 rowspan
<tr> <td>手機充值</td> <td colspan="3">辦公裝置、手機、耗材</td> </tr> <tr> <td rowspan="3">各種卡的彙總</td> <td>鉛筆</td> <td>毛筆</td> <td>鋼筆</td> </tr> <tr> <td>列印</td> <td>燒錄</td> <td>墨盒</td> </tr> <tr> <td>彩筆</td> <td>粉筆</td> <td>記號筆</td> </tr>第3章 表單
屬性：name 、 action （URL） 、method（post、get 預設）
有外觀，沒有固定的外觀（因為input中的type屬性）
標籤：from 向伺服器傳送資訊，實現互動功能。
- 子標記：input
- （預設為文字框，10個通用屬性）
- 屬性： disabled 設定標記不可用
- 子標記：input
文字欄位&密碼域：
<td>使用者名稱：</td> <td><input type="text" name="username"></td> <td>密碼: </td> <td><input type="password" name="pwd"></td>單選按鈕：
<td> <!--加一個name屬性值設定唯一值！ checked預設選項--> <input type="radio" name="sex" checked value="0">男<input type="radio" name="sex" value="1">女 </td>複選框
<input type="checkbox" name="hobby" value="book">讀書 <input type="checkbox" name="hobby" value="paobu">跑步 <input type="checkbox" name="hobby" value="java">程式碼檔案
<td>檔案: </td> <td><input type="file"> </td>重置&提交&普通按鈕：
<td colspan="2" align="center"> <input type="reset" value="重置"> <input type="submit" value="提交"> <input type="button" value="確定" onclick="alert('你好！')"></td>圖片：
<td><input type="image" src="img/01.png" width="50px" height="50px"> </td>隱藏域：
<td>隱藏域: </td> <!-- 一般為資料庫的主鍵 --> <td><input type="hidden" value="023"> </td>下拉框：
<td>省份:</td> <td> <select size="1" onchange="alert('選項發生改變了')"> <option value="">山東</option> <option value="">山西</option> <option value="" selected>廣東</option> <option value="">廣西</option> <option value="">湖南</option> </select>省 </td>內容框：
<td colspan="2"> <textarea name="" id="" cols="30" rows="10"></textarea> </td>Javascript
- 直接嵌入Html文件中，在客戶端執行的解釋性指令碼語言
- 基於物件和事件驅動並具有安全效能的指令碼語言
javascript與java沒有聯絡
加法計算器
注意：
<script src="js/test.js"></script> <!-- script標籤 一旦連結了外部檔案，script標籤之前的js程式碼就不會再執行 -->js用到表單時，要將js程式碼放到body後面，（先載入表單程式碼，在查詢所需內容）。
2.運算子
- 一元運算子（++、--），二元運算子（+、-、*、/），三元運算子（）
- 邏輯運算子（與--&&、或--||、非--！）
//一元運算子，一個運算元 var a = 0; var b = a++; //先賦值後再自加 document.write("a="+a+",b="+b); // a=1,b=0; //三元運算子，三個運算元 ?: var num1=10 , num2=20; document.write("最大數:"+（num1>num2）?num1:num2);3.彈窗（alert、confirm、prompt）
function CloseWin(){ if(confirm("你確定要關閉視窗嗎？")){ window.close(); } } function GetColor(){ var color = prompt("輸入你喜歡的顏色","blue"); alert("您喜歡的顏色為："+color); }4.條件語句
- if 語句、if...else 語句 、switch 語句
<script> function add(){ var a = Number(document.MyForm.num1.value); var b = Number(document.MyForm.num2.value); //獲取 var op = document.MyForm.op.value; var c = 0 ; switch(op){ case "+": c = a+b; break; case "-": c = a-b; break; case "*": c = a*b; break; case "/": c = a/b; break; case "%": c = a%b; break; case ">": c = a>b; break; case "<": c = a<b; break; default: alert("符號選擇有誤"); } document.MyForm.num.value=c; } </script> </head> <body> <form action="" name="MyForm"> <input type="text" name="num1"> <select name="op"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> <option value="%">%</option> <option value=""></option> <option value=""></option> </select> <input type="text" name="num2"> <input type="text" name="num"> <br> <input type="button" onclick="add()" value="計算結果"> </form> </body>5.迴圈（for、while、do while）
- 四大部分-----初始化，條件，執行，迭代（缺一不可）
<script> var sum=0; for(var j=1;j<=100;j++){ sum = sum + j; } document.write("列印1+2+3+4+5+6+...+100的結果："+sum+"<br>"); document.write("<hr>"); document.write("列印直角三角形<br>"); /* 1 12 123 1234 12345 123456 */ for(var i=1;i<11;i++){ for(var j=1;j<i;j++){ document.write(j); } document.write("<br>"); } </script>6.Javascript函式
- 內建函式
- eval函式：用於計算字串表示式的值
- isNaN函式：用於驗證引數是否為NaN（非數字）（true為字串）
function fn1(){ var value = prompt("寫一個表示式，我給你計算","1+1"); var num = eval(value); alert(value+"="+num); } function fn2(){ var value = prompt("寫一個字元，我判斷是否為數字","0"); if(isNaN(value)){ alert(value+"不是一個數字！"); }else{ alert(value+"是一個數字！"); } }7.Javascript物件簡介
String物件
- 使用var語句（棧裡開闢空間）
- var newstr = "";
- 建立String物件（動態宣告（堆裡面開闢空間））
- var newstr = new String(""); new後必有建構函式
- 使用var語句（棧裡開闢空間）
屬性和方法
- indexOf() 從左向右找（前--->後）
- lastindexOf() 從右向左找 （後--->前）
- chartAt(4) 獲取相應下標的字元
- Math.random() 隨機小數
- Math.round(2.8) 四捨五入
-
<script> document.write("兩秒鐘重新整理一次頁面，圖片隨機變化<br>"); //獲取一個1~4的隨機整數 var i = Math.round(Math.random()*3+1); document.write("<img src='../img/0"+i+".png' width='300px' height='300px'>"); </script>
//宣告一個String物件 var str = "abcdefcg"; document.write("字串的長度："+str.length+"<br>"); document.write("字串的小字型："+str.small()+"<br>"); document.write("字串的正常字型："+str+"<br>"); document.write("字串的大字型："+str.big()+"<br>"); //如果能找到就返回相應的下標，反之，返回-1. 注意：下標從0開始； indexOf()從左往右找。 document.write("獲取“c”首次出現的位置："+str.indexOf("c",0)+"<br>"); // document.write("獲取“c”末次出現的位置："+str.lastIndexOf("c",str.length-1)+"<br>"); document.write("獲取相應下標的字元："+str.charAt(2)+"<br>"); document.write("獲取PI的值："+Math.PI+"<br>"); document.write("獲取常量E的值："+Math.E+"<br>"); document.write("獲取ln 10的值："+Math.LN10+"<br>"); document.write("獲取-8的ju絕對值："+Math.abs(-8)+"<br>"); document.write("獲取兩個數的最大值："+Math.max(8,12)+"<br>"); document.write("獲取0~1的隨機小數："+Math.random()+"<br>"); document.write("獲取四捨五入的值："+Math.round(2.8)+"<br>"); document.write("獲取2~7的隨機數："+Math.round(Math.random()*5+2)+"<br>");function checkEmail(){ //小案例 var email = document.getElementById("email").value; if(email.length==0){ alert("請輸入郵箱名"); }else{ if(email.indexOf("@",0)==-1||email.indexOf(".",0)==-1){ alert("郵箱格式不正確！"); }else{ alert("註冊成功！"); } } }Date物件