検索

ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript を学ぶ正しい方法

JavaScript を学ぶ正しい方法

巴扎黑
巴扎黑オリジナル
2017-08-04 13:16:371328ブラウズ

この方法で JavaScript を学習しないでください

最初から大量の JavaScript のオンライン チュートリアルに没頭しないでください。これは最悪の学習方法です。数え切れないほどのチュートリアルを見た後は効果的かもしれませんが、階層なしで何かを学ぶのは非常に非効率的です。実際に JavaScript を使用して Web サイトや Web アプリケーションを構築する場合は、依然として頻繁に行き詰まってしまいます。全体として、この学習アプローチは、言語をツールとして、つまり個人的なツールとして使用する方法についての混乱につながります。

さらに、尊敬される JavaScript のゴッドファーザーである Douglas Crockford が書いた「The Essence of JavaScript Language」から JavaScript を学び始めることを提案する人もいるかもしれません。ただし、Crockford 氏は JavaScript について知り尽くしており、JavaScript 界のアインシュタインとして知られていますが、彼の「JavaScript 言語エッセンス」は初心者が学ぶのには適していません。この本では、JavaScript の核となる概念を徹底的、明確、簡潔に説明しません。しかし、より高度な学習ルートについては、Crockford 氏のビデオを見ることをお勧めします。

また、Codecademy のような Web サイトから JavaScript を学ぶだけではいけません。たとえ JavaScript コードの小さなスニペットをたくさん書く方法を知っていたとしても、Web アプリケーションの構築方法はまだ学べないからです。それでも、後ほど補助学習リソースとして Codecademy をお勧めします。

  • プログラミング分野の質問と回答のフォーラムである Stack Overflow に無料で登録してください。ここで質問すると、たとえあなたの質問が非常に基本的で愚かに思えたとしても、Codecademy よりも良い回答が得られます (愚かな質問など存在しないことを忘れないでください)。

  • Codecademy に無料で登録してください。Codecademy は、ブラウザーで直接コードを記述できるオンライン学習プラットフォームです。

  • JavaScriptIsSexy に関するいくつかのブログ投稿 (オブジェクト、クロージャー、変数のスコープとプロモーション、関数などを含む)。

JavaSctipt 学習ルート

コースのシラバス全体を完了するには 6 ～ 8 週間かかり、完全な JavaScript 言語 (jQuery と一部の HTML5 を含む) を学習します。 6 週間ですべてのコースを完了する時間がない場合 (これは間違いなくより困難です)、8 週間以上は取らないようにしてください。時間がかかるほど、さまざまな知識を習得し、記憶するのが難しくなります。

1~2 週間 (入門、データ型、式、演算子)

  1. HTML と CSS をよく知らない場合は、Codecademy で基本的な Web タスクを完了してください。

  2. 『JavaScript の決定版ガイド』または『JavaScript による高度なプログラミング』の序文と第 1 章から第 2 章を読んでください。

  3. 非常に重要: この本で出てくるすべてのサンプル コードは、手動で入力して Firefox または Chrome ブラウザー コンソールで実行し、できるだけ実際に試してみる (さまざまな実験を行う) 必要があります。 jsfiddle を使用することもできますが、Safari は使用しないでください。コードのテストとデバッグには、Firefox と Firebug プラグインを使用することをお勧めします。ブラウザ コンソールでは、JavaScript コードを作成して実行できます。

  4. Codecademy JavaScript Track の JavaScript の概要 セクションを完了してください。 Introduction to JavaScript部分。

  5. 阅读《JavaScript权威指南》第3~4章。或者阅读《JavaScript高级程序设计》第3~4章。你可以跳过位操作

    「JavaScript の決定版ガイド」の第 3 章～第 4 章を読んでください。または、「JavaScript による高度なプログラミング」の第 3 章から第 4 章を読んでください。 ビットごとの操作 の部分は、JavaScript のキャリアでは通常必要ないため、スキップできます。
  6. 繰り返しになりますが、時々立ち止まってブラウザ コンソール (または JSFiddle) にコードを入力して、さまざまなテストを実行してください。いくつかの変数を変更したり、コード構造を変更したりできます。

  7. 『JavaScript の決定版ガイド』の第 5 章を読んでください。 「JavaScript 高度なプログラミング」については、関連する知識がすでに網羅されているため、当面は読むタスクはありません。

