어제 오늘 내일

체크박스 전체 선택/전체 해제 구현하는 2가지 방법을 소개합니다. 1. Document.getElementsByName() 활용하기 2. Document.querySelectorAll() 활용하기 1. Document.getElementsByName() 활용하기 Select All 개 고양이 토끼 function selectAll(selectAll) { const checkboxes = document.getElementsByName('animal'); checkboxes.forEach((checkbox) => { checkbox.checked = selectAll.checked; }) } (HTML, JS 탭을 클릭하여 두 가지 코드를 모두 확인하세요.) 위 예제 코드는 'animal'이라는 이름을 가..

체크박스를 클릭하여 선택할 때마다, 총 몇개가 선택되었는지, 체크된 항목의 개수를 구하는 예제입니다. 체크박스에 체크된 항목 개수 구하기 개 고양이 토끼 function getCheckedCnt() { // 선택된 목록 가져오기 const query = 'input[name="animal"]:checked'; const selectedElements = document.querySelectorAll(query); // 선택된 목록의 갯수 세기 const selectedElementsCnt = selectedElements.length; // 출력 document.getElementById('result').innerText = selectedElementsCnt; } (HTML, JS 탭을 클릭하여 두 ..

시작하기 전에 체크 박스를 만드는 방법을 잘 모른다면, 먼저 아래 포스팅을 참조하세요. [HTML] inpu 태그로 체크박스(checkbox) 만들기 체크박스(checkbox)에 선택 된 값 출력하기 1. 체크박스를 선택 했을 때, 선택한 값만 출력하기 2. 체크박스를 선택 했을 때, 선택된 모든 값 출력하기 3. '확인' 버튼을 눌렀을 때 선택된 값 출력하기 1. 체크박스를 선택 했을 때, 선택한 값을 출력하기 체크박스에 클릭 이벤트가 발생했을 때, 선택된 값만 출력하는 예제입니다. 개 고양이 function getCheckboxValue(event) { let result = ''; if(event.target.checked) { result = event.target.value; }else { re..

지난번에는 라디오 버튼을 설명하는 텍스트를 클릭할 경우에도, 라디오 버튼이 선택이 되도록 하는 방법을 알아보았습니다. 그리고, 라디오 버튼이 선택된 경우 그 값(value)을 가져와서 출력하는 방법도 알아보았습니다. [HTML] input 태그로 라디오버튼(radio) 만들기 [Javascript] 라디오 버튼(radio) 값 가져와서 출력하기 [Javascript] 라디오 버튼의 텍스트 클릭하여 항목 선택하기 이번에는 라디오 버튼을 태그와 연결하고, 라디오 버튼을 클릭하면 태그에 정의된 텍스트 값을 가져와서 출력하는 방법을 알아보도록 하겠습니다. 여성 남성 function getRadioText(event) { const radioId = event.target.id; const query = 'lab..

지난 번에는 HTML과 Javascript를 사용하여 라디오 버튼을 생성하고 선택된 라디오 버튼의 값을 가져오는 방법을 알아보았습니다. [HTML] input 태그로 라디오버튼(radio) 만들기 [Javascript] 라디오 버튼(radio) 값 가져와서 출력하기 라디오 버튼을 정확히 클릭해야만 항목이 선택되는 문제 여성 남성 그런데, 이전에 설명한 방법으로 라디오 버튼을 생성하면 정확하기 라디오 버튼을 클릭해야만 해당 항목이 선택됩니다. 라디오 버튼 옆의 텍스트 문자열을 클릭했을 때도, 라디오 버튼의 항목이 선택되면 좋을 텐데요. 여기서는, 라디오 버튼 옆의 텍스트를 클릭했을 때도, 라디오 버튼의 항목이 선택되도록 하는 방법을 알아보겠습니다. 라디오 버튼의 텍스트 클릭하여, 항목 선택할 수 있도록 구..

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

사용자에게 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 = ..