Daripada Asas kepada Pertengahan: Perjalanan Saya Belajar JavaScript ✨

<p><img src="https://img.php.cn/upload/article/000/000/000/173793085662165.jpg" alt="From Basics to Intermediate: My Journey Learning JavaScript ✨"></p> <p>Panduan ini mencatat kursus daripada asas JavaScript kepada konsep perantaraan, berdasarkan pengalaman pembelajaran peribadi saya. Saya telah menyusun cadangan penting, contoh praktikal dan petua berguna untuk menjadikan perjalanan pembelajaran anda lebih lancar. Jom terjun!</p> <p><strong>Jadual Kandungan</strong></p> <ol> <li>Pembolehubah</li> <li>Susun atur</li> <li>Pernyataan Bersyarat</li> <li>Fungsi</li> <li>Objek</li> <li>DOM (Model Objek Dokumen)</li> <li>Acara</li> <li>Menyepadukan HTML dan JavaScript</li> </ol> <hr> <p><strong>1. Pembolehubah</strong></p> <p>Pembolehubah ialah bekas untuk data yang digunakan dalam atur cara anda. JavaScript menawarkan dua cara utama untuk mengisytiharkannya:</p> <ul> <li> <code>let</code>: Untuk pembolehubah yang nilainya mungkin berubah.</li> <li> <code>const</code>: Untuk nilai yang sepatutnya kekal malar.</li> </ul> <p><strong>Contoh:</strong></p> <pre class="brush:php;toolbar:false"><code class="language-javascript">let age = 25; const name = "Mario";</code></pre> <p>Pembolehubah boleh menyimpan nombor, teks (rentetan), nilai benar/salah (boolean) atau bahkan nilai yang tidak ditentukan. JavaScript menyediakan operator aritmetik standard ( , -, *, /, %) dan operator eksponen (**).</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(2 ** 3); // Output: 8</code></pre> <hr> <p><strong>2. Tatasusunan</strong></p> <p>Array menyimpan berbilang nilai dalam satu pembolehubah. Gunakan kurungan segi empat sama untuk menentukan tatasusunan:</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">let fruits = ["apple", "banana", "cherry"];</code></pre> <p>Akses elemen menggunakan indeksnya (bermula dari 0):</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits[0]); // Output: apple</code></pre> <p><strong>Menambah dan Mengalih Keluar Elemen:</strong></p> <p> Tatasusunan adalah dinamik; anda boleh mengubah suainya:</p> <ul> <li> <code>.push()</code>: Menambah elemen pada penghujung.</li> <li> <code>.unshift()</code>: Menambah elemen pada permulaan.</li> <li> <code>.pop()</code>: Mengalih keluar elemen terakhir.</li> <li> <code>.shift()</code>: Mengalih keluar elemen pertama.</li> </ul> <p><strong>Contoh:</strong></p> <pre class="brush:php;toolbar:false"><code class="language-javascript">fruits.push("orange"); console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]</code></pre> <p><strong>Susun Carian:</strong></p> <ul> <li> <code>.indexOf()</code>: Mencari indeks nilai.</li> <li> <code>.includes()</code>: Menyemak sama ada nilai wujud.</li> </ul> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits.indexOf("banana")); // Output: 1 console.log(fruits.includes("grape")); // Output: false</code></pre> <hr> <p><strong>3. Kenyataan Bersyarat</strong></p> <p>Pernyataan bersyarat membenarkan kod anda membuat keputusan. <code>if</code> dan <code>else</code> biasanya digunakan:</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">if (grade > 60) { console.log("You passed!"); } else { console.log("You failed!"); }</code></pre> <p><strong>Operator Perbandingan:</strong></p> <p>Pengendali ini penting untuk menilai keadaan:</p> <ul> <li> <code>===</code> (persamaan ketat)</li> <li> <code>!==</code> (ketaksamaan yang ketat)</li> <li> <code>></code> (lebih besar daripada)</li> <li> <code><</code> (kurang daripada)</li> <li><code>>=</code> (lebih besar daripada atau sama dengan)</li> <li> <code><=</code> (kurang daripada atau sama dengan)</li> </ul> <hr /> <p><strong>4. Fungsi</strong></p> <p>Fungsi ialah blok kod yang boleh diguna semula. Tentukan mereka menggunakan <code>function</code> kata kunci:</p> <pre class="brush:php;toolbar:false"><code class="language-javascript">function greet(name) { return `Hello, ${name}!`; } console.log(greet("Alice")); // Output: Hello, Alice!</code></pre> <p><strong>Parameter dan Hujah:</strong></p><p> Fungsi boleh menerima input (<strong> parameter </strong>) dan gunakannya apabila dipanggil dengan argumen <strong> </strong>: </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">let age = 25; const name = "Mario";</code></pre> <hr /> <p> <strong> 5. Objek </strong> <s> </p> Objek adalah koleksi pasangan nilai utama, seperti data mini: <p> </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(2 ** 3); // Output: 8</code></pre> <p> Kaedah dalam objek: <strong> </strong> </p> objek juga boleh mengandungi fungsi (<p> kaedah <strong>): </strong> </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">let fruits = ["apple", "banana", "cherry"];</code></pre> <hr /> <p> 6. DOM (Model Objek Dokumen) <strong> </strong> </p> Dom membolehkan JavaScript berinteraksi dengan elemen HTML. <p> </p> <p> Memilih Elements: <strong> </strong> </p> Gunakan objek <p> untuk memilih elemen: <code>document</code> </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits[0]); // Output: apple</code></pre> <p> Mengemaskini Elemen: <strong> </strong> </p> Ubah suai kandungan secara dinamik: <p> </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">fruits.push("orange"); console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]</code></pre> <hr /> <p> 7. Acara <strong> <s> </strong> bertindak balas terhadap tindakan pengguna (klik, menekan kekunci) menggunakan </p>: <p> <code>.addEventListener()</code> Contohnya: Meningkatkan kaunter: <st> </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">console.log(fruits.indexOf("banana")); // Output: 1 console.log(fruits.includes("grape")); // Output: false</code></pre> <p> <strong> </strong> 8. Mengintegrasikan HTML dan JavaScript </p> <pre class="brush:php;toolbar:false"><code class="language-javascript">if (grade > 60) { console.log("You passed!"); } else { console.log("You failed!"); }</code> <hr> Tambah JavaScript terus ke HTML menggunakan <p> tags: <strong> </strong> </p> untuk skrip yang lebih besar, pautan fail <shime luaran:> <code><script></code> <pre class="brush:php;toolbar:false"><code class="language-javascript">function greet(name) { return `Hello, ${name}!`; } console.log(greet("Alice")); // Output: Hello, Alice!</code></pre> Ini menyimpulkan perjalanan pembelajaran JavaScript saya dari pemula ke peringkat pertengahan! Saya harap panduan ini membuktikan membantu. Jangan ragu untuk berkongsi petua pembelajaran anda sendiri atau bertanya soalan dalam komen! Selamat pengekodan! ✨ <p></p></shime> </li> </ul>

Atas ialah kandungan terperinci Daripada Asas kepada Pertengahan: Perjalanan Saya Belajar JavaScript ✨. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!