일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Files
- list
- json
- 자바스크립트
- 인텔리제이
- html
- 배열
- IntelliJ
- 문자열
- Maven
- ArrayList
- Java
- 이클립스
- Visual Studio Code
- CMD
- Eclipse
- Button
- 자바
- 테이블
- string
- 이탈리아
- input
- CSS
- windows
- js
- vscode
- table
- date
- javascript
- Array
- Today
- Total
목록IT (565)
어제 오늘 내일
체크박스 전체 선택/전체 해제 구현하는 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에 자동완성이 적용되는 경우 사용자의 입력을 받는 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..