JavaScript 기초

1. 동적 UI 만드는 스텝

1-1. 기본적인 UI 만드는 법칙

1. HTML CSS로 미리 ui 디자인을 해놓고 필요하면 평소에는 숨김
2. 버튼을 누르거나 할 경우 ui를 보여달라고 자바스크립트 코드 짬

1-2. UI 애니메이션 만드는법 (one-way)

1. 시작스타일 만들고 (class로)
2. 최종스타일 만들고 (class로)
3. 원할 때 최종스타일로 변하라고 JS 코드짜기
4. 시작스타일에 transition 추가
   A 상태에서 B 상태로만 움직이는 one-way 애니메이션은 이렇게 만들면된다.

2. 자바스크립트 Function 문법

1-1. function

function(일명 함수)라는 문법이 있는데
함수는 길고 더러운 코드를 한 단어로 축약하고 싶을 때 쓰는 문법이다.
특정 기능을 다음에도 쓰기 위해 모듈화해놓는 문법이라고 생각하면 된다.

1-2. function 사용방법

1. function 키워드 쓰고 소괄호, 중괄호를 붙인다.
2. 그리고 소괄호 왼쪽에 작명 하고
3. 긴 코드를 중괄호 안에 담으면 코드 축약 끝!
   자유롭게작명() 쓸 때 마다 그 자리에 긴 코드가 실행된다.

1-3. function에 사용가능한 파라미터 문법

1. ()소괄호 내에 아무글자나 적고
2. {} 중괄호 내에도 같은글자 아무데나 적으면 된다.
   
   1.알림창열기('block') 이렇게 실행하면
   document.getElementById('alert').style.display = 'block'; 이런 코드가 실행된다.
   2.알림창열기('none') 이렇게 실행하면
   document.getElementById('alert').style.display = 'none'; 이런 코드가 실행된다.

3. EventListner

3-1. 이벤트리스너 사용방법

이렇게 작성하면 id가 어쩌구인 요소를 '클릭'하면 안의 코드를 실행해주세요라는 뜻이된다.
이걸 사용하면 버튼에 onclick 넣을 필요가 없어진다.

• event란?
  
  유저가 웹페이지 접속해서 클릭, 스크롤, 키보드입력, 드래그 등을 할 수 있는데
  이걸 전문용어로 이벤트라고 부른다
  어떤 요소 클릭시에 click 이벤트
  마우스 갖다대면 mouseover 이벤트
  스크롤하면 scroll 이벤트
  키입력하면 keydown 이벤트
  ...등 몇십가지가 있다.

4. 자바스크립트로 클래스 추가하는 법

4-1. 버튼 클릭시 클래스명 추가

class명을 원하는 요소에 추가하는 법은
셀렉터로찾은요소.classList.add('클래스명') 이렇게 쓰면 된다.
class명을 원하는 요소에서 제거하는 법은
셀렉터로찾은요소.classList.remove('클래스명') 이렇게 쓰면 된다.

    document.getElementsByclassName('어쩌구')[0].addEventListener('click',function(){
    document.getElementsByclassName('저쩌구')[0].classList.add('클래스추가');
    }
    );

👆 class='어쩌구' 가진 요소 클릭하면
class='저쩌구'인 요소에 '추가해줘' 라는 클래스명을 추가하라는 코드이다.

4-2. 버튼 한번 더 누르면 숨기기

if문, 변수문법으로도 가능하지만 토글로 쉽게 구현할 수 있다.

    .classList.toggle() 

위의 코드를 이용하면
-클래스명이있으면 제거하고
-클래스명이 없으면 붙여준다.
그래서 왔다갔다 하는 ui 만들 때 유용하게 쓰일 수 있다.

5. QuerySelector

