어제 오늘 내일

마우스 오른쪽 버튼을 클릭하면 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를 넣어줍니다. 파라..

숫자 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)..

태그는 사용자의 입력을 돕기 위해, 콤보박스 형태로 사용자가 추천할 수 있는 선택지를 제공하고, 자동완성 기능을 제공합니다. 1. 태그 알아보기 2. 에 value와 label 추가하기 3. default 값 지정하기 4. 의 option 전체 목록 가져오기 1. 태그 알아보기 태그는 위 예제에서 보는 것처럼 태그에 연결되어 사용자가 값을 쉽게 입력 할 수 있도록 추천 목록을 제공하고, 사용자가 추천목록 안의 값을 타이핑 할 경우 자동완성 되는 기능을 제공합니다. datalist가 제공하는 추천목록 이외의 값을 입력할 수도 있습니다. 콤보박스와 텍스트 입력 창을 합쳐 놓은 것과 비슷합니다. 주의할 점은 의 list에 정의된 값과 의 id 값이 같아야 한다는 것입니다. 이 두 속성이 두 태그를 연결해주는 ..

select 태그를 사용한 콤보박스에서 선택한 값과 텍스트를 출력하는 방법을 소개합니다. 1. 콤보박스(select)에서 선택한 값 출력하기 2. 콤보박스(select)에서 선택한 텍스트 출력하기 3. 중복선택 된(multiple) 값과 텍스트 출력하기 먼저 select 태그를 이용하여 콤보박스를 만드는 방법은 아래 링크의 이전 포스팅을 참조하세요. [HTML] 콤보박스(select) (1) - 기본값 지정, 비활성화, 항목 비활성화 [HTML] 콤보박스(select) (2) - 사이즈 지정, 중복선택, 카테고리 설정 1. 콤보박스(select)에서 선택한 값 출력하기 한국어 영어 중국어 스페인어 function handleOnChange(e) { // 선택된 데이터 가져오기 const value = e..

1. oninput 이벤트, 정규식, replace() 함수 사용하기 2. pattern 속성 적용하기 1. oninput 이벤트, 정규식, replace() 함수 사용하기 function handleOnInput(e) { e.value = e.value.replace(/[^A-Za-z]/ig, '') } (JS, HTML 탭을 클릭하여 소스코드를 확인하세요) 이 코드는 사용자가 알파벳이 아닌 다른 값을 입력하면 아예 입력이 되지 않습니다. input에 사용자가 값을 입력하면 handleOnInput 함수를 실행시키고, 이 함수는 사용자가 입력한 값을 replace함수와 정규식을 활용하여 입력한 값에 알파벳이 아닌 문자가 있는 경우 공백으로 변환시켜서 input에 다시 넣어줍니다. 2. pattern 속..

Javascript의 input 폼에 입력되는 최대 글자수를 제한하는 방법 2가지를 알아보도록 하겠습니다. 1. maxlength 속성 사용하기 2. 입력된 글자수를 체크로직 구현하기 1. maxlength 속성 사용하기 maxlength 속성을 지정하여 최대 입력 글자수를 제한할 수 있습니다. 위 예제는 최대 5글자까지만 입력이 가능합니다. 그러나, 이 방법은 input의 type이 'text, search, url, tel, email, password' 일 경우에만 유효합니다. type이 'number'일 경우에는 유효하지 않습니다. 따라서, type이 'number'인 경우에는 다음의 방법을 사용해야 합니다. 2. 입력된 글자수를 체크로직 구현하기 function handleOnInput(elem..

체크박스를 활용하는 다양한 방법을 알아보고 있습니다. [HTML] input 태그로 체크박스(checkbox) 만들기` [Javascript] 체크박스(checkbox)에 선택 된 값 출력하기 [Javascript] 체크박스에 체크된 항목 개수 구하기 [Javascript] 체크박스 전체 선택 / 전체 해제 구현하기 [Javascript] 체크박스 중, 하나라도 선택해제 될 경우 전체 선택 해제 하는 2가지 방법 체크박스는 보통 다중 선택이 필요할 때 많이 사용됩니다. 만약, 사용자가 여러 개의 항목 중 한 가지만 선택해야 한다면 라디오 버튼을 사용해야 합니다. [HTML] input 태그로 라디오버튼(radio) 만들기 [Javascript] 라디오 버튼(radio) 값 가져와서 출력하기 [Javasc..

지난 번에는 체크박스 목록 전체 선택/전체 선택해제 하는 방법을 알아보았습니다. [Javascript] 체크박스 전체 선택 / 전체 해제 구현하기 [Javascript] 체크박스 전체 선택 / 전체 해제 구현하기 체크박스 전체 선택/전체 해제 구현하는 2가지 방법을 소개합니다. 1. Document.getElementsByName() 활용하기 2. Document.querySelectorAll() 활용하기 1. Document.getElementsByName() 활용하기 Select All.. hianna.tistory.com 그런데, 이전 포스팅의 예제에서는 전체 선택 후, 개별 항목을 선택 해제하여도 전체 선택 항목의 체크박스가 자동으로 선택 해제 되지 않습니다. 이번에는, 개별 항목 중 하나라도 선..