JavaScript総合学習プラン（ルール）

この学習プランは、実際のプロジェクトの 80% で能力を発揮できるよう、中核となる概念の 20% を習得することに重点を置いています。まずはこれらの基本をマスターしてから、プロジェクトを通じて拡張してください。

コア学習ステージ (2 週間)

毎日の学習スケジュール:

• 午前: 概念を学習します (1 ～ 2 時間)。
• 午後: 練習 (1 ～ 2 時間)。
• 夜: レビュー、デバッグ、レビュー (30 分)。

第 1 週: 基本

1 日目: 基本概念

• トピック: 変数 (let、const)、データ型 (文字列、数値、ブール値)、演算子 ( 、 ===、!)。
• 学習リソース: MDN JavaScript 基本チュートリアル、freeCodeCamp の JS 構文コース。
• 演習: BMI を計算するか、摂氏を華氏に変換するコードを作成します。

2 日目: フローの制御

• トピック: 条件文 (if/else、switch)、ループ (for、while)。
• 学習リソース: JavaScript.info 条件文とループ。
• 演習: FizzBu​​zz 問題を解き、素数を出力します。

3 日目: 関数

• トピック: 関数の宣言、パラメーター、戻り値、アロー関数、スコープ。
• 学習リソース: MDN 機能ガイド。
• 演習: 文字列を反転するか、階乗を計算する関数を作成します。

4 日目: DOM 操作

• テーマ: 要素 (querySelector) を選択し、コンテンツ (textContent、innerHTML)、スタイル (classList) を変更します。
• 学習リソース: freeCodeCamp DOM 操作チュートリアル。
• 演習: ページの背景色を変更するボタンを作成します。

5 日目: イベント

• トピック: イベント リスナー (クリック、送信)、イベント オブジェクト、preventDefault()。
• 学習リソース: JavaScript.info イベントの概要。
• 演習: ダーク/ライト モードを切り替えるボタンを作成します。

6 日目: アレイ

• トピック: 配列メソッド (プッシュ、ポップ、マップ、フィルター、forEach)。
• 学習リソース: MDN アレイ ガイド。
• 演習: 配列から偶数をフィルターするか、名前をアルファベット順に並べ替えます。

7 日目: レビューと小規模プロジェクト

• 復習: コードを参照せずに前の演習を書き直します。
• 小規模プロジェクト: シンプルなカウンター アプリ (増加/減少ボタン)。

第 2 週: 高度な概念

8日目: オブジェクト

• トピック: オブジェクト リテラル、メソッド、このキーワード、構造化代入。
• 学習リソース: JavaScript.info オブジェクトの基本。
• 演習: プロファイル データを更新するメソッドを含むユーザー オブジェクトを作成します。

9 日目: 非同期 JavaScript

• トピック: コールバック関数、Promise、async/await、fetch()。
• 学習リソース: MDN 非同期 JavaScript。
• 演習: JSONPlaceholder API からデータを取得し、タイトルを表示します。

10 日目: エラー処理

• テーマ: トライ/キャッチ、エラーのスロー、デバッグ用のコンソールの使用。
• 学習リソース: JavaScript.info エラー処理。
• 演習: API フェッチ コードにエラー処理を追加します。

11 日目: ES6 の機能

• テーマ: テンプレート リテラル、拡張/剰余演算子、モジュール (インポート/エクスポート)。
• 学習リソース: 全員向け ES6 (無料コース)。
• 演習: ES6 構文を使用して古いコードをリファクタリングします。

12 日目: ローカル ストレージ

• トピック: localStorage、JSON.stringify()、JSON.parse()。
• 学習リソース: MDN Web ストレージ API。
• 演習: ユーザー設定の保存と取得 (ダーク モードなど)。

13 日目: クロージャとコールバック関数

• トピック: 字句スコープ、クロージャーの例、高階関数。
• 学習リソース: MDN クロージャ。
• 演習: 関数ファクトリー (乗算関数など) を作成します。

14 日目: 最終レビューとプロジェクトの準備

• レビュー: DOM、イベント、localStorage を組み合わせた小さなアプリケーションを構築します。
• 準備: HTML/CSS/JS ファイルを含むプロジェクト フォルダーをセットアップします。

知識を統合し拡張するための 5 つのプロジェクト

難易度と独立性を高めながら、これらのプロジェクトを順番に構築します。ドキュメントと Google を使用して、発生した問題を解決します。

1。問題のリスト（ジュニア）

• 説明：タスクが完了した追加、削除、マークが記録されます。
コアコンセプト：
• dom操作（動的レンダリングタスク）。
  • イベント処理（送信、イベントのクリック）。
  • 配列メソッド（削除タスクのフィルタリング）。
  • ローカルストレージ（リロード時の永続的なタスク）。
2。気象アプリケーション（中間）

説明：API（たとえば、OpenWeathermap）からの

実際の天気データが取得されます。
• コアコンセプト：
• fetch（）およびasync/await。 JSONデータを使用します。
  • API障害のエラー処理。
  ユーザー入力（City Search）Dynamic Update Domに基づいて
  • 。
  3。TESTゲーム（中および上級）

説明：複数選択の質問とスコアボードを含む

タイミングテスト。

コアコンセプト：
• オブジェクト指向設計（テストおよび問題カテゴリ）。
• setintervalはタイマーに使用されます。 ステータス管理（現在の問題の追跡、スコア）。
  回答ボタンのイベント委員会。
  • 4。予算トラッカー（Advanced）
  説明：
  チャート（chart.js）を使用して、収入/支出を追跡します。

コアコンセプト：

複雑な状態（トランザクション、残高、カテゴリ）。
• および3番目のパーティライブラリ統合（chart.js）。
フォーム検証とエラーフィードバック。
• データの永続性のためのローカルストレージ。
  5。フルスタック書店（高度）
  • 説明：
  • コアコンセプト：
REST API Design（get、post、delete）。

高度な非同期操作（フロントバックエンド通信）。

モジュラーコード（個別のAPIサービスモジュール）。
• 基本知識の展開（Digitalon、Netlify）。
• 成功の秘密
  • 毎日のコーディング：
  たとえ30分しかない場合でも、筋肉の記憶を強化できます。
  寮の問題：
  • pseudo -codeを使用して、徐々にプロジェクトを計画します。
  • ハグのデバッグ：
  console.log（）とchrome devtoolsの使用を学びます。
大胆な再構築：

コードが実行された後、コードの読みやすさと効率を改善します。

この計画は、構造学習と創造的な問題の解決策のバランスをとります。幼い頃から始めて、頻繁に繰り返され、進歩を祝います！ ？

以上がJavaScript総合学習プラン（ルール）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。