[20121107] 2일차 (Table, form, JavaScript, 이벤트 핸들러, 사용자데이터입력, 출력, document)
Java/JavaScript 2012. 11. 8. 17:44테이블 태그
1. <table>,<tbody>,<tr>,<td> 태그의 조합에 의해 표 형식을 만들 수 있다.
2. 형식
<table>
<tbody>
<tr> --> 행 역할
<td>콘텐츠</td><td>콘텐츠</td>... --> 열 역활
</tr>
<tr>
<td>콘텐츠</td><td>콘텐츠</td>...
</tr>
...
</tbody>
</table>
3. 제목 표시하는 경우는 <td> 대신에 <th>을 사용.
예를 들어서, 회원 명단을 테이블 태그로 표현하면
번호 이름 전화번호 이메일
1 홍길동 010-111-1111 hong@naver.com
2 김길동 010-222-2222 kim@naver.com
//Sample08.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
table td, table th /* 식별자, 식별자는 두 개의 식별자에 동시에 CSS 적용 */
{
padding: 5px;
border-right-style: solid; /* 경계선의 모양 지정 속성 */
border-bottom-style: solid; /* 경계선의 모양 지정 속성 */
border-width: 1px; /* 경계선의 굵기 지정 속성 */
border-color: #6980b8; /* 경계선의 색 지정 속성 */
}
</style>
</head>
<body>
<div>
<table cellspacing="4">
<tbody>
<tr>
<th>번호</th>
<th>이름</th>
<th>전화번호</th>
<th>이메일</th>
</tr>
<tr>
<td>1</td>
<td>홍길동</td>
<td>010-111-1111</td>
<td>hong@naver.com</td>
</tr>
<tr>
<td>2</td>
<td>김길동</td>
<td>010-222-2222</td>
<td>kim@naver.com</td>
</tr>
</tbody>
<!--
<tfoot><tr><td style="border:none;">표1. 회원 명단</td></tr> </tfoot>
-->
</table>
</div>
</body>
</html>
입력 폼(Form) 태그
1. <form>, <input>, <select>, <textarea> 태그의 조합으로 입력 인터페이스 구성.
2. <input> 에서 type 속성(text, password, radio, checkbox, file, hidden, submit, reset, button)으로
여러가지 입력 폼 구성 가능.
3. <select> 태그는 하위 태그로서 <option> 태그를 갖는다.
4. <form> 태그는 <input>,<select>,<textarea>의 부모 태그 역할.
예를 들어, 이름, 전화번호 입력 양식 화면 구성시
<form>
이름 <input type="text"> --> 실행시 텍스트 입력 양식이 된다.
전화번호 <input type="text">
</form>
//Sample09.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
input.style01 /* 특정 태그의 스타일(style) 속성이 style01인 경우에만 속성 적용 */
{
}
input:FOCUS { /* 특정 태그에 포커스가 맞춰진 경우만 속성 적용 */
background-color: yellow;
}
}
</style>
</head>
<body>
<div>
<h1>회원가입</h1>
<p>회원가입 안내 문구</p>
<form>
<table>
<tbody>
<tr>
<td>이름</td>
<td><input type="text" class="style01"></td>
</tr>
<tr>
<td>전화번호</td>
<td><input type="text" class="style01"></td>
</tr>
<tr>
<td>성별</td>
<td><input type="radio" name="gender">남자<input type="radio" name="gender">여자</td>
</tr>
<tr>
<td>취미</td>
<td>
<input type="checkbox"> 공부
<input type="checkbox"> 영화
<input type="checkbox"> 운동
<input type="checkbox"> 독서
</td>
</tr>
<tr>
<td>출신지역</td>
<td>
<select>
<option>서울</option>
<option>부산</option>
<option>인천</option>
<option>대구</option>
</select>
</td>
</tr>
<tr>
<td>자기소개</td>
<td>
<textarea style="width:300px; height:100px;"></textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="가입"></td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
Javascript
1. 자바스크립트는 프로그램 언어의 한 종류. HTML의 태그를 객체로 삼아서 데이터 처리를 하는 프로그램 언어.
2. 변수, 연산자, 제어문, 함수, 배열, 객체 등의 표현이 모두 지원됨.
3. HTML, CSS, Javascript 가 혼용된 형태로 코딩을 해야 함.
4. 형식
<script type="text/javascript">
//자바스크립트 코드 작성
/* 범위 주석 */
</script>
5. 기본 규칙
- 대소문자 구분
- 함수 단위로 코딩
- 함수 영역 내에 있는 코드는 함수 호출시에만 실행됨
- 함수 영역 밖에 있는 코드는 HTML 문서가 브라우저에 로드될 때 실행됨
- 함수 호출은 HTML 에서 이벤트 핸들러(onclick, ...)를 이용함
- HTML 태그를 객체로 접근하기 위해서 document.getElementById("아이디명") 메소드 사용
- document는 내장객체로서 HTML 문서의 body 태그 영역을 지정함
- HTML 태그에서는 id 속성을 지정해서 객체 접근이 가능하도록 함
- 객체로 접근한 후에는 해당 객체가 가지고 있는 여러가지 속성을 자바스크립트에서 사용 가능
- 사용 가능한 속성은 해당 객체의 종류에 따라 다름
- 자바스크립트 내에서만 사용 가능한 여러가지 내장 객체가 지원됨
이벤트 핸들러 테스트
//Script01.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
//변수 선언->전역 변수(멤버 변수)
var a = 10;
//함수(메소드) 정의
function myFunc() {
//변수 선언->지역 변수
var b = 20;
var c = 0;
//연산
c = a + b;
//출력->자체 출력문을 사용하지 않고 HTML 객체를 통해서 결과 출력함.
var obj = document.getElementById("result");
obj.innerHTML = "<span style=\"font-size:24pt;\">결과: " + c +"</span>";
}
</script>
</head>
<body>
<div>
<h3>자바스크립트를 이용한 메시지 출력</h3>
<form>
<input type="button" value="함수호출"
onclick="myFunc()">
</form>
<div id="result">결과: </div>
</div>
</body>
</html>
이름, 국어, 영어, 수학을 입력 받아서 총점, 평균 출력
//Script02.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.score { width:80px; }
</style>
<script type="text/javascript">
function myFunc() {
var nameObj = document.getElementById("name");
var korObj = document.getElementById("kor");
var engObj = document.getElementById("eng");
var matObj = document.getElementById("mat");
var tot = parseInt(korObj.value) + parseInt(engObj.value) + parseInt(matObj.value);
var ave = Math.round((tot / 3)*10)/10;
var result = document.getElementById("result");
result.innerHTML = "<span style=\"font-size:14pt;\">이름:"+nameObj.value+", 국어:"+korObj.value+", 영어:"+engObj.value+", 수학:"+matObj.value+", 총점:"+tot+", 평균:"+ave+"</span>";
}
</script>
</head>
<body>
<div>
<h2>총점, 평균 계산</h2>
<h3>입력------</h3>
<form>
이름 <input type="text" id="name" value="">
국어 <input type="text" id="kor" class="score">
영어 <input type="text" id="eng" class="score">
수학 <input type="text" id="mat" class="score">
<input type="button" value="결과"
onclick="myFunc()">
</form>
<h3>출력------</h3>
<div id="result">
<!--
<span style="font-size:14pt;">이름:홍길동, 국어:100, 영어:100, 수학:100, 총점:300, 평균:100.0</span>
-->
</div>
</div>
</body>
</html>
문제) 거스름돈을 환폐단위로 구분해서 출력. 자바스크립트 이용.
실행 예)
금액(10~1000) [ 990 ] [결과]
총액 : 990원
오백원 1개, 백원 4개, 오십원 1개, 십원 4개
//Script03.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var moneyObj = document.getElementById("money");
var money = parseInt(moneyObj.value);
var m500, m100, m50, m10;
m500 = parseInt(money / 500); //몫 연산
money = money % 500; //나머지 연산
m100 = parseInt(money / 100);
money = money % 100;
m50 = parseInt(money / 50);
money = money % 50;
m10 = parseInt(money / 10);
var result = document.getElementById("result");
result.innerHTML = "총액 : "+moneyObj.value+"원<br>오백원 "+m500+"개, 백원 "+m100+"개, 오십원 "+m50+"개, 십원 "+m10+"개";
}
</script>
</head>
<body>
<div>
<h2>거스름돈 계산</h2>
<h3>입력 ---------- </h3>
<form>
금액(10~1000)
<input type="text" id="money">
<input type="button" value="결과"
onclick="myFunc()">
</form>
<h3>출력 ---------- </h3>
<div id="result">
<!-- 총액 : 990원<br>
오백원 1개, 백원 4개, 오십원 1개, 십원 4개 -->
</div>
</div>
</body>
</html>
if문
1. 제어문 일종. 조건식 검사를 통해서 조건에 결과에 따라서 실행문 실행을 선택.
2. 형식
if (조건) {
}
if (조건) {
} else {
}
if (조건) {
} else if (조건) {
} else {
}
3. 조건식에 사용되는 관계연산자, 논리연산자는 자바와 동일.
4. 자바스크립트에서는 문자열 비교시 == 연산자 사용함(자바에서는 equals() 메소드 사용).
문제) 세 개의 숫자 중에서 가장 큰 숫자 구하기. 자바스크립트 이용.
실행 예)
숫자1 [XX] 숫자2 [YY] 숫자3 [ZZ] [결과]
입력 받은 숫자 : XX, YY, ZZ
가장 큰 숫자 : ZZ
//Script04.html
문제) 비밀번호 입력시 확인 결과 출력. 자바스크립트 이용.
<input type="password"> 태그 이용.
실행 예)
비밀번호(숫자만 입력 가능) [**** ] [결과]
결과: 암호가 틀렸습니다.
//Script05.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var pw = document.getElementById("pw");
var msg = document.getElementById("msg");
msg.style.display = "none";
//정규식(Regular Expression)
//숫자로만 구성되었는지 검사하는 과정
if (pw.value.match(/[^0-9]/)) {
msg.style.display = "inline";
pw.value = "";
pw.focus();
}
var str = "";
if (pw.value == "1234") {
str = "암호가 맞습니다.";
} else {
str = "암호가 틀렸습니다.";
}
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>비밀번호 확인</h2>
<h3>입력 ------------------</h3>
<form>
비밀번호(숫자만 입력 가능)
<input type="password" id="pw">
<input type="button" value="결과"
onclick="myFunc()">
<span id="msg"
style="color:red; display:none;">
숫자만 입력 가능합니다.</span>
</form>
<h3>출력 ------------------</h3>
<div id="result"></div>
</div>
</body>
</html>
문제) 임의의 수를 입력 받아서 3의 배수, 4의 배수로 구분해서 출력. 자바스크립트 이용.
실행 예)
임의의 정수(3 또는 4의 배수) [3 ] [결과]
입력받은 숫자 : 3
구분 : 3의 배수
//Sample06.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var num = document.getElementById("num");
var data = parseInt(num.value);
var msg = document.getElementById("msg");
msg.style.display = "none";
//정규식(Regular Expression)
//숫자로만 구성되었는지 검사하는 과정
if (num.value.match(/[^0-9]/)) {
msg.style.display = "inline";
num.value = "";
num.focus();
}
var str = "";
str += "입력받은 숫자 : " + num.value + "<br>";
if ((data % (3*4)) == 0) {
str += "구분 : 3 또는 4의 배수";
} else if ((data % 3) == 0) {
str += "구분 : 3의 배수";
} else if ((data % 4) == 0) {
str += "구분 : 4의 배수";
}
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h2>배수 확인</h2>
<h3>입력 ------------------</h3>
<form>
임의의 정수(3 또는 4의 배수)
<input type="text" id="num">
<input type="button" value="결과"
onclick="myFunc()">
<span id="msg"
style="color:red; display:none;">
숫자만 입력 가능합니다.</span>
</form>
<h3>출력 ------------------</h3>
<div id="result"></div>
</div>
</body>
</html>
문제) 임의의 점수를 입력받아서 판정을 출력. 자바스크립트 이용.
입력된 데이터가 숫자인지 검사하는 과정, 0~100 사이의 숫자인지 검사하는 과정 추가.
판정 기준은
90~100 -> A
80~89 -> B
70~79 -> C
60~69 -> D
0~59 -> F
실행 예)
점수 입력(0~100) [90 ] [결과]
입력된 점수 : 90
판정 결과 : A
//Sample07.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function myFunc() {
var num = document.getElementById("num");
var data = parseInt(num.value);
var msg = document.getElementById("msg");
msg.style.display = "none";
//정규식(Regular Expression)
//숫자로만 구성되었는지 검사하는 과정
if (num.value.match(/[^0-9]/) || data>100) {
msg.style.display = "inline";
num.value = "";
num.focus();
} else {
var str = "";
str += "입력된 점수 : " + num.value + "<br>";
str += "판정 결과 : ";
if (data < 60) {
str += "F";
} else if (data < 70) {
str += "D";
} else if (data < 80) {
str += "C";
} else if (data < 90) {
str += "B";
} else {
str += "A";
}
var result = document.getElementById("result");
result.innerHTML = str;
}
}
</script>
</head>
<body>
<div>
<h2>판정 확인</h2>
<h3>입력 ------------------</h3>
<form>
점수 입력(0~100)
<input type="text" id="num">
<input type="button" value="결과"
onclick="myFunc()">
<span id="msg"
style="color:red; display:none;">
0~100 사이의 숫자만 입력 가능합니다.</span>
</form>
<h3>출력 ------------------</h3>
<div id="result"></div>
</div>
</body>
</html>
문제) 국어, 영어, 수학 점수를 입력 받아서 판정 결과 출력. 자바스크립트 이용.
입력된 데이터가 숫자인지 검사하는 과정, 0~100 사이의 숫자인지 검사하는 과정 추가.
판정 기준은
합격 -> 과목별로 40점 이상이면서, 평균이 60점 이상
과락 -> 과목중에 40점 미만이 있고, 평균은 60점 이상
불합격 -> 평균이 60점 미만
평균이 60점 이상 -> 합격
평균이 60점 미만 -> 불합격
합격 또는 과락 구분은 -> 국어, 영어, 수학 점수가 모두 40점 이상인 확인.
실행 예)
국어(0~100) [XX ] 영어(0~100) [YY ] 수학(0~100) [ZZ ] [결과]
입력받은 점수 : 국어 XX, 영어 YY, 수학 ZZ
판정 결과 : 합격
//Sample08.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.style01 {
width:80px;
}
</style>
<script type="text/javascript">
function myFunc() {
var kor = document.getElementById("kor");
var korVal = parseInt(kor.value);
var eng = document.getElementById("eng");
var engVal = parseInt(eng.value);
var mat = document.getElementById("mat");
var matVal = parseInt(mat.value);
var msg = document.getElementById("msg");
msg.style.display = "none";
//정규식(Regular Expression)
//숫자로만 구성되었는지 검사하는 과정
if ((kor.value.match(/[^0-9]/) || korVal>100)
|| ((eng.value.match(/[^0-9]/) || engVal>100))
|| ((mat.value.match(/[^0-9]/) || matVal>100))) {
msg.style.display = "inline";
kor.value = "";
eng.value = "";
mat.value = "";
kor.focus();
} else {
var str = "";
str += "입력된 점수 : 국어 "+kor.value+", 영어 "+eng.value+", 수학 "+mat.value+"<br>";
str += "판정 결과 : ";
var ave = (korVal + engVal + matVal) / 3;
if (ave>=60 && (korVal>=40 && engVal>=40 && matVal>=40)) {
str += "합격";
} else if (ave>=60) {
str += "과락";
} else {
str += "불합격";
}
var result = document.getElementById("result");
result.innerHTML = str;
}
}
</script>
</head>
<body>
<div>
<h2>성적 확인</h2>
<h3>입력 ------------------</h3>
<form>
국어(0~100)<input type="text" id="kor" class="style01">
영어(0~100)<input type="text" id="eng" class="style01">
수학(0~100)<input type="text" id="mat" class="style01">
<input type="button" value="결과"
onclick="myFunc()"><br>
<span id="msg"
style="color:red; display:none;">
0~100 사이의 숫자만 입력 가능합니다.</span>
</form>
<h3>출력 ------------------</h3>
<div id="result"></div>
</div>
</body>
</html>
'Java > JavaScript' 카테고리의 다른 글
| Javascript event Keycode (0) | 2013.01.10 |
|---|---|
| [20121112 ~ 1113] 5일차 (text박스, 속성, select, window객체, DOM, 사용자 정의 객체) (0) | 2012.11.15 |
| [20121109] 4일차 (달력구현, 난수, radio 버튼, checkbox) (0) | 2012.11.15 |
| [20121108] 3일차 (JavaScript, 반복문(do~while, for, 이중for), split(), 배열, 배열의배열) (0) | 2012.11.08 |
| [20121106] 1일차 (HTML 기본 태그, div, span, style, CSS, h1, id, class) (0) | 2012.11.08 |
WRITTEN BY
