Materi Tentang JavaScript Lengkap
1). Pengenalan JavaScript
JavaScript adalah bahasa pemrograman yang digunakan untuk membuat interaksi dan menambah fitur dinamis ke dalam halaman web. Untuk membuat website, memang tidak harus menggunakan JavaScript. Namun saat ini penggunaan JavaScript hampir selalu ada di setiap web modern. Bagi programer web, JavaScript merupakan salah satu bahasa pemrograman web yang wajib di kuasai.
Pada awal pembuatan JavaScript di tunjukan untuk membuat interaksi antara User dengan website menjadi lebih cepat dan tanpa menunggu pemrosesan dari server. Misalnya sebuah form yang terdapat di website dengan JavaScript kita dapat langsung memvalidasi dan mengetahui setiap inputan masih kosong atau sudah di isi dengan benar atau belum secara cepat. Sedangkan ketika tidak menggunakan JavaScript (cara lama) maka isi form tersebut harus di kirim dan di proses di server website terlebih dahulu dengan cara mengklik tombol submit yang ada di di dalam form, dan ketika ada inputan form yang tidak valid atau masih kosong server baru memberikan respon. Tentunya dengan cara seperti ini memerlukan waktu lebih lama bila dibanding dengan menggunakan JavaScript.
Untuk saat ini penggunaan JavaScript tidak terbatas dengan validasi form saja, yaitu untuk membuat website lebih interaktif dengan adanya animasi - animasi tertentu sehingga website terlihat modern, fitur chatting, request ajax, game, dan lain sebagainya. Untuk itu selain belajar HTML dan CSS kalian harus belajar JavaScript karna ini sangat penting apabila kamu ingin menjadi web developer, terutama pada bagian font end developer.
2). Penulisan Kode JavaScript
Didalam HTML kode JavaScript ditulis dengan tag <script> dan diakhiri dengan </script> sebagai penutup. Didalam itulah kode JavaScript ditulis. Apabila kalian menulis kode diluar script maka kode JavaScript tidak akan berfungsi. Untuk lebih jelasnya silahkan tulis kode di bawah ini
<html>
<head>
<script>
alert("Belajar JavaScript")
</script>
</head>
<body>
<p> Menulis Kode JavaScript </p>
</body>
</html>
Penempatan JavaScript dalam HTML
1). Penulisan Secara Internal
Untuk menulis JavaScript internal kamu cukup menggunakan tag HTML script dalam file HTML, kemudian dalam tag script tersebut langsung ditulis kode - kode JavaScript. Penulisan tag script dapat ditulis didalam tag head, namun juga dapat ditulis didalam tag body sebelum berakhiran dengan tag </body>. Tujuan penulisan sebelum berakhirnya tag body agar semua tag HTML didalam tag body telah selesai dimuat oleh browser, kemudian baru kode JavaScript dijalankan. Cara ini bertujuan agar jika ada kode JavaScript yang memilih element HTML yang ada didalam body dapat ditemukan oleh JavaScript.
Contoh :
<html>
<head>
<script>
alert("Belajar JavaScript 1");
</script>
</head>
<body>
<p> Menulis Kode JavaScript secara internal</p>
<script>
alert("Belajar JavaScript 2");
<script>
</body>
</html>
2). Penulisan Secara Eksternal
Untuk menulis JavaScript secara eksternal kalian juga membutuhkan tag script, namun pada tag pembukaan script memiliki sebuah atribut src. Dimana atribut tag tersebut memiliki value link dari file Java. Dan file kode JavaScript disimpan dengan format js, contohnya script.js. Jadi apabila kalian menyimpan file JavaScript dengan script.js yang masih satu folder dengan file HTML yang memuat file JavaScript tersebut src menjadi src="script.js".
Contoh :
<html>
<head>
<script src="script.js"> </script>
<script src="js/script.js"> </script>
<script src="http://www.contoh.com/js/script.js">
</script>
</head>
<body>
<p> Menulis Kode JavaScript Secara Eksternal </p>
</body>
</html>
Ketika kalian jalankan tidak ada efek apa apa ? Ya, karna file script.js belum dibuat. Pada tutorial ini kita akan menggunakan penulisan secara internal saja supaya tidak terlalu ribet banyak file.
3). Memilih Element HTML
Memilih element (Selector) HTML pada JavaScript intinya seperti selector pada CSS yang bisa menggunakan nama class, nama ID, atau tag HTML. Tujuan dari memilih element HTML ini biasanya untuk mengubah atu menambahkan sesuatu pada element yang akan dipilih. Misalnya mengubah nilai value tertentu, menambah atribut tertentu, hingga menambah tag HTML lainnya. Untuk memilih element HTML pada JavaScript caranya sebagai berikut.
Menggunakan ID
Berikut adalah cara memilih element dengan menggunakan ID.
<html>
<body>
<p id="paragraf"> Menulis Code JavaScript </p>
<script>
Document.getElementById("paragraf").style.color='red';
</script>
</body>
</html>
Menggunakan Nama Class
Berikut adalah cara memilih element dengan menggunakan nama class.
<html>
<body>
<p class="paragraf"> </p>
<p class="paragraf"> </p>
<script>
Document.getElementByClassName("paragraf")[0].innerHTML="paragraf 1";
Document.getElementByClassName("paragraf")[1].innerHTML="paragraf 2";
</script>
</body>
</html>
Menggunakan Nama Tag HTML
Berikut cara memilih element dengan menggunakan nama tag HTML.
<html>
<body>
<p> </p>
<p> </p>
<script>
Document.getElementByTagName("paragraf")[0].innerHTML="paragraf 1";
Document.getElementByClassName("paragraf")[1].innerHTML="paragraf 2";
</script>
</body>
</html>
4). Tipe Data String
Type data string pada JavaScript yaitu type data yang menampung text atau kalimat berupa karakter tertentu, kata - kata, atau kalimat yang kita gunakan sehari - hari. Untuk menggunakan type data string kita memerlukan tanda kutip diawal text atau kalimat dan juga diakhiri text atau kalimat.
Contoh :
<html>
<body>
<p> </p>
<p> </p>
<script>
var text1='Belajar JavaScript';
var text2="Belajar HTML";
document.getElementsByTagName("p")
[0].innerHTML= text1;
document.getElementsByTagName("p")
[1].innerHTML= text2;
</script>
</body>
</html>
Operasi String
Penggunaan operator operasi string bertujuan untuk menambahkan (menyambunng) string satu dengan string yang lainnya. Untuk menyambung string satu dengan string lainnya kita dapat menggunakan operator (+).
Contoh :
<html>
<body>
<p> </p>
<p> </p>
<script>
var text1='Belajar JavaScript';
var text2="Belajar HTML";
var gabung1='text1 + text2;
var gabung2= text1 + "Dengan" + text2
document.getElementsByTagName("p")
[0].innerHTML= text1;
document.getElementsByTagName("p")
[1].innerHTML=
</script>
</body>
</html>
5). Tipe Data Number
Tipe data number merupakan tipe data yang dapat dioperasikan matematika misalnya seperti tambah, kurang, kali, bagi, dan lain sebagainya.
Contoh :
<html>
<body>
<p> </p>
<p> </p>
<script>
var angka1= 1000;
var angka2= 50;
document.getElementsByTagName("p")
[0].innerHTML= angka1;
document.getElementsByTagName("p")
[1].innerHTML= angka2;
</script>
</body>
</html>
Operator Matematika
Sekarang kita coba untuk mengoperasikan bilangan diatas dengan operator aritmatika
+ Tambah
- Kurang
* Kali
/ Bagi
Contoh :
<html>
<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<script>
var angka1= 1000;
var angka2= 50;
var penjumlahan = angka1 + angka2;
var pengurangan = angka1 - angka2;
var perkalian = angka1 * angka2;
var pembagian = angka1 / angka2;
document.getElementsByTagName("p")
[0].innerHTML = penjumlahan;
document.getElementsByTagName("p")
[1].innerHTML = pengurangan;
document.getElementsByTagName("p")
[2].innerHTML = perkalian;
document.getElementsByTagName("p")
[3].innerHTML = pembagian;
</script>
</body>
</html>
6). Fungsi String
IndexOf()
Untuk mencari text tertentu dalam satu string yang paling awal, nilai yang dihasilkan berupa angka dan dimulai dari nomor index 0.
<html>
<body>
<script>
var text = "Belajar JavaScript";
var hasil = text.indexOf("a");
alert(hasil);
</script>
</body>
</html>
LastIndexOf()
untuk mencapai text tertentu dalam satu string yang paling akhir, nilai yang dihasilkan berupa angka (kebalikan dari indexof()).
<html>
<body>
<script>
var text = "Belajar JavaScript";
var hasil = text.lastIndexOf("a");
alert(hasil);
</script>
</body>
</html>
Search()
Untuk mencari tulisan atau kata tertentu, metode ini cocok untuk digunakan untuk regex (regular expression), dan dihasilkan juga berupa angka.
<html>
<body>
<script>
var text = "Belajar JavaScript";
var hasil = text.search("JavaScript");
alert(hasil);
</script>
</body>
</html>
ChartAt()
Ini merupakan kebalikan dari indexOf() yaitu mencari string berdasarkan nomor index, nilai yang dihasilkan yaitu berupa string.
<html>
<body>
<script>
var text = "Belajar JavaScript";
var hasil = text.chartAt(10);
alert(hasil);
</script>
</body>
</html>
Replace()
Untuk mengganti tulisan pada string.
<html>
<body>
<script>
var text = "Belajar JavaScript";
var hasil = text.replace("script", "code");
alert(hasil);
</script>
</body>
</html>
Substring
untuk mencari kata tertentu berdasarkan nomor index, misalnya namaVar.substring(2,10) berarti yang diambil nomor index 2 samapi 9.
<html>
<body>
<script>
var text = "Belajar JavaScript";
var hasil = text.substring(2, 10);
alert(hasil);
</script>
</body>
</html>
Substr
Untuk mencari kata tertentu berdasarkan nomor index, misalnya namaVar,substr(2, 10) berarti mengambil tulisan mulai nomor index 2 dan 10 karakter selanjutnya
<html>
<body>
<script>
var text = "Belajar JavaScript";
var hasil = text.substr(2, 10);
alert(hasil);
</script>
</body>
</html>
7). Fungsi
Function atau bisa juga di sebut dengan fungsi yaitu blok kode program yang dibuat supaya kode kita terlihat lebih singkat dan tentunya lebih rapi. Karena kode yang kita ingin gunakan berulang - ulang akan ditulis kedalam function tersebut, dan function dapat dipanggil berulang - ulang (Tanpa Batas) selama dalam kode JavaScript masih terhubung dengan function tersebut. Sebelumnya kita sudah pernah menggunakan function yang secara bawaan sudah dibuat oleh pengembang JavaScript, misalnya search(), replace(), substring(), dan lain - lain. Sekarang kita akan mencoba membuat sendiri fungsinya.
<html>
<body>
<p> </p>
<script>
function(){
document.getElementsByTageName("p")
[0].innerHTML = "Belajar JavaScript";
}
</script>
</body>
</html>
Fungsi Dengan Parmeter
Parameter yaitu sebuah nilai atau variabel yang ada didalam kurung pada nama function.
<html>
<body>
<p> </p>
<script>
function luaspersegipanjang(panjang, lebar){var luas = panjang * lebar;
document.getElementsByTagName("p")
[0].innerHTML = luas persegi panjang dengan panjang "+panjang+" dan lebar "+lebar+" adalah "+luas;
}
luaspersegipanjang(8, 4);
</script>
</body>
</html>
Fungsi Return
Untuk mengembalikan nilai dari sebuah fungsi yaitu dengan menambah return diakhir kode.
<html>
<body>
<p> </p>
<script>
function luaspersegipanjang(8, 4){
var hitungluas = panjang * lebar;
return hitungluas; }
var luas = luaspersegipanjang(8, 4);
document.getElementsByTagName("p")
[0].innerHTML = "Luas persegi panjang dengan panjang 8 dan lebar 4 adalah "+luas;
</script>
</body>
</html>
8). Kondisi
if digunakan untuk melakukan cek apakah kondisi tersebut benar. Jika true (benar) akan di eksekusi, jia false (salah) akan mengeksekusi else.
<html>
<body>
<p> </p>
<script>
var hargabarang = 10000;
var jmluang = 50000; //silahkan diganti - ganti lebih kecil atau sama dengan harga barang
if(hargabarang == jmluang){
document.getElementsByTagName("p")
[0].innerHTML = "Kamu dapat membelinya, uang kamu pas";
}else if(hargabarang < jmluang){
document.getElementsByTagName("p")
[0].innerHTML = "Kamu dapat membelinya, uang kamu masih sisa";
}else{
document.getElementsByTagName("p")
[0].innerHTML = "Kamu tidak dapat membelinya, uang kamu kurang";
}
</script>
</body>
</html>
9). Perulangan
Perulangan sangat diperlukan dalam bahasa pemrograman untuk menulis kode program yang sama secara berulang - ulang beberapa kali. Untuk itu kita bisa menggunakan perulangan for.
<html>
<body>
<p> </p>
<script>
var text = "";
for(var i=1; i<=3; i++){
text += "Belajar JavaScript";
}
document.getElementsByTagName("p")
[0].innerHTML = text;
</script>
</body>
</html>
10). HTML Event
HTML Event adalah attribute di dalam HTML yang berisi perintah untuk menjalankan script (JavaScript). Event sendiri berarti peristiwa yang mana peristiwa tersebut melekat pada HTML element sebagai attribute, baik itu tanpa atau setelah ada interaksi dari user seperti menjalankan script ketika loading halaman, menjalankan script ketika user mengklik tombol button pada HTML element <button> dan lain sebagainya.
Contoh :
<button onclick="alert('Belajar JavaScript')"> Klik Aku </button>
Berikut contoh - contoh lain dari event HTML
<p id="mytext"> </p>
<button onclick="displayDate()">Klik Aku </button>
<input type="text" onkeydown="document.getElementById('mytext').innerHTML = 'Kamu menekan Keyboard';" / >
<script>
function display Date() {
document.getElementById("mytext").innerHTML = Date();
}
</script>
Berikut beberapa event yang sering dipakai :
Event
onchange : menjalankan script ketika ada perubahan nilai atau konten pada sebuah element.
onclick : menjalankan script ketika element di klik.
onmouseover : menjalankan script ketika mouse diarahkan ke element.
onmouseout : menjalankan script ketika mouse diarahkan keluar element.
onkeydown : menjalankan script ketika keyboard ditekan.
onload : menjalankan script ketika browser berhasil memuat halaman.
11). Validasi
Validasi form sangat diperlukan dalam sebuah aplikasi. Terkadang kita diharuskan membuat form yang datanya harus diisi, ataupun input yang format isinya ditentukan seperti harus angka atau harus email. Jika pengguna tidak memenuhi ketentuan pengisian form maka akan muncul peringatan bahwa pengisian form tersebut tidak valid dan harus diperbaiki sebelum disimpan kembali.
<html>
<body>
<p id="pesan"> </p>
<form action="#">
<input type="text" id="fusername" palceholder="Username" required> <br>
<input type="password" id="fpassword" placeholder="Password"> <br>
<input type="submit" value="simpan" onclick="simpan();">
</form>
<script>
function simpan(){
var user = document.getElementById("fusername").value
var pass = document.getElementById("fpassword").value;
if(user===""){
document.getElementById("pesan").innerHTML = "Masukka Username";
}else if(pass===""){
document.getElementById("pesan").innerHTML = "Masukkan Password";
}else if(user==="admin" && pass=="1234"){
alert("login sukses");
}else{
alert("login gagal");
}
}
</script>
</body>
</html>
About / Disclaimer / Contact / Privacy Policy
Comments
Post a Comment