Sebelum Anda dapat menggunakan JavaScript, JavaScript harus ditambahkan ke dokumen HTML Anda. Anda dapat melakukan ini menggunakan elemen dengan dua cara:

Catatan: Sebuah elemen dapat ditempatkan dimana saja di dalam sebuah elemen dan/atau di dalam sebuah elemen dan digunakan berkali-kali.

Kode JavaScript dapat disisipkan langsung di dalam elemen. Skrip yang terletak tepat di dalam elemen disebut inline.

Judul dokumen // kode JavaScript // kode JavaScript

Anda juga dapat menambahkan kode JavaScript ke dokumen HTML Anda, yang terletak di file eksternal. Skrip yang terletak di dalam file eksternal disebut eksternal. Menghubungkan file eksternal dilakukan menggunakan atribut src dari tag sebagai berikut:

• Mari kita buat folder dan beri nama example , di dalam folder ini kita membuat file teks dengan ekstensi .js , misalnya myscript.js (nama file bisa apa saja), buka dan tambahkan sebaris kode JavaScript:

Catatan: jika Anda tidak tahu cara mengubah ekstensi file, Anda dapat membacanya di bagian: mengubah ekstensi file.

Harap dicatat bahwa dalam file eksternal, kode JavaScript tidak perlu ditempatkan di antara tag dan. Simpan perubahan pada file dan tutup.

• Sekarang mari kita buat file lain dan beri nama myscript2.js, buka dan tambahkan baris kode JavaScript berikut:

Simpan perubahan pada file dan tutup.

• Dan hal terakhir yang perlu kita lakukan adalah membuat dokumen HTML yang akan menghubungkan dua file yang kita buat dengan skrip eksternal. Di folder yang sama tempat dua skrip kami (contoh) disimpan, kami membuat dokumen HTML dan menyebutnya, misalnya, test.html. Sekarang, dengan menggunakan elemen tersebut, kami menghubungkan dua file eksternal dengan kode JavaScript:

Itu saja! Kami menyimpan perubahan dalam dokumen HTML, membukanya di browser dan melihat hasilnya. Anda akan mendapatkan hasil seperti ini:

Hati-hati, karena kami menentukan pengkodean utf-8 dalam dokumen HTML menggunakan tag, pengkodean file itu sendiri (test.html, myscript.js, dan myscript2.js) juga harus utf-8.

Catatan: jika skrip eksternal terhubung, maka skrip yang disematkan tidak dapat ditempatkan di dalam elemen yang sama pada waktu yang sama.

Menggunakan skrip eksternal memberikan sejumlah keunggulan dibandingkan skrip bawaan:

• Dokumen HTML menjadi lebih mudah untuk diedit karena blok besar kode JavaScript dapat dihapus dan struktur dapat dipisahkan dari perilaku halaman.
• Jika kode JavaScript yang sama digunakan di beberapa dokumen HTML, lebih baik menyertakannya sebagai skrip eksternal. Hal ini mempermudah pemeliharaan dan pengeditan kode, karena saat melakukan perubahan, tidak perlu mengedit setiap dokumen HTML secara terpisah.
• Skrip eksternal dimuat oleh browser hanya sekali, saat Anda pertama kali mengunjungi halaman tersebut. Dengan menavigasi ke halaman lain yang menggunakan skrip yang sama, maka akan diambil dari cache browser, yang pada gilirannya akan mempercepat pemuatan dan pemrosesan konten halaman.

Catatan: Yang terbaik adalah menempatkan skrip (baik eksternal atau inline) di akhir dokumen HTML, sebelum tag penutup. Susunan skrip ini memungkinkan browser memuat halaman lebih cepat dengan memuat konten halaman terlebih dahulu sebelum memuat kode skrip.

Dan hari ini kita akan memulai bagian baru yang membahas tentang penggunaan skrip dalam HTML. Bagian ini hanya terdiri dari satu video pelajaran dimana kita akan mengenal script, mempelajari apa itu script, cara menggunakan script, cara menghubungkan script ke HTML, dll. Sedangkan untuk tag yang akan kita gunakan. Akan ada dua di antaranya, ini tag dan tag.

