일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- input
- string
- Java
- Maven
- windows
- IntelliJ
- CSS
- vscode
- ArrayList
- 문자열
- CMD
- 이클립스
- 자바
- Files
- 테이블
- json
- Array
- 이탈리아
- date
- 자바스크립트
- 인텔리제이
- list
- Button
- javascript
- table
- js
- Eclipse
- html
- 배열
- Visual Studio Code
- Today
- Total
목록자바스크립트 (143)
어제 오늘 내일
지난번에는 라디오 버튼을 설명하는 텍스트를 클릭할 경우에도, 라디오 버튼이 선택이 되도록 하는 방법을 알아보았습니다. 그리고, 라디오 버튼이 선택된 경우 그 값(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..
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 ..