Arsip Tag: Javascript

Membuat Expand-Collapse Toggle Element Div

Kali ini saya akan menunjukan cara membuat Expand-Collapse Toggle Element Div.
Berikut ini tampilannya pada saat kondisi expand div, content div akan show.

Jika kita click icon collapse maka content div akan hide seperti tampilan berikut ini.

Pertama kita siapkan coding HTML sebagai berikut:

<body>
Click collapse/expand image to toggle the content below.
<div id="headerDiv">
	<a id="imgHeader" href="javascript:toggle('myContent','imgHeader');">
	<img title="Collapse" alt="" src="collapse.png" border="0" /></a>
<div id="titleText">Demo Toggle Element Div</div>
</div>
<div style="clear: both;"></div>
<div id="contentDiv">
<div id="myContent" style="display: block;">
<ul>
	<li>This is line one of the content.</li>
	<li>This is line two of the content.</li>
	<li>This is line three of the content.</li>
</ul>
</div>
</div>
<div style="clear: both;"></div>
This is the demo of collapse/expand element.
</body>

Kemudian kita berikan sentuhan presentasi dengan CSS berikut:

<style type="text/css">
#headerDiv, #contentDiv {float:left;width:510px;}
#headerDiv a {float:right;margin:10px 10px 5px 5px;}
#myHeader {font-size:1.1em;font-weight:bold;margin:5px;float:left;}
#titleText {font-size:1.3em;font-weight:bold;margin:8px;}
#headerDiv {background-color:#a0a0a0;color:#ffffff;}
#contentDiv {background-color:#f0f0f0;}
#myContent {margin:1px;}
</style>

Icon berupa image expand.png dan collapse.png bisa Anda buat sendiri dengan dengan print screen di MS Paint.
Ketika user click icon collapse maka #contentDiv akan dibuat hidden oleh Javascript.
Begitu juga ketika user click icon expand maka #contentDiv akan dibuat show oleh Javascript.
Berikut ini coding javascriptnya:

<script type="text/javascript">
function toggle(showHideDiv, switchImgTag) {
	var ele = document.getElementById(showHideDiv);
	var imageEle = document.getElementById(switchImgTag);
	if(ele.style.display == "block") {
		ele.style.display = "none";
		imageEle.innerHTML = '<img src="expand.png" title="Expand" border=0>';
	}
	else {
		ele.style.display = "block";
		imageEle.innerHTML = '<img src="collapse.png" title="Collapse" border=0>';
	}	
} 
</script>

Saya sudah mencobanya dan berhasil dengan baik. Selamat mencoba.

Read Write File Dengan JavaScript

Tinggalkan Balasan

Read Write File dengan JavaScript

JavaScript bekerja di client web browser. Program berikut ini adalah contoh operasi read & write file dengan menggunakan ActiveXObject yang ada di JavaScript. ActiveXObject ini hanya bekerja di browser Microsoft Internet Explorer (IE).

Pertama kita sediakan form berisi field textarea1 dan input textbox1 serta sebuah input button. Field textarea1 digunakan untuk menampilkan content dari file dan field input textbox1 digunakan untuk memasukan text ke dalam file bernama chat.txt.
Ketika input text dimasukan lalu tekan tombol enter atau tombol Post maka text akan JavaScript akan menulis ke dalam file chat.txt lalu membacanya dan ditampilkan ke textarea.

<body>
<h2>Chat History</h2>
<form name="form1">
<textarea name="textarea1" id="textarea1" rows="10" cols="50"> </textarea> <br><br>
Say: <input type="text" name="textbox1" onKeyPress="return handleKeyPress(this,event)">
<input type="Button" value="Post" onClick='SayIt()'>
</form>
</body>

Berikut ini coding JavaScriptnya. Ada 2 fucnction yaitu SayIt() dan handleKeyPress(myfield,e). Function SayIt() akan melakukan proses read write file dan function handleKeyPress(myfield,e) untuk menangani input tombol enter pada field textbox1.

function SayIt()
{	var SayDateTime = new Date();
	var fso = new ActiveXObject("Scripting.FileSystemObject");
	var flp = fso.OpenTextFile("D:\\chat.txt", 8,false);
	var valtextbox1 = document.form1.textbox1.value;
	flp.WriteLine(SayDateTime);
	flp.WriteLine(valtextbox1);
	flp.Close();
	var flp = fso.OpenTextFile("D:\\chat.txt", 1, true);
	FileContents = flp.ReadAll();
	document.form1.textarea1.value=FileContents;
	var textarea = document.getElementById('textarea1');
	textarea.scrollTop = textarea.scrollHeight;
	document.form1.textbox1.value = "";
	flp.Close();
}
function handleKeyPress(myfield,e)
{	var keycode;
	if (window.event) keycode = window.event.keyCode;
	else if (e) keycode = e.which;
	else return true;
	if (keycode == 13)
	{	SayIt();
		return false;
	}
	else return true;
}

