Selasa, 12 Juni 2012

Javascript Client Side Scripting

Asal mula nama JavaScript adalah LiveScript, dikembangkan pertama kali pada tahun 1995 di Netscape Communications.

Hasil kolaborasi antara Netscape dan Sun (pengembang bahasa pemrograman “Java” ) memberikan nama baru “JavaScript” pada tanggal 4 desember 1995.

Bahasa ini dikenali pada browser Netscape Navigator mulai versi di atas 2.0. ,sedangkan Microsoft melengkapi Internet Explorer dengan JavaScript mulai versi 3.0 ke atas.


Aturan Penulisan Variable
Aturan penulisan variable adalah sebagai berikut.
-Penuisan nama variable harus dimulai oleh satu karakter huruf (huruf besar maupun kecil) atau garis bawah "_", berikut ini contoh benar :
Body
_src
dan berikut ini contoh penulisan variable yang salah
1_src
&js

-Penulisan variable tidak boleh menggunakan reseved word atau kata-kata yang mengandung istilah-istilah yang sudah digunakan pada JavaScript. Misalnya abstract, else, if, var, int, class, goto, interface dan implements

Perlu dicatat bahwa penulisan variable dalam JavaScript bersifat case sensitif, maksudnya dalam pemberian nama variable sebaiknya ditulis dengan aturan yang sama, huruf besar semua atau huruf kecil semua.

MENDEKLARASIKAN VARIABLE
Pada dasarnya, penulisan variable JavaScript sangatlah fleksibel dan tidak terlalu rumit dan ketat, sehingga Anda tidak akan terlalu sering menerima pesan error pada saat menjalankan program. Sebagai contoh deklarasi variable di JavaScript dapat dilakukan dengan dua cara, yaitu :
-Eksplisit, yakni dengan menuliskan kata kunci var kemudian diikuti dengna nama variable dan nilai dari variable. contoh
var nilai = "nama_var";
-Implisit, yaitu dengan menuliskan secara langsung nama dari variable dan diikuti nilai darivariable. contoh
nilai = "nama_var";

Dalam contoh deklarasi diatas, browser akan secara otomatis memperlakukan pernyataan itu sebagai deklarasi dari sebuah variable. Pada browser versi lama mungkin terjadi kasus diamana browser tidak mengenali pendeklarasian variable secara implisit, sehingga disarankan untuk menggunakan cara eksplisit dalam menulis program JavaScript.
Berikut ini adalah contoh pendeklarasian variable dengan kedua cara tersebut
<html>
<head>
<title>Latihan1 JavaScript </title>
<script type="text/JavaScript">
<!--
var nilai1 = 16 ;
nilai2 = 4 ;
document.writeln(nilai1/nilai2);
//-->
</script>
</head>
<body>
<br>*Contoh pendeklarasian variable*
</body>
</html>

PERBEDAAN VARIABLE LOCAL/GLOBAL
Penulisan variable hanya dapat diakses dari seluruh bagian program atau hanya di dalam bagian tertentu dari program. Pendeklarasian variable tanpa menggunakan kata kunci var/biasa disebut dengan cara implisit, maka variable tersebut dapat diakses dari seluruh bagian program (semua fungi yang ada di dalam program dapat memanggil dan memakai variable ini),  dan sering dikenal dengan variable global.
Sebaliknya jika pendeklarasian variable menggunakan kata kunci var, serta memungkinkan pengaksesan variable tersebut hanya dalam lokasi tertentu dimana variable tersebut dideklarasikan, maka variable tersebut dinamakan variable local
Berikut ini contoh variable lokal

<html>
<head>
<title>Latihan variable lokal JavaScript </title>
<script type="text/JavaScript">
<!--
var a    = 12 ;
var b    = 4 ;
function PerkalianDengan2(b){
var a    = b * 2 ;
return a;
}
document.write("Dua kali dari "+b+" adalah "+PerkalianDengan2(b));
document.write("<br>");
document.write("Nilai dari a adalah "+a);
//-->
</script>
</head>
<body>
<br>*Contoh pendeklarasian variable local *
</body>
</html>

Sedangkan berikut ini adalah contoh penggunaan variable global
<html>
<head>
<title>Latihan variable global JavaScript </title>
<script type="text/JavaScript">
<!--
var a    = 12 ;
var b    = 4 ;
function PerkalianDengan2(b){
a    = b * 2 ;
return a;
}
document.write("Dua kali dari "+b+" adalah "+PerkalianDengan2(b));
document.write("<br>");
document.write("Nilai dari a adalah "+a);
//-->
</script>
</head>
<body>
<br>*Contoh pendeklarasian variable global *
</body>
</html>

