어쨌든 공부하는 블로그

Geolocation function onGeoOk() { // geolocation 정보를 받아오는 것을 성공했을 경우 실행 const lat = position.coords.latitude; const lng = position.coords.longitude; } function onGeoError() { // Error 발생 시 실행할 코드 } navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError); API 받아오기 // 1. 해당하는 API KEY 발급 const API_KEY = "api_key"; // 2. 제공되는 url에 API_KEY를 비롯한 정보를 넣고 불러오기 const url = `url`; fetch(url) .then(res..

자식 요소를 가진 HTML Element 만들기 const li = document.createElement("li"); const span = document.createElement("span"); li.appendChild(span); 이후 li를 document 문서 내에 넣으면 span element까지 같이 들어가게 된다 event.target.parentElement // event를 받은 target의 부모 element를 제거 function 함수명(event) { const li = event.target.parentElement; li.remove(); } 혹은 parentNode(부모가 element가 아닌 경우도 받아올 수 있다)를 사용해도 된다 JSON const player =..

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..

Variable (변수) const a = 1; let b = 2; var c = 3; // 재선언 var c = 5; // 재할당 b = 3; const: 재선언 X, 재할당 X let: 재선언 X, 재할당 O var(구버전): 재선언 O, 재할당 O * 따라서 재선언이 가능한 var는 사용하지 않는다 Object (객체) const player { name: "nico", points: 10, isMove: false sayHello: function() { } } 하나의 player에서 파생되는 여러 property 값을 묶어주기 위한 구조 * const로 선언하여도 player 내 오브젝트들의 값을 변경할 수 있다 * 함수명: 구현할 함수 내용의 형태로 객체가 가지는 함수를 만들어줄 수 있다 Fu..