以下は私の考えや得たものであり、私の個人的な知識が浅いため、間違っている点や不正確な点があれば、批判して修正してください。
フロントエンド開発の三銃士である HTML+CSS+JS はよく知られており、フロントエンド プログラマーはこれら 3 つのコンポーネントを使用して多数の Web を形成します。ページ。しかし、初めて学習するときは、すべての知識ポイントをすぐに理解することはできないため、各コンポーネントの機能や役割分担についてあまり知らない、盲人が象をつかもうとしているように感じることがよくあります。 、全体として学習の方向性が掴めないので、完全な知識体系を形成するのは難しいです。私の学習の特徴は、基礎的な知識から始めて、それをベースに他の内容を階層的に追加して、最終的に完全な枠組みを形成するのが好きです。これが私が慣れている学習方法です。序盤はまだ少しフラフラしながらも知識が次々と出てきて、表と裏がつながったり、裏が表につながったり。 . まだまだ頑張らないといけません。しかし、内容全体を 2 ~ 3 回読むと、全体の枠組みがより明確になります。簡単に言えば、HTML+CSS+JS の分業はソフトウェアの階層化の概念を体現します。一般的な機能の配分は次のとおりです。HTML はコンテンツの記述を担当し、CSS は要素のスタイルの記述を担当し、JS は Web ページのアクションの実装を担当します。このように、Web ページの開発プロセスがなぜこの 3 つに分かれているのかは、初心者にとっては十分に理解できないことだと思います。
初期の Web ページは静的な Web ページであり、Web ページ内の要素には基本的にアクションがありませんでした。人々は主に情報を閲覧するためにオンラインにアクセスし、Web ページに対する対話性の要件も低かったです。 1996 年の Yahoo の Web サイトを見てみましょう (写真はインターネットから取得したものです) Web ページには、ほとんどの Web ページのスタイルとコンテンツが混在しています。 Web ページのスタイルを変更したい場合は、1 つずつ変更する必要があり、面倒になります。では、この問題をどうやって解決すればいいのでしょうか? Web 開発の先駆者は、スタイルをコンテンツから分離し、Web ページのスタイルを記述するすべてのステートメントを 1 つのファイルに結合しました。このファイルは、カスケード スタイル シート (略して CSS) と呼ばれます。スタイルを変更したい場合は、このファイルからいくつかのセレクターを使用して、特定の要素または特定の種類の要素のスタイルをすばやく変更できるため、効率が向上します。
Web ページからスタイルを削除すると、HTML 言語は Web ページのコンテンツを記述するだけになります。これは何を意味しますか? HTML では、
要素を使用してヘッダー ファイルをマークし、コンテンツとプレゼンテーションの分離が完了したら、Web ページのアクションを説明する必要があります。静的ページの問題の 1 つは、Web ページのコンテンツが生成後に変更されないことです。 Web を閲覧するときは、Weibo にログインしてコメントしたり、転送したりする必要があります。これらの機能はすべて JavaScript (JS) によって実行されます。
JavaScriptは軽量なプログラミング言語であり、C/C++/JAVAのようなデータ型に関する厳密な規制はなく、ポインタや演算子のオーバーロードなどもありません。そういえば、名前に Java が入っているのですが、みんな Java とは関係ないと言っていますが、これは本当に頭が痛いです。これは、「私の名前は潘金蓮」という映画を作っているのに、潘金蓮とは何の関係もないと言うようなものです。 (笑) 冗談です。ただし、比較すると、JavaScript と Java の構文には多くの類似点がありますが、JavaScript は Java よりもはるかに単純です。 Java とは異なり、JS はさまざまなコンポーネントとフレームワークを備えたプラットフォーム言語であり、Web と密接に関係しています。 JS は HTML に挿入することで実行され、JavaScript を通じて HTML 出力を記述したり、イベントに反応したり、HTML コンテンツ、画像、スタイルを変更したり、入力やその他の機能を検証したりできます。基本的に、Web ページ上のすべてのインタラクションは JS 関数を通じて実装されます。この部分は三銃士の中で最も難しい部分でもあり、私は今のところまあまあしかマスターできません。後の記事では、特定の知識ポイントについて詳しく説明します。
JS ファイルと CSS ファイルは最終的に HTML に適用されます。 HTML では、
または