Hong의 뭐로할까나: Enterprise Java (Java Script)

레이블이 Enterprise Java (Java Script)인 게시물을 표시합니다. 모든 게시물 표시

2013년 7월 9일 화요일

(130709) 12일차 Cul.html (Java Script Event를 이용한 계산기 프로그램)

- 소스
<!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> 계산기 </title>
</head>
<body>
<center>
<script type = "text/javascript">
function multipleF(){
document.form.field.value += '*';
}
function divisionF(){
document.form.field.value += '/';
}
function minusF(){
document.form.field.value += '-';
}
function clearF(){
document.form.field.value = '';
}
function sevenF(){
document.form.field.value += '7';
}
function eightF(){
document.form.field.value += '8';
}
function nineF(){
document.form.field.value += '9';
}
function zeroF(){
document.form.field.value += '0';
}
function fourF(){
document.form.field.value += '4';
}
function fiveF(){
document.form.field.value += '5';
}
function sixF(){
document.form.field.value += '6';
}
function equalsF(){
document.form.field.value = eval(document.form.field.value); // 문자열을 자바스크립트화 시킴 (코드 평가)
}
function oneF(){
document.form.field.value += '1';
}
function twoF(){
document.form.field.value += '2';
}
function threeF(){
document.form.field.value += '3';
}
function plusF(){
document.form.field.value += '+';
}
</script>

<form name = "form">
<table border = "1" cellspacing = "2">
<tr>
<td>
<input type = "text" name = "field" size = "20" value = "">
</td>
</tr>
</table>

<table border = "1" cellspacing = "2">
<tr>
<td><input type = "button" name = "multiple" value = "*" onClick = "multipleF()" size = "5"></td>
<td><input type = "button" name = "division" value = "/" onClick = "divisionF()" size = "5"></td>
<td><input type = "button" name = "minus" value = "-" onClick = "minusF()" size = "5"></td>
<td><input type = "button" name = "clear" value = "c" onClick = "clearF()" size = "5"></td>
</tr>
<tr>
<td><input type = "button" name = "seven" value = "7" onClick = "sevenF()" size = "5"></td>
<td><input type = "button" name = "eight" value = "8" onClick = "eightF()" size = "5"></td>
<td><input type = "button" name = "nine" value = "9" onClick = "nineF()" size = "5"></td>
<td><input type = "button" name = "zero" value = "0" onClick = "zeroF()" size = "5"></td>
</tr>
<tr>
<td><input type = "button" name = "four" value = "4" onClick = "fourF()" size = "5"></td>
<td><input type = "button" name = "five" value = "5" onClick = "fiveF()" size = "5"></td>
<td><input type = "button" name = "six" value = "6" onClick = "sixF()" size = "5"></td>
<td><input type = "button" name = "equals" value = "=" onClick = "equalsF()" size = "5"></td>
</tr>
<tr>
<td><input type = "button" name = "one" value = "1" onClick = "oneF()" size = "5"></td>
<td><input type = "button" name = "two" value = "2" onClick = "twoF()" size = "5"></td>
<td><input type = "button" name = "three" value = "3" onClick = "threeF()" size = "5"></td>
<td><input type = "button" name = "plus" value = "+" onClick = "plusF()" size = "5"></td>
</tr>
</table>
</form>

</center>
</body>
</html>

- 결과

(130709) 12일차 EventTest3.html (JavaScript를 이용한 문자, 숫자열 확인 프로그램)

(130709) 12일차 EventTest.html, EventTest2.html (JavaScript의 Event 설명 및 OnBlur 테스트)

- 이벤트
: html문서 내부에 존재하는 자바스크립트 코드는 브라우저 내에서 이벤트구동(event-driven)방식으로 작동한다.
: 이벤트란 브라우저의 사용자가 취한 액션을 의미한다. 즉 마우스클릭이나 이동, 키보드입력, 버튼클릭 등의 행위를 의미한다.
: 이벤트 핸들러는 이벤트의 발생시 처리하기 위해 작성된 자바스크립트 코드이다.

- EventTest.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>
</head>

<body onLoad = window.open() onBlur = "document.bgColor = 'blue'" onFocus = "document.bgColor='red'">
<h3> 포커스를 받으면 빨간색, 잃으면 파란색 배경으로 변합니다. </h3>

</body>
</html>

- 결과

- EventTest2.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>
</head>
<script type = "text/javascript">
function blurtest(){
var data = document.form.id.value;
if(data.length < 1){
alert("아이디가 다 채워지지 않았습니다.")
document.form.id.focus(); // 초점을 id로 맞춤
}
else{
document.form.pass.focus(); // 초점을 pass로 맞춤
}

}
</script>


