、航空機の機体番号を入力すると、その航空機の型式、運航航空会社、運航状況などの情報を表示するアプリを作成します。
以下が実際のプログラム例です。ただし、evalや他のサイトへの遷移、リダイレクトは使用していません。
HTML:
```
<!DOCTYPE html>
<html>
<head>
<title>航空機機体番号検索ツール</title>
</head>
<body>
<h1>航空機機体番号検索ツール</h1>
<form onsubmit="searchPlane(this); return false;">
<label>機体番号：</label>
<input type="text" id="planeNum"/>
<input type="submit" value="検索"/>
</form>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
```
JavaScript (script.js):
```
function searchPlane(form) {
const input = form.querySelector('#planeNum').value
// 機体番号の入力チェック
if (!input) {
document.querySelector('#result').textContent = '機体番号を入力してください。'
return
}
// 機体番号から検索用URLを生成
const url = `https://www.planespotters.net/Production_List/search.php?searchtext=${input}&submit=1`
// URLにアクセスし、HTMLを取得
fetch(url)
.then(response => response.text())
.then(html => {
// HTMLから必要な情報を取得
const doc = new DOMParser().parseFromString(html, 'text/html')
const aircraft = doc.querySelector('#rowFirstDetail > table > tbody > tr:nth-child(1) > td:nth-child(1)').textContent
const operator = doc.querySelector('#rowFirstDetail > table > tbody > tr:nth-child(3) > td:nth-child(1)').textContent
const status = doc.querySelector('#rowFirstDetail > table > tbody > tr:nth-child(4) > td:nth-child(1)').textContent
// 結果を表示
const result = `
<p><strong>機体番号：</strong> ${input}</p>
<p><strong>航空機の型式：</strong> ${aircraft}</p>
<p><strong>運航航空会社：</strong> ${operator}</p>
<p><strong>運航状況：</strong> ${status}</p>
`
document.querySelector('#result').innerHTML = result
})
.catch(error => {
console.error(error)
document.querySelector('#result').textContent = 'エラーが発生しました。'
})
}
```
このアプリは、入力された機体番号を用いて、https://www.planespotters.net/Production_List/search.phpにアクセスしてHTMLを取得し、必要な情報を取り出して表示しています。機体番号が未入力の場合や、エラーが発生した場合などにも適切に処理を行っています。また、ユーザーにユーモアを感じさせるため、「検索しにいっていい？(Yes/No)」といったようなメッセージを表示するなど、面白いジョークを仕込むこともできます。
