Tampilkan postingan dengan label JavaScript. Tampilkan semua postingan
Tampilkan postingan dengan label JavaScript. Tampilkan semua postingan

Rabu, 19 April 2017

Membuat Form Postingan Dengan Ckeditor

Assalamualaikum Wr.Wb


Banyak sekali manfaat Ckeditor selain membuat tampilan website yang kita buat menjadi lebih menarik Ckeditor juga bisa memudahkan kita jika ingin membuat tulisan miring, tebal,garis bawah dan sebagainya bisa menggunakan ckeditor ini.Ckeditor adalah semacam library yang di bangun meggunakan JavaScript untuk memudahkan kita dalam membuat form posting/text editor pada form.Lalu bagaiman cara kita menggunakannya? mari kita bahas.

  • Download dulu ckeditor klik link ini pada kesempatan ini saya menggunakan ckeditor yang versi full,teman - teman bisa mendownload sesuai keinginan.
  • Kita buat halaman di mana kita akan menampilkan ckeditornya,di sini saya menggunakan HTML
<!DOCTYPE html>
<html>
<head>
    <title>Membuat Form Posting Dengan CKEditor</title>   
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
   
</head>
<body>

       <div class="kotak">
        <h2>Di Bawah ini contoh hasil form input dengan ckeditor</h2>
        <h2>Saya menggunakan ckeditor yang versi ful</h2>
        <textarea class="ckeditor" id="ckedtor"></textarea>
        <br/>
        <button class="tombol">Simpan</button>
    </div>

</body>
</html>
Kita buat script untuk menghubungkan ckeditor
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
Lalu untuk menampilkannya kita tinggal memanggilnya saja,gunakan text area agar tampilan lebih terlihat pas.
<textarea class="ckeditor" id="ckedtor"></textarea>
Dan inilah hasilnya







Referensi:


Wassalamualaikum Wr.Wb

Senin, 17 April 2017

Membuat Input Hanya Angka Dengan JavaScript


Assalamualaikum Wr.Wb


Pada postingan kali ini saya akan mencoba membuat input tetapi hanya khusus angka dan juga nanti kita coba untuk membatasi jumlah karakter yang akan di inputkan.Terkadang dalam sebuah website di perlukan sebuah inputan tetapi misalnya inputan tersebut hanya angka yang di perlukan,untuk mencegah supaya user tidak salah memasukkan data misal.Tapi di sini saya akan mencoba membuatnya dengan sederhana saja.

Disini saya akan menerapkannya pada HTML supaya lebih mudah untuk di praktekkan
<!DOCTYPE html>
<html>
<head>
<title>Membuat Inputan Angka</title>
</head>
<body>
<h1>Membuat Inputan Hanya Angka Dengan JavaScript</h1>
<h2>Tuliskan Angka Pada Form Di Bawah</h2>

<input type="text" onkeypress="return angka(event)"/>

<script>
function angka(evt){
var char = (evt.which) ? evt.which : event.keyCode
if (char > 31 &&(char < 48 || char > 57)) 
return false;
return true;
}
</script>

</body>
</html>
 Sekarang mari coba sedikit kita bahas contoh input angka di atas

  • Buat dulu form biasa seperti pada HTML tetapi kita beri event onekeypress="" untuk membuat aksi saat form ini di beri input.
<input type="text" onkeypress="return angka(event)"/>

  • Setelah itu kita buat pengecekan bahwa yang di inputkan adalah angka.

function angka(evt){

var char = (evt.which) ? evt.which : event.keyCode
if (char > 31 &&(char < 48 || char > 57)) 
return false;
return true;
}
 Sekarang mari kita coba jalankan



Seperti gambar di atas kita hanya bisa menginputkan angka,untuk lebih jelasnya bisa di coba sendiri.Lalu selanjutnya kita coba untuk membatasi jumlah karakter yang di inputkan.

Tinggal kita rubah pada script inputnya,di sini saya membatasinya menjadi 3 karakter saja
 <input type="text" maxlength="3" onkeypress="return angka(event)"/>
Maka hasilnya akan seperti gambar di bawah


Mungkin cukup sekian postingan kali ini semoga bermanfaat bagi teman - teman semua..!

Referensi:http://www.malasngoding.com/membuat-inputan-hanya-angka-dengan-javascript/

Wassalamualaikum Wr.Wb

Rabu, 12 April 2017

