미나미 블로그

jsp servlet(서블렛)를 통한 ajax, object 편

[javascript] 2018. 4. 21. 22:33

jsp servlet(서블렛)를 통한 ajax, object 편

jsp에서 servlet를 사용해서 object 값을 보내보도록 하겠습니다.

두가지 버전으로 servlet에 보낼 생각입니다

첫번째, Object를 Json의 방식으로 보내기

두번째, Object를 String의 방식으로 보내기

var test = { 'A': '1', 'B': '2', 'C': '3', 'D': '4' }; // 테스토로 보낼 Json 값

1. cdn 으로 스크립트를 추가합니다.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

2. json 방식으로 보내기 위한 함수

function jsonSend(test) {
    $.ajax({
        type: "POST",
        url: "/TistoryExample/jsonSendServlet",
        data: test, //json을 보내는 방법
        success: function (data) { //서블렛을 통한 결과 값을 받을 수 있습니다.
            alert(data);                            
        },
        error: function (e) {
            alert('저장에 실패했습니다.');
        }
    });
}

3. json를 string 보내기 위한 함수

function jsonConvertStringSend(test) {
    $.ajax({
        type: "POST",
        url: "/TistoryExample/jsonConvertStringSendServlet",
        data: { sendString: JSON.stringify(test) }, //object의 값이 string으로 보낼 수 있습니다.
        success: function (data) { //서블렛을 통한 결과 값을 받을 수 있습니다.
            alert(data);                            
        },
        error: function (e) {
            alert('저장에 실패했습니다.');
        }
    });
}

3. jsonSend, jsonConvertStringSend 함수 만들러 가기

함수 안에 url jsp 서블렛 만들러 가기

url: "/TistoryExample/jsonSendServlet", url: "/TistoryExample/jsonConvertStringSendServlet",

다음편 보러가기

jsp servlet(서블렛)를 통한 ajax, JsonObject, JsonObject key value 편

결과 화면(결과 화면을 보시기전 서블렛은 위에 링크로 따라가셔서 진행하셔야 됩니다.)

전체 테스트 코드

<%@ 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">

        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

        <title>테스트 페이지</title>
    </head>

    <body>
        <p>테스트할 값</p>
        <p id='setDate'>Test Paragraph.</p>
        <button id="jsonSend" type="button"> Json으로 보내기</button>
        <button id="jsonConvertStringSend" type="button"> Json String으로 보내기 </button>

        <script>
            var test = { 'A': '1', 'B': '2', 'C': '3', 'D': '4' }; // 테스토로 보낼 Json 값

            $(function () {
                $('#setDate').text(JSON.stringify(test));
            });

            $('#jsonSend').click(function () {
                jsonSend(test);
            });
            $('#jsonConvertStringSend').click(function () {
                jsonSend(test);
            });

            function jsonSend(test) {
                $.ajax({
                    type: "POST",
                    url: "/TistoryExample/jsonSendServlet",
                    data: test,            
                    success: function (data) { //서블렛을 통한 결과 값을 받을 수 있습니다.
                        alert(data);
                    },
                    error: function (e) {
                        alert('저장에 실패했습니다.');
                    }
                });
            }
            function jsonConvertStringSend(test) {
                $.ajax({
                    type: "POST",
                    url: "/TistoryExample/jsonConvertStringSendServlet",
                    data: { sendString: JSON.stringify(test) }, //object의 값이 string으로 보낼 수 있습니다.
                    success: function (data) { //서블렛을 통한 결과 값을 받을 수 있습니다.
                        alert(data);
                    },
                    error: function (e) {
                        alert('저장에 실패했습니다.');
                    }
                });
            }
        </script>
    </body>

    </html>

저작자표시 비영리 변경금지

'[javascript]' 카테고리의 다른 글