Selain itu, dalam video tutorial ini kami akan merekap percakapan tentang peta gambar. Kami membicarakan hal ini cukup lama, namun desain visual objek gambar saya pindahkan ke bagian script agar tidak terjadi kebingungan atau kesalahpahaman di kepala kami. Jadi begini. Hari ini kita akan menutup sepenuhnya pertanyaan tentang menambahkan peta gambar interaktif ke dokumen HTML dan menyertakan skrip yang akan membantu menyorot objek dalam gambar.

Saya tidak akan menjelaskan konsep teknis dan cerdas apa pun. Kita semua sudah lama mengetahui apa itu HTML dan dibutuhkan untuk membuat framework website. Namun selain frame, untuk membuat website juga harus dikonfigurasi dan dirancang dengan tepat. CSS dapat membantu kita dalam hal ini. Dan skrip diperlukan untuk memperluas fungsionalitas situs. Secara umum, untuk menambah dinamika pada situs kami.

Skrip yang akan kita bicarakan khusus untuk situs web dan menggunakan bahasa seperti JavaScript dan JQuery. Saya mencatat ini karena konsep skrip cukup luas dan digunakan dalam berbagai arah, dalam kasus kami ini adalah situs web.

Dalam kasus kami, kami akan menggunakan dua tag HTML yang akan membantu kami menghubungkan skrip.

Tag HTML dimaksudkan untuk menghubungkan skrip ke halaman HTML. Pada saat yang sama, kita dapat menggunakan berbagai metode koneksi, karena kode skrip dapat berada dalam file terpisah, yang dapat ditempatkan di suatu tempat di server pihak ketiga atau di server kami, atau disematkan langsung ke dalam kode HTML dokumen. .

Tag HTML dimaksudkan untuk memberi tahu pengunjung halaman bahwa dukungan skrip dinonaktifkan di browsernya atau tidak ada sama sekali. Ini berarti dia tidak akan dapat menggunakan fungsionalitas penuh dari halaman tempatnya berada.

Mari kita mulai dengan tag dan mencari tahu cara menggunakannya dalam HTML. Lagi pula, agar halaman kita menjadi lebih dinamis, kita harus bisa menghubungkan atau mengimplementasikan skrip dalam HTML. Seperti yang saya sebutkan di atas, kami memiliki beberapa opsi untuk menghubungkan skrip dalam HTML.

Saat menggunakan skrip, kami tidak selalu perlu menulisnya sendiri atau mengunduh file dan menempatkannya di server kami untuk koneksi. File dengan skrip skrip juga dapat ditempatkan di server pihak ketiga, misalnya Google.

Dalam contoh ini, kami akan menyertakan dukungan jQuery dalam dokumen kami. File dengan skripnya terletak di server Google dan untuk menghubungkannya kita hanya perlu menentukan alamat lokasi file yang benar. Perlu juga dicatat di sini bahwa saat menggunakan tag, kita harus menggunakan atribut tipe HTML, yang akan membantu menunjukkan kepada browser web jenis dokumen apa yang termasuk dalam file yang disertakan.

Jadi, untuk terhubung, buka halaman pengembang Google. Untuk memudahkan pencarian Anda, berikut tautannya: https://developers.google.com/speed/libraries/devguide#jquery. Kemudian kita cukup menyalin kode seperti ini ke dalam dokumen HTML kita:

Versi perpustakaan mungkin berbeda.

Setelah kode disalin, kita tempelkan ke dalam dokumen HTML sebelum tag penutup. Setelah itu kita bisa mengecek apakah perpustakaan tersebut terhubung atau tidak. Tonton video tutorial untuk melihat cara melakukan ini.

Ini mungkin cara termudah, karena di sini, selain menyalin dan menempelkan kode yang sudah jadi, Anda tidak perlu melakukan apa pun. Satu-satunya hal yang perlu ditambahkan adalah kita harus menentukan atribut type dengan nilai. Artinya, kode terakhir akan terlihat seperti ini:

Cara koneksi ini mirip dengan yang pertama, hanya saja saat menghubungkan script dari server kita, yaitu file dengan script tersebut harus ditempatkan di hosting yang digunakan situs itu sendiri, kita harus menentukan path yang benar ke file tersebut. Selain itu, untuk pengaturan orientasi yang lebih nyaman dalam file situs, kita dapat membuat folder terpisah untuk skrip dan menamainya, misalnya, js. Kemudian di folder ini kita harus meletakkan file dalam format .js, yang berisi fungsionalitas yang diperlukan untuk koneksi. Dan tentukan path ke file ini di dokumen HTML sebelum tag head penutup.

