[22.12.08] 33일차 [프론트엔드] 자바스크립트 document 내장객체, screen 내장객체, 문서객체모델

W·2022년 12월 8일
프론트엔드
0

국비

목록 보기
45/119

window.document 내장객체

주제 웹브라우저 html 문서 기본틀 정보를 저장하는 내장객체
document.멤버변수, document.메서드() 호출해서 사용

  • document.title => 문서 제목정보 저장
  • document.bgColor => 문서 배경색을 저장
  • document.writeln() => html문서에 내용 출격
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2/test4.html</title>
<script type="text/javascript">
function fun1() {
	alert(document.title);
}

</script>
</head>
<body>
<input type="button" value="문서제목출력" onclick="fun1()">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2/test4.html</title>
<script type="text/javascript">
function fun2() {
	// 문서 제목 변경 document.title변수에 값을 변경 => "문서제목"
	document.title = "문서제목";
}

</script>
</head>
<body>

<input type="button" value="문서제목변경" onclick="fun2()">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2/test4.html</title>
<script type="text/javascript">

function fun3() {
	document.bgColor = "yellow";
}
</script>
</head>
<body>

<input type="button" value="배경색변경" onclick="fun3()">

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2/test4.html</title>
<script type="text/javascript">

function fun4(a) {
	document.bgColor = a;
}
</script>
</head>
<body>
<!-- <input type="button" value="문서제목출력" onclick="fun1()"> -->
<!-- <input type="button" value="문서제목변경" onclick="fun2()"> -->
<!-- <input type="button" value="배경색변경" onclick="fun4()"> -->
<input type="radio" name="ra" onclick="fun4('green')"> green 색
<input type="radio" name="ra" onclick="fun4('skyblue')"> skyblue 색
 <input type="radio" name="ra" onclick="fun4('pink')"> pink 색
</body>
</html>

radio 버튼 체크하면 배경색 바뀜

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2/test4.html</title>
<script type="text/javascript">
document.writeln("문서 내 출력")
</script>
</head>
<body>

</body>
</html>

window.screen 내장객체

화면 정보를 저장하는 내장객체

  • screen.availWidth
  • screen.availHeight
  • screen.orinteation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2/test4.html</title>
<script type="text/javascript">

function fun5() {
	alert(screen.availWidth); // 1920
	alert(screen.availHeight); // 1040
	alert(screen.orientation); // 방향
	alert(screen.width); // 1920
	alert(screen.height); // 1080 작업표시줄 포함한 크기
}
</script>
</head>
<body>
<input type="button" value="화면정보출력" onclick="fun5()">
</body>
</html>

문서객체모델(DOM : Document Object Model)

자바스크립트 이용하여 웹문서에 접근, 제어할 수 있는 객체를 사용해 웹문서를 체계적으로 정리하는 방법

  • HTML DOM => document 객체 image, form 객체
  • 브라우저 내장객체 이용하는 방법과 문서객체모델 이용하는 방법 2가지 있음.

image

브라우저 내장객체 이용하기

window.document.이미지이름 내장객체

웹브라우저 이미지정보 저장하는 내장객체

  • document.이미지이름/멤버변수, document.이미지이름.메서드() 호출해서 사용
  • document.이미지이름.src => 이미지 소스파일정보 저장
  • document.이미지이름.width => 이미지 너비 저장
  • document.이미지이름.height => 이미지 높이 저장
  • document.이미지이름.border => 이미지 테두리선 저장
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2/test5.html</title>
<script type="text/javascript">

function fun1() {
	alert(document.img1.src);
	alert(document.img1.width);
	alert(document.img1.height);
	alert(document.img1.border);
	
}

</script>
</head>
<body>
<img src="../html1/1.jpg" name="img1" width="200" height="300" border="1">
<input type="button" value="이미지정보확인" onclick="fun1()">
</body>
</html>

src

width

height

border

  • 이미지 변경
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2/test5.html</title>
<script type="text/javascript">


function fun2() {
	document.img1.src="../html1/2.jpg";
  	document.img1.width = 250;
	document.img1.height = 350;
	document.img1.border = 2;
}

