일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 자바
- IntelliJ
- 인텔리제이
- vscode
- Files
- date
- input
- Button
- 이탈리아
- json
- CMD
- 자바스크립트
- Visual Studio Code
- html
- string
- 배열
- list
- 테이블
- javascript
- js
- Array
- Eclipse
- Java
- 문자열
- Maven
- 이클립스
- ArrayList
- CSS
- windows
- table
- Today
- Total
목록IT/Javascript (181)
어제 오늘 내일
지난번에는 안의 내용을 추가, 변경, 삭제하고, 읽어오는 방법을 알아보았습니다. [Javascript] div 안의 내용 가져오기, 추가, 변경, 삭제 (text, html) 이번에는 태그를 생성하고, 삭제하고, 숨기는 방법을 정리해 보도록 하겠습니다. 1. element 생성하기 function createDiv() { // 1. element 만들기 const newDiv = document.createElement('div'); // 2. 에 들어갈 text node 만들기 const newText = document.createTextNode('안녕하세요'); // 3. 에 text node 붙이기 newDiv.appendChild(newText); // 4. 에 1에서 만든 element 붙이기..
태그 안에 있는 내용을 읽고, 추가하고, 변경하고, 삭제하는 방법을 정리해보았습니다. 1. div 내용 가져오기 2. div 내용 변경 3. div 내용 추가 4. div 내용 삭제 1. div 내용 가져오기 안녕하세요? Javascript에서 div element에 접근하여, div 안의 내용을 읽을 때는 다음 3가지 속성을 사용할 수 있습니다. element.innerHTML element 안의 HTML, XML을 읽습니다. element.innerText element 안의 텍스트를 사용자에게 "보여지는 대로" 읽습니다. node.textContent node 안의 텍스트를 (, 에 상관없이) 읽습니다. 위 3가지 속성의 차이점은 지난 포스팅을 참조하세요. [Javascript] innerText와..
innerHTML, innerText, textContent 속성은 node나 element의 텍스트값을 읽어오고 설정할 수 있다는 점에서 비슷합니다. innerHTML과 innerText의 차이점은 지난 포스팅에서 살펴보았습니다. [Javascript] innerText와 innerHTML의 차이점 이번에는 innerHTML, innerText, textContent 세가지의 차이점을 정리해보겠습니다. innerHTML vs innerText vs textContent 안녕하세요? 만나서 반가워요. 숨겨진 텍스트 function getInnerHTML() { const element = document.getElementById('my_div'); alert(element.innerHTML); } fu..
버튼에 강제 클릭 이벤트 발생 시키기 (click()) function handleInputOnkeyup() { document.getElementById('my_btn').click(); } function handleButtonOnclick() { alert('버튼이 클릭되었습니다!!'); } 위 예제는 사용자가 input 창에 키보드로 값을 입력했을 때 강제로 '확인'버튼의 이벤트를 발생시키는 예제입니다. 조금 이상하지만, 특정 이벤트가 발생했을 때 버튼을 강제로 클릭시키는 것을 보여주기 위해 이렇게 만들었습니다. 먼저 '확인' 버튼을 눌러보세요. '확인' 버튼을 클릭하면, '버튼이 클릭되었습니다!!' 라는 alert 창이 뜹니다. input 창에 키보드로 아무거나 타이핑을 해보세요. input 창..
innerText와 innerHTML은 단순한 텍스트만 다룰 경우에는 차이가 없어 보입니다. 이 두 속성은 다루는 값이 text element인지, html element인지에 따라 차이가 납니다. 값 가져오기 (innerText vs innerHTML) A B function getInnerText() { const element = document.getElementById('content'); // A // B alert(element.innerText); } function getInnerHTML() { const element = document.getElementById('content'); // A // B alert(element.innerHTML); } element.innerText; ..
HTML에서 페이지를 이동할 때는 보통 태그를 사용하여 링크를 만듭니다. 그렇지만, 버튼을 클릭했을 때, 다른 페이지로 이동하고 싶다면 어떻게 해야할까요? 버튼 클릭시 페이지 이동하기 function newPage() { window.location.href = 'https://hianna.tistory.com' } window.location.href = 'https://hianna.tistory.com'; 버튼에 onclick 이벤트가 발생하면, newPage() 함수가 호출되고, 이 함수는 window.location.href 값을 새로운 페이지로 변경합니다. window.location.href는 현재 열려 있는 페이지 주소를 담고 있는 속성입니다. 여기서는 페이지를 이동하기 위해 이 값을 바꾸어..
Javascript에서 버튼을 활성화/비활성화 하는 방법을 알아봅니다. input 태그의 disabled 속성 HTML의 태그를 사용한 버튼을 활성화/비활성화 할때는 disabled 속성을 이용합니다. 기본적으로 input 태그에 disabled 속성을 따로 명시해 주지 않으면, 버튼은 활성화됩니다. input 태그에 disabled 속성을 명시해 주면, 버튼이 비활성화 됩니다. disabled 속성에 어떤 값을 주면, 버튼은 활성화되게 됩니다. 따라서, disabled 속성에 값을 주면서, 버튼을 비활성화 하고 싶다면 'disabled'라고 명시해 주어야 합니다. 버튼 클릭하여 활성화/비활성화 하기 '활성화' 또는 '비활성화' 버튼을 클릭하세요 function btnActive() { const tar..
브라우저에서 버튼을 클릭했을 때, 숫자를 증가/감소 시키는 코드입니다. 버튼 클릭시 숫자 증가/감소 시키기 0 function count(type) { // 결과를 표시할 element const resultElement = document.getElementById('result'); // 현재 화면에 표시된 값 let number = resultElement.innerText; // 더하기/빼기 if(type === 'plus') { number = parseInt(number) + 1; }else if(type === 'minus') { number = parseInt(number) - 1; } // 결과 출력 resultElement.innerText = number; } HTML onclick=..
HTML로 이미 정의한 버튼의 이름을 이벤트가 발생했을 때 변경하는 방법입니다. 여기서는 버튼을 클릭했을 때, 버튼의 이름을 변경해 보도록 하겠습니다. 1. 일 경우 2. 일 경우 1. 일 경우 function changeBtnName() { const btnElement = document.getElementById('btn'); btnElement.value = "새이름!"; } btnElement.value = "새이름!"; 버튼이 으로 정의된 경우 element의 value 값을 변경하여, 버튼 이름을 변경할 수 있습니다. 2. 일 경우 텍스트 변경 하기 클릭!! function changeBtnName() { const btnElement = document.getElementById('btn'..
지난 번에는 테이블에 행(row)를 추가/삭제하는 방법을 알아보았습니다. 이번에는, 테이블에 열을 추가하고, 삭제하는 방법을 알아보도록 하겠습니다. 열(column) 추가하기 사과apple 오렌지orange 바나나banana function addColumn() { const table = document.getElementById('fruits'); for(let i = 0; i < table.rows.length; i++) { const newCell =table.rows[i].insertCell(-1); newCell.innerText = 'New'; } } document.getElementById('fruits'); 열을 추가할 테이블을 선택합니다. table.rows.length; 테이블의 행..