남익의 생활

입력폼에 입력되는 값의 유효성 체크하기 두번째 입력폼으로 입력되는 값들의 유효성을 체크한다.1. 샘플예제 사용자 ID : 전화번호 : 날짜 : - 결과화면 2. 소스코드 사용자 ID : 전화번호 : 날짜 : 3. 설명 입력값의 유효성을 RegExp() 함수를 선언하여 체크한다. - 사용자 아이디는 숫자와 문자, "_"기호만 입력이 되도록 체크한다. - 전화번호는 숫자와 "-", "+"기호만 입력되도록 체크한다. - 날짜는 mm/dd/yyyy 또는 mm-dd-yyyy으로만 입력되도록 체크한다. 참조 API( RegExp ) https://www.w3schools.com/js/js_regexp.asp http://www.nextree.co.kr/p4327/ https://developer.mozilla.or..

입력폼의 유효성을 체크하기 입력 폼의 유효성을 체크 한다.1. 샘플예제 사용자 ID : 사용자 나이 : - 결과화면 2. 소스코드 사용자 ID : 사용자 나이 : 3. 설명 1) 사용자 아이디와 나이를 입력받을 입력폼을 생성한다. 2) submit 버튼을 클릭하면 실행될 유효값 체크 이벤트를 생성한다. : 사용자 아이디 폼은 입력 여부 판단. : 사용자 나이 폼은 입력 여부 판단 및 숫자만 입력되어있는지 확인, 5~99까지의 숫자만 입력 여부 판단. - val() : 해당 엘리먼트의 입력값을 가져오거나 설정한다. - text() : 해당 엘리먼트의 텍스트를 가져오거나 설정한다. JUQERYAPI val() : http://api.jquery.com/val/ text() : http://api.jquery..

이벤트 버블링 막기 클릭 이벤트 발생 시 이벤트 버블링 막기 이벤트 버블링의 경우 아래 샘플예제에서 구성을 보면 DIV안에 P안에 SPAN이 위치한 상태에서 개발자는 해당 태그만 클릭하는 경우 클릭한 태그의 클릭 이벤트가 실행되어 원하는 결과를 얻을 수 있도록 하겠지만 실제로 테스트를 해보면 SPAN 태그를 선택하는 경우SPAN - P - DIV 순으로 클릭 이벤트가 실행하기 됨으로써 원치 않는 경우가 발생하게 됩니다.1. 샘플예제 Div Element Area P Element Area Span Element Area - 결과 화면 2. 소스코드 Div Element Area P Element Area Span Element Area 3. 설명 이벤트 버블링 막기 ex 01) - 버블링 현상이 발생하는..

텍스트 필드에 어떤 키가 입력되었는지 확인하기 텍스트 필드에 어떤 키가 입력되었는지 확인하기1. 샘플예제 이름 : - 결과화면 2. 소스코드 이름 : 3. 설명 키보드의 키를 누르면 동작하는 이벤트 핸들러를 생성한다.이벤트 핸들러에 입력된 키보드 키값의 코드 값을 표시한다 참고 Jquery API : http://api.jquery.com/keypress/ http://api.jquery.com/keyup/http://api.jquery.com/keydown/- keypress( handler ) : 지정한 엘리먼트에 이벤트 핸들러를 연결하여 사용자가 키보드의 키를 누르면 이벤트 핸들러가 실행됩니다.- keyup( handler ) : 지정한 엘리먼트에 이벤트 핸들러를 연결하여 사용자가 키보드의 키를 눌..

마우스의 이벤트를 처리한다. 특정 마우스의 이벤트를 처리한다.1. 샘플예제 Bold button Italic button - 결과 화면 [특정 버튼위에 마우스가 위치한 경우] [버튼을 마우스 오른쪽 버튼으로 클릭한 경우] [버튼을 마우스 왼쪽 버튼으로 클릭한 경우] 2. 소스코드 Bold button Italic button 3. 설명 해당 버튼에 마우스 관련된 이벤트를 설정하여 bind() 한다. 마우스 버튼이 클릭되었을 때 event.button 이 0 인 경우 마우스 좌측, 2 인 경우 마우스 우측 으로 설정한다. 마우스가 해당 버튼 위에 위치하게 되면 이벤트를 처리한다. - bind(eventType, data, handler) : eventType는 이벤트의 타입을 지정하는 문자열로써 click..

