JS 브 라 우 저 BOM 일반적인 조작 실례 상세 설명

본 고의 실례 는 JS 브 라 우 저 BOM 에서 흔히 볼 수 있 는 조작 을 설명 한다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
윈도우 사이즈
브 라 우 저 창의 크기 를 확인 할 수 있 는 세 가지 방법 이 있 습 니 다.
Internet Explorer,Chrome,Firefox,Opera 및 Safari:

 window.innerHeight -           
 
 window.innerWidth -           
 

인터넷 익스플로러 8,7,6,5:

 document.documentElement.clientHeight
 
 document.documentElement.clientWidth
 

혹은

 document.documentElement.clientHeight
 
 document.documentElement.clientWidth
 

실 용적 인 JavaScript 프로젝트(모든 브 라 우 저 포함):

 <script>
 var w=window.innerWidth
 || document.documentElement.clientWidth
 || document.body.clientWidth;
 var h=window.innerHeight
 || document.documentElement.clientHeight
 || document.body.clientHeight;
 x=document.getElementById("demo");
 x.innerHTML="   window  : " + w + ",   : " + h + "。"
 </script>
 

 기타 Window 방법

 window.open() -      
 
 window.close() -       
 
 window.moveTo() -       
 
 window.resizeTo() -          
 

Window Screen
window.screen 대상 은 작성 할 때 window 라 는 접 두 사 를 사용 하지 않 아 도 됩 니 다.

 screen.availWidth -        
 
 screen.availHeight -        
 

 창 화면 사용 가능 너비
screen.availWidth 속성 은 방문 자 화면의 너 비 를 되 돌려 줍 니 다.픽 셀 로 계산 하여 창 작업 표시 줄 과 같은 인터페이스 기능 을 제거 합 니 다.
윈도우 스크린 사용 가능 높이
screen.availHeight 속성 은 방문 자 화면의 높이 를 되 돌려 줍 니 다.픽 셀 로 계산 하여 창 작업 표시 줄 과 같은 인터페이스 기능 을 제거 합 니 다.
Window Location

   location.hostname    web      
 
   location.pathname              
 
   location.port    web       （80   443）
 
   location.protocol        web   （http://   https://）
 
   location.href           URL。
 
   location.pathname      URL     。
 
   location.assign()         。
 
 

Window History

   history.back() -              
 
   history.forward() -               
 

JavaScript Navigator
window.navigator 대상 은 방문 자 브 라 우 저 에 대한 정 보 를 포함 합 니 다.
경고!!!
navigator 대상 에서 온 정 보 는 오도 성 이 있 으 므 로 브 라 우 저 버 전 을 검사 하 는 데 사용 되 어 서 는 안 됩 니 다.이것 은:

navigator 데 이 터 는 브 라 우 저 사용자 가 변경 할 수 있 습 니 다.

일부 브 라 우 저 는 테스트 사이트 에 오 류 를 식별 할 수 있 습 니 다.

브 라 우 저 에서 브 라 우 저 보다 늦게 발 표 된 새 운영 체 제 를 보고 할 수 없습니다.

자 바스 크 립 트 창
자바 스 크 립 트 에 세 가지 메시지 상 자 를 만 들 수 있 습 니 다:경고 상자,확인 상자,알림 상자.
경고 상자
경고 상 자 는 사용자 가 어떤 정 보 를 얻 을 수 있 도록 하 는 데 자주 사용 된다.
경고 상자 가 나타 나 면 사용 자 는 확인 단 추 를 눌 러 야 계속 작업 할 수 있 습 니 다.
문법

window.alert("sometext");

window.alert()방법 은 window 대상 을 가지 고 가지 않 고 alert()방법 을 직접 사용 할 수 있 습 니 다.
확인 상자
확인 상 자 는 일반적으로 사용자 작업 을 받 아들 일 지 검증 하 는 데 사 용 됩 니 다.
카드 팝 업 을 확인 할 때 사용 자 는'확인'이나'취소'를 클릭 하여 사용자 의 조작 을 확인 할 수 있 습 니 다.
"확인"을 누 르 면 확인 상자 가 true 로 돌아 갑 니 다."취소"를 누 르 면 확인 상자 가 false 로 돌아 갑 니 다.
문법

window.confirm("sometext");

window.confirm()방법 은 window 대상 을 가지 고 있 지 않 고 confirm()방법 을 직접 사용 할 수 있 습 니 다.
프롬프트 상자
알림 상 자 는 사용자 가 페이지 에 들 어가 기 전에 어떤 값 을 입력 하 는 지 알려 주 는 데 자주 사 용 됩 니 다.
알림 상자 가 나타 나 면 사용 자 는 어떤 값 을 입력 한 다음 확인 이나 취소 단 추 를 눌 러 야 계속 조작 할 수 있 습 니 다.
사용자 가 확인 을 누 르 면 입력 한 값 으로 되 돌아 갑 니 다.사용자 가 취 소 를 누 르 면 반환 값 은 null 입 니 다.
문법

