Day3_VSCODE_JavaScript_ Web API 객체 + Form(폼)객체

🟢Web API 객체
BOM(Browser Object Model): 비표준

 

🟡setTimeout() 일정 시간이 지난 후 매개변수로 제공된 함수를 실행

[예시]
        const 함수명 = function(){
            실행문;
            ...
        }

        const st = setTimeout(함수명, 밀리초);​

🟡clearTimeout() 일정 시간후에 일어날 setTimeout()을 취소

🟡setInterval() 일정시간마다 매개변수로 제공된 함수를 실행

🟡clerInterval() 일정시간마다 일어나는 setInterval()을 취소함

 

🟢form 객체
일반적인 폼 요소에 접근할 때 사용
document.forms 컬렉션을 이용해서도 접근할 수 있음 

 

예시 셋팅

<form name ='myform' id='regform' method='post' action='#'>
        아이디: <input type = 'text' name = 'userid' id='id'>
        <br>
        비밀번호: <input type='password' name='userpw' id='pw'>
        <br>
    </form>

 

🟡폼 접근하기

const frm = document.myform; <----- myform은 폼태그의 name

const frm = document.forms; //name

const frm = document.forms['myform']; //name

const frm = document.forms[0]; //한 문서의 여러개의 폼 중 첫번째

const frm = document.getElementById('regform'); //id로 찾는다​

 

🟡아이디 입력상자에 접근하기(html의 input)

    const userid =frm.userid;                                   
    //name
    
    const userid =document.forms['myform'].elements[0];         
    //한 문서의 name = myform  중 첫번째 요소
    
    const userid =document.forms['myform'].elements['userid'];  
    //name이 myform의 요소중 name이 userid 가진 요소

    const userid =document.forms['myform'].elements[0][0];      
    //한 문서의 여러개 폼 중 첫번째 폼에 첫번째 요소 

    const frm = document.getElementById('id');                  
    //id

 예시

예시 HTML

    <form action="#" name ='frm1'>
            <input type="text" name="userid" id="id" placeholder="아이디를 입력하세요.">
            <br>
            <input type="password" name="userpw" placeholder="비밀번호를 입력하세요.">
        </form>

        <form action="#" name ='frm2'>
            <input type="search" name="search" placeholder="검색어를 입력하세요.">
        </form>

 

<script>
        const frm1 = document.frm1;
        console.log(frm1.userid.placeholder) //아이디를 입력하세요 가져오기


        //같은 것(frm2 폼에서 placeholder 가져오기)
        const frm2 = document.forms[1];
        console.log(frm2.search.placeholder)
        
        const frm3 = document.frm2;
        console.log(frm3.search.placeholder)


        //아이디 입력칸에 apple 적기
        document.getElementById('id').value='apple';

        //비밀번호 칸에 1004 입력하기
        document.forms['frm1'].elements['userpw'].value='1004';


        //검색창에 코리아it아카데미 입력하기
        //엘리먼트 0번 input
        document.forms[1].elements[0].value = '코리아it아카데미'

    </script>