학습내용
<div>
<h4><a href="./index.html">DAY +4</a> </h4>
<input type="button" id="dnbtn" value="Night" onclick="
let button = this;
if (button.value==='Night'){
document.querySelector('body').style.
backgroundColor='black';
document.querySelector('body').style.
color='White';
button.value='Light'
}else{
document.querySelector('body').style.
backgroundColor='white';
document.querySelector('body').style.
color='black';
button.value='Night'
}
">
</div>
if구문과 else를 이용하여 기존에 Night/Light 각각 있던 버튼을 하나로 만듬
<html>
<body>
<div id="container">
<div>
<h4><a href="./index.html">DAY +4</a> </h4>
<input type="button" id="dnbtn" value="Night" onclick="
let button = this;
if (button.value==='Night'){
document.querySelector('body').style.
backgroundColor='black';
document.querySelector('body').style.
color='White';
button.value='Light'
}else{
document.querySelector('body').style.
backgroundColor='white';
document.querySelector('body').style.
color='black';
button.value='Night'
}
">
</div>
</body>
</html>for구문을 이용한 반복문 feat.배열
<h1> 배열 Array</h1>
<script>
let topics = ['html','css','js'];
let members = ['egoing','less','dim'];
console.log(topics.length);
console.log(topics[0]);
</script>
<h1>반복문 Loop</h1>
<script>
console.log(1);
for ( let i=0; i<3 ;i=i+1 ){
console.log(2);
console.log(3);
}
console.log(4);
</script>
<h1>Array+ Loop</h1>
<script>
topics = ['html','css','js']
for(let i=0; i<topics.length; i=i+1){
document.write('<li>'+topics[i]+'</li>');
}
</script>이해하지 못한 부분
반복문에 대한 이해도의 부족
<script>
console.log(1);
for ( let i=0; i<3 ;i=i+1 ){
console.log(2);
console.log(3);
}
console.log(4);
</script>해결내용
반복문에는 어떠한 구문이 있는지 찾아보고
반복문을 이용하여 모든 a태그에 대한 색을 변경해 보았다.
for문을 사용하는 경우
반복횟수가 정해진 경우
주로 배열과 함께 많이 사용
while문을 사용하는 경우
무한루프나 특정 조건에 만족할 때까지 반복해야 하는 경우
주로 파일을 읽고 쓰기에 많이 사용
while구문을 사용하여 코드작성
<input type="button" id="dnbtn" value="Night"학습소감">학습소감
조건문 if와 elsed의 사용을 알게되었고 어려웠던 반복문의 사용과 쓰임에따라 다른 반복문 구조에 대해 더 알아 볼 수 있었다.
