<h3>문제1. 색상 선택후 변경 버튼을 클릭하면 색상이 변경되도록 만들어 보세요</h3>
<div id="area1" class="area"></div>
<input type="color" id="selColor">
<button onclick="changeColor();">변경</button>
<!-- 버튼 클릭 시 선택된 색상으로 #area1 요소의 배경색 변경 -->
function changeColor(){
const selColor = document.getElementById("selColor");
// input 요소들의 입력된 값 : value 속성
console.log(selColor.value); // 16진수 형태의 색상값
document.getElementById("area1").style.background = selColor.value;
}; // input 요소에서는 value를 써야 된다.
const selColor = document.getElementById("selColor");
input요소는 value로 그 값을 구할 수 있다
input id 속성으로 접근을 하여
button onclick 이벤트 changColor() 메소드를 통해서
area1.style.background = selColor.value;로
button을 누르면 해당 이벤트가 발생하게 한다.
문제 2번
<h3>문제2. 버튼에 따른 크기조절이 가능하게 만들어 보세요</h3>
<div id="area2" class="area"></div>
<button onclick="halfSize();">50x50</button>
<button onclick="defaultSize();">원본(100x100)</button>
<button onclick="dobuleSize();">200x200</button>
function defaultSize(){
const area2 = document.getElementById("area2");
area2.style.width = "100px";
area2.style.height = "100px";
}
function halfSize(){
const area2 = document.getElementById("area2");
area2.style.width = "50px";
area2.style.height = "100px";
}
function dobuleSize(){
const area2 = document.getElementById("area2");
area2.style.width = "200px";
area2.style.height = "200px";
}
해당 버튼을 누르면 버튼에 담겨진 함수 내용이 출력된다.
문제 3번
<h3>문제3. 마우스오버 시 빨간색으로 변경되도록 만들어 보세요</h3>
<div id="area3" class="area"></div>
<!-- 마우스가 요소 바깥으로 나가는 경우 원래 색상(검정색)으로 돌아가도록 해주세요. -->
onload = function(){
const area3 = document.getElementById("area3");
area3.addEventListener('mouseenter',function(){
this.style.backgroundColor = 'red';
});
}
area3.addEventListener('mouseout',function(){
this.style.backgroundColor = 'black';
});
addEventListener는 자바스크립트에서 HTML 요소에 이벤트 핸들러를
추가할 때 사용하는 메서드
이 메서드를 사용하면 특정 이벤트를 감지하고
그 이벤트가 발생했을 때 실행될 함수를 지정할 수 있다
area3.addEventListener('mouseout',function(){
this.style.backgroundColor = 'black';
});
mouseout 마우스가
this 해당 요소 안을 빠져나갔을 떄 발생하는 이벤트이다
area3.addEventListener('mouseenter',function(){
this.style.backgroundColor = 'red';
});
mouseenter 마우스가 해당 요소 안으로 들어왔을 경우
발생하는 이벤트이다
window.onload
화면에 윈도우 객체의 로드가 완료되면 설정되어
있는 함수를 실행한다
* 윈도우 객체의 로드 완료 =>
모든 태그(요소)가 화면에 표시된 상태(시점)
onload = function(){
// 함수 실행 시점 -> 윈도우 객체 로드 완료된 상태
// 로드가 완료되고 3초 후 div#area2 영역에 "오늘은 화요일입니다."를 표시
setTimeout(function(){
document.getElementById("area2").innerHTML = "오늘은 화요일 입니다";
document.getElementById("area2").style.border = "2px solid red";
}, 3*1000);
}
onload 사용 예
setTimeout(function(){
} 3*1000)