Javascript(자바스크립트),Jquery 버튼(button) 클릭 해보기 (onclick) (1)	2018.04.25
jsp servlet(서블렛)를 통한 ajax, JsonObject, JsonObject key value 편 (0)	2018.04.21
[javascript] 자바스크립트 셀렉트(select) 초기화 , 넣기 , 빼기 , 값읽기 (0)	2018.04.20
[javascript] 자바스크립트 날짜 입력받기 (input date 날짜 받기) , datepicker (0)	2018.04.19
[javascript] 자바스크립트 배열(Array) 문자 , 숫자 , 날짜 정렬(Sort)하기 (0)	2018.04.17

미나미나미

,

[javascript] 자바스크립트 셀렉트(select) 초기화 , 넣기 , 빼기 , 값읽기

[javascript] 2018. 4. 20. 21:16

[javascript] 자바스크립트 셀렉트(select) 초기화 , 넣기 , 빼기 , 값읽기

1. select(셀렉트) 원위치

$('#reset').click(function () {
    $("#client_cos option:eq(0)").prop("selected", true);
    //처음 위치로 돌아가기 
});

2. select(셀렉트) 요소 삭제하기

$('#delete').click(function () {
    $("#client_cos option:eq(0)").remove();
    //첫번째 위치 지우기
});

3. select(셀렉트) 요소 추가하기

$('#add').click(function () {
    $("#client_cos").append("<option> 10 </option>");
    //마지막 위치에 넣기 
});

3. select(셀렉트) 특정 위치 요소 추가하기

$('#third_add').click(function () {
    $("#client_cos option:eq(3)").after("<option> 1111 </option>");
    //3번째 이후부터 넣기
});

4. select(셀렉트) 값과 인덱스 알기

$('#check').click(function () { // 값과 위치를 알기
    var index = $("#client_cos option").index($("#client_cos option:selected"));
    var select_val = $("#client_cos option:selected").val();
    alert('선택 인덱스 =' + index + ' 선택한 값 ' + select_val);
});

See the Pen select by Nami (@NamuNami) on CodePen.

전체 테스트 코드

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>


        <title>테스트 페이지</title>
    </head>

    <body>
        <button id="reset" type="button"> 원위치</button>
        <button id="delete" type="button">삭제</button>
        <button id="add" type="button">넣기</button>
        <button id="third_add" type="button">3번째 다음 넣기</button>
        <button id="check" type="button">값확인</button>

        <p>
            <select id="client_cos">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
            </select>
        </p>

        <script>
            $('#reset').click(function () {
                $("#client_cos option:eq(0)").prop("selected", true);
                //처음 위치로 돌아가기 
            });
            $('#delete').click(function () {
                $("#client_cos option:eq(0)").remove();
                //첫번째 위치 지우기
            });
            $('#add').click(function () {
                $("#client_cos").append("<option> 10 </option>");
                //마지막 위치에 넣기 
            });

            $('#third_add').click(function () {
                $("#client_cos option:eq(3)").after("<option> 1111 </option>");
                //세번쨰 다음으로 넣기  
            });
            $('#check').click(function () { // 값과 위치를 알기
                var index = $("#client_cos option").index($("#client_cos option:selected"));
                var select_val = $("#client_cos option:selected").val();
                alert('선택 인덱스 =' + index + ' 선택한 값 ' + select_val);
            });
        </script>
    </body>

    </html>

저작자표시 비영리 변경금지

'[javascript]' 카테고리의 다른 글

jsp servlet(서블렛)를 통한 ajax, JsonObject, JsonObject key value 편 (0)	2018.04.21
jsp servlet(서블렛)를 통한 ajax, object 편 (0)	2018.04.21
[javascript] 자바스크립트 날짜 입력받기 (input date 날짜 받기) , datepicker (0)	2018.04.19
[javascript] 자바스크립트 배열(Array) 문자 , 숫자 , 날짜 정렬(Sort)하기 (0)	2018.04.17
[javascript] 자바스크립트 배열(Array) 선언과 확인하기( isArray() ) 와 typeof()로 확인 안되는 이유 (0)	2018.04.17

미나미나미

,

[javascript] 자바스크립트 날짜 입력받기 (input date 날짜 받기) , datepicker

