[jQyery] 자주쓰는 기능 웹프로그램/스크립트 2012. 10. 15. 10:50

Jquery 

 엔터키

 $('#searchKeyword').keydown(function(e){
   if(e.keyCode == 13){
     if($("#boardId").val()=='b001')
       $('#searchImg').click();
     else
       $('#searchImg2').click();
   }
});

   
    

,
자바스크립트 태그 적용 안되게 텍스트 설정 웹프로그램/스크립트 2012. 7. 24. 00:07

☆ 태그 적용 안되게..텍스트로...

htmlspecialchars(변수);

htmlspecialchars 함수는 HTML의 특수문자변환 함수로

< 는 &lt; 로 변환하고

> 는 &gt; 로 변환합니다.

★ addslashes() 함수
게시판에 글쓰기할때 사용자들이 특정문자를 입력하면 데이타베이스에 저장할때 오류가 발생할 수 있는데 이 함수는 따옴표나 \(역슬래쉬) 같은 문자들을 포함하고 있는 것에 문자열에서 해당문자의 앞에 역슬래쉬 문자를 집어넣어서 반환해주는 함수임.
예를 들어, $a 라는 php 변수에 방명록에 입력된 내용이 기억되었다고 가정할때
프로그램에서 다음과 같은 명령을 썼다고 가정해보면..
query문으로 insert into dbtable (bang) values ('$a');
그런데 $a에 입력한 사람이 '설악산'이 좋아요.
라고 입력하면 php에서 파싱한 후에는 다음과 같은 query문이 되겠죠.
insert into dbtable (bang) values (''설악산'이 좋아요.');
이와 같이 되면 정확한 내용이 디비테이블에 저장될 수가 없습니다.
에러가 납니다. 문법이 안 맞다고..

따라서 $a = addslashes($a) 해준 다음에 query를 준다면 다음과 같은
의미로 변하고 정상적으로 저장되겠죠.
insert into dbtable (bang) values ('\'설악산\'이 좋아요.');
이와같이 특수문자로 부터 발생될 수 있는 에러를 피하기위해
특수문자 앞에 역스래쉬를 붙여주는 일을 하는 함수입니다.

나중에 DB에서 읽어와서 웹브라우저에 뿌려줄때는 원래대로 되돌려서
출력해야하니까 백슬래쉬를 제거해주는
함수를 사용해야하는데 이것이 stripslashes() 함수라지요..

★ 텍스트박스..

<TEXTAREA name="" STYLE="ime-mode:active; overflow:auto">

한/영 키를 누르지 않고도 한글로 나오게 하려면 ime-mode:active;

그냥 영어 나오게 하려면 ime-mode:inactive;

텍스트박스에 스크롤 필요시에만 생기게 하려면 overflow:auto

아예 없애려면 overflow:hidden

참고) textarea에서는 태그가 텍스트로 나온다;;

그래서 사용하는 방법은 textarea를 hidden으로 하고 레이어나 아이프레임을 써서 한다고 하는데

아직 해보진 않았다;;

사실..이모티콘을 선택하면 텍스트박스안에 이모티콘이 나오게 하려고 했으나;;

하다가 포기하고 원시적인 방법으로 대충 해결..-_-;;

☆ 글쓰면 밑줄 나오게 하는 방법..

방법이야 여러가지가 있겠지;;

리스트를 보여줄때는 하나 뿌려줄때마다 밑줄 이미지도 뿌려주게 하면 될테고..

근데 글 내용을 보여줄때 밑줄나오게 하는거라;;

배경으로 넣으면 된다네요..

<div style='background-image: url(밑줄이미지경로); font-size:9pt; line-height:30px'>

밑줄이미지 예) http://myhome.naver.com/plandas/bgLine.jpg

->퍼온거라누가만들었는지는 잘 모름

[출처] 태그 적용 안되게.. & 텍스트박스 & 글내용 밑줄|작성자 진쓰

,
팝업 POST 전송 , 팝업 액션 웹프로그램/스크립트 2012. 7. 11. 18:03

팝업 POST 전송

 

var width = 400;
        var height = 500;
        var left = (screen.width/2)-(width/2);
        var top = (screen.height/2)-(height/2);       
        var win = window.open ("", "popupWindow", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width='+width+', height='+height+', top='+top+', left='+left);
        document.searchForm.target = "popupWindow";     
     document.searchForm.action = "<c:url value='/talk/store/massageRegit.do'/>";
     document.searchForm.submit();

,
[JSTL] 기본 JSTL 테그 웹프로그램/스크립트 2012. 7. 9. 10:31

Expression Language는 JSP에서 기본으로 지원한다
세팅해야 할 것은 JSTL( JavaServer Pages Standard Tag Library ) 이다

1. 다운로드
http://tomcat.apache.org/ - Taglibs - Standard - JSTL 1.1 download - binaries - jakarta-taglibs-standard-1.1.2.zip

2. 설치

다운로드 받은 파일에 압축을 풀고 lib 폴더의 jstl.jar 와 standard.jar 파일을 /WEB-INF/lib 에 복사 후
JSP 파일 상단에 다음의 지시문을 추가한다
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
( core 태그 lib만 추가하였고 그외 fmt, sql, x 태그를 사용하기 위해선 지시문을 추가해야 한다 )
tip) 이클립스에서 JSP 생성시 자동으로 소스 추가하는 방법
window - Prefrences - Web - JSP Files - Templates - JSP HTML에 내용 추가

