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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<style type="text/css">
    #tbl1 { 
        width: 350px; 
        border: 1px solid gray;
        border-collapse: collapse;
    }
    
    #tbl1 th, #tbl1 td {
        border: 1px solid gray;
        padding: 4px;
    }
    
    #tbl1 th { width: 100px; }
    #tbl1 td { width: 250px; }
    
    #jumin1, #jumin2 { width: 100px; }
    #year, #month, #day { width: 50px; }
    
</style>
 
<script type="text/javascript">
 
    /* 
        문제 : 
        구현할 것
        1. 주민번호 앞자리 *6자리를 입력하는 순간*
            -> 년,월,일 자동으로 채워넣기 -> 1900년대생, 서브스트링 잘라서,
        2. 1번과 동시에 주민번호 뒷자리로 포커스 이동
        3. 주민번호 뒷자리 1자리를 입력하는 순간
            -> 남자/여자 자동으로 선택하기
            
            
        생각해볼 것.,
        **누구에게 어떤 이벤트 추가를 걸지?
        ** 6자리?? 1자리??
                
    */
    
</script>
 
</head>
<body>
 
 
    <!-- ex21.htm -->
 
 
    <h2>회원 가입</h2>
    
    <table id="tbl1">
        <tr>
            <th>주민번호</th>
            <td><input type="text" id="jumin1" /> - <input type="text" id="jumin2" /></td>
        </tr>
        <tr>
            <th>생년월일</th>
            <td>
                <input type="text" id="year" />년
                <input type="text" id="month" />월
                <input type="text" id="day" />일
            </td>
        </tr>
        <tr>
            <th>성별</th>
            <td>
                <input type="radio" name="gender" id="g1" />남자
                <input type="radio" name="gender" id="g2" />여자
            </td>
        </tr>
    </table>
    
    
</body>
</html>
cs


'WEB > JS' 카테고리의 다른 글

form test  (0) 2016.01.22
회원정보 입력하기  (0) 2016.01.22
js test  (0) 2016.01.22
타이머  (0) 2016.01.22
버튼 찾아 css 제거하기  (0) 2016.01.22


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
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    
    function test() {
        var txt1 = document.getElementById("txt1"); //txt1찾기
        
        //입력값
        //txt1.value = "홍길동";
        //alert(txt1.value);
        
        txt1.readOnly = true;
        txt1.style.backgroundColor = "black";
        txt1.style.color = "white"; 
 
    
        var cb1 = document.getElementById("cb1"); //cb1찾기
        cb1.checked = true;
        
        
        //yes? no?
        var rb1 = document.getElementById("rb1");
        //alert(rb1.checked);
        rb1.checked = true;
        
        /* if (rb1.checked) {
            alert("yes");
        } else {
            alert("no");
        } */
        
        
        
        //텍스트 박스 -> 입력값? -> value
        //체크/라디오 -> 입력값? -> checked
        //셀렉트 박스 -> 입력값? -> value
                
        var sel1 = document.getElementById("sel1");
        //alert(sel1.value);
        //sel1.value = "300";
        
        //선택한 옵션의 index
        //alert(sel1.selectedIndex);
        //sel1.selectedIndex = 1;
        
        //옵션(배열)
        //alert(sel1.options.length);
        //alert(sel1.options[2].value);
        //alert(sel1.options[2].text);
        //alert(sel1.options[2].innerText);
        
        
        
        //추가
        //1. innerHTML
        //2. DOM
        //3.
        
        //<option value="400">사백</option>
        //var item = new Option("사백", "400"); 
        //sel1.options.add(item);
        
        
        
        //삭제
        //sel1.options.remove(2); //index = 2 옵션삭제
        //sel1.options.remove(0);
        
        //선택된 옵션을 삭제
        if (sel1.options.length > 1) {
            sel1.options.remove(sel1.selectedIndex);
        }
    }
    
        
    function test2() {
        //onchange -> value 속성을 가지고 있는 태그에만 적용(<form> 컨트롤에만)
        //    : 컨트롤의 입력값이 변경되는 순간 발생
        alert(event.srcElement.value);
    }
    
    function test3() {
        //체크박스를 클릭했을 때
        //alert("체크");
        //alert(event.srcElement.checked);
    }
    
    function test4() {
        alert(event.srcElement.checked);
    }
    
    function agree() {
        //약관 동의 체크박스 클릭할 때
        if (event.srcElement.checked) {
            document.getElementById("btnNext").disabled = false;
        } else {
            document.getElementById("btnNext").disabled = true;
        }
    }
    
    
    function copy() {
        
        var txtName1 = document.getElementById("txtName1");
        var txtAddress1 = document.getElementById("txtAddress1");
        var txtName2 = document.getElementById("txtName2");
        var txtAddress2 = document.getElementById("txtAddress2");
        
        if (event.srcElement.checked) {
            txtName2.value = txtName1.value;//복사
            txtAddress2.value = txtAddress1.value;
        } else { //체크를 해제하는 경우 
            txtName2.value = "";
            txtAddress2.value = "";
            txtName2.focus();
        }
        
    }
    
    