[javascript] 2018. 4. 19. 22:22

[javascript] 날짜 입력받기 (input date 날짜 받기)

1. 간편하게 날짜를 입력 받는 방법

( 단, IE = 익스플로러에서 지원X)

<body>
    
    <input type="date" id = "date"/>
    <!-- <input type="color" id = "color"/> -->

    <script>
        $('#date').change(function (){
            var date = $('#date').val();
            alert(date);
        });
        
    </script>
</body>

See the Pen date-ie-nosupport by Nami (@NamuNami) on CodePen.

그러나 ... 애석하게도 익스플로러에서 지원을 안한다..... ㅠㅠ

출처 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

이곳에 가시면, IE도 지원하는 방식에 도와줄 수 있게 되어는 있습니다...

그렇다면, 두번째 방법....

2. datepicker 사용하기

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body>
    <input type="text" id="datepicker" placeholder="날짜넣기">
    <script>
        $(function () {
            $("#datepicker").datepicker();
        });
    </script>
</body>

결과 화면 (input 클릭하시면 이렇게 나옵니다.)

그러나 우리 앞으로 이렇게만 쓸거 아니자나요 몇가지 예제를 드립니다.

예를들어서 , 오늘 날짜 지정이 필요할 때, 특정날짜가 필요한 경우 , 날짜를 더하는 경우

2 - 1 오늘 날짜 사용하기

<input type="text" id="datepicker_init_day" placeholder="초기날짜">

$("#datepicker_init_day").datepicker();
$("#datepicker_init_day").datepicker('setDate', new Date); // 오늘 날짜 넣기

2 - 2 특정 날짜 사용하기

<input type="text" id="datepicker_special_day" placeholder="특정날짜">

$("#datepicker_init_day").datepicker();
$("#datepicker_init_day").datepicker('setDate', '2018-12-25'); //특정 날짜 넣기

2 - 3 날짜를 더해서 넣기

    <p><label> 3일후 날짜 </label><input type="text" id="datepicker_add_day" placeholder="3일후 날짜"></p>

var today = new Date(); // 오늘날짜가 만들어진다.
console.log('오늘 날짜  => ' + today );
today.setDate( today.getDate() + 3 ); // 3일을 더하기
console.log('3일 후 날짜  => ' + today );

$("#datepicker_add_day").datepicker();
$("#datepicker_add_day").datepicker('setDate', today);

결과 화면

See the Pen date-datepicker by Nami (@NamuNami) on CodePen.

전체 테스트 코드

저작자표시 비영리 변경금지

'[javascript]' 카테고리의 다른 글

jsp servlet(서블렛)를 통한 ajax, object 편 (0)	2018.04.21
[javascript] 자바스크립트 셀렉트(select) 초기화 , 넣기 , 빼기 , 값읽기 (0)	2018.04.20
[javascript] 자바스크립트 배열(Array) 문자 , 숫자 , 날짜 정렬(Sort)하기 (0)	2018.04.17
[javascript] 자바스크립트 배열(Array) 선언과 확인하기( isArray() ) 와 typeof()로 확인 안되는 이유 (0)	2018.04.17
[javascript]자바스크립트 object,Object.keys(),Object.values() 다루기 (0)	2018.04.16

미나미나미

,

[javascript] 자바스크립트 배열(Array) 문자 , 숫자 , 날짜 정렬(Sort)하기

[javascript] 2018. 4. 17. 03:09

[javascript] 자바스크립트 배열(Array) 문자 , 숫자 , 날짜 정렬(Sort)하기

1. 배열의 문자 정렬하기

var string_array = ['ban', 'kim' , 'han', 'choi' , 'kang' , 'an'];
var string_hangule_array = ['트와이스', '위너' , '에이핑크', '나중에' ,'가오가이거' , '쿠쿠다스' , '빵빠레'];
console.log(string_array); 
// (6) ["ban", "kim", "han", "choi", "kang", "an"]
console.log(string_array.sort()); 
// ["an", "ban", "choi", "han", "kang", "kim"]
console.log(string_hangule_array); 
// ["트와이스", "위너", "에이핑크", "나중에", "가오가이거", "쿠쿠다스", "빵빠레"]
console.log(string_hangule_array.sort()); 
//["가오가이거", "나중에", "빵빠레", "에이핑크", "위너", "쿠쿠다스", "트와이스"]