window.prompt("sometext","defaultvalue");

window.prompt()방법 은 window 대상 을 가지 고 있 지 않 고 prompt()방법 을 직접 사용 할 수 있 습 니 다.
줄 을 바꾸다
팝 업 창 은 역 슬 래 쉬+'n'()을 사용 하여 줄 바 꿈 을 설정 합 니 다.
JavaScript 타이머 이벤트
자바 스 크 립 트 를 사용 하면 함수 가 호출 된 후에 바로 실행 하 는 것 이 아니 라 설정 한 시간 간격 후에 코드 를 실행 할 수 있 습 니 다.우 리 는 그것 을 시간 계산 사건 이 라 고 부른다.
자바 Scritp 에서 시간 계산 이 벤트 를 사용 하 는 것 은 매우 쉽다.두 가지 관건 적 인 방법 은:

 setInterval() -                   。
 
 setTimeout() -                 
 

참고:setInterval()과 setTimeout()은 HTML DOM Window 대상 의 두 가지 방법 입 니 다.
setInterval()방법
setInterval()간격 으로 지정 한 밀리초 동안 지정 한 코드 를 끊임없이 실행 합 니 다.
문법

window.setInterval("javascript function",milliseconds);

window.setInterval()방법 은 window 접 두 사 를 사용 하지 않 고 함수 setInterval()을 직접 사용 할 수 있 습 니 다.
setInterval()의 첫 번 째 매개 변 수 는 함수(function)입 니 다.두 번 째 매개 변수 간격 밀리초
어떻게 집행 을 정지 합 니까?
clearInterval()방법 은 setInterval()방법 이 실행 되 는 함수 코드 를 정지 하 는 데 사 용 됩 니 다.
문법

window.clearInterval(intervalVariable)

window.clearInterval()방법 은 window 접 두 사 를 사용 하지 않 고 함수 clearInterval()을 직접 사용 할 수 있 습 니 다.
clearInterval()방법 을 사용 하려 면 시간 계산 방법 을 만 들 때 전역 변 수 를 사용 해 야 합 니 다.

myVar=setInterval("javascript function",milliseconds);

그리고 clearInterval()방법 으로 실행 을 중단 할 수 있 습 니 다.
setTimeout()방법
문법

 window.setTimeout("javascript   ",   );

setTimeout()방법 은 어떤 값 을 되 돌려 줍 니 다.위의 문장에서 값 은 t 라 는 변수 에 저 장 됩 니 다.이 setTimeout()을 취소 하고 싶다 면 이 변수 이름 으로 지정 할 수 있 습 니 다.
setTimeout()의 첫 번 째 매개 변 수 는 JavaScript 문 구 를 포함 한 문자열 입 니 다.이 문 구 는"alert('5 seconds!')"와 같 을 수 있 습 니 다.또는 함수 호출,예 를 들 어 alertMsg()".
두 번 째 매개 변 수 는 현재 부터 몇 밀리초 후에 첫 번 째 매개 변 수 를 실행 하 는 지 표시 합 니 다.
어떻게 집행 을 정지 합 니까?
clearTimeout()방법 은 setTimeout()방법의 함수 코드 를 실행 하지 않 는 데 사 용 됩 니 다.
문법

window.clearTimeout(timeoutVariable)

window.clearTimeout()방법 은 window 접 두 사 를 사용 하지 않 아 도 됩 니 다.
clearTimeout()방법 을 사용 하려 면 시간 초과 방법(setTimeout)을 만 드 는 데 전역 변 수 를 사용 해 야 합 니 다.

myVar=setTimeout("javascript function",milliseconds);

함수 가 실행 되 지 않 았 다 면,함수 코드 를 실행 하지 않 으 려 면 clearTimeout()방법 을 사용 할 수 있 습 니 다.
JavaScript Cookies
쿠키 는 웹 페이지 의 사용자 정 보 를 저장 하 는 데 사 용 됩 니 다.
쿠키 란 무엇 입 니까?
Cookies 는 컴퓨터 의 텍스트 파일 에 저 장 된 데이터 입 니 다.
웹 서버 가 브 라 우 저 에 웹 페이지 를 보 낼 때 연결 이 닫 힌 후 서버 에서 사용자 의 정 보 를 기록 하지 않 습 니 다.
Cookies 의 역할 은'클 라 이언 트 의 사용자 정 보 를 어떻게 기록 하 는가'를 해결 하 는 데 사 용 됩 니 다.

