Read, With the Name of Your Lord Who Created

Archive for February, 2008

Sliding Div Using Javascript

Posted by triaslama on February 28, 2008

Javascript is useful, and in this post I will try to reveal the power of setTimeout one of the method of window object. This method allow us to execute a function after a specified time (in milliseconds). We will make a div element that can be collapsed or expanded dynamically by hitting a button, so lets start.

Consider we have html page with a div element and a collapse/expand button inside it. The div element contains three buttons (each button will produce an alert, confirm, and prompt box respectively). The collapse/expand button expand / collapse the div element depends on the status of div element itself. Below is the screen shoot of our simple page:


I hope the picture is self explanatory, by clicking the collapse button the div element will degrade and finally disappear. After the div element disappear the Collapse button will changed with Expand button. Clicking the expand button will show our div and it will expand dynamically until a specified size.

Clicking one of three buttons inside div element will produce an alert or confirm or prompt box depends on what button we are clicked.

So lets jump to the code! I split the code into two pieces -Html file (SlidingDiv.htm) and Javascript file (SlidingDiv.js)-. Here the HTML code:

<title>Sliding Div HTML</title>
<script lang="javascript" type="text/javascript" src="slidingdiv.js">
<div id="targetDiv" style="width:500px;height:250px;background-color:gainsboro; ">
<center style="font-weight:bold" >Target Div</center>
<input type="button" id="btnAlert" onclick="showAlert()" value="Alert" />
<input type="button" id="btnConfirm" onclick="showConfirm()" value="Confirm" />
<input type="button" id="btnPrompt" onclick="showPrompt()" value="Prompt" />
<input type="button" id="btnExpandCollapse" onclick="slideHandler()" />

The above code simply produce an output like the screen shoot picture. Please notice that the code refers to a Javascript file named slidingdiv.js. And this is the Javascript code:

var status;
var height;
var max;
var min;

// Initialize our variables here
window.onload = function(){
var temp = document.getElementById("targetDiv").style.height;
height = parseInt(temp);
status = 1;
max = height;
min = 60;
document.getElementById("btnExpandCollapse").value = "Collapse";

function slideHandler()
if (status==0) {
status = 1;
else {
status = 0;

function collapse()
if (height>min) {
height -= 1;
document.getElementById("targetDiv").style.height = height;
document.getElementById("btnExpandCollapse").disabled = true;
window.setTimeout("collapse()", 1);
else {
document.getElementById("targetDiv").style.visibility = "hidden";

function expand()
if (document.getElementById("targetDiv").style.visibility == "hidden")
document.getElementById("targetDiv").style.visibility = "visible";
if (height<max){
height += 1;
document.getElementById("targetDiv").style.height = height;
document.getElementById("btnExpandCollapse").disabled = true;
window.setTimeout("expand()", 1);
else {

function setButtonValue(val)
document.getElementById("btnExpandCollapse").value = val;
document.getElementById("btnExpandCollapse").disabled = false;

function showAlert()

function showConfirm()

function showPrompt()
window.prompt("Prompt: ");

The Javascript code start with variables initialization, and the initialization accomplished inside anonymous function that passed in window.onload. The window.onload happen when html element has finished to be rendered.

There are several variables that need to be initialized. Status variable indicate the ‘div’ element status, if status=1, ‘div’ element is visible and value of expand/collapse button is ‘Collapse’. If status=0 ‘div’ element is hidden and value of expand/collapse button is ‘Expand’. Temp variable holds the height of ‘div’ element. After the value of temp parsed to integer its value preserve in height variable. Don’t forget to parse the value that retrieved from height property of targetDiv to integer, because this value actually not a number! So parse this value to integer first to make it work!

Function slideHandler() called every time we clicked expand/collapse button, if status is ‘0’ the ‘div’ will be expanded and status changed to 1. If status=1 ‘div’ element will be collapsed and status changed to 0.

Function collapse() will collapse ‘div’ element with the sliding effect, then if the height<min we set the visibility of div element to ‘hidden’. Function expand() will expand ‘div’ element with the sliding effect, but first we need to set visibility of ‘div’ element to ‘visible’. Actually what makes the sliding effect work is the window.setTimeout() function!

window.setTimeout() receives two parameter, first parameter is the name of function that will be executed after a specified delay of time, second parameter is delay of time (in milliseconds). In our case window.setTimeout() called inside expand() and collapse() function.

Inside collapse() function the value of height variabel decrement by one and its value send to height property of ‘div’ element. After that we disabled the expand/collapse button and call window.setTimeout() with delay one millisecond and passed collapse() as function that will be executed after elapsed delay. In the other words its recursive! The recursive call will end if height less than min (in this case we set the expand/collapse button value to ‘Expand’ and visibility of ‘div’ element to hidden). Setting div visibility to hidden automatically also hidden controls that placed inside ‘div’ element.

The expand() function work in similar way but we increment the height value by one, and passed expand() as first parameter of window.setTimeout(). Collapse function also set the visibility of ‘div’ element to visible if it was hidden. In the end of recursive call inside expand we set the value of expand/collapse button to ‘Collapse’.

The others should be work as it is so I think it doesn’t need explanations. I hope this useful.

Thanks and regards, Tri Sugiyantowo.

Posted in DOM, Javascript | Tagged: , , , , | 9 Comments »

Questions and Answers From Developers of SharpOS

Posted by triaslama on February 26, 2008

In this page you can see several answers from four active developers of SharpOS (Bruce Markham, William Lahti, Sander Van Rossen, Mircea – Christian Racasan). The article itself contains answers of their motivations, goals, technologies that they used, license of SharpOS, and many more interesting things.

As main information, the official website of SharpOS provides what we need to know about SharpOS. Check this out to get some insights on what the SharpOS is.

Thanks, Tri Sugiyantowo.

Posted in News | Leave a Comment »

RegExp Javascript Object Methods

Posted by triaslama on February 25, 2008

This post is supplement for my previous post on Javascript Regex, I am not explore something here just write about RegExp methods and hope this will useful. Below the list of RegExp method and its descriptions:

1. test(<string>). Test whether a supplied string matched a specified pattern the return value is true or false. Example:

var re = new RegExp(“^tr*i+$”);
var result = re.test(window.prompt(“Input string: “));
window.alert(“Result: “+result);

2. exec(<string>). Checks whether the supplied string match a predefined regular expression of a specified Regex object. Return the match string that matched if the pattern was found in the supplied string, or null if no match pattern in supplied string. Example:

var re = new RegExp(“catch”);
var result = re.exec(“I’ll catch you later!”);
window.alert(“Result: “+result);

3. compile(newPattern). Change the pattern of an RegExp object, this method does not return a value. Example:

var re = new RegExp(“^tr*i+$”);
var result = re.test(“hello tri”);
window.alert(“result: “+result+”, pattern will be changed.”);
result = re.test(“hello tri”);
window.alert(“result: “+result);

The behaviour of literal Regex and RegExp object in Regular expressions is a bit different, for simplicity I will choice literal Javascript Regex in most case, its up to you whether use literal syntax or RegExp object to handle regular expressions in Javascript.
Thanks and regards, Tri Sugiyantowo

Posted in Javascript | Tagged: , , , | Leave a Comment »

Javascript Regular Expressions

Posted by triaslama on February 23, 2008

Regular expressions (Regex) are patterns that used to match characters combination in strings. Creating regular expression in Javascript can be accomplished in two ways:

  1. Using regular expression literal, The literal expression must be placed inside slash characters (/<expression>/), ex: regEx = /tr*i+/.
  2. Using the RegExp object, ex: regEx = new RegExp(“tr*i+”).

Regular expressions has several special characters, the following are list of special characters and its description:






For characters that treated literally, indicates that the next character is special and should not be treated literally. (Expression /d/ literally match the character ‘d’, by placing a backslash in front of d (/\d/) the character become special mean to one digit character).

For characters that treated specially, indicates that the next character should be treated literally. (Character ‘*’ is special and means zero or more occurances of the preceding character to be matched. /t*/ means zero or more t characters, by preceding backslash in front of ‘*’ (‘/\*/’) it mean character ‘*’).



Matches the beginning of input.



Matches the end of input.



Matches the preceding character zero or more times.



Matches the preceding character one or more times.



Matches the preceding character zero or one time.



Matches ‘x’ and remembers the match.



Matches ‘x’ but doesn’t remember the match.



Matches ‘x’ only if ‘x’ is followed by ‘y’.



Matches ‘x’ only if ‘x’ is not followed by ‘y’.



Matches either ‘x’ or ‘y’.



n is a positive integer. Matches exactly n occurances of the preceding characters.



Where n is a positive integer. Matches at least n occurances of the preceding characters.



Where n and m are positive integer. Matches at least n and at most m occurances of the preceding character.



A character set. Matches any one of the enclosed characters.



A negated or complement of character set. Matches anything that is not enclosed in the bracket.



Matches a backspace.



Matches a word boundary.



Matches a non word boundary.



Where X is a control character. Matches a control character in a string.



Matches a digit character (range 0…9).



Matches any of non digit character. Equivalent to [^0…9].



Matches a form feed.



Matches a line feed.



Matches a carriage return.



Matches a single white space character, including tab, form feed, line feed.



Matches a single character other than white space.



Matches a tab.



Matches a vertical tab.



Matches any alphanumeric character including the underscore.



Matches any non word character.



Where n is a positive integer. A back reference to the last substring matching the n parenthetical in the regular expression (counting left parentheses).



Matches a null character (don’t follow with another digit).



Matches the character with the code hh (two hexadecimal digits).



Matches the character with the code hhhh (four hexadecimal digits).

So how we test that a string matches a specified character? The regular expression object or literal in Javascript support several method, one of them is test() -I think it will be nice if I posting about the Javascript regex methods, hopefully I can accomplished that-. Look at the following simple example on how we identify is that an input mathes the following expression:^ tr*i+$ (this expression means start with ‘t’ character, following by zero or more ‘r’ character, and ended by at least one ‘i’ character).

<title>Test Javascript Regex</title>
<script lang=”javascript” type=”text/javascript”>
var expression = /^tr*i+$/; // here we use the literal JS regex.

function submitRegExp(input,e)
if (e.keyCode==13) {
var result = expression.test(input);

function testRegex(input)
var result = expression.test(input);
<!–Something about javascript regular expressions–>
<input type=”text” id=”txt” onkeydown=”submitRegExp(this.value,event)” />
<input type=”button” id=”btn” value=”Test Regex” onclick=”testRegex(txt.value)” />

The above code will produce a textbox and a button inside a browser. Type something in the textbox then hit enter key or press the button, an alert box will appear and tell to us whether our input match with the /tr*i+/ regular expression.

Posted in Javascript | Tagged: , , , , | 2 Comments »

Singularity And SharpOS: Operating Systems Written in C#

Posted by triaslama on February 17, 2008

Microsoft researchers Jim Larus and Galen Hunt lead a project where they’ve built an OS using managed code (C#)! This project is known as Singularity. Look at what they do in their own words (cited from

“Singularity is a research project focused on the construction of dependable systems through innovation in the areas of systems, languages, and tools. We are building a research operating system prototype (called Singularity), extending programming languages, and developing new techniques and tools for specifying and verifying program behavior”.

This project is a similar effort with SharpOS that aimed to build an operating system in managed code (100% written using C#) bring by community. In the other words Singularity is a Ms Research initiative and SharpOS is a community effort, but both share the same aim: write an operating system based on .NET technology.

Quite interesting, because the operating system will be fully written in managed code (including the low level), especially written using my favourite language C#! This make me wonder how really strong C# is? Yes, C# is a dynamic language (I mean that -as far I know- it always change). Look at C# 1.0, then C# 2.0 (introduces generics, partial class, nullable types), and C# 3.0 (extension methods, inferred type variables, LINQ).

In my humble opinion C# is really cool! If you hesitate with what I say please try the above features and give me a comment about what you feel in using this language. Singularity and SharpOS maybe only prototype researchs not a fully fledged OS, however it still makes sense, this like exposing the power of C# and tell me that using managed code we can build an OS!

As time ongoing I hope there will be more resources and news available on these two projects, so we can see exactly what is happen.

Regards, Tri Sugiyantowo.

Posted in News | Leave a Comment »

Belajar Diakhir Pekan

Posted by triaslama on February 17, 2008

Setelah menanti akhirnya kudapatkan kembali akhir pekan yang berarti aku dapat mempunyai cukup waktu untuk mengerjakan apa yang kusuka, meskipun pada kenyataannya tidak selalu begitu (meskipun liburan terkadang aku mempunyai beberapa kegiatan yang lumayan menyibukkan -mudah – mudahan bukan supaya kelihatan sibuk sih-).

Pada akhir pekan ini akhirnya aku mempunyai cukup waktu untuk bermain – main dengan Javascript (lebih khusus lagi Javascript events), dan akhirnya aku mulai mengenal bahwa Javascript tidak sesederhana yang kubayangkan pada waktu awal saat aku mempelajarinya. Client side scripting menurutku menyimpan banyak manfaat dan kegunaan dalam pembuatan aplikasi – aplikasi Web, terlebih setelah munculnya Ajax hasrat untuk belajar Javascript rasanya semakin menggebu – gebu.

Hal ini sebenarnya didasari juga oleh apa yang kualami, ketika komputerku terhubung dengan internet rasanya aku menghabiskan sekian persen waktuku di depan komputer untuk hal – hal yang berhubungan dengan internet (aplikasi web) seperti misalnya browsing, cek email, blogging, lihat berita, coba – coba aplikasi web yang ‘cool’ banget dllsb. Akhirnya aku kepikiran juga bahwa internet akan semakin tersebar merata dan akan semakin banyak pula orang yang terhubung dengannya. Jadi untuk lebih mengeksplorasi potensi internet yang belum kutemukan dan untuk hal lainnya mengapa tidak mencoba mempelajari internet dan aplikasi – aplikasi yang berjalan diatasnya?

Kembali ke hal sebelumnya soal Javascript, rasanya masih banyak pertanyaan dan hal yang perlu kueksplorasi berkaitan dengan Javascript. Tapi ada satu hal yang saat ini terlintas di benakku dan lumayan mengganggu: bagaimana menghubungkan Javascript secara harmonis dengan server side scripting yang saat ini paling kukuasai -ASP.NET-. Hal ini karena menurutku dengan ASP.NET interaksi dengan Javascript dapat menjadi sangat minimalis (ini pendapatku saat ini aja).

Setelah mencoba HTML dan XML DOM yang menurutku sungguh menarik dan menantang aku berharap pada pekan – pekan selanjutnya aku akan menemukan hal – hal yang lebih menarik untuk kupelajari dan kueksplorasi. See you…

(Tri Sugiyantowo / triaslama)

Posted in News | Leave a Comment »

Javascript Events: Programmatically vs. Declaratively

Posted by triaslama on February 14, 2008

In the past few days I was enjoyed learning Javascript and I quite interested when I read about Javascript event! The Javascript event is a bit different from the events I knew before, and I guest it quite powerful too.
Look at the simple example:
when we declares an event programmatically we can do this (it works for IE and non IE browsers):

<title>Hello Javascript</title>
<script lang=”javascript” type=”text/javascript”>
document.onclick = function(e)
e = e||window.event;

We need do a reguler check with this line of code:

e = e||window.event;

because Internet Explorer (IE) recognize an event object throught the property of object window named ‘event’ so when we want to get the event object in IE programmatically it can be accomplished using ‘window.event’.

We can change the name of ‘e’ parameter above with the name we like (such ‘event’, ‘evt’, ‘myParameter’, etc.), and the code will still work fine.

but when I do this :
<title>Hello Javascript</title>
<script lang=”javascript” type=”text/javascript”>
function test(e)
<input type=”button” id=”btn” value=”Test” onclick=”test(e)” />


I type the path in browser’s address bar and click the button but the ‘e’ parameter is undefined! Then I wonder why, because in my opinion the event handler always receive one parameter (that is the event object itself).
As an experiment I change the code above so it looks like the following
<input type=”button” id=”btn” value=”Test” onclick=”test(event)” />
And now the code just work fine! What happen? is that Javascript event so strange like this?

So I do a litle experiment on how to declare event programmatically (through javascript code) and declaratively (through html tag), and then I found the answer.
When we declare events programmatically the event handler function can accept zero parameter (no parameter required), or the event handler function can accept one parameter (the event object itself).
When we declare events declaratively (specify the event handler inside a html tag, such as <input type=”button” onclick=”clickHandler()” />) we can pass any number of parameters, but when we want to pass the event object as parameter we must pass it as ‘event’ nothing else!

I think this is quite interesting story from Javascript event, and I hope I can find more interesting things. See you…

(Tri Sugiyantowo / triaslama).

Posted in Javascript | Tagged: , , , , | 2 Comments »

Jakarta Dalam Sebuah Resume

Posted by triaslama on February 10, 2008

Setelah empat bulan lebih berada di Jakarta, aku mulai mendapat gambaran tentang bagaimana sebenarnya kota terbesar Indonesia ini. Meskipun sebelumnya aku telah beberapa kali berkunjung ke Jakarta tapi itu hanya terjadi dalam waktu yang tidak terlalu lama, sedangkan gambaran tentang Jakarta selama ini lebih banyak kudapat dari cerita orang – orang disekitarku. Misalnya saja kakak-ku yang telah lama tinggal di Jakarta bercerita tentang kota ini (lalu lintas macet lah, perekonomian, wilayah di Jakarta dll.), om ku bercerita tentang suasana kerja di Jakarta, teman – teman yang terkadang memberikan opini tentang kota Jakarta.

Salah satu pertanyaan yang pertama kali terlintas ketika aku harus kerja di Jakarta “Apa aku bisa betah dengan suasana di Jakarta??”. Terlebih lagi banyak kudengar suara – suara yang menyiratkan citra negatif tentang ibukota ini, menurut salah satu keponakanku ibarat musik Jakarta itu ‘Rock n Roll’, siap – siap nahan stres kalo lagi kena macet, harus waspada dan siap kebanjiran kalo musim hujan, hati – hati dengan pergaulan disana, dan lain – lain, dan lain – lain, dll., masih banyak lagi yang lainnya.

Rasanya langsung tercipta stigma di pikiran ku bahwa “pindah ke Jakarta siap – siap lah dapat banyak masalah”. Tapi akhirnya tuntutan profesi sebagai seorang ‘Computer Scientist’ (wah mungkin terlalu berlebihan ya, aku kan baru lulus sarjana (S1) ilmu komputer -tapi cita – cita boleh kan-) membawa ku hadir di ibukota Indonesia ini berbekal ilmu, doa dari orang – orang terdekat (terutama ibuku), serta saran dari orang – orang yang lebih berpengalaman aku akhirnya berangkat juga ke Jakarta karena pekerjaan sudah menanti (aku bersyukur bisa dapat kerja sebelum wisuda sehingga nggak merasa terlalu nganggur, terima kasih ya Allah).

Akhirnya aku harus meninggalkan Jogja -kota tercintaku selama ini- menuju Jakarta -kota yang menurutku menyimpan banyak misteri dan pertanyaan untuk kutemukan sendiri jawabannya-. Yang paling berat ketika harus meninggalkan Jogja adalah meninggalkan ibuku sendirian (bunda maaf ya kalau kepergian anak mu membuat engkau sendiri).

Disela – sela rutinitas pekerjaan aku menyempatkan diri untuk mengenal Jakarta lebih jauh, rasanya bersemangat ketika aku akan mengunjungi suatu daerah di ibukota ini yang belum pernah ku datangi sebelumnya atau daerah yang sudah lama tidak kukunjungi. Blok M, Mangga Dua, Sudirman, Kota, Glodok, dan tempat lainnya. Akhirnya untuk sementara aku berasumsi bahwa Jakarta menurutku tidak se-ngeri yang kudengar sebelumnya, hal ini tentu dengan tidak mengesampingkan bahwa Jakarta mempunyai masalah – masalah kronis yang sangat sulit untuk dicari solusinya. Disini aku hanya berusaha menilai masalah secara objektif.

Syukurlah aku disini tinggal bareng dengan kakak ku, jadi tetap dekat dengan keluarga. Dan satu hal yang saat ini ada di pikiranku “Aku ingin tinggal di Jakarta lebih lama lagi dan mengenal kota ini lebih jauh lagi”. Ada baiknya juga kalau kita mengenal sesuatu bukan hanya dari kata orang yang mungkin akan banyak menimbulkan buruk sangka dan membuat kita memandang sesuatu dari arah yang keliru.

Soal masalah perkotaan kukira kota – kota besar lain juga mempunyai masalah serupa, tetapi dengan tingkatan yang berbeda – beda. Soal kemacetan Jakarta rasanya memang kota paling macet di Indonesia, mungkin malah salah satu yang paling macet di dunia! Tapi beruntung sekarang ada busway (bus transjakarta). Soal makanan ternyata -ini baru kutahu setelah aku mulai bekerja di Jakarta- di Jakarta banyak makanan enak!. Soal banjir, beruntung rumah kakak ku tidak terkena banjir hanya saja kami jadi terisolasi kalau banjir tiba karena tidak bisa kemana – mana juga. Soal hiburan & tempat rekreasi rasanya Jakarta salah satu yang paling lengkap dari wisata budaya, mal, sampai tempat rekreasi yang lain ada!

Semoga aku mendapat lebih banyak pengalaman berharga dan takdir Allah yang membuat ku tinggal di Jakarta akan membuat ku lebih bersyukur dengan apa yang selama ini kumiliki. Amin…

(Tri Sugiyantowo / triaslama)

Posted in Thoughts and Opinions | 3 Comments »

Kembali ke Depkeu

Posted by triaslama on February 7, 2008

Tanpa disangka – sangka pada tanggal 29 Januari 2008 Project Manager (PM) ku berkata kurang lebihnya “kamu kayaknya harus kembali lagi ke departemen keuangan untuk mbantu proyek disana”. Hal pertama yang terlintas di pikiranku saat mendengar hal itu adalah kenangan pada saat aku berada di kantor Pusintek Depkeu beberapa waktu sebelumnya dan bahwa saya akan bertemu teman – teman konsultan teknologi informasi departemen keuangan yang lain.

Akhirnya pada hari Kamis, tanggal 31 Januari 2008 akupun untuk pertama kalinya setelah beberapa saat kembali ke gedung Pusintek Depkeu. Memasuki kompleks tersebut serasa sudah sangat familiar bagiku, dengan hati yang ringan aku mulai melangkahkan kaki memasuki kompleks departemen keuangan menuju gedung Pusintek. Sesampainya di gedung Pusintek dimulai dengan senyuman petugas keamanan (entah karena dia masih ingat dengan aku atau karena aku ke-GR-an mungkin memang sifatnya yang ramah), akupun mulai menuju ruang yang dulu pernah kutempati. Tidak ada perubahan yang berarti pada ruangan itu kecuali satu hal tentunya: aku tidak lagi berada di ruangan itu untuk beberapa saat!

Lalu akupun ke ruang sebelah dan bertemu dengan salah satu temanku kami pun berbincang – bincang seru -mungkin karena itu pertemuan pertama kami setelah beberapa saat-. Setelah bertemu dengan partner ku (lebih jelasnya dia teman coding selama di Depkeu), kami ngobrol beberapa saat serta dia menunjukkan perubahan yang telah terjadi pada proyek yang kami kerjakan, akhirnya akupun disarankan untuk pindah ke ruang bawah tempat dia sekarang berada”biar komunikasi lebih mudah” begitu kira – kira katanya.

Sekarang akupun menempati ruang yang lain (yang untungnya lebih bagus) dan melanjutkan petualangan ku di Departemen Keuangan. Banyak hal yang dapat kita ambil dari apa pengalaman ku di Departemen Keuangan selama ini, diantaranya kembali melanjutkan kemitraan dengan teman – teman konsultan Depkeu.

Berikut ini resume dari beberapa rekan – rekan yang bekerja di proyek IT Depkeu dan saya harap ini akan semakin bertambah panjang seiring dengan berlalunya waktu di Depkeu:

Project Daily Activity Depkeu:

Anthony (software developer), di proyek Depkeu ini dia yang posisinya sama dengan aku, oleh karena itu aku paling sering ngomong – ngomong sama dia. Muhammad Renovera (system administrator), mas Reno ini sering kali juga berperan sebagai tester dan juga ketemu dengan klien untuk hal yang teknis. Aan Junaedi (business analist), mas Aan ini yang jadi pimpinan teknis kami bertiga (saya, Anthony, dan mas Reno). Mas Said (project manager) mas Said yang berperan dalam hal urusan komunikasi dengan klien.

Rekan Ruang Sebelah:

Kayaknya sebutan ini tidak menggambarkan posisi mereka, tapi saya lebih mudah dan lebih enak kalo menyebutnya seperti itu (he..he..he..). Sari, Bevy & Candrasari, ketiga – tiganya lumayan akrab dengan kami apalagi selama di Departemen Keuangan kami lumayan sering bertemu. Pertemuan kami mulai dari bicara – bicara ringan, ketemu di rapat, pulang bareng waktu naik busway, atau pas ada acara bareng lain.

Rekan Cisco Lab:

Rustamaji (project manager), pak Rustam ini PM yang sering ngobrol – ngobrol dengan kami. Mas Rudi Darmawan, mas Hengky, dan banyak lagi yang lainnya.

Rekan “The Next Project Depkeu”:

Pak Paulus, mas Dedy, mas Tito, dan sekarang tambah satu lagi Hanif.

Banyak hal yang bisa diceritakan selama saya berada di Departemen Keuangan, dan saya berharap akan makin banyak ilmu, pengalaman, serta teman baru yang saya dapat. Terima kasih untuk semua teman – teman kerja selama di Depkeu termasuk yang belum saya sebutkan diatas (mungkin saya kelupaan menyebutnya) atas kerja samanya selama ini. Terima kasih untuk kompleks Departemen Keuangan atas tempat dan kenangan yang telah diberikan, tidak ketinggalan juga untuk suasana menyenangkan selama di Depkeu.

Terima kasih untuk Allah SWT yang telah memberikan semuanya kepada ku pada waktu yang mungkin tidak pernah kusangka – sangka.

(Tri Sugiyantowo / triaslama).

Posted in News | 1 Comment »

Javascript: Adding OnMouseOver And OnMouseOut Using DOM

Posted by triaslama on February 2, 2008

The DOM (Document Object Model) is a standard way to access a document within a browser. The DOM could be Core DOM, HTML DOM, XML DOM. The DOM can be very handy and useful when we need to access the specific elements of the document and add some effects to them.

The two of the most useful of the DOM methods could be getElementById and getElementsByTagName. The getElementById will return an element that specified as a parameter in getElementById DOM method. The parameter that passed is a string that represents the ID of an element. The getElementsByTagName -that receive one parameter, the element name as string- will return array that represents elements in the document with the tag name specified as a parameter in getElementsByTagName method.

Here a simple example utilization of getElementById and getElementsByTagName method to add an effect -change the background color- when the mouse cursor over a <li> element and reset the background color when then mouse cursor out a <li> element:


<title>Test Something</title>
<script lang=”javascript” type=”text/javascript”>
window.onload = function()
var lis = document.getElementsByTagName(“li”);

for (var i=0;i<lis.length;i++) {
lis[i].onmouseover = function()
{ = “gainsboro”;
lis[i].onmouseout = function()
{ = “white”;
<li>First Element</li>
<li>Second Element</li>
<li>Third Element</li>

Let’s look at the code in more details. The body of the document consist of an unordered list (ul). The <ul> element have three list item <li> element as childs. The scenario is simple change the background color of <li> element when the mouse is moved over around them and reset the background color of <li> element when the mouse is moved out of them.

To attain this functionalities we using Javascript and DOM to access the document specified in the <body> element. The first line of our Javascript code is window.onload, this function is executed when the window object is fully loaded, in the other word the window.onload executed only when the elements inside a document has been rendered.

To handle window.onload we create an inline function that tells what must be done when the page has been loaded. In this case we will retrieve all of <li> element in a document using getElementsByTagName DOM method and save this element in a variable named lis.

var lis = document.getElementsByTagName(“li”);.

The next step iterate through all of <li> element inside lis variable:

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

But the most important part here we install two events for each of <li> element, onmouseover (happens when the mouse cursor over an <li> element) and onmouseout (happens when the mouse cursor out from an <li> element).

To handle the onmouseover event we create an inline function that changes the background color of <li> element when the mouse cursor over it.

lis[i].onmouseover = function()
{ = “gainsboro”;

To handle event when the mouse cursor out of an <li> element we create an inline function that reset the background color back to its original color.

lis[i].onmouseout = function()
{ = “white”;

The word this above refers to the <li> element that being iterated. When everything is ready and we move the cursor over an <li> element we should see that the background color of <li> that is being hovered change to gainsboro, and the background color will back to white when the mouse cursor leaves the specified <li> element.

The Javascript and DOM can have more functionalities and usages I hope this simple article will give me and all the readers a clue about the advantage of DOM.

Posted in DOM, Javascript | Tagged: , , , , , | 27 Comments »