본문 바로가기

HTML+CSS+Javascript/Javascript15

11. document 앞서 자바스크립트를 처음 할 때 언급했지만, 자바스크립트는 하나의 큰 class 이다. 그렇기에 우리가 document.프로퍼티를 적용할 수 있는 이유는 document=new document 가 이미 실행되어 있기 때문이다. 여기서 알 수 있는 점은 document 라는 태그는 문서를 아우르는 최상위 태그라고 볼 수 있다. document 객체가 사용하는 프로퍼티와 메소드는 다음과 같다 - 프로퍼티 location url 정보를 가진 파일의 레퍼런스 정보 domain 도메인 이름 referrer HTML을 로드한 원래 문서의 url 문자열 cookie 쿠키 lastModified 문서의 최근 수정 시간 readyState 문서의 현재 로딩상태를 나타냄 title 문서의 제목 body body객체 hea.. 2020. 3. 13.
10. DOM 객체 다루기 - DOM객체의 CSS3 스타일 동적 변화 DOM객체의 스타일은 DOM 객체의 style 프로퍼티로 접근할 수 있다. 단, DOM 객체를 이용할 때는, background-color 처럼 (-)를 사용하지 않고 backgroundColor 등으로 표현한다. CSS스타일 동적 변경 이것은 문장입니다. 다음과 같이 getElement속성으로 아이디를 한정하고, 아이디 내부의 span 객체 프로퍼티를 설정해서 CSS 스타일을 변경할 수 있다. -DOM 객체의 innerHTML 프로퍼티 innerHTML을 이용하면 태그 사이의 HTML을 컨텐츠를 읽을 수 있게 해준다. Document 여기에 클릭하세요. onclick 이벤트가 일어나면 innerHTML을 이용해 p내부의 컨텐츠를 읽어내고, p태그의 컨텐츠를 변.. 2020. 3. 12.
9. HTML DOM 개요 브라우저는 HTML 페이지를 로드할 때 각 태그를 하나의 객체로 만든다. 이 태그를 동적으로 제어하기 위해서 HTML DOM을 사용한다. 이를 이용해 HTML 태그가 출력된 모양과 컨텐츠를 제어한다. 즉, DOM 객체를 이용해 CSS3를 바꾸면 태그의 스타일을 동적 제어할 뿐만 아니라, DOM 각체를 통해 HTML 콘텐츠, 즉 텍스트나 이미지를 제어하는 것도 가능하다. 따라서, HTML DOM의 종류는 HTML 태그의 종류만큼 있다. 하지만 document 객체는 DOM 객체가 아니다. 즉, HTML 태그에서 확장되어 HTML DOM은 부모자식간의 속성과 객체에 대한 프로퍼티가 추가된다. 태그로 예시를 보면, 이것은 문장입니다. var p=document.getElementById("firstP"); v.. 2020. 3. 12.
8. 배열 배열은 비슷한 여러 데이터를 연속적으로 저장해서 하나의 묶음으로 만드는 데이터 구조를 일컫는다. 자바에서는 데이터 타입이 존재하기 때문에 동일한 타입끼리만 배열이 저장되지만, 자바스크립트는 타입에 구애를 크게 받지 않는 언어이기 때문에 동일한 타입이 아니어도 배열로써 만들 수 있다. 하지만 일반적으로는 동일한 타입을 사용한다. 배열을 만드는 방식은 두가지가 있는데, 대괄호로 묶는 방식과, Array 데이터 타입을 이용하는 방법이 있다. -[]로 배열 만들기. var arr=[20,5,8,15,20]; sum=0; for(i=0;i 2020. 3. 11.
반응형