night 버튼을 클릭하면 배경색은 검정, 글자색은 흰색으로 변경됩니다. 다시 한번 클릭해도 변함없이 페이지가 그대로 출력됩니다.
기본적인 태그를 우선 작성합니다. night가 적힌 버튼을 생성합니다. 버튼을 클릭하면 동적 언어인 자바스크립트 문법이 작동하며 배경을 검은색으로, 글자는 흰색으로 변경합니다. 본문 텍스트는 text text text로 간단히 작성해놓겠습니다.
<html>
<head>
<title> if else test </title>
<meta charset="utf-8">
</head>
<body>
<input type="button" value="night" onclick="
document.querySelector('body'). style.backgroundColor='black';
document.querySelector('body'). style.color='white';
">
text text text
</body>
</html>
if 조건문 사용하여 배경색 및 글자 서식 바꾸는 버튼 활성화하기
배경이 검은색이고 본문의 글자가 흰색인 타입 A와 배경이 흰색이고 본문의 글자가 검은색인 타입 B를 버튼 하나로 변경할 수 있도록 하겠습니다. night 버튼을 누르면 배경이 검은색, 본문의 글자는 흰색인 타입 A로 변경되면서 버튼 안의 글자는 day로 바꾸겠습니다. day 버튼을 누르면 배경이 흰색, 본문의 글자는 검은색인 타입 B로 변경되면서 버튼 안의 글자는 다시 night가 되도록 하겠습니다.
night 버튼 눌러 서식 변경하기
버튼에 id를 change로 지정하겠습니다. id가 change인 버튼 안에는 value 인 night가 새겨집니다. 이 버튼을 클릭했을 때 if 구문이 작동합니다. document.querySelector으로 id change를 대상으로 정보를 불러옵니다. 이때 자바스크립트 문법. value 속성을 사용해서 id 값 중에서도 value 인 night를 불러오게 됩니다. 불러온 night 가 === 동등 비교 연산자에 의해 'night'와 동일할 경우 true 참의 불리언 값을 가집니다. true 참이기 때문에 중괄호 { } 안의 값이 문제없이 실행됩니다. 바디 태그에 배경을 검은색으로, 본문 텍스트를 흰색으로 하며 value 값은 day로 변경합니다.
day 버튼 눌러 서식 변경하기
동일하게 if 구문이 실행되고 id chang의 value를 가져와서 === 동등 비교 연산자를 이용해 'night'와 비교합니다. 이전과 달리 버튼 안의 적힌 value 값을 불러옵니다. 단 이때 value 값은 day로 'night'와 일치하지 않습니다. if 구문이 false 값을 갖게 되며, 바로 이어지는 { }을 무시하고 else 이후의 { } 중괄호 안의 명령이 적용됩니다. 배경을 흰색으로, 글자를 검은색으로 버튼 안의 값을 night로 변경합니다.
아래 작성한 코드 예시를 첨부합니다.
<html>
<head>
<title> if else test </title>
<meta charset="utf-8">
</head>
<body>
<input id="change" type="button" value="night" onclick="
if(document.querySelector('#change'). value === 'night'){
document.querySelector('body'). style.backgroundColor='black';
document.querySelector('body'). style.color='white';
document.querySelector('#change'). value='day';
} else {
document.querySelector('body'). style.backgroundColor='white';
document.querySelector('body'). style.color='black';
document.querySelector('#change'). value='night';
}
">
text text text
</body>
</html>
'코딩' 카테고리의 다른 글
| 자바스크립트 JavaScript 배열 array 만들기, 값 불러오기, 값 개수 세기, 값 추가하기 (0) | 2020.09.08 |
|---|---|
| 리팩토링 - 중복 제거하여 코드 효율화하기 - this , var 키워드 활용 (0) | 2020.09.06 |
| JavaScript 자바스크립트 조건문 if else 기본 원리 (0) | 2020.09.06 |
| Comparison operators 비교연산자와 데이터타입 (Number 숫자열, String 문자열, Boolean 불리언) (0) | 2020.09.05 |
| 자바스크립트로 웹페이지 버튼 클릭했을 때 배경색, 글자색 바꾸기 (0) | 2020.09.04 |
댓글