3. Expression language

EL이란 JSP에서 저장객체를 출력할때 스크립팅을 전혀 쓰지 않을 수 있는 기술이다
이것으로 인해 <%=request.getParameter("name")%> 와 같은 스크립팅 들을 쓸필요가 없어진다
(1) 저장객체 접근

${param.name} => request.getParameter("name");

${member} => request.getAttribute("member");

저장객체의 attribute 에 자동으로 접근하는데
자동검색순위는 page, request, session, application 순이다

${member.name} => Member m = (Member)request.getAttribute("member");
m.getName();

attribute 저장된 member의 name속성(또는 키)에 접근
도트(.) 의 왼쪽은 Beans 이거나 Map 타입이어야 한다


${list["0"]} => List list = (List)request.getAttribute("list");
list.get(0);
attribute 저장된 list를 가져온다
[]안에 값은 list의 키값 or 프로퍼티명 or 인덱스이다
[]의 왼쪽은 Map, Beans, 배열, List 타입이 올 수 있다

여기서 알아야 할 점이 하나 있는데 EL에서는 해당값이 null이거나 공백일 경우에는
아무 내용도 표시하지 않고 에러도 발생하지 않는다..

(2) 연산자
EL은 연산자들을 사용할 수 있다. 예제는 JSTL에서 같이 사용하는걸 보자

1) 산술연산자 : + - * / (div) % (mod)
2) 논리연산자 : &&(and) ||(or) !(not)
3) 관계연산자 : ==(eq) !=(ne) <(lt) >(gt) <=(le) >=(ge)
4) 삼항연산자 : ?:
예) ${colors == null ? "transparent" : colors}

5) 그 외 예약어 : true, false, null, instanceof, empty( null이거나 공백일때 )

4. JSTL

core태그 중에서 유용한 것들만 살펴보자
모든 내용을 보고 싶다면 JSTL 매뉴얼 참조
태그에 진하게 표시된 속성은 필수 항목이다

(1) <c:out>

단순히 내용을 출력하는 기능이다

<c:out value="${member.name}" default="이재원" />

위와 과 같이 쓸 경우 일반적으로 ${member.name} 을 쓴것과 같지만
${member.name}이 null일 경우 dafault에 있는 값으로 대채한다

(2) <c:set>

저장객체의 setAttriubte 기능을 한다

<c:set var="addr" value="myaddr" scope="session" />
<c:set var="no" value="${member.age+1}" />
첫번째는 session 에 addr 이란이름으로 myaddr 스트링을 저장한 것이다
두번째는 no 이란이름으로 member.age+1으로 산술연산된 값을 저장하는데
scope를 생략하면 기본으로 page에 저장된다

(3) <c:remove>
removeAttribute의 기능을 한다

<c:remove var="no" scope="page" />

지정된 scope의 no란 이름이 attribute를 remove한다
scope를 생략할 경우 모든 범위의 attribute 가 지워진다


(4) <c:if>

if 조건문을 사용한다.. 단 else if 와 else는 지원하진 않고 유사한 <c:choose> 가 존재한다

<c:if test="${member.age < 20}" var="result" scope="page">
당신은 미성년자입니다
</c:if>
<c:if test="${!empty list}" >
content
</c:if>

test에서 조건을 검사하고 true 일 경우에만 <c:if>태그안의 내용이 보여진다
여기서 EL 의 연산자들을 쓸 수 있다!!

var는 조건을 검사하고 리턴되는 boolean값을 저장하는 attribute이름이고
scope는 var가 저장되는 범위입니다. scope가 없을시 기본값은 page이다


(5) <c:choose>

if, else if, else 와 유사하다. 아니 똑같다고 봐도 된다
<c:choose> 태그안에는 <c:when> 과 <c:otherwise>가 들어간다
<c:choose>
<c:when test="${vo.type==1}">
<img src="<%=cp%>/images/antenna/type1.jpg" />
</c:when>
<c:when test="${vo.type==2}">
<img src="<%=cp%>/images/antenna/type2.jpg" />
</c:when>
<c:when test="${vo.type==0 or vo.type==3}">
<img src="<%=cp%>/images/antenna/type_ment.jpg" />
</c:when>
<c:otherwise>
<img src="<%=cp%>/images/antenna/type_heart.jpg" />
</c:otherwise>
</c:choose>

