본문 바로가기

Web/JavaScript

01. 자바스크립트(JavaScript)

by 사라리24 2024. 4. 12.

1. 자바스크립트 (JavaScript)

객체기반의 스크립트 프로그래밍 언어
객체 지향 프로그램(X)

자바스크립트 역사


1993년	일리노이 대학교에서 최초의 대중적인 그래픽 웹 브라우저인 NCSA 모자이크 출시 오리지널 NCSA 모자이크 개발자를 고용해 '모자이크 커뮤니케이션스'라는 이름의 회사를 설립
1995년	NCSA의 상표 소유권 문제를 회피하고자 '넷스케이프 커뮤니케이션즈'로 회사 이름 변경 네비게이터 브라우저(90% 이상의 점유율) HTML로만 개발함으로 정적인 작업만 가능했었음
1996년	- '브렌던 아이크' 영입 동적인 프로그램을 개발-> 자바를 포함시키기 위해 마이크로시트템스와 협업-> MS 마이크로소프트와 경쟁 10일만에 자바스크립트(모카)라는 언어를 탄생시킴! - 네비게이터2에 탑재(이름변경: 모카->라이브스크립트->자바스크립트) (자바와 자바스크립트는 전혀 관계없다!) - MS 마이크로소프트의 익스플로러의 jscript 등장 -> 호환성 문제 발생 -> 크로스 브라우징 이슈 발생
1997년	ECAMScript(비영리 표준화 기구 ECMA 인터네셔녈) -> 자바스크립트에서 표준화
1999년	비동기 통신(Asynchronous) 서버와 브라우저가 데이터를 교환 Ajax(Asynchronous JavaScript and XML)이 탄생
2005년	- 구글이 크롬 발표(V8 자바스크립트 엔진 탑재) - 자바스크립트 기반 구글맵에 Ajax 기술 사용
2006년	jQuery 등장으로 크로스 브라우징 이슈를 해결
2009년	- 탈 브라우징(웹 브라우저를 벗어나 os 애플리케이션 개발에도 사용) - Node.js
이후	- SPA(Single Page Application) 개발 - React, Vue, Angular

자바스크립트의 특징

객체 기반의 스트립트 언어
대소문자 구별
문장 끝에 ;(세미컬론)을 사용(생략이 가능)

자바스크립트의 출력

Web API Console을 총해 브라우저 Console 창에 출력
<script> ~ </script> 에 작성
외부 자바스크립트로 사용: <script src='파일명'></script>

자바스크립트의 실행 순서

1. 인터프리터 방식이므로 위에서 아래로 실행

avaScript 파일 및 문장을 <head> ~ </head> 사이에 넣었을 경우
- 문서 시작 -> <head>에 있는 <script>를 다운로드 또는 실행 -> <body>에 있는 HTML 태그를 실행 -> 끝에
- (HTML 실행되지 않은 상태에서 빈 화면이 보일 수 있음)
  
  
     <head>
     <script>
  
     console.log('안녕하세요 자바스크립트')
  
     </script>
  
     </head>

JavaScript 차일 및 문장을 <body> 끝에 넣었을 경우
- 문서 시작 -> <body>에 있는 HTML 태그를 실행 -> <script>를 다운로드 또는 실행 -> 끝
- (완벽하지 않은 HTML 문서가 먼저 보여, 잘못된 UI가 실행될 수 있음)
  
     <body>
  
     <script>
  
     console.log('안녕하세요 자바스크립트')
  
     </script>
  
     </body>

<script async>를 사용할 경우
- 문서 시작 -> <script>를 다운로드 또는 실행 -> <body>에 있는 HTML 태그를 실행 -> 끝
- (script파일이 여러개 있는 경우 먼저 다운로드된 script파일을 먼저 실행하게 됨, script차일이 연관성이 있는 경우 하나의 스트립트만 실행하면 문제가 발생할 수 있음)

<script defer>를 사용할 경우
- 문서 시작 -> <script>를 다운로드 또는 실행 -> <body>에 있는 HTML 태그를 실행 -> 끝
- (HTML 시작 되고 script 파일을 동시에 다운로드/실행을 진행함, script 실행은 페이지 수성이 모두 끝날 떄까지 지연, script순서에 따라 실행)

2. CSS, JavaScript의 변경된 내용이 반영되지 않을 경우(캐쉬가 남을 경경우)

- f12 - 새로고침 버튼을 누르고 있는 상태에서 '강력 새로고침'을 선택
- 컨트롤 + 쉬프트 + R

주석문

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

익스텐션 설치하기

* JavaScript (ES6) code snippets

'Web > JavaScript' 카테고리의 다른 글

06. 함수(Function) (0)	2024.04.16
05. 배열(Array) (0)	2024.04.16
04. 연산자, 제어문, 반복문 (0)	2024.04.16
03. 데이터타입, 대화상자 (0)	2024.04.16
02. 변수(let), 상수(const) (0)	2024.04.16

티스토리툴바