목록코딩/2023 JavaScript DOM (50)
라라리라
DOCTYPE html> 틱택토 연습 2 table, td, tr{ border-collapse: collapse; margin: 0 auto; } td { width: 50px; height: 50px; text-align: center; line-height: 50px; border: 1px solid black; cursor: pointer; } 틱택토 게임 let $body = document.body; let $table = document.createElement(`table`); let $tr = document.createElement(`tr`); let $td = document.createElement(`td`); let $List = []; let dataList = []; let w..
DOCTYPE html> Document table, tr, td { border-collapse: collapse; margin: 0 auto; } td { text-align: center; border: 1px solid black; width: 50px; height: 50px; } let size = 3; let $body = document.body; let $table = document.createElement("table"); let $tdList = []; let dataList = []; // player1(1), player2(2) let turn = true; // player1(true), player2(false) let win = 0; // player1(1), player2..
_07_노드1차원배열_그리기_이벤트적용.html DOCTYPE html> Document td { border: 1px solid black; width: 40px; height: 40px; text-align: center; /* 가로 중앙정렬 */ } // tdList = [td,td,td,td,td] let clickEvent = function(e) { for(let i=0; i HTML 삽입 미리보기할 수 없는 소스 _08_노드여러개_그리기2_이벤트적용.html DOCTYPE html> Document td { border: 1px solid black; width: 40px; height: 40px; text-align: center; /* 가로 중앙정렬 */ } let num = 1; let..
_00_this개념1.html DOCTYPE html> Document onClick의 this addEventListener의 this function btn1Function() { alert(this); } document.querySelector("#btn2").addEventListener("click", btn2Function); function btn2Function() { alert(this); } HTML 삽입 미리보기할 수 없는 소스 _00_this개념2.html DOCTYPE html> Document onClick의 this addEventListener의 this1 addEventListener의 this2 // onclick의 경우 this를 인자로 전달받아 해결 function ..
_0502_timeout1.html DOCTYPE html> Document 일정 시간 간격으로 한번만 값 증감시키기 콘솔 패널을 열어 확인하세요. let num = 0; function addNumber(){ num += 1; console.log("num: " + num); } let auto = setTimeout(addNumber, 3000);
_0501_setInterval1.html DOCTYPE html> Document 일정 시간 간격으로 값 증감시키기 증가 정지 let num = 0; function addNumber(){ num += 1; console.log("num: " + num); } // setInterval(함수(){}, 밀리세컨드) // 해당 시간간격만큼 해당 함수를 호출함(애니메이션) let auto = setInterval(addNumber, 100); // 0.1초 간격으로 addNumber함수 호출
_0407_문자열로테이블생성1.html DOCTYPE html> Document let str = ""; str += ""; str += "123"; str += ""; str += ""; str += "123"; str += ""; str += ""; str += "123"; str += ""; str += ""; document.write(str); HTML 삽입 미리보기할 수 없는 소스 _0408_문자열로테이블생성2.html DOCTYPE html> Document document.write("구구단표"); document.write(""); for (let i = 1; i HTML 삽입 미리보기할 수 없는 소스 _0409_문자열로스타일생성1.html DOCTYPE html> Document .bl..
_0401_추가_appendChild.html DOCTYPE html> Document 과일 목록 let parent = document.querySelector("#list"); let ul = document.createElement("ul"); parent.appendChild(ul); let li1 = document.createElement("li"); li1.innerText = "사과"; ul.appendChild(li1); let li2 = document.createElement("li"); li2.innerText = "바나나"; ul.appendChild(li2); let li3 = document.createElement("li"); li3.innerText = "딸기"; ul.ap..