web - BOM, DOM

Web/Common 2013. 6. 26. 12:40 


1. BOM (브라우저 객체 모델)

  ㅇ 웹 브라우저 창을 관리할 목적으로 제공되는 객체 모음을 대상으로 하는 모델 
     - 자바 스크립트 등에서 이를 사용할 수 있음
     - 브라우저 제작사 마다 세부사항이 다소 다르게 구현, 한정적임


2. 특징

  ㅇ 웹브라우저의 윈도우 객체를 대상으로 하는 윈도우 객체 모델의 일종으로써,
     - 비표준적이나, 대부분의 웹 브라우저는 Netscape 3 를 표준처럼 많이 따름
        . 이를 DOM Level 0 이라고도 불리움
     - 웹브라우저를 위한 객체 모델의 표준으로는, DOM(다큐먼트 객체 모델)이 있음

  ㅇ 역할
     - 웹 브라우저의  버튼, URL 주소 입력 창, 타이틀 바 등  웹 브라우저 윈도우 및
       웹 페이지의 일부분을 제어할 수 있게끔하는  윈도우 객체 모델임.

  ㅇ 계층구조 
     - 하나의 window 객체 : 브라우저 창 하나에는 각기 하나의 window 객체가 있게됨
        . window 객체는 전역 객체(global object)라고 불리움
           .. 전역객체는 그 객체의 프로퍼티,메서드를 쓸때 그 이름을 명시할 필요없음
        . 각 window 객체 간에는 서로 통신을 할 수도 있음
     - window 객체 안에는 다음과 같은 객체들이 있음
        . html 웹문서로 향하는 관문 : document 객체
        . 웹 이동을 위한 객체 : location, history 객체
        . 컴퓨터 스크린 정보 : screen 객체

  ㅇ 참고사항
     - 메서드 例 : alert(), prompt(), write(), ...
     - 이벤트 例 : onclick 이벤트, onload 이벤트, ...



출처 - http://www.ktword.co.kr/abbr_view.php?id=465&m_temp1=2519&nav=2





저작자표시

'Web > Common' 카테고리의 다른 글

web - deep link(딥링크)  (0) 2013.07.28
압축 - DEFLATE, SDCH 알고리즘  (0) 2013.06.27
네이버지도에서 ‘내 위치’  (0) 2013.04.29
web - content negotiation  (0) 2013.01.10
HTTPS 및 TCP를 통한 SSL 및 SOAP 보안의 인증서 유효성 검사 차이점  (0) 2013.01.09
Posted by linuxism
,

html5 - hashchange 이벤트

Development/HTML 2013. 6. 25. 20:50


hashchange 속성

정의

hashchange 이벤트는 같은 페이지 안에서 해시(#)만 바뀌었을 때. 즉, 페이지에서 id가 있는 요소로 이동했을 때 발생합니다.

    

  1.   <script type="text/javascript">
  2.     function doSomething() {
  3.       //같은 페이지 안에서 해시(#)만 바뀌었을 때 하고 싶은 것을 지정합니다.
  4.     }
  5.   </script>
  6. </head>
  7. <body onhashchange="doSomething()">
  8.   ...
  9. </body>

또는,

    

  1.   ...
  2.   <script type="text/javascript">
  3.     function doSomething() {
  4.       //같은 페이지 안에서 해시(#)만 바뀌었을 때 하고 싶은 것을 지정합니다.
  5.     }
  7.     window.onhashchange = doSomething;
  8.   </script>
  9. </body>

와 같이 만듭니다.

발생 가능한 요소

이 이벤트는 window 객체의 메서드입니다.

상세

이 이벤트는 두가지 속성을 가집니다.

    

  1.   <script type="text/javascript">
  2.     window.onhashchange = function (event) {
  3.         var old_url = event.oldURL,
  4.             new_url = event.newURL;
  5.     }
  6.   </script>

event.oldURL과 event.newURL은 각각 해시 이동 전후의 URL입니다.

이러한 이벤트와 속성을 사용자 혹은 사이트에 유용하게 활용한 좋은 사례가 아직 없습니다.

참조

기준 명세를 바탕으로 명세 번역과 레퍼런스 제작이 이루어졌습니다. 최근 내용은 최신 명세를 확인해 주세요.


출처 - http://html5ref.clearboth.org/doku.php?id=html5:event:onhashchange




저작자표시

'Development > HTML' 카테고리의 다른 글

html - 웹킷(webkit)  (1) 2013.12.10
html - iframe 안에서 밖으로 자바스크립트 통신하기  (0) 2013.07.27
html - form의 target  (0) 2013.05.13
html - label과 placeholder 차이  (1) 2012.12.13
HTML5 - Geolocation  (0) 2012.12.01
Posted by linuxism
,

jQuery - History/Back Button plugins

Development/jQuery 2013. 6. 25. 09:42



10 JQUERY HISTORY/BACK BUTTON PLUGINS

Check out our collection of 10 jQuery History/Back Button plugins. These are really nice plugins. Dead simple to implement, most of the plugins work with bookmarking, refreshing, and back/forward buttons.

1. jQuery History

Simple History Handler/Remote for Hash, State, Bookmarking, and Forward Back Buttons.
jQuery History
SOURCE + DEMO

2. History Plugin

Plugin is for Ajax-driven pages to have back/forward navigation and to allow bookmarking.
History Plugin
SOURCEDEMO

3. jQuery Address

Provides powerful deep linking capabilities and allows the creation of unique virtual addresses that can point to a website section or an application state. It enables a number of important capabilities including: Utilizing browser history and reload buttons!
jQuery Address
SOURCEDEMO

4. jQuery BBQ: Back Button & Query Library

jQuery BBQ leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history.
jQuery BBQ
SOURCEDEMO

5. jQuery hashchange event

This jQuery plugin enables very basic bookmarkable #hash history via a cross-browser HTML5 window.onhashchange event.
jQuery hashchange event
SOURCEDEMO

6. History.js

This project is the successor of jQuery History. Gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState.
History.js
SOURCEDEMO

7. jQuery Ajaxy

Simple Ajax Handler/Remote for Hash, State, Bookmarking, and Forward Back Buttons.
jQuery Ajaxy
SOURCE + DEMO

8. Really Simple History

A lightweight JavaScript library for the management of bookmarking and browser history in Ajax/DHTML applications. RSH serializes application data in an internal JavaScript cache so that bookmarks and the back button can be used to return your application to an earlier state.
Really Simple History
SOURCEDEMO

9. jquery.pathchange.js

Provides a “pathchange” event on the window object, notifying an application when the URL changes. This plugin also provides a method to navigate to a URL safely, that will use HTML5 History Management to avoid a page load. Everything degrades gracefully, and supports RESTful client development.
jquery.pathchange.js
SOURCEDEMO

10. Sammy.js

A tiny JS framework built on top jQuery. It’s restful evented JavaScript.
Sammy.js
SOURCEDEMO

AUTHOR: . Find out more about jQuery4u author on  Plus.



출처 - http://www.jquery4u.com/plugins/history-back-button-plugins/



저작자표시

'Development > jQuery' 카테고리의 다른 글

jquery - fullCalendar viewchanged  (0) 2013.07.28
jquery - 이벤트 다시 설정(로드)  (0) 2013.06.27
jquery - 메소드 정리  (0) 2012.11.01
jQuery - textarea byte check  (0) 2012.07.24
jquery - change 이벤트 select 예제  (0) 2012.06.21
Posted by linuxism
,

티스토리툴바