JavaScript

JavaScript란

• 스크립트 언어 : 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어
• 인터프리터 언어 : 소스코드를 한 줄 한 줄 읽어가며 명령을 바로 처리하는 언어

JavaScript가 실행되는 환경

• 각종 웹브라우저(chrome), NodeJs

JavaScript 의 소스코드 위치

1. 내부 (html코드 내ㅜ)
2. 외부 (html코드와 동일한 서버든 그 외부 서버든)

소스코드 위치가 중요한 이유

• 코드를 읽어내려가다가 javascript를 만나게 되면 해석, 구현이 완료될때까지 ㅡ라우저 렌더링이 멈추게 된다
• 자ㅏ스크리트의 sabib위치에 따라 ㅡ라우저 렌더링에 영향을 미친다

1. <h.ead></head> 사이에 -> 초기화 정도의 가ㅕ운 코드만 지어 넣는다.
2. </body>앞 -> 웨페이지 로딩이 완료된 다음 실행시키려면 앞에 넣으면 된다
3. 외ㅜ vs 내ㅜ -> 코드가 길어지면 외ㅜ에다가 코드를 작성한다

ㅕㄴ수선언

• 자료형이 고정되어있지 않음

1. primitive
2. object

var, let, const

• var은 let, const와 다르게 ㅕㅜㄴ수 재선언이 가능하다
• let : 재할당 가능
• const : 재할당 가능 x

-> 변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let 을 사용하는 것이 좋다.

hoisting

• "끌어올리기" -> ㅕㄴ수 선언이 끌어올려진다. let, var, const 를 사용하지 않을 시에 호이스팅된다
• 선언전에 사용하더라도 에러가 뜨는 것이 아니라 선언됐지만 갓이 엇다고 뜨는 undefined < 가 뜨게 된다
• var 로 선언된 변수와는 달리 let 로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다.

	console.log(foo); // undefined
	var foo;

	console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
	let bar;

ㅕㄴ수는

출력

1. html문서에 출력
   

2. html문서의 특정 ㅜㅜㄴ에 출력

3. alert창

4. console.log 이용

연산자

• ===은 갓과 타이이 같은지를 확인한다

ㅐ열

var emptyArray = [];
var numbers1 = [10, 30, 50, 70, 90];
var numbers2 = new Array(20, 40, 60, 80, 100);

익명함수

var calc1 = function(a, b) {
  return a+b;
}

callback함수

• 나중에 호출되는 함수
• 콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 동록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다.

왜 callback 함수를 사용하는가?

• 자바스크립트에서 비동기적(동시에 일어나지 않는) 프로그래밍을 할수 있기 때문이다.
• 비동기적 프로그래밍을 하기 위해서는, 비동기적으로 콜백함수를 호출하는 함수에게 비동기적으로 호출되기를 원하는 코드를 콜백함수에 담아서 전달해야 한다.
• 단순히 아무 함수에게나 콜백함수를 전달하여 호출시키는 것으로는 비동기적으로 콜백함수를 호출 할수 없다.
  다시한번 말하지만 자바스크립트에서 비동기프로그래밍을 하려면 비동기적으로 콜백함수를 호출하는 함수와 비동기적으로 호출되기를 원하는 콜백함수가 필요하다.

ㅣ동기적으로 코랙함수를 호출하는 함수의 예시

1. setTimeout : 콜백함수의 실행을 지정된 밀리초만큼 지연하는 내장함수

function fn_newCallBack(){
  console.log("비동기적으로 호출되고 싶다.");
}
console.log("-------  호출 직전 -------");
setTimeout(fn_newCallBack, 3 * 1000); // 3초 뒤 콜백 호출
console.log("-------  호출 이후 -------");

bi동기적 테그닉이 필요한 경우

• 동기 : 어떤 요청을 BO낸 뒤에 그 결과를 받아올때까지 기다리는 것
• 비동기 : 요청을 보내놓고 다른 작업을 수행하면서 흐름이 끊기지 않도록 유지하는 것

