• Javascript 개요
    • 넷스케이프(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 등)
        • 런타임시에 객체속성 추가 불가능
    • 프로토타입 중심

      • 프로토타입은 자바스크립트의 모든 객체의 부모객체로서 함수기반의 프로토타입 속성을 가지고 있고, 프로토타입속성을 객체와 유사하게 사용가능
      자바 자바스크립트
      컴파일 언어 인터프리터 언어
      타입 검사를 엄격하게 함. 타입을 명시하지 않음.
      클래스(class) 기반의 객체 지향 언어 프로토타입(prototype) 기반의 객체 지향 언어
  • Javascript출력
    • console.log() 메소드
      • 브라우저의 콘솔을 통해 데이터를 출력
      • “개발자 도구”를 통해 확인
      • java의 system print와 유사한 용도로 사용
    • document.write() 메소드
      • html문서에 데이터를 출력하는데 사용
      • 기존 문서를 덮어쓰기 하므로 디버그목적으로는 사용 부적절
    • alert() 메소드
  • Javascript DOM 활용
    • DOM은 Document Object Model의 약자
      • HTML DOM 요소(Element)는 트리 구조로 표현된 HTML 문서의 구성 요소
      • 프로그래밍 언어가 DOM 구조(html 문서 구조)에 접근할 수 있는 객체를 제공
      • document 객체는 JavaScript에서 웹 페이지를 조작하기 위해 사용하는 중요한 객체
      • 이 객체는 웹 페이지 자체를 나타내며, 웹 페이지의 모든 DOM 요소에 접근하고 조작하는 데 사용
    • HTML DOM 요소를 이용한 innerHTML 프로퍼티
      • ex)var str = document.getElementById("text"); str.innerHTML = "이 문장으로 바뀌었습니다!”;
    • 자바스크립트에서 특정 HTML 요소를 선택하는 방법
      • getElementByID(), getElementsByTagName(), getElementsByClassName 등
    • 요소를 변경하는 방법
      • innerHTML을 통한 DOM요소 변경
      • innerHTML은 DOM 객체의 속성 중 하나로, 해당 요소의 내부 HTML 콘텐츠를 나타내는 문자열을 반환하거나 설정하는 데 사용
    • document.getElementsByTagName(태그이름)
      • 해당 태그 이름의 요소를 모두 선택
    • document.getElementById(아이디)
      • 해당 아이디의 요소를 선택
      • id는 유일한 요소여야 함
    • document.getElementsByClassName(클래스이름)
      • 해당 클래스에 속한 요소를 모두 선택
    • document.getElementsByName(name속성값)
      • 해당 name 속성값을 가지는 요소를 모두 선택
  • Javascript 적용방법
    • 내부 자바스크립트 코드로 적용
      • body 태그 안에 적용
      • head 태그 안에 적용
    • 외부 자바스크립트 파일로 적용
      • 외부에 작성된 자바스크립트 파일은 .js 확장자를 사용
      • 외부 js파일을 html안으로 불러온다.
      • 장점
        • html과 js의 분리시 가독성이 높아지고, 타html문서에서 재활용이 가능해 유지보수성향상
        • 웹브라우저가 js를 캐싱처리하여 웹 페이지의 로딩 속도 또한 빨라짐
          • html도 캐싱이 가능하지만, html문서내의 변경시 다시 다운로드
  • javascript 변수와 타입
    • 변수
      • 자바스크립트는 타입유연한 언어
        • 별도 타입없이 변수의 선언과 동시에 초기화
          • var num = 25;
        • 같은 변수에 타입이 다른 타입 값을 다시 대입하는것도 가능
        • num = [10, 20, 30];
      • 자바스크립트에서는 var, let, const 세 가지 키워드를 사용하여 변수를 선언
        • var : 재선언과 재할당이 가능
          • es6에서는 var사용 지양 권장
        • let : 재할당은 가능하지만, 같은 스코프 내에서 재선언은 불가능
        • const: 재할당도 불가능
    • 기본타입-원시타입(primitive type)
      • 숫자(number)
        • var firstNum = 10; // 소수점을 사용하지 않은 표현
        • var secondNum = 10.00; // 소수점을 사용한 표현
      • 문자열(string)
        • var myName = "홍길동";
        • 큰따옴표("") OR 작은따옴표('')
        • 숫자와 문자열을 더할 경우 숫자를 문자열로 자동 변환
      • 불리언(boolean)
      • 모두 같은 var(또는 let)에 firstNum, myName이라 할지라도 typeof를 통해 타입을 출력하면 각각 숫자, 문자열 등으로 출력
      • undefined
    • 기본타입-객체타입(object type)
    • 기본타입-배열
    • 타입 변환
  • 연산자
  • 기타연산자
  • javascript 함수
  • 실습)