반응형

Location 객체

현재 브라우저 창에 열려있는 문서의 URL을 알려주는 객체이다.


★ 이 포스터를 통해 보이는것 뿐만아니라 보이지않는 정보(URL) 또한 객체화 될 수 있다는 점을 알 수 있을것이다.


1. 현재 브라우저의 URL 알아내기 

개발자 도구의 콘솔창에  console.log(location.toString(), location.href);를 작성하고 실행시켜보자.

이처럼 두개의 결과가 나타나는데 같은 결과이지만 location.href를 사용하는 것이 좀 더 선호되는 방식이다.


마찬가지로 콘솔창에 alert(location);을 작성한다면

이러한 결과가 나타나게되는데 왜? 그런것일까?

alert함수는 문자로 인자값이 넘어가야하는데 객체를 넘겨준다면 객체를 문자화 시켜서 넘기게된다. 따라서 location 객체를 넘기게 된다면 location객체의 문자화 된 값인 현재 URL이 출력되는 것이다.

위의 내용은 alert(location.toString());과 같은 결과값을 출력한다.


2. 현재 웹페이지의 URL 변경하기

location객체는 URL을 알아낼 뿐만 아니라 현재 웹페이지의 URL 변경, 현재 페이지를 리로드도 제공한다.

콘솔 창에 location.href='http://olsh1108o.tistory.com/';를 작성해보자.

결과적으로 작성한 페이지로 이동하게된다. 이러한 경우는 사용자의 상황에 따라서 다른 URL로 넘어가야 하는 경우가 있을 것이다. 그렇다면 location객체를 사용해서 이동시키면 된다.


현재 웹 페이지를 리로드 시키고 싶은 경우에는 location.href=location.href라고 작성하거나 또는 location.reload(); 명령어를 통해서 리로드 시킬 수 있다.




이 글은 생활코딩 강의를 참고하여 작성된 글입니다.

반응형

'Web > HTML_JS_CSS' 카테고리의 다른 글

[Javascript] BOM_Browser Object Model  (0) 2019.01.14
[Javascript] Script 파일의 위치와 onload..  (0) 2019.01.08
[Javascript] Javascript 사용 방법  (0) 2019.01.08
[css] 선택자  (0) 2019.01.07
[JS] 회원가입 유효성 검사  (1) 2018.08.17
반응형

[전역객체 Window]


window는 브라우저 객체의 최상위 객체이고 모든 객체가 소속되어있으면서 전역객체라고도 부른다.

Browser Object는 아래와 같이 계층적으로 구조가 나뉘어져 있다.


DOM객체에 속하는 document 객체(Document Object Model을 구현하는 객체이기 때문에 따로 카테고리를 묶어서 설명함..), BOM객체에 속하는 location객체, JavaScript에 속하는 Array객체 모두 등등.. window라는 객체에 소속되어 있다.



window객체에 접근하는 방법?

→ 콘솔창을 켜서 window를 적어주면 window객체에 접근할 수 있다.




window 객체에 속하는 document객체, navigator객체 등등.. 에 접근하고 싶을 때

window.document 

window.navigator → 현재 브라우저에 대한 정보를 알려주는 객체

입력해주면 접근이 가능하다.



window객체에서 아래와 같은 메서드를 사용할 수 있다.


1. alert()

흔히 경고창이라고 부른다. 사용자에게 정보를 제공하거나, 문제가 있을 때 경고를 하거나, 코딩을 할 때 변수에 담겨있는 값을 확인할 때 사용한다.


콘솔창을 켜고 alert('Hello World');를 작성해보자.

그렇다면 다음과 같이 경고창이 뜨는 것을 확인 할 수 있다.


alert() 특징은 실행하는 동안은 다음 코드가 실행되지 않는다.


개발자가 디버깅을 위해서 alert()를 사용하는 경우가 있지만 최근들어 개발자 도구를 사용할 수 있어서 alert()보다는 console.log()를 자주 사용한다.


2. confirm

확인하는 창을 띄워준다. 다른 창과 다르게 확인/취소 버튼이 있다.

콘솔창에서 confirm('ok');를 적어주자.

