<21.03.24>
[소개 파트]
자바스크립트 : 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어
- 쉽게 말해 동적 언어
-
스크립트 언어 (컴파일 필요 없음)
- 브라우저 뿐 아니라 서버에서도 실행 가능
-
자바스크립트 가상 머신 (엔진)
엔진의 종류
1) V8 Chrome과 opera
2) SpiderMonkey : FireFox
3) Trident, Chakra : Ie - 안전한 프로그래밍 언어 메모리 접근 허용x, 필요x
- 실행환경에 영향을 많이 받음
- ex) Node.js 환경 : 임의파일 읽거나 쓰고, 네트워크 요청 가능
- 브라우저 환경 : 웹페이지 조작. 클라이언트와 서버의 상호작용
- ※ 브라우저 환경에서의 제약사항
1) 임의의 파일을 읽거나 쓰는 것에 제약이 있음.
2) 탭과 창은 서로의 정보를 알 수 없음.
- 모바일 앱을 만드는 것이 가능함.
- 자바스크립트로 transipile 될 수 있는 언어들.
다른 언어로 작성했으나 자바스크립트로 변환가능
1) CoffeScript: 짧은 문법을 도입하여 쉬운 코드 작성 가능
2) TypeScript : 자료형의 명시화, 개발을 단순화, 복잡한 시스템 지원
3) Flow : 자료형을 강제, Facebook에서 개발
4) Dart : 모바일 앱과 같이 브라우저가아닌 환경에서 동작하는 고유의 엔진
[기본파트]
1. <script> 태그
1) type = “text/javascript” : 예전에는 필수 명시 속성이였으나 요즘은 아님
2) language 속성도 더는 필요 없는 속성
스크립트가 간단할 때는 태그 안에다 코딩하고
보통은 스크립트를 분리된 파일로 저장하는 것이 좋다.
2. 코드 구조
문, 세미콜론, 주석의 의미에 대해서
3. strict 모드
“user strict”를 스크립트/함수 최상단에 사용하면 “모던한” 방식으로 동작한다.
- 모던 자바스크립트는 ‘클래스’와 ‘모듈’이라는 진일보한 구조를 제공한다.
4. 변수
- let 을 붙여서 선언한다. 거의 그렇게 안했는데?
- var을 붙여도 거의 동일하게 동작한다. var는 오래된 방식이라고 한다.
-
- 특징은 자료형이 없다는 것!
- 자료형이 없는듯 하지만 사실 동적으로 변환되기 때문에 그렇게 느껴지는 것임.
- BigInt 자료형은 숫자 끝에 n을 붙인다.
- 변수는 한번만 선언해야 한다.
- 카멜표기법 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성함.
- 변화하지 않는 상수를 선언할 땐 const를 사용한다. 재할당시 에러발생
- const는 기억하기 힘든 값을 명명할 때 사용한다.
- 명명을 잘하는 사람일 수록 노련한 개발자이다! (처음부터 독립적인 코드를 작성하기 보다 기존 코드의 틀을 변경하고 확장하는데 대부분의 시간을 보냄)
5. alert, prompt, confirm을 이용한 상호작용
- alert 는 익히 알고 있음
- prompt예시 result = prompt(title, [default]); 입력필드, 확인, 취소 버튼 창 띄움 title : 보여줄 문자열 default : 기본 입력 (선택값) result 에 입력값을 그대로 반환해준다.
- confirm 창 alert 창과 비슷한데 결과를 true, false로 반환해준다.
6. 형변환
- 문자형 변환 : String(변수명)
- 숫자형 변환
1) 나누기를 적용하면 무조건 숫자형
2) Number() 를 사용하여 숫자형으로 바꿈
3) 글자 들어가있는 문자열의 경우는 NaN으로 변환됨 -
- 불린형 변환
- 숫자 0, 문자열 null 값은 false로 변환됨 그 외에는 true
7. 연산자
- 대부분의 연산자는 알고 있음
- 단항 연산자 + 를 사용하면 숫자형으로 변환 가능
- 할당연산자(=)의 체이닝 a=b=c=2+2; a,b,c에 4를 입력한다.
- 쉼표연산자 마지막 표현식의 결과만 출력해준다.
ex)
let a = (1+2, 3+4) // 7로 출력 (거의 쓸일 없음)8. 데이터 비교
- 다른 형을 가진 값 간에 비교 자료형이 다르면 무조건 숫자형으로 바꿈
0 == false혹은"" == false는 모두 true를 반환한다.- 일치연산자(===)을 사용하면 자료형이 같아야 한다.
9. if 문
- 조건부 연산자 ? condition ? value1 : value2; 조건이 true 면 value1을, false면 value2를 출력해준다. 가독성이 떨어지므로 거의 사용 x
10. 논리연산자
- not ! 연산자 의 경우 !!두번쓰면 자료형을 boolean으로 바꿔준다.
11. null 병합 연산자
- a ?? b 의 경우 a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b 사용법 height = height ?? 100; height에 값이 정의 되었으면 기존 값 정의 안되었으면 100 입력
- 연산자 우선순위가 낮기 때문에 괄호로 묶어서 사용한다.
- 안정성 이슈 때문에 && || 과 같이 사용할 수 없다.
12. 반복문
- for 문의 경우 begin, step에 해당하는 값을 생략할 수 있다.
let i = 0; // i를 선언하고 값도 할당하였습니다. for (; i < 3;) { // 'begin'이 필요하지 않기 때문에 생략하였습니다. alert( i++ ); // 0, 1, 2 } - for(;;) 이렇게 사용하면 무한루프가 동작
- break; 는 언제든 빠져나올 수 있는 장치
- contiue는 다음 반복으로 넘어감
- ? 오른 쪽에 break, continue는 사용할 수 없음