英単語を覚えるための単語帳アプリ

単語リスト

以下が、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やサイトの遷移、リダイレクトなどのセキュリティ脆弱性は含まれていません。