본문 바로가기

클라이언트/JavaScript
자바스크립트(JavaScript)란?

// JavaScript
    - 브라우저에서 동작하는 프로그래밍 언어
    - Netscape > Navigator
    - 가볍다 + 쉽다 = 기능 적음 > 어렵다.
    - C 계열 언어 > 기본 구문이 자바와 유사
    - Java <- (무관계) -> JavaScript
    - LiveScript -> JavaScript
    - 초반 > 폼태그 유효성 검사 + 링크 조작 + 이미지 조작 등 > BOM
      중반~2013() > 모든 태그 조작 > DOM
      후반(2014~) > ECMA2015(ES6) > Node.js 출시(구글 크롬 V8 엔진) 
                  > 비브라우저 환경에서 JavaScript 동작 > 서버 구축 or 그 이외 개발
                  

// JavaScript 역사
    1. Netxcape navigator > JavaScript1.0 > 1.1 > ... > 1.8
    2. Internet Explorer > JavaScript > JScript 1.0 > 2.0 > ... > 8.0
    3. ECMA > JavaScript > ECMAScript(ES) > ... > ECMAScript 2015(ES6) > ECMAScript 2020(ES11)
        - 현재 자바스크립트(ES6 기반)
    
        
// JavaScript가 하는 일
    1. 기본적인 프로그래밍 언어로서의 행동
        - 변수
        - 연산자
        - 제어문
        - 데이터 조작, 가공 등
        
    2. 브라우저에서만 할 수 있는 행동 > BOM, DOM
        - HTML/CSS 조작
        a. HTML Element 생성
        b. HTML Element 수정
        c. HTML Element 삭제
        d. HTML Attribute 생정/수정/삭제
        e. HTML PCDATA 생성/수정/삭제
        f. CSS 속성 색성/수정/삭제
        g. 폼태그 조작
        h. 이미지 조작
        i. 링크 조작
        j 기타 객체 조작
    
    3. 서버 제작, 응용 프로그램 제작
        - Node.js
        
    4. 확장 라이브러리
        - jQuery
        
    5. JavaScript Framework
        - Angular
        - React
        - Vue.js


// HTML 문서에 JavaScript를 적용하는 방법

    1. 인라인 방식(X) > 이벤트 핸들러(Event Handler) == 이벤트
        - 태그에 직접 기재
        - 대부분의 태그에 onXXX 속성 제공
        
    2. 임베디드 방식
        - <script> 태그 내에 기재
        
    3. 외부 방식
        - *.js > 독립된 파일에 기재
        ~ <script src="URL">
        

// 구문의 실행 순서
    - 위 > 아래
    - 문장 단위
    - 연산자 우선순위
    
    - ★★★HTML과 JavaScript구문이 동시에 실행된다.    


// 디버깅
    - 값 확인
    
    1. alert(값);
    2. console.log(new Date()); > 표준
    3. window.document.all > 사용 금지


// 프로퍼티 
    1. HTML 속성을 그대로 똑같이 만들어 놓은 프로퍼티
    2. JavaScript가 독자적으로 만들어 놓은 프로퍼티