Java Script 기본

https://ko.javascript.info/intro

 

프론트 엔드 개발의 교과서 

JavaScript 기본 정석 책 

 

-

-

내용정리 시작 

-----------------------------------------------------------------------------------------------------------------------------------

 

 

1. 1정의 ) 

    Java 랑 JavaScript 랑 완전 다름 !!!

script : 자바스크립트로 작성한 프로그램. 

       웹페이지의 HTML 안에 작성할 수 있다.

       웹페이지를 불러오면 스크립트 자동 실행 

 

  - 브라우저 & 서버에서 모두 실행 가능 ! 

 

V8 – Chrome과 Opera에서 쓰입니다.
SpiderMonkey – Firefox에서 쓰입니다.
IE는 버전에 따라 'Trident’나 'Chakra’라 불리는 엔진을 사용합니다. 'ChakraCore’는 Microsoft Edge에 사용되며, 'SquirrelFish’는 Safari에 사용됩니다.

 '자바스크립트 엔진' 이 있는 모든 디바이스에서 동작! 

 - 엔진 종류 마다 특유의 코드 네임 존재 

 - 위가 그 내용 

 

<자바스크립트 엔진 동작 과정>

1. 엔진(브라우저라면 내장 엔진)이 스크립트를 읽습니다
2. (파싱).읽어 들인 스크립트를 기계어로 전환합니다
3. (컴파일).기계어로 전환된 코드가 실행됩니다. 기계어로 전환되었기 때문에 실행 속도가 빠릅니다.

* 엔진은 프로세스 각 단계마다 최적화를 진행

  : 컴파일이 끝나고 실행 중인 코드를 감시하면서, 데이터를 분석하고, 분석 결과를 토대로

  기계어로 전환된 코드를 다시 최적화 →  스크립트 실행 속도 더욱 더 빨라짐

 

<자바스크립트 강점>

HTML/CSS와 완전히 통합할 수 있음
간단한 일은 간단하게 처리할 수 있게 해줌
모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨

<자바스크립트 제약>

 - 메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않음

 - 브라우저는 보안을 위해 자바스크립트의 기능에 제약

-----------------------------------------------------------------------------------------------------------------------------------

1.4 개발자 콘솔)

 chrome )) F12 :  개발자도구 창 

             > 패널 중 console 에서 오류 확인 가능   [가장 우측 에 오류난 '파일명: line' 표시됨]

 

? 명령어를 개발자콘솔에서 여러줄로 입력 후 한꺼 번에 실행하고 싶다 

  → shift + Enter

 

-----------------------------------------------------------------------------------------------------------------------------------

 

2.1 Hello World!)

 

 <script> 태그 : html 문서 중간에 자바스크립트 프로그램 삽입하는 역할 

 

   * 외부스크립트 : 

<script src="/path/to/script.js"></script>

  * 절대경로, 상대경로, url 모두 가능 

  ! 스크립트가 길어지면 분리된 파일로 사용하는 것이 이득 ! 

스크립트를 다른 파일로 작성해 불러올 시 )
 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 
 즉, 여러 페이지에서 동일한 스크립트를 사용하는 경우 
   페이지가 바뀔 때마다 스크립트를 새로 다운받을 필요없이  캐시로부터 스크립트를 가져와 사용
→ 한번만 다운받으면 되므로, → 트래픽이 절약 & 웹  속도 향상 

 

* 주의 : 1. script 내부에 기술 하는것  / 2. 분리된 파일로 작성후 src태그로 불러오는것 

ex)

  X  : script 내부에 브라우저 함수 사용하고, src태그로 파일도 호출되었으므로 실행 안됨 ! 

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

  O  : 둘다 사용했지만, 다른 script 태그로 분리했으므로 실행 됨 ! 가능 ! 

<script src="file.js"></script>
<script>
  alert(1);
</script>

 

-----------------------------------------------------------------------------------------------------------------------------------

 

2.2 코드 구조)

1. Statement (command)  명령문)

세미콜론 자동 삽입 : 

 * 줄 바꿈 == 세미콜론(semicolon) '암시적'인식   →  error가 발생하지 않음 

  but 예외 )  ex) X : 안되는 코드    , 왜냐하면,  대괄호 [...]앞에는 세미콜론이 있다고 가정하지 않기 때문

alert("에러가 발생합니다.")

[1, 2].forEach(alert)

즉, 세미콜론을 생략할 수 있지만, 항상 쓰는 습관 !!

 

2. Comment 주석)

 한줄 :     //               →    Ctrl + /

 여러줄 : /*  ... */         →    Ctrl + Shift + /       (단, VScode 에서는 Shift + Alt + A 사용)_

 

-----------------------------------------------------------------------------------------------------------------------------------

 

2.3 엄격모드)

   자바스크립트 2009 년 대규모 업데이트 ( 기존 기능 수정) 이후, 하위호환성 문제 발생 

  즉, 변경사항 대부분은 기본모드에서 활성화되지 않도록 설계됨 

 

→ but, use strict 지시자 : 엄격모드(strict mode) 활성화 : 변경사항이 활성화 되는 기능 

 사용)   script 최 상단에 위치 or 함수 본문 맨 앞 (해당 함수만 엄격모드로 실행 )

"use strict";

