小強のHTML 5モバイル開発の道(32)-JavaScriptレビュー7

5169 ワード

JavaScript

BOMモデルbrower object model(ブラウザオブジェクトモデル)は、ブラウザに内蔵されているオブジェクトの一部でブラウザ自体を操作できます.
DOMはページを操作するためのもので、BOMはブラウザ自体を操作するためのものです.
BOMには仕様がありませんが、ほとんどのブラウザでは以下のオブジェクトがサポートされています.
1、Windowオブジェクト:ウィンドウ全体を表す
(1)openメソッド:(名前、プロパティ、高さ幅、ツールバー、スクロールバー)
(2)settimeoutメソッド:settimeout(fn,ミリ秒);//最初のパラメータは関数名でなければなりません(カッコは使用できません)

<html>
	<head>
		<script>
			function f1(){
			//win          
			        var win = window.open('day05_03','wi_1',
					'width=400,height=400');
			    	setTimeout(function(){
					win.close();
			 	}, 5000);		
			}
		</script>
	</head>
	<body>
		<input type="button" value="click me" onclick="f1();"/>
	</body>
</html>

(3)setIntervalメソッド
var taskId=setInterval(fn,ミリ秒);//指定した間隔の後に関数を実行
(4)clearIntervalメソッド
clearInterval(taskId);//setIntervalのタスクのキャンセル

<html>
	<head>
		<style>
			#d1{
				width:80px;
				height:80px;
				background-color:blue;
				position:relative;
			}
		</style>
		<script src="myjs.js"></script>
		<script>
			function f2(){
				var v1 = parseInt($('d1').style.left);
				$('d1').style.left = v1 + 50 + 'px';
			}
			function f1(){
				var taskId = setInterval(f2, 500);
				setTimeout(function(){
					clearInterval(taskId);
				},5000)
			}
		</script>
	</head>
	<body>
		<div id="d1" style="left:10px;"></div>
		<input type="button" value="click me"
		onclick="f1();"/>
	</body>
</html>

(5)alert()メソッド警告ダイアログボックスをポップアップ
(6)confirm()メソッド
var flag = confirm(string);//stringはプロンプト情報、flagはtrueまたはfalseを返す
(7)promptメソッド
var info = prompt(string)

<html>
	<head>
		<script>
			function f3(){
				var flag = confirm('     ？');
				alert(flag);
			}
			function f4(){
				var info = prompt('      ');
				alert('        ：' + info);
			}
		</script>
	</head>
	<body>
		<input type="button" value="click me"
		onclick="f4();"/>
	</body>
</html>

、Documentオブジェクト:ドキュメント全体を表すルートgetElementById(id);
createElement(tagName);
write(string); 指定された位置に関連情報を出力

<html>
 	<!-- document   -->
	<head></head>
	<body style="font-size:30px;">
		    helloword<br/>
		<script>
			for(i=0; i<100; i++){
				document.write('hello world<br/>');
			}
		</script>
	</body>
</html>

,Locationオブジェクト:ブラウザのアドレスバーに関する情報をカプセル化
hrefプロパティ:ロードするページを指定する
reloadメソッド:現在のページを再ロードし、リフレッシュに相当

<html>
	<!-- location   -->
	<head></head>
	<body>
		<input type="button" 
		value="         " onclick="location.href = 'day05_04.html';"/><br/>
		<input type="button"
		value="      " onclick="location.reload();"/>
	</body>
</html>

,Historyオブジェクト:ブラウザがアクセスしたページに関する情報をカプセル化
back():後退
forward():進む
go(パラメータ):正数前進,負数後退

<html>
 	<!-- history  	 -->
	<head></head>
	<body>
		<input type="button"
		value="     " onclick="history.back();"/>
		<input type="button"
		value="     " onclick="history.forward();"/>
		<input type="button"
		value="     "  onclick="history.go(-1);"/>
	</body>
</html>

,255,Navigatorオブジェクト:ブラウザに関する情報がカプセル化されています(例:タイプ、バージョン)

<html>
	<!--navigator  -->
	<head></head>
	<body>
		               ：<br/>
		<script>
		var info;
		//for in  ：         
			for(propName in navigator){  //propName     
		//  navigator         propName   
				info += propName + ';' +navigator[propName] + '<br/>';
			}
			document.write(info);  //       
		</script>
	</body>
</html>

<html>
	<!--       -->
	<head>
		<script>
			function f1(){
				if((navigator.userAgent).indexOf('Firefox')>0){
					alert("      Firefox");
				}else if(navigator.userAgent.indexOf('MSIE')>0){
					alert("      IE");
				}else{
					alert("     ");
				}
			}	
		</script>
	</head>
	<body>
		<input type="button"
		value="          " onclick="f1();"/>
	</body>
</html>

,Screenオブジェクト:ブラウザが存在する画面に関する情報

<html>
	<head>
		<script>
			function f2(){
				alert(screen.width + ' ' +
				screen.height);
			}	
		</script>
	</head>
	<body>
		<input type="button"
		value="  screen    " onclick="f2();"/>
	</body>
</html>

原生jsは画像のプレビューとアップロードを実現します

html 5---オフラインアプリケーション