</script>
</head>
<body>
 
 
    <!-- ex20.htm -->
 
 
    <input type="button" value="테스트" onclick="test();" />
    <hr />
    
    <form name="form1" id="form1">
    
        <fieldset>
            <legend>주문하시는 분</legend>
            이름 : <input type="text" id="txtName1" /><br />
            주소 : <input type="text" id="txtAddress1" />
        </fieldset>
        
        <div style="margin:15px 0px;">
            <input type="checkbox" onchange="copy();" />주문하시는 분과 동일합니다.
        </div>
        
        <fieldset>
            <legend>받으시는 분</legend>
            이름 : <input type="text" id="txtName2" /><br />
            주소 : <input type="text" id="txtAddress2" />
        </fieldset>
        
        
        
        <hr />
        텍스트 박스 : <input type="text" id="txt1" />
        <br /><br />
        체크 박스 : <input type="checkbox" id="cb1" />
        <br /><br />
        라디오 버튼 : 
        <input type="radio" name="rb" id="rb1" value="y" /> yes
        <input type="radio" name="rb" id="rb2" value="n" checked="checked" /> no
        
        
        <br /><br />
        <select id="sel1">
            <option value="100">백</option>
            <option value="200">이백</option>
            <option value="300">삼백</option>
        </select>
        
    
        
        <hr />
        <input type="text" id="txt2" onchange="test2();" /><br />
        <input type="checkbox" id="cb2" onclick="test3();" onchange="test4();" />
    
    
        
        <hr />
        <h3>약관</h3>
         <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.
         내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.    </p>
        <input type="checkbox" onchange="agree();" /> 약관에 동의합니다.
        <br /><br />
        <input type="button" value="다음 단계로" id="btnNext" onclick="alert('다음 단계로 넘어감.,')" disabled="disabled" />
    
    </form>
    
 
</body>
</html>
cs


'WEB > JS' 카테고리의 다른 글

문제] 주민번호 입력폼 구현하기  (0) 2016.01.22
회원정보 입력하기  (0) 2016.01.22
js test  (0) 2016.01.22
타이머  (0) 2016.01.22
버튼 찾아 css 제거하기  (0) 2016.01.22


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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<style type="text/css">
    filedset, legend, th, td, label, input, select {
        font-size:  12px;
        color: #555;
    }
    
    /* 회원정보입력 */
    #addForm {
        width: 350px;
        margin: 10px auto;
        border: 1px solid gray;
    }
    
    #addForm legend { font-weight: bold; }
    #addForm label {
        display: inline-block; 
        width: 100px;
        text-align: right;
        margin-right: 5px;
    }
    #addForm input { border: 1px solid gray; }
    #addForm #name { width: 80px; }
    #addForm #tel { width: 180px; }
    
    /* 테이블 */
    #tbl1 {
        width: 377px;
        margin: 10px auto;
        border: 1px solid gray;
        border-collapse: collapse; /* 병합 */ 
    }
    #tbl1 th, #tbl1 td {
        border:  1px solid gray;
        padding: 4px;
    }
    #tbl1 th { background-color: #ddd; }
    #tbl1 th:nth-child(1) { width: 50px; } /* 번호 */
    #tbl1 th:nth-child(2) { width: 80px; } /* 이름 */
    #tbl1 th:nth-child(3) { width: 50px; } /* 나이  */
    #tbl1 th:nth-child(4) { width: 145px; }/* 연락처 */
    #tbl1 th:nth-child(5) { width: 50px; }
    
    #tbl1 td { text-align: center;}
    
</style>
 
<script type="text/javascript">
    
    var txtname;
    var age;
    var tel;
    var tbody1;
    var no = 1;//번호용도로 쓸
    
    function init() {
        //alert(typeof(name));
        //미리 컨트롤을 로드
        txtname = document.getElementById("name");
        age = document.getElementById("age");
        tel = document.getElementById("tel");
        tbody1 = document.getElementById("tbody1");
        
        
        
        //사용자의 입력을 편하게.. 이름 상자에 포커스
        //name.focus();
        
        //나이 추가
        for (var i=20; i<=60; i++) {
            //age.innerHTML += "<option value='" + i + "'>" + i + "세</option>";
            
            var op = document.createElement("option");
            op.setAttribute("value", i);
            op.innerText = i + "세";
            
            age.appendChild(op);
            
            age.value = 35;
        }
        
        
        
        //임의의 데이터 추가
        //addData();
        
        
        
        //테이블의 행에 이벤트 추가
        var tds = document.getElementsByTagName("td");
        //alert(tds.length);
        for (var i=0; i<tds.length; i++) {
            tds[i].onmouseover = rowFocus;
            
            tds[i].onmouseout = rowBlur;
        }            
    }
        
    function rowBlur() {
        event.srcElement.parentNode.style.backgroundColor = "transparent";//투명
    }
    
    function rowFocus() {
        //event.srcElement.style.backgroundColor = "yellow";
        event.srcElement.parentNode.style.backgroundColor = "gray";
    }
    
    function addData() {
        tbody1.innerHTML = "";//초기화
        
        for (var i=0; i<10; i++) {
            tbody1.innerHTML += "<tr><td>1</td><td>홍길동</td><td>20</td><td>010-5858-8585</td></tr>";
        }
    }        
    
    function add() {
        //이름, 나이, 연락처 입력 후 연락처 상자에서 엔터를 입력 -> 데이터 추가
        if (event.keyCode == 13) {
            
            //기존에 있는 <tr> 삭제(회원이 없습니다.)
            //alert(tbody1.firstChild.childNodes.length);
            
            if (tbody1.firstChild.childNodes.length == 3) {
                tbody1.removeChild(tbody1.firstChild);
            }
            
            
            //입력 데이터를 테이블의 행을 추가
            var tr = document.createElement("tr");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            var td4 = document.createElement("td");
            var td5 = document.createElement("td");
            
            td1.innerText = no; //번호
            td2.innerText = txtname.value;
            td3.innerText = age.value;
            td4.innerText = tel.value;
            td5.innerHTML = "<span onclick='del();' style='cursor:pointer;'>[x]</span>";
            
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4); //조립(tr+td)
            tr.appendChild(td5);
            
            tbody1.appendChild(tr);
            
            no++;//번호 증가
            
            
            //입력 후 입력 양식을 초기화
            txtname.value = "";
            age.value = 35;
            tel.value = "";
            
            txtname.focus();
            
            
            //새롭게 추가된 행에도 이벤트 추가
            for (var i=0; i<tr.childNodes.length; i++) {
                tr.childNodes[i].onmouseover = rowFocus;
                tr.childNodes[i].onmouseout = rowBlur;
            }
            
        }        
    }
    
    function del() {
        //한행의 [x] 버튼을 눌렀을 때 호출
        //alert("삭제");
        //근데.. 누구를 삭제?
                
        if (confirm("정말 삭제하시겠습니까?")) {
            var tr = event.srcElement.parentNode.parentNode;
            tbody1.removeChild(tr);
        }
    }
    
