Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hauptteil

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

php是最好的语言
Freigeben： 2018-07-28 10:41:29
Original
1204 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

Ähnliche Videos:

27 Klassiker für die Front-End-JS-Entwicklung Praktisches Video-Tutorial – kostenloses Online-Video-Tutorial

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!

Verwandte Etiketten：
-浏览器对象模型、DOM
Quelle：php.cn
Vorheriger Artikel：Teil 3 Schnellstart – Grundlegende praktische Codefreigabe für JS-Anwendungen Nächster Artikel：Teil 1 Schnellstart – Datum, Mathematik und globale Objekte in der grundlegenden JS-Praxis
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Die Methode .map funktioniert in der Anwendung React nicht Die .map-Methode des Objekts funktioniert nicht und ich kann nicht mit dem Objekt der von ...
Aus 2024-04-02 21:52:34
0
1
266
So verhindern Sie, dass Javascript-Code HSL automatisch in RGB konvertiert Ich habe diesen Code, in dem ich einem Objekt eine Farbe zuweise und dann mithilfe einer B...
Aus 2024-03-31 16:46:02
0
1
338
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage