JavaScript- 기본편

2023. 4. 4. 15:00

728x90

SMALL

자바스크립트(JavaScript)

1995년
넷스케이프 커뮤니테이션즈: 네비게이터 브라우저가 90% 이상의 점유율

1996년
    - 브렌던 아이크 동적인 프로그램을 개발하기 위해 언어(모카, 10일)를 개발
    - 네비게이터2에 탑재(모카 -> 라이브스크립트 -> 자바스크립트)
    - MS의 익스플로러의 jscript 호환성 문제로 크로스 브라우징 이슈가 발생

1997년
    - 자바스크립트는 ECMAScript(비영리 표준화 기구 ECMA 인터내셔널)로 명명됨

1999년
    - jscript를 이용하여 비동기적(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 창에 출력
1. <script> ~ </script>
2. 외부 자바스크립트로 사용 <script src="파일명"><\/script>

자바스크립트의 실행 순서

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

* JavaScript 파일 및 문장을 head태그 사이에 넣었을 경우

html문서의 시작 -> <head>에 있는 <script>를 다운로드/실행 -> <body>에 있는 HTML 태그를 실행 -> 끝
- 외부 script 파일을 사용할 경우 script 파일 다운로드가 늦을 때 HTML이 실행되지 않은 상태에선 빈 화면이 보일수 있다.

* JavaScript 파일 및 문장을 Body 끝에 넣을 경우

HTML문서의 시작 -> <body>에 있는 HTML 태그를 실행 -> <script>를 다운로드/실행 -> 끝
- 완벽하지 않은 HTML이 먼저 보여 잘못된 UI가 노출될수 있음

* <script async>를 사용할 경우

html문서의 시작 -> script 파일을 동시에 다운로드/실행 -> <body>에 있는 HTML 태그를 실행 -> 끝
- script 파일이 여러개 있을경우 먼저 다운로드 된 script 파일을 먼저 실행하게 됨
- script 파일이 서로 연관성이 있는 경우 하나의 스크립트만 실행후 문제가 발생할 수 있음

* <script defer>를 사용하는 경우 (body의 맨끝에 넣는 경우가 가장 완벽하다)

html문서의 시작 -> script 파일을 다운로드/실행 -> <body>에 있는 HTML 태그를 실행 -> 끝
    - HTML이 먼저 시작되고 script 파일을 동시에 다운로드/실행을 진행함
    - script 실행은 페이지 구성이 모두 끝날 때 까지 지연
    - script 순서에 따라 실행

✔ CSS, JavaScript가 반영되지 않을경우(캐시가 남아있을경우)

- F12키를 누르고 새로고침 버튼을 꾹 누르고 있는상태에서 강력 새로고침 선택
- Ctrl + shift + R

주석문

//: 한줄주석문
/* ... */: 여러줄 주석

도움이 되는 익스텐션 (자바스크립트 입력보조)

JavaScript (ES6) code snippets

728x90

LIST

'JavaScript' 카테고리의 다른 글

JavaScript- while, do while문 (0)	2023.04.05
JavaScript- switch문 (0)	2023.04.05
JavaScript- if문 (0)	2023.04.05
JavaScript- 연산자 (0)	2023.04.05
JavaScript- 변수, 자료형(type) (0)	2023.04.04

eadgnus