반응형

ajax 통신 시 한글이 물음표(???)나 특수문자로 깨지는 현상을 경험하였다.

삽질하지 마시라고 해결책을 올린다.

 

1. html 파일의 charset을 utf-8로 설정한다.

1
<meta charset="utf-8">

 

2. 통신할 Servlet 파일의 doGet 또는 doPost 함수의 상단에 아래의 코드를 추가한다.

1
response.setContentType("application/x-json; charset=UTF-8");

 

3. WAS(tomcat)의 server.xml 파일(Servers 디렉터리 - Tomcat v7.0 Server - server.xml)의 65번째(바뀔 수도 있음) 줄에 코드를 아래의 코드로 수정한다.

1
<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" URIEncoding="UTF-8"/>

 

필자는 3번을 통해 문제를 해결하였다.

반응형

'프론트엔드 > 기타' 카테고리의 다른 글

[WEB] Servlet - Ajax 통신하기(이클립스, tomcat, web.xml)  (0) 2019.08.19
[WEB] 3. 회원가입 비밀번호 조건 및 일치 여부 확인 2  (0) 2019.06.04
[WEB] 2. 회원가입 비밀번호 조건 및 일치 여부 확인 1  (2) 2019.06.04
[WEB] 1.CheckBox 상태에 따른 안내메시지 및 이미지 출력  (0) 2019.06.04
반응형

목차

1. Ajax란

2. 실습 환경

3. 웹 페이지 생성

4. Servlet 생성

5. web.xml 설정

6. 정리

7. 출력 화면

1. Ajax란 (출처 - 위키백과)

 기존의 웹 애플리케이션은 폼을 채우고 이를 제출(submit)하면 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지를 작성하고 응답으로 되돌려준다. 이때 최초에 폼을 가지고 있던 페이지와 결과물로써 되돌려 받은 페이지는 일반적으로 유사한 내용을 가지고 있는 경우가 많다. 결과적으로 중복되는 HTML 코드를 다시 한번 전송을 받음으로써 많은 대역폭을 낭비하게 된다. 이는 금전적 손실을 야기할 수 있으며 사용자와 대화하는 서비스를 만들기 어렵게도 한다.

 반면에 Ajax는 필요한 데이터만을 웹 서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다. 웹 서버에서 전적으로 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리되므로 웹 브라우저와 웹 서버 사이에 교환되는 데이터량과 웹 서버의 데이터 처리량도 줄어들기 때문에 애플리케이션의 응답성이 좋아진다.

 

 장점

  - 페이지 이동없이 고속으로 화면을 전환할 수 있다.

  - 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.

  - 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.

 

 단점

  - Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.

  - HTTP 클라이언트의 기능이 한정되어 있다.

  - 동일-출처 정책으로 인해 다른 도메인과는 통신이 불가능하다.

2. 실습 환경

 - 이클립스

 - jquery-3.4.1

 - tomcat 7.0

  프로젝트 생성 및 tomcat 서버 설정을 마쳤다는 가정 하에 ajax 통신을 하였다.

3. 웹 페이지 생성

 먼저 사용자가 어떠한 입력을 수행할 수 있도록 html과 javascript를 사용하여 웹 페이지를 생성한다. 아래와 같이 ajax폴더에 파일들을 넣어줬다.

웹 페이지 생성

 

 3.1) ajaxCommunication.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript" src = "ajax/jquery-3.4.1.js"></script>
<script type="text/javascript" src = "ajax/ajaxCommunication.js"></script>
</head>
<body>
    <h2>Ajax Communication</h2>
    이름 : <input type="text" id = "ajaxConName"/>
    나이 : <input type="text" id = "ajaxConAge"/>
    <br>
    <input type="button" id = "ajaxConGetButton" value ="Get통신">
    <input type="button" id = "ajaxConPostButton" value ="Post 통신">
    <div id="myDiv"></div>
</body>
</html>
 

 Get, Post 방식의 통신을 구현하기 위해 두 개의 버튼을 생성하였다.

 

 3.2) ajaxCommunication.js

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
$(document).ready(function(){
    $('#ajaxConGetButton').click(function(){
        AjaxConGet();
    })
    
    $('#ajaxConPostButton').click(function(){
        AjaxConPost();
    })
    
})
 
