티스토리 뷰
itembox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grocery Bud</title>
<!-- font awesome -->
<script src="https://kit.fontawesome.com/e561738355.js" crossorigin="anonymous"></script>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<section class="section-center">
<!-- form -->
<form class="grocery-form">
<p class="alert"></p>
<h3>grocery bud</h3>
<div class="form-control">
<input type="text" id="grocery" placeholder="e.g. eggs" />
<button type="submit" class="submit-btn">submit</button>
</div>
</form>
<!-- 추가할 리스트 요소의 양식 -->
<div class="grocery-container">
<div class="grocery-list">
<!--
<article data-id="1700189031812" class="grocery-item">
<p class="title">ㅇㅇㅇ</p>
<div class="btn-container">
<button type="button" class="edit-btn">
<i class="fas fa-edit" aria-hidden="true"></i>
</button>
<button type="button" class="delete-btn">
<i class="fas fa-trash" aria-hidden="true"></i>
</button>
</div>
</article>
-->
</div>
<button class="clear-btn">clear items</button>
</div>
</section>
<!-- javascript -->
<script src="app.js"></script>
</body>
</html>//각 변수 할당
//qureySelector로 class가 grocery-form인 것을 form변수에 저장.
const form = document.querySelector(".grocery-form");
//qureySelector로 class가 alert인 것을 alert변수에 저장.
const alert = document.querySelector(".alert");
//getElementById메서드를 통해 id="grocery"를 grocery변수에 저장.
const grocery = document.getElementById("grocery");
//querySelector메서드를 통해 class가 submit-btn인 것을 submit-btn에 저장.
const submitBtn = document.querySelector(".submit-btn");
//querySelector를 통해 grocery-container class를 conteiner에 저장.
const container = document.querySelector(".grocery-container");
//querySelector메서드로 class가 grocery-list인 것을 list에 저장.
const list = document.querySelector(".grocery-list");
//querySelector메서드로 class가 clear-btn인 것을 clearBtn에 저장.
const clearBtn = document.querySelector(".clear-btn");
//수정요소 변수
let editElement;
let editFlag = false;
let editID = "";
//form 요소에 submit이 일어났을 때 addItem()함수를 실행
form.addEventListener("submit",addItem);
//clearBtn을 클릭했을 때 clearItems()함수를 실행
clearBtn.addEventListener("click",clearItem);
//DOMContentLoaded-브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다.
//이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않습니다.
window.addEventListener("DOMContentLoaded",setupItems);
//add Items함수
function addItem(e){
e.preventDefault();
//grocery의 값을 value로 저장.
const value = grocery.value;
//확인 출력.
console.log('value값:'+value)
//getTime이 timemillis값을 받는다 //toStirng은 문자열로 바꿔달라는 이야기.
//시간값을 구함
//시간값을 구하면 데이터가 겹치지 않는다. 타임밀리스를 구해서 사용하면 유일한 값이 나오기 때문
//id에 현재 날짜와 시간의 데이터 중의 시간 데이터를 가지고오고,
//그것을 문자로 변경.
const id = new Date().getTime().toString();
//확인 출력.
console.log('시간값:'+id);
//value가 공백이 아니면 true and !editFlag(false)
if(value !=="" && !editFlag);
{
//step1:태그생성
//HTML에서 article태그를 생성. elemnt에 저장.
//article은 div태그
const element = document.createElement("article");
//step2: 속성생성
//createAttribute함수를 통해 data-id의 속성 생성. attr에 저장
let attr = document.createAttribute("data-id");
//step3:생성된 속성에 값 부여
//attr의 값을 id로 적용.
attr.value=id;
//step4:생성된 태그에 속성값을 부여
//element의 태그에 해당 속성과 값을 저장
element.setAttributeNode(attr);
//step5:완성된 태그에 클래스값 부여
//element에 classList.add를 통해 grocery-item 클래스 추가
element.classList.add("grocery-item");
//결과값
//<article data-id="1700189031812" class="grocery-item"></article>
//step6:위에서 생성된 태그에 자식태그 삽입
//${}는 중괄호 안에 무조건 변수가 와야한다는 의미
element.innerHTML = `<p class="title">${value}</p>
<div class="btn-container">
<button type="button" class="edit-btn">
<i class="fas fa-edit"></i>
</button>
<button type="button" class="delete-btn">
<i class="fas fa-trash"></i>
</button>
</div>`;
// editBtn.addEventListener("click",editItem);
//list의 자식요소로 element추가
list.appendChild(element);
displayAlert("아이템이 추가되었어요","success");
//container의 클래스추가 요소의 값으로 show-conteiner 입력.
container.classList.add("show-container");
setBackToDefault();
}
}
//함수 setBackToDefault
function setBackToDefault()
{
//grocery의 값을 공백으로.
grocery.value = "";
editFlag = false;
editID = "";
//submitBtn의 텍스트요소 "submit"입력.
submitBtn.textContent = "submit";
}
//함수 displayAlert
function displayAlert(text, action)
{
// 안에 텍스트를 삽입.
alert.textContent = text;
//해당요소에 클래스를 삽입
alert.classList.add(`alert-${action}`);
//시간이 흐른 뒤 지정한 함수를 한 번만 실행하는 함수,setTimeout
setTimeout(function()
{
//alert의 텍스트를 공백으로 변경.
alert.textContent = "";
//alert의 클래스를 삭제.
alert.classList.remove(`alert-${action}`)
},1000);
}
function clearItem(){
}
function setupItems(){
}
function createListItem(){
}
| 해당 예제의 코드를 순서대로 보면 1.각 변수 할당 querySelect / getElementById 를 통해 html의 각 클래스와 id를 const 변수명에 할당. 2.수정요소 변수 수정이 필요한 변수들의 선언 3.함수 실행 form요소에서 submit버튼이 click되었을 때, addItem함수를 실행하기위해 form.addEventListener로 연결. 마찬가지로 clearBtn.addEventListener로 연결 뒤 해당 버튼을 click했을 때, clearItem함수를 실행. 4.addItem 함수 input에 들어가는 값을 value로 저장 후 확인을 위한 console.log 날짜시간데이터의 객체를 생성 하는데 시간데이터를 Timemillis의 값으로 받고, 그것을 toString()을 통해 문자열로 변경이 된다. 해당 시간 값을 구하고 저장되는 변수는 유일한 변수로 되기 때문에 값이 중복이 되지 않는다. 확인을 위해 console.log('시간값: '+id); if의 조건식은 해당 input값이 공백이 아닐 경우와 동시에 editFlag 변수를 초기화 할 때 false로 했기 때문에 논리부정연산자로 인해 트루일 경우를 의미. article태그를 생성 attr이라는 변수의 속성 data-id를 생성. 아까 생성된 유일한 데이터 시간값이 담기는 id변수를 attr의 값으로 저장. 즉 data-id="시간데이터(id)" 로 저장. element의 속성과 값으로 attr을 저장. <article data-id="TimeData(id)"></article> article에 classList에 add함수를 통해 클래스 생성. <article data-id="TimeData(id)" class="grocery-item"></article> article안에 innerHTML함수를 통해 태그,속성,값 들을 생성. <article data-id="TimeData(id)" class="grocery-item"> `<p class="title">${value}</p> <div class="btn-container"> <button type="button" class="edit-btn"> <i class="fas fa-edit"></i> </button> <button type="button" class="delete-btn"> <i class="fas fa-trash"></i> </button> </div>`; </article> article의 태그를 list변수의 태그 자식 노드연결. displayAlert를 통해 해당 텍스트 노출. container의 태그에 클래스를 추가하는 classList.add()를 통해 클래스 show-container추가. setBackToDefault함수 실행 5.setBackToDefault함수. grocery의 값을 공백으로 설정. submitBtn에 텍스트를 추가하는 textContent를 통해 submit텍스트 추가 6.displayAlert함수 input의 값이 추가되었을 경우 displayAlert는 해당 text와 action의 값을 통해 다음과 같이 동작하도록 한다. alert.textcontent를 통해 text가 추가된다. alert.classList.add를 통해 클래스를 추가한다. +addItem함수에 displayAlert("text=값","success")에서 클래스로 추가되는 success는 css에서 요소를 추가해줬기 때문에 다른 값을 넣는다면. 꾸밈요소가 적용이 되지 않는다. 해당 텍스트와 클래스를 통한 꾸밈요소를 1초동안만 보여주기위해 setTimeout()함수를 통해 1초뒤 사라지게끔 class와 text를 삭제한다. |
smart
<body>
<div class="smart_section">
<div class="smart_container">
<div class="smart_text1">
<h4>일반상품 (1)</h4>
</div>
<div class="smart_imgtextbox">
<div class="smart_textbox">
<div id="checkbox3">
<input type="checkbox" name="checkbox1" id="checkbox1">
</div>
<h5 id="imgtext">이미지</h5>
<h5 >상품정보</h5>
<h5 ">판매가</h5>
<h5 >수량</h5>
<h5 >배송구분</h5>
<h5 >배송기</h5>
<h5 >합계</h5>
<h5 >선택</h5>
</div>
<div class="smart_imgbox">
<div id="checkbox4">
<input type="checkbox" name="checkbox2" id="checkbox2">
</div>
<div class="div smart_img">
<img src="/images/client1.jpg" style="width: 70px; height: 120px;" alt="">
</div>
<div class="smart_text">
<h5>샘플</h5>
</div>
<div class="smart_ss" id="smart_ss1">
<span id="price">13500</span>원
</div>
<div class="smart_sss">
<input type="number" id="smart_sss1" value="1">
<button id="smart_sss2">변경</button>
</div>
<div class="smart_text2">
<h5>기본배송</h5>
</div>
<div class="smart_text3">
<h5>무료</h5>
</div>
<div class="smart_ss" id="smart_ss2">
<h4 class="smart_s1"><span>13500</span>원</h4>
<p class="smart_s2">$11.80</p>
</div>
<div class="smart_ssss">
<button>주문하기</button>
<button>관심상품 등록</button>
<button>x 삭제</button>
</div>
</div>
</div>
</div>
</div>
<script src="smart.js"></script>
</body>
</html>//getElementById를 통해 id="smart_sss2"를 bt에 저장.
var bt = document.getElementById('smart_sss2');
//확인 및 출력
console.log(bt);
//bt를 addEventListener를 통해 연결을 시킨다. 버튼을 click했을 때 a함수가 실행.
bt.addEventListener('click',a);
//a함수
function a()
{
//querySelector을 통해 id="price"의 텍스트를 pr에 저장.
var pr = document.querySelector("#price").textContent;
//확인 및 출력
console.log('첫번째 price '+pr);
//class="smart_s1"의 자식 태그span을 pr2에 저장.
var pr2 = document.querySelector(".smart_s1 span");
//확인 및 출력
console.log('두번째 price '+pr2);
// id="smart_sss1"의 값을 pp에 저장.
var pp = document.getElementById('smart_sss1').value;
//확인 및 출력
console.log(pp);
//pr과 pp의 곱한 값을 pp2에 저장.
var pp2 = pr*pp;
//확인 및 출력
console.log('dsa '+pp2);
// pr2의 텍스트 값을 pp2로 저장.
pr2.textContent = pp2;
//확인 및 출력
console.log(pr2.textContent);
};
| Smart 해당 예제는 가격의 개수를 변경하고, 버튼을 눌렀을 때 total 가격이 변경되도록 하기 위한 예제입니다. 1.변수설정. getElementById를 통한 “smart_sss2”라는 id를 가진 태그를 bt에 할당한다. 확인을 하기 위한 console.log(bt); 2.HTML과 연결 addEventListener를 통해 bt를 click하는 이벤트가 발생할 때, a함수가 실행이 되도록 HTML과 연결. 3.함수 a() html의 id=”price”를 querySelector함수를 통해 잡고, 해당 태그의 textContent, 즉 해당 태그의 텍스트를 변수 pr에 저장. querySelector을 통한 해당 클래스의 이름의 태그를 pr2에 저장. 해당 아이디를 가진 태그의 값을 pp에 저장. pr*pp를 곱한 값을 pp2변수에 저장. Pr2의 텍스트, 값을 pp2의 곱한 값을 저장합니다. 모든 과정에 확인을 위한 과정이 필요하기 때문에 console.log를 해줍니다. |