어쨌든 공부하는 블로그

Math // 0부터 1 사이의 무작위 값을 반환하는 함수 const random = Math.random(); // 반올림 함수 const number = Math.round(숫자); // 올림 함수 const number = Math.ceil(숫자); // 내림 함수 const number = Math.floor(숫자); // 0부터 9 사이의 무작위 값을 반환하는 함수 const random = Math.floor(Math.random() * 10); 새 HTML 요소 만들기 // 지정한 태그를 가진 새 HTML Element 만들기 const bgImage = document.createElement("태그"); // HTML 문서 내 body에 자식(가장 뒤에)으로 element 삽입하기 doc..

Tip. 기능별로 자바스크립트 파일을 분리해서 만들어주면 편하다 Interval setInterval(함수명, 밀리초); // ex. setInterval(sayHello, 5000); ms 기준(1000ms = 1초)으로 지정한 밀리초마다 반복해서 해당 함수를 실행시키는 함수 Timeout setTimeout(함수명, 밀리초); 해당 함수가 실행되고 지정한 밀리초가 지난 뒤에 해당 함수를 한 번 실행시키는 함수 Date const date = new Date(); const hours = date.getHours(); const minutes = date.getMinutes(); const seconds = date.getSeconds(); 새로운 Date 객체를 만든 후, get~~ 함수를 이용해서 ..

Tip. 일반적으로 string만 포함된 변수나 중요한 정보를 담은 게 아닌 경우 변수명을 전부 대문자로 표기 Element 찾기 const loginForm = document.getElementById("login-form"); const loginInput = loginForm.querySelector("input"); const loginButton = loginForm.querySelector("button"); 위와 같이 꼭 document 기준으로 element를 찾지 않아도 된다 Form 자동제출 막기 * form 안에 있는 button을 누르거나, type이 submit인 input을 클릭하면 작성한 form이 submit된다 function onLoginSubmit(event) { ev..

HTML element를 가져오는 방법들 document.getElementById("id값"); document.getElementsByClassName("class이름"); document.getElementsByTagName("tag명"); 각각 id, class, tag 이름을 가지고 요소를 찾아올 수 있다 하지만 querySelector를 사용하면 css selector를 사용하여 element를 검색할 수 있기 때문에 더 편하다 document.querySelector(".hello h1"); document.querySelectorAll(".hello h1"); querySelector는 hello라는 클래스 명을 가진 요소 안의 h1 태그를 단일 element로 반환한다 querySelec..