Sabtu, 08 April 2017

Mengenal Event Pada Javascript

on April 08, 2017


Pengertian Event Pada Javascript

      Event pada javascript adalah sesuatu yang terjadi pada element. Apa maksud dari event pada javascript...?? Maksudnya adalah misal kita membuat tombol di halaman website atau aplikasi apapun yang kita bangun, dan kita ingin memberikan suatu aksi jika tombol tersebut di klik. kesimpulannya event adalah jika tombol tersebut di klik maka akan muncul pesan dan klik itulah yang di namakan event.

Macam-macam event pada javascript.
  • onclick = adalah event jika sebuah element HTML di klik
  • onchange = adalah event jika sebuah element HTML berubah
  • onmouseover = adalah event jika sebuah element di letakkan cursor mouse
  • onmouseout = adalah event jika saat cursor mouse meninggalkan elemnet HTML
  • onkeydown = adalah event jika saat terjadi pengetikan element HTML
  • onload = adalah event jika saat halaman di buka
Cara Membuat Event Javascript

Untuk membuat event dengan javascript, kita bisa tambah kan nama-nama yang ada di atas tadi.

Contoh

<button onclick="di sini berikan aksi yang ingin di lakukan">TOMBOL</button>
 Contoh Event pada javascript

Untuk contohnya saya akan membuat event klik pada sebuah tombol. Saya ingin menampilakan aksi pada saat tombol di klik

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Javascript</title>
</head>
<body>
    <h1>Mengenal Event Pada Javascript</h1>

    <!-- 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 Amirul Muttaqin</h3>";
        }
       
    </script>
</body>
</html>
 Kita perhatikan contoh di atas, terdapat event klik
