자바스크립트

인터넷을 검색해보면 자바스크립트로 구현된 많은 롤링 배너, 또는 슬라이드 배너를 찾을 수 있습니다. 제이쿼리 기반, 또는 순수 자바스크립트로 만들어진 많은 오픈소스 배너 라이브러리들이 있으며, 필요로 하는 대부분의 기능들이 이미 구현되어 있습니다. 기존에 구현된 슬라이딩 배너가 원하는 용도에 잘 맞는다면 이런 라이브러리를 사용하는 것을 추천합니다. 롤링 배너를 직접 구현해서 사용하는 것으로

CSS 선택자는 2가지가 있습니다. document.querySelector() 메서드는 처음 나오는 엘리먼트 노드 1개를 반환합니다. 반환할 노드가 없으면 null 을 반환합니다. 반환값이 있는지 체크할 때는 null 여부를 체크합니다. document.querySelectorAll() 메서드는 해당되는 모든 엘리먼트 노드를 반환합니다. 반환한 노드가 없으면 길이가 0인 노드리스트를 반환합니다. 반환된 노드가 있는지 확인하려면 length 메서드가 0보다 큰지 확인합니다.

이벤트 리스너로 이벤트를 처리할 때 이벤트 흐름을 바꾸거나 취소할 수 있는 메서드로 stopPropagation() 과 preventDefault() 가 있습니다. 둘은 이벤트를 취소하는 기능으로는 유사하지만, 실제 사용하는 방법이나 적용 결과가 전혀 다릅니다. preventDefault() preventDefault() 는 타겟의 이벤트를 취소하고, 기본 동작 또한 취소합니다. 콜백 함수 부분만 실행됩니다. 폼 서밋 버튼을 클릭했다거나, 마우스 오른쪽 클릭으로

이벤트 델리게이션을 사용해 관리하기 편한 메뉴 구조를 만들 수 있습니다. 이벤트 델리게이션을 사용하면, 메뉴 추가나 변경에 따르는 이벤트 처리 작업을 최소화 할 수 있고, HTML/CSS 와 자바스크립트가 깨끗하게 분리되기 때문에 유지보수 및 협업에서도 유리합니다. 아래와 같은 구조를 가지는 가로 메뉴를 이벤트 델리게이션으로 메뉴 클릭 이벤트 처리를 해보겠습니다. 메뉴 항목

세로로 긴 컨텐츠를 웹에 표시하거나 모바일 기기에서 긴 스크롤 화면을 스와이프로 스크롤 하는 경우 화면 스크롤의 번거로움을 피하기 위해 화면 최상단으로 이동할 수 있는 고정 링크를 제공할 필요가 있습니다. 화면 최상단으로 스크롤해주는 다양한 자바스크립트 라이브러리가 존재하지만, 기본 자바스크립트로도 가볍게 구현 가능합니다. 가장 단순한 탑 스크롤 애니메이션 구현 윈도우 전역 메서드인

URL 가져오기 현재 페이지의 URL 을 가져오는 방법은 2가지입니다. 전역 객체인 location 에서 URL 얻기 location 객체의 href 속성에 현재 페이지의 URL이 들어있습니다. window.location.href 또는 전역객체 windows 를 생략해 location.href 로 얻을 수 있습니다. 또는, document 객체의 URL 속성에서 현재 페이지의 경로 URL 을 얻을 수 있습니다.

폼과 폼 요소 기초 폼과 폼 요소는 HTML 요소중에서 사용자와 인터렉션을 하는 유일한 방법입니다. 때문에 사용자의 입력이나 선택을 받는데 필요한 다양한 속성들이 존재합니다. 자바스크립트는 이런 폼 요소와 속성들을 완전히 제어할 수 있는 방법을 제공합니다. 폼과 폼 요소들은 기본적으로 이름(name) 속성을 가지고 있습니다. 이름을 통해 개별 폼 및 폼 요소에

업로드 할 이미지 파일을 선택했을 때 업로드 하기 전에 선택한 이미지 미리보기가 되면 잘못된 이미지를 업로드 하는 실수를 줄일 수 있습니다. 쇼핑몰 백엔드, 또는 사용자 후기에 이미지 업로드 기능을 구현할 때 이미지 미리보기를 사용할 수 있습니다. 선택한 이미지 파일의 썸네일을 표시하기 위한 간단한 HTML과 CSS가 아래처럼 있다고 가정하고 이미지 파일을

이벤트 리스너를 이용하면 입력 필드(input/>), 또는 텍스트 영역()  입력하는 내용을 감시해 글자수를 제한할 수 있습니다. 폼(Form)을 사용하면 아이디 길이, 이름 길이, 전화번호 길이, 우편번호 길이, 리뷰 글자수 제한 등 여러가지 요소의 입력 길이 제한이 필요한 경우가 있습니다. 예를 들어 이용 후기 글을 작성하는 텍스트 영역의 글자수를 100자로

중복 클릭으로 인해 가장 많이 발생하는 문제는 폼을 전송할 때 클릭이 2번 이상 발생하면서, 폼이 2번 전송되어 2중으로 저장되는 경우입니다. 사용자는 클릭을 한번 했지만 2번 클릭한 것으로 인식될 수도 있고, 사용자가 실수로 더블클릭을 했을 수도 있습니다. 중복 클릭을 막는 방법은 여러가지가 있습니다. 그중 이벤트 리스너를 이용해 중복 클릭을 막는 방법을