728x90
반응형
1) Javascript 예제
1-1) class 추가, 삭제 예제
1-2) selectBox를 통한 이미지 선택 예제
1-3) 데이터 출력(table 형식) 예제
1-4) 주민등록정보 조회 예제
1) Javascript 예제
1-1) class 추가, 삭제 예제
class 추가, 삭제 예제.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>
<style>
.highlight {
background-color: yellow;
}
</style>
<script>
window.onload = function () {
let hBtn = document.querySelector("#highlightButton");
let cBtn = document.querySelector("#clearButton");
hBtn.addEventListener("click", function () {
// 모든 .text 클래스를 가진 요소를 선택
const pTag = document.querySelectorAll(".text");
for (let e of pTag) {
// class명에 공백을 한 칸 띄고 "hightlight" 텍스트를 추가해줌!
e.classList.add("highlight");
}
});
cBtn.addEventListener("click", function () {
// 모든 .text 클래스를 가진 요소를 선택
const pTag = document.querySelectorAll(".text");
for (let e of pTag) {
// class명에서 "hightlight" 텍스트를 지워줌!
e.classList.remove("highlight");
}
});
};
</script>
</head>
<body>
<h1>querySelectorAll 예제</h1>
<p class="text">첫 번째 문장</p>
<p class="text">두 번째 문장</p>
<p class="text">세 번째 문장</p>
<div>
<p class="text">네 번째 문장</p>
</div>
<button id="highlightButton">강조</button>
<button id="clearButton">강조 제거</button>
</body>
</html>
※ 첫 접속 화면
※ "강조" 버튼 클릭 시 화면
※ "강조 제거" 버튼 클릭 시 화면
1-2) selectBox를 통한 이미지 선택 예제
Ex03.예제_교수님_ver.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>select box 예제</title>
<style>
#imgSel {
display: inline-block;
width: 300px;
height: 200px;
margin-top: 50px;
}
</style>
<script>
function funcSel() {
let sel = document.querySelector("#sel");
let img = document.querySelector("#imgSel");
for (let i = 0; i < sel.length; i++) {
if (sel.options[i].selected == true) {
img.src = "../HTML/1.image/file/" + sel.options[i].value;
}
}
}
</script>
</head>
<body>
<select id="sel" onchange="funcSel()">
<option value="htmlLogo.png" selected>html</option>
<option value="cssLogo.png">css</option>
<option value="javascriptLogo.png">javascript</option>
</select>
<img src="../HTML/1.image/file/htmlLogo.png" id="imgSel" />
</body>
</html>
1-3) 데이터 출력(table 형식) 예제
Ex04.예제_교수님_ver.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>데이터 출력 예제</title>
<style>
table,
th,
td {
border: 2px solid black;
border-collapse: collapse;
text-align: center;
padding: 20px 100px;
}
table {
margin-top: 20px;
}
th {
background-color: orangered;
}
</style>
<script>
function openList() {
let list = [
{ 이름: "홍길동", 등급: "일반회원", 가입일: "20/01/03" },
{ 이름: "손오공", 등급: "실버회원", 가입일: "22/05/05" },
{ 이름: "이순신", 등급: "골드회원", 가입일: "19/03/22" },
];
let targetTable = document.querySelector("#target");
let str = "";
str += `<table>`;
str += `<tr>`;
str += `<th>이름</th>`;
str += `<th>등급</th>`;
str += `<th>가입일</th>`;
str += `</tr>`;
for (let i = 0; i < list.length; i++) {
str += `<tr>`;
str += `<td>${list[i]["이름"]}</td>`;
str += `<td>${list[i]["등급"]}</td>`;
str += `<td>${list[i]["가입일"]}</td>`;
str += `</tr>`;
}
str += `</table>`;
targetTable.innerHTML = str;
targetTable.style.display = "block";
}
function closeList() {
let targetTable = document.querySelector("#target");
targetTable.style.display = "none";
}
</script>
</head>
<body>
<input type="button" value="정보 보기" onclick="openList();" />
<input type="button" value="정보 닫기" onclick="closeList();" />
<div id="target"></div>
</body>
</html>
※ 첫 접속 화면
※ "정보 보기" 버튼 클릭 시 화면
※ "정보 닫기" 버튼 클릭 시 화면
1-4) 주민등록정보 조회 예제
Ex05.예제.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>주민등록번호 예제</title>
<style>
label {
font-weight: bold;
}
#ssn {
display: inline-block;
margin: 0 25px;
}
#btn {
display: inline-block;
background-color: black;
color: white;
border-radius: 20%;
padding: 10px;
}
</style>
<script>
// 1. 연도 구별 --> 1900년생 2000년생
// 번호 뒷자리 첫 숫자 --> 1, 2 3, 4
// 2. 성별 구별 --> 남자: 1, 3 여자: 2, 4
// 3. 나이 계산
function infoCalc() {
let inputTag = document.querySelector("#ssn");
let birth;
let age;
let nowDate = new Date();
let gender;
if (
inputTag.value.slice(0, 2) <=
parseInt(nowDate.getFullYear().toString().slice(2))
) {
birth = 20 + inputTag.value.slice(0, 2);
if (inputTag.value.slice(7, 8) == "3") {
gender = "남자";
} else if (inputTag.value.slice(7, 8) == "4") {
gender = "여자";
} else {
alert("유효하지 않은 주민등록번호입니다. 다시 입력해주세요.");
return;
}
} else {
birth = 19 + inputTag.value.slice(0, 2);
if (inputTag.value.slice(7, 8) == "1") {
gender = "남자";
} else if (inputTag.value.slice(7, 8) == "2") {
gender = "여자";
} else {
alert("유효하지 않은 주민등록번호입니다. 다시 입력해주세요.");
return;
}
}
age = nowDate.getFullYear() - parseInt(birth);
let divTag = document.querySelector("#result");
divTag.innerHTML = `${birth}년생 ${age}세 <span>${gender}</span>입니다.`;
divTag.style["font-size"] = "40px";
divTag.style["margin-top"] = "30px";
divTag.style["margin-left"] = "20px";
let spanTag = document.querySelector("span");
spanTag.style.color = "blue";
}
</script>
</head>
<body>
<label for="ssn">주민등록번호</label>
<input type="text" id="ssn" placeholder="ex. 000000-0000000" />
<input type="button" id="btn" value="정보 출력" onclick="infoCalc();" />
<div id="result"></div>
</body>
</html>
※ 첫 접속 화면
※ "정보 출력" 버튼 클릭 시 화면
Ex05.예제_교수님_ver.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>주민등록번호 예제</title>
<style>
label {
font-weight: bold;
}
#ssn {
display: inline-block;
margin: 0 25px;
}
#btn {
display: inline-block;
background-color: black;
color: white;
border-radius: 20%;
padding: 10px;
}
</style>
<script>
// 1. 연도 구별 --> 1900년생 2000년생
// 번호 뒷자리 첫 숫자 --> 1, 2 3, 4
// 2. 성별 구별 --> 남자: 1, 3 여자: 2, 4
// 3. 나이 계산
window.onload = function () {
let btn = document.querySelector("#btn");
btn.addEventListener("click", function () {
let result = document.querySelector("#result");
let ssn = document.querySelector("#ssn").value;
let year = parseInt(ssn.substring(0, 2));
let gender = parseInt(ssn.charAt(7));
let d = new Date();
let nowYear = d.getFullYear();
if (gender == 1 || gender == 2) {
year = 1900 + year;
} else if (gender == 3 || gender == 4) {
year = 2000 + year;
}
if (gender == 1 || gender == 3) {
gender = "남자";
} else {
gender = "여자";
}
let age = parseInt(nowYear) - parseInt(year);
result.innerHTML = `${year}년생 ${age}세 <mark>${gender}</mark>입니다.`;
});
};
</script>
</head>
<body>
<label for="ssn">주민등록번호</label>
<input type="text" id="ssn" placeholder="ex. 000000-0000000" />
<input type="button" id="btn" value="정보 출력" />
<div id="result"></div>
</body>
</html>
※ 첫 접속 화면
※ "정보 출력" 버튼 클릭 시 화면
'Javascript > Javascript(2024 version)' 카테고리의 다른 글
| Javascript(7) - 종합 평가 점수 계산 및 결과 출력 (0) | 2024.06.18 |
|---|---|
| Javascript(6) - 예제(간단한 계산기, window) (0) | 2024.06.14 |
| Javascript(4) - HTML DOM 이벤트, HTML BOM, 예제(배경색 변경 / 글자수 표기) (0) | 2024.06.11 |
| Javascript(3) - Object 객체, JSON, 함수, 객체생성자 함수, HTML DOM (0) | 2024.06.10 |
| Javascript(2) - 연산자, 제어문, 배열, Date 객체, Math 객체, String 객체 (0) | 2024.06.05 |
