라라리라
2023.08.31 / Step 1 [DOM_태그선택3] - 코딩 43 일차 본문
_0111_백틱_기본.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
[개념] 백틱( ` )
문자열 내부에서 ${} 를 사용해 변수를 사용할 수 있다.
-->
<span id="msg"></span>
<script>
let x = 10;
let y = 20;
let result = x + y;
let element = document.querySelector("#msg");
element.innerText = `${x} + ${y} = ${result}`;
</script>
</body>
</html>
_0111_백틱_로그인.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
[개념] 백틱( ` )
문자열 내부에서 ${} 를 사용해 변수를 사용할 수 있다.
-->
<span id="msg"></span>
<script>
let tag = "";
tag += `
<h3>회원가입<h3>
<table border="1">
<tr>
<td>아이디</td>
<td><input id="data-id"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input id="data-pw"></td;
</tr>
<tr>
<td><button id="btn-joinPro">회원가입</button></td>
</tr>
</table>
<br>
<button id="btn-mainPage">메인메뉴</button>
`;
document.querySelector("#msg").innerHTML = tag;
</script>
</body>
</html>
_0111_백틱_회원가입.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
[개념] 백틱( ` )
문자열 내부에서 ${} 를 사용해 변수를 사용할 수 있다.
-->
<span id="msg"></span>
<script>
let tag = "";
tag +=
`
<style>
.first {
vertical-align: top;
width: 158px;
height: 60px;
padding: 15px 0px 0px 10px;
}
.second {
width: 158px;
height: 60px;
padding: 15px 0px 0px 10px;
}
.inputForm {
width: 332px;
height: 44px;
font-size: 15px;
border: 1px solid lightgray;
border-radius: 5px;
outline: none;
padding-left: 10px;
}
</style>
`;
tag +=
`
<div align="center">
<br><br>
<font size="5" color="black"><b>회원가입</b></font>
<hr width="300px" color="#196ab3">
<br><br>
<table>
<tr>
<td class="first">아이디</td>
<td class="second">
<input type="text" class="inputForm" id="data-memberId" placeholder="아이디를 입력해주세요." autofocus="autofocus">
</td>
</tr>
<tr>
<td class="first">비밀번호</td>
<td class="second">
<input type="password" class="inputForm" id="data-memberPw" placeholder="비밀번호를 입력해주세요">
</td>
</tr>
<tr>
<td class="first">이름</td>
<td class="second">
<input type="text" class="inputForm" id="data-memberName" placeholder="이름을 입력해주세요">
</td>
</tr>
<tr>
<tr>
<td class="first">이메일</td>
<td class="second">
<input type="text" class="inputForm" id="data-memberEmail" placeholder="예:hong@itbook.com">
</td>
</tr>
<tr height="150px">
<td colspan="2" align="center">
<input type="image" id="btn-joinPro" src="join.jpg" style="width: 300px">
</td>
</tr>
</table>
</div>
`;
let element = document.querySelector("#msg");
element.innerHTML = tag;
</script>
</body>
</html>
_0112_json활용1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>학생 명단</h4>
<p id="name"></p>
<p id="age"></p>
<script>
let stList = [
{"name":"Hong", "age":21},
{"name":"Kim", "age":22},
{"name":"Park", "age":23}
];
for(let i=0; i<stList.length; i++) {
let name = `이름 : ${stList[i].name}<br>`;
let age = `나이 : ${stList[i].age}<br>`;
document.querySelector("#name").innerHTML += name;
document.querySelector("#age").innerHTML += age;
}
</script>
</body>
</html>
학생 명단
_0112_json활용2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
[개념1] JSON.parse()
JSON 문자열을 <key>:<value> 관계로 식별해
JavaScript 객체로 변환시켜줌
[개념2] JSON.stringfy()
JavaScript 객체를 JSON 문자열로 변환시켜줌
-->
<h4>학생 명단</h4>
<p>이름 : <span id="name"></span></p>
<p>나이 : <span id="age"></span></p>
<script>
let text = `[
{"name":"Hong", "age":21},
{"name":"Kim", "age":22},
{"name":"Park", "age":23}
]`;
let stList = JSON.parse(text);
console.log(stList);
document.getElementById("name").innerText = stList[1].name;
document.getElementById("age").innerText = stList[1].age;
text = JSON.stringify(stList);
console.log(text);
</script>
</body>
</html>
학생 명단
이름 :
나이 :
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.09.05 / Step 3 [DOM_이벤트] - 코딩 45 일차 (0) | 2023.09.05 |
|---|---|
| 2023.09.04 / Step 2 [DOM_속성변경] - 코딩 44 일차 (0) | 2023.09.04 |
| 2023.08.30 / Step 1 [DOM_태그선택2] - 코딩 42 일차 (0) | 2023.08.30 |
| 2023.08.29 / Step 1 [DOM_태그선택1] - 코딩 41 일차 (0) | 2023.08.29 |
| 2023.08.28 / Step 1 [DOM_기초문법_기타] - 코딩 40 일차 (0) | 2023.08.28 |