JS에서 BOM과 관련된 응용 능력은 무엇입니까?-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS에서 BOM과 관련된 응용 능력은 무엇입니까?

亚连

Jun 08, 2018 am 11:32 AM

bomjs애플리케이션

JS는 세 부분으로 구성되어 있으며 그 중 하나는 브라우저를 작동하는 데 사용되는 BOM이라고 말한 적이 있습니다. 이번 글에서는 주로 BOM 애플리케이션을 소개하겠습니다. 관심 있는 친구들은 함께 살펴보세요

JS는 세 부분으로 구성되어 있다고 말한 적이 있는데, 그 중 하나가 브라우저를 작동하는 데 사용되는 BOM입니다. 이번 강의에서는 주로 BOM을 소개하겠습니다.

BOM 기본

먼저 BOM의 가장 기본적인 기능을 살펴보겠습니다. 창 열기 및 닫기:

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
 </head>
 <body>
  <input type="button" value="打开窗口" onclick="window.open(&#39;http://www.zhinengshe.com/&#39;);" />
 </body></html>

open 메소드는 창을 여는 데 사용되고 해당 close 메소드는 창을 닫는 데 사용됩니다. 창문. 여기에서 open 메소드를 사용하여 애플리케이션을 구현할 수 있습니다. 코드를 실행하세요.

그 전에 document.write에 대한 약간의 지식을 추가하고 싶습니다.

<!DOCTYPE HTML><html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
 </head>
 <body>
  <input type="button" value="write" onclick="document.write(&#39;abc&#39;)" />
 </body></html>

소스 코드를 열면 버튼을 클릭하면 전체 페이지의 소스 코드에 "abc"만 포함되어 있음을 알 수 있습니다. 즉, 이벤트에서 document.write를 사용하는 경우 해당 페이지는 먼저 완전히 지워집니다.