css

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.

Keuntungan Penggunaan CSS

Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.
Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.
Jadi, keuntungan menggunakan CSS, lebih praktis!

Kekurangan Penggunaan CSS

Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.



Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value.
Format penulisan kalimat CSS:
selector { property: value }
Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.
Contoh Syntax:
h1 { color: red }
Contoh di atas menunjukkan
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).

Pengelompokan Selectors

Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.

Penggunaan Banyak Properties

Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3 {color:red; font-family:arial; font-size:150%;}
Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.

Cara Penulisan Yang Baik

Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent. Ya cuma biar rapih dan lebih mudah di baca aja sih, ga harus kok.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.

CSS Comment

Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat.
Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.
/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}

AJAX

AJAX adalah singkatan dari “Asynchronous JavaScript and XML”, yang dibuat dari serangkaian teknologi dengan berbagai kemampuan : JavaScript, XML dan sebuah method komunikasi asinkron antara client dan server.
3 teknologi yang saling berinteraksi : JavaScript menangkap isyarat, gerak serta aksi. Sebagaimana pada situasi yang mungkin terjadi, JavaScript menggunakan jalur komunikasi pada server (object JavaScript dengan nama XMLHttpRequest) untuk memanggil method yang tersimpan pada server dan menggunakan XML sebagai mekanisme pengiriman data. Jika JavaScript pada client telah menerima respon dari server, maka JavaScript akan menggunakan kemampuan bawaannya untuk memanipulasi struktur DOM halaman untuk menambahkan content yang didapat dari server. Perubahan yang terjadi pada struktur DOM kemudian diterjemahkan oleh browser pada client, sehingga meningkatkan efek interaktivitas pada user.
1. AJAX sebagai sebuah Arsitektur
Pada awalnya AJAX dibuat sebagai sebuah rangkaian dari teknologi, namun
kemudian AJAX mengalami perkembangan. Sebagai contoh, adanya aplikasi web
yang tidak menggunakan XML dalam mentransfer data dari client ke server. Cara
tersebut dilakukan dengan menggunakan object XMLHttpRequest.
Berdasarkan realita di atas, beberapa pihak mendefinisikan sebagai paradigma baru
dalam pemrograman, disamping teknologi yang menyediakan fungsionalitas. Mari
kita bahas lebih mendalam tentang arsitektur AJAX.
Pengembang telah mengembangkan web programming sebelum hadirnya AJAX :
action dari user yang membutuhkan data dari server ditampilkan dalam halaman
yang digunakan, dimana data request dari user dikirimkan menuju server. Setelah
mengolah halaman tersebut, server menampilkan halaman baru bagi user yang
mengandung hasil dari proses sebelumnya.
Permasalah dari macam arsitektur tersebut adalah lambat dan cukup memakan
waktu, terutama bila dibandingkan dengan aplikasi desktop. Aplikasi desktop mampu
merespon cepat atas request dari user, aplikasi ini tidak memproses ulang masing –
masing komponen interface yang akan ditampilkan sebagai respon.
AJAX menggunakan arsitektur pemrograman tersebut pada aplikasi Web. Daripada
memberikan sebuah halaman penuh pada server dan mendapatkan pula sebuah
halaman penuh sebagai hasil operasi, AJAX mengijinkan kita untuk mengirimkan
request dalam ukuran yang lebih kecil pada server. Halaman yang terpakai hanya
termodifikasi untuk menampilkan hasil, bukan tergantikan dengan sebuah halaman
baru.
Faktor penting yang lain dari arsitektur AJAX adalah request dan response dijalankan
secara asinkron : AJAX tidak melarang user untuk melakukan proses lain pada
halaman yang dipakai. User dapat mengisi dan menggunakan area lain pada
halaman, sedangkan AJAX bekerja pada background.
Yang terakhir, AJAX mengijinkan user untuk berinteraksi dengan server sebagai
respon terhadap seluruh hal yang dilakukan oleh user. Arsitektur yang ada
sebelumnya hanya mengijinkan kita untuk berkomunikasi dengan server pada saat
user menekan tombol atau link yang akan mengirim data pada halaman. AJAX
memperbolehkan untuk me-request data baru dari server dalam bentuk mouseovers,

2.contoh


