不止有一個人問我Javascript和java有什麼關係？我不止一次回答過，沒有關係，沒有關係，沒有任何關係。只是名字中都有java這4個字母而已。
JavaScript 是 Web 的程式語言，所有現代的 HTML 頁面都使用 JavaScript；Java是一門面向物件程式語言，可以編寫桌面應用程式、Web應用程式、分散式系統和嵌入式系統應用程式。
我們現在學習前端，當然要學會Javascript(簡稱Js)了，至於Java，後期有時間的話，再進行詳細地講解。
14.1 Js有什麼用JavaScript 是一種輕量級的程式語言，可以對使用者的操作進行反應；可以驗證表單輸入的內容；可以改變HTML內容；可以更換HTML影象；可以改變CSS樣式等等。如果HTML是名詞，CSS是形容詞，那麼Js就是動詞。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Javascript來也</title> <style> .btn1 { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 16px 32px; font-size: 16px; } .btn2 { background-color: #008CBA; color: white; border: none; padding: 16px 32px; font-size: 16px; } </style> <script> function changeStyle() { document.getElementById("btn2").style.background = "darkgreen"; } </script></head><body><button class="btn1" onclick="alert('你膽子真大，竟然敢點我');">響應事件</button><button id="btn2" class="btn2" onclick="changeStyle();">改變樣式</button></body></html>輸出結果(錄了操作過程)
14.2 Js在HTML中同CSS一樣，也是有3種方法，同HTML 頁面進行銜接。可在HTML標籤中，直接呼叫；可在<head></head>之間的<script></script>編寫指令碼內容；還可以放在js檔案中並透過<link>引入。
前兩種方法，在上一個例子已經說過，這裡說一下外部檔案的方式。在HTML同目錄下，新建check.js檔案。
在check.js檔案中的程式碼，在Js中，單行註釋以 // 開頭，多行註釋以 /* 開始，以 */ 結尾。
// 非空校驗function check() { let name = document.forms["form"]["account"].value; let pwd = document.forms["form"]["pwd"].value; if (null == name || name.trim() == "") { alert("賬號不能為空，請輸入!"); return false; } if (null == pwd || pwd.trim() == "") { alert("密碼不能為空，請輸入!"); return false; } alert("恭喜你，登入成功!")}HTML檔案程式碼，為了提高表單顏值，我特意配了效果。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>引入js檔案</title> <script type="text/javascript" src="check.js"></script> <style> .btn-div { width: 250px; text-align: center; vertical-align: center; line-height: 30px; } .login { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 8px 32px; font-size: 16px; margin-top: 15px; } .reset { background-color: gray; color: white; border: none; padding: 8px 32px; font-size: 16px; margin-top: 15px; } input { border: 1px solid darkcyan; line-height: 25px; width: 200px; color: #000; font-weight: bold; margin-top: 5px; } </style></head><body><form name="form" action="#" onsubmit="return check()" method="post"> 賬號：<input type="text" name="account"/><br/> 密碼：<input type="password" name="pwd"/><br/> <div class="btn-div"> <button class="login" type="submit">登入</button> <button class="reset" type="reset">重置</button> </div></form></form></body></html>輸出結果(錄了操作過程)
#前端##HTML5##JavaScript##程式設計師##Web#
最新評論