1995년
- 넷스케이프커뮤니테이션즈: 네비게이터 브라우저가 90% 이상의 점유율
1996년
- 브렌던 아이크: 동적인 프로그램을 개발하기 위해 언어(모카, 10일만에 개발) 개발
- 네비게이터2에 탑재(모카 → 라이브스크립트 → 자바스크립트 이름 변경)
- MS의 익스플로러의 jscript 호환성 문제로 크로스 브라우징 이슈가 발생
1997년
- 자바스크립트는 ECMAScript(비영리 표준화 기구 ECMA 인터내셔널)로 명명됨
1999년
- 비동기적(Asynchronous) 서버와 브라우저가 데이터를 교활할 수 있는 통신 기능 Ajax(Asynchronous Javascript and XML)이 탄생
2005년
- 구글이 발표한 구글맵에 Ajax 기술을 사용
- 크롬 발표함(V8 자바스크립트 엔진)
2006년
- jQuery 등장으로 크로스 브라우징 이슈도 해결
2009년
- Node.js의 등장
- 탈브라우징(웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에도 사용)
SPA(Single Page Application) 개발
- React, Vue, Angular
TypeScript
- JavaScript에 Type을 추가한 스크립트
자바스크립트의 특징
- 객체 기반의 스크립트 언어
- 대소문자를 구별
- 문장 끝에 세미콜론 사용(생략 가능)
자바스크립트의 출력
- Web API Console을 통해 브라우저 Console 창에 출력
- <script> ~ </script>
- 외부 자바스크립트로 사용 <script src="파일명"></script>
자바스크립트의 실행 순서
- 인터프리터 방식이므로 위에서 아래로 실행
1. JavaScript 파일 및 문장을 <head> ~ </head> 사이에 있을 경우
- html 문서의 시작 → <head>에 있는 <script>를 다운로드/실행 → <body>에 있는 HTML 태그를 실행 → 끝
ㄴ 외부 script 파일을 사용할 경우 script 파일 다운로드가 늦을 때 HTML 실행되지 않은 상태에서 빈 화면이 보일 수 있음
2. JavaScript 파일 및 문장을 <body> 끝에 넣을 경우
- html 문서의 시작 → <body>에 있는 HTML 태그를 실행 → <script>를 다운로드/실행 → 끝
ㄴ 완벽하지 않은 HTML이 먼저 보여 잘못된 UI가 보일 수 있음
3. <script async>를 사용할 경우
- html 문서의 시작 → script 파일을 동시에 다운로드/실행 → <body>에 있는 HTML 태그를 실행 → 끝
ㄴ script 파일이 여러개 있을 경우 먼저 다운로드된 script 파일을 먼저 실행하게 됨
ㄴ script 파일이 서로 연관성이 있는 경우 하나의 스크립트만 실행 후 문제가 발생할 수 있음
4. <script defer>를 사용할 경우
- html 문서의 시작 → script 파일을 동시에 다운로드/실행 → <body>에 있는 HTML 태그를 실행 → 끝
ㄴ HTML이 시작되고 script 파일을 동시에 다운로드/실행을 진행함
ㄴ script 실행은 페이지 구성이 모두 끝날 때까지 지연
ㄴ script 순서에 따라 실행
✔ CSS, JavaScript가 반영되지 않을 경우 (캐쉬가 남을 경우)
- F12키를 누르고 새로고침 버튼을 누르고 있는 상태에서 "강력새로고침"을 선택
- Ctrl + Shift + R
728x90
반응형
'KDT > JavaScript' 카테고리의 다른 글
| 조건문 (0) | 2023.04.05 |
|---|---|
| 연산자(Operator) (0) | 2023.04.05 |
| 대화 상자 (0) | 2023.04.05 |
| 데이터 타입 & 타입 변환 (0) | 2023.04.05 |
| 변수 & 상수 (1) | 2023.04.05 |