var string_mix_array = ['에이핑크', 'ban', '나중에' , '트와이스' , 'kim' , '위너' , 'han', '쿠쿠다스' , '빵빠레', 'choi' ,'가오가이거' , 'kang' , 'an'];
console.log(string_mix_array); 
// ["에이핑크", "ban", "나중에", "트와이스", "kim", "위너", "han", "쿠쿠다스", "빵빠레", "choi", "가오가이거", "kang", "an"]
console.log(string_mix_array.sort()); 
// ["an", "ban", "choi", "han", "kang", "kim", "가오가이거", "나중에", "빵빠레", "에이핑크", "위너", "쿠쿠다스", "트와이스"]

결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)

간단하게 String.sort()를 사용하면 영어, 한글에서 정렬이 간편하게 된다.

2. 배열 숫자 정렬하기

var number_array = [10 , 99 , 7 , 12 , 3];
var string_number_array = ['10' , '99' , '7' , '12' , '3'];

console.log(number_array); //  [10, 99, 7, 12, 3]
console.log(number_array.sort()); //[10, 12, 3, 7, 99]
console.log(string_number_array); //  [10, 99, 7, 12, 3]
console.log(string_number_array.sort()); //[10, 12, 3, 7, 99]

결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)

결과를 보면 애석하게도 정렬이 되지 않는다. 왜냐하면, ASCII 문자 순서로 정렬이 되기 때문이다. 그래서 string_number_array와 number_array의 sort 결과가 둘다 동일하게 나왔다. 그렇다면 어떻게 해야하는가?

=> sort(sortFunction)를 직접 만들어줘야한다.

console.log(number_array.sort(number_ascending)); //[3, 7, 10, 12, 99]
console.log(number_array.sort(number_descending)); //[99, 12, 10, 7, 3]

function number_ascending(a, b) { // 오름차순
    return a - b;
}
function number_descending(a, b) { // 내림차순
    return b - a;
}

결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)

3. 배열 날짜 정렬하기

예제와 결과화면 코드를 올려드려요. 직접 해보시길 권장합니당~

var data = [
    { '날짜': "2012-11-14", '학년': 3, '점수': 200, },
    { '날짜': "2013-11-14", '학년': 1, '점수': 300, },
    { '날짜': "2017-11-14", '학년': 2, '점수': 90, },
    { '날짜': "2018-11-14", '학년': 2, '점수': 90, },
    { '날짜': "2019-11-14", '학년': 2, '점수': 90, },
    { '날짜': "2020-11-14", '학년': 2, '점수': 90, },
    { '날짜': "2021-11-31", '학년': 3, '점수': 200, },
    { '날짜': "2023-11-01", '학년': 2, '점수': 190, },
    { '날짜': "2002-11-14", '학년': 2, '점수': 90, },
    { '날짜': "2010-11-14", '학년': 2, '점수': 190, },
    { '날짜': "2008-11-14", '학년': 2, '점수': 90, },
    { '날짜': "2009-11-14", '학년': 1, '점수': 100, }
];
console.log(data.sort(date_ascending)); // 오름차순
function date_ascending(a, b) {
var dateA = new Date(a['날짜']).getTime();
var dateB = new Date(b['날짜']).getTime();
return dateA > dateB ? 1 : -1;
};

console.log(data.sort(date_descending)) // 내림차순

function date_descending(a, b) {
var dateA = new Date(a['날짜']).getTime();
var dateB = new Date(b['날짜']).getTime();
return dateA < dateB ? 1 : -1;
};

결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)

