Programming language/Javascript,jQuery
-
jQuery는 사용법만 알면 참 편리하다. 먼저 체크박스를 해제하는 방법은 다음과 같다. 1$("input:checkbox[id='id값']").prop("checked", false); cs 반대로 체크박스를 체크하는 방법은? 1$("input:checkbox[id='id값']").prop("checked", true); cs 현재 토이프로젝트로 진행중인 부분에 이 방법을 사용한 곳이 있다. 방명록 쪽에서 비공개(체크박스)로 글을 남길 경우 글 등록에 성공하면 체크박스를 다시 처음으로 복귀시켜야 했다.(화면 새로고침이 아닌 비동기식 설계를 했기 때문에) 코드의 일부버튼 클릭 시 create_check() 함수가 실행되는데 몇가지 체크 후 create_proc() 함수를 다시 호출한다.ajax 처리 후 ..
[jQuery]체크박스 체크하기 2018. 11. 27. -
jQuery를 이용한 체크박스 체크여부를 구하는 방법은 다음과 같다. var yn = $("input:checkbox[id='체크박스의 id값']").is(":checked");이 때 yn이라는 변수는 boolean 타입으로 체크여부에 의해 "true" 또는 "false" 값을 갖는다. 예제) list.jsp123456789function showHidden(){ if($("input:checkbox[id='customControlAutosizing']").is(":checked") == true) { $('#g_password').attr('disabled', false); } else { $('#g_password').attr('disabled', true); } }Colored by Color Sc..
[jQuery]체크박스 체크여부 2018. 11. 22. -
요즘 포트폴리오 용도로 사이트를 하나 개발중인데 브라우저 타입이 IE일 때와 크롬일 때 실행차이가 있는 부분이 있다...ㅠㅠ물론 브라우저 시장이 크롬이 독보적이긴 하나 예외사항은 언제나 있으니까.. 이 부분은 따로 처리해줘야할 것 같았다. fullpage.js라는 오픈소스를 사용해서 한 페이지를 길게 사용할려고 했는데 크롬에서는 정상적으로 되는데 IE에서는 아래처럼 나온다. 이유를 찾아보다가 차라리 접속 브라우저가 IE일경우에는 다른 페이지를 출력시키는 것도 괜찮을 것 같다는 생각이 들었다. 그리고 그 페이지에는 포트폴리오 pdf파일을 업로드 시켜놓을 계획이다. 각설하고 구글링을 시작했다.브라우저 타입 체크는 어렵지 않았다.IE 11버전의 경우 조금 까다롭긴했지만 아래와 같이 잡을 수 있었다. 12345..
[Javascript]브라우저 체크하기 2018. 10. 29. -
우리가 흔히 사용하는 자바스크립트의 문법을 단순화시켜주는 것이 jQuery입니다. ☞ jQuery는 자바스크립트 언어를 단순화할 수 있도록 설계된 자바스크립트 라이브러리입니다. 오늘 정리할 내용은 jQuery의 Ajax에 관한 것입니다. Ajax Ajax를 이용하면 페이지의 이동없이 데이터 교환 및 화면 갱신이 가능하다. 이를 비동기 처리라고 한다. 일반적으로 사용자가 어떤 요청을 했을 때 화면은 반짝이고 요청한 내용이 눈에 보이게 된다. Ajax를 이용하면 그런 과정이 생략되는 것이다. 우리가 사용하는 댓글 기능이 대표적인 예라고 할 수 있을 것 같다. Ajax의 문법은 다음과 같다. $.ajax({ url: "", type: "", cache: , dataType: "", data: "", succe..
[jQuery]Ajax 예제 2018. 10. 28. -
보완할 포트폴리오를 구상하면서 한 화면안에서 움직이는 포폴을 생각했었다. 그러다 찾게된 fullpage.js 오픈소스를 공개해준 분께 참 감사하다 ㅠㅠ 사이트 : https://alvarotrigo.com/fullPage/ko/ 깃헙 주소 : https://github.com/alvarotrigo/fullpage.js 사용법까지 친절하게 나와있다. 이클립스를 켜고 예제 파일을 실행해보자. 먼저 사이트에 접속하면 zip 파일을 다운로드 받을 수 있다. 압축을 풀면 examples라는 폴더가 있다. 해당 폴더 안에서 원하는 디자인을 하나 선택하여 코드를 복사+붙여넣기 한다. (프로젝트를 만들고 jsp, was를 설정하는 부분은 생략) 이제 프로젝트에 js 파일과 이미지 파일을 복사+붙여넣기 한다. ☞ exa..
fullpage.js 사용법 2018. 9. 10. -
웹 프로젝트를 하면 주로 게시판을 만드는 것이 첫 걸음이 된다.파일 확장자 체크를 알아두면 자유게시판을 만들 때 업로드할 수 있는 이미지 파일 확장자를 제한할 수 있다. 이미지 파일의 확장자를 구하는 것 역시 자바스크립트를 이용하면 어렵지 않다.아래의 코드를 보자. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 이미지 구하기 function imgCheck(img){ alert(img); frm.preview.src = ""; frm.preview.src = img; var preview = document.getElementById('preview'); var width = previe..
[Javascript]파일 확장자 체크하기 2018. 8. 31. -
자바스크립트로 이미지의 크기를 구하는 법은 어렵지 않다. 예전에 회원 이미지를 리사이징할 때 사용했던 방법인데 먼저 프리뷰 이미지를 하나 만든다.(id="preview") 그리고 파일을 첨부하는 input 태그에서 onchange 이벤트를 건다. 그리고 이벤트 실행 함수로 파일의 값을 태워보낸다. 아래 코드를 보자. frm.preview.src = ""; 를 해준 이유는 onchange 이벤트가 발생했을 때 기존에 있는 이미지의 속성을 초기화시켜주기 위함이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 이미지 구하기 function imgCheck(img) { alert(img); ..
[Javascript]이미지 크기 구하기 2018. 8. 31. -
DOM(Document Object Model)DOM은 Document Object Model의 약자로 번역 그대로 문서 객체 모형으로 해석이 가능하다. W3SCHOOLS의 말을 빌려보면 DOM은 W3C (World Wide Web Consortium) 표준으로서 프로그램 및 스크립트가 문서의 내용, 구조 및 스타일을 동적으로 액세스하고 업데이트 할 수있게 해주는 플랫폼 및 언어 중립적 인터페이스이다. 쉽게 DOM은 우리가 HTML 요소를 제어할 수 있게 방법을 제공해준다고 생각하면 된다. 그리고 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작한다.오해하면 안되는 것은 DOM은 자바스크립트에서 정의한 것이 아닌 W3C 표준이라는 것이다. DOM은 아래와 같이 트리 형태의 자료 구조를 가진다.요소가..
DOM(Document Object Model) 2018. 8. 21.