JavaScript - 폼(form), Location, history, navigator객체

1. 폼(form) 객체

- html에 있는 폼 태그를 말함, 일반적인 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>

1.1. 폼 접근하기

• 1. const frm = document.myform;
          document는 문서의 바디를 의미
          .은 name을 의미
• const frm = document.forms['myform']
          forms 컬렉션의 폼 name이 myform인 애 찾기
• const ffm = document.forms[0]
          forms 중에서 첫번째 폼 찾는 방법
• const frm = document.getElementById('regform')
          ID로 검색도 가능, 하지만 다른 검색방법과는 달리 form을 통해서 찾는것이 아니라 바로 찾는 방법이라 편리함

1.2. 아이디 입력상자에 접근

• const userid = frm.userid
          여기서 . 은 name을 의미
• const userid = document.forms['myform'].elements[0]
          전체 form안에 있는 myform의 첫번째 요소
• const userid = document.forms['myform'].elements['userid']
          숫자로 하는게 아니라 이름으로 검색도 가능
• const userid = document.forms[0][0]
          둘다 인덱스로 검색
• const frm = document.getElementById('id')
          ID로 검색도 가능, 하지만 다른 검색방법과는 달리 form을 통해서 찾는것이 아니라 바로 찾는 방법이라 편리함

2. Location 객체

- 현재 브라우저에 표시된 html 문서의 주소를 얻거나 브라우저에 새 문서를 불러올때 사용 

https://koreaisacademy.com/renewal2021/community/tv_view.asp?idxnum=170&clkMater=&txtMenu=&txtCurPage=1&selMater=&gubun=1 기준으로 하겠습니다.

 

2.1. URL : 페이지의 데이터 까지의 모든 정보를 포함하고있음 

https://koreaisacademy.com/renewal2021/community/tv_view.asp   

 

2.2. 프로토콜(protocol) : 콜론을 포함하는 http, https, htp 등 프로토콜 정보를 반환

https://

 

2.3. hostname : 호스트의 이름과 포트 번호를 반환

https://koreaisacademy.com/    

 

2.4. pathname : url 경로 부분 반환

renewal2021/community/tv_view.asp

 

2.5. href : 페이지 url 전체 정보를 반환 또는 url을 지정하여 페이지를 이동

2.6. reload() : 새로고침

 

3. history 객체

- 브라우저의 히스토리 정보를 문서와 문서상태 목록으로 저장하는 객체
- 개인정보 보호를 위해 이 객체의 대부분의 기능이 제한

• back() 페이지를 뒤로 이등
• forward() 페이지를 앞으로 이동
• go(0) : 새로고침(loacion.reload와 같은 기능)

4. navigator 객체

- 브라우저 공급자 및 버전 정보 등을 포함한 브러우저에 대한 정보를 저장하는 객체

• getlocation : GPS 정보를 수신하는 프로퍼티