남익의 생활

입력폼에 입력되는 값의 유효성 체크하기 두번째 입력폼으로 입력되는 값들의 유효성을 체크한다.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 ) : 지정한 엘리먼트에 이벤트 핸들러를 연결하여 사용자가 키보드의 키를 눌..

배열을 사용하여 두 배열을 하나로 합치기 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 ) : 배열의 각 원소들을 순회하면서 각..

배열을 사용하여 이름을 대문자로 변경하여 표시하기javascript배열을 사용하여 이름을 대문자로 변경하여 표시하기1. 샘플예제 내그룹에 포함된 리스트 표시 리스트 삭제 - 결과 : 2. 소스코드 내그룹에 포함된 리스트 표시리스트 삭제 3. 설명 javascript배열을 사용하여 이름을 저장한다.map() 메소드를 사용하여 배열의 이름들을 대문자로 변경한다.id="GroupList"인 p 태크의 엘리먼트에 배열을 추가한다. - map() map(array, callback( n, i ) ) : 배열의 각 원소들을 순회하면서 각 원소들에 대해 콜백함수를 호출한다. : callback 에는 n, i 파라미터가 있으며 n은 배열의 원소, i는 각 배열의 원소의 위치(0부터 시작)를 나타낸다.

배열을 사용하여 리스트로 표시하기javascript배열을 사용하여 리스트로 이름을 표시하기1. 샘플예제 내그룹에 포함된 리스트 표시 리스트 삭제 - 결과 : 2. 소스코드 //==javascript start=========================================================//==javascript end=========================================================//==HTML start===========================================================내그룹에 포함된 리스트 표시리스트 삭제//==HTML end============================================..

노드 개수 세고 노드안의 텍스트 표시하기특정 노드의 갯수를 세고 그 노드안의 텍스트 표시해줍니다.1. 샘플예제 test_01 test_02 test_03 test_04 텍스트 표시 결과 : 2. 소스코드 //==script start=========================================================//==script end=========================================================//==HTML start========================================================test_01test_02test_03test_04 텍스트 표시//==HTML end=======================..