JS の BOM に関連するアプリケーションスキルとは何ですか?-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JS の BOM に関連するアプリケーションスキルとは何ですか?

亚连

Jun 08, 2018 am 11:32 AM

bomjs応用

JS は 3 つの部分で構成されており、そのうちの 1 つはブラウザを操作するために使用される BOM であると以前述べました。この記事では主に BOM アプリケーションについて紹介しますので、興味のある方はぜひ一緒にご覧ください

JS は 3 つの部分で構成されており、そのうちの 1 つはブラウザを操作するために使用される 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 コードを実行できます。

オープンについて話した後、クローズに関するいくつかの問題について話しましょう。 close の使用は非常に簡単です。window.close を使用してウィンドウを閉じるイベントを実行します。ただし、Firefox ブラウザでは、ユーザーが開いたウィンドウを閉じることはできません。open メソッドでウィンドウを開いた場合にのみ、close メソッドでウィンドウを閉じることができます。

open メソッドと close メソッドについて説明した後、よく使用される 2 つのプロパティ、window.nevigator.userAgent と window.location について説明します。前者の機能は現在のブラウザのバージョン情報を取得することであり、後者の機能は現在の Web ページのアドレス (読み取りだけでなく割り当ても可能) を取得することであり、現在の Web ページの URL場所を変更することでページに移動できます)。返されたコンテンツはここにはリストされません。

サイズと座標

ここでは、サイズと座標に関するJSの内容について説明します。

最初に言及すべきことは、視覚領域のサイズについての知識です。表示領域のサイズはどれくらいですか?実際には、これはクライアントが画面上で見ることができる Web ページの部分のサイズです。表示可能な領域のサイズはウィンドウのサイズに応じて変化します。

現在のページの視覚領域の幅と高さは、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 なので、 || メソッドを使用して互換性の問題を処理します。

一般的なメソッドとイベント

ここでは、要素の固定配置を実現するために、fixed 以外の別のメソッドを使用してみます (fixed は ie6 では互換性がありません)。

ここで別の図を描きます:

黒い線の長さを計算する限り、右下の p ブロックを固定して配置できることがわかります。黒い線の長さは、視覚領域の高さから p ブロックの offsetHeight を引いたものと正確に等しくなります。

rrreee

P ブロックにわずかなジッターがあることがわかります。これは、onscroll 関数が発生し続け、発生するたびに呼び出されるからです。さらに、より深刻な状況があります。ウィンドウサイズを変更すると、p ブロックは追従せず、所定の位置に留まるため、別のイベント -
window.onresize (ページサイズ変更イベント時にトリガーされます) を使用する必要があります。 ):
最後に、よく使用されるいくつかのシステムダイアログボックスについて説明します:

alert("content") 警告ボックス、戻り値なし

confirm("question content") 選択ボックスは、確認またはキャンセルするオプションで、ブール値

prompt("プロンプトテキスト", "デフォルトテキスト") を返すと、入力テキストボックスがポップアップ表示され、戻り値は入力テキストの内容 (文字列) です。 input is null

上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。 🎜🎜関連記事: 🎜🎜🎜JS の Map と ForEach の違いは何ですか? 🎜🎜🎜🎜vueでページ読み込みプログレスバーコンポーネントを実装する方法🎜🎜

JavaScriptを使用して日付範囲内の毎日の異なる価格を取得する方法

以上がJS の BOM に関連するアプリケーションスキルとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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のアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

See all articles