Objek JavaScript

3.1 Objek Untuk memasukkan Data
Terdapat beberapa objek yang dapat digunakan untuk memeasukkan data. Objek-objek tersebut biasanya terdapat dalam suatu form. Adapun objek-objek tersebut meliputi Objek Text, Objek Radio, Objek Checkbox, Objek Textarea, dan Objek Select.

3.2  Objek Text
Untuk menginputkan data kita dapat menggunakan komponen/objek text. Contoh penggunaannya dapat kita lihat pada contoh berikut :

Contoh Program JavaScript
<html>
<head><title>Latihan Dengan Objek Text</title></head>
<body>
<script languange ="JavaScript">
<!--
function tekan()
{
 var namastr = (document.fform.nama.value);
 var alamatstr = (document.fform.alamat.value);
 document.fform.onama.value = namastr;
 document.fform.oalamat.value = alamatstr;
}
//-->
</script>
<form name ="fform">
<H1> Memasukkan Data Dengan Objek Teks</H1><hr>
<PRE>
Nama Anda : <input type="text" size="11" name="nama">
Alamat    : <input type="text" size="25" name="alamat">
</PRE>
<BR>
<input type="button" value="kirim" onclick="tekan()">
<input type="reset" value="ulang">
<H3>Output</H3>
<PRE>
Jadi Nama Anda adalah :<input type="text" size="11" name="onama">
Alamat Anda di        :<input type="text" size="25" name="oalamat">
</form>
</body>
</html>



3.3  Objek Radio
Objek radio adalah komponen yang digunakan untuk melakukan suatu pemilihan data. Karena selalu berupa Array , untuk mengakses satu tombol radio digunakan radio[indeks]. Disamping itu objek radio juga mempunyai nili True jika dipilih dan False jika tidak. Untuk memilih suatu objek radio menggunakan properti Checked.

Contoh Program JavaScript
<html>
<head><title>Latihan Dengan Objek Radio</title></head>
<body>
<script languange ="JavaScript">
<!--
function radio_box(form)
{
 var ket = "";
 if (form.wanita.checked == true)
  {
    ket = "Wanita";
  }
  else
  {
    ket = "Pria";
  }
 alert('Anda adalah seorang ' +ket);
}
//-->
</script>
<form>
<H1> Memasukkan Data Dengan Objek Radio</H1><hr>
<p><input type="radio" value="wanita" name="wanita">Wanita</p>
<hr>
<p><input type="button" value="CONFIRM" onclick="radio_box(this.form)">
<input type="reset" value="RESET"></p>
</form>
</body>
</html





3.4  Objek Checkbox
Objek checkbox menyimpan informasi tentang elemen form yang berupa kotak cek. Penggunaannya hampir sama seperti objek radio.


Contoh Program JavaScript
<html>
<head><title>Latihan Dengan Objek Checkbox</title></head>
<body>
<script languange ="JavaScript">
<!--
function radio_box(form)
{
 var ket = "";
 var ket1 ="";
 if (form.bola.checked == true)
  {
    ket = "Nonton Bola";
  }
 
 if (form.tv.checked == true)
  {
    ket1 = " Nonton Tv";
  }
 alert('Hobby anda ' +ket+''+ket1);
}
//-->
</script>
<form>
<H1> Memasukkan Data Dengan Objek Checkbox</H1><hr>
<p>Hobby anda :
<input type="checkbox" value="ON" name="bola">Nonton Sepak Bola
<input type="checkbox" value="ON" name="tv">Nonton televisi</p>
<hr>
<p><input type="button" value="CONFIRM" onclick="radio_box(this.form)">
<input type="reset" value="RESET"></p>
</form>
</body>
</html>
3.2  Objek Select
Objek Select menyimpan informasi tentang elemen form yang berupa kotak daftar. Objek select berguna apabila di dalam form terdapat banyak pilihan yang telas mempunyai nilai tertentu.
Contoh Program JavaScript
<html>
<head><title>Latihan Dengan Objek Select</title></head>
<body>
<script languange ="JavaScript">
<!--
function tekan()
{
 var jurusanstr = (document.fform.Jurusan.value);
 document.fform.Ojurusan.value = jurusanstr;
}
//-->
</script>
<form name ="fform">
<H1> Penggunaan Objek Select</H1><hr>
<h3>Masukan :<h3>
Jurusan Di UNIKOM :<select name="Jurusan" Size="1">
                 <option value ="Teknik Informatika"> Teknik Informatika </option>
                 <option value ="Manajemen Informatika"> Manajemen Informatika </option>
                 <option value ="Teknik Komputer"> Teknik Komputer </option>
                 <option value ="Teknik Industri"> Teknik Industri </option>
                 <option value ="Teknik Elektro"> Teknik Elektro </option>
                 <option value ="Teknik Sipil"> Teknik Sipil </option>
                 <option value ="Teknik Arsitektur"> Teknik Arsitektur </option>
                 <option value ="Teknik Perencanaan Wil. Kota "> Perencanaan Wil. Kota </option>
               </select>
