자바스크립트 3강(변수,자료형,연산자)

1. 변수를 선언하는 규칙 3가지

(1) 이름은 의미 있게 짓는다.

(2) 여러 단어를 연결한 변수 이름은 낙타 모양으로 만들어준다.(예- birthYear)

(3) 첫 글자는 문자, 밑줄(_), 달러 기호($)로 시작해야 한다. 예약어도 사용 불가

2. 자료형의 종류

(1)기본형

- number(숫자)

- string(문자열)

- boolean(논리형)

- undefined(자료형을 지장하지 않았을 때의 유형)

- null(값이 유효하지 않을 때의 유형)

(2)복합형

- array(배열)

- object(객체)

3.자료형 특징

(1) 자바스크립트는 정수, 실수 모두 number로 취급함.

(2) 단, 실수끼리 계산할 때는 2진수로 변환하여 계산하기에 오차가 난다.

(3) 문자형은 '' 이나, ""로 묶을 수 있다. ""로 묶는 것을 권장한다.

(4) 논리형은 true/false로 표현한다.

(5) undefined 가 아직 변수에 값이 없다는 뜻이다.(타 언어의 null과 다르다)

(6) null 이 처음에 할당한 값이 더는 유효하지 않다는 뜻이다.

4. 배열

-기본 형식- 

var 배열이름 = ["값1", "값2", "값3", "값4"];  

or 

var 배열이름 = [];

-배열 출력-

배열이름[0]; 

>"값1"

5. 객체

-기본 형식-

var 객체이름 = {

    firstName: "kim",

    lastName: "goo",

    age: 35,

    address: "Seoul"

}

객체는 중괄호{} 로 묶고, 키와 값을 :을 사용하여 한 쌍으로 묶는다.

6. 연산자

사칙 연산자 : +, -, *, /

나머지 연산자 : %

증감 연산자 : ++, --

증감 연산자 주의점

(예) 

var a = 10;  //a에 10

var b= a++ + 5; //b = 15를 먼저 계산 후 , a를 1증가 시켜 a = 11 이 저장

b는? 15

var c= 10;  //c에 10 저장

var d = ++c + 5; //c를 먼저 1증가 시키고, +5 하여 d에는 16이 저장

d는? 16

7. == 연산자, === 연산자 차이

10 == "10"은 true //==연산자는 문자형과 숫자형이 있으면 자동으로 변환하여 비교

10 === "10" 은 false //=== 연산자는 다른 자료형을 변환하지 않고 비교

8. 논리 연산자

- OR 연산자: ||  

- AND 연산자: && 

- NOT 연산자: !

자바스크립트 1~2강

 Doit! 자바스크립트 입문 요약 정리 

1. 자바스크립트란? 

-웹 사이트를 동적으로 개발 가능

-웹 브라우저에 실행되는 프로그램 개발 가능

-서버를 구성하고 서버용 프로그램 개발  가능

-모든 웹 브라우저에서 동작 가능

2. 작성법

<script>태그는 HTML  문서 어디에든 사용가능

<script>태그는 한  문서 안에 여러 개  사용 가능

<script>태그가 삽입된 위치에서 소스 실행

예)

<script>

        var heading = document.querySelector('#heading');

        heading.onclick = function() {

            heading.style.color = "red";

        }

 </script>

위와 같은 방식으로 하면 해당 HTML 문서에서 밖에 사용을 못하기에

js/change.js 파일에 아래와 같이 작성하고 (확장자 명을 js로 해야한다.)

var heading = document.querySelector('#heading');

heading.onclick = function() {

heading.style.color = "red";

}

아래와 같이 파일을 연결하여 사용한다.

<script src="js/change.js"></script>

3. 자바스크립트의 입력과 출력

-사용자 입력 값 받기

prompt(); - prompt("창 내용"); - prompt("창 내용", "기본값");

- 알림창으로 출력하기

alert("알림창 내용");

-웹 브라우저 화면에 출력

document.write(변수명);

-콘솔에 출력하기

console.log(변수명);

4. 자바스크립트 작성 규칙

- 대소문자를 구별하여 소스 작성

- 읽기 쉽게 들여쓰기

- 세미콜론(;)으로 문장을 구분하기

- 한 줄 주석 : //내용

- 여러 줄 주석 : /* 내용 */

- 이름의 첫 글자는 반드시 영문자, 밑줄(_), 달러 기호($)로만 시작 가능

- 단어 사이에 공백은 안됨

- 예약어는 식별자로 사용 불가능

JSP 11강 - 서블릿(Servlet)

1. 서블릿이란?

JSP가 나오기 전 자바로 웹 애플리케이션을 개발할 수 있도록 만든 기술.

서버 단에서 클라이언트의 요청을 받아 처리한 후 응답하는 역할.

-서블릿의 특징-

• 클라이언트의 요청에 대해 동적으로 작동하는 웹 애플리케이션 컴포넌트.
• MVC 모델에서 컨트롤러 역할
• 모든 메서드는 쓰레드로 동작
• javax.servlet.http 패키지의 HttpServlet 클래스를 상속받음

2. 서블릿 컨테이너