function AjaxConGet(){
    var url = "http://localhost:8080/test/ajaxCon";
    $.ajax({
        type:"GET",
        url:url,
        dataType:"html",
        data:{
            name : $('#ajaxConName').val(),
            age : $('#ajaxConAge').val()
        },
        success : function(data){
            alert('ajax GET 통신 성공');
            var $div = $('<div></div>');
            var text = document.createTextNode(data);
            $div.append(data);
            $div.appendTo($('#myDiv'))
        
        },
        error : function(request,status,error){
            alert('code:'+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error); //에러 상태에 대한 세부사항 출력
            alert(e);
        }
    })
    
}
 
function AjaxConPost(){
    var url = "http://localhost:8080/test/ajaxCon";
    $.ajax({
        type:"POST",
        url:url,
        dataType:"html",
        data:{
            name : $('#ajaxConName').val(),
            age : $('#ajaxConAge').val()
        },
        success : function(data){
            alert('ajax POST 통신 성공');
            var $div = $('<div></div>');
            var text = document.createTextNode(data);
            $div.append(data);
            $div.appendTo($('#myDiv'))
        },
        error : function(request,status,error){
            alert('code:'+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error); //에러 상태에 대한 세부사항 출력
            alert(e);
        }
    })
    
}
 

 1 ~ 10 : 페이지가 로드되면 위에서 생성했던 두 개의 버튼에 대해 click 이벤트를 부여한다.

 

 12 : Get 방식으로 Ajax와 통신을 시도하는 함수이다.

 

 13 : 통신을 하고자하는 url을 입력한다. ~~test/ajaxCon으로 설정했는데, ajaxCon은 web.xml에서 설정한 서블릿의 url이다.

 

 15 ~ 21 : 통신 방식과 통신할 url, 수신할때의 데이터 타입, Servlet으로 보낼 데이터 정보를 넣어준다. dataType은 서블릿에서 객체 형식이나 두개 이상의 데이터를 송신할 경우 "json"을, 하나의 문장으로 송신할 경우 "html"을 넣어준다. 필자는 out.print()로 하나만 보내기 때문에 html로 해주었다.

 

 22 ~ 27 : Servlet과의 모든 통신이 정상적으로 끝나면 메서드의 매개변수 안에 Servlet이 response 한 데이터가 있게 된다. 이를 출력하기 위해 div태그에 응답 정보가 들어있는 textNode를 상속시키고, 이를 초기 HTML 코드로 생성했던 div 태그에 상속시킨다.

 

 30 ~ 32 : Servlet과의 통신 실패 시 에러 코드 및 내용에 대한 세부사항을 출력시킨다. 만일 에러 코드가 200이 나올 경우 dataType에 대한 수정이 필요하다.

 

 38 ~ 57 : type을 GET에서 POST로만 변경한 코드이다.

4. Servlet 생성

 패키지를 myServlet으로 설정하고 Servlet 이름은 Serv로 하였다. web.xml에서 url과 Servlet을 매핑할 것이기 때문에 WebServlet()을 주석처리하였다.

 

Serv.java

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
package myServlet;
 
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;
/**
 * Servlet implementation class Serv
 */
//@WebServlet("/ajaxCon")
public class Serv extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Serv() {
        super();
        // TODO Auto-generated constructor stub
    }
 
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        response.setContentType("application/x-json; charset=UTF-8");
        PrintWriter out = response.getWriter();
        String name = request.getParameter("name");
        String age = request.getParameter("age");    
        
        System.out.println("doget :"+name);
        System.out.println("deget :"+age);
            
        out.print("Get 통신 : 안녕 내 이름은 "+name+"이고 나이는 "+age+"란다"); //response    
    }
 
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        response.setContentType("application/x-json; charset=UTF-8");
        PrintWriter out = response.getWriter();
        String name = request.getParameter("name");
        String age = request.getParameter("age");    
        
        System.out.println("doget :"+name);
        System.out.println("deget :"+age);
            
        out.println("Post통신 : 안녕 내 이름은 "+name+"이고 나이는 "+age+"란다"); //response
    }
}
 

 9 : ajax로 데이터를 전송하기 위한 메서드인 java.io.PrintWrite를 import 하였다.

 

 28 : GET 방식으로 통신할 때의 함수이다.

 

 30 : ajax로 보낼 데이터의 charset을 utf-8로 설정한다. 이 부분이 없을 시 한글이 깨져서 출력될 수 있다.

 

 32 ~ 33 : ajax에서 보낸 name과 age를 읽어 들인다.

 

 38 : 위와 같은 형태로 데이터를 가공하여 ajax에게 전송한다.

 

 44 ~ 54 : POST 방식으로 통신할 때의 함수이다.

