'분류 전체보기' 카테고리의 글 목록 (6 Page)

'공방 제작 포스트'에 해당되는 글 256건

[JAVA] Windows 10 컴퓨터, JAVA 8 버전 설치하기[JAVA] Windows 10 컴퓨터, JAVA 8 버전 설치하기

Posted at 2020. 7. 18. 11:39 | Posted in JAVA

■ JDK 8 버전 다운받기

https://www.oracle.com/java/technologies/oracle-java-archive-downloads.html 경로에 접속하여 JDK를 다운받아야 한다.

Java SE 8 ( 8u202 and earlier ) 버전을 선택해 준다.

※ JAVA SE 8 ( 8u202 and earlier ) 버전을 받는 이유?

Oracle이 2018년 7월부터 JAVA를 유료( Paid ) 구독형 라이센스로 개편하면서

JAVA SE 8 ( 8u211 and later ) 버전부터는 6개월 이후부터는 보안 업데이트가 이루어지지 않는 형태로 변경되었다.

그렇기 때문에 JDK 8 버전 이상을 무료( Free )로 이용하기 위해서는

Oracle이 아닌 Open JDK ( https://openjdk.java.net/ )를 통해 이용하면 된다.

윈도우에서 JDK를 설치하기 위해서는

Windows 10 기준으로 jdk-8u202-windows-x64.exe 버전을 다운받아 설치를 진행하면 된다.

( 요즘은 거의 없을거라 생각하지만 컴퓨터 윈도우10 32bit 라면 jdk-8u202-windows-i586.exe 다운받으면 된다. )

jdk-8u202-windows-x64.exe 를 선택하면 위와 같은 팝업창이 나타난다.

I reviewed and accept hte Oracle Binary Code License Agreement for the Java SE Platform Products

( Java SE 플랫폼 제품에 대한 Oralce 이진 코드 라이센스 계약을 검토하고 동의 합니다. )

항목을 체크해 주고 다운로드를 진행한다.

다운로드를 진행하는 과정에 있어

오라클 계정에 로그인 되어 있지 않다면 로그인 페이지로 이동을 하게된다.

계정이 존재한다면 로그인을 하면 JDK의 다운이 자동적으로 이루어지고

계정이 존재하지 않는다면 우선 회원가입 후 로그인하여 다시 다운받도록 하자.

■ JDK 8 버전 설치하기

이제 다운받은 jdk-8u202-windows-x64.exe 를 실행해보자.

Next 버튼을 클릭하여 설치를 계속 진행해준다.

설치 진행과정중 JDK의 설치경로를 물어본다.

기본 설치경로 그대로 사용한다면 Next 버튼을 클릭해 주면 되지만.

여기서는 우선 Change 버튼을클릭하여 설치경로를 확인 해 주자.

기본적으로 윈도우 환경에서 JDK는 C:\Program\ 경로에 JAVA 디렉토리를 새로 만들고 그 안에 JDK의 설치가 진행된다.

설치경로를 확인하고 OK 버튼을 클릭한다.

설치 경로의 확인이 끝났으면 Next 버튼을 클릭하여 설치를 계속 진행한다.

그럼 이제 JDK의 설치가 진행된다.

이렇게 JDK의 설치가 진행되는중 자동적으로 JRE의 설치 또한 진행을 하게된다.

JRE의 경로 또한 변경을 원한다면 변경 버튼을 클릭하여 경로를 맞춰주면 된다.

다음 버튼을 클릭하여 JRE의 설치도 함께 진행을 해주자.

그럼 JDK와 JRE의 설치가 완료되었다.

위 설치 과정중 설정한 C:\Program Files\Java ( 기본 설치 경로 )로 이동해보면

jdk1.8.0_202, jre1.8.0_202 폴더가 구성된 것을 확인할 수 있다.

■ Windows 10 컴퓨터에 JDK 설정하기

JDK를 설정하려면 시스템 속성에서 환경변수를 변경해 주어야 하기에

윈도우 시스템 창을 실행해야 하는데 시스템 창을 실행하는 방법에는 몇가지 있다.

① 제어판을 열고 시스템 항목을 선택한다.

② 바탕화면 내 컴퓨터를 마우스로 우클릭하면 나오는 메뉴에서 속성을 선택한다.

그럼 시스템 창 화면 좌측 메뉴에 고급 시스템 설정이 존재한다.

해당 메뉴를 실행해준다.

시스템 속성 창이 나타나면 상단 카테고리중 고급 항목에 들어가 보면

환경 변수 설정 버튼이 존재한다.

위 버튼을 클릭하고 설치한 JDK를 윈도우 환경변수에 적용하는 작업을 이제 진행하면 된다.

#01. JAVA_HOME, CLASSPATH 환경변수 등록

※ JAVA_HOME, CLASSPATH 환경변수를 등록하는 이유

JAVA_HONE, CLASSPAHT는 자바에서 사용하는 환경변수로서 JDK의 위치를 지정하고,

클래스를 모아 놓은 경로를 설정해주는 역할을 수행한다.

환경 변수 창에서 새로 만들기 버튼을 클릭해준다.

그럼 시스템 변수 편집 창이 나타나는데.

여기서 우리가 설치한 JDK의 경로를 지정해 주면된다.

변수 이름 : JAVA_HOME

변수 값 : C:\Program Files\Java\jdk1.8.0_202\ ( JDK 기본 설치 경로 )

JAVA_HOME의 환경 변수 추가가 완료되었다면.

CLASSPATH 환경 변수를 또 새로 만들어 주어야 한다.

다시 새로 만들기 버튼을 클릭해 주고

시스템 변수 편집창에서 CLASSPATH의 경로를 추가해 준다.

변수 이름 : CLASSPATH

변수 값 : .;%JAVA_HOME%\lib\tools.jar

#02. Path 환경변수 등록

※ Path 환경변수의 역할

어떤 실행 파일을 실행하는데 있어 해당 위치에 파일이 없으면

컴퓨터는 2차적으로 Path 경로에서 실행 파일을 찾아 실행한다.

이번에는 환경 변수 창에서 Path를 찾고 편집 버튼을 클릭한다.

그럼 환경 변수 편집 창이 나타나는데 아래와 같이 작업을 진행하면 된다.

먼저 새로 만들기 버튼을 클릭하고 환경변수 창에 새롭게 입력할 수 있는 영역이 추가되면

%JAVA_HOME%\bin\ 값을 입력해주고 확인 버튼을 클릭하면 모든 설정이 완료된다.

■ JAVA 설정 확인하기

JDK의 환경 변수 설정까지 완료가 다 되었다면 이제 JAVA 설정이 마무리 되었는 확인해 보자.

윈도우 시작 버튼을 클릭하고 검색창에서 Windows PowerShell을 검색하여 실행하면

파워쉘 커맨드 창이 나타난다.

C:\> java -version

C:\> java -version 을 입력하면 우리가 설치한

JAVA SE 1.1.8.0_202 가 버전이 나타나는 것을 확인 할 수 있다.

다음으로 javac 명령어를 입력해 보자.

C:\> javac

C:\> javac를 입력하면 자바 컴파일러 사용방법에 대한 설명 리스트가 출력된다.

※ javac란?

자바 컴파일러( JAVA Compiler )를 이야기하며, 자바코드를 작성한 소스파일( .java )을 자바 가상 머신( JVM )이 인식할 수 있는

바이트 코드( .class ) 타입으로 변환시켜주는 역할을 한다.

저작자표시

'JAVA' 카테고리의 다른 글

[JAVA] JVM 프로그램의 메모리 영역 (0)	2020.04.27
[JAVA] 자바 개발자로서 알아야 하는 것들 (3)	2020.02.18
[JAVA] 객체지향 개발과 관련 용어 (0)	2019.12.27
[JAVA] Java의 역사와 JVM, 알아두어야 하는 상식 (0)	2019.11.06
[JAVA] JAVA에서 Map 이란? (0)	2018.07.17

[JavaScript] 자바스크립트를 이용한 캘린더 제작[JavaScript] 자바스크립트를 이용한 캘린더 제작

Posted at 2020. 7. 13. 09:28 | Posted in JavaScript & jQuery/JavaScript

참고 : https://jerryjerryjerry.tistory.com/26

■ 순수 자바스크립트만을 이용한 달력 제작

jQuery등을 통한 캘린더 라이브러리가 많이 존재하지만 뭔가 꼭 있어야 하거나, 구현해야하는 효과가 있는경우

원하는 캘린더 라이브러리를 다시 찾아봐야 하거나, 라이브러리를 마개조 해야하는 상황이 발생하여

순수하게 자바스크립트만을 이용한 달력을 제작하게 되었다.

위 세가지 조건을 만족시키는 캘린더를 제작해 보려고 한다.

# 소스코드

<html>
<head>
<title>:: JavaScript 캘린더 ::</title>
<style type="text/css">
    a { color:#000000;text-decoration:none; }
    .scriptCalendar { text-align:center; }
    .scriptCalendar > thead > tr > td { width:50px;height:50px; }
    .scriptCalendar > thead > tr:first-child > td { font-weight:bold; }
    .scriptCalendar > thead > tr:last-child > td { background-color:#90EE90; }
    .scriptCalendar > tbody > tr > td { width:50px;height:50px; }
</style>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        buildCalendar();
    });

    var today = new Date(); // @param 전역 변수, 오늘 날짜 / 내 컴퓨터 로컬을 기준으로 today에 Date 객체를 넣어줌
    var date = new Date(); // @param 전역 변수, today의 Date를 세어주는 역할

    /**
     * @brief   이전달 버튼 클릭
     */
    function prevCalendar() {
        this.today = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
        buildCalendar();    // @param 전월 캘린더 출력 요청
    }

    /**
     * @brief   다음달 버튼 클릭
     */
    function nextCalendar() {
        this.today = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
        buildCalendar();    // @param 명월 캘린더 출력 요청
    }

    /**
     * @brief   캘린더 오픈
     * @details 날짜 값을 받아 캘린더 폼을 생성하고, 날짜값을 채워넣는다.
     */
    function buildCalendar() {

        let doMonth = new Date(today.getFullYear(), today.getMonth(), 1);
        let lastDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);

        let tbCalendar = document.querySelector(".scriptCalendar > tbody");

        document.getElementById("calYear").innerText = today.getFullYear();                                  // @param YYYY월
        document.getElementById("calMonth").innerText = autoLeftPad((today.getMonth() + 1), 2);   // @param MM월

        // @details 이전 캘린더의 출력결과가 남아있다면, 이전 캘린더를 삭제한다.
        while(tbCalendar.rows.length > 0) {
            tbCalendar.deleteRow(tbCalendar.rows.length - 1);
        }

        // @param 첫번째 개행
        let row = tbCalendar.insertRow();

        // @param 날짜가 표기될 열의 증가값
        let dom = 1;

        // @details 시작일의 요일값( doMonth.getDay() ) + 해당월의 전체일( lastDate.getDate())을 더해준 값에서
        //               7로 나눈값을 올림( Math.ceil() )하고 다시 시작일의 요일값( doMonth.getDay() )을 빼준다.
        let daysLength = (Math.ceil((doMonth.getDay() + lastDate.getDate()) / 7) * 7) - doMonth.getDay();

        // @param 달력 출력
        // @details 시작값은 1일을 직접 지정하고 요일값( doMonth.getDay() )를 빼서 마이너스( - )로 for문을 시작한다.
        for(let day = 1 - doMonth.getDay(); daysLength >= day; day++) {

            let column = row.insertCell();

            // @param 평일( 전월일과 익월일의 데이터 제외 )
            if(Math.sign(day) == 1 && lastDate.getDate() >= day) {

                // @param 평일 날짜 데이터 삽입

                column.innerText = autoLeftPad(day, 2);

                // @param 일요일인 경우
                if(dom % 7 == 1) {
                    column.style.color = "#FF4D4D";
                }

                // @param 토요일인 경우
                if(dom % 7 == 0) {
                    column.style.color = "#4D4DFF";
                    row = tbCalendar.insertRow();   // @param 토요일이 지나면 다시 가로 행을 한줄 추가한다.
                }

            }

            // @param 평일 전월일과 익월일의 데이터 날짜변경
            else {
                let exceptDay = new Date(doMonth.getFullYear(), doMonth.getMonth(), day);
                column.innerText = autoLeftPad(exceptDay.getDate(), 2);
                column.style.color = "#A9A9A9";
            }

            // @brief   전월, 명월 음영처리
            // @details 현재년과 선택 년도가 같은경우
            if(today.getFullYear() == date.getFullYear()) {

                // @details 현재월과 선택월이 같은경우
                if(today.getMonth() == date.getMonth()) {

                    // @details 현재일보다 이전인 경우이면서 현재월에 포함되는 일인경우
                    if(date.getDate() > day && Math.sign(day) == 1) {
                        column.style.backgroundColor = "#E5E5E5";
                    }

                    // @details 현재일보다 이후이면서 현재월에 포함되는 일인경우
                    else if(date.getDate() < day && lastDate.getDate() >= day) {
                        column.style.backgroundColor = "#FFFFFF";
                        column.style.cursor = "pointer";
                        column.onclick = function(){ calendarChoiceDay(this); }
                    }

                    // @details 현재일인 경우
                    else if(date.getDate() == day) {
                        column.style.backgroundColor = "#FFFFE6";
                        column.style.cursor = "pointer";
                        column.onclick = function(){ calendarChoiceDay(this); }
                    }

                // @details 현재월보다 이전인경우
                } else if(today.getMonth() < date.getMonth()) {
                    if(Math.sign(day) == 1 && day <= lastDate.getDate()) {
                        column.style.backgroundColor = "#E5E5E5";
                    }
                }

                // @details 현재월보다 이후인경우
                else {
                    if(Math.sign(day) == 1 && day <= lastDate.getDate()) {
                        column.style.backgroundColor = "#FFFFFF";
                        column.style.cursor = "pointer";
                        column.onclick = function(){ calendarChoiceDay(this); }
                    }
                }
            }

            // @details 선택한년도가 현재년도보다 작은경우
            else if(today.getFullYear() < date.getFullYear()) {
                if(Math.sign(day) == 1 && day <= lastDate.getDate()) {
                    column.style.backgroundColor = "#E5E5E5";
                }
            }

            // @details 선택한년도가 현재년도보다 큰경우
            else {
                if(Math.sign(day) == 1 && day <= lastDate.getDate()) {
                    column.style.backgroundColor = "#FFFFFF";
                    column.style.cursor = "pointer";
                    column.onclick = function(){ calendarChoiceDay(this); }
                }
            }

            dom++;

        }
    }

    /**
     * @brief   날짜 선택
     * @details 사용자가 선택한 날짜에 체크표시를 남긴다.
     */
    function calendarChoiceDay(column) {

        // @param 기존 선택일이 존재하는 경우 기존 선택일의 표시형식을 초기화 한다.
        if(document.getElementsByClassName("choiceDay")[0]) {
            document.getElementsByClassName("choiceDay")[0].style.backgroundColor = "#FFFFFF";
            document.getElementsByClassName("choiceDay")[0].classList.remove("choiceDay");
        }

        // @param 선택일 체크 표시
        column.style.backgroundColor = "#FF9999";

        // @param 선택일 클래스명 변경
        column.classList.add("choiceDay");
    }

    /**
     * @brief   숫자 두자릿수( 00 ) 변경
     * @details 자릿수가 한자리인 ( 1, 2, 3등 )의 값을 10, 11, 12등과 같은 두자리수 형식으로 맞추기위해 0을 붙인다.
     * @param   num     앞에 0을 붙일 숫자 값
     * @param   digit   글자의 자릿수를 지정 ( 2자릿수인 경우 00, 3자릿수인 경우 000 … )
     */
    function autoLeftPad(num, digit) {
        if(String(num).length < digit) {
            num = new Array(digit - String(num).length + 1).join("0") + num;
        }
        return num;
    }

