생활코딩 JavaScript 비교연산자 데이터타입 조건문 if else

프로그래밍 연습 2020. 11. 2. 14:58

생활코딩 비교연산자와 Boolean 데이터타입,

JavaScript 조건문 if else

비교 연산자와 Boolean은 'true'와 'false' 두 개의 데이터로 이루어져 있다.

<script> document.write(1===1); document.write(1===2); </sscript>	'==='는 'true'와 'false' 둘 중 하나를 만드는 연산자이며, 좌항과 우항이 같으면 'true', 다르면 'false'이다.
<h1>1<2</h1> <script> document.write(1<2); </sscript>	비교연산자 '<'는 참이므로 'true'로 표시된다.	수식이 아닌 문서상에 '<'기호를 표시할 때는 예상치 못한 오류를 막기 위해 < 사용한다.
<h1>1<1</h1> <script> document.write(1<1); </sscript>	비교연산자 '<'는 거짓이므로 'false'로 표시된다.	수식이 아닌 문서상에 '<'기호를 표시할 때는 예상치 못한 오류를 막기 위해 < 사용한다.

JavaScript 조건문 if else

if, else문은 표현식의 결과가 참(true)이면 주어진 실행문을 실행하고,

거짓(false)이면 아무것도 실행하지 않는다.

즉 if (조건) {

if가 참일 때 실행하고 싶은 구문;

} else {

if가 거짓일 때, 실행하고 싶은 구문;

}

※ true와 false가 올 때 순서를 잘 이해해야 함 ※

※코드 해석※

IF-true

만약에 2가 참이면 거짓인 3은 건너뛰고 다음 숫자인 4가 실행된다.

IF-false

1이 나오고 나서 만약에 2가 거짓이면 다음 숫자인 3과 4가 실행된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2>IF-true</h2>
    <script>
    document.write("1<br>");
    if(true){
    document.write("2<br>");
    } else{
    document.write("3<br>");
    }
    document.write("4<br>");   
    </script>    
      <h2>IF-false</h2>
    <script>
    document.write("1<br>");
    if(false){
    document.write("2<br>");
    } else{
    document.write("3<br>");
    }
    document.write("4<br>");   
    </script>    
</body>
</html>

조건문 if else의 활용을 통해서 아래 코드를

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

  <h1><a href="index.html">WEB</a></h1>
  <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';
  ">

간단하게 줄일 수 있음.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

  <h1><a href="index.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';
   
   }
   ">

리팩토링(refactoring) 유지보수

this (자기 자신을 가리킬 땐 this로 대체 가능)

생활코딩에서 this를 사용함으로써 코드가 간결해진다는 사실을 알게 되었다.

하지만 this가 어떤 역할을 하는지, this만 가지고 무엇을 가지고 있는지 이해가 되지 않는다.

thisd에 대해 검색해본 결과이지만 아직 감은 잘 안잡힘..

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

  <h1><a href="index.html">WEB</a></h1>
  <input type="button" value="night" onclick="
  if (this.value === 'night'){
  document.querySelector('body').style.backgroundColor='black';
  document.querySelector('body').style.color='white';
  this.value = 'day'
  }
  else{
   document.querySelector('body').style.backgroundColor='white';
   document.querySelector('body').style.color='black';
   this.value = 'night';
   
   }
   ">
 
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>JavaScript</h2>
  <p>
    JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
</p>
   
</body>
</html>

var target='지정값'

if문 전에 var target=' '을 지정하면 중복을 제거할 수 있음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

  <h1><a href="index.html">WEB</a></h1>
  <input type="button" value="night" onclick="
  var target=document.querySelector('body');
  if (this.value === 'night'){
  target.style.backgroundColor='black';
  target.style.color='white';
  this.value = 'day'
  }
  else{
   target.style.backgroundColor='white';
   target.style.color='black';
   this.value = 'night';
   
   }
   ">
 
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>JavaScript</h2>
  <p>
    JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
</p>
   
</body>
</html>

https://www.opentutorials.org/course/3085/18800

조건문 - 생활코딩

조건문 문법 소스코드 변경사항 <

www.opentutorials.org

'프로그래밍 연습' 카테고리의 다른 글

생활코딩 WEB JavaScript 배열과 반복문 (0)	2020.11.04
인프런 HTML CSS 문자 선택자 first-letter, first-line (0)	2020.11.02
JavaScript 데이터 타입과 변수와 대입 연산자 (0)	2020.11.02
인프런 실전 HTML CSS 강좌 정리 - CSS 기본 1, 2 (0)	2020.10.19
웹표준 사이트 레이아웃 만들기 연습 1 스스로 코드 작성하기 (0)	2020.10.14

ABOUT ME

성장하는 큰숲의 코딩 노트 성장하는 큰숲의 코딩 노트

생활코딩 비교연산자와 Boolean 데이터타입,

JavaScript 조건문 if else

JavaScript 조건문 if else

리팩토링(refactoring) 유지보수

this (자기 자신을 가리킬 땐 this로 대체 가능)

var target='지정값'

'프로그래밍 연습' 카테고리의 다른 글

티스토리툴바

ABOUT ME

생활코딩 비교연산자와 Boolean 데이터타입,

JavaScript 조건문 if else

JavaScript 조건문 if else

리팩토링(refactoring) 유지보수

this (자기 자신을 가리킬 땐 this로 대체 가능)

var target='지정값'

'프로그래밍 연습' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바