서블릿의 수명주기를 관리하고, 요청이 오면 스레드를 생성해 처리 해주고, 클라이언트의 요청을 받아서 응답을 보낼 수 있도록 통신 지원

• 통신 지원 : 클라이언트와 통신하려면 서버는 특정 포트로 소켓을 열고 I/O 스트림을 생성 해주는 과정을 API 제공으로 간단히 해결
• 수명주기 관리 : 서블릿을 인스턴스화한 후 초기화 하고, 요청에 맞는 적절한 메서드를 호출한다. 응답한 후에는 가비지 컬렉션을 통해 객체를 소멸시킨다.
• 멀티스레딩 관리 : 서블릿 요청들은 스레드를 생성해 처리합니다. 즉, 멀티스레드 방식으로 여러 요청을 동시에 처리
• 선언적인 보안 관리 및 JSP 지원 : 서블릿 컨테이너는 보안 기능을 지원한다.

3. 서블릿의 동작 방식

1. 클라이언트의 요청을 받는다.
2. 분석 후 요청을 처리할 서블릿을 찾는다.
3. 비즈니스 서비스 로직을 호출한다.
4. model 로부터 그 결과 값을 받는다
5. request 나 session 영역에 저장한 후 결과 값을 출력할 view를 선택한다.
6. view(JSP 페이지)에 결과 값을 출력한 후 요청한 클라이언트에 응답한다.

4. 서블릿 작성 규칙

1. javax.servlet, javax.servlet.http, java.io 패키지를 임포트 한다.
2. 서블릿 클래스는 반드시 public로 선언해야 하고, HttpServlet를 상속해야 한다.
3. 사용자 요청을 처리하기 위해 doGet() 메서드나 doPost() 메서드를 반드시 오버라이딩 해야 한다.
4. doGet() 또는 doPost() 메서드는 ServletException 과 IOException 예외를 던지도록 (throws) 선언한다.
5. doGet() 또는 doPost() 메서드를 호출할 때의 매개변수는 HttpServletRequest 와 HttpServletResponse 를 사용한다.

5. 서블릿 작성

1)  web.xml 에서 매핑

  <servlet>  <!-- 서블릿 등록 -->

    <servlet-name>서블릿명</servlet-name>

    <servlet-class>패키지를 포함한 서블릿 클래스명</servlet-class>

  </servlet>

  <servlet-mapping>  <!-- 서블릿과 요청명 매핑 -->

    <servlet-name>서블릿명</servlet-name>

    <url-pattern>클라이언트 요청 URL</url-pattern>

  </servlet-mapping>

예제) 요청을 처리할 서블릿 클래스

package servlet;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class HelloServlet extends HttpServlet {

    @Override

    protected void doGet(HttpServletRequest req, HttpServletResponse resp)

            throws ServletException, IOException {

        req.setAttribute("message", "서블릿은 web-inf에 등록하고 해야하네.");

        req.getRequestDispatcher("/13Servlet/HelloServlet.jsp").forward(req, resp);

    }

}

2) @WebServlet 애너테이션으로 매핑

package servlet;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet("/13Servlet/AnnoMapping.do")

public class AnnoMapping extends HttpServlet {

    @Override

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    req.setAttribute("message", "@WebServlet으로 매핑");

    req.getRequestDispatcher("/13Servlet/AnnoMapping.jsp").forward(req, resp);

    }

}

6. 서블릿의 수명주기 메서드

• @Postconstruct : 객체 생성 직후 호출, 애너테이션을 사용하므로 메서드명은 개발자가 정함
• init() : 서블릿의 초기화 작업을 수행하기 위해 호출, 최초 요청시 딱 한번만 호출
• service() : 클라이언트의 요청을 처리 하기 위해 호출
• destroy() : 서블릿이 새롭게 컴파일 되거나, 서버가 종료될 때 호출
• @PreDestroy : 서블릿 객체를 제거하는 과정에서 호출

예제) 수명 주기 메서드 동작 확인

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>LifeCycle.jsp</title>

</head>

<body>

    <script>

    function requestAction(frm, met) {

        if (met == 1) {

            frm.method = 'get';

        }

        else {

            frm.method = 'post';

        }

        frm.submit();

    }

    </script>

    <h2>서블릿 수명주기(Life Cycle) 메서드</h2>

    <form action="./LifeCycle.do">

        <input type="button" value="Get 방식 요청하기" onclick="requestAction(this.form, 1);" />

        <input type="button" value="Post 방식 요청하기" onclick="requestAction(this.form, 2);" />

    </form>

</body>

</html>

예제) 수명주기 메서드 동작 확인용 서블릿

package servlet;

import java.io.IOException;

import javax.annotation.PostConstruct;

import javax.annotation.PreDestroy;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet("/13Servlet/LifeCycle.do")

public class LifeCycle extends HttpServlet {

    @PostConstruct

    public void myPostConstruct() {

        System.out.println("myPostConstruct() 호출");

    }

    @Override

    public void init() throws ServletException {

        System.out.println("init() 호출");

    }

    @Override

    protected void service(HttpServletRequest req, HttpServletResponse resp)

            throws ServletException, IOException {

        System.out.println("service() 호출");

        super.service(req, resp);

    }        