</script>
</head>
<body>
<table class="scriptCalendar">
    <thead>
        <tr>
            <td onClick="prevCalendar();" style="cursor:pointer;"><<</td>
            <td colspan="5">
                <span id="calYear">YYYY</span>년
                <span id="calMonth">MM</span>월
            </td>
            <td onClick="nextCalendar();" style="cursor:pointer;">>></td>
        </tr>
        <tr>
            <td>일</td><td>월</td><td>화</td><td>수</td><td>목</td><td>금</td><td>토</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>
</body>
</html>

위 코드를 실행해 보면 결과가 아래와 같음을 확인 해 볼 수 있다.

# 출력결과

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] (0)	2020.09.09
[JavaScript] 자바스크립트로 HWP 파일 제어 (0)	2020.09.07
[JavaScript] SelectBox를 사용하는 날짜 검색창 제작 (0)	2020.07.12
[JavaScript] 매월의 월요일 기준, 주차 구하기 (4)	2020.06.29
[JavaScript] Table을 Excel 처럼 즉시 수정가능하게 만들기 (1)	2020.06.24

[JavaScript] SelectBox를 사용하는 날짜 검색창 제작[JavaScript] SelectBox를 사용하는 날짜 검색창 제작

Posted at 2020. 7. 12. 20:31 | Posted in JavaScript & jQuery/JavaScript