Coding ini hanya memberikan gambaran cara kerja ActivexObject dalam JavaScript yang berlaku di Microsoft Internet Explorer.
Jika Anda ingin menggunakannya di server sebagai aplikasi chating atau shutbox, tentu harus menggunakan script yang bekerja di server, seperti ASP atau PHP.

Membaca Informasi Browser Dengan JavaScript

Tinggalkan Balasan

Browser Info

Ada kalanya kita ingin mendapatkan informasi web browser apa yang digunakan oleh user, apakah IE, Mozilla Firefox, Chrome, atau Opara. Dengan object navigator yang disediakan oleh JavaScript, kita dapat membuat coding untuk men-deteksi web browser apa yang digunakan oleh user.

Berikut ini coding HTML dan Javascript selengkapnya.

<html>
<body>
<div id="example"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ 
	var ffversion=new Number(RegExp.$1) 
	document.write("You're using Firefox " + ffversion) 
}
else if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ 
	var ieversion=new Number(RegExp.$1) 
	document.write("You're using IE " + ieversion)
}
else if (/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ 
	var oprversion=new Number(RegExp.$1) 
	document.write("You're using Opera " + oprversion)
}
else if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ 
	var chromeversion=new Number(RegExp.$1) 
	document.write("You're using Chrome " + chromeversion)
}
else
	document.write("Browser name is unknown.")
</script>
</body>
</html>

Kita dapat mengembangkan coding ini untuk mendeteksi browser lainnya, seperti Safari. Kita juga dapat memodifikasi coding ini untuk berjalan di server dan menyimpan informasi browser yang digunakan oleh user di database.

Membuat Validasi Tanggal Dengan JavaScript

Tinggalkan Balasan

Jika kita ingin mendapatkan informasi tanggal dari user kita dapat membuat sebuah field untuk diisi oleh user dengan format tanggal tertentu, seperti pada gambar berikut ini:

Form dengan field tanggal

Kita berikan petunjuk format pengisiannya: dd/mm/yyyy, misalnya: input 17/8/1945 untuk 17 Agustus 1945. Jika user memasukan tanggal yang salah, misalnya 8/17/1945, maka ketika form disubmit kita dapat menampilkan alert “Invalid Date Format. Please correct and submit again.”

Berikut ini coding HTML-nya.

<body>
<form name="formTes" action="tesform.html" method="get"  onsubmit="return cekData();">
<table>
<tr><td>Nama:</td><td><input type="text" name="nama"
maxlength="35" size="35" /></td>
<tr><td>Alamat:</td><td><input type="text" name="alamat"
maxlength="60" size="60" /></td>
<tr><td>Kota:</td><td><input type="text" name="kota" value=""
maxlength="20" size="20" /></td>
<tr><td>Kode Pos:</td><td><input type="text" name="kodepos"
maxlength="5" size="6" /></td>
<tr><td>Tgl Lahir:</td><td><input type="text" name="lahir" /> <b>Valid date format:</b> dd/mm/yyyy</td>
<tr><td>e-mail:</td><td><input type="text"
name="email" /></td>
<tr><td colspan="2"><input name="kirim" type="submit" value="Kirim" />
<button type="submit" name="button1" onclick="confirm_clear();">Clear</button>
</td></tr>
</table>
</form>
</body>

Validasi dapat diberikan pada saat tombol submit dengan event onclick pada formTes akan di-check apakah field tanggal lahir telah diisi dengan benar.

Berikut ini coding JavaScript untuk validasi field tanggal lahir:

function checkdate()
{    var validformat=/^\d{2}\/\d{2}\/\d{4}$/ //Basic check for format validity
var returnval=false
if (!validformat.test(formTes.lahir.value))
alert("Invalid Date Format. Please correct and submit again.")
else
{     //Detailed check for valid date ranges
var dayfield=formTes.lahir.value.split("/")[0]
var monthfield=formTes.lahir.value.split("/")[1]
var yearfield=formTes.lahir.value.split("/")[2]
var dayobj = new Date(yearfield, monthfield-1, dayfield)
if ((dayobj.getMonth()+1!=monthfield)||(dayobj.getDate()!=dayfield)||(dayobj.getFullYear()!=yearfield))
alert("Invalid Day, Month, or Year range detected. Please correct and submit again.")
else
returnval=true
}
if (returnval==false) formTes.lahir.select()
return returnval
}

Untuk mencobanya silakan download full script in PDF, select all (Ctrl+A) copy paste ke notepad save as html.

Coding Website

Mari Mencoba Pemrograman Web

Arsip Tag: Javascript

Membuat Expand-Collapse Toggle Element Div

Read Write File Dengan JavaScript

Membaca Informasi Browser Dengan JavaScript

Membuat Validasi Tanggal Dengan JavaScript