<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
* {
margin: 5px;
padding: 5px;
border: 3px solid black;
}
</style>
<script>
function func1 (e) {
var a = e.target; // a태그, 이벤트타겟(소스)
a.style.backgroundColor = 'blue';
// 하이퍼링크 기능 막기
// return false;
e.preventDefault();
// 이벤트 전파막기(버블단계. 자식->부모)
e.stopPropagation();
}
function func2 (h1) {
h1.style.backgroundColor = 'red';
}
</script>
</head>
<body>
<h1 onclick="func2(this)">
<a id="a" href="http://www.naver.com" onclick="return func1(event)">네이버</a>
</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function init() {
var t = document.getElementById('t');
var h1 = document.getElementById('h1');
t.onkeyup = function () {
var inputLength = t.value.length;
var remain = 150 - inputLength;
h1.innerHTML = remain;
// remain 남은 글자수가 0 이상이면 'h1' black
// 0보다 작으면 'h1' 글자색 red
if (remain >= 0) {
h1.style.color = 'black';
} else {
h1.style.color = 'red';
}
};
}
</script>
</head>
<body onload="init()">
<h1 id="h1">150</h1>
<textarea id="t" rows="5" cols="70"></textarea>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
// window - document - forms
// document.forms[0].속성 action method name
// document.forms[0].메소드() submit() reset()
// document.폼이름.속성
// document.폼이름.메소드()
function func1() {
alert(document.forms[0].action);
alert(document.frm.method);
}
function func2() {
// action => b.jsp 변경
document.forms[0].action = "b.jsp";
// method => get 변경
document.frm.method = "get";
// submit() 메소드 호출
document.frm.submit();
}
</script>
</head>
<body>
<form action="a.jsp" method="post" name="frm">
<input type="text" name="id" value="11">
<input type="button" value="폼정보" onclick="func1()">
<input type="button" value="폼정보변경" onclick="func2()">
<input type="submit" value="전송">
<input type="reset" value="초기화">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function func1() {
//document.frm.id.focus(); // 포커스 설정
//document.frm.id.blur(); // 포커스 해제
document.frm.id.select(); // value값 선택
}
function func2() {
// 아이디 입력하지 않았으면 '입력하세요' 포커스주기
if (document.frm.id.value == '') {
// (document.frm.id.value.length == 0)
alert('아이디를 입력하세요');
document.frm.id.focus();
return;
}
// 4~10자 아이디 글자수 제한
if (frm.id.value.length < 4 || frm.id.value.length > 10) {
// if (!(frm.id.value.length >= 4 && frm.id.value.length <= 10))
alert('아이디는 4~10자 사이로 입력하세요');
frm.id.focus();
frm.id.select();
return;
}
if (frm.passwd.value == '') {
alert('패스워드를 입력하세요');
frm.passwd.focus();
return;
}
// 전송
document.frm.submit();
}
function j1() {
// jumin1의 value값 길이가 6자면 포커스를 jumin2로 이동
if (frm.jumin1.value.length == 6) {
frm.jumin2.focus();
}
}
function j2() {
// jumin2의 value값 길이가 7자면 포커스를 t로 이동
if (frm.jumin2.value.length == 7) {
frm.t.focus();
}
}
</script>
</head>
<body>
<form action="a.jsp" method="post" name="frm">
아이디: <input type="text" name="id"><br>
패스워드: <input type="password" name="passwd"><br>
주민번호: <input type="text" name="jumin1" onkeyup="j1()">-
<input type="text" name="jumin2" onkeyup="j2()"><br>
자기소개:
<textarea rows="3" cols="8" name="t"></textarea>
<br>
<input type="button" value="버튼" onclick="func1()">
<input type="button" value="전송" onclick="func2()">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
// document.폼이름.라디오,체크박스이름[0].속성
// checked(체크되면 true, 아니면 false) name, type, value
// document.폼이름.라디오,체크박스이름[0].메소드()
// focus() blur() click()
function func1() {
alert('name : ' + frm.gender[0].name); // gender
alert('type : ' + frm.gender[0].type); // radio
alert('value : ' + frm.gender[0].value); // 남
alert('checked : ' + frm.gender[0].checked);
}
function func2() {
// 성별이 체크 안되어있으면, '성별을 체크하세요' 포커스 return
if (frm.gender[0].checked == false && frm.gender[1].checked == false) {
alert("성별을 체크하세요");
frm.gender[0].focus();
return;
}
// 전송
frm.submit();
}
</script>
</head>
<body>
<form action="a.jsp" method="post" name="frm">
성별 : <input type="radio" name="gender" value="남">남자
<input type="radio" name="gender" value="여">여자
<br>
취미 : <input type="checkbox" name="hobby" value="여행">여행
<input type="checkbox" name="hobby" value="게임">게임
<input type="checkbox" name="hobby" value="야구">야구
<br>
<input type="button" value="정보" onclick="func1()">
<input type="button" value="전송" onclick="func2()">
</form>
</body>
</html>
'IT > JavaScript' 카테고리의 다른 글
| javascript - setTimeout()으로 웹 페이지 자동 연결 (0) | 2018.08.31 |
|---|---|
| javascript - form submit 제한의 여러가지 방법 (0) | 2018.08.30 |
| javascript - document.getElementById, document.write(), prompt, eval, 조건문, 반복문, 함수 (0) | 2018.08.26 |
| javascript - 함수정의, 함수호출, 익명함수 (0) | 2018.08.24 |