    @Override

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) 

            throws ServletException, IOException {

        System.out.println("doGet() 호출");

        req.getRequestDispatcher("/13Servlet/LifeCycle.jsp").forward(req, resp);

    }

    @Override

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) 

            throws ServletException, IOException {

        System.out.println("doPost() 호출");

        req.getRequestDispatcher("/13Servlet/LifeCycle.jsp").forward(req, resp);

    }

    @Override

    public void destroy() {

        System.out.println("destroy() 호출");

    }

    @PreDestroy

    public void myPreDestroy() {

        System.out.println("myPreDestroy() 호출");

    }

}

JSP 10강 - 파일 업로드 및 다운로드

 파일 첨부가 가능한 자료실 형 게시판을 만들기 위해서는 파일을 업로드, 다운로드 기능을 구현해야 한다. 

1. 라이브러리 추가하기

http://servlets.com/cos/

에서 cos 를 다운 받고, WebContent/WEB-INF/lib에 추가 한다.

2. 화면(폼) 작성

enctype 속성은 서버로 전송할 때 인코딩 방식을 지정하는 속성으로 3가지가 있다.

appliction/x-www-form-urlencoded : 모든 문자를 서버로 전송하기 전에 인코딩 한다. 기본값

multipart/form-data : 모든 문자를 인코딩하지 않는다.<form>태그를 통해 파일을 서버로 전송할 때 주로 사용

text/plain : 공백 문자만 + 기호로 변환하고, 나머지는 인코딩하지 않는다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>

<head><title>FileUpload</title></head>

<script>

//입력값 검증용 자바스크립트

    function validateForm(form) { 

        if (form.name.value == "") {

            alert("작성자를 입력하세요.");

            form.name.focus();

            return false;

        }

        if (form.title.value == "") {

            alert("제목을 입력하세요.");

            form.title.focus();

            return false;

        }

        if (form.attachedFile.value == "") {

            alert("첨부파일은 필수 입력입니다.");

            return false;

        }

    }

</script>

<body>

    <h3>파일 업로드</h3>

    <span style="color: red;">${errorMessage }</span>

//method 속성은 post로, enctype 속성은 multipart/form-data로 지정해야 한다.

    <form name="fileForm" method="post" enctype="multipart/form-data"

          action="UploadProcess.jsp" onsubmit="return validateForm(this);">

        작성자 : <input type="text" name="name" value="머스트해브" /><br />

        제목 : <input type="text" name="title" /><br /> 

        카테고리(선택사항) : 

            <input type="checkbox" name="cate" value="사진" checked />사진 

            <input type="checkbox" name="cate" value="과제" />과제 

            <input type="checkbox" name="cate" value="워드" />워드 

            <input type="checkbox" name="cate" value="음원" />음원 <br /> 

//<input> 태그의 type 속성은 file로 지정한다.

        첨부파일 : <input type="file" name="attachedFile" /> <br />

        <input type="submit" value="전송하기" />

    </form>

</body>

</html>

3. 파일 업로드 및 폼값 처리

폼값을 받을 때는 확장 라이브러리에서 제공하는 MultipartRequest 클래스를 사용한다.

//import 생략

String saveDirectory = application.getRealPath("/Uploads");  // 저장할 디렉터리

int maxPostSize = 1024 * 1000;  // 파일 최대 크기(1MB)

String encoding = "UTF-8";  // 인코딩 방식

try {

    // 1. MultipartRequest 객체 생성

    MultipartRequest mr = new MultipartRequest(request, saveDirectory, maxPostSize, encoding);

    // 2. 새로운 파일명 생성

    String fileName = mr.getFilesystemName("attachedFile");  // 현재 파일 이름

    String ext = fileName.substring(fileName.lastIndexOf("."));  // 파일 확장자

    String now = new SimpleDateFormat("yyyyMMdd_HmsS").format(new Date());

    String newFileName = now + ext;  // 새로운 파일 이름("업로드일시.확장자")

    // 3. 파일명 변경(서버의 운영체제에 따라 경로 표현이 다르기에 이렇게 설정)

    File oldFile = new File(saveDirectory + File.separator + fileName); 

    File newFile = new File(saveDirectory + File.separator + newFileName);

    oldFile.renameTo(newFile);

    // 4. 다른 폼값 받기

    String name = mr.getParameter("name");

    String title = mr.getParameter("title");

    String[] cateArray = mr.getParameterValues("cate");

    StringBuffer cateBuf = new StringBuffer();

    if (cateArray == null) {

        cateBuf.append("선택 없음");

    }

    else {

        for (String s : cateArray) {

            cateBuf.append(s + ", ");

        }

    }

    // 5. DTO 생성

    MyfileDTO dto = new MyfileDTO();

    dto.setName(name);

    dto.setTitle(title);

    dto.setCate(cateBuf.toString());

    dto.setOfile(fileName);

    dto.setSfile(newFileName);

    // 6. DAO를 통해 데이터베이스에 반영

    MyfileDAO dao = new MyfileDAO();

    dao.insertFile(dto);

    dao.close();

    // 7. 파일 목록 JSP로 리디렉션

    response.sendRedirect("FileList.jsp");

}