</script>
 
</head>
<body onload="init();">
 
 
    <!-- ex19.htm -->
 
 
 
    <fieldset id="addForm">
        <legend>회원 정보 입력</legend>
        
        <label for="name">이름 : </label>
        <input type="text" id="name" /><br />
        
        <label for="age">나이 : </label>
        <select id="age"></select><br />
        
        <label for="tel">연락처 : </label>
        <input type="text" id="tel" onkeydown="add();" /><br />        
        
    </fieldset>
    
    <table id="tbl1">
        <thead>
            <tr>
                <th>번호</th>
                <th>이름</th>
                <th>나이</th>
                <th>연락처</th>
                <th>삭제</th>
            </tr>
        </thead>
        <tbody id="tbody1"><tr>
                <td colspan="5">현재 등록된 회원이 없습니다.</td>
            </tr></tbody>
    </table>
    
 
</body>
</html>
cs


'WEB > JS' 카테고리의 다른 글

문제] 주민번호 입력폼 구현하기  (0) 2016.01.22
form test  (0) 2016.01.22
js test  (0) 2016.01.22
타이머  (0) 2016.01.22
버튼 찾아 css 제거하기  (0) 2016.01.22


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
<!DOCTYPE html>
<html>
<head>    
<meta charset="UTF-8">
<title>Insert title here</title>
 
 
<style type="text/css">
    #box {
        border: 1px solid black;
        width: 150px;
        height: 150px;
        position: absolute;
        /* left: 100px; */
        /* top: 0px; */
        background-color: yellow;
    }
        
    
    .box {
        border: 1px solid black;
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0px;
        top: 100px;
    }
    #box1 { background-color: red; }
    #box2 { background-color: yellow; }
    #box3 { background-color: blue; }
    #box4 { background-color: orange; }
    #box5 { background-color: purple; }    
</style>
 
 
<script type="text/javascript">
 
    var box;
    var boxlist = new Array();
    var index = 0; //박스들을 접근하기 위한 인덱스
    var z = 1;//z-index 값으로 사용(마지막 누른 사각형을 위로 올리기위한.,)
    
    function init() {
        //추후에 사용할 객체들을 페이지 로드에서 미리 찾아서 전역변수에 할당
        box = document.getElementById("box");
        //boxList[0] = document.getElementById("box1"); 5개 다 쓰지말고 for문으로..
        for (var i=0; i<5; i++) {
            boxList[i] = document.getElementById("box" + (i + 1));
        }
    
        
        //동적으로 이벤트 추가
        document.onmousedown = function() {
            var x = event.clientX;
            var y = event.clientY;
            
            //alert(x); //숫자만
            //이걸 이용해서... 상자를 클릭한 위치로 이동시키기
            //box.style.left = (x - 75) + "px";
            //box.style.top = (y - 75) + "px";
            
            boxList[index].style.zIndex = z;
            z++;
            
            
            boxList[index].style.left = (x - 50) + "px";
            boxList[index].style.top = (y - 50) + "px";
            index++;
            if (index >= 5) { index = 0; }
            
            
        };
        
        
        
    }
 
    function test() {
        //box.style.left = "300px";
        //box.style.top = "200px";
        
        //ask] 현재 위치에서 우로 20px 아래로 20px 이동하시오.
        
        // ******* Javascript로 CSS값을 읽어오는 경우.,
        //1. 인라인스타일로 적용
        //2. 자바스크립트로 초기화를 하고 읽기.,
        
        // *** (Embeded, External 방식으로) CSS에서 적용한 속성값을 Javascript로 읽는 경우.,
        //    -> 값을 읽을 수 없음
        //alert(box.style.left);
        //alert(box.style.left + 20);
        
        // *** Javascript에서 적용한 속성값을 Javascript로 읽는 경우.,
        //    -> 값이 읽혀짐
        //box.style.left="200px";
        //alert(box.style.left);
        //box.style.left = box.style.left + 20;
        
        // *** (inline 방식으로) CSS에서 적용한 속성값을 Javascript로 읽는 경우.,
        //    -> 값이 읽혀짐
        //alert(box.style.left); //x, 100px -> 100
        //alert(box.style.left + 20); //x, 100px20
        //alert(parseInt(box.style.left) + 20;);
        box.style.left = parseInt(box.style.left) + 20 + "px"; //o
        //box.style.top += 20; //x
        box.style.top = parseInt(box.style.top) + 20 + "px"; //o
    }
 
</script>
 
</head>
<body onload="init();">
 
 
    <!--  ex18.htm -->
 
 
    
    <input type="button" value="테스트" onclick="test();" />
    
    <div id="box" style="left:100px; top:0px;">상자</div>
    
    
    <div id="box1" class="box">상자</div>
    <div id="box2" class="box">상자</div>
    <div id="box3" class="box">상자</div>
    <div id="box4" class="box">상자</div>
    <div id="box5" class="box">상자</div>
    
    
    
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    
 