</script>
</head>
<body>
<img src="../html1/1.jpg" name="img1" width="200" height="300" border="1">
<input type="button" value="이미지변경" onclick="fun2()">

</body>
</html>

버튼 클릭 후 이미지 변경됨

  • 이미지 클릭으로 이미지 변경
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2/test5.html</title>
<script type="text/javascript">

function fun3() {
	// img2 이미지를 src값 ../html1/3.jpg변경
	// 테두리선 5 변경
	document.img2.src="../html1/3.jpg";
	documnet.img2.border=5;
}

</script>
</head>
<body>
<img src="../html1/2.jpg" name="img2" onclick="fun3()">

</body>
</html>

이미지 클릭 후 이미지 변경됨

  • 마우스 오버, 아웃 이미지 변경
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2/test5.html</title>
<script type="text/javascript">

function fun4() {
	// img3 이미지를 src값 ../html1/4.jpg변경
	document.img3.src="../html1/4.jpg";

}
function fun5() {
	document.img3.src="../html1/3.jpg";
}

</script>
</head>
<body>

<img src="../html1/3.jpg" name="img3"  onmouseover="fun4()" onmouseout="fun5()>

</body>
</html>

마우스 오버 후 이미지 변경됨

마우스 떼면 다시 원래 이미지로 변경됨

DOM 이용하기

id선택자로 접근하는 getElementById() 메서드

  • 태그(요소명).getElementById(표시이름)

  • 이미지 정보 확인
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2/test5.html</title>
<script type="text/javascript">

function fun1() {
	alert(document.getElementById("idimg1").src);
}

</script>
</head>
<body>
<img src="../html1/1.jpg" name="img1" width="200" height="300" border="1" id="idimg1">
<input type="button" value="이미지정보확인" onclick="fun1()">
</body>
</html>
alert(document.getElementById("idimg1").src);
==
alert(document.querySelector("#idimg2").src);
  • 버튼 이용 이미지변경
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2/test5.html</title>
<script type="text/javascript">

function fun3() {
document.getElementById("idimg2").src="../html1/3.jpg";
  document.getElementById("idimg2").border=5;
}

</script>
</head>
<body>
<img src="../html1/2.jpg" name="img2"  onclick="fun3()" id="idimg2">
</body>
</html>

form

브라우저 내장객체 이용하기

window.document.폼이름 내장객체

주제 폼정보 저장하는 내장객체

  • document.폼이름/멤버변수, document.폼이름.메서드() 호출해서 사용
  • document.폼이름.action => 폼 연결페이지 정보 저장
  • document.폼이름.method => 폼 데이터 전송 방식 저장
  • document.폼이름.submit() => 폼 데이터를 서버에 전달하고 연결페이지 이동기능
  • document.폼이름.reset() => 폼화면 초기화 기능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2/test6.html</title>
<script type="text/javascript">

function fun1() {
	alert(document.fr.action);
	alert(document.fr.method);
}

</script>
</head>
<body>
<form action="test1.html" method="get" name="fr" id="idfr">
텍스트 상자 : <input type="text" name="tx">
<input type="submit" value="전송">
<input type="button" value="폼정보" onclick="fun1()">
</form>
</body>
</html>


  • 일반 버튼에 전송, 초기화 기능 넣기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2/test6.html</title>
<script type="text/javascript">


function fun2() {
	document.fr.submit();
}

function fun3() {
	document.fr.reset();
}

</script>
</head>
<body>

<form action="test1.html" method="get" name="fr" id="idfr">
텍스트 상자 : <input type="text" name="tx">
<input type="button" value="전송버튼" onclick="fun2()">
<input type="button" value="초기화버튼" onclick="fun3()">
</form>
</body>
</html>
profile
W
이전 포스트

[22.12.06] 32일차 [프론트엔드] 자바스크립트 이벤트, window 내장객체, location 내장객체, history 내장객체,

다음 포스트

[22.12.08] 33일차 [백엔드] Java 생성자

0개의 댓글