모던 JavaScript 튜토리얼
ko.javascript.info
위 튜토리얼에서 크게 코어 자바스트립트, 브라우저, 추가주제 이렇게 세가지 장으로 나뉜다.
코어 자바스크립트
프로그래밍 언어로서의 자바스크립트에 대해 학습한다.
호스트 환경에 종속되지 않는 코어 자바스크립트에 집중한다.
호스트 환경이란 자바스크립트가 서버 사이드 환경에서 실행되는 node.js나 구글의 앱에서 동작하는 Google Apps Script와 같이
브라우저가 아닌 다른 환경에서 자바스크립트의 문법을 이용하는 환경을 말한다.
2. 기본
2.1 Hello World
2.1.1. <script> 사용하기
html 파일 안에 <script> 태그로 자바스크립트를 삽입할 수 있다.
- Internal(Mark up)
- Html 4 에선 type 명시가 필수 하지만 이제는 type속성은 모듈로 대체한다.
- External
- src 속성(attribute)을 이용해 가져온다.
- 로컬 컴퓨터 내 경로를 사용하거나 <script src="/path/to/script.js"></script>
- URL주소를 사용할 수 있다.<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
alert('Hello World')
</script>
</body>
</html>위와 같이 태그 안에 직접 스크립트를 작성하는 방식은 매우매우 간단한 스크립트일 경우에 사용하는 것이 좋다.
별도의 파일에 스크립트를 작성하면 브라우저는 스크립트를 다운받아 캐시에 저장하기 때문에 필요할때마다 새로 다운받지 않고 불러오는 속도가 빨라진다.
만일 src을 사용해 파일경로로 스크립트를 불러오는 경우에 내부코드는가 있다면 외부파일과 내부코드 둘다 실행하지 않는다.
분리하여 사용해야한다.
실행하지 않는 코드
<script src="./main.js">
alert("hello")
</script>분리하여 실행하는 코드
<script src="./main.js"></script>
<sciprt>
alert("hello")
</script>
2.2 코드 구조 Code structure
2.2.1 문(Statement) : 문법구조(syntax structure)+명령어(commande)
2.2.2 세미클론 ;
자바스크립트는 자동적으로 세미클로삽입을 실행해 ; 없이도 줄바꿈을 인식하지만
항상 그런 것은 아니다.
alert('hello')
["it's",'me'].forEach(alert)위 코드는 ; 이 없기 때문에 아래와 같이 인식하므로 오류가 난다.
alert('hello')["it's",'me'].forEach(alert);을 붙여줘서 오류를 방지한다.
alert("Hello");
["it's","me"].forEach(alert)"Hello"와 "'it's"와"me"가 알림창으로 순서대로 뜬다.
2.2.3 주석 comment
//한줄짜리 주석
/*
여러줄 주석
*/
하지만 중첩주석은 지원하지 않는다.
2.3 "use strict"
모던 자바스크립트 최상단 혹은 함수 맨앞에 지시자 'use strict'을 사용하면
모던 자바스크립트에서 수정한 기존 자바스크립트 기능을 사용하게끔한다.
하위호환성 문제 때문에 변경사항을 활성화하지 않도록 설계해놨으나 "use strict"을 항상 최상단에 놓고 사용해 모던 자바스크립트를 사용한다.
항상 사용할 필요는 없다. 모듈 혹은 클래스를 사용한다면 자동으로 적용된다.
브라우저내의 console을 사용할 때는 기본으로 use strict가 적용되지 않는다. 따라서 'use strict'라고 입력 후 shift+Enter(윈), option+Enter(mac)을 눌러서 줄바꿈한 후 입력한다.
아님 아래와 같이 래퍼로 감싼다.
(function() {
'use strict';
// ...테스트하려는 코드...
})()클래스와 모듈을 사용해서 코드를 구성하면 "use strict"을 생략해도 된다.
2.4 변수와 상수
2.4.1 변수
변수(variable) 은 데이터를 저장할 때 사용한는 '이름이 있는 저장소'
변수 let 변수선언 (변수종류는 이전의 포스팅 https://tae-05-yu.tistory.com/23) 을 참조하자
let user='cloe',age='28',message='hi'변수 이름 명명
- 카멜 표기법을 흔하게 사용한다.
- 대소문을 구별한다.
- 특수 기호도 사용가능하다.
- 비 라틴계언어도 사용할 수는 있지만 권장하지 않는다.
예전의 문법에는 let 이라는 변수선언 없이 단순하게 값을 할당해서 변수를 생성할수 있었다.
따라서 'use strcit'가 없다면 과거의 스크립트와 호환성을 유지할 수 있기 때문에 여전히 사용할 수 있지만
엄격모드를 사용한다면 에러가 발생한다.
"use strict";
num = 5; // error: num is not defined예약어 목록의 단어들을 변수이름으로 사용할 수 없다.
let, class, return, function... 등등
2.4.2 상수
상수 (constant)은 변하지 않는 변수이므로 재할당 할 수 없다.
const currentUserName='taeyu'
currentUserName='minji' // error
2.5 자료형
2.5.1 숫자형
정수 및 부동소수점 숫자 외에 Infinity ,-Infinity, NaN와 같은 특수 값이 있으며
(2의 53승)-1 보다 큰 값 같은 경우는 숫자 끝에 n을 붙여준다.
2.5.2 문자열
변수 혹은 표현식을 문자열 중간에 넣고 싶다면 `역 따롬표를 감싼후 ${변수이름}을 넣어준다.
let fruit = 'cherry'
alert(`my favorite fruit is ${fruit}`)
2.5.3 불린형
true / false
2.5.4 'null'
존재하지 않음 / 알수 없음/ 비어있음
2.5.5 'undefined'
2.5.6 object 와 symbol
내장객체/ data collection / entity을 표현한다.
다음장에서 자세히
2.5.7 typeof연산자
'WEB > Javascript' 카테고리의 다른 글
| [JS][Node.js] express로 웹서버 만들기 - 여러가지 middle ware (0) | 2022.08.10 |
|---|---|
| [JS][Node.js] http을 이용해 서버 만들기 - 서버만들기 / 쿠키만들기 (0) | 2022.07.27 |
| [JS] webpack - npm - node 다 다른거야? 예$쓰 (0) | 2022.07.20 |
| [JS] 기본 데이터 타입 (0) | 2022.07.20 |
| [JS] 이벤트 처리 - 드래그 앤 드롭 (0) | 2022.07.07 |
