Catatan anak TI: Februari 2010

Pengenalan Javascript

Javascript adalah bahasa script yang paling populer di internet. Selain itu juga javascript sekarang ini sudah di dukung oleh semua browser terkenal, seperti Internet Explorer, Mozilla Firefox, Opera, dll. Sebelum kita mempelajari javascript, terlebih dahulu kita harus mengetahui dasar-dasar dari HTML. Javascript didesain untuk membuat halaman web menjadi lebih interaktif. Javascript adalah bahasa script, yaitu bahasa pemrograman kelas ringan. Javascript biasanya disispkan langsung ke halaman web yang merupakan dokumen HTML. Javascript adalah bahasa yang diinterprtasikan, artinya script yang ditulis langsung dieksekusi tanpa ada kompilasi terlebih dahulu. Penggunaan javascript ini gratis, tanpa harus membeli lisensinya.

Java dan javascript, meskipun memiliki nama yang kelihatannya berhubungan, tetapi ternyata tidak. Hubungan keduanya hanyalah dua-duanya dikembangkan dari bahasa pemnrograman C dan C++. Java (yang dikembangkan oleh Sun Microsystems) merupakan bahasa pemrograman yang lebih berat dan lebih rumit.

Keunggulan dari javascript antara lain:

Javascript memberikan seorang web designer sebuah alat pemrograman. Karena javascript adalah bahasa pemrograman yang sangat sederhana, hampir semua orang bisa memasukan potongan kecil kode pemrograman ke dalam halaman web yang mereka buat.

Javascript bisa meletak teks dinamis ke dalam halaman web. Misalnya,
document.write("<h1>"+nama+"</h1>") dengan kode tersebut kita bisa mencetak teks yang bervariasi ke dalam halaman web kita.

Javascript mampu bereaksi terhadap keadaan. Javascript bisa di set agar mengeksekusi scriptnya ketika ada suatu hal. Misalnya ketika sebuah halaman web selesai dimuat oleh browser, atau ketika seorang pengunjung situs kita mengklik pada elemen HTML tertentu.

Javascript mampu membaca dan menulis elemen HTML. Javascript mampu membaca, dan kemudian mengganti isi dari sebuah elemen HTML.

Javascript mampu memvalidasi data. Javascript bisa digunakan untuk mengecek kebenaran data sebelum dikirimkan ke server. Dengan demikian server dapat terhindar dari kelebihan beban.

Javascript mampu mendeteksi browser pengunjung. Javascript bisa digunakan untuk mendeteksi browser apa yang digunakan oleh pengunjung situs kita. Dan kemudian berdasarkan dari browser yang dipakai pengunjung, javascript bisa memberikan halaman yang sudah dikhususkan untuk browser tersebut.

Javascript mampu membuat cookies. Javascript bisa kita gunakan untuk menyimpan dan menerima data atau informasi pada komputer pengunjung halaman web kita.

Nama resmi dari javascript adalah ECMAScript. ECMAScript dikembangkan oleh ECMA orgasnization, yaitu sebuah organisasi internasional yang menerapkan standar untuk sistem informasi dan komunikasi. ECMA-262 adalah standar resmi dari javascript. Bahasa pemrograman ini ditemukan oleh Brendan Eich do Netscape ( dengan navigator 2.0 ) dan mulai diterapkan pada semua browser dari Netscape dan Microsoft sejak tahun 1996. Pengembangan dari ECMA-262 dimulai pada tahun 1996, dan edisi pertamanya diadopsi oleh ECMA General Assemblt pada juni 1997. Standar tersebut kemudian disetujui sebagai standar internasional ISO ( ISO/IEC 16262) pada tahun 1998. Pengembangan dari standar ini sampai sekarang masih dikembangkan.

Penempatan dan Penggunaan Script CSS

Setelah mengenal tentang CSS, sekarang kita mempelajari tentang penempatannya pada dokumen HTML. Untuk penempatan file CSS tersebut kita dapat menggunakan 3 cara, yaitu:

Eksternal style
Internal style
Inline style>

Eksternal style

Misalnya kita memberi nama file CSS yang kita buat dengan nama style1.css. Kemudian jika kita ingin menambahkan file CSS tersebut pada halaman web kita, maka kita harus membuat link ke file CSS tersebut dari halaman web kita. Letak link menuju ke style1.css terdapat diantara tag <head> dan </head>. Dengan cara ini kita dapat mengatur satu style untuk beberapa halaman web. Berikut ini adalah contohnya:

<html>
<head>
<title>judul artikel</title>
<link rel=stylesheet
href="http://alamat-internet/style1.css"
type="text/css">
</head>
<body>
isi dari halaman web kita yang akan diatur style-nya oleh CSS
</body></html>

Internal style
Tag <style> dan </style> disisipkan di antara tag <html> dan <body>. Dengan cara ini kita hanya dapat mengatur style untuk satu halaman web. Berikut ini adalah contohnya.
<html>
<style type="text/css">
p
{
color:red;
text-align:center;
}
</style>
<body>
<p>Isi dari halaman web yang telah diatur dengan CSS</p>
</body>
</html>
Inline style
Inline style digunakan bila kita hanya ingin mengatur style pada beberapa bagian yang spesifik dari halaman web kita. Berikut ini adalah contohnya.
<html>
<body>
<p style="color:red;”>
Isi dari halaman web yang telah diatur dengan CSS</p>
</body>
</html>

Apabila dalam satu dokumen HTML terdapat lebih dari satu pengaturan style maka, akan didahulukan berdasarkan urutan berikut ini.

Inline style
Internal style
Eksternal style
Default dari browser

Tetapi apabila link ke eksternal style ditempatkan dibawah internal style pada dokumen HTML, maka internal style akan digantikan oleh eksternal style.

Selain menggunakan cara-cara diatas, masih ada beberapa opsi tambahan yang bisa digunakan untuk mengatur style halaman web kita. Opsi tambahan tersebut adalah:

Penyederhanaan tag
Bila kita ingin melakukan pangaturan style pada beberapa tag dengan style yang sama, misalnya:
h1 {font-size: 20pt;
font-weight: italic;
color: orange}
h2 {font-size: 20pt;
font-weight: italic;
color: orange}
h3 {font-size: 20pt;

font-weight: italic;
color: orange}
maka penulisan di atas bisa disederahanakan menjadi:
h1,h2,h3
{
font-size: 20pt;
font-weight: italic;
color: orange
}
Penyederhanaan bisa juga dilakukan untuk satu tag saja, misalnya:
h1
{
font-size: 20pt;
line-height: 15pt;
font-weight: italic;
font-family: "times new roman"
font-style: normal
}
bisa disederhanakan menjadi:
h1{font:20pt/15pt italic "times new roman" normal

Penggunaan id selector

Id selector digunakan untuk mengatur style yang digunakan pada satu buah tag. Id selector menggunakan id atribut dari elemen HTML dan didefinisikan dengan tanda “#”. Contoh berikut akan mengatur style pada elemen yang memiliki id “par1”:

<html>
<head>
<style type=”text/css”>
#par1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<h1>Contoh penggunaan id</h1>
<p id=”par1”>Paragraf berikut ini akan diatur oleh style.</p>
<p>sedangkan paragraf ini tidak terpengaruh oleh style</p>
</body>
</html>

Untuk diperhatikan, pada waktu menamai id jangan mengawali dengan angka. Karena tidak akan terbaca pada browser Mozilla/Firefox.

Penggunaan class selector

class selector digunakan untuk mengatur style pada sebuah grup elemen. Tidak sepereti id selector, class selector lebih sering dipakai pada beberapa elemen. Class selector memungkinkan kita untuk mengatur style tertentu pada elemen HTML dengan class yang sama. Class selector menggunakan atribut dari HTML dan didefinisikan dengan tanda titik “.”. Pada contoh dibawah ini, semua elemen HTML dengan class=”center” akan diratakan ke tengah.

<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Judul teks yang diratakan ke tengah</h1>
<p class="center">Paragraf yang diratakan ke tengah.</p>
</body>
</html>

Untuk diperhatikan, jangan mengawali nama sebuah class dengan angka, karena style kita hanya akan terbaca oleh browser Internet Explorer.

Pengenalan CSS

CSS kepanjangan dari Cascading Styles Sheet. Style menggambarkan bagaimana elemen-elemen HTML ditampilkan. Style di tambahkan pada HTML versi 4.0 untuk memecahkan masalah yang ada. Dengan CSS ini bisa menghemat banyak waktu dalam mengerjakan sebuah halaman web. Sebelum memulai belajar CSS anda terlebih dahulu harus mengenal dasar dari HTML.

Sebenarnya HTML tidak dibuat untuk memformat dokumen, tetapi hanya mendefinisikan sebuah dokumen, misalnya:

<h1>Ini Adalah Sebuah Judul</h1>
<p>Ini adalah sebuah paragraf</p>

Ketika tag-tag seperti <font>, dan atribut warna ditambahkan ke HTML versi 3.2, Hal ini menjadi kerugian bagi para web developer. Untuk membuat sebuah halaman web yang luas, dimana huruf dan warna di setiap bagian halaman bisa berbeda, hal ini menyebabkan pembuatan web menjadi sebuah proses yang panjang dan mahal. Untuk memecahkan masalah ini World Wide Consortium (W3C) menciptakan CSS. Pada HTML versi 4.0, semua tag-tag pemformatan bisa dihilangkan dari HTML, dan ditulis pada file CSS yang terpisah dari dokumen HTML. Semua browser sekarang ini sudah mendukung CSS.

CSS menggambarkan bagaimana elemen-elemen HTML ditampilkan. Style-style biasanya disimpan pada file yang terpisah, yaitu pada file .css. Dengan style yang terpisah memungkinkan kita untuk merubah tampilan seluruh halaman web hanya dengan mengedit sebuah file saja. Pada CSS terdapat dua bagian utama, yaitu sebuah selector dan beberapa deklarasi. Selector biasanya adalah elemen HTML yang ingin kita atur style-nya. Sedangkan setiap deklarasi terdiri dari properti dan value. Properti adalah atribut dari style yang ingin kita ubah. Setiap properti memiliki value.

Deklarasi dari CSS selalu diakhiri dengan tanda titik koma ( “;” ), dan blok deklarasi diakhiri dengan tanda kurung kurawal ( “{“ “}”). Berikut ini adalah contoh pendeklarasian pada CSS.

p {color:red;text-align:center;}

Atau untuk lebih memudahkan dalam memahami, bisa kita tulis setiap deklarasi pada baris yang berbeda, seperti berikut ini.

p
{
color:red;
text-align:center;
}

Pengenalan HTML

HTML adalah sebuah bahasa untuk menampilkan sebuah halaman web. HTML kepanjangan dari Hyper Text Markup Language. HTML bukan merupakan bahasa pemrograman, tetapi merupakan bahasa markup ( markah ). Sebuah bahasa markup terdiri dari sekumpulan tag-tag. HTML menggunakan tag markup untuk menampilkan halaman web.

Tag-tag HTML adalah sekumpulan kata kunci yang diapit oleh tanda lebih kecil “<” dan tanda lebih besar “>”, misalnya <html>. Tag HTML biasanya berpasangan seperti <b> dan </b>. Tag yang pertama disebut tag pembuka dan yang kedua disebut tag penutup.

Sebuah dokumen HTML dibuat untuk menggambarkan sebuah halaman web. Karena itulah dokumen HTML bisa juga disebut halaman web. Dokumen HTML tersebut berisi tag-tag HTML dan teks biasa. Tujuan dari sebuah web browser (misalnya Internet Explorer atau Firefox) adalah untuk membaca dokumen HTML tersebut dan menampilkanya sebagai sebuah halaman web. Browser tersebut tidak menampilakan tag-tag HTML, tetapi menggunakan tag-tag tersebut untuk menginterpretasikan isi dari sebuah halaman web.

Untuk membuat dokumen HTML yang dibutuhkan hanyalah sebuah teks editor (misal: notepad) untuk menulis tag-tag HTML dan sebuah web browser untuk melihat halaman web yang kita buat. Selain dengan notepad, bisa juga dengan aplikasi khusus untuk membuat halaman web, misalnya frontpage, Dreamweaver, atau yang lainnya. Tetapi saya sarankan lebih baik anda menggunakan notepad daripada dengan aplikasi khusus. Karena dengan demikian anda jadi terbiasa dengan tag-tag HTML.

Berikut ini adalah contoh sederhana sebuah dokumen HTML:


<html>
<body>
<h1>Judul Teks</h1>
<p>Isi dari teks yang berupa paragraf</p>
</body>
</html>

Bila dibuka dengan browser, maka akan menampilkan kalimat:

Judul Teks

Isi dari teks yang berupa paragraf

Apa Itu Komputer??

Waktu aku tanya apa sih komputer itu. Temenku menjawab “komputer itu, KOMPOR MUTER.” Mungkin saja beberapa dari kita memang belum tahu apa definisi dari komputer yang sesungguhnya. Komputer adalah alat yang dipakai untuk mengolah data menurut prosedur yang telah dirumuskan.

Kata komputer semula dipergunakan untuk menggambarkan orang yang perkerjaannya melakukan perhitungan aritmatika, dengan atau tanpa alat bantu, tetapi arti kata ini kemudian dipindahkan kepada mesin itu sendiri. Asal mulanya, pengolahan informasi hampir eksklusif berhubungan dengan masalah aritmatika, tetapi komputer modern dipakai untuk banyak tugas yang tidak berhubungan dengan matematika.Dalam definisi seperti itu terdapat alat seperti slide rule, jenis kalkulator mekanik mulai dari abakus dan seterusnya, sampai semua komputer elektronik yang kontemporer. Istilah lebih baik yang cocok untuk arti luas seperti “komputer” adalah “yang memproses informasi” atau “sistem pengolah informasi.”

Beberapa ahli memiliki definisi yang berbeda tentang komputer, diantaranay adalah sebagai berikut:

Hamacher, komputer adalah mesin penghitung elektronik yang cepat dan dapat menerima informasi input digital, kemudian memprosesnya sesuai dengan program yang tersimpan di memorinya, dan menghasilkan output berupa informasi
Blissmer, komputer adalah suatu alat elektonik yang mampu melakukan beberapa tugas sebagai berikut:
1. menerima input
2. memproses input tadi sesuai dengan programnya
3. menyimpan perintah-perintah dan hasil dari pengolahan
4. menyediakan output dalam bentuk informasi
Fuori, komputer adalah suatu pemroses data yang dapat melakukan perhitungan besar secara cepat, termasuk perhitungan aritmetika dan operasi logika, tanpa campur tangan dari manusia.

Operasi Pada Segitiga

Berikut ini adalah source code dengan C++ untuk membuat aplikasi operasi pada segitiga. Dalam pembuatan aplikasi ini saya menggunakan pengulangan DO WHILE dan pemilihan IF ELSE. Selain itu saya juga menggunakan fungsi akar sqrt(). Dimana untuk menggunakan fungsi akar diperlukan header file <math.h>.
Aplikasi ini adalah aplikasi dengan sourcecode terpanjang yang pernah saya buat. Berikut sebagian sourcecodenya:


//instruksi menu utama
  printf("OPERASI SEGITIGA\n");
  printf("Pilih jenis segitiga\n");
  printf("1. segitiga sembarang\n");
  printf("2. segitiga siku-siku\n");
  printf("3. segitiga sama kaki\n");
  printf("4. segitiga sama sisi\n");
  scanf_s("%d",&jenis);
  //masuk ke pilihan segitiga sembarang
  if(jenis==1)
  {
   //awal pengulangan segitiga sembarang
   do
   {
    //cetak instruksi segitiga sembarang
    printf("Masukan ketiga sisi segitiga sembarang.\n");
    printf("sisi a = ");
    scanf_s("%f",&a);
    printf("sisi b = ");
    scanf_s("%f",&b);
    printf("sisi c = ");
    scanf_s("%f",&c);
    //operasi bila data input error
    if(a<=0 || b<=0 || c<=0)
    {
     printf("Maaf, data yang anda masukan tidak valid.\n");
     printf("Apakah anda ingin mencoba lagi?\n");
     printf("1. YA\n");
     printf("2. TIDAK(kembali ke menu utama)\n");
     printf("3. TIDAK(keluar)\n\n\n");
     scanf_s("%d",&ulangi);
    }
    //operasi segitiga sembarang
    else
    {
     keliling=a+b+c;
     s=keliling/2;
     luas2=s*(s-a)*(s-b)*(s-c);
     luas=sqrt(luas2);
    }
    //cetak hasil segitiga sembarang
    printf("sisi pertama = %f\n",a);
    printf("sisi kedua   = %f\n",b);
    printf("sisi ketiga  = %f\n",c);
    printf("Luas         = %f\n",luas);
    printf("Keliling     = %f\n\n\n",keliling);
    printf("Apakah anda ingin melakukan perhitungan lagi? \n");
    printf("1. YA\n");
    printf("2. TIDAK(kembali ke menu utama)\n");
    printf("3. TIDAK(keluar)\n");
    scanf_s("%d",&ulangi);
   }
   //akhir pengulangan segitiga sembarang
   while(ulangi==1);

Karena sourcecode yang terlalu panjang, maka tidak saya tulis disini, tetapi silahkan download disini.

Operasi Pada Lingkaran

Berikut ini saya mencoba untuk membuat sebuah aplikasi sederhana untuk melakukan operasi pada lingkaran. Pada aplikasi ini saya menggunakan pengulangan DO WHILE dan pemilihan IF ELSE.


#include <stdio.h>
#include <math.h>
void main()
{ 
 float phi=3.142857,r2,r,keliling,luas;
 int ulangi;
 do
 {
  printf("Masukan elemen lingkaran yang anda ketahui.\n");
  printf("Bila tidak diketahui, masukan angka 0\n");
  printf("Jari-jari = ");scanf_s("%f",&r);
  printf("Keliling = ");scanf_s("%f",&keliling);
  printf("Luas = ");scanf_s("%f",&luas);
  if(r!=0)
  {
   luas=phi*r*r;
   keliling=phi*2*r;
  }
  else if(keliling!=0)
  {
   r=keliling/phi/2;
   luas=phi*r*r;
  }
  else(luas!=0);
  {
   r2=luas/phi;
   r=sqrt(r2);
   keliling=phi*2*r;
  }
  printf("\n\n\nJari-jari = %f",r);
  printf("\nKeliling = %f",keliling);
  printf("\nLuas = %f\n\n\n",luas);
  printf("\nUlangi operasi?");
  printf("\n1. YA");
  printf("\n2. TIDAK");  
  printf("\n(Masukan pilihan lalu tekan enter) ");
  scanf_s("%d",&ulangi);
 }
 while(ulangi==1);
}

Untuk program eksekusinya, silahkan download disini

operasilingkaran.rar

Operasi Pada Persegi Dengan C++

Berikut ini saya membuat aplikasi untuk mencari elemen-elemen pada bangun persegi dengan menggunakan bahasa C++.


#include <stdio.h>
#include <conio.h>
void main()
{
   float panjang,lebar,luas,keliling;
   int ulangi;
   do{
   clrscr();
   printf("Operasi pada persegi");
   printf("\n====================");
   printf("\nMasukan elemen dari persegi");
   printf("\nBila tidak diketahui, masukan angka 0");
   printf("\nPanjang  = ");scanf("%f",&panjang);
   printf("\nLebar    = ");scanf("%f",&lebar);
   printf("\nLuas     = ");scanf("%f",&luas);
   printf("\nKeliling = ");scanf("%f",&keliling);
   if (panjang!=0 && lebar!=0)
    {
         luas=panjang*lebar;
         keliling=2*(panjang+lebar);
        }
   else if(luas!=0 && lebar!=0)
    {
         panjang=luas/lebar;
         keliling=2*(panjang+lebar);
        }
   else if(luas!=0 && panjang!=0)
    {
         lebar=luas/panjang;
         keliling=2*(panjang+lebar);
        }
   else if(keliling!=0 && lebar!=0)
    {
         panjang=(keliling/2)-lebar;
         luas=panjang*lebar;
        }
   else if(keliling!=0 && panjang!=0)
 {
         lebar=(keliling/2)-panjang;
         luas=panjang*lebar;
        }
   else
    {
         printf("Maaf, informasi tidak mencukupi.");
        }
   clrscr();
   printf("\nPanjang  = %f",panjang);
   printf("\nLebar    = %f",lebar);
   printf("\nLuas     = %f",luas);
   printf("\nKeliling = %f",keliling);
   printf("\nUlangi operasi?");
   printf("\n1.ya");
   printf("\n2.tidak\n");
   printf("(Tekan nomor pilihan lalu enter) ");
   scanf("%d",&ulangi);}
   while(ulangi==1);
}

Kalo ingin download aplikasinya, klik disini.

Mencari Luas Persegi

Berikut ini adalah contoh program C++ untuk mencari luas persegi. Program ini menitik beratkan pada penugasan variable, meminta input, operasi aritmatika berupa perkalian variable dan mencetak variable.


#include <stdio.h>
#include <conio.h>
main ()
{  int panjang,lebar,luas;
   printf("  Menghitung luas persegi\n");
   printf("===========================\n");
   printf("Panjang = ");
   scanf("%d",&panjang);
   printf("Lebar   = ");
   scanf("%d",&lebar);
   luas=panjang*lebar;
   printf("Luas persegi tersebut = ");
   printf("%d",luas);
   printf("\nTekan tombol apa saja untuk keluar");
   getch();
}