본문 바로가기
728x90
반응형

분류 전체보기458

🚀로그인 창 만들기🚀 | 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.
🚀이벤트(event ) 사용하기~ 🚀 | JavaScript 시리즈 013 코드 주석 1. title 변수 에다가 document.querySelector()함수를 이용하여 html 의 내용을 가져옴. 15. title 변수에 이벤트리스너를 적용시킴. (click 이벤트 설정할거고 , handleTitleClick 함수 실행시킬거임) 3. handleTitleClick 함수 가 실행되면서 콘솔창에 title was clicked! 이 출력 되게 만듦. ( title 을 누를시에 이 모든게 실행됨.) --------------------------------------------------------------------------------------------------------------- 16. title 변수에 이벤트리스터 추가 ( mouseeneter라는 이벤트를 설.. 2021. 8. 6.
728x90
반응형

티스토리툴바