こんにちは、ススムです。
この記事を書いた人はこんな感じです。⇩
著者
- スポーツの専門学校卒業
- オーストラリアへ語学留学/スシレストランで就労
- JICA海外協力隊にてミャンマーで2年間生活
- Webデザイナー/動画クリエイター/Webエンジニア/Webライター
- オンラインスポーツコーチ
- オンライン日本語講師
- オンラインミャンマー語講師
- ミャンマー人向けオンラインコミュニティ運営
※この記事を書いている私について詳しくはこちらで紹介しています。
【本記事のテーマ】
「JavaScriptでのコーディングについて簡単に紹介します。」
【読者さんへのメッセージ】
「本記事では、IT業界・プログラミング・インフラ等について紹介します」 興味がある方はこの先を見ていきましょう。
【エンジニアの職探しならこちら🔻】
フリーランスエンジニアに安心保証と豊富な案件紹介を【midworks】
クイズアプリ作成
今回は簡単なクイズアプリを作成してみます。
まずはHTMLとjavascriptの基本構文を書いていきます。
HTMLとjavascriptの要素をリンクさせました。
クイズを作成する機能、結果を表示する機能、それを統合する機能を作成し、buildQuiz 関数はすぐに実行し、showResults関数はユーザーがsubmitボタンを押したときに実行します。
続いてはクイズの質問の処理を書いていきます。
質問がかけたので質問を表示させる処理を書いていきます。
それぞれの質問のHTMLを生成するために、forEachで順番に質問を処理します。
アロー関数を用いて各質問に対する操作を記述しています。 回答のラジオボタンを作り、quizContainer.innerHTML=output.join(”);で結合して表示させます。
次はクイズの結果を表示させる処理をしていきます。
正答数と質問の回答を格納する変数を用意し、質問の回答をループ処理しました。
constのところでは、選択した回答をHTMLから取得する処理です。
回答と正答が一致した場合には、正答数に1を足して緑色にします。
誤答の場合は、赤色にします。
まずはページの区切りを追加する処理を書いていきます。
質問を表示・非表示させる機能と、ナビゲーションボタンを追加しました。
slideクラスをモス<div>を追加。
cssでスライドをレイヤーで重ねて表示。
ナビゲーションボタン参照とスライドを格納。 続いてはスライドを表示させる処理を書いていきます。
始めのスライドならPrevious Slideボタンを非表示にさせて、最後のスライドならNext Slideボタンを非表示にさせてsubmitボタンを表示させます。
最後にナビゲーションボタンを作動させる関数を書きます。
showSlide関数で、ナビゲーションボタンを用いて前後のスライドへ移動できるようにしています。
アロー関数
今回のコードではアロー関数が出てきました。
アロー関数は、functionの定義を短く記述できる方法で、「=>」という記号を用います。
例
var test=function(a){ return a+a;
};
上記のコードをアロー関数では以下のとおりです。
var test=(a)=>{ return a+a;
};
このようにアロー関数を使うと、コードを簡単に書く事ができます。
今回はこちらのサイトを参考に進めました。
https://www.webprofessional.jp/simple-javascript-quiz/
私は、エンジニアの学習にあたってこちらの資料を参考にしました。
http://www5e.biglobe.ne.jp/aji/3min/
https://ping-t.com/
プログラミング学習ツール
https://prog-8.com/languages
https://dotinstall.com/
【エンジニアの職探しならこちら🔻】
フリーランスエンジニアに安心保証と豊富な案件紹介を【midworks】
【IT・プログラミング関連記事】
まとめ
また、何かあったら紹介したいと思います。
質問などがあれば気軽にコメント下さい。
仕事の依頼などがあればメールまたはSNSにてお問い合わせ下さい。
以上が今回のブログとなります。
読んで頂きありがとうございます。
また次回お会いしましょう。
※0円で受けれるプログラミング説明会
今話題のテックキャンプ。
実績、知名度ともに業界最大級の未経験を対象としたテクノロジースクールです。 受講期間中はいつでもメンター(講師)に質問ができ、目的達成のためにトレーナーが徹底的にサポートします。
【ミャンマー写真集】
【ミャンマー語学習教材３選】
※ミャンマー語のテスト問題集作成しました。詳しくはこちらから
※ミャンマースポーツコミュニティ⏩【Myanmar Sports/ISPE】
※ミャンマー✖️日本コミュニティー⏩【MyanJapa Life】
企業の方、プレスの方、個人の方など、仕事の依頼に関するお問い合わせは以下の
フォームからお気軽にご連絡下さい
コメント