얼렁뚱땅 개발자

• 뒤로가기

<a href="javascript:history.back();">뒤로 가기</a>

혹은 아래와 같이 따로 함수를 만들어서 사용 가능합니다.

<script type="text/javascript">
	var goBack = function(){
    	window.history.back();
        // history.back(); 처럼 window. 생략 가능
    }
</script>
<a href="#" onclick="goBack();">뒤로</a>

• 앞으로 가기

<a href="javascript:history.forward();">앞으로 가기</a>

• 원하는 페이지 수만큼 이동하기

window.history.go() 함수를 이용하여 원하는 페이지 수만큼 이동을 할 수 있다.

<script type="text/javascript">
	
    // 앞으로 n 페이지만큼 이동
    var goForward = function(n){
    	window.history.go(n);
    }
    
    // 뒤로 n 페이지만큼 이동
    var goBack = function(n){
    	window.history.go(-n);
    }
    
</script>

window.history.go(n);

n 값이 양수일 경우에 앞으로 가기, n 값이 음수일 경우에는 뒤로 이동하게 됩니다.

하이차트를 이용해 차트를 그릴 때 x축 값이 너무 길거나 많을 때 각도가 기울어지면서 차트 영역이 작아지는 현상이 있는데

이럴 때 라벨을 생략해주면 차트가 작아지는 것을 방지할 수 있다.

라벨에 step 값을 지정하여 생략하는 법을 정리해 보았다.

샘플로 그려본 차트이다.

x축 값으로 100개를 설정해 두었는데 이미 너무 많고 길기 때문에 자동으로 생략이 되긴하였다.

그래도 여전히 값이 기울어져 차트 영역이 작아지기 때문에 step 값을 설정해 주겠다.

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container">차트영역</div>
<script>
Highcharts.chart('container', {

    title: {
        text: 'x축 라벨 생략하기'
    },

    yAxis: {
        title: {
            text: 'y 값'
        }
    },

    xAxis: {
        categories : [
          10000001, 10000002, 10000003, 10000004, 10000005, 10000006, 10000007, 10000008, 10000009, 10000010,
          10000011, 10000012, 10000013, 10000014, 10000015, 10000016, 10000017, 10000018, 10000019, 10000020,
          10000021, 10000022, 10000023, 10000024, 10000025, 10000026, 10000027, 10000028, 10000029, 10000030,
          10000031, 10000032, 10000033, 10000034, 10000035, 10000036, 10000037, 10000038, 10000039, 10000040,
          10000041, 10000042, 10000043, 10000044, 10000045, 10000046, 10000047, 10000048, 10000049, 10000050,
          10000051, 10000052, 10000053, 10000054, 10000055, 10000056, 10000057, 10000058, 10000059, 10000060,
          10000061, 10000062, 10000063, 10000064, 10000065, 10000066, 10000067, 10000068, 10000069, 10000070,
          10000071, 10000072, 10000073, 10000074, 10000075, 10000076, 10000077, 10000078, 10000079, 10000080,
          10000081, 10000082, 10000083, 10000084, 10000085, 10000086, 10000087, 10000088, 10000089, 10000090,
          10000091, 10000092, 10000093, 10000094, 10000095, 10000096, 10000097, 10000098, 10000099, 10000100
        ],
        labels : {
           step : 12 // 단계 설정
        }
    },

    series: [{
        name: '테스트',
        data: [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 
        	   20, 19, 18, 17, 16, 15, 14, 13, 12, 11,
               10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 
        	   20, 19, 18, 17, 16, 15, 14, 13, 12, 11,
               10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 
        	   20, 19, 18, 17, 16, 15, 14, 13, 12, 11,
               10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 
        	   20, 19, 18, 17, 16, 15, 14, 13, 12, 11,
               10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 
        	   20, 19, 18, 17, 16, 15, 14, 13, 12, 11]
    }]
});
</script>

기본 차트 소스에

labels : {step : 12 } // 단계 설정

이부분을 추가해 준 소스이다.

위의 소스를 실행하면 다음과 같이 x축 라벨이 생략되어 나오는 것을 볼 수 있다.

위의 소스에서 step 값을 12로 지정해 주었기 때문에 열두개 간격으로 라벨이 표시되는 것을 볼 수 있다.

간격을 더 넓히고 싶으면 step 값을 더 크게 지정해 주면 된다.

