06
웹 페이지
▶페이지 : ✅HTML5 태그, ✅CSS3 스타일 시트, ✅자바스크립트 프로그램의 3가지 코드가
결합되어 작성 된다.
▶HTML5 태그 : 웹 페이지의 구조와 내용을 작성
▶CSS3 스타일 시트 : 색상이나 폰트, 배치 등 웹 페이지 모양을 꾸밈
▶자바스크립트 : 사용자의 입력을 처리, 웹 애플리케이션 작성 등 웹 페이지 동적 제어 에 사용
자바스크립트?
▶자바스크립트는 1995년 넷스케이프사에서 개발되고 NetScape Navigator 2.0 브라우저에 최초로 탑재되어 웹 프로그래밍의 개념을 창시한 언어이다. 현재는 모든 브라우저에서 실행되는 웹 범용 언어 가 되었다.
자바스크립트 특징
▶1.자바스크립트는 조각난 소스 코드 형태로 HTML 페이지에 내장된다.
▶2.자바스크립트 소스 코드는 컴파일 과정 없이 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 바로 실행 된다.
▶3.자바스크립트는 C언어 구조를 차용하고 단순화시켜 쉽게 배울 수 있다.
자바스크립트 역할
▶1.사용자의 입력 및 계산
HTML 폼(form)은 입력 창만 제공할 뿐, 입력을 받고 계산하는 기능은 수행할 수 없다. 키나 마우스의 입력과 계산은 오직 자바스크립트만 처리 가능하다.
▶2.웹 페이지 내용 및 모양의 동적 제어
자바스크립트 코드로 HTML 태그의 속성이나 콘텐츠, CSS 프로퍼티 값을 변경하여 웹 페이지에 동적인 변화를 일으키는 데 활용된다.
✅자바스크립트 코드로 HTML, CSS 변경 가능 -> 동적인 변화 활용
▶3.브라우저 제어
브라우저의 작동을 제어하는 데 활용된다.
▶4.웹 서버와의 통신
웹 서버와 데이터를 주고받을 때 활용된다.
▶5.웹 애플리케이션 작성
HTML5는 캔버스, 로컬 및 세션 스토리지, 위치 정보 서비스 등 자바스크립트 언어로 활용할 수 있는 많은 기능(API) 을 제공하므로,
웹 브라우저에서 실행되는 다양한 웹 애플리케이션을 개발할 수 있다.
07
자바스크립트 객체
▶현실 세계는 객체들의 집합이다. ex) 사람, 책상, 자동차, TV, 컴퓨터 등은 모두 객체이다.
▶객체는 자신만의 고유한 속성이 있다.객체는 하나의 값으로 표현할 수 없고 여러 개의 속성과 값의 묶음으로 표현 된다.
ex) 자동차 객체(car) = 제조사:한성, 배기량:3000, 색상:오렌지, 번호:서울1-1 / 은행 계좌(account) = 소유자:황기태, 계좌번호:111, 잔액:35000
프로퍼티
▶객체의 고유한 속성을(property)라고 부른다.
▶객체는 여러 프로퍼티 와 값 의 쌍으로 표현된다.
메소드
▶객체는 여러 개의 함수를 가질 수 있는데 함수를 메소드(method) 라고 부른다.
▶메소드는 다른 객체나 코드로부터 호출되며, 주로 객체 내부의 프로퍼티 값을 조작하거나 연산을 수행하고 결과를 리턴 한다.
최근 자바스크립트
▶자바스크립트 언어는 단순히 여러 객체들이 활용되는 객체 기반 언어(Object Based Language)였다.
C++, Java, C#과 같은 객체 지향 언어(Object Oriented Language)가 되기 위한 필수적인 특성인 캡슐화, 상속, 다형성의 특징을
완벽히 갖추고 있지 못하기 때문이었다.
▶최근 자바스크립트의 표준이 되는 ECMAScript6(ES6)에서 class를 지원함으로써 객체지향적 개념을 거의 모두 수용하고 있다.
이제는 자바스크립트를 객체 지향 언어로 볼 만하다.
자바스크립트 객체의 유형
▶브라우저가 제공하는 자바스크립트 객체들은 (1)코어 객체, (2)HTML DOM 객체, (3)브라우저 관련 객체(BOM) 위의 3가지 유형으로 나뉜다.
▶코어 객체는 기본 객체로서 Array, Date, String, Math 타입 등이 있으며, 웹 페이지나 웹 서버 응용프로그램 어디서나 사용할 수 있다.
▶HTML DOM 객체는 HTML 페이지에 작성된 HTML 태그들을 브라우저가 하나씩 객체화한 것들로 HTML 페이지의 내용과 모양을 제어하기 위해 사용되는 객체들이다.
▶브라우저 관련 객체는 브라우저의 종류나 스크린의 크기 정보를 제공하거나 새 윈도우를 생성하는 등 브라우저와 관련된 객체들로서
BOM(Brower Object Model)이라고도 부른다.
08
자바스크립트 코어 객체
▶자바스크립트 프로그램에서 항상 활용할 수 있는 기본 객체들이다. 코어 객체에는 String, Math, Date, Array, Function 등 여러 가지가 있다.
HTML DOM 객체
▶브라우저는 HTML 페이지를 로드하는 과정에서 각 HTML 태그를 하나의 객체로 만든다.
예를 들어 <p> ... </p>로 구성된 요소는 p 객체로 생성한다.
이들은 HTML 문서의 각 요소를 객체화한 것이라는 뜻으로 HTML DOM(Document Object Model)객체라고도 부른다.
HTML DOM은 W3C의 표준이므로 모든 브라우저에서 호환된다. HTML 태그를 동적으로 제어하기 위해서는 HTML DOM에 대한 지식이 반드시 필요하다
BOM 객체
▶브라우저에 관한 정보를 제공하거나 브라우저의 모양을 제어 하도록 제공되는 객체들을 BOM(Browser Object Model) 객체라고 부른다.
BOM 객체에는 브라우저 윈도우를 나타내는 window객체, 웹 페이지의 히스토리 정보를 나타내는 history 객체, screen 객체 등이 있다.
DOM의 목적
▶DOM 객체는 HTML 페이지에 작성된 각 HTML 태그를 객체로 만든 것이다. 브라우저는 왜 HTML 페이지를 로드하면서 각 태그를 객체로 만드는 것일까?
그것은 HTML 페이지가 출력된 후, DOM 객체를 통해 HTML 태그가 출력된 모양과 콘텐츠를 제어하기 위해서 이다.
DOM 트리
▶브라우저는 HTML 페이지를 로드하면서 HTML 태그의 포함 관계에 따라 DOM 객체들을 트리(tree)구조로 만드는데 이것을 DOM 트리(DOM tree)라고 부른다.
위 이미지는 HTML 페이지와 DOM 트리의 관계를 보여준다.
HTML 태그마다 하나의 DOM 객체가 생성된 것을 볼 수 있고,
HTML 태그의 포함 관계에 따라 DOM 객체들이 부모 자식의 계층 관계로 구성됨을 볼 수 있다.
DOM 객체는 DOM 트리의 한 노드이므로 DOM 노드(Node) 혹은 DOM 엘리먼트(Element)라고도 부른다.
HTML 태그의 출력과 DOM 객체
▶얼핏 브라우저가 HTML 페이지를 읽으면서 HTML 태그를 화면에 바로 출력하는 것으로
생각할 수 있지만, 사실은 브라우저가 HTML 태그로부터 먼저 DOM 객체를 생성하고 DOM 트리를 구성한 후, DOM 객체를 화면에 출력한 것이다. HTML 페이지는 로드된 후 사라지며, 브라우저에는 DOM 객체와 DOM 트리만 존재한다. 그러므로 자바스크립트 코드로 DOM 객체를 제어하면 그에 따라 즉각 브라우저 화면에서 HTML 태그의 모양이나 콘텐츠가 바뀐다.
DOM 객체의 구성요소
▶DOM 객체는 HTML 태그의 속성이 그대로 반영되어 만들어진다.
▶HTML 태그의 요소
HTML 태그는 엘리먼트(element)라고도 불리며 다음 5가지 요소(✅엘리먼트 이름, ✅속성, ✅CSS3 스타일, ✅이벤트 리스너, ✅콘텐츠)로 구성된다.
<p> 태그의 예를 들면 다음과 같다.
<p id="firstP" style="color:blue" onclick="this.style.color='teal'">
이것은<span style="color:red">문장입니다.</span>
</p>
💬
태그이름(엘리먼트) 속성 CSS3 스타일 이벤트 리스너 콘텐츠(innerHTML)
innerHTML
▶HTML 태그에는 속성(attribute)뿐 아니라 CSS3 스타일과 이벤트 리스너도 있다.
이벤트 리스너에는 HTML 태그에 발생할 이벤트를 처리하는 자바스크립트 코드를 작성한다.
시작 태그와 종료 태그 사이에 포함된 HTML 콘텐츠를 innerHTML 이라고 한다.
DOM 객체의 구성 요소(W3C의 표준)
▶DOM 객체는 HTML 태그의 5 요소를 그대로 반영하여 다음 5 종류의 속성으로 구성된다.
🔹프로퍼티(property)
🔹메소드(method)
🔹컬렉션(collection)
🔹이벤트 리스너(event listener)
🔹CSS3 스타일
🔸프로퍼티(property)는 DOM 객체의 멤버 변수로서 HTML 태그의 속성(attribute)들을 반영한다.