</body>
</html>
cs


'WEB > JS' 카테고리의 다른 글

form test  (0) 2016.01.22
회원정보 입력하기  (0) 2016.01.22
타이머  (0) 2016.01.22
버튼 찾아 css 제거하기  (0) 2016.01.22
마우스 이벤트 / 키보드 이벤트  (0) 2016.01.22


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<style type="text/css">
    #div2 {
        border: 1px solid gray;
        width: 100px;
        height: 20px;
        background-color: yellow;
    }
</style>
<script type="text/javascript">
 
    var w = 100;//width: 100px;에 대응하는 전역변수
    
    function test() {
        
        //타이머,Timer
        //1. 특정 시간이 지난 뒤 업무 실행
        //2. 특정 시간마다 업무 실행
        
        //setTimeout("자바 스크립트 코드", 실행시간);
        //setTimeout("alert('하하하');", 3000);
        
        //setTimeout(함수, 실행시간) //권장
        //setTimeout(test2, 3000);
        
        setTimeout(function() {
            //alert("꼬끼오~");
            document.getElementById("btn1").style.display = "none";
        }, 3000);
        
    }
    
    function test2() {
        alert("따르릉~");
    }
    
    
    function test3() {
        setInterval(function() {
            document.getElementById("div1").innerText = new Date().toLocaleString(); //시계
            
            document.getElementById("div2").style.width = w + "px";
            w += 5; //5씩 증가
            
        }, 1000)
    }
    
 
</script>
 
 
</head>
<body>
 
 
    <!-- ex17.htm -->
 
 
    
    <input type="button" id="btn1" value="테스트" onclick="test3();" />
    <div id="div1"></div>
    <div id="div2"></div>
 
</body>
</html>
cs


'WEB > JS' 카테고리의 다른 글

회원정보 입력하기  (0) 2016.01.22
js test  (0) 2016.01.22
버튼 찾아 css 제거하기  (0) 2016.01.22
마우스 이벤트 / 키보드 이벤트  (0) 2016.01.22
태그 조작  (0) 2016.01.22


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
 
<style type="text/css">
    #div1 {
        border: 1px solid black;
        width: 150px;
        height: 150px;
        background-color: yellow;        
    }
    
    #div2 {
        border: 1px solid black;
        width: 150px;
        height: 150px;
        background-color: yellow;        
    }
        
    #menu {
        width: 630px;
        height: 126px;
        margin: 0px auto;
        margin-top: -120px;
    }    
    
    #menu img {
        position: relative;
        left: 0px;
        top: 0px;
        cursor: pointer;
    }    
</style>
 
<script type="text/javascript">
    
 
    function test() {
        
        var div1 = document.getElementById("div1");
    
        //자바스크립트 -> CSS 제어
        //1. 태그명.style속성
        //2. CSS속성명을 그대로 사용
        //    - CSS속성명이 두단어로 구성되어 있으면 (background-color)
        //3. CSS 속성값은 문자열로 기입
        
         div1.style.width = "300px"; //Css] width: 300px
         div1.style.backgroundColor = "blue"; //Css] background-color: yellow;
                 
    }
    
    function test2() {
        
        var div2 = document.getElementById("div2");
        //alert(div2.style.visibility);
        
        //토글 버튼, Toggle Button        
        if (div2.style.visibility != "hidden") {
            div2.style.visibility = "hidden";
            event.srcElement.value ="보이기";
        } else {
            div2.style.visibility = "visible";
            event.srcElement.value ="감추기";
        }
    
    }
    
    //롤오버 이미지    
    function test3() {
        //event.srcElement.src = "images/catty05.png"; 
        event.srcElement.style.position = "relative";
        event.srcElement.style.left = "0px";
        event.srcElement.style.top = "10px";
    }
    
    function test4() {
        //event.srcElement.src = "images/catty01.png";
        event.srcElement.style.position = "relative";
        event.srcElement.style.left = "0px";
        event.srcElement.style.top = "0px";
    }
    
    function init() {
        //메뉴 이미지에 미리 이벤트 추가
        var menu = document.getElementById("menu");
        
        for (var i=0; menu.childNodes.length; i++) {
            menu.childNodes[i].onmouseover = function() {
                event.srcElement.style.top = "100px";
            }
            menu.childNodes[i].onmouseout = function() {
                event.srcElement.style.top = "0px";
            }
        }
    }
    
    
</script>
    
 
</head>
<body onload="init();">
 
 
    <!-- ex16.htm -->
 
 
 
    [ 버튼 찾아 CSS제어하기 ]<br />
    
    
    <div id="menu"><img src="images/rect_icon01.png" /><img src="images/rect_icon02.png" /><img src="images/rect_icon03.png" /><img src="images/rect_icon04.png" /><img src="images/rect_icon05.png" /></div>
    
    
    
    <hr />
    <img src="images/catty01.png" id="cat01" onmouseover="test3();" onmouseout="test4();" />
    
        
    
    <hr />
    <input type="button" value="테스트" onclick="test();" />
    <br /><br />
    <div id="div1">상자</div>
    
        
    <input type="button" value="감추기" onclick="test2();" />
    <br /><br />
    <div id="div2">상자</div>
 
</body>
</html>
cs


'WEB > JS' 카테고리의 다른 글

js test  (0) 2016.01.22
타이머  (0) 2016.01.22
마우스 이벤트 / 키보드 이벤트  (0) 2016.01.22
태그 조작  (0) 2016.01.22
태그 검색  (0) 2016.01.22
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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
 
