setTimeout
setTimeout(함수, 시간) : 지정한 시간이 흐른 뒤 함수를 1회 실행 ( 1000 => 1초 )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
const test = () => {
// alert("test 호출");
};
/*
window.onload = () => {
document.write("처음 실행<br>");
setTimeout(test, 2000);
// test 함수를 2초 후에 실행
document.write("2초 대기중....<br>");
};
*/
let e;
const digClock = () => {
let today = new Date();
let time = today.getMonth() + 1 + "월";
time += today.getDate() + "일";
time += today.getHours() + "시";
time += today.getMinutes() + "분";
time += today.getSeconds() + "초";
document.getElementById("clock").innerHTML = time;
e = setTimeout(digClock, 1000);
};
const end = () => {
clearTimeout(e);
};
</script>
<div id="clock"></div>
<button onclick="digClock()">시작</button>
<button onclick="end()">종료</button>
</body>
</html>
setInterval
setInterval(함수, 시간) : 지정한 시간이 흐를때마다 함수 실행을 반복 ( 1000 => 1초 )
clearInterval(Interval로 설정한 변수명) : 반복중인 Interval 을 종료
toLocaleString() : 기본 내장함수인 Date() 함수의 기본 메소드로 , (년.월.일 오후/오전 시간.분.초) 포멧으로 시간을 나타낸다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
let myVar;
const start = () => {
myVar = setInterval(myTimer, 1000);
};
const myTimer = () => {
let d = new Date();
document.getElementById("time").innerHTML = d.toLocaleString();
};
const stop = () => {
clearInterval(myVar);
};
</script>
<p id="time"></p>
<button onclick="start()">start</button>
<button onclick="stop()">stop</button>
</body>
</html>
innerHTML : 내부의 모든 HTML 코드를 변경 ( 기존에 자식으로 존재하던 요소를 삭제 후 대체 )
insertAdjacentHTML("afterbegin", msg) : 자식 코드의 가장 앞에 자식 HTML 코드를 추가
insertAdjacentHTML("beforeend", msg) : 자식 코드의 가장 뒤에 자식 HTML 코드를 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
var cnt = 0;
const inner = () => {
cnt++;
let msg = `내용 : ${cnt}<br>`;
let txt = document.getElementById("txt");
txt.innerHTML = msg;
// innerHTML : 해당 내부의 모든 코드를 변경
// txt.insertAdjacentHTML("afterbegin", msg);
// afterbegin : 앞에 내용 추가
// txt.insertAdjacentHTML("beforeend", msg);
// beforeend : 뒤에 내용 추가
};
</script>
<div id="txt">안녕하세요</div>
<button onclick="inner()">클릭</button>
</body>
</html>
createElement() : 요소를 생성하는 메소드, 아래 코드에선 HTML 의 table 요소를 생성
remove() : 해당하는 요소 자체를 삭제, 아래 코드에선 HTML 요소를 삭제하는데 사용
appendChild() : 자식 요소를 생성, 아래 코드에선 table 요소의 자식 요소로 tr, td 를 생성하는데 사용
removeChild(삭제할 요소의 index) : 자식 요소 중 해당 index 의 자식 요소를 삭제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
table {
border: 1px solid black;
}
table tr {
border: 1px solid black;
}
table tr td {
border: 1px solid black;
}
</style>
</head>
<body>
<script>
let img;
function add() {
img = document.createElement("img");
// createElement : 태그를 만들어줌
console.log(img);
img.src = "image.png";
img.setAttribute("width", "100");
img.setAttribute("style", "height:100px; border:1px solid");
document.getElementById("test").appendChild(img);
}
function addTB() {
let data = [
{ id: "aaa", name: "홍길동" },
{ id: "bbb", name: "김개똥" },
];
let table = document.createElement("table");
data.forEach((value) => {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML = value.id;
tr.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML = value.name;
tr.appendChild(td2);
table.appendChild(tr);
});
document.getElementById("test").appendChild(table);
}
function remove() {
let items = document.getElementById("test");
// document.getElementById("test").remove();
// items.remove();
// remove는 test를 id로 가지고 있는 p태그 자체를 삭제
// items.removeChild(items.childNodes[0]);
// items 의 자식을 삭제 ( 첫번째 추가된 순으로 )
items.removeChild(items.childNodes[items.childNodes.length - 1]);
// items 의 자식을 삭제 ( 제일 늦게 추가된 순으로 )
}
</script>
<p id="test"></p>
<a href="#" onclick="addTB()">테이블 추가</a>
<b onclick="add()">add 클릭</b>
<b onclick="remove()">이미지 삭제</b>
</body>
</html>728x90
'FE > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트로 비밀번호 유효성 검사 (0) | 2024.03.27 |
|---|---|
| [JavaScript] js 파일로 자바스크립트 코드 관리 (0) | 2024.03.27 |
| [JavaScript] 배열 (0) | 2024.03.26 |
| [JavaScript] 이벤트 ( 마우스 동작, 키보드 동작 시 함수 호출 ) (0) | 2024.03.25 |
| [JavaScript] 함수 ( 익명 함수, 즉시 실행 함수 ) (0) | 2024.03.25 |
