parentElement

부모 요소가 무엇인지 반환해준다. 사용 예시 function deleteToDo(event) { const li = event.target.parentElement; li.remove(); } todo list에서 버튼을 누르면 생성된 리스트를 지워주는 기능이다. x버튼을 클릭하면 event를 얻는다. event는 target을 주고 그 target 은 button이다. 그리고 button의 부모에 접근할 수 있는데 그게 parentElement 이다. 내가 만든 코드에서 button의 부모는 li이기 때문에 결국 event.target.parentElement 는 li가 된다. 그 부모 요소인 li를 담은 변수li를 생성하고 그 li를 remove() 해주면 내가 클릭하는 button에 해당하는 요소를..

• format_list_bulleted 프론트엔드/Javascript
• · 2023. 10. 1.
• textsms

document.querySelector()

Document.querySelector() 는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환한다. 일치하는 요소가 없으면 null을 반환한다. 사용 예시 내가 만약 todo-form 이라는 form 태그 안에 있는 input을 반환하고 싶으면 const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); 이렇게 todo-form을 반환하는 변수인 toDoForm을 사용하여 만들 수도 있고 const toDoForm = document.getElementById("todo-form"); const toDoInput = document.query..

• format_list_bulleted 프론트엔드/Javascript
• · 2023. 10. 1.
• textsms

padStart, padEnd

문자열의 길이를 조정해 기존 문자열의 앞과 뒤에 원하는 문자를 붙일 수 있다. "1".padStart(2, "0") => "01" 하지만 숫자에는 사용할 수 없어서 숫자로 되어 있으면 문자열로 바꿔줘야 한다. // getHours()는 숫자형이라 padStart를 붙일 수 없다. const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); const seconds = String(date.getSeconds()).padStart(2, "0"); clock.innerText = `${hours}:${minutes}:${seconds}`;

• format_list_bulleted 프론트엔드/Javascript
• · 2023. 9. 29.
• textsms

Document.createElement()

HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환한다. const element = document.createElement(tagName); 사용 예시 // 랜덤으로 보여줄 이미지들의 배열 생성 const images = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"]; // Math.random()으로 무작위 숫자를 생성한다. (0이상 1미만의 숫자들이다.) // 무작위로 생성된 숫자에 images.length (이미지 배열의 길이)를 더하면 // 5.124341 과 같은 float 숫자가 생성된다. // 소수점이..

• format_list_bulleted 프론트엔드/Javascript
• · 2023. 9. 29.
• textsms

자바스크립트로 시계 만들기

// 00:00:00 이라고 적어 둔 h2태그를 clock 상수에 넣는다. const clock = document.querySelector("h2#clock"); // interval에서 실행 할 함수 function getClock() { const date = new Date(); // 시간을 매번 다시 얻어옴 // 만약 5시 6분 0초이면 5:6:0 이 아닌 05:06:00 이 되게 하기 위한 작업 // padStart()는 문자열에만 적용이 되기 때문에 String으로 문자화 시켜야한다. const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); c..

• format_list_bulleted 프론트엔드/Javascript
• · 2023. 9. 28.
• textsms

interval, timeout

interval ‘매번’ 일어나야 하는 무언가를 말한다. 예) ‘매 2초’ - 2초 마다 무언가를 함 사용 방법 setInterval(사용 할 function, 밀리 초) function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); timeout 설정해 놓은 시간이 지나면 function이 한 번 실행됨 사용 방법 setTimeout(사용 할 function, 밀리 초) function sayHello() { console.log("hello"); } setTimeout(sayHello, 5000);

• format_list_bulleted 프론트엔드/Javascript
• · 2023. 9. 28.
• textsms