전체 테스트 코드

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <title>테스트 페이지</title>
    </head>

    <body>

        <script>
            $(function () {
                var string_array = ['ban', 'kim', 'han', 'choi', 'kang', 'an'];
                var string_hangule_array = ['트와이스', '위너', '에이핑크', '나중에', '가오가이거', '쿠쿠다스', '빵빠레'];
                console.log(string_array);
                // (6) ["ban", "kim", "han", "choi", "kang", "an"]
                console.log(string_array.sort());
                // ["an", "ban", "choi", "han", "kang", "kim"]
                console.log(string_hangule_array);
                // ["트와이스", "위너", "에이핑크", "나중에", "가오가이거", "쿠쿠다스", "빵빠레"]
                console.log(string_hangule_array.sort());
                //["가오가이거", "나중에", "빵빠레", "에이핑크", "위너", "쿠쿠다스", "트와이스"]

                var string_mix_array = ['에이핑크', 'ban', '나중에', '트와이스', 'kim', '위너', 'han', '쿠쿠다스', '빵빠레', 'choi', '가오가이거', 'kang', 'an'];
                console.log(string_mix_array);
                // ["에이핑크", "ban", "나중에", "트와이스", "kim", "위너", "han", "쿠쿠다스", "빵빠레", "choi", "가오가이거", "kang", "an"]
                console.log(string_mix_array.sort());
                // ["an", "ban", "choi", "han", "kang", "kim", "가오가이거", "나중에", "빵빠레", "에이핑크", "위너", "쿠쿠다스", "트와이스"]

                var number_array = [10, 99, 7, 12, 3];
                var string_number_array = ['10', '99', '7', '12', '3'];

                console.log(number_array); //  [10, 99, 7, 12, 3]
                console.log(number_array.sort()); //[10, 12, 3, 7, 99]
                console.log(string_number_array); //  [10, 99, 7, 12, 3]
                console.log(string_number_array.sort()); //[10, 12, 3, 7, 99]

                console.log(number_array.sort(number_ascending));
                console.log(number_array.sort(number_descending));

                function number_ascending(a, b) { // 오름차순
                    return a - b;
                }
                function number_descending(a, b) { // 내림차순
                    return b - a;
                }

                var data = [
                    { '날짜': "2012-11-14", '학년': 3, '점수': 200, },
                    { '날짜': "2013-11-14", '학년': 1, '점수': 300, },
                    { '날짜': "2017-11-14", '학년': 2, '점수': 90, },
                    { '날짜': "2018-11-14", '학년': 2, '점수': 90, },
                    { '날짜': "2019-11-14", '학년': 2, '점수': 90, },
                    { '날짜': "2020-11-14", '학년': 2, '점수': 90, },
                    { '날짜': "2021-11-31", '학년': 3, '점수': 200, },
                    { '날짜': "2023-11-01", '학년': 2, '점수': 190, },
                    { '날짜': "2002-11-14", '학년': 2, '점수': 90, },
                    { '날짜': "2010-11-14", '학년': 2, '점수': 190, },
                    { '날짜': "2008-11-14", '학년': 2, '점수': 90, },
                    { '날짜': "2009-11-14", '학년': 1, '점수': 100, }
                ];
                console.log(data.sort(date_ascending)); // 오름차순
                function date_ascending(a, b) {
                    var dateA = new Date(a['날짜']).getTime();
                    var dateB = new Date(b['날짜']).getTime();
                    return dateA > dateB ? 1 : -1;
                };

                console.log(data.sort(date_descending)) // 내림차순

                function date_descending(a, b) {
                    var dateA = new Date(a['날짜']).getTime();
                    var dateB = new Date(b['날짜']).getTime();
                    return dateA < dateB ? 1 : -1;
                };

            })


        </script>
    </body>

    </html>

저작자표시 비영리 변경금지

'[javascript]' 카테고리의 다른 글