catch (Exception e) {

    e.printStackTrace();

    request.setAttribute("errorMessage", "파일 업로드 오류");

    request.getRequestDispatcher("FileUploadMain.jsp").forward(request, response);

}

%>

4. 파일 다운로드

//import 생략

String saveDirectory = application.getRealPath("/Uploads"); //다운로드 파일 위치

String saveFilename = request.getParameter("sName"); //저장된 파일명

String originalFilename = request.getParameter("oName"); //원본 파일명

try {

    // 파일을 찾아 입력 스트림 생성

    File file = new File(saveDirectory, saveFilename);  

    InputStream inStream = new FileInputStream(file);

    

    // 한글 파일명 깨짐 방지

    String client = request.getHeader("User-Agent");

    if (client.indexOf("WOW64") == -1) {

        originalFilename = new String(originalFilename.getBytes("UTF-8"), "ISO-8859-1");

    }

    else {

        originalFilename = new String(originalFilename.getBytes("KSC5601"), "ISO-8859-1");

    }

   

// 파일 다운로드용 응답 헤더 설정 

    response.reset(); 

//다운로드 창을 위한 콘텐츠 타입 지정 (octet-stream 은 8비트 단위의 바이너리 데이터)

    response.setContentType("application/octet-stream"); 

//파일 다운로드 창이 뜰 때 원본 파일명이 기본으로 입력 되도록 설정

    response.setHeader("Content-Disposition", "attachment; filename=\"" +originalFilename + "\""); 

    response.setHeader("Content-Length", "" + file.length() );

    

    // 출력 스트림 초기화

    out.clear();  //출력 스트림 중복을 막기 위해 현재 것을 초기화

    

    // response 내장 객체로부터 새로운 출력 스트림 생성

    OutputStream outStream = response.getOutputStream();   

    // 출력 스트림에 파일 내용 출력

    byte b[] = new byte[(int)file.length()];

    int readBuffer = 0;    

    while ( (readBuffer = inStream.read(b)) > 0 ) {

        outStream.write(b, 0, readBuffer);

    }

    // 입/출력 스트림 닫음

    inStream.close(); 

    outStream.close();

}

catch (FileNotFoundException e) {

    JSFunction.alertBack("파일을 찾을 수 없습니다.", out);

}

catch (Exception e) {

    JSFunction.alertBack("예외가 발생하였습니다.", out);

}

%>

JSP 9강 - JSP 표준 태그 라이브러리(JSTL)

 JSTL 이란? 

스크립틀릿을 사용하지 않고도 제어문, 반복문 등을 처리해주는 태그를 모아 표준으로 만든 라이브러리.

JSTL을 사용하면 스크립트릿 없이 태그만으로 작성할 수 있다.

JSTL 형식

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="JSTL사용시 태그 앞에 붙일 접두어" uri="태그 라이브러리 URI 식별자"%>

1. 코어(Core) 태그 - 변수 선언, 조건문, 반복문 등 기본이 되는 태그

set - EL 에서 사용할 변수를 설정 

<c:set var="변수명" value="값" scope="영역" />

<c:set target="var로 설정한 변수명" property="객체의 속성명" value="속성값" />

remove - 설정한 변수를 제거

<c:remove  var="변수명" scope="영역" />

if - 단일 조건문을 주로 처리. else 문은 없음

<c:if test="조건" var="변수명" scope="영역">

    조건이 true 일 때 출력할 문장

</c:if>

choose - 다중 조건을 처리할 때 사용. 하위에 when~otherwise 태그가 있음

<c:choose>

    <c:when test="조건1">조건1을 만족하는 경우</c:when>

    <c:when test="조건2">조건2을 만족하는 경우</c:when>

    <c:otherwise>아무 조건도 만족하지 않는 경우</c:otherwise>

</c:choose>

forEach - 반복문을 처리할 때 사용

<c:forEach var="변수명" begin="시작값" end="마지막값" step="증가값" />

<c:forEach var="변수명" items="컬렉션 혹은 배열" />

forTokens - 구분자로 분리된 각각의 토큰을 처리할 때 사용

<c:forTokens items="문자열" delims="문자열 구분자" var="변수명" />

import - 외부 페이지를 삽입할 때 사용

<c:import url="페이지 경로, URL" scope="영역" />

<c:import url="페이지 경로, URL" var="변수명" scope="영역" />

${ 변수명 }

<c:import url="페이지 경로, URL?매개변수1=값1" >

    <c:param name="매개변수2" value="값2" />

</c:import>

redirect - 지정한 경로로 이동

<c:redirect url="이동할 경로 및 URL" />

url - 경로를 설정할 때 사용

<c:url value="설정한 경로" scope="영역" var="변수명" />

${ 변수명 } //원하는 위치에 URL 삽입

out - 내용을 출력할 때 사용

<c:out value="출력할 변수" default="기본값" escapeXml="특수문자 처리 유무" />

catch - 예외 처리에 사용

<c:catch var="변수명">

    실행코드

</c:catch>

2. 국제화(Formatting) 태그 - 국가별로 다양한 언어, 날짜, 시간, 숫자 형식을 설정할 때 사용

