2021.08.16_ Button, Initialization, Date

Notice

Recent Posts

Recent Comments

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

Tags more

Archives

Today

Total

관리 메뉴

B_V (PW: 0987)

2021.08.16_ Button, Initialization, Date 본문

Tesk/working

2021.08.16_ Button, Initialization, Date

Eve B_V 2021. 8. 17. 09:58

참조: https://nykim.work/96

버튼에 타입을 쓰는 이유 (button type="button")

프롤로그 가끔 이렇게 type을 명시한 버튼을 마주칠 때가 있는데 전 항상 궁금하더라구요. "아니 버튼이면 버튼이지 버튼 타입 버튼은 대체 뭐람" 그러고보면 비슷하게 타입을 명시하는 이라는

nykim.work

https://cofs.tistory.com/270

javascript 중복 submit 방지 / 다중 클릭 방지 / 중복 클릭 방지

javascript 중복 submit 방지 / 다중 클릭 방지 / 중복 클릭 방지 웹 페이지에서 form submit 이벤트나 버튼의 클릭 등 이벤트가 여러번 발생하면 곤란할 때가 있다. 예를 들어 글을 등록할 때 등록버튼

cofs.tistory.com

https://www.youtube.com/watch?v=OCCpGh4ujb8

https://0ver-grow.tistory.com/24

3. JS 변수 / 변수 선언 / 변수 초기화 / undefined, null 차이점 / typeof

<복습> 1. HTML은 ____형태이다 2. JS코드 작성시 ___에 유의 해야 한다. <정답> 1. DOM(Document Object Model) 구조 2. 작성 순서 +) 왜냐면 인터프리터언어이므로 변수? 변할 수 있는 수 수학적 연산 및 처리가.

0ver-grow.tistory.com

https://okky.kr/article/328573

OKKY | javascript 변수 선언시 꼭 초기화를 해주어야 하나요?

해당 질문에 대한 답변을 제대로 찾을수가 없어 여기 Q A 게시판에 질문 드립니다. 질문 내용 그대로 자바스크립트에서 변수 선언시 꼭 초기화를 해주어야 하나요? 예를 들자면 var a ; 이렇게 꼭

okky.kr

https://programmers.co.kr/learn/courses/3/lessons/34

Hello, JavaScript: 자바스크립트 입문 - 변수 선언과 초기화

## Hello, JavaScript! 관련 키워드: JavaScriptHTMLCSS웹프론트엔드입문문법 * 자바스크립트와 처음 만나는 분들을 위한 강의! * 부담가질 것 없이, 하루 최소 20분씩만 짬내도 배울 수 있는 강의!(약 7일 소

programmers.co.kr

https://runebook.dev/ko/docs/javascript/functions/default_parameters

JavaScript - 기본 매개 변수 - 기본 함수 매개 변수를 사용하면 값이 없거나 undefined 경우 명명 된 매

runebook.dev

https://www.w3schools.com/jsref/jsref_obj_date.asp

JavaScript Date Reference