1.사용자 이벤트 처리
2.네트워크 응답 처리
-> 응답을 계속 기다린 다음에 다음 작업을 처리할 수는 없으니 비동기적으로 처리해야한다
3.파일을 읽고 쓰는 등의 파일 시스템 작업
-> 이 때도 시간이 소요되니 비동기를 쓴다는 말 같다
4.의도적으로 시간 지연을 사용하는 기능(알람 등)
-> 시간을 기다리는데 시간을 쏟고 있을 순 없으니까.. 다른 작업도 수행을 해야하니까 비동기적 처리가 필요하다

객체와 클래스

객체 리터럴을 이용한 객체 생성

let student = {
  'id': 2019101,
  'name': '홍길동',
  'scores': [95,80,91,85],
  'getTotalScore': function() {
    return this.scores.reduce((prev, curr) => prev + curr);
  }
}

console.log(student.getTotalScore());

생성자를 이용한 객체 생성

function Product(name, price) {
  this.name = name;
  this.price = price;
  this.getInfo = function() {
    return this.name + " , " + this.price;
  }
}

let p1 = new Product("애플 아이폰",1000000);
let p2 = new Product();
p2.name = "삼성 갤럭시"
p2.price = 1100000;

console.log(p1.getInfo());
console.log(p2.getInfo());

class사용

class Product {
  constructor(name, price)  {
    this.name = name;
    this.price = price;
  }

  getInfo() {
    return this.name + " , " + this.price;
  }
}

let p1 = new Product("애플 아이폰",1000000);
let p2 = new Product();
p2.name = "삼성 갤럭시"
p2.price = 1100000;

console.log(p1.getInfo());
console.log(p2.getInfo());

event 목록

• 이벤트 핸들러는 앞의 이벤트 이름의 앞에 on을 붙여 사용합니다.

DOM이란?

• HTML 코드를 해석해서 요소(TAG ----)들을 트리형태로 구조화해 표현하는 형식입니다.

DOM의 목적

• 브라우저의 목적 : HTML코드를 해석해서 그대로 브라우저에 렌더링해주는 것
  근데 왜 DOM을 생성하는걸까?
• 자바스크립트가 어떤 동작을 구현하면 DOM에 그 결과가 반영되어 웹브라우저 화면이 다시 렌더링됩니다. HTML 코드는 정적인데, 화면이 사용자와 동적인 상호작용을 하는데 DOM이 그 역할을 해주는 것
• 웹브라우저란 : 웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어
  -> 화면 렌더링을 DOM가지고 하는건가?
• 자바스크립트에서 HTML DOM 요소(특정 태그)에 접근하는 방법은 태그이름, 아이디, 클래스, 이름 등을 이용해 특정 노드 객체를 선택하는 것입니다.
• 속성 값을 변경할 수 있긴 하지만 동적으로 변경되는 것임
• 특정 요소에 접근, 삭제, 생성이 가능함

디자인 요소 변경

1. Style 속성 변경

document.getElementById('box1').setAttribute('style','background-color:yellow');

2. Style 객체 변경

document.getElementById('box1').style.backgroundColor = 'yellow';

• style 객체를 변경하는 것은 많은 디자인 속성을 변경할때는 바람직 하지 않음.

3. class 지정 (권장)

document.getElementById('box1').className = 'bgyellow';

• 별도의 디자인 클래스를 지정해 놓고 해당 요소의 class 속성을 지정하는 형태 입니다.
• 이경우 별도의 디자인 클래스가 정의 되어 있어야 함.

화면숨기기

1. display:none : 차지하는 공간까지 삭제

document.getElementById('box1').className = 'bgyellow';

2. display:hidden : 차지하는 공간은 빼고 요소를 삭제

document.getElementById('box1').style.visibility = 'hidden';

---

출처
https://dinfree.com/lecture/frontend/123_js_2.html#m1
https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90
https://www.hanumoka.net/2018/10/24/javascript-20181024-javascript-callback/