사용자 가 웹 페이지 를 방문 할 때 그의 이름 은 쿠키 에 기록 할 수 있 습 니 다.

사용자 가 다음 에 이 페이지 를 방문 할 때 쿠키 에서 사용자 의 방문 기록 을 읽 을 수 있 습 니 다.

Cookies 는 이름/값 으로 다음 과 같이 저 장 됩 니 다.
username=John Doe
브 라 우 저가 서버 에서 웹 페이지 를 요청 할 때 이 페이지 에 속 하 는 cookies 는 이 요청 에 추 가 됩 니 다.서버 는 이런 방식 으로 사용자 의 정 보 를 얻는다.
JavaScript 로 쿠키 만 들 기
JavaScript 는 document.cookie 속성 을 사용 하여 cookies 를 만 들 고 읽 으 며 삭제 할 수 있 습 니 다.
JavaScript 에서 쿠키 를 만 드 는 것 은 다음 과 같 습 니 다.

document.cookie="username=John Doe";

쿠키 에 만 료 시간(UTC 또는 GMT 시간)을 추가 할 수도 있 습 니 다.기본적으로 쿠키 는 브 라 우 저 를 닫 을 때 삭 제 됩 니 다.

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

path 매개 변 수 를 사용 하여 브 라 우 저 쿠키 의 경 로 를 알려 줄 수 있 습 니 다.기본적으로 쿠키 는 현재 페이지 에 속 합 니 다.

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

JavaScript 로 쿠키 읽 기
JavaScript 에 서 는 다음 코드 를 사용 하여 cookies 를 읽 을 수 있 습 니 다.

 var x = document.cookie;
 document.cookie               cookies，    ： cookie1=value; cookie2=value; cookie3=value;
 

JavaScript 를 사용 하여 쿠키 수정
JavaScript 에서 cookies 를 수정 하 는 것 은 cookies 를 만 드 는 것 과 유사 합 니 다.다음 과 같 습 니 다.

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

오래된 쿠키 가 덮어 집 니 다.
JavaScript 로 쿠키 삭제
쿠키 를 삭제 하 는 것 은 매우 간단 하 다.expires 인 자 를 이전 시간 으로 설정 하면 됩 니 다.다음 과 같이 Thu,01 Jan 1970 00:00:00 GMT 로 설정 합 니 다.

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

삭제 할 때 쿠키 의 값 을 지정 하지 않 아 도 됩 니 다.
쿠키 값 을 설정 하 는 함수
우선,방문 자의 이름 을 저장 하 는 함 수 를 만 듭 니 다.

 //cookie      cname，cookie     cvalue，     cookie       expires。
 function setCookie(cname,cvalue,exdays)
 {
 var d = new Date();
 d.setTime(d.getTime()+(exdays*24*60*60*1000));
 var expires = "expires="+d.toGMTString();
 document.cookie = cname + "=" + cvalue + "; " + expires;
 }
 

쿠키 값 가 져 오 는 함수
그 다음 에 저 희 는 함수 사용 자 를 만들어 서 지정 한 쿠키 의 값 을 되 돌려 줍 니 다.

 function getCookie(cname)
 {
 var name = cname + "=";//               cookie :cname + "="。
 var ca = document.cookie.split(';');//        document.cookie    ，               ca (ca = document.cookie.split(';'))。
 //   ca    (i=0;i<ca.length;i++)，           ，        (c=ca[i].trim())。
 for(var i=0; i<ca.length; i++)
  {
  var c = ca[i].trim();
  if (c.indexOf(name)==0) return c.substring(name.length,c.length);//     cookie(c.indexOf(name) == 0)，   cookie    (c.substring(name.length,c.length)。
  }
 return "";//       cookie,    ""。
 }
 

쿠키 값 검출 함수
마지막 으로 쿠키 가 만 들 어 졌 는 지 확인 하 는 함 수 를 만 들 수 있 습 니 다.
쿠키 가 설정 되 어 있 으 면 인사 메시지 가 표 시 됩 니 다.
쿠키 가 설정 되 어 있 지 않 으 면 방문 자의 이름 을 묻 는 팝 업 창 을 표시 하고 setCookie 함 수 를 사용 하여 방문 자의 이름 을 365 일 저장 합 니 다.

 function checkCookie()
 {
 var username=getCookie("username");
 if (username!="")
  {
  alert("Welcome again " + username);
  }
 else
  {
  username = prompt("Please enter your name:","");
  if (username!="" && username!=null)
   {
   setCookie("username",username,365);
   }
  }
 }
 

관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
더 많은 자 바스 크 립 트 관련 내용 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,,,,,,,,,
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.