어제 오늘 내일

라디오 버튼 값을 가져와서 출력하는 2가지 방법을 소개합니다. 1. 라디오 클릭 시, 클릭한 값 바로 출력하기 2. 라디오 버튼 값을 선택한 후, 출력 버튼 클릭시 값 출력하기 먼저, 라디오 버튼을 생성하는 방법은 이전 포스팅을 참조하세요. [HTML] input 태그로 라디오버튼(radio) 만들기 1. 라디오 클릭 시, 클릭한 값 바로 출력하기 여성 남성 function getGender(event) { document.getElementById('result').innerText = event.target.value; } (HTML, JS 탭을 클릭하여 두 소스를 모두 참조하세요.) 먼저 성별을 선택할 수 있는 radio 버튼을 만들었습니다. 각 성별의 value는 'female', 'male' 이..

input에 자동완성이 적용되는 경우 사용자의 입력을 받는 input 항목을 입력하다보면 아래의 예제와 같이 특정 input의 경우 사용자가 기존에 입력했던 값을 기반으로 자동완성이 제공되는 경우가 있습니다. 이름 : 이메일 : input의 name 속성이나 id 속성이 같을 경우 자동완성 기능이 제공됩니다. 위 예제는 많은 웹사이트에서 사용하는 id 속성값인 'name', 'email'을 지정하였습니다. 아마, 다른 사이트에 입력한 적이 있던 name이나 email 목록이 자동완성으로 목록에 나타날 것입니다. 이것은 보통 브라우저가 자동으로 해주는데, 어떤 경우에는 이 기능을 해제해야 할 필요도 있습니다. input에 자동완성 해제하기 이름 : 이메일 : input에 자동 완성을 해제하기 위해서 'au..

사용자에게 input 창에 입력을 받을 때, 사용자 키보드의 Caps Lock 키가 활성화 되어 있는지 확인하여, Caps Lock이 활성화 되어 있으면 메시지를 보여주는 방법을 소개합니다. Caps Lock 키 활성화 여부 체크하기 function checkCapsLock(event) { if (event.getModifierState("CapsLock")) { document.getElementById("message").innerText = "Caps Lock이 켜져 있습니다." }else { document.getElementById("message").innerText = "" } } 위 예제는 입력창에 뭔가가 입력되면, 사용자의 키보드에 Caps Lock 키가 활성화 되어 있을 경우, 입력창 ..

Javascript의 배열에서 빈값 제거하는 방법 undefined 값만 제거하기 (filter 함수와 '!==' 연산자) undefined, null(nullish value) 제거하기 (filter 함수와 '!=' 연산자) 빈값(empty value) 제거하기 undefined, null, false, '', 빈값(empty) 모두 제거하기 0. filter 함수 알기 Javascript의 filter() 함수를 사용하면, 배열에서 특정 조건에 부합하는 값을 찾아서, 그 값들로 새로운 배열을 만들어서 리턴합니다. 그래서, 이 포스팅에서는, 배열에서 빈 값들을 찾아서 그 값들을 제외하고, 값이 있는 원소들로 새로운 배열을 만들어서 리턴하기 위해 filter 함수를 사용합니다. filter 함수를 잘 모..

Javascript의 배열에서 중복 되는 값을 제거하는 3가지 방법을 알아보도록 하겠습니다. 1. Set 2. indexOf(), filter() 3. forEach(), includes() 1. Set Javascript에서 Set 객체를 이용하면 중복없는 데이터를 표현할 수 있습니다. Set 객체의 이런 특징을 이용해서, 배열의 중복을 제거할 수 있습니다. const dupArr = [1, 2, 3, 1, 2]; const set = new Set(dupArr); const uniqueArr = [...set]; document.writeln(Array.isArray(uniqueArr)); document.writeln(uniqueArr); 위의 예제에서는 const set = new Set(dupA..

Javascript에서 Set 객체는 중복 없는 데이터를 표현합니다. 이번에는 Set 객체를 배열(Array)로 변환하는 3가지 방법을 알아보도록 하겠습니다. 1. Array.from() 2. Spread Operator (전개 연산자) 3. forEach 1. Array.from() Array.from 함수는 유사배열객체(array-like object)나 반복가능객체(iterable object)를 얕은 복사(shallow copy)하여 새로운 배열(Array) 객체를 만들어줍니다. 유사배열객체(array-like object) : length 속성과 index element를 가지는 객체 반복가능객체(iterable object) : 배열을 일반화한 객체 ex)Map, Set const set = ..

Javascript의 객체에 특정 속성이 존재하는지 체크하는 방법 3가지를 소개합니다. 1. hasOwnProperty() 함수 const person = { name : 'alice', country: 'korea' } const haveName = person.hasOwnProperty('name'); const haveAge = person.hasOwnProperty('age'); document.writeln(haveName); document.writeln(haveAge); hasOwnProperty 함수는 파라미터로 전달된 property(속성)가 객체에 존재하면 true를 리턴하고, 그렇지 않으면 false를 리턴합니다. 2. in 연산자 사용하기 const person = { name : ..

Javascript에서 배열을 초기화 하는 4가지 방법을 소개합니다. 1. 빈 배열 할당 let arr = [1, 2, 3]; arr = []; document.write('arr : ' + arr); 배열을 초기화 하는 가장 쉬운 방법입니다. 기존의 배열에 새로운 빈 배열을 만들어서 할당하였습니다. 2. 배열의 길이 설정 let arr = [1, 2, 3]; arr.length = 0; document.write('arr : ' + arr); 배열의 length 값을 0으로 설정해주었습니다. 이렇게 하면, 배열의 모든 값이 삭제되고, 배열이 초기화됩니다. 3. splice() 함수 let arr = [1, 2, 3]; arr.splice(0, arr.length); document.write('arr ..

Javascript의 forEach 반복문에서는 continue 구문을 사용할 수 없습니다. 그렇다면, continue처럼 반복문 내에서 특정 값을 제외하고 실행하고 싶을 때는 어떻게 해야 할까요? 1. for...of 구문 사용하기 const arr = [1, 2, 3]; for (const element of arr) { if(element === 1) continue; document.writeln(element); } 가장 간단한 방법은 forEach문 대신에 continue 구문을 사용할 수 있는 다른 반복문을 사용하는 것입니다. for, for..of 문은 continue를 사용할 수 있습니다. for..of 문을 좀 더 알고 싶다면 아래 링크를 참조하세요. [Javascript] 반복문(4)..

배열 안의 element가 중복되는 값을 가지는지 체크하는 3가지 방법을 소개합니다. 배열 값 중복 체크하는 3가지 방법 1. 반복문 이용하기 2. Set 객체 이용하기 3. some(), indexOf(), lastIndexOf() 함수 이용하기 1. 반복문 이용하기 const arr = ['a', 'b', 'c', 'b']; let dupYn = false; for(let i = 0; i < arr.length; i++) { const currElem = arr[i]; for(let j = i+1; j < arr.length; j++) { if(currElem === arr[j]) { dupYn = true; break; } } if(dupYn) { break; } } document.writeln(..