unrealMan’s blog

IT関連の奮闘記を備忘録がてら記載していきます!

【javaScript基礎】練習問題集01【jQuery】

問題

1-1. ブラウザにアラートを表示してみよう(5分)


回答例はココをクリック


ソースコード

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>タイトル</title>
        <script src="js/learning.js"></script>
    </head>
    <body>
        <p>javaScript学習用</p>
    </body>
</html>

alert('Hello World!');

実行結果

f:id:unrealman:20200621165446j:plain


1-2. jQueryライブラリを読み込もう(5分)

1-3. セレクタを使ってhtmlの要素を非表示にしてみよう(5分)

1-4. 「1-3.」をボタン押下時に表示/非表示ができるように切り替えよう(10分)

1-5. jsonを読み込んでみよう(10分)

1-6. 初期表示時に、jsonで読み込んだデータをブラウザに表示してみよう(5分)

1-7. フォームの未入力チェックをしてみよう(5分)

1-8. フォームの文字数チェックをしてみよう(5分)

1-9. 以下の条件でアラートボタンでアラートを表示してみよう(10分)

1.追加ボタンが押されたら、アラートボタンを追加
2.アラートボタンが押されたらアラート表示

1-10. inputタグにmaxlength属性を追加してみよう(5分)

1-11. li要素の値を全て取得してみよう(5分)

        <ul>
            <li>りんご</li>
            <li>ごりら</li>
            <li>らっぱ</li>
            <li>ぱいぷ</li>
            <li>ぷりん</li>
        </ul>

1-12. 「1-11.」で取得したli要素の値を逆順でhtml表示してみよう(15分)