[16주차]웹프로그래밍 - Client

웹프로그래밍 - Client : JavaScript

---

1. JavaScript

• cilent가 보는 동적인 웹 페이지를 만들기 위해 사용하는 프로그래밍 언어
• 동적 컨텐츠 업데이트, 서버 애플리케이션 개발

1) JavaScript 엔진

• JavaScript를 실행하는 프로그래밍
• ex) Chrome, Node.js

2) JavaScript 라이브러리

• 라이브러리 : 원하는 틀이 없음
• 데이터시각화, DOM 조작, 양식. 수학 및 텍스트 함수 등

3) JavaScript 프레임워크

• 프레임워크 : 원하는 고유의 틀이 존대
• 반응형 웹개발, 서버 측 애플리케이션 개발

4) data type

• 숫자 - number, 문자열 - string, 논리 - boolean, 값없음 - undefined, 함수 - function, 객체 - object

• f2 -> 변수값, f2() -> 함수호출
• 메모리 확인 https://pythontutor.com/

5) 호이스팅

• 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미
• 우선순위 : 함수 실행영역 생성, 매개변수 & arguments 변수 생성 및 초기화, 선언적함수(초기화0) -> var(초기화X)

6) 클로저 현상

• 함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 스코프에 접근할 수 있게 하는 기술
• 계속해서 남아있는 현상
• 사용하는 목적 : global에만 있으면 값 중복, 별도의 실행 영역을 유지하여 분리되게 사용
• 즉시 실행 함수...

7) 스코프와 스코프 체인

• 상위 스코프 접근 가능

2. 자바스크립트 객체

1) 객체

• 키-값 쌍의 집합 : {}
• 내장 객체, 사용자 정의 객체로 구분 가능
• 내장 객체 -> obejct

2) 배열

3) JSON

• 자바스크립트가 객체를 표기하는 표기법을 의미
• 현재는 네트워크상 데이터를 교환하는 경량 데이터 전송 표준의 의미
  javascript 객체 <---json---> python 객체

4) 속성, 메서드 this

• 자바스크립드 내부 키워드
• 여러가지 용도로 사용
• 이벤트에서 발생한 객체
• test.apply( ,[x,y]), test.call( ,x,y) => 명확하게 this 지정하는 방법

5) 생성자 함수

• 여러개의 객체를 만들 수 있음
• 코드 중복 감소
• 인스턴스의 타입 판별 가능
• prototype : 모든 인스턴스에서 사용 가능
  

3. 내장객체

https://www.w3schools.com/js/default.asp

4. Vue.js

• 자바스크립트 라이브러리