MODUL II, WEB 2

JAVASCRIPT : PENGENALAN
A.   TUJUAN
a.      Agar mahasiswa dapat mengenal dan mengerti bebrapa sintax javascript.
b.      Agar mahasiswa dapat mengenal metode – metode yang ada dijavascript.
B.   PEMBAHASAN                                                                                                                                                                       
Javascript adalah bahasa script yang ditempelkan pada kode HTML dan diproses pada sisi client.
Pembahasan praktikum :
Input.html
      
             

Contoh Penggabungan PHP dan JS

             

              NIM    : />
              Nama   : />
              <input type="submit" value="Kirim” />
             

      
Pembahasan program:
©        menandakan bahwa kode yang terdapat didalamnya adalah kode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML. Bagian yang terdapat dalam dan umumnya terbagi atas kepala dan badan.
©        merupakan bagian badan dalam dokumen HTML.
©       

Contoh Penggabungan PHP dan JS

digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen yaitu Contoh Penggabungan PHP dan JS.

©     

digunakan untuk membuat formulir dengan nama f1 dan menentukan URL yang akan diproses atau dijalankan oleh dan menerima semua masukan dari formulir yaitu validjs.php. Jika action tidak disebutkan, informasi akan dikirim ke URL yang sama dengan halaman Web itu sendiri.method=”POST digunakan untuk menentukan bagaimana informasi dikirim ke URL yang disebutkan dalam ACTION. Dalam praktikum kali ini kita menggunakan method get. Post  akan membuat informasi dikirimkan secara terpisah dengan URL.

©      NIM    : /> digunakan untuk membuat judul NIM dan  menentukan tipe masukan yaitu berupa teks, name=’nimdigunakan untukmenentukan nama data yaitu nim, size=’5digunakan untuk  menentukan ukuran kotak masukan yang tertampil yaitu 5, maxlength=’5  digunakan untuk menentukan jumlah karakter yang dapat dimasukkan dalam kotak teks yaitu 5. digunakan untuk ganti baris / pindah baris.
©        Nama   : /> digunakan untuk membuat judul Nama dan  menentukan tipe masukan yaitu berupa teks, name=’namadigunakan untuk menentukan nama data yaitu nama,
digunakan untuk ganti baris / pindah baris.
©        <input type="submit" value="Kirim” /> menentukan tipe masukan yaitu berupa tombol submit , value=’Kirimdigunakan untuk  menentukan nilai awal pada kotak masukan yaitu Kirim.      
Hasil output :
Validjs.php
       $nim  = $_POST[‘nim’];
       $nama = $_POST[‘nama’];
       $pesan_error =”;
       if (strlen(trim($nim)) !=5) $pesan_error .= ‘NIM harus
       5 digit \\n’;
       if (strlen(trim($nama)) == 0) $pesan_error .= ‘Nama
       Harus Diisi! ‘;
       if (!empty($pesan_error)) {
       $pesan_error = “Ada kesalahan!\\n”.$pesan_error;
       $pesan_error = “‘$pesan_error'”;
       echo “
      

              alert($pesan_error);

       history.back();

      

       “;
       exit;
       }
      
       echo “

Data Telah Tersimpan

“;

       echo “
";




       echo "


       NIP    :
$nim


       NAMA   :
$nama ";


       echo "

“;

       echo “

Isi Data Lagi
“;

