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

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

<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行目

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

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

<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等を取得しています。

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

<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で[現在のタブ]に履歴付きで表示しています。

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

<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#'の場合は、警告メッセージを表示して、それ以外の場合は購入メッセージを出力しています。

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

<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の場合はキャンセルしています。