JavaScript Fundamentals - javascript.info (2)

***다음의 내용은 javascript.info 사이트의 내용을 공부하며 작성한 내용입니다.

 

https://ko.javascript.info/hello-world

Hello, world!

JavaScript Fundamentals 2.1 ~ 2.6

 

---

     Hello, World!     

HTML 파일 내 javascript 코드 작성 시.

<script>
	alert ('Hello, world!);
</script>

 

모던 자바스크립트에서는 자주 사용하지 않는 script 태그의 속성(attribute)

- type 속성 

     <script type="text/javascript"></script> 

- language 속성 : javascript가 디폴트임으로 더 이상 사용할 필요 없는 속성.

    <script language =...></script>

- <script> 태그 내의 주석 : 자바스크립트 엔진이 없는 브라우저(엄청 예전 버전)의 경우 자바스크립트 태그를 인식하지 못해 에러가 날 수 있어, 이 경우 javascript 코드가 주석처리 되게 작성한 부분. 현재 대부분의 브라우저가 자바스크립트 엔진을 포함하고 있으므로, 사용하지 않음.

<script><!--..주석내용..//--></script>

 

외부 스크립트 가져오기.

다음의 경로 부분에 가져올 자바스크립트 외부 파일 위치를 작성해주면 됨!

<script src="경로"></script>

여러 javascript 파일을 적용시킬 경우, 여러 개의 <script> 태그를 사용하여 가져올 수 있고,

로컬 디렉토리 위치가 아닌 url을 src의 값으로 사용할 수도 있음.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

***일반적으로 위와 같이 별도의 파일로 자바스크립트 작성해 사용함. 여러 페이지에서 동일한 자바스크립트 파일을 사용하고 있을 경우, 각 페이지 로딩 시에 따로 다운로드하지 않고, 이미 저장된 파일을 재사용하여 속도가 빨라짐.

 

*** src속성을 사용할 경우 <script> 태그 내에 작성한 내용은 무시된다.

<script src="file.js">
  alert(1); // src 속성이 사용되었으므로 이 코드는 무시됩니다.
</script>

각각 파일 불러오는 스크립트 태그와, alert 창을 위한 스크립트 태그를 따로 사용하면 둘 다 실행 가능.

---

   코드 구조   

- 일반적으로 한 줄에 하나의 구문을 사용.

- 줄 바꿈이 있는 경우 일반적으로는 세미콜론 생략 가능.

*** 생략 불가능한 경우도 있음. ex) 불완전한 표현식, 대괄호 앞 세미콜론 자동 삽입 안됨, 등등.

 

   주석   

한 줄 주석 : //

여러 줄 주석 : /*... 주석 내용... */

*** 주석 처리 단축키 사용 시 Win : Ctrl+/ (한 줄), Ctrl+Shift+/ (여러 줄 주석),

Mac : Cmd+/ (한 줄 주석), Cmd+Option+/ (여러 줄 주석)

---

   모던 모드, "use strict"   

2009년 ECMAScript5(ES5) 등장 후 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었다. 때문에 그전에 작성된 코드에 대해 호환성 문제가 없게 하기 위해서 새로 변경된 부분은 "use strict"라는 지시자 없이는 활성화되지 않게 만들어 놓았다.

 

- "use strict" 지시자는 스크립트 최상단에 오거나, 함수 본문 맨 앞에 위치해야 한다.

"use strict" 전에 올 수 있는 것은 주석뿐이며, 이후에 오는 모든 코드는 엄격 모드 하에서 실행되게 된다.

 

   브라우저 콘솔   

브라우저 콘솔에서 엄격 모드를 켜기 위해서는 다음 단계를 거치면 된다.

1) 브라우저 내 콘솔에서 'use strict'입력

2) shift+Enter키를 눌러 줄 바꿈

3) 엄격 모드에서 실행할 스크립트를 입력

'use strict'; <Shift+Enter를 눌러 줄 바꿈 함>
//  ...테스트하려는 코드 입력
<Enter를 눌러 실행>

***만약 위 방법이 안 먹힐 경우는 코드를 wrapper로 감싸서 실행.

(function() {
  'use strict';

  // ...테스트하려는 코드...
})()

 

클래스나 모듈 사용 시에, use strict가 자동 적용된다. (따로 "use strict" 붙일 필요 없음!)

 

---

   변수와 상수   

    변수 (Variable)   

: 이름이 붙은 저장소. 'let' 키워드로 변수 선언. 재지정 가능.

*** 오래된 스크립트(자바스크립트 파일)에서는 대부분 var로 변수 생성. but, 블록 스코프가 없다는 문제와 중복 선언 허용, 선언 전 사용 가능하다는 문제를 안고 있어 현시점에서는 let을 사용하는 것이 권장된다.

( 선언은 1번만, 재지정은 계속 가능! )

 

변수 명명 규칙.