<body>
<h3> 포커스를 받을 때 이벤트 발생 </h3>

<form name = "form">

아이디 : <input type = "text" name = "id" onBlur="blurtest()"> <br><br>
패스워드 : <input type = "password" name = "pass"> <br><br>
</form>

</body>
</html>

- 결과

(130709) 12일차 MathTest.html (JavaScript의 Math 객체 테스트)

- Math

(130709) 12일차 IntervalTest.html, TimeLayerTest.html (JavaScript의 setTimeout(), setInterval(), innerText 테스트)

- setTimeout() : 함수 안에다 써야 무한반복
: window 객체의 setTimeout() 메소드는 지정된 시간동안 기다린 후 지정된 명령을 실행 시키는 매우 독특한 기능을 가지고 있다.

- setInterval() : 함수 밖에다 써야 무한반복
: setInterval() 메소드는 일정한 간격을 두고 명령을 주기적으로 실행시키고자 할 때 사용되는 것으로 setTimeout()의 경우에는 지정된 명령을 일정한 시간이 지난 후에 오직 한번만 실행시켜 주기 때문이다.
: 시간을 계속해서 보여주는 경우에는 setTimeout()을 계속해서 설정하는 것보다 이 메소드를 사용하는 것이 더 나을 것이다.

- innerText : 중요
: DIV나 SPAN, H1 같은 요소에만 적용되고 HTML의 텍스트 형태를 문서에 삽입하도록 한다.
:<span id = liveclock style = "LEFT: 140px; POSITION: absolute; TOP: 30px width=40px"></span>
: style을 이용해서 영역을 분류하고, 그 영역을 liveclock으로 선언.

- IntervalTest.html 소스 (setInterval())
<!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>
</head>
<body>

<script type="text/javascript">
function showTime(){
var today = new Date();
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
var mytitle = '현재 시간은 '+hour+'시 '+minute+'분 '+second+'초입니다.';
document.title = mytitle;
}
setInterval("showTime()",1000); // 함수 밖에 선언
</script>

<H2> 브라우저의 타이틀 바에 실시간을 표시합니다. </H2>

</body>
</html>

- 결과

- IntervalTest.html 소스 (setInterval())
<!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>
</head>
<body>
<script type="text/javascript">
function showTime(){
var today = new Date();
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
if(second <= 9)
second = '0' + second;
if(minute <= 9)
minute = '0' + minute;
if(hour <= 9)
hour = '0' + hour;
var mytime = hour + '시 ' + minute + '분 ' + second + '초';
document.rclock.rtime.value = mytime;
}
setInterval("showTime()", 1000); // 일정한 간격을 두고 명령을 주기적으로 실행 (함수 밖에서 호출해야 무한반복)
</script>


<form name = "rclock">
<p align = "center"><input type = "text" name = "rtime" size = "12"></p>
</form>

</body>
</html>

- 결과

- TimeLayerTest.html 소스 (innerText)
<!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>
</head>
<body>
<script type="text/javascript">
function showTime(){
var today = new Date();
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
if(second<=9)
second = '0' + second;
if(minute<=9)
minute = '0' + minute;
if(hour<=9)
hour = '0' + hour;
var mytime = hour + '시 ' + minute + '분 ' + second + '초';
if (document.layers)
document.layers.liveclock.document.write(mytime);

else if (document.all)
liveclock.innerText = mytime
}
setInterval("showTime()", 1000);
</script>

<span id = liveclock style = "LEFT: 140px; POSITION: absolute; TOP: 30px width=40px"></span>

</body>
</html>

- 결과

(130709) 12일차 ArrayTest.html (JavaScript의 Array 객체, Date 객체 테스트, Date 객체를 이용한 기념일 일수 출력)

- Array (배열)
배열객체명 = new Array() // 배열의 갯수를 지정하지 않음
배열객체명 = new Array(배열의갯수) // 배열의 갯수를 미리 지정함
배열객체명 = new Array(배열1,배열2...배열n) // 배열요소를 모두 열거해 줌

- Date

- 소스

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

<body>

// 배열 테스트

arr = new Array();

arr[0] = 5;

arr[1] = 3;

arr[2] = 2;

arr[3] = 1;

arr[4] = 4;

document.write(arr.sort()); // 자동으로 정렬을 해줌

document.write("<br>");

// Date 객체를 사용해서 오늘의 날짜 받아오기

td = new Date();

var Tyear = td.getFullYear();

var Tmonth = td.getMonth()+1;

var Tdate = td.getDate();

document.write("오늘의 날짜는 " + Tyear + "년 " + Tmonth + "월 " + Tdate + "일");

// prompt로 기념일 입력받기

var year = prompt("년도를 입력하세요", "0");

