0224/JavaScript

쌍용교육센터에서 공부한 내용을 정리하며 기록하는 글이고 주관적인 생각이 들어갈 수 있습니다.
잘못된 내용이나 피드백 및 생각 공유는 언제든 환영입니다.
댓글로 남겨주시면 확인 후 수정하겠습니다.
내용에 대한 소스 코드는 https://github.com/2jaehoon/html에 올려두었습니다.

 

자바스크립트에서의 소스 코드 흐름은 위에서 아래로 흐른다.
그래서 스크립트에선 바디안에 있는 폼을 못 읽는다.( 함수 호출로 가능 )
그래서 document.form값을 전역변수로 사용할 수 없다. 

 

name 속성으로  HTML Form Control의 값 얻기

  - 모든 Form Control은 value속성을 사용하여 값을 얻는다.

    <input type=“text,password,hidden,file,checkbox”>( 중 하나 ), <select>,<textarea>

  - document.폼이름.control명.value 로 값을 얻는다.
  - <img>는 value가 아닌 src 속성으로 처리
  - checkbox와 radio가 여러 개 일 때 배열로 처리된다.
    checked상태가 true인 것만 값을 얻어야한다. 

<form name="frm">
<input type="checkbox" name="hobby" value="영화감상">영화
<input type="checkbox" name="hobby" value="음악감상">음악
<input type="checkbox" name="hobby" value="독서">독서
</form>

var hobby=document.frm.hobby; //체크유무에 상관없이 모든 checkbox가 배열로 얻어진다.

for( var i= 0; i < hobby.length; i++){ //모든 체크박스에서
  if( hobby[i].checked ){ //체크된 체크박스만 얻는다.
     hobby[i].value;
}

 

 

select 의 값 얻기

  - select은 하나고 option이 여러 개 이므로  document.폼이름.control명.value로

    값을 얻을 수 있다. 

  - option이 여러 개 이므로 배열로 처리할 수 있다.

//1. select을 얻는다. ( select은 하나 일지라도 옵션이 여러 개 이므로 배열로 얻어진다.)
var sel=document.frm.select명;

//2. 반복
for( var i= 0 ; i < sel.length ; i++ ){
//3. 선택된 옵션( selected )이 존재하는지 판단 
if( sel[i].selected ){
4. 값 얻기
sel[i].value;
 }
}

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

  - 값 설정 ( value속성 )

    <input type=“text,password 등”>, <textarea>의 객체

// 값을 변경할 HTML Form Contorl에 접근하여 value속성을 사용
document.폼이름.control명.value = 값;

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

    <input type="checkbox, radio">

//checked
document.폼이름.control명[인덱스].checked=true | false;
//selected
document.폼이름.control명[인덱스].selected=true | false;

 

 

JavaScript 이벤트처리

  - inline방식으로 onXxx속성을 사용하여 이벤트를 발생시키고 처리한다.
  - HTML Form Control을 이벤트에 등록하여 처리할 수 있는 방식

//HTML코드와 이벤트처리코드를 분리할 수 있다.

//익명함수(anonymous function) 사용
document.getElementById("아이디").onclick=function(){  이벤트처리코드 }
//             찾아낸 태그   태그의 이벤트속성

//기명함수(named function) 사용- 이벤트를 등록하는 방식
document.getElementById("아이디").addEventListener("이벤트 종류", 함수명 또는 무기명 함수)
//Javascript 함수는 함수가 데이터형처럼 사용된다.
//변수나 매개변수에 할당 가능( first class function )
//함수명을 넣을 때에는 ()를 사용하지 않는다.
//클릭 이벤트 onclick이지만 on을 뺀 이벤트 명인 click만 사용 가능

 

 

자바스크립트의 객체
  - window : 웹 브라우저의 정보, 하위 객체 사용, 생략 가능
  - document : HTML 문서에 접근할 수 있는 객체
  - location :  이동할 때 사용
  - history :  웹 브라우저의 방문 기록을 사용할 때
  - event :  이벤트 정보를 얻을 때