728x90
반응형
오전에는 jsp로 프로그램 만드는 법을 간단하게 배웠고, 오후에 예제로 연습까지 해봤다.
jsp 생명주기에 대해서도 먼저 배웠는데, 다시 좀 찾아봐야 할 것 같다.
servlet 생명주기는 다음과 같다
1. 요청이 오면, Servlet 클래스가 로딩되어 요청에 대한 Servlet 객체가 생성된다
2. 서버는 init() 메소드를 호출해서 Servlet을 초기화 한다.
3. service() 메소드를 호출해서 Servlet이 브라우저의 요청을 처리하도록 한다.
4. service() 메소드는 doGet(), doPost()를 호출한다.
5. 서버는 destroy()메소드를 호출하여 Servlet을 제거한다
jsp도 서블릿을 사용하기 때문에 같은 생명주기를 갖는다.
JSP는 HTML과 JAVA를 같이 쓰기 때문에 코드의 구분이 꼭 필요하다
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%--
HTML + Java
Java영역
1) <% %> : 스크립트릿 => 일반 자바 코딩 (자바 문법 사용)
2) <%= %> : 표현식 => 화면에 출력 (;을 사용하지 않는다)
3) <%! %> : 선언식 => 메소드 선언, 전역변수
--%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>
<h1>구구단</h1>
<table width=700 border=1 bordercolor=black>
<tr bgcolor=#ccffcc>
<%
for(int i=2; i<=9; i++)
{
%>
<th><%= i+"단" %></th>
<%
}
%>
</tr>
<%
for(int i=1; i<=9; i++)
{
%>
<tr></tr>
<%
for(int j=2; j<=9; j++)
{
%>
<td align=center><%= j+"*"+i+"="+j*i %></td>
<%
}
%>
</tr>
<%
}
%>
</table>
</center>
</body>
</html>자바를 코딩할때는 꼭 <%%> 안에 써줘야한다....
대박미친완전 귀찮다 ㅎㅎ
여튼 위의 코드는 JSP로 구구단을 만들어준 모양이다.
창을 띄우면 이렇다.
다음은 JavaScript 를 배웠다...
<!--
함수
클래스 안에 들어가면 메소드 (종속)
클래스 안에 들어가 있지 않고 독립적으로 사용되면 함수
형식) function 함수명(매개변수...)
{
매개변수는 데이터형을 사용하지 않는다(변수명)
}
= function post(zipcode, addr)
= 숫자(Number) => 정수, 실수
= 문자(String)
= Array
= Object
const 함수명=function(){
}
=> function, return을 생략이 가능
const 함수명=()=>{
}
=> DOM을 이용하는 프로그램 (DOMScript)
==== Document Object Model (태그를 제어하는 프로그램)
태그 추가, 속성 변경, 데이터 변경, 입력값 읽기
태그를 선택
= document.getElementById() => id속성
= document.getElementClassName() => class속성
======= 태그
= document.querySelector();
===============
'tr', #아이디명, .클래스명
=> 이벤트
click, keyup, keydown, hover, mouseover, mouseout
=====
=> 라이브러리 (Jquery, Ajax, VueJS, ReactJS)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
let h1=document.querySelector('#b');
h1.style.backgroundColor='green';
}
</script>
</head>
<body>
<h1>Java</h1>
<h1 id="b">Oracle</h1>
<h1>HTML</h1>
<h1 class="red">CSS</h1>
<h1>JavaScript</h1>
<h1 class="blue">JSP</h1>
<h1>Spring</h1>
<h1 class="blue">VueJS</h1>
<h1>ReactJS</h1>
<h1>Java</h1>
</body>
</html>자바스크립트는 태그를 선택해서 동적인 변화를 만들어주는 언어이기 때문에 querySelector를 적절하게 잘 다루는 법을 익혀야 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
class Sawon{
// 생성자 함수 => 멤버변수 설정
constructor(name, sex, age)
{
// 멤버변수 설정
this.name=name;
this.sex=sex;
this.age=age;
}
setName(name)
{
this.name=name;
}
getName()
{
return this.name;
}
print()
{
console.log("이름:"+this.name);
console.log("성별:"+this.sex);
console.log("나이:"+this.age);
}
}
let sa=new Sawon("홍길동", "남자", 25);
sa.setName("이제노")
sa.print();
console.log("이름:"+sa.name);
console.log("성별:"+sa.sex);
console.log("나이:"+sa.age);
</script>
</head>
<body>
</body>
</html>생성자 함수 만드는것도 가능. 단 매개변수 사용할때 데이터형을 써주지 않는다. 자바와 다른 점이다.
<!--
JQuery => Ajax
=> selector
태그, 아이디, 클래스 ..... (CSS)
=> 사용법
<p id="pp"></p>
자바스크립트
= document.getElementById("pp")
= document.querySelector("#pp")
JQuery
$('#pp') ==> ID일 경우
$('.class명') ==> class명 처리
$('p') ==> 태그
자바스크립트의 계층구조
브라우저 => 출력 공간 => 입출력창 전체 => 입력창
window document form input
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 자바스크립트 import -->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
// window.onload=function(){}
/*
* $(document).reday(function(){})
=============== 생략이 가능
*/
$(function(){
// 제어할 태그를 가지고 온다
$('h1').css("color", "yellow");
$('#red').css("color", "red");
$('.blue').css("color", "blue");
})
</script>
</head>
<body>
<h1 id="red">자바</h1>
<h1>오라클</h1>
<h1 class="blue">자바스크립트</h1>
</body>
</html>자바스크립트는 태그 제어 하는데 코드가 좀 너무 길어지기 때문에 Jquery를 이용해서 선택해주는 방법이 있다.
$('태그')를 해주면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
img{
width:19%;
height:300px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function(){
/*$('img').css("opacity", .3); // 0.0~1.0 (투명 모드)
$('img').hover(function(){
$(this).css('opacity',1);
},function(){
$(this).css('opacity',.3);
})*/
$('img:eq(0)').css('border', '2px solid black');
/*
nth-child => eq => 0번부터 시작
*/
$('img').hover(function(){
$(this).css('opacity', .3);
}, function(){
$(this).css('opacity', 1);
})
})
</script>
</head>
<body>
<img src="1.jpg">
<img src="2.png">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
</body>
</html>활용은 이런식으로 해주면 된다. this는 마우스가 가르키는 영역을 의미하고, function(){}다음에 ,를 찍고 다른 function을 선언하면 조건문에서의 else와 같은 효과를 갖는다.
여기 hover에서는 마우스를 가져갔을때 (if), 아닐때 (else)로 나눠서 처리를 해줬다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('input[type=button]').click(function(){
let no=$(this).attr("data");
$('#image').html('<img src='+no+'.jpg width=400, height=300>');
})
})
</script>
</head>
<body>
<input type="button" value="1번그림" data="1">
<input type="button" value="2번그림" data="2">
<input type="button" value="3번그림" data="3">
<input type="button" value="4번그림" data="4">
<input type="button" value="5번그림" data="5">
<p id="image"></p>
</body>
</html>data라는 속성을 사용자가 임의로 만들어서 사용할 수도 있다.
728x90
반응형
'programming > Gukbi' 카테고리의 다른 글
| 국비 교육 58일차 - 답글형 게시판 만들기 (0) | 2021.03.19 |
|---|---|
| 국비 교육 57일차 - request&response (0) | 2021.03.19 |
| 국비 교육 55일차 - 화면 UI 편집, javaScript (0) | 2021.03.17 |
| 국비 교육 54일차 - JavaScript (0) | 2021.03.15 |
| 국비 교육 53일차 - Trigger (0) | 2021.03.14 |