var month = prompt("월을 입력하세요", "0");

var date= prompt("날짜를 입력하세요", "0");

// 입력받은 날짜를 정수형으로 변환

var year2 = parseInt(year);

var month2 = parseInt(month);

var date2 = parseInt(date);

// 정수형으로 변환한 날짜를 Date 객체에 넣음

d = new Date(year2, month2, date2)

alert("입력하신 날짜는 " + d.getFullYear() + "년 " + d.getMonth() + "월 " + d.getDate() + "일");

var Yresult = (Tyear - d.getFullYear()) * 365;

var Mresult = (Tmonth - d.getMonth()) * 30;

var Tresult = Tdate - d.getDate();

var result = Yresult + Mresult + Tresult;

alert("입력하신 기념일은 오늘로부터 " + result + "일 입니다.");

</script>

</body>

</html>

- 결과

(130709) 12일차 StarTest.html, StarTest2.html (JavaScript를 이용한 피라미드 별(★)찍기)

- StarTest.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>
</head>
<body>
<script type="text/javascript">

for(var int=0 ; int<5 ; int++){
for(var int2=5-int ; int2>0 ; int2--)
document.write(" "); // 공백 찍기
for(var int2=0 ; int2<int+1 ; int2++)
document.write("*"); // 왼쪽 * 찍기
for(var int2=0 ; int2<int ; int2++)
document.write("*"); // 오른쪽 * 찍기
document.write("<br>");
}

</script>
</body>
</html>

- 결과

- StarTest.html 소스2
<!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>
</head>
<body>
<script type="text/javascript">

for(var int=0 ; int<5 ; int++){
for(var int2=5-int ; int2>0 ; int2--)
document.write("   ");
for(var int2=0 ; int2<int+1 ; int2++)
document.write("★");
for(var int2=0 ; int2<int ; int2++)
document.write("★");
document.write("<br>");
}

</script>
</body>
</html>

- StarTest2.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>
</head>
<body>
<script type="text/javascript">

for ( var int = 0; int < 5 ; int++) {
for ( var int2 = 0; int2 < 4- int; int2++) {
document.write("   ");
}
for ( var int3 = 0; int3 < 1+(int*2); int3++) {
document.write("★");
}
document.write("<br>");
}

</script>
</body>

</html>

- 결과

(130709) 12일차 Calculator.html (JavaScript를 이용한 계산기 프로그램)

(130709) 12일차 ScriptEx.html, ScriptEx2.html (JavaScript 기본 설명 및 테스트)

- 자바스크립트 언어 <script>
: 브라우저에서 무언가의 데이터를 제어하거나, 반복적으로 사용되어지거나, 하는 등의 브라우저의 언어를 제어하기 위한 것이다.
: HTML로 표현할 수 없는 여러가지 기능이 추가된 웹프로그래밍이다. 단 데이터베이스나 XML 연동은 되지 않는다.
: HTML을 조금더 프로그래밍적으로, 동적으로 만들어 주는 것이다.

- 데이터 타입 (변수 하나에 모든 기본 데이터형 타입이 저장 된다 - 숫자, 논리값, 스트링, null 값)

- 변수의 선언
: 변수명 = 초기 값; (초기 값은 반드시 필요) - 전역변수
: var 변수명[=초기 값]; (초기 값은 옵션) - 지역변수

- ScriptEx.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>
</head>
<body>
<script type = "text/javascript">
money = 1000; // 전역변수

// function은 메소드
function test(){
var money = 2000; // var를 붙이면 지역변수
// 화면에 출력 - document는 <body>를 의미하므로 html 코드를 실행할 수 있다.
document.write(money + "<br>");
document.write(this.money + "<br>");
}

// 함수 호출 - test()를 쓰지 않으면 함수가 절대 호출되지 않는다.
test();

</script>
</body>
</html>

- 결과

- ScriptEx2.html 소스 (alert() 함수, confirm() 함수, prompt() 함수)
<!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>
</head>
<body>

<script type = "text/javascript">
var a = 10 - 5;

// alert() 함수 - 경고문이나 메시지를 전달하는 대화상자
alert("안녕하세요");
alert(a);

// confirm() 함수 - 둘 중 하나를 선택할때 사용. true나 false가 리턴된다.
a = confirm("10-5 = 5이면 확인 그렇지 않으면 취소를 눌러주세요");
if(a == true){
alert("5가 맞습니다.");
}
else{
alert("답이 아닙니다.");
}

// prompt() 함수 - 상호 대화형 대화 상자
var high = prompt("값을 넣어주세요", "0"); // 초기값 0
var b = parseInt(high)+10;
alert(b);
</script>
</body>

</html>

- alert() 함수

- confirm() 함수

- prompt() 함수