<유튜버 - 생활코딩> WEB2 - JavaScript 14~

#태그 색상 입히는 법: 화면 오른쪽 아래에 html 누르시고 뜨는창에서 auto detect 누르기

#비교 연산자, 블리연, IF 조건문

1. 비교 연산자 - === - 이항 연산자

1+1=2

+라는 이항 연산자는 왼쪽과 오른쪽의 값을 더해서 2가 되는 것

1===1 이 이항연산자는 만약에 같다면 true라는 값을 갖는다.

 

===라는 비교 연산자는 좌항과 우항의 관계에 따라서 true / false를 만들어 내는 연산자이다.

2. 블리언 {}

true와 false 값을 묶어서 'Boolean'이라고 부른다.

데이터 타입의 종류

1. Number

2. String(문자열)

3. Boolean(단 2개의 데이터 타입)

이것을 통해 인류는 단순 반복에서 해방되었다. 

HTML에서는 '<,>'가 html에서는 태그의 시작과 끝이라는 문법이어서 다른 코드값을 사용한다. 

'&lt;'

부등호(<) &(앰퍼샌드) greater than의 약자

'&gt;'

부등호(>) &(앰퍼샌드) greater than의 약자

&nbsp;

” ” : 공백(스페이스 한 칸)

&amp;

앰퍼샌드(&) 기호

3. 조건문의 형식

<br>은 줄 바꾸기

IF문의 뒤에 따라오는 괄호() 안에는 블리언 데이터 타입이 온다. True, False

() 안에 무엇이 오느냐에 따라서 실행되는 코드가 바뀐다.

 

true 면

첫 번째 중괄호가 실행된 후 두 번쨰 중괄호가 실행된다. 뒤에나오는 else 안이 무시된다.

<script>

<h2>if-true</h2>

document.write("1<br>");     

 if(true){

document.write("2<br>");

    } else {

document.write("3<br>");

}

document.write("4<br>");

</script>

 

false면

첫번쨰 중괄호가 실행된 후 두 번째가 무시되고 else 안이 실행된다.

 

<script>

<h2>if-false</h2>

document.write("1<br>");

if(false){

document.write("2<br>");

} else {

document.write("3<br>");

}

document.write("4<br>");

</script>

4. 조건문의 활용

만약에 night 와 day 버튼을 하나로 만들어 버리고 싶을 때 어떻게 해야 할까?

<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 = 'pink';

  document.querySelector('body').style.color = 'white';

">

 

<input id="night_day" 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 = 'pink';

  document.querySelector('body').style.color = 'white';

}

">

 

id="night_day"의 value 값을 알아내기 위해서 

구글링 js element get value 검색

document.getElementById("myText").value = "Johnny Bravo";

 

우리는 .value를 사용하면 된다는 것을 알게되었다.

자, 그럼 이제 웹사이트 개발자 도구를 이용해서 console에다가

document.querySelector('#night_day')를 치면 

위에 if 코드가 자동완성 될 것이다.

다시 위쪽 화살표를 누르면, 쳤던 것을 가져오는데 

document.querySelector('#night_day')에다가 .value를 붙여보자

그러면 값이 "night"라고 뜰 것이다.

 

element에서 id="night_day" type="button" value="night"를 value="day" 로 바꾸고

다시 저 값을 입력하면"day"라고 뜰 것이다.

 

즉, 우리는 이 코드를 통해서 id값이 night_day인 태그의 value 값을 가져올 수 있다.

 

<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 = 'pink';

  document.querySelector('body').style.color = 'white';

}

">

 

이렇게 하고 실행하면 #night_day의 value 값이 night 니까 조건문 '()이 night 일 시' 여기에 부합하다.

고로 화면이 black과 글씨가 white로 바뀌게 되는데 문제는 그러고 나서가 끝이다. 뭐가 문제일까?

day로 돌아가는 버튼이 없다. 고로  

 

<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 = 'pink';

  document.querySelector('body').style.color = 'white';

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

}

">

저 굵은 파란 글씨를 추가해야 줘야 '#night_day' 의 value 값이 night에서 day로 바뀐다.

그렇게 되면 조건문()에 value가 night가 아님으로 다시 버튼을 누를시 else를 적용하게 된다.

추가적으로 else에서 파란색 코드값을 넣어주면 다시 '#night_day' 의 value 값이 day에서 night로 바뀌게 된다.

 

이렇게 하면 우리는 장황한 코드를 줄이고 박스 2개를 하나로 만들어 낼 수 있다.

 

5. 리팩토링 -

공장으로 보내서 다시 개선한다. 코드를 작성하다보면 가독성이 떨어지고 중복이 증가한다. 그리고 프로그램이 비효율적인 순서로 작동하는 경우도 많아진다. 이것을 효율적으로 만들어서 가독성을 높이고 유지보수를 하기 편리하게 만들고 중복적인 코드를 낮추는 작업이 'reFactorying'이라고 한다. 틈틈이 작업을 해줘야 좋은 코드가 만들어진다. 

 

<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 = 'pink';

  document.querySelector('body').style.color = 'white';

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

}

">

 

onclick과 같은 event 안에서 실행되는 코드들은 <input> 태그를 가리키도록 하는 특수한 코드가 있다

바로 리팩토링의 대표적인 키워드 'this' 

사실상 위의 빨간 글씨가 가리키는 것은 onclick 이벤트가 속해 있는 자기 자신 이다.  고로 id는 이제 의미 없으니 지우고 빨간 글씨를 this로 바꿔도 제대로 잘 작동한다 + 간결하고 가독성도 좋다 = 좋은 코드이다.

