✍ css 요소를 직접 태그해서 만들기?
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="div">DIV</div>
<script type="text/javascript">
let myDiv = document.querySelector("#div");
myDiv.addEventListener("mouseover", function() {
console.log("mouseover");
myDiv.style.color = "red";
this.style.fontWeight = "bold";
})
myDiv.addEventListener("mouseout", function() {
console.log("mouseout");
this.style.color = "";
this.style.fontWeight = "";
})
</script>
</body>
✍ div 영역(id="div") 요소 선택해서 변수 myDiv 에 저장
let myDiv = document.querySelector("#div");✍ div 영역(id="div") 요소에서 "mouseover" 이벤트 발생 시 수행할 익명 함수 정의
myDiv.addEventListener("mouseover", function() {
console.log("mouseover"); //확인용
//대상 요소(텍스트)의 css 속성 중 color 속성(글자색)을 "red"로 변경
myDiv.style.color = "red";
// 대상 요소(텍스트)의 css 속성 중 font-weight 속성(글자굵기)dmf "bold"로 변경
this.style.fontWeight = "bold";
});- 대상 요소는 변수에 저장된 대상을 지정해도 되지만, 이벤트 핸들러 내에서 이벤트 발생한 대상을 this로 지정가능하다.
✍ div 영역(id="div") 요소에서 "mouseout" 이벤트 발생 시 수행할 익명 함수 정의
myDiv.addEventListener("mouseout", function() {
console.log("mouseout"); // 확인용
// 대상 요소(텍스트) 의 CSS 속성 중 color 속성(글자색)을 "" 로 변경
this.style.color = "";
// 대상 요소(텍스트) 을 CSS 속성 중 font-weight 속성(글자 굵기)를 "" 로 변경
this.style.fontWeight = "";
});- 속성값을 널스트링으로 변경 시 기본 속성으로 돌아간다.
✍ 객체 연습
<html>
<head>
<meta charset="UTF-8">
<title>document 객체 연습</title>
<script type="text/javascript">
function func3() {
console.log("bgColor : " + document.bgColor + ", fgColor : " + document.fgColor);
console.log("document.body.style.backgroundColor : " + document.body.style.backgroundColor + ", document.body.style.color : " + document.body.style.color);
}
function func4() {
document.body.style.backgroundColor = "red";
document.body.style.color = "green";
}
</script>
</head>
<body>
<h1>test35.html</h1>
<input type="button" value="문서 제목 출력" id="btn1">
<input type="button" value="문서 제목 변경" id="btn2">
<input type="button" value="문서 배경색 출력" id="btn3" onclick="func3()">
<input type="button" value="문서 배경색 변경" id="btn4" onclick="func4()">
<script type="text/javascript">
let btn1 = document.querySelector("#btn1");
btn1.addEventListener("click", function() {
console.log(document.title);
});
document.querySelector("#btn2").addEventListener("click", function() {
document.title = "title 변경";
});
</script>
<hr>
<!-- 함수 호출 시 파라미터에 this.xxx 지정 시 자신의 태그 요소의 xxx 속성값 전달 -->
<input type="radio" name="bgColor" value="CYAN" onclick="func5(this.value)">CYAN
<input type="radio" name="bgColor" value="MAGENTA" onclick="func5(this.value)">MAGENTA
<input type="radio" name="bgColor" value="ORANGE" onclick="func5(this.value)">ORANGE
<script type="text/javascript">
function func5(color) {
document.bgColor = color;
}
</script>
</body>
</html>✍
function func3(){
console.log("bgColor: " + document.bgColor + ", fgColor: " + document.fgColor);
console.log("document.body.style.backgroundColor: " + document.body.style.backgroundColor + ", document.body.style.color : " + document.body.style.color);
}- HTML 문서 색상 정보 접근을 위해서 document 객체의 bgColor, fgColor 속성을 활용했다
- bgColor(background color = 배경색): 주로 화면의 바탕색
- fgColor(foreground color = 전경색): 주로 화면 위에 있는 글자색
✍
function func4(){
// 배경색을 "red"로 변경
document.body.style.backgroundColor = "red";
// 전경색을 "green"으로 변경
document.body.style.color = "green"
}- document 객체의 body 객체에 접근하여 css 속성값을 변경하였다
- 배경색을 "red"로 변경하면 주의! --> 변경된 정보는 document.bgColor로 확인이 불가능하다.
✍
<h1>test35.html</h1>
<input type="button" value="문서 제목 출력" id="btn1">
<input type="button" value="문서 제목 변경" id="btn2">
<input type="button" value="문서 배경색 출력" id="btn3" onclick="func3()">
<input type="button" value="문서 배경색 변경" id="btn4" onclick="func4()">- 버튼 만들기
✍
<script type="text/javascript">
let btn1 = document.querySelector("#btn1");
btn1.addEventListener("click", function() {
// document 객체의 title 속성(변수) 접근 시 문서의 title 정보 접근이 가능
// --> <head> 태그 내의 <title> 태그에 지정된 텍스트에 접근한다.
console.log(document.title);
});
// btn2 버튼 클릭 시 동작할 이벤트 핸들러를 익명 함수로 정의
document.querySelector("#btn2").addEventListener("click", function() {
document.title = "title 변경";
});
</script>- 만약 대상 요소를 지정하여 이벤트를 처리할 경우
- 대상 요소 지정을 위해서는 요소가 생성된 후에 자바스크립트가 실행되어야 해당 요소에 접근이 가능하다.
- 따라서, 요소를 생성하는 태그보다 아래쪽에 스크립트 코드가 위치해야 한다.
- 단, 태그 내에서 onXXX 이벤트를 직접 지정하여 함수를 호출하는 경우는 요소 생성 태그보다 윗쪽에 함수 정의 스크립트 코드가 위치해도 무관하다.
✍
<input type="radio" name="bgColor" value="CYAN" onclick="func5(this.value)">CYAN
<input type="radio" name="bgColor" value="MAGENTA" onclick="func5(this.value)">MAGENTA
<input type="radio" name="bgColor" value="ORANGE" onclick="func5(this.value)">ORANGE- 함수 호출 시 파라미터에 this.xxx 지정 시 자신의 태그 요소의 xxx 속성값 전달
✍ 위의 onclick 방식을 id 태그 호출 방식으로 바꾸면?
let cyan = document.querySelector("#cyan");
cyan.addEventListener("click", function() {
document.bgColor = "CYAN";
});
let magenta = document.querySelector("#magenta");
magenta.addEventListener("click", function() {
document.bgColor = "MAGENTA";
});
let orange = document.querySelector("#orange");
orange.addEventListener("click", function() {
document.bgColor = "ORANGE";
});- 익명함수를 만들어 주었다.
✍
function func5(color){
document.bgColor = color;
}- 라디오 버튼 선택(클릭)시 해당 value 속성값과 동일한 색상으로 문서 배경색이 변경된다.
- --> 전달받은 파라미터를 저장할 변수를 지정(color) 하였다.
✍
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// window 객체의 onload 이벤트는 body영역의 모든 요소가 로딩되면 자동으로 호출되는 이벤트
// --> 즉, body 태그 내의 요소 로딩이 완료된 시점에서 함수가 호출되므로
// 해당 함수 내에서는 body영역의 요소에 자유롭게 접근이 가능하다!
window.onload = function() {
// alert("window.onload");
// id 선택자가 "btn1"인 요소에 접근하여 "click" 이벤트 발생 시
// 문서 제목 출력 코드가 실행된다.
document.querySelector("#btn1").addEventListener("click", function() {
alert(document.title);
})
};
// 이 함수는 반드시 btn2 요소가 로딩된 후에 click 이벤트에 의해 호출되므로
// 대상 요소 생성 코드(태그)보다 위에 위치해도 대상 요소 지정이 가능하다.
function func2(){
alert(document.querySelector("#btn2").value);
}
</script>
</head>
<body>
<h1>test36.html</h1>
<!-- window.onload 이벤트 핸들러에서 접근할 요소 -->
<input type="button" value="문서 제목 출력" id="btn1">
<!-- 요소에서 직접 onlick 이벤트 핸들러 연결하여 접근할 요소 -->
<input type="button" value="문서 제목 변경" id="btn2" onclick="func2()">
</body>
</html>
'개발 > Javascript' 카테고리의 다른 글
| [Javascript] (0) | 2023.01.19 |
|---|---|
| [Javascript] 20230117 복습 필요 (0) | 2023.01.17 |
| [Javascript] 이미지 경로 (0) | 2023.01.14 |
| [Javascript] innerText, innerHtml (0) | 2023.01.14 |
| [Javascript] location 객체 (0) | 2023.01.14 |