그럼 괄호 안에있는 인자가 창에서 나타나게된다.

확인 버튼을 누르면 return 값으로 true가 넘어오고 취소를 누르면 false가 넘어온다.

< return 값으로 true가 넘어온다. >

< return 값으로 false가 넘어온다. >


3. prompt

사용자가 입력한 값을 얻어내어 자바스크립트가 활용할 수 있다. 

console창에 prompt('id?'); 를 작성해보자


이처럼 입력할 수 있는 칸이 나오고 여기에 맞는 답변을 작성해주면 콘솔창에 답변이 나타난다.




생활코딩 강의를 참고하여 작성된 글입니다.

반응형

'Web > HTML_JS_CSS' 카테고리의 다른 글

[Javascript] Location 객체야 넌 뭐하는 아이니???  (0) 2019.01.14
[Javascript] Script 파일의 위치와 onload..  (0) 2019.01.08
[Javascript] Javascript 사용 방법  (0) 2019.01.08
[css] 선택자  (0) 2019.01.07
[JS] 회원가입 유효성 검사  (1) 2018.08.17
반응형

js파일을 쓰다보면 html 파일과 분리 시킬 경우가 있고 또 외부에 있는 js 파일을 불러와서 실행시키는 경우가 있을 것이다.

그렇다면 html 파일과 js 파일을 따로 분리시킨 후 html내에서 script 파일의 위치가 어떻게 되는지 알아보자.


1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
    <script src="script2.js"></script>
</head>
<body>
    <input type="button" id="hw" value="Hello world" />
</body>
</html>
cs

<new02.html>


1
2
3
4
var hw = document.getElementById('hw');
    hw.addEventListener('click', function(){
        alert('Hello world');
    })
cs

<script2.js>


위와 같이 파일이 존재한다고 해보자. 이를 실행시켜 버튼을 클릭해도 alert창이 뜨지 않는다. 개발자 도구를 통해 진행상황을 보자면


이와같이 에러가 발생하게 된다.


그렇다면 왜? 에러가 발생하는 것일까?


html파일은 위에서부터 아래로 순차적으로 읽으며 실행을 하는데 <script>태그를 만나게 되면 js코드로 인식하게 되고 script02.js파일을 다운로드 한다.

그런 후 script02.js파일을 실행시키는데 js파일에서 id값이 hw인 element를 찾게된다.

하지만 <body> 태그까지 실행시키지 않은 상황에서 hw element는 null로 뜨게되고 이로인해 에러가 발생하게 된다.


이를 해결하는 방법은 js 파일을 아래와 같이 수정하면된다.


1
2
3
4
5
6
window.onload = function(){
    var hw = document.getElementById('hw');
    hw.addEventListener('click', function(){
        alert('Hello world');
    })
}
cs

<script2.js>


앞과 차이점은 window.onload = function(){} 인데 onload함수를 살펴보자


마찬가지로 html파일은 위에서 아래로 순차적으로 읽고 js파일을 실행시킨다.

하지만 window.onload = function(){} 함수는 웹브라우저의 모든 구성요소에 대한 로드가 끝났을 때 브라우저에 의해서 호출되는 함수이다.

(이를 이벤트라 한다.)

이렇게된다면 hw는 null로 뜨지 않을 것이고 정상 작동하게된다.


애초에 이런일을 막는 방법이 있는데 바로 script 파일을 head태그에 두는 것보다 페이지 하단에 위치시키는 방법이 더 낫다.




---------------------------------------------

알고가기!

학습할 때엔 head태그 내에 script로 작성하는 것으로 알고있었는데 하단에 위치하면 좋은 구체적이고 확실한 이유가 무엇인가요?

Q.

<script> 의 위치는 웬만하면 head 안에... <script> <link> <style> 순으로 위치하는것을 권장한다

라고 알고있었는데요.
요즘 문득 다시 공부하면서 보면 아에 다르더라구요?
제일 맨 하단에 정의하는게 성능상으로나 문제없는거로나.... 이것저것 하단이 좋다고....
하단에 위치하는게 왜 좋은건가요?
대강은 알고있는데, 