참고로 원래있던 코드부터 this로 바꿔야 작동함. 

 

<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 = 'pink';

  document.querySelector('body').style.color = 'white';

 this.value === 'night';

 }

">

 

중복을 끝까지 쫓아가서 없애는 사람이 코딩을 잘하는 사람이다. 중복의 제거가 여러가지 기술을 쓰게 한다 = 머리를 쓰게 한다.

 

var target = document.querySelector('body');

<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 = 'pink';

  document.querySelector('body').style.color = 'white';

 this.value = 'night';

 }

">

 

이 굵은 글씨를 target 변수를 쓰고 있는 코드값을 바꾸면 4개든 1억개든 한 번에 바뀌는 폭발적인 효과를 갖게 된다. 잘 애용하길!

 

<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 = 'pink';

  target.style.color = 'white';

 this.value = 'night';

 }

">

 

계속 버튼 바꾸는 것이 안되었던 이유: ===는 if() 안에 있는 항목에 대해 === 쓰는 것이고 밑에서는 = 하나로 했어야 했는데 내가 잘못 적었다.

6. 배열 (이후 반복문)

데이터가 많아질수록 사람이 감당하기 힘들어 지는데 이것을 위해 우리는 수납상자 '배열(array)를 사용한다.서로 연관된 데이터를 잘 정돈해서 담아두어 단순하게 만든다.

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

 </head>
    <body>
      <h1>Array</h1>
      <h2>Syntax</h2>
      <script>
        var coworkers = ["egoing", "leezche"];

  </script>
      <h2>get</h2>
      <script>

document.write(coworkers[0]); ----------0부터시작해서 그렇고 숫자 셀 때는 2개 인것임

document.write(coworkers[1]); 

</script>
      <h2>add</h2>
      <script>

coworkers.push('yaya');

coworkers.push('sung');

  </script>
       <h2>count</h2>
      <script>

document.write(coworkers.length);

    </script>
    </body>
  </html>

 

끝에다가 배열 추가하기

구글링: Js arrary add

 

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")

 

구글링: Js array count

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;

 

배열을 앞이든 뒤에든 중간에든 추가하는 코드가 따로 있으니 찾아보면 알 수 있다.

7. 반복문

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <body>
<h1>Loop</h1>

<ul>

<script>

document.write('<li>1</li>');

var i = 0;

while(i < 3){

document.write('<li>2</li>');

document.write('<li>3</li>');

i = i + 1;

}

document.write('<li>4</li>');

</script>

</ui>

    </body>
  </html>

 

document.write('<li>1</li>'); 이것을 계속 나열할 수 있지만 1억개라면 너무 힘들 것임으로 우리는 반복문을 사용할 수 있다.

 

while(i<3)이 true 이면 2,3 이나오고 false면 4가 나오는 방식 

 

8. 배열과 반복문의 활용

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title></title> 
    </head> 
    <body> 
<h1>Loop & Array</h1>

<script>

 var coworkers = ['egoing', 'leezche', 'duru', 'taeho']';

</script>

<h2>Co workers</h2>

<ui>

<script>

 var i = 0;

while(i < 4){

document.write('<li>'+coworkers[i] + '</li>');

i = i + 1;

}

</script>

</ui>

    </body> 
  </html> 

 

 

<li>egoing</li>

<li>egoing</li>

<li>egoing</li>

<li>egoing</li>

 

li 목록에 복잡한 것이 있어서 바꿔야 한다면 배열을 이용하는 것이 좋다.

 

<script>
  var i = 0;
  while (i < coworkers.length) {
    document.write('<li><a href="http://a.com/'+coworkers[i]+'">' + coworkers[i] +'</a></li>');
    i = i + 1;
  }
</script>

이렇게 하면 각 배열에 링크를 삽입할 수 있다. 

 

배열: 순서대로 서로 연관된 데이터를 잘 정리정돈 하는 것

반복문: 순서대로 배열된 데이터를 하나씩 꺼내서 자동화된 처리를 하게 해주는 문법

이 둘의 시너지는 엄청나니까 활용을 잘해야한다.

이 기능을 어떻게 해야 웹브라우저에서 활용 가능한가를 살펴봐라.

 

Q. 'egoing','leezche','duru','taeho' 작은 따움포는 왜 붙이는거예요?

A. 자바스크립트에서 string 이라는 문자열로 취급하려면 ' ' , " " 를 씁니다.

 

Q. document.write('<li><a href="http://a.com/">' + coworkers[i] + '</a></li>'); 이렇게 해도 링크 걸리는데 선생님이 <a>태그안에 또 +cowrokers[i]+를 넣어주신이유가 뭘까요?ㅜㅜ

A. 전자의 코드는 모든 리스트에 동일하게 http://a.com/ 링크가 걸리게 되는데 '+coworkes[i]+'를 삽입하면 http://a.com/'+coworkes[i]+' 가 돼서 egoing을 클릭하면 http://a.com/egoing lezche를 클릭하면 http://a.com/lezche 로 링크가 됩니다.

 

Q. 선생님 '+coworkers+' 에서 +가 어떤 기능인가요??

A. 따옴표 " " 사이에 입력된 것들은 다 문자열(string)입니다. 그래서 coworkers를 함수로 인식 안하고 문자로 인식하죠. +는 문자나 함수를 붙여주는 역할을 해요.