<button onclick="tampilkan_nama()">KLIK SAYA</button>
Pada saat tombol di klik maka secara otomatis akan menjalankan function tampil_nama. Lalu kita buat function tampil_nama
function tampilkan_nama(){
            document.getElementById("hasil").innerHTML = "<h3>Nama Saya Adalah Amirul Muttaqin</h3>";
Perhatikan hasilnya




 Dan kekita di klik akan muncul seperti di bawah.




Disana muncul kalimat "Nama Saya Adalah Amirul Muttaqin"

Referensi : www.malasngoding.com


Jumat, 07 April 2017

Membuat Function pada javascript

on April 07, 2017


Membuat function pada java script.

Apa itu function..? 
Mungkin sebagian dari kita belum tau function itu apa, nah sekarang saya akan sedikit menynggung tentang function. Function adalah fasilitas di setiap pemrograman  untuk membuat suatu perintah yang fungsinya dapat kita gunakan berulang kali tanpa batas. Selama halaman function masih terhubung  dengan function yang di maksud.

Utntuk membuat function di javascript ada beberapa hal yang harus kita pahami terlebih dahulu. Yaitu kita harus memahami penulisan function di javascript. Contoh penulisan function di javascript.
<script>

/membuat function di javascript
function nama_function(){
   // isi function nya di buat di sini
}
</script>
 Seperti yang kita lihat pada contoh diatas. Untuk membuat function, penulisannya harus di awali oleh syntax "function" dan kemudian kita lanjutkan memasukkan nama function yang kita buat. Dan isi dari function di masukkan dalam tanda kurung kurawal pembuka { dan tanda kurung kurawal penutup }
Contoh
<!DOCTYPE html>
<html>
<head>
    <title>Belajar Javascript</title>
</head>
<body>
    <h1>Membuat Function di Javascript</h1>
   

    <!-- id hasil -->
    <div id="hasil"></div>

    <script>      
        // membuat function tampilkan_nama
        function tampilkan_nama(){
            return "Amirul Muttaqin";
        }
      
        document.getElementById("hasil").innerHTML = tampilkan_nama();
      
    </script>
</body>
</html>
Perhatikan contoh di atas
  // membuat function tampilkan_nama
        function tampilkan_nama(){
            return "Amirul Muttaqin";
        }

 kita membuat function tampil_nama(). Yang berisi perintah untuk mengembalikan stirng "Amirul Muttaqin", jadi saat function tampil_nama() di panggil, maka akan tampil "Amirul Muttaqin"



Referensi : www.malasngoding.com

Kamis, 06 April 2017

Mengenal Tipe Data Pada Javascript

on April 06, 2017


Mengenal Tipe Data Pada Javascript.

Kita mulai dengan mengenal tipe data pada javascript. Di javascript terdapat 5 buah tipe data yang masing-masing memiliki kegunaan dan fungsinya masing-masing diantanya adalah :
  • Number
  • String
  • Boolean
  • Array
  • Object
Dan beberapa kegunaan dan penggunaan dari masing-masing tipe data javascript adalah sebagai berikut.

Tipe Data Number pada javascript

Tipe data number atau integer adalah tipe data yang berbentuk bilangn bulat. Contoh adalah 0,1,2,3,4,5,6,7,8,9,10.... dan seterusnya. Cara menggunakn tipe data adalah sebagai berikut
 <!DOCTYPE html>
<html>
<head>
    <title>Belajar Javascript</title>
</head>
<body>
    <h1>Tipe Data Number Pada Javascript</h1>
   

    <!-- id hasil -->
    <div id="hasil"></div>

    <script>
        // tipe data Number
        var angka = 80;

        // menampilkan tipe data number pada element id hasil
        document.getElementById("hasil").innerHTML = angka;
    </script>
</body>
</html>
Seperti yang kita dapat lihat pada contoh di atas. Penulisan tipe data number tidak menggunakan tanda petik seperti string
var angka = 80;
Dan jika dijalankan pada browser maka hasilnya




Tipe data string pada javascript

Di dalam pemrograman, tipe data string memiliki peran penting di dalamnya. Tanpa tipe data string kita juga tidak bisa mendifinisikan suatu variabel dan lainnya. Tipe data string biasanya berbentuk kata atau kalimat. Contoh tipe data string
<!DOCTYPE html>
<html>
<head>
    <title>Belajar Javascript</title>
</head>
<body>
    <h1>Tipe Data String Pada Javascript</h1>

    <!-- id hasil -->
    <div id="hasil"></div>

    <script>
        // tipe data string
        var kalimat = "Belajar javascript dasar ";

        // menampilkan tipe data string pada element id hasil
        document.getElementById("hasil").innerHTML = kalimat;
    </script>
</body>
</html>
Dapat kita lihat pada contoh tipe data string di atas, terdapat sebuah variabel dengan tipe data string. Dan kemudian kita tampilkan. "belajar javascript dasar"
var kalimat = "Belajar javascript dasar ";



Tipe data Array pada javascript

        Tipe data array adalah tipe data yang mampu menympan banyak data di dalam satu buah variabel. Dan data-data yang terdapat di dalam variabel tersebut di berikan nomor masing-masing sesuai urutannya, untuk memudahkan kita dalam menampilkan atau memanggil data yang diinginkan. 
Contoh tipe data array
 <!DOCTYPE html>
<html>
<head>
    <title>Belajar Javascript</title>
</head>
<body>
    <h1>Tipe Data Array Pada Javascript</h1>

    <!-- id hasil -->
    <div id="hasil"></div>

    <script>
        // tipe data Array
        var hewan = ["sapi", "harimau", "tikus"];

        // menampilkan tipe data Array pada element id hasil
        document.getElementById("hasil").innerHTML = hewan[0];
    </script>
</body>
</html>
 Perhatikan contoh di atas, terdapat tipe data array di dalam variabel hewan
var hewan = ["sapi", "harimau", "tikus"];
Di dalam variabel array hewan ini terdapat kata sapi,harimau,tikus. Berarti angka penyebut untuk sapi adalah 0, hariamau adalah 1, tikus adalah 2. untuk bisa memanggil nama hewan tersebut kita masukkan angka yang sesuai dengan hewan tersebut
 hewan[0];
 Di atas akan menampilakn sesuai degan urutan nomor yang telah ada di atas tadi yaitu hewan yang akan muncul adalah sapi



 keterangan
  • sapi=0
  • harimau=1
  • ayam=2
 Tipe data Object pada javascript

        Tipe data Object berisi data yang banyak di dalam sebuah variabel. memiliki nama dan value nya masing-masing.
Contoh
<!DOCTYPE html>
<html>
<head>
    <title>Belajar Javascript</title>
</head>
<body>
<h1>Tipe Data Object Pada Javascript</h1>
   
    <!-- id hasil -->
    <div id="hasil"></div>

    <script>
        // tipe data object       
        var manusia = {
            nama : "Amirul Muttaqin",
            alamat  : "Situbondo",
            umur       : 17,
            pekerjaan  : "pelajar"
        };

        // menampilkan tipe data object pada element id hasil
        document.getElementById("hasil").innerHTML = manusia.nama + " tinggal di, " + manusia.alamat + " dia sekarang berumur"+ manusia.umur +" dan bekerja sebagai " + manusia.pekerjaan;
    </script>
</body>
</body>
</html>
 Di sini terdapat tipe data object
var manusia = {
            nama : "Amirul Muttaqin",
            alamat  : "Situbondo",
            umur       : 17,
            pekerjaan  : "pelajar"
        };

 nama, alamat, umur, pekerjaan adalah nama. Dan valuenya adalah Amirul Muttaqin, Siubondo, 17, Pelajar. Untuk Mengakses datanya , pertama kita harus menuliskan variabel, dan kemudian di ikuti dengan nama data. Misalnya jika kita ingin menampilkan data alamat. penulisannya adalah manusia.alamat, maka akan tampil situbondo.



 Refernsi : www.malasngoding.com

Rabu, 05 April 2017

Operator Aritmatika javascript

on April 05, 2017


Operator Aritmatika pada javascript

        Di bawah ini adalah beberapa operator aritmatika yang ada di dalam javascript dan  bisa kita gunakan untuk membuat oprasi perhitungan denagn javascript.

Berikut adalah macam-macam dari operator aritmatika yang dapat kita gunakan
  •  + Penjumlahan
  •  - Pengurangan
  • * Perkalian
  • / Pembagian 
  • % Moduulus
  • ++ Increment 
  • -- Decrement
Contoh 
 <!DOCTYPE html>
<html>
    <head>
        <title>Belajar Javascript</title>
    </head>
    <body>
        <h1>Belajar Javascript<br/> Operator Aritmatika Pada Javascript</h1>
       

        <div id="penjumlahan"></div>               

        <script>
            var bilangan1 = 10;
            var bilangan2 = 5;

            var penjumlahan = bilangan1 + bilangan2;           

            document.getElementById("penjumlahan").innerHTML = penjumlahan;           
        </script>
    </body>
</html>

 Pada contoh di atas kita membuat contoh penjumlahan. Di dalam contoh tersebut ada dua variabel yaitu bilangan 1 dan bilangan 2, dan setiap variabel berisi angka 10 dan 5. Dan untuk menjumlahkannya kita tinggal menambahkan syntax di bawah ini.
var penjumlahan = bilangan1 + bilangan2;

Sampai disini variabel penjumlahan sudah berisi hasil dari bilangan 1 dan bilangan 2, 10+5. Kemudian hasilnya kita tampilkan pada element yang ber id penjumlahan. (tag div). Dan hasilnya.


  

Dan hasilnya akan muncul angka "15"

Contoh lain :
 <!DOCTYPE html>
<html>
    <head>
        <title>Belajar Javascript</title>
    </head>
    <body>
        <h1>Belajar Javascript<br/> Operator Aritmatika Pada Javascript</h1>
       

        <div id="penjumlahan"></div>
        <div id="pengurangan"></div>
        <div id="perkalian"></div>
        <div id="pembagian"></div>
        <div id="modulus"></div>       


        <script>
            var bilangan1 = 10;
            var bilangan2 = 5    ;

            var penjumlahan = bilangan1 + bilangan2;
            var pengurangan = bilangan1 - bilangan2;
            var perkalian = bilangan1 * bilangan2;
            var pembagian = bilangan1 / bilangan2;
            var modulus = bilangan1 % bilangan2;

            document.getElementById("penjumlahan").innerHTML = penjumlahan;
            document.getElementById("pengurangan").innerHTML = pengurangan;
            document.getElementById("perkalian").innerHTML = perkalian;
            document.getElementById("pembagian").innerHTML = pembagian;
            document.getElementById("modulus").innerHTML = modulus;

        </script>
    </body>
</html>

Dan hasinya di bawah ini.




Referensi : www.malasngoding.com

Selasa, 04 April 2017

Mengenal Variabel Pada Javascript

on April 04, 2017


Mengenal Variabel pada javascript

  Pada javascript terdapat variabel yang kegunaannya sama seperti variabel pada php yaitu untuk penyimpanan data sementara.

Cara Penulisan Variabel Javascript

Yang harus kita perhatikan terlebih dahulu dalam penulisan javascript adalah semua variabel javascript tidak boleh mengandung spasi, harus di perhatikan besar kecil hurufnya.

  • Penulisan nama variabel bisa menggunakan angka,huruf,tanda underscore, dan dollar.
  • Penulisan nama variabel harus diawali dengan huruf.
  • Penulisan nama variabel javascript harus di perhatikan besar kecil hurufnya.
  • nama variabel tidak boleh mengandung spasi.
  • Penulisan variabel Javascript di awali dengan syntax "var"

Cara Membuat Variabel di Javascript
<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Javascript</title>

    </head>
    <body>
        <h1>Mengenal Variabel Pada Javascript</h1>
       

        <div id="nama"></div>   
        <div id="alamat"></div>   
       
        <script>
            var nama = "Amirul Muttaqin";
            var alamat = "Paiton";
            document.getElementById("nama").innerHTML = nama;
            document.getElementById("alamat").innerHTML = alamat;
        </script>
    </body>
</html>

Kita perhatikan pada syntax di atas, saya membuat dua variabel yaitu "nama" dan "alamat", dan jangan lupa pada akhir dari variabel harus ada tanda titik koma (;)
var nama = "Amirul Muttaqin";
  var alamat = "Paiton";
dan kemudian menampilakan isi dari variabel tersebut.
 document.getElementById("nama").innerHTML = nama;
   document.getElementById("alamat").innerHTML = alamat;
hasil dari syntax di atas

 document.getElementById() berguna untuk menentukan element yang ber id sesuai dengan yang ada dalam parameter fungsi ini. innerHTML berguna untuk menerapkan syntax html.

 Referensi : www.malasngoding.com

Senin, 03 April 2017

Mengenal Syntax Javascript

on April 03, 2017


JavaScript Statements
 
JavaScript memiliki beberapa statement atau kondisi yaitu: Value,Operator, Expressions, Keywords, dan Comments.
  • JavaScript Values 
Pada  JavaScript terdapat dua jenis yaitu nilai tetap(misalnya angka) dan nilai variabel.Nilai tetap disebut literal.Nilai variabel disebut variabel .
  • JavaScript Literal 
Yaitu nilai tetap misalkan saja angka,penulisan angka atau nomor pada JavaScript dapat di tulis dengan angka desimal maupun tidak desimal
10.01

1001
Sedangkan untuk string atau teks bisa di tulis dengan singgle atau double quotes
'JavaScript'
"JavaScript"
  •  JavaScript Variabel
JavaScript menggunakan var untuk mendeklarasikan variabel di sini contoh saya menggunakan Variabel x kemudia kita beri nilai pada x = 6

var x;
x = 6;
  • JavaScript Operator
 Untuk operator aritmatika(penjumlahan,pengurangan dl) bisa di tulis seperti berikut
(5 + 6) * 10
Untuk menetapkan nilai-nilai ke dalam variabel bisa menggunakan "="
x = 5;
x = 6;
  • JavaScript Expressions
Ini di gunakan untuk mengekspresika sintax pada JavaScript mudahnya begini : kita ingin menghitung perkalian 5 dan 10 maka penulisannya begini
<script>
document.getElementById("demo").innerHTML = 5 * 10;
</script>
  •  JavaScript Keyword
Sebuah kata kunci yang di gunakan untuk memberitahu tindakan apa yang harus di lakukan misalkan di sini saya gunakan var. Maka var akan memberitahu atau mendeklarasikan variabel.
<script>
var x, y;
x = 5 + 6;
y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>
  • JavaScript Komentar
Terkadang komentar memang di butuhkan misalnya untuk menandai statement atau kondisi mana yang akan di jalankan dan kondisi mana yang tidak di jalankan.Tambahkan simbol"//"untuk memberi komentar.
var x = 5;//kondisi ini di jalankan
// var x = 6; kondisi ini di matikan

Referensi:https://www.w3schools.com/

Sabtu, 01 April 2017

Cara Penulisan dan Penggunaan Javascript

on April 01, 2017


Cara Penulisan Syntax JavaScript

Kita mulai dengan Cara Penulisan Syntax JavaScript yang baik dan benar dan adapun pengetahuan dasar yang harus kita semua ketahui dari JavaScript adalah sebagai berikut :
  • Di simpan dengan instansi .js
  • Styntax Javascript  yang di sisipkan pada HTML kita tulis di tag <script>
  • Syntax Javascript bisa diletakkan di bagian element tag <head> atau tag <body>
  • Javascript Bersifat Case Sensitive
  • Di seiap akhir akhir baris harus di tutup dengan titik koma atau semicolon {;}


Syntax JavaScript bisa digunakan dengan 2 cara yaitu dengan cara di sisipkan pada halaman HTML langsung dan satu lagi dengan cara menyiapkan File JavaScript dengan ekstansi .js dan kemudian menginclude nya pada halaman html agar lebih spesifik.

Menggunakan JavaScript Secara Internal

Penulis JavaScript secara Interal adalah dengan cara menyisipkan langsung Syntax JavaScript di dalam HTML dan jika kita menggunakan cara ini maka Syntax JavaScript nya harus kita letakkan di antara tag <script> pembuka dan juga tag </script> penutup dan meletakkannya bisa di dalam tag <head> dan juga bisa di dalam tag <body> dan buat sebuah File HTML untuk membuat Contoh Penggunaan JavaScript secara Internal. 

 <!DOCTYPE html>
<html>
<head>
    <title>Belajar Javascript </title>

</head>
<body>
    <h1>Cara Penulisan Dan Penggunaan Javascript</h1>
    
    <div id="nama"></div>  
  
    <script>
        document.getElementById("nama").innerHTML = "Nama Saya Amirul Muttaqin";  
    </script>
</body>

</html>

Perhatikan Pada contoh diatas. Terdapat sebuah element div yang kita beri id="nama". Dan kemudian kita sisipkan javascript di sana .

document.getElementById("nama").innerHTML = "Nama Saya Amirul Muttaqin";

Document adalah syntax wajib di javascript, dan fungsi getElementById() berfungsi untuk memerintahkan mendapatkan element yang ber id sesuai dengan dengan yang ada di dalam parameter fungsi getElementById() itu sendiri. pada penulisan syntax javascript harus sangat di perhatikan, karena javascript adalah case sensitive. innerHTML berfungsi untuk menuliskan html. Kesimpulannya dari semua perintah yang telah kita masukkan tadi hanya untuk memanggil kalimat "Nama Saya Amirul Muttaqin"

Di bawah ini adalah hasil dari syntax diatas




 Menggunakan Javascript secara external

 kita akan mencoba menggunakan javascript secara external dengan yaitu dengan cara kita terlebih dahulu harus membuat dua file
  • index.html
  • belajar.js
pada file index.html kita hanya mengisi syntax html saja. Dan pada belajar.js kita menuliska syntax javascript nya dengan cara kita menghubungkan, cara untuk menghubungkan ke dua file tersebut kita perhatikan syntax di bawah ini
 <script type="text/javascript" src="belajar.js"></script>
 index.html
 <!DOCTYPE html>
<html>
<head>
    <title>Belajar Javascript</title>

</head>
<body>
    <h1>Cara Penulisan Dan Penggunaan Javascript</h1>
    
    <div id="nama"></div>  
  
</body>
        <script type="text/javascript" src="belajar.js"></script>
</html>
belajar.js

document.getElementById("nama").innerHTML = "Nama Saya Amirul Muttaqin";

Jika kita jalan kan maka hasilnya akan sama.

Referensi : www.malasngoding.com







Langganan: Postingan ( Atom )