Dasar dasar pemograman dengan JavaScript - HTML mendefenisikan beberapa tipe kontrol buttons (t

HTML mendefenisikan beberapa tipe kontrol buttons (tombol)

Bab 4 Dasar dasar pemograman dengan JavaScript

Berbagai Bahasa Pemograman untuk web tersedia. Setiap bahasa mempunyai kelebihan masing masing dan mendukung satu sama lainnya.

Java merupakan bahasa pemograman yang dikembangkan oleh Sun Microsystem Inc. Berbagai aplikasi dibuat dengan bahasa Java diantaranya pemograman web, desktop dan handphone.

Bahasa pemograman Java dibagi dalam dua bagian; Bahasa (setengah) terkompilasi dan bahasa diinterpretasikan langsung oleh browser (script).

Pengertian Scripting

Komputer bekerja berdasarkan program yang dijalankan. Ada dua jenis program yang dijalankan oleh komputer; file eksekusi dan file script. File eksekusi merupakan hasil kompilasi dari kode program ke bahasa mesin. Bentuk file eksekusi antara lain dll,exe, jar. Jenis kedua menggunakan file script. File scrip merupakan kode program dalam bentuk teks. Komputer membaca kode ini setiap ada perintah untuk menjalankannya kemudian menterjemahkan baris perbaris.

Dari segi kecepatan program dalam bentuk file eksekusi lebih cepat dari pada file skrip, karena pada file skrip ada waktu menterjemahkan program selain waktu eksekusi.

Dalam pemograman web, kedua jenis program ini dipakai. Walaupun waktu eksekusi lebih lama, kode skrip masih tetap populer dengan beberapa alasan. Kebanyakan browser bisa mengeksekusi skrip. Beberapa Kode skrip (pemograman sisi klient) bisa dilihat oleh pengguna sehingga mudah mengubah kalau ada modifikasi yang diperlukan. Untuk kecepatan, waktu yang lebih lama pada umumnya adalah pada proses tranfer data dari pada waktu eksekusi sehingga hampir tidak berbeda kecepatan dalam keseluruhan operasi antara skrip dan file eksekusi.

Jenis scripting

Berdasarkan tempat dieksekusinya skrip dapat dibagi atas dua; Client side programming

Server side programming

Pada client side programming eksekusi program dilakukan oleh browser. Server side programming melakukan eksekusi skrip terlebih dahulu baru di kirim ke kien. Kode yang dikirim bisa berupa gabungan antara kode html dan kode client side skrip.

Bahasa java script dalam teori tidak bisa mengakses hardware dan file kien. Bahasa VBScript bisa mengakses file dan hardware klient Memerlukan instalasi objek ActiveX pada sistim klien . . http://homepages.ius.edu/rwisman/a348/html/client.htm

http://www.echoecho.com/javascript.htm http://www.echoecho.com/javascript0.htm

29 Pemograman Web

Pemograman sisi klient merupakan kode yang harus dijalankan dalam browser. JavaScript merupakan salah satu contoh dari pemograman sisi kien karena kode dikirim ke browser terlebih dahulu dan dieksekusi di sana(browser) . Kode skrip bisa dilihat oleh klien dengan menggunakan menu Tool source (mozila).

PHP (yang dipelajari pada bab 7) merupakan contoh skrip sisi server karena kode di eksekusi di server dan hasilnya dikirim ke browser untuk ditampilkan. Kode program sisi server tidak bisa dilihat pada browser. Ini salah satu keuntungan dari pemogrman sisi server untuk mengamankan kode program terutama pasword yang digunakan untuk mengakses data. Program sisi server juga bisa digunakan membangkitkan kode scrip untuk dieksekusi disisi klien.

Web dinamis dengan JavaScrip

HTML pada dasarnya adalah statis, browser menampilkan teks dan grafik dan menunggu sampai pengguna menklik sebuah link atau mengisi sebuah form kemudian mengembalikan data ke server. Kemampuan dinamis umumnya hanya terbatas pada klik sebuah link atau mengirimkan form ke server dan menerima HTML statik lagi.

Pemograman sisi klien dirancang untuk menambah prilaku dinamis ke klien dengan menjalankan sebuah program pada browser.

Ada beberapa alasan menggunakan pemograman sisi klien.

JavaScrip adalah bahasa skrip yang memungkinkan untuk menambahkan pemograman nyata pada sebuah web. Contoh aplikasi web yang bisa dibuat dengan JavaScript seperti game primitive, kalkulator dsb.

Namun ada penggunan yang serius untuk JavaScript :

1. Mendeteksi browser yang digunakan.

Tergantung pada browser yang digunakan, beberapa halaman web tidak bisa dijalankan oleh browser tertentu. Dengan mendeteksi browser yang digunakan, pesan bisa diberikan ke pengguna bahwa halaman yang sedang dilayari tidak bisa ditampilkan dengan sempurna.

2. Cookies

Menyimpan informasi pada komputer visitor dan kemudian mengambil informasi ini kembali secara otomatis pada waktu mendatang saat pengguna pengguna mengunjungi halaman yang sama.

Teknik ini disebut "cookies".

3. Mengontrol browser

Membuka halaman halaman dalam window yang di kostomized dengan menambahkan menu menu, tombol, status atau apa saja yang ingim ditampilkan.

4. Memvalidasi form.

Memvalidasi data yang diinputkan sebelum form dikirim merupakan cara yang cepat memberi tahu pengguna akan kelengkapan data yang dikirim. Sebagai contoh, alamat email yang dimasukkan bisa divalidasi misalnya melalui karakter. Setiap alamat email selalu mengandung sebuah karakter @. Jika tidak kelihatan atau lebih dari satu karakter @ berarti bukan alamat email yang valid.

Untuk mahir menggunakan javascript mulailah dulu dengan mengerti pada dasar dasarnya.

Pelajaran ini menyajikan semua inti yang perlu diketahui sebelum membangun dan mngkostomisasi sebuah web yang bagus.

Dasar-dasar JavaScript

DIMANA MENEMPATKAN KODE JAVASCRIPT?

Karena javascript bukanlah HTML, anda harus perlu memberi tahu browser bila memasuki javascript pada sebuah halaman HTML. Ini dilakukan dengan menggunakan tag <script>. Pada browser gunakan kode <script> type="text/javascript"> dan </script> yang berarti awal dan akhir dari javascript. Lihat contoh berikut:

Contoh4-1.html <html>

<head>

<title>Halaman Javascript Saya</title> </head>

<body>

alert("Selamat datang di hompage saya!!!"); </script>

</body> </html>

Kata alert adalah sebuah perintah standard javascript yang akan menampilkan kotak pop up pada layar. Visitor perlu menklick tombol "OK" pada kotak alert box untuk melanjutkan. Dengan memasuki perintah alert yang ada antara tag <script type="text/javascript"> dan </script>, browser akan mengenal bahwa ini adalah sebuah perintah javascript. Bila perintah tidak ditulis diantara tag <script>, browser akan mengenal sebagai teks dan menuliskan teks apa adanya pada layar.

Kode javascript bisa ditempatkan pada bagian <head> dan <body> pada sebuah dokumen. Secara umum disarankan untuk menempatkan sebanyak mungkin dalam bagian <head>.

Sudah diketahui bahwa perlu bahwa javascript memerlukan <script> untuk memulai. Ada beberapa hal lagi yang perlu diketahui sebelum memulai menulis javascript:

Baris-baris Javascript berakhir dengan tanda titik koma (;).

Lihat kembali contoh 4-1 sebelumnya dimana baris kode javascript berakhir dengan titik koma (semicolon).

Tanda berpengaruh pada performan, kode java skrip bisa ditulis dalam satu baris. Tapi cara ini tidak disarankan karena akan susah mengamati skrip secara keseluruhan.

Tempatkan teks diantara tanda " ". Bila memasukkan teks untuk di handle oleh javascript, selalu ditempatkan dalam tanda " ". Bila lupa menutup teks dalam tanda " ", javascript akan menginterpretasikan teks tersebut sebagai variabel bukan teks.

Berikut ini akan dipelajari kenapa terjadi kesalahan dalam kode skrip.

Huruf besar berbeda dengan huruf kecil. Harus selalu diingat bahwa huruf kapital. Ini berarti bila menulis perintah dengan huruf besar dalam javascript, perlu mengetikkannya pada yang tepat. Kesalahan yang umum pada semua level pemogram adalah kesalahan penilisan huruf besar.

Disamping menyuruh javascript untuk menampilkan sesuatu melalui kotak pop up kita bisa menulis secara langsung kedalam dokumen.

<title>Halaman Javascript Saya</title> </head>

document.write("Selamat datang di tempat saya!!!"); </script>

</body> </html>

Fungsi documen.write adalah perintah javascript mengatakan ke browser bahwa tulisan terletak antara tanda kutip ditulis kedalam dokument.

Catatan: Bila memasukkan teks dalam javascript, perlu untuk menempatkannya diantara " ". Script dalam contoh diatas menghasilkan keluaran :

Selamat datang ditempat saya!!! Tugas:

Perhatikan contoh ini untuk mempelajari dimana menulis teks javascript: <html>

<head>

<title>My Javascript Page</title> </head>

document.write("Selamat di web saya!!!<br>"); </script>

Semoga senang...<br> </body>

</html>

Output dari contoh ini akan kelihatan seperti berikut: Halo!!!

Selamat dating di web saya!!! Semoga senang...

Seperti yang terlihat dilayar, javascript menulis teks pada dimana skrip ditempatkan dalam kode HTML. Sebuah aspek yang menarik adalah bahwa segala jenis tag HTML bisa diletakkan kehalaman web melalui metoda document.write method. Sebagai contoh, jika ingin membuat table untuk membandingkan temperature dalam Fahrenheit dan Celsius, selain dengan menulis

For instance, if you wanted to make a long table that compared Fahrenheit and Celsius, instead of actually typing all the values into the table, you could have javascript calculate the values and write the table to the document.

An example of a javascript generated table can be seen on the page explaining the hexadecimal colorsytem.

On that page, there are 15 tables with 25 columns in each.

Each cell shows different mixtures of the basic colors red, green and blue.

To set up these tables in HTML would demand almost an entire days work. Using javascript for the same purpose took less than 15 minutes!

JavaScript Basics : VARIABEL-VARIABEL

Variabel bisa diibaratkan kotak kecil dengan sebuah nama. Isi dari kotak bisa berbeda atau berubah untuk satu kota yang sama.

Bila anda mempunya beberapa pasanag sepatu, bisa menempatkan dalam satu kotak dengan satu nama. Misalnya kotak sepatu adidas berisi 5 pasang sepatu. Bila sepasang sepatu dikeluarkan dari kotak maka kota sepatu adidas berisi 4 pasang sepatu tetapi namanya masih tetap kotak sepatu adidas. Disini bisa dedifenisika kotak sepatu adidas adalah variable, jumlah sepatu didalamnya adalah isi variabel.

Defini variabel adalah sebuah tempat didalam memori komputer untuk menyimpan informasi. Variabel ditetapkan dengan memberi nama yang unik padanya.

Perhatikan contoh berikut : <html>

<head>

<title>Mengenal Variabel dalam Javascript</title> </head> <body> <script> http://photos-c.ak.fbcdn.net/hphotos-ak- ash4/424526_2582068475210_1359410841_31950779_456974593_n.jpg </script> </body> </html>

Pada contoh ini akan menulis "Henri" pada dokumen.

Kembali diingatkan bila menuliskan teks dalam variabel harus ditempatkan didalam tanda " ". Apabila teks tidak ditempatkan dalam tanda kutip maka Javascript memperlakukan sebagai variabel. Lihat contoh beriku dan perhatikan perbedaannya dengan contoh sebelumnya.

<title>My Javascript Page</title> </head>

34 myname=Henrik; document.write(myname); </script> </body> </html>

Try to predict the output of the example before reading on.

- In the first line, the text "my first name" is stored in the Henrik variable. - In the second line, the Henrik variable is stored in the myname variable. - Finally in line 3, the myname variable is written to the document.

The result is that "my first name" will be written on the page.

MEMBERIKAN NILAI KE VARIABEL

Cara yang umum memberikan nilai kedalam variabel adalah menggunakan tanda sama dengan (=). Perhatikan contoh berikut yang memberikan perbedaan pemberian nilai teks dan nilai lainnya. Tanda kurung digunakan untuk mengontrol penulisan rumus-rumus yang rumit.

Contoh : a=2; a=2; a++; a=2; a--; a=2; b=3; c=a+b; a=2; d=a+6; Awal="Henri"; Akhir="Dunand"; NamaLengkap=Awal+" "+Akhir; a=2*7; b=20/5; c=(20/5)*2; d=20/(5*2); Hasil keluaran: a=2 a=3 (2+1) a=1 (2-1) c=5 (2+3) d=8 (2+6) Awal=Henri

35 Akhir=Dunand NamaLengkap=Henri Dunand a=14 (2*7) b=4 (20/5) c=8 (4*2) d=2 (20/10)

Pemberian huruf besar pada variable nama hanyalah mode saja, variabel bilangan juga bisa diberi huruf besar.

Operasi-Operasi aritmetika

Pada contoh diatas kita telah menggunakan apa yang disebut operator arithmetika a++ dan a--. Operator ini akan sering dijumpai dalam skrip karena ini bias mempersingkat penulisan. Menulis dalam bentuk a++ lebih cepat dari pada a=a+1;.

Operator Penjelasan Contoh

++ inkremental a=5;a++; nilai a sekarang = 6

-- dekremental A=5;a--; nilai a sekarang = 4

% mengembalikan modulus yaitu

sisa dari pembagian

a=8 % 3; nilai a adalah 2, karena 8 dibagi 3 mempunyai nilai sisa 2.

Membandingkan Variabel

Ada beberapa cara berbeda untuk membandingkan variabel. Yang paling mudah adalah membandingkan kesamaan menggunakan dua tanda samadengan.

if (a==b) {alert("a sama dengan b")};

if (namaakhir=="Melati") {alert("Nama yang cantik!!!")};

Membandingkan kesamaan nilai variabel harus menggunakan dobel sama dengan (= =). Apabila hanya dituliskan satu saja akan mengakibatkan variabel sebelah kiri sama dengan diisi dengan nilai variabel sebelah kanan.

if (namaakhir="Mutiara") {alert("Nama bagus!!!")};

Setelah baris ini dieksekusi maka namaakhir akan berisi teks Mutiara. Penulisan seperti ini akan menyebabkan bug (memberikan hasil yang tidak diharapkan) pada script.

Operator Penjelasan Contoh

== Sama dengan 4==5 (false) 5==5 (true) 5==4 (false) != Tidak sama dengan 4!=5 (true)

5!=5 (false) 5!=4 (true) < Kurang dari 4<5 (true)

5<5 (false) 5<4 (false) > Lebih dai 4>5 (false)

5>5 (false) 5>4 (true) >= Kecil atau sama dengan 4<=5 (true)

5<=5 (true) 5<=4 (false) <= Besar atau sama dengan 4>=5 (false)

5>=5 (true) 5>=4 (true)

Campuran HTML/Script

Pemograman melalui Bahasa Script pada umumnya dicampur dengan HTML dalam sebuah file tunggal. HTML menyediakan antarmuka dan program script menyediakan logika. Perhatikan contoh Javascript berikut yang menampilkan Apa Kabar sebanyak 5 kali.

JavaScript and HTML JHelloWorld.htm JavaScript

<H1>Hello World JavaScript</H1> <SCRIPT LANGUAGE="JavaScript"> for( i=1; i<=5; i++)

document.write ("Hello World<br>"); </SCRIPT>

Latihan e 2 - JavaScript

Menggunakan contoh program JavaScript diatas : Ubah program tersebut untuk menampilkan nama anda dalam tulisan tebal sebanyak 100 kali. Tampilkan nomor baris untuk setiap nama.

Bab 5 Pengenalan XHMTL dan XML

Ada dua bagian utama pada XHTML:

HTML 4

HTML 4 adalah bahasa markup digunakan untuk menampilkan teks dan dokumen dokumen lainnya melalui platform dan mesin yang berbeda.

Pada mulanya ditujukan untuk audien tertentu dan sekarang sudah ditingkatkatan untuk memasukkan hypertext, multimedia serta style untuk memaparkan dokumen.

XML

 XML merupakan sebuah bahasa markup yang bisa diperpanjang dikembangkan menambah fleksibilitas dan kemampuan dari HTML. Banyak kompleksitas yang bisa diturunkan dengan menggunakan XML.

XHTML menggabungkan fleksibilitas HTML dengan ekstensibilitas XML. Tetapi apa maksudnya ini? Bila kita menulis tag harus bisa terlihat oleh satu dan lain browser. Dalam perkembangan versi dari HTML,disamping dibuatnya tag yang baru, beberapa tag ada yang ditinggalkan dari versi sebelumnya ada juga yang terus dibawa ke versi selanjutnya. Akibatnya halaman yang dibuat tidak pernah terlihat sama pada semua browser.

Solusinya adalah penulis HTML tidak menggunakan tag-tag yang tidak didukung semua browser karena versi yang berbeda. Harus ada sebuah teknik skripting yang mengarahkan pembaca pada halaman yang sesuai.

XHTML mengatasi ketidakseragaman tag. Dengan XHTML, jika kiat memerlukan markup tag yang baru, bisa didefenisikan dengan mudah dalam modul XHTML. Tag-tag baru bisa digunakan sama seperti tag yang lainnya .

XHTML 1.0 merupakan perumusan ulang HTML 4.0. Maksudnya, mempelajari XHTML pada dasarnya sama dengan HTML. Perbedaan utamanya adalah ada sedikit aturan baru dimana XHTML lebih kaku daripada HTML. Ada bererapa aturan dasar untuk mengkonversikan HTML 4 ke XHTML seperti diuraikan dalam pembahasan berikut.

1. Stricter adherence to the HTML specification.

Many browsers are very lax in how they interpret HTML. This leads to incongruities in how the pages are displayed, and XHTML doesn't allow that. The best way to correct this is to use an

XHTML validator.

2. Menulis dokument dengan format yang baik. Maksud dari penulisan dengan format yang baik adalah menghindari penggunaan elemen yang tumpang tindih.

3. Berikut adalah contoh yang bisa diterima:

<p>Paragraph <em>emphasized</em></p>

Tag <em> dibuka dan ditutup diantara tag <p>. Contoh dibawah ini adalah tidak diizinkan dalam format XHTML:

Karena tag <em> overlap dengan tag <p>. 4. Menulis atribut tag dengan huruf kecil.

XHTML merupakan bahasa markup yang case-sensitive, sehingga <LI> and <li> akan diartikan sebagai tag yang berbeda.

5. Tag penutup diperlukan.

Pada HTML, beberapa tag terdiri atas elemen yang tidak memerlukan tag penutup seperti tag <p>.. XHTML memerlukan penutup

</p>

Untuk tag tunggal seperti <br> harus memasukkan trailing slash kedalam tag tersebut yaitu <br /> untuk membuat baris baru.

6. Semua atribut harus menggunakan tanda kutip dan diberi nilai.

Atribut yang tidak ditulis diantara tanda kutip adalah salah seperti <table border=3>. Atribut yang biasanya berdiri sendiri sekarang harus berpasangan dengan nilai.

Contoh diatas adalah menambahkan atribut bayang dengan nilai tanpa bayang pada tag <hr/>.

7. Lakukan validasi kedua.

Langkah terakhir adalah melakukan validasi pada XHTML. Proses validasi bertujuan untuk mengetahui kesalahan atau permasalahan pada kode yang dibuat.

Dalam dokumen Disain dan Pemograman Website (Halaman 32-43)