본문 바로가기
[자바스크립트] LocalStorage 만료 시간 설정 LocalStorage는 브라우저에 데이터를 저장하기 위한 메커니즘 중 하나입니다. LocalStorage는 일반적으로 사용자가 브라우저 탭을 닫거나 컴퓨터를 종료해도 데이터가 유지되는 영구적인 저장소입니다. 하지만 LocalStorage는 만료 날짜를 설정하는 기능이 없습니다. 즉, 데이터는 무제한으로 유지됩니다. 따라서 LocalStorage를 사용할 때 데이터를 유효기간이 만료되면 자동으로 삭제되도록 설정해야합니다. 이를 위해서는 JavaScript를 사용하여 로컬 스토리지에 만료 시간을 설정해야합니다. 1. 예제 코드 LocalStorage에서 데이터를 저장할 때 데이터와 함께 유효기간을 함께 저장하면 된다. 예를 들어, 만료일을 현재 시간부터 7일 이후로 설정하려면 다음과 같이 코드를 작성할 수.. 2023. 3. 15.
[자바스크립트] 문자열을 숫자로 바꾸는 방법 (Number, parseInt) JavaScript에서 Number()와 parseInt() 함수는 문자열을 숫자로 변환하는 데 사용됩니다. 하지만 두 함수는 다른 방식으로 동작하며, 각각의 고유한 용도와 제약 사항이 있습니다. 1. Number() Number() 함수는 문자열을 숫자로 변환하는 가장 간단하고 일반적인 방법입니다. 이 함수는 인수로 전달된 값이 어떤 유형인지에 따라 다르게 동작합니다. 예를 들어: Number('123') // 123 Number('123.45') // 123.45 Number('0xFF') // 255 Number('1.23e+5') // 123000 Number('hello') // NaN Number(true) // 1 Number(false) // 0 Number(null) // 0 Number.. 2023. 3. 15.
[자바스크립트] 문자열 배열로 자르기 (split 함수) JavaScript의 split() 함수는 문자열을 특정 구분자(delimiter)를 기준으로 나누어 배열로 반환하는 함수입니다. 이 함수는 다양한 상황에서 사용될 수 있으며, 문자열을 처리하고 분석하는 데 유용합니다. 1. 설명 split() 함수는 다음과 같은 구문을 가집니다. string.split(separator, limit) split() 함수는 두 개의 매개변수를 가질 수 있습니다. separator: 필수 매개변수로, 문자열을 나눌 기준이 되는 구분자입니다. 이 매개변수는 문자열 또는 정규표현식으로 지정할 수 있습니다. 만약 생략된 경우, 문자열 전체가 하나의 배열 요소로 반환됩니다. limit: 선택적 매개변수로, 반환할 배열 요소의 최대 개수를 지정합니다. 이 매개변수가 생략된 경우, .. 2023. 3. 15.
[자바스크립트] 오디오 플레이어 (Audio Player) 만들기 예제 HTML, CSS 및 JavaScript를 사용하여 오디오 플레이어를 만들어보겠습니다. 이 예제는 HTML5 오디오 요소를 사용하여 오디오를 재생합니다. 1. HTML 코드 우선, HTML 코드를 작성하겠습니다. HTML 코드는 다음과 같습니다. 00:00 / 00:00 위의 코드는 기본적인 HTML 문서를 정의합니다. HTML5 오디오 요소를 포함하고 있으며, 이 요소는 id 속성이 "audio-player"로 지정되어 있습니다. 다음으로, 컨트롤러를 구성하는 요소를 추가하겠습니다. 이 요소들은 사용자가 오디오를 제어할 수 있는 버튼, 타임 라인, 현재 재생 시간 및 전체 재생 시간을 표시합니다. 2. CSS 코드 이제 CSS 코드를 작성하여 컨트롤러를 스타일링하겠습니다. 다음과 같이 코드를 작성합니다.. 2023. 3. 14.
[자바스크립트] 정규표현식을 통한 이메일 검증 JavaScript를 사용하여 이메일을 유효성 검사하는 방법에는 여러 가지가 있지만, 가장 일반적으로 사용되는 방법 중 하나는 정규 표현식을 사용하는 것입니다. 이를테면, 다음과 같은 코드를 사용할 수 있습니다. 1. 정규표현식 function validateEmail(email) { const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return re.test(email); } 위 코드에서는, validateEmail 함수를 사용하여 전달된 이메일 주소의 유효성을 검사합니다. re 변수에 저장된 정규 표현식은 이메일 주소의 형식을 검사하는 데 사용됩니다. 이 표현식은 다음과 같이 구성됩니다. /^: 문자열의 시작을 나타냅니다. [^\s@]+: 공백과 @ 기호가 아닌 한 글자 이상의.. 2023. 3. 14.
[자바스크립트] querySelector(), querySelectorAll() 사용법 JavaScript의 querySelector() 메서드는 HTML 문서 내에서 특정 요소를 선택하기 위해 사용되는 메서드입니다. 이 메서드는 CSS 선택자를 사용하여 원하는 요소를 선택할 수 있습니다. 1. querySelector() 설명 querySelector() 메서드는 문서 내에서 첫 번째로 일치하는 요소만 반환합니다. 따라서, 만약 여러 요소를 선택하려면 querySelectorAll() 메서드를 사용해야 합니다. 아래는 querySelector() 메서드를 사용하여 요소를 선택하는 예시입니다. // id가 "myDiv"인 요소를 선택합니다. const myDiv = document.querySelector('#myDiv'); // class가 "myClass"인 첫 번째 요소를 선택합니다... 2023. 3. 14.

티스토리툴바