5. web.xml 설정

 web.xml은 루트 경로로 진입 시 가장 먼저 읽어오는 파일을 설정하거나 WAS에게 줄 Servlet 정보를 설정하고 url을 매핑하는 역할을 한다.

 

web.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>test</display-name>
  <welcome-file-list>
    <welcome-file>ajax/ajaxCommunication.html</welcome-file>  <!-- 루트경로 진입시 가장먼저 읽어오는 파일 -->
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
  <!-- 서블릿을 불러오기 위해 WAS에게 주는 정보 -->
  <!-- 1. 배포할 Servlet 2. 해당 Servlet 매핑 URL -->
      <servlet-name>ajaxCon</servlet-name>
      <servlet-class>myServlet.Serv</servlet-class>
  </servlet>
  
  <servlet-mapping>
      <servlet-name>ajaxCon</servlet-name>
      <url-pattern>/ajaxCon</url-pattern>
  </servlet-mapping>
</web-app>
 

 

 5 : <welcome-file> 태그는 루트 경로 진입 시 가장 먼저 읽어오는 파일이다. 읽어올 수 없을 시 순차적으로 아래 입력된 파일을 읽어온다. root경로에서 서버를 돌릴 시 ajaxCommunication.html 파일이 가장 처음 로드되도록 하였다. 그 아래는 기본적으로 입력되어 있는 파일이다.

 

 13 ~ 18 : WAS가 Servlet을 정상적으로 로드하기 위해 WAS에게 주는 Servlet과 url 정보이다. <servlet-name>은 <servlet-mapping>에서 동일한 name을 가진 정보와 매핑시키기 위한 이름이다. 현재 myServlet.Serv(클래스명.서블릿명) 파일을 '/ajaxCon' 이라는 url과 매핑시켰다. 이로써 '~~test/ajaxCon' url로 접속할 시 Serv 파일이 로드된다.

6. 정리

 이렇게 설정하면 ajax 통신이 정상적으로 이루어진다. 과정을 정리하자면

 

 1) 서버를 실행하면 web.xml에서 정의한 파일인 'ajax/ajaxCommunication.html'를 로드하고, WAS에게 서블릿 파일과 url 정보를 알려준다.

 

 2) HTML 파일에서 버튼을 클릭하게 되면 입력한 url과 ajax 통신을 시도하게 된다. url이 web.xml에서 설정한  ~~test/ajaxCon로 설정되었기 때문에 '/ajaxCon'과 매핑된 Serv 서블릿과 통신을 시도하게 된다.

 

 3) Servlet에서 데이터를 받은 후 가공하여 송신한다.

 

 4) ajax는 웹 페이지에 가공된 데이터를 출력시킨다.

 7. 출력 화면

통신 성공 화면

 

반응형

'프론트엔드 > 기타' 카테고리의 다른 글

[WEB] Ajax 통신 시 한글 깨짐 현상(???, 특수문자)  (0) 2019.08.19
[WEB] 3. 회원가입 비밀번호 조건 및 일치 여부 확인 2  (0) 2019.06.04
[WEB] 2. 회원가입 비밀번호 조건 및 일치 여부 확인 1  (2) 2019.06.04
[WEB] 1.CheckBox 상태에 따른 안내메시지 및 이미지 출력  (0) 2019.06.04
반응형

1. Goal

  • 비밀번호 입력 시 길이에 따른 보안성 항목 추가

2. Using

  • HTML
  • Javascript

