Bloglieken: Javascript

Tampilkan postingan dengan label Javascript. Tampilkan semua postingan

Rabu, 24 Agustus 2011

Mendeteksi Resolusi Layar Monitor

11.40

alie

No comments

Kita bisa mendeteksi resolusi layar monitor kita dengan javascript, berikut adalah contoh kode programnya :

<script>
var width=screen.width;
var height=screen.height;
document.write("Your Screen Resolution "+width+"px x "+height+"px");
</script>

Mengecek Text kosong dan Format E-mail pada saat Form di Submit

15.43

alie

No comments

Ketika kita memasukkan data pada sebuah form, misalnya form pendaftaran mahasiswa tentunya ada text yang harus wajib diisi kalau text tersebut dikosongin form tidak akan melanjutkan proses penyimpanan dan akan selalu memunculkan kotak peringatan bahwa data harus dilengkapi. begitu juga dengan text yang disediakan untuk memasukkan alamat email, apabila email tidak sesuai dengan format yang sudah ditentukan maka form ketika di submit akan menampilkan kotak peringatan bahwa penulisan email tidak benar dan harus menuliskan format yang berlaku.

Cara membuat form seperti yang telah dijelaskan diatas, berikut adalah contoh kodenya :

<script language="javascript">
function cekkosong(form)
{
 ////------cek kekosongan
 if(form.txtnama.value.length==0){
  alert("Nama, harap diisi !.");
  form.txtnama.focus();
  return false;
 }
 if(form.txtalamat.value.length==0){
  alert("Alamat, harap diisi !.");
  form.txtalamat.focus();
  return false;
 }
 ////----cek format email
 var reEmail=/^.+\@.+\..+$/
 var defaultEmptyOK=false
 function isEmpty(s)
 {
  return((s==null)||(s.length==0))
 }
 function isEmail(s)
 {
  if(isEmpty(s))
   if(isEmail.arguments.length==1)
    return defaultEmptyOK;
   else
    return(isEmail.arguments[1]==true);
  else
  {
   return reEmail.test(s)
  }
 }
  
 var emaile=form.txtemail.value;
 if(!isEmail(emaile))
 {alert("Email harus valid, contoh : idemail@namaperusahaan.xxx");
 form.txtemail.focus();
 return false;
 }
}
</script>

<form action="" method="post" onSubmit="return cekkosong(this)">
<input name="txtnama" type="text" id="txtnama" size="40">
<input name="txtalamat" type="text" id="txtalamat" size="40">
<input name="txtemail" type="text" id="txtemail" size="40">
<input type="submit" name="tombol" value="Simpan" />
</form>

Popup Window dengan Javascript

20.36

alie

1 comment

Ketika kita membuat suatu aplikasi penjualan pasti ada laporan yang akan dicetak ke printer, sering kita mengeluhkan ketika di print semua halaman website ikut di print juga, kita bisa mengatasinya dengan menambahkan popup window pada laporan kita, kitika link laporan diklik popup window akan tampil dengan isi laporan dan bisa di print satu halaman kusus buat laporan.

window.open("lihat_laporan.php","Judul Popup Window","Option");

Penjelasan singkat dari sintaks di atas adalah sebagai berikut:

"lihat_laporan.php" diisi dengan file yang akan di-load pada popup window.
"Judul Popup Window" diisi dengan judul untuk Popup Window.
"Option", diisi dengan opsi-opsi popup window sesuai dengan kebutuhan Anda.

Opsi-opsi yang tersedia adalah sebagai berikut:

Option	Values	Description
location	yes\|no	Does the location bar show?
menubar	yes\|no	Does the menubar show?
scrollbars	yes\|no	Do scrollbars show?
status	yes\|no	Does the status bar show\|
titlebar	yes\|no	Does the titlebar show?
toolbar	yes\|no	Does the toolbar show?
resizable	yes\|no	Can you resize the window?
height	pixels	height of window
width	pixels	width of window
directories	yes\|no	Does the personal toolbar show?
innerHeight	pixels	specifies the inner height of window
innerWidth	pixels	specifies the inner width of window
screenX	pixels	specifies distance from left edge of screen
screenY	pixels	specifies distance from top edge of screen

