Saturday, August 24, 2013

JSP : 암묵 오브젝트 종류

암묵 오브젝트(Implicit Objects)는 JSP에서는 자주 사용되는 메소드, 정보를 제공하기 위해 시스템 측에서 준비 해 두는 java 오브젝트이다. 선언하지 않고 사용 가능하며, 암묵 오브젝트는 스트립트 릿이나 식에서 참조 가능하다. 그러나 선언 내에서 암묵 오브젝트를 사용하면 컴파일 에러가 발생한다. 또한 여러 가지 종류가 존재한다.

1. 암묵 오브젝트(application)

javax.servlet.ServletContext 오브젝트를 참조한다. 웹 콘테이너나 서블렛 환경에 대한 정보를 가져오기 위해 사용한다. 사용할 수 있는 메소들에 대해서는 아래의 주소를 참조 !!

http://docs.oracle.com/javaee/1.4/api/javax/servlet/ServletContext.html

2. 암묵 오브젝트(config)

javax.servlet.ServletConfig 오브젝트를 참조한다. 각각의 servlet 프로그램, jsp 프로그램의 초기화 파라메타를 가져올 때 사용한다.

http://docs.oracle.com/javaee/1.4/api/javax/servlet/ServletConfig.html

3. 암묵 오브젝트(out)

javax.servlet.jsp.jspWriter 오브젝트를 참조한다. print() 메소드와 같이 출력 관련 메소드를 이용하기 위해 사용한다.

http://docs.oracle.com/javaee/1.4/api/javax/servlet/jsp/JspWriter.html

4. 암묵 오브젝트(page)

해당 jsp 페이지로부터 생성된 서블렛 * 인스턴스를 참조한다.

5. 암묵 오브젝트(pageContext)

javax.servlet.jsp.PageContext오브젝트를 참조한다. 이 오브젝트는 jsp에서 사용되고 있는 모든 오브젝트를 관리 하는 것이 가능하다. 그리고 foward() 메소드로 다른 서블렛/jsp 페이지로의 요구를 전송하고, include() 메소드로 리소스를 include하는 것이 가능하지만, jsp에서는 보통 forward/include 액션을 사용한다.

http://docs.oracle.com/javaee/1.4/api/javax/servlet/jsp/PageContext.html

6. 암묵 오브젝트(request)

HttpServletRequest 오브젝트를 참조한다. 클라이언트로부터 송신된 파라메타 데이터 , 헤더 정보, 쿠키를 가져오기 위해서 사용한다.

http://docs.oracle.com/javaee/1.4/api/javax/servlet/http/HttpServletRequest.html

7. 암묵 오브젝트(response)

HttpServletResponse 오브젝트를 참조한다. web 브라우저에 반송하는 응답 메세지를 구성하는 쿠키나 그 밖에 다른 헤더 정보를 설정하기 위한 각종 메소드를 사용하는 것이 가능하다.

http://docs.oracle.com/javaee/1.4/api/javax/servlet/http/HttpServletResponse.html

8. 암묵 오브젝트(session)

javax.servlet.http.HttpSession 오브젝트를 참조한다. 클라이언트와 서버간의 섹션 관리를 위해 사용한다.

<%@ page session ="false" %> 와 같이 설정되어 있으면 암묵 오브젝트(session)을 사용할 수 없다.

http://docs.oracle.com/javaee/1.4/api/javax/servlet/http/HttpSession.html

Tuesday, August 20, 2013

자바스크립트 : 더치페이 계산기

From Evernote:

더치페이 계산기

<!DOCTYPE html>

<head>

<title> go Dutch Calculator </title>

</head>

<body>

<h1> Go_Dutch_Calculator</h1 >

<P> Amount : <input type="text" id= "amount"></P >

<P> number : <input type="text" id= "num"></P >

<P> money to pay : <input type="button" value="calculate" onclick="getResult();" ></P>

</body>

</html>

function getResult(){

var amount = document.getElementById('amount' ).value;

var num = document.getElementById('num' ).value;

var unit = 100;

var x = Math.floor((amount / num) / unit) * unit;

var y = amount - (x * num);

var xx = Math.ceil((amount / num) / unit) * unit;

var yy = (xx * num) - amount;

//console.log(xx);

//console.log(yy);

document.getElementById( 'result').innerHTML =

'한사람당' + x + '원이면' + y + '원 부족합니다.' + '한사람당' + xx + '원이면' + yy + '원 남습니다.';

}

자바스크립트 : 생일 입력해서 연령 구하는 프로그램

From Evernote:

생일 입력해서 연령 구하는 프로그램

<!DOCTYPE html>

<head>

<title> Making birthday calculator</ title>

</head>

<body>

<p> Birthday : <input type="text" name="birthday" id="birthday"
value="1988-02-14" ></p>

<p> 태어나서부터 <span id="daysPast"> ???</span >일 경과해서 아마
<span id="age" >???</ span>살정도 입니다. </p>

</body>

</html>

function getAge() {

// 입력값 얻어오기

var birthday = document.getElementById('birthday' ).value.split("-");

// 날짜 오브젝트 작성

var d1 = new Date(birthday[0],birthday[1]-1,birthday[2]);
//월은 0부터 시작하므로

// 1970년 1월 1일부터 birthday로 지정한 시간까지의 경과 시간을 ms단위로 계산

var d2 = new Date();

// 1970년 1월 1일부터 지금까지의 시간을 ms 단위로 계산

// 일수, 연령 계산

var diff = d2.getTime() - d1.getTime();

var daysPast = Math.floor(diff / (1000 * 60 * 60 * 24));

var age = Math.floor(daysPast / 365.25);

//결과 표시

document.getElementById( "daysPast").innerHTML = daysPast;

document.getElementById( "age").innerHTML = age;

}

Monday, August 19, 2013

자바스크립트로 html 요소에 스타일 적용하기

자바스크립트로 html요소에 스타일을 적용하는 것이 가능하다.

getElementById()와 getElementsByTagName()을 이용하는 두가지 방법이 있다.

그리고 적용하고 싶은 스타일을 한꺼번에 묶어서 적용하는 방법 또한 존재한다.(<style>)

JS에서 HTML 요소 생성하고 삭제하기

HTML에서 쓰이는 요소를

javaScript를 통하여 페이지에 추가하거나 삭제 하는 것이 가능하다.

예에서 사용한 list뿐만 아니라 다른 요소들도 조작 가능하다.

주요 키워드로는

document.createElement, .appendChild, .cloneNode 등이 있다.

JS에서의 ===의 쓰임새, 즉시 실행함수와 무명함수, 랜덤정수 발생

JS에서 흔히 틀릴 수 있는 == 와 ===의 차이.

즉시 실행함수(immediate executed function)과 무명함수(anonymous function)

JS에서의 타이머와 중지 시키는 법.

JS(javaScript)에서 타이머를 중지 시키는 방법

1. 타이머가 setInterval일 경우 -> clearInterval
2. 타이머가 setTiemout일 경우 -> clearTiemout

Saturday, August 17, 2013

자바 스크립트 에서의 이벤트와 타이머 소개

<!DOCTYPE html>

<head>

<title> Studying Java Script</title >

</head>

<body>

<h1> Studying JavaScript</h1 >

// 이벤트 처리

var e = document.getElementById('myButton' );

e.onclick = function(){
// 여기서 한번만 쓰는 메소드 이므로 이름도 없고 따로 정의도 하지 않는다.

alert( "Clicked1!"); // 버튼을 클릭하면 클릭했다는 창을 띄운다.

}

// 타이머 처리

// setTimeout: 일정 시간 후에 무언가 한다.

setTimeout( function(){

console.log( "passed 2 second");

}, 2000); // 2초 후에 로그에 메세지가 표시

// setInterval : 일정 주기로 무언가 한다.

var i = 0;

setInterval( function(){

console.log(i);

i++;

}, 1000); // 1초마다 로그에 숫자를 표시한다.

</script>

</body>

</html>

0 event.html:28

passed 2 second event.html:22

1 event.html:28

2 event.html:28

3 event.html:28

4 event.html:28

5 event.html:28

6 event.html:28

7 event.html:28

8

자바 스크립트 에서의 여러 가지 오브젝트

<!DOCTYPE html>

<head>

<title> Studying Java Script</title >

</head>

<body>

<h1> Studying JavaScript</h1 >

//오브젝트의 종류로는 문자열, 배열, 날짜, 숫자, 브라우저, 문서가 있다.

// 문자열 오브젝트

var s = new String("This is a pen!");

console.log(s.substr(2,2)); // 2번째 문자부터 2개를 선택

console.log(s.replace( "pen", "pencil" )); // pen을 pencil로 대체

// 배열 오브젝트

var a = new Array(12, 33, 44, 55); // var a = [12, 33, 44, 55]; 와 같은 의미

console.log(a.join( "|")); // 배열의 요소를 ｜로 구분한 뒤 합쳐서 표시.

console.log(a.reverse()); // 배열의 요소를 거꾸로 표시

// 날짜 오브젝트

var d = new Date(); // 현재 날짜..

//var d = new Date(2013, 7, 17, 6, 19, 4);

// 2013년 8월 17일 6시 19분 4초, JS에서 월은 0부터 시작한다.

console.log(d.getFullYear()); // 해당 오브젝트의 해(년)을 표시

console.log(d.getMonth()); // 해당 오브젝트의 월을 표시.

console.log(d.getTime()); // 1970년 1월 1일부터의 시간을 ms단위로 표시.

// 숫자 오브젝트

console.log(Math.PI); // 원주값

console.log(Math.SQRT2); // 2의 루트값

var x = 5.538;

console.log(Math.floor(x)); // 버림

console.log(Math.ceil(x)); // 올림

console.log(Math.round(x)); // 반올림

console.log(Math.random()); // 0 ~ 1 사이의 랜덤값을 발생.

// 브라우저 오브젝트 Browser Object Model(BOM)

console.log(window.innerHeight); // 브라우저 화면의 높이를 표시

//window.location.href = "http://google.com"; 브라우저를 구글로 이동시킴.

// 연상배열은 키와 값의 쌍으로 이루어진 오브젝트를 의미한다.

// 배열을 인덱스로 접근하는 것이 아니라 키로 접근하는 것이 가능하다.

var sales = {'2000' :100, '2001':300, 'year2002':200, 'year2003':150};

// 연상배열값에 접근하는 방법은 두가지가 있다. []과 .

console.log(sales[2000]); // 연상배열의 키가 숫자일 경우, OK!

// console.log(sales.2001); // 연상배열의 키가 숫자일 경우, ERROR!

console.log(sales[ 'year2002']); // 연상배열의 키가 문자열일 경우,OK!

console.log(sales.year2003); // .을 이용한 방법도 OK!

</script>

</body>

</html>

<결과화면, 브라우저의 콘솔화면>

is main.html:15

This is a pencil! main.html:16

12|33|44|55 main.html:20

[55, 44, 33, 12] main.html:21

2013 main.html:27

7 main.html:28

1376733167854 main.html:29

3.141592653589793 main.html:32

1.4142135623730951 main.html:33

5 main.html:36

6 main.html:37

6 main.html:38

0.7562234776560217 main.html:40

673 main.html:43

100 main.html:52

200 main.html:54

150

Blog for Everything I studied(new blog : https://thesoul214.github.io/)

Saturday, August 24, 2013

JSP : 암묵 오브젝트 종류

Tuesday, August 20, 2013

자바스크립트 : 더치페이 계산기

From Evernote:

더치페이 계산기

자바스크립트 : 생일 입력해서 연령 구하는 프로그램

From Evernote:

생일 입력해서 연령 구하는 프로그램

Monday, August 19, 2013

자바스크립트로 html 요소에 스타일 적용하기

JS에서 HTML 요소 생성하고 삭제하기

JS에서의 ===의 쓰임새, 즉시 실행함수와 무명함수, 랜덤정수 발생

JS에서의 타이머와 중지 시키는 법.

Saturday, August 17, 2013

자바 스크립트 에서의 이벤트와 타이머 소개

자바 스크립트 에서의 여러 가지 오브젝트

뉴라이트의 기본적인 개념과 특징