Pada contoh yang akan saya berikan di bawah ini, kami akan mencoba menghubungkan skrip yang akan membantu membuat highlight untuk peta gambar. Pada saat yang sama, saat menghubungkan skrip, saya menggunakan jalur relatif ke file .

File scriptnya sendiri dapat Anda download pada halaman materi tambahan Video Course di halaman ini.

Cara memeriksa pengoperasian skrip ditampilkan dalam klip video.

Metode terakhir tidak mempertimbangkan untuk menyertakan file individual, tetapi menyarankan untuk menyematkan skrip langsung di dalam dokumen HTML. Namun di sini perlu diperhatikan bahwa jika skripnya tidak besar, maka kita dapat dengan mudah mengimplementasikannya ke dalam dokumen. Jika ini adalah fungsi yang sangat besar atau seluruh perpustakaan, Anda harus menggunakan salah satu metode yang tercantum di atas.

Jadi, anggap saja kita mempunyai skrip tertentu yang perlu diimplementasikan. Dalam kasus kami, ini mengacu pada penyorotan objek peta gambar. Anda dapat menemukan fungsinya pada materi tambahan di folder js. Di tempat yang sama di mana file skrip berada, terdapat file teks biasa tempat kode yang diperlukan ditulis. Anda juga dapat menyalin kode skrip di halaman ini:

$(fungsi() ( $(".peta").maphilight(); $("#squidheadlink").mouseover(fungsi(e) ( $("#squidhead").mouseover(); )).mouseout( fungsi(e) ( $("#squidhead").mouseout(); )).klik(fungsi(e) ( e.preventDefault(); ));

Setelah itu harus disisipkan di antara tag. Artinya, kita dapat menambahkan beberapa fungsi individual langsung ke dokumen HTML sebelum tag:

Perlu juga dicatat di sini bahwa agar penyorotan peta gambar berfungsi, Anda harus menambahkan semua skrip yang diusulkan. Artinya, perpustakaan JQuery, menghubungkan file yang ada di materi tambahan dan menambahkan fungsinya ke dokumen HTML. Jika setidaknya salah satu langkah tidak diselesaikan, lampu latar tidak akan berfungsi.

Adapun tagnya, semuanya sederhana. Tag ini akan disertakan dalam karya jika browser web pengguna tidak memiliki dukungan skrip atau dinonaktifkan. Ini adalah tag berpasangan. Di antara tag pembuka dan penutup, kita harus menentukan informasi yang akan ditampilkan kepada pengguna jika browsernya tidak mendukung skrip. Misalnya seperti ini:

Skrip Anda tidak berfungsi...

Tag ini harus dicantumkan setelah tag pembuka.

Direktori HTML dan materi lainnya dapat dan harus diunduh!

Pada video selanjutnya kita akan melanjutkan perkenalan kita dengan script dalam HTML dan mulai mengenal konsep lain yaitu objek dalam HTML seperti video, audio dan flash banner. Pertama, mari kita cari tahu cara memasukkan video ke dalam HTML dan mengenal tag HTML dan

Hari ini saya akan memberi tahu Anda cara menghubungkan berbagai jenis skrip ke situs Anda. Ini adalah dasar-dasarnya, dan saya seharusnya menulis artikel ini sebagai salah satu yang pertama. Oleh karena itu, mari kita mulai.

JavaScript membantu kami meningkatkan fungsionalitas situs dalam banyak cara. Baik itu atau, misalnya, beberapa sisi teknis dari masalah ini.

JavaScript dapat dihubungkan dengan dua cara:

1. Pertama– ini langsung memasukkan kode ke situs web Anda menggunakan tag:

Kode

2. Kedua– menggunakan file:

Dimana “https://www..js” adalah jalur menuju file skrip. Disarankan untuk menulis opsi ini untuk file di server jarak jauh (eksternal). Jika file tersebut terletak di situs Anda, Anda cukup menentukan jalur relatifnya:

Ini berguna jika Anda tiba-tiba ingin mengubah domain atau mentransfer situs ke protokol lain.

Sedangkan untuk lokasi koneksi, disarankan untuk menghubungkan semua skrip di bagian HEAD, sebelum tag penutupnya. Misalnya:

Semuanya untuk webmaster pemula

Mereka juga dapat dihubungkan di bagian BODY. Misalnya, disarankan untuk menyertakan semua perpustakaan di bagian HEAD, sementara semua penghitung, penggeser, galeri, dan skrip lainnya disertakan di bagian BODY, juga sebelum tag penutup.

Menghubungkan skrip PHP dilakukan dengan tiga cara:

1. Pertama– ini adalah penyisipan kode yang sama ke dalam halaman situs itu sendiri (perhatikan bahwa jika Anda memiliki halaman dengan ekstensi *.html, Anda perlu mengubah ekstensi menjadi *.php) menggunakan tag:

2. Menggunakan file (dalam hal ini, koneksi juga dapat dilakukan pada halaman dengan ekstensi *.html):

Namun agar metode ini berfungsi, Anda perlu menambahkan baris berikut ke file .htaccess, yang terletak di root situs Anda, di bagian paling atas:

HapusHandler .html .htm Aplikasi AddType/x-httpd-php .php .htm .html .phtml

Jika file seperti itu tidak tersedia di hosting Anda, buatlah menggunakan editor teks apa pun.

3. Ketiga– menggunakan skrip JS. Dalam hal ini, Anda juga bisa mendapatkan hasil skrip PHP yang dieksekusi di server.

Implementasinya adalah sebagai berikut:

$(dokumen).siap(fungsi() ( $(".hasil").load("/main.php"); ));

Dimana “.result” adalah kelas dimana data akan dimuat, dan “/main.php”, masing-masing adalah alamat skrip PHP.

Jika Anda memuat data dari server lain, maka dukungan PHP di server Anda tidak diperlukan. Jangan lupa untuk menghubungkan perpustakaan jQuery ke situs Anda.

Di sini aturannya benar-benar sama: alamat lengkap file jika berada di server eksternal, alamat relatif jika ada di server Anda.

Memperhatikan! Jika Anda ingin menghubungkan skrip PHP ke situs Anda, maka server harus memiliki dukungan PHP. Hubungi penyedia hosting Anda untuk mengetahui apakah Anda memiliki opsi ini.

Jika Anda menghubungkan skrip untuk pertama kalinya, coba sambungkan skrip dari arsip yang terlampir di akhir artikel. Jika dalam kedua kasus tersebut Anda menerima pesan “Halo Dunia! " berarti kamu melakukan segalanya dengan benar.

Dalam bab ini, kita akan bekerja menempatkan skrip dalam dokumen HTML sehingga kita dapat menggunakannya untuk memodifikasi dokumen HTML dengan cepat. Untuk memasukkan kode JavaScript ke dalam halaman HTML, biasanya digunakan elemen.

Agar program (atau skrip) JavaScript pertama Anda dapat dijalankan, program tersebut harus disematkan dalam dokumen HTML.
Skrip disematkan dalam dokumen HTML dengan berbagai cara standar:

• masukkan kode langsung ke atribut event elemen HTML;
• letakkan kode di antara tag pembuka dan penutup;
• letakkan semua skrip Anda di file eksternal (dengan ekstensi .js) dan kemudian tautkan ke dokumen HTML.

Cara termudah untuk menyematkan JavaScript ke dalam dokumen HTML adalah dengan menggunakan ekstensi . Tag sering kali ditempatkan di dalam elemen, dan sebelumnya metode ini dianggap hampir wajib. Namun, saat ini, tag digunakan baik di elemen maupun badan halaman web.

Dengan demikian, beberapa skrip dapat ditempatkan pada satu halaman web sekaligus. Dalam urutan apa browser akan mengeksekusi skrip ini? Biasanya, browser mengeksekusi skrip saat dimuat. Browser membaca dokumen HTML dari atas ke bawah dan ketika menemukan tag, browser memperlakukan teks program sebagai skrip dan menjalankannya. Konten halaman lainnya tidak dimuat atau ditampilkan hingga semua kode dalam elemen dijalankan.

Ini adalah dokumen HTML biasa

Kami keluar kembali ke HTML

Harap dicatat: Kami menentukan atribut bahasa dari tag, yang menunjukkan bahasa pemrograman di mana skrip ditulis. Nilai default atribut bahasa adalah JavaScript, jadi jika Anda menggunakan JavaScript, Anda dapat menghilangkan atribut bahasa.

Skrip di atas dijalankan ketika halaman dibuka dan menampilkan string: "Halo, dunia!" Namun, Anda tidak selalu ingin skrip langsung berjalan saat Anda membuka halaman. Seringkali, Anda ingin suatu program dijalankan ketika peristiwa tertentu terjadi, seperti ketika sebuah tombol ditekan.

Contoh berikut menempatkan fungsi JavaScript di bagian dokumen HTML. Berikut adalah contoh elemen HTML dengan atribut event yang merespons klik mouse. Ketika tombol diklik, event onclick dihasilkan.

Halo Dunia!

Klik saya

Jika ada banyak kode JavaScript, maka ditempatkan di file terpisah, yang biasanya berekstensi .js.

Untuk memasukkan kode JavaScript dari file eksternal ke dalam dokumen HTML, Anda perlu menggunakan atribut src (source) dari tag. Nilainya harus berupa URL file yang berisi kode JS:

Contoh ini menentukan jalur absolut ke file bernama script.js yang berisi skrip (dari root situs). File itu sendiri hanya boleh berisi kode JavaScript, yang seharusnya ditempatkan di antara tag dan.

Dengan analogi dengan elemen Atribut src suatu elemen dapat diberi URL lengkap yang tidak terkait dengan domain halaman HTML saat ini:

Untuk menghubungkan beberapa skrip, gunakan beberapa tag:

...

Catatan: Elemen dengan atribut src tidak boleh berisi kode JavaScript tambahan di antara tag dan, meskipun skrip eksternal dijalankan, kode sebaris diabaikan.

Jika atribut src ada, bagian dalam tag skrip akan diabaikan!

Terlepas dari bagaimana kode JS disertakan dalam dokumen HTML, elemen-elemen tersebut diinterpretasikan oleh browser sesuai urutan kemunculannya dalam dokumen HTML. Kode elemen pertama diinterpretasikan terlebih dahulu, lalu browser melanjutkan ke elemen kedua, dan seterusnya.

Skrip eksternal praktis bila kode yang sama digunakan di banyak halaman web berbeda. Browser akan mengunduh file js satu kali dan kemudian mengambilnya dari cache-nya, sehingga skrip yang sama, yang berisi, misalnya, pustaka fungsi, dapat digunakan pada halaman berbeda tanpa harus memuat ulang sepenuhnya dari server. Selain itu, berkat skrip eksternal, pemeliharaan kode menjadi lebih sederhana, karena Anda harus melakukan perubahan atau memperbaiki kesalahan hanya di satu tempat.

Catatan: Hanya kode JavaScript yang disalin ke file eksternal tanpa menentukan tag pembuka dan penutup serta .

Anda sudah mengetahui bahwa browser membaca dokumen HTML dari atas ke bawah dan mulai merender halaman, menampilkan bagian dokumen hingga . Saat menemukan tag, ia beralih ke mode JavaScript dan menjalankan skrip. Setelah selesai, ia kembali ke mode HTML dan menampilkan sisa dokumen.

Hal ini jelas ditunjukkan oleh contoh berikut. Metode alert() menampilkan jendela modal dengan pesan dan menjeda eksekusi skrip hingga pengguna mengklik OK:

Mulai dari konten...

Konten lanjutan

Jika halaman menggunakan banyak JavaScript, mungkin ada penundaan pemuatan yang lama sehingga pengguna melihat jendela browser kosong. Oleh karena itu, merupakan praktik yang baik untuk menunjukkan semua link ke skrip JavaScript setelah konten halaman, sebelum tag penutup:

Susunan skrip ini memungkinkan browser memuat halaman lebih cepat dengan memuat konten halaman terlebih dahulu sebelum memuat kode skrip.
Ini lebih disukai bagi pengguna karena halaman dirender sepenuhnya di browser sebelum kode JavaScript diproses.

Seperti disebutkan sebelumnya, secara default, file kode JavaScript mengganggu penguraian dokumen HTML hingga skrip diunduh dan dijalankan, sehingga meningkatkan jumlah waktu sebelum halaman dirender untuk pertama kali.
Mari kita ambil contoh ketika elemen terletak di suatu tempat di tengah halaman:

beberapa teks... Teks ini tidak akan ditampilkan sampai browser menjalankan script.js.

Dalam contoh ini, hingga browser mengunduh dan mengeksekusi script.js, bagian halaman di bawahnya tidak akan ditampilkan. Perilaku browser ini disebut "sinkron" dan dapat menyebabkan masalah jika kita memuat beberapa file JavaScript pada satu halaman, karena hal ini meningkatkan waktu rendering.

Bagaimana jika dokumen HTML sebenarnya tidak bergantung pada file JS ini, namun pengembang ingin mengontrol cara file eksternal dimuat dan dijalankan?

Atribut elemen async dan defer akan membantu memecahkan masalah memuat skrip secara radikal.

Async digunakan untuk menunjukkan kepada browser bahwa skrip dapat dijalankan "secara asinkron".

Ketika tag terdeteksi, browser tidak berhenti memproses dokumen HTML untuk mengunduh dan mengeksekusi skrip. Eksekusi dapat terjadi setelah skrip diterima bersamaan dengan penguraian dokumen; Ketika skrip dimuat, itu akan dieksekusi.

Skrip dengan atribut async tidak dijamin akan mengeksekusi skrip sesuai urutan penambahannya, misalnya:

Dalam contoh ini, skrip kedua mungkin dijalankan sebelum skrip pertama, jadi penting agar tidak ada ketergantungan di antara skrip-skrip ini.

Catatan: Atribut async digunakan jika Anda ingin mengizinkan browser untuk terus memuat halaman tanpa menunggu pengunduhan selesai dan skrip dijalankan.

Atribut defer menunda eksekusi skrip hingga seluruh halaman HTML dimuat sepenuhnya.

Seperti halnya pemuatan skrip asinkron, file JS dapat dimuat saat dokumen HTML masih dimuat. Namun, meskipun skrip dimuat sepenuhnya sebelum browser selesai memproses halaman, skrip tersebut tidak akan dijalankan hingga dokumen HTML diproses sepenuhnya.

Meskipun pada contoh di atas, tag disertakan dalam elemen dokumen HTML, skrip tidak akan mulai dieksekusi hingga browser mencapai tag penutup.

Selain itu, tidak seperti async, urutan relatif eksekusi skrip dengan atribut defer akan dipertahankan.

Penggunaan atribut defer berguna ketika kode skrip melibatkan pengerjaan dengan dokumen HTML, dan pengembang harus yakin bahwa halaman tersebut diterima sepenuhnya.

Catatan: Atribut async dan defer hanya didukung untuk file skrip eksternal, mis. hanya berfungsi jika atribut src ada.

• JavaScript dapat ditambahkan ke dokumen HTML menggunakan elemen dengan dua cara:
  • Tentukan skrip sebaris yang berada tepat di antara pasangan tag dan.
  • Hubungkan file eksternal dengan kode JavaScript melalui .
• Jika kode JavaScript digunakan di beberapa halaman, lebih baik menyertakannya sebagai skrip eksternal. Ini sangat memudahkan pemeliharaan dan pengeditan kode, dan juga mempercepat pemuatan dan pemrosesan halaman web - skrip eksternal dimuat oleh browser hanya sekali (nantinya akan diambil dari cache browser).
• Atribut defer memberi sinyal kepada browser bahwa pemuatan skrip dapat segera dimulai, namun eksekusi harus ditunda hingga seluruh dokumen HTML dimuat.
• Jika file skrip berisi fungsi yang berinteraksi dengan dokumen HTML yang sedang dimuat, atau jika terdapat ketergantungan pada file lain di halaman, dokumen HTML harus dimuat sepenuhnya sebelum skrip dijalankan. Biasanya, tautan ke skrip JavaScript ditempatkan di bagian bawah halaman sebelum tag penutup untuk memastikan bahwa seluruh dokumen telah diurai agar dapat berfungsi. Namun, dalam situasi di mana, karena alasan tertentu, file JS harus ditempatkan di tempat lain dalam dokumen, atribut defer dapat berguna.
• Atribut defer mempertahankan urutan relatif eksekusi skrip, sedangkan async tidak.
• Skrip dengan atribut async dijalankan secara asinkron dengan pemrosesan halaman; ketika skrip dimuat, skrip akan dijalankan meskipun dokumen HTML belum sepenuhnya siap.
• Untuk file JS yang tidak bergantung pada file lain, atribut async akan sangat berguna. Karena kami tidak peduli kapan skrip dijalankan, pemuatan asinkron adalah opsi yang paling sesuai.

• Jendela munculan

  Berikut adalah dokumen HTML sederhana. Tempatkan skrip di badan halaman HTML yang menampilkan jendela pop-up yang bertuliskan: "Hai javascript!"

JavaScript adalah bahasa skrip yang hanya berjalan di browser pengguna, yaitu di sisi klien. Untuk memanggil bahasa ini, tag dan ditulis dalam kode HTML.

Berikut adalah contoh program sederhana yang menampilkan kalimat “Halo, Dunia!”

Contoh JavaScript document.write("Halo Dunia!")

Dalam skrip ini, perintah document.write("Halo, Dunia!") mencetak frasa "Halo, Dunia!" Dalam perintah document.write("") , Anda dapat menulis teks dan tag apa pun di dalam tanda kutip. Tag akan diinterpretasikan oleh browser.

Kita akan membicarakan perintah ini lebih lanjut nanti, tapi sekarang mari kita kembali ke topik artikel ini - memasukkan skrip JavaScript ke dalam kode HTML.

Faktanya, entri tag yang diperluas dan lebih tepat terlihat seperti ini: . Dalam atribut type kami menunjukkan jenis bahasa di mana skrip ditulis. Dalam kasus kami ini adalah JavaScript. Faktanya, JavaScript saat ini tidak memiliki pesaing yang signifikan, sehingga semua browser modern akan menggunakan JavaScript secara default.

Namun demi keasliannya, mari kita berikan contoh penggunaan tag yang diperluas:

Contoh JavaScript document.write("Halo Dunia!

Aku senang bertemu denganmu!")

Dalam contoh ini, perhatikan juga pasangan tag dan. Tag ini hanya akan menampilkan teks jika browser pengguna menonaktifkan atau tidak mendukung JavaScript.

Script dapat disisipkan tidak hanya ke dalam bagian, tetapi juga ke dalam bagian.

Contoh JavaScript var i = "Halo Dunia!"

document.write(i) Browser Anda tidak mendukung JavaScript atau dukungan dinonaktifkan di pengaturan.

Cara kedua adalah dengan menyertakan file tersebut Artikel Apa itu CSS menjelaskan cara melampirkan file dengan kode gaya CSS ke dokumen bernama mengikat

. Anda juga dapat menautkan dokumen ke file yang berisi kode JavaScript. Untuk melakukan ini, masukkan tag ke bagian tersebut, seperti pada contoh:

Contoh JavaScript

Seperti yang Anda lihat, Anda dapat melampirkan dua atau lebih file dengan skrip JavaScript ke dokumen. Anda dapat menggunakan file skrip yang terletak di domain pihak ketiga; untuk melakukan ini, Anda perlu menentukan URL file dengan skrip di atribut src dari tag. Anda juga dapat mengabaikan atribut type jika diinginkan.

File kode JavaScript harus memiliki ekstensi .js.

Untuk mendukung browser lawas yang tidak memahami kode JavaScript, browser perlu dikomentari menggunakan tag komentar HTML. Jika Anda tidak melakukan ini, browser yang tidak memahami kode JavaScript akan menampilkannya di layar sebagai teks biasa. Tapi tidak ada lagi browser seperti itu yang tersisa. Meskipun Anda mungkin menemukan kode seperti itu, untuk memahaminya, mari kita lihat ke dalamnya.

Contoh JavaScript

Dalam contoh ini, tag komentar HTML pembuka berada tepat sebelum tag penutup untuk kode skrip kita.

Garis miring ganda // sudah menjadi komentar JavaScript, ini menunjukkan bahwa seluruh baris setelahnya adalah komentar dari sudut pandang JavaScript. Baca lebih lanjut tentang komentar JavaScript di sini.