// 이 코드는 모던한 방식으로 실행됩니다.
...

  * 취소는 안됨 

  * 브라우저 콘솔에선 use strict가 기본적으로 적용되어 있지 않음 

 

 코드를 클래스와 모듈을 사용해 구성한다면 "use strict"를 생략해도 됨 ! (자동실행 되서)

 

-----------------------------------------------------------------------------------------------------------------------------------

 

2.4 변수)

  * 하나의 키워드(ex)let, const)에 변수 여러개 선언 가능 ! 

let         : 변수 

var        : 변수(비추)

const     : 상수

 * 변하지 않는 변수 선언 시 사용 / 재할당 불가 (재선언 말고 재할당도 안됨 )

 

* 변수 한번만 선언! 

  같은 변수 여러번 선언하면 error! 

 

 변수 명명 규칙)

 * 기호 $   _   사용될 수 있음 

카멜 표기법(camelCase) : 첫단어를 제외한 각단어의 첫 글자는 대문자로 작성 ex) myVeryLongName

변수를 많이 추가해도,
모던 자바스크립트 압축기(minifier)와 브라우저는 코드 최적화를 잘함.
즉, 변수를 추가한다고 해서 성능 이슈 X

-----------------------------------------------------------------------------------------------------------------------------------

 

2.5 자료형)

 - 8가지 기본 자료형

 - 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있음 ! 

    → 동적 타입(dynamically typed)’ 언어

  ex) O : 가능 

// no error
let message = "hello";
message = 123456;

숫자형) 

  - 정수, 부동소수점 숫자 따로 구분하지 않음

  - 위 종류 외에,

     특수숫자값(Special Numeric Value)  :   Infinity, - Infinity, NaN 존재 

    Infinity : 직접 사용, 1/0 등 0 으로 나누면 가능 

    Nan : error 발생을 나타나는 값 , (부정확, 정의되지 않은 수학 연산 )

BigInt)

  (2^(53)-1)(9007199254740991) 초과, 

   -(2^(53)-1) 미만 의 값은 '숫자형'으로 나타낼 수 없음 → BigInt 사용 [ex) 암호관련 작업]

   사용)      정수 끝에 'n' 붙임 

// 끝에 'n'이 붙으면 BigInt형 자료입니다.
const bigInt = 1234567890123456789012345678901234567890n;

문자형)

1. 큰따옴표: "Hello"
2. 작은따옴표: 'Hello'
3. 역 따옴표(백틱, backtick): `Hello`

 * 자바스크립트에선, 작은따옴표, 큰 따옴표를 구분하지 않는다 !!

 백틱 사용)  백틱 안에,  ${...} 로 감싸 넣어주면, 문자열 중간에 변수 사용 가능 

     * 주의, 작은 따옴표나 큰 따옴표 안에는 ${} 사용해도 오류남 !

// 변수를 문자열 중간에 삽입
alert( `Hello, ${name}!` ); // Hello, John!

// 표현식을 문자열 중간에 삽입
alert( `the result is ${1 + 2}` ); // the result is 3

 

boolean 형)

 true or false  

ex) 이렇게 사용할 경우, isGreater에 true 저장됨

let isGreater = 4 > 1;

null 값)

 : 존재하지않는, 비어있는(empty), 알수없는(unknown) 값 나타냄 

  * 다른 언어와 다름 ! ( 다른 언어에선 널포인터, 존재하지 않는 객체에 대한 참조)로 사용 

 

undefined 값)

 : 값이 할당되지 않은 상태

    변수는 선언 O, but 값 할당 X 일 때,

 

객체 Object)

  객체형 이외 다른 자료형 : 원시(primitive) 자료형  :문자열 or 숫자 한 가지만 표현 가능

  반면 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있음

심볼 symbol)

객체의 고유한 식별자(unique identifier)를 만들 때 사용

 

 

* typeof 연산자)

인수의 자료형을 반환

 사용)

연산자: typeof x
함수: typeof(x)

* 라이브러리 함수 ,  -> object 로 출력됨

  null -> object로 출력됨 (근데 이건 하위호환 관련한 오류, 실제론 object 아님)

  함수 -> function 반환 (근데 사실 객체에 속함, 마찬가지 하위호환 관련 오류)

 

 

-----------------------------------------------------------------------------------------------------------------------------------

 

2.6 alert, prompt,confirm 상호작용)

 : 브라우저 환경 에서 사용되는 최소한의 사용자 인터페이스 기능 

 

1. alert ) 

 : 메시지를 보여주는 작은 창(모달 창 modal window) 띄움

    * 모달 창(modal window) : 페이지의 나머지 부분과 상호작용이 불가함.(모달 바깥쪽 클릭 불가)

alert("Hi");

2. prompt )

 :  입력필드(input field), 텍스트 메시지 와 확인, 취소 버튼이 있는 모달창 띄움

  + 입력필드로 입력받은 문자열 return 받음

   취소(cancle)할 경우, null 반환 

result = prompt(텍스트메시지,[default]);

 *  default : 입력필드의 초기값 (= undefined)

 

3. confirm ) 

 :  함수인자 매개변수로 받은 문자열과 , 확인, 취소버튼이 있는 모달창 띄움

  확인 : true 리턴

  취소&다른경우 : false 리턴

result = confirm(텍스트메시지);

 

* 주의 : 모달창이 띄워져 있는 동안은 스크립트의 실행 일시 중단 !