DAY01 - 6월 15일 수업

1. JS(JavaScript)

1) 퍼즐 조각처럼 코드 형태로 HTML 페이지에 내장된다.

- 스크립트는 어디에도 넣을 수 있다.

 

2) 컴파일 과정 없이 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 바로 실행된다.

- 개발이 발전됨에 따라 컴파일 과정이 가능해졌으며, Node.js 로 서버 환경을 구축할 수 있다.

 

3) 웹 페이지에서 자바스크립트의 역할

- 웹 페이지 3가지(HTML-정보, CSS-디자인, JS-연산) 코드가 결합되어 작성된다.

- 자바스크립트는 사용자의 입력을 처리하거나 웹 애플리케이션을 작성하는 등

- 웹 페이지의 동적 제어에 사용된다.

1️⃣사용자의 입력 및 연산

2️⃣웹 페이지 내용 및 모양의 동적 제어

3️⃣브라우저 제어

4️⃣웹 서버와의 통신

5️⃣웹 애플리케이션 작성

 

4) 자바스크립트를 작성할 수 있는 위치

1️⃣HTML 태그의 이벤트 리스너 속성에 작성한다.

- HTML 태그에는 마우스가 클릭되거나 키보드의 키가 입력되는 등 이벤트(반응)가 발생할 때 처리하는 코드를 등록하는 리스너가 있다.

 

2️⃣<script></script> 태그 안에 작성

- body 태그 밖 어디든지 들어갈 수 있다.

 

3️⃣.js 자바스크립트 파일에 작성

- 자바스크립트 코드를 확장자가 .js인 별도의 파일로 저장하고 <script src=".js 경로"></script>

 

4️⃣URL 부분에 작성

<a href="javascript:"> 태그의 href 속성 등에도 자바스크립트 코드를 작성할 수 있다.</a>

하지만 href 속성에서 자바스크립트 코드를 쓸 때에는 javascript: 라는 키워드를 작성해야 한다.

 

 

2. 객체

1) 정의: 자료를 저장하고 처리하는 데이터의 기본 단위. 추상화하여 상태와 행위를 가지는 것이 객체

2) 자바스크립트의 this란?

- 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자신을 참조하는 변수이다.

 

3. 데이터 타입과 변수

1) 자바스크립트의 식별자(이름)

- 식별자: 자바스크립트 개발자가 변수, 상수, 함수에 붙이는 이름. 식별자를 만들 때 다음 규칙을 준수해야 한다.

1️⃣첫 번째 문자: 알파벳, 언더바, $만 사용할 수 있다.

2️⃣두 번째 이상 문자: 알파벳, 언더바, 0-9, $만 사용할 수 있다.

3️⃣대소문자 구분: data와 DATA 는 다른 식별자이다.

4️⃣키워드(예약어): 식별자로 사용이 불가하다.

 

2) 변수를 사용하는 이유

- 반복되는 값을 쉽게 관리할 수 있다.

- 의미 없는 값을 하나의 정보로 만들기 위해서 사용한다.(자료구조)

x = 10

저장공간 대입연산자 값

 

3) 문장 구분

- 세미콜론으로 문장과 문장을 구분한다.

- 한 줄에 한 문장만 있는 경우 세미콜론을 생략할 수 있다.

ex) k = n + 1; p = p + 1;

 

4) 주석

- 한 줄 주석 : //

- 범위 주석 : /**/

 

5) 데이터 타입(typeof()) === 원시 타입

- 숫자 타입(number): 42, 3.14 ...

- 논리 타입(bool): true, false

- 문자열 타입(string): "안녕", "하세요"

- 객체 레퍼런스 타입(object): Object, Array, Math, Date, ...

- undefined: 타입이 정해지지 않은 것을 의미한다.

- null: 값이 정해지지 않은 것을 의미한다.

 

6) 변수

- var 키워드: 함수의 영역만 영역으로 판단한다.

- let 키워드: 모든 영역을 영역으로 판단한다.(ES6)

 

7) 상수

- const 키워드: 값을 변경시킬 수 없다.

- 상수를 사용하는 이유: 의미없는 값에 의미를 부여하기 위해서 & 오타 방지

 

8) 지역 변수와 전역 변수

- 변수의 사용 범위(scope)에 따라서 전역변수(global)와 지역변수(local)로 나뉜다.

- 전역 변수: 영역 밖에서 선언된 변수

- 지역 변수: 영역 안에서 선언된 변수