개발하는개발자

[HTML 레이아웃]

[HTML 코드]

[JavaScript 코드]

코드설명

checkAll()함수에서는 각각의 input값을 확인하는 함수를 호출하는 함수이다.

조건문을 보면 checkUserId함수에서 폼에 입력된 값이 유효성 검사에 맞으면 true를 return해준다.

따라서 if조건문 내로 들어가지 않으므로 다음 조건문을 실행하게 된다.

아래의 else if문도 마찬가지로 똑같이 수행한다.

함수의 매개변수로는 form내에 있는 해당되는 input태그의 id의 값을 가져온다.

checkAll함수를 제외한 모든 함수에 첫번째로 들어가 있는 코드가 공백 확인 함수이다.

유효성 검사하면서 값이 공백이라면 "영문 대소문자와 숫자 4~12자리로 입력해야합니다!"라고 출력해도 되지만 공백임을 알려주기 위해 따로 함수로 빼내었다.

매개변수로 들어오는 value는 input태그의 값이고 dataName은 해당되는 input태그의 종류가 무엇인지 알려주는 String 변수이다.

값이 공백일 경우 alert를 통해 사용자에게 공백임을 알리고 false를 return하면서 이 함수를 호출한 함수를 끝내버린다.

이제부터 각각의 유효성 검사 함수를 알아보자.

먼저 볼 함수는 id를 검사하는 함수이다.

if조건문에서 test는 정규표현식과 id의 값이 일치하는지 아닌지 확인하는 함수이다.

일치하면 true를 return 일치하지 않으면 false를 return한다.

만약 일치하지 않을 경우 사용자에게 해당 조건을 알려주는 알림창을 띄워준다.

그리고 폼에 입력된 값을 공백으로 초기화하고 포커스를 맞춰준다.

정규표현식과 id의 값이 같을 경우 return true를 하고 다음 함수를 실행한다.

다음은 비밀번호 검사 함수이다.

비밀번호가 만족해야할 조건은 

1. 영문 대/소문자와 숫자 4~12자리로 입력할 것

2. 비밀번호 두번 입력했을 때 두번 다 일치할 것

3. 아이디와 비밀번호는 불일치 할 것

3~7라인은 비밀번호 / 비밀번호 확인이 공백인지 확인하기 위한 조건문이다.

조건문이 어떻게 동작하는지 알고싶을 땐 위의 checkId함수 설명을 참고하길 바란다.

checkPassword함수는 매개변수로 id와 두 개로 입력된 password를 받는다.

9~15라인은 비밀번호 유효성을 검사하는 코드로 아이디 유효성 검사 정규표현식과 같다.

위의 checkId함수 설명을 참고하길 바란다.

만약 두번 입력된 값이 틀릴경우 17~23라인 조건문을 실행한다.

사용자에게 입력된 두 비밀번호가 일치하지 않음을 알려준다.

그리고 두 비밀번호 입력창을 공백으로 설정해준 다음 포커스를 첫번째 비밀번호 입력창에 준다.

마지막으로 return false

만약 아이디와 비밀번호가 같을 경우 26~32라인 조건문을 실행한다.

아래의 조건문 실행은 위의 비밀번호 일치 여부 확인하는 조건문과 같다.

비밀번호 모든 조건이 맞을 경우 true를 return..

다음은 이메일을 검사하는 함수이다.

6라인.. 이메일 정규표현식을 보면 

→ ^[A-Za-z0-9_]+[A-Za-z0-9] : 이메일의 경우 첫글자 _가 허용되므로 첫번째 글자 검사식을 따로 두었다.

그 뒤 영문 대/소문자 숫자만 사용 할 수 있게 조건을 걸었다.

→ *[@]{1} : @는 반드시 하나만 입력되어야 한다.

→ *[.]{1} : .은 반드시 하나만 입력되어야 한다.

→ [A-Za-z]{1,3} : 최소 한글자 최대 세글자 까지 입력 가능하다.

7~12라인은 정규표현식과 이메일의 값이 일치하지 않을 경우 조건문을 실행한다.

이메일 값이 정규표현식에 만족할 경우 return true.

다음은 이름 검사 함수이다.

5라인은 한글만 입력할 수 있는 정규표현식이다.

이름 값이 정규표현식에 만족할 경우 return true.

다음은 주민등록번호를 검사하는 함수이다.

주민등록번호 유효성을 검사하는 식이 따로 있는데 

주민등록번호 13자리를...

주민등록번호 13번째 자리 값을 제외하고 위아래로 각각 값을 곱한 후 각 결과값을 모두 더한다.

더한 값을 sum이라 하면