formatNumber - 숫자 포맷을 설정

parseNumber - 문자열을 숫자 포맷으로 변환

formatDate - 날짜나 시간의 포맷을 설정

parseDate - 문자열을 날짜 포맷으로 변환

setTimeZone - 시간대 설정 정보를 변수에 저장

timeZone - 시간대를 설정

setLocale - 통화 기호나 시간대를 설정한 지역에 맞게 표시

requestEncoding - 요청 매개변수의 문자 셋을 설정

예제) 숫자 포멧팅 및 파싱 태그 사용하기

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>       

<html>

<head><title>JSTL - fmt 1</title></head>

<body>

    <h4>숫자 포맷 설정</h4>

    <c:set var="number1" value="12345" />

    콤마 O : <fmt:formatNumber value="${ number1 }" /><br />

    콤마 X : <fmt:formatNumber value="${ number1 }" groupingUsed="false" /><br />

    <fmt:formatNumber value="${number1 }" type="currency" var="printNum1" />

    통화기호 : ${ printNum1 } <br />

    <fmt:formatNumber value="0.03" type="percent" var="printNum2" />

    퍼센트 : ${ printNum2 }

    

    <h4>문자열을 숫자로 변경</h4>

    <c:set var="number2" value="6,789.01"  /> 

    <fmt:parseNumber value="${ number2 }" pattern="00,000.00" var="printNum3" /> 

    소수점까지 : ${ printNum3 } <br />

    <fmt:parseNumber value="${ number2 }" integerOnly="true" var="printNum4" /> 

    정수 부분만 : ${ printNum4 }

    <c:set var="today" value="<%= new java.util.Date() %>" />

    

    <h4>날짜 포맷</h4>

    full : <fmt:formatDate value="${ today }" type="date" dateStyle="full"/> <br /> 

    short : <fmt:formatDate value="${ today }" type="date" dateStyle="short"/> <br />

    long : <fmt:formatDate value="${ today }" type="date" dateStyle="long"/> <br />

    default : <fmt:formatDate value="${ today }" type="date" dateStyle="default"/>

    <h4>시간 포맷</h4> 

    full : <fmt:formatDate value="${ today }" type="time" timeStyle="full"/> <br /> 

    short : <fmt:formatDate value="${ today }" type="time" timeStyle="short"/> <br />

    long : <fmt:formatDate value="${ today }" type="time" timeStyle="long"/> <br />

    default : <fmt:formatDate value="${ today }" type="time" timeStyle="default"/>

    

    <h4>날짜/시간 표시</h4>    

    <fmt:formatDate value="${ today }" type="both" dateStyle="full" timeStyle="full"/> 

    <br />

    <fmt:formatDate value="${ today }" type="both" pattern="yyyy-MM-dd hh:mm:ss"/> 

    

    <h4>타임존 설정</h4>

    <fmt:timeZone value="GMT"> 

        <fmt:formatDate value="${ today }" type="both" dateStyle="full" timeStyle="full"/>

        <br />    

    </fmt:timeZone>

    <fmt:timeZone value="America/Chicago">

        <fmt:formatDate value="${ today }" type="both" dateStyle="full" timeStyle="full"/>

    </fmt:timeZone>

    

    <h4>로케일 설정</h4>    

    <c:set var="today" value="<%=  new java.util.Date() %>"/>

    

    한글로 설정 : <fmt:setLocale value="ko_kr" />

    <fmt:formatNumber value="10000" type="currency" /> /

    <fmt:formatDate value="${ today }" /><br />

    일어로 설정 : <fmt:setLocale value="ja_JP" />

    <fmt:formatNumber value="10000" type="currency" /> /

    <fmt:formatDate value="${ today }" /><br />

    

    영어로 설정 : <fmt:setLocale value="en_US" />

    <fmt:formatNumber value="10000" type="currency" /> /

    <fmt:formatDate value="${ today }" /><br />   

</body>

</html>

결과

JSP 8강 - 표현 언어(EL)

표현 언어란? 변수의 값을 출력할 때 사용하는 스크립트 언어

1. 표현 언어가 제공하는 기능

• JSP 내장 객체의 영역에 담긴 속성을 사용할 수 있음
• 산술 연산, 비교 연산, 논리 연산이 가능
• 자바 클래스에 정의된 메서드를 호출 가능
• 표현 언어만의 객체를 통해 JSP와 동일한 기능을 수행 가능

2. EL의 기본 사용법

${ 영역에 저장된 속성 }

JSP에서 생성한 변수를 접근하려면, 반드시 영역에 저장 후 사용해야 한다.

JSP 스크립트 요소(선언부, 표현식, 스크립틀릿)에서는 사용할 수 없다.

EL에서 객체를 표현할 때는 . 이나 []를 사용한다. []를 사용할 때 속성명은 ""와 '' 모두 사용 가능

(예) ${ param.name }

     ${ param["name"] }

     ${ param['name'] }

3. EL에서 4가지 영역에 접근하기 위한 내장 객체

• pageScope : page 영역에 저장된 속성값 읽어옴.
• requestScope : request영역에 저장된 속성값 읽어옴.
• sessionScope : session 영역에 저장된 속성값 읽어옴.
• aplicationScope : application 영역에 저장된 속성값 읽어옴.

