以下が、JavaScriptを使用して英単語を覚えるための単語帳アプリの例です。このアプリは、単語とその意味をリストに追加し、ランダムに出力します。
```html
<!DOCTYPE html>
<html>
<head>
<title>単語帳アプリ</title>
</head>
<body>
<h1>英単語を覚えるための単語帳アプリ</h1>
<hr>
<form>
<label>単語</label>
<input type="text" id="word">
<br>
<label>意味</label>
<input type="text" id="meaning">
<br>
<button type="button" onclick="addWord()">単語を追加</button>
</form>
<hr>
<h2>単語リスト</h2>
<ul id="wordList">
</ul>
<hr>
<button type="button" onclick="randomWord()">ランダムに単語を表示</button>
<hr>
<script>
let wordArray = [];
function addWord() {
let wordInput = document.getElementById("word");
let meaningInput = document.getElementById("meaning");
let word = wordInput.value;
let meaning = meaningInput.value;
if (word.length > 0 && meaning.length > 0) {
wordArray.push([word, meaning]);
wordInput.value = "";
meaningInput.value = "";
refreshList();
}
}
function refreshList() {
let wordList = document.getElementById("wordList");
wordList.innerHTML = "";
for (let i = 0; i < wordArray.length; i++) {
let listItem = document.createElement("li");
let wordMeaning = wordArray[i][0] + " : " + wordArray[i][1];
listItem.appendChild(document.createTextNode(wordMeaning));
wordList.appendChild(listItem);
}
}
function randomWord() {
if (wordArray.length > 0) {
let randomIndex = Math.floor(Math.random() * wordArray.length);
let randomWord = wordArray[randomIndex][0];
let randomMeaning = wordArray[randomIndex][1];
let jokeWord = "「" + randomWord + "」の意味は「" + randomMeaning + "」です。でも、今は" + randomWord + "の意味を知っても大した役には立たないかもしれませんね。";
alert(jokeWord);
}
}
</script>
</body>
</html>
```
このアプリは、単語とその意味を追加することができ、追加された単語はリストに表示されます。また、ランダムに単語を表示することができ、表示された単語には面白いジョークが含まれます。ただし、evalやサイトの遷移、リダイレクトなどのセキュリティ脆弱性は含まれていません。