[JavaScript-생활코딩] 23. 함수의 활용

https://opentutorials.org/module/3180/18883

함수의 활용 - WEB2 - JavaScript

 

리팩토링 하는데 필요한 함수

 

<script>
function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night'){
target.style.backgroundColor ='black';
 target.style.color ='white';
 self.value = 'day';

 var alist = document.querySelectorAll('a');
 var i = 0;
 while (i < alist.length) {
     console.log(alist[i]);
     alist[i].style.color='powderblue';
     i = i+1;}

} else {
target.style.backgroundColor ='white';
target.style.color ='black';
self.value = 'night';

var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length) {
    console.log(alist[i]);
    alist[i].style.color='blue';
    i = i+1;}
}
}
</script>
 <h1><a href="index.html">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
  ">
  <input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
  ">
  <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>

function nightDayHandler(self)

(self) - 파라미터(parameter) 매개변수

​

self.value

.value 앞의 문자를 모두 self로 수정한다

  <input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);">

onclick="nightDayHandler(this);"

(this) - 함수호출 argument

*자신을 호출할때 this 로 지정하면 다 호출가능하여 편하다.