개발나라 스용공주

[생활코딩] JavaScript 왕기초 6장 - Visual Studio Code / 조건문 실습 본문

WEB/JavaScript

[생활코딩] JavaScript 왕기초 6장 - Visual Studio Code / 조건문 실습

스용공주 2024. 8. 23. 17:24
728x90
728x90

이번 글은 아래 강의 내용을 바탕으로 작성되었습니다.

(생활코딩)

https://www.youtube.com/watch?v=Gt2iGEEKXww&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=17

 

 

 

아래 실행결과 영상에 대한 실습이다.

버튼을 눌러 night 버튼을 누르면 검정 배경에 흰 글씨로 day 버튼을 누르면 흰 배경에 검정 글씨로 변경된다.

전체 코드는 다음과 같다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
    <input id="night_day" type = "button" value = "night" onclick="
    if(document.querySelector('#night_day').value === 'night') {
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
    document.querySelector('#night_day').value = 'day';
    }
    else {
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    document.querySelector('#night_day').value = 'night';
    }
    ">
    안녕하세요
</body>
</html>

 

 

 

우선 이 실습의 경우 if문으로 night의 여부에 대해 참인지 거짓인지 판단을 해줘야한다.

그리고 night 여부를 판단하기 위해 지금 현재 value 값이 무엇인지 알아내야한다.

현재 value값을 알아내는 코드의 부분은 아래의 코드이다.

if(document.querySelector('#night_day').value === 'night')

 

 

여기까지 하였다면 night와 같다면 true에 해당하는 코드를 실행시키고 틀렸다면 false에 해당하는 코드를 실행시킨다.

그럼 night버튼이 실행되었다면 다시 이전으로 돌아가는 코드 또한 만들어줘야한다.

 

이 부분의 코드를 만들어주지 않았다면 계속 value값이 night로 고정되어있어 한가지 실행문만 계속 실행되기 때문이다.

document.querySelector('#night_day').value = 'day';
//value값이 night일 때 day로 value를 변경시켜줌.
document.querySelector('#night_day').value = 'night';
//value값이 day일 때 night로 value를 변경시켜줌.

 

 

728x90
728x90

'WEB > JavaScript' 카테고리의 다른 글

[생활코딩] JavaScript 왕기초 8장 - Visual Studio Code / 반복문(loop)과 배열(array)  (0) 2024.08.29
[생활코딩] JavaScript 왕기초 7장 - Visual Studio Code / 리팩토링(refactoring) - 중복 제거  (0) 2024.08.26
[생활코딩] JavaScript 왕기초 5장 - Visual Studio Code / 조건문  (0) 2024.08.22
[생활코딩] JavaScript 왕기초 4장 - Visual Studio Code / 비교연산자와 불리언(Boolean)  (0) 2024.08.22
[생활코딩] JavaScript 왕기초 3장 - Visual Studio Code / 야간모드 버튼 만들기 실습  (0) 2024.08.14
'WEB/JavaScript' Related Articles more
Comments