jsp servlet(서블렛)를 통한 ajax, object 편 (0)	2018.04.21
[javascript] 자바스크립트 셀렉트(select) 초기화 , 넣기 , 빼기 , 값읽기 (0)	2018.04.20
[javascript] 자바스크립트 날짜 입력받기 (input date 날짜 받기) , datepicker (0)	2018.04.19
[javascript] 자바스크립트 배열(Array) 선언과 확인하기( isArray() ) 와 typeof()로 확인 안되는 이유 (0)	2018.04.17
[javascript]자바스크립트 object,Object.keys(),Object.values() 다루기 (0)	2018.04.16

미나미나미

,

[javascript] 자바스크립트 배열(Array) 선언과 확인하기( isArray() ) 와 typeof()로 확인 안되는 이유

[javascript] 2018. 4. 17. 02:26

[javascript] 배열(Array) 선언과 확인하기( isArray() ) 와 typeof()로 확인 안되는 이유

자바스크립트(Javascript) 배열 확인하기 => isArray()

왜 typeof() 는 왜 안되는가?

자바스크립트(Javascript)에서 객체(object)와 더불어 배열이 존재한다.

아래의 예제를 보자.

var object = new Object(); // = {}; // 
var array = new Array(); // = [];
var object2 = {};
var array2 = [];
console.log(typeof(object) ); 
console.log(typeof(object2) );
console.log(typeof(object) === typeof(object2));//true

console.log(typeof(array) );
console.log(typeof(array2) );
console.log(typeof(array) === typeof(array));//true

console.log(typeof(object) === typeof(array)); //true

console.log(Array.isArray(object) ); // false
console.log(Array.isArray(array2) ); // true

결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)

이와 같이 보게되면 typeof()의 반환 값을 보게되면 array , array2 , object, object2 모두 object로 반환하게 된다. 즉, typeof()는 object와 array를 구분할 수 없습니다. (typeof 반환에서 array를 반환할 수 없습니다.)

[typeof 반환 되는 값 MDN https://developer.mozilla.org/enUS/docs/Web/JavaScript/Data_structures]

Array.isArray() 함수를 사용하여서 Array와 Object 를 구분하시면 될거 같습니다.

저작자표시 비영리 변경금지

'[javascript]' 카테고리의 다른 글

jsp servlet(서블렛)를 통한 ajax, object 편 (0)	2018.04.21
[javascript] 자바스크립트 셀렉트(select) 초기화 , 넣기 , 빼기 , 값읽기 (0)	2018.04.20
[javascript] 자바스크립트 날짜 입력받기 (input date 날짜 받기) , datepicker (0)	2018.04.19
[javascript] 자바스크립트 배열(Array) 문자 , 숫자 , 날짜 정렬(Sort)하기 (0)	2018.04.17
[javascript]자바스크립트 object,Object.keys(),Object.values() 다루기 (0)	2018.04.16

미나미나미

,

[javascript]자바스크립트 object,Object.keys(),Object.values() 다루기

[javascript] 2018. 4. 16. 00:24

[javascript]object,Object.keys(),Object.values() 다루기

1. javascript에서 Object란?

Javascript는 Object 기반의 스크립트 언어라고 한다. Object는 데이터를 한곳에 모으고 구조화하는데 유용하도고 한다. (뭐 그렇다고 한다. 솔직히 개념만 늘어놓아서 아 알겠어!를 외치는 천재이길 바라지만... 난 아닌거 같다 ... 그리고 엄청나게 뛰어나신 분들이 다 정리를 하셨다능!!ㅋㅋㅋ)

자, 예를 들어보자고,

고객 중 홍길동 이고 , 나이는 23 이고, 직업은 경찰관이라고 해보자.

각각의 변수로 만들게 되면,

var client_name = '홍길돌';
var client_age = '23';
var client_job = '경찰관';

이렇게 각각의 변수명을 가지는 값을 넣어줘야한다. 이런 경우 단순하게 데이터를 정의해서 값을 넣는 것이 그닥 어렵지 않지만 , 여기서 성별, 취미 , 특기 , 연봉, 가족관계 ... 많은 데이터를 변수명을 지정하고 , 값을 넣어준다면 데이터에 관리하는 큰 불편함이 생길 것이다. 이점을 해결하기 위한 Object 함수를 사용한다.

이걸 Object 형식으로 변경한다면,

var test = 'a'; // string
var test1 = 1 ; // number
var client = { 'name' : '홍길돌' , 'age' : 23 , 'job' : '경찰관'}; 
// 또는 new Object(); 같은 방법이면 축약법으로도 같은 기능을 수행

console.log(typeof(test)); //변수의 타입을 확인 
console.log(typeof(test1));  //변수의 타입을 확인
console.log(typeof(client)); //변수의 타입을 확인               
console.log(client)

결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)

