웹3: 함수,제이쿼리,click이벤트,버튼 한개로 배경색 추가/제거

[함수] function : 원하는 값을 입력했을 때 출력됨.

- 이름 짓기 특징은 변수명과 동일하다.

- 함수는 호출되기 전까지 실행되지 않는다.

console.clear();

function add() {
  console.log("실행");
}
add();

-> 호출되어 실행된 상태임.  add(); 값을 삭제하면 실행 안됨.

---

[제이쿼리]

script[src] + tab -> 코드펜에서 셋팅 -> js ->  서치창 -> jquery -> 주소창 복붙-> src"  "

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div></div>
<section></section>

html

console.clear();

// $ -> 제이쿼리를 시작하겠다.
// ()첫번째 소괄호 -> 선택자 가져오기 (태그,클래스,아이디)
// .이벤트 -> 이벤트 형태는 다르지만 앞쪽에 항상 .이 있어야 한다.
// ()이벤트 소괄호 -> 실행문이 들어올 수 있다. 다만, 특정한 형태로 들어와야하며 앞 쪽 이벤트 형태에 따라서  구조가 달라진다.

// $().이벤트();

// $("선택자").css("속성","속성값");

let w = "width";
let h = "height";
let back = "background-color";

$("div").css("background-color","red");
$("div").css("width","100px");
$("div").css("height","100px");

$("section").css(w, "100px");
$("section").css(h, "100px");
$("section").css(back, "green");

js

 

---

[click이벤트]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<button>배경색 추가</button>

html

console.clear();

$("button").click(add);

function add() {
  $("body").css("background-color","gray");
}

js

 

---

[버튼 한개로 배경색 추가/제거]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<button>button</button>

html

 

body.active{
  background-color: gray;
}

css

 

console.clear();

$("button").click(re);

let no =0;
function re() {
  console.log(no);
  if (no % 2 == 0) {
    $("body").addClass("active")
  }
  else {
    $("body").removeClass("active");
    no = no + 1;
  }
}

js