itemList = [] // ["필기도구", "노트북", "충전기"]
itemList.map( x => "<li>"+x+"</li>" )
itemList.map( x => "<li>"+x+"</li>" ).join("\n")
showList2output = () => {
output.innerHTML = itemList.map( x => "<li>"+x+"</li>" ).join("\n")
}
itemList
itemList.find( x => x==="필기도구" )
itemList.find( x => x==="타임머신" )
{ // undefined, null, "", 0, false가 아닌 정상적인 값은 조건검사에서 true와 같이 동작
if ("필기도구") { return "T" }
else { return "F" }
}
{ // undefiend, null, "", 0도 조건검사에서 false와 같이 동작
if (undefined) { return "T" }
else { return "F" }
}
addList = (x) => {
if ( x==="" || itemList.find( e => e===x ) ) return // 빈 문자열 이거나 이미 목록에 있으면 그냥 아무것도 안하고 리턴
else itemList.push(x) // 찾지 못한 경우에만 새롭게 목록에 추가
}
output = html`<ul></ul>` // 준비물 목록을 리스트 아이템으로 출력할 곳 (연습용)
/* {
addList("라면")
addList("라면")
addList("라면")
addList("라면")
addList("생수")
addList("생수")
addList("생수")
addList("")
addList("")
addList("")
showList2output() // Part1 영상에서 만들었던 showList 함수와는 다른 함수가 필요하므로 이름을 이걸로 수정
} */
btn = html`<button style="width: 100px; height: 50px; ">버튼</button>`
bgChange = (e) => {
const random = n => Math.floor( Math.random() * n )
const rndCol = 'rgb(' + random(256) + ',' + random(256) + ',' + random(256) + ')';
console.log(rndCol)
e.target.style.backgroundColor = rndCol; // 책에 강조해서 소개되지 않지만 꼭 알아둘 내용: Event 객체의 target 속성
console.log(e);
}
btn.onclick = bgChange
doc = html`
<div>
<input id="item"><button id="add">추가</button>
<ul id="listItem"></ul>
</div>
`
doc.querySelector("#item").value
addBtn = doc.querySelector("#add")
addBtn.onclick = () => {
const item = doc.querySelector("#item").value
addList( item )
showList() // 변경 내용을 다시 UI에 나타내기 위해
}
showList = {
const showList = () => {
const ul = doc.querySelector("#listItem")
ul.innerHTML = // <li><button data-item='라면'>x</button>라면</li>
itemList
.map( item => "<li><button data-item='"+item+"'>x</button>"+item+"</li>" )
.join("\n")
// 버튼에 대한 이벤트 핸들러 등록
ul.querySelectorAll("button").forEach( b => b.onclick = (e) => {
removeList(e)
showList() // 변경된 내용을 UI에 나타내기 위해
})
}
return showList
}
ul = doc.querySelector("#listItem")
/*itemList.splice(index, 1) // index 위치의 1개만 삭제
ul
li li li
btn 물건1이름 btn 물건2이름 btn 물건3이름
*/
ul.children
// 셀렉터의 강력한 능력을 소환 - ul 안에 있는 모든 button을 선택
ul.querySelectorAll("button")
removeList = (e) => {
// console.log("removeList")
// console.log(e)
const xbtn = e.target // 이벤트가 발생한 곳 (x버튼)
const index = itemList.indexOf(xbtn.dataset.item) // 지울 물건의 index 얻기
if ( index < 0 ) return // 비정상적 상황 (이런 일은 일어나면 안됨)
itemList.splice(index, 1) // index 위치의 1개만 삭제
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
