Cara menggunakan contoh aplikasi javascript

Dalam lanjutan tutorial belajar JavaScript di Duniailkom kali ini akan dibahas tentang Cara Menjalankan Kode Program JavaScript

Table of Contents Show

Aplikasi Untuk Menjalankan JavaScript
Cara Menjalankan kode JavaScript
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
Aplikasi apa yang menggunakan JavaScript?
Bagaimana menjalankan JavaScript Coba jelaskan?
Apa fungsi JavaScript dan berikan contohnya?
Bagaimana cara membuat fungsi dalam JavaScript?

Aplikasi Untuk Menjalankan JavaScript

Untuk menjalankan JavaScript, kita hanya membutuhkan aplikasi text editor dan web browser

Aplikasi text editor yang digunakan bisa gratis. Jika Anda membutuhkan sesuatu yang ringan, Anda dapat mencoba Notepad++. Atau jika Anda menginginkan sesuatu yang lebih modern, Anda dapat membuka Microsoft VS Code. Editor teks lain seperti Atom atau Sublime Text juga bisa menjadi alternatif pilihan

Untuk web browser, Anda juga bebas menggunakan aplikasi web browser apapun. Sebagian besar browser web modern sudah mendukung standar EcmaScript terbaru. Pilihan terbaik adalah Google Chrome, Mozilla Firefox, atau Microsoft Edge

Pada tutorial JavaScript di duniailkom kali ini, saya akan banyak menggunakan web browser Google Chrome

Cara Menjalankan kode JavaScript

Setelah editor teks dan browser web tersedia, saatnya untuk mulai menjalankan aplikasi JavaScript pertama Anda

Cara penulisan JavaScript hampir sama dengan penulisan bahasa pemrograman web lainnya seperti PHP dan CSS yaitu dengan menyisipkan kode JavaScript pada HTML

Silahkan buka aplikasi text editor, lalu ketik kode berikut

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  Klik tombol ini untuk menambahkan kalimat baru:
  <button id="tambah" onclick="tambahSemangat()">Semangaat..!!</button>
  <div id="div_semangat"></div>

  <script>
    function tambahSemangat() {
      let a = document.getElementById("div_semangat");
      a.innerHTML += "<p>Sedang belajar JavaScript, semangat...!!!</p>";
    }
  </script>

</body>
</html>

Simpan kode diatas dengan nama passion. html. Folder tempat penyimpanan file ini tidak masalah, namun agar lebih rapi saya akan membuat folder learn_javascript di drive D, jadi alamat file diatas ada di D. /learn_javascript/antusiasme. html. Anda dapat membuat folder yang sama atau menyimpan ke folder lain

Perhatikan nama file dari ujung contoh kita. html, karena ini hanyalah file HTML dengan kode JavaScript yang disisipkan

Untuk menjalankan file, sama seperti HTML biasa. Cukup klik dua kali semangat. html dan hasilnya akan muncul di web browser

Untuk menguji kode JavaScript yang telah dibuat, silahkan klik tombol "Semangaat. " beberapa kali. Sebuah kalimat baru harus ditambahkan di akhir halaman

Senang. , kami telah berhasil menjalankan kode JavaScript

Terlepas dari arti kode yang ada, perintah JavaScript akan menambahkan kalimat ke halaman web setelah halaman muncul di web browser

Inilah yang membuat JavaScript menawarkan kelebihannya. Kita bisa memodifikasi apapun di halaman web tanpa proses reload. Bahkan dengan mengklik sebuah tombol, kita dapat mengubah seluruh tampilan halaman web

Selanjutnya kita akan membahas Cara Melihat Pesan Error JavaScript

Saat ini di Duniailkom tersedia eBook / Uncover buku JavaScript. Dengan total lebih dari 650 halaman A4, materi dalam buku ini jauh lebih banyak dari tutorial yang ada di website Duniailkom. Penjelasan lebih lanjut bisa ke. Pengungkapan JavaScript – Panduan Pembelajaran JavaScript

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

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.

Adanya JavaScript memungkinkan developer untuk membuat website 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 digabungkan dengan HTML untuk mendukung aplikasi modern yang intuitif, interaktif, dan ramah pengguna sehingga Anda dapat mengembangkan situs web dengan mudah. 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.

Aplikasi apa yang menggunakan JavaScript?

Namun, sebelumnya Anda membutuhkan beberapa aplikasi berikut untuk mendukung Anda mempelajari Javascript. Browser web (Google Chrome, Firefox, atau lainnya). Editor teks (Atom, Notepad, atau lainnya). Web server, untuk menjalankan kode pemrograman .

Bagaimana menjalankan JavaScript Coba jelaskan?

Aktifkan JavaScript di browser Anda .

Buka Chrome di komputer Anda

Klik. Pengaturan

Klik Keamanan dan Privasi

Klik Setelan situs

Klik JavaScript

Pilih Situs dapat menggunakan JavaScript

Apa fungsi JavaScript dan berikan contohnya?

Javascript dapat digunakan untuk membuat berbagai fitur seperti drag, drop komponen yang semuanya dapat berguna untuk meningkatkan tampilan (antarmuka) dan pengalaman menggunakan web . Selain itu, pemrogram juga dapat memperluas fungsionalitas halaman web dengan menulis cuplikan Javascript untuk add-on pihak ketiga, misalnya.

Bagaimana cara membuat fungsi dalam JavaScript?

untuk membuat fungsi , penulisan harus didahului dengan sintaks " fungsi " lalu lanjutkan dengan nama fungsi yang ingin Anda buat . dan isi fungsi ditulis dalam kurung kurawal buka “{” dan kurung kurawal tutup “}”.