나만의 개발노트

[JS 공부] WEB2 JS - 16~18강_조건문,리팩토링 중복제거(this, var변수)_230419(수) 본문

[JavaScript]/[JavaScript] 공부 기록

[JS 공부] WEB2 JS - 16~18강_조건문,리팩토링 중복제거(this, var변수)_230419(수)

노트포미 2023. 4. 19. 19:16

https://youtube.com/playlist?list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf  

 

WEB2-JavaScript

 

www.youtube.com

[16강]  조건문

[강의 내용]

- 조건문 if, else

if(조건문){
   ...조건문이 true일 경우 실행될 코드...
}else{
   ...조건문이 false일 경우 실행될 코드...
}

 

[새로 알게 된 내용]

- 글 태그 안에 <br>을 사용하면 개행됨

<h1>JavaScript</h1> //-> JavaScript

<h1>Java<br>Script</h1> //-> Java
                             Script

[17강]  조건문의 활용

[실습 내용]

: day모드에서는 버튼을 누르면 night모드로 변경되고,

  night모드에서는 버튼을 누르면 day모드로 변경되도록 하기.

  * 버튼은 한개
  * 버튼의 value값으로 조건문 사용하기 

  * 처음은 day모드로 시작

 

[코드]

<body>
    <input type="button" id="theme" value="night" onclick="
        if(document.querySelector('#theme').value === 'night'){
            document.querySelector('body').style.backgroundColor='black';
            document.querySelector('body').style.color='white';
            document.querySelector('#theme').value = 'day';
        }else{
            document.querySelector('body').style.backgroundColor='white';
            document.querySelector('body').style.color='black';
            document.querySelector('#theme').value = 'night';
        }
    ">
	<h1>JavaScript</h1>
</body>

[결과]

JavaScript

 

[18강] 리팩토링 중복의 제거

- 리팩토링(refactoring) : 코드의 구조, 관계를 단순화 하여 가독성, 유지보수성을 높이는 기법

                  ex) 중복제거

 

<리팩토링 도구>

1. this

  : 호출한 본인을 지시함

//this를 사용하지 않을 때
<input type="button" id="theme" value="night" onclick="
	document.querySelector('#theme').value = 'day';
">


//this를 사용할 때
<input type="button" value="night" onclick="
	this.value = 'day';
">

=> 외부적으로는 같은 행동을 하지만, 내부적으로 훨씬 단순화 됨

* 기존처럼 id를 사용하면, 복사붙여넣기로 같은 버튼을 만들 때 새로운 id를 지정해줘야함

  but, 'this'를 사용할 경우 복사붙여넣기해도 오류없이 가능

//this를 사용하지 않을 때
<input type="button" id="theme" value="night" onclick="
     document.querySelector('#theme').value = 'day';
">
<input type="button" id="theme2" value="night" onclick="
     document.querySelector('#theme2').value = 'day';
">
=> id='theme' / id='theme2'로 다르게 정해줘야함



//this를 사용할 때
<input type="button" value="night" onclick="
     this.value = 'day';
">
<input type="button" value="night" onclick="
     this.value = 'day';
">
=> 동일하게 복붙 가능

 

2. 변수사용

var 변수이름 = 중복되는 값;
//변수를 사용하지 않을 때
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
=> document.querySelector('body')처럼 긴 문장이 반복됨


//변수를 사용할 때
var target = document.querySelector('body);
target.style.backgroundColor='black';
target.style.color='white';
=> document.querySelector('body')를 target 으로 간편하게 나타낼 수 있음

'[JavaScript] > [JavaScript] 공부 기록' 카테고리의 다른 글

[JS 공부] WEB2 JS - 15강_비교 연산자와 불리언_230417(월)  (0) 2023.04.18
[JS 공부] WEB2-JS - 12강_제어할 태그 선택, 선택자_230417(월)  (0) 2023.04.17
[JS 공부] Deep Dive책 - 8장_제어문_230322(수)  (0) 2023.04.17
[JS 공부] WEB2 JS - 1~6강_HTML과JS의 관계, 데이터 타입_230405(수)  (0) 2023.04.05
[JS 공부] Deep Dive책 - 7장_연산자_230322(수)  (0) 2023.03.22
'[JavaScript]/[JavaScript] 공부 기록' Related Articles more