?>
Pembahasan program :
©      merupakan kode yang sebenarnya disebut dengan skrip PHP, kode tersebut digunakan untuk mengawali script PHP.
©        $nim          = $_POST[‘nim‘]; merupakan perintah variable nim dengan method POST artinya informasi yang dikirim dari form dengan method POST tidak nampak sebagai parameter url.
©        $nama         = $_POST[‘nama‘]; merupakan perintah variable nama dengan method POST artinya informasi yang dikirim dari form dengan method POST tidak nampak sebagai parameter url.
©        $pesan_error=””; merupakan perintah variable pesan_error.
©        if (strlen(trim($nim)) !=5) $pesan_error .= ‘NIM harus 5 digit \\n’; digunakan untuk menghitung jumlah karakter dalam string dan untuk menghapus spasi dikiri dan kanan teks / diawal dan akhir dalam variable nim yang bernilai tidak sama dengan 5 dan memberikan pesan_error ‘NIM harus 5 digit. \n digunakan untuk karakter baris baru.
©        if (strlen(trim($nama)) == 0) $pesan_error .= ‘Nama Harus Diisi! ‘; digunakan untuk menghitung jumlah karakter dalam string dan untuk menghapus spasi dikiri dan kanan teks / diawal dan akhir dlama variable nama yang bernilai 0 dan memberikan pesan_error ‘Nama Harus Diisi!.
©        if (!empty($pesan_error)) digunakan untuk mengecek apakah variable pesan_error berisi string atau tidak..
©        $pesan_error = “Ada kesalahan!\\n”.$pesan_error; merupakan perintah variable pesan_error yang digunakan untuk memberikan pesan_error Ada kesalahan. \n digunakan untuk karakter baris baru
©        $pesan_error = “‘$pesan_error'”; merupakan perintah variable pesan_error yang berisi variable pesan_error.
©        echo ” merupakan perintah keluaran untuk php.
©        merupakan kode untuk mengawali javascript.

©        alert($pesan_error); menampilkan kotak pesan yang berisi keterangan error dari variable pesan_error.

©        history.back();history menyatakan array yang berisi data – data URL yang pernah dikunjungi dlaam sebuah sesi, back()memuat URL sebelum URL sekarang yang berada dalam jendela pada level teratas.

©        merupakan kode untuk mengakhiri javascript.

©        exit; merupakan perintah untuk keluar.
©        echo “

Data Telah Tersimpan

“; merupakan perintah keluaran untuk  membuat  judul dengan nama Data Telah Tersimpan.

digunakan untuk membuat judul.

©        echo “
"; merupakan perintah
keluaran untuk menampilkan teks sesuai dengan format aslinya yaitu





©       
NIP    : $nim artinya NIM isinya diambil dari variable nim.


©       
NAMA   : $nama
";
artinya NAMA isinya diambil dari variable nama.


©       
echo "

Isi Data Lagi

"; merupakan perintah
keluaran untuk ganti paragraph dan membuat link dengan nama Isi Data Lagi yang
akan menuju kefile sisdata.php





©     
?> kode
yang digunakan untuk mengakhiri script PHP
.





Hasil
output :





<!--[if gte vml 1]><v:shape
id="_x0000_i1026" type="#_x0000_t75" style='width:261pt;height:231pt'>
<v:imagedata src="file:///C:\Users\De\AppData\Local\Temp\msohtmlclip11\clip_image003.png"
o:title=""/>
<![endif]-->





Apabila
diklik kirim maka hasilnya:











Apabila
NIM tidak diisi, NIM kurang dari 9 digit, Nama tidak diisi, maka hasilnya :








<!--[if gte vml 1]><v:shape id="Picture_x0020_32"
o:spid="_x0000_i1027" type="#_x0000_t75" style='width:244.5pt;height:90.75pt;
visibility:visible'>
<v:imagedata src="file:///C:\Users\De\AppData\Local\Temp\msohtmlclip11\clip_image005.png"
o:title=""/>
<![endif]-->








Coba.php







<span lang="EN-GB" style="font-size:
9.0pt">

