초간단 계산기
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>초간단 계산기</title>
</head>
<body>
<h1>계산기</h1>
<form action="calProc">
<p>Num 1 : <input type="number" name="num1" value="0"></p>
<p>Num 2 : <input type="number" name="num2" value="0"></p>
<p>
<button type="button">+</button>
<button type="button">-</button>
<button type="button">*</button>
<button type="button">/</button>
<button type="button">%</button>
</p>
<input type="hidden" name="op" id="op"> <%--연산자를 넣어서 넘길 예정--%>
<p><input type="submit" value="전송"></p>
</form>
</body>
<script>
const btns = document.getElementsByTagName("button");
console.log(btns);
const opInput = document.getElementById("op");
//각 버튼 처리
btns[0].addEventListener("click", function (){
opInput.value = "+";
})
btns[1].addEventListener("click", function (){
opInput.value = "-";
})
btns[2].addEventListener("click", function (){
opInput.value = "*";
})
btns[3].addEventListener("click", function (){
opInput.value = "/";
})
btns[4].addEventListener("click", function (){
opInput.value = "%";
})
</script>
</html>
JSP 페이지 구성요소
1) 지시자(Directive)
JSP 페이지에 대한 설정 정보를 지정할 때 사용
- page : 기본적으로 필요한 지시자, 문서 타입이나 라이브러리를 포함하도록 지시
- taglib : 태그라이브러리, jstl을 사용하기 위한 지시자, prefix, url 두가지
- include : 다른 jsp 페이지를 포함하여 하나의 페이지를 작성할 때 사용하는 지시자
헤더부분에 넣으라고 지시할 수 있는 지사자, 잘 사용하지 않는다.
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
2) 스크립트릿(Scriptlet)
자바 코드 작성 영역, '<%' 와 '%>' 사이에 작성
<%
int a = 10;
int b = 30;
String str = "강아름";
System.out.println("콘솔에 출력!");
out.println("자바 코드에서 출력!");
Date today = new Date();
%>
3) 선언부(Declaration)
메소드 작성 영역, '<%!' 와 %'>' 사이에 작성
<%!
// 선언부(Declaration)
public int add(int a, int b){
return a + b;
}
%>
4) 표현식(Expression)
변수 값 출력 용 영역, '<%=' 와 %'>' 사이에 작성
5) EL(Expression Language)
Expression 대신 사용, 데이터 출력
6) Tag Library
자바의 제어문(if, for 등)을 태그 형식으로 제공하는 라이브러리
jsp -> 자바코드 부분 발췌 -> 클래스화(서블릿클래스) -> 컴파일(오브젝트화) -> 실행 -> html로 생성 -> 전달
'공부기록 > Spring' 카테고리의 다른 글
10월 19일 MVC 패턴이란? (전자정부프레임워크) (0) | 2023.10.19 |
---|---|
5월 31일 Spring - thymeleaf, JPA (0) | 2023.05.31 |
5월 9일 (2) Spring - 출력 (0) | 2023.05.09 |
5월 9일 (1) Spring - 데이터 전송 방식 (0) | 2023.05.09 |
5월 8일 (2) Spring - Java로 spring 사용하기 html 연결 (0) | 2023.05.08 |