어제 오늘 내일

Javascript에서 문자열을 거꾸로 뒤집는 방법을 소개합니다. 예제 1. const str = 'abcde'; // 1. 문자열을 배열로 변환하기 const step1 = str.split(''); document.write('step1 : ' + step1); document.write(' '); // 2. 배열을 거꾸로 뒤집기 const step2 = step1.reverse(); document.write('step2 : ' + step2); document.write(' '); // 3. 배열을 문자열로 변환하기 const step3 = step2.join(''); document.write('step3 : ' + step3); const step1 = str.split(''); split()..

for 반복문 사용 reverse() 함수 reverse() 함수 - 원본 배열 유지하기 1. for 반복문 사용 const arr = ['Apple', 'Banana', 'Orange']; // 배열 거꾸로 const reverse = []; for(let i=arr.length-1; i >= 0; i--) { reverse.push(arr[i]); } // 결과 출력 document.write('arr : ' + arr); document.write(' '); document.write('reverse : ' + reverse); 반복문을 사용하여 배열을 거꾸로 뒤집었습니다. 2. reverse() 함수 reverse() 함수는 배열의 순서를 거꾸로 만들어 줍니다. array.reverse() 이 함..

join() 함수 사용하기 toString() 함수 사용하기 1. join() 함수 사용하기 arr.join(separator) join() 함수는 배열의 모든 값들을 연결한 문자열을 리턴합니다. 이때 각각의 값들 사이에는 파라미터로 입력된 구분자(separator)가 들어가게 됩니다. 만약, separator를 입력하지 않은 경우, default로 ','가 들어갑니다. const arr = ['Apple', 'Banana', 'Orange']; // "Apple,Banana,Orange" const str1 = arr.join(); // "Apple-Banana-Orange" const str2 = arr.join('-'); // "AppleBananaOrange" const str3 = arr.joi..

올림(Math.ceil()) Math.ceil() 함수 정수 올림 (음수 포함) 자릿수 지정 내림(Math.floor()) Math.floor() 함수 정수 내림 (음수 포함) 자릿수 지정 반올림(Math.round()) Math.round() 함수 정수 반올림 (음수 포함) 자릿수 지정 소수점 숫자 정밀도 문제 소수점 반올림 (toFixed(), toPrecision()) toFixed() 함수 toPrecision() 함수 1. 올림(Math.ceil()) Javascript에서 숫자를 올림 처리할 때는 주로 Math.ceil() 함수를 사용합니다. Math.ceil() 함수 Math.ceil(x) 입력받은 숫자보다 크거나 같은 정수 중 가장 작은 정수를 리턴합니다. 즉, 입력받은 숫자를 올림한 정수..

마우스 오른쪽 버튼을 클릭하면 Context 메뉴가 나옵니다. 이번에는 마우스 오른쪽 버튼을 클릭했을 때, 이 Context 메뉴가 뜨지 않도록 하는 방법을 소개합니다. return false 하기 여기서 마우스 오른쪽 클릭해보세요. div { border: 1px solid black; padding: 10px; height: 150px; width: 150px; } - oncontextmenu 이벤트는 마우스 오른쪽을 클릭했을 때 발생합니다. - oncontextmenu가 호출되었을 때 return false하면, 마우스 오른쪽을 클릭해도 context 메뉴가 열리지 않습니다. preventDefault() 활용하기 여기서 마우스 오른쪽 클릭해보세요. div { border: 1px solid bla..

테이블의 특정 열의 값들의 합계를 계산하는 방법입니다. 테이블 합계 계산하기 사과100 오렌지200 바나나300 function calcSum() { // table element 찾기 const table = document.getElementById('fruits'); // 합계 계산 let sum = 0; for(let i = 0; i < table.rows.length; i++) { sum += parseInt(table.rows[i].cells[1].innerHTML); } // 합계 출력 document.getElementById('sum').innerText = sum; } 위 예제는 '합계 계산' 버튼을 클릭하면, 테이블의 2번째 column의 값들을 모두 더해서 출력해 줍니다. 각 row..

이번에는 버튼을 클릭하여 테이블에 행을 추가하고 삭제하는 방법을 알아보도록 하겠습니다. 1. 테이블에 행 추가하기 - insertRow(), insertCell() 2. 테이블에 행 삭제하기 - deleteRow() 1. 테이블에 행 추가하기 - insertRow(), insertCell() insertRow(), insertCell() 함수 테이블에 행(Row)를 추가하기 위해서는 insertRow(), insertCell() 함수를 사용합니다. insertRow() var newRow = HTMLTableElement.insertRow(index); table element에 새로운 행을 추가해 줍니다. 파라미터 index 새로 생성된 행(row)가 테이블에 들어갈 위치 index를 넣어줍니다. 파라..

HTML에서 테이블을 표현하고, 테이블의 셀을 병합하는 방법을 알아보도록 하겠습니다. 먼저, HTML로 테이블을 그리는 방법을 모른다면 지난 포스팅을 참조하세요. [HTML] 기본 테이블(표, Table) 그리기 (table, tr, td, th) [HTML] 테이블 제목 지정하기, caption tag 아래 예제 테이블을 가지고 가로, 세로 셀 병합을 해 보도록 하겠습니다. 학년 반 1 1 1 2 2 1 세로 셀 병합하기 (rowspan) 학년 반 1 1 2 2 1 위 코드는 2개의 '1학년' 항목이 2 row가 병합되었습니다. 2개의 row가 병합되었으므로, 결국 세로 방향으로 합쳐진 셀이 만들어진 것입니다. 여러줄의 row를 병합 할때는 위의 예시처럼 병합을 시작하려는 cell에 rowspan을 정..

숫자 3자리마다(천단위) 콤마를 찍어서 문자열로 리턴하는 2가지 방법을 소개합니다. 1. 정규식(Regular Expression) 이용하기 2. toLocaleString() 함수 이용하기 1. 정규식(Regular Expression) 이용하기 const n1 = 12345.6789; const n2 = -12345.6789; const cn1 = n1.toString() .replace(/\B(? 정규식을 사용하여 천단위마다 콤마를 추가한 예제입니다. 2. toLocaleString() 함수 이용하기 toLocaleString() 함수 toLocaleString() 함수를 사용하여 간단하게 천단위마다 콤마를 추가할 수 있습니다. number.toLocaleString(locales, options)..

datalist와 select는 비슷해보이지만, 차이점이 있습니다. === 선택 === 한국어 영어 중국어 스페인어 select는 사용자가 선택할 수 있는 선택 항목을 제공하고, 그 범위내에서만 선택이 가능합니다. [HTML] 콤보박스(select) (1) - 기본값 지정, 비활성화, 항목 비활성화 [HTML] 콤보박스(select) (2) - 사이즈 지정, 중복선택, 카테고리 설정 [Javascript] 콤보박스(select)에서 선택한 값, 텍스트 출력하기 datalist는 option 목록에 없는 값도, 사용자의 입력을 받을 수 있습니다. 사용자가 입력창에 타이핑을 하면, option 목록에서 일치하는 값을 찾아서 자동완성 기능을 제공합니다. 자동완성 기능을 제공하기 때문에, 사용자가 선택해야 할 ..