string(11) "3.239.76.25"

2022年04月27日

6.[JS] 画面情報&操作

JavaScriptの画面情報の取得/画面操作は、windowオブジェクトのプロパティやメソッドとして操作します。

尚、下記のプロパティやメソッドはwindow.xxxが正式ですが、window は省略できるので省略表示としています。

画面操作には、下記の様な物があります。

1.画面サイズの取得

2.URLデータの取得

3.リロードやURLオープン

4.ダイアログメッセージの表示

警告メッセージ

確認ダイアログ

入力ダイアログ

 

1.画面サイズの取得

画面サイズには【幅】と【高さ】に下記のプロパティがあります。

[幅]

プロパティ

説明

screen.width [モニタ幅]をピクセル単位で返します。固定値になります。
outerWidth [ブラウザの表示幅]をピクセル単位で返します。
innerWidth [コンテンツの表示幅]をピクセル単位で返します。

縦のスクロールバーの幅も含みますが、ブラウザの検証領域は含みません。

スマホサイズか否かを判断するのに利用します。

if (innerWidth < 767 ){xxxx}

[高さ]

プロパティ

説明

screen.height [モニタ高さ]をピクセル単位で返します。固定値になります。
outerHeight [ブラウザの表示高さ]をピクセル単位で返します。
innerHeight [コンテンツの表示高さ]をピクセル単位で返します。

横のスクロールバーの高さも含みますが、タブ等のブラウザメニュ領域は含みません。

■画面サイズの取得事例

マウスでウィンドウサイズを変更して下さい。

下記の数値が変化します。

■screen.width(モニタ幅):  
■outerWidth(ブラウザ幅):  
■innerWidth(コンテンツ幅):  

 

■screen.height(モニタ高さ): 
■outerHeight(ブラウザ高さ):  
■innerHeight(コンテンツ高さ):  

このプログラムは下記から構成されています。

<div>■screen.width(モニタ幅): <span class='screen_width' style='color:red'> </span></div>
<div>■outerWidth(ブラウザ幅): <span class='window_outerWidth' style='color:red'> </span></div>
<div>■innerWidth(コンテンツ幅): <span class='window_innerWidth' style='color:red'> </span></div> 
<br>
<div>■screen.height(モニタ高さ):<span class='screen_height' style='color:red'> </span></div>
<div>■outerHeight(ブラウザ高さ): <span class='window_outerHeight' style='color:red'> </span></div>
<div>■innerHeight(コンテンツ高さ): <span class='window_innerHeight' style='color:red'> </span></div>
<script>
   $(function(){
      $('.screen_width').text(screen.width);       // 初期サイズの表示
      $('.window_outerWidth').text(outerWidth); // 同上
      $('.window_innerWidth').text(innerWidth);  // 同上
      $('.screen_height').text(screen.height);      // 同上
      $('.window_outerHeight').text(outerHeight);// 同上
      $('.window_innerHeight').text(innerHeight);// 同上
      $(window).resize(function(){
         $('.screen_width').text(screen.width);
         $('.window_outerWidth').text(outerWidth);
         $('.window_innerWidth').text(innerWidth);
         $('.screen_height').text(screen.height);
         $('.window_outerHeight').text(outerHeight);
         $('.window_innerHeight').text(innerHeight);
      });
   });
</script>

■1~7行目

HTMLです。

■10~15行目

画面が読み込まれた段階で表示される初期値です。

■16~23行目

マウス操作で画面サイズが変更された時に処理されます。

 メモ

一般的に

幅 :screen.width  > outerWidth  > innerWidth

高さ:screen.height > outerHeight > innerHeight

になります。

 

2.URLデータの取得

URLデータの取得には下記のプロパティがあります。

プロパティ

説明

location.href 現在のページの[URL]を返します。
location.protocol 現在のページの[プロトコール名]を返します。
location.host 現在のページの[ドメイン名]を返します。
location.pathname 現在のページの[パス名]を返します。

ページの判断に利用します。

■URLデータの取得事例

[データ取得]ボタンを挿入するとデータを取得して表示します。

■location.href( URL ):  
■location.protocol(プロトコール名):  
■location.host(ドメイン名):  
■location.pathname(パス名): 


このプログラムは下記から構成されています。

