[2022/02/09]국비지원 javascript 3 객체 전개

 

 

 

 

 

• new : 새 object 생성 연산자
  • var 변수 = new object();
    예시))
    

    var todayObj = new Date();
    	todayObj.getFullYear();

    
    
    
• Date : 내장된 object 함수명이지만 new 연산자로 소환 要
  예시))
  

  var 변수 = new Date();
  var 변수 = new Date(년, 월, 일, 시, 분, 초);

  
  
  • 날짜 제공 method
    • getFullYear() : 전개형 YYYY
    • getMonth() : 0 ~ 11 ( 숫자 출력 시 +1 要 )
    • getDate() : 요일
    • getDay() : 0 일요일 ~ 6 토요일
    • getHours() : 0 ~ 23
    • getMinutes() : 0 ~ 59
    • getSeconds() : 0 ~ 59
    • getMilliseconds() : 1/1000초
    • getTime() : 1970년 1월 1일 이후부터 경과한 시간을 밀리초 까지 제공
      
      ≫ 예제1 : 현재 날짜/ 시간 정보
      

      document.write("<h1>현재날짜/시간 정보</h1>")
      
            var today = new Date();
            var nowYear = today.getFullYear();
              document.write("년 : "+ nowYear + "<br>");
            var nowMonth = today.getMonth() + 1;
              document.write("월 : "+ nowMonth + "<br>");
            var nowDate = today.getDate();
              document.write("일 : "+ nowDate + "<br>");
            var nowDay = today.getDay();
              switch(nowDay){
                case 0:
                  nowDay = "일요일";
                  break;
                case 1:
                  nowDay = "월요일";
                  break;
                case 2:
                  nowDay = "화요일";
                  break;
                case 3:
                  nowDay = "수요일";
                  break;
                case 4:
                  nowDay = "목요일";
                  break;
                case 5:
                  nowDay = "금요일";
                  break;
                case 6:
                  nowDay = "토요일";
                  break;
              }
            document.write("요일 : "+ nowDay + "<br>");
              
      
      
          var nowHours = today.getHours();
          var nowMinutes = today.getMinutes();
          var nowSecond = today.getSeconds();
            document.write("시 : "+ nowHours + "<br>");
            document.write("분 : "+ nowMinutes + "<br>");
            document.write("초 : "+ nowSecond + "<br>");
          var nowTime = today.getTime();
            document.write("경과시간 : "+ nowTime + "<br>");

      
      
      ≫ 예제2 : 날짜 임의로 지정하기
      

          today.setMonth(11);//12월
          today.setDate(25); //25일
          var nowMonth = today.getMonth()+1;
          var nowDate = today.getDate();
            document.write("월 : "+ nowMonth + "<br>");
            document.write("일 : "+ nowDate + "<br>");

      
      
      ≫ 예제3 : D-Day
      

      // D-day
      
          var today = new Date();
          var afterDay = new Date( 2022, 11, 25 ); //2022년 12월 25일 //Month 0~11
          var diffDay = afterDay.getTime() - today.getTime();
          console.log(diffDay);
          var DDay = Math.ceil(diffDay / 1000 / 60 / 60 / 24);
          console.log( "D-" + DDay + "일" );

      
      

               ▶ console.log(); = 브라우저 f12 개발자도구 콘솔 info 항목 갱신

       

      ≫ 예제4 : 요일에 이미지 대입

      //일요일 img 1-22.jpg ~토요일 img 7-22.jpg
      
        var today = new Date();
        var nowDay = today.getDay()+1;
          document.write("<img src='images/img" + nowDay + "-22.jpg' alt='" + nowDay + "'>"+"<br>");

       
  • 날짜 지정 method 
    • setFullYear() : 전개형 YYYY
    • setMonth() : 0 ~ 11 ( +1 필수 )
    • setDate() : 요일
    • setDay() : 0 일요일 ~ 6 토요일
    • setHours() : 0 ~ 23
    • setMinutes() : 0 ~ 59
    • setSeconds() : 0 ~ 59
    • setMilliseconds() : 1/1000초
    • setTime() : 현재까지 경과된 밀리초 새로 지정
    • toGMTString() : 그리니치천문대 표준시로 지정
    • toString() : 날짜의 문자화
      
