오늘은 제이쿼리로 첨부된 파일의 확장자 및 용량, 특수문자 체크하는 방법을 알아볼게요. 코딩을 하다보면 첨부된 파일을 체크해야 하는 경우가 있습니다. jQuery 파일 확장자, 용량, 특수문자 확인 하는 방법 1) 첨부된 파일의 확장자 체크 2) 첨부된 파일의 용량 체크 3) 첨부된 파일의 특수문자 체크 보통 체크하는 부분이 저정도 인데 저부분을 제이쿼리로 어떻게 처리하는지 알아보겠습니다. 테스트로 인풋과 버튼을 만들어서 버튼을 클릭시 체크해보겠습니다. html 코드 1) 첨부된 파일의 확장자 체크 function uploadFile() { var fileVal = $("#file").val(); if( fileVal != "" ){ var ext = fileVal.split('.').pop().toLo..
오늘은 제이쿼리로 객체(Object)를 확인하는 방법을 알아볼게요. 제이쿼리 Object 객체 빈값 체크하는 방법 jQuery에 내장되어있는 isEmptyObject 함수를 사용하여 객체의 빈값을 체크해보겠습니다. jQuery.isEmptyObject({}); //true jQuery.isEmptyObject({name : 'joon'}); //false $.isEmptyObject({}); //true $.isEmptyObject({name : 'joon'}); //false 결과 jQuery 1.4 부터 isEmptyObject 메소드는 객체 자체의 속성과 프로토 타입에서 상속 된 속성을 모두 확인합니다. hasOwnProperty를 사용하지 않습니다. Object의 다른 유형의 개체(Dom Elem..
jquery로 동적으로 테이블 행 생성하기, 테이블 row추가하는 방법 개발을 하다보면 테이블에 행을 추가하는 경우가 생깁니다. 어느 특정 액션(버튼을 클릭) 을 한다든지, 특정함수를 호출을 하였을때 말이죠. 이러한 경우 jQuery append를 통해 테이블을 동적으로 생성할 수 있습니다. 테이블 샘플 데이터 생성 테이블 동적 생성 회원아이디 회원명 회원주소 hong99 홍길동 서울 sejong80 세종대왕 대전 테이블 행추가 샘플로 테이블을 만들었습니다. 현재 테이블에는 홍길동, 세종대왕 두행이 있습니다. 아래 테이블행추가 버튼을 클릭하여 동적으로 테이블 행을 생성해보겠습니다. 테이블 동적 생성 스크립트 우선 새로운 행을 어디에 넣을지 지정을 해야합니다. tbody 에 저는 memDiv 라는 아이디를..
serialize()에 파라미터 추가하는 방법 입력받은 값이나, 파라미터를 전송할때 serialize() 를 자주 사용합니다. form 안에 있는 name이 있는 모든 데이터를 한번에 담을수 있기 때문입니다. var formData = $("#memberForm").serialize(); 위와 같은 방식으로 var에 form에 있는 모든데이터를 저장하여 GET,POST 방식으로 파라미터를 전송합니다. serialize()를 사용하지 않는다면, 각 id,name으로 값을 불러와서 각각 담아야 하기 떄문입니다. 개발을 하다보면 form안에 파라미터로 전송할 데이터를 못담는 경우가 생깁니다. 이럴경우 serialize()에 추가로 원하는 데이터를 추가하는 방법을 알아볼게요. form 안에 샘플데이터를 넣어보겠..
자바스크립트, 제이쿼리 문자열 공백제거 방법(trim, 정규식) 공백제거는 개발을 하면서 많은 로직에 사용됩니다. jQuery에서 trim() 이라는 내장함수를 사용하여도 되고, 정규식을 사용하여 공백을 제거할 수 도 있습니다. 공백제거가 필요한 경우는 언제인가요? 1. 검색기능에서 공백제거를 사용하여 파라미터를 전송할 경우. -> 입력을 받는 입력창에서는 사용자가 어느것을 입력하기 예측하기 힘듭니다. 공백이 포함되어 원하는 검색결과가 나오지 않을 수 도 있습니다. 그렇기 떄문에 로직에 맞춰 공백을 제거할 수 있습니다. 2. url주소나, 입력받은 데이터를 공백없이 변환이 필요한 경우 -> 주소변환시나, 데이터 공백없이 저장이 필요한 경우 공백제거가 필요합니다. jQuery trim()을 사용하여 공백제..
window.open() 개념 완벽정리, 윈도우 팝업 설정하는 방법 프로그래밍 개발을 하다보면 팝업을 띄우는 일은 많습니다. 팝업을 띄우면서 옵션도 설정을 할 수 있는데요. 오늘은 window.open() 팝업에 대한 모든 개념을 정리해보도록 하겠습니다. window.open() 개념 var popup = window.open(url, name, option); var popup = window.open('팝업주소', '팝업창 이름', '팝업창 설정'); 팝업 클릭시 네이버창 팝업 띄우기 팝업 팝업을 여는 위치 설정 팝업을 띄울때 위치를 설정 할 수 있습니다. - target="_blank" : 팝업을 새창에서 엽니다. target을 입력하지 않으면 default 값입니다. - target="_paren..
JSON(JavaScript Object Notation) 데이터 쉽게 추가, 삭제하기 데이터를 저장하거나, 전송할때 사용하는 경량의 DATA 교환 형식입니다. JSON은 사람과 기계가 이해하기 쉬위며, 용량이 작아 xml을 대체하여 데이터 전송에 사용합니다. JSON 데이터 추가방법 아이디에 값을 설정하면 됩니다. 오브젝트.ID = VALUE JSON 데이터 삭제 delete 오브젝트.ID JSON 데이터 추가 삭제 예제 //Json 오브젝트 생성 var jsonObject = {GOODS: "컴퓨터", PRICE: 13000, STOCK: 30}; //Json 오브젝트 추가 //오브젝트.ID = VALUE; jsonObject.MD= 'STEVEN'; //JSON오브젝트 삭제 delete json.S..
jQuery undefined, null 체크하기 프로그램 코딩시 문자열 또는 값을 확인하는 경우가 많습니다. javascript undefined 체크를 하는 방법을 알아보겠습니다. 결과로는 null 과 undefined는 둘다 값이 없습니다. undefined란? 정의되지 않음. 변수가 초기화 되어있지 않는 상태 null이란? 변수에 값이 없는 상태 null, undefined 차이점 undefined는 변수를 선언만 하고 값은 없는상태. null은 변수를 선언하고 안에 값을 null로 넣음. 이렇게 생각하시면 이해가 편하실 거에요. var dd ; -- undefined var dd = null; -- null 아래의 코드에서 출력은 어느것이 될까요? dd의 값이 없기떄문에 AAAAA가 콘솔출력이 ..
jquery hover 마우스 오버 사용법 hover() 요소 또는 객체에 마우스가 포인터가 올라왔을때, 그리고 마우스 포인터가 요소를 떠날때 이벤트를 설정할 수 있습니다. 사용법 .hover( handlerIn(eventObject), handlerOut(eventObject) ) 체험해보기 ↓↓↓아래 마우스를 올려보세요. 여기에 마우스를 올려주세요. 마우스를 올려주세요. -> span에 아이디를 지정하여 span에 있는 텍스트를 hover 이벤트로 컨트롤 해볼게요. $('#testSpan').hover(function() { //이부분은 마우스가 올라 요소 위에 올라왔을때 이벤트입니다. $("#testSpan").text("Hover 적용"); }, function(){ //이부분은 마우스가 요소에서..
input 숫자만 입력하기 안녕하세요 오늘은 jQuery로 input 창에 숫자만 입력되는 방법을 알아보겠습니다. 1. attribute 를 이용하여 숫자만 입력 input창에 numberOnly 라는 attribute를 설정합니다. jQuey로 numberOnly로 설정되어있는 속성을 찾아 정규식을 사용하여 keyup 이벤트를 설정하는 법입니다. 정규식을 사용하여 숫자가 아닌것이 입력이 되면 replace 합니다. 속성을 사용하면 좋은점은 원하는 input창에 지정한 속성만 기입하면 어디든지 사용할 수 있습니다. 아래 인풋창에 테스트해 보세요. 2. 함수를 만들어서 숫자만 입력 keycode를 이용하여 함수를 만들어서 숫자만 입력 설정합니다. keycode를 사용하면 아예 입력조차 못하게 막아버립니다...
[jQuery] 제이쿼리 위젯 datepicker 간단사용법 제이쿼리 datepicker 위젯은 날짜를 선택할 수 있는 자바스크립트 달력을 지원합니다. 웹사이트에서 회원가입이나, 검색하는곳에서 조회조건으로 달력은 정말 유용한 자원으로 사용됩니다. 제이쿼리 공식 사이트입니다. https://jqueryui.com/datepicker/ Datepicker | jQuery UI Datepicker Select a date from a popup or inline calendar The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calend..
[jQuery] 제이쿼리 셀렉트박스(selectbox)값 가져오기 해결 안녕하세요. 오늘은 selectbox 값 가져오는법을 알아볼게요. 제이쿼리는 id 와 name으로 제어가 가능하죠. 아이디로 셀렉트박스 값 가져오기 $("#아이디 option:selected").val() 네임으로 셀렉트박스 값 가져오기 $("select[name=네임]").val() 아래는 ID,NAME으로 select 값을 가져오는 예제 소스 입니다. 사과 포도 바나나 참외 데이터가져오기 아래는 selectbox의 value가 아닌 text를 가져와볼게요. option value의 값이 아닌 option의 텍스트를 가져오는거에요. .text()를 통해서 가져올수 있습니다. $("#아이디 option:selected").text()..
[jQuery]제이쿼리 숫자(천단위)콤마 찍기 및 제거 안녕하세요 오늘은 숫자 천단위마다 콤마 찍는 코딩을 할게요. 숫자 콤마가 필요할 경우에는 보통 금액을 표시할떄 사용을 많이 하죠. 가독성이 높이기 때문에 천단위 구분 콤마를 사용합니다. js로 따로 만들어서 공통으로 만들어 놓는다면 유용하게 쓸수 있어요. 일단 정규식으로 천단위 콤마를 제거하는 방법입니다. 정규식으로 사용하면 정말 간단합니다. 다음은 펑션으로 만들어서 구현해볼게요. js에 한번 구현해놓으면 관리하기두 편하겠죠 ㅎㅎ 이번엔 콤마를 제거해볼게요. 정규식으로 구현하면 간단하게 구현가능합니다. 다음은 펑션으로 만들어서 구현해볼게요. js에 한번 콤마추가, 콤마제거 함수를 한번에 구현해놓는게 편합니다. 이번엔 input 창에 숫자입력시 자동으..
[jQuery] 제이쿼리 each() 반복문에 대해서 알아보겠습니다. 반복문이란? 프로그래밍에서 아주 중요한 작업입니다. 특정작업을 반복하는 프로그래밍 문법이죠. 우리가 익히 알고 있는 for문 for(var i=0; i
[jQuery]제이쿼리 fadeIn, fadeOut 이펙트 효과 사용하기 안녕하세요. 오늘은 제이쿼리의 fade 효과에대해서 알아볼게요. .fadeIn() : 실행시 숨겨진 요소를 나타나게 한다. .fadeOut() : 실행시 요소를 사라지게 한다. .fadeToggle() : 실행시 fadeIn() 메소드와 fadeOut() 메소드를 번갈아 가면서 적용한다. .fadeTo() : fade 효과에서 사용하는 opacity 속성값을 직접 설정한다. 직접 코드로 확인해보죠 jQuery fadeIn() Method 페이드 인 실행 $("#testDiv2").fadeIn("slow"); // 속성을 slow로 주었습니다. fast/slow로 설정할수 있습니다. .fadeIn("slow") // 600 .fade..
[jQuery] 제이쿼리 attr(), prop() 차이점을 알아보자 JAVA 1.6버전을 기준으로 차이가 있다. 1.6버전 이하에는 attr()에서 property와 attribute가 구분되지않고 사용되었으나 1.6버전 이후부터는 attr()는 속성(attribute), prop()는 프로퍼티(property)를 나누어 사용하게 되었다. 프로퍼티와 속성은 내용이 다른데 같이 사용하고 있었다. 개발자가 사용하는데 혼란이 있어 아마도 나누어 버린것같다. attr() HTML의 속성(attribute)를 취급 prop() HTML의 프로퍼티(property)를 취급 attr는 속성값이나 정보를 조회하는곳에 사용할때 (style, src등등) 사용하고 --> html attribute 값이 모두 String..
[jQuery] 제이쿼리 checkbox checked, 전체 선택, 전체 해제[체크박스] 안녕하세요 오늘은 제이쿼리로 체크박스 전체선택/전체해제 그리고 체크박스 값을 가져오는 코드를 알아볼게요. 1. ID 또는 NAME으로 체크박스의 체크여부를 가져오는 코드입니다. $("input:checkbox[id='ID']").is(":checked") == true : false // 아이디로 체크박스 체크여부 체크 $("input:checkbox[name='NAME']").is(":checked") == true : false // 네임으로 체크박스 체크여부체크 // 또는 $("input[type='ID']").prop("checked"); // prop을 이용하여 체크박스 체크가 가능합니다. //아래는 예제..
제이쿼리 쇼 / 하이드 jQuery show() show() 요소를 보여줄때 사용합니다. .css("display","block") 와 동일 $('#goodsBtn').click(function() { $("#goodsDiv").show(); // goodsBtn을 클릭하면 goodsDiv를 보여줘라 }) jQuery hide() show() 요소를 숨길때 사용합니다. .css("display","none") 와 동일 $('#goodsBtn').click(function() { $("#goodsDiv").hide(); // goodsBtn을 클릭하면 goodsDiv를 숨겨라 }) 아래는 쇼/하이드 자바스크립트 예제소스입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18..
제이쿼리 포커스 인/아웃이란 jQuery focusout focusout() 포커스 아웃 이벤트는 요소(또는 하위요소)가 포커스를 잃을때 발생합니다. $('#focusId').focusout(function() { // input 창안에 focus가 들어올때 event }) jQuery focusin 포커스 인 이벤트는 요소(또는 하위요소)가 포커스를 얻을때 발생합니다. $('#focusId').focusin(function() { // input 창안에 focus가 들어올때 event }) 아래는 포커스인/아웃 자바스크립트 예제소스입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $('#focusId').focusin(function() { // input 창안에 fo..