3. Source Code

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>젊은이여 그대의 이름을 가치있게 하라</title>
    </head>
    <script>
        function check_pw(){
 
            var pw = document.getElementById('pw').value;
            var SC = ["!","@","#","$","%"];
            var check_SC = 0;
 
            if(pw.length < 6 || pw.length>16){
                document.getElementById('pw_pro_label').innerHTML ='비밀번호는 6글자 이상, 16글자 이하만 이용 가능합니다.';
                document.getElementById('pw_pro').value='0';
                return;
            }
            for(var i=0;i<SC.length;i++){
                if(pw.indexOf(SC[i]) != -1){
                    check_SC = 1;
                }
            }
            if(check_SC == 0){
                document.getElementById('pw_pro_label').innerHTML = '비밀번호에 !,@,#,$,% 의 특수문자를 포함시켜야 합니다.'
                return;
            }
            document.getElementById('pw_pro_label').innerHTML = '';
            if(pw.length < 8){
                document.getElementById('pw_pro').value='1';
            }
            else if(pw.length<12){
                document.getElementById('pw_pro').value='2';
            }
            else{
                document.getElementById('pw_pro').value='3';
            }
            if(document.getElementById('pw').value !='' && document.getElementById('pw2').value!=''){
                if(document.getElementById('pw').value==document.getElementById('pw2').value){
                    document.getElementById('check').innerHTML='비밀번호가 일치합니다.'
                    document.getElementById('check').style.color='blue';
                }
                else{
                    document.getElementById('check').innerHTML='비밀번호가 일치하지 않습니다.';
                    document.getElementById('check').style.color='red';
                }
            }
        }
    </script>
    <style>
        td{padding:5px;}
    </style>
    <body>
        <table>
            <tr>
                <td width="5%" align="center">*</td>
                <td width="20%">아이디</td>
                <td><input type="text" name ="userId" id="id"></td>
            </tr>
            <tr >
                <td width="5%" align="center">*</td>
                <td width="20%">비밀번호</td>
                <td><input type="password" name="userPW" id="pw" onchange="check_pw()">&nbsp;<span style="color:cadetblue">보안성</span> <progress id="pw_pro" value="0" max="3"></progress>&nbsp;<span id="pw_pro_label"></span></td>
            </tr>
            <tr>
                <td width="5%" align="center">*</td>
                <td width="20%">비밀번호 확인</td>
                <td><input type="password" name="userPW2" id="pw2" onchange="check_pw()">&nbsp;<span id="check"></span></td>
            </tr>
        </table>
    </body>
</html>
 cs

4. Explanation

1부와 소스코드가 비슷하니 추가된 부분만 간단하게 설명하도록 하겠다.

 

참고로 비밀번호 조건을 확인하는 부분의 조건문 내에 return 문을 추가해주었다고 한다. (가독성(?)을 위해...)

63
<td><input type="password" name="userPW" id="pw" onchange="check_pw()">&nbsp;<span style="color:cadetblue">보안성</span> <progress id="pw_pro" value="0" max="3"></progress>&nbsp;<span id="pw_pro_label"></span></td>
    

63번 라인에 <span style="color:cadetblut">보안성</span>은

보안성이라는 글자 + 스타일을 입히기 위해서 삽입해주었다.

 

<progress> 태그는 진행 정도를 아래와 같이 출력시키는 것이다.

<progress> 짜잔

봐줄만하다.(?)

 

<progress> 태그의 속성은

id, value, max가 있는데

max는 그려질 바(bar)에 대한 최대값

value는 현재 값이다.

위의 그림에서는 max = "3", value="2" 인 상태이기 때문에 약 66.6%의 영역이 색칠되어져 있다.

 

그럼 script문에서 이 value값만 컨트롤할수 있다면? (@_@)

아참 pw_pro_label은 bar에 대한 간단한 설명을 넣기 위한 id였는데! 사용하지 않았으므로 무시해주길 바란다.

 

script문은 정말쉽다. 추가된 부분은 아래와 같다.

추가된 부분

 

일단 비밀번호에 대한 조건이 충족되지 않으면 pw_pro의 value값을 0으로 설정한다.

그럼 당연히 bar는 빈상태가 될것이다.

 

비밀번호에 대한 조건을 충족시킨 상태에서 비밀번호의 길이가 6~7자 사이일 시 value에 1을

8~11자 사이일 시 2를

12~16자 사이일 시 3을 입력해줌으로 써 <progress> 태그를 컨트롤 하였다.

 (@_@)!

5. Result

보안성 2단계

6. Feelings

HTML을 배우면서 갑자기 뜬금! 궁금한게 생기곤 했는데 그중 하나가 이 부분이었다.

공부를 하고 나니 생각보다 구현하기 쉬웠다.

 

