javaScript18 브라우저 객체(BOM) 모델이란_2 Window 객체에는 웹 브라우저 창과 관련된 여러가지 속성이 있습니다. 이 속성에 접근하여 브라우저 창의 정보를 가져올 수도 있고, 필요하면 값을 바꿀 수도 있습니다. 속성에 접근하는 방법은 다른 객체와 마찬가지로 객체 이름 뒤에 마침표(.)와 속성 이름을 붙이면 됩니다. -웹 브라우저를 제어하는 Window 객체의 속성 속성 설명 document 브라우저 창에 표시된 웹 문서에 접근할 수 있습니다. frameElement 현재 이 다른 요소 안에 포함되어 있으면 그 요소를 반환합니다. 포함되어 있지 않으면 null을 반환합니다. innerHeight 내용 영역의 높이를 나타냅니다. innerWidth 내용 영역의 너비를 나타냅니다. localStorage 웹 브라우저에서 데이터를 저장하는 로컬 스토리.. 2020. 2. 4. 브라우저 객체(BOM) 모델이란_1 - 브라우저 객체 모델이란? 웹 "문서"에 삽입된 각 요소를 객체로 인식하고 조작하는 것을 "문서 객체 모델(DOM)"이라고 하면 마찬가지로 웹 "브라우저" 전체를 객체로 관리하는 것을 "브라우저 객체 모델(BOM: Browser Object Model)"이라고 합니다. BOM은 자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은것 입니다. 위 그림은 최상위에 있는 Window 객체를 시작으로 하는 객체 모델 계층도입니다. 브라우저 창이 열리면 가장 먼저 Window 객체가 만들어지고, 그 하위에 브라우저 각 요소에 해당하는 객체가 만들어집니다. 이들 하위 객체는 웹 문서와 주소 표시줄처럼 브라우저의 각 요소에 해당하는 객체이며 각각 또 다른 하위 객체를 가지고 있.. 2020. 2. 2. 폼 요소에 접근하는 여러가지 방법 -id 값이나 class 값을 사용하여 폼 요소에 접근하기 id 값이나 class을 값을 사용하여 폼 요소에 접근하는 방법은 DOM의 다른 요소에 접근하는 것과 같습니다. querySelector() 함수나 auerySelectorAll() 함수를 사용해서 특정 id값이나 class 값을 가진 요소에 접근할 수 있습니다. id 값을 사용할 때는 폼 요소 하나에만 접근하고, class 값을 사용할 때는 여러 요소를 가져와 배열 형태로 저장합니다. id 값이 billingName인 요소를 찾아 그 소스를 표시 할 것 입니다. id 값을 이용하여 접근 할 때는 id 값 앞에 샾(#)을 붙이고, class 값을 사용하여 접근할 때는 class값 앞에 마침표(.)을 붙여 사용하는데요 텍스트 필드에 있는 값을 가져.. 2020. 1. 31. 상세 설명 보기/닫기, 상세 설명 링크 만들기 display 속성을 사용해서 웹 문서의 [상세 설명 보기] 링크를 누르면 상세 설명 내용이 표시되고, [상세 설명 닫기]를 누르면 표시된 내용이 사라집니다. 웹 브라우저에서 HTML문서를 불러오면 상세 설명 내용 부분은 감춰져 있고 [상세 설명 보기] 링크를 눌러도 아직 화면에 표시되지 않습니다. [상세 설명 보기] 링크를 눌렀을 때 상세 설명 내용을 화면에 표시하는 소스를 만들어 보겠습니다. [상세 설명 보기] 링크가 있는 소스를 찾아보면 그 부분의 id 값은 "view" 입니다. 그리고 [상세 설명 보기] 링크를 눌렀을 때 화면에 표시해야 할 부분의 id 값은 "detail" 입니다. 즉 "#view" 요소를 누르면 "#detail" 요소가 화면에 나타나는 자바스크립 소스를 작성하면 됩니다. 그 전.. 2020. 1. 29. 이전 1 2 3 4 5 다음
