Teil 2 Schnellstart – JS-Grundlagen Praktisches BOM – Browser-Objektmodell, DOM-js-Tutorial-php.cn

Teil 2 Schnellstart – JS-Grundlagen Praktisches BOM – Browser-Objektmodell, DOM

php是最好的语言

Freigeben： 2018-07-28 10:41:29

Original

1200 Leute haben es durchsucht

BOM: Kapseln Sie das Browserfenster in ein Objektmodell, damit js darauf zugreifen kann. Das wichtigste Objekt ist: window

<!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中的属性演示

前进

Nach dem Login kopieren

Zwei Timer:

Einmaliger Timer: setTimeout(), clearTimeout()

Periodischer Timer; 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>

Nach dem Login kopieren

Kleines Beispiel

<!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>

Nach dem Login kopieren

rrree

DOM --Document Object Model

Dokumentobjektmodell (DOM: Document Object Model):

Dokument: Markup-Dokument (HTML, XML). Features: Zusätzlich zu Tags ist es der durch Tags gekapselte Inhalt

Objekt: eine Entität, die Attribute und Verhaltensweisen kapselt und direkt aufgerufen werden kann.

Modell: Eine Widerspiegelung einiger gemeinsamer Merkmale, die alle getaggten Dokumente gemeinsam haben.

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

DHTML: Dynamisches HTML, es ist keine Sprache, es ist die Abkürzung für einen Komplex aus mehreren Technologien. DHTML = HTML + CSS + DOM + JS
Technische Grenzen:

HTML: Verantwortlich für die Bereitstellung von Tags und die Kapselung von Daten, um den Betrieb der Daten in den Tags zu erleichtern.

CSS: Verantwortlich für die Bereitstellung von Stilattributen und die Definition des Stils der Daten im Tag.

DOM: Verantwortlich für die Kapselung getaggter Dokumente und aller Inhalte in den Dokumenten in Objekte und deren Analyse. Im Objekt werden weitere Eigenschaften und Verhaltensweisen definiert, um Vorgänge am Objekt zu erleichtern.

JS: Verantwortlich für die Bereitstellung der Programmiersprache. --if, for, var, function, ...

<!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>

Nach dem Login kopieren

Verwandte Artikel:

Teil 1 Schnellstart – Datum, Mathematik und globale Objekte in der grundlegenden JS-Praxis

Teil 3 Schnellstart – JS Basic Practical Application Code Sharing

Das obige ist der detaillierte Inhalt vonTeil 2 Schnellstart – JS-Grundlagen Praktisches BOM – Browser-Objektmodell, DOM. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Teil 2 Schnellstart – JS-Grundlagen Praktisches BOM – Browser-Objektmodell, DOM

BOM: Kapseln Sie das Browserfenster in ein Objektmodell, damit js darauf zugreifen kann. Das wichtigste Objekt ist: window

window中的属性演示

Zwei Timer:

Einmaliger Timer: setTimeout(), clearTimeout()

Periodischer Timer; setInterval(), clearInterval()

Kleines Beispiel

DOM --Document Object Model

Dokumentobjektmodell (DOM: Document Object Model):

Dokument: Markup-Dokument (HTML, XML). Features: Zusätzlich zu Tags ist es der durch Tags gekapselte Inhalt

Objekt: eine Entität, die Attribute und Verhaltensweisen kapselt und direkt aufgerufen werden kann.

Modell: Eine Widerspiegelung einiger gemeinsamer Merkmale, die alle getaggten Dokumente gemeinsam haben.

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

DHTML: Dynamisches HTML, es ist keine Sprache, es ist die Abkürzung für einen Komplex aus mehreren Technologien. DHTML = HTML + CSS + DOM + JS Technische Grenzen:

HTML: Verantwortlich für die Bereitstellung von Tags und die Kapselung von Daten, um den Betrieb der Daten in den Tags zu erleichtern.

CSS: Verantwortlich für die Bereitstellung von Stilattributen und die Definition des Stils der Daten im Tag.

DOM: Verantwortlich für die Kapselung getaggter Dokumente und aller Inhalte in den Dokumenten in Objekte und deren Analyse. Im Objekt werden weitere Eigenschaften und Verhaltensweisen definiert, um Vorgänge am Objekt zu erleichtern.

JS: Verantwortlich für die Bereitstellung der Programmiersprache. --if, for, var, function, ...

DHTML: Dynamisches HTML, es ist keine Sprache, es ist die Abkürzung für einen Komplex aus mehreren Technologien. DHTML = HTML + CSS + DOM + JS
Technische Grenzen: