Language/JavaScript7 [javaScript] 사용자 위치 기반 날씨 API 사용 https://openweathermap.org/current Current weather data - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! We collect and process weather data from different sources such as global and local weather models, satellites, radars and a vast network of weather stations. Data is avai openweathermap.org API 사용하여 날씨 정보 이용 const API_KEY = 위의 참조사이트 마이페이지 .. 2022. 2. 24. [javaScript] ToDoList 만들기 JS파일 const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); const TODOS_KEY = "toDos"; let toDos = []; function saveToDos(){ localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); } // 삭제 버튼 함수 function deleteToDo(event){ const li = event.target.parentElement; li.remove(); toDos = toDos.fil.. 2022. 2. 24. [javaScript] 랜덤 명언& 배경 생성 관련 명령어 // Math.random() // 0이상~1미만 랜덤 실수 제공 // Math.round() // 반올림 처리 // Math.ceil() // 올림 처리 // Math.floor() // 내림 처리 // length 길이 반환 //documnet.creatElement(); // 매개변수에 들어간 요소를 생성 // document.createElement("img"); // bgImage.src = `img/${chosenImage}`; //document.body.appendChild(bgImage); // body부분 내부 맨뒤에 추가, prepend는 앞부분에 추가 랜덤 명언 생성 Log In 00:00 const quotes = [ { quote: 'I never dreamed ab.. 2022. 2. 23. [javaScript] 시계 만들기(clock) 관련함수 Interval: 일정시간마다 반복 실행 setInterval(function, ms); function: 실행시킬 함수 ms: 시간단위 (5000 이면 5초) timeout: 일정시간 뒤 한번 실행 setTImeout(function, ms); padStart,padEnd : 자리수 맞춰주는 함수 문자열.padStart(자리수,디폴트값) "1".padStart(2,"0"); === "01" "1".padEnd(2,"0"); === "10" Clock Log In 00:00 const clock = document.querySelector("h2#clock"); function getClock(){ const date = new Date(); const hours = String(date.get.. 2022. 2. 23. [javaScript] Login 처리 addEventListener() & preventDefault() Log In const loginInput = document.querySelector("#login-form input"); function onLoginSubmit(event){ event.preventDefault(); const username = loginInput.value; if(username === ""){ alert("Please write your name"); } else if(username.length > 15){ alert("15자 이하로만 적어주세요"); } } loginForm.addEventListener("submit", onLoginSubmit); addEventListener() 첫번째 argumen.. 2022. 2. 22. [javaScript] 브라우저와의 연동 사용법 Document document는 브라우저에 존재하는 object console창에서 document를 통해 html 접근 가능. document.title = "임의의 문자열" 을 엔터치면 해당 문자열로 title 변경가능. javaScript에서 document로 html 변경이 가능하다. getElementBy Grab me! const title = document.getElementById("title"); // id값을 통해 HTML element를 반환 title.innerText = "Got you"; // element안의 요소 변경 가능 console.log(title); console.dir(title); // 보다 자세하게 elements 를 볼 수 있음 console.log(tit.. 2022. 2. 19. [javaScript] 기초 문법 변수(variable) let: 재선언 불가, 재할당 가능 const: 재선언 불가, 재할당 불가 var: 재선언 가능, 재할당 가능 let a = 5; a = 6; // 재할당 가능 let a = 6; // 재선언 불가 const b = 5; b = 6; // 재할당 불가 const b = 6; // 재선언 불가 var c = 5; c = 6; // 재할당 가능 var c = 6; // 재선언 가능 var은 예전 문법이므로, 더이상 쓰지 않는다. 대부분 const로 선언하여 사용하고, 재할당해서 사용할 필요가 있을 경우에만 let을 사용한다. 브라우저 콘솔 출력방법 console 함수 사용 console.log(5); // 5 출력 console.log("hello! " + "haebum"); // h.. 2022. 2. 19. 이전 1 다음