<style type="text/css">
    #div1 { font-size: 20px; font-weight: bold; margin: 2opx; }
    #img1 { width: 600px; }
    
    .cats { border: 10px solid gray; }
</style>
 
<script type="text/javascript">
 
    //<body onload="">
    //    - 브라우저가 문서의 내용을 모두 읽은 직후에 발생하는 이벤트
    //    - <body>태그의 내의 모든 내용을 브라우저가 읽은 뒤.,
    //    - 모든 태그에 접근 가능한 시점(*******)
    //    - 문서 초기화 역할(자바 : 생성사 역할)
    
    //마우스 관련 이벤트
    //1. onmouseover : 마우스 커서가 객체위에 올라가는 시점에 발생
    //2. onmouseout : 마우스 커서가 객체위에 빠져나가는 시점에 발생
    //3. onmousedown : 마우스 버튼을 눌렀을 때 발생
    //              a. : 마우스 버튼의 종류
    //              b. : 마우스 커서의 좌표
    
    
    
    /* 전역공간 */
    var img1;
    var div1;
    var cats = new Array();
    
    
    function init() {
        
        img1 = document.getElementById("img1");
        div1 = document.getElementById("div1");
        
        
        img1. onmouseover = function() {
            div1.innerText = "마우스가 올라갔습니다.";
        };
        
        img1. onmouseout = function() {
            div1.innerText = "마우스가 빠져나갔습니다.";
        }; 
        
        img1.onmousedown = function() {
            //div1.innerText = "마우스 버튼을 눌렀습니다.";
            //div1.innderText = event.button;
            
            //마우스 커서의 좌표
            //1. clientX, clientY
            //    : 문서 좌측 상단을 기준
            //2. screenX, screenY
            //    : 화면 좌측 상단을 기준
            //3. offsetX, offsetY
            //    : 이벤트 발생 객체의 좌측 상단을 기준
            
            //div.innerText = event.clientX + " , " + event.clientY;
            //div.innerText = event.screenX + " : " + event.screenY;
            //div.innerText = event.offsetX + " : " + event.offsetY;            
        };
        
        
            img1.onmouseup = function() {
                div1.innerText = "mouseup : " + event.offsetX + " : " + event.offsetY;
            } 
                    
            img1.onmousemove = function() {
                div1.innerText = "mousemove : " + event.offsetX + " : " + event.offsetY;
            } 
        
            
        var index = 0;
        //동적
        for (var i=0; i<document.images.length; i++) {
            //1. alert(img.getAttribute("class"));
            //2. alert(img.className);
            
            var img = document.images[i];
            
            if (img.className == "cats") {
                
                
                cats[index]    = img;
                index++;
                
                
                //img.style.border = "10px dotted orange";
                img.onmouseover = function(){
                    event.srcElement.style.border = "10px solid green";
                }
                
                img.onmouseout = function(){
                    event.srcElement.style.border = "10px solid gray";    
                }
            }//그냥 오렌지로 바꾸는게 아니고 if(클래스네임이 cats만 찾아서)걸어서!
            
        }
        
        
        //[키보드이벤트] 문서상에서 키보드를 누르면.,
        document.onkeydown = function() {
            //alert(event.keyCode);
            //숫자 패드 키
            //1(97) ~ 9(105)
            cats[event.keyCode - 97].style.border = "10px solid yellow";
        };
        
        document.onkeyup = function() {
            cats[event.keyCode - 97].style.border = "10px solid gray";
        };
        
        
         
    }//init();
 
    
    
    
    function test1() {
        
        //해당 이벤트를 발생시킨 태그(객체) -> 자바] this연산자
        event.srcElement.style.border = "10px solid blue";
    }
    
    function test2() {
        event.srcElement.style.border = "10px solid gray";
    }
 
    
    
    
    /* 키보드 */    
    function test3() {
        
        //키(보드) 이벤트
        //1. onkeydown*
        //    - 키를 눌렀을 때
        //    - '물리키'에 반응
        //    - 문자 이외의 키에도 반응
        
        //2. onkeyup
        //    - 키를 뗄 때
        //    - 물리키에 반응
        //    - 문자 이외의 키에도 반응
        
        //3. onkeypress
        //    - 키를 눌렀을 때
        //    - '문자키'에 반응(아스키문자)
        //    - 문자 이외의 키에는 반응 없음
        
        
        //document.getElementById("div1").innerText = "키를 눌렀습니다.";
        document.getElementById("div1").innerText = event.keyCode;
    }
    
    function test4() {
        document.getElementById("div1").innerText = event.keyCode;        
    }
    
    function test4() {
        //document.getElementById("txtb").value = "첫번째 박스에서 키 눌림";
        document.getElementById("txtb").value = document.getElementById("txta").value;
    }
    
    
    
    
