[JS] 학원 230223(목) 날짜(Date), setTimeout, HTML Form Control의 값얻기, confirm, location, replace

 * 날짜

 - Date클래스를 사용.

 - 접속자 컴퓨터의 날짜 정보가 얻어진다.( 모든 접속자가 동일한 날짜정보가 아닌 다른 날짜정보가 얻어 질 수 있다.)

 

사용법)

1. 객체생성) – 접속자 컴퓨터의 설정된 날짜정보가 얻어진다.

 var date=new Date();

2. 함수 호출)

 - 년도 구하기

 date.getFullYear();

 - 월 얻기 (컴퓨터의 월은 0월부터 시작)
 (date.getMonth()+1);

 - 일 얻기
 date.getDate();

 - 요일 얻기
 date.getDay();

 

 - 시간
 date.getHours();
 date.getMinutes();
 date.getSeconds();

 

---

 * 지정한 시간에 지정한 함수를 호출하는 함수

 

setTimeout( 호출할 함수명 , ms )

함수명() 을 사용하여 호출하는 것이 아님

 

 

---

 * HTML Form Control의 값 얻기

 - 사용자가 입력한 값에 대한 유효성 검증을 수행하기 위해.

 - id 속성을 사용, name속성 사용.

 

---

 * id속성 사용

 - HTML Form Control이 <form>에 자식 태그로 등록되지 않아도 접근하여 값을 얻을 수 있다.

 - 유일한 id를 사용하기 때문에 checkbox, radio의 확인된 값을 얻기 어렵다.

 - 반복코드가 많아진다.

 - 값을 얻는 것보다는 디자인을 변경할 때 주로 사용.

 

문법)

 1. Form Control에 접근.

  var obj=document.getElementById(“아이디”);

 2. 값을 얻는다 ( .value => 입력 값을 얻는 속성)

  var value=obj.value;

---

 * name속성으로 값 얻기

 <form> 태그가 반드시 필요.

 자식으로 정의된 HTML Form Control들의 값을 back-end 전송하는 일.

 

 - HTML Form Control이 <form>에 자식 태그로 등록되어야 접근하여 값을 얻을 수 있다.

 - name속성을 이용하기 때문에 checkbox, radio의 확인된 값을 얻기 쉽다.

 - 반복코드가 줄어든다.

 

문법)

window.document.폼이름.control명.value

 

window.document.폼이름.control명.value

<form name=“폼이름”>
	<input type=“text” name=“control명”/>
</form>

 

• 이미지는 value가 아닌 src속성으로 이미지의 경로를 얻는다.
• checkbox는 value속성이 없을 때 value를 가져오면 on이 들어온다. 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>

JS에서는 배열로 처리

var hobby=obj.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
 	}
 }

 

---

선택된 인덱스 얻기 : selectedIndex

 

function getSelected(){
	var obj=document.frm;
	//alert( obj.subject.value )
	//선택된 인덱스를 얻기 : seletedIndex
	if( obj.subject.selectedIndex != 0 ){
	//1.  select을 얻으면 배열로 옵션이 얻어와진다. 	
		for( var i = 0 ; i < obj.subject.length ; i++){
			// 2. 옵션 중에 선택된 옵션이 존재하는 지?
			if( obj.subject[i].selected ){
				//3. 값얻기
				alert( obj.subject[i].value );
				//4. 밖으로 
				break;
			}//end if
		}//end for
		
	}//end  if
}

 

---

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

 

 

 - 값 설정 ( value속성 )

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

 

 문법)

   값을 변경할 HTML Form Contorl에 접근하여 value속성을 사용.

   document.폼이름.control명.value=값;

 

 

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

 <input type=“checkbox, radio”>

 문법)

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

 

 <select>

 문법)

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

 

---