DOM은 Document Object Model의 약자로 자바스크립트를 사용해서 DOM으로 HTML를 조작하는 것이다.
웹페이지를 동적으로 움직이게 만들 수 있다.
HTML에 JavaScript를 적용하기 위해서는 <script> 태그를 이용합니다. 아래의 경우 HTML 파일과 같은 디렉토리에 존재하는 myScriptFile.js을 불러옵니다.
JavaScript
복사
<script src="myScriptFile.js"></script>
<script> 요소를 추가하는 두가지 대표적인 사례가 있다.
1. <head> 안쪽에 삽입하는 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- script 요소 삽입 위치 -->
<script src="myScriptFile.js"></script>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
</body>
</html>
2. <body> 끝나기 전에 삽입하는 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
<!-- script 요소 삽입 위치 -->
<script src="myScriptFile.js"></script>
</body>
</html>
JavaScript 파일은
# js 파일(page_4_js.js)
function tmp_func() {
document.getElementById("fun_1").innerHTML = "함수 실행됨";
};
function randoms() {
var num_1 = Math.random();
num_1 = Math.floor(num_1 * 10)
document.getElementById("fun_2").innerHTML = num_1;
};
//////////////////////////////////////////////////////getElementById 메서드를 이용해 연결해준다.
function rotto() {
var numbers = [];
for (var i=1; i <= 45; i++) {
numbers.push(i);
}
var picked_numbers =[];
for (var i=0; i<6; i++) {
var inx = Math.floor(Math.random() * numbers.length);
picked_numbers.push(numbers.splice(inx, 1));
}
picked_numbers.sort((a, b) => a - b);
document.getElementById("fun_3").innerHTML = picked_numbers;
};
[출처] [Web:JavaScript]JavaScript 외부 스크립트와 DOM|작성자 우선살고보자
CSS를 불러오는 법
# CSS
<link rel="stylesheet" href="파일 위치">
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/page_4_css.css">
<title>스크립트</title>
</head>
<body>
<h1 class="fun_" id="fun_1" onclick="num1();">1번 </h1>
<br>
<h1 class="fun_" id="fun_2" onclick="num2();">2번 </h1>
<br>
<h1 class="fun_" id="fun_3" onclick="num3();">3번 </h1>
<script src="파일이름.js"></script>
</body>
</html>위와 같이 각각 불러오는 코드를 삽입시켜 주면 연결이 된다.
또는 querySelector를 사용하는 방법이 있다.
(요즘에 쓰이는 방식이라고 한다.)
Ex)
querySelector에 '.tweet'을 첫 번째 인자로 넣으면, 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있습니다.
const oneTweet = document.querySelector('.tweet')
단, 여러개의 요소를 한 번에 가져오기 위해서는 querySelectorAll을 사용한다.
예시 자바스크립트
console.log("접속");
let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.
let btnAmericano = menus[0];
let btnCaffelatte = menus[1];
btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; // for 문으로도 충분히 구현할 수 있는 내용입니다.
function handleClick(e) {
// 아래의 빈칸(____)을 채우세요.
let currentMenu = e.target.textContent; // TODO
console.log(currentMenu + "를 클릭");
}
'JavaScript' 카테고리의 다른 글
| [중앙정보처리학원] JavaScript* 조건 연산자 조건문 조건조건 (0) | 2024.03.22 |
|---|---|
| [중앙정보처리학원] JavaScript* 변수와 상수 (0) | 2024.03.19 |
| [중앙정보처리학원] JavaScript* 연산자와 데이터 유형 (0) | 2024.03.02 |
| [중앙정보처리학원] JavaScript* Spread/rest 문법 (0) | 2024.02.29 |
| [중앙정보처리학원] JavaScript* 클로저 (Closure) (0) | 2024.02.29 |