JavaScript Date Reference Date Object The Date object is used to work with dates and times. Date objects are created with new Date(). There are four ways of instantiating a date: var d = new Date(); var d = new Date(milliseconds); var d = new Date(dateStri

www.w3schools.com

<데이터 피커 만들기>

https://www.youtube.com/watch?v=lU1qAvf27yk&t=93s

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<body>
  <div class="container">
<!-- 1-데이터 픽커를 위한 클릭시 달력이 생길수있도록하기위함 -->
    <input type="text" id="input_date" />
<!-- ㄱ.클릭되는순간보이게할부분 -->
    <div id="div_calendar" style="width:300px;display:none;"> 
      <div>
      							<!-- 함수호출 클릭시 -1만큰  ㅡmonth가 줄어듬 = 이전달 -->
        <button type="button" onclick="changeMonth(-1);"><i class="fa fa-chevron-left"></i></button>  
        <input type="number" id="year" value="2021" style="width:80px;display:initial;" class="form-control" />
																<!-- 셀렉박스바뀔때 바꾸는 이벤트인데 파람없이 선택된값을가지고 -->
        <select id="month" class="form-control" style="width:80px;display:initial;" onchange="changeMonth();">
          <option value="1">1월</option>
          <option value="2">2월</option>
          <option value="3">3월</option>
          <option value="4">4월</option>
          <option value="5">5월</option>
          <option value="6">6월</option>
          <option value="7">7월</option>
          <option value="8">8월</option>
          <option value="9">9월</option>
          <option value="10">10월</option>
          <option value="11">11월</option>
          <option value="12">12월</option>
        </select>
      							<!-- 함수호출 클릭시 1만큰  month가 증가하게할것임 = 다음달 -->			
        <button type="button" onclick="changeMonth(1);"><i class="fa fa-chevron-right"></i></button>
      </div>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>일</th>
            <th>월</th>
            <th>화</th>
            <th>수</th>
            <th>목</th>
            <th>금</th>
            <th>토</th>
          </tr>
        </thead>
		<!-- 1~30일 출력부 -->			
        <tbody id="tb_body"></tbody>
      </table>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  <script>
  	//윤년계산 4로나누어 떨어지더라도 100으로 떨어지면 평년 / 4로나누어 떨어지고 100나누어떨어지나 400나누어떨어지면 윤년
    function checkLeapYear(year) {
      if(year%400 == 0) { //윤년
        return true;
      }else if(year%100 == 0) { //평년 
        return false;
      }else if(year%4 == 0) { //무조건 윤년
        return true;
      }else {  //나머지는 윤년이아님
        return false;
      }
    }
    //시작 요일
    function getFirstDayOfWeek(year, month) {
      if(month < 10) month = "0" + month; // 자바스크립트 데이터객체에 getDay기본함수가 있는데 해당날짜요일이 일요일 이면 0 월은 1 .. 리턴한다. 리턴으로 데이터 객체를 만들어주는과정임
      return (new Date(year+"-"+month+"-01")).getDay(); //year month의 첫번째 인자가 만들어진다. getDay에서 해당 날짜의 값을 리턴한다. = 각 월에 1일이 어느 요일인지를 가져오는기능을 구한함
    }
    //월 선택시 바뀌면서 날을 뿌려주는 기능
    function changeYearMonth(year, month) {
      //월별로 존재하는 마지막 날
      let month_day = [31,28,31,30,31,30,31,31,30,31,30,31];
      //달의 2월달이면 윤년인지 아닌지 확인
      if(month == 2) { 
        if(checkLeapYear(year)) month_day[1] = 29;//트루이면 윤년임
      }
      //getFirstDayOfWeek의 값을 받아와 어느요일인지 값을 가져온다
      let first_day_of_week = getFirstDayOfWeek(year, month);
      let arr_calendar = []; //날을 뿌려줄 html을 만들어줄것임
      for(let i=0 ; i<first_day_of_week ; i++){ //첫 시작전 요일들을 비우게하는 기능 1일이 월요일이면 일요일을 빈칸으로 만들어줘야됨
        arr_calendar.push(""); //공백값을 넣어준다
      }
      //현재 년 월이 몇일까지있는지 가져오는 부분
      for(let i=1 ; i<=month_day[month-1] ; i++) { //month_day에서 현재 month에서 -1 = 1월 2월 들어올텐데 0부터 시작하니깐
        arr_calendar.push(String(i)); //
      }
      //마지막에 날짜이후 공간 빈공간으로 적용 
      let remain_day = 7 - (arr_calendar.length%7); //나머지가 1일면 6만큼 비어지게된다. 
      if(remain_day < 7) {
        for(let i=0 ; i<remain_day ; i++) {
          arr_calendar.push(""); // 마지막날이후의 공간에 공백처리한다
        }
      }

      renderCalendar(arr_calendar); //아래 html선언부분의 값을 출력해준다
    }
    //위의 데이터를 가지고 html코드를 넣어준다
    function renderCalendar(data) { //데이터를 받아서 실제 tb_body에 넣어줄것임
      let h = []; //한번에 뿌려주기위해 성생
      for(let i =0 ; i<data.length ; i++) { 
        if(i==0) {
          h.push('<tr>'); //한로우가만들어짐
        }else if(i%7 == 0) { // 나머지가 0인건 한주를 다 돌았다는 말로 다음 주로 넘어가게됨
          h.push('</tr>'); //막고
          h.push('<tr>'); //새로운조건이시작될수있게 생성
        }
        //2-이데이터 픽커를 위한 온클릭 설정해주고 현재 어떤 데이터 선택했는지 출력 //
        h.push('<td onclick="setDate(' + data[i] + ');" style="cursor:pointer;">' + data[i] + '</td>'); //나머지조건으로
      }

      h.push('</tr>'); //마지막 닫기
      $("#tb_body").html(h.join("")); // html형태로 다 합쳐서 뿌려준다
    }
    //3-이벤트걸어 년 달이 바뀔때마다 내용이 바뀌게한다
    function setDate(day) {
      if(day<10) day = "0" + day; //날이 10보다 작작으면 화면에 포맷 맞춰주기위해 0 넣고 day
      $("#input_date").val(current_year + "-" + current_month + "-" + day); // 벨류에 넣어줄건데 현재 년도 - 현재달 - 날짜 형식으로 = 선택하면 그 해당 날짜가 출력된다.
      $("#div_calendar").hide(); //ㄹ.선택시 사라지게한
    }


    //diff는 -1 +1일떄도있다는걸 해놓은것임
    function changeMonth(diff) {
      if(diff == undefined) { //파람 없는 경우 설렉으로 선택했을때
        current_month = parseInt($("#month").val()); // 현제 달의 달 값을 콤보박스에 선택한 그 값을 인트값으로 바꿈
      }else {//버튼을 눌렀을때
        current_month = current_month + diff;  // 선택된 -1 +1 만큼 줄어든다
        //0이된건데 이건 없음 즉 해가 바꼈다는 말이다 == 12가되야함
        if(current_month == 0) {
          current_year = current_year - 1; //이전년도로 옮겨가야하니 -1
          current_month = 12;  //이전년도로 넘어갔을때 첫 달은 12임 
        }else if(current_month == 13) { //더해져서 13이되는것도 없음 
          current_year = current_year + 1; // 1년이더해져야함
          current_month = 1; //1로 최근 달로 변해야됨
        }
      }
      //분리한 펑션을 호출하여 화면에 기능할수있게 해준다
      loadCalendar();
    }
    //달력만 바뀌면안되고 화면에 나오는 값도 바꿔주기위한 작업
    function loadCalendar() {
      $("#year").val(current_year); //최근 년
      $("#month").val(current_month); //최근 달
      changeYearMonth(current_year,current_month); //값을 가져와서 출력해준
    }
    //현재 년도가져오기
    let current_year = (new Date()).getFullYear();
    //현재 달을 가져오기 1월은 0 이옴
    let current_month = (new Date()).getMonth() + 1;

    //화면이 처음에 열릴때 값셋팅위함 
    $("#year").val(current_year); //현재 년이 출력됨
    $("#month").val(current_month); //현재 달이 출력됨

    //호출한다
    changeYearMonth(current_year,current_month); //
    //ㄴ.클릭시 div_calendar보여진다
    $("#input_date").click(function(){
    //ㄷ.토글로 클릭할때마다 보이고 안보이게된
   	  $("#div_calendar").toggle();
    });
  </script>
</body>
</html>

<!-- 참조: https://www.youtube.com/watch?v=FBO_7H39tqs 
	깃허브: https://github.com/seungwongo/dev_dignity.git
	(examples/html/calendar.html)
-->

아래 다른것도 만들어보기

https://www.youtube.com/watch?v=FBO_7H39tqs