Q&A FAQ

Frequently Asked Questions

I have taken outmost care to provide as accurate and clear answers as possible, and provide the neccessary details. If you find any answers incomplete, errorneous, or have anything to add to my answer, please inform me. As this Q&A service is open to all categories of users, I have also tried to answer as appropriately as possible, like being technical or non-technical. Meanwhile, I sincerely hope you will find the information here useful.

Table of Contents

Q1. What is the UART, and it's relation with modems ?

Q2. One day I found a great java script app that kicked up another browser window (half size) that was frames based and looked like a windows help file. Any idea where to find that again?

Q3. How do I execute JavaScript commands after a user clicks on an image ?

Q4. Could you explain a little further what you mean by "hidden" forms on your search script?

Q5. How do I detect whether the browser supports JavaScript ?

Q6. How do I automatically reload the current document in JavaScript ?

Q7. Can I copy the contents of a form from one browser window to another browser window ?

Q8. Is it possible to call a JavaScript function from another frame/window ?

Q9. Can JavaScript be used to print the current document, read/write files, change browser settings, etc. ?

Q10. Is it possible to disable textfields in HTML forms using JavaScript ?

Q11. How do I change the contents of one frame/window from another frame/window ?

Q12. How do I do periodic updates of form elements and images in JavaScript ?

Q13. In JavaScript, how do I check if an expiry date entered in the form has passed ?

Q14. How do I detect when the mouse moves over (or out of) some text or image ?

Q15. How do I change an image (when a mouse moves over it) ?

What is the UART, and it's relation with modems ?

UART stands for Universal Asynchronous Receiver/Transmitter. It is a chip found with the computer's serial port system, and is an important factor to consider when purchasing a new modem or upgrading to a new one. Generally, there are two types of UART chips, the 8250 and 16550. The 8250, now rendered obselete by the 16550, can only handle modems with speeds up to 14.4 Kbps. To use 28.8 Kbps or 33.6 Kbps modems, you would need the 16550 UART. One would mostly find 8250 UARTs in 486 systems; Almost (if not) all Pentium-class and above systems feature 16550 UARTs, which would be able to handle communications speeds up to 115.2 Kbps. However, because of bugs in the design of the UART, only the 16550AFN is truly reliable. (or the 16550AN)

For more detailed (technical, programming) information, please refer to this document.

Q. One day I found a great java script app that kicked up another browser window (half size) that was frames based and looked like a windows help file. Any idea where to find that again?

Well, it is possible to use JavaScript to open up another browser window, and yes, have frames, but "looking like" a "windows help file" is really vague. Probably what you mean by "looking like" a "windows help file" is that the new window lacks the conventional Navigator toolbar, status bar, menubar, etc. This is also possible. It is also possible to control the size of the new window using JavaScript.

To open a new browser window, use the window.open method (function). This method accepts three parameters, the third parameter being optional. The first parameter specifies the URL to open (if the document specified in the URL uses frames, then the new browser window will also have frames) in the new window, the second parameter specifies the new window's name, and the last paramter specifies various options, such as the inclusion of the toolbar, status bar, etc. in the new window. For example, the following JavaScript statement opens a new browser window that has no toolbar, no status bar, no menubar, no scollbars, and has a width of 600 pixels and a height of 200 pixels.

window.open("examples/q1e0.htm","NewWindow","toolbar=no,location=no, directories=no,status=no,menubar=no,scrollbars=no,width=600,height=200");

Source code of q1e0.htm:
<html>
	<frameset rows="50%,50%">
		<frame src="q1e1.htm">
		<frame src="q1e2.htm">
	</frameset>
</html>

Source code of q1e1.htm:
<html>
	<body bgcolor="#ffffff">
		<center>
		<p><b>Frame 1</b>
		<center>
	</body>
</html>

Source code of q1e2.htm:
<html>
	<body bgcolor="#ffffff">
		<center>
		<p><b>Frame 2</b>
		<center>
	</body>
</html>

For more information, see the JavaScript Authoring Guide, or for more JavaScript tips and tricks, visit JavaScript Innovations.

Q. How do I execute JavaScript commands after a user clicks on an image ?

