일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- c++
- C
- js
- C언어
- 프로그래밍
- ANIMATION
- animating
- visualstudio
- 개발블로그
- JavaScript
- UnrealEngine
- 오블완
- modeling
- 개발
- 마야
- HTML
- charactercreator
- ue5
- unreal
- 언리얼엔진
- autodesk
- 3dmodeling
- 3d
- cc4
- 티스토리챌린지
- reallusion
- character
- 애니메이팅
- iclone
- Costume
Archives
- Today
- Total
개발나라 스용공주
[생활코딩] JavaScript 왕기초 6장 - Visual Studio Code / 조건문 실습 본문
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' 카테고리의 다른 글
Comments