Berikut adalah kodenya :
mengatur tinggi dan lebar popup window

window.open( "lihat_laporan.php?kd="+kode, "print", "status=no,menubar=no,toolbar=no,scrollbars=yes,width=800,height=400,resizable=yes" )

mengatur popup window full screen

window.open( "lihat_laporan.php?kd="+kode, "print", "status=no,menubar=no,toolbar=no,scrollbars=yes,type=fullWindow,fullscreen,resizable=yes" )

kode popup window di atas mungkin hanya satu kali tampil dalam pemanggilannya, misal kita mengklik link dua kali hanya satu window yang tampil dengan isi yang sudah disegarkan.
apabila kita menginginkan apabila link diklik berkali-kali akan muncul window berjumlah link yang diklik, contoh kodenya seperti di bawah ini. bedanya hanya pada judul popup window di beri nama "_blank".

var wnd = window.open('', '_blank', 'width=750, height=400, location=0, resizable=1, menubar=0, scrollbars=0');
 wnd.document.write('xxxxxxxxxxxxxxxxxxxxxxx');
 wnd.document.close();

Merefresh Tag Div Secara Otomatis dengan Javascript

15.08

alie

No comments

Berikut adalah script untuk merefresh tag div tanpa me-load semua halaman.
1 detik adallah 1000, 3 detik adalah 3000.
fungsi replace_html() adalah fungsi ajax yang sudah saya buat, jadi kalau kalian ingin menggunakan script di bawah ini sebelumnya harus mengerti dahulu teori ajax.

JS XML DOM

16.03

alie

No comments

XML DOM
XML Document Object Model (XML DOM) adalah sebuah standar cara mengakses dan memanipulasi dokumen XML DOM membagi dokumen XML sebagai struktur pohon (tree-structure) dengan elemen, atribut dan text yang didefinisikan sebagai node.

Sebagai dasar, perlu dipelajari terlebih dahulu tentang :

1. HTML/XHTML

2. JavaScript

3. XML

Isi XML dapat dimodifikasi, dihapus, atau ditambakan elemen baru. Elemen, teks dan atribut adalah sebuah node. Jadi, semua yang ada pada XML adalah sebuah node sehingga :

1. Seluruh dokumen adalah sebuah document node.

2. Setiap tag XML adalah element node.

3. Isi teks dalam elemen XML adalah text node.

4. Comment adalah comment node.

*******..Node Hierarchy

Semua node di dokumen XML berbentuk document tree (node tree). Masing – masing elemen, atribut, text, dll dalam documen XML merepresentasikan node dalam pohon (tree). Tree dimulai dari node document dan berlanjut ke cabang sampa ke level tree yang paling bawah.

Hubungan “parent” dan “child” digunakan untuk menerangkan hubungan diantara node. Beberapa node mungkin mempunyai child node selama node yang lain tidak mempunyai daun (leaf node).

Alasannya, data XML berbentuk tree sehingga dapat dilewati tanpa mengetahui struktur asli dan tipe data yang diisikan.

******.. Find and Access Nodes :

Untuk dapat mencari elemen yang kita inginkan dan memanipulasinya terdapat beberapa cara :

a) Menggunakan method getElementsByTagName().

b) Menggunakan properti elemen node parentNode, firstChild, dan lastChild.ses Node XML DOM

getElementsByTagName("tagName");

Method diatas adalah untuk mengakses atau mencari elemen yang kita inginkan.

Untuk penelusuran semua node menggunakan perulangan sampai habis dibutuhkan properti length.

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElemensByTagName("book");

for (var i=0;i<x.length;i++)

{

}

Penulisan

Bentuk umum :

getElementsByTagName("title")[0].
childNodes[0]nodeValue

contoh : mengakses string pada tag title

var x=getElementsByTagName("title");

for (i=0;i<x.length;i++)

{

document.write(x[i].
childNodes[0].nodeValue);

}

Output :

Basis Data