To execute JavaScript code after a user clicks on an image, you will have to use a combination of an <img>(image) tag and a <a>(anchor) tag. Shown below is the neccessary HTML code.

Script execution after image click:
<html>
  <head>
    <script language="JavaScript">
      function dosomething(){
        alert("Image clicked !")
      }
    </script>
  </head>
  <body>
    <a href="javascript:void(0)" onClick="dosomething()">
    <img src="someimage.gif" border=0>
    </a>
  </body>
</html>

href="javascript:void(0)" essentially means that when the user clicks on the hyperlink (in this case, the image), nothing happens, i.e. the user is not hyperlinked to another location. However, because of the onClick event handler, (which is defined by the code onClick="dosomething()" in the above example) JavaScript code is executed when the user clicks on the hyperlink (image). In the example, the function dosomething() is called by the event handler.

For more information, see the JavaScript Authoring Guide.

Could you explain a little further what you mean by "hidden" forms on your search script?

This question is asked in relation to the "Multiple Search Engine Select" Example in JavaScript Innovations. What I meant by "hidden forms" was the use of HTML forms that had no visible input elements. This is not because there are no input elements, but rather, I intentionally made all the input elements "hidden". In this way, I could prepare these "hidden" forms for each of the different search engines, allowing me to specify search-engine specific options in their corresponding "hidden" forms.

In this way, once the surfer has entered the search terms, selected a search engine and clicked on the "Search!" button, my JavaScript code can come into play, transferring the search terms from the "Search For:" input element in the generic, visible input form to the "query" input element into the relevant search engine's "hidden form". Then, the JavaScript code submits the relevant "hidden" form to the relevant seach engine. This completes the process, and I have in essence achieved "Multiple Search Engine Select" in a single input form (seemingly so, because only one is visible, and the rest are "hidden").

Q. How do I detect whether the browser supports JavaScript ?

Seriously, there is not way to detect if the browser supports JavaScript, since the JavaScript code with the detection logic wouldn't execute anyway if the browser does not support JavaScript. However, there is a way to route JavaScript-enabled browsers and browsers that do not support JavaScript to different HTML documents (i.e. URLs).

Then, the question would be : "How do I route different users automatically to different Web pages, depending on whether the browser supports JavaScript ?". The solution to this problem works exactly on the principle that only JavaScript-enabled browsers can execute JavaScript code. Otherwise, the JavaScript code would be ignored. Therefore, we can insert such a line of JavaScript code (that will execute everytime the HTML document is loaded):

window.location="JavaScript_Version_of_Page.html"

Such a line of code would be placed in the "onLoad" event handler attribute of the <body> tag of the version of the HTML document for non JavaScript-enabled browsers. So, only JavaScript-enabled browsers would execute the code, and would be routed to the JavaScript-enabled version of the HTML document. In essence, non JavaScript-enabled browsers would stay at the current Web page (which is for non JavaScript-enabled browsers anyway), and JavaScript-enabled browsers would execute the code, and be routed to the JavaScript-enabled version of the Web page !

Q.	How do I automatically reload the current document in JavaScript ?
A.	To reload the current HTML document using JavaScript is very simple. Simply call the `reload()` JavaScript function. The syntax is: window.location.reload();

Q. Can I copy the contents of a form from one browser window to another browser window ?

Recently, I have discovered a property of the window object that somehow missed my eye. In fact, alot of people may not know it because it doesn't appear in the section describing the window object in Netscape's JavaScript Guide for JavaScript 1.1. It is the window.opener property. For child windows opened with the window.open function, the window.opener property is a reference to the child's parent window. Thus, the parent and child window now can obtain references to each other, and access each other's objects and properties. The earlier answer I have given below is thus unsatisfactory, but I have left it here anyway as a demonstration of JavaScript's flexibiliy.

Between any two (or more) browser windows, it is impossible for one browser window to access another browser window's properties (including form data), unless the latter window was created by the former window by using the window.open() JavaScript function. However, there is still no way that JavaScript code in the latter window can access the former window's properties.