<c:choose>안에서 순서대로 <c:when> 의 조건문을 검사해 true가 나오면
해당 <c:when> 태그안에 내용을 보여주고 <c:choose>문은 끝나게 된다

만약 모든 <c:when>의 조건문이 false일 경우 <c:otherwise>안에 내용을 보여주게된다


(6) <c:forEach>

Collection을 반복할때 쓰인다. 게시판 같은 반복적인 처리를 할때 매우 유용하다

지원되는 컬렉션을 다음과 같다
Arrays ( 배열 )
java.util.Collection
java.util.Iterator
java.util.Enumeration
java.util.Map

<table>
<c:forEach items="${list}" var="notice" varStatus="status">
<tr>
<td>${status.count}</td>
<td>${notice.title}</td>
<td>${notice.writer}</td>
<td>${notice.wdate}</td>
<td>${notice.readcount}</td>
</tr>
</c:forEach>
</table>

items는 Collection 객체를 말한다
var는 Collection에서 객체를 하나씩 가져올때마다 담는 객체다
그 객체가 Beans일 경우 Beans클래스를 자동으로 찾아 담는다
varStatus는 일련의 속성들을 정의한 객체다 ( javax.servlet.jsp.jstl.core.LoopTagStatus )

다음은 일반적은 for문 처럼 사용한 예다

<c:forEach var="x" begin="0" end="10" step="2">
${x},
${x*x}
</c:forEach>
(7) <c:forTokens>

<c:forEach> 와 같이 반복 태그로 이것은 StringTokenizer 클래스를 이용한다.. 그다지 쓸일은 없다
구분자( delims ) 를 공백, 쉼표, 마침표 로 한 예이다

<c:forTokens items="${param.text}" delims=" ,." var="word" begin="1" end="10" step="1" >
${word}
</c:forTokens>

 

,
[jQuery] 사용법 , 체크박스 선택유무 웹프로그램/스크립트 2012. 7. 8. 18:57

 

 

 1. 체크박스 선택 유무   :::::   방법 1

 var iCkecked = 0 ;
   $("input[name^=ckbTemplet]").each(function(){
        if(this.checked){
         iCkecked++;
        }
       });
   if(iCkecked ==0 ){
    modal.alert(" 파일을 선택해주세요.");
    return;
   }

 

 체크박스 선택 유무 ::::: 방법 2

 

 $('input:checkbox[name=userGroup]:checked').length

 

 

 라디오 값 가져오기
 
$('input:radio[name=timeType]:checked').val()

 

 

 

 

 2.  trim

  var str = $.trim(value);

 

 

 

3. 선택된 값 읽기

 

$("#select_box option:selected").val();
$("select[name=selectbox]").val();

jQuery로 선택된 내용 읽기
$("#selectbox option:selected").text();

 

 

 

 

 

 

 

http://hanjiq.egloos.com/2358924 기초 예제

http://pat.im/906 -박스 서서히 사라지는 예제

http://rubis.tistory.com/294  ajax 예제

http://leandrovieira.com/projects/jquery/lightbox/ 이미지 박스에 하이라이트

http://www.mimul.com/pebble/default/2007/11/10/1194695220000.html  이미지 로더 ? 반만 다운후 다보이게

포문

 <html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
 src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">    function test() {        var a = 0;        var su =1;        $('div:[id^=div]').each(//각각div:안에 있는  div로 시작()^=)하는 id 호출함                function(){                    a +=0.25;//this는 자바 속성인데 $(안에 들어가면 jquery 추가됨)                    $(this).html(su++).css('background', 'rgba(255,0,0,'+a+')')                    .css('textAlign', 'center');//html(이안에 html로 쓰겠다는 소리)                })    }</script>
</head>
<body>
 <input type="button" value="바꾸기" onclick="test()">
 <div id="div1" style="border: 1px dotted; width: 300px; height: 50px;"></div>
 <div id="div2" style="border: 1px dotted; width: 300px; height: 50px;"></div>
 <div id="div3" style="border: 1px dotted; width: 300px; height: 50px;"></div>
 <div id="div4" style="border: 1px dotted; width: 300px; height: 50px;"></div>
</body>
</html>

 

http://findfun.tistory.com/404  --예제 많음

--> http://findfun.tistory.com/421  ---- trim

--> http://findfun.tistory.com/414   ----- 오브젝트 배열로 만들기 ~

--> http://findfun.tistory.com/410 ---숫자 체크

--> http://findfun.tistory.com/408 -- isPlainObject()  오브젝트 가 맞는지 확인

