학원/JSP
11/21 47-1 [JSP] UseInCSS_2
도원결의
2022. 11. 21. 19:02
CSS 안에서 적용하기 2탄
사용자가 선택한 값으로 CSS속성을 바꿔볼 것 임!
[CSS안에서 사용하기 ]
body 안에 받은 HTML 문서
<fieldset class="form-group border p-3">
<legend class="w-auto p-3">CSS안에서 사용하기</legend>
<span class="lead">CSS를 적용한 텍스트</span>
<form method="post">
<label>글자색</label>
<select name="color" class="form-control w-50">
<option value=" ">색상 선택요망</option>
<option value="Red">빨강</option>
<option value="Green">그린</option>
<option value="Blue">블루</option>
</select>
<label>글꼴</label>
<select name="font" class="form-control w-50">
<option value=" ">글꼴 선택요망</option>
<option value="굴림체">굴림체</option>
<option value="바탕체">바탕체</option>
<option value="휴먼옛체">휴먼옛체</option>
</select>
<input class="btn btn-info mt-2" type="submit" value="글꼴 및 색상 변경" />
</form>
</fieldset>
코드작성은
<%
//사용자 선택값 받기
String color = request.getParameter("color");
String font = request.getParameter("font");
out.println(String.format("색상:%s,글꼴:%s",color,font)); // 브라우저에 찍어서 확인 해 보기 !
if(color == null || color.length()==0) color = "black"; // 초기값
if(font == null || font.length()==0) font = "Helvetica Neue"; // 초기값
%>
이렇게 만들고
span{
color:<%=color %>;
font-family: <%=font %>;
}
요렇게 적용 시키는 것 !
[두 번째 자바스크립트 안에서 사용 ]
body 안에 받은 HTML
<fieldset class="form-group border p-3">
<legend class="w-auto p-3">자바스크립트안에서 사용하기</legend>
<form class="form-inline">
<label>아이디</label>
<input class="form-control mx-2 mt-2" type="text" name="id" />
<label>비밀번호</label>
<input class="form-control mx-2 mt-2" type="password" name="pwd" />
<input class="btn btn-info ml-2 mt-2" type="submit" value="로그인" />
</form>
</fieldset>
코드작성은 2가지 방법이 있음 !
두 개 잘 비교해서 사용법 잘 익혀두셈
<%
//사용자 입력값 받기
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
%>
<script>
// console.log(<%=id %> == null); // " " 로 감싸야 에러가 안난다... 안 그럼 변수로 처리되어서 is not defined 뜸
// console.log("<%=id %>" == null); // 파라미터를 전달하든 안하든 에러는 안나지만, 이러면 항상 false가 나옴
console.log("<%=id %>" === "null"); // null도 ""로감싸줘야함 & null체크 항상 해야함
//방법1. 자스로 null 비교
if("<%=id %>" != "null"){
if("<%=id %>" === "KIM" & "1234" === "<%=pwd %>")
alert("<%=id %>님 안녕하세요");
else
alert("회원 가입 후 이용하세요")
}
//방법2. 스크립팅 요소안에서 자바로 null비교
<%
if(id != null){
if("KIM".equals(id) && "1234".equals(pwd))
out.println("alert('"+id+" 님 안녕하세요');");
else
out.println("alert('가입 후 이용하세요')");
}
%>
</script>++추가 설명
아이디가 대소문자 구분이 없을 때는 "KIM".equalsIgnoreCase(id) 로도 가능하다 !
이거 예시적용은.... 아직 어떻게 하는 지 모르니까 ... 대충 이런식임!!!
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
스크립팅 요소를 CSSL안에서 사용하기 2탄