[WEB]Webページを実現する3つの方法

17743 ワード
JavaScript jquery ajax html テキストリンク
1. HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="서버페이지" onsubmit="submitHandling()">
	아이디 체크 <input name="id" id="id">
	<input type ="submit" value="아이디 체크">
	<input type ="reset" value="초기화">
</form>

</body>
</html>
2. HTML + Javascript(Ajax)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	submitHandling = function(){
		num = window.document.getElementById("id").value;
		if (num.length >=8)
			alert("아이디 체크 가능");
		else
			alert("아이디 체크 불가");
	}
	
</script>

</head>
<body>

<form action="서버페이지" onsubmit="submitHandling()">
	아이디 체크 <input name="id" id="id">
	<input type ="submit" value="아이디 체크">
	<input type ="reset" value="초기화">
</form>

</body>
</html>
3.HTML/J avascript/CSSの分離(イベントとイベントハンドラの分離)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	a:HOVER {
		background-color:green;
		text-decoration: underline;
	}
</style>

</head>
<body>

	아이디 체크 <input>
	<a href="#">아이디 체크</a>
	<a >취소</a>


<script type="text/javascript">
	inputId = document.querySelector("input");

	//첫번째껀 자동으로 불러온다.
	document.querySelector("a").onclick = function(){
		
		if (inputId.value.length<8){
			inputId.value = "";
			alert("아이디는 8자 이상이여야 합니다.")
		}else{
			location.href="서버페이지로이동?id="+inputId.value;
		}
	}
	
	//2번째 element 접근시 
	document.querySelectorAll("a")[1].onclick = function(){
		inputId.value="";
	}
</script>


</body>
Androidチャットツールはsocketに基づいて実現
配列から偽の値を削除する方法