160406: 18회차
종료하기 전 티스토리 네이버 로그아웃 할 것
1. 툴
동일
추가시:
2. 폴더
동일
추가시:
3. 사용할 사이트
동일
추가시:
4. 공부하는 것
재미있는 어제 하던 것 복습 ^^
getParameter! :>
form 을 통해서 쓸 때는 post방식으로 많이 씁니다.
데이터를 넣어서 -> 수정해서 -> 보낼 때!!
<form action = "" method = "post">
조런 식으로 메소드에 포스트라고 써주면 이것은 포스트 방식
noticeForm의 친구 noticeProc 를 action에 넣어줍시다.
<form action = "noticeProc.jsp" method = "post">
그냥 조런 식으로 생겼습니다.
테이블명과 테이블컬럼명과 DAO의 필드명 - 파라미터명을 일치시켜 주면
코딩시에 편함! :> - 왜냐면 헷갈리지가 않으니까...
다 다르게 해도 값은 들어가는데 저렇게 맞춰주면 좋음맨
<td><textarea rows="10" cols="20"></textarea> </td>
저게 리젝스! 레규러 익스프레쎤
ㅇㅇ... \r\n 는 엔터라는 뜻
-------------------------------
오 이제 입력 안하면 입력하세요 씪씪
이런 기능 만듬!
-.-)b
HTML은 할 줄 아는게 없으니까 자바쓰크립트로 만듭시다! - 동적인 양반
오 이거 JSP 첫날 한거임! onsubmit! :D
on으로 시작하는 모시기 (이벤트 설정 등) - 는 다 자바스크립트임! :>
onclick onsubmit onkey어쩌구저쩌구 <- 같은 것
그러니까 onsubmit은 submit 할 때 캐치해서 이벤트 실행하는것! :>
근뎅
<form action="noticeProc.jsp" method="post" onsubmit="input()">
이렇게 짜면 안됨 -_-)
왜냐면 이미 그 서브밋 누르면 응답이 되어서 가고있으니까 -> 얘를 멈추고 강제로 다른 걸 호출해줘야함!
그래서
onsubmit="return input()" 이의있소! 하면서 멈추고 얘로 바꿔주는 거임
This는 지네 위치 <> <- 안을 참조함
this 현재있는 위치의 태그값!
onsubmit="return input(this)"
이런 식으로 만들면 되나바
그담에 script를 style 밑에 만들어줄겁니다.
function input(){
}
자바쓰크립트는 파라메타 넣어줄 때 타입을 명시를 안합니다.
그래서 그냥
function input(f){
}
이런 식으로 만들면 됨
<script type="text/javascript">
function input(f){
if(f.name.value == "")/*f.하위요소.값 == 빈값이면*/
alert("이름을 입력하세요") /*alert 컨펌 푸롬푸투 = 자바쓰크립트의 경고 3인방*/
f.name.focus(); /*앜! 포커스 놓쳤다★★★!*/
/*
해당 요소에 포커스를 부여하여
1. 텍스트 창의 경우, 커서를 위치시켜 바로 입력 가능
2. 버튼의 경우 엔터 키를 눌렀을 때 클릭 효과를 냄
Description: Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.
아! 이벤트 발생시키는 용이군요 ^^
그 만약에 빈 곳 있으면 글루 그러니까... 커서 같은거 이동시켜줌!
뽀꺼쓰!
어그로 끈 곳으로 포커스를 주는 개념입니다.
*/
return false;
}
</script>
그래서 이런 식으로 만들면 잘 돌아갑니다.
전체 코드는 이럼.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
width: 80%;
}
table, th, td {
border: 1px solid aqua;
color: aqua;
}
caption {
font-size: 50px;
color: aqua;
}
</style>
<script type="text/javascript">
function input(f){
if(f.name.value == ""){
alert("이름을 입력하세요")
f.name.focus();
return false;
}
if(f.title.value == ""){
alert("제목을 입력하세요")
f.title.focus();
return false;
}
if(f.content.value == ""){
alert("내용을 입력하세요")
f.content.focus();
return false;
}
}
</script>
</head>
<body>
<form action="noticeProc.jsp" method="post"
onsubmit="return input(this)">
<table>
<caption>공지 등록</caption>
<tr>
<th>이름</th>
<td><input type="text" name="name"></td>
</tr>
<tr>
<th>제목</th>
<td style="width: 634px;"><input type="text" name="title"></td>
</tr>
<tr>
<th>내용</th>
<td><textarea rows="10" cols="50" name="content"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="등록">
</td>
</tr>
</table>
</form>
</body>
</html>
별 거 없음.
if(f.content.value == ""){
alert("내용을 입력하세요")
f.content.focus();
return false;
}
이거 리턴값을 따로따로 줘야 합니다! :>
어쨌든 중요한 - onsubmit = "return input(this)" -★
근데 proc에서
for (int i = 0; i < skill.length; i++) {
if (i == (skill.length - 1)) {
out.print(skill[i]);
} else {
out.print(skill[i] + ", ");
}
}
요기 length 잡는 거 때매 오류남...500에러!
에이씨!
일단 킵★
오 스크립트 내에서
var cnt = 0;
for(var i = 0; i<f.skill.length; i++){
if(f.skill[i].checked == true){
cnt++;
}
}
if(cnt==0){
alert("보유기술을 선택해라 내가 if문을 짰는데");
f.skill[0].focus();
return false; /*오 이러면 500 오류인가 뭔가 안뜸*/
}
요렇게 짜면 오류 안뜸 :D
이힣힣
요기까지 중간 점검용 코드! :>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
width: 80%;
}
table, th, td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
function input(f){
if(f.name.value == ""){
alert("이름을 입력해라 내가 input함수를 짰는데");
f.name.focus();
return false;
}
/*성별은 둘 중 하나라도 되면 넘어가도 됩니다
이름이 같은 경우에 태그를 배열[] 로 인식함 -.-)ㅋㅋ
체크드! - o-true x-false
*/
if(f.gender[0].checked == false && f.gender[1].checked == false){
alert("성별을 하나라도 찍어라 내가 input함수를 짰는데");
f.gender[0].focus(); /*강제로 안 바꿔주면 null값 찍네...*/
return false;
}
if(f.info.value == ""){
alert("내용을 입력해라 내가 input함수를 짰는데");
f.info.focus();
return false;
}
var cnt = 0;
for(var i = 0; i<f.skill.length; i++){
if(f.skill[i].checked == true){
cnt++;
}
}
if(cnt==0){
alert("보유기술을 선택해라 내가 if문을 짰는데");
f.skill[0].focus();
return false; /*오 이러면 500 오류인가 뭔가 안뜸*/
}
}
</script>
</head>
<body>
<form action="proc.jsp" method="post" onsubmit = "return input(this)">
<!-- 뽐 안에 테이브를 넣ㅇㅓ야 보내기 ㄱㅏ ㄴ ㅡ ㅇ ㅎ ㅐ ㅇ ㅕ -->
<table>
<tr>
<th>이름:</th>
<td><input type="text" name="name"></td>
<!-- 쟤는 이름을 굳이 넣어줘야한다네 -->
</tr>
<tr>
<th>성별:</th>
<td><label><input type="radio" name="gender" value="남자">남자</label>
<!-- 위아래 애들은 는 밸류값을 넣어줘야 한다네 --> <label><input
type="radio" name="gender" value="여자">여자</label></td>
<!-- 이렇게 label로 감싸고 - 이름을 gender로 안 하면 두 개 다 체크 가능하니까 이름을 지정해준다! :> -->
</tr>
<tr>
<th>보유기술:</th>
<td><label><input type="checkbox" value="java"
name="skill"> JAVA </label> <label><input type="checkbox"
value="jsp" name="skill"> JSP </label> <label><input
type="checkbox" value="mvc" name="skill"> MVC </label> <label><input
type="checkbox" value="spring" name="skill"> SPRING </label> <label><input
type="checkbox" value="jquery" name="skill"> jQuery</label></td>
</tr>
<tr>
<th>취미:</th>
<td><select name="hobby">
<option>기술 서적 읽기
<option>게임
<option>영화감상
<option>보드타기
</select></td>
</tr>
<tr>
<th>자기소개:</th>
<td><textarea rows="5" cols="45" name="info"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="전송">
</td>
</tr>
</table>
<!-- 여기 네임이랑 밸류를 무지하게 많이 만들어줬는데 이게 그... post 타입으로 쓰려거... -->
</form>
</body>
</html>
뽀인트는 for(var i = 0; <- 이렇게 int 대신 var로 쓴 것
자바쓰크립트는 그... 타입을 명시를 안하미다
<tr>
<th>취미:</th>
<td><select name="hobby">
<option>취미를 선택해라</option>
<option>기술 서적 읽기
<option>게임
<option>영화감상
<option>보드타기
</select></td>
</tr>
/*옵션은 안 닫아도 되고 닫아도 되고 데이빗맘인것*/
요 부분을 바꿔준다.
if(f.hobby.selectedIndex == 0){
/*그러니까 select는 쓴 순서대로 인덱스가 매겨지는것*/
alert("취미를 선택해라 내가 selectedIndex를 배웠는데");
f.hobby.focus();
return false;
}
이렇게 바꿔주면 됩니다.
캡션은 테이블 안에 넣어줘야 됩니다.
쓰타일에서 넘ㅇ나이쁘게
caption{
font-size: 30px;
font-weight: bold;
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<style>
table{
width: 80%;
}
table, th, td{
border: 1px solid black;
}
caption{
font-size: 30px;
font-weight: bold;
}
</style>
<script>
</script>
<body>
<form action="addressProc.jsp" method="post">
<table>
<caption>주소 등록</caption>
<tr>
<th>이름</th>
<td><input type="text" name="name"></td>
</tr>
<tr>
<th>전화번호</th>
<td><input type = "text" name = "phone"></td>
</tr>
<tr>
<th>우편번호</th>
<td><input type = "text" name = "zipcode" size ="6" maxlength = "5"><br>
<input type = "button" value ="주소검색">
</td>
</tr>
<tr>
<th>주소</th>
<td><input type = "text" name = "address1" size = "55">
<input type = "text" name = "address2" size = "55" >
</td>
</tr>
<tr>
<td colspan = "2" align = center>
<input type = "submit" value = "등록">
</td>
</tr>
</table>
</form>
</body>
</html>
이거 주소지를 다음 api로 쓸거임 :>
일단 배운거까지 킵
어드레스 폼
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<style>
table{
width: 80%;
}
table, th, td{
border: 1px solid black;
}
caption{
font-size: 30px;
font-weight: bold;
}
</style>
<script>
function inputchk(f){
if(f.name.value==""){
alert("이름을 입력하세요^^");
f.name.focus();
return false;
}
if(f.phone.value==""){
alert("전화번호를 입력하세요^^");
f.phone.focus();
return false;
}
if(f.zipcode.value==""){
alert("우편번호를 입력하세요^^");
f.zipcode.focus();
return false;
}
if(f.address1.value==""){
alert("첫 번째 주소를 입력하세요^^");
f.address1.focus();
return false;
}
if(f.address2.value==""){
alert("두 번째 주소를 입력하세요^^");
f.address2.focus();
return false;
}
}
</script>
<body>
<form action="ProcAddress.jsp" method="post" onsubmit = "return inputchk(this)">
<table>
<caption>주소 등록</caption>
<tr>
<th>이름</th>
<td><input type="text" name="name"></td>
</tr>
<tr>
<th>전화번호</th>
<td><input type = "text" name = "phone"></td>
</tr>
<tr>
<th>우편번호</th>
<td><input type = "text" name = "zipcode" size ="6" maxlength = "5"><br>
<input type = "button" value ="주소검색">
</td>
</tr>
<tr>
<th>주소</th>
<td><input type = "text" name = "address1" size = "55">
<input type = "text" name = "address2" size = "55" >
</td>
</tr>
<tr>
<td colspan = "2" align = center>
<input type = "submit" value = "등록">
</td>
</tr>
</table>
</form>
</body>
</html>
어드레스 프록
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String phone = request.getParameter("phone");
String zipcode= request.getParameter("zipcode");
String address1= request.getParameter("address1");
address1 = address1.replaceAll("\r\n", "<br>");
String address2= request.getParameter("address2");
address2 = address2.replaceAll("\r\n", "<br>");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>당신의 주소</h1>
<div style="font-size: 30px; background-color: #ff1f00">
이름: <%= name %><br>
전화번호: <%= phone %><br>
우편번호: <%= zipcode %><br>
주소1: <%= address1 %><br>
주소2: <%= address2 %>
</div>
</body>
</html>
이거 내가 이름을 잘못 만드러서 ProcAddress됨 -_-);;
주소 출력시 <%= address1 + address2 %> 같이 해도 출력됨 ! :>
http://search.daum.net/search?w=tot&DA=YZR&t__nil_searchbox=btn&sug=&sugo=&sq=&o=&q=%EC%9A%B0%ED%8E%B8%EB%B2%88%ED%98%B8+api&tltm=1
이거 다음 우편번호 api 검색해서 첫번째것 -.-
중에서 사용자가 선택한 값 이용하기! :>
뀌뀌
<input type="text" id="sample6_postcode" placeholder="우편번호"> //플레이스홀더: 우편번호 자리니라
<input type="button" onclick="sample6_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="sample6_address" placeholder="주소">
<input type="text" id="sample6_address2" placeholder="상세주소">
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var fullAddr = ''; // 최종 주소 변수
var extraAddr = ''; // 조합형 주소 변수
// 사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
fullAddr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
fullAddr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 조합한다.
if(data.userSelectedType === 'R'){
//법정동명이 있을 경우 추가한다.
if(data.bname !== ''){
extraAddr += data.bname;
}
// 건물명이 있을 경우 추가한다.
if(data.buildingName !== ''){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다.
fullAddr += (extraAddr !== '' ? ' ('+ extraAddr +')' : '');
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample6_postcode').value = data.zonecode; //5자리 새우편번호 사용
document.getElementById('sample6_address').value = fullAddr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById('sample6_address2').focus();
}
}).open();
}
</script>
오 쩐당
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<style>
table {
width: 80%;
}
table, th, td {
border: 1px solid black;
}
caption {
font-size: 30px;
font-weight: bold;
}
</style>
<script>
function inputchk(f){
if(f.name.value==""){
alert("이름을 입력하세요^^");
f.name.focus();
return false;
}
if(f.phone.value==""){
alert("전화번호를 입력하세요^^");
f.phone.focus();
return false;
}
if(f.zipcode.value==""){
alert("우편번호를 입력하세요^^");
f.zipcode.focus();
return false;
}
if(f.address1.value==""){
alert("첫 번째 주소를 입력하세요^^");
f.address1.focus();
return false;
}
if(f.address2.value==""){
alert("두 번째 주소를 입력하세요^^");
f.address2.focus();
return false;
}
}
</script>
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var fullAddr = ''; // 최종 주소 변수
var extraAddr = ''; // 조합형 주소 변수
// 사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
fullAddr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
fullAddr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 조합한다.
if(data.userSelectedType === 'R'){
//법정동명이 있을 경우 추가한다.
if(data.bname !== ''){
extraAddr += data.bname;
}
// 건물명이 있을 경우 추가한다.
if(data.buildingName !== ''){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다.
fullAddr += (extraAddr !== '' ? ' ('+ extraAddr +')' : '');
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample6_postcode').value = data.zonecode; //5자리 새우편번호 사용
document.getElementById('sample6_address').value = fullAddr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById('sample6_address2').focus();
}
}).open();
}
</script>
<!-- 쓰크립트를 여러 개 써도 되는군요^^ -->
<!-- 다음에서 루팡했음 -->
<body>
<form action="ProcAddress.jsp" method="post"
onsubmit="return inputchk(this)">
<table>
<caption>주소 등록</caption>
<tr>
<th>이름</th>
<td><input type="text" name="name"></td>
</tr>
<tr>
<th>전화번호</th>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<th>우편번호</th>
<td><input type="text" id="sample6_postcode" placeholder="우편번호"
name="zipcode" size="6" maxlength="5"><br> <input
type="button" value="주소검색" onclick="sample6_execDaumPostcode()"
value="우편번호 찾기"></td>
</tr>
<tr>
<th>주소</th>
<td><input type="text" name="address1" size="55"
id="sample6_address" placeholder="주소"> <input type="text"
name="address2" size="55" id="sample6_address2" placeholder="상세주소">
</td>
</tr>
<tr>
<td colspan="2" align=center><input type="submit" value="등록">
</td>
</tr>
</table>
</form>
</body>
</html>
이렇게 input 추가하고 script 추가하니까 다뜸 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
쩐당
어제 했던것도 박았음
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
width: 80%;
}
table, th, td {
border: 1px solid black;
}
caption{
font-size: 30px;
font-weight: bold;
}
</style>
<script type="text/javascript">
function input(f){
if(f.name.value == ""){
alert("이름을 입력해라 내가 input함수를 짰는데");
f.name.focus();
return false;
}
/*성별은 둘 중 하나라도 되면 넘어가도 됩니다
이름이 같은 경우에 태그를 배열[] 로 인식함 -.-)ㅋㅋ
체크드! - o-true x-false
*/
if(f.gender[0].checked == false && f.gender[1].checked == false){
alert("성별을 하나라도 찍어라 내가 input함수를 짰는데");
f.gender[0].focus(); /*강제로 안 바꿔주면 null값 찍네...*/
return false;
}
if(f.info.value == ""){
alert("내용을 입력해라 내가 input함수를 짰는데");
f.info.focus();
return false;
}
var cnt = 0;
for(var i = 0; i<f.skill.length; i++){
if(f.skill[i].checked == true){
cnt++;
}
}
if(cnt==0){
alert("보유기술을 선택해라 내가 if문을 짰는데");
f.skill[0].focus();
return false; /*오 이러면 500 오류인가 뭔가 안뜸*/
}
if(f.hobby.selectedIndex == 0){
/*그러니까 select는 쓴 순서대로 인덱스가 매겨지는것*/
alert("취미를 선택해라 내가 selectedIndex를 배웠는데");
f.hobby.focus();
return false;
}
if(f.phone.value == "" ){
alert("전화번호를 입력해라");
f.phone.focus();
return false;
}
if(f.zipcode.value == "" ){
alert("우편번호를 입력해라");
f.zipcode.focus();
return false;
}
if(f.address1.value == "" ){
alert("주소를 입력해라");
f.address1.focus();
return false;
}
if(f.address2.value == "" ){
alert("상세주소를 입력해라");
f.address2.focus();
return false;
}
}
</script>
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var fullAddr = ''; // 최종 주소 변수
var extraAddr = ''; // 조합형 주소 변수
// 사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
fullAddr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
fullAddr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 조합한다.
if(data.userSelectedType === 'R'){
//법정동명이 있을 경우 추가한다.
if(data.bname !== ''){
extraAddr += data.bname;
}
// 건물명이 있을 경우 추가한다.
if(data.buildingName !== ''){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다.
fullAddr += (extraAddr !== '' ? ' ('+ extraAddr +')' : '');
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample6_postcode').value = data.zonecode; //5자리 새우편번호 사용
document.getElementById('sample6_address').value = fullAddr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById('sample6_address2').focus();
}
}).open();
}
</script>
</head>
<body>
<form action="proc.jsp" method="post" onsubmit = "return input(this)">
<!-- 뽐 안에 테이브를 넣ㅇㅓ야 보내기 ㄱㅏ ㄴ ㅡ ㅇ ㅎ ㅐ ㅇ ㅕ -->
<table>
<caption>팀 정보를 등록해라 내가 캡션을 만들었는데</caption>
<tr>
<th>이름:</th>
<td><input type="text" name="name"></td>
<!-- 쟤는 이름을 굳이 넣어줘야한다네 -->
</tr>
<tr>
<th>성별:</th>
<td><label><input type="radio" name="gender" value="남자">남자</label>
<!-- 위아래 애들은 는 밸류값을 넣어줘야 한다네 --> <label><input
type="radio" name="gender" value="여자">여자</label></td>
<!-- 이렇게 label로 감싸고 - 이름을 gender로 안 하면 두 개 다 체크 가능하니까 이름을 지정해준다! :> -->
</tr>
<tr>
<th>보유기술:</th>
<td><label><input type="checkbox" value="java"
name="skill"> JAVA </label> <label><input type="checkbox"
value="jsp" name="skill"> JSP </label> <label><input
type="checkbox" value="mvc" name="skill"> MVC </label> <label><input
type="checkbox" value="spring" name="skill"> SPRING </label> <label><input
type="checkbox" value="jquery" name="skill"> jQuery</label></td>
</tr>
<tr>
<th>취미:</th>
<td><select name="hobby">
<option>취미를 선택해라</option>
<option>기술 서적 읽기
<option>게임
<option>영화감상
<option>보드타기
</select></td>
</tr>
<tr>
<th>자기소개:</th>
<td><textarea rows="5" cols="45" name="info"></textarea></td>
</tr>
<tr>
<th>전화: </th>
<td><input type = "text" name = "phone"></td>
</tr>
<tr>
<th>우편번호</th>
<td><input type = "text" name = "zipcode" id="sample6_postcode" placeholder="우편번호">
<input type = "button" value = "주소검색" onclick="sample6_execDaumPostcode()" value="우편번호 찾기">
</td>
</tr>
<tr>
<th>주소</th>
<td> <input type = "text" name = "address1" id="sample6_address" placeholder="주소">
<br>
<input type = "text" name = "address2" id="sample6_address2" placeholder="상세주소"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="전송">
</td>
</tr>
</table>
<!-- 여기 네임이랑 밸류를 무지하게 많이 만들어줬는데 이게 그... post 타입으로 쓰려거... -->
</form>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<!-- http://m.blog.naver.com/ecjjmrikqo/40196016171 이거 할 것 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String name = request.getParameter("name");
String gender = request.getParameter("gender");
String[] skill = request.getParameterValues("skill");
String hobby = request.getParameter("hobby");
String info = request.getParameter("info");
info = info.replaceAll("\r\n", "<br>");
String phone = request.getParameter("phone");
String zipcode = request.getParameter("zipcode");
String address1 = request.getParameter("address1");
String address2 = request.getParameter("address2");
/*
다 받아서 ->
*/
%>
<h1>Post 데이터 전달값</h1>
<div style="font-size: 30px; background-color: #00ff00">
이름:
<%=name%><br> 성별:<%=gender%><br> 보유기술:
<%
for (int i = 0; i < skill.length; i++) {
if (i == (skill.length - 1)) {
out.print(skill[i]);
} else {
out.print(skill[i] + ", ");
}
}
%>
<br> 취미:<%=hobby%><br> 자기소개:
<%=info%>
<br>
전화: <%= phone %>
<br>
우편번호: <%= zipcode %>
<br>
주소: <%= address1 %>
<br>
상세주소: <%= address2 %>
</div>
</body>
</html>
그렇습니다
-----------------------------------------------
2. response 내부 객체
- javax.servlet.http.HttpServletResponse Interface를 Tomcat등
서버가 구현한 객체, 자동화된 객체, 개발자는 사용만함.
- 처리 결과를 클라이언트(웹 브러우저)에게 출력할 목적을 가지고 있습니다.
- out 객체는 response 객체로부터 생성합니다.
- sendRedirect(): 데이터 처리를 한후 특정 페이지로 자동으로 주소 이동.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%response.sendRedirect("http://www.kma.go.kr"); %>
<!-- 오 쩐당 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
url도 바뀜
그러니까 리다이렉트 = 재요청! :>
뤼 - 다이렉트 니까 다시 요청하는검미다
우리 애는 끝나고 -> 그담에 기상청으로 이동하는 건 살아있고! :>
1번 요청 -> 2번 요청
-->
</body>
</html>
--------------------------------
스크립틀릿에서는 print 나 println이나 그놈이 그놈임 ... - 모두 다 그냥 출력 -_-) 엔터값도 없음
엔터는 <br> 뿐이야!
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<H1>2014년 개봉 영화</H1>
<DIV style='font-size: 28px;'>
<%
out.print("수상한 그녀");
out.print("변호인");
out.print("그래비티");
out.print("월터의 상상은 현실이 된다.");
out.print("호빗");
%>
</DIV>
<HR>
<DIV style='font-size: 28px;'>
<%
out.println("수상한 그녀");
out.println("변호인");
out.println("그래비티");
out.println("월터의 상상은 현실이 된다.");
out.println("호빗");
%>
</DIV>
<HR>
<DIV style='font-size: 28px;'>
<%
System.out.println("수상한 그녀");
System.out.println("변호인");
System.out.println("그래비티");
System.out.println("월터의 상상은 현실이 된다.");
System.out.println("호빗");
%>
</DIV>
<HR>
<DIV style='font-size: 28px;'>
<%
System.out.print("수상한 그녀");
System.out.print("변호인");
System.out.print("그래비티");
System.out.print("월터의 상상은 현실이 된다.");
System.out.print("호빗");
%>
</DIV>
</body>
</html>
이거 돌려보면
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <title>Insert title here</title> | |
| </head> | |
| <body> | |
| <H1>2014년 개봉 영화</H1> | |
| <DIV style='font-size: 28px;'> | |
| 수상한 그녀변호인그래비티월터의 상상은 현실이 된다.호빗 | |
| </DIV> | |
| <HR> | |
| <DIV style='font-size: 28px;'> | |
| 수상한 그녀 | |
| 변호인 | |
| 그래비티 | |
| 월터의 상상은 현실이 된다. | |
| 호빗 | |
| </DIV> | |
| <HR> | |
| <DIV style='font-size: 28px;'> | |
| </DIV> | |
| <HR> | |
| <DIV style='font-size: 28px;'> | |
| </DIV> | |
| </body> | |
</html> <% out.print("수상한 그녀 <br>"); out.print("변호인 <br>"); out.print("그래비티 <br>"); out.print("월터의 상상은 현실이 된다. <br>"); out.print("호빗 <br>"); %> 이렇게 아웃 프린트 안에다가 <br> 넣어주면 엔터 찍힘! :> 어 엔터가 아니라 라인 스킵이요 ㅎㅎ |
---------------------
4. application 내부 객체
- javax.servlet.ServletContext 인터페이스의 구현 객체
- 서블릿이 서블릿 컨테이너(Tomcat)에서 실행 될 때의 환경 정보를 저장
- 절대 경로 추출시 JSP 형식
String upDir = "/pds/storage";
upDir = application.getRealPath(upDir);
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
out.println(application.getRealPath("reponse.jsp"));
%>
<!-- D:\javadb\web\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\jsp_test\reponse.jsp
실제 경로를 출력해준다 :> 잏ㅎㅎㅎ
-->
</body>
</html>
4. 전체적인 서버의 흐름도
http 프로토콜은 tcp/ip라는 네트워크를 사용함
1. 서버사이드 프로그램 - jsp / 빈즈 / 서부릿 이런거...
2. 에이치티엠엘 페이지 -
는 써버에 있어야 합니다
웹 서버!
웹서버!!!! 웹 서 버 ~~~~~~~!
부라우저 -> http프로토콜 -> 웹서버
웹서버 -> http푸로토콜 -> 부라우저ㅗ
1. HTML Form의 형태
- 데이터를 입력받을 목적으로 사용하는 태그.
<FORM name="frm" action="./sungjuk_proc.jsp" method = "GET/POST">
1) name : 폼 이름
2) action: 폼에서 입력받은 데이터를 보내(전송)는 서버의 주소로써
인터넷 브러우저는 주소상에 도메인 생략시 도메인을 자동으로
연결하여 전송합니다.
예)
action="./sungjuk_proc.jsp"
▶ 현재 브러우저로 로딩된 파일과 같은 폴더에있는 jsp로 전송 (*)
action="../sungjuk_proc.jsp"
▶ 현재 폴더의 상위 폴더에 있는 파일로 전송
action="../object/sungjuk_proc.jsp" - 다른 폴더로 가는 것
..의 뜻은 현재 폴더에서 나온다는 뜻 -_-)ㅋㅋ -> 그담에 오부젝트라는 다른 폴더로 감
▶ 현재 폴더의 상위폴더로 나간 후 object폴더안으로 이동하여 전송
action="http://172.16.4.1:8000/object/sungjuk_proc.jsp"
▶ 전체 IP를 직접 기록한 경우
action="http://www.test.co.kr/object/sungjuk_proc.jsp"
▶ 전체 도메인을 직접 기록한 경우
3) method: 전송 방식
GET: 데이터 조회용(SQL: SELECT)
POST: 데이터 수정용(SQL: INSERT, UPDATE, DELETE)
* 특정 기업은 요청을 전부 POST로 요구하는 기업도 있음, POST만 써도 개발 가능
2. GET 전송 방식
- 서버의 데이터를 변경할 목적이 아닌 조회의 목적으로 사용(SQL: SELECT)
- 전송할 데이터를 문자열 형태로 URL의 뒤에 인수로 붙여서
전송합니다.
따라서 보안성이 없어 누구나 전송 내용을 볼 수 있습니다. - 파라미터가 url로 나오니까...
Form 태그에서의 'GET'방식은 서버로 전송시 서버의 처리가
지연될 경우 중복해서 데이터 전송이 발생합니다.
- A 태그를 이용할 경우 일반적으로 GET방식 전송만 가능하나
Javascript를 이용하면 POST 방식으로 전송이 가능함.
- 4KB이상의 파라미터 문자열은 전송할 수 없음으로 대용량 전송이 어려움.
- 주소를 공개할 목적으로 사용하는 경우
1) 주소와 데이터의 구분
- ?: 전송되는 데이터(변수)의 시작
- &: 변수가 2개 이상일 경우 구분
갖다 붙여쓰는 데이빗 넘나 똑똑한거 같다
다 외운 데이빗인 것인가 아닌가가 문제이긴함
2) 전송 예
- 한줄로 나타낸 경우
http://localhost:8000/object/form/select2_proc.jsp?city=%EC%8B%9C%EC%B9%B4%EA%B3%A0&period=6%EB%B0%957%EC%9D%BC&img=ro37.jpg
- 여러줄로 나타낸 경우
http://localhost:8000/object/form/select2_proc.jsp
? <-- 전송 데이터의 시작
city=%EC%8B%9C%EC%B9%B4%EA%B3%A0
& <-- 전송 데이터가 여러개 일 경우의 구분자
period=6%EB%B0%957%EC%9D%BC
&
img=ro37.jpg
요청 페이지가 브러우저의 접속 리스트에 노출됨으로,
처리페이지를 필요에따라 마음대로 호출가능하여 잘못된 데이터 주입으로 서버에러 발생 가능.
http://localhost:8000/object/form/select2_proc.jsp?city=모스크바&period=1000박1001일&img=ro38.jpg
그러니까 그냥 검색을 위한 용도로 잘 씀
데이터를 이따구로 보내지는 않나봐
3. POST 전송 방식
- 서버의 데이터를 변경할 목적으로 가지고 있음(SQL: INSERT, UPDATE, DELETE)
님왜탈퇴함? 진짜탈퇴함? 왜탈퇴함? 우리의서비스가 어쩌구저쩌구 - 포스트 방식
- 파일의 형태로 전송됨으로 URL상에 나타나지않아 보안성이 있습니다.
- GET방식에 비해서 대용량의 데이터를 전송할 수 있습니다.
- 일반적으로 Form은 post 방식으로 전송됩니다.
※ GET/POST 방식 사용시 HTTP의 사용은 보안성이 약함으로 암호화(JAVA API)
전송이나 HTTPS(서버의 설정 필요)를 사용할 수 있다.
※ GET방식은 특히 URL에 전송값이 노출되어 사용됨으로 보안이 필요 없는
전송에 이용함.
※ 프로젝트 개발시 URL에 기록이 남는것을 방지하기위해 POST 방식만
사용할것을 요청하는 기업도 있음.
4. JSP 코드 첫라인에 한글 변환을 선언함.
- 한글등 전송시 브러우저 별 지정된 인코딩 타입에 따라 변환됨으로 한글이 깨짐.
URL 인코딩을 각자의 형식으로 변환함으로 추가로 데이터 변환을 해주어야함.
한글 --> Chrome ------------> Server
FireFox
Opera
Internet Explorer
<% request.setCharacterEncoding("utf-8"); %>
조 선언문 필수신것
첨에 해야함 - 나중에 하면 무슬모
5. 뉴스 등록: TEXT, TEXTAREA, PASSWORD
- 일반적으로 HTML은 대소문자를 가리지 않으나 HTML태그의 name 속성과
value 속성은 대소문자를 구분합니다.
아! 파라메타가 대소문자 구분한다는 얘기입니다
-------------3시 42분! :>
2시간 30분 뒤면 배송이 완료되었을까
1) TEXT: 한줄을 입력받을때 사용
<input type='text' name='title' value='' size='30'>
- text: 한줄만 입력
- value: 초기값
- size: 입력받는 창의 크기
- maxlength: 최대 입력 글자 수
2) TEXTAREA: 여러라인을 입력받을 때 사용
<textarea name='content' rows='10' cols='30'></textarea>
- rows: 행의 갯수(문자수)
- cols: 열의 갯수(문자수)
3) PASSWORD: 패스워드 입력시 사용, 입력글 순간 비공개
<input type='password' name='passwd' size='30'>
4) Submit Button: 서버로 입력받은 데이터를 전송
<input type='submit' value='등록'>
왜 5가없지가 아니라 다른거군
6. 여행 등록: SELECT ~ OPTION
- SELECT: TEXT로 입력을 받으면 사용자가 다양한 값을 입력하여 처리 규칙을
만들기가 힘듬.
따라서 지정된 데이터만 입력받도록 제한을 가하는 기능이 있음.
7. 취미: RADIO, CHECKBOX
1) RADIO: 다양한 선택 항목을 출력하고 하나만 선택 가능
- checked="checked": 기본 선택
<input type='radio' name='area' value='서울' checked="checked"> 서울 지역
2) CHECKBOX: 여러개 선택 가능, 취미의 선정, 선택안하면 null이 출력됨
- checked="checked": 기본 선택
<input type='checkbox' name='hobby1' value='독서'>독서
3) 많은 CheckBox를 배열로 가져오는 코드
String[] hobby = request.getParameterValues("hobby");
<input type='checkbox' name='hobby' value='자전거'> 자전거
//이건 values로 받아야 되는 이유가 배열이라서 구랭
글씨체 저거 왜 저럼 -_-
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
*{font-family: 궁서체; font-size: 35px; background-color: #000000; color: white;}
</style>
</head>
<body>
<H1>뉴스 등록</H1>
<DIV>
<form name = 'frm' method = 'get' action ='./proc.jsp'>
제목: <input type = 'text' name = 'title' value = '' size = '30'><br>
내용: <textarea name = 'content' rows = '10' cols = '30'></textarea><br>
패스: <input type = 'password' name = 'passwd' size = '30'><br>
<input type = 'submit' value = '등록'>
</form>
</DIV>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
*{font-family: 궁서체; font-size: 35px; background-color: #000000; color: white;}
</style>
</head>
<body>
<%request.setCharacterEncoding("UTF-8"); %>
제목: <%= request.getParameter("title") %> <br><br>
내용: <%= request.getParameter("content") %> <br><br>
패스워드: <%= request.getParameter("passwd") %> <br><br>
</body>
</html>
위는뽐 아래는 쁘록
이제 이거는 씰렉트에
그 value값 줘서 고를 수 있는 거임
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<style>
*{font-family: 굴림체; font-size: 24px}
</style>
<body>
<form name = 'frm' method = 'post' action = './proc2.jsp'>
주말 여행지를 입력해주세요.<br>
<input type = 'text' name = 'area' size = '30'>
<br><br>
주말 여행지를 입력해주세요.<br>
<select name = 'area2'>
<option value = '일본'>일본</option>
<option value = '중국'>중국</option>
<option value = '베트남'>베트남</option>
<option value = '태국'>태국</option>
<option value = '호주'>호주</option>
<option value = '캐나다'>캐나다</option>
<option value = '미국'>미국</option>
<option value = '터키'>터키</option>
<option value = '크로아티아'>크로아티아</option>
<option value = '스위스'>스위스</option>
</select>
<input type = 'submit' value = '기간선택'>
</form>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<DIV style = 'font-size: 24px'>
<%
String area = request.getParameter("area");
String area2 = request.getParameter("area2");
out.println("지역 선택 1: " +area + "<BR>");
out.println("지역 선택 2: " + area2);
%>
</DIV>
</body>
</html>
---------------------------------
래디오 - 하나만 선택 가능
첵빢쓰 - 여러개 선택 가능 - 그래서 배열로 출력 - request.getParameterValues("첵빡스이름");
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
*{
font-family: 굴림체;
font-size: 24px;
}
</style>
</head>
<body>
<form name = 'frm' methode = 'post' action='./proc3.jsp'>
희망하는 근무 지역은? <br>
<input type = "radio" name = 'area' value = '서울' checked = "checked"> 서울 지역
<input type = "radio" name = 'area' value = '인천'> 인천 지역
<input type = 'radio' name = 'area' value = '경기'> 경기 지역
<input type = 'radio' name = 'area' value = '충청북도'> 충청 지역
<input type = 'radio' name = 'area' value = '강원도'> 강원 지역
<HR>
취미 선택 1<br>
<input type = "checkbox" name = 'hobby1' value='독서'> 독서
<input type = "checkbox" name = 'hobby2' value = '등산'> 등산
<input type = "checkbox" name = 'hobby3' value = '영화'> 영화
<HR>
취미 선택 2<br>
<input type = 'checkbox' name = 'hobby' value = '자전거'> 자전거
<!-- 타입 쓸때 ''나 ""나 상관없나 -->
<input type = "checkbox" name = 'hobby' value = '캠핑'> 캠핑
<input type = "checkbox" name = 'hobby' value = '승마'> 승마
<input type = "checkbox" name = 'hobby' value = '스노우보드'> 스노우 보드
<input type = "checkbox" name = 'hobby' value = '바다낚시'> 바다낚시
<input type = "checkbox" name = 'hobby' value = '주말농장'> 주말농장
<br><br>
<input type = 'submit' value = '등록'>
</form>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<DIV style = 'font-size: 24px'>
<%
String area = request.getParameter("area");
out.println("지역선택 1: " + area + "<BR>");
String hobby1 = request.getParameter("hobby1");
String hobby2 = request.getParameter("hobby2");
String hobby3 = request.getParameter("hobby3");
if(hobby1 != null){
out.println("hobby1: " + hobby1 + "<br>");
}
if(hobby2 != null){
out.println("hobby1: " + hobby2 + "<br>");
}
if(hobby3 != null){
out.println("hobby1: " + hobby3 + "<br>");
}
String [] hobby = request.getParameterValues("hobby");
if(hobby != null){
for(int i = 0; i<hobby.length; i++){
out.println(hobby[i] + " ");
}
}
%>
</DIV>
</body>
</html>
-------------------
PHP에서 큰 따옴표와 작은 따옴표의 차이점
php 작성시 문자열을 나타내고자 할때는 큰따옴표나 작은따옴표를 써서 해결할수 있다.
이 예제에서는 큰따옴표와 작은따옴표의 기능이 동일하지만, 상황에 따라 이 두개는 다르게 동작할수도 있다.
예를들어 큰따옴표는 내부 문자열을 파싱을 해서 뿌려주는 반면에 작은따옴표는 내부 내용을 그대로 출력하게 된다.
즉, 아래와 같이 문자열 내부에 변수를 사용하면 큰따옴표는 그 내용을 변수값으로 치환해서 보여준다.
또한 개행문자 "\n" 도 큰따옴표 에서는 실제 개행문자로 변환을 하는 반면에 작은따옴표에서는 "\n" 문자열을 그대로 출력한다.
이런 이유로 인해 일부 개발자들은 큰따옴표보다 작은따옴표의 처리속도가 더 빠르다고는 하지만 실제로 그 효과는 미미하다고 볼수 있다.
http://jinolog.com/programming/php/2012/11/01/php-quotation-difference.html
-----------------------------------------------------------------------------------------------------
세팅 한번 더 ! :>
Context root: memo <-- web에서 접근하는 프로젝트 이름
하나 만들어슴
JSP 개발 방법에는 model1 과 model2가 있는데
모델 원은 구렸습니다
-그럼 왜있어 **
쓰지마라
애초에 왜만들었냐
라고 생각은 했지만 쪼매난대서는 쓴대여
이건 구졌는데 시간이 덜걸림
그래서 쓰는군
뽐은 액션이 있어야하는뎅 -> 없으면 서버로 보낼 수가 없음
응그래요
요고 하려고
이거 만들었음
파워복붙 필수입니다
5. 수업
진도:
hw:
6. 할것
오늘도 HTML 복붙 하지 말기 ...!!
뽄트
color - 색상
RGB값이나 색상 키워드 (17가지)
font-family - 글꼴 계통
이건 그냥 궁서체 타임즈 뉴로만 타임즈 쎄리쁘 이런애들
font-size - 글자 크기
픽셀값 아니면 퍼쎈트
font-weight - 글자 두께
볼드 노오말 100 ~400까진 노오말 500~900까진 볼드
숫자로 넣어줘도됨
font-style - 글꼴 스타일
인헤릿 - 엄마따라서
이탤릭 - 기울어져서
오블릭 - 얘도 기울어진것...
text-decoration - 글자 장식
이건 줄 그어주는거 없앨떄 많이 사용 - none
아니믄 언더라인 오버라인 라인스루 블링크 (껌뻑껌뻑) 등등 있음
출처: http://blog.naver.com/wwe700/130185152673
오늘 배운 좋은 것
<style>
*{
font-family: 굴림체;
font-size: 24px;
}
</style>
전체 적용 넘나 좋은것...
이런 개념을 일찍 갈켜주셨어야져 -_-++
'Programming' 카테고리의 다른 글
| 160408: 20회차 (1) | 2016.04.08 |
|---|---|
| 160407: 19회차 (1) | 2016.04.07 |
| 160405: 17회차 (3) | 2016.04.05 |
| 160404: 16회차 (4) | 2016.04.04 |
| 160401: 15회차 (5) | 2016.04.01 |