실행 중인 코드 사례에서는 document.write 메서드를 사용하는 것이 매우 적절하다는 것을 알 수 있습니다.

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <script>
  window.onload=function ()
  {
   var oTxt=document.getElementById(&#39;txt1&#39;);
   var oBtn=document.getElementById(&#39;btn1&#39;);
  
   oBtn.onclick=function ()
   {
    var oNewWin=window.open(&#39;about:blank&#39;, &#39;_blank&#39;);
  
    oNewWin.document.write(oTxt.value);
   };
  };
  </script>
 </head>
 <body>
  <textarea id="txt1" rows="10" cols="40"></textarea><br>
  <input id="btn1" type="button" value="运行" />
 </body></html>

여기서 _blank는 새 창(_self로 이 창에서 열기)을 나타내고 about:blank는 열린 창을 나타냅니다. 빈 창을 열고 document.write를 사용하여 새 창에 html을 쓴 다음 새 창에서 html 코드를 실행할 수 있습니다.

오픈에 대해 이야기한 후 클로즈에 관한 몇 가지 문제에 대해 이야기해 보겠습니다. 닫기의 사용은 매우 간단합니다. 창을 닫는 이벤트를 실행하려면 window.close를 사용하세요. 단, Firefox 브라우저에서는 사용자가 연 창을 닫는 것이 불가능합니다. open 메소드로 창을 연 경우에만 close 메소드로 닫을 수 있습니다.

열기 및 닫기 메서드에 대해 이야기한 후 일반적으로 사용되는 두 가지 속성인 window.nevigator.userAgent 및 window.location에 대해 이야기해 보겠습니다. 전자의 기능은 현재 브라우저의 버전 정보를 얻는 것이고, 후자의 기능은 현재 웹페이지의 주소(읽을 수 있을 뿐만 아니라 할당도 할 수 있고, 현재 웹의 URL을 얻는 것)입니다. 페이지는 위치를 수정하여 이동할 수 있습니다. 반환된 내용은 여기에 나열되지 않습니다.

크기와 좌표

여기에서는 크기와 좌표에 관한 JS의 내용을 논의합니다.

가장 먼저 언급해야 할 것은 시각적 영역의 크기에 대한 지식입니다. 보기 영역 크기는 얼마입니까? 실제로 클라이언트가 화면에서 볼 수 있는 웹페이지 부분의 크기입니다. 표시 가능한 영역의 크기는 창 크기에 따라 변경됩니다.

document.documentElement.clientWidth 및 document.documentElement.clientHeight를 통해 현재 페이지의 시각적 영역의 너비와 높이를 얻을 수 있습니다. document.documentElement.clientWidth和document.documentElement.clientHeight可以获取当前页面可视区的宽度和高度。

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <script>
  window.onload=function ()
  {
   var oBtn=document.getElementById(&#39;btn1&#39;);
   oBtn.onclick=function ()
   {
    alert(&#39;宽:&#39;+document.documentElement.clientWidth+&#39;高:&#39;+document.documentElement.clientHeight);
   };
  };
  </script>
 </head>
 <body>
  <input id="btn1" type="button" value="可视区大小" />
 </body></html>

效果如下：

此外针对可视区，还有一个属性叫scrollTop，也就是滚动距离，或者说是可视区到页面顶端的距离。

<!DOCTYPE HTML><html>
 <head>
 <meta charset="utf-8">
 <title>无标题文档</title>
 <script>
 document.onclick=function ()
 {
  //IE、FF
  //alert(document.documentElement.scrollTop);
 
  //chrome
  //alert(document.body.scrollTop);
 
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
 
  alert(scrollTop);
 };
 </script>
 </head>
 <body style="height:2000px;">
 </body></html>

效果如下：

//这里有图

值得注意的是document.documentElement.scrollTop仅仅在ie下兼容，在chrome下的写法则为document.body.scrollTop

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <style>
  #p1 {width:200px; height:150px; background:red; position:absolute; right:0; bottom:0;}
  body {height:2000px;}
  </style>
  <script>
  window.onscroll=function ()
  {
   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
   var op=document.getElementById(&#39;p1&#39;);  op.style.top=document.documentElement.clientHeight-op.offsetHeight+scrollTop+&#39;px&#39;;
  };
  </script>
 </head>
 <body>
 <p id="p1"></p>
 </body></html>

효과는 다음과 같습니다.

또한 뷰포트에는 스크롤 거리, 즉 뷰포트에서 페이지 상단까지의 거리인 scrollTop이라는 속성도 있습니다.

window.onscroll=window.onresize=function (){...}

효과는 다음과 같습니다:

//여기에 사진이 있습니다

document.documentElement.scrollTop은 IE에서만 호환되며 Chrome에서의 쓰기 규칙은 document.body .scrollTop이므로 || 메서드를 사용하여 호환성 문제를 처리합니다.

일반적인 방법 및 이벤트

여기에서는 요소의 고정 위치 지정을 달성하기 위해 고정 이외의 다른 방법을 사용하려고 합니다(고정은 ie6에서 호환되지 않습니다).

여기에 또 다른 그림을 그립니다.

검은색 선의 길이를 계산하면 오른쪽 아래의 p 블록을 고정하고 위치를 지정할 수 있음을 알 수 있습니다. 검은색 선의 길이는 시각적 영역의 높이에서 p 블록의 offsetHeight를 뺀 것과 정확히 같습니다.

rrreee

onscroll 기능이 계속 발생하고 발생할 때마다 호출되므로 p 블록에 약간의 지터가 있는 것을 볼 수 있습니다. 게다가 더 심각한 상황이 있습니다. 창 크기를 변경하면 p 블록이 따르지 않고 그대로 유지되므로 다른 이벤트인
window.onresize(페이지 크기가 변경될 때 트리거되는 이벤트)를 사용해야 합니다. ):
마지막으로 일반적으로 사용되는 몇 가지 시스템 대화 상자에 대해 이야기해 보겠습니다.

alert("content") 경고 상자, 반환 값 없음

confirm("question content") 선택 상자에서 확인 또는 취소하고 부울

prompt("prompt text", "default text")를 반환하는 옵션은 입력 텍스트 상자를 팝업하고 반환 값은 입력 텍스트 내용(문자열)입니다. input is null

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 🎜🎜관련 기사: 🎜🎜🎜JS에서 Map과 ForEach의 차이점은 무엇인가요? 🎜🎜🎜🎜vue에서 페이지 로딩 진행률 표시줄 구성 요소를 구현하는 방법🎜🎜

자바스크립트를 사용하여 특정 기간 내 매일 다른 가격을 얻는 방법

위 내용은 JS에서 BOM과 관련된 응용 능력은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스Apr 15, 2025 am 12:16 AM

Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지Apr 14, 2025 am 12:05 AM

C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.

JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

See all articles