1)학습내용

코딩을 하다보면 코드가 비효율적인 면들이 생기기 시작하는데
코드를 효율성으로 중복된코드를 낮추고 개선하는 작업을 리펙토링이라고 한다.

틈틈히 리펙토링을해야 좋은 코드가 나온다

 <input id="night_day" type="button" value="night" onclick="
if(document.querySelector('#night_day').value ==='night'){
    documnet.querySelector('body').style.backgroundColor = 'black';
    documnet.querySelector('body').style.color = 'white';
    documnet.querySelector('#night_day').value = 'day';
} else {
(document.querySelector('#night_day').value ==='night'){
    documnet.querySelector('body').style.backgroundColor = 'white';
    documnet.querySelector('body').style.color = 'black';
    documnet.querySelector('#night_day').value = 'night';
}
}
">
  

1. night_day 를 구분해주기

위쪽 버튼의 night_day 와 구분을 해준다

<h1><a href="index.html">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
    var target = document.querySelector('body');
    if(this.value === 'night'){
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      this.value = 'day';
    } else {
      target.style.backgroundColor = 'white';
      target.style.color = 'black';
      this.value = 'night';
    }
  ">
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>JavaScript</h2>
  <p>
    JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
  </p>
 
 <input id="night_day2" type="button" value="night" onclick="
if(document.querySelector('#night_day2').value ==='night'){
    documnet.querySelector('body').style.backgroundColor = 'black';
    documnet.querySelector('body').style.color = 'white';
    documnet.querySelector('#night_day2').value = 'day';
} else {
(document.querySelector('#night_day2').value ==='night'){
    documnet.querySelector('body').style.backgroundColor = 'white';
    documnet.querySelector('body').style.color = 'black';
    documnet.querySelector('#night_day2').value = 'night';
}
}
">
  

2. 코드가 수백개면 일일히 바꾸기어렵기때문에 onclick 과 같은 event안에서 실행되는 코드를 this로 바꿔주기 (this 는 자기자신을 가리키기 때문에)

 <input id="night_day2" type="button" value="night"night_day2 가 없어도 되기때문에 없애준다

 <type="button" value="night"2-어려웠던점">2) 어려웠던점
조건문이 아직생소해서 코드짜기가 어려웠다.
3) 해결방법
참조: https://opentutorials.org/course/3085/18878 을 시청해서 다시 복습
4) 소감
html 를 마치고 javascript 의 기초를 해보았는데

2달만에 다시해보는거라 기억날듯말듯 하면서 해보는게 너무 까다로웠습니다.