• Math : new 연산자를 이용하지 않고 기능 이용 가능
  • method
    
    • max( , , ) : 최대값
    • min( , , ) : 최소값
    • round() : 소수점 첫째자리 반올림 
    • ceil() : 소수점 무조건 올림 
    • floor() : 소수점 무조건 절삭
    • abs() : 절대값
    • random() : 0~1사이 난수
      

          var maxNum = Math.max(30,70,5);
          var minNum = Math.min(8,10,15);
          var roundNum = Math.round(3.5);
          var ceilNum = Math.ceil(5.1);
          var floorNum = Math.floor(10.9);
          var absNum = Math.abs(-60);
          var randomNum = Math.random();
            document.write("최대값 : " + maxNum + "<br>");
            document.write("최소값 : " + minNum + "<br>");
            document.write("반올림 : " + roundNum + "<br>");
            document.write("소수점올림 : " + ceilNum + "<br>");
            document.write("소수점절삭 : " + floorNum + "<br>");
            document.write("절대값 : " + absNum + "<br>");
            document.write("난수 : " + randomNum + "<br>");

      
      
      ≫ 예제1 : 이미지 랜덤 출력
      

      // img1-24.jpg ~ img3.24jpg 랜덤이미지 출력
      // Math.random()*(갯수) + 시작수
      // 0.00001*3 + 1 =1.00003
      // 0.99999*3 + 1 =3.99997
        var imgNum = Math.floor(Math.random()*3+1);
          document.write("<img src='images/img" + imgNum + "-24.jpg' alt='" + imgNum + "'>"+"<br>");

      
               ▶ Math.random( )* m + n = 난수 * m + n = 정수 뽑기 중간 계산
      
      
      ≫ 예제2 : 로또 뽑기
      

      // 1~45, 6개
          for(var a = 1 ; a < 7 ; a++){
            var lotto = Math.floor(Math.random()*45+1);
            document.write("로또 번호 " + a + " : " + lotto +"<br>");
          }

      
              
      
      
• 문자형 변수
  

  	var 변수(인스턴스 네임) = new String("자바스크립트");
  	var 변수 = "자바스크립트";

   

  •  method
    • .bold()
    • .link("URL")
    • .length : 텍스트 개수 변환. 공백도 문자로 인식하고 개수에 포함 시킴 
    • .toLowerCase() 
    • .toUpperCase()
    • .indexOf( "i" ) : i를 찾아 최초로 일치하는 인덱스 번호 반환, 없으면 -1 반환 
    • .lastIndexOf("i") 
    • .charAt(5) : 5번 인덱스에 저장된 문자 데이터 반환
    • .substring( 4, 6 ) : 인덱스 4~6 직전 문자 반환
    • .substr( 10, 3 ) : 10번 인덱스부터 3글자 반환
    • .replace( "web", "bye" ) : 텍스트 교체
    • .slice( 7, 9 ) : 인덱스 7~9 직전 문자 반환
    • .concat( "good" ) : 끝에 good 단어 결합 반환
    • .split( " " ) : ""공백을 기준으로 데이터 분리 ( , 역할) 

      var theText = "web js hi css"; //공백도 문자로 처리
          document.write(theText + "<br>");
          document.write(theText.bold() + "<br>");
          document.write(theText.link("https://www.google.com") + "<br>");
          document.write(theText.length + "<br>");
          document.write(theText.toLowerCase() + "<br>");
          document.write(theText.toUpperCase() + "<br>");
          document.write(theText.indexOf("i") + "<br>");
          document.write(theText.lastIndexOf("i") + "<br>");
          document.write(theText.charAt(7) + "<br>");
          document.write(theText.substring(7,9) + "<br>");
          document.write(theText.substr(10,3) + "<br>");
          document.write(theText.replace("hi","bye") + "<br>");
          document.write(theText.slice(4,6) + "<br>");
          document.write(theText.concat("good") + "<br>");
          document.write(theText.split("") + "<br>");

       

       

       

      ≫ 문자치환

          document.write("<h3>문자치환</h3>");
          var theText1 = "img2_out.jpg";
          theText1 = theText1.replace("out.jpg", "over.jpg");
          document.write(theText1 + "<br>");​

       

       

      ≫ 문자출력
      

          document.write("<h3>문자출력</h3>");
          var theText2 = "images/img10.jpg";
          theText2 = theText2.split("/")[1]; //[] 인덱스 번호
          theText2 = theText2.substring(3);
          theText2 = parseInt(theText2); //문자열에서 숫자만 갖다가 형질전환하는 method
          document.write(theText2 + "<br>");

       

      
      ≫ 마지막 문자 추출
      

          document.write("<h3>마지막 문자 추출</h3>");
          var theText3 = "hello javascript";
          var lastIndex = theText3.length-1;
          theText3 = theText3.charAt(lastIndex);
          document.write(theText3 + "<br>");

      
      
      ≫ 예제 : 주민번호로 생년월일 출력
      

      //prompt로 주민번호 입력받고 생년월일만 출력
          var idNum = prompt("당신의 주민번호는?", "920113-2896789");
          document.write(idNum.substring(0, 6) + "-*******" + "<br>");