티스토리

어제 오늘 내일

검색하기

블로그 홈

어제 오늘 내일

hianna.tistory.com/m

여행, IT 정보를 나눕니다.

구독자: 71

방명록 방문하기

주요 글 목록

[Javascript] 정규식으로 문자열 공백 제거하기 Javascript에서 정규식을 이용하여 문자열의 공백을 제거하는 방법입니다. str.replace(/\s/g, ''); 예제 const str = "안 녕 하 세 요 "; const trimStr = str.replace(/\s/g, ''); console.log(trimStr); // "안녕하세요"; 1. replace() 함수 JavaScript의 replace() 함수는 문자열에서 특정 패턴을 찾아 다른 문자열로 대체하는 데 사용됩니다. str.replace(searchValue, newValue) 자세한 설명은 지난 포스팅을 참조하세요. [Javascript] 문자열에서 특정 문자열 치환하기 (replace) [Javascript] 문자열에서 특정 문자열 치환하기 (replace) Javascr.. 공감수 0 댓글수 1 2024. 4. 3.
[Javascript] textarea 값 가져오기, 넣기, 지우기 값 가져오기, 넣기, 지우기 다음은 textarea의 값을 읽고, 쓰고, 지우는 예제입니다. 안녕하세요 값 가져오기 값 설정하기 값 삭제하기 // textarea의 값을 가져와서 출력 function getTextareaValue() { // textarea 값 읽어오기 const textareaValue = document.getElementById('myTextarea').value; // 읽어온 내용 출력 document.getElementById('result').innerText = textareaValue; } // textarea에 새로운 값을 설정 function setTextareaValue() { const newValue = '새로운 텍스트 내용'; document.getElement.. 공감수 0 댓글수 0 2024. 2. 4.
[Javascript] 동적 html 요소 추가하기 동적 HTML 요소 추가하기 다음은 버튼이 클릭되면 container div에 동적으로 div text 요소가 추가되는 예제입니다. 텍스트 추가 function addText() { // 추가할 요소 생성 const newElement = document.createElement('div'); // 요소 안에 html 요소 추가 newElement.innerHTML = '텍스트가 추가되었습니다.'; // 생성된 요소를 추가할 부모요소(container div) 선택 const container = document.getElementById('container'); // 생성된 요소를 기존의 container div에 자식 요소로 추가 container.appendChild(newElement); } 위 .. 공감수 0 댓글수 0 2024. 2. 3.
[Javascript] 소수점 2 자리 올림, 내림, 반올림, 버림 Javascript에서 소수점 2번째 자리에서 올림, 내림, 반올림, 버림 하는 방법은 다음과 같습니다. 올림 (ceil()) ceil()은 주어진 숫자 이상의 가장 작은 정수로 값을 올리는 함수입니다. function ceilTest(number) { return Math.ceil(number * 100) / 100; } // 예제 document.write(ceilTest(10.123)); // 10.13 document.write(' '); document.write(ceilTest(5.6781)); // 5.68 입력값이 10.123인 경우를 예로 들어 설명하겠습니다. number * 100; 주어진 숫자 10.123에 100을 곱하면 1012.3입니다. Math.ceil(number * 100).. 공감수 0 댓글수 0 2024. 1. 15.
[Javascript] 현재 시간 yyyymmddhhmmss 포맷으로 표현하기 Javascript에서 현재 날짜를 yyyymmddhhmmss 형식으로 표현하려면, 먼저 Date 객체를 활용하여 현재 날짜, 현재 시간을 구하고, 년, 월, 일, 시, 분, 초 정보를 읽어서 yyyymmddhhmmss 형식에 맞게 조합하여 줍니다. 먼저, 현재 날짜, 시간 구하는 방법이나, Javascript에서 날짜, 시간을 다루는 구체적인 방법은 아래 링크의 지난 포스팅을 참조하세요. [Javascript] 현재 날짜, 시간 구하기 [Javascript] Date 객체로 원하는 날짜, 시간 표현하기 [Javascript] 날짜 계산하기 (년/월/일 더하기, 빼기) [Javascript] 월의 마지막 날짜 계산하기 [Javascript] 날짜 계산 (Date) 마지막 날짜(말일)/윤달/윤년 처리하기 .. 공감수 0 댓글수 0 2024. 1. 11.
[Javascript] input 항목에 focus 이동 시키기 경우에 따라 input 항목에 자동으로 포커스를 이동시켜서 사용자 편의를 증가시킬 수 있습니다. 다음은, 버튼 클릭 시 input 항목에 focus를 이동시키는 예제입니다. focus() 클릭하세요 function btnClick() { const myinput = document.getElementById('my-input'); myinput.focus(); } HTML 버튼 클릭 시, btnClick() 함수를 호출합니다. JAVASCRIPT document.getElementById('my-input'); getElementById() 함수를 이용하여, 포커스를 이동시킬 input 요소를 선택합니다. myinput.focus(); focus() 함수를 이용하여, 포커스를 input 요소로 이동시킵니.. 공감수 0 댓글수 0 2024. 1. 10.
[Javascript] 버튼 클릭 시, input 값 변경하기 Javascript를 이용하여 버튼 클릭 시 input form의 값(value)을 변경하는 예제입니다. 버튼 클릭 시, input 값 변경하기 클릭하세요 function btnClick() { const myinput = document.getElementById('my-input'); myinput.value = "안녕하세요"; } HTML 버튼을 클릭하면, btnClick() 함수를 호출합니다. JAVASCRIPT document.getElementById('my-input'); getElementById() 함수를 이용하여, id가 my-input인 input form 요소를 선택합니다. myinput.value = '안녕하세요'; 선택한 input form 요소의 value를 '안녕하세요'로 변.. 공감수 0 댓글수 0 2024. 1. 9.
[Javascript] 버튼 클릭 시, div 보이기 숨기기 버튼을 클릭했을 때, Javascript를 이용하여 div 영역을 보여주거나 숨기는 예제입니다. 1. display 클릭하세요 #my-div { width: 100px; height: 100px; background-color: blue; } function btnClick() { const mydiv = document.getElementById('my-div'); if(mydiv.style.display === 'none') { mydiv.style.display = 'block'; }else { mydiv.style.display = 'none'; } } HTML 버튼 클릭 시, 호출할 함수를 연결합니다. JAVASCRIPT document.getElementById('my-div'); 보이기, 숨.. 공감수 0 댓글수 0 2024. 1. 7.
[Javascript] 오늘 날짜 yyyymmdd, yyyy-mm-dd 패턴으로 출력하기 Javascript에서 오늘 날짜를 구하고, yyyymmdd 또는 yyyy-mm-dd 형식으로 출력하는 방법입니다. 먼저, 오늘 날짜를 구하는 방법은 지난 포스팅을 참조하세요. [Javascript] 현재 날짜, 시간 구하기 [Javascript] 현재 날짜, 시간 구하기 JavaScript에서 현재 날짜와 시간을 구하는 방법을 알아보도록 하겠습니다. 현재 날짜 구하기 See the Pen CurrentDate by anna (@hianna) on CodePen. new Date()는 현재 날짜와 시간을 가지는 객체를 리턴합니다. 현 hianna.tistory.com 오늘 날짜 yyyymmdd, yyyy-mm-dd 패턴으로 출력하기 // 오늘 날짜 const today = new Date(); // 년도.. 공감수 1 댓글수 0 2024. 1. 6.
[Javascript] 숫자 앞뒤에 0 추가하기 (padStart(), padEnd()) Javascript의 숫자 앞 또는 뒤에 0을 추가하여 특정 자릿수의 문자열을 만드는 방법입니다. padStart(), padEnd() str.padStart(문자열길이 [, 채울문자]) str.padEnd(문자열길이 [, 채울문자]) padStart(), padEnd()는 문자열을 특정 길이로 패딩 하는 데 사용하는 메소드입니다. 이름에서도 알 수 있듯이, padStart()는 문자열의 앞에 '채울 문자'를 넣어서 원하는 길이의 문자열을 만들고, padEnd()는 문자열의 뒤에 '채울문자'를 넣어서 원하는 길이의 문자열을 만듭니다. const num = 1; // 00001 const str1 = num.toString().padStart(5, '0'); // 10000 const str2 = num... 공감수 1 댓글수 0 2023. 12. 25.
[Javascript] 함수 파라미터 기본값 설정하기 Javascript 함수의 파라미터 기본값을 설정하면 함수를 호출할 때, 파라미터가 전달되지 않으면 설정된 기본값을 사용합니다. 함수 파라미터 기본값 설정하기 function sayhi(greeting='Hi', name='Anna') { document.write(`${greeting}, ${name} `) } sayhi(); // Hi, Anna sayhi("안녕"); // 안녕, Anna sayhi(undefined, "Angela"); // Hi, Angela sayhi("안녕하세요", "영수님"); // 안녕하세요, 영수님 위 예제에서 sayhi() 함수는 greeting과 name, 2개의 파라미터를 입력받습니다. 그리고, 각각의 파라미터의 기본값은 'Hi', 'Anna'로 설정되었습니다. s.. 공감수 0 댓글수 0 2023. 12. 20.
[Javascript] 왼쪽에 있는 0 제거하기 (replace, 숫자 변환) Javascript 문자열의 왼쪽에 붙은 0을 제거하기 위해 다음의 2가지 방법을 사용할 수 있습니다. replace 함수 숫자 변환 parseInt() Number() *, + 를 이용한 숫자 변환 1. replace() 정규식을 이용하여, 문자열의 앞에 있는 '0'을 제거합니다. const num = "00123".replace(/^0+/, ''); replace() 함수는, 정규식에 해당하는 부분(첫번째 파라미터)을, 두 번째 파라미터로 입력받은 문자열로 치환합니다. 정규식 /^0+/ ^ : 문자열의 시작을 의미합니다. 0+ : 0이 1번 이상 반복되는 것을 나타냅니다. 따라서, 이 정규식은 문자열의 시작에서 0이 1개 이상 나타나는 부분을 찾습니다. const str1= '00123'; const.. 공감수 1 댓글수 0 2023. 12. 16.
[Javascript] 원단위 절사하기 Math.floor() 함수 원단위의 금액을 절사하기 위해서는 Math.floor()라는 함수를 사용합니다. Math.floor() 소수점 이하를 버림하는 함수입니다. [Javascript] 반올림(round), 올림(ceil), 내림(floor) - 소수점, 음수,자리수 지정 [Javascript] 반올림(round), 올림(ceil), 내림(floor) - 소수점, 음수,자리수 지정 올림(Math.ceil()) Math.ceil() 함수 정수 올림 (음수 포함) 자릿수 지정 내림(Math.floor()) Math.floor() 함수 정수 내림 (음수 포함) 자릿수 지정 반올림(Math.round()) Math.round() 함수 정수 반올림 (음수 포함) 자 hianna.tistory.com 예제 c.. 공감수 1 댓글수 0 2023. 6. 26.
[Javascript] Object(객체) key 존재 여부 확인하기 Object에 특정 이름의 key가 존재하는지 확인하기 위한 방법입니다. in 연산자 hasOwnProperty() 1. in 연산자 객체에 특정 키가 존재하는지 체크하기 위해서, in 연산자를 사용할 수 있습니다. 객체에 특정키가 존재하면 true를 리턴하고, 존재하지 않으면 false를 리턴합니다. const obj = { name: 'anna', age: 20 }; document.write('name' in obj); // true document.write(' '); document.write('address' in obj); // false 2. hasOwnProperty() hasOwnProperty() 메소드를 이용할 수도 있습니다. 마찬가지로, 객체에 특정키가 존재하면 true를 리턴하고.. 공감수 0 댓글수 0 2023. 3. 7.
[Javascript] 자식 노드 모두 삭제하기 Javascript를 사용하여 특정 노드의 모든 자식 노드를 삭제하는 방법입니다. innerHTML, textContent replaceChildren() removeChild(), remove() 1. innerHTML, textContent innerHTML 자식노드1 자식노드2 function remove_children() { // 부모 노드 선택 const parent = document.getElementById('parent'); // 자식 노드 삭제 parent.innerHTML = ""; } parent.innerHTML = ''; innerHTML 속성을 이용하면 element 안에 포함된 HTML 또는 XML을 읽어오거나 설정할 수 있습니다. 여기서는, parent 노드 안의 HTML.. 공감수 3 댓글수 0 2022. 7. 22.
[Javascript] 체크박스 초기화하기 체크박스 선택을 초기화하는 방법입니다. 체크박스 초기화 하기 개 고양이 토끼 function initCheckbox() { // 초기화할 checkbox 선택 const checkboxes = document.getElementsByName('animal'); // 체크박스 목록을 순회하며 checked 값을 초기화 checkboxes.forEach((checkbox) => { checkbox.checked = false; }) } 위 예제는 체크박스를 몇 개 선택한 후, '초기화' 버튼을 클릭하면 선택된 체크박스가 초기화 됩니다. const checkboxes = document.getElementsByName('animal'); 초기화할 체크박스 목록을 선택합니다. getElementsByName().. 공감수 2 댓글수 0 2022. 7. 21.
[Javascript] 특정 문자 제거하기 - 모두 제거, 대소문자 구분 (replace) Javascript의 문자열에서 특정 문자를 제거하기 위해서는 replace() 함수를 사용할 수 있습니다. replace() 특정 문자 제거하기 특정 문자 모두 제거하기 특정 문자 대소문자 구분 없이 모두 제거하기 replace() let newStr = str.replace(substr, newSubstr); replace() 함수는 str문자열에서 파라미터로 입력 받은 substr과 일치하는 부분을 찾아서, (substr은 일반 문자열이 될 수도 있고, 정규식이 될 수도 있습니다.) newSubstr로 교체한 문자열을 리턴합니다. (newSubstr은 일반 문자열이 될 수도 있고, 함수가 될 수도 있습니다.) 파라미터 substr 변경할 대상 문자열 (또는 정규식) 이 값이 일반 문자열일 경우, 전.. 공감수 3 댓글수 0 2022. 7. 20.
[Javascript] 노드 생성(텍스트), 추가, 변경, 삭제, 복사 총정리 Javascript에서 노드 생성, 텍스트 생성, 추가, 변경, 삭제, 복사하는 방법을 정리하였습니다. 생성 createElement() createTextNode() 추가 before() after() prepend() append() insertAdjacentHTML() insertAdjacentElement() insertAdjacentText() appendChild() appencChild() vs appned() insertBefore() 변경 repaceWith() replaceChild() 삭제 remove() removeChild() 복사 cloneNode() 1. 생성 createElement() let element = document.createElement(tagName); cre.. 공감수 3 댓글수 0 2022. 6. 26.
[Javascript] 특정 자식 노드 찾기 Javascript를 이용하여 dom에서 특정 부모 노드가 가지는 특정 자식 노드를 찾는 방법입니다. 부모 노드를 선택합니다. 부모 노드에서 특정 자식 노드를 선택합니다. 부모 노드를 선택하거나, 특정 자식 노드를 선택할 때 getElementById(), getElementsByClassName(), querySelector() 등의 노드 선택 함수를 사용할 수 있습니다. 노드를 선택하는 방법은 지난 포스팅을 참조하세요. [Javascript] 선택자, DOM 특정 요소(element) 찾기 Javascript에서 DOM의 특정 요소(element)를 찾는 방법을 정리합니다. 1. getElementById() 2. getElementsByClassName() 3. getElementByTagName(.. 공감수 2 댓글수 0 2022. 6. 25.
[Javascript] 자식 요소(element) 개수 확인하기 - childElementCount childElementCount DOM에서 Javascript를 이용하여 자식 요소(element)의 개수를 확인하기 위해서 Element의 childElementCount 속성을 사용할 수 있습니다. ParentNode.childElementCount childElementCount는 요소의 자식 요소(child element) 개수를 리턴합니다. (단, 이 속성은 IE9 이전 버전에서는 지원하지 않습니다.) 예제 바나나 사과 ======== 결과 ======== // parent element 선택 const parent = document.getElementById('parent'); // childElementCount 값 찍기 document.write(parent.childElementCoun.. 공감수 1 댓글수 0 2022. 6. 24.
[Javascript] 요소(element) 복사하여 붙여넣기 (cloneNode()) javascript에서 dom의 요소(element)를 복사하여 붙여넣기 하는 방법입니다. cloneNode() dom의 노드(node)를 복사하는 함수입니다. var dupNode = node.cloneNode(deep); 이 함수는 node를 복사하여, 복사본을 리턴(dupNode)합니다. 파라미터 deep (optional) true/false 요소의 하위 요소까지 모두 복사하려면 true 요소의 하위 요소를 제외하고 복사하려면 false default : false 또는 true (최신 브라우저에서는 default 값이 false 이지만, 구형 브라우저에서는 default 값이 true입니다. 따라서, 이 값은 optional 이지만, 가능하면 파라미터 값을 명확하게 작성해 주는 것이 좋습니다. .. 공감수 2 댓글수 0 2022. 6. 23.
[Javascript] 자식 노드(node), 요소(element) 존재 여부 확인하기 특정 element에 자식 노드(node)가 존재하는지, 자식 요소(element)가 존재하는지 확인하는 방법입니다. 자식 노드(node) 존재 여부 확인 자식 요소(element) 존재 여부 확인 시작하기 전에! node와 element의 차이가 궁금하다면? [Javascript] node와 element의 차이 Javascript에서 DOM을 다루다 보면 node와 element가 자주 등장합니다. 이 2가지를 다루는 방법이 조금 달라서 헷갈리는 경우가 많은데, 이번 포스팅에서는 node와 element의 차이점을 정리해 보도록 하겠 hianna.tistory.com 자식 node, 자식 element를 탐색하는 방법이 궁금하다면? [Javascript] 부모, 자식, 형제 노드(node)와 요소(e.. 공감수 1 댓글수 0 2022. 6. 22.
[Javascript] DOM에 특정 id element가 존재하는지 체크하기 DOM에 특정 id를 가지는 element가 있는지 체크하는 방법입니다. DOM에 특정 id element가 존재하는지 체크하기 document.getElementById(id); getElementById() 함수는 dom에서 특정 id를 가지는 element를 조회하는 함수입니다. 이 함수는, 만약 찾는 id를 가진 element가 없으면 null을 리턴합니다. 이런 점을 이용하여, dom에 특정 id를 가지는 element가 있는지 체크할 수 있습니다. 예제 사과 바나나 // 특정 id가 존재하는지 체크하는 함수 function checkElementExist(id) { if(document.getElementById(id)) { document.write(id + ' is exist' + ' ').. 공감수 0 댓글수 0 2022. 6. 21.
[Javascript] 클래스 이름으로 element 찾는 3가지 방법 Javascript에서 class 이름으로 element를 찾는 방법은 다음과 같습니다. getElementsByClassName() querySelector() querySelectorAll() getElementsByClassName() 클래스 이름을 파라미터로 입력받아서 해당 클래스를 가진 모든 element 목록을 HTMLCollection 형태로 리턴합니다. 예제 - getElementsByClassName() 수박 사과 포도 .green { color : green; } .red { color: red; } .purple { color: purple; } .underline { text-decoration: underline; } // class 이름으로 element 목록 조회 const e.. 공감수 0 댓글수 0 2022. 6. 20.
[Javascript] 부모, 자식, 형제 노드(node)와 요소(element) 찾기 지난번에는 node와 element의 차이에 대해서 정리해보았습니다. 이번에는 dom에서 부모, 자식, 형제 노드(node)와 요소(element)를 탐색하는 방법을 정리해 보도록 하겠습니다. node 탐색 부모(parent) 노드 자식(child) 노드 형제(sibling) 노드 element 탐색 부모(parent) 요소 자식(child) 요소 형제(sibling) 요소 1. node(노드) 탐색하기 dom은 node의 계층 구조로 이루어져 있습니다. 따라서, node에는 element, text, comment 등 여러 항목이 포함되어 있다는 것에 주의하세요. node의 부모, 형제, 자식은 아래 표와 같은 속성을 통해 접근할 수 있습니다. 부모(parent) 노드 탐색 parentNode : 부모.. 공감수 3 댓글수 2 2022. 6. 19.
[Javascript] node와 element의 차이 Javascript에서 DOM을 다루다 보면 node와 element가 자주 등장합니다. 이 2가지를 다루는 방법이 조금 달라서 헷갈리는 경우가 많은데, 이번 포스팅에서는 node와 element의 차이점을 정리해 보도록 하겠습니다. node vs element DOM 문서는 node의 계층 구조로 이루어져 있습니다. 이 node는 여러 가지 다양한 유형이 존재합니다. 요소(element), 텍스트, 주석 등등... element는 이러한 node의 여러가지 유형 중 한 가지입니다. 위 그림과 같이 element는 여러 가지 node의 유형 중 한 타입입니다. 즉, node는 element의 상위 개념입니다. 좀 더 자세히 설명하면, element는 html 문서에서 , , 과 같은 태그를 사용해서 작성.. 공감수 9 댓글수 1 2022. 6. 18.
[Javascript] 문자열에서 마지막 문자 제거하는 4가지 방법 Javascript에서 문자열의 마지막 문자를 제거하는 4가지 방법을 정리하였습니다. slice() substring() substr() replace() slice() slice() 함수는 문자열의 일부를 잘라서 새로운 문자열을 리턴합니다. str.slice(startIndex[, endIndex]) 파라미터 startIndex (필수 입력값) 잘라낼 문자열의 시작 index입니다. 0부터 시작합니다. 만약, 이 값이 음수이면, [문자열 길이 + startIndex]로 계산되어 실행됩니다. 예를 들어, 위 예제에서 startIndex가 -3이면, 이것은 (4+(-3)), 즉, 1과 같습니다. endIndex (optional) 문자열을 잘라낼 종료 index입니다. 0부터 시작합니다. 문자열이 추출될 .. 공감수 0 댓글수 0 2022. 6. 17.
[Javascript] 배열 값 전체 출력하기 (for, forEach, for in, for of) 반복문을 사용하여 배열의 값을 출력하는 방법을 정리해보았습니다. for forEach() for in for of for // 배열 선언 const arr = ['A', 'B', 'C']; // 배열 출력 (for 문) for(let i = 0; i < arr.length; i++) { document.write(arr[i] + ' '); } 가장 기본적인 반복문인 for문을 사용하여 배열의 값을 출력하였습니다. 배열은 0부터 순서대로 index가 증가하기 때문에, for문을 이용하여 index를 증가시키고, 이 index를 사용하여 배열에 순차적으로 접근하여 각각의 값을 출력하였습니다. forEach() // 배열 선언 const arr = ['A', 'B', 'C']; // 배열 출력 (forEach.. 공감수 1 댓글수 0 2022. 6. 16.
[Javascript] 숫자를 배열로 변경하는 2가지 방법 (Array.from(), split()) 이번 포스팅에서는 Javascript에서 숫자를 배열로 바꾸는 2가지 방법을 소개합니다. Array.from() split(), map() 1. Array.from() Array.from(arrayLike[, mapFn[, thisArg]]) Array.from() 함수는 유사배열객체(array like object)나 반복가능한객체(iterable object)를 얕은 복사(shallow-copy)하여 새로운 Array 객체를 만들어서 리턴합니다. 파라미터 arrayLike 필수 입력값 배열로 변환하고자 하는 객체(array like object 또는 iterable object)를 입력합니다. mapFn 배열의 요소(element)들에 호출할 맵핑 함수. thisArg mapFn 내에서 this로 사.. 공감수 2 댓글수 0 2022. 6. 4.
[Javascript] Number()와 parseInt()의 차이 Javascript에서 Number()와 parseInt()는 문자열을 숫자로 변환할 때 주로 사용됩니다. 이번에는 두 함수의 차이점을 정리해보도록 하겠습니다. Number() Number 객체는 숫자를 표현하는 wrapper 객체입니다. Number 객체는 Java나 C#에서의 double과 비슷합니다. 즉, Number 객체는 소수점 이하 17자리를 표현할 수 있습니다. Number()는 Number 객체의 Constructor로, Number 객체를 생성합니다. parseInt() parseInt()에 대한 설명은 이전의 포스팅을 참조하세요. [Javascript] 문자열 숫자로 변환하기 (1) - parseInt() 지난번에는 문자열이 숫자인지 아닌지 체크하는 방법을 알아보았습니다. [Javasc.. 공감수 2 댓글수 0 2022. 6. 3.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.