JS_03_자바스크립트로 콘텐츠 제작하기

웹페이지의 자바스크립트로 구현된 콘텐츠 정보 수집하기 :
네이버 날씨, 뉴스, 증시정보, 언론사 아이콘 목록, 좌/우 버튼, 트렌드 쇼핑 콘텐츠, 오늘 읽을 만한 글, 새로고침(f5)시 배너 변경, 쿠키정보를 활용한 '오늘 하루 열지 않음', 패밀리 사이트, 움직이는 이미지 슬라이드, 버튼 클릭, 마우스 오버시 변경되는 모든 정보 콘텐츠

실습1. 버튼으로 전구 on/off

전구 이미지를 활용하여 버튼 클릭시 해당 이미지의 src 속성값을 변경하여 다른 이미지가 나오게 하기

            //버튼 변수 저장
            const btn_on = document.getElementById('btn_on'); 
            const btn_off = document.getElementById('btn_off'); 

            btn_on.addEventListener('click', function(){ //btn_on 버튼 클릭시
            // window.alert('버튼을 클릭 하세요'); 클릭 테스트 _ 버튼 클릭시 안내창 띄우기
                document.getElementById('bulb').src='./images/1213img/pic_bulbon.gif'; // id="bulb"의 src 주소값 변경
            });
    
            btn_off.addEventListener('click', function(){//btn_on 버튼 클릭시
                document.getElementById('bulb').src='./images/1213img/pic_bulboff.gif'; // id="bulb"의 src 주소값 변경
            });

실습2. 이미지에 마우스 오버시 사진 변경하기

            //변수 저장
            const m_hover = document.getElementById('banner');

            m_hover.addEventListener('mouseover', function(){ //마우스 오버시
                document.getElementById('banner').src='images/1213img/mbn04ov.png';
            });

            m_hover.addEventListener('mouseout', function(){ //마우스 아웃시 
                document.getElementById('banner').src='images/1213img/mbn04.png';
            });