<p><input type="button" value="kirim" onclick="tekan()">
<input type="reset" value="ulang">
<H3>Output jurusan :</H3>
<input type="text" name="Ojurusan" size="30">
</form>
</body>
</html>



Variabel JavaScript

2.1 Variabel Dalam JavaScript
Variabel adalah empat dimana kita menyimpan nilai-nilai atau informasi-informasi pada JavaScript. Variabel yang dideklarasikan dapat di isi dengan nilai apa saja.
Dalam JavaScript pendeklarasian sebuah variabel sifatnya opsional, artinya anda boleh mendeklarasikan atau tidak hal tersebut tidak menjadi masalah. Jika anda memberi nilai pada variabel, maka dalam JavaScript dianggap bahwa anda telah mendeklarasikan variabel tersebut.
Aturan penamaan variabel :
  • Harus diawalai dengan karakter (huruf atau baris bawah)
  • Tidak boleh menggunakan spasi
  • Huruf Kapital dan kecil memiliki arti yang berbeda
  • Tidak boleh menggunakan kata-kata yang merupakan perintah dalam JavaScript.
Deklarasi Variabel
Var nama_variabel = nilai
Atau
Nama_variabel = nilai

Contoh :
var nama;
var nama = ” Zaskia Mecca”
var X = 1998;
var Y;
Nama = ”Bunga Lestari”
X = 1990;
Y = 08170223513

2.2 Tipe Data
Tidak seperti bahasa pemrograman lainnya, JavaScript tidak memiliki tipe data secara explisit. Hal ini dapat dilihat dari beberapa contoh variabel diatas. Anda mendeklarasikan variabel tapi tidak menentukan tipenya.
Meskipun JavaScript tidak memiliki tipe data secara explisit. JavaScript mempunyai tipe data implisit. Terdapat empat macam tipe data implisit yang dimiliki oleh JavaScript yaitu :
  • Numerik, seperti : 0222532531, 1000, 45, 3.146789 dsb
  • String, seperti : “Hallo”, “April”, “Jl. Setiabudi No 17A”, “Cece Kirani” dsb
  • Boolean, bernilai true atau false
  • Null, variabel yang tidak diinisilisasi

2.3 Tipe Numerik
Pada dasarnya JavaScript hanya mengenal dua macam tipe numerik, yaitu bilangan bulat (integer) dan bilangan pecahan(real/float).
Untuk bilangan bulat, kita dapat merepresentasikan dengan basis desimal, oktal atau heksadesimal.
Contoh :
            var A = 100;
            var B = 0x2F;
untuk pendeklarasian tipe bilangan real, dapat menggunakan tanda titik atau notasi ilmiah (notasi E).
Contoh :
            var a = 3.14533567;
            var b = 1.23456E+3;

2.4 Tipe String
Untuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan string diantara tanda petik tunggal (’) atau tanda petik ganda (”)
Contoh :
            var  str  =’Contoh deklarasi string’;
            var str1 = ”cara ini juga bisa untuk menulis string”;

2.5 Tipe Boolean
Tipe boolean hanya mempunyai nilai True atau False. Tipe ini biasanya digunakan untuk mengecek suatu kondisi atau keadaan.
Contoh :
            var  X  = (Y > 90);
contoh diatas menunjukkan bahwa jika Y lebih besar dari 90 maka X akan bernilai True.

2.6 Tipe Null
Tipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal (inisialisasi).

2.7 Operator
Operator pada JavaScript terbagi menjadi enam, yaitu :
  • Aritmatika
  • Pemberian nilai (Assign)
  • Pemanipulasian bit (bitwise)
  • Pembanding
  • Logika
  • String

a. Operator Aritmatika
Digunakan untuk operan beripe numerik. Ada dua macam operator aritmatik, yaitu operator numerik tunggal dan operator aritmatik biner. Perbedaan kedua operator terletak pada jumlah operan yang harus dioperasikan.

Operator
Tunggal/Biner
Keterangan
+
Biner
Penjumlahan
-
Biner
Pengurangan
*
Biner
Perkalian
/
Biner
Pembagian
%
Biner
Modulus
-
Tunggal
Negasi
++
Tunggal
Penambahan dengan satu
--
Tunggal
Pengurangan dengan satu



