Function dan event handling pada javascript

-

Halo... kali ini kita akan belajar tentang Function dan event handling pada javascript.

Oke langsung saja ke penjelasannya :D

FUNCTION

Function adalah fasilitas di setiap pemrograman untuk membuat suatu perintah yang fungsinya dapat kita gunakan berulang kali tanpa batas. 


Membuat Function di Javascript

untuk membuat function di javascript ada beberapa hal yang dipahami terlebih dahulu, yaitu tentang penulisan function di javascript. Berikut adalah contoh format penulisan function di javascript:

<script>
 
/membuat function di javascript
function nama_function(){
   // isi function nya di buat di sini
}
 
</script>

Pada contoh function diatas penulisannya harus diawali dengan syntax "function" kemudian dilanjutkan dengan nama function yang mau di buat. Dan isi dari function dituliskan didalam tanda kurung kurawal "{}".

Berikut adalah contoh source code untuk membuat function di javascript:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript Part 6 : Membuat Function di Javascript</title>
</head>
<body>
<h1>Membuat Function di Javascript</h1>
<h2>www.malasngoding.com</h2>
 
<!-- id hasil -->
<div id="hasil"></div>
 
<script>
// membuat function tampilkan_nama
function tampilkan_nama(){
return "Malas Ngoding";
}
document.getElementById("hasil").innerHTML = tampilkan_nama();
</script>
</body>
</html>

Perhatikan contoh source code diatas

// membuat function tampilkan_nama
function tampilkan_nama(){
return "Malas Ngoding";
}


Kita membuat function dengan nama tampilkan_nama() di panggil, hasilnya adalah "malas ngoding"


 

EVENT HANDLING

Event pada javascript adalah sesuatu yang terjadi pada element. Misalnya kita memiliki sebuah tombol di halaman website atau aplikasi yang kita buat, dan kita ingin memberikan suatu aksi jika tombol tersebut diklik. Jadi yang menjadi event disini adalah "klik". jika tombol diklik maka akan di tampilkan pesan yang menampilkan sebuah kalimat. Jadi event nya adalah klik. 

Adapun beberapa event yang terdapat pada javascript adalah sebagai berikut:

1. onclick : event jika sebuah element html di klik.

2. oncange : event jika sebuah element html berubah.

3. onmouseover : event jika sebuah element html di letakkan cursor mouse.

4. onmouseout : event jika saat cursor meninggalkan element html.

5. onkeydown : event jika saat terjadi pengetikan pada element html.

6. onload : event ketika saat element atau halaman dibuka.


Membuat Event Handling di Javascript

Untuk membuat event dengan javascript, kita bisa menambahkan atribut dengan nama-nama event di atas, pada element html yang kita berikan event. Contoh :

<button onclick="di sini berikan aksi yang ingin di lakukan">TOMBOL</button>

Contoh Event Handling di Javascript

Pada contoh akan membuat sebuah tombol yang menampilkan kalimat jika tombol tersebut diklik.

<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript Part 7 : Mengenal Event Pada Javascript</title>
</head>
<body>
<h1>Mengenal Event Pada Javascript</h1>
<h2>www.malasngoding.com</h2>
 
<!-- memberikan event pada element tombol -->
<button onclick="tampilkan_nama()">KLIK SAYA</button>
 
<!-- id hasil -->
<div id="hasil"></div>
 
<script>
// membuat function tampilkan_nama
function tampilkan_nama(){
document.getElementById("hasil").innerHTML = "<h3>Nama Saya Adalah Andi</h3>";
}
</script>
</body>
</html>

Pada contoh diatas terdapat event klik

<button onclick="tampilkan_nama()">KLIK SAYA</button>


Pada saat tombol ini diklik maka akan dijalankan function tampilan_nama() 

function tampilkan_nama(){
document.getElementById("hasil").innerHTML = "<h3>Nama Saya Adalah Andi</h3>";
}


