본문 바로가기

자바 웹 개발자가 될거야/JSP

 (39)
[JQuery] Jquery(제이쿼리) 키보드 이벤트 처리, 글자수 제한 - 해당 요소에 대해서 키보드를 이용한 이벤트를 주었을 때 줄 수 있는 여러 행동들이 있다. - keyup() : 키보드에서 손을 뗐을 때 처리 - keypress() : 키보드를 계속 누르고 있을 때 처리 - keydown() : 키보드를 눌렀을 때 처리 ① 키보드로 입력하는 글자수 계산하기 - textarea 폼에서 글자수를 200자로 제한하고 남은 글자를 계산해주는 코드 $(document).ready(function(){ $('textarea').keyup(function(){ $('h3').html("글자수 : "+(200-$(this).val().length)); // 기존의 글자색 -> 빨간색으로 변경 var value = 200 - $(this).val().length..
[JQuery] Jquery(제이쿼리) 마우스 이벤트 처리 - 해당 객체에 대한 마우스 이벤트로 여러가지 변화를 줄 수 있다. - 클릭 이벤트, 마우스 오버 / 아웃에 대한 이벤트를 보여주겠다. ① 클릭 이벤트 - 객체.click() - 버튼을 클릭했을 때 alert창이 뜨게 할 수 있다. (버튼 아닌 다른 요소여도 됨) $('input').click(function(){ alert("버튼클릭 - JQ(Click)"); }); - 요소를 클릭했을 때 옆에 '+' 기호 추가하기 $('h2').click(function(){ $(this).append("+"); }); $(this).html(function(index,html){ return html+"+"; }); · 위 2가지 방법 모두 가능 · 내가 클릭한 것만 인식하기 위해선 'this..
[Eclipse] 이클립스 서버 시작 45초 타임아웃 오류 해결방법 초반에는 이클립스가 잘 작동되더니 프로젝트가 많아지고 라이브러리 같은 걸 많이 만들다보니 어느 순간 오류가 나기 시작했다. 프로젝트를 실행시키면 아래와 같은 오류 창이 뜨고 아예 실행이 되지 않는 상황 발생 .. ! - 오류 메시지: Server Tomcat v8.5 Server at localhost was unable to start within 45 seconds. If the server requires more time, try increasing the timeout in the server editor. - 나는 아래와 같이 해결했다. - 하단에 있는 Servers 탭 클릭해서 'Tomcat v8.5 Server at localhost' 더블클릭 - Overview 창이 뜨는데 그 중 Tim..
[JQuery] Jquery(제이쿼리) each()로 배열 접근하기 - 사용자가 선택한 여러 개의 요소에 순차적으로 접근하는 동작이다 - 배열에서 유용함 - 자바에서 foreach문과 비슷하게 생각하면 될듯 - 아래 두가지 방법이 있다 ( 결과는 같음 ) · $(요소).each(function(매개변수, ...){ } ); · $.each(요소, function(매개변수, ...) { } ); ① 배열의 값들을 테이블에 삽입하기 - 2차원배열은 JSON 형태와 유사하다. - name과 addr은 Object 값들을 불러올 때 쉽게 불러올 수 있다. var arr = [ {name:'홍길동1',addr:'부산'}, {name:'홍길동2',addr:'울산'}, {name:'홍길동3',addr:'서울'}, {name:'홍길동4',addr:'대구'} ]; $..
[JQuery] Jquery(제이쿼리) prepend(), append() - 해당 객체의 앞쪽에 추가할 수 있는 함수 - 해당 태그요소를 적용하여 사용가능 ------------------------------ body 시작 -------------------------- WebContent/jq1/test6.jsp ------------------------------ body 끝 ---------------------------- - 해당 객체의 뒤쪽에 추가할 수 있는 함수 - 해당 태그요소를 적용하여 사용가능 ------------------------------ body 시작 -------------------------- WebContent/jq1/test6.jsp ------------------------------..
[JQuery] Jquery(제이쿼리) 클래스명 부여하기 addClass() - 해당 객체에 클래스명을 부여하는 함수 - body 안에 있는 객체가 많을 때 일일이 클래스명을 부여하지 않아도 되는 방법이다. ① body 안에 있는 에 'high_인덱스번호' 라는 클래스명을 부여해서 뒷배경 색을 각각 부여 item-0 item-1 item-2 item-3 item-4 - addClass()함수를 $('h2')에 적용했을 때 위의 사진처럼 클래스명이 모두 적용되어 마지막 클래스명인 'high_4'로 인식이 된다. - 그래서 style 태그에서 'high_4'의 뒷배경 색인 아쿠아색이 모두 적용되는 것이다. - 각각 배경을 바꿔주려면 this를 사용해야한다. · this : 방문자가 페이지에 방문해서 이벤트를 발생시킬 때마다 해당요소를 가리키는 레퍼런스를 의..
[JQuery] Jquery(제이쿼리) setInterval() 일정주기 반복하기 - 동작을 일정 주기동안 반복하게 해줌 - 제이쿼리 문법이 아니라서 자바스크립트 문법 참고해야한다. https://www.w3schools.com/jsref/met_win_setinterval.asp Window setInterval() Method W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com - setInterval(동작, 반복 주기)..
[JQuery] Jquery(제이쿼리) html(), text() 속성의 값 가져오기 - html() : 해당하는 요소의 가장 처음 대상의 값만 가져옴 · 요소의 자식 태그들의 태그나 문자열을 모두 읽어옴 - text() : 해당하는 모든 요소의 값을 가져옴 · 단순 text로 읽어옴 ① 속성의 값 출력하기 $(function(){ var ht = $('h2').html(); alert(ht+"@@@@"); var tx = $('h2').text(); alert(tx); }); head-0 head-1 head-2 · 의 맨 처음 값만 가져온다. · 의 값 전부를 가져온다. ② 속성의 값 변경하기 - 변경하고자 하는 텍스트를 ( )안에 넣어주면 된다. $('h2').text("hello"); head-0 head-1 head-2 - 속성 값에 연결연산자(+)를 ..

티스토리툴바