Javascript

[0]자바스크립트 기본구조

HyeonGyu IM 2020. 7. 8. 22:48

1. 왜등장? 넷스케이프가 이크마인터네셔널에 찾아가서 자바스크립트로 표준안을 만들었다

  • 정적인 웹사이트에서 동적인 페이지를 만들기 위해 개발되었다
  1. 브랜든 에치가 넷스케이프와 같이 스크립트 언어인 자바 스크립트를 만들게됨
  2. 이름의 유래는 JAVA 가 뜨고 있었는데 이름의 유명세를 이용하기 위해 JAVA를 붙이고 스크립트를 붙여 자바스크립트가 탄생
  3. 스크립트 태그를 쓸때는 defer를 쓰는게 좋다 ( 먼저 HTML문서를 읽고 해석한다음 다운받은 자바스크립트 문서를 활용하기때문)
  4. 순수 바닐라 스크립트를 쓸때는 'use script'를 써주는게 좋다 (정의된 태그만을 사용할수있게 해주기때문)

2. 자바의 기본구조

  1. 모든언어와 동일하게 4개의 구조를 가지고있습니다

    1. 선언

    2. 조건문

    3. 반복문

    4. 함수


      2. 식별자(변수) 선언  - 모든 언어와 동일 합니다.

    1) 주석    - 프로그래밍 코드를 설명 한다. 코드에 아무런 영향을 미치지 않느다.

    2) 표현식    - 실행 가능한 코드 한줄을 의미한다. 

    3) 키워드    - 미리 예약되어있는 프로그래밍 예약어 이다.  

    4) 식별자(변수)    - 프로그램 내부에서 특정 값을 식별을 하기위해 사용된다    - 식별자는 var 자료형을 통하여 모든 자료형을 다룹니다.   

    4) 자료형    - 데이터의 형태를 의미합니다.    - 10은 숫자형 자료형 입니다.    - "test" 는 문자열 자료형 입니다.    - javascript는 다른 언어와 다른게 함수 또 한 자료 형으로 사용합니다.      (C언어의 함수 포인터와 유사합니다)

     

3. 브라우저의 javascript 동작 순서

1) 동기 방식 이벤트 처리 동작

(1) JS(javascript)엔진이 javascript 코드 순차 적으로 실행

(2) code 실행 중 함수 발결 시 call stack에 넣기

(3) call stack에 넣은 함수를 실행

(4) call stack에서 실행된 함수를 call stack에 제거

2) 비동기 방식 이벤트 처리 동작

(1) JS(javascript)엔진이 javascript 코드 순차 적으로 실행

(2) code 실행 중 비동기 이벤트 발견시 이벤트 함수를 call stack에 넣기

(3) 비동기 이벤트 함수의 Event handler를 Event Queue 에 넣기

(이벤트 함수를 넣는 것이 아니다, 실제 이벤트 발생시 수행된는 함수를 넣는것)

(4) call stack이 비어 있을 경우 Event Queue에서 Event handler 하나를 꺼내서

call stack에 넣기

(5) call stack에 넣은 함수를 실행

(6) call stack에서 실행된 함수를 call stack에서 제거

  • 비동기 이벤트란?
  • JS엔진에 정의되어 있지 않는 함수들을 가리키며 이 함수들은 모두 비동기 방식 이벤트로 실행된다.