Cara menggunakan +6 di JavaScript

Jika pada tutorial Javascript sebelumnya kita mempelajari tentang If Else Logical Structure, maka pada tutorial kali ini kita masuk ke pembahasan cara membuat function pada Javascript

Table of Contents Show

1. Acara di JavaScript
2. Acara. Apa dan Kapan?
3. Atribut Penangan Peristiwa
4. Acara Umum

Fungsi dalam javascript adalah sub-program yang dibuat sekali, dan kita dapat menggunakannya kembali dalam program itu sendiri, serta program orang lain, jadi kita tidak perlu membuat kode lagi, kita cukup memanggilnya kembali

Pada Javascript, function adalah objek yang memiliki Properties dan Method, berikut cara membuat function pada Javascript

Fungsionalitas dalam Javascript inilah yang membuat bahasa pemrograman Javascript kuat

function namaFungsi() {
 console.log("Hello Ilmu Web");
}

Struktur atau cara dalam membuat suatu fungsi dimulai dengan nama fungsi diikuti dengan nama fungsi, kemudian tanda kurung buka dan tutup dan bisa diisi dengan parameter atau bisa juga dikosongkan, bagian pertama diisi dengan fungsi yang akan kita jalankan, dan kemudian untuk memanggil fungsi tersebut adalah dengan menulis nama fungsinya. nama fungsi();

Sebagai latihan kita membuat file latihan. html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Javascript</title>

</head>

<body>
    <h1>Hello World</h1>

    <script src="script.js"></script>
</body>

</html>

Buat file javascript terpisah dengan nama file skrip. js namanya disesuaikan dengan yang kita inginkan, disini saya membuat file javascript dengan nama script tersebut. js kemudian di akhir sebelum badan penutup tag HTML saya memanggil file

Javascript pada pelatihan kita kali ini akan mengembangkan fungsi perkalian dua bilangan, berikut kodingnya

skrip. js

// fungsi perkalian dua bilangan 

function kali (a,b){
    return a * b;
}

console.log('Hasil Kali dari dua bilangan adalah : ' + kali(5, 5));

Dari script diatas kita dapat mempelajari bagaimana kita membuat fungsi dikalikan dua bilangan, dimana nama fungsi yang kita buat adalah kali, dengan parameter a dan b, pada badan fungsi kita mengembalikan hasil perkalian jumlah parameter a kali b

Selanjutnya hasil perkalian kedua angka tersebut kita tampilkan menggunakan console log dan kita panggil fungsi perkaliannya ok sobat bisa coba dengan mengganti angka 5 x 5 diatas dengan angka lain untuk melihat apakah nilainya berubah, hasilnya dari fungsi yang kita buat adalah sebagai berikut

Selanjutnya teman-teman bisa mencoba latihan dengan menggunakan operator matematika lain dengan penjumlahan dua bilangan, atau pengurangan

Peristiwa JavaScript adalah tindakan atau proses spesifik yang terjadi dalam program atau situs web yang akan Anda kembangkan. Anda dapat menyiapkan respons yang akan dipicu oleh peristiwa tertentu. Misalnya, peristiwa mouse JavaScript mengacu pada berbagai gerakan kursor di atas elemen

Pada artikel ini, Anda akan mempelajari javascript tentang cara membuat event JavaScript, dan cara menambahkan event JavaScript dan event browser. Anda juga akan memahami bagaimana, kapan, dan di mana Anda dapat menambahkan acara JavaScript untuk meningkatkan kualitas situs Anda, menjadikannya lebih halus dan ramah pengguna.

Daftar isi

1. Acara di JavaScript

Apa pun yang terjadi pada elemen HTML menggunakan JavaScript disebut peristiwa JavaScript. JavaScript dapat mengeksekusi kode tertentu ketika peristiwa tertentu terjadi

Peristiwa dalam JavaScript dapat berupa sesuatu yang dilakukan pengguna (misalnya, mengeklik elemen HTML) atau sesuatu yang dilakukan browser (misalnya, menyelesaikan pemuatan laman).

2. Acara. Apa dan Kapan?

Perlu diingat bahwa atribut acara HTML dapat mengeksekusi JavaScript secara langsung atau melalui suatu fungsi. Fungsi dapat dan harus dibuat oleh Anda. Cara ini akan sesuai dengan kebutuhan Anda

Penanganan event JavaScript dapat berguna saat Anda ingin menjalankan fungsi tertentu saat ada perubahan pada halaman web. Ini adalah peristiwa halaman web yang paling umum

Halaman dimuat
Pengguna mengklik tombol
Data masukan pengguna