4. 폼 값 처리하기

param : request.getParmeter("매개변수명")과 동일하게 요청 매개변수의 값을 받아온다.

paramValues : request.getParameterValues("매개변수명")와 동일하게 요청 매개변수의 값을 문자열 배열로 받아온다. 주로 다중 선택이 가능한 checkbox를 통해 전달된 폼 값을 받을 때 사용.

5. 객체 전달하기

폼으로는 객체를 전달 할 수 없기에 영역을 사용한다.

예제) 객체 전달 부분

<%@ page import="common.Person"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<html>

<meta charset="UTF-8">

<head><title>표현 언어(EL) - 객체 매개변수</title></head>

<body>

    <%

    request.setAttribute("personObj", new Person("홍길동", 33));

    request.setAttribute("stringObj", "나는 문자열");

    request.setAttribute("integerObj", new Integer(99));

    %>

    <jsp:forward page="ObjectResult.jsp">

        <jsp:param value="10" name="firstNum" />

        <jsp:param value="20" name="secondNum" />

    </jsp:forward>

</body>

</html>

예제) 전달 받은 객체 확인 부분

<%@ page import="common.Person"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<html>

<meta charset="UTF-8">

<head><title>표현 언어(EL) - 객체 매개변수</title></head>

<body>  

    <h2>영역을 통해 전달된 객체 읽기</h2>

    <ul>

        <li>Person 객체 => 이름 : ${ personObj.name }, 나이 : ${ personObj.age }</li>

        <li>String 객체 => ${ requestScope.stringObj }</li>

        <li>Integer 객체 => ${ integerObj }</li> 

    </ul>

    <h2>매개변수로 전달된 값 읽기</h2>

    <ul>

        <li>${ param.firstNum + param['secondNum'] }</li>  

        <li>${ param.firstNum } + ${param["secondNum"] }</li> 

    </ul>

</body>

</html>

영역에서는 모든 객체가 Object 타입으로 저장되기에 읽어올 때는 반드시 형 변환 후 사용하고, 게터로 멤버 변수의 값을 가져온다. 

한편 EL 사용하면 형 변환이 필요 없고, 게터 호출 대신 멤버 변수 이름만 쓰면 값을 출력 할 수 있다.

6. 쿠키, HTTP 헤더, 컨텍스트 초기화 매개변수 출력하기

EL은 쿠키나 헤더 값을 읽을 수 있도록 다음의 내장 객체를 제공한다.

• cookie : 쿠키를 읽을 때 사용
• header : request.getHeader(헤더명)와 동일하게 헤더값을 읽을 때 사용
• headerValues : request.getHeaders(헤더명)와 동일하게 헤더값을 배영 형태로 읽을 때 사용
• initParam : web.xml 에 설정한 컨텍스트 초기화 매개변수를 읽을 때 사용
• pageContext : JSP의 pageContext 내장 객체와 동일한 역할

예제) 쿠키, HTTP 헤더, 컨텍스트 초기화 매개변수 출력하기

<%@ page import="utils.CookieManager"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

CookieManager.makeCookie(response, "ELCookie", "EL좋아요", 10);

%>    

<html>

<meta charset="UTF-8">

<head><title>표현 언어(EL) - 그 외 내장 객체</title></head>

<body>

    <h3>쿠키값 읽기</h3>

    <li>ELCookie값 : ${ cookie.ELCookie.value }</li>

    

    <h3>HTTP 헤더 읽기</h3>

    <ul>

        <li>host : ${ header.host }</li>

        <li>user-agent : ${ header['user-agent'] }</li>

        <li>cookie : ${ header.cookie }</li>

    </ul>

    

    <h3>컨텍스트 초기화 매개변수 읽기</h3>

    <li>OracleDriver : ${ initParam.OracleDriver }</li>

    <h3>컨텍스트 루트 경로 읽기</h3>

    <li>${ pageContext.request.contextPath }</li>

</body>

</html>

7. 컬렉션 사용하기

예제) EL로 컬렉션 이용하기

<%@ page import="java.util.HashMap"%>

<%@ page import="java.util.Map"%>

<%@ page import="java.util.List"%>

<%@ page import="java.util.ArrayList"%>

<%@ page import="common.Person"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<html>

<meta charset="UTF-8">

<head><title>표현 언어(EL) - 컬렉션</title></head>

<body>

<h2>List 컬렉션</h2>

<%

List<Object> aList = new ArrayList<Object>();

aList.add("청해진");

aList.add(new Person("장보고", 28));

pageContext.setAttribute("Ocean", aList);

%>

<ul>

    <li>0번째 요소 : ${ Ocean[0] }</li>

    <li>1번째 요소 : ${ Ocean[1].name }, ${ Ocean[1].age }</li>

    <li>2번째 요소 : ${ Ocean[2] }<!--출력되지 않음--></li>

</ul>

<h2>Map 컬렉션</h2>

<%

Map<String, String> map = new HashMap<String, String>();

map.put("한글", "훈민정음");

map.put("Eng", "English");

pageContext.setAttribute("King", map);

%>

