Cara memasukkan JavaScript dalam dokumen HTML
Cara memasukkan JavaScript dalam dokumen HTML
Client-side scripting mengacu pada jenis program komputer yang dijalankan oleh web browser pengguna. JavaScript (JS) adalah yang paling populer client-side scripting pada web.
Dalam <script> elemen ini digunakan untuk menanamkan atau referensi JavaScript dalam dokumen HTML untuk menambahkan interaktivitas ke halaman web dan memberikan pengalaman pengguna yang lebih baik secara signifikan.
Beberapa yang paling umum menggunakan JavaScript adalah validasi form, menghasilkan pesan peringatan, membuat galeri gambar, menunjukkan menyembunyikan konten, manipulasi DOM, dan banyak lagi.
Menambahkan JavaScript untuk Halaman HTML
JavaScript dapat tertanam langsung di dalam halaman HTML atau ditempatkan di eksternal file script dan direferensikan di dalam halaman HTML. Kedua metode ini menggunakan <script> elemen.
Menanamkan JavaScript
Untuk menanamkan JavaScript dalam suatu file HTML, hanya menambahkan kode sebagai isi dari sebuah <script> elemen.
JavaScript berikut ini contoh menulis sebuah string teks untuk halaman web.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Embedding JavaScript</title>
</head>
<body>
<div id="greet"></div>
<script>
document.getElementById("greet").innerHTML = "Hello World!";
</script>
</body>
</html>
Tip : Idealnya, script unsur-unsur yang harus ditempatkan di bagian bawah halaman, sebelum tag body penutup yaitu </body>, karena ketika browser menemukan naskah itu berhenti rendering sisa halaman sampai mem-parsing script yang secara signifikan dapat mempengaruhi kinerja situs anda.
Memanggil File JavaScript Eksternal
Anda juga bisa menempatkan kode JavaScript dalam file terpisah (dengan .js ekstensi), dan memanggil file ke dalam dokumen HTML anda melalui src atribut dari <script> tag.
Hal ini berguna jika anda ingin naskah yang sama yang tersedia untuk beberapa dokumen. Ini menghemat anda mengulangi tugas yang sama berulang-ulang dan membuat situs web anda lebih mudah untuk mempertahankan.
Contoh berikut menunjukkan bagaimana untuk link eksternal JS file dalam HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Linking External JavaScript</title>
</head>
<body>
<div id="greet"></div>
<script src="hello.js"></script>
</body>
</html>
Catatan : Bila src atribut yang ditentukan, <script> elemen harus kosong. Ini hanya berarti bahwa anda tidak dapat sama-sama menggunakan <script> elemen untuk kedua cantumkan JavaScript dan link ke eksternal file JavaScript dalam dokumen HTML.
JavaScript file adalah file teks biasa dengan .js ekstensi, seperti "hello.js". Juga, file JavaScript eksternal hanya berisi JavaScript pernyataan; tidak mengandung <script>...</script> unsur seperti tertanam JavaScript.
HTML noscript Elemen
Dalam <noscript> elemen ini digunakan untuk menyediakan konten alternatif bagi pengguna yang telah menonaktifkan JavaScript di browser mereka atau memiliki browser yang tidak mendukung client-side scripting.
Elemen ini dapat berisi elemen HTML, selain dari <script>, yang dapat dimasukkan dalam <body> elemen dari halaman HTML. Mari kita lihat contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Noscript Demo</title>
</head>
<body>
<div id="greet"></div>
<script>
document.getElementById("greet").innerHTML = "Hello World!";
</script>
<noscript>
<p>Oops! This website requires a JavaScript-enabled browser.</p>
</noscript>
</body>
</html>
isi di dalam noscript elemen hanya akan ditampilkan jika browser user tidak mendukung scripting, atau scripting dinonaktifkan pada browser.
HTML Badan
Apa HTML Badan?
Beberapa karakter yang disediakan di HTML, misalnya anda tidak dapat menggunakan kurang dari (<) atau lebih besar dari (>) atau tanda kurung sudut dalam teks anda, karena browser bisa kesalahan mereka untuk markup, sementara beberapa karakter yang tidak ada pada keyboard seperti simbol hak cipta ©.
Untuk menampilkan karakter khusus ini, mereka harus diganti dengan entitas karakter. Referensi entitas karakter, atau badan untuk jangka pendek, memungkinkan anda untuk menggunakan karakter yang tidak dapat dinyatakan dalam dokumen pengkodean karakter atau yang tidak dapat dimasukkan oleh keyboard.
Hasil Deskripsi Badan Nama Referensi numerik
non-breaking space  
< kurang dari < <
> lebih besar dari > >
& ampersand & &
" tanda kutip " "
' apostrophe " '
¢ persen ¢ ¢
£ pon £ £
¥ yen ¥ ¥
€ euro € €
© hak cipta © ©
® merek dagang terdaftar ® ®
™ merek dagang ™ ™
Anda dapat menggunakan referensi karakter numerik, bukan nama entitas. Manfaat utama dari menggunakan referensi karakter numerik adalah bahwa, mereka telah lebih kuat dukungan browser, dan dapat digunakan untuk menentukan karakter Unicode, sedangkan entitas terbatas pada subset ini.
Catatan : entitas HTML-nama yang case-sensitive! Silahkan periksa entitas karakter HTML referensi untuk daftar lengkap dari entitas karakter karakter khusus dan simbol-simbol.
Tip : Nonbreaking ( ) digunakan untuk membuat ruang kosong antara dua item yang tidak dapat dipisahkan dengan line break. Mereka juga digunakan untuk menampilkan beberapa ruang karena web browser yang hanya menampilkan satu ruang jika beberapa ruang yang dibuat dengan menggunakan tombol spasi.
HTML URL
Apa itu URL?
URL singkatan Uniform Resource Locator adalah alamat global dari dokumen-dokumen dan sumber-sumber lain di World Wide Web. Tujuan utamanya adalah untuk mengidentifikasi lokasi dari dokumen dan sumber daya lain yang tersedia di internet, dan menentukan mekanisme untuk mengakses melalui web browser.
Misalnya, jika anda melihat pada address bar browser anda, anda akan melihat:
https://www.calonbloggers.my.id/html-tutorial/html-url.php
— Ini adalah URL dari halaman web yang sedang anda lihat sekarang.
URL Sintaks
Secara umum sintaks dari Url adalah sebagai berikut:
skema://host:port/path?query-string#fragmen-id
URL memiliki struktur linear dan biasanya terdiri dari beberapa hal sebagai berikut:
Nama skema — skema mengidentifikasi protokol yang digunakan untuk mengakses sumber daya di Internet. Skema nama diikuti oleh tiga karakter :// (usus besar dan dua garis miring). Yang paling umum digunakan protokol adalah http://, https://, ftp://, dan mailto://.
Nama Host — nama host mengidentifikasi host di mana sumber daya tersebut berada. Hostname adalah nama domain ditugaskan ke sebuah host komputer. Ini biasanya merupakan kombinasi dari host lokal dengan nama induk nama domain.
Misalnya, www.calonbloggers.my.id terdiri dari host mesin nama www dan nama domain calonbloggers.my.id.
Nomor Port Server sering memberikan lebih dari satu jenis layanan, sehingga anda juga harus memberitahu server apa layanan yang diminta. Permintaan ini dibuat dengan nomor port. Well-known port numbers untuk layanan yang biasanya dihilangkan dari URL. Misalnya, layanan web HTTP berjalan secara default port 80, HTTPS berjalan secara default port 443.
Jalan — jalan mengidentifikasi sumber daya tertentu dalam host yang diinginkan pengguna untuk mengakses. Misalnya, /html/html-url.php, /news/technology/, dll.
String Query — query string yang berisi data yang akan diteruskan ke server-side script, yang berjalan pada web server. Misalnya, parameter untuk pencarian. Query string didahului oleh tanda tanya (?), biasanya sebuah string dari nama dan nilai pasangan yang dipisahkan oleh ampersand (&), misalnya, ?first_name=John&last_name=Corner, q=mobile+phone, dan seterusnya.
Fragmen pengenal — fragmen pengenal, jika ada, menentukan lokasi dalam halaman. Browser dapat gulir ke tampilan bagian halaman. Fragmen pengenal yang diperkenalkan oleh karakter pagar (#) adalah opsional bagian terakhir dari URL sebuah dokumen.
Catatan : Skema dan host komponen dari sebuah URL yang tidak case-sensitif, tapi jalan dan query string adalah case-sensitive. Biasanya seluruh URL yang ditentukan dalam kasus yang lebih rendah.
Posting Komentar untuk "Cara memasukkan JavaScript dalam dokumen HTML"