흰둥이는 코드를 짤 때 짖어 (왈!왈!왈!왈!왈!왈!왈!왈!왈!왈!왈!)

(JS) 기초 지식 본문

HTML, CSS, JS

(JS) 기초 지식

흰둥아솜사탕 2023. 4. 4. 18:06
728x90
반응형

자바스크립트(JavaScript)

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>

자바스크립트의 실행 순서

  • 인터프리터 방식이므로 위에서 아래로 실행
  • Javascript 파일 및 문장을 <head> ~ '</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>를 사용할 경우
    • html문서의 시작 -> script 파일을 다운로드/삭제 -> <body>에 있는 HTML 태그를 실행 -> 끝
    • HTML 시작되고 script 파일을 동시에 다운로드/실행을 진행함
    • script 실행은 페이지 구성이 모두 끝날 때까지 지연
    • script 순서에 따라 실행

✅ CSS, JavaScript가 반영되지 않을 경우(캐쉬가 남을 경우)

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

주석문

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

익스텐션 설치

  • JavaScript (ES6) code snippets
    • 자바스크립트 문법을 편하게 사용 가능

snippets 등록하기

F1 -> snippets 사용자 코드 조각 구성 -> 새 전역 코드 조각 파일 -> 파일이름 저장 ->
{
    "Console log": {
        "prefix": "cl",
        "body": "console.log('$1')"
    }
}
728x90
반응형

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

(JS) 연산자, 제어문  (0) 2023.04.05
(JS) 변수, 상수, 데이터타입, 대화상자  (0) 2023.04.04
(CSS) 우선순위 계산  (0) 2023.04.03
(CSS) 애니메이션  (0) 2023.04.03
(CSS) 2D  (0) 2023.04.03
'HTML, CSS, JS' Related Articles more
Comments