1. 변수명에는 문자, 숫자, $, _ 만 사용 가능.

2. 첫 글자에 숫자 사용 불가.

** 일반적으로 한 단어 이상 조합할 경우 카멜 표기법 사용. ex) camelCase, myVeryLongName, etc.

** 대소문자 구분됨. 예약어로 변수명 생성 불가.

** 엄격 모드 "use strict"가 아닌 경우에는 'let'키워드 생략해도 변수 생성이 가능함.

(BUT, 가능하면 키워드 사용할 것! 향후 "use strict"를 사용하게 될 경우 에러를 일으킬 수 있음.)

 

   상수 (Constant)   

: 변하지 않는 변수. 'const' 키워드로 선언.

 

   대문자 상수   

기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 관습에 따라 사용. 대문자와 밑줄로 구성된 이름을 사용.

대문자 상수는 '하드 코딩한'값의 별칭을 만들 때 사용.

ex) const COLOR_RED = "#F00"; 

 

*** 생년월일과 같이 정해진 값은 대문자 상수, age와 같이 매년 즉, 실행 시에 값이 정해지는 경우 일반 상수.

 

 

변수는 가능하면 이해하기 쉽게 명명해야 하며,

가능하면 변수 재사용보다는 변수를 새로 생성하여 담는 것을 권장한다.

(자바스크립트의 경우 garbage collection을 통해 자동으로 메모리 관리가 되기 때문.)

 

---

    자료형    

 원시(Primitive) 자료형 

숫자형 : 정수 및 부동소수점 숫자. 자바스크립트에서는 무한대(Infinity, -Infinity), NaN와 같은 특수 숫자 값도 숫자형으로 분류한다.

 - NaN : 계산 중 에러 발생 시 알려주는 값. 연산 중 NaN발생 시 모든 결과에 영향을 미침.

 

BigInt : 일반 숫자형에서 다루기 힘든 큰 숫자를 다룰 때 사용하는 자료형.

 

문자형 : 문자열을 따옴표로 묶음. 큰따옴표(" "), 작은따옴표(' '), 백 틱(` `).

** 백 틱을 사용할 경우, 내부에 변수를 사용하면, '${}'를 사용해 변수나 표현식을 문자열 중간에 넣을 수 있다.

let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;

 

불린 형 : true or false

 

null 값 : null 값만 포함하는 별도의 자료형. 자바스크립트의 null을 '존재하지 않는 값', '알 수 없는 값'을 나타낼 때 사용한다. 

 

undefined 값 : undefined 값만 포함하는 별도의 자료형. '값이 할당되지 않는 상태'를 나타낼 때 사용. 변수는 선언했지만, 값을 할당하지 않았을 때 자동으로 undefined가 할당된다.

*** 직접 할당하고 싶을 경우 undefined대신 null을 사용하는 것을 권장함.

 

 참조자료형 

객체와 심볼

- 객체 Object : 데이터 컬렉션, 복잡한 개체 entity 표현 가능한 자료형.

- 심볼 Symbol : 객체의 고유 식별자(unique identifier) 만들 때 사용하는 자료형.

 

typeof 연산자 : 인수의 자료형 반환. 

1) typeof x

2) typeof(x)

위 두 가지 형태로 사용하며, 동일한 결과 반환. 결괏값으로 해당 인수의 자료형을 나타내는 문자열이 반환된다.

 

 

---

   Interaction : Alert, Prompt, Confirm   

Alert

: 사용자가 '확인'버튼을 누를 때까지 지정된 메시지를 보여주는 모달 창이 계속 떠있게 만드는 함수.

(모달 창 : 페이지 나머지 부분과 상호작용이 불가능한 창)

alert("Hello");

 

Prompt

: 두 개의 인수를 받아 함수가 실행되면 input field와 확인, 취소 버튼이 있는 모달 창을 띄워주는 함수.

default값 지정은 선택사항이다. 사용자가 입력 취소할 경우 null이 반환됨.

result = prompt(title, [default]);

사용 예)

let age = prompt('나이를 입력해주세요.', 100);

alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다.

 

Confirm

: 매개변수로 받은 질문, 확인, 취소 버튼이 있는 모달 창을 생성해주는 함수. 사용자가 확인을 누르면 true, 다른 경우 false 반환.

result = confirm(question);

사용 예)

let isBoss = confirm("당신이 주인인가요?");

alert( isBoss ); // 확인 버튼을 눌렀다면 true가 출력됩니다.

 

   Summary   

alert, prompt, confirm 모두 모달 창 생성.

alert : 단순 출력.

prompt : 질문을 보여주고 답(String)을 저장.

confirm : 질문을 보여주고 불린 값 저장.

=> 모달 창의 위치는 보통 브라우저가 결정하며, 보통 브라우저 중앙에 위치. 모달 창의 모양은 브라우저마다 다름, 수정 불가.