client 부분만 자세히 봐주세요!

client 변수에 Object를 값으로 name(key) : '홍길동' (value) 이런식으로 값을 넣어주면 됩니다. 즉, key : value 값 형식으로 넣어주시면 됩니다.

데이터를 추가한다면,

client['sex'] = '남';
client['hobby'] ='socker';

console.log(client)

결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)

자 그렇다면 , 예를 들어 다른 사람이 만들어 놓은 Object 자동차에 관한 정보가 있을 때 이에 대한 key와 value를 정보를 알고 싶은 경우가 있죠.

이럴 때, 유용한 정보 Obejct.keys()와 Object.values()가 있습니다.

2. Obejct.keys()와 Object.values() 사용 해보기

결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)

var car = {'name' : 'max' , 'maxSpeed' : "240" , 'minSpeed' : "0" , color : 'blue' };
//car에 대한 정보를 설정 
console.log(Object.keys(car)); //car key의 정보
console.log(Object.values(car)); //car vlaue의 정보

console.log(car['name']); // 특정 key 정보를 알고 싶을 때
console.log(car['age']);// key값이 정의되지 않는 경우

Object.keys()를 통해서 Object car 만들어진 key의 정보를 얻을 수 있고,

Object.values()를 통해서 Object car 만들어진 value의 정보를 얻을 수 있습니다.

지금은 key와 value 정보들이 많지는 않지만, 많을 경우를 대비하여서 사용할 수 있습니다.

그리고 key에 대한 값이 없는 경우 undefined로 나오는 것을 확인할 수 있습니다.

전체 테스트 코드

저작자표시 비영리 변경금지

'[javascript]' 카테고리의 다른 글

jsp servlet(서블렛)를 통한 ajax, object 편 (0)	2018.04.21
[javascript] 자바스크립트 셀렉트(select) 초기화 , 넣기 , 빼기 , 값읽기 (0)	2018.04.20
[javascript] 자바스크립트 날짜 입력받기 (input date 날짜 받기) , datepicker (0)	2018.04.19
[javascript] 자바스크립트 배열(Array) 문자 , 숫자 , 날짜 정렬(Sort)하기 (0)	2018.04.17
[javascript] 자바스크립트 배열(Array) 선언과 확인하기( isArray() ) 와 typeof()로 확인 안되는 이유 (0)	2018.04.17

미나미나미

,

[jsgrid] jsgrid 예제 기초 사용법

[jsgrid] 2018. 4. 15. 03:05

[jsgrid] jsgrid 예제 기초 사용법

HTML 웹을 프로그래밍을 할때만 데이터에대한 그리드를 그려야하는 경우가 있습니다. 그럴때, 아주 좋은 그리드를 설명합니다.

공식사이트는 http://js-grid.com/ 입니다.

이곳에 가시면 필요한 정보 및 문서들이 있습니다. 기능이 필요하시면 꼭 찾아보세요.

간단하게 요녀석을 따라해 볼 거에요!

See the Pen jsgrid1 by Nami (@NamuNami) on CodePen.

1. 첫번째로 할일은 jquery의 cdn 또는 js를 추가합니다(간편하게 하기위해서 저는 cdn으로 진행하였습니다.)

2. 두번째로 jsgrid 관련 js 파일과 css를 cdn 또는 다운을 받아서 추가하도록 합니다.

이렇게 jquery 그 다음 jsgrid를 순서대로 넣어주셔야합니다. jquey가 후 순위로 들어갈 경우 이라는 에러가 일어납니다.