Menampilkan Tanggal Dengan JavaScript

Assalamualaikum Wr.Wb






Pada postingan kali ini saya akan berbagi sedikit tutorial tentang bagaimana cara menampilkan tanggal dengan JavaScript.Ada Sebuah fungsi yang khusus di sediakan di javascript untuk menampilkan tanggal .yaitu kita bisa menggunakan fungsi Date().Perlu di ingat javascript memiliki sifat case sensitive , yang artinya penulisan javscript  sangat berpengaruh sekali tentang besar kecil hurufnya. jadi untuk membuat tanggal,teman - teman harus menuliskan fungsi date nya dengan benar.

Baiklah lanjut ke topik utama,salah satu contoh cara menampilkan tanggal dengan JavaScript adalah sebagai berikut

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Javascript Part 8 : Menampilkan Tanggal Dengan Javascript</title>
</head>
<body>
    <h1>Menampilkan Tanggal Dengan Javascript</h1>
    <h2>Tanggal Akan Tampil Di Bawah Ini</h2>

  
    <div id="hasil"></div> <!-- Tanggal Tampil Di Sini -->

    <script>
        var tanggal = new Date();

        document.getElementById("hasil").innerHTML = tanggal;
    </script>
</body>
</html>
Pada contoh di atas  saya memasukan fungsi date ke dalam variable tanggal dan kemudian menampilkannya
var tanggal = new Date();

document.getElementById("hasil").innerHTML = tanggal;
Dan inilah hasilnya


Ya mungkin sekian dulu postingan kali ini semoga bermanfaat..!

Referensi: http://www.malasngoding.com/belajar-javascript-menampilkan-tanggal-dengan-javascript/

Wassalamulaikum Wr.Wb

Selasa, 11 April 2017

Mengenal Event Pada JavaScript

Assalamualaikum Wr.Wb


Event pada Javascript adalah sesuatu yang terjadi pada element . contoh kita memiliki sebuah tombol di halaman website atau aplikasi yang kita bangun dan kita ingin memberikan suatu aksi jika tombol tersebut di klik , jadi yang menjadi event di sini adalah "klik ". misalnya jika tombol di klik maka akan di tampilkan pesan yang menampilkan sebuah kalimat.Adapun beberapa event yang terdapat pada javascript  adalah sebagai berikut:

  •  onclick = adalah Event jika sebuah element html di klik.
  •  onchange = adalah Event jika sebuah element html berubah.
  •  onmouseover =  adalah event jika sebuah element html di letakkan cursor mouse.
  •  onemouseout = adalah event jika saat cursor mouse meninggalkan element html.
  •  onkeydown = adalah event jika saat di terjadi pengetikan pada element html.
  •  onload = adalah event ketika jika saat element atau halaman di buka.
Sekarang mari kita untuk coba untuk membuat salah satu Event yang ada di atas
<button onclick="di sini berikan aksi yang ingin di lakukan">TOMBOL</button>
untuk membuat Event kita tinggal menuliskan Event apa yang kita pilih,sekarang kita terapkan pada HTML,di sini saya akan menggunakan button.
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Event</title>
</head>
<body>
    <h1>Mengenal Event Pada Javascript</h1>
    <h2>Klik Tombol Di Bawah</h2>

    <!-- memberikan event pada element tombol -->
    <button onclick="tampilkan_nama_blog()">KLIK SAYA</button>

    
    <div id="hasil"></div><!-- output akan muncul di sini -->

    <script>       
        // membuat function tampilkan_nama
        function tampilkan_nama_blog(){
            document.getElementById("hasil").innerHTML = "<h3>Nama Blog Saya Adalah Setiyono's Blog</h3>";
        }
       
    </script>
</body>
</html> 

Jika kita perhatikan button di atas terdapat sebuah Event yaitu Event OnClick
 <button onclick="tampilkan_nama_blog()">KLIK SAYA</button>
Lalu setelah button di klik maka Event akan Di jalankan  tepatnya pada function tampilkan_nama_blog().
 <script>       
        // membuat function tampilkan_nama
        function tampilkan_nama_blog(){
            document.getElementById("hasil").innerHTML = "<h3>Nama Blog Saya Adalah Setiyono's Blog</h3>";
        }
       
    </script>

Kemudian output akan di tampilkan pada
<div id="hasil"></div><!-- output akan muncul di sini -->
Hasil sebelum button di klik


Hasil setelah button di klik



