Cara menggunakan html proyek, javascript css

Kali ini kami menulis tutorial yang berisi tentang cara membuat JavaScript di HTML. Pertama kita akan membahas pengertian JavaScript, dan setelah itu kita akan fokus pada berbagai cara memasukkan JavaScript ke dalam HTML

Table of Contents Show

Keuntungan JavaScript
Minimalkan interaksi server
Antarmuka yang lengkap dan mudah digunakan
Umpan balik cepat untuk pengguna
Proses debug mudah
Cara Membuat JavaScript di HTML
Cara membuat JavaScript di HTML secara langsung
Bagaimana cara menambahkan kode JavaScript ke file terpisah
Contoh JavaScript untuk memvalidasi alamat email

Dalam HTML, Anda dapat menampilkan konten statis, seperti gambar. Namun belakangan ini, konten statis tidak begitu populer lagi. Sebagian besar konten saat ini sangat interaktif dan berisi tayangan slide, formulir, dan menu dengan tampilan yang menarik

Konten-konten ini memberi kesempatan kepada pengguna untuk lebih ekspresif dalam mengelola dan mengembangkan situs web mereka. Jika ingin menampilkan konten seperti itu, maka salah satu cara yang bisa dilakukan adalah script bahasa pemrograman dan JavaScript yang paling populer diantara mereka.

Kehadiran JavaScript memungkinkan pengembang untuk membuat situs web yang dapat berinteraksi dengan pengguna dan sebaliknya. Meskipun ada banyak bahasa pemrograman yang bisa dipilih, tidak ada yang sepopuler JavaScript. Untuk memaksimalkan potensi dan keunggulannya, JavaScript harus digunakan bersama dengan HTML

Unduh Lembar Cheat HTML

Keuntungan JavaScript

Pada awalnya, JavaScript dikenal sebagai LiveScript. Seiring dengan perkembangan bahasa, maka oleh Netscape, LiveScript diubah menjadi JavaScript. JavaScript pertama kali muncul pada tahun 1995 di Netscape 2. 0. Berikut adalah beberapa keuntungan menggunakan JavaScript

Minimalkan interaksi server

Salah satu cara terbaik untuk mengoptimalkan kinerja dan kecepatan situs web adalah dengan mengurangi komunikasi ke server. Dalam hal ini, JavaScript memvalidasi input pengguna di sisi klien. Skrip ini hanya akan mengirimkan permintaan ke server setelah melakukan validasi awal. Akibatnya, penggunaan sumber daya dan jumlah permintaan ke server akan berkurang secara signifikan

Antarmuka yang lengkap dan mudah digunakan

Dengan menggunakan JavaScript, Anda dapat membuat antarmuka sisi klien yang interaktif, misalnya menambahkan penggeser, tayangan slide, efek mouse roll-over, fitur drag-and-drop, dll.

Umpan balik cepat untuk pengguna

Dengan menggunakan JavaScript, pengguna akan dengan cepat mendapatkan umpan balik. Misalkan ada user yang sudah mengisi form dan ada satu kolom yang belum terisi atau kosong. Tanpa validasi JavaScript, pengguna tidak akan sadar jika ada kolom yang belum diisi hingga halaman akhirnya dimuat ulang. Dengan JavaScript, pengguna tidak perlu menunggu karena akan langsung diberikan peringatan

Proses debug mudah

JavaScript adalah bahasa yang ditafsirkan, artinya kode tertulis ditafsirkan baris demi baris. Saat muncul error, Anda akan langsung melihat nomor baris tempat terjadinya error

Cara Membuat JavaScript di HTML

Setelah membahas kelebihan yang ditawarkan JavaScript, saatnya mempelajari lebih lanjut tentang cara menyematkan JavaScript ke dalam HTML. Berikut dua cara yang bisa Anda lakukan

Cara membuat JavaScript di HTML secara langsung

Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan:

di antara tag
di antara

Loading akan berbeda tergantung pada letak atau lokasi di mana Anda menambahkan kode JavaScript ke file HTML. Anda bisa mencobanya dengan menambahkan kode tersebut ke section sehingga kode yang dimaksudkan terpisah dari konten file HTML Anda. Hanya saja, kecepatan loading akan meningkat, dalam hal ini konten webiste juga akan terload lebih cepat, jika Anda memasukkan kode ke dan setelah itu JavaScript akan di-parse. Sebagai contoh, file HTML berikut ini akan menampilkan waktu saat ini:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>JAVASCRIPT IS USUALLY PLACED HERE</script>
<title>Time right now is: </title>
</head>
<body>
<script>JAVASCRIPT CAN ALSO GO HERE</script>
</body>
</html>