하지만 step 값을 너무 작게 설정하면 이렇게 x축 값이 겹쳐서 노출되기 때문에 테스트를 진행하면서 적절한 값을 설정해 주면 된다.

보통 개발할 때는 DB에서 불러온 값을 자동으로 넣어 주는 경우가 많기 때문에 이럴 경우에는

(전체 데이터 길이) ÷ (차트에 나타낼 x축 라벨 개수)

값을 스텝 값에 지정해 사용하면 된다.

자바스크립트를 이용해 현재 날짜와 시간을 가져오는 방법입니다.

• 현재 날짜와 시간 구하기

var nowDate = new Date();
document.write(nowDate);

실행 결과 : Fri Jun 23 2023 15:55:24 GMT+0900 (한국 표준시)

• 현재의 년도, 월, 일, 요일 구하기

var nowDate = new Date();

var year = nowDate.getFullYear(); // 년도
var month = nowDate.getMonth() + 1; // 월
var date = nowDate.getDate(); // 일
var day = nowDate.getDay(); // 요일
var dayText = ['일', '월', '화', '수', '목', '금', '토']; 

document.write(year + "." + month + "." + date + " (" + dayText[day] + ")");

실행 결과 : 2023.06.23 (금)

- getFullYear() : Date 객체의 년도를 가져옴

- getMonth() : Date 객체의 월을 가져옴 1월은 0으로 나오므로 +1을 해주면 됨

- getDate() : Date 객체의 일자를 가져옴

- getDay() : Date 객체의 요일을 가져옴 결과는 0~6 으로 나오는데 0의 경우 일요일, 1의 경우 월요일임

• 현재 시간 구하기

var nowDate = new Date();

var hour = nowDate.getHours();
var minute = nowDate.getMinutes();
var second = nowDate.getSeconds();
var millisecond = nowDate.getMilliseconds();

document.write(hour + ":" + minute + ":" + second + " " + millisecond);

실행 결과 : 16:5:23 401

- getHours() : Date 객체의 시간을 가져옴 (0~23)

- getMinutes() : Date 객체의 분을 가져옴 (0~59)

- getSeconds() : Date 객체의 초를 가져옴 (0~59)

- getMilliseconds() : Date 객체의 밀리초를 가져옴 (0~999)

자바스크립트로 원하는 만큼 날짜를 더하고 빼는 방법입니다.

1. 년 단위

var now = new Date();
var n = 더하거나 뺄 값;
now.setFullYear(now.getFullYear() + n );

n 에 더하거나 뺄 정수를 설정해 주시면 됩니다.

2. 월 단위

var now = new Date();
var n = 더하거나 뺄 값;
now.setMonth(now.getMonth() + n);

월 단위도 마찬가지로 n 에 더하고 뺄 정수를 설정해 줍니다.

3. 일 단위

var now = new Date();
var n = 더하거나 뺄 값;
now.setDate(now.getDate() + n);

일 단위도 동일합니다.

켄도 에디터를 이용할 때 value 값 변경하는 방법입니다.

아래와 같이 소스를 작성할 경우 해당 아이디의 밸류 값만 변경되고 에디터의 내용은 변경되지 않습니다.

$("#editor").val("test");

다음과 같이 작성하면 에디터의 값도 변경된 것을 확인할 수 있습니다.

var editor = $("#에디터 id").data("kendoEditor");
editor.value("변경할 값");

kendo grid 에서 제공하는 테이블 excel export 기능을 같이 사용할 때가 있는데

그대로 쓰면 화면에 보이는 테이블 컬럼을 다 가져오기 때문에 원하는 컬럼을 삭제하는 방법을 공유합니다.

var exportFlag = false;
$("#grid").data("kendoGrid").bind("excelExport", function (e) {
    if (!exportFlag) {
        e.sender.hideColumn(0); // 숨길 컬럼 index 넣어줌
        e.preventDefault();
        exportFlag = true;
        setTimeout(function () {
            e.sender.saveAsExcel();
        });
    } else {
        e.sender.showColumn(0); // 숨길 컬럼 index 넣어줌
        exportFlag = false;
    }
});

소스에

e.sender.hideColumn(n);

을 넣어주면 엑셀 내보내기 시 해당 인덱스의 컬럼이 삭제되는 것을 볼 수 있습니다.