基礎から中級へ: JavaScript を学ぶ私の旅 ✨

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173793085662165.jpg" class="lazy" alt="From Basics to Intermediate: My Journey Learning JavaScript ✨"></p> <p>このガイドは、私の個人的な学習経験に基づいて、JavaScript の基礎から中級の概念までのコースを図示しています。 学習をスムーズにするための重要なポイント、実践例、役立つヒントをまとめました。飛び込んでみましょう!</p> <p><strong>目次</strong></p> <ol> <li>変数</li> <li>配列</li> <li>条件文</li> <li>機能</li> <li>オブジェクト</li> <li>DOM (ドキュメント オブジェクト モデル)</li> <li>イベント</li> <li>HTML と JavaScript の統合</li> </ol> <hr> <p><strong>1.変数</strong></p> <p>変数は、プログラムで使用されるデータのコンテナです。 JavaScript では、これらを宣言する 2 つの主な方法が提供されています。</p> <ul> <li> <code>let</code>: 値が変化する可能性のある変数用。</li> <li> <code>const</code>: 一定のままにする値の場合。</li> </ul> <p><strong>例:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>let age = 25; const name = "Mario";</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p>変数には、数値、テキスト (文字列)、true/false 値 (ブール値)、さらには未定義の値を保持できます。 JavaScript には、標準の算術演算子 ( 、-、*、/、%) と累乗演算子 (**) が用意されています。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>console.log(2 ** 3); // Output: 8</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <hr /> <p><strong>2.配列</strong></p> <p>配列は、単一の変数内に複数の値を格納します。 角括弧を使用して配列を定義します:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>let fruits = ["apple", "banana", "cherry"];</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p>インデックスを使用して要素にアクセスします (0 から開始):</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>console.log(fruits[0]); // Output: apple</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>要素の追加と削除:</strong></p> <p>配列は動的です。それらは変更できます:</p> <ul> <li><code>.push()</code>: 要素を末尾に追加します。</li> <li><code>.unshift()</code>: 先頭に要素を追加します。</li> <li><code>.pop()</code>: 最後の要素を削除します。</li> <li><code>.shift()</code>: 最初の要素を削除します。</li> </ul> <p><strong>例:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>fruits.push("orange"); console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>配列の検索:</strong></p> <ul> <li><code>.indexOf()</code>: 値のインデックスを検索します。</li> <li><code>.includes()</code>: 値が存在するかどうかを確認します。</li> </ul> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>console.log(fruits.indexOf("banana")); // Output: 1 console.log(fruits.includes("grape")); // Output: false</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <hr /> <p><strong>3.条件文</strong></p> <p>条件ステートメントを使用すると、コードで決定を行うことができます。 <code>if</code> と <code>else</code> は一般的に使用されます:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>if (grade > 60) { console.log("You passed!"); } else { console.log("You failed!"); }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>比較演算子:</strong></p> <p>これらの演算子は条件を評価するために不可欠です:</p> <ul> <li><code>===</code> (厳密な等価性)</li> <li><code>!==</code> (厳密な不等式)</li> <li><code>></code> (より大きい)</li> <li><code><</code> (未満)</li> <li><code>>=</code> (以上)</li> <li><code><=</code> (以下)</li> </ul> <hr /> <p><strong>4.関数</strong></p> <p>関数は再利用可能なコードのブロックです。 <code>function</code> キーワードを使用してそれらを定義します:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function greet(name) { return `Hello, ${name}!`; } console.log(greet("Alice")); // Output: Hello, Alice!</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>パラメータと引数:</strong></p><p>関数は入力 (<strong>パラメータ</strong>) を受け入れ、<strong>引数</strong>:</p> で呼び出されたときにそれらを使用できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>let age = 25; const name = "Mario";</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <hr /> <p><strong>5.オブジェクト</strong></p> <p>オブジェクトは、ミニデータベースのようなキーと値のペアのコレクションです:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>console.log(2 ** 3); // Output: 8</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>オブジェクト内のメソッド:</strong></p> <p>オブジェクトには関数 (<strong>メソッド</strong>) を含めることもできます。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>let fruits = ["apple", "banana", "cherry"];</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <hr /> <p><strong>6. DOM (ドキュメント オブジェクト モデル)</strong></p> <p>DOM を使用すると、JavaScript が HTML 要素と対話できるようになります。</p> <p><strong>要素の選択:</strong></p> <p><code>document</code> オブジェクトを使用して要素を選択します:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>console.log(fruits[0]); // Output: apple</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>要素の更新:</strong></p> <p>コンテンツを動的に変更する:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>fruits.push("orange"); console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <hr /> <p><strong>7.イベント</strong></p> <p><code>.addEventListener()</code>:</p> を使用してユーザーのアクション (クリック、キーの押下) に応答します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>console.log(fruits.indexOf("banana")); // Output: 1 console.log(fruits.includes("grape")); // Output: false</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>例: カウンタをインクリメントする:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>if (grade > 60) { console.log("You passed!"); } else { console.log("You failed!"); }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <hr /> <p><strong>8. HTML と JavaScript の統合</strong></p> <p><code><script></code> タグを使用して JavaScript を HTML に直接追加します:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function greet(name) { return `Hello, ${name}!`; } console.log(greet("Alice")); // Output: Hello, Alice!</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p>より大きなスクリプトの場合は、外部 <code>.js</code> ファイルをリンクします:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function add(a, b) { return a + b; } console.log(add(2, 3)); // Output: 5</pre><div class="contentsignin">ログイン後にコピー</div></div> <hr> <p>これで、初級レベルから中級レベルまでの私の JavaScript 学習の旅は終わりです。このガイドがお役に立てば幸いです。 ご自身の学習ヒントを自由に共有したり、コメントで質問したりしてください。コーディングを楽しんでください! ✨</p>

以上が基礎から中級へ: JavaScript を学ぶ私の旅 ✨の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。