javaScript基础
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>