(@_@)

반응형

'프론트엔드 > 기타' 카테고리의 다른 글

[WEB] Ajax 통신 시 한글 깨짐 현상(???, 특수문자)  (0) 2019.08.19
[WEB] Servlet - Ajax 통신하기(이클립스, tomcat, web.xml)  (0) 2019.08.19
[WEB] 2. 회원가입 비밀번호 조건 및 일치 여부 확인 1  (2) 2019.06.04
[WEB] 1.CheckBox 상태에 따른 안내메시지 및 이미지 출력  (0) 2019.06.04
반응형

1. Goal

  • 비밀번호 입력 조건 삽입 (비밀번호 길이, 특수문자 삽입)
  • 비밀번호 일치 여부 확인

2. Using

  • HTML
  • JavaScript

3. Source Code

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>젊은이여 그대의 이름을 가치있게 하라</title>
    </head>
    <script>
        function check_pw(){
 
            var pw = document.getElementById('pw').value;
            var SC = ["!","@","#","$","%"];
            var check_SC = 0;
 
            if(pw.length < 6 || pw.length>16){
                window.alert('비밀번호는 6글자 이상, 16글자 이하만 이용 가능합니다.');
                document.getElementById('pw').value='';
            }
            for(var i=0;i<SC.length;i++){
                if(pw.indexOf(SC[i]) != -1){
                    check_SC = 1;
                }
            }
            if(check_SC == 0){
                window.alert('!,@,#,$,% 의 특수문자가 들어가 있지 않습니다.')
                document.getElementById('pw').value='';
            }
            if(document.getElementById('pw').value !='' && document.getElementById('pw2').value!=''){
                if(document.getElementById('pw').value==document.getElementById('pw2').value){
                    document.getElementById('check').innerHTML='비밀번호가 일치합니다.'
                    document.getElementById('check').style.color='blue';
                }
                else{
                    document.getElementById('check').innerHTML='비밀번호가 일치하지 않습니다.';
                    document.getElementById('check').style.color='red';
                }
            }
        }
    </script>
    <style>
        td{padding:5px;}
    </style>
    <body>
        <table>
            <tr>
                <td width="5%" align="center">*</td>
                <td width="20%">아이디</td>
                <td><input type="text" name ="userId" id="id"></td>
            </tr>
            <tr >
                <td width="5%" align="center">*</td>
                <td width="20%">비밀번호</td>
                <td><input type="password" name="userPW" id="pw" onchange="check_pw()"></td>
            </tr>
            <tr>
                <td width="5%" align="center">*</td>
                <td width="20%">비밀번호 확인</td>
                <td><input type="password" name="userPW2" id="pw2" onchange="check_pw()">&nbsp;<span id="check"></span></td>
            </tr>
        </table>
    </body>
</html>
 cs

4. Explanation

4.1. 아주 간단한 회원가입 페이지 만들기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <body>
        <table>
            <tr>
                <td width="5%" align="center">*</td>
                <td width="20%">아이디</td>
                <td><input type="text" name ="userId" id="id"></td>
            </tr>
            <tr >
                <td width="5%" align="center">*</td>
                <td width="20%">비밀번호</td>
                <td><input type="password" name="userPW" id="pw" onchange="check_pw()"></td>
            </tr>
            <tr>
                <td width="5%" align="center">*</td>
                <td width="20%">비밀번호 확인</td>
                <td><input type="password" name="userPW2" id="pw2" onchange="check_pw()">&nbsp;<span id="check"></span></td>
            </tr>
        </table>
    </body>
 cs
여백주기와 일치여부 메시지 출력이 편하기 때문에 table 태그를 사용하였다.
<tr> 태그는 테이블의 row, 즉 행이고 <td>태그는 col, 즉 열을 의미한다.
<td> 태그의 width, align 속성을 사용하여 *(필수입력) 기호와 아이디, 비밀번호, 비밀번호 확인 셀을 만들어주었다.
width는 너비를 나타내며 align은 정렬을 의미한다.

11번째 줄에 onchange 속성을 사용하였는데, 이는 키보드로 입력 후 변화가 생겼을 때 발생하는 이벤트를 의미하고, check_pw()라는 함수를 실행시키도록 하였다.
16번째 줄도 위와 같다.

