작성 : 2024. 4. 26
어제 배웠던 BOM 에 속해있는 DOM 이라는 객체
DOM → 문서에 접근하는 객체이다
퐁규 :
BOM은 DOM(Document Object Model)의 일부입니다. BOM은 웹 브라우저의 창이나 프레임을 조작하는 데 사용되는 객체 모델이고, DOM은 HTML, XHTML 또는 XML 문서의 구조화된 표현을 제공합니다. DOM은 문서의 요소에 접근하고 조작하는 데 사용되는 반면, BOM은 브라우저 창과 같은 브라우저 창과 상호 작용하는 데 사용됩니다.
getElementById()
+ 스크립트가 코드 상단에 있을 때와 아래에 있을 때
상단)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// getElementById() 태그의 아이디 속성값을 이용해 요소를 객체형식으로 읽어온다
// querySelector()
// getElementByClassName()
// querySelectorAll
let ptag = document.getElementById("p1");
ptag.innerHTML = "반갑습니다."
// Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at dom.html:14:24
// ptag 부분이 에러가 뜬다 -> 값이 없는 상태
</script>
</head>
<body>
<p id = "p1">안녕하세요</p>
</body>
</html>
아래)
<body>
<p id = "p1">안녕하세요</p>
<script>
// getElementById() 태그의 아이디 속성값을 이용해 요소를 객체형식으로 읽어온다
// querySelector()
// getElementByClassName()
// querySelectorAll
let ptag = document.getElementById("p1");
ptag.innerHTML = "반갑습니다."
// 스크립트를 아래로 내리면 오류가 생기지 않는다.
</script>
</body>
메모리에 할당되는 시점에 따라 달라진다.
때문에 위와 같이 나타내거나 아래와 같이 나타내 오류를 해결한다.
<title>Document</title>
<script>
// getElementById() 태그의 아이디 속성값을 이용해 요소를 객체형식으로 읽어온다
// querySelector()
// getElementByClassName()
// querySelectorAll
// 바디부분이 실행될때까지 기다린 후 끝나면 이 함수를 실행해라 -> 콜백함수
window.onload = function(){
let ptag = document.getElementById("p1");
ptag.innerHTML = "반갑습니다."
};
</script>
</head>
<body>
<p id = "p1">안녕하세요</p>
</body><script>
// getElementById() 태그의 아이디 속성값을 이용해 요소를 객체형식으로 읽어온다
// getElementByClassName()
// querySelectorAll
// querySelector()
// 바디부분이 실행될때까지 기다린 후 끝나면 이 함수를 실행해라 -> 콜백함수
window.onload = function(){
let ptag1 = document.getElementById("p1");
ptag1.innerHTML = "반갑습니다."
// 아이디값에 #를 준다.
let ptag2 = document.querySelector("#p2");
ptag2.innerHTML = "이순신"
// 클래스 형태로 가지고 온다
let ptag3 = document.getElementsByClassName("p3")[0];
ptag3.innerHTML = "배고프다"
// let ptag3 = document.getElementsByClassName("p3");
// ptag3[1].innerHTML = "배고프다"
// 보통 이렇게 쓴다.
};
</script>
</head>
<body>
<p id = "p1">안녕하세요</p>
<p id = "p2">홍길동</p>
<p class = "p3">안보인다</p>
</body>let ptag3 = document.getElementsByClassName("p3")[0];
→ getElementById 와 getElementsByClassName 은 성질이 다름
id 값은 전체 클래스에서 유니크하게, 유일하게 사용한다. id 속성값은 디자인 요소보단 스크립트에서 객체화하기 위해 쓴다 (스크립트에서 제어하기 위해서) 그래서 속성의 값은 유니크해야한다. (약속)
class는 여러 태그에 동일한 이름을 만들어도 문제가 없다. 디자인을 위해 만든 태그이기 때문이다.
class 이름을 여러 개 동일하게 만들 수 있다는 걸 가정해 getElementsByClassName는 클래스들을 배열의 형태로 받는 것이다.
let ptag3 = document.getElementsByClassName("p3");
ptag3[1].innerHTML = "배고프다"
getElementsByClassName
<scirpt>
let htag = document.getElementsByClassName("myclass");
// console.log(htag);
// htag 를 이용해서 뭔가 하겠다
// class 이름을 이용할 땐 배열 형식으로 써라
// 자바스크립트에서 css를 동적으로 쓸 때 이런 기능을 이용
setTimeout(()=> {
htag[0].style.Color = "red"; // Object.style.속성 = 값 -> 요즘은 제이쿼리가 처리해준다
// Object.style.fontSize -> 이런 식으로 - 를 빼고 대문자로 바꿔 써야한다.
}, 3000);
</scirpt>
</head>
<body>
<h1 class = "myclass"> 고양이</h1>
</body>
querySelector / querySelectorAll
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
let sections = document.querySelectorAll("#sections .section");
sections.forEach(section => {
section.style.border = "1px solid #ff0000";
});
};
</script>
</head>
<body>
<div id="sections">
<ol class="section">
1
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ol>
<ol class="section">
2
<li>2-1</li>
<li>2-2</li>
<li>2-3</li>
</ol>
</div>
</body>
</html>
form>table>tr7>td2>input[name] 이렇게만 쳐도 자동으로 표가 나온다
한번에 여러 항목에 체크/해제하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function accpetAll() {
// 전체선택하기
let chAll = document.querySelector('#checkAll');
if (chAll.checked){
let checkboxs = document.querySelectorAll('.chk');
// 향상된 for 문
for (let checkbox of checkboxs) {
checkbox.checked = true;
}
} else {
let checkboxs = document.querySelectorAll('.chk');
// 향상된 for 문
for (let checkbox of checkboxs) {
checkbox.checked = false;
}
}
}
</script>
</head>
<body>
<table border="1">
<tr>
<td colspan="3">
<input type="checkbox" id="checkAll" onclick="accpetAll()"> 전체동의
</td>
</tr>
<tr>
<td> <input type="checkbox" class="chk"> 필수동의1</td>
<td> <input type="checkbox" class="chk"> 필수동의2</td>
<td> <input type="checkbox" class="chk"> 필수동의3</td>
</tr>
</table>
</body>
</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>
<script>
function memChk(frm) {
// 회원가입 항목 눌렀을 때 하나라도 값이 없으면 알림창 떠서 회원가입 완료 가능하게 만들기
let checkCnt = document.querySelectorAll('.chk:checked').length;
// 최소 하나 이상 선택하면 되기 때문에 카운트가 1 이상이면 된다.
let genderChkCnt = document.querySelectorAll('.genderChk:checked').length;
// document.memfrm.id.value = "홍길동";
// = frm.id.value 같은 표현
if (frm.id.value === "") {
alert("아이디를 입력하세요");
frm.id.focus(); // 자동포커스
return false; // 이 문제가 해결되지 않으면 아래 항목을 체크하는 의미가 없으므로 끝내기
}
if (frm.pw1.value === "") {
alert("비밀번호를 입력하세요");
frm.pw1.focus(); // 자동포커스
return false;
}
if (frm.pw2.value === "") {
alert("비밀번호 확인을 입력하세요");
frm.pw2.focus(); // 자동포커스
return false;
}
if(frm.pw1.value !== frm.pw2.value){
alert("비밀번호가 일치하지 않습니다.");
frm.pw2.focus(); // 자동포커스
return false;
}
if (frm.email.value === "") {
alert("이메일을 입력하세요");
frm.email.focus(); // 자동포커스, 입력폼일때만 의미가 있음
return false;
}
// frm.gender.value === ""
// frm.gender.checked === false
if(genderChkCnt === 0){
alert("성별을 선택하세요");
return false;
}
if(frm.jop.value === ""){
alert("직업을 선택하세요");
return false;
}
if(checkCnt === 0 ){
alert("관심분야를 선택하세요");
return false;
}
if(frm.content.value === ""){
alert("가입인사를 입력하세요.");
return false;
}
}
</script>
</head>
<body>
<!-- onsubmit 이 먼저 발생 -->
<form action="http://www.naver.com" name="memfrm" onsubmit="return memChk(this)">
<table>
<tr>
<td><label>아이디</label></td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td><label>비밀번호</label></td>
<td><input type="password" name="pw1"></td>
</tr>
<tr>
<td><label>비밀번호 확인</label></td>
<td><input type="password" name="pw2"></td>
</tr>
<tr>
<td><label>이메일</label></td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td><label>성별</label></td>
<td>
<!-- checked 가 되어있으면 true -->
<input type="radio" name="gender" value="m" class="genderChk">남자
<input type="radio" name="gender" value="f" class="genderChk">여자
</td>
</tr>
<tr>
<td><label>직업</label></td>
<td>
<select name="jop">
<option value=""> -- 직업선택 -- </option>
<option value="job1"> 회사원 </option>
<option value="job2"> 자영업 </option>
<option value="etc"> 기타 </option>
</select>
</td>
</tr>
<tr>
<td><label>관심분야</label></td>
<td>
<input type="checkbox" name="hobby" value="h1" class="chk"> 운동
<input type="checkbox" name="hobby" value="h2" class="chk"> 독서
<input type="checkbox" name="hobby" value="h3" class="chk"> 등산
</td>
</tr>
<tr>
<td><label>가입인사</label></td>
<td>
<textarea row = '7' cols= '25' name="content"></textarea>
</td>
</tr>
</table>
<input type="submit" value="회원가입">
<input type="reset" value="취소">
</form>
</body>
</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 type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 12px/1.5 dotum,"돋움", gulim, "굴림", sans-serif;
}
li {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
h1 {
text-align: center;
}
#carZone {
width: 600px;
margin: 0 auto;
}
#estimate {
width: 100%;
}
#estimate th,
td {
border: 1px solid #ccc;
height: 30px;
}
#estimate th {
background-color: #333;
color: #fff;
}
#carZone td {
text-align: center;
}
tfoot {
font-size: 15px;
font-weight: bold;
}
#total {
border: none 0;
background: none;
font-size: 1.5em;
font-weight: bold;
text-align: center;
}
</style>
<script>
function car(){
//let basic_car = parseInt(document.getElementById("total").defaultValue);
let basic_car = Number(document.getElementById("total").defaultValue);
let color_price = 0;
let colorChkCnt = document.querySelectorAll('.opt4:checked').length;
let colorChk = document.getElementById("opt4")
if (colorChkCnt > 0) {
color_price += Number(colorChk.value);
}
for (let i = 1; i <= 3; i++){
let chkObj = document.getElementById("opt" + i)
if (chkObj.checked) {
basic_car += Number(chkObj.value)
}
}
basic_car += color_price;
document.getElementById("total").value = basic_car;
}
</script>
</head>
<body>
<h1>자동차 견적</h1>
<div id="carZone">
<p><img src="images/car.jpeg" alt="자동차"/></p>
<table id="estimate">
<colgroup>
<col width="380px"/>
<col width="160px"/>
<col width="160px"/>
</colgroup>
<thead>
<tr>
<th scope="row">옵 션</th>
<th scope="row">추가 가격</th>
<th scope="row">선택</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">(기본)차량가격</th>
<td colspan="2">
<input
type="text"
name="total"
id="total"
value="13450000"
readonly="readonly"/>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<label for="opt1">인조가죽시트</label>
</td>
<td>250000</td>
<td>
<!-- 옵션 체크박스에 클릭할 때 마다 car()에 저장된 일련의 실행문을 실행합니다. -->
<input type="checkbox" name="opt1" id="opt1" value="250000" onclick="car();"/></td>
</tr>
<tr>
<td>
<label for="opt2">내비게이션</label>
</td>
<td>250000</td>
<td><input type="checkbox" name="opt2" id="opt2" value="250000" onclick="car();"/></td>
</tr>
<tr>
<td>
<label for="opt3">선루프</label>
</td>
<td>440000</td>
<td><input type="checkbox" name="opt3" id="opt3" value="440000" onclick="car();"/></td>
</tr>
<tr>
<td>
<label for="opt4">색상선택</label>
</td>
<td>100000</td>
<td> <input type="radio" name="opt4" id="opt4" value="100000" class="opt4" onclick="car();"/>red
<input type="radio" name="opt4" id="opt4" value="100000" class="opt4" onclick="car();"/>green
<input type="radio" name="opt4" id="opt4" value="100000" class="opt4" onclick="car();"/>blue
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
'2024_UIUX 국비 TIL' 카테고리의 다른 글
| UIUX _국비과정 0430 [제이쿼리 선택자] (1) | 2024.06.08 |
|---|---|
| UIUX _국비과정 0429 [제이쿼리 입문] (1) | 2024.06.04 |
| UIUX _국비과정 0425 (1) | 2024.06.03 |
| UIUX _국비과정 0424 (1) | 2024.06.03 |
| UIUX _국비과정 0423 [에어비앤비 클론 코딩 + 자바스크립트 입문] (0) | 2024.05.30 |