<ul>

    <li>영문 Key : ${ King["Eng"] }, ${ King['Eng'] }, ${ King.Eng }</li>

    <li>한글 Key : ${ King["한글"] }, ${ King['한글'] }, \${King.한글 }<!--에러--></li>

</ul>

</body>

</html>

8. EL의 연산자들

1) 할당 연산자(EL 3.0 부터는 = 연산자로 변수에 값을 할당 가능)

• ${ number = 10 } //할당과 동시에 출력
• ${ number = 10; '' } //할달만 되고 출력은 되지 않음

2) 비교 연산자

• > 또는 gt : ~보다 크다
• >= 또는 ge : ~보다 크거나 같다
• < 또는 lt : ~보다 작다
• <= 또는 le : ~보다 작거나 같다
• == 또는 eq : 같다
• != 또는 ne : 같지 않다.

3) 논리 연산자

• && 또는 and : 논리 and
• || 또는 or : 논리 or
• | 또는 not : 논리 not

4) empty 연산자

• null
• 빈 문자열
• 길이가 0인 배열
• size가 0인 컬렉션

5) 삼항 연산자(자바의 삼항 연산자와 사용법이 동일)

• ${ 조건 ? "true일 때 선택" : "fales일 때 선택" }

JSP 7강 - 액션 태그(Action Tag)

 1. 액션 태그란?

JSP 코드를 HTML 태그와 같은 형태로 간단히 사용할 수 있는 태그.

액션 태그는 일반 JSP 코드 보다 HTML에 더 조화롭게 스며들고 간결함.

액션 태그의 특징

• XML 문법을 따름
• 반드시 종료 태그를 사용해야 함
• 액션 태그 사이에 주석을 사용하면 에러가 발생함
• 액션 태그에 속성 값을 부여할 때는 표현식 <%= %>을 사용할 수 있음

액션 태그는 용도에 따르게 4가지로 나눔

• <jsp:include> : 외부 파일을 현재 파일에 포함 시킨다.
• <jsp:forward> : 다른 페이지로 요청을 넘긴다.
• <jsp:useBean>,<jsp:setProperty>,<jsp:getProperty> : 자바 빈즈를 생성, 값을 설정/추출한다.
• <jsp:param> : 인클루드나 포워드시 매개변수를 전달한다.

2. <jsp:include> : 외부 JSP 파일을 현재 JSP 파일로 포함시키는 기능

---include 지시어와 <jsp:include> 액션 태그 비교---

include 지시어

형식 : <%@include file="포함할 파일의 경로"%>

표현식 : 표현식 사용 불가

포함 방식 : 페이지 자체를 현재 페이지로 포함시킨 후 컴파일 진행

변수 : 포함시킨 파일에서 생성한 변수 사용 진행

page 영역 : 공유됨

request 영역 : 공유됨

<jsp:include> 액션 태그

형식 : <jsp:include page="포함할 파일의 경로" />

표현식 : 표현식 사용 가능

포함 방식 : 실행의 흐름을 포함시킬 페이지로 이동 후 실행한 결과를 현재 페이지에 포함

변수 : 포함시킨 파일에서 생성한 변수 사용 불가

page 영역 : 공유되지 않음

request 영역 : 공유됨

--예제 코드--

<html>

<head><title>지시어와 액션 태그 동작 방식 비교</title></head>

<body>

    <h2>지시어와 액션 태그 동작 방식 비교</h2>

    <!-- 지시어 방식 -->

    <h3>지시어로 페이지 포함하기</h3>

    <%@ include file="./inc/OuterPage1.jsp"%>

    <%--@ include file="<%=outerPath1OuterPage1%>" --%>

    <p>외부 파일에 선언한 변수 : <%=newVar1%></p>

    <!-- 액션 태그 방식 -->

    <h3>액션 태그로 페이지 포함하기</h3>

    <jsp:include page="./inc/OuterPage2.jsp" />

    <jsp:include page="<%=outerPath2%>" />

    <p>외부 파일에 선언한 변수 : <%--=newVar2 --%></p>

</body>

</html>

3. <jsp:forward> : 현재 페이지에 들어온 요청을 다음 페이지로 보내는 기능

<jsp:forward> 액션 태그를 만나기까지의 모든 출력을 제거하고 포워드할 페이지로 요청을 전달한다. 

포워드는 버퍼와 밀접하며, 버퍼를 사용하지 않으면 포워드는 사용할 수 없다.

포워드는 요청 전달이 목적이므로 이동 된 페이지와 request 영역을 공유 한다. 

그리고 URL이 변경되지 않는다.

--예제 코드( 포워드 하는 페이지) --

<%

pageContext.setAttribute("pAttr", "김유신"); 

request.setAttribute("rAttr", "계백"); 

%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>액션 태그 - forward</title>

</head>

<body>

    <h2>액션 태그를 이용한 포워딩</h2> 

    <jsp:forward page="/07ActionTag/ForwardSub.jsp" /> 

</body>

</html>

--예제 코드( 포워드 되는 페이지 ForwardSub.jsp) --

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>액션 태그 - forward</title>

</head>

