1. setInterval()

일정한 시간 간격으로 작업 수행

 

 

2. clearInterval()

타이머를 중지하는 함수

 

 

3. setTimeout()

일정 시간 이후 작업을 한 번 수행하는 함수. 저장된 시간 사이에 작업 시간이 추가됨.

 

* 1초 = 1000ms (단위는 ms로 적어야 함)

html의 form 안에서 허용되지 않은 형식의 값 입력을 방지하기 위해 사용하며 submit 이벤트 발생시 입력 여부, 입력 형식을 검사한다.

 

JSON 형식으로 정의해 놓으면 스스로 동작하기 때문에 편리하게 사용할 수 있다.

 

 

* 참고 : https://jqueryvalidation.org

* 인코딩

네트워크를 통해 정보를 공유할 시, 어떤 시스템에서도 읽을 수 있도록 ASCII 문자로 바꿔주는 것이다.

모든 네트워크를 통한 전송에는 ASCII 문자를 기반으로 하고 있는데, 특히 한글이나 특수문자의 경우 2진수 바이트 코드로 변환해서 전송하면 반는 상대방의 시스템에 따라 해석이 불가한 경우가 많아지기 때문에, 인코딩이 필요하다.

 

 

1. escape()

특정 아스키 문자를 제외하고 전부 유니코드로 변환

encodeURI() 와 Component 의 중간 정도의 범위로 인코딩

16진수 형식으로 표시 (ex. 1바이트 : %XX / 2바이트 : %uXXX)

 

 

2. encodeURI()

인터넷 주소 표시에 쓰이는 특수문자들은 인코딩 하지 않음 (ex. : ; / = ? & 등은 인코딩 하지 않는다)

보통 파라미터를 전달하는 URI 전체를 인코딩시 사용

 

 

3. encodeURIComponent()

인터넷 주소 표시에 쓰이는 모든 문자를 인코딩

파라미터 하나하나 따로따로 인코딩시 많이 사용함

(한꺼번에 넘기는 경우, 파라미터 값 연결시 쓰이는 '&' 등도 인코딩 되어 버리니까)

http:// ... 가 http%3A%2F%2F로 인코딩됨

 

 

* java.net.URLEncoder.encode는 encoderURIComponent() 와 비슷하지만, encoderURIComponent() 가 인코딩 하지 않는 ! ( ) 3개도 인코딩 한다.

 

* 자바스크립트에서 지원하는 인코딩은 모두 utf-8 (Ajax도 utf-8)

* 자바스크립트에서 파라미터를 Controller 단으로 보내는 경우, 받는 Controller 단에서도 UTF-8 인코딩 처리를 해줘야 한다. [ ex. request.setCharacterEncoding("UTF-8"); ]

 

1
2
3
4
window.onload = function() {
    // scroll : yes, no, auto중 택1 가능
    window.documnet.body.scroll = "auto";    
}
cs

해당 팝업창으로 열리는 .jsp 페이지에 함수를 걸어 처리하였다.

1. 한글만 입력되도록

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#hangeul').keyup(function() {
        onlyHangeul($(this));
    });
});
 
/*
 * 한글만 입력되도록 리턴(띄어쓰기 불가능)
 * ex) onlyHangeul($(this))
         $(this).val() = 나는12asdf4정말^^좋다b333
         return 나는정말좋다
 */
function onlyHangeul(obj) {
    var value = obj.val();
    obj.val(value.replace(/[^ㄱ-ㅎ가-힣]/g, '')); }
</script>
cs

 

 

2. 영문만 입력되도록

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#english').keyup(function() {
        onlyEnglish($(this));
    });
});
/*
 * 영문만 입력되도록 리턴(띄어쓰기 불가능)
 * ex) onlyHangeul($(this))
         $(this).val() = 나는12asdf4정말^^좋다b333
         return asdfb
 */
function onlyEnglish(obj) {
    var value = obj.val();
    obj.val(value.replace(/[^a-zA-Z]/g, ''));  
}
</script>
cs

 

 

3. 숫자에 자동 콤마 생성

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
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#numberComma').keyup(function() {
        numberComma($(this));
    });
});
 
/*
 * 숫자에 콤마 생성 후 리턴(띄어쓰기 불가능)
 * ex) onlyHangeul($(this))
         $(this).val() = 나는12asdf4정말^^좋다b333
         return 124,333
 */
function numberComma(obj) {
    var str = String(obj.val().replace(/[^0-9]/g, ''));
    // 가장 처음 숫자가 0인지 체크
    if (obj.val() != 0) {
        var reStr = str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
    } else {
        var reStr = '';
    }
    
    obj.val(reStr);
}
</script>
cs

ㄴㅇㄹㅇㄴ

ㄹㄴㅇ

 

 

 

 

ㄴㅇㄹ

ㄹㄴㅇㄹㄴㅇ

jsp에서 쉽게 차트나 그래프를 표현할 수 있는 api이며, 여러 모양이나 형태로도 손쉽게 구현이 가능하다.


