브라우저 객체 모델(BOM)은 정말로 웹에서 사용하는 자바스크립트의 핵심입니다.
BOM은 웹 페이지 콘텐츠와 무관하게 브라우저 기능을 노출하는 객체입니다. 제대로 된 명세가 없는 기간이 너무나 길었기에 브라우저 제조사들은 자신들이 원하는대로 확장했고, 이는 많은 문제가 발생하였습니다.
브라우저 사이의 공통점이 사실상의 표준이 되고 브라우저 개발 목적은 거의 상호작용성에 치중하게 되었습니다.
이제 HTML5 명세에서 BOM의 주요 부분을 다루며 W3C는 브라우저에서 동작하는 자바스크립트에서 가장 기본적인 부분 중 하나에 대해 표준화 방법을 찾고 있습니다.
Window 객체
BOM의 핵심에는 브라우저의 인스턴스인 window 객체가 있습니다.
window 객체는 브라우저 창의 자바스크립트 인터페이스 구실을 하고 다른 한편으로 Global 객체로 기능합니다. 따라서, 웹 페이지에서 정의한 모든 객체, 변수, 함수에는 window가 Global 객체 구실을 하며 window에 정의된 parseInt() 등의 메서드를 이용합니다.
전역 스코프
window 객체가 Global 객체 구실을 하므로 전역에서 선언한 변수와 함수는 모두 window 객체의 프로퍼티 및 메서드가 됩니다.
var blog = "focuse-dev";
function sayBlog() {
console.log(this.blog);
}
console.log(window.blog);
sayBlog();
window.sayBlog();
변수 blog 와 함수 sayBlog() 는 전역 스코프에서 정의되었으므로 자동으로 window객체에 속합니다.
따라서, blog 변수는 window.blog 로도 접근할 수 있고 함수 sayBlog()는 window.sayBlog() 로도 접근할 수 있습니다.
sayBlog() 는 전역 스코프에 존재하므로 this.Blog는 window.Blog가 되며 올바른 결과를 표시합니다.
전역 변수가 window 객체의 프로퍼티가 되긴 하지만 전역 변수를 정의하는 것과 window에 프로퍼티를 직접 정의하는 것은 조금 다릅니다. 전역 변수는 delete 연산자로 제거할 수 없지만 window에 직접 정의한 프로퍼티는 가능합니다.
var blog = "focus-dev"; window.blog_nm = "개발에만 집중"; delete window.blog; delete window.blog_nm; console.log(window.blog_nm);
var 연산자를 써서 window에 추가한 프로퍼티는 Configurable 속성이 flase로 지정되므로 delete 연산자를 통해 삭제할 수 없습니다.
선언한 적 없는 변수에 접근하려 하면 에러가 발생하지만 선언하지 않았을 가능성이 있는 변수의 존재 여부는 window 객체를 통해 확인 가능합니다.
var newValue1 = value; var newValue2 = window.value;
location, navigator 등 자바스크립트에서 무심코 전역이라 생각하는 많은 객체가 실은 window 객체의 프로퍼티입니다.
창의 위치
창의 위치를 가져오가나 설정하거나 설정하는 프로퍼티와 메서드도 다양합니다.
인터넷 익스플로러와 사파리, 오페라, 크롬은 모두 screentLeft / screenTop 프로퍼티를 지원하는데 이는 화면을 기준으로 창이 왼쪽 위에서 각각 얼마나 떨어져있는지를 나타냅니다.
파이어폭스는 이 기능을 screenX / screenY 프로퍼티를 지원하는데 사파리와 크롬도 이 프로퍼티를 지원합니다.
오페라 역시 screenX / screenY를 지원하긴 하지만 이 값은 screenLeft / screenTop 과 다르므로 오페라에서는 screenX / screen Y 를 쓰지 말아야 합니다.
크로스 브라우저 코드를 만들기 위해서 이 처럼 하면 됩니다.
var leftPos = (typeof window.screenLeft == "number") ?
window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
window.screenTop : window.screenY;
console.log("leftPos = " + leftPos);
console.log("topPos = " + topPos);
screenLeft / screenTop 프로퍼티가 존재하는지 판단합니다. 존재하면( IE , 사파리, 오페라, 크롬 ) 해당 프로퍼티를 사용합니다.
인터넷 익스플로러와 오페라, 크롬에서 screenLeft / screenTop 은 window에서 사용하는 페이지 영역이 화면의 왼쪽 위에서 얼마나 떨어졌는지 나타냅니다. 즉, window 객체가 최상위 객체이고 브라우저 창이 화면 맨 위에 있다면 screenTop 값은 브라우저 툴바가 차지하는 높이입니다. 파이어폭스와 사파리는 이 좌표를 전체 브라우저와 관련하여 계산하므로 브라우저 창이 화면 맨 위에 있다면 0를 반환합니다.
파이어폭스와 사파리, 크롬에서는 페이지의 모든 프레임에서 항상 top.screenX / top.screenY 값을 반환합니다.
페이지에 margin 이 있더라도 screenX / screenY 를 window 객체와 연관해 쓸 때마다 같은 값을 반환합니다. 인터넷 익스플로러와 오페라는 프레임 좌표를 화면에 상대적으로 정확히 반환합니다.
따라서, 브라우저 창의 좌표를 정확히, 브라우저에 무관하게 일관적으로 구할 방법은 없습니다 .하지만 moveTo() / moveBy() 메서드로 정확히 위치로 옮기는 일은 가능하다. moveTo()는 이동할 x/y 좌표를 받고 moveBy()는 각 방향으로 몇 픽셀 이동할지 나타내는 숫자를 받습니다.
// 창을 왼쪽 위 구석으로 옮깁니다. window.moveTo(0,0); // 창을 아래쪽으로 100픽셀 옮깁니다. window.moveBy(0, 100); // 창을 (200, 300)으로 옮깁니다. window.moveTo(200, 300); // 창을 왼쪽으로 50픽셀 옮깁니다. window.moveBy(-50, 0);
브라우저에서 이 메서드를 금지할 가능성도 있으며 IE7 이상과 크롬, 오페라에서는 기본적으로 비활성화되어 있습니다. 이 메서드 중 프레임에서 동작하는 것은 하나도 없습니다. 오직 최상위 창에서만 동작합니다.
창 크기
창 크기를 알아내느 방법은 무슨 브라우저든 상당히 복잡합니다. IE9 이상, 파이어폭스, 사파리, 오페라, 크롬은 모두 innerWidth, innerHeight, outerWidth, outerHeight 네 가지 프로퍼티를 지원합니다.
IE9 이상, 사파리, 파이어폭스, 크롬에서 outerWidth 와 outerHeight 는 최상위 창에서 호출하든 프레임에서 무관하게 브라우저 창 크기를 반환합니다. 오페라에서 이 값은 페이지 뷰포트 크기입니다. innerWidt와 innerHeight 프로퍼티는 브라우저 창 내부의 페이지 뷰포트 크기를 나타냅니다. 테두리와 툴바는 포함되지 않습니다.
IE8 및 이전 버전에는 브라우저 창의 현재 크기를 알아낼 방법이 없지만 DOM을 통해 페이지의 가시영역에 대한 정보를 알 수 있는 있습니다.
인테넷 익스플로러, 파이어폭스, 사파리, 오페라, 크롬에서 document.documentElement.clientWidth 와 document.documentElement.clientHeight 프로퍼티는 각각 페이지 뷰포트의 너비와 높이를 나타냅니다.
IE 6 는 표준 모드에서만이들 프로퍼티를 지원하며 퀵스 모드에서는 document.body.clientWidth 와 document.body.clientHeight 프로퍼티가 해당 정보를 제공합니다. 크롬이 퀵스 모드로 동작할 때는 document.documentElement와 document.body 와 clientWidth / clientHeight 가 모두 뷰포트 크기를 나타냅니다.
결국 브라우저 창 크기를 정확히 알아낼 방법도 없지만 페이지 뷰포트 크기는 알 수 있다.
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if ( typeof pagWidth != "number" ) {
if ( document.comppatMode == "CSS1Compat" ) {
pageWidth = document.documetElement.clientWidth;
pageHeight = document.documetElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
console.log("pageWidth = " + pageWidth);
console.log("pageHeight = " + pageHeight);
pageWidth 와 pageHeight 에는 window.innerWidth 와 window.innerHeight 의 초기 값이 할당됩니다. 다음에는 pageWidth 가 값이 숫자인지 확인합니다. 숫자가 아니라면 document.compatMode로 페이지가 표준 모드인지 확인합니다. 표준모드라면 document.documentElement.clientWidth / document.documentElement.clientHeight 를 사용하고 표준모드가 아니라면 document.body.clientWidht / document.body.clientHeight 를 사용합니다.
모바일 장체에서는 window.innerWidth / window.innerHeight 가 뷰포트 크기이며 이 크기는 화면에 보이는 페이지 크기와 일치합니다. 모바일 익스플로러는 이 프로퍼티를 지원하지 않지만 document.documentElement.clientWidth / document.documentElement.clientHeight 를 지원합니다. 이 값은 페이지를 확대/축소할 때 바뀝니다.
다른 모바일 브라우저에서는 document.documentElemet에서 레이아웃 뷰포트, 즉 렌더링된 페이지의 크기를 알 수 있습니다.
모바일 익스플로러는 이 정보를 document.body.clientWidth / document.body.clientHeight에 저장합니다. 이 값은 페이지를 확대/축소해도 바뀌지 않습니다.
브라우저 창 크기를 조정할 때는 resizeTo() 와 resizeBy() 메서드를 사용합니다.
각 메서드는 매개변수를 두 개 받습니다. resizeTo() 최종 너비/높이를 받고 resizeBy()는 너비/높이를 얼만큼 바꿀지 받습니다.
// 100 X 100 으로 변경 window.resizeTo(100, 100); // 100 X 100에서 200X150으로 변경 window.resizeBy(100, 50); // 300 X 300 으로 변경 window.resizeTo(300, 300);
창을 움직이는 메서드와 마찬가지로, 크기를 바꾸는 메서드 역시 인터넷 익스플로러 7 이상, 크롬, 오페라에서는 기본적으로 금지되어 있습니다. 최사위 window객체에서만 적용되는 점도 마찬가지 입니다.
내비게이션 열기
window.open() 메서드는 URL로 이동한 후, 브라우저 창을 새로 엽니다. 이 메서드는 이동할 URL, 대상 창, 기능을 나타내는 문자열 마지막으로 새 페이지가 브라우저 히스토리에서 현재 페이지를 대체할지 나타내는 볼리언 값 네 가지 매개변수를 받습니다. 일반적으로 세 번째 매개변수까지만 사용하며, 마지막 매개변수는 새 창을 열 때는 적용되지 않습니다.
window.open()의 두번째 매개변수가 이미 존재하는 창이나 프레임 이름이라면 주어진 URL은 해당 이름의 창이나 프레임에서 열립니다.
// <a href="https://www.focus-dev.tistory.com" target="topFrame"></a> 와 동일
window.open("https://focus-dev.tistory.com/", "_self");
이 코드는 마치 사용자가 href 속성이 "www.focus-dev.tistory.com" 이고 target 속성이 "topFrame"인 링크를 클릭한 것처럼 동작합니다. "topFrame"이란 이름의 창이나 프레임이 이미 있으면 해당 창/프레임에서 주어진 URL을 엽니다. 그렇지 않다면 새 창을 생성하고 이름을 "topFrame"으로 지정합니다. 두 번째 매개변수에는 특별한 창 이름인 _self, _parent, _top, _blank도 쓸 수 있습니다.
두번째 매개변수가 기존의 창/프레임 이름이 아니라면 세 번째 매개변수에 지정한 문자열로 새 창이나 탭을 생성합니다. 세 번째 매개ㅐ변수가 없다면 새 브라우저 창이 열리고 기본 브라우저 창 설정이 적용됩니다. 세 번쨰 매개변수는 새 창을 열 때에만 적용됩니다.
세 번째 매개변수는 새 창의 설정 정보를 나타내는, 쉼표로 구분된 문자열입니다.
| 옵션 | 값 | 설명 |
| fullscreen | "yes" 또는 "no" | 브라우저 창을 최대 크기로 생성할지 나타냅니다. (IE 만 적용) |
| height | 숫자 | 새창의 높이 입니다. (최솟값 100) |
| left | 숫자 | 새창의 x 좌표입니다. |
| location | "yes" 또는 "no" | 주소 표시줄을 표시할지 나타냅니다. |
| menubar | "yes" 또는 "no" | 메뉴 바를 표시할지 나타냅니다. |
| resizable | "yes" 또는 "no" | 새 창의 테두리를 드래그해서 크기를 조절할 수 있는지 나타냅니다. |
| scrollbars | "yes" 또는 "no" | 새 창 콘텐츠가 뷰포트를 넘칠 때 스크롤을 허용할지 나타냅니다. |
| status | "yes" 또는 "no" | 상태 바를 표시할지 나타냅니다. |
| toolbar | "yes" 또는 "no" | 툴바를 표시할지 나타냅니다. |
| top | 숫자 | 새 창의 y좌표입니다. |
| width | 숫자 | 새 창의 너비 입니다. |
모든 옵션은 이름-값 쌍을 쉼표로 구분한 문자열입니다. 이름-값 쌍은 등호(=)로 구분하며 각 쌍은 공백을 포함할 수 없습니다.
window.open("https://focus-dev.com/", "_blank",
"height=400,width=400,top=10,left=10,resizable=yes");
이 코드가 만드는 새 창은 400 x 400 크기이고 화면의 왼쪽에서 가로세로 10픽셀씩 떨어져 있으며 크기 조절은 가능합니다.
window.open() 메서드는 새로 생성한 창에 대한 참조를 반환합니다. 이 객체는 다른 window 객체와 같지만 좀 더 세밀히 조절할 수 있습니다.
var blog = window.open("https://focus-dev.com/", "_blank",
"height=400,width=400,top=10,left=10,
resizable=yes");
window.resizeTo(500, 500);
blog.moveTo(100, 100);
다음과 같이 close() 메소드 써서 새 창을 닫을 수 있습니다.
blog.close();
close() 메서드는 window.open() 으로 생성한 팝업 창에서만 동작합니다. 주요 브라우저 창은 반드시 사용자 확인을 거쳐야만 닫을 수 있습니다. 하지만 팝업 창은 close()를 호출해 사용자 확인 없이 닫을 수 있습니다. 새 창을 닫아도 창에 대한 참조는 여전히 존재하지만, closed 프로퍼티를 확인하는 용도 이외에는 쓸 수 없습니다.
blog.close(); console.log(blog.closed);
새로 생성한 window 객체에는 자신을 연창을 참조하는 opener 프로퍼티가 있습니다. 이 프로퍼티는 팝업 창의 최상위 window 객체에만 정의 되며 window.open() 을 호출한 창이나 프레임을 가리키는 포인터입니다.
var blog = window.open("https://focus-dev.com/", "_blank",
"height=400,width=400,top=10,left=10,
resizable=yes");
console.log(blog.opener == window);
팝업 창에는 자신을 연 창에 포인터가 존재하지만 그 역은 존재하지 않습니다. 창은 자신이 연 팝업을 추적하지 않으므로 필요하다면 직접 해야 합니다.
인터넷 익스플로러 8 이상이나 크롬 같은 일부 브라우저는 브라우저 탭을 분리된 프로세스에서 실행하려 합니다. 탭에서 다른 탭을 열면 window 객체끼리 통신해야 하므로 각 탭을 분리된 프로세스에서 실행할 수는 없습니다. 크롬에서는 새 탭을 생성할 때 다음 예제처럼 opener 프로퍼티를 nul로 설정하여 프로세스를 분리할 수 있습니다.
var blog = window.open("https://focus-dev.com/", "_blank",
"height=400,width=400,top=10,left=10,
resizable=yes");
blog.opener = null;
opener를 null로 설정하면 브라우저는 새로 생성된 탭이 원래 탭과 통신할 필요가 없는 것으로 간주하고 분리된 프로세스에서 실행할 수 있습니다. 일단 프로세스를 분리하면 다시 연결할 수는 없습니다.
온라인 광고사들은 오랫동안 팝업 창을 남용해 왔습니다. 팝업을 시스템 대화상자와 혼동되도록 만들어 사용자가 광고를 클릭하도록 유도한 경우도 많습니다. 브라우저 제조사들은 팝업 창 설정을 제한하여 사용자가 혼동하는 일을 줄이려 했습니다.
보안 제한
팝업 창을 화면 밖에 생성하거나 밖으로 이동할 수 없도록 했고 상태 바를 끌 수 없게 하는등 익스플로러 6는 팝업에 대한 보안을 추가하였습니다.
IE7팝업 창에서 주소 표시줄도 끌 수 없도록 했고 기본적으로 이동이나 크기 조절도 금지했습니다.
파이어폭스는 버전 1부터 팝업 창의 상태 바를 감출 수 없게 만들었으므로 window.open()의 세번째 매개변수에 무엇을 넘겼든 상태 바를 표시합니다. 파이어폭스 3 부터는 팝업 창에서 주소 표시줄을 숨길 수 없습니다.
오페라는 팝업 창을 주요 브라우저 창 안에서만 열 수 있으며 시스템 대화상자와 혼동되는 위치에 놓을 수 없게 막습니다.
또한 브라우저들은 팝업 창을 사용자의 행동에 의해서만 열 수 있게 합니다. 팝업 창은 마우스 클릭하거나 키를 누르는 등 사용자 행동이 있어야만 열립니다.
크롬은 사용자 행동이 없는 상태에서 팝업 창을 호출하면 다른 접근법을 취합니다. 팝업 창을 차단하는 대신 브라우저 창의 오른쪽 하단에 팝업 창의 제목만 표시합니다.
팝업 차단
대부분 브라우저의 팝업 차단 소프트웨어를 내장하고 있습니다. 그러지 않은 브라우저는 야후! 툴바처럼 팝업 차단 기능이 있는 유틸리티를 설치하면 됩니다. 이를 이용하면 예기치 못한 팝업을 대부분 차단할 수 있습니다.
브라우저에 내장된 파업 차단기가 동작했다면 window.open()은 대개 null을 반환합니다.
var blog = window.open("https://focus-dev.com/", "_blank");
if(blog == null) {
console.log("팝업이 막혔습니다.");
}
브라우저 추가 기능 같은 외부 프로그램이 팝업을 차단한 경우라면 window.open()은 일반적으로 에러를 반환합니다. 따라서 팝업이 차단되었는지 정확히 판단하려면 다음과 같이 반환 값을 체크하는 동시에 indow.open() 호출을 try ~ catch 문으로 감싸야 합니다.
var blocked = false;
try {
var blog = window.open("https://www.focus-dev.com/", "_blank");
if(blog == null) {
blocked = true;
}
} catch (ex) {
blocked = true;
}
if (blocked) {
console.log("팝업이 차단되었습니다.");
}
window.open() 메서드에 대한 호출이 차단되었다면 차단 방법과 무관하게 차단되었음을 정확히 알아냅니다. 팝업이 차단되었는지와 무관하게 브라우저 메시지는 정상적으로 표시되었습니다.
인터벌과 타임아웃
브라우저에서 자바스크립트는 단일 스레드로 실행되지만 타임아웃과 인터벌을 통해 코드가 특정 시간에 실행되게끔 조절할 수는 있다. 타임아웃은 일정 시간 뒤에 코드를 실행하는 것이고, 인터벌은 일정 시간마다 코드를 반복 실행하는 겁니다.
타임아웃은 window의 setTimeout() 메서드로 설정합니다. 이 메서드는 매개변수를 두개 받는데 하나는 실행 코드이고 다른 하나는 코드를 실행할 때 까지 기다리는 시간입니다.첫 번째 매개변수에는 자바스크립트 코드를 나타내는 문자열도 가능하고 함수도 가능합니다.
// 이렇게 하면 안됩니다.
setTimeout("console.log('Hello world')", 1000);
// 정상적인 예제
setTimeout(function() {
console.log("Hello World");
}, 1000);
두 문장 모두 동장하지만 첫 번째 매개변수에 문자열을 넘기면 성능이 떨어지므로 좋은 방법은 아닙니다.
두 번쨰 매개변수인 대기 시간은 엄밀히 말해 코드가 실행될 때까지의 시간은 아닙니다. 자바스크립트는 단일 스레드이므로 한 번에 한 가지 코드만 실행 가능합니다. 자바스크립트는 큐를 이용해 각 코드를 실행을 관리합니다. 각 작업은 큐에 추가된 순서대로 실행됩니다.
setTimeout()의 두 번쨰 매개변수는 자바스크립트 엔진이 해당 밀리초 만큼 기다린 다음 작업을 큐에 추가하도록 합니다. 큐가 빈 상태였다면 코드는 즉시 실행되지만 큐가 비어 있지 않다면 코드는 차례를 기다려야 합니다.
setTimeout()을 호출하면 해당 타임아웃의 숫자형 ID를 반환합니다. 타임아웃ID는 코드의 고유 식별자이며 타임아웃을 취소할때 사용합니다. 대기 중인 타임아웃을 취소하려면 clearTimeout() 메서드에 타임아웃 ID를 넘깁니다.
var timeoutId = setTimeout(function() {
console.log("10 초");
}, 1000);
clearTimeout(timeoutId);
정해진 시간이 되기 전에 clearTimeout()을 호출하기만 하면 타임아웃은 완전히 취소됩니다. 코드가 실행된 뒤에는 clearTimeout() 을 호출해도 아무 효과도 없습니다.
인터벌은 타임아웃과 비슷하지만 페이지가 종료되거나 인터벌을 취소하기 전에는 일정한 시간마다 코드를 반복 실행한다는 점이 다릅니다. setInterval() 메서드로 인터벌을 설정하며 이 메서드는 setTimeout() 과 같은 매개변수, 즉 실행할 코드와 각 실행 사이에 대기할 시간을 밀리초로 받습니다.
setInterval("console.log('Print console')", 1000);
setInterval(function() {
console.log("Print console");
}, 1000);
setInterval() 메서드 역시 인터벌 ID를 반환하며 나중에 인터벌을 취소할 떄 쓸 수 있습니다. clearInterval() 메서드는 이 ID를 매개변수로 받아 해당 인터벌을 취소합니다. clearInterval() 메서드는 이 ID를 매개변수로 받아 해당 인터벌을 취소합니다. 인터벌을 취소하지 않으면 페이지가 떠 있는 동안은 계속 실행되므로 인터벌 취소는 타임아웃 취소보다 중요합니다.
var num = 0;
var max = 10;
var intervalId = null;
function incrementNumber() {
num++;
if(num == max) {
clearInterval(intervalId);
console.log("Done!!!!");
}
}
intervalId = setInterval(incrementNumber, 500);
변수 num은 매 0.5초 마다 증갛여 최댓값에 도달할 때까지 반복하고 도달하면 인터벌을 취소합니다.
var num = 0;
var max = 10;
function incrementNumber() {
num++;
if ( num < max) {
setTimeout(incrementNumber, 500);
} else {
console.log("Done!!!");
}
}
setTimeout(incrementNumber, 500);
타임아웃을 사용할 때는 다른 타임아웃이 필요할 때만 설정되므로 취소를 위해 타임아웃 ID를 추적할 필요는 없습니다. 인터별없이 인터벌을 설정하는 모범사례로 위에 에제로 간주됩니다. 인터벌 사이의 시간을 정확히 보장하기 어렵고 일부 인터벌을 건너뛰기도 하므로 실무에서는 인터벌을 잘 쓰기 않습니다. 타임아웃을 사용하면 그런 일은 일어나지 않습니다.
일반적으로 말해 인터벌은 쓰지 않는 편이 좋습니다.
시스템 대화 상자
브라우저는 alert(), confirm() , promt() 메서드를 통해 사용자에게 시스템 대화상자를 표시합니다. 이들 대화상자는 현재 브라우저에 표시된 웹 페이지와는 무관하며 HTML이 들어 있지도 않습니다. 대화상자의 외관은 CSS가 아니라 운영체제 / 브라우저 설정에 따라 다릅니다. 또한 이들 대화상자는 동기적이고 모달설정이 있어서 대화상자가 떠 있을 때는 코드 실행이 중지되고 대화상자를 닫아야 재개됩니다.
alert()를 호출하면 시스템 메세지 박스가 사용자에게 OK 버튼과 함께 텍스트를 표시합니다.
alert 대화상자는 일반적으로 에러처럼 사용자가 할 수 있는 일이 없지만 반드시 알려야 할 때 씁니다. 사용자의 선택은 메시지를 읽은 후 대화상자를 닫는 것 외엔 없습니다.
두 번째 대화상자는 confirm()입니다. confirm 대화상자는 alert 대화상자처럼 사용자에게 메세지를 표시합니다. 두 대화상자의 주요 차이는 컨펌대화상자에는 취소 버튼도 있어서 사용자가 선택할 수 있다는 점입니다.
confirm() 메서드는 볼리언 값을 반환하는데, 이 값에는 사용자가 확인을 클릭했는지 취소를 클릭했는지가 들어 있습니다. true는 확인이고 false 는 취소를 클릭하거나 대화상자 구석의 'X(창닫기)'를 누른 경우 입니다.
if( confirm("확인하시겠습니까?")) {
alert("확인");
} else {
alert("취소");
}
사용자가 확인 버튼을 누르면 확인 alert 창이 뜨고 취소 버튼을 누르면 취소 alert 창이 뜹니다.
마지막은 prompt() 인데 이는 사용자 입력을 기다립니다. 프롬프트 대화상자에는 확인 취소 버튼 외에도 사용자가 데이터를 입력하는 텍스트 박스가 있습니다. prompt() 메서드는 매개변수를 두개 받습니다. 하나는 대화상자에 표시할 텍스트이며 다른 하나는 텍스트 박스의 기본값 입니다.
확인 버튼을 클릭하면 prompt() 는 텍스트 박스의 값을 반환합니다. 취소 버튼이나 창닫기 버튼을 클릭해서 대화상자를 닫으면 null을 반환합니다.
var result = prompt("성함을 입력해주세요", "홍길동");
if(result != null) {
alert("welcome " + result);
}
이런 시스템 대화상자는 사용자에게 정보를 제공하고 결정하도록 하는데 유용합니다. 시스템 대화상자에는 HTML 이나 CSS, 자바스크립트 등이 필요 없으므로 빠르고 쉽게 웹 애플리케이션에 사용할 수 있습니다.
크롬과 오페라에는 이들 시스템 대화상자에 관한 특별한 기능이 있습니다. 실행 중인 스크립트가 시스템 대화상자를 두 개 이상 만든다면 첫번째 대화상자를 차단할 수 있도록 하는 체크박스를 제공합니다.
체크박스를 체크하고 닫으면 이후 해당 페이지의 시스템 대화상자는 모두 차단됩니다. 크롬에서는 사용자가 대화상자를 차단했는지 여부를 개발자가 알 수 없습니다.
대화상자 카운터는 브라우저가 대기 상태가 될 때마다 리셋되므로 사용자의 두 가지 행동이 각각 대화상자를 표시한다면 체크박스는 어느 쪽에 표시되지 않으며, 단 하나의 행동에서 대화상자를 두 개 생성한다면 두 번째 대화상자에 있는 체크박스가 표시됩니다.
크롬과 오페라에서 이 기능을 도입한 이후 IE9와 파이어폭스 4에서도 같은 기능을 추가했습니다.
자바스크립트를 이용해 find, print 두 가지 대화상자를 더 표시할 수 있습니다.
두 대화상자는 모두 비동기적으로 표시되며 즉시 스크립트에 컨트롤을 반환합니다. 두 대화상자는 사용자가 브라우저의 인쇄, 찾기 메뉴를 이용할 때와 같은 대화상자입니다.
// 인쇄 대화상자 표시 window.print(); // 찾기 대화상자 표시 window.find();
이 메서드는 사용자가 대화상자에서 무슨 일을 했는지 알 방법이 전혀 없으므로 활용하기는 어렵습니다. 또한, 이들은 비동기적이므로 대화상자 차단기능의 영향도 받지 않습니다.
'프로그래밍 > 자바스크립트(javascript)' 카테고리의 다른 글
| [자바스크립트/javascript] 클라이언트 탐지, 기능탐지, 퀵스 탐지 (0) | 2020.07.13 |
|---|---|
| [자바스크립트/javascript] 브라우저 객체 모델 - location, navigator, screen, history 객체 (0) | 2020.06.24 |
| [자바스크립트/javascript] 함수 표현식, 클로저 (0) | 2020.06.18 |
| [자바스크립트/javascript] 상속 (프로토타입 체인, 생성자 훔치기, 기생 상속) (0) | 2020.06.08 |
| [자바스크립트/javascript] 객체 (Object) , 프로퍼티, 팩터리 패턴, 생성자 패턴, 프로토타입 패턴, 기생 생성자 패턴, 방탄 (0) | 2020.05.18 |
