JavaScript란?

2023. 5. 3. 13:50·HTML,CSS,JS

 JavaScript란?

  • 웹 페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어(동적)
  • 정적인 HTML과 CSS로 만들어진 웹 페이지를 동적으로 변경해줌
  • 웹페이지 조작, 클라이언트-서버 간 상호작용에 관한 모든 일 관련

그럼 script는 뭘까?

script는 자바스크립트로 작성한 프로그램을 부르는 용어

script는 웹페이지의 HTML 안에 작성가능 -> 웹 페이지를 불러올 때 자동 실행(컴파일러 X)


•  JavaScript 엔진

자바스크립트 코드를 해석하고 실행하는 인터프리터

 

동작과정

  1. 엔진이 스크립트를 읽음(파싱)
  2. 읽어드린 스크립트가 기계어로 전환(컴파일)
  3. 기계어로 전환된 코드가 실행됨 -> 기계어기 때문에 속도 빠름

뭔가 이상하다

자바스크립트는 인터프리터 언어라면서 컴파일이라는 단어가 왜 나오지..?

 

자바스크립트는 기본적으로는 컴파일이 필요없는 인터프리터 언어이지만

자주 반복되는 코드들은 최적화하기 위해 엔진이 컴파일 함

이렇게 우선 인터프리터 방식으로 실행하고 필요할 때 컴파일하는 방법을 JIT(Just-In-Time) 컴파일이라 함

-> 대부분의 브라우저에서 사용함

 

* 인터프리터 언어 vs 컴파일 언어

- 인터프리터 언어: 컴파일 X, 소스 코드를 한 줄 씩 읽어서 실행

 컴파일 하는 시간은 없으나, 실행파일을 별도로 생성하지 않아서 실행시마다 인터프리터 과정이 반복됨(속도느림)

 

- 컴파일 언어: 컴파일러란 고급 언어로 작성된 소스 코드를 저급 언어로 번역하는 프로그램(기계어로)

컴파일러를 통해 전체 소스 코드를 한 번에 기계어로 변환 후 실행파일을 생성

컴파일 단계와 실행 단계가 분리되어 있음!(-> 실행시에는 컴파일 X, 실행 파일을 실행시키면 됨)


•  JavaScript 강점

  • HTML/CSS와 완전히 통합할 수 있음
  • 웹 브라우저에서 동작하기 때문에 운영체제의 제한 받지 않음 -> 여러 환경에서 개발 가능
  • 프론트엔드에서 사용되는 유일한 언어 

•  JavaScript 역할

  • HTML 조작 -> HTML 요소를 추가, 제거하거나 페이지 직접 조작
  • CSS 조작 -> 특정 요소에 스타일 추가, 제거
  • 이벤트 처리 -> 마우스나 키보드 입력, 클릭, 스크롤 등의 이벤트에 반응하여 특정 동작 실행
  • 쿠키 처리 -> 쿠키를 설정하거나 조회
  • 동적인 효과 지원 

'HTML,CSS,JS' 카테고리의 다른 글

[JS] JavaScript 비동기 처리 방법(Promise, async, await)  (0) 2023.05.03
JavaScript 동기/비동기(동작 원리)  (0) 2023.05.03
JavaScript 기본 문법  (0) 2023.04.29
[HTML] 헷갈리는 태그들  (0) 2023.04.16
[HTML] HTML 기본 구조  (0) 2023.04.16
'HTML,CSS,JS' 카테고리의 다른 글
  • [JS] JavaScript 비동기 처리 방법(Promise, async, await)
  • JavaScript 동기/비동기(동작 원리)
  • JavaScript 기본 문법
  • [HTML] 헷갈리는 태그들
>동구리<
>동구리<
  • >동구리<
    데굴데굴 굴러가는 히동구리
    >동구리<
  • 전체
    오늘
    어제
    • 분류 전체보기
      • WEB
      • HTML,CSS,JS
      • React
      • 개발
      • Git
      • 이것저것
      • Algorithm
        • Programmers
        • Study
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    js 동작원리
    리액트 #React #생명주기 #Lifecycle #훅 #Hook
    adaptive jitc
    ouline
    이벤트 전파
    리액트 #React #아토믹디자인 #아토믹디자인패턴
    JITC
    http1
    배열 생성
    border vs outline
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
>동구리<
JavaScript란?
상단으로

티스토리툴바