Langkau ke kandungan
WANCODE
EN

Apa Itu JavaScript?

12 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

  • Terangkan apa yang JavaScript tambah pada halaman yang tidak boleh dibuat oleh HTML dan CSS
  • Sambungkan fail script.js kepada halaman dengan tag <script>
  • Guna console.log dan baca outputnya dalam panel Konsol
  • Baca mesej ralat (error), cari barisnya, dan betulkan

Idea utama

HTML ialah apa yang ada pada halaman dan CSS ialah rupanya. JavaScript ialah apa yang halaman itu lakukan — senarai arahan yang pelayar jalankan, satu demi satu, dari atas ke bawah.

Setakat ini halaman anda statik: rupanya sama sahaja walau apa pun yang pelawat buat. JavaScript mengubah semua itu. Ia boleh bertindak balas kepada klik, mengira jumlah troli belian, menyemak sama ada borang sudah diisi, atau mengemas kini halaman tanpa muat semula. Setiap laman web moden — dari perbankan dalam talian hingga Shopee — menggunakannya.

Menyambungkan JavaScript kepada halaman

JavaScript biasanya diletakkan dalam failnya sendiri, seperti script.js. HTML memuatkannya dengan tag <script>. Kita letakkan tag ini di hujung <body> supaya pelayar sudah siap membina halaman sebelum kod kita dijalankan.

index.html
<body>
  <h1>My first script</h1>
  <p id="status">JavaScript has not run yet.</p>

  <script src="script.js"></script>
</body>

Arahan pertama anda: console.log

console.log(...) mencetak apa sahaja di dalam kurungan ke konsol — buku nota tersembunyi untuk developer. Dalam WANCode, ia ialah panel Konsol di bawah pratonton. Dalam pelayar biasa, buka DevTools (F12, atau Ctrl+Shift+J di Windows / Cmd+Option+J di Mac) dan pilih tab Console.

script.js
console.log("Hello from script.js!"); // text goes inside quotes
console.log(2 + 3);                   // numbers don't — this prints 5
console.log("2 + 3");                 // this prints the text 2 + 3

Teks dalam tanda petikan dicetak sama seperti yang ditulis. Kod tanpa tanda petikan dikira dahulu.

Statement dan komen

Setiap arahan dipanggil statement. Biasanya kita tulis satu statement setiap baris dan tamatkan dengan titik koma ;. Pelayar menjalankannya mengikut urutan, dari atas ke bawah. Komen pula ialah nota yang JavaScript langkau sepenuhnya: // menjadikan baki baris itu komen, dan /* … */ boleh membalut beberapa baris.

JavaScript
// Step 1: say hello
console.log("Selamat pagi!");

/* Step 2 is switched off for now.
console.log("This will not print");
*/

console.log("Step 3 runs after step 1");

Komen sebagai suis hidup/mati

Developer selalu "comment out" satu baris untuk mematikannya tanpa memadamnya. Buang // untuk menghidupkannya semula.

Ralat itu perkara biasa — baca mesejnya

Setiap programmer berjumpa ralat setiap hari. Mesej ralat ialah petunjuk, bukan hukuman. Setiap mesej ada tiga bahagian yang patut dibaca:

Text
ReferenceError: consol is not defined
    script.js, line 5
  1. Jenisnya — ReferenceError bermaksud anda guna nama yang JavaScript tidak kenal.
  2. Butirannya — consol is not defined memberitahu nama yang mana: ada salah ejaan, sepatutnya console.
  3. Lokasinya — nama fail dan nombor baris memberitahu di mana perlu dilihat.

Dua jenis ralat berkelakuan berbeza. SyntaxError bermaksud JavaScript tidak dapat membaca fail anda langsung — contohnya tanda petikan atau kurungan yang tertinggal — jadi tiada apa-apa dalam fail itu dijalankan, termasuk baris 1. Ralat lain, seperti ReferenceError, berlaku semasa kod dijalankan: semua sebelum baris yang salah berjalan, kemudian skrip berhenti dan baris selepasnya tidak dijalankan.

Text
SyntaxError in script.js (line 5): Unterminated string constant

"Unterminated string constant" bermaksud satu teks dibuka dengan tanda petikan tetapi tidak pernah ditutup.

Statement
Satu arahan, seperti console.log("Hi");.
Console
Panel tempat kod anda mencetak mesej dan tempat ralat dipaparkan.
Comment
Nota untuk manusia. JavaScript mengabaikannya.
Error
Mesej yang menerangkan kenapa JavaScript terpaksa berhenti. Baca jenis, butiran dan barisnya.

Lihat panel Konsol: bukannya tiga mesej, cuma ada satu ralat merah — mesej pertama pun tidak dicetak. Baca ralat itu: apa jenisnya, apa katanya, dan baris mana? Betulkan baris itu supaya ketiga-tiga mesej dicetak. Kekalkan teks mesejnya.

Semakan

  • Konsol tidak menunjukkan sebarang ralat
  • "I am learning JavaScript." dicetak
  • Mesej ketiga juga dijalankan

Uji kefahaman

Q1

Kenapa kita biasanya letak <script src="script.js"></script> betul-betul sebelum </body>?

Q2

Baris 2 dalam skrip menghasilkan ralat. Apa yang berlaku kepada baris 3, 4 dan 5?

Q3

Apa yang baris ini lakukan? // console.log("Hi");

Apa yang anda pelajari

  • JavaScript ialah lapisan tingkah laku halaman web; pelayar menjalankannya dari atas ke bawah.
  • Muatkannya dengan <script src="script.js"></script> di hujung <body>.
  • console.log mencetak ke Konsol; // dan /* */ menulis komen yang JavaScript abaikan.
  • Ralat menghentikan skrip. Baca jenisnya, butirannya dan nombor barisnya — kemudian betulkan yang pertama.
Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.

Langkah 1 daripada 3