Web Programming

MATERI PERKULIAHAN HTML DAN JAVASCRIPT Pertemuan Minggu 09 Oleh: Mohamad Saefudin, Skom, MMSI (Pendahuluan, Variabel, Popup
Box, Function) BASIC penulisan javascript

<html> <body> <script type="text/javascript"> ... </script> </body> </html>
Contoh:
<html> <body> <script type="text/javascript"> document.write("Belajar Javascript") </script> </body> </html>
Jenis penulisan javascript 1. Format penulisan:

<html> <head> <script type="text/javascript"> .... </script> </head>
Head section
Contoh:
<html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event") } </script> </head> <body onload="message()"> </body> </html>
http://www.w3schools.com/js/default.asp
2.
Body section Format penulisan:

<html> <head> </head> <body> <script type="text/javascript"> document.write("Tulisan ini akan tampil pada saat loding ") </script> </body> </html>
3.
External script Contoh:

<html> <head> <script src="xxx.js"></script> </head> <body> </body> </html>
Penggunaan Variabel pada Javascript Format penulisan variabel: Var namavar = value atau Namavar = value
Contoh: <html> <body> <script type="text/javascript"> var name = "Hege" document.write(name) document.write("<h1>"+name+"</h1>") </script> <p>Contoh pendeklarasian variabel dan penggunaannya</p> <p>nilai variabel akan langsung tampil</p> </body> </html>
JavaScript Popup Boxes Di dalam bahasa JavaScript kita dapat membuat kotak pesan popup. Kotak pesan dalam javascript mempunyai 3 type yaitu: 1. 2. 3. 4. Alert box Alert box with line breaks Confirm box Prompt box
Alert Box Alert box di gunakan untuk memberikan informasi pesan kepada user dan bila user yakin dengan pilihannya. Alert box ini mempunyai satu tombol OK untuk melanjutkan proses. Syntax:
alert("sometext")
Contoh:
<html> <head> <script type="text/javascript"> function disp_alert() { alert("I am an alert box!!") } </script> </head> <body> <input type="button" onclick="disp_alert()" value="Display alert box" /> </body> </html>
Alert Box and line breaks

