Daripada Asas kepada Pertengahan: Perjalanan Saya Belajar 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>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> <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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <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> <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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <hr /> <p><strong>2. Tatasusunan</strong></p> <p>Array menyimpan berbilang nilai dalam satu pembolehubah. Gunakan kurungan segi empat sama untuk menentukan tatasusunan:</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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p>Akses elemen menggunakan indeksnya (bermula dari 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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <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> <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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <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> <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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <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> <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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <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> <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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p><strong>Parameter dan Hujah:</strong></p><p> Fungsi boleh menerima input (<strong> parameter </strong>) dan gunakannya apabila dipanggil dengan argumen <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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <hr /> <p> <strong> 5. Objek </strong> <s> </p> Objek adalah koleksi pasangan nilai utama, seperti data mini: <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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p> Kaedah dalam objek: <strong> </strong> </p> objek juga boleh mengandungi fungsi (<p> kaedah <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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <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> <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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p> Mengemaskini Elemen: <strong> </strong> </p> Ubah suai kandungan secara dinamik: <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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <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> <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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p> <strong> </strong> 8. Mengintegrasikan HTML dan 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;'>if (grade > 60) { console.log("You passed!"); } else { console.log("You failed!"); }</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <hr /> Tambah JavaScript terus ke HTML menggunakan <p> tags: <strong> </strong> </p> untuk skrip yang lebih besar, pautan fail <shime luaran: <p> <code><script></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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> 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>

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!