Beranda>Tutorial Desain Web>Tutorial Javascript

Halo dunia!

Penulis：Eve Cole Waktu Pembaruan：2025-01-14 17:45:51

Bagian tutorial ini membahas tentang inti JavaScript, bahasa itu sendiri.

Namun kami memerlukan lingkungan kerja untuk menjalankan skrip kami dan, karena buku ini online, browser adalah pilihan yang baik. Kami akan meminimalkan jumlah perintah khusus browser (seperti alert ) sehingga Anda tidak menghabiskan waktu mengerjakannya jika Anda berencana untuk berkonsentrasi pada lingkungan lain (seperti Node.js). Kami akan fokus pada JavaScript di browser di bagian tutorial selanjutnya.

Jadi pertama-tama, mari kita lihat bagaimana kita melampirkan skrip ke halaman web. Untuk lingkungan sisi server (seperti Node.js), Anda dapat menjalankan skrip dengan perintah seperti "node my.js" .

Tag "skrip".

Program JavaScript dapat disisipkan hampir di mana saja ke dalam dokumen HTML menggunakan tag <script> .

Misalnya:

 <!DOCTYPE HTML>
<html>

<tubuh>

  <p>Sebelum skrip...</p>

  <skrip>
    alert('Halo dunia!' );
  </skrip>

  <p>...Setelah skrip.</p>

</tubuh>

</html>

Anda dapat menjalankan contohnya dengan mengklik tombol “Mainkan” di pojok kanan atas kotak di atas.

Tag <script> berisi kode JavaScript yang secara otomatis dijalankan ketika browser memproses tag tersebut.

Penandaan modern

Tag <script> memiliki beberapa atribut yang jarang digunakan saat ini tetapi masih dapat ditemukan pada kode lama:

  • Atribut type : <script type =…>

  • Standar HTML lama, HTML4, mengharuskan skrip memiliki type . Biasanya itu type="text/javascript" . Itu tidak diperlukan lagi. Selain itu, standar HTML modern mengubah arti atribut ini secara total. Sekarang, ini dapat digunakan untuk modul JavaScript. Tapi itu topik lanjutan, kita akan membicarakan modul di bagian lain tutorial.

  • Atribut language : <script language =…>

  • Atribut ini dimaksudkan untuk menunjukkan bahasa naskah. Atribut ini tidak lagi masuk akal karena JavaScript adalah bahasa default. Tidak perlu menggunakannya.

  • Komentar sebelum dan sesudah skrip.

  • Dalam buku dan panduan kuno, Anda mungkin menemukan komentar di dalam tag <script> , seperti ini:

     <skrip type="teks/javascript"><!--
    ...
//--></skrip>

    Trik ini tidak digunakan dalam JavaScript modern. Komentar ini menyembunyikan kode JavaScript dari browser lama yang tidak mengetahui cara memproses tag <script> . Karena browser yang dirilis dalam 15 tahun terakhir tidak mengalami masalah ini, komentar semacam ini dapat membantu Anda mengidentifikasi kode yang sangat lama.

Skrip eksternal

Jika kita mempunyai banyak kode JavaScript, kita bisa memasukkannya ke dalam file tersendiri.

File skrip dilampirkan ke HTML dengan atribut src :

 <skrip src="/path/to/script.js"></skrip>

Di sini, /path/to/script.js adalah jalur absolut ke skrip dari root situs. Seseorang juga dapat memberikan jalur relatif dari halaman saat ini. Misalnya, src="script.js" , sama seperti src="./script.js" , berarti file "script.js" di folder saat ini.

Kami juga dapat memberikan URL lengkapnya. Misalnya:

 <skrip src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></skrip>

Untuk melampirkan beberapa skrip, gunakan beberapa tag:

 <skrip src="/js/script1.js"></skrip>
<skrip src="/js/script2.js"></skrip>
…

Harap dicatat:

Biasanya, hanya skrip paling sederhana yang dimasukkan ke dalam HTML. Yang lebih kompleks berada di file terpisah.

Keuntungan dari file terpisah adalah browser akan mendownloadnya dan menyimpannya di cache-nya.

Halaman lain yang mereferensikan skrip yang sama akan mengambilnya dari cache alih-alih mendownloadnya, sehingga file tersebut sebenarnya hanya diunduh sekali.

Itu mengurangi lalu lintas dan membuat halaman lebih cepat.

Jika src disetel, konten skrip akan diabaikan.

Satu tag <script> tidak boleh memiliki atribut src dan kode di dalamnya.

Ini tidak akan berhasil:

 <skrip src="file.js">
  peringatan(1); // konten diabaikan, karena src sudah disetel
</skrip>

Kita harus memilih <script src="…"> eksternal atau <script> biasa dengan kode.

Contoh di atas dapat dibagi menjadi dua skrip agar berfungsi:

 <skrip src="file.js"></skrip>
<skrip>
  peringatan(1);
</skrip>

Ringkasan

  • Kita dapat menggunakan tag <script> untuk menambahkan kode JavaScript ke halaman.

  • Atribut type dan language tidak diperlukan.

  • Skrip dalam file eksternal dapat disisipkan dengan <script src="path/to/script.js"></script> .

Masih banyak lagi yang perlu dipelajari tentang skrip browser dan interaksinya dengan halaman web. Namun perlu diingat bahwa bagian tutorial ini dikhususkan untuk bahasa JavaScript, jadi kita tidak boleh mengalihkan perhatian kita dengan implementasi khusus browser. Kami akan menggunakan browser sebagai cara untuk menjalankan JavaScript, yang sangat nyaman untuk membaca online, namun hanya satu dari banyak.

Tugas

Tampilkan peringatan

pentingnya: 5

Buat halaman yang menampilkan pesan “Saya JavaScript!”.

Lakukan di sandbox, atau di hard drive Anda, tidak masalah, pastikan saja berhasil.

Demo di jendela baru

 <!DOCTYPEhtml>
<html>

<tubuh>

  <skrip>
    alert("Saya JavaScript!");
  </skrip>

</tubuh>

</html>

Buka solusi di kotak pasir.

Tampilkan peringatan dengan skrip eksternal

pentingnya: 5

Ambil solusi dari tugas sebelumnya Tampilkan peringatan. Ubah dengan mengekstraksi konten skrip ke dalam file eksternal alert.js , yang berada di folder yang sama.

Buka halamannya, pastikan peringatannya berfungsi.

Kode HTMLnya:

 <!DOCTYPEhtml>
<html>

<tubuh>

  <skrip src="alert.js"></skrip>

</tubuh>

</html>

Untuk file alert.js di folder yang sama:

 alert("Saya JavaScript!");
Artikel Terkait