Put more clearly, if window A created window B using the window.open() function, window A can access window B's properties, but not vice versa ! This is because when window A creates window B, window A can obtain a reference to window B. As for window B, it has no way of obtaining a reference to window A, because window A cannot access window B's functions and variables, and can only access window B's document properties, i.e. window.document.*

Thus, the communication between the two windows is uni-directional, from the parent window to the child window it created.

Back to the original question, the answer is yes, it can be done, but in a very roundabout manner. The parent window can certainly copy its form's contents to its child window, or copy the child window's contents to its own window. However, if the child window want to copy it's form contents to the parent window, then it will have to signal the parent window to do so !

The example below does exactly this. Clicking on the button will open a child window, in which you can enter a message to the text field. After you click on "OK" in the child window, the child window will signal the parent window to copy the message over and to close itself (the child window). However, since the parent window (this FAQ document) cannot access the child window's functions and variables, it can only know when to take action by examining a flag hidden in the child window's form. The flag is basically just a hidden form field.

Code in parent window:
<html>
  <head>
    <script>	
      var ChildWindowRef;

      function pollChildWindow(){
        if (ChildWindowRef.document.ChildWinForm.Flag.value=="1"){
          document.QFORM.PutMsg.value=[Next Line]
ChildWindowRef.document.ChildWinForm.Message.value;
          ChildWindowRef.close();
        }else setTimeout("pollChildWindow()",500);
      }
    </script>
  </head>
  <body>
    <form name="QFORM">
      <input type=button value="Open Child Window !" onClick=[Next Line]
"ChildWindowRef=window.open('examples/childwin.htm','ChildWindow',[Next Line]
'toolbar=1,location=0,directories=0,status=0,menubars=0,height=200');[Next Line]
setTimeout('pollChildWindow()',1000)">
      <br><br>
      Message from Child Window:<br><input type=text value=[Next Line]
"Text from child window will be copied here !" size=40 name="PutMsg">
    </form>
  </body>
</html>

Code in child window: (childwin.htm)
<html>
	<head>
		<title>Child Window</title>
	</head>
	<body>
		<center>
		<form name="ChildWinForm">
			<input type=hidden name="Flag" value="0">
			Message: <input type=text name="Message" size=40>
			<input type=button value="Ok"[Next Line]
onClick="window.document.ChildWinForm.Flag.value='1'">
		</form>
		</center>
	</body>
</html>

Q. Is it possible to call a JavaScript function from another frame/window ?

Yes and No. It all depends on what you mean by "JavaScript function". If you're refering to the methods of the built-in Objects in JavaScript, such as window, document, Image, form input elements, etc., then it is possible to call these methods. However, if you're refering to functions you're defined and written yourself within the <SCRIPT> tags, then it is not possible to call these functions from another browser window.

Q.	Can JavaScript be used to print the current document, read/write files, change browser settings, etc. ?
A.	No (as of JavaScript 1.1, at least !). All of the above are not possible to implement using JavaScript because of inherent security concerns.

Q. Is it possible to disable textfields in HTML forms using JavaScript ?

No, it is impossible to disable textfields in HTML forms the same way textfields are conventionally disabled in Windows (i.e. the Textfield is greyed out). However, while you can't "visually" disable them, you can very well functionally disable textfields.

This is done by first establishing a condition in which you want the textfield to be disabled. (For example, when a checkbox is checked). Then, you write an event handler for the onFocus event handler of the textfield. The event handler should check the condition you decided on earlier, and if the textfield should be disabled, the event handler must call the blur() method of the textfield object (remember that the blur() method snatches the input focus away from a component, such as the textfield). In this way, you can ensure that the textfield never gets the input focus, i.e. the user cannot edit the textfield's contents while the condition holds.

Viola, and you have "disabled" the textfield ! The example below illustrates my point; check the checkbox, and you won't be able to edit the textfield.

Shown below is the corresponding HTML and JavaScript I used to create the above example. Easy, isn't it ?

Source code (HTML and JavaScript):

<form name="DisableExample">

  <input type="checkbox" name="DisableFlag" onClick="[Next Line]
