Statements. Functions. Events.

Statements.

We already saw in the previous lecture simplest JavaScript statements -- declaration of new variables and assignments. Using just assignments we can significantly change the way our document looks using JavaScript. For example, the following statements 
<script>
window.document.bgColor = "#0a6811";
window.document.fgColor = "#f3bbd3";
</script>
(Here is the complete example.) will change the background color of the document and color of the text. However, the question is "How to execute them?". The simplest answer to this question is really simple . We just need to include these four lines in the HTML file. When a browser reads the document it immediately runs almost all JavaScript code. That is, our code will be executed. That means, in particular, that the colors will be changed immediately after down loading. This is not very interesting because we could do the same thing using CSS or just changing parameters of the tag body. Thus, our next question is "Is there any way to control the time of the code execution?". Fortunately, answer to this question is "Yes"!!! Idea of events will give us control over what and when should be executed.

But before talking about events we would like to discuss what code will not be executed immediately upon seeing it by the browser. The code which is note executed like this is grouped into functions.

Functions.

Functions provide designers a way to
  • group a set of statements together
  • and not let the browser immediately execute these statements.
    To group a set of instructions in a function we first need to say the keyword function, then specify the name of this new function (function name can have alpha-numerical symbol in it and underscore symbol; it cannot start with a digit, though; you are not allowed to give the same name to two different functions), then put parentheses. Inside these parentheses you can list all parameters you function will take. If you function does not need any parameters, then leave the space between the parentheses empty. After the parentheses curly brackets go. Inside the curly brackets you need to put all instructions of the function. Thus, the general syntax of a function description is: 
    function function_name([param1, param2, param3])
{
  statement_1;
  statement_2;
  ...
  last_statement;
}

    Let's create a function that takes two arguments color of the text and background color and sets these colors as colors of the document: 

    <script>
function setColors(textcolor, bgcolor)
{
  window.document.fgColor = textcolor;
  window.document.bgColor = bgcolor;
}
</script>
    Now to change the colors we need to execute this function passing it the desired colors. To execute a function we need to write a statement that contains just the name of the function and parentheses with its arguments. For example, to set colors white (for background) and black (for text) we need add a line of JavaScript code: 
    setColors("black", "white");
    However, we run into the same problem as we did before. As far as we the browser sees this statement it will immediately run it and the colors will be changed. (See the complete example.) How to postpone this?

    Events.

    JavaScript can handle events generated by user of a web page and time events. We can classify all events into several groups: Every element can have its own handler of any event this element is able to recognize. A JavaScript event handler is the code that responds to initiated events. To set a handler of a specific event for a particular element we need to declare new property for the element. The name of the property is the name of the event with "on" in front of it and the value of the property is a string containing JavaScript code. Traditionally, if this code is relatively short, then the string contains the code itself. If the code is more than one line, then it's usually put in a function and the handler code string is nothing but statement calling this function. Let's consider the following example. We want to create a link and change page's colors when user moves cursor over it. To achieve this we'll define a handler for MouseOver event for the link. As a handler for the color we'll use function setColors defined above: 
    <a href="#" onMouseOver="setColors("white", "black");">Move cursor here to change colors</a>
    This link points to the complete example.

    Here is another example. We will create three pictures. One of them is bigger than the other two and initially empty. The other two are (of course) smaller and if a user clicks on any of them, then this picture of bigger size appears on the place of bigger picture. To do this we need to define a handler for event Click for the smaller pictures. In the handler we need to use property src of an element img. The value of this property as you know defines location of the graphical file containing the image. By reassigning the value we can change the image. To be able to access the img element we give them IDs. Recall from the previous lecture that knowing ID of an element we can access it by using document.all['ID_of_the_element']
    Code Result 
    <table>
 <tr> 
  <td>
   <img id=smimg1 src="../images/box.gif" 
	 onClick="document.all['bigimg'].src=document.all['smimg1'].src">
  </td> 
  <td>
   <img id=smimg2 src="../images/duel.gif" 
	 onClick="document.all['bigimg'].src=document.all['smimg2'].src">
  </td> 
 </tr>
 <tr>
  <td colspan=2 align=center>
   <img width=100px height=50ps id=bigimg src="../images/whitesquare.bmp">
  </td>
 </tr>
</table>

    You can see what kind of events you can use and on which elements by playing with this event tutor.