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)

이벤트 핸들러

이벤트

이벤트 종류

이벤트 종류 설명
click 마우스를 클릭했을 때 이벤트 발생
dblclick 마우스를 더블클릭했을 때 이벤트 발생
mouseover 마우스를 오버했을 때 이벤트 발생
mouseout 마우스를 아웃했을 때 이벤트 발생
mousedown 마우스를 눌렀을 때 이벤트 발생
mouseup 마우스를 떼었을 때 이벤트 발생
mousemove 마우스를 움직였을 때 발생
keydown 키를 눌렀을 때 이벤트 발생
keyup 키를 떼었을 때 이벤트 발생
keypress 키를 누른 상태에서 이벤트 발생
focus 포커스가 이동되었을 떄 이벤트 발생
blur 포커스가 벗어났을 때 이벤트 발생
change 값이 변경되었을 때 이벤트 발생(주로 select태그에서 사용)
submit submit 버튼을 눌렀을 떄 이벤트 발생
reset reset버튼을 눌렀을 때 이벤트 발생
select input, textarea 요소 텍스트를 드래그해서 선택했을 때 이벤트 발생
load 로딩이 완료되었을 떄 이벤트 발생
abort 이미지의 로딩이 중단되었을 때 이벤트 발생
resize 사이즈가 변경되었을 떄 이벤트 발생
scroll 스크롤바를 움직였을 때 이벤트 발생

이벤트 연결 방식

1. 인라인 이벤트 모델

  • html요소에 직접 이벤트를 연결하는 방식
  • 태그 안에 이벤트 종류가 들어가며 on이 붙음
  • onclick같은 이벤트 안에는 모든 스크립트 코드가 들어갈 수 있음
<body>
    
    <button type="button" onclick="some('aaa');">인라인이벤트</button>
    <script>
        function some(name){
            alert(name+'님이 버튼을 클릭!');
        }
    </script>
</body>

2. 기본 이벤트 모델

  • HTML요소를 취득 후 이벤트를 익명함수로 연결하는 방식
  • HTML요소를 취득할 때는 순서상 취득할 요소가 요소 취득 명령어 이전에 있어야 함
<script>
     // 화면이 로드된 이후에 동작하는 이벤트
     // 단, (window.onload이벤트) 화면에서 1개만 사용할 수 있음
     window.onload = function(){
         // 태그를 코드 영역으로 얻는다.
         // 이벤트를 실행시키는 구문이 태그보다 이후에 작성되어야 함
         var btn = document.getElementById("btn");
         console.log(btn);
         btn.onclick=function(){
             alert("기본이벤트 호출");
         }
     }   
</script>
<body>
    <butt    on type="button" id="btn">기본이벤트</button>
</body>

3. 표준 이벤트 모델

  • 객체.addEventListener(이벤트, 함수) 방식으로 연결
  • 표준 이벤트 모델은 이벤트에 on을 붙이지 않음
<body>
    <button type="button" id="btn">이벤트리스너</button>
    <script>
        var btn = document.getElementById("btn");
        // 방법1
        // btn.addEventListener('click',some);
        // function some(){
        //     alert("이벤트리스너 클릭");
        // }

        // 방법2
        btn.addEventListener('click',function(){
            alert("이벤트리스너 클릭");
        });
    </script>
</body>

DOM & BOM

DOM(Document Object Model)

태그 노드 선택

메서드 설명
getElementById() Id와 일치하는 요소의 태그를 선택
getElementByName() name과 일치하는 요소의 태그 전부 선택
getElementByClassName() class와 일치하는 요소의 태그 전부 선택
getElementByTagName() tag명과 일치하는 요소의 태그 전부 선택
querySelector() 요소 선택방법이 css와 동일(첫번째 요소만 선택)
querySelectorAll() 요소 선택방법이 css와 동일(모든 태그 선택) 
<body>
    <!-- 
        getElementById
        getElementsByName - 복수형
        getElementsByClassName - 복수형
        getELementsByTagName - 복수형
    -->

    <button type="button" id="btn1">체크박스요소 확인하기</button>
    <input type="text" name="inter" value="1">1번
    <input type="text" name="inter" value="2">2번
    <input type="text" name="inter" value="3">3번
    <input type="text" name="inter" value="4">4번
    <input type="text" name="inter" value="5">5번

    <script>
        var cks = document.getElementsByName('inter');
        var btn1 = document.getElementById("btn1");
        btn1.onclick=function(){
            for(var i=0;i<cks.length;i++){
                console.log(cks[i]);
            }
        }
    </script>

    <hr>

    <input type="radio" name="radio" class="my-radio">프로그램
    <input type="radio" name="radio" class="my-radio">디자인
    <input type="radio" name="radio" class="my-radio">시스템

    <script>
        var rd = document.getElementsByClassName('my-radio');
        for(var i=0;i<rd.length;i++){
            console.log(rd[i]);
        }
    </script>

    <hr>
    <h3>돔트리의 탐색</h3>
    <select id="sel1">
        <option value="1">a</option>
        <option value="2">b</option>
        <option value="3">c</option>
    </select>
    <select id="sel2">
        <option value="1">a</option>
        <option value="2">b</option>
        <option value="3">c</option>
    </select>

    <script>
        // var options = document.getElementsByTagName('option');
        // console.log(options);

        var sel = document.getElementById("sel1");
        var options = sel.getElementsByTagName("option");
        console.log(options);
    </script>
</body>

    <img src="img/1.jpg" alt="대표이미지" width="200" class="profile-img">
    <section>
        <select id="season">
            <option value="1.jpg">봄</option>
            <option value="2.jpg">여름</option>
            <option value="3.jpg">가을</option>
            <option value="4.jpg">겨울</option>
        </select>
    </section>
    <script>
        var img = document.querySelector(".profile-img");
        var season = document.getElementById("season");
        season.addEventListener("change",function(){
            img.src="img/"+season.value;
        })
    </script>