javascript/jQuery練習問題一覧サイト(基礎~実践まで)

※本サイトはアフィリエイトリンクを掲載しています。
javascript

こんにちは。Web系エンジニアのカズです。

私のブログで、これまで掲載してきたjavascript/jQuery練習問題を一覧にしてまとめました。

基礎編から実践編まで練習問題を用意しています。

 

本記事で伝えたいこと

javascript/jQuery練習問題について

本ブログ全体のコンセプトとして、未経験から稼げるエンジニアになるために必要だと思う情報を発信しています。

現場レベルで最低限、通用するエンジニアになるには「ロジックを考える」ということがプログラミング学習において重要だと思います。

基礎編でプログラムの書き方を学んだあと、実践編で「ロジックを考える」を意識しながらプログラミングしてみてください。

 

独学が難しい場合

本気でプログラミング技術を習得するのは、独学では難しい場合があります。

現場レベルで通用するエンジニアを目指していて、プログラミングスクールを検討している方はRUNTEQがオススメです。

javascript学習の準備

javascript学習をしたことがない、学習の始め方が分からないという方に向けて情報発信した記事です。

学習準備

 

基礎編(javascriptのみ)

変数(初級編)

変数を定義してみよう!

練習問題一覧

 

変数(const,letの使いわけ)

変数の使い方を練習しよう。constやletを使い分けよう!

練習問題一覧

 

出力系

値を画面に表示しよう!

練習問題一覧

 

条件分岐(if)

if文を使用しよう。比較演算子を活用しよう!

練習問題一覧

 

条件分岐(switch)

switch文を使用しよう。比較演算子を活用しよう!

練習問題一覧

 

繰り返し処理

for文を使用しよう。繰り返し処理で処理を効率化しよう!

練習問題一覧

 

配列(入門編)

配列を上手く活用しよう!配列操作のメソッドを使えるように練習しよう!

練習問題一覧

 

連想配列

連想配列を上手く活用しよう!基礎的な内容から応用まで出題。
使用例についても掲載あり!

練習問題一覧

 

dom操作

要素の取得をしよう!

練習問題一覧

 

関数

機能ごとに関数を作成しよう!関数の使い方をマスターしよう。

練習問題一覧

 

イベント処理

クリックした時、フォーカスが外れた時などのイベント処理の実装をします。

練習問題一覧

 

変換処理

文字列型と数値型の変換ができるようになろう!
ある文字列を別の文字列に変換してみよう!

練習問題一覧

 

URL操作

URLの取得、パラメータの取得などの実装練習をしましょう。

練習問題一覧

 
おすすめな本はこちら!
定番のボードゲームのリバーシ(オセロゲーム)を作りながら、実践的に学習ができます。


 

応用編

基礎編より、少しだけレベルを上げた問題を考えてみました。

 

for文とif文の組み合わせ

for文とif文を組み合わせて何か実装をしてみましょう。

練習問題一覧

 

for文と配列の組み合わせ

for文と配列を組み合わせて何か実装をしてみましょう。

練習問題一覧

 

チェックボックスに関連しそうなjavascript問題

チェックボックスの実装のときに扱えた方が良さそうなjavascript問題を考えました。

練習問題一覧

 

動的にCSSを変更する

javascriptから動的にCSSを変更する練習問題です。

練習問題一覧

 

ajax通信でAPIを取得して表示する(javascript編)

ユーザーが入力した郵便番号から、住所を取得して表示します。

練習問題一覧

 

ajax通信でAPIを取得して表示する(jQuery編)

ユーザーが入力した郵便番号から、住所を取得して表示します。

練習問題一覧

 
本で学習したい方に、おすすめ!
定番のボードゲームのリバーシ(オセロゲーム)を作りながら、実践的に学習ができます。


 

実践編(javascript or jQuery)

基礎編では、既に用意されているメソッドや公式にソースコードを当てはめるだけで良いような内容でした。

実践編は「何かを作成する」ということをテーマにしていきます。

その中で自分なりに「ロジックを考える」という力をつけられるのが理想です。

あくまでjavascriptの練習なので、見た目のCSSはそこまで頑張らないで最低限にしましょう。

難易度の低い問題から順に列挙します。

 

サイコロの目を表示しよう!

1から6の数字をランダムに表示します。

練習問題

 

色占いを作ろう!

今日のラッキーカラーをランダムで表示する機能を作成します。

練習問題

 

簡易版○○危機一髪的な機能を作ろう!

いくつかボタンがあり、どれか1つ「はずれ」ボタンを設定します。
はずれを押したらゲーム終了の機能を作成します。

練習問題

 

おみくじを作成しよう(簡易版)

占い結果(例:大吉)、恋愛、旅行、仕事の占いがランダムで表示される機能を作成します。

練習問題

 

今日の星座占いを作ろう!

今日の星座の運勢の順位をランダムに表示する機能を作成します。

練習問題

 

トランプの神経衰弱を作ろう!

簡易版ですが、トランプの神経衰弱を作成します。
1から8の数字の中で数字が一致するかどうかを判定します。

練習問題

 

稼げるエンジニアになるためのロードマップ

本ブログでは「稼げるエンジニア」になるために必要だと思う情報を発信させて頂いています。
稼げるエンジニアになるための道筋がわからないという方は、本ブログの下記の記事を参考にしてください。

未経験から「稼げるWeb系エンジニア」になるためのロードマップの記事

 

コメント