Codecademy JavaScript Track のパート 2 ～ 5 を完了してください。

      3~4週間 (オブジェクト、配列、関数、DOM、JQuery)

      1. 次の3つから1つを選択してください:
    2冊の本でさらに詳しく説明しますが、私のブログを読んでいただければ幸いです。 post の場合は、これらの詳細を自信を持ってスキップできます。

  • 私のブログ投稿「JavaScript オブジェクトの説明」を読んでください。

  • 「JavaScript の決定版ガイド」の第 6 章を読んでください。

「JavaScript による高度なプログラミング」の第 6 章を読んでください。注: 「オブジェクトについて」セクションを参照してください。

  • 『JavaScript の決定版ガイド』の第 7 章から第 8 章、または『JavaScript による高度なプログラミング』の第 5 章と第 7 章を​​読んでください。

    🎜🎜この時点では、ブラウザコンソールでのコードの作成、if-else ステートメント、for ループ、配列、関数、オブジェクトなどのテストに多くの時間を費やしているはずです。さらに重要なことは、Codecademy を使用せずに、独自にコードを書くことを練習して習得する必要があることです。 Codecademy で質問を行う場合、各タスクは簡単である必要があり、ヘルプやプロンプトは必要ありません。まだ Codecademy に行き詰まっている場合は、ブラウザに戻って練習するのが最善の方法です。ジェームズが若い頃に近所のバスケットボールコートで練習したように、ビル・ゲイツは自宅の地下室でプログラミングを学びました。 🎜

    練習を続ければ、この小さな進歩の積み重ねの効果は驚くべきものになるでしょう。この戦略の価値を理解し、実現可能であると信じて、それに全力を注ぐ必要があります。

    Codecademy は熟練したという錯覚を生み出します。
    Codecademy を使用する際の最大の問題は、そのプロンプトと小さなコード スニペットによって人々が簡単に答えを思いつき、この知識ポイントを習得したかのような錯覚を引き起こすことです。現時点では見えないかもしれませんが、これを行うとコードは独立しなくなります。

    しかし、今のところ、Codecademy は依然としてプログラミング学習の優れたヘルパーです。特に、小規模プロジェクトや小規模アプリケーションの開発プロセスを理解するために、if ステートメント、for ループ、関数、変数などの基本的なコード構造をガイドします。

  • Codecademy に戻って JavaScript ルートを完了します。パート 6 ～ 8 を完了します (データ構造はオブジェクト 2 である必要があります)。

  • Codecademy のプロジェクト ルートで 5 つの基本的な小規模プロジェクト (基本プロジェクト) を実装します。完了したら、Codecademy は必要なくなります。これは良いことです。なぜなら、自分でやればやるほど習得が早くなり、独立してプログラミングを開始するための準備が整うからです。

  • 『The Definitive Guide to JavaScript』の第 13 章、第 15 章、第 16 章、および第 19 章を読んでください。または、『JavaScript による高度なプログラミング』の第 8 章、第 9 章、第 10 章、第 11 章、第 13 章、および第 14 章を参照してください。この本では jQuery については説明しておらず、Codecademy での jQuery の知識は十分にカバーされていません。 jQuery の公式チュートリアルは無料です。http://try.jquery.com/

    また、『The Definitive Guide to JavaScript』の第 19 章で jQuery について詳しく学ぶことができます。

  • jQuery チュートリアル http://try.jquery.com/ をすべて完了してください。

    • 究極の JavaScript エディター: WebStorm

    • 最初のプロジェクトを実装する前に、将来 JavaScript 開発者になる予定がある場合、または JavaScript を頻繁に使用する場合は、今すぐ WebStorm の試用版をダウンロードすることをお勧めします。ここでは、WebStorm (このコースのために特別に書かれたもの) の使用方法を学ぶことができます。 WebStorm が JavaScript プログラミングに最適なエディター (または IDE) であることは疑いの余地がありません。 30 日間の試用後は $49.00 かかりますが、JavaScript 開発者としては、書籍を購入する以外にこれが最も賢明な投資となるはずです。

    • WebStorm で JSHint が有効になっていることを確認してください。 JSHint は、JavaScript コードのエラーや潜在的な問題をチェックして、チームに仕様に従ってコードを作成するよう強制するツールです。 WebStorm の使用で最も優れている点は、JSHint が、ワープロ プログラムのスペル チェッカーと同じように、誤ったコードの下に赤い線を自動的に表示することです。 JSHint はすべてのコード エラー (HTML を含む) を表示し、良い習慣を身につけてより優れた JavaScript プログラマーになるよう促します。 これは重要です、WebStrom と JSHint がどれほど役に立っているかを本当に理解したら、戻ってきて私に感謝するでしょう。

    • さらに、WebStorm はプロフェッショナルな JavaScript Web アプリケーションを作成するための世界クラスのプロフェッショナル向け IDE であるため、今後頻繁に使用されることになります。また、Node.js、Git、その他の JavaScript フレームワークとも統合されているため、スター JavaScript 開発者になった場合でも、引き続き使用できます。将来的にさらに多くの JavaScript IDE が登場しない限り。

    • 公平を期すために、ここでは WebStorm に次いで 2 番目に優れた JavaScript エディターである Sublime Text 2 について触れます。 WebStorm ほど機能が豊富ではなく、完全ではありません (多数のプラグインを追加したとしても)。小さな変更を行うときは、JavaScript を含む多くの言語をサポートする Sublime Text 2 を使用しますが、完全な JavaScript Web アプリケーションの構築には使用しません。

    最初のプロジェクト - 動的な質問と回答のアプリケーション

    この時点で、安定した保守可能な Web アプリケーションを構築するための十分な知識を習得しました。私があなたのために設計したアプリケーションを完成させる前に、次の章を読まないでください。行き詰まった場合は、Stack Overflow で質問し、概念を完全に理解するまで本書の関連資料を読み直してください。

    次に、次の機能を使用して JavaScript の質問と回答のアプリケーション (HTML と CSS も使用されます) の構築を開始します:

      • これは単一選択のテスト問題のセットです。完了すると、ユーザーのスコアが表示されます。表示されます。

      • Q&A アプリは好きなだけ質問を生成でき、各質問には好きなだけ選択肢を含めることができます。

      • 最後のページにユーザーの結果を表示します。このページには結果のみが表示されるため、最後の質問を削除してください。

      • 配列を使用してすべての質問を保存します。各質問は、選択肢と正解を含めてオブジェクトにカプセル化されます。質問の配列は次のようになります: 

    // 这里只演示一个问题，你要把所有问题都添加进去 var allQuestions = [ { question: "Who is Prime Minister of the United Kingdom?", choices: [ "David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer: 0 } ];

    • ユーザーが「次へ」をクリックすると、document.getElementById または jQuery を使用して次の質問を動的に追加し、現在の質問を削除します。このバージョンでは、「次へ」が唯一のナビゲーション ボタンです。

    • この記事の下にコメントして助けを求めることができます。Stack Overflow で質問するとタイムリーで正確な回答が得られます。

      5~6週間（正規表現、Windowオブジェクト、イベント、JQuery）

      励ましの言葉

      あなたの学習の成功と決して諦めないことを祈っています！それができない自分が愚かだと感じるときは (そして、時々そうなるでしょう)、世界中の他の初心者や経験豊富なプログラマーさえも、時々同じように感じていることを思い出してください。

      完全な初心者の場合、特に 10 代を過ぎている場合、コーディングを始めるのは難しいかもしれません。若い人たちは何も恐れることも重荷もないので、自分の好きなことに多くの時間を費やすことができます。したがって、さまざまな困難は彼らにとって一時的な障害にすぎません。

      しかし、10代を過ぎると、早く結果を見たくなるでしょう。細かいことを理解するために何時間も費やす時間はそれほど多くないからです。ただし、これらのことを徹底的に理解する必要があります。完全に理解できるまで、コースのタスクを完了することにこだわり、すべてのバグを見つけてください。勝利の向こう側に到達すると、すべての価値があったことがわかり、プログラミングが非常に面白く、それに費やした時間は十分に報われることになるでしょう。

      プログラムを構築することの強烈な喜びを感じ、理解する必要があります。知識のポイントを段階的にマスターし、少しずつプログラムを構築すると、やる気と肯定感が得られ、素晴らしい満足感が得られます。

      ある日、あなたは耐えたすべての困難がそれだけの価値があったことに気づくでしょう。なぜなら、あなたは輝かしいプログラマーになろうとしているだけでなく、JavaScript 開発者としての将来が明るいことも知っているからです。あなた以前の何千人ものプログラマーと同じように、あなたは最も困難なバグを克服し、退行せず、手放さず、諦める言い訳をしませんでした。

      何かを達成したら、それが顕微鏡で見えないほど小さなプロジェクトであっても、遠慮なく結果を私たちと共有してください。

      原文: http://javascriptissexy.com/how-to-learn-JavaScript-properly/

      • クライアントデータ検証を追加: 次の質問を入力する前に、ユーザーが現在の質問に回答していることを確認します。

      • 「戻る」ボタンを追加して、ユーザーが戻って回答を変更できるようにします。最大でも最初の質問に戻ることができます。ユーザーが回答した質問については、選択ボタンが選択された状態で表示されることに注意してください。こうすることで、ユーザーはすでに回答された質問に再度回答する必要がなくなります。

      • jQuery を使用してアニメーションを追加します (現在の質問をフェードアウトし、次の質問にフェードインします)

      • IE8 と IE9 でテストし、バグを修正します。ここで忙しいはずです。 ;D

      • 質問を JSON ファイルにエクスポートします

      • ユーザー認証を追加し、ユーザーのログインを許可し、ユーザー認証情報を ローカル ストレージ (ローカル ストレージ、HTML5 ブラウザ ストレージ) に保存します。 。 本地存储（local storage，HTML5浏览器存储）。

      • 使用cookies记住用户，当用户再次登陆时显示“欢迎用户名

        Cookie を使用してユーザーを記憶し、ユーザーが再度ログインしたときに「ようこそ username へようこそ」と表示します。

        7 週間、8 週間に延長可能 (クラス、継承、HTML5)
      • 改善を続ける

      • Q&A 要素をプロフェッショナルに見せるには、ページ レイアウトに Twitter Bootstrap を使用します。追加のボーナスとして、Twitter Bootstrap のラベル コントロール (翻訳者注: 元のアドレスは無効で変更されています) を使用して質問を表示し、各ラベルに 1 つの質問を表示します。

      • Handlebars.js を学習し、Q&A アプリケーションで Handlebars.js テンプレートを使用します。 JavaScript コード内に HTML コードが存在しなくなります。 Q&A アプリは現在、ますます進化しています。

      Q&Aに参加したユーザーの結果を記録し、Q&Aアプリケーションで他のユーザーとのランキング比較を表示します。

    2. backbone.jsに精通している

    3. 上級中級および上級JavaScript

    4. 漏れがないNode.jsに精通している

      5. Meteor.jsを使い始める（近日公開予定）

      6. 3最高の JavaScript フロントエンド フレームワーク (近日公開)

      1. 『The Definitive Guide to JavaScript』の第 9、18、21、22 章を読んでください。

        または、私のブログ投稿「JavaScript オブジェクト指向の必知事項」を読むか、「JavaScript 高度なプログラミング」の第 6 章、第 16 章、第 22 章、第 24 章を読んでください。第 6 章は「オブジェクトの作成」と「継承」(継承) の部分のみを読んでください。注: このパートは、このコースで最も技術的に集中した内容です。自分の状況に応じてすべてを読むかどうかを検討してください。少なくとも、プロトタイプ パターン (Prototype Pattern)、ファクトリ パターン (Factory Pattern)、およびプロトタイプの継承 (Prototypal Inheritance) を知っている必要があります。その他は必須ではありません。

      2. Q&A アプリケーションのアップグレードを続けます:

      3. Backbone.js と Node.js を学習した後、これら 2 つの最新の JavaScript フレームワークを使用して、Q&A アプリケーションのコードをリファクタリングして複雑にします。ページのモダンな Web アプリケーション。また、ユーザーの認証情報とグレードを MongoDB データベースに保存する必要があります。

      4. 次: プロジェクトを構想し、鉄が熱いうちに迅速に開発します。行き詰まった場合は、「JavaScript の決定版ガイド」または「JavaScript による上級プログラミング」を参照してください。もちろん、Stack Overflow のアクティブ ユーザーになり、より多くの質問をし、他の人の質問に答えようとすることも必要です。

        1. 『JavaScript の決定版ガイド』の第 10 章、第 14 章、第 17 章、および第 20 章を読んでください。

          または、「JavaScript による高度なプログラミング」の第 20 章と第 23 章を読んでください。

        2. サンプル コードをブラウザ コンソールに入力し、できる限り試して、その仕組みと何ができるかを完全に理解するまでさまざまなテストを行ってください。

        3. この時点では、武道の達人が出てくるのと同じように、JavaScript を非常に快適に使用できるはずです。しかし、まだマスターになることはできません。新しく得た知識を繰り返し使用し、学習し、改善し続ける必要があります。

        4. バージョンアップ前に作ったQ&Aアプリ

        以上がJavaScript を学ぶ正しい方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

        声明：
        この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
        前の記事：JavaScript でオブジェクトを作成する 9 つの方法次の記事：JavaScript でオブジェクトを作成する 9 つの方法

        関連記事

        続きを見る