1. Controller에 데이터를 담음

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Controller
public class HomeController {
    
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String home(Model model) {
        
        PercentVO percentVO = new PercentVO();
        
        percentVO.setYesPercent("40");
        percentVO.setNoPercent("60");
        
        System.out.println("debug> percentVO : " + percentVO);
        
        model.addAttribute("percentVO", percentVO);
        
        return "home";
    }    
}
cs

yesPercent에 40, noPercent에 60이라는 값이 들어있는 PercentVO 모델이 있다고 가정한다.



2. jsp Highcharts 구현

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
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
<title>Highcharts Example</title>
<!-- Highchars CDN -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function() {
    // body > div 부분에 적은 id를 파라미터로 직접 넘긴다.
    Highcharts.chart('container', {
         chart: {
             plotBackgroundColor: null,
            plotBorderWidth: 0,
            plotShadow: false,
            height: 500
         },
         title: {
            text: '',
            align: 'center',
            verticalAlign: 'bottom',
            y: -300,
            x: -80
        },
        credits: {
            enabled: false
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage: 1f}%</b>'
        },
        plotOptions: {
            pie: {
                dataLabels: {
                    enabled: true,
                    distance: -50,
                    style: {
                        fontWeight: 'bold',
                        color: 'white',
                        fontSize: '15px'
                    }
                },
                startAngle: -90,
                endAngle: 90,
                center: ['50%''75%']
            }
        },
        series: [{
            // Highcharts를 pie 형태로 구현했다.
            type: 'pie',
            name'응답률',
            innerSize: '20%',
            /*    
                data: [name:'params1', value:'params2'] 의 형태이다.
                name과 value는 생략이 가능하며, 'params1'과 'params2' 값만 적어도 무방하다.
                * 주의 *
=> Highcharts로 표현하려는 값이 변수일 경우에는 반드시 JSON.parse() 함수 안에
                변수 값을 적어야 한다.
            */
            data: [
                ['YES(${percentVO.yesPercent}%)', JSON.parse('${percentVO.yesPercent}')],
                ['NO(${percentVO.noPercent}%)', JSON.parse('${percentVO.noPercent}')],
            ]
        }]
    });
});
</script>
</head>
<body>
    <div id="container" style="min-width:350px;height:200px;max-width:250px;margin:0 auto"></div>
</body>
</html>

cs

 


실제로 작업 당시 series의 data 부분에 변수를 넣어야 했는데 아무리 검색을 해도 나오지 않았고, JSON 형태로 담아야 파라미터가 출력된다는 검색 결과들에 힌트를 얻어 해결할 수 있었다.

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
<%@ 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>rowspan example</title>
<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
<script type="text/javascript">
 
$(function(){
    $('#rowTable').each(function() {
        var table = this;
        // rowspan할 tr(세로 기준)
        $.each([1,4], function(c, v) {
            var tds = $('>tbody>tr>td:nth-child(' + v + ')', table).toArray();
            var i = 0, j = 0;
            
            for(j = 1; j < tds.length; j ++) {
                if(tds[i].innerHTML != tds[j].innerHTML) {
                    $(tds[i]).attr('rowTable', j - i);
                    i = j;
                    continue;
                }
                $(tds[j]).hide();
            }
            j --;
            
            if(tds[i].innerHTML == tds[j].innerHTML) {
                $(tds[i]).attr('rowTable', j - i + 1);
            }
        });
    });
});
 
</script>
</head>
<body>
    <h1>중복 데이터 셀 병합</h1>    
    <!-- table id를 적고 제이쿼리에서 id 값으로 불러온다. -->
    <table border="1" style="border-collapse:collapse;border:1px gray solid;" id="rowTable">
        <thead>
            <tr>
                <th>제목</th>
                <th>제목</th>
                <th>제목</th>
                <th>제목</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
                <td>d</td>
            </tr>
            <tr>
                <td>a</td>
                <td>2</td>
                <td>3</td>
                <td>d</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
cs

colspan도 이와 같은 방식으로 적용시키면 된다.

1. $(document).ready()

- 외부 리소스. 이미지와는 상관 없이 브라우저가 DOM (document object model) 트리를 생성한 직후 실행

- window.load() 보다 더 빠르게 실행되고 중복 사용하여 실행해도 선언한 순서대로 실행됨

 

 

2. $(window).load()

- DOM의 standard 이벤트

- html의 로딩이 끝난 후에 시작

- 화면에 필요한 모든 요소(css, js, image, iframe etc..)들이 웹 브라우저 메모리에 모두 올려진 다음에 실행됨

- 화면이 모두 그려진 다음의 메세징이나 이미지가 관련 요소가 모두 올려진 다음의 애니메이션에 적합함

- 전체 페이지의 모든 외부 리소스와 이미지가 브러우저에 불려운 이후 작동하게 되어 이미지가 안뜨너가 딜레이가 생길 때에는 그만큼의 시간을 기다려야 함

