#3 Basic Javascript

 

자바스크립트 역활

• 사용자 입력, 계산
• 웹페이지 내용, 모양의 동적제어
• 브라우저 제어
• 웹 서버와 통신
• 웹 애플리케이션 작성

 

자바스크립트 객체

• 자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체
• 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합
• 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다
• 자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 “프로토타입(prototype)”이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다. 이 프로토타입은 타 언어와 구별되는 중요한 개념이다.

 

자바스크립트 객체 종류

• built-in object : array, string, date, math
• user-defined object
• DOM
• Document Object
• BOM

 

Built-In Object

1. Array 객체
   • 자바스크립트에서 배열은 [ ] 로 생성하든 new Array()로 생성하든 모두 Array 객체로 다룬다
   • 배열에는 여러 타입의 데이터가 섞여 저장 
   • Array 객체 메소드
     • Array.concat(arr) : 현재 배열에 배열 arr 원소들을 덧붙여 만든 새 배열 리턴
     • Array.join( [ separator ] ) : 배열의 모든 원소들 사이에 separator를 삽입하여 하나의 문자열을 만들어 리턴
     • Array.reverse( ) : 원소를 역순으로 재배열한 새로운 배열 리턴
     • Array.slice( idxA [ , idxB] ) : idxA부터 idxB 까지를 잘라내어 만든 새로운 배열 리턴, idxB 생략시 맨 마지막 원소까지 포함
     • Array.sort( ) : 배열의 원소들을 정렬
     • Array.toString( ) : 원소들을 사이에 , 을 삽입하고 모두 연결하여 하나의 문자열로 리턴
2. String 객체
   
   • 문자열 객체는 new String( ) 또는 문자열리터럴로 생성
   • 문자열 길이 정보는 length 프로퍼티에 자동 저장
   • [ ] 로 문자 접근, 자바스크립트에는 문자 타입이 없으므로 길이가 1인 문자열 반환
   • String 메소드
     • String.concat(str1, str2, ...) : 현재 문자열 뒤에 str1, str2, ... 를 붙여 새로운 문자열 리턴
     • String.indexOf(str1 [, idx ] ) : idx부터 첫번째 str1이 나타나는 인덱스 리턴, idx 생략시 처음부터 검색
     • String.replace(str1, str2) : str1을 찾아서 str2로 수정한 새로운 문자열 리턴
     • String.slice(idxA [, idxB ] ) : idxA에서 idxB 이전의 문자열을 복사하여 리턴, idxB 생략시 문자열 끝까지 복사하여 리턴
     • String.substr(idxA [, len] ) : idxA에서 len개의 문자열을 복사하여 리턴, len 생략시 문자열 끝까지 복사하여 리턴
     • String.substring(idxA, idxB) : idxA에서 idxB 이전의 문자열을 복사하여 리턴
     • String.split( [separator] ) : separator을 구분자로 문자열을 분리하여 문자열 배열을 생성하여 리턴
     • String.trim( ) : 문자열을 앞뒤 공백을 제거한 새로운 문자열 리턴
3. Date 객체
   • new Date( ) 로 새로운 Date 객체 생성시 현재시간 정보로 초기화된 객체 생성
4. Math 객체

 

User-Defined Object

• 프로토타입 : 개발자가 선언하는 새로운 객체 타입
• 사용자 정의 객체 생성 방법
  1. 자바스크립트의 내장객체 중 Object 타입을 이용하여 생성
  2. 프토로타입객체를 위한 생성자함수 정의하고 new 연산자로 객체 생성
     
     • 프로토타입은 객체를 생성하기 위해서는 먼저 "생성자함수"를 정의
  3. ES6의 클래스 문법
     • es6 부터 class 키워드를 이용한 class 정의 가능
       
       class Dog {
         constructor(name) {
           this.name = name;
         }
         say() { console.log(this.name + ' : 멍멍'); }
       }
       
       const myDog = new Dog('흰둥이');
       myDog.say( ); //  흰둥이 : 멍멍

 

DOM, Document Object Model

• 정의 : 브라우저가 각 html 태그들을 객체화해서 만든 객체, html 태그 하나당 한개의 DOM 객체 생성
• DOM 트리 : DOM 객체들의 계층관계, DOM트리의 루트노드인 document 객체는 DOM객체가 아니다.
• DOM 객체의 구성요소
  • 프로퍼티 : html 태그의 속성. ex) innerHTML : html 태그에 들어있는 html 콘텐츠
  • 메소드 : html 태그 제어
  • 컬렉션 : 정보를 집합적으로 표현하는 일종의 배열
  • 이벤트 리스너 : html 태그에 작성된 이벤트 리스너를 그대로 가지고 있다
  • style 프로퍼티 : html 태그에 적용된 css 스타일시트에 접근
• this : 객체 자신을 가리키는 자바스크립 키워드로서, DOM 객체에서 객체 자신으 가리키는 용도로 사용됨

 

Document Object

• 정의 : html 문서 전체를 나타내는 객체로 DOM 트리의 최상위 객체
• 모든 DOM 객체를 접근하는 경로의 시작점
• document 객체의 프로퍼티들을 통해 html 문서 전반적인 속성을 나타냄
  • location 프로퍼티 : 현재문서의 url 정보를 가진 location 객체의 레퍼런스
  • head 프로퍼티 : head 객체에 대한 레퍼런스
  • body 프로퍼티 : body 객체에 대한 레퍼런스
• document 객체의 메소드들을 통해 DOM 객체 검색, 생성등 html 문서 제어 지원
  • getElementById( ) : 주어진 id 속성 값을 가진 첫 번째 DOM 객체 리턴
  • getElementsByClassName( ) : 주어진 class 속성 값을 가진 모든 태그의 컬렉션 리턴
  • write( ) : document 객체에 html 콘텐츠 삽입
• document 객체에는 동일한 이름의 html 태그들을 배열처럼 접근할 수 있는 컬렉션 존재
  • images : 문서내의 모든 <img> 객체들의 컬렉션
  • links : 문서내의 모든 href 속성을 가진 모든 링크객체들의 컬렉션

 

BOM, Browser Object Model

• 정의 : 윈도우, 윈도우에 로드된 문서의 url, 브라우저출력 스크린, 브라우저와 브라우저가 실행되고 있는 환경 등을 자바스크립트 코드로 접근, 제어할 수 있도록 설계된 객체 그룹
• BOM 종류
  • window 객체 : 열려있는 브라우저 윈도우나 탭 윈도우를 나타내는 객체
  • navigator 객체 : 현재 작동중인 브라우저에 대한 정보를 담고있는 객체
  • history 객체 : 사용자가 방문한 웹 페이지의 히스토리 정보를 담고있는 객체
  • location 객체 : 윈도우에 로드된 웹 페이지의 url 정보를 담고있는 객체
  • screen 객체 : 브라우저가 실행되는 스크린 장치에 대한 정보를 담고 있는 객체