Assalamu'alaikum warohmatullohi wabarokatuh...!!!
Selamat malam agan2 semuanya, gmana kabarnya malam ini ? saya harap baik-baik saja.
Untuk tutorial malam ini kita akan belajar membuat kalender dengan JavaScript. O'ya, sebelum kita membahas lebih jauh tentang JavaScript, kira-kira pengertian dan kegunaan JavaScript itu apa ya ? :D
ada yang yang tau enggak ?
JavaScript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa yang sekarang disebut JavaScript ini dulunya dinamai “LiveScript” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2 yang sangat populer pada saat itu. 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 milik mereka yaitu Internet Explorer 3. JavaScript sendiri merupakan modifikasi dari bahasa pemrograman C++ dengan pola penulisan yang lebih sederhana dari bahasa pemrograman C++.
JavaScript adalah bahasa pemrograman yang khusus untuk halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek (PBO), sedangkan Script adalah serangkaian instruksi program.
O'ya ada yang lupa ni, ada beberapa hal yang harus agan perhatikan dalam pengelolaan pemrograman JavaScript, diantaranya JavaScript adalah “case sensitive”, yang artinya JavaScript membedakan huruf besar dan huruf kecil, Jika agan pernah belajar bahasa pemrograman seperti Turbo C atau C++, maka sama seperti bahasa pemrograman tersebut, dimana huruf T tidak sama dengan huruf t. Dalam bahasa pemrograman JavaScript juga, sebagai contoh fungsi perintah var tidak boleh ditulis Var dan juga tidak boleh ditulis VAR (huruf besar semua), yang benar adalah var (huruf kecil semua). Perintah lain adalah new array tidak boleh ditulis huruf kecil semua, tapi yang benar adalah new (spasi) Array, dan banyak yang lainnya.
hadoohh, kok ceritanya panjang amat sih gan ? trus kapan kita ngodingnya kalau begini. hehee :D
Oke kalau begitu mari kita langsung saja menuju ke TKP. ("kayak OVJ aja ya gan... hehee :D ").
- Agan siapkan dulu tools nya, disini saya menggunakan tools Dreamweaver. Bagi yang belum punya cari dulu di google :D. Atau agan bisa menggunakan notepad ataupun notepad ++ dan masih banyak lagi yang lainnya.
- Setelah agan buka Dreamweaver nya Pilih New, Basic page, HTML lalu klik Create.
- Lalu ketiklah code dibawah ini.
<html>
<head>
<title>Program Kalender</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080">
<center>
<script language="javascript">
namabulan = new Array (
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember");
var linkhitung=0;
function addlink(month, day, href)
{
var masukan=new Array(3);
masukan[0] = month;
masukan[1] = day;
masukan[2] = href;
this[linkhitung++] = masukan;
}
Array.prototype.addlink = addlink;
linkhari =new Array();
nbulan =new Array(12);
nbulan [0] =31;
nbulan [1] =28;
nbulan [2] =31;
nbulan [3] =30;
nbulan [4] =31;
nbulan [5] =30;
nbulan [6] =31;
nbulan [7] =31;
nbulan [8] =30;
nbulan [9] =31;
nbulan [10] =30;
nbulan [11] =31;
tanggalSekarang = new Date();
hari_ini = tanggalSekarang.getDay();
bulan_ini = tanggalSekarang.getMonth();
tanggal_ini = tanggalSekarang.getDate();
tahun_ini = tanggalSekarang.getYear();
tahun_ini = tahun_ini%100;
tahun_ini = ((tahun_ini <50) ? (2000 + tahun_ini) : (1900 + tahun_ini));
if (((tahun_ini % 4==0)
&&!(tahun_ini % 100==0))
||(tahun_ini % 400==0))nbulan[1]++;
spasi =tanggal_ini;
while (spasi >7)spasi-=7;
spasi =hari_ini - spasi + 1;
if (spasi <0)spasi+=7;
document.write("<table border=2 bgcolor=white");
document.write("bordercolor=black><font color=black>");
document.write("<tr><td colspan=7><center><strong>"
+ namabulan[bulan_ini]+ " " + tahun_ini
+"</strong></center></font></td></tr>");
document.write("<tr>");
document.write("<td align=center>Mi</td>");
document.write("<td align=center>S</td>");
document.write("<td align=center>Se</td>");
document.write("<td align=center>R</td>");
document.write("<td align=center>Ka</td>");
document.write("<td align=center>J</td>");
document.write("<td align=center>Sa</td>");
document.write("</tr>");
document.write("<tr>");
for(s=0;s<spasi;s++)
{
document.write("<td></td>");
}
hitung=1;
while (hitung <= nbulan[bulan_ini])
{
for(b =spasi;b<7;b++)
{
linktrue=false;
document.write("<td>");
for(c=0;c<linkhari.length;c++)
{
if (linkhari[c] !=null)
{
if ((linkhari[c][0]==bulan_ini + 1) && (linkhari[c][1]==hitung))
{
document.write("a href=\"" +linkhari[c][2] +"\">");
linktrue=true;
}
}
}
if (hitung==tanggal_ini)
{
document.write("<font color='FF0000'><strong>");
}
if (hitung <=nbulan[bulan_ini])
{
document.write(hitung);
}
else
{
document.write(" ");
}
if (hitung==tanggal_ini)
{
document.write("</strong></font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
hitung++;
}
document.write("</tr>");
document.write("<tr>");
spasi=0;
}
document.write("</table></p>");
</script>
</center>
</body>
</html>
Setelah selesai, simpanlah dengan format .html
lalu panggillah melalui browser agan, dan hasilnya agan menjadi seperti ini
cukup sampai disini dulu ya gan, semoga bermanfaat.
Selamat mencoba.
Tidak ada komentar:
Posting Komentar