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)

노드의 속성 추가 및 제거

메서드 설명
getAttribute() 요소의 속성 취득
setAttribute() 요소의 속성 저장
removeAttribute() 요소의 속성 제거

이벤트 객체

  • 이벤트 발생시 실행되는 함수의 인자값으로 현재 실행되는 event객체를 넣어주게 되어있음
  • 이벤트 전파

: 부모에 하나의 이벤트만 걸어 놓으면, 모든 이벤트가 동일하게 자식으로 위임되는 특징

이벤트 객체의 기능 설명
stopPropagation() 이벤트 전파를 막음(버블링 중단)
target 이벤트를 적용한 타겟 속성
currentTarget 실제 이벤트가 걸려있는 타겟 속성
preventDefault() 고유특성을 가진 태그의 이벤트를 제거

form객체

  • document객체의 하위 객체 중 하나
  • form객체는 doucment의 하위 객체이므로 유일하게 name속성으로 선택 가능 ex) document.폼명.요소명
속성 값 설명
value input, textarea 요소의 value값을 반환
checked checkbox나 radio가 체크되어 있으면 ture, 체크되어 있지 않으면 false를 반환
disabled 요소가 활성화 상태이면 false, 비활성 상태이면 true반환
length 요소의 개수를 반환
focus() 요소의 포커스를 맞춤
blur() 요소의 포커스를 없앰
submit() form의 값을 전송
reset() form의 값을 초기화 
<body>
    <!-- 
        form태그는 doucment의 자식이어서 
        document.name명.name명으로 접근 가능
    -->
    <form action="#" name="myForm">
        이름 : <input type="text" name="name">
        번호 : <input type="text" name="phone">
        <input type="checkbox" name="check">css
        <input type="checkbox" name="check">HTML
        <input type="checkbox" name="check">JS

        <a href="#" id="myBtn">서브밋</a>
    </form>
    <script>
        var myBtn = document.getElementById('myBtn');

        myBtn.onclick=function(){
            event.preventDefault(); // a링크의 고유한 이벤트 중단
            
            // 폼 객체의 유효성 검사
            console.log(document.myForm.name);
            if(document.myForm.name.value.length<=0){
                
                    document.myForm.name.style.border='3px solid red';
                    document.myForm.name.focus();
                    alert('이름은 0자 이상입니다.')
                    return;
            }else if(document.myForm.phone.value.length!=11){
                alert('휴대폰 번호는 11자리 입니다.');
                document.myForm.phone.focus();
                return;
            }
            


            // document.myForm.submit(); // 폼태그의 서브밋
        }

        document.myForm.phone.onblur= function(){
            event.target.value = event.target.value.replaceAll('-','');
        }
    </script>
</body>