--> http://findfun.tistory.com/403 -- each 반복문 ..

--> http://findfun.tistory.com/401   -- ajax 할때 파라메타 쉽게 만들기

--> http://findfun.tistory.com/400 -- ajax post

http://blog.naver.com/tweety2411?Redirect=Log&logNo=100161568560   ajax 파일 업로드

http://malsup.com/jquery/form/#file-upload 파일 업로드

http://stackoverflow.com/questions/2259551/spring-3-0-making-json-response-using-jackson-message-converter?rq=1  

,
[javascript]라디오버튼 체크 유무확인 웹프로그램/스크립트 2011. 8. 18. 11:33

var iCnt = 0 ;
  for(var i=0; i<document.fm.elements["파라메타명"].length ; i++){
   if(document.fm.elements["파라메타명"][i].checked ==true)
    iCnt++;
  }
if (iCnt ==0) {
   alert("선택해주세요");
   document.fm.elements["파라메타명"][0].focus();  
   return;
  }
,
[javascript] 자바스크립트 바이트 자르기 웹프로그램/스크립트 2010. 12. 14. 17:10


/////// 바이트 개산 시작 ///// 사용법 onkeyup="textCheck(this,200)" 
 function textCheck(obj,num){
  storeCaret(obj);
  var strtext = obj.value.trim();

  if(strlen2(strtext)>num){   
   strtext = strtext.substr(0,iStrAt(strtext,num));
   alert(num+"byte 까지 작성 가능합니다.");  
   obj.value = strtext;         
  }    
 }
 function strlen2(str) 
 { 
   var i, j=0; 
 
   for(i=0; i<str.length; i++) 
   { 
  val = escape(str.charAt(i)).length; 
  if(val== 6) 
    j++; 
  j++; 
   } 
   return j; 
 }
 function storeCaret(objThis)
 {
  if (objThis.createTextRange)
  {
   objThis.caretPos = document.selection.createRange().duplicate();
  }
 }
 function iStrAt(str,num) 
 { 
   var i, j=0,k=0; 
 
   for(i=0; i<str.length; i++) 
   { 
  val = escape(str.charAt(i)).length; 
  if(val== 6) 
    j++; 
  j++; 
  k=i;
  if(j>num){
   return i;
   break;
  }
   } return k;    
 }

/////// 바이트 개산 종료 /////

,
[javascript] TD 줄바꿈 웹프로그램/스크립트 2010. 11. 25. 13:15

[스타일시스] 글자 줄바꿈과 줄바꿈 금지

한글은 줄바꿈이 되는데 영문은 줄바꿈이 되지않는 현상이있다.
이럴 경우에는  TD 속성 또는 테이블 전체 스타일 속성에  해당  명을 쓰면
줄바꿈이  정상적으로 이루어진다....
--- 글자길이만큼 체크해서 줄바꿈 할려고햇다 ㅋㅋㅋ 이런 쉬운게 ---

1. 우선 강제로 줄바꿈(영문이 줄바꿈 되지 않을때)
글자하나하나를 인식하여 줄바꿈을 합니다.
<td width="50%" style="word-break:break-all">영어 내용</td> </tr>
2. 줄바꿈 금지
<td width="50%" nowrap></td>
,
[자바스크립트]자바스크립트 콤마찍기, 인풋입력에 콤마찍기 웹프로그램/스크립트 2010. 10. 29. 18:31


<html>
<head>
 <title></title>
 <script type="text/javascript">
 
 function commify(obj) {
  var n = obj.value;
  n = unNumberFormat(n);
    var reg = /(^[+-]?\d+)(\d{3})/;   // 정규식
    n += '';                          // 숫자를 문자열로 변환
    while (reg.test(n))
      n = n.replace(reg, '$1' + ',' + '$2');
   
    obj.value = n;     
 }

 function numberFormat(obj) {
  var pattern = /(-?[0-9]+)([0-9]{3})/;
  while(pattern.test(num)) {
   num = num.replace(pattern,"$1,$2");
  }
  return num;
 }

 //콤마제거
 function unNumberFormat(num) {
  return (num.replace(/\,/g,""));
 }  
 
</script>


 <input type=text name='aaaa' onkeyup="commify(this)"/>
</head>
<body>

</body>
</html>

여기저기 퍼와서 만들었다....

,
[자바스크립트] 이미지 크기 확인 웹프로그램/스크립트 2010. 10. 14. 15:39

function imgeCheck(obj,x,y)
 {
  var value = obj.value;
     var imgInfo = new Image();
     imgInfo.src = value;
  var imgWidth = imgInfo.width;
  var imgHeight = imgInfo.height;
  
  if((imgWidth != x && imgHeight !=y )){        
   return true;
  }
 
  return false; 
 }

,

티스토리툴바