넷스케이프(Netscape)사에서 1995년 개발, 1996년 ECMA에 표준제출

• ECMA(European Computer Manufacturers Association)에서 1997년 표준 제정
• 현재 자바스크립트의 최신 표준은 2015년에 발표된 ECMAScript 6 (es6)

자바스크립트로는 웹의 동작을 구현

• HTML : 웹의 내용, CSS : 웹의 디자인

자바스크립트는 주로 웹 브라우저에서 사용 (프론트엔드)

• 웹 브라우저에는 자바스크립트 인터프리터가 내장
• Nodejs를 통해 서버 측 프로그래밍도 가능(백엔드)

자바스크립트는 동적언어, 인터프리터 언어

• 변수의 타입을 런타임시 결정, 런타임시에 객체의 속성을 추가 가능
• var x = 10; var str = “Javascript";
• 정적언어
  • 컴파일 시에 변수의 타입이 결정(java, c 등)
  • 런타임시에 객체속성 추가 불가능

프로토타입 중심

• 프로토타입은 자바스크립트의 모든 객체의 부모객체로서 함수기반의 프로토타입 속성을 가지고 있고, 프로토타입속성을 객체와 유사하게 사용가능

• 브라우저의 콘솔을 통해 데이터를 출력
• “개발자 도구”를 통해 확인
• java의 system print와 유사한 용도로 사용

• html문서에 데이터를 출력하는데 사용
• 기존 문서를 덮어쓰기 하므로 디버그목적으로는 사용 부적절

• HTML DOM 요소(Element)는 트리 구조로 표현된 HTML 문서의 구성 요소
• 프로그래밍 언어가 DOM 구조(html 문서 구조)에 접근할 수 있는 객체를 제공
• document 객체는 JavaScript에서 웹 페이지를 조작하기 위해 사용하는 중요한 객체
• 이 객체는 웹 페이지 자체를 나타내며, 웹 페이지의 모든 DOM 요소에 접근하고 조작하는 데 사용

• ex)var str = document.getElementById("text"); str.innerHTML = "이 문장으로 바뀌었습니다!”;

• getElementByID(), getElementsByTagName(), getElementsByClassName 등

• innerHTML을 통한 DOM요소 변경
• innerHTML은 DOM 객체의 속성 중 하나로, 해당 요소의 내부 HTML 콘텐츠를 나타내는 문자열을 반환하거나 설정하는 데 사용

• 해당 태그 이름의 요소를 모두 선택

• 해당 아이디의 요소를 선택
• id는 유일한 요소여야 함

• 해당 클래스에 속한 요소를 모두 선택

• 해당 name 속성값을 가지는 요소를 모두 선택

• body 태그 안에 적용
• head 태그 안에 적용

• 외부에 작성된 자바스크립트 파일은 .js 확장자를 사용
• 외부 js파일을 html안으로 불러온다.
• 장점
  • html과 js의 분리시 가독성이 높아지고, 타html문서에서 재활용이 가능해 유지보수성향상
  • 웹브라우저가 js를 캐싱처리하여 웹 페이지의 로딩 속도 또한 빨라짐
    • html도 캐싱이 가능하지만, html문서내의 변경시 다시 다운로드

• 자바스크립트는 타입유연한 언어
  • 별도 타입없이 변수의 선언과 동시에 초기화
    • var num = 25;
  • 같은 변수에 타입이 다른 타입 값을 다시 대입하는것도 가능
  • num = [10, 20, 30];
• 자바스크립트에서는 var, let, const 세 가지 키워드를 사용하여 변수를 선언
  • var : 재선언과 재할당이 가능
    • es6에서는 var사용 지양 권장
  • let : 재할당은 가능하지만, 같은 스코프 내에서 재선언은 불가능
  • const: 재할당도 불가능

• 숫자(number)
  • var firstNum = 10; // 소수점을 사용하지 않은 표현
  • var secondNum = 10.00; // 소수점을 사용한 표현
• 문자열(string)
  • var myName = "홍길동";
  • 큰따옴표("") OR 작은따옴표('')
  • 숫자와 문자열을 더할 경우 숫자를 문자열로 자동 변환
• 불리언(boolean)
• 모두 같은 var(또는 let)에 firstNum, myName이라 할지라도 typeof를 통해 타입을 출력하면 각각 숫자, 문자열 등으로 출력
• undefined