Web java script pada html

495
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
495
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web java script pada html

  1. 1. Penggunaan JavaScript pada HTML 1. Seleksi a. Perintah If Untuk penggunaan perintah if pada HTML dengan bantuan JavaScript mempunyai ketentuan sbb. : • Setiap kondisi harus diawali dengan “(“ dan diakhiri dengan “)” • Tidak menggunakan kata ‘then’ • Jika lebih dari 1 statement untuk setiap blok statement harus diawali dengan “{“ dan diakhiri dengan “}” Contoh : <html> <body> <script language="Javascript"> var d =new Date() var time = d.getHours() if (time<10) document.write("Good Morning") </script> </body> </html> b. Perintah If …Else <html> <body> <script language="Javascript"> var d = new Date() var time = d.getHours() if (time<10) { document.write("Good Morning<br>") document.write("Selamat Pagi") } else { document.write("Good Day<br>") document.write("Selamat Siang") } </script> </body> </html> c. Perintah Nested If (HTML & PHP) <html> <body> <script language="Javascript"> var x=10 var y=10 if (x == y) document.write("X sama dengan Y") else if (x < y) document.write("X lebih kecil dari Y") else document.write("Y lebih kecil dari X") </script> </body> </html> <html> <body> <? $x=10; $y=10; if ($x == $y) echo "X sama dengan Y"; elseif ($x < $y) echo "X lebih kecil dari Y"; else echo "Y lebih kecil dari X"; ?> </body> </html> d. Perintah Switch <html> <body> <script language="Javascript"> var d = new Date() theDay = d.getDay() switch (theDay) { case 0: document.write("Hari Minggu") break 21
  2. 2. case 1: document.write("Hari Senin") break case 2: document.write("Hari Selasa") break case 3: document.write("Hari Rabu") break case 4: document.write("Hari Kamis") break case 5: document.write("Hari Jumat") break case 6: document.write("Hari Sabtu") break default: document.write("Hari Libur") } </script> </body> </html> 2. Perintah Looping a. Looping dengan for (HTML & PHP) <html> <head> </head> <body> <script language="Javascript"> for (x=0;x<=10;x++) document.write(x+"<br>") </script> </body> </html> <html> <head> </head> <body> <? for ($x=0;$x<=10;$x++) { echo "$x<br>"; } ?> </body> </html> b. Looping dengan do..while <html> <head> </head> <body> <script language="Javascript"> var x=0 do { document.write(x+"<br>") x++ } while (x <= 10) </script> </body> </html> Output Looping dengan for & do…while 22
  3. 3. c. Looping dengan while <html> <head> </head> <body> <script language="Javascript"> var x=0 while (x<=10) { document.write(x+"&nbsp;&nbsp") x++ } </script> </body> </html> Output : 3. Subprogram Subprogram pada Javascript tidak mengenal procedure, tetapi hanya function dimana kasus procedure ditangani sebagai function tanpa nilai kembali (return value). Berikut contoh procedure : <! -- js_proc.html --> <html> <head> <script language="javascript"> function myfunction() { alert("STMIK-YMI Tegal") } </script> </head> <body> <form> <input type="button" onclick="myfunction()" value="Call Function"> </form> </body> </html> Output : 23
  4. 4. Procedure dengan parameter pass by value : <! -- js_proc2.html --> <html> <head> <script language="javascript"> function myfunction(txt) { alert("Hai "+txt) } </script> </head> <body> <form> Nama <input type="text" name="vstring"> <input type="button" onclick="myfunction('Hello')" value="Call Function"> </form> </body> </html> Procedure dengan parameter pass by reference : Fungsi : Berikut ini contoh fungsi (function) dengan parameter pass by value dengan pemanggilan tak langsung atau melakukan assignment terhadap variable SUM terlebih dahulu. <! -- js_func1.html --> <html> <head> <script language="javascript"> 24
  5. 5. function total(a,b) { return(a*b) } </script> </head> <body> <script language="javascript"> sum=total(2,3) document.write(sum) </script> </body> </html> Output : 6 Berikut ini contoh fungsi (function) dengan parameter pass by reference dengan pemanggilan langsung. <! -- js_func2.html --> <html> <head> <script language="javascript"> function totalx(a,b) { return (a * b) } </script> </head> <body> <script language="javascript"> val1=window.prompt("Value 1 : ") val2=window.prompt("Value 2 : ") document.write(totalx(val1,val2)) </script> </body> </html> 4. Array (HTML & PHP) <! -- js_array1.html --> <html> <body> <script language="javascript"> var nama=new Array(3) nama[0]="Yudi" nama[1]="Amel" nama[2]="Rani" nama[3]="Heru" for (i=0;i<=3;i++) document.write(nama[i]+"<br>") </script> </body> </html> <! -- php_array1.php --> <html> <body> <h2>Demo Array</h2> <?php $nama[0]="Yudi"; $nama[1]="Amel"; $nama[2]="Rani"; $nama[3]="Heru"; foreach($nama as $value) { echo "$value "; echo "<br>"; } ?> </body> </html> <! -- js_array2.html --> <html> <body> <script language="javascript"> var nama=new Array("Yudi","Amel","Rani","Heru") x=nama.length for (i=0;i<x;i++) document.write(nama[i]+"<br>") </script> </body> </html> <! -- php_array2.php --> <html> <body> <h2>Demo Array</h2> <?php $nama=array("Yudi","Amel","Rani","Heru"); foreach($nama as $value) { echo "$value<br>"; } ?> </body> </html> 25
  6. 6. Ket : - Jika ingin tampil kesamping ubah perintah document.write(nama[i]+ "<br>") menjadi document.write(nama[i]+"&nbsp") -> HTML - Jika ingin tampil kesamping ubah perintah document.echo “$value<br>"; } menjadi “$value&nbsp"; } -> PHP 5. Alert <! -- js_alert.html --> <html> <head> <title>Contoh Alert</title> </head> <body> <script language="javascript"> alert("Hello World") </script> </body> </html> 6. Confirm <!-- js_confirm.html --> <html> <head> <title>Contoh Confirm</title> </head> <body> <script language="Javascript"> var name=confirm("Press a button") if (name==true) document.write("You Pressed OK") else document.write("You Pressed Cancel") </script> </body> </html> 7. Prompt <!-- js_prompt.html --> <html> <head> <title>Contoh Prompt</title> </head> <body> <script language="Javascript"> var name=prompt("Masukkan Nama Anda","") if (name !=null && name !="") document.write("Hello "+name) </script> </body> </html> 26
  7. 7. DAFTAR TABEL Fungsi Tag pada HTML Tag-Tag Umum pada HTML Tag Keterangan <html>….</html> Tag untuk mengapit halaman HTML <head>….</head> Tag berisi informasi umum dari halaman <title>….</title> Judul halaman (terdapat pada <head>) <body>….</body> Setting atribut untuk seluruh isi halaman <b>…..</b> Untuk menebalkan teks <i>…..</i> Untuk memiringkan teks <u>…..</u> Untuk menggaris-bawahi teks <p>….</p> Untuk membuat paragraph <font>….</font> Untuk memanipulasi huruf <br>…. Untuk pindah ke baris baru <hr>…. Untuk membuat garis horizontal <a>….</a> Untuk membuat links <table>….</table> Untuk membuat tabel Daftar atribut dari tag font Tag Keterangan Name Untuk menentukan jenis huruf yang digunakan Size Untuk menentukan ukuran huruf Color Untuk menentukan warna huruf Daftar atribut dari tag a Tag href target style class name Keterangan Ke halaman website yang akan dituju Dibuka pada window baru atau tidak Penambahan css Nama class yang dipanggil Nama dari link Daftar atribut dari tag table Tag Keterangan width Untuk mengatur lebar table (% atau pixel) height Untuk mengatur tinggi table border Untuk menentukan tebal bingkai cellpadding Menentukan jarak padding antar cell cellspacing Menentukan jarak spacing antar cell name Untuk menentukan nama table bgcolor Untuk menentukan warna background background Untuk menampilkan gambar sebagai background align Letak teks secara horizontal (rata kiri,tengah atau kanan) valign Letak teks secara vertikal (rata atas,tengah atau bawah) style Untuk css bordercolor Untuk mengatur warna bingkai Daftar atribut tag tr,th dan td Tag Keterangan height Untuk mengatur tinggi table bgcolor Untuk mengatur warna background background Untuk menampilkan gambar sebagai background align Untuk mengatur letak teks secara horizontal valign Untuk mengatur letak teks secara vertikal colspan Untuk menghilangkan sejumlah kolom rowspan Untuk menghilangkan sejumlah baris 27

×