パート 2 クイックスタート - JS の基礎実践的な BOM - ブラウザオブジェクトモデル、DOM-jsチュートリアル-php.cn

<!DOCTYPE html>
<html>
    <head>
        <title>BOM--浏览器对象模型</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function resizeWindow(){
                window.resizeTo(500, 300)
            }
        </script>
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    </head>
    <body>
        <pre class="brush:php;toolbar:false">
  BOM:把浏览器窗口封装成对象模型，供js进行访问。最重要的一个对象是:window

window中的属性演示

前进

ログイン後にコピー

2 つのタイマー:

1 回限りのタイマー: setTimeout()、clearTimeout()

定期タイマー; setInterval()、clearInterval()

<!DOCTYPE html>
<html>
    <head>
        <title>BOM--浏览器对象模型</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    </head>
    <body>
        <h3>window中的方法演示</h3>
        <script type="text/javascript">
            function fun1(){
                window.close();//关闭窗口
            }
            
            function fun2(){
                var boo = window.confirm("是否真的要做某事?");//消息确认
                if (boo) {
                    alert("做某事....");
                }
                else {
                    alert("不做某事....");
                }
            }
            
            
            function fun3(){
                window.moveBy(10, 10);//经测试，当前浏览器，不支持
            }
        </script>
        <input type="button" value="window对象中的close()方法演示" onclick="fun1();">
        <br/>
        <input type="button" value="window对象中的confirm()方法演示" onclick="fun2();">
        <br/>
        <input type="button" value="window对象中的moveBy()方法演示" onclick="fun3();">
        <br/>
        <br/>
        <br/>
        <!--///////////////以下演示定时器////////////////// -->
        <!--这个定时器是一次性的，setTimeout(),clearTimeout()-->
        <input type="button" value="启动定时器1" onclick="start1();">
        <br/>
        <input type="button" value="关闭定时器1" onclick="stop1();">
        <br/>
        <script type="text/javascript">
            var t1;//全局变量
            function start1(){
                t1 = window.setTimeout("aa()", 1000);//返回值为当前闭定时器的id
            }
            
            function aa(){
                alert("aaa.....");
            }
            
            function stop1(){
                t1 = window.clearTimeout(t1);//指定所关闭定时器的id
            }
        </script>
		
		 <!--这个定时器是周期性的，setInterval(),clearInterval()-->
    <input type="button" value="启动定时器2" onclick="start2();"> <br/>
    <input type="button" value="关闭定时器2" onclick="stop2();"> <br/>
	<script type="text/javascript">
	    var t2;
			function start2(){
				//t2=window.setInterval("bb()",2000);
				t2=setInterval("bb()",2000);//返回值为当前闭定时器的id
			}
	 	function bb(){
			//window.alert("bbbbbbb.....");
			alert("bbbbbbb.....");
		}
		
		function stop2(){
			//window.clearInterval(t2); //指定所关闭定时器的id
			clearInterval(t2); //指定所关闭定时器的id
		}
    </script>
	<hr/>
	<!--打开新窗口: open() -->
	 <input type="button" value="新开一个窗口" onclick="demo();"> <br/>
	<script type="text/javascript">
		function demo(){
			//window.open(URL,name,features,replace)
			window.open("ad.html","ad","height=300,width=300,status=no,location=no");
		}
	
	</script>
	
	<input type="button" onclick="disp_prompt()" value="Display a prompt box" /> <br/>

	<script type="text/javascript">
		   function disp_prompt(){
			  var name=prompt("Please enter your name","")
			  if (name!=null && name!="")
			    {
			    document.write("Hello " + name + "!")
			    }
		   }
			 
     </script>


	<input type="button" onclick="disp_scrollBy()" value="Display scrollBy" /> <br/>
	<script type="text/javascript">
		   function disp_scrollBy(){
		   	   scrollBy(10, 10);//模拟用户点击滚动条动作
		   }
     </script>
	<h2>为了演示滚动效果</h2>
	<h2>为了演示滚动效果</h2>
	<h2>为了演示滚动效果</h2>
	<h2>为了演示滚动效果</h2>
	<h2>为了演示滚动效果</h2>
	<h2>为了演示滚动效果</h2>
	<h2>为了演示滚动效果</h2>
	<h2>为了演示滚动效果</h2>
    </body>
