【JavaScript】変数を外部JSファイルで利用する

htmlファイル本体で宣言した変数を外部JSファイルでも利用できるかテストしたら、あっけなくできたのでメモ。

<script type="text/javascript">
	var aaa = 123;
	var bbb = 'abc';
</script>
<script type="text/javascript" src="sample.js"></script>

もちろん、PHPで出力した値を外部JSファイルで利用する事もできる。

<?php
	$abc = "abc";
?>
<script type="text/javascript">
	var abc = "<?php echo $abc; ?>"; 
</script>
<script type="text/javascript" src="sample.js"></script>

外部スクリプトがhtmlファイル本体に読み込まれた時点で変数に値がセットされている為、特別な処理をする必要は無い。

【JavaScript】setInterval()関数の引数で関数が使えない問題について

setInterval()に実行したい関数を引数として渡したい場合、

var test = setInterval(aaa(), 1000);

function aaa(){
	alert('test');
}

としてもうまくいかない。

無名関数内に直接実行したい処理を書くと実行できたので、

var test = setInterval(function(){
	alert('test');
}, 1000);

無名関数内にコチラで定義した関数を記述してみたらうまくいった。

var test = setInterval(function(){aaa();}, 1000);

function aaa(){
	alert('test');
}

無名関数内で関数を実行するとうまくいったのでメモ。

【JavaScript】読み込む外部CSSを動的に変える

JSで読み込む外部CSSを動的に変える

今回は、表示ボタンを押したときに入力するパスワードによって、
呼び出すCSSを変更して、表示する内容を変えるスクリプトを作ってみた。

■仕様■
・初期設定でBOXを非表示(display: none;)にしておく。
・「表示ボタン」を押したらダイアログを立ち上げ、パスワードを要求する。
・入力されたパスワードによって表示するCSSを変える。
 (パスワード「password01」→secret01.css、「password02」→secret02.cssを表示)
・display: none;→display: block;とする事で表示するBOXをコントロールする。
・パスワードが違う場合はダイアログ内に”パスワードが違います!” を表示する。

■処理の手順■
①表示ボタンが押されたら、passPrompt()関数が起動。
②入力できるダイアログを表示するprompt()が起動し、パスワードを要求。
③ダイアログのフォームに入力されたパスワードによって処理を変える。
④パスワードが一致したらcreateElement()、setAttribute()でlinkタグ、要素を生成する。
⑤getElementsByTagName()で指定要素内(headタグ)に子要素(linkタグ)を追加する。

【index.html】

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptパスワードテスト</title>
<link rel="stylesheet" href="css/common.css" type="text/css">

<script language="JavaScript"><!--
function passPrompt() {	
	myPassWord = window.prompt("パスワードを入力してください","");
	if(myPassWord == "password01"){
		// linkタグと要素を生成
		var css=document.createElement("link");
		css.setAttribute("rel","stylesheet");
		css.setAttribute("type","text/css");
		css.setAttribute("href","css/secret01.css");
		// 指定要素内(headタグ)に子要素(linkタグ)を追加
		document.getElementsByTagName("head")[0].appendChild(css);
	}else if(myPassWord == "password02"){
		var css=document.createElement("link");
		css.setAttribute("rel","stylesheet");
		css.setAttribute("type","text/css");
		css.setAttribute("href","css/secret02.css");
		document.getElementsByTagName("head")[0].appendChild(css);
	}else{
		alert( "パスワードが違います!" );
	}
}
// --></script>

</head>
<body>
<div id="container">
	<p class="pw"><a onClick="passPrompt()">表示ボタン</a></p>
	<ul>
		<li class="secret00">通常BOX</li>
		<li class="secret01">秘密BOX01</li><!-- "password01"で表示 -->
		<li class="secret02">秘密BOX02</li><!-- "password02"で表示 -->
	</ul>
	<a href="index.html">←戻る</a>
</div>
</body>
</html>

【common.css】(レイアウト用)

*{
	margin: 0;
	padding: 0;
}

#container {
	width: 300px;
	text-align: center;
	margin: auto;
	padding: 10px;
}

p.pw a{
	display: block;
	width: 160px;
	height: 42px;
	line-height: 42px;
	margin: auto;
	color: #FFFFFF;
	background: #000000;
}

li{
	display: block;
	width: 160px;
	height: 42px;
	line-height: 42px;
	border: 1px solid #000000;
	margin: 3px auto;
}

li.secret01,
li.secret02 {
	display: none;
}

【secret01.css】(表示切り替え用)

li.secret01 {
	display: block;
}

【secret02.css】(表示切り替え用)

li.secret02 {
	display: block;
}

【実行結果】
読み込むCSSを動的に変えるJS

【JavaScript】innerWidthで画面(ウィンドウサイズ)を取得する

画面(ウィンドウサイズ)を取得する方法。
今回はスマホ用に調べたので、ChromeとSafariとFireFoxが対象。

//ウィンドウ内側の幅を得る
window.innerWidth

【innerWidth使用例】

<script type="text/javascript">
	// ウィンドウ内側の横幅サイズを取得して出力
	document.write(window.innerWidth); 
</script> 

【出力結果】

1920

IEではwindow.innerWidthの定義が異なるので注意!!

ついでにウィンドウサイズを変えた時に、リアルタイムに値が確認できるように出力する。
ウィンドウサイズが変更されたときに発生するイベントハンドラonresizeを使用する。

【innerWidth使用例(リアルタイム出力)】

<!-- ここに変化した横幅サイズを出力 -->
<span id="put_size_w"></span>