<11 - (sum % 11) %10>

위의 식에서 도출되는 값과 주민등록번호 13번째 값과 일치하면 유효한 주민등록번호이다.

이를 토대로 주민등록번호 검사하는 함수를 보면..

매개변수가 두개인 이유는 폼에서 주민번호 입력창을 두개로 두었다.

이 때문에 totalIdenti라는 변수에 문자열 결합을 해준다.

13~24라인은 유효성 검사를 위해 totalIdenti 값을 identiArr배열에 하나하나 입력을 해준다.

배열에 입력하면서 sum값을 바로 계산해 준다.

위의 주민등록번호 유효성 검사 표를 보면 1번째부터 8번째 자리까지 2부터 순차적으로 값이 올라가면서 곱해지다가

9번째 자리부터는 다시 2로 돌아간다.

6~24라인이 이를 조건식으로 변환한 라인이다.

27~33라인은 주민등록번호 길이가 13자리인지 확인하고

마지막으로 35~42라인이 주민등록번호가 유효한지 확인하는 조건식이다.

주민등록번호가 모든 조건에 만족하였을 경우 return true

다음은 관심분야에서 하나 이상 체크되었는지 확인하는 함수다.

document.getElementsByName("favorite")는 HTML에서 같은 name("favorite")으로 묶인 checkbox의 값을 배열로 가져온다.

5~9라인은 체크된 값이 하나라도 있을 경우 바로 true를 return시켜줌으로써 함수를 끝낸다.

for문에서 return되지 않는다면 체크된 값이 하나라도 되지 않는 경우이므로 알림창을 띄워주고 return false를 한다.

마지막으로 자기소개 항목에서 값이 들어있는지 확인하는 함수이다.

document.getElementById("intro")는 HTML에서 id("intro")를 가져와 그에 해당되는 값을 입력해준다.

만약 값이 공백일 경우 알림창을 띄워주고 return false를 한다.

전체적인 JavaScript코드이다.

레이아웃 디자인은 수업시간에 강사님께서 제시해준 레이아웃이다.

<loginFom.html>

[ 계산기 레이아웃 ]

[ HTML 코드 ]

<input type=text>에 들어갈 값들을 [text1] [op] [text2] = [result]로 구성하였다.

함수에 공통적으로 들어가 있는 아래의 코드는

document.getElementById('showText').value = document.getElementById('showText').value + ~ ; 

<input type=text>에 값을 입력하기 위한 문장이다.

● isDotSelected 변수는 '.'이 선택되었을 경우 실수로 값을 변경하기 위해 선언한 flag변수이다.

● function selectedBtn(id) { } 에서는 

선택된 버튼을 구분 후 text1 또는 text2에 입력을 해준다.

위의 if문은 들어갈 값이 text1인지 text2인지 확인하기 위한 조건문이다.

만약 op가 공백이 아닐경우 text1은 입력이 된 상태이고 text2의 값을 넣을 것이다.

● function changeSign() { } 에서는 

text1 또는 text2의 값이 양수일 경우 음수로 / 음수일 경우 양수로 변경해주는 함수이다.

Line 33 ~ 39 : 값이 음수일 경우 양수로 변경 해주는 조건문이다.

if문 내에 if~else문은 변경할 값이 text1인지 text2인지 확인후 변경 해주는 조건문이다.

Line 41 ~ 49 : 값이 양수일 경우 음수로 변경 해주는 조건문이다.

위의 if문과 마찬가지로 if문 내에 if~else문은 변경할 값이 text1인지 text2인지 확인후 변경 해주는 조건문이다.

● function mathText(text) { } 에서는

매개변수로 넘겨받은 값을 구분 후 sin, cos, tan계산을 해주는 함수이다.

내장 객체 Math내에 있는 Math.sin  Math.cos  Math.tan를 이용해 각각의 값을 구한다.

● 스크립트 내의 변수들과 HTML의 result를 보여주는 <input type=text>의 값을 초기화 하는 함수이다.

● 지금까지 입력된 값을 계산하는 함수이다.

text1과 op, text2는 string문자열로 +를 이용해 result 변수에 모두 입력한다.

if조건문을 사용해 실수인지 정수인지 판별하고 조건문 내에서 문자열 result를 eval 내장 함수를 통해 계산한다.

실수 조건문에서 .toFixed(3)함수는 ( )안 숫자 자리수만큼 소수점을 끊어주는 역할을 한다.

★ eval 함수

문자열을 수식으로 바꿔주는 역할을 한다.

문자열 result를 eval 내장 함수를 통해 수식으로 바꾼 후 바뀐 수식으로 계산 후 출력