</script>
 
 
</head>
<body onload="init();"> <!-- 정적 이벤트 두번째 방법 : body에 onload걸기-->
 
 
    <!-- ex15.htm -->
 
 
 
    
    <input type="text" id="txta" size="60"
            onkeyup="test4();" /><br />
    <input type="text" id="txtb" size="60" /><br />
    <hr />
    
    <input type="text" id="txt1" onkeydown="test3();" onkeypress="test4();" />
    <hr />
 
    
    <div id="div1"></div>
    <img src="images/wall08.jpg" id="img1" />
 
    
    <hr />
    <!-- img.cats[src='images/catty$$.png']*9 -->
    <!-- 
    <img src="images/catty01.png" alt="" class="cats" onmouseover="test1();" onmouseout="test2();" />
    <img src="images/catty02.png" alt="" class="cats" onmouseover="test1();" onmouseout="test2();" /> 
    -->
    
    <img src="images/catty01.png" alt="" class="cats" />
    <img src="images/catty02.png" alt="" class="cats" />
    <img src="images/catty03.png" alt="" class="cats" /><br />
    <img src="images/catty04.png" alt="" class="cats" />
    <img src="images/catty05.png" alt="" class="cats" />
    <img src="images/catty06.png" alt="" class="cats" /><br />
    <img src="images/catty07.png" alt="" class="cats" />
    <img src="images/catty08.png" alt="" class="cats" />
    <img src="images/catty09.png" alt="" class="cats" />
    <hr />
    
    
    <!--  
        onclick 이벤트
        - 마우스 이벤트 X
    -->
    <input type="button" value="클릭" onclick="alert('click');" />
    
    
    <script type="text/javascript">
        /*
        document.getElementById("img1").onmouseover = function() {
            document.getElementById("div1").innerText = "마우스가 올라갔습니다.";    
        };    정적 이벤트 첫번째 방법 : 초기상태에서 걸기 */
    </script>
    
    
</body>
</html>
cs


'WEB > JS' 카테고리의 다른 글

타이머  (0) 2016.01.22
버튼 찾아 css 제거하기  (0) 2016.01.22
태그 조작  (0) 2016.01.22
태그 검색  (0) 2016.01.22
BOM test  (0) 2016.01.22


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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<style type="text/css">
    #tbl1 {
        border: 1px solid gray;
        border-collapse: collapse;
        width: 400px;
    }
    
    #tbl1 th, #tbl1 td {
        border: 1px solid gray;
        font-size: 12px;
        padding: 3px;
    }
    
    #tbl1 th {
        background-color: maroon;
        color: white;
    }
    
    #tbl1 th:first-child { width: 50px; }/* 번호 */
    #tbl1 th:nth-child(2) { width: 80px; }/* 이름 */
    #tbl1 th:nth-child(3) { width: 160px; }/* 주소 */
    #tbl1 th:last-child { width: 110px; }/* 연락처 */
    
    #tbl1 td { text-align: center; }
    #tbl1 tr td:nth-child(3) { text-align: left; }
    
</style>
 
<script type="text/javascript">
    //태그 조작
    //1. 속성값 조작
    //2. PCDATA 조작
    //3. 자식 태그 조작
    
    function test() {
        
        var div1 = document.getElementById("div1");
        
        //동적으로 태그를 생성
        //1. innerHTML 속성
        //div1.innerText = "홍길동";
        //div1.innerHTML = "아무게";
        
        //<div id="div1"><input type='text' /></div>
        //<div id="div1">&lt;input type='text' /&gt;</div>
        //div1.innerText = "<input type='text' />";
        //div1.innerHTML = "<input type='text' />";
        //alert(div1.innerHTML);
        
        div1.innerHTML = div1.innerHTML + "<input type='text' /><img src='images/catty01.png' /><br />";
        //div1.innerHTML += "<input type='text' /><br />";
        
    }
    
    var n = 1;
    
    function test2() {
        var div1 = document.getElementById("div1");
        
        div1.innerHTML += "<img src='images/catty0" + n + ".png' />";
        n++;
        
        if (n >= 10) n = 1;
    }
    
    function test3() {
        
        //테이블 조작 -> 행조작, 셀조작..
        //새로운 행을 추가
        var tbody = document.getElementById("tbody1");
        
        tbody.innerHTML += "<tr><td>2</td><td>아무게</td><td>서울시 강남구 서초동</td><td>010-7777-8888</td></tr>"; 
        
    }
    
    function test4() {
        //동적으로 태그를 생성
        // - 태그와 속성과 텍스트 하나 하나를 객체로 취급
        //2. Manipulation
        
        //<div id="div1"></div>
        //<div id="div1"><img src="images/catty10.png" title="냥이~" /></div>
        var div1 = document.getElementById("div1");
        
        //<img />
        var img1 = document.createElement("img");
        
        //<img src="images/catty01.png" />
        img1.setAttribute("src", "images/catty10.png");
        
        //<img src="images/catty01.png" title="냥이~" />
        img1.setAttribute("title", "냥이~");
        
        div1.appendChild(img1);
        
        
        //<div id="div1"><img src="images/catty10.png" title="냥이~" /><span title="냥이번호">1번</span></div>
        
        
        //<span>
        var span1 = document.createElement("span"); 
        
        //<span title="냥이번호"></span>
        span1.setAttribute("title", "냥이번호");
        
        //<span title="냥이번호">1번</span>
        span1.innerText = "1번";
        
        div1.appendChild(span1);
    }
    
    
    function test5() {
        
        //태그 삭제
        //1. innerHTML
        //2. Manipluatoin
        
        //var div1 = document.getElementById("div1");
        //div1.innerHTML = ""; //빈문자열로 치환 -> <div></div>
        
        
        
        
        //부모와 자식을 찾기
        var tbody1 = document.getElementById("tbody1");
        var tr1 = document.getElementById("tr1");
        
        tbody1.removeChild(tr1);
        
    }
    
    function test6() {
        var img1 = document.getElementById("img1");
        
        //속성값 삭제
        //img1.title = "";    //BOM
        //img1.setAttribute("title", "");  //DOM
        
        //속성 삭제
        //img1.removeAttribute("title");
        
        
        //아무게의 주소 <td>
        var tdAddress = document.getElementById("tdAddress");
        tdAddress.innerText = "";
    }
    
    function test7() {
        //DOM
        // - 나(태그)를 중심으로 부모 형제 자식(태그,속성,PCDATA,기타)을 찾아가는 방법
        
        
        //자식 노드 탐색
        var tr1 = document.getElementById("tr1"); //나(me)
        
        //tr1.firstChild.innerText = 10;
        //tr1.lastChild
        //alert(tr1.childNodes.length);
        tr1.childNodes[5].innerText = "부산시";
        
    }