getElementById()
getElementByClassName()
말고도 다른 방식으로 html 요소를 찾아주는 셀렉터가 있다.
queryselector 이다.
querySelector() 안에는 css 셀렉터 문법을 사용가능하다
(css에서 마침표는 class라는 뜻이고 #은 id라는 뜻임)
다만 querySelector() 는 맨 위의 한개 요소만 선택해줍니다.
👆 그래서 위처럼 test1이라는 클래스가 중복으로 여러개 있는데
X번째 요소를 선택하고 싶은경우에는 querySelectorAll()[x] 이렇게 사용해주면 된다.

6. If else 조건문

6-1. if 조건문 사용방법

조건부로 코드를 실행하고 싶으면 if문을 쓰면 된다.조건식이 참일 때 중괄호 안에 있는 코드를 실행시켜 준다.

6-2. 비교 연산자

같다고 비교하고 싶으면 ==
크거나 작은지 비교하고 싶으면 >, <
크거나 같다, 작거나 같다는 >=, <=
다른지 비교하고 싶으면 !=

같다고 비교하려면 == 쓰면 된다고했는데 실은 === 이것도 있음
== 이건 느슨한 비교
=== 이건 엄격한 비교
== 느슨한 비교는 자료의 타입변환을 지가 알아서 해보고 동일하면 true라고 판정해주고
=== 엄격한 비교는 자료의 타입까지 동일해야 true라고 판정해준다.

6-3. 간단한 alert 함수

간단한 알림팝엄 띄우고 싶으면 alert('안녕')쓰면 된다.

6-4. else if 문법

if문 뒤에 몇번이고 원하는 만큼 붙일 수 있다.else if 뜻은 "그게아니면 만약에" 라는 뜻이다.
그래서 1 == 3 비교해보고 그게 아니면 3 == 3 비교해보고 이게 참이면 맞아요2를 출력해준다.

• if문만 2개 있으면
  위에있는 if문이 참이든 아니든 둘째 if문도 항상 실행된다.
• if+else가 있으면
  else 덕분에 위의 조건식이 참이면 else 뒤는 스킵한다.
  그래서 조건식을 여러번 검사하는데 중간에 참이 나올 경우
  코드실행을 중단하고 싶으면 else if 쓰면 된다.

6-5. true/false 자료

if 조건문 자리에는 == 등호 이런게 아니라 true, false를 넣어야 잘 작동한다.진짜로 true 넣으면 if문이 실행 잘된다
true는 참, false는 거짓을 뜻하는 자료형입니다.
개발자말로 boolean 타입이라고 부른다
이런 것들은 if문 소괄호 안에서 false랑 같은 역할을 한다
이런 것들은 if문 소괄호 안에서 true랑 같은 역할을 한다

6-6. and/or 연산자

if문 소괄호 안에 조건식을 여러개 동시에 입력하고 싶다면 and/or 기호와 함께 적으면 된다.&& 기호는 논리학의 and 역할을 해준다
왼쪽 오른쪽이 둘 다 true면 전체를 true로 바꿔준다.|| 기호는 논리학의 or 역할을 해준다
왼쪽 오른쪽 둘 중 true가 적어도 1개 있으면 전체를 true로 남겨준다.

7. 변수 문법

7-1. 자료를 잠깐 저장할 수 있는 변수 문법

var 변수명 = 넣을값;- 문자, 숫자 말고도 거의 모든걸 다 집어넣을 수 있다.
document.getElementById() 이것도 변수에 넣어쓰기 가능
-영어로 작명시엔 함수 작명하듯 camelCase로 하면 된다.

7-2. 변수 사용이유

1. 길고 복잡한 자료가 있으면 잠깐 변수에 저장해서 쓰면 편리하다.
2. 특정 값을 기록하고 싶으면 변수를 사용한다.

• 예를 들어서 위에서 버튼누른 횟수가 필요합니다.
  버튼을 1번 누르면 Dark로 글자가 바뀌어야하고
  버튼을 2번 누르면 Light로 글자가 바뀌어야하는데
  버튼누른 횟수를 어딘가에 기록해놓으면 편리하겠죠?

7-3. 변수에 +1 하는 방법

기존 값에 +1 하고 싶으면
변수명++
변수 += 1
변수 = 변수 + 1
셋 중 하나 골라쓰면 된다.

7-4. 변수의 선언,할당,범위

변수쓸 땐 선언과 할당이라는 용어가 있는데
변수만드는걸 선언
변수에 뭐 집어넣는걸 할당이라고 한다.
위의 두줄은 선언,
밑의 두줄은 할당이라고한다.

1. 이미 있는 변수를 재선언하는것도 가능하다.
2. 이미 들어있는 값을 등호로 재할당도 가능하다.

변수는 사용가능한 범위가 있는데,
삼수 안에서 변수를 만들었을 경우 함수 안에서만 사용이가능하다.

1. 반대로 함수 바깥에서 만든 변수는 함수 안에서도 사용가능하다.

7-5. var, let, const

var 대신 let, const 문법 써도 똑같이 변수생성이 가능하지만 차이점이있다.

let, const
값을 수정하면 큰일나는 변수들을 만들고싶을때 유용합니다.
나중에 값을 변경하는 실수를 방지하고 싶을 때 쓰면된다.