Ya itu tadi sedikit pembahasan Event pada JavaScript semoga bermanfaat untuk teman - teman semua

Referensi:http://www.malasngoding.com/belajar-javascript-part-7-mengenal-event-pada-javascript/

Wassalamualaikum Wr.Wb


Sabtu, 08 April 2017

Mengenal Tipe Data Pada JavaScript

Assalamualaikum Wr.Wb


Pada postingan kali ini saya akan melanjutkan pembahasan JavaScript,dan sekarang mari kita lanjutkan ke tipe data pada JavaScript

  • Tipe Data Number 
Sperti namanya tipe data number yaitu tipe data yang berupa integer atau bilangan bulat misal: 1,2,3,4,5..dan seterusnya
<!DOCTYPE html>
<html>
<head>
<title>Tipe Data Pada JavaScript</title>
</head>
<body>
    <h2>Tipe Data Number</h2>   
    <div id="hasil"></div><!--output akan tampil di sini-->
    <script>
        // tipe data Number
        var angka = 80;
        // menampilkan tipe data number pada element id hasil
        document.getElementById("hasil").innerHTML = angka;
    </script>
</body>
</html>
 Penulisan tipe data number tidak perlu menggunakan tanda petik seperti string
var angka = 80;





  •  Tipe Data String
Tipe data string ini biasanya berupa huruf atau kalimat
<!DOCTYPE html>
<html>
<head>
<title>Tipe Data Pada JavaScript</title>
</head>
<body>
    <h2>Tipe Data String</h2>   
    <div id="hasil"></div><!--output akan tampil di sini-->
    <script>
         // tipe data string
        var kalimat = "Ini Contoh tipe data string";

        // menampilkan tipe data string pada element id hasil
        document.getElementById("hasil").innerHTML = kalimat;
    </script>
</body>
</html>
Dari script di atas dapat di simpulkan bahwa untuk menuliskan tipe data string menggunakan tanda petik
var kalimat = "Ini Contoh tipe data string";


  • Tipe Data Array
Pengertian Array adalah sekumpulan variabel yang memiliki tipe data yang sama dan dinyatakan dengan nama yang sama.
<!DOCTYPE html>
<html>
<head>
<title>Tipe Data Pada JavaScript</title>
</head>
<body>
    <h2>Tipe Data Array</h2>   
    <div id="hasil"></div><!--output akan tampil di sini-->
    <script>
        // tipe data Array
        var kendaraan = ["Motor", "Mobil", "Pesawat"];

        // menampilkan tipe data Array pada element id hasil
        document.getElementById("hasil").innerHTML = kendaraan[1];
    </script>
</body>
</html>
di dalam variabel array Kendaraan ini terdapat data Motor, Mobil dan Pesawat . berarti angka penyebut untuk Motor adalah 0.  Mobil 1 dan Pesawat 2 . angka nya di mulai dari 0 . dan untuk mengakses/menampilkan salahsatu angka nya adalah sebagai berikut .
kendaraan[1];
Jika kita ketik angka 0 atau 2 maka hasilnya akan berbeda lagi



  •  Tipe Data Object
Tipe data object berisi data yang banyak di dalam sebuah variabel memiliki nama dan value nya masing-masing .
<!DOCTYPE html>
<html>
<head>
<title>Tipe Data Pada JavaScript</title>
</head>
<body>
    <h2>Tipe Data Array</h2>   
    <div id="hasil"></div><!--output akan tampil di sini-->
    <script>
    // tipe data object      
        var identitas = {
            nama : "setiyono",
            alamat  : "Trenggalek",
            umur       : 17,
            pekerjaan  : "Pelajar"
        };

        // menampilkan tipe data object pada element id hasil
        document.getElementById("hasil").innerHTML = identitas.nama + " tinggal di " + identitas.alamat + " .dia sekarang berumur"+ identitas.umur +" dan bekerja sebagai " + identitas.pekerjaan;
    </script>
</body>
</html>
untuk mengakses datanya pertama tulisan nama variabel dan kemudian di ikuti dengan nama data 


Mungkin sekian dulu postingan kali ini semoga bermanfaat...!

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

Wassalamualaikum Wr.Wb

Kamis, 06 April 2017

Penulisan Struktur Logika IF Dan ELSE Dalam JavaScript

Assalamualaikum Wr.Wb