■ 셀렉트 박스를 이용한 캘린더 제작

위와 같이 <SELECT> 태그를 통해 날짜값을 지정하여 검색하는 페이지를 제작하게 되었다.

jQuery UI의 DatePicker등을 사용하면 그냥 손쉽게 해결 할 수 있고,

보통은 다 이렇게 하지만, 또 막상 일을 하다보면 위와 같은 검색을 선호하는 클라이언트가 또 있을 수 있다라는 생각이들어

추가적으로 실제 업무에서 많이 쓰이게 되는 GET 방식을 통한 검색조건 전달의 경우를 포함하여

내용을 정리해보았다.

※ 예외 처리해야할 사항들

① 매월의 마지막 날의 날짜는 항상 일치하지 않기에, 그달의 마지막 날보다 큰 날짜는 자동적으로 선택할 수 없어야 한다.

② 처음 접속시 해당월의 첫째날( 01일 )과 마지막날( 28일, 29,일 30일, 31일 등 )이 자동 세팅되어야 한다.

③ GET방식을 통해 검색 시작일과 종료일의 날짜 데이터가 전달되는 경우의 수를 처리해야 한다.

④ 사용자가 날짜를 선택하는 과정에서 31일이 선택되어 있는 가운데 31일이 존재하지 않는 년, 월을 선택한 경우