- 외부 링크나 파일 인크루트시 그 안에 window.load 스크립트가 있으면 둘 중 하나만 적용됨

- body onload 이벤트와 같이 body에서 onload 이벤트를 쓰게 되면 모든 window.load() 가 실행되지 않는 현상이 발생함

 

 

* window > document

- document는 window의 자식 객체

  (window의 자식 객체 : document, self, navigator, screen, forms, history, location etc..)

- document : html의 요소들이나 속성들에 접근할 시 사용하는 객체

 

 

3. 실행 순서 비교

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(window).load(function() {
    console.log("console> window.onloade() 첫번째");
});
 
$(window).load(function() {
    console.log("console> window.onload() 두번째");
});
 
$(document).ready(function() {
    console.log("console> document.ready() 첫번째");
});
 
$(document).ready(function() {
    console.log("console> document.ready() 두번째");
});
</script>
 
</head>
<body>
 
</body>
</html>
cs

 

 

콘솔창에서 document.ready가 먼저 실행되고 그 다음에 window.load가 실행되는 것을 확인할 수 있다.

 

 

4. document.ready() vs window.load() vs body onload 이벤트 비교

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
 $(window).load(function() {
     console.log("console> window.load()");
 });
 
 $(document).ready(function() {
     console.log("console> document.ready()");
 });
</script>
 
</head>
<body onload="console.log('console> body onload...');">
 
</body>
</html>
cs

 

document.ready() > window.load() > body onload 이벤트 순서대로 실행되는 것을 확인할 수 있다.

 

 

* window.load() vs body onload 차이

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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
<script>
$(window).load(function() {
     console.log("console> window.load()");
 });
</script>
 
</head>
<body onload="console.log('console> body onload...');">
 
</body>
</html>
cs

 

 

window.load()는 jquery CDN을 import 해줘야 사용할 수 있는 반면, body onload 이벤트는 jquery CDN을 import 해주지 않아도 사용할 수 있다.

 

 

* $(function() 대신 $(document).ready() 를 권장하는 이유

$(function() 을 쓰나 $(document).ready() 를 쓰나 같은 함수임에는 틀림이 없으나

$(window).load() 함수와 확실하게 구분지어주기 위해 $(document).ready() 를 사용하는 것을 권장한다.

1. text()

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#btn1").click(function() {
        console.log("console> btn1");
        
        $("#test1").text("Hello World!");
    });
    
    $("#btn2").click(function() {
        console.log("console> btn2");
        
        $("#test2").text("<b>Hello world!</b>");
    });
});
</script>
 
</head>
<body>
 
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
 
<button id="btn1">Set text</button>
<button id="btn2">Set html</button>
 
</body>
</html>
cs

 

text()는 안에 포함되어 있는 태그를 일반 텍스트로 인식한다(태그가 적용되지 않음)

 

 

2. 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#btn1").click(function() {
        console.log("console> btn1");
        
        $("#test1").html("Hello World!");
    });
    
    $("#btn2").click(function() {
        console.log("console> btn2");
        
        $("#test2").html("<b>Hello world!</b>");
    });
});
</script>
 
</head>
<body>
 
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
 
<button id="btn1">Set text</button>
<button id="btn2">Set html</button>
 
</body>
</html>
cs

 

 

html() 은 안에 있는 태그를 태그로 인식하여 적용시켜 준다(태그가 적용됨)

 

 

1. 문자열 배열 정렬(알파벳)

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
<p id="demo"></p>
 
<button onclick="myFunction()">Try it</button>
 
<script>
    var fruits = ["Banana""Orange""Apple""Mango"];
    
//    console.log("console> fruits.length : " + fruits.length);
 
    document.getElementById("demo").innerHTML = fruits;
    
//     sort() : 배열 요소를 알파벳 순서대로 정렬
//     reverse() : 알파벳 역순으로 정렬    
     function myFunction() {
         fruits.sort();
         fruits.reverse();
        
         document.getElementById("demo").innerHTML = fruits;
     }        
</script>
 
</body>
</html>
cs

 

 

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
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
<p id="demo"></p>
 
<button onclick="myFunction()">Try it</button>
 
<script>
    var points = [40100152510];
    
//    console.log("console> points.length : " + points.length);
 
    document.getElementById("demo").innerHTML = points;
    
    function myFunction() {
//        sort() : 배열 요소를 알파벳 순서대로 정렬하는 메소드
//                 숫자가 올 경우 안에 callback 함수를 이용하여 정렬
//        숫자를 작은 수 > 큰 수 순으로 정렬하는 경우
        points.sort(function(a, b) {
            return a - b;
        });
 
//        숫자를 큰 수 > 작은 수 순으로 정렬하는 경우
        points.sort(function(a, b) {
            return b - a;
        });
        
        document.getElementById("demo").innerHTML = points;
    }
</script>
 
</body>
</html>
cs

+ Recent posts