[포스코x코딩온] 웹개발자 입문 과정 2주차 회고-05 | JavaScript 기초

1. JavaScript란? 

 객체 기반의 스크립트 프로그래밍 언어이다. 웹페이지에 생동감을 부여한다.

2. JavaScript 참조 방식?

  - 내장 방식과 링크 방식이 존재한다.

  - 내장 방식: 위치는 어디서나 사용이 가능하다. 

<script>
	alert("")
</script>

  - 링크 방식: 위치는 어디서나 사용이 가능하다.

<script src="./index.js"></script>

  - 장단점

	내장 방식	링크 방식
장점	- 간단함, - 특정 페이지에서만 작동할 경우 내장방식으로만 구현이 가능함	- 코드 양이 많아질때 파일로 관리하는 것이 편리함 - 재사용 가능 - 유지 보수의 용이성
단점	- 재사용 불가 - 복잡한 코드일 때 사용하지 않음

3. JavaScript 표기법

  - 띄어쓰기를 '-' 로 표기하는 dash-case방법이나,  '_'로 표현하는 snake_case 방법은

    JavaScript에서 사용되지 않음       (HTML or CSS에서 사용) 

  - 대신 띄어쓰기를 대문자로 대체하는  camelCase나 (생성자와 같은)

    특별한 경우에는 말머리에도 대문자를 사용하는 PascalCase를 JavaScript에서 사용함

 

4. JavaScript 주석

  - 윈도우 Ctrl +/ , Ctrl +k + c , Ctrl +k+ u

  - 맥 Cmd +/ , Cmd +k + c , Cmd +k+ u

 

5. JavaScript 데이터의 종류(자료형)

 01. String: 문자형 데이터

  *만약 문자와 변수를 동시에 사용하고 싶을때

   a. ','사용 - Console.log("문자",변수,"문자");

   b. '+'사용 -  Console.log("문자"+변수+"문자");

   c. 백틱(``) ${variable} 사용  - Console.log(`문자 ${변수} 문자`);

 02. Number: 숫자형 데이터

 03. Boolean: 참, 거짓 데이터

 04. Undefined: 미할당 데이터 (let 가능)

 05. Null: 의도된 빈 데이터

 06. Object: 여러 데이터 꾸러미 / 함수도 기입 가능

  * 키값 불러오는 2가지 방법

   a. console.log(object이름.key이름);

   b. console.log(object이름['key이름']);

  *함수 불러오는 방법

   console.log(object이름.함수이름());

 07. Array: 배열 데이터

 

6. JavaScript   typeof

-  데이터의 종류(자료형)을 알아보는 방법

 

7. JavaScript  형변환 

 명시적 형변환: 자동 형변환에 의존하지 않고 개발자가 직접 형변환

  a. String(); - 문자로 변환

  b. .toString(); - 문자로 변환

  c. Number(); - 숫자로 변환

  d. parseInt(); - 소수점버리고 정수형으로만 변환

 

 

8. JavaScript  변수(variable)

데이터를 저장하고 참조(사용)하는 데이터의 이름

 01. var - 재선언 o | 잘 안 쓰임, 이유는 재선언이 가능하므로 오류가 잘 일어남 

 02. let - 재선언x, 재할당 o | 자주 사용됨, 재할당이 가능해서 값을 덮어 씌울 수 있음, 선언만도 가능(undefined)

 03. const - 재선언x, 재할당 x | 선언 동시에 초기화 해야함(값을 넣어야함)

 

*기본 규칙

 a. 변수 이름으로는 문자/ 숫자/  $ / _만 사용 가능

 b. 첫글자는 숫자 불가

 c. 예약어(이미 지정된 이름) 사용 불가

 d. 읽기 쉽게 짓기

 e. 상수는 대문자로 지정 

 

 

9. JavaScript  연산자(operator)

 01. 기본 연산자

  a. % - 나머지 연산자

  b. ** - 거듭제곱 연산자

  b.  ++/-- - 증감 연산자

 02. 비교 연산자

  a. == -일치 연산자 

  b. === - type까지 비교해주는 일치 연산자, 권장됨

 03. 논리 연산자

  a. || - or연산자, 하나라도 true면 true

  b. && - and 연산자, 모든 값이 true면 true

  c.  !  - not 연산자, 반대