HTML (루트)
|
____|_____
| | |
TITLE HEAD BODY
|
__|______
| |
BUTTON IMAGE
JavaScript는 이 DOM 트리를 조작하여 웹 페이지의 내용, 구조, 스타일을 동적으로 변경할 수 있습니다.
예를 들어, JavaScript를 사용하여 새로운 노드를 추가하거나, 기존 노드를 수정 또는 삭제할 수 있습니다.
이 트리 구조 덕분에 웹 브라우저는 HTML 문서를 효율적으로 파싱하고 렌더링할 수 있으며, 개발자들은 문서의 특정 부분에 쉽게 접근하고 조작할 수 있습니다.
DOM은 트리구조라고 외우면 됩니다.
특징
부모 자식 형제 구조로 구성되어있습니다.
부모 자식 형제 관계를 구현할 수 있게 해주는 자료구조는 연결 리스트(Linked List)입니다.
그래서 리스트내에 노드(요소)들은 각자 *next로 다음 연결할 다른 노드를 무조건 지정해야합니다.
포인터 변수로 구현했다고 자료구조 시간에 배웠는데
*next
*parent
*child
이런식으로 부모 자식 형제 관계에서 서로 노드를 지정해서 연결 리스트 같지만 사실상 트리랑 연결됩니다.
DOM 트리에서는 여기에 IMAGE 태그 같은 노드들은 저 위에 노드 베이스에
id =
src =
이런식으로 지정해서 데이터(자료)를 담을 수 있습니다.
document.getElementById()
<!DOCTYPE html>
<html>
<body>
<p>마우스를 이미지 위로 올리면 이미지가 커집니다.</p>
<img onmouseover="this.style.width='200px'" onmouseout="this.style.width='100px'"
src="dog.jpg" width="100px">
</body>
</html>document.getElementById()은 HTML 문서 내에서 주어진 문자열과 값이 일치하는 id 속성을 가진 요소 객체를 반환합니다.
일치하는 요소가 없으면 null을 반환합니다.
HTML에서 id 속성의 값은 고유하고 유일해야 하지만,
동일한 id 속성의 값을 두 개 이상 가진 요소가 존재하면 DOM 트리 순서로 첫 번째 요소 객체만 반환합니다.
에러는 발생하지 않습니다.
마우스 올려져있는지 감지
<!DOCTYPE html>
<html>
<body>
<p>마우스를 이미지 위로 올리면 이미지가 커집니다.</p>
<img onmouseover="this.style.width='200px'" onmouseout="this.style.width='100px'"
src="dog.jpg" width="100px">
</body>
</html>img 태그 안에 this. 부분은 해당 태그와 가장 가까운 걸 찾습니다.
# 내부 자바스크립트
<!DOCTYPE HTML>
<html>
<head>
<title>My First Javascript </title>
<script>
document.write("Hello World!");
</script>
</head>
<body></body>
</html>
# 외부 자바스크립트 myscript.js
<!DOCTYPE html>
<html>
<head>
<script src="myscript.js"></script>
</head>
<body>
</body>
</html>myscript.js 내부 자바스크립트 ↓
document.write("Hello World!");
변수
var과 let이 있는데
var QWER
let QWER
이런식으로 선언합니다.
var QWER
let QWER
은 괜찮습니다.
let QWER
var QWER
은 에러납니다.
왜냐면 var은 글로벌 변수라고 보면되고
let을 먼저 선언한건 지역 변수로 쓰겠다는 말입니다.
예전에 var만 썼을 땐
var QWER
var QWER
이렇게 선언했을 때 중복 오류가 안납니다.
이걸 막기 위해 let으로 지역변수로 선언하는 것입니다.
글로벌 var 변수랑 구분 짓기 위해 내 지역에선 let으로 선언한것입니다.
그리고 let은 변하지 않는 변수, 즉 상수로 선언 가능하기 때문에
const QWER 이렇게 선언 가능합니다. (let 키워드 안붙여도됨)
literal = 상수
문자 그대로의 변하지 않는 수입니다.
변수로 코드 삽입
<!DOCTYPE html>
<html>
<body>
<h1 id="test"></h1>
<script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("test").innerHTML = z;
</script>
</body>
</html>.innerHTML로 id가 "test"인 h1에 z 값이 test 내부 html에 추가됩니다.
z 뿐 아니라 아예 <img src = ""> 이런 태그를 넣어도 추가됩니다.
이런식으로 innerHTML로 속성 정보를 추가 할 수 있습니다.
innerHTML은 아래에 설명하겠습니다.
prompt() 함수 (중요 -> 암기)
사용자가 입력할 수 있는 창을 띄웁니다.
<script>
var age = prompt("나이를 입력하세요", "만나이로 입력합니다.");
</script>
confirm() 함수 (중요 -> 암기)
확인이나 취소가 가능한 창을 띄웁니다.
사용자가 확인하면 true 값, 취소면 false값이 나옵니다.
<script>
let user = confirm("confirm()은 사용자의 답변을 전달합니다.");
</script>
.innerHTML
.innerHTML 속성은
HTML 요소의 내부 HTML 콘텐츠를 가져오거나 설정합니다.
innerHTML 속성은 특정 요소 내에 단순 콘텐츠를 동적으로 집어넣는 경우에 편리하고 유용합니다.
위에 사진에서는 document.getElementById("test")이 HTML 문서에서 id="test"인 요소(여기서는 <h2> 태그)를 찾습니다.
.innerHTML을 사용하여 이 요소의 내용을 설정합니다.
설정되는 내용은 "Welcome " 문자열과 name 변수의 값을 연결한 것입니다.
따라서 사용자가 이름을 입력하면, 예를 들어 "John"이라고 입력했다면, <h2> 태그의 내용이 "Welcome John"으로 변경됩니다.
innerHTML은 다 괜찮은데 보안상의 이유로 사용자 입력을 직접 innerHTML에 삽입할 때는 주의가 필요합니다.
PraseInt
Parse + 자료형 이런식으로 호출시 문자열과 데이터가 나옵니다.
<script>
let x, y;
let input;
input = prompt("정수를 입력하시오", "정수로");
x = parseInt(input);
input = prompt("정수를 입력하시오", "정수로");
y = parseInt(input);
document.write(x+y + "<br>");
</script>
트리구조
아래 코드에서 func()는 루트노드의 아래 자식 노드에 옆에 스크립트가 달려 있다고 보면됩니다.
<!DOCTYPE html>
<html>
<body>
<h1 id="test">This is a heading.</h1>
<script>
function func() {
document.write("페이지가 적재된 후에 write()를 사용하면 다시 씌여집니다.");
}
</script>
<button type="button" onclick="func()">클릭하세요!</button>
</body>
</html>
html
└── body
├── h1 (id="test")
├── script
│ └── function func()
└── button이런식으로 되어있습니다.
남은 시간 구하는 코드
<!DOCTYPE html>
<body>
<h2 id='remaining'></h2>
<script>
function datesUntilXmas() {
let now = new Date();
let newYear = new Date('December 25, ' + (now.getFullYear()));
let diff = newYear - now;
let milliseconds = Math.floor(diff % 1000);
diff = diff / 1000;
let seconds = Math.floor(diff % 60);
diff = diff / 60;
let minutes = Math.floor(diff % 60);
diff = diff / 60;
let hours = Math.floor(diff % 24);
diff = diff / 24;
let days = Math.floor(diff);
let outStr = '금년 크리스마스까지 ' + days + '일, ' + hours + '시간, '
+ minutes;
outStr += '분, ' + seconds + '초' + ' 남았습니다.';
document.getElementById('remaining').innerHTML = outStr;
// 1초가 지나면 다시 함수를 호출한다.
setTimeout("datesUntilXmas()", 1000);
}
// 타이머를 시작한다.
datesUntilXmas();
</script>
</body>
</html>new Date() -> 지금 시간대 가져와서 newYear에 할당
new Date(시간대) -> 시간대에 해당하는 데이터 객체를 newYear에 할당
new Date("시간" + (now.getFullYear()))
컴퓨터는 Unix Time을 기준으로 1970년 1월 1일 0시 0분 0초를 기준으로 시간을 구합니다.
이걸 Epoh Time 기준 시각이라고 하고 이걸 기준으로 현재 시간 구하는 방식인데
그래서 getFullYear()을 통해 1000~9999년 사이의 시간에서 현재 년도를 반환합니다.
클래스는 그냥 정보들을 명세하는 모음이고 이걸 메모리에 올려야만
클래스 내부에 선언해둔 속성들의 값을 바꾸거나 사칙연산 같은걸 할 수 있습니다.
메모리에 올리기 위해선 객체를 생성해야하는데 이 때 new 키워드를 쓰는 것입니다.
이렇게 생성한 now 객체와 newYear 객체를 서로 연산해서 나온 시간 차이 Date 값이
let diff로 선언과 동시에 연산되어 할당된다.
이 diff를 초 단위로 바꾸고 123456초 67밀리초와 같은 값을 각각 단위로 구합니다.
밀리세컨드는 1 / 1000 초 단위입니다.
그럼 밀리세컨드 값만 얻고 싶으면 diff % 1000 해서 나머지 부분만 떼서 할당하면 됩니다.
let miliseconds = 1 % 1000
diff = diff / 1000
해서 diff에는 몫 부분이 들어가서 이미 구한 밀리세컨드 부분을 떼서 다음 부분을 구합시다.
예를 들어 121초 = 2분 1초
121 / 60 = 2
121 % 60 = 1
이렇게 구분할 수 있는것입니다.
diff는 구분하고 나머지 부분이 단위별로 저장되고 분리되서 계속 저장이 되어 다음 연산에 사용됩니다.
'그냥 개발글' 카테고리의 다른 글
| Cursor로 5분만에 프로젝트 분석하기 (0) | 2024.10.15 |
|---|---|
| Cursor IDE 기본 사용 방법 + 꿀팁 모음 (2) | 2024.10.15 |
| 크롬 이전 버전 UI로 되돌리는 법 (1) | 2023.10.29 |
| 한글 모든 글자 모음_한글2350자+자음+모음+영문자+특수기호 (0) | 2023.08.04 |