<!– agar
script tak terlihat bagi browser yang tak mendukung js

 document.write(“

Welcome
Screen…


“);

 document.write(“Hallo”);

 document.write(“Selamat Datang”);

 document.write(“

");

 document.writeln(“Di Kampus”);

 document.write(“STMIK AKAKOM”);

 document.write(“”);

 document.write(“Yogyakarta
Indonesia”);

 //–>

 

Pembahasan program:
©        menandakan bahwa kode yang terdapat didalamnya adalah kode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML. Bagian yang terdapat dalam dan umumnya terbagi atas kepala dan badan.
©        merupakan bagian badan dalam dokumen HTML.
©        merupakan kode untuk mengawali javascript.

©        <!– agar script tak terlihat bagi browser yang tak mendukung js merupakan komentar.

©      document.write(“

Welcome Screen…

“); digunakan untuk menampilkan suatu tulisan dihalaman web document yaitu Welcome Screen yang sekaligus sebagai judul dalam badan dokumen.

digunakan untuk membuat judul dalam badan dokumen.
digunakan untuk ganti baris / pindah baris.

©        document.write(“Hallo”); digunakan untuk menampilkan suatu tulisan dihalaman web yaitu Hallo.

©        document.write(“Selamat Datang”); digunakan untuk menampilkan suatu tulisan dihalaman web yaitu Selamat Datang.

©        document.write(“

");

<span lang="IN" style="font-family:
“Calibri”,”sans-serif”;mso-bidi-font-family:”Times New Roman”;mso-ansi-language:
IN”>digunakan untuk<span style="font-family:"Calibri","sans-serif";
mso-bidi-font-family:”Times New Roman”;mso-ansi-language:EN-US”> menampilkan
suatu tulisan dihalaman web<span style="font-family:"Calibri","sans-serif";
mso-bidi-font-family:”Times New Roman”;mso-ansi-language:IN”> <span style="font-family:"Calibri","sans-serif";mso-bidi-font-family:"Times New Roman";
mso-ansi-language:EN-US”>untuk menampilkan teks sesuai dengan format aslinya<span lang="EN-GB" style="font-size:9.0pt;font-family:"Calibri","sans-serif";
mso-bidi-font-family:”Courier New””>

<p class="MsoNormal" style="margin-left:.5in;text-align:justify;text-indent:-.25in;
mso-list:l3 level1 lfo1″>
<span lang="EN-GB" style="font-size:9.0pt;font-family:Symbol;mso-fareast-font-family:Symbol;
mso-bidi-font-family:Symbol”>©       
<span lang="EN-GB" style="font-size:9.0pt;
font-family:”Courier New””>document.writeln(“Di Kampus”); <span lang="IN" style="font-family:
“Calibri”,”sans-serif”;mso-bidi-font-family:”Times New Roman”;mso-ansi-language:
IN”>digunakan untuk<span style="font-family:"Calibri","sans-serif";
mso-bidi-font-family:”Times New Roman”;mso-ansi-language:EN-US”> menampilkan
suatu tulisan dihalaman web yaitu Di Kampus.<span lang="EN-GB" style="font-size:9.0pt;font-family:"Calibri","sans-serif";mso-bidi-font-family:
“Courier New””>
<p class="MsoNormal" style="margin-left:.5in;text-align:justify;text-indent:-.25in;
mso-list:l3 level1 lfo1″>
<span lang="EN-GB" style="font-size:9.0pt;font-family:Symbol;mso-fareast-font-family:Symbol;
mso-bidi-font-family:Symbol”>©       
<span lang="EN-GB" style="font-size:9.0pt;
font-family:”Courier New””>document.write(“STMIK AKAKOM”); <span lang="IN" style="font-family:
“Calibri”,”sans-serif”;mso-bidi-font-family:”Times New Roman”;mso-ansi-language:
IN”>digunakan untuk<span style="font-family:"Calibri","sans-serif";
mso-bidi-font-family:”Times New Roman”;mso-ansi-language:EN-US”> menampilkan
suatu tulisan dihalaman web yaitu STMIK AKAKOM<span lang="EN-GB" style="font-size:9.0pt;font-family:"Calibri","sans-serif";mso-bidi-font-family:
“Courier New””>
<p class="MsoNormal" style="margin-left:.5in;text-align:justify;text-indent:-.25in;
mso-list:l3 level1 lfo1″>
<span lang="EN-GB" style="font-size:9.0pt;font-family:Symbol;mso-fareast-font-family:Symbol;
mso-bidi-font-family:Symbol”>©       
<span lang="EN-GB" style="font-size:9.0pt;
font-family:”Courier New””>document.write(“”); digunakan untuk menampilkan suatu tulisan dihalaman web untuk menampilkan teks sesuai dengan format aslinya

©      document.write(“Yogyakarta
Indonesia”);
digunakan untuk menampilkan suatu tulisan dihalaman web yaitu Yogyakarta, kemudian ganti baris lalu menampilkan tulisan dihalaman web yaitu Indonesia.
digunakan untuk ganti baris / pindah baris.

©        merupakan kode untuk mengakhiri javascript.

Hasil output:

 

 

Coba1.php

      

       <!–

       // penggunaan variable

       var angka1=10, angka2=5;

       var hasil = angka1 + angka2;

       document.write(angka1+” tambah “+angka2+” = “+hasil+”
“);

       document.write(angka1+” tambah “+angka2+” = “+(angka1+angka2)+”
“);

       //operasi aritmatika pada string

       var a=”5″, b=”7″;

       c = a + b;

       document.write(a+” tambah “+b+” = “+c+”
“);

       d = parseInt(a) + parseInt(b);

       document.write(a+” tambah “+b+” = “+d+”
“);
             

       var a=”10.5″, b=”7.2″;

       c = a + b;

       document.write(a+” tambah “+b+” = “+c+”
“);

       d = parseFloat(a) + parseFloat(b);

       document.write(a+” tambah “+b+” = “+d+”
“);

    //–>

   
   
Pembahasan program:
©        menandakan bahwa kode yang terdapat didalamnya adalah kode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML. Bagian yang terdapat dalam dan umumnya terbagi atas kepala dan badan.
©        merupakan bagian badan dalam dokumen HTML.
©        merupakan kode untuk mengawali javascript.

©      var angka1=10, angka2=5;merupakan deklarasi variable angka1 =10 dan angka2 =5.

©      var hasil = angka1 + angka2;merupakan deklarasi variable hasil yaitu angka1 + angka2 artinya 10+5

©      document.write(angka1+” tambah “+angka2+” = “+hasil+”
“);
digunakan untuk menampilkan suatu tulisan dihalaman web document yaitu angka1 ditambah angka2 = hasil artinya 10 tambah 5=15.
digunakan untuk ganti baris / pindah baris.

©      document.write(angka1+” tambah “+angka2+” = “+(angka1+angka2)+”
“);
digunakan untuk menampilkan suatu tulisan dihalaman web document yaitu angka1 ditambah angka2 artinya 10 tambah 5.
digunakan untuk ganti baris / pindah baris.

©      var a=”5″, b=”7″; merupakan deklarasi variable a=5 dan b=7

©      c = a + b; merupakan deklarasi variable c= a+b yaitu 5+7

©      document.write(a+” tambah “+b+” = “+c+”
“);
digunakan untuk menampilkan suatu tulisan dihalaman web document yaitu a tambah b=c artinya 5+7=12 .
digunakan untuk ganti baris / pindah baris.

©      d = parseInt(a) + parseInt(b);merupakan deklarasi variable d= variable a + b dan akan dkonversikan ketipe data numeric berbentuk bilangan bulat/integer.

©      document.write(a+” tambah “+b+” = “+d+”
“);
digunakan untuk menampilkan suatu tulisan dihalaman web document yaitu a tambah b=d.
digunakan untuk ganti baris / pindah baris.

©      var a=”10.5″, b=”7.2″;merupakan deklarasi variable a=10,5 dan b=7,2

©        c = a + b; merupakan deklarasi variable c=a+b

©      document.write(a+” tambah “+b+” = “+c+”
“);
digunakan untuk menampilkan suatu tulisan dihalaman web document yaitu a tambah b = c .
digunakan untuk ganti baris / pindah baris.

©        d = parseFloat(a) + parseFloat(b); merupakan deklarasi variable d= variable a + b dan akan dikonversikan ketipe data Float / pecahan.

©      document.write(a+” tambah “+b+” = “+d+”
“);
digunakan untuk menampilkan suatu tulisan dihalaman web document yaitu a tambah b =d.
digunakan untuk ganti baris / pindah baris.

 

Hasil output :

    

 

 

Coba2.php

 

 <!–

 //input dan output dengan javascript

 var angka1 = prompt(“Masukkan Angka 1”);

 var angka2 = prompt(“Masukkan Angka 2”);

 var hasil = parseFloat(angka1)+parseFloat(angka2);

 window.alert(“Hasil = “+hasil);

 //–>

 

Pembahasan program:
©        menandakan bahwa kode yang terdapat didalamnya adalah kode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML. Bagian yang terdapat dalam dan umumnya terbagi atas kepala dan badan.
©        merupakan bagian badan dalam dokumen HTML.
©        merupakan kode untuk mengawali javascript.

©        var angka1 = prompt(“Masukkan Angka 1”);merupakan deklarasi variable angka1 yaitu Masukkan Angka 1

©        var angka2 = prompt(“Masukkan Angka 2”);merupakan deklarasi variable angka 2 yaitu Masukkan Angka 2

©      var hasil = parseFloat(angka1)+parseFloat(angka2);merupakan deklarasi variable hasil =variable angka1 + variable angka2 dan akan dikonversikan ketipe data Float / pecahan.

©      window.alert(“Hasil = “+hasil);untuk menampilkan kotak pesan berisi keterangan Hasil.

 

 

 

Klik Ok

 

 

Diklik Ok, maka hasilnya :

 

 

Latihan.php

   <script language="javascript"

   <!–

      var alas = prompt (“Masukkan alas”);

      var tinggi = prompt (“Masukkan Tinggi”);

      var hasil= 0.5 * parseFloat(alas) * parseFloat(tinggi);

      document.write(“Hasil = “+hasil);

      //–>

  

Pembahasan program:
©        menandakan bahwa kode yang terdapat didalamnya adalah kode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML. Bagian yang terdapat dalam dan umumnya terbagi atas kepala dan badan.
©        merupakan bagian badan dalam dokumen HTML.
©        merupakan kode untuk mengawali javascript.

©        var alas = prompt (“Masukkan alas”);merupakan deklarasi variable alas yaitu Masukkan alas.

©        var tinggi = prompt (“Masukkan Tinggi”);merupakan deklarasi variable tinggi yaitu Masukkan Tinggi

©      var hasil= 0.5 * parseFloat(alas) * parseFloat(tinggi); merupakan deklarasi variable hasil =0.5 dikali alas dikali tinggi dan akan dikonversikan ketipe data Float / pecahan.

©        document.write(“Hasil = “+hasil); digunakan untuk menampilkan suatu tulisan dihalaman web document yaitu Hasil= isi dari variable hasil

 

 

 

Diklik OK

 

 

Diklik OK, maka hasilnya :

C.    TUGAS

1.   

document.write(‘stmik \nAKAKOM \tYogyakarta’);

document.write(‘

');

<span style="font-size:9.0pt;line-height:150%;font-family:"Courier New";mso-ansi-language:
EN-US”>document.write(‘stmik \nAKAKOM \tYogyakarta’);

<span style="font-size:9.0pt;line-height:150%;font-family:"Courier New";mso-ansi-language:
EN-US”>document.write(”);

          Fungsi \n adalah merupakan karakter baris baru(memindahkan krusor ke baris berikutnya. Jadi text stmik pindah kebaris berikutnya.
          Fungsi \t adalah merupakan tab (memindahkan krusor ke tab berikutnya). Jadi Yogyakarta pindah ke tab berikutnya.
          Perbedaan script yang berada ditag
 dan yang tidak adalah apabila kita
menggunakan tag
 maka akan menampilkan text sesuai dengan format
aslinya.




D.   KESIMPULAN


Setelah kita melaksanakan praktikum modul 2 tentang
Javascript : Pengenalan maka kita dapat
mengenal
dan mengerti bebrapa sintax javascript dan kita juga dapat mengenal metode –
metode yang ada dijavascript.


E.    LISTING [terlampir]




Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s