</script>
</head>
<body>
    <!-- ex14.htm -->
    <input type="button" value="테스트" onclick="test4();" />
    <input type="button" value="테스트" onclick="test5();" />
    
    <input type="button" value="테스트" onclick="test7();" />
    <br /><br />
    <div id="div1"></div>
    <br /><br />
    <img src="images/catty11.png" id="img1" title="냥이~" />
    <br /><br />
    
    <table id="tbl1">
        <thead>
            <tr>
                <th>번호</th>
                <th>이름</th>
                <th>주소</th>
                <th>연락처</th>                
            </tr>
        </thead>
        <tbody id="tbody1">
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>서울시 영등포구</td>
                <td>010-5555-8888</td>
            </tr>
            <tr id="tr1">
                <td>5</td>
                <td>아무게</td>
                <td id="tdAddress">서울시 강남구</td>
                <td>010-5555-8888</td>
            </tr>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>서울시 영등포구</td>
                <td>010-5555-8888</td>
            </tr>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>서울시 영등포구</td>
                <td>010-5555-8888</td>
            </tr>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>서울시 영등포구</td>
                <td>010-5555-8888</td>
            </tr>
            
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>서울시 영등포구</td>
                <td>010-5555-8888</td>
            </tr>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>서울시 영등포구</td>
                <td>010-5555-8888</td>
            </tr>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>서울시 영등포구</td>
                <td>010-5555-8888</td>
            </tr>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>서울시 영등포구</td>
                <td>010-5555-8888</td>
            </tr>
        </tbody>
    </table>    
    
    
    
</body>
</html>
cs


'WEB > JS' 카테고리의 다른 글

버튼 찾아 css 제거하기  (0) 2016.01.22
마우스 이벤트 / 키보드 이벤트  (0) 2016.01.22
태그 검색  (0) 2016.01.22
BOM test  (0) 2016.01.22
부모, 자식 찾기  (0) 2016.01.22


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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
 
<script type="text/javascript">
 
 
    //태그 검색
    //    -> 태그의 식별자 존재
    //        1. 태그명
    //        2. name 속성
    //            - BOM
    //            - BOM의 접근 방식에서 사용되는 식별자
    //            - 서버로 전송될 때 데이터의 이름(*****)
    //        3. id 속성
    //            - CSS, DOM(getElementById)
    //        4. class 속성
    
    //태그 조작
    //1. 속성값 조작
    //    a. BOM
    //        - HTML 태그에서 존재하는 속성의 이름이 거의 대부분 자바스크립트 속성으로 제공된다.(GET/SET)
    //            ex) <a href="#" title="풍선도움말">
    //                document.links[0].title = "풍선도움말";
    
    //    b. DOM
    //        - HTML 태그에서 존재하는 속성의 이름을 DOM 메소드의 인자값(key)으로 사용해서 제공된다. (Hashmap과 유사)
    //        - 태그.setAttribute(key, value); *
    //        - 태그.getAttribute(key); *
    
    
    //2. PCDATA 조작
    //3. 자식 태그 조작
    
    
    
    function test() {
        
        ////1. <a> 태그 찾기
        // a. BOM -> name 식별자로 찾았을 때
        //document.links[0]
        //document.links["link1"].title = "네이버로 이동합니다.";
        
        // b. DOM -> id 식별자 " 
        //document.getElementById("link1").title = "다시 풍선 도움말";
        
        
            //속성값 조작        
        var link1 = document.links["link1"]; //BOM
        var link1 = document.getElementById("link1"); //DOM
        
        //link1 == link2
        //    : 검색 방법이 다르더라도 찾은 객체는 동일한 객체
        //link1.title = "도움말1";
        //link2.title = "도움말2";    //BOM
        
         //link1.setAttribute("title", "도움말3");
        //link2.setAttribute("title", "도움말4"); //DOM
 
        //link1.href = "http://www.google.com";
        //link1.target = "_blank";                //BOM
        
        //link1.setAttribute("href", "http://www.yahoo.com");
        //link1.setAttribute("target", "_blank");    //DOM
 
                
            //PCDATA조작        
        link1.href = "http://www.daum.net";
        link1.target = "_blank";
        link1.innerText = "다음"; //DOM
        
        
        
        ////2. <img /> 태그 찾기
        // a. BOM
        //document.images[0]
        //var img1 = document.iamges["img1"];
        
        //img1.width = 500;
        //img1.height = 500;
        //img1.src = "images/catty02.png";
        
        
        // b. DOM
        var img1 = document.getElementById("img1");
        //img1.setAttribute("src", "images/catty03.png";)
        
        //img1.setAttribute("width", "128"); //setter
        
        
        //초기상태 접근 시에만.,
        //BOM은 HTML 태그에서 명시적으로 선언된 속성 or 암시적으로 선언된 속성 모두 가져오기 가능
        //DOM은 HTML 태그에서 명시적으로 선언된 속성만 가져오기
        //var w = img1.getAttribute("width"); //getter
        //var w = img1.width;                        
        //alert(w);
        
        var w = img1.width;
        img1.width = w + 10;
        
        var w = img1.height;
        img1.height = h - 10;
        
        
        ////3. 텍스트 박스 찾기
        // a. BOM
        //document.forms[0]
        //document.forms["forms1"]
        //document.forms1
        
        //document.form1.elements[0] : 모든 컨트롤이 포함        
        //var txt1 = document.form1.txt1;
        //txt1.value = "클릭했습니다.";
        //alert(txt1.value);
        //숫자만 입력.,
        /* if (isNaN(txt1.value)) {
            alert("숫자가 아닌값을 입력했습니다.");
        } */
        
        // b. DOM
        //document.getElementById("cb1").checked = true;
        
        
        
        
                
        //여기까지 BOM 모델에 속한 태그만 검색
        //    -> 검색 후 소유하고 있는 속성이나 PCDATA를 제어 + CSS 제어
        //------------------------------------------------
        //이후부터 BOM 모델에 속하지 않는 태그를 검색해보자~
        //(a, img, form(자식) 를 제외한 나머지 태그)
        // 찾게 되는 이유 -> 검색 후 PCDATA를 제어 + CSS 제어
        
        
        
        
        ////4. <div> 태그
        // a. BOM
        //    -> 지원안함(못찾음)
        // b. DOM
        var div1 = document.getElementById("div1");
        div1.innerText = "접근했습니다.";
        
        
        ////5. <p>
        var p1 = dovument.getElmentById("p1");
        p1.innetText = "하하하하";
                    
    }
 
    
