3학년/웹 프로그래밍(JSP)

Lab3 : javascript사용

김야키 2018. 5. 14. 15:55

Lab3-1.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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 폼</title>
 
<link href="style.css" type="text/css" rel="stylesheet">
<!-- css파일을 호출하기 위한 link태그 -->
 
<script type="text/javascript">
    function checkFilled(obj) {
        var txt = document.getElementById("id_chk");
        txt.innerHTML = "";
        if (obj.value == "") {
            //id값이 비어있는 경우
            txt.innerHTML = "*이름을 입력해주세요";
            //값을 입력해 달라는 문구 출력
            obj.focus();
            //포거스를 다시 잡아준다.
        } else {
            txt.innerHTML = "";
            //비어있지 않는 경우 공백으로 표시
        }
    }
 
    function checkPwd() {
        var txt = document.getElementById("pwd_chk");
        //span태그의 식별자를 받아옴
        txt.innerHTML = "";
        //공백으로 초기화
        if (pwd1.value == pwd2.value) {
            //두 비밀 번호가 같은 경우
            if (pwd1.value == "") {
                //첫 번째 비밀 번호가 비어있는 경우
                txt.style.color = 'red';
                txt.innerHTML = "*비밀번호를 입력해 주세요";
                //비밀번호를 입력하라는 문구 출력
            } else {
                txt.style.color = 'blue';
                txt.innerHTML = "*비밀번호가 일치합니다.";
                //비밀번호가 서로 일치한 경우 파란 색 글씨로 표시
            }
        } else {
            txt.style.color = 'red';
            txt.innerHTML = "*비밀번호가 일치하지 않습니다.";
            //비밀번호가 일치하지 않는 경우
        }
    }
 
    function subCheck() {
        theForm = document.form1;
        //Form태그의 식별자를 정의
        if (theForm.name.value == "" || theForm.pwd1.value == ""
                || theForm.pwd2.value == "" || theForm.user_id.value=="") {
            //Form의 안에 있는 식별자들의 값이 하나라도 비어있으면 출력
            alert("정확하게 입력해주세요!");
            //정확하게 입력해 달라고 표시
        } else {
            //비어있지 않는 경우
            var chk_radio = document.getElementsByName('gender');
            var sel_type = null;
            //라디오 박스 체크 확인을 위한 인자값 선언
            
            for (var i = 0; i < chk_radio.length; i++) {
                if (chk_radio[i].checked == true) {
                    sel_type = chk_radio[i].value;
                    //라디오 박스 배열을 불러와서 해당 배열의 길이 만큼 for문을 반복
                    //값을 체크해서 해당 값이 비어있지 않는다면 해당 배열 칸에 있는 값을 입력
                }
            }
            if (sel_type == null) {
                //성별 값이 비어있는 경우
                alert("성별을 선택하세요!");
                return false;
            } else {
                //성별이 정확하게 채크되있는 경우
                var answer = confirm("회원가입을 진행하시겠습니까?");
                //회원가입을 진행할지 여부를 물어봄
                if (pwd1.value == pwd2.value) {
                    //비밀번호 두 개가 동일한 값인지 확인
                    if (answer == true) {
                        alert("화원가입 성공!");
                        window.location.reload();
                        //회원가입 성공 메시지를 출력 해 주고 새로고침을 한다.
                    } else {
                        alert("다시 작성합니다.");
                        window.location.reload();
                        //회원가입을 취소한 경우 메시지를 출력하고 새로고침을 한다.
                    }
                } else {
                    alert("비밀번호를 확인 해 주세요!");
                    //입력한 비밀번호의 값이 서로 다른경우 메시지 출력
                }
            }
        }
    }
    
</script>
</head>
<body>
    <div id="container">
        <h1>회원가입</h1>
        <p style="color: red; font-size: 11px">모든 항목을 모두 채워주세요.</p>
        <hr>
        <form name="form1" id="form1">
            <p>아이디</p>
            <input type="text" id="user_id" onblur="checkFilled(this)" value="">
            <span id="id_chk" style="color: red; font-size: 10px"></span>
            <!-- 스펜 테그의 초기 값을 빨간색으로 설정하고 폰트 크기를 10px로 설정 -->
 
            <p>비밀번호</p>
            <input type="password" id="pwd1" placeholder="비밀번호">
 
            <p>비밀번호 재확인</p>
            <input type="password" id="pwd2" placeholder="비밀번호 재확인" onblur="checkPwd()"> 
            <!-- 비밀번호 검사를 위해서 검사를 진행하는 함수를 호출해서 실행한다.  -->
            <span id="pwd_chk" style="color: red; font-size: 10px"></span>
            <!-- 비밀번호를 검사한 후 출력되는 메시지를 설정한다. -->
 
            <p>이름</p>
            <input type="text" placeholder="이름" id="name">
 
            <p>성별</p>
            <input type="radio" name="gender" id="gender" value="M"><span>남자</span>
            <input type="radio" name="gender" id="gender" value="F"><span>여자</span>
            <!-- 성별 선택을 위해서 radio타입으로 선언한 뒤 name과 id를 동일하게 해서 하나만 선택할 수 있도록 한다. -->
            <p>
                <input type="button" value="제출" onclick="subCheck()">
                <!-- 제출 버튼을 클릭 했을 때 위의 함수를 호출해서 모든 칸이 정확히 입력이 되어있는지 확인한다. -->
                <input type="reset" value="다시쓰기" onclick="return confirm('다시 입력하시겠습니까?');">
                <!-- 다시 쓰기의 여부를 물어보기 위해 버튼 클릭 이벤트로 confirm을 선언하고 선택한 값에 따라 true/false로 반환한다. -->
        </form>
    </div>
</body>
</html>
cs


style.css

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
@charset "UTF-8";
body {
    font: 15px gulim, "굴림", sans -serif;
}
fieldset {
    border: none 0;
}
legend {
    position: absolute;
    left: -9999px;
}
#container {
    width: 520px;
    border: 1px solid black;
    padding: 20px 40px;
    margin: 0 auto
}
p {
    font -size: 12px;
    color: black
}
span {
    font -size: 12px;
    color: black
}
cs




Javascript

-  보통 쓸 때는 바디 테그 위에다 작성(권장)

-> 이유 : 너무 많은 테그가 있기 때문에 보통은 밖에 만든다.

-  장점 : 시스템 부담이 적음

  플랫폼에 독립적 ( OS에 규제를 받지 않는다. )

-  단점 : 보단이 취약함

  디버깅 및 개발 도구의 부족

-  확장자 : .js

'3학년 > 웹 프로그래밍(JSP)' 카테고리의 다른 글

웹 시스템 설계 및 개발 Github  (0) 2018.06.28
Lab1_2 : Style적용 방법  (0) 2018.04.17
Lab1_1 : 개인 정보 출력  (0) 2018.04.13

'3학년/웹 프로그래밍(JSP)'의 다른글

  • 현재글Lab3 : javascript사용

관련글

댓글

티스토리툴바