<html>
<head>
<title>Registration Form</title>
</head>
<body>
<H1> Welcome new user! </H1>
Please enter your information in the fields below
<form action="/submit">
Name : <input type="text" name="name"/> <br/>
Address : <input type="text" name="address"/> <br/>
City : <select name="city">
<option>Select One from List</option
<option value="Quezon City">Quezon City</option>
</select>
<br/>
Zip Code : <input type="text" name="zip" size="4"/> <br/>
<input type="submit" value="Submit"/>
</form>
</body>


Menyiapkan halaman form.
Pertama-tama, kita harus mempersiapkan HTML yang akan digunakan oleh user. Jika kita akan menggunakan AJAX sebagai respon user input pada field City, perlu ditambahkan sebuah event listener pada field City. Akan ditambahkan juga atribut id pada elemen form – hal ini akan memudahkan pekerjaan kita.
Menggunakan event listener pada input field City merupakan hal yang mudah : hanya perlu meregistrasikan fungsi JavaScript yang akan dipanggil pada events. Dibawah ini adalah HTML form yang disempurnakan :
...
Address : <input type="text" name="address"/> <br/>
City : <select id=”city” name="city" onchange=”updateZip(this.value)”>
<option>Select One from List</option
<option value="Quezon City">Quezon City</option>
</select>
<br/>
Zip Code : <input id=”city” type="text" name="zip" size="4"/> <br/>
...
Dengan perubahan diatas, browser akan memanggil fungsi updateZip tiap kali user memilih value dari daftar City.
1. buatlah bilangan input bilangan 1 dan 2 dan bandingkan dengan ASP


index.html

<html>
<head>
<title>no 1</title>
</head>

<body>
<br>
<form action="nilai.php" method="post" target="_blank">
<table align="center" >
<tr>
    <td colspan="3" align="center">Menentukan Nilai Yang Terbesar</td>
</tr>
<tr>
    <td colspan="3">=================================</td>
</tr>
<tr>
    <td>Nilai X</td>
    <td>:</td>
    <td><input type="text" size="30" name="x"></td>
</tr>
<tr>
    <td>Nilai Y</td>
    <td>:</td>
    <td><input type="text" size="30" name="y"></td>
</tr>
<tr>
    <td><input type="submit" value="Ok?"></td>
</tr>

</table>

</body>
</html>



nilai.php
<?php

$x=$_POST["x"];
$y=$_POST["y"];

echo "Nilai 1: " .$x. " dan Nilai 2: " .$y. "<br><br>";

if($x>$y){
    echo " " .$x. " lebih besar dari " .$y. " ";
    }else if($y>$x){
        echo " ".$y." lebih besar dari ".$x." ";
        }else echo"Nilai x & y sama";

?>





2. buatlah perulangan dengan for, while dan do while 


<?php
$i = 1;
while ($i <= 10) {
   echo $i++; 
}
   echo "<br>";
   echo "<br>";
 
  $i = 0;
do {
   echo $i;
} while ($i > 0);
   echo "<br>";
   echo "<br>";
for($i=0;$i<5;$i++){
   echo "Hello World!";
   echo "<br>";
   echo "Learn PHP";
   echo "<br>";
}
?>




3 buatlah aplikasi dengan fungsi fungsi PHP minimal 5 fungsi

<?php
            function writeName($fname)
            {
            echo $fname . "<br />";
            }

            echo "Nama : ";
            writeName("Endri Rahmawanto");
            echo "NIM  : ";
            writeName("09018250");
            echo "<br>";
    ?>
    <br>
    <li>fungsi 1 - Penjumlahan</li>
    <?php
        function add($x,$y)
        {
        $total=$x+$y;
        return $total;
        }

        echo "1 + 2 = " . add(1,1);
        echo "<br>";
    ?>
    <br>
    <li>fungsi 2 - Pengurangan</li>
    <?php
        function add2($x,$y)
        {
        $total=$x-$y;
        return $total;
        }

        echo "2 - 1 = " . add2(2,1);
        echo "<br>";
    ?>
    <br>
    <li>fungsi 3 - Pengkalian</li>
    <?php
        function add3($x,$y)
        {
        $total=$x*$y;
        return $total;
        }

        echo "2 x 6 = " . add3(2,6);
        echo "<br>";
    ?>
    <br>
    <li>fungsi 4 - Pembagian</li>
    <?php
        function add4($x,$y)
        {
        $total=$x/$y;
        return $total;
        }

        echo "20 : 5 = " . add4(20,5);
        echo "<br>";
    ?>
    <br>
    <li>fungsi 5 - Pangkat</li>
    <?php
        function add5($x)
        {
        $total=$x*$x;
        return $total;
        }

        echo "Pangkat 3 = " . add5(3);
    ?>