Strategic Manajement

Pemrograman Internet

Belajar XML

Mengetahui panjang NameNodeMap

getElementsByTagName("title")[0].
attributes.length

Output :

Mengambil nilai (value) dari sebuah item NameNodeMap

xmlDoc=loadXMLDoc("books.xml");

var x=getElementsByTagName("book");

for (i=0;i<x.length;i++)

{

//the attlist variable will hold a NameNodeMap

var attlist=x.item(i).attributes;

var att=attlist.getNameItem("categori");

document.write(att.value + "<br />");

}

Output :

PROGRAMING

MANAJEMEN

WEB

Parsing XML DOM (Microsoft’s)

var xmlDoc=new
ActiveXObject("Microsoft.XMLDOM");

Parsing XML DOM (Mozilla, Firefox, dan Opera)

var xmlDoc=document.implementation.
createDocument("ns","root",null);

Paramenter pertama adalah ns, mendefinisikan namespace yang digunakan untuk nama dokumen XML. Parameter kedua root, adalah elemen root XML dalam file XML. Paramenter ketiga, null, akan selalu diisi null karena belum diimplementasikan.

Ex :

var xmlDoc=document.
implementation.
createDocument("","",null);

xmlDoc.load("note.xml");

Parsing File XML – Cross Browser

Contoh berikut adalah bagaimana me-load dokumen XML “note.xml” kedalam XML parser.

XML : dom/note.xml

<heading>Reminder</heading>

<body>Jangan lupa acara malam minggu ini!</body>

</note>

HTML : dom/xml_dom01.html

<html>

<head>

var xmlDoc;

function loadXML()

{

// code for IE

if (window.ActiveXObject)

{

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async=false;

xmlDoc.load("note.xml");

getmessage();

}

// code for Mozilla, Firefox, Opera, etc.

else if (document.implementation &&

document.implementation.createDocument)

{

xmlDoc=document.implementation.
createDocument("","",null);

xmlDoc.load("note.xml");

xmlDoc.onload=getmessage;

}

else

{

alert('Your browser cannot handle this script');

}

function getmessage()

{

document.getElementById("to").innerHTML=

xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;

document.getElementById("from").innerHTML=

xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;

document.getElementById("message").innerHTML=

xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;

}

</script>

</head>

<h1>Internal Note</h1>

<b>Message:</b> <span id="message"></span>

</p>

</body>

</html>

Parsing String XML – Cross Browser

Kode berikut adalah contoh meload dan parsing sebuah string XML yang dapat dijalankan di semua browser.

HTML : dom/XML_dom02.html

<html>

<body>

var text="<note>";

text=text+"<to>Andi</to>";

text=text+"<from>Joe</from>";

text=text+"<heading>Reminder</heading>";

text=text+"<body>Jangan lupa malam Mingguan!</body>";

text=text+"</note>";

// code for IE

if (window.ActiveXObject)

{

var doc=new ActiveXObject("Microsoft.XMLDOM");

doc.async="false";

doc.loadXML(text);

}

// code for Mozilla, Firefox, Opera, etc.

else

{

var parser=new DOMParser();

var doc=parser.parseFromString(text,"text/xml");

}

// documentElement always represents the root node

var x=doc.documentElement;

document.write("<b>Text child element pertama:</b> ");

document.write(x.childNodes[0].
childNodes[0].nodeValue);

document.write("<br />");

document.write("<b>Text child element kedua :</b> ");

document.write(x.childNodes[1].
childNodes[0].nodeValue);

</script>

</body>

</html>

Menjelajah Node Tree

Contoh berikut bagaimana melakukan perulangan (loop) semua child node dari <note> dan menampilkan nama node dan nilai node (node value) dari masing – masing node.

HTML : dom/xml_dom03.html

<html>

<body>

var text="<note>";

text=text+"<to>Andi</to>";

text=text+"<from>Joe</from>";

text=text+"<heading>Reminder</heading>";

text=text+"<body>Jangan lupa malam Mingguan!</body>";

text=text+"</note>";

// code for IE

if (window.ActiveXObject)

{