</script>
 
 
</head>
<body>
 
 
    <!-- ex11.htm -->
    <!-- 태그 검색 -->
 
 
    
    <input type="button" value="테스트" onclick="test();" />
    <hr />
    
    
    <a href="http://www.naver.com" name="link1" id="link1">네이버</a>
    <br /><br />
    
    
    <img src="images/catty01.png" name="img1" id="img1" width="128" />
    <br /><br />
    
    
    <form name="form1" id="form1">
        컨트롤 : <input type="text" name="txt1" id="txt1" />
        <br /><br />
        <input type="checkbox" name="cb1" id="cb1" />
    </form>
    
    
    <br /><br />
    <div id="div1">상자입니다.</div>
    <p id="p1">문단입니다.</p>
 
 
 
</body>
</html>
 
cs


'WEB > JS' 카테고리의 다른 글

마우스 이벤트 / 키보드 이벤트  (0) 2016.01.22
태그 조작  (0) 2016.01.22
BOM test  (0) 2016.01.22
부모, 자식 찾기  (0) 2016.01.22
BOM / DOM 방식  (0) 2016.01.22


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
 
<script type="text/javascript">
    
    //윈도우 하위 객체(BOM)    
    // - screen
    // - hitory
    // - location
    
    function test() {
        
        //screen 객체
        
        // - 현재 화면의 해상도
        //alert(screen.availWidth); //1440    
        //alert(screen.availHeight);// 860
        
        //팝업을 화면 가운데 띄어주세요.
        window.open("http://www.naver.com", "naver", "width=200,height=200, left=" + (screen.availWidth / 2 - 100) +", top=" + (screen.availHeight / 2 - 110))
    }
    
 
    function test2() {
        
        //location 객체
 
        // - 브라우저의 현재 위치와 관련된 행동
        //location.href = "URL";
        //location.href = "http://www.naver.com"; //페이지이동**
        location.href = "ex09.htm";
    }
    
    
    function test3() {
        
        //history
        
        // - 브라우저의 방문 기록을 관리
        //history.back(); //브라우저의 뒤로 가기 버튼
        //history.forward();
    }
    
    
    function test4() {
        
        //window - 대화상자**
        // 1. alert()
            //window.alert("메시지창");
        
        // 2. confirm()**
            //var result = confirm("메시지창");
            // 확인 : true
            // 취소 : false
            //alert(result);
        
            /* var result = confirm("정말 삭제하시겠습니까?");
            
            if(result) {
                //삭제업무.,
                alert("삭제했습니다.");
            } else {
                //취소업무.,
                alert("취소했습니다");
            } */
            
        // 3. prompt() (x)
            var name = prompt("이름을 입력하세요.", "");
            alert(name + "님 안녕하세요~");
        
        
        //window는 생략 가능
        //window.document.form1.btm1
        //window.document.getElementById("btm1")    
        
        //window.location.href = "";
        //window.history.back();
    }
    
    
</script>
 
 
</head>
<body>
 
 
    <!-- ex10.htm -->
 
 
 
    <input type="button" value="테스트" onclick="test();" />screen, 현재 해상도<br />    
    <input type="button" value="테스트2" onclick="test2();" />location, 페이지 이동<br />
    <input type="button" value="테스트3" onclick="test3();" />history, 뒤로(앞으로) 가기<br />
 
    <hr />
    <form method="POST" action="ex10Ok.jsp">
        이름 : <input type="text" /><br />
        나이 : <input type="text" /><br />
        <input type="submit" value="보내기" />
    </form>
        
    <hr />
    <input type="button" value="테스트4" onclick="test4();" /><br />
 
 
 
</body>
</html>
cs


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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 
 
    <!-- ex10Ok.jsp -->
    
    <!-- 
        
        ex10.htm -> (데이터 전송) -> ex10Ok.jsp
        : 문제 발생
        -> 알림 -> ex10.htm
    
    -->
    
    
    <script type="text/javascript">
        
        alert("데이터 입력 오류!!\n 다시 입력하세요.");
        
        
        //location & history 차이
        
        //location.href = "ex10.htm"; //항상 새로운 페이지를 요청 F5
        history.back();                  //이전의 상태를 기억
        
    </script>
 
 
</body>
</html>
 
cs


'WEB > JS' 카테고리의 다른 글

태그 조작  (0) 2016.01.22
태그 검색  (0) 2016.01.22
부모, 자식 찾기  (0) 2016.01.22
BOM / DOM 방식  (0) 2016.01.22
날짜시간 / 배열(array)  (0) 2016.01.22

+ Recent posts

티스토리툴바