○ 객체 (Object)
- 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어
- 객체: 데이터와 데이터를 처리하는 함수를 묶어 놓은 것
- 객체의 함수와 속성을 사용하는 형식
① 객체명.속성;
② 객체명.함수();
○ document 객체
- HTML페이지의 본문(<body>)을 가리키는 객체
- HTML 요소에 접근하고자 할 때, documnet.함수(); 또는 documnet.속성;
① documnet.write(출력할내용);
- HTML 본문에 괄호 안의 내용을 출력해 줌
document.write(123);
document.write("Korea");
document.write("<hr>"); // 자바스크립트에서 HTML tag사용시 문자열 처리해서 사용② document.getElementById("아이디") | ClassName("클래스명") | Name("네임값")
- HTML 본문에서 해당 아이디/클래스명/네임값에 접근
- 비교) jQuery 접근 : $("아이디")
<body>
<div id="demo"></div>
<script>
document.getElementById("demo").innerHTML="텍스트"; //id="demo"에 점근
//innerHTML="텍스트" : 해당 ID에 텍스트를 넣음
</script>
</body>
● PRACTICE 연습문제
Q) 이름, 나이, 키 값을 표작성을 해서 id=demo에 출력하시오
- 이름(name = "해리케인"), 나이(age = 28), 키(height = 188)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
#demo {position: absolute;
top: 30px;
left: 30px;
border: 2px solid crimson;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div id="demo"></div>
<script>
var name = "해리케인";
var age = 28;
var height = 188;
var result = ""
result = result + "<table border = '1'>"; // result = "" + "<table border = '1'>"
result = result + "<tr>";
result = result + " <th>이름</th>";
result = result + " <td>" + name + "</td>";
result = result + "</tr>";
result = result + "<tr>";
result = result + " <th>나이</th>";
result = result + " <td>" + '만' + age + '세' + "</td>";
result = result + "</tr>";
result = result + "<tr>";
result = result + " <th>키</th>";
result = result + " <td>" + height + 'cm' + "</td>";
result = result + "</tr>";
result = result + "</table>";
document.getElementById("demo").innerHTML=result;
</script>
</body>
</html>↓
'Frontend > JavaScript' 카테고리의 다른 글
| 06. JavaScript 연습문제 모음 (삼항연산자, 형변환 등) (0) | 2022.04.26 |
|---|---|
| 05. JavaScript 형변환(Type Conversion) (0) | 2022.04.26 |
| 03. JavaScript 변수 (Variable: var, let, const) (0) | 2022.04.25 |
| 02. JavaScript 연산자 (operator) (0) | 2022.04.25 |
| 01.JavaScript 기본 문법, 자료형 (0) | 2022.04.25 |
댓글