MODUL II, WEB 2

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

Contoh Penggabungan PHPdan JS

             

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

      
Pembahasan program:
©        menandakan bahwakode yang terdapat didalamnya adalah kode HTML sehingga browser akanmenerjemahkan 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 dijadikansebagai judul dalam badan dokumen yaitu ContohPenggabungan PHP dan JS.

©     

digunakan untuk membuat formulir dengan nama f1 dan menentukan URL yang akan diprosesatau dijalankan oleh dan menerima semua masukan dari formulir yaitu validjs.php. Jikaaction tidak disebutkan, informasi akan dikirim ke URL yang sama dengan halamanWeb itu sendiri.method=”POST digunakan untuk menentukan bagaimanainformasi dikirim ke URL yang disebutkan dalam ACTION. Dalam praktikum kali inikita menggunakan method get. Post  akanmembuat informasi dikirimkan secara terpisah dengan URL.

©     NIM    : /> digunakan untuk membuat judul NIM dan  menentukan tipe masukan yaitu berupa teks,name=’nimdigunakanuntukmenentukan nama data yaitu nim, size=’5digunakanuntuk  menentukanukuran kotak masukan yang tertampil yaitu 5, maxlength=’5  digunakan untuk menentukan jumlah karakter yang dapatdimasukkan dalam kotak teks yaitu 5. digunakanuntuk ganti baris /pindah baris.
©       Nama   : /> digunakanuntuk membuat judul Nama dan  menentukan tipemasukan yaitu berupa teks, name=’namadigunakan untuk menentukan namadata yaitu nama,
digunakan untuk ganti baris / pindah baris.
©       <input type="submit" value="Kirim” /> menentukantipe masukan yaitu berupa tombol submit , value=’Kirimdigunakan untuk  menentukan nilai awal pada kotak masukanyaitu Kirim.      
Hasiloutput :
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 = “Adakesalahan!\\n”.$pesan_error;
       $pesan_error =”‘$pesan_error'”;
       echo “
      

              alert($pesan_error);

       history.back();

      

       “;
       exit;
       }
      
       echo “

Data TelahTersimpan

“;

       echo “
";




       echo "


       NIP    :
$nim


       NAMA   :
$nama ";


       echo "

“;

       echo “

Isi Data Lagi
“;

?>
Pembahasan program :
©      merupakan kode yang sebenarnya disebutdengan skrip PHP, kode tersebut digunakan untuk mengawali script PHP.
©       $nim          = $_POST[‘nim‘]; merupakan perintah variable nim dengan method POST artinyainformasi yang dikirim dari form dengan method POST tidak nampak sebagaiparameter url.
©       $nama         = $_POST[‘nama‘]; merupakan perintah variable nama dengan method POST artinyainformasi yang dikirim dari form dengan method POST tidak nampak sebagaiparameter url.
©       $pesan_error=””; merupakan perintah variable pesan_error.
©       if (strlen(trim($nim)) !=5) $pesan_error .= ‘NIMharus 5 digit \\n’; digunakan untuk menghitungjumlah karakter dalam string dan untuk menghapus spasi dikiri dan kanan teks /diawal dan akhir dalam variable nim yang bernilai tidak sama dengan 5 danmemberikan pesan_error ‘NIM harus 5digit. \n digunakan untuk karakter baris baru.
©       if (strlen(trim($nama)) == 0) $pesan_error .= ‘Nama HarusDiisi! ‘; digunakan untuk menghitungjumlah 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 stringatau tidak..
©       $pesan_error = “Adakesalahan!\\n”.$pesan_error; merupakan perintah variablepesan_error yang digunakan untuk memberikan pesan_error Ada kesalahan. \n digunakanuntuk karakter baris baru
©       $pesan_error = “‘$pesan_error'”; merupakan perintah variable pesan_error yang berisi variablepesan_error.
©       echo ” merupakan perintah keluaran untuk php.
©        merupakan kode untuk mengawali javascript.

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

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

