[JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - If, else, or / 20.06.04

출처

- Nomad Academy

 www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK

 

 

#2.5 If, else, and, or

if와 else는 프로그래밍에서 어떻게 모든게 잘 동작하는지 조건을 달아준다.

if(condition){

    block

} else {

    block

}

- if 안의 조건이 참이어야 그 옆의 함수가 작동한다. : block을 실행시키려면

- elsse if : if문의 조건이 참이 아니라면 이건 참인가?

 

- if (20 > 5 && "nicols" === "nicolas")

&& = and

양쪽 조건이 모두 참인지 물어보는 것.

하나라도 거짓이면 else문장으로 고!

 

- if 20 > 55 || "nicolas" === "nicolas")

|| = or

양쪽 조건 중 하나만 참이면 참으로 인정되어

if와 인접한 block이 실행된다.

 

- prompt 함수 : alrert와 비슷한데 오래된 자바스크립트라 아무도 안씀.

 

- 부등호 쓸 때 조심해야겠다.

써야 하는 순서가 다르면 오류가 뜨는데 솔직히 뭐가 틀린줄 몰랐다.

<=, >=을 쓸 때 변수에 =보다 <, >가 더 가까이 있어야 하는듯.

 

<script>


const age = prompt("How old are you?");
if (age >= 18 && age <= 21) {
    console.log("you can drink but you should not");
} else if (age > 21) {
    console.log("go ahead!");
} else {
    console.log("you can't");
}


<script>

 

 

#2.6 DOM - If else - Function practice

- 대문자로 변수 이름을 설정한다.

- 뭔가 조건문을 쓰는 자바스크립트를 작성할 때 세 단계로 나눌 수 있음.

 

첫째. 변수를 지정한다.

: 내가 지정할 선택자와 속성값에 대한 변수를 작성

 

둘째. 함수를 만든다.

: 변수를 이용하여 내가 원하는 기능의 함수를 만든다.

 

셋째. 함수를 실행시킬 조건을 만든다. 

 

 

- 흠 근데 오히려 실행시킬 조건을 먼저 만드는게 더 편할 수도 있다.

미로를 탈출구부터 찾아 입구로 가는게 더 쉽듯이..

const title = document.querySelector("#title");
const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "#7f8c8d";

function handleClick() {
	const currentColor = title.style.color;
    if (currentColor === BASE_COLOR){
    	title.style.color = OTHER_COLOR;
    } else {
    	title.style.color = BASE_COLOR;
    }
}

function init(){
	title.style.color = BASE_COLOR;
	title.addEventListener("click", handleClick);
}

inst();

 

function handleOffline() {
  console.log("good-night");
}

function handleOnline() {
  console.log("good-morining");
}

window.addEventListener("online", handleOnline);
window.addEventListener("offline", handleOffline);

- 이벤트의 종류를 알고 싶다면? MDN에서 검색한다.

 

 

#2.7 DOM - If else - Function practice part Two

- wow..  아래의 예시와 같이 color를 자바스크립트에 변수로 쓰지 않고

  css에서 html에서 적용할 태그를 지정해주지 않은,

  즉 주인이 없는 선택자를 새롭게 생성할 수 있다.

const title = document.querySelector("#title");
const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "#7f8c8d";

function handleClick() {
	const currentColor = title.style.color;
    if (currentColor === BASE_COLOR){
    	title.style.color = OTHER_COLOR;
    } else {
    	title.style.color = BASE_COLOR;
    }
}

function init(){
	title.style.color = BASE_COLOR;
	title.addEventListener("click", handleClick);
}

inst();

이것이 각각의 코드의 목적에 맞게

 

body {
  background-color: #ecf0f1;
}

h1 {
  color: #34495e;
}

.clicked {
  color: #7f8c8d;
}

이렇게 css시트와

 

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";

function handleClick() {
  const currentClass = title.className;

  if (curentClass !== CLICKED_CLASS) {
    title.className = CLICKED_CLASS;
  } else {
    title.className = "";
  }
}

function init() {
  title.addEventListener("click", handleClick);
}

init();

이러한 javascript로 철저히 분리하여 쓰는 것이 좋다는 것임.

 

- Element.className

특정 요소의 클래스 속성값을 가져오거나 설정할 수 있다.

쉽게 말해 어떤 속성값이 지정되어 있는 CSS시트에 있을 클래스 이름을 가져오는 것임..

이걸로 클래스명을 바꿀 수 있다.

참고 : https://developer.mozilla.org/ko/docs/Web/API/Element/className

 

- 하지만.. h1 태그에 btn이라는 클래스를 주고

css에 .btn cursor: pointer;을 주면 어떻게 될까? '_;

글자를 클릭한 순간 ClassName으로 준 값 때문에

class가 바뀌면서 원래 있었던 class인 btn은 사라져버린다. ㄱ=;;;;

 

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";

function handleClick() {
  const hasClass = title.classList.contains(CLICKED_CLASS);

  if (hasClass) {
    title.classList.remove(CLICKED_CLASS);
  } else {
    title.classList.add(CLICKED_CLASS);
  }
}

function init() {
  title.addEventListener("click", handleClick);
}

init();

따라서 원래 class에서 주고 싶은 class효과만 뗏다 붙였다 하는 형식으로 코드를 변경한다.

 

- Element.classList

요소의 클래스 속성의 컬랙션인 활성 DOMTokenlist를 반환하는 읽기 전용 속성이다.

라는데 무슨 소리인지 모르겠다.

그냥 그 클래스의 속성 모음을 가지고 오는 것 같다.

 

- classList.add(클래스명)을 하면

클래스에 또 다른 클래스 속성을 붙여넣을 수 있다. 

개발자모드에서 보면 원래 클래스명 뒤에 공백을 한 칸 띈채로

새로운 갖다 붙인 클래스명이 있는 것을 확인 가능하다.

 

- classList.remove(클래스명)을 하면

반대로 클래스에 있는 어떤 클래스 모음을 없앨 수 있다.

참고 : https://developer.mozilla.org/ko/docs/Web/API/Element/classList

 

- classList.contains(클래스명)을 하면

클래스 안에 괄호 안에 있는 클래스명의 value가 존재하는지 안하는지 체크한다.

 

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";

function handleClick() {
    title.classList.toggle(CLICKED_CLASS);
}

function init() {
    title.addEventListener("click", handleClick);
}

init();

토글의 위엄..

이렇게만 써줘도 아까 조건문을 써준대로 코드를 작동시킨다.

CLICKED_CLASS가 classList에 있는지 체크하고, 없으면 넣고 있으면 빼준다.

 

많은 사람들은 이것을 보고 허무감(?)을 느꼈다고 한다.