4.2. 비밀번호 조건 설정
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
<script>
        function check_pw(){
            var pw = document.getElementById('pw').value;
            var SC = ["!","@","#","$","%"];
            var check_SC = 0;
 
            if(pw.length < 6 || pw.length>16){
                window.alert('비밀번호는 6글자 이상, 16글자 이하만 이용 가능합니다.');
                document.getElementById('pw').value='';
            }
            for(var i=0;i<SC.length;i++){
                if(pw.indexOf(SC[i]) != -1){
                    check_SC = 1;
                }
            }
            if(check_SC == 0){
                window.alert('!,@,#,$,% 의 특수문자가 들어가 있지 않습니다.')
                document.getElementById('pw').value='';
            }
            if(document.getElementById('pw').value !='' && document.getElementById('pw2').value!=''){
                if(document.getElementById('pw').value==document.getElementById('pw2').value){
                    document.getElementById('check').innerHTML='비밀번호가 일치합니다.'
                    document.getElementById('check').style.color='blue';
                }
                else{
                    document.getElementById('check').innerHTML='비밀번호가 일치하지 않습니다.';
                    document.getElementById('check').style.color='red';
                }
            }
        }
    </script>
 cs
 
* document.getElementById('pw')
- pw라는 이름을 가진 id를 참조한다.
 
* document.getElementById('pw').value;
- pw라는 이름을 가진 id의 value값을 참조한다.
 
 
* SC
- 비밀번호 입력 조건에 들어가는 특수문자를 배열 형태로 정의한 것이다.
 
* check_SC
- 특수문자 체크 변수로 특수문자 발견 시 1, 발견되지 않을 시 0이 입력되도록 한다.
 
* if(pw.length <6 || pw.length >16) ~
- 비밀번호의 길이가 6글자 미만 또는 16글자 초과 시 window.alert 메소드를 사용해 오류 메시지를 출력시키고 입력했던 pw를 초기화시킨다.
 
* for(var i=0;i<SC.length;i++) ~
- SC 배열의 모든 값을 pw와 비교한다.
pw.indexOf('SC[i]')은 사용자가 입력한 비밀번호(pw)에 SC[i]가 있는지 확인하는 메소드이며 존재할 시 존재하는 위치를 반환하고 그렇지 않을 시 -1을 반환한다.
즉, SC에 들어있는 문자열이 존재할 시 check_SC를 1로 만들어 준다.