©        merupakan kodeuntuk mengakhiri javascript.

©       exit; merupakan perintah untukkeluar.
©       echo “

Data TelahTersimpan

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

digunakan untukmembuat 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 bahwakode yang terdapat didalamnya adalah kode HTML sehingga browser akanmenerjemahkan sebagai dokumen HTML. Bagian yang terdapat dalam dan umumnya terbagiatas kepala dan badan.
©        merupakan bagian badan dalam dokumen HTML.
©        merupakan kode untuk mengawali javascript.

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

©     document.write(“

WelcomeScreen…

“); digunakan untuk menampilkansuatu tulisan dihalaman web document yaitu Welcome Screen yang sekaligussebagai judul dalam badan dokumen.

digunakanuntuk membuat judul dalam badan dokumen.
digunakanuntuk ganti baris / pindah baris.

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

©       document.write(“Selamat Datang”); digunakan untuk menampilkansuatu 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 untukmenampilkan teks sesuai dengan format aslinya

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

©        merupakan kodeuntuk mengakhiri javascript.

Hasiloutput:

 

 

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 bahwakode yang terdapat didalamnya adalah kode HTML sehingga browser akanmenerjemahkan sebagai dokumen HTML. Bagian yang terdapat dalam dan umumnya terbagiatas kepala dan badan.
©        merupakan bagian badan dalam dokumen HTML.
©        merupakan kode untuk mengawali javascript.

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

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

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

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

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

©     c = a + b; merupakan deklarasivariable c= a+b yaitu 5+7

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

©     d = parseInt(a) + parseInt(b);merupakandeklarasi variable d= variable a + b dan akan dkonversikan ketipe data numericberbentuk bilangan bulat/integer.

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

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

©       c = a + b; merupakan deklarasivariable c=a+b

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

©       d = parseFloat(a) + parseFloat(b); merupakandeklarasi 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 documentyaitu a tambah b =d.
digunakanuntuk ganti baris / pindah baris.

 

Hasiloutput :

    

 

 

Coba2.php

 

 <!–

 //input dan output dengan javascript

 var angka1 = prompt(“Masukkan Angka1”);

 var angka2 = prompt(“Masukkan Angka2”);

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

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

 //–>

 

Pembahasan program:
©        menandakan bahwakode yang terdapat didalamnya adalah kode HTML sehingga browser akanmenerjemahkan sebagai dokumen HTML. Bagian yang terdapat dalam dan umumnya terbagiatas kepala dan badan.
©        merupakan bagian badan dalam dokumen HTML.
©        merupakan kode untuk mengawalijavascript.

©       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);merupakandeklarasi variable hasil =variable angka1 + variable angka2 dan akandikonversikan ketipe data Float / pecahan.

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

 

 

 

Klik Ok

 

 

DiklikOk, maka hasilnya :

 

 

Latihan.php

   <script language="javascript"

   <!–

      var alas = prompt (“Masukkanalas”);

      var tinggi = prompt (“MasukkanTinggi”);

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

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

      //–>

  

Pembahasan program:
©        menandakan bahwakode yang terdapat didalamnya adalah kode HTML sehingga browser akan menerjemahkansebagai dokumen HTML. Bagian yang terdapat dalam dan umumnya terbagiatas kepala dan badan.
©        merupakan bagian badan dalam dokumen HTML.
©        merupakan kode untuk mengawalijavascript.

©       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 dikalitinggi dan akan dikonversikan ketipe data Float / pecahan.

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

 

 

 

DiklikOK

 

 

DiklikOK, 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 \nadalah merupakan karakter baris baru(memindahkan krusor ke baris berikutnya.Jadi text stmik pindah kebaris berikutnya.
         Fungsi \tadalah merupakan tab (memindahkan krusor ke tab berikutnya). Jadi Yogyakartapindah ke tab berikutnya.
         Perbedaanscript 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