<div>■location.href( URL ): <span class='location_href' style='color:red'> </span></div>
<div>■location.protocol(プロトコール名): <span class='location_protocol' style='color:red'> </span></div>
<div>■location.host(ドメイン名): <span class='location_host' style='color:red'> </span></div> 
<div>■location.pathname(パス名):<span class='location_pathname' style='color:red'> </span></div>
<button type='button' class='get_button' style='margin-top:10px;'>データ取得</button>
<script>
	$(function(){
		$('.get_button').click(function(){
			$('.location_href').text(location.href);                // URL取得
			$('.location_protocol').text(location.protocol);     // プロトコール名取得
			$('.location_host').text(location.host);                // ドメイン名取得
			$('.location_pathname').text(location.pathname); // パス名取得
		});
	});
</script>

■9~12行目

URL等を取得しています。

 ページの判定方法

このサイトは

・TOPページ:https://hnw.t-spirits.com/school/

・他のページ:https://hnw.t-spirits.com/school/××/〇〇

から構成されています。

よって

location.pathnameは /××/〇〇 が返ります。

よってこれを '/' でsplit()すると[0]は空白、[1]は空白かxx、[2]は○○になるので、

・配列の1番目が空白ならばTOPページ

・配列の1番目がxxならばTOPページ以外

と判断できます。