<html> <head> <script type="text/javascript"> function disp_alert() { alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!") } </script> </head> <body> <input type="button" onclick="disp_alert()" value="Display alert box" /> </body> </html>
Confirm Box Confirm box biasanya di gunakan jika kita ingin memberikan penyataan kepada user untuk memberikan pilihan jawaban apakah akan terus di lanjutkan atau di batalkan. Kotak confirm box memberikan dua tombol pilihan kepada user berupa tombol OK dan tombol Cancel. Jika pilihan tombol OK maka halaman web akan diproses jika pilihan tombol Cancel maka halaman tidak akan diproses. Syntax:
confirm("sometext")
Contoh:
<html> <head> <script type="text/javascript"> function disp_confirm() { var r=confirm("Press a button") if (r==true) { document.write("You pressed OK!") }
else { document.write("You pressed Cancel!") } } </script> </head> <body> <input type="button" onclick="disp_confirm()" value="Display a confirm box" /> </body> </html>
Prompt Box Prompt box biasanya di gunakan untuk memberikan pesan kepada user agar user memberikan inputan sebelum halaman web itu diproses. Ketika prompt box muncul, dan user diminta untuk mengklik tombol awal yang kemudian akan muncul box yang harus di input oleh user sesuai dengan pertanyaan yang di ajukan. Setelah di input kemudian user mengklik tombol "OK" atau "Cancel". Untuk melanjutkan proses pilih tombol OK dan browser akan menampilkan hasil. Jika tombol Cancel kotak box akan kembali kosong untuk mengulang. Syntax:
prompt("sometext","defaultvalue")
Contoh:
<html> <head> <script type="text/javascript"> function disp_prompt() { var name=prompt("Please enter your name","Harry Potter") if (name!=null && name!="") {
document.write("Hello " + name + "! How are you today?") } } </script> </head> <body> <input type="button" onclick="disp_prompt()" value="Display a prompt box" /> </body> </html>
Fungsi pada JavaScript Fungsi merupakan blok kode yang akan di jalankan pada saat nama function itu jalankan oleh event tertentu atau pada saat function itu di panggil. Fungsi ini juga dapat di jalankan oleh browser pada saat loading sebuah halaman web. Function juga bisa di panggil di halaman web mana saja dengan cara kita membuat file external berupa file .JS (extention file javascrip). Yang berisi syntak javascript. File itu kita panggil pada halaman web yang yang mau sisipkan javacscript. Function dapat di definisikan di bagian <head> dan bagian <body> dari halaman web. Jika kita menginginkan script itu di panggil pada saat halaman web di load maka kita tempatkan script itu di bagian <head>
Contoh:
<html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!")
} </script> </head> <body> <form> <input type="button" value="Click me!" onclick="displaymessage()" > </form> </body> </html>
Output dari scrip di atas adalah akan muncul tombol yang harus di clik bila ingin menampilkan pesan nya. Bagaimana cara mendefinisikan sebuah Fungsi Sintak untuk membuat fungsi adalah:
function namafungsi (var1,var2,...,varX) { kode teks }
Keterangan: var1, var2, adalah variable atau nilai suatu fungsi. Nilai fungsi harus di awali dan di akhiri dengan tanda kurung kurawal. { } Bila variable, parameter atau nilai tidak ada maka tanda kurung harus tetap di gunakan.() Di sarankan untuk tidak menggunakan huruf capital pada javascript lebih baik gunakan huruf kecil semua. Untuk nama fungsi, nama variable, parameter dan lainya di sarankan untuk menggunakan huruf kecil semua. Contoh:
function prod(a,b) { x=a*b return x }
Jenis Fungsi: Bahasa Javascript mempunyai beberapa type penulisan function. Di antaranya adalah: 1. Function Basic How to call a function. 2. Function with arguments How to pass a variable to a function, and use the variable in the function. 3. Function with arguments 2 How to pass variables to a function, and use these variables in the function. 4. Function that returns a value How to let the function return a value. 5. A function with arguments, that returns a value How to let the function find the product of two arguments and return the result. Contoh Fungsi: <html> <head> <script type="text/javascript"> function myfunction() { alert("HELLO") } </script> </head> <body> <form> <input type="button" onclick="myfunction()" value="Call function"> </form> <p>Tekan tombol untuk memanggil Function.</p> </body> </html>
Contoh 1: Fungsi dengan argumen:

<html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt) } </script> </head> <body> <form> <input type="button" onclick="myfunction('Hello')" value="Call function"> </form> <p>Tekan tombol untuk memanggil function nya</p> </body> </html> Output:
Contoh 2: Fungsi dengan argumen

<html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt) } </script> </head> <body> <form> <input type="button" onclick="myfunction('Good Morning!')" value="In the Morning"> <input type="button" onclick="myfunction('Good Evening!')" value="In the Evening"> </form> <p>Pilih Tombol untuk memanggil Function nya.</p> </body> </html> Output:
Contoh fungsi dengan nilai kembalian <html> <head> <script type="text/javascript"> function myFunction() { return ("Hello, have a nice day!") } </script> </head> <body> <script type="text/javascript"> document.write(myFunction()) </script> <p>The script in the body section calls a function.</p> <p>The function returns a text.</p> </body> </html> Contoh fungis dengan nilai kembalian <html> <head> <script type="text/javascript"> function product(a,b) { return a*b } </script> </head> <body> <script type="text/javascript"> document.write(product(4,3)) </script>
<p>Script dalam bagian body memanggil fungsi dengan 2 parameter (4 and 3).</p> <p>fungsi akan memanggil kembali sesuai nilai parameter.</p> </body> </html>

Web Programming

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Programming

Uploaded by

Copyright:

Available Formats

MATERI PERKULIAHAN HTML DAN JAVASCRIPT Pertemuan Minggu 09 Oleh: Mohamad Saefudin, Skom, MMSI (Pendahuluan, Variabel, Popup

Box, Function) BASIC penulisan javascript

Jenis penulisan javascript 1. Format penulisan:

Body section Format penulisan:

External script Contoh:

Alert Box and line breaks

Contoh 1: Fungsi dengan argumen:

Contoh 2: Fungsi dengan argumen

You might also like