if (document.DisableExample.DisableFlag.checked==true) [Next Line]
document.DisableExample.DisableExTF.blur(); [Next Line]
else document.DisableExample.DisableExTF.focus();"> [Next Line]
Disable textfield below ?<br><br>

  <input type="text" name="DisableExTF" size=33 onFocus="[Next Line]
if (document.DisableExample.DisableFlag.checked==true) [Next Line]
document.DisableExample.DisableExTF.blur()" [Next Line]
value="This textfield can be disabled !">

</form>

Note the names of the form elements and the blur() and focus() methods.
I have made them bold and underlined respectively.

Q. How do I change the contents of one frame/window from another frame/window ?

To change the location of a window/frame, you must assign the new URL to it's location.href property. And of course, to do this, you must gain the window reference of that frame/window. To do this, you must use the parent property. Netscape's JavaScript Authoring Guide defines the parent property like this:

The parent property is a synonym for a window or frame whose frameset contains the current frame.

As such, you can use the parent property to get a window reference to the window with the frameset and access the other frames. For example, in a frameset, we have two Frames, FrameOne and FrameTwo. To change the location of FrameTwo from FrameOne, simply use the following statement (in FrameOne):

parent.FrameTwo.location.href="http://www.somewhere.com/index.html"

The example below opens a new window with two Frames, and the location of the second frame can be changed from the top frame.

Source code of the HTML document with the frameset:
<html>
  <head>
    <title>
      Example: Change Frame location from another Frame
    </title>
  </head>
  <frameset rows="40%,*">
     <frame name="FrameOne" src="FrameOne.html">
     <frame name="FrameTwo" src="FrameTwo_0.html">
  </frameset>	
</html>

Source code of the top frame (FrameOne.html):
<html>
  <body bgcolor="white">
    <center>
    <form name="Temp">
      <select name="Links">
        <option value="FrameTwo_0.html">First Link
        <option value="FrameTwo_1.html">Second Link
        <option value="FrameTwo_2.html">Third Link
      </select><spacer type="vertical" size=20>
      <input type="button" value="Change Location now !" onClick="[Next Line]
parent.FrameTwo.location.href=[Next Line]
document.Temp.Links.options[document.Temp.Links.selectedIndex].value">
    </form>
    </center>
  </body>	
</html>

Q. How do I do periodic updates of form elements and images in JavaScript ?

It is possible to run parts of your JavaScript periodically to do certain tasks, such as changing an image to show the next frame in an Animation. To do this, you need to use the setTimeout method of the window object. setTimeout evaluates an expression after a specified number of milliseconds have passed. For example, if the following statement is executed, an alert box will pop up after three seconds with the message "Wake UP !":

setTimeout("alert('Wake UP !')",3000);

Here is a more complex example which displays a count-down in a Textfield. The source code is also shown.

Source code:
<html>
  <head>
    <script>
      var Current=-1;
      function decCount(){
        document.TimeoutEx.CountDownTF.value=Current;
        Current--;
        if (Current>=0) setTimeout("decCount()",500);
      }
    </script>
  </head>
  <body>
    <form name="TimeoutEx">
      <input type="button" value="Start countdown !" onClick="[Next Line]
if (Current==-1){Current=10;decCount();}"><br><br>
      <input name="CountDownTF" type="text" value="" size=3>
    </form>
  </body>
</html>

Note that in the function decCount, I used setTimeout to call myself(the function) again after 500 milliseconds to update the countdown. Then, once the variable Current reached a value of -1, I stopped the countdown by just exiting the function without the call to setTimeout.

Q. In JavaScript, how do I check if an expiry date entered in the form has passed ?

To check if the expiry date has passed, we must of course compare the expiry date with the current date. If the expiry date is before, or on the current date, then the expiry date has passed. To compare the two dates, we use the Date object. We create a Date object for the expiry date, and a Date object for the current day.

To compare the dates, we call the getTime method of both Date objects to get the number of milliseconds since 1 January 1970 00:00:00 for both dates. With this absolute scale, we can compare the two dates easily. Shown below is an example form that will test if a given expiry date has passed or not.

Expiry Date (DD-MM-YYYY): - -

Shown below is the source code of the above example:

Source code:
<html>
  <head>
    <script>
      function checkExpiry(){
        EDate=new Date(parseInt(document.TestExpiry.EYear.value),[Next Line]
parseInt(document.TestExpiry.EMonth.value)-1,[Next Line]
parseInt(document.TestExpiry.EDay.value));
        Today=new Date();
			
        if (EDate.getTime()<=Today.getTime())
          alert("Expiry date has passed !");
        else
          alert("Ok, the expiry date has not been reached yet");
      }
    </script>
  </head>
  <body>
    <center>
    <form name="TestExpiry">
      Expiry Date (DD-MM-YYYY): <input type="text" name="EDay" size=3> [Next Line]
- <input type=text name="EMonth" size=3> [Next Line]
- <input type=text name="EYear" size=5><br><br>
      <input type="button" value="Check !" onClick="checkExpiry()">
    <form>
    </center>
  </body>
</html>

Note that I have decremented the month the user had entered by one (the part of the source code is in bold magenta). This is because the Date object interprets the months from January to December with values from 0 to 11, not 1 to 12.

Q. How do I detect when the mouse moves over (or out of) some text or image ?

In JavaScript 1.1, it is only possible to detect when a mouse moves "over" or "out of" a hyperlink. So, if you want to detect mouse movement (i.e. in and out) over the image/text, then you must make the image/text a hyperlink by enclosing it within the anchor (<A></A>) tags. To implement event handlers for the mouse-in and mouse-out events, you assign the "onMouseOver" and "onMouseOut" attributes of the anchor tag with your corresponding JavaScript code. The example below, shown with it's JavaScript source code, illustrates how to detect the mouse events and assign messages to the browser's status bar accordingly. For futher explanation of the "javascript:void(0);" (coloured green) that appears in the source code, please refer to a related FAQ entry.

Text	Image
Some text ....

Source code of the above example:
<table border=1 cellpadding=5>
  <tr>
    <td align=center width=100 bgcolor=gray>Text</td>
    <td align=center width=100 bgcolor=gray>Image</td>
  </tr>
  <tr>
    <td align=center><a href="javascript:void(0);"[Next Line]
onClick="alert('Hey, you clicked on me (The text) !')"[Next Line]
onMouseOver="status='Mouse is over the text !';return true;"[Next Line]
onMouseOut="status='Mouse ran away from the text !';return true;">
      Some text ....</a>
    </td>
    <td align=center><a href="javascript:void(0);"[Next Line]
onClick="alert('Hey, you clicked on me (The smiley) !')"[Next Line]
onMouseOver="status='Mouse is over the smiley !';return true;"[Next Line]
onMouseOut="status='Mouse ran away from the smiley !';return true;">
      <img src="smiling.gif" border=0></a>
    </td>
  </tr>
</table>

Note the "return true" in the onMouseOver and onMouseOut event handlers. You must return a value of true from the this two event handlers if you're changing the value of the status bar, which I have done.

Q. How do I change an image (when a mouse moves over it) ?

To change the image displayed by the <img> HTML tag, simply assign the filename of the new image to the "src" property of the image object concerned. For example, we have an Image object named HelloImage. To change the image this Image object is associated with, the required JavaScript statement is:

document.HelloImage.src="AnotherImage.jpg";

Simple, isn't it ? Just keep in mind that every <img> HTML tag corresponds to an Image object, and it's name is determinded by the "name" attribute of the <img> tag. The example below illustrates what I have just discussed. The example changes the image displayed (an image with the text "Hello") whenever the mouse moves over it (to an image with the same, but highlighted "Hello" text).

Source code of the above example:
<table border=1 cellpadding=0 cellspacing=0><tr><td>
	<a href="javascript:void(0)" 
onMouseOver="document.HelloImage.src='examples/Hello_Bright.jpg'" 
onMouseOut="document.HelloImage.src='examples/Hello_Normal.jpg'">
	<img border=0 name="HelloImage" src="examples/Hello_Normal.jpg"></a>
</td></tr></table>

Please report any errors, misspellings, or any other mistakes and oversights to Kong Eu Tak. Thanks ! :-)

[Home|Go Back]