Tips n' Trik: JavaScript

Showing posts with label JavaScript. Show all posts

Monday, December 19, 2016

HTML JavaScript

Oprator dan Struktur Kendali JavaScript

abdul mufit Monday, December 19, 2016 Comment

Operator

Operator di JavaScript sama dengan di C++ dan Java.

Operator aritmatik : +, -, *, /, %, ++, --, ...
Operator konparasi : ==, !=, <, >, <=, >=
Operator logika : &&, ||, !
Struktur kendali ; if, if-else, switch.-case, while, do...

Percabangan

Dalam mengendalikan jalannya program, biasanya diinginkan aksi yang berbeda pada kondisi tertentu. Hal tersebut memerlukan perintah percabangan. Perintah percabangan biasanya menggunkan if...else dan switch...case. Keduanya memiliki fungsi yang berbeda.

Perintah if

Perintah if...else digunaakan untuk mengeksekusi kode ketika kondisi true dan kondisi lain tidak true. Untuk alternetif yang banyak, dapat digunkan perintah if...else if...else.

JavaScript : js.html

<html>
<head>
<title>Ucapan Selemat</title>
</head>
<body>
<script type="text/javascript">
   var d = new Date()
   var time = d.getHours()
   if (time<10)
   {
        document.write("<b>Selamat Pagi</b>")
   }
   else if (time>10 && time<16)
   {
        document.write("<b>Selamat Siang</b>")
   }
   else
   {
        document.write("<b>Hay Dunia</b>")
   }
</script>
</body>
</html>

Perintah switch...case

Perintah switch...case digunakan untuk beberapa aksi berbeda berdasarkan kondisi yang berbeda. Perintah ini biasanya digunakan untuk menghindari perintah if...else if...else yang terlalu panjang. Contoh program berikut merupakan skrip yang menggunakan struktur kendali switch...case.

HTML : js.html

<html>
<head>
<title>Switch Case</title>
</head>
<body>
<script type="text/javascript">
     var d = new Date()
     theDay = d.getDay()
     strDay = "Hari ini "
     switch (theDay)
     {
       case 0:
                  document.write(strDay + "Minggu")
                  break
       case 1 :
                  document.write(strDay + "Senin")
                  break
       case 2 :
                  document.write(strDay + "Selasa")
                  break
       case 3 :
                  document.write(strDay + "Rabu")
                  break

       case 4 :
                  document.write(strDay + "Kamis")
                  break

   case 5 :
                  document.write(strDay + "Jumat")
                  break

   case 6 :                  document.write(strDay + "Sabtu")
                  break

}

</script>

</body>

</html>

Perulangan

Perulangan digunakan untuk mengulang sekumpulan (blok)perintah sampai kondisi tertentu terpenuhi.

HTML : perulangan.html

<html>
<head>
<title>Perulangan For</title>
</head>
<body>
<script type="text/javascript">
     var i=0
     for (i=0;i<10;i++)
     {
         if (i==3){break}
         document.write("Perulangan For " + i)
         document.write("<br/>")
     }
     document.write("<p></p>")

     var i=0
     while (i<=5)
     {
         document.write("Perulangan While " +i)
         document.write("<br/>")
     }
</script>
</body>
</html>

Saturday, December 10, 2016

JavaScript

Tipe Data JavaScript dan Variabel

abdul mufit Saturday, December 10, 2016 Comment

Variabel digunakan untuk menyimpan data atau informasi. sebuah nilai variabel dapat diubah. Ketentuan nama variabel dalam JavaScript adalah :

Terdiri atas rangakaian huruf, angka, dan underscore.
Harus diawali dengan huruf.
case-sensitif (membedakan huruf kecil dan huruf besar).
Tidak harus deklarasi variabel dan tercipta sendri ketika pertama kali digunakan.
Berbentuk varian (tidak terikat pada satu tipe data, tetapi dapat diisi oleh tipe data yang berbeda dengan awalnya ketika pertamakali digunakan).

Mendeklarasikan Variabel

Deklarasi variabel diawali dengan var.

var strname = nilai;

Variabel juga dapat dibuat tanpa harus harus menggunakan var.

strname = nilai;

Memberi Nilai Sebuah Variabel

JavaScript hanya mempunyai tiga tipe data primitif.

Strings = "foo" 'howdy do' "I said 'hi'." ""
numbers = 12 3.14159 1.56
booleans = true false

Penugasan sama dengan di C++/Java, yaitu menggunakan tanda samadengan (=).

var strname = "admin";
//atau
strname = "admin";

Skrip diatas berarti memeberikan nilai "admin" pada variabel "strname".

pesan = "howdy";
pi = 3.14159;

Skrip diatas berarti memberikan nilai variabel "pesan" dengan "howdy" dan variabel "pi" dengan "3.14159".

Lifetime Variabel