왜 저는 여태것 head 안에 위치하는걸 권장한다 라고 알고있었고,
하단에 위치하면 좋은 구체적이고 확실한 이유를 알고싶네요. 


A.

님 잘못이 아닙니다. 
많은 이들이 그렇게 말해왔으니까요.
잘 팔린다는 어느 책에는 '우리나라 개발자 대부분은 헤드 태그 안에 넣고, 이게 우리나라 개발 환경'이라고 써 있기도 하네요.
하지만 바디 하단에 외부 파일로 넣는 것이 좋은 것 맞습니다. 
로딩부하, 자원 관리, 코드 가독성, 코드 재사용 등등 잇점이 많으니까요.


출처 : 생활코딩[https://opentutorials.org/course/1375/6620] 댓글

반응형

'Web > HTML_JS_CSS' 카테고리의 다른 글

[Javascript] Location 객체야 넌 뭐하는 아이니???  (0) 2019.01.14
[Javascript] BOM_Browser Object Model  (0) 2019.01.14
[Javascript] Javascript 사용 방법  (0) 2019.01.08
[css] 선택자  (0) 2019.01.07
[JS] 회원가입 유효성 검사  (1) 2018.08.17
반응형

웹브라우저 또는 HTML을 프로그래밍적으로 제어해주는 것을 Javascript라고 한다.


자바스크립트를 HTML에서 로드하는 방법을 알아보자.


1. inline


inline방식은 태그에 직접 자바스크립트를 기술하는 방식이다.

태그에 연관된 스크립트가 분명히 드러나는 장점이 있지만 정보와 제어가 섞여있기 때문에 유지보수 측면에서는 가치가 떨어진다.


1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
    <input type="button" onclick="alert('Hello world')" value="Hello world" />
</body>
</html>
cs


2. script


<body>태그 내에 <script></script> 태그를 생성하여 자바스크립트 코드를 삽입하는 방식이다.

inline방식과 다르게 html태그와 js코드를 분리할 수 있는 장점이 있다.


1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
    <input type="button" id="hw" value="Hello world" />
    <script type="text/javascript">
        var hw = document.getElementById('hw');
        hw.addEventListener('click', function(){
            alert('Hello world');
        })
    </script>
</body>
</html>
cs


위에서 아래로 코드를 인식하다가 <script>태그를 만나면 자바스크립트 코드로 인식하고 실행하고 </script>를 만나면 다시 html 코드로 인식한다.

☆ <script>까지 html코드로 작동.



3. 외부 파일로 분리


자바스크립트 파일과 html 파일을 따로 분리하는 방식이다.

html문서에서 자바스크립트 코드를 완전히 바깥으로 밀어낼 수 있다는 점에서 html과 js파일의 결합도를 낮춘다. 또 html 여러개의 파일이 하나의 js파일을 참조가 가능하므로 유지보수가 용이해진다.


1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
    <input type="button" id="hw" value="Hello world" />
    <script src="./script.js"> </script>
</body>
</html>
cs

<test01.html>


1
2
3
4
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
    alert('Hello world');
})
cs

<script.js>


☆ test01.html에서 <script>태그의 src는 html의 속성값으로 인식된다.

반응형

'Web > HTML_JS_CSS' 카테고리의 다른 글

[Javascript] BOM_Browser Object Model  (0) 2019.01.14
[Javascript] Script 파일의 위치와 onload..  (0) 2019.01.08
[css] 선택자  (0) 2019.01.07
[JS] 회원가입 유효성 검사  (1) 2018.08.17
[HTML] 회원가입 폼 만들기  (0) 2018.08.17
반응형

[ 선택자의 종류 ]


1. 태그 선택자


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style media="screen">
      li{
        color : red;
      }
    </style>
    <title></title>
  </head>
  <body>
    <ul>
      <li>html</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </body>
</html>
cs

● <style>태그에 값을 준다면 아래 결과와 같이 <body>에 있는 모든 태그들이 적용된다.


2. 아이디 선택자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      /* id선택자 */
      #select{
        font-size: 10px
      }
    </style>
  </head>
  <body>
    <ul>
      <li>html</li>
      <li id="select">css</li>
      <li>javascript</li>
    </ul>
  </body>
</html>
 
