Pemrograman Web - Client Side Javascript
13
-
Upload
kuliahkita -
Category
Engineering
-
view
122 -
download
0
description
Materi pemrograman web di KuliahKita yang membahas aplikasi javascript yang berjalan di sisi klien http://kuliahkita.com/kelas/pengembangan-web/
Transcript of Pemrograman Web - Client Side Javascript
Pendahuluan
Javascript dapat mengatur document object yang merupakan bagian dari halaman yang sedang ditampilkan (window browser atau frame)
Contoh:- window.document
Document Object
Document object dapat diambil dengan berbagai cara:● id : getElementById(id)● tag : getElementByTagName(tag)● class : getElementByClassName(class)
HTMLDocument diturunkan dari Document● body, forms, anchors, images, links● title, lastModified, referrers● dll
Javascript Sebagai Event Handler
Sebagai event handler, javascript didefinisikan pada element HTML tertentu sehingga dapat menjalankan event sesuai aksi yang didefinisikan:→ onClick(), onMouseDown(), onMouseUp(), onChange, onLoad()
Contoh:<input type="checkbox" name="options” value="giftwrap" onclick="giftwrap = this.checked;" >
Manipulasi DOM dengan EventHTML Javascript
<p>Mari belajar di KuliahKita!</p>
<p class=”namaKelas”> Belajar di KuliahKita sangat menyenangkan</p>
<p id=”namaId”> Ayo ajak teman-temanmu belajar di KuliahKita.</p>
<button onclick=”fungsi1()”>tombol 1</button><button onclick=”fungsi2()”>tombol 2</button><button onclick=”fungsi3()”>tombol 3</button>
function fungsiKu(){ // mengubah isi sebuah tag // diberikan [0] untuk mengambil tag pertama yang ditemukan var x = document.getElementsByTagName("p")[0]; x.innerHTML = "Halo Dunia!";}function fungsiKu2(){ // mengubah style var x = document.getElementsByClassName("namaKelas")[0]; x.style.color = "red";}function fungsiKu3(){ // mengubah style // tidak perlu pakai [0] karena id harus unik var x = document.getElementById("namaId"); x.style.color ="blue";}
Javascript sebagai URL
Selain manipulasi DOM, Javascript dapat juga dieksekusi sebagai link URL berdasarkan event tertentu● javascript:alert(“Hello World!”)● javascript:var now = new Date(); “<h1>This time is: </h1>”+ now;
Untuk menghindari link javascript mengubah current page yg ditampilkan, tambahkan void 0 di akhir● javascript:window.open("about:blank"); void 0;
○ fungsi ini akan membuka window baru dengan link yang didefinisikan pada parameter “open”
Bookmarklet
Fungsi client side javascript yang lainnya adalah URL yang dapat disimpan sebagai bookmark, disebut sebagai bookmarklet
<a href='javascript:var e="", r=""; do{e=prompt("Expression: "+e+"\n"+r+"\n",e); try{r="Result: "+eval(e); }catch(ex){r=ex; }} while(e);void 0;'> JS Evaluator</a>
Eksekusi Javascript pada HTML
Ketika elemen yang berisi script telah dimuat browser, Javascript segera dieksekusi untuk melakukan operasi yang didefinisikan.
Untuk menunda eksekusi javascript, dapat digunakan atribut defer, atau membuat script sebagai fungsi yang dipanggil via atribut onload dari elemen body
Javascript Threading Model
Eksekusi javascript berjalan secara sekuensial, single thread model.
Proses sekuensial ini disarankan memuat script yang ringan.
Karena ketika proses memuat dokumen HTML dan sampai pada eksekusi dari script, proses memuat akan dihentikan sampai script selesai dieksekusi. Apabila proses event-handler dari javascript sangat berat dan lama, dapat mebuat browser freeze
W3C DOMDokumen HTML dapat diakses via javascript melalui DOM<html>
<head>
<title>Sample Document</title>
</head>
<body>
<h1>An HTML Document</h1>
<p>This is a <i>simple</i>
document. </p>
</body>
</html>
W3C DOM<p><strong>Hello</strong> how are you doing? </p>
Timer pada javascript umumnya digunakan untuk membuat efek animasi dan tampilan.<script>
var WastedTime = {
start: new Date(),
displayElapsedTime: function( ) {
var now = new Date( );
var elapsed = Math.round((now - WastedTime.start)/60000);
window.defaultStatus = "You have wasted " + elapsed + "
minutes."; }
}
setInterval(WastedTime.displayElapsedTime, 60000);
</script>
Timers
Forms
Form pada suatu halaman situs juga dapat diakses melalui javascript dengan menggunakan document.forms[]
Pada objek form ini terdapat method submit() dan reset() yang sama fungsinya seperti tipe input di HTML
Javascript dapat dipanggil dari form via event:– onsubmit, onreset