해당 월의 마지막 날로 자동 변경시켜주어야 한다.

위 경우를 상정하여 아래 코드를 작성하게 되었다.

# 소스코드

<html>

<head>

<title>:: JavaScript 매월 주차 구하기 ::</title>

document.addEventListener("DOMContentLoaded", function() {

const stdDays = document.querySelector("span:nth-child(1)"); // @param 시작일 영역지정

const endDays = document.querySelector("span:nth-child(2)"); // @param 종료일 영역지정

let stdFirstDate = null; // @param 시작일의 첫날

let endFirstDate = null; // @param 종료일의 첫날

let stdLastDate = null; // @param 시작일의 전체일수

let endLastDate = null; // @param 종료일의 전체일수

// @param GET방식으로 전달된 시작일, 종료일의 지정값이 존재하지 않는경우 ( ※ 맨처음 시작시에 실행 )

if(nullPointerException(getParameter("stdDate")) == false && nullPointerException(getParameter("endDate")) == false) {

const toDate = new Date();

stdFirstDate = new Date(toDate.getFullYear(), (toDate.getMonth() + 1));

stdLastDate = new Date(stdFirstDate.getFullYear(), (stdFirstDate.getMonth() + 1), 1); // @param 다음달의 첫째날을 지정

stdLastDate.setDate(0); // @param 다음달에서 하루를 빼서 원하는 월의 마지막 날로 맞춤

endFirstDate = new Date(toDate.getFullYear(), (toDate.getMonth() + 1));

endLastDate = new Date(endFirstDate.getFullYear(), (endFirstDate.getMonth() + 1), 1); // @param 다음달의 첫째날을 지정

endLastDate.setDate(0); // @param 다음달에서 하루를 빼서 원하는 월의 마지막 날로 맞춤

}

// @param GET방식으로 전달된 시작일, 종료일의 지정값이 존재하는 경우

else {

const stdDate = getParameter("stdDate");

stdFirstDate = new Date(

Number(stdDate.substring(0, 4))

, Number(stdDate.substring(6, 8))

, Number(stdDate.substring(4, 6))

);

stdLastDate = new Date(stdFirstDate.getFullYear(), stdFirstDate.getMonth(), 1); // @param 다음달의 첫째날을 지정

stdLastDate.setDate(0); // @param 다음달에서 하루를 빼서 원하는 월의 마지막 날로 맞춤

const endDate = getParameter("endDate");

endFirstDate = new Date(

Number(endDate.substring(0, 4))

, Number(endDate.substring(4, 6))

, Number(endDate.substring(6, 8))

);

endLastDate = new Date(endFirstDate.getFullYear(), endFirstDate.getMonth(), 1); // @param 다음달의 첫째날을 지정

endLastDate.setDate(0); // @param 다음달에서 하루를 빼서 원하는 월의 마지막 날로 맞춤

}

// @param 년도( Year ) - 선택

for(let year = 0; stdDays.querySelector("select:nth-child(1)").length > year; year++) {

if(stdDays.querySelector("select:nth-child(1)").options[year].value == stdFirstDate.getFullYear()) {

stdDays.querySelector("select:nth-child(1)").options[year].selected = true;

}

if(endDays.querySelector("select:nth-child(1)").options[year].value == stdFirstDate.getFullYear()) {

endDays.querySelector("select:nth-child(1)").options[year].selected = true;

}

// @param 월( Month ) - 선택

for(let month = 0; stdDays.querySelector("select:nth-child(2)").length > month; month++) {

if(stdDays.querySelector("select:nth-child(2)").options[month].value == stdFirstDate.getMonth()) {

stdDays.querySelector("select:nth-child(2)").options[month].selected = true;

}

if(endDays.querySelector("select:nth-child(2)").options[month].value == endFirstDate.getMonth()) {

endDays.querySelector("select:nth-child(2)").options[month].selected = true;

}

// @param 일( Day ) - 생성 및 선택

// @details - 날짜는 매월 마지막일이 다르게 끝나기 때문에 직접 생성하고,

// 선택한 날( 기본값 시작일 - 01일, 종료일은 - 말일 )을 자동으로 selected 한다.

for(let date = 1; stdLastDate.getDate() >= date; date++) {

if(stdFirstDate.getDate() == date) {

stdDays.querySelector("select:nth-child(3)").innerHTML

+= "<option value='" + date + "' selected>" + autoLeftPad(date, 2) + "</option>";

} else {

stdDays.querySelector("select:nth-child(3)").innerHTML

+= "<option value='" + date + "'>" + autoLeftPad(date, 2) + "</option>";

}

for(let date = 1; endLastDate.getDate() >= date; date++) {

if((nullPointerException(getParameter("endDate")) == true) ? endFirstDate.getDate() : endLastDate.getDate() == date) {

endDays.querySelector("select:nth-child(3)").innerHTML

+= "<option value='" + date + "' selected>" + autoLeftPad(date, 2) + "</option>";

} else {

endDays.querySelector("select:nth-child(3)").innerHTML

+= "<option value='" + date + "'>" + autoLeftPad(date, 2) + "</option>";

}

});

/**

* @brief 시작일( 년, 월 ), 종료일 ( 년, 월 )의 값이 변경된 경우 실행

* @details 시작일( 년, 월 ), 종료일 ( 년, 월 )의 값이 변경에 따른 해당 년월의 전체일수를 다시 체크,

* 변경된 년월의 일보다 선택된 일이 큰경우 마지막 날로 선택일 자동 변경

function changeConditionPeriod(cal) {

const searchDays = cal.parentNode;

const checkDate = searchDays.querySelector("select:nth-child(3)").value;

// @param 다음달의 첫째날을 지정

let lastDate = new Date(

searchDays.querySelector("select:nth-child(1)").value

, searchDays.querySelector("select:nth-child(2)").value

, 1

);

lastDate.setDate(0); // @param 하루를 뺌

// @param 일정보 초기화

searchDays.querySelector("select:nth-child(3)").innerHTML = "";

// @param 일정보 재삽입

for(let date = 1; lastDate.getDate() >= date; date++) {

if(checkDate == date) {

searchDays.querySelector("select:nth-child(3)").innerHTML

+= "<option value='" + date + "' selected>" + autoLeftPad(date, 2) + "</option>";

} else {

searchDays.querySelector("select:nth-child(3)").innerHTML

+= "<option value='" + date + "'>" + autoLeftPad(date, 2) + "</option>";

}

// @param 일정보 예외처리 선택되어있는 마지막 날이 바꾼 월의 날보다 큰경우의 예외처리

if(checkDate > lastDate.getDate()) {

searchDays.querySelector("select:nth-child(3) > option:last-child").selected = true;

}

/**

* @brief 강제로 앞에 0을 붙여서 두자릿수 숫자로 변경한다.

* @param num 앞에 0을 붙일 숫자 값

* @param digit 자릿수를 지정

function autoLeftPad(num, digit) {

if(String(num).length < digit) { num = new Array(digit - String(num).length + 1).join("0") + num; }

return num;

}

/**

* @brief GET으로 넘어오는 값의 존재 여부를 체크

function nullPointerException(worth) {

if(

worth == ""

|| worth == null

|| worth == undefined

|| (worth != null && typeof worth == "object" && !Object.keys(worth).length == "")

) {

return false;

} else {

return true;

}

/**

* @brief GET방식으로 전달된 값을 추출

* @param param 추출할 key의 명칭

var getParameter = function(param) {

let returnValue;

let url = location.href;

let parameters = (url.slice(url.indexOf("?") + 1, url.length)).split("&");

for(let i = 0; i < parameters.length; i++) {

let varName = parameters[i].split("=")[0];

if (varName.toUpperCase() == param.toUpperCase()) {

returnValue = parameters[i].split("=")[1];

return decodeURIComponent(returnValue);

}

};

</script>

</head>

<body>

<h1>■ SelectBox를 이용한 캘린더</h1>

<hr/>

<div>

<span>

시작일 : 

</select>

 년  

</select>

 월  

 일

</span>

<span>

종료일 : 

</select>

 년  

</select>

 월  

 일

</span>

</div>

</body>

</html>

이제 위 코드를 브라우저를 통해 실행시켜 보면

# 출력결과

위와 같이 예외처리해야할 사항들이 정상적으로 반영되어 기능하는 모습을 확인 할 수 있다.

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트로 HWP 파일 제어 (0)	2020.09.07
[JavaScript] 자바스크립트를 이용한 캘린더 제작 (13)	2020.07.13
[JavaScript] 매월의 월요일 기준, 주차 구하기 (4)	2020.06.29
[JavaScript] Table을 Excel 처럼 즉시 수정가능하게 만들기 (1)	2020.06.24
[JavaScript] 정규 표현식 사용방법 (0)	2020.05.07

[JavaScript] 매월의 월요일 기준, 주차 구하기[JavaScript] 매월의 월요일 기준, 주차 구하기

Posted at 2020. 6. 29. 18:14 | Posted in JavaScript & jQuery/JavaScript

참고 : https://blog.naver.com/z1004man/220936098651

참고 : https://matthew-jo.tistory.com/8

■ 매월 월요일을 기준으로하는 주차 및 해당주차의 날짜 구하기

( 부제 : 일요일을 마지막으로 하는 주차 구하기 )

※ 선택한 매월의 월요일을 기준으로하는 해당월의 주차수와 각 주차별 월요일, 일요일 날짜를 구하는 함수

통계 프로그램을 만들면서 JSP, PHP, Oracle, MySQL등 여러가지 개발 언어를 사용하여

매월의 주차를 구하는 프로그램을 구현해야 하는 일이 종종 발생 하였다.

그런데 저렇게 다양한 환경에서 매번 그 언어에 맞게 다시 조립 및 분해하는 과정이 생기는게 싫어서.

이번에 아예 한번 자바스크립트로 클라이언트 영역에서 넘겨줄 값을 미리 다 생성해서 넘겨주면

좀더 환경에 자유로울 수 있을 것 같아 순수 자바스크립트로 매월의 ( 월요일을 시작을 기준 )으로 함수를 만들어 정리해 보았다.

# 소스코드

<html>

<head>

<title>:: JavaScript 매월 주차 구하기 ::</title>

// 기준요일에 따른 주차구하는 함수.

// 해당 주차 / 해당주차 시작날짜 / 해당주차 끝나는날짜를 리턴.

function searchPeriodCalculation() {

let cYear = document.getElementById("choiceYear").value;

let cMonth = document.getElementById("choiceMonth").value.replace(/(^0+)/, "") - 1;

// 날짜형으로 데이트 포맷

let date = new Date(cYear, cMonth);

// 월요일을 중심으로한 주차 구하기( JS기준 : 일요일 0 월요일 1 ~ 토요일 6 )

let firstDay = new Date(date.getFullYear(), date.getMonth(), 1);

let lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);

let weekObj = null;

let weekObjArray = new Array();

let weekStand = 8; // 월요일 고정

let firstWeekEndDate = true;

let thisMonthFirstWeek = firstDay.getDay();

for(var num = 1; num <= 6; num++) {

// 마지막월과 첫번째월이 다른경우 빠져나온다.

if(lastDay.getMonth() != firstDay.getMonth()) {

break;

}

weekObj = new Object();

// 한주의 시작일은 월의 첫번째 월요일로 설정

if(firstDay.getDay() <= 1) {

// 한주의 시작일이 일요일이라면 날짜값을 하루 더해준다.

if(firstDay.getDay() == 0) { firstDay.setDate(firstDay.getDate() + 1); }

weekObj.weekStartDate =

firstDay.getFullYear().toString()

+ "-"

+ numberPad((firstDay.getMonth() + 1).toString(), 2)

+ "-"

+ numberPad(firstDay.getDate().toString() , 2);

}

if(weekStand > thisMonthFirstWeek) {

if(firstWeekEndDate) {

if((weekStand - firstDay.getDay()) == 1) {

firstDay.setDate(firstDay.getDate() + (weekStand - firstDay.getDay()) - 1);

}

if((weekStand - firstDay.getDay()) > 1) {

firstDay.setDate(firstDay.getDate() + (weekStand - firstDay.getDay()) - 1)

}

firstWeekEndDate = false;

} else {

firstDay.setDate(firstDay.getDate() + 6);

}

} else {

firstDay.setDate(firstDay.getDate() + (6 - firstDay.getDay()) + weekStand);

}

// 월요일로 지정한 데이터가 존재하는 경우에만 마지막 일의 데이터를 담는다.

if(typeof weekObj.weekStartDate !== "undefined") {

weekObj.weekEndDate =

firstDay.getFullYear().toString()

+ "-"

+ numberPad((firstDay.getMonth() + 1).toString(), 2)

+ "-"

+ numberPad(firstDay.getDate().toString(), 2);

weekObjArray.push(weekObj);

}

firstDay.setDate(firstDay.getDate() + 1);

}

console.log( weekObjArray );

}

// 월, 일 날짜값 두자리( 00 )로 변경

function numberPad(num, width) {

num = String(num);

return num.length >= width ? num : new Array(width - num.length + 1).join("0") + num;

}

</script>

</head>

<body>

<div>

 년  

</select>

 월  

</div>

</body>

</html>

위 코드의 결과는 아래와 같다.

# 출력 결과

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트를 이용한 캘린더 제작 (13)	2020.07.13
[JavaScript] SelectBox를 사용하는 날짜 검색창 제작 (0)	2020.07.12
[JavaScript] Table을 Excel 처럼 즉시 수정가능하게 만들기 (1)	2020.06.24
[JavaScript] 정규 표현식 사용방법 (0)	2020.05.07
[JavaScript] 휴대폰 사진 업로드시 회전 방지 (0)	2020.03.30

Prev Next

1 ··· 3 4 5 6 7 8 9 ··· 64

'공방 제작 포스트'에 해당되는 글 256건

[JAVA] Windows 10 컴퓨터, JAVA 8 버전 설치하기[JAVA] Windows 10 컴퓨터, JAVA 8 버전 설치하기

'JAVA' 카테고리의 다른 글

[JavaScript] 자바스크립트를 이용한 캘린더 제작[JavaScript] 자바스크립트를 이용한 캘린더 제작

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] SelectBox를 사용하는 날짜 검색창 제작[JavaScript] SelectBox를 사용하는 날짜 검색창 제작

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 매월의 월요일 기준, 주차 구하기[JavaScript] 매월의 월요일 기준, 주차 구하기

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바