ㅁ (1) 나
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn1" onclick="season();">버튼1</button>
<div id="result1"></div>
<script>
/*
#btn1 클릭시
<ul><li>봄</li><li>여름</li><li>가을</li><li>겨울</li></ul>
요소를 #result1에 넣으시오.
*/
function season() {
const d1 = document.getElementById("result1");
d1.innerHTML = '<ul><li>봄</li><li>여름</li><li>가을</li><li>겨울</li></ul>';
}
</script>
<hr>
<button id="btn2" onclick="url();">버튼2</button>
<div id="result2"></div>
<script>
/*
#btn2 클릭시
<ul>
<li><a href="https://www.google.com/">구글</a></li>
<li><a href="https://www.naver.com/">네이버</a></li>
<li><a href="https://www.gdu.co.kr/">구디아카데미</a></li>
</ul>
요소를 #result2에 넣으시오.
*/
function url() {
const d2 = document.getElementById("result2");
d2.innerHTML = '<ul> <li><a href="https://www.google.com/">구글</a></li>'
+ '<li><a href="https://www.naver.com/">네이버</a></li>'
+ '<li><a href="https://www.gdu.co.kr/">구디아카데미</a></li></ul>';
}
</script>
<hr>
<button id="btn3" onclick="typeChange();">버튼3</button>
<input type="password" id="pwd">
<script>
/*
#btn3 클릭시
#pwd input요소의 type을 text로 변경하시오.
이때 토글형식으로 작업
즉, password type일 경우 text로
text type일 경우 password로
*/
function typeChange() {
const d3 = document.getElementById("pwd");
if(d3.type == "password") { d3.type="text"; }
else if(d3.type == "text") { d3.type="password"; }
}
</script>
</body>
</html>
- 비밀번호 칸인데 눈 모양 아이콘 누르면 내가 입력한 값이 보이는 경우가 있다.
토글 형식으로 password <-> text 타입을 바꾸는 기능이다.
(2) 답
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn1">버튼1</button>
<div id="result1"></div>
<script>
/*
#btn1 클릭시
<ul><li>봄</li><li>여름</li><li>가을</li><li>겨울</li></ul>
요소를 #result1에 넣으시오.
*/
// 고전 이벤트 모델
document.getElementById("btn1").onclick = () => {
const seasons = ['봄', '여름', '가을', '겨울'];
let result = '<ul>';
for(let season of seasons) {
result += '<li>' + season + '</li>';
}
result += '</ul>';
document.getElementById("result1").innerHTML = result;
}
</script>
<hr>
<button id="btn2" onclick="fnMakeLink();">버튼2</button>
<div id="result2"></div>
<script>
/*
#btn2 클릭시
<ul>
<li><a href="https://www.google.com/">구글</a></li>
<li><a href="https://www.naver.com/">네이버</a></li>
<li><a href="https://www.gdu.co.kr/">구디아카데미
</ul>
요소를 #result2에 넣으시오.
*/
// 인라인 이벤트 모델
// html 요소 내에 이벤트 속성을 써서 실행시킬 코드를 작성.
// 줄줄이 연이어 작성하면 관리하기 어려우니까 사이트 하나에 대한 정보를 객체에 담아서 관리한다.
// 그냥 배열의 홀수에 url, 짝수에 name 담으면 관리하기에 불편하다.
function fnMakeLink() {
const sites = [
]
let result = "<ul>";
for(let site of sites) {
result += '<li><a href="' + site.url + '">' + site.name + '</a></li>';
}
result += '</ul>'
document.getElementById("result2").innerHTML = result;
}
</script>
<hr>
<button id="btn3">버튼3</button>
<input type="password" id="pwd">
<script>
/*
#btn3 클릭시
#pwd input요소의 type을 text로 변경하시오.
이때 토글형식으로 작업
즉, password type일 경우 text로
text type일 경우 password로
*/
// 표준 이벤트 모델
document.getElementById("btn3").addEventListener("click", () => {
const pwdInput = document.getElementById("pwd");
// dom 객체 type속성 : pwdInput.type
// html요소 type속성 : pwdInput.getAttribute("type")
if( pwdInput.type == 'password' ){ pwdInput.type = 'text'; }
else { pwdInput.type = 'password'; }
} )
</script>
</body>
</html>
'03. 웹 표준 기술 > JavaScript' 카테고리의 다른 글
| 13. BOM (0) | 2024.08.19 |
|---|---|
| 12. 정규 표현식 (0) | 2024.08.19 |
| [자바스크립트] 실습문제4 - 함수, 객체 실습문제 (0) | 2024.08.14 |
| [자바스크립트] 11. event + 정규표현식 맛보기 (0) | 2024.08.14 |
| [자바스크립트] 09. JSON, 10. Date (0) | 2024.08.14 |