</html>

ログイン後にコピー

小さな例

<!DOCTYPE html>
<html>
  <head>
    <title>ad.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
   <h2>一条广告消息</h2>
		<h2>一条广告消息</h2>
		<h2>一条广告消息</h2>
		<form>
		   Name:<input type="text" name="name">
		   <input type="submit" value="注册">
		</form>
		
		<script type="text/javascript">
			//3秒后自动关闭窗口
			setTimeout("window.close();",3000);
		</script>
  </body>
</html>

ログイン後にコピー

<!DOCTYPE html>
<html>
  <head>
  	<meta http-equiv="Content-Type"  content="text/html; charset=UTF-8">
    <title>BOM---浏览器对象模型</title>
	<script>
		function resizeWindow()
  	{
 		 window.resizeTo(500,300)
  	}
	</script>

  </head>
  
  <body>
   <h3>history演示中的第二个页面</h3>
   <script>
   	 function fun1(){
	 	//"window."可以省略
		//window.history.back(); //go(-1)
	  	history.back();//go(-1)
	  }
	
   </script>
   
   <a href="#" onclick="fun1 ();">后退</a>
  </body>
</html>

ログイン後にコピー

DOM -- ドキュメントオブジェクトモデル

ドキュメントオブジェクトモデル (DOM: ドキュメントオブジェクトモデル):

ドキュメント: マークアップドキュメント (HTML、XML)。特徴: タグに加えて、タグによってカプセル化されたコンテンツです

オブジェクト: 属性と動作をカプセル化し、直接呼び出すことができるエンティティ。

モデル: すべてのタグ付けされたドキュメントが共有するいくつかの共通の特性を反映しています。

DOM = BOM (Browser Object Model) + DOM (Document Object Model)

DHTML: 動的 HTML。これは言語ではなく、複数のテクノロジー複合体の略称です。 DHTML = HTML + CSS + DOM + JS
技術境界:

HTML: タグ内のデータの操作を容易にするために、タグの提供とデータのカプセル化を担当します。

CSS: スタイル属性を提供し、タグ内のデータのスタイルを定義します。

DOM: タグ付けされたドキュメントとドキュメント内のすべてのコンテンツをオブジェクトにカプセル化し、それらを解析する責任を負います。オブジェクトに対する操作を容易にするために、オブジェクトにはさらに多くのプロパティと動作が定義されています。

JS: プログラミング言語の提供を担当します。 --if, for, var, function, ...