cs


● id선택자는 하나 하나 구분을 짓기 위해서 사용한다.

● 한번 사용한 id선택자는 재활용하지 말아야한다.

● 기술 방법 : #선택자이름



3. 클래스 선택자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      /* class선택자 */
      .deactive {
        text-decoration: line-through;
       }
    </style>
  </head>
  <body>
    <ul>
      <li class="deactive">html</li>
      <li>css</li>
      <li class="deactive">javascript</li>
    </ul>
  </body>
</html>
 
cs


● class선택자는 어떠한 대상을 관리하기 쉽도록 그룹화 하여 사용한다.

● 코드 전체에서 여러번 사용할 경우...

● 기술방법 : .선택자이름


반응형

'Web > HTML_JS_CSS' 카테고리의 다른 글

[Javascript] Script 파일의 위치와 onload..  (0) 2019.01.08
[Javascript] Javascript 사용 방법  (0) 2019.01.08
[JS] 회원가입 유효성 검사  (1) 2018.08.17
[HTML] 회원가입 폼 만들기  (0) 2018.08.17
[HTML/JavaScript] 계산기 만들기  (0) 2018.07.30
반응형

[HTML 레이아웃]




[HTML 코드]

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<body>
    <form name=form method="post" onsubmit="return checkAll()">
      <table width=750 border="1px" align=center>
        <tr>
          <th colspan="2" bgcolor="#E4F7BA" >회원 기본 정보</th>
        </tr>
        <tr>
          <td>아이디</td>
          <td><input type="text" name="userId"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
        </tr>
        <tr>
          <td>비밀번호</td>
          <td><input type="password" name="password1"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
        </tr>
        <tr>
          <td>비밀번호 확인</td>
          <td><input type="password" name="password2"></td>
        </tr>
        <tr>
          <td>메일주소</td>
          <td><input type="text" name="mail"> 예)id@domain.com</td>
        </tr>
        <tr>
          <td>이름</td>
          <td><input type="text" name="name"></td>
        </tr>
        <tr>
          <td>주민등록번호</td>
          <td>
              <input type="text" name="identi1" style="width:70px">
              -
              <input type="password" name="identi2" style="width:70px">
              </td>
        </tr>
        <tr>
          <td>관심분야</td>
          <td>
            <input type="checkbox" name="favorite" value="컴퓨터">컴퓨터
            <input type="checkbox" name="favorite" value="인터넷">인터넷
            <input type="checkbox" name="favorite" value="여행">여행
            <input type="checkbox" name="favorite" value="영화감상">영화감상
            <input type="checkbox" name="favorite" value="음악감상">음악감상
          </td>
        </tr>
        <tr>
          <td>자기소개</td>
          <td><textarea name="introduceMyself" id=intro name=intro cols=50 rows=10></textarea>
            </td>
        </tr>
      </table>
      <p align=center>
        <input type="submit" name="join" value="회원 가입">
        <input type="reset" name="reset" value="다시 입력">
      </p>
    </form>
    </body>
cs


코드설명
1
<form name=form method="post" onsubmit="return checkAll()">
cs
submit 버튼을 누르면 script의 checkAll()가 호출된다.




[JavaScript 코드]



코드설명

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function checkAll() {
        if (!checkUserId(form.userId.value)) {
            return false;
        } else if (!checkPassword(form.userId.value, form.password1.value,
                form.password2.value)) {
            return false;
        } else if (!checkMail(form.mail.value)) {
            return false;
        } else if (!checkName(form.name.value)) {
            return false;
        } else if (!checkBirth(form.identi1.value, form.identi2.value)) {
            return false;
        } else if (!checkFavorite()) {
            return false;
        } else if (!checkIntro()) {
            return false;
        }
        return true;
    }
}
s

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

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

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

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




1
2
3
4
5
6
7
8
// 공백확인 함수
    function checkExistData(value, dataName) {
        if (value == "") {
            alert(dataName + " 입력해주세요!");
            return false;
        }
        return true;
    }
cs

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

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

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

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


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



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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    function checkUserId(id) {
        //Id가 입력되었는지 확인하기
        if (!checkExistData(id, "아이디를"))
            return false;
 
        var idRegExp = /^[a-zA-z0-9]{4,12}$/; //아이디 유효성 검사
        if (!idRegExp.test(id)) {
            alert("아이디는 영문 대소문자와 숫자 4~12자리로 입력해야합니다!");
            form.userId.value = "";
            form.userId.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }
cs

함수 매개변수로 넘어오는 값은 input태그에 들어가는 값이다.


3라인은 방금전 언급했던 공백확인 함수이다.

만약 id의 값이 공백일 경우 checkExistData함수에서는 false를 return해주므로 !에 의해 if조건문은 true가 된다.

4라인에서 return false를 해주면서 checkAll함수 2번3번 라인에서 script가 끝난다.


이어서 6라인은 아이디 유효성을 검사하는 정규표현식(Regular Expression)이다.

위의 코드에서 사용한 정규표현식을 간단하게 언급하고 가면..

→ / : 자바스크립트의 정규표현식의 처음과 끝을 의미한다.

→ [ ] : 문자셋이다. 예를 들면 [a-z]라고 적을경우 정규표현식에 만족해야하는 값들은 반드시 a~z사이의 값만 넣을 수 있다.

→ ^ : 문장의 처음을 뜻한다.

→ $ : 문장의 마지막을 뜻한다.

→ { } : 문자열 길이를 뜻한다. 예를 들어 {4,12}일 경우 최소 길이 4, 최대 길이 12이다.


/^[a-zA-z0-9]{4,12}$/ 을 분석하면..

→ 영문 대/소문자, 숫자만 사용할 수 있고 길이는 최소 4, 최대 12를 만족해야 정규표현식에 만족한다.


정규표현식에 대해 더 알아보고싶으면

→ https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D

여기 들어가서 참고하면 된다.


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

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

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

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


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



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

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 checkPassword(id, password1, password2) {
        //비밀번호가 입력되었는지 확인하기
        if (!checkExistData(password1, "비밀번호를"))
            return false;
        //비밀번호 확인이 입력되었는지 확인하기
        if (!checkExistData(password2, "비밀번호 확인을"))
            return false;
 
        var password1RegExp = /^[a-zA-z0-9]{4,12}$/; //비밀번호 유효성 검사
        if (!password1RegExp.test(password1)) {
            alert("비밀번호는 영문 대소문자와 숫자 4~12자리로 입력해야합니다!");
            form.password1.value = "";
            form.password1.focus();
            return false;
        }
        //비밀번호와 비밀번호 확인이 맞지 않다면..
        if (password1 != password2) {
            alert("두 비밀번호가 맞지 않습니다.");
            form.password1.value = "";
            form.password2.value = "";
            form.password2.focus();
            return false;
        }
 
        //아이디와 비밀번호가 같을 때..
        if (id == password1) {
            alert("아이디와 비밀번호는 같을 수 없습니다!");
            form.password1.value = "";
            form.password2.value = "";
            form.password2.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }    
cs

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

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

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

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


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

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


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


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

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


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

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

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

마지막으로 return false


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

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


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



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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    function checkMail(mail) {
        //mail이 입력되었는지 확인하기
        if (!checkExistData(mail, "이메일을"))
            return false;
 
        var emailRegExp = /^[A-Za-z0-9_]+[A-Za-z0-9]*[@]{1}[A-Za-z0-9]+[A-Za-z0-9]*[.]{1}[A-Za-z]{1,3}$/;
        if (!emailRegExp.test(mail)) {
            alert("이메일 형식이 올바르지 않습니다!");
            form.mail.value = "";
            form.mail.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }
cs

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

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

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

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

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

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


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


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



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

1
2
3
4
5
6
7
8
9
10
11
    function checkName(name) {
        if (!checkExistData(name, "이름을"))
            return false;
 
        var nameRegExp = /^[가-힣]{2,4}$/;
        if (!nameRegExp.test(name)) {
            alert("이름이 올바르지 않습니다.");
            return false;
        }
        return true; //확인이 완료되었을 때
    }
cs


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


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



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


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

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

 

1

2 

3 

4 

5 

6 

- 

1 

2 

3 

4 

5 

6 

7 

× 

2 

3 

4 

5 

6 

7 

 

8 

9 

2 

3 

4 

5 

 


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

더한 값을 sum이라 하면

<11 - (sum % 11) %10>

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


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

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
35
36
37
38
39
40
41
42
43
44
    function checkBirth(identi1, identi2) {
        //birth이 입력되었는지 확인하기
        if (!checkExistData(identi1, "주민등록번호를 ")
                || !checkExistData(identi2, "주민등록번호를 "))
            return false;
 
        var totalIdenti = "" + identi1 + identi2;
 
        var identiArr = new Array();
        var sum = 0;
        var plus = 2;
 
        //배열에 주민등록번호 입력 후 유효값 확인하기 위해 sum에 저장
        for (var i = 0; i < 12; i++) {
            identiArr[i] = totalIdenti.charAt(i);
            if (i >= 0 && i <= 7) {
                sum += totalIdenti[i] * plus;
                plus++;
                if (i == 7)
                    plus = 2;
            } else {
                sum += totalIdenti[i] * plus;
                plus++;
            }
        }
        //주민등록번호 길이 확인하기
        if (identiArr.length < 12) {
            alert("주민등록번호는 13자리입니다.");
            form.identi1.value = "";
            form.identi2.value = "";
            form.identi1.focus();
            return false;
        }
        //주민등록번호 유효한지 확인
        var result = 11 - (sum % 11) % 10
        if (result != totalIdenti.charAt(12)) { //주민등록번호가 유효하지 않은 경우
            alert("유효하지않은 주민번호입니다.");
            form.identi1.value = "";
            form.identi2.value = "";
            form.identi1.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }
cs

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

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


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

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


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

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

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


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


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


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



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

1
2
3
4
5
6
7
8
9
10
11
12
    function checkFavorite() {
        var checkedFavorite = document.getElementsByName("favorite");
 
        //체크된 값이 하나라도 있을경우 바로 true
        for (var i = 0; i < checkedFavorite.length; i++) {
            if (checkedFavorite[i].checked == true) {
                return true;
            }
        }
        alert("관심분야를 체크해주세요!");
        return false;
    }
cs

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


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

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



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

1
2
3
4
5
6
7
8
    function checkIntro() {
        var text = document.getElementById("intro");
        if (!checkExistData(text.value, "자기소개를")) {
            alert("자기소개를 입력해 주세요!");
            return false;
        } else
            return true;
    }
cs

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

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




전체적인 JavaScript코드이다.

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<script language="javascript">
    function checkAll() {
        if (!checkUserId(form.userId.value)) {
            return false;
        }
        if (!checkPassword(form.userId.value, form.password1.value,    form.password2.value)) {
            return false;
        }
        if (!checkMail(form.mail.value)) {
            return false;
        }
        if (!checkName(form.name.value)) {
            return false;
        }
        if (!checkBirth(form.identi1.value, form.identi2.value)) {
            return false;
        }
        if (!checkFavorite()) {
            return false;
        }
        if (!checkIntro()) {
            return false;
        }
 
        return true;
    }
 
    // 공백확인 함수
    function checkExistData(value, dataName) {
        if (value == "") {
            alert(dataName + " 입력해주세요!");
            return false;
        }
        return true;
    }
 
    function checkUserId(id) {
        //Id가 입력되었는지 확인하기
        if (!checkExistData(id, "아이디를"))
            return false;
 
        var idRegExp = /^[a-zA-z0-9]{4,12}$/; //아이디 유효성 검사
        if (!idRegExp.test(id)) {
            alert("아이디는 영문 대소문자와 숫자 4~12자리로 입력해야합니다!");
            form.userId.value = "";
            form.userId.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }
 
    function checkPassword(id, password1, password2) {
        //비밀번호가 입력되었는지 확인하기
        if (!checkExistData(password1, "비밀번호를"))
            return false;
        //비밀번호 확인이 입력되었는지 확인하기
        if (!checkExistData(password2, "비밀번호 확인을"))
            return false;
 
        var password1RegExp = /^[a-zA-z0-9]{4,12}$/; //비밀번호 유효성 검사
        if (!password1RegExp.test(password1)) {
            alert("비밀번호는 영문 대소문자와 숫자 4~12자리로 입력해야합니다!");
            form.password1.value = "";
            form.password1.focus();
            return false;
        }
        //비밀번호와 비밀번호 확인이 맞지 않다면..
        if (password1 != password2) {
            alert("두 비밀번호가 맞지 않습니다.");
            form.password1.value = "";
            form.password2.value = "";
            form.password2.focus();
            return false;
        }
 
        //아이디와 비밀번호가 같을 때..
        if (id == password1) {
            alert("아이디와 비밀번호는 같을 수 없습니다!");
            form.password1.value = "";
            form.password2.value = "";
            form.password2.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }
 
    function checkMail(mail) {
        //mail이 입력되었는지 확인하기
        if (!checkExistData(mail, "이메일을"))
            return false;
 
        var emailRegExp = /^[A-Za-z0-9_]+[A-Za-z0-9]*[@]{1}[A-Za-z0-9]+[A-Za-z0-9]*[.]{1}[A-Za-z]{1,3}$/;
        if (!emailRegExp.test(mail)) {
            alert("이메일 형식이 올바르지 않습니다!");
            form.mail.value = "";
            form.mail.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }
 
    function checkName(name) {
        if (!checkExistData(name, "이름을"))
            return false;
 
        var nameRegExp = /^[가-힣]{2,4}$/;
        if (!nameRegExp.test(name)) {
            alert("이름이 올바르지 않습니다.");
            return false;
        }
        return true; //확인이 완료되었을 때
    }
 
    function checkBirth(identi1, identi2) {
        //birth이 입력되었는지 확인하기
        if (!checkExistData(identi1, "주민등록번호를 ")
                || !checkExistData(identi2, "주민등록번호를 "))
            return false;
 
        var totalIdenti = "" + identi1 + identi2;
 
        var identiArr = new Array();
        var sum = 0;
        var plus = 2;
 
        //배열에 주민등록번호 입력 후 유효값 확인하기 위해 sum에 저장
        for (var i = 0; i < 12; i++) {
            identiArr[i] = totalIdenti.charAt(i);
            if (i >= 0 && i <= 7) {
                sum += totalIdenti[i] * plus;
                plus++;
                if (i == 7)
                    plus = 2;
            } else {
                sum += totalIdenti[i] * plus;
                plus++;
            }
        }
        //주민등록번호 길이 확인하기
        if (identiArr.length < 12) {
            alert("주민등록번호는 13자리입니다.");
            form.identi1.value = "";
            form.identi2.value = "";
            form.identi1.focus();
            return false;
        }
        //주민등록번호 유효한지 확인
        var result = 11 - (sum % 11) % 10
        if (result != totalIdenti.charAt(12)) { //주민등록번호가 유효하지 않은 경우
            alert("유효하지않은 주민번호입니다.");
            form.identi1.value = "";
            form.identi2.value = "";
            form.identi1.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }
    function checkFavorite() {
        var checkedFavorite = document.getElementsByName("favorite");
 
        //체크된 값이 하나라도 있을경우 바로 true
        for (var i = 0; i < checkedFavorite.length; i++) {
            if (checkedFavorite[i].checked == true) {
                return true;
            }
        }
        alert("관심분야를 체크해주세요!");
        return false;
    }
 
    //자기소개가 입력되었는지 확인하기
    function checkIntro() {
        var text = document.getElementById("intro");
        if (!checkExistData(text.value, "자기소개를")) {
            alert("자기소개를 입력해 주세요!");
            return false;
        } else
            return true;
    }
</script>
cs


★ 잘못된 정보나 피드백은 언제든 환영입니다. ★


반응형

'Web > HTML_JS_CSS' 카테고리의 다른 글

[Javascript] Script 파일의 위치와 onload..  (0) 2019.01.08
[Javascript] Javascript 사용 방법  (0) 2019.01.08
[css] 선택자  (0) 2019.01.07
[HTML] 회원가입 폼 만들기  (0) 2018.08.17
[HTML/JavaScript] 계산기 만들기  (0) 2018.07.30

+ Recent posts

티스토리툴바