b. Operator Pemberian Nilai
Digunakan untuk memberikan nilai ke suatu operan atau mengubah nilai suatu operan.     
Operator
keterangan
Contoh
Ekuivalen
=
Sama dengan
X=Y

+=
Ditambah dengan
X+=Y
X=X+Y
-=
Dikurangi dengan
X-=Y
X=X-Y
*=
Dikali dengan
X*=Y
X=X*Y
/=
Dibagi dengan
X/=Y
X=X/Y
%=
Modulus dengan
X%=Y
X=X%Y
&=
Bit AND dengan
X&Y
X=X&Y
|=
Bit OR
X|=Y
X=X|Y

c. Operator Manipulasi Bit
Operasi ini berhubungan dengan pemanipulasian bit pada operan bertipe bilangan bulat.
Operator
Keterangan
&
Bit AND
|
Bit OR
^
Bit XOR
~
Bit NOT
<< 
Geser ke kiri
>> 
Geser ke Kanan
>>> 
Geser ke kanan dengan diisi nol
Contoh :
var A = 12;      // A = 1100b
var B = 10;      // B = 1010b
var C = A & B
            maka akan dihasilkan bilangan seperti berikut :
            1100b
            1010b AND
            1000b
var A = 12;
var C = A<< 2
var D = A >> 1

maka variabel C akan bernilai 48(0011 0000b)
variabel D akan bernilai 6 (0110b)

d. Operator Pembanding
Digunakan untuk membandingkan dua buah operan. Operan yang dikenal operator ini dapat bertipe string, numerik, maupun ekspresi lain.
Operator
Keterangan
==
Sama dengan
!=
Tidak sama dengan
> 
Lebih besar
< 
Lebih kecil
>=
Lebih besar atau sama dengan
<=
Lebih kecil atau sama dengan
 
e. Operator Logika
Digunakan untuk mengoperasikan operan yang bertipe boolean.
Operator
Keterangan
&&
Operator logika AND
||
Operator Logika OR
!
Operator logika NOT

Contoh :
var A =  true;
var B = false;
var C = A && B; //menghasilkan false
var D = A || B ; // false
var E = !A; //false

f. Operator String
Selain operator pembanding, operator string pada JavaScript juga mengenal satu operator lagi yang bernama PENGGABUNGAN. Operator ini digunakan untuk menggabungkan beberapa string menjadi sebuah string yang lebih panjang.
Contoh :
nama = ”Java” + ”Script”;
            akan menghasilkan ”JavaScript” pada variabel nama


Contoh Program JavaScript

  1. <HTML>
  2. <BODY>
  3. <SCRIPT language="JavaScript">
  4. document.write("Belajar Pemrograman Javascript!");
  5. document.writeln("<br> <center><h1>Heading 1 dalam javascript</h1>");
  6. document.writeln("</center>");
  7. function sms(){
  8. var psn=document.frm_sms.pesan.value;
  9. alert(psn);
  10. }
  11. function hitung_kali(){
  12. var bil1=document.frm_hitung.bilangan1.value;
  13. var bil2=document.frm_hitung.bilangan2.value;
  14. var hasil=bil1*bil2;
  15. alert(hasil);
  16. }
  17. function hitung_tambah(){
  18. var bil1=parseFloat(document.frm_hitung.bilangan1.value);
  19. var bil2=parseFloat(document.frm_hitung.bilangan2.value);
  20. var hasil=bil1+bil2;
  21. alert(hasil);
  22. }
  23. <!--a-->
  24. </SCRIPT>
  25. <br>
  26. <B>INI Di TULIS LANGSUNG DARI HTML</B>
  27. <form name="frm_sms" id="frm_sms" method="post" action="">
  28. Pesan <input type="text" name="pesan" id="pesan" />
  29. <input type="submit" name="simpan" onClick="sms()" value="Kirim" />
  30. </form>
  31. <hr>
  32. <form name="frm_hitung" id="frm_hitung" method="post" action="">
  33. Bilangan 1 <input type="text" name="bilangan1" id="bilangan1" />
  34. Bilangan 2 <input type="text" name="bilangan2" id="bilangan2" />
  35. <input type="button" name="simpan" onClick="hitung_kali()" value="*" />
  36. <input type="button" name="simpan" onClick="hitung_tambah()" value="+" />
  37. </form>
  38. </BODY>
  39. </HTML>
Berikut tampilan code program di atas

Merubah Template Blogger Standar

Berbagai macam alasan bisa dijadikan kuat mengganti tampilan desain/template dari blog kesayangan kita ini, contohnya saya sendiri, karena sudah terlalu bosan dengan tampilan standar dan menginginkan tampilan blog yang lebih enak di pandang mata.

PERINGATAN...!!! Baca dulu sebelum mengganti TEMPLATE
Langkah Pertama adalah login ke akun blogspot kita
https://www.blogger.com/home
Setelah Login di akun blogger langkah berikutnya
Agar proses pergantian template berjalan lancar sebaiknya Backup/ download dulu template dasar. Atau dengan cara membuat blog lain sebelum menggantikan template blog utama. Secara default semua link image di template ini tersimpan di photobucket, tapi untuk berjaga-jaga sebaiknya pindahkan image-image tersebut ke akun photobukcet sendiri atau tempat hosting anda (jika ada) untuk menyimpan image template ini (image template diikutkan file kompresi ini). Segala Resiko akibat pergantian template diluar tanggung jawab saya. Karena itu sebaiknya baca baik-baik petunjuk berikut untuk meminimalisir resiko..

Tampilan setelah Login blogger adalah memilih blog yang kita punya (sebagai contoh multimediatb)

Berikut tampilan dashboard utama jika sudah memilih blog yang akan kita manage, selanjutnya tinggal pilih menu template untuk memdodifikasi template
sebelum di modif sebaiknya backup dulu (Click dulu di inputan, Ctrl+A , klik kanan salin kemudian tinggal copy paste dan di simpan di pc kita menggunakan aplikasi teks editor (notepad, notepad++, dreamweaver dsb)

Sumber Template blogger Googling aja 
sebagai contoh saya dapate di sini (free dan keren desainnya) : http://btemplates.com/
extract file hasil download dan buka yang berekstensi xml
Copy code yang ada kemudian paste di template editor

Paste di template editor di blogger kemudian simpan
berikut hasil dari edit template blogger
Selesai

Pengantar Javascript

1.1 Pengantar
Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa  ini dinamakan “LiveScript” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2. Pada masa itu bahasa ini banyak di kritik karena kurang aman, pengembangannya yang terkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java” ) pada masa itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser Internet Explorer 3. 

Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan  mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web.

Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut). Lain halnya dengan bahasa “Java” (dengan mana JavaScript selalu di banding bandingkan) yang memerlukan kompilator khusus untuk menterjemahkannya di sisi user/klien.   

1.2 Keperluan Java Script
Untuk mempelajari pemrograman Java Script, ada dua piranti yang diperlukan, yaitu :
  • Teks Editor
Digunakan untuk menuliskan kode-kode Java Script, teks editor yang dapat digunakan antara lain notepad dan ultra edit.
  • Web Browser
Digunakan untuk menampilkan halaman web yang mengandung kode-kode Java Script. Web browser yang digunakan harus mendukung Java Srcipt. Browser yang dapat digunakan adalah internet explorer dan Netscape Navigator.

1.3 Penulisan Java Script
Kode Java Script dituliskan pada file HTML.Terdapat dua cara untuk menuliskan kode-kode Java Script agar dapat ditampilkan pada halaman HTML, yaitu :

a)      Java script ditulis pada file yang sama
Untuk penulisan dengan cara ini, perintah yang digunakan adalah
<SCRIPT LANGUANGE =”JavaScript” >program java script disini</SCRIPT>. Perintah tersebut biasanya diletakkan diantara Tag <BODY>…</BODY>
Contoh Penulisan :

<HTML>
<HEAD><TITLE>……….</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”Javascript”>
       kode javascript disini
</SCRIPT>
       kode HTML disini
</BODY>
</HTML>

b)     Javascript ditulis pada file terpisah
Kode Javascript bisa juga kita buat dalam file terpisah dengan tujuan agar dokumen HTML isinya tidak terlalu panjang. Atribut yang digunakan adalah

<SCRIPT SRC=”namafile.js”>…</SCRIPT>

Diantara tag <SCRIPT………> dan <SCRIPT> tidak diperlukan lagi kode Javascriptnya karena sudah dibuat dalam file erpisah. File yang mengandung kode Javascript berekstensi .js

1.4 Program Pertama Javascript
Pada bagian ini kita akan membuat program dengan menggunakan Javascript.
Program ini akan menampilkan teks “ Belajar Pemrograman Javascript”

<HTML>
<BODY>
<SCRIPT language="JavaScript">
<!--
document.write("Belajar Pemrograman Javascript!");
//-->
</SCRIPT>
</BODY>

</HTML>