본문 바로가기
728x90

전체 글530

훈훈한 Javascript (17) 2. 브라우저의 web storage 새로고침 버튼 누르면 타이머가 종료되어버림. 카운트 다운 유지되는 방법 만들기 웹스토리지 이용 key - value 형태(키와 값이 쌍이 돼서)로 저장 = 객체처럼 저장 어떠한 데이터에 이름(key)을 지정해줘서, 그 값으로 원하는 형태의 데이터를 저장. 데이터를 전달해주면 백엔드 엔지니어 분들이 해당 데이터를 데이터 베이스에 저장할 수 있도록 작성을 해줌 세션 스토리지, 로컬 스토리지 사용하게 되면 적은 양의 데이터를 로컬 환경에 저장할 수 있음. 세션과 로컬 스토리지 마찬가지. localhost - 도메인 도메인 에서 저장된 로컬스토리지 데이터는 뒤에 어떠한 url 이 오든 모두 공유가 될 수 있음. user ( 이 부.. 2023. 9. 16.
훈훈한 Javascript (16) 1. 함수의 인자와 매개변수 전달인자, 매개변수 웹 스토리지 우선 구현한 것에서 올바르지 않은 날짜를 입력해도 D-day를 입력해주세요 만 뜨는 상태이다. 이 부분때문에 제대로 된 메시지 받지 못하고 있는 것. 이 부분을 고쳐주기 위해서 함수 하나 더 만들어주기. restTimer 함수 생성 해당 드래그 부분을 restTimer 함수 내부로 이동. setClearInterval(); 이것도 내부에서 사용. innerHTML 조작하는 부분을 restTimer 함수로 빼 줌으로서 원하는 메시지 출력받을 수 있게 됨 - 이 부분 헷갈림. 어떤 원리인지 restTimer 로 변경 바로 박스에 날짜 수정해주면 생기는 오류 고쳐주기. 이 함수 자체가 반복실행 되고 있는 것. 1초마다 counterM.. 2023. 9. 16.
자바스크립트 중급 강좌 #12 setTimeout / setInterval setTimeout 일정시간이 지난 후 함수 진행 - 두 개의 매개변수 받음 1) 일정 시간이 지난 뒤 진행하는 함수 2) 시간 (ex: 3000) 두 개 모두 동일한 코드. 인수 활용 Mike - 함수의 첫 번째 인수로 전달. clearTimeout - 예정된 작업을 없앰. function showName(name){ console.log(name); } const tId = setTimeout(showName,3000,'Mike'); clearTimeout(tId); setTimeout 은 time Id 를 반환 이것을 이렇게 스케쥴링 취소할 수 있도록 이용할 수 있음. 3 초가 지나기 전에 저 코드가 실행돼서 (clearTimeout) 아무일도 일어나지 않음. setInterval 일정시간 간격으로.. 2023. 9. 14.
[유노코딩] 타이머 만들기 setTimeout setInterval clearInterval setTimeout 메소드 setTimeout 이 시작되고, 1000밀리초가 지나서야 console 에 재미있다 출력이 나타나게됨. setInterval 메소드 일정한 시간 간격에 따라 함수를 반복 실행할 수 있도록 해주는 메소드 setTimeout 메소드과의 차이점은 주어진 함수를 주어진 시간마다 실행해준다. 0.5 초마다 콘솔에 계속 안녕하세요 메시지 출력. clearInterval 메소드 0 이 아닌 숫자를 반환 (= 타이머의 아이디) setInterval메소드로 반복시켜놓은 동작을 멈추게 할 수 있다. setTimeout 메소드 이름이 있는 함수 또는 익명함수를 넣어준다. 익명함수가 2초 뒤에 실행된다는 뜻. 딱 한 번만 실행된다. 2초 뒤에 1234 가 출력됨. 이것을 setInterval 메소.. 2023. 9. 14.
훈훈한 Javascript (15) 9. clearInterval setInterval() = 함수 대부분의 함수는 return 을 해준다. 함수를 실행만하고 return 을 안 해준 상태. (리턴 값 받지 않음) 리턴값을 받기 위해서 변수에 담아봄 intervalId 라는 변수 tagetDateInput 변수와 똑같은 형식인 것임. const targetDateInput = dateForMaker(); targetDateInput => 리턴 데이터를 여기에 담아준 것 그리고 targetDate = new Date( targetDateInput ) 이렇게 사용해줬었다. intervalId 라는 변수에 뭐가 담겨져 있을 지 console.log 를 통해 확인해보기. 값 넣어주고 버튼 눌러줌 => 숫자 1 나옴 => 버튼 한 .. 2023. 9. 14.
훈훈한 Javascript (14) 7. 반복문을 사용한 텍스트 갱신 일반적으로 카운트 다운이라고 하면 시간초가 줄어드는게 보여야 한다. for 문 써주고 counterMaker 함수가 100번 반복하도록 해줌. = 별 차이 안보임 = 100번을 빠르게 반복해서 실행해주고 있는 상태. = 너무 빨라서 보이지 않는 것 자바스크립트에 코드의 실행을 늦춰주는 기능 = setTimeout 화살표 함수 fn 사용 이것도 함수 (익명함수) () => { } 익명함수를 setTimeout 함수에 작성 counterMaker 함수를 안에 넣어준다. 그리고 콤마 + 5000 시간이 지연되면서 보여진다. 5000 = 5000 밀리 초 ( = 5초 ) 1000 * i 적용 i = 1 씩 증가 1초마다 실행되고 있음. 근데 100 (i < 10.. 2023. 9. 12.
728x90

티스토리툴바