사용자의 클릭 없이 자동으로 클릭 이벤트를 발생하기사용자의 클릭 없이 자동으로 클릭 이벤트를 발생 시킬 수 있다.1. 샘플예제 Bold button Italic button 결과화면 2. 소스코드 Bold buttonItalic button 3. 설명 1) click(dblclick) 이벤트를 설정한다.2) 설정이 완료 된 후 trigger 함수를 사용하여 클릭 이벤트를 실행한다. JQUERY 참조 : http://api.jquery.com/trigger/ http://api.jquery.com/bind/ http://api.jquery.com/click/ http://api.jquery.com/dblclick/ - bind(eventType, data, handler) : eventType는 이벤트의 ..

어느 버튼을 클릭하였는지 확인하기특정 버튼 중에서 클릭한 버튼을 확인할 수 있습니다.1. 샘플예제 Bold button Italic button 실행결과 2. 소스코드 Bold buttonItalic button 3. 설명 1) 버튼에 click(dblclick)이벤트를 bind 및 직접 이벤트를 설정합니다.2) 이벤트가 제대로 적용이 되면 해당 버튼을 클릭하게 되면 설정한 이벤트가 실행합니다. JQUERY 참조 : http://api.jquery.com/bind/ http://api.jquery.com/click/ http://api.jquery.com/dblclick/ - bind(eventType, data, handler) : 특정 이벤트를 정의하여 설정한다. : eventType는 이벤트의 타입..

배열을 사용하여 두 배열을 하나로 합치기 javascript배열을 사용하여 두 배열을 하나로 합치기1. 샘플예제 첫번째 배열 두번째 배열 합친 배열 배열 합차기 배열값 삭제 - 결과 : 2. 소스코드 첫번째 벼열 두번째 배열 합친 배열 배열 합차기 배열값 삭제 3. 설명javascript배열을 사용하여 숫자들의 배열을 전역변수로 저장한다. id="FirstList"인 p 태크의 엘리먼트에 첫번째 배열의 모든 원소를 추가한다. id="SecondList"인 p 태크의 엘리먼트에 두번째 배열의 모든 원소를 추가한다. concat() 메소드를 사용하여 첫번째 배열과 두번째 배열을 합친다. id="FinalList"인 p 태크의 엘리먼트에 두배열을 합친 결과를 추가한다. - concat() : 배열 객체의 메소..

배열을 사용하여 배열의 원소중에서 원하는 값만 표시하기 두번째 javascript배열을 사용하여 배열의 원소중에서 원하는 값만 표시하기 두번째 방법1. 샘플예제 내그룹에 포함된 내그룹에서 선택된 리스트 표시 리스트 삭제 - 결과 : 2. 소스코드 내그룹에 포함된 내그룹에서 선택된 리스트 표시 리스트 삭제 3. 설명 javascript배열을 사용하여 이름을 저장한다. id="GroupList"인 p 태크의 엘리먼트에 배열을 모든 원소를 추가한다. grep()와 match() 메소드를 사용하여 각 배열 원소에 A~D의 문자가 포함된 데이터만 사용한다. id="GroupListSel"인 p 태크의 엘리먼트에 배열을 추가한다. - grep() grep(array, callback( n, i ), boolean ..

배열을 사용하여 배열의 원소중에서 원하는 값만 표시하기 1번째 javascript배열을 사용하여 배열의 원소중에서 원하는 값만 표시하기 첫번째방법1. 샘플예제 내그룹에 포함된 내그룹에서 선택된 리스트 표시 리스트 삭제 - 결과 : 2. 소스코드 내그룹에 포함된 내그룹에서 선택된 리스트 표시 리스트 삭제 3. 설명 javascript배열을 사용하여 이름을 저장한다. id="GroupList"인 p 태크의 엘리먼트에 배열을 모든 원소를 추가한다. grep() 메소드를 사용하여 특정 조건에 맞는 데이터만 사용한다. id="GroupListSel"인 p 태크의 엘리먼트에 배열을 추가한다. - grep() grep(array, callback( n, i ), boolean ) : 배열의 각 원소들을 순회하면서 각..