Pada postingan kali ini saya akan membahas sedikit penulisan If dan Else pada JavaScript.Perulangan If  pada JavaScript juga tidak jauh berbeda dengan bahasa pemrograman lainnya.Struktur IF adalah stuktur kode pemograman ‘conditional’ yang akan membuat percabangan di dalam program. Dengan menggunakan struktur IF, kita bisa membuat 2 percabangan program yang akan dieksekusi jika ‘kondisi’ terpenuhi, dan akan menjalankan kode program lain jika ‘kondisi’ tidak terpenuhi.

Berikut dasar penulisan If
if (kondisi) {
   //kode program jika kondisi true
}
else {
   //kode program jika kondisi false
}

Sekarang kita lanjut ke cara penulisan If

<script>
var nama="Blog";     //buat variabel String nama dan isi dengan ”Blog”
if (nama=="Blog")   // cek apakah variabel nama berisi ”Blog”
console.log("Berhasil!");
</script>
Kode di atas tidak akan berjalan jika variabel nama tidak berisi string "Blog".

Jika baris yang akan dijalankan terdiri dari 2 baris atau lebih, maka kita harus menggunakan tanda kurung kurawal (tanda { dan })pada awal dan akhir blok kondisi IF.
 <script>
var nama="Blog";
if (nama=="Blog")
{
   console.log("Berhasil!");
   console.log("Belajar");
   console.log("JavaScript");
}
</script>

Penulisan  ELSE

Struktur IF memiliki percabangan lain yang akan dijalankan jika kondisi IF tidak terpenuhi, yakni dengan menambahkan perintah ELSE.
<script>
//buat variabel Number angka dan isi dengan nilai 17
var angka=17;

// jika sisa hasil bagi (mod) variabel angka dengan 2 adalah 0,
// maka jalankan perintah console.log()
if (angka%2==0)
   console.log("Angka adalah bilangan genap");
else
   console.log("Angka adalah bilangan ganjil");
</script>
Kondisi angka%2==0 hanya akan bernilai TRUE jika nilai dari variabel angka bisa habis dibagi 2, yang menandakan angka adalah bilangan genap, selain itu dapat dipastikan bahwa angka adalah bilangan ganjil.
Sama seperti struktur IF, jika bagian ELSE memiliki baris lebih dari 1, maka kita harus menambahkan tanda kurung kurawal untuk menandai blok tersebut.
<script>
var angka=12;

if (angka%2==0)
{
   console.log("Angka = "+angka);
   console.log("Angka adalah bilangan genap");
}
else
{
   console.log("Angka = "+angka);
   console.log("Angka adalah bilangan ganjil");
}
</script>

Mungkin sekian dulu postingan kali ini semoga bermanfaat sekian terima kasih

Wassalamualaikum Wr.Wb

Rabu, 05 April 2017

Mengenal Syntax JavaScript

Assalamualaikum Wr.Wb


Pada kesempatan kali ini saya akan membahas sedikit tentang JavaScript Syntax,sebelumnya sudah saya singgung soal pengertian javascript silahkan baca di sini dan untuk cara mengoutputkan javascript silahkan baca di sini,baiklah mari kita mulai.

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
ya mugkin cukup sekian dulu postingan kali ini semoga bisa bermanfaat terima kasih sudah bekunjung.

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

Wassalamualaikum Wr.Wb

Selasa, 04 April 2017

Mengenal Output JavaScript

Assalamualaikum Wr.Wb






Pada kesempatan kali ini saya akan membahas tentang javascrip output yaitu beberapa metode output pada javascript,baiklah mari kita bahas satu persatu.

  • InnerHTML
Untuk mengoutputkan javascript dengan metode ini dapat menggunakan document.getElementById (id)
 <!DOCTYPE html>
<html>
<head>
    <title>JavaScript</title>
</head>
<body>
<h1>JavaScrip Dengan innerHTML</h1>
<p>Hasil Penjumlahan 6 + 7 adalah</p>
<p id="demo"></p>
<script>
    document.getElementById('demo').innerHTML = 6 +7;
</script>
</body>
</html>
Maka hasilnya seperti gambar di bawah ini


  • Document Write
Metode output ini sebenarnya sama dengan yang di atas tadi hanya saja lebih simpel
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript</title>
</head>
<body>
<h1>JavaScrip Dengan innerHTML</h1>
<p>Hasil Penjumlahan 6 + 7 adalah</p>
<p id="demo"></p>
<script>
    document.write(6 + 7);
