ITWILL : 브라우저객체모델안의 Document객체 (bgColor와 fgColor사용, img태그에 접근하여 속성 사용, 랜덤 img 출력하기)

💡 핵심 요약 (TL;DR)

ITWILL : 브라우저객체모델안의 Document객체 (bgColor와 fgColor사용, img태그에 접근하여 속성 사용, 랜덤 img 출력하기)의 동작 원리를 이해하고 실제 프로젝트에 적용하기 위한 실무 가이드다. 위에서 만든 버튼태그를 눌릴때마다 속성을 알아보는 방법이다.

ITWILL학원 : 9강 JS기초 BY 정규태강사

1. Document 객체

해당 html문서를 객체로 표시한 것(객체화)이 여기서 말하는 document이다.

2. Document 객체 : bgColor와 fgColor사용

• document.bgColor=”” ; 배경색상을 변경함
• document.fgColor=”” ; 글자색상을 변경함

위를 활용하여 체크박스를 틱하고 틱을 해제함으로써 배경색과 글자색이 바뀌는 함수를 만들어보자.

<input type="checkbox" onclick="checkf1(this);"> 체크박스 온오프로 핑크테마<br>

function checkf1(obj){
	if(obj.checked){
		document.bgColor= '#ffbdbd';
		document.fgColor= 'white';
	}else{
		document.bgColor= 'white';
		document.fgColor= 'black';
	}
}

3. Document 객체 : img태그에 접근하여 속성 사용

img태그에 접속하여 속성을 이용해보자

• document.images[0].name : 이미지태그 네임을 모를 경우 인덱스활용해서 name불러옥;

• document.img1.name : 이미지태그 네임을 알경우 name불러오기

• document.img1.src : 이미지태그 네임을 알경우

먼저 이미지태그를 만들어보자

<img src="1.jpg" name="img1">
<input type="button" value="이미지속성정보" onclick="fun1()"><br>

그리고 이 이미지태그의 속성을 알아보자
위에서 만든 버튼태그를 눌릴때마다 속성을 알아보는 방법이다.

function fun1(){
	alert("너의 이름은? "+document.images[0].name); 
	alert("너의 이름은? "+document.img1.name) 
	alert("너의 주소는? "+document.img1.src) 

}

//출력값은
img1
img1
file:///D:/workspace_jsp7/JavaScript/WebContent/JS3/2.jpg

4. Document 객체 : 랜덤 img 출력하기

1부터 6까지 총 6개의 이미지를 랜덤하게 가져와서 이미지태그에 보더, 가로,세로 크기를 변경하는 함수를 만들어 보자

첫번째는 랜덤함수를 이용하는 방법이다

<img src="1.jpg" name="img1" onmouseover="changeImg()" onmouseout="resetImg()"><br>

function changeImg(){ 

	let randomNum = Math.floor(Math.random()*6 + 1); //1~6까지
	document.img1.src = randomNum+".jpg" //1~6까지 

	console.log(randomNum)

	document.images[0].border = 2;
	document.images[0].width = 200;
	document.images[0].height = 150;

}

function resetImg(){
	document.img1.src = "1.jpg"
	document.images[0].border = 0;
	document.images[0].width = 80;
	document.images[0].height = 60;
}

두번째 방법은 배열이용하는 방법이다
전자보다 더 많이 사용한다

위와의 차이점은 두가지이다.

1. imgArr이라는 배열안에 이미지를 담았다
2. randomNum만들때 배열은 0부터 시작이고 이미지도 0부터 시작이므로 +1을 할 필요가 없다.

<img src="1.jpg" name="img1" onmouseover="changeImg()" onmouseout="resetImg()"><br>

let imgArr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"] //0~5번까지밖에없다

function changeImg(){ 

	let randomNum = Math.floor(Math.random()*6)//0~5까지
	document.img1.src = imgArr[randomNum] //0~5까지
	
	console.log(randomNum)

	document.images[0].border = 2;
	document.images[0].width = 200;
	document.images[0].height = 150;

}

function resetImg(){
	document.img1.src = "1.jpg"
	document.images[0].border = 0;
	document.images[0].width = 80;
	document.images[0].height = 60;
}

#TILITWILL(JAVA)