728x90 반응형 JavaScript 시리즈☕45 🚀local Storage(로컬 스토리지?) 🚀 | JavaScript 시리즈 017 0. 이전 시리즈 복습(recap) *알아두자. 1. preventDefault(); 의 기능: 브라우저의 기본동작 막음. 즉 브라우저가 submit 할때 원래 하는 동작을 안하게 된다 대신, 그 기본 동작을 멈추고 우리가 원하는 대로 할 수 있게 된다. 1. local Storage 에 대해 간단한 설명 뭔가를 저장하는 건 아주 자주 사용되는 기능. 예를 들어 유튜브에서 우리가 볼륨을 조절하고 새로고침하면 유튜브가 그 볼륨값을 기억하는 경우. 브라우저에 공짜로 뭔가를 기억할 수 있게 해주는 기능이 존재. 그 API 의 이름은 local storage야 콘솔에 local storage 를 입력하면 볼 수 있는데, 이미 정의 되어 있다. 2. local Storage 사용법 local storage (*개.. 2021. 8. 8. 🚀로그인 창 만들기🚀 | JavaScript 시리즈 016 *알아두자! 1. form 의 기본 동작은 submit 이다. 2. 링크의 기본동작은 클릭시 다른 페이지로 이동하는것. 3. preventDefault가 콜백함수를 멈추는 것이 아니라 발생한 해당 이벤트를 작동하지 않도록 하는 것 * 이벤트 작동원리? 링크를 클릭시! handleLinkClick 함수가 실행되게 만들었다. 함수실행은 우리가 하는게 아니라 js 즉 브라우저 가 하는일임. 만약 link.addEventListener("click",handleLinkClick) 를 link.addEventListener("click",handleLinkClick()) 로 바꾸면 이 함수는 한번만 실행되고 그걸로 끝이다. 1. 변수 loginForm 에 할당해줄거야. 무엇을? =>document(기능: HTML.. 2021. 8. 7. 🚀Toggle (토글) 🚀 | JavaScript 시리즈 015 토글??? 컴퓨터에서 "토글키(Toggle Key)"라는 것은 "한번 누르면 어떤 기능이 ON되고, 한번 더 누르면 OFF되는 키"를 말합니다. 1개의 키로 켜고 끄는 기능을 다 하는 것입니다. 키보드에서는 [Caps Lock], [Num Lock], [Scroll Lock] 이런 키를 말합니다. 휴대폰에서나 아니면 컴퓨터 를 사용하면서 이런 버튼 한번 쯤은 봤을텐데,, 이런게 다 토글 을 이용한거라고 보면 된다. 코드 위의 긴 자바스크립트 코드들을 한줄로 간단하게 해줄 수 있는 건 => 토글! 토글은 휴대폰을 껏다 켰다, 한번터치시 화면이 켜진다. 또 한번더 클릭시 화면 이 꺼진다. 와 같은 이런 기능들을 if , else 이런 조건문들로 복잡하게 작성해야할 것을 그냥 toggle 을 이용하여 .. 2021. 8. 6. 🚀이벤트(event ) 사용하기2~🚀 | JavaScript 시리즈 014 * document . 으로 시작하는 코드는 html의 element(요소)를 가져올때 사용하는 것! Resize (창 사이즈 조절) 코드 window의 resize(창 사이즈 에 변화를 가하면 => handleWindowResize 함수가 실행됨. --->함수 부분으로 가서 실행 코드를 살펴보면 document. 으로 시작하면 무조건 html 요소를 떠올린다! 그리고 body 요소에 style 에 배경색을 토마토 색을 ! 그럼 아래와 같이 출력됨. 결과 Copy (복사) 코드 이건 복사를 했을때 팝업창으로 경고를 띄울수 있게 만들수 있는 이벤트 코드이다. 아래와 같이 뜨는데 신기하다ㅋㅋ 결과 게속 코드를 보면 알다시피, element 를 찾아서 event listener를 추가하고, event 가 발생.. 2021. 8. 6. 이전 1 ··· 5 6 7 8 9 10 11 12 다음 728x90 반응형
