제로초 JS - 자바스크립트와 노드 프로그래밍

1-1 강좌소개

• 자바스크립트 강의

1-2 프로그래밍 사고의 중요성

• 프로그래밍의 시각화가 중요하다. 펜 필수!

1-3 순서도 그리기

• 프로그래밍 할 때 구현해야할 기능, 동작들을 순서도로 그려서 순차적으로 프로그래밍하기
• 코드의 구현도 처음부터 순차적으로 이뤄지기 때문에 순서도를 그리는게 중요하다
  

1-4 변수와 조건문

• [숫자 X 숫자 = 값]을 나타내는 프로그램 만들기
• 먼저 html로 코드를 간단하게 작성한 후 자바스크립트로 동적이게 만들어준다

<div>
  <input id="first" type="number">
  <span>X</span>
  <input id="second" type="number">
  <button id="click">실행</button>
</div>
<div>
	<span>=</span>
    <span id="result"></span>
</div>

• querySelector()는 CSS 스타일의 선택자로 돔을 선택할 수 있다. 단 첫번째 요소만 반환하기 때문에 선택자를 만족하는 모든 요소의 목록이 필요하다면 querySelectorAll()을 대신 사용해야한다.

// 태그 선택은 document.querySelector('가져오고싶은 태그')
// input태그의 값을 가져오고 싶을땐 .value를 붙여준다.
document.querySelector('#first').value
document.querySelector('#second').value

• 변수(variable)는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 이다. 자바스크립트에선 let 키워드를 사용해 변수를 생성한다.

• 변수는 자료형에 관계없이 모든 데이터일 수 있다. 자바스크립트 언어는 동적 타입의 언어로 자료형이 실행 시에 결정되며 타입없이 변수를 선언 할 수 있다.

• var은 오래된 방식의 변수로 let을 사용하는 것을 권장한다.

• const는 변하지 않는 변수를 저장할 때 사용한다. 즉 const로 선언한 변수는 '상수(constant)'이며
  상수는 재할당할 수 없기 때문에 상수를 변경하려고 하면 에러가 발생한다.
  변숫값이 절대 변경되지 않을 것이라 확신하면 값이 변경되는 것을 방지하면서
  다른 개발자들에게 이 변수는 상수라는 것을 알리기 위해 const를 사용해 변수를 선언한다.

// 위처럼 너무 긴 코드는 변수에 저장해서 간단하게 사용하기
// const 는 변하지 않는 변수를 저장할 때 쓰는 코드. 즉, const로 저장한 코드는 상수이다.
const a = document.querySelector('#first').value
const b = document.querySelector('#second').value

• 완성된 코드

<script>
  document.querySelector('#click').addEventListener('click', () => {
  	const a = document.querySelector('#first').value
  	const b = document.querySelector('#second').value
  	if(a){ //조건이 Yes일 때 실행되는 값
  		if(b){
    		const c = a * b
        	const r = document.querySelector('#result')
        	r.textContent = c
        	// input태그는 value, span태그는 textContent를 가지고 있다.
  		} else{
    		const r = document.querySelector('#result')
        	r.textContent = '두번째 값 입력'
    	}
  	} else{ //조건이 No일 때 실행되는 값
    	const r = document.querySelector('#result')
    	r.textContent = '첫번째 값 입력'
  	}
  });
</script>

1-5 순서도 그대로 코딩하기

• 코딩은 우선순위부터 실행되게되며 대체적으로 위에서 아래로, 왼쪽에서 오른쪽으로 실행된다.
• '='은 대입연산자 또는 할당연산자로 불리며 오른쪽에 있는 계산식이 먼저 실행된다.

document.querySelector('#click').addEventListener('click', () => {})

• 위 코드에서 '=>'는 동작을 뜻하는 함수다.
• addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다.
  addEventListener()는 EventTarget의 주어진 이벤트 유형에, EventListener를 구현한 함수 또는 객체를 이벤트 처리기 목록에 추가해 작동한다.

1-6 복습과 Q&A

• 코드블럭이란?
  코드블록이란 마치 한 문단처럼 보이는 코드의 한 부분을 뜻하며 중괄호로 묶여 있는 경우가 많다.
  보통 1개 이상의 명령어를 가지고 있으나 주석으로 이루어진 블록이나 아무 내용도 없는 빈 블록도 가능하다.

• 자바스크립트에서 스코프(Scope)란?
  Scope는 ‘범위’라는 뜻으로 ‘변수에 접근할 수 있는 범위’를 뜻한다.
  스코프에는 전역 스코프(Global Scope)와 지역 스코프(Local Scope)가 있다.

  1) 전역 스코프 (Global Scope)
  변수가 함수 바깥이나 중괄호{} 바깥에 선언되었다면, 전역스코프에 해당한다. 전역변수를 선언할 시, 코드 모든 곳에서 해당 변수를 사용할 수 있으며 심지어 함수에서도 사용 가능하다.
  단, 두 개 이상의 변수가 선언될시 충돌 위험이 있기 때문에 에러가 나거나 디버깅이 어려워지는 경우가 생길 수 있기 때문에 되도록이면 지역변수를 사용하는 것이 좋다.

  2) 지역 스코프 (Local Scope)
  코드의 특정 부분에서만 사용할 수 있는 변수로 지역스코프는 두가지로 나뉘게 된다.
  함수 내부에 선언되는 함수 스코프(Function Scope)와 중괄호 내부에서 선언되는 블록 스코프(Block Scope)로 함수 스코프는 선언된 함수 내에서만, 블록 스코프는 선언된 중괄호 내부에서만 접근 가능하다.

• 변수는 실제로 사용될 변수와 가까이 붙이는 것이 좋고, 중복되는 변수는 하나로 빼주는 것이 좋다.
  변수가 중복될 시 블록 기준으로 한칸 올려서 써주면 중복을 없앨 수 있다.

///위 코드에서 중복을 줄인 코드
<script>
  document.querySelector('#click').addEventListener('click', () => {
  	const a = document.querySelector('#first').value
  	const b = document.querySelector('#second').value
    //중복을 줄이기 위해 const r을 블럭 위로 빼주었다.
    const r = document.querySelector('#result')
  	if(a){ //조건이 Yes일 때 실행되는 값
  		if(b){
    		const c = a * b
        	r.textContent = c
        	// input태그는 value, span태그는 textContent를 가지고 있다.
  		} else{
        	r.textContent = '두번째 값 입력'
    	}
  	} else{ //조건이 No일 때 실행되는 값
    	r.textContent = '첫번째 값 입력'
  	}
  });
</script>

출처 :
1) https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener
2) https://ko.javascript.info/variables
3) https://medium.com/@khwsc1/%EB%B2%88%EC%97%AD-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%EC%BD%94%ED%94%84%EC%99%80-%ED%81%B4%EB%A1%9C%EC%A0%80-javascript-scope-and-closures-8d402c976d19