Kode yang ditulis di atas tidak menyertakan JavaScript sehingga waktu saat ini tidak dapat ditampilkan. Tambahkan kode di bawah ini agar waktu dapat ditampilkan dengan benar dan akurat

var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());

Kode tersebut di-insert di antara tag dan diletakkan di bagian depan kode HTML agar setiap kali page loading, alert akan muncul untuk memberi tahu user tentang waktu saat ini. Berikut tampilan file HTML setelah kode ditambahkan:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now is: </title>
<script>
var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());
</script>
</head>
<body>
</body>
</html>

Apabila Anda ingin menampilkan waktu di antara badan halaman, maka Anda harus insert script di antara tag halaman HTML. Berikut tampilan kode setelah script ditambahkan:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now is: </title>
</head>
<body>
<script>
let d = new Date();
document.body.innerHTML = "<h1>Time right now is:  " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()
"</h1>"
</script>
</body>
</html>

Inilah yang terlihat pada akhirnya

Bagaimana cara menambahkan kode JavaScript ke file terpisah

Terkadang Anda mengalami kesulitan saat membuat JavaScript langsung di HTML. Ini karena beberapa skrip JS harus digunakan di berbagai halaman. Oleh karena itu, langkah terbaik adalah menambahkan kode JavaScript ke file terpisah. Cara terbaik untuk membuat JavaScript dalam HTML adalah dengan mengimpor file eksternal. File ini direferensikan dari dalam dokumen HTML, sama seperti saat Anda mereferensikan dokumen CSS. Beberapa keuntungan menambahkan kode JS ke file terpisah adalah:

Ketika kode HTML dan kode JavaScript dipisahkan, maka segala sesuatu yang terkait lebih mudah untuk diandalkan dan digunakan
Keterbacaan dan pemeliharaan kode akan lebih mudah
File JavaScript yang di-cache meningkatkan kinerja situs web secara keseluruhan dengan mengurangi waktu yang diperlukan untuk memuat halaman

Sekarang kita mereferensikan file JavaScript dalam HTML, seperti ini

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now:</title>
</head>
<body>
</body>
<script src="js/myscript.js"></script>
</html>

Isi dari file myscript. js akan terlihat seperti ini

let d = new Date();
document.body.innerHTML = "<h1>Time right now is:  " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()</h1>"

Catatan. Anggap saja file myscript. js disimpan di direktori yang sama dengan file HTML

Contoh JavaScript untuk memvalidasi alamat email

JavaScript mendukung aplikasi dengan memvalidasi input pengguna di sisi klien. Salah satu input pengguna terpenting yang memerlukan validasi adalah alamat email. Fungsi JavaScript berikut akan membantu Anda memvalidasi alamat email yang telah dimasukkan sebelum mengirimkannya ke server

function validateEmailAddress(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate() {
$("#result").text("");
var emailaddress = $("#email").val();
if (validateEmailAddress(emailaddress)) {
$("#result").text(emailaddress + " is valid :)");
$("#result").css("color", "green");
} else {
$("#result").text(emailaddress + " is not correct, please retry:(");
$("#result").css("color", "red");
}
return false;
}
$("#validate").bind("click", validate);

Untuk melampirkan fungsi ini ke formulir input, Anda dapat menggunakan kode berikut

<form>
<p>Enter an email address:</p>
<input id='email'>
<button type='submit' id='validate'>Validate!</button>
</form>
<h2 id='result'></h2>

Di bawah ini adalah hasil tampilan yang akan Anda dapatkan setelah menggabungkan semuanya menjadi file HTML

Jika validasi salah, maka tampilan akan berbeda

Sekarang Anda tahu cara membuat JavaScript dalam HTML dengan beberapa contoh dasar

Situs web anti-lambat ekstra cepat. Dapatkan domain gratis dengan langganan hosting web 1 tahun. Pilih Hosting Web

Kesimpulan

Pada artikel ini, kami menulis dua cara untuk memasukkan JavaScript ke dalam HTML. Jika Anda sudah menguasai kedua metode tersebut, maka Anda bisa melakukan apa saja dengan kedua bahasa pemrograman tersebut. JavaScript dapat dipadukan dengan HTML untuk mendukung aplikasi modern yang intuitif, interaktif, dan ramah pengguna sehingga Anda dapat dengan mudah mengembangkan situs web. Selain itu, dengan melakukan validasi sisi klien sederhana, lalu lintas ke server akan diturunkan dan kinerja situs web secara keseluruhan dapat ditingkatkan

Penulis

Ariata C

Ariata suka menulis dan menerjemahkan, dan saat ini bekerja sebagai penerjemah di Hostinger Indonesia. Melalui artikel dan tutorial yang dipublikasikan di blog Hostinger, Ariata ingin berbagi ilmu tentang website, WordPress, dan hal-hal terkait hosting lainnya kepada para pembaca.