標籤:doctype ror 分享 put alt 寫入 window 設定 alert
1、<script></script>的三種用法:
放在<body>中
放在<head>中
放在外部JS檔案中
2、三種輸出資料的方式:
使用 document.write() 方法將內容寫到 HTML 文檔中。
使用 window.alert() 彈出警告框。
使用 innerHTML 寫入到 HTML 元素。
使用 "id" 屬性來標識 HTML 元素。
使用 document.getElementById(id) 方法訪問 HTML 元素。
用innerHTML 來擷取或插入元素內容。
3、登入頁面準備:
增加錯誤提示框。
寫好HTML+CSS檔案。
設定每個輸入元素的id
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>login</title> <link rel="stylesheet" href="../static/css/10.24.1.css"></head><body> <p id="hello">lalalala</p> <script> document.write("hello"); document.getElementById("hello").innerHTML =Date(); </script> <button type="button" onclick=window.alert("number")> press</button></body></html>
4、定義JavaScript 函數。
驗證使用者名稱6-20位
驗證密碼6-20位
5、onclick調用這個函數。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>login</title> <link rel="stylesheet" type="text/css" href="../static/css//10.24.css"> <script> function mu() { var name=document.getElementById("username") var password=document.getElementById("password") var error=document.getElementById("error_box") if(name.value.length<6 ){ error.innerHTML="使用者名稱為6-20位" } if(password.value.length){ error.innerHTML="密碼為6-20位" } } </script></head><body> <div class="box"> <h2>登入</h2> <div class="input_box"> <input id="username" type="text" placeholder="請輸入使用者名稱"> </div> <div class="input_box"> <input id="password" type="text" placeholder="請輸入密碼"> </div> <div id="error_box"><br></div> <div> <button onclick="mu()">登入</button> </div> </div></body></html>
JavaScript 基礎,登入驗證