본문 바로가기

분류 전체보기556

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.
7. 객체 객체는 다양한 속성이 묶여있는 것이라 생각하면 된다. 자바스크립트에도 객체를 선언할 수 있도록 만들어져 있다. 객체를 선언하는 방법은 다음과 같다. var d=new Date(); var s=new String("자바스크립트 공부하기"); 이 때, 오른쪽에는 객체의 타입을 선언하고, 왼쪽에 객체의 레퍼런스 변수를 선언한다. 첫번째는 시간을 나타내는 객체를, 두번째는 "자바스크립트 공부하기"라는 문자열을 담은 객체를 생성했다. 객체에 접근하는 방법은, 다음과 같이 var d1=d.toLocaleString(); document.writeln(s.length); 객체변수.프로퍼티 2020. 3. 11.
반응형

티스토리툴바