Fullstack-Study-241204-250625

커리큘럼(12-30/변경)

01. Java
02. git
03. Database 
04. Jsp [Server]

05. HTML,CSS 
07. JS (v)
06. 미니프로젝트-2W (v)

08. SpringFramework , SrpingBoot
09. React JS [Front-end]
10. 중간프로젝트 (1M)
11. Linux 명령어
12. AWS 클라우드
13. DevOps - Docker
14. App - Android
15. 최종프로젝트 (1M)

JS(Java Script)

DOM & BOM

DOM(Document Object Model)

날짜 객체

  • new Date()로 날짜 객체 생성
<body>
    <script>
        var date = new Date(); // 오늘날짜
        console.log(date.getFullYear());
        console.log(date.getMonth()+1);
        console.log(date.getDate());
        console.log(date.getHours());
        console.log(date.getMinutes());
        console.log(date.getSeconds());
        console.log(date.getTime()); // 날짜의 밀리초를 구함 (날짜 연산시에 사용)
        
        var millis = 1742173681541;
        var today = new Date(millis); // 밀리초 기준 날짜 생성
        // var today = new Date('2025-03-16 00:00:00'); // 밀리초 기준 날짜 생성

        console.log(today);

        var today2 = new Date(2025,1,30,12,30,30);
        console.log(today2);

        // 사용되는 함수들
        console.log('----------------------------------------------');
        console.log(date.toUTCString()); // UTC시간
        console.log(date.toISOString()); // ISO시간
        console.log(date.toLocaleTimeString()); // 지역시간으로 표시
    </script>
</body>

BOM(Browser Object Model)

window객체

window.open() - 새창을 띄워주는 메서드

  • 사용방법

window.open(문서 주소, 이름, "옵션 = 값, 옵션 = 값, ...")

옵션 설명
width = 픽셀값 가로넓이
height = 픽셀값 세로 넓이
left = 픽셀값 위치
top = 픽셀값 위치
location = yes 또는 no 윈도우 주소창 show/hide
scrollbars = yes 또는 no 윈도우 스크롤바 show/hide
menubar = yes 또는 no 윈도우 메뉴바 show/hide
toolbar = yes 또는 no 윈도우 툴바 show/hide
status = yes 또는 no 윈도우 상태중 show/hide 
<button type="button" id="popup">새창열기</button>

    <script>
        var popup = document.getElementById('popup');
        popup.onclick=function(){
            // console.log(window);
            // window.open('https://www.naver.com');
            window.open('popup.html', '메인창팝업', 'width=300,height=300,left=100,top=100,toolbar=no,status=no,scrollbars=no,menubar=no,location=no');

        }
    </script>
  • window객체 기본함수
함수 설명
alert() 경고창
confirm() 확인창
setTimeout() 일정시간이 지난 후 함수 실행
clearTimeout() setTimeout중지 메서드
setInterval() 일정 시간마다 함수 반복 실행
clearInterval() setInterval중지 메서드 
<body>
    <h3>인터벌로 이미지 바꾸기</h3>
    <div class="logo" >
        <img src="img/1.jpg" alt="이미지1">
    </div>

    <script>
        var logo = document.querySelector('.logo');
        var ct = 1;
        function changeImg(){
            ct++;
            // 이미지 생성
            var img = document.createElement('img');
            img.src='img/'+ct+'.jpg';
            img.alt = '이미지'+ct;
            
            // 기존 이미지 삭제
            logo.removeChild(logo.lastElementChild); 
            
            // 이미지 추가
            logo.appendChild(img);

            if(ct==4) ct=0;

            
        }

        (function(){
            setInterval(changeImg,3000);
        })();

    </script>
</body>