(jquery 보다 다른 js를 먼저 넣었을 경우 일어나는 에러)

jsgrid.js:1473 Uncaught ReferenceError: jQuery is not defined at jsgrid.js:1473

이렇게 하신 후에

3. body에 부분에 이렇게 넣어주세요.

<div id="jsGrid"></div>
<script>
	$(function () {

$("#jsGrid").jsGrid({
			width: "100%",
			height: "400px",

sorting: true, // 칼럼의 헤더를 눌렀을 때, 그 헤더를 통한 정렬 
			data: clients, //아래에 있는 client 배열을 데이터를 받아서

fields: [ // 그리드 헤더 부분에 넣기 위해서 필드 지정 
				{ name: "Name", type: "text", width: 150 },
				{ name: "Age", type: "number", width: 50 },
				{ name: "Address", type: "text", width: 200 },
				{ name: "Married", type: "checkbox", title: "Is Married" },
			]
		})
	})

var clients = [
		{ "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
		{ "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
		{ "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
		{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
		{ "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
	];

</script>

여기서 $(function () { });는 $(document).ready(function() {}); 와 같은 의미를 가지고 있습니다.

전체소스코드를 보면 이렇게 나올거에요

<html>
    
    <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
        <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
    
        <title>테스트 페이지</title>
    </head>
    
    <body>
        <div id="jsGrid"></div>
        <script>
            $(function () {

                $("#jsGrid").jsGrid({
                    width: "100%",
                    height: "400px",

                    sorting: true, // 칼럼의 헤더를 눌렀을 때, 그 헤더를 통한 정렬 
                    data: clients, //아래에 있는 client 배열을 데이터를 받아서 

                    fields: [ // 그리드 헤더 부분에 넣기 위해서 필드 지정 
                        { name: "Name", type: "text", width: 150 },
                        { name: "Age", type: "number", width: 50 },
                        { name: "Address", type: "text", width: 200 },
                        { name: "Married", type: "checkbox", title: "Is Married" },
                    ]
                })
            })

            var clients = [
                { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
                { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
                { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
                { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
                { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
            ];

        </script>
    </body>
    
    </html>

그러면 가벼운 javascript 그리드(grid)를 찾으셨다면 유용할 거 같습니다.

저작자표시 비영리 변경금지

'[jsgrid]' 카테고리의 다른 글

[jsgrid] jsgrid 안에 데이터 가져오기 (0)	2018.06.29
[jsgrid] jsgrid input으로 데이터(아이템) 업데이트 하기(update item) (0)	2018.06.25
[jsgrid] jsgrid 데이터(아이템) 추가하기(insert item) (0)	2018.06.25
[jsgrid] jsgrid 삭제(delete) 예제 (0)	2018.04.17

미나미나미

,

'전체 글'에 해당되는 글 214건

jsp servlet(서블렛)를 통한 ajax, object 편

'[javascript]' 카테고리의 다른 글

[javascript] 자바스크립트 셀렉트(select) 초기화 , 넣기 , 빼기 , 값읽기

'[javascript]' 카테고리의 다른 글

[javascript] 자바스크립트 날짜 입력받기 (input date 날짜 받기) , datepicker

'[javascript]' 카테고리의 다른 글

[jsgrid] jsgrid 삭제(delete) 예제

'[jsgrid]' 카테고리의 다른 글

[javascript] 자바스크립트 배열(Array) 문자 , 숫자 , 날짜 정렬(Sort)하기

'[javascript]' 카테고리의 다른 글

[javascript] 자바스크립트 배열(Array) 선언과 확인하기( isArray() ) 와 typeof()로 확인 안되는 이유

'[javascript]' 카테고리의 다른 글

[javascript]자바스크립트 object,Object.keys(),Object.values() 다루기

'[javascript]' 카테고리의 다른 글

[jsgrid] jsgrid 예제 기초 사용법

'[jsgrid]' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

미나미나미

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2024/04 »
일	월	화	수	목	금	토
	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