함수

함수는 코드를 재사용하거나 다른 인자로 코드를 활용하는 용도로 사용하는데 함수를 선언하는 방법은 이렇다.

funtion 함수이름(){
 ...;
}

이렇게 함수를 선언하고 그 이후 함수를 호출함으로써 함수를 실행할 수 있다.

funtion 함수이름(){
 ...;
}

함수이름();

---

button

html에서 button 태그를 사용하여 버튼을 만들 수 있다.

---

onclick

onclick은 해당 엘리먼트를 클릭 시 내부의 JS코드를 실행하게 되는 속성이다.(button태그에 많이 사용한다.)

ex. <button></div>

---

클릭하면 배경색을 빨간색으로 바꿨다가 하얀색으로 바꾸는 버튼 만들기

위 내용을 바탕으로 클릭하면 웹의 색을 빨간색으로 바꾸었다가 다시 클릭하면 원래대로 만들어주는 버튼을 만들어보자.

함수 부분

수를 이용한 방법

한 번은 빨간색, 한 번은 하얀색으로 바꿔주기 때문에 두 번의 주기를 가진다고 말할 수 있다. 그래서 우리는 짝수를 이용해서 함수를 만들 것이다.

num % 2 == 0

%는 나머지를 구하는 연산자로 num % 2는 변수num을 2로 나눈 나머지를 말하는 것이다. 즉 num % 2 == 0는 그 값이 0이면 참, 0이 아니면 거짓이 된다.
num이라는 변수의 초기값을 0으로 하고 함수의 함수의 마지막에 num에게 순차적으로 1씩 더해주면 num % 2 == 0 결과는 클릭할 때마다 참, 거짓, 참, 거짓...이런 식으로 된다.

let num = 0;
//num이라는 변수를 선언하고 초기값을 0으로 한다.

function changeBodyBackground() {
  console.log("num : " + num);
  //변수 num의 값을 확인하기 위해서 "num : ~"라는 메세지를 console창에 출력한다.
  if ( num % 2 == 0 ) {
    $('body').css('background-color', 'red');
  }//num을 2로 나눈 나머지가 0이면 body태그의 background-color를 red로 변경한다.
  else {
    $('body').css('background-color', '');
  }//아니라면 background-color값을 없앤다.
  
  num++; // num += 1 -> num = num + 1
}

true, false를 이용한 방법

초기값을 참 또는 거짓으로 하고 !연산자를 이용해서 두 번의 주기를 만드는 방법도 있다.

let isRed = false;
//isRed라는 변수를 선언하고 초기값을 거짓(false)으로 한다.
//현재 상태가 빨간색이 아니기 때문에 변수 이름을 isRed("~ is Red")라고 짓고 값을 false로 둔 것이다.
function changeBodyBackground() {
  console.log("isRed : " + isRed);
  //변수 isRed의 값을 확인하기 위해서 "isRed : ~"라는 메세지를 console창에 출력한다.
  if ( isRed ) {
    $('body').css('background-color', '');
  }
  //isRed는 참(true)이라면 배경색을 바꾸지 않는다.
  else {
    $('body').css('background-color', 'red');
  }
  //isRed가 거짓(false)이라면 배경색을 빨간색으로 바꾼다.
  isRed = !isRed;
  //함수가 실행될 때마다 마지막에 isRed의 값을 바꿔줌으로써 2번의 주기로 다른 결과를 얻을 수 있다.
}