$(function(){
  if( location.pathname.split('/')[1] ){ return; }         //TOPページ以外は終了
  if( location.pathname.split('/')[1] == 'php'){//処理} // phpページの処理
});

 

3.リロードやURLオープン

指定したURLを表示したり、現在の画面をリロードする下記関数があります。

関数

説明

open() 引数で指定したURLを[新しいタブ]で開きます。
location.replace() 引数で指定したURLを[現在のタブ]に新規で開きます。

新規で開くので、ブラウザの戻るボタンで前の画面に戻れません。

location.href Url 指定したURLを[現在のタブ]に上書きします。

現在のタブに上書きするので、ブラウザの戻るボタンで前の画面に戻ります。

location.reload() 現在のページをリロードします。

■URLリンクの事例

下記はHTMLの中にある target属性 の値でどのタブにURLを表示するかを判断した事例です。

・左のBOXをクリックすると『新しいタブ』に、このサイトのホームページを表示します。

・右のBOXをクリックすると『現在のタブ』に、このサイトのホームページを上書きします。

上書きなので、ブラウザの戻るボタンで前の画面に戻ります。

target属性 あり

mirai1

target属性 なし

mirai1

このプログラムは下記から構成されています。

<div style='display:flex;'>
	<div class='url_box1' style='cursor:pointer ; border:1px black solid ; padding:10px ;width:300px;'> 
		<p style='text-align:center;'>target属性 あり</p>
		<a href = 'https://hnw.t-spirits.com/school' target = '_blank' ></a> 
		<img style='width:250px;' src='https://hnw.t-spirits.com/school/wp-content/uploads/2021/06/mirai.png' alt='mirai1'>
	</div>
	<div class = 'url_box2' style='cursor:pointer ; border:1px #000 solid ; padding:10px ;width:300px;margin-left:10px;' > 
		<p style='text-align:center;'>target属性 なし</p>
		<a href = 'https://hnw.t-spirits.com/school'></a> 
		<img style='width:250px;' src='https://hnw.t-spirits.com/school/wp-content/uploads/2021/06/mirai.png' alt='mirai1'>
	</div>
</div>
<script>
	$(function(){ 
		$('.url_box1 , .url_box2').click(function(){ 
			var Url = $(this).find('a').attr('href'); 
			var Target= $(this).find('a').attr('target');
			if(Target == '_blank'){window.open( Url );} 
			else{location.href= Url;}
		});
	});
</script>

■4行目と9行目

<a>タグの中にtarget属性href属性が設定されています。

■16~17行目

jQueryで<a>タグの中のtarget属性href属性の値を取得しています。

上記事例では.attr()で取得していますが、これを.prop()に変えても問題ありません。

■18行~19行目

target属性'_blank'ならば、window.open()で[新しいタブ]に表示し、空白ならlocation.hrefで[現在のタブ]に履歴付きで表示しています。

 メモ

上記の事例はBOXの中の何処をクリックしても動作する様に.find('a')でターゲット属性の値を取得しています。

 

4.ダイアログメッセージの表示

警告メッセージ

関数

説明

alert( 'メッセージ' ) [OK]ボタンだけの警告メッセージを表示します。

事例

・サイズを選択しないで[購入]ボタンを挿入すると 警告メッセージ が表示されます。

サイズを選択して下さい


このプログラムは下記から構成されています。

<div>サイズを選択して下さい</div>
<select name='option_name01'>
	<option value="#NONE#" selected='selected'>選択してください</option>
	<option value='145'>145</option>
	<option value='150'>150</option>
	<option value='155'>155</option>
</select>
<button type='button' class='button01' style='margin-top:10px;'>購入</button>
<div style='color:red;' class='message01'></div>
<script>
	$(function(){
		$('.button01').click(function(){
			var my_select = $('select[name=option_name01]').val();
				if(my_select == '#NONE#'){
					alert( 'オプションが選択されてません' );   
					$('.message01').text('');			
				}
				else{
					$('.message01').text(my_select + 'で購入処理を実行します');
				}
		});
	});
</script>

■13行目

セレクトされた値を取得しています。

■14~20行目

セレクト値が '#NONE#'の場合は、警告メッセージを表示して、それ以外の場合は購入メッセージを出力しています。

 メモ

正式なフォーム操作は PHPのセレクトフォーム を参照して下さい。

 

■確認ダイアログ

関数

説明

confirm( 'メッセージ' ) [OK]、[キャンセル]の確認ダイアログを表示します。

[返り値]

OKの場合:trueを返します

キャンセルの場合:falseが返されます

事例

・サイズを選択しないで購入ボタンを挿入すると 警告メッセージ が表示されます。

・サイズを指定して購入ボタンを挿入すると 確認ダイアログ を表示します。

そのまま購入するかキャンセルするかの選択ができます。

サイズを選択して下さい


このプログラムは下記から構成されています。

<div>サイズを選択して下さい</div>
<select name='option_name02'>
	<option value="#NONE#" selected='selected'>選択してください</option>
	<option value='145'>145</option>
	<option value='150'>150</option>
	<option value='155'>155</option>
</select>
<button type='button' class='button02' style='margin-top:10px;'>購入</button>
<div style='color:red;' class='message02'></div>
<script>
	$(function(){
		$('.button02').click(function(){
			var my_select = $('select[name=option_name02]').val();
				if(my_select == '#NONE#'){
					alert( 'オプションが選択されてません' );   
					$('.message02').text('');			
				}
				else{
					flg = confirm( 'サイズは' + my_select + 'で宜しいですか?' );
					if(flg){$('.message02').text(my_select + 'で購入処理を実行します');}
					else{$('.message02').text('購入処理を中断します');}
				}
		});
	});
</script>

■19行目

確認ダイアログを出して、返り値を貰っています。

■20~21行目

返り値がtrueの場合は購入処理、faiseの場合はキャンセルしています。

 メモ

正式なフォーム操作は PHPのセレクトフォーム を参照して下さい。

 

■入力ダイアログ

関数

説明

var data = prompt( 'メッセージ' , '入力BOXの初期値' ) [入力データ]と[OK]、[キャンセル]の入力ダイアログを表示します。

[返り値]

OKの場合:dataに入力された値を返します。

キャンセルの場合:dataは NULL になります。

事例

この利用例はイベント.change(func)を参照して下さい。

[郵便番号]を指定し、[番地入力]にカーソルが入ると入力ダイアログが表示されます。

 

関数一覧
  • 1.JavaScript/jQueryとは
  • 2.[JS] 変数規則と文字連結
  • 3.[JS] if文
  • 4.[JS] 配列操作
  • 5.[JS] 文字列操作
  • 6.[JS] 画面情報&操作
  • 7.[JS] Timer処理
  • console.log()
  • for
  • for in
  • for of
  • indexOf()
  • join()
  • length
  • map()
  • match()
  • Object.keys()
  • Object.values()
  • parseInt()
  • pop()
  • push()
  • replace()
  • shift()
  • slice()
  • split()
  • toString()
  • unshift()
  • 1.jQueryの導入と記述の基本
  • 2.jQueryの機能追加
  • 3.jQuery文法
  • 4.階層構造の要素セレクトと操作
  • 5.要素サイズ取得メソッド
  • animate()
  • append()
  • attr()
  • change(func)
  • click()
  • click(func)
  • css()
  • each(func)
  • effect()
  • empty()
  • fadeTo()
  • get()
  • hover(f1,f2)
  • html()
  • map(func)
  • mousedown(func)
  • prop()
  • resize(func)
  • show()、hide()
  • slideToggle()
  • submit()
  • submit(func)
  • text()
  • toggle()
  • toggleClass()
  • val()