JavaScript課題用フォルダ作成
JavaScript課題を始める前に、課題用のフォルダを作成します。
VSCodeでProgrammingフォルダを開きましょう。
そして、tasksフォルダをクリックして、フォルダ作成マークをクリックし、新しいフォルダを作成して、JSと名前を付けましょう。
これでHTML課題用のフォルダが完成しました。
課題提出方法
以下の手順で、Discordの個別テキストチャンネルに課題を提出してください。
①各課題ごとのフォルダ作成
各課題には、指定したフォルダ名が記載されております。
そのフォルダ名のフォルダをtasksフォルダ下のJSフォルダ内に作成してください。
例：フォルダ名「〇〇〇〇_js_console」
〇〇〇〇の中には、皆さん自身のフルネームを名前を入力してください。
②作成したフォルダをzip形式に圧縮
zip化の方法
・Macの方向け
・Windowsの方向け
③Discordの個別テキストチャンネルへ送信
圧縮したzipファイルを個別テキストチャンネルへ送信してください。
課題を進める上での注意点
- インデントを意識してください。
- インデントなどでは、半角スペースを使用してください。
- 調べたことをコピペするだけではなく、しっかりとコードの意味を理解してから使用しましょう。
- 課題ごとに記載されている検索ワードは、詰まるまでなるべく見ないようにしましょう。
課題提出時の注意点
- 課題を提出する時は、業務で誰かに提出することをイメージして課題を提出しましょう！
- 課題はできたものから順次提出してください。
- 課題と関係のないファイルやフォルダは、提出するフォルダ(zipファイル)内に入れないでください。
- 提出する前に、正しく画像などが反映されているかの確認をしてください。
- 課題提出時はどの課題を提出するのかを明記してください。
例：
h1タグの使い方
pタグの使い方
brタグの使い方
上記課題を提出します。
ログの出力
例：フォルダ名「〇〇〇〇_js_console」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
「JavaScriptを勉強します！」とコンソールに出力してください。
★検索ワード
・デベロッパーツール 開き方
・JavaScript console.log 使い方
・JavaScript コンソール 出力
配列
例：フォルダ名「〇〇〇〇_js_array」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
下記のデータが格納された配列を作成し、その中から文字列のみをコンソールに出力してください。
[100,500,"aiueo",1000,"JavaScript",3000,"プログラミング"]
★検索ワード
・JavaScript 配列 使い方
・JavaScript 文字列 使い方
演算子
例：フォルダ名「〇〇〇〇_js_operator」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
下記①〜④で指定された演算子を使用して、それぞれの結果をコンソールに出力して下さい。
① 算術演算子を使用して、足し算・引き算・掛け算・割り算をそれぞれ作成し、その計算結果をコンソールに出力してください。
② 代入演算子を使用して、足し算・引き算・掛け算・割り算をそれぞれ作成し、その計算結果をコンソールに出力してください。
③ 比較演算子を使用して、trueとfalseを返す式をそれぞれ作成し、その結果をコンソールに出力してください。
④ 等価演算子を使用して、trueとfalseを返す式をそれぞれ作成し、その結果をコンソールに出力してください。
★検索ワード
・JavaScript 演算子とは
・JavaScript 算術演算子
・JavaScript 代入演算子
・JavaScript 比較演算子
・JavaScript 等価演算子
DOM操作
例：フォルダ名「〇〇〇〇_js_dom」
〇〇〇〇の中には、皆さん自身のフルネームを名前を入力してください。
htmlファイルでp要素を作成し、その内容をJavaScriptファイルから書き換えなさい。
例)
★検索ワード
・DOMとは
・JavaScript DOM操作
要素の追加
例：フォルダ名「〇〇〇〇_js_create_elem」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
以下の画像のようにあいうえお、かきくけこ、さしすせそがブラウザに表示されるhtmlファイルを作成し、JavaScriptファイルでたちつてと、なにぬねのがブラウザで表示されるように要素の追加をしてください。
-
要素の追加前のブラウザ
あいうえお
かきくけこ
さしすせそ -
要素の追加後のブラウザ
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
★検索ワード
・JavaScript 要素作成
・JavaScript 要素追加
イベントハンドラとイベントリスナ
例：フォルダ名「〇〇〇〇_js_event」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
① 下記の表のイベントが起こったときに、それぞれの説明欄のテキストをコンソールに出力するプログラムをイベントハンドラを使用して作成して下さい。
② 下記の表のイベントが起こったときに、それぞれの説明欄のテキストをコンソールに出力するプログラムをイベントリスナーを使用して作成して下さい。
○注意点
・すべてのイベントを作成すること
・1つのイベントにつき、要素を1つ用意すること
| イベント | 説明 |
|---|---|
| onBlur | ページやフォーム要素からフォーカスが外れた時に発生 |
| onFocus | ページやフォーム要素にフォーカスが当たった時に発生 |
| onChange | フォーム要素の選択、入力内容が変更された時に発生 |
| onSelect | テキストが選択された時に発生 |
| onSubmit | フォームを送信しようとした時に発生 |
| onReset | フォームがリセットされた時に発生 |
| onLoad | ページや画像の読み込みが完了した時に発生 |
| onClick | 要素やリンクをクリックした時に発生 |
| onDblClick | 要素をダブルクリックした時に発生 |
| onKeyUp | 押していたキーをあげた時に発生 |
| onKeyDown | キーを押した時に発生 |
| onKeyPress | キーを押してる時に発生 |
| onMouseOut | マウスが離れた時に発生 |
| onMouseOver | マウスが乗った時に発生 |
| onMouseUp | クリックしたマウスを上げた時に発生 |
| onMouseDown | マウスでクリックした時に発生 |
| onMouseMove | マウスを動かしている時に発生 |
例：ボタン要素がクリックされた場合、「要素やリンクをクリックした時に発生」をコンソールに出力させる。
★検索ワード
・JavaScript イベントハンドラ 使い方
if文1
例：フォルダ名「〇〇〇〇_js_if1」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
以下のプログラムを作成してください。
A君が英語の試験を受けました。
A君の点数が60点以上の場合は「合格です！」とコンソールに出力し、それ以外の場合は「不合格です！」とコンソールに出力するプログラムを作成してください。
★検索ワード
・JavaScript if文 使い方
if文2
例：フォルダ名「〇〇〇〇_js_if2」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
A君とB君が国語の試験を受けました。
A君とB君のそれぞれのテスト結果によって、コンソールに出力される文字列が変わるプログラムを作成してください。
条件ごとに出力される文字列は以下の通りです。
| コンソール出力結果 | 条件 |
|---|---|
| 2人とも満点 | A君のテストの結果が100点でB君のテストの結果も100点 |
| 2人とも合格 | A君のテストの結果が70点以上でB君のテストの結果も70点以上 |
| A君だけ合格 | A君のテストの結果が70点以上でB君のテストの結果が70点未満 |
| B君だけ合格 | A君のテストの結果が70点未満でB君のテストの結果が70点以上 |
| 2人とも不合格 | A君のテストの結果が70点未満でB君のテストの結果も70点未満 |
| 2人とも0点 | A君のテストの結果が0点でB君のテストの結果も0点 |
★検索ワード
・JavaScript if文 使い方
・JavaScript if文 論理演算子 使い方
if文3
例：フォルダ名「〇〇〇〇_js_if3」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
ある小学校では、テストの結果によって生徒のクラス替えを行っています。
テスト科目は国語・算数・理科・社会・英語の5種類です。
テスト結果により、クラス名がコンソールに出力されるプログラムを作成してください。
クラス名とクラスに参加する条件は以下のとおりです。
| クラス | 条件 |
|---|---|
| 特進クラス | 合計点が400点以上、すべての科目が80点以上 |
| 準特進クラス | 合計点が350点以上、すべての科目が70点以上 |
| 国際進学Aクラス | 合計点が300点以上、英語が95点以上 |
| 国際進学Bクラス | 合計点が300点以上、英語が90点以上 |
| 理系Aクラス | 算数と理科の合計点が150点以上 |
| 理系Bクラス | 算数と理科の合計点が130点以上 |
| 文系Aクラス | 国語と英語と社会の合計が250点以上 |
| 文系Bクラス | 国語と英語と社会の合計が200点以上 |
| 普通クラス | それ以外の場合 |
★検索ワード
・JavaScript if文 使い方
・JavaScript 論理演算子 使い方
switch文
例：フォルダ名「〇〇〇〇_js_switch」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
変数numを用意し、その変数numの値に応じて12種類の干支のいずれかがコンソールに出力されるプログラムを作成してください。
例）
変数numの値が1だった場合・・・「子」
変数numの値が2だった場合・・・「丑」
変数numの値が3だった場合・・・「寅」
変数numの値が4だった場合・・・「卯」
・
・
・
変数numの値がそれ以外の場合・・・「値が無効です」
★検索ワード
・JavaScript switch文 使い方
繰り返し処理1
例：フォルダ名「〇〇〇〇_js_for1」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
① for文を使って「おはようございます！」をコンソールに5回出力してください。
② while文を使って「こんばんは！」をコンソールに5回出力してください。
★検索ワード
・JavaScript 繰り返し処理 やり方
・JavaScript for文 使い方
・JavaScript while文 使い方
繰り返し処理2
例：フォルダ名「〇〇〇〇_js_for2」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
あいうえお,かきくけこ,さしすせそ,たちつてと,なにぬねのの文字列が5つ入った配列を作成し、for文を使って、その配列の要素を1つずつ表示するプログラムを作成して下さい。
○注意点
・繰り返し回数はその配列の要素数と同じにすること
★検索ワード
・JavaScript 繰り返し処理 やり方
・JavaScript for文 使い方
繰り返し処理3
例：フォルダ名「〇〇〇〇_js_for3」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
下記画像のように5 × 1 = 5から7 × 9 = 63までの掛け算の式と答えを
コンソールに出力する処理をfor文を使って作成して下さい。
○注意点
・for文を使用するのは2回まで
⬇出力例⬇
★検索ワード
・JavaScript 繰り返し処理 やり方
・JavaScript for文 使い方
関数1
例：フォルダ名「〇〇〇〇_js_func1」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
関数内でconsole.log()を使用して、「関数が呼び出されました！」とコンソールに出力する処理を作成し、その関数を実行してください。
★検索ワード
・JavaScript 関数 使い方
関数2
例：フォルダ名「〇〇〇〇_js_func2」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
以下の処理を行うための関数A、関数B、関数Cを作成してください。
関数A・・・3という数値をコンソールに出力する処理
関数B・・・1という数値をコンソールに出力する処理
関数C・・・2という数値をコンソールに出力する処理
また、作成した関数を実行し、下記出力例のようにコンソールに出力してください。
○注意点
・関数名は適切に命名すること
⬇出力例⬇
★検索ワード
・JavaScript 関数 使い方
戻り値
例：フォルダ名「〇〇〇〇_js_return」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
returnFuncという関数の戻り値として「戻り値が使用されました！」という文字列を設定し、その戻り値がコンソールに出力されるプログラムを作成してください。
★検索ワード
・JavaScript 関数 使い方
・JavaScript 戻り値とは
・JavaScript return 使い方
引数1
例：フォルダ名「〇〇〇〇_js_param1」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
paramFuncという関数を作成し、その関数paramFuncに引数を設定し、その引数の値がコンソールに出力されるプログラムを作成してください。
★検索ワード
・JavaScript 引数 使い方
引数2
例：フォルダ名「〇〇〇〇_js_param2」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
paramFuncという関数を作成してください。
その関数に2つの数値を引数として設定し、その2つの引数の合計値が戻り値となるように作成して下さい。
最後に関数paramFuncを実行し、関数paramFuncの戻り値をコンソールに出力してください。
★検索ワード
・JavaScript 引数 使い方
・JavaScript 引数 複数
引数3
例：フォルダ名「〇〇〇〇_js_param3」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
松、竹、梅の3つのボタンをHTMLで作成し、以下の表を参考に押されたボタンによって、コンソールログに値を出力させる関数を作成してください。
| 押されたボタン | コンソールに出力する文字 |
|---|---|
| 松 | 特上 |
| 竹 | 上 |
| 梅 | 並 |
★検索ワード
・JavaScript 引数 使い方
引数4
例：フォルダ名「〇〇〇〇_js_param4」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
上記画像は、ある関数Aの処理を図で表したものです。
関数Aの引数に2を渡すと6を返し、100を渡すと300を返します。
上記画像と以下の条件を見ながらプログラムを実装してください。
① 上記画像の機能を持った関数Aを作成する。
② 関数Aを４回実行し、引数にはそれぞれ 2, 25, 50, 100を設定する。
③ それぞれの戻り値 6, 75, 150, 300をコンソールに出力する。
○注意点
条件分岐は使用しないでください。
⬇出力例⬇
★検索ワード
・JavaScript 引数 使い方
関数、引数、戻り値1
例：フォルダ名「〇〇〇〇_js_pref」
〇〇〇〇の中には、ご自身のフルネームを入力して下さい。
引数に入れた文字列によって、以下の表に対応した値を返す関数を作成してください。
また、その関数の戻り値をコンソールに出力して下さい。
○注意点
・３つとも出力すること
| 引数に入れた文字列 | 出力する文字列 |
|---|---|
| 野球 | イチロー |
| サッカー | キングカズ |
| バスケットボール | 八村塁 |
★検索ワード
・JavaScript 関数 使い方
・JavaScript 引数 使い方
・JavaScript 戻り値とは
・JavaScript return 使い方
関数、引数、戻り値2
例：フォルダ名「〇〇〇〇_js_fizzbuzz」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
1~100までの数値を出力するプログラムを書いてください。
ただし以下の3つの条件の場合には、数値ではなくそれぞれ指定した文字列を出力して下さい。
・3の倍数の場合：「Fizz」
・5の倍数の場合：「Buzz」
・3と5両方の倍数の場合：「FizzBuzz」
出力の優先度
FizzBuzz > Fizz , Buzz > 数値
・また、以下2つの関数を必ず作成して実装してください。
関数A： Bの関数を繰り返し処理の中で呼び出し、100回実行する関数
関数B： Aの関数から、受け取った数値によって「FizzBuzz」,「Fizz」,「Buzz」,「1, 2, 4, などそのままの数値」をコンソールに出力する関数
⬇出力例⬇
★検索ワード
・JavaScript 関数 使い方
・JavaScript 引数 使い方
・JavaScript 戻り値とは
・JavaScript return 使い方
ランダム処理
例：フォルダ名「〇〇〇〇_js_random」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
以下の2つの配列を作成し、配列Bの中身を出力してください。
配列A： 1,2,3,4,5,6,7が入っている配列
配列B： 配列Aの中から、ランダムに選ばれた数字が選ばれた順に、すべて入っている配列
○注意点
配列Bには重複した値があってはいけません。
⬇出力例⬇
★検索ワード
・JavaScript ランダム処理
・JavaScript splice 使い方
・JavaScript push 使い方
売上の計算1
例：フォルダ名「〇〇〇〇_js_sales1」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
商品Aと商品Bの2種類の目玉商品があるスーパーがあります。
下記の表を参考に、各曜日ごとにどちらの商品のほうが多く売れたか、また何個多く売れたかを出力するプログラムを作成してください。
| 曜日 | 商品A | 商品B |
|---|---|---|
| 月曜日 | 20 | 30 |
| 火曜日 | 40 | 45 |
| 水曜日 | 32 | 57 |
| 木曜日 | 22 | 20 |
| 金曜日 | 78 | 90 |
⬇出力例⬇
★検索ワード
・JavaScript length 使い方
売上の計算2
例：フォルダ名「〇〇〇〇_js_sales2」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
下記の表を参考に、ある商品が前日と比べて何個多く売れたかを出力するプログラムを作成してください。
もし、前日と比べて少ない場合にはマイナスをつけて出力すること
| 曜日 | 商品 |
|---|---|
| 月曜日 | 20 |
| 火曜日 | 40 |
| 水曜日 | 32 |
| 木曜日 | 22 |
| 金曜日 | 78 |
○注意点
2つ以上の配列を使用しないでください。
⬇出力例⬇
★検索ワード
・JavaScript length 使い方
文字列の検索
例：フォルダ名「〇〇〇〇_js_serch」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
以下の画像のようにHTML上に表示された文字列の中にinput要素に入力した、文字列が含まれているかを判別するプログラムを作成してください。
含まれている場合・・・「含まれています」と画面に出力
含まれていない場合・・・「含まれていません」と画面に出力
⬇出力例（含まれている場合）⬇
⬇出力例（含まれていない場合）⬇
文章は以下を使用してください。
- むかし、むかし、ある所におじいさんとおばあさんが住んでいました。おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。おばあさんが川で洗濯をしていると大きな桃が流れてきました。
★検索ワード
・JavaScript indexOf() 使い方
じゃんけんゲーム
例：フォルダ名「〇〇〇〇_js_janken」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
下記のゲームの流れを参考にジャンケンゲームを作成してください。
ゲームの流れ
１.ユーザーがグー、チョキ、パーいずれかをクリック
２.クリックした後に、相手の手がランダムで決まる
３.ユーザーがクリックした手と相手の手によって勝敗を判定
４.ユーザーの手、相手の手による判定の結果（「勝利」、「敗北」、「あいこ」のいずれか）を画面に出力する。
○注意点
・ジャンケンの手は画像を使用すること（ボタン要素を使用しない）
・じゃんけんの手の画像はご自身でインターネットからダウンロードして使用すること
⬇出力例（自分の手をクリックする前）⬇
⬇出力例（自分の手をクリックした後）⬇
★検索ワード
・JavaScript ランダム処理
4択クイズ
例：フォルダ名「〇〇〇〇_js_quiz」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
下記の仕様を参考に4択クイズを作成してください。
4択クイズの仕様は以下の通りです。
・クイズは全部で3問用意する
・ユーザーが解答のボタンをクリックすると次の問題に切り替わる
・クイズの正解数に応じて、結果が変わる
例) 全問正解なら「素晴らしい」が出力される、2問正解なら「おしい！」が出力される、1問正解なら「まだまだ！」が出力される、全問不正解なら「残念！」が出力される
・結果はアラートで表示される
・同じボタンを押し続ければすべて正解になるようにしてはいけない
⬇出力例⬇
★検索ワード
・JavaScript alert 使い方
カウントダウンタイマー
例：フォルダ名「〇〇〇〇_js_timer」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
下記の仕様を参考にカウントダウンタイマーを作成してください。
・カウントダウンタイマーの仕様
① 何時間何分何秒経過すれば次の日になるのかをカウントダウンする
例) 現在時刻が12時10分10秒だった場合、「本日の残り時間は11時間49分50秒です」と表示される
② 残り時間の表示が1秒毎に更新される
⬇出力例⬇
★検索ワード
・JavaScript Date() 使い方
・JavaScript Math.floor() 使い方
・JavaScript setTimeout() 使い方
todoアプリ
例：フォルダ名「〇〇〇〇_js_todo」
〇〇〇〇の中には、ご自身のフルネームを入力してください。
下記の仕様を参考にtodoアプリを作成してください。
todoアプリの仕様
・input要素にテキストを入力し、追加のボタンが押されたら任意の位置にタスクが追加される。
・追加したタスクに対応した削除ボタンが押されたら、対応するタスクが削除される。
・追加したタスクに対応した編集ボタンが押されたら、対応するタスクのテキストが編集される。
※見た目については、見本と同じようにしなくてもOKです
以下の画像のようなtodoアプリを作成してください。
⬇出力例（タスクの追加前）⬇
⬇出力例（タスクの追加後）⬇
★検索ワード
・JavaScript 要素の追加
・JavaScript 要素の作成
・JavaScript 要素の削除
・JavaScript 要素の操作
これにて、JavaScriptの最終課題の作成が完了です！
お疲れさまでした！