1. DOM을 이용한 이벤트(2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>이벤트예제</title>
<script>
// 웹페이지의 모든 리소스가 로드된 후 실행되는 이벤트 핸들러
window.onload = function () {
// 버튼 요소를 가져옴
var myButton = document.getElementById('myButton');
// 버튼에 클릭 이벤트 핸들러를 추가한다.
myButton.onclick = function () {
alert('버튼이 클릭되었습니다!');
};
};
</script>
</head>
<body>
<button id="myButton">클릭하세요</button>
</body>
</html>- 자바스크립트 dom객체로 다음과 같은 방법을 html에 직접 접근.
document.images.img2.src- 제공된 코드: 자바스크립트에서 document.images 객체 내에서 name 또는 id속성이 img2인 이미지 요소의 src속성에 접근.
- document: 현재 웹 페이지 문서객체모델에 접근하는 내장객체
- images: document 객체의 하위속성. 웹페이지에 있는 모든 이미지 요소를 포함
- img2: name 또는 id가 "img2"인 이미지 요소를 찾는데 사용하는 식별자
- src: 이미지 요소의 속성 중 하나임. 이미지 파일 소스 경로
<script>
<img src = "1.gif" id="img1">
<img src = "2.gif" id="img2">
<img src = "3.gif" id="img3">
document.images.img2.src
document.getElementById("img2").src = "new_image.gif"; // 새로운 이미지
document.images[1].src = "new_image.gif";
</script>- "img2"라는 id를 가진 이미지는 마우스 오버시 2.gif으로 바뀜. 마우스 아웃시 1.gif으로 바뀜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
window.onload = function () {
// 화면이 다 호출된 후 다음 코드 실행
// 화면이 다 불려지지 않고 다음 코드가 실행되면 위에서 아래로 실행되는 코드 특성상 아직 생성되지 않은
// html구조 DOM을 호출해서 오류가 발생.
var img2 = document.getElementById('img2');
img2.onmouseover = function () {
img2.src = '2.gif';
};
img2.onmouseout = function () {
img2.src = '1.gif';
};
};
</script>
</head>
<body>
<a href="http://www.daum.net">
<img
src="images/1gif.jpg"
id="img1"
border="5"
onmouseover="document.images.img1.src='2gif.jpg'"
onmouseout="document.images.img1.src='1gif.jpg'"
/>
</a>
<a href="http//www.daum.net">
<img src="images/1gif.jpg" id="img2" border="5" />
</a>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
/*
document.getElementById("id"); // id이용해서 찾기
document.getElementsByTagName("div"); 태그를 이용해서 찾기
document.getElementsByClassName("myClass"); class을 이용해서 찾기
document.querySelectorAll(); CSS선택자 이용해서 찾기
*/
window.onload = function () {
var myP = document.getElementsByTagName('p'); // 배열로 생성
var myP = document.getElementsByClassName('myClass');
var myP = document.querySelectorAll('p.myClass');
var myP = document.querySelectorAll('.myClass2');
};
</script>
</head>
<body>
<p class="myClass2">p1태그</p>
<p class="myClass">p1태그2</p>
<p class="myClass">p1태그3</p>
</body>
</html>2. JavaScript를 이용한 사용자 입력 처리
(1) 사용자 입력을 처리하는 4가지 방법
1. textContent로 화면에 보이지 않는 텍스트와 보이는 텍스트를 가져옴
2. innerText로 화면에 보이는 텍스트를 가져옴
3. innerHTML로 HTML을 가져옴
4. value로 <input> 요소의 사용자 입력값을 가져옴<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>textContent vs. innerText vs. innerHTML vs. value차이예제</title>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<!-- textContent예제 -->
<div id="textContentExample">
이것은 <strong class="hide">textContent</strong>와 <em>innerText</em>의
차이를 보여주는 예제입니다.
</div>
<!-- innerText예제 -->
<div id="innerTextExample">
이것은 <strong class="hide">innerText</strong>와 <em>textContent</em>의
차이를 보여주는 예제입니다.
</div>
<!-- innerHTML예제 -->
<div id="innerHTMLExample">
이것은 <strong class="hide">innerHTML</strong>와 <em>textContent</em>의
차이를 보여주는 예제입니다.
</div>
<!-- value예제 -->
<input type="text" id="valueExample" value="이것은 value예제입니다" />
<script>
// textContent로 텍스트 가져오기(숨겨진 요소 포함)
var textContentElement = document.getElementById('textContentExample');
var textContentValue = textContentElement.textContent;
// innerText로 텍스트 가져오기(숨겨진 요소 무시)
var innerTextElement = document.getElementById('innerTextExample');
var innerTextValue = innerTextElement.innerText;
// innerHTML로 HTML 가져오기
var innerHTMLElement = document.getElementById('innerHTMLExample');
var innerHTMLValue = innerHTMLElement.innerHTML;
// input 요소의 value 가져오기
var valueInputElement = document.getElementById('valueExample');
var valueInputValue = valueInputElement.value;
console.log('textContent 값: ' + textContentValue);
console.log('innerText 값: ' + innerTextValue);
console.log('innerHTML 값: ' + innerHTMLValue);
console.log('value 값: ' + valueInputValue);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML 테이블 추가 예제</title>
<script>
function addTable() {
// onload에 정의하지 않은 이유는 함수는 화면이 다 불러진 후에 사용되기 때문
// 테이블을 만들기 위해 HTML 문자열 생성
var tableHTML = `
<table>
<tr>
<td>셀 1-1</td>
<td>셀 1-2</td>
</tr>
<tr>
<td>셀 2-1</td>
<td>셀 2-2</td>
</tr>
</table>
`;
// tableContainer에 새로운 테이블의 HTML 문자열 추가
var tableContainer = document.getElementById('tableContainer');
tableContainer.innerHTML += tableHTML;
// 추가된 HTML 출력
var addedHTML = tableContainer.innerHTML;
console.log('추가된 HTML:\n + addedHTML');
}
</script>
</head>
<body>
<h1>테이블 추가 예제</h1>
<button onclick="addTable()">테이블 추가</button>
<div id="tableContainer"></div>
</body>
</html>
IT 개발자가 되기 위한 기록