communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Partie 2 Démarrage rapide - Bases de JS Nomenclature pratique - Modèle objet de navigateur, DOM

Partie 2 Démarrage rapide - Bases de JS Nomenclature pratique - Modèle objet de navigateur, DOM

php是最好的语言
Libérer： 2018-07-28 10:41:29
original
1240 Les gens l'ont consulté


BOM : encapsulez la fenêtre du navigateur dans un modèle objet auquel js peut accéder. L'objet le plus important est : 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中的属性演示



前进


Copier après la connexion

Deux minuteries :

Minuterie unique : setTimeout(), clearTimeout ()

Minuterie périodique ; 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>
Copier après la connexion

Petit exemple

<!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>
Copier après la connexion
<!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>
Copier après la connexion

DOM--Document Object Model

Document Object Model (DOM : Document Object Model) :

Document : document de balisage (HTML, XML). Caractéristiques : En plus des balises, c'est le contenu encapsulé par des balises

Objet : une entité qui encapsule des attributs et des comportements et peut être appelée directement.

Modèle : reflet de certaines caractéristiques communes que partagent tous les documents balisés.

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

DHTML : HTML dynamique, ce n'est pas un langage, c'est l'abréviation d'un complexe technologique multiple. DHTML = HTML + CSS + DOM + JS
Limites techniques :

HTML : Responsable de fournir les balises et d'encapsuler les données, afin de faciliter le fonctionnement des données dans les balises.

CSS : Responsable de fournir les attributs de style et de définir le style des données dans la balise.

DOM : responsable de l'encapsulation des documents balisés et de tout le contenu des documents dans des objets et de leur analyse. Davantage de propriétés et de comportements sont définis dans l'objet pour faciliter les opérations sur l'objet.

JS : Responsable de la fourniture du langage de programmation. --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, ...

Copier après la connexion

Articles connexes :

Partie 1 Démarrage rapide : Date, Mathématiques, Global dans la pratique de base js Objet

Partie 3 Démarrage rapide : Partage de code d'application pratique JS Basic

Vidéos associées :

Développement JS front-end 27 A tutoriel vidéo pratique classique tutoriel vidéo en ligne gratuit

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
-浏览器对象模型、DOM
source：php.cn
Article précédent：Partie 3 Démarrage rapide : partage de code d'application pratique JS Basic Article suivant：Partie 1 Démarrage rapide : objets Date, Math et Global dans la pratique de base de js
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
La méthode .map ne fonctionne pas dans l'application React La méthode .map de l'objet ne fonctionne pas et je ne peux pas interagir avec l'objet de l...
Depuis 2024-04-02 21:52:34
0
1
266
Comment empêcher le code Javascript de convertir automatiquement HSL en RVB J'ai ce code dans lequel j'attribue une couleur à un objet, puis j'utilise une condition p...
Depuis 2024-03-31 16:46:02
0
1
338
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal