jsp에서 output, 변수선언을 공부하고 알아보자

먼저 변수선언에 대해서 알아보자. JSP에서 변수선언은 크게 3가지 방법으로 가능하다

var 변수명;
let 변수명;
(선언없이X) 변수명;
const 변수명;

var 변수는 오래된 방식이다. 1995년부터 2015년 사이에 사용된 자바스크립트는 var변수가 사용되었고

let과 const는 2015년 이후에 사용된 변수이다. 따라서 이는 오래된 브라우저에서는 let과 const는 사용되지 않는다는 말일수있고 그럼 var를 사용해야 호환이 가능하다. 라는 말이 될수있다.

먼저 var 변수부터 알아보겠다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>var 변수 선언</title>
	<style></style>
	<script></script>
</head>
<body>
	<h1>var 변수의 선언</h1>
	<script>
	/* var 변수 선언 및 값 할당 */
	var x = 10;
	var y = 20;
	var z = x+y; //연산식
	
	document.write("x+y="+z);
	</script>
</body>
</html>

document.write는 해당 document(객체라고 이해하면 될거같다)에 ()안의 값을 대입해준다. 여기에서는 화면에 출력해주는것을 의미한다.

잘 출력된다. 선언부는 var, let, const 다 동일한 방식으로 이루어져 있다. 변수 선언 없이 변수명만 입력해서 하는 것도 가능하다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>var 변수 선언</title>
	<style></style>
	<script></script>
</head>
<body>
	<h1>변수의 선언</h1>
	<script>
	/* var 변수 선언 및 값 할당 */
	x = 10;
	y = 20;
	z = x+y; //연산식
	
	document.write("x+y="+z);
	</script>
</body>
</html>

See the Pen Untitled by codeJo (@yatong) on CodePen.

결과는 동일하다.

그럼 var와 let 그리고 const를 사용할 때 유의할 점을 알아보자.

var 형식은 오래된 만큼 오류를 발생시킬(?) 요소가 존재하다. 먼저. 변수 선언 이후에 재선언이 가능하다. 재선언이 가능하다고 해서 정상적으로 작동하는 것은 아니다. 다만 jsp에서 문법적으로는 맞는 코드이기 때문에 에러가 발생하지 않는다.

하지만 막상 실행해보면 로직상 맞지 않는 코드이기 때문에 정상적인 기능 구현이 어렵다.

그리고 var 변수에서만 발생하는 것이 바로

Hoisting(호이스팅)

이다.

호이스팅은 jsp에서 변수(함수)의 선언이 코드 내에 어디에 위치해있던 자동으로 상단에 위치한 것처럼 끌어올려져서

선언이 실행되고 그 이후 로직이 수행된다. 참고로 선언하는 부분만 호이스팅되지 해당 변수에 값을 할당하는 코드는 호이스팅이 발생하지 않는다. var 변수에서만 발생하는 현상이며, let과 const변수에서는 발생하지 않는다.

/* var 변수 선언 type */
	var a1=10;
	var b1;
	document.writeln("var b1="+b1); //undifined
	var c1=a1+b1; // NaN(Not a Number)
	b1 = 20; //b1이 연산식보다 늦게 선언되었으므로 undifined와 NaN이 연산식에서 발생한다 jSP에서 변수는 자동초기화되지않는다
	document.writeln("c1="+c1);
	var b1; //변수 재선언 원래는 duplicate 에러가 발생해야하지만 jsp에서는 에러없이 정상으로 판독. var 변수만 가능
	document.writeln("var b1="+b1); 
	document.writeln("<hr/>");

var 변수를 보완한 것이 let 변수라고 할 수 있겠다. let은 재선언이 불가능하다. 따라서 재선언 코드를 작성하면, let 변수는

jsp에서 실행단계에 오류가 있다고 나타내준다.

const는 Java에서 final 변수와 같다. 즉 상수와 같다. 첫 선언 이후에는 값을 변경할 수가 없다. 값을 재할당할 수도 없고, 재선언도 불가능해서 만약 선언하고 할당한다면 에러를 발생시킨다.

다음은

JSP에서의 Output

에 대해서 알아보겠다. output의 이름에서 알수 있듯이 이는 출력해주는 기능이라고 이해하면 될거같다.

JSP의 출력은 크게 다섯가지로 나눌수 있다.

(window).alert
document.write()
console.log
innerText
innerHTML

alert은 화면에 경고(팝업)창으로 출력해준다

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>var 변수 선언</title>
	<style></style>
	<script></script>
</head>
<body>
	<h1>alert Test</h1>
	<script>
		window.alert("안녕하세요 반갑습니다");
	</script>
</body>
</html>

이렇게 팝업으로 메세지를 출력할수 있다.

document.write(문자열)는 말그대로 document 객체에 문자열을 write 해준다고 이해하면 좋을거같다

See the Pen Untitled by codeJo (@yatong) on CodePen.

다음은 .innerText와 .innerHTML을 알아보자.

먼저 innerText이다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>duci</title>
	<style></style>
	<script></script>
</head>
<body>
	<h1>innerText, innerHTML Test</h1>
	<p id="test">P태그의 Project<br/>입니다.</p>
	<script>
		let test = document.getElementById("test").innerText;
		document.write("test = "+test);
		
	</script>
</body>
</html>

innerText는 해당 id 블럭의 Text를 가져온다. 만약 <> 태그가 있다면 태그는 적용되지 않고 오로지 문자열만 가져온다.

See the Pen Untitled by codeJo (@yatong) on CodePen.

결과 화면을 보면 상단의 p태그에 id값을 부여하고, 태그 <br/>을 적용시켜놨다.

결과화면에서 보면 선언되어있는 HTML 처음엔 정상적으로 태그도 적용이 되었지만. innerText로 가져온 문자열은 태그 적용 없이 문자열만 가져와서 한줄로 출력되는것을 확인할수 있다.

innerHTML은 innerText와 외관적으로는 비슷하다. HTML도 문자열을 가져오지만, Text와 HTML의 차이점은 바로 태그가 적용된 채로 가져오느냐, 태그를 무시하고 문자열만 가져오느냐 이다.

위의 코드에서 Method만 innerHTML로 변경해줘보겠다.

See the Pen Untitled by codeJo (@yatong) on CodePen.

태그가 적용된 상태로 문자열을 가져왔다. 이 차이이다.

반대로 문자열 삽입도 가능하다.

p태그의 Text를 명령어를 작동 시켜 내부 Text를 변경해보겠다.

innerText는 값을 가져올때랑 마찬가지로 문자열로만 할당 문자열을 삽입한다. 문자열에 태그가 있더라도 태그 조차 문자열로 인식해서 출력해준다.

See the Pen Untitled by codeJo (@yatong) on CodePen.

반면에 innerHTML은 문자열 안에 태그가 있으면 태그를 태그로 적용시켜 출력해준다

See the Pen Untitled by codeJo (@yatong) on CodePen.

이렇게 output 종류에 대해서 알아보았다. 다양하게 사용하면서 잘 적용할수 있게 숙달시켜놓는게 중요하다.

저작자표시 비영리 변경금지 (새창열림)

'Study > 중앙정보처리학원과정' 카테고리의 다른 글

40일차(1). Request SendRedirect와 <JSP:forward와 param> (0)	2022.12.23
39일차. JSP function 과 String의 Method (0)	2022.12.19
37일차. JSP getParameterValues, getParameterNames, getParameterMap (0)	2022.12.15
36일차. HTML Form 태그와 input 그리고 JSP (0)	2022.12.14
35일차. JSP를 위한 이클립스(Eclipse) Enterprise 와 Tomcat 9설치 (0)	2022.12.13

주관적인 블로그

38일차. JSP Output, 변수선언(variable)

jsp에서 output, 변수선언을 공부하고 알아보자

Hoisting(호이스팅)

JSP에서의 Output

'Study > 중앙정보처리학원과정' 카테고리의 다른 글

티스토리툴바

38일차. JSP Output, 변수선언(variable)

jsp에서 output, 변수선언을 공부하고 알아보자

Hoisting(호이스팅)

JSP에서의 Output

'Study > 중앙정보처리학원과정' 카테고리의 다른 글

관련글

티스토리툴바