<!DOCTYPE html>
<html>
    <head>
        <title>DOM--文档对象模型</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
        </script>
        <style type="text/css">
            .d {
                background-color: #00ff00;
                width: 200px;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <pre class="brush:php;toolbar:false">
  文档对象模型(DOM: Document Object Model):
  文档:标记型文档(HTML,XML)。特征:里面除了标签，就是标签封装的内容
  对象:封装了属性和行为的实体，可以被直接调用。
  模型:所有标记型文档都具备一些共有特征的一个体现。 
  
  DOM = BOM(浏览器对象模型) + DOM(文档对象模型)

  DHTML：动态HTML，它不是一门语言，是多项技术综合体的简称。
  DHTML = HTML + CSS + DOM + JS
  技术边界:
  HTML: 负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作。
  CSS: 负责提供样式属性，对标签中的数据进行样式的定义。
  DOM: 负责将标记型文档以及文档中的所有内容进行封装成对象，解析。
               在对象中定义了更多的属性和行为，便于对对象进行操作。
  JS: 负责提供程序设计语言。--if, for, var , function, ...

ログイン後にコピー

パート 1 クイックスタート—js の基礎演習での Date、Math、Global オブジェクト

パート 3 クイックスタート—js の基礎演習アプリケーションコードの共有

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7555

CakePHP チュートリアル

1384

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？ Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:17 PM

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

See all articles

パート 2 クイックスタート - JS の基礎実践的な BOM - ブラウザオブジェクトモデル、DOM

BOM: js がアクセスできるように、ブラウザーウィンドウをオブジェクトモデルにカプセル化します。最も重要なオブジェクトは次のとおりです: window

window中的属性演示

2 つのタイマー:

1 回限りのタイマー: setTimeout()、clearTimeout()

定期タイマー; setInterval()、clearInterval()

小さな例

DOM -- ドキュメントオブジェクトモデル

ドキュメントオブジェクトモデル (DOM: ドキュメントオブジェクトモデル):

ドキュメント: マークアップドキュメント (HTML、XML)。特徴: タグに加えて、タグによってカプセル化されたコンテンツです

オブジェクト: 属性と動作をカプセル化し、直接呼び出すことができるエンティティ。

モデル: すべてのタグ付けされたドキュメントが共有するいくつかの共通の特性を反映しています。

DOM = BOM (Browser Object Model) + DOM (Document Object Model)

DHTML: 動的 HTML。これは言語ではなく、複数のテクノロジー複合体の略称です。 DHTML = HTML + CSS + DOM + JS
技術境界:

HTML: タグ内のデータの操作を容易にするために、タグの提供とデータのカプセル化を担当します。

CSS: スタイル属性を提供し、タグ内のデータのスタイルを定義します。

JS: プログラミング言語の提供を担当します。 --if, for, var, function, ...

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

パート 2 クイック スタート - JS の基礎 実践的な BOM - ブラウザ オブジェクト モデル、DOM

BOM: js がアクセスできるように、ブラウザー ウィンドウをオブジェクト モデルにカプセル化します。最も重要なオブジェクトは次のとおりです: window

window中的属性演示

2 つのタイマー:

1 回限りのタイマー: setTimeout()、clearTimeout()

定期タイマー; setInterval()、clearInterval()

小さな例

DOM -- ドキュメント オブジェクト モデル

ドキュメント オブジェクト モデル (DOM: ドキュメント オブジェクト モデル):

ドキュメント: マークアップ ドキュメント (HTML、XML)。特徴: タグに加えて、タグによってカプセル化されたコンテンツです

オブジェクト: 属性と動作をカプセル化し、直接呼び出すことができるエンティティ。

モデル: すべてのタグ付けされたドキュメントが共有するいくつかの共通の特性を反映しています。

DOM = BOM (Browser Object Model) + DOM (Document Object Model)

DHTML: 動的 HTML。これは言語ではなく、複数のテクノロジー複合体の略称です。 DHTML = HTML + CSS + DOM + JS技術境界:

HTML: タグ内のデータの操作を容易にするために、タグの提供とデータのカプセル化を担当します。

CSS: スタイル属性を提供し、タグ内のデータのスタイルを定義します。

JS: プログラミング言語の提供を担当します。 --if, for, var, function, ...

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

パート 2 クイックスタート - JS の基礎実践的な BOM - ブラウザオブジェクトモデル、DOM

BOM: js がアクセスできるように、ブラウザーウィンドウをオブジェクトモデルにカプセル化します。最も重要なオブジェクトは次のとおりです: window

DOM -- ドキュメントオブジェクトモデル

ドキュメントオブジェクトモデル (DOM: ドキュメントオブジェクトモデル):

ドキュメント: マークアップドキュメント (HTML、XML)。特徴: タグに加えて、タグによってカプセル化されたコンテンツです

DHTML: 動的 HTML。これは言語ではなく、複数のテクノロジー複合体の略称です。 DHTML = HTML + CSS + DOM + JS
技術境界: