1. 객체? 자바에서 들어봤는데?
지금까지 자바스크립트를 쓰면서 꼭 document.write()를 쓰고 있다.
이 말이 무슨 말일까?
자바스크립트에서는 [ 객체명.멤버함수 또는 변수 ] 의 형태로 명령어를 작성한다.
즉, document는 하나의 객체이다.
객체(object)란 하나의 독립된 존재를 말한다.
document 객체는 html 페이지의 <body>를 가리키기로 약속된 객체이다.
write는 출력하라는 뜻의 함수이다.
그래서 이 둘이 합쳐진 [ document.write( ) ] 는 'write 뒤에 들어간 소괄호 속 값을 html 문서의 <body> 본문에 출력하라'라는 뜻이다.
2. 객체와 데이터의 가공
데이터의 값은 객체와 멤버함수에 따라 계속 달라진다.
다양한 방식으로 적용이 될 수 있고 그 활용도 또한 무궁무진하기에 모든 개념을 다 정리하긴 어렵지만,
가장 잘 잡고 가야하는 부분이 있다.
1) 데이터형이 통일되어야 한다
아래의 코드를 봐보자.
document.write(3+5);
document.write(3+"5");1행과 2행의 값은 서로 다르다.
1행의 값은 8
2행의 값은 35
로 나오기 때문이다.
왜 다를까?
1행의 3+5는 둘 다 숫자형으로 인식되어서 자바 스크립트에서 +를 더하기로 사용하였다.
하지만 2행의 3+"5"는 숫자형과 문자형으로 인식되기에 자바 스크립트에서 3 뒤에 5를 붙인 것이다(삼십오가 아니다).
이처럼 값들의 데이터형을 꼭 유의하며 코딩을 진행해야한다.
2) 값은 없는 것도 값이고, 언제나 변할 수 있다. 심지어 자기 자신의 값도!
이번에도 아래의 코드를 확인해보자.
let str="";
str=str+"ONE"
document.write(str);
document.write("<hr>");
str=str+"TWO";
document.write(str);
document.write("<hr>");
처음에 let을 사용하여 str 이라는 녀석의 값을 텅빈, 아무것도 없는 것으로 주었다.
이 때 그 아래에 str의 값에 "ONE"이라는 문자를 더했다.
어떻게 될까?
결과 값으로 ONE이 출력된다.
str의 값이 바뀐 것이다.
* 여기서 주의해야할 것은 let이 값을 선언하면 값이 바뀌지 않는다고 이전 게시글에서 명시했는데, 이 경우에 str의 값을 새로 선언한 것이 아니라 str이라는 요소 자체의 값이 바뀐 것이기에 let은 전혀 영향을 받지 않는다. str이 상수가 아니라 변수이기 때문이다.
아래의 코드까지 다 적용을 하면 str은 [ ONETWO ] 로 출력된다.
3) 본문 <body> 에 있는 id 속성 접근하기
<script> 안에서 <body> 에 있는 id 속성에 접근하는 방법으로는 두 가지가 있다.
- 순수 JavaScript에서 접근하기
: document.getElementById("demo")
: document.getElementById("demo").innerHTML="아이티윌"
- jQuery로 접근하기
: $("#demo")
: &("#demo").val("아이티윌")
3. 연습해보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>15_document.html</title>
<style>
#demo{
position: absolute;
right: 0;
bottom: 0;
background-color: aqua;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div id="demo"></div>
<script>
name="김연아";
age=30;
height=165.7;
let result=""; // 최종 결과값
result=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 + "</td>";
result=result + "</tr>";
result=result + "</table>";
document.getElementById("demo").innerHTML=result
</script>
</body>
</html>'⁂ Java Script > : 기본 익히기' 카테고리의 다른 글
| [JS] #2-2 형 변환(Type Conversion) (0) | 2022.08.04 |
|---|---|
| [JS] #2-1 연산자(Operator) (0) | 2022.08.03 |
| [JS] #1-3 상수와 변수 (0) | 2022.08.03 |
| [JS] #1-2 Data(데이터) (0) | 2022.08.03 |
| [JS] #1-1 Java Script에 발을 내딛다 (0) | 2022.08.03 |