或阿呆のブログ

巷では、武器商人@ダーツで通っています。Python好き好きプログラマーです。芥川龍之介、太宰治が好きです。

外部ファイル.jsに関数を書いて、呼び出したときの文字化け対処方法。

ボタンクリック時にメッセージを表示するサンプルコード - oneshotlife_tomの日記
↑でやったことを外部ファイル化してみた。

呼び出し元

<html>
	<head>
		<title>test</title>		
	</head>
	<body>
		<script type="text/javascript" src="./js/clicked.js">
		</script>		
		<form>
			<input onclick="Clicked()" type="button" value="click" />
		</form>		
	</body>	
</html>

関数定義

function Clicked(){
	alert("ボタンがクリックされました!");	
}

呼び出し自体には問題がないんだけど、文字化けしてしまう。

こんな風に。

htmlとかjavascriptは最近はじめたばかりなんで、どこをどう直そうかは調べてみるしか無いんだけど、調べないといけないことは二つある。

htmlの文字コードは?

ぐぐって見るとわかるが、メタタグで定義するよう。の間に以下を定義する。ブログでjavascriptを書いている小生なんかは、こんなところは、ブログがいい具合にやってくれているので気付きにくいところ。ただし、ここを直しても、文字化けは解消されなかった。

<meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-8" />

javascript文字コードは?

javascriptの呼び出し箇所(読み込み箇所)で文字コードを指定出来る。呼び元と同じ文字コードを指定してやらないと、まずい。以下のように指定する。

<script type="text/javascript" src="./js/helloworld.js" charset="utf-8">

上記二つを修正したら直った。

ほら。

修正後のソースは以下。

呼び出し元

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>test</title>		
	</head>
	<body>
		<script type="text/javascript" src="./js/helloworld.js" charset="utf-8">
		</script>		
		<form>
			<input onclick="Clicked()" type="button" value="click" />
		</form>		
	</body>	
</html>

結局は、呼び出し元だけで対処出来た。システムや環境、あるいは使い方によってこういった修正が出来る出来ないが変わってくるが、文字コードは常に意識したい。また、出来ることなら、標準に併せてutf-8に統一したほうがいいかも。

標準って何というと、、、

標準という言葉は便利で曖昧なので、、、

はっきりさせると、WEBAPIで使う文字コードcgiで使う文字コード、ターミナルで扱う文字コード、それらの多数派を標準と言うことにする。多数派に従っておけば、問題は生じにくいし、問題が生じた場合にも、ぐぐって解決出来る方法の情報量が多いので楽。