일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Button
- 자바
- date
- Maven
- Visual Studio Code
- CMD
- 문자열
- 이클립스
- IntelliJ
- Eclipse
- Java
- Files
- javascript
- 인텔리제이
- windows
- list
- ArrayList
- 배열
- json
- 테이블
- table
- input
- 이탈리아
- vscode
- js
- 자바스크립트
- Array
- string
- html
- CSS
- Today
- Total
목록자바스크립트 (143)
어제 오늘 내일
지난번에는 테이블의 행을 삭제하고 추가하는 방법을 알아보았습니다. [Javascript] 테이블에 행 추가, 삭제하기 (버튼 클릭) [Javascript] 테이블에 행 추가, 삭제하기 (버튼 클릭) 이번에는 버튼을 클릭하여 테이블에 행을 추가하고 삭제하는 방법을 알아보도록 하겠습니다. 1. 테이블에 행 추가하기 - insertRow(), insertCell() 2. 테이블에 행 삭제하기 - deleteRow() 1. 테이블에 행 추 hianna.tistory.com 이번에는 버튼을 클릭 했을 때, 테이블의 행을 숨기거나, 보여주는 방법을 정리해 보겠습니다. display 스타일 속성 사용하여 행 숨기기/보이기 사과apple 오렌지orange 바나나banana function hideRow() { cons..
Javascript에서 좌표를 나타내는 값인 다음 값들에 대해서 정리해 보겠습니다. 그리고, 마우스를 클릭했을 때 좌표값을 보여주는 코드도 작성해 보겠습니다. 1. screenX, screenY 2. pageX, pageY 3. clientX, clientY 4. offsetX, offsetY 1. screenX, screenY 사용자 모니터 화면을 기준으로 한 좌표를 표시합니다. 사용자 모니터의 왼쪽 상단 모서리가 (0, 0)이 됩니다. 2. pageX, pageY 전체 문서를 기준으로 한 좌표를 표시합니다. 위 그림과 같이, 만약 문서를 표현할 때 스크롤이 생긴다면, 특정 지점의 pageY 좌표값은 페이지가 스크롤 될때마다 변경 될 것입니다. 3. clientX, clientY 브라우저에서 사용자에게..
Javascript에서 처리할 수 있는 키보드 이벤트의 종류를 정리하였습니다. 1. 키보드 이벤트의 종류 keydown - 사용자가 키보드의 키를 눌렀을 때 발생합니다. keyup - 사용자가 키보드의 키를 눌렀다가 떼었을 때 발생합니다. keypress - 사용자가 키보드를 눌렀을 때 발생합니다. - Alt, Ctrl, Shift, Esc 키등 몇 가지 키에서는 이 이벤트를 발생시키지 않습니다. - 이 이벤트는 사용을 권장하지 않습니다. 2. keydown, keyup, keypress 예제 const my_input = document.getElementById('my_input'); const clear_btn = document.getElementById('clear'); const result_..
Javascript에서 이벤트가 한번만 실행되도록 하는 방법을 정리합니다. 등록된 이벤트가 한번만 실행되도록 하기 위해서는 addEventListener() 함수를 사용하여 이벤트를 등록할 때 once 옵션을 추가해 줍니다. addEventListener()의 once 옵션 사용하기 const my_btn = document.getElementById('my_btn'); my_btn.addEventListener('click', () => { alert('안녕하세요!!'); }, { once : true}); 버튼을 클릭했을 때, 한번만 동작하도록 하기 위해 addEventListener() 메소드의 3번째 파라미터로 { once : true } 인 객체를 전달하였습니다.
이번에는 element에 이벤트를 추가, 삭제 하는 방법을 정리해 보도록 하겠습니다. 1. 이벤트 추가하기 - addEventListener() 2. 이벤트 제거하기 - removeEventListener() 1. 이벤트 추가하기 - addEventListener() 객체에 이벤트를 추가하려면 addEventListener() 메소드를 사용합니다. element.addEventListener(type, eventListener); addEventListener()는 2개의 파라미터를 입력받습니다. - type : 이벤트 타입 - eventListener : 이벤트가 발생했을 때 실행할 함수 이벤트 추가하기 const my_btn = document.getElementById('my_button'); my..
마우스 이벤트의 종류를 알아보고, 각 이벤트들이 언제 어떻게 동작하는지 정리해 보았습니다. 0. 마우스 이벤트의 종류 1. click, mousedown, mouseup 2. dblclick 3. mousemove 4. mouseover, mouseout 5. mouseenter, mouseleave 6. mouseover, mouseout와 mouseenter, mouseleave 차이점 7. contextmenu 0. 마우스 이벤트의 종류 1. click - 사용자해 해당 element를 클릭했을 때(버튼을 눌렀다가 떼었을 때) 발생 합니다. 2. mousedown - 사용자가 해당 element에서 마우스 버튼을 눌렀을 때 발생합니다. 3. mouseup - 사용자가 해당 element에서 눌렀던 ..
Javascript에서 숫자를 문자열로 변환하는 4가지 방법을 정리합니다. 1. toString() 2. String() 3. Template String (템플릿 문자열) 4. 빈 문자열 이어붙이기 1. toString() const str1 = (123.1).toString(); const str2 = (123).toString(); const str3 = (3).toString(2); document.write(str1 + ', ' + typeof str1 + ' '); document.write(str2 + ', ' + typeof str2 + ' '); document.write(str3 + ', ' + typeof str3 + ' '); toString() 메소드를 호출하여 숫자를 문자열로 변..
지난번에는 숫자에 세자리마다 콤마를 추가하는 방법을 알아보았습니다. 이번에는 콤마가 있는 숫자 문자열에서 콤마를 제거하는 방법을 정리해 보도록 하겠습니다. 1. replace() 함수 사용하기 2. split(), join() 함수 사용하기 1. replace() 함수 사용하기 const numberStr = "123,456,789"; // 콤마 제거 const number = numberStr.replace(",", ""); document.write(number); 숫자 문자열의 콤마를 제거하기 위해서 replace() 함수를 사용하였습니다. replace() 함수는 2개의 파라미터를 입력받고, 문자열에서 첫번째 파라미터(여기서는 ",")를 두번째 파라미터(여기서는 "")로 치환해 줍니다. 그런데, ..
배열의 원소를 삭제하는 다양한 방법을 정리해 보았습니다. 1. 배열 전체 값 삭제 2. 배열 첫번째 값 삭제 3. 배열 뒤에서 삭제 4. 특정 index의 값 삭제 5. 특정 값 삭제 1. 배열 전체 값 삭제 빈 배열 할당하기 let arr = ['a', 'b', 'c']; // 배열 값 전체 삭제 arr = []; document.write(arr.length); arr = []; 배열 전체 값을 모두 삭제하고, 빈 배열로 만들기 위해 새로운 빈 배열을 만들어서, 배열 변수에 할당 하였습니다. 배열의 길이를 0으로 변경하기 let arr = ['a', 'b', 'c']; // 배열 값 전체 삭제 arr.length = 0; document.write(arr.length); arr.length = 0; ..