Jika variabel dideklarasikan didalam function maka variabel tersebut hanya dapat diakses pada function itu. Variabel tersebut disebut variabel lokal.

Jika variabel dideklarasikan diluar sebuah function maka setiap function di dalam halaman tersebut dapat menggunakan dan mengakses variabel tersebut.

Contoh pemanfaatan variabel dapat dilihat pada skrip berikut :

HTML : js.html

<html>
<head>
<title>Tipe Data dan Variabel</title>
</head>
<body>
    <script type="text/javascript">
       x = 1024;
       document.write("<p>x = " + x + "</p>");
       x = "foobar";
       document.write("<p>x = " + x + "</p>";
    </script>
</body>
</html>

Friday, December 9, 2016

JavaScript

Pengenalan JavaScript

abdul mufit Friday, December 09, 2016 Comment

JavaScript adalah bahasa scripting yang popular di internet dan dapat bekerja di semua browser untuk sekarang ini. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.

Beberapa hal tentang JavaScript :

JavaScript didesain untuk menambahkan interaktif suatu web.
JavaScript merupakan sebuah bahasa scripting.
Bahasa scripting merupakan bahasa pemograman yang ringan.
JavaScript berisi kode yang dijalankan di komputer (web browser).
JavaScript biasanya disisipkan (embedded) dalam halaman HTML.
JavaScript adalah bahasa interpreter (yang berarti skrip dieksekusi tanpa proses kompilasi).
Setiap orang dapatmenggunakan JavaScript tanpa membayar lisensi.

Contoh skrip JavaScript dapat dilihat pada contoh berikut (simpan file ini dengan js01.html) :

<html>
<head>
</title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("Hay Dunia!");
document.write("<p>Apa Kabar<br/>"+"<i>anda</i>?</p>");
</script>
<p>Demo output untuk menampilkan teks.</p>
</body>
</html>

Keterangan : document.write : untuk menampilkan teks di halaman HTML.

Teks yang ditampilkan dapat dimasukan kedalam tag HTML. Tag akan dieksekusi oleh browser ketika teks ditampilkan. Hal mendasar yang perlu diperhatikan dalam JavaScript adalah :

Seperti pada C/C++/Java, perintah dalam Java diakhiri dengan ";" (titik koma).
Komentar menggunakan : // (untuk satu baris perintah dan /*...*/ (untuk kelompok program/banyak baris).

Penulisan JavaScript

Ada beberapa cara untuk menuliskan JavaScript, yaitu dibagian <head>, <body> atau external. JavaScript dalam sebuah halaman web akan dieksekusi saat halaman di load oleh browser. Namun, hal ini kadang tidak sesuai dengan keinginan karena suatu saat akan mengeksekusi skrip saat halaman dimuat, tetapi kadang JavaScript dijalankan melalui triggersebuah event.

Skrip Pada Bagian Head

Skrip ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu. Peletakan skrip dihead akan menjamin skrip di-load dahulu sebelum digunakan

Contoh penempatan JavaScript pada bagian <head> :

<html>
<head>
<script type="text/javascript">
     function message()
     {
        alert("Alert ini dipanggil saat event onload");
     }
</script>
</head>
<body>
</body>
</html>

Skrip Pada Body

Skrip akan diletakan ketika halaman diload sampai dibagian <body>. Ketika menempatkan skrip pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian.

<html>
<head>
</head>
<body>

   <script type="text/javascript">
    ...
   </script>
</body>

Jumlah JavaScript di <head> dan <body> yang ditempatkan pada dokumen kita tak terbatas.

Contoh (simpan dengan js03.html) :

<html>
<head>
</head>
<body>
   <script type="text/javascript">
      document.write("Pesan ini tampil ketika halaman diload");
   </script>
</body>
</html>

External JavaScript

Terkadang kita ingin menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disinukan jika harus menulis ulang gskrip yang diinginkan disetiap halaman.

Untuk memudahkan kasus diatas maka JavaScript dapat ditulis di file secara external. Jadi, antara dokumen HTML dan JavaScript dipisahkan, kemudian file tersebut (JavaScript) dipanggil dari dokumen HTML. File tesebut disimpan dengan ekstensi .js.

JavaScript : xxx.js

document.write("Pesan ini tampil ketika halaman diload")

Untuk menggunakan eksternal JavaScript (.js), dipakai attribut "src" pada tag <script> pada halaman HTML nya.

HTML : js.html

<html>
<head>
</head>
<body>
<script src="xxx.js">
<p>Skrip diatas berada difile "xxx.js" (external)</p>
</body>
</html>

Catatan :
FIle skrip external JavaScript tidak menggunakan tag <script>. JavaScript pada bagian body akan dieksekusi saat halaman sedang diload. JavaScript pada bagian head akan dieksekusi saat dipanggil.