티스토리 뷰

<Javascript 위치>

HTML 문서 내에서 자바스크립트 작성할 수 있는 위치 다음과 같다.

  • html 태그의 이벤트 리스너 속성에 작성
  • <script> 태그 내에 작성
  • 자바스크립트 파일을 따로 작성
  • URL 부분에 작성
    <a href="javascript:코드"> 클릭 시 실행 <a>

 

자바스크립트에서 var 키워드로 변수를 선언할 수 있고, string(문자열), boolean, number(숫자), 객체 리퍼런스, null 값 등을 지정할 수 있으며, 아무것도 할당 받지 못한 객체를 undefined라고 한다.

 


 

자바스크립트에는 사용자가 직접 객체를 만들어 사용할 수도 있지만, 기본적으로 제공되는 객체가 있다.

  • 자바스크립트에서 기본으로 제공되는 객체로 Array, Boolean, Date, Math 등 기본객체가 있으며 이들을
    코어객체라고도 한다.
  • HTML DOM(Document Object Model) 객체는 HTML 태그들을 객체화 한 것이며, 주로 HTML 페이지의 내용과 속성 등을 제어하기 위해 사용된다.
  • BOM(Browser Object Model)은 브라우저 관련 객체로 브라우저와 관련된 정보를 얻거나 제어할 수 있도록 해준다.

또한 자바스크립트의 기본 객체 뿐만 아니라 다음과 같은 전역 함수와 전역 속성이 제공된다.

 

전역 속성(Global Properties)

  • Infinity
  • NaN
  • undefined

전역 함수(Global Functions)

  • decodeURI()
  • decodeURIComponent()
  • encodeURI()
  • encodeURIComponent()
  • eval()
  • isFinite()
  • isNaN()
  • Number()
  • parseFloat()
  • parseInt()
  • String()

브라우저는 HTML 페이지를 로드할 때 각 태그에 해당하는 DOM 객체를 생성한다. 또한 태그의 포함관계에 따라 DOM객체의 포함관계도 이루어진다. 

 

객체들의 부모자식관계를 나타낸다.

document 객체는 모든 DOM객체를 포함하는 최상위 객체다.

 

DOM객체는 아래와 같이 Id나 클래스명 또는 태그명으로 찾을 수 있다.

var ele1 = document.getElementById(id)
var ele2 = document.getElementByTagName(name)
var ele3 = document.getElementByClassName(name)

 

또한 객체를 찾으면 아래와 같이 그 객체에 대한 속성 혹은 내용 등에 접근이 가능하다. 

document.getElementById("p1").innerHTML = "New text!";
document.getElementById("p2").style.color = "blue";

innerHTML은 태그와 태그사이이에 들어가는 텍스트를 말한다.


DOM 객체가 HTML 태그의 내용이나 속성 등을 제어하기 위함이었다면, BOM 객체는 윈도우와 브라우저의 기능 등을 제어하기 위해 만들어진 객체이다.

 

BOM객체들의 최상위에는 window 객체가 있으며, 모든 DOM객체와 BOM객체의 부모 객체이다. window객체의 메소드에 접근할 때는 window. 은 생략가능하다.

 

BOM객체에는 다음과 같은 종류들이 있다.

  • window
  • screen
  • location
  • history
  • navigator
  • popup alert
  • timing
  • cookies

'Web Programming > JavaScript' 카테고리의 다른 글

jquery (제이쿼리) 사용하는 방법  (0) 2022.05.16
댓글
반응형
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함