• JavaScript에서 발생한 값을 HTML Form Control에 값 설정

값 설정(value속성 변경)

<input type="text.password.date.tel,,,">, <textarea>
  
  -id 속성 접근
  document.getElementById("아이디").value=값;

  -name 속성 접근
  document.폼이름.control명.value=값;

상태변환(checked, selected 변환) - 배열

-checked를 변환
<input type="checkbox, radio">
  문법)
  document.폼이름.control명[인덱스].checked=true | false

-selected변환
<select>
    문법)
    document.폼이름.control명[인덱스].selected=true | false

JavaScript Event Handling

• inline방식으로 (onXXX 속성) 이벤트를 발생시키고 처리하는 방식.

<input type="button" onclick="함수명()">

• 이벤트에 등록하여 처리할 수 있는 방식.

** 익명함수(anonymous function)를 사용하는 방식
태그를 찾아서 이벤트 속성에 익명함수를 정의하는 방식
문법)
document.getElementById("아이디").onXXX = function(){이벤트 처리 코드,,,};

** 기명함수(named function)를 사용하는 방식 - 이벤트에 등록하는 방식
태그를 찾고, 이벤트 리스너에 등록
문법)
document.getElementById("아이디").addEventListener("이벤트종류", 함수명 또는 무기명 함수)

JavaScript 객체

window : 웹 브라우저의 정보, 하위객체들의 접근, 최상위 객체
document : HTML문서에 접근할 수 있는 객체.(Form Control언어 조작가능)
location : 이동할 때 사용.
history : 웹 브라우저의 방문 기록을 사용할 때
event : 이벤트를 정보를 얻거나 처리할 때
stroage : 값을 저장하고 사용하는 객체

location

페이지 이동을 수행하는 객체.(HTML에서는 <a 태그)

* href속성사용(HTML의 <a>와 같은 일을 수행, web browser에 history가 남는다.)
window.location.href = "이동할 페이지 URL";

* replace함수를 사용
window.location.replace("이동할 페이지 URL");
 - HTML의 <a>와 같은 일을 수행
 - 이전 주소를 치환하기

reload

web browser를 새로 고침할 때
location.reload();

confirm

사용자의 의향을 묻는 다이얼로그

var 변수명 = confirm("메시지")

키보드 이벤트 처리

키 입력을 가질 수 있는 Form Control들에서 발생하는 이벤트

1. 이벤트 등록
   document.getElementById("아이디").addEventListener("이벤트", 호출될 함수)

2. 이벤트 처리함수 작성
   function 함수명(매개변수){

매개변수를 사용하면 window.event객체를 사용하는 것.
-눌린 키의 코드 값 얻기
매개변수.keyCode
매개변수.which
}