기록의 힘

보호되어 있는 글입니다.

현재 지역 날씨 API 가져오기 https://openweathermap.org/api Weather API - OpenWeatherMap Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, which are included in professional collections. openweathermap.org --> 해당 사이트 회원가입/로그인하고 이메일 확인하면 내 api키를 받을 수 있음. --> geolocati..

localStorage 더보기 더보기 출처 : 강의7.8 댓글 내가 이해한 걸 적어볼까? 그대로 슝슝 읽으면 이해가 될거야!!! 우리가 지정한 리스트들이 새로고침 되었을 때 초기화되지 않으려면 저장을 하는 것이 중요해 어디에 저장을 할거냐면 localStorage! web상에다가 우리의 데이터들을 저장할 수 있는거지 어떻게 저장할거냐면 localStorage.setItem("키", "값"); 키에는 내가 저장하려고 하고 싶은 db 덤탱이에 이름을 정해주는 것 값에는 각각의 데이터 값들을 의미한다. 값에 여러개의 데이터를 넣고 싶은데 어떻게 해? 배열 형식으로 넣으면 돼 근데 배열형식으로 그냥은 안 넣어져 그래서 string 형식으로 바꿔줘야해 배열을 "값" 부분에 저장하고 싶으면 JSON.stringif..

setInterval()와 setTimeout() const clock = document.querySelector("h2#clock"); function getClock(){ const date = new Date(); clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; } getClock(); //여기서 한번 실행시켜준 이유는? //setInterval 1초후 마다 실행 전까지는 00:00이기 때문에 브라우저 실행 시 바로 시간이 나타나도록 setInterval(getClock, 1000); padStart()와 padEnd() --> String 앞/뒤로 붙여주는 함수다. padStart와 padEnd 함..

const loginForm= document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); // const loginButton = document.querySelector("#login-form button"); //input이 div안에 있을 경우 click이벤트로 처리 할 수 있겠지.. // function onLoginBtnClick(){ // const username = loginInput.value; // if(username === ""){ // alert("Please write your name"); // }else if(username.length > 15){ /..

클래스이름 붙이기/지우기 classList 우리가 class들의 목록으로 작업할수 있게끔 허용해준다. className은 이전calss를 상관하지않고 모든걸 교체해 버린다. classList를 이용하는건 js에서 건드리는건 HTML element가 가지고있는 또 하나의 요소 사용하는 것이다. = element의 class내용물을 조작하는 것을 허용한다는 뜻 contains은 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 말해준다 toggle은 토큰이 존재하면 토큰제거 ,존재 하지않으면 토큰 추가 Day.5 과제 제출 과제내용 : 브라우저 크기가 변하면 백그라운드 색상이 변하도록 if/else를 사용하여 이벤트 주기 힌트: innerWidth , classList.add/..

EVENT const h1 = document.querySelector("div.hello:first-child h1"); function handleTitleClick(){ h1.style.color = "blue"; } function handleMouseEnter(){ h1.innerText = "mouse is here!"; } function handleMouseLeave(){ h1.innerText = "mouse is gone!"; } function handleWindowResize(){ document.body.style.backgroundColor = "tomato"; } function handleWindowCopy(){ alert("copier!"); } function handle..

Function 1. Function() 의 괄호 안의 매개변수에서 아규먼트를 받아들일 수 있다. ex) function sayHello(nameOfPerson) { console.log(nameOfPerson); } sayHello("nico") sayHello("dal") sayHello("lynn") 2. 아규먼트는 여러개를 받을 수 있음. ex) function sayHello(nameOfPerson , age) { console.log(nameOfPerson); } sayHello("nico" , 12); sayHello("dal" , 20); sayHello("lynn" , 23); 3. function의 값은 function '안'에서만 존재한다. --> 오브젝트 안에서 매개변수가 아규먼트를..

변수선언 const , let 변하지 않는 고정적인 값 const 값을 계속 새로 정의할 수 있는 let var는 안씀!!! Booleans data type 에는 숫자 , 문자 말고도 boolean 값으로 true,false가 있다. 또 다른 값으로는 null, undefined가 있다. 1. null: 컴퓨터에 값이 없음을 의도적으로 알리기 위해 채워진 값이다 2. undefined: let something; 처럼 변수에 값을 지정하지 않으면 메모리 상에 자리는 존재하지만 값이 채워지지 않은 채로 있다. * undefined = 변수는 선언했지만 값을 할당하지는 않음 * null = 변수에 null(값이 없다)이 할당된다 즉, 정의됨 undefined=값이 정의되지 않음 null=값이 없음 cons..

세이브더칠드런 클론코딩 하는 중 기존 사이트에서는 onkeypress, onkeyup, 콜백함수를 호출하는 방식으로 사용했지만, 나는 잘 적용이 안돼서 change이벤트를 주었다. chatGPT 질문 구글 찾아보다가 나는 처음에 value="1"를 선택하면 input value=" " 입력되도록 코드를 따로 따로 작성하려 했었다. 근데 간단하게 input.value와 select의value값을 같게 작성하면 간단한 것이었음.. 새로 알게 된 것 onkeypress, onkeyup, readonly 어떻게 사용되는지 실습을 통해 연습해봐야겠다.