</script>
</body>
</html>
 Hasilnya juga sama dengan yang di atas hanya penulisannya lebih simpel


  • Window Alert
Dengan metode window alert maka hasil output akan muncul seperti peringatan
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript</title>
</head>
<body>
<h1>JavaScrip Dengan Window Alert</h1>
<p>Hasil Penjumlahan 6 + 7 adalah</p>
<p id="demo"></p>
<script>
    window.alert(6 + 7);
</script>
</body>
</html>
Berikut hasilnya


  • Console Log
Metode ini agak repot menurut saya karena kita harus masuk mode Debugger pada browser yaitu dengan menekan tombol F12 lalu baru hasilnya akan muncul di mode debugger tersebut.
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript</title>
</head>
<body>
<script>
    console.log(6 + 7);
</script>
</body>
</html>
Hasilnya seperti berikut






Ya mungkin cukup sekian postingan kali ini semoga bermanfaat terima kasih sudah berkunjung.

Wassalamualaikum Wr.Wb


Senin, 03 April 2017

Mengenal Function Di JavaScript

Assalamualaikum Wr.Wb



Pada postingan kali ini saya akan membahas function pada JavaScript,sebenarnya tidak hanya JavaScript yang memiliki function tetapi bisa di katakan semua bahasa pemrograman memiliki function.Function adalah fasilitas di setiap pemrograman untuk membuat suatu perintah yang fugsinya dapat kita gunakan berulang kali tanpa batas.

Dibawah ini merupakan contoh cara penulisan syntax JavaScript
 <script>
    //membuat function di javascript
    function nama_function(){
      //isi function nya di sini 
    }
    </script>

Untuk cara penulisannya di awali dengan syntax function dan isi atau perintah dari function berada di dalam kurung kurawal {}.

Sekarang mari kita coba untuk menuliskan function JavaScript
<!DOCTYPE html>
<html>
<head>
    <title>Mengenal Function JavaScript</title>
</head>
<body>
      
    <div id="hasil"></div><!--output akan tampil di sini-->

    <script>       
        // membuat function tampilkan_nama
        function tampilkan_nama_blog(){
            return "Setiyono's Blog - Mengenal function pada JavaScript";
        }
       
        document.getElementById("hasil").innerHTML = tampilkan_nama_blog();
       
    </script>
</body>
</html>
kita membuat function dengan nama tampilan_nama_blog() . yang isinya perintah untuk mengembalikan string "Setiyono's Blog - Mengenal function pada JavaScript ".


Mungkin cukup sekian dulu postingan kali ini semoga bermanfaat untuk teman - teman semua.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb

Sabtu, 01 April 2017

Mengenal Javascript

Assalamualaikum Wr.Wb


Untuk membuat website yang dinamis tidak cukup hanya membutuhkan html dan css saja,tapi juga membutuhkan berbagai macam bahasa pemrograman web yang lain contohnya seperti javascrip ini.
  • Maksud Dan Tujuan
Dengan adanya pengenalan javascript pada postingan kali ini di harapkan kita semua dapat paham dan mengerti tentang javascript paling tidak pengertian dan fungsi javascript pada pemrograman web.
  • Pembahasan 
  • Pengertian
JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis.JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
  • Sejarah
JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape di bawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript.Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer yang non-Java.Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut.Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java dengan JavaScript.
  • Penulisan Javascript
  • Script pada head
     <html>
    <head>
    <script type="text/javascript">
    ...
    </script>
    </head>
    </html>  
  •  Script pada body
<html>
<head>
</head>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>
  • Script eksternal
<html>
<head>
</head>
<body>
<script src="namafile.js">
</script>
</body>
</html>
<--!script eksternal berarti javacript nya tidak berarada atau tidak satu file dengan html kita-->
  • Kegunaan Javascript
Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan (embedded).Sebagai contoh penggunaan javascript seperti pop up,validasi,melakukan pencarian tanpa harus me refres halaman web dll.
  • Kesimpulan
Dengan berbagai fungsi javascript yang bisa memaksimalkan website yang kita buat agar menjadi lebih dinamis dengan pemrograman maka sangat penting untuk mengerti tentang bahasa pemrograman yang satu ini.
Sekian postingan kali ini semoga bermanfaat.
  • Referensi
 https://id.wikipedia.org/

Wassalamualaikum Wr.Wb