JavaScript/Meletakkan Kod

Sebelum: Atur cara Pertama Indeks Berikut: Struktur Leksikal

Unsur Skrip

sunting

Semua kod JavaScript, apabila diletakkan ke dalam dokumen HTML, perlu diletakkan di dalam unsur skrip. Unsur skrip digunakan untuk memaut fail JavaScript luar ataupun memuatkan kod penskripan sebaris (yakni cebisan skrip di dalam fail HTML). Sebuah unsur skrip yang memaut fail JavaScript luar berupa sedemikian:

<script type="text/javascript" src="script.js"></script>

sementara sebuah unsur skrip yang memuatkan JavaScript sebaris berupa demikian:

<script type="text/javascript">
    // Kod JavaScript di sini
</script>

Penskripan sebaris memiliki kelebihan kerana kedua-dua HTML dan JavaScript anda berada dalam satu fail dan ini memudahkan kerja-kerja pembangunan dan ujian. Namun demikian, disarankan JavaScript yang mengandungi fungsi JavaScript diletakkan dalam fail berasingan. Ini kerana ia dapat digunakan dalam lebih daripada satu halaman dan juga untuk mengasingkan kandungan halaman daripada fiilnya.

Bahasa Penskripan

sunting

Unsur skrip akan bekerja dalam kebanyakan pelayar oleh sebab pada masa ini JavaScript ialah bahasa penskripan lalai. Namun, disaranakan anda menetapkan jenis skrip yang anda guna kerana berkemungkinan bahasa penskripan lalai ini bertukar.

Bahasa penskripan dapat ditetapkan secara bersendiri dalam unsur skrip, dan anda juga boleh mengguna tag meta pada pengepala dokumen bagi menetapkan bahasa penskripan lalai bagi keseluruhan halaman.

<meta http-equiv="Content-Script-Type" content="text/javascript" />

Mahupun text/javascript diluputkan secara formal pada April 2006 oleh [bahasa Inggeris] RFC 4329 [1] dan digantikan application/javascript, penggunaan text/javascript masih diutamakan oleh sebab kehadiran pengesah HTML dan peleyar sesawang yang lama yang tidak mampu memahami application/javascript. [2]

JavaScript Sebaris

sunting

JavaScript sebaris membolehkan anda bekerja dengan HTML dan JavaScript dengan mudah pada laman yang sama. Cara ini kerap digunakan bagi menguji idea-idea dan juga apabila kod skrip itu khusus bagi laman tertentu.

<script type="text/javascript">
    // Kod JavaScript di sini
</script>

Penanda ulasan HTML Sebaris

sunting

Ulasan sebaris HTML berfungsi bagi menindas paparan kod skrip dalam bentuk teks biasa oleh pelayar-pelayar sesawang lama yang tidak memahami unsur script.

<script type="text/javascript">
    <!--
    // Kod JavaScript di sini
    // -->
</script>

Pelayar-pelayar lama yang tidak memahami unsur script akan mentakrif kesemua kandungan unsur script di atas sebagai satu ulasan HTML, bermula dengan "<!--" dan berakhir dengan "-->"; dengan membawa kesan skrip itu diabaikan sepenuhnya. Sekiranya ulasan HTML tidak hadir, kod akan dipaparkan dalam bentuk teks biasa oleh pelayar-pelayar ini.

Pelayar-pelayar semasa yang memahami unsur script akan mengabaikan baris pertama unsur script jika ia bermula dengan "<!--". Dalam kes di atas, baris pertama JavaScript sebenar ialah baris "// Kod JavaScript di sini".

Baris terakhir skrip, "// -->", ialah ulasan JavaScript satu baris yang menghalang tag akhir ulasan HTML "-->" daripada ditakrif sebagai JavaScript.

Penggunaan penanda ulasan jarang sekali diperlukan pada hari ini kerana pelayar yang tidak memahami unsur script sudah jarang ada. element are virtually non-existent. Pelayar-pelayar awal ini adalah Mosaic, Netscape 1, dan Internet Explorer 2. Bermula dengan Netscape 2.0 pada Disember 1995 dan Internet Explorer 3.0 pada Ogos 1996, pelayar-pelayar dapat mentakrif JavaScript[3] Walau bagaimanapun, apa jua pelayar moden yang tidak mendokong JavaScript dapat mengenali tag <script> dan tidak memaparkannya kepada pengguna.

JavaScript Sebaris XHTML

sunting

Dengan XHTML, kaedahnya berlainan sedikit:

<script type="text/javascript">
    // <![CDATA[
    // Kod JavaScript di sini
    // ]]>
</script>

Perhatikan bahawa kedua-dua tag <![CDATA[ diulaskan keluar (tidak dipaparkan). Kod// menghalang pelayar daripada menyalah tafsir <![CDATA[ sebagai penyataan JavaScript (yang merupakan ralat sintaks).

Pautan ke skrip luar

sunting

JavaScript sering distor dalam sebuah fail agar ia dapat digunakan oleh banyak laman di tapak web anda. Ini memudahkan kerja-kerja mengemas kini kod disamping mengurangkan penggunaan ruang pelayan anda. Kaedah ini disarankan bagi [Inggeris] mengasingkan fiil (JavaScript) daripada kandungan ((X)HTML) dan ia dapat mengelakkan isu ketidakserasian dengan ulasan sebaris dalam XHTML dan HTML.

Tambah src="script.js" kepada tag pembukaan script. Gantikan script.js dengan laluan ke fail .js yang mengandungi JavaScript.

Oleh sebab pelayan menyediakan jenis kandungan apabila fail diminta (oleh pelayar), penetapan jenis fail tidak wajib dilakukan apabila memautkan laman ke skrip-skrip luar. Walau bagaimanapun, disarankan penetapan jenis sebagai text/javascript, kerana khuatir pelayan tidak dipasang dengan betul dan juga bagi mengelak masalah dengan pengesahsahihan HTML.

<script type="text/javascript" src="script.js"></script>

Tempat letak Unsur Skrip

sunting

Unsur script boleh diletakkan hampir di mana-mana tempat dalam fail HTML.

Lokasi piawai ialah di dalam unsur head. Namun, peletakan di dalam body masih dibenarkan.

<!DOCTYPE html>
<html>
<head>
    <title>Tajuk laman Web</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
<!-- Kod HTML di sini -->
</body>
</html>

Namun demikian, terdapat beberapa amalan baik bagi mempercepatkan tapak sesawang anda [Inggeris] [4] (amalan baik bagi memperceptakan laman web anda) daripada Yahoo! Developer Network yang menetapkan peletakan berlainan bagi skrip-skrip, sehingglah [Inggeris] put scripts at the bottom, (letak skrip di bahagian bawah) sebelum tag </body>. Ini akan mempercepatkan muat turun, dan juga membolehkan manipulasi DOM secara langsung, semasa laman dimuatkan.

<!DOCTYPE html>
<html>
<head>
    <title>Tajuk laman Web</title>
</head>
<body>
<!-- Kod HTML di sini -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Rujukan

sunting
  1. RFC 4329: Scripting Media Types
  2. "application/javascript" and "application/ecmasscript" media types not recognized.
  3. w:JavaScript#Sejarah dan penamaan.
  4. Yahoo: best practices for speeding up your web site


Sebelum: Atur cara Pertama Indeks Berikut: Struktur Leksikal