Published
Edited
Jun 10, 2020
md`# JS 시험 공부`
doc01 =html`
<div>
<h2 id="heading01">자바스크립트</h2>
<p id="text">위 텍스트를 클릭하시오.</p>
</div>
`
{
let heading = doc01.querySelector("#heading01")
heading.onclick = () => {
heading.style.color = "red"
}
}
doc02= html`
<h2>환영합니다</h2>
<input>
<button>입력</button>
<div>...</div>
`
{
let input = doc02.querySelector('input') // 각각 querySeletor의 태그선택자 이름으로 요소에 접근
let button= doc02.querySelector('button')
let output = doc02.querySelector('div')
//지금은 input에 입력한 내용에 OOO에다가 + 님 잘오셨습니다. 추가하기 위한 이벤트 헨들러
button.onclick = () => {
let name = input.value
output.innerHTML ="<b>" + name + "</b>" + "님 잘오셨습니다."
}
}
doc05 = html`
<div>
HTML 예제
<ul style="background-color: LightGray">
<li id="zero" class="even">0</li>
<li id="one" class="odd" >1</li>
<li id="two" class="even">2</li>
<li id="three" class="odd" >3</li>
<li id="four" class="even">4</li>
<li id="five" class="odd" >5</li>
</ul>
</div>
`
// 위 HTML 예제 안의 모든 li 요소를 검은 바탕에 흰글씨로
{
let all = doc05.querySelectorAll('li');
all.forEach( e => {
e.style.color = 'white';
e.style.backgroundColor = 'black';}
);
}
// li중에 even이라는 class이름만 노란바탕에 빨강 글씨로 변경
{
let e = doc05.querySelector('.even');
e.style.color = 'red';
e.style.backgroundColor = 'yellow';
}
// for문사용해서 class 이름 even 것들 모두 노란바탕에 빨강 글씨로 변경
{
let es = doc05.querySelectorAll('.even')
for(let i =0; i < es.length; i++) {
es[i].style.color = 'red'
es[i].style.backgroundColor = 'yellow'
}
}
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.