3. Atribut Penangan Peristiwa

Atribut event handler JavaScript dapat disisipkan ke dalam elemen HTML. Pada contoh di bawah ini, Anda dapat melihat salah satu event tombol JavaScript yang paling sederhana

Atribut event handler onclick JavaScript ditambahkan ke elemen tombol HTML. Saat pengguna mengklik tombol, peristiwa JavaScript terjadi. Selain itu, kode tersebut menentukan apa yang harus dilakukan saat peristiwa tersebut terjadi

Artikel Terkait Tutorial JavaScript 39. Cara Membuat Pewaktu JavaScript

Contoh

<button onclick="document.getElementById('pesan').innerHTML = 'Selamat Belajar!'">Klik saya</button>

Biasanya kode yang akan dieksekusi pada event lebih panjang dari satu baris. Dalam hal ini, akan lebih mudah untuk menggunakan fungsi tersebut

Contoh

<button onclick="pesanFunction()">Klik saya</button>

4. Acara Umum

Ada banyak kemungkinan acara di JavaScript untuk membuat situs web Anda dinamis dan rapi. Namun, seperti dalam setiap bahasa pemrograman, beberapa fungsi lebih populer daripada yang lain karena lebih nyaman dan cocok untuk konteksnya

Misalnya, peristiwa mouse JavaScript menyertakan kasus saat kursor diarahkan ke elemen, diklik, atau dipindahkan ke gambar. Berikut adalah daftar event handler JavaScript yang paling umum (alat yang memicu fungsi JavaScript untuk dijalankan)

Dalam perubahan

Terjadi ketika elemen HTML berubah. Biasanya digunakan untuk combobox (select list), text field dan text area

Contoh kode

function testFunction() {
  var n = document.getElementById("nama");
  document.getElementById("hasil").innerHTML = n.value.toUpperCase();
}
Masukkan nama : <input type="text" id="nama" onchange="testFunction()">
<p id="hasil"></p>

Di klik

Terjadi saat pengguna mengklik elemen HTML. Acara onclick biasanya terjadi ketika pengguna mengklik elemen di html. Acara ini digunakan untuk tombol, tautan, tombol radio, kotak centang, tombol kirim atau tombol atur ulang

Contoh kode

<h1 id="hasil"></h1>
<button id="pesan" onclick="testFunction()" >Klik saya</button>

<script>
function testFunction() {
  var n = "Selamat Belajar!";
  var hasil =document.getElementById("hasil");
  hasil.innerHTML = n;
}
</script>

Onmouseover

Terjadi saat pengguna mengarahkan kursor ke elemen HTML. Event onmouseover berjalan ketika user menggerakkan kursor mouse untuk menyentuh elemen tertentu, baik berupa dokumen, link, form, gambar dan lain-lain.

Contoh kode

<div onmouseover="inFunction(this)" style="background color: lightblue; width: 70px; height: 70px; padding: 20px;">Taruh kursor disini</div>

<script>
function inFunction(n) {
  n.innerHTML = "Selamat Belajar!";
}
</script>

Onmouseout

Terjadi saat pengguna memindahkan kursor dari elemen HTML. Event onmouseout adalah kebalikan dari onmouseover, yaitu event ini akan terjadi ketika kursor mouse bergerak keluar dari elemen tertentu

Contoh kode

<div onmouseout="outFunction(this)" style="background color: lightblue; width: 70px; height: 70px; padding: 20px;">Selamat Belajar!</div>

<script>
function outFunction(n) {
  n.innerHTML = "Taruh kursor disini";
}
</script>

Onkeydown

Terjadi saat pengguna menekan tombol keyboard

Contoh kode

<p>klik input lalu tekan tombol S pada keyboard</p>
<label>tekan di dalam sini</label>:<input type="text" size="40" onkeydown="testFunction(event)">
<script>
function testFunction(event) {
  var n = event.key;
  // Apabila tombol yang di tekan pada keyboard adalah  "s" atau "S" (menggunakan capslock atau shift), maka akan muncul alert.
  if (n == "s"  || n == "S") { 
    alert ("Selamat Belajar!");
  }
}
</script>

Muat

Terjadi saat halaman web saat ini selesai dimuat. Acara ini biasanya dapat dibuat di badan dokumen

Contoh kode

<button onclick="pesanFunction()">Klik saya</button>

Penutupan. acara JavaScript

Peristiwa dalam JavaScript terjadi saat kode JS dijalankan karena beberapa tindakan yang terjadi. Penangan acara JavaScript diimplementasikan ke dalam elemen HTML