<body>

    <h2>포워드 결과</h2>

    <ul>

        <li>

            page 영역 : <%= pageContext.getAttribute("pAttr") %>

        </li>

        <li>

            request 영역 : <%= request.getAttribute("rAttr") %> 

        </li>

    </ul>

</body>

</html>

4. <jsp:useBean>,<jsp:setProperty>,<jsp:getProperty>: 자바빈즈는 데이터를 저장하기 위한 멤버 변수(속성)과 세터/게터 메스드로만 이루어진 클래스

---자바빈즈의 개발 규약---

• 자바빈즈는 기본 패키지 이외의 패키지에 속해 있어야 한다.
• 멤버 변수(속성, 프로퍼티)의 접근 지정자는 private 으로 선언한다.
• 기본 생성자가 있어야 한다.
• 멤버 변수에 접근할 수 있는 게터/세터 메서드가 있어야 한다.
• 게터/세터 메서드의 접근 지정자는 public 으로 선언한다.

1) 자바빈즈 생성

<jsp:useBean id="자바빈즈 이름" class="사용할 패키지와 클래스명" scope="저장될 영역" />

• id: 자바빈지 객체의 이름을 지정한다. 같은 id로 이미 생성된 객체가 있다면 해당 객체를 사용하고, 아직 없다면 새로 생성한다.
• class: 사용하려는 자바빈즈 객체의 실제 패키지명과 클래스명을 지정한다. 
• scope: 자바빈즈가 저장될 내장 객체 영역을 지정한다. 생략하면 기본값인 page 영역이 지정된다. 

2) 멤버 변수 값 설정

<jsp:setProperty name="자바빈즈 이름" property="속성명(멤버 변수) value="설정할 값"/>

• name: <jsp:uesBean>의 id 속성에 지정한 자바빈즈의 이름을 지정한다.
• property: 자바빈즈의 멤버 변수명을 지정한다. 이름을 명시하는 대신 property="*" 라고 쓰면 form의 하위 요소와 일치하는 자바빈즈의 모든 속성에 전송한 값이 설정된다.
• value: 멤버 변수에 설정할 값을 지정한다.

3) 멤버 변수 값 추출

<jsp:getProperty name="자바빈즈 이름" property="속성명(멤버 변수) />

각 속성의 의미는 위와 같다.

--예제코드--

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>액션 태그 - UseBean</title>

</head>

<body>

    <h2>useBean 액션 태그</h2>

    <h3>자바빈즈 생성하기</h3>

    <jsp:useBean id="person" class="common.Person" scope="request" />

    <h3>setProperty 액션 태그로 자바빈즈 속성 지정하기</h3>

    <jsp:setProperty name="person" property="name" value="임꺽정" /> 

    <jsp:setProperty name="person" property="age" value="41" /> 

    <h3>getProperty 액션 태그로 자바빈즈 속성 읽기</h3>

    <ul>

        <li>이름 : <jsp:getProperty name="person" property="name" /></li> 

        <li>나이 : <jsp:getProperty name="person" property="age" /></li> 

    </ul>

</body>

</html>

5. <jsp:param> : 다른 페이지에 값을 전달해주는 액션 태그. 전달할 수 있는 값은 String 뿐. 다른 타입의 객체를 전달 할 때는 내장 객체의 영역을 이용해야 한다.

1) 포워드 되는 페이지로 매개변수 전달하기

<%

request.setCharacterEncoding("UTF-8"); //한글 전달을 위해 UTF-8로 설정

String pValue = "방랑시인";

%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>액션 태그 - param</title>

</head>

<body>

    //request 영역에 저장할 자바빈즈 생성

    <jsp:useBean id="person" class="common.Person" scope="request" />

    //멤버 변수 name, age 값의 설정

    <jsp:setProperty name="person" property="name" value="김삿갓" /> 

    <jsp:setProperty name="person" property="age" value="56" /> 

    //ParamForward.jsp 으로 포워딩 하면서 쿼리 스트링으로 param1 매개변수 함께 전달

    <jsp:forward page="ParamForward.jsp?param1=김병연"> 

          //jsp:param 속성으로 param2와 param2 매개변수 전달

        <jsp:param name="param2" value="경기도 양주" />

        <jsp:param name="param3" value="<%=pValue%>" />

    </jsp:forward> 

</body>

</html>

2) 포워드 되는 페이지 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>액션 태그 - param</title>

</head>

<body>

     //이전 페이지에서 request 영역에 저장한 자바빈즈를 가져온다.

    <jsp:useBean id="person" class="common.Person" scope="request" /> 

    <h2>포워드된 페이지에서 매개변수 확인</h2>

    <ul>

        //멤버 변수 값을 가져와 출력한다.

        <li><jsp:getProperty name="person" property="name" /></li> 

        <li>나이 : <jsp:getProperty name="person" property="age" /></li>

        

        // 쿼리 스트링으로 전달된 매개 변수 출력

        <li>본명 : <%= request.getParameter("param1") %></li> 

        //<jsp:param> 액션 태그로 전달된 매개 변수 출력

        <li>출생 : <%= request.getParameter("param2") %></li>

        <li>특징 : <%= request.getParameter("param3") %></li>

    </ul>

</body>

</html>