* if(check_SC == 0)~
- check_SC가 0일 경우 특수문자가 들어있지 않다는 메시지와 함께 입력했던 비밀번호를 초기화시킨다.

 * if(document.getElementById('pw'.) !=''~~
- 위의 두가지 비밀번호 입력조건에는 공통점이 있다. 바로 조건을 만족하지 않을 시 입력했던 비밀번호를 초기화한다는 것이다. 반대로 초기화가 되지 않았다는 것은 조건을 만족했다는 의미이기 때문에 일치여부 확인을 위한 단계로 넘어가야 한다.

만약 이 코드가 없다면 위의 두가지 비밀번호 입력 조건을 만족하지 않았음에도 불구하고 일치여부를 확인하게 된다. 일을 두 번한다는 것이다.

* if(document.getElementById('pw').value==document.getElementById('pw2').value)
- pw의 value값과 pw2의 value값가 일치한다면

* document.getElementById('check').innerHTML='비밀번호가 일치합니다';~
- check 라는 id를 참조하여 그 안에 데이터를 넣는다. 즉 수정하기 위한 코드이다.

* document.getElementById('check').style.color='blue';
- 색을 변경해주었다. 

5. Result

비밀번호 길이 조건 미충족
비밀번호 특수문자 삽입 조건 미충족
비밀번호 미일치
비밀번호 일치
 

6. feelings

소스코드의 29번째 줄에 document.getElementById('check').innerHTML 가 있는데 생각해보니 document.getElementById('check').value와 똑같지 않나 라는 궁금증이 들어서 실험을 해보았다.
결과는 아래와 같다.

옆에 나와야 할 '비밀번호가 일치합니다' 라는 메시지가 뜨지 않는다.

처음엔

inner = 수정, 삽입 가능

value = 값 읽기 가능
이런 기능을 하는줄 알았으나 간단한 실험을 통해 알아보니
 
inner는 html 태그의 사이!<tag>'여기를 말합니다'<tag>
value는 tag의 value! <tag value = '여기를 말합니다'> <tag>
를 의미한다는 것을 알게 되었다.
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
 
</head>
<script type="text/javascript">
    function test(){
        document.getElementById('test').innerHTML = '이 부분이 innerHTML';
    }
</script>
<body>
    <input type="text" id="test" value="이 부분이 value"></span>
    <input type="button" value="클릭" onclick = test()>
</body>
</html>
 cs

 

 

1. 클릭이라는 버튼을 눌렀을 때 test() 함수가 실행.

2. id가 test인 태그의 사이에 '이 부분이 innerHTML' 이라는 글을 삽입

3. 편...안

 

이상!

반응형

'프론트엔드 > 기타' 카테고리의 다른 글

[WEB] Ajax 통신 시 한글 깨짐 현상(???, 특수문자)  (0) 2019.08.19
[WEB] Servlet - Ajax 통신하기(이클립스, tomcat, web.xml)  (0) 2019.08.19
[WEB] 3. 회원가입 비밀번호 조건 및 일치 여부 확인 2  (0) 2019.06.04
[WEB] 1.CheckBox 상태에 따른 안내메시지 및 이미지 출력  (0) 2019.06.04
반응형

1. Goal

  • 3개의 Checkbox중 하나도 선택하지 않을 시 안내메시지 출력
  • Checkbox 체크 상태에 따라 각각의 이미지 출력

2. Using

  • HTML
  • JavaScript

3. Source Code

 

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
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>젊은이여 그대의 이름을 가치있게 하라</title>
    <script type="text/javascript">
 
        function CheckForm(Join){
            var ch1 = document.input.pro1.checked;
            var ch2 = document.input.pro2.checked;
            var ch3 = document.input.pro3.checked;
 
            if(!(ch1+ch2+ch3)){
                alert('상품을 선택해주세요');
                return false;
            }
            
        }
    
        function info(){
            var ch1 = document.input.pro1.checked;
            var ch2 = document.input.pro2.checked;
            var ch3 = document.input.pro3.checked;
 
            ss = document.getElementById('imgs');
            if(ch1){
                ss.src = "../images/s.JPG";
            }
            if(ch2){
                ss.src = "../images/m.JPG";
            }
            if(ch3){
                ss.src = "../images/l.JPG";
            }
        }
    </script>
 
    <style type="text/css">
        .picture_style{
            height:100px;
            width:100px;
        }
 
    </style>
 
    
</head>
<body>
    <form name="input" method = "POST" onSubmit="return CheckForm(this)">
        <h2>상품주문하기</h2>
        <ul onClick="info(this)">
            <img id="imgs" src="../images/s.JPG" alt="랍스타 사진" class= picture_style>
            <label style="cursor:pointer"><li><input type="checkbox"  id="pro1" value="s">랍스터 500g </li></label>
            <label style="cursor:pointer"><li><input type="checkbox"  id="pro2" value="m" >랍스터 1kg </li></label>
            <label style="cursor:pointer"><li><input type="checkbox"  id="pro3" value="l">랍스터 2kg </li></label>
            
        </ul>
        <h2>사은품 선택</h2>
        <ul>
            <label style="cursor:pointer"><li><input type ="radio" name="freebies" value="scissors">가위</li></label>
            <label style="cursor:pointer"><li><input type ="radio" name="freebies" value="tongs">집게</li></label>
        </ul>
 
        <input type="submit" value="주문">
    </form>
 
</body>
</html>
 cs

 

4. Explanation

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
    <form name="input" method = "POST" onSubmit="return CheckForm(this)">
        <h2>상품주문하기</h2>
        <ul onClick="info(this)">
            <img id="imgs" src="../images/s.JPG" alt="랍스타 사진" class= picture_style>
            <label style="cursor:pointer"><li><input type="checkbox"  id="pro1" value="s">랍스터 500g </li></label>
            <label style="cursor:pointer"><li><input type="checkbox"  id="pro2" value="m" >랍스터 1kg </li></label>
            <label style="cursor:pointer"><li><input type="checkbox"  id="pro3" value="l">랍스터 2kg </li></label>
            
        </ul>
        <h2>사은품 선택</h2>
        <ul>
            <label style="cursor:pointer"><li><input type ="radio" name="freebies" value="scissors">가위</li></label>
            <label style="cursor:pointer"><li><input type ="radio" name="freebies" value="tongs">집게</li></label>
        </ul>
 
        <input type="submit" value="주문">
    </form>
 
</body>
 cs

내일 인터넷으로 주문한 랍스터가 오기 때문에 매우 간단한 랍스터 주문 페이지를 설계하였다.

6번 라인 <label>태그의 style을 "cursor:pointer"로 설정하여 사용자가 checkbox부분에 커서를 올릴 시 손가락표시로

바뀌도록 하였다.

손가락표시는 아래와 같이 친숙하게 출력된다.

 

검지임.jpg

<img> 태그를 사용해 페이지의 기본 이미지를 설정해 주었다.

또한 <label>태그 내에 <li>와 <input>태그를 삽입해 줌으로 써 사용자가 체크박스가 아닌 label

글씨를 클릭해도 체크가 되도록 하였다.

추가로 꼴에 사은품도 추가해보았다.

 

<form name="input" method = "POST" onSubmit="return CheckForm(this)">

submit가 수행되었을 때 form의 데이터를 어디론가 보낸다는 가정을 위해 method="POST"를 사용하였다.

onSubmit는 아랫부분에 <input type="submit" value ="주문"> 코드를 이용해 만든 주문이라는submit 버튼이 눌러졌을 때 CheckForm(this)라는 함수를 실행한다.

여기서 this는 메소드가 호출된 인스턴스(객체)를 말한다. 즉, form이다.

 

 

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
    <script type="text/javascript">
 
        function CheckForm(Join){
            var ch1 = document.input.pro1.checked;
            var ch2 = document.input.pro2.checked;
            var ch3 = document.input.pro3.checked;
 
            if(!(ch1+ch2+ch3)){
                alert('상품을 선택해주세요');
                return false;
            }
            
        }
    
        function info(){
            var ch1 = document.input.pro1.checked;
            var ch2 = document.input.pro2.checked;
            var ch3 = document.input.pro3.checked;
 
            ss = document.getElementById('imgs');
            if(ch1){
                ss.src = "../images/s.JPG";
            }
            if(ch2){
                ss.src = "../images/m.JPG";
            }
            if(ch3){
                ss.src = "../images/l.JPG";
            }
        }
    </script>
 cs

자바스크립트 언어를 사용하여 함수를 정의해준다.CheckForm 함수를 간단히 설명하겠다.

4번 라인의 document.input.pro1.checked 구문은 html(document) 부분의 name이 input인 태그 내에서 pro1이라는 id를 가진 변수의 check여부를 ch1이라는 변수에 넣는다란 의미이다.

(check = True, no check = False)

 

세개의 checkbox 모두 위와같이 설정해주고, checkbox가 하나도 선택되지 않을 경우 alert메소드를 이용해

'상품을 선택해주세요' 라는 메시지를 출력시킨다.

위와 같은 메시지가 출력되었을 때에는 submit가 되지 않도록 하기 위해 return을 false로 한다.

 

info 함수는 처음부분 위와 동일하다.

20번 라인의 ss = document.getElementById('imgs')에서 getElementById는 id값을 참초할 수 있도록 해주는 메소드이다. 즉, ss라는 변수가 랍스터 사진을 출력시키는 id인 imgs를 참조할 수 있도록 한다.

21번 라인의 if(ch1)는 ch1 체크박스가클릭되었을 때 s.JPG라는 이미지를 imgs의 src 속성에 대입시키게 되고, 이미지가 출력되도록 한다.

5. Result

s.jpg
m.jpg

 

l.jpg

 

상품 미선택

 

 

 

 

 

 

반응형

'프론트엔드 > 기타' 카테고리의 다른 글

[WEB] Ajax 통신 시 한글 깨짐 현상(???, 특수문자)  (0) 2019.08.19
[WEB] Servlet - Ajax 통신하기(이클립스, tomcat, web.xml)  (0) 2019.08.19
[WEB] 3. 회원가입 비밀번호 조건 및 일치 여부 확인 2  (0) 2019.06.04
[WEB] 2. 회원가입 비밀번호 조건 및 일치 여부 확인 1  (2) 2019.06.04

+ Recent posts

티스토리툴바