Isi dari function tampilan_nama() ini adalah menampilkan kalimat "nama saya adalah andi" pada element id hasil.


Pada saat tombol diklik :


Sekian penjelasannya tentang function dan event handling, semoga bermanfaat. Terimakasih :D


Komentar

Posting Komentar

Postingan populer dari blog ini

Penyususan sketsa website toko online

-
Gambar
  Langkah 1, Menyiapkan Draft Konten Untuk membuat website toko online tentu saja kamu sudah menyiapkan produk untuk dijual kepada masyarakat. Produk ini bisa kamu masukkan dalam draft konten yang kamu sediakan.  Hal yang perlu kamu perhatikan dalam menyiapkan draft konten yaitu: List kebutuhan halaman  Kamu perlu untuk menentukan berapa banyak halaman yang kamu butuhkan saat membuat website sehingga kamu tidak kebingungan saat eksekusinya nanti. Salah satu list halaman untuk website Toko Online seperti berikut: List Halaman web Kamu bisa menggunakan list selain pada gambar untuk bereksplorasi Siapkan Draft tulisan  Karena ide itu sering tidak muncul disaat yang kita mau, maka kamu tidak bisa memastikan idemu akan muncul saat kamu membuat website. Untuk itu kamu perlu menyiapkan draft tulisan terlebih dahulu yang nantinya digunakan untuk mengisi  website kamu. Buat semenarik mungkin ya sob, supaya calon pembeli tertarik pada produk kamu. Draftnya bisa kamu atur ...
Baca selengkapnya

Library BeautifulSoup dan Requests

-
Gambar
BeautifulSoup BeautifulSoup sendiri merupakan sebuah Python Library yang digunakan untuk melakukan ekstraksi file dengan format XML atau HTML. Library ini memiliki banyak fungsi yang kita perlukan untuk melakukan ekstraksi informasi dari file kita dan sangat mudah digunakan. Pertama import seluruh library yang diperlukan. Kali ini, kita juga akan menggunakan menggunakan library urllib untuk melakukan request terhadap website tujuan kita. Library ini tidak perlu diinstall lagi, karena merupakan standard library dari Python sendiri. from urllib.request import urlopen from bs4 import BeautifulSoup Setelah dipastikan bahwa kedua library sudah bisa digunakan, lanjut dengan mengecek apakah kita bisa mengakses website yang akan kita tuju. Oiya, pastikan bahwa komputer kita terhubung dengan internet! Kemudian, dengan menggunakan salah satu link wikipedia kita akan melakukan request dengan membuka link tersebut dengan menggunakan urlopen yang telah kita import. Sebagai contoh, kita akan melakuk...
Baca selengkapnya

Scrape data shopee menggunakan python

-
Gambar
SCRAPE DATA SHOPEE MENGGUNAKAN PYTHON Kali ini saya akan membahas tentang web scrapping pada salah satu situs ecommerce yaitu shopee. Data Scrapping merupakan kegiatan untuk menemukan data dan mengumpulkannya. Data diambil secara langsung dari sebuah sumber, tidak hanya dari web tetapi bisa dari berbagai sumber dimana terdapat data. Ini mencakup spreadsheets, storage devices, dll. Proses ini diperlukan untuk menyaring (filtering) dan membedakan berbagai jenis data mentah dari berbagai sumber menjadi sesuatu yang berguna dan informatif. Sedangkan web scrapping sendiri merupakan proses data scrapping yang dilakukan hanya dari sumber website.Web scrapping ini sangat berguna pada bisnis online baik itu untuk riset pasar, riset kompetitor, atau mencari leads. Namun, manfaatnya lebih dari sekedar itu. Pada artikel kali ini saya akan membahas langkah-langkah web scraping pada salah satu website online shop yang cukup terkenal yaitu shopee. Untuk melakukan web scraping pada situs shopee ini ki...
Baca selengkapnya