<script tyle="text/javascript">
	// ウィンドウ横幅サイズを出力する関数
	function getWindowWidth(){
		var size_w;
		size_w = window.innerWidth;
		
		// 指定idタグ内に値を出力
		document.getElementById("put_size_w").innerHTML = size_w;
	}
	
	//読み込み時に横幅サイズを表示
	getWindowWidth();
	
	//ウィンドウサイズ変更時に横幅サイズを更新
	window.onresize = getWindowWidth;
</script>

innerwidth使用例

<span id=”put_size_w”></span>の中に値が出力されるよ!!

さらにサービスで、横幅の値によって処理をかえるスクリプト
ウィンドウサイズが変更されたときに発生するイベントハンドラonresizeの中で条件分岐する。

【innerWidth使用例(条件分岐用)】

<script type="text/javascript">
	// ウィンドウ横幅サイズを取得する関数
	function getWindowWidth(){
		var size_w;
		size_w = window.innerWidth;
		return size_w;
	}
	
	// onresizeで横幅サイズが変わった時のイベント
	window.onresize = function() {
		var size_w = getWindowWidth();
		document.getElementById("win_size").innerHTML = size_w;
		if(size_w < 700){
			// 横幅が700以上の時の処理
	
		}else{
			// 横幅が700以下の時の処理
	
		}
	}
</script>

window.onresizeを使ってウィンドウサイズが変わった時のイベントを設定できるよ!!

【JavaScript】PHPの変数をJavaScriptで利用する

PHPの変数に代入した値をJavaScriptで利用する方法。

一見難しく感じるが、PHPはサーバ上で実行されるので、
PHPの変数に値を代入して、JavaScript上に出力し、ブラウザで実行する時という手順になる。

<?php
	// PHPの変数akbに値48を代入する
	$akb = 48;
?>
<html>
<head>
<title>PHPの変数に代入した値をJavaScriptで利用する</title>
<script>
	// javascriptの変数akbにPHPの変数$akbの値48を代入する
	var akb = <?php echo $akb; ?>
	// 値をアラート出力する関数
    function func(str){
        alert(str);
    }
</script>
</head>
<body>
	<form action="" method="post">
		<input type="button" value="ボタン" onClick="func(akb)">
	</form>
</body>
</html>

実際のページのソースを見てみると、画面に表示された段階では、すでにPHPの<?php echo $akb; ?>
が出力され、JavaScriptの変数akbに代入されていることが分かる。

PHPの変数をJavaScriptで利用2

【出力】
PHPの変数をJavaScriptで利用

【JavaScript】イベントハンドラ(onClick等)で複数の関数を実行する

今回は、ボタンを押した時に、あらかじめ用意しておいた複数の関数を実行してみる。

ボタンが押された時に、実行したい関数をhtmlのheadタグ内に準備する

<script>
	// 関数01
	function func01(){
		alert("関数01");
	}
	// 関数02
	function func02(){
		alert("関数02");
	}
	// 関数03
	function func03(){
		alert("関数03");
	}
</script>

イベントハンドラ(onClick)に実行したい関数をセットする。
関数を複数セットする場合はセミコロン(;)で区切る。

<form action="" method="post">
	<input type="button" value="ボタン" onClick="func01(); func02(); func03()">
</form>

【実行】

関数は左から順番に実行される。

onClick複数関数実行

イベントハンドラに関数を複数セットする場合はセミコロン(;)で区切る。

【JavaScript】ゼロパディング(ゼロ埋め)

JavaScriptでのゼロパディング(ゼロ埋め)方法

ゼロパディングとは数字の桁を合わせる為に、桁数が足らない部分を0で埋めること
(例:7桁)
48 → 0000048

<script>
	// 変数akbに値48を代入する
	var akb = 48; 
	// 変数akbに代入した値48を7桁でゼロパディング(0埋め)する
	akb = ("0000000"+akb).slice(-7);
	// 出力
	alert(akb);
</script>

【出力結果】

0000048

javascriptでゼロパディング

【JavaScript】 指定タグ内の要素を取得する方法

今回は、liタグ内のテキストを取得して配列に入れてみる。

getElementsByTagName()でターゲットとなるタグを指定して配列に代入する。
配列に代入したテキストをループ処理でアラート出力する。

【html】

<ul>
	<li>1つ目のliタグです</li>
	<li>2つ目のliタグです</li>
	<li>3つ目のliタグです</li>
</ul>

【javascript】

<script>
	// 指定タグ内の要素を配列に代入
	var elements = document.getElementsByTagName("li");
	
	// 配列の要素をループ処理で出力
	for(i = 0; i < elements.length; i++){
		alert(elements[i].innerHTML);
	}
</script>

【実行】

指定タグ(liタグ)内に記述した要素を取得し、順番に出力した。

【JavaScript】appendChildでHTMLの要素を追加する

HTMLにinnerHTMLで文字列を出力する場合、
出力の度に前回の出力を書き換えてしまう。

前回の出力分を残した状態で、新たに要素を追加する場合は、appendChildを利用する。

appendChildでボタンを押すたびにHTMLの要素を追加するサンプルコード

<html>
<head>
<title>appendChildでHTMLの要素を追加するサンプルコード</title>
</head>
<style type="text/css">
.className {
	background-color: #000000;
	color: #FFFFFF;
}
</style>
<body>
	<!--appendChild要素追加サンプル-->
	<script type="text/javascript">
		function addElement() {
			var element = document.createElement('div');
			element.setAttribute('class', 'className');
			element.innerHTML = "テキスト";
		
			var objBody = document.getElementsByTagName("body").item(0);
			objBody.appendChild(element);
		}
	</script>
	
	<!--要素追加ボタン-->
	<form>
		<input type="button" value="要素を追加" onClick="addElement()">
	</form>
</body>
</html>