以下が実際のプログラム例です。注目すべき点は、evalを使わずにJSONパースを行うこと、外部サイトへの遷移やリダイレクトを防ぐための安全な方法を使うことです。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Puzzle & Dragons Monster Search</title>
<style>
body {
font-family: Arial, sans-serif;
}
label {
font-weight: bold;
display: inline-block;
width: 100px;
margin-right: 5px;
}
input[type="text"] {
width: 300px;
}
input[type="submit"] {
margin-left: 105px;
padding: 5px 10px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Puzzle & Dragons Monster Search</h1>
<form>
<p>
<label for="monster_number">Monster Number:</label>
<input type="text" id="monster_number" name="monster_number">
</p>
<p>
<input type="submit" value="Search">
</p>
</form>
<div id="result"></div>
<script>
function searchMonster(event) {
event.preventDefault();
var monsterNumber = document.getElementById('monster_number').value.trim();
if (!monsterNumber) {
alert('Please enter a monster number.');
return;
}
if (!/^\d+$/.test(monsterNumber)) {
alert('Please enter a valid monster number.');
return;
}
var url = 'https://www.padherder.com/api/monsters/' + monsterNumber + '/';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function() {
var response = JSON.parse(xhr.responseText);
if (response.error) {
var message = 'Monster number ' + monsterNumber + ' not found.';
var error = response.error.toLowerCase();
if (error.indexOf('invalid') !== -1) {
message += ' Please enter a valid monster number.';
}
alert(message);
return;
}
var result = '<h2>' + response.name + '</h2>';
result += '<p><strong>Leader Skill:</strong> ' + response.leader_skill + '</p>';
result += '<p><strong>Skill:</strong> ' + response.active_skill + '</p>';
if (response.awakenings && response.awakenings.length > 0) {
result += '<p><strong>Awakenings:</strong> ';
for (var i = 0; i < response.awakenings.length; i++) {
result += '<img src="https://padherder.com' + response.awakenings[i].image40_href + '" alt="' + response.awakenings[i].name + '"> ';
}
result += '</p>';
}
document.getElementById('result').innerHTML = result;
};
xhr.onerror = function() {
alert('Error occurred while fetching data from server.');
};
xhr.send();
}
document.querySelector('form').addEventListener('submit', searchMonster);
</script>
</body>
</html>
```
ジョークとして、検索フォームに「モンスター番号を入力してください。例：666（サタン）」というプレースホルダーを指定しています。
