JavaScript BOM(Browser Object Model) 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 10 Part II
브라우저 객체 모델(BOM) HTML 문서를 객체로 표현한 것을 DOM 웹브라우저를 객체로 표현한 것을 BOM(Browser Object Model) 최상위 객체는 window이고 그 아래로 navigator, location, history, screen, document, frames 객체가 있다.
window.open(URL, name, specs, [replace]) URL 주소, 없으면 about:blank라는 제목의 새창 name: _blank, _parent, _self, _top specs: 창크기, 스크롤바 등 window.close() 윈도우를 닫는다.
windowOpen.html <!DOCTYPE html> <html> <body> <p>Click the button to open a new window with some specifications.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { window.open("https://www.w3schools.com", "_blank"); } </script> </body> </html>
popup.html <!DOCTYPE html> <html> <body> <p>Click the button to open a new window with some specifications.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { window.open("https://www.w3schools.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400"); } </script> </body> </html>
location 객체 Location Object Methods Method Description assign() Loads a new document reload() Reloads the current document replace() Replaces the current document with a new one
location.html <!DOCTYPE html> <html> <body> <button onclick="myFunction()">Load new document</button> <script> function myFunction() { location.assign("https://www.w3schools.com"); } </script> </body> </html>
location.assign()과 location.replace()의 차이 The assign() method loads a new document. The difference between this method and replace(), is that replace() removes the URL of the current document from the document history, meaning that it is not possible to use the "back" button to navigate back to the original document.
history 객체 History Object Methods Method Description back() Loads the previous URL in the history list forward() Loads the next URL in the history list go() Loads a specific URL from the history list
history.html <!DOCTYPE html> <html> <body> <button onclick="goBack()">Go 2 pages back</button> <p>Notice that clicking on the "Go 2 pages back" button here will not result in any action, because there is no previous URL in the history list.</p> <script> function goBack() { window.history.go(-2); } </script> </body> </html>
BOM의 객체들 종합 실습 – portal.html window.close() history.go(-1) : 뒤로 location.assign(“URL 주소”): 웹페이지 로드 location.replace(URL 주소”): 웹페이지 로드 페이지 히스토리 기억도 다 지움
<input type=>으로 아이디, 암호 입력 실습 – 로그인 portal 사이트 구축 portal.html <input type=>으로 아이디, 암호 입력 로드시 팝업으로 notice.html ID? admin이면 admin.html student이면 student.html 기타 nobody.html
실습 #1 – 다음의 3 파일 작성 텍스트: H1 태그를 이용 버튼 1개 생성 필요한 파일들 admin.html student.html nobody.html 텍스트: H1 태그를 이용 버튼 1개 생성
notice.html 실습 #2 - checkbox를 클릭하면 윈도우가 닫히게… <head> <style> #notice {text-align:center} footer {position:absolute; bottom:10px; right:10px;} </style> </head> <body> <h1 id=notice>공지사항</h1> <div> <h2>2017년 1학기 웹프로그래밍 기말고사</h2> <ul> <li>일시: 6월 23일 15:00~</li> <li>장소: 과기대 401</li> <li>시험방법: 필기+실기(?)</li> <li>Open Book?: 고려중</li> </ul> </div> <footer> <input type=checkbox>오늘은 열지 않기 [닫기] </footer> </body>
portal.html (미완) <head> <script> /* code will be here */ <body> <h1> Welcome to My world!!!</h1> <form method=post action=action.php > <p>ID: <input type=text id=id > <p>Password: <input type=password id=passwd> <p><input type=button value=로그인 > <p id=size></p> </body> 로그인 버튼을 클릭할 때 서버로 전송되지 않게 <input type=button>을 사용하였음
실습 #3 – portal.html을 다음과 같이 수정 portal.html이 로드될 때, 함수 openWindow() 호출 <body onload=openWindow()> 함수 openWindow() notice.html를 팝업으로 창을 연다(window.open() 사용) 창이름은 ‘notice’로 지정 notice.html의 창크기는 width 450, height 400으로 로그인 버튼을 클릭하면 함수 login() 호출 함수 login() id가 admin이면 admin.html 문서를 연다.(location.assign()) id가 student이면 student.html 문서를 연다. id가 admin, studen가 아니면 nobody.html 문서를 연다.
실습 #4 admin.html, student.html, nobody.html에서 “뒤로” 버튼을 클릭하면 앞 페이지로 문서가 이동하도록 수정 history.go() 사용