일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- list
- 문자열
- Maven
- Visual Studio Code
- Eclipse
- date
- table
- javascript
- 자바
- IntelliJ
- 인텔리제이
- CMD
- json
- 이탈리아
- string
- 테이블
- js
- Files
- html
- 배열
- CSS
- Array
- windows
- Java
- vscode
- ArrayList
- 자바스크립트
- Button
- input
- 이클립스
- Today
- Total
목록IT (565)
어제 오늘 내일
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(..
input 필드를 비활성화 하는 방법은 disabled 속성을 사용하는 방법과 readonly 속성을 사용하는 방법 이렇게 2가지가 있습니다. 이 두가지 속성을 사용하는 방법과 차이점을 알아보도록 하겠습니다. input 필드 비활성화 하기 (disabled, readonly 차이) 1. disabled 2. readonly 1. disabled input 필드에 disabled 속성을 사용하면, 위의 예제와 같이 input 필드가 비활성화 됩니다. input 필드의 색깔이 바뀌고, input 필드를 클릭해도 포커스가 가지 않습니다. 가장 중요한 것은, disabled 속성을 설정하면, 위의 예제와 같이 기본값이 설정되어 있더라도, submit을 수행하면 값이 전달되지 않습니다. 2. readonly in..
input 박스에서 사용자에게 숫자만 입력되도록 설정하는 방법 4가지를 소개합니다. input 박스에 숫자만 입력되도록 설정하는 4가지 방법 1. 'type'을 'number'로 지정하기 2. 입력된 keycode 체크하기 3. oninput 이벤트, 정규식, replace() 함수 활용하기 4. pattern 속성 활용하기 1. 'type'을 'number'로 지정하기 기본 예제 input의 type속성을 'number'로 지정하면, 숫자만 입력 받을 수 있습니다. 브라우저에 따라서, 입력창 오른쪽에 숫자 증감 아이콘도 생성됩니다. min, max, step 속성 지정하기 input의 type을 'number'로 지정한 경우, min, max 속성을 추가하여 최대값과 최소값을 지정할 수 있습니다. st..
DOM 노드의 타입을 체크하기 위해서는 nodeType 프로퍼티를 사용합니다. nodeType 프로퍼티 var type = node.nodeType; nodeType은 node의 type을 상수로 리턴합니다. 리턴 상수 타입 예제 1 element , 3 text Hello 4 CDATASection 7 ProcessingInstruction 8 Comment 9 Document document 10 DocumentType 11 DocumentFragment 예제 안녕하세요? let elem = document.getElementById('sample'); const docuType = document.nodeType; const divType = elem.nodeType; const textType =..
필드에 입력받은 값을 화면에 출력하는 방법입니다. 사용자가 타이핑 할때마다 input 값 출력하기 See the Pen js by anna (@hianna) on CodePen. HTML 사용자로부터 값을 입력 받을, id='name'인 element를 생성하였습니다. onkeyup 이벤트(키보드가 눌려졌을 때 발생하는 이벤트)가 발생하면, printName() 메소드를 호출하도록 하였습니다. 폼에 입력받은 값을 출력할 위치입니다. Javascript function printName() { const name = document.getElementById('name').value; document.getElementById("result").innerText = name; } const name = d..
Javascript 만나이, 세는 나이 계산하기 먼저 세는 나이와 만나이에 대해서 알아보겠습니다. 세는나이 - 매년 1월 1일을 기준으로 1살씩 늘어납니다. - 출생일에 1살이 됩니다. 만나이 - 만나이는 태어난 날을 기준으로 1살씩 늘어납니다. - 출생일에는 0살이고, 첫번째 생일에 1살이 됩니다. 세는 나이 만나이 태어난 날 1살 0살 나이 먹는 날 1월 1일 생일 세는 나이 계산하기 현재 년도에서 출생 년도를 뺀후, 1살을 더해 줍니다. const today = new Date(); const birthDate = new Date(2000, 7, 10); // 2000년 8월 10일 let age = today.getFullYear() - birthDate.getFullYear() + 1; docu..