이진욱의코딩

조건문의 활용 본문

JS

조건문의 활용

Crucifi 2019. 7. 24. 16:18

지금까지 비교 연산자, 불리언, 조건문이라고 하는 보기에 따라 상당히 관념적으로 볼 수 있는 도구들을 살펴봤는데, 이번 수업에서는 이러한 관념적인 도구들이 얼마나 현실에서 구체적인 도움을 주는지 알아보겠습니다.

 

일단 기본코드부터 살펴봅시다.

 <input type="button" value="night" onclick="
  document.querySelector('body').style.backgroundColor = 'black';
  document.querySelector('body').style.color = 'white';
  ">
   <input type="button" value="day" onclick="
   document.querySelector('body').style.backgroundColor = 'white';
   document.querySelector('body').style.color = 'black';
   ">

여기서 아래에 버튼을 한 개 더 만들어 봅시다.

 

위의 코드를 밑에 불어넣기를 하면 됩니다.

 

이런식으로

여기서 이번 포스팅의 주인공인 if문을 써서 조건을 줘 봅시다.

 

 if night
   document.querySelector('body').style.backgroundColor = 'black';
   document.querySelector('body').style.color = 'white';
  else
   document.querySelector('body').style.backgroundColor = 'white';
   document.querySelector('body').style.color = 'black';
  ">

형식에 맞게 조건문을 수정해보도록 하죠

 <input type="button" value="night" onclick="
  if(night){
   document.querySelector('body').style.backgroundColor = 'black';
   document.querySelector('body').style.color = 'white';
  }else{
   document.querySelector('body').style.backgroundColor = 'white';
   document.querySelector('body').style.color = 'black';
  }
  ">

여기서는 night부분이 주인공이 됩니다. 상황에 따라 true가 되거나 false가 되게 하면 됩니다. 그러기 위해선

맨 먼저 해야 할 일은 현재 버튼의 value값이 무엇인지 알아내는 것입니다.

 

버튼에 id속성을 추가하고 조건문의 조건을 수정합니다.

 

<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';
  }else{
   document.querySelector('body').style.backgroundColor = 'white';
   document.querySelector('body').style.color = 'black';
  }
  ">

이렇게 바꾼 뒤 결과를 한 번 봅시다.

 

성공?!

야간모드는 성공적으로 실행이 됩니다. 하지만 주간 모드는 실행이 되지 않습니다.

왜냐하면 해당버튼의 value값이 'night'이기 때문입니다. 그러므로 야간모드로 바뀌었을 때 버튼의 value값을 'day'로 바꿔야 합니다. 따라서 if문 안에서의 버튼의 value갑을 'day'로 바꾸고, else문 안에서는 버튼의 value값을 'night'로 바꾸는 코드를 추가한 다음 페이지를 새 로고 침해 보겠습니다.

 

day

 그럼 보다시피 'night'버튼을 누르면 야간모드로 바뀌고 버튼도 'day'로 바뀝니다.

 

자 이제 앞에 있는 장황한 두 버튼이 필요가 없어졌으니 삭제하고 하나의 기능으로 합쳐봅시다.

 

최종 코드입니다.

 

<!DOCTYPE html>
<html>
<head>
  <title>web1-javascript</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1 ><a href="0717.html">web</a></h1>
  <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';
  }
  ">
   
  
   
    
   <ol>
     <li><a href="https://terms.naver.com/entry.nhn?docId=1168097&cid=40942&categoryId=32838">html</a></li>
     <li><a href="https://terms.naver.com/entry.nhn?docId=1179641&cid=40942&categoryId=32854">css</a></li>
     <li><a href="https://terms.naver.com/entry.nhn?docId=848218&ref=y&cid=42346&categoryId=42346">js</a></li>
   </ol>
   <h2>javascript란 무엇인가?</h2>
   <p>
      웹 페이지에서 사용자로부터 특정 이벤트나 입력 값을 받아 동적인 처리를 목적으로 고안된 객체 기반의 스크립트 프로그래밍 언어.
      사용자 경험을 향상시키기 위한 방법으로 주로 사용된다. 일반적으로 HTML 문서에 내재되며, 브라우저에서 실행된다.예를 들면, 마우스를 HTML 문서의 특정 이미지나 
      텍스트 위로 가져갔을 때 이미지 크기가 커지거나 텍스트의 색이 바뀌는 기능이다. 
      또 검색창 입력 박스에 ‘자’를 입력하면 현재 기준으로 사용자 검색이 많은 ‘자’로 시작하는 검색어 목록을 보여주는 기능도 자바스크립트로 구현한 것이다.
      자바스크립트는 1995년 미국의 넷스케이프 커뮤니케이션즈(Netscape Communications)에서 처음 개발되었다. 자바스크립트 표준은 1996년 11월부터 유럽 컴퓨터 제조업자 
      협회(ECMA: European Computer Manufacturers Association) 기술위원회 39(TC-39)에서 에크마스크립트(ECMAScript, ECMA-262)라는 이름으로 개발되었다. 
      최신 표준은 2017년 6월에 제정된 ECMAScript 2017이며, 2015년부터 1년에 한 번씩 새로운 버전의 ECMAScript를 공개하고 있다.
      자바스크립트는 주로 웹 브라우저 내에서 사용되는 언어였으나, 자바스크립트 기반의 런타임 플랫폼(예: Node.js)들이 개발되면서 서버측 프로그램 개발에도 사용이 크게 확대되었다.
      다음은 자바스크립트가 내재된 HTML 문서의 예로, 브라우저에서 ‘자바스크립트 실행’ 버튼을 클릭하면 < script > 태그
    </p>
  
    
  </body>
 </html>

처음보다 훨씬 보기가 좋고 깔끔한 모습입니다.

 

 

'JS' 카테고리의 다른 글

배열과 반복문의 기초  (0) 2019.07.26
중복의 제거를 위한 리펙터링  (0) 2019.07.24
조건문  (0) 2019.07.24
비교연산자와 블리언  (0) 2019.07.24
복습차 응용  (0) 2019.07.20
'JS' Related Articles more